/* Phorge Redesign — MoltPod-branded, Notion-inspired polish */
/* MoltPod coral/orange palette + Proxima Nova */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Surface — PRESERVED */
  --bg-page: #FFFFFF;
  --bg-secondary: #EDF2F7;
  --bg-tertiary: #D7E0EA;
  --bg-smoke: #F4F7FA;

  /* shadcn chart palette (event Analytics tab, /analytics/charts.js). Hex so
     the values resolve in SVG fills. --eva-* are the chart chrome tones. */
  --chart-1: #e76e50;
  --chart-2: #2a9d90;
  --chart-3: #274754;
  --chart-4: #e8c468;
  --chart-5: #f4a462;
  --eva-axis: #66778F;
  --eva-grid: rgba(17, 19, 25, 0.08);
  --eva-cursor: rgba(17, 19, 25, 0.045);
  --eva-other: #a8a29e;

  /* Text — PRESERVED */
  --text-primary: #111319;
  --text-secondary: #394351;
  --text-tertiary: #66778F;

  /* Accent — MoltPod coral/orange */
  --accent: #e8552e;
  --accent-hover: #c4421f;

  /* Border */
  --border: #DAE1E9;
  --border-focus: #e8552e;

  /* Sidebar — dark with MoltPod orange active */
  --sidebar-bg: #111319;
  --sidebar-text: #9AACBE;
  --sidebar-hover-bg: #1F232E;
  --sidebar-active-bg: #e8552e;
  --sidebar-active-text: #FFFFFF;
  --sidebar-border: #1F232E;
  --sidebar-label-color: #66778F;
  --sidebar-logo-color: #E6E6E6;

  /* Status — PRESERVED */
  --status-success: #1A8F5C;
  --status-running: #2BC2FF;
  --status-warning: #F5BE31;
  --status-danger: #ED2651;
  --status-review: #9E5CF7;
  --status-open: #e8552e;
  --status-closed: #66778F;

  /* Priority — PRESERVED */
  --priority-crit: #ED2651;
  --priority-high: #F08A24;
  --priority-norm: #e8552e;
  --priority-low: #66778F;
  --priority-wish: #DAE1E9;

  /* Spacing — expanded scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radii — rounder, friendlier */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 100px;

  /* Shadows — layered, softer */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.05), 0 20px 40px rgba(0,0,0,0.06);

  /* Layout */
  --sidebar-width: 260px;
  --header-height: 54px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}

/* Dark mode — PRESERVED colors */
/* ─── Animations ─── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pageReveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ─── Skeleton Loaders ─── */

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skel {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 37%, var(--bg-secondary) 63%);
  background-size: 800px 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

.skel-text {
  height: 14px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.skel-text-lg {
  height: 24px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.skel-text-sm {
  height: 10px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.skel-circle {
  border-radius: 50%;
  flex-shrink: 0;
}

.skel-rect {
  border-radius: var(--radius-md);
}

.skel-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--bg-page);
}

.skel-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 0;
}

.skel-wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

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

/* Smooth scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* ─── Layout ─── */
.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ─── Sidebar ─── */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  /* The sidebar itself no longer scrolls — only .sidebar-scroll does. This
     keeps the header pinned at the top and the agent launcher pinned at the
     bottom (a real footer, not an overlay), so nav items are never covered. */
  overflow: hidden;
  flex-shrink: 0;
}

/* Scrollable nav region between the fixed header and the agent footer.
   Scrolls with no visible scrollbar. */
.sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

.sidebar-header {
  padding: 20px 20px 16px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  animation: sidebarFadeIn 0.4s ease both;
}

/* Staggered fade-in for sidebar items */
@keyframes sidebarFadeIn {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

/* On every render after the first one in this session, kill the entry
   animation so soft-nav between pages doesn't feel like a full reload. */
.sidebar.is-loaded,
.sidebar.is-loaded *,
.sidebar.is-loaded *::before,
.sidebar.is-loaded *::after { animation: none !important; }

.sidebar-section .sidebar-item {
  animation: sidebarFadeIn 0.4s ease both;
}

/* All sidebar items fade in together — no per-item stagger. */
.sidebar-section .sidebar-item { animation-delay: 0s; }

.sidebar-divider {
  animation: sidebarFadeIn 0.4s ease 0.10s both;
}

.sidebar-tabs {
  animation: sidebarFadeIn 0.4s ease 0.14s both;
}

.sidebar-tab-content {
  animation: sidebarFadeIn 0.5s ease 0.18s both;
}

/* ─── Page entrance: header + content ───
   The sidebar paints first (rules above). The header slides in next, then
   content sections stagger in. `.page-enter` is added to #content by app.js
   for ~1.4s after the first real (non-skeleton) render of a full page load;
   soft-nav and in-page re-renders never get it, so they stay instant. */
@keyframes headerFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.main > .header { animation: headerFadeIn 0.35s ease 0.05s both; }

/* Pages with several top-level blocks in #content: stagger them directly. */
.content.page-enter > * { animation: staggerFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
.content.page-enter > :nth-child(2) { animation-delay: 0.16s; }
.content.page-enter > :nth-child(3) { animation-delay: 0.22s; }
.content.page-enter > :nth-child(4) { animation-delay: 0.28s; }
.content.page-enter > :nth-child(n+5) { animation-delay: 0.34s; }

/* The common case — a single page shell: keep the shell static and stagger
   its sections one level down instead. */
.content.page-enter > :only-child { animation: none; }
.content.page-enter > :only-child > * { animation: staggerFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
.content.page-enter > :only-child > :nth-child(2) { animation-delay: 0.16s; }
.content.page-enter > :only-child > :nth-child(3) { animation-delay: 0.22s; }
.content.page-enter > :only-child > :nth-child(4) { animation-delay: 0.28s; }
.content.page-enter > :only-child > :nth-child(5) { animation-delay: 0.34s; }
.content.page-enter > :only-child > :nth-child(6) { animation-delay: 0.40s; }
.content.page-enter > :only-child > :nth-child(n+7) { animation-delay: 0.46s; }

@media (prefers-reduced-motion: reduce) {
  .sidebar-header,
  .sidebar-section .sidebar-item,
  .sidebar-divider,
  .sidebar-tabs,
  .sidebar-tab-content,
  .main > .header,
  .content.page-enter > *,
  .content.page-enter > :only-child > * {
    animation: none !important;
  }
}

.sidebar-logo {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 28px;
  font-size: 17px;
  font-weight: 700;
  color: var(--sidebar-logo-color);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.sidebar-brand-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
}

.sidebar-logo-img {
  display: block;
  width: min(130px, 100%);
  height: auto;
  max-height: 28px;
  object-fit: contain;
  object-position: left center;
}

.sidebar-platform-launcher {
  position: relative;
  flex: 0 0 auto;
}

.sidebar-platform-trigger {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--sidebar-logo-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease;
}

.sidebar-platform-trigger:hover,
.sidebar-platform-trigger:focus-visible,
.sidebar-platform-launcher.is-open .sidebar-platform-trigger {
  background: rgba(232, 85, 46, 0.1);
  border-color: rgba(232, 85, 46, 0.3);
  color: var(--accent);
  outline: none;
}

.sidebar-platform-trigger:active {
  transform: scale(0.96);
}

.sidebar-platform-trigger .icon {
  font-size: 16px;
}

.sidebar-platform-menu {
  position: fixed;
  top: 16px;
  left: calc(var(--sidebar-width) - 8px);
  z-index: 10080;
  width: 276px;
  padding: 10px;
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid rgba(232, 85, 46, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 20px 48px rgba(35, 24, 18, 0.18), 0 6px 16px rgba(35, 24, 18, 0.08);
}

.sidebar-platform-menu::before {
  content: "";
  position: absolute;
  top: 18px;
  left: -6px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.97);
  border-left: 1px solid rgba(232, 85, 46, 0.14);
  border-bottom: 1px solid rgba(232, 85, 46, 0.14);
}

.sidebar-platform-menu.is-open,
.sidebar-platform-launcher.is-open .sidebar-platform-menu {
  display: grid;
}

.sidebar-platform-item {
  position: relative;
  min-width: 0;
  min-height: 92px;
  padding: 11px 7px 10px;
  border-radius: 10px;
  color: var(--text-primary);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  isolation: isolate;
  transition: background 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.sidebar-platform-item:hover,
.sidebar-platform-item:focus-visible {
  background: rgba(232, 85, 46, 0.08);
  text-decoration: none;
  outline: none;
  transform: translateY(-1px);
}

.sidebar-platform-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.sidebar-platform-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sidebar-platform-preview {
  width: 74px;
  height: 46px;
  object-fit: contain;
  opacity: 0.92;
  flex-shrink: 0;
}

.sidebar-byline {
  font-size: 12px;
  font-weight: 500;
  color: var(--sidebar-label-color);
  padding-left: 26px;
}

.sidebar-section {
  padding: var(--space-2) var(--space-3);
}

.sidebar-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sidebar-label-color);
  padding: var(--space-3) var(--space-3) var(--space-1);
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 120ms ease;
  text-decoration: none;
  line-height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-item:hover {
  background: var(--sidebar-hover-bg);
  text-decoration: none;
  color: #E6E6E6;
}

.sidebar-item:active {
  transform: scale(0.98);
}

.sidebar-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
}

.sidebar-item .icon,
.sidebar-item [class^="icon-"],
.sidebar-item [class*=" icon-"] {
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  display: inline-block;
}

.sidebar-item .badge {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--sidebar-label-color);
  background: var(--sidebar-hover-bg);
  border-radius: var(--radius-pill);
  padding: 0 7px;
  min-width: 22px;
  transition: background 200ms ease, color 200ms ease;
  text-align: center;
  line-height: 20px;
}

.sidebar-item.active .badge {
  background: rgba(255,255,255,0.2);
  color: var(--sidebar-active-text);
}

.sidebar-hover-popover {
  position: fixed;
  /* Above the chat windows (10100+), their dock (10099), and the launcher
     popover (10120) — windows anchor beside the sidebar now, and a hover
     tooltip must never hide behind them. */
  z-index: 10130;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 224px;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(31, 31, 36, 0.96);
  color: #fff;
  box-shadow: 0 16px 42px rgba(45, 20, 12, 0.28), 0 2px 8px rgba(45, 20, 12, 0.18);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-4px) scale(0.98);
  transition: opacity 120ms ease, transform 120ms ease;
}

.sidebar-hover-popover.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.sidebar-hover-popover::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: rgba(31, 31, 36, 0.96);
  transform: translateY(-50%) rotate(45deg);
  border-radius: 2px;
}

.sidebar-popover-silhouette {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 30%;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.sidebar-popover-silhouette .icon {
  color: #fff;
  font-size: 34px;
  line-height: 1;
}

.sidebar-popover-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-popover-copy strong {
  font-size: 13px;
  line-height: 1.25;
}

.sidebar-popover-copy span {
  color: rgba(255,255,255,0.74);
  font-size: 12px;
  line-height: 1.35;
}

/* Sidebar doc folders */
.sidebar-folder-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
  line-height: 32px;
}

.sidebar-folder-header:hover {
  background: var(--sidebar-hover-bg);
  color: #E6E6E6;
}

.sidebar-folder-chevron {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-folder.open .sidebar-folder-chevron {
  transform: rotate(90deg);
}

.sidebar-folder-items {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-left: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
}

.sidebar-folder.open .sidebar-folder-items {
  max-height: 500px;
  opacity: 1;
}

.sidebar-folder {
  animation: sidebarFadeIn 0.4s ease both;
}

/* ─── Sidebar nested subnav (e.g. People → All People) ─── */
.sidebar-subnav {
  display: flex;
  flex-direction: column;
}

.sidebar-subnav-row {
  position: relative;
  display: flex;
  align-items: center;
}

.sidebar-subnav-row .sidebar-subnav-link {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 30px; /* leave room for the chevron toggle */
}

.sidebar-subnav-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sidebar-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.55;
  transition: background 200ms ease, opacity 200ms ease, color 200ms ease;
}

.sidebar-subnav-toggle:hover {
  background: var(--sidebar-hover-bg);
  color: #E6E6E6;
  opacity: 1;
}

.sidebar-subnav-chevron {
  font-size: 12px !important;
  width: auto !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-subnav.open .sidebar-subnav-chevron {
  transform: rotate(90deg);
}

.sidebar-subnav-items {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-left: 19px;
  border-left: 1px solid var(--sidebar-border);
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
}

.sidebar-subnav.open .sidebar-subnav-items {
  max-height: 320px;
  opacity: 1;
}

.sidebar-subnav-items .sidebar-subitem {
  padding-left: 16px;
  font-size: 13px;
  font-weight: 500;
}

/* Section the parent belongs to: subtle emphasis when a child is the active page.
   Use the theme's sidebar text token (dark on the light sidebar) so the parent
   stays high-contrast instead of washing out. */
.sidebar-subnav.has-active > .sidebar-subnav-row .sidebar-subnav-link .sidebar-text {
  color: var(--sidebar-text);
  font-weight: 600;
}

/* Collapsed (icon-only) sidebar: hide the toggle + children, show only the parent icon. */
.sidebar.collapsed .sidebar-subnav-items,
.sidebar.collapsed .sidebar-subnav-toggle {
  display: none !important;
}

.sidebar.collapsed .sidebar-subnav-row .sidebar-subnav-link {
  padding-right: 8px;
}

.sidebar-divider {
  height: 1px;
  background: var(--sidebar-border);
  margin: var(--space-3) var(--space-4);
}

/* ─── Main content area ─── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ─── Header ─── */
.header {
  position: relative;
  height: var(--header-height);
  min-height: 72px;
  border-bottom: none;
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-4);
  background: var(--bg-page);
  z-index: 100;
  transition: box-shadow 0.25s ease;
}

.header.scrolled {
  box-shadow: 0 1px 8px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.08);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header-center { flex: 1; display: flex; justify-content: center; }

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ─── Header "+" new conversation button ─── */
.hub-new-chat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 160ms, color 160ms, background 160ms, transform 160ms, box-shadow 160ms;
}
.hub-new-chat-btn i { font-size: 16px; line-height: 1; }
.hub-new-chat-btn-label { white-space: nowrap; }
.hub-new-chat-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent, #e8552e) 5%, var(--bg-card));
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.hub-new-chat-btn:active { transform: translateY(0); }
.hub-new-chat-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #e8552e) 35%, transparent);
}
@media (max-width: 480px) {
  /* Collapse to a 44×44 circle (preserve touch target) when the header
     is too narrow to fit "+ New Chat". */
  .hub-new-chat-btn { padding: 0; width: 44px; min-width: 44px; gap: 0; }
  .hub-new-chat-btn-label { display: none; }
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  color: var(--text-tertiary);
  font-size: 14px;
  cursor: pointer;
  min-width: 380px;
  max-width: 480px;
  width: 100%;
  transition: all 200ms ease;
}

.search-box:hover {
  border-color: var(--border);
  background: var(--bg-page);
  box-shadow: var(--shadow-md);
}

.search-box kbd {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  margin-left: auto;
  color: var(--text-tertiary);
}

/* ─── Page content ─── */
.content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-7) 200px;
  animation: pageReveal 0.3s ease both;
}

.page-shell-narrow {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.page-shell-medium {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
}

.page-shell-wide {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

/* ─── View tabs ─── */
.view-tabs {
  display: flex;
  gap: 0;
  border-bottom: none;
  padding: 0 var(--space-6);
  background: var(--bg-page);
  margin-bottom: 12px;
}

.view-tab {
  padding: var(--space-3) var(--space-5);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 100ms, border-color 100ms;
}

.view-tab:hover { color: var(--text-primary); }
.view-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* ─── Toolbar ─── */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--border);
}

.toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-page);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms ease;
}

.toolbar-btn:hover {
  border-color: var(--text-tertiary);
  background: var(--bg-smoke);
}

.toolbar-spacer { flex: 1; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 150ms ease;
  line-height: 20px;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: #FFFFFF;
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-sm); }
.btn:active { transform: scale(0.97); }

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn-secondary:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--bg-secondary); }

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
}

/* ─── Kanban Board ─── */
.board {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  overflow-x: auto;
  flex: 1;
  align-items: stretch;
}

.board-column {
  min-width: 300px;
  max-width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.column-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  margin-bottom: var(--space-3);
}

.column-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.column-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  min-width: 22px;
  text-align: center;
}

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

.column-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 40px;
  flex: 1;
}

/* ─── Task Card ─── */
.task-card {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 0px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow 200ms ease, transform 200ms ease;
  position: relative;
  border-left: 3px solid transparent;
  animation: fadeInUp 0.35s ease both;
}

.task-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Stagger animation for board cards */
.column-cards > :nth-child(1) { animation-delay: 0.03s; }
.column-cards > :nth-child(2) { animation-delay: 0.06s; }
.column-cards > :nth-child(3) { animation-delay: 0.09s; }
.column-cards > :nth-child(4) { animation-delay: 0.12s; }
.column-cards > :nth-child(5) { animation-delay: 0.15s; }
.column-cards > :nth-child(6) { animation-delay: 0.18s; }

.task-card[data-priority="unbreak_now"] { border-left-color: var(--priority-crit); }
.task-card[data-priority="high"] { border-left-color: var(--priority-high); }
.task-card[data-priority="normal"] { border-left-color: var(--priority-norm); }
.task-card[data-priority="low"] { border-left-color: var(--priority-low); }
.task-card[data-priority="wishlist"] { border-left-color: var(--priority-wish); }
/* Numeric fallbacks for API responses */
.task-card[data-priority="100"] { border-left-color: var(--priority-crit); }
.task-card[data-priority="80"]  { border-left-color: var(--priority-high); }
.task-card[data-priority="50"]  { border-left-color: var(--priority-norm); }
.task-card[data-priority="25"]  { border-left-color: var(--priority-low); }
.task-card[data-priority="0"]   { border-left-color: var(--priority-wish); }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.card-key {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.card-priority {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.45;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.card-date {
  font-size: 13px;
  color: var(--text-tertiary);
}

.card-date.overdue { color: var(--status-danger); font-weight: 600; }

.card-labels {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.label-chip {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.4;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--bg-secondary);
}

.card-indicator {
  font-size: 13px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-indicator.muted { opacity: 0.3; }

.card-assignee {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* ─── Avatar ─── */
.avatar {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #FFFFFF;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.avatar.human { border-radius: 50%; }
.avatar.agent { border-radius: 6px; }

.avatar.xs { width: 22px; height: 22px; font-size: 10px; }
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.avatar.md { width: 36px; height: 36px; font-size: 13px; }
.avatar.lg { width: 52px; height: 52px; font-size: 18px; }

.avatar-stack {
  display: flex;
}
.avatar-stack .avatar {
  border-radius: 50%; margin-left: -8px; border: 2px solid var(--bg-page); }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ─── Presence dot ─── */
.presence {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-page);
  position: absolute;
  bottom: -1px;
  right: -1px;
}

.presence.online { background: var(--status-success); }
.presence.away { background: var(--status-warning); }
.presence.dnd { background: var(--status-danger); }
.presence.offline { background: var(--status-closed); }

/* ─── Status badge ─── */
.status-badge {
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1.3;
}

.status-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Support both underscore (data values) and hyphen (CSS-clean) class names */
.status-badge.open { color: var(--status-open); background: color-mix(in srgb, var(--status-open) 10%, transparent); }
.status-badge.open::before { background: var(--status-open); }

.status-badge.in-progress,
.status-badge.in_progress { color: var(--status-running); background: color-mix(in srgb, var(--status-running) 10%, transparent); }
.status-badge.in-progress::before,
.status-badge.in_progress::before { background: var(--status-running); animation: pulse 2s ease-in-out infinite; }

.status-badge.blocked { color: var(--status-danger); background: color-mix(in srgb, var(--status-danger) 10%, transparent); }
.status-badge.blocked::before { background: var(--status-danger); }

.status-badge.review { color: var(--status-review); background: color-mix(in srgb, var(--status-review) 10%, transparent); }
.status-badge.review::before { background: var(--status-review); }

.status-badge.closed { color: var(--status-closed); background: color-mix(in srgb, var(--status-closed) 10%, transparent); }
.status-badge.closed::before { background: var(--status-closed); }

/* ─── Section headers ─── */
.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.section-header {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

/* ─── Task detail page ─── */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
  max-width: 1200px;
}

.detail-header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.detail-key {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
}

.detail-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.detail-controls {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ─── Metadata grid ─── */
.meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-6);
  padding: 20px;
  background: var(--bg-smoke);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}

.meta-item label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.meta-item .value {
  font-size: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.meta-item .value.overdue { color: var(--status-danger); }

/* ─── Description ─── */
.description {
  padding: var(--space-5) 0;
  color: var(--text-primary);
  line-height: 1.7;
  font-size: 15px;
}

/* ─── Activity stream ─── */
.activity-tabs {
  display: flex;
  gap: var(--space-5);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
}

.activity-tab {
  padding: var(--space-2) 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 100ms;
}

.activity-tab.active {
  color: var(--text-primary);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.activity-item {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.activity-item:last-child { border-bottom: none; }

/* ─── Post / Comment ─── */
.post {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}

.post-body { flex: 1; }

.post-author {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}

.post-time {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-left: var(--space-2);
}

.post-content {
  color: var(--text-primary);
  line-height: 1.65;
  margin-top: 6px;
  font-size: 14px;
}

.post-reactions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  cursor: pointer;
  transition: background 100ms;
}

.reaction-chip:hover { background: var(--bg-secondary); }

/* ─── Audit entry ─── */
.audit-entry {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.audit-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}

/* ─── Sidebar panels (detail page right column) ─── */
.sidebar-panel {
  margin-bottom: var(--space-5);
}

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

.panel-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.panel-action {
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
}

/* ─── Mini card (link targets, subtasks) ─── */
.mini-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  font-size: 14px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 120ms ease;
}

.mini-card:hover {
  background: var(--bg-smoke);
  box-shadow: var(--shadow-sm);
}

.mini-card .mini-key {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.mini-card .mini-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-weight: 500;
}

/* ─── File item ─── */
.file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 100ms;
}

.file-item:hover { background: var(--bg-smoke); }
.file-item .file-size { color: var(--text-tertiary); margin-left: auto; font-size: 13px; }

/* ─── Project card (grid) ─── */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}

.project-card {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 200ms ease;
  animation: fadeInUp 0.35s ease both;
}

.project-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Stagger project cards */
.project-grid > :nth-child(1) { animation-delay: 0.03s; }
.project-grid > :nth-child(2) { animation-delay: 0.06s; }
.project-grid > :nth-child(3) { animation-delay: 0.09s; }
.project-grid > :nth-child(4) { animation-delay: 0.12s; }
.project-grid > :nth-child(5) { animation-delay: 0.15s; }

.project-icon {
  font-size: 26px;
  margin-bottom: var(--space-2);
}

.project-key {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-left: var(--space-2);
}

.project-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}

.project-stats {
  display: flex;
  gap: var(--space-5);
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

/* ─── Comment box ─── */
.comment-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
}

.comment-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px var(--space-4);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-page);
  resize: vertical;
  min-height: 44px;
  line-height: 1.5;
  transition: border-color 150ms, box-shadow 150ms;
}

.comment-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 15%, transparent);
}

/* ─── My Work page ─── */
.my-work-section {
  margin-bottom: var(--space-7);
}

.my-work-section .section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.task-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 10px var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 100ms;
  animation: fadeInUp 0.3s ease both;
}

/* Stagger list items */
.my-work-section > .task-list-item:nth-child(2) { animation-delay: 0.02s; }
.my-work-section > .task-list-item:nth-child(3) { animation-delay: 0.04s; }
.my-work-section > .task-list-item:nth-child(4) { animation-delay: 0.06s; }
.my-work-section > .task-list-item:nth-child(5) { animation-delay: 0.08s; }
.my-work-section > .task-list-item:nth-child(6) { animation-delay: 0.10s; }

.task-list-item:hover { background: var(--bg-smoke); }

.task-list-key {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-tertiary);
  min-width: 85px;
}

.task-list-title {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-list-project {
  font-size: 13px;
  color: var(--text-tertiary);
}

.task-list-date {
  font-size: 13px;
  color: var(--text-tertiary);
  min-width: 70px;
  text-align: right;
}

.task-list-date.overdue { color: var(--status-danger); font-weight: 600; }

/* ─── Document view ─── */
.doc-shell {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.doc-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--space-7);
  max-width: 1000px;
  margin: 0 auto;
}

.doc-body {
  line-height: 1.75;
  color: var(--text-primary);
  font-size: 15px;
  /* grid item: without min-width:0 a wide table or long unbroken token
     expands the 1fr column past the layout cap and the viewport */
  min-width: 0;
  overflow-wrap: break-word;
}

.doc-body h2 {
  font-size: 22px;
  font-weight: 700;
  margin: var(--space-6) 0 var(--space-3);
  letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--space-6) + 48px);
}

.doc-body h3 {
  font-size: 17px;
  font-weight: 600;
  margin: var(--space-5) 0 var(--space-2);
  scroll-margin-top: calc(var(--space-6) + 48px);
}

.doc-body p { margin-bottom: var(--space-4); }
.doc-body img {
  cursor: zoom-in;
}
.doc-body code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-secondary);
  padding: 2px 7px;
  border-radius: 5px;
  color: var(--status-danger);
}

.doc-body table {
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-size: 14px;
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.doc-body th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 8px 12px;
  border: 1px solid var(--border);
  white-space: nowrap;
}

.doc-body td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: top;
}

.doc-toc {
  position: sticky;
  top: var(--space-6);
}

.toc-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

.toc-item {
  display: block;
  font-size: 14px;
  color: var(--text-secondary);
  padding: 4px 0;
  cursor: pointer;
  transition: color 100ms;
}

.toc-item:hover { color: var(--accent); text-decoration: none; }
.toc-item.indent { padding-left: var(--space-5); }

/* ─── Theme toggle ─── */
/* ─── Chat link ─── */
.chat-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 120ms ease;
}

.chat-link:hover {
  background: var(--bg-secondary);
  color: var(--accent);
  text-decoration: none;
}

.app-launch-link {
  isolation: isolate;
}

.app-link-preview {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: 156px;
  min-height: 136px;
  padding: 14px 12px 12px;
  transform: translate(-50%, 6px) scale(0.98);
  transform-origin: top center;
  border: 1px solid rgba(232, 85, 46, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(35, 24, 18, 0.16), 0 6px 16px rgba(35, 24, 18, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.app-link-preview::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  border-left: 1px solid rgba(232, 85, 46, 0.14);
  border-top: 1px solid rgba(232, 85, 46, 0.14);
  background: rgba(255, 255, 255, 0.96);
}

.app-link-preview img {
  width: 118px;
  height: 82px;
  object-fit: contain;
  display: block;
}

.app-link-preview-title {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.app-launch-link:hover .app-link-preview,
.app-launch-link:focus-visible .app-link-preview {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* ─── User profile ─── */
.profile-header {
  display: flex;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  align-items: center;
}

.profile-info { flex: 1; }

.profile-name {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.profile-handle {
  font-size: 15px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.profile-bio {
  font-size: 15px;
  color: var(--text-secondary);
  margin-top: var(--space-2);
  line-height: 1.5;
}

.profile-contact {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-top: var(--space-3);
}

/* ─── Breadcrumb ─── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 14px;
  color: var(--text-tertiary);
}

.breadcrumb a { color: var(--text-tertiary); }
.breadcrumb a:hover { color: var(--accent); text-decoration: none; }
.breadcrumb .sep { margin: 0 4px; }

/* ─── Document Breadcrumbs ─── */

.doc-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.doc-crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  text-decoration: none;
  transition: all 120ms ease;
  white-space: nowrap;
}

.doc-crumb i {
  font-size: 14px;
  flex-shrink: 0;
}

.doc-crumb-root {
  color: var(--text-tertiary);
  background: var(--bg-secondary);
}

.doc-crumb-root:hover {
  color: var(--accent);
  background: var(--bg-tertiary);
  text-decoration: none;
}

.doc-crumb-root i {
  font-size: 13px;
}

.doc-crumb-folder {
  color: var(--text-secondary);
  background: var(--bg-secondary);
}

.doc-crumb-folder:hover {
  color: var(--accent);
  background: var(--bg-tertiary);
  text-decoration: none;
}

.doc-crumb-current {
  color: var(--text-primary);
  background: var(--bg-smoke);
  border: 1px solid var(--border);
  font-weight: 600;
}

.doc-crumb-current i {
  color: var(--accent);
}

.doc-crumb-sep {
  font-size: 12px;
  color: var(--text-tertiary);
  opacity: 0.5;
  flex-shrink: 0;
  margin: 0 2px;
}

.doc-crumb-project {
  margin-left: auto;
}

.doc-crumb-project a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: all 120ms ease;
}

.doc-crumb-project a:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

/* ─── Empty / zero states ─── */
.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-6);
  color: var(--text-tertiary);
  font-size: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  grid-column: 1 / -1;
  width: 100%;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
}

.empty-state-desc {
  font-size: 14px;
  color: var(--text-tertiary);
  max-width: 320px;
  line-height: 1.5;
}

.empty-state-action {
  margin-top: var(--space-2);
}

/* Docs zero-state: the card floats in the page's vertical middle. */
.docs-empty { display: flex; align-items: center; justify-content: center; min-height: 55vh; }

/* ─── Modal Backdrop ─── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 0;
  z-index: 10020;
  animation: fadeIn 0.2s ease;
  overflow-y: auto;
}

/* When backdrop contains a side panel, it's just an overlay */
.modal-backdrop:has(.form-modal) {
  padding: 0;
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  background: var(--bg-page);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px rgba(0,0,0,0.25);
  overflow: hidden;
  animation: slideUp 0.2s ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Form Modal ─── */
/* ─── Slide-in Side Panel (form modals) ─── */

.form-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  box-shadow: -8px 0 30px rgba(0,0,0,0.12), -2px 0 8px rgba(0,0,0,0.06);
  border-radius: 0;
  animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  z-index: 10021;
  overflow: hidden;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.modal-backdrop.closing {
  animation: fadeOut 0.25s ease both;
  pointer-events: none;
}

/* ─── New Event chooser: shell-less cards floating on the backdrop ─── */
.modal-backdrop.evchooser-back {
  align-items: center;
  padding: 5vh 20px;
  background: rgba(12, 12, 16, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.evchooser {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.evchooser-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
  animation: evchooserRise 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.evchooser-title {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.evchooser-close {
  appearance: none;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.evchooser-close:hover { background: rgba(255, 255, 255, 0.26); }
.evchooser-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.evchooser-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  /* Frosted glass over the darkened, blurred backdrop. */
  background: rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  animation: evchooserRise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(60ms + var(--i, 0) * 60ms);
}
.evchooser-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.28);
}
.evchooser-card:active { transform: translateY(0); }

/* ── Luma import — centered monochrome modal (matches evchooser) ── */
@keyframes lz-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.lzm { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 16px; }
.lzm-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; animation: evchooserRise 0.32s cubic-bezier(0.16, 1, 0.3, 1) both; }
.lzm-title { font-size: 17px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.lzm-panel {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 10px;
  max-height: 62vh;
  overflow-y: auto;
  animation: evchooserRise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 80ms;
}
.lzm-group { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: rgba(255, 255, 255, 0.55); margin: 12px 8px 6px; }
.lzm-group:first-child { margin-top: 6px; }
.lzm-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 10px; border: none; background: transparent; border-radius: 12px; cursor: pointer; text-decoration: none; color: inherit; transition: background 0.15s ease; }
.lzm-row:hover { background: rgba(255, 255, 255, 0.12); }
.lzm-row.is-imported { opacity: 0.5; }
.lzm-cover { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; flex-shrink: 0; background: rgba(255, 255, 255, 0.12); }
.lzm-cover-fb { display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.6); }
.lzm-row-txt { flex: 1; min-width: 0; }
.lzm-row-name { display: block; font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lzm-row-meta { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.lzm-row-go { color: rgba(255, 255, 255, 0.5); font-size: 16px; flex-shrink: 0; }
.lzm-badge { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 3px 9px; flex-shrink: 0; }
/* Imported rows: the link carries the row body; a refresh control re-imports
   (idempotent resume) so interrupted imports can be completed in place. */
.lzm-row-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.lzm-reimport {
  flex-shrink: 0; width: 28px; height: 28px; border: none; border-radius: 8px;
  background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.lzm-reimport:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
/* Real import progress (guest lists can run to four digits) */
.lzm-prog { width: min(340px, 80%); height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.lzm-prog-fill { height: 100%; border-radius: 999px; background: var(--accent, #e8552e); transition: width .6s ease; }
.lzm-prog-label { font-size: 13.5px; color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; }
.lzm-reassure { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); max-width: 340px; line-height: 1.5; }
.lzm-row.is-imported:has(.lzm-reimport:hover) { opacity: 0.85; }
.lzm-status { padding: 26px 14px; text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 13.5px; line-height: 1.6; }
.lzm-status a { color: #fff; text-decoration: underline; }
.lzm-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 44px 24px; }
.lzm-center-title { font-size: 16px; font-weight: 600; color: #fff; }
.lzm-step { font-size: 13px; color: rgba(255, 255, 255, 0.6); animation: lz-pulse 2s ease-in-out infinite; }
.lzm-spin { width: 20px; height: 20px; border-radius: 50%; display: inline-block; vertical-align: middle; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: spin 0.8s linear infinite; }
.lzm-spin-lg { width: 34px; height: 34px; border-width: 3px; }
.lzm-check { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; animation: evchooserRise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.lzm-success-name { font-size: 15px; font-weight: 600; color: #fff; }
.lzm-success-sub { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.lzm-btn { margin-top: 8px; appearance: none; border: none; background: #fff; color: #141414; font-size: 13.5px; font-weight: 600; padding: 10px 22px; border-radius: 999px; cursor: pointer; transition: opacity 0.15s ease; }
.lzm-btn:hover { opacity: 0.88; }

/* ── Person enrichment progress (monochrome, matches evchooser/lzm) ── */
.pde-panel { max-height: none; }
.pde-center { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 34px 24px 26px; }
/* Breathing AI orb with a sonar ring — all monochrome white. */
.pde-orb {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 22px;
  animation: pde-breathe 2.2s ease-in-out infinite;
}
.pde-orb::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  animation: pde-sonar 2.2s ease-out infinite;
}
@keyframes pde-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes pde-sonar {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.85); opacity: 0; }
}
.pde-steps { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; margin-top: 4px; }
.pde-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.25s ease;
}
.pde-step-ic {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  font-size: 10px;
  color: #fff;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.pde-step.is-active { color: #fff; animation: lz-pulse 2s ease-in-out infinite; }
.pde-step.is-active .pde-step-ic {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
.pde-step.is-done { color: rgba(255, 255, 255, 0.75); }
.pde-step.is-done .pde-step-ic { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); }
.pde-step.is-done .pde-step-ic::before { content: '✓'; }
.pde-foot { font-size: 12px; color: rgba(255, 255, 255, 0.55); margin-top: 4px; }
.pde-foot #pde-elapsed { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.8); font-weight: 600; }
.pde-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; max-width: 380px; }
.pde-chip {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 3px 10px;
}
.pde-summary { margin: 2px 0 0; max-width: 400px; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.6); }

.evchooser-card-ic {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* Monochrome, frosted chip. */
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 19px;
}
.evchooser-card-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.evchooser-card-tt {
  font-size: 15px;
  font-weight: 650;
  color: #fff;
}
.evchooser-card-sub {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.45;
}
.evchooser-card-go {
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  flex: 0 0 auto;
  transition: transform 0.18s ease, color 0.18s ease;
}
.evchooser-card:hover .evchooser-card-go {
  color: #fff;
  transform: translateX(2px);
}
@keyframes evchooserRise {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes evchooserSink {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(10px) scale(0.98); }
}
.modal-backdrop.evchooser-back.closing .evchooser-head,
.modal-backdrop.evchooser-back.closing .evchooser-card {
  animation: evchooserSink 0.2s ease both;
}
@media (max-width: 560px) {
  .evchooser-cards { grid-template-columns: 1fr; }
}

.modal-backdrop.closing .form-modal {
  animation: slideOutRight 0.25s cubic-bezier(0.4, 0, 1, 1) both;
}

.form-modal .modal-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 0 28px 20px;
}

.form-modal .modal-header {
  flex-shrink: 0;
}

.form-modal .modal-footer {
  flex-shrink: 0;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 16px;
}

.modal-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 22px;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 100ms;
}

.modal-close:hover { background: var(--bg-secondary); }

.modal-body {
  padding: 0 28px 16px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: 16px 28px 24px;
  border-top: 1px solid var(--border);
}

/* ─── Form Elements ─── */
.form-group {
  margin-bottom: var(--space-4);
  flex: 1;
}

.form-row {
  display: flex;
  gap: var(--space-4);
}

.form-row > .form-group {
  flex: 1;
  min-width: 0;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-page);
  transition: border-color 150ms, box-shadow 150ms;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 15%, transparent);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.form-select {
  appearance: auto;
}

/* ─── Drag-and-Drop ─── */
.draggable-card {
  cursor: grab;
}

.draggable-card:active {
  cursor: grabbing;
}

.draggable-card.dragging {
  opacity: 0.4;
}

.draggable-card.dragging .task-card {
  pointer-events: none;
}

.board-column.drag-over {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-radius: 4px;
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

/* ─── Table View ─── */
.hub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.hub-th {
  text-align: left;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  border-bottom: 2px solid var(--border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 100ms;
}

.hub-th:hover {
  color: var(--text-primary);
}

.sort-arrow {
  font-size: 10px;
  margin-left: 4px;
  color: var(--accent);
}

.hub-tr {
  transition: background 80ms;
}

.hub-tr:hover {
  background: var(--bg-smoke);
}

.hub-tr:nth-child(even) {
  background: var(--bg-secondary);
}

.hub-tr:nth-child(even):hover {
  background: var(--bg-tertiary);
}

.hub-td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-primary);
}

.hub-td-key code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
}

.hub-td-title {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.td-assignee-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.hub-th[data-sort-dir="asc"],
.hub-th[data-sort-dir="desc"] {
  color: var(--text-primary);
  background: var(--bg-smoke);
}

.hub-td.overdue {
  color: var(--status-danger);
  font-weight: 600;
}

.table-filter-row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  align-items: center;
}

.table-filter-input {
  max-width: 280px;
}

.table-filter-select {
  max-width: 160px;
}

/* ─── Inline-editable fields ─── */
.inline-editable-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 100ms;
}

.inline-editable-wrap:hover {
  background: var(--bg-secondary);
}

.inline-display {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.inline-caret {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-left: 2px;
  transition: transform 100ms;
}

.inline-editable-wrap:hover .inline-caret {
  color: var(--text-secondary);
}

/* Hidden native controls (still needed for tests + screen readers) */
.inline-overlay-select {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  font-size: 14px;
}

/* Date input: keep clickable so native picker opens */
.inline-overlay-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  font-size: 14px;
}

/* ─── Custom dropdown menu ─── */
.hub-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  padding: 4px 0;
  animation: slideUp 0.12s ease;
}

.hub-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 80ms;
  white-space: nowrap;
}

.hub-dropdown-item:hover,
.hub-dropdown-item.selected {
  background: var(--bg-secondary);
}

.hub-dropdown-item .check-mark {
  width: 16px;
  font-size: 13px;
  color: var(--accent);
  flex-shrink: 0;
}

.hub-dropdown-item .dd-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Status pill in dropdown */
.hub-dropdown-item .dd-label {
  flex: 1;
}

/* ─── Bulk action bar ─── */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-page));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.bulk-bar-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.bulk-bar-actions {
  display: flex;
  gap: var(--space-2);
  margin-left: var(--space-2);
  flex: 1;
}

.bulk-action-wrap {
  position: relative;
}

.bulk-action-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bulk-action-wrap .hub-dropdown {
  min-width: 160px;
  top: 100%;
  left: 0;
  margin-top: 4px;
}

.bulk-bar > .btn-ghost:last-child {
  margin-left: auto;
  color: var(--text-tertiary);
}

.bulk-bar > .btn-ghost:last-child:hover {
  color: var(--text-primary);
}

/* ─── Table checkbox column ─── */
.hub-th-check,
.hub-td-check {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  text-align: center;
  padding: 10px 8px;
}

.hub-td-check input[type="checkbox"],
.hub-th-check input[type="checkbox"] {
  cursor: pointer;
  width: 15px;
  height: 15px;
}

/* ─── User Switcher ─── */
.user-switcher-wrap {
  position: relative;
  cursor: pointer;
}

.user-switcher-wrap .hub-dropdown {
  right: 0;
  left: auto;
  min-width: 240px;
}

.user-switch-item {
  gap: 10px;
}

.user-switch-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-switch-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.user-switch-title {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-switch-item.current {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.user-switcher-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.user-switcher-profile {
  font-size: 13px;
  color: var(--text-secondary);
  justify-content: center;
}

/* ─── People ─── */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

.person-card {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  cursor: pointer;
  transition: box-shadow 200ms ease, transform 200ms ease;
  animation: fadeInUp 0.35s ease both;
}

.person-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.person-avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: var(--space-3);
  /* Crop-fill any <img> variant so photos render as clean circles
     regardless of aspect ratio. Purely additive for the colored-
     initials span variant. */
  object-fit: cover;
}

.person-avatar-circle.sm {
  width: 32px;
  height: 32px;
  font-size: 12px;
  margin-bottom: 0;
  flex-shrink: 0;
}

/* Person avatars with no photo show a profile silhouette on the chosen
   background instead of initials — hub-wide, every person-avatar class.
   The initials text stays in the DOM (hidden) so this needs no JS churn;
   the onerror-generated fallback spans carry .person-avatar-circle too,
   so they're covered automatically. Real photos (<img>) are excluded via
   :not(img); company/brand logos that reuse these classes opt out with
   .avatar-logo. The .avatar-silhouette marker covers shared-class cases
   (e.g. person results in global search). */
.person-avatar-circle:not(img):not(.avatar-logo),
.pd-avatar:not(img):not(.avatar-logo),
.sd-avatar-fb:not(.avatar-logo),
.evd-going-av-fb:not(.avatar-logo),
.dash-event-attendee:not(.avatar-logo),
.rb-avatar:not(.avatar-logo),
.avatar-silhouette {
  color: transparent !important;
  position: relative;
}
.person-avatar-circle:not(img):not(.avatar-logo)::after,
.pd-avatar:not(img):not(.avatar-logo)::after,
.sd-avatar-fb:not(.avatar-logo)::after,
.dash-event-attendee:not(.avatar-logo)::after,
.rb-avatar:not(.avatar-logo)::after,
.avatar-silhouette::after,
/* Going strip reuses ::after for its hover name tooltip, so its silhouette
   rides ::before instead — otherwise the two collide and paint a dark box
   over the avatar. */
.evd-going-av-fb:not(.avatar-logo)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e6e3e0' d='M12 12.3a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z'/%3E%3Cpath fill='%23e6e3e0' d='M12 13.7c-3.7 0-6.7 2.15-6.7 5.05v.55h13.4v-.55c0-2.9-3-5.05-6.7-5.05Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  pointer-events: none;
}

.person-avatar-img {
  /* Explicit inline-block: card centering relies on inline flow, and
     extension/embedder img resets (display:block) otherwise pin the
     photo to the card's left edge while text stays centered. */
  display: inline-block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--space-3);
}

.person-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.person-card-title {
  font-size: 13px;
  color: var(--text-secondary);
}

.person-card-company {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Long names/titles truncate instead of wrapping so rows stay uniform. */
.person-card-name,
.person-card-title,
.person-card-company {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tag chips stay one-line each (long tags ellipsize) so rows keep a
   uniform height. */
.person-card .card-labels .label-chip {
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.people-page-header,
.people-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.people-page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* CSV import/export dropdown — right-anchored so the menu stays inside
   the page when opened from the header's right-aligned action row. */
.people-csv-wrap .hub-dropdown {
  left: auto;
  right: 0;
  min-width: 170px;
}

.people-filter-bar {
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}
/* Second filter row: label pills (left) + view toggle (right), full width. */
.people-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
}

/* ─── People Groups ─── */
.people-groups-section {
  margin-bottom: var(--space-6);
}

.people-groups-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.people-groups-head h2 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin: 0;
}

.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}

.group-folder-card {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  cursor: pointer;
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
  animation: fadeInUp 0.35s ease both;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 136px;
}

.group-folder-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.group-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.group-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  /* Line icon stroked in the group color on a subtle tint, matching the Files
     page folder icons (not a solid fill with a white glyph). */
  background: color-mix(in srgb, var(--group-color, var(--accent)) 12%, transparent);
  color: var(--group-color, var(--accent));
  flex-shrink: 0;
}

.group-card-icon i { font-size: 18px; }

.group-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-card-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  flex-shrink: 0;
}

/* "Circle of friends" — overlapping avatar stack (deliberately not a table) */
.group-avatar-cluster {
  display: flex;
  align-items: center;
  padding-left: 10px;
  min-height: 36px;
  margin-top: auto;
}

.group-avatar-cluster .person-avatar-circle.sm {
  margin-left: -10px;
  border: 2px solid var(--bg-page);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.group-avatar-cluster .group-avatar-more {
  margin-left: -10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bg-page);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.group-avatar-cluster-empty {
  display: flex;
  align-items: center;
  min-height: 36px;
  margin-top: auto;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* "+ New Group" card */
.group-folder-card.is-new {
  border-style: dashed;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-secondary);
  gap: 6px;
}

.group-folder-card.is-new:hover { color: var(--text-primary); border-color: var(--accent); }
.group-folder-card.is-new .group-new-plus { font-size: 26px; line-height: 1; }

/* Icon + color pickers for the create/edit-group modal */
.icon-picker, .color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.icon-picker-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-page);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.icon-picker-option:hover { color: var(--text-primary); }
.icon-picker-option.selected {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(3, 102, 214, 0.08);
}

.color-picker-option {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 120ms ease;
}

.color-picker-option:hover { transform: scale(1.1); }
.color-picker-option.selected { border-color: var(--text-primary); }

/* Group detail member rows */
.group-detail-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

.group-member-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.group-member-card .gm-main { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.group-member-card .gm-name { font-size: 14px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-member-card .gm-sub { font-size: 12px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.people-search-wrap,
.people-search-input {
  min-width: 0;
}

.people-search-wrap {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
}

.people-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.people-search-input {
  width: 100%;
  padding-left: 32px;
  padding-right: 116px;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Label filter pills */
.label-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.label-filter-pill {
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 6px;
  background: #FFFFFF;
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
  transition: all 120ms ease;
  border: 1px solid var(--accent);
}

.label-filter-pill:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.label-filter-pill.active {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}

/* Grid / List view toggle — sits inside the search box as a right adornment */
.people-view-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-page);
}
.people-view-toggle button {
  background: transparent;
  border: none;
  padding: 10px 18px;
  cursor: pointer;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  line-height: 1;
  transition: background 120ms ease, color 120ms ease;
}
.people-view-toggle button + button { border-left: 1px solid var(--border); }
.people-view-toggle button:hover { color: var(--text-primary); }
.people-view-toggle button.active { background: var(--accent); color: #FFFFFF; }

/* Compact list view — one person per row, saves vertical space at scale */
.people-page.is-list .people-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}
.people-page.is-list .person-card {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 12px;
  padding: 8px 16px;
  flex-wrap: wrap;
}
.people-page.is-list .person-card .person-avatar-circle,
.people-page.is-list .person-card .person-avatar-img {
  width: 34px; height: 34px; font-size: 12px; margin-bottom: 0; flex-shrink: 0;
}
.people-page.is-list .person-card-name { margin-bottom: 0; font-size: 14px; }
.people-page.is-list .person-card-title,
.people-page.is-list .person-card-company { font-size: 12.5px; max-width: 260px; }
.people-page.is-list .person-card-title::before,
.people-page.is-list .person-card-company::before {
  content: "·"; margin: 0 7px; color: var(--text-tertiary);
}
.people-page.is-list .person-card .card-labels,
.people-page.is-list .person-card-groups {
  margin-top: 0; margin-left: auto; justify-content: flex-end;
  flex-wrap: nowrap;
}

/* Wide screens: align name / title / company as fixed columns so the list
   scans vertically. Each card is its own grid, so tracks must be fixed
   (px / fr) — content-sized tracks would drift row to row. */
@media (min-width: 1024px) {
  .people-page.is-list .person-card {
    display: grid;
    grid-template-columns: 34px 220px 260px minmax(0, 1fr) auto auto;
  }
  .people-page.is-list .person-card .person-avatar-circle,
  .people-page.is-list .person-card .person-avatar-img { grid-column: 1; }
  .people-page.is-list .person-card-name { grid-column: 2; }
  .people-page.is-list .person-card-title { grid-column: 3; }
  .people-page.is-list .person-card-company { grid-column: 4; }
  .people-page.is-list .person-card .card-labels { grid-column: 5; }
  .people-page.is-list .person-card-groups { grid-column: 6; }
  .people-page.is-list .person-card-name,
  .people-page.is-list .person-card-title,
  .people-page.is-list .person-card-company {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .people-page.is-list .person-card-title::before,
  .people-page.is-list .person-card-company::before { content: none; }
}

/* Colored label chips */
.label-chip.colored {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

/* Inline tag management */
.tag-manager {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: var(--space-5);
}

.tag-manager .label-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: default;
}

.tag-manager .label-chip .tag-remove {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  opacity: 0.6;
  line-height: 1;
  margin-left: 2px;
}

.tag-manager .label-chip .tag-remove:hover {
  opacity: 1;
}

.tag-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px dashed var(--border);
  background: none;
  cursor: pointer;
  transition: all 120ms ease;
}

.tag-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.tag-input-inline {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  background: var(--bg-page);
  color: var(--text-primary);
  outline: none;
  min-width: 100px;
  font-family: var(--font-sans);
}

.tag-input-inline:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Detail page tabs (Notes / Messages) */
.detail-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
}

.detail-tab {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 120ms ease;
  font-family: var(--font-sans);
}

.detail-tab:hover {
  color: var(--text-primary);
}

.detail-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.detail-tab .tab-count {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-left: 4px;
}

.detail-tab.active .tab-count {
  color: var(--accent);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Person detail */
/* ─── Person Detail (redesigned) ─── */

.content:has(.pd-admin-detail) {
  padding-left: 200px;
  padding-right: 100px;
}

.pd {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.pd-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}
.pd-back:hover { color: var(--accent); text-decoration: none; }
.pd-back i { font-size: 14px; }

.pd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.pd-identity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.pd-avatar, .pd-avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.pd-avatar-img { object-fit: cover; }
/* Click-to-edit profile photo (wraps the avatar). */
.pd-avatar-edit { position: relative; display: inline-flex; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 50%; flex-shrink: 0; }
/* Any external spacing must live on the wrapper, never on the avatar
   inside it — an inner margin stretches the button box past the photo
   and the inset-0 overlay renders as an oval instead of a circle. */
.pd-avatar-edit .pd-avatar,
.pd-avatar-edit .pd-avatar-img { margin: 0; }
.pd-avatar-edit-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(15,23,42,0.5); color: #fff; font-size: 20px; opacity: 0; transition: opacity 150ms; }
.pd-avatar-edit:hover .pd-avatar-edit-overlay, .pd-avatar-edit:focus-visible .pd-avatar-edit-overlay { opacity: 1; }

.pd-name {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.pd-role {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.pd-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: var(--space-4);
}

.pd-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.pd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg-secondary);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 150ms ease;
}

.pd-chip:hover {
  background: var(--bg-tertiary);
  color: var(--accent);
  text-decoration: none;
}

.pd-chip i { font-size: 14px; color: var(--text-tertiary); }
.pd-chip-svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-tertiary); }

/* Hover tooltip (body-appended, position:fixed → never clipped by overflow). */
.hub-tip {
  position: fixed;
  z-index: 2147483000;
  display: none;
  max-width: 340px;
  padding: 5px 9px;
  background: #23262e;
  color: #e9ebf0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  border-radius: 7px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.22);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 110ms ease;
}
.hub-tip.is-on { opacity: 1; }
.pd-chip-favicon { display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; vertical-align: -2px; }
/* Icon stand-in when a company/website has no favicon (or it 404s) so
   the slot never renders empty. */
.pd-chip-favicon-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 12px;
  color: var(--text-tertiary);
  vertical-align: -2px;
  flex-shrink: 0;
}
.pd-event-cover-thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.pd-event-cover-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  font-size: 13px;
}

.pd-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-6);
}

.pd-admin-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.pd-profile-panel {
  position: sticky;
  top: 18px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.pd-profile-head {
  padding: 22px 22px 20px;
  border-bottom: 1px solid var(--border);
}

.pd-profile-head .pd-avatar,
.pd-profile-head .pd-avatar-img {
  width: 78px;
  height: 78px;
  margin-bottom: 14px;
  font-size: 28px;
}

/* When the avatar is wrapped in the click-to-edit button, the 14px gap
   moves onto the button so the overlay stays a perfect 78px circle. */
.pd-profile-head .pd-avatar-edit { margin-bottom: 14px; }
.pd-profile-head .pd-avatar-edit .pd-avatar,
.pd-profile-head .pd-avatar-edit .pd-avatar-img { margin-bottom: 0; }

.pd-profile-head .pd-name {
  font-size: 22px;
  line-height: 1.18;
  margin: 0 0 6px;
}

.pd-profile-email {
  display: inline-block;
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.pd-profile-email:hover { color: var(--accent); }

.pd-profile-meta {
  margin-top: 12px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.pd-profile-section {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
}

.pd-profile-section-label {
  margin-bottom: 8px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pd-profile-section-value {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
}

.pd-profile-section-sub {
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.pd-profile-actions {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.pd-profile-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 22px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.pd-profile-action:hover {
  background: var(--bg-secondary);
  color: var(--accent);
  text-decoration: none;
}

.pd-profile-action i {
  width: 16px;
  color: var(--text-tertiary);
  font-size: 15px;
}

.pd-profile-section .pd-labels {
  margin-bottom: 0;
}

.pd-muted {
  color: var(--text-tertiary);
  font-size: 13px;
}

.pd-detail-panel {
  min-width: 0;
}

.pd-tabs {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-height: 48px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.pd-tabs::-webkit-scrollbar { display: none; }

.pd-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 4px 4px 0 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.pd-tab:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.pd-tab.active {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--accent);
}

.pd-tab.active::after {
  content: '';
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--accent);
}

.pd-tab span {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
}

.pd-tab-panel {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.pd-tab-panel.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 1;
  pointer-events: auto;
  animation: pdTabSlideInLeft 300ms cubic-bezier(0.2, 0.5, 0.3, 1) forwards;
}

.pd-tab-panel.active.enter-right {
  animation: pdTabSlideInRight 300ms cubic-bezier(0.2, 0.5, 0.3, 1) forwards;
}

@keyframes pdTabSlideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pdTabSlideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pd-tab-panel.active {
    animation: none !important;
  }
}

.pd-admin-card {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
}

.pd-admin-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.pd-admin-card-head h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: 0;
}

.pd-admin-card-head p {
  margin: 5px 0 0;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.45;
}

.pd-contact-card .pd-contact {
  margin: 0 0 18px;
  padding: 0 0 18px;
}

.pd-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
}

.pd-info-item {
  min-width: 0;
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--border);
}
.pd-profile-email-none { color: var(--text-tertiary); font-style: italic; }
.pd-info-item-wide { grid-column: 1 / -1; }
.pd-secmails { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.pd-secmail { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 12.5px; }
.pd-secmail-addr { color: var(--text-primary); }
.pd-secmail-mk { border: none; background: transparent; color: var(--accent); font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.pd-secmail-mk:hover { text-decoration: underline; }
.pd-secmail-x { border: none; background: transparent; color: var(--text-tertiary); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.pd-secmail-x:hover { color: var(--text-primary); }
.pd-secmail-none { color: var(--text-tertiary); font-size: 12.5px; }
.pd-secmail-add { border: 1px dashed var(--border); background: transparent; color: var(--text-secondary); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.pd-secmail-add:hover { border-color: var(--accent); color: var(--accent); }

.pd-info-item:nth-child(2n) {
  padding-left: 16px;
}

.pd-info-item span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 650;
}

.pd-info-item strong {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pd-info-item a {
  color: var(--accent);
  text-decoration: none;
}

.pd-info-item a:hover { text-decoration: underline; }

.pd-list {
  display: flex;
  flex-direction: column;
}

.pd-empty-inline {
  color: var(--text-tertiary);
  font-size: 14px;
  line-height: 1.5;
}

/* Note input */
.pd-note-box {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-5);
}

.pd-note-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-page);
  resize: none;
  transition: border-color 150ms, box-shadow 150ms;
}

.pd-note-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 15%, transparent);
}

.pd-timeline-head {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}

.pd-timeline-count {
  font-weight: 500;
  color: var(--text-tertiary);
  margin-left: 4px;
}

/* Vertical timeline */
.pd-timeline {
  position: relative;
  padding-left: 24px;
}

.pd-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border);
  border-radius: 1px;
}

.pd-tl-item {
  position: relative;
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-5);
}

.pd-tl-item:last-child { padding-bottom: 0; }

.pd-tl-dot {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--bg-page);
  flex-shrink: 0;
  z-index: 1;
}

.pd-tl-dot.inbound { background: var(--status-running); }
.pd-tl-dot.outbound { background: var(--accent); }
.pd-tl-dot.note { background: var(--status-review); }

.pd-tl-content {
  flex: 1;
  min-width: 0;
}

.pd-tl-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.pd-tl-type {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.pd-tl-type i { font-size: 13px; }

.pd-tl-time {
  font-size: 12px;
  color: var(--text-tertiary);
}

.pd-tl-subject {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.pd-tl-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Sidebar cards */
.pd-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pd-card {
  background: var(--bg-smoke);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.pd-card-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

.pd-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.pd-detail-row:last-child { border-bottom: none; }

.pd-detail-label { color: var(--text-tertiary); }
.pd-detail-val { color: var(--text-primary); font-weight: 500; }

.pd-card-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: opacity 150ms;
}

.pd-card-row:hover { opacity: 0.7; text-decoration: none; color: inherit; }
.pd-card-row:last-child { border-bottom: none; }

.pd-card-row-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-card-count {
  font-weight: 500;
  color: var(--text-tertiary);
  margin-left: 4px;
  font-size: 11px;
}

/* ── Communication History ── */

.pd-comm-header {
  margin-bottom: var(--space-5);
}

.pd-comm-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-3);
}

.pd-comm-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pd-comm-title i {
  font-size: 18px;
  color: var(--text-tertiary);
}

.pd-comm-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}

.pd-comm-channels {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pd-comm-channel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-page);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
}

.pd-comm-channel:hover {
  background: var(--bg-secondary);
  border-color: var(--border-focus);
}

.pd-comm-channel.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.pd-comm-channel i { font-size: 14px; }

.pd-comm-channel-count {
  font-size: 11px;
  opacity: 0.7;
}

/* Communication Timeline */

.pd-comm-timeline {
  position: relative;
  padding-left: 28px;
}

.pd-comm-timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
  border-radius: 1px;
}

.pd-comm-item {
  position: relative;
  padding-bottom: var(--space-4);
}

.pd-comm-item:last-child { padding-bottom: 0; }

.pd-comm-dot {
  position: absolute;
  left: -22px;
  top: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--bg-page);
  z-index: 1;
}

.pd-comm-dot.outbound { background: var(--accent); }
.pd-comm-dot.inbound { background: var(--status-running); }

.pd-comm-card {
  background: var(--bg-smoke);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  transition: box-shadow 150ms ease;
}

.pd-comm-card:hover {
  box-shadow: var(--shadow-sm);
}

.pd-comm-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.pd-comm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.pd-comm-badge i { font-size: 12px; }

.pd-comm-dir {
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.pd-comm-dir.outbound { color: var(--accent); }
.pd-comm-dir.inbound { color: var(--status-running); }
.pd-comm-dir i { font-size: 12px; }

.pd-comm-time {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-left: auto;
}

.pd-comm-subject {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.4;
}

.pd-comm-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Empty state */
.pd-comm-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-tertiary);
}

.pd-comm-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.3;
}

.pd-comm-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.pd-comm-empty-desc {
  font-size: 13px;
}

/* ── Audit Log Timeline ── */

.pd-audit-timeline {
  position: relative;
  margin-top: var(--space-2);
}

.pd-audit-item { position: relative; }

/* Compact clickable summary row — the only thing shown until expanded. */
.pd-audit-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}

.pd-audit-row:hover { background: whitesmoke; }

/* Gray, unfilled event icon — the shape signals the event type. */
.pd-audit-dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}

.pd-audit-dot i { font-size: 15px; line-height: 1; }

.pd-audit-dot.deleted { color: var(--status-danger); }

.pd-audit-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pd-audit-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Sub-line: who made the change and exactly when. */
.pd-audit-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-tertiary);
}

.pd-audit-who {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--text-secondary);
}

.pd-audit-who i { font-size: 12px; }

.pd-audit-dotsep { opacity: 0.5; }

.pd-audit-when { white-space: nowrap; }

.pd-audit-chevron {
  flex-shrink: 0;
  align-self: center;
  font-size: 15px;
  color: var(--text-tertiary);
  transition: transform 150ms ease;
}

.pd-audit-item.open .pd-audit-chevron { transform: rotate(180deg); }

/* Detail panel — hidden until the row is expanded. */
.pd-audit-detail {
  display: none;
  padding: 2px 10px 10px 42px;
}

.pd-audit-item.open .pd-audit-detail { display: block; }

.pd-audit-metarow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-tertiary);
}

.pd-audit-actor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--text-secondary);
}

.pd-audit-actor i { font-size: 12px; }

.pd-audit-commit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px solid var(--border);
  padding: 1px 7px;
  border-radius: var(--radius-sm);
}

.pd-audit-commit i { font-size: 11px; }

.pd-audit-changes {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pd-audit-change {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: 13px;
}

.pd-audit-field {
  flex-shrink: 0;
  min-width: 90px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.pd-audit-vals {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.pd-audit-from {
  color: var(--text-tertiary);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--text-tertiary) 55%, transparent);
}

.pd-audit-to {
  color: var(--text-primary);
  font-weight: 500;
}

.pd-audit-arrow {
  font-size: 12px;
  color: var(--text-tertiary);
}

.pd-audit-empty {
  color: var(--text-tertiary);
  font-style: italic;
}

.pd-audit-add,
.pd-audit-remove {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.pd-audit-add {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.pd-audit-remove {
  color: var(--text-tertiary);
  background: color-mix(in srgb, var(--text-tertiary) 12%, transparent);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--text-tertiary) 45%, transparent);
}

/* ── Sidebar Notes ── */

.pd-sidebar-note-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.pd-sidebar-note-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pd-sidebar-note-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: auto;
  font-size: 11px;
  color: var(--text-tertiary);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
  user-select: none;
}
.pd-sidebar-note-box.is-typing .pd-sidebar-note-hint { opacity: 1; transform: translateY(0); }
.pd-sidebar-note-hint kbd {
  font-family: var(--font-sans);
  font-size: 10.5px;
  line-height: 1;
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--bg-page);
  color: var(--text-secondary);
}

.pd-sidebar-note-input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFAF6 100%);
  resize: none;
  transition: border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
              background 260ms ease;
}

.pd-sidebar-note-input::placeholder {
  color: var(--text-tertiary);
}

.pd-sidebar-note-input:focus {
  outline: none;
  border-color: var(--border-focus);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--border-focus) 14%, transparent);
}

/* Notes stack as individual "paper" cards */
.pd-sidebar-notes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: var(--space-3);
}

.pd-sidebar-note {
  position: relative;
  padding: 14px 16px 14px 18px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFAF6 100%);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transform-origin: center top;
  animation: pd-note-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--note-i, 0) * 55ms);
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 340ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 340ms ease;
}

/* Warm accent spine down the left edge */
.pd-sidebar-note::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 82%, transparent),
    color-mix(in srgb, var(--accent) 42%, transparent));
  opacity: 0.75;
}

.pd-sidebar-note:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

.pd-sidebar-note-meta {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 11px;
  margin-bottom: 7px;
}

.pd-note-author {
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.pd-note-time {
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

.pd-note-time::before {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-tertiary);
  opacity: 0.55;
  transform: translateY(-2px);
}

.pd-sidebar-note-body {
  font-size: 13.5px;
  color: var(--text-primary);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

@keyframes pd-note-in {
  from { opacity: 0; transform: translateY(9px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Freshly-added note drops in from the top and unfolds downward. */
@keyframes pd-note-drop {
  0%   { opacity: 0; transform: translateY(-14px) scaleY(0.94); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
.pd-sidebar-note.is-new {
  transform-origin: top center;
  animation: pd-note-drop 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .pd-sidebar-note { animation: none; }
  .pd-sidebar-note:hover { transform: none; }
  .pd-sidebar-note-input { transition: none; }
}

/* Legacy compat (keep for other pages using these) */
.person-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.person-detail-avatar { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; font-size: 26px; font-weight: 700; color: #FFFFFF; flex-shrink: 0; }
.person-detail-avatar-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.person-detail-grid { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-6); }

@media (max-width: 767px) {
  .content:has(.pd-admin-detail) {
    padding: var(--space-4);
  }
  .pd { max-width: 100%; }
  .pd-admin-layout { grid-template-columns: 1fr; }
  .pd-profile-panel { position: static; }
  .pd-tabs { margin-left: calc(var(--space-4) * -1); margin-right: calc(var(--space-4) * -1); padding: 0 var(--space-4); }
  .pd-admin-card { padding: 16px; }
  .pd-admin-card-head { flex-direction: column; }
  .pd-info-grid { grid-template-columns: 1fr; }
  .pd-info-item,
  .pd-info-item:nth-child(2n) { padding-left: 0; padding-right: 0; }
  .pd-body { grid-template-columns: 1fr; }
  .pd-header { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .pd-contact { gap: 6px; }
  .pd-chip { font-size: 12px; padding: 5px 10px; }
  .pd-note-box { flex-direction: column; }
}

/* Section blocks */
.section-block {
  margin-bottom: var(--space-5);
}

/* Timeline */
.timeline-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--bg-secondary);
}

.timeline-meta {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
}

.timeline-body {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Relationship badges */
.relationship-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--status-review) 12%, transparent);
  color: var(--status-review);
  text-transform: capitalize;
}

/* ── Relationships tab (monochrome) ─────────────────────────────────────── */
.rel-add-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: #3a3a40; background: #f2f2f4;
  border: 1px solid #e3e3e7; border-radius: var(--radius-pill);
  padding: 5px 12px; cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.rel-add-btn:hover { background: #e9e9ec; border-color: #d4d4d9; color: #1f1f24; }
.rel-add-btn i { font-size: 13px; }

.rel-add-form {
  margin: 4px 0 14px;
  padding: 12px;
  background: #f7f7f8;
  border: 1px solid #ececef;
  border-radius: var(--radius-md);
}
.rel-add-row { display: flex; gap: 8px; align-items: stretch; }
.rel-search-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.rel-input, .rel-select {
  width: 100%; height: 38px; box-sizing: border-box;
  font-family: inherit; font-size: 13px; color: #1f1f24;
  background: #fff; border: 1px solid #dcdce0; border-radius: 9px;
  padding: 0 11px;
}
.rel-select { width: auto; min-width: 118px; flex: 0 0 auto; cursor: pointer; }
.rel-input:focus, .rel-select:focus { outline: none; border-color: #9a9aa2; box-shadow: 0 0 0 3px rgba(0,0,0,0.05); }
.rel-save {
  flex: 0 0 auto; height: 38px; padding: 0 16px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: #fff; background: #26262b; border: 1px solid #26262b; border-radius: 9px; cursor: pointer;
  transition: background 140ms ease, opacity 140ms ease;
}
.rel-save:hover:not(:disabled) { background: #14141a; }
.rel-save:disabled { opacity: 0.4; cursor: default; }

.rel-results {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid #e0e0e5; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16,24,40,0.14);
  padding: 4px;
}
.rel-result {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 8px; border: none; background: none; border-radius: 8px;
  cursor: pointer; text-align: left; font-family: inherit;
}
.rel-result:hover { background: #f2f2f4; }
.rel-result-name { font-size: 13px; color: #2a2a30; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-result-co { color: #9096a0; }

.rel-row { display: flex; align-items: center; gap: 0; }
.rel-row-main { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; }
.rel-badge { background: #efeff1; color: #55555c; }
.rel-reason { font-size: 12px; color: #8a8a92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; margin-top: 1px; }
.rel-remove {
  flex: 0 0 auto; width: 28px; height: 28px; margin-left: 6px;
  display: grid; place-items: center; border-radius: 7px;
  border: none; background: none; color: #b0b0b8; font-size: 20px; line-height: 1; cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.rel-remove:hover { background: #f0f0f2; color: #55555c; }
.rel-suggest-add {
  flex: 0 0 auto; margin-left: 8px; padding: 5px 12px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: #3a3a40; background: #f2f2f4; border: 1px solid #e3e3e7; border-radius: var(--radius-pill); cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.rel-suggest-add:hover:not(:disabled) { background: #26262b; color: #fff; border-color: #26262b; }
.rel-empty { color: #9096a0; }

.related-person-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  cursor: pointer;
  border-bottom: 1px solid var(--bg-secondary);
}

.related-person-item:last-child {
  border-bottom: none;
}

/* ─── Events ─── */
/* Legacy events grid (kept for compat) */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

/* ─── Luma-style Events Timeline ─── */

.luma-events {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.luma-events-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
}

.luma-events-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.luma-tab-toggle {
  display: inline-flex;
  background: var(--bg-secondary);
  border-radius: var(--radius-pill);
  padding: 3px;
}

.luma-tab {
  padding: 6px 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 150ms ease;
}

.luma-tab:hover { color: var(--text-primary); }

.luma-tab.active {
  background: var(--bg-page);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.luma-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--accent, #e8552e);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.luma-tab.active .luma-tab-badge {
  background: rgba(232, 85, 46, 0.14);
  color: var(--accent, #e8552e);
}

.luma-timeline {
  position: relative;
}

.luma-day-group {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0;
  min-height: 0;
}

.luma-day-group + .luma-day-group {
  margin-top: var(--space-5);
}

.luma-date-label {
  padding-top: var(--space-3);
  position: relative;
  padding-right: var(--space-5);
}

.luma-date-label::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.luma-date-main {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.luma-date-weekday {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-tertiary);
}

.luma-day-events {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.luma-ev-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 150ms ease;
  animation: fadeInUp 0.3s ease both;
}

.luma-ev-row:hover {
  background: var(--bg-smoke);
}

.luma-ev-body {
  flex: 1;
  min-width: 0;
}

.luma-ev-time {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.luma-ev-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 8px;
}

.luma-ev-organizer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.luma-ev-organizer i {
  font-size: 13px;
  color: var(--text-tertiary);
}

.luma-ev-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.luma-ev-location i {
  font-size: 13px;
}

.luma-ev-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.luma-ev-labels {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.luma-ev-thumb {
  width: 180px;
  height: 135px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-secondary);
}

.luma-ev-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.luma-ev-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 28px;
  opacity: 0.3;
}

@media (max-width: 767px) {
  .luma-day-group {
    grid-template-columns: 1fr;
  }

  .luma-date-label {
    padding-right: 0;
    padding-bottom: var(--space-2);
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
  }

  .luma-date-label::after { display: none; }

  .luma-ev-thumb {
    width: 120px;
    height: 90px;
  }

  .luma-ev-title { font-size: 15px; }

  .luma-events-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .luma-events-actions {
    width: 100%;
    justify-content: flex-start;
    gap: var(--space-2);
  }

  .luma-tab-toggle {
    width: 100%;
    display: flex;
  }

  .luma-tab {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
  }

  .luma-events-actions .btn {
    flex: 1 1 calc(50% - var(--space-2));
    justify-content: center;
  }
}

/* Event status badges */
.event-status-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  text-transform: capitalize;
}

.event-status-badge.draft { color: var(--text-tertiary); background: var(--bg-secondary); }
.event-status-badge.upcoming { color: var(--status-open); background: color-mix(in srgb, var(--status-open) 10%, transparent); }
.event-status-badge.active { color: var(--status-success); background: color-mix(in srgb, var(--status-success) 10%, transparent); }
.event-status-badge.completed { color: var(--status-closed); background: color-mix(in srgb, var(--status-closed) 10%, transparent); }
.event-status-badge.cancelled { color: var(--status-danger); background: color-mix(in srgb, var(--status-danger) 10%, transparent); }

.event-type-tag {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: capitalize;
}

/* ─── Luma-style Event Detail ─── */

.evd {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.evd-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.evd-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.evd-breadcrumb:hover { color: var(--accent); text-decoration: none; }
.evd-breadcrumb i { font-size: 14px; }

/* Flex child must be allowed to shrink or the title ellipsis never kicks in. */
.evd-top-left {
  flex: 1;
  min-width: 0;
}

.evd-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.evd-top-right {
  flex-shrink: 0;
  padding-top: 24px;
}

/* Action buttons row */
.evd-actions {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* Event detail tabs */
.evd-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
}

.evd-tab {
  padding: 10px 20px;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.evd-tab:hover { color: var(--text-primary); }

.evd-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.evd-tab-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  margin-left: 4px;
}

.evd-tab.active .evd-tab-count {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.evd-tab-content {
  display: none;
}

.evd-tab-content.active {
  display: block;
  animation: pageReveal 0.25s ease both;
}

/* ── Auto-sync interval selector (sits next to the Sync Luma button) ── */
.evd-autosync { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-page); color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color 150ms ease, color 150ms ease; }
.evd-autosync:hover { border-color: var(--accent); color: var(--text-primary); }
.evd-autosync > i { font-size: 15px; color: var(--accent); flex-shrink: 0; }
.evd-autosync-cap { color: var(--text-tertiary); }
.evd-autosync-select { border: 0; background: transparent; color: var(--text-primary); font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; outline: none; padding: 2px 2px 2px 0; }
.evd-autosync-select:focus-visible { outline: 2px solid var(--accent); border-radius: 4px; }

/* ── AI Signals tab ── */
.sig-wrap { max-width: none; }

.sig-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  margin: 0 0 20px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.sig-header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sig-header-mark {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffe6d3, #ffd0b0);
  color: #b8471f;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.sig-header-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.sig-header-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}

.sig-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Grouped section — heading + card stack */
.sig-group { }
.sig-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 0 2px;
}
.sig-group-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.sig-group-count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(17, 19, 25, 0.06);
  color: var(--text-secondary);
}
.sig-group-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Card — clean surface, no glassy soup */
.sig-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: box-shadow 150ms ease, border-color 150ms ease;
  animation: pageReveal 0.25s ease both;
}
.sig-card:hover {
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Kind-scoped icon tile (light pastel, dark tint icon) */
.sig-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.sig-kind-matchmaking      .sig-icon { background: #ffe6d3; color: #b8471f; }
.sig-kind-audience_theme   .sig-icon { background: #d5ecff; color: #0e5590; }
.sig-kind-speaker_briefing .sig-icon { background: #ecdeff; color: #5b28a3; }
.sig-kind-risk             .sig-icon { background: #ffdada; color: #a41c1c; }
.sig-kind-logistics        .sig-icon { background: #d9f2e0; color: #1a6b3d; }
.sig-kind-error            .sig-icon { background: #fef1cc; color: #815e00; }

.sig-body { min-width: 0; }
.sig-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.sig-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.5;
}

/* Attendee chips row */
.sig-attendees {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.sig-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: rgba(17, 19, 25, 0.05);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 220px;
}
.sig-chip-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #dedede;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.sig-chip-avatar-fallback {
  background: linear-gradient(135deg, #ffb989, #e8552e);
}
.sig-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sig-chip-more {
  padding: 4px 10px;
  background: rgba(17, 19, 25, 0.05);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Evidence quotes — real quote block, not a chip */
.sig-evidence {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(17, 19, 25, 0.035);
  border-left: 3px solid rgba(232, 85, 46, 0.5);
  border-radius: 0 10px 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sig-quote {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  font-style: italic;
}
.sig-quote-who {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-style: normal;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Footer meta row */
.sig-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-tertiary);
}
.sig-conf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text-secondary);
}
.sig-conf-bar {
  position: relative;
  width: 44px; height: 5px;
  background: rgba(17, 19, 25, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.sig-conf-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #ffb989, #e8552e);
  border-radius: 999px;
}
.sig-time { color: var(--text-tertiary); }
.sig-dismiss {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  transition: background 120ms ease, color 120ms ease;
}
.sig-dismiss:hover {
  background: rgba(17, 19, 25, 0.06);
  color: var(--text-primary);
}

/* Empty + loading + error states */
.sig-empty {
  padding: 48px 20px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-page);
  color: var(--text-secondary);
}
.sig-empty-mark {
  width: 56px; height: 56px;
  border-radius: 16px;
  margin: 0 auto 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ffe6d3, #ffd0b0);
  color: #b8471f;
  font-size: 26px;
}
.sig-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.sig-empty-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 440px;
  margin: 0 auto;
}
.sig-empty-error {
  border-color: rgba(220, 70, 70, 0.4);
}
.sig-empty-error .sig-empty-mark {
  background: #ffdada; color: #a41c1c;
}
.sig-empty-error .sig-empty-title { color: #7a1414; }

.sig-loading {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}
.sig-loading::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 10px;
  vertical-align: middle;
  border: 2px solid rgba(17, 19, 25, 0.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pageReveal 0.2s ease both, spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Guest drawer + RSVP answer views ── */
.person-avatar-circle.md {
  width: 44px;
  height: 44px;
  font-size: 16px;
  margin-bottom: 0;
  flex-shrink: 0;
}

/* View toggle — segmented control next to the guest count */
.gd-view-toggle {
  display: inline-flex;
  padding: 2px;
  background: rgba(17, 19, 25, 0.05);
  border-radius: 999px;
}
.gd-view-btn {
  border: 0;
  background: transparent;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.gd-view-btn.active {
  background: var(--bg-page);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Answers badge on guest chips */
.gd-ans-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  padding: 2px 7px;
  border-radius: 999px;
}
.gd-ans-badge i { font-size: 11px; }

/* Drawer internals */
.gd-head {
  align-items: flex-start;
  gap: 12px;
}
.gd-head-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.gd-head-name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gd-head-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.gd-checkin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #1a6b3d;
  background: #d9f2e0;
  padding: 2px 8px;
  border-radius: 999px;
}
.gd-body { padding-top: 16px; }
.gd-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin: 18px 0 8px;
}
.gd-section-label:first-child { margin-top: 0; }
.gd-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-primary);
}
.gd-row i {
  font-size: 14px;
  color: var(--text-tertiary);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.gd-qa {
  padding: 12px 14px;
  background: rgba(17, 19, 25, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
}
.gd-qa-q {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.gd-qa-a {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
}
.gd-qa-empty {
  color: var(--text-tertiary);
  font-style: italic;
}
.gd-qa-none {
  font-size: 12.5px;
  color: var(--text-tertiary);
  line-height: 1.5;
  padding: 2px 0 4px;
}
.gd-sync-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}
.gd-notes {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.55;
  white-space: pre-wrap;
  padding: 2px 0 4px;
}
/* Profile highlights — clean flat rows with hairline separators instead
   of boxed gray cards. */
.gd-prof-grid {
  display: flex;
  flex-direction: column;
}
.gd-prof {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.gd-prof:last-child { border-bottom: none; }
.gd-prof > i {
  font-size: 14px;
  color: var(--text-tertiary);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.gd-prof-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.gd-prof-k {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}
.gd-prof-v {
  font-size: 13.5px;
  color: var(--text-primary);
  line-height: 1.4;
  word-break: break-word;
}
.gd-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gd-nolink {
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* By-question view — accordion, collapsed by default */
.gd-byq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
}
.gd-byq-group { }
.gd-byq-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.gd-byq-head:hover {
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.gd-byq-chev {
  font-size: 14px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform 150ms ease;
}
.gd-byq-group:not(.collapsed) .gd-byq-chev {
  transform: rotate(90deg);
}
.gd-byq-q {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gd-byq-rows {
  padding: 10px 2px 2px;
}
.gd-byq-group.collapsed .gd-byq-rows {
  display: none;
}
.gd-byq-count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(17, 19, 25, 0.06);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.gd-byq-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.gd-byq-row:hover {
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.gd-byq-row-body { min-width: 0; }
.gd-byq-row-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.gd-byq-row-answer {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
}

.evd-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}

.evd-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.evd-action-btn i { font-size: 16px; }

/* Two-column body */
.evd-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

/* Left — poster card */
.evd-poster {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.evd-banner {
  height: 200px;
  overflow: hidden;
  background: var(--bg-secondary);
  position: relative;
}

.evd-cover-edit {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms ease, background 150ms ease;
  z-index: 2;
}

.evd-banner:hover .evd-cover-edit,
.evd-cover-edit:focus-visible {
  opacity: 1;
}

.evd-cover-edit:hover {
  background: rgba(0, 0, 0, 0.75);
}

@media (hover: none) {
  .evd-cover-edit { opacity: 1; }
}

.evd-cover-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}

.evd-cover-pick {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 150ms;
}

.evd-cover-pick:hover {
  border-color: var(--accent);
}

.evd-cover-pick img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.evd-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.evd-banner-placeholder {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
}

.evd-poster-info {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.evd-poster-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.evd-poster-date,
.evd-poster-time,
.evd-poster-loc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.evd-poster-date i,
.evd-poster-time i,
.evd-poster-loc i {
  font-size: 14px;
  color: var(--text-tertiary);
  width: 16px;
  text-align: center;
}

/* Hosted by */
/* Going — overlapping avatar strip of confirmed guests (Luma-style) */
.evd-going {
  margin-top: 24px;
}
.evd-going-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.evd-going-strip {
  display: flex;
  align-items: center;
  padding-left: 4px;
}
.evd-going-av {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: -8px;
  border: 2px solid var(--bg-page);
  background: var(--bg-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.evd-going-av:first-child { margin-left: 0; }
.evd-going-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.evd-going-av:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  z-index: 3;
}
/* Custom name tooltip — instant, styled, above the circle */
.evd-going-av::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: rgba(17, 19, 25, 0.92);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 9px;
  border-radius: 7px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 5;
}
.evd-going-av:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.evd-going-more {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
}

/* About (under the cover, Luma-style).
   Deliberately NOT using .markdown-body — github-markdown-css loads after
   this sheet and would win every same-specificity rule (that's what made
   the first pass look cramped). The About block owns its own type scale. */
.evd-about {
  margin-top: 24px;
}

.evd-about-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.evd-about-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-primary);
  overflow-wrap: break-word;
}
.evd-about-body p {
  margin: 0 0 14px;
}
.evd-about-body p:last-child { margin-bottom: 0; }
.evd-about-body h1,
.evd-about-body h2,
.evd-about-body h3,
.evd-about-body h4 {
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 24px 0 10px;
  border: 0;
  padding: 0;
}
.evd-about-body h1 { font-size: 18px; }
.evd-about-body h2 { font-size: 16.5px; }
.evd-about-body h3,
.evd-about-body h4 { font-size: 15.5px; }
.evd-about-body h1:first-child,
.evd-about-body h2:first-child,
.evd-about-body h3:first-child,
.evd-about-body h4:first-child { margin-top: 0; }
.evd-about-body ul,
.evd-about-body ol {
  margin: 10px 0 18px;
  padding-left: 24px;
}
.evd-about-body li {
  margin: 7px 0;
  padding-left: 2px;
}
.evd-about-body li::marker { color: var(--text-tertiary); }
.evd-about-body strong { font-weight: 650; }
.evd-about-body a { color: var(--accent); font-weight: 600; }
.evd-about-body img {
  max-width: 100%;
  border-radius: 10px;
  margin: 6px 0 14px;
}
.evd-about-body blockquote {
  margin: 14px 0;
  padding: 8px 16px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: rgba(17, 19, 25, 0.03);
  border-radius: 0 8px 8px 0;
  color: var(--text-secondary);
}
.evd-about-body blockquote p { margin: 6px 0; }
.evd-about-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: var(--bg-secondary);
  padding: 1px 5px;
  border-radius: 5px;
}
.evd-about-body pre {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 14px 0;
}
.evd-about-body pre code { background: transparent; padding: 0; }
.evd-about-body hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

/* Luma link */
.evd-luma-row {
  margin-top: var(--space-3);
}

.evd-luma-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.evd-luma-link:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.evd-labels {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Right — When & Where card */
.evd-when-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.evd-when-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.evd-when-row {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.evd-when-cal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 52px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 8px;
  flex-shrink: 0;
}

.evd-when-cal-mon {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  line-height: 1;
}

.evd-when-cal-day {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.evd-when-info { flex: 1; }

.evd-when-date {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.evd-when-time {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.evd-where-row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}

.evd-where-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  color: var(--accent);
  font-size: 15px;
  flex-shrink: 0;
}

.evd-where-info { flex: 1; }

.evd-where-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

/* Description card */
.evd-desc-card {
  background: color-mix(in srgb, var(--bg-smoke) 40%, #ffffff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.evd-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}

.evd-desc-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Guests section */
.evd-section {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  margin-bottom: var(--space-5);
}

.evd-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.evd-section-head h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.evd-guest-count {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.evd-guest-count::before {
  content: '\u2022';
  color: var(--status-success);
  margin-right: 4px;
}

.evd-cap {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
  margin-left: 8px;
}

.evd-guest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2px;
}

.evd-curation-panel {
  margin-bottom: var(--space-5);
}

.evd-curation-saved {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-page);
  padding: var(--space-4);
  margin-top: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.evd-curation-card + .evd-curation-saved {
  margin-top: var(--space-4);
}

.evd-curation-saved-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.evd-curation-saved-head p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.evd-curation-saved-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.evd-curation-saved-row {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
}

.evd-curation-saved-item {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 180px;
  max-width: 280px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.evd-curation-saved-item:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.evd-curation-saved-row.is-active .evd-curation-saved-item {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-page));
}

.evd-curation-saved-item span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}

.evd-curation-saved-item small {
  color: var(--text-tertiary);
  font-size: 12px;
}

.evd-curation-saved-actions {
  display: inline-flex;
  gap: 4px;
}

.evd-curation-saved-actions button {
  width: 34px;
  min-width: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.evd-curation-saved-actions button:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.evd-curation-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-page);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.evd-curation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.evd-curation-head-main { min-width: 0; flex: 1; }

/* In-place name for the proposal — an h3 that happens to be editable. */
.evd-curation-title-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 2px 0 4px;
  border: none;
  border-bottom: 1.5px dashed var(--border);
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.15s ease;
}
.evd-curation-title-input:hover { border-bottom-color: color-mix(in srgb, var(--text-primary) 30%, var(--border)); }
.evd-curation-title-input:focus { border-bottom-color: var(--accent); border-bottom-style: solid; }

/* Inner view switch (List / Visualization) + counts on the right. */
.evd-curation-toolrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--space-4);
}

.evd-curation-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--bg-smoke);
  border: 1px solid var(--border);
}
.evd-curation-seg button {
  appearance: none;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.evd-curation-seg button:hover { color: var(--text-primary); }
.evd-curation-seg button.active {
  background: var(--bg-page);
  color: var(--text-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.evd-curation-counts {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.evd-curation-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.evd-curation-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.evd-curation-card p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* "Why this grouping" — collapsed by default so the card leads with the
   groups themselves rather than a block of explanation text. */
.evd-curation-summary {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: var(--space-4);
}

.evd-curation-summary summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.evd-curation-summary summary::-webkit-details-marker { display: none; }

.evd-curation-summary summary::before {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--text-tertiary);
  border-bottom: 1.5px solid var(--text-tertiary);
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.evd-curation-summary[open] summary::before { transform: rotate(45deg); }

.evd-curation-summary > span {
  display: block;
  padding: 0 12px 10px;
}

.evd-curation-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.evd-curation-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-page);
}

.evd-curation-stat strong {
  color: var(--text-primary);
  font-size: 16px;
}

.evd-curation-stat span {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 650;
}

.evd-curation-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-page);
  margin-top: var(--space-3);
  padding: var(--space-4);
}

/* Clean head: the group label carries the accent (dot + tinted chip),
   everything else stays monochrome. */
.evd-curation-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.evd-curation-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--group-accent, var(--accent)) 10%, var(--bg-page));
  color: color-mix(in srgb, var(--group-accent, var(--accent)) 82%, #000);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evd-curation-group-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--group-accent, var(--accent));
}

.evd-curation-group-n {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.evd-curation-group-why {
  margin: 8px 2px 0 !important;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.evd-curation-guests {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.evd-curation-guest {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.evd-curation-guest:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--shadow-sm);
}

.evd-curation-meta-sep { color: var(--text-tertiary); opacity: 0.6; }

.evd-curation-guest-main {
  min-width: 0;
}

.evd-curation-guest-name {
  font-size: 14px;
  font-weight: 650;
  color: var(--text-primary);
}

.evd-curation-guest-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.evd-curation-meta-pill {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
}

.evd-curation-guest-reason {
  margin-top: 8px;
  padding-left: 8px;
  border-left: 2px solid var(--group-accent, var(--accent));
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* ── Curation clustered-bubbles visualization ── */
.evd-cb-wrap {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-page);
  overflow: hidden;
}

.evd-cb-wrap svg { display: block; }

.evd-cb-node { cursor: pointer; }
.evd-cb-node image { pointer-events: none; }
.evd-cb-node text { pointer-events: none; user-select: none; }

.evd-cb-label {
  position: absolute;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}
.evd-cb-label b {
  font-weight: 700;
  color: color-mix(in srgb, var(--group-accent, var(--accent)) 82%, #000);
}
.evd-cb-label-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--group-accent, var(--accent));
}

.evd-cb-tip {
  position: absolute;
  z-index: 4;
  max-width: 220px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #1d1b1a;
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.evd-cb-tip strong { display: block; font-size: 12.5px; }
.evd-cb-tip span { display: block; color: rgba(255, 255, 255, 0.75); margin-top: 1px; }
.evd-cb-tip em { display: block; font-style: normal; color: rgba(255, 255, 255, 0.62); margin-top: 5px; }

.evd-curation-loading {
  display: block;
  padding-top: var(--space-6);
}

/* Centered loading design: spinner on top, copy beneath, elapsed +
   Cancel as a small row under the copy, skeleton groups below. */
.evd-curation-loadhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  max-width: 480px;
  margin: 0 auto var(--space-2);
}

.evd-curation-loadhead .evd-curation-spinner {
  width: 44px;
  height: 44px;
  border-width: 3px;
}

.evd-curation-loadhead-main {
  min-width: 0;
}

.evd-curation-loadhead-main h3 {
  margin: 4px 0 0;
}
/* Keep the loading prompt minimal — clamp to two lines, no overflow. */
.evd-curation-loadprompt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
  line-height: 1.35;
}

.evd-curation-loadhead-side {
  display: flex;
  align-items: center;
  gap: 10px;
}

.evd-curation-elapsed {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  border-radius: 999px;
  padding: 4px 10px;
}

.evd-curation-stage {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.evd-curation-skel-body {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

/* Guest header controls: group-by select + combined CSV menu */
.evd-groupby {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-page);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
}
.evd-groupby:focus {
  outline: none;
  border-color: var(--accent);
}
.evd-groupby i { font-size: 13px; }

.evd-groupby-menu { position: relative; }
#evd-groupby-items { min-width: 180px; }
#evd-groupby-items button i {
  font-size: 14px;
  color: var(--text-tertiary);
}
#evd-groupby-items button.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
#evd-groupby-items button.active i { color: var(--accent); }

.evd-csv-menu { position: relative; }
.evd-csv-menu-items {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 160px;
  padding: 4px;
  z-index: 50;
}
.evd-csv-menu-items button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.evd-csv-menu-items button:hover { background: var(--bg-secondary); }

#evd-curation-toggle.active {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.evd-curation-skel-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: var(--bg-page);
}

.evd-curation-skel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.evd-curation-btn-spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  animation: search-spin 0.8s linear infinite;
  vertical-align: -1px;
}

.evd-curation-preset:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Guest list grouped by lifecycle (Invited/Maybe/Confirmed/Attended/…) */
.evd-guest-group {
  margin-bottom: var(--space-5);
}

.evd-guest-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 10px;
  padding: 2px 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}

.evd-guest-group-head:hover { color: var(--text-primary); }

.evd-guest-group-caret {
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 120ms ease;
  flex-shrink: 0;
  opacity: .7;
}

.evd-guest-group.is-collapsed .evd-guest-group-caret {
  transform: rotate(-45deg);
}

.evd-guest-group.is-collapsed .evd-guest-grid {
  display: none;
}

.evd-guest-group-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  border-radius: 999px;
  padding: 1px 8px;
}

.evd-curation-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--bg-secondary);
  border-top-color: var(--accent);
  animation: search-spin 0.8s linear infinite;
  flex-shrink: 0;
}

/* The search-spin keyframes were lost in the fullscreen-search refactor,
   leaving every spinner that referenced them frozen. Restored here. */
@keyframes search-spin { to { transform: rotate(360deg); } }

.evd-curation-error {
  border-color: color-mix(in srgb, var(--status-danger) 35%, var(--border));
}

.evd-curation-empty,
.evd-curation-raw {
  color: var(--text-tertiary);
  font-size: 13px;
}

.evd-curation-raw {
  white-space: pre-wrap;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  overflow: auto;
}

/* A guest that just checked in pulses softly as they hop into the
   "Checked In" group on a live refresh. */
.evd-guest-chip.evd-chip-fresh {
  animation: evdChipFresh 2.4s ease;
}
@keyframes evdChipFresh {
  0%, 55% { box-shadow: 0 0 0 2px var(--accent, #e8552e), 0 6px 18px rgba(232, 85, 46, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(232, 85, 46, 0); }
}
.evd-guest-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--radius-md);
  transition: background 120ms ease;
}

.evd-guest-chip:hover { background: var(--bg-smoke); }

.evd-guest-info { flex: 1; min-width: 0; }

.evd-guest-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.evd-guest-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 2px;
}

.evd-empty {
  color: var(--text-tertiary);
  font-size: 14px;
  padding: var(--space-4) 0;
}

@media (max-width: 767px) {
  .evd-body { grid-template-columns: 1fr; }
  .evd-title { font-size: 22px; }
  .evd-actions { flex-wrap: wrap; }
  .evd-action-btn { flex: 1; justify-content: center; }
  .evd-guest-grid { grid-template-columns: 1fr; }
  .evd-curation-card { padding: var(--space-4); }
  .evd-curation-head,
  .evd-curation-group-head {
    flex-direction: column;
  }
  .evd-curation-group-count {
    align-items: flex-start;
    width: 100%;
  }
  .evd-curation-guests { grid-template-columns: 1fr; }
}

/* Attendee cards */
.attendee-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--bg-secondary);
}

.attendee-card:last-child {
  border-bottom: none;
}

/* Attendee status pills */
.attendee-status-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  text-transform: capitalize;
}

/* All statuses render neutral — the guest sections already group by
   status, so per-status rainbow pills were pure noise. */
.attendee-status-pill.confirmed,
.attendee-status-pill.maybe,
.attendee-status-pill.declined,
.attendee-status-pill.invited,
.attendee-status-pill.waitlist { color: var(--text-tertiary); background: var(--bg-secondary); }

/* Attendee role badge */
.attendee-role-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: capitalize;
}

/* Luma link styling */
.luma-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-weight: 500;
}

.luma-link:hover {
  text-decoration: underline;
}

/* Form textarea */
.form-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-page);
  resize: vertical;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ─── Responsive ─── */

@media (max-width: 1199px) {
  .sidebar { width: 220px; min-width: 220px; }
  .detail-layout { grid-template-columns: 1fr 280px; }
  .content { padding: var(--space-5) var(--space-6); }
}

/* Tablet */
@media (max-width: 1023px) {
  .content { padding: var(--space-5) var(--space-5); }
  .header { padding: 0 var(--space-4); gap: var(--space-3); }
  .search-box { min-width: 240px; font-size: 13px; }
  .search-box kbd { display: none; }
  .chat-link span,
  .chat-link:not(:first-child) { font-size: 0; }
  .chat-link i { font-size: 16px; }
}

/* Mobile */
@media (max-width: 767px) {
  .sidebar { display: none; }
  .content { padding: var(--space-4) var(--space-4); }

  /* Header — compact mobile layout */
  .header {
    padding: 0 var(--space-3);
    gap: var(--space-2);
    height: 48px;
    min-height: 48px;
  }

  .header-left { display: none; }

  .header-center { justify-content: stretch; }

  .search-box {
    min-width: 0;
    max-width: none;
    padding: 8px 14px;
    font-size: 13px;
    gap: 8px;
  }

  .search-box kbd { display: none; }

  .header-right { gap: var(--space-2); }

  .chat-link {
    padding: 6px 8px;
    font-size: 0;
    gap: 0;
  }

  .chat-link i {
    font-size: 16px;
  }

  .chat-link .app-link-preview,
  .chat-link .app-link-preview-title {
    font-size: 12px;
  }

    .user-switcher-wrap .avatar {
  border-radius: 50%;
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }


  .modal-backdrop {
    padding: var(--space-3);
  }

  /* Task list — stack vertically */
  .task-list-item {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3);
  }

  .task-list-key { min-width: auto; font-size: 12px; }
  .task-list-title { min-width: 100%; order: 10; font-size: 14px; }
  .task-list-project { font-size: 12px; }
  .task-list-date { min-width: auto; text-align: left; font-size: 12px; }

  /* Layouts that go single-column */
  .detail-layout { grid-template-columns: 1fr; }
  .person-detail-grid { grid-template-columns: 1fr; }
  .doc-layout { grid-template-columns: 1fr; }
  .meta-grid { grid-template-columns: 1fr; }

  /* Board — vertical scroll */
  .board { flex-direction: column; }
  .board-column { min-width: 100%; max-width: 100%; }

  /* Doc TOC — hide on mobile (moves inline) */
  .doc-toc { display: none; }

  /* Breadcrumbs — wrap and shrink */
  .doc-breadcrumbs {
    flex-wrap: wrap;
    gap: 4px;
  }

  .doc-crumb {
    padding: 4px 10px;
    font-size: 12px;
  }

  .doc-crumb-project { margin-left: 0; }

  /* Grids — mobile-friendly columns */
  .people-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .events-grid { grid-template-columns: 1fr; }
  .docs-grid { grid-template-columns: 1fr !important; }

  .people-page-header {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
  }

  .people-page-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    width: 100%;
  }

  .people-page-actions .btn {
    justify-content: center;
  }

  .people-page-actions .btn-primary {
    grid-column: 1 / -1;
  }

  .people-filter-bar {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-2);
  }

  .people-search-wrap,
  .people-search-input {
    width: 100%;
  }

  .label-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .label-filters::-webkit-scrollbar { display: none; }

  .label-filter-pill {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Folder view */
  .folder-hero { gap: var(--space-3); }
  .folder-hero-icon { width: 56px; height: 46px; }
  .folder-hero-overlay { font-size: 18px; }
  .folder-sub-grid { grid-template-columns: 1fr; }

  /* Page title smaller on mobile */
  .page-title { font-size: 22px; }

  /* Form modal — full width on mobile */
  .form-modal {
    width: 100%;
    max-width: 100vw;
    border-radius: 0;
  }

  .form-row { flex-direction: column; gap: 0; }

  /* Profile header — stack on mobile */
  .profile-header { flex-direction: column; text-align: center; }

  /* Mobile menu button */
  .header-left { display: flex !important; }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 100ms;
  }

  .mobile-menu-btn:hover { background: var(--bg-secondary); }

  /* Mobile sidebar slide-in from the LEFT */
  .sidebar.mobile-open {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: 0;
    width: 280px;
    min-width: 280px;
    z-index: 2000;
    animation: slideInLeft 0.25s ease both;
    box-shadow: 16px 0 36px rgba(0, 0, 0, 0.22);
  }

  @keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }
}

/* Mobile menu button — hidden on desktop only.
   Scoping with @media so the @media (max-width: 767px) display:flex above
   isn't overridden by source-order. */
@media (min-width: 768px) {
  .mobile-menu-btn { display: none; }
}

/* Mobile nav overlay */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1999;
  animation: fadeIn 0.2s ease both;
}

/* ─── Sidebar Tabs ─── */

.sidebar-tabs {
  display: flex;
  gap: 0;
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
}

.sidebar-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}

.sidebar-tab:hover {
  color: var(--text-secondary);
}

.sidebar-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.sidebar-tab .icon {
  font-size: 14px;
}

.sidebar-tab-content {
  flex: 1;
  overflow-y: auto;
}

/* ─── Docs Landing Page ─── */

.docs-page {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.docs-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  gap: var(--space-4);
}

.docs-page-subtitle {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.docs-page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.docs-view-toggle {
  display: flex;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
}

.docs-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 16px;
}

.docs-view-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.docs-view-btn.active {
  color: var(--text-primary);
  background: var(--bg-page);
  box-shadow: var(--shadow-sm);
}

/* Grid */
.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.docs-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 72px;
}

.docs-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.docs-card.expanded {
  border-color: var(--accent);
  background: var(--bg-smoke);
}

.docs-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  font-size: 20px;
  flex-shrink: 0;
}

/* Folder icon — neutral gray, matches Gallery and Files */
.docs-folder-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, #797979 12%, transparent);
  color: #797979;
  font-size: 20px;
  flex-shrink: 0;
}

.docs-card-doc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  font-size: 18px;
  flex-shrink: 0;
}

.docs-card-info {
  flex: 1;
  min-width: 0;
}

.docs-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.docs-card-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.docs-card-project {
  display: flex;
  align-items: center;
  gap: 4px;
}

.docs-card-status {
  flex-shrink: 0;
}

.docs-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
  margin-top: var(--space-4);
}

/* Folder expand */
.docs-folder-expand {
  background: var(--bg-smoke);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  animation: fadeSlideIn 0.2s ease;
}

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

.docs-folder-expand-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.docs-folder-expand-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

/* List view */
.docs-list-folder {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2);
  overflow: hidden;
  background: var(--bg-page);
}

.docs-list-folder-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

.docs-list-folder-header:hover {
  background: var(--bg-smoke);
}

.docs-list-folder-icon {
  font-size: 18px;
  flex-shrink: 0;
  color: #797979;
}

.docs-list-folder-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.docs-list-folder-count {
  font-size: 12px;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.docs-list-chevron {
  font-size: 14px;
  color: var(--text-tertiary);
  transition: transform 0.2s ease;
}

.docs-list-folder.expanded .docs-list-chevron {
  transform: rotate(90deg);
}

.docs-list-folder-items {
  display: none;
  border-top: 1px solid var(--border);
}

.docs-list-folder.expanded .docs-list-folder-items {
  display: block;
}

.docs-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-5);
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--border);
}

.docs-list-item:last-child {
  border-bottom: none;
}

.docs-list-item:hover {
  background: var(--bg-smoke);
}

.docs-list-item-icon {
  font-size: 16px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.docs-list-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.docs-list-item-project {
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.docs-list-item-status {
  flex-shrink: 0;
}

.docs-list-item-time {
  font-size: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  min-width: 60px;
  text-align: right;
}

/* ─── Collapsible Sidebar ─── */

.sidebar-collapse-btn {
  position: absolute;
  top: 20px;
  right: 12px;
  background: none;
  border: none;
  color: var(--sidebar-label-color);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 1;
  transition: all 150ms ease;
  opacity: 0;
}

.sidebar:hover .sidebar-collapse-btn,
.sidebar.collapsed .sidebar-collapse-btn {
  opacity: 1;
}

.sidebar-collapse-btn:hover {
  color: #E6E6E6;
  background: var(--sidebar-hover-bg);
}

.sidebar-header {
  position: relative;
}

.sidebar.collapsed .sidebar-collapse-btn {
  position: static;
  display: block;
  margin: 0 auto 4px;
}

.sidebar.collapsed .sidebar-collapse-btn i {
  transform: rotate(180deg);
}

.sidebar {
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.collapsed {
  width: 72px;
  min-width: 72px;
}

.sidebar.collapsed .sidebar-text {
  display: none;
}

.sidebar.collapsed .sidebar-header {
  padding: 14px 8px 8px;
  align-items: center;
}

.sidebar.collapsed .sidebar-logo img {
  margin-right: 0;
}

.sidebar.collapsed .sidebar-logo-img {
  width: min(130px, 100%);
  max-height: 28px;
  object-position: left center;
}

.sidebar.collapsed .sidebar-brand-row {
  justify-content: center;
}

.sidebar.collapsed .sidebar-logo {
  display: none;
}

.sidebar.collapsed .sidebar-platform-menu {
  left: 76px;
}

.sidebar.collapsed .sidebar-section {
  padding: var(--space-2) 8px;
}

.sidebar.collapsed .sidebar-item {
  justify-content: center;
  padding: 8px;
  gap: 0;
}

.sidebar.collapsed .sidebar-item .icon,
.sidebar.collapsed .sidebar-item [class^="icon-"],
.sidebar.collapsed .sidebar-item [class*=" icon-"] {
  width: auto;
  font-size: 18px;
}

.sidebar.collapsed .sidebar-expanded-only {
  display: none !important;
}

.sidebar.collapsed .sidebar-divider {
  margin: var(--space-2) 8px;
}

/* ─── Folder Listing View ─── */

.folder-hero {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.folder-hero-icon {
  position: relative;
  width: 72px;
  height: 60px;
  flex-shrink: 0;
}

.folder-hero-svg {
  width: 100%;
  height: 100%;
}

.folder-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
  font-size: 24px;
}

.folder-hero-info .page-title {
  margin-bottom: 4px;
}

.folder-hero-count {
  font-size: 14px;
  color: var(--text-tertiary);
}

.folder-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

.folder-sub-section {
  margin-bottom: var(--space-6);
}

.folder-sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.folder-sub-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-smoke);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: all 150ms ease;
}

.folder-sub-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  text-decoration: none;
  color: inherit;
}

.folder-sub-icon-wrap {
  position: relative;
  width: 40px;
  height: 34px;
  flex-shrink: 0;
}

.folder-sub-icon-wrap svg {
  width: 100%;
  height: 100%;
}

.folder-sub-icon-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4px;
  font-size: 14px;
}

.folder-sub-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.folder-sub-count {
  font-size: 12px;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.folder-files-section {
  margin-bottom: var(--space-5);
}

.folder-files-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.folder-file-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 120ms ease;
}

.folder-file-row:hover {
  background: var(--bg-smoke);
}

.folder-file-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  font-size: 17px;
  flex-shrink: 0;
}

.folder-file-info {
  flex: 1;
  min-width: 0;
}

.folder-file-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.folder-file-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.folder-file-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ─── Dashboard v3 ─── */

.dash {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.dash-header {
  margin-bottom: var(--space-6);
}

.dash-date {
  color: var(--text-tertiary);
  font-size: 15px;
  margin-top: 4px;
}

.dash-row {
  margin-bottom: var(--space-6);
}

.dash-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.dash-section-head h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-section-head h2 i {
  font-size: 18px;
  color: var(--text-tertiary);
}

.dash-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dash-link i { font-size: 13px; }
.dash-link:hover { text-decoration: none; opacity: 0.85; }

/* ── Document carousel ── */

.dash-carousel-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dash-carousel-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-page);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  flex-shrink: 0;
  transition: all 150ms ease;
}

.dash-carousel-arrow:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.dash-doc-carousel {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -ms-overflow-style: none;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}

.dash-doc-carousel::-webkit-scrollbar { display: none; }

.dash-doc-card {
  flex-shrink: 0;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--space-3) var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 150ms ease;
  text-align: center;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
}

.dash-doc-card:hover {
  background: var(--bg-secondary);
  text-decoration: none;
  color: inherit;
}

.dash-doc-card-page {
  position: relative;
  width: 84px;
  height: 102px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 6px 16px 6px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 30px;
  box-shadow: var(--shadow-sm);
  transition: all 150ms ease;
}

.dash-doc-card:hover .dash-doc-card-page {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--shadow-md);
}

.dash-doc-card-fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: var(--bg-secondary);
  border-bottom-left-radius: 8px;
  border-left: 1px solid var(--border);
  border-top-right-radius: 15px;
  border-bottom: 1px solid var(--border);
}

.dash-doc-card-new .dash-doc-card-page {
  border-style: dashed;
}

.dash-doc-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.3;
}

.dash-doc-card-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Duo: events timeline + people sidebar ── */

.dash-duo {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.dash-panel {
  background: var(--bg-smoke);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* People column (left) — no background */
.dash-people-col {
  /* transparent, no panel styling */
}

/* Events column — no background (legacy) */
.dash-events-col {
  /* transparent, no panel styling */
}

/* Events list */
.dash-ev-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-ev-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 150ms ease;
}

.dash-ev-item:hover {
  background: var(--bg-smoke);
}

.dash-ev-date-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 52px;
  flex-shrink: 0;
  padding-top: 2px;
}

.dash-ev-month {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  line-height: 1;
}

.dash-ev-day {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}

.dash-ev-weekday {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dash-ev-info {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.dash-ev-time {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}

.dash-ev-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 4px;
}

.dash-ev-loc {
  font-size: 13px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.dash-ev-loc i { font-size: 13px; }

/* People list */
.dash-people-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-pl-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px var(--space-2);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background 150ms ease;
}

.dash-pl-row:hover {
  background: var(--bg-secondary);
  text-decoration: none;
  color: inherit;
}

.dash-pl-avatar,
.dash-pl-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.dash-pl-avatar-img { object-fit: cover; }

.dash-pl-info { flex: 1; min-width: 0; }

.dash-pl-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-pl-role {
  display: block;
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Projects tiles ── */

.dash-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

.dash-project-tile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-smoke);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: all 150ms ease;
}

.dash-project-tile:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  text-decoration: none;
  color: inherit;
}

.dash-project-tile-icon {
  font-size: 22px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.dash-project-tile-info {
  flex: 1;
  min-width: 0;
}

.dash-project-tile-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-project-tile-stat {
  display: block;
  font-size: 12px;
  color: var(--text-tertiary);
}

.dashboard-empty {
  text-align: center;
  color: var(--text-tertiary);
  padding: var(--space-5);
  font-size: 14px;
}

/* ── Dashboard: People card grid ── */

.dash-people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.dash-person-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-page);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 200ms ease, transform 200ms ease;
  text-align: center;
}

.dash-person-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.dash-person-avatar,
.dash-person-avatar-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.dash-person-avatar-img { object-fit: cover; }

.dash-person-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.dash-person-role {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.3;
}

/* ── Dashboard: Event card grid ── */

.dash-events-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 2px;
}

.dash-events-carousel::-webkit-scrollbar {
  display: none;
}

.dash-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 2px;
}

.dash-events-grid .dash-event-card {
  width: auto;
  min-width: 0;
}

.dash-event-card {
  width: 340px;
  min-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-page);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
  scroll-snap-align: start;
}

.dash-event-card-all {
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-style: dashed;
  box-shadow: none;
  color: var(--text-tertiary);
}
.dash-event-card-all:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}
.dash-event-card-all-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}
.dash-event-card-all-inner i { font-size: 26px; }

.dash-event-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  text-decoration: none;
}

.dash-event-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.dash-event-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dash-event-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 28px;
}

.dash-event-card-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.dash-event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 42px;
  flex-shrink: 0;
}

.dash-event-month {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  line-height: 1;
}

.dash-event-daynum {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.dash-event-weekday {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dash-event-body {
  flex: 1;
  min-width: 0;
}

.dash-event-time {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-bottom: 1px;
}

.dash-event-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-event-loc {
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.dash-event-loc i { font-size: 12px; }

/* Event attendee avatars on dashboard */
.dash-event-attendees {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
}

.dash-event-attendee {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  border: 2px solid var(--bg-page);
  margin-left: -6px;
  flex-shrink: 0;
}

.dash-event-attendee:first-child {
  margin-left: 0;
}

.dash-event-attendee-img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg-page);
  margin-left: -6px;
  flex-shrink: 0;
}

.dash-event-attendee-img:first-child {
  margin-left: 0;
}

.dash-event-attendee-more {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  border: 2px solid var(--bg-page);
  margin-left: -6px;
  flex-shrink: 0;
}

/* ── Dashboard events: vertical timeline ──────────────────────────────────
   A single chronological column (soonest at top) so time reads top→bottom.
   Each row: a date marker, a dot on a shared vertical rail, then the card.
   The rail is drawn per-row as a connector from this dot to the next; the
   last row hides its connector so the line terminates on the final dot. */
.dash-timeline {
  display: flex;
  flex-direction: column;
  padding: 4px 2px 2px;
}
.dash-tl-item {
  display: grid;
  grid-template-columns: 46px 26px minmax(0, 1fr);
  margin-bottom: 14px;
  cursor: pointer;
}
.dash-tl-item:last-child { margin-bottom: 0; }
.dash-tl-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  text-align: center;
  line-height: 1.05;
}
.dash-tl-day { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.dash-tl-mon {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--accent); margin-top: 2px;
}
.dash-tl-wd {
  font-size: 9px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-tertiary); margin-top: 1px;
}
.dash-tl-rail { position: relative; }
/* Connector runs from this row's dot down to the next row's dot. The offset
   past the row's own bottom = row gap (14) + next dot inset (19) = 33px. */
.dash-tl-rail::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 19px;
  bottom: -33px;
  width: 2px;
  background: var(--border);
}
.dash-tl-item:last-child .dash-tl-rail::before { display: none; }
.dash-tl-dot {
  position: absolute;
  left: 50%;
  top: 19px;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg-page);
  border: 2.5px solid var(--accent);
  box-shadow: 0 0 0 3px var(--bg-page);
  z-index: 1;
}
.dash-tl-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px 16px;
  /* Uniform card height across the timeline — every row matches the fullest
     one (with an attendee strip), content stays vertically centered. */
  min-height: 132px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-page);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.dash-tl-item:hover .dash-tl-card {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.dash-tl-info { flex: 1; min-width: 0; }
.dash-tl-time {
  font-size: 12px; font-weight: 500; color: var(--text-tertiary); margin-bottom: 1px;
}
.dash-tl-title {
  font-size: 14.5px; font-weight: 600; color: var(--text-primary); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-tl-loc {
  font-size: 12px; color: var(--text-tertiary);
  display: flex; align-items: center; gap: 4px; margin-top: 2px;
}
.dash-tl-loc i { font-size: 12px; }
.dash-tl-thumb {
  width: 100px; height: 100px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden; background: var(--bg-secondary);
}
.dash-tl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Upcoming rows (today or later) stand out in the descending timeline via a
   filled + haloed rail dot and a relative-time pill — past rows dim (below). */
.dash-tl-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.dash-tl-meta .dash-tl-time { margin-bottom: 0; }
.dash-tl-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 999px; padding: 2px 8px 2px 7px; white-space: nowrap;
}
.dash-tl-badge svg { width: 11px; height: 11px; }
.dash-tl-item.is-upcoming .dash-tl-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg-page), 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* Past rows recede — dimmed until hover — so the full-strength upcoming rows
   carry the eye. No accent border/background on upcoming: the badge, the
   filled dot, and the contrast against dimmed past rows are enough. */
.dash-tl-item:not(.is-upcoming) { opacity: 0.5; transition: opacity 180ms ease; }
.dash-tl-item:not(.is-upcoming):hover { opacity: 1; }

/* Dashboard month filter — quarter-grouped 12-month bar with a draggable
   ≤3-month window. Minimal: white bar, hairline quarter separators, an
   eased range window that snaps month-to-month. */
.dash-monthfilter { margin: 4px 0 24px; }
.dash-monthfilter-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.dash-monthfilter-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.dash-monthfilter-range { font-size: 12px; font-weight: 700; color: var(--accent, #e8552e); font-variant-numeric: tabular-nums; }
.dash-quarterbar { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 6px; padding: 0 2px; }
.dash-quarter-cell {
  text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  color: var(--text-tertiary, #9aa0aa); transition: color 260ms cubic-bezier(.22,1,.36,1);
}
.dash-quarter-cell.is-in { color: var(--accent, #e8552e); }
.dash-monthbar {
  position: relative; display: grid; grid-template-columns: repeat(12, 1fr);
  height: 46px; background: #fff; border: 1px solid rgba(45, 20, 12, 0.08);
  border-radius: 12px; overflow: hidden; user-select: none; touch-action: none;
  box-shadow: 0 1px 3px rgba(45, 20, 12, 0.05);
}
.dash-month-cell {
  position: relative; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--text-tertiary, #9aa0aa);
  z-index: 1; pointer-events: none; transition: color 260ms cubic-bezier(.22,1,.36,1), font-weight 260ms ease;
}
/* Hairline separators only at quarter boundaries (Apr, Jul, Oct). */
.dash-month-cell.is-qstart::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px;
  background: rgba(45, 20, 12, 0.09);
}
.dash-month-cell.is-in { color: var(--text-primary); font-weight: 700; }
.dash-month-range {
  position: absolute; top: 3px; bottom: 3px; box-sizing: border-box;
  background: rgba(232, 85, 46, 0.11); border: 1.5px solid var(--accent, #e8552e);
  border-radius: 9px; cursor: grab; z-index: 2; touch-action: none;
  box-shadow: 0 2px 8px rgba(232, 85, 46, 0.16);
  transition: left 240ms cubic-bezier(.22,1,.36,1), width 240ms cubic-bezier(.22,1,.36,1), box-shadow 180ms ease, background 180ms ease;
}
.dash-month-range:hover { background: rgba(232, 85, 46, 0.15); box-shadow: 0 3px 13px rgba(232, 85, 46, 0.26); }
.dash-month-range:active { cursor: grabbing; }
.dash-month-handle {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 8px; height: 20px; border-radius: 4px; background: var(--accent, #e8552e);
  cursor: ew-resize; touch-action: none; box-shadow: 0 1px 3px rgba(232, 85, 46, 0.4);
  transition: transform 180ms cubic-bezier(.22,1,.36,1), box-shadow 180ms ease;
}
.dash-month-handle:hover { transform: translateY(-50%) scaleY(1.15) scaleX(1.25); box-shadow: 0 2px 6px rgba(232, 85, 46, 0.5); }
.dash-month-handle-l { left: -5px; }
.dash-month-handle-r { right: -5px; }
.dash-both-empty { color: var(--text-tertiary, #9aa0aa); font-size: 13px; text-align: center; padding: 40px 4px; }

/* ── Dashboard: Up Next card (next upcoming event) ── */
.dash-upnext {
  display: flex;
  align-items: stretch;
  gap: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--bg-page)), var(--bg-page));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: var(--space-6);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.dash-upnext:hover { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08); transform: translateY(-1px); }
.dash-upnext.is-empty { cursor: default; background: var(--bg-page); border-color: var(--border); }
.dash-upnext.is-empty:hover { box-shadow: none; transform: none; }
.dash-upnext-when {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 66px;
  padding: 10px 14px;
  border-radius: 12px;
  color: #fff;
  flex-shrink: 0;
  /* Raised, glossy date "button" with depth — our orange (adapted from a
     gradient-button pattern): layered highlight/shade gradients, a darker
     bottom border for the lip, a warm outer glow + white inner sheen. */
  background:
    radial-gradient(154% 126% at 175% 0%, #f7a672, #f7a67200),
    radial-gradient(207% 229% at -98% 100%, #c33a12, #c33a1200),
    linear-gradient(89deg, #e8552e 12%, #f2743f 139%);
  border-style: none none solid;
  border-bottom: 3px solid rgba(150, 42, 14, 0.5);
  box-shadow: 0 4px 12px rgba(232, 85, 46, 0.35), 0 2px 6px rgba(0, 0, 0, 0.10), inset 0 0 16px rgba(255, 255, 255, 0.38);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1), border-bottom-width .3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
}
/* Hovering the Up Next card (the real click target) pops the date button. */
.dash-upnext:not(.is-empty):hover .dash-upnext-when {
  transform: translateY(-2px);
  border-bottom: 4px solid rgba(150, 42, 14, 0.6);
  box-shadow: 0 8px 25px rgba(232, 85, 46, 0.5), 0 4px 15px rgba(0, 0, 0, 0.15), inset 0 0 20px rgba(255, 255, 255, 0.52);
}
@media (prefers-reduced-motion: reduce) { .dash-upnext:not(.is-empty):hover .dash-upnext-when { transform: none; } }
.dash-upnext-day { font-size: 28px; font-weight: 800; line-height: 1; }
.dash-upnext-mon { font-size: 12px; font-weight: 700; letter-spacing: .06em; margin-top: 3px; }
.dash-upnext-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; position: relative; }
/* The sync chip (bottom-left) and guests row (bottom-right) are both pinned to
   the body's bottom edge, so reserve room for them and let the centered
   kicker/title/meta settle above instead of colliding. */
.dash-upnext.has-sync .dash-upnext-body,
.dash-upnext.has-guests .dash-upnext-body { padding-bottom: 40px; }
.dash-upnext-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.dash-upnext-title { font-size: 19px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-upnext-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--text-secondary); }
.dash-upnext-meta span, .dash-upnext-meta a { display: inline-flex; align-items: center; gap: 6px; }
/* Guests/going pinned to the card's bottom-right (mirrors the sync chip). */
.dash-upnext-guests { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; margin-top: 0; }
/* Slightly larger avatars on the Up Next hero (scoped — the timeline keeps 26px). */
.dash-upnext-guests .dash-event-attendee,
.dash-upnext-guests .dash-event-attendee-img,
.dash-upnext-guests .dash-event-attendee-more { width: 32px; height: 32px; margin-left: -7px; }
.dash-upnext-guests .dash-event-attendee,
.dash-upnext-guests .dash-event-attendee-more { font-size: 12px; }
.dash-upnext-going { font-size: 12.5px; font-weight: 600; color: var(--text-tertiary); }
.dash-upnext-thumb { width: 128px; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.dash-upnext-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Calm "last synced from Luma" chip on the Up Next card — additive footer
   line with a small accent dot. No countdown, no motion, no "syncing now". */
.dash-upnext-sync { position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--bg-page); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); box-shadow: 0 1px 2px rgba(17, 19, 25, 0.06); font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.dash-upnext-sync i { font-size: 11px; color: var(--accent); flex-shrink: 0; }

/* Live "actively preparing" indicator: a thin accent segment that slides along
   the card's bottom edge on a loop, never completing — the system is always
   working on this event. Clipped to the card's rounded corners by overflow. */
.dash-upnext-liveline { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; pointer-events: none; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dash-upnext-liveline::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent), transparent);
  animation: dashLiveSlide 2.1s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes dashLiveSlide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) {
  .dash-upnext-liveline::before { animation: none; left: 0; width: 100%; opacity: .35; }
}
@media (max-width: 640px) { .dash-upnext-thumb { display: none; } }

/* ── Dashboard: weekly attendance bar graph ── */
.dash-att-sub { font-size: 12px; color: var(--text-tertiary); }
.dash-att-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 190px;
  padding: 14px 8px 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-page);
}
.dash-att-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; min-width: 0; }
.dash-att-val { font-size: 12px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; height: 15px; }
.dash-att-track { flex: 1; width: 100%; max-width: 42px; position: relative; }
.dash-att-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 6px 6px 0 0;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  transition: height .4s ease;
}
.dash-att-col:hover .dash-att-bar { background: color-mix(in srgb, var(--accent) 62%, transparent); }
.dash-att-col.is-current .dash-att-bar { background: var(--accent); }
.dash-att-wk { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }

/* Dashboard conference cards: favicon identity tile on top + status meta */
.dash-conf-logo { display: flex; align-items: center; justify-content: center; background: var(--bg-secondary); }
.dash-conf-mark {
  width: 52px; height: 52px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.dash-conf-mark img { width: 52px; height: 52px; object-fit: cover; display: block; }
.dash-conf-mark.is-fb { color: #fff; font-weight: 700; font-size: 22px; box-shadow: none; }
.dash-conf-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.dash-conf-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 6px; background: var(--bg-secondary); color: var(--text-secondary);
}
.dash-conf-badge.is-active { background: rgba(22,163,74,.14); color: #16a34a; }
.dash-conf-goals { font-size: 11px; color: var(--text-tertiary, #9aa0aa); }

@media (max-width: 767px) {
  .dash-duo { grid-template-columns: 1fr; }
  .dash-doc-card { width: 130px; }
  .dash-project-grid { grid-template-columns: 1fr; }
  .dash-people-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .dash-event-card {
    width: min(100%, 320px);
    min-width: min(100%, 320px);
  }
  .dash-event-card {
    flex-direction: column;
    align-items: stretch;
  }
  .dash-event-img {
    width: 100%;
    min-width: 0;
  }
  .dash-event-card-body {
    width: 100%;
    flex-direction: row;
  }
}

/* ── Campaigns ── */

.campaign-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.campaign-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 150ms ease;
}

.campaign-row:hover {
  background: var(--bg-smoke);
}

.campaign-row-main {
  flex: 1;
  min-width: 0;
}

.campaign-row-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.campaign-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}

.campaign-row-sep {
  color: var(--border);
}

.campaign-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.campaign-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

/* Funnel bar */
.campaign-funnel {
  width: 200px;
  flex-shrink: 0;
}

.campaign-funnel-bar {
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  margin-bottom: 4px;
}

.campaign-funnel-fill {
  height: 100%;
  transition: width 300ms ease;
}

.campaign-funnel-fill.replied {
  background: var(--accent);
}

.campaign-funnel-fill.converted {
  background: var(--status-success);
}

.campaign-funnel-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Stats grid */
.campaign-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: var(--space-5);
}

.campaign-stat-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  background: var(--bg-page);
}

.campaign-stat-icon {
  font-size: 18px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.campaign-stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.campaign-stat-label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Enrollment table */
.campaign-enrollment-table {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.campaign-enrollment-table table {
  width: 100%;
  border-collapse: collapse;
}

.campaign-enrollment-table th {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.campaign-enrollment-table td {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}

.campaign-enrollment-table tr:last-child td {
  border-bottom: none;
}

.enrollment-row:hover {
  background: var(--bg-smoke);
}

.campaign-step-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

/* Step cards */
.campaign-steps-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.campaign-step-card {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-page);
  width: 100%;
  max-width: 600px;
}

.campaign-step-card-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.campaign-step-card-body {
  flex: 1;
  min-width: 0;
}

.campaign-step-card-subject {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.campaign-step-card-meta {
  font-size: 13px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

.campaign-step-card-meta i { font-size: 13px; }

.campaign-step-card-preview {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.campaign-step-connector {
  padding: 4px 0 4px 12px;
  color: var(--border);
  font-size: 16px;
}

/* Step editor rows (in modals) */
.campaign-step-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.campaign-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .campaign-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .campaign-funnel { width: 100%; margin-top: 8px; }
  .campaign-row { flex-direction: column; align-items: flex-start; }
}

/* Campaign step edit blocks */
.campaign-step-edit {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.campaign-step-edit .campaign-step-row {
  margin-bottom: 8px;
}

.campaign-step-edit .form-textarea {
  font-size: 13px;
  margin: 0;
}

/* ── Luma Sync Dropdown ── */
.evd-sync-wrap { position: relative; display: inline-block; }
.evd-sync-dropdown {
  position: absolute; top: 100%; right: 0; z-index: 100;
  min-width: 360px; max-width: 480px;
  background: var(--bg-card, #ffffff); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px); box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  overflow: hidden; margin-top: 4px;
}
.evd-sync-dd-section { padding: 16px; border-bottom: 1px solid var(--border); }
.evd-sync-dd-section:last-child { border-bottom: none; }
.evd-sync-dd-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.evd-sync-dd-desc { font-size: 13px; color: var(--text-tertiary); margin-bottom: 12px; line-height: 1.5; }
.evd-sync-dd-status { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.evd-sync-dd-status.synced { color: #22c55e; }
.evd-sync-dd-status.pending { color: #eab308; }
.evd-sync-dd-status.conflict { color: #f97316; }
.evd-sync-dd-status.error { color: #ef4444; }
.evd-sync-dd-meta { font-size: 12px; color: var(--text-tertiary); margin-bottom: 8px; }
.evd-sync-dd-error { font-size: 12px; color: #ef4444; background: rgba(239,68,68,0.08); padding: 8px 10px; border-radius: 6px; margin-top: 6px; }
.evd-sync-dd-link { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent); text-decoration: none; padding: 6px 0; }
.evd-sync-dd-link:hover { text-decoration: underline; }
.evd-sync-dd-actions { display: flex; flex-direction: column; gap: 6px; }

/* Conflict diff table */
.evd-sync-diff-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.evd-sync-diff-table th { text-align: left; padding: 4px 8px; color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); }
.evd-sync-diff-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.evd-sync-diff-field { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.evd-sync-diff-val { color: var(--text-secondary); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evd-sync-diff-actions { white-space: nowrap; }
.evd-sync-pick { padding: 2px 8px !important; font-size: 11px !important; margin-left: 2px; }
.evd-sync-pick.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* Luma sync badge on event list */
.luma-sync-badge { font-size: 12px; margin-left: 6px; }
.luma-sync-badge.synced { filter: hue-rotate(0deg); }
.luma-sync-badge.pending { opacity: 0.6; }
.luma-sync-badge.conflict { filter: hue-rotate(30deg); }
.luma-sync-badge.error { filter: hue-rotate(-30deg); opacity: 0.8; }
.luma-sync-badge.not-on-luma {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}

/* Luma sync activity log (event detail dropdown) */
.evd-sync-log { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; }
.evd-sync-log-row { font-size: 12px; line-height: 1.35; }
.evd-sync-log-action { display: block; color: var(--text-primary); }
.evd-sync-log-meta { display: block; color: var(--text-tertiary); font-size: 11px; }
.evd-sync-log-warn { font-size: 11.5px; color: #b45309; background: rgba(245,158,11,0.1); padding: 6px 8px; border-radius: 6px; margin-top: 4px; }

/* Sync preview modal */
.evd-preview-insync td { opacity: 0.5; }

/* Guest list comparison modal */
.evd-guest-diff-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.evd-guest-diff-col { min-width: 0; }
.evd-guest-diff-row { display: block; padding: 5px 6px; border-radius: 6px; font-size: 13px; cursor: default; }
.evd-guest-diff-row:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
label.evd-guest-diff-row { cursor: pointer; }
.evd-guest-diff-name { margin-right: 6px; }
.evd-guest-diff-email { display: block; color: var(--text-tertiary); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .evd-guest-diff-cols { grid-template-columns: 1fr; }
}

/* Sync dropdown opaque background */
/* Event Photos Grid */
.event-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.event-photo-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bg-secondary);
}
.event-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.event-photo-card:hover img { transform: scale(1.05); }
.event-photo-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
  font-size: 14px;
}
.event-photo-card:hover .event-photo-delete { opacity: 1; }
.event-photo-delete:hover { background: rgba(220,38,38,0.8); }
.evd-photos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.photo-drop-zone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  margin-bottom: 20px;
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
}
.photo-drop-zone:hover,
.photo-drop-zone.photo-drop-active {
  border-color: var(--accent);
  background: rgba(232, 85, 46, 0.05);
}
.photo-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-secondary);
}
.upload-spinner-sm {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.photo-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.photo-lightbox img {
  max-width: 90%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  cursor: default;
}
.photo-lightbox-close {
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
  z-index: 2;
}
.photo-lightbox-close:hover { opacity: 1; }
.photo-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
  color: #fff;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s;
  padding: 20px;
  user-select: none;
  z-index: 2;
}
.photo-lightbox-nav:hover { opacity: 1; }
.photo-lightbox-prev { left: 8px; }
.photo-lightbox-next { right: 8px; }
.photo-lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-weight: 500;
}
.photo-lightbox-caption {
  position: absolute;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(720px, 88vw);
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}
.comms-list { display: flex; flex-direction: column; gap: 12px; }
.comms-card {
  background: var(--bg-card, var(--bg-secondary));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  transition: border-color 0.15s;
}
.comms-card:hover { border-color: var(--accent); }
.comms-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.comms-platform { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.comms-date { font-size: 12px; color: var(--text-tertiary); }
.comms-subject { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.comms-body-preview { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
.comms-recipients { font-size: 12px; color: var(--text-tertiary); display: flex; align-items: center; gap: 6px; }
.compose-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
}
.compose-modal {
  background: var(--bg-page); border-radius: 12px; width: 520px; max-width: 95vw;
  max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  border: 1px solid var(--border);
}
.compose-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.compose-form { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.compose-field { display: flex; flex-direction: column; gap: 4px; }
.compose-field label { font-size: 13px; font-weight: 500; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.compose-recipients-list {
  max-height: 160px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: 8px; padding: 8px;
}
.compose-recipient-item {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 13px; cursor: pointer;
}
.compose-recipient-status {
  font-size: 11px; color: var(--text-tertiary); margin-left: auto;
}
.msg-detail-recip-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 200px; overflow-y: auto;
}
.msg-detail-recip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; background: var(--bg-secondary);
  font-size: 13px;
}
.msg-detail-recip-name { font-weight: 500; }
.msg-detail-recip-email { color: var(--text-tertiary); font-size: 12px; }
.msg-detail-recip-status {
  margin-left: auto; font-size: 11px; color: var(--text-tertiary);
  text-transform: capitalize;
}

/* ─── Sidebar override: warm cream theme, always-expanded ─── */

.sidebar,
.sidebar.collapsed {
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  background: linear-gradient(#fff8f5 14%, #ffeae2 76%) fixed !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
  --sidebar-bg: transparent;
  --sidebar-text: #1f1f24;
  --sidebar-hover-bg: rgba(232, 85, 46, 0.14);
  --sidebar-active-bg: #e8552e;
  --sidebar-active-text: #ffffff;
  --sidebar-border: rgba(0, 0, 0, 0.08);
  --sidebar-label-color: #6b6b73;
  --sidebar-logo-color: #1f1f24;
}

/* Hide the collapse button entirely */
.sidebar-collapse-btn { display: none !important; }

/* Neutralize any leftover .collapsed-only rules so the layout never narrows */
.sidebar.collapsed .sidebar-text       { display: inline !important; }
.sidebar.collapsed .sidebar-byline     { display: block !important; }
.sidebar.collapsed .sidebar-header     { padding: 20px 20px 16px !important; flex-direction: column !important; align-items: flex-start !important; }
.sidebar.collapsed .sidebar-section    { padding: var(--space-2) var(--space-3) !important; }
.sidebar.collapsed .sidebar-item       { justify-content: flex-start !important; padding: 6px var(--space-3) !important; }
.sidebar.collapsed .sidebar-expanded-only { display: revert !important; }
.sidebar.collapsed .sidebar-divider    { display: block !important; }
.sidebar.collapsed .sidebar-logo img   { display: inline-block !important; }

/* Folder header inherits dark text */
.sidebar-folder-header { color: var(--sidebar-text); }

/* Tabs read on cream — orange accent for active state */
.sidebar .sidebar-tab.active {
  color: #e8552e;
  border-bottom-color: #e8552e;
}
.sidebar .sidebar-tab:hover { color: #1f1f24; }

/* Item icons take the new dark text color but stay slightly muted unless hovered/active */
.sidebar-item .icon,
.sidebar-item [class^="icon-"],
.sidebar-item [class*=" icon-"] {
  color: var(--sidebar-text);
  opacity: 0.7;
}
.sidebar-item:hover .icon,
.sidebar-item:hover [class^="icon-"],
.sidebar-item:hover [class*=" icon-"] { opacity: 1; }
.sidebar-item.active .icon,
.sidebar-item.active [class^="icon-"],
.sidebar-item.active [class*=" icon-"] {
  color: var(--sidebar-active-text);
  opacity: 1;
}

/* Sidebar override: hover text (override dark-era #E6E6E6) — spare active items */
.sidebar-item:not(.active):hover,
.sidebar-folder-header:hover,
.sidebar-subnav-toggle:hover {
  color: var(--sidebar-text);
}
.sidebar-item.active,
.sidebar-item.active:hover {
  color: var(--sidebar-active-text);
}


/* ─── Sidebar search override ─── */
.sidebar-header .sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  min-width: 0;
  max-width: none;
  height: 32px;
  box-sizing: border-box;
  padding: 0 10px;
  font-size: 13px;
  line-height: 22px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--sidebar-text);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.sidebar-header .sidebar-search:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(232, 85, 46, 0.35);
}
.sidebar-header .sidebar-search .search-box-text {
  flex: 1;
  color: var(--sidebar-label-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-header .sidebar-search > i:first-child {
  font-size: 13px;
  color: var(--sidebar-label-color);
  flex-shrink: 0;
}
.sidebar-header .sidebar-search kbd {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 1px 5px;
  height: 17px;
  line-height: 15px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--sidebar-label-color);
  border: 0;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}


/* ─── Hub breadcrumb (header-left) + push right cluster flush right ─── */
.header-right { margin-left: auto; }
.header-left { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }

.hub-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--text-secondary, #6b6b73);
  flex: 1;
  min-width: 0;
  overflow: visible;
}
.hub-bc-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--text-secondary, #6b6b73);
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
  transition: background 160ms ease, color 160ms ease;
}
.hub-bc-item .icon {
  font-size: 16px;
  opacity: 0.85;
  flex-shrink: 0;
}
a.hub-bc-item:hover {
  color: #e8552e;
  background: rgba(232, 85, 46, 0.08);
  text-decoration: none;
}
.hub-bc-current {
  color: var(--text-primary, #1f1f24);
  font-weight: 600;
  cursor: default;
}
.hub-bc-current:hover { background: transparent; color: var(--text-primary, #1f1f24); }
a.hub-bc-current.hub-bc-back {
  position: relative;
  overflow: visible;
  max-width: none;
  isolation: isolate;
  z-index: 45;
  cursor: pointer;
}
a.hub-bc-current.hub-bc-back:hover {
  color: #e8552e;
  background: rgba(232, 85, 46, 0.08);
  text-decoration: none;
}
.hub-bc-back .hub-bc-preview {
  left: 0;
  transform: translate(0, 6px) scale(0.98);
  transform-origin: top left;
}
.hub-bc-back:hover .hub-bc-preview,
.hub-bc-back:focus-visible .hub-bc-preview {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.hub-bc-back .hub-bc-preview::before {
  left: 22px;
}
.hub-bc-sep {
  color: rgba(0, 0, 0, 0.25);
  font-size: 14px;
  flex-shrink: 0;
}
.hub-bc-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .hub-bc-item:not(.hub-bc-current) .hub-bc-label { display: none; }
  .hub-bc-item:not(.hub-bc-current) { padding: 6px 8px; }
}

/* ─── Profile page — modern redesign ─── */

.profile-page {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 4px;
}

/* Hero card with cream→peach banner */
.profile-card {
  background: #fff;
  border: 1px solid var(--hub-border-warm, rgba(232, 85, 46, 0.18));
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(45, 20, 12, 0.04);
}
.profile-banner {
  height: 120px;
  background:
    radial-gradient(circle at 80% 20%, rgba(232, 85, 46, 0.18) 0%, rgba(232, 85, 46, 0) 60%),
    linear-gradient(135deg, var(--hub-cream-1, #fff8f5) 0%, var(--hub-cream-2, #ffeae2) 60%, #ffd9c8 100%);
}
.profile-card-body {
  position: relative;
  padding: 0 28px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 20px;
  align-items: start;
}
.profile-avatar-ring {
  margin-top: -42px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;
  padding: 5px;
  box-shadow: 0 4px 14px rgba(45, 20, 12, 0.10);
  flex-shrink: 0;
  position: relative;
}
.profile-avatar-ring .avatar {
  width: 90px !important;
  height: 90px !important;
  font-size: 34px !important;
  border-radius: 50% !important;
}

.profile-info { padding-top: 14px; min-width: 0; }
.profile-info .profile-name {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--hub-text, #1f1f24);
  margin: 0;
  line-height: 1.15;
}
.profile-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.profile-info .profile-handle {
  font-size: 14px;
  color: var(--hub-text-muted, #6b6b73);
  font-weight: 500;
}
.profile-presence-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  font-size: 12px;
  color: var(--hub-text, #1f1f24);
}
.profile-presence-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa1aa;
  flex-shrink: 0;
}
.profile-presence-dot.online { background: #22c55e; }
.profile-presence-dot.away   { background: #eab308; }
.profile-presence-dot.dnd    { background: #ef4444; }
.profile-kind-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--hub-orange-soft, rgba(232, 85, 46, 0.1));
  color: var(--hub-orange, #e8552e);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.profile-info .profile-bio {
  font-size: 14.5px;
  color: var(--hub-text-muted);
  line-height: 1.55;
  margin: 10px 0 0;
}
.profile-info .profile-bio strong { color: var(--hub-text); font-weight: 600; }
.profile-info .profile-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--hub-text-muted);
  margin-top: 8px;
}

.profile-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 16px;
  align-self: start;
}
.profile-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Pill tabs */
.profile-tabs {
  display: inline-flex;
  gap: 2px;
  background: rgba(0, 0, 0, 0.04);
  padding: 4px;
  border-radius: 12px;
  width: fit-content;
}
.profile-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hub-text-muted);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.profile-tab:hover { color: var(--hub-text); }
.profile-tab.is-active {
  background: #fff;
  color: var(--hub-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.profile-tab-count {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--hub-text-muted);
}
.profile-tab.is-active .profile-tab-count {
  background: var(--hub-orange-soft, rgba(232, 85, 46, 0.1));
  color: var(--hub-orange, #e8552e);
}

/* Section cards */
.profile-section {
  background: #fff;
  border: 1px solid var(--hub-border-warm, rgba(232, 85, 46, 0.18));
  border-radius: 16px;
  padding: 18px 22px;
}
.profile-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.profile-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--hub-text-muted);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.profile-section-count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--hub-orange-soft, rgba(232, 85, 46, 0.1));
  color: var(--hub-orange, #e8552e);
}
.profile-section-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  color: var(--hub-text-muted);
  font-size: 13.5px;
}

/* Task rows */
.profile-task-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-task-row {
  display: grid;
  grid-template-columns: 4px auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 140ms ease;
}
.profile-task-row:hover { background: rgba(232, 85, 46, 0.06); }
.profile-task-priority {
  width: 4px;
  height: 24px;
  border-radius: 2px;
}
.profile-task-title {
  font-size: 14px;
  color: var(--hub-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Membership chips */
.profile-membership-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profile-membership-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--hub-border-warm, rgba(232, 85, 46, 0.18));
  border-radius: 10px;
  text-decoration: none;
  color: var(--hub-text);
  background: #fff;
  transition: border-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.profile-membership-chip:hover {
  border-color: var(--hub-orange, #e8552e);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(45, 20, 12, 0.06);
}
.profile-membership-icon { font-size: 16px; }
.profile-membership-key  { font-weight: 600; font-size: 13px; }
.profile-membership-role { font-size: 12px; color: var(--hub-text-muted); }

/* Agent meta grid */
.profile-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px 24px;
}
.profile-meta-item label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hub-text-muted);
  margin-bottom: 4px;
}
.profile-meta-item .value {
  font-size: 14px;
  font-weight: 500;
  color: var(--hub-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Empty (user-not-found) state */
.profile-card-empty .profile-banner { height: 90px; }
.profile-empty-body {
  text-align: center;
  padding: 0 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.profile-empty-icon {
  margin-top: -36px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(45, 20, 12, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--hub-orange, #e8552e);
  margin-bottom: 6px;
}
.profile-empty-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--hub-text);
  margin: 4px 0 0;
}
.profile-empty-sub {
  font-size: 14px;
  color: var(--hub-text-muted);
  margin: 0 0 12px;
  max-width: 360px;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 720px) {
  .profile-card-body {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "avatar info"
      "actions actions";
  }
  .profile-avatar-ring { grid-area: avatar; }
  .profile-info        { grid-area: info; }
  .profile-actions     { grid-area: actions; padding-top: 4px; }
}


/* ─── Doc detail header — minimal (two elements) ─── */
.doc-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 24px;
  padding-top: 4px;
}
.doc-header-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}
.doc-header-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.doc-title-text {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--hub-text, #1f1f24);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

/* Trigger */
.doc-info-popover-wrap { position: relative; flex-shrink: 0; }
.doc-info-trigger {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--hub-border-warm, rgba(232, 85, 46, 0.18));
  background: #fff;
  color: var(--hub-text-muted, #6b6b73);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.doc-info-trigger:hover {
  background: var(--hub-orange-soft, rgba(232, 85, 46, 0.10));
  color: var(--hub-orange, #e8552e);
  border-color: var(--hub-orange, #e8552e);
}
.doc-info-trigger:active { transform: scale(0.96); }
.doc-info-trigger i { font-size: 18px; }

/* Popover */
.doc-info-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--hub-border-warm, rgba(232, 85, 46, 0.18));
  border-radius: 14px;
  box-shadow:
    0 12px 32px rgba(45, 20, 12, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 12px;
  z-index: 100;
  display: none;
  animation: doc-info-pop-in 160ms cubic-bezier(.2, .8, .2, 1);
}
.doc-info-popover-wrap.is-open .doc-info-popover { display: block; }
@keyframes doc-info-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.doc-info-status-row { padding: 4px 4px 8px; }
.doc-info-edited {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 8px;
  font-size: 13px;
  color: var(--hub-text, #1f1f24);
}
.doc-info-edited-author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.doc-info-edited-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-info-edited-time {
  margin-left: auto;
  color: var(--hub-text-muted, #6b6b73);
  font-size: 12px;
}
.doc-info-divider {
  height: 1px;
  background: var(--hub-border-warm, rgba(232, 85, 46, 0.18));
  margin: 6px -2px 6px;
}
.doc-info-action {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--hub-text, #1f1f24);
  border-radius: 8px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  text-align: left;
}
.doc-info-action:hover {
  background: var(--hub-orange-soft, rgba(232, 85, 46, 0.10));
  color: var(--hub-orange, #e8552e);
}
.doc-info-action .icon { color: var(--hub-orange, #e8552e); flex-shrink: 0; }
.doc-info-action-danger { color: var(--hub-danger, #d92d20); }
.doc-info-action-danger .icon { color: var(--hub-danger, #d92d20); }
.doc-info-action-danger:hover {
  background: var(--hub-danger-soft, rgba(217, 45, 32, 0.10));
  color: var(--hub-danger, #d92d20);
}
.doc-info-action-danger:hover .icon { color: var(--hub-danger, #d92d20); }


/* ─── Doc header — merged with breadcrumb (no title) ─── */
.doc-header-row {
  align-items: center;
  margin: 0 0 16px;
  padding-top: 0;
}
.doc-header-bc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.doc-header-bc .doc-breadcrumbs,
.doc-header-bc nav {
  margin: 0 !important;
}

/* ─── Sidebar override: Notion-style compact items ─── */
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
}
.sidebar-section + .sidebar-section { padding-top: 0; }

.sidebar-item,
.sidebar-folder-header {
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
  padding: 5px 14px;
  gap: 8px;
  border-radius: 9px;
}
.sidebar-item .icon,
.sidebar-item [class^="icon-"],
.sidebar-item [class*=" icon-"],
.sidebar-folder-header .icon,
.sidebar-folder-header [class^="icon-"] {
  font-size: 15px;
}

.sidebar-label {
  padding: 10px 12px 4px;
  font-size: 10.5px;
}

.sidebar-tabs { padding: 0 12px; margin: 16px 0 4px; }
.sidebar-tab { font-size: 12.5px; padding: 6px 0; }

.sidebar-folder-items .sidebar-item {
  padding-left: 32px;
  font-size: 12.5px;
}


/* ─── Sidebar header — match menu-item edges ─── */
.sidebar-header {
  padding: 16px 12px 4px;
}
.sidebar-header .sidebar-search {
  margin-top: 12px;
}

/* ─── Sidebar item — truncate long labels with ellipsis (no edge touch) ─── */
.sidebar-item .sidebar-text,
.sidebar-folder-header .sidebar-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 4px;
}


/* ─── Sidebar groups (Notion-style) ─── */
.sidebar-group {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sidebar-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 22px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sidebar-label-color, #6b6b73);
  flex-shrink: 0;
}
.sidebar-group-label .icon { font-size: 13px; opacity: 0.7; }

.sidebar-group-items {
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
.sidebar-group-items::-webkit-scrollbar { width: 4px; }
.sidebar-group-items::-webkit-scrollbar-track { background: transparent; }
.sidebar-group-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 999px;
}
.sidebar-group-items::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.28); }

/* Docs owns the remaining sidebar height and scrolls independently. */
.sidebar {
  height: 100vh;
  overflow: hidden !important;
}

.sidebar-header,
.sidebar-group:not(.sidebar-docs-group) {
  flex-shrink: 0;
}

.sidebar-docs-group {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 10px;
}

.sidebar-docs-list,
.sidebar.collapsed .sidebar-docs-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto;
  padding-bottom: 12px;
  gap: 4px;
}

.sidebar-docs-list > .sidebar-item,
.sidebar-docs-list > .sidebar-folder {
  flex: 0 0 auto;
}

.sidebar-docs-list .sidebar-item,
.sidebar-docs-list .sidebar-folder-header {
  box-sizing: border-box;
  min-height: 32px;
  line-height: 20px;
}

/* The first sidebar-section above the groups already has gap from .sidebar-tabs margin;
   normalise that by relying on the group label's own top padding instead. */
.sidebar-tabs { margin-top: 0 !important; }


/* ─── Sidebar: icon slot uniform (all icons take a 20px box, glyph centers) ─── */
.sidebar-item > i:first-of-type,
.sidebar-folder-header > i:first-of-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  line-height: 1;
  text-align: center;
  flex-shrink: 0;
  font-size: 15px !important;
}

/* ─── Full-screen Search Overlay ─── */
.hub-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 10080;
  background: rgba(20, 12, 8, 0.42);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  animation: hub-search-fade 140ms ease both;
}
@keyframes hub-search-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.hub-search-open { overflow: hidden; }

.hub-search-shell {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: 64px 1fr;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(280px, 380px);
  grid-template-areas:
    "top top top"
    "rail main preview";
  background: linear-gradient(180deg, #fff 0%, var(--hub-cream-1, #fff8f5) 100%);
  margin: max(2vh, 16px);
  border-radius: 18px;
  box-shadow: 0 28px 64px rgba(45, 20, 12, 0.32), 0 8px 22px rgba(45, 20, 12, 0.16);
  overflow: hidden;
  animation: hub-search-rise 200ms cubic-bezier(0.18, 0.86, 0.32, 1.04) both;
}
@keyframes hub-search-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hub-search-topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(232, 85, 46, 0.16);
  background: rgba(255, 255, 255, 0.6);
}
.hub-search-topbar-icon {
  display: inline-flex;
  align-items: center;
  font-size: 22px;
  color: var(--hub-orange, #e8552e);
  flex: 0 0 auto;
}
.hub-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 22px;
  font-weight: 500;
  color: var(--text-primary, #1f1f24);
  letter-spacing: -0.01em;
}
.hub-search-input::placeholder {
  color: var(--text-tertiary, #9aa0aa);
  font-weight: 400;
}
.hub-search-status {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-tertiary, #6b6b73);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hub-search-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text-secondary, #4b4b53);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.hub-search-close:hover {
  background: #fff;
  border-color: rgba(232, 85, 46, 0.4);
}
.hub-search-close kbd {
  font-family: inherit;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text-tertiary, #6b6b73);
}

.hub-search-body {
  grid-area: rail / rail / preview / preview;
  display: contents;
}

.hub-search-rail {
  grid-area: rail;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  padding: 18px 12px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.4);
}
.hub-search-rail-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary, #6b6b73);
  padding: 0 8px 8px;
}
.hub-search-chips {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hub-search-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--text-secondary, #3b3b43);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  text-align: left;
  transition: background 100ms ease, color 100ms ease, opacity 100ms ease;
}
.hub-search-chip i {
  font-size: 15px;
  color: var(--text-tertiary, #6b6b73);
  flex: 0 0 auto;
}
.hub-search-chip:hover {
  background: rgba(232, 85, 46, 0.08);
  color: var(--text-primary, #1f1f24);
}
.hub-search-chip.is-active {
  background: rgba(232, 85, 46, 0.16);
  color: var(--hub-orange, #e8552e);
}
.hub-search-chip.is-active i { color: var(--hub-orange, #e8552e); }
.hub-search-chip.is-empty { opacity: 0.45; }
.hub-search-chip-label { flex: 1 1 auto; min-width: 0; }
.hub-search-chip-count {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 0 7px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-secondary, #4b4b53);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hub-search-chip.is-active .hub-search-chip-count {
  background: rgba(232, 85, 46, 0.22);
  color: var(--hub-orange, #e8552e);
}

.hub-search-main {
  grid-area: main;
  overflow-y: auto;
  padding: 18px 24px 28px;
}

.hub-search-section { margin-bottom: 22px; }
.hub-search-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary, #6b6b73);
  padding: 0 4px 8px;
}
.hub-search-section-action {
  border: 0;
  background: transparent;
  color: var(--hub-orange, #e8552e);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: none;
}
.hub-search-section-action:hover { text-decoration: underline; }
/* Recent searches are now the sole idle content of Cmd+K — give them room:
   a single prominent column of tall rows, not a cramped 2-up grid. */
.hub-search-section--recent .hub-search-section-head { padding-bottom: 12px; }
.hub-search-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hub-search-recent {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  background: #fff;
  color: var(--text-primary, #1f1f24);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.hub-search-recent > i:first-child {
  font-size: 18px;
  color: var(--text-tertiary, #6b6b73);
  flex: none;
}
.hub-search-recent:hover {
  border-color: rgba(232, 85, 46, 0.45);
  background: rgba(232, 85, 46, 0.06);
  box-shadow: 0 2px 10px rgba(232, 85, 46, 0.08);
}
.hub-search-recent:active { transform: scale(0.99); }
.hub-search-recent span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Trailing "go" affordance — quiet until hover. */
.hub-search-recent-go {
  font-size: 15px;
  color: var(--text-tertiary, #6b6b73);
  opacity: 0;
  flex: none;
  transition: opacity 120ms ease;
}
.hub-search-recent:hover .hub-search-recent-go { opacity: 0.8; }

/* Idle empty state (no recent searches). */
.hub-search-idle-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 20px;
  gap: 6px;
}
.hub-search-idle-empty i {
  font-size: 30px;
  color: var(--text-tertiary, #6b6b73);
  opacity: 0.55;
  margin-bottom: 6px;
}
.hub-search-idle-empty p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary, #4b4b53);
}
.hub-search-idle-empty span {
  font-size: 13px;
  color: var(--text-tertiary, #6b6b73);
}

.hub-search-group { margin-bottom: 22px; }
.hub-search-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary, #6b6b73);
  padding: 0 4px 6px;
}
.hub-search-group-head i {
  font-size: 13px;
  color: var(--hub-orange, #e8552e);
}
.hub-search-group-count {
  margin-left: auto;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-secondary, #4b4b53);
  border-radius: 999px;
  padding: 0 7px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}
.hub-search-group-list {
  list-style: none;
  margin: 0;
  padding: 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hub-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 80ms ease;
}
.hub-search-item:hover,
.hub-search-item.is-highlighted {
  background: rgba(232, 85, 46, 0.1);
}
.hub-search-item-body {
  min-width: 0;
  flex: 1;
}

/* Result identity visual — avatar / logo / cover / initials / icon tile */
.hub-search-visual {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(17, 19, 25, 0.05);
  color: var(--text-tertiary, #6b6b73);
  font-size: 12px;
  font-weight: 700;
}
.hub-search-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hub-search-visual.is-circle { border-radius: 50%; }
.hub-search-visual.is-cover { width: 48px; height: 32px; }
.hub-search-visual.is-fb { color: #fff; }
.hub-search-visual.is-icon i { font-size: 14px; }
.hub-search-visual.is-lg {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  font-size: 18px;
}
.hub-search-visual.is-lg.is-circle { border-radius: 50%; }
.hub-search-visual.is-lg.is-cover {
  width: 100%;
  height: 104px;
  border-radius: 12px;
}
.hub-search-visual.is-lg.is-icon i { font-size: 22px; }
.hub-search-preview-visual { margin-bottom: 12px; }

.hub-search-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1f1f24);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-search-item-snippet {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-tertiary, #6b6b73);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hub-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px 40px;
  gap: 10px;
  text-align: center;
}
.hub-search-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(232, 85, 46, 0.12);
  color: var(--hub-orange, #e8552e);
  font-size: 24px;
  margin-bottom: 6px;
}
.hub-search-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary, #1f1f24);
}
.hub-search-empty-desc {
  font-size: 13px;
  color: var(--text-tertiary, #6b6b73);
  max-width: 420px;
}
.hub-search-empty-action {
  margin-top: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(232, 85, 46, 0.4);
  background: rgba(232, 85, 46, 0.08);
  color: var(--hub-orange, #e8552e);
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.hub-search-empty-action:hover {
  background: rgba(232, 85, 46, 0.16);
}

.hub-search-skeletons { padding: 4px 4px 16px; }
.hub-search-skeleton-group { margin-bottom: 18px; }
.hub-search-skeleton-label {
  width: 80px; height: 10px;
  border-radius: 4px;
  margin: 0 0 12px 4px;
}
.hub-search-skeleton-row {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  margin-bottom: 6px;
}

/* shared skeleton primitive */
.skeleton {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.06) 0%,
    rgba(0,0,0,0.10) 50%,
    rgba(0,0,0,0.06) 100%);
  background-size: 200% 100%;
  animation: hub-skeleton-shimmer 1.4s linear infinite;
}
@keyframes hub-skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.hub-search-preview {
  grid-area: preview;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  padding: 22px 22px 28px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.4);
  opacity: 0;
  transition: opacity 140ms ease;
}
.hub-search-preview.is-visible { opacity: 1; }

.hub-search-preview-kind {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hub-orange, #e8552e);
  margin-bottom: 8px;
}
.hub-search-preview-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary, #1f1f24);
  margin-bottom: 10px;
  word-break: break-word;
}
.hub-search-preview-snippet {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary, #4b4b53);
  margin-bottom: 16px;
  white-space: pre-wrap;
}
.hub-search-preview-meta {
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.hub-search-preview-meta div {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: baseline;
  gap: 12px;
}
.hub-search-preview-meta dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary, #6b6b73);
  margin: 0;
}
.hub-search-preview-meta dd {
  font-size: 13px;
  color: var(--text-primary, #1f1f24);
  margin: 0;
  word-break: break-word;
}
.hub-search-preview-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.hub-search-preview-actions kbd {
  font-family: inherit;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.4);
  margin-left: 4px;
}

/* Compact layout: collapse the preview pane on narrower screens */
@media (max-width: 1080px) {
  .hub-search-shell {
    grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
    grid-template-areas:
      "top top"
      "rail main";
  }
  .hub-search-preview { display: none; }
}

@media (max-width: 640px) {
  .hub-search-shell {
    margin: 0;
    border-radius: 0;
    grid-template-rows: 56px auto 1fr;
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "rail"
      "main";
  }
  .hub-search-rail {
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 8px;
  }
  .hub-search-chips {
    flex-direction: row;
    overflow-x: auto;
  }
  .hub-search-chip {
    flex: 0 0 auto;
    width: auto;
    height: 30px;
    padding: 0 10px;
  }
  .hub-search-input { font-size: 18px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile Phase 1 — critical fixes (hamburger access, FAB clearance,
   touch targets, safe-area insets, iOS input zoom prevention).
   Page-by-page layout passes happen in Phase 2.
   ───────────────────────────────────────────────────────────────────── */

/* Safe-area insets for notched devices (no-op everywhere else) */
.main {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.sidebar {
  padding-left: env(safe-area-inset-left, 0px);
}

/* Drop the 300ms tap delay on interactive elements */
button,
a,
[role="button"],
.btn,
.files-action-btn,
.files-row-actions button,
.hub-new-chat-btn,
.mobile-menu-btn {
  touch-action: manipulation;
}
@media (hover: none) and (pointer: coarse) {
  /* Match accent so taps feel intentional rather than browser-blue */
  html {
    -webkit-tap-highlight-color: color-mix(in srgb, var(--accent, #e8552e) 18%, transparent);
  }
}

/* Phone-width: enforce minimum touch targets and FAB clearance */
@media (max-width: 767px) {
  /* Touch targets ≥ 44×44 (iOS HIG / WCAG) — only force width when the button
     is icon-only. The "+ New Chat" pill keeps its label between 481–767px and
     would otherwise be clipped to a 44px square. */
  .mobile-menu-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .hub-new-chat-btn {
    min-height: 44px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .hub-new-chat-btn:hover {
    background: color-mix(in srgb, var(--accent, #e8552e) 8%, transparent);
    border: 0;
    box-shadow: none;
    transform: none;
  }
  .files-action-btn { min-width: 36px; min-height: 36px; padding: 8px; }
  .files-row-actions button { min-width: 36px; min-height: 36px; padding: 8px 10px; }
  .files-tree-row { min-height: 56px; }
  .files-card { min-height: 0; }

  /* iOS auto-zooms anything < 16px on focus — bump up. */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  textarea,
  select { font-size: 16px; }

  /* The assistant FAB sits at fixed bottom: 24px right: 24px (56×56).
     Reserve room at the bottom of every page so cards aren't covered. */
  .content {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  body.hub-chat-active .content {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px));
  }

  /* Header chrome — keep the page identifier visible, shrink the rest */
  .header { padding-left: 8px; padding-right: 8px; gap: 6px; }
  .header-left { gap: 6px; min-width: 0; flex: 1; }
  .header-right { gap: 6px; }
  .hub-breadcrumb {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    min-width: 0;
  }

  /* Use modern viewport units where iOS Safari's chrome would otherwise
     eat 100vh height (covers any page that uses 100vh somewhere). */
  .hub-chat-shell { min-height: 100dvh; }
}

/* Tablet ergonomics still benefit from a hint pill becoming smaller. */
@media (max-width: 480px) {
  .hub-breadcrumb { font-size: 12px; }
  .header-right .btn-sm { padding: 6px 10px; font-size: 12px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Mobile Phase 2 — per-page layout passes (column collapses, kanban
   horizontal snap, modals as bottom sheets, popover viewport clamp).
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Page padding tightened so cards aren't squished against the edge */
  .content {
    padding: 14px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  .page-shell-wide,
  .page-shell-narrow { padding: 0; }

  /* Generic title-row: pages use inline-flex containers like
     <div style="display:flex;justify-content:space-between"><h1>+<button>
     Wrap them so the CTA drops below the title and goes full-width. */
  .page-shell-wide > div[style*="space-between"]:first-child,
  .page-shell-narrow > div[style*="space-between"]:first-child,
  .content > div[style*="space-between"]:first-child {
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .page-shell-wide > div[style*="space-between"]:first-child .btn,
  .page-shell-narrow > div[style*="space-between"]:first-child .btn,
  .content > div[style*="space-between"]:first-child .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .page-shell-wide > div[style*="space-between"]:first-child .page-title,
  .page-shell-narrow > div[style*="space-between"]:first-child .page-title,
  .content > div[style*="space-between"]:first-child .page-title {
    flex: 1 0 100%;
  }

  /* List grids → single column */
  .project-grid,
  .gallery-grid,
  .campaign-list { grid-template-columns: 1fr; gap: 12px; }
  .people-grid { grid-template-columns: 1fr; }

  /* Card padding dial-down */
  .project-card,
  .person-card,
  .company-card,
  .event-card,
  .campaign-card { padding: 14px; }

  /* Kanban — was already overflow-x; add scroll-snap so each column
     lands cleanly when the user pages through them */
  .board {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 14px;
    padding: var(--space-3) 14px;
    gap: 12px;
  }
  .board-column {
    scroll-snap-align: start;
    min-width: calc(100vw - 28px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    max-width: calc(100vw - 28px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  }

  /* Tables — wrap in horizontal scroll so columns don't collapse weirdly */
  .hub-table-wrap,
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modals → bottom-sheet feel: full width, anchored to bottom edge,
     rounded top corners, scrollable body, sticky header/footer */
  .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal,
  .form-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 24px);
    border-radius: 18px 18px 0 0 !important;
    margin: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .form-modal .modal-body,
  .modal .modal-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-header { position: sticky; top: 0; background: var(--bg-page); z-index: 2; }
  .modal-footer { position: sticky; bottom: 0; background: var(--bg-page); z-index: 2; }

  /* Aside drawer (task / person edit panels) → full-width sheet */
  .aside-backdrop .aside-panel,
  .hub-aside-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Conversation switcher popover — clamp into viewport */
  .hub-conversation-popover {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    transform: none !important;
  }

  /* Sidebar slide-in slightly tighter on small phones */
  .sidebar.mobile-open { width: min(290px, 86vw); min-width: 0; }

  /* All Chats dialog → bottom sheet, mirroring the form-modal mobile rules */
  .chats-modal-back { align-items: flex-end !important; padding: 0 !important; }
  .chats-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 24px);
    border-radius: 18px 18px 0 0 !important;
    margin: 0 !important;
  }
  .chats-modal-search { padding: 10px 14px 12px; }
  .chats-modal-search-icon { left: 28px; }
  .chats-modal-search-clear { right: 22px; }
  .chats-modal-list { padding: 6px 10px 16px; }

  /* Files lightbox sized for mobile */
  .files-lightbox-header { padding: 10px 12px; }
  .files-lightbox-body { padding: 8px; }

  /* Document/wiki content padding */
  .docs-shell, .doc-detail-shell { padding: 0 !important; }
}

/* ─── Phase 3 polish ─── */

/* Use modern viewport units so iOS Safari's chrome doesn't add 100vh */
.modal,
.form-modal,
.aside-panel { max-height: 100dvh; }

/* Bump assistant FAB above the home indicator on iOS */
.hub-assistant-fab {
  bottom: max(24px, env(safe-area-inset-bottom, 24px)) !important;
  right: max(24px, env(safe-area-inset-right, 24px)) !important;
}

/* ─── Recent Chats sidebar group + All Chats dialog ─── */
.sidebar-chats-group .sidebar-group-label { display: flex; align-items: center; gap: 6px; }
.sidebar-chats-section { display: flex; flex-direction: column; gap: 4px; }
.sidebar-chats-list {
  /* Stretch to take whatever room is left below the sidebar nav, with a
     generous floor on smaller screens. */
  max-height: max(420px, calc(100dvh - 280px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}
.sidebar-chats-list::-webkit-scrollbar { width: 8px; }
.sidebar-chats-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
/* Chat rows + All chats entry use a tighter, more uniform spec than the
   default .sidebar-item so the chat list reads as a compact column. */
.sidebar-chat-row,
.sidebar-chat-allchats {
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
  padding: 16px 14px;
  gap: 8px;
  border-radius: 9px;
}
.sidebar-chat-row .chat-row-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-chat-row .chat-row-time {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--sidebar-label-color);
  font-variant-numeric: tabular-nums;
}
.sidebar-chat-row.is-active .chat-row-time { color: inherit; opacity: 0.7; }
.sidebar-chats-loader, .sidebar-chats-empty {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--sidebar-label-color);
  text-align: center;
}
.sidebar-chat-allchats { font-weight: 500; }
/* Legacy shim for any cached markup */
.sidebar-chat-allbtn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--sidebar-text);
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin: 6px 8px 2px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.sidebar-chat-allbtn:hover {
  background: var(--sidebar-hover-bg);
  color: #E6E6E6;
  border-color: rgba(255,255,255,0.22);
}

/* All Chats dialog */
.chats-modal-back {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  animation: filesFadeIn 200ms ease-out;
}
.chats-modal {
  background: var(--bg-page, #fff);
  width: 720px; max-width: 92vw;
  max-height: 80vh;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.32);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: filesSlideUp 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.chats-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 12px;
  border-bottom: 1px solid rgba(17,22,32,0.06);
}
.chats-modal-head h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--text-primary, #1f242b); }
.chats-modal-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 22px; line-height: 1;
  color: var(--text-tertiary, #6a7280);
  padding: 4px 8px; border-radius: 8px;
}
.chats-modal-close:hover { background: rgba(17,22,32,0.06); color: var(--text-primary, #1f242b); }
.chats-modal-search {
  position: relative;
  padding: 12px 22px 14px;
  border-bottom: 1px solid rgba(17,22,32,0.06);
}
.chats-modal-search-input {
  width: 100%;
  padding: 11px 38px 11px 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text-primary, #1f242b);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.chats-modal-search-input::placeholder { color: var(--text-tertiary, #6a7280); }
.chats-modal-search-input:hover {
  background: color-mix(in srgb, var(--bg-secondary, #f3f4f6) 70%, var(--bg-page, #fff));
}
.chats-modal-search-input:focus {
  background: var(--bg-page, #fff);
  border-color: color-mix(in srgb, var(--accent, #e8552e) 35%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #e8552e) 16%, transparent);
}
/* Hide the native clear/cancel button — we render our own */
.chats-modal-search-input::-webkit-search-cancel-button,
.chats-modal-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.chats-modal-search-icon {
  position: absolute;
  left: 36px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary, #6a7280);
  font-size: 16px;
  pointer-events: none;
}
.chats-modal-search-input:focus ~ .chats-modal-search-icon,
.chats-modal-search:hover .chats-modal-search-icon { color: var(--accent, #e8552e); }

.chats-modal-search-clear {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary, #6a7280);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, color 140ms ease;
}
.chats-modal-search-clear:hover {
  background: rgba(17,22,32,0.06);
  color: var(--text-primary, #1f242b);
}
.chats-modal-search-clear i { font-size: 14px; }

.chats-modal-list {
  overflow-y: auto;
  flex: 1 1 auto;
  padding: 8px 14px 14px;
  display: flex; flex-direction: column; gap: 1px;
}
.chats-modal-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  color: var(--text-primary, #1f242b);
  font-size: 14px;
  text-decoration: none;
  border-radius: 8px;
  transition: background 140ms ease;
}
.chats-modal-row:hover { background: rgba(17,22,32,0.05); text-decoration: none; }
.chats-modal-row.is-active { background: rgba(232,85,46,0.08); }
.chats-modal-row .chat-row-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chats-modal-row .chat-row-time {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-tertiary, #6a7280);
  font-variant-numeric: tabular-nums;
}
.chats-modal-empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--text-tertiary, #6a7280);
  font-size: 13px;
}

/* People page — By-group sections */
.people-group-section {
  margin-top: 0;
}
.people-group-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  user-select: none;
}
.people-group-section-header h2 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  margin: 0;
  flex: 1 1 auto;
}
.people-group-section-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  background: var(--surface-alt, rgba(0,0,0,0.04));
  padding: 1px 8px;
  border-radius: var(--radius-pill, 999px);
}
.people-group-section-chevron {
  font-size: 12px;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  color: var(--text-muted, #6b7280);
}
/* Group accordion icon: the group's real line icon, rendered in a neutral
   dark gray (intentionally not tinted with the group color). */
.people-group-section-folder {
  font-size: 14px;
  flex-shrink: 0;
  color: #4b5563;
}
.people-group-section.collapsed .people-group-section-chevron { transform: rotate(-90deg); }
.people-group-section.collapsed .people-group-section-body { display: none; }
.people-group-section-body { margin-top: var(--space-3); }

.people-load-more {
  display: flex;
  justify-content: center;
  margin: var(--space-3) 0;
}
.people-section-empty {
  padding: 12px 0;
  color: var(--text-muted, #6b7280);
  font-size: 13px;
}

/* Group chips on person cards */
.person-card-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 6px;
}
.person-group-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-alt, rgba(0,0,0,0.06));
  color: var(--text, #1a1a1a);
  cursor: pointer;
  transition: opacity 150ms ease;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.person-group-chip:hover { opacity: 0.8; }
.person-group-chip[data-color="orange"] { background: rgba(232, 85, 46, 0.15); color: #b8421f; }
.person-group-chip[data-color="blue"]   { background: rgba(59, 130, 246, 0.15); color: #1e40af; }
.person-group-chip[data-color="green"]  { background: rgba(34, 197, 94, 0.15); color: #166534; }
.person-group-chip[data-color="purple"] { background: rgba(168, 85, 247, 0.15); color: #6b21a8; }
.person-group-chip[data-color="red"]    { background: rgba(239, 68, 68, 0.15); color: #991b1b; }
.person-group-chip[data-color="yellow"] { background: rgba(234, 179, 8, 0.20); color: #854d0e; }
.person-group-chip[data-color="gray"]   { background: var(--surface-alt, rgba(0,0,0,0.08)); color: var(--text-muted, #4b5563); }
.person-group-chip-more {
  background: transparent;
  color: var(--text-muted, #6b7280);
  cursor: help;
}

/* ── Series (event series grouping) ── */
.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(396px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.series-card {
  display: flex; align-items: stretch; gap: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .2s, transform .12s;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.series-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.10);
  transform: translateY(-1px);
}
/* Big square cover — actual photo when image_url is set, otherwise
   a warm gradient with the first letter. Roughly 2.5× the old
   34px icon footprint so the card finally feels intentional. */
.series-card-cover {
  width: 96px; height: 96px; border-radius: 14px; overflow: hidden;
  flex: none; background: var(--bg-secondary);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
}
.series-card-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.series-card-cover.is-fallback {
  background: linear-gradient(135deg, #ffd3b6 0%, #e8552e 100%);
  border-color: transparent;
}
.series-card-cover-letter {
  font-size: 38px; font-weight: 700; color: #fff;
  letter-spacing: -0.02em; line-height: 1;
}
.series-card-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px;
}
.series-card-headline {
  display: flex; align-items: flex-start; gap: 10px; justify-content: space-between;
}
.series-card-title-wrap { flex: 1; min-width: 0; }
.series-card-title {
  font-weight: 650; color: var(--text-primary); font-size: 16px;
  line-height: 1.25; letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.series-card-key {
  font-size: 11px; color: var(--text-secondary); letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; margin-top: 4px;
}
.series-card-desc {
  margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.series-card-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 12px; color: var(--text-secondary); margin-top: auto;
}
.series-card-cadence, .series-card-count { display: inline-flex; align-items: center; gap: 4px; }

/* ── Series card: inline upcoming events preview ─────────────── */
.series-card-events {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 8px; padding-top: 10px;
  border-top: 1px dashed rgba(15, 23, 42, 0.10);
}
.series-card-events-empty {
  font-size: 12px; color: var(--text-tertiary); font-style: italic;
  border: 0; padding-top: 0;
}
.series-card-event {
  display: grid; grid-template-columns: 42px 1fr; gap: 10px;
  align-items: center;
  padding: 6px 8px; border-radius: 8px;
  text-decoration: none; color: inherit;
  transition: background .12s;
}
.series-card-event:hover { background: var(--bg-page); text-decoration: none; }
.series-card-event-date {
  display: flex; flex-direction: column; align-items: center;
  line-height: 1; text-align: center;
}
.series-card-event-mon {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.series-card-event-day {
  font-size: 18px; font-weight: 700; color: var(--text-primary);
  margin-top: 2px;
}
.series-card-event-body { min-width: 0; }
.series-card-event-title {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.series-card-event-time {
  font-size: 11.5px; color: var(--text-secondary);
  margin-top: 1px; font-variant-numeric: tabular-nums;
}
.series-card-events-more {
  font-size: 11.5px; font-weight: 600; color: var(--accent);
  text-decoration: none; align-self: flex-start;
  margin-left: 8px; margin-top: 2px;
}
.series-card-events-more:hover { text-decoration: underline; }

/* ── /events page: series pill in the row footer ─────────────── */
.ev-series-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px 2px 2px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border);
  font-size: 11.5px; font-weight: 600; color: var(--text-primary);
  text-decoration: none;
  transition: border-color .12s, box-shadow .14s;
}
.ev-series-pill:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.ev-series-pill-cover {
  width: 20px; height: 20px; border-radius: 50%;
  object-fit: cover; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.ev-series-pill-cover-fallback {
  background: linear-gradient(135deg, #ffd3b6 0%, #e8552e 100%);
  color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: -0.01em;
}
.ev-series-pill-name {
  max-width: 140px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 520px) {
  .series-card { gap: 12px; padding: 12px; }
  .series-card-cover { width: 72px; height: 72px; }
  .series-card-cover-letter { font-size: 28px; }
}

.series-detail-head { display: flex; align-items: center; gap: 12px; margin: 8px 0 18px; }
.series-detail-sub { color: var(--text-secondary); font-size: 13px; }
.evd-breadcrumb { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.evd-breadcrumb a { color: var(--accent); text-decoration: none; }

.series-events-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.series-events-count { color: var(--text-secondary); font-size: 13px; }
.series-event-list { display: flex; flex-direction: column; gap: 8px; }
.series-event-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.series-event-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; }
.series-event-title { font-weight: 500; color: var(--text-primary); }
.series-event-date { color: var(--text-secondary); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.series-empty { color: var(--text-secondary); padding: 24px; text-align: center; }
.attach-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.attach-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 6px; border-bottom: 1px solid var(--border); }

/* ── Series Events: Luma-style timeline ───────────────────────── */
.lt-timeline {
  display: flex; flex-direction: column; gap: 4px; padding: 4px 0;
}
.lt-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding: 20px 0 4px;
}
.lt-section-title.is-past { color: var(--text-tertiary); opacity: 0.7; }
/* Drop the little accent dot — the section title reads clean without it,
   and it echoed the vertical guide line we're also removing. */
.lt-section-dot { display: none; }

.lt-row {
  display: grid; grid-template-columns: 72px 1fr; gap: 16px;
  align-items: stretch;
  padding: 8px 0;
}

/* Date column */
.lt-time {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; line-height: 1.1; position: relative; z-index: 1;
  padding-top: 2px;
}
.lt-month {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--accent); text-transform: uppercase;
}
.lt-day {
  font-size: 26px; font-weight: 700; color: var(--text-primary);
  line-height: 1;
}
.lt-dow {
  font-size: 11px; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-top: 2px;
}
.lt-hour {
  margin-top: 6px; font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Card */
.lt-card {
  display: grid; grid-template-columns: 88px 1fr;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--border); border-radius: 14px;
  background: #fff; color: inherit;
  text-decoration: none;
  transition: border-color 140ms, box-shadow 160ms, transform 120ms;
  position: relative;
}
.lt-card:hover,
.lt-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
  text-decoration: none;
}
.lt-card:hover .lt-card-title,
.lt-card:focus-visible .lt-card-title { text-decoration: none; }
.lt-card-cover {
  width: 88px; height: 88px; border-radius: 10px; overflow: hidden;
  background: var(--bg-secondary); flex: none;
}
.lt-card-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.lt-card-cover-fallback {
  background: linear-gradient(135deg, rgba(232, 85, 47, 0.18), rgba(232, 85, 47, 0.06));
  display: inline-flex; align-items: center; justify-content: center;
}
.lt-card-cover-num {
  font-size: 28px; font-weight: 700; color: var(--accent);
  letter-spacing: -0.02em;
}
.lt-card-body {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.lt-card-title {
  font-size: 15.5px; font-weight: 650; color: var(--text-primary);
  line-height: 1.3; letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lt-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.lt-card-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 99px;
  background: var(--bg-page); color: var(--text-secondary);
  font-size: 11.5px; font-weight: 500;
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lt-card-pill i { font-size: 12px; color: var(--text-tertiary); }
.lt-card-pill.event-status-badge {
  /* event-status-badge brings its own background/color — let it through. */
  background: inherit;
}
.lt-card-remove {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 8px;
  background: transparent; border: 0; color: var(--text-tertiary);
  font-size: 14px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 140ms, background 120ms, color 120ms;
}
.lt-card:hover .lt-card-remove,
.lt-card:focus-visible .lt-card-remove { opacity: 1; }
.lt-card-remove:hover { background: #fff0ee; color: #b42318; }

/* Past rows: muted */
.lt-row.is-past .lt-day { color: var(--text-secondary); }
.lt-row.is-past .lt-month { color: var(--text-tertiary); }
.lt-row.is-past .lt-card { background: var(--bg-page); }
.lt-row.is-past .lt-card-title { color: var(--text-secondary); }

@media (max-width: 640px) {
  .lt-row { grid-template-columns: 60px 1fr; gap: 10px; }
  .lt-day { font-size: 22px; }
  .lt-card { grid-template-columns: 64px 1fr; gap: 10px; padding: 10px; }
  .lt-card-cover { width: 64px; height: 64px; }
}

.series-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 8px 0 20px; }
.series-stat { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; background: var(--bg-page); }
.series-stat-value { font-size: 24px; font-weight: 700; color: var(--text-primary); }
.series-stat-label { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.series-stat-sub { font-size: 11px; color: var(--text-secondary); margin-top: 4px; opacity: .85; }
.series-section { margin: 18px 0; }
.series-section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin-bottom: 10px; }
.series-kv { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.series-kv span { color: var(--text-secondary); }
.series-bars { display: flex; flex-direction: column; gap: 6px; }
.series-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.series-bar-label { width: 90px; flex: none; color: var(--text-secondary); }
.series-bar-track { flex: 1; height: 14px; background: var(--bg-secondary); border-radius: var(--radius-pill); overflow: hidden; }
.series-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.series-bar-value { width: 28px; text-align: right; flex: none; color: var(--text-primary); font-weight: 600; }
.series-status-row { display: flex; flex-wrap: wrap; gap: 8px; }
.series-settings { max-width: 640px; }
.series-settings-actions { display: flex; gap: 10px; margin-top: 16px; }

/* ── Series header: clickable image button + overlay ── */
.series-detail-head { gap: 14px; }
.series-detail-headline { flex: 1; min-width: 0; }
.series-detail-icon-btn {
  position: relative; border: 0; padding: 0; background: transparent;
  border-radius: 12px; cursor: pointer; flex: none;
  width: 56px; height: 56px;
  transition: transform 140ms;
}
.series-detail-icon-btn:hover { transform: translateY(-1px); }
.series-detail-icon-btn .series-detail-icon-img,
.series-detail-icon-btn .series-detail-icon-glyph {
  width: 56px; height: 56px; border-radius: 12px;
}
.series-detail-icon-btn .series-detail-icon-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-secondary); color: var(--accent);
  border: 1px solid var(--border); font-size: 22px;
}
.series-detail-icon-img {
  width: 56px; height: 56px; border-radius: 12px; object-fit: cover;
  border: 1px solid var(--border);
}
.series-detail-icon-overlay {
  position: absolute; inset: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.55); color: #fff; font-size: 18px;
  opacity: 0; transition: opacity 160ms ease;
}
.series-detail-icon-btn:hover .series-detail-icon-overlay,
.series-detail-icon-btn:focus-visible .series-detail-icon-overlay { opacity: 1; }

/* ── Series Settings: image preview block (kept compact) ── */
.ss-image-row { display: flex; align-items: center; gap: 14px; }
.ss-image-preview {
  width: 64px; height: 64px; border-radius: 12px; object-fit: cover;
  border: 1px solid var(--border); flex: none; background: var(--bg-page);
}
.ss-image-preview-empty {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); font-size: 24px;
}
.ss-image-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }

/* ── Series Image Editor: modern modal ──────────────────────── */
.sx-backdrop {
  position: fixed; inset: 0; z-index: 10020;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: sxFade 160ms ease-out;
}
@keyframes sxFade { from { opacity: 0 } to { opacity: 1 } }
.sx-modal {
  width: 100%; max-width: 760px; max-height: 92vh;
  background: #fff; border-radius: 20px;
  box-shadow: 0 24px 72px rgba(15, 23, 42, 0.32), 0 4px 14px rgba(15, 23, 42, 0.12);
  display: flex; flex-direction: column; overflow: hidden;
  animation: sxRise 200ms cubic-bezier(.2,.8,.2,1);
}
@keyframes sxRise {
  from { opacity: 0; transform: translateY(10px) scale(.985) }
  to   { opacity: 1; transform: translateY(0) scale(1) }
}
.sx-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.sx-title { font-size: 16px; font-weight: 700; letter-spacing: -0.005em; color: var(--text-primary); }
.sx-close {
  background: transparent; border: 0; color: var(--text-tertiary);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px;
  transition: background 120ms, color 120ms;
}
.sx-close:hover { background: var(--bg-secondary); color: var(--text-primary); }
.sx-body {
  padding: 18px 22px 22px; overflow: auto; display: flex; flex-direction: column; gap: 18px;
  transition: opacity 160ms;
}
.sx-body.is-busy { opacity: 0.55; pointer-events: none; }

/* current image strip */
.sx-current {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; background: var(--bg-page); border-radius: 14px;
}
.sx-current-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-tertiary); flex: none;
}
.sx-current-img {
  width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none;
  border: 1px solid var(--border); background: #fff;
}
.sx-current-img-empty {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); font-size: 18px;
}
.sx-remove {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid transparent; color: #b42318;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 6px 10px; border-radius: 8px;
  transition: background 120ms, border-color 120ms;
}
.sx-remove:hover { background: #fff0ee; border-color: #f4c5be; }

/* drop zone */
.sx-dropzone {
  position: relative; padding: 28px 20px;
  border: 2px dashed rgba(15, 23, 42, 0.16); border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(247,248,250,0.6));
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  transition: border-color 140ms, background 140ms, transform 140ms;
}
.sx-dropzone.is-drag {
  border-color: var(--accent); background: rgba(232, 85, 47, 0.06); transform: scale(1.005);
}
.sx-dropzone-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--accent); border: 1px solid var(--border);
  font-size: 20px;
}
.sx-dropzone-title { font-size: 14.5px; font-weight: 650; color: var(--text-primary); }
.sx-dropzone-sub { font-size: 12px; color: var(--text-tertiary); }
.sx-dropzone-btn {
  margin-top: 4px; padding: 9px 18px; border-radius: 99px;
  background: var(--text-primary); color: #fff; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 600;
  transition: transform 100ms, box-shadow 160ms;
}
.sx-dropzone-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18); }

/* gallery section */
.sx-section { display: flex; flex-direction: column; gap: 10px; }
.sx-section-head { display: flex; align-items: baseline; justify-content: space-between; }
.sx-section-title { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.sx-status { font-size: 11.5px; color: var(--text-tertiary); }
.sx-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  grid-auto-rows: 100px;
  gap: 8px; max-height: 38vh; overflow: auto; padding: 2px;
}
.sx-gallery-loading,
.sx-gallery-empty,
.sx-gallery-error {
  grid-column: 1 / -1; padding: 28px 16px; text-align: center;
  color: var(--text-tertiary); font-size: 13px;
}
.sx-gallery-error { color: #b42318; }
.sx-thumb {
  position: relative; height: 100px !important; border-radius: 10px;
  overflow: hidden !important; cursor: pointer; padding: 0;
  border: 2px solid transparent; background: var(--bg-secondary);
  min-width: 0; min-height: 0; box-sizing: border-box;
  transition: transform 120ms, border-color 120ms, box-shadow 160ms;
}
/* Definite tile height + high-specificity !important defeats browser-extension
   img resets (memory: aditya's browser forces img styles). height:100% resolves
   against the 100px box even if the img is forced position:static, so it can
   never render at natural size and spill/overlap into neighbours. */
.sx-thumb img {
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
  min-width: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important;
  object-fit: cover !important; display: block !important;
}
.sx-thumb:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14); }
.sx-thumb.is-current { border-color: var(--accent); }
.sx-thumb-check {
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}

/* ── Series Speakers tab ── */
.series-speakers-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.series-speakers-count { color: var(--text-secondary); font-size: 13px; }
.series-speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.series-speaker-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-page); text-decoration: none; color: inherit; transition: border-color 120ms, transform 120ms; }
.series-speaker-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.series-speaker-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.series-speaker-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-secondary); color: var(--text-secondary); font-weight: 700; font-size: 18px; }
.series-speaker-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.series-speaker-name { font-weight: 600; color: var(--text-primary); font-size: 14px; }
.series-speaker-sub { font-size: 12px; color: var(--text-secondary); }
.series-speaker-count { font-size: 12px; color: var(--accent); font-weight: 600; margin-top: 4px; }
.series-speaker-events { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.series-speaker-event { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--bg-secondary); color: var(--text-secondary); text-decoration: none; max-width: 100%; }
.series-speaker-event:hover { background: var(--bg-page); color: var(--text-primary); }
.series-speaker-event-date { font-weight: 600; }
.series-speaker-event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.series-speaker-event-more { font-size: 11px; color: var(--text-secondary); align-self: center; }

/* ── Series Dashboard: week-on-week RSVP vs attended ── */
.series-dual-bars { display: flex; flex-direction: column; gap: 6px; }
.series-dual-row { display: grid; grid-template-columns: 90px 1fr 70px; gap: 8px; align-items: center; font-size: 12px; }
.series-dual-label { color: var(--text-secondary); }
.series-dual-bars-stack { display: flex; flex-direction: column; gap: 2px; height: 18px; }
.series-dual-bar { display: block; height: 7px; border-radius: var(--radius-pill); }
.series-dual-bar-rsvp { background: var(--bg-secondary); }
.series-dual-bar-attended { background: var(--accent); }
.series-dual-values { text-align: right; color: var(--text-primary); font-weight: 600; }
.series-dual-legend { display: flex; gap: 16px; font-size: 11px; color: var(--text-secondary); margin-top: 8px; }
.series-dual-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }

/* ── Series Dashboard: stacked new vs returning ── */
.series-stacked-bars { display: flex; flex-direction: column; gap: 6px; }
.series-stacked-row { display: grid; grid-template-columns: 90px 1fr 130px; gap: 8px; align-items: center; font-size: 12px; }
.series-stacked-label { color: var(--text-secondary); }
.series-stacked-track { display: inline-flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden; background: var(--bg-secondary); min-width: 4px; }
.series-stacked-new { display: block; height: 100%; background: var(--accent); }
.series-stacked-ret { display: block; height: 100%; background: var(--bg-secondary); }
.series-stacked-values { text-align: right; color: var(--text-secondary); }

/* ── Series Dashboard: top returning speakers ── */
.series-top-speakers { display: flex; flex-wrap: wrap; gap: 8px; }
.series-top-speaker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-page); text-decoration: none; color: inherit; transition: border-color 120ms; }
.series-top-speaker:hover { border-color: var(--accent); }
.series-top-speaker-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.series-top-speaker-name { font-weight: 600; color: var(--text-primary); font-size: 13px; }
.series-top-speaker-count { font-size: 11px; color: var(--text-secondary); }

/* ── Event-detail: Speaker picker modal ── */
.evd-speakers-section { margin-top: 0; }
.evd-speakers-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.evd-speakers-head h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin: 0; }
.evd-speakers-head-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.evd-speaker-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.evd-speaker-search-wrap i {
  position: absolute;
  left: 10px;
  font-size: 13px;
  color: var(--text-tertiary);
  pointer-events: none;
}
.evd-speaker-search {
  width: 200px;
  padding: 7px 12px 7px 30px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  transition: border-color 150ms ease, box-shadow 150ms ease, width 150ms ease;
}
.evd-speaker-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  width: 240px;
}
.evd-speaker-nomatch {
  padding: 26px 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-page);
  margin-top: 10px;
}

/* Speaker cards — avatar + name + title·company, drawer on click */
.evd-speaker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
.evd-speaker-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.evd-speaker-card:hover {
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}
.evd-speaker-avatar-wrap { position: relative; flex-shrink: 0; display: inline-flex; }
.evd-speaker-mic {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  border: 2px solid var(--bg-page);
}
.evd-speaker-body { min-width: 0; flex: 1; }
.evd-speaker-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evd-speaker-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evd-speaker-sub-dim { color: var(--text-tertiary); }
.evd-speaker-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}
.evd-speaker-card:hover .evd-speaker-remove { opacity: 1; }
.evd-speaker-remove:hover { background: rgba(216, 58, 58, 0.1); color: var(--danger, #d83a3a); }
.evd-speaker-empty { color: var(--text-secondary); font-size: 12px; padding: 8px; }
.speaker-pick-search { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; }
.speaker-pick-results { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.speaker-pick-result { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; transition: background 120ms; }
.speaker-pick-result:hover { background: var(--bg-page); }
.speaker-pick-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--bg-secondary); }
.speaker-pick-body { flex: 1; min-width: 0; }
/* Invite-guests picker: rows aren't whole-row clickable (button on the right). */
#ig-results .speaker-pick-result, #speaker-pick-results .speaker-pick-result { cursor: default; }
.ig-invite-btn { flex: 0 0 auto; }
.ig-invited { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--text-tertiary); padding: 0 6px; white-space: nowrap; }
/* Initials fallback when a Person has no avatar (speaker/invite pickers). */
.speaker-pick-avatar-fb { display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: var(--text-secondary); }
.speaker-pick-name { font-weight: 500; color: var(--text-primary); }
.speaker-pick-sub { font-size: 12px; color: var(--text-secondary); }

/* ── Feed: header button + badge ── */
.hub-feed-btn {
  display: inline-flex; align-items: center; gap: 6px; position: relative;
  background: var(--bg-page); border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px); padding: 7px 12px;
  cursor: pointer; color: var(--text-primary); font: inherit;
  font-size: 13px; font-weight: 600;
  transition: border-color 120ms ease, color 120ms ease;
}
.hub-feed-btn:hover { border-color: var(--accent); color: var(--accent); }
.hub-feed-btn i { font-size: 16px; }
.hub-feed-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
}

/* ── Feed: fullscreen timeline modal ── */
body.hub-feed-modal-open { overflow: hidden; }
.hub-feed-modal {
  position: fixed; inset: 0; z-index: 1000; background: #fff;
  display: flex; flex-direction: column; animation: hubFeedFadeIn 0.15s ease;
}
@keyframes hubFeedFadeIn { from { opacity: 0; } to { opacity: 1; } }
.hub-feed-modal-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--border);
  background: #fff; flex: none;
}
.hub-feed-modal-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-primary); }
.hub-feed-modal-close {
  background: transparent; border: none; font-size: 28px; line-height: 1;
  cursor: pointer; color: var(--text-secondary);
  width: 40px; height: 40px; border-radius: 8px;
}
.hub-feed-modal-close:hover { background: var(--bg-secondary); color: var(--text-primary); }
.hub-feed-modal-body { flex: 1; overflow-y: auto; padding: 28px 24px 80px; }
.hub-feed-timeline { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; }
.hub-feed-item { display: flex; gap: 16px; }
/* Newest item drops in "just created" — used when the Feed is opened right
   after a scheduled-task test posts its result. */
@keyframes hubFeedDropIn { 0% { opacity: 0; transform: translateY(-12px) scale(0.985); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes hubFeedFlash { 0% { box-shadow: 0 0 0 3px rgba(232,85,46,0.30); } 100% { box-shadow: 0 0 0 0 rgba(232,85,46,0); } }
.hub-feed-item--fresh { animation: hubFeedDropIn 520ms cubic-bezier(0.16,1,0.3,1); }
.hub-feed-item--fresh .hub-feed-item-card { border-radius: 12px; animation: hubFeedFlash 1400ms ease-out 120ms; }
@media (prefers-reduced-motion: reduce) { .hub-feed-item--fresh, .hub-feed-item--fresh .hub-feed-item-card { animation: none; } }
.hub-feed-item-rail { display: flex; flex-direction: column; align-items: center; flex: none; width: 14px; }
.hub-feed-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex: none; }
.hub-feed-item:not(:last-child) .hub-feed-item-rail::after {
  content: ""; flex: 1; width: 2px; background: var(--border); margin-top: 4px;
}
.hub-feed-item-card { flex: 1; min-width: 0; padding-bottom: 28px; }
.hub-feed-item-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.hub-feed-item-meta { display: inline-flex; align-items: center; gap: 8px; color: var(--text-tertiary); font-size: 12px; white-space: nowrap; }
.hub-feed-source { background: var(--bg-secondary); color: var(--text-secondary); border-radius: 6px; padding: 1px 7px; font-weight: 600; }
.hub-feed-dismiss {
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 16px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease;
}
.hub-feed-item:hover .hub-feed-dismiss,
.hub-feed-dismiss:focus-visible { opacity: 1; }
.hub-feed-dismiss:hover { background: var(--bg-secondary); color: var(--text-primary); }
.hub-feed-item.is-dismissing {
  opacity: 0;
  transform: translateX(10px);
  height: 0 !important;
  transition: opacity 200ms ease, transform 240ms ease, height 260ms ease;
  pointer-events: none;
}
/* Feed markdown — same calm typography as the event About block
   (.evd-about-body), plus tables/hr which briefs use heavily. The compound
   .hub-feed-item-body.markdown-body selectors out-rank github-markdown-css
   (.markdown-body …) on the pages that load it, and normalize browser
   defaults everywhere else. */
.hub-feed-item-body.markdown-body {
  color: var(--text-primary);
  font-size: 14.5px;
  line-height: 1.65;
  overflow-wrap: break-word;
}
.hub-feed-item-body > *:first-child { margin-top: 0; }
.hub-feed-item-body.markdown-body .markdown-body > *:first-child { margin-top: 0; }
.hub-feed-item-body.markdown-body p { margin: 0 0 12px; }
.hub-feed-item-body.markdown-body p:last-child { margin-bottom: 0; }
.hub-feed-item-body.markdown-body h1,
.hub-feed-item-body.markdown-body h2,
.hub-feed-item-body.markdown-body h3,
.hub-feed-item-body.markdown-body h4 {
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 22px 0 8px;
  border: 0;
  padding: 0;
  background: transparent;
}
.hub-feed-item-body.markdown-body h1 { font-size: 18px; }
.hub-feed-item-body.markdown-body h2 { font-size: 16px; }
.hub-feed-item-body.markdown-body h3,
.hub-feed-item-body.markdown-body h4 { font-size: 15px; }
.hub-feed-item-body.markdown-body ul,
.hub-feed-item-body.markdown-body ol {
  margin: 8px 0 14px;
  padding-left: 24px;
}
.hub-feed-item-body.markdown-body li { margin: 6px 0; padding-left: 2px; }
.hub-feed-item-body.markdown-body li::marker { color: var(--text-tertiary); }
.hub-feed-item-body.markdown-body li.task-list-item { list-style: none; margin-left: -18px; }
.hub-feed-item-body.markdown-body li.task-list-item input { margin-right: 7px; vertical-align: -1.5px; }
.hub-feed-item-body.markdown-body strong { font-weight: 650; }
.hub-feed-item-body.markdown-body img { max-width: 100%; border-radius: 10px; margin: 6px 0 14px; }
.hub-feed-item-body.markdown-body blockquote {
  margin: 12px 0;
  padding: 8px 16px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: rgba(17, 19, 25, 0.03);
  border-radius: 0 8px 8px 0;
  color: var(--text-secondary);
}
.hub-feed-item-body.markdown-body blockquote p { margin: 6px 0; }
.hub-feed-item-body.markdown-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: var(--bg-secondary);
  padding: 1px 5px;
  border-radius: 5px;
}
.hub-feed-item-body.markdown-body pre {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 12px 0 14px;
}
.hub-feed-item-body.markdown-body pre code { background: transparent; padding: 0; }
.hub-feed-item-body.markdown-body hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 18px 0;
  height: 0;
  background: transparent;
}
.hub-feed-item-body.markdown-body table {
  border-collapse: collapse;
  margin: 10px 0 16px;
  font-size: 13.5px;
  max-width: 100%;
  display: block;
  width: fit-content;
  overflow-x: auto;
}
.hub-feed-item-body.markdown-body th,
.hub-feed-item-body.markdown-body td {
  text-align: left;
  padding: 7px 14px;
  border: 1px solid var(--border);
  background: transparent;
}
.hub-feed-item-body.markdown-body thead th {
  background: var(--bg-secondary);
  font-weight: 650;
  color: var(--text-primary);
}
.hub-feed-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 72px 20px;
}
.hub-feed-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  margin-bottom: 12px;
}
.hub-feed-empty-title {
  font-size: 15.5px;
  font-weight: 650;
  color: var(--text-primary);
}
.hub-feed-empty-desc {
  font-size: 13px;
  color: var(--text-tertiary);
  max-width: 320px;
  line-height: 1.5;
}

/* ── Sidebar agent launcher ─────────────────────────────────────────────
   Replaces the floating bottom-right FAB on pages with the shared sidebar.
   app.js renders the empty .sidebar-agent-slot; the assistant bundle
   portals the button into it. Sticky so it stays visible at the sidebar
   bottom even when the nav list scrolls. */
.sidebar-agent-slot {
  /* A real footer below the scroll region — never overlaps nav items now
     that .sidebar-scroll owns scrolling. */
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-top: 1px solid var(--sidebar-border);
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-agent-slot:empty { display: none; }
.sidebar-agent-launcher {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--sidebar-text, #1f1f24);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.sidebar-agent-launcher:hover,
.sidebar-agent-launcher.is-open {
  background: var(--sidebar-hover-bg, rgba(127, 127, 127, 0.18));
  color: var(--sidebar-text, #1f1f24);
}
.sidebar-agent-launcher-avatar { position: relative; width: 28px; height: 28px; flex-shrink: 0; }
.sidebar-agent-launcher-img,
.sidebar-agent-launcher-avatar img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}
.sidebar-agent-launcher-letter,
.sidebar-agent-launcher-avatar .hub-msg-avatar-fallback {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent, #e8552e);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.sidebar-agent-launcher-pill {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--sidebar-bg);
  background: #9aa0aa;
}
.sidebar-agent-launcher-pill.is-green { background: #16a34a; }
.sidebar-agent-launcher-pill.is-yellow { background: #eab308; }
.sidebar-agent-launcher-pill.is-red { background: #dc2626; }
.sidebar-agent-launcher-pill.is-gray { background: #9aa0aa; }
.sidebar-agent-launcher-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sidebar-agent-launcher-count {
  margin-left: auto;
  flex-shrink: 0;
  background: var(--sidebar-active-bg, #e8552e);
  color: var(--sidebar-active-text, #fff);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
}
/* Shared Show Desktop control — sits just above the agent launcher. */
.sidebar-desktop-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sidebar-text, #1f1f24);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  opacity: 0.85;
  transition: background 140ms ease, opacity 140ms ease;
}
.sidebar-desktop-btn:hover,
.sidebar-desktop-btn.is-open {
  background: var(--sidebar-hover-bg, rgba(127, 127, 127, 0.18));
  opacity: 1;
}
.sidebar-desktop-btn svg { flex-shrink: 0; }
.sidebar-desktop-btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sidebar-desktop-kbd {
  margin-left: auto;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 5px;
  border: 1px solid var(--sidebar-border, rgba(0, 0, 0, 0.12));
  opacity: 0.75;
}

/* ═══ Conferences — GTM attendance suite ═══ */

/* — List page — */
.cf-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.cf-page-sub { margin: 6px 0 0; color: var(--text-secondary); font-size: 14px; max-width: 560px; }
.cf-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cf-filter-row { display: flex; gap: 6px; margin-bottom: var(--space-5); flex-wrap: wrap; }
.cf-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--bg-page);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 120ms ease;
}
.cf-filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.cf-filter-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cf-filter-count { font-size: 11px; font-weight: 700; opacity: 0.75; }

.cf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.cf-card {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  transition: border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}
.cf-card:hover {
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}
.cf-card-head { display: flex; align-items: center; gap: 12px; }
.cf-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.cf-mark img { width: 26px; height: 26px; object-fit: contain; }
.cf-mark.is-fb { border: 0; }
.cf-card-id { min-width: 0; flex: 1; }
.cf-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-card-host { font-size: 12px; color: var(--text-tertiary); margin-top: 1px; }

.cf-status {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
  padding: 3px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.cf-status-planned   { background: #d5ecff; color: #0e5590; }
.cf-status-active    { background: #d9f2e0; color: #1a6b3d; }
.cf-status-completed { background: #e8e6f5; color: #4b4192; }
.cf-status-cancelled { background: #ffdada; color: #a41c1c; }

.cf-card-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; }
.cf-meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); }
.cf-meta-item i { font-size: 13px; color: var(--text-tertiary); }

.cf-card-research { margin-top: 14px; }
.cf-research-top {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: 5px;
}
.cf-meter {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 5px;
  background: rgba(17, 19, 25, 0.07);
  border-radius: 999px;
  overflow: hidden;
  vertical-align: middle;
}
.cf-meter-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #ffb989, #e8552e);
  border-radius: 999px;
}
.cf-card-stats {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.cf-stat b { color: var(--text-primary); font-weight: 700; }
.cf-stat-right { margin-left: auto; }
.cf-form-hint { font-size: 12px; color: var(--text-tertiary); margin-top: 5px; }

/* — Detail page — */
.cfd-hero { display: flex; align-items: center; gap: 16px; margin: 18px 0 20px; flex-wrap: wrap; }
.cfd-mark {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}
.cfd-mark img { width: 38px; height: 38px; object-fit: contain; }
.cfd-mark.is-fb { border: 0; }
.cfd-hero-main { min-width: 0; flex: 1; }
.cfd-hero-name { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.015em; color: var(--text-primary); line-height: 1.2; }
.cfd-hero-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 7px; }
.cfd-hero-item, .cfd-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
}
.cfd-hero-link { color: var(--accent); font-weight: 600; }
.cfd-hero-link:hover { text-decoration: underline; }
.cfd-hero-item i, .cfd-hero-link i { font-size: 13px; }
.cfd-hero-actions { display: flex; align-items: center; gap: 8px; }
.cfd-status-select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  padding: 6px 26px 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.cfd-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.cfd-stat {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.cfd-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}
.cfd-stat-value { font-size: 22px; font-weight: 800; color: var(--text-primary); margin-top: 4px; letter-spacing: -0.01em; }
.cfd-stat-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.cfd-stat-meter { display: block; margin-top: 8px; }

.cfd-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  overflow-x: auto;
}
.cfd-tab {
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color 120ms ease;
}
.cfd-tab:hover { color: var(--text-primary); }
.cfd-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.cfd-tab-count {
  font-size: 11px;
  font-weight: 700;
  background: rgba(17, 19, 25, 0.06);
  color: var(--text-secondary);
  padding: 1px 7px;
  border-radius: 999px;
}
.cfd-tab.active .cfd-tab-count { background: rgba(232, 85, 46, 0.12); color: var(--accent); }

/* Overview two-column */
.cfd-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px) { .cfd-overview { grid-template-columns: 1fr; } }
.cfd-col { display: flex; flex-direction: column; gap: 14px; }
.cfd-card {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.cfd-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.cfd-card-title i { color: var(--accent); font-size: 15px; }
.cfd-goal-list { margin: 0; padding-left: 20px; font-size: 14px; color: var(--text-primary); line-height: 1.7; }
.cfd-empty-line { font-size: 13px; color: var(--text-secondary); }
.cfd-empty-line a { color: var(--accent); font-weight: 600; }

.cfd-checklist { display: flex; flex-direction: column; gap: 6px; }
.cfd-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-page);
}
.cfd-check.ok { background: rgba(26, 107, 61, 0.05); border-color: rgba(26, 107, 61, 0.25); }
.cfd-check-ic {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: rgba(17, 19, 25, 0.06);
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.cfd-check.ok .cfd-check-ic { background: #1a6b3d; color: #fff; }
.cfd-check-label { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.cfd-check-state { font-size: 11px; font-weight: 600; color: #1a6b3d; }
.cfd-check-add {
  border: 1px solid var(--border);
  background: var(--bg-page);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 120ms ease;
}
.cfd-check-add:hover { border-color: var(--accent); color: var(--accent); }

.cfd-funnel { display: flex; flex-direction: column; gap: 7px; }
.cfd-funnel-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cfd-funnel-row:hover .cfd-funnel-label { color: var(--accent); }
.cfd-funnel-label { width: 92px; font-size: 12px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; }
.cfd-funnel-bar {
  flex: 1;
  height: 16px;
  background: rgba(17, 19, 25, 0.04);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.cfd-funnel-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; min-width: 2px; }
.cfd-funnel-n { width: 24px; text-align: right; font-size: 12px; font-weight: 700; color: var(--text-primary); }

.cfd-econ-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-secondary);
}
.cfd-econ-row:last-of-type { border-bottom: 0; }
.cfd-econ-row b { color: var(--text-primary); font-size: 15px; }
.cfd-econ-note { font-size: 12px; color: var(--text-tertiary); margin-top: 10px; line-height: 1.5; }

/* Tab toolbar + rows */
.cfd-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cfd-toolbar-hint { font-size: 12.5px; color: var(--text-tertiary); }
.cfd-rows { display: flex; flex-direction: column; gap: 8px; }
.cfd-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cfd-row:hover { border-color: rgba(0, 0, 0, 0.14); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }
.cfd-row-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--bg-secondary);
}
.cfd-row-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cfd-row-kind {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  background: rgba(17, 19, 25, 0.05);
  color: var(--text-secondary);
}
.cfd-row-kind.kind-website    { background: #d5ecff; color: #0e5590; }
.cfd-row-kind.kind-agenda     { background: #ecdeff; color: #5b28a3; }
.cfd-row-kind.kind-attendees  { background: #ffe6d3; color: #b8471f; }
.cfd-row-kind.kind-sponsors   { background: #fdf0c2; color: #7a5c00; }
.cfd-row-kind.kind-exhibitors { background: #d3f2ee; color: #0e6b5f; }
.cfd-row-kind.kind-speakers   { background: #fde2ef; color: #a02662; }
.cfd-row-kind.kind-meeting    { background: #d9f2e0; color: #1a6b3d; }
.cfd-row-main { min-width: 0; flex: 1; }
.cfd-row-name { font-size: 14px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfd-row-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfd-row-sub a { color: var(--accent); font-weight: 600; }
.cfd-row-why { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; line-height: 1.45; }
.cfd-row-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.cfd-row-ic {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 13px;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.cfd-row-ic:hover { background: rgba(17, 19, 25, 0.06); color: var(--text-primary); }
.cfd-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(17, 19, 25, 0.06);
  color: var(--text-secondary);
  text-transform: capitalize;
}
.cfd-chip-ok { background: #d9f2e0; color: #1a6b3d; }
.cfd-prio-high   { background: #ffdada; color: #a41c1c; }
.cfd-prio-medium { background: #fdf0c2; color: #7a5c00; }
.cfd-prio-low    { background: rgba(17, 19, 25, 0.06); color: var(--text-secondary); }

.cf-fit { display: inline-flex; align-items: center; gap: 7px; }
.cf-fit .cf-meter { width: 52px; }
.cf-fit b { font-size: 12px; font-weight: 700; color: var(--text-primary); }

.cfd-pill-select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 24px 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  text-transform: capitalize;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* Target pipeline colors (shared: funnel fills, pill selects) */
.cf-tstat-research     { background: rgba(17, 19, 25, 0.07); color: #454a54; }
.cf-tstat-priority     { background: #ffe6d3; color: #b8471f; }
.cf-tstat-contacted    { background: #d5ecff; color: #0e5590; }
.cf-tstat-meeting_set  { background: #ecdeff; color: #5b28a3; }
.cf-tstat-met          { background: #d3f2ee; color: #0e6b5f; }
.cf-tstat-converted    { background: #d9f2e0; color: #1a6b3d; }
.cf-tstat-disqualified { background: #ffdada; color: #a41c1c; }

/* Meeting status colors */
.cf-mstat-planned   { background: rgba(17, 19, 25, 0.07); color: #454a54; }
.cf-mstat-requested { background: #d5ecff; color: #0e5590; }
.cf-mstat-scheduled { background: #ecdeff; color: #5b28a3; }
.cf-mstat-completed { background: #d9f2e0; color: #1a6b3d; }
.cf-mstat-cancelled { background: #ffdada; color: #a41c1c; }
.cf-mstat-no_show   { background: #ffdada; color: #a41c1c; }

.cfd-empty {
  padding: 48px 20px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-page);
}
.cfd-empty-mark {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  margin: 0 auto 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffe6d3;
  color: #b8471f;
  font-size: 23px;
}
.cfd-empty-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.cfd-empty-desc { font-size: 13px; color: var(--text-secondary); max-width: 420px; margin: 0 auto; line-height: 1.55; }

/* — Groups page bits — */
.cg-chip-fav { width: 14px; height: 14px; border-radius: 4px; object-fit: contain; }
.cg-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms ease;
}
.cg-pick-row:hover { border-color: rgba(0, 0, 0, 0.16); }
.cg-pick-fav {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bg-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.cg-pick-fav img { width: 16px; height: 16px; }
.cg-pick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cg-pick-main strong { font-size: 13.5px; color: var(--text-primary); }
.cg-pick-sub { font-size: 12px; color: var(--text-tertiary); text-transform: capitalize; }

/* — Conference groups (attendance plans) — */
.cgx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}
.cgx-card {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  transition: border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}
.cgx-card:hover {
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}
.cgx-head { display: flex; align-items: center; gap: 12px; }
.cgx-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.cgx-id { min-width: 0; flex: 1; }
.cgx-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cgx-count { font-size: 12px; color: var(--text-tertiary); margin-top: 1px; }
.cgx-edit {
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 14px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}
.cgx-card:hover .cgx-edit { opacity: 1; }
.cgx-edit:hover { background: rgba(17, 19, 25, 0.06); color: var(--text-primary); }
.cgx-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Member favicon strip (overlapping, tooltip on hover) */
.cgx-strip { display: flex; align-items: center; margin-top: 14px; padding-left: 3px; }
.cgx-member {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  margin-left: -6px;
  border: 2px solid var(--bg-page);
  background: var(--bg-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.cgx-member:first-child { margin-left: 0; }
.cgx-member img { width: 16px; height: 16px; object-fit: contain; }
.cgx-member:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
  z-index: 3;
}
.cgx-member::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: rgba(17, 19, 25, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 5;
}
.cgx-member:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.cgx-member-more { background: var(--bg-secondary); color: var(--text-secondary); font-size: 11px; }

.cgx-stats {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.cgx-foot { margin-top: 10px; }
.cgx-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.cgx-next b { color: var(--text-primary); font-weight: 700; }
.cgx-next i { font-size: 13px; color: var(--text-tertiary); }
.cgx-next-dim { color: var(--text-tertiary); }

/* New-group tile */
.cgx-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-style: dashed;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  min-height: 160px;
}
.cgx-new:hover { color: var(--accent); border-color: var(--accent); }
.cgx-new-plus { font-size: 26px; font-weight: 400; line-height: 1; }

/* Group color system (icon tiles + color swatches) */
.cgx-c-blue   { background: #d5ecff; color: #0e5590; }
.cgx-c-green  { background: #d9f2e0; color: #1a6b3d; }
.cgx-c-orange { background: #ffe6d3; color: #b8471f; }
.cgx-c-violet { background: #ecdeff; color: #5b28a3; }
.cgx-c-teal   { background: #d3f2ee; color: #0e6b5f; }
.cgx-c-red    { background: #ffdada; color: #a41c1c; }
.cgx-c-pink   { background: #fde2ef; color: #a02662; }
.cgx-c-gray   { background: rgba(17, 19, 25, 0.07); color: #454a54; }

/* Icon + color pickers in the drawer */
.cgx-pick-row { display: flex; gap: 6px; flex-wrap: wrap; }
.cgx-pick-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-page);
  color: var(--text-secondary);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 120ms ease;
}
.cgx-pick-icon:hover { border-color: var(--accent); color: var(--accent); }
.cgx-pick-icon.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}
.cgx-pick-color {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}
.cgx-pick-color:hover { transform: scale(1.12); }
.cgx-pick-color.active { border-color: var(--text-primary); }
.cgx-pick-list {
  display: grid;
  gap: 8px;
  max-height: 300px;
  overflow: auto;
  padding-right: 2px;
}

/* People search: results-only refresh indicator (input stays untouched) */
#people-results.is-searching { opacity: 0.55; transition: opacity 120ms ease; }

/* Person Enrich action: inline status + spinner under the profile actions */
.pd-enrich-status { margin-top: 8px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; display: flex; align-items: flex-start; gap: 6px; }
.pd-enrich-status:empty { display: none; }
.pd-enrich-error { color: #a41c1c; }
.pd-spin { display: inline-block; animation: pdspin 1s linear infinite; }
@keyframes pdspin { to { transform: rotate(360deg); } }

/* Enriched profile chips (skills / interests / seeking / offering) */
.pd-info-item .pd-chip-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }

/* ── Event Analytics tab (eva-*) ───────────────────────────────────── */
/* ── Analytics charts: Recharts island (shadcn look) ── */
.eva-chart-mount { width: 100%; margin: 6px 0 2px; }
.eva-radar-wrap { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border, rgba(17,19,25,0.08)); }
.eva-radar-cap { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-align: center; margin-bottom: 2px; }

/* Bar + radar side by side (horizontal). Stacks on narrow cards. */
.eva-chart-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.eva-chart-col { flex: 1 1 300px; min-width: 260px; display: flex; flex-direction: column; justify-content: center; }
/* Inside a side-by-side column the radar is a peer, not a stacked add-on. */
.eva-chart-col .eva-radar-wrap { margin-top: 0; padding-top: 0; border-top: none; }
.eva-chart-col .eva-radar-cap { margin-top: 2px; }

/* Clickable "Room at a Glance" tiles → drill-down dialog */
.eva-tile-more { margin-left: auto; color: var(--text-tertiary); font-size: 13px; display: inline-flex; opacity: 0.55; transition: opacity 120ms ease, transform 120ms ease; }
.eva-tile-click { cursor: pointer; transition: border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease, background 130ms ease; }
.eva-tile-click:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(197, 81, 58, 0.14); transform: translateY(-2px); background: rgba(197, 81, 58, 0.035); }
.eva-tile-click:hover .eva-tile-more { opacity: 1; color: var(--accent); transform: translate(1px, -1px); }
.eva-tile-click:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Glance drill-down dialog (companies, industries, cohorts, guests) */
.eva-dialog-overlay { position: fixed; inset: 0; z-index: 10080; background: rgba(17, 19, 25, 0.42); display: flex; align-items: center; justify-content: center; padding: 24px; animation: evaDlgFade 140ms ease; }
@keyframes evaDlgFade { from { opacity: 0; } to { opacity: 1; } }
.eva-dialog { width: 100%; max-width: 520px; max-height: 82vh; display: flex; flex-direction: column; background: var(--bg-page, #fff); border: 1px solid var(--border, #dae1e9); border-radius: 14px; box-shadow: 0 24px 60px rgba(17, 19, 25, 0.28); overflow: hidden; animation: evaDlgPop 160ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes evaDlgPop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.eva-dialog-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border, #dae1e9); }
.eva-dialog-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; }
.eva-dialog-close { flex: none; width: 30px; height: 30px; border: none; background: var(--bg-smoke, #f4f7fa); border-radius: 8px; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.eva-dialog-close:hover { background: rgba(197, 81, 58, 0.10); color: var(--accent); }
.eva-dialog-body { padding: 10px 14px 16px; overflow-y: auto; }
.eva-dlg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.eva-dlg-empty { padding: 16px 4px; color: var(--text-tertiary); font-size: 13px; }
.eva-dlg-group { margin-top: 6px; }
.eva-dlg-group:first-child { margin-top: 0; }
.eva-dlg-group-head { display: flex; align-items: center; gap: 8px; padding: 8px 4px 4px; position: sticky; top: 0; background: var(--bg-page, #fff); }
.eva-dlg-group-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.eva-dlg-group-count { margin-left: auto; font-size: 11px; font-weight: 600; color: #fff; background: var(--accent); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.eva-chart-mount .recharts-surface:focus,
.eva-chart-mount .recharts-wrapper:focus { outline: none; }
.eva-chart-mount .recharts-cartesian-axis-line,
.eva-chart-mount .recharts-cartesian-axis-tick-line { stroke: transparent; }
.eva-chart-mount .recharts-text { font-size: 11px; }
/* shadcn-style tooltip card */
.eva-rc-tip {
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.08);
  padding: 8px 10px;
  min-width: 136px;
  font-size: 12px;
  color: var(--text-primary);
}
.eva-rc-tip-label { font-weight: 700; font-size: 12px; margin-bottom: 5px; }
.eva-rc-tip-row { display: flex; align-items: center; gap: 7px; }
.eva-rc-tip-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.eva-rc-tip-name { color: var(--text-tertiary); text-transform: capitalize; }
.eva-rc-tip-val { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.eva-rc-tip-delta { margin-top: 5px; font-size: 11px; color: var(--text-tertiary); }

.eva-toolbar { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 12px; max-width: 1000px; }
/* Search sits on the left next to the "generated …" status; Regenerate is pushed to the right. */
.eva-toolbar #eva-gen-btn { margin-left: auto; }
.eva-toolbar-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-tertiary); min-width: 0; white-space: nowrap; flex-shrink: 0; }
.eva-toolbar-status i { color: var(--accent); flex-shrink: 0; }
.eva-summary { max-width: 1000px; font-size: 13px; color: var(--text-secondary); line-height: 1.55; background: var(--bg-smoke, #f4f7fa); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.eva-summary-text { flex: 1 1 200px; min-width: 0; }
.eva-grid { display: flex; flex-direction: column; gap: 14px; max-width: 1000px; }
.eva-card { background: var(--bg-page, #fff); border: 1px solid var(--border, #dae1e9); border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.eva-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }

/* Toolbar search — a neat right-aligned box (doesn't stretch to fill) */
.eva-search { display: inline-flex; align-items: center; gap: 7px; flex: 0 1 240px; min-width: 150px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-page); padding: 0 12px; transition: border-color 150ms, box-shadow 150ms; }
.eva-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 85, 46, 0.12); }
.eva-search i { color: var(--text-tertiary); font-size: 13px; flex-shrink: 0; }
.eva-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text-primary); font-size: 13px; padding: 7px 0; }
.eva-search input::placeholder { color: var(--text-tertiary); }
.eva-none { max-width: 1000px; padding: 22px; text-align: center; color: var(--text-tertiary); font-size: 13px; border: 1px dashed var(--border); border-radius: 10px; }

/* Pre-analysis blank state — one clear path: generate the analysis */
.eva-gencta { max-width: 1000px; padding: 56px 24px; text-align: center; border: 1px dashed var(--border); border-radius: 12px; background: var(--bg-page); }
.eva-gencta > i { font-size: 40px; color: var(--text-tertiary); opacity: 0.7; display: inline-block; margin-bottom: 12px; }
.eva-gencta h3 { margin: 0 0 6px; font-size: 16px; color: var(--text-primary); }
.eva-gencta p { margin: 0 auto 18px; max-width: 440px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }
/* Quiet empty state (no generate button) — no trailing gap under the message. */
.eva-gencta-quiet p { margin-bottom: 0; }

/* Staged generation loader — spinner, rotating stage copy, elapsed clock */
.eva-genloader > i { color: var(--accent); opacity: 1; }
.eva-genloader h3 { min-height: 22px; }
.eva-gen-elapsed-row { font-size: 12.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.eva-gen-elapsed-inline { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

.eva-card-icon { width: 30px; height: 30px; border-radius: 8px; background: transparent; color: #1f242b; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.eva-card-titles { flex: 1; min-width: 0; }
.eva-card-titles h3 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text-primary); }
.eva-card-titles p { margin: 1px 0 0; font-size: 12px; color: var(--text-tertiary); }
.eva-card-actions { display: flex; gap: 2px; flex-shrink: 0; }
.eva-icon-btn { border: none; background: none; padding: 4px 6px; border-radius: 6px; cursor: pointer; color: var(--text-tertiary); font-size: 14px; }
.eva-icon-btn:hover { background: var(--bg-smoke, #f4f7fa); color: var(--text-primary); }
.eva-icon-btn.active { color: var(--accent); }
.eva-card-body { padding: 0 14px 14px; }
.eva-card.collapsed .eva-card-body { display: none; }
/* Whole card header is a collapse toggle. */
.eva-card-head-toggle { cursor: pointer; user-select: none; border-radius: 10px 10px 0 0; }
.eva-card.collapsed .eva-card-head-toggle { border-radius: 10px; }
.eva-card-head-toggle .eva-caret { pointer-events: none; }
.eva-card-head-toggle .eva-caret i { display: inline-block; transition: transform 160ms ease; }
.eva-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; }
.eva-tile { border: 1px solid var(--border, #dae1e9); border-radius: 10px; padding: 14px 16px; }
.eva-tile-top { display: flex; align-items: center; gap: 7px; }
.eva-tile-icon { width: 26px; height: 26px; border-radius: 7px; background: transparent; color: #1f242b; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.eva-tile-label { font-size: 12px; color: var(--text-secondary); }
.eva-tile-value { font-size: 32px; font-weight: 600; color: var(--text-primary); line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; }
.eva-tile-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
/* Stacked-avatar strip for the Room at a Glance card. */
.eva-avatars { display: flex; align-items: center; margin: 2px 0 14px; }
.eva-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg-page, #fff); margin-left: -9px; background: #2f2c2d; color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.eva-avatar:first-child { margin-left: 0; }
.eva-avatar-more { background: var(--bg-smoke, #eef2f6); color: var(--text-secondary); }
.eva-stack { display: flex; gap: 2px; height: 26px; }
.eva-stack-seg { min-width: 3px; display: flex; align-items: center; justify-content: center; }
.eva-stack-seg:first-child { border-radius: 4px 0 0 4px; }
.eva-stack-seg:last-child { border-radius: 0 4px 4px 0; }
.eva-seg-label { font-size: 11px; font-weight: 600; }
.eva-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.eva-key { font-size: 12px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; }
.eva-key strong { color: var(--text-primary); font-weight: 600; }
.eva-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.eva-delta { color: var(--text-tertiary); font-size: 11px; }
.eva-rows { display: flex; flex-direction: column; gap: 7px; }
.eva-row { display: flex; align-items: center; gap: 10px; }
.eva-row-label { width: 180px; min-width: 110px; font-size: 12.5px; color: var(--text-secondary); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.eva-row-track { flex: 1; display: flex; align-items: center; gap: 8px; border-left: 1px solid var(--border, #c9d2dc); padding-left: 2px; min-width: 0; }
.eva-row-barwrap { flex: 1; min-width: 0; }
.eva-row-bar { display: block; height: 16px; background: #2a78d6; border-radius: 0 4px 4px 0; min-width: 2px; }
.eva-row-bar-dim { background: #c3d4e8; }
.eva-row-bar-other { background: #898781; }
.eva-row-val { font-size: 12px; color: var(--text-primary); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 56px; white-space: nowrap; }
.eva-row-pct { color: var(--text-tertiary); }
.eva-insight { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); background: var(--bg-smoke, #f4f7fa); border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; line-height: 1.45; }
.eva-insight i { color: var(--accent); font-size: 15px; flex-shrink: 0; }
.eva-insight strong { color: var(--text-primary); }
.eva-locked { display: flex; align-items: center; gap: 10px; padding: 16px 4px; font-size: 13px; color: var(--text-tertiary); line-height: 1.5; }
.eva-locked i { font-size: 20px; color: var(--accent); flex-shrink: 0; }
.eva-locked strong { color: var(--text-secondary); }
.eva-treemap { position: relative; width: 100%; height: 260px; margin-top: 4px; }
.eva-tm-tile { position: absolute; border-radius: 4px; overflow: hidden; display: flex; align-items: flex-start; padding: 6px 7px; box-sizing: border-box; }
.eva-tm-label { font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.eva-tm-count { font-weight: 400; opacity: 0.85; }
.eva-footnote { margin-top: 10px; font-size: 11.5px; color: var(--text-tertiary); }
.eva-empty { padding: 14px 2px; font-size: 13px; color: var(--text-tertiary); }
/* Centered "crunching the numbers" loader: animated orb + title + a rotating
   anticipation sub-line that fades in on each swap. */
.eva-loading { padding: 72px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--text-secondary); }
.eva-loading-orb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%; font-size: 25px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-page));
  animation: evaLoadingOrbPulse 2s ease-in-out infinite;
}
@keyframes evaLoadingOrbPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.eva-loading-title { margin-top: 18px; font-size: 18px; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
.eva-loading-sub { margin-top: 6px; min-height: 19px; font-size: 13px; color: var(--text-secondary); }
.eva-loading-sub.is-in { animation: evaLoadingLineIn 360ms ease both; }
@keyframes evaLoadingLineIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .eva-loading-orb { animation: none; }
  .eva-loading-sub.is-in { animation: none; }
}
.eva-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.eva-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); padding: 6px 8px; border-bottom: 1px solid var(--border, #dae1e9); }
.eva-table th.num, .eva-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.eva-table td { padding: 6px 8px; border-bottom: 1px solid var(--bg-smoke, #f4f7fa); color: var(--text-primary); }
.eva-tip { position: fixed; z-index: 10060; background: #1c222c; color: #fff; font-size: 12px; padding: 5px 9px; border-radius: 6px; pointer-events: none; max-width: 280px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }

/* Who's Here — first-timers / regulars / members cohorts + reconnect list */
.eva-wh-cohorts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.eva-wh-cohort { border: 1px solid var(--border, #dae1e9); border-radius: 12px; padding: 13px 14px 14px; display: flex; flex-direction: column; }
.eva-wh-chead { display: flex; align-items: center; gap: 10px; }
.eva-wh-cicon { width: 34px; height: 34px; border-radius: 9px; background: transparent; color: #1f242b; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.eva-wh-ctitles { flex: 1; min-width: 0; }
.eva-wh-cnum { font-size: 26px; font-weight: 600; line-height: 1.05; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.eva-wh-clabel { font-size: 12.5px; color: var(--text-secondary); margin-top: 1px; }
.eva-wh-cpct { font-size: 12px; font-weight: 600; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.eva-wh-csub { font-size: 11.5px; color: var(--text-tertiary); margin: 8px 0 2px; }
/* Per-cohort accent tints */
/* One hue only — differentiate cohorts by orange depth, never by colour. */
/* All cohort icons share the base: transparent bg, black glyph. */
.eva-wh-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.eva-wh-list:not(.expanded) > .eva-wh-row:nth-child(n+7) { display: none; }
.eva-wh-row { display: flex; align-items: center; gap: 9px; padding: 5px 4px; border-radius: 8px; }
.eva-wh-row:hover { background: var(--bg-smoke, #f4f7fa); }
.eva-wh-row .eva-avatar { width: 30px; height: 30px; margin-left: 0; border-width: 0; font-size: 11px; }
.eva-wh-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.eva-wh-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eva-wh-meta { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eva-wh-dim { color: var(--text-tertiary); font-style: italic; }
.eva-wh-empty { font-size: 12px; color: var(--text-tertiary); padding: 8px 4px; }
.eva-wh-more { margin-top: 6px; align-self: flex-start; background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 3px 2px; }
.eva-wh-more:hover { text-decoration: underline; }
/* Reconnect strip */
.eva-wh-reconnect { margin-top: 14px; border: 1px solid var(--border, #dae1e9); border-radius: 12px; padding: 12px 14px 6px; background: rgba(232, 85, 46, 0.035); }
.eva-wh-rc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.eva-wh-rc-head h4 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.eva-wh-rc-head p { margin: 1px 0 0; font-size: 11.5px; color: var(--text-tertiary); }
.eva-wh-rc-list { max-height: 260px; overflow-y: auto; }
.eva-wh-ago { font-size: 11.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }

/* Zoomable circle-packing cards (industry / role / function explorers) */
.eva-pack-wrap { display: flex; justify-content: center; margin-top: 4px; }
.eva-pack { width: 100%; max-width: 560px; position: relative; }
/* Top-center hover panel: name + category of the circle under the cursor. */
.eva-pack-hovercard {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%) translateY(-4px);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  max-width: 86%; padding: 6px 14px;
  background: rgba(255, 255, 255, 0.97); border: 1px solid rgba(17, 19, 25, 0.12);
  border-radius: 11px; box-shadow: 0 6px 18px rgba(17, 19, 25, 0.18);
  text-align: center; white-space: nowrap; pointer-events: none; z-index: 3;
  opacity: 0; visibility: hidden;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
}
.eva-pack-hovercard.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* Top-right variant (used by the Where They're From sunburst). */
.eva-pack-hovercard.top-right { left: auto; right: 12px; transform: translateY(-4px); align-items: flex-end; text-align: right; }
.eva-pack-hovercard.top-right.show { transform: translateY(0); }
.eva-hc-name { font: 700 12.5px var(--font-sans); color: #16181d; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.eva-hc-meta { font: 500 11px var(--font-sans); color: #6b7280; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.eva-pack-svg { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 16px; cursor: pointer; box-shadow: 0 1px 3px rgba(17,19,25,0.07), inset 0 0 0 1px rgba(17,19,25,0.04); }
.eva-pack-node { cursor: pointer; transition: fill-opacity 120ms ease, stroke 120ms ease; }
.eva-pack-avatar { transition: fill-opacity 160ms ease; }
.eva-pack-labels text { font: 650 11px var(--font-sans); letter-spacing: 0.1px; }
/* Person-leaf name over a photo: white with a soft dark halo so it always reads. */
.eva-pack-labels text.eva-lbl-photo { fill: #ffffff; paint-order: stroke; stroke: rgba(15,17,22,0.62); stroke-width: 3px; stroke-linejoin: round; }
/* Person-leaf name on a plain light circle: dark ink. */
.eva-pack-labels text.eva-lbl-plain { fill: #20242b; }
.eva-pack-hint { margin-top: 10px; font-size: 11.5px; color: var(--text-tertiary); text-align: center; }

/* Group titles as pills: white bg, black text + border, related icon, orange on
   hover. The wrap fills the foreignObject and centres the pill, but stays
   click-through so only the pill itself catches the pointer. */
.eva-pack-pills foreignObject { overflow: visible; }
.eva-pack-pill-wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; pointer-events: none; }
.eva-pack-pill {
  display: inline-flex; align-items: center; gap: 5px; max-width: 300px;
  padding: 3px 10px 3px 9px;
  background: #ffffff; color: #111319;
  border: 1.5px solid #111319; border-radius: 999px;
  font: 650 11.5px var(--font-sans); line-height: 1.35; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(17, 19, 25, 0.16);
  pointer-events: auto; cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.eva-pack-pill > span { overflow: hidden; text-overflow: ellipsis; }
.eva-pack-pill i { font-size: 12px; line-height: 1; flex-shrink: 0; }
.eva-pack-pill:hover { border-color: #e8552e; color: #e8552e; box-shadow: 0 2px 7px rgba(232, 85, 46, 0.22); }

/* Analytics: seniority × function heatmap */
.eva-hm-scroll { overflow-x: auto; margin-top: 4px; padding-bottom: 2px; }
.eva-hm { border-collapse: separate; border-spacing: 3px; font-size: 12.5px; }
.eva-hm-corner { background: transparent; }
.eva-hm-col { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-tertiary); text-align: center; padding: 2px 6px; white-space: nowrap; vertical-align: bottom; }
.eva-hm-row { text-align: right; white-space: nowrap; padding-right: 8px; color: var(--text-secondary); font-weight: 600; }
.eva-hm-cell { width: 46px; min-width: 46px; height: 40px; text-align: center; border-radius: 8px; font-variant-numeric: tabular-nums; color: #7a2f14; font-weight: 700; background: rgba(17, 19, 25, 0.03); }
.eva-hm-zero { color: var(--text-tertiary); background: rgba(17, 19, 25, 0.02); }
.eva-hm-hit { cursor: pointer; transition: transform 100ms ease, box-shadow 120ms ease; }
.eva-hm-hit:hover, .eva-hm-hit:focus-visible { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(232, 85, 46, 0.28); outline: 2px solid rgba(232, 85, 46, 0.55); outline-offset: 0; }
.eva-hm-dark { color: #fff; }
.eva-hm-tot { background: transparent; color: var(--text-tertiary); font-weight: 700; }
.eva-hm-foot .eva-hm-row { color: var(--text-tertiary); }

/* Analytics: zoomable sunburst — where the room comes from */
.eva-sun-wrap { display: flex; justify-content: center; margin-top: 4px; }
.eva-sun { width: 100%; max-width: 560px; position: relative; }
.eva-sun-svg { display: block; width: 100%; height: auto; max-width: 100%; cursor: pointer; }
.eva-sun-arc { transition: fill-opacity 140ms ease; }
.eva-sun-arc:hover { fill-opacity: 1; }
.eva-sun-chip { cursor: pointer; transition: opacity 260ms ease; }
.eva-sun-chip-bg { fill: #ffffff; stroke: #1f242b; stroke-width: 1; transition: stroke 120ms ease, stroke-width 120ms ease; }
.eva-sun-chip-t { fill: #1f242b; font: 600 10.5px var(--font-sans); letter-spacing: 0.1px; pointer-events: none; }
.eva-sun-chip:hover .eva-sun-chip-bg { stroke: var(--accent, #e8552e); stroke-width: 1.6; }
.eva-sun-center { font: 700 13px var(--font-sans); fill: var(--text-secondary); }

/* Conference card cover: og:image background + centred favicon badge */
.cf-cover { position: relative; height: 116px; border-radius: 10px; margin-bottom: 14px; background-size: cover, auto; background-position: center; overflow: hidden; }
.cf-cover::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(15,23,42,.08), rgba(15,23,42,.24)); }
.cf-cover-fav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(15,23,42,.28); z-index: 1; }
.cf-cover-fav img { width: 28px; height: 28px; border-radius: 6px; display: block; }
.cf-cover-fav.is-fb { color: #fff; font-weight: 700; font-size: 18px; }
.cf-cover .cf-status { position: absolute; top: 10px; right: 10px; z-index: 1; }

/* Event detail: prompt-driven curation composer (guest tab) */
.evd-curation-composer {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: var(--space-4);
  background: var(--bg-page);
}
.evd-curation-composer-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.evd-curation-composer-row > i {
  color: var(--accent);
  font-size: 16px;
  flex-shrink: 0;
}
.evd-curation-composer-row input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
}
.evd-curation-composer-row input::placeholder { color: var(--text-tertiary); }
.evd-curation-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.evd-curation-preset {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.evd-curation-preset:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
/* ── AI Signals tab — unified signals + Guardian Angels groups ───── */

.aisig-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.aisig-head-left { min-width: 0; }
.aisig-title { font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.aisig-meta { font-size: 13px; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }
.aisig-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Pill sub-tabs — same visual language as the guest-view toggle. */
.aisig-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: rgba(17, 19, 25, 0.05); border-radius: 999px; margin-bottom: 14px; }
.aisig-tab {
  border: 0; background: transparent; padding: 5px 14px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  color: var(--text-secondary); cursor: pointer; white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.aisig-tab.active { background: var(--bg-page); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

.aisig-empty { padding: 24px 2px; }
.aisig-empty-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.aisig-empty-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.aisig-empty-desc a { color: var(--text-primary); font-weight: 600; text-decoration: underline; }

.ga-summary { font-size: 13px; color: var(--text-secondary); font-style: italic; margin-bottom: 10px; }

/* Carded AI Signals layout — same section language as the Analytics tab. */
.aisig-grid { display: flex; flex-direction: column; gap: 14px; max-width: 1000px; }
.aisig-card .eva-card-body { padding-top: 2px; }
.aisig-card .ga-summary { margin-bottom: 0; }
.ga-accordion { display: flex; flex-direction: column; }
.ga-acc { border-top: 1px solid var(--border); }
.ga-acc:first-child { border-top: 0; }
.ga-acc-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 2px; background: none; border: none; text-align: left; cursor: pointer; font: inherit; }
.ga-acc-head:hover .aisig-grouprow-name { text-decoration: underline; }
.ga-acc-head > i { color: var(--text-secondary); opacity: .6; font-size: 14px; flex-shrink: 0; }
.ga-acc.open > .ga-acc-head .aisig-grouprow-members { white-space: normal; }
.ga-acc-body { padding: 2px 2px 14px 36px; }
.aisig-kindhead { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); margin: 16px 0 2px; }
.aisig-kindhead:first-child { margin-top: 4px; }
.aisig-kindhead i { color: var(--accent); font-size: 13px; }
.aisig-kindcount { font-weight: 600; color: var(--text-tertiary); letter-spacing: 0; }

.aisig-rows { display: flex; flex-direction: column; }
.aisig-rows > :first-child { border-top: 0; }

.aisig-grouprow { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-top: 1px solid var(--border); cursor: pointer; }
.aisig-grouprow:hover .aisig-grouprow-name { text-decoration: underline; }
.aisig-grouprow-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.aisig-grouprow-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.aisig-grouprow-members { font-size: 12.5px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aisig-grouprow > i { color: var(--text-secondary); opacity: .6; font-size: 14px; flex-shrink: 0; }

.aisig-subhead { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); opacity: .75; margin: 20px 0 4px; }

.aisig-row { padding: 12px 2px; border-top: 1px solid var(--border); }
.aisig-row-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aisig-kind { flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary); opacity: .75; }
.aisig-row-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.aisig-row-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-top: 3px; }
.aisig-row .sig-attendees { margin-top: 8px; }
.aisig-row .sig-evidence { margin-top: 8px; }

/* Room Pulse — give/get ratio + providers/seekers gauge.
   Orange-only palette: --sig-give is the deep accent (offering); --sig-get is
   a lighter tint of the same accent (seeking) — the two halves read apart by
   shade, never by hue. */
.aisig-card { --sig-give: var(--accent); --sig-get: color-mix(in srgb, var(--accent) 38%, var(--bg-page, #fff)); }
.aisig-pulse { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 4px; }
.aisig-pulse-ratio { flex-shrink: 0; text-align: center; }
.aisig-pulse-ratio-num { font-size: 30px; font-weight: 700; line-height: 1; color: var(--text-primary); letter-spacing: -.01em; }
.aisig-pulse-ratio-unit { font-size: 15px; font-weight: 600; color: var(--text-tertiary); }
.aisig-pulse-ratio-lbl { margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-secondary); }
.aisig-pulse-gauge { flex: 1; min-width: 200px; }
.aisig-pulse-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--border); }
.aisig-pulse-fill { display: block; height: 100%; }
.aisig-pulse-fill.give { background: var(--sig-give); }
.aisig-pulse-fill.get { background: var(--sig-get); }
.aisig-pulse-legend { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.aisig-pulse-leg b { color: var(--text-primary); font-weight: 700; }
.aisig-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.aisig-dot.give { background: var(--sig-give); }
.aisig-dot.get { background: var(--sig-get); }

/* Dominant Core Themes — two columns of labelled bars (offering vs chasing). */
.aisig-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 4px; }
.aisig-theme-col-head { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px; }
.aisig-theme-row { margin-bottom: 10px; }
.aisig-theme-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; margin-bottom: 4px; }
.aisig-theme-label { color: var(--text-primary); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aisig-theme-pct { flex-shrink: 0; color: var(--text-tertiary); font-weight: 700; font-variant-numeric: tabular-nums; }
.aisig-theme-track { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.aisig-theme-fill { display: block; height: 100%; border-radius: 999px; }
.aisig-theme-fill.give { background: var(--sig-give); }
.aisig-theme-fill.get { background: var(--sig-get); }
@media (max-width: 640px) { .aisig-themes { grid-template-columns: 1fr; gap: 14px; } }

/* Pre-generate enrichment reminder dialog (rendered inside .eva-dialog). */
.aisig-dlg-lede { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.aisig-dlg-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 13px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.aisig-dlg-note i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.aisig-dlg-note b { color: var(--text-primary); }
.aisig-dlg-note.warn { background: rgba(232, 85, 46, 0.08); color: var(--text-secondary); }
.aisig-dlg-note.warn i { color: var(--accent); }
.aisig-dlg-note.ok { background: rgba(46, 160, 105, 0.10); color: var(--text-secondary); }
.aisig-dlg-note.ok i { color: #2ea069; }
.aisig-dlg-skip { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; user-select: none; }
.aisig-dlg-skip input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.aisig-dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

/* Monochrome variant of the pre-generate dialog — a softly-lit dark panel.
   Scoped to .eva-dialog-mono so every other .eva-dialog stays light. The
   enrichment note drops its green/orange tint for a neutral one; the CTA goes
   warm-white so the whole surface reads as one calm monochrome. */
.eva-dialog.eva-dialog-mono {
  background:
    radial-gradient(135% 95% at 50% -25%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 62%),
    #201e1c;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 30px 72px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.eva-dialog-mono .eva-dialog-head { border-bottom-color: rgba(255, 255, 255, 0.09); }
.eva-dialog-mono .eva-dialog-head h3 { color: #f4f1ee; }
.eva-dialog-mono .eva-dialog-close { background: rgba(255, 255, 255, 0.06); color: #cbc5bf; }
.eva-dialog-mono .eva-dialog-close:hover { background: rgba(255, 255, 255, 0.13); color: #fff; }
.eva-dialog-mono .aisig-dlg-lede { color: #b6b0aa; }
.eva-dialog-mono .aisig-dlg-lede b { color: #f4f1ee; }
.eva-dialog-mono .aisig-dlg-note,
.eva-dialog-mono .aisig-dlg-note.ok,
.eva-dialog-mono .aisig-dlg-note.warn { background: rgba(255, 255, 255, 0.055); color: #cbc5bf; }
.eva-dialog-mono .aisig-dlg-note b { color: #f4f1ee; }
.eva-dialog-mono .aisig-dlg-note i,
.eva-dialog-mono .aisig-dlg-note.ok i,
.eva-dialog-mono .aisig-dlg-note.warn i { color: #e7e2dc; }
.eva-dialog-mono .aisig-dlg-skip { color: #a7a19b; }
.eva-dialog-mono .aisig-dlg-skip input { accent-color: #cbc5bf; }
.eva-dialog-mono .btn-primary { background: #f4f1ee; border-color: #f4f1ee; color: #201e1c; }
.eva-dialog-mono .btn-primary:hover { background: #fff; border-color: #fff; color: #201e1c; }
.eva-dialog-mono .btn-ghost { color: #b6b0aa; }
.eva-dialog-mono .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* AI loading mode — hero orb + narrated step list. */
.aisig-loading { max-width: 560px; margin: 8px auto; padding: 8px 4px 4px; }
.aisig-loading-hero { text-align: center; padding: 12px 0 22px; }
/* Minimal wand — no gradient disc, just the glyph breathing gently. */
.aisig-loading-orb { display: inline-flex; align-items: center; justify-content: center; color: var(--accent, #e8552e); font-size: 34px; animation: aisigOrb 2.4s ease-in-out infinite; }
.aisig-loading-title { margin-top: 16px; font-size: 19px; font-weight: 700; color: var(--text-primary); letter-spacing: -.01em; }
.aisig-loading-sub { margin-top: 5px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.aisig-progress { position: relative; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin: 4px 0 9px; }
.aisig-progress-fill { position: relative; display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #f0a35a); transition: width 720ms cubic-bezier(0.22, 1, 0.36, 1); }
/* Soft travelling sheen so a slow fill still feels alive. */
.aisig-progress-fill::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent); transform: translateX(-100%); animation: aisigSheen 1.6s ease-in-out infinite; }
@keyframes aisigSheen { to { transform: translateX(100%); } }
.aisig-loading-elapsed { text-align: center; font-size: 12px; color: var(--text-tertiary); margin: 0 0 18px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.aisig-loading-elapsed i { font-size: 12px; vertical-align: -1px; opacity: .75; margin-right: 3px; }
.aisig-steps { display: flex; flex-direction: column; gap: 2px; }
.aisig-step { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-radius: 9px; transition: background 200ms ease, opacity 200ms ease; }
.aisig-step-mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; font-size: 13px; background: var(--border); color: var(--text-tertiary); }
.aisig-step-mark.done { background: rgba(232, 85, 46, 0.14); color: var(--accent); }
.aisig-step-mark.active { background: rgba(232, 85, 46, 0.12); color: var(--accent); }
.aisig-step-label { font-size: 13.5px; color: var(--text-secondary); }
.aisig-step.pending { opacity: 0.5; }
.aisig-step.active { background: rgba(232, 85, 46, 0.055); }
.aisig-step.active .aisig-step-label { color: var(--text-primary); font-weight: 600; }
.aisig-step.done .aisig-step-label { color: var(--text-primary); }
.aisig-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(232, 85, 46, 0.30); border-top-color: var(--accent); animation: aisigSpin 0.7s linear infinite; }
@keyframes aisigSpin { to { transform: rotate(360deg); } }
@keyframes aisigOrb { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.06); opacity: 1; } }

/* Card entrance after a fresh generation — staggered fade-up. */
.aisig-reveal > .eva-card { animation: aisigCardIn 460ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.aisig-reveal > .eva-card:nth-child(2) { animation-delay: 70ms; }
.aisig-reveal > .eva-card:nth-child(3) { animation-delay: 140ms; }
.aisig-reveal > .eva-card:nth-child(4) { animation-delay: 210ms; }
.aisig-reveal > .eva-card:nth-child(5) { animation-delay: 280ms; }
.aisig-reveal > .eva-card:nth-child(6) { animation-delay: 350ms; }
.aisig-reveal > .eva-card:nth-child(n+7) { animation-delay: 420ms; }
@keyframes aisigCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .aisig-loading-orb, .aisig-spin, .aisig-reveal > .eva-card, .aisig-progress-fill::after { animation: none; }
  .aisig-progress-fill { transition: none; }
}

/* Group tab content (shared with the printable list's vocabulary). */
.ga-num { width: 22px; height: 22px; border-radius: 50%; background: var(--text-primary); color: var(--bg-page); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.ga-members { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ga-member-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ga-member-row .sig-chip { flex-shrink: 0; }
.ga-member-intro { font-size: 13px; color: var(--text-secondary); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; }
.ga-row { display: flex; gap: 10px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; padding: 3px 0; }
.ga-lbl { flex-shrink: 0; width: 82px; padding-top: 2px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); opacity: .7; }
.ga-unassigned { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--text-secondary); padding: 12px 2px 0; margin-top: 8px; border-top: 1px solid var(--border); }

/* ── Node-link visuals: pair duos + group constellations ─────────────────
   Pair signals: two avatar nodes joined by connector curves through the
   reason card, a dashed stem down to the supporting note. Groups: members
   orbit the group card with dashed spokes to the centre. */
.sig-duo-row { position: relative; padding: 34px 2px 14px; }
.sig-duo-meta { position: absolute; top: 8px; right: 2px; display: flex; align-items: center; gap: 8px; z-index: 3; }
.sig-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20px, 62px) minmax(0, 1.3fr) minmax(20px, 62px) minmax(0, 1fr); align-items: start; }
.sig-duo-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; min-width: 0; padding-top: 4px; }
.sig-duo-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background-size: cover; background-position: center; background-color: #e7e2dc;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; font-weight: 700;
  box-shadow: 0 0 0 3px var(--bg-page, #fff), 0 0 0 4.5px rgba(232, 85, 46, 0.35), 0 10px 26px rgba(232, 85, 46, 0.18);
}
.sig-duo-avatar-fallback { background-image: linear-gradient(135deg, #ffb989, #e8552e); }
.sig-duo-name { font-size: 14.5px; font-weight: 700; color: var(--text-primary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; }
.sig-duo-sub { font-size: 12px; color: var(--text-secondary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sig-duo-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 3px; }
.sig-duo-tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 7px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sig-duo-tag.warm { background: rgba(232, 85, 46, 0.10); color: var(--accent); }
.sig-duo-tag.cool { background: rgba(122, 92, 247, 0.10); color: #7a5cf7; }
.sig-duo-link { width: 100%; height: 130px; display: block; }
.sig-duo-link path { fill: none; stroke: rgba(232, 85, 46, 0.35); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.sig-duo-mid { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.sig-duo-card {
  position: relative; width: 100%; max-width: 300px; margin-top: 14px;
  background: var(--bg-page, #fff); border: 1px solid rgba(232, 85, 46, 0.14);
  border-radius: 14px; padding: 16px 16px 12px; text-align: center;
  box-shadow: 0 6px 22px rgba(17, 19, 25, 0.07);
}
.sig-duo-card-ic { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--bg-page, #fff); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: 0 2px 8px rgba(17, 19, 25, 0.12); }
.sig-duo-kind { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 2px; }
.sig-duo-card-title { font-size: 13.5px; font-weight: 700; color: var(--accent); line-height: 1.35; }
.sig-duo-stem { width: 0; height: 24px; border-left: 2px dashed rgba(232, 85, 46, 0.35); }
.sig-duo-card.sub { max-width: 260px; margin-top: 0; padding: 16px 14px 11px; }
.sig-duo-card-desc { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); line-height: 1.45; }
@media (max-width: 640px) {
  .sig-duo { grid-template-columns: 1fr; justify-items: center; }
  .sig-duo-link { display: none; }
  .sig-duo-mid::before, .sig-duo-mid::after { content: ''; height: 20px; border-left: 2px dashed rgba(232, 85, 46, 0.30); }
  .sig-duo-mid::after { margin-bottom: 2px; }
}

/* Group constellation. */
.ga-web { position: relative; height: 260px; margin: 8px 0 16px; }
.ga-web-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ga-web-lines line { stroke: rgba(232, 85, 46, 0.28); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.ga-web-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 2; max-width: 110px; }
.ga-web-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background-size: cover; background-position: center; background-color: #e7e2dc;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px; font-weight: 700;
  box-shadow: 0 0 0 2.5px var(--bg-page, #fff), 0 0 0 3.5px rgba(232, 85, 46, 0.30), 0 6px 16px rgba(17, 19, 25, 0.12);
}
.ga-web-avatar-fallback { background-image: linear-gradient(135deg, #ffb989, #e8552e); }
.ga-web-more { background: var(--bg-secondary); color: var(--text-secondary); font-size: 13px; }
.ga-web-name { font-size: 11px; font-weight: 600; color: var(--text-secondary); max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: color-mix(in srgb, var(--bg-page, #fff) 82%, transparent); padding: 0 4px; border-radius: 5px; }
.ga-web-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; background: var(--bg-page, #fff); border: 1px solid rgba(232, 85, 46, 0.14); border-radius: 14px; box-shadow: 0 6px 22px rgba(17, 19, 25, 0.08); padding: 10px 16px; text-align: center; max-width: 200px; }
.ga-web-center-ic { color: var(--accent); font-size: 16px; }
.ga-web-center-name { font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.ga-web-center-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }

/* Editorial touches from the printed Guardian doc: numbered "A × B" pair
   headings and a small-caps WHY row under the duo graphic. */
.sig-duo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sig-duo-head-names { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.sig-duo-head-x { color: var(--text-tertiary); font-weight: 400; }
.sig-duo-why { margin-top: 6px; }

/* Room-level signals as constellations — the guests orbit the signal card. */
.sig-web-row { position: relative; padding: 30px 2px 10px; }
.sig-web-row .ga-web { margin: 0; }
.sig-web-center { max-width: 240px; }
.sig-web-center .sig-duo-kind { margin-top: 2px; }
.ga-web-center-desc { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 560px) { .ga-web { height: 300px; } .ga-web-name { max-width: 72px; } }

/* ── Enrichment indicators (guest chips, guest drawer, person page) ────── */
/* Guest hover popover — the basics + enrichment status (replaces the old
   inline enrichment dot). pointer-events none so it never traps the mouse. */
.evd-guest-pop {
  position: fixed; z-index: 3900; pointer-events: none;
  width: max-content; max-width: 300px;
  background: #232021; color: #f5f1ee;
  border: 1px solid rgba(255,255,255,0.09); border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
  padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
  animation: evdPopIn .16s ease;
}
@keyframes evdPopIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
.evd-pop-name { font-weight: 650; font-size: 13px; margin-bottom: 3px; }
.evd-pop-row { display: flex; align-items: center; gap: 7px; opacity: .85; }
.evd-pop-row i { font-size: 12px; opacity: .6; flex: none; }
.evd-pop-dim { opacity: .5; }
.evd-pop-enrich {
  display: flex; align-items: center; gap: 7px;
  margin-top: 7px; padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px; opacity: .65;
}
.evd-pop-enrich i { font-size: 12px; flex: none; }
/* Semantic states: green = verified success, yellow = attempted but
   unverifiable. (Deliberate exceptions to the orange accent family.) */
.evd-pop-enrich.is-ok { color: #22c55e; opacity: 1; }
.evd-pop-enrich.is-failed { color: #d9a406; opacity: 1; }
.evd-pop-enrich.is-live { color: var(--accent, #e8552e); opacity: 1; }
.evd-pop-spin {
  width: 10px; height: 10px; flex: none; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2); border-top-color: var(--accent, #e8552e);
  animation: enwSpin .8s linear infinite;
}
.gd-enrich-proof {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 12px; color: var(--text-muted, #8a8482);
}
/* Enriched marker: green lives on the icon only — the text stays muted so
   the row doesn't read as a full green line. */
.gd-enrich-proof.is-ok i { color: #22c55e; }
.gd-enrich-proof i { font-size: 13px; }
/* Quiet enriched caption on person-detail — plain text, no pill. */
.pd-enrich-note {
  display: flex; align-items: center; gap: 6px; margin: 8px 0 0;
  font-size: 12px; color: var(--text-muted, #8a8482); cursor: default;
}
.pd-enrich-note i { font-size: 12px; color: var(--accent, #e8552e); }
.pd-enrich-note.is-failed i { color: var(--text-muted, #8a8482); }
/* Re-enrich confirm dialog bits */
.pde-confirm-row { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.lzm-btn.is-ghost { background: transparent; color: inherit; border: 1px solid var(--border, rgba(255,255,255,0.16)); }
/* Guest drawer: LinkedIn identity pill above the Profile section.
   LinkedIn brand blue — logo context, same precedent as the review board. */
.gd-linkedin {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 14px;
  max-width: 100%; padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  color: #0a66c2; background: rgba(10, 102, 194, 0.08);
  border: 1px solid rgba(10, 102, 194, 0.22);
  transition: background 120ms ease;
}
.gd-linkedin:hover { background: rgba(10, 102, 194, 0.14); }
.gd-linkedin i:first-child { font-size: 13px; flex: none; }
.gd-linkedin span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-linkedin i:last-child { font-size: 10px; opacity: .55; flex: none; }
/* Guest drawer: LinkedIn identity link + desktop-assist button, stacked and
   centered above the Profile section. */
.gd-li-stack {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  margin: 2px 0 16px;
}
.gd-li-stack .gd-linkedin { margin: 0; }
/* Quiet LinkedIn-tinted pill (same family as the .gd-linkedin identity link
   above it) — a plain minimal button, no dropdown, no solid fill. */
.gd-li-assist {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  max-width: 100%; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; font-family: inherit; line-height: 1.4;
  color: #0a66c2; background: rgba(10, 102, 194, 0.08);
  border: 1px solid rgba(10, 102, 194, 0.22);
  transition: background 120ms ease;
}
.gd-li-assist:hover { background: rgba(10, 102, 194, 0.14); }
.gd-li-assist svg { flex: none; }

/* Person-detail Enrich popover — two icon+text choices on the same dark
   monochrome surface as the enw-/ave- sheets. */
.pd-enrich-menu { position: relative; display: inline-flex; }
.pd-enrich-items {
  position: absolute; top: calc(100% + 6px); left: 0;
  display: flex; flex-direction: column; min-width: 250px; padding: 5px;
  background: #232021; color: #f5f1ee;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 12px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45); z-index: 40;
}
.pd-enrich-items button {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  border: none; background: transparent; color: #f5f1ee;
  font-family: var(--font-sans); padding: 10px 11px;
  border-radius: 8px; cursor: pointer; text-align: left;
  transition: background 120ms ease;
}
.pd-enrich-items button:hover { background: rgba(255, 255, 255, 0.07); }
.pd-enrich-items button > i {
  font-size: 15px; color: rgba(245, 241, 238, 0.75); margin-top: 1px; flex: none;
  transition: color 120ms ease;
}
.pd-enrich-items button:hover > i { color: var(--accent, #e8552e); }
.pd-enrich-item-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pd-enrich-item-txt b { font-size: 13px; font-weight: 650; }
.pd-enrich-item-txt small { font-size: 11.5px; color: rgba(245, 241, 238, 0.55); }

/* ── Create-with-AI monochrome dialog (gallery FAB / shared generate modal) ── */
.igm-overlay {
  position: fixed; inset: 0; background: rgba(20,17,16,.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 10040; display: flex; align-items: center; justify-content: center;
}
.igm-modal {
  background: #262324; color: #f4f1ee; border-radius: 20px; padding: 32px;
  max-width: 460px; width: 92%; box-shadow: 0 24px 70px rgba(0,0,0,.45);
  text-align: center; animation: sxRise .22s ease;
}
.igm-title { margin: 0 0 8px; font-size: 18px; color: #f4f1ee; }
.igm-sub { margin: 0 0 18px; font-size: 13px; color: rgba(244,241,238,.55); }
.igm-textarea {
  width: 100%; padding: 11px 13px; border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; font-size: 14px; font-family: inherit;
  background: rgba(255,255,255,.05); color: #f4f1ee; resize: vertical;
}
.igm-textarea::placeholder { color: rgba(244,241,238,.35); }
.igm-textarea:focus { outline: none; border-color: rgba(255,255,255,.32); }
.igm-seg { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.igm-seg-btn {
  padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: transparent; color: rgba(244,241,238,.72); font-size: 12.5px;
  font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.igm-seg-btn:hover { border-color: rgba(255,255,255,.34); color: #f4f1ee; }
.igm-seg-btn.is-on { background: #f4f1ee; color: #1d1a1b; border-color: #f4f1ee; }
.igm-seg-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .6; margin-left: 5px; }
.igm-go {
  margin-top: 16px; width: 100%; padding: 11px 0; border: none; border-radius: 10px;
  background: var(--accent, #e8552e); color: #fff; font-weight: 700; font-size: 14px;
  cursor: pointer; font-family: inherit;
}
.igm-go:hover { filter: brightness(1.07); }
.igm-ghost {
  background: none; border: 1px solid rgba(255,255,255,.18); color: rgba(244,241,238,.75);
  border-radius: 8px; padding: 6px 14px; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.igm-ghost:hover { border-color: rgba(255,255,255,.36); color: #f4f1ee; }
.igm-close {
  margin: 16px auto 0; display: block; background: none; border: none;
  color: rgba(244,241,238,.5); cursor: pointer; font-size: 13px; font-family: inherit;
}
.igm-close:hover { color: rgba(244,241,238,.8); }
.igm-spin {
  width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12);
  border-top-color: var(--accent, #e8552e); animation: search-spin .8s linear infinite;
  margin: 0 auto 14px;
}
.igm-stage { font-size: 14px; color: rgba(244,241,238,.85); }
.igm-elapsed { font-size: 12px; color: rgba(244,241,238,.5); margin-top: 6px; font-variant-numeric: tabular-nums; }
.igm-summary { font-size: 13px; color: rgba(244,241,238,.6); margin-bottom: 12px; }
.igm-error { font-size: 13px; color: #ffb3a0; margin-bottom: 12px; }

/* ── Bulk enrichment panel (non-blocking, top-center) ─────────────────── */
.enw-panel {
  position: fixed; top: 62px; right: 16px;
  z-index: 4000; width: min(420px, calc(100vw - 24px));
  background: #232021; color: #f5f1ee;
  border: 1px solid rgba(255,255,255,0.09); border-radius: 14px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.45);
  font-size: 13px; line-height: 1.45;
  animation: enwPanelIn .22s ease;
}
@keyframes enwPanelIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
/* Header "Enrichment" button — exists only while a run is live. */
.enw-hdr .enw-spin { width: 13px; height: 13px; }
.enw-hdr-done {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: #22c55e; color: #fff; font-size: 10px; font-weight: 700;
}
.enw-hdr-done.is-warn { background: var(--accent, #e8552e); }
.enw-head { display: flex; align-items: center; gap: 7px; padding: 10px 12px 0; }
.enw-head i { color: var(--accent, #e8552e); font-size: 13px; }
.enw-title { font-weight: 600; }
.enw-step { margin-left: auto; font-size: 11px; opacity: .5; text-transform: uppercase; letter-spacing: .04em; }
.enw-close { background: none; border: none; color: inherit; opacity: .55; cursor: pointer; font-size: 16px; padding: 0 2px; line-height: 1; }
.enw-close:hover { opacity: 1; }
.enw-body { padding: 8px 12px 10px; }
.enw-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 12px 11px; }
.enw-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 3px 0; }
.enw-line b { font-weight: 650; }
.enw-dim { opacity: .55; font-size: 12px; }
.enw-link { color: var(--accent, #e8552e); cursor: pointer; text-decoration: none; }
.enw-link:hover { text-decoration: underline; }
.enw-note { margin: 6px 0 2px; padding: 6px 9px; border-radius: 9px; font-size: 12px; background: rgba(255,255,255,0.05); opacity: .8; }
.enw-note.is-warn { background: color-mix(in srgb, var(--accent, #e8552e) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent, #e8552e) 28%, transparent); opacity: 1; }
.enw-list { max-height: 160px; overflow: auto; margin: 6px 0 2px; border: 1px solid rgba(255,255,255,0.08); border-radius: 9px; padding: 4px 8px; }
.enw-guest { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 12.5px; }
.enw-guest .enw-reason { margin-left: auto; opacity: .5; font-style: normal; font-size: 11px; text-align: right; }
.enw-chip { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent, #e8552e) 16%, transparent); color: var(--accent, #e8552e); }
.enw-btn {
  border: 1px solid rgba(255,255,255,0.14); background: transparent; color: inherit;
  border-radius: 9px; padding: 5px 12px; font-size: 12.5px; cursor: pointer;
}
.enw-btn:hover { border-color: rgba(255,255,255,0.3); }
.enw-btn:disabled { opacity: .4; cursor: default; }
.enw-btn-primary { background: var(--accent, #e8552e); border-color: var(--accent, #e8552e); color: #fff; }
.enw-btn-primary:hover { background: var(--accent-hover, #c4421f); }
/* Pre-run hero: the run count is the number that matters — render it big. */
.enw-hero { text-align: center; padding: 6px 0 2px; }
.enw-big { font-size: 44px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.enw-all-done { width: 44px; height: 44px; margin: 2px auto 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; background: color-mix(in srgb, var(--accent, #e8552e) 18%, transparent); color: var(--accent, #e8552e); }
.enw-big-label { font-size: 12.5px; opacity: .75; margin-top: 2px; }
.enw-sub { font-size: 12px; opacity: .55; margin-top: 8px; }
.enw-cost { font-size: 14px; font-weight: 650; margin-top: 10px; }
.enw-cost i { font-style: normal; font-size: 11.5px; font-weight: 400; opacity: .55; }
/* Live "Researching <name>…" status line during the run */
.enw-current { display: inline-flex; align-items: center; gap: 7px; color: var(--accent, #e8552e); }
.enw-current b { font-weight: 650; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enw-elapsed { opacity: .55; font-variant-numeric: tabular-nums; }
/* Collapse control + mini progress bar */
.enw-collapse {
  background: none; border: none; color: inherit; opacity: .55; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 4px; margin-left: 4px;
}
.enw-collapse:hover { opacity: 1; }
.enw-panel.is-mini { width: auto; border-radius: 999px; }
.enw-mini {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border: none; background: transparent; color: inherit;
  font: inherit; font-size: 12.5px; cursor: pointer; overflow: hidden;
  border-radius: 999px;
}
.enw-mini-fill {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  background: color-mix(in srgb, var(--accent, #e8552e) 18%, transparent);
  transition: width .5s ease;
}
.enw-mini > *:not(.enw-mini-fill) { position: relative; z-index: 1; }
.enw-mini-text { font-weight: 650; font-variant-numeric: tabular-nums; }
.enw-progress { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.09); overflow: hidden; margin: 7px 0 4px; }
.enw-progress-fill { height: 100%; border-radius: 999px; background: var(--accent, #e8552e); transition: width .5s ease; }
.enw-spin {
  width: 12px; height: 12px; flex: none; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2); border-top-color: var(--accent, #e8552e);
  animation: enwSpin .8s linear infinite;
}
@keyframes enwSpin { to { transform: rotate(360deg); } }

/* Guest chip: in-flight shimmer + brief green completion check. The check
   badge outlives the shimmer class, so it carries its own positioning hook. */
.evd-guest-chip.is-enriching, .evd-guest-chip.enw-rel { position: relative; }
.evd-guest-chip.is-enriching { overflow: hidden; }
.evd-guest-chip.is-enriching::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent 20%, color-mix(in srgb, var(--accent, #e8552e) 80%, #fff) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: enwShimmer 1.15s linear infinite;
}
@keyframes enwShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.enw-chip-check {
  position: absolute; top: 50%; right: 10px; z-index: 2; pointer-events: none;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #22c55e; color: #fff; font-size: 12px; font-weight: 700;
  opacity: 0; transform: translateY(-50%) scale(.4);
  animation: enwCheckPop 1.05s ease forwards;
}
@keyframes enwCheckPop {
  12% { opacity: 1; transform: translateY(-50%) scale(1.18); }
  28% { transform: translateY(-50%) scale(1); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-50%) scale(.85); }
}

/* App-wide enrichment indicator (app.js watcher) */
.enw-hdr-count {
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 999px; margin-left: 2px;
  background: color-mix(in srgb, var(--accent, #e8552e) 14%, transparent);
  color: var(--accent, #e8552e);
}
.enw-hdr-menu {
  position: fixed; z-index: 4100; min-width: 240px;
  background: #232021; color: #f5f1ee;
  border: 1px solid rgba(255,255,255,0.09); border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4); padding: 5px;
  animation: evdPopIn .16s ease;
}
.enw-hdr-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 8px; text-decoration: none; color: inherit;
  font-size: 12.5px;
}
.enw-hdr-item:hover { background: rgba(255,255,255,0.06); }
.enw-hdr-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.enw-hdr-item-prog { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--accent, #e8552e); flex: none; }

/* ── Avatar editor (guest drawer photo change) ────────────────────────── */
.gd-avatar-edit { position: relative; display: inline-flex; padding: 0; border: none; background: none; cursor: pointer; border-radius: 50%; }
.gd-avatar-edit-badge {
  position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #232021; color: #fff; border: 2px solid var(--bg-card, #fff);
  opacity: 0; transition: opacity 120ms ease;
}
.gd-avatar-edit-badge i { font-size: 10px; }
.gd-avatar-edit:hover .gd-avatar-edit-badge { opacity: 1; }
.gd-avatar-edit:hover .person-avatar-circle { filter: brightness(0.88); }

.ave-back { display: flex; align-items: center; justify-content: center; }
.ave-sheet {
  width: min(380px, calc(100vw - 32px)); background: #232021; color: #f5f1ee;
  border: 1px solid rgba(255,255,255,0.09); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden;
  animation: evdPopIn .18s ease;
}
.ave-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 0; }
.ave-title { font-weight: 600; font-size: 14px; }
.ave-x { background: none; border: none; color: inherit; opacity: .55; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; }
.ave-x:hover { opacity: 1; }
.ave-panel { padding: 8px 20px 22px; }
.ave-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding-top: 10px; }
.ave-current {
  width: 108px; height: 108px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(255,255,255,0.12); background: #2f2c2d;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 600; color: #d8d2cd;
}
.ave-fallback { text-transform: uppercase; }
.ave-name { font-size: 15px; font-weight: 600; }
.ave-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 4px; }
.ave-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 14px; border-radius: 11px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500;
  background: rgba(255,255,255,0.05); color: #f5f1ee; border: 1px solid rgba(255,255,255,0.12);
  transition: background 120ms ease, border-color 120ms ease;
}
.ave-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.24); }
.ave-btn i { font-size: 15px; opacity: .85; }
.ave-btn-primary { background: #f5f1ee; color: #232021; border-color: #f5f1ee; }
.ave-btn-primary:hover { background: #fff; }
.ave-link { background: none; border: none; color: #cfc9c4; cursor: pointer; font: inherit; font-size: 12.5px; padding: 0; }
.ave-link:hover { color: #fff; }
.ave-err { font-size: 12.5px; color: #d9a406; line-height: 1.5; }
.ave-ok-badge {
  width: 34px; height: 34px; border-radius: 50%; background: #22c55e; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700;
}
/* Loader */
.ave-loading { gap: 16px; padding: 14px 0 6px; }
.ave-orb { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.ave-orb i { font-size: 26px; color: #f5f1ee; z-index: 1; }
.ave-orb-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12); border-top-color: #f5f1ee;
  animation: enwSpin 1s linear infinite;
}
.ave-load-title { font-size: 14px; font-weight: 600; }
.ave-load-steps { display: flex; flex-direction: column; gap: 7px; width: 100%; text-align: left; margin: 2px 0; }
.ave-step { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: rgba(245,241,238,0.4); }
.ave-step-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.ave-step.is-active { color: #f5f1ee; }
.ave-step.is-active .ave-step-dot { border-color: #f5f1ee; box-shadow: 0 0 0 3px rgba(245,241,238,0.12); }
.ave-step.is-done { color: rgba(245,241,238,0.7); }
.ave-step.is-done .ave-step-dot { background: #22c55e; border-color: #22c55e; }
.ave-load-foot { font-size: 11.5px; color: rgba(245,241,238,0.45); line-height: 1.5; }
/* Gallery grid. DEFINITE tile height + !important on the img: some browsers
   (extension img resets) render thumbs at natural height and cascade them,
   so aspect-ratio + height:100% is not enough — pin an explicit height. */
.ave-gallery-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12.5px; color: rgba(245,241,238,0.6); }
.ave-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 88px; gap: 8px; max-height: 300px; overflow-y: auto; }
.ave-thumb { padding: 0; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; cursor: pointer; background: #2f2c2d; height: 88px; display: block; }
.ave-thumb img { width: 100% !important; height: 88px !important; object-fit: cover !important; display: block !important; border-radius: 0 !important; }
.ave-thumb:hover { border-color: rgba(255,255,255,0.4); }
/* Elapsed clock in the loader title */
.ave-elapsed { font-weight: 400; opacity: .5; font-variant-numeric: tabular-nums; margin-left: 4px; }
/* FLIP: the new photo sliding from the modal into the sidebar avatar */
.ave-fly {
  position: fixed; z-index: 5000; border-radius: 50%; object-fit: cover;
  pointer-events: none; box-shadow: 0 12px 34px rgba(0,0,0,0.4);
  transition: transform .64s cubic-bezier(.34,.02,.24,1);
}
#ave-modal.is-flying { background: rgba(0,0,0,0) !important; transition: background .5s ease; }
#ave-modal.is-flying .ave-sheet { opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .4s ease, transform .4s ease; }
.ave-empty { font-size: 12.5px; color: rgba(245,241,238,0.55); line-height: 1.5; padding: 8px 0; }
.ave-empty a { color: #cfc9c4; }

/* Signals empty-state description — smaller & more minimal than the default. */
.aisig-empty-desc { display: block; font-size: 12px; line-height: 1.5; max-width: 300px; opacity: 0.85; }