/* ============================================================
   Kanbang — Design System (DaisyUI night theme)
   ============================================================ */

/* === 1. Reset & Base === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Digital Obsidian color palette (from master) */

  /* Surface Hierarchy */
  --background: #131313;
  --surface: #131313;
  --surface-container-lowest: #0e0e0e;
  --surface-container-low: #1c1b1b;
  --surface-container: #201f1f;
  --surface-container-high: #2a2a2a;
  --surface-container-highest: #353534;
  --surface-bright: #3a3939;
  --surface-variant: #353534;
  --inverse-surface: #e5e2e1;

  /* Legacy aliases */
  --surface-0: #131313;
  --surface-1: #1c1b1b;
  --surface-2: #201f1f;
  --surface-3: #2a2a2a;
  --surface-4: #353534;
  --surface-lowest: #0e0e0e;

  /* Text */
  --on-surface: #e5e2e1;
  --on-surface-variant: #c2c6d6;
  --text-muted: #8c909f;
  --text-dim: #5c5c66;
  --outline: #8c909f;
  --outline-variant: #424754;

  /* Primary (Blue) */
  --primary: #adc6ff;
  --primary-container: #4d8eff;
  /* KD-604: per-org brand accent for draw mode; overridden inline by JS. */
  --brand-accent: var(--primary-container);
  --primary-fixed-dim: #adc6ff;
  --on-primary: #002e6a;
  --on-primary-container: #00285d;

  /* Secondary */
  --secondary: #b1c6f9;
  --secondary-container: #304671;

  /* Tertiary (Orange) */
  --tertiary: #ffb786;
  --tertiary-container: #df7412;

  /* Error */
  --error: #ffb4ab;
  --error-container: #93000a;

  /* Status Chips */
  --status-backlog: #8c909f;
  --status-backlog-bg: rgba(140, 144, 159, 0.12);
  --status-spec: #df7412;
  --status-spec-bg: rgba(223, 116, 18, 0.12);
  --status-progress: #304671;
  --status-progress-bg: rgba(48, 70, 113, 0.2);
  --status-testing: #ffb786;
  --status-testing-bg: rgba(255, 183, 134, 0.12);
  --status-deployed: #4ADE80;
  --status-deployed-bg: rgba(74, 222, 128, 0.12);

  /* Functional colors */
  --color-green: #4ADE80;
  --color-amber: #FBBF24;
  --color-red: #F87171;
  --color-blue: #60A5FA;
  --color-purple: #A78BFA;
  --color-slate: #64748B;
  --color-pink: #F472B6;
  --color-teal: #2DD4BF;

  /* Chart palette (KD-325 Token Spend) — monotone blue ladder so charts
     stay calm and only carry colour where it signals cost heat. */
  --chart-blue-1: #5b8def;
  --chart-blue-2: #7aa7ff;
  --chart-blue-3: #9bbcff;
  --chart-blue-4: #bcd2ff;
  --chart-blue-5: #3a4a66;
  --chart-other:  #3a4a66;

  /* Spacing (4px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;

  /* Semantic aliases */
  --text-primary: var(--on-surface);
  --text-secondary: var(--on-surface-variant);
  --muted: var(--text-muted);
  --color-primary: var(--primary-container);
  --color-error: var(--error);

  /* Ghost border */
  --ghost-border: rgba(66, 71, 84, 0.12);
  --ghost-border-hover: rgba(66, 71, 84, 0.25);
  --ghost-border-light: rgba(66, 71, 84, 0.1);
  --ghost-border-subtle: rgba(66, 71, 84, 0.06);

  /* Tint tokens (obsidian primary: #4d8eff) */
  --primary-tint-subtle: rgba(77, 142, 255, 0.06);
  --primary-tint-light: rgba(77, 142, 255, 0.10);
  --primary-tint-medium: rgba(77, 142, 255, 0.15);
  --primary-tint: rgba(77, 142, 255, 0.18);
  --primary-tint-strong: rgba(77, 142, 255, 0.22);
  --primary-tint-heavy: rgba(77, 142, 255, 0.30);
  --primary-border-light: rgba(77, 142, 255, 0.20);
  --primary-border: rgba(77, 142, 255, 0.30);
  --primary-border-strong: rgba(77, 142, 255, 0.40);
  --primary-border-vivid: rgba(77, 142, 255, 0.55);
  --primary-glow: rgba(77, 142, 255, 0.30);
  --primary-focus: rgba(77, 142, 255, 0.25);
  --primary-focus-light: rgba(77, 142, 255, 0.15);
  --primary-focus-dim: rgba(77, 142, 255, 0.08);
  --primary-text-muted: rgba(77, 142, 255, 0.60);
  --error-tint: rgba(248, 113, 113, 0.18);
  --error-tint-light: rgba(248, 113, 113, 0.10);
  --error-tint-subtle: rgba(248, 113, 113, 0.06);
  --error-tint-medium: rgba(248, 113, 113, 0.15);
  --error-tint-strong: rgba(248, 113, 113, 0.25);
  --error-border-light: rgba(248, 113, 113, 0.25);
  --error-border: rgba(248, 113, 113, 0.30);
  --error-border-strong: rgba(248, 113, 113, 0.45);
  --success-tint: rgba(74, 222, 128, 0.12);
  --success-tint-light: rgba(74, 222, 128, 0.08);
  --success-tint-medium: rgba(74, 222, 128, 0.15);
  --success-tint-subtle: rgba(74, 222, 128, 0.06);
  --success-border-soft: rgba(74, 222, 128, 0.3);
  --success-border-medium: rgba(74, 222, 128, 0.5);
  --success-tint-hover: rgba(74, 222, 128, 0.1);
  --success-border-light: rgba(74, 222, 128, 0.20);
  --warning-tint: rgba(251, 191, 36, 0.15);
  --warning-tint-light: rgba(251, 191, 36, 0.10);
  --warning-tint-subtle: rgba(251, 191, 36, 0.06);
  --warning-border-light: rgba(251, 191, 36, 0.20);
  --blue-tint-light: rgba(96, 165, 250, 0.10);
  --blue-tint-subtle: rgba(96, 165, 250, 0.06);
  --purple-tint: rgba(167, 139, 250, 0.15);
  --purple-tint-subtle: rgba(167, 139, 250, 0.06);

  /* Admin badges & audit categories (replaces raw oklch literals) */
  --badge-admin-bg: rgba(77, 142, 255, 0.18);
  --badge-admin-fg: #adc6ff;
  --badge-suspended-bg: rgba(248, 113, 113, 0.18);
  --badge-suspended-fg: #ffb4ab;
  --badge-advanced-bg: rgba(74, 222, 128, 0.18);
  --badge-advanced-fg: #86efac;
  --audit-cat-auth-bg: rgba(77, 142, 255, 0.15);
  --audit-cat-auth-fg: #b1c6f9;
  --audit-cat-create-bg: rgba(74, 222, 128, 0.15);
  --audit-cat-create-fg: #86efac;
  --audit-cat-update-bg: rgba(251, 191, 36, 0.15);
  --audit-cat-update-fg: #fcd34d;
  --audit-cat-delete-bg: rgba(248, 113, 113, 0.15);
  --audit-cat-delete-fg: #ffb4ab;

  /* Sidebar */
  --sidebar-bg: #1a1a1a;
  --sidebar-text: #9ca3af;
  --sidebar-text-dim: #6b7280;
  --sidebar-text-dimmer: #4b5563;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);
  --sidebar-border: rgba(255, 255, 255, 0.04);
  --sidebar-active-bg: rgba(59, 130, 246, 0.10);
  --sidebar-active-glow: rgba(59, 130, 246, 0.06);

  /* Backdrop overlays */
  --backdrop-light: rgba(0, 0, 0, 0.3);
  --backdrop: rgba(0, 0, 0, 0.5);
  --surface-blur: rgba(19, 19, 19, 0.8);
  --surface-blur-strong: rgba(19, 19, 19, 0.92);
  --surface-glass: rgba(19, 19, 19, 0.7);
  --surface-glass-light: rgba(19, 19, 19, 0.5);
  --white-overlay: rgba(255, 255, 255, 0.05);
  --white-overlay-subtle: rgba(255, 255, 255, 0.04);
  --white-overlay-dim: rgba(255, 255, 255, 0.03);
  --white-overlay-faint: rgba(255, 255, 255, 0.02);
  --white-overlay-light: rgba(255, 255, 255, 0.07);
  --white-overlay-medium: rgba(255, 255, 255, 0.10);
  --white-overlay-strong: rgba(255, 255, 255, 0.14);
  --white-overlay-vivid: rgba(255, 255, 255, 0.20);

  /* Text on vivid color backgrounds */
  --on-color-vivid: #fff;
  --on-color-dark: #1a1a1a;

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-ambient: 0 20px 40px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 8px 20px rgba(0, 0, 0, 0.3);

  /* Heatmap (KD-345) */
  --heat-0: rgba(255,255,255,0.03);
  --heat-1: rgba(77,142,255,0.12);
  --heat-2: rgba(77,142,255,0.24);
  --heat-3: rgba(77,142,255,0.40);
  --heat-4: rgba(77,142,255,0.60);

  /* Focus — KD-261: neutralized from primary-container (loud blue) to a
   * translucent white overlay so keyboard-focus halos read as a quiet
   * affordance rather than a "you clicked into something" announcement.
   * Accessibility intent preserved (still a visible ring on Tab focus),
   * but no more blue boxes bracketing every editable field. */
  --focus-ring: 0 0 0 2px var(--background), 0 0 0 4px var(--white-overlay-vivid);

  /* Transitions */
  --transition-fast: 150ms;
  --transition-normal: 200ms;
  --transition-slow: 300ms;

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Fonts */
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;

  /* Type Scale (px-based, 9 stops) */
  --text-2xs: 9px;    /* micro labels (logo subtitle) */
  --text-xs: 10px;    /* uppercase labels, badges, captions */
  --text-sm: 11px;    /* meta text, secondary info */
  --text-base: 12px;  /* buttons, small body, form labels */
  --text-md: 13px;    /* body text, nav items, form inputs */
  --text-lg: 14px;    /* card titles, toolbar headings */
  --text-xl: 15px;    /* sidebar labels, sub-headings */
  --text-2xl: 16px;   /* section headings, project names */
  --text-3xl: 18px;   /* modal/detail titles */
  --text-4xl: 20px;   /* panel titles, detail h1 */
  --text-5xl: 22px;   /* logo title */
  --text-6xl: 24px;   /* page titles (dashboard, settings) */
  --text-7xl: 28px;   /* hero titles (task detail) */

  /* Icon Scale (6 stops) */
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;    /* default */
  --icon-lg: 18px;
  --icon-xl: 22px;
  --icon-2xl: 48px;

  /* Sidebar width */
  --sidebar-w: 52px;
  --sidebar-expanded-w: 240px;
}

html, body {
  background: var(--background) !important;
  background-color: var(--background) !important;
  color-scheme: dark;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--on-surface);
  overflow: hidden;
  height: 100vh;
  display: flex;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

button, a, .card, .filter-btn, .sidebar-link {
  transition-timing-function: var(--ease-out);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

button:active,
.btn-primary:active,
.btn-secondary:active {
  transform: scale(0.97);
}


/* === 2. Custom Scrollbar (show on hover) === */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-container-highest);
  border-radius: var(--radius-lg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--surface-bright);
}
/* Hide scrollbar thumbs by default; reveal on hover of the scrollable element */
.card-list,
.board-columns,
.backlog-pool-list,
.backlog-lanes-inner,
.doc-scroll-content {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.card-list:hover,
.board-columns:hover,
.backlog-pool-list:hover,
.backlog-lanes-inner:hover,
.doc-scroll-content:hover {
  scrollbar-color: var(--surface-container-highest) transparent;
}
.card-list::-webkit-scrollbar-thumb,
.board-columns::-webkit-scrollbar-thumb,
.backlog-pool-list::-webkit-scrollbar-thumb,
.backlog-lanes-inner::-webkit-scrollbar-thumb,
.doc-scroll-content::-webkit-scrollbar-thumb {
  background: transparent;
}
.card-list:hover::-webkit-scrollbar-thumb,
.board-columns:hover::-webkit-scrollbar-thumb,
.backlog-pool-list:hover::-webkit-scrollbar-thumb,
.backlog-lanes-inner:hover::-webkit-scrollbar-thumb,
.doc-scroll-content:hover::-webkit-scrollbar-thumb {
  background: var(--surface-container-highest);
}


/* === 3. Sidebar === */
#sidebar {
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 40;
  transition: width var(--transition-normal) var(--ease-out);
  overflow: hidden;
  border-right: 1px solid var(--sidebar-border);
  width: var(--sidebar-expanded-w);
  align-items: stretch;
  padding: 28px 20px;
}

.sidebar-top {
  margin-bottom: 20px;
}

/* Brand logo area */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--primary);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  padding: 0 var(--sp-1);
}
.sidebar-logo:hover {
  opacity: 0.85;
}

.sidebar-logo-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: var(--radius-md);
  background: var(--primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-surface);
}
.sidebar-logo-icon svg,
.sidebar-logo-icon i {
  width: 18px;
  height: 18px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

/* Nav links */
.sidebar-link {
  display: flex;
  flex-direction: row;
  gap: var(--sp-3);
  height: 36px;
  padding: 0 var(--sp-3);
  align-items: center;
  color: var(--sidebar-text);
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: all var(--transition-normal) var(--ease-out);
  border-left: 4px solid transparent;
  position: relative;
  cursor: pointer;
}
.sidebar-link i,
.sidebar-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.sidebar-link:hover {
  color: var(--on-surface);
  background: var(--sidebar-hover-bg);
}
.sidebar-link:hover i,
.sidebar-link:hover svg {
  color: var(--primary-container);
}
.sidebar-link:active {
  transform: scale(0.97);
}
.sidebar-link.active {
  color: var(--on-surface);
  background: var(--white-overlay-light);
  border-left-color: var(--color-blue);
  font-weight: 600;
}
.sidebar-link.active i,
.sidebar-link.active svg {
  color: var(--color-blue);
}

/* KD-218: notification bell (sidebar-link variant with an overlay badge). */
.sidebar-notifications-btn {
  background: transparent;
  border: none;
  text-align: left;
  width: 100%;
  font: inherit;
  font-size: var(--text-md);
}
.sidebar-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.notification-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-red);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

/* Dropdown: fixed-positioned by JS. */
.notification-dropdown {
  position: fixed;
  width: 360px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  background: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 9998;
  overflow: hidden;
}
.notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--outline-variant);
}
.notification-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--on-surface);
}
.notification-mark-all {
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
}
.notification-mark-all:hover { background: var(--white-overlay); }
.notification-empty {
  padding: var(--sp-4) var(--sp-3);
  color: var(--text-dim);
  font-size: var(--text-md);
  text-align: center;
}
.notification-list {
  overflow-y: auto;
  flex: 1;
}
.notification-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--outline-variant);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  color: var(--on-surface-variant);
}
.notification-item:last-child { border-bottom: none; }
.notification-item:hover { background: var(--white-overlay); }
.notification-item.unread { background: var(--primary-tint-5, var(--primary-tint-10)); }
.notification-item.unread:hover { background: var(--primary-tint-10); }
.notification-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
}
.notification-who {
  font-weight: 600;
  color: var(--on-surface);
  font-size: var(--text-md);
}
.notification-time {
  font-size: var(--text-xs);
  color: var(--text-dim);
  flex-shrink: 0;
}
.notification-context {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 2px;
}
.notification-snippet {
  font-size: var(--text-md);
  color: var(--on-surface-variant);
  margin-top: var(--sp-1);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* Sidebar label */
.sidebar-label {
  font-size: var(--text-md);
  font-weight: 500;
  white-space: nowrap;
  transition: opacity var(--transition-normal), width var(--transition-normal);
}

#sidebar .sidebar-label {
  opacity: 1;
  width: auto;
}

/* Sidebar contextual mode styles */

/* Back button (project mode → return to global) */
.sidebar-back {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 36px;
  padding: 0 var(--sp-3);
  color: var(--sidebar-text-dim);
  text-decoration: none;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: 500;
  transition: all var(--transition-fast) var(--ease-out);
  cursor: pointer;
  margin-bottom: var(--sp-1);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.sidebar-back i, .sidebar-back svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.sidebar-back:hover {
  color: var(--on-surface);
  background: var(--sidebar-hover-bg);
}

/* Project header in sidebar (project mode) */
.sidebar-project-header {
  padding: 4px 12px 12px;
  border-bottom: 1px solid var(--white-overlay);
  margin-bottom: var(--sp-2);
}
.sidebar-project-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.sidebar-project-subtitle {
  font-size: var(--text-sm);
  color: var(--sidebar-text-dim);
  margin-top: 2px;
}

/* Section label in sidebar */
.sidebar-section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sidebar-text-dimmer);
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
  user-select: none;
}

/* Project list items in global mode */
.sidebar-project-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-project-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 40px;
  padding: 0 var(--sp-3);
  color: var(--sidebar-text);
  text-decoration: none;
  border-radius: var(--radius-lg);
  font-size: var(--text-md);
  font-weight: 500;
  transition: all var(--transition-fast) var(--ease-out);
  cursor: pointer;
}
.sidebar-project-item:hover {
  color: var(--on-surface);
  background: var(--sidebar-hover-bg);
}
.sidebar-project-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sidebar-project-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-project-chevron {
  width: 14px;
  height: 14px;
  color: var(--sidebar-text-dimmer);
  flex-shrink: 0;
}

/* New project button in sidebar */
.sidebar-new-project {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 36px;
  padding: 0 var(--sp-3);
  color: var(--sidebar-text-dim);
  text-decoration: none;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: 500;
  transition: all var(--transition-fast) var(--ease-out);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.sidebar-new-project i, .sidebar-new-project svg {
  width: 16px;
  height: 16px;
}
.sidebar-new-project:hover {
  color: var(--on-surface);
  background: var(--sidebar-hover-bg);
}

/* Org switcher in sidebar */
.sidebar-org-switcher {
  position: relative;
  margin-bottom: 4px;
}
.sidebar-org-current {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 40px;
  padding: 0 var(--sp-3);
  color: var(--on-surface);
  font-size: var(--text-md);
  font-weight: 600;
  border-radius: var(--radius-lg);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: all var(--transition-fast) var(--ease-out);
}
.sidebar-org-current i, .sidebar-org-current svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.sidebar-org-current:hover {
  background: var(--sidebar-hover-bg);
}
.sidebar-org-dropdown {
  position: absolute;
  top: 44px;
  left: 4px;
  right: 4px;
  z-index: 100;
  background: var(--surface-2);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 4px;
  box-shadow: var(--shadow-ambient);
}
.sidebar-org-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-base);
  color: var(--text-muted);
  border: none;
  background: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast) var(--ease-out);
}
.sidebar-org-option:hover {
  background: var(--sidebar-hover-bg);
  color: var(--on-surface);
}
.sidebar-org-option.active {
  color: var(--on-surface);
  font-weight: 500;
}

/* Sidebar bottom */
.sidebar-bottom {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--sidebar-border);
}


/* === 4. Main Wrapper === */
#main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}


/* === 5. Toolbar === */
#toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-5);
  height: 52px;
  background: var(--surface-blur);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-shrink: 0;
  border-bottom: 1px solid var(--ghost-border);
  position: relative;
  /* KD-400: sit above #task-view-backdrop (z-index 85) so the "Capture to inbox…"
     inline capture input, the search, and breadcrumb stay clickable while
     a task pane is open — the backdrop otherwise captures the click and
     closes the pane. Still below #task-detail (z-index 90). */
  z-index: 86;
}



.toolbar-left {
  min-width: 0;
  overflow: hidden;
  flex: 1;
}
.toolbar-left h1 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--on-surface);
  white-space: nowrap;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
}

.toolbar-brand {
  color: var(--on-surface);
  text-decoration: none;
  cursor: default;
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: var(--text-lg);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
}

.breadcrumb-segment {
  color: var(--on-surface-variant);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.breadcrumb-segment:hover {
  color: var(--on-surface);
}
.breadcrumb-segment:last-child {
  color: var(--on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.breadcrumb-sep {
  color: var(--text-dim);
  margin: 0 6px;
  user-select: none;
  flex-shrink: 0;
}
.breadcrumb-segment:not(:last-child) {
  flex-shrink: 0;
}

/* Legacy breadcrumb support */
.breadcrumb {
  font-weight: 500;
  color: var(--on-surface-variant);
}
.breadcrumb::before {
  content: '/';
  margin: 0 var(--sp-2);
  color: var(--text-muted);
}

.toolbar-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  pointer-events: none;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

#search {
  width: 100%;
  padding: var(--sp-2) 40px var(--sp-2) 34px;
  background: var(--surface-container-lowest);
  border: none;
  border-radius: var(--radius-full);
  color: var(--on-surface);
  font-size: var(--text-base);
  font-family: inherit;
  outline: none;
  transition: box-shadow var(--transition-fast);
  box-shadow: 0 0 0 1px var(--ghost-border-subtle);
}
#search::placeholder { color: var(--text-muted); }
#search::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
#search:focus {
  box-shadow: 0 0 0 1px var(--outline);
}

.search-kbd {
  position: absolute;
  right: 8px;
  font-size: var(--text-xs);
  color: var(--text-dim);
  background: var(--surface-container-high);
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  pointer-events: none;
}

/* Clear / reset button for search inputs */
.search-clear-btn {
  position: absolute;
  right: var(--sp-2);
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: var(--surface-container-high);
  border: none;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.search-clear-btn:hover {
  color: var(--on-surface);
  background: var(--surface-container-highest);
}
.search-wrapper.has-value .search-clear-btn { display: flex; }
.search-wrapper.has-value .search-kbd { display: none; }

/* Inline search wrapper for inputs without the toolbar structure */
.inline-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}
.inline-search-wrapper .search-clear-btn { right: var(--sp-2); }
.inline-search-wrapper.has-value .search-clear-btn { display: flex; }


.toolbar-icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.toolbar-icon-btn:hover {
  color: var(--on-surface);
  background: var(--surface-bright);
}

.toolbar-avatar {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-container);
  color: var(--on-surface);
  border-radius: 50%;
  cursor: pointer;
  margin-left: var(--sp-1);
}


/* === 6. Filter System === */
.filter-chips {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  background: var(--surface-blur);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--ghost-border);
  min-height: 0;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 26px;
  padding: 0 8px 0 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--primary-focus-light);
  color: var(--primary);
  border: 1px solid var(--ghost-border-light);
}

.chip-remove {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font-size: var(--text-lg);
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}
.chip-remove:hover { opacity: 1; }

.filter-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.filter-clear:hover { color: var(--primary); }

.filter-popover {
  position: absolute;
  top: 52px;
  right: 20px;
  z-index: 50;
  background: var(--surface-container-highest);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-ambient);
  padding: var(--sp-4);
  width: 360px;
  border: 1px solid var(--ghost-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.filter-popover-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

.filter-popover-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--on-surface);
}

.filter-popover-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.filter-popover-clear:hover { color: var(--primary); }

/* Legacy filter-bar support */
#filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-2) var(--sp-5);
  background: var(--surface-container-low);
  min-height: 36px;
}

.filter-group {
  margin-bottom: var(--sp-3);
}
.filter-group:last-child {
  margin-bottom: 0;
}

.filter-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
  display: block;
}

.filter-buttons {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 26px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-lg);
  border: none;
  background: transparent;
  color: var(--on-surface-variant);
  font-size: var(--text-base);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.filter-btn:hover {
  background: var(--surface-bright);
  color: var(--on-surface);
}
.filter-btn.active {
  background: var(--primary-tint);
  color: var(--primary);
}

.priority-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-critical { background: var(--color-purple); }
.dot-high { background: var(--color-red); }
.dot-medium { background: var(--color-blue); }
.dot-low { background: var(--color-amber); }


/* === 7. Buttons === */
.btn-primary {
  height: 32px;
  padding: 0 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-surface);
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-primary:hover {
  opacity: 0.9;
  box-shadow: 0 4px 16px var(--primary-tint-heavy);
}
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  height: 32px;
  padding: 0 16px;
  background: var(--surface-container-highest);
  color: var(--on-surface);
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
}
.btn-secondary:hover { background: var(--surface-bright); }
.btn-secondary:active { transform: scale(0.97); }

.btn-danger {
  height: 32px;
  padding: 0 16px;
  background: var(--error-tint);
  color: var(--color-red);
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-danger:hover { background: var(--error-tint-strong); }
.btn-danger:active { transform: scale(0.97); }

.btn-ghost {
  height: 32px;
  padding: 0 12px;
  background: none;
  color: var(--on-surface-variant);
  border: none;
  font-size: var(--text-base);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-ghost:hover {
  color: var(--on-surface);
  background: var(--surface-bright);
}


/* === 8. Board === */
/* KD-075: board is now a column flex so a full-width sprint header strip
   can sit above the horizontally-scrolling columns. */
#board {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 52px);
  position: relative;
}
.board-columns {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  position: relative;
}
.board-columns::after {
  content: '';
  flex-shrink: 0;
  width: var(--sp-5);
}
.board-columns::-webkit-scrollbar { height: 6px; }

/* KD-075: Sprint header strip above the kanban columns.
   Shows name/dates/Day X/Y, progress bar, tokens, close+release actions. */
.sprint-header-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--outline-variant);
  background: var(--surface-container);
  flex-shrink: 0;
}

.sprint-header-strip.hidden { display: none; }

.sprint-header-strip-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex-shrink: 0;
}

.sprint-header-strip-name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--on-surface);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.sprint-header-strip-dates {
  font-size: var(--text-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.sprint-header-strip-countdown {
  color: var(--primary);
  font-weight: 600;
}

.sprint-header-strip-countdown.overdue {
  color: var(--color-red);
}

.sprint-header-strip-countdown.due-today {
  color: var(--color-amber);
}

.sprint-header-strip-progress {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 160px;
  max-width: 480px;
}

.sprint-progress-bar {
  height: 6px;
  background: var(--surface-container-highest);
  border-radius: 999px;
  overflow: hidden;
}

.sprint-progress-bar-fill {
  height: 100%;
  background: var(--color-green);
  border-radius: 999px;
  transition: width var(--transition-normal);
}

.sprint-progress-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}

.sprint-header-strip-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  margin-left: auto;
}

.sprint-header-tokens {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--sp-1) var(--sp-3);
  background: var(--surface-container-highest);
  border-radius: 999px;
}

.sprint-header-actions {
  display: flex;
  gap: var(--sp-2);
}

.sprint-header-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: transparent;
  border: 1px solid var(--outline-variant);
  color: var(--on-surface-variant);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.sprint-header-btn:hover:not(:disabled) {
  background: var(--surface-container-high);
  color: var(--on-surface);
  border-color: var(--outline);
}

.sprint-header-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sprint-header-btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

.sprint-header-btn-primary:hover {
  background: var(--primary);
  color: var(--on-primary);
  filter: brightness(1.1);
}

/* === 8b. Roadmap / Epic list (KD-345) === */
#epics {
  display: flex;
  height: calc(100vh - 52px);
  overflow: hidden;
}

#epics .epics-grid {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-8) var(--sp-8);
  max-width: 1280px;
  margin: 0 auto;
}

/* Filter bar */
.epic-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.epic-filter-bar .spacer { flex: 1; }
.epic-filter-bar .count {
  color: var(--text-muted);
  font-size: var(--text-base);
}

.epic-chip {
  font-size: var(--text-sm);
  padding: 3px var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--surface-container);
  color: var(--text-muted);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  user-select: none;
}
.epic-chip:hover {
  background: var(--surface-container-high);
  color: var(--on-surface);
}
.epic-chip.active {
  background: var(--primary-tint-light);
  color: var(--primary);
  border-color: var(--primary-border);
}

/* Column headers */
.epic-list-head {
  display: grid;
  grid-template-columns: 1fr 110px 1fr 200px 40px;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--text-xs);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.epic-list-head .sprint-axis {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
}

/* Epic list container */
.epic-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* Epic row */
.epic-row {
  display: grid;
  grid-template-columns: 1fr 110px 1fr 200px 40px;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-container-low);
  border: 1px solid var(--white-overlay);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.epic-row:hover {
  background: var(--surface-container);
  border-color: var(--outline-variant);
}

.epic-main {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.epic-stripe {
  width: 3px;
  height: 28px;
  border-radius: 2px;
  flex-shrink: 0;
}
.epic-info { min-width: 0; }
.epic-name {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.epic-id {
  font-size: var(--text-xs);
  color: var(--text-dim);
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* State pill */
.epic-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px var(--sp-2);
  border-radius: var(--sp-1);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.epic-state::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.epic-state-active {
  background: rgba(74,222,128,0.10);
  color: var(--color-green);
}
.epic-state-active::before { background: var(--color-green); }
.epic-state-planned {
  background: rgba(251,191,36,0.10);
  color: var(--color-amber);
}
.epic-state-planned::before { background: var(--color-amber); }
.epic-state-completed {
  background: rgba(96,165,250,0.10);
  color: var(--color-blue);
}
.epic-state-completed::before { background: var(--color-blue); }
.epic-state-cancelled {
  background: rgba(140,144,159,0.12);
  color: var(--text-muted);
}
.epic-state-cancelled::before { background: var(--text-muted); }

/* Sparkline heatmap */
.sparkline {
  display: flex;
  gap: 2px;
  align-items: center;
}
.sparkline .cell {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: var(--heat-0, rgba(255,255,255,0.03));
  flex-shrink: 0;
}
.sparkline .cell.h1 { background: var(--heat-1, rgba(77,142,255,0.12)); }
.sparkline .cell.h2 { background: var(--heat-2, rgba(77,142,255,0.24)); }
.sparkline .cell.h3 { background: var(--heat-3, rgba(77,142,255,0.40)); }
.sparkline .cell.h4 { background: var(--heat-4, rgba(77,142,255,0.60)); }
.sparkline .cell.gap {
  background: transparent;
  border: 1px dashed var(--outline-variant);
}
.sparkline .cell.future {
  background: transparent;
  border: 1px solid rgba(66,71,84,0.25);
}
.sparkline .cell.now {
  box-shadow: 0 0 0 1.5px var(--color-primary);
}
.sparkline .divider {
  width: 1px;
  height: 14px;
  background: var(--outline-variant);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Progress */
.epic-progress {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.epic-progress-bar {
  height: var(--sp-1);
  background: var(--surface-container-high);
  border-radius: 2px;
  overflow: hidden;
}
.epic-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 2px;
  transition: width var(--transition-slow);
}
.epic-progress-text {
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}
.epic-progress-text .done { color: var(--on-surface); }

.epic-row-menu {
  display: flex;
  justify-content: center;
  color: var(--text-dim);
  font-size: var(--text-2xl);
  line-height: 1;
}
.epic-row:hover .epic-row-menu { color: var(--text-muted); }

/* Add row */
.epic-add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: transparent;
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-lg);
  color: var(--text-dim);
  font-size: var(--text-base);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.epic-add-row:hover {
  color: var(--text-muted);
  border-color: var(--text-muted);
  background: var(--surface-container-lowest);
}

/* Summary */
.epic-summary {
  margin-top: var(--sp-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Tooltip for sparkline cells */
.sparkline [data-tip] { position: relative; }
.sparkline [data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-container-highest);
  border: 1px solid var(--outline-variant);
  padding: 5px 9px;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  white-space: nowrap;
  color: var(--on-surface);
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Card density variants */
.board-compact .card {
  padding: 6px 10px;
}
.board-compact .card-title {
  font-size: var(--text-base);
}
.board-spacious .card {
  padding: 14px 16px;
}
.board-spacious .card-title {
  font-size: var(--text-lg);
  font-weight: 600;
}

.column {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
}

.column-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-3);
  position: sticky;
  top: 0;
  z-index: 10;
}

.column-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin: 0;
}
.dot-backlog { background: var(--status-backlog); }
.dot-spec { background: var(--tertiary-container); }
.dot-in-progress { background: var(--secondary-container); }
.dot-testing { background: var(--tertiary); }
.dot-deployed { background: var(--color-green); }

.column-title {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--on-surface);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.column-count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-variant);
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--surface-container-high);
}

.column-add-btn {
  margin-left: auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  opacity: 0;
}
.column:hover .column-add-btn {
  opacity: 1;
}
.column-add-btn:hover {
  color: var(--on-surface);
  background: var(--surface-bright);
}

.column-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-6);
  color: var(--text-dim);
  font-size: var(--text-base);
}

/* KD-310: Collapsible day-group headers in the deployed column */
.deployed-day-header {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  width: 100%;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.deployed-day-header:hover {
  color: var(--on-surface-variant);
}
.deployed-day-header .deployed-day-count {
  margin-left: auto;
  font-weight: 400;
  color: var(--text-dim);
  font-size: var(--text-xs);
}

.card-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 2px 0;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* scrollbar: inherits global 4px style */


/* KD-308: Compact rows for deployed cards in sprint board */
/* KD-312: priority bar (2px left edge) + module dot (6px) */
.card-compact-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  padding-left: var(--sp-3);
  min-height: 32px;
  cursor: pointer;
  border-bottom: 1px solid var(--white-overlay);
  transition: background var(--transition-fast);
  position: relative;
}
.card-compact-row:hover {
  background: var(--white-overlay);
}
.card-compact-row .card-compact-title {
  font-size: var(--text-md);
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.card-compact-row .card-compact-id {
  font-size: var(--text-sm);
  color: var(--text-dim);
  flex-shrink: 0;
}

/* KD-312: 2px priority bar on left edge of compact deployed rows */
.compact-bar {
  position: absolute;
  top: var(--sp-1);
  bottom: var(--sp-1);
  left: 0;
  width: 2px;
  border-radius: 0 2px 2px 0;
}
.compact-priority-critical .compact-bar { background: var(--color-purple); }
.compact-priority-high .compact-bar    { background: var(--color-red); }
.compact-priority-medium .compact-bar  { background: var(--color-amber); }
.compact-priority-low .compact-bar     { background: var(--color-green); }

/* KD-312: 6px module-color dot */
.compact-mod-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* === 9. Cards === */
.card {
  background: var(--surface-container-low);
  border-radius: var(--radius-xl);
  padding: 8px 14px;
  cursor: grab;
  transition: all var(--transition-normal) var(--ease-out);
  border: 1px solid var(--ghost-border-light);
  position: relative;
}

/* Inline draft card — appears in a column when the user clicks "+" */
.card.card-draft {
  cursor: text;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-high);
}
.card.card-draft::before { display: none; }
.card.card-draft:hover { transform: none; box-shadow: none; }
.card-draft-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--on-surface);
  font-size: var(--text-lg);
  font-weight: 500;
  font-family: inherit;
  padding: 0;
}
.card-draft-input::placeholder { color: var(--text-dim); }
.card-draft-input:disabled { opacity: 0.5; }
/* Suppress the global input:focus-visible halo on the inline draft —
 * the dashed primary border (or whatever .card-draft paints) is already
 * the "you're composing" affordance. The 4px blue box stacked on top
 * looks like a separate accidental outline. */
.card-draft-input:focus-visible { box-shadow: none; }

.card:hover {
  background: var(--surface-container-high);
  border-color: var(--ghost-border-hover);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--white-overlay-dim);
  transform: translateY(-2px);
}
.card[data-priority="high"]:hover {
  border-color: var(--error-border);
  box-shadow: var(--shadow-card), 0 0 16px var(--error-tint-light);
}
.card[data-priority="medium"]:hover {
  border-color: var(--warning-border-light);
  box-shadow: var(--shadow-card), 0 0 16px rgba(251, 191, 36, 0.06);
}
.card[data-priority="low"]:hover {
  border-color: var(--success-border-light);
  box-shadow: var(--shadow-card), 0 0 16px rgba(74, 222, 128, 0.06);
}

/* Priority indicator — small bar on left edge */
.card::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  width: 3px;
  height: 16px;
  border-radius: 0 2px 2px 0;
}
.card-priority-critical::before {
  background: var(--color-purple);
}
.card-priority-high::before {
  background: var(--color-red);
}
.card-priority-medium::before {
  background: var(--color-amber);
}
.card-priority-low::before {
  background: var(--color-green);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.card-priority-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.card-id {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.card-title {
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 1.4;
  color: var(--on-surface);
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
}

.card-excerpt {
  font-size: var(--text-base);
  color: var(--on-surface-variant);
  margin-bottom: var(--sp-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.card-tags-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
  line-height: 1;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}

.card-id-text {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* Card hover actions */
.card-hover-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.card:hover .card-hover-actions {
  opacity: 1;
}
.card-hover-actions button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-container-highest);
  border: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.card-hover-actions button:hover {
  color: var(--on-surface);
  background: var(--surface-bright);
}

/* Open questions indicator on card */
.card-open-questions {
  margin-left: auto;
  color: var(--color-amber);
  font-size: var(--text-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Acceptance criteria indicator on card */
.card-acceptance-criteria {
  color: var(--color-blue);
  font-size: var(--text-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.card-open-questions:first-of-type { margin-left: auto; }
.card-id + .card-acceptance-criteria { margin-left: auto; }
.card-open-questions + .card-acceptance-criteria { margin-left: 6px; }

/* Tags */
.tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--purple-tint-subtle);
  color: var(--color-purple);
}

.card-spacer {
  flex: 1;
}

.card-attachment-count {
  font-size: var(--text-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Drag states */
.sortable-ghost {
  opacity: 0.35;
  outline: 1px dashed var(--primary-container);
  background: var(--primary-tint-medium);
}
.sortable-chosen {
  box-shadow: var(--shadow-ambient);
  transform: rotate(1.5deg) scale(1.02);
}
.sortable-drag {
  cursor: grabbing;
}

.column.drop-target .card-list {
  background: var(--primary-tint-subtle);
  border-radius: var(--radius-xl);
}


/* === 10. Skeleton Loading === */
.skeleton {
  background: linear-gradient(90deg, var(--surface-container-high) 0%, var(--surface-bright) 50%, var(--surface-container-high) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease infinite;
  border-radius: var(--radius-xl);
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-card {
  height: 100px;
  margin-bottom: 6px;
}
.skeleton-project {
  height: 180px;
}


/* === 11. Empty States === */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--text-muted);
  text-align: center;
}
.empty-state .empty-icon {
  width: 48px;
  height: 48px;
  color: var(--text-dim);
  margin-bottom: var(--sp-4);
}
.empty-state h3 {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--on-surface-variant);
  margin-bottom: var(--sp-2);
}
.empty-state p {
  font-size: var(--text-md);
  max-width: 280px;
  line-height: 1.5;
  margin-bottom: var(--sp-4);
}


/* === 12. Modal === */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal.hidden { display: none; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: var(--sidebar-bg);
  border-radius: var(--radius-xl);
  width: 90vw;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-ambient);
  padding: 0;
}

/* scrollbar: inherits global 4px style */

.modal-close {
  background: none;
  border: none;
  font-size: var(--text-3xl);
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.modal-close:hover {
  color: var(--on-surface);
  background: var(--surface-bright);
}

#modal-body {
  padding: var(--sp-8);
}

.modal-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.modal-header-bar h2 {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}


/* === 13. Slide-Over Panel === */
.slide-over {
  position: fixed;
  inset: 0;
  z-index: 90;
}
.slide-over.hidden {
  display: none;
}

.slide-over-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop-light);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.slide-over-content {
  position: absolute;
  top: 0;
  right: 0;
  width: min(680px, calc(100vw - 52px));
  height: 100vh;
  background: var(--surface-container);
  box-shadow: var(--shadow-ambient);
  overflow-y: auto;
  transform: translateX(0);
}

/* scrollbar: inherits global 4px style */

#panel-body {
  padding: var(--sp-6);
}


/* === 14. Command Palette === */
.cmd-palette {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}
.cmd-palette.hidden {
  display: none;
}

.cmd-palette-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cmd-palette-dialog {
  position: relative;
  width: 560px;
  max-width: 90vw;
  background: var(--surface-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-ambient);
  overflow: hidden;
  border: 1px solid var(--ghost-border);
}

.cmd-palette-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--ghost-border);
}

.cmd-palette-input-wrapper input {
  flex: 1;
  background: none;
  border: none;
  color: var(--on-surface);
  font-size: var(--text-xl);
  font-family: inherit;
  outline: none;
}
.cmd-palette-input-wrapper input::placeholder {
  color: var(--text-muted);
}

.cmd-palette-results {
  max-height: 400px;
  overflow-y: auto;
  padding: var(--sp-2);
}

.cmd-palette-empty {
  padding: var(--sp-6);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-md);
}

.cmd-result-group {
  margin-bottom: var(--sp-2);
}

.cmd-result-group-title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
}

.cmd-result-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.cmd-result-item:hover,
.cmd-result-item.active {
  background: var(--surface-container-high);
}

.cmd-result-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.cmd-result-text {
  flex: 1;
  min-width: 0;
}

.cmd-result-title {
  font-size: var(--text-md);
  color: var(--on-surface);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmd-result-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.cmd-result-kbd {
  font-size: var(--text-xs);
  color: var(--text-dim);
  background: var(--surface-container-high);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.cmd-palette-footer {
  display: flex;
  gap: var(--sp-4);
  padding: 10px var(--sp-5);
  border-top: 1px solid var(--ghost-border);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.cmd-palette-footer kbd {
  font-size: var(--text-xs);
  background: var(--surface-container-high);
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  margin-right: 4px;
  color: var(--text-dim);
  font-family: inherit;
}




/* === 16. Keyboard Shortcuts Help === */
.shortcuts-dialog {
  position: relative;
  background: var(--sidebar-bg);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  max-width: 500px;
  width: 90vw;
  box-shadow: var(--shadow-ambient);
}

.shortcuts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.shortcut-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-container-high);
  border-radius: var(--radius-md);
}
.shortcut-item kbd {
  min-width: 36px;
  text-align: center;
  font-size: var(--text-sm);
  background: var(--surface-container-lowest);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  color: var(--on-surface-variant);
  font-family: inherit;
}
.shortcut-item span {
  font-size: var(--text-md);
  color: var(--on-surface-variant);
}


/* === 17. Detail View — Two-Column Layout === */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--sp-6);
  min-height: 0;
}

.detail-main {
  min-width: 0;
  overflow: hidden;
}

.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-left: var(--sp-5);
  border-left: 1px solid var(--ghost-border);
}

.detail-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.detail-sidebar-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.detail-sidebar-value {
  font-size: var(--text-md);
  color: var(--on-surface);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* Detail header */
.detail-top-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-4);
}

.detail-top-left {
  flex: 1;
  min-width: 0;
}

.detail-top-id {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}

.detail-top-title {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--on-surface);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.detail-top-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--sp-2);
}

.detail-top-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: var(--sp-4);
  flex-shrink: 0;
}

.detail-top-actions .toolbar-icon-btn {
  width: 28px;
  height: 28px;
}

/* Legacy detail header */
.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  margin: 0 calc(-1 * var(--sp-6));
  margin-top: calc(-1 * var(--sp-6));
  margin-bottom: var(--sp-4);
  background: var(--surface-container-high);
  position: sticky;
  top: 0;
  z-index: 10;
}

.detail-title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--on-surface);
  flex: 1;
  letter-spacing: -0.02em;
}

.detail-id {
  color: var(--text-muted);
  font-weight: 500;
  margin-right: 6px;
  font-size: var(--text-2xl);
}

.detail-header-left {
  flex: 1;
  min-width: 0;
}

.detail-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: var(--sp-4);
  flex-shrink: 0;
}

.btn-delete-ghost {
  font-size: var(--text-2xl);
  color: var(--text-muted);
  opacity: 0.5;
  transition: all var(--transition-fast);
}
.btn-delete-ghost:hover {
  color: var(--color-red);
  opacity: 1;
}

/* Overflow / "more actions" dropdown */
.overflow-menu {
  position: relative;
  display: inline-block;
}
.overflow-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  border: none;
  background: none;
}
.overflow-menu-trigger:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.overflow-menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 50;
  min-width: 160px;
  padding: 4px 0;
  background: var(--surface-2);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-ambient);
}
.overflow-menu.open .overflow-menu-dropdown {
  display: block;
}
.overflow-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  font-size: var(--text-md);
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.overflow-menu-item:hover {
  background: var(--surface-3);
  color: var(--text-primary);
}
.overflow-menu-item--danger {
  color: var(--color-error);
}
.overflow-menu-item--danger:hover {
  background: var(--error-tint-light);
  color: var(--color-error);
}
.overflow-menu-divider {
  height: 1px;
  margin: 4px 0;
  background: var(--outline-variant);
}

.detail-meta {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  text-transform: capitalize;
}
.status-backlog { background: var(--status-backlog-bg); color: var(--status-backlog); }
.status-spec { background: var(--status-spec-bg); color: var(--tertiary); }
.status-in-progress { background: var(--status-progress-bg); color: var(--secondary); }
.status-testing { background: var(--status-testing-bg); color: var(--tertiary); }
.status-deployed { background: var(--status-deployed-bg); color: var(--color-green); }

.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  text-transform: capitalize;
}
.priority-critical { background: var(--purple-tint-subtle); color: var(--color-purple); }
.priority-high { background: var(--error-tint-subtle); color: var(--color-red); }
.priority-medium { background: var(--blue-tint-subtle); color: var(--color-blue); }
.priority-low { background: var(--warning-tint-subtle); color: var(--color-amber); }

.detail-dates {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

/* Write / Preview tabs */
.detail-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--sp-4);
}

.detail-tab {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  transition: all var(--transition-fast);
}
.detail-tab:hover {
  color: var(--on-surface);
}
.detail-tab.active {
  color: var(--on-surface);
  border-bottom-color: var(--primary-container);
}

/* Rendered markdown in detail view */
.detail-body {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--on-surface-variant);
}
.detail-body h1 {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--on-surface);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--white-overlay);
}
.detail-body h1:first-child {
  margin-top: 0;
}
.detail-body h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--on-surface);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-1);
  letter-spacing: -0.02em;
}
.detail-body h3 {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--on-surface);
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-1);
}
.detail-body h4 {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--on-surface);
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-1);
}
.detail-body h5, .detail-body h6 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-1);
}
.detail-body p {
  margin-bottom: var(--sp-2);
}
.detail-body strong {
  font-weight: 600;
  color: var(--on-surface);
}
.detail-body em {
  font-style: italic;
}
.detail-body hr {
  border: none;
  border-top: 1px solid var(--white-overlay);
  margin: var(--sp-4) 0;
}
.detail-body ul, .detail-body ol {
  margin: var(--sp-2) 0;
  padding-left: var(--sp-5);
}
.detail-body ul { list-style-type: disc; }
.detail-body ol { list-style-type: decimal; }
.detail-body ul ul { list-style-type: circle; }
.detail-body ul ul ul { list-style-type: square; }
.detail-body li { margin-bottom: var(--sp-1); }
.detail-body li > ul, .detail-body li > ol {
  margin-top: var(--sp-1);
  margin-bottom: 0;
}
.detail-body code {
  background: var(--white-overlay);
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-family: var(--font-mono);
}
.detail-body pre {
  background: var(--surface-container-lowest);
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--sp-3) 0;
}
.detail-body pre code {
  background: none;
  padding: 0;
  color: var(--on-surface);
}
.detail-body blockquote {
  border-left: 3px solid var(--primary-container);
  padding-left: var(--sp-3);
  color: var(--on-surface-variant);
  margin: var(--sp-3) 0;
}
.detail-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-3) 0;
}
.detail-body th, .detail-body td {
  padding: var(--sp-2);
  text-align: left;
  font-size: var(--text-base);
}
.detail-body th {
  background: var(--surface-container-high);
  font-weight: 600;
  color: var(--on-surface);
  border-bottom: 2px solid var(--white-overlay);
}
.detail-body td {
  background: var(--surface-container);
  border-bottom: 1px solid var(--white-overlay);
}
.detail-body img {
  max-width: 100%;
  border-radius: var(--radius-xl);
}
.detail-body input[type="checkbox"] {
  margin-right: 6px;
  accent-color: var(--primary-container);
  cursor: pointer;
  width: 15px;
  height: 15px;
  vertical-align: middle;
}
.detail-body a {
  color: var(--primary);
  text-decoration: none;
}
.detail-body a:hover { text-decoration: underline; }

/* Mermaid diagrams */
.mermaid-diagram {
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  background: var(--surface-container-high);
  border-radius: var(--radius-xl);
  overflow-x: auto;
  text-align: center;
}
.mermaid-diagram svg {
  max-width: 100%;
  height: auto;
}
.mermaid-error {
  outline: 1px solid var(--color-red);
  opacity: 0.7;
}
.mermaid-embed {
  margin: var(--sp-4) 0;
}
.mermaid-embed .mermaid-diagram {
  margin: 0;
}


/* === 18. Edit Form === */
.form-group {
  margin-bottom: var(--sp-4);
}
.form-group label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--outline);
  margin-bottom: var(--sp-1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-container-lowest);
  border: none;
  border-radius: var(--radius-md);
  color: var(--on-surface);
  font-size: var(--text-md);
  font-family: inherit;
  outline: none;
  transition: box-shadow var(--transition-fast);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  box-shadow: 0 0 0 1px var(--outline);
}
.form-group select {
  cursor: pointer;
  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='%238c909f' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
.form-group select option {
  background: var(--surface-container-highest);
  color: var(--on-surface);
}

/* Tag picker */
.tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--sp-2);
  background: var(--surface-container-lowest);
  border-radius: var(--radius-md);
  min-height: 38px;
  align-items: center;
}

.tag-pick {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  font-size: var(--text-base);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.tag-pick:hover {
  background: var(--surface-bright);
  color: var(--on-surface);
}
.tag-pick.selected {
  background: var(--purple-tint);
  color: var(--color-purple);
}

.tag-add {
  width: 26px;
  padding: 0;
  justify-content: center;
  font-size: var(--text-lg);
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--outline-variant);
}
.tag-add:hover {
  border-color: var(--primary-container);
  color: var(--primary);
}

.form-group textarea {
  min-height: 300px;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.6;
  resize: vertical;
}

.form-row {
  display: flex;
  gap: var(--sp-3);
}
.form-row .form-group { flex: 1; }

.form-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-start;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
}

/* Priority picker */
.priority-picker {
  display: flex;
  gap: var(--sp-1);
}
.priority-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 42px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  font-size: var(--text-base);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.priority-pick:hover {
  background: var(--surface-bright);
  color: var(--on-surface);
}
.priority-pick.selected[data-priority="critical"] {
  background: var(--purple-tint);
  color: var(--color-purple);
}
.priority-pick.selected[data-priority="high"] {
  background: var(--error-tint);
  color: var(--color-red);
}
.priority-pick.selected[data-priority="medium"] {
  background: var(--warning-tint);
  color: var(--color-amber);
}
.priority-pick.selected[data-priority="low"] {
  background: var(--success-tint);
  color: var(--color-green);
}

.form-group-grow { flex: 2; }


/* === 19. Attachments === */
.attachments-section {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
}

.attachments-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: var(--sp-3);
}

.attachment-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}

.attachment-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-container-high);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
}

.attachment-icon {
  font-size: var(--text-lg);
  width: 18px;
  text-align: center;
}

.attachment-name {
  flex: 1;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.attachment-name:hover { text-decoration: underline; }

.attachment-size {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.attachment-delete {
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  font-size: var(--text-2xl);
  padding: 0 4px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}
.attachment-delete:hover {
  color: var(--color-red);
  background: var(--error-tint-light);
}

.no-attachments {
  color: var(--text-muted);
  font-size: var(--text-base);
}

/* Upload zone */
.upload-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border: 1.5px dashed var(--ghost-border-hover);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-base);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--white-overlay-faint);
}
.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--primary-border);
  background: var(--primary-tint-light);
  color: var(--primary);
  box-shadow: 0 0 12px var(--primary-tint-light);
}
.upload-zone input[type="file"] { display: none; }


/* === 20. Release Notes === */
.release-notes { line-height: 1.7; color: var(--on-surface-variant); }
.release-notes h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--sp-3);
  color: var(--on-surface);
  letter-spacing: -0.02em;
}
.release-notes h3 {
  font-size: var(--text-md);
  font-weight: 600;
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-1);
  color: var(--on-surface);
}


/* === 21. Dashboard === */
.dashboard {
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
  overflow-y: auto;
  height: calc(100vh - 52px);
}

.dashboard-title {
  font-size: var(--text-6xl);
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: var(--sp-1);
  letter-spacing: -0.02em;
}

.dashboard-subtitle {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin-bottom: var(--sp-6);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
  align-content: start;
}

.dashboard-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-8) 0;
  color: var(--text-muted);
}
.dashboard-empty h2 {
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--on-surface-variant);
  margin-bottom: var(--sp-2);
}


/* === 22. Project Cards === */
.project-card {
  background: var(--surface-container-high);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  cursor: pointer;
  transition: all var(--transition-normal) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.project-card:hover {
  background: var(--surface-bright);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.project-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}

.project-card-module {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.project-card-updated {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.project-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.project-card-settings {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.project-card:hover .project-card-settings { opacity: 1; }
.project-card-settings:hover { color: var(--on-surface); background: var(--surface-container); }

.project-card-name {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--on-surface);
  letter-spacing: -0.01em;
}

.project-card-slug {
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: var(--surface-container);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.project-card-desc {
  font-size: var(--text-base);
  color: var(--on-surface-variant);
  margin-bottom: var(--sp-3);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card-badges {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}

.project-card-stats {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.project-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-base);
  color: var(--text-muted);
}
.project-stat svg {
  opacity: 0.6;
}
.project-stat-count {
  font-weight: 600;
  color: var(--on-surface);
}

/* Status bar on project cards */
.project-card-bar {
  margin-top: auto;
}

.status-bar {
  display: flex;
  height: 6px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--surface-container-lowest);
}

.status-segment {
  height: 100%;
  transition: width var(--transition-slow);
}
.seg-backlog { background: var(--status-backlog); }
.seg-spec { background: var(--tertiary-container); }
.seg-in-progress { background: var(--secondary-container); }
.seg-testing { background: var(--tertiary); }
.seg-deployed { background: var(--color-green); }
.seg-empty { background: transparent; }

/* New Project card */
.project-card-new {
  background: transparent;
  border: 2px dashed var(--ghost-border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 220px;
  transition: all var(--transition-fast);
  color: var(--text-muted);
}
.project-card-new:hover {
  border-color: var(--primary-border-vivid);
  color: var(--primary);
  background: var(--primary-tint-subtle);
}
.project-card-new svg {
  opacity: 0.5;
}
.project-card-new:hover svg {
  opacity: 1;
}
.project-card-new span {
  font-size: var(--text-md);
  font-weight: 500;
}


/* === 23. Module Badge, Size Badge === */
.module-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: color-mix(in srgb, var(--module-color, var(--primary-container)) 12%, transparent);
  color: var(--module-color, var(--primary));
}

.module-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 2px;
  flex-shrink: 0;
}

/* === 24. Entity Panels (Initiatives, Sprints, Releases) === */
.modal-header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.entity-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--sp-2) 0;
}

.entity-group-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-2);
}

.entity-card {
  background: var(--surface-container-high);
  border-radius: var(--radius-xl);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  transition: background var(--transition-fast);
  margin-bottom: var(--sp-1);
}
.entity-card:hover {
  background: var(--surface-bright);
}

.entity-card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.entity-card-title {
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--on-surface);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-card-desc {
  font-size: var(--text-base);
  color: var(--on-surface-variant);
  margin-bottom: var(--sp-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.entity-card-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.entity-card-count {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.entity-date {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Entity detail sections */
.entity-detail-desc {
  font-size: var(--text-md);
  color: var(--on-surface-variant);
  line-height: 1.5;
  margin: var(--sp-3) 0;
}

.entity-progress-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  background: var(--surface-container-low);
  border-radius: var(--radius-2xl);
}

.entity-detail-dates {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--sp-3);
}

/* Panel empty state */
.panel-empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  color: var(--text-muted);
  font-size: var(--text-md);
}

/* Initiative status badges */
.status-init-planned { background: var(--status-backlog-bg); color: var(--status-backlog); }
.status-init-active { background: var(--status-progress-bg); color: var(--secondary); }
.status-init-completed { background: var(--status-deployed-bg); color: var(--color-green); }
.status-init-cancelled { background: var(--error-tint); color: var(--color-red); }

/* Sprint status badges */
.status-sprint-planned { background: var(--status-backlog-bg); color: var(--status-backlog); }
.status-sprint-active { background: var(--status-progress-bg); color: var(--secondary); }
.status-sprint-completed { background: var(--status-deployed-bg); color: var(--color-green); }

/* Form hint */
.form-hint {
  font-size: var(--text-base);
  color: var(--on-surface-variant);
  margin-bottom: var(--sp-4);
}

/* Release task list */
.release-tasks {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.release-task-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-container-high);
  border-radius: var(--radius-md);
}

.release-task-title {
  font-size: var(--text-md);
  color: var(--on-surface);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* === 25. Progress bars === */
.progress-bar {
  flex: 1;
  height: 4px;
  background: var(--surface-container-lowest);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar-lg {
  height: 6px;
  border-radius: var(--radius-full);
}
.progress-fill {
  height: 100%;
  background: var(--primary-container);
  border-radius: inherit;
  transition: width var(--transition-slow) ease;
}


/* === 26. Token Tracking === */
.card-token-count {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-xs);
  color: var(--color-purple);
  opacity: 0.8;
}

/* KD-579: release-notes pill on cards. Visible when the task has any
   release_notes content; doubles as a sprint-close readiness signal. */
.card-release-notes-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-green);
  opacity: 0.85;
}

/* Per-sprint roll-up badge shown in the Make view sprint header (KD-044) */
.sprint-token-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-xs);
  color: var(--color-purple);
  background: var(--white-overlay);
  padding: 1px var(--sp-2);
  border-radius: var(--radius-md);
  font-variant-numeric: tabular-nums;
  margin-left: var(--sp-1);
}

.token-summary {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-container-high);
  border-radius: var(--radius-xl);
}

.token-headline {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-base);
  color: var(--on-surface-variant);
}

.token-icon {
  color: var(--color-purple);
  font-size: var(--text-lg);
}

.token-headline strong {
  color: var(--on-surface);
}

.token-split {
  opacity: 0.7;
}

.token-cost {
  margin-left: auto;
  color: var(--color-amber);
  font-size: var(--text-sm);
}

.token-details {
  margin-top: var(--sp-2);
}

.token-details summary {
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.token-details summary:hover {
  color: var(--on-surface-variant);
}

.token-table {
  width: 100%;
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  border-collapse: collapse;
}

.token-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  padding: var(--sp-1) var(--sp-2);
}

.token-table td {
  padding: var(--sp-1) var(--sp-2);
  color: var(--on-surface-variant);
}

/* --- Effort panel (KD-044) ----------------------------------------- */

.effort-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}

.effort-totals {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--text-md);
  color: var(--on-surface-variant);
}

.effort-total-tokens strong {
  color: var(--on-surface);
  font-size: var(--text-xl);
}

.effort-total-cost {
  color: var(--color-amber);
  font-size: var(--text-md);
}

.effort-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.effort-filter-group {
  display: inline-flex;
  background: var(--surface-container);
  border-radius: var(--radius-lg);
  padding: 2px;
  gap: 2px;
}

.effort-filter-btn {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.effort-filter-btn:hover {
  color: var(--on-surface);
}

.effort-filter-btn.active {
  background: var(--surface-container-high);
  color: var(--on-surface);
}

.effort-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.effort-row {
  background: var(--surface-container);
  border-radius: var(--radius-lg);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--outline-variant);
}

.effort-row-main {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--on-surface-variant);
  flex-wrap: wrap;
}

.effort-who {
  color: var(--on-surface);
  font-weight: 500;
}

.effort-tag {
  font-size: var(--text-2xs);
  padding: 1px var(--sp-1);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.effort-tag-ai {
  background: var(--primary-tint-strong);
  color: var(--color-primary);
}

.effort-tag-human {
  background: var(--white-overlay);
  color: var(--text-muted);
}

.effort-op {
  flex: 1 1 auto;
  min-width: 0;
}

.effort-tokens {
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
}

.effort-cost {
  color: var(--color-amber);
  font-variant-numeric: tabular-nums;
}

.effort-model {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
}

.effort-when {
  color: var(--text-dim);
  font-size: var(--text-xs);
  margin-left: auto;
}

.effort-empty {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  background: var(--surface-container);
  border-radius: var(--radius-lg);
}

.effort-empty code {
  background: var(--surface-container-high);
  padding: 1px var(--sp-1);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs);
}

/* --- Token Spend analytics dashboard (KD-044, KD-325) -------------- */

#tokens-view {
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
}

.tokens-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
  position: relative;
}

.tokens-header-titles .tokens-title {
  font-size: var(--text-5xl);
  color: var(--on-surface);
  margin: 0 0 var(--sp-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tokens-header-titles .tokens-subtitle {
  font-size: var(--text-md);
  color: var(--text-muted);
  margin: 0;
}

.tokens-header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  position: relative;
}

/* Pill chip segmented control — used for time range AND top-driver toggle */
.tokens-range-seg,
.tokens-groupby-seg {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  padding: var(--sp-1);
}

.tokens-chip {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  user-select: none;
}

.tokens-chip:hover {
  color: var(--on-surface);
  background: var(--white-overlay);
}

.tokens-chip.active {
  color: var(--primary);
  background: var(--primary-tint-light);
  border-color: var(--primary-border);
}

.tokens-custom-popover {
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  box-shadow: var(--shadow-lg);
  z-index: 20;
}

.tokens-custom-popover label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tokens-custom-popover input[type="date"] {
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: var(--sp-1) var(--sp-2);
  color: var(--on-surface);
  font-family: inherit;
  font-size: var(--text-sm);
  color-scheme: dark;
}

/* KD-449: Admin → Model pricing tab. Table with inline-edit rates, add
   form, and per-row backfill button. Superadmin-only. */
.admin-model-prices-unknown {
  background: var(--surface-container);
  border: 1px solid var(--color-amber);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.admin-model-prices-unknown-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.admin-model-prices-unknown-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast);
  text-align: left;
  font-family: inherit;
}
.admin-model-prices-unknown-chip:hover {
  border-color: var(--color-primary);
}
.admin-model-prices-unknown-meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.admin-model-prices-add {
  margin-bottom: var(--sp-5);
}
.admin-model-prices-add-form {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-3);
}
.admin-model-prices-input {
  background: var(--surface-container-high);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  font-family: inherit;
  font-size: var(--text-md);
}
.admin-model-prices-input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.admin-model-prices-table-wrap {
  overflow-x: auto;
}
.admin-model-prices-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-model-prices-table th {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--outline-variant);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
}
.admin-model-prices-table td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--outline-variant);
  vertical-align: middle;
}
.admin-model-prices-table td input.admin-model-prices-input {
  width: 100%;
  max-width: 120px;
}
.admin-model-prices-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  white-space: nowrap;
}

/* KD-444: amber warning banner surfaced above the KPI strip when the
   selected window contains token_log rows stored with NULL cost_usd
   (agent logged against a model we don't yet have pricing for). */
.tokens-unpriced-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--primary-tint-100, rgba(255, 193, 7, 0.08));
  border: 1px solid var(--color-amber);
  border-radius: var(--radius-lg);
  color: var(--on-surface);
  font-size: var(--text-md);
}
.tokens-unpriced-banner [data-lucide],
.tokens-unpriced-banner svg {
  color: var(--color-amber);
  flex-shrink: 0;
  margin-top: 2px;
}
.tokens-unpriced-banner .tokens-unpriced-body {
  flex: 1;
  line-height: 1.5;
}
.tokens-unpriced-banner .tokens-unpriced-sub {
  display: block;
  margin-top: var(--sp-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.tokens-unpriced-banner code {
  background: var(--white-overlay);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* KPI strip */
.tokens-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.tokens-panel {
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
}

.tokens-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}

.tokens-panel-title {
  font-size: var(--text-lg);
  color: var(--on-surface);
  font-weight: 600;
  margin: 0;
}

.tokens-panel-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: var(--sp-1) 0 0;
}

.tokens-kpi-card {
  display: flex;
  flex-direction: column;
  min-height: 164px;
}

.tokens-kpi-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.tokens-kpi-value {
  font-size: var(--text-6xl);
  color: var(--on-surface);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-top: var(--sp-3);
  line-height: 1.1;
}

.tokens-kpi-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

.tokens-kpi-extra {
  margin-top: auto;
  padding-top: var(--sp-3);
}

.tokens-kpi-bar-track {
  background: var(--white-overlay);
  border-radius: var(--radius-full);
  height: 6px;
  overflow: hidden;
}

.tokens-kpi-bar-fill {
  background: linear-gradient(90deg, var(--chart-blue-1), var(--chart-blue-2));
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow) ease-out;
}

/* Budget over 100% — only fires when the user has explicitly set a
   budget AND month-to-date has crossed it. No budget = neutral blue. */
.tokens-kpi-bar-fill.over {
  background: linear-gradient(90deg, var(--color-amber), var(--color-red));
}

.tokens-kpi-bar-fill.warn {
  background: linear-gradient(90deg, var(--chart-blue-2), var(--color-amber));
}

.tokens-delta-up   { color: var(--color-amber); font-variant-numeric: tabular-nums; }
.tokens-delta-down { color: var(--color-green); font-variant-numeric: tabular-nums; }
.tokens-delta-flat { color: var(--text-dim); font-variant-numeric: tabular-nums; }

.tokens-status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-weight: 500;
}

.tokens-status-chip.ok    { background: var(--success-tint); color: var(--color-green); border-color: var(--success-border-soft); }
.tokens-status-chip.warn  { background: var(--warning-tint); color: var(--color-amber); border-color: var(--warning-border-light); }
.tokens-status-chip.over  { background: var(--error-tint);   color: var(--color-red);   border-color: var(--error-border); }

.tokens-kpi-spark {
  height: 44px;
  margin-top: var(--sp-3);
  position: relative;
}

/* Charts row */
.tokens-charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  align-items: stretch;
}

/* Let the trend panel grow its chart to match the donut + legend
   column height, so the right side's legend doesn't leave an awkward
   empty block under the bar chart. */
.tokens-panel-trend {
  display: flex;
  flex-direction: column;
}

.tokens-panel-trend .tokens-chart-host {
  flex: 1 1 auto;
  min-height: 220px;
}

.tokens-panel-donut {
  display: flex;
  flex-direction: column;
}

.tokens-chart-host {
  position: relative;
  height: 220px;
}

.tokens-chart-host-donut {
  height: 180px;
  flex: 0 0 auto;
}

/* Cost-per-shipped-task panel on the project Tokens page. Reuses
   .org-cpt-* layout classes. KD-562: row is cost-per-task (50%) +
   project-pace (50%); sprint scorecard moved down next to top cost
   drivers in .tokens-top-row. */
.tokens-cpt-row,
.tokens-drivers-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  align-items: stretch;
}
.tokens-cpt-row > .tokens-panel,
.tokens-drivers-row > .tokens-panel { margin-bottom: 0; }

.tokens-panel-cost-per-task,
.tokens-panel-sprint-scorecard,
.tokens-panel-project-pace {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* KD-562: project-pace compact heatmap (24 h × 3 weeks). Reuses the
   .org-hbd-cell ramp rules so colour language matches the org dashboard.
   Sparse axis labels — only 12a/12p/11p on rows, week-start on columns. */
.tokens-project-pace { width: 100%; }
.tokens-pace-grid {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 2px var(--sp-2);
  align-items: center;
}
.tokens-pace-col-headers {
  display: grid;
  gap: 2px;
  height: 14px;
}
.tokens-pace-col-header {
  font-size: var(--text-2xs);
  color: transparent;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  align-self: end;
  line-height: 1;
  text-align: left;
  padding-left: 1px;
}
.tokens-pace-col-header.is-tick {
  color: var(--text-muted);
  font-weight: 500;
}
.tokens-pace-row-label {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: var(--text-2xs);
  color: var(--text-dim);
  text-align: right;
  padding-right: var(--sp-1);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tokens-pace-cells {
  display: grid;
  gap: 2px;
  height: 10px;
}
.tokens-pace-cells .org-hbd-cell { height: 10px; }
.tokens-pace-footer {
  margin-top: var(--sp-3);
  text-align: right;
  font-size: var(--text-xs);
}

/* Sprint scorecard table — compact, zebra-striped rows with numeric
   tabular columns so eyes line up across ships / spend / $/task. */
.tokens-scorecard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.tokens-scorecard-table thead th {
  text-align: right;
  padding: var(--sp-1) var(--sp-1);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--outline-variant);
  white-space: nowrap;
}
.tokens-scorecard-table thead th:first-child { text-align: left; }
.tokens-scorecard-table tbody td {
  padding: var(--sp-1) var(--sp-1);
  text-align: right;
  border-bottom: 1px solid var(--outline-variant);
  color: var(--on-surface);
  white-space: nowrap;
}
.tokens-scorecard-table tbody td:first-child { text-align: left; }
.tokens-scorecard-table tbody tr:last-child td { border-bottom: 0; }
.tokens-scorecard-sprint {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 500;
}
.tokens-scorecard-status {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--outline);
}
.tokens-scorecard-status.is-active    { background: var(--color-primary); box-shadow: 0 0 6px var(--primary-tint-3); }
.tokens-scorecard-status.is-completed { background: var(--color-green); }
.tokens-scorecard-status.is-planned   { background: var(--text-dim); }
.tokens-scorecard-vs {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--white-overlay);
  color: var(--text-muted);
}
.tokens-scorecard-vs.is-over   { background: rgba(232, 96, 96, 0.15); color: var(--color-red); }
.tokens-scorecard-vs.is-under  { background: rgba(94, 180, 120, 0.18); color: var(--color-green); }
.tokens-scorecard-vs.is-review { background: rgba(232, 96, 96, 0.28); color: var(--color-red); font-weight: 600; }
.tokens-scorecard-empty-cell { color: var(--text-dim); }
.tokens-scorecard-footer {
  margin-top: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: right;
}

.tokens-trend-legend {
  display: inline-flex;
  gap: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.tokens-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: var(--sp-1);
  vertical-align: middle;
}

.tokens-donut-legend {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.tokens-donut-legend li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--on-surface-variant);
}

.tokens-donut-legend li .name {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tokens-donut-legend li .cost {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Top cost drivers */
.tokens-top {
  margin-bottom: var(--sp-5);
}

.tokens-top-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.tokens-top-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 5fr) minmax(0, 4fr) 70px 80px;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-md);
  color: var(--on-surface-variant);
}

.tokens-top-row .tokens-top-id {
  font-family: var(--font-mono, monospace);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.tokens-top-row .tokens-top-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--on-surface);
}

.tokens-top-bar-track {
  background: var(--white-overlay);
  border-radius: var(--radius-full);
  height: 6px;
  overflow: hidden;
}

.tokens-top-bar-fill {
  background: linear-gradient(90deg, var(--primary-container), var(--primary));
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow) ease-out;
}

.tokens-top-row .tokens-top-tokens,
.tokens-top-row .tokens-top-cost {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tokens-top-row .tokens-top-tokens { color: var(--text-muted); font-size: var(--text-sm); }
.tokens-top-row .tokens-top-cost   { color: var(--on-surface); font-weight: 500; }

/* Event log header */
.tokens-log-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-2) 0 var(--sp-3);
  flex-wrap: wrap;
}

.tokens-log-title {
  font-size: var(--text-lg);
  color: var(--on-surface);
  font-weight: 600;
  margin: 0 var(--sp-2) 0 0;
}

.tokens-log-filters {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.tokens-log-filters .tokens-chip {
  border: 1px solid var(--outline-variant);
  background: var(--surface-container);
}

.tokens-log-count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Event log table */
.tokens-log {
  padding: 0;
  overflow: hidden;
}

.tokens-table-wrap {
  overflow-x: auto;
}

.tokens-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-md);
}

.tokens-table th {
  text-align: left;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--text-xs);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--outline-variant);
  font-weight: 500;
  background: var(--surface-container);
}

.tokens-table th.num { text-align: right; }

.tokens-table td {
  padding: var(--sp-3) var(--sp-4);
  color: var(--on-surface-variant);
  border-bottom: 1px solid var(--surface-container-low);
  vertical-align: middle;
}

.tokens-table tr:last-child td { border-bottom: 0; }

.tokens-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface);
}

.tokens-table td.tokens-col-when {
  min-width: 108px;
  white-space: nowrap;
}

.tokens-table .tokens-when-abs {
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-md);
}

.tokens-table .tokens-when-rel {
  color: var(--text-muted);
  font-size: var(--text-xs);
  margin-top: 1px;
}

.tokens-table tr:hover td {
  background: var(--white-overlay);
}

.tokens-entity-link {
  color: var(--primary);
  text-decoration: none;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  font-weight: 500;
}

a.tokens-entity-link { cursor: pointer; }

.tokens-entity-link:hover { text-decoration: underline; }

.tokens-table td.heat-cell {
  position: relative;
}

.tokens-table td.heat-cell::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--heat, transparent);
  opacity: 0.18;
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.tokens-table tr.grouped td:first-child {
  border-left: 2px solid var(--primary-container);
}

/* Pagination footer */
.tokens-log-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--outline-variant);
  background: var(--surface-container);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.tokens-log-pager .tokens-pager-count {
  color: var(--text-muted);
}

.tokens-log-pager .tokens-pager-chips {
  display: inline-flex;
  gap: var(--sp-1);
}

.tokens-log-pager .tokens-chip[disabled] {
  opacity: 0.35;
  cursor: default;
}

.tokens-log-pager .tokens-chip {
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-high);
}

.tokens-footnote {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--outline-variant);
}

.tokens-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-dim);
  font-size: var(--text-sm);
}

@media (max-width: 1200px) {
  .tokens-kpis { grid-template-columns: repeat(2, 1fr); }
  .tokens-charts { grid-template-columns: 1fr; }
  .tokens-cpt-row { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .tokens-kpis { grid-template-columns: 1fr; }
  .tokens-top-row {
    grid-template-columns: 36px minmax(0, 2fr) minmax(0, 1.5fr) 80px;
  }
  .tokens-top-row .tokens-top-tokens { display: none; }
}

/* Activity feed token badge */
.activity-token-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--text-2xs);
  color: var(--color-purple);
  background: var(--white-overlay);
  padding: 1px var(--sp-1);
  border-radius: var(--radius-sm);
  margin-left: var(--sp-1);
  font-variant-numeric: tabular-nums;
}


/* === 27. Settings === */

.settings-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 32px;
}

.settings-header {
  margin-bottom: var(--sp-8);
}

.settings-heading {
  font-size: var(--text-6xl);
  font-weight: 700;
  color: var(--on-surface);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.settings-subtitle {
  font-size: var(--text-lg);
  color: var(--text-muted);
  line-height: 1.5;
}

.settings-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ghost-border);
  margin-bottom: var(--sp-8);
}

.settings-tab {
  padding: 10px 20px;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.settings-tab:hover {
  color: var(--on-surface);
}
.settings-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.settings-panel-header {
  margin-bottom: var(--sp-8);
}

.settings-panel-title {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--on-surface);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.settings-panel-desc {
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: 1.5;
}

/* Project Settings — chip lists, add rows, color pickers */
.ps-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.ps-add-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.ps-color-input {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  padding: 0;
  background: transparent;
  flex-shrink: 0;
  vertical-align: middle;
}
.ps-invite-row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-4);
}
.ps-invite-row .select {
  width: auto;
}

.settings-section {
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--ghost-border);
}
.settings-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.settings-section-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: var(--sp-4);
}

.settings-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.settings-field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.settings-field input,
.settings-field select {
  width: 100%;
  background: var(--surface-container-lowest);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  padding: 10px 14px;
  color: var(--on-surface);
  outline: none;
  font-family: inherit;
}

.settings-field-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-2);
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--surface-container);
  border-radius: var(--radius-lg);
}

.settings-toggle-title {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--on-surface);
}

.settings-toggle-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 2px;
}

.toggle-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.toggle-label input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.settings-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-container);
  border-radius: var(--radius-lg);
}
.settings-info-icon {
  flex-shrink: 0;
}
.settings-info-row > div:nth-child(2) {
  flex: 1;
}

.settings-badge {
  font-size: var(--text-xs);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.badge-active {
  background: var(--success-tint);
  color: var(--color-green);
}
.badge-muted {
  background: var(--white-overlay);
  color: var(--text-muted);
}

.settings-info-box {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--primary-tint-light);
  border: 1px solid var(--primary-focus-dim);
  border-radius: var(--radius-md);
  display: flex;
  gap: 10px;
}
.settings-info-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 4px;
}
.settings-info-text {
  font-size: var(--text-sm);
  color: var(--primary-text-muted);
  line-height: 1.6;
}
.settings-info-text code {
  background: var(--surface-container-high);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

/* KD-251: Per-user MCP tokens panel */
.settings-section-header {
  margin-bottom: var(--sp-3);
}
.settings-section-header .settings-section-title {
  margin-bottom: var(--sp-1);
}

.mcp-token-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.mcp-token-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-container);
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast);
}
.mcp-token-row:hover {
  background: var(--surface-container-high);
}
.mcp-token-meta {
  flex: 1;
  min-width: 0;
}
.mcp-token-name {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--on-surface);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.mcp-token-sub {
  margin-top: 3px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mcp-token-sub code {
  background: var(--surface-container-high);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--on-surface-variant);
}
.mcp-token-dot {
  color: var(--text-dim);
}
.mcp-token-mint {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-2);
}
.mcp-token-mint input {
  flex: 1;
  background: var(--surface-container-lowest);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  padding: 10px 14px;
  color: var(--on-surface);
  outline: none;
  font-family: inherit;
}
.mcp-token-mint input::placeholder {
  color: var(--text-dim);
}

/* Settings toggle switch */
.settings-toggle {
  width: 36px;
  height: 20px;
  background: var(--surface-container-high);
  border-radius: 10px;
  position: relative;
  transition: background var(--transition-normal);
}
.settings-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform var(--transition-normal), background var(--transition-normal);
}
input:checked + .settings-toggle {
  background: var(--primary-container);
}
input:checked + .settings-toggle::after {
  transform: translateX(16px);
  background: var(--on-surface);
}

/* Settings theme cards */
.settings-theme-card {
  cursor: pointer;
  padding: 10px;
  border-radius: var(--radius-xl);
  border: 2px solid transparent;
  transition: border-color var(--transition-normal);
}
.settings-theme-card:hover {
  border-color: var(--outline-variant);
}
.settings-theme-card.active {
  border-color: var(--primary-container);
}

/* Settings size buttons */
.settings-size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  font-size: var(--text-base);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.settings-size-btn:hover {
  background: var(--surface-bright);
}
.settings-size-btn.active {
  background: var(--primary-container);
  color: var(--on-surface);
  font-weight: 600;
}

/* Theme preview */
.theme-preview {
  aspect-ratio: 16/10;
  border-radius: var(--radius-md);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--outline-variant);
}
.theme-preview-bar {
  height: 6px;
  width: 50%;
  border-radius: var(--radius-sm);
}
.theme-preview-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  flex: 1;
}
.theme-preview-cols div {
  border-radius: var(--radius-sm);
}
.theme-preview-dark {
  background: #0e0e0e;
}
.theme-preview-dark .theme-preview-bar {
  background: var(--surface-container-high);
}
.theme-preview-dark .theme-preview-cols div:nth-child(1) { background: var(--surface-container-low); }
.theme-preview-dark .theme-preview-cols div:nth-child(2) { background: var(--surface-container-high); }
.theme-preview-dark .theme-preview-cols div:nth-child(3) { background: var(--surface-container-low); }

.theme-preview-midnight {
  background: #0a0a1a;
}
.theme-preview-midnight .theme-preview-bar {
  background: #1a1a3a;
}
.theme-preview-midnight .theme-preview-cols div:nth-child(1) { background: #12122a; }
.theme-preview-midnight .theme-preview-cols div:nth-child(2) { background: #1a1a3a; }
.theme-preview-midnight .theme-preview-cols div:nth-child(3) { background: #12122a; }

.theme-preview-light {
  background: #f5f5f5;
}
.theme-preview-light .theme-preview-bar {
  background: #e0e0e0;
}
.theme-preview-light .theme-preview-cols div:nth-child(1) { background: #eee; }
.theme-preview-light .theme-preview-cols div:nth-child(2) { background: #ddd; }
.theme-preview-light .theme-preview-cols div:nth-child(3) { background: #eee; }

.theme-label {
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: center;
  margin-top: var(--sp-2);
  color: var(--on-surface);
}


/* === 28. Responsive === */
@media (max-width: 1024px) {

}

@media (max-width: 768px) {
  #sidebar { display: none; }
  #board {
    flex-direction: column;
    height: calc(100vh - 52px);
  }
  .column { max-width: 100%; min-width: 100%; }
  #toolbar, #filter-bar {
    flex-wrap: wrap;
    height: auto;
    padding: var(--sp-3);
    gap: var(--sp-2);
  }
  #filter-bar { flex-direction: column; align-items: flex-start; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-sidebar { border-left: none; padding-left: 0; padding-top: var(--sp-4); }
  .settings-container { padding: 24px 16px; }
  .settings-tabs { overflow-x: auto; }
  .settings-tab { padding: 8px 14px; font-size: var(--text-base); }
  .dashboard { height: calc(100vh - 52px); }
  .slide-over-content { width: 100vw; }

}

@media (max-width: 480px) {
  .settings-container { padding: 16px 12px; }
  .dashboard { padding: var(--sp-4); }
}


/* === 29. Utility classes === */
.hidden { display: none !important; }

/* Toggle row wrapper (settings) */
.toggle-with-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.toggle-state-label {
  font-size: var(--text-sm);
  color: var(--text-dim);
  min-width: 20px;
}

/* Input with inline button */
.input-with-action {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.input-with-action > input,
.input-with-action > textarea {
  flex: 1;
  min-width: 0;
}
.input-with-action > textarea {
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--text-md);
}
.input-with-action.align-start {
  align-items: flex-start;
}
.input-with-action > button {
  flex-shrink: 0;
}

/* Connected agents list on Project Settings → Agent (KD-443) */
.connected-agents {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.connected-agent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.connected-agent-meta {
  flex: 1;
  min-width: 0;
}
.connected-agent-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--on-surface);
  font-size: var(--text-lg);
  font-weight: 500;
}
.connected-agent-sub {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--text-md);
  margin-top: var(--sp-1);
  flex-wrap: wrap;
}
.connected-agent-cwd {
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Manual token mint (collapsed details) — KD-440 */
.mcp-manual-mint {
  margin-top: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.mcp-manual-mint > summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--text-md);
  padding: var(--sp-1) 0;
  user-select: none;
}
.mcp-manual-mint[open] > summary {
  color: var(--on-surface);
  margin-bottom: var(--sp-2);
}

/* === Agent pairing modal (KD-439) === */
.pair-modal {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.pair-modal-title {
  font-size: var(--text-4xl);
  margin: 0;
  color: var(--on-surface);
}
.pair-modal-skip-note {
  margin: calc(-1 * var(--sp-2)) 0 0 0;
  font-size: var(--text-md);
  color: var(--on-surface-variant);
  line-height: 1.5;
}
.pair-modal-skip-note strong {
  color: var(--on-surface);
  font-weight: 600;
}
.pair-modal-cowork-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--color-amber);
  background: rgba(251, 191, 36, 0.08);
  border-radius: 8px;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--on-surface-variant);
}
.pair-modal-cowork-warning > svg,
.pair-modal-cowork-warning > [data-lucide] {
  color: var(--color-amber);
  flex-shrink: 0;
  margin-top: 2px;
}
.pair-modal-cowork-warning strong {
  display: block;
  color: var(--on-surface);
  font-weight: 600;
  margin-bottom: 2px;
}
.pair-modal-cowork-warning code {
  font-size: var(--text-sm);
  padding: 1px 4px;
  background: var(--white-overlay);
  border-radius: 3px;
}
.pair-code-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  background: var(--surface-container-high);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.pair-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  user-select: all;
}
.pair-countdown {
  font-size: var(--text-md);
  color: var(--text-muted);
}
.pair-tabs {
  display: flex;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--sp-2);
}
.pair-agent-picker {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.pair-agent-picker-label {
  font-size: var(--text-md);
  color: var(--text-muted);
}
.pair-pane {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.pair-modal-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.pair-modal-success .pair-modal-footer {
  border-top: none;
  padding-top: 0;
  justify-content: flex-end;
}

/* Transparency disclosure inside the terminal tab (KD-442) */
.pair-transparency {
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.pair-transparency > summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--text-md);
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.pair-transparency[open] > summary {
  color: var(--on-surface);
  margin-bottom: var(--sp-2);
}
.pair-view-script-link {
  margin-left: auto;
  color: var(--color-primary);
  font-size: var(--text-md);
}
.pair-transparency-body {
  color: var(--text-muted);
  font-size: var(--text-md);
}
.pair-transparency-body ol {
  margin: var(--sp-2) 0 var(--sp-2) var(--sp-5);
}
.pair-transparency-body li {
  margin-bottom: var(--sp-1);
}
.pair-transparency-source {
  margin-top: var(--sp-2);
  color: var(--text-dim);
  font-size: var(--text-sm);
}

/* Telemetry dashboard (KD-442) */
.telemetry-pill {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: 10px;
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.telemetry-pill-error {
  background: var(--error-tint-medium);
  color: var(--color-red);
}
.telemetry-pill-warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-amber);
}
.telemetry-pill-info {
  background: var(--primary-tint-medium);
  color: var(--color-primary);
}
.telemetry-stat-error .admin-stat-value { color: var(--color-red); }
.telemetry-stat-warning .admin-stat-value { color: var(--color-amber); }
.telemetry-stat-info .admin-stat-value { color: var(--color-primary); }
.telemetry-filters {
  display: flex;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-3);
  flex-wrap: wrap;
}
.telemetry-filters label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.telemetry-filters select,
.telemetry-filters input {
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--sp-1) var(--sp-2);
  color: var(--on-surface);
  font-size: var(--text-md);
  min-width: 160px;
}
.telemetry-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.telemetry-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}
.telemetry-table thead th {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-container);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.telemetry-table tbody td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--outline-variant);
  vertical-align: top;
}
.telemetry-table tbody tr:last-child td {
  border-bottom: none;
}
.telemetry-table details summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-top: var(--sp-1);
}
.telemetry-table pre {
  background: var(--surface-container-low);
  padding: var(--sp-2);
  border-radius: 4px;
  font-size: var(--text-sm);
  overflow-x: auto;
  margin-top: var(--sp-1);
}
.telemetry-when {
  white-space: nowrap;
  color: var(--text-muted);
}

/* KD-446: highlight for the deep-linked telemetry row (Telegram click-through) */
.telemetry-table tr.telemetry-row-focus td {
  background: var(--primary-tint-light);
  box-shadow: inset 2px 0 0 var(--color-primary);
}

/* KD-539: per-row Why/Next guidance — same copy the Telegram fanout uses,
   surfaced in-table so the operator can triage without leaving the dashboard. */
.telemetry-guidance {
  margin-top: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-left: 2px solid var(--outline-variant);
  font-size: var(--text-base);
  color: var(--on-surface-variant);
  line-height: 1.5;
}
.telemetry-guidance > div + div {
  margin-top: var(--sp-1);
}
.telemetry-guidance b {
  color: var(--text-muted);
  font-weight: 600;
}

/* Inline "Report a problem" form (KD-442) */
.pair-report-link {
  color: var(--color-primary);
  margin-left: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.pair-report-form {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.pair-report-title {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--on-surface);
}
.pair-report-textarea,
.pair-report-contact {
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--sp-2);
  color: var(--on-surface);
  font-size: var(--text-md);
  font-family: inherit;
}
.pair-report-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
}

/* Login panel icon (centered, colored) */
.login-icon {
  display: block;
  margin: 0 auto var(--sp-3);
  color: var(--color-primary);
}

/* Login panel centered content */
.login-panel-centered {
  text-align: center;
  margin-bottom: var(--sp-4);
}

/* Muted description text */
.text-muted-lg {
  color: var(--text-muted);
  font-size: var(--text-lg);
}

/* Success message */
.success-text {
  color: var(--color-primary);
  font-size: var(--text-md);
  margin-top: var(--sp-2);
  text-align: center;
}

/* Keyboard shortcut keys (fixed width) */
.kbd-fixed {
  min-width: 2rem;
  text-align: center;
}

/* === 29b. DaisyUI Modal Overrides === */
dialog.modal .modal-box {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-container-highest) transparent;
}
/* scrollbar: inherits global 4px style */


/* === 30. Notyf Customization === */
body .notyf__toast {
  border-radius: var(--radius-xl);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  background: var(--surface-container-high) !important;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--outline-variant);
}
body .notyf__toast--success {
  border-color: var(--success-border-light);
}
body .notyf__toast--error {
  border-color: var(--error-border-light);
}
body .notyf__toast--warning {
  border-color: var(--warning-border-light);
}

/* KD-293: Undo toast (custom, not Notyf — supports action buttons) */
.undo-toast {
  position: fixed;
  top: var(--sp-4);
  left: 50%;
  transform: translateX(-50%) translateY(var(--sp-3));
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  max-width: min(480px, calc(100vw - var(--sp-8)));
  background: var(--surface-container-high);
  color: var(--on-surface);
  border-radius: var(--radius-xl);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.45;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  opacity: 0;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.undo-toast > span {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.undo-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.undo-toast-btn {
  flex-shrink: 0;
  align-self: center;
  background: none;
  border: none;
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.undo-toast-btn:hover {
  background: var(--primary-tint);
}
.undo-toast.success {
  background: var(--surface-container-high);
  border: 1px solid var(--success-border-light);
  color: var(--color-green);
}
.undo-toast.success .undo-toast-btn {
  color: var(--color-green);
}
.undo-toast.success .undo-toast-btn:hover {
  background: var(--success-tint);
}
.undo-toast.warning {
  background: var(--surface-container-high);
  border: 1px solid var(--warning-border-light);
  color: var(--color-amber);
}
.undo-toast.warning .undo-toast-btn {
  color: var(--color-amber);
}
.undo-toast.warning .undo-toast-btn:hover {
  background: var(--error-tint);
}
.undo-toast-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 600;
}
.undo-toast-link:hover {
  text-decoration-thickness: 2px;
}


/* === 31. Lucide icon base === */
.lucide {
  display: inline-block;
  vertical-align: middle;
}


/* === 32. Icon size utilities === */
.icon-xs {
  width: var(--icon-xs);
  height: var(--icon-xs);
}
.icon-sm {
  width: var(--icon-sm);
  height: var(--icon-sm);
}
.icon-md {
  width: var(--icon-md);
  height: var(--icon-md);
}
.icon-lg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}
.icon-xl {
  width: var(--icon-xl);
  height: var(--icon-xl);
}
.icon-2xl {
  width: var(--icon-2xl);
  height: var(--icon-2xl);
}


/* === 33. Settings view layout === */
.settings-view {
  height: calc(100vh - 52px);
  overflow-y: auto;
}


.settings-icon-secondary {
  color: var(--secondary);
}

.settings-icon-muted {
  color: var(--text-muted);
}

.settings-info-box-icon {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
}

.settings-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

.settings-size-group {
  display: flex;
  gap: var(--sp-2);
}


.settings-theme-card.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.theme-label-muted {
  color: var(--text-muted);
}


/* === 34. Sidebar logo text === */
.sidebar-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--transition-normal), width var(--transition-normal);
}

.sidebar-logo-title {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--on-surface);
  letter-spacing: -0.03em;
}

.sidebar-logo-subtitle {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--sidebar-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-top: 2px;
}

#sidebar .sidebar-logo-text {
  opacity: 1;
  width: auto;
}

#sidebar .sidebar-logo {
  width: auto;
}


/* === 35. Deploy info bar === */
.deploy-info-bar {
  position: fixed;
  bottom: 8px;
  right: 12px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  opacity: 0.4;
  background: var(--surface-blur-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  z-index: 50;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}
.deploy-info-bar:hover {
  opacity: 0.7;
  pointer-events: auto;
}


/* === 36. Command palette search icon === */
.cmd-palette-search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}


/* === 37. Task detail view — modal (default) + full-screen === */
/* KD-083: Asana-style dual-mode task view. Modal is a centered fixed
   dialog over the board; full-screen fills the main content area.
   Sidebar and breadcrumb stay visible in both modes. */

#initiative-detail {
  height: calc(100vh - 52px);
  overflow-y: auto;
  background: var(--background);
}

/* Task view — shared base (both modes use position:fixed so the
   board behind stays mounted, and mode transitions are just size/
   position changes rather than DOM moves or remounts). */
#task-detail {
  position: fixed;
  z-index: 90;
  background: var(--background);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  top: var(--tv-top, 52px);
  left: var(--tv-left, auto);
  right: var(--tv-right, 0);
  width: var(--tv-width, min(1200px, 75vw));
  height: var(--tv-height, calc(100vh - 52px));
  transform: var(--tv-transform, translate(0, 0));
  transition:
    top var(--transition-normal) var(--ease-out),
    left var(--transition-normal) var(--ease-out),
    right var(--transition-normal) var(--ease-out),
    width var(--transition-normal) var(--ease-out),
    height var(--transition-normal) var(--ease-out),
    transform var(--transition-normal) var(--ease-out),
    border-radius var(--transition-normal) var(--ease-out),
    box-shadow var(--transition-normal) var(--ease-out),
    opacity var(--transition-fast) var(--ease-out);
}

/* Modal mode is actually a right-anchored slide-over pane (Asana-style).
   Single-column layout with horizontal props bar lets the pane be ~30%
   narrower than the previous two-column design. */
#task-detail[data-mode="modal"] {
  --tv-top: 52px;
  --tv-left: auto;
  --tv-right: 0;
  --tv-width: min(840px, 60vw);
  --tv-height: calc(100vh - 52px);
  --tv-transform: translate(0, 0);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  border-left: 1px solid var(--outline-variant);
}

#task-detail[data-mode="full"] {
  --tv-top: 52px;
  --tv-left: var(--sidebar-expanded-w);
  --tv-right: 0;
  --tv-width: calc(100vw - var(--sidebar-expanded-w));
  --tv-height: calc(100vh - 52px);
  --tv-transform: translate(0, 0);
  border-radius: 0;
  box-shadow: none;
  border: none;
}

/* Open animation — slide in from the right edge */
#task-detail.task-view-opening {
  opacity: 0;
}
#task-detail[data-mode="modal"].task-view-opening {
  --tv-transform: translate(24px, 0);
}

/* Backdrop — present in modal (pane) mode only, transparent so the board
   stays fully visible. KD-400: pointer-events:none so it doesn't swallow
   clicks on task cards (should swap the pane to the clicked task), the
   toolbar "Capture to inbox…" input, or any other interactive element on the
   surface behind the pane. Closing now happens via the explicit X
   button, Esc, or the document-level click handler that allowlists
   task cards + toolbar. */
#task-view-backdrop {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: transparent;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--transition-fast) var(--ease-out);
}
#task-view-backdrop.task-view-backdrop-fading {
  opacity: 0;
}

/* Task view header — max/min/close button bar */
.task-view-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--white-overlay);
  background: var(--surface-container-low, var(--background));
  min-height: 40px;
}
.task-view-header-spacer {
  flex: 1;
}
/* KD-405: compact task title shown beside the ID badge once the real title
   scrolls out of view. Fades in/out and truncates with ellipsis. */
.task-view-header-title {
  margin-left: var(--sp-2);
  max-width: 52ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--on-surface);
  font-size: var(--text-md);
  font-weight: 600;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.task-view-header-title.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* KD-403: Task ID badge in the pinned header — stays visible while body scrolls. */
.task-view-id-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--white-overlay);
  border-radius: var(--radius-sm);
  background: var(--white-overlay);
  color: var(--on-surface-variant);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.task-view-id-badge:hover {
  background: var(--white-overlay-vivid);
  color: var(--on-surface);
}
.task-view-id-badge:empty {
  display: none;
}
.task-view-header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.task-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--on-surface-variant);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.task-view-btn:hover {
  background: var(--white-overlay);
  color: var(--on-surface);
}
.task-view-btn svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* Mode-specific button visibility: modal shows max, full shows min */
#task-detail[data-mode="modal"] .task-view-btn-minimize { display: none; }
#task-detail[data-mode="full"] .task-view-btn-maximize { display: none; }

/* KD-260: overflow/"more actions" menu lives in the task view header
   next to copy-link / min / max / close — size and hover to match those
   buttons instead of the default 32px trigger. */
.task-view-header-actions .overflow-menu-trigger {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--on-surface-variant);
}
.task-view-header-actions .overflow-menu-trigger:hover {
  background: var(--white-overlay);
  color: var(--on-surface);
}
.task-view-header-actions .overflow-menu-trigger svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* Body scroll container — flex:1 so header stays pinned */
#task-detail > #task-detail-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Narrow viewports: force full-screen mode, hide sidebar offset, hide maximize */
@media (max-width: 720px) {
  #task-detail[data-mode="modal"],
  #task-detail[data-mode="full"] {
    --tv-top: 52px;
    --tv-left: 0px;
    --tv-right: 0;
    --tv-width: 100vw;
    --tv-height: calc(100vh - 52px);
    --tv-transform: translate(0, 0);
    border-radius: 0;
    box-shadow: none;
    border: none;
  }
  #task-detail .task-view-btn-maximize { display: none; }
  #task-view-backdrop { display: none; }
}

/* Under 768px the sidebar is hidden entirely — fill the whole width in full mode */
@media (max-width: 768px) and (min-width: 721px) {
  #task-detail[data-mode="full"] {
    --tv-left: 0px;
    --tv-width: 100vw;
  }
}

/* Horizontal properties bar (Asana-style) — replaces the right sidebar.
   Sits under the title and lets the body claim the full pane width. */
.task-props-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-3) 0 var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--white-overlay);
}
.task-prop {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.task-prop-tags {
  flex: 1 1 100%;
}
.task-prop-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
.task-prop-select {
  background: transparent;
  border: 1px solid var(--white-overlay-subtle);
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 500;
  height: 28px;
  border-radius: var(--radius-md);
  padding: 0 var(--sp-2);
  cursor: pointer;
  transition: border-color var(--transition-fast);
  appearance: auto;
  min-width: 120px;
}
.task-prop-select:hover {
  border-color: var(--outline);
}
.task-prop-select:focus {
  border-color: var(--outline);
  outline: none;
  box-shadow: 0 0 0 2px var(--white-overlay);
}
/* Initiative searchable picker */
.initiative-picker {
  position: relative;
}
.initiative-picker-display {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  background: transparent;
  border: 1px solid var(--white-overlay-subtle);
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 500;
  height: 28px;
  border-radius: var(--radius-md);
  padding: 0 var(--sp-2);
  cursor: pointer;
  transition: border-color var(--transition-fast);
  min-width: 120px;
}
.initiative-picker-display:hover {
  border-color: var(--outline);
}
.initiative-picker-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.initiative-picker-text.empty {
  color: var(--text-dim);
}
.initiative-picker-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}
.initiative-picker-clear:hover {
  color: var(--on-surface);
}
.initiative-picker-dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--sp-1);
  background: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
  max-height: 200px;
  min-width: 200px;
}
.initiative-picker-search {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--outline-variant);
  color: var(--on-surface);
  font-size: var(--text-sm);
  padding: var(--sp-2);
  outline: none;
}
.initiative-picker-search::placeholder {
  color: var(--text-dim);
}
.initiative-picker-options {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.initiative-picker-option {
  color: var(--on-surface);
  font-size: var(--text-sm);
  padding: var(--sp-1) var(--sp-2);
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.initiative-picker-empty {
  color: var(--text-dim);
  font-size: var(--text-sm);
  padding: var(--sp-2);
}
.initiative-picker-option:hover {
  background: var(--white-overlay);
}
.initiative-picker-option.selected {
  color: var(--color-primary);
  font-weight: 600;
}
.task-prop-priority {
  gap: var(--sp-1);
}
.task-prop-priority .priority-pick {
  height: 28px;
  min-width: 36px;
  padding: 0 var(--sp-2);
  font-size: var(--text-sm);
}
.task-prop-tagpicker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 28px;
  align-items: center;
}

/* Single-column body wrapper (replaces the old two-column flex) */
.task-detail-main {
  min-width: 0;
}

/* Footer meta — created/updated timestamps */
.task-detail-footer-meta {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--white-overlay);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--text-dim);
}
.task-detail-footer-sep {
  opacity: 0.5;
}

/* Tighter page padding to suit the narrower pane */
#task-detail .task-detail-page {
  padding: var(--sp-6) var(--sp-6) var(--sp-8);
}

/* Respect prefers-reduced-motion: no slide-in, fade only */
@media (prefers-reduced-motion: reduce) {
  #task-detail {
    transition: opacity var(--transition-fast) var(--ease-out);
  }
  #task-detail[data-mode="modal"].task-view-opening {
    --tv-transform: translate(0, 0);
  }
  #task-view-backdrop {
    transition: opacity var(--transition-fast) var(--ease-out);
  }
}

/* Task detail — page wrapper */
.task-detail-page {
  padding: 36px 40px 64px;
}

/* Task detail — priority accent bar on left edge */
.task-detail-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  border-radius: 0 4px 4px 0;
}

/* Task detail — header area */
.task-detail-header {
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--white-overlay);
}
.task-detail-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.task-detail-badges .badge {
  height: auto;
  min-height: 0;
  padding: var(--sp-1) var(--sp-3);
  gap: var(--sp-1);
  line-height: 1.4;
}
.task-detail-title-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.task-detail-title-row .task-detail-title {
  flex: 1;
  min-width: 0;
}
.task-prop-static {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}
.task-prop-status-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 28px;
}
.task-status-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--sp-3);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
  pointer-events: none;
}
.task-prop-status-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: transparent;
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.task-prop-status-select:focus {
  outline: none;
}
.task-prop-status-wrap:hover .task-status-chip,
.task-prop-status-wrap:focus-within .task-status-chip {
  filter: brightness(1.15);
}
.task-prop-status-select option {
  color: var(--on-surface);
  background: var(--surface-container);
}
.task-detail-title {
  font-size: var(--text-7xl);
  font-weight: 800;
  color: var(--on-surface);
  letter-spacing: -0.03em;
  line-height: 1.25;
  outline: none;
  border-radius: var(--radius-md);
  padding: 4px 6px;
  margin: 0 -6px;
  transition: background var(--transition-fast);
  overflow-wrap: break-word;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.task-detail-title:focus {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  background: var(--surface-container);
}

/* Task detail — description area */
.task-detail-description {
  margin-bottom: 28px;
}
.task-detail-description .detail-body {
  min-height: 80px;
}

/* Task detail — tab bar */
.task-detail-tabs {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--white-overlay);
}
.task-detail-tab {
  padding: 8px 14px;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.task-detail-tab:hover {
  color: var(--on-surface-variant);
}
.task-detail-tab.active {
  color: var(--on-surface-variant);
  border-bottom-color: var(--primary-container);
}

/* Task detail — markdown editor */
.md-editor {
  border: 1px solid var(--white-overlay-medium);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-container-lowest);
}
.md-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--surface-container);
  border-bottom: 1px solid var(--white-overlay);
}
.md-editor-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.md-editor-actions {
  display: flex;
  gap: 2px;
}
.md-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: var(--text-base);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.md-toolbar-btn:hover {
  background: var(--white-overlay);
  color: var(--on-surface);
}
.md-editor-textarea {
  width: 100%;
  min-height: 400px;
  padding: 20px 22px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--on-surface);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.7;
  resize: vertical;
  tab-size: 2;
}
.md-editor-textarea::placeholder {
  color: var(--text-dim);
}
/* KD-261: No focus ring on the editor shell. The old single-textarea
 * editor highlighted itself whenever the textarea had focus; with the
 * new block stack every keystroke fires :focus-within and the 3px blue
 * ring became a permanent noisy outline. The individual block textareas
 * have enough affordance on their own. */

/* KD-261: Obsidian-style block stack inside Docs → Write tab ================
 * The single monolithic textarea is replaced by a column of blocks. Each
 * block is either a text run (mini textarea + syntax-highlight backdrop) or
 * an embed (excalidraw / mermaid / image) with a collapsible source panel
 * and a live rendered preview underneath.
 */
.md-block-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  min-height: 400px;
}

.md-block {
  display: flex;
  flex-direction: column;
}

/* Text blocks: textarea + backdrop, inherited from .md-editor-backdrop rules.
 * Qualified with `.md-editor` as the ancestor so the rules win against the
 * legacy `.doc-detail-page .md-editor-textarea { min-height: 120px }` rule
 * AND apply equally to the task detail body editor (KD-261 port). Without
 * the extra qualifier, every block renders at 120px tall and the whole
 * stack looks like one big empty blue-bordered box. */
.md-editor .md-block-text-wrap {
  position: relative;
  min-height: 24px;
}
.md-editor .md-block-text .md-block-text-input {
  min-height: 24px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  width: 100%;
  overflow: hidden;
  caret-color: var(--on-surface);
}
.md-editor .md-block-text-wrap .md-editor-backdrop,
.md-editor .md-block-text .md-block-text-input {
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.7;
}
.md-editor .md-block-text-wrap .md-editor-backdrop {
  inset: 0;
}

/* Suppress the global `textarea:focus-visible { box-shadow: --focus-ring }`
 * halo inside the block stack. With many textareas stacked vertically, a
 * 4px rectangular ring around the active block turned into a loud blue
 * outline the moment the user clicked into any line. The caret itself is
 * enough affordance to show which block is focused. */
.md-editor .md-block-text-input:focus-visible,
.md-editor .md-embed-source-input:focus-visible,
.md-editor .md-editor-hidden-mirror:focus-visible {
  box-shadow: none;
}

/* Embed blocks: bordered card with collapsible source + render area */
.md-block-embed {
  border: 1px solid var(--white-overlay-medium);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white-overlay-faint);
  margin: var(--sp-1) 0;
}
.md-block-embed:hover {
  border-color: var(--white-overlay-strong);
}

.md-embed-source {
  border-bottom: 1px solid var(--white-overlay);
}
.md-embed-source[open] {
  background: var(--white-overlay);
}
.md-embed-source-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  user-select: none;
  list-style: none;
  transition: color var(--transition-fast);
}
.md-embed-source-summary::-webkit-details-marker { display: none; }
.md-embed-source-summary::marker { content: ''; }
.md-embed-source-summary:hover { color: var(--on-surface-variant); }

/* Qualified with .md-editor for the same reason as the text-block rules
 * above (beats legacy .doc-detail-page min-height: 120px + applies to
 * task editor too). */
.md-editor .md-embed-source-input {
  width: 100%;
  padding: var(--sp-3);
  background: transparent;
  border: none;
  border-top: 1px solid var(--white-overlay);
  outline: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--on-surface);
  resize: vertical;
  min-height: 0;
}

.md-embed-render {
  padding: var(--sp-4);
  display: flex;
  justify-content: center;
  background: var(--surface-container-lowest);
}
.md-embed-render > .excalidraw-embed {
  margin: 0;
}
.md-embed-render-mermaid pre {
  margin: 0;
  background: transparent;
}

.md-image-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.md-embed-image {
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
}
.md-image-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--white-overlay-vivid) 50%);
  border-radius: 0 0 var(--radius-sm) 0;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}
.md-image-wrap:hover .md-image-resize-handle {
  opacity: 1;
}
.md-image-resize-handle:hover {
  background: linear-gradient(135deg, transparent 50%, var(--white-overlay-strong) 50%);
}
.md-image-wrap.resizing {
  user-select: none;
  outline: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

/* KD-261 Linear-style hover toolbar for embed blocks. Sits top-right of
 * every image / excalidraw / mermaid block, fades in on hover, holds
 * copy + edit + delete actions. `.md-block-embed` uses position:relative
 * (already via the border-card rules below) so absolute positioning
 * anchors to the block itself, not the page. */
.md-block-embed {
  position: relative;
}
.md-embed-toolbar {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--surface-container-highest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 2;
}
.md-block-embed:hover .md-embed-toolbar,
.md-block-embed:focus-within .md-embed-toolbar {
  opacity: 1;
  pointer-events: auto;
}
.md-embed-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.md-embed-toolbar-btn:hover {
  background: var(--white-overlay);
  color: var(--on-surface);
}
.md-embed-toolbar-btn-danger:hover {
  background: var(--error-tint-subtle, var(--white-overlay));
  color: var(--color-red);
}

/* KD-261: inside the block stack, hydrateExcalidrawEmbeds still renders
 * its own "Drawing" label strip with an edit pencil in the top-right of
 * the SVG. That duplicated our hover toolbar's pencil. Hide the strip
 * in the block stack only — Preview mode still shows it since Preview
 * has no hover toolbar and relies on the in-label pencil for editing. */
.md-block-embed .excalidraw-label {
  display: none;
}
.md-embed-image-error {
  color: var(--color-red);
  font-size: var(--text-sm);
  padding: var(--sp-4);
  text-align: center;
}

/* Hidden canonical mirror textarea — drives dirty-guard + Cmd+S. Must not
 * steal focus or take visual space. */
.md-editor-hidden-mirror {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  left: -9999px;
  top: -9999px;
}

/* Task detail — section spacing & polish */
.task-detail-section {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--white-overlay);
}
.task-detail-section-label {
  font-size: var(--text-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 16px;
}


/* Task detail — sidebar property card */
.task-detail-sidebar {
  width: 280px;
  flex-shrink: 0;
}
.task-detail-properties {
  background: var(--surface-container-low);
  border: 1px solid var(--white-overlay);
  border-radius: var(--radius-xl);
  padding: 8px 16px;
  position: sticky;
  top: 20px;
}
.task-detail-properties .property-group {
  padding: 12px 6px;
  border-bottom: 1px solid var(--white-overlay-subtle);
}
.task-detail-properties .property-group:last-child {
  border-bottom: none;
}
.task-detail-properties .property-label {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.task-detail-properties .property-value {
  font-size: var(--text-md);
  color: var(--on-surface-variant);
}
.task-detail-properties .property-timestamps {
  padding: 14px 6px 10px;
  border-top: 1px solid var(--white-overlay-subtle);
}

/* Sprint history in task detail */
.sprint-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.sprint-history-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--surface-container);
}
.sprint-history-item.sprint-history-current {
  background: var(--primary-tint-subtle);
}

/* Sidebar inline controls */
.sidebar-select {
  background: transparent;
  border: 1px solid var(--white-overlay-subtle);
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 500;
  min-height: 30px;
  height: 30px;
  width: 100%;
  border-radius: var(--radius-md);
  padding: 0 8px;
  cursor: pointer;
  transition: border-color var(--transition-fast);
  appearance: auto;
}
.sidebar-select:hover {
  border-color: var(--outline);
}
.sidebar-select:focus {
  border-color: var(--outline);
  outline: none;
  box-shadow: 0 0 0 2px var(--white-overlay);
}
.sidebar-tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
/* Removable tag pill (selected tags) */
.sidebar-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
}
.sidebar-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}
.sidebar-tag-remove:hover {
  opacity: 1;
}
/* Autocomplete wrapper */
.sidebar-tag-ac-wrap {
  position: relative;
  display: inline-flex;
}
.sidebar-tag-input {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px dashed var(--white-overlay-subtle);
  background: transparent;
  color: var(--on-surface-variant);
  font-size: var(--text-xs);
  font-weight: 500;
  width: 64px;
  outline: none;
  transition: border-color var(--transition-fast), width var(--transition-fast);
}
.sidebar-tag-input::placeholder {
  color: var(--text-dim);
}
.sidebar-tag-input:focus {
  border-color: var(--primary-border);
  width: 96px;
}
/* Autocomplete dropdown */
.sidebar-tag-ac-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--sp-1);
  min-width: 140px;
  max-height: 180px;
  overflow-y: auto;
  background: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 50;
  padding: var(--sp-1);
  flex-wrap: wrap;
  gap: 2px;
}
.sidebar-tag-ac-item {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.sidebar-tag-ac-item:hover {
  opacity: 0.8;
}

/* Doc detail — compact title */
.doc-detail-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* Doc detail — inline properties (Notion-style) */
.doc-detail-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.doc-sticky-header {
  flex-shrink: 0;
  background: var(--background);
  border-bottom: 1px solid var(--white-overlay-subtle);
  z-index: 2;
}

.doc-sticky-header .task-detail-header {
  padding: 20px 24px 8px;
  margin-bottom: 0;
}

.doc-scroll-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 64px;
}

.doc-scroll-content .detail-body {
  max-width: 720px;
}

.doc-inline-properties {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
  padding: 4px 24px 8px;
}
.doc-prop-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: 4px 0;
}
.doc-prop-item .prop-key {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-xs);
  white-space: nowrap;
  min-width: 50px;
}
.doc-prop-item .prop-val select,
.doc-prop-item .prop-val input[type="text"] {
  background: transparent;
  border: 1px solid transparent;
  color: var(--on-surface-variant);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast);
  min-height: 26px;
  height: 26px;
}
.doc-prop-item .prop-val select:hover,
.doc-prop-item .prop-val input[type="text"]:hover {
  border-color: var(--white-overlay-medium);
}
.doc-prop-item .prop-val select:focus,
.doc-prop-item .prop-val input[type="text"]:focus {
  border-color: var(--primary-border);
  outline: none;
}
.doc-inline-properties .sidebar-tag-pill {
  padding: 1px 8px;
  font-size: var(--text-xs);
  height: 20px;
}

/* Doc detail — compact mode toggle (pill) */
.doc-mode-toggle {
  display: inline-flex;
  background: var(--surface-container);
  border: 1px solid var(--white-overlay);
  border-radius: var(--radius-md);
  padding: 2px;
}
.doc-mode-toggle button {
  padding: 3px 12px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-dim);
  background: none;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.doc-mode-toggle button.active {
  background: var(--primary-tint);
  color: var(--primary);
}
.doc-mode-toggle button:hover:not(.active) {
  color: var(--on-surface-variant);
}

/* Doc detail title */
.doc-detail-page .doc-detail-title {
  margin-bottom: 4px;
}

/* Doc detail — auto-expanding textarea */
.doc-detail-page .md-editor-textarea {
  min-height: 120px;
  resize: none;
  overflow: hidden;
}

/* Sidebar docs tree — dedicated page browser */
.sidebar-docs-tree {
  overflow-y: auto;
  flex: 1;
  margin: 0 -12px;
}
.sidebar-docs-tree .docs-tree-item {
  font-size: var(--text-base);
  padding: var(--sp-1) var(--sp-2);
  margin: 1px var(--sp-1);
}
.sidebar-docs-tree .docs-tree-children {
  padding-left: 12px;
}

/* KD-411: Docs sidebar search */
.docs-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 0 var(--sp-2);
  color: var(--text-muted);
}
.docs-search-wrapper > svg,
.docs-search-wrapper > i {
  position: absolute;
  left: var(--sp-2);
  pointer-events: none;
  color: var(--text-dim);
}
.docs-search-input {
  flex: 1;
  width: 100%;
  height: 28px;
  padding: 0 var(--sp-6) 0 var(--sp-6);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  color: var(--on-surface);
  font-size: var(--text-base);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.docs-search-input::placeholder {
  color: var(--text-dim);
}
.docs-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--surface-container);
}
.docs-search-clear {
  position: absolute;
  right: var(--sp-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.docs-search-clear:hover {
  background: var(--white-overlay);
  color: var(--on-surface);
}
.docs-search-hit {
  background: var(--primary-tint-strong);
  color: var(--on-surface);
  border-radius: var(--radius-sm);
  padding: 0 2px;
}

/* KD-104: deleted-task state. Deep links and activity entries can
   still land on an archived task — the banner makes the state obvious
   and the .task-archived class dims + disables the edit region while
   keeping the Restore button fully interactive. */
.task-archived-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--error-tint);
  border: 1px solid var(--error-tint-strong);
  border-radius: var(--radius-lg);
  color: var(--color-red);
}
.task-archived-banner .task-archived-banner-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}
.task-archived-banner .task-archived-banner-text strong {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-red);
}
.task-archived-banner .task-archived-banner-text span {
  font-size: var(--text-md);
  color: var(--on-surface-variant);
}
.btn-restore-task {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 30px;
  padding: 0 var(--sp-3);
  background: var(--color-red);
  color: var(--surface-container-lowest);
  border: 1px solid var(--color-red);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--transition-fast);
  flex-shrink: 0;
}
.btn-restore-task:hover { filter: brightness(1.08); }

.task-merged-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-top: calc(-1 * var(--sp-2));
  margin-bottom: var(--sp-4);
  background: var(--warning-tint, rgba(245, 158, 11, 0.1));
  border: 1px solid var(--warning-tint-strong, rgba(245, 158, 11, 0.25));
  border-radius: var(--radius-lg);
  color: var(--color-amber);
  font-size: var(--text-md);
}

.task-merged-link {
  color: var(--color-amber);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.task-merged-link:hover {
  filter: brightness(1.2);
}

/* Lock down every editable region inside an archived task view.
   The banner, overflow menu, and breadcrumb/header navigation stay
   interactive; everything else freezes. */
.task-archived .task-detail-header,
.task-archived .task-props-bar,
.task-archived .task-detail-description,
.task-archived .attachments-section,
.task-archived .comments-section {
  opacity: 0.72;
  pointer-events: none;
  user-select: text;
}
.task-archived .task-detail-title[contenteditable="true"] { pointer-events: none; }
.task-archived .overflow-menu { pointer-events: auto; opacity: 1; }
.task-archived .task-detail-description .detail-body {
  /* Keep the body legible so the user can still copy the content out */
  opacity: 1;
}

/* Deleted chip — used in activity rows and anywhere else a deleted
   task is referenced. */
.chip-deleted {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 1px var(--sp-2);
  background: var(--error-tint);
  color: var(--color-red);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* KD-075/KD-293: "Mark as Complete" CTA — in the title row, only for testing tasks in active sprint */
.btn-mark-complete {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px;
  background: transparent;
  color: var(--color-green);
  border: 1px solid var(--success-border-soft);
  border-radius: 6px;
  font-size: var(--text-md);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn-mark-complete:hover {
  background: var(--success-tint-hover);
  border-color: var(--success-border-medium);
}
.btn-mark-complete:active {
  background: var(--success-tint-medium);
}

/* Comment item */
.comment-item {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.comment-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--surface-container-high);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
}
.comment-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.comment-author {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--on-surface);
}
.comment-time {
  font-size: var(--text-sm);
  color: var(--text-dim);
}

/* KD-465: delete button reveals on hover of the comment row. */
.comment-delete-btn {
  margin-left: auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.comment-item:hover .comment-delete-btn,
.comment-delete-btn:focus-visible {
  opacity: 1;
}
.comment-delete-btn:hover {
  background: var(--error-tint-medium);
  color: var(--color-error);
}
.comment-delete-btn.btn--confirming {
  opacity: 1;
  background: var(--color-error);
  color: var(--on-surface);
  width: auto;
  padding: 0 var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 600;
}
.comment-body {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--on-surface-variant);
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
}

/* KD-218: @mention chips inside rendered comment bodies. */
.mention {
  display: inline-block;
  padding: 0 var(--sp-1);
  border-radius: var(--radius-sm);
  background: var(--primary-tint-10);
  color: var(--color-primary);
  font-weight: 500;
  cursor: default;
}

/* KD-218: mention autocomplete popover anchored above the comment textarea. */
.mention-popover {
  position: fixed;
  z-index: 9999;
  min-width: 220px;
  max-width: 320px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-1);
}
.mention-option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-md);
  color: var(--on-surface-variant);
}
.mention-option.active,
.mention-option:hover {
  background: var(--white-overlay);
  color: var(--on-surface);
}
.mention-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary-tint-20);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 600;
  flex-shrink: 0;
}
.mention-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-handle {
  color: var(--text-dim);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

/* Activity feed (KD-038) — compact one-liners interleaved with comments */
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  margin-bottom: var(--sp-2);
}
.activity-icon {
  width: 28px;
  min-width: 28px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  flex-shrink: 0;
}
.activity-text {
  flex: 1;
  min-width: 0;
  font-size: var(--text-md);
  color: var(--on-surface-variant);
  line-height: 1.5;
}
.activity-text b {
  color: var(--on-surface);
  font-weight: 600;
}
.activity-actor {
  color: var(--on-surface);
  font-weight: 600;
  margin-right: var(--sp-1);
}
.activity-time {
  margin-left: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text-dim);
}
.activity-via {
  margin-left: var(--sp-1);
  font-size: var(--text-sm);
  color: var(--text-dim);
  font-style: italic;
}
.activity-dim {
  color: var(--text-dim);
  font-weight: 400;
}

.activity-task-link {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.activity-task-link:hover {
  text-decoration: underline;
}

/* KD-363 follow-up: body-diff disclosure on activity rows. */
.activity-diff-wrap {
  margin-top: var(--sp-1);
  font-size: var(--text-sm);
}
.activity-diff-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-dim);
}
.activity-diff-added { color: var(--color-green); font-weight: 600; }
.activity-diff-removed { color: var(--color-red); font-weight: 600; }
.activity-diff-note { color: var(--text-dim); font-style: italic; }
.activity-diff-toggle {
  background: transparent;
  border: 1px solid var(--outline-variant);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  padding: 2px var(--sp-2);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.activity-diff-toggle:hover {
  background: var(--white-overlay);
  border-color: var(--outline);
  color: var(--on-surface);
}
.activity-diff-body {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--on-surface-variant);
  max-height: 360px;
  overflow: auto;
  white-space: pre;
}
/* Spans are inline: the parent <pre> with white-space:pre turns the joining
   "\n" into line breaks. Keeping them inline avoids the double-spacing that
   happened when display:block + a literal \n both created a line each. */
.activity-diff-body .diff-add { color: var(--color-green); }
.activity-diff-body .diff-del { color: var(--color-red); }
.activity-diff-body .diff-hunk { color: var(--text-dim); }

/* === Project-wide activity feed (KD-042) ===
   Friendly timeline: actor avatar + one-line "who did what on which
   entity, when" sentence, grouped by day. Reuses .audit-cat-* tints
   for the avatar so the visual taxonomy lines up with the audit log,
   and the same .audit-empty / .audit-sentinel / .audit-count helpers
   from the audit section above. */
#activity-view {
  padding: var(--sp-5) var(--sp-6);
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
}
.activity-view-header {
  margin-bottom: var(--sp-5);
}
.activity-view-title {
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--on-surface);
  margin: 0 0 var(--sp-1);
}
.activity-view-subtitle {
  font-size: var(--text-md);
  color: var(--text-muted);
  margin: 0;
}
.activity-filters-wrap {
  margin-bottom: var(--sp-4);
}
.activity-timeline {
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  padding-right: var(--sp-2);
}

/* Day group header — sticky inside the scroll container, mirrors the
   admin-table thead box-shadow trick so it floats above the rows. */
.activity-day-group {
  margin-bottom: var(--sp-4);
}
.activity-day-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-container-low);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-1);
  margin-bottom: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: inset 0 -1px 0 var(--ghost-border);
}
.activity-day-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-top: var(--sp-1);
}

/* One timeline row: avatar pill on the left, headline on the right. */
.activity-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.activity-timeline-item:hover {
  background: var(--surface-container-high);
}
.activity-timeline-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* .audit-cat-* sets background + colour, applied as a class above */
}
.activity-timeline-body {
  flex: 1;
  min-width: 0;
}
.activity-timeline-headline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1);
  font-size: var(--text-md);
  color: var(--on-surface-variant);
  line-height: 1.5;
}
.activity-timeline-headline b {
  color: var(--on-surface);
  font-weight: 600;
}
.activity-timeline-actor {
  color: var(--on-surface);
  font-weight: 600;
}
.activity-timeline-verb {
  color: var(--text-muted);
}
.activity-timeline-time {
  color: var(--text-dim);
  font-size: var(--text-sm);
  margin-left: auto;
  white-space: nowrap;
}
.activity-timeline-comment {
  margin-top: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-container-high);
  border-left: 2px solid var(--outline-variant);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--on-surface);
  font-size: var(--text-md);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Clickable entity pill — mirrors the audit-project pill but with a
   monospace id prefix and clickable button semantics. */
.activity-entity-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  max-width: 100%;
  padding: 2px var(--sp-2);
  background: var(--surface-container-high);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--on-surface);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  text-align: left;
  font-family: inherit;
}
.activity-entity-link:hover {
  background: var(--surface-bright);
  border-color: var(--outline-variant);
}
.activity-entity-link--deleted {
  cursor: default;
  opacity: 0.7;
}
.activity-entity-link--deleted:hover {
  background: var(--surface-container-high);
  border-color: transparent;
}
.activity-entity-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.activity-entity-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.activity-comment-preview {
  color: var(--text-muted);
  font-style: italic;
}

/* "via MCP" tag in the actor column — small inline pill */
.activity-via-pill {
  display: inline-block;
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--text-dim);
  background: var(--white-overlay);
  padding: 0 5px;
  border-radius: 3px;
  margin-left: var(--sp-1);
  vertical-align: middle;
  letter-spacing: 0.04em;
}

/* Comment textarea */
.comment-textarea {
  width: 100%;
  min-height: 80px;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  resize: none;
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: 1.55;
}

/* Comment box */
.comment-compose {
  background: var(--surface-container-low);
  border: 1px solid var(--white-overlay);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.comment-compose:focus-within {
  /* KD-261: neutralized from primary-blue halo to a quiet border lift.
   * The border change is enough to say "you're composing"; the 3px
   * blue ring was compounding with the inner textarea's :focus-visible
   * ring and looked like a double outline. */
  border-color: var(--outline-variant);
}

/* Empty state text */
.empty-value {
  font-style: italic;
  color: var(--text-dim);
  font-size: var(--text-base);
}


/* === 38. (Removed — roadmap detail now uses full-page task-detail layout) === */


/* === 39. DaisyUI Component Overrides === */
/* Theme-agnostic overrides that work with any DaisyUI theme */

/* --- Buttons --- */
.btn {
  font-family: inherit;
  font-weight: 500;
  font-size: var(--text-base);
  gap: 6px;
  transition: all var(--transition-fast) var(--ease-out);
}

.btn-sm {
  height: 30px;
  min-height: 30px;
  padding-inline: 14px;
  border-radius: var(--radius-md);
}

.btn-xs {
  height: 24px;
  min-height: 24px;
  padding-inline: 10px;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.btn.btn-primary {
  background: var(--primary-tint-strong);
  color: var(--primary);
  border: 1px solid var(--primary-border-light);
  font-weight: 600;
}
.btn.btn-primary:hover {
  background: var(--primary-tint-heavy);
  border-color: var(--primary-border-strong);
}

.btn.btn-ghost {
  background: none;
  color: var(--on-surface-variant);
  border: none;
  font-weight: 500;
  border-radius: var(--radius-md);
}
.btn.btn-ghost:hover {
  color: var(--on-surface);
  background: var(--surface-bright);
}

.btn.btn-error.btn-outline {
  background: var(--error-tint-subtle);
  color: var(--color-red);
  border: 1px solid var(--error-tint-strong);
}
.btn.btn-error.btn-outline:hover {
  background: var(--error-tint-medium);
  color: var(--color-red);
  border-color: var(--error-border-strong);
}

.btn.btn-circle {
  border-radius: var(--radius-md);
  padding: 0;
}

/* --- Form Inputs --- */
.input-bordered,
.select-bordered,
.textarea-bordered {
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  color: var(--on-surface);
  font-family: inherit;
  font-size: var(--text-md);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.select-bordered {
  padding: 10px 36px 10px 14px;
}

.input-bordered:focus,
.select-bordered:focus,
.textarea-bordered:focus {
  border-color: var(--outline);
  box-shadow: 0 0 0 2px var(--white-overlay);
  outline: none;
}

.input,
.select,
.textarea {
  font-family: inherit;
  color: var(--on-surface);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-dim);
}


/* --- Toggle --- */
.toggle {
  border-color: var(--outline-variant);
  background: var(--surface-container-high);
}
.toggle:has(:checked) {
  background: var(--primary-container);
  border-color: var(--primary-container);
}

/* --- Fieldset legends --- */
.fieldset-legend {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

/* --- Badges --- */
.badge {
  font-weight: 600;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* --- Tabs --- */
.tab {
  font-family: inherit;
  font-size: var(--text-md);
  color: var(--text-muted);
  transition: color var(--transition-fast);
}
.tab-active,
.tab[aria-selected="true"] {
  color: var(--on-surface);
}

/* --- Skeleton --- */
.skeleton {
  background: var(--surface-container-high);
}

/* --- Stats --- */
.stat-title {
  color: var(--text-muted);
}

/* --- Progress --- */
.progress {
  background: var(--surface-container-high);
}

/* === Documentation View === */
.docs-list-view {
  padding: 32px var(--sp-6);
  max-width: 900px;
  overflow-y: auto;
  height: calc(100vh - 52px);
}

.docs-list-view section[data-status-group] {
  margin-bottom: 40px;
}

.docs-list-view .flex.flex-col.gap-3 {
  gap: 10px;
  padding-top: 4px;
}

/* Doc detail reuses task-detail styles (#doc-detail shares the same CSS) */
#doc-detail {
  height: calc(100vh - 52px);
  overflow-y: auto;
  background: var(--background);
}

/* === KD-074 Backlog decay: stale / cold cards + show-cold toggle === */

.card.card-stale .card-title {
  opacity: 0.7;
}

.card.card-cold {
  opacity: 0.55;
}

/* Testing card with all acceptance criteria ticked — clear to close */
.card.card-ready-to-ship {
  background: var(--success-tint-subtle);
  border-color: var(--success-border-light);
}
.card.card-ready-to-ship:hover {
  background: var(--success-tint-subtle);
  border-color: var(--success-border-soft);
  box-shadow: var(--shadow-card), 0 0 16px var(--success-tint-light);
}

.card-stale-badge {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 7px;
  border-radius: 999px;
  line-height: 1.4;
  flex-shrink: 0;
}

.card-stale-badge.stale-stale {
  background: var(--surface-container-highest);
  color: var(--color-amber);
  border: 1px solid var(--color-amber);
}

.card-stale-badge.stale-cold {
  background: var(--surface-container-highest);
  color: var(--text-dim);
  border: 1px solid var(--outline);
}

/* KD-271: epic/initiative badge on cards and backlog rows */
.card-epic-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 999px;
  line-height: 1.4;
  flex-shrink: 0;
  background: var(--primary-tint-subtle);
  color: var(--color-purple);
  border: 1px solid var(--primary-tint-medium);
  cursor: default;
}

/* KD-499: sprint badge on kanban cards. Same shape as epic badge but
   in a distinct color so the two never visually collide. */
.card-sprint-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 999px;
  line-height: 1.4;
  flex-shrink: 0;
  background: var(--white-overlay);
  color: var(--color-blue);
  border: 1px solid var(--outline-variant);
  cursor: default;
}

/* KD-075: .column-cold-toggle removed — the Sprint board no longer shows
   a "Show cold" toggle. Cold filtering now lives in the Backlog view. */

/* === KD-075 Backlog planner view ========================================= */

#backlog-view {
  height: calc(100vh - 52px);
  background: var(--background);
  overflow: hidden;
}

.backlog-layout {
  display: flex;
  height: 100%;
  gap: 0;
}

/* --- Draggable divider between pool and sprint lanes (KD-315) --- */

.backlog-divider {
  width: 4px;
  flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  border-radius: 2px;
  transition: background var(--transition-fast);
  z-index: 2;
}

.backlog-divider:hover,
.backlog-divider.dragging {
  background: color-mix(in srgb, var(--outline-variant) 50%, transparent);
}

body.backlog-divider-dragging {
  cursor: col-resize !important;
  user-select: none;
}

/* --- Pool (left) --- */

.backlog-pool {
  min-width: 300px;
  display: flex;
  flex-direction: column;
  border-right: none;
  padding: var(--sp-5) var(--sp-5) 0;
  overflow: hidden;
}

.backlog-pool-header {
  flex-shrink: 0;
  margin-bottom: var(--sp-3);
}

.backlog-pool-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--on-surface);
}

.backlog-pool-count {
  font-size: var(--text-md);
  color: var(--text-dim);
  background: var(--white-overlay);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-md);
  font-weight: 500;
}

.backlog-pool-subtitle {
  margin: var(--sp-1) 0 0 28px;
  color: var(--text-muted);
  font-size: var(--text-md);
}

.backlog-pool-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.backlog-search-input {
  width: 100%;
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  color: var(--on-surface);
  padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
  border-radius: 6px;
  font-size: var(--text-md);
  outline: none;
  transition: border-color var(--transition-fast);
}

.backlog-search-input:focus {
  border-color: var(--primary);
}

.backlog-toggle-cold {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: transparent;
  border: 1px dashed var(--outline-variant);
  color: var(--text-dim);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.backlog-toggle-cold:hover {
  border-color: var(--outline);
  color: var(--text-muted);
}

.backlog-toggle-cold.active {
  background: var(--primary-tint);
  color: var(--primary);
  border-color: var(--primary);
  border-style: solid;
}

/* KD-264: "Show dimmed" toggle mirrors the cold toggle — same dashed
 * border resting state, same primary-tint active state. Disabled when
 * nothing in the pool is dimmed (nothing to reveal). */
.backlog-toggle-dimmed {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: transparent;
  border: 1px dashed var(--outline-variant);
  color: var(--text-dim);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.backlog-toggle-dimmed:hover:not(:disabled) {
  border-color: var(--outline);
  color: var(--text-muted);
}

.backlog-toggle-dimmed.active {
  background: var(--primary-tint);
  color: var(--primary);
  border-color: var(--primary);
  border-style: solid;
}

.backlog-toggle-dimmed:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.backlog-toggle-group {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: transparent;
  border: 1px dashed var(--outline-variant);
  color: var(--text-dim);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.backlog-toggle-group:hover {
  border-color: var(--outline);
  color: var(--text-muted);
}

.backlog-toggle-group.active {
  background: var(--primary-tint);
  color: var(--primary);
  border-color: var(--primary);
  border-style: solid;
}

/* KD-264: "(N visible)" suffix on the Backlog pool count, shown when
 * some items are dimmed and the Show dimmed toggle is off. Mutes the
 * label so the primary count stays the main affordance. */
.backlog-pool-count-visible {
  color: var(--text-dim);
  font-weight: 400;
  font-size: var(--text-sm);
  margin-left: var(--sp-1);
}

.backlog-pool-filters {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

/* KD-305: collapsed filter bar — single row with toggle + active chips */
.backlog-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.backlog-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: transparent;
  border: 1px solid var(--outline-variant);
  color: var(--text-muted);
  padding: 2px var(--sp-3);
  font-size: var(--text-sm);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.backlog-filter-toggle:hover {
  border-color: var(--outline);
  color: var(--on-surface-variant);
}

.backlog-active-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--primary-tint);
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 2px var(--sp-2);
  font-size: var(--text-2xs);
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.backlog-active-chip:hover {
  background: var(--error-tint);
  color: var(--color-red);
  border-color: var(--color-red);
}

.backlog-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.backlog-filter-chip {
  background: transparent;
  border: 1px solid var(--outline-variant);
  color: var(--text-muted);
  padding: 2px var(--sp-3);
  font-size: var(--text-sm);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.backlog-filter-chip:hover {
  color: var(--on-surface-variant);
  border-color: var(--outline);
}

.backlog-filter-chip.active {
  background: var(--primary-tint);
  color: var(--primary);
  border-color: var(--primary);
}

/* KD-289: responsive multi-column grid so wider pool shows 2+ columns */
.backlog-pool-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-content: start;
  gap: var(--sp-2);
  padding-bottom: var(--sp-6);
}

.backlog-pool-list::-webkit-scrollbar { width: 6px; }

.backlog-pool-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
  color: var(--text-dim);
}

.backlog-pool-empty svg,
.backlog-pool-empty i[data-lucide] {
  opacity: 0.3;
  margin-bottom: var(--sp-3);
}

.backlog-pool-empty-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 var(--sp-1);
}

.backlog-pool-empty-hint {
  font-size: var(--text-md);
  color: var(--text-dim);
  max-width: 340px;
  margin: 0 auto;
}

.backlog-pool-empty-filtered .backlog-pool-empty-title {
  color: var(--primary);
}
.backlog-pool-empty-filtered svg {
  color: var(--primary);
  opacity: 0.6;
}
.backlog-pool-empty-filtered #backlog-pool-empty-clear {
  margin-top: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.backlog-pool-group-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}

.backlog-pool-group-header:first-child {
  margin-top: 0;
}

.backlog-pool-group-header:hover {
  background: var(--white-overlay);
}

.backlog-pool-group-header svg,
.backlog-pool-group-header i[data-lucide] {
  flex-shrink: 0;
  color: var(--text-dim);
  transition: transform var(--transition-fast);
}

.backlog-pool-group-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backlog-pool-group-count {
  flex-shrink: 0;
  color: var(--text-dim);
  font-size: var(--text-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* --- Lanes (right, ~35%) --- */

.backlog-lanes {
  min-width: 300px;
  overflow: hidden;
  /* KD-243: inherit #backlog-view's --background so pool and lanes share
   * the same base shade. Sprint lane cards float on top. Flex column so
   * the Sprints header sits above the scrolling lane container. */
  display: flex;
  flex-direction: column;
  padding: var(--sp-5) var(--sp-5) 0;
}

/* KD-243: "Sprints" section header — mirrors .backlog-pool-header so
 * the two halves of the planner read as visually balanced. */
.backlog-lanes-header {
  flex-shrink: 0;
  margin-bottom: var(--sp-3);
}

.backlog-lanes-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--on-surface);
}

.backlog-lanes-count {
  font-size: var(--text-md);
  color: var(--text-dim);
  background: var(--white-overlay);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-md);
  font-weight: 500;
}

.backlog-lanes-subtitle {
  margin: var(--sp-1) 0 0 28px;
  color: var(--text-muted);
  font-size: var(--text-md);
}

.backlog-lanes-inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.backlog-lanes-inner::-webkit-scrollbar { width: 6px; }

.backlog-lanes-empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.sprint-lane {
  /* KD-243: card body sits flush with --background (#131313) so the
   * header (at --surface-container-low) reads as the elevated label
   * strip and the task list fades into the backlog base. */
  background: var(--background);
  border: 1px solid var(--outline-variant);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.sprint-lane-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary-tint);
}

.sprint-lane-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--outline-variant);
  /* KD-243: header sits one step lighter than the card body so the
   * sprint label strip floats above the task list (which fades into
   * the backlog base at --background). */
  background: var(--surface-container-low);
  font-size: var(--text-md);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}

.sprint-lane-header:hover {
  background: var(--white-overlay);
}

.sprint-lane-header:focus-visible {
  outline: 2px solid var(--outline);
  outline-offset: -2px;
}

.sprint-lane-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  margin-left: var(--sp-1);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  opacity: 0.5;
  transition: all var(--transition-fast);
}

.sprint-lane-header:hover .sprint-lane-edit-btn {
  opacity: 1;
}

.sprint-lane-edit-btn:hover {
  background: var(--white-overlay);
  border-color: var(--outline-variant);
  color: var(--on-surface);
}

.sprint-lane-chevron {
  margin-left: 2px;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  transition: transform var(--transition-fast);
}

.sprint-lane.collapsed .sprint-lane-chevron {
  transform: rotate(-90deg);
}

/* KD-238: collapsed lanes hide their body entirely. The
 * `.backlog-dragging` override below reveals them as compact drop
 * targets during an active drag from the pool. */
.sprint-lane.collapsed .sprint-lane-header {
  border-bottom: none;
}

.sprint-lane.collapsed .sprint-lane-tasks,
.sprint-lane.collapsed .sprint-lane-show-deployed-pill {
  display: none;
}

body.backlog-dragging .sprint-lane.collapsed .sprint-lane-tasks {
  display: flex;
  max-height: 80px;
  overflow-y: auto;
  opacity: 0.6;
  border-top: 1px dashed var(--primary);
}

body.backlog-dragging .sprint-lane.collapsed:hover .sprint-lane-tasks {
  opacity: 1;
}

.sprint-lane-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-dim);
}

.sprint-lane-active .sprint-lane-status-dot {
  background: var(--color-green);
  box-shadow: 0 0 6px var(--color-green);
}

.sprint-lane-name {
  font-weight: 600;
  color: var(--on-surface);
}

.sprint-lane-active-pill {
  background: var(--primary-tint);
  color: var(--primary);
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 1px var(--sp-2);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sprint-lane-meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-left: auto;
}

.sprint-lane-count {
  background: var(--surface-container);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 1px var(--sp-2);
  border-radius: 999px;
}

.sprint-lane-tokens {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-purple);
  opacity: 0.8;
  font-size: var(--text-xs);
}

.sprint-lane-tasks {
  padding: var(--sp-3) var(--sp-4);
  min-height: 48px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* KD-305: hide tags inside sprint task rows — sprint context is
 * already established; tags just add noise. Show on hover. */
.sprint-lane-tasks .lane-compact-tag {
  display: none;
}

.sprint-lane-tasks .sprint-lane-compact-row:hover .lane-compact-tag {
  display: inline;
}

.sprint-lane-empty {
  color: var(--text-dim);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--sp-4);
  border: 1px dashed var(--outline-variant);
  border-radius: 6px;
}

.sprint-lane-empty.sprint-lane-empty-filtered {
  color: var(--primary);
  border-color: var(--primary-tint-medium);
  background: var(--primary-tint-subtle);
}

.backlog-search-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  border: 1px solid var(--primary-tint-medium);
  background: var(--primary-tint-subtle);
  border-radius: 8px;
  font-size: var(--text-md);
  color: var(--on-surface);
}
.backlog-search-banner svg {
  color: var(--primary);
  flex-shrink: 0;
}
.backlog-search-banner-label {
  color: var(--text-muted);
}
.backlog-search-banner-term {
  font-weight: 600;
  color: var(--primary);
  padding: 2px var(--sp-2);
  background: var(--primary-tint-light);
  border-radius: 4px;
}
.backlog-search-banner-summary {
  color: var(--text-muted);
  flex: 1;
}
.backlog-search-banner-clear {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--outline-variant);
  background: var(--surface-bright);
  color: var(--on-surface);
  border-radius: 6px;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.backlog-search-banner-clear:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* KD-243: two-line compact row for lane tasks in the Backlog planner.
 * Line 1 is the task title (with the module-color dot inline). Line 2
 * is a muted meta strip: id, first tag, token count, attachment count.
 * The 3px readiness bar on the left edge spans both lines. Preserved
 * classes: `.backlog-draggable` (SortableJS group), `data-id`
 * (click-to-open + drag handler). */
.sprint-lane-compact-row {
  display: flex;
  align-items: stretch;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
  border-radius: 6px;
  cursor: grab;
  transition: background var(--transition-fast);
  position: relative;
}

.sprint-lane-compact-row:hover {
  background: var(--white-overlay);
}

.sprint-lane-compact-row:active {
  cursor: grabbing;
}

/* 3px readiness bar on the left edge — stretches the full row height
 * (minus vertical padding) so it reads across both lines. Color driven
 * by the `.lane-compact-{readiness}` modifier class set in JS. */
.lane-compact-bar {
  position: absolute;
  top: var(--sp-2);
  bottom: var(--sp-2);
  left: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
}

.lane-compact-priority-critical .lane-compact-bar { background: var(--color-purple); }
.lane-compact-priority-high .lane-compact-bar     { background: var(--color-red); }
.lane-compact-priority-medium .lane-compact-bar   { background: var(--color-amber); }
.lane-compact-priority-low .lane-compact-bar      { background: var(--color-green); }

/* Staleness dim for pool rows (backlog decay). Mirrors the Sprint-board
 * card treatment: stale → title dim, cold → whole row dim. */
.sprint-lane-compact-row.lane-compact-stale .lane-compact-title {
  opacity: 0.7;
}

.sprint-lane-compact-row.lane-compact-cold {
  opacity: 0.55;
}

/* KD-264: "dim to skip" state on Backlog pool rows. The user presses D
 * (or clicks the hover icon) when they decide "not this sprint". Drops
 * the whole row to 30% opacity so the eye skips it on subsequent scans.
 * Intentionally stronger than stale/cold (0.7/0.55) — this is a
 * deliberate user gesture, not a decay signal. */
.sprint-lane-compact-row.lane-compact-dimmed {
  opacity: 0.3;
}

.sprint-lane-compact-row.lane-compact-dimmed:hover {
  opacity: 0.6;
}

/* KD-305: strip noise from dimmed rows — just title at low opacity */
.sprint-lane-compact-row.lane-compact-dimmed .lane-compact-tag,
.sprint-lane-compact-row.lane-compact-dimmed .lane-compact-meta,
.sprint-lane-compact-row.lane-compact-dimmed .lane-compact-mod-dot,
.sprint-lane-compact-row.lane-compact-dimmed .card-stale-badge,
.sprint-lane-compact-row.lane-compact-dimmed .card-epic-badge,
.sprint-lane-compact-row.lane-compact-dimmed .card-sprint-badge {
  display: none;
}

/* KD-264: hover action button on backlog pool rows for dim/undim.
 * Tucks into the right edge of the row. Invisible at rest, fades in on
 * row hover. Undim variant (row already dimmed) keeps the icon visible
 * even without hover so the user can spot-check what they dimmed when
 * "Show dimmed" is on. */
.lane-compact-dim-btn {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: all var(--transition-fast);
}

.sprint-lane-compact-row:hover .lane-compact-dim-btn {
  opacity: 0.7;
}

/* Keep the undim button visible on already-dimmed rows so users can
 * find it even at 30% opacity. */
.sprint-lane-compact-row.lane-compact-dimmed .lane-compact-dim-btn {
  opacity: 0.8;
}

/* Button-hover state — specificity bumped to 0,3,2 so it beats the
 * 0,3,1 dimmed-row rule above. Full opacity + subtle background +
 * brighter color makes the click target obvious. */
.sprint-lane-compact-row .lane-compact-dim-btn:hover,
.sprint-lane-compact-row.lane-compact-dimmed .lane-compact-dim-btn:hover {
  opacity: 1;
  background: var(--white-overlay);
  color: var(--on-surface);
}

/* KD-340: hover action button on sprint lane rows to return a task to the
 * backlog pool. Same visual treatment as .lane-compact-dim-btn. */
.lane-compact-remove-btn {
  flex-shrink: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: all var(--transition-fast);
}

.sprint-lane-compact-row:hover .lane-compact-remove-btn {
  opacity: 0.7;
}

.sprint-lane-compact-row .lane-compact-remove-btn:hover {
  opacity: 1;
  background: var(--error-tint-subtle, var(--white-overlay));
  color: var(--color-red, var(--on-surface));
}

/* Flex-column body wrapping the two lines. Mirrors the `.inbox-row-body`
 * pattern from renderInboxRow. */
.lane-compact-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lane-compact-title-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.lane-compact-mod-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Empty-module slot — keeps title-line alignment identical across rows
 * with and without a module in the same lane. */
.lane-compact-mod-dot-empty {
  background: var(--outline-variant);
  opacity: 0.5;
}

.lane-compact-title {
  flex: 1;
  min-width: 0;
  font-size: var(--text-md);
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lane-compact-meta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  color: var(--text-dim);
}

.lane-compact-id {
  color: var(--text-dim);
  font-size: var(--text-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.lane-compact-tag {
  font-size: var(--text-2xs);
  font-weight: 500;
  padding: 1px var(--sp-2);
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  border: 1px solid;
}

.lane-compact-meta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--text-dim);
  font-size: var(--text-2xs);
  font-weight: 500;
  flex-shrink: 0;
}

/* KD-305: token counts hidden at rest, reveal on row hover to reduce noise */
.lane-compact-meta.lane-compact-tokens {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.sprint-lane-compact-row:hover .lane-compact-meta.lane-compact-tokens {
  opacity: 1;
}

/* Always show high-spend tokens (>50k) */
.lane-compact-meta.lane-compact-tokens-high {
  opacity: 1;
  color: var(--color-purple);
}

/* Small colored dot next to each status group label inside an expanded
 * lane. Mirrors the Sprint board column header dot coloring. */
.sprint-lane-group-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-dim);
}

.sprint-lane-group-status-dot.dot-backlog { background: var(--text-dim); }
.sprint-lane-group-status-dot.dot-spec { background: var(--color-amber); }
.sprint-lane-group-status-dot.dot-in-progress { background: var(--color-blue); }
.sprint-lane-group-status-dot.dot-testing { background: var(--color-purple); }
.sprint-lane-group-status-dot.dot-deployed { background: var(--color-green); }

/* KD-238: status subheader inside an expanded lane. Lives as an ordinary
 * sibling of the task cards inside `.sprint-lane-tasks` so SortableJS
 * keeps treating the container as a single flat list for drop-ordering
 * purposes (headers have no `.backlog-draggable` class). */
.sprint-lane-group-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) 2px;
  margin-top: var(--sp-1);
  color: var(--text-dim);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none; /* not a drag target, not clickable */
}

.sprint-lane-group-header:first-child {
  margin-top: 0;
}

.sprint-lane-group-label {
  flex: 0 0 auto;
}

.sprint-lane-group-count {
  color: var(--text-dim);
  font-size: var(--text-2xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* KD-238: "Show deployed / Hide deployed" toggle pill that sits at the
 * bottom of an expanded lane body whenever the lane has at least one
 * deployed task. */
.sprint-lane-show-deployed-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin: var(--sp-1) var(--sp-3) var(--sp-3);
  padding: 2px var(--sp-2);
  background: transparent;
  border: 1px dashed var(--outline-variant);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: var(--text-2xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  align-self: flex-start;
}

.sprint-lane-show-deployed-pill:hover {
  border-color: var(--outline);
  color: var(--text-muted);
  background: var(--white-overlay);
}

/* KD-238: read-only "Completed sprints" bridge at the bottom of the
 * right panel. Deliberately subdued so it reads as reference shelf, not
 * planning target. Strips are buttons (keyboard accessible) that open
 * the existing Sprints modal. */
.backlog-completed-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--outline-variant);
}

.backlog-completed-label {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--text-dim);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 var(--sp-1) var(--sp-1);
}

.backlog-completed-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
}

.backlog-completed-strip:hover {
  background: var(--surface-container-high);
  border-color: var(--outline-variant);
  color: var(--on-surface);
}

.backlog-completed-strip svg,
.backlog-completed-strip i[data-lucide] {
  flex-shrink: 0;
  color: var(--color-green);
  opacity: 0.7;
}

.backlog-completed-strip svg:last-child,
.backlog-completed-strip i[data-lucide]:last-child {
  color: var(--text-dim);
  margin-left: auto;
}

.backlog-completed-name {
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.backlog-completed-strip:hover .backlog-completed-name {
  color: var(--on-surface);
}

.backlog-completed-date {
  color: var(--text-dim);
  font-size: var(--text-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.backlog-completed-count {
  color: var(--text-dim);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.backlog-completed-view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--sp-1);
  padding: var(--sp-2);
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.backlog-completed-view-all:hover {
  color: var(--primary);
}

.backlog-new-sprint-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  background: transparent;
  border: 1px dashed var(--outline-variant);
  color: var(--text-muted);
  padding: var(--sp-3);
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--text-md);
  transition: all var(--transition-fast);
}

.backlog-new-sprint-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-tint);
}

/* === KD-238: Sprint edit popover ===
 * Lightweight floating editor anchored to a sprint lane's pencil button.
 * Lives at fixed coords in document.body so the Backlog planner stays
 * fully visible underneath. Replaces the heavy openSprintForm modal for
 * the "tweak dates from the planner" use case. */
.sprint-edit-popover {
  position: fixed;
  z-index: 100;
  width: 300px;
  background: var(--surface-container-highest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.sprint-edit-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.sprint-edit-popover-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sprint-edit-popover-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sprint-edit-popover-close:hover {
  background: var(--white-overlay);
  color: var(--on-surface);
}

.sprint-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.sprint-edit-row {
  display: flex;
  gap: var(--sp-3);
}

.sprint-edit-label {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sprint-edit-input {
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  color: var(--on-surface);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 6px;
  font-size: var(--text-md);
  outline: none;
  transition: border-color var(--transition-fast);
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.sprint-edit-input:focus {
  border-color: var(--primary);
}

.sprint-edit-status-group {
  display: flex;
  border-radius: 6px;
  border: 1px solid var(--outline-variant);
  overflow: hidden;
}

.sprint-edit-status-chip {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-transform: capitalize;
  font-family: inherit;
}

.sprint-edit-status-chip:not(:last-child) {
  border-right: 1px solid var(--outline-variant);
}

.sprint-edit-status-chip:hover {
  background: var(--white-overlay);
  color: var(--on-surface);
}

.sprint-edit-status-chip.active {
  background: var(--primary-tint);
  color: var(--primary);
  font-weight: 600;
}

.sprint-edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--outline-variant);
  gap: var(--sp-2);
}

.sprint-edit-actions-right {
  display: flex;
  gap: var(--sp-2);
}

.sprint-edit-delete {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}

.sprint-edit-delete:hover {
  color: var(--color-red);
  border-color: var(--color-red);
  background: var(--error-tint);
}

.sprint-edit-delete.armed {
  color: var(--color-red);
  background: var(--error-tint);
  border-color: var(--color-red);
  font-weight: 600;
}

.sprint-edit-cancel {
  background: transparent;
  border: 1px solid var(--outline-variant);
  color: var(--text-muted);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 6px;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}

.sprint-edit-cancel:hover {
  border-color: var(--outline);
  color: var(--on-surface);
}

.sprint-edit-save {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--on-primary);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--transition-fast);
  font-family: inherit;
}

.sprint-edit-save:hover {
  filter: brightness(1.1);
}


/* === Inbox View (KD-074) === */
#inbox {
  overflow-y: auto;
  background: var(--background);
}

.inbox-view {
  max-width: 880px;
  margin: 0 auto;
  padding: 48px var(--sp-6) 120px;
}

.inbox-header {
  margin-bottom: var(--sp-6);
}

.inbox-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-6xl);
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
}

.inbox-subtitle {
  margin: var(--sp-2) 0 0 32px;
  color: var(--text-muted);
  font-size: var(--text-md);
}

.inbox-capture {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
  border-radius: 12px;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.inbox-capture:focus-within {
  /* KD-261: neutralized from primary-blue halo to a quiet border lift.
   * Same reason as .comment-compose: the 3px ring compounded with the
   * inner input's :focus-visible and looked like a double outline. */
  border-color: var(--outline);
}
/* Suppress the (already-neutralized) global input:focus-visible halo on
 * the Inbox capture input — the container border-color change is the
 * only affordance we need. */
.inbox-capture-input:focus-visible { box-shadow: none; }

.inbox-capture svg,
.inbox-capture i[data-lucide] {
  color: var(--text-muted);
  flex-shrink: 0;
}

.inbox-capture-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--on-surface);
  font-size: var(--text-lg);
  font-weight: 500;
}

.inbox-capture-input::placeholder {
  color: var(--text-dim);
  font-weight: 400;
}

.inbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* KD-074 Triage sections inside the Inbox view */
.inbox-section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: var(--sp-4) 0 var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.inbox-section-label-stale {
  color: var(--color-amber);
}

.inbox-section-hint {
  font-weight: 500;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
}

.inbox-section-divider {
  height: 1px;
  background: var(--outline-variant);
  margin: var(--sp-6) 0 var(--sp-2);
}

.inbox-row.inbox-row-stale {
  border-color: var(--color-amber);
  border-style: dashed;
}

.inbox-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.inbox-row:hover {
  background: var(--surface-container-high);
  border-color: var(--outline);
}

/* KD-246: priority accent bar on the left edge — same pattern as the
   task detail accent and the kanban card ::before indicator. Replaces
   the old .inbox-row-dot so priority reads at a glance from across the list. */
.inbox-row-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  border-radius: 0 2px 2px 0;
  flex-shrink: 0;
}

.inbox-row[data-priority="high"]:hover {
  box-shadow: 0 0 16px var(--error-tint-light);
}

.inbox-row-body {
  flex: 1;
  min-width: 0;
}

/* KD-246: module + tag chips above the title, mirroring kanban card
   category line. Lets triage see context without opening the task. */
.inbox-row-meta-top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 2px;
  flex-wrap: wrap;
}

.inbox-row-id {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--on-surface-variant);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.inbox-row-module {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

.inbox-row-module-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.inbox-row-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  border: none;
}

/* KD-236: creator chip in the inbox meta strip — shows who captured the
   task during triage without requiring the user to open it. Sits between
   the module chip and the tags, wraps naturally alongside them. */
.inbox-row-creator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  max-width: 160px;
}

.inbox-row-creator-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
}

.inbox-row-creator-avatar-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--on-surface-variant);
  text-transform: uppercase;
}

.inbox-row-creator-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-row-title {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-row-excerpt {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-row-meta {
  font-size: var(--text-sm);
  color: var(--text-dim);
  flex-shrink: 0;
}

.inbox-row-actions {
  display: flex;
  gap: var(--sp-2);
  opacity: 0;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}

.inbox-row:hover .inbox-row-actions {
  opacity: 1;
}

.inbox-btn-promote,
.inbox-btn-keep,
.inbox-btn-convert-insight,
.inbox-btn-archive {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--surface-container-highest);
  border: 1px solid var(--outline-variant);
  color: var(--on-surface-variant);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 6px;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.inbox-btn-promote:hover,
.inbox-btn-keep:hover {
  background: var(--primary-tint);
  color: var(--primary);
  border-color: var(--primary);
}

.inbox-btn-convert-insight:hover {
  background: var(--warning-tint);
  color: var(--color-amber);
  border-color: var(--color-amber);
}

.inbox-btn-archive:hover {
  background: var(--error-tint);
  color: var(--color-red);
  border-color: var(--color-red);
}

.inbox-empty {
  text-align: center;
  padding: 80px var(--sp-6) 40px;
  color: var(--text-dim);
}

.inbox-empty svg,
.inbox-empty i[data-lucide] {
  opacity: 0.25;
  margin-bottom: var(--sp-4);
}

.inbox-empty-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 var(--sp-2);
}

.inbox-empty-hint {
  font-size: var(--text-md);
  color: var(--text-dim);
  max-width: 380px;
  margin: 0 auto;
}

/* Sidebar inbox badge */
.sidebar-badge {
  margin-left: auto;
  background: var(--primary-tint);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

/* Quick-capture overlay (Cmd+Shift+N) */
.inbox-quick-capture-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18vh;
}

.inbox-quick-capture-box {
  width: min(640px, 90vw);
  background: var(--surface-container-highest);
  border: 1px solid var(--outline);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
  animation: inbox-quick-capture-in var(--transition-normal) ease-out;
}

@keyframes inbox-quick-capture-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.inbox-quick-capture-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}

.inbox-quick-capture-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--on-surface);
  font-size: var(--text-3xl);
  font-weight: 500;
  padding: var(--sp-2) 0;
}

.inbox-quick-capture-input::placeholder {
  color: var(--text-dim);
}

.inbox-quick-capture-hint {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text-dim);
  text-align: right;
}

/* KD-277: Toolbar inline capture field — mirrors #search styling */
.toolbar-capture {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: var(--sp-2);
}
.toolbar-capture-icon {
  position: absolute;
  left: 12px;
  pointer-events: none;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}
#toolbar-capture-input {
  width: 180px;
  padding: 7px 12px 7px 34px;
  background: var(--surface-container-lowest);
  border: none;
  border-radius: var(--radius-full);
  color: var(--on-surface);
  font-size: var(--text-base);
  font-family: inherit;
  outline: none;
  transition: box-shadow var(--transition-fast), width var(--transition-normal);
  box-shadow: 0 0 0 1px var(--ghost-border-subtle);
}
#toolbar-capture-input::placeholder {
  color: var(--text-muted);
}
#toolbar-capture-input:focus {
  box-shadow: 0 0 0 1px var(--outline);
  width: 240px;
}

/* === Ideas List View === */
.ideas-list-view {
  padding: 32px var(--sp-6);
  max-width: 1400px;
  overflow-y: auto;
  height: calc(100vh - 52px);
  scrollbar-width: none;
}
.ideas-list-view::-webkit-scrollbar {
  display: none;
}

.ideas-list-view section[data-status-group] {
  margin-bottom: 40px;
}

.ideas-list-view .flex.flex-col.gap-3 {
  gap: 10px;
  padding-top: 4px;
}

/* KD-074: idea-specific classes removed — Ideas view deprecated. The
   .ideas-list-view selector above is still used by the Releases view
   (showReleases() reuses the #ideas main element as a host). */


/* === Login View === */

.login-view {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
}

.login-card {
  width: 100%;
  max-width: 380px;
  padding: var(--sp-8);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  text-align: center;
}

.login-logo {
  margin-bottom: var(--sp-4);
}

.login-title {
  font-size: var(--text-7xl);
  font-weight: 700;
  color: var(--on-surface);
  margin: 0 0 var(--sp-1) 0;
}

.login-subtitle {
  font-size: var(--text-lg);
  color: var(--on-surface-variant);
  margin: 0 0 var(--sp-6) 0;
}

.login-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  text-align: left;
}

.login-step {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-lg);
  color: var(--on-surface-variant);
}

.login-step-num {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--on-color-vivid);
  font-size: var(--text-base);
  font-weight: 600;
  flex-shrink: 0;
}

.login-step code {
  background: var(--surface-container-high);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  color: var(--primary);
}

/* Login tabs */
.login-tabs {
  display: flex;
  gap: 2px;
  background: var(--surface-container-high);
  border-radius: var(--radius-lg);
  padding: 3px;
  margin-bottom: var(--sp-5);
}

.login-tab {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  background: none;
  color: var(--on-surface-variant);
  font-size: var(--text-md);
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.login-tab.active {
  background: var(--surface-container);
  color: var(--on-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.login-tab:not(.active):hover {
  color: var(--on-surface);
}

.login-panel {
  min-height: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.login-form input[type="text"][id="login-code"] {
  font-family: var(--font-sans);
  letter-spacing: 0.25em;
}

.login-error {
  font-size: var(--text-md);
  color: var(--color-red);
  margin: 0;
}

.login-switch {
  margin-top: var(--sp-4);
  font-size: var(--text-md);
  color: var(--on-surface-variant);
  text-align: center;
}

.login-switch a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.login-switch a:hover {
  text-decoration: underline;
}

/* === Sidebar User Indicator === */

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  margin-bottom: var(--sp-2);
  width: 100%;
  overflow: hidden;
}

.sidebar-user-info {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  flex: 1;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background var(--transition-fast);
}
.sidebar-user-info:hover {
  background: var(--surface-2);
}

.sidebar-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--on-color-vivid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
  flex-shrink: 0;
}

.sidebar-user-name {
  font-size: var(--text-md);
  color: var(--on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-logout-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--sidebar-text-dim);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.sidebar-user:hover .sidebar-logout-btn {
  opacity: 1;
}

.sidebar-logout-btn:hover {
  background: var(--sidebar-hover-bg);
  color: var(--color-red);
}


/* === Instance Environment Banner === */
.instance-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  text-align: center;
  padding: 3px 0;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: var(--font-sans);
}
.instance-banner.env-qa {
  background: var(--color-amber);
  color: var(--on-color-dark);
}
.instance-banner.env-prod {
  background: var(--color-red);
  color: var(--on-color-vivid);
}
.instance-banner.env-default {
  background: var(--color-purple);
  color: var(--on-color-vivid);
}
body.has-banner #sidebar,
body.has-banner #main-wrapper,
body.has-banner #login-view {
  margin-top: 24px;
}

/* === Admin Panel === */
/* Admin panel uses a wider shell than project settings — tables need room */
#admin-panel .settings-container {
  max-width: 1200px;
  padding: var(--sp-8) var(--sp-6);
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.admin-stat-card {
  background: var(--surface-container-high);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  text-align: center;
}
.admin-stat-value {
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--primary-container);
  line-height: 1.1;
}
.admin-stat-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--sp-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.admin-table-wrap {
  background: var(--surface-container);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin-bottom: var(--sp-4);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}
.admin-table th {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--surface-container-high);
  border-bottom: 1px solid var(--ghost-border);
  white-space: nowrap;
}
.admin-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--ghost-border);
  color: var(--on-surface);
  vertical-align: middle;
}
.admin-table tr:last-child td {
  border-bottom: none;
}
.admin-table tr:hover td {
  background: var(--surface-container-high);
}
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.admin-toolbar .inline-search-wrapper {
  flex: 1;
  max-width: 300px;
}
.admin-toolbar input {
  width: 100%;
  padding-right: var(--sp-6);
}
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
}
.admin-badge-admin {
  background: var(--badge-admin-bg);
  color: var(--badge-admin-fg);
}
.admin-badge-suspended {
  background: var(--badge-suspended-bg);
  color: var(--badge-suspended-fg);
}
.admin-badge-basic {
  background: var(--surface-container-high);
  color: var(--text-muted);
}
.admin-badge-advanced {
  background: var(--badge-advanced-bg);
  color: var(--badge-advanced-fg);
}
.admin-peer-card {
  background: var(--surface-container);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.admin-peer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.admin-peer-name {
  font-size: var(--text-2xl);
  font-weight: 600;
}
.admin-peer-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-md);
}
.admin-peer-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.admin-section-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  margin: var(--sp-6) 0 var(--sp-3);
  color: var(--on-surface);
}

/* Reusable utility for muted meta lines inside admin (counts, dates, etc) */
.admin-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.admin-link {
  color: var(--color-primary);
  text-decoration: none;
}
.admin-link:hover {
  text-decoration: underline;
}
.admin-row-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

/* --- Server Status --- */
.server-gauges {
  display: flex;
  gap: var(--sp-6);
  justify-content: center;
  margin-bottom: var(--sp-8);
  flex-wrap: wrap;
}
.server-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.server-gauge-ring {
  position: relative;
  width: 100px;
  height: 100px;
}
.server-gauge-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.server-gauge-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--on-surface);
}
.server-gauge-label {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--on-surface);
}
.server-gauge-detail {
  font-size: var(--text-sm);
  color: var(--on-surface-variant);
}
.server-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.server-info-card {
  background: var(--surface-container);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
.server-info-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--outline-variant);
}
.server-info-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.server-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
}
.server-info-key {
  color: var(--on-surface-variant);
}
.server-info-val {
  color: var(--on-surface);
  font-weight: 500;
  text-align: right;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-disk-bar {
  background: var(--surface-container);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
.server-disk-bar-label {
  font-size: var(--text-sm);
  color: var(--on-surface-variant);
  margin-bottom: var(--sp-2);
}
.server-disk-bar-track {
  height: 12px;
  background: var(--surface-3);
  border-radius: 6px;
  overflow: hidden;
}
.server-disk-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width var(--transition-slow) ease;
}

/* --- Audit Log --- */
.audit-filters {
  margin-bottom: var(--sp-4);
}
.audit-filter-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.audit-filter-row .select {
  width: auto;
  max-width: 180px;
  flex: none;
  font-size: var(--text-md);
}
.audit-count {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-left: auto;
  flex: none;
}
/* Audit log table — overrides a few .admin-table defaults to keep
   long-lived rows compact and IP/time columns aligned. */
.audit-table-wrap {
  margin-bottom: 0;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
}
.audit-table th,
.audit-table td {
  padding: var(--sp-2) var(--sp-3);
  vertical-align: middle;
}
.audit-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  /* border-bottom on sticky table cells doesn't render with border-collapse;
     emulate it with an inset shadow that travels with the sticky cell */
  box-shadow: inset 0 -1px 0 var(--ghost-border);
}
.audit-table tbody tr {
  transition: background var(--transition-fast);
}
.audit-table .audit-cell-action {
  width: 220px;
  min-width: 200px;
}
.audit-table .audit-cell-user {
  width: 160px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audit-table .audit-cell-project {
  width: 140px;
}
.audit-table .audit-cell-resource {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.audit-table .audit-cell-status {
  width: 60px;
  text-align: center;
}
.audit-table .audit-cell-duration {
  width: 70px;
  text-align: right;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.audit-table .audit-cell-ip {
  width: 130px;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.audit-table .audit-cell-time {
  width: 90px;
  text-align: right;
  color: var(--text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.audit-status-cell {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.audit-status-cell-error {
  color: var(--badge-suspended-fg);
}

/* The action badge lives inside a fixed-width cell so it can ellipsis
   gracefully when a label is unusually long (e.g. legacy bogus rows). */
.audit-action-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
}
.audit-action-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audit-cat-auth {
  background: var(--audit-cat-auth-bg);
  color: var(--audit-cat-auth-fg);
}
.audit-cat-create {
  background: var(--audit-cat-create-bg);
  color: var(--audit-cat-create-fg);
}
.audit-cat-update {
  background: var(--audit-cat-update-bg);
  color: var(--audit-cat-update-fg);
}
.audit-cat-delete {
  background: var(--audit-cat-delete-bg);
  color: var(--audit-cat-delete-fg);
}
.audit-cat-read,
.audit-cat-other {
  background: var(--surface-container-high);
  color: var(--text-muted);
}
.audit-project {
  display: inline-block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: var(--surface-container-high);
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audit-dim {
  color: var(--text-dim);
}
.audit-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-6);
  color: var(--text-muted);
  font-size: var(--text-md);
}

/* Sentinel for IntersectionObserver lazy-loading. Sits below the table
   and triggers the next page fetch when scrolled into view. */
.audit-sentinel {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--text-dim);
  margin-top: var(--sp-2);
}
.audit-sentinel.is-loading::after {
  content: 'Loading…';
}
.audit-sentinel.is-done::after {
  content: '— end of log —';
}


/* === 40. Text Utility Classes (for JS-generated HTML) === */

/* Timestamps & meta info: "Created ...", "Updated ..." */
.text-meta {
  font-size: var(--text-sm);
  color: var(--text-dim);
}

/* Muted placeholder / empty-state text */
.text-placeholder {
  font-size: var(--text-md);
  color: var(--text-dim);
}

/* Secondary descriptive text */
.text-secondary-info {
  font-size: var(--text-base);
  color: var(--text-muted);
}

/* Banner label (strong line in banners) */
.banner-label {
  display: block;
  font-size: var(--text-md);
  color: var(--on-surface);
  margin-bottom: 2px;
}

/* Banner description (secondary line in banners) */
.banner-desc {
  font-size: var(--text-base);
  color: var(--text-muted);
}

/* Modal/panel section title */
.section-title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--on-surface);
}

/* Inline code snippet */
.code-inline {
  font-size: var(--text-base);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Chip remove button (tag/module pickers) */
.chip-remove-btn {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  font-size: var(--text-lg);
  line-height: 1;
}

/* === Docs Layout (tree sidebar + content) === */

.docs-layout {
  display: flex;
  height: calc(100vh - 52px);
  overflow: hidden;
}

.docs-tree-sidebar {
  width: 260px;
  min-width: 180px;
  max-width: 400px;
  border-right: 1px solid var(--sidebar-border);
  overflow-y: auto;
  flex-shrink: 0;
  background: var(--surface-0);
  display: flex;
  flex-direction: column;
}

.docs-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--white-overlay);
}

.docs-tree-title {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.docs-tree-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.docs-tree-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-tree-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
  border-radius: 4px;
  margin: 1px var(--sp-2);
  font-size: var(--text-md);
  color: var(--text-secondary);
  transition: background var(--transition-fast) ease;
  position: relative;
}

.docs-tree-item:hover {
  background: var(--white-overlay);
  color: var(--on-surface);
}

.docs-tree-item.active {
  background: var(--white-overlay-medium);
  color: var(--on-surface);
  font-weight: 500;
}

.docs-tree-item .tree-toggle {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
  transition: transform var(--transition-fast) ease, opacity var(--transition-fast) ease;
}

.docs-tree-item .tree-toggle:hover { opacity: 1; }
.docs-tree-item .tree-toggle.collapsed svg { transform: rotate(-90deg); }

.docs-tree-item .tree-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.5;
}

.docs-tree-item .tree-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.docs-tree-item .tree-actions {
  display: none;
  gap: 2px;
}

.docs-tree-item:hover .tree-actions {
  display: flex;
}

.docs-tree-item .tree-actions button {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 3px;
}

.docs-tree-item .tree-actions button:hover {
  color: var(--on-surface);
  background: var(--white-overlay-light);
}

.docs-tree-children {
  padding-left: 16px;
}

.docs-tree-children.collapsed {
  display: none;
}

/* Drag indicator for tree */
.docs-tree-item.sortable-ghost {
  opacity: 0.4;
  background: var(--primary-tint-subtle);
}

.docs-tree-item.sortable-chosen {
  background: var(--white-overlay-light);
}

.docs-content-area {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}

.docs-content-area .docs-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  gap: var(--sp-3);
  padding: 40px;
  text-align: center;
}

.docs-content-area .docs-welcome h2 {
  font-size: var(--text-3xl);
  font-weight: 500;
  color: var(--on-surface-variant);
}

.docs-content-area .docs-welcome p {
  font-size: var(--text-md);
  max-width: 320px;
}

/* Wiki links */
.wiki-link {
  color: var(--color-purple);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--color-purple) 30%, transparent);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.wiki-link:hover {
  color: var(--color-blue);
  border-bottom-color: color-mix(in oklch, var(--color-blue) 50%, transparent);
}

.wiki-link-broken {
  color: var(--color-red);
  border-bottom: 1px dashed color-mix(in oklch, var(--color-red) 50%, transparent);
}

.wiki-link-broken:hover {
  color: var(--color-amber);
}

/* KD-372: entity-target wiki-links (`[[KD-42]]`, `[[KD-EP-4]]`, `[[KD-SP-2]]`).
   Distinct colour per kind so the reader can tell at a glance whether a
   reference goes to a task, epic, or sprint. */
.wiki-link-task {
  color: var(--color-blue);
  border-bottom-color: color-mix(in oklch, var(--color-blue) 30%, transparent);
}
.wiki-link-task:hover {
  color: var(--color-purple);
  border-bottom-color: color-mix(in oklch, var(--color-purple) 50%, transparent);
}

.wiki-link-initiative {
  color: var(--color-amber);
  border-bottom-color: color-mix(in oklch, var(--color-amber) 30%, transparent);
}
.wiki-link-initiative:hover {
  color: var(--color-purple);
  border-bottom-color: color-mix(in oklch, var(--color-purple) 50%, transparent);
}

.wiki-link-sprint {
  color: var(--color-green);
  border-bottom-color: color-mix(in oklch, var(--color-green) 30%, transparent);
}
.wiki-link-sprint:hover {
  color: var(--color-purple);
  border-bottom-color: color-mix(in oklch, var(--color-purple) 50%, transparent);
}

/* KD-542: in-editor wiki-link chips. Inside the Milkdown editor, the
   decoration plugin tags kb-ref link marks with `.wiki-link-entity`
   so authors see the same live chip the read surface renders. The
   underlying DOM is still a regular <a>, so pill styling stays
   contenteditable-friendly (authors can click, Cmd+click, select). */
.kb-editor-area .ProseMirror .wiki-link-entity,
.kb-editor-area .ProseMirror a[href^="kb-ref:"] {
  display: inline-flex;
  align-items: baseline;
  padding: 1px var(--sp-2);
  border-radius: var(--radius-sm);
  border-bottom: none;
  background: color-mix(in oklch, var(--color-blue) 12%, transparent);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.kb-editor-area .ProseMirror .wiki-link-entity.wiki-link-initiative,
.kb-editor-area .ProseMirror .wiki-link-entity.wiki-link-initiative a[href^="kb-ref:"] {
  background: color-mix(in oklch, var(--color-amber) 14%, transparent);
}
.kb-editor-area .ProseMirror .wiki-link-entity.wiki-link-sprint,
.kb-editor-area .ProseMirror .wiki-link-entity.wiki-link-sprint a[href^="kb-ref:"] {
  background: color-mix(in oklch, var(--color-green) 14%, transparent);
}
.kb-editor-area .ProseMirror .wiki-link-entity.wiki-link-doc,
.kb-editor-area .ProseMirror .wiki-link-entity.wiki-link-doc a[href^="kb-ref:"] {
  background: color-mix(in oklch, var(--color-purple) 14%, transparent);
}
.kb-editor-area .ProseMirror .wiki-link-entity:hover,
.kb-editor-area .ProseMirror a[href^="kb-ref:"]:hover {
  background: color-mix(in oklch, var(--color-blue) 22%, transparent);
}

/* KD-401: Confluence-style callout cards. Rendered by lib/markdown.js when
   a blockquote begins with `[!TYPE]`, and live-styled in the Milkdown editor
   via a NodeView decoration on the blockquote. Five tones map to semantic
   colors via per-type CSS vars so the card layout stays shared. */
.kb-callout {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--kb-callout-accent);
  background: var(--kb-callout-bg);
  color: var(--on-surface);
}
.kb-callout-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--kb-callout-accent);
  font-weight: 600;
  font-size: var(--text-md);
}
.kb-callout-icon {
  flex-shrink: 0;
}
.kb-callout-body {
  color: var(--on-surface);
  font-size: var(--text-md);
  line-height: 1.55;
}
.kb-callout-body > :first-child { margin-top: 0; }
.kb-callout-body > :last-child { margin-bottom: 0; }

/* Per-tone variables — semantic colors only, no hardcoded hexes. */
.kb-callout-note    { --kb-callout-accent: var(--color-slate);  --kb-callout-bg: color-mix(in oklch, var(--color-slate)  10%, transparent); }
.kb-callout-info    { --kb-callout-accent: var(--color-blue);   --kb-callout-bg: color-mix(in oklch, var(--color-blue)   10%, transparent); }
.kb-callout-tip     { --kb-callout-accent: var(--color-green);  --kb-callout-bg: color-mix(in oklch, var(--color-green)  10%, transparent); }
.kb-callout-warning { --kb-callout-accent: var(--color-amber);  --kb-callout-bg: color-mix(in oklch, var(--color-amber)  10%, transparent); }
.kb-callout-danger  { --kb-callout-accent: var(--color-red);    --kb-callout-bg: color-mix(in oklch, var(--color-red)    10%, transparent); }

/* In-editor decoration: ProseMirror keeps the blockquote as the underlying
   node, but the callout plugin tags it with `kb-callout-blockquote` plus a
   per-type modifier so the user sees the same card chrome while editing. */
.kb-callout-blockquote {
  position: relative;
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--kb-callout-accent);
  border-radius: var(--radius-md);
  background: var(--kb-callout-bg);
}
.kb-callout-blockquote::before {
  content: attr(data-callout-label);
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-4);
  color: var(--kb-callout-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kb-callout-blockquote { padding-top: calc(var(--sp-3) + var(--sp-4)); }
/* Hide the literal `[!TYPE]` text inside a callout blockquote — the colored
   label above (`::before` on the blockquote) replaces it. The nodes still
   occupy the document so the marker survives markdown round-trips. Two
   forms: marker-only first paragraph (slash-inserted), or inline marker at
   the start of a paragraph that also carries body content (user-authored). */
.kb-callout-marker-paragraph { display: none; }
.kb-callout-marker { display: none; }
.kb-callout-blockquote-note    { --kb-callout-accent: var(--color-slate);  --kb-callout-bg: color-mix(in oklch, var(--color-slate)  10%, transparent); }
.kb-callout-blockquote-info    { --kb-callout-accent: var(--color-blue);   --kb-callout-bg: color-mix(in oklch, var(--color-blue)   10%, transparent); }
.kb-callout-blockquote-tip     { --kb-callout-accent: var(--color-green);  --kb-callout-bg: color-mix(in oklch, var(--color-green)  10%, transparent); }
.kb-callout-blockquote-warning { --kb-callout-accent: var(--color-amber);  --kb-callout-bg: color-mix(in oklch, var(--color-amber)  10%, transparent); }
.kb-callout-blockquote-danger  { --kb-callout-accent: var(--color-red);    --kb-callout-bg: color-mix(in oklch, var(--color-red)    10%, transparent); }

/* Excalidraw embeds (light-themed component) */
.excalidraw-embed {
  --excalidraw-bg: #fafafa;
  --excalidraw-border: var(--white-overlay-medium);
  --excalidraw-text: #808080;
  --excalidraw-text-hover: #4d4d4d;
  --excalidraw-label-bg: #f2f2f2;
  --excalidraw-label-border: rgba(0,0,0,0.06);
  position: relative;
  border: 1px solid var(--excalidraw-border);
  border-radius: 8px;
  overflow: hidden;
  margin: 20px 0;
  background: var(--excalidraw-bg);
  /* block + fit-content so each drawing takes its own line while still
     hugging its intrinsic SVG width. Previously `inline-block` made two
     adjacent drawings flow side by side instead of stacking vertically,
     even when separated by blank lines in the markdown source. */
  display: block;
  width: fit-content;
  max-width: 100%;
}

.excalidraw-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--excalidraw-text);
  background: var(--excalidraw-label-bg);
  border-bottom: 1px solid var(--excalidraw-label-border);
}

/* KD-402: pencil + trash buttons share this actions cluster. */
.excalidraw-label-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.excalidraw-edit-btn,
.excalidraw-delete-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--excalidraw-text);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background var(--transition-fast), color var(--transition-fast);
  opacity: 0;
}

.excalidraw-embed:hover .excalidraw-edit-btn,
.excalidraw-embed:hover .excalidraw-delete-btn {
  opacity: 1;
}

.excalidraw-edit-btn:hover {
  background: var(--excalidraw-label-border);
  color: var(--excalidraw-text-hover);
}

/* KD-402: trash button turns subtle red on hover to read as destructive. */
.excalidraw-delete-btn:hover {
  background: var(--error-tint-subtle, var(--excalidraw-label-border));
  color: var(--color-red);
}

.excalidraw-svg-wrap {
  padding: var(--sp-2);
  overflow: hidden;
}

.excalidraw-svg-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

.excalidraw-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, rgba(128,128,128,0.3) 50%);
  border-radius: 0 0 8px 0;
  transition: background var(--transition-fast);
}

.excalidraw-resize-handle:hover {
  background: linear-gradient(135deg, transparent 50%, rgba(128,128,128,0.5) 50%);
}

.excalidraw-embed.resizing {
  user-select: none;
  outline: 2px solid var(--primary-tint-medium);
}

.excalidraw-empty-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--excalidraw-text);
  font-size: var(--text-md);
  min-height: 100px;
  padding: var(--sp-5);
}

/* Markdown editor syntax highlighting overlay */
.md-highlight-wrap {
  position: relative;
}

.md-editor-backdrop {
  /* Syntax highlight palette */
  --hl-heading: #a78bfa;
  --hl-bold: #fbbf24;
  --hl-italic: #f59e0b;
  --hl-wikilink: #c084fc;
  --hl-excalidraw: #34d399;
  --hl-mermaid: #22d3ee;
  --hl-code: #94a3b8;
  --hl-inline-code: #fb923c;
  --hl-link: #60a5fa;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  padding: var(--sp-4);
  color: var(--on-surface);
  z-index: 0;
}

.md-highlight-wrap .md-editor-highlighted {
  position: relative;
  z-index: 1;
  background: transparent;
  color: transparent;
  caret-color: var(--on-surface);
}

/* Match textarea styling exactly */
.md-editor-backdrop,
.md-editor-highlighted {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Menlo', monospace;
  font-size: var(--text-md);
  line-height: 1.6;
  padding: var(--sp-4);
  tab-size: 2;
  letter-spacing: 0;
}

/* Syntax highlight colors */
.md-editor-backdrop .hl-heading {
  color: var(--hl-heading);
  font-weight: 600;
}

.md-editor-backdrop .hl-bold {
  color: var(--hl-bold);
  font-weight: 700;
}

.md-editor-backdrop .hl-italic {
  color: var(--hl-italic);
  font-style: italic;
}

.md-editor-backdrop .hl-wikilink {
  color: var(--hl-wikilink);
}

.md-editor-backdrop .hl-excalidraw {
  color: var(--hl-excalidraw);
}

.md-editor-backdrop .hl-mermaid {
  color: var(--hl-mermaid);
}

.md-editor-backdrop .hl-code {
  color: var(--hl-code);
}

.md-editor-backdrop .hl-inline-code {
  color: var(--hl-inline-code);
}

.md-editor-backdrop .hl-link {
  color: var(--hl-link);
  text-decoration: underline;
}

/* ==========================================================================
   Storage analytics (KD-077)
   ========================================================================== */

.storage-totals {
  display: flex;
  gap: var(--sp-6);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.storage-total {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 120px;
}

.storage-total-value {
  font-size: var(--text-5xl);
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.2;
}

.storage-total-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--sp-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.storage-subsection {
  margin-top: var(--sp-5);
}

.storage-subsection-title {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--on-surface);
  margin-bottom: var(--sp-3);
}

.storage-bar {
  display: flex;
  width: 100%;
  height: 16px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-container);
  border: 1px solid var(--border);
}

.storage-bar-mini {
  height: 10px;
  max-width: 240px;
}

.storage-bar-empty {
  background: var(--surface-container);
}

.storage-bar-seg {
  height: 100%;
  transition: opacity var(--transition-fast);
}

.storage-bar-seg:hover {
  opacity: 0.85;
}

.storage-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
}

.storage-legend-row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--text-md);
  color: var(--on-surface);
}

.storage-legend-row--empty {
  opacity: 0.4;
}

.storage-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
  display: inline-block;
  flex-shrink: 0;
}

.storage-legend-label {
  color: var(--on-surface);
}

.storage-legend-count {
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: right;
  padding-right: var(--sp-2);
}

.storage-legend-bytes {
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Category color mapping — same palette as --color-* tokens so the
   chart fits the rest of the UI. */
.storage-cat-images    { background: var(--color-blue); }
.storage-cat-pdfs      { background: var(--color-red); }
.storage-cat-documents { background: var(--color-purple); }
.storage-cat-video     { background: var(--color-amber); }
.storage-cat-audio     { background: var(--color-green); }
.storage-cat-archives  { background: var(--color-slate); }
.storage-cat-drawings  { background: var(--color-pink); }
.storage-cat-other     { background: var(--color-teal); }

/* Data-storage category palette (row bytes: tasks, docs, comments,
   activity, token_log). Uses the same --color-* tokens but remapped so
   the two bar charts don't both start with blue. */
.storage-data-tasks     { background: var(--color-blue); }
.storage-data-docs      { background: var(--color-green); }
.storage-data-comments  { background: var(--color-amber); }
.storage-data-activity  { background: var(--color-purple); }
.storage-data-token_log { background: var(--color-teal); }

/* KD-077: admin-only cross-org storage view. */
.admin-storage-breakdowns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.admin-storage-table .admin-storage-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.admin-storage-org-name {
  font-weight: 500;
  color: var(--on-surface);
}

.admin-storage-org-bar {
  width: 180px;
  height: 10px;
  /* Fixed-width bar normalized to the max-org total so small orgs
     still render visibly next to the biggest one. */
  overflow: hidden;
}

.admin-storage-bar-files { background: var(--color-blue); }
.admin-storage-bar-data  { background: var(--color-purple); }

.admin-storage-privacy {
  margin-bottom: var(--sp-3);
  color: var(--text-muted);
}

/* Top files table */
.storage-top-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
  margin-top: var(--sp-2);
}

.storage-top-table th,
.storage-top-table td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.storage-top-table th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.storage-top-file {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storage-top-link {
  color: var(--on-surface);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

.storage-top-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.storage-top-task {
  color: var(--text-muted);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storage-top-size {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Per-project table in org settings */
.storage-project-table .storage-project-row {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.storage-project-table .storage-project-row:hover {
  background: var(--white-overlay);
}

.storage-project-name {
  font-weight: 500;
  color: var(--on-surface);
}

.storage-project-bar {
  width: 260px;
}

.storage-project-files {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.storage-project-size {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--on-surface);
}

/* === Confirm-on-click (KD-266) ===
   First click transforms the button/menu item to a red "Confirm?" state.
   Second click executes the action. Click outside resets. */
.overflow-menu-item--confirming {
  background: var(--color-error);
  color: var(--on-color-vivid);
  font-weight: 600;
}

.btn--confirming {
  background: var(--color-error);
  color: var(--on-color-vivid);
  font-weight: 600;
}

/* Task detail header confirm-delete button (KD-266) */
.task-view-confirm-delete {
  background: var(--color-red);
  color: var(--on-color-vivid);
  font-weight: 600;
  font-size: var(--text-base);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 28px;
  animation: confirm-delete-in var(--transition-normal) ease-out;
  transition: filter var(--transition-fast);
}

.task-view-confirm-delete:hover {
  filter: brightness(1.2);
}

/* Slide neighbouring buttons left when confirm appears */
.task-view-header-actions:has(.task-view-confirm-delete) .task-view-btn-copy-link {
  animation: header-btn-shift var(--transition-normal) ease-out;
}

@keyframes confirm-delete-in {
  from { opacity: 0; width: 0; padding-left: 0; padding-right: 0; overflow: hidden; }
  to { opacity: 1; }
}

@keyframes header-btn-shift {
  from { transform: translateX(20px); opacity: 0.5; }
  to { transform: translateX(0); opacity: 1; }
}

/* KD-231: Merge task picker overlay */
.merge-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.merge-picker {
  background: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  width: 480px;
  max-width: 90vw;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.merge-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  color: var(--on-surface);
}

.merge-picker-close {
  background: none;
  border: none;
  color: var(--on-surface-variant);
  cursor: pointer;
  padding: var(--sp-1);
  border-radius: var(--radius-sm);
}

.merge-picker-close:hover {
  background: var(--white-overlay);
}

.merge-picker-results {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1;
  min-height: 0;
}

.merge-candidate {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.merge-candidate:hover {
  background: var(--white-overlay);
}

.merge-candidate-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--on-surface);
  font-size: var(--text-md);
}

/* ====================================================================
   KD-324: Sprint lifecycle — queued header, close-confirm modal,
   "Next up" lane pill, sprint edit lock note, analytics dashboard.
   All tokens, no hardcoded colours / pixels / transitions.
   ==================================================================== */

/* Queued-state variant of the sprint header strip */
.sprint-header-strip.queued {
  background: var(--surface-container);
  border-color: var(--outline-variant);
}

.sprint-header-strip.queued .sprint-header-strip-name {
  color: var(--on-surface-variant);
}

.sprint-header-strip.queued .sprint-progress-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.sprint-header-btn.primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

.sprint-header-btn.primary:hover:not(:disabled) {
  filter: brightness(1.1);
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

/* "Next up" pill on the first queued backlog lane */
.sprint-lane-next-up {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-2);
  border-radius: 999px;
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--primary-tint-light);
  color: var(--primary);
  border: 1px solid var(--primary-tint-strong);
}

.sprint-lane.next-up > .sprint-lane-header {
  border-left: 2px solid var(--primary);
}

/* Sprint edit popover: locked-state note */
.sprint-edit-locked-note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-container);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.sprint-edit-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: transparent;
  border: 1px solid var(--outline-variant);
  color: var(--on-surface-variant);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 6px;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.sprint-edit-link:hover {
  background: var(--surface-container-high);
  color: var(--on-surface);
}

/* Sprint close confirm — 2- or 3-option modal used by the header strip */
.sprint-close-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop, rgba(0, 0, 0, 0.5));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fade-in var(--transition-fast) ease-out;
}

.sprint-close-confirm {
  background: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  padding: var(--sp-5);
  max-width: 460px;
  width: calc(100% - var(--sp-8));
  box-shadow: var(--shadow-lg);
}

.sprint-close-confirm-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: var(--sp-2);
}

.sprint-close-confirm-body {
  font-size: var(--text-md);
  color: var(--on-surface-variant);
  line-height: 1.5;
  margin-bottom: var(--sp-5);
}

.sprint-close-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.sprint-close-confirm-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border-radius: 6px;
  font-size: var(--text-md);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--outline-variant);
  transition: background var(--transition-fast), filter var(--transition-fast);
}

.sprint-close-confirm-btn.primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

.sprint-close-confirm-btn.primary:hover { filter: brightness(1.1); }

.sprint-close-confirm-btn.ghost {
  background: transparent;
  color: var(--on-surface-variant);
}

.sprint-close-confirm-btn.ghost:hover {
  background: var(--surface-container);
  color: var(--on-surface);
}

/* Sprint analytics dashboard */
#sprint-dashboard-view {
  padding: var(--sp-6);
  overflow-y: auto;
  height: calc(100vh - 52px);
}

.sprint-dashboard-banner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.sprint-dashboard-banner-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.sprint-dashboard-banner-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-top: var(--sp-4);
}

.sprint-dashboard-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-fast);
}

.sprint-dashboard-back:hover { color: var(--on-surface); }

.sprint-dashboard-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-6xl);
  font-weight: 600;
  color: var(--on-surface);
  margin: 0;
}

.sprint-dashboard-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-md);
  color: var(--text-muted);
}

.sprint-dashboard-status {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-2);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-container);
  color: var(--on-surface-variant);
}

.sprint-dashboard-status.completed {
  background: var(--success-tint);
  color: var(--color-green);
}

.sprint-dashboard-status.active {
  background: var(--primary-tint-light);
  color: var(--primary);
}

.sprint-dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.sprint-dashboard-kpis-secondary {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: var(--sp-6);
}

.sprint-dashboard-kpi {
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  padding: var(--sp-4);
}

.sprint-dashboard-kpi-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: var(--sp-2);
}

.sprint-dashboard-kpi-value {
  font-size: var(--text-6xl);
  font-weight: 600;
  color: var(--on-surface);
}

.sprint-dashboard-kpi-delta {
  display: inline-block;
  margin-left: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 500;
}

.sprint-dashboard-kpi-delta.up { color: var(--color-green); }
.sprint-dashboard-kpi-delta.down { color: var(--color-red); }

.sprint-dashboard-charts {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

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

.sprint-dashboard-panel {
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  padding: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.sprint-dashboard-panel-header {
  margin-bottom: var(--sp-4);
}

.sprint-dashboard-panel-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--on-surface);
  margin: 0 0 var(--sp-1);
}

.sprint-dashboard-panel-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

.sprint-dashboard-chart-wrap {
  position: relative;
  height: 260px;
}

/* KD-516 — static scope-health panel that replaces the time-series chart. */
.sprint-scope-health {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.sprint-scope-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
}

.sprint-scope-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.sprint-scope-stat-value {
  font-size: var(--text-4xl);
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.1;
}

.sprint-scope-stat-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.sprint-scope-bar {
  display: flex;
  width: 100%;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-variant);
  border: 1px solid var(--outline-variant);
}

.sprint-scope-bar-seg {
  height: 100%;
  transition: width var(--transition-normal);
}

.sprint-scope-bar-seg + .sprint-scope-bar-seg {
  border-left: 1px solid var(--surface-container);
}

.sprint-scope-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sprint-scope-legend-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-md);
}

.sprint-scope-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.sprint-scope-legend-count {
  font-weight: 600;
  color: var(--on-surface);
}

.sprint-scope-legend-label {
  color: var(--text-muted);
}

.sprint-ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}

.sprint-ledger-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--outline-variant);
}

.sprint-ledger-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--outline-variant);
  color: var(--on-surface);
}

.sprint-ledger-table tr:last-child td { border-bottom: none; }

.sprint-ledger-id {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.sprint-ledger-title {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sprint-ledger-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface-variant);
}

.sprint-ledger-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-2);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sprint-ledger-chip.shipped {
  background: var(--success-tint);
  color: var(--color-green);
}

.sprint-ledger-chip.moved {
  background: var(--primary-tint-light);
  color: var(--primary);
}

.sprint-ledger-chip.left-behind {
  background: var(--surface-container-high);
  color: var(--text-muted);
}

.sprint-ledger-chip.removed {
  background: var(--warning-tint-light);
  color: var(--color-amber);
}

.sprint-ledger-chip.deleted {
  background: var(--error-tint-light);
  color: var(--color-red);
}

.sprint-ledger-module {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--on-surface-variant);
  font-size: var(--text-sm);
}

.sprint-ledger-module-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.sprint-scope-events {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.sprint-scope-event {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-container-high);
  border-radius: 6px;
  font-size: var(--text-md);
  color: var(--on-surface);
}

.sprint-scope-event-date {
  color: var(--text-muted);
  font-size: var(--text-sm);
  min-width: 72px;
}

.sprint-scope-event-title {
  font-weight: 500;
}

.sprint-scope-event-verb {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================================
   KD-279: KanbangEditor (Milkdown) styles
   ============================================================ */

.kb-editor-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 120px;
}

.kb-editor-modebar {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--white-overlay);
}

.kb-mode-btn {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-dim);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.kb-mode-btn:hover {
  color: var(--on-surface-variant);
}

.kb-mode-btn.active {
  color: var(--on-surface-variant);
  border-bottom-color: var(--primary-container);
}

/* KD-579: subtle indicator that a tab has content (e.g. Release Notes is
   populated). A small dot to the right of the label — survives the
   active/inactive styling so the user can see "populated" at a glance
   without confusing it with "selected." */
.kb-mode-btn-populated::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: var(--sp-1);
  border-radius: 50%;
  background: var(--color-green);
  vertical-align: middle;
  opacity: 0.85;
}

/* KD-397: Comments / Activity pane hosted inside the editor slot. */
.kb-editor-extra-pane {
  padding-top: var(--sp-3);
  min-height: 80px;
}

/* KD-397: collapse the editor wrapper's reserved height when an extra tab
   (Comments / Activity) is active — otherwise the hidden editor area keeps
   a ~90px min-height and leaves a big gap under the tab bar. */
.kb-editor-wrapper.kb-editor-extra-active {
  min-height: 0;
  gap: 0;
}

/* KD-335: sanitization warning banner rendered above the editor area
   when the author's raw markdown contains patterns that the server-side
   sanitizer will strip on render. Informational only — does not block save. */
.kb-editor-sanitization-warning {
  background: var(--error-tint-light);
  border: 1px solid var(--error-tint-strong);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
  font-size: var(--text-md);
  color: var(--on-surface);
}

.kb-editor-sanitization-warning-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.kb-editor-sanitization-warning-title {
  font-weight: 600;
  color: var(--color-red);
}

.kb-editor-sanitization-warning-dismiss {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--text-2xl);
  line-height: 1;
  padding: 0 var(--sp-1);
  transition: color var(--transition-fast);
}

.kb-editor-sanitization-warning-dismiss:hover {
  color: var(--on-surface);
}

.kb-editor-sanitization-warning-body {
  margin-top: var(--sp-1);
  color: var(--on-surface-variant);
}

.kb-editor-sanitization-warning-body ul {
  margin: var(--sp-1) 0;
  padding-left: var(--sp-5);
  list-style: disc;
}

/* Milkdown editor area */
.kb-editor-area {
  flex: 1;
  min-height: 80px;
}

.kb-editor-area .milkdown {
  outline: none;
}

.kb-editor-area .ProseMirror {
  outline: none;
  padding: var(--sp-4) 0;
  min-height: 80px;
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--on-surface-variant);
}

.kb-editor-area .ProseMirror p {
  margin: 0 0 var(--sp-2) 0;
}

.kb-editor-area .ProseMirror p:last-child {
  margin-bottom: 0;
}

.kb-editor-area .ProseMirror h1 {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--on-surface);
  margin: var(--sp-6) 0 var(--sp-3) 0;
  padding-bottom: var(--sp-2);
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--white-overlay);
}

.kb-editor-area .ProseMirror h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--on-surface);
  margin: var(--sp-5) 0 var(--sp-2) 0;
}

.kb-editor-area .ProseMirror h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--on-surface);
  margin: var(--sp-4) 0 var(--sp-2) 0;
}

.kb-editor-area .ProseMirror h4 {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--on-surface);
  margin: var(--sp-3) 0 var(--sp-2) 0;
}

.kb-editor-area .ProseMirror h1:first-child,
.kb-editor-area .ProseMirror h2:first-child,
.kb-editor-area .ProseMirror h3:first-child {
  margin-top: 0;
}

.kb-editor-area .ProseMirror ul,
.kb-editor-area .ProseMirror ol {
  padding-left: var(--sp-6);
  margin: 0 0 var(--sp-2) 0;
}

.kb-editor-area .ProseMirror ul { list-style-type: disc; }
.kb-editor-area .ProseMirror ol { list-style-type: decimal; }
.kb-editor-area .ProseMirror ul ul { list-style-type: circle; }
.kb-editor-area .ProseMirror ul ul ul { list-style-type: square; }

.kb-editor-area .ProseMirror li {
  margin-bottom: var(--sp-1);
}

.kb-editor-area .ProseMirror li[data-checked="true"],
.kb-editor-area .ProseMirror li[data-checked="false"] {
  list-style: none;
  margin-left: calc(-1 * var(--sp-5));
  padding-left: var(--sp-5);
  position: relative;
  cursor: pointer;
}

.kb-editor-area .ProseMirror li[data-checked]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--outline-variant);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
}

.kb-editor-area .ProseMirror li[data-checked="true"]::before {
  background: var(--color-green);
  border-color: var(--color-green);
}

.kb-editor-area .ProseMirror li[data-checked="true"]::after {
  content: '';
  position: absolute;
  left: 4px;
  top: calc(0.3em + 2px);
  width: 5px;
  height: 8px;
  border-right: 2.5px solid #1a1a2e;
  border-bottom: 2.5px solid #1a1a2e;
  transform: rotate(45deg);
  pointer-events: none;
}

.kb-editor-area .ProseMirror li[data-checked="true"] > * {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Hide any native checkbox inputs Milkdown might inject */
.kb-editor-area .ProseMirror li[data-checked] > input[type="checkbox"] {
  display: none;
}

.kb-editor-area .ProseMirror blockquote {
  border-left: 3px solid var(--primary);
  padding-left: var(--sp-4);
  margin: var(--sp-2) 0;
  color: var(--on-surface-variant);
}

.kb-editor-area .ProseMirror code {
  background: var(--surface-container-high);
  padding: 1px var(--sp-1);
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  font-family: 'JetBrains Mono', monospace;
}

.kb-editor-area .ProseMirror pre {
  background: var(--surface-container-high);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  margin: var(--sp-2) 0;
  overflow-x: auto;
}

.kb-editor-area .ProseMirror pre code {
  background: none;
  padding: 0;
  font-size: var(--text-sm);
}

.kb-editor-area .ProseMirror hr {
  border: none;
  border-top: 1px solid var(--outline-variant);
  margin: var(--sp-5) 0;
}

.kb-editor-area .ProseMirror img {
  max-width: 100%;
  border-radius: var(--radius-sm);
  margin: var(--sp-2) 0;
}

.kb-editor-area .ProseMirror a {
  color: var(--text-primary);
  text-decoration: underline;
  /* KD-393: show a pointer inside the contenteditable surface so links
     read as clickable targets rather than just caret-landing spots. */
  cursor: pointer;
}

.kb-editor-area .ProseMirror table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--sp-3) 0;
}

.kb-editor-area .ProseMirror th,
.kb-editor-area .ProseMirror td {
  border: 1px solid var(--border);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  font-size: var(--text-sm);
}

.kb-editor-area .ProseMirror th {
  background: var(--surface-container);
  font-weight: 600;
}

.kb-editor-area .ProseMirror .tableWrapper {
  overflow-x: auto;
}

/* Placeholder */
.kb-editor-area .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--text-dim);
  pointer-events: none;
  float: left;
  height: 0;
}

/* Markdown source tab */
.kb-editor-md-source {
  width: 100%;
  min-height: 200px;
  resize: vertical;
  background: var(--surface-container-low);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--on-surface);
  outline: none;
  transition: border-color var(--transition-fast);
}

.kb-editor-md-source:focus {
  border-color: var(--primary);
}

/* Upload placeholder with blob preview while a screenshot uploads */
.kb-upload-placeholder {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-2) 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  background: var(--surface-container-low);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  animation: kb-upload-fade-in var(--transition-fast) ease-out;
}

.kb-upload-preview-wrap {
  position: relative;
  flex-shrink: 0;
  max-width: 120px;
  max-height: 80px;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.kb-upload-preview-img {
  display: block;
  max-width: 120px;
  max-height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.kb-upload-preview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white-overlay);
  border-radius: var(--radius-sm);
}

.kb-upload-preview-label {
  flex: 1;
  min-width: 0;
}

.kb-upload-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: kb-spin 0.6s linear infinite;
}

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

@keyframes kb-upload-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Image resize + delete NodeView in ProseMirror editor */
.kb-img-resize-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: var(--sp-2) 0;
}

.kb-img-resize-wrap img {
  display: block;
  max-width: 100%;
  border-radius: var(--radius-sm);
}

.kb-img-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  opacity: 0;
  background: linear-gradient(135deg, transparent 50%, var(--white-overlay-medium) 50%);
  transition: opacity var(--transition-fast);
}

.kb-img-resize-wrap:hover .kb-img-resize-handle {
  opacity: 1;
}

.kb-img-resize-handle:hover {
  background: linear-gradient(135deg, transparent 50%, var(--white-overlay-strong) 50%);
}

.kb-img-resize-wrap.resizing {
  user-select: none;
  outline: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

.kb-img-delete-btn {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface-container);
  color: var(--color-red);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

.kb-img-resize-wrap:hover .kb-img-delete-btn {
  opacity: 0.8;
}

.kb-img-resize-wrap:hover .kb-img-delete-btn:hover {
  opacity: 1;
  background: var(--error-tint-subtle);
}

.kb-img-error img {
  opacity: 0.3;
}

/* Slash menu */
.kb-slash-menu {
  position: absolute;
  z-index: 100;
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-1);
  min-width: 180px;
  max-height: 280px;
  overflow-y: auto;
}

.kb-slash-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--on-surface);
  transition: background var(--transition-fast);
}

.kb-slash-item:hover,
.kb-slash-item.active {
  background: var(--white-overlay-subtle);
}

.kb-slash-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  background: var(--surface-container-high);
  color: var(--text-muted);
}

/* KD-413: @-mention autocomplete popover + chip styling in the editor */
.kb-mention-menu {
  position: absolute;
  z-index: 100;
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-1);
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
}

.kb-mention-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--on-surface);
  transition: background var(--transition-fast);
}

.kb-mention-item:hover,
.kb-mention-item.active {
  background: var(--white-overlay-subtle);
}

.kb-mention-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-container-high);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  flex-shrink: 0;
}

.kb-mention-name {
  font-size: var(--text-md);
  color: var(--on-surface);
}

/* Mention chip — link marks with a user: href inside the editor and in the
   rendered content surface. Inline pill, keeps line-height intact. */
.kb-editor-area a[href^="user:"],
.markdown-body a[href^="user:"],
.mention-chip {
  display: inline-block;
  padding: 0 var(--sp-1);
  border-radius: var(--radius-xs);
  background: var(--primary-tint-subtle);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.kb-editor-area a[href^="user:"]:hover,
.markdown-body a[href^="user:"]:hover,
.mention-chip:hover {
  background: var(--primary-tint);
  text-decoration: none;
}

.mention-chip.mention-chip-inactive {
  background: var(--white-overlay-subtle);
  color: var(--text-muted);
  cursor: default;
}

/* Floating tooltip */
.kb-tooltip {
  position: absolute;
  z-index: 100;
  display: flex;
  gap: 2px;
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--sp-1);
}

.kb-tooltip-btn {
  background: none;
  border: none;
  color: var(--on-surface);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background var(--transition-fast);
}

.kb-tooltip-btn:hover {
  background: var(--white-overlay-subtle);
}

.kb-tooltip-btn code {
  font-size: var(--text-xs);
  font-family: 'JetBrains Mono', monospace;
}

/* Table right-click context menu */
.kb-table-context {
  position: absolute;
  z-index: 200;
  background: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-1);
  min-width: 160px;
}

.kb-table-ctx-item {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  color: var(--on-surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.kb-table-ctx-item:hover {
  background: var(--white-overlay-subtle);
}

.kb-table-ctx-danger {
  color: var(--color-red);
}

.kb-table-ctx-danger:hover {
  background: var(--error-tint-subtle);
}

.kb-table-ctx-sep {
  height: 1px;
  background: var(--border);
  margin: var(--sp-1) 0;
}

/* Hidden utility */
.kb-editor-wrapper .hidden {
  display: none;
}

/* === Help View (KD-370) === */
.help-page {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4);
}
.help-title {
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: var(--sp-1);
}
.help-subtitle {
  font-size: var(--text-lg);
  color: var(--text-muted);
  margin-bottom: var(--sp-6);
}
.help-section {
  margin-bottom: var(--sp-6);
}
.help-section-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.help-card {
  background: var(--surface-container-low);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.help-card h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.help-card p {
  font-size: var(--text-md);
  color: var(--on-surface-variant);
  line-height: 1.6;
  margin-bottom: var(--sp-2);
}
.help-card p:last-child {
  margin-bottom: 0;
}
.help-card ul {
  margin: var(--sp-2) 0;
  padding-left: var(--sp-4);
}
.help-card li {
  font-size: var(--text-md);
  color: var(--on-surface-variant);
  line-height: 1.6;
  margin-bottom: var(--sp-1);
}
.help-card code {
  background: var(--surface-container-high);
  padding: 1px var(--sp-1);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.help-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
}
.help-workflow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin: var(--sp-3) 0;
}
.help-workflow-step {
  background: var(--surface-container-high);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--on-surface);
}
.help-workflow-arrow {
  color: var(--text-dim);
  display: flex;
  align-items: center;
}
.help-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-2);
}
.help-shortcut {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-md);
  color: var(--on-surface-variant);
}
.help-code {
  background: var(--surface-container-high);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  overflow-x: auto;
  margin: var(--sp-2) 0;
}
.help-code code {
  background: none;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--on-surface-variant);
  white-space: pre;
}

/* === KD-255: Duplicate suggester dropdown === */
.dup-suggest {
  position: fixed;
  z-index: 9500;
  background: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-1) 0;
  max-height: 280px;
  overflow-y: auto;
}
.dup-suggest-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
}
.dup-suggest-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  color: var(--on-surface);
  font-size: var(--text-md);
  transition: background var(--transition-fast);
}
.dup-suggest-item:hover,
.dup-suggest-item.active {
  background: var(--white-overlay);
}
.dup-suggest-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-sm);
  color: var(--text-muted);
  flex-shrink: 0;
}
.dup-suggest-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--on-surface);
}
.dup-suggest-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.dup-suggest-status {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px var(--sp-1);
  border-radius: var(--radius-sm);
  background: var(--surface-container);
  color: var(--on-surface-variant);
}
.dup-suggest-status-inbox    { background: var(--primary-tint-low, rgba(173,198,255,0.14)); color: var(--primary); }
.dup-suggest-status-backlog  { background: var(--surface-container-highest); color: var(--on-surface-variant); }
.dup-suggest-status-spec     { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; }
.dup-suggest-status-in-progress { background: rgba(59, 130, 246, 0.18); color: var(--primary); }
.dup-suggest-status-testing  { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }
.dup-suggest-status-deployed { background: rgba(16, 185, 129, 0.18); color: #34d399; }
.dup-suggest-module {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* === KD-321: Cookies & Storage consent banner === */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: var(--sp-4);
  transform: translateX(-50%);
  z-index: 9000;
  width: min(720px, calc(100vw - var(--sp-8)));
  background: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4) var(--sp-5);
  color: var(--on-surface);
  animation: cookie-banner-in var(--transition-normal) ease-out;
}
@keyframes cookie-banner-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.cookie-banner-text { flex: 1 1 320px; min-width: 0; }
.cookie-banner-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--sp-1);
  color: var(--on-surface);
}
.cookie-banner-body {
  font-size: var(--text-md);
  color: var(--on-surface-variant);
  line-height: 1.5;
}
.cookie-banner-link {
  color: var(--primary);
  text-decoration: underline;
}
.cookie-banner-link:hover { color: var(--primary-container); }
.cookie-banner-actions {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* === KD-321: Legal / disclosure pages === */
.legal-page {
  background: var(--background);
  color: var(--on-surface);
  min-height: 100vh;
  font-family: inherit;
}
.legal-container {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-5);
}
.legal-back {
  display: inline-block;
  margin-bottom: var(--sp-5);
  color: var(--on-surface-variant);
  font-size: var(--text-md);
  text-decoration: none;
}
.legal-back:hover { color: var(--primary); }
.legal-container h1 {
  font-size: var(--text-7xl);
  font-weight: 700;
  margin-bottom: var(--sp-2);
}
.legal-container h2 {
  font-size: var(--text-4xl);
  font-weight: 600;
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
  color: var(--on-surface);
}
.legal-container p {
  color: var(--on-surface-variant);
  margin-bottom: var(--sp-3);
  line-height: 1.6;
}
.legal-container a {
  color: var(--primary);
  text-decoration: underline;
}
.legal-subtitle {
  font-size: var(--text-lg);
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}
.legal-meta {
  font-size: var(--text-sm);
  color: var(--text-dim);
  margin-top: var(--sp-4);
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-3) 0 var(--sp-5);
  font-size: var(--text-md);
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--outline-variant);
  vertical-align: top;
}
.legal-table th {
  font-weight: 600;
  color: var(--on-surface);
  background: var(--surface-container);
}
.legal-table td code {
  background: var(--surface-container-high);
  border-radius: var(--radius-sm);
  padding: 2px var(--sp-1);
  font-size: var(--text-sm);
  color: var(--on-surface);
}

/* KD-406 — org dashboard heatmap ------------------------------------------ */

:root {
  --heatmap-empty: var(--surface-container-low);
  --heatmap-0: rgba(74, 222, 128, 0.14);
  --heatmap-1: rgba(74, 222, 128, 0.28);
  --heatmap-2: rgba(74, 222, 128, 0.46);
  --heatmap-3: rgba(74, 222, 128, 0.66);
  --heatmap-4: rgba(74, 222, 128, 0.88);

  /* KD-488 chart-spec ramps — blue (weekdays), yellow (weekends), green
     (daily cost strip). See docs/chart-spec for the reference mockup. */
  --ramp-empty: #1a1a1c;
  --ramp-b1: #1d2a3d;
  --ramp-b2: #25426b;
  --ramp-b3: #2d5a99;
  --ramp-b4: #3a79c8;
  --ramp-b5: #5095f0;
  --ramp-b6: #7eb1ff;
  --ramp-y1: #2a2515;
  --ramp-y2: #4a3d12;
  --ramp-y3: #7a6410;
  --ramp-y4: #b5900e;
  --ramp-y5: #e8b81f;
  --ramp-y6: #f5d44a;
  --ramp-g1: #12301f;
  --ramp-g2: #1e5037;
  --ramp-g3: #2a7d52;
  --ramp-g4: #38ae6c;
  --ramp-g5: #4fd788;
  --ramp-orange: #e87a3c;
  --ramp-yellow: #f0c53a;
  --ramp-red: #e86060;
}

.org-dashboard-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}
.org-dashboard-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: var(--white-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  color: var(--text-dim);
}
.org-dashboard-empty-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--on-surface);
  margin-bottom: var(--sp-3);
}
.org-dashboard-empty-copy {
  max-width: 320px;
  line-height: 1.6;
  margin-bottom: var(--sp-8);
}
.org-dashboard-empty-btn {
  padding: 0 var(--sp-5);
  height: 38px;
}

.org-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.org-dashboard-header-left {
  min-width: 0;
}
.org-dashboard-header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.org-dashboard-title-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.org-dashboard-title {
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--on-surface);
}
.org-dashboard-subtitle {
  font-size: var(--text-sm);
  color: var(--text-dim);
  margin-top: var(--sp-2);
}

/* Tiny info affordance next to the title. Click/hover/focus reveals a
   short explainer popover — purely CSS-driven, pointer-accessible on
   hover and keyboard-accessible via :focus-within. */
.org-dashboard-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  color: var(--text-dim);
  cursor: help;
  outline: none;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.org-dashboard-info:hover,
.org-dashboard-info:focus-visible {
  color: var(--on-surface);
  background: var(--white-overlay);
}
.org-dashboard-info-popover {
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: 320px;
  max-width: calc(100vw - var(--sp-6));
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 40;
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal),
    visibility 0s linear var(--transition-normal);
}
.org-dashboard-info:hover .org-dashboard-info-popover,
.org-dashboard-info:focus-within .org-dashboard-info-popover,
.org-dashboard-info:focus-visible .org-dashboard-info-popover {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal),
    visibility 0s;
}
.org-dashboard-info-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: var(--sp-2);
}
.org-dashboard-info-body p {
  font-size: var(--text-sm);
  color: var(--on-surface-variant);
  line-height: 1.5;
  margin: 0 0 var(--sp-2) 0;
}
.org-dashboard-info-body p:last-child {
  margin-bottom: 0;
}
.org-dashboard-info-body strong {
  color: var(--on-surface);
  font-weight: 600;
}
.org-dashboard-info-why {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--outline-variant);
  font-size: var(--text-sm);
  color: var(--on-surface-variant);
  line-height: 1.5;
}
.org-dashboard-info-why strong {
  color: var(--color-primary);
  font-weight: 600;
}

.org-heatmap-range {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  padding: var(--sp-1);
}
.org-heatmap-range button {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.org-heatmap-range button:hover {
  color: var(--on-surface);
  background: var(--white-overlay);
}
.org-heatmap-range button.active {
  color: var(--primary);
  background: var(--primary-tint-light);
  border-color: var(--primary-border);
}

.org-heatmap-section {
  position: relative;
}

/* KD-488 v2 layout: full-width rows, no left row-label column. Header
   strip shows "Daily cost · peak $X" on the left, project badge on the
   right. Below: bars → date ticks → single aggregate green heat strip
   → legend. */
.org-heatmap-v2 .org-heatmap-chart {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.org-heatmap-v2 .org-heatmap-chart-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-md);
}
.org-heatmap-chart-title {
  color: var(--on-surface);
  font-weight: 500;
}
.org-heatmap-chart-subtitle {
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.org-heatmap-chart-subtitle strong {
  color: var(--on-surface);
  font-weight: 500;
}
.org-heatmap-chart-spacer {
  flex: 1 1 auto;
}
.org-heatmap-project-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
}
.org-heatmap-project-name {
  color: var(--on-surface);
  font-weight: 500;
}
.org-heatmap-project-totals {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
/* v2: strip spans the full chart width with no left label column. */
.org-heatmap-v2 .org-heatmap-strip {
  display: grid;
  grid-template-columns: repeat(var(--org-heatmap-days), 1fr);
  gap: 2px;
  height: 120px;
  align-items: end;
}
.org-heatmap-v2 .org-heatmap-months {
  display: grid;
  grid-template-columns: repeat(var(--org-heatmap-days), 1fr);
  gap: 2px;
  position: relative;
  min-height: 18px;
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.org-heatmap-agg-strip {
  display: grid;
  grid-template-columns: repeat(var(--org-heatmap-days), 1fr);
  gap: 2px;
  height: 18px;
}
.org-heatmap-agg-cell {
  cursor: pointer;
  border-radius: 2px;
}

/* KD-488: user-filter select in the org dashboard header. */
.org-user-filter {
  height: 32px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-full);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  color: var(--on-surface);
  font-size: var(--text-sm);
  cursor: pointer;
  max-width: 220px;
}
.org-user-filter:hover {
  background: var(--surface-container-high);
}
.org-user-filter:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* KD-488: insight cards stacked below the heatmap (week delta, model mix,
   cost-per-task, punchcard). Shared chrome keeps the page consistent. */
.org-insight-card {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
}
.org-insight-header {
  margin-bottom: var(--sp-4);
}
.org-insight-title-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.org-insight-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--on-surface);
  letter-spacing: -0.02em;
}

/* KD-488: hour-of-week punchcard. 7x24 grid of bubbles whose area scales
   with spend. Two styles per cell: default blue, weekend coral (matches
   the heatmap's weekend recolor). */
.org-punchcard {
  width: 100%;
  overflow-x: auto;
}
.org-punchcard-grid {
  display: grid;
  grid-template-columns: 48px repeat(24, minmax(22px, 1fr));
  grid-auto-rows: 28px;
  gap: 2px;
  min-width: 600px;
}
.org-punchcard-col-header,
.org-punchcard-row-label {
  font-size: var(--text-xs);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.org-punchcard-row-label {
  justify-content: flex-start;
  padding-right: var(--sp-2);
  color: var(--text-muted);
  font-weight: 500;
}
.org-punchcard-col-header.is-tick {
  color: var(--text-muted);
}
.org-punchcard-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: default;
  transition: background var(--transition-fast);
}
.org-punchcard-cell.is-empty {
  background: transparent;
}
.org-punchcard-cell:not(.is-empty):hover {
  background: var(--white-overlay);
}
.org-punchcard-bubble {
  display: block;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-primary) 60%, transparent);
}
.org-punchcard-cell.is-weekend .org-punchcard-bubble {
  background: var(--color-amber);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-amber) 60%, transparent);
}
.org-punchcard-footer {
  margin-top: var(--sp-3);
  text-align: right;
  font-size: var(--text-xs);
}

/* KD-488: org-level chart hosts share the project tokens-chart-host sizing
   so Chart.js canvases get a predictable height. */
.org-insight-card .tokens-chart-host {
  height: 240px;
  position: relative;
}
.org-insight-card .tokens-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--on-surface-variant);
}

/* KD-488 chart-spec: cost-per-shipped-task card layout.
   KPI strip on top, big chart area in the middle, footer below. */
.org-cpt-kpis {
  display: flex;
  gap: var(--sp-8);
  margin-bottom: var(--sp-4);
}
.org-cpt-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.org-cpt-kpi-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.org-cpt-kpi-value {
  font-size: var(--text-4xl);
  font-weight: 600;
  color: var(--on-surface);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.org-cpt-kpi-value.is-up    { color: var(--ramp-red); }
.org-cpt-kpi-value.is-down  { color: var(--color-green); }
.org-cpt-kpi-value.is-flat  { color: var(--on-surface); }
.org-cpt-chart-wrap {
  position: relative;
  height: 260px;
  margin-bottom: var(--sp-2);
}
.org-cpt-footer {
  text-align: right;
  font-size: var(--text-xs);
}
/* Legend sits in the card header next to the title, right-aligned. */
.org-cpt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.org-cpt-legend {
  margin-top: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  gap: var(--sp-2) var(--sp-4);
}
.org-cpt-legend .tokens-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 10px;
}

/* KD-488 chart-spec: punchcard — filled-grid heatmap with row totals.
   Grid columns: [day-label | cells | row-total bar]. Cells use 6-step
   blue ramp on weekdays, 6-step yellow ramp on weekends. */
.org-punchcard-grid-new {
  display: grid;
  grid-template-columns: 48px 1fr 72px;
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
}
.org-pc-hours {
  position: relative;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 3px;
}
.org-pc-hour-label {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
}
.org-pc-row-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: right;
}
.org-pc-row-label.is-weekend {
  color: var(--ramp-yellow);
}
.org-pc-cells {
  position: relative;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 3px;
  height: 24px;
}
.org-pc-cell {
  height: 24px;
  border-radius: 3px;
  background: var(--ramp-empty);
  transition: transform var(--transition-fast);
}
.org-pc-cell:hover {
  transform: scale(1.08);
  outline: 1px solid var(--on-surface);
  outline-offset: 1px;
}
.org-pc-cell[data-weekend="0"][data-bucket="0"] { background: var(--ramp-b1); }
.org-pc-cell[data-weekend="0"][data-bucket="1"] { background: var(--ramp-b2); }
.org-pc-cell[data-weekend="0"][data-bucket="2"] { background: var(--ramp-b3); }
.org-pc-cell[data-weekend="0"][data-bucket="3"] { background: var(--ramp-b4); }
.org-pc-cell[data-weekend="0"][data-bucket="4"] { background: var(--ramp-b5); }
.org-pc-cell[data-weekend="0"][data-bucket="5"] { background: var(--ramp-b6); }
.org-pc-cell[data-weekend="1"][data-bucket="0"] { background: var(--ramp-y1); }
.org-pc-cell[data-weekend="1"][data-bucket="1"] { background: var(--ramp-y2); }
.org-pc-cell[data-weekend="1"][data-bucket="2"] { background: var(--ramp-y3); }
.org-pc-cell[data-weekend="1"][data-bucket="3"] { background: var(--ramp-y4); }
.org-pc-cell[data-weekend="1"][data-bucket="4"] { background: var(--ramp-y5); }
.org-pc-cell[data-weekend="1"][data-bucket="5"] { background: var(--ramp-y6); }
.org-pc-now {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1px;
  border-left: 1px dashed var(--outline-variant);
  pointer-events: none;
}
.org-pc-row-total {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--surface-container);
  overflow: hidden;
}
.org-pc-row-total-bar {
  display: block;
  height: 100%;
  background: var(--ramp-b5);
  opacity: 0.85;
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
}
.org-pc-row-total-bar.is-weekend {
  background: var(--ramp-yellow);
}
.org-pc-legend {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--text-xs);
}
.org-pc-legend-swatches {
  display: inline-flex;
  gap: 3px;
}
.org-pc-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 12px;
  border-radius: 2px;
}
.org-pc-legend-swatch[data-bucket="0"] { background: var(--ramp-b1); }
.org-pc-legend-swatch[data-bucket="1"] { background: var(--ramp-b2); }
.org-pc-legend-swatch[data-bucket="2"] { background: var(--ramp-b3); }
.org-pc-legend-swatch[data-bucket="3"] { background: var(--ramp-b4); }
.org-pc-legend-swatch[data-bucket="4"] { background: var(--ramp-b5); }
.org-pc-legend-swatch[data-bucket="5"] { background: var(--ramp-b6); }
.org-pc-legend-swatch.is-weekend-sample { background: var(--ramp-y4); }
.org-pc-legend-sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--outline-variant);
  margin: 0 var(--sp-2);
}

/* KD-562: 24 × 60 hour-by-day heatmap. Reuses the punchcard's blue/yellow
   ramp (var(--ramp-b*), var(--ramp-y*)) via data-bucket/data-weekend, so the
   two charts read as one design. First column is the hour row label, top
   row is a sparse month-start label strip. */
.org-hour-by-day {
  width: 100%;
  overflow-x: auto;
}
.org-hbd-grid {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 2px var(--sp-2);
  align-items: center;
  min-width: 720px;
}
.org-hbd-col-headers {
  display: grid;
  gap: 2px;
  height: 18px;
  position: relative;
}
.org-hbd-col-header {
  font-size: var(--text-2xs);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
  align-self: end;
  line-height: 1;
  text-align: left;
  padding-left: 1px;
}
.org-hbd-col-header.is-tick {
  color: var(--on-surface-variant);
  font-weight: 500;
}
/* Weekly Monday label — lighter than month-start, so the month boundary
   still reads as the primary tick but the axis never goes more than 6
   columns without a date. */
.org-hbd-col-header.is-weekly {
  color: var(--text-dim);
  font-weight: 400;
}
.org-hbd-row-label {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: var(--text-2xs);
  color: var(--text-dim);
  text-align: right;
  padding-right: var(--sp-1);
  font-variant-numeric: tabular-nums;
}
/* Every 3 hours (12a / 3a / 6a / 9a / noon / 3p / 6p / 9p) gets a
   stronger color so morning/afternoon/evening bands are skimmable
   without reading every row. */
.org-hbd-row-label.is-tick {
  color: var(--text-muted);
  font-weight: 500;
}
/* Thin guide rule above tick rows so the 3-hour bands are visually
   separated without chart chrome becoming noisy. */
.org-hbd-cells.is-tick {
  box-shadow: inset 0 1px 0 0 var(--white-overlay);
}
.org-hbd-cells {
  display: grid;
  gap: 2px;
  height: 12px;
}
.org-hbd-cell {
  height: 12px;
  border-radius: 2px;
  background: var(--ramp-empty);
  transition: transform var(--transition-fast);
}
.org-hbd-cell.is-empty[data-weekend="1"] {
  background: color-mix(in oklch, var(--ramp-yellow) 10%, transparent);
}
.org-hbd-cell:not(.is-empty):hover {
  transform: scale(1.35);
  outline: 1px solid var(--on-surface);
  outline-offset: 1px;
  z-index: 1;
  position: relative;
}
.org-hbd-cell[data-weekend="0"][data-bucket="0"] { background: var(--ramp-b1); }
.org-hbd-cell[data-weekend="0"][data-bucket="1"] { background: var(--ramp-b2); }
.org-hbd-cell[data-weekend="0"][data-bucket="2"] { background: var(--ramp-b3); }
.org-hbd-cell[data-weekend="0"][data-bucket="3"] { background: var(--ramp-b4); }
.org-hbd-cell[data-weekend="0"][data-bucket="4"] { background: var(--ramp-b5); }
.org-hbd-cell[data-weekend="0"][data-bucket="5"] { background: var(--ramp-b6); }
.org-hbd-cell[data-weekend="1"][data-bucket="0"] { background: var(--ramp-y1); }
.org-hbd-cell[data-weekend="1"][data-bucket="1"] { background: var(--ramp-y2); }
.org-hbd-cell[data-weekend="1"][data-bucket="2"] { background: var(--ramp-y3); }
.org-hbd-cell[data-weekend="1"][data-bucket="3"] { background: var(--ramp-y4); }
.org-hbd-cell[data-weekend="1"][data-bucket="4"] { background: var(--ramp-y5); }
.org-hbd-cell[data-weekend="1"][data-bucket="5"] { background: var(--ramp-y6); }

/* KD-562: transposed companion — hours horizontal, days vertical. Reuses
   .org-hbd-cell cell colors/ramps from above, just a different grid
   frame so rows are days and columns are hours. */
.org-hour-by-day-t { width: 100%; overflow-x: auto; }
.org-hbd-t-grid {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 2px var(--sp-2);
  align-items: center;
  min-width: 360px;
}
.org-hbd-t-col-headers {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  height: 16px;
}
.org-hbd-t-col-header {
  font-family: var(--mono, ui-monospace, Menlo, monospace);
  font-size: var(--text-2xs);
  color: var(--text-dim);
  text-align: center;
  line-height: 1;
  align-self: end;
  font-variant-numeric: tabular-nums;
}
.org-hbd-t-col-header.is-tick {
  color: var(--text-muted);
  font-weight: 500;
}
.org-hbd-t-row-label {
  font-size: var(--text-2xs);
  color: var(--text-dim);
  text-align: right;
  padding-right: var(--sp-1);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.org-hbd-t-row-label.is-tick {
  color: var(--on-surface-variant);
  font-weight: 500;
}
.org-hbd-t-row-label.is-weekly {
  color: var(--text-dim);
}
.org-hbd-t-row-label.is-weekend {
  color: var(--ramp-yellow);
  opacity: 0.7;
}
.org-hbd-t-cells {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  height: 10px;
}
.org-hbd-t-cells .org-hbd-cell {
  height: 10px;
}
/* Cells need position:relative so the ::after overlay below anchors
   correctly without clobbering the bucket background. */
.org-hbd-cell {
  position: relative;
}
.org-hbd-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: transparent;
  transition: background var(--transition-fast);
}
/* Current (now) cell: outlined so the eye can immediately find "right now". */
.org-hbd-cell.is-now {
  outline: 1.5px solid var(--on-surface);
  outline-offset: 1px;
  border-radius: 2px;
  z-index: 3;
}

.org-heatmap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: var(--surface-1);
  border: 1px solid var(--white-overlay);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}

.org-heatmap-summary {
  display: flex;
  gap: var(--sp-8);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--outline-variant);
}
.org-heatmap-summary-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.org-heatmap-summary-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.org-heatmap-summary-value {
  font-size: var(--text-2xl);
  color: var(--on-surface);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.org-heatmap-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-4);
  align-items: center;
}
.org-heatmap-row-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  cursor: pointer;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.org-heatmap-row-label:hover {
  background: var(--white-overlay);
}
.org-heatmap-row-label-strip {
  cursor: default;
}
.org-heatmap-row-label-strip:hover {
  background: transparent;
}
.org-heatmap-row-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  display: inline-block;
}
.org-heatmap-row-name {
  font-size: var(--text-md);
  color: var(--on-surface);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.org-heatmap-row-totals {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.org-heatmap-row-strip {
  align-items: stretch;
  height: 72px;
}
.org-heatmap-strip {
  display: grid;
  grid-template-columns: repeat(var(--org-heatmap-days), 1fr);
  gap: 2px;
  align-items: end;
  height: 100%;
  padding: var(--sp-1) 0;
}
.org-heatmap-strip-col {
  display: flex;
  flex-direction: column-reverse;
  min-height: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}
.org-heatmap-strip-col:hover {
  opacity: 0.85;
}
.org-heatmap-strip-seg {
  display: block;
  width: 100%;
  flex-shrink: 0;
}

.org-heatmap-months-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-4);
  align-items: center;
  height: 18px;
}
.org-heatmap-months {
  position: relative;
  height: 100%;
}
.org-heatmap-month-tick {
  position: absolute;
  top: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  transform: translateX(-50%);
  white-space: nowrap;
}

.org-heatmap-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.org-heatmap-cells {
  display: grid;
  grid-template-columns: repeat(var(--org-heatmap-days), 1fr);
  gap: 2px;
  height: 18px;
}
.org-heatmap-cell {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: var(--heatmap-empty);
  cursor: pointer;
  transition: outline-color var(--transition-fast);
  outline: 1px solid transparent;
  outline-offset: 0;
}
.org-heatmap-cell[data-bucket="0"] { background: var(--heatmap-0); }
.org-heatmap-cell[data-bucket="1"] { background: var(--heatmap-1); }
.org-heatmap-cell[data-bucket="2"] { background: var(--heatmap-2); }
.org-heatmap-cell[data-bucket="3"] { background: var(--heatmap-3); }
.org-heatmap-cell[data-bucket="4"] { background: var(--heatmap-4); }
.org-heatmap-cell:hover {
  outline-color: var(--on-surface);
}

/* Weekend swim lanes — an absolute-positioned layer behind the strip
   and matrix rows paints a subtle amber vertical band across every
   Sat/Sun column so the weekend rhythm reads from top to bottom. Empty
   cells on weekends drop their opaque background so the lane shines
   through; active cells keep their bucket color and punch through the
   lane (the band is still visible in the neighboring rows/strip). */
.org-heatmap-matrix {
  position: relative;
}
.org-heatmap-swim-lanes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-4);
  pointer-events: none;
  z-index: 0;
}
.org-heatmap-swim-lanes-spacer {
  /* Empty cell in the grid to skip the row-label column. */
}
.org-heatmap-swim-lanes-bands {
  display: grid;
  grid-template-columns: repeat(var(--org-heatmap-days), 1fr);
  gap: 2px;
}
.org-heatmap-lane {
  background: transparent;
}
.org-heatmap-lane.is-weekend {
  /* No lane tint — weekend rhythm is communicated by recoloring the daily
     cost bars themselves (see .org-heatmap-strip-col[data-dow] rules) so
     long empty stretches don't read as a striped banner. */
  background: transparent;
}
.org-heatmap-matrix > .org-heatmap-row,
.org-heatmap-matrix > .org-heatmap-months-row,
.org-heatmap-matrix > .org-heatmap-rows {
  position: relative;
  z-index: 1;
}
.org-heatmap-cell[data-dow="0"][data-bucket="-1"],
.org-heatmap-cell[data-dow="6"][data-bucket="-1"] {
  /* Let the swim lane shine through empty weekend cells. */
  background: transparent;
}
/* Weekend bars in the daily-cost strip: explicit yellow (spec token),
   matching the week-delta and punchcard weekend treatment. Today's
   orange takes precedence via .is-today.
   KD-488: inline `background:` on the seg wins over this rule unless we
   up the specificity via the attribute selector. The frontend now paints
   weekend segs with --ramp-yellow inline — this rule is a fallback for
   any future codepath that forgets. */
.org-heatmap-strip-col[data-dow="0"]:not(.is-today) .org-heatmap-strip-seg,
.org-heatmap-strip-col[data-dow="6"]:not(.is-today) .org-heatmap-strip-seg {
  background: var(--ramp-yellow) !important;
}
@media (max-width: 768px) {
  .org-heatmap-swim-lanes {
    grid-template-columns: 140px 1fr;
  }
}

.org-heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.org-heatmap-legend-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.org-heatmap-legend-cell {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  cursor: default;
}
.org-heatmap-legend-cell:hover {
  outline-color: transparent;
}

.org-heatmap-tooltip {
  position: absolute;
  z-index: 40;
  background: var(--surface-container-high);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  max-width: 320px;
  pointer-events: none;
  font-size: var(--text-sm);
  color: var(--on-surface);
}
.org-heatmap-tooltip[hidden] { display: none; }
.org-heatmap-tooltip-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.org-heatmap-tooltip-date {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
  font-weight: 500;
}
.org-heatmap-tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
  padding: 2px 0;
}
.org-heatmap-tooltip-row > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-muted);
}
.org-heatmap-tooltip-total {
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--outline-variant);
  font-weight: 600;
}
.org-heatmap-tooltip-total > span:first-child {
  color: var(--on-surface);
}

.org-heatmap-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-8);
  text-align: center;
}
.org-heatmap-empty-icon {
  color: var(--text-dim);
  margin-bottom: var(--sp-2);
}
.org-heatmap-empty-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--on-surface);
}

@media (max-width: 768px) {
  .org-heatmap-row,
  .org-heatmap-months-row {
    grid-template-columns: 140px 1fr;
  }
  .org-heatmap-summary {
    gap: var(--sp-5);
  }
}

/* KD-485 — super-admin preview of the three-layer MCP instruction system.
   Monospace blocks for Layer 1 (static SERVER_INSTRUCTIONS) + Layer 2
   (per-project get_project_context payload). Read-only. */
.admin-section-heading {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--on-surface);
  margin: var(--sp-5) 0 var(--sp-2);
}
.admin-section-heading:first-child { margin-top: 0; }

.admin-mcp-block {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.admin-mcp-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.admin-mcp-meta code {
  background: var(--white-overlay);
  padding: 0 var(--sp-1);
  border-radius: var(--radius-sm);
}

.admin-mcp-warn {
  color: var(--color-amber);
  margin-left: var(--sp-2);
}

.admin-mcp-pre {
  margin: 0;
  padding: var(--sp-3);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--on-surface);
  max-height: 480px;
  overflow: auto;
}

.admin-mcp-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.admin-mcp-controls label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.admin-mcp-controls select {
  min-width: 160px;
}

.admin-mcp-explainer {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
}
.admin-mcp-explainer-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: var(--sp-2);
}
.admin-mcp-explainer-lead {
  font-size: var(--text-md);
  color: var(--on-surface-variant);
  margin: 0 0 var(--sp-4);
  line-height: 1.5;
}
.admin-mcp-explainer-note {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: var(--sp-4) 0 0;
  line-height: 1.5;
  padding: var(--sp-3);
  background: var(--white-overlay);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
}
.admin-mcp-explainer-note code {
  background: var(--white-overlay-light);
  padding: 0 var(--sp-1);
  border-radius: var(--radius-sm);
}

.admin-mcp-flow {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.admin-mcp-flow-row {
  display: flex;
  gap: var(--sp-4);
  align-items: stretch;
  padding: var(--sp-3);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
}
.admin-mcp-flow-badge {
  flex: 0 0 auto;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  background: var(--primary-tint-subtle);
  border: 1px solid var(--primary-tint-medium);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.admin-mcp-flow-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.admin-mcp-flow-when {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.admin-mcp-flow-when code {
  background: var(--white-overlay);
  padding: 0 var(--sp-1);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}
.admin-mcp-flow-what {
  font-size: var(--text-md);
  color: var(--on-surface);
  line-height: 1.5;
}
.admin-mcp-flow-what code {
  background: var(--white-overlay);
  padding: 0 var(--sp-1);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}
.admin-mcp-flow-arrow {
  align-self: center;
  font-size: var(--text-lg);
  color: var(--text-dim);
  line-height: 1;
  padding: var(--sp-1) 0;
}

/* KD-527 — Layer 1 live editor */
.admin-mcp-source-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-sm);
  margin-right: var(--sp-2);
  text-transform: uppercase;
}
.admin-mcp-source-override {
  color: var(--color-amber);
  background: var(--white-overlay);
  border: 1px solid var(--color-amber);
}
.admin-mcp-source-default {
  color: var(--text-muted);
  background: var(--white-overlay);
  border: 1px solid var(--outline-variant);
}
.admin-mcp-editor-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin: var(--sp-2) 0;
}
.admin-mcp-editor-toolbar label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.admin-mcp-version-input {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  background: var(--surface-container);
  color: var(--on-surface);
  min-width: 280px;
}
.admin-mcp-editor {
  width: 100%;
  min-height: 320px;
  max-height: 640px;
  margin: 0;
  padding: var(--sp-3);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--on-surface);
  resize: vertical;
}
.admin-mcp-editor:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* KD-540 — Layer 3 hint preview */
.admin-mcp-rules-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.admin-mcp-rule {
  padding: var(--sp-3);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
}
.admin-mcp-rule-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
  flex-wrap: wrap;
}
.admin-mcp-rule-name {
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--on-surface);
}
.admin-mcp-rule-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--white-overlay);
  padding: 0 var(--sp-1);
  border-radius: var(--radius-sm);
}
.admin-mcp-rule-trigger {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-1);
}
.admin-mcp-rule-text {
  font-size: var(--text-sm);
  color: var(--on-surface-variant);
  font-style: italic;
  white-space: pre-wrap;
}
.admin-mcp-preview-output {
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--on-surface);
  max-height: 320px;
  overflow: auto;
}
.admin-mcp-preview-output.is-empty {
  color: var(--text-dim);
  font-style: italic;
}

/* === KD-549: Report-an-issue slide-over — mirrors #task-detail[data-mode="modal"] === */
.report-panel {
  position: fixed;
  z-index: 90;
  top: 52px;
  right: 0;
  width: min(640px, 55vw);
  height: calc(100vh - 52px);
  background: var(--background);
  border-left: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translate(0, 0);
  transition:
    transform var(--transition-normal) var(--ease-out),
    opacity var(--transition-fast) var(--ease-out);
}
.report-panel.report-panel--opening {
  transform: translate(24px, 0);
  opacity: 0;
}
.report-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--white-overlay);
  background: var(--surface-container-lowest, var(--background));
  flex-shrink: 0;
}
.report-panel__header-left {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.report-panel__badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  padding: 2px var(--sp-2);
  background: var(--primary-tint-subtle);
  border: 1px solid var(--primary-tint-light);
  border-radius: var(--radius-full);
}
.report-panel__heading {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--on-surface);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.report-panel__icon-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.report-panel__icon-btn::before {
  content: "\00d7";
  font-size: 20px;
  line-height: 1;
}
.report-panel__icon-btn:hover {
  background: var(--white-overlay);
  color: var(--on-surface);
}
.report-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.report-panel__body.is-dragging {
  background: var(--primary-tint-subtle);
  outline: 2px dashed var(--color-primary);
  outline-offset: -8px;
}
.report-panel__title-input {
  width: 100%;
  padding: var(--sp-2) 0;
  background: transparent;
  border: none;
  color: var(--on-surface);
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  outline: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}
.report-panel__title-input:focus {
  border-bottom-color: var(--outline-variant);
}
.report-panel__title-input::placeholder {
  color: var(--text-dim);
  font-weight: 600;
}
.report-panel__subtle {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 0;
  margin-top: calc(-1 * var(--sp-2));
}
.report-panel__body-textarea {
  width: 100%;
  flex: 1 1 auto;
  min-height: 320px;
  padding: var(--sp-4);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  color: var(--on-surface);
  font-family: inherit;
  font-size: var(--text-md);
  line-height: 1.65;
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.report-panel__body-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--primary-tint-subtle);
}
.report-panel__attachments {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.report-panel__attachments:empty {
  display: none;
}
.report-panel__attachment-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--on-surface-variant);
}
.report-panel__attachment-row button {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-size: var(--text-md);
  line-height: 1;
}
.report-panel__attachment-row button:hover { color: var(--color-red); }
.report-panel__error {
  color: var(--color-red);
  font-size: var(--text-sm);
  background: var(--error-tint-light, var(--white-overlay));
  border: 1px solid var(--color-red);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
}
.report-panel__footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--white-overlay);
  background: var(--surface-container-lowest, var(--background));
}
.report-panel__footer-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.report-panel__footer-hint .kbd {
  background: var(--surface-container);
  border-color: var(--outline-variant);
  color: var(--on-surface-variant);
}
.report-panel__footer-actions {
  display: flex;
  gap: var(--sp-2);
}

/* === KD-550: My tickets list view === */
.my-tickets-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5);
}
.my-tickets-header {
  margin-bottom: var(--sp-5);
}
.my-tickets-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--on-surface);
  margin: 0 0 var(--sp-2);
}
.my-tickets-subtitle {
  color: var(--text-muted);
  font-size: var(--text-md);
  margin: 0;
}
.my-tickets-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.my-tickets-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  color: var(--on-surface);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.my-tickets-row:hover {
  border-color: var(--color-primary);
  background: var(--primary-tint-light);
}
.my-tickets-row.is-unread {
  border-left: 3px solid var(--color-primary);
}
.my-tickets-row-top {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.my-tickets-row-id {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  min-width: 64px;
}
.my-tickets-row-title {
  flex: 1;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.my-tickets-row-time {
  font-size: var(--text-sm);
  color: var(--text-dim);
}
.my-tickets-row-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.my-tickets-row-replies {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.my-tickets-row-unread {
  color: var(--color-primary);
  font-weight: 600;
}
.my-tickets-status-chip {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  background: var(--white-overlay);
  color: var(--on-surface-variant);
}
.my-tickets-status-inbox { background: var(--primary-tint); color: var(--color-primary); }
.my-tickets-status-backlog { background: var(--white-overlay); }
.my-tickets-status-spec { background: var(--primary-tint-light); color: var(--color-primary); }
.my-tickets-status-in-progress { background: var(--success-tint-light, var(--white-overlay)); color: var(--color-green); }
.my-tickets-status-testing { background: var(--white-overlay-vivid); color: var(--color-amber); }
.my-tickets-status-deployed { background: var(--white-overlay); color: var(--color-green); }

/* === KD-550: Reporter-mode ticket panel === */
.reporter-ticket-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.reporter-ticket-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  margin-bottom: var(--sp-2);
}
.reporter-ticket-back:hover { color: var(--on-surface); }
.reporter-ticket-title-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.reporter-ticket-id {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--text-muted);
}
.reporter-ticket-title {
  font-size: var(--text-6xl);
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
  cursor: pointer;
}
.reporter-ticket-title:hover { color: var(--color-primary); }
.reporter-ticket-title-input {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-container);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--on-surface);
  font-size: var(--text-6xl);
  font-weight: 700;
}
.reporter-mode-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.reporter-mode-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-2);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--on-surface-variant);
}
.reporter-mode-chip--tag {
  color: var(--color-primary);
}
.reporter-ticket-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.reporter-ticket-body-view {
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  color: var(--on-surface);
  font-size: var(--text-md);
  line-height: 1.6;
}
.reporter-ticket-body-view :is(h1, h2, h3, h4) { margin-top: var(--sp-3); margin-bottom: var(--sp-1); }
.reporter-ticket-body-view :is(p, ul, ol) { margin: 0 0 var(--sp-2); }
.reporter-ticket-body-view img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.reporter-body-edit-btn { align-self: flex-start; }
.reporter-ticket-textarea {
  width: 100%;
  min-height: 240px;
  padding: var(--sp-3);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  color: var(--on-surface);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.55;
  resize: vertical;
}
.reporter-ticket-textarea:focus { outline: none; border-color: var(--color-primary); }
.reporter-ticket-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.reporter-ticket-section-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--on-surface);
  margin: 0 0 var(--sp-2);
}
.reporter-ticket-attachments {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.reporter-attachment-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--surface-container);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  color: var(--on-surface);
  text-decoration: none;
  font-size: var(--text-sm);
}
.reporter-attachment-row:hover { border-color: var(--color-primary); }
.reporter-attachment-row img {
  max-width: 96px;
  max-height: 72px;
  border-radius: var(--radius-sm);
}
.reporter-ticket-comments {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.reporter-ticket-comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.reporter-ticket-reply-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* ============================================================
   KD-604: Draw mode — standalone whiteboard app (draw.kanbang.ru)
   ============================================================ */
/* In draw mode the kanban accent tokens follow the org's brand accent so
   primary buttons/links pick it up automatically. */
body.draw-mode {
  --primary-container: var(--brand-accent);
  --color-primary: var(--brand-accent);
}
/* The shell expands to full width since the kanban sidebar is hidden. */
body.draw-mode #main-wrapper { margin-left: 0; }

#draw-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--surface-container-lowest, var(--surface));
}
.draw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface-container-low, var(--surface));
}
.draw-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.draw-logo-img { height: 28px; width: auto; border-radius: var(--radius-sm, 6px); }
.draw-logo-fallback { color: var(--brand-accent); display: inline-flex; }
.draw-brand-name {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draw-header-actions { display: flex; align-items: center; gap: var(--sp-2); }
.draw-org-switch {
  height: 32px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-container);
  color: var(--on-surface);
  font-size: var(--text-md);
}

.draw-gallery {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4);
  align-content: start;
}
.draw-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  background: var(--surface-container);
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.draw-card:hover {
  border-color: var(--brand-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.draw-card-thumb {
  aspect-ratio: 4 / 3;
  background: var(--surface-bright, var(--surface-container-high));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.draw-card-thumb img { width: 100%; height: 100%; object-fit: contain; }
.draw-card-thumb-empty { color: var(--text-dim); }
.draw-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--border);
}
.draw-card-name {
  font-size: var(--text-md);
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.draw-card-actions { display: flex; gap: var(--sp-1); flex-shrink: 0; }
.draw-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.draw-card-btn:hover { background: var(--white-overlay); color: var(--on-surface); }
.draw-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-8) 0;
}
.draw-empty-icon { color: var(--text-dim); }