/* Lebensorganisation — Cockpit v2
   15 English domains · scan-first card design · slim briefing
   Type: Geist + Geist Mono */

/* ── Normal (simplified) UI mode ────────────────────────────────────────────
   Hides Pro-only detail; the collapsed card becomes Title · Category · Deadline
   · Action. Pro mode (data-uimode="pro") keeps everything. */
.app[data-uimode="normal"] .urgency-bar,
.app[data-uimode="normal"] .mode-pip,
.app[data-uimode="normal"] .recur-badge,
.app[data-uimode="normal"] .dl-auto-badge,
.app[data-uimode="normal"] .item-time,
.app[data-uimode="normal"] .item-col-prio,
.app[data-uimode="normal"] .item-col-status,
.app[data-uimode="normal"] .item-detail-meta,
.app[data-uimode="normal"] .task-brief,
.app[data-uimode="normal"] .item-source-line,
.app[data-uimode="normal"] .msg-meta,
.app[data-uimode="normal"] .composer-hint { display: none !important; }

.app[data-uimode="normal"] .item-row {
  display: flex; align-items: center; gap: 12px;
}
.app[data-uimode="normal"] .item-main { flex: 1 1 auto; min-width: 0; }
.app[data-uimode="normal"] .item-col  { flex: 0 0 auto; }
/* Always reserve the action slot so cards align whether or not a button is shown */
.app[data-uimode="normal"] .item-col-action { min-width: 64px; justify-content: flex-end; }

/* ── Task brief (structured context in the expanded card) ─────────────────── */
.task-brief {
  margin: 10px 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 9px 11px;
}
.task-brief-head {
  font-size: var(--t-micro, 10.5px);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 7px;
}
.task-brief-grid { display: flex; flex-direction: column; gap: 6px; }
.task-brief-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: start;
}
.task-brief-label {
  font-size: var(--t-xs, 12px);
  color: var(--ink-3);
  font-weight: 500;
}
.task-brief-value {
  font-size: var(--t-xs, 12px);
  color: var(--ink-2);
  line-height: 1.45;
  min-width: 0;
  word-break: break-word;
}
.task-brief-empty { color: var(--ink-4); }
.task-brief-detail {
  display: block;
  margin-top: 2px;
  font-size: var(--t-micro, 10.5px);
  color: var(--ink-4);
  line-height: 1.4;
}

:root {
  --bg:        oklch(0.985 0.003 95);
  --surface:   oklch(1     0     0);
  --surface-2: oklch(0.975 0.004 95);
  --surface-3: oklch(0.952 0.006 95);
  --hairline:  oklch(0.905 0.005 95);
  --hairline-strong: oklch(0.840 0.006 95);
  /* Ink ramp — darkened ink-3/ink-4 to clear WCAG AA on off-white (P12.1) */
  --ink:       oklch(0.24  0.010 270);
  --ink-2:     oklch(0.40  0.010 270);
  --ink-3:     oklch(0.50  0.010 270);
  --ink-4:     oklch(0.56  0.008 270);

  /* ── Systematic scales (P10) ───────────────────────────── */
  /* Spacing — 4 / 8 / 12 / 16 / 24 / 32 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  /* Type ramp — fixed steps, no ad-hoc sizes (P10.2 / P15.3) */
  --t-micro: 11px;   /* uppercase eyebrow labels */
  --t-xs:    12px;   /* dense meta */
  --t-sm:    13px;   /* secondary text */
  --t-base:  14.5px; /* body */
  --t-md:    15.5px; /* card titles / emphasis */
  --t-lg:    18px;   /* section titles */
  --line:    1.5;
  /* Focus ring — interaction affordance only (P12.2) */
  --focus:   oklch(0.55 0.17 250);

  --prio-0:  oklch(0.54 0.20 24);
  --prio-1:  oklch(0.68 0.17 58);
  --prio-2:  oklch(0.50 0.04 270);
  --prio-3:  oklch(0.72 0.02 270);

  /* 15 domain accents */
  --d-medical:    oklch(0.54 0.17 20);
  --d-admin:      oklch(0.50 0.13 252);
  --d-meals:      oklch(0.60 0.13 88);
  --d-pets:       oklch(0.62 0.14 55);
  --d-property:   oklch(0.54 0.12 185);
  --d-family:     oklch(0.55 0.14 320);
  --d-social:     oklch(0.52 0.13 290);
  --d-costs:      oklch(0.52 0.13 155);
  --d-career:     oklch(0.50 0.12 268);
  --d-rental:     oklch(0.54 0.10 225);
  --d-mobility:   oklch(0.62 0.15 45);
  --d-household:  oklch(0.62 0.11 78);
  --d-shopping:   oklch(0.55 0.13 200);
  --d-sport:      oklch(0.56 0.15 130);
  --d-travel:     oklch(0.53 0.14 215);

  --d-medical-tint:    oklch(0.965 0.028 20);
  --d-admin-tint:      oklch(0.965 0.022 252);
  --d-meals-tint:      oklch(0.970 0.022 88);
  --d-pets-tint:       oklch(0.970 0.024 55);
  --d-property-tint:   oklch(0.965 0.022 185);
  --d-family-tint:     oklch(0.965 0.024 320);
  --d-social-tint:     oklch(0.965 0.022 290);
  --d-costs-tint:      oklch(0.965 0.022 155);
  --d-career-tint:     oklch(0.965 0.020 268);
  --d-rental-tint:     oklch(0.965 0.018 225);
  --d-mobility-tint:   oklch(0.970 0.028 45);
  --d-household-tint:  oklch(0.970 0.020 78);
  --d-shopping-tint:   oklch(0.965 0.022 200);
  --d-sport-tint:      oklch(0.970 0.028 130);
  --d-travel-tint:     oklch(0.965 0.024 215);

  /* 5 "other" catch-all domains — desaturated tones per group */
  --d-life-other:           oklch(0.64 0.04 290);
  --d-life-other-tint:      oklch(0.974 0.010 290);
  --d-lifestyle-other:      oklch(0.64 0.04 150);
  --d-lifestyle-other-tint: oklch(0.974 0.010 150);
  --d-finance-other:        oklch(0.64 0.04 185);
  --d-finance-other-tint:   oklch(0.974 0.010 185);
  --d-health-other:         oklch(0.64 0.04 30);
  --d-health-other-tint:    oklch(0.974 0.010 30);
  --d-career-other:         oklch(0.64 0.04 268);
  --d-career-other-tint:    oklch(0.974 0.010 268);

  --radius: 8px;
  --head-h: 61px;
  --shadow-card: 0 1px 0 var(--hairline), 0 1px 3px oklch(0.85 0.005 95 / 0.3);
  --shadow-pop: 0 12px 30px oklch(0.2 0.01 270 / 0.11), 0 2px 6px oklch(0.2 0.01 270 / 0.07);
}

[data-theme="dark"] {
  --bg:        oklch(0.165 0.008 270);
  --surface:   oklch(0.205 0.008 270);
  --surface-2: oklch(0.225 0.008 270);
  --surface-3: oklch(0.255 0.008 270);
  --hairline:  oklch(0.300 0.008 270);
  --hairline-strong: oklch(0.370 0.008 270);
  --ink:       oklch(0.965 0.005 95);
  --ink-2:     oklch(0.800 0.005 95);
  --ink-3:     oklch(0.670 0.008 270);
  --ink-4:     oklch(0.560 0.008 270);

  /* "other" domain tints — dark mode */
  --d-life-other-tint:      oklch(0.26 0.04 290);
  --d-lifestyle-other-tint: oklch(0.26 0.04 150);
  --d-finance-other-tint:   oklch(0.26 0.04 185);
  --d-health-other-tint:    oklch(0.26 0.04 30);
  --d-career-other-tint:    oklch(0.26 0.04 268);

  --d-medical-tint:    oklch(0.28 0.06 20);
  --d-admin-tint:      oklch(0.28 0.05 252);
  --d-meals-tint:      oklch(0.28 0.05 88);
  --d-pets-tint:       oklch(0.28 0.05 55);
  --d-property-tint:   oklch(0.28 0.05 185);
  --d-family-tint:     oklch(0.28 0.05 320);
  --d-social-tint:     oklch(0.28 0.05 290);
  --d-costs-tint:      oklch(0.28 0.05 155);
  --d-career-tint:     oklch(0.28 0.04 268);
  --d-rental-tint:     oklch(0.28 0.04 225);
  --d-mobility-tint:   oklch(0.28 0.06 45);
  --d-household-tint:  oklch(0.28 0.04 78);
  --d-shopping-tint:   oklch(0.28 0.05 200);
  --d-sport-tint:      oklch(0.28 0.06 130);
  --d-travel-tint:     oklch(0.28 0.05 215);

  --shadow-card: 0 1px 0 oklch(0.14 0.008 270), 0 1px 3px oklch(0.10 0.008 270 / 0.5);
  --shadow-pop: 0 12px 28px oklch(0.05 0.01 270 / 0.5), 0 2px 6px oklch(0.05 0.01 270 / 0.4);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--t-base);
  line-height: var(--line);
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: "Geist Mono", ui-monospace, monospace; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea { font: inherit; color: inherit; }

/* ── Dark-mode legibility — counter halation ───────────────────────────────────
   On dark backgrounds the light from white glyphs bleeds into the surrounding
   dark (halation), making text look bolder and blurrier. Light mode is positive
   contrast and renders crisp, so it is left untouched. In dark mode only we:
     1. Drop one weight step on bold display text — the bleed expands thin strokes
        back to a "normal" visual weight (Geist Light/300 is loaded for this).
     2. Loosen tracking on running text so the bleeding letters don't fuse.
     3. Force grayscale smoothing to thin the rendering on macOS/WebKit.
   Tiny uppercase labels keep their weight: they already set generous tracking and
   would read as too faint if thinned. */
[data-theme="dark"] body {
  letter-spacing: 0.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[data-theme="dark"] .item-title,
[data-theme="dark"] .crumb-title,
[data-theme="dark"] .escan-title { font-weight: 500; }            /* was 600 */
[data-theme="dark"] .pc-title,
[data-theme="dark"] .briefing-greet b { font-weight: 400; }       /* was 500 */
[data-theme="dark"] .item[data-importance="1"] .item-title,
[data-theme="dark"] .item[data-importance][data-prio="3"] .item-title { font-weight: 300; }  /* was 400 */

/* ── Accessibility: visible focus + reduced motion (P12.2 / P16.3) ─────────── */
:focus { outline: none; }
:focus-visible,
.nav-item:focus-visible, .d-item:focus-visible, .tab:focus-visible,
.item:focus-visible, .suggestion:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}
@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;
  }
}

/* ── Layout ─────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--side-w, 220px) 4px 1fr var(--chat-w, 360px);
  height: 100vh;
  width: 100vw;
}
.app[data-chat-closed="true"] { grid-template-columns: var(--side-w, 220px) 4px 1fr 0; }

/* ── Sidebar resize handle ───────────────── */
.sidebar-resize-handle {
  grid-column: 2;
  cursor: col-resize;
  position: relative;
  z-index: 10;
  background:
    linear-gradient(var(--hairline-strong), var(--hairline-strong)) center / 1px 100% no-repeat;
  transition: background-size 0.15s, background-color 0.15s;
}
.sidebar-resize-handle:hover,
.sidebar-resize-handle[data-dragging="true"] {
  background-color: var(--hairline-strong);
  background-size: 100% 100%;
}

/* ── Sidebar ─────────────────────────────── */
.sidebar {
  background: var(--surface-2);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  padding: 0 14px;
  height: var(--head-h); box-sizing: border-box;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-3);
  flex-shrink: 0;
}
.brand-mark {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: -0.02em;
  flex-shrink: 0;
}
.brand-name { font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.01em; }
.brand-ver  { font-size: var(--t-micro); color: var(--ink-3); font-family: "Geist Mono", monospace; }

.nav-section {
  padding: 10px 6px 10px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.nav-label {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 4px 8px 5px;
}
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: var(--t-sm); color: var(--ink-2);
  cursor: pointer; user-select: none;
}
.nav-item:hover { background: var(--surface-3); color: var(--ink); }
.nav-item[data-active="true"] {
  background: var(--surface); color: var(--ink);
  font-weight: 500; box-shadow: var(--shadow-card);
}
.nav-count {
  margin-left: auto;
  font-family: "Geist Mono", monospace;
  font-size: var(--t-micro); color: var(--ink-4);
}
.nav-item[data-active="true"] .nav-count { color: var(--ink-3); }
/* …but the alert badge (Pending Approval) keeps white-on-red even when active. */
.nav-item[data-active="true"] .nav-count[data-alert] { color: #fff; }

/* Domain list — scrollable */
.domain-scroll {
  overflow-y: auto;
  flex: 1;
  padding: 4px 6px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
.domain-nav-label {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 10px 8px 5px;
}
.d-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: var(--t-xs); color: var(--ink-2);
  cursor: pointer; user-select: none;
}
.d-item:hover { background: var(--surface-3); color: var(--ink); }
.d-item[data-active="true"] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-card); }
.d-item[data-dim="true"] { opacity: 0.45; }
.d-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.d-num   { font-family: "Geist Mono", monospace; font-size: var(--t-micro); color: var(--ink-4); letter-spacing: 0.04em; flex-shrink: 0; margin-left: 4px; }
.d-count { font-family: "Geist Mono", monospace; font-size: var(--t-micro); color: var(--ink-4); flex-shrink: 0; margin-left: 2px; }

.sidebar-footer {
  border-top: 1px solid var(--hairline);
  padding: 10px 10px;
  display: flex; align-items: center; gap: 9px;
  flex-shrink: 0;
}
.avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--d-admin), var(--d-family));
  color: #fff; display: grid; place-items: center;
  font-size: var(--t-micro); font-weight: 700;
}
.user-greet { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.2; }
.user-name { font-size: var(--t-sm); font-weight: 600; }
.user-meta { font-size: var(--t-micro); color: var(--ink-3); }

/* ── Email Panel ─────────────────────────── */
.email-panel {
  flex-shrink: 0;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.email-panel-label {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 2px 0 2px 2px;
}
.email-panel-hint {
  font-size: var(--t-micro); color: var(--ink-3); line-height: 1.4;
}
.email-panel-hint code {
  font-family: "Geist Mono", monospace;
  font-size: var(--t-micro);
  background: var(--surface-3);
  padding: 1px 4px;
  border-radius: 3px;
}
.email-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: var(--t-xs); font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
  width: 100%;
}
.email-btn:hover:not(:disabled) {
  background: var(--hairline);
  color: var(--ink);
}
.email-btn:disabled {
  opacity: 0.65;
  cursor: default;
}
.email-spinner {
  width: 13px; height: 13px;
  border: 1.5px solid var(--ink-4);
  border-top-color: var(--ink-2);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.email-summary {
  font-size: var(--t-micro); color: var(--ink-3); line-height: 1.4;
  padding: 0 2px;
}
.email-error {
  font-size: var(--t-micro); color: var(--prio-0); line-height: 1.4;
  padding: 0 2px;
}
.email-summary-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: var(--t-micro); color: var(--ink-3); line-height: 1.4;
  padding: 3px 4px; border-radius: 4px;
  cursor: pointer;
  background: none; border: none;
  width: 100%; text-align: left;
  transition: background .12s;
}
.email-summary-btn:hover { background: var(--surface-3); color: var(--ink-2); }
.email-summary-see {
  font-size: var(--t-micro); color: var(--ink-4);
  flex-shrink: 0;
}

/* ── Email Scan Modal ────────────────────── */
.escan-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: oklch(0.1 0.01 270 / 0.45);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.escan-box {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  width: 500px; max-width: 96vw;
  display: flex; flex-direction: column;
  max-height: 82vh;
  overflow: hidden;
}
.escan-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px 13px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.escan-title { font-size: var(--t-base); font-weight: 600; }
/* Scanning spinner panel */
.escan-scanning {
  display: flex; align-items: center; gap: 14px;
  padding: 28px 22px;
  flex-shrink: 0;
}
/* Stats row */
.escan-stats {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px 6px;
  font-size: var(--t-xs); color: var(--ink-3);
  flex-shrink: 0;
}
.escan-dot { color: var(--ink-4); }
.escan-stat-green { color: oklch(0.55 0.16 145); font-weight: 600; }
/* Review hint */
.escan-review-hint {
  padding: 2px 18px 10px;
  font-size: var(--t-xs); color: var(--ink-3);
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
/* Proposed action rows */
.escan-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}
.escan-empty {
  padding: 20px 18px;
  font-size: var(--t-sm); color: var(--ink-3);
  text-align: center; line-height: 1.6;
}
.escan-action-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px 10px 18px;
  border-bottom: 1px solid var(--hairline);
}
.escan-action-row:last-child { border-bottom: none; }
.escan-action-body { flex: 1; min-width: 0; }
.escan-action-text {
  font-size: var(--t-sm); color: var(--ink);
  line-height: 1.4; margin-bottom: 3px;
}
.escan-action-source {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--t-micro); color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.escan-action-del {
  flex-shrink: 0; width: 22px; height: 22px;
  border-radius: 4px; font-size: var(--t-micro);
  color: var(--ink-4); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  transition: background .1s, color .1s;
  margin-top: 1px;
}
.escan-action-del:hover { background: oklch(0.94 0.03 20); color: var(--prio-0); }
/* Details section (collapsible) */
.escan-details-wrap {
  border-top: 1px solid var(--hairline);
  flex-shrink: 0;
}
.escan-details-toggle {
  width: 100%; padding: 8px 18px;
  text-align: left; font-size: var(--t-xs); color: var(--ink-3);
  background: none; border: none; cursor: pointer;
}
.escan-details-toggle:hover { color: var(--ink-2); }
/* Per-email status rows (inside collapsible) */
.escan-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 18px;
  border-bottom: 1px solid var(--hairline);
}
.escan-row:last-child { border-bottom: none; }
.escan-folder {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; flex-shrink: 0;
  padding: 1px 5px; border-radius: 3px;
  background: var(--surface-2); color: var(--ink-3);
  width: 36px; text-align: center;
}
.escan-folder[data-folder="sent"] { background: oklch(0.97 0.01 240); color: oklch(0.45 0.08 240); }
[data-theme="dark"] .escan-folder[data-folder="sent"] { background: oklch(0.27 0.03 240); color: oklch(0.65 0.08 240); }
.escan-subject {
  flex: 1; min-width: 0;
  font-size: var(--t-xs); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.escan-icon { flex-shrink: 0; width: 20px; text-align: center; font-size: var(--t-sm); font-weight: 700; }
.escan-action { color: oklch(0.55 0.16 145); }
.escan-none   { color: var(--ink-4); }
.escan-seen   { color: var(--hairline-strong); font-weight: 400; }
/* Override button: force a task from an email the engine skipped */
.escan-force { flex-shrink: 0; font-size: var(--t-micro); padding: 2px 7px; cursor: pointer;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 5px; white-space: nowrap; }
.escan-force:hover { border-color: var(--hairline-strong); color: var(--ink); }
.escan-forced { flex-shrink: 0; font-size: var(--t-micro); color: oklch(0.55 0.16 145);
  white-space: nowrap; }
/* Done state */
.escan-done {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 32px 18px;
  text-align: center; flex-shrink: 0;
}
.escan-done-tick {
  font-size: 28px; color: oklch(0.55 0.16 145);
  line-height: 1;
}
/* Footer */
.escan-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--hairline);
  display: flex; align-items: center;
  flex-shrink: 0;
}
/* Minimised chip — fixed at bottom-centre */
.escan-chip {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 300;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 99px;
  box-shadow: var(--shadow-pop);
  padding: 8px 16px;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-xs); cursor: pointer;
  transition: box-shadow .15s;
}
.escan-chip:hover { box-shadow: var(--shadow-pop), 0 0 0 2px var(--hairline-strong); }
.escan-chip-expand { font-size: var(--t-micro); color: var(--ink-4); margin-left: 4px; }

/* ── Bulk selection ──────────────────────── */
.toolbar-bulk {
  display: flex; align-items: center;
  gap: 8px; padding: 8px 16px;
  background: oklch(0.97 0.01 240 / 0.6);
  border-bottom: 1px solid oklch(0.88 0.02 240);
  flex-shrink: 0;
}
[data-theme="dark"] .toolbar-bulk {
  background: oklch(0.235 0.02 240 / 0.6);
  border-bottom-color: oklch(0.32 0.02 240);
}
.bulk-select-all {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--t-xs); cursor: pointer; user-select: none;
}
.bulk-checkbox {
  width: 15px; height: 15px; border-radius: 4px;
  border: 1.5px solid var(--hairline-strong);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .1s, border-color .1s;
}
.bulk-checkbox.checked {
  background: var(--ink); border-color: var(--ink);
}
.bulk-checkbox.checked::after {
  content: "✓"; font-size: var(--t-micro); color: var(--bg); font-weight: 700;
}
.bulk-checkbox.partial {
  background: var(--ink-3); border-color: var(--ink-3);
}
.bulk-checkbox.partial::after {
  content: "−"; font-size: var(--t-micro); color: var(--bg); font-weight: 700;
}
/* Checkbox on card */
.item-bulk-check {
  display: flex; align-items: center; padding: 0 10px 0 12px;
  flex-shrink: 0;
}
.item[data-done] .bulk-checkbox { opacity: 0.45; }

/* ── Main ─────────────────────────────── */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; container-type: inline-size; }

/* Topbar */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px;
  height: var(--head-h); box-sizing: border-box;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-3);
  flex-shrink: 0;
}
.crumb { font-size: var(--t-xs); color: var(--ink-3); display: flex; align-items: baseline; }
.crumb b { color: var(--ink); font-weight: 500; }
.crumb-title { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; }
.crumb-sep { margin: 0 5px; color: var(--ink-4); }
.spacer { flex: 1; }
.search-bar {
  display: flex; align-items: center; gap: 7px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 7px;
  padding: 5px 9px;
  width: 280px;
  color: var(--ink-3); font-size: var(--t-xs);
}
.search-bar kbd {
  font-family: "Geist Mono", monospace; font-size: var(--t-micro);
  background: var(--surface-3); border-radius: 3px;
  padding: 1px 5px; color: var(--ink-3); margin-left: auto;
}
.icon-btn {
  width: 32px; height: 32px; border-radius: 7px;
  display: grid; place-items: center; color: var(--ink-3);
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }

/* Briefing — slim status bar */
.briefing {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-3);
  flex-shrink: 0;
}
.briefing-date {
  font-size: var(--t-xs); color: var(--ink-3);
  font-family: "Geist Mono", monospace;
  flex-shrink: 0;
}
.briefing-divider { width: 1px; height: 14px; background: var(--hairline-strong); flex-shrink: 0; }
.bstat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-xs);
  white-space: nowrap;
}
.bstat-num {
  font-family: "Geist Mono", monospace;
  font-weight: 600; font-size: var(--t-sm);
}
.bstat-num.critical { color: var(--prio-0); }
.bstat-num.warning  { color: var(--prio-1); }
.bstat-num.ok       { color: var(--d-costs); }
.bstat-label { color: var(--ink-3); }
.bstat-sep { color: var(--ink-4); font-size: var(--t-micro); }
.briefing-greet {
  margin-left: auto;
  font-size: var(--t-xs); color: var(--ink-3);
}
.briefing-greet b { color: var(--ink-2); font-weight: 500; }

/* Sort toolbar */
.toolbar {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-3);
  flex-shrink: 0;
}
.tabs {
  display: flex; align-items: center; gap: 1px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 7px; padding: 2px;
}
.tab {
  padding: 6px 12px;
  border-radius: 5px;
  font-size: var(--t-xs); color: var(--ink-3);
}
.tab[data-active="true"] {
  background: var(--surface); color: var(--ink);
  font-weight: 500; box-shadow: var(--shadow-card);
}
.toolbar-info { font-size: var(--t-xs); color: var(--ink-3); }
.toolbar-info b { color: var(--ink-2); font-weight: 500; }
.toolbar-right { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.btn-ghost {
  font-size: var(--t-xs); padding: 4px 9px;
  border-radius: 6px; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 5px;
}
.btn-ghost:hover { background: var(--surface-3); color: var(--ink); }

/* ── Queue ─────────────────────────────── */
.queue {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 60px;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
.group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 2px 6px;
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
}
.group-head:first-child { padding-top: 4px; }
.group-head .gl { flex: 1; height: 1px; background: var(--hairline); }
.group-head .gc { font-family: "Geist Mono", monospace; color: var(--ink-4); }
.group-head-toggle {
  width: 100%; background: none; border: none; cursor: pointer;
  color: var(--ink-3);
}
.group-head-toggle:hover { color: var(--ink); }
.group-chevron { display: inline-flex; color: var(--ink-4); transition: transform .15s ease; }
.group-chevron[data-open] { transform: rotate(90deg); }

/* ── Item card ─────────────────────────────── */
.item {
  display: flex; align-items: stretch;
  /* --card-bg is set per-card via inline style from taskColors() in JS.
     It's an explicit OKLCH color matching the stripe hue so the tint is
     always blue / orange / grey — never drifted by color-mix hue interpolation. */
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--hairline);
  border-radius: 8px;
  margin-bottom: 5px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .1s ease, box-shadow .12s ease, background .15s ease;
}
.item:hover { border-color: var(--hairline-strong); }
.item[data-focused="true"] {
  border-color: color-mix(in oklch, var(--stripe-color, var(--ink-3)) 36%, var(--hairline));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--stripe-color, var(--ink-3)) 10%, transparent);
}

/* ── Left stripe: width scales with importance (via --stripe-w set per-card in JS) ── */
.item-stripe {
  width: var(--stripe-w, 3px);
  flex-shrink: 0;
  background: var(--stripe-color, var(--hairline-strong));
  transition: width .1s ease;
}

/* ── Done / cancelled tasks: dimmed title ── */
.item[data-importance]:has(.item-detail)  {}  /* noop — keep specificity consistent */
.item[data-done="true"] .item-title,
.item[data-importance][data-prio="3"] .item-title { color: var(--ink-2); font-weight: 400; }

/* Inner layout */
.item-inner {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}

/* Collapsed row — aligned columns: title · category · time · status · action · ▸ */
.item-row {
  display: grid;
  grid-template-columns: minmax(0,1.9fr) 84px 104px 50px 104px 80px 22px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 46px;
}
.item[data-expanded="true"] .item-row {
  padding-bottom: 9px;
}

.item-main { min-width: 0; }
.item-col { display: flex; align-items: center; gap: 6px; min-width: 0; }
.item-col-status { min-width: 0; }
.item-col-status .item-status { min-width: 0; }
.item-col-time { flex-wrap: nowrap; white-space: nowrap; }
.item-col-prio { gap: 8px; }
.item-col-action { justify-content: flex-start; }

.item-title {
  min-width: 0;
  font-size: var(--t-md); font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.item[data-expanded="true"] .item-title {
  -webkit-line-clamp: unset; overflow: visible;
}
/* importance=1 tasks get slightly softer title (low-stakes, no rush) */
.item[data-importance="1"] .item-title { color: var(--ink-2); font-weight: 400; }

/* Firing quick-snooze strip under a firing card */
.item-firing-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 12px 9px;
  border-top: 1px solid color-mix(in oklch, var(--prio-1) 24%, var(--hairline));
}
.item-firing-label {
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
}
.item-firing-actions { display: flex; gap: 6px; }

.item-domain {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: var(--t-xs); color: var(--ink-3);
}
.item-domain-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.item-dl {
  font-family: "Geist Mono", monospace;
  font-size: var(--t-xs); color: var(--ink-3);
  white-space: nowrap;
  display: inline-flex; flex-direction: column; line-height: 1.15;
}
.item-dl-wd { font-size: var(--t-micro); color: var(--ink-4); }
.item-dl.overdue { color: var(--prio-0); font-weight: 600; }
.item-dl.soon    { color: var(--prio-1); font-weight: 500; }
.item-time {
  font-family: "Geist Mono", monospace;
  font-size: var(--t-xs); color: var(--ink-3); font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
  align-self: flex-end;
}

/* When the task column is narrow (e.g. chat rail open), stack into 2 lines */
@container (max-width: 560px) {
  .item-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  }
  .item-main { flex: 1 1 55%; order: 0; min-width: 0; }
  .item-col-action { order: 1; margin-left: auto; }
  .item-chevron { order: 2; }
  .item-col-cat, .item-col-time, .item-col-prio, .item-col-status { order: 3; flex: 0 0 auto; }
}

/* Mode indicator dot */
.mode-pip {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
.mode-pip[data-mode="approval"]   { background: var(--prio-1); box-shadow: 0 0 0 2px color-mix(in oklch, var(--prio-1) 20%, transparent); }
.mode-pip[data-mode="autonomous"] { background: var(--d-costs); }
.mode-pip[data-mode="waiting"]    { background: var(--ink-4); border: 1px solid var(--ink-3); }

/* ── Urgency bar — 4 stacked boxes, filled count = urgency level ─────────
   Color progression is independent of the stripe hue so the two signals
   (importance = tint/stripe, urgency = bar) never visually merge.
   ─────────────────────────────────────────────────────────────────────── */
.urgency-bar {
  display: flex; gap: 2px; align-items: center; flex-shrink: 0;
}
.urg-box {
  width: 4px; height: 11px; border-radius: 1.5px;
  background: var(--hairline-strong);
  transition: background .15s ease;
}
/* Filled boxes: neutral → amber → red as urgency increases */
.urgency-bar[data-level="1"] .urg-box[data-filled] { background: var(--ink-4); }
.urgency-bar[data-level="2"] .urg-box[data-filled] { background: var(--ink-3); }
.urgency-bar[data-level="3"] .urg-box[data-filled] { background: var(--prio-1); }
.urgency-bar[data-level="4"] .urg-box[data-filled] { background: var(--prio-0); }

/* Approve quick-action */
.item-approve {
  font-size: var(--t-sm); font-weight: 600;
  padding: 6px 12px; min-height: 30px;
  background: var(--ink); color: var(--bg);
  border-radius: 6px;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.item-approve:hover { opacity: 0.82; }

/* Expand toggle */
.item-chevron {
  width: 24px; height: 24px; border-radius: 5px;
  display: grid; place-items: center; color: var(--ink-4);
  flex-shrink: 0;
}
.item-chevron:hover { background: var(--surface-3); color: var(--ink-2); }
.item-chevron svg { transition: transform .15s ease; }
.item[data-expanded="true"] .item-chevron svg { transform: rotate(90deg); }

/* Expanded detail */
.item-detail {
  display: none;
  padding: 0 12px 12px 12px;
  border-top: 1px solid var(--hairline);
}
.item[data-expanded="true"] .item-detail { display: block; padding-top: 11px; }

.item-summary {
  font-size: var(--t-base); color: var(--ink-2);
  line-height: 1.6; margin: 0 0 8px;
  max-width: 68ch;
  text-wrap: pretty;
}
.item-source-line {
  font-family: "Geist Mono", monospace;
  font-size: var(--t-micro); color: var(--ink-3);
  margin-bottom: 12px;
  display: flex; gap: 10px; align-items: center;
}
.item-source-line .sep { color: var(--ink-4); }

/* Proposal grid */
.proposal {
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 7px; padding: 10px 12px;
  margin-bottom: 10px;
}
.proposal-head {
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 9px;
}
.proposal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
}
.prop-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px; padding: 9px 11px;
  cursor: pointer;
}
.prop-card:hover { border-color: var(--hairline-strong); }
.prop-card[data-selected="true"] {
  border-color: var(--stripe-color, var(--ink));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--stripe-color, var(--ink)) 15%, transparent);
}
.pc-tag  { font-size: var(--t-micro); color: var(--ink-3); font-family: "Geist Mono", monospace; margin-bottom: 3px; }
.pc-title { font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.pc-meta  { font-size: var(--t-micro); color: var(--ink-3); margin-top: 5px; }
.pc-skill { font-size: var(--t-micro); color: var(--ink-2); margin-top: 6px; padding: 2px 6px;
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 5px;
  display: inline-block; }
/* Missing-input callout for the highlighted/chosen option — deliberately dark/high-contrast */
.opt-callout { margin: 8px 0 2px; padding: 9px 12px; border-radius: 8px;
  background: color-mix(in oklch, var(--ink) 88%, var(--surface)); color: var(--surface);
  font-size: var(--t-xs); line-height: 1.5; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; }
.opt-callout b { color: var(--surface); }
.opt-callout-tag { font-size: var(--t-micro); letter-spacing: 0.06em; padding: 1px 6px;
  border: 1px solid color-mix(in oklch, var(--surface) 40%, transparent); border-radius: 4px;
  opacity: 0.85; }

/* Rationale */
.rationale {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: var(--t-xs); color: var(--ink-3); line-height: 1.55;
  margin-bottom: 10px;
}
.rationale-pip { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4); margin-top: 5px; flex-shrink: 0; }

/* Full action row */
.item-actions {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-top: 4px;
}

/* ── Domain reclassify button ───────────────────── */
.domain-reclassify-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 5px; border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-2); color: var(--ink-2);
  font-size: var(--t-micro); font-weight: 500; cursor: pointer;
  white-space: nowrap;
}
.domain-reclassify-btn:hover { background: var(--surface-3); color: var(--ink); border-color: var(--ink-3); }

/* ── Domain picker overlay ──────────────────────── */
.domain-picker-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: oklch(0.2 0.01 270 / 0.35);
  backdrop-filter: blur(1px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.domain-picker {
  width: min(420px, 92vw);
  max-height: 72vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
.domain-picker-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.dp-group { padding: 6px 0; border-bottom: 1px solid var(--hairline); }
.dp-group:last-child { border-bottom: none; }
.dp-group-label {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 4px 14px 3px;
}
.dp-option {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 14px;
  background: transparent; border: none; color: var(--ink-2);
  font-size: var(--t-xs); text-align: left; cursor: pointer;
}
.dp-option:hover { background: var(--surface-2); color: var(--ink); }
.dp-option[data-active="true"] {
  background: var(--surface-3); color: var(--ink); font-weight: 500;
}
.dp-label { flex: 1; }
.dp-num { font-family: "Geist Mono", monospace; font-size: var(--t-micro); color: var(--ink-4); }
.btn {
  font-size: var(--t-sm); font-weight: 500;
  padding: 7px 12px; border-radius: 6px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface); color: var(--ink);
  white-space: nowrap;
}
.btn:hover { background: var(--surface-3); }
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.primary:hover { opacity: 0.85; }
.btn.ghost { border-color: transparent; color: var(--ink-3); }
.btn.ghost:hover { color: var(--ink); background: var(--surface-3); }
.btn.danger { color: var(--prio-0); border-color: transparent; }
.btn.danger:hover { background: color-mix(in oklch, var(--prio-0) 8%, var(--surface)); }
.btn.danger-ghost { color: var(--prio-0); border-color: color-mix(in oklch, var(--prio-0) 30%, transparent); }
.btn.danger-ghost:hover { background: color-mix(in oklch, var(--prio-0) 8%, var(--surface)); border-color: var(--prio-0); }
.btn.small { padding: 3px 8px; font-size: var(--t-micro); }

/* ── Reschedule inline row ───────────────── */
.reschedule-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-top: 4px;
  background: var(--surface-2); border-radius: 7px;
  border: 1px solid var(--hairline);
}
.reschedule-row input[type="datetime-local"] {
  flex: 1; min-width: 0;
  font-size: var(--t-xs); font-family: var(--mono); color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: 5px; padding: 4px 8px;
}
.reschedule-row input[type="datetime-local"]:focus {
  outline: none; border-color: var(--ink-3);
}

/* ── Chat rail ─────────────────────────────── */
.chat {
  border-left: 2px solid var(--hairline-strong);
  background: var(--surface-3);
  display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
}
.app[data-chat-closed="true"] .chat { display: none; }

.chat-head {
  padding: 0 14px;
  height: var(--head-h); box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.chat-toprow {
  display: flex; align-items: center; justify-content: space-between;
}
.chat-title { font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); }

/* Referenced item (source) shown above the input */
.chat-source {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; flex-shrink: 0;
  border-top: 1px solid var(--hairline);
}
.chat-source-label {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-4); flex-shrink: 0;
}
.chat-source .ctx-pill { min-width: 0; overflow: hidden; }
.chat-source-clear {
  margin-left: auto; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 5px;
  display: grid; place-items: center; color: var(--ink-4);
}
.chat-source-clear:hover { background: var(--surface-3); color: var(--ink-2); }

/* Task-creation tools below the composer — 50/50 boxes */
.chat-foottools {
  display: flex; gap: 8px; align-items: stretch;
  padding: 0 12px 12px; flex-shrink: 0;
}
.chat-foottools > .chat-tool-btn { flex: 1 1 50%; }
.chat-foottools .email-panel-chat { flex: 1 1 50%; display: flex; }
.chat-foottools > .chat-tool-btn,
.chat-foottools .email-panel-chat .email-btn {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 7px; width: 100%;
  min-height: 76px; padding: 12px 12px;
  border-radius: 9px; border: 1px solid var(--hairline-strong);
  background: var(--surface-2); color: var(--ink-2);
  font-size: var(--t-sm); font-weight: 500; text-align: left; line-height: 1.25;
}
.chat-foottools > .chat-tool-btn:hover,
.chat-foottools .email-panel-chat .email-btn:hover { background: var(--surface-3); color: var(--ink); }
.chat-foottools .chat-tool-ico { font-size: var(--t-lg); line-height: 1; color: var(--ink-3); }
.chat-foottools .email-btn svg { width: 18px; height: 18px; }
.email-panel-chat { border-top: none; padding: 0; gap: 6px; }
.email-panel-chat .email-btn {
  width: 100%; justify-content: center; gap: 8px;
  padding: 8px 11px; border-radius: 7px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-2); color: var(--ink-2);
  font-size: var(--t-sm); font-weight: 500;
}
.email-panel-chat .email-btn:hover { background: var(--surface-3); color: var(--ink); }

.chat-toggle {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 8px; padding: 2px;
}
.chat-toggle button {
  padding: 5px 8px;
  border-radius: 6px;
  font-size: var(--t-xs); color: var(--ink-3); font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.chat-toggle button[data-active="true"] {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-card);
}
.chat-ctx {
  margin-top: 9px;
  display: flex; align-items: center; gap: 7px;
  font-size: var(--t-micro); color: var(--ink-3); min-height: 18px;
}
.ctx-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px;
  background: var(--ctx-tint, var(--surface-3));
  color: var(--ctx-color, var(--ink-2));
  border-radius: 999px; font-size: var(--t-micro); font-weight: 500;
}

.chat-stream {
  flex: 1; overflow-y: auto;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
.msg { max-width: 92%; }
.msg.user { margin-left: auto; }
.msg-bubble {
  padding: 9px 12px;
  border-radius: 11px; border: 1px solid var(--hairline);
  background: var(--surface-2); color: var(--ink);
  font-size: var(--t-sm); line-height: 1.55;
  white-space: pre-wrap;   /* preserve line breaks in multi-line answers (retrieval/reminder) */
}
.msg.user .msg-bubble {
  background: var(--ink); color: var(--bg);
  border-color: var(--ink); border-bottom-right-radius: 3px;
}
.msg.bot  .msg-bubble { border-bottom-left-radius: 3px; }
.msg-meta {
  font-family: "Geist Mono", monospace;
  font-size: var(--t-micro); color: var(--ink-4);
  margin: 3px 4px 0;
}
/* Task chip above a bot bubble — links the message to the task it relates to. */
.msg-task-chip {
  align-self: flex-start; max-width: 100%;
  margin: 0 0 4px; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--surface-2);
  font-size: var(--t-micro); color: var(--ink-3); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-task-chip:hover { background: var(--surface-3); color: var(--ink); }
.msg-task-chip::before { content: "◆ "; color: var(--d-costs); }

.suggestions {
  padding: 6px 14px 0;
  display: flex; flex-wrap: wrap; gap: 5px;
  flex-shrink: 0;
}
.suggestion {
  font-size: var(--t-micro); padding: 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 999px; color: var(--ink-2);
}
.suggestion:hover { background: var(--surface-3); color: var(--ink); }

.composer {
  padding: 9px 12px 12px;
  border-top: 1px solid var(--hairline);
  flex-shrink: 0;
}
.composer-box {
  display: flex; align-items: flex-end; gap: 7px;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  padding: 7px 7px 7px 11px;
}
.composer-box:focus-within {
  border-color: var(--hairline-strong);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--ink) 5%, transparent);
}
.composer textarea {
  flex: 1; border: 0; outline: 0; resize: none;
  background: transparent; font-size: var(--t-sm); line-height: 1.45;
  /* 1 row by default; JS grows it with content up to this max (~5 rows), then scrolls. */
  min-height: 24px; max-height: 120px; padding: 2px 0; overflow-y: hidden;
}
.composer textarea::placeholder { color: var(--ink-3); }
.mic-btn {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0; border: 0;
  background: var(--surface-3); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer; font-size: 14px;
}
.mic-btn:hover { background: var(--hairline-strong); color: var(--ink); }
.mic-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.mic-btn.recording { background: var(--prio-0); color: #fff; animation: mic-pulse 1s ease-in-out infinite; }
@keyframes mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.send-btn {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center; flex-shrink: 0;
}
.send-btn:disabled { background: var(--hairline-strong); cursor: not-allowed; }
.composer-hint {
  margin-top: 5px;
  font-size: var(--t-micro); color: var(--ink-4);
  display: flex; gap: 8px; font-family: "Geist Mono", monospace;
  align-items: center;
}
.composer-hint kbd {
  background: var(--surface-3); border-radius: 3px;
  padding: 1px 4px; color: var(--ink-3);
}
.composer-hint .chat-scope { margin-left: auto; }

/* Typing indicator */
.typing { display: inline-flex; gap: 3px; align-items: center; }
.typing span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3);
  animation: blink 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes blink {
  0%, 80%, 100% { opacity: .2; }
  40%           { opacity: 1;  }
}

/* Toast */
.toast-wrap {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 5px;
  z-index: 300; pointer-events: none;
}
.toast {
  background: var(--ink); color: var(--bg);
  font-size: var(--t-xs); padding: 7px 12px;
  border-radius: 7px; box-shadow: var(--shadow-pop);
  animation: toast-in .16s ease-out;
  white-space: nowrap;
}
@keyframes toast-in {
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* ── Firing reminder banner ──────────────────────────────── */
.reminder-banners {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex-shrink: 0;
}
.reminder-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--card-bg, var(--surface));
  border-bottom: 1px solid color-mix(in oklch, var(--stripe-color, var(--prio-1)) 30%, var(--hairline));
  animation: banner-in .18s ease-out;
}
@keyframes banner-in {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.banner-bell {
  font-size: var(--t-md);
  flex-shrink: 0;
  line-height: 1;
}
.banner-body {
  flex: 1;
  min-width: 0;
}
.banner-title {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banner-meta {
  font-family: "Geist Mono", monospace;
  font-size: var(--t-micro);
  color: var(--ink-3);
  margin-top: 1px;
}
.banner-dismiss {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid color-mix(in oklch, var(--prio-1) 40%, var(--hairline));
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-xs);
  font-weight: 500;
  cursor: pointer;
}
.banner-dismiss:hover {
  background: color-mix(in oklch, var(--prio-1) 8%, var(--surface));
}
.banner-actions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.banner-snooze {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: var(--t-xs);
  font-weight: 500;
  cursor: pointer;
  font-family: "Geist Mono", monospace;
}
.banner-snooze:hover { background: var(--surface-3); color: var(--ink); }
.banner-recur {
  font-family: "Geist Mono", monospace;
  font-size: var(--t-micro);
  color: var(--ink-3);
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 1px 7px;
  flex-shrink: 0;
}

/* ── Recurrence badge on item cards ─────────────────── */
.recur-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: "Geist Mono", monospace;
  font-size: var(--t-micro);
  color: var(--ink-3);
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 1px 7px;
  flex-shrink: 0;
}

/* ── ⌘K Search overlay ──────────────────────────────── */
.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: oklch(0.2 0.01 270 / 0.45);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 18vh;
  animation: overlay-in .12s ease-out;
}
@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.search-box {
  width: min(560px, 92vw);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: search-box-in .14s ease-out;
}
@keyframes search-box-in {
  from { transform: translateY(-10px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)     scale(1);    opacity: 1; }
}
.search-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.search-kbd {
  font-family: "Geist Mono", monospace;
  font-size: var(--t-micro); color: var(--ink-4);
  background: var(--surface-3); border: 1px solid var(--hairline-strong);
  border-radius: 4px; padding: 2px 6px; flex-shrink: 0;
}
.search-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: var(--t-md); color: var(--ink); font-family: "Geist", sans-serif;
}
.search-results {
  max-height: 360px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent;
}
.search-empty {
  padding: 24px; text-align: center;
  font-size: var(--t-sm); color: var(--ink-4);
}
.search-result {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; cursor: pointer;
  border-bottom: 1px solid var(--hairline);
}
.search-result:last-child { border-bottom: none; }
.search-result:hover, .search-result[data-active="true"] {
  background: var(--surface-2);
}
.sr-status {
  font-family: "Geist Mono", monospace; font-size: var(--t-micro);
  color: var(--ink-4); background: var(--surface-3);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 1px 7px; flex-shrink: 0;
}
.sr-title { flex: 1; font-size: var(--t-sm); color: var(--ink); font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-domain { font-size: var(--t-micro); color: var(--ink-3); flex-shrink: 0; }

/* ── Extract tasks modal ────────────────────────────── */
.extract-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: oklch(0.2 0.01 270 / 0.45);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  animation: overlay-in .12s ease-out;
}
.extract-box {
  width: min(560px, 92vw);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  animation: search-box-in .14s ease-out;
}
.extract-box h3 { font-size: var(--t-base); font-weight: 600; color: var(--ink); margin: 0; }
.extract-box p  { font-size: var(--t-xs); color: var(--ink-3); margin: 0; }
.extract-textarea {
  width: 100%; min-height: 140px; resize: vertical;
  font-size: var(--t-xs); font-family: "Geist", sans-serif; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--hairline-strong);
  border-radius: 7px; padding: 10px 12px; outline: none;
  box-sizing: border-box;
}
.extract-textarea:focus { border-color: var(--ink-3); }
.extract-footer { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Push notification bell button ──────────────────── */
.push-bell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px;
  border: 1px solid var(--hairline);
  background: transparent; color: var(--ink-3); cursor: pointer;
}
.push-bell:hover { background: var(--surface-3); color: var(--ink); }
.push-bell[data-active="true"] { color: var(--prio-1); border-color: color-mix(in oklch, var(--prio-1) 40%, var(--hairline)); }
.push-bell-dot {
  position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--prio-1);
}

/* ── Reminder history ───────────────────────────────────── */
.history-pane {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 60px;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
.history-year {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 12px 0 6px;
}
.history-month {
  margin-left: 0;
  margin-bottom: 6px;
}
.history-month-label {
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--ink-3);
  padding: 6px 0 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.history-day-group {
  margin-bottom: 8px;
}
.history-day-label {
  font-family: "Geist Mono", monospace;
  font-size: var(--t-micro);
  color: var(--ink-4);
  padding: 3px 0;
}
.history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  margin-bottom: 4px;
}
.history-item-title {
  flex: 1;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
}
.history-item-time {
  font-family: "Geist Mono", monospace;
  font-size: var(--t-micro);
  color: var(--ink-3);
  white-space: nowrap;
}
.history-empty {
  text-align: center;
  color: var(--ink-3);
  padding: 50px 20px;
  font-size: var(--t-sm);
}

/* Empty state */
.empty {
  text-align: center; color: var(--ink-3);
  padding: 50px 20px; font-size: var(--t-sm);
}

/* ── Floating email draft window (email_send) ─────────────────────────────── */
.draft-window-overlay {
  position: fixed; inset: 0; z-index: 320;
  background: oklch(0.2 0.01 270 / 0.38);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 9vh;
}
.draft-window {
  width: min(620px, 94vw);
  max-height: 82vh; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  padding: 0 16px 16px;
}
.draft-window-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 0 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.draft-rationale { font-size: var(--t-xs); color: var(--ink-3); margin: 4px 0 10px; line-height: 1.5; }
.draft-sensitive {
  font-size: var(--t-sm); color: var(--prio-0); background: oklch(0.54 0.20 24 / 0.08);
  border: 1px solid oklch(0.54 0.20 24 / 0.3); border-radius: 8px;
  padding: 12px 14px; margin: 12px 0; line-height: 1.55;
}
.draft-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.draft-field > span { font-size: var(--t-micro); font-weight: 600; color: var(--ink-3); letter-spacing: 0.02em; }
.draft-field input, .draft-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px; font-size: var(--t-sm); color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 7px; font-family: inherit; resize: vertical;
}
.draft-field input:focus, .draft-field textarea:focus {
  outline: none; border-color: var(--hairline-strong); background: var(--surface);
}
.draft-field .draft-to { color: var(--ink-2); background: var(--surface-3); cursor: default; }
.draft-window-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.draft-window-hint { margin-top: 8px; font-size: var(--t-micro); color: var(--ink-4); }

/* ── Auto-deadline badge ──────────────────────────────────────────────────── */
.dl-auto-badge {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink-4); background: var(--surface-3);
  border: 1px solid var(--hairline); border-radius: 4px;
  padding: 1px 4px; margin-left: 2px; text-transform: uppercase;
}

/* ── Chat: file upload chips + attach button ──────────────────────────────── */
.file-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.file-chip {
  font-size: var(--t-micro); padding: 5px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  color: var(--ink-2); cursor: pointer;
}
.file-chip:hover:not(:disabled) { border-color: var(--hairline-strong); color: var(--ink); }
.file-chip:disabled { opacity: 0.5; cursor: default; }
.attach-btn {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px;
  background: transparent; border: none; cursor: pointer;
  font-size: var(--t-md); color: var(--ink-3); align-self: flex-end;
}
.attach-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.attach-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Calendar view (sidebar "Calendar") ───────────────────────────────────── */
.cal-pane {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent;
}
/* Week grid — one row per weekday; passed days greyed */
.cal-week {
  padding: 12px 20px 60px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.cal-week-day {
  display: grid; grid-template-columns: 132px 1fr; gap: 14px;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--hairline); background: var(--surface);
}
.cal-week-day[data-past] { background: var(--surface-2); opacity: 0.62; }
.cal-week-day[data-today] {
  border-color: var(--ink); opacity: 1;
  box-shadow: 0 0 0 1px var(--ink);
}
.cal-week-dayhead { display: flex; align-items: baseline; gap: 8px; }
.cal-week-wd { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.cal-week-date { font-size: var(--t-xs); color: var(--ink-3); }
.cal-week-today {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--bg); background: var(--ink); border-radius: 999px; padding: 1px 7px;
}
.cal-week-events { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-week-event { display: flex; align-items: baseline; gap: 10px; }
.cal-week-empty { color: var(--ink-4); font-size: var(--t-sm); }
.cal-range-btn {
  font-size: var(--t-micro); padding: 3px 8px; border-radius: 6px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--ink-3);
}
.cal-range-btn[data-active] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: var(--shadow-card); }
.cal-agenda { padding: 10px 2px; display: flex; flex-direction: column; gap: 14px; }
.cal-day-head {
  font-size: var(--t-micro); font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0 0 5px; border-bottom: 1px solid var(--hairline); margin-bottom: 5px;
}
.cal-event {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 8px; border-radius: 7px;
}
.cal-event:hover { background: var(--surface-2); }
.cal-event-time { font-size: var(--t-xs); color: var(--ink-3); min-width: 64px; flex-shrink: 0; }
.cal-event-title { font-size: var(--t-sm); color: var(--ink); flex: 1; }
.cal-event-cal { font-size: var(--t-micro); color: var(--ink-4); background: var(--surface-3);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 1px 7px; }
.cal-permission {
  margin: 16px 2px; padding: 16px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--hairline-strong);
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.cal-permission-title { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.cal-permission-body { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.55; }

/* ── Settings view (sidebar "Settings") ───────────────────────────────────── */
.set-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 48px; scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
.set-back {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  margin: 10px 18px 2px; padding: 5px 11px 5px 8px;
  background: none; border: 1px solid var(--hairline-strong); border-radius: 7px;
  color: var(--ink-2); font: inherit; font-size: var(--t-xs); font-weight: 500; cursor: pointer;
}
.set-back:hover { background: var(--surface-3); color: var(--ink); }
.set-grid { display: flex; flex-direction: column; gap: 12px; padding: 12px 10px; }
.set-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 14px 16px; box-shadow: var(--shadow-card);
}
.set-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.set-title { font-size: var(--t-base); font-weight: 600; color: var(--ink); }
.set-badge {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.03em;
  padding: 2px 9px; border-radius: 999px; border: 1px solid var(--hairline);
}
.set-badge[data-c="ok"]   { color: var(--d-costs, #2e7d52); background: oklch(0.56 0.15 150 / 0.12); border-color: oklch(0.56 0.15 150 / 0.35); }
.set-badge[data-c="warn"] { color: var(--prio-1); background: oklch(0.68 0.17 58 / 0.12); border-color: oklch(0.68 0.17 58 / 0.35); }
.set-badge[data-c="off"]  { color: var(--ink-4); background: var(--surface-3); }
.set-desc { font-size: var(--t-xs); color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
.set-note { font-size: var(--t-xs); color: var(--ink-3); margin-top: 7px; background: var(--surface-2);
  border: 1px solid var(--hairline); border-radius: 6px; padding: 6px 9px; }
.set-ok { font-size: var(--t-sm); color: oklch(0.52 0.15 150); font-weight: 500; margin-top: 10px; }
.set-fields { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.set-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-xs); }
.set-field > span { color: var(--ink-3); }
.set-mask { color: var(--ink-4); font-style: normal; font-family: var(--mono, monospace); font-size: var(--t-micro); }
.set-field input {
  padding: 7px 10px; font-size: var(--t-sm); color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 7px;
}
.set-field input:focus { outline: none; border-color: var(--hairline-strong); background: var(--surface); }
.set-static { padding: 7px 10px; font-size: var(--t-sm); color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--hairline); border-radius: 7px; }
.set-actions { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.set-msg { font-size: var(--t-xs); color: var(--ink-3); }
.set-fields-grid { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.set-fields-grid .set-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-xs); }
.set-fields-grid .set-field > span { color: var(--ink-3); }
@media (max-width: 560px) { .set-fields-grid { grid-template-columns: 1fr; } }

/* ── Calendar integration (multi-account CalDAV) ─────────────────────────────── */
.cal-accounts { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.cal-acct-list { display: flex; flex-direction: column; gap: 7px; }
.cal-acct {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 9px;
  border: 1px solid var(--hairline); background: var(--surface-2);
}
.cal-acct[data-ok] { border-color: var(--hairline-strong); }
.cal-acct-default { display: flex; align-items: center; cursor: pointer; }
.cal-acct-default input { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; }
.cal-acct-main { flex: 1; min-width: 0; }
.cal-acct-label {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--t-sm); font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-acct-badge {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--hairline-strong); border-radius: 5px; padding: 1px 5px;
}
.cal-acct-sub { font-size: var(--t-micro); color: var(--ink-3); margin-top: 2px; }
.cal-acct[data-ok] .cal-acct-sub { color: oklch(0.55 0.13 150); }
[data-theme="dark"] .cal-acct[data-ok] .cal-acct-sub { color: oklch(0.72 0.13 150); }
.cal-add-form { padding: 11px; border-radius: 9px; border: 1px dashed var(--hairline-strong); background: var(--surface-2); }
.set-footnote { font-size: var(--t-micro); color: var(--ink-4); padding: 6px 2px 16px; }
.set-seg { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.set-seg-btn {
  flex: 1; min-width: 110px;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--hairline-strong); background: var(--surface-2);
  cursor: pointer; text-align: left;
}
.set-seg-btn:hover { background: var(--surface-3); }
.set-seg-btn[data-active] {
  border-color: var(--ink); background: var(--surface);
  box-shadow: 0 0 0 1px var(--ink) inset;
}
.set-seg-label { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.set-seg-hint { font-size: var(--t-xs); color: var(--ink-3); }

/* ── Status label chip on task cards (matches mobile mock-up) ───────────── */
.item-status {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.01em;
  text-align: left; line-height: 1.2;
  padding: 3px 8px; border-radius: 10px;
  color: var(--ink-3); background: var(--surface-3); border: 1px solid var(--hairline);
}
.item-status[data-mode="approval"]   { color: oklch(0.50 0.13 65); background: oklch(0.965 0.04 75); border-color: oklch(0.88 0.06 75); }
.item-status[data-mode="autonomous"] { color: var(--d-admin); background: var(--d-admin-tint); border-color: transparent; }
[data-theme="dark"] .item-status[data-mode="approval"]   { color: oklch(0.82 0.10 75); background: oklch(0.30 0.05 70); border-color: transparent; }
[data-theme="dark"] .item-status[data-mode="autonomous"] { background: oklch(0.30 0.04 252); }

/* ── Mobile layout (phones): single column + bottom tab bar ────────────── */
.mobile-tabbar { display: none; }

@media (max-width: 768px) {
  .app { grid-template-columns: 1fr !important; }
  .sidebar, .sidebar-resize-handle { display: none !important; }
  .main { min-width: 0; }
  .queue { padding: 12px 14px 88px; }       /* leave room for the tab bar */
  .topbar { padding: 10px 14px; }
  .briefing { padding-left: 14px; padding-right: 14px; }

  /* Chat: full-screen overlay when open, hidden when closed */
  .chat {
    position: fixed; inset: 0; width: 100vw !important; height: 100vh;
    z-index: 80; padding-bottom: 72px; border-left: none;
  }
  .app[data-chat-closed="true"] .chat { display: none; }

  /* Cards: meta stacking handled by the container query above */
  .item-approve { padding: 6px 12px; }       /* bigger tap target for "Go!" */

  /* Briefing + toolbar are flex/no-wrap and wider than a phone — let them wrap
     onto extra lines instead of overflowing off-screen and getting clipped. */
  .briefing { flex-wrap: wrap; gap: 5px 10px; padding: 9px 14px; }
  .briefing-divider { display: none; }
  .toolbar { flex-wrap: wrap; gap: 8px 10px; padding: 9px 14px; }
  .toolbar .tabs { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .toolbar-right { margin-left: auto; }
  .tab { padding: 5px 10px; }                 /* a touch tighter so the 4 tabs fit */

  /* Tighter section padding so content uses the full narrow width. */
  .escan, .proposal-card, .item-detail { max-width: 100%; }

  /* Belt-and-suspenders: never let the whole page scroll sideways. */
  html, body { overflow-x: hidden; }

  .mobile-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--surface); border-top: 1px solid var(--hairline);
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
  }
  .mobile-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: none; font: inherit; color: var(--ink-4);
    font-size: var(--t-micro); padding: 4px 0; cursor: pointer;
  }
  .mobile-tab[data-active="true"] { color: var(--ink); font-weight: 600; }
  .mobile-tab .mt-ico { font-size: var(--t-lg); line-height: 1; }
}


/* Settings: title row with back button on the right, section headings, danger card */
.set-pane-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px 6px; gap: 12px;
}
.set-pane-head .briefing-date { font-size: var(--t-base); font-weight: 600; color: var(--ink); }
.set-pane-head .set-back { margin: 0; align-self: auto; }
.set-section {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-3); margin: 20px 4px 2px; padding: 0 2px;
}
.set-card-danger { border-color: oklch(0.62 0.20 24 / 0.45); }

/* Resizable chat — drag handle on the chat's left edge */
.app { position: relative; }
.chat-resize-handle {
  position: absolute; top: 0; bottom: 0; width: 7px; margin-right: -3px;
  cursor: col-resize; z-index: 30;
  background: linear-gradient(var(--hairline-strong), var(--hairline-strong)) center / 1px 100% no-repeat;
  transition: background-size 0.15s;
}
.chat-resize-handle:hover,
.chat-resize-handle[data-dragging="true"] {
  background: linear-gradient(var(--ink-4), var(--ink-4)) center / 2px 100% no-repeat;
}
@media (max-width: 768px) { .chat-resize-handle { display: none !important; } }

/* Active state for toolbar ghost toggles (e.g. Show/hide done) */
.btn-ghost[data-active="true"] { color: var(--ink); background: var(--surface-3); border-color: var(--hairline-strong); }

/* Reserved chat accent (#807246) — for chat error/warning messages (not yet used) */
:root { --chat-accent: #807246; }

/* ══ Phase 1 — Assistant mode & execution-centric UX ══════════════════════════ */

/* Pending-Approval badge in the sidebar nav */
.nav-count[data-alert] { background: var(--prio-0); color: #fff; border-radius: 999px;
  padding: 0 6px; min-width: 16px; text-align: center; font-weight: 600; }

/* Clickable priority indicator (#3) */
.prio-btn { display: inline-flex; align-items: center; background: none; border: 0;
  padding: 2px; margin: -2px; cursor: pointer; border-radius: 5px; }
.prio-btn:hover { background: var(--surface-3); }
.prio-btn:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 1px; }

/* Card keyboard focus ring (#9) */
.item[data-card]:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }

/* Blocked-action modal (#3 "task running") */
.modal-backdrop { position: fixed; inset: 0; background: oklch(0.2 0.01 270 / 0.4);
  display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-card { background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: 12px; box-shadow: var(--shadow-pop); padding: 20px;
  max-width: 380px; width: calc(100% - 40px); }
.modal-title { font-size: var(--t-md); font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.modal-body { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 16px; }

/* Activity bar (#4) */
.activity-bar { display: flex; align-items: center; gap: 14px; padding: 9px 20px;
  border-bottom: 1px solid var(--hairline); background: var(--surface-2); flex-shrink: 0; }
.activity-now { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); flex-shrink: 0; }
.activity-dot[data-on] { background: var(--d-costs);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--d-costs) 25%, transparent);
  animation: pea-pulse 1.6s ease-in-out infinite; }
@keyframes pea-pulse { 50% { opacity: 0.5; } }
.activity-msg { font-size: var(--t-sm); font-weight: 500; color: var(--ink); flex-shrink: 0; }
.activity-idle { color: var(--ink-3); font-weight: 400; }
.activity-task { font-size: var(--t-xs); color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-conn { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-3); border: 1px solid var(--hairline-strong); border-radius: 5px;
  padding: 1px 5px; flex-shrink: 0; }
.activity-steps { display: flex; gap: 4px; flex-shrink: 0; }
.activity-step { width: 18px; height: 18px; display: flex; align-items: center;
  justify-content: center; border-radius: 4px; font-size: 10px;
  background: color-mix(in oklch, var(--d-costs) 18%, var(--surface)); color: var(--d-costs); }

/* Assistant (execution) sections — section headers keep their accent colour. */
[data-exec="executing"] .group-head > span:not(.gc):not(.gl) { color: var(--d-costs); }
[data-exec="needs"] .group-head > span:not(.gc):not(.gl) { color: var(--prio-1); }
[data-exec="later"] { border-radius: 10px; padding: 2px 6px 6px; margin: 6px 0; }

/* Spinner — a small rotating wheel while a task's process is running */
.task-spinner { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--hairline-strong); border-top-color: var(--d-costs);
  animation: task-spin 0.8s linear infinite; }
.task-spinner-sm { width: 11px; height: 11px; border-width: 1.5px; display: inline-block; margin-left: 6px; vertical-align: -1px; }
@keyframes task-spin { to { transform: rotate(360deg); } }

/* Process flow — the task's multi-step plan, shown in the expanded card */
.process-flow { margin-top: 12px; border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--surface-2); padding: 10px 12px; }
.process-flow-head { font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; display: flex; align-items: center; }
/* Horizontal interlocking process arrows: greyed-out = pending, lighter = done,
   intense = the current/waiting step (with a spinner). Hue swappable via --proc-hue. */
:root { --proc-hue: oklch(0.68 0.16 55); }   /* warm amber-orange */
.process-arrows { display: flex; flex-wrap: wrap; align-items: stretch; row-gap: 6px; margin: 8px 0 2px; }
.proc-arrow {
  --notch: 12px;
  position: relative; border: 0; cursor: pointer; font: inherit; line-height: 1.2;
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px;
  padding: 4px 16px 4px 22px; margin-left: -10px; font-size: var(--t-xs); white-space: nowrap;
  background: var(--surface-3); color: var(--ink-4);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%,
                     calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%);
  transition: background .2s, color .2s, filter .15s;
}
.proc-arrow:first-child { margin-left: 0; padding-left: 14px;
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%,
                     calc(100% - var(--notch)) 100%, 0 100%); }
.proc-arrow:hover { filter: brightness(1.06); }
.proc-arrow[data-open] { filter: brightness(1.1); box-shadow: inset 0 0 0 2px var(--ink); }
.proc-arrow-avail { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: oklch(0.62 0 0); box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.proc-arrow-avail[data-avail="yes"] { background: oklch(0.72 0.18 150); }   /* green = registered skill */
.proc-arrow-avail[data-avail="no"]  { background: oklch(0.62 0 0); }        /* grey  = placeholder step */
.proc-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-micro); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-4); }
.proc-legend .proc-arrow-avail:not(:first-child) { margin-left: 6px; }
.proc-arrow-num { font-weight: 700; opacity: .65; }
.proc-arrow-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.proc-arrow-pause { font-size: 12px; }
/* state palette */
.proc-arrow[data-state="pending"] { background: var(--surface-3); color: var(--ink-4); }
.proc-arrow[data-state="ok"]      { background: color-mix(in oklch, var(--proc-hue) 30%, var(--surface)); color: var(--ink); }
.proc-arrow[data-state="running"],
.proc-arrow[data-state="wait"]    { background: var(--proc-hue); color: #fff; }
.proc-arrow[data-state="running"] .proc-arrow-num,
.proc-arrow[data-state="wait"] .proc-arrow-num { opacity: .85; }
.proc-arrow[data-state="fail"]    { background: color-mix(in oklch, var(--prio-0) 78%, var(--surface)); color: #fff; }
.proc-arrow .task-spinner-sm { border-color: rgba(255,255,255,.45); border-top-color: #fff; }
.process-step-io { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 3px; }
.process-io-row { display: flex; gap: 8px; font-size: var(--t-xs); }
.process-io-label { flex-shrink: 0; width: 48px; color: var(--ink-4); text-transform: uppercase;
  font-size: var(--t-micro); letter-spacing: 0.04em; padding-top: 1px; }
.process-io-val { color: var(--ink-2); min-width: 0; }
.process-replan { margin: 4px 0 10px; padding: 8px 10px; border-radius: 8px; font-size: var(--t-xs);
  background: color-mix(in oklch, var(--prio-1) 12%, var(--surface)); border: 1px solid var(--prio-1);
  color: var(--ink-2); }
.process-replan strong { color: var(--prio-1); }
.process-replan ol { margin: 4px 0 0; padding-left: 18px; }

/* Empty Assistant category — keeps the status board stable at 0 items */
.group-empty { font-size: var(--t-xs); color: var(--ink-4); font-style: italic;
  padding: 4px 4px 10px 6px; }

/* Connections panel (#6) */
.conn-panel { border-top: 1px solid var(--hairline); padding: 8px 12px; }
.conn-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.conn-label { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); }
.conn-icons { display: flex; gap: 6px; margin-left: auto; }
.conn-chip { position: relative; width: 22px; height: 22px; display: flex; align-items: center;
  justify-content: center; border-radius: 6px; background: var(--surface-3); opacity: 0.4; font-size: 12px; }
.conn-chip[data-state="connected"] { opacity: 1; box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--d-costs) 60%, transparent); }
.conn-chip[data-state="auth"]  { opacity: 0.8; box-shadow: inset 0 0 0 1.5px var(--prio-1); }
.conn-chip[data-state="error"] { opacity: 0.9; box-shadow: inset 0 0 0 1.5px var(--prio-0); }
.conn-live { position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--d-costs); box-shadow: 0 0 0 2px var(--surface); animation: pea-pulse 1.4s ease-in-out infinite; }
.conn-caret { color: var(--ink-4); font-size: 10px; }
.conn-detail { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.conn-detail-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px;
  background: none; border: 0; cursor: pointer; width: 100%; text-align: left; font: inherit; color: var(--ink-2); }
.conn-detail-row:hover { background: var(--surface-3); }
.conn-detail-label { flex: 1; font-size: var(--t-xs); }
.conn-state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }
.conn-state-dot[data-state="connected"] { background: var(--d-costs); }
.conn-state-dot[data-state="auth"]  { background: var(--prio-1); }
.conn-state-dot[data-state="error"] { background: var(--prio-0); }
.conn-state-text { font-size: var(--t-micro); color: var(--ink-3); }
.conn-hint { font-size: var(--t-micro); color: var(--ink-4); padding: 4px 6px; }

/* First-login disclaimer (deliberate, recorded acceptance) */
.terms-backdrop { z-index: 200; }
.terms-card { max-width: 560px; }
.terms-body { max-height: 60vh; overflow-y: auto; }
.terms-body p { margin: 0 0 10px; }
.terms-check { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px;
  font-weight: 500; color: var(--ink); cursor: pointer; }
.terms-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--ink); flex-shrink: 0; }

/* Connected + disconnect on one line (Gmail / IMAP / calendar cards) */
.set-ok-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.imap-form { margin-top: 12px; }

/* ── Knowledge / Data view ──────────────────────────────────────────────────── */
.kn-wrap {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px 22px 60px; max-width: 920px;
  scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent;
}
.kn-head { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.kn-head-text { min-width: 0; }
.kn-head-actions { display: flex; gap: 8px; flex-shrink: 0; }
.kn-title { font-size: var(--t-lg, 20px); font-weight: 650; color: var(--ink); }
.kn-sub { font-size: var(--t-sm, 13px); color: var(--ink-3); margin-top: 3px; }
.kn-btn {
  border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: var(--t-xs, 12px); font-weight: 500;
  padding: 5px 12px; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.kn-btn:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.kn-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.kn-search { border: 1px solid var(--hairline); background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: var(--t-xs, 12px); padding: 5px 11px; border-radius: 7px;
  width: 210px; }
.kn-search:focus { outline: none; border-color: var(--hairline-strong); background: var(--surface); }
.kn-search-wrap { position: relative; display: inline-flex; align-items: center; }
.kn-search-wrap .kn-search { padding-right: 26px; }
.kn-search-arrow { position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  color: var(--ink-4); font-size: 13px; pointer-events: none; user-select: none; }
.kn-folder-head[data-dragover] { outline: 2px dashed var(--hairline-strong); outline-offset: -2px;
  background: var(--surface-3); border-radius: 6px; }

/* ── Notifications bell + panel ── */
.notif-wrap { position: relative; }
.notif-badge { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 8px; background: var(--prio-0); color: #fff;
  font-size: 9.5px; line-height: 15px; text-align: center; font-weight: 700; }
.notif-panel { position: absolute; right: 0; top: calc(100% + 6px); width: 340px; max-height: 420px;
  overflow-y: auto; z-index: 60; background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: 10px; box-shadow: 0 10px 32px color-mix(in oklch, var(--ink) 18%, transparent);
  padding: 6px; }
.notif-head { font-size: var(--t-micro); font-weight: 650; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-3); padding: 6px 8px 4px; }
.notif-item { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border-radius: 7px;
  cursor: pointer; }
.notif-item:hover { background: var(--surface-2); }
.notif-item[data-unread] { background: color-mix(in oklch, var(--prio-1, #c77d0a) 7%, transparent); }
.notif-ico { flex-shrink: 0; width: 18px; text-align: center; }
.notif-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.notif-title { font-size: var(--t-xs); color: var(--ink); font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-msg { font-size: var(--t-micro); color: var(--ink-3); }
.notif-when { flex-shrink: 0; font-size: var(--t-micro); color: var(--ink-4); }

/* ── Activity trail on the expanded card ── */
.trail-wrap { margin: 6px 0; }
.trail-list { margin-top: 4px; border-left: 2px solid var(--hairline); padding-left: 10px;
  display: flex; flex-direction: column; gap: 3px; max-height: 180px; overflow-y: auto; }
.trail-row { display: flex; gap: 10px; font-size: var(--t-xs); align-items: baseline; }
.trail-when { flex-shrink: 0; color: var(--ink-4); font-size: var(--t-micro); }
.trail-msg { color: var(--ink-2); }

/* ── Toast with Undo action ── */
.toast-undo { margin-left: 10px; border: 1px solid color-mix(in oklch, var(--surface) 45%, transparent);
  background: transparent; color: inherit; font: inherit; font-size: var(--t-xs); font-weight: 650;
  padding: 2px 10px; border-radius: 6px; cursor: pointer; }
.toast-undo:hover { background: color-mix(in oklch, var(--surface) 18%, transparent); }
.kn-btn-danger { color: #fff; background: var(--prio-0); border-color: var(--prio-0); }
.kn-btn-danger:hover:not(:disabled) { filter: brightness(0.93); background: var(--prio-0); color: #fff; }
.kn-check { flex-shrink: 0; margin-right: 2px; cursor: pointer; accent-color: var(--prio-0); }
.kn-node[data-sel] { background: color-mix(in oklch, var(--prio-0) 10%, var(--surface)); }
.kn-folder-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer;
  border-radius: 6px; font-size: var(--t-sm, 13px); }
.kn-folder-head:hover { background: var(--surface-3); }
.kn-folder-head .kn-node-title { font-weight: 500; }
.kn-mini { border: 0; background: transparent; cursor: pointer; color: var(--ink-4); font-size: 12px; padding: 0 3px; }
.kn-mini:hover { color: var(--ink); }
.kn-mini-danger:hover { color: var(--prio-0, #c0392b); }
.kn-crumb { color: var(--ink-4); font-size: var(--t-micro, 11px); padding: 2px 0 6px; }
.kn-prov { font-size: var(--t-micro, 11px); color: var(--ink-3); background: var(--surface-3);
  border-radius: 999px; padding: 0 6px; flex-shrink: 0; }
.kn-dl { text-decoration: none; color: var(--ink-3); flex-shrink: 0; }
.kn-dl:hover { color: var(--ink); }

.kn-section { margin-top: 22px; }
.kn-section-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--t-xs, 12px); font-weight: 650; letter-spacing: .02em;
  color: var(--ink-2); text-transform: none;
  padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--hairline-strong);
}
.kn-count { color: var(--ink-4); font-size: var(--t-micro, 11px); }

/* Second brain card */
.kn-brain { display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 10px; padding: 6px 4px; }
.kn-brain-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 7px 12px; align-items: baseline; }
.kn-brain-row + .kn-brain-row { border-top: 1px solid var(--hairline); }
.kn-brain-k { font-size: var(--t-xs, 12px); color: var(--ink-3); font-weight: 600; }
.kn-brain-v { font-size: var(--t-sm, 13px); color: var(--ink); white-space: pre-wrap; }

/* Empty / hint */
.kn-empty { font-size: var(--t-sm, 13px); color: var(--ink-3);
  background: var(--surface-2); border: 1px dashed var(--hairline-strong); border-radius: 10px; padding: 14px 16px; }

/* Group (task category) → domain → nodes */
.kn-group { margin-bottom: 16px; }
.kn-group-head { display: flex; align-items: center; justify-content: space-between;
  font-size: var(--t-sm, 13px); font-weight: 650; color: var(--ink); margin: 6px 2px 8px; }
.kn-domain { border: 1px solid var(--hairline); border-radius: 9px; margin-bottom: 6px; overflow: hidden; background: var(--surface); }
.kn-domain-head { display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; user-select: none; }
.kn-domain-head:hover { background: var(--surface-2); }
.kn-dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
.kn-domain-label { flex: 1; font-size: var(--t-sm, 13px); color: var(--ink); }
.kn-chev { color: var(--ink-4); font-size: 11px; width: 12px; text-align: center; }
.kn-nodes { border-top: 1px solid var(--hairline); padding: 4px 0; background: var(--surface-2); }
.kn-node { display: flex; align-items: baseline; gap: 9px; padding: 7px 14px 7px 30px; font-size: var(--t-sm, 13px); }
.kn-node + .kn-node { border-top: 1px solid var(--hairline); }
.kn-node-ico { flex-shrink: 0; }
.kn-node-title { color: var(--ink); font-weight: 500; }
.kn-node-files { color: var(--ink-3); font-size: var(--t-micro, 11px); flex-shrink: 0; }
.kn-node-sum { color: var(--ink-4); font-size: var(--t-xs, 12px); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Knowledge view — standing preference note bodies */
.kn-prefbody { border-top: 1px solid var(--hairline); padding: 8px 14px; background: var(--surface-2); }
.kn-md { margin: 0; font-family: inherit; font-size: var(--t-sm, 13px); color: var(--ink);
  white-space: pre-wrap; word-break: break-word; line-height: 1.5; }

/* ══ Domain dashboards ═══════════════════════════════════════════════════════ */
.dash-wrap {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 4px 2px 40px;
  scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent;
}
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 4px 2px; }
.dash-card {
  display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 16px; box-shadow: var(--shadow-card); font: inherit; color: var(--ink);
}
.dash-card:hover { background: var(--surface-3); border-color: var(--hairline-strong); }
.dash-card-ico { font-size: 26px; flex-shrink: 0; }
.dash-card-body { flex: 1; min-width: 0; }
.dash-card-title { font-size: var(--t-base); font-weight: 650; }
.dash-card-desc { font-size: var(--t-xs); color: var(--ink-3); margin-top: 3px; line-height: 1.4; }
.dash-card-arrow { color: var(--ink-4); font-size: 18px; }

/* Orders */
.ord-card { border: 1px solid var(--hairline); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.ord-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.ord-head:hover { background: var(--surface-2); }
.ord-merchant { font-weight: 600; }
.ord-num { color: var(--ink-4); font-size: var(--t-micro); }
.ord-amt { margin-left: auto; color: var(--ink-2); }
.ord-x { color: var(--ink-4); cursor: pointer; padding: 0 4px; }
.ord-x:hover { color: var(--prio-0); }
.ord-badge { font-size: var(--t-micro); font-weight: 600; padding: 2px 9px; border-radius: 999px;
  text-transform: capitalize; background: var(--surface-3); color: var(--ink-2); }
.ord-badge.ord-shipped, .ord-badge.ord-out_for_delivery { background: oklch(0.68 0.17 58 / 0.16); color: var(--prio-1); }
.ord-badge.ord-delivered { background: oklch(0.56 0.15 150 / 0.16); color: oklch(0.5 0.15 150); }
.ord-badge.ord-cancelled, .ord-badge.ord-returned { background: var(--prio-0); color: #fff; }
.ord-detail { padding: 4px 14px 12px; border-top: 1px solid var(--hairline); }
.ord-items { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ord-item { font-size: var(--t-xs); background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 6px; padding: 2px 8px; }
.ord-track { font-size: var(--t-sm); margin: 6px 0; }
.ord-track a { color: var(--d-costs); }
.ord-timeline { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.ord-ev { display: flex; gap: 8px; font-size: var(--t-xs); color: var(--ink-2); }
.ord-ev-date { margin-left: auto; color: var(--ink-4); }

/* Workouts */
.wk-toggle { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); font-weight: 500; margin-bottom: 10px; }
.wk-toggle input { accent-color: var(--d-sport, var(--ink)); }
.wk-health { margin-top: 10px; font-size: var(--t-xs); color: var(--ink-4); }
.wk-card { border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.wk-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.wk-title { font-weight: 600; }
.wk-focus { font-size: var(--t-xs); color: var(--ink-3); }
.wk-when { margin-left: auto; color: var(--ink-3); font-size: var(--t-micro); }
.wk-status { font-size: var(--t-micro); color: var(--ink-4); text-transform: capitalize; }
.wk-ex { margin: 8px 0; font-size: var(--t-xs); color: var(--ink-2); line-height: 1.6; }
.wk-actions { display: flex; gap: 8px; margin-top: 6px; }

/* ══ Wave 1b usability ═══════════════════════════════════════════════════════ */
/* Topbar "the assistant is doing things" pill */
.topbar-working {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-xs); font-weight: 500; color: var(--d-costs);
  background: color-mix(in oklch, var(--d-costs) 10%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--d-costs) 30%, var(--hairline));
  border-radius: 999px; padding: 3px 11px; white-space: nowrap;
}
/* Push bell: labeled state instead of a mystery icon */
.push-bell { display: inline-flex; align-items: center; gap: 6px; }
.push-bell-label { font-size: var(--t-micro); font-weight: 500; color: var(--ink-3); }
.push-bell[data-active] .push-bell-label { color: var(--ink); }

/* Morning digest — the actual briefing card */
.digest-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px;
  box-shadow: var(--shadow-card); padding: 14px 18px; margin-bottom: 12px;
  font-size: var(--t-sm); line-height: 1.75;
}
.digest-head { font-weight: 650; font-size: var(--t-base); margin-bottom: 4px; }
.digest-line { color: var(--ink-2); }
.digest-sub { color: var(--ink-3); padding-left: 14px; font-size: var(--t-xs); }

/* "Needs you" unified inbox — grouped attention list */
.needs-group { margin-bottom: 14px; }
.needs-group-head {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-xs); font-weight: 650; color: var(--ink-2);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 8px 4px 6px;
}

/* ══ Sports dashboard v2 ═════════════════════════════════════════════════════ */
.wk-stats { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.wk-stat  { font-size: var(--t-xs); color: var(--ink-3); }
.wk-stat b { color: var(--ink); font-size: var(--t-base); margin-right: 3px; }
.wk-pref-label { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.wk-pref-hint  { font-weight: 400; font-size: var(--t-micro); color: var(--ink-4); }
.wk-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wk-chip {
  border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: 5px 13px; font-size: var(--t-xs); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.wk-chip:hover { border-color: var(--ink-4); }
.wk-chip.on {
  background: color-mix(in oklch, var(--d-sport, #4a7c59) 12%, var(--surface));
  border-color: color-mix(in oklch, var(--d-sport, #4a7c59) 45%, var(--hairline));
  color: var(--ink); font-weight: 500;
}
.wk-chip.prim { border-width: 2px; font-weight: 650; }
.wk-goal-hint { display: block; font-size: var(--t-micro); color: var(--ink-4); margin-top: 4px; }
.wk-goal-hint a { color: var(--d-costs); }
.dash-card-live { font-size: var(--t-micro); color: var(--d-costs); margin-top: 5px; font-weight: 500; }

/* Workout detail rendering (length + per-exercise specs) */
.wk-dur { font-size: var(--t-xs); color: var(--d-costs); font-weight: 500; white-space: nowrap; }
.wk-exrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 2px 0; }
.wk-exname { color: var(--ink); font-size: var(--t-sm); }
.wk-tag { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px; padding: 1px 8px;
  border-radius: 999px; font-size: var(--t-micro); font-weight: 600; vertical-align: middle; }
.wk-tag-run  { color: var(--prio-1, #c77d0a); background: color-mix(in oklch, var(--prio-1, #c77d0a) 14%, transparent); }
.wk-tag-done { color: var(--ink-3); background: var(--surface-2); }
.wk-exspec { color: var(--ink-2); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.wk-exnote { color: var(--ink-4); font-size: var(--t-micro); font-style: italic; width: 100%; padding-left: 12px; }

/* Workflow scan: step progress (bar chart per step) */
.wf-steps { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.wf-step { display: flex; align-items: center; gap: 10px; font-size: var(--t-xs); }
.wf-step-ico { width: 18px; text-align: center; color: var(--ink-3); flex: 0 0 auto; }
.wf-done .wf-step-ico { color: var(--d-sport, #4a7c59); font-weight: 700; }
.wf-step-label { flex: 0 0 130px; color: var(--ink-2); }
.wf-wait { opacity: 0.45; }
.wf-bar {
  flex: 1 1 auto; height: 8px; border-radius: 999px;
  background: color-mix(in oklch, var(--hairline) 60%, transparent); overflow: hidden;
}
.wf-bar-fill {
  display: block; height: 100%; border-radius: 999px;
  background: var(--d-costs); transition: width .4s ease;
}
.wf-step-detail { flex: 0 0 auto; color: var(--ink-4); font-size: var(--t-micro); min-width: 90px; text-align: right; }

/* ═══════════════════════════════════════════════════════════════════════════════
   POLISH LAYER — one coherent box language across every middle-pane screen.
   Appended last so it wins the cascade at equal specificity. Tokens:
   card radius 12px · card padding 14/16 · list-card padding 12/14 ·
   list-card gap 10px · section gap 24px · content-pane padding 16/20/60.
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
  --card-r: 12px;
}

/* Cards that already had surface+shadow: normalize radius only */
.set-card, .dash-card, .digest-card { border-radius: var(--card-r); }

/* List cards that were border-only and visually flat next to elevated cards:
   give them the SAME surface + shadow + radius so every box reads as one family */
.wk-card, .ord-card, .kn-domain, .kn-folder {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--card-r);
  box-shadow: var(--shadow-card);
}
.wk-card { padding: 12px 14px; margin-bottom: 10px; }
.ord-card { margin-bottom: 10px; }
.kn-domain { margin-bottom: 10px; }
.kn-folder { margin: 6px 0; }
.kn-empty { border-radius: var(--card-r); }

/* Consistent vertical rhythm between blocks */
.kn-section { margin-top: 24px; }
.kn-section-head { margin-bottom: 10px; }
.needs-group { margin-bottom: 20px; }
.digest-card { margin-bottom: 16px; }
.set-grid { gap: 14px; }

/* Content panes: same breathing room everywhere (dash-wrap sat 4px from the edges,
   pressing cards against the pane border) */
.dash-wrap { padding: 16px 20px 60px; }

/* The header strip sat directly on the first card — give it air below the divider */
.briefing { margin-bottom: 4px; }

/* Anti-jump: status/message lines reserve their height instead of collapsing,
   so cards don't shift when a spinner or "Saved ✓" appears */
.set-msg { display: inline-flex; align-items: center; min-height: 20px; }
.set-actions { min-height: 34px; align-items: center; }
.wf-steps { min-height: 0; }

/* Explanatory copy: one quiet tone, tighter */
.set-desc { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; margin: 4px 0 10px; }
.set-footnote { font-size: var(--t-micro); color: var(--ink-4); line-height: 1.5; }
.toolbar { margin-bottom: 4px; }

/* Inline clarification answer on the card (UX-001) */
.clarify-answer { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; width: 100%; margin-bottom: 6px; }
.clarify-answer input {
  flex: 1 1 220px; min-width: 160px; font: inherit; font-size: var(--t-sm);
  padding: 6px 10px; border: 1px solid var(--hairline-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink);
}
.clarify-done { font-size: var(--t-xs); color: var(--d-sport, #4a7c59); font-weight: 550; }
.clarify-missing { flex-basis: 100%; font-size: var(--t-micro); color: var(--ink-3);
  background: var(--surface-2); border: 1px dashed var(--hairline-strong); border-radius: 6px;
  padding: 3px 8px; }

/* Settings jump bar (UX-020) */
.set-jumpbar { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 10px 0; position: sticky; top: 0; z-index: 2; background: var(--bg, transparent); }