/* ——— herro.pro design tokens ——— */
:root {
  --accent-h: 290;
  --accent: oklch(72% 0.18 var(--accent-h));
  --accent-dim: oklch(58% 0.16 var(--accent-h));
  --accent-glow: oklch(72% 0.18 var(--accent-h) / 0.25);
  --accent-ink: oklch(20% 0.08 var(--accent-h));

  /* dark (default) */
  --bg: oklch(14% 0.01 250);
  --bg-1: oklch(16.5% 0.012 250);
  --bg-2: oklch(19% 0.014 250);
  --bg-3: oklch(22% 0.016 250);
  --bg-hover: oklch(24% 0.018 250);
  --line: oklch(28% 0.012 250);
  --line-soft: oklch(22% 0.01 250);
  --fg: oklch(96% 0.005 250);
  --fg-2: oklch(78% 0.01 250);
  --fg-3: oklch(58% 0.012 250);
  --fg-4: oklch(42% 0.014 250);

  --radius: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  --font-sans: "Inter Tight", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --density-row: 30px;
  --density-card-pad: 10px 12px;
  --density-group-gap: 10px;
  --density-col-gap: 14px;

  --shadow-1: 0 1px 0 oklch(100% 0 0 / 0.02) inset, 0 1px 2px oklch(0% 0 0 / 0.3);
  --shadow-2: 0 8px 24px oklch(0% 0 0 / 0.35), 0 1px 0 oklch(100% 0 0 / 0.04) inset;
  --shadow-pop: 0 20px 60px oklch(0% 0 0 / 0.45), 0 1px 0 oklch(100% 0 0 / 0.06) inset;
}

:root[data-theme="light"] {
  --bg: oklch(98.5% 0.003 250);
  --bg-1: oklch(96% 0.004 250);
  --bg-2: oklch(99.5% 0.002 250);
  --bg-3: oklch(94% 0.006 250);
  --bg-hover: oklch(92% 0.008 250);
  --line: oklch(88% 0.006 250);
  --line-soft: oklch(93% 0.005 250);
  --fg: oklch(20% 0.01 250);
  --fg-2: oklch(36% 0.012 250);
  --fg-3: oklch(52% 0.012 250);
  --fg-4: oklch(66% 0.01 250);
  --shadow-1: 0 1px 0 oklch(100% 0 0 / 1) inset, 0 1px 2px oklch(0% 0 0 / 0.06);
  --shadow-2: 0 8px 24px oklch(0% 0 0 / 0.08), 0 1px 0 oklch(100% 0 0 / 1) inset;
  --shadow-pop: 0 20px 60px oklch(0% 0 0 / 0.12);
  --accent: oklch(58% 0.18 var(--accent-h));
  --accent-dim: oklch(45% 0.14 var(--accent-h));
}

:root[data-density="compact"] {
  --density-row: 26px;
  --density-card-pad: 7px 10px;
  --density-group-gap: 7px;
  --density-col-gap: 10px;
}
:root[data-density="cozy"] {
  --density-row: 34px;
  --density-card-pad: 12px 14px;
  --density-group-gap: 12px;
  --density-col-gap: 18px;
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
/* body stays fixed (the board manages its own internal scroll); #root is the
   page scroller so tall pages (account, settings, etc.) scroll. The board shell
   fills 100% so it won't double-scroll. */
#root { overflow-y: auto; overflow-x: hidden; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
  letter-spacing: -0.003em;
  overflow: hidden;
}
button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea { font-family: inherit; color: inherit; background: none; border: 0; outline: 0; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-4); }

/* ——— layout ——— */
.app {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100vh;
  background: var(--bg);
}

/* ——— sidebar ——— */
.sidebar {
  width: 232px;
  background: var(--bg-1);
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  padding: 10px 8px;
  gap: 2px;
  transition: width 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}
.sidebar[data-collapsed="true"] { width: 52px; overflow: visible; position: relative; z-index: 50; }
/* When collapsed, individual items must also allow overflow so the
   `::after` tooltip flyout can escape to the right. (The expanded state
   keeps the original clip to hide mid-animation text spill.) */
.sidebar[data-collapsed="true"] .sb-item { position: relative; overflow: visible; }
/* The scroll container inside the sidebar also needs to not clip the
   tooltip — otherwise it gets cropped at the sidebar's right edge. */
.sidebar[data-collapsed="true"] .sb-scroll { overflow: visible; }
.sidebar[data-collapsed="true"] .sb-label,
.sidebar[data-collapsed="true"] .sb-section-title,
.sidebar[data-collapsed="true"] .sb-badge,
.sidebar[data-collapsed="true"] .sb-footer { display: none; }
.sidebar[data-collapsed="true"] .sb-brand-text { display: none; }

/* ——— Collapsed-sidebar flyout tooltip ———
   In icons-only mode, hovering a sidebar item reveals the full name as a
   small pill floating to the right, so the user can confirm what they're
   about to jump to before clicking. The item's own `.sb-label` stays
   hidden (no truncated text); this flyout is rendered via `::after` using
   the label's text (synced through a data attribute set in shell.jsx).
   The board-rail, caret, and badge are also hidden while collapsed. */
.sidebar[data-collapsed="true"] .sb-ws-caret,
.sidebar[data-collapsed="true"] .sb-board-rail { display: none; }
.sidebar[data-collapsed="true"] .sb-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--bg-3);
  color: var(--fg);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 500;
}
.sidebar[data-collapsed="true"] .sb-item:hover {
  z-index: 600; /* lift above neighbouring sidebar items during hover so
                   the flyout pill doesn't get overpainted by a sibling */
}
.sidebar[data-collapsed="true"] .sb-item:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  transition-delay: 180ms;   /* small delay so a sweep over the sidebar
                                doesn't flash tooltips everywhere */
}

.sb-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 14px 8px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 14px;
}

/* ——— tenant switcher ——— */
.sb-header {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 6px;
}
.sb-header-tenant { flex: 1; min-width: 0; }
.sb-header-tenant .tenant-switcher { margin-bottom: 0; }
.sb-collapse-btn {
  flex-shrink: 0;
  width: 28px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--fg-3);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.sb-collapse-btn:hover {
  background: var(--bg-3);
  border-color: var(--line);
  color: var(--fg);
}
.sidebar[data-collapsed="true"] .sb-header {
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.sidebar[data-collapsed="true"] .sb-collapse-btn {
  width: 100%;
  height: 28px;
}
.tenant-switcher { position: relative; margin-bottom: 6px; }
.tenant-pill {
  width: 100%;
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  transition: border-color 120ms, background 120ms;
  min-width: 0;
  text-align: left;
}
.tenant-pill:hover { border-color: var(--line); background: var(--bg-3); }
.tenant-pill[data-open="true"] { border-color: var(--line); }
.tenant-av {
  width: 26px; height: 26px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 600; font-size: 10px;
  letter-spacing: 0.02em;
  font-family: var(--font-mono);
  flex-shrink: 0;
  box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.08) inset;
}
.tenant-meta { flex: 1; min-width: 0; text-align: left; line-height: 1.15; overflow: hidden; }
.tenant-name { font-size: 12.5px; color: var(--fg); font-weight: 600; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tenant-kind { font-size: 9.5px; color: var(--fg-3); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.tenant-pill > svg:last-child { color: var(--fg-4); flex-shrink: 0; }

.sidebar[data-collapsed="true"] .tenant-meta,
.sidebar[data-collapsed="true"] .tenant-pill svg:last-child { display: none; }
.sidebar[data-collapsed="true"] .tenant-pill { justify-content: center; padding-left: 0; padding-right: 0; }
/* When collapsed, the switcher dropdown must float out beside the rail at a real
   width instead of being squeezed into the 52px column (which overflowed). */
.sidebar[data-collapsed="true"] .tenant-menu {
  left: calc(100% + 8px);
  right: auto;
  top: 0;
  width: 240px;
}

.tenant-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 6px;
  box-shadow: var(--shadow-pop);
  z-index: 50;
  display: flex; flex-direction: column; gap: 2px;
}
.tenant-menu-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-4); padding: 6px 8px 4px 8px;
}
.tenant-menu-item {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius);
  color: var(--fg-2);
  font-size: 12px;
}
.tenant-menu-item:hover { background: var(--bg-3); color: var(--fg); }
.tenant-menu-item[data-active="true"] { background: var(--bg-3); color: var(--fg); }
.tenant-menu-item.muted { color: var(--fg-3); }
.tenant-menu-item.muted svg { color: var(--fg-4); }
.tenant-menu-item .tenant-check { margin-left: auto; color: var(--accent); font-family: var(--font-mono); font-size: 11px; }
.tenant-menu-divider { height: 1px; background: var(--line-soft); margin: 4px 0; }

/* ——— workspace / board nav ——— */
.sb-section-title { display: flex; align-items: center; gap: 6px; }
.sb-section-add {
  margin-left: auto;
  width: 18px; height: 18px;
  color: var(--fg-4);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.sb-section-add:hover { background: var(--bg-3); color: var(--fg-2); }

.sb-workspace { margin-bottom: 2px; }
.sb-ws-head .sb-ws-caret {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-4);
  transition: transform 160ms;
  transform: rotate(-90deg);
  margin-left: -2px;
}
.sb-ws-head .sb-ws-caret.open { transform: rotate(0); }
.sb-boards { padding-left: 2px; margin: 2px 0 4px 0; }
/* `.sb-item` (defined later) sets `padding: 6px 10px`, which would reset the
   board indent and push the icon left onto the rail (green line through the
   icon). Use a higher-specificity selector so the 22px indent always wins. */
.sb-item.sb-board {
  position: relative;
  padding-left: 22px;
  min-height: 28px;
  font-size: 12.5px;
}
.sb-board-rail {
  position: absolute;
  left: 14px;
  top: 4px; bottom: 4px;
  width: 1px;
  background: var(--line-soft);
  z-index: 0;
}
.sb-board .sb-icon, .sb-board .sb-label { position: relative; z-index: 1; }
.sb-board[data-active="true"] .sb-board-rail { background: var(--accent); }
.sb-board.muted { color: var(--fg-4); }
.sb-board.muted:hover { color: var(--fg-2); }
.sb-logo {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bg);
  font-weight: 700; font-size: 13px;
  font-family: var(--font-mono);
  box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.08) inset, 0 2px 8px var(--accent-glow);
  flex-shrink: 0;
}
.sb-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.sb-brand-text small { color: var(--fg-3); font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; }

.sb-section-title {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-4);
  padding: 14px 10px 6px 10px;
  font-weight: 500;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: var(--radius);
  color: var(--fg-2);
  font-size: 13px;
  cursor: pointer;
  min-height: 30px;
  transition: background 120ms;
  user-select: none;
}
.sb-item:hover { background: var(--bg-hover); color: var(--fg); }
.sb-item[data-active="true"] { background: var(--bg-3); color: var(--fg); }
.sb-item .sb-icon { width: 16px; height: 16px; color: var(--fg-3); flex-shrink: 0; }
.sb-item[data-active="true"] .sb-icon { color: var(--accent); }
.sb-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.sb-dot {
  width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
}

.sb-footer {
  margin-top: auto;
  padding: 10px 8px;
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  color: var(--fg-2);
}
.sb-avatar {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, oklch(70% 0.12 30), oklch(55% 0.14 350));
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 600; font-size: 11px;
  flex-shrink: 0;
}

/* ——— main ——— */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* ——— topbar ——— */
.topbar {
  height: 48px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  background: var(--bg);
  flex-shrink: 0;
}
.crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--fg-2);
}
.crumb strong { color: var(--fg); font-weight: 600; }
.crumb .slash { color: var(--fg-4); }
.topbar-spacer { flex: 1; }

.topbar-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius);
  color: var(--fg-2);
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 120ms, color 120ms;
}
.topbar-btn:hover { background: var(--bg-2); color: var(--fg); }
.topbar-btn kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--bg-3);
  color: var(--fg-3);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--line);
}
.topbar-btn.primary {
  background: var(--accent);
  color: oklch(14% 0.01 250);
  font-weight: 500;
}
.topbar-btn.primary:hover { background: oklch(82% 0.18 var(--accent-h)); }

.search {
  flex: 0 1 420px;
  height: 30px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  display: flex; align-items: center;
  padding: 0 10px;
  gap: 8px;
  color: var(--fg-3);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 120ms;
}
.search:hover { border-color: var(--line); }
.search .spacer { flex: 1; }

/* ——— sub-toolbar ——— */
.subtoolbar {
  height: 42px;
  padding: 0 16px;
  display: flex; align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
  flex-shrink: 0;
}
.sub-title {
  display: flex; align-items: baseline; gap: 10px;
}
.sub-title h1 {
  font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -0.01em;
}
.sub-title .time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.sub-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 5px;
}
.sub-pill .pulse {
  width: 5px; height: 5px; border-radius: 999px; background: var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { opacity: 0.6; box-shadow: 0 0 0 4px transparent; }
}

.seg {
  display: inline-flex;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 2px;
}
.seg button {
  height: 22px; padding: 0 8px;
  font-size: 11px;
  color: var(--fg-3);
  border-radius: 4px;
  display: inline-flex; align-items: center; gap: 5px;
}
.seg button[data-active="true"] { background: var(--bg-3); color: var(--fg); box-shadow: var(--shadow-1); }
.seg button:hover:not([data-active="true"]) {
  color: var(--fg);
  background: color-mix(in oklch, var(--bg-3) 70%, transparent);
}
.seg.seg-icons button:hover:not([data-active="true"]) {
  background: var(--bg-3);
  color: var(--fg);
}

/* ——— board ——— */
.board {
  flex: 1;
  overflow: auto;
  padding: 14px 16px 60px 16px;
  scroll-behavior: smooth;
}
.columns {
  display: flex;
  gap: var(--density-col-gap);
  align-items: flex-start;
  min-height: 100%;
}
.column {
  width: 296px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--density-group-gap);
}
.column-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 6px 4px;
  font-size: 12px;
  color: var(--fg-2);
  font-weight: 500;
}
.column-head .dept-dot {
  width: 8px; height: 8px; border-radius: 2px;
}
.column-head .count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-4);
  margin-left: auto;
  letter-spacing: 0.02em;
}
.column-head .add-group {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-4); border-radius: 4px;
}
.column-head .add-group:hover { background: var(--bg-2); color: var(--fg-2); }

/* Focus-area "+" button (header) + "+ Add initiative" row */
.focus-head .add-group {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px;
  transition: background 120ms, color 120ms, transform 120ms;
}
.focus-head .add-group:hover {
  background: color-mix(in oklch, var(--bg-0) 40%, transparent);
  transform: scale(1.08);
}
.focus-head .add-group:active { transform: scale(0.96); }

.add-initiative {
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
  border: 1px dashed transparent;
}
.add-initiative:hover {
  background: var(--bg-2);
  color: var(--fg-2) !important;
  border-color: var(--line-soft);
}
.add-initiative:hover svg { color: var(--accent); }
.add-initiative:active { background: var(--bg-3); }

/* ——— stackable group ——— */
.group {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 160ms, transform 160ms, box-shadow 160ms;
  position: relative;
}
.group[data-dragging="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-pop);
  z-index: 10;
  opacity: 0.95;
}
.group[data-drop="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
}
.group:hover { border-color: var(--line); }

.group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  cursor: grab;
  user-select: none;
  background: linear-gradient(to bottom, oklch(100% 0 0 / 0.015), transparent);
  min-width: 0;
}
.group-head:active { cursor: grabbing; }
.group-head .grip {
  color: var(--fg-4);
  opacity: 0;
  transition: opacity 120ms;
}
.group:hover .grip { opacity: 1; }
.group-head .status-dot {
  width: 7px; height: 7px; border-radius: 999px;
  flex-shrink: 0;
}
.group-head .status-dot[data-ring="true"] {
  background: transparent !important;
  border: 1.5px dashed var(--fg-4);
}
.group[data-nostatus="true"] {
  background: linear-gradient(to bottom, color-mix(in oklch, var(--accent) 4%, var(--bg-1)), var(--bg-1));
}
.group[data-nostatus="true"] .group-head { border-bottom-color: var(--line); }
.priority-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-4);
  margin-right: -4px;
  flex-shrink: 0;
}
.priority-rank[data-p="P1"] { color: oklch(72% 0.17 25); }
.priority-rank[data-p="P2"] { color: oklch(78% 0.14 70); }
.group-head .title {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.group-head .count-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  margin-left: auto;
  letter-spacing: 0.02em;
}
.group-head .collapse {
  color: var(--fg-4);
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  transition: transform 180ms, background 120ms;
}
.group-head .collapse:hover { background: var(--bg-3); color: var(--fg-2); }
.group[data-collapsed="true"] .collapse { transform: rotate(-90deg); }

.group-body {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 2000px;
  transition: max-height 260ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 220ms;
  overflow: hidden;
}
.group[data-collapsed="true"] .group-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* ——— card ——— */
.card {
  padding: var(--density-card-pad);
  background: var(--bg-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: grab;
  transition: background 120ms, border-color 120ms, transform 120ms;
  position: relative;
}
.card:hover { background: var(--bg-3); border-color: var(--line-soft); }
.card:active { cursor: grabbing; }
.card[data-dragging="true"] {
  opacity: 0.4;
}
.card-title {
  font-family: var(--font-card-title, var(--font-sans));
  font-size: 13.5px;
  color: var(--fg);
  letter-spacing: -0.005em;
  line-height: 1.35;
  font-weight: 500;
}
.card.compact {
  padding: 8px 10px;
  gap: 4px;
}
.card.compact .card-title {
  font-size: 13.5px;
  line-height: 1.3;
}
.card.compact .card-foot {
  margin-top: 0;
  font-size: 11px;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-3);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}
.card-meta .id { color: var(--fg-4); }
.due { display: inline-flex; align-items: center; gap: 3px; }
.due[data-overdue="true"] { color: oklch(72% 0.17 25); }
.due[data-today="true"] { color: var(--accent); }
/* legacy — keep for backward compat with any existing rules */
.card-meta .due { display: inline-flex; align-items: center; gap: 3px; }
.card-meta .sep { color: var(--fg-4); }
.card-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.card-foot > * { white-space: nowrap; }
.card-foot .label { white-space: nowrap; }
.card-foot .assignee {
  width: 18px; height: 18px; border-radius: 999px;
  font-size: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 600;
  letter-spacing: 0;
}
.card-foot .labels { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.card-foot .label {
  font-size: 10px; font-family: var(--font-mono);
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-3);
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.card-foot .priority {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; color: var(--fg-3);
  font-family: var(--font-mono);
}
.card-foot .priority[data-p="P1"] { color: oklch(72% 0.17 25); }
.card-foot .priority[data-p="P2"] { color: oklch(78% 0.14 70); }

.card-meta-trail .priority {
  margin-left: 0;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; color: var(--fg-3);
  font-family: var(--font-mono);
}
.card-meta-trail .priority[data-p="P1"] { color: oklch(72% 0.17 25); }
.card-meta-trail .priority[data-p="P2"] { color: oklch(78% 0.14 70); }

.card-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-family: var(--font-mono);
  color: var(--fg-3);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.card-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
}

.card .timer-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-family: var(--font-mono);
  color: var(--accent);
  padding: 1px 5px; border-radius: 3px;
  background: color-mix(in oklch, var(--accent) 12%, transparent);
}
.card .timer-chip .dot {
  width: 4px; height: 4px; border-radius: 999px; background: var(--accent);
  animation: pulse 1.4s infinite;
}

/* drop indicators — soft glow, no animation */
.drop-line {
  position: relative;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  margin: 3px 6px;
  box-shadow: 0 0 6px color-mix(in oklch, var(--accent) 35%, transparent);
}
/* Flat variant for list rows: takes zero layout space to prevent oscillation
   between dragover → line-appears → cursor shifts → idx recomputes. */
.drop-line.flat {
  height: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.drop-line.flat::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 6px color-mix(in oklch, var(--accent) 40%, transparent);
}
.drop-line.strong {
  height: 2px;
  margin: 5px 0;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in oklch, var(--accent) 45%, transparent);
}

/* ——— new group / new column ——— */
.add-group-btn {
  width: 100%;
  padding: 6px 8px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  color: var(--fg-4);
  font-size: 11px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.add-group-btn:hover { color: var(--fg-2); border-color: var(--fg-4); background: var(--bg-1); }

/* .add-column-btn styles consolidated below in the focus-column system
   block — previous 296×96 dashed-ghost variant removed to avoid the
   orphan "empty column" appearance. */

/* ——— tweaks panel ——— */
.tweaks-panel {
  position: fixed;
  right: 16px; bottom: 16px;
  width: 360px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  z-index: 100;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
}
.tweaks-head {
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line-soft);
}
.tweaks-head > svg { color: var(--accent); flex-shrink: 0; }
.tweaks-title { flex: 1; min-width: 0; }
.tweaks-title .t { font-size: 13px; font-weight: 600; color: var(--fg); line-height: 1.2; }
.tweaks-title .d { font-size: 10.5px; color: var(--fg-4); margin-top: 2px; font-family: var(--font-mono); letter-spacing: 0.02em; }
.tweaks-head .pill {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  padding: 2px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600;
}
.tweaks-close {
  color: var(--fg-4);
  padding: 4px; border-radius: 5px;
  display: grid; place-items: center;
}
.tweaks-close:hover { background: var(--bg-2); color: var(--fg); }

.tweaks-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px; gap: 2px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-soft);
}
.tweaks-tabs button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 4px;
  font-size: 11px; font-weight: 500;
  color: var(--fg-3);
  border-radius: 6px;
  transition: background 120ms, color 120ms;
}
.tweaks-tabs button:hover { color: var(--fg-2); }
.tweaks-tabs button[data-active="true"] {
  background: var(--bg-1);
  color: var(--fg);
  box-shadow: 0 1px 0 var(--line-soft);
}
.tweaks-tabs button[data-active="true"] svg { color: var(--accent); }

.tweaks-body {
  padding: 14px;
  display: flex; flex-direction: column;
  gap: 18px;
  overflow: auto;
  flex: 1;
}

/* Generic row */
.tweak-row { display: flex; flex-direction: column; gap: 8px; }
.tweak-row label { color: var(--fg); font-size: 12px; font-weight: 500; }
.tweak-lab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tweak-lab .hint { color: var(--fg-4); font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.02em; }

/* Segmented (for simple enums) */
.tweak-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 2px; gap: 0; }
.tweak-seg button { height: 28px; font-size: 11.5px; color: var(--fg-3); border-radius: 5px; font-weight: 500; }
.tweak-seg button:hover { color: var(--fg-2); }
.tweak-seg button[data-active="true"] { background: var(--bg-3); color: var(--fg); box-shadow: var(--shadow-1); }

/* Font grid — typography tab */
.font-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.font-tile {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 10px 10px 8px;
  gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--fg-2);
  text-align: left;
  transition: background 120ms, border-color 120ms;
  position: relative;
}
.font-tile:hover { background: var(--bg-3); border-color: var(--line); }
.font-tile[data-active="true"] {
  background: color-mix(in oklch, var(--accent) 10%, var(--bg-2));
  border-color: var(--accent);
  color: var(--fg);
}
.font-tile[data-active="true"]::after {
  content: ""; position: absolute; top: 6px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.font-tile .tile-big { font-size: 20px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; color: var(--fg); }
.font-tile .tile-lower {
  font-size: 10px; color: var(--fg-3);
  line-height: 1.1;
  display: block; width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.font-tile .tile-name {
  font-size: 9px; color: var(--fg-4);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}
.font-tile[data-active="true"] .tile-name { color: var(--accent); }

/* Legacy font-seg (keep for other uses, unused in new panel) */
.font-seg { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }

/* Text scale segmented */
.scale-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 2px;
  align-items: center;
}
.scale-seg button {
  height: 32px;
  color: var(--fg-3);
  border-radius: 5px;
  font-weight: 500;
  line-height: 1;
}
.scale-seg button:hover { color: var(--fg-2); }
.scale-seg button[data-active="true"] { background: var(--bg-3); color: var(--fg); box-shadow: var(--shadow-1); }

/* Color swatch grid */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.swatch-tile {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 7px 4px 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  transition: background 120ms, border-color 120ms;
}
.swatch-tile:hover { background: var(--bg-3); }
.swatch-tile[data-active="true"] {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 10%, var(--bg-2));
}
.swatch-tile .sw-fill {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.1), 0 1px 2px oklch(0% 0 0 / 0.25);
}
.swatch-tile .sw-name {
  font-size: 9px;
  color: var(--fg-4);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.swatch-tile[data-active="true"] .sw-name { color: var(--accent); }

/* Custom hue slider row */
.hue-row { display: flex; align-items: center; gap: 10px; }
.hue-slider {
  flex: 1;
  height: 10px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(to right,
    oklch(78% 0.18 0), oklch(78% 0.18 60), oklch(78% 0.18 120),
    oklch(78% 0.18 180), oklch(78% 0.18 240), oklch(78% 0.18 300),
    oklch(78% 0.18 359));
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.hue-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-1);
  border: 2px solid var(--fg);
  cursor: grab;
}
.hue-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-1);
  border: 2px solid var(--fg);
  cursor: grab;
}
.hue-chip {
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

/* Wallpaper tiles */
.wall-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.wall-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 5px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
}
.wall-tile:hover { border-color: var(--line); }
.wall-tile[data-active="true"] {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 10%, var(--bg-2));
}
.wall-tile .wall-preview {
  height: 42px; border-radius: 5px;
  background: var(--bg-1);
  background-size: 14px 14px;
  border: 1px solid var(--line-soft);
}
.wall-tile .wall-preview[data-kind="noise"] {
  background-image: radial-gradient(var(--fg-4) 0.3px, transparent 0.5px), radial-gradient(var(--fg-4) 0.3px, transparent 0.5px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  opacity: 0.5;
}
.wall-tile .wall-name {
  font-size: 9.5px; font-family: var(--font-mono); letter-spacing: 0.04em;
  color: var(--fg-4); text-transform: uppercase;
  text-align: center;
}
.wall-tile[data-active="true"] .wall-name { color: var(--accent); }

/* Card corners segmented */
.corner-seg, .avatar-seg {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.avatar-seg { grid-template-columns: repeat(3, 1fr); }
.corner-seg button, .avatar-seg button {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px 7px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  font-size: 10px;
  color: var(--fg-3);
}
.corner-seg button:hover, .avatar-seg button:hover { background: var(--bg-3); color: var(--fg-2); }
.corner-seg button[data-active="true"], .avatar-seg button[data-active="true"] {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 10%, var(--bg-2));
  color: var(--accent);
  font-weight: 600;
}
.corner-seg .corner-swatch {
  width: 28px; height: 20px;
  background: linear-gradient(135deg, var(--accent-dim), var(--accent));
  opacity: 0.85;
}
.avatar-seg .ava-swatch {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
}

/* Switch rows */
.tweak-sw-group {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2);
}
.sw-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 120ms;
}
.sw-row:last-child { border-bottom: none; }
.sw-row:hover { background: var(--bg-3); }
.sw-icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 5px;
  background: var(--bg-3);
  color: var(--fg-3);
  flex-shrink: 0;
}
.sw-row:hover .sw-icon { color: var(--accent); background: color-mix(in oklch, var(--accent) 14%, var(--bg-3)); }
.sw-text { flex: 1; min-width: 0; }
.sw-label { font-size: 12px; color: var(--fg); font-weight: 500; line-height: 1.25; }
.sw-hint { font-size: 10.5px; color: var(--fg-4); margin-top: 1px; line-height: 1.3; }
.sw-toggle {
  width: 28px; height: 16px; border-radius: 999px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  position: relative; flex-shrink: 0;
  transition: background 160ms;
}
.sw-toggle[data-on="true"] { background: var(--accent); border-color: var(--accent); }
.sw-knob {
  position: absolute; top: 1px; left: 1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fg-4);
  transition: transform 160ms, background 160ms;
}
.sw-toggle[data-on="true"] .sw-knob { transform: translateX(12px); background: #fff; }

/* Reset row */
.tweak-reset-row { display: flex; justify-content: flex-end; padding-top: 2px; }
.tweak-reset {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--fg-3);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.tweak-reset:hover { color: oklch(68% 0.18 20); border-color: oklch(68% 0.18 20); }

/* legacy swatches class kept for anything else */
.swatches { display: flex; gap: 6px; }
.swatch { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); cursor: pointer; position: relative; }
.swatch[data-active="true"] { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 3px var(--fg); }

/* ======================================================
   Tweak effects applied globally via data-attrs / vars
   ====================================================== */

/* Reduce motion: kill transitions/animations */
html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
  transition-duration: 0ms !important;
  animation-duration: 0ms !important;
  animation-iteration-count: 1 !important;
}

/* Weekend tint */
html[data-weekend-tint="true"] body {
  background: color-mix(in oklch, oklch(75% 0.08 50) 5%, var(--bg)) !important;
}

/* Wallpaper */
html[data-wallpaper="dots"] .board,
html[data-wallpaper="dots"] .main-scroll {
  background-image: radial-gradient(circle, var(--fg-4) 0.8px, transparent 1px);
  background-size: 14px 14px;
}
html[data-wallpaper="grid"] .board,
html[data-wallpaper="grid"] .main-scroll {
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 24px 24px;
}
html[data-wallpaper="topo"] .board,
html[data-wallpaper="topo"] .main-scroll {
  background-image:
    radial-gradient(ellipse at 20% 30%, color-mix(in oklch, var(--accent) 6%, transparent) 0, transparent 40%),
    radial-gradient(ellipse at 80% 70%, color-mix(in oklch, var(--accent) 4%, transparent) 0, transparent 50%);
}
html[data-wallpaper="noise"] .board,
html[data-wallpaper="noise"] .main-scroll {
  background-image:
    radial-gradient(var(--fg-4) 0.3px, transparent 0.5px),
    radial-gradient(var(--fg-4) 0.3px, transparent 0.5px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
}
html[data-wallpaper="warm"] .board,
html[data-wallpaper="warm"] .main-scroll {
  background-image: linear-gradient(135deg, color-mix(in oklch, oklch(78% 0.12 50) 12%, transparent) 0%, transparent 60%);
}

/* Sticky hover: keep cards elevated longer */
html[data-sticky-hover="true"] .card:hover { transform: translateY(-2px); transition: transform 280ms ease-out; }

/* Focus mode: hide non-essential chrome */
html[data-focus-mode="true"] .time-strip,
html[data-focus-mode="true"] .capture-fab { display: none !important; }
html[data-focus-mode="true"] .sidebar { opacity: 0.6; transition: opacity 200ms; }
html[data-focus-mode="true"] .sidebar:hover { opacity: 1; }

/* Text scale */
html { font-size: calc(14px * var(--text-scale, 1)); }

/* Avatars everywhere pick up --avatar-radius where they reference it */

/* ——— quick capture ——— */
.capture-fab {
  position: fixed;
  right: 16px; bottom: 16px;
  background: var(--accent);
  color: oklch(14% 0.01 250);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 20px var(--accent-glow), 0 1px 0 oklch(100% 0 0 / 0.2) inset;
  z-index: 90;
}
.capture-fab kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: oklch(14% 0.01 250 / 0.2);
  padding: 1px 5px;
  border-radius: 3px;
}

.capture-modal {
  position: fixed; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 15vh;
  background: oklch(0% 0 0 / 0.5);
  backdrop-filter: blur(6px);
  z-index: 200;
}
.capture-modal .sheet {
  width: 560px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.capture-modal textarea {
  width: 100%;
  padding: 16px 18px;
  font-size: 15px;
  background: transparent;
  resize: none;
  min-height: 72px;
  letter-spacing: -0.01em;
}
.capture-modal textarea::placeholder { color: var(--fg-4); }

/* Generic modal (New board, Add/Edit focus area). These classes were used by
   overlays.jsx but never had styles — the modal rendered unstyled inline. */
.modal-backdrop {
  position: fixed; inset: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  background: oklch(0% 0 0 / 0.5);
  backdrop-filter: blur(6px);
  z-index: 200;
}
.add-area-modal {
  width: 520px; max-width: calc(100vw - 32px);
  max-height: 82vh; overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
}
.add-area-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 18px 20px 0 20px;
}
.add-area-kicker {
  font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-4); font-weight: 600;
}
.add-area-title-label { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-top: 3px; }
.add-area-close {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--fg-3);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.add-area-close:hover { color: var(--fg); background: var(--bg-2); }
.add-area-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--line-soft);
}
.add-area-hint { font-size: 11px; color: var(--fg-4); font-family: var(--font-mono); letter-spacing: 0.03em; }
.field-label { font-size: 11.5px; font-weight: 600; color: var(--fg-2); margin-bottom: 6px; }
.field-input {
  width: 100%; padding: 9px 12px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 7px;
  color: var(--fg); font-family: inherit; font-size: 13px;
}
.field-input::placeholder { color: var(--fg-4); }
.field-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); background: var(--bg-1); }
.capture-chips {
  padding: 0 18px 12px 18px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  color: var(--fg-2);
  font-size: 11px;
  cursor: pointer;
}
.chip:hover { border-color: var(--line); color: var(--fg); }
.chip .dot { width: 7px; height: 7px; border-radius: 2px; }
.chip[data-selected="true"] { background: color-mix(in oklch, var(--accent) 14%, transparent); color: var(--fg); border-color: var(--accent); }

.capture-foot {
  display: flex; align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-2);
  font-size: 11px;
  color: var(--fg-3);
  gap: 10px;
}
.capture-foot .spacer { flex: 1; }
.capture-foot .btn {
  padding: 5px 10px;
  border-radius: var(--radius);
  background: var(--accent);
  color: oklch(14% 0.01 250);
  font-weight: 500;
  font-size: 11px;
  display: inline-flex; align-items: center; gap: 6px;
}

/* ——— variations ——— */

/* spotlight layout */
.spotlight-wrap {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--density-col-gap);
  min-height: 100%;
}
.spotlight-main { display: flex; flex-direction: column; gap: var(--density-group-gap); min-width: 0; }
.spotlight-main .group-body { max-height: none; }
.spotlight-side {
  display: flex; flex-direction: column; gap: var(--density-group-gap);
  min-width: 0;
}
.spotlight-hero-head {
  padding: 14px 16px;
  background: linear-gradient(135deg, color-mix(in oklch, var(--accent) 14%, transparent), transparent 60%);
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: baseline; gap: 12px;
}
.spotlight-hero-head h2 { margin: 0; font-size: 18px; letter-spacing: -0.015em; }
.spotlight-hero-head .sub { color: var(--fg-3); font-size: 12px; font-family: var(--font-mono); }

/* dept row layout */
.rows-wrap {
  display: flex; flex-direction: column;
  gap: 16px;
}
.row-dept {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-xl);
  background: var(--bg-1);
  overflow: hidden;
}
.row-dept-head {
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(to right, oklch(100% 0 0 / 0.015), transparent);
}
.row-dept-head h2 { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.row-dept-head .meta { color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; }
.row-dept-body {
  display: flex;
  gap: var(--density-col-gap);
  padding: 12px;
  overflow-x: auto;
}
.row-dept-body .group { min-width: 280px; flex-shrink: 0; }

/* compact list */
.list-outer {
  width: 100%;
  display: flex;
}
.list-outer[data-align="left"]   { justify-content: flex-start; }
.list-outer[data-align="center"] { justify-content: center; }
.list-outer[data-align="right"]  { justify-content: flex-end; }
.list-wrap {
  width: 100%;
  max-width: var(--list-max-w, none);
  min-width: 0;
  display: flex; flex-direction: column; gap: 22px;
  /* Excel-style columns: rows extend as wide as total column widths.
     When that exceeds the container, scroll horizontally. */
  overflow-x: auto;
}
.list-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  margin: 0 0 6px 4px;
  font-weight: 500;
  display: flex; align-items: center; gap: 10px;
}
.list-section h3 .dot { width: 8px; height: 8px; border-radius: 2px; }
.list-section h3 .count { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); font-weight: 400; letter-spacing: 0.02em; }
.list-section-add {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-4);
  border-radius: 5px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
  margin-left: auto;
}
.list-section-add:hover {
  color: var(--fg);
  border-color: var(--line-soft);
  background: var(--bg-1);
}
.list-section-add-row {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  height: 32px;
  margin-top: 2px;
  padding: 0 10px;
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 8px;
  color: var(--fg-4);
  font-size: 11.5px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.list-section-add-row:hover {
  color: var(--fg-2);
  border-color: var(--line-soft);
  background: var(--bg-1);
}
.list-row {
  display: grid;
  /* grid-template-columns is set inline based on visible columns */
  align-items: center;
  gap: 12px;
  padding-inline: 12px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
/* —— Row density —— */
.list-wrap[data-density="compact"]     .list-row { padding-block: 4px; }
.list-wrap[data-density="cozy"]        .list-row { padding-block: 8px; }
.list-wrap[data-density="comfortable"] .list-row { padding-block: 12px; }
/* —— Row rules (dividers) —— */
.list-wrap[data-rules="none"]   .list-row { border-bottom-color: transparent; }
.list-wrap[data-rules="soft"]   .list-row { border-bottom-color: var(--line-soft); }
.list-wrap[data-rules="strong"] .list-row { border-bottom-color: var(--line); }
/* —— Zebra striping —— */
.list-wrap[data-zebra="true"] .list-row:nth-child(odd) {
  background: color-mix(in oklch, var(--fg) 2.5%, transparent);
}
.list-wrap[data-zebra="true"] .list-row:nth-child(odd):hover {
  background: color-mix(in oklch, var(--fg) 5%, transparent);
}
.list-row .list-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .list-cell[data-col="title"] { overflow: hidden; text-overflow: ellipsis; }
.list-row .list-cell[data-col="labels"] { overflow: hidden; }

/* list column header + chips */
.list-col-header {
  position: sticky; top: 0;
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  z-index: 2;
  box-shadow: 0 1px 0 var(--line-soft);
}
.list-col-cell {
  position: relative;
  display: flex; align-items: center;
  min-width: 0;
  gap: 2px;
  padding-right: 10px; /* room for resize handle */
}
.list-col-resize {
  flex: 0 0 auto;
  width: 18px; height: 26px;
  cursor: col-resize;
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
  /* Push the handle to the right edge of the column cell so it visually
     sits at the actual column boundary (not tucked against the chip). */
  margin-left: auto;
}
.list-col-resize::before {
  content: "";
  width: 3px; height: 18px;
  background: var(--line);
  border-radius: 2px;
  transition: background 120ms ease, width 120ms ease, height 120ms ease;
}
.list-col-cell:hover .list-col-resize::before {
  background: var(--fg-3);
}
.list-col-resize:hover::before {
  background: var(--accent);
  width: 4px;
  height: 22px;
}
.list-col-resize:active::before {
  background: var(--accent);
  width: 4px;
  height: 22px;
}
/* Rightmost handle: always visible (not hover-only) and tinted so users can
   see the end of the table and discover that it also resizes the list pane. */
.list-col-resize-last::before {
  background: var(--fg-4);
  height: 22px;
}
.list-col-resize-last:hover::before,
.list-col-resize-last:active::before {
  background: var(--accent);
}
.list-col-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px 4px 9px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg);
  cursor: grab;
  user-select: none;
  font-family: var(--font-mono);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.list-col-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.list-col-chip > .list-col-remove { flex: 0 0 auto; }
.list-col-chip:hover {
  background: color-mix(in oklch, var(--accent) 14%, var(--bg-3));
  border-color: color-mix(in oklch, var(--accent) 40%, var(--line));
  color: var(--fg);
}
.list-col-chip[data-dragging="true"] { opacity: 0.4; }
.list-col-chip:active { cursor: grabbing; }

/* Icon-only variant (e.g. Completed column header) — tighter padding, no */
/* uppercase tracking, checkmark uses the green status color. */
.list-col-chip-icon {
  padding: 4px 4px 4px 6px;
  gap: 2px;
}
.list-col-chip-checkglyph {
  display: inline-flex; align-items: center; justify-content: center;
  color: oklch(70% 0.16 150);
}
.list-col-chip-icon:hover .list-col-chip-checkglyph {
  color: oklch(76% 0.17 150);
}
.list-col-remove {
  width: 15px; height: 15px;
  border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-3);
  font-size: 14px; line-height: 1;
  background: transparent; border: none;
  cursor: pointer;
  margin-left: 2px;
}
.list-col-remove:hover { background: oklch(68% 0.18 20 / 0.2); color: oklch(68% 0.18 20); }
.list-col-drop-line {
  position: absolute;
  left: -6px; top: 2px; bottom: 2px;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 6px color-mix(in oklch, var(--accent) 40%, transparent);
}
.list-col-add {
  width: 28px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px;
  border: 1px dashed var(--line);
  background: var(--bg-2);
  color: var(--fg-3);
  cursor: pointer;
  position: relative;
}
.list-col-add:hover {
  background: color-mix(in oklch, var(--accent) 12%, var(--bg-2));
  color: var(--accent);
  border-style: solid;
  border-color: var(--accent);
}

/* Reset-widths button — appears next to the width picker when the user has
   resized any columns. Clicking clears all widths so columns snap back to
   their declared defaults. */
.list-reset-widths {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg-1);
  color: var(--fg-3);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 140ms, color 140ms, background 140ms;
}
.list-reset-widths:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-1));
}
.list-col-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-2);
  padding: 4px;
  min-width: 160px;
  z-index: 20;
}
.list-col-menu-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-4);
  padding: 6px 8px 4px;
}
.list-col-menu-item {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 5px 8px;
  font-size: 12px;
  color: var(--fg-2);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
}
.list-col-menu-item:hover { background: var(--bg-2); color: var(--fg); }
.list-col-menu-empty {
  font-size: 11px;
  color: var(--fg-4);
  padding: 6px 8px;
}
.list-row:hover { background: var(--bg-1); }

/* ——— Bulk-select checkbox in list rows ———
   The first column of every list row is a bulk-selection checkbox (matches
   the grid-view multi-select UX). We use BLUE (distinct from the green
   completion checkbox) so selection and completion are never visually
   confused. Hidden until hover or active selection. */
.list-row .card-check.list-row-select,
.list-col-header .list-select-all {
  --select-blue: oklch(65% 0.18 255);
  position: static;
  width: 14px; height: 14px;
  top: auto; right: auto;
  box-shadow: none;
  opacity: 0;
  transform: none;
  transition: opacity 140ms ease, background 140ms, border-color 140ms, color 140ms;
  align-self: center;
  justify-self: center;
  background: var(--bg-1);
  border: 1.5px solid var(--fg-4);
  border-radius: 4px;
  color: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.list-row:hover .card-check.list-row-select,
.list-row .card-check.list-row-select[data-selected="true"],
.list-row:focus-within .card-check.list-row-select,
.list-col-header:hover .list-select-all,
.list-col-header .list-select-all[data-all],
.list-col-header .list-select-all[data-some] {
  opacity: 1;
}
.list-row .card-check.list-row-select .card-check-svg,
.list-col-header .list-select-all svg { width: 10px; height: 10px; overflow: visible; }

/* Blue hover preview — fades in the check in blue so users know "this will select" */
.list-row .card-check.list-row-select:hover:not([data-selected="true"]) .card-check-svg path,
.list-col-header .list-select-all:hover:not([data-all]):not([data-some]) svg path {
  stroke-dashoffset: 0;
  stroke: var(--select-blue);
  opacity: 0.55;
  transition: stroke-dashoffset 220ms ease-out, opacity 160ms ease;
}
.list-row .card-check.list-row-select:hover,
.list-col-header .list-select-all:hover {
  border-color: var(--select-blue);
  background: color-mix(in oklch, var(--select-blue) 12%, var(--bg-1));
}

/* Selected state — filled BLUE box with a white check */
.list-row .card-check.list-row-select[data-selected="true"],
.list-col-header .list-select-all[data-all],
.list-col-header .list-select-all[data-some] {
  background: var(--select-blue);
  border-color: var(--select-blue);
  color: #fff;
}
.list-row .card-check.list-row-select[data-selected="true"] .card-check-svg path,
.list-col-header .list-select-all[data-all] svg path,
.list-col-header .list-select-all[data-some] svg path {
  stroke-dashoffset: 0;
  stroke: currentColor;
  opacity: 1;
}

/* Row highlight when selected — subtle BLUE wash (not green) */
.list-row[data-selected="true"] {
  background: color-mix(in oklch, oklch(65% 0.18 255) 9%, var(--bg-1));
  box-shadow: inset 2px 0 0 oklch(65% 0.18 255);
}

/* ——— "Done" column cell — reuses .card-check completion button ———
   Same animated green check + pale-green hover preview as the grid card.
   Unlike the grid card (where the checkbox is absolutely positioned and
   only appears on hover), in the list we keep it visible at all times so
   the column has a consistent affordance. */
.list-row .card-check.list-cell-check {
  position: static;
  width: 14px; height: 14px;
  top: auto; right: auto;
  box-shadow: none;
  opacity: 1;
  transform: none;
  transition: background 140ms, border-color 140ms, color 140ms;
  align-self: center;
}
.list-row .card-check.list-cell-check .card-check-svg { width: 10px; height: 10px; }

.list-row .idm { font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); }
.list-row .title { font-size: 13px; color: var(--fg); font-family: var(--font-card-title, var(--font-sans)); }
.list-row[data-done="true"] .title { text-decoration: line-through; color: var(--fg-4); }

/* time strip at bottom */
.time-strip {
  position: fixed;
  right: 230px; bottom: 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 14px 4px 4px;
  display: flex; align-items: center; gap: 10px;
  font-size: 11px;
  box-shadow: var(--shadow-2);
  z-index: 80;
}
.time-strip .avatar {
  width: 26px; height: 26px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  display: flex; align-items: center; justify-content: center;
  color: var(--bg); font-weight: 600; font-size: 10px;
  font-family: var(--font-mono);
}
.time-strip .what { color: var(--fg-2); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.time-strip .elapsed {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.02em;
  min-width: 54px;
  text-align: right;
}
.time-strip .stop {
  width: 22px; height: 22px; border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 20%, transparent);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}

/* floating motion hint arrow for first-time users */
.hint-layer {
  position: absolute; inset: 0; pointer-events: none;
  overflow: hidden;
}

/* comment popover */
.comments-pop {
  position: fixed;
  width: 320px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  z-index: 150;
  overflow: hidden;
}
.comments-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.comments-head .close { margin-left: auto; color: var(--fg-4); }
.comments-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow: auto; }
.comment { display: flex; gap: 8px; }
.comment .av { width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0; font-size: 9px; font-weight: 600; display: flex; align-items: center; justify-content: center; color: white; }
.comment .body { flex: 1; min-width: 0; }
.comment .who { font-size: 11px; font-weight: 600; display: flex; gap: 6px; align-items: baseline; }
.comment .when { color: var(--fg-4); font-family: var(--font-mono); font-size: 10px; font-weight: 400; }
.comment .text { font-size: 12px; color: var(--fg-2); margin-top: 2px; line-height: 1.4; }

.comments-input {
  border-top: 1px solid var(--line-soft);
  padding: 8px 10px;
  display: flex; gap: 6px; align-items: center;
  background: var(--bg-2);
}
.comments-input input {
  flex: 1; font-size: 12px;
}
.comments-input .send {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--accent);
  padding: 3px 8px;
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  border-radius: 4px;
}

/* ghost during drag */
.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.95;
  transform: rotate(-1.5deg);
  box-shadow: var(--shadow-pop);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* entering animation — applied only to freshly-added items (e.g. newly-
   created card or group via the `is-entering` class). Previously this
   was applied to every `.card` and `.group`, but any re-render would
   restart the animation; because Babel re-runs often in preview, the
   animation could get stuck at t=0 (opacity: 0) making ALL cards
   invisible. Scope it to newly-entered items only. */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.group.is-entering, .card.is-entering { animation: slideIn 240ms ease-out forwards; }

/* hint arrow */
.motion-hint {
  position: fixed;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  pointer-events: none;
  opacity: 0;
  animation: hintFade 4s ease-in-out 1s both;
  z-index: 90;
  display: flex; align-items: center; gap: 6px;
}
@keyframes hintFade {
  0%, 100% { opacity: 0; }
  15%, 85% { opacity: 1; }
}

/* ========== INITIATIVE DRAWER (now modal) ========== */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: color-mix(in oklch, var(--bg-0) 65%, transparent);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 2vw;
  animation: drawerFade 180ms ease-out;
}
@keyframes drawerFade { from { opacity: 0; } to { opacity: 1; } }
.drawer {
  position: relative;
  width: 900px; max-width: 96vw; max-height: 92vh;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 80px -12px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.25);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: drawerPop 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes drawerPop {
  from { transform: scale(0.97) translateY(6px); opacity: 0.4; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.drawer-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-1);
  flex-shrink: 0;
}
.drawer-hdr-btn {
  width: 28px; height: 28px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-3);
}
.drawer-hdr-btn:hover { background: var(--bg-2); color: var(--fg); }

.drawer-hdr-action {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; height: 28px; border-radius: 5px;
  font-size: 11.5px; color: var(--fg-3);
  background: transparent;
  transition: background 120ms, color 120ms;
}
.drawer-hdr-action:hover { background: var(--bg-2); color: var(--fg); }
.drawer-hdr-action-danger { color: oklch(70% 0.15 25); }
.drawer-hdr-action-danger:hover {
  background: color-mix(in oklch, oklch(70% 0.17 25) 14%, transparent);
  color: oklch(76% 0.17 25);
}

.status-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  font-size: 11px; color: var(--fg-2);
}
.status-chip .dot { width: 7px; height: 7px; border-radius: 999px; }

.drawer-body {
  flex: 1; overflow-y: auto;
  padding: 18px 22px 80px;
  display: flex; flex-direction: column; gap: 18px;
}

.drawer-title-input {
  width: 100%;
  flex: 0 0 auto;
  min-height: 32px;
  background: transparent;
  color: var(--fg-2);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  border: none; outline: none; resize: none;
  padding: 0; margin: 0;
  font-family: var(--font-ui);
}
.drawer-title-input::placeholder { color: var(--fg-5); opacity: 0.35; font-weight: 400; }
.drawer-title-input:focus { color: var(--fg); }

.drawer-props {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.drawer-date {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-2); font-size: 12px;
  padding: 4px 8px; border-radius: 5px;
  font-family: var(--font-mono);
  color-scheme: dark;
}
[data-theme="light"] .drawer-date { color-scheme: light; }
.drawer-date:hover { background: var(--bg-2); border-color: var(--line-soft); }
.drawer-date:focus { background: var(--bg-2); border-color: var(--accent); outline: none; }

.drawer-section {
  display: flex; flex-direction: column; gap: 8px;
}
.drawer-section-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-4); font-weight: 600;
}
.drawer-section-head .muted { color: var(--fg-5); font-weight: 400; }

.drawer-add-row {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 5px;
  color: var(--fg-4); font-size: 12px;
  background: transparent;
  align-self: flex-start;
  transition: all 120ms;
}
.drawer-add-row:hover { background: var(--bg-2); color: var(--fg-2); }

.drawer-upload {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; border-radius: 8px;
  border: 1.5px dashed var(--line);
  color: var(--fg-4); cursor: pointer;
  transition: all 120ms;
}
.drawer-upload:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in oklch, var(--accent) 5%, transparent); }

.drawer-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 4px;
}
.drawer-tabs button {
  padding: 8px 4px; margin-right: 14px;
  font-size: 12px; color: var(--fg-4);
  border-bottom: 2px solid transparent;
  background: transparent; border-radius: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500;
  transition: all 120ms;
}
.drawer-tabs button:hover { color: var(--fg-2); }
.drawer-tabs button[data-active="true"] {
  color: var(--fg); border-bottom-color: var(--accent);
}
.drawer-tabs button .muted {
  font-size: 10.5px; color: var(--fg-5); font-family: var(--font-mono);
  padding: 1px 5px; background: var(--bg-2); border-radius: 3px;
}

.drawer-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-1);
  flex-shrink: 0;
}
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 500;
  transition: all 120ms;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast, #fff);
  font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-ghost {
  color: var(--fg-2); background: transparent;
  padding: 7px 12px; border-radius: 6px; font-size: 12px;
}
.btn-ghost:hover { background: var(--bg-2); color: var(--fg); }

/* rich-text editable */
.rt-editable[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--fg-5);
  opacity: 0.6;
  pointer-events: none;
}
.rt-editable p { margin: 0 0 8px; }
.rt-editable p:last-child { margin-bottom: 0; }
.rt-editable ul, .rt-editable ol { margin: 6px 0; padding-left: 22px; }
.rt-editable h2 { font-size: 16px; font-weight: 600; margin: 8px 0 4px; letter-spacing: -0.01em; }
.rt-editable blockquote {
  margin: 6px 0; padding: 4px 10px;
  border-left: 3px solid var(--line);
  color: var(--fg-3); font-style: italic;
}
.rt-editable pre {
  background: var(--bg-3); padding: 8px 10px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 12px;
  overflow-x: auto; margin: 6px 0;
  color: var(--fg-2);
}
.rt-editable code { font-family: var(--font-mono); font-size: 12px; background: var(--bg-3); padding: 1px 4px; border-radius: 3px; }
.rt-editable a { color: var(--accent); text-decoration: underline; }
.rt-editable img { max-width: 100%; height: auto; border-radius: 4px; margin: 4px 0; }

/* card hover — signal clickability */
.card { cursor: pointer; }
.card:hover { border-color: color-mix(in oklch, var(--accent) 25%, var(--line)); }

/* ========== COMPLETED / ARCHIVED CARD STATES ========== */

/* Hover checkbox in top-right of card — SQUARE, not round */
.card-check {
  position: absolute;
  top: 8px; right: 8px;
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--fg-4);
  background: var(--bg-1);
  box-shadow: 0 0 0 3px var(--bg-1);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  opacity: 0;
  transform: translateX(3px);
  transition: opacity 420ms cubic-bezier(.3,.7,.4,1),
              transform 420ms cubic-bezier(.3,.7,.4,1),
              background 200ms, border-color 200ms, color 200ms;
  z-index: 2;
  cursor: pointer;
  overflow: hidden;
}
.card:hover .card-check { opacity: 1; transform: translateX(0); transition-delay: 140ms; }
.card-check:hover {
  border-color: oklch(70% 0.16 150);
  background: color-mix(in oklch, oklch(70% 0.16 150) 14%, var(--bg-1));
}

/* The checkmark SVG — stroke-dash animates on completion */
.card-check-svg {
  width: 12px; height: 12px;
  overflow: visible;
}
.card-check-svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 180ms ease-out;
}
.card-check[data-completed="true"] {
  opacity: 1;
  background: oklch(70% 0.16 150);
  border-color: oklch(70% 0.16 150);
  color: oklch(14% 0.01 250);
}
.card-check[data-completed="true"] .card-check-svg path {
  stroke-dashoffset: 0;
}

/* Hover preview — show a faded green check so users know what will happen.
   Suppressed while the completion animations are running or already complete. */
.card-check:hover:not([data-completed="true"]) .card-check-svg path {
  stroke-dashoffset: 0;
  stroke: oklch(70% 0.16 150);
  opacity: 0.55;
  transition: stroke-dashoffset 220ms ease-out, opacity 160ms ease;
}
.card.is-checked .card-check:hover .card-check-svg path,
.card.is-unchecked .card-check:hover .card-check-svg path,
.card.is-leaving .card-check:hover .card-check-svg path,
.list-row.is-checked .card-check:hover .card-check-svg path,
.list-row.is-unchecked .card-check:hover .card-check-svg path,
.list-row.is-leaving .card-check:hover .card-check-svg path {
  opacity: 1;
}

/* ========== CARD COMPLETION ANIMATIONS (clean) ========== */
/*
   Two-step flow, no horizontal motion:
     1. `.is-checked`   — checkbox fills green + check draws in (savored beat)
     2. `.is-leaving`   — card collapses height + fades out
   Uncomplete mirrors it with `.is-unchecked` -> `.is-leaving`.
*/

/* Force the checkbox visible + green while checked/leaving */
.card.is-checked .card-check,
.card.is-leaving[data-completed="true"] .card-check,
.list-row.is-checked .card-check,
.list-row.is-leaving[data-completed="true"] .card-check {
  opacity: 1;
  transform: translateX(0);
  background: oklch(70% 0.16 150);
  border-color: oklch(70% 0.16 150);
  color: oklch(14% 0.01 250);
}
.card.is-checked .card-check,
.list-row.is-checked .card-check {
  animation: checkbox-pop 280ms cubic-bezier(.3,1.5,.5,1);
}
.card.is-checked .card-check-svg path,
.list-row.is-checked .card-check-svg path {
  stroke-dashoffset: 0;
}

/* Unchecked (uncomplete) — checkbox empties out */
.card.is-unchecked .card-check,
.list-row.is-unchecked .card-check {
  opacity: 1;
  transform: translateX(0);
  background: var(--bg-1);
  border-color: var(--fg-4);
  color: transparent;
}
.card.is-unchecked .card-check-svg path,
.list-row.is-unchecked .card-check-svg path {
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 180ms ease-in;
}

@keyframes checkbox-pop {
  0%   { transform: scale(1)   translateX(0); }
  45%  { transform: scale(1.22) translateX(0); }
  100% { transform: scale(1)   translateX(0); }
}

/* While leaving, the card is about to be removed — disable interactions.
   The JS sets inline height/opacity/padding/margin transitions; we just
   make sure pointer events are off and content doesn't spill. */
.card.is-leaving,
.list-row.is-leaving {
  pointer-events: none;
  overflow: hidden;
}

/* ========== TOAST STACK (completion confirmations) ========== */
.toast-stack {
  position: fixed;
  left: 16px; bottom: 16px;
  display: flex; flex-direction: column-reverse; gap: 8px;
  z-index: 9000;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px 9px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 40px -12px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02);
  min-width: 320px;
  max-width: 440px;
  font-size: 12.5px;
  color: var(--fg);
  pointer-events: auto;
  animation: toast-in 280ms cubic-bezier(.3,1.4,.5,1);
}
@keyframes toast-in {
  0%   { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
.toast-check {
  width: 20px; height: 20px;
  border-radius: 999px;
  background: oklch(70% 0.16 150);
  color: oklch(14% 0.01 250);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.toast-body { flex: 1; min-width: 0; }
.toast-title {
  font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.06em;
  color: oklch(70% 0.16 150); text-transform: uppercase;
  margin-bottom: 1px;
}
.toast-sub {
  font-size: 12.5px; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.toast-action {
  font-size: 11.5px; font-weight: 500;
  padding: 4px 8px; border-radius: 5px;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--line-soft);
  flex: 0 0 auto;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.toast-action:hover {
  background: var(--bg-3);
  color: var(--fg);
  border-color: var(--line);
}
.toast-close {
  padding: 4px; border-radius: 4px;
  color: var(--fg-4); background: transparent; border: none;
}
.toast-close:hover { color: var(--fg); background: var(--bg-3); }

/* Undo toasts use an explicit blue treatment by default (not var(--accent),
   since this workspace's accent is green). This signals "pending-reversible"
   rather than "already complete". The restored state below flips to green
   + check once the user has actually pulled the trigger. */
.toast[data-kind="undo"] .toast-check {
  background: oklch(68% 0.15 240);
  color: oklch(14% 0.01 250);
}
.toast[data-kind="undo"] .toast-title {
  color: oklch(74% 0.14 240);
}

/* Restored state — fires when user clicks Undo or presses Ctrl+Z. The
   toast layout stays the same; the Undo button swaps to a green "Restored
   ✓" badge with an animated check, the icon on the left flips to green,
   and the whole thing auto-dismisses after ~1.7s. */
.toast[data-restored] {
  border-color: color-mix(in oklch, oklch(70% 0.16 150) 35%, var(--line));
  animation: toast-restored-fade 1700ms ease-out forwards;
}
.toast[data-restored] .toast-check {
  background: oklch(70% 0.16 150);
  color: oklch(14% 0.01 250);
  animation: toast-restored-pop 420ms cubic-bezier(.3,1.6,.5,1);
}
.toast[data-restored] .toast-title {
  color: oklch(70% 0.16 150);
}
.toast-check-glyph {
  animation: toast-check-draw 360ms ease-out;
}
.toast-restored-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 5px;
  font-size: 11.5px; font-weight: 500;
  color: oklch(78% 0.14 150);
  background: color-mix(in oklch, oklch(70% 0.16 150) 16%, transparent);
  border: 1px solid color-mix(in oklch, oklch(70% 0.16 150) 40%, var(--line));
  flex: 0 0 auto;
  animation: toast-restored-badge-in 320ms cubic-bezier(.3,1.5,.5,1);
}
.toast-restored-check {
  color: oklch(78% 0.14 150);
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  animation: toast-check-draw 380ms ease-out forwards 80ms;
}
@keyframes toast-restored-pop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes toast-restored-badge-in {
  0%   { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes toast-check-draw {
  0%   { stroke-dashoffset: 14; }
  100% { stroke-dashoffset: 0;  }
}
@keyframes toast-restored-fade {
  0%, 75% { opacity: 1; transform: translateY(0); }
  100%    { opacity: 0; transform: translateY(4px); }
}

/* Sidebar row pulse when a completion lands */
.sb-item.pulse-complete {
  animation: sb-pulse 800ms ease-out;
  position: relative;
}
@keyframes sb-pulse {
  0%   { background: transparent; }
  25%  { background: color-mix(in oklch, oklch(70% 0.16 150) 30%, transparent); }
  100% { background: transparent; }
}
.sb-item.pulse-complete .sb-count { animation: sb-count-bump 600ms cubic-bezier(.3,1.6,.5,1); }
@keyframes sb-count-bump {
  0%   { transform: scale(1);  color: inherit; }
  40%  { transform: scale(1.35); color: oklch(70% 0.16 150); }
  100% { transform: scale(1);  color: inherit; }
}

/* Respect reduced-motion — drop the flair; JS takes the no-anim path */
@media (prefers-reduced-motion: reduce) {
  .card.is-checked .card-check,
  .card.is-unchecked .card-check {
    animation: none !important;
  }
  .sb-item.pulse-complete { animation: none; }
}
.card .card-title { padding-right: 0; }
.card:not(:hover):not([data-completed="true"]):not([data-archived="true"]) .card-title { padding-right: 0; }

/* Completed card — strike title, dim, green hairline */
.card[data-completed="true"] {
  opacity: 0.7;
  background: color-mix(in oklch, oklch(70% 0.16 150) 4%, var(--bg-2));
  border-color: color-mix(in oklch, oklch(70% 0.16 150) 22%, var(--line-soft));
}
.card[data-completed="true"] .card-title {
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklch, oklch(70% 0.16 150) 60%, transparent);
  color: var(--fg-3);
  padding-right: 22px;
}
.card[data-completed="true"]:hover {
  opacity: 0.95;
  background: color-mix(in oklch, oklch(70% 0.16 150) 7%, var(--bg-2));
}

/* Archived card — desaturated, dashed border, non-draggable */
.card[data-archived="true"] {
  opacity: 0.48;
  background: var(--bg-1);
  border: 1px dashed var(--line);
  cursor: pointer;
  filter: grayscale(0.55);
}
.card[data-archived="true"] .card-title { padding-right: 0; color: var(--fg-3); }
.card[data-archived="true"]:hover {
  opacity: 0.85;
  border-color: var(--fg-4);
  filter: grayscale(0.25);
}
.card[data-archived="true"] .card-check { display: none; }
.card[data-archived="true"] .card-title { padding-right: 0; }
.card[data-archived="true"] { cursor: pointer; }

/* Small inline state badge on card (replaces priority chip) */
.card-state-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.card-state-badge[data-state="completed"] {
  color: oklch(70% 0.16 150);
  background: color-mix(in oklch, oklch(70% 0.16 150) 14%, transparent);
  border-color: color-mix(in oklch, oklch(70% 0.16 150) 30%, transparent);
}
.card-state-badge[data-state="archived"] {
  color: var(--fg-3);
  background: var(--bg-3);
  border-color: var(--line-soft);
}

/* Row of restore buttons at bottom of completed/archived cards (visible on hover) */
.card-restore-row {
  position: absolute;
  left: 8px; top: 8px;
  opacity: 0;
  transition: opacity 120ms;
  display: flex; gap: 4px;
  z-index: 2;
}
.card:hover .card-restore-row { opacity: 1; }
.card-restore {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 4px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 10px; letter-spacing: 0.02em; font-family: var(--font-mono);
  transition: background 120ms, color 120ms, border-color 120ms;
}
.card-restore:hover {
  background: var(--accent);
  color: oklch(14% 0.01 250);
  border-color: var(--accent);
}

/* Drawer state-chip beside status-chip */
.state-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.02em;
  border: 1px solid transparent;
  margin-left: 4px;
}
.state-chip[data-state="completed"] {
  color: oklch(70% 0.16 150);
  background: color-mix(in oklch, oklch(70% 0.16 150) 14%, transparent);
  border-color: color-mix(in oklch, oklch(70% 0.16 150) 35%, transparent);
}
.state-chip[data-state="archived"] {
  color: var(--fg-2);
  background: var(--bg-3);
  border-color: var(--line);
}

/* Drawer "Mark complete" / "Reopen" gets a green tint when active */
.drawer-hdr-action[data-complete="true"] {
  color: oklch(70% 0.16 150);
  background: color-mix(in oklch, oklch(70% 0.16 150) 10%, transparent);
}
.drawer-hdr-action[data-complete="true"]:hover {
  background: color-mix(in oklch, oklch(70% 0.16 150) 18%, transparent);
  color: oklch(76% 0.17 150);
}

/* View segmented control — give Completed/Archived/All a subtle tint when active */
.seg button[data-view="completed"][data-active="true"] {
  color: oklch(70% 0.16 150);
  background: color-mix(in oklch, oklch(70% 0.16 150) 14%, var(--bg-3));
}
.seg button[data-view="archived"][data-active="true"] {
  color: var(--fg-2);
}

/* ———————————————————— Views (Today, Inbox, Notes, Time) ———————————————————— */
.view {
  padding: 32px 40px 80px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.view-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 24px;
}
.view-head h1 {
  font-size: 28px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  line-height: 1.1;
}
.view-sub {
  font-size: 13px;
  color: var(--fg-3);
  margin: 0;
  font-family: var(--font-mono);
}

/* Today — stats row */
.today-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.stat-tile {
  padding: 18px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-tile.tone-accent { border-color: color-mix(in oklch, var(--accent) 40%, var(--line)); }
.stat-tile.tone-warn { border-color: color-mix(in oklch, oklch(70% 0.17 25) 40%, var(--line)); }
.stat-value {
  font-size: 28px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--fg);
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat-tile.tone-accent .stat-value { color: var(--accent); }
.stat-tile.tone-warn .stat-value { color: oklch(72% 0.17 25); }
.stat-label {
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Today — grid of sections */
.today-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.today-section {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.today-section.span-2 { grid-column: span 2; }
.today-section.tone-warn { border-color: color-mix(in oklch, oklch(70% 0.17 25) 30%, var(--line)); }
.today-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.today-section-head h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
  margin: 0;
}
.today-section-count {
  font-size: 11px;
  color: var(--fg-4);
  font-family: var(--font-mono);
  background: var(--bg-3);
  padding: 1px 7px;
  border-radius: 10px;
}
.today-section-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 40px;
}
.today-empty {
  font-size: 12px;
  color: var(--fg-4);
  padding: 8px 0;
  font-style: italic;
}

/* Mini-card row (shared across views) */
.mini-card {
  all: unset;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--fg);
  transition: background 120ms;
  border: 1px solid transparent;
}
.mini-card:hover { background: var(--bg-3); }
.mini-card-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.mini-card-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.mini-pri {
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 500;
}
.mini-pri.pri-p1 { background: color-mix(in oklch, oklch(72% 0.17 25) 20%, transparent); color: oklch(80% 0.14 25); }
.mini-pri.pri-p2 { background: color-mix(in oklch, oklch(78% 0.14 70) 20%, transparent); color: oklch(82% 0.12 70); }
.mini-pri.pri-p4 { background: var(--bg-3); color: var(--fg-4); }
.mini-due {
  font-size: 10.5px;
  color: var(--fg-4);
  font-family: var(--font-mono);
}
.timer-row {
  border: 1px solid var(--line-soft);
  background: var(--bg-3);
}
.timer-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}
.timer-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 10px;
  background: color-mix(in oklch, var(--accent) 15%, transparent);
}

/* ———————————————————— Inbox ———————————————————— */
.inbox-filters {
  margin-bottom: 16px;
}
.inbox-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.inbox-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--fg-3);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.inbox-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 120ms;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.inbox-item:last-child { border-bottom: none; }
.inbox-item:hover { background: var(--bg-3); }
.inbox-item.unread { background: color-mix(in oklch, var(--accent) 4%, transparent); }
.inbox-item.unread:hover { background: color-mix(in oklch, var(--accent) 8%, var(--bg-3)); }
.inbox-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  color: var(--fg-2);
  background: var(--bg-3);
}
.inbox-icon.type-mention   { background: color-mix(in oklch, oklch(70% 0.16 270) 20%, transparent); color: oklch(78% 0.12 270); }
.inbox-icon.type-assigned  { background: color-mix(in oklch, var(--accent) 18%, transparent); color: var(--accent); }
.inbox-icon.type-watching  { background: color-mix(in oklch, oklch(72% 0.14 60) 18%, transparent); color: oklch(80% 0.12 60); }
.inbox-icon.type-due       { background: color-mix(in oklch, oklch(72% 0.17 25) 18%, transparent); color: oklch(80% 0.14 25); }
.inbox-body { flex: 1; min-width: 0; }
.inbox-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--fg-3);
  margin-bottom: 2px;
}
.inbox-who { color: var(--fg); font-weight: 500; font-size: 12px; }
.inbox-task {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-4);
  padding: 1px 5px;
  background: var(--bg-3);
  border-radius: 3px;
}
.inbox-when { margin-left: auto; font-size: 10.5px; color: var(--fg-4); font-family: var(--font-mono); }
.inbox-text {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.45;
}
.inbox-item.unread .inbox-text { color: var(--fg); }
.inbox-dot {
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}

/* ———————————————————— Notes ———————————————————— */
.note-compose {
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  max-width: 600px;
}
.note-title-input,
.note-body-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  color: inherit;
}
.note-title-input {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  padding: 2px 0;
}
.note-body-input {
  font-size: 13px;
  line-height: 1.5;
  resize: none;
}
.note-compose-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.note-swatches { display: flex; gap: 4px; }
.note-swatch {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.12);
  cursor: pointer;
  padding: 0;
  transition: transform 120ms;
}
.note-swatch:hover { transform: scale(1.15); }
.note-swatch[data-active="true"] { border-color: rgba(0,0,0,0.5); transform: scale(1.15); }

.notes-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-4);
  font-weight: 500;
  margin: 20px 0 10px;
}
.notes-section-label:first-child { margin-top: 0; }
.notes-grid {
  columns: 4 220px;
  column-gap: 12px;
}
.note-card {
  break-inside: avoid;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: transform 150ms, box-shadow 150ms;
}
.note-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.14);
}
.note-pin {
  position: absolute;
  top: 8px; right: 8px;
  background: transparent;
  border: none;
  padding: 4px;
  border-radius: 4px;
  color: currentColor;
  opacity: 0;
  cursor: pointer;
  transition: opacity 120ms, background 120ms;
}
.note-card:hover .note-pin { opacity: 0.5; }
.note-pin:hover { opacity: 1 !important; background: rgba(0,0,0,0.08); }
.note-pin.active { opacity: 1; }
.note-card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  padding-right: 24px;
}
.note-card-body {
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.note-card-foot {
  display: flex;
  align-items: center;
  margin-top: 4px;
  font-size: 10.5px;
  opacity: 0.55;
}
.note-ts { flex: 1; font-family: var(--font-mono); }
.note-del {
  background: transparent;
  border: none;
  cursor: pointer;
  color: currentColor;
  opacity: 0;
  padding: 2px;
  border-radius: 3px;
}
.note-card:hover .note-del { opacity: 0.6; }
.note-del:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.notes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 80px 20px;
  color: var(--fg-3);
  font-size: 13px;
  text-align: center;
}

/* ———————————————————— Time ———————————————————— */
.time-week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 28px 20px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 24px;
  min-height: 220px;
  align-items: end;
}
.time-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.time-day-bar-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 140px;
}
.time-day-bar {
  width: 60%;
  min-height: 6px;
  background: linear-gradient(180deg, var(--accent), color-mix(in oklch, var(--accent) 60%, var(--bg-2)));
  border-radius: 4px 4px 0 0;
  transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.time-day-value {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--fg);
  font-weight: 500;
}
.time-day-label {
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.time-rollup {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
}
.time-rollup-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.time-rollup-head h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}
.time-rollup-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.time-row {
  all: unset;
  display: grid;
  grid-template-columns: 10px 1fr 200px 60px 40px;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  transition: background 120ms;
}
.time-row:hover { background: var(--bg-3); }
.time-row-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.time-row-title {
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.time-row-bar-wrap {
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
}
.time-row-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 300ms;
}
.time-row-dur {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  text-align: right;
}
.time-row-pct {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-4);
  text-align: right;
}

/* ———————————————————— Search Palette (Cmd+K) ———————————————————— */
.palette-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.48);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  animation: palette-fade-in 140ms ease-out;
}
@keyframes palette-fade-in {
  from { opacity: 0; } to { opacity: 1; }
}
.palette {
  width: min(620px, 92vw);
  max-height: 70vh;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: palette-pop-in 160ms cubic-bezier(0.3, 0.9, 0.3, 1);
}
@keyframes palette-pop-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.palette-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--fg-3);
}
.palette-input-row input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--fg);
  font-family: var(--font-sans);
}
.palette-input-row input::placeholder { color: var(--fg-4); }
.palette-input-row kbd {
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}
.palette-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.palette-empty, .palette-hint {
  padding: 24px 20px;
  color: var(--fg-3);
  font-size: 13px;
  text-align: center;
}
.palette-group { padding: 4px 8px 6px; }
.palette-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-4);
  padding: 6px 12px 4px;
  font-weight: 500;
}
.palette-row {
  all: unset;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.palette-row.active { background: var(--bg-3); }
.palette-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.palette-icon {
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
}
.palette-av {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: white;
  font-family: var(--font-mono);
}
.palette-title {
  flex: 1;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-4);
  flex-shrink: 0;
}
.palette-foot {
  padding: 10px 18px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  color: var(--fg-4);
  font-family: var(--font-mono);
}
.palette-foot kbd {
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 2px;
}

/* Responsive for narrower panes */
@media (max-width: 900px) {
  .today-stats { grid-template-columns: repeat(2, 1fr); }
  .today-grid { grid-template-columns: 1fr; }
  .today-section.span-2 { grid-column: auto; }
  .time-row { grid-template-columns: 10px 1fr 100px 50px; }
  .time-row-pct { display: none; }
}

/* ============================================================
   PHASE 2 — Context menu, bulk select, kb help, breadcrumb dropdown
   ============================================================ */

/* ——— Context menu ——— */
.ctx-menu {
  position: fixed;
  z-index: 1000;
  min-width: 220px;
  padding: 6px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  animation: ctx-in 120ms ease-out;
}
@keyframes ctx-in {
  from { opacity: 0; transform: translateY(-2px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ctx-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--fg-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background 90ms ease;
}
.ctx-item:hover { background: var(--bg-2); color: var(--fg); }
.ctx-item:disabled { opacity: 0.4; cursor: not-allowed; }
.ctx-item[data-danger] { color: oklch(70% 0.16 25); }
.ctx-item[data-danger]:hover { background: color-mix(in oklch, oklch(70% 0.16 25) 14%, var(--bg-2)); color: oklch(80% 0.18 25); }
.ctx-icon { display: inline-flex; width: 13px; color: var(--fg-4); }
.ctx-item:hover .ctx-icon { color: currentColor; }
.ctx-label { flex: 1; }
.ctx-shortcut {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-5);
  letter-spacing: 0.02em;
}
.ctx-arrow { color: var(--fg-5); font-size: 14px; line-height: 1; }
.ctx-sep { height: 1px; background: var(--line-soft); margin: 4px 2px; }

/* ——— Bulk action bar ——— */
.bulk-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 2px 10px rgba(0,0,0,0.25);
  animation: bulk-in 200ms cubic-bezier(.4,0,.2,1);
}
@keyframes bulk-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.bulk-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.bulk-divider {
  width: 1px;
  align-self: stretch;
  background: var(--line-soft);
  margin: 2px 2px;
}
.bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11.5px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-2);
  border-radius: 6px;
  cursor: pointer;
  transition: background 90ms ease, color 90ms ease, border-color 90ms ease;
}
.bulk-btn:hover {
  background: var(--bg-2);
  color: var(--fg);
  border-color: var(--line-soft);
}
.bulk-btn[data-danger] { color: oklch(72% 0.15 25); }
.bulk-btn[data-danger]:hover { background: color-mix(in oklch, oklch(70% 0.16 25) 12%, var(--bg-2)); color: oklch(82% 0.18 25); border-color: color-mix(in oklch, oklch(70% 0.16 25) 30%, var(--line-soft)); }
.bulk-btn.ghost { color: var(--fg-4); }
.bulk-popover {
  position: absolute;
  left: 0;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  padding: 5px;
  min-width: 160px;
  z-index: 100;
}
.bulk-popover-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 12px;
  background: transparent;
  border: 0;
  color: var(--fg-2);
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
}
.bulk-popover-item:hover { background: var(--bg-2); color: var(--fg); }

/* ——— Card bulk-selected state ——— */
.card[data-selected] {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  background: color-mix(in oklch, var(--accent) 10%, var(--bg-2));
}
.card[data-selected] .card-check {
  opacity: 1;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-1);
}
.card[data-selected] .card-check-svg { opacity: 1; stroke-dashoffset: 0; }

/* ——— Keyboard shortcut help ——— */
.kbhelp { animation: modal-in 180ms cubic-bezier(.4,0,.2,1); }
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-2);
  white-space: nowrap;
}

/* ——— Breadcrumb dropdowns ——— */
.crumb-trigger {
  display: inline-flex;
  align-items: center;
  padding: 3px 6px;
  margin: -3px -2px;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  transition: background 100ms ease;
}
.crumb-trigger:hover { background: var(--bg-2); }
.crumb-trigger[data-open] { background: var(--bg-2); }
.crumb-trigger strong,
.crumb-trigger span { font: inherit; color: inherit; }
.crumb-popover {
  position: absolute;
  top: calc(100% + 4px);
  min-width: 200px;
  max-height: 360px;
  overflow: auto;
  padding: 5px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.45);
  z-index: 300;
  animation: ctx-in 120ms ease-out;
}
.crumb-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--fg-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.crumb-item:hover { background: var(--bg-2); color: var(--fg); }
.crumb-item[data-current] { background: color-mix(in oklch, var(--accent) 10%, transparent); color: var(--fg); }

/* ——— Focus area header ——— */
.focus-head { cursor: grab; }
.focus-head:active { cursor: grabbing; }
/* subtle hover hint the header is double-clickable */
.focus-head { position: relative; }
.focus-head::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
  transition: background 120ms ease;
}
.focus-head:hover::after { background: rgba(255,255,255,0.03); }

/* Danger variant of topbar-btn primary */
.topbar-btn.primary[data-danger] {
  background: oklch(62% 0.18 25);
  border-color: oklch(62% 0.18 25);
  color: white;
}
.topbar-btn.primary[data-danger]:hover {
  background: oklch(68% 0.2 25);
  border-color: oklch(68% 0.2 25);
}
.topbar-btn[data-danger] {
  color: oklch(72% 0.15 25);
}
.topbar-btn[data-danger]:hover {
  background: color-mix(in oklch, oklch(70% 0.16 25) 12%, var(--bg-2));
  color: oklch(82% 0.18 25);
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}


/* ---- Presence cluster (board header) ---- */
.presence { position: relative; margin-left: 8px; cursor: pointer; }
.presence-stack { display: inline-flex; align-items: center; }
.presence-avi {
  position: relative;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700;
  color: #fff;
  font-family: var(--font-mono);
  border: 2px solid var(--bg);
  margin-left: -6px;
  transition: transform 0.15s ease;
}
.presence-avi:first-child { margin-left: 0; }
.presence:hover .presence-avi { transform: translateY(-1px); }
.presence-avi.more {
  background: var(--bg-2);
  color: var(--fg-3);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0;
}
.presence-avi.sm { width: 26px; height: 26px; font-size: 10px; margin-left: 0; border-width: 0; }
.presence-dot {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: oklch(72% 0.15 150);
  border: 1.5px solid var(--bg);
}
.presence-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
  padding: 10px;
  z-index: 100;
  cursor: default;
}
.presence-pop-head { padding: 2px 2px 8px; }
.presence-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 2px;
}
.presence-row + .presence-row { border-top: 1px solid var(--line-soft); }


/* ---- User menu (sidebar footer popup) ---- */
.user-menu-wrap { position: relative; cursor: pointer; user-select: none; }
.user-menu-wrap:hover { background: var(--bg-1); }
.user-menu-pop {
  position: fixed;
  left: 12px;
  bottom: 64px;
  width: 240px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  padding: 6px;
  z-index: 1000;
  cursor: default;
}
.user-menu-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.user-menu-sep {
  padding: 8px 8px 4px;
  font-size: 9.5px;
  color: var(--fg-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-family: var(--font-mono);
}
.user-menu-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 7px 9px;
  font-size: 12.5px;
  color: var(--fg-2);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
}
.user-menu-item:hover { background: var(--bg-2); color: var(--fg); }
.user-menu-item .Icon, .user-menu-item svg { color: var(--fg-3); flex-shrink: 0; }


/* ================================================================
   RESPONSIVE POLISH — added in the "perfect everything" pass
   ================================================================ */

/* --- Utilities --- */
/* ========================================================================
   NOWRAP SYSTEM (single source of truth)
   Every element listed here is a single-line artifact. Wrapping them on
   whitespace produces jagged, unprofessional 2-line UIs at narrow widths.
   Containers that DO need to wrap are explicitly set to flex-wrap below.
   ======================================================================== */

/* Utility classes */
.nowrap { white-space: nowrap; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Single-line UI primitives --- */
.chip-btn, .chip-soft, .tag,
.pill-btn, button.pill, .btn-sm,
.back-link, a.back, .back-to,
.breadcrumb, .breadcrumb-item, .breadcrumbs a, .breadcrumbs span,
.crumbs a, .crumbs span,
.path-crumb, .path-crumbs > *,
.seg button, .seg-mini button, .segmented button,
.tab, .tabs button, .act-tabs button, .m-tab,
.filter-radio label, .filter-list button span, .filter-label,
.radio-row label,
.stat-card .stat-delta, .stat-card .stat-sub,
.stat-sub, .stat-meta, .stat-label, .sub-label,
.plan-value, .plan-label,
.side-row .k, .side-row .v,
.m-sub,
[data-nowrap="true"] { white-space: nowrap; }

/* --- Sidebar nav rows: truncate with ellipsis instead of wrapping --- */
.nav-item, .sb-item, .side-nav-item,
.settings-nav button, .settings-nav a,
.notif-nav button, .notif-nav a,
.acct-nav button, .acct-nav a,
.admin-nav button, .admin-nav a {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Notifications side rail: the icon+label row must stay on one line --- */
.notif-filter { white-space: nowrap; overflow: hidden; }
.notif-filter .left { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }

/* --- Admin metric cards: label + trend line must not wrap --- */
.metric-card .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric-card .trend { white-space: nowrap; }

/* --- Billing plan meta rows: "Billing cycle / Annual" etc. --- */
.plan-meta .row { white-space: nowrap; }
.plan-meta .row .l, .plan-meta .row .v { white-space: nowrap; }

/* --- Breadcrumb text: truncate individual segments if too long, never wrap ---
   NOTE: scoped to leaf crumb segments. The topbar's `.crumb` is a CONTAINER
   that wraps multiple BreadcrumbDropdown triggers — capping it at 240px clips
   later segments like "Homebase" at common widths. The topbar row itself is
   nowrap + absorbs extra space via .topbar-spacer, so the container sizes
   naturally. If an individual trigger gets too long we cap it at 220px. */
.breadcrumbs span, .breadcrumb-item, .path-crumb, .topbar .crumb-trigger {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px; vertical-align: middle;
}
.topbar .crumb { max-width: none; overflow: visible; flex-shrink: 0; }

/* --- Containers that SHOULD wrap their children as a group ---
   NOTE: .plan-meta on billing uses a grid-of-rows layout via billing-detail.css;
   do NOT flex-wrap it here. Only .plan-meta-row (horizontal stat rows) wraps. */
.plan-meta-row, .billing-meta-row { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.members-head, .section-head, .page-head, .page-title-row { flex-wrap: wrap; gap: 12px; min-width: 0; }
.meta-row, .card-meta { flex-wrap: wrap; }


/* ================================================================
   SUBTOOLBAR polish — helpers for icon-only seg + dividers
   ================================================================ */

.sub-divider { width: 1px; height: 18px; background: var(--line-soft); margin: 0 4px; flex-shrink: 0; }
.sub-label { font-size: 10px; color: var(--fg-4); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 2px; white-space: nowrap; flex-shrink: 0; }

.seg.seg-icons { padding: 2px; }
.seg.seg-icons button {
  width: 26px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.seg.seg-icons button svg { display: block; }

/* ================================================================
   Board: "+ Add focus area" affordances
   Two variants:
     .add-column-btn — at end of .columns flex row; creates a NEW column.
     .add-group-btn  — at bottom of a .column;       creates a new area
                       inside that column (or stacks a group).
   ================================================================ */
.add-column-btn {
  /* Keep it narrow, not taking a full column's height/width */
  flex: 0 0 auto;
  align-self: flex-start;
  width: 180px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  color: var(--fg-4);
  font-size: 11.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  cursor: pointer;
  margin-top: 28px;   /* align near top of column heads */
  transition: color 120ms, border-color 120ms, background 120ms;
  white-space: nowrap;
}
.add-column-btn:hover {
  color: var(--fg-2);
  border-color: var(--line-strong, var(--fg-4));
  background: color-mix(in oklch, var(--bg-1) 60%, transparent);
}
.add-column-btn:active { background: var(--bg-2); }

.add-group-btn {
  width: 100%;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 8px;
  color: var(--fg-4);
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.add-group-btn:hover {
  color: var(--fg-2);
  border-color: var(--line-soft);
  background: var(--bg-1);
}

/* Subtoolbar itself — allow wrapping to prevent horizontal overflow,
.subtoolbar {
  flex-wrap: wrap;
  min-height: 42px;
  height: auto;
  padding: 6px 16px;
  row-gap: 6px;
}
.subtoolbar .seg,
.subtoolbar .sub-title,
.subtoolbar .topbar-btn {
  flex-shrink: 0;
}
.sub-title { min-width: 0; flex-shrink: 1; }
.sub-title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Presence cluster shouldn't force overflow */
.presence { flex-shrink: 0; }

/* ================================================================
   TOPBAR responsive — 3-zone layout that collapses gracefully
   ================================================================ */
.topbar { flex-wrap: nowrap; min-width: 0; }
.topbar .crumb { min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
.topbar .crumb > * { flex-shrink: 0; }
.topbar .search { min-width: 0; }

/* Below 1280px, search shrinks hard */
@media (max-width: 1280px) {
  .topbar .search { flex: 0 1 280px; }
  .topbar .search span:not(.spacer) { display: none; }
  .topbar .search::before {
    content: "Search"; color: var(--fg-3); font-size: 12px;
  }
  .topbar .search kbd { display: none; }
}

/* Below 1080px: collapse topbar buttons to icon-only */
@media (max-width: 1080px) {
  .topbar-btn.primary kbd,
  .topbar-btn.primary span { display: none; }
  .topbar-btn.primary { padding: 0 10px; }
}

/* Below 960px: hide search entirely, keep a search icon button */
@media (max-width: 960px) {
  .topbar .search { display: none; }
}

/* ================================================================
   BOARD responsive — cards, columns, meta rows
   ================================================================ */

/* Card meta row must NEVER wrap its dividers mid-token */
.task-card .meta,
.task-card .meta-row,
.card-meta {
  flex-wrap: wrap;
  row-gap: 4px;
}
.task-card .meta > *,
.task-card .meta-row > *,
.card-meta > * {
  white-space: nowrap;
}

/* ID chip never wraps */
.task-card .id-chip,
.card-id,
.task-card [data-id-chip] {
  white-space: nowrap;
}

/* Label chips should wrap as whole units, not per-word */
.label,
.tag,
.chip {
  white-space: nowrap;
}

/* ================================================================
   Columns grid — actual responsive column count
   ================================================================ */
@media (max-width: 1440px) { .columns { --cols: 3; } }
@media (max-width: 1200px) { .columns { --cols: 2; } }
@media (max-width:  820px) { .columns { --cols: 1; } }

/* ================================================================
   Stat cards — delta / sub rows never break
   ================================================================ */
.stat-card .stat-delta,
.stat-card .stat-sub,
.stat-sub,
.stat-delta { white-space: nowrap; }

/* ================================================================
   Sidebar / detail panels — right-rail participant rows
   ================================================================ */
.side-row,
.detail-row,
.participant-row {
  min-width: 0;
}
.side-row .v,
.detail-row .v {
  min-width: 0;
}
.participant-row .name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ================================================================
   Settings / Admin / Billing page headers — title+search row
   ================================================================ */
.page-head,
.settings-head,
.admin-head,
.billing-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.page-head .title-block,
.settings-head .title-block {
  flex: 1 1 280px;
  min-width: 0;
}
.page-head .actions,
.settings-head .actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ================================================================
   Breadcrumb paths in Search results — each crumb stays nowrap,
   the ROW wraps as needed
   ================================================================ */
.search-path,
.result-path,
.breadcrumb-path {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.search-path > *,
.result-path > *,
.breadcrumb-path > * {
  white-space: nowrap;
}


/* ================================================================
   HOMEBASE SUB-TITLE ZONE — time + pill behavior
   ================================================================ */
.sub-title .time { white-space: nowrap; flex-shrink: 0; }
.sub-pill { white-space: nowrap; flex-shrink: 0; }

@media (max-width: 1280px) {
  .sub-title .time { display: none; }
}
@media (max-width: 1100px) {
  .sub-title .sub-pill { display: none; }
}
@media (max-width: 1000px) {
  .subtoolbar .sub-label { display: none; }
}

/* Responsive: hide the "Group by" label to save space */
@media (max-width: 1200px) {
  .subtoolbar .sub-label { display: none; }
}

/* Progressive compression of the subtoolbar title at narrow widths */
@media (max-width: 1440px) {
  .sub-title .time { display: none; }
}
@media (max-width: 1280px) {
  .sub-title .sub-pill { display: none; }
}
@media (max-width: 1100px) {
  .sub-title h1 { max-width: 140px; }
}

/* Keep subtoolbar title from growing so wide it pushes everything */
.sub-title {
  min-width: 0;
  flex-shrink: 1;
}
.sub-title h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

/* Icon-only seg always fits */
.seg { flex-shrink: 0; }

/* --- Board scroll fix --- */
/* When the columns container is wider than viewport (3 cols × 296px + gaps
   exceeds ~1000px), the board itself should scroll horizontally, but the
   "Add focus area" button should STAY inline with columns, not floating
   as an orphan on the right. */
.add-column-btn {
  flex-shrink: 0;
  /* keep align-self: flex-start from the primary rule — avoid stretching
     to full column height, which made this look like an empty ghost column */
}

/* When viewport is very narrow (< 820px handled via columns--cols:1),
   add-column-btn becomes a full-width dashed drop zone at the bottom
   of the single column */
@media (max-width: 820px) {
  .columns { flex-direction: column; gap: 12px; }
  .column { width: 100%; }
  .add-column-btn { width: 100%; height: 56px; min-height: 56px; }
}




/* ——— file preview modal ——— */
.file-preview-backdrop {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0% 0 0 / 0.72);
  backdrop-filter: blur(10px);
  z-index: 250;
  padding: 3vh 3vw;
  animation: modal-in 180ms cubic-bezier(.4,0,.2,1);
}
.file-preview-modal {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  width: min(1400px, 94vw);
  height: min(900px, 94vh);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.file-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
  background: color-mix(in oklch, var(--bg) 92%, var(--bg-1));
}
.file-preview-title {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; flex: 1;
}
.file-preview-iconbox {
  width: 32px; height: 32px;
  border-radius: 7px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-2);
  flex-shrink: 0;
}
.file-preview-name {
  font-size: 13.5px;
  color: var(--fg);
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 44vw;
}
.file-preview-meta {
  font-size: 10.5px;
  color: var(--fg-4);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  margin-top: 2px;
}
.file-preview-actions {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.file-preview-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px;
  padding: 0 10px; min-width: 30px; height: 30px;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.file-preview-btn:hover { background: var(--bg-3); border-color: var(--line); color: var(--fg); }
.file-preview-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: oklch(18% 0.02 250);
  font-weight: 500;
}
.file-preview-btn.primary:hover {
  background: color-mix(in oklch, var(--accent) 90%, white);
  color: oklch(12% 0.02 250);
}
.file-preview-body {
  position: relative;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  overflow: hidden;
  background: var(--bg-1);
  min-height: 200px;
}
.file-preview-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 12px 36px -12px rgba(0,0,0,0.45), 0 0 0 1px var(--line-soft);
}
.file-preview-body video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  box-shadow: 0 12px 36px -12px rgba(0,0,0,0.45), 0 0 0 1px var(--line-soft);
  background: black;
}
.file-preview-sidebtn {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 999px;
  background: color-mix(in oklch, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-soft);
  color: var(--fg-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 120ms, color 120ms;
}
.file-preview-sidebtn:hover { background: var(--bg-2); color: var(--fg); }
.file-preview-sidebtn:disabled { opacity: 0.25; cursor: default; }
.file-preview-sidebtn.prev { left: 14px; }
.file-preview-sidebtn.next { right: 14px; }

.file-preview-fallback {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 48px 36px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  min-width: 320px;
  text-align: center;
}
.file-preview-bigicon {
  width: 72px; height: 72px;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-3);
}
.file-preview-fallback-name {
  color: var(--fg); font-size: 15px; font-weight: 500;
}
.file-preview-fallback-meta {
  color: var(--fg-4); font-size: 11.5px;
  font-family: var(--font-mono); letter-spacing: 0.04em;
}

.file-preview-thumbs {
  display: flex; gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid var(--line-soft);
  background: color-mix(in oklch, var(--bg) 92%, var(--bg-1));
  overflow-x: auto;
  flex-shrink: 0;
}
.file-preview-thumb {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--bg-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-4);
  transition: border-color 120ms, transform 120ms;
}
.file-preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-preview-thumb:hover { border-color: var(--line); }
.file-preview-thumb[data-active="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 40%, transparent); }

/* Attachment tiles — hover-reveal remove */
.drawer-attach-tile:hover { transform: translateY(-1px); }
.drawer-attach-tile:hover .drawer-attach-remove { opacity: 1 !important; }
.drawer-attach-remove:hover { background: color-mix(in oklch, var(--bg-0) 90%, transparent) !important; }


/* ——— card attachment/link chips ——— */
.card-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  align-items: center;
}
.card-ref-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 140px;
  padding: 2px 6px;
  font-size: 10px;
  color: var(--fg-3);
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.card-ref-chip:hover {
  background: var(--bg-3);
  color: var(--fg);
  border-color: var(--line);
}
/* link-specific styling — light blue to distinguish from file refs */
a.card-ref-chip {
  color: oklch(58% 0.13 240);
  background: oklch(96% 0.03 240);
  border-color: oklch(88% 0.06 240);
}
html[data-theme="dark"] a.card-ref-chip {
  color: oklch(78% 0.11 240);
  background: oklch(28% 0.05 240);
  border-color: oklch(38% 0.06 240);
}
a.card-ref-chip:hover {
  color: oklch(48% 0.16 240);
  background: oklch(92% 0.06 240);
  border-color: oklch(75% 0.12 240);
}
html[data-theme="dark"] a.card-ref-chip:hover {
  color: oklch(86% 0.13 240);
  background: oklch(34% 0.08 240);
  border-color: oklch(54% 0.12 240);
}
/* list-view link chip — same blue style */
.list-link-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  max-width: 110px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: none;
  font-family: var(--font-mono);
  color: oklch(58% 0.13 240);
  background: oklch(96% 0.03 240);
  border: 1px solid oklch(88% 0.06 240);
}
.list-link-chip span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list-link-chip:hover {
  color: oklch(48% 0.16 240);
  background: oklch(92% 0.06 240);
  border-color: oklch(75% 0.12 240);
}
html[data-theme="dark"] .list-link-chip {
  color: oklch(78% 0.11 240);
  background: oklch(28% 0.05 240);
  border-color: oklch(38% 0.06 240);
}
html[data-theme="dark"] .list-link-chip:hover {
  color: oklch(86% 0.13 240);
  background: oklch(34% 0.08 240);
  border-color: oklch(54% 0.12 240);
}
.card-ref-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-ref-thumb {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--bg-1);
  cursor: pointer;
  flex-shrink: 0;
}
.card-ref-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-ref-thumb:hover { border-color: var(--line); }
.card-ref-thumb-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  background: var(--bg-2);
}
.card-ref-ext {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  line-height: 1;
}
.card-ref-thumb:hover .card-ref-ext { color: var(--fg-2); }
.card-refs-compact .card-ref-ext { font-size: 7.5px; }

/* ——— condensed card bits ——— */
.card-title.has-trail {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}
.card-title.has-trail .card-title-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-title-trail {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding-left: 6px;
}
.card-inline-chip {
  font-size: 10.5px;
  color: var(--fg-4);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  line-height: 1;
}
.card-inline-chip.due[data-overdue="true"] { color: oklch(72% 0.17 25); }
.card-inline-chip.due[data-today="true"] { color: var(--accent); }
.card-foot-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--fg-4);
  font-family: var(--font-mono);
  margin-right: 4px;
}
.card-foot-meta .sep { color: var(--fg-5); margin: 0 2px; }
.card-refs-compact {
  margin-top: 2px;
  gap: 3px;
}
.card-refs-compact .card-ref-thumb {
  width: 18px;
  height: 18px;
}
.card-refs-compact .card-ref-chip {
  max-width: 90px;
  padding: 1px 4px;
  font-size: 9.5px;
}


/* ——— card fields popover ——— */
.card-fields-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 150;
  /* 296px card + 16px frame padding + 28px popover padding = 340px */
  width: 340px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 14px;
  animation: modal-in 140ms cubic-bezier(.4,0,.2,1);
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.card-fields-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.card-fields-title {
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.003em;
}
.card-fields-sub {
  color: var(--fg-3);
  font-size: 11.5px;
  margin-top: 2px;
}
.card-fields-reset {
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--fg-3);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.card-fields-reset:hover { background: var(--bg-2); color: var(--fg); border-color: var(--line); }

.card-fields-preview-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.card-fields-preview-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.card-fields-preview-label {
  color: var(--fg-4);
  font-size: 9.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.card-fields-preview-frame {
  background: var(--bg-1);
  border: 1px dashed var(--line-soft);
  border-radius: var(--radius);
  padding: 8px;
  min-height: 60px;
  display: flex;
  align-items: flex-start;
  /* match real column width (296px) minus the dashed frame's padding so the
     Card inside lays out exactly like it would on the board */
  width: 100%;
}
/* ensure the preview Card fills the frame like a real column card */
.card-fields-preview-frame > .card {
  width: 100%;
  max-width: 100%;
  cursor: default;
}
.card-fields-preview-frame > .card:hover {
  background: var(--bg-2);
  border-color: var(--line);
  transform: none;
}

.card-fields-toggles {
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}
.card-fields-toggles-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--fg-2);
  font-size: 11.5px;
  font-weight: 500;
}
.card-fields-toggle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.card-fields-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--fg-3);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.card-fields-toggle:hover {
  background: var(--bg-2);
  color: var(--fg);
}
.card-fields-toggle[data-on="true"] {
  color: var(--fg);
}
.card-fields-toggle-check {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  border: 1.5px solid var(--line);
  background: var(--bg-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-ink);
  flex-shrink: 0;
  transition: background 120ms, border-color 120ms;
}
.card-fields-toggle[data-on="true"] .card-fields-toggle-check {
  background: var(--accent);
  border-color: var(--accent);
}

/* ——— packed meta row (items bin-packed onto meta line) ——— */
.card-meta.card-meta-packed {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  row-gap: 0;
}
.card-meta-packed .card-meta-chain {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  color: var(--fg-3);
  font-size: 11px;
}
.card-meta-packed .card-meta-chain > * { white-space: nowrap; }
.card-meta-trail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}
.card-meta-trail .label {
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-3);
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.card-meta-trail .assignee {
  width: 18px; height: 18px; border-radius: 999px;
  font-size: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 600;
}

/* Inline refs — no top margin, tight */
.card-refs-inline {
  margin-top: 0 !important;
  gap: 3px;
}
.card-refs-inline .card-ref-thumb {
  width: 18px;
  height: 18px;
}
.card-refs-inline .card-ref-chip {
  max-width: 90px;
  padding: 1px 4px;
  font-size: 9.5px;
}

/* Ensure priority color wins in the meta trail (specificity + order) */
.card-meta.card-meta-packed .card-meta-trail .priority[data-p="P1"] { color: oklch(72% 0.17 25); }
.card-meta.card-meta-packed .card-meta-trail .priority[data-p="P2"] { color: oklch(78% 0.14 70); }
.card-meta.card-meta-packed .card-meta-trail .priority[data-p="P3"] { color: var(--fg-3); }
.card-meta.card-meta-packed .card-meta-trail .priority {
  margin-left: 0;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px;
  font-family: var(--font-mono);
}

/* ——— Windowed mode chrome ——— */
.window-host.is-fullscreen { display: contents; }
.window-host.is-fullscreen .window-toggle {
  position: fixed; top: 8px; right: 8px;
  z-index: 5000;
  width: 22px; height: 22px; border-radius: 5px;
  display: grid; place-items: center;
  background: oklch(from var(--bg-2) l c h / 0.6);
  border: 1px solid var(--line-soft);
  color: var(--fg-3);
  cursor: pointer;
  opacity: 0.35;
  transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.window-host.is-fullscreen .window-toggle:hover {
  opacity: 1; color: var(--fg); background: var(--bg-3);
}

.window-host.is-windowed {
  position: fixed; inset: 0;
  background:
    radial-gradient(1200px 700px at 20% 10%, oklch(from var(--accent) l c h / 0.08), transparent 60%),
    radial-gradient(900px 600px at 90% 90%, oklch(from var(--accent) l c h / 0.05), transparent 60%),
    oklch(8% 0.01 250);
  padding: 28px 32px 32px;
  display: flex; flex-direction: column;
  z-index: 1;
}
:root[data-theme="light"] .window-host.is-windowed {
  background:
    radial-gradient(1200px 700px at 20% 10%, oklch(from var(--accent) l c h / 0.12), transparent 60%),
    radial-gradient(900px 600px at 90% 90%, oklch(from var(--accent) l c h / 0.08), transparent 60%),
    oklch(90% 0.008 250);
}
.window-host.is-windowed .app {
  flex: 1; min-height: 0;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  box-shadow:
    0 30px 80px oklch(0% 0 0 / 0.55),
    0 8px 20px oklch(0% 0 0 / 0.3),
    0 0 0 1px var(--line);
  background: var(--bg);
}

.winchrome {
  flex: 0 0 auto;
  height: 36px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 12px;
  gap: 12px;
  box-shadow: 0 -1px 0 oklch(100% 0 0 / 0.04) inset;
  position: relative;
}
.winchrome__lights { display: flex; gap: 7px; align-items: center; }
.winchrome__light {
  width: 12px; height: 12px; border-radius: 50%;
  border: none; padding: 0; cursor: default;
  box-shadow: 0 0 0 0.5px oklch(0% 0 0 / 0.3) inset;
}
.winchrome__light--close { background: oklch(68% 0.17 25); cursor: pointer; }
.winchrome__light--close:hover { background: oklch(72% 0.2 25); }
.winchrome__light--min { background: oklch(78% 0.15 85); }
.winchrome__light--max { background: oklch(72% 0.15 145); }

.winchrome__title {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px; color: var(--fg-3); font-weight: 500;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.winchrome__url {
  justify-self: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-4);
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  display: none; /* title takes center; url hidden to keep it clean */
}
.winchrome__expand {
  width: 22px; height: 22px; border-radius: 5px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent;
  color: var(--fg-3); cursor: pointer;
}
.winchrome__expand:hover { background: var(--bg-3); color: var(--fg); border-color: var(--line-soft); }