/* ─────────────────────────────────────────────────────────────────────
   Robby OS · Cockpit — Light-mode polish & layout refinements (v6)

   Loaded LAST, so everything here wins.

   Sections:
     1. Light-mode palette: contrasting component backgrounds
     2. Thicker borders + layered shadows per pane
     3. Project hero type scale (larger Work/Personal/House names)
     4. Condensed SubBar + Filters/View popover
     5. Condensed AI Brief strip + expanded drawer
     6. Email: bigger account pills w/ brand marks, new item v2 layout
     7. Kanban auto-resize when all rows collapse
   ───────────────────────────────────────────────────────────────────── */


/* ═════════════════════════════ 1. PALETTE ═════════════════════════════ */

[data-theme="light"] {
  /* Canvas (outermost gutters/behind panels) */
  --bg-canvas: oklch(93% 0.008 260);          /* cool, visibly darker than panes */

  /* Sidebar — warm tan/ivory. Chroma bumped so the tan reads
     properly against white/canvas panes instead of disappearing. */
  --bg-rail:   oklch(94% 0.028 82);             /* warm tan ivory */

  /* Panes */
  --bg-1:      #ffffff;                         /* kanban / top surfaces */
  --bg-2:      oklch(98.2% 0.004 260);          /* card on pane (neutral) */
  --bg-3:      oklch(95.8% 0.006 260);          /* elevated / hover */
  --bg-4:      oklch(93.5% 0.008 260);          /* input / deep hover */
  --bg-5:      oklch(91% 0.010 260);            /* chip bg */

  /* Hairlines — thicker + visible */
  --hair:      oklch(89% 0.010 260);
  --hair-2:    oklch(83% 0.012 260);            /* primary component border */
  --hair-3:    oklch(74% 0.015 260);            /* emphasized/active edge */

  --text-0:    #060810;
  --text-1:    #11151c;
  --text-2:    #323945;
  --text-3:    #555d6b;
  --text-4:    #7e8696;
  --text-5:    #b0b6c2;

  --link:      #1d4ed8;

  /* Custom per-pane backgrounds for light mode */
  --pane-kanban-bg:  #ffffff;
  --pane-agenda-bg:  oklch(98.2% 0.008 230);    /* very faint cool tint */
  --pane-email-bg:   oklch(98% 0.008 285);      /* very faint lavender */
  --pane-topbar-bg:  oklch(96.5% 0.006 260);    /* warm grey */
  --pane-subbar-bg:  oklch(98% 0.005 260);      /* lighter than topbar */
  --pane-status-bg:  oklch(96% 0.008 260);

  /* Layered shadow tokens */
  --shadow-pane:
    0 0 0 2px var(--hair-2),
    0 1px 2px rgba(15, 22, 36, 0.04),
    0 4px 14px -6px rgba(15, 22, 36, 0.10),
    0 12px 24px -12px rgba(15, 22, 36, 0.08);

  --shadow-pane-hover:
    0 0 0 2px var(--hair-3),
    0 2px 4px rgba(15, 22, 36, 0.06),
    0 6px 18px -6px rgba(15, 22, 36, 0.14);
}


/* ═════════════════════════════ 2. CHROME ═════════════════════════════ */

/* Canvas behind panels shows through the gutter — gives each pane a visible
   moat and makes the borders read. */
[data-theme="light"] body,
[data-theme="light"] html { background: var(--bg-canvas); }

[data-theme="light"] .app {
  background: var(--bg-canvas);
  padding: 0;
}

/* Sidebar — warm off-white, right edge is a thick border */
[data-theme="light"] .sidebar {
  background: var(--bg-rail);
  border-right: 2px solid var(--hair-2);
  box-shadow: 1px 0 0 rgba(15,22,36,0.02);
}

/* Main column — the overall working area sits on canvas, panes float on top */
[data-theme="light"] .main { background: var(--bg-canvas); }

/* Topbar & Subbar — distinct from main, borders below */
[data-theme="light"] .topbar {
  background: var(--pane-topbar-bg);
  border-bottom: 2px solid var(--hair-2);
}
[data-theme="light"] .subbar {
  background: var(--pane-subbar-bg);
  border-bottom: 2px solid var(--hair-2);
}

/* Insights strip — own tint, clearly separate */
[data-theme="light"] .insights-strip {
  background: oklch(99% 0.014 85);              /* creamy warm */
  border-bottom: 2px solid var(--hair-2);
  box-shadow: 0 1px 2px rgba(15,22,36,0.03);
}

/* Workspace canvas between panes */
[data-theme="light"] .workspace { background: var(--bg-canvas); }

/* Kanban pane — white + thick border + shadow */
[data-theme="light"] .kanban-wrap,
[data-theme="light"] .pane.kanban-wrap {
  background: var(--pane-kanban-bg);
  border: 2px solid var(--hair-2);
  border-radius: 10px;
  margin: 6px 6px 0 6px;
  box-shadow: var(--shadow-pane);
}

/* Agenda pane — subtle cool tint, thick border, shadow */
[data-theme="light"] .pane.agenda,
[data-theme="light"] .agenda {
  background: var(--pane-agenda-bg);
  border: 2px solid var(--hair-2);
  border-radius: 10px;
  margin: 0 6px 6px 6px;
  box-shadow: var(--shadow-pane);
}

/* Email rail — lavender tint, thick border, shadow */
[data-theme="light"] .email-rail {
  background: var(--pane-email-bg);
  border: 2px solid var(--hair-2);
  border-radius: 10px;
  margin: 6px 6px 6px 0;
  box-shadow: var(--shadow-pane);
}

/* Status bar */
[data-theme="light"] .statusbar {
  background: var(--pane-status-bg);
  border-top: 2px solid var(--hair-2);
}

/* Pane heads sit inside panes — normalize their border so they don't double up */
[data-theme="light"] .pane-head {
  border-bottom: 1.5px solid var(--hair-2);
  background: transparent;
}

/* Cards inside panes need clear separation from the pane bg */
[data-theme="light"] .tcard,
[data-theme="light"] .card {
  background: var(--bg-1);
  border: 1.5px solid var(--hair);
  box-shadow:
    0 1px 2px rgba(15,22,36,0.04),
    0 2px 6px -2px rgba(15,22,36,0.06);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
[data-theme="light"] .tcard:hover,
[data-theme="light"] .card:hover {
  border-color: var(--hair-3);
  box-shadow:
    0 2px 4px rgba(15,22,36,0.06),
    0 6px 14px -4px rgba(15,22,36,0.10);
}

/* Sidebar item hover — subtle */
[data-theme="light"] .side-item:hover,
[data-theme="light"] .side-proj:hover {
  background: var(--bg-3);
  border-radius: 6px;
}
[data-theme="light"] .side-item.active {
  background: var(--bg-4);
  border-radius: 6px;
  font-weight: 600;
}


/* ═════════════════════════ 3. PROJECT HEROES ═════════════════════════ */

/* Larger, bolder project names — visible across dark AND light modes.
   We override here because styles-v5-type.css used !important. */
.proj-hero .ph-name,
.ph-name {
  font-size: 16px !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}
.proj-hero .ph-meta,
.ph-meta {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
}
.proj-hero .ph-meta b,
.ph-meta b {
  font-size: 12px !important;
  font-weight: 800 !important;
  margin-right: 4px !important;
}

/* Boost the big stat number even more so it reads as the anchor */
.proj-hero .ph-stat {
  font-size: 52px !important;
}


/* ═════════════════════════ 4. SUBBAR ═════════════════════════ */

.subbar-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

/* Filter/View popover trigger — signal active state */
.sb-filter-wrap { position: relative; }
.sb-filter-wrap .btn.has-active { border-color: var(--link); color: var(--link); }
.sb-filter-wrap .btn.primary {
  background: var(--link);
  color: #fff;
  border-color: var(--link);
}

.sb-filter-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 320px;
  padding: 10px;
  background: var(--bg-1);
  border: 2px solid var(--hair-2);
  border-radius: 10px;
  box-shadow:
    0 4px 12px rgba(15,22,36,0.08),
    0 18px 40px -10px rgba(15,22,36,0.14);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-theme="dark"] .sb-filter-pop {
  background: var(--bg-2);
  border-color: var(--hair-3);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.4),
    0 18px 40px -10px rgba(0,0,0,0.5);
}

.sbf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
}
.sbf-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sbf-sep {
  height: 1px;
  background: var(--hair);
  margin: 2px -2px;
}
.sbf-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
}
.sbf-toggle input { margin: 0; cursor: pointer; }
.sbf-hint {
  margin-left: auto;
  color: var(--text-4);
  font-size: 11px;
  font-weight: 400;
}
.sbf-row-foot { padding-top: 2px; }


/* ═════════════════════════ 5. INSIGHTS STRIP ═════════════════════════ */

.insights-compact {
  padding: 6px 12px !important;
  height: auto !important;         /* override fixed 34px from v3 */
  min-height: 36px;
  overflow: visible !important;    /* allow the expanded drawer to show */
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.insights-compact.expanded { min-height: 84px; }
.insights-compact .insights-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  padding-right: 8px;
  border-right: 1px solid var(--hair-2);
  margin-right: 4px;
}
.insights-compact .insights-badge .pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ai);
  box-shadow: 0 0 0 3px oklch(60% 0.19 25 / 0.18);
}

.insights-summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-1);
  flex-wrap: wrap;
}
.is-item { display: inline-flex; align-items: baseline; gap: 4px; }
.is-item b { font-weight: 750; font-variant-numeric: tabular-nums; }
.is-item.warn b { color: oklch(52% 0.18 45); }
.is-item.hot b  { color: oklch(55% 0.22 25); }
.is-sep { color: var(--text-4); }
.is-next b { color: var(--link); font-variant-numeric: tabular-nums; }

.is-expand-btn { padding: 3px 10px !important; font-size: 12px; }
.is-replan     { padding: 4px 10px !important; font-weight: 600; }

/* Expanded drawer — sits below the compact line on its own row */
.insights-expanded {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 8px 4px 2px;
  margin-top: 6px;
  border-top: 1px dashed var(--hair-2);
}


/* ═════════════════════════ 6. EMAIL ═════════════════════════ */

/* Bigger account pills with brand logos */
.email-accounts-big {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--hair-2);
}
.email-accounts-big .acct-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1.5px solid var(--hair-2);
  background: var(--bg-1);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  position: relative;
  overflow: hidden;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
[data-theme="dark"] .email-accounts-big .acct-pill { background: var(--bg-2); }

.email-accounts-big .acct-pill:hover {
  border-color: var(--hair-3);
  transform: translateY(-1px);
}
.email-accounts-big .acct-pill.active {
  border-color: var(--link);
  box-shadow: 0 0 0 3px oklch(60% 0.18 255 / 0.15);
  background: oklch(98.5% 0.014 255);
}
[data-theme="dark"] .email-accounts-big .acct-pill.active {
  background: oklch(28% 0.05 255);
}
.email-accounts-big .acct-pill.off { opacity: 0.55; }

.email-accounts-big .acct-rail {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--acct-color, var(--text-4));
}
.email-accounts-big .acct-pill.all {
  grid-column: 1 / 2;
  padding: 0 12px;
  border-style: solid;
  background: var(--bg-3);
}
.email-accounts-big .acct-pill.all.active {
  background: var(--link);
  color: #fff;
  border-color: var(--link);
}

.email-accounts-big .acct-mark {
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.email-accounts-big .acct-mark-all {
  width: 22px; height: 22px;
  color: inherit;
}
.email-accounts-big .acct-name { flex: 1; }
.email-accounts-big .acct-badge {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-4);
  color: var(--text-2);
  min-width: 22px;
  text-align: center;
}
.email-accounts-big .acct-pill.active .acct-badge {
  background: var(--link);
  color: #fff;
}
.email-accounts-big .acct-pill.all.active .acct-badge {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* Email item v2 — same height target as before (~78–100px), better layout */
.email-item-v2 {
  display: grid !important;
  grid-template-columns: 4px 36px minmax(0, 1fr) !important;
  align-items: flex-start;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--hair) !important;
  background: transparent;
  position: relative;
}
.email-item-v2:hover { background: var(--bg-2); }
[data-theme="dark"] .email-item-v2:hover { background: var(--bg-3); }

.email-item-v2 .ei-acctrail {
  grid-column: 1;
  width: 4px;
  height: 100%;
  background: var(--acct-color, var(--text-4));
  border-radius: 2px;
}

.email-item-v2 .ei-avatar {
  grid-column: 2;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--acct-color, var(--text-4));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  position: relative;
  flex-shrink: 0;
}
.email-item-v2 .ei-avatar-mark {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 16px; height: 16px;
  background: var(--bg-1);
  border: 1.5px solid var(--hair-2);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
[data-theme="dark"] .email-item-v2 .ei-avatar-mark {
  background: var(--bg-2);
  border-color: var(--hair-3);
}
.email-item-v2 .ei-avatar-mark svg { width: 12px; height: 12px; }

.email-item-v2 .ei-main {
  grid-column: 3 / -1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.email-item-v2 .ei-line1 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.25;
}
.email-item-v2 .ei-from {
  font-weight: 700;
  color: var(--text-0);
  flex-shrink: 0;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-item-v2.unread .ei-from { font-weight: 750; }
.email-item-v2 .ei-subj-inline {
  color: var(--text-1);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-item-v2.unread .ei-subj-inline { font-weight: 650; color: var(--text-0); }
.email-item-v2 .ei-time {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.email-item-v2 .ei-dot-unread {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--link);
  flex-shrink: 0;
}

.email-item-v2 .ei-snip-tight {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text-3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.email-item-v2 .ei-chips-tight {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-height: 18px;
}
.email-item-v2 .ei-chip,
.email-item-v2 .sent-chip {
  font-size: 10.5px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.email-item-v2 .ei-chip {
  background: var(--bg-3);
  color: var(--text-2);
}
.email-item-v2 .sent-chip.sent-urgent   { background: oklch(92% 0.08 25); color: oklch(40% 0.18 25); letter-spacing: 0.08em; }
.email-item-v2 .sent-chip.sent-blocking { background: oklch(92% 0.08 45); color: oklch(40% 0.18 45); letter-spacing: 0.08em; }
[data-theme="dark"] .email-item-v2 .sent-chip.sent-urgent   { background: oklch(32% 0.10 25); color: oklch(88% 0.10 25); }
[data-theme="dark"] .email-item-v2 .sent-chip.sent-blocking { background: oklch(32% 0.10 45); color: oklch(88% 0.10 45); }

.email-item-v2 .ei-via {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-4);
  text-transform: none;
  letter-spacing: 0;
}

/* Quick replies — compact */
.email-item-v2 .ei-quickreplies {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.email-item-v2 .qr-chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: oklch(96% 0.014 260);
  border: 1px solid var(--hair-2);
  color: var(--text-1);
  cursor: pointer;
}
[data-theme="dark"] .email-item-v2 .qr-chip {
  background: var(--bg-3);
  color: var(--text-1);
}

/* Hover action rail — absolute so it doesn't expand item height */
.email-item-v2 .ei-actions {
  position: absolute;
  right: 8px;
  top: 8px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 120ms ease;
  background: var(--bg-1);
  border: 1px solid var(--hair-2);
  border-radius: 6px;
  padding: 2px;
  box-shadow: 0 2px 6px rgba(15,22,36,0.08);
}
[data-theme="dark"] .email-item-v2 .ei-actions {
  background: var(--bg-3);
  border-color: var(--hair-3);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.email-item-v2:hover .ei-actions { opacity: 1; }
/* Hide time on hover so the action rail doesn't overlap it */
.email-item-v2:hover .ei-time { visibility: hidden; }


/* ═════════════════════════ 7. KANBAN AUTO-RESIZE ═════════════════════════ */

/* When a kanban row is collapsed, clamp the kgrid-body to a thin summary row.
   Combined with the grid-template-rows change in v2-app.jsx, the agenda
   naturally absorbs the freed space. */
.krow.collapsed .kgrid-body { min-height: 0; }

/* Ensure kanban-wrap never fights the grid track — if the track is `auto`,
   let the content determine height. */
.center-col .kanban-wrap { align-self: start; }
.center-col .pane.agenda { align-self: stretch; min-height: 0; }


/* ═════════════════════════ Misc light polish ═════════════════════════ */

/* Buttons: defined borders in light mode */
[data-theme="light"] .btn {
  border: 1.5px solid var(--hair-2);
  background: var(--bg-1);
}
[data-theme="light"] .btn:hover {
  border-color: var(--hair-3);
  background: var(--bg-2);
}
[data-theme="light"] .btn.primary {
  background: var(--link);
  border-color: var(--link);
  color: #fff;
}
[data-theme="light"] .btn.primary:hover { filter: brightness(1.05); }

/* Segmented controls: clearer borders */
[data-theme="light"] .seg {
  background: var(--bg-2);
  border: 1.5px solid var(--hair-2);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
[data-theme="light"] .seg-item.active {
  background: var(--bg-1);
  box-shadow: 0 1px 2px rgba(15,22,36,0.10);
  border: 1px solid var(--hair);
  font-weight: 650;
}

/* Inspector & palette scrims in light get a soft tint */
[data-theme="light"] .inspector-scrim,
[data-theme="light"] .palette-scrim {
  background: rgba(15, 22, 36, 0.28);
  backdrop-filter: blur(3px);
}
[data-theme="light"] .inspector,
[data-theme="light"] .palette {
  border: 2px solid var(--hair-2);
  box-shadow:
    0 8px 24px rgba(15,22,36,0.12),
    0 24px 64px -12px rgba(15,22,36,0.18);
}


/* ═════════════════════════════════════════════════════════════════════
   v6 · POLISH PASS (senior-dev audit follow-up)
   Tiny details & last-mile refinements. Everything here was flagged in
   the blanket formatting audit.
   ═════════════════════════════════════════════════════════════════════ */


/* ───────── Topbar search: never wrap ───────── */
/* The search placeholder + hint were wrapping at narrow viewports
   producing an 86-px-tall search field. Lock to single line with a
   hard clip + ellipsis so the topbar stays 44px even when cramped. */
.topbar .search {
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
.topbar .search .search-placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.topbar .search .search-placeholder .search-hint {
  white-space: nowrap;
}
.topbar .search .kbd { flex-shrink: 0; }


/* ───────── Unified :focus-visible ring ─────────
   Keyboard users get a crisp ring; mouse users see nothing.
   Uses the accent color at 45% for visibility against any pane tint. */
*:focus { outline: none; }

button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.side-item:focus-visible,
.side-proj:focus-visible,
.seg-item:focus-visible,
.tcard:focus-visible,
.card:focus-visible,
.email-item-v2:focus-visible,
.acct-pill:focus-visible,
.tbp-row:focus-visible,
.palette-item:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--bg-canvas),
    0 0 0 4px oklch(60% 0.18 255 / 0.55);
  position: relative;
  z-index: 5;
}
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] [role="button"]:focus-visible {
  box-shadow:
    0 0 0 2px var(--bg-canvas),
    0 0 0 4px oklch(72% 0.18 255 / 0.55);
}


/* ───────── prefers-reduced-motion ─────────
   Respect the OS setting. Keep the UI functional but calm. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .insights-badge .pulse { box-shadow: none; }
}


/* ───────── Sidebar polish ─────────
   (a) Stronger active-item contrast (memory follow-up).
   (b) Add a proper right-edge shadow so the sidebar reads as elevated,
       matching the other panes. */
[data-theme="light"] .sidebar {
  box-shadow:
    1px 0 0 var(--hair-2),
    2px 0 6px -2px rgba(15, 22, 36, 0.05);
}

[data-theme="light"] .side-item.active,
[data-theme="light"] .side-proj.active {
  background: oklch(90% 0.013 260);
  box-shadow: inset 2px 0 0 var(--link);
  font-weight: 650;
  color: var(--text-0);
}
[data-theme="light"] .side-item.active .side-icon,
[data-theme="light"] .side-item.active svg {
  color: var(--link);
}


/* ───────── Status bar alignment ─────────
   The sb-chip was 19px vs sb-group 15px; Density was 24px.
   Lock every direct child to the same vertical rhythm. */
.statusbar {
  align-items: center;
}
.statusbar > * {
  display: inline-flex;
  align-items: center;
}
.statusbar .sb-chip {
  height: 20px;
  padding: 0 8px;
  line-height: 1;
}
.statusbar .seg.mini {
  padding: 1px;
  height: 20px;
}
.statusbar .seg.mini .seg-item {
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1;
}
[data-theme="light"] .statusbar {
  color: var(--text-2);
}
[data-theme="light"] .statusbar .sb-label {
  color: var(--text-3);
  font-weight: 600;
}
[data-theme="light"] .statusbar .sb-sub {
  color: var(--text-4);
}


/* ───────── Insights badge: clean 1px border ─────────
   Fractional 0.67px border-right was rendering blurry. Pin to 1px. */
.insights-compact .insights-badge {
  border-right: 1px solid var(--hair-2);
}
.insights-compact .is-expand-btn { white-space: nowrap; }
.insights-compact .is-replan     { white-space: nowrap; }


/* ───────── Task card title: ellipsis when cramped ─────────
   41 instances were clipped w/o ellipsis. Clamp to 2 lines + … */
.tcard .tcard-title,
.note .title-text,
.event .title-text,
.goal .title-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}


/* ───────── Email item: fix "via Gmail" crush + tighter density ─────────
   The grid was giving 0px to the 4th column when content ran long.
   Use flex fallback so the chip row wraps and via-label stays visible. */
.email-item-v2 {
  grid-template-columns: 4px 36px minmax(0, 1fr);
}
.email-item-v2 .ei-main { grid-column: 3 / -1; }
.email-item-v2 .ei-chips-tight { flex-wrap: wrap; }
.email-item-v2 .ei-via {
  margin-left: auto;
  flex-shrink: 0;
  padding-left: 6px;
}

/* Compact density: tighten line-heights on email items (memory follow-up) */
[data-density="compact"] .email-item-v2 {
  padding: 6px 10px !important;
  gap: 6px !important;
}
[data-density="compact"] .email-item-v2 .ei-line1  { font-size: 12.5px; line-height: 1.2; }
[data-density="compact"] .email-item-v2 .ei-snip-tight { font-size: 11.5px; line-height: 1.3; -webkit-line-clamp: 1; }
[data-density="compact"] .email-item-v2 .ei-avatar { width: 28px; height: 28px; font-size: 10px; }
[data-density="compact"] .email-item-v2 .ei-chips-tight { min-height: 16px; gap: 4px; }
[data-density="compact"] .email-hero { padding: 10px !important; }
[data-density="compact"] .eh-big    { font-size: 36px !important; }


/* ───────── Unified thin scrollbars (WebKit) ─────────
   sidebar-scroll was thin; kanban-grid/agenda-body/email-body were
   default. Harmonize across all scroll containers. */
.sidebar-scroll,
.kanban-grid,
.agenda-body,
.email-body,
.palette-body,
.insp-body,
.sb-filter-pop {
  scrollbar-width: thin;
  scrollbar-color: var(--hair-3) transparent;
}

.sidebar-scroll::-webkit-scrollbar,
.kanban-grid::-webkit-scrollbar,
.agenda-body::-webkit-scrollbar,
.email-body::-webkit-scrollbar,
.palette-body::-webkit-scrollbar,
.insp-body::-webkit-scrollbar,
.sb-filter-pop::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.sidebar-scroll::-webkit-scrollbar-track,
.kanban-grid::-webkit-scrollbar-track,
.agenda-body::-webkit-scrollbar-track,
.email-body::-webkit-scrollbar-track,
.palette-body::-webkit-scrollbar-track,
.insp-body::-webkit-scrollbar-track,
.sb-filter-pop::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb,
.kanban-grid::-webkit-scrollbar-thumb,
.agenda-body::-webkit-scrollbar-thumb,
.email-body::-webkit-scrollbar-thumb,
.palette-body::-webkit-scrollbar-thumb,
.insp-body::-webkit-scrollbar-thumb,
.sb-filter-pop::-webkit-scrollbar-thumb {
  background: var(--hair-2);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover,
.kanban-grid::-webkit-scrollbar-thumb:hover,
.agenda-body::-webkit-scrollbar-thumb:hover,
.email-body::-webkit-scrollbar-thumb:hover,
.palette-body::-webkit-scrollbar-thumb:hover,
.insp-body::-webkit-scrollbar-thumb:hover,
.sb-filter-pop::-webkit-scrollbar-thumb:hover {
  background: var(--hair-3);
  background-clip: padding-box;
  border: 2px solid transparent;
}


/* ───────── Cursor affordances ─────────
   Everything clickable signals clickability; text areas signal text. */
.side-item, .side-proj, .seg-item, .acct-pill,
.tcard, .card, .email-item-v2, .palette-item,
.tbp-row, .krow .row-chev, .twd, .mm-cell {
  cursor: pointer;
}
.topbar .search { cursor: text; }
.tcard .checkbox { cursor: pointer; }


/* ───────── Selection color ─────────
   Matches the link accent; reads on all pane tints. */
::selection {
  background: oklch(84% 0.08 255);
  color: var(--text-0);
}
[data-theme="dark"] ::selection {
  background: oklch(40% 0.12 255);
  color: #fff;
}


/* ───────── Subbar View button: don't wrap on narrow viewports ─────── */
.sb-filter-wrap .btn { white-space: nowrap; }
.subbar-compact .week-nav .date { white-space: nowrap; }


/* ───────── Kanban pane-head count badge: tabular + breathing room ── */
.kanban-wrap .pane-head .count,
.agenda .pane-head .count,
.email-rail .pane-head .title-sub {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}


/* ───────── Inspector/palette: soften scrim on light bg ───────── */
[data-theme="light"] .inspector-scrim,
[data-theme="light"] .palette-scrim {
  background: oklch(65% 0.015 260 / 0.32);
  backdrop-filter: blur(4px) saturate(1.1);
  -webkit-backdrop-filter: blur(4px) saturate(1.1);
}


/* ───────── Disabled state (any el with [disabled] or .is-disabled) ── */
button[disabled],
.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}


/* ───────── Hero name: ensure bold names stay on one line ───────── */
.proj-hero .ph-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}


/* ───────── Agenda: today column tint on light mode ───────── */
[data-theme="light"] .day-col.today {
  background: oklch(97% 0.012 255 / 0.6);
}
[data-theme="light"] .now-line {
  background: var(--link);
  box-shadow: 0 0 0 1px rgba(29, 78, 216, 0.2);
}


/* ───────── Tweaks panel: align with pane color system ───────── */
[data-theme="light"] .tweaks-panel {
  background: var(--bg-1);
  border: 2px solid var(--hair-2);
  box-shadow:
    0 4px 12px rgba(15,22,36,0.08),
    0 18px 40px -10px rgba(15,22,36,0.14);
  border-radius: 10px;
}


/* ═════════════════════════════════════════════════════════════════════
   v6 · POLISH PASS 2 — hero color integration + email density
   ═════════════════════════════════════════════════════════════════════ */


/* ─────────── Kanban hero headers — polished pastels ───────────
   Previous state: saturated tailwind-500 primaries on white text.
   New state: soft desaturated tints (oklch ~94% l, ~0.06 c) with
   dark-ink text. Project color still reads (hue preserved) but the
   palette integrates with the warm-ivory / white / lavender pane
   system instead of fighting it. */

[data-theme="light"] .proj-hero {
  /* Flat pastel fill — no dark radial gradient on top, no lift shadow */
  background:
    linear-gradient(180deg,
      oklch(from var(--proj-bg) 95% calc(c * 0.35) h),
      oklch(from var(--proj-bg) 91% calc(c * 0.5)  h));
  color: var(--text-0);
  min-height: 84px;
  box-shadow:
    inset 0 0 0 1.5px oklch(from var(--proj-bg) 78% calc(c * 0.45) h),
    0 1px 2px rgba(15, 22, 36, 0.03),
    0 3px 10px -4px rgba(15, 22, 36, 0.08);
  text-shadow: none;
}
[data-theme="light"] .proj-hero::before,
[data-theme="light"] .proj-hero::after {
  display: none;
}
[data-theme="light"] .proj-hero .ph-name {
  color: oklch(from var(--proj-bg) 32% calc(c * 0.9) h);
  text-shadow: none;
  letter-spacing: -0.018em !important;
}
[data-theme="light"] .proj-hero .ph-name .sw {
  background: oklch(from var(--proj-bg) 55% c h);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme="light"] .proj-hero .ph-trend {
  color: oklch(from var(--proj-bg) 38% calc(c * 0.9) h);
  opacity: 0.85;
}
[data-theme="light"] .proj-hero .ph-meta {
  color: oklch(from var(--proj-bg) 38% calc(c * 0.7) h);
  opacity: 0.75;
}
[data-theme="light"] .proj-hero .ph-meta b {
  color: oklch(from var(--proj-bg) 30% c h);
}
[data-theme="light"] .proj-hero .ph-stat {
  color: oklch(from var(--proj-bg) 28% c h) !important;
}
[data-theme="light"] .proj-hero .ph-stat small {
  color: oklch(from var(--proj-bg) 40% calc(c * 0.8) h);
  opacity: 0.85;
}
[data-theme="light"] .proj-hero .ph-spark polyline {
  stroke: oklch(from var(--proj-bg) 45% c h) !important;
}
[data-theme="light"] .proj-hero .ph-spark circle {
  fill: oklch(from var(--proj-bg) 40% c h) !important;
}
[data-theme="light"] .proj-hero .ph-due-bar {
  background: oklch(from var(--proj-bg) 88% calc(c * 0.3) h);
  box-shadow: inset 0 1px 0 rgba(15,22,36,0.06);
}
[data-theme="light"] .proj-hero .ph-due-fill {
  background: oklch(from var(--proj-bg) 48% c h);
}
[data-theme="light"] .proj-hero .ph-due-label {
  color: oklch(from var(--proj-bg) 38% calc(c * 0.8) h);
  opacity: 0.85;
}
[data-theme="light"] .proj-hero.health-warn {
  box-shadow:
    inset 0 0 0 1.5px oklch(65% 0.15 55),
    0 1px 2px rgba(15, 22, 36, 0.03),
    0 3px 10px -4px rgba(15, 22, 36, 0.08);
}
[data-theme="light"] .proj-hero:hover { filter: brightness(1.02); }


/* ─────────── Email AI Triage hero — polished ───────────
   Swap the bright blue/violet gradient for a subtle lavender tint
   that matches the email rail pane. Dark ink, crisp meta. */

[data-theme="light"] .email-hero {
  background: oklch(97% 0.012 285);
  color: var(--text-0);
  border: 1.5px solid oklch(86% 0.02 285);
  box-shadow: none;
  padding: 10px 12px;
  margin: 8px 10px 6px;
}
[data-theme="light"] .email-hero::before,
[data-theme="light"] .email-hero::after { display: none; }

[data-theme="light"] .email-hero .eh-label {
  color: oklch(42% 0.06 285);
  opacity: 0.9;
}
[data-theme="light"] .email-hero .eh-big {
  color: var(--text-0);
  font-size: 30px !important;
}
[data-theme="light"] .email-hero .eh-sub {
  color: var(--text-3);
  opacity: 1;
}
[data-theme="light"] .email-hero .eh-stat {
  background: #fff;
  border: 1px solid oklch(88% 0.018 285);
  backdrop-filter: none;
  color: var(--text-1);
  padding: 4px 8px;
}
[data-theme="light"] .email-hero .eh-stat-num { color: var(--text-0); }
[data-theme="light"] .email-hero .eh-stat-lbl {
  color: var(--text-3);
  font-weight: 700;
  letter-spacing: 0.08em;
}
[data-theme="light"] .email-hero .eh-stat.urgent {
  background: oklch(95% 0.04 25);
  border-color: oklch(80% 0.12 25);
  color: oklch(40% 0.17 25);
}
[data-theme="light"] .email-hero .eh-stat.urgent .eh-stat-num { color: oklch(45% 0.2 25); }


/* ─────────── Email items — max density ───────────
   Tighten padding, bump snippet to 2 lines, cap quick-replies to
   single scrollable row. Net effect: urgent items shrink, regular
   items gain usable snippet preview with same or less total height. */

.email-item-v2 {
  padding: 6px 10px 7px !important;
  gap: 7px !important;
  border-bottom: 1px solid var(--hair) !important;
}
.email-item-v2 .ei-main {
  gap: 1px !important;
}
.email-item-v2 .ei-line1 { line-height: 1.18; margin-bottom: 1px; }
.email-item-v2 .ei-snip-tight {
  display: -webkit-box !important;           /* required for line-clamp */
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;          /* 2-line snippet — the ask */
  line-clamp: 2;
  line-height: 1.32 !important;
  font-size: 12px !important;
  color: var(--text-3);
  white-space: normal !important;            /* beat v2's nowrap */
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.64em;
  min-height: 2.64em;                        /* reserve space so dense rows align */
}
.email-item-v2 .ei-chips-tight {
  min-height: 16px !important;
  gap: 4px !important;
  flex-wrap: nowrap;
  overflow: hidden;
  padding-top: 1px;
}
.email-item-v2 .ei-chip,
.email-item-v2 .sent-chip {
  padding: 2px 6px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
.email-item-v2 .ei-via {
  font-size: 10px !important;
  font-weight: 600;
  padding-left: 4px;
}

/* Quick replies — single scrollable row, no wrap blow-up */
.email-item-v2 .ei-quickreplies {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  gap: 4px !important;
  margin-top: 2px;
  padding-bottom: 1px;
}
.email-item-v2 .ei-quickreplies::-webkit-scrollbar { display: none; }
.email-item-v2 .qr-chip {
  padding: 2px 8px !important;
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Email group header — tighter */
.email-group .egrp-head {
  padding: 6px 10px !important;
  font-size: 11.5px;
}

/* Avatar: shrink slightly so 28px instead of 32px — every pixel counts */
.email-item-v2 .ei-avatar {
  width: 30px !important;
  height: 30px !important;
  font-size: 10.5px !important;
}
.email-item-v2 .ei-avatar-mark {
  width: 14px !important;
  height: 14px !important;
  right: -2px !important;
  bottom: -2px !important;
}
.email-item-v2 .ei-avatar-mark svg { width: 10px !important; height: 10px !important; }

/* Account pills — a hair shorter to give content more room */
.email-accounts-big { padding: 6px 10px !important; gap: 6px !important; }
.email-accounts-big .acct-pill {
  height: 32px !important;
  font-size: 12.5px !important;
}

/* Sentiment chips in chip-row: tracked-uppercase is fine but tighter */
.email-item-v2 .sent-chip { letter-spacing: 0.05em !important; }


/* ═════════════════════════════════════════════════════════════════════
   v6 · AUTONOMOUS POLISH BATCH
   Seven independent improvements — each scoped to one surface.
   ═════════════════════════════════════════════════════════════════════ */


/* ───── AUTONOMOUS #1: Task card foot-meta clutter reduction ─────
   The .tcard-foot row was packing too many segments side-by-side
   (subs progress bar, people avatars, attachment count, link count,
   est time, OVER/SOON flag). Softens the contrast, tightens spacing,
   and makes the progress bar visible instead of merely implied. */

.tcard .tcard-foot {
  gap: 8px;
  padding-top: 4px;
  font-size: 10.5px;
  color: var(--text-4);
  line-height: 1;
}
.tcard .tf-seg {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.tcard .tf-seg .tabnum { font-size: 10.5px; font-weight: 600; color: var(--text-2); }
.tcard .tf-seg svg { opacity: 0.7; }
.tcard .tf-subs .tf-bar {
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: var(--bg-3);
  overflow: hidden;
  margin-left: 3px;
}
.tcard .tf-subs .tf-bar-fill {
  height: 100%;
  background: var(--accent, var(--link));
  border-radius: 2px;
}
.tcard .tf-people .avatar-xs {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg-4);
  color: var(--text-1);
  font-size: 8.5px;
  font-weight: 700;
  border: 1.5px solid var(--bg-1);
  margin-left: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tcard .tf-people .avatar-xs:first-child { margin-left: 0; }
.tcard .tf-flag {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.08em;
}
.tcard .tf-flag.overdue { background: oklch(92% 0.07 25);  color: oklch(42% 0.2 25); }
.tcard .tf-flag.soon    { background: oklch(94% 0.07 55);  color: oklch(44% 0.18 55); }
[data-theme="dark"] .tcard .tf-flag.overdue { background: oklch(30% 0.12 25); color: oklch(82% 0.12 25); }
[data-theme="dark"] .tcard .tf-flag.soon    { background: oklch(32% 0.12 55); color: oklch(85% 0.12 55); }


/* ───── AUTONOMOUS #2: Empty/loading states ─────
   When projectFilters is empty → kanban-grid shows a quiet empty message.
   When a row has no items in a column → collapsed-pill stays hidden and
   the add-row affordance has better contrast. */

.kanban-wrap:has(.kgrid-head:empty),
.kanban-grid:empty::before,
.kanban-wrap[data-empty="true"]::after {
  content: "No projects selected — enable one from the sidebar.";
  display: block;
  text-align: center;
  padding: 80px 24px;
  color: var(--text-4);
  font-size: 13px;
  font-style: italic;
}

/* Quiet, inviting "add" affordances when a cell is empty */
.kcell-add {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  margin-top: 2px;
  border: 1px dashed var(--hair-2);
  border-radius: 7px;
  color: var(--text-4);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.kcell-add:hover {
  border-color: var(--hair-3);
  border-style: solid;
  color: var(--text-2);
  background: var(--bg-2);
}
.kcell-add svg { opacity: 0.7; }

/* Collapsed row pill — reads as a subtle summary, not a gap */
.krow.collapsed .collapsed-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--bg-3);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.krow.collapsed .collapsed-pill b {
  color: var(--text-1);
  font-family: var(--font-mono);
}


/* ───── AUTONOMOUS #3: Inspector panel visual polish ─────
   Tighter section spacing, better activity timeline, proper footer. */

[data-theme="light"] .inspector {
  background: var(--bg-1);
  border-radius: 12px 0 0 12px;
  width: min(440px, 90vw);
  box-shadow:
    -8px 0 24px -8px rgba(15, 22, 36, 0.12),
    -20px 0 60px -20px rgba(15, 22, 36, 0.18);
}

.insp-head {
  padding: 14px 16px;
  border-bottom: 1.5px solid var(--hair);
  gap: 8px;
}
.insp-kind {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
}

.insp-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.insp-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--text-0);
}

.insp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.insp-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--hair);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
}

.insp-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.insp-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.insp-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-1);
}

.insp-activity {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 4px;
  border-left: 2px solid var(--hair);
}
.ia-row {
  font-size: 12px;
  color: var(--text-2);
  position: relative;
  padding-left: 12px;
  line-height: 1.4;
}
.ia-row .ia-dot {
  position: absolute;
  left: -8px; top: 5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bg-1);
  border: 2px solid var(--hair-3);
}

.insp-ai { display: flex; flex-direction: column; gap: 5px; }
.ia-sug {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--hair);
  background: oklch(99% 0.005 285);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-1);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.ia-sug:hover {
  border-color: oklch(78% 0.08 285);
  background: oklch(97% 0.014 285);
}
.ia-sug svg { color: var(--ai); flex-shrink: 0; }

.insp-foot {
  padding: 12px 16px;
  border-top: 1.5px solid var(--hair);
  gap: 6px;
  background: var(--bg-2);
  border-radius: 0 0 0 12px;
}

.progress-bar.big {
  height: 6px;
  border-radius: 3px;
}
.progress-meta.big {
  font-size: 12px;
  font-weight: 500;
}


/* ───── AUTONOMOUS #4: Command palette refinements ─────
   Group label typography, hover preview affordance, better scrim. */

[data-theme="light"] .palette {
  background: var(--bg-1);
  width: min(560px, 92vw);
  border-radius: 12px;
}
.palette-head {
  padding: 14px 16px;
  border-bottom: 1.5px solid var(--hair);
  gap: 10px;
}
.palette-head input {
  font-size: 15px;
  font-weight: 500;
  background: transparent;
  border: none;
  color: var(--text-0);
  width: 100%;
}
.palette-head input::placeholder { color: var(--text-4); font-weight: 400; }

.palette-body {
  max-height: 52vh;
  padding: 6px;
}

.palette-group { margin-bottom: 2px; }
.palette-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
  padding: 8px 10px 4px;
}

.palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.3;
}
.palette-item:hover,
.palette-item.active {
  background: oklch(96% 0.02 255);
}
[data-theme="dark"] .palette-item:hover,
[data-theme="dark"] .palette-item.active {
  background: oklch(28% 0.03 255);
}
.palette-item .pi-icon {
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.palette-item .pi-label { flex: 1; }
.palette-item .pi-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-4);
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-3);
}

.palette-foot {
  padding: 8px 14px;
  border-top: 1.5px solid var(--hair);
  background: var(--bg-2);
  font-size: 11px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 0 0 12px 12px;
}
.palette-foot .kbd {
  font-size: 10px;
  padding: 1px 5px;
  background: var(--bg-1);
  border: 1px solid var(--hair);
  border-radius: 3px;
}

.palette-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}


/* ───── AUTONOMOUS #5: Agenda typography + weekend tint + event polish ───── */

[data-theme="light"] .agenda-head {
  padding: 8px 10px 6px;
  background: transparent;
  border-bottom: 1px solid var(--hair);
}
[data-theme="light"] .agenda-head .ag-cell {
  background: transparent;
  color: var(--text-2);
}
[data-theme="light"] .agenda-head .ag-cell .day-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
[data-theme="light"] .agenda-head .ag-cell .day-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
[data-theme="light"] .agenda-head .ag-cell.today {
  background: var(--link);
  border-radius: 8px;
}
[data-theme="light"] .agenda-head .ag-cell.today .day-name {
  color: oklch(95% 0.02 255);
}
[data-theme="light"] .agenda-head .ag-cell.today .day-num {
  color: #fff;
}
[data-theme="light"] .agenda-head .ag-cell.today .day-count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Weekend columns: subtle warm tint so the eye picks up the week shape */
[data-theme="light"] .day-col:nth-of-type(7),
[data-theme="light"] .day-col:nth-of-type(8) {
  background: oklch(98% 0.014 60 / 0.5);
}
[data-theme="light"] .day-col.today {
  background: oklch(97% 0.018 255);
  box-shadow: inset 0 0 0 1px oklch(85% 0.05 255);
}

/* Hour labels */
[data-theme="light"] .hour-col .hour {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Event chips: clamp title to 1 line + crisper time text */
.agenda .event {
  border-radius: 6px;
  padding: 3px 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.agenda .event .ev-title {
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}
.agenda .event .ev-time {
  font-size: 9.5px;
  font-weight: 600;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.85);
}

/* Task-drop chip: small dashed outline vs solid event */
.agenda .task-chip {
  background: oklch(from var(--accent) 96% calc(c * 0.3) h);
  border: 1px dashed var(--accent);
  color: oklch(from var(--accent) 35% c h);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
}
[data-theme="dark"] .agenda .task-chip {
  background: oklch(from var(--accent) 28% calc(c * 0.5) h);
  color: oklch(from var(--accent) 85% c h);
}


/* ───── AUTONOMOUS #6: Mini-month today vs busy dot distinction ───── */

.mini-month { padding: 6px 0 4px; }
.mini-month .mm-head {
  padding: 0 8px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mini-month .mm-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-1);
}
.mini-month .mm-nav {
  width: 20px; height: 20px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--text-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.mini-month .mm-nav:hover {
  background: var(--bg-3);
  color: var(--text-1);
}

.mini-month .mm-grid.mm-dow {
  padding: 0 8px 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-4);
  text-transform: uppercase;
}
.mini-month .mm-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 4px;
  gap: 1px;
}

.mini-month .mm-cell {
  position: relative;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  border-radius: 4px;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.mini-month .mm-cell:hover { background: var(--bg-3); color: var(--text-0); }
.mini-month .mm-cell.blank { visibility: hidden; cursor: default; }
.mini-month .mm-cell.inwk {
  color: var(--text-1);
  font-weight: 650;
}
.mini-month .mm-cell.busy {
  color: oklch(45% 0.16 255);
}
.mini-month .mm-cell.today {
  background: var(--link);
  color: #fff !important;
  font-weight: 700;
}
.mini-month .mm-cell.today:hover { background: oklch(40% 0.18 255); }

/* Event dot — subtle, under the day number, distinct from today-fill */
.mini-month .mm-dot {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: oklch(50% 0.14 255);
}
.mini-month .mm-cell.today .mm-dot { background: rgba(255,255,255,0.85); }


/* ───── AUTONOMOUS #7: Topbar popover harmonization ─────
   Quick-add, Layout, Notifications, View dropdowns now share one
   visual system with the sb-filter-pop. */

[data-theme="light"] .tb-pop {
  background: var(--bg-1);
  border: 2px solid var(--hair-2);
  border-radius: 10px;
  padding: 6px;
  min-width: 220px;
  box-shadow:
    0 4px 12px rgba(15, 22, 36, 0.08),
    0 18px 40px -10px rgba(15, 22, 36, 0.14);
  z-index: 60;
}
[data-theme="light"] .tb-pop-wide { min-width: 320px; }

.tbp-section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
  padding: 8px 10px 4px;
}

.tbp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-1);
}
.tbp-row:hover { background: var(--bg-2); }
.tbp-row.active {
  background: oklch(96% 0.02 255);
  color: var(--link);
  font-weight: 650;
}
.tbp-row .kbd {
  margin-left: auto;
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 1px 5px;
  background: var(--bg-3);
  border-radius: 3px;
  color: var(--text-3);
}
.tbp-row.tbp-muted { color: var(--text-3); }

.tbp-sep {
  height: 1px;
  background: var(--hair);
  margin: 4px -2px;
}

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

.tbp-seg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-2);
}

.tbp-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  cursor: pointer;
}
.tbp-item:hover { background: var(--bg-2); }
.tbp-item b { font-weight: 650; color: var(--text-0); }
.tbp-item-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.tbp-item-sub {
  font-size: 11px;
  color: var(--text-4);
  margin-top: 2px;
}


/* ───── Bonus: split-btn caret alignment fix ───── */
.split-btn .sb-caret {
  border-left: 1px solid var(--hair);
  padding: 0 8px;
}
[data-theme="light"] .split-btn .sb-caret:hover {
  background: var(--bg-2);
}


/* ───── Bonus: Notif bell dot alignment ───── */
.topbar .ic-btn .dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ai);
  box-shadow: 0 0 0 2px var(--pane-topbar-bg);
}
.topbar .ic-btn { position: relative; }


/* ═════════════════════════════════════════════════════════════════════
   v6 · POLISH PASS 3 — widescreen kanban + slim hero + email condense
   ═════════════════════════════════════════════════════════════════════ */


/* ───── Widen kanban columns ─────
   Trim sidebar + email rail so the kanban center gets meaningful
   column width (~140–200px per card at 1280px+). Optimized for 16:9
   widescreen workflow — the primary use case. */

:root {
  --rail-w: 180px;                     /* was 212px — −32px */
  --email-w: 300px;                    /* was 350px — −50px */
  --email-collapsed-w: 44px;           /* was 48px */
}

.workspace { grid-template-columns: 1fr var(--email-w); }
.workspace.email-collapsed { grid-template-columns: 1fr var(--email-collapsed-w); }

.sidebar { width: var(--rail-w); }

/* Kanban row label column slightly narrower so the 5 project columns
   gain a few more px each */
.kgrid-head,
.kgrid-body {
  grid-template-columns: 72px repeat(var(--cols, 5), minmax(0, 1fr)) !important;
  gap: 6px !important;
}

/* Cards must fill their column — no more max-width clamping */
.tcard, .card {
  width: 100%;
  min-width: 0;
}
/* Card title breathes: allow up to 2 lines, more padding, 13px */
.tcard .tcard-title,
.note .title-text,
.event .title-text,
.goal .title-text {
  font-size: 13px !important;
  line-height: 1.3 !important;
  -webkit-line-clamp: 2 !important;
  min-height: 2.6em;
}

/* Ensure card body has breathing room for 2-line titles + meta */
.tcard .tcard-body {
  padding: 8px 10px;
}


/* ───── Slim kanban hero headers ─────
   Dramatically reduce vertical space: from ~142px hero to ~56px rect.
   Strip the big stat block + sparkline + due-bar to compact inline
   readouts. Project still distinguishable by tone, text still
   legible, footprint halved. */

.proj-hero {
  min-height: 0 !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  row-gap: 2px !important;
  column-gap: 8px !important;
  align-items: center !important;
}

/* Further mute pastel — lift lightness 91→96%, drop chroma to 18%
   of base — reads as soft tint, not color block */
[data-theme="light"] .proj-hero {
  background:
    linear-gradient(180deg,
      oklch(from var(--proj-bg) 98% calc(c * 0.12) h),
      oklch(from var(--proj-bg) 95% calc(c * 0.18) h)) !important;
  box-shadow:
    inset 0 0 0 1px oklch(from var(--proj-bg) 80% calc(c * 0.25) h),
    0 1px 2px rgba(15, 22, 36, 0.03) !important;
}

/* Row 1: project name + trend (right) */
.proj-hero .ph-top {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
[data-theme="light"] .proj-hero .ph-name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: oklch(from var(--proj-bg) 30% c h) !important;
}
[data-theme="light"] .proj-hero .ph-name .sw {
  width: 4px; height: 10px;
  border-radius: 2px;
  background: oklch(from var(--proj-bg) 52% c h) !important;
  box-shadow: none !important;
}
[data-theme="light"] .proj-hero .ph-trend {
  font-size: 11px !important;
  color: oklch(from var(--proj-bg) 38% calc(c * 0.7) h) !important;
  opacity: 0.8 !important;
}

/* Row 2: inline meta + compact due readout (replaces stat-row + due) */
.proj-hero .ph-meta {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: flex !important;
  gap: 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  opacity: 0.85 !important;
  color: oklch(from var(--proj-bg) 35% calc(c * 0.5) h) !important;
}
[data-theme="light"] .proj-hero .ph-meta b {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: oklch(from var(--proj-bg) 25% c h) !important;
  margin-right: 3px !important;
}

/* Collapse/hide the big stat + sparkline + due-bar for slim mode.
   They live in kgrid-body under the hero; redundant here. */
.proj-hero .ph-stat-row,
.proj-hero .ph-due {
  display: none !important;
}

/* Adjust the kanban auto-resize formula: hero is now ~56px instead
   of 148. Everything else stays. */


/* ───── Email content max-condense ─────
   From 115px (urgent) / 87px (regular) → ~88px / ~70px.
   Reduce padding to 4/8, line1 17 → 15, snippet 2-line at 11.5/1.25,
   chip row inline into snippet gap, avatar drops 30 → 26, quick-reply
   chips shrink. The hero shrinks from 108px → ~78px. */

.email-item-v2 {
  padding: 5px 10px 6px !important;
  gap: 6px !important;
  grid-template-columns: 3px 28px minmax(0, 1fr) !important;
}

.email-item-v2 .ei-acctrail { width: 3px !important; }
.email-item-v2 .ei-avatar {
  width: 26px !important;
  height: 26px !important;
  font-size: 9.5px !important;
}
.email-item-v2 .ei-avatar-mark {
  width: 12px !important;
  height: 12px !important;
  right: -2px !important;
  bottom: -2px !important;
}
.email-item-v2 .ei-avatar-mark svg { width: 9px !important; height: 9px !important; }

.email-item-v2 .ei-main { gap: 0 !important; }
.email-item-v2 .ei-line1 {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  gap: 5px !important;
  margin-bottom: 0 !important;
}
.email-item-v2 .ei-from { max-width: 38% !important; }
.email-item-v2 .ei-time { font-size: 10.5px !important; }
.email-item-v2 .ei-dot-unread { width: 6px !important; height: 6px !important; }

.email-item-v2 .ei-snip-tight {
  font-size: 11.5px !important;
  line-height: 1.28 !important;
  max-height: 2.56em !important;
  min-height: 2.56em !important;
}

.email-item-v2 .ei-chips-tight {
  min-height: 14px !important;
  gap: 3px !important;
  padding-top: 2px !important;
}
.email-item-v2 .ei-chip,
.email-item-v2 .sent-chip {
  font-size: 9.5px !important;
  padding: 1px 5px !important;
}
.email-item-v2 .ei-via { font-size: 9.5px !important; padding-left: 3px !important; }

.email-item-v2 .ei-quickreplies {
  margin-top: 2px !important;
  gap: 3px !important;
}
.email-item-v2 .qr-chip {
  padding: 1px 7px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

/* Email group header: slimmer */
.email-group .egrp-head {
  padding: 5px 10px !important;
  font-size: 11px !important;
  min-height: 24px;
}
.email-group .egrp-head .egrp-title { font-weight: 700 !important; font-size: 11px !important; }
.email-group .egrp-head .egrp-sub   { font-size: 10px !important; color: var(--text-4); }
.email-group .egrp-head .egrp-count {
  font-size: 10px !important;
  padding: 0 5px !important;
  min-width: 18px; text-align: center;
  background: var(--bg-3);
  border-radius: 999px;
  color: var(--text-2);
}

/* AI Triage hero — shrink further */
[data-theme="light"] .email-hero {
  margin: 6px 8px !important;
  padding: 8px 10px !important;
}
[data-theme="light"] .email-hero .eh-big { font-size: 24px !important; }
[data-theme="light"] .email-hero .eh-label { font-size: 8.5px !important; letter-spacing: 0.12em; }
[data-theme="light"] .email-hero .eh-sub   { font-size: 10px !important; }
[data-theme="light"] .email-hero .eh-stat {
  padding: 3px 6px !important;
}
[data-theme="light"] .email-hero .eh-stat-num { font-size: 13px !important; }
[data-theme="light"] .email-hero .eh-stat-lbl { font-size: 8px !important; letter-spacing: 0.09em; }

/* Account pills — shorter still */
.email-accounts-big { padding: 5px 8px !important; gap: 5px !important; }
.email-accounts-big .acct-pill {
  height: 28px !important;
  font-size: 11.5px !important;
  gap: 5px !important;
  padding: 0 7px !important;
}
.email-accounts-big .acct-mark { width: 18px !important; height: 18px !important; }
.email-accounts-big .acct-badge {
  font-size: 10px !important;
  padding: 1px 5px !important;
  min-width: 18px;
}

/* Email pane-head tighter */
.email-rail .pane-head { padding: 5px 8px !important; min-height: 30px; }


/* ═════════════════════════════════════════════════════════════════════
   v6 · MUTED PASTEL THEME — coordinated pane palette
   Every pane gets a tint in the ~0.02–0.03 chroma range so no pane
   feels like "stark white against colored pane" anymore. The sidebar
   tan sets the reference warmth; other panes rotate hue but match
   chroma so they read as a coordinated family.
   ═════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  /* Canvas (outermost gutter — seen between panes) */
  --bg-canvas: oklch(90% 0.020 75);                 /* warm beige */

  /* Panes — muted pastels, coordinated chroma */
  --pane-sidebar-bg: oklch(94% 0.028 82);           /* warm tan (was --bg-rail) */
  --pane-topbar-bg:  oklch(95% 0.022 82);           /* lighter warm tan */
  --pane-subbar-bg:  oklch(96.5% 0.018 82);         /* faintest warm tan */
  --pane-insights-bg: oklch(94% 0.030 95);          /* pale cream/peach */
  --pane-kanban-bg:  oklch(97% 0.010 90);           /* warm off-white */
  --pane-agenda-bg:  oklch(95% 0.025 200);          /* pale sage */
  --pane-email-bg:   oklch(94% 0.025 290);          /* pale lavender */
  --pane-status-bg:  oklch(93% 0.025 82);           /* warm tan */

  /* Keep --bg-rail alias for legacy rules */
  --bg-rail:         var(--pane-sidebar-bg);

  /* Card-on-pane backgrounds need a white lift so cards still read as
     elevated. Pure white against a pastel pane = crisp contrast. */
  --bg-1:      #ffffff;
  --bg-2:      oklch(98% 0.008 82);
  --bg-3:      oklch(95.5% 0.015 82);
  --bg-4:      oklch(92% 0.020 82);
  --bg-5:      oklch(88% 0.026 82);

  /* Hairlines — derived from the tan family for warmth */
  --hair:      oklch(86% 0.020 82);
  --hair-2:    oklch(80% 0.025 82);
  --hair-3:    oklch(72% 0.030 82);

  --shadow-pane:
    0 0 0 2px var(--hair-2),
    0 1px 2px rgba(40, 30, 10, 0.04),
    0 4px 14px -6px rgba(40, 30, 10, 0.10),
    0 12px 24px -12px rgba(40, 30, 10, 0.08);
}

/* Apply new per-pane tokens. These rules override the earlier
   [data-theme="light"] selectors because they come later in the file. */
[data-theme="light"] .sidebar {
  background: var(--pane-sidebar-bg);
  border-right: 2px solid var(--hair-2);
}
[data-theme="light"] .topbar {
  background: var(--pane-topbar-bg);
  border-bottom: 2px solid var(--hair-2);
}
[data-theme="light"] .subbar {
  background: var(--pane-subbar-bg);
  border-bottom: 2px solid var(--hair-2);
}
[data-theme="light"] .insights-strip {
  background: var(--pane-insights-bg);
  border-bottom: 2px solid var(--hair-2);
}
[data-theme="light"] .kanban-wrap,
[data-theme="light"] .pane.kanban-wrap {
  background: var(--pane-kanban-bg);
}
[data-theme="light"] .pane.agenda,
[data-theme="light"] .agenda {
  background: var(--pane-agenda-bg);
}
[data-theme="light"] .email-rail {
  background: var(--pane-email-bg);
}
[data-theme="light"] .statusbar {
  background: var(--pane-status-bg);
  border-top: 2px solid var(--hair-2);
}

/* Canvas (gutter between panes) gets the warm beige */
[data-theme="light"] body,
[data-theme="light"] html,
[data-theme="light"] .app,
[data-theme="light"] .main,
[data-theme="light"] .workspace {
  background: var(--bg-canvas);
}

/* Cards on pastel panes — pure white gives crisp separation */
[data-theme="light"] .tcard,
[data-theme="light"] .card {
  background: #ffffff;
  border: 1.5px solid var(--hair);
}

/* AI Triage hero on the pale-lavender email pane needs to sit higher
   than the pane background, not match it. Bump to a faint tinted white. */
[data-theme="light"] .email-hero {
  background: oklch(98% 0.012 290);
  border-color: oklch(82% 0.030 290);
}

/* Agenda sage → subtle adjustments for legibility */
[data-theme="light"] .agenda .day-col.today {
  background: oklch(96% 0.035 200);
  box-shadow: inset 0 0 0 1px oklch(80% 0.05 200);
}
[data-theme="light"] .agenda .day-col:nth-of-type(7),
[data-theme="light"] .agenda .day-col:nth-of-type(8) {
  background: oklch(95% 0.020 82 / 0.4);  /* weekends warmer */
}
[data-theme="light"] .agenda .hour-line {
  border-top-color: oklch(90% 0.020 200);
}


/* ═════════════════════════════════════════════════════════════════════
   v6 · COMPACT TASK CARDS + INLINE EDITS
   Default card shows only: checkbox + title + date + priority. Expand
   chevron reveals full details. All fields editable via popovers.
   ═════════════════════════════════════════════════════════════════════ */

.tcard-compact {
  position: relative;
  padding: 0 !important;
  min-height: 0 !important;
  margin-bottom: 4px;
}
.tcard-compact .tcard-rail {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent, var(--hair-2));
  border-radius: 3px 0 0 3px;
}
.tcard-compact .tcard-body {
  padding: 5px 8px 5px 10px !important;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Row 1: checkbox + title + expand */
.tcard-compact .tcard-line1 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.tcard-compact .checkbox {
  flex-shrink: 0;
  width: 14px; height: 14px;
  border: 1.5px solid var(--hair-2);
  border-radius: 3px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 100ms ease, background 100ms ease;
}
.tcard-compact .checkbox:hover { border-color: var(--hair-3); }
.tcard-compact .checkbox.checked {
  background: var(--link);
  border-color: var(--link);
}
.tcard-compact.done .tcard-title {
  text-decoration: line-through;
  color: var(--text-4);
}
.tcard-compact .tcard-title {
  flex: 1;
  min-width: 0;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--text-0);
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  cursor: pointer;
  padding: 1px 3px;
  margin: -1px -3px;
  border-radius: 3px;
  -webkit-line-clamp: unset !important;
  min-height: 0 !important;
  display: block !important;
}
.tcard-compact .tcard-title:hover {
  background: var(--bg-3);
}
.tcard-compact .tcard-expand {
  flex-shrink: 0;
  width: 18px; height: 18px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 3px;
  color: var(--text-4);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tcard-compact .tcard-expand:hover {
  background: var(--bg-3);
  color: var(--text-1);
}

/* Row 2: date chip + priority chip */
.tcard-compact .tcard-line2 {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 20px;   /* align under title (past checkbox) */
  flex-wrap: nowrap;
  overflow: hidden;
}
.tc-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  border-radius: 4px;
  border: 1px solid var(--hair);
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 100ms ease, background 100ms ease;
  position: relative;
  white-space: nowrap;
}
.tc-chip:hover {
  border-color: var(--hair-3);
  background: var(--bg-1);
}
.tc-chip-date.overdue {
  background: oklch(94% 0.06 25);
  border-color: oklch(82% 0.12 25);
  color: oklch(42% 0.18 25);
}
.tc-chip-date.soon {
  background: oklch(95% 0.06 55);
  border-color: oklch(85% 0.1 55);
  color: oklch(44% 0.16 55);
}
.tc-chip-prio.prio-high {
  background: oklch(94% 0.06 25);
  border-color: oklch(80% 0.14 25);
  color: oklch(40% 0.2 25);
  letter-spacing: 0.08em;
}
.tc-chip-prio.prio-med {
  background: oklch(95% 0.06 70);
  border-color: oklch(82% 0.1 70);
  color: oklch(42% 0.17 70);
  letter-spacing: 0.06em;
}
.tc-chip-prio.prio-low {
  background: oklch(96% 0.04 230);
  border-color: oklch(82% 0.08 230);
  color: oklch(42% 0.14 230);
  letter-spacing: 0.04em;
}
.tc-chip-prio.prio-none {
  color: var(--text-4);
  border-style: dashed;
}

.tc-flag {
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  letter-spacing: 0.1em;
  margin-left: auto;
}
.tc-flag.overdue { background: oklch(92% 0.07 25);  color: oklch(42% 0.2 25); }
.tc-flag.soon    { background: oklch(94% 0.07 55);  color: oklch(44% 0.18 55); }


/* Expanded details — appears below rows 1/2 when card is expanded */
.tcard-compact.expanded {
  background: var(--bg-2) !important;
  border-color: var(--hair-3) !important;
}
.tcard-expanded {
  padding-top: 4px;
  margin-top: 3px;
  border-top: 1px dashed var(--hair);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tcard-expanded .tcard-week {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-3);
}
.tcard-expanded .tcard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.tcard-expanded .tag-pill,
.tcard-expanded .tag-proj {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
}
.tcard-expanded .tcard-foot {
  padding-top: 2px;
  border-top: none;
  gap: 6px;
  font-size: 10px;
  color: var(--text-4);
}


/* ─── Inline-edit popovers ─── */

.tc-pop {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  z-index: 50;
  background: var(--bg-1);
  border: 2px solid var(--hair-2);
  border-radius: 8px;
  box-shadow:
    0 4px 14px rgba(40, 30, 10, 0.10),
    0 14px 28px -8px rgba(40, 30, 10, 0.14);
  min-width: 200px;
  padding: 8px;
  font-size: 12px;
  color: var(--text-1);
  cursor: default;
}
.tc-pop-anchor-title { left: 22px; right: 22px; min-width: 240px; }

.tc-pop-body { display: flex; flex-direction: column; gap: 6px; }
.tc-pop-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-4);
}
.tc-pop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.tc-pop-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tc-pop-opt {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--hair);
  background: var(--bg-2);
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  color: var(--text-1);
}
.tc-pop-opt:hover {
  border-color: var(--hair-3);
  background: var(--bg-3);
}
.tc-pop-opt.active {
  border-color: var(--link);
  background: oklch(96% 0.02 255);
  color: var(--link);
}
.tc-pop-prio {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tc-pop-prio-sw {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tc-pop-input {
  flex: 1;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid var(--hair-2);
  border-radius: 4px;
  background: #fff;
  color: var(--text-0);
  outline: none;
  min-width: 0;
}
.tc-pop-input:focus {
  border-color: var(--link);
  box-shadow: 0 0 0 2px oklch(60% 0.18 255 / 0.25);
}
.tc-pop-go {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  background: var(--link);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.tc-pop-go:hover { filter: brightness(1.05); }
.tc-pop-cancel {
  padding: 4px 10px;
  font-size: 11px;
  background: var(--bg-2);
  border: 1px solid var(--hair);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-2);
}
.tc-pop-cancel:hover { background: var(--bg-3); }

/* Cards have overflow-hidden by default so absolute popovers need clipping off */
.tcard-compact { overflow: visible !important; }
.tcard-compact .tcard-body { overflow: visible !important; }
.kcell { overflow: visible; }


/* ═════════════════════════════════════════════════════════════════════
   v6 · UNIVERSAL RESIZERS — drag any pane border
   Every adjacent pane has a thin draggable handle. Hover shows a faint
   accent; drag shows a strong accent. Double-click resets to default.
   ═════════════════════════════════════════════════════════════════════ */

/* The app-level inline grid-template-columns set in v2-app.jsx takes
   precedence over the CSS rules that used to drive layout. We still
   keep the base grid so a non-JS-rendered page has a shell. */
.app {
  display: grid;
  grid-template-columns: var(--rail-w) 6px 1fr;
  grid-template-rows: 100vh;
  min-height: 0;
  overflow: hidden;
}
.app.rail-collapsed {
  grid-template-columns: var(--rail-w-collapsed, 52px) 6px 1fr;
}

/* Workspace still has a 3-col grid (center / resizer / email-rail).
   Inline style from React sets the exact widths. */
.workspace {
  display: grid;
  grid-template-columns: 1fr 6px 300px;
  min-height: 0;
  overflow: hidden;
}

/* Resizer — the handle between panes */
.resizer {
  position: relative;
  z-index: 3;
  user-select: none;
  -webkit-user-select: none;
  background: transparent;
}
.resizer-vertical {
  width: 6px;
  cursor: col-resize;
  height: 100%;
}
.resizer-horizontal {
  height: 6px;
  cursor: row-resize;
  width: 100%;
}

.resizer-grip {
  position: absolute;
  pointer-events: none;
  transition: background 120ms ease;
}
.resizer-vertical .resizer-grip {
  left: 2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
}
.resizer-horizontal .resizer-grip {
  top: 2px;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
}
.resizer:hover .resizer-grip {
  background: oklch(72% 0.06 82);   /* match hair-3 */
}
.resizer.dragging,
.resizer:active {
  background: oklch(70% 0.12 255 / 0.15);
}
.resizer.dragging .resizer-grip,
.resizer:active .resizer-grip {
  background: var(--link);
}

/* Global cursor lock during drag — prevents flicker */
body.body-col-resize,
body.body-col-resize * {
  cursor: col-resize !important;
  user-select: none;
  -webkit-user-select: none;
}
body.body-row-resize,
body.body-row-resize * {
  cursor: row-resize !important;
  user-select: none;
  -webkit-user-select: none;
}

/* Spacer placeholder when a resizer is hidden (keeps the grid cell) */
.resizer-spacer {
  width: 6px;
  height: 100%;
  background: transparent;
}

/* Remove the old divider-h rules by overriding — we now use .resizer-horizontal */
.divider-h { display: none !important; }

/* Pane margins need to accommodate the new resizers living in the grid.
   The earlier rules put margin: 6px 6px on kanban-wrap etc to leave a
   visible gutter. Now the resizers ARE the gutter, so trim the margins
   adjacent to resizer columns. */
[data-theme="light"] .kanban-wrap,
[data-theme="light"] .pane.kanban-wrap { margin: 6px 0 0 6px; }
[data-theme="light"] .pane.agenda,
[data-theme="light"] .agenda { margin: 0 0 6px 6px; }
[data-theme="light"] .email-rail { margin: 6px 6px 6px 0; }

/* Tooltip on the handle — optional, lives in title attr */
.resizer[title] { }