THE SOVEREIGN — LIFE DASHBOARD
   ============================================================ */

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

/* DESIGN TOKENS */
:root {
  /* ── New Design Tokens ── */
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --surface-2: #F3F2EE;
  --border: rgba(0,0,0,0.07);
  --border-strong: rgba(0,0,0,0.12);
  --text: #1A1D21;
  --text-2: #6B7280;
  --text-3: #A1A7B0;
  --accent: #B8965A;
  --accent-bg: rgba(184,150,90,0.12);
  --accent-dark: #8B7340;
  --navy: #1e2d3d;
  --navy-mid: #2a3f54;
  --success: #34C759;
  --success-bg: rgba(52,199,89,0.1);
  --warning: #FF9500;
  --warning-bg: rgba(255,149,0,0.1);
  --error: #FF3B30;
  --error-bg: rgba(255,59,48,0.1);
  --font: 'Inter', -apple-system, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.08);

  /* ── Backward Compat Aliases ── */
  --paper: var(--bg);
  --paper-warm: var(--surface-2);
  --paper-deep: var(--surface-2);
  --ink: var(--text);
  --ink-mid: var(--text-2);
  --ink-light: var(--text-3);
  --ink-faint: var(--text-3);
  --ink-ghost: var(--text-3);
  --brass: var(--accent);
  --brass-light: var(--accent);
  --brass-dark: var(--accent-dark);
  --brass-glow: var(--accent-bg);
  --sans: var(--font);
  --serif: var(--font);
  --hand-script: var(--font);
  --info-bg: var(--accent-bg);
  --success-dark: #1B8B3A;
  --warning-dark: #CC7700;
  --error-dark: #CC2F26;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --border-thin: 1px solid var(--border);
  --border-mid: 1px solid var(--border-strong);
  --radius-pill: 999px;

  /* ── WS3.3 Dark-mode semantic tokens ──
     Light values are byte-identical to the hexes they replaced, so the
     light theme renders pixel-identical. [data-theme="dark"] (end of file)
     redefines them. */
  --surface-3: #ECEAE4;            /* deeper inset wells */
  --cream: #F5F0E6;                /* warm highlight surface */
  --text-inverse: #FFFFFF;         /* text on colored/dark fills (stays light in dark mode) */
  --text-on-navy: #F5F0E6;         /* cream ink on navy surfaces (stays cream in dark mode) */
  --navy-deep: #16202C;
  --rule: #E7E3DB;                 /* hairline rules (legacy alias — now actually defined) */
  --chip-bg: rgba(0,0,0,0.05);
  --hover-bg: rgba(0,0,0,0.04);
  --scrim: rgba(20,24,28,0.45);
  --label-2: #3C3C43;              /* iOS-style secondary label (mobile sheets) */
  --elev-1: rgba(0,0,0,0.06);      /* shadow ink, low elevation */
  --elev-2: rgba(0,0,0,0.10);      /* shadow ink, high elevation */

  /* ── Forecast chart tokens (read by forecast.js cssVar() at render time) ── */
  --fc-line: #4682C8;
  --fc-line-past: #34C759;
  --fc-area: rgba(70,130,200,0.08);
  --fc-area-danger: rgba(255,59,48,0.08);
  --fc-threshold: #FF3B30;
  --fc-today: #B8965A;
  --fc-income: #34C759;
  --fc-expense: #FF3B30;
  --fc-hypo: #8C64C8;
  --fc-band-90: rgba(140,100,200,0.10);
  --fc-band-50: rgba(140,100,200,0.22);
  --fc-band-90-solid: #8C64C8;
  --fc-band-50-solid: #6B4FA0;
  --fc-dot-ring: #FFFFFF;
}

/* BASE */
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── SIDEBAR ─────────────────────────────────────────────── */
.page-wrap { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  background: var(--navy);
  padding: 2rem 0;
  overflow-y: auto;
  z-index: 100;
}

.sidebar-mark {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: 0.05em;
  padding: 0 1.5rem 1.5rem;
  display: block;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  margin-bottom: 1.5rem;
  text-decoration: none;
  line-height: 1.3;
  cursor: pointer;
}

.sidebar-mark span {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin-bottom: 3px;
}

.sidebar-group { margin-bottom: 1.75rem; padding: 0 1.5rem; }

.sidebar-group-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(184,150,90,0.5);
  margin-bottom: 0.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.sidebar-group-label::before {
  content: '\25B8';
  font-size: 10px;
  transition: transform 0.2s;
  display: inline-block;
}
.sidebar-group-label.expanded::before {
  transform: rotate(90deg);
}
.sidebar-group-items {
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.sidebar-group-items.collapsed {
  max-height: 0 !important;
}

.sidebar-links { list-style: none; display: flex; flex-direction: column; gap: 2px; padding: 0; margin: 0; }

.sidebar-links a {
  font-size: 15px;
  font-weight: 400;
  color: rgba(247,244,239,0.7);
  text-decoration: none;
  padding: 6px 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.sidebar-links a:hover {
  color: var(--paper);
  background: rgba(255,255,255,0.08);
}

.sidebar-links a.active {
  color: var(--accent);
  background: rgba(184,150,90,0.15);
  border-radius: 8px;
}

.sidebar-links .nav-icon {
  width: 18px;
  height: 18px;
  opacity: 0.6;
  flex-shrink: 0;
}

.sidebar-links a.active .nav-icon { opacity: 1; }

.nav-badge {
  position: absolute;
  top: 2px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  background: var(--error, #e74c3c);
  color: var(--text-inverse);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--sans);
  padding: 0 4px;
  pointer-events: none;
}

.sidebar-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 99px;
  font-family: var(--sans);
}
.sidebar-badge.red {
  background: rgba(192,57,43,0.15);
  color: #c0392b;
}
.sidebar-badge.gold {
  background: rgba(154,125,74,0.15);
  color: var(--brass);
}

/* ── MAIN ─────────────────────────────────────────────── */
.main-content {
  /* margin-left moved to .app-main wrapper; this is now the scroll container
     beneath the fixed-height top bar (see TOP BAR section at end of file).
     padding-top includes the 52px top-bar height so content isn't hidden
     under the absolute-positioned glass bar at rest. */
  margin-left: 0;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(52px + 2.5rem) 3rem 4rem;
}

/* ── MOBILE NAV ─────────────────────────────────────────── */
.mobile-nav-bar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 52px;
  background: var(--navy);
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  border-bottom: 2px solid var(--brass);
}

/* ── MOBILE BOTTOM TAB BAR ─────────────────────────────── */
.mobile-tab-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(250,250,248,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding: 6px 0 4px;
  justify-content: space-around;
  align-items: flex-start;
}

.mobile-nav-mark {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--paper);
  text-decoration: none;
}

.mobile-nav-mark span {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-light);
  display: block;
  margin-bottom: 1px;
}

.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-radius: 4px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--paper);
  border-radius: 2px;
  transition: all 0.2s ease;
  transform-origin: center;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26,24,20,0.5);
  z-index: 149;
  opacity: 0;
  transition: opacity 0.2s;
}
.nav-overlay.visible { opacity: 1; }

.sidebar-drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 280px;
  background: var(--navy);
  z-index: 150;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
  padding: 1rem 0 2rem;
}
.sidebar-drawer.open { transform: translateX(0); }

.drawer-close {
  position: absolute;
  top: 14px; right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--paper);
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0.6;
}
.drawer-close:hover { opacity: 1; }

.drawer-header {
  padding: 1rem 1.5rem 1.25rem;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  margin-bottom: 1rem;
}

/* ── PAGE HEADER ─────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 0.35rem;
  display: block;
}

.page-title {
  font-family: var(--font);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
}

.page-subtitle {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  color: var(--ink-light);
  margin-top: 0.25rem;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  border-radius: 8px;
  font-weight: 500;
}
.btn-primary:hover { background: var(--accent-dark); }

.btn-brass {
  background: var(--brass);
  color: var(--paper);
}
.btn-brass:hover { background: #886d3e; }

.btn-ghost {
  background: transparent;
  color: var(--ink-mid);
  border: var(--border-thin);
}
.btn-ghost:hover { background: var(--paper-warm); }
.btn-ghost.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }

.btn-sm {
  font-size: 11px;
  padding: 6px 14px;
}

.btn-danger {
  background: transparent;
  color: var(--error);
  border: 0.5px solid var(--error);
}
.btn-danger:hover { background: var(--error-bg); }

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-light);
  padding: 4px;
  border-radius: 4px;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:hover { color: var(--ink); background: var(--paper-deep); }
.btn-icon.danger:hover { color: var(--error); background: var(--error-bg); }

/* ── KPI CARDS ─────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.kpi-grid-compact { gap: 10px; margin-bottom: 1.25rem; }
.kpi-grid-compact .kpi-card { padding: 0.85rem 1rem; }
.kpi-grid-compact .kpi-value { font-size: 24px; }
.kpi-grid-compact .kpi-label { margin-bottom: 4px; }

.kpi-card {
  background: var(--paper-warm);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.25rem;
  border: var(--border-thin);
  transition: transform 0.15s, box-shadow 0.15s;
}
.kpi-card[style*="cursor:pointer"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.kpi-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 6px;
}

.kpi-value {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
}

.kpi-sub {
  font-size: 13px;
  color: var(--ink-light);
  margin-top: 4px;
}

.kpi-good { color: var(--success); }
.kpi-warn { color: var(--brass); }

/* ── CARDS ─────────────────────────────────────────────── */
.card {
  background: var(--paper);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: background 0.2s;
}

.card:hover { background: var(--paper-warm); }
.briefing-card:hover { background: linear-gradient(135deg, #243648 0%, #304b62 100%); }

.card-structured {
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.card-header {
  background: var(--navy);
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-light);
  margin: 0;
}

.card-body {
  padding: 1rem 1.25rem;
  border-bottom: var(--border-thin);
  background: var(--paper);
}

.card-body:last-child { border-bottom: none; }

/* ── SECTION CARDS ─────────────────────────────────────── */
.section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

.section-card-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 1rem;
}

/* ── GRID ─────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

/* ── PILLS ─────────────────────────────────────────────── */
.pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  padding: 3px 10px;
  border-radius: 6px;
  border: 0.5px solid var(--ink-faint);
  color: var(--ink-mid);
}

.pill-brass { border-color: var(--brass); color: var(--brass); }
.pill-navy { background: var(--navy); border-color: var(--navy); color: var(--brass-light); }
.pill-success { background: var(--success-bg); border-color: var(--success); color: var(--success-dark); }
.pill-warning { background: var(--warning-bg); border-color: var(--brass); color: var(--warning-dark); }
.pill-error { background: var(--error-bg); border-color: var(--error); color: var(--error-dark); }
.pill-active { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }

/* ── TABLE ─────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

thead th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-light);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--ink-faint);
  white-space: nowrap;
}

tbody td {
  padding: 12px 12px;
  border-bottom: var(--border-thin);
  color: var(--ink-mid);
  vertical-align: middle;
}

tbody tr:hover { background: var(--paper-warm); }
tbody tr:last-child td { border-bottom: none; }

.td-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

/* ── FORMS ─────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }

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

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.form-textarea { resize: vertical; min-height: 80px; }
.form-select { cursor: pointer; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  justify-content: flex-end;
}

/* ── MODAL ─────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
  z-index: 500;
  justify-content: center;
  align-items: flex-start;
  padding-top: 8vh;
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--surface);
  border-radius: 16px;
  width: calc(100% - 2rem);
  max-width: 720px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.modal.modal-wide {
  max-width: 840px;
}

.modal.modal-travel {
  max-width: 960px;
}

.modal-body {
  overflow-y: auto;
  overflow-x: hidden;
}

.modal-body .form-group {
  overflow: hidden;
}
.modal-body .form-group.has-dropdown {
  overflow: visible;
  position: relative;
}

.modal-body .form-input,
.modal-body .form-select,
.modal-body .form-textarea {
  max-width: 100%;
  box-sizing: border-box;
}

.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: var(--border-thin);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
}

.modal-body { padding: 1.5rem; flex: 1; min-height: 0; }

.modal-footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: var(--border-thin);
  flex-shrink: 0;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  color: var(--ink-mid);
  border: var(--border-thin);
}
.btn-secondary:hover { background: var(--paper-warm); }

.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 0;
  display: block;
}
.btn-link:hover { text-decoration: underline; }

.modal-body .form-actions:last-child { padding-bottom: 0.25rem; }

@media (max-width: 768px) {
  .modal-footer { padding: 0.75rem 1rem; }
}
@media (max-width: 480px) {
  .modal-footer { padding: 0.75rem; }
}

/* ── PROGRESS BAR ─────────────────────────────────────── */
.progress-bar {
  background: var(--paper-deep);
  border-radius: var(--radius-pill);
  height: 8px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--brass);
  transition: width 0.4s ease;
}

.progress-fill.green { background: var(--success); }

/* ── CHECKBOX ─────────────────────────────────────────── */
.check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
}

.check-box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1.5px solid var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  cursor: pointer;
  background: var(--paper);
}

.check-box.checked {
  background: var(--brass);
  border-color: var(--brass);
}

.check-box.checked::after {
  content: '✓';
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
}

.check-text { font-size: 15px; color: var(--ink-mid); }
.check-text.done { text-decoration: line-through; color: var(--ink-light); }

/* ── DIVIDERS ─────────────────────────────────────────── */
.divider { width: 100%; height: 0.5px; background: var(--ink-faint); margin: var(--space-lg) 0; border: none; }
.divider-brass { width: 48px; height: 1px; background: var(--brass); margin: var(--space-sm) 0 var(--space-md); border: none; }

/* ── EMPTY STATE ─────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--ink-light);
}

.empty-state-icon {
  font-size: 40px;
  margin-bottom: 0.75rem;
  opacity: 0.4;
  background: var(--surface-2);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.empty-state-text {
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  color: var(--ink-light);
}

/* ── HEALTH RINGS ─────────────────────────────────────── */
.ring-row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1.5rem 0;
}

.ring-item { text-align: center; }

.ring-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-top: 8px;
}

.ring-value {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
}

/* ── HABIT TRACKER ─────────────────────────────────────── */
.habit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: var(--border-thin);
}
.habit-row:last-child { border-bottom: none; }

.habit-name {
  font-size: 15px;
  color: var(--ink-mid);
  min-width: 80px;
  max-width: 220px;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.habit-dots {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.habit-dot {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--ink-faint);
  background: var(--paper);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.habit-dot.filled {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}

.habit-dot:hover { border-color: var(--brass); }

.habit-streak {
  font-size: 13px;
  color: var(--ink-light);
  margin-left: auto;
  white-space: nowrap;
}

.habit-dot-label {
  width: 24px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.habit-row-header { border-bottom: none; padding-bottom: 4px; }

.habit-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  flex-shrink: 0;
}
.habit-row-actions-spacer {
  display: inline-block;
  width: 56px;
  margin-left: 4px;
  flex-shrink: 0;
}

.habit-week-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 6px;
  border-bottom: var(--border-thin);
}
.habit-week-nav-btn {
  padding: 6px;
  border-radius: 4px;
  color: var(--ink-mid);
  flex-shrink: 0;
}
.habit-week-nav-btn:hover { color: var(--ink); background: var(--paper-deep); }
.habit-week-range {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}
.habit-week-range-text { white-space: nowrap; }
.habit-week-badge {
  font-size: 10px;
  font-weight: 500;
  color: var(--brass, var(--accent));
  background: var(--brass-glow, rgba(154,125,74,0.12));
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.habit-week-today {
  font-size: 11px;
  font-weight: 600;
  color: var(--brass, var(--accent));
  background: none;
  border: 1px solid var(--ink-faint);
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--sans);
  transition: all 0.15s;
}
.habit-week-today:hover {
  border-color: var(--brass, var(--accent));
  background: var(--brass-glow, rgba(154,125,74,0.08));
}

@media (pointer: coarse) {
  .habit-dot-label { width: 28px; }
}
@media (max-width: 768px) {
  .habit-dot-label { width: 24px; }
  .habit-row-actions-spacer { width: 48px; }
}

/* ── BUDGET BARS ─────────────────────────────────────── */
.budget-item {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all 0.15s;
}
.budget-item:hover {
  background: var(--paper-warm);
}
.budget-item-active {
  background: var(--paper-warm);
  border-color: var(--brass-light);
}

.budget-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.budget-cat {
  font-size: 14px;
  color: var(--ink-mid);
}

.budget-amt {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
}

/* ── BUDGET DRILL-DOWN ────────────────────────────────── */
.budget-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.budget-item-wrap {
  break-inside: avoid;
}
.budget-item-wrap.budget-expanded {
  /* stays in its column — no full-width expansion */
}
.budget-chevron {
  display: inline-block;
  font-size: 11px;
  margin-right: 2px;
  color: var(--text-3);
  transition: transform 0.15s;
}
.budget-drill-panel {
  border-top: 1px solid var(--rule);
  padding: 10px 12px 12px;
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  margin-top: -1px;
}
.bdrill-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.bdrill-search {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font: 400 12px/1.4 var(--font);
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.bdrill-search:focus { border-color: var(--accent); }
.bdrill-sort {
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font: 400 11px/1.4 var(--font);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.bdrill-summary {
  font: 500 11px/1.3 var(--font);
  color: var(--text-3);
  margin-bottom: 6px;
}
.bdrill-list {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.bdrill-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
  gap: 10px;
  transition: background 0.1s;
}
.bdrill-row:last-child { border-bottom: none; }
.bdrill-row:hover { background: rgba(0,0,0,0.02); }
.bdrill-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.bdrill-logo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.bdrill-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.bdrill-row-info { min-width: 0; }
.bdrill-row-name {
  font: 400 13px/1.3 var(--font);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bdrill-row-date {
  font: 400 11px/1.3 var(--font);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bdrill-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.bdrill-row-amt {
  font: 500 13px/1 var(--font);
  color: var(--error);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bdrill-reassign {
  padding: 3px 6px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font: 400 11px/1.3 var(--font);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  max-width: 120px;
}
.bdrill-reassign:hover { border-color: var(--accent); }
.bdrill-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-3);
  font: 400 12px/1.4 var(--font);
}

@media (max-width: 768px) {
  .budget-grid { grid-template-columns: 1fr; }
}

/* ── TRANSACTION LIST ─────────────────────────────────── */
.tx-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: var(--border-thin);
  gap: 12px;
}
.tx-item:last-child { border-bottom: none; }

.tx-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.tx-details { flex: 1; }
.tx-name { font-size: 15px; color: var(--ink); }
.tx-cat { font-size: 13px; color: var(--ink-light); }

.tx-amount { font-family: var(--serif); font-size: 17px; font-weight: 500; }
.tx-expense { color: var(--ink); }
.tx-income { color: var(--success); }

/* ── PAGES ─────────────────────────────────────────────── */
.page { display: none; }
.page.active { display: block; }

/* ── TOUCH TARGETS ──────────────────────────────────────── */
/* Ensure minimum 44px touch targets (WCAG 2.5.5 / Apple HIG) */
@media (pointer: coarse) {
  button, .btn, .filter-pill, .tab-btn, a[onclick] {
    min-height: 44px;
    min-width: 44px;
  }
  .filter-pill { padding: 10px 16px; }
  .tab-btn { padding: 12px 18px; }
  .drawer-close { padding: 10px 14px; font-size: 26px; }
  .hamburger { padding: 10px; }
  .habit-dot { width: 28px; height: 28px; font-size: 11px; }
  /* Prevent zoom on input focus (iOS) */
  input, select, textarea { font-size: 16px; }
}

/* ── SAFE AREA (notched phones) ────────────────────────── */
@supports (padding: env(safe-area-inset-top)) {
  .mobile-nav-bar {
    padding-top: env(safe-area-inset-top);
    height: calc(52px + env(safe-area-inset-top));
  }
  .mobile-tab-bar {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── PULL-TO-REFRESH INDICATOR ─────────────────────────── */
.pull-indicator {
  position: fixed;
  top: 52px;
  left: 50%;
  transform: translateX(-50%) translateY(-60px);
  z-index: 199;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper);
  border: var(--border-thin);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  pointer-events: none;
  opacity: 0;
}
.pull-indicator.pulling {
  opacity: 1;
  transition: none;
}
.pull-indicator.refreshing {
  opacity: 1;
  transform: translateX(-50%) translateY(12px);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: translateX(-50%) translateY(12px) rotate(360deg); }
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { display: none; }
  /* Main content padding accounts for the fixed top nav bar PLUS the
     iPhone status bar (safe-area-inset-top). Without the safe-area term
     the navy header overlaps the first line of page content on notched
     devices. */
  .main-content {
    margin-left: 0;
    padding: 1.25rem;
    padding-top: calc(52px + 1.25rem + env(safe-area-inset-top, 0px));
    padding-bottom: 76px;
  }
  .mobile-nav-bar { display: flex; }
  /* Hide old hamburger + drawer on mobile — replaced by bottom tab bar */
  .hamburger, .sidebar-drawer, .nav-overlay { display: none !important; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .dashboard-widgets { grid-template-columns: 1fr; }
  .widget-section.widget-full { grid-column: 1; }
  .form-row { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .habit-name { min-width: 80px; font-size: 13px; }
  .habit-dot { width: 24px; height: 24px; font-size: 10px; }
  .ring-row { gap: 1rem; }
  /* Smoother scrolling */
  .main-content { -webkit-overflow-scrolling: touch; }
  /* Better modal sizing */
  .modal { width: calc(100% - 1.5rem); max-width: 100%; max-height: 80vh; }
  .modal-overlay { padding-top: 3vh; }
  .modal-body { padding: 1rem; }
  /* ── MOBILE BOTTOM TAB BAR ── */
  .mobile-tab-bar { display: flex; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .main-content { padding: 1rem; padding-top: calc(52px + 1rem); }
  .card { padding: 1rem; }
  .modal { width: calc(100% - 1rem); max-height: 85vh; border-radius: var(--radius-md); }
  .modal-overlay { padding-top: 2vh; }
  .modal-body { padding: 0.75rem; }
  .modal-header { padding: 1rem; }
  .modal-title { font-size: 18px; }
}

/* ── OFFLINE BANNER ─────────────────────────────────────── */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: var(--navy, #1a1814);
  color: var(--brass-light, #e8d5a0);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 8px 16px;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
.offline-banner.visible { transform: translateY(0); }
.offline-banner .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e74c3c;
  margin-right: 8px;
  vertical-align: middle;
}
.offline-banner.reconnected .dot { background: #27ae60; }

/* ── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeUp 0.4s ease forwards;
}

/* ── TAB BAR ─────────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ink-faint);
  margin-bottom: 1.5rem;
}

.tab-btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  background: none;
  border: none;
  padding: 10px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  margin-bottom: -1px;
}

.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--brass); border-bottom-color: var(--brass); }

/* ── FILTER ─────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.filter-pill {
  font-size: 12px;
  font-weight: 400;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  border: 0.5px solid var(--ink-faint);
  background: var(--paper);
  color: var(--ink-mid);
  cursor: pointer;
  transition: all 0.15s;
}

.filter-pill:hover { border-color: var(--brass); color: var(--brass); }
.filter-pill.active { background: var(--navy); border-color: var(--navy); color: var(--brass-light); }

/* ── TODO PAGE ─────────────────────────────────────────── */
.todo-filters-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 1.25rem;
}
.todo-view-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.todo-view-tab {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.todo-view-tab:hover { border-color: var(--accent); color: var(--accent); }
.todo-view-tab.active { background: var(--navy); border-color: var(--navy); color: var(--text-inverse); }
.todo-cat-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.todo-filter-chip {
  font-size: 12px;
  font-weight: 400;
  padding: 4px 12px;
  border-radius: var(--radius-xl);
  border: 0.5px solid var(--border);
  background: var(--bg);
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
}
.todo-filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.todo-filter-chip.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-dark); }
.todo-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
}
.todo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.todo-row:last-child { border-bottom: none; }
.todo-row:hover { background: rgba(0,0,0,0.015); }
.todo-row-overdue {
  border-left: 3px solid var(--error);
  padding-left: 13px;
}
.todo-row-done { opacity: 0.45; }
.todo-row[draggable="true"] { cursor: grab; }
.todo-row.todo-dragging { opacity: 0.4; background: var(--accent-light, rgba(37,99,235,0.05)); }
.todo-row.todo-drag-over { border-top: 2px solid var(--accent); margin-top: -1px; }
.todo-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--surface);
}
.todo-check:hover { border-color: var(--accent); }
.todo-check-done {
  background: var(--success);
  border-color: var(--success);
}
.todo-text-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.todo-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.todo-text-struck {
  text-decoration: line-through;
  color: var(--text-3);
}
.todo-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 0;
}
.todo-meta-row:empty { display: none; }
.todo-source-badge {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 6px;
  white-space: nowrap;
  cursor: default;
}
.todo-source-goal {
  background: var(--accent-bg);
  color: var(--accent-dark);
}
.todo-source-cal {
  background: rgba(30,45,61,0.08);
  color: var(--navy);
  cursor: pointer;
}
.todo-overdue-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--error);
}
.todo-pri-pill {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
  min-width: 48px;
  text-align: center;
  flex-shrink: 0;
}
.todo-pri-high { background: var(--error-bg); color: var(--error); }
.todo-pri-med { background: var(--warning-bg); color: var(--warning); }
.todo-pri-low { background: var(--accent-bg); color: var(--accent-dark); }
.todo-cat-pill {
  font-size: 11px;
  font-weight: 400;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-2);
  min-width: 65px;
  text-align: center;
  flex-shrink: 0;
}
.todo-date-col {
  font-size: 12px;
  color: var(--text-3);
  min-width: 70px;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}
.todo-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.todo-row:hover .todo-actions { opacity: 1; }
.todo-completed-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}
.todo-completed-sep-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.todo-completed-sep-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.todo-completed-toggle {
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.todo-completed-toggle:hover .todo-completed-sep-label { color: var(--text); }
.todo-completed-chevron {
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.todo-completed-chevron.open { transform: rotate(90deg); }
.todo-empty-msg {
  padding: 2rem;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}
@media (max-width: 768px) {
  .todo-view-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .todo-view-tabs::-webkit-scrollbar { display: none; }
  .todo-view-tab {
    font-size: 12px;
    padding: 5px 14px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .todo-cat-chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .todo-cat-chips::-webkit-scrollbar { display: none; }
  .todo-filter-chip { white-space: nowrap; flex-shrink: 0; }
  .todo-row {
    flex-wrap: wrap;
    padding: 10px 12px;
  }
  .todo-pri-pill, .todo-cat-pill { min-width: unset; font-size: 10px; padding: 1px 6px; }
  .todo-date-col { min-width: unset; font-size: 11px; }
  .todo-actions { opacity: 1; }
}

/* ── GOAL CARD GRID ────────────────────────────────────── */
.goal-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.goal-card {
  background: var(--surface);
  border: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s, background 0.15s;
}
.goal-card:hover {
  box-shadow: var(--shadow-md);
  background: var(--surface-2);
}
.goal-card-paused {
  opacity: 0.7;
}
.goal-card-gradient {
  padding: 14px 18px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.goal-card-gradient .goal-card-title {
  color: var(--text-inverse);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.goal-card-gradient .goal-card-status-pill {
  background: rgba(255,255,255,0.2) !important;
  color: var(--text-inverse) !important;
  backdrop-filter: blur(4px);
}
.goal-card-body {
  padding: 12px 18px 16px;
}

.goal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.goal-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goal-card-status-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.goal-card-progress-wrap {
  margin-bottom: 6px;
}
.goal-card-bar {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
  overflow: hidden;
}
.goal-card-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}

.goal-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.goal-card-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}
.goal-card-kr-text {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ── "Next Chapter" Wave 2 — depth dial · momentum · framing · WOOP ── */
.goal-card-framing {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}
.goal-card-gradient { position: relative; }
/* Title takes the row; the status pill + momentum ring sit side-by-side on the
   right (no longer absolutely positioned, so they can't overlap the pill). */
.goal-card-gradient .goal-card-title { flex: 1 1 auto; min-width: 0; }
.goal-card-momentum {
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  padding: 2px;
  backdrop-filter: blur(2px);
  line-height: 0;
}
.today-goal-mom {
  font-size: 11px;
  font-weight: 700;
  margin-left: auto;
  margin-right: 6px;
  white-space: nowrap;
}
/* Depth dial */
.goal-depth-dial { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.goal-depth-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.12s ease;
}
.goal-depth-btn:hover { border-color: var(--accent); color: var(--text); }
.goal-depth-btn.active {
  background: var(--accent);
  color: var(--text-on-navy, #fff);
  border-color: var(--accent);
}
.goal-depth-btn .goal-depth-ico { font-size: 11px; }
.goal-depth-dial-sm { gap: 2px; flex-shrink: 0; }
.goal-depth-btn-sm {
  padding: 4px 7px;
  font-size: 13px;
  line-height: 1;
}
/* Detail momentum row */
.goal-detail-momentum-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.goal-detail-momentum { flex-shrink: 0; line-height: 0; }
/* WOOP "Why" banner */
.goal-why-banner {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.10), rgba(201, 168, 76, 0.04));
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 12px;
}
.goal-why-banner.has-more { cursor: pointer; }
.goal-why-head { display: flex; align-items: baseline; gap: 8px; }
.goal-why-label { font-size: 11px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.goal-why-text { font-size: 13px; color: var(--text); font-style: italic; }
.goal-why-more { display: none; margin-top: 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.goal-why-banner.expanded .goal-why-more { display: block; }
.goal-why-banner.expanded .goal-why-label::after { content: ''; }
/* More-views menu */
.goal-moreviews-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  z-index: 200;
  min-width: 150px;
  padding: 4px;
}
.goal-moreviews-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
}
.goal-moreviews-item:hover { background: var(--hover-bg, rgba(0, 0, 0, 0.04)); }
.goal-pin-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  opacity: 0.5;
  padding: 0 2px;
}
.goal-pin-btn:hover { opacity: 1; }
/* Goals Settings — view pin chips */
.gs-viewchip {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 14px;
  border: 1px solid var(--rule);
  color: var(--text-secondary);
  background: var(--surface);
  cursor: pointer;
  user-select: none;
}
.gs-viewchip.on {
  background: var(--accent);
  color: var(--text-on-navy, #fff);
  border-color: var(--accent);
}
/* ── Wave 4 — AI flow UIs ── */
.goal-ai-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: var(--border-thin);
}
.goal-ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 16px;
  color: var(--text-secondary);
  font-size: 13px;
}
.goal-ai-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: goal-ai-spin 0.8s linear infinite;
}
@keyframes goal-ai-spin { to { transform: rotate(360deg); } }
.goal-ai-error { text-align: center; padding: 20px 12px; }
.goal-plan-section { margin-bottom: 14px; }
.goal-plan-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.goal-plan-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  margin-bottom: 6px;
  cursor: pointer;
}
.goal-plan-row input { margin-top: 2px; flex-shrink: 0; }
.goal-plan-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.goal-plan-row-label { font-size: 13px; color: var(--text); font-weight: 600; }
.goal-plan-row-sub { font-size: 11px; color: var(--text-secondary); }
.goal-move-card {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 11px 12px;
  margin-bottom: 8px;
}
.goal-move-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.goal-move-detail { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.5; }
.goal-unblock-context {
  font-size: 13px;
  color: var(--text);
  font-style: italic;
  background: var(--chip-bg, rgba(0, 0, 0, 0.03));
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 12px;
}
.goal-rec-panel { margin-top: 12px; }
.goal-rec-group { margin-bottom: 12px; }
.goal-rec-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.goal-rec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  background: var(--paper, var(--surface));
  border-radius: 6px;
  margin-bottom: 5px;
}
.goal-rec-text { font-size: 13px; color: var(--text); min-width: 0; }
.goal-rec-sub { font-size: 11px; color: var(--text-secondary); }
.goal-stuck-banner,
.goal-empty-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.10), rgba(201, 168, 76, 0.03));
  border: 1px solid rgba(201, 168, 76, 0.26);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text);
}
.goal-empty-overview { flex-direction: column; align-items: flex-start; }
/* ── Wave 5 — integrations (todos · finance link) ── */
.goal-todo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: var(--border-thin);
}
.goal-acct-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 11px 12px;
  margin-bottom: 8px;
}
.goal-proj-card {
  background: var(--chip-bg, rgba(0, 0, 0, 0.03));
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 4px;
}
/* ── Follow-up: buddy · finance badge · E3 full-page ── */
.goal-buddy-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 11px 12px;
  margin: 12px 0;
}
.goal-buddy-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.fa-goal-link { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.fa-goal-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 12px;
  background: rgba(201, 168, 76, 0.14);
  color: var(--accent);
  cursor: pointer;
}
.fa-goal-badge:hover { background: rgba(201, 168, 76, 0.24); }
.goal-fullpage-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 5px 8px;
  color: var(--text-secondary);
}
.goal-fullpage-btn:hover { border-color: var(--accent); color: var(--text); }
/* E3 — maximized "full-page" deep-goal detail */
body.goal-detail-full #modal-overlay .modal {
  width: min(1080px, 96vw);
  max-width: none;
  height: 92vh;
  display: flex;
  flex-direction: column;
}
body.goal-detail-full #modal-overlay .modal-body { flex: 1; overflow-y: auto; }
/* ── Wave 6 — onboarding · celebration ── */
.goal-onboard {
  text-align: center;
  padding: 36px 20px;
  max-width: 460px;
  margin: 0 auto;
}
.goal-onboard-icon { margin-bottom: 12px; }
.goal-onboard-title { font-size: 19px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.goal-onboard-sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 18px; line-height: 1.5; }
.goal-onboard-form { display: flex; gap: 8px; }
.goal-onboard-form .form-input { flex: 1; }
.goal-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10050;
  overflow: hidden;
}
.goal-confetti-bit {
  position: absolute;
  top: -14px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.92;
  animation: goal-confetti-fall 1.5s ease-in forwards;
}
@keyframes goal-confetti-fall {
  to { transform: translateY(104vh) rotate(540deg); opacity: 0; }
}
.goal-wincard {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--scrim, rgba(0, 0, 0, 0.45));
  z-index: 10040;
  animation: goal-wincard-in 0.2s ease;
}
@keyframes goal-wincard-in { from { opacity: 0; } to { opacity: 1; } }
.goal-wincard-inner {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 28px 32px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
  max-width: 360px;
}
.goal-wincard-trophy { font-size: 52px; line-height: 1; margin-bottom: 8px; }
.goal-wincard-title { font-size: 21px; font-weight: 800; color: var(--accent); margin-bottom: 4px; }
.goal-wincard-goal { font-size: 14px; color: var(--text); margin-bottom: 18px; }

.goal-card-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.goal-card-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
}

.goal-card-milestone {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.goal-card-milestone-date {
  color: var(--accent);
  font-weight: 500;
}

/* Legacy goal card classes kept for other views */
.goal-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.goal-card-target {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}
.goal-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.goal-progress-bar { flex: 1; }
.goal-progress-pct { font-size: 14px; font-weight: 500; color: var(--accent); min-width: 40px; text-align: right; }

@media (max-width: 768px) {
  .goal-card-grid { grid-template-columns: 1fr; gap: 10px; }
  .goal-card {
    border-left-width: 3px;
    border-radius: 10px;
    padding: 16px;
  }
  .goal-card-bar { height: 6px; }
  .goal-card-title { font-size: 14px; }
}

/* ── GOALS VIEWS ──────────────────────────────────────────── */

/* Progress ring */
.goal-ring { display:inline-block; position:relative; }
.goal-ring-text { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:600;color:var(--ink); }

/* Health dashboard */
.goal-health-stats { display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap; }
.goal-health-stat { flex:1;min-width:120px;padding:12px;border-radius:8px;background:var(--paper);text-align:center; }
.goal-health-stat .stat-val { font-size:20px;font-weight:600;font-family:var(--font-serif); }
.goal-health-stat .stat-label { font-size:11px;color:var(--ink-light);margin-top:4px; }
.health-row { display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;margin-bottom:6px;background:var(--paper);cursor:pointer;transition:background .15s; }
.health-row:hover { background:var(--paper-deep); }
.health-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }
.health-dot.on-track { background:#5fad6e; }
.health-dot.at-risk { background:#c9a84c; }
.health-dot.off-track { background:#e07070; }
.health-row-title { flex:1;font-size:13px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.health-row-bar { width:100px;height:4px;border-radius:2px;background:var(--paper-deep); }
.health-row-fill { height:4px;border-radius:2px;transition:width .3s; }
.health-nudge { font-size:11px;padding:4px 10px;border-radius:12px;border:1px solid var(--brass);color:var(--brass);background:transparent;cursor:pointer;white-space:nowrap; }
.health-nudge:hover { background:rgba(154,125,74,0.1); }

/* Board view (Now/Next/Later) */
.goal-board { display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;min-height:300px; }
.goal-board-col { background:var(--paper);border-radius:8px;padding:12px;min-height:200px; }
.goal-board-col-title { font-family:var(--font-serif);font-size:14px;font-weight:600;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--paper-deep); }
.goal-board-card { padding:10px;border-radius:6px;background:var(--cream);margin-bottom:8px;cursor:grab;border-left:3px solid transparent;transition:box-shadow .15s; }
.goal-board-card:active { cursor:grabbing; }
.goal-board-card.dragging { opacity:0.5;box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.goal-board-card-title { font-size:13px;font-weight:500;margin-bottom:6px; }
.goal-board-drop-target { outline:2px dashed var(--brass);outline-offset:-2px; }
@media(max-width:768px) { .goal-board { grid-template-columns:1fr;gap:12px; } }

/* Priority Matrix */
.goal-matrix { display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;height:400px;background:var(--paper-deep);border-radius:8px;overflow:hidden;position:relative; }
.goal-matrix-quad { background:var(--paper);padding:16px;position:relative; }
.goal-matrix-quad-label { font-size:10px;text-transform:uppercase;letter-spacing:0.05em;color:var(--ink-faint);margin-bottom:8px; }
.goal-matrix-dot { width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:var(--text-inverse);font-weight:600;cursor:pointer;margin:3px;transition:transform .15s; }
.goal-matrix-dot:hover { transform:scale(1.2); }
.goal-matrix-axis { position:absolute;font-size:10px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:0.05em; }
.goal-matrix-axis.y { left:-30px;top:50%;transform:rotate(-90deg) translateX(-50%);transform-origin:center; }
.goal-matrix-axis.x { bottom:-20px;left:50%;transform:translateX(-50%); }

/* Journal view */
.goal-journal { max-width:680px; }
.goal-journal-filters { display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap; }
.goal-journal-entry { display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--paper-deep);position:relative; }
.goal-journal-dot { width:10px;height:10px;border-radius:50%;margin-top:5px;flex-shrink:0; }
.goal-journal-body { flex:1; }
.goal-journal-time { font-size:11px;color:var(--ink-faint);margin-bottom:2px; }
.goal-journal-text { font-size:13px;color:var(--ink); }
.goal-journal-goal-pill { display:inline-block;font-size:10px;padding:1px 8px;border-radius:8px;margin-top:4px; }
.goal-journal-mini-bar { width:60px;height:3px;border-radius:1.5px;background:var(--paper-deep);margin-top:6px; }
.goal-journal-mini-fill { height:3px;border-radius:1.5px; }

/* Gantt view */
.goal-gantt { overflow-x:auto; }
.goal-gantt-table { display:grid;min-width:800px; }
.goal-gantt-header { display:flex;position:sticky;top:0;background:var(--cream);z-index:2;border-bottom:1px solid var(--paper-deep); }
.goal-gantt-label { width:180px;flex-shrink:0;padding:8px 12px;font-size:13px;font-weight:500;position:sticky;left:0;background:var(--cream);z-index:3;border-right:1px solid var(--paper-deep); }
.goal-gantt-cells { display:flex;flex:1;position:relative; }
.goal-gantt-cell { flex:1;min-width:28px;padding:4px 0;text-align:center;font-size:10px;color:var(--ink-faint);border-right:1px solid rgba(0,0,0,0.04); }
.goal-gantt-row { display:flex;border-bottom:1px solid var(--paper-deep);min-height:36px;align-items:center; }
.goal-gantt-bar { position:absolute;height:16px;border-radius:3px;top:50%;transform:translateY(-50%);cursor:pointer;min-width:6px; }
.goal-gantt-bar-fill { height:100%;border-radius:3px;transition:width .3s; }
.goal-gantt-bar-text { position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:9px;color:var(--text-inverse);font-weight:500; }
.goal-gantt-today { position:absolute;top:0;bottom:0;width:2px;background:var(--error);z-index:2;pointer-events:none; }
.goal-gantt-workload { display:flex;flex:1; }
.goal-gantt-workload-cell { flex:1;min-width:28px;height:16px;border-radius:2px;margin:1px; }
.goal-gantt-legend { display:flex;gap:16px;margin-top:12px;font-size:11px;color:var(--ink-light);flex-wrap:wrap; }
.goal-gantt-legend-item { display:flex;align-items:center;gap:4px; }
.goal-gantt-legend-swatch { width:12px;height:12px;border-radius:2px; }
.goal-gantt-toggles { display:flex;gap:8px;margin-bottom:12px; }

/* Trophy wall */
.goal-trophy-stats { display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap; }
.goal-trophy-stat { flex:1;min-width:130px;padding:14px;border-radius:8px;background:var(--paper);text-align:center; }
.goal-trophy-stat .stat-val { font-size:22px;font-weight:600;font-family:var(--font-serif);color:var(--brass); }
.goal-trophy-stat .stat-label { font-size:11px;color:var(--ink-light);margin-top:4px; }
.goal-trophy-grid { display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:16px; }
.goal-trophy-card { border-radius:8px;overflow:hidden;background:var(--paper);cursor:pointer;transition:transform .15s; }
.goal-trophy-card:hover { transform:translateY(-2px); }
.goal-trophy-banner { height:6px; }
.goal-trophy-body { padding:14px; }
.goal-trophy-emoji { font-size:28px;margin-bottom:8px; }
.goal-trophy-title { font-size:14px;font-weight:600;font-family:var(--font-serif);margin-bottom:4px; }
.goal-trophy-date { font-size:11px;color:var(--ink-light); }
.goal-trophy-pills { display:flex;gap:4px;flex-wrap:wrap;margin-top:8px; }

/* Confetti */
@keyframes confetti-fall { 0%{transform:translateY(-100vh) rotate(0deg);opacity:1;} 100%{transform:translateY(100vh) rotate(720deg);opacity:0;} }
.confetti-piece { position:fixed;width:8px;height:8px;z-index:9999;pointer-events:none;animation:confetti-fall 3s ease-out forwards; }

/* Commitment Heatmap */
.goal-heatmap { margin-top:24px; }
.goal-heatmap-title { font-family:var(--font-serif);font-size:15px;margin-bottom:12px; }
.goal-heatmap-grid { display:flex;gap:2px; }
.goal-heatmap-col { display:flex;flex-direction:column;gap:2px; }
.goal-heatmap-cell { width:12px;height:12px;border-radius:2px;background:var(--paper-deep);cursor:default; }
.goal-heatmap-cell.l1 { background:rgba(95,173,110,0.25); }
.goal-heatmap-cell.l2 { background:rgba(95,173,110,0.5); }
.goal-heatmap-cell.l3 { background:rgba(95,173,110,0.75); }
.goal-heatmap-cell.l4 { background:rgba(95,173,110,1); }
.goal-heatmap-stats { display:flex;gap:16px;margin-top:8px;font-size:12px;color:var(--ink-light); }

/* Weekly Pulse sidebar */
.goal-pulse { width:220px;flex-shrink:0; }
.goal-pulse-title { font-family:var(--font-serif);font-size:14px;margin-bottom:12px; }
.goal-pulse-row { display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--paper-deep); }
.goal-pulse-name { flex:1;font-size:12px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.goal-pulse-emojis { display:flex;gap:2px; }
.goal-pulse-emoji { width:22px;height:22px;border-radius:4px;border:none;background:transparent;cursor:pointer;font-size:13px;line-height:22px;text-align:center;transition:background .15s; }
.goal-pulse-emoji:hover { background:var(--paper-deep); }
.goal-pulse-emoji.active { background:var(--brass);color:var(--text-inverse); }
.goal-pulse-history { display:flex;gap:3px;margin-left:4px; }
.goal-pulse-dot { width:8px;height:8px;border-radius:50%; }

/* Focus Session drawer */
.focus-drawer { position:fixed;top:0;right:-380px;width:360px;height:100vh;background:var(--cream);box-shadow:-4px 0 24px rgba(0,0,0,0.15);z-index:90;transition:right .3s ease;overflow-y:auto;padding:24px; }
.focus-drawer.open { right:0; }
.focus-drawer-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:20px; }
.focus-drawer-title { font-family:var(--font-serif);font-size:16px;font-weight:600; }
.focus-timer-ring { display:block;margin:0 auto 16px; }
.focus-timer-text { font-family:var(--font-serif);font-size:28px;font-weight:300;text-align:center;margin-bottom:16px; }
.focus-controls { display:flex;gap:8px;justify-content:center;margin-bottom:20px; }
.focus-subtask-list { list-style:none;padding:0; }
.focus-subtask-item { display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--paper-deep);font-size:13px; }
.focus-subtask-check { width:18px;height:18px;border-radius:4px;border:1.5px solid var(--ink-light);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.focus-subtask-check.done { background:var(--success);border-color:var(--success);color:var(--text-inverse); }
.focus-stats { display:flex;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--paper-deep);font-size:12px;color:var(--ink-light); }
@media(max-width:768px) { .focus-drawer { width:100%;right:-100%; } }

/* WOOP Wizard */
.woop-progress { display:flex;gap:8px;justify-content:center;margin-bottom:24px; }
.woop-dot { width:10px;height:10px;border-radius:50%;background:var(--paper-deep);transition:background .2s; }
.woop-dot.active { background:var(--brass); }
.woop-dot.done { background:var(--success); }
.woop-step-title { font-family:var(--font-serif);font-size:18px;text-align:center;margin-bottom:6px; }
.woop-step-desc { font-size:13px;color:var(--ink-light);text-align:center;margin-bottom:16px; }

/* Goal Copilot tab */
.copilot-pace { margin-bottom:16px; }
.copilot-pace-bar { height:20px;border-radius:10px;background:var(--paper-deep);position:relative;overflow:hidden;margin:8px 0; }
.copilot-pace-fill { height:100%;border-radius:10px;transition:width .3s; }
.copilot-pace-marker { position:absolute;top:-4px;width:2px;height:28px;background:var(--ink);border-radius:1px; }
.copilot-pace-label { font-size:12px;font-weight:500;text-align:center;margin-top:4px; }
.copilot-suggestion { padding:12px;border-radius:8px;background:var(--paper);margin-bottom:8px;border-left:3px solid var(--brass); }
.copilot-suggestion-title { font-size:13px;font-weight:600;margin-bottom:4px; }
.copilot-suggestion-body { font-size:12px;color:var(--ink-light); }
.copilot-health { display:flex;align-items:center;gap:8px;padding:12px;border-radius:8px;background:var(--paper);margin-top:12px; }
.copilot-health-dot { width:12px;height:12px;border-radius:50%; }
@keyframes pulse-health { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.3);opacity:0.7;} }
.copilot-health-dot.pulsing { animation:pulse-health 2s ease-in-out infinite; }

/* Auto-progress breakdown bar */
.auto-progress-bar { display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--paper-deep);margin:8px 0; }
.auto-progress-seg { height:100%;transition:width .3s; }

/* Goals page layout with pulse sidebar */
.goals-layout { display:flex;gap:20px; }
.goals-main { flex:1;min-width:0; }
@media(max-width:768px) { .goals-layout { flex-direction:column; } .goal-pulse { width:100%; } }

/* ── CALENDAR ─────────────────────────────────────────── */
.cal-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cal-month-label {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  min-width: 200px;
  text-align: center;
}

.cal-nav-btn {
  background: none;
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-mid);
  transition: all 0.15s;
}
.cal-nav-btn:hover { background: var(--paper-warm); color: var(--ink); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 0;
}

.cal-day-header {
  background: var(--surface-2);
  padding: 8px 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-3);
  min-width: 0;
}

.cal-cell {
  min-height: 100px;
  padding: 6px 8px;
  border-right: var(--border-thin);
  border-bottom: var(--border-thin);
  background: var(--paper);
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  min-width: 0;
  border-radius: 10px;
}

.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: var(--paper-warm); }

.cal-cell.other-month { background: var(--paper-warm); opacity: 0.5; }
.cal-cell.today { background: rgba(184,150,90,0.06); }
.cal-cell.today .cal-date {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; line-height: 28px;
  border-radius: 50%; background: var(--accent); color: var(--text-inverse);
  font-weight: 600; font-size: 14px;
}

.cal-date {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-mid);
  margin-bottom: 4px;
}

.cal-event {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.15s;
  background: rgba(154,125,74,0.18);
  color: var(--brass-dark);
  border-left: 3px solid var(--brass);
}
.cal-event:hover { opacity: 0.8; overflow: visible; z-index: 10; }

.cal-event.personal { background: rgba(154,125,74,0.28); color: var(--brass-dark); border-left: 3px solid var(--brass); }
.cal-event.work { background: rgba(30,45,61,0.22); color: var(--navy); border-left: 3px solid var(--navy); }
.cal-event.health { background: var(--success-bg); color: var(--success-dark); border-left: 3px solid var(--success); }
.cal-event.social { background: rgba(192,57,43,0.20); color: #8b3a2e; border-left: 3px solid #c0392b; }
.cal-event.family { background: var(--warning-bg); color: var(--warning-dark); border-left: 3px solid var(--brass); }
.cal-event.professional { background: rgba(41,128,185,0.18); color: #1a5276; border-left: 3px solid #2980b9; }
.cal-event.volunteer { background: rgba(142,68,173,0.18); color: #6c3483; border-left: 3px solid #8e44ad; }
.cal-event.travel { background: rgba(22,160,133,0.18); color: #0e6655; border-left: 3px solid #16a085; }

/* Tentative RSVP — dashed border + reduced opacity */
.cal-tentative { opacity: 0.6; border-left-style: dashed !important; font-style: italic; }
.day-event-block.cal-tentative { opacity: 0.6; border-left-style: dashed !important; font-style: italic; }

/* Event detail card */
.event-detail {
  background: var(--paper);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  transition: background 0.15s;
}
.event-detail:hover { background: var(--paper-warm); }

.event-detail-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.event-detail-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}

.event-detail-meta {
  font-size: 13px;
  color: var(--ink-light);
  margin-top: 4px;
}

.event-detail-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

/* ── DAILY VIEW ──────────────────────────────────────────── */
.day-timeline {
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.day-hour-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  min-height: 56px;
  border-bottom: var(--border-thin);
  overflow: visible;
}
.day-hour-row:last-child { border-bottom: none; }

.day-hour-label {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-3);
  padding: 6px 12px;
  text-align: right;
  border-right: var(--border-thin);
  background: var(--surface);
}

.day-hour-content {
  padding: 4px 8px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
  overflow: visible;
}
.day-hour-content:hover { background: var(--paper-warm); }

.day-event-block {
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 3px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-left: 4px solid var(--brass);
}
.day-event-block:hover { opacity: 0.85; }

.day-event-title { font-weight: 400; }
.day-event-time { font-size: 11px; opacity: 0.7; white-space: nowrap; }

/* ── WEEKLY VIEW ─────────────────────────────────────────── */
.week-grid {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.week-col-header {
  background: var(--surface-2);
  padding: 4px 4px 3px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  border-right: var(--border-thin);
}
.week-col-header:last-child { border-right: none; }
.week-col-header.today-col { background: var(--surface-2); }
.week-col-header.today-col .week-day-name { color: var(--accent); }

.week-col-header .week-day-num {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 1px;
  color: var(--ink);
}
.week-col-header.today-col .week-day-num {
  width: 26px; height: 26px; line-height: 26px;
  border-radius: 50%; background: var(--accent); color: var(--text-inverse);
  font-weight: 600;
}

.week-corner {
  background: var(--surface-2);
  border-right: var(--border-thin);
}

.week-hour-label {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-3);
  padding: 4px 8px;
  text-align: right;
  border-right: var(--border-thin);
  border-bottom: var(--border-thin);
  background: var(--surface);
  min-height: 48px;
}

.week-cell {
  border-right: var(--border-thin);
  border-bottom: var(--border-thin);
  padding: 2px 3px;
  min-height: 48px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  overflow: visible;
}
.week-cell:nth-child(8n) { border-right: none; }
.week-cell:hover { background: var(--paper-warm); }
.week-cell.today-col { background: rgba(184,150,90,0.05); }

/* Dimmed working hours — background only, events stay fully visible */
.cal-dimmed { background: rgba(30,45,61,0.04); }
.cal-dimmed .day-hour-label { color: var(--ink-faint); }

.week-event-chip {
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 4px;
  margin-bottom: 1px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.week-event-chip:hover { opacity: 0.8; overflow: visible; z-index: 10; }

/* View switcher */
.view-switcher {
  display: flex;
  background: var(--paper-warm);
  border-radius: var(--radius-pill);
  padding: 3px;
  border: var(--border-thin);
}

.view-btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-light);
  background: none;
  border: none;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s;
}
.view-btn:hover { color: var(--ink); }
.view-btn.active { background: var(--accent); color: var(--text-inverse); }

/* ── CALENDAR LAYERS ──────────────────────────────────────── */
.cal-layer-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 12px; border-radius: 99px;
  font-size: 12px; font-weight: 500; font-family: var(--sans);
  cursor: pointer; transition: all 0.15s;
  background: rgba(184,150,90,0.12);
  color: var(--brass);
  border: 1px solid rgba(184,150,90,0.25);
  white-space: nowrap; flex-shrink: 0;
  line-height: 1.3;
}
.cal-layer-chip:hover { border-color: var(--layer-color, var(--brass)); background: rgba(184,150,90,0.18); }
.cal-layer-chip.cal-layer-off {
  opacity: 0.4; background: var(--paper);
  color: var(--ink-light);
  border-color: var(--paper-warm);
}
.cal-layer-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
}
.cal-layer-add {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px dashed var(--ink-faint);
  background: transparent; color: var(--ink-light);
  font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s; flex-shrink: 0;
  line-height: 1;
}
.cal-layer-add:hover { border-color: var(--brass); color: var(--brass); }
.cal-color-pick {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: border-color 0.15s;
}
.cal-color-pick:hover { border-color: var(--ink-light); }
.cal-color-pick.selected { border-color: var(--ink); box-shadow: 0 0 0 2px var(--paper); }

/* ── DRAG & DROP ──────────────────────────────────────────── */
.cal-drop-target {
  background: rgba(154,125,74,0.12) !important;
  outline: 2px dashed var(--brass);
  outline-offset: -2px;
  transition: background 0.15s;
}
[draggable="true"] { cursor: grab; }
[draggable="true"]:active { cursor: grabbing; }

/* ── EVENT RESIZE ────────────────────────────────────────── */
.day-event-block.timed-event,
.week-event-chip.timed-event {
  position: absolute;
  left: 2px; right: 2px;
  z-index: 2;
  overflow: hidden;
  box-sizing: border-box;
}
.day-event-block.timed-event {
  left: 4px; right: 4px;
}
.week-event-chip.timed-event {
  left: 1px; right: 1px;
  padding: 1px 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* Overlapping timed events — assigned via JS data attributes */
.day-event-block.timed-event[data-overlap-total],
.week-event-chip.timed-event[data-overlap-total] {
  /* width and left are set inline via JS */
}

.event-resize-handle {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 8px;
  cursor: ns-resize;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  z-index: 5;
}
.event-resize-handle:hover,
.event-resize-handle:active {
  background: rgba(154,125,74,0.35);
}
.event-resize-handle::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: rgba(154,125,74,0.5);
}
body.resizing-event {
  cursor: ns-resize !important;
  user-select: none;
}
body.resizing-event * { cursor: ns-resize !important; }
.day-event-block.resizing,
.week-event-chip.resizing {
  opacity: 0.85;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 20 !important;
}
.resize-time-label {
  display: none;
  position: absolute;
  top: 2px; left: 4px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--sans);
  color: var(--cream);
  background: rgba(0,0,0,0.55);
  padding: 1px 6px;
  border-radius: 3px;
  z-index: 25;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

/* ── TRAVEL TIME BLOCKS ─────────────────────────────────── */
.travel-block {
  position: absolute;
  left: 4px; right: 4px;
  background: rgba(184,150,90,0.08);
  border-left: 2px dashed rgba(184,150,90,0.4);
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-radius: 6px;
  z-index: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  overflow: hidden;
  display: flex;
  align-items: center;
  pointer-events: auto;
}
.travel-block:hover {
  z-index: 3;
  background: rgba(52, 152, 219, 0.14);
  border-color: rgba(52, 152, 219, 0.5);
}
.travel-block.travel-warning {
  background: rgba(231, 76, 60, 0.08);
  border-color: rgba(231, 76, 60, 0.4);
}
.travel-block.travel-warning:hover {
  background: rgba(231, 76, 60, 0.14);
}
.travel-block.travel-from-home {
  background: rgba(46, 204, 113, 0.08);
  border-color: rgba(46, 204, 113, 0.3);
}
.travel-block.travel-from-home:hover {
  background: rgba(46, 204, 113, 0.14);
  border-color: rgba(46, 204, 113, 0.5);
}
/* Inherit show_as from the linked event. Tentative → dashed + faded so
   the travel chip visually matches its destination event. Free → very
   faint, since the user doesn't actually need to leave for it. */
.travel-block.cal-tentative {
  opacity: 0.6;
  border-left-style: dashed !important;
  border-style: dashed !important;
  font-style: italic;
}
.travel-block.travel-free {
  opacity: 0.4;
}
.agenda-travel-chip.cal-tentative {
  opacity: 0.6;
  border-left-style: dashed !important;
  font-style: italic;
}
.agenda-travel-chip.travel-free {
  opacity: 0.4;
}
.travel-home-icon { font-size: 12px; flex-shrink: 0; }
.travel-parking-icon { font-size: 11px; flex-shrink: 0; }
.travel-block.week-travel { left: 2px; right: 2px; overflow: hidden; }
.travel-block-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-light);
  white-space: nowrap;
}
.travel-block-inner.compact {
  gap: 3px;
  padding: 1px 4px;
  font-size: 10px;
}
.travel-icon { flex-shrink: 0; opacity: 0.6; }
.travel-duration { font-weight: 500; color: #3498db; }
.travel-dist { opacity: 0.6; font-size: 10px; }
.travel-leave-by { font-size: 10px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.travel-leave-by.compact { font-size: 9px; margin-left: 2px; }
.travel-arrive { font-size: 10px; color: var(--ink-light); opacity: 0.8; font-weight: 500; }
.travel-arrive.compact { font-size: 9px; margin-left: 2px; }
/* Rich hover tooltip for small/clipped travel blocks */
.travel-block[data-travel-tip]:hover::after {
  content: attr(data-travel-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: var(--navy, #1e2d3d);
  color: var(--cream, #f5f1ea);
  font-family: var(--sans);
  font-size: 11px;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: pre-line;
  z-index: 50;
  pointer-events: none;
  min-width: 140px;
  max-width: 220px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  text-align: left;
}
.travel-block[data-travel-tip]:hover::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--navy, #1e2d3d);
  z-index: 50;
  pointer-events: none;
}
.travel-warn-badge {
  font-weight: 600;
  color: var(--error);
  font-size: 11px;
}
/* Travel block with 15-min minimum buffer zone */
.travel-block.travel-has-buffer {
  background: linear-gradient(to bottom, rgba(52, 152, 219, 0.04) 0%, rgba(52, 152, 219, 0.12) 100%);
}
.travel-block.travel-has-buffer.travel-from-home {
  background: linear-gradient(to bottom, rgba(46, 204, 113, 0.04) 0%, rgba(46, 204, 113, 0.12) 100%);
}
.travel-block.travel-has-buffer.travel-warning {
  background: linear-gradient(to bottom, rgba(231, 76, 60, 0.04) 0%, rgba(231, 76, 60, 0.12) 100%);
}
.travel-buffer-label {
  font-size: 9px;
  font-weight: 500;
  color: rgba(52, 152, 219, 0.7);
  opacity: 0.85;
  flex-shrink: 0;
  padding: 0 3px;
  border-right: 1px solid rgba(52, 152, 219, 0.2);
  margin-right: 2px;
}
.travel-buffer-label.compact {
  font-size: 8px;
  padding: 0 2px;
  margin-right: 1px;
}

/* Mobile travel popover (tap-to-show on touch devices) */
.travel-popover {
  position: fixed;
  z-index: 9000;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: auto;
}
.travel-popover-body {
  background: var(--navy, #1e2d3d);
  color: var(--cream, #f5f1ea);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  min-width: 180px;
  max-width: 260px;
}
.travel-popover-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: var(--navy, #1e2d3d);
}
.travel-popover-below .travel-popover-arrow {
  bottom: auto;
  top: -6px;
  border-top-color: transparent;
  border-bottom-color: var(--navy, #1e2d3d);
}
.travel-popover-route {
  font-weight: 600;
  font-size: 11px;
  margin-bottom: 4px;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.travel-popover-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.travel-popover-dur {
  font-weight: 700;
  font-size: 16px;
  color: #5dade2;
}
.travel-popover-dur.travel-popover-warn {
  color: var(--error, #e74c3c);
}
.travel-popover-dist {
  font-size: 12px;
  opacity: 0.7;
}
.travel-popover-leave {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 2px;
}
.travel-popover-arrive {
  font-size: 11px;
  opacity: 0.8;
  margin-bottom: 2px;
}
.travel-popover-parking {
  font-size: 11px;
  color: #82e0aa;
  margin-bottom: 2px;
}
.travel-popover-warning {
  font-size: 11px;
  color: var(--error, #e74c3c);
  margin-bottom: 4px;
}
.travel-popover-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 7px 0;
  background: rgba(255,255,255,0.12);
  color: var(--cream, #f5f1ea);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.3px;
}
.travel-popover-btn:active {
  background: rgba(255,255,255,0.2);
}
/* Hide CSS hover tooltips on touch devices (popover replaces them) */
@media (hover: none) and (pointer: coarse) {
  .travel-block[data-travel-tip]:hover::after,
  .travel-block[data-travel-tip]:hover::before {
    display: none !important;
  }
}

/* Travel detail modal */
.travel-detail { padding: 4px 0; }
.travel-detail-route {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 16px;
  background: var(--paper-warm);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}
.travel-detail-point {
  display: flex;
  align-items: center;
  gap: 10px;
}
.travel-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.travel-dot.from { background: #3498db; }
.travel-dot.to { background: #e74c3c; }
.travel-detail-line {
  width: 2px; height: 20px;
  background: var(--ink-faint);
  margin-left: 5px;
  opacity: 0.3;
}
/* 3-point route (From → Parking → To) */
.travel-route-3pt { gap: 0; }
.travel-detail-line-segment {
  width: 2px; height: 28px;
  background: linear-gradient(to bottom, #3498db, var(--brass));
  margin-left: 5px;
  position: relative;
}
.travel-detail-line-segment.walk {
  background: linear-gradient(to bottom, var(--brass), var(--success, #27ae60));
  height: 24px;
}
.travel-segment-label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-family: var(--sans);
  color: var(--ink-light);
  white-space: nowrap;
}
.travel-dot.parking {
  background: var(--brass) !important;
  border: 2px solid var(--brass-dark, #7a6230) !important;
}
/* Two-leg travel block (drive + walk + leave-by + arrive). Renders inline
   as a single row so it fits in the 24px chip floor. The parent
   .travel-block has overflow:hidden + nowrap; if the chip is too narrow
   for everything, the tail (Arrive) ellipses gracefully via the hover tip. */
.travel-block-inner.travel-two-leg {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 1px 6px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  width: 100%;
}
.travel-leg {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.1;
  flex-shrink: 0;
}
.travel-leg-drive { font-size: 10.5px; }
.travel-leg-walk { font-size: 10px; opacity: 0.9; }
.travel-parking-badge { font-size: 10px; }
.travel-walk-label { font-size: 10px; color: var(--success, #27ae60); font-weight: 500; }
.travel-parking-compact { font-size: 9px; white-space: nowrap; opacity: 0.85; }
.travel-block-inner.travel-two-leg .travel-leave-by,
.travel-block-inner.travel-two-leg .travel-arrive {
  font-size: 9.5px;
  line-height: 1.1;
  flex-shrink: 0;
}
.travel-block-inner.travel-two-leg .travel-arrive {
  opacity: 0.75;
  margin-left: auto;
}
.travel-detail-label {
  font-size: 10px;
  color: var(--ink-faint);
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.travel-detail-title {
  font-size: 14px;
  font-weight: 500;
  font-family: var(--serif);
  color: var(--ink);
}
.travel-detail-stats {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
}
.travel-stat {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  border-right: var(--border-thin);
}
.travel-stat:last-child { border-right: none; }
.travel-stat-val {
  font-size: 20px;
  font-weight: 600;
  font-family: var(--serif);
  color: var(--brass);
}
.travel-stat-label {
  font-size: 11px;
  color: var(--ink-faint);
  font-family: var(--sans);
  margin-top: 2px;
}
.travel-detail-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(231, 76, 60, 0.08);
  border: 1px solid rgba(231, 76, 60, 0.2);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--sans);
  color: var(--error);
  margin-bottom: 12px;
}

/* Travel detail tabs (Route / Parking) */
.travel-tabs {
  display: flex;
  gap: 0;
  border-bottom: var(--border-thin);
  margin-bottom: 16px;
}
.travel-tab {
  flex: 1;
  padding: 10px 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-light);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: color 0.15s, border-color 0.15s;
}
.travel-tab:hover { color: var(--ink); }
.travel-tab.active {
  color: var(--brass);
  border-bottom-color: var(--brass);
}

/* Parking filters */
.parking-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.parking-filter-chip {
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--sans);
  font-weight: 500;
  border-radius: 12px;
  border: 1px solid var(--ink-faint);
  background: transparent;
  color: var(--ink-light);
  cursor: pointer;
  transition: all 0.15s;
}
.parking-filter-chip:hover {
  border-color: var(--brass);
  color: var(--ink);
}
.parking-filter-chip.active {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--text-inverse);
}
.parking-filter-chip.sort {
  margin-left: auto;
  border-style: dashed;
}
.parking-filter-chip.sort:hover,
.parking-filter-chip.sort.active {
  background: rgba(154, 125, 74, 0.1);
  border-color: var(--brass);
  color: var(--brass);
}

/* Parking list */
.parking-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
}

/* Parking card */
.parking-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius-md);
  background: var(--paper-warm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.parking-card:hover {
  border-color: rgba(154, 125, 74, 0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.parking-card.featured {
  border-color: rgba(154, 125, 74, 0.3);
  background: rgba(154, 125, 74, 0.04);
}
.parking-card-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--paper);
  border-radius: var(--radius-sm);
}
.parking-card-info {
  flex: 1;
  min-width: 0;
}
.parking-card-name {
  font-size: 14px;
  font-weight: 500;
  font-family: var(--serif);
  color: var(--ink);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.parking-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: var(--sans);
  color: var(--ink-light);
  margin-bottom: 3px;
}
.parking-walk {
  font-weight: 600;
  color: var(--brass-dark);
}
.parking-card-addr {
  font-size: 11px;
  color: var(--ink-faint);
  font-family: var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.parking-open {
  color: var(--success);
  font-weight: 500;
}
.parking-closed {
  color: var(--error);
  font-weight: 500;
}

/* Parking badge (Closest / Top Rated) */
.parking-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  font-size: 9px;
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-radius: 8px;
}
.parking-badge.closest {
  background: rgba(52, 152, 219, 0.12);
  color: #2980b9;
}
.parking-badge.rated {
  background: rgba(241, 196, 15, 0.15);
  color: #d4a800;
}

/* Parking action buttons */
.parking-card-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  align-self: center;
}
.parking-btn-sm {
  padding: 5px 10px;
  font-size: 11px;
  font-family: var(--sans);
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink-faint);
  background: transparent;
  color: var(--ink-light);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  text-decoration: none;
  text-align: center;
}
.parking-btn-sm:hover {
  border-color: var(--brass);
  color: var(--brass);
}
.parking-btn-sm.maps {
  border-color: rgba(52, 152, 219, 0.3);
  color: #3498db;
}
.parking-btn-sm.maps:hover {
  background: rgba(52, 152, 219, 0.08);
  border-color: #3498db;
}
.parking-btn-sm.outline {
  border-color: rgba(154, 125, 74, 0.3);
  color: var(--brass);
}
.parking-btn-sm.outline:hover {
  background: rgba(154, 125, 74, 0.08);
}
.parking-btn-sm.saved {
  background: rgba(46, 204, 113, 0.1);
  border-color: rgba(46, 204, 113, 0.3);
  color: var(--success);
  pointer-events: none;
}

/* Parking saved banner */
.parking-saved-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(46, 204, 113, 0.08);
  border: 1px solid rgba(46, 204, 113, 0.2);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-family: var(--sans);
  color: var(--success);
  margin-bottom: 12px;
}

/* ── CALENDAR WEATHER CHIPS ───────────────────────────────── */
.cal-weather-chip {
  font-size: 10px; font-family: var(--sans);
  color: var(--ink-light);
  display: inline-flex; align-items: center; gap: 2px;
  line-height: 1;
}
.cal-weather-temps {
  font-size: 9px; font-weight: 500; color: var(--ink-mid);
}
.cal-weather-lo {
  color: var(--ink-faint); margin-left: 1px;
}
.week-header-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 1px;
  line-height: 1;
}
.week-weather-chip {
  display: inline;
  font-size: 11px; font-family: var(--sans);
  color: var(--ink-light);
}
.agenda-weather-chip {
  font-size: 11px; font-family: var(--sans);
  color: var(--ink-light); font-weight: 400;
  white-space: nowrap;
}

/* ── AGENDA VIEW ──────────────────────────────────────────── */
.agenda-day-group { margin-bottom: 0.25rem; }
.agenda-day-group.agenda-past { opacity: 0.6; }
.agenda-day-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--paper-warm);
  cursor: pointer;
  font-family: var(--sans);
}
.agenda-day-header:hover { background: var(--paper-warm); }
.agenda-day-label {
  font-size: 14px; font-weight: 600; color: var(--ink);
  font-family: var(--serif);
}
.agenda-today-badge {
  font-size: 10px; font-weight: 600; color: var(--text-inverse);
  background: var(--accent); padding: 1px 8px; border-radius: 10px;
  font-family: var(--sans);
}
.agenda-today .agenda-day-header {
  border-left: 3px solid var(--accent);
  background: rgba(184,150,90,0.04);
}
.agenda-day-items { padding: 0.25rem 0 0.25rem 0; }
.agenda-item {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  border-left: 3px solid transparent;
  cursor: pointer; transition: background 0.15s;
  font-family: var(--sans);
}
.agenda-item:hover { background: var(--paper-warm); }
.agenda-item-time {
  min-width: 80px; font-size: 12px; color: var(--ink-light);
  padding-top: 2px; flex-shrink: 0;
}
.agenda-item-content {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
}
.agenda-item-title { font-size: 13px; font-weight: 500; color: var(--ink); }
.agenda-item-location { font-size: 11px; color: var(--ink-light); }
.agenda-item-event.personal { border-left-color: var(--brass); }
.agenda-item-event.work { border-left-color: var(--navy); }
.agenda-item-event.health { border-left-color: var(--success); }
.agenda-item-event.social { border-left-color: #c0392b; }
.agenda-item-event.family { border-left-color: var(--warning-dark); }
.agenda-item-contact { border-left-color: var(--brass); }
.agenda-item-contact .agenda-item-title { color: var(--brass-dark); }
.agenda-item-holiday { cursor: default; }
.agenda-item-holiday .agenda-item-title { font-weight: 500; }
.agenda-item-recurring { border-left-color: #5fad6e; }
.agenda-item-recurring .agenda-item-time { color: #3a7d4a; font-weight: 500; }

.agenda-travel-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 14px; margin: 2px 0;
  font-family: var(--sans); font-size: 11px; color: var(--ink-light);
  background: rgba(154,125,74,0.08); border-left: 3px solid rgba(154,125,74,0.35);
  border-radius: 0 6px 6px 0;
}
.agenda-travel-chip.travel-from-home { background: rgba(95,173,110,0.08); border-left-color: rgba(95,173,110,0.4); }
.agenda-travel-chip.travel-warning { background: rgba(200,60,60,0.08); border-left-color: rgba(200,60,60,0.4); }
.agenda-travel-chip.travel-warning .agenda-travel-dur { color: var(--error); }
.agenda-travel-icon { font-size: 12px; }
.agenda-travel-dur { font-weight: 600; color: var(--ink); }
.agenda-travel-dist { color: var(--ink-faint); }
.agenda-travel-leave { font-weight: 600; color: var(--accent); white-space: nowrap; font-size: 11px; margin-left: auto; }
.agenda-travel-arrive { font-size: 10px; color: var(--brass-dark); font-weight: 500; margin-left: 6px; }

/* ── YEAR VIEW ────────────────────────────────────────────── */
.year-grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 0.5rem 0;
}
.year-month-card {
  background: var(--paper);
  border: 1px solid var(--paper-warm);
  border-radius: 10px;
  padding: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}
.year-month-card:hover {
  border-color: var(--brass);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.year-month-card.year-month-current {
  border-color: var(--brass);
  background: rgba(154,125,74,0.04);
}
.year-month-title {
  font-family: var(--serif);
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  text-align: center;
  margin-bottom: 0.5rem;
}
.year-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  text-align: center;
}
.year-mini-header {
  font-size: 9px; color: var(--ink-faint);
  font-family: var(--sans);
  font-weight: 500; padding: 2px 0;
}
.year-mini-day {
  font-size: 10px; color: var(--ink-mid);
  font-family: var(--sans);
  padding: 2px 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.year-mini-day.empty { visibility: hidden; }
.year-mini-day:hover:not(.empty) { background: var(--paper-warm); }
.year-mini-day.year-today {
  background: var(--accent);
  color: var(--text-inverse);
  font-weight: 600;
  border-radius: 50%;
}
.year-mini-day.has-events::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--brass);
}
.year-mini-day.year-today.has-events::after { background: white; }
.year-nav-strip {
  display: flex; justify-content: center; gap: 0.25rem;
  padding: 1rem 0 0.5rem;
}
.year-nav-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-family: var(--sans);
  background: var(--paper);
  border: 1px solid var(--paper-warm);
  border-radius: 6px;
  color: var(--ink-mid);
  cursor: pointer;
  transition: all 0.15s;
}
.year-nav-btn:hover { border-color: var(--brass); color: var(--ink); }
.year-nav-btn.active {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
}

@media (max-width: 768px) {
  /* Calendar controls — compact horizontal layout */
  .cal-controls {
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    justify-content: space-between;
  }
  .cal-month-label {
    font-size: 18px;
    min-width: auto;
    flex: 1;
    text-align: center;
  }
  .cal-nav-btn { width: 32px; height: 32px; }

  /* View switcher — compact on mobile */
  .view-switcher { flex-wrap: wrap; }
  .view-btn { padding: 5px 10px; font-size: 11px; }

  /* Calendar layer chips — scrollable row */
  .cal-layers-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; gap: 4px; padding-bottom: 2px; }
  .cal-layer-chip { font-size: 10px; padding: 2px 6px; }
  .cal-layer-add { width: 18px; height: 18px; font-size: 11px; }

  /* Month grid — taller cells, readable events */
  .cal-cell { min-height: 72px; padding: 4px 3px; }
  .cal-date { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
  .cal-event { font-size: 10px; padding: 2px 4px; margin-bottom: 1px; line-height: 1.3; }

  /* Week grid — single column stacked for mobile instead of forced scroll */
  .week-grid { font-size: 11px; overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; }
  .week-header-cell { padding: 6px 2px; font-size: 10px; }
  .week-cell { min-height: 40px; padding: 2px; }
  .week-event-chip { font-size: 10px; padding: 2px 4px; }

  /* Day view — slimmer time column */
  .day-hour-row { grid-template-columns: 48px 1fr; }
  .day-hour-label { font-size: 11px; }

  /* Weather */
  .weather-hours { gap: 0.5rem; }
  .weather-hour { min-width: 52px; }

  /* Year view */
  .year-grid-container { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .year-month-card { padding: 0.5rem; }
  .year-mini-day { font-size: 9px; }

  /* Agenda */
  .agenda-item-time { min-width: 60px; font-size: 11px; }

  /* Compact weather chips on mobile */
  .cal-weather-chip .cal-weather-temps { display: none; }
  .cal-settings-btn { font-size: 12px; }
}

/* ── WEATHER WIDGET ─────────────────────────────────────── */
.weather-main {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.weather-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.weather-temp {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
}

.weather-desc {
  font-size: 15px;
  color: var(--ink-mid);
  margin-top: 2px;
  text-transform: capitalize;
}

.weather-details {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 4px;
}

.weather-detail {
  font-size: 13px;
  color: var(--ink-light);
}

.weather-detail strong {
  font-weight: 500;
  color: var(--ink-mid);
}

.weather-hours {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: var(--border-thin);
  -webkit-overflow-scrolling: touch;
}

.weather-hour {
  text-align: center;
  flex-shrink: 0;
  min-width: 52px;
}

.weather-hour-time {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 4px;
}

.weather-hour-icon { font-size: 16px; margin-bottom: 2px; }

.weather-hour-temp {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
}

.weather-hour-precip {
  font-size: 11px;
  color: var(--brass);
}

/* ── NOTES / JOURNAL ────────────────────────────────────── */
/* ── Notes Three-Panel Layout ──────────────── */
.notes-layout {
  display: flex;
  gap: 0;
  min-height: 70vh;
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg);
}

/* Left panel: folders + tags */
.notes-folder-panel {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-2, var(--paper-warm, #f0ede8));
  border-right: var(--border-thin);
  overflow: hidden;
}
.notes-folder-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 10px 6px;
}
.notes-folder-heading {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-light);
  font-family: var(--font, var(--sans));
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.notes-tags-section {
  border-top: var(--border-thin);
  padding: 8px 10px;
  overflow-y: auto;
  flex-shrink: 0;
}
.notes-tags-heading {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-light);
  font-family: var(--font, var(--sans));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.notes-tag-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  margin: 1px 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font, var(--sans));
  font-size: 12px;
  color: var(--ink-mid);
  transition: background 0.12s, color 0.12s;
}
.notes-tag-item:hover { background: rgba(0,0,0,0.04); color: var(--ink); }
.notes-tag-item.active { background: rgba(168,144,112,0.12); color: var(--accent, var(--brass)); font-weight: 500; }
.notes-tag-item .notes-tag-hash { color: var(--ink-faint); font-size: 11px; flex-shrink: 0; }
.notes-tag-item .notes-tag-count { font-size: 10px; color: var(--ink-faint); margin-left: auto; }

/* Middle panel: note list */
.notes-list-panel {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: var(--border-thin);
  background: var(--bg);
  overflow: hidden;
}

.notes-search {
  padding: 8px;
  border-bottom: var(--border-thin);
}

.notes-search input {
  width: 100%;
  font-family: var(--font, var(--sans));
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  background: var(--surface-2, var(--paper-warm, #f0ede8));
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 7px 10px 7px 30px;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8480' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 9px center;
}
.notes-search input:focus { border-color: var(--accent, var(--brass)); }

/* Right panel: editor */
.notes-editor-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  min-height: 70vh;
  min-width: 0;
}

.notes-folders {
  padding: 4px 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Mobile back button */
.notes-mobile-back {
  display: none;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font, var(--sans));
  font-size: 13px;
  color: var(--accent, var(--brass));
  padding: 8px 12px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.note-tree-item {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px 4px 0;
  margin: 0 4px;
  border-radius: var(--radius-sm);
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  user-select: none;
  line-height: 1;
}
.note-tree-item:hover { background: var(--paper-warm); color: var(--ink); }
.note-tree-item.active { background: rgba(168,144,112,0.12); color: var(--brass); font-weight: 500; }
.note-tree-chevron {
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--ink-faint); transition: transform 0.15s;
}
.note-tree-chevron.open svg { transform: rotate(90deg); }
.note-tree-chevron.leaf { visibility: hidden; }
.note-tree-folder-icon {
  flex-shrink: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  color: var(--ink-light);
}
.note-tree-item.active .note-tree-folder-icon { color: var(--brass); }
.note-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; padding-left: 3px; }
.note-tree-count { font-size: 10px; color: var(--ink-faint); margin-left: auto; min-width: 16px; text-align: right; padding-right: 2px; }
.note-tree-item.active .note-tree-count { color: var(--brass); opacity: 0.7; }

.notes-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.note-item {
  padding: 0.75rem;
  border-bottom: var(--border-thin);
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.note-item:hover { background: var(--paper-warm); }
.note-item.active { background: var(--paper-warm); border-left: 3px solid var(--brass); }

.note-item-title {
  font-family: var(--font, var(--sans));
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.note-item-preview {
  font-size: 12px;
  color: var(--ink-light);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.note-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--font, var(--sans));
  font-size: 11px;
  color: var(--ink-faint);
}
.note-item-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.note-item-tag-pill {
  font-family: var(--font, var(--sans));
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-2, rgba(0,0,0,0.04));
  color: var(--ink-light);
  white-space: nowrap;
}

.note-item-date {
  font-size: 11px;
  color: var(--ink-faint);
}

.note-item-pin {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 11px;
  color: var(--brass);
}

/* Note editor */
.note-editor-header {
  padding: 0.75rem 1.25rem;
  border-bottom: var(--border-thin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.note-title-input {
  font-family: var(--font, var(--sans));
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  min-width: 0;
}
.note-title-input::placeholder { color: var(--ink-faint); }

.note-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.note-toolbar-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-light);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 13px;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.note-toolbar-btn:hover { color: var(--ink); background: var(--paper-warm); }
.note-toolbar-btn.active { color: var(--brass); background: rgba(154,125,74,0.1); }

.note-toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--ink-faint);
  margin: 0 4px;
}

.note-meta-bar {
  border-top: var(--border-thin);
  background: var(--paper-warm);
}

.note-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 400;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(154,125,74,0.1);
  color: var(--brass);
  border: 0.5px solid rgba(154,125,74,0.3);
}

.note-tag .remove-tag {
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  opacity: 0.6;
}
.note-tag .remove-tag:hover { opacity: 1; }

.tag-input {
  font-family: var(--sans);
  font-size: 11px;
  border: 0.5px dashed var(--ink-faint);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  background: transparent;
  color: var(--ink-light);
  outline: none;
  width: 80px;
}
.tag-input:focus { border-color: var(--brass); }

/* Linked notes */
.note-links-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 0.75rem 1.25rem;
  border-top: var(--border-thin);
}

.note-links-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 6px;
}

.note-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--paper-warm);
  border: var(--border-thin);
  color: var(--ink-mid);
  cursor: pointer;
  margin-right: 4px;
  margin-bottom: 4px;
  transition: all 0.15s;
}
.note-link-chip:hover { border-color: var(--brass); color: var(--brass); }

.note-link-chip .unlink {
  font-size: 13px;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
}
.note-link-chip .unlink:hover { opacity: 1; color: var(--error); }

/* Note type indicator */
.note-type-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.note-type-dot.note { background: var(--brass); }
.note-type-dot.journal { background: var(--success); }
.note-type-dot.idea { background: var(--navy-mid); }
.note-type-dot.reference { background: var(--ink-light); }

/* Empty editor state */
.note-empty-editor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 50vh;
  color: var(--ink-light);
}

.note-empty-editor-icon {
  font-size: 48px;
  opacity: 0.3;
  margin-bottom: 1rem;
}

.note-empty-editor-text {
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
}

/* Folder tabs */
.note-folder-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-mid);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}
.note-folder-tab:hover { background: var(--paper-warm); }
.note-folder-tab.active {
  background: var(--paper-warm);
  color: var(--brass);
  font-weight: 500;
}
.note-folder-count {
  font-size: 11px;
  color: var(--ink-faint);
  background: var(--paper-deep);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}
.note-folder-tab.active .note-folder-count { background: rgba(154,125,74,0.15); color: var(--brass); }

/* Rich text toolbar */
.note-rich-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 1.25rem;
  border-bottom: var(--border-thin);
  background: var(--paper);
  flex-wrap: wrap;
}
.note-rich-toolbar .note-toolbar-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-light);
  padding: 4px 7px;
  border-radius: 3px;
  font-size: 13px;
  font-family: var(--serif);
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
.note-rich-toolbar .note-toolbar-btn:hover { color: var(--ink); background: var(--paper-warm); }
.note-rich-toolbar .note-toolbar-btn:active { color: var(--brass); }
.note-rich-toolbar .note-toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--ink-faint);
  margin: 0 4px;
  opacity: 0.4;
}

/* Rich text contenteditable area */
.note-body-richtext {
  flex: 1;
  width: 100%;
  border: none;
  outline: none;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  background: transparent;
  padding: 1rem 1.25rem;
  min-height: 300px;
  overflow-y: auto;
}
.note-body-richtext:empty:before {
  content: attr(data-placeholder);
  color: var(--ink-faint);
  font-style: italic;
  pointer-events: none;
}
.note-body-richtext p { margin: 0 0 0.75em 0; }
.note-body-richtext h2 {
  font-family: var(--serif);
  font-size: 1.3em;
  font-weight: 600;
  color: var(--ink);
  margin: 1em 0 0.5em;
}
.note-body-richtext h3 {
  font-family: var(--serif);
  font-size: 1.1em;
  font-weight: 600;
  color: var(--ink-mid);
  margin: 0.75em 0 0.4em;
}
.note-body-richtext blockquote {
  border-left: 3px solid var(--brass-light);
  margin: 0.5em 0;
  padding: 0.25em 0 0.25em 1em;
  color: var(--ink-mid);
  font-style: italic;
}
.note-body-richtext ul, .note-body-richtext ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}
.note-body-richtext li { margin-bottom: 0.25em; }
.note-body-richtext b, .note-body-richtext strong { font-weight: 600; color: var(--ink); }
.note-body-richtext i, .note-body-richtext em { font-style: italic; }
.note-body-richtext u { text-decoration: underline; text-decoration-color: var(--brass-light); }
.note-body-richtext s { text-decoration: line-through; color: var(--ink-light); }
.note-body-richtext code {
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(154,125,74,0.12);
  padding: 2px 5px;
  border-radius: 3px;
  color: var(--brass-dark, #8b7340);
}
.note-body-richtext hr {
  border: none;
  border-top: 1px solid var(--border-color, #3a3a52);
  margin: 1.25em 0;
}
.note-body-richtext a {
  color: var(--brass);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.note-body-richtext .checklist {
  list-style: none;
  padding-left: 4px;
}
.note-body-richtext .checklist li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 4px;
  cursor: pointer;
}
.note-body-richtext .checklist li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 3px;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ink-light);
  border-radius: 3px;
  background: var(--paper);
}
.note-body-richtext .checklist li[data-checked="true"]::before {
  background: var(--brass);
  border-color: var(--brass);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}
.note-body-richtext .checklist li[data-checked="true"] {
  text-decoration: line-through;
  color: var(--ink-light);
}
.note-toolbar-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--paper);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 200;
  padding: 6px;
  display: flex;
  gap: 4px;
}
.note-toolbar-dropdown .swatch {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.1s;
}
.note-toolbar-dropdown .swatch:hover {
  border-color: var(--ink-light);
  transform: scale(1.15);
}

/* ── Emoji Picker ────────────────────────────────────────── */
.note-emoji-picker {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--paper);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 210;
  width: 280px;
  flex-direction: column;
  max-height: 320px;
}
.emoji-picker-search {
  padding: 6px 8px 2px;
}
.emoji-picker-search input {
  width: 100%;
  padding: 5px 8px;
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  background: var(--cream);
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
}
.emoji-picker-search input:focus {
  border-color: var(--brass);
}
.emoji-tabs {
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  border-bottom: var(--border-thin);
  overflow-x: auto;
  flex-shrink: 0;
}
.emoji-tab {
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 3px 5px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s;
}
.emoji-tab:hover {
  opacity: 1;
  background: var(--cream);
}
.emoji-tab.active {
  opacity: 1;
  background: var(--brass-light, rgba(184,155,100,0.15));
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 6px;
  overflow-y: auto;
  max-height: 220px;
}
.emoji-cell {
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 4px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  transition: background 0.1s, transform 0.1s;
}
.emoji-cell:hover {
  background: var(--cream);
  transform: scale(1.2);
}

.note-link-popover {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--paper);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 200;
  padding: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.note-link-popover input {
  font-size: 12px;
  padding: 4px 8px;
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  background: var(--paper-deep);
  color: var(--ink);
  width: 220px;
  font-family: var(--sans);
}

/* Slash command menu */
.slash-command-menu {
  position: fixed;
  z-index: 300;
  background: var(--paper);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}
.slash-command-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
}
.slash-command-item:hover,
.slash-command-item.active {
  background: var(--paper-warm);
}
/* EVENT TEMPLATE PICKER */
.event-template-picker-item:hover {
  background: var(--paper-warm);
}
.slash-command-item .slash-icon {
  width: 20px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
}
.slash-command-item .slash-label {
  flex: 1;
}
.slash-command-item .slash-hint {
  font-size: 11px;
  color: var(--ink-light);
}

/* Tags section */
.note-tags-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 0.75rem 1.25rem;
  border-top: var(--border-thin);
}

/* Note link remove */
.note-link-remove {
  font-size: 13px;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
}
.note-link-remove:hover { opacity: 1; color: var(--error); }

/* Link add button */
.note-link-add-btn {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--brass);
  background: none;
  border: 0.5px dashed var(--brass-light);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.note-link-add-btn:hover { background: rgba(154,125,74,0.08); }

/* Note tag remove */
.note-tag-remove {
  font-size: 13px;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
  margin-left: 2px;
}
.note-tag-remove:hover { opacity: 1; color: var(--error); }

/* Note item header (for type dot + title row) */
.note-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 768px) {
  .notes-layout {
    flex-direction: column;
    border: none;
    border-radius: 0;
    min-height: auto;
    position: relative;
  }
  .notes-folder-panel { display: none; }
  .notes-list-panel {
    width: 100%;
    border-right: none;
    border: var(--border-thin);
    border-radius: var(--radius-lg);
    max-height: none;
  }
  .notes-editor-panel {
    min-height: 60vh;
    border: var(--border-thin);
    border-radius: var(--radius-lg);
    margin-top: 12px;
  }
  .notes-layout.notes-editor-open .notes-list-panel { display: none; }
  .notes-layout.notes-editor-open .notes-editor-panel { margin-top: 0; }
  .notes-layout.notes-editor-open .notes-mobile-back { display: flex; }
  .notes-mobile-back {
    position: fixed;
    top: auto;
    left: 8px;
    bottom: 80px;
    z-index: 10;
    background: var(--bg);
    border: var(--border-thin);
    border-radius: 20px;
    padding: 6px 14px;
    box-shadow: var(--shadow-sm);
  }
  .note-item-title { font-size: 14px; }
  .note-item-meta { font-size: 11px; }
}

/* ── Habits ────────────────────────────────── */
.habits-layout {
  display: flex; gap: 24px; align-items: flex-start;
}
.habits-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.habits-sidebar { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }

.habit-check-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: var(--border-thin); transition: background 0.15s;
}
.habit-check-row:last-child { border-bottom: none; }
.habit-check-row:hover { background: var(--surface-2); }
.habit-icon { font-size: 1.25rem; width: 32px; text-align: center; flex-shrink: 0; }
.habit-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.habit-name { font-family: var(--font); font-size: 0.9rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.habit-streak-pill {
  font-family: var(--font); font-size: 11px; font-weight: 600; color: var(--ink-mid);
  white-space: nowrap;
}
.habit-check-btn {
  width: 20px; height: 20px; min-width: 20px; border-radius: 50%; border: 2px solid var(--ink-faint);
  background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; flex-shrink: 0; order: -1;
}
.habit-check-btn.done { border-color: var(--success); background: var(--success); }
.habit-check-btn.done svg { stroke: #fff; }
.habit-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* Habit stats sidebar */
.habit-stat-row { margin-bottom: 10px; }
.habit-stat-row:last-child { margin-bottom: 0; }
.habit-stat-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
}
.habit-stat-name { font-family: var(--font); font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.habit-stat-pct { font-family: var(--font); font-size: 11px; color: var(--ink-light); font-weight: 600; }
.habit-stat-bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.habit-stat-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }

.heatmap-grid { display: flex; gap: 2px; overflow-x: auto; padding: 0.75rem 1rem; }
.heatmap-col { display: flex; flex-direction: column; gap: 2px; }
.heatmap-cell {
  width: 16px; height: 16px; border-radius: 3px; background: var(--surface-2);
}

/* ── Habits Activity Heatmap — full year, no horizontal scroll ── */
/* 53 week columns + 1 day-label column, cells flex to fit the available
   width so a full year always fits on screen. Each cell maintains a 1:1
   aspect ratio. Inspired by GitHub's contribution graph. */
.habits-heatmap-grid {
  display: flex;
  gap: 3px;
  padding: 0.75rem 1rem 0;
  align-items: flex-start;
  width: 100%;
}
.habits-heatmap-daycol {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  margin-right: 4px;
}
.habits-heatmap-month-label-spacer {
  height: 14px;
}
.habits-heatmap-daylabel {
  font-size: 9px;
  font-family: var(--font);
  color: var(--ink-light, var(--text-3));
  line-height: 1;
  height: calc((100vw - 360px) / 53 * 0.95);
  max-height: 13px;
  min-height: 8px;
  display: flex;
  align-items: center;
}
.habits-heatmap-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
}
.habits-heatmap-monthlabel {
  font-size: 9px;
  font-family: var(--font);
  color: var(--ink-light, var(--text-3));
  height: 14px;
  line-height: 14px;
  text-align: left;
  white-space: nowrap;
  overflow: visible;
}
.habits-heatmap-cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background: var(--surface-2);
  min-width: 6px;
  max-width: 14px;
}
.habits-heatmap-cell.future { opacity: 0.3; }
.habits-heatmap-cell.lvl-1 { background: rgba(154,125,74,0.3); }
.habits-heatmap-cell.lvl-2 { background: rgba(154,125,74,0.55); }
.habits-heatmap-cell.lvl-3 { background: #9a7d4a; }
.habits-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.75rem 1.25rem 1rem;
  font-size: 12px;
  font-family: var(--font);
  color: var(--ink-light, var(--text-3));
}
.habits-heatmap-legend .habits-heatmap-cell {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  aspect-ratio: auto;
}

@media (max-width: 900px) {
  .habits-heatmap-cell { max-width: 10px; }
}
@media (max-width: 768px) {
  .habits-heatmap-cell { max-width: 8px; }
  .habits-heatmap-daylabel { font-size: 8px; }
  .habits-heatmap-monthlabel { font-size: 8px; }
}

@media (max-width: 768px) {
  .habits-layout { flex-direction: column; }
  .habits-sidebar { width: 100%; }
  .habit-check-btn { width: 28px; height: 28px; min-width: 28px; }
  .habit-check-btn svg { width: 14px; height: 14px; }
  .habit-streak-pill { font-size: 10px; background: var(--brass-glow); color: var(--accent); padding: 2px 8px; border-radius: 999px; }
}

/* ── Library ───────────────────────────────── */
.library-layout {
  display: flex; gap: 24px; align-items: flex-start;
}
.library-main { flex: 1; min-width: 0; }
.library-sidebar { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }

/* Book card grid — horizontal scroll row */
.lib-book-grid {
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: 16px;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent, var(--brass)) transparent;
}
.lib-book-grid::-webkit-scrollbar { height: 6px; }
.lib-book-grid::-webkit-scrollbar-track { background: transparent; }
.lib-book-grid::-webkit-scrollbar-thumb { background: var(--accent, var(--brass)); border-radius: 3px; }
.lib-scroll-wrap { position: relative; }
.lib-scroll-btn {
  position: absolute; top: 50%; transform: translateY(-60%);
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface, var(--paper)); border: 1px solid var(--rule, var(--border-thin));
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5; color: var(--text, var(--ink));
  font-size: 14px; line-height: 1; transition: background 0.15s, box-shadow 0.15s;
}
.lib-scroll-btn:hover { background: var(--accent, var(--brass)); color: var(--text-inverse); box-shadow: 0 3px 10px rgba(0,0,0,0.15); }
.lib-scroll-btn.left { left: -12px; }
.lib-scroll-btn.right { right: -12px; }
.lib-book-card {
  background: var(--surface, var(--paper));
  border: var(--border-thin);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  flex: 0 0 160px;
  min-width: 160px;
}
.lib-book-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  border-color: var(--brass);
}
.lib-book-card.selected {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px var(--brass-glow), 0 4px 12px rgba(0,0,0,0.08);
}

/* Cover wrap */
.lib-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--paper-deep);
  overflow: hidden;
}
.lib-cover-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lib-cover-placeholder {
  width: 100%; height: 100%;
  display: none; align-items: center; justify-content: center;
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--paper-deep) 0%, var(--paper-warm, var(--paper-deep)) 100%);
  color: var(--ink-light);
}
/* Show placeholder when it's the only child (no img) */
.lib-cover-placeholder:only-child { display: flex; }
.lib-cover-fallback {
  flex-direction: column; padding: 20px 14px 16px; text-align: center;
  background: linear-gradient(160deg, var(--navy) 0%, #2a3a4a 40%, #1a2634 100%);
  border: 1px solid rgba(154,125,74,0.25);
  position: relative; overflow: hidden;
  box-shadow: inset 4px 0 8px rgba(0,0,0,0.3), inset -1px 0 3px rgba(255,255,255,0.05);
}
.lib-cover-fallback::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(154,125,74,0.15) 60%, transparent 100%);
}
.lib-cover-fallback::after {
  content: ''; position: absolute; top: 14px; left: 20px; right: 20px; height: 1px;
  background: rgba(154,125,74,0.25);
}
.lib-fallback-title {
  font-size: 12px; font-weight: 700; font-family: var(--serif);
  color: var(--text-on-navy); line-height: 1.3; letter-spacing: 0.3px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word; margin-top: 8px;
}
.lib-fallback-author {
  font-size: 9px; font-family: var(--sans); color: var(--brass);
  margin-top: auto; padding-top: 8px; font-weight: 500;
  letter-spacing: 0.5px; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  border-top: 1px solid rgba(154,125,74,0.2);
}

/* Progress bar below cover */
.lib-progress-bar {
  height: 3px; background: rgba(0,0,0,0.08);
}
.lib-progress-fill {
  height: 100%; background: var(--brass);
  border-radius: 0;
  transition: width 0.3s;
}

/* Card body */
.lib-card-body {
  padding: 6px 10px 8px;
}
.lib-card-title {
  font-family: var(--font, var(--serif));
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.lib-card-author {
  font-family: var(--font, var(--sans));
  font-size: 11px; color: var(--ink-light);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-card-meta {
  display: flex; align-items: center; gap: 4px;
  margin-top: 4px; flex-wrap: wrap;
}

/* Sidebar stats grid */
.lib-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.lib-stat-cell {
  padding: 10px 12px; text-align: center;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  border-right: 1px solid rgba(0,0,0,0.04);
}
.lib-stat-cell:nth-child(2n) { border-right: none; }
.lib-stat-cell:nth-last-child(-n+2) { border-bottom: none; }
.lib-stat-val {
  font-size: 1.25rem; font-weight: 700; color: var(--accent, var(--brass));
  font-family: var(--font, var(--serif)); line-height: 1.2;
}
.lib-stat-label {
  font-size: 10px; color: var(--ink-light); font-family: var(--font, var(--sans));
  text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px;
}

/* Search dropdown for add-book */
.lib-search-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper); border: var(--border-thin);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  max-height: 240px; overflow-y: auto; z-index: 10;
}
.lib-search-result {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 12px; cursor: pointer;
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  transition: background 0.1s;
}
.lib-search-result:last-child { border-bottom: none; }
.lib-search-result:hover { background: var(--brass-glow); }

/* Library filter row */
.lib-filter-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 12px;
}
.lib-filter-row .filter-pill {
  font-size: 11px; padding: 4px 10px;
}
.lib-filter-row .filter-pill.active {
  background: var(--accent, var(--brass)); color: var(--text-inverse);
}

/* Legacy card styles (kept for backward compat) */
.book-card {
  display: flex; gap: 1rem; padding: 1rem 1.25rem;
  border-bottom: var(--border-thin); transition: background 0.15s; cursor: pointer;
}
.book-card:last-child { border-bottom: none; }
.book-card:hover { background: var(--brass-glow); }
.book-cover { font-size: 2.5rem; width: 50px; text-align: center; flex-shrink: 0; }
.book-info { flex: 1; min-width: 0; }
.book-title { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.book-author { font-family: var(--sans); font-size: 13px; color: var(--ink-mid); }
.book-meta { display: flex; gap: 1rem; margin-top: 6px; font-size: 12px; color: var(--ink-light); font-family: var(--sans); }
.book-progress-bar {
  height: 4px; border-radius: 2px; background: var(--paper-warm); margin-top: 6px; overflow: hidden;
}
.book-progress-fill { height: 100%; border-radius: 2px; background: var(--brass); transition: width 0.3s; }
.book-rating { color: var(--brass); font-size: 14px; letter-spacing: 1px; }
.book-status-badge {
  display: inline-block; font-size: 11px; font-family: var(--sans); padding: 2px 8px;
  border-radius: 10px; font-weight: 500;
}
.book-status-badge.reading { background: #e8f4e8; color: #2d6a2d; }
.book-status-badge.finished { background: var(--brass-glow); color: var(--brass-dark); }
.book-status-badge.want { background: #e8eef4; color: #3d5a80; }
.book-status-badge.hold { background: #f4ece8; color: #8a6e4e; }

/* Library mobile responsive */
@media (max-width: 768px) {
  .library-layout { flex-direction: column; gap: 16px; }
  .library-sidebar { display: none; }
  .lib-book-grid { gap: 12px; }
  .lib-book-card { flex: 0 0 130px; min-width: 130px; }
  .lib-scroll-btn { display: none; }
  .lib-card-title { font-size: 12px; }
  .lib-card-author { font-size: 10px; }
  .lib-card-body { padding: 6px 8px 8px; }
  .lib-stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ── CRM overdue badge ──────────────────────── */
.crm-overdue-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
  font-family: var(--sans); color: var(--error); padding: 2px 6px;
  background: rgba(180,60,60,0.08); border-radius: 8px;
}

/* ── Dashboard widget helpers ─────────────── */
.streak-row { display: flex; gap: 2px; align-items: center; }
.streak-dot { width: 12px; height: 12px; border-radius: 3px; background: var(--paper-deep); flex-shrink: 0; }
.streak-dot.completed { background: var(--success); }
.widget-progress { height: 4px; border-radius: 2px; background: var(--paper-deep); overflow: hidden; }
.widget-progress-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.pill-muted { background: #88888818; color: #888; border: 1px solid #88888830; }

/* ── Drag & Drop ─────────────────────────── */
.drag-handle {
  cursor: grab;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  padding: 0 4px;
  flex-shrink: 0;
  user-select: none;
  transition: color 0.15s;
}
.drag-handle:hover { color: var(--brass); }
.drag-handle:active { cursor: grabbing; }
.drag-handle svg { pointer-events: none; }

/* Dashboard widget sections */
.dashboard-widgets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.widget-section {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.widget-section.widget-full {
  grid-column: 1 / -1;
}
.widget-section.dragging {
  opacity: 0.5;
  transform: scale(0.98);
}
.widget-section.drag-over {
  border-top: 3px solid var(--brass);
  padding-top: 0.25rem;
}
.widget-section .card-header .drag-handle {
  margin-right: 4px;
}
.widget-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0.5rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: grab;
  user-select: none;
  transition: background 0.15s;
}
.widget-section-header:hover { background: var(--paper-warm); }
.widget-section-header:active { cursor: grabbing; }
.widget-section-header .section-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}

/* Draggable list items (todos, tasks) */
.draggable-item {
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s;
  position: relative;
}
.draggable-item.dragging {
  opacity: 0.4;
  transform: scale(0.97);
}
.draggable-item.drag-over-item {
  border-top: 2px solid var(--brass) !important;
  margin-top: -2px;
}

/* Draggable task rows */
tr.draggable-item.dragging td {
  opacity: 0.4;
}
tr.draggable-item.drag-over-item {
  box-shadow: 0 -2px 0 0 var(--brass) inset;
}

/* ── Contacts ─────────────────────────────── */
.contacts-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.contacts-list-panel {
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-height: 75vh;
  overflow-y: auto;
  background: var(--paper);
}
.contact-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.75rem 1rem;
  border-bottom: var(--border-thin);
  cursor: pointer;
  transition: background 0.15s;
}
.contact-card:hover { background: var(--paper-warm); }
.contact-card.active { background: var(--paper-warm); border-left: 3px solid var(--brass); }
.contact-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-inverse);
  flex-shrink: 0;
}
.contact-card-info { flex: 1; min-width: 0; }
.contact-card-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-card-sub {
  font-size: 12px;
  color: var(--ink-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-card-fav {
  color: var(--brass);
  font-size: 14px;
  flex-shrink: 0;
}

/* Contact detail panel */
.contact-detail {
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  min-height: 50vh;
}
.contact-empty-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  color: var(--ink-light);
}
.contact-detail-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: var(--border-thin);
  background: var(--paper-warm);
}
.contact-avatar-lg {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-inverse);
  flex-shrink: 0;
}
.contact-detail-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.contact-info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0.65rem 1.5rem;
  border-bottom: var(--border-thin);
}
.contact-info-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  min-width: 70px;
  padding-top: 2px;
}
.contact-info-value {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  word-break: break-word;
}
.contact-info-value a {
  color: var(--brass);
  text-decoration: none;
}
.contact-info-value a:hover { text-decoration: underline; }
.contact-section {
  padding: 1rem 1.5rem;
  border-bottom: var(--border-thin);
}
.contact-section-title {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.contact-group-pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--paper-deep);
  color: var(--ink-mid);
  margin-right: 4px;
  margin-bottom: 4px;
}
.contact-rel-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--paper-warm);
  border: var(--border-thin);
  color: var(--ink-mid);
  font-size: 13px;
  cursor: pointer;
  margin-right: 6px;
  margin-bottom: 6px;
  transition: all 0.15s;
}
.contact-rel-chip:hover { border-color: var(--brass); color: var(--brass); }
.contact-rel-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.contact-rel-remove {
  font-size: 14px;
  line-height: 1;
  opacity: 0.4;
  cursor: pointer;
}
.contact-rel-remove:hover { opacity: 1; color: var(--error); }
.contact-notes-text {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mid);
  white-space: pre-wrap;
}

/* Contact detail tabs */
.contact-tabs {
  display: flex;
  flex-wrap: wrap;            /* wrap to multiple rows — no horizontal scrolling */
  gap: 1px 2px;
  border-bottom: var(--border-thin);
  background: var(--paper-warm);
  padding: 2px 2px 0;
}
.contact-tabs::-webkit-scrollbar { display: none; }
.contact-tab {
  padding: 8px 13px;
  border-radius: 6px 6px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-light);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all 0.15s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.contact-tab:hover { color: var(--ink); background: rgba(154,125,74,0.04); }
.contact-tab.active {
  color: var(--brass);
  border-bottom-color: var(--brass);
  font-weight: 600;
}
.contact-tab-panel { display: none; }
.contact-tab-panel.active { display: block; }

/* Tasks — "Plan a New Task" launcher dropdown */
.atask-plan-wrap { position: relative; display: inline-block; }
.atask-plan-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 200;
  min-width: 262px; max-width: 330px;
  background: var(--surface, #fff); border: 1px solid var(--rule, #e7e5df);
  border-radius: 12px; box-shadow: 0 12px 36px rgba(26,29,33,.16);
  padding: 6px; max-height: 70vh; overflow-y: auto;
}
.atask-plan-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 9px 10px; border-radius: 8px; font-family: var(--sans);
}
.atask-plan-item:hover { background: var(--surface-2, #f3f2ee); }
.atask-plan-ic { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.atask-plan-text { display: flex; flex-direction: column; min-width: 0; }
.atask-plan-label { font-size: 13.5px; font-weight: 600; color: var(--text, #1a1d21); }
.atask-plan-sub { font-size: 11.5px; color: var(--text-2, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atask-plan-sep { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3, #a1a7b0); padding: 10px 10px 4px; }
.atask-plan-divider { height: 1px; background: var(--rule, #e7e5df); margin: 6px 4px; }

/* Role cards (Work tab) */
.role-card {
  background: var(--paper-warm);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: box-shadow 0.15s;
}
.role-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.role-card-header { display: flex; align-items: flex-start; gap: 10px; }
.role-card-title { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.role-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.role-type-badge {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px; text-transform: capitalize;
}
.role-primary-badge {
  font-family: var(--sans); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--brass); background: rgba(154,125,74,0.12);
  padding: 2px 6px; border-radius: 8px;
}
.role-card-details {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 8px; font-family: var(--sans); font-size: 13px;
}
.role-card-details a { color: var(--brass); text-decoration: none; }
.role-card-details a:hover { text-decoration: underline; }
.role-card-notes {
  margin-top: 8px; font-family: var(--sans); font-size: 12px;
  color: var(--ink-light); font-style: italic;
}
.role-menu-wrap { position: relative; }
.role-menu {
  display: none; position: absolute; right: 0; top: 100%; z-index: 20;
  background: var(--paper); border: var(--border-thin); border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15); min-width: 160px;
  padding: 4px 0; margin-top: 4px;
}
.role-menu.open { display: block; }
.role-menu button {
  display: block; width: 100%; text-align: left; padding: 8px 14px;
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  background: none; border: none; cursor: pointer;
}
.role-menu button:hover { background: var(--paper-warm); }
.role-menu button.danger { color: var(--error); }
.role-menu button.danger:hover { background: rgba(200,50,50,0.06); }

/* Contact pref rows for tabs */
.ct-pref-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 1.5rem;
  border-bottom: 1px solid rgba(42,58,106,0.06);
}
.ct-pref-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
  min-width: 100px;
  padding-top: 2px;
}
.ct-pref-value {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-mid);
  flex: 1;
  word-break: break-word;
}
.ct-pref-value.ct-pref-empty { color: var(--ink-faint, #9a948a); font-style: italic; }
.ct-pet-breed {
  color: var(--ink-faint);
  font-style: italic;
}
.ct-pet-status {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}
.ct-pet-status.living {
  color: #2e7d4f;
  background: rgba(46, 125, 79, 0.12);
}
.ct-pet-status.deceased {
  color: var(--ink-faint);
  background: rgba(120, 120, 120, 0.14);
}
.ct-pref-row.ct-pet-deceased .ct-pref-value {
  color: var(--ink-faint);
}
.ct-pref-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-family: var(--sans);
  margin-right: 4px;
  margin-bottom: 3px;
}
.ct-tab-empty {
  padding: 2rem 1.5rem;
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
}

/* Contact Activity Log */
.log-header-bar {
  display: flex;
  gap: 8px;
  padding: 12px 1rem;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: var(--border-thin);
}
.log-search-input { flex: 1; min-width: 120px; font-size: 13px; padding: 6px 10px; }
.log-filter-select { width: auto; min-width: 100px; font-size: 12px; padding: 6px 8px; }
.log-entries-list { padding: 0; }
.log-entry { border-bottom: 1px solid rgba(42,58,106,0.06); }
.log-entry-reliability { border-left: 3px solid var(--error, #c44343); }
.log-entry-expanded { background: rgba(154,125,74,0.02); }
.log-entry-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 1rem;
  cursor: pointer;
  transition: background 0.1s;
}
.log-entry-row:hover { background: rgba(154,125,74,0.04); }
.log-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--sans);
  white-space: nowrap;
  flex-shrink: 0;
}
.log-entry-date {
  font-size: 12px;
  color: var(--ink-light);
  font-family: var(--sans);
  white-space: nowrap;
  flex-shrink: 0;
}
.log-entry-title {
  font-size: 13px;
  font-family: var(--sans);
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.log-entry-loc {
  font-size: 11px;
  color: var(--ink-faint);
  font-family: var(--sans);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-entry-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-pill, 999px);
  font-size: 10px;
  font-family: var(--sans);
  background: rgba(154,125,74,0.12);
  color: var(--brass);
  white-space: nowrap;
  flex-shrink: 0;
}
.log-entry-scored {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green, #4a7d6b);
  flex-shrink: 0;
}
.log-entry-chevron {
  font-size: 10px;
  color: var(--ink-faint);
  flex-shrink: 0;
  margin-left: auto;
}
.log-detail { padding: 0 1rem 12px; }
.log-detail-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(42,58,106,0.08);
  margin-bottom: 8px;
}
.log-detail-tab {
  padding: 6px 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-light);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.log-detail-tab:hover { color: var(--ink); }
.log-detail-tab.active { color: var(--brass); border-bottom-color: var(--brass); font-weight: 600; }
.log-detail-body { padding: 4px 0; }
.log-detail-grid { display: grid; gap: 0; }
.log-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(42,58,106,0.04);
}
.log-detail-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
  min-width: 90px;
  flex-shrink: 0;
}
.log-detail-value {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-mid);
  flex: 1;
  word-break: break-word;
}
.log-score-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.log-score-dim {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--paper-warm, rgba(154,125,74,0.03));
  border-radius: 6px;
}
.log-score-dim-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.log-score-dim-value {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
}
.log-score-composite {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-mid);
}
.log-score-bar {
  flex: 1;
  height: 6px;
  background: var(--paper-deep, rgba(42,58,106,0.08));
  border-radius: 3px;
  overflow: hidden;
}
.log-score-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}
.log-score-form { padding: 4px 0; }
.log-score-form-dim {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  flex-wrap: wrap;
}
.log-score-form-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-light);
  min-width: 100px;
}
.log-score-guidance {
  font-size: 11px;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-style: italic;
  width: 100%;
  margin: -2px 0 4px;
  line-height: 1.4;
}
.log-score-btns { display: flex; gap: 4px; }
.log-score-btn {
  width: 32px;
  height: 28px;
  border: 1px solid var(--border, rgba(42,58,106,0.12));
  border-radius: 4px;
  background: var(--paper-warm);
  color: var(--ink-mid);
  font-size: 12px;
  font-family: var(--sans);
  cursor: pointer;
  transition: all 0.15s;
}
.log-score-btn:hover { border-color: var(--brass); color: var(--brass); }
.log-score-btn.active {
  background: var(--brass);
  color: var(--text-inverse);
  border-color: var(--brass);
  font-weight: 600;
}
.log-score-btn-label {
  font-size: 11px;
  color: var(--ink-faint);
  font-family: var(--sans);
  font-style: italic;
}
/* Post-Interaction Review progress dots */
.pir-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 11px; font-family: var(--sans); font-weight: 600;
  background: var(--paper-deep); color: var(--ink-light);
  cursor: pointer; transition: all 0.15s ease;
  border: 2px solid transparent;
}
.pir-dot:hover { border-color: var(--brass); }
.pir-dot.active { background: var(--brass); color: var(--text-inverse); border-color: var(--brass); }
.pir-dot.done { background: var(--accent-green, #4a7d6b); color: var(--text-inverse); }

.log-impact-box {
  margin: 10px 0;
  padding: 10px;
  border-radius: 6px;
  background: rgba(196,67,67,0.05);
  border: 1px solid rgba(196,67,67,0.12);
}
.log-impact-dim {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-pill, 999px);
  font-size: 11px;
  font-weight: 500;
  background: rgba(196,67,67,0.1);
  color: var(--error, #c44343);
  margin: 2px;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
  font-size: 12px;
  font-family: var(--sans);
  background: rgba(154,125,74,0.1);
  color: var(--ink);
}

@media (max-width: 768px) {
  .log-header-bar { flex-direction: column; gap: 6px; }
  .log-search-input { width: 100%; }
  .log-filter-select { width: 100%; }
  .log-entry-row { padding: 8px 0.75rem; gap: 6px; flex-wrap: wrap; }
  .log-entry-loc { display: none; }
  .log-score-grid { grid-template-columns: 1fr; }
  .log-score-form-dim { flex-direction: column; align-items: flex-start; gap: 4px; }
  .log-detail { padding: 0 0.75rem 8px; }
}

/* Relationship map */
.map-node { cursor: grab; }
.map-node:active { cursor: grabbing; }
.map-node:hover circle { stroke-width: 3; }
.map-label {
  font-family: var(--sans);
  font-size: 11px;
  fill: var(--ink);
  pointer-events: none;
  text-anchor: middle;
}
.map-edge-label {
  font-family: var(--sans);
  font-size: 9px;
  fill: var(--ink-faint);
  pointer-events: none;
  text-anchor: middle;
}

@media (max-width: 768px) {
  .contacts-layout { grid-template-columns: 1fr; }
  .contacts-list-panel { max-height: 40vh; }
  .contact-info-grid { grid-template-columns: 1fr; }
}

/* ── Delegation Board ────────────────────────── */
.deleg-board { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; min-height:200px; }
.deleg-lane { flex:1; min-width:200px; }
.deleg-lane-header { font-family:var(--sans); font-size:12px; font-weight:500; color:var(--ink-light); display:flex; align-items:center; gap:6px; padding:6px 4px 10px; }
.deleg-lane-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.deleg-lane-count { color:var(--ink-faint); font-weight:400; }
.deleg-card { background:var(--paper); border:var(--border-thin); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:8px; cursor:pointer; transition:border-color 0.15s,box-shadow 0.15s; }
.deleg-card:hover { border-color:var(--brass); }
.deleg-card.active { border-color:var(--brass); box-shadow:0 0 0 1px var(--brass); }
.deleg-card-title { font-size:14px; font-weight:500; color:var(--ink); margin-bottom:3px; font-family:var(--sans); }
.deleg-card-desc { font-size:12px; color:var(--ink-light); font-family:var(--sans); margin-bottom:6px; line-height:1.4; }
.deleg-card-pills { display:flex; flex-wrap:wrap; gap:4px; }
.deleg-pill { font-size:11px; padding:1px 7px; border-radius:10px; font-family:var(--sans); }
.deleg-pill-contact { background:rgba(124,110,173,0.12); color:#534AB7; }
.deleg-pill-budget { background:rgba(154,125,74,0.12); color:var(--brass-dark); }
.deleg-pill-asap { background:rgba(196,67,67,0.15); color:#993C1D; font-weight:500; }
.deleg-pill-event { background:rgba(43,58,103,0.1); color:#2b3a67; }
.deleg-pill-note { background:rgba(154,125,74,0.1); color:var(--brass-dark); }
.deleg-unread { display:flex; align-items:center; gap:4px; margin-top:6px; font-size:11px; color:var(--error); font-family:var(--sans); }
.deleg-unread-dot { width:6px; height:6px; border-radius:50%; background:var(--error); flex-shrink:0; }
.deleg-detail { background:var(--paper); border:var(--border-thin); border-radius:var(--radius); padding:1.25rem; margin-top:1rem; }
.deleg-meta { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:1rem; }
.deleg-meta-item { font-size:12px; font-family:var(--sans); }
.deleg-meta-label { color:var(--ink-faint); margin-bottom:2px; }
.deleg-meta-value { color:var(--ink-mid); }
.deleg-briefing { background:var(--paper-warm); border-radius:var(--radius-sm); padding:10px 14px; margin-bottom:1rem; }
.deleg-briefing-title { font-size:11px; font-weight:500; color:var(--ink-faint); margin-bottom:4px; font-family:var(--sans); }
.deleg-briefing-text { font-size:12px; color:var(--ink-mid); line-height:1.6; font-family:var(--sans); }
.deleg-thread { border-top:var(--border-thin); padding-top:12px; }
.deleg-thread-title { font-size:12px; font-weight:500; color:var(--ink-light); margin-bottom:10px; font-family:var(--sans); }
.deleg-msg { display:flex; gap:8px; margin-bottom:12px; }
.deleg-msg.mine { flex-direction:row-reverse; }
.deleg-msg-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; flex-shrink:0; }
.deleg-msg-body { flex:1; }
.deleg-msg-meta { font-size:11px; color:var(--ink-faint); margin-bottom:2px; font-family:var(--sans); }
.deleg-msg-text { font-size:13px; color:var(--ink); line-height:1.5; padding:8px 12px; border-radius:0 var(--radius-sm) var(--radius-sm) var(--radius-sm); font-family:var(--sans); }
.deleg-msg.mine .deleg-msg-text { border-radius:var(--radius-sm) 0 var(--radius-sm) var(--radius-sm); background:rgba(124,110,173,0.1); }
.deleg-msg:not(.mine) .deleg-msg-text { background:var(--paper-warm); }
.deleg-msg.mine .deleg-msg-meta { text-align:right; }
.deleg-msg.system .deleg-msg-text { background:transparent; color:var(--ink-faint); font-style:italic; padding:2px 12px; font-size:12px; }
.deleg-subtasks { margin-bottom:1rem; }
.deleg-subtask { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:var(--border-thin); font-family:var(--sans); font-size:13px; }
.deleg-subtask:last-child { border-bottom:none; }
.deleg-attach { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:1rem; }
.deleg-attach-item { display:flex; align-items:center; gap:6px; padding:6px 10px; border:var(--border-thin); border-radius:var(--radius-sm); font-size:12px; font-family:var(--sans); color:var(--ink-mid); background:var(--paper-warm); }
.deleg-activity { border-top:var(--border-thin); padding-top:10px; margin-top:10px; }
.deleg-activity-item { font-size:11px; color:var(--ink-faint); font-family:var(--sans); padding:3px 0; display:flex; gap:6px; }
@media (max-width: 768px) {
  .deleg-board { flex-direction:column; }
  .deleg-lane { min-width:unset; }
}

/* ── My Profile ── */
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width: 768px) { .profile-grid { grid-template-columns:1fr; } }
.profile-section { border:var(--border-thin); border-radius:var(--radius-md); padding:1.25rem 1.5rem; background:var(--paper); }
.profile-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem; }
.profile-section-title { font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; }
.profile-section-icon { font-size:1.2rem; }
.profile-row { display:flex; justify-content:space-between; align-items:flex-start; padding:6px 0; border-bottom:var(--border-thin); font-family:var(--sans); font-size:13px; }
.profile-row:last-child { border-bottom:none; }
.profile-label { color:var(--ink-light); flex-shrink:0; min-width:120px; }
.profile-value { color:var(--ink); text-align:right; flex:1; }
.profile-tag { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-family:var(--sans); margin:1px 2px; }
.profile-tag-brass { background:rgba(154,125,74,0.1); color:var(--brass-dark); }
.profile-tag-blue { background:rgba(55,138,221,0.1); color:#378ADD; }
.profile-tag-green { background:rgba(29,158,117,0.1); color:#1D9E75; }
.profile-tag-red { background:rgba(220,38,38,0.1); color:var(--error); }
.profile-tag-purple { background:rgba(124,110,173,0.15); color:#534AB7; }

/* PROFILE REDESIGN */
.profile-hero {
  background: var(--navy);
  color: var(--text-on-navy);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.profile-hero-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(154,125,74,0.25);
  color: var(--brass);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.6rem; font-weight: 600;
  flex-shrink: 0;
  border: 2px solid rgba(154,125,74,0.4);
}
.profile-hero-info { flex: 1; min-width: 0; }
.profile-hero-name {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 600;
  margin: 0 0 4px; color: var(--text-on-navy);
}
.profile-hero-email {
  font-family: var(--sans); font-size: 13px;
  color: rgba(245,240,230,0.6); margin: 0 0 6px;
}
.profile-hero-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.profile-hero-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 10px;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  text-transform: capitalize;
}
.profile-hero-badge.role { background: rgba(154,125,74,0.2); color: var(--brass); }
.profile-hero-badge.mfa-on { background: rgba(29,158,117,0.2); color: #5bd4a4; }
.profile-hero-badge.mfa-off { background: rgba(220,38,38,0.15); color: #f08080; }

.profile-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-top: 1rem;
}
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab {
  padding: 10px 18px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--ink-light);
  background: none; border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.profile-tab:hover { color: var(--ink); }
.profile-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
}
.profile-tab-content {
  padding: 0.5rem 0;
  min-height: 300px;
}
.profile-tab-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.profile-tab-title {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600;
  color: var(--ink); display: flex; align-items: center; gap: 8px;
}

/* ── Profile › Interests (auto-save chip picker + rich lookup) ── */
.ip-save-indicator{font-family:var(--sans);font-size:12px;color:var(--ink-faint);min-height:18px;transition:color .15s}
.ip-save-indicator.ip-save-saving{color:var(--ink-faint)}
.ip-save-indicator.ip-save-ok{color:#2f7a3a;font-weight:500}
.ip-save-indicator.ip-save-err{color:var(--error,#b03a2e);font-weight:500}
.ip-field .ip-label{display:block;font-family:var(--serif);font-size:14px;font-weight:600;color:var(--ink);margin-bottom:10px}
.ip-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.ip-pills{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.ip-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:13px;padding:5px 12px;border-radius:999px;cursor:pointer;transition:background .12s,border-color .12s,color .12s,transform .08s;border:1px solid transparent;line-height:1.2;white-space:nowrap}
.ip-chip:active{transform:scale(.97)}
.ip-chip-off{background:transparent;color:var(--ink-mid);border-color:var(--rule,#E5E1D8)}
.ip-chip-off:hover{background:var(--paper);border-color:var(--accent)}
.ip-chip-on{background:var(--accent-bg,rgba(184,150,90,0.15));color:var(--accent-dark,#7d6228);border-color:rgba(184,150,90,0.4)}
.ip-chip-on:hover{background:rgba(184,150,90,0.22)}
.ip-chip-x{cursor:pointer;font-weight:700;opacity:.55;padding:0 2px;border-radius:50%}
.ip-chip-x:hover{opacity:1}
.ip-custom-details{margin-top:4px}
.ip-custom-summary{font-family:var(--sans);font-size:12px;color:var(--ink-faint);cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:4px;padding:4px 0;user-select:none}
.ip-custom-summary::-webkit-details-marker{display:none}
.ip-custom-summary:hover{color:var(--accent)}
.ip-custom-details[open] .ip-custom-summary{color:var(--ink)}
.ip-search-wrap{position:relative}
.ip-search{width:100%}
.ip-results{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;background:var(--surface,#fff);border:1px solid var(--rule,#E5E1D8);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.08);max-height:380px;overflow-y:auto;padding:4px}
.ip-result{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;cursor:pointer;transition:background .12s}
.ip-result:hover{background:var(--paper,rgba(0,0,0,0.03))}
.ip-result-thumb{width:42px;height:42px;border-radius:6px;object-fit:cover;background:var(--paper);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ip-result-thumb-empty{font-size:18px;color:var(--ink-faint);background:var(--paper);border:1px solid var(--rule,#E5E1D8)}
.ip-result-text{flex:1;min-width:0}
.ip-result-name{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-result-meta{font-family:var(--sans);font-size:11.5px;color:var(--ink-faint);margin-top:1px}

/* SETTINGS SEGMENTED CONTROL TABS */
.settings-seg-tabs {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  margin-bottom: 1.5rem;
}
.settings-seg-tab {
  padding: 7px 20px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-light);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.settings-seg-tab:hover { color: var(--ink); }
.settings-seg-tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* SITE SETTINGS TABS (standard underline style) */
.ss-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.ss-tab {
  padding: 10px 18px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-light);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.ss-tab:hover { color: var(--ink); }
.ss-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Site Settings Sidebar */
.ss-sidebar-item.active {
  color: var(--accent) !important;
  border-left-color: var(--accent) !important;
  background: rgba(184, 150, 90, 0.06);
  font-weight: 500;
}
.ss-sidebar-item:hover:not(.active) {
  background: rgba(0,0,0,0.02);
  color: var(--ink);
}

/* ADMIN BADGE */
.admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 10px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(220,38,38,0.12);
  color: var(--error);
  margin-left: 8px;
  vertical-align: middle;
}

/* ROLE PILLS (user table) */
.role-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 4px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.role-pill.super_admin { background: var(--accent); color: var(--text-inverse); }
.role-pill.admin { background: rgba(184,150,90,0.25); color: var(--accent-dark); }
.role-pill.subscriber { background: var(--surface-2); color: var(--ink-light); }
.role-pill.delegate { background: rgba(59,130,246,0.12); color: #3b82f6; }
.role-pill.locked { background: rgba(220,38,38,0.1); color: var(--error); font-size: 10px; font-weight: 500; margin-left: 4px; }
.role-pill.test { background: rgba(46,204,113,0.12); color: #2ecc71; font-size: 10px; font-weight: 500; margin-left: 4px; }

/* USER TABLE AVATAR */
.user-avatar-circle {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 12px; font-weight: 600;
  flex-shrink: 0;
}

/* MOBILE: user table becomes stacked cards */
@media (max-width: 768px) {
  .ss-user-table thead { display: none; }
  .ss-user-table tbody tr { display: block; padding: 12px; border-bottom: 1px solid var(--border); }
  .ss-user-table tbody tr td { display: block; padding: 2px 0; text-align: left !important; }
  .ss-user-table tbody tr td:before { content: attr(data-label); font-size: 10px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 2px; }
  .ss-user-table tbody tr td:first-child:before { display: none; }
  .ss-user-table tbody tr td:last-child:before { display: none; }
  .ss-user-table tbody tr[id^="user-expand-"] td:before { display: none; }
}

@media (max-width: 768px) {
  .profile-hero { padding: 1rem 1.25rem; gap: 1rem; flex-direction: column; text-align: center; align-items: center; }
  .profile-hero-avatar { width: 64px; height: 64px; font-size: 1.5rem; }
  .profile-hero-info { text-align: center; }
  .profile-hero-name { font-size: 1.15rem; }
  .profile-hero-badges { justify-content: center; }
  .profile-tab { padding: 8px 14px; font-size: 12px; }
  .profile-tab-content { min-height: 200px; }
  .settings-seg-tabs { flex-wrap: wrap; width: 100%; }
  .settings-seg-tab { flex: 1; text-align: center; min-width: 0; }
  .ss-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ss-tabs::-webkit-scrollbar { display: none; }
}

.standing-instruction { display:flex; align-items:flex-start; gap:10px; padding:8px 12px; border:var(--border-thin); border-radius:var(--radius-sm); margin-bottom:6px; font-family:var(--sans); font-size:13px; color:var(--ink); background:var(--paper-warm); }
.standing-instruction .si-category { font-size:10px; padding:1px 6px; border-radius:8px; font-weight:500; text-transform:uppercase; letter-spacing:0.3px; flex-shrink:0; }
.routine-block { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:var(--border-thin); font-family:var(--sans); font-size:13px; }
.routine-block:last-child { border-bottom:none; }
.routine-time { font-weight:500; color:var(--brass-dark); min-width:110px; font-size:12px; }
.routine-label { color:var(--ink); flex:1; }
.routine-flex { font-size:11px; padding:1px 6px; border-radius:8px; }

/* ── Decision Log (delegation) ── */
.deleg-decision { display:flex; align-items:flex-start; gap:10px; padding:8px 12px; border-left:3px solid var(--brass); background:rgba(154,125,74,0.04); border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin-bottom:6px; font-family:var(--sans); font-size:13px; }
.deleg-decision-text { flex:1; color:var(--ink); }
.deleg-decision-meta { font-size:11px; color:var(--ink-faint); white-space:nowrap; }
.deleg-approval { padding:12px; border:2px solid var(--brass); border-radius:var(--radius-md); background:rgba(154,125,74,0.04); margin-bottom:1rem; }
.deleg-approval-pending { border-color:#EF9F27; background:rgba(239,159,39,0.04); }
.deleg-approval-title { font-size:12px; font-weight:600; font-family:var(--sans); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.deleg-approval-item { display:flex; align-items:flex-start; gap:10px; padding:8px; border:var(--border-thin); border-radius:var(--radius-sm); margin-bottom:6px; background:var(--paper); }
.deleg-approval-actions { display:flex; gap:6px; margin-top:4px; }
.btn-approve { background:#1D9E75; color:var(--text-inverse); border:none; padding:4px 12px; border-radius:var(--radius-sm); font-size:12px; font-family:var(--sans); cursor:pointer; font-weight:500; }
.btn-approve:hover { background:#178a65; }
.btn-reject { background:transparent; color:var(--error); border:1px solid var(--error); padding:4px 12px; border-radius:var(--radius-sm); font-size:12px; font-family:var(--sans); cursor:pointer; }
.btn-reject:hover { background:rgba(220,38,38,0.05); }

/* ── Custom Tooltips ─────────────────────────────────────── */
[data-tip] {
  position: relative;
}
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--text-inverse);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  animation: tooltip-fade 0.15s ease 0.2s forwards;
}
[data-tip]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--ink);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  animation: tooltip-fade 0.15s ease 0.2s forwards;
}
@keyframes tooltip-fade {
  to { opacity: 1; }
}

/* ── Rich Event Tooltip (multi-line) ────────────────────── */
[data-event-tip] {
  position: relative;
}
[data-event-tip]:hover::after {
  content: attr(data-event-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  max-width: 260px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  white-space: pre-line;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  animation: tooltip-fade 0.15s ease 0.3s forwards;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
[data-event-tip]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 16px;
  border: 5px solid transparent;
  border-top-color: var(--ink);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  animation: tooltip-fade 0.15s ease 0.3s forwards;
}
/* When tooltip would overflow top, flip to below */
.cal-cell:first-child [data-event-tip]:hover::after,
.cal-cell:nth-child(-n+8) [data-event-tip]:hover::after {
  bottom: auto;
  top: calc(100% + 8px);
}
.cal-cell:first-child [data-event-tip]:hover::before,
.cal-cell:nth-child(-n+8) [data-event-tip]:hover::before {
  bottom: auto;
  top: calc(100% + 4px);
  border-top-color: transparent;
  border-bottom-color: var(--ink);
}

/* ── MOBILE BOTTOM TAB BAR (styles only — display toggled by @media) ── */
.mobile-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-tab svg {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  stroke: var(--text-3);
  fill: none;
}
.mobile-tab.active svg {
  stroke: var(--accent);
}
.mobile-tab span {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  line-height: 1.2;
}
.mobile-tab.active span {
  color: var(--accent);
  font-weight: 500;
}

/* ── MOBILE MORE SHEET ─────────────────────────────────── */
.mobile-more-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26,24,20,0.45);
  z-index: 249;
  opacity: 0;
  transition: opacity 0.2s;
}
.mobile-more-overlay.visible { display: block; opacity: 1; }

.mobile-more-sheet {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 250;
  background: var(--paper);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.mobile-more-sheet.open {
  display: block;
  transform: translateY(0);
}
.mobile-more-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--ink-faint);
  margin: 0 auto 14px;
}
.mobile-more-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.mobile-more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 4px;
  border-radius: var(--radius-md);
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.mobile-more-item:active { background: var(--paper-deep); }
.mobile-more-item svg {
  width: 24px;
  height: 24px;
  stroke: var(--ink-mid);
  fill: none;
}
.mobile-more-item span {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-mid);
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════
   TODAY PAGE
   ═══════════════════════════════════════════════════════════ */
.today-header { margin-bottom: 1.5rem; }
.today-greeting {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}
.today-date {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink-mid);
  margin-bottom: 0.75rem;
}
.today-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.today-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--paper);
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-mid);
  border: 1px solid var(--rule);
}
.today-columns {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  padding: 28px 32px;
}
.today-main {
  min-width: 0;
}
.today-sidebar { min-width: 0; }
.today-section { margin-bottom: 1.25rem; }
.today-section-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-light);
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule);
}
.today-empty {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-light);
  font-style: italic;
  padding: 0.75rem 0;
}

/* Attention banner */
.today-attention {
  background: var(--brass-glow);
  border: 1px solid var(--brass-light);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.today-attention-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brass-dark);
  margin-bottom: 0.4rem;
}
.today-attention-item {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  padding: 3px 0;
}
.today-attention-more {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--brass);
  cursor: pointer;
  display: inline-block;
  margin-top: 4px;
}
.today-attention-more:hover { text-decoration: underline; }

/* Event cards */
.today-event-card {
  display: flex;
  align-items: stretch;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
  overflow: hidden;
}
.today-event-card:hover { border-color: var(--brass-light); }
.today-event-bar {
  width: 4px;
  flex-shrink: 0;
  border-radius: 8px 0 0 8px;
}
.today-event-body { padding: 0.6rem 0.85rem; flex: 1; min-width: 0; }
.today-event-time {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--brass);
  margin-bottom: 2px;
}
.today-event-title {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.today-event-loc {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-light);
  margin-top: 2px;
}

/* Todo rows */
.today-todo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}
.today-todo-row:last-child { border-bottom: none; }
.today-todo-text {
  flex: 1;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
}

/* Habits */
.today-habit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.today-habit-row:hover { background: var(--paper-warm); }
.today-habit-row:active { background: rgba(154,125,74,0.08); }
.today-habit-check {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  min-width: 28px;
}
.today-habit-name {
  flex: 1;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  min-width: 0;
}
.today-habit-streak {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--brass);
  white-space: nowrap;
}
.today-habit-goal {
  font-size: 11px; color: var(--accent, #9a7d4a); cursor: pointer;
  font-family: var(--sans); opacity: 0.8; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 180px;
  text-decoration: none; display: inline-block;
}
.today-habit-goal:hover { opacity: 1; text-decoration: underline; }

/* Meals */
.today-meal-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border-radius: 6px;
  transition: background 0.12s;
  min-width: 0;
}
.today-meal-tappable { cursor: pointer; }
.today-meal-tappable:hover { background: var(--paper-warm); }
.today-meal-tappable:active { background: rgba(154,125,74,0.08); }
.today-meal-icon { font-size: 16px; flex-shrink: 0; }
.today-meal-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-light);
  width: 60px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.today-meal-val {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.today-meal-edit-icon {
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.today-meal-tappable:hover .today-meal-edit-icon { opacity: 0.6; }
.today-meal-input {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 14px;
  padding: 4px 8px;
  border: 1px solid var(--brass-light);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  outline: none;
}
.today-meal-input:focus { border-color: var(--brass); box-shadow: 0 0 0 2px rgba(154,125,74,0.15); }
.today-meal-save {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 50%;
}
.today-meal-save:hover { background: rgba(46,204,113,0.1); }
.today-meal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0 2px;
  margin-top: 4px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--brass);
  cursor: pointer;
  transition: color 0.15s;
}
.today-meal-footer:hover { color: var(--brass-dark); }

/* Spending */
.today-spend-today {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
}
.today-spend-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-light);
}
.today-spend-progress { margin-top: 8px; }
.today-spend-sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-light);
  margin-top: 4px;
}

/* Today header settings button */
.today-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.today-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.today-settings-btn {
  color: var(--ink-light);
  opacity: 0.6;
  transition: opacity 0.15s;
  margin-top: 0;
}
.today-settings-btn:hover { opacity: 1; }

/* UX-4 — discoverable "Personalize Today" chip + one-time coachmark.
   Lives on the navy hero, which stays navy in dark mode (gotcha #501), so the
   white-alpha surface is correct in both themes; the coachmark uses tokens. */
.today-personalize-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  color: var(--text-on-navy); background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22); border-radius: 999px;
  padding: 6px 13px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.today-personalize-chip:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.40); }
.today-coach {
  position: absolute; z-index: 9400; width: 270px; max-width: calc(100vw - 24px);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(28,33,40,0.22);
  padding: 14px 16px; opacity: 0; transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s;
}
.today-coach.in { opacity: 1; transform: none; }
.today-coach-arrow {
  position: absolute; top: -7px; right: 26px; width: 12px; height: 12px;
  background: var(--surface); border-left: 1px solid var(--rule); border-top: 1px solid var(--rule);
  transform: rotate(45deg);
}
.today-coach-body b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.today-coach-body span { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.45; margin-bottom: 10px; }
.today-coach-x {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  background: var(--navy); color: var(--text-on-navy);
  border: none; border-radius: 8px; padding: 6px 14px; cursor: pointer;
}

/* Today hero banner */
.today-hero { display: flex; align-items: center; justify-content: space-between; grid-column: 1 / -1; background: linear-gradient(135deg, var(--navy) 0%, #2a3f52 100%); border-radius: 16px; padding: 28px 32px; color: var(--text-on-navy); }
.today-hero-greeting { font-size: 1.5rem; font-weight: 600; margin-bottom: 4px; }
.today-hero-date { font-size: 0.85rem; opacity: 0.75; }
.today-hero-weather { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: rgba(255,255,255,0.12); border-radius: 20px; font-size: 0.8rem; }
.today-hero-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Schedule timeline */
.schedule-timeline { position: relative; padding-left: 72px; }
.schedule-timeline::before { content: ''; position: absolute; left: 58px; top: 0; bottom: 0; width: 2px; background: var(--surface-2); }
.schedule-time-item { position: relative; margin-bottom: 12px; }
.schedule-time-label { position: absolute; left: -72px; top: 4px; width: 50px; text-align: right; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.schedule-time-dot { position: absolute; left: -20px; top: 8px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--surface); z-index: 1; }
.schedule-event-card { padding: 8px 12px; background: var(--surface); border-radius: var(--radius-sm); border-left: 3px solid var(--accent); }
.schedule-event-title { font-size: 13px; font-weight: 500; color: var(--text); }
.schedule-event-meta { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.schedule-now-marker { position: relative; margin-bottom: 12px; }
.schedule-now-line { position: absolute; left: -20px; right: 0; top: 50%; height: 2px; background: var(--error); }
.schedule-now-label { position: absolute; left: -72px; top: -4px; width: 50px; text-align: right; font-size: 10px; color: var(--error); font-weight: 600; }

/* Today KPI enhanced */
.today-kpi-trend { font-size: 10px; margin-top: 2px; }
.today-kpi-trend.up { color: var(--success); }
.today-kpi-trend.down { color: var(--error); }
.today-kpi-trend.neutral { color: var(--text-3); }

/* KPI Strip */
.today-kpi-strip {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  grid-column: 1 / -1;
}
.today-kpi {
  flex: 1;
  min-width: 80px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.today-kpi:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.today-kpi-value {
  font-family: var(--font);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
}
.today-kpi.kpi-alert .today-kpi-value { color: var(--error); }
.today-kpi.kpi-good .today-kpi-value { color: var(--success); }
.today-kpi-label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin-top: 2px;
}

/* Today sidebar — grid handles width */

/* Widget card system */
.today-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, border-color 0.15s;
  overflow: hidden;
}
.today-sidebar .today-widget {
  margin-bottom: 12px;
}
.today-widget:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.today-widget-dragging {
  opacity: 0.5;
  border-color: var(--brass);
}
.today-widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 20px 0;
}
.today-widget-grip {
  font-size: 12px;
  color: var(--ink-faint);
  cursor: grab;
  user-select: none;
  letter-spacing: -1px;
}
.today-widget-grip:active { cursor: grabbing; }
.today-widget-title {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
}
.today-widget-action {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.today-widget-action:hover {
  border-color: var(--brass-light);
  color: var(--brass);
  background: var(--brass-glow);
}
.today-widget-body {
  padding: 0 20px 20px;
}

/* TODAY WEATHER WIDGET */
.tw-current {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
}
.tw-current-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tw-icon { font-size: 36px; line-height: 1; }
.tw-temp {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 300;
  color: var(--text);
  line-height: 1;
}
.tw-desc {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 2px;
  text-transform: capitalize;
}
.tw-current-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  text-align: right;
}
.tw-stat { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.tw-stat-label { color: var(--text-3); }
.tw-stat-val { font-weight: 500; color: var(--text); }

.tw-hours-strip {
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tw-hours-strip::-webkit-scrollbar { display: none; }
.tw-hour {
  text-align: center;
  flex-shrink: 0;
  min-width: 48px;
  padding: 0 4px;
}
.tw-hour-time {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  margin-bottom: 4px;
}
.tw-hour-icon { font-size: 16px; margin-bottom: 2px; }
.tw-hour-temp {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.tw-hour-precip {
  font-size: 10px;
  color: var(--accent);
  margin-top: 2px;
}

.tw-daily {
  padding-top: 10px;
}
.tw-day {
  display: grid;
  grid-template-columns: 40px 24px 36px 28px 1fr 28px;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
}
.tw-day-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.tw-day-icon { font-size: 16px; text-align: center; }
.tw-day-precip {
  font-size: 10px;
  color: var(--accent);
  text-align: center;
  min-width: 36px;
}
.tw-day-lo {
  font-size: 12px;
  color: var(--text-3);
  text-align: right;
}
.tw-day-hi {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
}
.tw-day-bar-wrap {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
}
.tw-day-bar {
  position: absolute;
  top: 0;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), #e67e22);
}

.tw-footer {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  padding-top: 8px;
  margin-top: 4px;
}
.tw-extra-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--rule);
}
.tw-extra-stat {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.tw-extra-icon {
  font-size: 15px;
  line-height: 1;
  opacity: 0.85;
  margin-bottom: 2px;
}
.tw-extra-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-top: 2px;
}
.tw-extra-val {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-top: 3px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Mobile/wider cards can fit a larger value */
@media (min-width: 1100px) {
  .tw-extra-val { font-size: 19px; }
}
.tw-extra-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.tw-hours-toggle { display: flex; gap: 4px; padding: 8px 0 4px; }
.tw-toggle-btn { background: none; border: 1px solid var(--border); border-radius: 12px; padding: 2px 10px; font-size: 10px; font-weight: 500; color: var(--text-3); cursor: pointer; font-family: var(--font); transition: all 0.15s; }
.tw-toggle-btn.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
.tw-toggle-btn:hover:not(.active) { border-color: var(--accent); color: var(--text); }

@media (max-width: 768px) {
  .tw-current { flex-direction: column; gap: 8px; }
  .tw-current-right { grid-template-columns: 1fr 1fr; text-align: left; }
  .tw-hour { min-width: 44px; }
  .tw-day { grid-template-columns: 36px 22px 32px 26px 1fr 26px; gap: 4px; }
}

/* FOR YOU WIDGET */
.for-you-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md, 8px); cursor: pointer; transition: background 0.15s, box-shadow 0.15s; border: none; margin-bottom: 8px; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.for-you-card:last-child { margin-bottom: 0; }
.for-you-card:hover { background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.for-you-icon { font-size: 20px; flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface-2); }
.for-you-content { flex: 1; min-width: 0; }
.for-you-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.for-you-body { font-size: 11px; color: var(--text-2); margin-top: 3px; line-height: 1.4; }
.for-you-dismiss { background: none; border: none; color: var(--text-3); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 4px; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.for-you-card:hover .for-you-dismiss { opacity: 0.6; }
.for-you-dismiss:hover { opacity: 1 !important; background: rgba(0,0,0,0.05); }
.for-you-restore-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.for-you-restore-btn {
  background: transparent;
  border: 1px dashed var(--rule);
  color: var(--text-3);
  font-size: 11px;
  font-family: var(--sans);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.for-you-restore-btn:hover { color: var(--text); border-color: var(--text-3); background: rgba(0,0,0,0.03); }
.for-you-shimmer { height: 52px; border-radius: 8px; background: linear-gradient(90deg, var(--surface-2, #f0f0f0) 25%, var(--surface, #fafafa) 50%, var(--surface-2, #f0f0f0) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; margin-bottom: 8px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-shimmer { background: linear-gradient(90deg, var(--surface-2, #f0f0f0) 25%, var(--surface, #fafafa) 50%, var(--surface-2, #f0f0f0) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }

/* ── Bucket List Insight Loader (hybrid progress + rotating messages) ── */
.tbl-insight-loader { padding: 2rem 1.5rem; text-align: center; }
.tbl-loader-header { margin-bottom: 20px; }
.tbl-loader-badge { font-size: 13px; font-weight: 600; color: var(--accent, #B8965A); margin-bottom: 4px; }
.tbl-loader-dest { font-size: 20px; font-weight: 700; color: var(--text, #1a1a1a); }
.tbl-loader-progress { height: 4px; background: var(--rule, #e5e2dd); border-radius: 2px; margin: 0 auto 16px; max-width: 400px; overflow: hidden; }
.tbl-loader-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent, #B8965A), #d4b87a); border-radius: 2px; transition: width 0.5s ease; }
.tbl-loader-status { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; min-height: 24px; }
.tbl-loader-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #B8965A); animation: tbl-pulse-dot 1.2s ease-in-out infinite; flex-shrink: 0; }
@keyframes tbl-pulse-dot { 0%,100% { opacity: 0.4; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } }
.tbl-loader-msg { font-size: 14px; color: var(--text-2, #666); transition: opacity 0.3s ease; }
.tbl-loader-time { font-size: 11px; color: var(--text-2, #aaa); }

.for-you-reach_out { border-left: 3px solid var(--accent); }
.for-you-reach_out .for-you-icon { background: rgba(184,150,90,0.1); }
.for-you-goal_nudge { border-left: 3px solid var(--warning, #e67e22); }
.for-you-goal_nudge .for-you-icon { background: rgba(230,126,34,0.08); }
.for-you-finance_alert { border-left: 3px solid var(--error, #c0392b); }
.for-you-finance_alert .for-you-icon { background: rgba(192,57,43,0.08); }
.for-you-pre_event { border-left: 3px solid var(--success, #4a7c59); }
.for-you-pre_event .for-you-icon { background: rgba(74,124,89,0.08); }
.for-you-habit_risk { border-left: 3px solid #9b59b6; }
.for-you-habit_risk .for-you-icon { background: rgba(155,89,182,0.08); }
.for-you-milestone_soon { border-left: 3px solid #3498db; }
.for-you-milestone_soon .for-you-icon { background: rgba(52,152,219,0.08); }

/* ── CONCEPT 4: SMART DAILY PRIORITIES (TODAY'S FOCUS) ── */
.focus-ai-pick { padding: 10px 12px; background: rgba(154,125,74,0.04); border-radius: 8px; border-left: 3px solid var(--accent, var(--brass)); margin-bottom: 10px; }
.focus-ai-label { font-size: 11px; color: var(--accent, var(--brass-dark)); font-weight: 500; margin-bottom: 3px; }
.focus-ai-title { font-size: 14px; font-weight: 500; color: var(--text, var(--ink)); }
.focus-ai-context { font-size: 11px; color: var(--text-secondary, var(--ink-light)); margin-top: 3px; line-height: 1.4; }
.focus-ai-actions { display: flex; gap: 6px; margin-top: 8px; }
.btn-sm { font-size: 11px; padding: 4px 10px; border-radius: 5px; border: none; cursor: pointer; font-weight: 500; }
.btn-sm.btn-brass { background: var(--accent, var(--brass)); color: var(--text-inverse); }
.btn-sm.btn-brass:hover { opacity: 0.9; }
.btn-sm.btn-ghost { background: transparent; border: 1px solid var(--border, rgba(0,0,0,0.1)); color: var(--text-secondary, var(--ink-light)); }
.btn-sm.btn-ghost:hover { background: var(--surface-2, rgba(0,0,0,0.03)); }
.focus-todo-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border, rgba(0,0,0,0.05)); }
.focus-todo-row:last-child { border-bottom: none; }
.focus-todo-content { flex: 1; min-width: 0; }
.focus-todo-text { font-size: 13px; color: var(--text, var(--ink)); display: block; }
.focus-todo-meta { font-size: 11px; color: var(--text-secondary, var(--ink-light)); display: block; margin-top: 2px; }
.focus-see-all { font-size: 12px; color: var(--accent, var(--brass)); cursor: pointer; text-align: center; padding: 8px 0 2px; font-weight: 500; }
.focus-see-all:hover { text-decoration: underline; }

/* ── CONCEPT 2: PRE-EVENT INTELLIGENCE CARD ── */
.pre-event-rich { display: block !important; padding: 14px !important; position: relative; }
.pre-event-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pre-event-title { font-size: 14px; font-weight: 500; color: var(--text, var(--ink)); }
.pre-event-time { font-size: 11px; color: var(--text-secondary, var(--ink-light)); }
.pre-event-loc { font-size: 12px; color: var(--text-secondary, var(--ink-light)); margin-bottom: 10px; }
.pre-event-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.pre-event-contact-card { background: var(--surface-2, rgba(0,0,0,0.02)); border-radius: 6px; padding: 8px 10px; }
.pre-event-contact-name { font-size: 10px; color: var(--text-secondary, var(--ink-light)); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; font-weight: 500; }
.pre-event-contact-pref { font-size: 12px; color: var(--text, var(--ink)); line-height: 1.5; }
.pre-event-contact-lastseen { font-size: 10px; color: var(--text-secondary, var(--ink-light)); margin-top: 4px; }
.pre-event-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── CONCEPT 5: WEEKLY PATTERN INTELLIGENCE ── */
.weekly-patterns-rich { display: block !important; padding: 14px !important; border-left: 3px solid #3498db !important; position: relative; }
.weekly-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.weekly-title { font-size: 14px; font-weight: 500; color: var(--text, var(--ink)); }
.weekly-stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.weekly-stat-box { text-align: center; padding: 8px 6px; border-radius: 6px; }
.weekly-stat-habits { background: rgba(74,124,89,0.06); }
.weekly-stat-spending { background: rgba(230,126,34,0.06); }
.weekly-stat-social { background: var(--surface-2, rgba(0,0,0,0.02)); }
.weekly-stat-value { font-size: 16px; font-weight: 600; color: var(--text, var(--ink)); }
.weekly-stat-label { font-size: 10px; color: var(--text-secondary, var(--ink-light)); margin-top: 2px; }
.weekly-stat-trend { font-size: 10px; margin-top: 3px; }
.weekly-stat-trend.trend-up { color: var(--success, #4a7c59); }
.weekly-stat-trend.trend-down { color: var(--error, #c0392b); }
.weekly-stat-trend.trend-flat { color: var(--text-secondary, var(--ink-light)); }
.weekly-pattern-insight { background: rgba(154,125,74,0.04); border-radius: 6px; padding: 8px 10px; font-size: 12px; color: var(--text, var(--ink)); line-height: 1.4; }
.for-you-weekly_patterns { border-left: 3px solid #3498db; }

@media (max-width: 768px) {
  .pre-event-grid { grid-template-columns: 1fr; }
  .weekly-stats-grid { grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
  .weekly-stat-value { font-size: 14px; }
}

/* Widget-specific rows */
.today-goal-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.today-goal-row:last-child { border-bottom: none; }
.today-goal-row:hover { background: rgba(154,125,74,0.03); }

.today-crm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.today-crm-row:last-child { border-bottom: none; }
.today-crm-row:hover { background: rgba(154,125,74,0.03); }

.today-deleg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.today-deleg-row:last-child { border-bottom: none; }
.today-deleg-row:hover { background: rgba(154,125,74,0.03); }

.today-note-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.today-note-row:last-child { border-bottom: none; }
.today-note-row:hover { background: rgba(154,125,74,0.03); }

.today-health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.today-health-val {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
}
.today-health-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--ink-light);
  margin-top: 1px;
}

/* Sidebar stacked glance cards */
.glance-card {
  padding: 10px 12px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  margin-bottom: 8px;
}
.glance-card:last-child { margin-bottom: 0; }
.glance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.glance-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--text-3);
}
.glance-action {
  font-size: 11px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-weight: 500;
}
.glance-action:hover { text-decoration: underline; }
.glance-value {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.glance-meta {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
}
.glance-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
  margin-top: 8px;
  overflow: hidden;
}
.glance-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.glance-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.glance-list-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text);
}
.glance-list-item + .glance-list-item {
  border-top: 1px solid var(--rule);
}
.glance-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .today-columns {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 16px;
  }
  .today-hero { padding: 20px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .today-hero-greeting { font-size: 1.25rem; }
  .schedule-timeline { padding-left: 62px; }
  .schedule-timeline::before { left: 48px; }
  .schedule-time-label { left: -62px; width: 44px; font-size: 10px; }
  .schedule-time-dot { left: -10px; }
  .today-greeting { font-size: 1.4rem; }
  .today-kpi-strip { gap: 6px; }
  .today-kpi { min-width: 70px; padding: 8px 8px; }
  .today-kpi-value { font-size: 1rem; }

  /* Bigger touch targets for habits */
  .today-habit-row { padding: 10px 6px; gap: 10px; }
  .today-habit-check { width: 34px; height: 34px; min-width: 34px; }
  .today-habit-check svg { width: 16px; height: 16px; }
  .today-habit-name { font-size: 15px; }
  .streak-row { display: none; } /* hide 7-day dots on mobile to save space */

  /* Meals — always show edit icon on mobile */
  .today-meal-edit-icon { opacity: 0.4; }
  .today-meal-row { padding: 10px 6px; }
  .today-meal-val { font-size: 15px; }
  .today-meal-input { font-size: 16px; padding: 8px 10px; } /* prevent iOS zoom */

  /* Bigger event cards */
  .today-event-body { padding: 0.75rem; }
  .today-event-title { font-size: 16px; }
  .today-event-time { font-size: 12px; }

  /* Widget grip hidden on mobile — drag doesn't work well on touch */
  .today-widget-grip { display: none; }
}

/* ── PAGE SEARCH BAR ── */
.page-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 1.25rem;
  background: var(--paper);
  border: 1px solid var(--paper-deep);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-faint);
}
.page-search-bar:hover {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px rgba(184,156,100,0.10);
}
.page-search-bar kbd {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--paper-deep);
  color: var(--ink-faint);
  border: 1px solid rgba(0,0,0,0.06);
  line-height: 1;
}
@media (max-width: 768px) {
  .page-search-bar kbd { display: none; }
}

/* ── INBOX SIDEBAR LAYOUT ── */
.inbox-layout { display: flex; gap: 20px; }
.inbox-main { flex: 1; min-width: 0; }
.inbox-sidebar { width: 300px; flex-shrink: 0; }
.inbox-sidebar .booking-dashboard { background: var(--paper); border: var(--border-thin); border-radius: var(--radius); padding: 16px; }
.booking-stats { display: flex; gap: 8px; margin-bottom: 16px; }
.booking-stat { flex: 1; border-radius: var(--radius-sm); padding: 10px; text-align: center; }
.booking-stat .stat-num { font-size: 20px; font-weight: 700; font-family: var(--serif); }
.booking-stat .stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-light); }
.booking-stat.purple { background: rgba(124,92,191,0.1); }
.booking-stat.purple .stat-num { color: #7c5cbf; }
.booking-stat.green { background: rgba(58,158,110,0.1); }
.booking-stat.green .stat-num { color: var(--success); }
.booking-stat.blue { background: rgba(74,127,212,0.1); }
.booking-stat.blue .stat-num { color: #4a7fd4; }
.booking-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.booking-card { background: var(--paper-warm); border: var(--border-thin); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 8px; }
.booking-card.pending { border-left: 3px solid #d4a03a; }
.booking-card.confirmed { border-left: 3px solid var(--success); }
.booking-card .booking-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.booking-card .booking-meta { font-size: 12px; color: var(--ink-light); margin-top: 2px; }
.booking-card .booking-note { font-size: 11px; color: var(--ink-light); font-style: italic; margin-top: 4px; }
.booking-card .booking-source { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.booking-card .booking-source.public { background: rgba(124,92,191,0.1); color: #7c5cbf; }
.booking-card .booking-source.direct { background: rgba(224,122,58,0.1); color: #e07a3a; }
.booking-card .booking-actions { display: flex; gap: 6px; margin-top: 8px; }
.booking-card .booking-actions button { padding: 4px 12px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; cursor: pointer; border: none; }
.booking-card .booking-actions .btn-accept { background: var(--success); color: var(--text-inverse); }
.booking-card .booking-actions .btn-decline { background: transparent; color: var(--ink-light); border: var(--border-thin); }
@media (max-width: 768px) {
  .inbox-layout { flex-direction: column; }
  .inbox-sidebar { width: 100%; }
}

/* ── INBOX COMPONENT CLASSES ── */
/* Segmented tab control */
.inbox-tabs { display: inline-flex; gap: 0; margin-bottom: 1.25rem; background: var(--surface-2); border-radius: var(--radius-md); padding: 3px; border: none; }
.inbox-tab { font-size: 12px; font-weight: 500; padding: 6px 16px; border-radius: calc(var(--radius-md) - 2px); border: none; background: transparent; color: var(--text-2); cursor: pointer; transition: all 0.15s ease; }
.inbox-tab:hover { color: var(--text); }
.inbox-tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.06); font-weight: 600; }
.inbox-tab-badge { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 8px; font-size: 10px; font-weight: 600; margin-left: 4px; padding: 0 4px; }
.inbox-tab-badge.error { background: var(--error); color: var(--text-inverse); }
.inbox-tab-badge.brass { background: var(--brass); color: var(--text-inverse); }
.inbox-section { display: none; }
.inbox-section.active { display: block; }
.inbox-loading { color: var(--text-2); font-size: 12px; text-align: center; padding: 20px 0; }

/* Review cards — compact single-row */
.review-card { margin-bottom: 8px; padding: 16px 18px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.review-card-inner { display: flex; align-items: center; gap: 10px; }
.review-card-icon { font-size: 1.3rem; flex-shrink: 0; }
.review-card-body { flex: 1; min-width: 0; }
.review-card-title-row { display: flex; align-items: center; gap: 6px; }
.review-card-title { font-family: var(--font); font-size: 13px; color: var(--text); font-weight: 600; }
.review-card-streak { font-size: 10px; background: rgba(184,150,90,0.12); color: #8B7355; padding: 1px 7px; border-radius: 999px; font-family: var(--font); font-weight: 600; }
.review-card-meta { font-family: var(--font); font-size: 11px; color: var(--text-2); margin-top: 1px; }
.review-card-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* Snooze + attention menus */
.snooze-wrap { position: relative; display: inline-block; }
.snooze-dropdown { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--surface); border: var(--border-thin); border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 100; min-width: 140px; }
.snooze-dropdown.open { display: block; }
.snooze-dropdown .btn { width: 100%; text-align: left; font-size: 12px; padding: 6px 12px; border: none; border-radius: 0; }
.att-menu-wrap { position: relative; display: inline-block; flex-shrink: 0; }
.att-menu-dropdown { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--surface); border: var(--border-thin); border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 100; min-width: 120px; }
.att-menu-dropdown.open { display: block; }
.att-menu-dropdown .btn { width: 100%; text-align: left; font-size: 12px; padding: 6px 12px; border: none; border-radius: 0; }

/* Attention tiers */
.att-tier { margin-bottom: 1rem; }
.att-tier-header { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 8px; user-select: none; }
.att-tier-header:hover { opacity: 0.85; }
.att-tier-label { font-family: var(--font); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.att-tier-count { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 8px; background: var(--surface-2); }
.att-tier-chevron { font-size: 10px; transition: transform 0.2s ease; color: var(--text-3); }
.att-tier-header.collapsed .att-tier-chevron { transform: rotate(-90deg); }
.att-tier-body { overflow: hidden; transition: max-height 0.25s ease; }
.att-tier-body.collapsed { max-height: 0 !important; }
.att-item { margin-bottom: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.att-item-urgent { border-left: 3px solid var(--error); }
.att-item-soon { border-left: 3px solid var(--warning, orange); }
.att-item-fyi { border-left: 3px solid var(--text-3); }
.att-item-inner { display: flex; align-items: center; gap: 12px; }
.att-item-icon { font-size: 1.1rem; flex-shrink: 0; }
.att-item-content { flex: 1; min-width: 0; }
.att-item-title { font-family: var(--font); font-size: 13px; color: var(--text); font-weight: 500; }
.att-item-subtitle { font-family: var(--font); font-size: 11px; color: var(--text-2); margin-top: 1px; }
.att-item-btn { flex-shrink: 0; }
.att-menu-btn { color: var(--text-2); padding: 3px; }

/* Extracted inline style classes — Today widgets */
.today-goal-row.has-color { border-left: 3px solid var(--goal-color); padding-left: 10px; }
.today-goal-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.today-goal-title { flex: 1; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-goal-milestone { font-size: 11px; color: var(--text-2); margin-top: 4px; }
.today-crm-avatar { width: 32px; height: 32px; font-size: 11px; flex-shrink: 0; }
.today-crm-info { flex: 1; min-width: 0; }
.today-crm-name { font-size: 13px; color: var(--text); }
.today-crm-context { font-size: 11px; color: var(--text-2); }
.pill-xs { font-size: 9px; }

/* Review toolbar inline fix */
.review-toolbar-row { display: flex; align-items: center; gap: 6px; }
.review-toolbar-btn-padded { padding: 5px 14px; }
.review-toolbar-btn-muted { color: var(--text-2); }
.inbox-all-clear-link { color: var(--accent); }

/* Briefing card — dark navy banner */
.briefing-card { margin-bottom: 1rem; padding: 1rem 1.25rem; background: linear-gradient(135deg, var(--navy) 0%, #2a3f54 100%); border: none; border-radius: 12px; box-shadow: 0 2px 8px rgba(30,45,61,0.18); }
.briefing-inner { display: flex; align-items: center; gap: 10px; }
.briefing-icon { font-size: 1.3rem; }
.briefing-body { flex: 1; }
.briefing-title { font-family: var(--font); font-size: 0.95rem; color: var(--text-on-navy); font-weight: 600; }
.briefing-summary { font-family: var(--font); font-size: 12px; color: rgba(245,240,230,0.7); margin-top: 2px; }

/* Start review toolbar */
.start-review-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 8px; }
.review-toolbar-label { font-family: var(--font); font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.08em; }
.review-toolbar-btn { font-size: 11px; padding: 3px 10px; }
.review-toolbar-link { font-family: var(--font); font-size: 12px; color: var(--accent); text-decoration: none; }
.review-toolbar-link:hover { text-decoration: underline; }

/* Inbox empty/all-clear / zen states */
.inbox-all-clear { text-align: center; padding: 3rem 2rem; }
.inbox-all-clear-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.inbox-all-clear-title { font-family: var(--font); font-size: 1.3rem; color: var(--text-2); margin-bottom: 0.5rem; }
.inbox-all-clear-text { font-size: 13px; color: var(--text-3); font-family: var(--font); }
.inbox-zen { text-align: center; padding: 2.5rem 2rem; }
.inbox-zen svg { margin: 0 auto 1rem; display: block; }
.inbox-zen-title { font-family: var(--font); font-size: 1.15rem; font-weight: 600; color: var(--text-2); margin-bottom: 0.35rem; }
.inbox-zen-text { font-size: 13px; color: var(--text-3); font-family: var(--font); line-height: 1.5; }
.inbox-zen-link { color: var(--accent); text-decoration: none; }
.inbox-zen-link:hover { text-decoration: underline; }

/* Capture quick-add */
.capture-input-row { display: flex; gap: 8px; margin-bottom: 1rem; border-radius: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); }
.capture-input-row .form-input { flex: 1; height: 38px; font-size: 14px; }
.capture-input-row .btn { padding: 6px 14px; font-size: 13px; white-space: nowrap; }
.capture-hint-wrap { display: none; margin-top: 6px; }
.capture-hint { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(184,150,90,0.08); border-radius: var(--radius-md); font-family: var(--font); font-size: 12px; }
.capture-hint .btn { font-size: 11px; padding: 2px 10px; }

/* Capture toolbar */
.capture-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; flex-wrap: wrap; }
.capture-search-wrap { flex: 1 1 180px; min-width: 0; position: relative; }
.capture-search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.capture-search-wrap .form-input { padding-left: 30px; height: 34px; font-size: 13px; width: 100%; box-sizing: border-box; }
.capture-sort { width: auto; flex-shrink: 0; height: 34px; font-size: 12px; }
.capture-bulk-bar { display: flex; gap: 6px; align-items: center; padding: 4px 10px; background: rgba(184,150,90,0.08); border-radius: var(--radius-md); }
.capture-bulk-count { font-family: var(--font); font-size: 12px; color: var(--accent); font-weight: 500; }
.capture-bulk-bar .btn { font-size: 10px; padding: 3px 8px; }

/* Capture undo bar */
.capture-undo { display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin-bottom: 1rem; background: rgba(59,130,246,0.06); border-radius: var(--radius-md); font-family: var(--font); font-size: 13px; color: var(--text-2); }
.capture-undo-text { flex: 1; }
.capture-undo .btn { font-size: 11px; padding: 3px 10px; }
.capture-undo .btn-icon { color: var(--text-3); padding: 2px; }

/* Capture select-all header */
.capture-select-header { display: flex; align-items: center; gap: 8px; margin-bottom: 0.75rem; }
.capture-select-header input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; }
.capture-select-label { font-family: var(--font); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); }

/* Capture item card */
.capture-item { margin-bottom: 10px; padding: 1rem 1.25rem; }
.capture-item.selected { border-color: var(--accent); background: rgba(184,150,90,0.04); }
.capture-item-inner { display: flex; align-items: flex-start; gap: 10px; }
.capture-item-inner input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; margin-top: 3px; flex-shrink: 0; }
.capture-item-body { flex: 1; min-width: 0; }
.capture-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.capture-item-text { font-family: var(--font); font-size: 14px; color: var(--text); white-space: pre-wrap; word-break: break-word; flex: 1; }
.capture-item-edit { color: var(--text-3); padding: 2px; flex-shrink: 0; }
.capture-item-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.capture-item-time { font-family: var(--font); font-size: 11px; color: var(--text-3); }
.capture-tag { display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: var(--radius-pill); background: rgba(184,150,90,0.08); color: var(--accent); font-family: var(--font); }

/* Capture triage buttons */
.capture-triage { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; padding-left: 24px; }
.capture-triage-btn { font-size: 11px; padding: 4px 10px; }
.capture-triage-btn.dismiss { color: var(--text-3); }

/* History list */
.history-count { font-family: var(--font); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); margin-bottom: 0.75rem; }
.history-item { display: flex; align-items: center; gap: 8px; font-family: var(--font); font-size: 13px; color: var(--text-3); padding: 6px 0; border-bottom: 1px solid var(--rule); }
.history-item-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item-dest { font-size: 11px; color: var(--text-3); white-space: nowrap; opacity: 0.7; }
.history-item .btn-icon { color: var(--text-3); padding: 2px; opacity: 0.7; }
.history-item .btn-icon:hover { opacity: 1; }
.history-clear { text-align: right; margin-top: 8px; }
.history-clear .btn { font-size: 11px; padding: 3px 10px; color: var(--text-3); }

/* Booking dashboard extras */
.booking-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.booking-header h3 { margin: 0; font-size: 14px; font-weight: 700; font-family: var(--font); color: var(--text); }
.booking-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.booking-source-reserved { background: rgba(58,158,110,0.1); color: var(--success); }
.booking-empty { text-align: center; padding: 20px 0; color: var(--text-2); font-size: 12px; }
.booking-empty-icon { font-size: 24px; margin-bottom: 8px; }
.booking-section-title { color: var(--text-2); }

/* ── COMMAND PALETTE ── */
.cmd-palette-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9999;
  display: flex;
  justify-content: center;
  padding-top: 15vh;
  backdrop-filter: blur(2px);
}
.cmd-palette {
  width: 560px;
  max-height: 420px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cmdPaletteIn 0.15s ease-out;
}
@keyframes cmdPaletteIn {
  from { opacity: 0; transform: scale(0.96) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.cmd-palette-input-wrap {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--paper-deep);
  gap: 10px;
}
.cmd-palette-input-wrap svg {
  width: 18px;
  height: 18px;
  color: var(--ink-light);
  flex-shrink: 0;
}
.cmd-palette-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  font-family: var(--sans);
  color: var(--ink);
  background: transparent;
}
.cmd-palette-input::placeholder { color: var(--ink-faint); }
.cmd-palette-kbd {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-light);
  background: var(--paper);
  border: 1px solid var(--paper-deep);
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
}
.cmd-palette-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.cmd-palette-group-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-light);
  padding: 8px 18px 4px;
}
.cmd-palette-result {
  padding: 10px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.1s;
}
.cmd-palette-result:hover,
.cmd-palette-result.selected {
  background: var(--paper);
}
.cmd-palette-result-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: var(--paper);
}
.cmd-palette-result-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-inverse);
  flex-shrink: 0;
}
.cmd-palette-result-text {
  flex: 1;
  min-width: 0;
}
.cmd-palette-result-title {
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmd-palette-result-sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cmd-palette-result-badge {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-light);
  flex-shrink: 0;
}
.cmd-palette-empty {
  padding: 32px 18px;
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-light);
}
.cmd-palette-preview {
  padding: 12px 18px;
  background: var(--paper);
  border-radius: 8px;
  margin: 6px 12px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-mid);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cmd-palette-preview-icon {
  font-size: 16px;
}
.cmd-palette-preview-text {
  flex: 1;
}
.cmd-palette-preview-hint {
  font-size: 11px;
  color: var(--ink-light);
}
.cmd-palette-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 18px;
  border-top: 1px solid var(--paper-deep);
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-light);
}
.cmd-palette-footer kbd {
  font-family: var(--sans);
  font-size: 10px;
  background: var(--paper);
  border: 1px solid var(--paper-deep);
  border-radius: 3px;
  padding: 1px 5px;
  margin-right: 3px;
}
@media (max-width: 640px) {
  .cmd-palette {
    width: calc(100% - 24px);
    max-height: 70vh;
  }
  .cmd-palette-overlay {
    padding-top: 8vh;
  }
}

/* ── MEAL PLANNER GRID ────────────────────────── */
.meal-planner-grid {
  display: grid;
  grid-template-columns: 74px repeat(7, 1fr);
  gap: 1px;
  background: var(--paper-deep);
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border-thin);
}
.meal-planner-grid .corner { background: var(--paper); padding: 8px; }
.meal-planner-grid .day-header {
  background: var(--paper);
  padding: 8px 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-light);
  font-family: var(--sans);
}
.meal-planner-grid .day-header.today-header { color: var(--brass); background: rgba(154,125,74,0.06); }
.meal-planner-grid .meal-label {
  background: var(--paper);
  padding: 8px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-light);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--sans);
  letter-spacing: 0.3px;
  line-height: 1.4;
}
.meal-planner-grid .meal-cell {
  background: var(--paper);
  padding: 4px;
  min-height: 60px;
  cursor: pointer;
  transition: background 0.15s;
}
.meal-planner-grid .meal-cell:hover { background: var(--paper-warm); }
.meal-planner-grid .meal-cell.today-cell { background: rgba(154,125,74,0.04); }
.meal-entry-card {
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
  line-height: 1.4;
  font-family: var(--sans);
}
.meal-entry-card.home {
  background: rgba(58,158,110,0.08);
  border-left: 3px solid var(--success);
}
.meal-entry-card.social {
  background: rgba(154,125,74,0.1);
  border-left: 3px solid var(--brass);
}
.meal-entry-card .entry-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.meal-entry-card .entry-title { font-weight: 600; font-size: 11px; color: var(--ink); flex: 1; min-width: 0; }
.meal-entry-card .entry-ai-icon { flex-shrink: 0; cursor: pointer; opacity: 0.7; transition: opacity 0.15s; padding: 1px; }
.meal-entry-card .entry-ai-icon:hover { opacity: 1; }
.meal-entry-card .entry-sub { color: var(--ink-light); font-size: 10px; }
.meal-entry-card .entry-friend { font-size: 10px; color: var(--brass-dark); }
.meal-entry-card .entry-dishes { margin-top: 3px; }
.meal-entry-card .entry-dish-preview { display: flex; flex-wrap: wrap; gap: 2px; }
.meal-entry-card .dish-chip { font-size: 9px; background: rgba(154,125,74,0.15); color: var(--brass-dark); padding: 1px 5px; border-radius: 8px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; cursor: pointer; }
.meal-entry-card .dish-chip.selected { background: rgba(27,139,58,0.12); color: var(--success-dark); border: 1px solid rgba(27,139,58,0.25); }
.meal-entry-card .dish-chip-desc { font-size: 9px; color: var(--ink-light); font-style: italic; line-height: 1.2; margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meal-entry-card .entry-dish-preview { display: flex; flex-direction: column; gap: 2px; }
.meal-entry-card .entry-travel { margin-top: 2px; }
.meal-entry-card .travel-chip { font-size: 9px; color: var(--ink-light); display: inline-flex; align-items: center; gap: 3px; }
.meal-entry-card .travel-chip svg { flex-shrink: 0; }
.meal-empty-cell { font-size: 11px; color: var(--ink-faint); padding: 4px; display: flex; align-items: center; justify-content: space-between; }
.meal-link-btn {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: var(--ink-faint); opacity: 0; transition: opacity 0.15s;
  flex-shrink: 0;
}
.meal-cell:hover .meal-link-btn { opacity: 0.5; }
.meal-link-btn:hover { opacity: 1 !important; color: var(--accent); }
.meal-dismiss-btn {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-size: 14px; line-height: 1; color: var(--ink-faint);
  opacity: 0; transition: opacity 0.15s; flex-shrink: 0;
}
.meal-entry-card.social:hover .meal-dismiss-btn { opacity: 0.5; }
.meal-dismiss-btn:hover { opacity: 1 !important; color: var(--error); }
.meal-link-option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.meal-link-option:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }

/* DISH PICKER MODAL */
.dish-picker-list { display: flex; flex-direction: column; gap: 4px; }
.dish-picker-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--paper-deep); border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.dish-picker-item:hover { background: var(--paper-warm); border-color: var(--brass); }
.dish-picker-item.selected { background: rgba(58,158,110,0.06); border-color: var(--success); }
.dish-picker-info { flex: 1; min-width: 0; }
.dish-picker-name { font-weight: 600; font-size: 13px; color: var(--ink); }
.dish-picker-desc { font-size: 11px; color: var(--ink-light); margin-top: 2px; }

/* Social meal detail — chosen dish highlight */
.smd-menu-item.smd-dish-chosen { background: rgba(58,158,110,0.06); border-left: 3px solid var(--success); }

/* INSIGHTS RESTAURANT PICKER */
.insights-place-card:hover { background: var(--paper-deep) !important; }

@media (max-width: 768px) {
  .meal-planner-grid { grid-template-columns: 58px repeat(7, 1fr); overflow-x: auto; min-width: 600px; }
  .meal-planner-grid .meal-cell { min-height: 50px; }
  .meal-entry-card { font-size: 10px; padding: 3px 5px; }
}

/* ── MEAL INVITE CONTACT CHIPS ── */
.invite-contact-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border: var(--border-thin); border-radius: var(--radius-sm); background: var(--paper); min-height: 42px; }
.contact-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--paper-warm); border-radius: var(--radius-pill); padding: 4px 8px 4px 4px; font-size: 12px; }
.contact-chip .chip-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-inverse); font-size: 10px; font-weight: 600; flex-shrink: 0; }
.contact-chip button { background: none; border: none; color: var(--ink-light); cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; }
.contact-chip button:hover { color: var(--error); }
.invite-contact-chips input { border: none; outline: none; background: transparent; flex: 1; min-width: 120px; font-size: 13px; color: var(--ink); font-family: var(--sans); }
.invite-contact-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border: var(--border-thin); border-radius: var(--radius-sm); max-height: 180px; overflow-y: auto; z-index: 20; display: none; box-shadow: var(--shadow-md); }
.invite-contact-dropdown.open { display: block; }
.invite-contact-dropdown .contact-option { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px; font-family: var(--sans); }
.invite-contact-dropdown .contact-option:hover { background: var(--paper-warm); }
.invite-contact-dropdown .contact-option .opt-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-inverse); font-size: 12px; font-weight: 600; flex-shrink: 0; }
.invite-mode-toggle { display: flex; gap: 0; margin-bottom: 16px; }
.invite-mode-toggle button { flex: 1; padding: 8px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border: var(--border-thin); background: transparent; color: var(--ink-mid); cursor: pointer; transition: all 0.2s; font-family: var(--sans); }
.invite-mode-toggle button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.invite-mode-toggle button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: none; }
.invite-mode-toggle button.active { background: var(--brass); color: var(--text-inverse); border-color: var(--brass); }
.meal-invites-list { margin-top: 8px; }
.meal-invite-card { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: var(--border-thin); gap: 12px; }
.meal-invite-card:last-child { border-bottom: none; }
.meal-invite-info { flex: 1; min-width: 0; }
.meal-invite-title { font-size: 14px; font-weight: 500; color: var(--ink); font-family: var(--sans); }
.meal-invite-meta { font-size: 11px; color: var(--ink-light); font-family: var(--sans); margin-top: 2px; }
.meal-invite-status { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: var(--radius-pill); }
.meal-invite-status.pending { background: rgba(184,156,100,0.15); color: var(--brass); }
.meal-invite-status.confirmed { background: rgba(76,175,80,0.12); color: var(--success); }
.meal-invite-status.cancelled { background: rgba(239,83,80,0.12); color: var(--error); }
.meal-scheduling-link-card { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: var(--border-thin); gap: 8px; }
.meal-scheduling-link-card:last-child { border-bottom: none; }
.meal-scheduling-link-url { font-size: 12px; color: var(--brass); font-family: var(--mono, monospace); word-break: break-all; }

/* ── SOCIAL MEAL DETAIL MODAL ────────────────── */
.smd-hero {
  background: linear-gradient(135deg, var(--brass-dark), var(--brass));
  padding: 24px 28px;
  color: var(--text-inverse);
  border-radius: var(--radius) var(--radius) 0 0;
  margin: -1.5rem -1.5rem 1.25rem -1.5rem;
}
.smd-hero .smd-type-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  background: rgba(255,255,255,0.2); display: inline-block;
  padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; font-weight: 600;
  font-family: var(--sans);
}
.smd-hero h3 { font-size: 20px; font-weight: 700; font-family: var(--serif); margin: 0; }
.smd-hero .smd-meta { font-size: 13px; opacity: 0.9; margin-top: 4px; font-family: var(--sans); }
.smd-hero .smd-rating { font-size: 12px; margin-top: 8px; opacity: 0.85; font-family: var(--sans); }
.smd-section { margin-bottom: 18px; }
.smd-section:last-child { margin-bottom: 0; }
.smd-section h5 {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--ink-light); font-weight: 700; margin-bottom: 8px;
  font-family: var(--sans); display: flex; align-items: center; gap: 6px;
}
.smd-source-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.smd-source-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; padding: 2px 8px; border-radius: 4px;
  font-weight: 600; font-family: var(--sans);
}
.smd-source-tag.google { background: rgba(66,133,244,0.12); color: #4285f4; }
.smd-source-tag.web { background: rgba(58,158,110,0.1); color: var(--success); }
.smd-source-tag.ai { background: rgba(124,92,191,0.12); color: #7c5cbf; }
.smd-source-tag.user { background: rgba(184,156,100,0.12); color: var(--brass); }
.smd-source-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; padding: 4px 10px; border-radius: 12px;
  font-weight: 600; font-family: var(--sans); letter-spacing: 0.02em;
}
.smd-source-pill.google { background: rgba(66,133,244,0.12); color: #4285f4; border: 1px solid rgba(66,133,244,0.2); }
.smd-source-pill.web { background: rgba(58,158,110,0.1); color: var(--success); border: 1px solid rgba(58,158,110,0.2); }
.smd-source-pill.ai { background: rgba(124,92,191,0.12); color: #7c5cbf; border: 1px solid rgba(124,92,191,0.2); }
.smd-source-pill.user { background: rgba(184,156,100,0.12); color: var(--brass); border: 1px solid rgba(184,156,100,0.2); }
.smd-menu-item {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06));
  gap: 10px;
}
.smd-menu-item:last-child { border-bottom: none; }
.smd-menu-item .smd-dish-name { font-size: 13px; font-weight: 600; color: var(--ink); font-family: var(--sans); }
.smd-menu-item .smd-dish-note { font-size: 11px; color: var(--ink-light); font-family: var(--sans); margin-top: 2px; }
.smd-menu-item .smd-dish-tag {
  font-size: 10px; padding: 2px 8px; border-radius: 4px;
  font-weight: 600; white-space: nowrap; font-family: var(--sans);
  flex-shrink: 0;
}
.smd-dish-tag.top-pick { background: rgba(184,156,100,0.15); color: var(--brass); }
.smd-dish-tag.must-try { background: rgba(184,156,100,0.15); color: var(--brass); }
.smd-dish-tag.backup { background: rgba(66,133,244,0.1); color: #4a7fd4; }
.smd-dish-tag.new-dish { background: rgba(124,92,191,0.1); color: #7c5cbf; }
.smd-ai-rec {
  background: rgba(124,92,191,0.08);
  border: 1px solid rgba(124,92,191,0.15);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.6;
  font-family: var(--sans);
}
.smd-ai-rec strong { display: block; margin-bottom: 4px; color: #7c5cbf; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.smd-past-visit {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06));
}
.smd-past-visit:last-child { border-bottom: none; }
.smd-past-visit .smd-visit-date { font-size: 12px; font-weight: 600; color: var(--ink); font-family: var(--sans); }
.smd-past-visit .smd-visit-note { font-size: 11px; color: var(--ink-light); font-family: var(--sans); margin-top: 2px; }
.smd-info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.smd-info-item {
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.smd-info-item .smd-info-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-light); font-weight: 600; font-family: var(--sans); }
.smd-info-item .smd-info-value { font-size: 14px; font-weight: 600; color: var(--ink); font-family: var(--sans); margin-top: 2px; }
.smd-dining-with { display: flex; flex-wrap: wrap; gap: 6px; }
.smd-friend-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(66,133,244,0.08); padding: 4px 10px; border-radius: 20px;
  font-size: 12px; font-family: var(--sans); color: var(--ink);
}
.smd-actions { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.smd-actions .btn { flex: 1; min-width: 120px; text-align: center; }
.smd-loading { text-align: center; padding: 40px 0; color: var(--ink-light); font-family: var(--sans); font-size: 13px; }
.smd-fallback-card {
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 12px;
  color: var(--ink-light);
  font-family: var(--sans);
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .smd-hero { padding: 18px 20px; margin: -1rem -1rem 1rem -1rem; }
  .smd-hero h3 { font-size: 17px; }
  .smd-info-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   TRAVEL & VACATION INTELLIGENCE
   ══════════════════════════════════════════════════════════════ */

/* ── Tabs ─────────────────────────────────────────────────── */
.travel-tabs {
  display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px;
  border-bottom: 1px solid var(--border); margin-bottom: 20px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.travel-tabs::-webkit-scrollbar { display: none; }
.travel-tab {
  padding: 8px 14px; font-size: 12px; font-weight: 600; font-family: var(--font);
  color: var(--text-3); background: none; border: none; cursor: pointer;
  white-space: nowrap; border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s; letter-spacing: 0.3px;
  text-transform: uppercase;
}
.travel-tab:hover { color: var(--text); }
.travel-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.travel-tab-content { display: none; }
.travel-tab-content.active { display: block; }

/* ── Shared card ──────────────────────────────────────────── */
.travel-card {
  background: var(--surface); border-radius: var(--radius-md);
  padding: 18px 20px; box-shadow: var(--shadow-sm); margin-bottom: 16px;
  min-width: 0; overflow: hidden;
}
.travel-card-title {
  font-size: 13px; font-weight: 700; font-family: var(--font);
  color: var(--text); margin-bottom: 12px; text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ── Overview tab ─────────────────────────────────────────── */
.travel-overview-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.travel-quick-actions { margin-top: 16px; }
.travel-quick-btns {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.travel-quick-btns .btn { flex: 1; min-width: 140px; text-align: center; font-size: 12px; }
.travel-upcoming { margin-top: 6px; }
.travel-upcoming li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
  font-family: var(--font); color: var(--text);
}
.travel-upcoming li:last-child { border-bottom: none; }
.travel-countdown {
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 12px;
  background: rgba(184,150,90,0.12); color: var(--accent);
  white-space: nowrap;
}

/* ── Recommendations ──────────────────────────────────────── */
.travel-recs { margin-top: 20px; }
.travel-recs-content { margin-top: 10px; }
.travel-recs-card {
  background: var(--surface); border-radius: var(--radius-md);
  padding: 16px; box-shadow: var(--shadow-sm);
}
.travel-recs-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;
}
.travel-rec-card {
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 12px 14px; cursor: pointer; transition: box-shadow 0.15s;
}
.travel-rec-card:hover { box-shadow: var(--shadow-md); }
.travel-rec-title {
  font-size: 14px; font-weight: 600; font-family: var(--font);
  color: var(--text); margin-bottom: 4px;
}
.travel-rec-reason {
  font-size: 11px; color: var(--text-3); font-family: var(--font);
  line-height: 1.4;
}

/* ── PTO tab ──────────────────────────────────────────────── */
.travel-pto-hero {
  display: flex; align-items: center; gap: 24px;
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  border-radius: var(--radius-md); padding: 24px; margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.travel-pto-ring-wrap {
  flex-shrink: 0; width: 100px; height: 100px;
}
.travel-pto-stats { flex: 1; }
.travel-pto-big {
  font-size: 36px; font-weight: 700; font-family: var(--font);
  color: var(--accent); line-height: 1;
}
.travel-pto-unit {
  font-size: 13px; color: var(--text-3); font-family: var(--font);
  margin-left: 4px; font-weight: 400;
}
.travel-pto-meta {
  font-size: 12px; color: var(--text-3); font-family: var(--font);
  margin-top: 6px; line-height: 1.5;
}
.travel-pto-summary {
  background: var(--surface); border-radius: var(--radius-md);
  padding: 16px 20px; box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.travel-pto-bar {
  width: 100%; height: 8px; background: var(--surface-2);
  border-radius: 4px; overflow: hidden; margin-top: 8px;
}
.travel-pto-bar-fill {
  height: 100%; border-radius: 4px; transition: width 0.4s ease;
  background: var(--accent);
}
.travel-pto-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px;
  max-width: 900px;
}

/* ── Shared form grid ─────────────────────────────────────── */
.travel-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 480px;
}
.travel-form-grid label {
  font-size: 12px; font-weight: 600; color: var(--text-2);
  align-self: center;
}
.travel-form-grid .form-input {
  max-width: 100%; width: 100%; box-sizing: border-box;
}
.travel-form-grid select.form-input {
  max-width: 100%; width: 100%; box-sizing: border-box;
}
.travel-form-grid .form-group { margin-bottom: 0; }

/* ── Shared table ─────────────────────────────────────────── */
.travel-table {
  width: 100%; border-collapse: collapse; font-size: 13px; font-family: var(--font);
}
.travel-table th {
  text-align: left; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-3); font-weight: 600;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.travel-table td {
  padding: 10px; border-bottom: 1px solid var(--border); color: var(--text);
  vertical-align: middle;
}
.travel-table tr:last-child td { border-bottom: none; }
.travel-table .btn-icon { width: 28px; height: 28px; }

/* ── Bridge days ──────────────────────────────────────────── */
.travel-bridge-days { margin-top: 16px; }
.travel-bridge-content { margin-top: 8px; }
.travel-bridge-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: var(--surface-2); border-radius: var(--radius-sm);
  margin-bottom: 6px; font-size: 13px; font-family: var(--font);
}

/* ── Search forms (flights, hotels) ───────────────────────── */
.travel-search-form {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 640px;
}
.travel-search-form .form-group { margin-bottom: 0; }
.travel-search-form .form-group.has-dropdown { position: relative; overflow: visible; }
.travel-search-form .btn { align-self: flex-start; }
.travel-search-form > div[style*="grid-template-columns"] {
  width: 100%;
}
.travel-search-form .form-input {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.travel-search-form select.form-input {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* ── Bucket list ──────────────────────────────────────────── */
.travel-bucket-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.travel-bucket-card {
  background: var(--surface); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}
.travel-bucket-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.travel-bucket-img {
  width: 100%; height: 120px; object-fit: cover; display: block;
}
.travel-bucket-img-placeholder {
  width: 100%; height: 120px; display: flex; align-items: center;
  justify-content: center; background: var(--surface-2);
  font-size: 36px; color: var(--text-3);
}
.travel-bucket-card-body { padding: 12px 14px; }
.travel-bucket-card-title {
  font-size: 14px; font-weight: 600; font-family: var(--font);
  color: var(--text); margin-bottom: 2px;
}
.travel-bucket-card-dest {
  font-size: 11px; color: var(--text-3); font-family: var(--font);
  margin-bottom: 6px;
}
.travel-bucket-card-meta {
  display: flex; flex-wrap: wrap; gap: 4px; font-size: 10px;
}
.travel-bucket-preview { margin-bottom: 12px; }
.travel-bucket-mini-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px;
}
.travel-bucket-mini-card {
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 10px 12px; cursor: pointer; transition: background 0.15s;
}
.travel-bucket-mini-card:hover { background: var(--border); }
.travel-bucket-mini-title {
  font-size: 12px; font-weight: 600; font-family: var(--font);
  color: var(--text); margin-bottom: 2px;
}
.travel-bucket-mini-dest {
  font-size: 10px; color: var(--text-3); font-family: var(--font);
}

/* ── Priority dots ────────────────────────────────────────── */
.travel-prio-dots {
  display: inline-flex; gap: 3px;
}
.travel-prio-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); display: inline-block;
}
.travel-prio-dots span.filled { background: var(--accent); }

/* ── Trips grid ───────────────────────────────────────────── */
.travel-trips-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.travel-trip-card {
  background: var(--surface); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}
.travel-trip-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.travel-trip-card-header {
  padding: 14px 16px 0; display: flex; justify-content: space-between;
  align-items: flex-start;
}
.travel-trip-card-body { padding: 10px 16px 14px; }
.travel-trip-card-title {
  font-size: 15px; font-weight: 600; font-family: var(--font);
  color: var(--text); margin-bottom: 2px;
}
.travel-trip-card-dest {
  font-size: 12px; color: var(--text-3); font-family: var(--font);
  margin-bottom: 6px;
}
.travel-trip-card-dates {
  font-size: 11px; color: var(--text-3); font-family: var(--font);
  margin-bottom: 4px;
}
.travel-trip-card-budget {
  font-size: 13px; font-weight: 600; color: var(--accent);
  font-family: var(--font);
}
.travel-trip-card-travelers {
  font-size: 11px; color: var(--text-3); font-family: var(--font);
  margin-top: 4px;
}

/* ── Trip detail ──────────────────────────────────────────── */
.travel-trip-detail-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
}
.travel-trip-detail-header h2 {
  font-size: 22px; font-family: var(--font); font-weight: 700;
  color: var(--text); margin: 0;
}
.travel-trip-meta {
  display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px;
  font-family: var(--font); color: var(--text-3); margin-bottom: 16px;
}
.travel-trip-meta span { display: inline-flex; align-items: center; gap: 4px; }
.travel-detail-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.travel-detail-tab {
  padding: 7px 12px; font-size: 12px; font-weight: 600; font-family: var(--font);
  color: var(--text-3); background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent; text-transform: uppercase;
  letter-spacing: 0.3px; transition: color 0.15s, border-color 0.15s;
}
.travel-detail-tab:hover { color: var(--text); }
.travel-detail-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Trip row (used in overview upcoming) ─────────────────── */
.travel-trip-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.travel-trip-row:last-child { border-bottom: none; }
.travel-trip-row:hover { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 8px; margin: 0 -8px; }
.travel-trip-row-left { flex: 1; min-width: 0; }
.travel-trip-row-right { flex-shrink: 0; }
.travel-trip-row-title {
  font-size: 13px; font-weight: 600; font-family: var(--font); color: var(--text);
}
.travel-trip-row-dest {
  font-size: 11px; color: var(--text-3); font-family: var(--font);
}

/* ── Itinerary ────────────────────────────────────────────── */
.travel-itin-day {
  margin-bottom: 20px;
}
.travel-itin-day h4 {
  font-size: 13px; font-weight: 700; font-family: var(--font);
  color: var(--text); text-transform: uppercase; letter-spacing: 0.3px;
  margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.travel-itin-item {
  display: flex; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.travel-itin-item:last-child { border-bottom: none; }
.travel-itin-time {
  flex-shrink: 0; width: 80px; font-size: 11px; font-weight: 600;
  color: var(--accent); font-family: var(--font); padding-top: 2px;
}
.travel-itin-body { flex: 1; min-width: 0; }
.travel-itin-title {
  font-size: 13px; font-weight: 600; font-family: var(--font);
  color: var(--text); margin-bottom: 2px;
}
.travel-itin-loc {
  font-size: 11px; color: var(--text-3); font-family: var(--font);
  margin-bottom: 2px;
}
.travel-itin-desc {
  font-size: 11px; color: var(--text-3); font-family: var(--font);
  line-height: 1.4; margin-top: 2px;
}
.travel-itin-actions {
  flex-shrink: 0; display: flex; gap: 4px; align-items: flex-start;
}

/* ── Bookings ─────────────────────────────────────────────── */
.travel-bookings-list { display: flex; flex-direction: column; gap: 8px; }
.travel-booking-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.travel-booking-icon {
  font-size: 20px; flex-shrink: 0; width: 32px; text-align: center;
}
.travel-booking-info { flex: 1; min-width: 0; }
.travel-booking-provider {
  font-size: 13px; font-weight: 600; font-family: var(--font);
  color: var(--text);
}
.travel-booking-info small {
  font-size: 11px; color: var(--text-3); font-family: var(--font);
}
.travel-booking-actions {
  flex-shrink: 0; display: flex; gap: 4px; align-items: center;
}

/* ── Checklists ───────────────────────────────────────────── */
.travel-checklist-group { margin-bottom: 16px; }
.travel-checklist-group h4 {
  font-size: 11px; font-weight: 700; font-family: var(--font);
  text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-3);
  margin-bottom: 6px;
}
.travel-checklist-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  font-size: 13px; font-family: var(--font); color: var(--text);
}
.travel-checklist-row input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer;
}
.travel-checklist-row.checked { color: var(--text-3); text-decoration: line-through; }
.travel-checklist-row .btn-icon {
  margin-left: auto; opacity: 0; transition: opacity 0.15s;
}
.travel-checklist-row:hover .btn-icon { opacity: 1; }

/* ── Flight results ───────────────────────────────────────── */
.travel-flight-results { display: flex; flex-direction: column; gap: 10px; }
.travel-flight-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border-radius: var(--radius-md);
  padding: 16px 18px; box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s;
}
.travel-flight-card:hover { box-shadow: var(--shadow-md); }
.travel-flight-main { flex: 1; min-width: 0; }
.travel-flight-airline {
  font-size: 11px; color: var(--text-3); font-family: var(--font);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.travel-flight-route {
  font-size: 14px; font-weight: 600; font-family: var(--font);
  color: var(--text); margin-bottom: 2px;
}
.travel-flight-times {
  font-size: 12px; color: var(--text-3); font-family: var(--font);
}
.travel-flight-duration {
  font-size: 11px; color: var(--text-3); font-family: var(--font);
  margin-top: 2px;
}
.travel-flight-stops {
  font-size: 10px; color: var(--text-3); font-family: var(--font);
}
.travel-flight-price-col {
  flex-shrink: 0; text-align: right; min-width: 100px;
}
.travel-flight-price {
  font-size: 20px; font-weight: 700; font-family: var(--font);
  color: var(--accent); margin-bottom: 6px;
}

/* ── Hotel results ────────────────────────────────────────── */
.travel-hotel-results { display: flex; flex-direction: column; gap: 10px; }
.travel-hotel-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border-radius: var(--radius-md);
  padding: 16px 18px; box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s;
}
.travel-hotel-card:hover { box-shadow: var(--shadow-md); }
.travel-hotel-main { flex: 1; min-width: 0; }
.travel-hotel-name {
  font-size: 14px; font-weight: 600; font-family: var(--font);
  color: var(--text); margin-bottom: 2px;
}
.travel-hotel-addr {
  font-size: 11px; color: var(--text-3); font-family: var(--font);
  margin-bottom: 4px;
}
.travel-hotel-rating {
  font-size: 12px; color: var(--accent); font-family: var(--font);
  margin-bottom: 4px;
}
.travel-hotel-amenities {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.travel-hotel-amenities .pill {
  font-size: 9px; padding: 2px 6px;
}
.travel-hotel-price-col {
  flex-shrink: 0; text-align: right; min-width: 100px;
}
.travel-hotel-price {
  font-size: 20px; font-weight: 700; font-family: var(--font);
  color: var(--accent); margin-bottom: 6px;
}

/* ── Tools tab ────────────────────────────────────────────── */
.travel-tools-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  align-items: start;
}
.travel-tools-grid .travel-search-form {
  max-width: 100%;
}
.travel-currency-result {
  text-align: center; padding: 16px; background: var(--surface-2);
  border-radius: var(--radius-sm); margin-top: 12px;
}
.travel-currency-big {
  font-size: 28px; font-weight: 700; font-family: var(--font);
  color: var(--accent);
}
.travel-visa-result {
  padding: 14px 16px; background: var(--surface-2);
  border-radius: var(--radius-sm); margin-top: 12px;
  font-size: 13px; font-family: var(--font); color: var(--text);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   TRAVEL REDESIGN — Overview, PTO, Bucket List
   ═══════════════════════════════════════════════════════════ */

/* ── Shared card title (new) ──────────────────────────────── */
.tov-card-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 16px;
}

/* ── OVERVIEW TAB ─────────────────────────────────────────── */
.tov-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
.tov-grid > * { min-width: 0; }

/* KPI strip */
.tov-kpi-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 260px)); gap: 12px;
  justify-content: start;
}
.tov-kpi {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  transition: all 0.2s;
}
.tov-kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tov-kpi-icon {
  font-size: 24px; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(184,150,90,0.08);
  display: flex; align-items: center; justify-content: center;
}
.tov-kpi-body { flex: 1; min-width: 0; }
.tov-kpi-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 2px;
}
.tov-kpi-value {
  font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.2;
}
.tov-kpi-sub {
  font-size: 11px; color: var(--text-3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Photo-based recommendation cards */
.tov-rec-photo-card .tov-rec-img {
  height: 130px; border-radius: 10px; overflow: hidden; position: relative;
}
.tov-rec-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.55));
}
.tov-rec-img-text {
  position: absolute; bottom: 12px; left: 14px; right: 14px;
  font-size: 16px; font-weight: 700; color: var(--text-inverse);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Carousel scrollbar hide */
.tov-carousel { scrollbar-width: none; -ms-overflow-style: none; }
.tov-carousel::-webkit-scrollbar { display: none; }

/* Scroll arrow wrapper */
.tov-scroll-wrap { position: relative; min-width: 0; max-width: 100%; }
.tov-scroll-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.tov-scroll-row::-webkit-scrollbar { display: none; }
.tov-scroll-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--accent, #9a7d4a);
  background: var(--navy, #1B3A4B); color: var(--text-inverse); font-size: 20px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18); transition: all 0.2s; opacity: 1;
}
.tov-scroll-arrow:hover { background: var(--accent, #9a7d4a); color: var(--text-inverse); box-shadow: 0 4px 12px rgba(0,0,0,0.25); transform: translateY(-50%) scale(1.08); }
.tov-scroll-arrow.left { left: -14px; }
.tov-scroll-arrow.right { right: -14px; }
.tov-scroll-arrow.hidden { opacity: 0; pointer-events: none; }
@media (max-width: 768px) {
  .tov-scroll-arrow { display: none; }
}

/* Travel section loading bar */
.tov-loading-bar {
  width: 100%; height: 3px; background: var(--rule, #e0e0e0); border-radius: 2px; overflow: hidden;
}
.tov-loading-bar-fill {
  width: 40%; height: 100%; background: linear-gradient(90deg, var(--accent, #9a7d4a), var(--navy, #1B3A4B));
  border-radius: 2px; animation: tov-loading-slide 1.5s ease-in-out infinite;
}
@keyframes tov-loading-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Quick actions grid */
.tov-actions-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.tov-action {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; background: var(--surface-2);
  border-radius: var(--radius-md); border: none; cursor: pointer;
  transition: all 0.15s; font-family: var(--font); text-align: left;
}
.tov-action:hover { background: rgba(184,150,90,0.10); transform: translateY(-1px); }
.tov-action-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--surface); display: flex; align-items: center;
  justify-content: center; font-size: 14px; box-shadow: var(--shadow-sm);
}
.tov-action-text { font-size: 12px; font-weight: 600; color: var(--text); }

/* Recommendations grid */
.tov-recs-grid {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
}
.tov-recs-grid::-webkit-scrollbar { display: none; }
.tov-rec-item {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border-radius: var(--radius-md); border: 1px solid var(--border);
  cursor: pointer; transition: all 0.2s;
  min-width: 300px; max-width: 340px; flex-shrink: 0; scroll-snap-align: start;
}
.tov-rec-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tov-rec-img {
  width: 100%; height: 72px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; font-size: 24px; color: var(--text-inverse);
}
.tov-rec-info { flex: 1; }
.tov-rec-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.tov-rec-reason { font-size: 11px; color: var(--text-2); line-height: 1.4; margin-bottom: 6px; }
.tov-rec-meta { display: flex; gap: 6px; flex-wrap: wrap; }


/* ── PTO TAB ──────────────────────────────────────────────── */
.tpto-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}

/* Dark hero banner */
.tpto-hero {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--navy) 0%, #2a3f54 60%, #3b5068 100%);
  border-radius: var(--radius-lg); padding: 28px 32px; color: var(--text-inverse);
  position: relative; overflow: hidden;
}
.tpto-hero::after {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(184,150,90,0.08); pointer-events: none;
}
.tpto-hero-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px; position: relative; flex-wrap: wrap; gap: 16px;
}
.tpto-hero-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; opacity: 0.6; margin-bottom: 6px;
}
.tpto-hero-big {
  font-size: 44px; font-weight: 800; color: #D4B87A;
  line-height: 1; letter-spacing: -1px;
}
.tpto-hero-unit {
  font-size: 16px; font-weight: 500; opacity: 0.5; margin-left: 4px;
}
.tpto-hero-days {
  font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 4px;
}
.tpto-hero-right {
  display: flex; gap: 28px; position: relative;
}
.tpto-hero-stat { text-align: center; }
.tpto-hero-stat-num {
  font-size: 22px; font-weight: 700; line-height: 1; margin-bottom: 2px;
}
.tpto-hero-stat-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase; opacity: 0.5;
}

/* Hero progress bar */
.tpto-hero-bar {
  width: 100%; height: 6px; background: rgba(255,255,255,0.1);
  border-radius: 999px; overflow: visible; position: relative;
}
.tpto-hero-bar-used {
  height: 100%; background: #D4B87A; border-radius: 999px;
  position: absolute; left: 0; transition: width 0.6s ease;
}
.tpto-hero-bar-planned {
  height: 100%; background: rgba(184,150,90,0.4);
  border-radius: 0 999px 999px 0; position: absolute;
  transition: width 0.6s ease, left 0.6s ease;
}
.tpto-hero-bar-legend {
  display: flex; gap: 16px; margin-top: 10px;
}
.tpto-legend-item {
  display: flex; align-items: center; gap: 6px; font-size: 11px; opacity: 0.6;
}
.tpto-legend-dot {
  width: 8px; height: 8px; border-radius: 50%;
}

/* Bridge days */
.tpto-bridge-list { display: flex; flex-direction: column; gap: 8px; }
.tpto-bridge-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: var(--surface-2);
  border-radius: var(--radius-md); transition: all 0.15s; gap: 8px;
}
.tpto-bridge-item:hover { background: rgba(184,150,90,0.08); }
.tpto-bridge-left { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tpto-bridge-holiday { font-size: 13px; font-weight: 600; color: var(--text); }
.tpto-bridge-dates { font-size: 11px; color: var(--text-3); }
.tpto-bridge-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; padding: 4px 12px;
  border-radius: 999px; background: rgba(184,150,90,0.10);
  color: var(--accent-dark, #8B7340); white-space: nowrap; flex-shrink: 0;
}

/* Usage log */
.tpto-log-list { display: flex; flex-direction: column; }
.tpto-log-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.tpto-log-item:last-child { border-bottom: none; }
.tpto-log-left { display: flex; align-items: center; gap: 12px; }
.tpto-log-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.tpto-log-info { }
.tpto-log-label { font-size: 13px; font-weight: 600; color: var(--text); }
.tpto-log-dates { font-size: 11px; color: var(--text-3); }
.tpto-log-right { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.tpto-log-hours { font-size: 14px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.tpto-log-days-est { font-size: 11px; color: var(--text-3); font-weight: 400; white-space: nowrap; }

/* Settings grid */
.tpto-settings-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  max-width: 520px;
}
.tpto-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden; }
.tpto-field .form-input { width: 100%; box-sizing: border-box; }
.tpto-field-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px; color: var(--text-2);
}
.tpto-field-hint { font-size: 10px; color: var(--text-3); }

/* ── Change Password — Multi-method verification ─────────── */
.cpw-method-card {
  display: flex; flex-direction: row; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--divider); background: var(--surface);
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: var(--ink-mid); transition: all 0.15s ease; white-space: nowrap;
}
.cpw-method-card:hover { border-color: var(--accent); color: var(--ink); background: #fdfcf9; }
.cpw-method-card.cpw-method-active {
  border-color: var(--accent); background: #faf6ee; color: var(--ink);
  box-shadow: 0 0 0 3px rgba(181, 152, 92, 0.1);
}
.cpw-method-card.cpw-method-active svg { stroke: var(--accent); }
.cpw-method-card svg { transition: stroke 0.15s; }
.cpw-strength-bar {
  flex: 1; height: 4px; border-radius: 2px; background: var(--divider);
  transition: background 0.2s;
}
.cpw-req {
  font-size: 11px; font-family: var(--sans); color: var(--ink-light);
  padding: 2px 8px; border-radius: 10px; background: var(--bg-card, #f5f5f3);
  border: 1px solid var(--divider); transition: all 0.2s;
}
.cpw-req.cpw-req-met {
  color: #4a7c59; background: #e8f5e9; border-color: #c8e6c9;
}

/* ── NOTIFICATION GRID ────────────────────────────────────── */
.ng-channels {
  display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap;
}
.ng-channel-card {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  border: 1.5px solid var(--divider); background: var(--surface);
  flex: 1; min-width: 140px; transition: all 0.15s;
}
.ng-channel-card.ng-channel-disabled {
  opacity: 0.55; background: var(--bg);
}
.ng-channel-icon {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: var(--bg); border-radius: 8px; color: var(--ink-mid);
}
.ng-channel-card:not(.ng-channel-disabled) .ng-channel-icon {
  color: var(--accent);
}
.ng-grid {
  border: 1px solid var(--divider); border-radius: 10px; overflow: hidden;
}
.ng-row {
  display: grid; grid-template-columns: 1fr 60px 60px 60px;
  align-items: center; padding: 10px 14px; gap: 4px;
  border-bottom: 1px solid var(--divider);
}
.ng-row:last-child { border-bottom: none; }
.ng-row.ng-header {
  background: var(--bg); padding: 8px 14px;
}
.ng-label {
  min-width: 0;
}
.ng-cell {
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 500px) {
  .ng-row { grid-template-columns: 1fr 44px 44px 44px; padding: 8px 10px; }
  .ng-channels { flex-direction: column; }
}
.ng-verified-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: #4a7c59; background: #e8f5e9;
  border: 1px solid #c8e6c9; border-radius: 6px; padding: 3px 9px;
}
.ng-unverified-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: #e65100; background: #fff8e1;
  border: 1px solid #ffecb3; border-radius: 6px; padding: 3px 9px;
}
.ng-not-setup-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--ink-light); background: var(--bg);
  border: 1px solid var(--divider); border-radius: 6px; padding: 3px 9px;
}

/* ── BUCKET LIST TAB ──────────────────────────────────────── */

/* Map panel */
.tbl-map-panel {
  grid-column: 1 / -1; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); position: relative;
  height: 340px; margin-bottom: 4px;
}
.tbl-map {
  width: 100%; height: 100%; position: relative; overflow: hidden;
}

/* Map pins */
.tbl-map-pin {
  position: absolute; transform: translate(-50%, -100%);
  cursor: pointer; transition: transform 0.2s; z-index: 3;
}
.tbl-map-pin:hover { transform: translate(-50%, -100%) scale(1.25); z-index: 4; }
.tbl-map-pin-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.tbl-map-pin-label {
  position: absolute; bottom: calc(100% + 4px); left: 50%;
  transform: translateX(-50%); background: rgba(26,29,33,0.88);
  color: var(--text-inverse); font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.tbl-map-pin:hover .tbl-map-pin-label { opacity: 1; }

/* Map overlays */
.tbl-map-stats {
  position: absolute; top: 12px; left: 12px;
  display: flex; gap: 6px; z-index: 2; flex-wrap: wrap;
}
.tbl-map-stat-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; background: rgba(255,255,255,0.90);
  backdrop-filter: blur(12px); border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--text);
  box-shadow: var(--shadow-md);
}
.tbl-map-stat-dot { width: 7px; height: 7px; border-radius: 50%; }

.tbl-map-filters {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 3px; padding: 3px;
  background: rgba(255,255,255,0.90); backdrop-filter: blur(12px);
  border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); z-index: 2;
}
.tbl-map-filter {
  padding: 5px 12px; font-family: var(--font); font-size: 11px;
  font-weight: 600; border: none; background: none;
  border-radius: 999px; cursor: pointer; color: var(--text-2);
  transition: all 0.15s; white-space: nowrap;
}
.tbl-map-filter.active { background: var(--accent); color: var(--text-inverse); }
.tbl-map-filter:hover:not(.active) { background: var(--surface-2); }

/* Bucket cards grid */
.tbl-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}
.tbl-card {
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1px solid var(--border); overflow: hidden;
  cursor: pointer; transition: all 0.25s;
}
.tbl-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.08); transform: translateY(-3px); }
.tbl-card-visited { opacity: 0.6; }

.tbl-card-img {
  height: 130px; position: relative; overflow: hidden;
}
.tbl-card-img-bg {
  width: 100%; height: 100%; background-size: cover;
  background-position: center;
}
.tbl-card-img-placeholder {
  width: 100%; height: 100%; display: flex;
  align-items: center; justify-content: center;
  font-size: 32px; background: linear-gradient(135deg, var(--surface-2), rgba(0,0,0,0.04));
}
.tbl-card-status {
  position: absolute; top: 10px; left: 10px;
}
.tbl-card-badges {
  position: absolute; top: 8px; left: 8px;
  display: flex; flex-direction: column; gap: 3px;
  max-width: calc(100% - 70px);
}
.tbl-card-badges .tbl-card-status {
  position: static;
}
.tbl-card-trip-badge {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block;
}
.tbl-card-prio {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
  color: #D4B87A; font-size: 11px; padding: 3px 8px;
  border-radius: 6px; letter-spacing: 1px;
}
.tbl-card-body { padding: 14px 16px 16px; }
.tbl-card-name {
  font-size: 15px; font-weight: 600; color: var(--text);
  margin-bottom: 2px; line-height: 1.3;
}
.tbl-card-dest {
  font-size: 12px; color: var(--text-3); margin-bottom: 8px;
}
.tbl-card-meta {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px;
}
.tbl-card-delete {
  opacity: 0; transition: opacity 0.15s; width: 24px; height: 24px;
  font-size: 12px; color: var(--text-3); flex-shrink: 0;
}
.tbl-card:hover .tbl-card-delete { opacity: 0.5; }
.tbl-card-delete:hover { opacity: 1 !important; color: var(--error, #FF3B30); }

/* ── Bucket List Modal Tabs & AI Insights ──────────────────── */
.tbl-modal-tabs {
  display: flex; gap: 0; border-bottom: 2px solid var(--rule, #e5e5e5);
  margin: -4px -4px 16px -4px; padding: 0 4px;
}
.tbl-modal-tab {
  padding: 10px 20px; border: none; background: transparent; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--text-2, #888);
  border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s;
}
.tbl-modal-tab:hover { color: var(--text, #1a1a1a); }
.tbl-modal-tab.active {
  color: var(--accent, #B8965A); border-bottom-color: var(--accent, #B8965A);
}

.tbl-insights-loading {
  text-align: center; padding: 3rem 1rem;
}
.tbl-insights-spinner {
  width: 36px; height: 36px; border: 3px solid var(--rule, #e5e5e5);
  border-top-color: var(--accent, #B8965A); border-radius: 50%;
  margin: 0 auto; animation: tbl-spin 0.8s linear infinite;
}
@keyframes tbl-spin { to { transform: rotate(360deg); } }

.tbl-ai-badge {
  display: inline-block; padding: 4px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 600; letter-spacing: .3px;
  background: linear-gradient(135deg, #FFF8E7, #FFF0CC); color: var(--accent, #B8965A);
  margin-bottom: 16px;
}

.tbl-insight-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px;
}
.tbl-insight-card {
  border: 1px solid var(--rule, #e5e5e5); border-radius: 10px;
  padding: 16px; background: var(--surface, #fff);
}
.tbl-insight-best { border-left: 3px solid #F5A623; }
.tbl-insight-cheap { border-left: 3px solid #4CAF50; }
.tbl-insight-card-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.tbl-insight-icon { font-size: 20px; }
.tbl-insight-card-header h4 { margin: 0; font-size: 14px; font-weight: 600; }
.tbl-insight-months {
  font-size: 18px; font-weight: 700; color: var(--text, #1a1a1a); margin-bottom: 6px;
}
.tbl-insight-reason {
  font-size: 13px; color: var(--text-2, #888); line-height: 1.5; margin: 0 0 8px;
}
.tbl-insight-detail {
  font-size: 12px; color: var(--text-2, #888); line-height: 1.5; margin-top: 6px;
}
.tbl-insight-detail strong { color: var(--text, #1a1a1a); }

.tbl-insight-pricing {
  background: var(--bg, #FAFAF8); border-radius: 10px; padding: 16px; margin-bottom: 16px;
}
.tbl-pricing-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.tbl-pricing-col {
  background: var(--surface, #fff); border-radius: 8px; padding: 12px;
  border: 1px solid var(--rule, #e5e5e5);
}
.tbl-pricing-highlight { border-color: var(--accent, #B8965A); }
.tbl-pricing-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-2, #888); margin-bottom: 4px;
}
.tbl-pricing-period { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.tbl-pricing-row {
  display: flex; justify-content: space-between; font-size: 13px;
  padding: 4px 0; border-top: 1px solid var(--rule, #e5e5e5);
}
.tbl-pricing-val { font-weight: 600; }

.tbl-insight-tips { margin-bottom: 16px; }
.tbl-tips-list {
  margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7;
  color: var(--text, #1a1a1a);
}
.tbl-tips-list li { margin-bottom: 4px; }

.tbl-insight-refs { margin-bottom: 8px; }
.tbl-refs-list { display: flex; flex-direction: column; gap: 6px; }
.tbl-ref-link {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border: 1px solid var(--rule, #e5e5e5); border-radius: 8px;
  text-decoration: none; color: var(--text, #1a1a1a); font-size: 13px;
  transition: all 0.15s; background: var(--surface, #fff);
}
.tbl-ref-link:hover {
  border-color: var(--accent, #B8965A); background: #FFFDF7;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.tbl-ref-icon { font-size: 14px; flex-shrink: 0; }
.tbl-ref-arrow {
  margin-left: auto; font-size: 14px; color: var(--text-3, #aaa);
  flex-shrink: 0;
}

/* ── Travel Modal 6-Tab Architecture ─────────────────────── */

/* Overview tab */
.tbl-overview-summary {
  font-size: 14px; line-height: 1.7; color: var(--text, #1a1a1a);
  margin-bottom: 16px; padding: 14px; background: var(--bg, #FAFAF8);
  border-radius: 10px; border-left: 3px solid var(--accent, #B8965A);
}
.tbl-overview-meta {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
}
.tbl-meta-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  background: var(--surface, #fff); border: 1px solid var(--rule, #e5e5e5);
  border-radius: 20px; font-size: 12px; color: var(--text, #1a1a1a);
}
.tbl-meta-chip strong { font-weight: 600; }

/* Weather strip */
.tbl-weather-strip {
  display: flex; gap: 2px; margin-bottom: 16px; overflow-x: auto;
  padding-bottom: 4px;
}
.tbl-weather-month {
  flex: 1; min-width: 52px; text-align: center; padding: 8px 4px;
  border-radius: 8px; font-size: 11px; transition: all 0.15s;
}
.tbl-weather-month-label { font-weight: 600; margin-bottom: 4px; }
.tbl-weather-month-temp { font-size: 14px; font-weight: 700; }
.tbl-weather-month-rain { font-size: 10px; color: var(--text-2, #888); margin-top: 2px; }
.tbl-weather-cool { background: #E8F4FD; }
.tbl-weather-nice { background: #E8F5E9; }
.tbl-weather-warm { background: #FFF8E1; }
.tbl-weather-hot { background: #FBE9E7; }

/* Transit comparison */
.tbl-transit-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.tbl-transit-card {
  border: 1px solid var(--rule, #e5e5e5); border-radius: 10px; padding: 14px;
  background: var(--surface, #fff); position: relative; transition: all 0.15s;
}
.tbl-transit-card.recommended {
  border-color: var(--accent, #B8965A);
  box-shadow: 0 0 0 1px var(--accent, #B8965A);
}
.tbl-transit-rec-badge {
  position: absolute; top: -8px; right: 12px; background: var(--accent, #B8965A);
  color: var(--text-inverse); font-size: 10px; font-weight: 600; padding: 2px 8px;
  border-radius: 10px; text-transform: uppercase; letter-spacing: .3px;
}
.tbl-transit-mode-icon { font-size: 24px; margin-bottom: 6px; }
.tbl-transit-mode-name { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.tbl-transit-detail {
  font-size: 12px; color: var(--text-2, #888); line-height: 1.6;
  margin-bottom: 4px;
}
.tbl-transit-detail strong { color: var(--text, #1a1a1a); }
.tbl-transit-cost {
  font-size: 16px; font-weight: 700; color: var(--accent, #B8965A);
  margin: 8px 0;
}
.tbl-transit-pros-cons { font-size: 11px; line-height: 1.5; margin-top: 8px; }
.tbl-transit-pros-cons span { display: block; }
.tbl-transit-pros { color: #4CAF50; }
.tbl-transit-cons { color: #F44336; }
.tbl-transit-tip {
  font-size: 11px; color: var(--text-2, #888); margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--rule, #e5e5e5);
  font-style: italic;
}

/* Cost comparison tab */
.tbl-cost-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.tbl-cost-origin {
  font-size: 11px; color: var(--text-3); padding: 6px 10px;
  background: var(--bg, #FAFAF8); border-radius: var(--radius-sm, 6px);
  margin-bottom: 12px;
}
.tbl-cost-comparison {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;
}
.tbl-cost-col {
  background: var(--surface, #fff); border-radius: 10px; padding: 16px;
  border: 1px solid var(--rule, #e5e5e5);
}
.tbl-cost-col-best { border-top: 3px solid #F5A623; }
.tbl-cost-col-cheap { border-top: 3px solid #4CAF50; }
.tbl-cost-col-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-2, #888); margin-bottom: 2px;
}
.tbl-cost-col-months { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.tbl-cost-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--rule, #e5e5e5);
}
.tbl-cost-row:last-child { border-bottom: none; }
.tbl-cost-row-label { color: var(--text-2, #888); }
.tbl-cost-row-val { font-weight: 600; }
.tbl-cost-total {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; font-weight: 700; padding: 10px 0; margin-top: 8px;
  border-top: 2px solid var(--rule, #e5e5e5);
}
.tbl-cost-savings {
  text-align: center; padding: 12px; background: #E8F5E9; border-radius: 10px;
  margin-bottom: 16px;
}
.tbl-cost-savings-amount {
  font-size: 22px; font-weight: 700; color: #4CAF50;
}
.tbl-cost-savings-label {
  font-size: 12px; color: #388E3C; margin-top: 2px;
}

/* Monthly flight price chart */
.tbl-flight-chart {
  margin-bottom: 16px; padding: 14px; background: var(--bg, #FAFAF8);
  border-radius: 10px;
}
.tbl-flight-chart-title {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-2, #888); margin-bottom: 12px;
}
.tbl-flight-bars {
  display: flex; align-items: flex-end; gap: 4px; padding-top: 18px; padding-bottom: 18px;
}
.tbl-flight-bar-wrap {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 140px; justify-content: flex-end;
}
.tbl-flight-bar {
  width: 100%; border-radius: 4px 4px 0 0; min-height: 6px;
  transition: all 0.3s; cursor: default; flex-shrink: 0;
}
.tbl-flight-bar-label {
  font-size: 9px; color: var(--text-3, #aaa); font-weight: 600; flex-shrink: 0;
}
.tbl-flight-bar-price {
  font-size: 9px; color: var(--text-2, #888); font-weight: 600; flex-shrink: 0;
}

/* Travel Windows tab */
.tbl-windows-loading {
  text-align: center; padding: 2rem; color: var(--text-2, #888);
}
.tbl-window-card {
  border: 1px solid var(--rule, #e5e5e5); border-radius: 10px;
  padding: 16px; margin-bottom: 12px; background: var(--surface, #fff);
  transition: all 0.15s;
}
.tbl-window-card:first-child {
  border-color: var(--accent, #B8965A);
  box-shadow: 0 0 0 1px var(--accent, #B8965A);
}
.tbl-window-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 10px;
}
.tbl-window-rank {
  font-size: 11px; font-weight: 700; color: var(--text-inverse); background: var(--accent, #B8965A);
  padding: 2px 8px; border-radius: 10px;
}
.tbl-window-score {
  font-size: 12px; font-weight: 600; color: var(--text-2, #888);
}

/* Score breakdown tooltip */
.score-tooltip-wrap {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
}
.score-info-icon {
  cursor: pointer; font-size: 13px; line-height: 1; opacity: 0.7; transition: opacity 0.15s;
}
.score-info-icon:hover, .score-info-icon:focus { opacity: 1; }
.score-tooltip {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000;
  background: var(--surface, #fff); border: 1px solid var(--rule, #e0e0e0);
  border-radius: 10px; padding: 14px 16px; width: 260px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); font-size: 12px;
}
.score-tooltip::before {
  content: ''; position: absolute; top: -6px; right: 16px;
  width: 10px; height: 10px; background: var(--surface, #fff);
  border-left: 1px solid var(--rule, #e0e0e0); border-top: 1px solid var(--rule, #e0e0e0);
  transform: rotate(45deg);
}
.score-tooltip-wrap:hover .score-tooltip,
.score-tooltip-wrap:focus-within .score-tooltip { display: block; }
.score-tooltip-title {
  font-weight: 700; font-size: 13px; margin-bottom: 10px; color: var(--text, #1a1a1a);
}
.score-tooltip-row {
  display: grid; grid-template-columns: 90px 1fr 28px; align-items: center; gap: 6px; margin-bottom: 6px;
  color: var(--text, #1a1a1a);
}
.score-bar-track {
  height: 6px; background: var(--rule, #e5e5e5); border-radius: 3px; overflow: hidden;
}
.score-bar-fill {
  height: 100%; border-radius: 3px; transition: width 0.3s ease;
}
.score-val {
  text-align: right; font-weight: 600; font-size: 11px; color: var(--text-2, #888);
}
.score-tooltip-weights {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule, #e5e5e5);
  font-size: 10px; color: var(--text-3, #aaa); line-height: 1.4;
}

/* Getaway cost breakdown tooltip */
.getaway-cost-wrap {
  position: relative; display: inline-flex; align-items: center;
}
.getaway-cost-tooltip {
  display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 1000; background: var(--surface, #fff); border: 1px solid var(--rule, #e0e0e0);
  border-radius: 10px; padding: 14px 16px; width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); font-size: 12px;
}
.getaway-cost-tooltip::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px; background: var(--surface, #fff);
  border-left: 1px solid var(--rule, #e0e0e0); border-top: 1px solid var(--rule, #e0e0e0);
}
.getaway-cost-wrap:hover .getaway-cost-tooltip,
.getaway-cost-wrap:focus-within .getaway-cost-tooltip { display: block; }
.getaway-cost-title {
  font-weight: 700; font-size: 13px; margin-bottom: 2px; color: var(--text, #1a1a1a);
}
.getaway-cost-subtitle {
  font-size: 11px; color: var(--text-3, #aaa); margin-bottom: 10px;
}
.getaway-cost-row {
  display: flex; justify-content: space-between; align-items: center; padding: 5px 0;
  border-bottom: 1px solid var(--rule, #f0f0f0); color: var(--text, #1a1a1a); font-size: 12px;
}
.getaway-cost-val {
  font-weight: 600; color: var(--text, #1a1a1a);
}
.getaway-cost-total {
  display: flex; justify-content: space-between; align-items: center; padding: 8px 0 4px;
  font-weight: 700; font-size: 13px; color: var(--accent-dark, #8B7340);
}
.getaway-cost-note {
  font-size: 10px; color: var(--text-3, #aaa); margin-top: 6px; text-align: center; font-style: italic;
}

/* Window loading skeleton cards */
.tbl-window-skeleton-cards {
  display: flex; flex-direction: column; gap: 10px; margin-top: 16px;
}
.tbl-window-skel-card {
  height: 80px; border-radius: 10px; background: var(--rule, #e5e5e5);
}

/* Window category label */
.tbl-window-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  border-radius: 6px; padding: 3px 10px; border: 1px solid;
  display: inline-flex; align-items: center; gap: 4px;
}

/* Trip vibe + efficiency badges */
.tbl-window-vibe-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap;
}
.tbl-window-vibe-tag {
  font-size: 13px; font-weight: 700; color: var(--text, #1a1a1a);
  background: var(--accent-bg, rgba(184,150,90,0.12)); border-radius: 6px;
  padding: 3px 10px; display: inline-flex; align-items: center; gap: 4px;
}
.tbl-window-eff-badge {
  font-size: 11px; font-weight: 600; border-radius: 6px;
  padding: 2px 8px; border: 1px solid; display: inline-flex; align-items: center;
}

/* Destination context banner */
.tbl-window-dest-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 12px;
  background: var(--surface-2, #F3F2EE); border-radius: 8px;
}
.tbl-dest-chip {
  font-size: 12px; font-weight: 600; color: var(--text, #1a1a1a);
  background: var(--surface, #fff); border-radius: 6px;
  padding: 3px 10px; border: 1px solid var(--rule, #e0e0e0);
  display: inline-flex; align-items: center; gap: 4px;
}

.tbl-window-dates {
  font-size: 16px; font-weight: 700; color: var(--text, #1a1a1a);
  margin-bottom: 6px;
}
.tbl-window-details {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.tbl-window-detail-chip {
  font-size: 11px; padding: 3px 8px; border-radius: 12px;
  background: var(--bg, #FAFAF8); color: var(--text-2, #888);
}
.tbl-window-pto {
  padding: 10px; background: #FFF8E1; border-radius: 8px;
  font-size: 12px; margin-bottom: 8px;
}
.tbl-window-pto-title { font-weight: 600; margin-bottom: 4px; }
.tbl-window-pto-days { color: var(--text-2, #888); }
.tbl-window-factors {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.tbl-window-factor {
  font-size: 10px; padding: 2px 6px; border-radius: 8px;
  background: var(--bg, #FAFAF8);
}
.tbl-window-factor-good { background: #E8F5E9; color: #388E3C; }
.tbl-window-factor-ok { background: #FFF8E1; color: #F57C00; }
.tbl-window-factor-bad { background: #FBE9E7; color: #D32F2F; }

/* Local Intel tab */
.tbl-intel-section {
  margin-bottom: 20px;
}
.tbl-intel-section-title {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-2, #888); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.tbl-intel-must-see {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px;
}
.tbl-intel-item {
  padding: 8px 12px; background: var(--bg, #FAFAF8); border-radius: 8px;
  font-size: 13px; display: flex; align-items: center; gap: 6px;
}
.tbl-intel-food {
  font-size: 13px; line-height: 1.7; color: var(--text, #1a1a1a);
  padding: 12px; background: var(--bg, #FAFAF8); border-radius: 10px;
}
.tbl-intel-neighborhoods {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.tbl-intel-hood {
  padding: 10px 12px; border: 1px solid var(--rule, #e5e5e5);
  border-radius: 8px; background: var(--surface, #fff);
}
.tbl-intel-hood-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.tbl-intel-hood-vibe { font-size: 12px; color: var(--text-2, #888); line-height: 1.5; }
.tbl-intel-gems {
  display: flex; flex-direction: column; gap: 6px;
}
.tbl-intel-gem {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: #FFFDF7; border: 1px solid #FFF0CC; border-radius: 8px;
  font-size: 13px;
}
.tbl-intel-events {
  display: flex; flex-direction: column; gap: 6px;
}
.tbl-intel-event {
  display: flex; gap: 10px; padding: 8px 12px; background: var(--bg, #FAFAF8);
  border-radius: 8px; font-size: 12px;
}
.tbl-intel-event-month {
  font-weight: 700; color: var(--accent, #B8965A); min-width: 36px;
}
.tbl-intel-safety {
  padding: 12px; background: #FFF3E0; border-radius: 10px;
  font-size: 13px; line-height: 1.6; border-left: 3px solid #FF9800;
}

/* Logistics tab */
.tbl-logistics-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;
}
.tbl-logistics-card {
  border: 1px solid var(--rule, #e5e5e5); border-radius: 10px; padding: 14px;
  background: var(--surface, #fff);
}
.tbl-logistics-card-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-2, #888); margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.tbl-logistics-card-body {
  font-size: 13px; line-height: 1.6; color: var(--text, #1a1a1a);
}
.tbl-phrases-list {
  display: flex; flex-direction: column; gap: 6px;
}
.tbl-phrase-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; background: var(--bg, #FAFAF8); border-radius: 6px;
  font-size: 12px;
}
.tbl-phrase-local { font-weight: 600; font-style: italic; }
.tbl-phrase-meaning { color: var(--text-2, #888); }

/* ── Travel mobile responsive (updated) ──────────────────── */
@media (max-width: 768px) {
  .tov-grid { grid-template-columns: 1fr; }
  .tov-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .tov-kpi { padding: 12px 14px; }
  .tov-kpi-icon { width: 36px; height: 36px; font-size: 20px; }
  .tov-kpi-value { font-size: 16px; }
  .tov-recs-grid { flex-direction: row; }
  .tov-rec-item { min-width: 260px; }
  .tov-actions-grid { grid-template-columns: 1fr 1fr; }
  .tpto-layout { grid-template-columns: 1fr; }
  .tpto-hero-top { flex-direction: column; gap: 16px; }
  .tpto-hero-right { gap: 20px; }
  .tpto-settings-grid { grid-template-columns: 1fr; }
  .tbl-map-panel { height: 260px; }
  .tbl-card-grid { grid-template-columns: 1fr; }
  .tbl-map-stats { flex-wrap: wrap; }
  .tbl-map-filters { flex-wrap: wrap; bottom: 8px; }
  .tbl-insight-grid { grid-template-columns: 1fr; }
  .tbl-pricing-grid { grid-template-columns: 1fr; }
  .tbl-modal-tab { padding: 6px 10px; font-size: 11px; }
  .tbl-cost-comparison { grid-template-columns: 1fr; }
  .tbl-transit-grid { grid-template-columns: 1fr; }
  .tbl-logistics-grid { grid-template-columns: 1fr; }
  .tbl-intel-must-see { grid-template-columns: 1fr; }
  .tbl-intel-neighborhoods { grid-template-columns: 1fr; }
  .tbl-weather-strip { gap: 1px; }
  .tbl-weather-month { min-width: 40px; padding: 6px 2px; font-size: 10px; }
  .modal.modal-travel { max-width: 100%; }
  .travel-overview-grid { grid-template-columns: 1fr; }
  .travel-pto-hero { flex-direction: column; text-align: center; gap: 12px; padding: 18px; }
  .travel-pto-layout { grid-template-columns: 1fr; }
  .travel-form-grid { grid-template-columns: 1fr; }
  .travel-search-form > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .travel-bucket-grid { grid-template-columns: 1fr; }
  .travel-bucket-mini-grid { grid-template-columns: 1fr; }
  .travel-trips-grid { grid-template-columns: 1fr; }
  .travel-recs-list { grid-template-columns: 1fr; }
  .travel-tools-grid { grid-template-columns: 1fr; }
  .travel-flight-card { flex-direction: column; align-items: stretch; gap: 10px; }
  .travel-flight-price-col { text-align: left; min-width: 0; display: flex; align-items: center; gap: 12px; }
  .travel-flight-price { font-size: 18px; margin-bottom: 0; }
  .travel-hotel-card { flex-direction: column; align-items: stretch; gap: 10px; }
  .travel-hotel-price-col { text-align: left; min-width: 0; display: flex; align-items: center; gap: 12px; }
  .travel-hotel-price { font-size: 18px; margin-bottom: 0; }
  .travel-trip-detail-header h2 { font-size: 18px; }
  .travel-itin-time { width: 60px; font-size: 10px; }
  #recurring-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── SHARED FINANCE TOP BAR MOUNT ─────────────────────
   #plaid-accounts-bar is the mount point for the unified Finance top bar
   (renderPlaidAccountsBar -> .fa-sticky.fw-topbar). The inner sticky card
   carries all the visual chrome now; the wrapper stays transparent so we
   don't double-stack borders/shadows. The old plaid-bar-* / plaid-account-*
   rules below are retained only for any legacy callsites — the unified
   renderer does not emit them. */
.plaid-accounts-bar {
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
}
.plaid-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.plaid-net-worth {
  display: flex;
  flex-direction: column;
}
.plaid-nw-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}
.plaid-nw-value {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}
.plaid-nw-group {
  display: flex;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.plaid-avail .plaid-nw-value {
  font-size: 1.15rem;
  color: var(--text-2);
}
.plaid-bar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.plaid-sync-label {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  margin-right: 0.25rem;
}
.plaid-accounts-scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
}
.plaid-account-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 220px;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  flex-shrink: 0;
}
.plaid-account-icon {
  font-size: 1.25rem;
}
.plaid-account-info {
  flex: 1;
  min-width: 0;
}
.plaid-account-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plaid-account-inst {
  font-size: 11px;
  color: var(--text-3);
}
.plaid-account-balance {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.pill-plaid {
  background: rgba(0, 114, 239, 0.1);
  color: #0072ef;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}
.pill-pending {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}
.tx-merchant-logo {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: contain;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.plaid-empty-connect {
  text-align: center;
  padding: 2rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.plaid-empty-connect h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.plaid-empty-connect p {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .plaid-bar-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .plaid-nw-group { gap: 1.5rem; }
  .plaid-bar-actions { width: 100%; }
  .plaid-bar-actions .btn-sm { flex: 1; text-align: center; }
  .plaid-account-card { min-width: 180px; }
  .plaid-nw-value { font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════
   FINANCE — ACCOUNTS TAB
   ═══════════════════════════════════════════════════════════ */

.account-cards-scroll { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; margin-bottom:20px; }
.account-cards-scroll::-webkit-scrollbar { height:4px; }
.account-cards-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.account-card {
  min-width:210px; padding:14px 16px; background:var(--surface, #fff);
  border:2px solid var(--border); border-radius:var(--radius, 8px);
  cursor:pointer; transition:border-color 0.15s, box-shadow 0.15s; flex-shrink:0; user-select:none;
}
.account-card:hover { border-color:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.account-card.selected { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, white); }

.account-card-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; position:relative; }
.account-card-actions { display:flex; gap:2px; margin-left:auto; opacity:0; transition:opacity 0.15s; }
.account-card:hover .account-card-actions { opacity:1; }
.btn-icon-xs { background:none; border:1px solid var(--rule); border-radius:4px; padding:3px; cursor:pointer; color:var(--text-muted); display:flex; align-items:center; justify-content:center; }
.btn-icon-xs:hover { background:var(--surface); color:var(--text); border-color:var(--text-muted); }
.btn-icon-xs.danger:hover { background:#FEE2E2; color:#DC2626; border-color:#DC2626; }
.account-card-logo {
  width:32px; height:32px; border-radius:6px; background:var(--accent-light, #EBF4FF);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--accent); flex-shrink:0;
}
.account-card-name { font-size:13px; font-weight:600; line-height:1.2; }
.account-card-subtype { font-size:11px; color:var(--text-muted, #6B6B6B); }
.account-card-balance { font-size:18px; font-weight:700; margin-bottom:4px; }
.account-card-meta { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--text-muted); }

.account-card.add-account {
  border:2px dashed var(--border); background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:110px; gap:6px;
}
.account-card.add-account:hover { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 4%, white); }
.add-account-icon { font-size:22px; color:var(--text-muted); }
.add-account-label { font-size:12px; color:var(--text-muted); font-weight:500; }

/* Utilization bar */
.util-bar { width:60px; height:4px; background:var(--border); border-radius:2px; overflow:hidden; display:inline-block; vertical-align:middle; margin-right:6px; }
.util-bar-fill { height:100%; border-radius:2px; background:var(--accent); }
.util-bar-fill.high { background:var(--warning, #D69E2E); }
.util-bar-fill.critical { background:var(--danger, #C53030); }

/* Account summary bar */
.account-summary-bar {
  display:flex; gap:16px; padding:14px 16px; background:var(--surface, #fff);
  border:1px solid var(--border); border-radius:var(--radius, 8px); margin-bottom:16px; flex-wrap:wrap;
}
.acct-summary-stat { flex:1; min-width:100px; }
.acct-summary-stat .label { font-size:11px; text-transform:uppercase; letter-spacing:0.4px; color:var(--text-muted); margin-bottom:2px; }
.acct-summary-stat .value { font-size:15px; font-weight:600; }
.acct-summary-stat .value.positive { color:var(--success, #276749); }
.acct-summary-stat .value.negative { color:var(--danger, #C53030); }

/* Transaction detail panel */
.tx-detail-panel {
  padding:16px 16px 16px 48px; background:color-mix(in srgb, var(--bg) 60%, white);
  border-top:1px solid var(--border);
}
.tx-detail-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
@media (max-width:768px) { .tx-detail-grid { grid-template-columns:1fr; } }
.tx-detail-section h4 {
  font-size:11px; text-transform:uppercase; letter-spacing:0.4px;
  color:var(--text-muted); margin-bottom:8px; padding-bottom:4px;
  border-bottom:1px solid var(--border);
}
.tx-detail-row { display:flex; justify-content:space-between; padding:3px 0; font-size:12px; }
.tx-detail-row .dl { color:var(--text-muted); }
.tx-detail-row .dv { font-weight:500; text-align:right; max-width:60%; word-break:break-all; }

.confidence-badge { display:inline-block; padding:2px 6px; border-radius:4px; font-size:10px; font-weight:600; }
.confidence-badge.very-high { background:#F0FFF4; color:#276749; }
.confidence-badge.high { background:#F0FFF4; color:#38A169; }
.confidence-badge.medium { background:#FFFFF0; color:#B7791F; }
.confidence-badge.low { background:#FFF5F5; color:#C53030; }

.tx-source-badge {
  display:inline-block; padding:2px 6px; border-radius:4px;
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px;
}
.tx-source-badge.plaid { background:#EBF4FF; color:var(--accent); }
.tx-source-badge.manual { background:#F0FFF4; color:var(--success, #276749); }

/* Expanded transaction row */
.tx-row-expandable { cursor:pointer; transition:background 0.1s; }
.tx-row-expandable:hover { background:color-mix(in srgb, var(--bg) 50%, white); }
.tx-row-expandable.expanded { background:color-mix(in srgb, var(--accent) 5%, white); }

/* Banking settings */
.bank-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:var(--surface, #fff); border:1px solid var(--border);
  border-radius:var(--radius, 8px); margin-bottom:8px;
}
.bank-item-left { display:flex; align-items:center; gap:12px; }
.bank-logo {
  width:36px; height:36px; border-radius:8px;
  background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, black));
  display:flex; align-items:center; justify-content:center;
  color:var(--text-inverse); font-weight:700; font-size:13px;
}
.bank-name { font-weight:600; font-size:14px; }
.bank-meta { font-size:12px; color:var(--text-muted); }
.bank-item-right { display:flex; align-items:center; gap:10px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--success, #276749); }
.status-dot.error { background:var(--danger, #C53030); }

/* iOS auto-zoom prevention (gotcha #9) */
@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: 16px !important; }
}

/* Rollback animation for failed toggles */
@keyframes shake-rollback {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
.toggle-rollback { animation: shake-rollback 0.4s ease; }

/* ── Skeleton loading animation ── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.15; }
}

/* ============================================================
   BUDGET FORECAST — Redesign
   ============================================================ */

/* ── 1. Forecast Sub-Tab Navigation ── */
/* ── Unified Finance Sub-Tabs ── */
.fin-subtabs {
  display: flex;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3px;
  overflow-x: auto;
  margin-bottom: 16px;
}
.fin-subtab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font: 600 12px/1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.fin-subtab:hover:not(.active) { background: rgba(0,0,0,0.04); color: var(--text); }
.fin-subtab.active { background: var(--navy); color: var(--text-on-navy); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.fin-subtab .subtab-icon { font-size: 14px; line-height: 1; }
.fin-subtab .subtab-badge {
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--accent-bg);
  color: var(--accent);
  text-align: center;
}
.fin-subtab.active .subtab-badge { background: rgba(255,255,255,0.2); color: var(--text-on-navy); }
.fin-subtab:not(.active) .subtab-badge { background: var(--accent-bg); color: var(--accent); }

/* Recurring layout — sidebar for suggestions */
.recurring-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.25rem; align-items: start; }
.recurring-sidebar .section-card { position: sticky; top: 1rem; }
@media (max-width: 900px) {
  .recurring-layout { grid-template-columns: 1fr; }
  .recurring-sidebar { order: -1; }
}

/* Legacy aliases */
.forecast-subtabs { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; overflow-x: auto; }
.forecast-subtab { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font: 600 12px/1 var(--font); text-transform: uppercase; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.forecast-subtab:hover:not(.active) { background: rgba(0,0,0,0.04); color: var(--text); }
.forecast-subtab.active { background: var(--navy); color: var(--text-on-navy); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.forecast-subtab .subtab-icon { font-size: 14px; line-height: 1; }
.forecast-subtab .subtab-badge { font-size: 10px; font-weight: 700; min-width: 18px; padding: 1px 5px; border-radius: 9px; background: var(--accent-bg); color: var(--accent); text-align: center; }
.forecast-subtab.active .subtab-badge { background: rgba(255,255,255,0.2); color: var(--text-on-navy); }
.forecast-subtab:not(.active) .subtab-badge { background: var(--accent-bg); color: var(--accent); }

/* ── 2. Two-Row Toolbar ── */
.fc-toolbar { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.fc-toolbar-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}
.fc-toolbar-row2 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.fc-view-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.fc-view-btn {
  padding: 5px 12px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-2);
  font: 500 11px/1 var(--font);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.fc-view-btn:hover:not(.active) { background: rgba(0,0,0,0.03); color: var(--text); }
.fc-view-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(30,45,61,0.06); }
.fc-chart-range-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-2);
  font: 500 11px/1 var(--font);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.fc-chart-range-btn:hover { border-color: var(--accent); color: var(--text); }
.fc-chart-range-btn.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

/* ── 3. KPI Strip + Runway ── */
.fc-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.fc-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: box-shadow 0.2s;
}
.fc-kpi-card:hover { box-shadow: var(--shadow-sm); }
.fc-kpi-label {
  font: 500 10px/1.2 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-3);
  margin-bottom: 6px;
}
.fc-kpi-value { font: 700 22px/1.1 var(--font); color: var(--text); letter-spacing: -0.5px; }
.fc-kpi-sub { font: 400 11px/1.3 var(--font); color: var(--text-2); margin-top: 4px; }
.fc-kpi-trend { font-weight: 600; display: inline-block; margin-left: 6px; }
.fc-kpi-trend.up { color: var(--success); }
.fc-kpi-trend.down { color: var(--error); }

.fc-runway-bar {
  margin-bottom: 20px;
  padding: 16px 20px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.fc-runway-track {
  width: 100%;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.fc-runway-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--success), var(--accent));
  transition: width 0.4s ease;
}
.fc-runway-markers {
  display: flex;
  justify-content: space-between;
  padding-top: 4px;
  font: 400 10px/1 var(--font);
  color: var(--text-3);
}

/* ── 4. SVG Chart Area ── */
.fc-chart-wrap {
  position: relative;
  min-height: 300px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}
.fc-chart-svg { width: 100%; height: 100%; display: block; }
.fc-chart-tooltip {
  position: absolute;
  z-index: 100;
  background: var(--navy);
  color: var(--text-inverse);
  font: 400 12px/1.4 var(--font);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
}
.fc-chart-tooltip.visible { opacity: 1; }
.fc-chart-today-marker { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.fc-chart-threshold { stroke: var(--error); stroke-width: 1; stroke-dasharray: 6 4; opacity: 0.7; }

/* ── 5. Alert Cards ── */
.fc-alert {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: box-shadow 0.15s;
}
.fc-alert:hover { box-shadow: var(--shadow-sm); }
.fc-alert.danger { background: var(--error-bg); border-color: rgba(255,59,48,0.2); }
.fc-alert.warning { background: var(--warning-bg); border-color: rgba(255,149,0,0.2); }
.fc-alert.info { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.2); }
.fc-alert-icon { font-size: 18px; flex-shrink: 0; line-height: 1.3; }
.fc-alert-title { font: 600 13px/1.3 var(--font); color: var(--text); margin-bottom: 2px; }
.fc-alert-text { font: 400 12px/1.4 var(--font); color: var(--text-2); }

/* ── 6. Ledger View (card-based) ── */

/* Container */
.fcl-container { display: flex; flex-direction: column; gap: 12px; }

/* Period block */
.fcl-period {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

/* Period header — clickable */
.fcl-period-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.fcl-period.collapsed .fcl-period-head { border-bottom: none; }
.fcl-period-head:hover { background: rgba(0,0,0,0.03); }

.fcl-period-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fcl-chevron {
  font-size: 14px;
  color: var(--text-3);
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  transition: transform 0.2s;
}

.fcl-period-title {
  font: 600 14px/1.2 var(--font);
  color: var(--text);
  white-space: nowrap;
}

.fcl-period-days {
  font: 400 12px/1 var(--font);
  color: var(--text-3);
  white-space: nowrap;
}

/* Period stats strip */
.fcl-period-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.fcl-stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.fcl-stat-label {
  font: 500 11px/1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-3);
}

.fcl-stat-val {
  font: 600 13px/1 var(--font);
  font-variant-numeric: tabular-nums;
}
.fcl-stat-val.positive { color: var(--success); }
.fcl-stat-val.negative { color: var(--error); }

.fcl-stat-net { margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--border); }
.fcl-stat-end { margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--border); }

/* Period body */
.fcl-period-body { padding: 0; }

/* Quiet day placeholder */
.fcl-quiet {
  text-align: center;
  padding: 6px 16px;
  font: italic 400 12px/1.4 var(--font);
  color: var(--text-3);
  border-bottom: 1px dashed var(--border);
}

/* Day row — vertical card layout */
.fcl-day {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.fcl-day:last-child { border-bottom: none; }
.fcl-day:hover { background: var(--surface-2); }
.fcl-day:hover .fcl-whatif-btn { opacity: 1; }

/* Day states */
.fcl-today { background: var(--accent-bg); }
.fcl-today:hover { background: rgba(184, 150, 90, 0.1); }
.fcl-past { opacity: 0.55; }
.fcl-weekend { background: rgba(0,0,0,0.012); }
.fcl-danger { background: var(--error-bg); }
.fcl-danger:hover { background: rgba(255,59,48,0.08); }

/* Day header (date left, summary right) */
.fcl-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.fcl-day-date {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.fcl-day-num {
  font: 700 18px/1 var(--font);
  color: var(--text);
}

.fcl-day-name {
  font: 500 12px/1 var(--font);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.fcl-today-badge {
  font: 600 9px/1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 7px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--text-inverse);
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin-left: 4px;
}

/* Summary row */
.fcl-day-summary {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fcl-day-change {
  font: 500 12px/1 var(--font);
  font-variant-numeric: tabular-nums;
}

.fcl-day-balance {
  font: 700 14px/1 var(--font);
  font-variant-numeric: tabular-nums;
}

/* What-if button */
.fcl-whatif-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #8C64C8;
  color: var(--text-inverse);
  font: 600 14px/1 var(--font);
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.fcl-whatif-btn:hover { transform: scale(1.15); }

/* Items — stacked line items */
.fcl-day-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding-left: 4px;
}

.fcl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-radius: 4px;
  font: 400 13px/1.4 var(--font);
  transition: background 0.1s;
}
.fcl-item:hover { background: rgba(0,0,0,0.03); }
.fcl-item.hypo { font-style: italic; opacity: 0.75; }

.fcl-item-icon {
  font-size: 13px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.fcl-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text);
}

.fcl-item-amt {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.fcl-item-badge {
  font: 500 9px/1 var(--font);
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(140,100,200,0.12);
  color: #8C64C8;
  white-space: nowrap;
  margin-left: 4px;
}

.fcl-item-actions {
  display: flex;
  gap: 4px;
  opacity: 0.55;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.fcl-item:hover .fcl-item-actions { opacity: 1; }

.fcl-item-edit, .fcl-item-reset {
  cursor: pointer;
  font-size: 14px;
  padding: 4px 7px;
  border-radius: 6px;
  opacity: 0.7;
  background: rgba(0,0,0,0.04);
  transition: opacity 0.15s, background 0.1s;
}
.fcl-item-edit:hover, .fcl-item-reset:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.fcl-item-reset { color: var(--error); }

/* Modified (overridden) items — subtle, NOT strikethrough */
.fcl-item.fcl-modified { background: rgba(140,100,200,0.04); }
.fcl-item.fcl-modified .fcl-item-name { font-style: italic; }

.fcl-no-items {
  font: 400 12px/1 var(--font);
  color: var(--text-3);
  opacity: 0.5;
  padding: 2px 4px;
}

/* Drop target for drag-and-drop */
.fcl-day.fc-drop-target { background: rgba(140,100,200,0.08) !important; outline: 2px dashed #8C64C8; outline-offset: -2px; }

/* Legacy pill classes kept for backward compat (drag ghost etc.) */
.fcl-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 6px; font: 400 12px/1.3 var(--font); }
.fcl-pill.expense { background: rgba(255,59,48,0.08); color: var(--error); }
.fcl-pill.income { background: rgba(52,199,89,0.08); color: var(--success); }
.fcl-pill.hypo { background: rgba(140,100,200,0.1); color: #8C64C8; }
.fcl-pill.overridden { opacity: 0.6; font-style: italic; }
.fcl-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.fcl-pill-amt { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fcl-pill-edit, .fcl-pill-reset { display: none; cursor: pointer; font-size: 11px; padding: 0 2px; opacity: 0.6; }
.fcl-pill:hover .fcl-pill-edit, .fcl-pill:hover .fcl-pill-reset { display: inline; }
.fcl-pill-reset { color: var(--error); }

/* ── 6b. Sidebar — Next 30 Days ── */
.fcs-section { margin-top: 12px; }
.fcs-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.fcs-section-title {
  font: 600 13px/1.3 var(--font);
  color: var(--text);
  letter-spacing: -0.2px;
}
.fcs-action-link {
  background: none;
  border: none;
  cursor: pointer;
  font: 500 11px/1 var(--font);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}
.fcs-action-link:hover { background: rgba(184,150,90,0.1); }
.fcs-action-link.danger { color: var(--error); }
.fcs-action-link.danger:hover { background: rgba(255,59,48,0.08); }

.fcs-list { display: flex; flex-direction: column; gap: 0; }

/* Day group in sidebar */
.fcs-day-group { border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 4px; }
.fcs-day-group:last-child { border-bottom: none; margin-bottom: 0; }
.fcs-day-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0 2px;
  font: 600 11px/1 var(--font);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Sidebar item row */
.fcs-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  transition: background 0.12s;
}
.fcs-item:hover { background: var(--surface-2); margin: 0 -6px; padding: 4px 6px; border-radius: var(--radius-sm); }
.fcs-item.fcs-overridden { background: rgba(140,100,200,0.04); }
.fcs-item.fcs-hypo-item { color: #8C64C8; }

.fcs-item-icon { font-size: 12px; flex-shrink: 0; }
.fcs-item-left { min-width: 0; flex: 1; }
.fcs-item-name { font: 400 12px/1.3 var(--font); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.fcs-hypo-item .fcs-item-name { color: #8C64C8; }
.fcs-item-date { font: 400 11px/1.3 var(--font); color: var(--text-3); margin-top: 1px; }

.fcs-moved-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 8px;
  font: 600 8px/1.4 var(--font);
  background: rgba(140,100,200,0.12);
  color: #8C64C8;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  vertical-align: middle;
  margin-left: 4px;
}

.fcs-item-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fcs-item-amt { font: 600 12px/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.fcs-item-amt.expense { color: var(--error); }
.fcs-item-amt.income { color: var(--success); }

/* Scrollable sidebar list */
.fcs-list-scroll { max-height: 420px; overflow-y: auto; }

/* Inline override/reset actions in sidebar items */
.fcs-item-inline-actions {
  display: flex;
  gap: 3px;
  opacity: 0.45;
  transition: opacity 0.15s;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 6px;
}
.fcs-item:hover .fcs-item-inline-actions { opacity: 1; }
.fcs-inline-edit, .fcs-inline-reset {
  cursor: pointer;
  font-size: 13px;
  padding: 3px 5px;
  border-radius: 5px;
  background: rgba(0,0,0,0.04);
  opacity: 0.7;
  transition: opacity 0.15s, background 0.1s;
}
.fcs-inline-edit:hover, .fcs-inline-reset:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.fcs-inline-reset { color: var(--error); }

.fcs-item-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.fcs-item:hover .fcs-item-actions { opacity: 1; }

.fcs-edit-btn, .fcs-reset-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.fcs-edit-btn:hover { border-color: var(--accent); background: rgba(184,150,90,0.08); }
.fcs-reset-btn { color: var(--error); }
.fcs-reset-btn:hover { border-color: var(--error); background: rgba(255,59,48,0.08); }

.fcs-empty { font: 400 13px/1.4 var(--font); color: var(--text-3); padding: 12px 0; }
.fcs-more { font: 400 12px/1 var(--font); color: var(--text-3); padding: 8px 0; }

/* Legacy ledger item classes (kept for drag-and-drop compat) */
.fc-ledger-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  margin: 1px 4px 1px 0;
  border-radius: 4px;
  font-size: 12px;
  background: var(--surface-2);
}
.fc-drag-handle {
  cursor: grab;
  opacity: 0;
  font-size: 10px;
  color: var(--text-3);
  margin-right: 2px;
  transition: opacity 0.15s;
  user-select: none;
}
.fc-draggable-item:hover .fc-drag-handle { opacity: 1; }
.fc-draggable-item.fc-dragging { opacity: 0.4; }
.fc-drop-target { background: rgba(140,100,200,0.08) !important; outline: 2px dashed #8C64C8; outline-offset: -2px; }
.fc-drag-ghost {
  position: fixed;
  z-index: 999;
  padding: 6px 12px;
  background: var(--navy);
  color: var(--text-on-navy);
  border-radius: var(--radius-sm);
  font: 500 12px/1 var(--font);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  white-space: nowrap;
}
.fc-rescheduled-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 9px;
  font: 600 9px/1.4 var(--font);
  background: rgba(140,100,200,0.12);
  color: #8C64C8;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  font-style: normal;
}
.fc-ledger-balance { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; position: relative; }
.fc-ledger-add-hypo {
  display: none;
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #8C64C8;
  color: var(--text-inverse);
  font: 600 12px/18px var(--font);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.15s;
}
.fc-ledger-add-hypo:hover { transform: translateY(-50%) scale(1.15); }
.fc-ledger-row:hover .fc-ledger-add-hypo { display: block; }

/* ── 7. Calendar Heat-Map View ── */
.fc-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 16px;
}
.fc-cal-header {
  font: 600 11px/1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.8);
  background: var(--navy);
  text-align: center;
  padding: 8px 0;
  border-radius: var(--radius-sm);
}
.fc-cal-cell {
  position: relative;
  min-height: 80px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  font-size: 12px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.fc-cal-cell:hover { box-shadow: var(--shadow-sm); }
.fc-cal-cell.today { border-color: var(--accent); border-width: 2px; }
.fc-cal-cell.past { opacity: 0.55; }
.fc-cal-chip {
  display: inline-block;
  padding: 1px 5px;
  margin: 1px 0;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.fc-cal-chip.income { background: var(--success-bg); color: #1a7a34; }
.fc-cal-chip.expense { background: var(--error-bg); color: var(--error); }
.fc-cal-chip.hypothetical { background: rgba(147,51,234,0.1); color: #7c3aed; }
.fc-cal-balance {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font: 600 10px/1 var(--font);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
/* fc-cal-add-hypo moved to scenario section below */
.fc-cal-heatbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 0 0 5px 5px;
}

/* ── 8. Waterfall Chart ── */
.fc-waterfall-wrap { position: relative; margin-bottom: 16px; }
.fc-waterfall-bar {
  border-radius: 3px 3px 0 0;
  transition: opacity 0.15s;
}
.fc-waterfall-bar:hover { opacity: 0.8; }
.fc-waterfall-bar.income { fill: var(--success); }
.fc-waterfall-bar.expense { fill: var(--error); }

/* ── 9. Hypothetical Items ── */
.fc-hypo {
  border: 1px dashed rgba(147,51,234,0.35);
  background: rgba(147,51,234,0.04);
  border-radius: var(--radius-sm);
}
.fc-hypo-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 9px;
  font: 600 10px/1.4 var(--font);
  background: rgba(147,51,234,0.12);
  color: #7c3aed;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.fc-hypo-form {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.fc-hypo-form input, .fc-hypo-form select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: 400 13px/1 var(--font);
  background: var(--surface);
  color: var(--text);
}

/* ── 10. Settings Panel ── */
.fc-settings-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.fc-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.fc-settings-row:last-child { border-bottom: none; }
.fc-settings-label { font: 500 13px/1.3 var(--font); color: var(--text); }

/* ── 11. Rich Tooltips ── */
.fc-tooltip {
  position: fixed;
  z-index: 9000;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-lg);
  max-width: 280px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.fc-tooltip.visible { opacity: 1; pointer-events: none; }
.fc-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 20px;
  border: 6px solid transparent;
  border-top-color: var(--surface);
}
.fc-tooltip-title { font: 600 13px/1.3 var(--font); color: var(--text); margin-bottom: 4px; }
.fc-tooltip-body { font: 400 12px/1.5 var(--font); color: var(--text-2); }
.fc-tooltip-example {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font: 400 12px/1.4 var(--font);
  color: var(--text);
}
.fc-tooltip-formula {
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--navy);
  color: #e2e8f0;
  border-radius: 4px;
  font: 400 11px/1.4 'SF Mono', 'Fira Code', monospace;
}
.fc-tooltip-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9px;
  font: 600 10px/1.4 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.fc-tooltip-status.good { background: var(--success-bg); color: #1a7a34; }
.fc-tooltip-status.caution { background: var(--warning-bg); color: #b36b00; }
.fc-tooltip-status.risk { background: var(--error-bg); color: var(--error); }
.fc-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  font: 600 10px/1 var(--font);
  color: var(--text-3);
  cursor: help;
  transition: color 0.15s, border-color 0.15s;
}
.fc-info-icon:hover { color: var(--accent); border-color: var(--accent); }

/* ── 12. Scenario Builder ── */
.fc-scenario-bar {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  overflow-x: auto;
  margin-bottom: 12px;
}
.fc-scenario-card {
  flex-shrink: 0;
  min-width: 140px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font: 500 13px/1.3 var(--font);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.fc-scenario-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.fc-scenario-card.active { border-color: var(--accent); background: var(--accent-bg); }
.fc-scenario-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 2px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.fc-scenario-card:hover .fc-scenario-actions,
.fc-compare-card:hover .fc-scenario-actions { opacity: 1; }
.fc-scenario-action-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, border-color 0.15s;
}
.fc-scenario-action-btn:hover { background: var(--surface-2); border-color: var(--text-3); }
.fc-scenario-action-del:hover { background: var(--error-bg); border-color: var(--error); }
.fc-scenario-add-card {
  border: 2px dotted var(--rule);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 70px;
  transition: border-color 0.15s, background 0.15s;
}
.fc-scenario-add-card .fc-scenario-add-plus { font-size: 24px; font-weight: 300; color: var(--text-3); line-height: 1; }
.fc-scenario-add-card .fc-scenario-add-label { font-size: 12px; font-weight: 500; color: var(--text-2); margin-top: 2px; }
.fc-scenario-add-card:hover {
  border-color: var(--accent);
  background: rgba(184, 150, 90, 0.04);
}
.fc-scenario-add-card:hover .fc-scenario-add-plus,
.fc-scenario-add-card:hover .fc-scenario-add-label { color: var(--accent); }

/* Ledger item styling */
.fc-ledger-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.4;
}
.fc-ledger-item-icon { font-size: 11px; flex-shrink: 0; }
.fc-ledger-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-ledger-item-amt { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fc-ledger-items-cell { padding: 4px 8px !important; }
.fc-ledger-actions-cell { padding: 4px 4px !important; text-align: center; vertical-align: middle; }

/* Add What-If button */
.fc-add-whatif-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  white-space: nowrap;
}
tr:hover .fc-add-whatif-btn { opacity: 1; }
.fc-add-whatif-btn:hover { background: rgba(184, 150, 90, 0.1); }

/* Calendar what-if */
.fc-cal-add-hypo {
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.fc-cal-cell:hover .fc-cal-add-hypo { opacity: 1; }
.fc-builder-modal .modal-content { max-width: 960px; }
.fc-builder-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.fc-builder-section > summary,
.fc-builder-section > .fc-builder-section-head {
  padding: 12px 16px;
  background: var(--surface-2);
  font: 600 13px/1.3 var(--font);
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.fc-builder-preview {
  position: sticky;
  top: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  min-height: 200px;
}
/* Scenario selector cards row */
.fc-compare-cards {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.fc-compare-card {
  flex: 1;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  background: var(--surface);
}
.fc-compare-card:hover { border-color: var(--text-3); }
.fc-compare-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184,150,90,0.15); }
.fc-compare-card-name {
  font: 700 14px/1.3 var(--font);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.fc-compare-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fc-compare-card-meta {
  font: 400 11px/1.3 var(--font);
  color: var(--text-3);
}
.fc-compare-card-desc {
  font: 400 11px/1.4 var(--font);
  color: var(--text-2);
  margin-top: 2px;
}
.fc-compare-card-eom {
  font: 800 20px/1.2 var(--font);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.fc-compare-card-diff {
  font: 600 11px/1.3 var(--font);
  margin-top: 2px;
}

/* Summary bar */
.fc-compare-summary {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 16px;
  font: 400 13px/1.7 var(--font);
  color: var(--text-2);
}
.fc-compare-summary strong { color: var(--text); }

/* Chart wrapper */
.fc-compare-chart-area {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 20px;
}
.fc-compare-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.fc-compare-chart-title {
  font: 600 13px/1.3 var(--font);
  color: var(--text);
}
.fc-compare-chart-legend {
  display: flex;
  gap: 12px;
  font: 500 11px/1.3 var(--font);
  align-items: center;
}
.fc-compare-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fc-compare-chart-dates {
  display: flex;
  justify-content: space-between;
  font: 400 10px/1.3 var(--font);
  color: var(--text-3);
  padding: 4px 0 0;
}

/* KPI comparison columns */
.fc-compare-cols {
  display: grid;
  gap: 16px;
}
.fc-compare-cols.cols-2 { grid-template-columns: 1fr 1fr; }
.fc-compare-cols.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.fc-compare-cols.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.fc-compare-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.fc-compare-col-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 14px/1.3 var(--font);
  color: var(--text);
}
.fc-compare-col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fc-compare-col-body {
  padding: 8px 16px 14px;
}
.fc-compare-kpi-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-2);
}
.fc-compare-kpi-row:last-child { border-bottom: none; }
.fc-compare-kpi-label {
  font: 500 12px/1.3 var(--font);
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 4px;
}
.fc-compare-kpi-val {
  font: 700 14px/1.3 var(--font);
  text-align: right;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Diff badges */
.fc-compare-diff {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9px;
  font: 600 10px/1.4 var(--font);
  margin-left: 6px;
  vertical-align: middle;
}
.fc-compare-diff.better { background: var(--success-bg); color: #1a7a34; }
.fc-compare-diff.worse { background: var(--error-bg); color: var(--error); }
.fc-compare-diff.same { background: var(--surface-2); color: var(--text-3); }

@media (max-width: 900px) {
  .fc-compare-cols.cols-2, .fc-compare-cols.cols-3, .fc-compare-cols.cols-4 { grid-template-columns: 1fr; }
  .fc-compare-cards { flex-wrap: wrap; }
}

/* ── 12b. Scenario Builder (.bldr-*) ── */
.bldr-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 14px;
}
.bldr-section-title {
  font: 600 13px/1.3 var(--font);
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bldr-kpi {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: center;
}
.bldr-kpi-label {
  font: 500 10px/1.3 var(--font);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.bldr-kpi-value {
  font: 700 20px/1.2 var(--font);
  font-variant-numeric: tabular-nums;
}
.bldr-label {
  display: block;
  font: 500 11px/1.3 var(--font);
  color: var(--text-2);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.bldr-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: 400 13px/1.4 var(--font);
  color: var(--text);
  background: var(--surface);
  transition: border-color 0.15s;
  box-sizing: border-box;
  min-width: 0;
}
.bldr-input:focus { border-color: var(--accent); outline: none; }
.bldr-input-sm { padding: 6px 10px; font-size: 12px; }
.bldr-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  outline: none;
}
.bldr-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.bldr-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.bldr-slider-val {
  min-width: 40px;
  font: 600 13px/1 var(--font);
  color: var(--accent);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bldr-slider-dollar {
  font: 400 11px/1.3 var(--font);
  color: var(--text-3);
  margin-top: 4px;
}
.bldr-hypo-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  border: 1px solid var(--border);
  transition: border-color 0.15s;
}
.bldr-hypo-row:hover { border-color: var(--accent); }
.bldr-hypo-row .bldr-input-sm { margin-bottom: 0; }
.bldr-hypo-fields {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: start;
}
.bldr-hypo-top-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.bldr-hypo-bottom-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.bldr-override-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  border: 1px solid var(--border);
}
.bldr-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s, border-color 0.15s;
}
.bldr-icon-btn:hover { background: var(--surface-2); border-color: var(--accent); }
.bldr-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font: 500 12px/1 var(--font);
  color: var(--accent);
  background: transparent;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  width: 100%;
  justify-content: center;
}
.bldr-add-btn:hover { background: rgba(184, 150, 90, 0.06); }
.bldr-radio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 400 12px/1.3 var(--font);
  color: var(--text);
  cursor: pointer;
}
.bldr-radio input[type="radio"] { accent-color: var(--accent); }

/* ── 13. Savings Goals ── */
.fc-goal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: box-shadow 0.15s;
}
.fc-goal-card:hover { box-shadow: var(--shadow-sm); }
.fc-goal-progress {
  width: 100%;
  height: 8px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}
.fc-goal-progress > div {
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width 0.4s ease;
}
.fc-goal-line { stroke-dasharray: 6 4; stroke-width: 1.5; opacity: 0.6; }

/* ── 14. Snapshot Overlay ── */
.fc-snapshot-ghost {
  fill: none;
  stroke-dasharray: 5 4;
  stroke-width: 1.5;
  opacity: 0.45;
}
.fc-snapshot-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: 400 12px/1.3 var(--font);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.15s;
}
.fc-snapshot-card:hover { border-color: var(--accent); }
.fc-snapshot-card.fc-snapshot-active {
  border-color: #E07070;
  background: rgba(224, 112, 112, 0.06);
}
.fc-snapshot-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 8px;
  background: rgba(224, 112, 112, 0.08);
  border: 1px solid rgba(224, 112, 112, 0.25);
  border-radius: var(--radius-md);
  font: 400 12px/1.4 var(--font);
  color: var(--text);
}

/* ── 15. Layout Adaptations ── */
.fc-layout-2col { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
.fc-layout-full { width: 100%; }
.fc-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fc-main-content { min-width: 0; }

/* ── 16. Shared Components ── */
.fc-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}
.fc-toggle input[type="checkbox"] {
  display: none;
}
.fc-toggle-track {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  transition: background 0.2s, border-color 0.2s;
}
.fc-toggle.active .fc-toggle-track { background: var(--accent); border-color: var(--accent); }
.fc-toggle-dot {
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.fc-toggle.active .fc-toggle-dot { transform: translateX(16px); }
.fc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 9px;
  font: 600 10px/1.4 var(--font);
  background: var(--surface-2);
  color: var(--text-2);
}
.fc-divider {
  width: 1px;
  height: 20px;
  background: var(--border-strong);
  flex-shrink: 0;
}
.fc-btn-sm {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: 500 12px/1 var(--font);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.fc-btn-sm:hover { background: var(--surface-2); border-color: var(--border-strong); }
.fc-date-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-date-picker-modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-lg);
  max-width: 360px;
  width: 90%;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .fc-kpi-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .fc-kpi-value { font-size: 18px; }
  .fc-layout-2col { grid-template-columns: 1fr; }
  .fc-sidebar { order: -1; }
  .fc-compare-cols { grid-template-columns: 1fr; }
  .fc-cal-cell { min-height: 60px; padding: 4px; }
  .fc-cal-chip { font-size: 9px; }
  .fc-cal-balance { font-size: 9px; }
  .fc-chart-wrap { min-height: 220px; }
  .fc-toolbar-row2 { gap: 6px; }
  .fc-scenario-bar { gap: 8px; }
  .fc-scenario-card { min-width: 120px; padding: 8px 10px; font-size: 12px; }
  .forecast-subtabs { padding: 2px; }
  .forecast-subtab { padding: 6px 10px; font-size: 10px; }
  .fc-hypo-form { flex-wrap: wrap; }

  /* Ledger responsive */
  .fcl-period-head { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; }
  .fcl-period-stats { flex-wrap: wrap; gap: 10px; }
  .fcl-stat-net, .fcl-stat-end { margin-left: 0; padding-left: 0; border-left: none; }
  .fcl-day { padding: 8px 12px; }
  .fcl-item { font-size: 12px; }
  .fcl-day-balance { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   TRAVEL MODULE EXPANSION — Specs 1-16
   ══════════════════════════════════════════════════════════════ */

/* ── Travelers grid ─────────────────────────────────────────── */
.travel-travelers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.travel-traveler-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

/* ── Budget tab ─────────────────────────────────────────────── */
.travel-kpi {
  flex: 1;
  min-width: 100px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-align: center;
}
.travel-kpi-val { font-size: 18px; font-weight: 700; color: var(--text); }
.travel-kpi-lbl { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.travel-budget-cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.travel-budget-cat-card {
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.travel-expenses-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.travel-expense-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

/* ── Packing list ───────────────────────────────────────────── */
.travel-packing-cat {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.travel-packing-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}
.travel-packing-item:last-child { border-bottom: none; }
.travel-packing-item.packed label span {
  text-decoration: line-through;
  color: var(--text-3);
}

/* ── Safety bar ─────────────────────────────────────────────── */
.travel-safety-bar {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: 16px;
}

/* ── Inspire card ───────────────────────────────────────────── */
.travel-inspire-card {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

/* ── Cluster cards ──────────────────────────────────────────── */
.travel-cluster-card {
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  min-width: 180px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .travel-travelers-grid { grid-template-columns: 1fr; }
  .travel-budget-cats { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   TRIP PLANNING WIZARD (.tw-*)
   ═══════════════════════════════════════════════════════════════ */

.tw-overlay {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s ease;
}
.tw-overlay.open { opacity: 1; }

.tw-container {
  background: var(--bg, #FAFAF8); border-radius: 16px;
  width: 94vw; max-width: 740px; max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.2);
  overflow: hidden; transform: translateY(20px);
  transition: transform 0.3s ease;
}
.tw-overlay.open .tw-container { transform: translateY(0); }

.tw-header {
  position: relative; padding: 0; color: var(--text-inverse);
  background: linear-gradient(135deg, var(--navy,#1B3A4B) 0%, #2a5a6b 100%);
  min-height: 80px; overflow: hidden;
}
.tw-header-bg {
  padding: 28px 28px 16px; min-height: 80px;
  background-size: cover; background-position: center;
}
.tw-header-content { position: relative; z-index: 1; }
.tw-header-title {
  font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--text-inverse);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.tw-header-dest {
  font-size: 22px; font-weight: 700; margin-bottom: 4px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.tw-header-sub {
  font-size: 13px; opacity: 0.85;
}
.tw-header-close {
  position: absolute; top: 12px; right: 16px;
  background: rgba(255,255,255,0.15); border: none; color: var(--text-inverse);
  width: 32px; height: 32px; border-radius: 50%; font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: background 0.15s;
}
.tw-header-close:hover { background: rgba(255,255,255,0.3); }

/* Stepper */
.tw-stepper {
  display: flex; gap: 4px; padding: 12px 28px;
  border-bottom: 1px solid var(--rule, #e0e0e0); background: var(--surface, #fff);
  overflow-x: auto; flex-shrink: 0;
}
.tw-step-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
  color: var(--text-3, #aaa); background: transparent;
  white-space: nowrap; transition: all 0.2s;
}
.tw-step-pill.active {
  background: var(--navy, #1B3A4B); color: var(--text-inverse);
}
.tw-step-pill.done {
  background: rgba(22,163,74,0.1); color: var(--accent-green, #16a34a);
}
.tw-step-num {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  background: var(--rule, #e0e0e0); color: var(--text-3, #999);
}
.tw-step-pill.active .tw-step-num { background: rgba(255,255,255,0.2); color: var(--text-inverse); }
.tw-step-pill.done .tw-step-num { background: var(--accent-green, #16a34a); color: var(--text-inverse); }

/* Body */
.tw-body {
  flex: 1; overflow-y: auto; padding: 24px 28px;
  min-height: 300px;
}

/* Footer */
.tw-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 28px; border-top: 1px solid var(--rule, #e0e0e0);
  background: var(--surface, #fff); flex-shrink: 0;
}
.tw-footer-left { display: flex; gap: 8px; }
.tw-footer-right { display: flex; gap: 8px; align-items: center; }
.tw-btn {
  padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 600;
  border: none; cursor: pointer; transition: all 0.15s; font-family: var(--font);
}
.tw-btn-primary {
  background: var(--navy, #1B3A4B); color: var(--text-inverse);
}
.tw-btn-primary:hover { background: #244d60; }
.tw-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.tw-btn-ghost {
  background: transparent; color: var(--text-2, #666);
  border: 1px solid var(--rule, #ddd);
}
.tw-btn-ghost:hover { background: var(--surface, #f5f5f5); }
.tw-btn-skip {
  background: transparent; color: var(--text-3, #aaa); border: none;
  font-size: 12px; cursor: pointer; text-decoration: underline;
}
.tw-selected-count {
  font-size: 12px; color: var(--accent-dark, #8B7340); font-weight: 600;
}

/* Date cards */
.tw-date-list { display: flex; flex-direction: column; gap: 10px; }
.tw-date-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border: 2px solid var(--rule, #e0e0e0);
  border-radius: 14px; cursor: pointer; transition: all 0.2s;
  background: var(--surface, #fff);
}
.tw-date-card:hover { border-color: var(--navy, #1B3A4B); background: rgba(27,58,75,0.02); }
.tw-date-card.tw-date-selected {
  border-color: var(--navy, #1B3A4B); background: rgba(27,58,75,0.05);
  box-shadow: 0 0 0 1px var(--navy, #1B3A4B);
}
.tw-date-score {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: var(--text-inverse);
}
.tw-date-info { flex: 1; min-width: 0; }
.tw-date-range { font-weight: 700; font-size: 14px; color: var(--text, #1a1a1a); margin-bottom: 4px; }
.tw-date-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tw-date-tag {
  font-size: 11px; font-weight: 600; color: var(--text-2, #666);
  background: var(--bg, #f5f5f5); padding: 2px 8px; border-radius: 6px;
}
.tw-date-season { background: rgba(154,125,74,0.12); color: var(--accent-dark, #8B7340); }
.tw-date-weather { font-size: 11px; color: var(--text-2, #666); margin-top: 4px; }
.tw-date-reason {
  font-size: 12px; color: var(--text-3, #999); margin-top: 4px;
  font-style: italic; line-height: 1.4;
}
.tw-date-check {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--rule, #ddd); display: flex;
  align-items: center; justify-content: center;
  font-size: 13px; color: transparent; transition: all 0.15s;
}
.tw-date-selected .tw-date-check {
  background: var(--navy, #1B3A4B); border-color: var(--navy, #1B3A4B); color: var(--text-inverse);
}
.tw-date-custom {
  border-style: dashed; justify-content: center;
}
.tw-date-custom.tw-date-selected {
  border-color: var(--navy); border-style: solid;
  background: rgba(27,58,75,0.05);
}
.tw-date-custom-inputs {
  display: flex; gap: 16px; padding: 12px 18px; margin-top: -2px;
  background: rgba(27,58,75,0.03); border-radius: 0 0 14px 14px;
  border: 1px solid var(--rule, #ddd); border-top: none;
}
.tw-date-custom-inputs label {
  flex: 1; font-size: 12px; font-weight: 600; color: var(--text-2, #666);
  display: flex; flex-direction: column; gap: 4px;
}
.tw-date-custom-inputs input[type="date"] {
  font-size: 14px; padding: 8px 10px; border: 1px solid var(--rule, #ddd);
  border-radius: 8px; font-family: var(--font); color: var(--text);
  background: var(--surface, #fff);
}

/* Pills (vibe, amenities, tags) */
.tw-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--rule, #ddd); background: var(--surface, #fff);
  color: var(--text-2, #666); cursor: pointer; transition: all 0.15s;
  user-select: none;
}
.tw-pill:hover { border-color: var(--navy, #1B3A4B); }
.tw-pill.tw-pill-active {
  background: var(--navy, #1B3A4B); color: var(--text-inverse); border-color: var(--navy);
}

/* Preferences section */
.tw-prefs-wrap { display: flex; flex-direction: column; gap: 20px; }
.tw-prefs-section h3 {
  font-size: 13px; font-weight: 700; color: var(--text, #1a1a1a);
  margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.4px;
}
.tw-pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.tw-input, .tw-textarea {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--rule, #ddd);
  border-radius: 10px; font-size: 13px; font-family: var(--font);
  color: var(--text); background: var(--surface, #fff); transition: border-color 0.15s;
  box-sizing: border-box;
}
.tw-input:focus, .tw-textarea:focus {
  border-color: var(--navy, #1B3A4B); outline: none;
  box-shadow: 0 0 0 3px rgba(27,58,75,0.08);
}
.tw-textarea { resize: vertical; min-height: 60px; }

/* Budget/pace selector cards */
.tw-option-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.tw-option-card {
  padding: 16px; border: 2px solid var(--rule, #ddd); border-radius: 12px;
  text-align: center; cursor: pointer; transition: all 0.15s;
  background: var(--surface, #fff);
}
.tw-option-card:hover { border-color: var(--navy); }
.tw-option-card.tw-option-active {
  border-color: var(--navy); background: rgba(27,58,75,0.05);
  box-shadow: 0 0 0 1px var(--navy);
}
.tw-option-icon { font-size: 24px; margin-bottom: 6px; }
.tw-option-label { font-size: 13px; font-weight: 700; color: var(--text, #1a1a1a); }
.tw-option-desc { font-size: 11px; color: var(--text-3, #999); margin-top: 2px; }

/* Explore / suggestion cards */
.tw-explore-wrap { display: flex; flex-direction: column; gap: 12px; }
.tw-sel-bar {
  padding: 8px 14px; border-radius: 10px; font-size: 12px; font-weight: 600;
  background: rgba(27,58,75,0.07); color: var(--navy, #1B3A4B); text-align: center;
}
.tw-explore-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.tw-explore-card {
  display: flex; gap: 14px; padding: 14px;
  border: 2px solid var(--rule, #e0e0e0); border-radius: 14px;
  cursor: pointer; transition: all 0.18s; background: var(--surface, #fff);
}
.tw-explore-card:hover { border-color: var(--navy); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.tw-explore-card.tw-explore-selected {
  border-color: var(--navy); background: rgba(27,58,75,0.03);
  box-shadow: 0 0 0 1px var(--navy);
}
.tw-explore-thumb {
  width: 80px; height: 80px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.tw-explore-thumb-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
  transition: opacity 0.3s ease;
}
.tw-explore-thumb-icon {
  font-size: 26px; filter: brightness(0) invert(1);
  position: relative; z-index: 2; text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.tw-explore-body { flex: 1; min-width: 0; }
.tw-explore-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tw-explore-name { font-weight: 700; font-size: 14px; color: var(--text, #1a1a1a); line-height: 1.3; }
.tw-explore-check {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  border: 2px solid var(--rule, #ddd); display: flex;
  align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: transparent; transition: all 0.15s;
}
.tw-explore-selected .tw-explore-check {
  background: var(--navy); border-color: var(--navy); color: var(--text-inverse);
}
.tw-explore-location {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--text-3, #999); margin-top: 2px;
}
.tw-explore-rating { color: #f59e0b; font-weight: 600; }
.tw-explore-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tw-meta-pill {
  padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600;
  background: var(--rule, #eee); color: var(--text-2, #666);
}
.tw-cat-pill { background: rgba(27,58,75,0.08); color: var(--navy, #1B3A4B); text-transform: capitalize; }
.tw-urgency-now { background: rgba(220,38,38,0.1) !important; color: #dc2626 !important; }
.tw-urgency-soon { background: rgba(245,158,11,0.1) !important; color: #d97706 !important; }
.tw-explore-desc {
  font-size: 12px; color: var(--text-2, #666); line-height: 1.4;
  margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.tw-explore-why {
  font-size: 11px; color: var(--accent-dark, #8B7340); margin-top: 4px;
  line-height: 1.4;
}

/* Filter tabs */
.tw-filter-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tw-filter-tabs::-webkit-scrollbar { display: none; }
.tw-filter-tab {
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
  border: 1.5px solid var(--rule, #ddd); background: var(--surface, #fff);
  color: var(--text-2, #666); cursor: pointer; white-space: nowrap;
  transition: all 0.15s;
}
.tw-filter-tab:hover { border-color: var(--navy); color: var(--navy); }
.tw-filter-tab.active {
  background: var(--navy, #1B3A4B); color: var(--text-inverse); border-color: var(--navy);
}
.tw-filters {
  display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto;
  padding-bottom: 2px;
}
.tw-filter-btn {
  padding: 5px 14px; border-radius: 16px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--rule, #ddd); background: var(--surface, #fff);
  color: var(--text-2, #666); cursor: pointer; white-space: nowrap;
  transition: all 0.15s;
}
.tw-filter-btn.active {
  background: var(--navy, #1B3A4B); color: var(--text-inverse); border-color: var(--navy);
}

/* Hotel cards */
.tw-hotel-wrap { display: flex; flex-direction: column; gap: 12px; }
.tw-hotel-grid { display: flex; flex-direction: column; gap: 14px; }
.tw-hotel-card {
  border: 2px solid var(--rule, #e0e0e0); border-radius: 16px;
  cursor: pointer; transition: all 0.18s; overflow: hidden;
  background: var(--surface, #fff);
}
.tw-hotel-card:hover { border-color: var(--navy); box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.tw-hotel-card.tw-hotel-selected {
  border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy);
}
.tw-hotel-photo {
  height: 160px; position: relative; background: linear-gradient(135deg, #1B3A4B, #2d6a82);
}
.tw-hotel-photo-overlay {
  position: absolute; inset: 0; padding: 12px;
  display: flex; align-items: flex-start; justify-content: space-between;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 60%, rgba(0,0,0,0.4) 100%);
}
.tw-hotel-check {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.7); display: flex;
  align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: transparent; transition: all 0.15s;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(4px);
}
.tw-hotel-selected .tw-hotel-check {
  background: var(--navy); border-color: var(--navy); color: var(--text-inverse);
}
.tw-hotel-style-badge {
  padding: 3px 10px; border-radius: 12px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(4px);
  color: var(--text-inverse);
}
.tw-hotel-stars-badge {
  position: absolute; bottom: 10px; left: 12px;
  color: #fbbf24; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.tw-hotel-body { padding: 16px; }
.tw-hotel-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tw-hotel-name { font-weight: 700; font-size: 16px; color: var(--text, #1a1a1a); line-height: 1.3; }
.tw-hotel-review {
  display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
  padding: 4px 8px; border-radius: 8px; color: var(--text-inverse); min-width: 40px;
}
.tw-hotel-review-score { font-size: 14px; font-weight: 800; line-height: 1; }
.tw-hotel-review-source { font-size: 8px; font-weight: 600; opacity: 0.9; }
.tw-hotel-hood {
  font-size: 12px; color: var(--text-2, #666); margin-top: 4px; line-height: 1.4;
}
.tw-hotel-hood-vibe { font-style: italic; color: var(--text-3, #999); }
.tw-hotel-pricing {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
.tw-hotel-price {
  font-size: 18px; font-weight: 800; color: var(--navy, #1B3A4B);
}
.tw-hotel-price small { font-size: 12px; font-weight: 500; color: var(--text-3, #999); }
.tw-hotel-total { font-size: 12px; color: var(--text-3, #999); }
.tw-hotel-bestfor-pill {
  padding: 2px 10px; border-radius: 10px; font-size: 10px; font-weight: 700;
  background: rgba(184,150,90,0.12); color: var(--accent-dark, #8B7340);
  text-transform: capitalize;
}
.tw-hotel-desc {
  font-size: 12px; color: var(--text-2, #666); line-height: 1.5;
  margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.tw-hotel-why {
  font-size: 11px; color: var(--accent-dark, #8B7340); margin-top: 6px; line-height: 1.4;
}
.tw-hotel-proximity {
  font-size: 11px; color: var(--text-2, #666); margin-top: 6px;
}
.tw-hotel-proscons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tw-pro-pill { background: rgba(22,163,74,0.08) !important; color: #16a34a !important; }
.tw-con-pill { background: rgba(220,38,38,0.06) !important; color: #b91c1c !important; }
.tw-hotel-amenities { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tw-amenity-pill {
  padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 500;
  background: var(--rule, #f0f0f0); color: var(--text-2, #666);
}
.tw-hotel-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule, #eee); }
.tw-hotel-link-btn {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 5px 12px; border-radius: 8px; font-size: 11px; font-weight: 600;
  background: rgba(27,58,75,0.06); color: var(--navy, #1B3A4B);
  text-decoration: none; transition: all 0.15s; border: none; cursor: pointer;
}
.tw-hotel-link-btn:hover { background: rgba(27,58,75,0.14); }

/* Logistics items */
.tw-logistics-wrap { display: flex; flex-direction: column; gap: 4px; }
.tw-logistics-cat {
  font-size: 14px; font-weight: 700; color: var(--navy, #1B3A4B);
  margin: 16px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule, #eee);
}
.tw-logistics-cat:first-child { margin-top: 0; }
.tw-logistics-list { display: flex; flex-direction: column; gap: 8px; }
.tw-logistics-toggle {
  font-size: 12px; color: var(--text-2, #666); padding: 8px 0;
  border-bottom: 1px solid var(--rule, #eee); margin-bottom: 4px;
}
.tw-logistics-toggle label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tw-logistics-toggle input[type="checkbox"] { accent-color: var(--navy, #1B3A4B); }
.tw-logistics-item {
  display: flex; gap: 12px; padding: 14px 16px; align-items: center;
  justify-content: space-between;
  border: 1.5px solid var(--rule, #e0e0e0); border-radius: 10px;
  cursor: pointer; transition: all 0.15s;
  background: var(--surface, #fff);
}
.tw-logistics-item:hover { border-color: var(--navy); }
.tw-logistics-item.tw-logistics-selected {
  border-color: var(--navy); background: rgba(27,58,75,0.04);
  box-shadow: 0 0 0 1px var(--navy);
}
.tw-logistics-left { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
.tw-logistics-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tw-logistics-cost { font-weight: 700; font-size: 14px; color: var(--accent-dark, #8B7340); }
.tw-logistics-covers { font-size: 11px; color: var(--accent-dark, #8B7340); margin-top: 2px; }
.tw-savings-pill { background: #dcfce7 !important; color: #16a34a !important; font-size: 10px !important; }
.tw-logistics-check, .tw-logistics-item .tw-explore-check {
  width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
  border: 2px solid var(--rule, #ddd); display: flex;
  align-items: center; justify-content: center;
  font-size: 12px; color: transparent; margin-top: 2px; transition: all 0.15s;
}
.tw-logistics-selected .tw-logistics-check,
.tw-logistics-selected .tw-explore-check {
  background: var(--navy); border-color: var(--navy); color: var(--text-inverse);
}
.tw-logistics-body { flex: 1; min-width: 0; }
.tw-logistics-name { font-weight: 700; font-size: 13px; color: var(--text, #1a1a1a); }
.tw-logistics-desc { font-size: 12px; color: var(--text-2, #666); margin-top: 2px; line-height: 1.4; }
.tw-logistics-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tw-skip-hotel {
  margin-top: 8px; font-size: 12px; color: var(--text-3, #999);
  border-color: transparent;
}
.tw-link-pill { background: rgba(27,58,75,0.08) !important; color: var(--navy) !important; cursor: pointer; }
.tw-link-pill:hover { background: rgba(27,58,75,0.15) !important; }

/* Review section */
.tw-review-wrap {
  display: flex; flex-direction: column; gap: 4px;
}
.tw-review-section {
  background: var(--surface, #fff); border-radius: 10px;
  padding: 16px 18px; border: 1px solid var(--rule, #eee);
}
.tw-review-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.tw-review-head h3 {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-3, #999); margin: 0;
}
.tw-edit-btn {
  background: none; border: none; cursor: pointer; font-size: 14px;
  color: var(--text-3, #aaa); padding: 2px 6px; border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.tw-edit-btn:hover { color: var(--navy, #1B3A4B); background: var(--rule, #f0f0f0); }
.tw-review-detail {
  font-size: 15px; font-weight: 600; color: var(--text, #1a1a1a); line-height: 1.4;
}
.tw-review-meta {
  font-size: 13px; color: var(--text-2, #666); margin-top: 4px;
}
.tw-review-hotel {
  font-size: 14px; font-weight: 600; color: var(--text, #1a1a1a);
  padding: 2px 0;
}
.tw-review-note {
  font-weight: 400; color: var(--text-2, #888); font-size: 13px;
}
.tw-review-none {
  font-size: 13px; color: var(--text-3, #aaa); font-style: italic;
}
.tw-review-name {
  font-size: 16px; font-weight: 700; border: 1px solid var(--rule, #ddd);
  border-radius: 8px; padding: 10px 12px; background: var(--bg, #FAFAF8);
  color: var(--text, #1a1a1a); width: 100%;
}
.tw-review-name:focus { border-color: var(--navy, #1B3A4B); outline: none; }
.tw-review-list {
  font-size: 13px; color: var(--text-2, #555); line-height: 1.7;
  padding-left: 18px; margin: 4px 0 0;
}
.tw-review-list li { padding: 2px 0; }
.tw-collapsed { display: none; }
.tw-collapse-btn {
  font-size: 12px; padding: 4px 10px; margin-top: 4px;
}
.tw-review-budget {
  background: linear-gradient(135deg, #1B3A4B 0%, #2a5268 100%);
  border-color: transparent;
}
.tw-review-budget .tw-review-head h3 {
  color: rgba(255,255,255,0.6);
}
.tw-review-total {
  font-size: 26px; font-weight: 800; color: var(--text-inverse);
  margin-top: 2px; letter-spacing: -0.5px;
}
.tw-review-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-3, #aaa); margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.tw-review-edit {
  font-size: 12px; color: var(--navy, #1B3A4B); cursor: pointer;
  text-decoration: underline; font-weight: 600; text-transform: none;
  letter-spacing: 0;
}
.tw-review-value { font-size: 14px; color: var(--text, #1a1a1a); line-height: 1.5; }

/* Loading / skeleton */
.tw-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; text-align: center;
}
.tw-loading-spinner {
  width: 40px; height: 40px; border: 3px solid var(--rule, #ddd);
  border-top-color: var(--navy, #1B3A4B); border-radius: 50%;
  animation: tw-spin 0.8s linear infinite;
}
@keyframes tw-spin { to { transform: rotate(360deg); } }
.tw-loading-text {
  margin-top: 16px; font-size: 14px; color: var(--text-2, #666); font-weight: 600;
}
.tw-loading-sub {
  font-size: 12px; color: var(--text-3, #aaa); margin-top: 4px;
}
.tw-skeleton-card {
  height: 72px; border-radius: 12px; margin-bottom: 10px;
  background: linear-gradient(90deg, var(--rule,#eee) 25%, #f5f5f5 50%, var(--rule,#eee) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Success screen */
.tw-success {
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 20px; text-align: center;
}
.tw-success-icon { font-size: 48px; margin-bottom: 12px; }
.tw-success-title { font-size: 20px; font-weight: 800; color: var(--text, #1a1a1a); margin-bottom: 8px; }
.tw-success-sub { font-size: 13px; color: var(--text-2, #666); margin-bottom: 20px; }
.tw-success-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 24px; width: 100%;
}
.tw-success-stat {
  padding: 12px; border-radius: 10px; background: var(--surface, #f9f9f9);
  border: 1px solid var(--rule, #eee);
}
.tw-success-stat-num { font-size: 22px; font-weight: 800; color: var(--navy, #1B3A4B); }
.tw-success-stat-label { font-size: 10px; color: var(--text-3, #999); margin-top: 2px; text-transform: uppercase; font-weight: 600; }

/* Section headers within steps */
.tw-section-title {
  font-size: 13px; font-weight: 700; color: var(--text, #1a1a1a);
  margin: 20px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--rule, #eee);
}
.tw-section-title:first-child { margin-top: 0; }

/* Destination group headers */
.tw-dest-group {
  font-size: 14px; font-weight: 700; color: var(--navy, #1B3A4B);
  margin: 20px 0 12px; padding: 8px 12px;
  background: rgba(27,58,75,0.04); border-radius: 8px;
  border-left: 3px solid var(--navy, #1B3A4B);
}
.tw-dest-group:first-child { margin-top: 0; }

/* Error state */
.tw-error {
  padding: 40px 20px; text-align: center;
}
.tw-error-icon { font-size: 36px; margin-bottom: 8px; }
.tw-error-msg { font-size: 14px; color: var(--text-2, #666); margin-bottom: 16px; }

/* Select all toggle */
.tw-select-all {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--navy, #1B3A4B);
  cursor: pointer; margin-bottom: 12px;
}
.tw-select-all-box {
  width: 18px; height: 18px; border: 2px solid var(--rule, #ddd);
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: transparent;
}
.tw-select-all-box.checked { background: var(--navy); border-color: var(--navy); color: var(--text-inverse); }

/* Responsive */
@media (max-width: 640px) {
  .tw-container { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; }
  .tw-body { padding: 16px; }
  .tw-header { padding: 20px 16px 12px; }
  .tw-stepper { padding: 10px 16px; }
  .tw-footer { padding: 12px 16px; }
  .tw-option-cards { grid-template-columns: 1fr; }
  .tw-success-stats { grid-template-columns: repeat(2, 1fr); }
  .tw-explore-thumb { width: 60px; height: 60px; }
}

/* ── Wizard: Creating Loader ─────────────────────────────── */
.tw-creating {
  display: flex; align-items: center; justify-content: center;
  min-height: 100%; flex: 1; position: relative; border-radius: 12px; overflow: hidden;
}
.tw-creating-grad {
  position: absolute; inset: 0; opacity: 0.15;
}
.tw-creating-content {
  position: relative; z-index: 1; text-align: center; padding: 40px 20px;
}
.tw-creating-spinner {
  width: 40px; height: 40px; margin: 0 auto 16px;
  border: 3px solid var(--rule, #e5e5e5); border-top-color: var(--accent, #b8860b);
  border-radius: 50%; animation: twSpin 0.8s linear infinite;
}
@keyframes twSpin { to { transform: rotate(360deg); } }
.tw-creating-msg {
  font-size: 15px; font-weight: 600; color: var(--text, #1a1a1a);
  margin: 0; transition: opacity 0.2s;
}

/* ── Wizard: Transport Cards ─────────────────────────────── */
/* Transport section */
.tw-transport-section { margin-bottom: 20px; }
.tw-section-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.tw-section-title {
  font-size: 16px; font-weight: 700; color: var(--navy, #1B3A4B); margin: 0;
}
.tw-live-badge {
  font-size: 10px; font-weight: 700; background: #22c55e; color: var(--text-inverse);
  padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px;
}
.tw-live-sm { font-size: 8px; padding: 1px 5px; vertical-align: middle; }
.tw-transport-leg {
  margin-bottom: 20px; padding: 16px; border-radius: 14px;
  background: rgba(27,58,75,0.02); border: 1px solid var(--rule, #eee);
}
.tw-transport-leg-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule, #eee);
}
.tw-transport-leg-label { font-size: 14px; font-weight: 700; color: var(--navy, #1B3A4B); }
.tw-transport-leg-route {
  font-size: 12px; color: var(--text-2, #666); font-weight: 500;
  background: var(--rule, #eee); padding: 2px 10px; border-radius: 10px;
}
.tw-transport-mode-group { margin-bottom: 12px; }
.tw-transport-mode-label {
  font-size: 11px; font-weight: 700; color: var(--text-3, #999);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.tw-transport-card {
  background: var(--surface, #fff); border: 1.5px solid var(--rule, #e0e0e0);
  border-radius: 12px; padding: 14px 16px; cursor: pointer;
  transition: all 0.18s; position: relative; margin-bottom: 8px;
}
.tw-transport-card:hover { border-color: var(--navy); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.tw-transport-card.tw-transport-selected {
  border-color: var(--navy); box-shadow: 0 0 0 2px rgba(27,58,75,0.15);
}
.tw-transport-card.tw-transport-selected::after {
  content: '✓'; position: absolute; top: 10px; right: 12px;
  width: 22px; height: 22px; background: var(--navy); color: var(--text-inverse);
  border-radius: 50%; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tw-transport-card-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.tw-transport-operator {
  font-size: 13px; font-weight: 600; color: var(--navy, #1B3A4B);
  display: flex; align-items: center; gap: 6px;
}
.tw-transport-mode-icon { font-size: 16px; }
.tw-airline-logo {
  width: 22px; height: 22px; border-radius: 4px; object-fit: contain;
  background: var(--surface); flex-shrink: 0;
}
.tw-transport-price {
  font-size: 17px; font-weight: 800; color: var(--navy, #1B3A4B);
}
/* Timeline row */
.tw-transport-timeline {
  display: flex; align-items: center; gap: 12px; padding: 8px 0;
}
.tw-transport-endpoint { text-align: center; min-width: 54px; flex-shrink: 0; }
.tw-transport-time { font-size: 16px; font-weight: 700; color: var(--text, #1a1a1a); display: block; }
.tw-transport-city { font-size: 10px; color: var(--text-3, #999); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; }
.tw-transport-journey { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tw-transport-journey-line {
  display: flex; align-items: center; width: 100%; height: 12px;
}
.tw-transport-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--navy, #1B3A4B); flex-shrink: 0;
}
.tw-transport-stop-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-3, #999); flex-shrink: 0;
}
.tw-transport-dash {
  flex: 1; height: 2px; background: var(--rule, #ccc);
  border-radius: 1px;
}
.tw-transport-journey-info {
  display: flex; align-items: center; gap: 8px;
}
.tw-transport-duration { font-size: 11px; font-weight: 600; color: var(--text-2, #666); }
.tw-transport-stops { font-size: 10px; color: var(--text-3, #999); }
.tw-transport-stops.tw-nonstop { color: #16a34a; font-weight: 600; }
.tw-transport-card-bottom {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule, #f0f0f0);
}
.tw-transport-notes { font-size: 11px; color: var(--text-3, #999); flex: 1; }
.tw-divider { border: none; border-top: 1px solid var(--rule); margin: 20px 0; }
@media (max-width: 640px) {
  .tw-transport-timeline { gap: 8px; }
  .tw-transport-endpoint { min-width: 44px; }
  .tw-transport-time { font-size: 14px; }
  .tw-transport-leg { padding: 12px; }
  .tw-hotel-photo { height: 130px; }
  .tw-explore-thumb { width: 64px; height: 64px; }
  .tw-explore-thumb-icon { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   VOICE MODULE — MODALS
   ═══════════════════════════════════════════════════════════════ */

/* ── Call Detail Modal ──────────────────────────────────── */
.vm-call-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: var(--border-thin);
  background: var(--paper-warm, #FAF8F5);
}
.vm-call-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vm-call-icon.inbound { background: rgba(76, 175, 80, 0.12); }
.vm-call-icon.outbound { background: rgba(33, 150, 243, 0.12); }
.vm-call-header-info { flex: 1; min-width: 0; }
.vm-call-header-info h2 {
  font-family: var(--serif, Georgia, serif);
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  color: var(--ink, #1A1D21);
}
.vm-call-header-info .vm-call-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3px;
  font-size: 13px;
  color: var(--ink-mid, #6B7280);
}
.vm-identity-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 9px 3px 7px;
  font-size: 11.5px;
  border-radius: 99px;
  font-family: var(--sans);
  cursor: help;
  border: 1px solid transparent;
  line-height: 1.4;
}
.vm-identity-badge .vm-identity-icon { font-size: 12px; }
.vm-identity-badge strong { font-weight: 600; }
.vm-identity-badge.tone-owner {
  background: rgba(46, 125, 50, 0.1);
  border-color: rgba(46, 125, 50, 0.25);
  color: #2e7d32;
}
.vm-identity-badge.tone-contact {
  background: rgba(33, 150, 243, 0.08);
  border-color: rgba(33, 150, 243, 0.22);
  color: #1565c0;
}
.vm-identity-badge.tone-ai-matched {
  background: rgba(124, 92, 191, 0.1);
  border-color: rgba(124, 92, 191, 0.25);
  color: #5e3aa3;
}
.vm-identity-badge.tone-unverified {
  /* Amber/warning tone — was grey-on-light-beige before, basically
     invisible on the modal's off-white background. Soft amber reads
     as "caution / unverified" without being alarming and stays legible. */
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: #92580B;
}
/* Live-call overlay header sits on warm-paper (#FAF8F5), NOT a dark
   gradient — earlier guesswork tuned these for dark and produced pale-
   text-on-pale-bg. Bring the tone overrides in line with the
   call-detail-modal palette: darker, saturated colors that read on
   a light background. */
.vm-live-header-info .vm-identity-badge.tone-owner {
  background: rgba(46, 125, 50, 0.12);
  border-color: rgba(46, 125, 50, 0.3);
  color: #1B5E20;
}
.vm-live-header-info .vm-identity-badge.tone-contact {
  background: rgba(33, 150, 243, 0.1);
  border-color: rgba(33, 150, 243, 0.28);
  color: #0D47A1;
}
.vm-live-header-info .vm-identity-badge.tone-ai-matched {
  background: rgba(124, 92, 191, 0.12);
  border-color: rgba(124, 92, 191, 0.3);
  color: #4A1F8E;
}
.vm-live-header-info .vm-identity-badge.tone-unverified {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.35);
  color: #7A4708;
}
.vm-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 20px;
}
.vm-status-badge.completed { background: rgba(76, 175, 80, 0.12); color: #2e7d32; }
.vm-status-badge.failed { background: rgba(244, 67, 54, 0.12); color: #c62828; }
.vm-status-badge.in_progress { background: rgba(255, 152, 0, 0.12); color: #e65100; }
.vm-status-badge.missed { background: rgba(158, 158, 158, 0.12); color: #616161; }

/* Info Grid (2-col cards) */
.vm-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.vm-info-card {
  background: var(--paper-warm, #FAF8F5);
  border-radius: 10px;
  padding: 0.75rem 1rem;
}
.vm-info-card-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint, #9CA3AF);
  margin-bottom: 4px;
}
.vm-info-card-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink, #1A1D21);
}

/* Summary / Transcript / Purpose sections */
.vm-section {
  margin-bottom: 1.25rem;
}
.vm-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint, #9CA3AF);
  margin-bottom: 0.5rem;
}
.vm-section-content {
  background: var(--paper-warm, #FAF8F5);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink, #1A1D21);
}
.vm-transcript-box {
  max-height: 280px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.7;
}
/* ── Chat-bubble transcript in call detail view ──────────── */
/* ── Call detail: tabs ────────────────────────────────────── */
.vm-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rule, #E5E0D5);
  margin: 1rem 0 0.75rem 0;
}
.vm-tab {
  appearance: none;
  background: none;
  border: 0;
  padding: 9px 14px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted, #6B6B6B);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  letter-spacing: 0.01em;
}
.vm-tab:hover { color: var(--ink, #1A1D21); }
.vm-tab.active {
  color: var(--ink, #1A1D21);
  font-weight: 600;
  border-bottom-color: var(--accent, #C9A227);
}
.vm-tab-panel { display: none; }
.vm-tab-panel.active { display: block; }

/* Tab badge count (e.g. "Audit 5") */
.vm-tab-count {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  background: var(--accent-bg);
  color: var(--accent-dark);
  padding: 1px 6px;
  border-radius: 99px;
  margin-left: 4px;
  vertical-align: 1px;
}
.vm-tab.active .vm-tab-count { background: rgba(255,255,255,0.18); color: var(--text-on-navy); }

/* Audit panel — list of AI actions during the call with optional undo */
.vm-audit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.vm-audit-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: background 0.15s, border-color 0.15s, opacity 0.18s;
}
.vm-audit-row:hover { border-color: var(--border-strong); }
.vm-audit-row.undone { opacity: 0.55; background: var(--surface-2); }
.vm-audit-row.failed {
  background: rgba(192, 57, 43, 0.05);
  border-color: rgba(192, 57, 43, 0.35);
}
.vm-audit-row.failed:hover { border-color: rgba(192, 57, 43, 0.55); }
.vm-audit-row.backfill { border-style: dashed; }
.vm-audit-icon.failed {
  background: rgba(192, 57, 43, 0.12);
}
.vm-audit-result.failed {
  color: #c0392b;
  font-style: normal;
  font-weight: 500;
}
.vm-audit-state-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 99px;
  letter-spacing: 0.02em;
  text-transform: none;
}
.vm-audit-state-badge.failed {
  background: rgba(192, 57, 43, 0.12);
  color: #c0392b;
  border: 1px solid rgba(192, 57, 43, 0.3);
}
.vm-audit-state-badge.backfill {
  background: var(--surface-2);
  color: var(--text-3);
  border: 1px dashed var(--border-strong);
}
.vm-audit-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--accent-bg);
  border-radius: 50%;
}
.vm-audit-row.undone .vm-audit-icon { background: var(--surface-2); }
.vm-audit-body { flex: 1; min-width: 0; }
.vm-audit-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}
.vm-audit-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.vm-audit-ts {
  font-size: 10px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.vm-audit-args {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 2px;
}
.vm-audit-args strong { color: var(--text); font-weight: 600; }
.vm-audit-result {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
  font-style: italic;
}
.vm-audit-undone-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  padding: 2px 8px;
  border-radius: 99px;
  margin-top: 6px;
}
.vm-audit-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.vm-audit-undo {
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}
.vm-audit-undo:hover {
  border-color: var(--error);
  color: var(--error);
  background: var(--error-bg);
}
.vm-audit-readonly {
  font-size: 14px;
  color: var(--text-3);
  cursor: help;
}
.vm-empty {
  font-size: 13px;
  color: var(--text-muted, #6B6B6B);
  font-style: italic;
  padding: 14px 0;
}
.vm-audio-none {
  font-size: 12.5px;
  color: var(--text-muted, #6B6B6B);
  font-style: italic;
  padding: 8px 12px;
  background: var(--surface, #F5F0E6);
  border-radius: 8px;
}
.vm-recording-sticky {
  position: sticky;
  top: 0;
  background: var(--bg, #FAFAF8);
  z-index: 2;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule, #E5E0D5);
}
/* Single shared recording bar above the tabs */
.vm-recording-bar {
  background: var(--surface, #F5F0E6);
  border: 1px solid var(--rule, #E5E0D5);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 1rem;
}
.vm-recording-bar audio {
  display: block;
  width: 100%;
  margin-top: 4px;
}
.vm-recording-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.vm-recording-bar-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #6B6B6B);
}
.vm-recording-hint {
  font-size: 11.5px;
  color: var(--text-muted, #6B6B6B);
  margin-top: 6px;
}
.vm-bubble.seekable { cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.vm-bubble.seekable:hover .vm-bubble-text { box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.vm-bubble-ts {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-muted, #6B6B6B);
  font-feature-settings: "tnum";
  margin-left: auto;
  opacity: 0.7;
}
.vm-bubble.assistant .vm-bubble-meta { width: 100%; }
.vm-bubble.customer .vm-bubble-meta { width: 100%; flex-direction: row-reverse; }
.vm-bubble.customer .vm-bubble-ts { margin-left: 0; margin-right: auto; }
.vm-bubble-playing .vm-bubble-text {
  box-shadow: 0 0 0 2px var(--accent, #C9A227), 0 2px 8px rgba(201, 162, 39, 0.25);
  background: #FDF6DD !important;
}
/* Pre-caller-ID hint when a typed number matches a local contact. */
.vm-phone-hero-hint.vm-precaller-hit {
  color: #2E7D32;
  font-weight: 500;
}
.vm-precaller-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #2E7D32;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
/* Section header with inline export buttons */
.vm-section-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.vm-section-label-row .vm-section-label { margin-bottom: 0; }
.vm-export-buttons {
  display: flex;
  gap: 4px;
}
.vm-export-buttons .btn-sm {
  font-size: 11.5px;
  padding: 4px 9px;
  line-height: 1.3;
  border-radius: 6px;
}
/* ── Call history (grouped, polished) ──────────────────────── */
.vm-history { margin-top: 1rem; }
.vm-history-group { margin-bottom: 1.4rem; }
.vm-history-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #6B6B6B);
  padding: 0 4px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vm-history-group-count {
  background: var(--surface, #F5F0E6);
  color: var(--text-muted, #6B6B6B);
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 600;
}
.vm-history-list {
  display: flex;
  flex-direction: column;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--rule, #E5E0D5);
  border-radius: 12px;
  overflow: hidden;
}
.vm-history-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--rule, #E5E0D5);
  transition: background 0.12s ease;
}
.vm-history-item:last-child { border-bottom: none; }
.vm-history-item:hover { background: rgba(201, 162, 39, 0.04); }
.vm-history-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--surface, #F5F0E6);
  color: var(--ink, #1A1D21);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.vm-history-avatar.has-name {
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.22), rgba(201, 162, 39, 0.06));
  color: #8B6F1A;
}
.vm-history-avatar.inbound {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.18), rgba(76, 175, 80, 0.04));
  color: #2E7D32;
}
.vm-history-avatar.outbound {
  background: linear-gradient(135deg, rgba(58, 99, 173, 0.18), rgba(58, 99, 173, 0.04));
  color: #1F4FA0;
}
.vm-history-avatar.missed {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.18), rgba(244, 67, 54, 0.04));
  color: #C62828;
}
.vm-history-avatar-initial {
  font-family: var(--font, 'Inter', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.vm-history-avatar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vm-history-avatar-dir {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg, #FAFAF8);
  box-sizing: content-box;
}
.vm-history-avatar-dir.in  { background: #4CAF50; }
.vm-history-avatar-dir.out { background: #3A63AD; }
/* Direction dot is redundant when the avatar itself is a phone-direction
   icon for unknown callers — but keep it visible for known contacts,
   where the avatar shows initials and direction would otherwise be unclear. */
.vm-history-avatar.inbound .vm-history-avatar-dir,
.vm-history-avatar.outbound .vm-history-avatar-dir,
.vm-history-avatar.missed .vm-history-avatar-dir {
  display: none;
}
.vm-history-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vm-history-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.vm-history-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink, #1A1D21);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.vm-history-status {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--rule, #E5E0D5);
  color: var(--ink, #1A1D21);
  flex-shrink: 0;
}
.vm-history-status-completed   { background: rgba(76, 175, 80, 0.15); color: #2E7D32; }
.vm-history-status-failed      { background: rgba(244, 67, 54, 0.15); color: #C62828; }
.vm-history-status-in_progress { background: rgba(255, 152, 0, 0.18); color: #C57A00; }
.vm-history-status-ringing     { background: rgba(255, 152, 0, 0.18); color: #C57A00; }
.vm-history-status-initiated   { background: rgba(255, 152, 0, 0.18); color: #C57A00; }
.vm-history-status-no_answer   { background: rgba(120, 120, 120, 0.18); color: #555; }
.vm-history-status-busy        { background: rgba(120, 120, 120, 0.18); color: #555; }
.vm-history-status-cancelled   { background: rgba(120, 120, 120, 0.18); color: #555; }
.vm-history-subtitle {
  font-size: 12.5px;
  color: var(--text-muted, #6B6B6B);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vm-history-phone {
  font-feature-settings: "tnum";
  flex-shrink: 0;
}
.vm-history-blurb {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
  opacity: 0.85;
}
.vm-history-meta {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-feature-settings: "tnum";
}
.vm-history-time {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink, #1A1D21);
}
.vm-history-stats {
  font-size: 11.5px;
  color: var(--text-muted, #6B6B6B);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.vm-history-dot { opacity: 0.5; }
.vm-history-line {
  margin-left: 6px;
  background: var(--surface, #F5F0E6);
  padding: 0 6px;
  border-radius: 4px;
  font-size: 10.5px;
}
@media (max-width: 600px) {
  .vm-history-item { grid-template-columns: 36px 1fr auto; gap: 9px; padding: 10px 11px; }
  .vm-history-avatar { width: 34px; height: 34px; font-size: 14px; }
  .vm-history-blurb { display: none; }
}
/* Action items + key points lists */
.vm-action-items,
.vm-key-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vm-action-items li,
.vm-key-points li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface, #F5F0E6);
  border: 1px solid var(--rule, #E5E0D5);
}
.vm-action-check {
  font-size: 14px;
  flex-shrink: 0;
  font-family: 'SF Mono', Menlo, monospace;
  color: var(--accent, #C9A227);
  font-weight: 700;
}
.vm-key-points li::before {
  content: '•';
  color: var(--accent, #C9A227);
  font-weight: 700;
  flex-shrink: 0;
}

.vm-transcript-bubbles {
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px;
}
.vm-bubble {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 80%;
}
.vm-bubble.assistant { align-self: flex-start; }
.vm-bubble.customer  { align-self: flex-end; align-items: flex-end; }
.vm-bubble-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted, #6B6B6B);
}
.vm-bubble-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface, #F5F0E6);
  border: 1px solid var(--rule, #E5E0D5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.vm-bubble.assistant .vm-bubble-avatar { background: rgba(201, 162, 39, 0.12); border-color: rgba(201, 162, 39, 0.35); }
.vm-bubble-text {
  font-size: 13.5px;
  line-height: 1.55;
  padding: 9px 13px;
  border-radius: 14px;
  border: 1px solid var(--rule, #E5E0D5);
  background: var(--surface, #FFFFFF);
  color: var(--ink, #1A1D21);
  word-wrap: break-word;
}
.vm-bubble.assistant .vm-bubble-text {
  background: #FAF6EC;
  border-color: rgba(201, 162, 39, 0.25);
  border-bottom-left-radius: 4px;
}
.vm-bubble.customer .vm-bubble-text {
  background: #EEF2FA;
  border-color: rgba(58, 99, 173, 0.22);
  border-bottom-right-radius: 4px;
}
.vm-transcript-system {
  font-size: 11.5px;
  color: var(--text-muted, #6B6B6B);
  font-style: italic;
  padding: 6px 10px;
  text-align: center;
  opacity: 0.7;
}
.vm-actions-box {
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}

/* Audio Player */
.vm-audio-wrap {
  margin-bottom: 1.25rem;
}
.vm-audio-wrap audio {
  width: 100%;
  border-radius: 8px;
  margin-top: 0.5rem;
}

/* ── Phone Line Modal ───────────────────────────────────── */
.vm-line-section {
  margin-bottom: 1.25rem;
}
.vm-line-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint, #9CA3AF);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule, #f0ece4);
}
.vm-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
}
.vm-toggle-row + .vm-toggle-row {
  border-top: 1px solid var(--rule, #f0ece4);
}
.vm-toggle-label {
  font-size: 14px;
  color: var(--ink, #1A1D21);
}
.vm-toggle-desc {
  font-size: 12px;
  color: var(--ink-mid, #6B7280);
  margin-top: 1px;
}
/* Toggle switch */
.vm-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.vm-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.vm-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--rule, #ddd);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.vm-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.vm-toggle input:checked + .vm-toggle-track {
  background: var(--accent, #B8965A);
}
.vm-toggle input:checked + .vm-toggle-track::after {
  transform: translateX(20px);
}

/* ── Outbound Call Modal ────────────────────────────────── */
.vm-call-form-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule, #f0ece4);
}
.vm-call-form-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(33, 150, 243, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vm-call-form-header p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-mid, #6B7280);
  line-height: 1.4;
}
.vm-phone-input-wrap {
  position: relative;
}
.vm-phone-input-wrap .vm-phone-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--ink-faint, #9CA3AF);
  pointer-events: none;
}

/* ── Voice modal field polish ───────────────────────────── */
.vm-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #1A1D21);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.vm-field-help {
  font-size: 11px;
  color: var(--ink-mid, #6B7280);
  margin-top: 6px;
  line-height: 1.45;
}
.vm-field-help code {
  background: var(--paper-warm, #F5F0E6);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink, #1A1D21);
}
.vm-validation-msg {
  font-size: 12px;
  color: #c62828;
  margin-top: 6px;
  line-height: 1.4;
  animation: vm-shake 0.2s ease;
}
@keyframes vm-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.vm-phone-input {
  font-size: 16px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.vm-phone-input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.vm-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 600px) {
  .vm-form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ── New Call Modal (redesigned) ─────────────────────────── */
.vm-call-modal { max-width: 480px; }
.vm-call-modal-header {
  border-bottom: 1px solid var(--rule, #f0ece4);
  padding: 1rem 1.5rem;
}
.vm-call-modal-body {
  padding: 1.5rem 1.5rem 1rem !important;
}
.vm-call-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--rule, #f0ece4);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.vm-call-intro {
  margin: 0 0 1.5rem;
  font-size: 13px;
  color: var(--ink-mid, #6B7280);
  text-align: center;
  line-height: 1.5;
}

/* Hero phone input */
.vm-phone-hero {
  margin-bottom: 1.5rem;
}
.vm-phone-hero-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint, #9CA3AF);
  margin-bottom: 10px;
  text-align: center;
}
.vm-phone-hero-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--paper-warm, #F5F0E6);
  border: 1.5px solid transparent;
  border-radius: 14px;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.vm-phone-hero-wrap:hover {
  background: var(--paper-deep, #EEE8DA);
}
.vm-phone-hero-wrap:focus-within {
  background: var(--surface);
  border-color: var(--accent, #B8965A);
  box-shadow: 0 0 0 4px rgba(184, 150, 90, 0.14);
}
.vm-phone-hero-cc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 12px;
  margin-right: 4px;
  border-right: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
  user-select: none;
}
.vm-phone-hero-cc-flag {
  font-size: 18px;
  line-height: 1;
}
.vm-phone-hero-cc-code {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-mid, #6B7280);
  font-variant-numeric: tabular-nums;
}
.vm-phone-hero-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 24px;
  font-weight: 500;
  color: var(--ink, #1A1D21);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  padding: 2px 0;
  font-family: inherit;
}
.vm-phone-hero-input::placeholder {
  color: var(--ink-faint, #9CA3AF);
  font-weight: 400;
}
.vm-phone-hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 8px;
  padding: 0 4px;
  min-height: 16px;
}
.vm-phone-hero-hint {
  font-size: 11px;
  color: var(--ink-faint, #9CA3AF);
  line-height: 1.4;
}
.vm-phone-hero-hint code {
  background: var(--paper-warm, #F5F0E6);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink, #1A1D21);
}
.vm-phone-hero-meta .vm-validation-msg {
  margin-top: 0;
  text-align: right;
  font-size: 11px;
}

/* ── New Call modal: smart "To:" contact picker ───────────── */
.oc-contact-dropdown {
  margin-top: 6px;
  border: 1px solid var(--rule, #E5E0D5);
  border-radius: 10px;
  background: var(--surface, #FFFFFF);
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.oc-contact-empty {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-muted, #6B6B6B);
  text-align: center;
}
.oc-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--rule, #E5E0D5);
}
.oc-contact-item:last-child { border-bottom: none; }
.oc-contact-item:hover { background: rgba(0,0,0,0.04); }
.oc-contact-avatar,
.oc-chip-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent, #C9A227);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.oc-contact-info { flex: 1; min-width: 0; }
.oc-contact-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #1A1D21);
}
.oc-contact-phone-preview {
  font-size: 12px;
  color: var(--text-muted, #6B6B6B);
  margin-top: 1px;
}
.oc-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface, #FFFFFF);
  border: 1.5px solid var(--rule, #E5E0D5);
  border-radius: 10px;
  margin-bottom: 8px;
}
.oc-chip-info { flex: 1; min-width: 0; }
.oc-chip-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1A1D21);
}
.oc-chip-phone {
  border: none;
  background: none;
  padding: 2px 0;
  font-size: 12.5px;
  color: var(--text-muted, #6B6B6B);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: default;
  margin-top: 2px;
}
.oc-chip-phone.has-options { cursor: pointer; }
.oc-chip-phone.has-options:hover { color: var(--ink, #1A1D21); }
.oc-chip-caret { font-size: 10px; opacity: 0.7; }
.oc-chip-no-phone {
  font-size: 12.5px;
  color: #C0392B;
}
.oc-chip-clear {
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted, #6B6B6B);
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
}
.oc-chip-clear:hover {
  background: rgba(0,0,0,0.06);
  color: var(--ink, #1A1D21);
}
.oc-phone-picker {
  margin: -4px 0 8px 0;
  border: 1px solid var(--rule, #E5E0D5);
  border-radius: 10px;
  background: var(--surface, #FFFFFF);
  overflow: hidden;
}
.oc-phone-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--rule, #E5E0D5);
}
.oc-phone-option:last-child { border-bottom: none; }
.oc-phone-option:hover { background: rgba(0,0,0,0.04); }
.oc-phone-option.active { background: rgba(201, 162, 39, 0.08); }
.oc-phone-option-icon { font-size: 15px; }
.oc-phone-option-info { flex: 1; }
.oc-phone-option-label {
  font-size: 11.5px;
  text-transform: capitalize;
  color: var(--text-muted, #6B6B6B);
  letter-spacing: 0.02em;
}
.oc-phone-option-number {
  font-size: 14px;
  color: var(--ink, #1A1D21);
}

/* Field block (label + textarea) */
.vm-field-block {
  margin-bottom: 1.25rem;
}
.vm-field-block-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1A1D21);
  margin-bottom: 8px;
  letter-spacing: 0.005em;
}
.vm-field-textarea {
  width: 100%;
  border: 1.5px solid var(--rule, #E5E0D5);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink, #1A1D21);
  background: var(--surface);
  resize: vertical;
  min-height: 84px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  font-family: inherit;
  box-sizing: border-box;
}
.vm-field-textarea:focus {
  outline: none;
  border-color: var(--accent, #B8965A);
  box-shadow: 0 0 0 4px rgba(184, 150, 90, 0.14);
}
.vm-field-textarea::placeholder {
  color: var(--ink-faint, #9CA3AF);
}

/* Compact line picker (pill style) */
.vm-line-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper-warm, #F5F0E6);
  border-radius: 10px;
  margin-bottom: 0.25rem;
}
.vm-line-picker-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mid, #6B7280);
  flex-shrink: 0;
}
.vm-line-picker-select {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1A1D21);
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
  min-width: 0;
  text-overflow: ellipsis;
}

/* Start Call button */
.vm-start-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

@media (max-width: 480px) {
  .vm-call-modal-body { padding: 1rem 1rem 0.75rem !important; }
  .vm-call-modal-header, .vm-call-modal-footer { padding: 0.75rem 1rem; }
  .vm-phone-hero-input { font-size: 22px; }
  .vm-phone-hero-wrap { padding: 12px 14px; gap: 8px; }
  .vm-phone-hero-cc { padding-right: 10px; }
}

/* ── Live Call View ──────────────────────────────────────── */
.vm-live-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 5vh;
  backdrop-filter: blur(4px);
}
.vm-live-panel {
  background: var(--surface, #fff);
  border-radius: 16px;
  width: calc(100% - 2rem);
  max-width: 640px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  overflow: hidden;
}
.vm-live-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--rule, #f0ece4);
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--paper-warm, #FAF8F5);
}
.vm-live-pulse {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #ef4444;
  animation: vm-pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes vm-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
.vm-live-header-info { flex: 1; min-width: 0; }
.vm-live-header-info h3 {
  font-family: var(--serif, Georgia, serif);
  font-size: 17px;
  font-weight: 500;
  margin: 0;
  color: var(--ink, #1A1D21);
}
.vm-live-header-meta {
  font-size: 12px;
  color: var(--ink-mid, #6B7280);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vm-live-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink, #1A1D21);
  font-size: 13px;
}
.vm-live-status-chip {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(239,68,68,0.12);
  color: #dc2626;
}
.vm-live-status-chip.ringing {
  background: rgba(251,191,36,0.15);
  color: #b45309;
}
/* SSE reconnect backoff (WS1.8) — brass/amber pulse while reconnecting */
.vm-live-status-chip.reconnecting {
  background: rgba(176,141,87,0.18);
  color: #8a6534;
  animation: vm-reconnect-pulse 1.2s ease-in-out infinite;
}
@keyframes vm-reconnect-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.vm-live-status-chip.disconnected {
  background: rgba(107,114,128,0.14);
  color: var(--text-2);
}
.vm-live-retry-btn {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 10px;
  border-radius: 10px;
  border: 1px solid rgba(176,141,87,0.45);
  background: rgba(176,141,87,0.12);
  color: #8a6534;
  cursor: pointer;
  line-height: 1.4;
}
.vm-live-retry-btn:hover { background: rgba(176,141,87,0.24); }
.vm-live-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--ink-faint, #9CA3AF);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.vm-live-close:hover { color: var(--ink, #1A1D21); }

/* Transcript area */
.vm-live-transcript {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 200px;
  max-height: 55vh;
}
.vm-live-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint, #9CA3AF);
  font-size: 14px;
  font-style: italic;
}
.vm-live-msg {
  max-width: 85%;
  padding: 0.6rem 1rem;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  animation: vm-msg-in 0.2s ease-out;
}
@keyframes vm-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.vm-live-msg.assistant {
  background: var(--paper-warm, #FAF8F5);
  color: var(--ink, #1A1D21);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.vm-live-msg.user, .vm-live-msg.customer {
  background: var(--accent, #B8965A);
  color: var(--text-inverse);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.vm-live-msg-role {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin-bottom: 2px;
}
.vm-live-msg.user .vm-live-msg-role,
.vm-live-msg.customer .vm-live-msg-role { opacity: 0.8; }
.vm-live-msg.partial { opacity: 0.6; }
.vm-live-tool {
  align-self: center;
  font-size: 12px;
  color: var(--ink-mid, #6B7280);
  background: var(--paper-warm, #FAF8F5);
  padding: 4px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vm-live-tool svg { flex-shrink: 0; }

/* Footer with actions */
.vm-live-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--rule, #f0ece4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.vm-live-purpose {
  font-size: 13px;
  color: var(--ink-mid, #6B7280);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ended state */
.vm-live-ended {
  padding: 2rem 1.5rem;
  text-align: center;
}
.vm-live-ended-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(76, 175, 80, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.vm-live-ended h3 {
  font-family: var(--serif, Georgia, serif);
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 0.5rem;
}
.vm-live-ended-summary {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mid, #6B7280);
  margin-bottom: 1.25rem;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .vm-info-grid { grid-template-columns: 1fr 1fr; }
  .vm-call-header { padding: 1rem; }
  .vm-call-header-info h2 { font-size: 17px; }
  .vm-live-panel { max-width: 100%; border-radius: 0; max-height: 100vh; }
  .vm-live-overlay { padding-top: 0; }
  .vm-live-msg { max-width: 90%; }
}

/* ══════════════════════════════════════════════════════════════
   SITE SETTINGS — User Management & Log Detail Views
   ══════════════════════════════════════════════════════════════ */

/* ── User Card List ─────────────────────────────────────── */
.um-list { display: flex; flex-direction: column; gap: 0; }
.um-user {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 0 1rem;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule, #f0ece4);
  cursor: pointer;
  transition: background 0.15s;
}
.um-user:hover { background: rgba(0,0,0,0.015); }
.um-user:last-child { border-bottom: none; }
.um-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface-2, #F3F2EE);
  color: var(--ink-light, #6B7280);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  position: relative;
  flex-shrink: 0;
}
.um-avatar-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg, #FAFAF8);
}
.um-avatar-dot.active { background: var(--success); }
.um-avatar-dot.inactive { background: var(--ink-faint, #9ca3af); opacity: 0.3; }
.um-info { min-width: 0; }
.um-name {
  font-family: var(--font); font-size: 14px; font-weight: 500;
  color: var(--ink, #1A1D21);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.um-email {
  font-family: var(--font); font-size: 12px;
  color: var(--ink-faint, #9ca3af);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.um-meta {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.um-date {
  font-family: var(--font); font-size: 11px;
  color: var(--ink-faint, #9ca3af);
  white-space: nowrap;
}
.um-actions {
  display: flex; gap: 4px; align-items: center;
}
.um-actions button {
  background: none;
  border: 1px solid var(--rule, #f0ece4);
  border-radius: 6px;
  padding: 5px 7px;
  cursor: pointer;
  color: var(--ink-mid, #6B7280);
  display: flex; align-items: center;
  transition: background 0.15s, border-color 0.15s;
}
.um-actions button:hover {
  background: var(--surface-2, #F3F2EE);
  border-color: var(--ink-faint, #9ca3af);
}
.um-actions button.danger { color: var(--error, #c0392b); }
.um-actions button.danger:hover { background: rgba(192,57,43,0.06); }
.um-actions button { position: relative; }
.um-actions button::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  /* Theme-aware so it stays readable in BOTH modes — the old
     --ink bg + --text-inverse text went dark-on-dark in dark mode. */
  background: var(--surface, #1f1f1f);
  color: var(--text, #eee);
  border: 1px solid var(--rule, #3a3a3a);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  font-size: 11px;
  font-family: var(--font);
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 10001;
}
.um-actions button:hover::after { opacity: 1; }
.um-expand {
  padding: 0 16px 16px;
  border-bottom: 1px solid var(--rule, #f0ece4);
  background: rgba(0,0,0,0.01);
}

/* ── Log Detail Overlay ───────────────────────────────── */
.log-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9800;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8vh;
  animation: fadeIn 0.15s ease-out;
}
.log-detail-panel {
  background: var(--bg, #FAFAF8);
  border-radius: 12px;
  width: 95%;
  max-width: 640px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.log-detail-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--rule, #f0ece4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.log-detail-header h3 {
  font-family: var(--serif, Georgia, serif);
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}
.log-detail-close {
  background: none; border: none;
  font-size: 20px; cursor: pointer;
  color: var(--ink-faint, #9ca3af);
  padding: 0 4px;
  line-height: 1;
}
.log-detail-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}
.log-detail-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 4px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule, #f0ece4);
  font-family: var(--font);
  font-size: 13px;
}
.log-detail-row:last-child { border-bottom: none; }
.log-detail-label {
  color: var(--ink-faint, #9ca3af);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  padding-top: 2px;
}
.log-detail-value {
  color: var(--ink, #1A1D21);
  word-break: break-word;
}
.log-detail-preview {
  margin-top: 1rem;
  border: 1px solid var(--rule, #f0ece4);
  border-radius: 8px;
  overflow: hidden;
}
.log-detail-preview-label {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint, #9ca3af);
  background: var(--surface-2, #F3F2EE);
  border-bottom: 1px solid var(--rule, #f0ece4);
}
.log-detail-preview iframe {
  width: 100%;
  height: 400px;
  border: none;
  background: var(--surface);
}
.log-detail-sms-body {
  padding: 16px;
  background: var(--surface-2, #F3F2EE);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink, #1A1D21);
  white-space: pre-wrap;
  margin-top: 0.5rem;
}

/* ── Log Table Row Hover ──────────────────────────────── */
.ss-log-row {
  border-bottom: 1px solid var(--paper-warm, #efe9e0);
  cursor: pointer;
  transition: background 0.12s;
}
.ss-log-row:hover { background: rgba(0,0,0,0.02); }

@media (max-width: 768px) {
  .um-user { grid-template-columns: 36px 1fr; gap: 0 10px; padding: 12px; }
  .um-meta { display: none; }
  .um-actions { display: none; }
  .log-detail-panel { max-width: 100%; border-radius: 0; max-height: 100vh; }
  .log-detail-overlay { padding-top: 0; }
}

/* ══════════════════════════════════════════════════════════
   PULSE TAB — Contact Detail (fu-* prefix)
   ══════════════════════════════════════════════════════════ */

/* ── Section Titles ── */
.fu-section-title {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-3, #A1A7B0);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font, 'Inter', sans-serif);
}
.fu-add-btn {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent, #B8965A);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}
.fu-add-btn:hover { background: var(--accent-bg, rgba(184,150,90,0.12)); }

/* ── Nudge / CRM Cadence Strip ── */
.fu-nudge-strip {
  background: linear-gradient(135deg, rgba(184,150,90,0.06), rgba(184,150,90,0.12));
  border: 1px solid rgba(184,150,90,0.2);
  border-radius: var(--radius-md, 10px);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.fu-nudge-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-bg, rgba(184,150,90,0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.fu-nudge-body { flex: 1; min-width: 0; }
.fu-nudge-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text, #1A1D21);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font, 'Inter', sans-serif);
}
.fu-nudge-sub {
  font-size: 0.78rem;
  color: var(--text-2, #6B7280);
  font-family: var(--font, 'Inter', sans-serif);
  line-height: 1.5;
}
.fu-nudge-action {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent, #B8965A);
  background: var(--surface);
  border: 1px solid var(--accent, #B8965A);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.fu-nudge-action:hover { background: var(--accent-bg, rgba(184,150,90,0.12)); }
.fu-nudge-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Quick Actions Bar ── */
.fu-quick-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.fu-quick-btn {
  flex: 1;
  min-width: 80px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border, rgba(0,0,0,0.07));
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--text, #1A1D21);
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s;
}
.fu-quick-btn:hover {
  border-color: var(--accent, #B8965A);
  background: var(--accent-bg, rgba(184,150,90,0.12));
}
.fu-quick-btn .fu-quick-icon { font-size: 1.2rem; }

/* ── Relationship Health Ring ── */
.fu-health-wrap {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border, rgba(0,0,0,0.07));
  border-radius: var(--radius-md, 10px);
  margin-bottom: 24px;
}
.fu-health-ring {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.fu-health-ring svg {
  width: 64px;
  height: 64px;
  transform: rotate(-90deg);
}
.fu-health-score {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text, #1A1D21);
  font-family: var(--font, 'Inter', sans-serif);
}
.fu-health-info { flex: 1; min-width: 0; }
.fu-health-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text, #1A1D21);
  margin-bottom: 6px;
  font-family: var(--font, 'Inter', sans-serif);
}
.fu-health-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.fu-health-tag {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font, 'Inter', sans-serif);
}

/* ── Last Interaction Recap ── */
.fu-recap-card {
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border, rgba(0,0,0,0.07));
  border-radius: var(--radius-md, 10px);
  padding: 16px;
  margin-bottom: 10px;
}
.fu-recap-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.82rem;
  color: var(--text-2, #6B7280);
  font-family: var(--font, 'Inter', sans-serif);
}
.fu-recap-header strong { color: var(--text, #1A1D21); font-weight: 600; }
.fu-recap-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fu-recap-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-2, #6B7280);
  padding: 6px 10px;
  background: var(--surface-2, #F3F2EE);
  border-radius: 6px;
  font-family: var(--font, 'Inter', sans-serif);
}
.fu-recap-item .save-as-seed {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--accent, #B8965A);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  font-weight: 500;
  white-space: nowrap;
  background: none;
  border: none;
  font-family: inherit;
}
.fu-recap-item:hover .save-as-seed { opacity: 1; }

/* ── Conversation Seed Cards ── */
.fu-seed-card {
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border, rgba(0,0,0,0.07));
  border-radius: var(--radius-md, 10px);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: border-color 0.15s;
}
.fu-seed-card:hover { border-color: var(--accent, #B8965A); }
.fu-seed-card.used {
  opacity: 0.5;
}
.fu-seed-card.used .fu-seed-text { text-decoration: line-through; }
.fu-seed-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.fu-seed-body { flex: 1; min-width: 0; }
.fu-seed-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text, #1A1D21);
  margin-bottom: 3px;
  font-family: var(--font, 'Inter', sans-serif);
}
.fu-seed-meta {
  font-size: 0.75rem;
  color: var(--text-3, #A1A7B0);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font, 'Inter', sans-serif);
}
.fu-seed-source {
  background: var(--surface-2, #F3F2EE);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
}
.fu-seed-priority {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.fu-seed-priority.high { background: var(--error-bg, rgba(255,59,48,0.1)); color: var(--error, #FF3B30); }
.fu-seed-priority.normal { background: var(--accent-bg, rgba(184,150,90,0.12)); color: var(--accent-dark, #8B7340); }
.fu-seed-priority.low { background: var(--surface-2, #F3F2EE); color: var(--text-3, #A1A7B0); }
.fu-seed-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}
.fu-seed-actions button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3, #A1A7B0);
  font-size: 0.85rem;
  transition: background 0.15s, color 0.15s;
}
.fu-seed-actions button:hover { background: var(--surface-2, #F3F2EE); color: var(--accent, #B8965A); }
.fu-seed-actions button.done-btn:hover { color: var(--success, #34C759); }

/* ── Opportunity Cards ── */
.fu-opp-card {
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border, rgba(0,0,0,0.07));
  border-radius: var(--radius-md, 10px);
  padding: 16px;
  margin-bottom: 10px;
  transition: border-color 0.15s;
}
.fu-opp-card:hover { border-color: var(--accent, #B8965A); }
.fu-opp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}
.fu-opp-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text, #1A1D21);
  font-family: var(--font, 'Inter', sans-serif);
}
.fu-opp-status {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.fu-opp-status.open { background: var(--success-bg, rgba(52,199,89,0.1)); color: var(--success, #34C759); }
.fu-opp-status.in_progress { background: rgba(56,138,221,0.12); color: #378ADD; }
.fu-opp-status.acted { background: var(--accent-bg, rgba(184,150,90,0.12)); color: var(--accent-dark, #8B7340); }
.fu-opp-status.expired { background: var(--surface-2, #F3F2EE); color: var(--text-3, #A1A7B0); }
.fu-opp-status.declined { background: var(--error-bg, rgba(255,59,48,0.1)); color: var(--error, #FF3B30); }
.fu-opp-desc {
  font-size: 0.82rem;
  color: var(--text-2, #6B7280);
  margin-bottom: 8px;
  font-family: var(--font, 'Inter', sans-serif);
  line-height: 1.5;
}
.fu-opp-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--text-3, #A1A7B0);
  flex-wrap: wrap;
  font-family: var(--font, 'Inter', sans-serif);
}
.fu-opp-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent, #B8965A);
  font-weight: 500;
  cursor: pointer;
  font-size: 0.78rem;
}
.fu-opp-link:hover { text-decoration: underline; }
.fu-opp-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.fu-opp-actions button {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-3, #A1A7B0);
  font-size: 0.8rem;
  transition: background 0.15s, color 0.15s;
}
.fu-opp-actions button:hover { background: var(--surface-2, #F3F2EE); color: var(--accent, #B8965A); }

/* ── Life Event Cards ── */
.fu-event-card {
  background: var(--surface, #FFFFFF);
  border-left: 3px solid var(--warning, #FF9500);
  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
  padding: 12px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.12s;
}
.fu-event-card:hover { background: rgba(0,0,0,0.015); }
.fu-event-date {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--warning, #FF9500);
  text-transform: uppercase;
  min-width: 48px;
  text-align: center;
  font-family: var(--font, 'Inter', sans-serif);
}
.fu-event-date .day { font-size: 1.2rem; display: block; line-height: 1; }
.fu-event-text {
  font-size: 0.85rem;
  color: var(--text, #1A1D21);
  font-weight: 500;
  font-family: var(--font, 'Inter', sans-serif);
}
.fu-event-note {
  font-size: 0.75rem;
  color: var(--text-3, #A1A7B0);
  font-family: var(--font, 'Inter', sans-serif);
}
.fu-event-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.fu-event-actions button {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-3, #A1A7B0);
  font-size: 0.75rem;
  transition: background 0.15s, color 0.15s;
}
.fu-event-actions button:hover { background: var(--surface-2, #F3F2EE); color: var(--accent, #B8965A); }

/* ── AI Nudge Card ── */
.fu-ai-nudge {
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border, rgba(0,0,0,0.07));
  border-radius: var(--radius-md, 10px);
  padding: 16px;
  margin-bottom: 16px;
}
.fu-ai-nudge-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.fu-ai-nudge-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.fu-ai-nudge-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text, #1A1D21);
  font-family: var(--font, 'Inter', sans-serif);
}
.fu-ai-nudge-type {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-left: 8px;
}
.fu-ai-nudge-body {
  font-size: 0.82rem;
  color: var(--text-2, #6B7280);
  margin-bottom: 12px;
  line-height: 1.6;
  font-family: var(--font, 'Inter', sans-serif);
}
.fu-ai-nudge-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.fu-ai-nudge-actions .fu-nudge-action { font-size: 0.78rem; padding: 5px 12px; }
.fu-ai-nudge-dismiss {
  font-size: 0.75rem;
  color: var(--text-3, #A1A7B0);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 8px;
}
.fu-ai-nudge-dismiss:hover { color: var(--text-2, #6B7280); }

/* ── Pulse Modal Checkbox Row ── */
.pulse-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 4px;
  background: var(--surface-2, #F3F2EE);
  border: 1px solid var(--rule);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font, 'Inter', sans-serif);
  transition: background 0.15s, border-color 0.15s;
}
.pulse-checkbox-row:hover { background: var(--surface); border-color: var(--brass); }
.pulse-checkbox-row input[type="checkbox"] { accent-color: var(--brass, #9A7D4A); width: 16px; height: 16px; margin: 0; cursor: pointer; }

/* ── Pulse Empty States ── */
.fu-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-3, #A1A7B0);
  font-size: 0.82rem;
  font-family: var(--font, 'Inter', sans-serif);
  font-style: italic;
}

/* ── Text Invite Modal ── */
.fu-text-preview {
  background: var(--surface-2, #F3F2EE);
  border-radius: var(--radius-md, 10px);
  padding: 14px 16px;
  font-size: 0.85rem;
  color: var(--text, #1A1D21);
  font-family: var(--font, 'Inter', sans-serif);
  line-height: 1.6;
  margin-bottom: 12px;
  border: 1px dashed var(--border, rgba(0,0,0,0.07));
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .fu-nudge-strip { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .fu-nudge-action { align-self: stretch; text-align: center; }
  .fu-quick-actions { gap: 6px; }
  .fu-quick-btn { min-width: 60px; padding: 10px 6px; font-size: 0.72rem; }
  .fu-health-wrap { flex-direction: column; text-align: center; }
  .fu-seed-card { flex-direction: column; gap: 8px; }
  .fu-seed-actions { align-self: flex-end; }
  .fu-opp-header { flex-direction: column; align-items: flex-start; }
  .fu-event-card { flex-wrap: wrap; }
}

/* ── Work tab: expandable role cards ─────────────────────────── */
.work-roles-list { display: flex; flex-direction: column; gap: 8px; }
.work-roles-empty {
  font-size: 13px;
  color: var(--ink-light, #8a8480);
  font-style: italic;
  padding: 14px 4px;
}
.work-role-card {
  border: var(--border-thin, 1px solid rgba(0,0,0,0.08));
  border-radius: var(--radius-md, 8px);
  background: var(--paper-warm, #F8F5EF);
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
.work-role-card.open { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.work-role-head {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}
.work-role-head:hover { background: var(--paper, #FAFAF8); }
.work-role-summary { flex: 1; min-width: 0; }
.work-role-summary-text {
  font-size: 14px; font-weight: 500;
  color: var(--ink, #1A1D21);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.work-role-badges {
  display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap;
}
.work-role-badge {
  display: inline-block;
  font-size: 10px; font-weight: 500;
  padding: 1px 7px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.work-role-badge-current { background: rgba(58,134,90,0.14); color: #2d6c47; }
.work-role-badge-primary { background: rgba(184,156,100,0.22); color: #8a6f2c; }
.work-role-badge-type    { background: rgba(0,0,0,0.06);    color: var(--ink-mid, #5a5550); }
.work-role-head-actions { display: flex; gap: 2px; flex-shrink: 0; }
.work-role-toggle-btn, .work-role-delete-btn {
  background: transparent; border: 0; cursor: pointer;
  padding: 6px; border-radius: 4px;
  color: var(--ink-mid, #5a5550);
  display: flex; align-items: center; justify-content: center;
}
.work-role-toggle-btn:hover { background: rgba(0,0,0,0.05); color: var(--ink, #1A1D21); }
.work-role-delete-btn:hover { background: rgba(196,67,67,0.12); color: var(--error, #c44343); }
.work-role-toggle-btn svg { transition: transform 0.18s ease; }
.work-role-toggle-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.work-role-body {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--rule, rgba(0,0,0,0.06));
  background: var(--paper, #FAFAF8);
}

/* ═══════════════════════════════════════════════════════════════
   CALENDAR — MOBILE (iPhone-Apple-Calendar-quality)
   Scoped to max-width: 768px via media query + body.cal-mobile
   ═══════════════════════════════════════════════════════════════ */

/* Mobile-only containers are hidden by default; revealed inside media query */
#cmm-root, #cmi-root, .cmd-header { display: none; }

@media (max-width: 768px) {
  body.cal-mobile { --ios-red: #FF3B30; --ios-blue: #007AFF; --ios-green: #34C759; --ios-orange: #FF9500; }

  /* Hide desktop chrome on mobile calendar (CSS-only — no FOUC) */
  body.cal-mobile #page-calendar .page-header,
  body.cal-mobile #page-calendar .cal-controls,
  body.cal-mobile #page-calendar #cal-layers-bar,
  body.cal-mobile #page-calendar .page-search-bar { display: none !important; }

  /* Top padding clears the segmented switcher; bottom clears app
     mobile-tab-bar. Negative left/right margin cancels the parent
     .main-content's 1.25rem padding so calendar views go edge-to-edge
     (matches the Today / Inbox / Finance mobile treatment). */
  body.cal-mobile #page-calendar {
    /* Include safe-area-inset-top so the segmented bar (which itself is
       positioned with env(safe-area-inset-top)) doesn't overlap content
       on notched iPhones. */
    padding-top: calc(56px + env(safe-area-inset-top, 0)) !important;
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)) !important;
    margin-left: calc(-1.25rem + 4px) !important;
    margin-right: calc(-1.25rem + 4px) !important;
  }

  /* Hide desktop month grid on mobile (mobile uses #cmm-root sibling) */
  body.cal-mobile #cal-view-month .cal-grid { display: none !important; }
  body.cal-mobile #cmm-root { display: block; }
  /* Show inbox mobile container only on mobile */
  body.cal-mobile #cmi-root { display: block; }
  /* Show sticky day header only on mobile */
  body.cal-mobile .cmd-header { display: block; }

  /* ── TOP VIEW SWITCHER (segmented pill) ──────────────────── */
  /* Sits just below the app's mobile-nav-bar (52px + safe-area). */
  .cm-tabbar {
    position: fixed;
    left: 8px; right: 8px;
    top: calc(52px + env(safe-area-inset-top, 0) + 8px);
    background: rgba(118, 118, 128, 0.12);
    border-radius: 9px;
    padding: 2px;
    display: none;
    z-index: 1100;
    gap: 0;
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
  }
  body.cal-mobile .cm-tabbar.cm-tabbar-visible { display: flex; }
  .cm-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--label-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    border-radius: 7px;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    min-height: 30px;
  }
  .cm-tab svg { display: none; } /* icons hidden in pill mode; labels only */
  .cm-tab-active {
    color: var(--text);
    background: var(--bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 3px 8px rgba(0, 0, 0, 0.06);
    font-weight: 600;
  }
  .cm-tab:active { opacity: 0.7; }

  /* Gear icon at the end of the segmented pill — opens calendar settings */
  .cm-settings-btn {
    flex: 0 0 auto;
    width: 34px;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--text-2);
    border-radius: 7px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
  }
  .cm-settings-btn:active { background: rgba(0, 0, 0, 0.06); color: var(--error); }

  /* ── MONTH VIEW (mobile rebuild) ───────────────────────────── */
  .cmm-header {
    padding: 14px 18px 6px;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .cmm-month {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--error);
    line-height: 1;
  }
  .cmm-year {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink, #1B1B1A);
    opacity: 0.65;
    line-height: 1;
  }
  .cmm-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 10px 8px 6px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #8e8e93;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .cmm-weekdays div { text-align: center; }
  .cmm-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 4px 4px 8px;
    gap: 0;
  }
  .cmm-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    border-radius: 0;
    background: transparent !important;
    border: 0 !important;
  }
  .cmm-day-num {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink, #1B1B1A);
    letter-spacing: -0.01em;
    border-radius: 50%;
    transition: background 0.15s;
  }
  .cmm-day-faded .cmm-day-num { color: #c7c7cc; }
  .cmm-day-today .cmm-day-num {
    background: var(--error);
    color: var(--text-inverse);
    font-weight: 600;
  }
  .cmm-day-selected .cmm-day-num {
    border: 1.5px solid var(--error);
    color: var(--error);
    font-weight: 600;
  }
  .cmm-day:active .cmm-day-num {
    background: rgba(0, 0, 0, 0.06);
  }
  .cmm-day-today:active .cmm-day-num,
  .cmm-day-selected:active .cmm-day-num { background: var(--error); color: var(--text-inverse); }
  .cmm-day-dots {
    display: flex;
    gap: 3px;
    margin-top: 3px;
    height: 5px;
  }
  .cmm-day-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    display: inline-block;
  }

  /* Tray (selected day events) */
  .cmm-tray {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--paper, #FAFAF8);
    margin: 8px -16px 0;
    padding: 12px 16px 4px;
  }
  .cmm-tray-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
  }
  .cmm-tray-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #1B1B1A);
    letter-spacing: -0.01em;
  }
  .cmm-tray-add {
    background: rgba(255, 59, 48, 0.12);
    color: var(--error);
    border: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .cmm-tray-add:active { background: rgba(255, 59, 48, 0.24); }
  .cmm-tray-list {
    display: flex;
    flex-direction: column;
  }
  .cmm-tray-row {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .cmm-tray-row:first-child { border-top: 0; }
  .cmm-tray-row:active { background: rgba(0, 0, 0, 0.04); }
  .cmm-tray-bar {
    width: 3px;
    min-height: 30px;
    border-radius: 2px;
    flex-shrink: 0;
    margin-top: 2px;
  }
  .cmm-tray-body { flex: 1; min-width: 0; }
  .cmm-tray-time {
    font-size: 11px;
    color: var(--ink-light, #6B6A66);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
  }
  .cmm-tray-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink, #1B1B1A);
    line-height: 1.3;
  }
  .cmm-tray-loc {
    font-size: 12px;
    color: var(--ink-light, #6B6A66);
    margin-top: 2px;
  }
  .cmm-tray-empty {
    text-align: center;
    color: var(--ink-light, #6B6A66);
    font-size: 13px;
    padding: 18px 0;
  }

  /* ── DAY VIEW (mobile) ─────────────────────────────────────── */
  .cmd-header {
    padding: 14px 18px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    /* Sticky offset must clear the fixed cm-tabbar: mobile-nav-bar (52px +
       safe-area) + 8px gap above the bar + the bar's ~36px height. */
    position: sticky;
    top: calc(52px + env(safe-area-inset-top, 0) + 8px + 36px);
    z-index: 50;
  }
  .cmd-sub {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-light, #6B6A66);
    font-weight: 600;
  }
  .cmd-sub-today { color: var(--error); }
  .cmd-big {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink, #1B1B1A);
    margin-top: 2px;
    line-height: 1.05;
  }

  /* Day timeline: hide desktop work-mode header strip and reduce hour height */
  body.cal-mobile #cal-view-day > div:first-of-type { display: block; }
  body.cal-mobile .day-timeline { border: 0 !important; border-radius: 0 !important; }
  body.cal-mobile .day-hour-row { min-height: 56px; }
  body.cal-mobile .day-hour-label {
    font-size: 11px;
    padding: 6px 8px 0 12px;
    background: transparent;
    border-right: 0;
    color: #8e8e93;
  }
  body.cal-mobile .day-hour-content {
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    padding: 4px 12px 4px 8px;
  }
  body.cal-mobile .day-event-block {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
  }
  body.cal-mobile .day-event-block .btn-icon { display: none; } /* hide trash/invite per-event on mobile */

  /* ── Day-view title row + Today button ───────────────────────── */
  .cmd-titlerow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .cmd-today-btn {
    background: transparent;
    border: 0;
    color: var(--error);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 10px;
    -webkit-tap-highlight-color: transparent;
  }
  .cmd-today-btn:active { opacity: 0.55; }

  /* ── 7-day strip below the date header ───────────────────────── */
  .cmd-daystrip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-top: 10px;
  }
  .cmd-dstrip-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 0 4px;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .cmd-dstrip-letter {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8e8e93;
  }
  .cmd-dstrip-num {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink, #1B1B1A);
    border-radius: 50%;
    letter-spacing: -0.01em;
  }
  .cmd-dstrip-today .cmd-dstrip-letter { color: var(--error); }
  .cmd-dstrip-selected .cmd-dstrip-num {
    background: var(--error);
    color: var(--text-inverse);
    font-weight: 600;
  }
  .cmd-dstrip-today:not(.cmd-dstrip-selected) .cmd-dstrip-num {
    border: 1.5px solid var(--error);
    color: var(--error);
    font-weight: 600;
  }
  .cmd-dstrip-day:active .cmd-dstrip-num {
    background: rgba(0, 0, 0, 0.06);
  }
  .cmd-dstrip-today:active .cmd-dstrip-num,
  .cmd-dstrip-selected:active .cmd-dstrip-num { background: var(--error); color: var(--text-inverse); }
}

/* ── Current-time red line (mobile + desktop) ────────────────── */
.cmd-now-line {
  position: absolute;
  left: 38px;
  right: 0;
  height: 1.5px;
  background: var(--error);
  z-index: 4;
  pointer-events: none;
}
.cmd-now-line::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--error);
  box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.18);
}
.cmd-now-label {
  position: absolute;
  left: -42px;
  top: -8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--error);
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
}
/* Desktop day-view uses a wider gutter (70px) than mobile (38px) */
@media (min-width: 769px) {
  .cmd-now-line { left: 70px; }
}

@media (max-width: 768px) {
  /* ── EVENT MODAL → BOTTOM SHEET (mobile) ───────────────────── */
  .modal-overlay.cm-sheet-overlay {
    align-items: flex-end !important;
    background: rgba(0, 0, 0, 0.45) !important;
  }
  .modal.cm-sheet {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 22px 22px 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    animation: cm-sheet-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.22) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  @keyframes cm-sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .cm-sheet-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.18);
    margin: 8px auto 4px;
    flex-shrink: 0;
  }
  .modal.cm-sheet .modal-header {
    padding: 6px 20px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
  }
  .modal.cm-sheet .modal-header h2 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .modal.cm-sheet .modal-body {
    padding: 16px 20px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }
  /* Ensure all inputs in sheet are >= 16px to prevent iOS auto-zoom */
  .modal.cm-sheet input,
  .modal.cm-sheet select,
  .modal.cm-sheet textarea { font-size: 16px !important; }
  .modal.cm-sheet .form-actions {
    position: sticky;
    bottom: 0;
    background: var(--paper, #FAFAF8);
    padding-top: 12px;
    margin: 0 -20px -24px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  /* ── EVENT MODAL — iOS-style grouped form ────────────────────
     Scoped to the event sheet specifically (NOT the settings sheet,
     which has its own grouped styling via .cm-settings-overlay). */
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .modal.cm-sheet .modal-body {
    background: var(--bg);
    padding: 12px 12px 24px !important;
  }

  /* Title input — borderless hero card on top, no visible label */
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) #f-ev-title {
    background: var(--surface) !important;
    border: 0 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    letter-spacing: -0.01em !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .form-group:first-of-type .form-label[for],
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .modal-body > .form-group:first-of-type > .form-label {
    display: none !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .modal-body > .form-group:first-of-type {
    margin: 0 0 10px !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  /* Multi-field rows (date+time pairs, etc.) become a single iOS-style
     grouped card with hairline dividers between items. */
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .form-row {
    background: var(--surface) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .form-row .form-group:not([style*="display:none"]):not([style*="display: none"]) {
    flex: 1 !important;
    padding: 11px 16px !important;
    margin: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-width: 0;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .form-row .form-group:first-child {
    border-top: 0 !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .form-row .form-label {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--ink, #1B1B1A) !important;
    margin: 0 !important;
    flex-shrink: 0;
    text-transform: none;
    letter-spacing: 0;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .form-row .form-input,
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .form-row .form-select {
    flex: 1 !important;
    text-align: right !important;
    background: transparent !important;
    border: 0 !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    color: var(--ink, #1B1B1A) !important;
    min-width: 0;
    max-width: 65%;
  }
  /* Starts/Ends rows use an .ev-datetime-pair wrapper that holds the
     date + time inputs side-by-side on the right side of the form-group */
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-datetime-pair {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    max-width: 70% !important;
    min-width: 0 !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-datetime-pair .ev-date,
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-datetime-pair .ev-time {
    background: rgba(118, 118, 128, 0.12) !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 5px 9px !important;
    color: var(--ink, #1B1B1A) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-datetime-pair .ev-date {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 110px !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-datetime-pair .ev-time {
    flex: 0 0 auto !important;
    width: 92px !important;
    max-width: 92px !important;
    min-width: 92px !important;
    display: inline-block !important;
  }
  /* Small duration line under the End row */
  .ev-duration-line {
    font-size: 12px;
    color: var(--ink-light, #6B6A66);
    padding: 8px 16px 4px;
    text-align: right;
    background: var(--surface);
    border-radius: 0 0 12px 12px;
    margin-top: -10px;
    margin-bottom: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

  /* Standalone .form-group children of the body become rounded cards;
     each with a small-caps label above and a borderless input below. */
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .modal-body > .form-group {
    background: var(--surface) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin: 0 0 10px !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .modal-body > .form-group > .form-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--ink-light, #6B6A66) !important;
    display: block !important;
    margin: 0 0 4px !important;
  }
  /* Toggle rows (e.g. All-day) keep an inline label on the left */
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .modal-body > .form-group[style*="display:flex"] {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 13px 16px !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .modal-body > .form-group[style*="display:flex"] .form-label {
    text-transform: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: var(--ink, #1B1B1A) !important;
    margin: 0 !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .modal-body > .form-group .form-input,
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .modal-body > .form-group .form-select,
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .modal-body > .form-group .form-textarea {
    background: transparent !important;
    border: 0 !important;
    padding: 4px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: var(--ink, #1B1B1A) !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .modal-body > .form-group .form-textarea {
    min-height: 70px !important;
    resize: vertical !important;
  }

  /* Form action buttons — iOS pill style at the bottom */
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .form-actions {
    background: var(--bg) !important;
    padding-top: 12px !important;
    margin: 12px -12px -24px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
    display: flex !important;
    gap: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .form-actions .btn {
    flex: 1;
    border-radius: 12px !important;
    padding: 13px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border: 0 !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .form-actions .btn-brass {
    background: var(--error) !important;
    color: var(--text-inverse) !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .form-actions .btn-ghost {
    background: rgba(0, 0, 0, 0.06) !important;
    color: var(--ink, #1B1B1A) !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .form-actions .btn-danger {
    background: rgba(255, 59, 48, 0.12) !important;
    color: var(--error) !important;
  }

  /* ── Event modal action bar (mobile) — single row, in-flow ───
     All buttons on a single horizontal row at the end of the form.
     Save = primary, flex-grows to fill leftover space.
     Cancel = compact text. Delete / Duplicate / Template / iCal /
     Invite = small icon squares (label hidden, ::after icon shown).
     Static positioning so the bar sits below the form and never
     covers fields. Uses `data-act` attributes from the modal markup. */
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 6px !important;
    margin: 16px 0 calc(8px + env(safe-area-inset-bottom, 0)) !important;
    padding: 14px 4px 4px !important;
    background: transparent !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions .btn {
    flex: 0 0 auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 38px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
  /* Save = primary, fills remaining width */
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions .ev-act-save {
    order: 99;
    flex: 1 1 auto !important;
    background: var(--brass, #B8965A) !important;
    color: var(--text-inverse) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 10px 14px !important;
    min-width: 88px;
  }
  /* Cancel = compact text on the left */
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions .ev-act-cancel {
    order: 1;
    background: rgba(0, 0, 0, 0.06) !important;
    color: var(--ink, #1B1B1A) !important;
    padding: 10px 14px !important;
  }
  /* Icon-only secondary actions — text hidden, ::after renders the icon */
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions .ev-act-delete,
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions .ev-act-secondary,
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions .ev-act-invite {
    width: 38px;
    min-width: 38px;
    padding: 0 !important;
    text-align: center;
    font-size: 0 !important;
    position: relative;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions .ev-act-delete::after,
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions .ev-act-secondary::after,
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions .ev-act-invite::after {
    font-size: 16px;
    line-height: 38px;
    display: block;
    text-align: center;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions [data-act="delete"] {
    order: 2;
    background: rgba(255, 59, 48, 0.12) !important;
    color: var(--error) !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions [data-act="delete"]::after { content: "🗑"; }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions [data-act="duplicate"] {
    order: 3;
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--ink-light, #6B6A66) !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions [data-act="duplicate"]::after { content: "⧉"; }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions [data-act="template"] {
    order: 4;
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--ink-light, #6B6A66) !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions [data-act="template"]::after { content: "★"; font-size: 17px; }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions [data-act="ical"] {
    order: 5;
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--ink-light, #6B6A66) !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions [data-act="ical"]::after { content: "📥"; font-size: 15px; }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions [data-act="invite"] {
    order: 6;
    background: rgba(184, 150, 90, 0.18) !important;
    color: var(--brass-dark, #8B7340) !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions [data-act="invite"]::after { content: "✉"; font-size: 16px; }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-form-actions .btn:active { opacity: 0.7; }

  /* Place autocomplete + invitee dropdowns: keep them aligned to the
     parent .form-group card */
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) #place-autocomplete,
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) #addr-autocomplete-event,
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) #contact-invitee-picker {
    border-radius: 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  /* ── INBOX VIEW (mobile) — replaces Upcoming ──────────────── */
  body.cal-mobile #cal-view-upcoming .section-card { display: none !important; }
  body.cal-mobile #cal-view-upcoming { padding: 0 !important; background: var(--paper, #FAFAF8); }
  .cmi-head {
    padding: 16px 18px 10px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .cmi-h {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink, #1B1B1A);
    line-height: 1.05;
  }
  .cmi-s {
    font-size: 12px;
    color: var(--ink-light, #6B6A66);
    margin-top: 3px;
  }
  .cmi-list { padding-bottom: 8px; }
  .cmi-section {
    padding: 16px 18px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-light, #6B6A66);
    font-weight: 600;
  }
  .cmi-swipe {
    position: relative;
    overflow: hidden;
    background: var(--bg);
    isolation: isolate;  /* contain stacking */
  }
  .cmi-row {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    padding: 12px 16px;
    gap: 10px;
    align-items: center;
    background: var(--bg);  /* fully opaque — must occlude actions behind it */
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    transform: translateX(0);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 2;
    will-change: transform;
  }
  .cmi-row:active { background: #F3F1EA; }
  .cmi-when {
    text-align: right;
    line-height: 1.15;
    color: var(--ink-light, #6B6A66);
  }
  .cmi-when b {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink, #1B1B1A);
    letter-spacing: -0.01em;
  }
  .cmi-when span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .cmi-body {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
  }
  .cmi-bar {
    width: 3px;
    align-self: stretch;
    border-radius: 2px;
    flex-shrink: 0;
    min-height: 30px;
  }
  .cmi-text { min-width: 0; flex: 1; }
  .cmi-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink, #1B1B1A);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cmi-loc {
    font-size: 12px;
    color: var(--ink-light, #6B6A66);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cmi-chev {
    color: #c7c7cc;
    font-size: 18px;
    font-weight: 400;
  }
  .cmi-actions {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    z-index: 0; /* behind the row; row slides left to reveal */
  }
  .cmi-act {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: var(--text-inverse);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .cmi-rsch { background: var(--warning); min-width: 110px; }
  .cmi-cnc  { background: var(--error); min-width: 90px; }
  .cmi-empty {
    text-align: center;
    color: var(--ink-light, #6B6A66);
    padding: 40px 16px;
    font-size: 14px;
  }

  /* ── YEAR VIEW (mobile densify) ────────────────────────────── */
  body.cal-mobile .year-grid-container {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    align-content: start;
    padding: 8px 12px 16px !important;
  }
  body.cal-mobile .year-month-card {
    padding: 6px 4px !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
  }
  body.cal-mobile .year-month-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--ink, #1B1B1A) !important;
    margin-bottom: 4px !important;
    letter-spacing: -0.01em;
  }
  body.cal-mobile .year-month-current .year-month-title { color: var(--error) !important; }
  body.cal-mobile .year-mini-grid {
    gap: 0 !important;
    font-size: 9px !important;
  }
  body.cal-mobile .year-mini-header { display: none !important; }
  body.cal-mobile .year-mini-day {
    aspect-ratio: 1;
    font-size: 9px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-mid, #5a5550) !important;
  }
  body.cal-mobile .year-mini-day.year-today {
    background: var(--error) !important;
    color: var(--text-inverse) !important;
    border-radius: 50%;
    font-weight: 700 !important;
  }
  body.cal-mobile .year-nav-strip { display: none !important; }

  /* ── DRAG-TO-RESCHEDULE (touch) ────────────────────────────── */
  .cm-drag-ghost {
    transition: none !important;
    pointer-events: none;
    will-change: transform;
  }
  .cm-drag-indicator {
    position: fixed;
    left: 38px;
    right: 0;
    height: 0;
    border-top: 1.5px dashed var(--error);
    z-index: 9499;
    pointer-events: none;
    display: none;
  }
  .cm-drag-indicator-time {
    position: absolute;
    left: -36px;
    top: -10px;
    background: var(--error);
    color: var(--text-inverse);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: -0.01em;
  }

  /* Tap highlight cleanup for the calendar */
  body.cal-mobile #page-calendar * { -webkit-tap-highlight-color: rgba(255, 59, 48, 0.08); }

  /* Layer chip & old header stay hidden — ensure no flash on view switch */
  body.cal-mobile #page-calendar .view-switcher { display: none; }
  body.cal-mobile #page-calendar .page-header > div:last-child { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   TODAY — MOBILE (iPhone-Apple card-stack layout)
   Mirrors the calendar mobile design language: off-white grouped
   background, white card surfaces, big day header, slim labels.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Hide desktop Today layout — mobile renders into .tdm-root */
  body #page-today .today-columns { display: none !important; }

  .tdm-root {
    /* Cancel the parent .main-content's 1.25rem (20px) horizontal padding
       so cards reach the actual screen edges. */
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 8px 4px 24px;
    background: var(--bg);
  }

  /* ── Header ────────────────────────────────────────────────── */
  .tdm-header {
    padding: 6px 16px 14px;
  }
  .tdm-greet {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-light, #6B6A66);
    letter-spacing: -0.005em;
    margin-bottom: 6px;
  }
  .tdm-day-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
  }
  .tdm-day-text { min-width: 0; }
  .tdm-sub {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--error);
    line-height: 1;
    margin-bottom: 2px;
  }
  .tdm-big {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.028em;
    color: var(--ink, #1B1B1A);
    line-height: 1.02;
  }
  .tdm-weather {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(118, 118, 128, 0.12);
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #1B1B1A);
    letter-spacing: -0.005em;
  }
  .tdm-weather-icon { font-size: 15px; }
  .tdm-review-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
  }
  /* Any non-button children (streak pill, "✓ done" pill) take their own row */
  .tdm-review-row > span { flex: 1 1 100%; }
  /* The buttons share the next row equally */
  .tdm-review-row > button {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
  }
  /* Tame the inline-styled buttons inherited from buildDailyReviewButtons */
  .tdm-review-row .btn,
  .tdm-review-row button {
    font-size: 12px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    line-height: 1.1 !important;
  }

  /* ── KPI strip (horizontal scroll) ─────────────────────────── */
  .tdm-kpi-strip {
    display: flex;
    gap: 8px;
    padding: 4px 4px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .tdm-kpi-strip::-webkit-scrollbar { display: none; }
  .tdm-kpi {
    flex: 0 0 auto;
    min-width: 92px;
    padding: 10px 14px;
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.04);
    text-align: left;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }
  .tdm-kpi-value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink, #1B1B1A);
    line-height: 1.05;
  }
  .tdm-kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-light, #6B6A66);
    margin-top: 4px;
  }
  .tdm-kpi:active { background: #F3F1EA; }

  /* ── Card stack ────────────────────────────────────────────── */
  .tdm-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .tdm-card {
    background: var(--surface);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 18px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }
  .tdm-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tdm-card-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-light, #6B6A66);
  }
  .tdm-card-chev {
    color: #c7c7cc;
    font-size: 22px;
    line-height: 1;
    font-weight: 400;
  }
  .tdm-card-body {
    padding: 4px 16px 16px;
  }
  .tdm-card-head:active { background: rgba(0, 0, 0, 0.02); }

  /* ── Footer ────────────────────────────────────────────────── */
  .tdm-footer {
    text-align: center;
    margin-top: 18px;
    padding: 8px 0;
  }
  .tdm-customize {
    background: transparent;
    border: none;
    color: var(--ink-light, #6B6A66);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    cursor: pointer;
  }
  .tdm-customize:active { color: var(--error); }

  /* ── Content overrides inside cards ────────────────────────── */
  /* Schedule timeline: tighter on mobile */
  .tdm-card .schedule-timeline { font-size: 13px; }
  .tdm-card .schedule-event-card { padding: 8px 10px; border-radius: 8px; }
  .tdm-card .schedule-event-title { font-size: 14px; }
  .tdm-card .schedule-event-meta { font-size: 11px; }
  .tdm-card .schedule-time-label { font-size: 11px; }

  /* Habits: bigger tap targets, no streak dot strip overflow */
  .tdm-card .today-habit-row {
    padding: 10px 0;
    gap: 12px;
    align-items: center;
  }
  /* Keep the check button perfectly circular even when the habit name
     wraps to two lines (otherwise the flex item stretches vertically). */
  .tdm-card .today-habit-check,
  .tdm-card .habit-check-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    flex: 0 0 32px;
    align-self: center;
    aspect-ratio: 1 / 1;
    border-radius: 50% !important;
    padding: 0;
    box-sizing: border-box;
  }
  .tdm-card .today-habit-check svg,
  .tdm-card .habit-check-btn svg { width: 14px; height: 14px; }
  .tdm-card .today-habit-name { font-size: 14px; }
  .tdm-card .streak-row { gap: 2px; }
  .tdm-card .streak-dot { width: 6px; height: 6px; }
  .tdm-card .today-habit-streak { font-size: 11px; }

  /* Meals: 16px inputs (gotcha #11) */
  .tdm-card .today-meal-row { padding: 8px 0; }
  .tdm-card input[type="text"] { font-size: 16px; }

  /* Spending: cleaner stat layout */
  .tdm-card .today-stat-grid { gap: 12px; }

  /* Goals: progress bars */
  .tdm-card .today-goal-row { padding: 8px 0; }

  /* For You / AI insights: keep card-in-card look subtle */
  .tdm-card .for-you-card {
    border-radius: 10px;
    margin-bottom: 8px;
  }
  .tdm-card .for-you-card:last-child { margin-bottom: 0; }

  /* Weather: simpler vertical stack */
  .tdm-card .weather-main { flex-direction: row; align-items: center; }

  /* Empty states inside cards */
  .tdm-card .today-empty {
    padding: 14px 0;
    text-align: center;
    color: var(--ink-light, #6B6A66);
    font-size: 13px;
  }

  /* Override existing today-* dark/contrast styles that don't suit white cards */
  .tdm-card .focus-ai-pick {
    background: #FFF6E5;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
  }
  .tdm-card .focus-ai-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #B08D57;
    font-weight: 700;
  }
  .tdm-card .focus-ai-title { font-size: 15px; font-weight: 600; margin-top: 4px; }
  .tdm-card .focus-ai-context { font-size: 11px; color: var(--ink-light, #6B6A66); margin: 4px 0 8px; }
  .tdm-card .focus-ai-actions { display: flex; gap: 6px; }
}

/* Hide mobile root on desktop (defensive — only created on mobile renders) */
.tdm-root { display: none; }
@media (max-width: 768px) {
  .tdm-root { display: block; }
}

/* Hide the inbox quick-capture FAB while the bottom "More" sheet OR any
   modal-overlay is open. :has() is supported on iOS Safari 15.4+ and
   Chrome 105+; in unsupported browsers the FAB just stays visible. */
body:has(#mobile-more-sheet.open) #fab-capture,
body:has(.modal-overlay.open) #fab-capture { display: none !important; }

/* Hide the calendar segmented Year/Month/Day/Inbox tab bar whenever a
   modal-overlay is open, so it doesn't render on top of modal sheets. */
@media (max-width: 768px) {
  body:has(.modal-overlay.open) .cm-tabbar.cm-tabbar-visible { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   INBOX — MOBILE (iPhone-Apple card-stack layout)
   ═══════════════════════════════════════════════════════════════ */

/* Default hide mobile root on desktop (only shown inside the media query) */
#imb-root { display: none; }

@media (max-width: 768px) {
  /* Hide desktop page header + capture button + sidebar on mobile inbox */
  body #page-inbox > .page-header { display: none !important; }

  #imb-root { display: block; }

  .imb-root {
    /* Cancel parent .main-content's 1.25rem horizontal padding so the
       cards reach the screen edges (same trick as Today mobile) */
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 0 4px 24px;
    background: var(--bg);
  }

  /* ── Header ────────────────────────────────────────────────── */
  .imb-header {
    padding: 8px 16px 12px;
  }
  .imb-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--error);
    line-height: 1;
    margin-bottom: 6px;
  }
  .imb-title {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.028em;
    color: var(--ink, #1B1B1A);
    line-height: 1.02;
  }
  .imb-subtitle {
    font-size: 13px;
    color: var(--ink-light, #6B6A66);
    margin-top: 4px;
  }

  /* ── Segmented pill tab bar ────────────────────────────────── */
  .imb-tabbar {
    margin: 6px 12px 14px;
    background: rgba(118, 118, 128, 0.12);
    border-radius: 9px;
    padding: 2px;
    display: flex;
    gap: 0;
  }
  .imb-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 0;
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--label-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    min-height: 30px;
  }
  .imb-tab-active {
    color: var(--text);
    background: var(--bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 3px 8px rgba(0, 0, 0, 0.06);
    font-weight: 600;
  }
  .imb-tab:active { opacity: 0.7; }
  .imb-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-inverse);
    line-height: 1;
  }
  .imb-tab-badge-red   { background: var(--error); }
  .imb-tab-badge-brass { background: #B08D57; }

  /* ── Tab body sections (only the active one is visible) ────── */
  .imb-section { display: none; padding: 0 4px; }
  .imb-section.imb-section-active { display: block; }

  /* ── Cards-within-sections: restyle existing chrome ────────── */
  /* The legacy renderers emit .card, .review-card, .capture-item,
     .history-item, .briefing-card etc. Wrap them in an Apple-style
     white card with soft shadow + rounded corners. */
  .imb-section .card,
  .imb-section .review-card,
  .imb-section .briefing-card,
  .imb-section .capture-item {
    background: var(--surface) !important;
    border-radius: 16px !important;
    border: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 18px rgba(0, 0, 0, 0.05);
    margin: 0 0 12px !important;
    padding: 14px 16px !important;
  }
  /* Briefing card text colors are designed for the navy gradient — on the
     mobile white-card override the off-white text was invisible. Switch
     to ink colors for legibility. */
  .imb-section .briefing-card .briefing-title {
    color: var(--ink, #1B1B1A) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  .imb-section .briefing-card .briefing-summary {
    color: var(--ink-light, #6B6A66) !important;
    font-size: 13px !important;
  }
  /* .att-tier is a transparent wrapper; the .card inside keeps its own
     chrome so we don't double-stack white-card-on-white-card. */
  .imb-section .att-tier {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 4px !important;
  }
  .imb-section .att-tier .card {
    margin: 0 0 10px !important;
  }

  /* ── Quick-add capture row ─────────────────────────────────── */
  .imb-section .capture-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }
  .imb-section .capture-input-row input.form-input {
    flex: 1;
    font-size: 16px !important;
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
  .imb-section .capture-input-row .btn {
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
  }

  /* ── Capture toolbar (search + sort + bulk) ────────────────── */
  .imb-section .capture-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
  }
  .imb-section .capture-search-wrap {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
  }
  .imb-section .capture-search-wrap input {
    width: 100%;
    font-size: 14px !important;
    border-radius: 10px;
    padding: 9px 12px 9px 32px;
    background: var(--surface);
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
  .imb-section .capture-search-wrap svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  .imb-section .capture-sort {
    border-radius: 10px;
    font-size: 13px;
    padding: 9px 10px;
  }
  .imb-section .capture-bulk-bar {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 8px 0 0;
  }

  /* ── Capture item triage buttons — 3+3+1 grid on mobile ──── */
  .imb-section .capture-triage {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    margin-top: 12px;
  }
  .imb-section .capture-triage .btn {
    padding: 9px 4px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    background: #F4F2EC !important;
    color: var(--ink, #1B1B1A) !important;
    border: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
  }
  .imb-section .capture-triage .btn:active { background: #E6E2D6 !important; }
  .imb-section .capture-triage .btn.dismiss {
    grid-column: 1 / -1;
    color: var(--error) !important;
    background: rgba(255, 59, 48, 0.08) !important;
  }
  .imb-section .capture-item-inner { padding: 0 !important; gap: 10px !important; }
  .imb-section .capture-item-text {
    font-size: 15px;
    line-height: 1.3;
    color: var(--ink, #1B1B1A);
    font-weight: 500;
  }
  .imb-section .capture-item-meta {
    font-size: 11px;
    color: var(--ink-light, #6B6A66);
    margin-top: 4px;
  }
  .imb-section .capture-tag {
    display: inline-block;
    background: rgba(0, 0, 0, 0.06);
    color: var(--ink, #1B1B1A);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    margin-left: 6px;
  }
  .imb-section .capture-select-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 10px;
    font-size: 12px;
    color: var(--ink-light, #6B6A66);
  }

  /* ── Review card (Weekly / Monthly / Quarterly) ─────────────── */
  .imb-section .review-card-inner {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-areas: "icon body" "actions actions";
    column-gap: 12px;
    row-gap: 12px;
    align-items: start;
  }
  .imb-section .review-card-icon {
    grid-area: icon;
    font-size: 30px;
    line-height: 1;
    padding-top: 2px;
  }
  .imb-section .review-card-body {
    grid-area: body;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .imb-section .review-card-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .imb-section .review-card-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink, #1B1B1A);
  }
  .imb-section .review-card-streak {
    font-size: 11px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255, 149, 0, 0.14);
    color: #B66C00;
    font-weight: 600;
    margin: 0 !important;
    line-height: 1.4;
  }
  .imb-section .review-card-meta {
    font-size: 12px;
    color: var(--ink-light, #6B6A66);
    margin-top: 1px;
  }

  /* Actions: all three buttons share a single row. Start takes ~2x the
     space of Snooze and Skip; secondary buttons are subdued. */
  .imb-section .review-card-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    margin: 0;
  }
  .imb-section .review-card-actions .btn {
    font-size: 13px;
    font-weight: 600;
    padding: 10px 6px;
    border-radius: 10px;
    white-space: nowrap;
    line-height: 1.1;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Primary "Start / Continue Review" — brass, gets 2 shares of the row */
  .imb-section .review-card-actions .review-toolbar-btn-padded {
    flex: 2 1 0;
    text-align: center;
  }
  /* Snooze (with dropdown) and Skip each take 1 share */
  .imb-section .review-card-actions .snooze-wrap {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
  }
  .imb-section .review-card-actions .snooze-wrap .btn {
    width: 100%;
    background: rgba(0, 0, 0, 0.05);
    color: var(--ink, #1B1B1A);
    border: 0;
    font-weight: 500;
  }
  .imb-section .review-card-actions .review-toolbar-btn-muted {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(0, 0, 0, 0.05);
    color: var(--ink-light, #6B6A66);
    border: 0;
    font-weight: 500;
    border-radius: 10px;
    padding: 10px 6px;
  }
  .imb-section .review-card-actions .review-toolbar-btn-muted:active {
    background: rgba(0, 0, 0, 0.1);
  }
  /* Primary button — clearer brass treatment, consistent height */
  .imb-section .review-card-actions .review-toolbar-btn-padded {
    background: var(--brass, #B8965A) !important;
    color: var(--text-inverse) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  }
  .imb-section .review-card-actions .review-toolbar-btn-padded:active {
    background: var(--brass-dark, #8B7340) !important;
  }

  /* Snooze dropdown — make sure it doesn't escape the screen on mobile */
  .imb-section .snooze-dropdown {
    right: 0;
    left: auto;
    min-width: 160px;
    border-radius: 12px;
    overflow: hidden;
  }
  .imb-section .snooze-dropdown .btn {
    border-radius: 0;
    padding: 12px 14px;
    text-align: left;
    width: 100%;
    background: var(--surface);
  }

  /* ── Attention tier groups ─────────────────────────────────── */
  .imb-section .att-tier-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-light, #6B6A66);
    margin: 14px 8px 6px;
  }
  .imb-section .att-tier-urgent .att-tier-header { color: var(--error); }
  .imb-section .att-tier-soon   .att-tier-header { color: var(--warning); }

  /* ── History items ─────────────────────────────────────────── */
  .imb-section .history-count {
    font-size: 11px;
    color: var(--ink-light, #6B6A66);
    padding: 0 8px 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
  }
  .imb-section .history-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
    background: var(--surface);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.04);
  }
  .imb-section .history-item-text { font-size: 14px; color: var(--ink, #1B1B1A); }
  .imb-section .history-item-dest {
    font-size: 11px;
    color: var(--ink-light, #6B6A66);
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 999px;
  }
  .imb-section .history-clear { text-align: center; margin-top: 14px; }

  /* ── Empty / zen state ─────────────────────────────────────── */
  .imb-section .inbox-zen {
    background: transparent !important;
    padding: 40px 16px !important;
    text-align: center;
  }
  .imb-section .inbox-zen-title {
    font-size: 18px;
    font-weight: 600;
    margin-top: 16px;
  }
  .imb-section .inbox-zen-text {
    font-size: 14px;
    color: var(--ink-light, #6B6A66);
    line-height: 1.5;
  }

  /* ── Booking dashboard card at the bottom ──────────────────── */
  .imb-booking {
    margin: 18px 4px 0;
  }
  .imb-booking .booking-dashboard {
    background: var(--surface);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 18px rgba(0, 0, 0, 0.05);
  }
  .imb-loading {
    color: var(--ink-light, #6B6A66);
    font-size: 13px;
    padding: 8px 0;
    text-align: center;
  }
}

/* Hide the "Search or jump to…" bar on ALL pages on mobile —
   it's redundant with the per-page search inputs and consumes valuable
   screen height. Desktop keeps the bar (Cmd+K affordance). */
@media (max-width: 768px) {
  body .page-search-bar { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FINANCE — MOBILE
   Stretch section cards to the screen edges (Today-style),
   restyled as Apple-style rounded white cards on the cream bg.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  body #page-finance .section-card {
    background: var(--surface);
    margin-left: calc(-1.25rem + 4px);
    margin-right: calc(-1.25rem + 4px);
    padding: 14px 16px;
    border-radius: 16px;
    border: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 18px rgba(0, 0, 0, 0.05);
  }
  /* KPI grids span the same edge-to-edge width so they don't look
     inset relative to the cards below */
  body #page-finance #finance-kpis,
  body #page-finance #recurring-kpi-strip {
    margin-left: calc(-1.25rem + 4px);
    margin-right: calc(-1.25rem + 4px);
  }
  /* Plaid accounts bar matches */
  body #page-finance #plaid-accounts-bar:not([style*="display: none"]) {
    margin-left: calc(-1.25rem + 4px);
    margin-right: calc(-1.25rem + 4px);
  }
}

/* ═══════════════════════════════════════════════════════════════
   CALENDAR SETTINGS — MOBILE (iOS Settings-style sheet)
   Activated by .cm-settings-overlay added in calendar-mobile.js
   when openCalendarSettings() fires on mobile.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Modal title styling */
  .cm-settings-overlay .modal-header h2,
  .cm-settings-overlay #modal-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: center;
    width: 100%;
  }
  .cm-settings-overlay .modal-header {
    justify-content: center;
    position: relative;
    padding-bottom: 10px !important;
  }
  .cm-settings-overlay .modal-header .btn-icon {
    position: absolute;
    right: 14px;
    top: 6px;
  }

  /* iOS grouped-list look for the body — gray bg, white grouped cards */
  .cm-settings-overlay .modal.cm-sheet .modal-body {
    background: var(--bg);
    padding: 12px 14px 24px !important;
  }

  /* Tabs row — horizontal scroll of pills */
  .cm-settings-overlay .modal-body > div:first-child {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 14px !important;
    border-bottom: 0 !important;
    margin: 0 -2px 8px !important;
    scroll-snap-type: x mandatory;
  }
  .cm-settings-overlay .modal-body > div:first-child::-webkit-scrollbar { display: none; }
  .cm-settings-overlay .filter-pill {
    flex: 0 0 auto !important;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: rgba(0, 0, 0, 0.06) !important;
    color: var(--ink, #1B1B1A) !important;
    border: 0 !important;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .cm-settings-overlay .filter-pill.active {
    background: var(--error) !important;
    color: var(--text-inverse) !important;
  }

  /* Section description text (the short hint above each tab) */
  .cm-settings-overlay .modal-body > div[style*="font-size:13px"],
  .cm-settings-overlay .modal-body > div[style*="font-size: 13px"] {
    font-size: 13px !important;
    color: var(--ink-light, #6B6A66) !important;
    margin: 0 4px 12px !important;
    padding: 0 !important;
    line-height: 1.4;
  }

  /* Group setting rows into a white card with rounded corners.
     Consecutive calSettingsRow flexes share the same group via the
     :has() selector; on older browsers each row gets its own card,
     which still looks clean. */
  .cm-settings-overlay .modal-body > div[style*="border-bottom:var(--border-thin)"],
  .cm-settings-overlay .modal-body > div[style*="border-bottom: var(--border-thin)"] {
    background: var(--surface) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 13px 16px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: 52px;
    align-items: center;
  }
  /* First setting row in a group: top rounded corners */
  .cm-settings-overlay .modal-body > div[style*="font-size:13px;color:var(--ink-mid)"]
    + div[style*="border-bottom"],
  .cm-settings-overlay .modal-body > div[style*="font-size: 13px"]
    + div[style*="border-bottom"] {
    border-radius: 12px 12px 0 0 !important;
    margin-top: 4px !important;
  }
  /* Smoother corners on standalone rows */
  .cm-settings-overlay .modal-body > div[style*="border-bottom"]:first-of-type {
    border-radius: 12px 12px 0 0 !important;
  }
  /* Last row before form-actions: bottom rounded corners + remove border */
  .cm-settings-overlay .modal-body > div[style*="border-bottom"]:has(+ .form-actions),
  .cm-settings-overlay .modal-body > div[style*="border-bottom"]:nth-last-of-type(2) {
    border-radius: 0 0 12px 12px !important;
    border-bottom: 0 !important;
  }

  /* Form controls inside settings rows — Apple-style */
  .cm-settings-overlay .form-input,
  .cm-settings-overlay .form-input[type="text"],
  .cm-settings-overlay select.form-input,
  .cm-settings-overlay select.form-select {
    font-size: 16px !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    background: rgba(118, 118, 128, 0.12) !important;
    border: 0 !important;
    color: var(--ink, #1B1B1A) !important;
    min-width: 0;
    max-width: 56vw;
  }

  /* Setting row label + hint */
  .cm-settings-overlay .modal-body > div[style*="border-bottom"] > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }
  .cm-settings-overlay .modal-body > div[style*="border-bottom"] > div:first-child > div:first-child {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--ink, #1B1B1A) !important;
    line-height: 1.3;
  }
  .cm-settings-overlay .modal-body > div[style*="border-bottom"] > div:first-child > div:last-child {
    font-size: 12px !important;
    color: var(--ink-light, #6B6A66) !important;
    margin-top: 2px;
    line-height: 1.35;
  }

  /* Done button (sticky bottom) */
  .cm-settings-overlay .form-actions {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0)) !important;
    margin: 12px -14px -24px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
  }
  .cm-settings-overlay .form-actions .btn {
    flex: 1;
    background: var(--error) !important;
    color: var(--text-inverse) !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 13px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  /* Toggle switches — already iOS-style from base CSS; just ensure
     they don't get shrunk by flex math */
  .cm-settings-overlay label[style*="width:40px"],
  .cm-settings-overlay label[style*="width: 40px"] { flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   LIBRARY — MOBILE (iPhone-Apple card-stack + 2-col book grid)
   ═══════════════════════════════════════════════════════════════ */

/* Defensive default: mobile root hidden on desktop */
#lmb-root { display: none; }

@media (max-width: 768px) {
  /* Hide ALL desktop Library chrome — the inline-styled search/sort/filter
     div has no class so we use the catch-all "everything except #lmb-root"
     rule. Without this, the user sees the desktop search bar AND the
     mobile search bar (two redundant search bars). */
  body #page-library > *:not(#lmb-root) { display: none !important; }

  #lmb-root { display: block; }

  .lmb-root {
    /* Edge-to-edge: cancel main-content's 1.25rem padding */
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 0 6px 28px;
    background: var(--bg);
  }

  /* ── Header ────────────────────────────────────────────────── */
  .lmb-header {
    padding: 8px 14px 4px;
  }
  .lmb-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--error);
    line-height: 1;
    margin-bottom: 6px;
  }
  .lmb-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .lmb-title {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.028em;
    color: var(--ink, #1B1B1A);
    line-height: 1.02;
  }
  .lmb-add-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 59, 48, 0.12);
    color: var(--error);
    font-size: 22px;
    line-height: 1;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
  }
  .lmb-add-btn:active { background: rgba(255, 59, 48, 0.24); }

  .lmb-search-wrap {
    position: relative;
    margin: 12px 0 6px;
  }
  .lmb-search-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .lmb-search {
    width: 100%;
    font-size: 16px;
    background: rgba(118, 118, 128, 0.12);
    border: 0;
    border-radius: 10px;
    padding: 10px 12px 10px 36px;
    color: var(--ink, #1B1B1A);
    box-sizing: border-box;
    outline: none;
  }

  /* ── Segmented pill tab bar (filter) ───────────────────────── */
  .lmb-tabbar {
    display: flex;
    gap: 0;
    margin: 8px 12px 14px;
    background: rgba(118, 118, 128, 0.12);
    border-radius: 9px;
    padding: 2px;
  }
  .lmb-tab {
    flex: 1;
    padding: 7px 2px;
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--label-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    min-height: 30px;
    white-space: nowrap;
  }
  .lmb-tab-active {
    color: var(--text);
    background: var(--bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 3px 8px rgba(0, 0, 0, 0.06);
    font-weight: 600;
  }
  .lmb-tab:active { opacity: 0.7; }

  /* ── KPI strip (horizontal scroll) ─────────────────────────── */
  .lmb-kpi-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px 14px;
    margin: 0 -6px;
    scroll-snap-type: x mandatory;
  }
  .lmb-kpi-strip::-webkit-scrollbar { display: none; }
  .lmb-kpi {
    flex: 0 0 auto;
    min-width: 92px;
    padding: 10px 14px;
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.04);
    text-align: left;
    scroll-snap-align: start;
  }
  .lmb-kpi-val {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink, #1B1B1A);
    line-height: 1.05;
  }
  .lmb-kpi-lbl {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-light, #6B6A66);
    margin-top: 4px;
  }

  /* ── Section headers ───────────────────────────────────────── */
  .lmb-section { margin: 0 0 18px; padding: 0 8px; }
  .lmb-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 6px 10px;
  }
  .lmb-sec-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-light, #6B6A66);
  }
  .lmb-sec-count {
    font-size: 12px;
    color: var(--ink-light, #6B6A66);
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
  }
  .lmb-sec-action {
    background: transparent;
    border: 0;
    color: var(--error);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 0 4px;
  }

  /* ── Currently Reading rows ───────────────────────────────── */
  .lmb-reading-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .lmb-reading-row {
    display: grid;
    grid-template-columns: 48px 1fr 16px;
    gap: 12px;
    align-items: center;
    background: var(--surface);
    border-radius: 14px;
    padding: 10px 14px 10px 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .lmb-reading-row:active { background: #F7F5EF; }
  .lmb-reading-cover {
    width: 48px;
    height: 64px;
    border-radius: 6px;
    object-fit: cover;
    background: #F0EDE3;
    flex-shrink: 0;
  }
  .lmb-cover-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink-light, #6B6A66);
    background: linear-gradient(135deg, #F4F2EC 0%, #E6E2D6 100%);
  }
  .lmb-reading-body { min-width: 0; }
  .lmb-reading-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #1B1B1A);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lmb-reading-author {
    font-size: 12px;
    color: var(--ink-light, #6B6A66);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lmb-reading-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
  }
  .lmb-reading-bar {
    flex: 1;
    height: 4px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    overflow: hidden;
  }
  .lmb-reading-bar-fill {
    height: 100%;
    background: var(--error);
    border-radius: 2px;
    transition: width 0.3s ease;
  }
  .lmb-reading-pct {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-light, #6B6A66);
    min-width: 32px;
    text-align: right;
  }
  .lmb-reading-chev {
    color: #c7c7cc;
    font-size: 16px;
    text-align: center;
  }

  /* ── Book grid (2 columns of book cards) ──────────────────── */
  .lmb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 10px;
  }
  .lmb-grid .lib-book-card {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    background: var(--surface) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 14px rgba(0, 0, 0, 0.05) !important;
    padding: 0 !important;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .lmb-grid .lib-book-card:active { transform: scale(0.98); }
  .lmb-grid .lib-cover-wrap {
    width: 100% !important;
    aspect-ratio: 2 / 3;
    height: auto !important;
    background: #F4F2EC;
    margin-bottom: 0 !important;
    overflow: hidden;
    border-radius: 0 !important;
    position: relative;
  }
  .lmb-grid .lib-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .lmb-grid .lib-cover-placeholder,
  .lmb-grid .lib-cover-fallback {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
    background: linear-gradient(135deg, #F4F2EC 0%, #E6E2D6 100%);
    overflow: hidden;
    box-sizing: border-box;
    gap: 4px;
  }
  .lmb-grid .lib-fallback-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink, #1B1B1A);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    max-width: 100%;
    flex-shrink: 1;
    min-height: 0;
  }
  .lmb-grid .lib-fallback-author {
    font-size: 10px;
    color: var(--ink-light, #6B6A66);
    margin-top: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    max-width: 100%;
    flex-shrink: 1;
    min-height: 0;
  }
  .lmb-grid .lib-progress-bar {
    height: 3px !important;
    background: rgba(0, 0, 0, 0.06) !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .lmb-grid .lib-progress-fill {
    height: 100%;
    background: var(--error) !important;
  }
  .lmb-grid .lib-card-body {
    padding: 8px 10px 10px !important;
  }
  .lmb-grid .lib-card-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ink, #1B1B1A) !important;
    line-height: 1.25 !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0 !important;
  }
  .lmb-grid .lib-card-author {
    font-size: 11px !important;
    color: var(--ink-light, #6B6A66) !important;
    margin-top: 2px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .lmb-grid .lib-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
  }
  .lmb-grid .book-status-badge {
    font-size: 9px !important;
    padding: 1px 6px !important;
  }

  /* ── Shelf chips ───────────────────────────────────────────── */
  .lmb-shelf-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .lmb-shelf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 0;
    border-radius: 10px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .lmb-shelf-chip:active { background: #F7F5EF; }
  .lmb-shelf-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink, #1B1B1A);
  }
  .lmb-shelf-count {
    font-size: 11px;
    color: var(--ink-light, #6B6A66);
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
  }

  .lmb-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--ink-light, #6B6A66);
    font-size: 14px;
  }
}

/* ── Event recurrence builder (Apple/Outlook-style) ─────────── */
.ev-weekday-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.ev-weekday {
  flex: 1 1 0;
  min-width: 38px;
  height: 34px;
  border-radius: 8px;
  border: 0;
  background: rgba(118, 118, 128, 0.12);
  color: var(--ink, #1B1B1A);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: -0.01em;
  transition: background 0.15s, color 0.15s;
}
.ev-weekday.ev-weekday-on {
  background: var(--error);
  color: var(--text-inverse);
}
.ev-radio-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.ev-radio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ink, #1B1B1A);
  cursor: pointer;
}
.ev-radio-row input[type="radio"] {
  accent-color: var(--error);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.ev-radio-row span { line-height: 1.4; }
.ev-inline-select {
  display: inline-block !important;
  width: auto !important;
  max-width: 96px !important;
  font-size: 14px !important;
  padding: 4px 8px !important;
  margin: 0 2px !important;
  background: rgba(118, 118, 128, 0.12) !important;
  border: 0 !important;
  border-radius: 6px !important;
}

/* ── Event form: date+time pair (desktop) ─────────────────────
   Keeps the date input and the time input side-by-side inside
   their .ev-datetime-pair wrapper on desktop too. Mobile already
   handles this via the iOS-sheet CSS. */
.ev-datetime-pair {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ev-datetime-pair .ev-date { flex: 1 1 auto; min-width: 130px; }
.ev-datetime-pair .ev-time { flex: 0 0 auto; width: 110px; }

/* "+ Add room & address" toggle */
.ev-show-more {
  background: transparent;
  border: 0;
  color: var(--accent, #B08D57);
  font-size: 13px;
  font-weight: 500;
  padding: 4px 0;
  cursor: pointer;
  text-align: left;
}
.ev-show-more:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-show-more {
    color: var(--error);
    font-size: 14px;
    padding: 12px 4px;
    width: 100%;
    text-align: center;
    background: transparent !important;
  }
  .modal-overlay.cm-sheet-overlay:not(.cm-settings-overlay) .ev-show-more:hover { text-decoration: none; }
}

/* ── Drag-to-create overlay (day + week view) ───────────────── */
.cal-drag-create-overlay {
  background: rgba(255, 59, 48, 0.18);
  border-left: 3px solid var(--error);
  border-radius: 4px;
  padding: 4px 8px;
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.2);
  overflow: hidden;
}
.cal-drag-create-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--error);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ── Invitee picker rows (cleaner styling) ─────────────────── */
.invitee-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text, #1B1B1A);
  cursor: pointer;
  user-select: none;
}
.invitee-picker-row:hover:not(.invitee-selected) { background: rgba(0, 0, 0, 0.04); }
.invitee-picker-row.invitee-selected { background: rgba(176, 141, 87, 0.12); }
.invitee-picker-row.invitee-add-new {
  font-weight: 500;
  color: var(--error);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 2px;
}
.invitee-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}
.invitee-avatar-new {
  background: rgba(255, 59, 48, 0.12);
  color: var(--error);
  font-size: 18px;
  font-weight: 600;
}
.invitee-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invitee-email {
  color: var(--text-3, #6B6A66);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.invitee-check { color: var(--accent, #B08D57); font-size: 14px; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════
   FOCUS TIME & TIME BLOCKING
   ════════════════════════════════════════════════════════════════ */

/* Focus purple design tokens */
:root {
  --focus: #7C5CFC;
  --focus-bg: rgba(124,92,252,0.08);
  --focus-light: rgba(124,92,252,0.15);
  --focus-dark: #5B3FD4;
  --focus-strong: rgba(124,92,252,0.28);
}

/* ── Calendar event styling ─────────────────────────────────── */

.cal-event.focus-time,
.week-event-chip.focus-time,
.day-event-block.focus-time,
.day-event.focus-time,
.cal-event-focus-time {
  background: var(--focus-bg) !important;
  border-left: 3px solid var(--focus) !important;
  color: #4c2fa0 !important;
}

/* Auto-scheduled (tentative) blocks — diagonal stripe pattern */
.cal-event.focus-time.focus-auto,
.week-event-chip.focus-time.focus-auto,
.day-event-block.focus-time.focus-auto {
  background: repeating-linear-gradient(
    -45deg,
    rgba(124,92,252,0.06),
    rgba(124,92,252,0.06) 4px,
    rgba(124,92,252,0.12) 4px,
    rgba(124,92,252,0.12) 8px
  ) !important;
  border-left-style: dashed !important;
  color: #6d5bb5 !important;
}

/* Focus shield badge — small inline pill rendered inside event chips */
.focus-shield-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(124,92,252,0.18);
  color: var(--focus);
  margin-top: 3px;
  white-space: nowrap;
}
.focus-shield-badge.auto {
  background: transparent;
  color: var(--focus);
  font-style: italic;
  letter-spacing: 0;
}

/* Month-view dot + agenda accent for focus events */
.month-dot.focus-time { background: var(--focus); }
.agenda-item-event.focus-time,
.agenda-item-event.focus { border-left-color: var(--focus); }

/* ── Today widget — Focus Time card ─────────────────────────── */

.ft-widget-card {
  background: linear-gradient(135deg, var(--focus), #9333EA);
  border-radius: 14px;
  padding: 20px 22px;
  color: var(--text-inverse);
}

.ft-widget-title {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ft-widget-main {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 2px;
}

.ft-widget-sub {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 14px;
}

.ft-widget-next {
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.ft-widget-next:hover { background: rgba(255,255,255,0.22); }

.ft-widget-next-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.ft-widget-next-info { flex: 1; min-width: 0; }
.ft-widget-next-label { font-size: 11px; opacity: 0.75; }
.ft-widget-next-title { font-weight: 600; font-size: 13px; }

.ft-widget-status-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.22);
  color: var(--text-inverse);
  margin-left: auto;
}
.ft-widget-status-pill.success {
  background: rgba(255,255,255,0.92);
  color: #0e7a2c;
}

/* ── Weekly progress bar + per-day bars ─────────────────────── */

.ft-progress-wrap {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--surface, var(--paper, #fff));
  border: var(--border-thin, 1px solid rgba(0,0,0,0.06));
  border-radius: 12px;
}

.ft-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 13px;
}

.ft-progress-title {
  font-weight: 600;
  color: var(--ink, #1a1a1a);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ft-progress-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(52,199,89,0.12);
  color: #1B8A3B;
}
.ft-progress-status.risk { background: rgba(255,149,0,0.12); color: #B36B00; }
.ft-progress-status.behind { background: rgba(255,59,48,0.12); color: #b62b20; }

.ft-progress-sub {
  font-size: 11px;
  color: var(--ink-light, #6B7280);
  margin-bottom: 10px;
}

.ft-progress {
  background: rgba(0,0,0,0.06);
  border-radius: 8px;
  height: 10px;
  overflow: hidden;
  margin: 6px 0 6px;
}

.ft-progress-fill {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--focus), #a78bfa);
  transition: width 0.4s ease;
}

.ft-stats {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-light, #6B7280);
  margin-bottom: 14px;
}
.ft-stats strong { color: var(--focus); font-weight: 700; }

.ft-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.ft-day { text-align: center; }

.ft-day-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-faint, #A1A7B0);
  margin-bottom: 3px;
}

.ft-day-bar {
  height: 30px;
  border-radius: 4px;
  background: rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}
.ft-day.dim .ft-day-bar { opacity: 0.4; }

.ft-day-bar-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 4px;
  transition: height 0.3s ease;
  background: var(--focus-light);
}

.ft-day-bar-fill.done {
  background: linear-gradient(to top, var(--focus), #a78bfa);
}

.ft-day-val {
  font-size: 10px;
  color: var(--ink-faint, #A1A7B0);
  margin-top: 2px;
  font-weight: 500;
}

/* ── Linked tasks card below Focus widget ───────────────────── */

.ft-linked-tasks {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--surface, #fff);
  border: var(--border-thin, 1px solid rgba(0,0,0,0.06));
  border-radius: 12px;
}

.ft-linked-tasks-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink, #1a1a1a);
}

.ft-linked-task-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 13px;
  color: var(--ink, #1a1a1a);
}

.ft-linked-task-item:last-child { border-bottom: none; }

.ft-linked-task-check {
  width: 16px;
  height: 16px;
  border: 2px solid var(--focus);
  border-radius: 4px;
  flex-shrink: 0;
  background: transparent;
  cursor: pointer;
}
.ft-linked-task-check.done {
  background: var(--focus);
  position: relative;
}
.ft-linked-task-check.done::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-size: 11px;
  font-weight: 700;
}
.ft-linked-task-item.done .ft-linked-task-text {
  text-decoration: line-through;
  color: var(--ink-faint, #A1A7B0);
}

/* ── Conflict defense dialog ────────────────────────────────── */

.ft-conflict-alert {
  background: var(--focus-bg);
  border: 1px solid rgba(124,92,252,0.2);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ft-conflict-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--focus);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.ft-conflict-alert-text { flex: 1; }
.ft-conflict-alert-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.ft-conflict-alert-body { font-size: 13px; color: var(--ink-light, #6B7280); line-height: 1.5; }

.ft-conflict-card {
  background: var(--surface, #fff);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.ft-conflict-card.focus-card {
  background: var(--focus-bg);
  border: 1px solid rgba(124,92,252,0.15);
}
.ft-conflict-card-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.ft-conflict-card.focus-card .ft-conflict-card-title { color: var(--focus); display: flex; align-items: center; gap: 6px; }
.ft-conflict-card-sub { font-size: 12px; color: var(--ink-light, #6B7280); }

.ft-conflict-vs {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint, #A1A7B0);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ft-conflict-vs::before,
.ft-conflict-vs::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.08);
}

.ft-conflict-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.ft-conflict-btn {
  flex: 1;
  min-width: 110px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.ft-conflict-btn.primary {
  background: var(--focus);
  color: var(--text-inverse);
}
.ft-conflict-btn.primary:hover { background: var(--focus-dark); }

.ft-conflict-btn.secondary {
  background: var(--surface, #fff);
  color: var(--ink, #1a1a1a);
  border: 1px solid rgba(0,0,0,0.1);
}
.ft-conflict-btn.secondary:hover { background: rgba(0,0,0,0.03); }

/* ── Settings panel ─────────────────────────────────────────── */

.ft-settings-wrap { padding: 4px 0; }

.ft-settings-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.ft-settings-head h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ft-settings-state-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--focus);
  background: var(--focus-bg);
  padding: 3px 10px;
  border-radius: 4px;
}
.ft-settings-state-pill.off {
  color: var(--ink-light, #6B7280);
  background: rgba(0,0,0,0.06);
}

.ft-settings-desc {
  font-size: 13px;
  color: var(--ink-light, #6B7280);
  margin: 4px 0 18px;
}

.ft-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ft-setting-row:last-child { border-bottom: none; }

.ft-setting-label { font-size: 14px; font-weight: 500; color: var(--ink, #1a1a1a); }
.ft-setting-sub { font-size: 12px; color: var(--ink-faint, #A1A7B0); margin-top: 2px; max-width: 320px; }

.ft-setting-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ft-input-num {
  font-family: inherit;
  font-size: 14px;
  padding: 7px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  background: var(--surface, #fff);
  width: 80px;
  text-align: center;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
}

.ft-select {
  font-family: inherit;
  font-size: 14px;
  padding: 7px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  background: var(--surface, #fff);
  font-weight: 500;
  cursor: pointer;
  color: var(--ink, #1a1a1a);
  min-width: 180px;
}

.ft-chip-row { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.ft-chip {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.1);
  background: var(--surface, #fff);
  cursor: pointer;
  color: var(--ink-light, #6B7280);
  user-select: none;
  transition: all 0.12s;
}

.ft-chip:hover { border-color: var(--focus); color: var(--focus); }

.ft-chip.active {
  background: var(--focus-bg);
  border-color: var(--focus);
  color: var(--focus);
  font-weight: 600;
}

.ft-toggle {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--focus);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  transition: background 0.15s;
}
.ft-toggle::after {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  position: absolute;
  top: 2px;
  right: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: all 0.15s;
}
.ft-toggle.off { background: #d1d5db; }
.ft-toggle.off::after { right: auto; left: 2px; }

/* ── Event modal — focus extras ─────────────────────────────── */

.ft-auto-notice {
  padding: 10px 14px;
  background: var(--focus-bg);
  border-radius: 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--ink, #1a1a1a);
}
.ft-auto-notice strong { color: var(--focus); }

.ft-todo-pickbox {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface, #fff);
  min-height: 40px;
}

.ft-todo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.ft-todo-chip {
  background: var(--focus-bg);
  color: var(--focus);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ft-todo-chip-x {
  cursor: pointer;
  opacity: 0.6;
  font-weight: 700;
}
.ft-todo-chip-x:hover { opacity: 1; }

.ft-todo-search {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  padding: 4px 0;
  color: var(--ink, #1a1a1a);
}

.ft-todo-dropdown {
  position: absolute;
  z-index: 1100;
  background: var(--surface, #fff);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  max-height: 220px;
  overflow-y: auto;
  width: 100%;
  margin-top: 2px;
}

.ft-todo-dropdown-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink, #1a1a1a);
}
.ft-todo-dropdown-item:hover { background: var(--focus-bg); color: var(--focus); }

/* ── Calendar sidebar focus widget ──────────────────────────── */

.ft-side-widget {
  background: var(--surface, #fff);
  border: var(--border-thin, 1px solid rgba(0,0,0,0.06));
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.ft-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ft-side-title {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink, #1a1a1a);
}
.ft-side-ring-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0 10px;
}
.ft-ring {
  width: 64px;
  height: 64px;
  position: relative;
  flex-shrink: 0;
}
.ft-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--focus);
}
.ft-side-stats { flex: 1; font-size: 12px; color: var(--ink-light, #6B7280); }
.ft-side-stats .num { font-size: 18px; font-weight: 700; color: var(--ink, #1a1a1a); display: block; }

/* ── Mini-bars (week strip in side widget) ──────────────────── */
.ft-mini-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.ft-mini-day-bar {
  height: 22px;
  border-radius: 3px;
  background: rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}
.ft-mini-day-bar > span {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--focus-light);
  border-radius: 3px;
}
.ft-mini-day-bar > span.done {
  background: linear-gradient(to top, var(--focus), #a78bfa);
}
.ft-mini-day-label {
  font-size: 9px;
  text-align: center;
  color: var(--ink-faint, #A1A7B0);
  margin-top: 2px;
  font-weight: 600;
}

/* ── Setup CTA for the widget when feature disabled ─────────── */
.ft-setup-card {
  background: var(--focus-bg);
  border: 1px dashed rgba(124,92,252,0.35);
  border-radius: 12px;
  padding: 18px 18px;
  text-align: center;
}
.ft-setup-card h4 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--focus);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ft-setup-card p {
  font-size: 12px;
  color: var(--ink-light, #6B7280);
  margin-bottom: 12px;
  line-height: 1.5;
}
.ft-setup-card .btn {
  background: var(--focus);
  color: var(--text-inverse);
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.ft-setup-card .btn:hover { background: var(--focus-dark); }

/* ════════════════════════════════════════════════════════════════
   HOUSEHOLD (Tasks & Chores) — MOBILE iOS-style chrome
   ════════════════════════════════════════════════════════════════ */

#hsm-root { display: none; }

@media (max-width: 768px) {
  /* Hide ALL desktop Household chrome — only the mobile #hsm-root shows. */
  body #page-tasks > *:not(#hsm-root) { display: none !important; }

  #hsm-root { display: block; }

  .hsm-root {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 0 6px 28px;
    background: var(--bg);
  }

  /* ── Header ────────────────────────────────────────────────── */
  .hsm-header { padding: 8px 14px 4px; }
  .hsm-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 6px;
  }
  .hsm-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .hsm-title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink, #1B1B1A);
    line-height: 1.05;
  }
  .hsm-add-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(184, 150, 90, 0.16);
    color: var(--accent);
    font-size: 22px;
    line-height: 1;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
  }
  .hsm-add-btn:active { background: rgba(184, 150, 90, 0.28); }

  /* ── Category tab bar (horizontal scroll) ───────────────────── */
  .hsm-tabbar-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 10px 0 12px;
    padding: 0 14px;
  }
  .hsm-tabbar-scroll::-webkit-scrollbar { display: none; }
  .hsm-tabbar {
    display: inline-flex;
    gap: 6px;
    padding: 2px 0;
  }
  .hsm-tab {
    flex: 0 0 auto;
    padding: 7px 13px;
    background: rgba(118, 118, 128, 0.12);
    border: 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--label-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    min-height: 32px;
  }
  .hsm-tab-active {
    background: var(--ink, #1B1B1A);
    color: var(--text-inverse);
    font-weight: 600;
  }
  .hsm-tab:active { opacity: 0.7; }

  /* ── KPI strip ──────────────────────────────────────────────── */
  .hsm-kpi-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px 14px;
    margin: 0 -6px;
  }
  .hsm-kpi-strip::-webkit-scrollbar { display: none; }
  .hsm-kpi {
    flex: 0 0 auto;
    min-width: 92px;
    padding: 10px 14px;
    background: var(--surface);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.04);
    text-align: left;
  }
  .hsm-kpi-val {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink, #1B1B1A);
    line-height: 1.05;
  }
  .hsm-kpi-warn .hsm-kpi-val { color: var(--error); }
  .hsm-kpi-lbl {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-light, #6B6A66);
    margin-top: 4px;
    white-space: nowrap;
  }

  /* ── Section headers ────────────────────────────────────────── */
  .hsm-section { margin: 0 0 18px; padding: 0 8px; }
  .hsm-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 6px 10px;
  }
  .hsm-sec-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-light, #6B6A66);
  }
  .hsm-sec-head-warn .hsm-sec-label { color: var(--error); }
  .hsm-sec-count {
    font-size: 12px;
    color: var(--ink-light, #6B6A66);
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
  }
  .hsm-sec-count-warn {
    background: rgba(255, 59, 48, 0.12);
    color: var(--error);
  }
  .hsm-sec-head-toggle {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hsm-sec-chev {
    color: var(--ink-faint, #A1A7B0);
    font-size: 14px;
    margin-left: 6px;
  }

  /* Sub-day label inside Upcoming */
  .hsm-day-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint, #A1A7B0);
    padding: 12px 4px 4px;
  }

  /* ── Task list ──────────────────────────────────────────────── */
  .hsm-task-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .hsm-task-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    column-gap: 16px;
    align-items: start;
    background: var(--surface);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.035);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s, background 0.15s;
  }
  .hsm-task-row:active { background: #F7F5EF; }
  .hsm-task-done { opacity: 0.55; }
  .hsm-task-done .hsm-task-title { text-decoration: line-through; }

  .hsm-task-check {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border-radius: 50%;
    border: 1.5px solid var(--ink-faint, #A1A7B0);
    background: transparent;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    font-size: 11px;
    font-weight: 700;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
    margin-top: 2px;
    flex-shrink: 0;
  }
  .hsm-task-check-on {
    background: var(--success);
    border-color: var(--success);
  }
  .hsm-task-check:active { transform: scale(0.92); }

  .hsm-task-body { min-width: 0; }
  .hsm-task-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink, #1B1B1A);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .hsm-task-recur {
    margin-left: 4px;
    font-size: 11px;
    opacity: 0.6;
  }
  .hsm-task-meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--ink-light, #6B6A66);
    display: flex;
    gap: 4px;
    align-items: center;
  }
  .hsm-task-cat {
    font-weight: 500;
  }
  .hsm-task-assignee {
    font-style: italic;
  }

  .hsm-task-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .hsm-task-prio {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .hsm-task-due {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-light, #6B6A66);
    white-space: nowrap;
  }
  .hsm-task-due-late {
    color: var(--error);
    font-weight: 600;
  }

  /* ── Empty state ────────────────────────────────────────────── */
  .hsm-empty {
    background: var(--surface);
    border-radius: 14px;
    padding: 32px 20px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.04);
    margin: 4px 0;
  }
  .hsm-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(52, 199, 89, 0.12);
    color: var(--success);
    font-size: 24px;
    line-height: 48px;
    margin: 0 auto 10px;
    font-weight: 700;
  }
  .hsm-empty-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink, #1B1B1A);
    margin-bottom: 4px;
  }
  .hsm-empty-sub {
    font-size: 13px;
    color: var(--ink-light, #6B6A66);
  }
}

/* ════════════════════════════════════════════════════════════════
   NOTES — MOBILE iOS-style chrome
   ════════════════════════════════════════════════════════════════ */

#nmb-root { display: none; }

@media (max-width: 768px) {
  /* Hide ALL desktop Notes chrome — only #nmb-root (list) + the editor
     panel (when activeNoteId is set) show. */
  body #page-notes > *:not(#nmb-root):not(#notes-layout) { display: none !important; }
  body #page-notes > #notes-layout { background: transparent !important; }
  body #page-notes > #notes-layout > .notes-folder-panel,
  body #page-notes > #notes-layout > .notes-list-panel { display: none !important; }
  /* When in list mode (no active note), hide the editor panel too */
  body #page-notes > #notes-layout:not(.notes-editor-open) > .notes-editor-panel {
    display: none !important;
  }
  /* When in editor mode, show the editor full-bleed below the back bar */
  body #page-notes > #notes-layout.notes-editor-open > .notes-editor-panel {
    display: block !important;
    margin-top: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--surface);
  }

  #nmb-root { display: block; }

  .nmb-root {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 0 0 28px;
    background: var(--bg);
  }

  /* ── Header ────────────────────────────────────────────────── */
  .nmb-header { padding: 8px 18px 4px; }
  .nmb-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 6px;
  }
  .nmb-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .nmb-title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink, #1B1B1A);
    line-height: 1.05;
  }
  .nmb-add-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(184, 150, 90, 0.16);
    color: var(--accent);
    font-size: 22px;
    line-height: 1;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
  }
  .nmb-add-btn:active { background: rgba(184, 150, 90, 0.28); }

  .nmb-search-wrap {
    position: relative;
    margin: 12px 0 6px;
  }
  .nmb-search-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .nmb-search {
    width: 100%;
    font-size: 16px;
    background: rgba(118, 118, 128, 0.12);
    border: 0;
    border-radius: 10px;
    padding: 10px 12px 10px 36px;
    color: var(--ink, #1B1B1A);
    box-sizing: border-box;
    outline: none;
  }

  /* ── Folder pill row (horizontal scroll) ──────────────────── */
  .nmb-pill-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 10px 0 6px;
    padding: 0 18px;
  }
  .nmb-pill-scroll::-webkit-scrollbar { display: none; }
  .nmb-pill-row {
    display: inline-flex;
    gap: 6px;
    padding: 2px 0;
  }
  .nmb-pill {
    flex: 0 0 auto;
    padding: 7px 14px;
    background: rgba(118, 118, 128, 0.12);
    border: 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--label-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .nmb-pill-active {
    background: var(--ink, #1B1B1A);
    color: var(--text-inverse);
    font-weight: 600;
  }
  .nmb-pill-count {
    font-size: 11px;
    opacity: 0.7;
    font-weight: 500;
  }
  .nmb-pill-active .nmb-pill-count { opacity: 0.9; }

  /* ── Tag chip row ──────────────────────────────────────────── */
  .nmb-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 18px 10px;
  }
  .nmb-tag-chip {
    background: rgba(184, 150, 90, 0.10);
    color: var(--accent-dark);
    border: 0;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .nmb-tag-chip-active { background: var(--accent); color: var(--text-inverse); font-weight: 600; }
  .nmb-tag-chip-count { font-size: 10px; opacity: 0.7; }
  .nmb-tag-clear {
    background: rgba(255, 59, 48, 0.10);
    color: var(--error);
    border: 0;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }

  /* ── Sections ──────────────────────────────────────────────── */
  .nmb-section { margin: 0 0 16px; padding: 0 12px; }
  .nmb-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 6px 8px;
  }
  .nmb-sec-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-light, #6B6A66);
  }
  .nmb-sec-count {
    font-size: 11px;
    color: var(--ink-light, #6B6A66);
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
  }

  /* ── Note cards ────────────────────────────────────────────── */
  .nmb-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .nmb-card {
    background: var(--surface);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.035);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
  }
  .nmb-card:active { background: #F7F5EF; }
  .nmb-card-pinned { border-left: 3px solid var(--accent); }

  .nmb-card-row1 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
  }
  .nmb-card-typedot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-faint, #A1A7B0);
    flex-shrink: 0;
  }
  .nmb-type-journal  { background: #6b8cce; }
  .nmb-type-idea     { background: #c9a84c; }
  .nmb-type-meeting  { background: #5fad6e; }
  .nmb-type-recipe   { background: #e07070; }
  .nmb-type-reference{ background: #b07fd4; }

  .nmb-card-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink, #1B1B1A);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nmb-card-pin {
    color: var(--accent);
    flex-shrink: 0;
  }

  .nmb-card-preview {
    font-size: 13px;
    color: var(--ink-light, #6B6A66);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 6px;
  }

  .nmb-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--ink-faint, #A1A7B0);
  }
  .nmb-card-date { font-weight: 500; }
  .nmb-card-tags {
    display: flex;
    gap: 4px;
    overflow: hidden;
  }
  .nmb-card-tag {
    background: rgba(0, 0, 0, 0.05);
    color: var(--ink-light, #6B6A66);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
  }

  /* ── Editor mode back bar ──────────────────────────────────── */
  .nmb-editor-bar {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 5;
  }
  .nmb-back {
    background: transparent;
    border: 0;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px 8px 4px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nmb-back svg { color: currentColor; }
  .nmb-back:active { opacity: 0.6; }

  /* ── Empty states ──────────────────────────────────────────── */
  .nmb-empty {
    background: var(--surface);
    border-radius: 14px;
    padding: 40px 24px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.04);
    margin: 16px 12px;
  }
  .nmb-empty-icon {
    font-size: 40px;
    margin-bottom: 12px;
  }
  .nmb-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink, #1B1B1A);
    margin-bottom: 6px;
  }
  .nmb-empty-sub {
    font-size: 14px;
    color: var(--ink-light, #6B6A66);
    margin-bottom: 18px;
    line-height: 1.5;
  }
  .nmb-empty-btn {
    background: var(--accent);
    color: var(--text-inverse);
    border: 0;
    border-radius: 10px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .nmb-empty-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--ink-light, #6B6A66);
    font-size: 14px;
    font-style: italic;
  }
}

/* ════════════════════════════════════════════════════════════════
   NOTES EDITOR — MOBILE iOS POLISH
   Overrides the desktop editor when shown inside the mobile notes
   flow (notes-mobile.js opens the existing editor full-bleed).
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── Editor panel container ───────────────────────────────── */
  body #page-notes #notes-layout.notes-editor-open .notes-editor-panel {
    padding: 0 !important;
  }
  body #page-notes #note-editor-inner {
    padding: 0 !important;
    background: var(--surface) !important;
  }

  /* ── Header (title + meta toolbar) ────────────────────────── */
  body #page-notes .note-editor-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 14px 18px 10px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: var(--surface) !important;
  }
  /* Title — big bold iOS Notes style */
  body #page-notes .note-title-input {
    font-size: 22px !important;
    font-weight: 700 !important;
    border: 0 !important;
    padding: 2px 0 !important;
    background: transparent !important;
    width: 100%;
    color: var(--ink, #1B1B1A) !important;
    letter-spacing: -0.015em !important;
    line-height: 1.25 !important;
  }
  /* Meta toolbar — pin / type / folder / delete in one row */
  body #page-notes .note-editor-toolbar {
    width: 100%;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    margin: 0 !important;
  }
  body #page-notes .note-editor-toolbar::-webkit-scrollbar { display: none; }
  /* Hide the "Type" / "Folder" inline text labels — dropdowns are self-evident */
  body #page-notes .note-editor-toolbar > span:not(.note-toolbar-sep) {
    display: none !important;
  }
  /* Compact pill-styled selects (iOS-ish) */
  body #page-notes .note-editor-toolbar .note-type-select,
  body #page-notes .note-editor-toolbar .note-folder-select {
    font-size: 13px !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    background: rgba(118, 118, 128, 0.08) !important;
    color: var(--ink, #1B1B1A) !important;
    font-family: inherit !important;
    flex-shrink: 0;
    max-width: 140px;
    text-overflow: ellipsis;
  }
  body #page-notes .note-editor-toolbar .btn-icon {
    width: 36px;
    height: 36px;
    padding: 8px !important;
    border-radius: 8px !important;
    flex-shrink: 0;
  }
  body #page-notes .note-editor-toolbar .btn-icon:active {
    background: rgba(0, 0, 0, 0.06);
  }
  body #page-notes .note-editor-toolbar .btn-icon.danger {
    color: var(--error);
  }

  /* ── Formatting toolbar — single horizontal scroll row ───── */
  body #page-notes .note-rich-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 14px !important;
    background: var(--bg) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    scroll-snap-type: x proximity;
    position: sticky;
    top: 0;
    z-index: 4;
  }
  body #page-notes .note-rich-toolbar::-webkit-scrollbar { display: none; }
  body #page-notes .note-rich-toolbar .note-toolbar-btn {
    flex-shrink: 0;
    min-width: 36px;
    height: 36px;
    border-radius: 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ink-light, #6B6A66) !important;
    padding: 0 8px !important;
    font-size: 14px !important;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body #page-notes .note-rich-toolbar .note-toolbar-btn:active {
    background: rgba(0, 0, 0, 0.06) !important;
    color: var(--ink, #1B1B1A) !important;
  }
  body #page-notes .note-rich-toolbar .note-toolbar-btn.active {
    background: rgba(184, 150, 90, 0.18) !important;
    color: var(--accent-dark) !important;
  }
  body #page-notes .note-rich-toolbar .note-toolbar-sep {
    flex-shrink: 0;
    width: 1px;
    height: 22px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 4px;
    display: inline-block;
  }
  /* Dropdowns popped from the toolbar (highlight, color, link, emoji) */
  body #page-notes .note-rich-toolbar .note-toolbar-dropdown,
  body #page-notes .note-rich-toolbar .note-link-popover,
  body #page-notes .note-rich-toolbar .note-emoji-picker {
    z-index: 50;
  }

  /* ── Body — clean editor area ──────────────────────────────── */
  body #page-notes .note-body-richtext {
    padding: 18px 20px 32px !important;
    border: 0 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    min-height: 50vh !important;
    background: var(--surface) !important;
    color: var(--ink, #1B1B1A) !important;
  }
  body #page-notes .note-body-richtext:empty:before {
    color: var(--ink-faint, #A1A7B0) !important;
    font-style: italic;
  }

  /* ── Meta bar at the bottom (tags / links / contacts / events) ─ */
  body #page-notes .note-meta-bar {
    background: var(--bg) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 10px 16px 16px !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  body #page-notes .note-meta-bar > div {
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  body #page-notes .note-meta-bar > div:last-child { border-bottom: 0; }
  body #page-notes .note-meta-bar .note-tag,
  body #page-notes .note-meta-bar .note-link-chip {
    background: rgba(184, 150, 90, 0.12) !important;
    color: var(--accent-dark) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }
  body #page-notes .note-meta-bar .tag-input {
    background: transparent !important;
    border: 0 !important;
    font-size: 13px !important;
    color: var(--ink, #1B1B1A) !important;
    flex: 1 !important;
    min-width: 100px !important;
    outline: none !important;
  }
  body #page-notes .note-meta-bar .note-link-add-btn,
  body #page-notes .note-meta-bar .contact-link-add-btn,
  body #page-notes .note-meta-bar .event-link-add-btn {
    background: transparent !important;
    border: 1px dashed rgba(0, 0, 0, 0.18) !important;
    color: var(--ink-light, #6B6A66) !important;
    border-radius: 999px !important;
    padding: 3px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer;
  }
}

/* ════════════════════════════════════════════════════════════════
   TODOS — MOBILE iOS-style chrome
   ════════════════════════════════════════════════════════════════ */

#tdm-root { display: none; }

@media (max-width: 768px) {
  /* Hide ALL desktop Todos chrome — only #tdm-root shows */
  body #page-todos > *:not(#tdm-root) { display: none !important; }

  #tdm-root { display: block; }

  .tdm-root {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 0 0 28px;
    background: var(--bg);
  }

  /* ── Header ────────────────────────────────────────────────── */
  .tdm-header { padding: 8px 18px 4px; }
  .tdm-title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink, #1B1B1A);
    line-height: 1.05;
  }
  .tdm-subtitle {
    font-size: 13px;
    color: var(--ink-light, #6B6A66);
    margin-top: 2px;
    font-style: italic;
  }

  /* ── Quick-add bar ─────────────────────────────────────────── */
  .tdm-quickadd {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(118, 118, 128, 0.12);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 14px 16px 12px;
  }
  .tdm-quickadd-input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 16px;
    color: var(--ink, #1B1B1A);
    font-family: inherit;
  }
  .tdm-quickadd-input::placeholder {
    color: var(--ink-faint, #A1A7B0);
  }

  /* ── View segmented pills (horizontal scroll) ──────────────── */
  .tdm-vtabs-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;
    margin-bottom: 8px;
  }
  .tdm-vtabs-scroll::-webkit-scrollbar { display: none; }
  .tdm-vtabs {
    display: inline-flex;
    gap: 6px;
    background: rgba(118, 118, 128, 0.12);
    border-radius: 9px;
    padding: 2px;
  }
  .tdm-vtab {
    flex: 0 0 auto;
    padding: 7px 14px;
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--label-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .tdm-vtab-active {
    background: var(--surface);
    color: var(--ink, #1B1B1A);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.06);
  }
  .tdm-vtab-badge {
    font-size: 10px;
    background: rgba(0, 0, 0, 0.08);
    color: var(--ink, #1B1B1A);
    padding: 1px 6px;
    border-radius: 999px;
    font-weight: 600;
  }
  .tdm-vtab-active .tdm-vtab-badge { background: rgba(0, 0, 0, 0.06); }

  /* ── Category pill row (horizontal scroll) ─────────────────── */
  .tdm-cat-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;
    margin-bottom: 6px;
  }
  .tdm-cat-scroll::-webkit-scrollbar { display: none; }
  .tdm-cat-row {
    display: inline-flex;
    gap: 6px;
    padding: 2px 0;
  }
  .tdm-cat-pill {
    flex: 0 0 auto;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-light, #6B6A66);
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .tdm-cat-pill-active {
    background: var(--ink, #1B1B1A);
    color: var(--text-inverse);
    border-color: var(--ink, #1B1B1A);
    font-weight: 600;
  }

  /* ── Sort row ──────────────────────────────────────────────── */
  .tdm-sort-row {
    display: flex;
    justify-content: flex-end;
    padding: 4px 18px 10px;
  }
  .tdm-sort-btn {
    background: transparent;
    border: 0;
    color: var(--ink-light, #6B6A66);
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tdm-sort-btn:active { opacity: 0.6; }

  /* ── List + cards ──────────────────────────────────────────── */
  .tdm-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 14px;
  }
  .tdm-list-done { opacity: 0.7; margin-top: 6px; }

  .tdm-card {
    display: grid;
    grid-template-columns: 22px 1fr;
    column-gap: 16px;
    align-items: start;
    background: var(--surface);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.035);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
  }
  .tdm-card:active { background: #F7F5EF; }
  .tdm-card-done { opacity: 0.55; }
  .tdm-card-done .tdm-card-title-text { text-decoration: line-through; }

  .tdm-card-check {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border-radius: 50%;
    border: 1.5px solid var(--ink-faint, #A1A7B0);
    background: transparent;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    font-size: 11px;
    font-weight: 700;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s;
    margin-top: 2px;
    flex-shrink: 0;
  }
  .tdm-card-check-on {
    background: var(--success);
    border-color: var(--success);
  }
  .tdm-card-check:active { transform: scale(0.92); }

  .tdm-card-body { min-width: 0; }
  .tdm-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink, #1B1B1A);
    line-height: 1.3;
  }
  .tdm-prio-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .tdm-card-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    flex: 1;
  }
  .tdm-recur {
    font-size: 11px;
    opacity: 0.6;
    flex-shrink: 0;
  }

  .tdm-card-meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--ink-light, #6B6A66);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .tdm-meta-sep { color: var(--ink-faint, #A1A7B0); }
  .tdm-meta-due { font-weight: 500; }
  .tdm-meta-late { color: var(--error); font-weight: 600; }
  .tdm-meta-prio { font-weight: 500; }
  .tdm-meta-cat {
    background: rgba(0, 0, 0, 0.05);
    color: var(--ink-light, #6B6A66);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
  }

  /* ── Completed toggle ──────────────────────────────────────── */
  .tdm-completed-toggle {
    background: transparent;
    border: 0;
    color: var(--ink-light, #6B6A66);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 18px 6px;
    text-align: left;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
  }
  .tdm-completed-chev {
    display: inline-block;
    transition: transform 0.2s;
    color: var(--ink-faint, #A1A7B0);
    font-size: 14px;
  }
  .tdm-completed-chev.open { transform: rotate(90deg); }
  .tdm-completed-count {
    color: var(--ink-faint, #A1A7B0);
    font-weight: 500;
    font-size: 12px;
    margin-left: auto;
    margin-right: 0;
  }

  /* ── Empty states ──────────────────────────────────────────── */
  .tdm-empty {
    background: var(--surface);
    border-radius: 14px;
    padding: 40px 24px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.04);
    margin: 16px 14px;
  }
  .tdm-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(52, 199, 89, 0.12);
    color: var(--success);
    font-size: 24px;
    line-height: 48px;
    margin: 0 auto 12px;
    font-weight: 700;
  }
  .tdm-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink, #1B1B1A);
    margin-bottom: 6px;
  }
  .tdm-empty-sub {
    font-size: 13px;
    color: var(--ink-light, #6B6A66);
    line-height: 1.5;
  }
  .tdm-empty-inline {
    background: var(--surface);
    border-radius: 12px;
    padding: 24px 18px;
    text-align: center;
    font-size: 13px;
    color: var(--ink-light, #6B6A66);
    font-style: italic;
    margin: 0 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.035);
  }
}

/* ════════════════════════════════════════════════════════════════
   CONTACTS — MOBILE iOS-style chrome
   ════════════════════════════════════════════════════════════════ */

#cmb-root { display: none; }

@media (max-width: 768px) {
  /* Hide desktop Contacts chrome on mobile (page-header, filter row,
     desktop list panel). Keep #contact-detail visible because it's
     reused for the detail editor in mobile detail mode. */
  body #page-contacts > .page-header,
  body #page-contacts > #contacts-list-view > div:not(.contacts-layout):not(#cmb-root) {
    display: none !important;
  }
  body #page-contacts .contacts-layout {
    display: block !important;
    grid-template-columns: none !important;
  }
  body #page-contacts .contacts-list-panel {
    display: none !important;
  }
  body #page-contacts .contact-detail {
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  #cmb-root { display: block; }

  .cmb-root, #cmb-root .cmb-header {
    background: var(--bg);
  }

  /* ── Header ────────────────────────────────────────────────── */
  .cmb-header {
    padding: 8px 18px 4px;
    margin: 0 -1.25rem;
  }
  .cmb-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 6px;
  }
  .cmb-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .cmb-title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink, #1B1B1A);
    line-height: 1.05;
  }
  .cmb-add-btn {
    width: 36px;
    height: 36px;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50%;
    background: rgba(184, 150, 90, 0.16);
    color: var(--accent);
    font-size: 22px;
    line-height: 1;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
  }
  .cmb-add-btn:active { background: rgba(184, 150, 90, 0.28); }

  .cmb-search-wrap {
    position: relative;
    margin: 12px 0 6px;
  }
  .cmb-search-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .cmb-search {
    width: 100%;
    font-size: 16px;
    background: rgba(118, 118, 128, 0.12);
    border: 0;
    border-radius: 10px;
    padding: 10px 12px 10px 36px;
    color: var(--ink, #1B1B1A);
    box-sizing: border-box;
    outline: none;
  }

  /* ── Group pill row (horizontal scroll) ───────────────────── */
  .cmb-pill-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 10px -1.25rem 6px;
    padding: 0 18px;
  }
  .cmb-pill-scroll::-webkit-scrollbar { display: none; }
  .cmb-pill-row {
    display: inline-flex;
    gap: 6px;
    padding: 2px 0;
  }
  .cmb-pill {
    flex: 0 0 auto;
    padding: 7px 14px;
    background: rgba(118, 118, 128, 0.12);
    border: 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--label-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px !important;
  }
  .cmb-pill-active {
    background: var(--ink, #1B1B1A);
    color: var(--text-inverse);
    font-weight: 600;
  }
  .cmb-pill-count {
    font-size: 11px;
    opacity: 0.7;
    font-weight: 500;
  }
  .cmb-pill-active .cmb-pill-count { opacity: 0.9; }

  /* ── Sort row ──────────────────────────────────────────────── */
  .cmb-sort-row {
    display: flex;
    justify-content: flex-end;
    padding: 4px 4px 10px;
  }
  .cmb-sort-btn {
    background: transparent;
    border: 0;
    color: var(--ink-light, #6B6A66);
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: 32px !important;
    min-width: 32px !important;
  }
  .cmb-sort-btn:active { opacity: 0.6; }

  /* ── Sections ──────────────────────────────────────────────── */
  .cmb-section { margin: 0 -1.25rem 16px; padding: 0 14px; }
  .cmb-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 4px 6px 8px;
  }
  .cmb-sec-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-light, #6B6A66);
  }
  .cmb-letter-head .cmb-letter {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink, #1B1B1A);
    text-transform: none;
    letter-spacing: 0;
  }
  .cmb-sec-count {
    font-size: 11px;
    color: var(--ink-light, #6B6A66);
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
  }

  /* ── List rows ─────────────────────────────────────────────── */
  .cmb-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .cmb-row {
    display: grid;
    grid-template-columns: 44px 1fr 14px;
    column-gap: 12px;
    align-items: center;
    background: var(--surface);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 3px 10px rgba(0, 0, 0, 0.035);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
  }
  .cmb-row:active { background: #F7F5EF; }

  .cmb-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
  }

  .cmb-body { min-width: 0; }
  .cmb-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink, #1B1B1A);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cmb-fav { color: var(--accent); font-size: 13px; }
  .cmb-sub {
    font-size: 12px;
    color: var(--ink-light, #6B6A66);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cmb-chev {
    color: #c7c7cc;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    margin-right: 2px;
  }

  /* ── Detail mode back bar ──────────────────────────────────── */
  .cmb-editor-bar {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 -1.25rem;
  }
  .cmb-back {
    background: transparent;
    border: 0;
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px 8px 4px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: 36px !important;
    min-width: 36px !important;
  }
  .cmb-back:active { opacity: 0.6; }

  /* ── Empty states ──────────────────────────────────────────── */
  .cmb-empty {
    background: var(--surface);
    border-radius: 14px;
    padding: 40px 24px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.04);
    margin: 16px 0;
  }
  .cmb-empty-icon { font-size: 40px; margin-bottom: 12px; }
  .cmb-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink, #1B1B1A);
    margin-bottom: 6px;
  }
  .cmb-empty-sub {
    font-size: 13px;
    color: var(--ink-light, #6B6A66);
    margin-bottom: 18px;
    line-height: 1.5;
  }
  .cmb-empty-btn {
    background: var(--accent);
    color: var(--text-inverse);
    border: 0;
    border-radius: 10px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  .cmb-empty-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--ink-light, #6B6A66);
    font-size: 14px;
    font-style: italic;
  }
}

/* ══════════════════════════════════════════════════════════════
   VOICE SETTINGS — 6-tab Identity / Intelligence / Conversation /
   Behavior / Scripts / Costs panel (matches Voice-Settings-Mockup.html).
   Reuses .fin-subtab, .vm-toggle-row, .vm-line-section-title from existing.
   ══════════════════════════════════════════════════════════════ */

/* ── Polished form fields used inside voice settings cards.
   Scoped to .section-card to avoid colliding with any legacy global
   .input usage elsewhere. Matches the off-white surface aesthetic
   of .form-input but with stronger focus state and a proper SVG
   chevron on selects (default browser arrow looks terrible). ── */
.section-card input.input[type="text"],
.section-card input.input[type="number"],
.section-card input.input[type="email"],
.section-card input.input[type="tel"],
.section-card input.input[type="url"],
.section-card input.input[type="password"],
.section-card input.input:not([type]),
.section-card select.input,
.section-card textarea.input {
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 11px 14px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  line-height: 1.4;
}
.section-card input.input:hover:not(:focus):not(:disabled),
.section-card select.input:hover:not(:focus):not(:disabled),
.section-card textarea.input:hover:not(:focus):not(:disabled) {
  background: var(--surface);
  border-color: var(--border);
}
.section-card input.input:focus,
.section-card select.input:focus,
.section-card textarea.input:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.section-card input.input:disabled,
.section-card select.input:disabled,
.section-card textarea.input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.section-card input.input::placeholder,
.section-card textarea.input::placeholder {
  color: var(--text-3);
  font-weight: 400;
}
.section-card textarea.input {
  resize: vertical;
  min-height: 80px;
  line-height: 1.55;
  font-size: 13px;
}

/* Custom chevron for native select — matches accent color, replaces
   the awful browser default triangle. SVG inlined as data-URI. */
.section-card select.input {
  cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 12px;
}
.section-card select.input:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%23B8965A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Strip the native spinner from number inputs — looks cleaner. */
.section-card input.input[type="number"]::-webkit-outer-spin-button,
.section-card input.input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.section-card input.input[type="number"] {
  -moz-appearance: textfield;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Polished form labels inside section cards */
.section-card .form-group > label,
.section-card .form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 7px;
}

/* Range slider polish (replaces ugly browser default) */
.section-card input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) 50%, var(--surface-2) 50%, var(--surface-2) 100%);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  margin: 8px 0;
}
.section-card input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.section-card input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(184,150,90,0.35);
}
.section-card input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.08);
}
.section-card input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.section-card input[type="range"]::-moz-range-track {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
}

/* Currency / prefix input — wraps a $/€/etc. in front of a number input.
   The wrapper handles positioning; the input gets extra left padding. */
.section-card .input-prefix-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.section-card .input-prefix-wrap .input-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  z-index: 1;
}
.section-card .input-prefix-wrap input.input {
  padding-left: 28px;
}

/* Read-only display field (e.g. "Current Month Spend") — same dimensions
   as .input but visibly inert: muted background, no hover/focus chrome. */
.section-card .input-readonly {
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  min-height: 42px;
}

/* Helper text under form fields — already used inline; standardize. */
.section-card .form-group .help-text {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 5px;
  line-height: 1.45;
}

.settings-subtabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.settings-subtab {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  font-family: var(--font);
}
.settings-subtab:hover { color: var(--text); background: rgba(0,0,0,0.03); }
.settings-subtab.active {
  background: var(--navy);
  color: var(--text-on-navy);
  font-weight: 600;
}
.settings-panel { display: none; }
.settings-panel.active { display: block; }

.section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.04));
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

/* Disclosure Policy Cards */
.policy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.policy-card {
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  background: var(--surface);
}
.policy-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.policy-card.selected { border-color: var(--accent); background: rgba(184,150,90,0.04); }
.policy-card.selected::after {
  content: '✓';
  position: absolute; top: 10px; right: 12px;
  width: 22px; height: 22px;
  background: var(--accent); color: var(--text-inverse);
  border-radius: 50%;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.policy-card-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.policy-card-desc { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.policy-card-tag {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  padding: 2px 8px; border-radius: 99px;
  margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.policy-card-tag.recommended { background: var(--accent-bg); color: var(--accent-dark); }
.policy-card-tag.popular { background: rgba(52,199,89,0.1); color: #1B8B3A; }

/* Voice Selection Cards */
.voice-option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.voice-option {
  position: relative;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  background: var(--surface);
}
.voice-option:hover { border-color: var(--border-strong); }
.voice-option.selected { border-color: var(--accent); background: rgba(184,150,90,0.04); }
.voice-option-play {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s;
}
.voice-option-play:hover { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
.voice-option-play.playing { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
.voice-option-name { font-size: 13px; font-weight: 600; color: var(--text); }
.voice-option-provider { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.voice-option-badge {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  padding: 2px 6px; border-radius: 99px;
  margin-top: 6px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.voice-option-badge.realistic { background: rgba(124,58,237,0.1); color: #7c3aed; }
.voice-option-badge.fast { background: rgba(8,145,178,0.1); color: #0891b2; }
.voice-option-badge.budget { background: rgba(52,199,89,0.1); color: #1B8B3A; }

/* Model Cards */
.model-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.model-option {
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--surface);
}
.model-option:hover { border-color: var(--border-strong); }
.model-option.selected { border-color: var(--accent); background: rgba(184,150,90,0.04); }
.model-option-name { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.model-option-desc { font-size: 12px; color: var(--text-2); margin-top: 3px; line-height: 1.4; }
.model-option-cost { font-size: 11px; font-weight: 600; color: var(--accent); margin-top: 6px; }

/* Conversation Style Preview */
.cs-preview {
  background: var(--navy);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.7;
  color: #d1d5db;
  position: relative;
  overflow: hidden;
}
.cs-preview::before {
  content: 'Live Preview';
  position: absolute; top: 0; right: 0;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  background: rgba(184,150,90,0.2); color: var(--accent);
  padding: 3px 10px; border-radius: 0 0 0 var(--radius-sm);
}
.cs-bubble {
  padding: 8px 12px;
  border-radius: 12px;
  margin-bottom: 6px;
  max-width: 85%;
  font-size: 13px;
  line-height: 1.5;
}
.cs-bubble.caller {
  background: rgba(255,255,255,0.08);
  color: #e5e7eb;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.cs-bubble.aria {
  background: rgba(184,150,90,0.15);
  color: #f3f0eb;
  border-bottom-left-radius: 4px;
}
.cs-bubble .cs-filler { color: var(--accent); font-style: italic; opacity: 0.85; }
.cs-bubble .cs-backchannel { color: rgba(52,199,89,0.8); font-size: 11px; font-style: italic; }
.cs-bubble .cs-pause { display: inline-block; color: var(--text-3); font-size: 11px; font-style: italic; opacity: 0.7; }
.cs-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; margin-top: 8px; }
.cs-label.caller-label { color: rgba(255,255,255,0.4); text-align: right; }
.cs-label.aria-label { color: rgba(184,150,90,0.5); }

/* Guardrail Cards */
.gr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.gr-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.gr-card:hover { border-color: var(--border-strong); }
.gr-card.active { border-color: var(--accent); background: rgba(184,150,90,0.04); }
.gr-card.active::after {
  content: '✓';
  position: absolute; top: 8px; right: 10px;
  font-size: 12px; font-weight: 700; color: var(--accent);
}
.gr-card-icon { font-size: 1.2rem; margin-bottom: 4px; }
.gr-card-title { font-size: 13px; font-weight: 600; color: var(--text); }
.gr-card-desc { font-size: 11px; color: var(--text-2); line-height: 1.4; margin-top: 2px; }
.gr-card-example {
  font-size: 10.5px; color: var(--text-3); font-style: italic; margin-top: 6px;
  padding-top: 6px; border-top: 1px solid var(--rule, #f0ece4);
  line-height: 1.4;
}

/* Custom Instructions */
.cs-textarea {
  width: 100%;
  min-height: 110px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.65;
  color: var(--text);
  background: var(--surface-2);
  resize: vertical;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.cs-textarea::placeholder { color: var(--text-3); font-family: var(--font); font-size: 12px; }
.cs-textarea:hover:not(:focus) { background: var(--surface); border-color: var(--border); }
.cs-textarea:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.cs-char-count { font-size: 10px; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }

/* Greeting / Script Tabs */
.greeting-tabs {
  display: flex; gap: 2px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 2px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.greeting-tab {
  padding: 6px 12px;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
}
.greeting-tab:hover:not(.active) { background: rgba(0,0,0,0.04); }
.greeting-tab.active { background: var(--navy); color: var(--text-on-navy); }

.script-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.script-option {
  position: relative;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.18s;
  background: var(--surface);
}
.script-option:hover { border-color: var(--border-strong); background: var(--surface-2); }
.script-option.selected { border-color: var(--accent); background: rgba(184,150,90,0.04); }
.script-option.selected::after {
  content: '✓';
  position: absolute; top: 10px; right: 12px;
  width: 20px; height: 20px;
  background: var(--accent); color: var(--text-inverse);
  border-radius: 50%; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.script-option-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.script-option-name { font-size: 13px; font-weight: 600; color: var(--text); }
.script-option-tag {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px;
  padding: 2px 7px; border-radius: 4px;
}
.script-option-tag.rec { background: var(--accent-bg); color: var(--accent-dark); }
.script-option-tag.casual { background: rgba(99,102,241,0.1); color: #4F46E5; }
.script-option-tag.formal { background: rgba(107,114,128,0.1); color: #4B5563; }
.script-option-text { font-size: 13px; color: var(--text-2); line-height: 1.55; font-style: italic; }
.script-custom-area { display: none; margin-top: 8px; }
.script-custom-area.visible { display: block; }
.script-policy-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; color: var(--accent-dark);
  background: var(--accent-bg); padding: 3px 9px; border-radius: 4px;
  margin-bottom: 10px;
}

/* Business scenario sections */
.biz-section {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  overflow: hidden;
}
.biz-section-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  user-select: none;
}
.biz-section-icon { font-size: 18px; flex-shrink: 0; }
.biz-section-title { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.biz-section-body {
  padding: 0 16px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* Cost Strip */
.cost-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 1rem; }
.cost-strip-item {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  text-align: center;
}
.cost-strip-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); }
.cost-strip-value { font-size: 18px; font-weight: 700; color: var(--text); margin-top: 2px; }
.cost-strip-note { font-size: 10px; color: var(--text-3); }

/* ══════════════════════════════════════════════════════════════
   VOICE INBOX INTEGRATION — expanded call card detail.
   Matches Voice-Inbox-Mockup.html.
   ══════════════════════════════════════════════════════════════ */
.vc-att-item { cursor: pointer; }
.vc-att-item .vc-detail {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.vc-att-item.expanded .vc-detail { display: block; }

.vc-meta-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.vc-meta-tag {
  font-size: 10px; font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  display: inline-flex; align-items: center; gap: 4px;
}
.vc-meta-tag.sentiment-frustrated { background: rgba(255,59,48,0.1); color: var(--error); }
.vc-meta-tag.sentiment-neutral { background: var(--surface-2); color: var(--text-2); }
.vc-meta-tag.sentiment-positive { background: rgba(52,199,89,0.1); color: var(--success); }
.vc-meta-tag.sentiment-impatient { background: rgba(255,149,0,0.1); color: #CC7700; }

.vc-priority-reason {
  font-size: 11px;
  color: var(--text-2);
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.vc-priority-reason .label { font-weight: 600; color: var(--text); white-space: nowrap; }

/* Translation line under a non-English transcript bubble (live + saved).
   Visually distinct from the original — italic, dimmer color, leading icon. */
.vm-live-msg-translation {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(0,0,0,0.08);
  font-size: 12px;
  color: var(--text-2);
  font-style: italic;
  line-height: 1.45;
}
.vm-bubble-translation {
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(184,150,90,0.06);
  border-left: 2px solid rgba(184,150,90,0.4);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-2);
  font-style: italic;
  line-height: 1.45;
}
.vm-translate-icon {
  font-style: normal;
  font-size: 11px;
  margin-right: 4px;
  opacity: 0.7;
}
.vm-bubble-lang {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent-dark, #8B7340);
  background: var(--accent-bg, rgba(184,150,90,0.12));
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
  letter-spacing: 0.05em;
}

/* Inline tool-call pills inside the post-call Transcript tab.
   Visually distinct from message bubbles so the reader can see exactly
   when the AI used a tool in the flow of conversation. */
.vm-tx-tool {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong, rgba(0,0,0,0.12));
  border-radius: 999px;
  padding: 4px 12px;
  margin: 6px auto;
  max-width: max-content;
  font-style: italic;
}
.vm-tx-tool-label { font-weight: 500; }
.vm-tx-tool-conflict {
  color: var(--error);
  font-weight: 600;
  font-style: normal;
}
.vm-tx-tool-undone {
  color: var(--text-3);
  font-weight: 500;
  font-style: normal;
}

/* Inbox voice card — "what the AI created" blocks (todos, events).
   Shows the concrete tool outputs so the user can see exactly what
   landed in their calendar / to-do list from this call. */
.vc-created-block {
  background: rgba(52,199,89,0.06);
  border: 1px solid rgba(52,199,89,0.18);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.vc-created-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1B8B3A;
  margin-bottom: 6px;
}
.vc-created-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}
.vc-created-item + .vc-created-item { border-top: 1px solid rgba(52,199,89,0.12); padding-top: 6px; margin-top: 4px; }
.vc-created-icon { flex-shrink: 0; font-size: 14px; }
.vc-created-text { flex: 1; color: var(--text); font-weight: 500; }
.vc-created-meta { color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }

.vc-actions-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.vc-action-pill {
  font-size: 11px; font-weight: 500;
  padding: 4px 10px; border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent-dark);
  display: inline-flex; align-items: center; gap: 4px;
}

.vc-recording {
  background: var(--navy);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.vc-recording audio { background: transparent; }

.vc-transcript { margin-bottom: 12px; }
.vc-transcript-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
.vc-transcript-toggle {
  font-size: 10px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.vc-transcript-body {
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}
.vc-msg { display: flex; gap: 8px; margin-bottom: 8px; }
.vc-msg-label {
  font-size: 10px; font-weight: 600;
  color: var(--text-3);
  min-width: 48px; flex-shrink: 0;
  padding-top: 2px;
}
.vc-msg-label.caller { color: var(--accent); }
.vc-msg-label.aria { color: #7c5cbf; }
.vc-msg-bubble {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  max-width: 100%;
}
.vc-msg.aria .vc-msg-bubble { background: rgba(124,92,191,0.08); }

.vc-summary {
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.vc-summary-label {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-3); margin-bottom: 4px;
}
.vc-summary-text { font-size: 12px; color: var(--text); line-height: 1.5; }

.vc-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vc-quick-btn {
  font-size: 11px; font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 4px;
}
.vc-quick-btn:hover { border-color: var(--accent); color: var(--accent); }
.vc-quick-btn.primary {
  background: var(--accent); color: var(--text-inverse); border-color: var(--accent);
}
.vc-quick-btn.primary:hover { background: var(--accent-dark); color: var(--text-inverse); }

/* Voice Activity Sidebar Card */
.voice-stats-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
}
.voice-stats-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  color: var(--text);
}
.voice-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.voice-stat-box {
  border-radius: var(--radius-sm);
  padding: 10px;
  text-align: center;
}
.voice-stat-box .stat-num { font-size: 20px; font-weight: 700; }
.voice-stat-box .stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-3); }

@media (max-width: 900px) {
  .policy-grid { grid-template-columns: 1fr; }
  .voice-option-grid { grid-template-columns: 1fr 1fr; }
  .model-option-grid { grid-template-columns: 1fr; }
  .cost-strip { grid-template-columns: 1fr; }
  .gr-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   HEALTH MAP — Site Settings admin tab
   ═══════════════════════════════════════════════════════════ */

/* Tokens reused from the mockup so the Health Map keeps its own
   palette without polluting the global sovereign tokens. These
   resolve to existing sovereign vars where one exists. */
.hm-kpi-strip,
.hm-topo-card,
.hm-detail-drawer,
.bt-card,
.bt-detail {
  --hm-bg:#FAFAF8;
  --hm-surface:#FFFFFF;
  --hm-surface-2:#F3F2EE;
  --hm-border:rgba(0,0,0,0.07);
  --hm-border-strong:rgba(0,0,0,0.12);
  --hm-text:#1A1D21;
  --hm-text-2:#6B7280;
  --hm-text-3:#A1A7B0;
  --hm-accent:#B8965A;
  --hm-accent-bg:rgba(184,150,90,0.12);
  --hm-success:#34C759;
  --hm-success-bg:rgba(52,199,89,0.1);
  --hm-warning:#FF9500;
  --hm-warning-bg:rgba(255,149,0,0.1);
  --hm-error:#FF3B30;
  --hm-error-bg:rgba(255,59,48,0.1);
  --hm-radius-sm:6px;
  --hm-radius-md:10px;
}

/* KPI strip */
.hm-kpi-strip {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  margin-bottom:16px;
}
.hm-kpi-card {
  background:var(--hm-surface); border:1px solid var(--hm-border);
  border-radius:var(--hm-radius-sm); padding:14px 16px; text-align:center;
}
.hm-kpi-val { font-size:1.6rem; font-weight:700; color:var(--hm-text); }
.hm-kpi-label { font-size:10px; color:var(--hm-text-3); margin-top:2px; text-transform:uppercase; letter-spacing:0.4px; }

/* Toolbar (reused across Overview, Bug Tracker, Dependencies, History) */
.hm-toolbar { display:flex; justify-content:space-between; align-items:center; margin:16px 0 14px; }
.hm-toolbar h3 { font-size:14px; font-weight:600; margin:0; color:var(--hm-text); font-family:var(--sans); }
.hm-filters { display:flex; gap:4px; }
.hm-filter-btn {
  padding:4px 10px; border-radius:5px; font-size:10px; font-weight:500;
  border:1px solid var(--hm-border); background:var(--hm-bg); color:var(--hm-text-2);
  cursor:pointer; font-family:var(--sans);
}
.hm-filter-btn.active { background:var(--navy,#1e2d3d); color:var(--text-inverse); border-color:var(--navy,#1e2d3d); }

/* Topology card */
.hm-topo-card { background:var(--hm-surface); border:1px solid var(--hm-border); border-radius:var(--hm-radius-md); padding:16px; margin-bottom:14px; }
.topo-container { position:relative; }
.topo-svg { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.topo-svg path, .topo-svg line { pointer-events:visibleStroke; }
.topo-layers { position:relative; z-index:2; }
.layer-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--hm-text-3); margin:14px 0 6px 2px; }
.layer-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.layer-spacer { height:24px; }

/* Flow lines */
.flow-line { stroke-width:1.5; fill:none; opacity:0.25; transition:opacity 0.25s, stroke-width 0.25s; }
.flow-line.ok { stroke:var(--hm-success); }
.flow-line.warn { stroke:var(--hm-warning); }
.flow-line.err { stroke:var(--hm-error); }
.flow-line.idle { stroke:var(--hm-text-3); stroke-dasharray:4 4; }
.flow-line.ext { stroke-dasharray:6 4; }
.flow-line.highlighted { opacity:0.7; stroke-width:2.5; }
.flow-line.dimmed { opacity:0.04; }
@keyframes hmFlowPulse { 0%{stroke-dashoffset:24;} 100%{stroke-dashoffset:0;} }
.flow-anim { stroke-width:2; fill:none; stroke-dasharray:4 20; animation:hmFlowPulse 1.5s linear infinite; opacity:0; transition:opacity 0.3s; }
.flow-anim.ok   { stroke:var(--hm-success); }
.flow-anim.warn { stroke:var(--hm-warning); }
.flow-anim.err  { stroke:var(--hm-error); }
.flow-anim.idle { stroke:var(--hm-text-3); }
.flow-anim.highlighted { opacity:0.65; }
.topo-layers .node-card, .topo-layers .pill { position:relative; z-index:3; }

.node-card {
  padding:8px 12px; background:var(--hm-bg); border:1px solid var(--hm-border); border-radius:6px;
  font-size:11px; cursor:default; transition:all 0.15s; min-width:100px; flex:1;
  font-family:var(--sans);
}
.node-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.06); border-color:var(--hm-border-strong); }
.node-card.err { background:var(--hm-error-bg); border-color:rgba(255,59,48,0.2); }
.node-card.warn { background:var(--hm-warning-bg); border-color:rgba(255,149,0,0.15); }
.node-card.ok { background:var(--hm-success-bg); border-color:rgba(52,199,89,0.15); }
.node-card .node-top { display:flex; justify-content:space-between; align-items:center; }
.node-card .node-name { font-weight:600; font-size:11px; color:var(--hm-text); }
.node-card .node-sub { font-size:9px; color:var(--hm-text-3); margin-top:1px; }
.topo-layers .dot { display:inline-block; width:7px; height:7px; border-radius:50%; }
/* Status dots — used by both topology nodes AND the legend at the bottom.
   Legend uses .hm-legend .dot so the rule must not be scoped only to
   .topo-layers, otherwise the legend renders colorless dots. */
.topo-layers .dot.g,
.hm-legend .dot.g { background:var(--hm-success); }
.topo-layers .dot.y,
.hm-legend .dot.y { background:var(--hm-warning); }
.topo-layers .dot.r,
.hm-legend .dot.r { background:var(--hm-error); }
.topo-layers .dot.idle,
.hm-legend .dot.idle { background:var(--hm-text-3); }

/* Ensure the legend dots have a base shape even if .topo-layers .dot{} rules
   didn't apply (size, border-radius). */
.hm-legend .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 2px;
}

.topo-layers .pill {
  padding:6px 12px; border-radius:6px; font-size:10px; font-weight:500;
  display:inline-flex; align-items:center; gap:4px; font-family:var(--sans);
  border:1px solid transparent; color:var(--hm-text);
}
.topo-layers .pill.err { color:var(--hm-error); font-weight:600; }
.topo-layers .pill.warn { color:var(--hm-warning); }
.topo-layers .pill.ok { color:var(--hm-text); }

/* Legend */
.hm-legend { display:flex; gap:14px; font-size:10px; color:var(--hm-text-3); margin-top:10px; padding-top:8px; border-top:1px solid var(--hm-border); font-family:var(--sans); }
.hm-legend-item { display:flex; align-items:center; gap:4px; }

/* Detail drawer */
.hm-detail-drawer {
  display:none; margin-top:14px; padding:14px 16px;
  background:var(--hm-surface); border:1px solid var(--hm-border);
  border-radius:var(--hm-radius-sm);
  animation:hmSlideDown 0.2s ease;
}
.hm-detail-drawer.open { display:block; }
@keyframes hmSlideDown { from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:translateY(0);} }
.hm-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:12px; font-family:var(--sans); }
.hm-detail-grid .dl { color:var(--hm-text-3); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
.hm-detail-grid .dd { font-weight:500; margin-bottom:6px; color:var(--hm-text); }

/* Blink */
@keyframes hmBlink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.topo-layers .blink, .bt-dot.blink { animation:hmBlink 1.8s infinite; }

/* ── Bug Tracker (bt-*) ── */
.bt-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.bt-filters { display:flex; gap:4px; flex-wrap:wrap; }
.bt-filter {
  padding:4px 10px; border-radius:5px; font-size:11px; font-weight:500;
  border:1px solid var(--hm-border); background:var(--hm-bg); color:var(--hm-text-2);
  cursor:pointer; display:inline-flex; gap:5px; align-items:center; font-family:var(--sans);
}
.bt-filter.active { background:var(--navy,#1e2d3d); color:var(--text-inverse); border-color:var(--navy,#1e2d3d); }
.bt-filter-count { font-size:9px; opacity:0.7; }
.bt-tools { display:flex; gap:4px; }
.bt-sort {
  padding:4px 10px; border-radius:5px; font-size:11px;
  border:1px solid var(--hm-border); background:var(--hm-surface);
  color:var(--hm-text); font-family:var(--sans); cursor:pointer;
}

.bt-list { display:flex; flex-direction:column; gap:8px; }
.bt-card {
  background:var(--hm-surface); border:1px solid var(--hm-border);
  border-radius:var(--hm-radius-md); overflow:hidden;
}
.bt-card-head {
  display:flex; align-items:flex-start; gap:12px; padding:12px 14px;
  cursor:pointer; transition:background 0.12s;
}
.bt-card-head:hover { background:var(--hm-surface-2); }
.bt-card.expanded .bt-card-head { background:var(--hm-surface-2); }
.bt-dot {
  width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:5px;
}
.bt-card-summary { flex:1; min-width:0; }
.bt-card-title { font-size:13px; font-weight:600; color:var(--hm-text); font-family:var(--sans); }
.bt-card-sub { font-size:11px; color:var(--hm-text-2); margin-top:2px; font-family:var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bt-card-meta { display:flex; gap:10px; font-size:10px; color:var(--hm-text-3); margin-top:4px; flex-wrap:wrap; font-family:var(--sans); }
.bt-card-meta strong { color:var(--hm-text-2); }
.bt-card-badges { display:flex; flex-direction:column; gap:4px; align-items:flex-end; flex-shrink:0; }
.bt-rc-tag {
  padding:2px 7px; border-radius:4px; font-size:10px; font-weight:500;
  background:var(--hm-surface-2); color:var(--hm-text-2); font-family:var(--sans);
}
.bt-tier-tag {
  padding:2px 7px; border-radius:4px; font-size:10px; font-weight:600;
  font-family:var(--sans);
}
.bt-card .status-badge {
  padding:3px 8px; border-radius:4px; font-size:10px; font-weight:600;
  font-family:var(--sans);
}

/* Bug detail */
.bt-card-body { border-top:1px solid var(--hm-border); padding:14px 16px; background:var(--hm-bg); }
.bt-detail { display:flex; flex-direction:column; gap:16px; }
.bt-detail-section { background:var(--hm-surface); border:1px solid var(--hm-border); border-radius:var(--hm-radius-sm); padding:12px 14px; }
.bt-section-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--hm-text-3); margin-bottom:8px; font-family:var(--sans); }

/* Step chain (reused in bug detail) */
.bt-detail .step { display:flex; gap:12px; position:relative; padding-bottom:14px; }
.bt-detail .step:last-child { padding-bottom:0; }
.bt-detail .step::before { content:''; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--hm-border); }
.bt-detail .step:last-child::before { display:none; }
.bt-detail .step-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; z-index:1; }
.bt-detail .step-body { flex:1; min-width:0; }
.bt-detail .step-title { font-size:12px; font-weight:600; display:flex; align-items:center; gap:6px; color:var(--hm-text); font-family:var(--sans); }
.bt-detail .step-sub { font-size:11px; color:var(--hm-text-2); margin-top:2px; font-family:var(--sans); }
.bt-detail .step-detail { margin-top:6px; padding:8px 12px; background:var(--hm-bg); border:1px solid var(--hm-border); border-radius:var(--hm-radius-sm); font-size:11px; color:var(--hm-text-2); line-height:1.7; font-family:var(--sans); }
.bt-detail .tag { display:inline-block; padding:1px 6px; border-radius:3px; font-size:9px; font-weight:600; font-family:var(--sans); }

/* Pattern + sparkline */
.bt-pattern { font-size:12px; color:var(--hm-text-2); font-family:var(--sans); margin-bottom:8px; }
.bt-sparkline { display:flex; gap:2px; align-items:flex-end; height:30px; padding:2px 0; }
.bt-spark-bar { width:8px; border-radius:2px 2px 0 0; min-height:2px; flex-shrink:0; }
.bt-sparkline-axis { display:flex; justify-content:space-between; font-size:9px; color:var(--hm-text-3); margin-top:2px; font-family:var(--sans); }

/* Diagnosis panel */
.bt-diagnosis { display:flex; flex-direction:column; gap:10px; }
.bt-diag-head { display:flex; align-items:center; gap:10px; }
.bt-diag-icon { font-size:24px; }
.bt-diag-title { font-size:13px; font-weight:600; color:var(--hm-text); font-family:var(--sans); }
.bt-diag-sub { font-size:11px; color:var(--hm-text-2); font-family:var(--sans); margin-top:2px; }
.bt-fix-block { background:var(--hm-bg); border:1px solid var(--hm-border); border-radius:var(--hm-radius-sm); padding:10px 12px; }
.bt-fix-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--hm-text-3); margin-bottom:6px; font-family:var(--sans); }
.bt-fix-code { background:var(--hm-surface-2); padding:8px 10px; border-radius:4px; font-family:'SF Mono', Menlo, monospace; font-size:11px; color:var(--hm-text); white-space:pre-wrap; word-break:break-word; overflow:auto; max-height:200px; }
.bt-fix-note { font-size:11px; color:var(--hm-text-2); margin-top:8px; font-family:var(--sans); font-style:italic; }
.bt-affected { font-size:11px; color:var(--hm-text-2); font-family:var(--sans); display:flex; flex-direction:column; gap:4px; }
.bt-affected strong { color:var(--hm-text); }

/* Occurrence table */
.bt-occ-table { width:100%; border-collapse:collapse; font-family:var(--sans); font-size:11px; }
.bt-occ-table th, .bt-occ-table td { text-align:left; padding:5px 8px; border-bottom:1px solid var(--hm-border); }
.bt-occ-table th { color:var(--hm-text-3); font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:0.4px; }
.bt-occ-table td { color:var(--hm-text); }

/* Actions */
.bt-actions { display:flex; gap:6px; flex-wrap:wrap; }
.bt-action {
  padding:6px 14px; border-radius:5px; font-size:11px; font-weight:500;
  border:1px solid var(--hm-border); background:var(--hm-surface); color:var(--hm-text);
  cursor:pointer; font-family:var(--sans);
}
.bt-action:hover { border-color:var(--hm-border-strong); }

.bt-loading, .bt-empty, .bt-error {
  padding:20px; text-align:center; font-size:12px; font-family:var(--sans);
  color:var(--hm-text-3);
}
.bt-error { color:var(--hm-error); }

/* Dependencies tab */
.hm-dep-picker { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.hm-dep-btn {
  padding:6px 12px; border-radius:6px; font-size:11px; font-weight:500;
  border:1px solid var(--hm-border); background:var(--hm-bg); color:var(--hm-text-2);
  cursor:pointer; font-family:var(--sans);
}
.hm-dep-btn.active { background:var(--navy,#1e2d3d); color:var(--text-inverse); border-color:var(--navy,#1e2d3d); }
.hm-dep-btn:hover:not(.active) { border-color:var(--hm-border-strong); }
.dep-row { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--hm-border); font-family:var(--sans); font-size:12px; }
.dep-row:last-child { border:none; }

/* Heatmap (History tab) */
.hm-row { display:flex; align-items:center; gap:2px; margin-bottom:2px; }
.hm-label { width:90px; flex-shrink:0; font-size:9px; color:var(--hm-text-2); text-align:right; padding-right:6px; font-family:'SF Mono', Menlo, monospace; }
.hm-cell { width:16px; height:14px; border-radius:2px; flex-shrink:0; cursor:pointer; position:relative; }
.hm-cell:hover { outline:1px solid var(--hm-text-2); outline-offset:1px; }

/* Status badges */
.status-badge.status-active { background:var(--hm-error-bg); color:var(--hm-error); }
.status-badge.status-resolved { background:var(--hm-success-bg); color:var(--hm-success); }
.status-badge.status-investigating { background:var(--hm-warning-bg); color:var(--hm-warning); }

@media (max-width:860px) {
  .hm-kpi-strip { grid-template-columns:1fr 1fr; }
  .hm-detail-grid { grid-template-columns:1fr; }
  .bt-card-head { flex-wrap:wrap; }
  .bt-card-badges { flex-direction:row; }
}


/* ═══════════════════════════════════════════════════════════════ */
/* ═══ SCHEMA VIEWER (sv-*) ═══════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════ */

:root {
  --sv-bg: var(--paper, #FAFAF8);
  --sv-surface: var(--surface, #fff);
  --sv-surface-2: rgba(0,0,0,0.02);
  --sv-rule: var(--rule, rgba(0,0,0,0.06));
  --sv-rule-strong: rgba(0,0,0,0.12);
  --sv-text: var(--text, #2c2c2c);
  /* Theme-aware muted text (was hardcoded rgba(0,0,0,…) → unreadable in dark). */
  --sv-muted: var(--text-2, rgba(0,0,0,0.55));
  --sv-faint: var(--text-3, rgba(0,0,0,0.45));
  --sv-text-light: rgba(0,0,0,0.45);
  --sv-text-faint: rgba(0,0,0,0.3);
  --sv-navy: var(--navy, #1e2d3d);
  --sv-brass: var(--brass, #B8965A);
  --sv-accent-bg: rgba(184,150,90,0.12);
}

/* ── Overview tab ─────────────────────────────────────────────── */
.sv-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:24px;
}
.sv-card {
  background:var(--sv-surface); border:1px solid var(--sv-rule); border-radius:10px;
  padding:20px; text-align:center; transition:all 0.15s;
}
.sv-card:hover {
  border-color:var(--sv-brass); transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(0,0,0,0.06);
}
.sv-card-icon { font-size:28px; margin-bottom:8px; line-height:1; }
.sv-card-value { font-size:28px; font-weight:700; color:var(--sv-text); line-height:1; }
.sv-card-label { font-size:13px; color:var(--sv-muted); margin-top:4px; font-family:var(--sans, 'Inter', sans-serif); }
.sv-card-bar {
  height:6px; background:var(--sv-rule); border-radius:3px; margin-top:12px; overflow:hidden;
}
.sv-card-bar-fill {
  height:100%; border-radius:3px; transition:width 0.6s ease; background:var(--sv-brass);
}
.sv-table-section { padding:0 24px 24px; }
.sv-table-header {
  display:grid; grid-template-columns:1fr 100px 100px 1fr; gap:8px;
  padding:8px 12px; background:rgba(0,0,0,0.025); border-radius:6px 6px 0 0;
  font-size:11px; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--sv-muted); font-weight:600; font-family:var(--sans);
}
.sv-table-body {
  border:1px solid var(--sv-rule); border-top:none; border-radius:0 0 6px 6px;
}
.sv-table-row {
  display:grid; grid-template-columns:1fr 100px 100px 1fr; gap:8px;
  padding:10px 12px; border-bottom:1px solid rgba(0,0,0,0.04);
  align-items:center; font-size:13px; transition:background 0.1s;
  font-family:var(--sans);
}
.sv-table-row:last-child { border-bottom:none; }
.sv-table-row:hover { background:rgba(0,0,0,0.015); }
.sv-table-name {
  font-family:var(--mono, 'SF Mono', 'Fira Code', 'Consolas', monospace);
  font-size:12px; font-weight:500; color:var(--sv-text);
}
.sv-bar { height:8px; background:rgba(0,0,0,0.04); border-radius:4px; overflow:hidden; }
.sv-bar-fill { height:100%; border-radius:4px; background:var(--sv-navy); }

/* ── Tables tab ──────────────────────────────────────────────── */
.sv-te-layout {
  display:grid; grid-template-columns:250px 1fr; min-height:520px;
}
.sv-te-sidebar {
  border-right:1px solid var(--sv-rule); padding:16px 0;
  background:rgba(0,0,0,0.012); overflow-y:auto; max-height:600px;
}
.sv-te-search { padding:0 12px 12px; }
.sv-te-search input {
  width:100%; padding:8px 12px; border:1px solid var(--sv-rule);
  border-radius:6px; font-size:13px; font-family:var(--sans);
  background:var(--sv-surface); outline:none; transition:border-color 0.15s;
}
.sv-te-search input:focus { border-color:var(--sv-brass); }
.sv-te-group-label {
  font-size:10px; text-transform:uppercase; letter-spacing:1px;
  color:var(--sv-brass); padding:12px 16px 4px; font-weight:600;
  font-family:var(--sans);
}
.sv-te-item {
  display:flex; align-items:center; gap:8px; padding:7px 16px;
  cursor:pointer; font-size:13px; color:var(--sv-text);
  font-family:var(--sans);
  transition:all 0.12s; border-left:3px solid transparent;
}
.sv-te-item:hover { background:rgba(0,0,0,0.02); }
.sv-te-item.active {
  background:var(--sv-accent-bg); color:var(--sv-text);
  border-left-color:var(--sv-brass); font-weight:500;
}
.sv-te-badge {
  margin-left:auto; font-size:9px; padding:1px 6px;
  border-radius:4px; background:rgba(0,0,0,0.04);
  color:var(--sv-text-light); font-weight:600;
}
.sv-te-badge.rls { background:rgba(45,106,79,0.12); color:#2d6a4f; }
.sv-te-badge.no-rls { background:rgba(0,0,0,0.04); color:var(--sv-text-light); }

.sv-te-detail { padding:24px; overflow-y:auto; max-height:600px; font-family:var(--sans); }
.sv-te-detail-header {
  display:flex; align-items:center; gap:12px; margin-bottom:4px; flex-wrap:wrap;
}
.sv-te-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:12px; font-size:11px; font-weight:500;
}
.sv-te-pill.rls { background:rgba(45,106,79,0.12); color:#2d6a4f; }
.sv-te-pill.mig { background:rgba(0,122,255,0.1); color:#007AFF; cursor:pointer; }
.sv-te-pill.mig:hover { background:rgba(0,122,255,0.18); }
.sv-te-meta {
  display:flex; gap:16px; margin:8px 0 20px;
  font-size:13px; color:var(--sv-text-light); flex-wrap:wrap;
}

.sv-col-table { width:100%; border-collapse:collapse; font-size:13px; font-family:var(--sans); }
.sv-col-table th {
  text-align:left; padding:8px 12px; background:rgba(0,0,0,0.025);
  font-size:10px; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--sv-muted); font-weight:600; border-bottom:2px solid var(--sv-rule);
}
.sv-col-table td {
  padding:8px 12px; border-bottom:1px solid rgba(0,0,0,0.04);
  vertical-align:top;
}
.sv-col-table tr:hover td { background:rgba(0,0,0,0.012); }
.sv-col-name {
  font-family:var(--mono, monospace); font-weight:600;
  color:var(--sv-text); font-size:13px;
}
.sv-col-type {
  font-family:var(--mono, monospace); font-size:11px;
  color:var(--sv-brass); background:var(--sv-accent-bg);
  padding:2px 6px; border-radius:4px;
}
.sv-col-badge {
  font-size:10px; padding:1px 6px; border-radius:3px; font-weight:600;
  display:inline-block; margin-right:4px;
}
.sv-col-pk { background:rgba(0,122,255,0.08); color:#007AFF; }
.sv-col-fk { background:rgba(107,63,160,0.08); color:#6b3fa0; cursor:help; }
.sv-col-nn { background:rgba(0,0,0,0.04); color:var(--sv-faint); }
.sv-col-uq { background:rgba(0,166,153,0.08); color:#00a699; }
.sv-col-mig {
  background:rgba(0,122,255,0.06); color:#007AFF;
  font-family:var(--mono, monospace);
}
.sv-col-mig-later { background:rgba(0,122,255,0.14); }
.sv-col-default {
  font-family:var(--mono, monospace); font-size:11px;
  color:var(--sv-text-light);
}

.sv-mig-history {
  margin-top:24px; border:1px solid var(--sv-rule);
  border-radius:6px; overflow:hidden;
}
.sv-mig-history-head {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:rgba(0,0,0,0.025); cursor:pointer; font-size:13px;
  font-weight:500; color:var(--sv-text); user-select:none;
  transition:background 0.1s;
}
.sv-mig-history-head:hover { background:rgba(0,0,0,0.04); }
.sv-mig-history-head .arr {
  font-size:10px; color:var(--sv-text-light); transition:transform 0.15s;
}
.sv-mig-history.open .arr { transform:rotate(90deg); }
.sv-mig-history-head .cnt {
  margin-left:auto; font-size:11px; color:var(--sv-text-light); font-weight:400;
}
.sv-mig-history-body { display:none; }
.sv-mig-history.open .sv-mig-history-body { display:block; }
.sv-mh-row {
  display:grid; grid-template-columns:60px 1fr 140px; gap:8px;
  padding:8px 14px; border-top:1px solid rgba(0,0,0,0.04);
  align-items:center; font-size:12px; transition:background 0.1s;
}
.sv-mh-row:hover { background:rgba(0,0,0,0.015); }
.sv-mh-num {
  font-family:var(--mono, monospace); font-weight:600; font-size:11px;
  color:var(--sv-text); background:rgba(0,0,0,0.04);
  padding:2px 6px; border-radius:4px; text-align:center;
}
.sv-mh-num.safety { background:rgba(230,126,34,0.12); color:#c77600; }
.sv-mh-desc { color:var(--sv-text); }
.sv-mh-change {
  font-family:var(--mono, monospace); font-size:10px;
  color:var(--sv-text-faint); margin-left:6px;
}
.sv-mh-date {
  font-family:var(--mono, monospace); font-size:10px;
  color:var(--sv-text-light); text-align:right;
}

/* ── ERD tab ─────────────────────────────────────────────────── */
.sv-erd-frame { display:flex; flex-direction:column; }
.sv-erd-controls {
  display:flex; flex-direction:column; gap:10px;
  padding:14px 18px; background:rgba(0,0,0,0.02);
  border-bottom:1px solid var(--sv-rule);
}
.sv-erd-search-wrap { position:relative; width:100%; max-width:320px; }
.sv-erd-search-icon {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  font-size:13px; opacity:0.5; pointer-events:none;
}
.sv-erd-search {
  width:100%; padding:7px 32px 7px 30px;
  border:1px solid var(--sv-rule); border-radius:6px;
  background:var(--sv-surface); font-size:13px; font-family:var(--sans);
  color:var(--sv-text); outline:none;
  transition:border-color 0.15s, box-shadow 0.15s;
}
.sv-erd-search::placeholder { color:var(--sv-text-faint); }
.sv-erd-search:focus {
  border-color:var(--sv-brass);
  box-shadow:0 0 0 3px rgba(184,150,90,0.12);
}
.sv-erd-search-clear {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border:none; background:rgba(0,0,0,0.06);
  border-radius:50%; cursor:pointer; font-size:11px;
  display:flex; align-items:center; justify-content:center;
  color:var(--sv-text-light);
}
.sv-erd-search-clear:hover { background:rgba(0,0,0,0.12); color:var(--sv-text); }
.sv-erd-filters { display:flex; gap:4px; flex-wrap:wrap; }
.sv-erd-filters button {
  padding:6px 12px; border:1px solid var(--sv-rule); border-radius:6px;
  background:var(--sv-surface); font-size:12px; font-family:var(--sans);
  cursor:pointer; color:var(--sv-text-light);
  transition:all 0.12s; white-space:nowrap;
}
.sv-erd-filters button:hover { border-color:var(--sv-brass); color:var(--sv-text); }
.sv-erd-filters button.active {
  background:var(--sv-navy); color:var(--text-inverse); border-color:var(--sv-text); font-weight:500;
}

.sv-erd-container {
  position:relative; height:620px;
  background:
    radial-gradient(circle at 18px 18px, rgba(0,0,0,0.045) 1px, transparent 1.5px) 0 0 / 36px 36px,
    linear-gradient(to bottom, rgba(0,0,0,0.012), rgba(0,0,0,0.025));
  overflow:hidden; cursor:grab;
  border-top:1px solid var(--sv-rule);
}
.sv-erd-container.panning { cursor:grabbing; }
.sv-erd-container.panning .sv-erd-node { pointer-events:none; }

.sv-erd-legend {
  position:absolute; top:14px; right:14px; z-index:10;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid var(--sv-rule); border-radius:8px;
  padding:10px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  max-width:200px; max-height:calc(100% - 80px); overflow-y:auto;
  font-family:var(--sans);
}
.sv-erd-legend-title {
  font-size:9px; text-transform:uppercase; letter-spacing:0.6px;
  color:var(--sv-text-light); font-weight:700; margin-bottom:6px;
}
.sv-erd-legend-item {
  display:flex; align-items:center; gap:8px;
  padding:3px 0; font-size:11px; cursor:pointer; color:var(--sv-text);
  transition:color 0.12s;
}
.sv-erd-legend-item:hover { color:var(--sv-text); }
.sv-erd-legend-swatch { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.sv-erd-legend-count {
  margin-left:auto; font-size:10px; color:var(--sv-text-faint);
  font-family:var(--mono, monospace);
}

.sv-erd-zoom {
  position:absolute; bottom:14px; right:14px;
  display:flex; align-items:center; gap:2px; z-index:10;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid var(--sv-rule); border-radius:8px;
  padding:4px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.sv-erd-zoom button {
  width:30px; height:30px; border:none; background:transparent;
  border-radius:5px; font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--sv-text-light); transition:background 0.12s, color 0.12s;
}
.sv-erd-zoom button:hover { background:rgba(0,0,0,0.05); color:var(--sv-text); }
.sv-erd-zoom-pct {
  font-size:11px; font-family:var(--mono, monospace);
  color:var(--sv-text-light); padding:0 8px;
  min-width:42px; text-align:center;
  border-left:1px solid var(--sv-rule);
  border-right:1px solid var(--sv-rule);
}

.sv-erd-hint {
  position:absolute; bottom:14px; left:14px; z-index:10;
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid var(--sv-rule); border-radius:8px;
  padding:6px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  font-size:11px; color:var(--sv-text-light); font-family:var(--sans);
}
.sv-erd-hint b {
  color:var(--sv-text); font-weight:600;
  background:rgba(0,0,0,0.05); padding:1px 5px; border-radius:3px;
  font-family:var(--mono, monospace); font-size:10px;
  margin-right:3px;
}

.sv-erd-footer {
  padding:10px 18px; font-size:11px; color:var(--sv-text-light);
  font-family:var(--sans); border-top:1px solid var(--sv-rule);
  background:rgba(0,0,0,0.012);
}

.sv-erd-canvas {
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:2;
}
.sv-erd-line {
  stroke:rgba(0,0,0,0.22); stroke-width:1.4; fill:none;
  transition:stroke 0.2s, stroke-width 0.2s, opacity 0.2s;
}
.sv-erd-line.dimmed { opacity:0.12; }
.sv-erd-line.related {
  stroke:var(--sv-brass); stroke-width:2.2;
  marker-end:url(#sv-erd-arrow-hl);
}

.sv-erd-stage {
  position:absolute; top:0; left:0;
  transform-origin:0 0;
  z-index:1;
}
.sv-erd-stage.sv-erd-animating {
  transition:transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.sv-erd-node {
  position:absolute;
  background:var(--sv-surface);
  border:1px solid var(--sv-rule); border-radius:9px;
  box-shadow:0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.04);
  overflow:hidden;
  transition:box-shadow 0.18s, border-color 0.18s, opacity 0.25s, transform 0.18s;
  cursor:pointer; user-select:none; font-family:var(--sans);
}
.sv-erd-node:hover {
  border-color:var(--sv-brass);
  box-shadow:0 4px 16px rgba(0,0,0,0.1), 0 0 0 1px var(--sv-brass);
  z-index:5;
}
.sv-erd-node.hl {
  border-color:var(--sv-brass);
  box-shadow:0 0 0 3px var(--sv-accent-bg), 0 8px 24px rgba(0,0,0,0.12);
  z-index:6;
}
.sv-erd-node.related-node {
  border-color:var(--sv-brass);
  box-shadow:0 0 0 2px var(--sv-accent-bg), 0 4px 12px rgba(0,0,0,0.06);
  z-index:4;
}
.sv-erd-node.faded { opacity:0.16; }
.sv-erd-node.search-hit {
  border-color:var(--sv-brass);
  box-shadow:0 0 0 3px rgba(184,150,90,0.25), 0 6px 20px rgba(184,150,90,0.18);
  z-index:7;
}
.sv-erd-node.search-miss { opacity:0.22; filter:saturate(0.5); }

.sv-erd-node-head {
  padding:9px 12px; color:var(--text-inverse);
  font-family:var(--mono, monospace);
  font-size:12px; font-weight:600;
  display:flex; align-items:center; gap:6px;
  white-space:nowrap; overflow:hidden;
}
.sv-erd-node-head span {
  flex:1; overflow:hidden; text-overflow:ellipsis;
}
.sv-erd-node-cols { padding:6px 0 8px; }
.sv-erd-node-col {
  padding:3px 12px; font-family:var(--mono, monospace);
  color:var(--sv-text); font-size:11px;
  display:flex; align-items:center;
}
.sv-erd-pk { font-size:10px; margin-right:2px; }
.sv-erd-node-more {
  padding:4px 12px 0;
  font-size:10px; color:var(--sv-text-faint);
  font-family:var(--sans); font-style:italic;
  border-top:1px dashed rgba(0,0,0,0.06);
  margin-top:2px;
}

/* ── Inspector tab ───────────────────────────────────────────── */
.sv-ci-layout {
  display:grid; grid-template-columns:1fr 320px; min-height:520px;
}
.sv-ci-main {
  padding:24px; overflow-y:auto; max-height:600px;
}
.sv-ci-sidebar {
  border-left:1px solid var(--sv-rule);
  background:rgba(250,250,248,0.5);
  padding:20px; overflow-y:auto; max-height:600px;
}
.sv-ci-card {
  background:var(--sv-surface); border:1px solid var(--sv-rule);
  border-radius:6px; margin-bottom:8px; overflow:hidden;
  transition:border-color 0.12s; font-family:var(--sans);
}
.sv-ci-card:hover { border-color:var(--sv-brass); }
.sv-ci-card.open {
  border-color:var(--sv-brass);
  box-shadow:0 1px 4px rgba(0,0,0,0.04);
}
.sv-ci-card-head {
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; cursor:pointer;
}
.sv-ci-card.open .sv-ci-card-head { border-bottom:1px solid var(--sv-rule); }
.sv-ci-card-name {
  font-family:var(--mono, monospace); font-weight:600;
  font-size:13px; color:var(--sv-text);
}
.sv-ci-card-type {
  font-family:var(--mono, monospace); font-size:11px;
  color:var(--sv-brass); margin-left:auto;
}
.sv-ci-card-detail { display:none; padding:14px 16px; }
.sv-ci-card.open .sv-ci-card-detail { display:block; }
.sv-ci-row {
  display:flex; padding:6px 0;
  border-bottom:1px dashed rgba(0,0,0,0.04);
  font-size:12px;
}
.sv-ci-row:last-child { border-bottom:none; }
.sv-ci-row .l {
  width:120px; color:var(--sv-text-light); flex-shrink:0;
}
.sv-ci-row .v {
  font-family:var(--mono, monospace); font-size:12px;
  color:var(--sv-text); flex:1;
}
.sv-ci-stat {
  background:var(--sv-surface); border:1px solid var(--sv-rule);
  border-radius:6px; padding:14px; margin-bottom:10px;
}
.sv-ci-stat-label {
  font-size:11px; color:var(--sv-text-light);
  text-transform:uppercase; letter-spacing:0.5px;
  margin-bottom:4px; font-family:var(--sans);
}
.sv-ci-stat-value {
  font-size:20px; font-weight:700; color:var(--sv-text);
  font-family:var(--sans);
}
.sv-ci-stat-sub {
  font-size:11px; color:var(--sv-text-light); margin-top:4px;
  font-family:var(--sans);
}

/* ── RLS tab ─────────────────────────────────────────────────── */
.sv-rls-layout { padding:24px; overflow-y:auto; max-height:600px; font-family:var(--sans); }
.sv-rls-kpi-strip {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px;
}
.sv-rls-kpi {
  background:var(--sv-surface); border:1px solid var(--sv-rule);
  border-radius:8px; padding:16px; text-align:center;
}
.sv-rls-kpi-val {
  font-size:28px; font-weight:700; color:var(--sv-text); line-height:1;
}
.sv-rls-kpi-label {
  font-size:11px; color:var(--sv-text-light); margin-top:4px;
  text-transform:uppercase; letter-spacing:0.5px;
}
.sv-rls-row {
  display:grid; grid-template-columns:200px 110px 1fr 80px;
  gap:12px; padding:10px 16px;
  border-bottom:1px solid rgba(0,0,0,0.04);
  align-items:center; font-size:13px;
  transition:background 0.1s;
}
.sv-rls-row:hover { background:rgba(0,0,0,0.015); }
.sv-rls-row.header {
  background:rgba(0,0,0,0.025); font-size:11px;
  text-transform:uppercase; letter-spacing:0.5px;
  color:var(--sv-muted); font-weight:600;
  border-radius:6px 6px 0 0;
}
.sv-rls-dot {
  display:inline-block; width:8px; height:8px;
  border-radius:50%; margin-right:6px; vertical-align:middle;
}
.sv-rls-dot.on { background:#2d6a4f; }
.sv-rls-dot.bypass { background:#e67e22; }
.sv-rls-dot.off { background:#c0392b; }
.sv-rls-policy {
  font-family:var(--mono, monospace); font-size:11px;
  color:var(--sv-text-light);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── Migrations tab ──────────────────────────────────────────── */
.sv-mt-layout { padding:24px; overflow-y:auto; max-height:700px; font-family:var(--sans); }
.sv-mt-timeline {
  position:relative; padding-left:32px;
}
.sv-mt-timeline::before {
  content:''; position:absolute; left:11px; top:0; bottom:0;
  width:2px; background:var(--sv-rule);
}
.sv-mt-item {
  position:relative; margin-bottom:16px; cursor:pointer;
}
.sv-mt-item::before {
  content:''; position:absolute; left:-25px; top:6px;
  width:10px; height:10px; border-radius:50%;
  background:rgba(0,0,0,0.15);
  border:2px solid var(--sv-surface); z-index:1;
}
.sv-mt-item.latest::before { background:var(--sv-brass); }
.sv-mt-item.safety::before { background:#2d6a4f; }
.sv-mt-item-header {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.sv-mt-num {
  font-family:var(--mono, monospace); font-size:11px; font-weight:700;
  color:var(--text-inverse); background:var(--sv-navy);
  padding:2px 8px; border-radius:4px;
}
.sv-mt-title { font-size:14px; font-weight:500; color:var(--sv-text); }
.sv-mt-tag {
  font-size:10px; padding:2px 6px; border-radius:4px; font-weight:500;
}
.sv-mt-tag-t { background:rgba(0,122,255,0.08); color:#007AFF; }
.sv-mt-tag-c { background:rgba(45,106,79,0.12); color:#2d6a4f; }
.sv-mt-tag-s { background:rgba(230,126,34,0.12); color:#c77600; }
.sv-mt-tag-r { background:rgba(107,63,160,0.08); color:#6b3fa0; }
.sv-mt-tag-i { background:rgba(0,166,153,0.08); color:#00a699; }
.sv-mt-date {
  margin-left:auto; font-size:12px; color:var(--sv-text-light);
  font-family:var(--mono, monospace); white-space:nowrap;
  display:flex; align-items:center; gap:6px;
}
.sv-mt-ago {
  font-family:var(--sans); font-size:11px;
  color:var(--sv-text-faint);
  background:rgba(0,0,0,0.04); padding:1px 6px; border-radius:8px;
}
.sv-mt-body { margin-top:8px; display:none; }
.sv-mt-item.open .sv-mt-body { display:block; }
.sv-mt-deploy {
  display:flex; gap:16px; margin-bottom:8px; flex-wrap:wrap;
  font-size:11px; color:var(--sv-text-light);
}
.sv-mt-deploy strong { color:var(--sv-text); }
.sv-mt-code {
  background:var(--navy); color:#e0e0e0;
  padding:14px 18px; border-radius:6px;
  font-family:var(--mono, monospace); font-size:12px;
  line-height:1.6; overflow-x:auto; max-height:340px; overflow-y:auto;
  white-space:pre; margin:0;
}
.sv-kw { color:#c792ea; }
.sv-fn { color:#82aaff; }
.sv-str { color:#c3e88d; }
.sv-cmt { color:#6a9955; font-style:italic; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:900px) {
  .sv-grid { grid-template-columns:1fr 1fr; }
  .sv-te-layout { grid-template-columns:1fr; }
  .sv-ci-layout { grid-template-columns:1fr; }
  .sv-rls-kpi-strip { grid-template-columns:1fr 1fr; }
  .sv-rls-row { grid-template-columns:1fr 110px; gap:8px; }
  .sv-rls-row .sv-rls-policy,
  .sv-rls-row span:nth-child(4) { grid-column:1 / -1; padding-left:4px; }
  .sv-erd-container { height:520px; }
  .sv-erd-legend { max-width:160px; font-size:10px; }
  .sv-erd-search-wrap { max-width:100%; }
}
@media (max-width:768px) {
  .sv-table-row { grid-template-columns:1fr 80px 80px; gap:6px; }
  .sv-table-header { grid-template-columns:1fr 80px 80px; gap:6px; }
  .sv-table-row > div.sv-bar,
  .sv-table-header > span:nth-child(4) { display:none; }
  .sv-erd-container { height:460px; }
  .sv-erd-hint { display:none; }
  .sv-erd-legend { top:auto; bottom:60px; right:14px; max-height:140px; }
}

/* ════════════════════════════════════════════════════════════
   Voice · Phase 1 — Trust Tiers + Capabilities + new components
   (mirrors voice-settings-mockup.html visuals)
   ════════════════════════════════════════════════════════════ */

/* Tier cards (5-tier selector) */
.vt-tier-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px}
.vt-tier-card{border-radius:10px;padding:14px;color:var(--text-inverse);cursor:pointer;position:relative;transition:transform .15s;border:2px solid transparent}
.vt-tier-card.t-self{background:linear-gradient(135deg,#3D8B47,#5DA866)}
.vt-tier-card.t-trusted{background:linear-gradient(135deg,#1F2940,#3A4A6B)}
.vt-tier-card.t-contact{background:linear-gradient(135deg,#7156B8,#9678D4)}
.vt-tier-card.t-business{background:linear-gradient(135deg,#2D7B7B,#4DA0A0)}
.vt-tier-card.t-unknown{background:linear-gradient(135deg,#C8841E,#E0A852)}
.vt-tier-card.selected{transform:translateY(-2px);border-color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.vt-tier-num{font-size:10px;letter-spacing:1.5px;font-weight:600;opacity:.85}
.vt-tier-name{font-size:14px;font-weight:700;margin-top:4px}
.vt-tier-count{font-size:24px;font-weight:700;margin:10px 0 4px;letter-spacing:-.02em}
.vt-tier-sub{font-size:10px;opacity:.85}

/* Tier detail panel */
.vt-tier-detail{margin-top:18px;background:var(--surface-2,#F5F2EC);border:1px solid var(--rule,#E8E4DB);border-radius:10px;padding:18px;display:none}
.vt-tier-detail.active{display:block}
.vt-tier-detail h4{font-size:14px;font-weight:600;margin-bottom:8px}
.vt-tier-caps{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}

/* Permission row with desc + example */
.vt-perm-row{display:flex;align-items:flex-start;gap:12px;padding:11px 14px;background:var(--surface);border:1px solid var(--rule,#E8E4DB);border-radius:8px;font-size:12px}
.vt-perm-text{flex:1;min-width:0}
.vt-perm-name{font-weight:600;font-size:13px;color:var(--text,#1A1A1A);margin-bottom:3px}
.vt-perm-desc{font-size:11px;color:var(--text-3,#8A8A8A);line-height:1.5}
.vt-perm-eg{font-size:11px;color:var(--text-2,#4A4A4A);line-height:1.5;margin-top:4px;font-style:italic;padding:5px 8px;background:var(--surface-2,#F5F2EC);border-left:2px solid var(--accent,#B8924C);border-radius:4px}
.vt-perm-eg::before{content:'e.g. ';font-style:normal;font-weight:600;color:var(--accent,#B8924C);font-size:10px;letter-spacing:.5px;text-transform:uppercase;margin-right:4px}
.vt-perm-state{display:inline-block;font-size:9px;padding:3px 8px;border-radius:4px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;flex-shrink:0;margin-top:2px}
.vt-perm-allow{background:#E3F0E5;color:#3D8B47}
.vt-perm-block{background:#FDE8E8;color:#C44545}
.vt-perm-approve{background:#FCEFD9;color:#C8841E}
.vt-perm-caller{background:rgba(45,123,123,.15);color:#2D7B7B}

/* Capabilities table */
.vt-cap-table{width:100%;border-collapse:collapse;font-size:12px;background:var(--surface);margin-top:10px;border:1px solid var(--rule,#E8E4DB);border-radius:10px;overflow:hidden}
.vt-cap-table th{background:var(--surface-2,#F5F2EC);padding:10px 8px;text-align:center;font-weight:600;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-2,#4A4A4A);border-bottom:1px solid var(--rule,#E8E4DB)}
.vt-cap-table th:first-child{text-align:left;padding-left:14px;width:280px}
.vt-cap-table td{padding:8px;text-align:center;border-bottom:1px solid var(--rule,#E8E4DB);vertical-align:top}
.vt-cap-table td:first-child{text-align:left;padding-left:14px}
.vt-cap-table tr:last-child td{border-bottom:0}
.vt-tool-name{font-family:ui-monospace,monospace;font-size:11px;font-weight:600;color:#1F2940}
.vt-tool-sub{font-size:10px;color:var(--text-3,#8A8A8A);margin-top:2px;line-height:1.4}
.vt-tool-module{font-size:9px;padding:2px 6px;border-radius:3px;background:var(--surface-2,#F5F2EC);color:var(--text-2,#4A4A4A);font-weight:600;letter-spacing:.5px;text-transform:uppercase;display:inline-block;margin-right:6px}
.vt-tool-module.new{background:#B8924C;color:var(--text-inverse)}

/* Tier checkboxes (read-only in Phase 1) */
.vt-tcb{display:inline-flex;width:22px;height:22px;border-radius:6px;align-items:center;justify-content:center;border:1.5px solid var(--rule,#E8E4DB);background:var(--surface);position:relative}
.vt-tcb.on{background:#3D8B47;border-color:#3D8B47;color:var(--text-inverse)}
.vt-tcb.approve{background:#C8841E;border-color:#C8841E;color:var(--text-inverse)}
.vt-tcb.caller{background:#2D7B7B;border-color:#2D7B7B;color:var(--text-inverse)}
.vt-tcb.on::after{content:'✓';font-size:13px;font-weight:700}
.vt-tcb.approve::after{content:'?';font-size:12px;font-weight:700}
.vt-tcb.caller::after{content:'↩';font-size:12px;font-weight:700}
.vt-tcb{cursor:pointer;transition:transform .1s,box-shadow .15s}
.vt-tcb:hover{transform:scale(1.1);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.vt-tcb.overridden{box-shadow:0 0 0 2px #B8924C}

/* Legend */
.vt-legend{display:flex;flex-wrap:wrap;gap:14px;padding:10px 14px;background:var(--surface-2,#F5F2EC);border:1px solid var(--rule,#E8E4DB);border-radius:8px;margin-top:10px;font-size:11px;color:var(--text-2,#4A4A4A)}
.vt-legend-item{display:inline-flex;align-items:center;gap:6px}

/* Alert */
.vt-alert{padding:12px 16px;border-radius:8px;font-size:12px;display:flex;gap:10px;align-items:flex-start;margin-bottom:14px}
.vt-alert.info{background:#E0EAFA;border:1px solid rgba(31,41,64,.2);color:#1F2940}
.vt-alert.success{background:#E3F0E5;border:1px solid rgba(61,139,71,.3);color:#1F5226}
.vt-alert-ic{font-size:14px;flex-shrink:0}

/* Per-contact overrides table */
.vt-rules{width:100%;border-collapse:collapse;margin-top:10px;font-size:12px}
.vt-rules th{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text-3,#8A8A8A);padding:8px;text-align:left;font-weight:600;border-bottom:1px solid var(--rule,#E8E4DB)}
.vt-rules td{padding:10px 8px;border-bottom:1px solid var(--rule,#E8E4DB)}
.vt-rules tr:hover{background:var(--bg)}
.vt-rules .vt-avatar{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--text-inverse);margin-right:8px;vertical-align:middle}

/* Password input with eye toggle */
.vt-pw-wrap{position:relative;display:flex;align-items:center}
.vt-pw-wrap input{padding-right:42px;flex:1;font-family:ui-monospace,monospace}
.vt-pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text-3,#8A8A8A);font-size:14px;padding:0}
.vt-pw-eye:hover{background:var(--surface-2,#F5F2EC);color:var(--text,#1A1A1A)}

/* ════════════════════════════════════════════════════════════
   Voice · Phase 3 — Custom Instructions rule system
   (mirrors voice-settings-mockup.html ci-* / rule-* / tpl-* / test-*)
   ════════════════════════════════════════════════════════════ */
.ci-card{background:var(--surface);border:1px solid var(--rule,#E8E4DB);border-radius:12px;padding:18px;margin-top:18px}
.ci-card-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--rule,#E8E4DB)}
.ci-card-head > div:first-child{flex:1}
.ci-card-title{font-size:15px;font-weight:600;color:var(--text,#1A1A1A)}
.ci-card-desc{font-size:12px;color:var(--text-3,#8A8A8A);margin-top:2px;line-height:1.5}
.ci-card-pill{background:#B8924C;color:var(--text-inverse);font-size:10px;padding:4px 10px;border-radius:99px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;align-self:flex-start;white-space:nowrap}

.ci-tabs{display:flex;gap:2px;background:var(--surface-2,#F5F2EC);padding:3px;border-radius:8px;margin-bottom:14px;border:1px solid var(--rule,#E8E4DB);overflow-x:auto}
.ci-tab{padding:8px 12px;font-size:12px;border:none;background:transparent;color:var(--text-2,#4A4A4A);cursor:pointer;border-radius:6px;font-family:inherit;font-weight:500;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ci-tab.active{background:var(--surface);color:#1F2940;box-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.04);font-weight:600}
.ci-tab-count{background:#B8924C;color:var(--text-inverse);font-size:9px;padding:1px 6px;border-radius:99px;font-weight:600}

.ci-panel{}
.ci-empty{text-align:center;padding:32px 16px;color:var(--text-3,#8A8A8A);background:var(--surface-2,#F5F2EC);border-radius:10px;border:1px dashed var(--rule,#E8E4DB)}

/* Active rule cards */
.rule-card{background:var(--surface);border:1px solid var(--rule,#E8E4DB);border-radius:10px;padding:14px;margin-bottom:8px;display:flex;align-items:flex-start;gap:12px;transition:all .15s}
.rule-card:hover{border-color:#E8D9B8}
.rule-card.off{opacity:.55;background:var(--surface-2,#F5F2EC)}
.rule-card-ic{width:34px;height:34px;border-radius:8px;background:var(--surface-2,#F5F2EC);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.rule-card-body{flex:1;min-width:0}
.rule-card-name{font-size:13px;font-weight:600;margin-bottom:6px;color:var(--text,#1A1A1A)}
.rule-card-meta{display:flex;flex-wrap:wrap;gap:5px}
.rule-pill{font-size:10px;padding:3px 8px;border-radius:4px;font-weight:600;display:inline-flex;align-items:center;gap:3px;letter-spacing:.3px}
.rule-pill.when{background:#E0EAFA;color:#1F2940}
.rule-pill.then{background:#FCEFD9;color:#7A4F0E}
.rule-pill.scope{background:#E8E0F5;color:#7156B8}
.rule-card-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}

/* Mini toggle for rule-card actions */
.vm-toggle-mini{position:relative;display:inline-flex;width:34px;height:20px;border-radius:99px;background:var(--rule,#E8E4DB);cursor:pointer;border:none;padding:0;transition:background .2s}
.vm-toggle-mini::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.vm-toggle-mini.on{background:#3D8B47}
.vm-toggle-mini.on::after{transform:translateX(14px)}

.btn-sm{padding:5px 10px !important;font-size:11px !important}

/* Template library */
.tpl-cat{margin-bottom:18px}
.tpl-cat:last-child{margin-bottom:0}
.tpl-cat-head{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-2,#4A4A4A);font-weight:700;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--rule,#E8E4DB)}
.tpl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(max-width:768px){.tpl-grid{grid-template-columns:1fr}}
.tpl-card{background:var(--surface);border:1px solid var(--rule,#E8E4DB);border-radius:8px;padding:12px;display:flex;align-items:flex-start;gap:10px;cursor:pointer;transition:all .15s}
.tpl-card:hover{border-color:#B8924C;background:#FFFCF5}
.tpl-card.added{background:#F0F6F0;border-color:#3D8B47}
.tpl-card-ic{font-size:18px;flex-shrink:0;margin-top:1px}
.tpl-card-text{flex:1;min-width:0}
.tpl-card-name{font-size:12px;font-weight:600;margin-bottom:2px;color:var(--text,#1A1A1A)}
.tpl-card-desc{font-size:10px;color:var(--text-3,#8A8A8A);line-height:1.4}
.tpl-card-add{background:#B8924C;color:var(--text-inverse);border:none;font-size:14px;width:24px;height:24px;border-radius:50%;cursor:pointer;flex-shrink:0;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center}
.tpl-card.added .tpl-card-add{background:#3D8B47}

/* Builder */
.builder{background:var(--surface-2,#F5F2EC);border:1px dashed var(--rule,#E8E4DB);border-radius:10px;padding:18px}
.builder-row{display:grid;grid-template-columns:80px 1fr;gap:14px;align-items:start;margin-bottom:12px}
.builder-row:last-child{margin-bottom:0}
.builder-row-label{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--text-3,#8A8A8A);text-transform:uppercase;text-align:right;padding-top:9px}
.builder-row-label.when{color:#1F2940}
.builder-row-label.then{color:#B8924C}
.scope-pills{display:flex;flex-wrap:wrap;gap:6px}
.scope-pill{padding:5px 10px;font-size:11px;border-radius:6px;border:1.5px solid var(--rule,#E8E4DB);background:var(--surface);cursor:pointer;font-family:inherit;color:var(--text-2,#4A4A4A);font-weight:500}
.scope-pill.on{background:#1F2940;color:var(--text-inverse);border-color:#1F2940}

/* Test scenario */
.test-box{background:linear-gradient(135deg,#1F2940,#2D3954);color:var(--text-inverse);border-radius:10px;padding:18px}
.test-box-head{font-size:10px;letter-spacing:1.5px;color:#E8D9B8;font-weight:700;text-transform:uppercase;margin-bottom:10px}
.test-input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:var(--text-inverse);font-size:13px;font-family:inherit;margin-bottom:10px}
.test-input::placeholder{color:rgba(255,255,255,.4)}
.test-result{background:rgba(0,0,0,.25);border-radius:8px;padding:14px;font-size:13px;line-height:1.6;margin-top:12px}
.test-result-head{color:#E8D9B8;font-weight:600;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}
.test-rule-fire{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px;color:#9CC4A8}
.test-rule-fire .name{color:var(--text-inverse);font-weight:600}
.test-rule-fire.skip{color:rgba(255,255,255,.4)}
.test-rule-fire.skip .name{color:rgba(255,255,255,.55);font-weight:500}

/* Alerts (CI-specific) */
.ci-alert{padding:12px 16px;border-radius:8px;font-size:12px;display:flex;gap:10px;align-items:flex-start;margin-bottom:14px}
.ci-alert.info{background:#E0EAFA;border:1px solid rgba(31,41,64,.2);color:#1F2940}
.ci-alert.warn{background:#FCEFD9;border:1px solid rgba(200,132,30,.3);color:#7A4F0E}
.ci-alert-ic{font-size:14px;flex-shrink:0}

/* Free-form bounds row */
.ci-bounds{display:flex;justify-content:space-between;align-items:center;margin-top:8px;flex-wrap:wrap;gap:8px}
.ci-char-count{font-family:ui-monospace,monospace;font-weight:600;font-size:11px;padding:3px 8px;border-radius:4px;background:var(--surface-2,#F5F2EC);color:var(--text-2,#4A4A4A)}

/* ════════════════════════════════════════════════════════════
   Voice · Phase 4 — Slider redesign (floating chip) + Language picker
   ════════════════════════════════════════════════════════════ */

/* Slider pack: floating chip above + band under slider */
.vc-slider-pack{position:relative;padding-top:42px;margin-top:8px}
.vc-rec-chip{position:absolute;top:0;transform:translateX(-50%);background:#3D8B47;color:var(--text-inverse);padding:5px 10px 6px;border-radius:6px;white-space:nowrap;box-shadow:0 2px 8px rgba(61,139,71,.25);text-align:center;line-height:1.1}
.vc-rec-chip-label{font-size:8px;text-transform:uppercase;letter-spacing:1px;opacity:.85;display:block;margin-bottom:1px;font-weight:600}
.vc-rec-chip-range{font-family:ui-monospace,monospace;font-weight:700;font-size:11px;display:block}
.vc-rec-chip::after{content:'';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #3D8B47}
.vc-slider-with-band{position:relative;padding:6px 0}
.vc-slider-overlay{position:relative;z-index:2;width:100%;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;height:14px;margin:0}
.vc-slider-overlay::-webkit-slider-runnable-track{background:transparent;height:14px}
.vc-slider-overlay::-moz-range-track{background:transparent;height:14px}
.vc-slider-overlay::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#B8924C;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;margin-top:-2px}
.vc-slider-overlay::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#B8924C;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer}
.vc-rec-band{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);height:14px;border-radius:7px;background:rgba(0,0,0,.04);overflow:hidden;z-index:0;border:1px solid rgba(0,0,0,.05)}
.vc-rec-band-ok{position:absolute;top:0;bottom:0;background:rgba(184,146,76,.32)}
.vc-rec-band-best{position:absolute;top:0;bottom:0;background:rgba(61,139,71,.5);box-shadow:inset 0 0 0 1px rgba(61,139,71,.4)}
.vc-rec-endpoints{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text-3,#8A8A8A);margin-top:10px;font-family:ui-monospace,monospace}
.vc-rec-val{font-family:ui-monospace,monospace;font-weight:700;font-size:13px;padding:3px 10px;border-radius:5px;background:var(--surface-2,#F5F2EC)}
.vc-rec-val.good{color:#3D8B47;background:rgba(61,139,71,.12)}
.vc-rec-val.ok{color:#B8924C;background:rgba(184,146,76,.12)}
.vc-rec-val.bad{color:#C44545;background:rgba(196,69,69,.12)}

/* Language mode selector (3 cards) */
.vc-mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
@media(max-width:768px){.vc-mode-grid{grid-template-columns:1fr}}
.vc-mode-card{background:var(--surface);border:1.5px solid var(--rule,#E8E4DB);border-radius:10px;padding:14px;cursor:pointer;transition:all .15s;position:relative}
.vc-mode-card:hover{border-color:#E8D9B8;background:#FFFCF5}
.vc-mode-card.selected{border-color:#B8924C;background:#FFFCF5;box-shadow:0 0 0 3px rgba(184,146,76,.12)}
.vc-mode-tag{position:absolute;top:8px;right:8px;font-size:9px;padding:2px 6px;border-radius:3px;background:#3D8B47;color:var(--text-inverse);font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.vc-mode-flag{font-size:20px;margin-bottom:8px}
.vc-mode-title{font-size:13px;font-weight:600;margin-bottom:3px;color:var(--text,#1A1A1A)}
.vc-mode-desc{font-size:11px;color:var(--text-3,#8A8A8A);line-height:1.4;margin-bottom:10px}
.vc-mode-bar{height:5px;background:var(--rule,#E8E4DB);border-radius:99px;overflow:hidden}
.vc-mode-bar-fill{height:100%;background:linear-gradient(90deg,#3D8B47,#5DA866);border-radius:99px}
.vc-mode-bar-fill.amber{background:linear-gradient(90deg,#C8841E,#E0A852)}

/* Locked-language picker grid */
.vc-lang-picker{margin-top:14px}
.vc-lang-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:768px){.vc-lang-grid{grid-template-columns:repeat(2,1fr)}}
.vc-lang-card{background:var(--surface);border:1.5px solid var(--rule,#E8E4DB);border-radius:10px;padding:12px;cursor:pointer;transition:all .15s;text-align:center}
.vc-lang-card:hover{border-color:#E8D9B8;background:#FFFCF5}
.vc-lang-card.selected{border-color:#B8924C;background:#FFFCF5;box-shadow:0 0 0 3px rgba(184,146,76,.12)}
.vc-lang-flag{font-size:24px;margin-bottom:4px}
.vc-lang-name{font-size:12px;font-weight:600;color:var(--text,#1A1A1A)}
.vc-lang-sub{font-size:10px;color:var(--text-3,#8A8A8A);margin-top:2px;font-family:ui-monospace,monospace}

/* ════════════════════════════════════════════════════════════
   Voice · Phase 4 — Context bundler settings panel
   ════════════════════════════════════════════════════════════ */
.ctx-source{background:var(--surface);border:1px solid var(--rule,#E8E4DB);border-radius:10px;padding:14px;margin-bottom:10px;transition:all .15s}
.ctx-source:hover{border-color:#E8D9B8;background:#FFFCF5}
.ctx-source.off{opacity:.55;background:var(--surface-2,#F5F2EC)}
.ctx-source-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ctx-source-ic{width:32px;height:32px;border-radius:7px;background:var(--surface-2,#F5F2EC);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.ctx-source-name{font-size:13px;font-weight:600;flex:1;color:var(--text,#1A1A1A)}
.ctx-source-meta{font-size:10px;color:var(--text-3,#8A8A8A);font-family:ui-monospace,monospace;padding:2px 7px;background:var(--surface-2,#F5F2EC);border-radius:4px}
.ctx-source-body{padding-left:44px}
.ctx-source-use{font-size:12px;color:var(--text-2,#4A4A4A);line-height:1.55;margin-bottom:8px}
.ctx-source-use strong{color:var(--text,#1A1A1A);font-weight:600}
.ctx-source-includes{background:linear-gradient(135deg,#F8F4EB 0%,#F2EDE0 100%);border-radius:6px;padding:10px 12px;border-left:3px solid #B8924C;font-size:11px;line-height:1.6;color:var(--text-2,#4A4A4A)}
.ctx-source-includes-label{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;color:#B8924C;margin-bottom:4px;display:block}

/* Voice · Phase 10 — tier chip on call identity badge */
.vm-tier-chip{display:inline-block;font-size:9px;font-weight:700;letter-spacing:1px;padding:3px 8px;border-radius:99px;color:var(--text-inverse);margin-left:8px;vertical-align:middle;text-transform:uppercase}

/* Voice · Phase 13 — pending approvals banner */
.va-banner-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#FFFCF5 0%,#FCEFD9 100%);border:1.5px solid #B8924C;border-radius:10px;padding:14px 16px;margin-bottom:14px;box-shadow:0 2px 8px rgba(184,146,76,.18);animation:vaShake .5s cubic-bezier(.36,.07,.19,.97) 1}
@keyframes vaShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.va-banner-ic{font-size:22px;flex-shrink:0;width:40px;height:40px;background:#B8924C;color:var(--text-inverse);border-radius:50%;display:flex;align-items:center;justify-content:center}
.va-banner-body{flex:1;min-width:0}
.va-banner-title{font-size:13px;font-weight:700;color:#7A4F0E;margin-bottom:2px;letter-spacing:.3px}
.va-banner-ctx{font-size:13px;color:var(--text-2,#4A4A4A);line-height:1.4;margin-bottom:4px}
.va-banner-meta{font-size:10px;color:var(--text-3,#8A8A8A);font-family:ui-monospace,monospace}
.va-banner-actions{display:flex;gap:6px;flex-shrink:0}

/* Voice · Phase 17 — inline approval banner inside live call overlay */
.vm-live-approval-slot{padding:0 16px}
.vm-live-approval{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(255,252,245,.95) 0%,rgba(252,239,217,.95) 100%);border:1.5px solid #B8924C;border-radius:10px;padding:12px 14px;margin:8px 0;box-shadow:0 2px 8px rgba(184,146,76,.2)}
.vm-live-approval-ic{font-size:18px;flex-shrink:0;width:32px;height:32px;background:#B8924C;color:var(--text-inverse);border-radius:50%;display:flex;align-items:center;justify-content:center}
.vm-live-approval-body{flex:1;min-width:0}
.vm-live-approval-title{font-size:12px;font-weight:700;color:#7A4F0E;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.vm-live-approval-ctx{font-size:12px;color:#4A4A4A;line-height:1.4}
.vm-live-approval-meta{font-size:10px;color:var(--text-3);font-family:ui-monospace,monospace;margin-top:2px}
.vm-live-approval-actions{display:flex;gap:6px;flex-shrink:0}

/* Voice · Phase 19 — Overview tab call rows */
.vov-call-row{padding:10px 12px;border-radius:8px;margin-bottom:6px;background:var(--surface-2,#F5F2EC);border:1px solid var(--rule,#E8E4DB);transition:all .15s}
.vov-call-row:hover{background:#FFFCF5;border-color:#B8924C;transform:translateX(2px)}
.vov-call-row:last-child{margin-bottom:0}

/* ═══════════════════════════════════════════════════════════
   ARIA — AI assistant (R1: read-only chat)
   Floating launcher + slide-in panel. Prefixed .aria-* to avoid
   collisions. Uses the app's design tokens.
   ═══════════════════════════════════════════════════════════ */
#aria-launcher{
  position:fixed;bottom:24px;right:24px;z-index:1000;
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--navy) 0%,var(--accent) 130%);
  color:var(--text-on-navy);box-shadow:var(--shadow-lg),0 0 0 1px rgba(184,150,90,.25);
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;
}
#aria-launcher:hover{transform:translateY(-2px) scale(1.03);box-shadow:var(--shadow-lg),0 0 0 2px rgba(184,150,90,.45)}
#aria-launcher:active{transform:translateY(0) scale(.98)}
#aria-launcher.hidden{opacity:0;transform:scale(.4);pointer-events:none}
.aria-launcher-mark{font-family:var(--serif,Georgia,serif);font-weight:600;font-size:24px;line-height:1}

#aria-panel{
  position:fixed;
  /* Leave the 52px top bar visible above the panel on desktop. Mobile
     hides the top bar entirely (gotcha #348), so the panel keeps top:0
     there to use the full viewport — see the mobile override below. */
  top:52px;right:0;bottom:0;z-index:1001;
  width:min(420px,100vw);max-width:100vw;
  background:var(--surface);border-left:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;
  transform:translateX(105%);transition:transform .28s cubic-bezier(.4,0,.2,1);
}
@media(max-width:768px){#aria-panel{top:0}}
#aria-panel.open{transform:translateX(0)}

.aria-header{
  display:flex;align-items:center;gap:11px;
  padding:14px 16px;border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.aria-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;position:relative;
  background:linear-gradient(135deg,var(--navy),var(--accent));
  color:var(--text-on-navy);font-family:var(--serif,Georgia,serif);font-weight:600;font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.aria-avatar::after{content:'';position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:var(--success);border:2px solid var(--surface-2)}
.aria-headtext{flex:1;min-width:0}
.aria-title{font-weight:600;font-size:15px;color:var(--text)}
.aria-status{font-size:11px;color:var(--text-2);display:flex;align-items:center;gap:5px}
.aria-status::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--success)}
.aria-iconbtn{
  width:30px;height:30px;border-radius:8px;border:1px solid transparent;background:transparent;
  color:var(--text-2);font-size:20px;line-height:1;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s;
}
.aria-iconbtn:hover{background:var(--surface);color:var(--text);border-color:var(--border)}
#aria-close{font-size:24px}

.aria-feed{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}

.aria-empty{margin:auto 0;text-align:center;padding:18px 8px;display:flex;flex-direction:column;align-items:center;gap:8px}
.aria-empty-mark{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--accent));color:var(--text-on-navy);font-family:var(--serif,Georgia,serif);font-size:22px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.aria-empty-title{font-size:16px;font-weight:600;color:var(--text)}
.aria-empty-sub{font-size:12.5px;color:var(--text-2);line-height:1.5;max-width:300px}
.aria-suggests{display:flex;flex-direction:column;gap:7px;margin-top:10px;width:100%;max-width:300px}
.aria-suggest{
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);
  padding:9px 13px;border-radius:var(--radius-pill,999px);font-size:12.5px;cursor:pointer;
  font-family:inherit;text-align:left;transition:all .12s;
}
.aria-suggest:hover{background:var(--accent-bg);color:var(--text);border-color:var(--accent)}

.aria-msg{display:flex;gap:9px;animation:ariaMsgIn .22s ease both}
@keyframes ariaMsgIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.aria-avatar-sm{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:var(--surface-2);color:var(--text-2);
  font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;
}
.aria-avatar-sm.aria-mark{background:linear-gradient(135deg,var(--navy),var(--navy-mid));color:#E9CF9A;font-family:var(--serif,Georgia,serif)}
.aria-msg-content{flex:1;min-width:0;display:flex;flex-direction:column}
.aria-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.aria-meta>span:first-child{font-size:11.5px;font-weight:600;color:var(--text)}
.aria-time{font-size:10px;color:var(--text-3)}
.aria-bubble{
  background:var(--surface-2);padding:9px 12px;border-radius:12px;border-top-left-radius:4px;
  font-size:13.5px;color:var(--text);line-height:1.55;word-wrap:break-word;overflow-wrap:anywhere;
}
.aria-bubble-error{background:var(--error-bg);color:var(--error-dark,#CC2F26);border-top-left-radius:4px}
.aria-bubble .aria-hr{border:0;border-top:1px solid var(--rule);margin:8px 0;opacity:.7}
.aria-msg.user{flex-direction:row-reverse}
.aria-msg.user .aria-meta{flex-direction:row-reverse}
.aria-msg.user .aria-msg-content{align-items:flex-end}
.aria-msg.user .aria-bubble{background:var(--navy);color:var(--text-on-navy);border-top-left-radius:12px;border-top-right-radius:4px}
.aria-bubble p{margin:0 0 7px}
.aria-bubble p:last-child{margin-bottom:0}
.aria-bubble ul,.aria-bubble ol{margin:4px 0 7px;padding-left:20px}
.aria-bubble li{margin:2px 0}
.aria-bubble code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:rgba(0,0,0,.05);padding:1px 5px;border-radius:4px}
.aria-bubble strong{font-weight:650}
.aria-faint{color:var(--text-3)}
.aria-tablewrap{margin:8px 0;overflow-x:auto;border:1px solid var(--border);border-radius:8px}
.aria-table{border-collapse:collapse;width:100%;font-size:12px;line-height:1.4}
.aria-table th,.aria-table td{padding:5px 9px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border);white-space:normal}
.aria-table th{background:var(--surface-2);font-weight:600;color:var(--text);position:sticky;top:0;font-size:11px;letter-spacing:.01em}
.aria-table tr:last-child td,.aria-table tbody tr:last-child td{border-bottom:none}
.aria-table td:first-child,.aria-table th:first-child{font-weight:600;white-space:nowrap}
.aria-table tbody tr:nth-child(even){background:var(--surface-2)}

.aria-tools{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.aria-tool-chip{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  color:var(--text-2);padding:3px 8px;background:var(--surface-2);
  border:1px dashed var(--border-strong);border-radius:5px;
  display:inline-flex;align-items:center;gap:5px;
}
.aria-tool-chip.ok{border-style:solid;border-color:rgba(52,199,89,.4)}
.aria-tool-chip.err{border-style:solid;border-color:rgba(255,59,48,.4);color:var(--error-dark,#CC2F26)}
.aria-tool-mark{font-size:11px;font-weight:700}
.aria-tool-chip.ok .aria-tool-mark{color:var(--success)}
.aria-tool-spin{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--border-strong);border-top-color:var(--accent);animation:ariaSpin .7s linear infinite}
@keyframes ariaSpin{to{transform:rotate(360deg)}}

.aria-typing{display:inline-flex;gap:4px;align-items:center;padding:2px 0}
.aria-typing i{width:6px;height:6px;border-radius:50%;background:var(--text-3);display:inline-block;animation:ariaBlink 1.3s infinite both}
.aria-typing i:nth-child(2){animation-delay:.18s}
.aria-typing i:nth-child(3){animation-delay:.36s}
@keyframes ariaBlink{0%,80%,100%{opacity:.25}40%{opacity:1}}

.aria-composer{border-top:1px solid var(--border);padding:11px 12px;background:var(--surface);display:flex;align-items:flex-end;gap:8px}
.aria-input{
  flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;
  padding:9px 12px;font-family:inherit;font-size:16px;color:var(--text);line-height:1.4;
  resize:none;outline:none;min-height:38px;max-height:140px;
}
.aria-input:focus{border-color:var(--accent);background:var(--surface)}
.aria-send{
  width:38px;height:38px;border-radius:50%;border:none;flex-shrink:0;cursor:pointer;
  background:var(--navy);color:#E9CF9A;font-size:17px;font-weight:700;
  display:flex;align-items:center;justify-content:center;transition:background .12s,opacity .12s;
}
.aria-send:hover{background:var(--navy-mid);color:var(--text-inverse)}
.aria-send:disabled,.aria-send.busy{opacity:.5;cursor:default}

@media (max-width:600px){
  /* Full-bleed sheet that fills the dynamic viewport (handles the mobile URL
     bar collapsing) and respects the notch + home-bar safe areas. */
  #aria-panel{
    width:100vw;max-width:100vw;border-left:none;
    height:100vh;height:100dvh;
  }
  /* Header clears the status-bar/notch. */
  .aria-header{padding-top:calc(14px + env(safe-area-inset-top,0px))}
  /* Footer/composer clears the home indicator and lifts with the keyboard. */
  .aria-footer{padding-bottom:env(safe-area-inset-bottom,0px)}
  .aria-feed{padding:14px 13px;gap:12px;scroll-padding-bottom:12px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  /* Roomier bubbles + bigger tap targets on a phone. */
  .aria-msg-content{max-width:90%}
  .aria-iconbtn{width:34px;height:34px}
  .aria-composer{padding:10px 11px;gap:7px;align-items:flex-end}
  .aria-mic,.aria-attach,.aria-send{width:42px;height:42px}
  .aria-input{min-height:42px;padding:10px 13px}
  /* Launcher above the bottom nav + home indicator. */
  #aria-launcher{bottom:calc(78px + env(safe-area-inset-bottom,0px));right:16px;width:52px;height:52px}
  /* Settings sub-view is also a full-height sheet. */
  .aria-set-view{height:100vh;height:100dvh}
  .aria-set-head{padding-top:calc(12px + env(safe-area-inset-top,0px))}
  /* Lock the page behind the full-screen panel so background doesn't scroll. */
  body.aria-open{overflow:hidden}
}
/* Honor a user's reduced-motion preference for the slide-in. */
@media (prefers-reduced-motion:reduce){
  #aria-panel,.aria-set-view{transition:none}
  .aria-msg{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   ARIA — Voice (R2): Whisper STT push-to-talk + Web Speech TTS
   ═══════════════════════════════════════════════════════════ */
/* Header voice-mode menu */
.aria-voice-wrap{position:relative;display:flex;align-items:center}
.aria-voice-btn{color:var(--text-2)}
.aria-voice-btn.on{color:var(--accent)}
.aria-voice-btn svg{display:block}
.aria-vm{
  position:absolute;top:36px;right:0;z-index:30;width:236px;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:6px;animation:ariaMsgIn .14s ease both;
}
.aria-vm[hidden]{display:none}
.aria-vm-head{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:5px 8px 4px;font-weight:600}
.aria-vm-item{
  display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:none;border-radius:8px;padding:7px 8px;font-family:inherit;color:var(--text);
  transition:background .12s;
}
.aria-vm-item:hover{background:var(--surface-2)}
.aria-vm-item.active{background:var(--accent-bg)}
.aria-vm-check{width:13px;flex-shrink:0;color:var(--accent);font-weight:700;font-size:12px;opacity:0;line-height:1.45}
.aria-vm-item.active .aria-vm-check{opacity:1}
.aria-vm-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.aria-vm-name{font-size:13px;font-weight:600}
.aria-vm-hint{font-size:11px;color:var(--text-3);line-height:1.3}
.aria-vm-note{font-size:10.5px;color:var(--text-3);padding:6px 8px 3px;border-top:1px solid var(--border);margin-top:4px}
.aria-vm-voice{border-top:1px solid var(--border);margin-top:4px;padding:8px 8px 4px;display:flex;flex-direction:column;gap:5px}
.aria-vm-vlabel{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.aria-vm-select{
  width:100%;font-family:inherit;font-size:12.5px;color:var(--text);
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:6px 8px;cursor:pointer;
}
.aria-vm-select:focus{outline:none;border-color:var(--accent)}
.aria-vm-vhint{font-size:10.5px;color:var(--text-3);line-height:1.35}

/* Per-message speaker button */
.aria-speak-btn{
  border:none;background:transparent;cursor:pointer;color:var(--text-3);
  width:20px;height:20px;border-radius:5px;padding:0;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;transition:color .12s,background .12s;
}
.aria-speak-btn[hidden]{display:none}
.aria-speak-btn:hover{color:var(--accent);background:var(--accent-bg)}
.aria-speak-btn.playing{color:var(--accent)}
.aria-msg.aria.speaking .aria-bubble{box-shadow:inset 0 0 0 1px var(--accent)}

/* Footer: status line + composer + hands-free bar */
.aria-footer{border-top:1px solid var(--border);background:var(--surface)}
.aria-composer{border-top:none}
.aria-voice-status{font-size:11.5px;color:var(--text-2);padding:7px 14px 0;line-height:1.4}
.aria-voice-status.err{color:var(--error-dark,#CC2F26)}
.aria-voice-status.live{color:var(--accent)}

/* Mic (push-to-talk) */
.aria-mic{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--border);flex-shrink:0;cursor:pointer;
  background:var(--surface-2);color:var(--text-2);
  display:flex;align-items:center;justify-content:center;transition:background .14s,color .14s,border-color .14s;
  touch-action:none;-webkit-user-select:none;user-select:none;
}
.aria-mic svg{display:block;pointer-events:none}
.aria-mic:hover{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.aria-mic:disabled{opacity:.45;cursor:default}
.aria-mic.recording{background:#E5484D;border-color:#E5484D;color:var(--text-inverse);animation:ariaMicPulse 1.2s ease-in-out infinite}
.aria-mic.recording.hasvoice{animation-duration:.7s}
.aria-mic.busy{opacity:.6;cursor:default}

/* ── Aria · image attachment (R7 vision) ─────────────────── */
.aria-attach{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--border);flex-shrink:0;cursor:pointer;
  background:var(--surface-2);color:var(--text-2);
  display:flex;align-items:center;justify-content:center;transition:background .14s,color .14s,border-color .14s;
}
.aria-attach svg{display:block;pointer-events:none}
.aria-attach:hover{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.aria-attach-preview{padding:8px 12px 0}
.aria-attach-preview[hidden]{display:none}
.aria-attach-chip{position:relative;display:inline-block}
.aria-attach-chip img{max-height:72px;max-width:120px;border-radius:9px;border:1px solid var(--border);display:block;object-fit:cover}
.aria-attach-x{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;border:none;background:var(--navy);color:var(--text-inverse);font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.aria-msg-img{max-width:200px;max-height:240px;border-radius:11px;border:1px solid var(--border);margin-bottom:6px;display:block;object-fit:cover}
.aria-msg.user .aria-msg-content{display:flex;flex-direction:column;align-items:flex-end}
@keyframes ariaMicPulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.5)}50%{box-shadow:0 0 0 7px rgba(229,72,77,0)}}

/* Hands-free bar (replaces composer while looping) */
.aria-hf-bar{display:flex;align-items:center;gap:10px;padding:12px 14px}
.aria-hf-bar[hidden]{display:none}
.aria-hf-dot{width:11px;height:11px;border-radius:50%;background:var(--accent);flex-shrink:0}
.aria-hf-dot.listening{background:#E5484D;animation:ariaMicPulse 1.1s ease-in-out infinite}
.aria-hf-dot.thinking{background:var(--accent);animation:ariaBlink 1s infinite}
.aria-hf-dot.speaking{background:var(--success);animation:ariaBlink .8s infinite}
.aria-hf-label{flex:1;font-size:13px;font-weight:600;color:var(--text)}
.aria-hf-btn{
  border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);
  font-family:inherit;font-size:12px;font-weight:600;padding:6px 11px;border-radius:var(--radius-pill,999px);
  cursor:pointer;transition:background .12s,border-color .12s,color .12s;
}
.aria-hf-btn:hover{background:var(--surface);border-color:var(--accent)}
.aria-hf-btn.exit{color:var(--error-dark,#CC2F26);border-color:transparent;background:transparent}
.aria-hf-btn.exit:hover{background:var(--error-bg)}
.aria-handsfree #aria-composer{display:none}

/* ═══════════════════════════════════════════════════════════
   ARIA — Writes, approvals, undo, permissions (R3)
   ═══════════════════════════════════════════════════════════ */

/* Context-mode switcher (header) */
.aria-mode-wrap{position:relative;display:flex;align-items:center}
.aria-mode-btn{
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  font-family:inherit;font-size:11px;font-weight:600;line-height:1;
  padding:5px 9px;border-radius:var(--radius-pill,999px);cursor:pointer;flex-shrink:0;
  display:inline-flex;align-items:center;gap:5px;transition:background .12s,border-color .12s,color .12s;
}
.aria-mode-btn::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--text-3)}
.aria-mode-btn:hover{border-color:var(--accent);color:var(--text)}
.aria-mode-btn.mode-personal::before{background:var(--navy)}
.aria-mode-btn.mode-work::before{background:#3A7CA5}
.aria-mode-btn.mode-privacy::before{background:#7B5EA7}
.aria-mode-btn.mode-sandbox::before{background:var(--accent)}
.aria-mm{
  position:absolute;top:34px;right:0;z-index:30;width:236px;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:6px;animation:ariaMsgIn .14s ease both;
}
.aria-mm[hidden]{display:none}
.aria-mm-head{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);padding:5px 8px 4px;font-weight:600}
.aria-mm-item{
  display:flex;align-items:flex-start;gap:7px;width:100%;text-align:left;cursor:pointer;
  background:transparent;border:none;border-radius:8px;padding:7px 8px;font-family:inherit;
}
.aria-mm-item:hover{background:var(--surface-2)}
.aria-mm-item.active{background:var(--accent-bg)}
.aria-mm-check{width:13px;flex-shrink:0;color:var(--accent);font-weight:700;font-size:12px;opacity:0;line-height:1.45}
.aria-mm-item.active .aria-mm-check{opacity:1}
.aria-mm-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.aria-mm-name{font-size:13px;font-weight:600;color:var(--text)}
.aria-mm-hint{font-size:11px;color:var(--text-3);line-height:1.3}

/* A subtle header tint when in a restrictive mode (privacy/sandbox) */
.aria-mode-restrictive .aria-header{background:linear-gradient(0deg,var(--surface-2),var(--accent-bg))}

/* Cards container inside an assistant message (approvals + undo rows) */
.aria-cards{display:flex;flex-direction:column;gap:8px}
.aria-cards:not(:empty){margin-bottom:8px}

/* R8.1 — Place citation cards (places.find / .details / .is_open). Sit in
   .aria-cards alongside approval/undo rows; one card per place. Visual
   hierarchy: prominent name on top, rating + price on the same row, then
   address (single line, ellipsed), then a single action row with separated
   links. The system prompt tells Aria not to repeat any of this in prose
   so the card carries the full informational load. */
.aria-cits{display:flex;flex-direction:column;gap:8px}
.aria-cit-label{font-size:10.5px;font-weight:600;color:var(--ink-light,#6B6862);letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.aria-cit-warn{
  font-size:12px;line-height:1.45;color:var(--error,#C0492F);
  background:rgba(192,73,47,.08);border:1px solid rgba(192,73,47,.25);border-radius:10px;
  padding:8px 11px;
}
.aria-cit-card{
  border:1px solid var(--rule,#E7E3DB);border-radius:12px;background:var(--surface,#fff);
  padding:12px 14px;display:flex;flex-direction:column;gap:6px;
  box-shadow:0 1px 2px rgba(28,27,25,0.04);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.aria-cit-card:hover{
  border-color:var(--accent,#B08D57);
  box-shadow:0 3px 8px rgba(176,141,87,0.12);
}
.aria-cit-head{display:flex;flex-direction:column;gap:3px}
.aria-cit-name{font-weight:700;color:var(--ink,#1C1B19);line-height:1.25;font-size:14.5px;letter-spacing:-.005em}
.aria-cit-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-mid,#3a3833);flex-wrap:wrap}
.aria-cit-rating{display:inline-flex;align-items:center;gap:2px;color:var(--accent,#B08D57);font-weight:700;font-size:12.5px}
.aria-cit-price{color:var(--ink-light,#6B6862);font-weight:600;letter-spacing:.02em}
.aria-cit-sep{color:var(--rule-2,#D6CFC0);font-weight:400}
.aria-cit-cached{font-size:10px;color:var(--ink-light,#6B6862);background:var(--surface-2,#F5F0E6);border-radius:4px;padding:1px 6px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.aria-cit-addr{color:var(--ink-mid,#3a3833);line-height:1.4;font-size:12.5px;display:flex;align-items:flex-start;gap:6px}
.aria-cit-addr::before{content:"📍";font-size:11px;flex-shrink:0;line-height:1.4}
.aria-cit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:4px;padding-top:8px;border-top:1px solid var(--rule,#E7E3DB)}
.aria-cit-link{
  font-size:12px;font-weight:600;color:var(--accent,#B08D57);text-decoration:none;
  display:inline-flex;align-items:center;gap:3px;
  padding:1px 0;border-bottom:1px solid transparent;
  transition:border-color .12s ease;
}
.aria-cit-link:hover{border-bottom-color:var(--accent,#B08D57)}
.aria-cit-hours{font-size:11.5px;color:var(--ink-mid,#3a3833);margin-top:4px}
.aria-cit-hours summary{cursor:pointer;font-weight:600;color:var(--ink-light,#6B6862);padding:4px 0;list-style:none}
.aria-cit-hours summary::-webkit-details-marker{display:none}
.aria-cit-hours summary::before{content:"▸ ";font-size:9px;color:var(--ink-light,#6B6862)}
.aria-cit-hours[open] summary::before{content:"▾ "}
.aria-cit-hours div{padding:8px 11px;background:var(--surface-2,#F5F0E6);border-radius:8px;line-height:1.7;font-size:11.5px}

/* R8.2 — web search references. ONE card with N sources behind a
   ▸/▾ disclosure. Replaces the old per-result stack that cluttered the
   chat for any web question. Closed state shows just the header pill;
   open state reveals a tight list of title + hostname rows that link out
   on click. */
.aria-refs{
  border:1px solid var(--rule,#E7E3DB);border-radius:11px;background:var(--surface,#fff);
  box-shadow:0 1px 2px rgba(28,27,25,0.04);
  overflow:hidden;
}
.aria-refs-head{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:8px;
  padding:10px 13px;font-size:12.5px;font-weight:600;color:var(--ink,#1C1B19);
  transition:background .12s ease;
}
.aria-refs-head::-webkit-details-marker{display:none}
.aria-refs-head:hover{background:var(--surface-2,#F5F0E6)}
.aria-refs-icon{color:var(--accent,#B08D57);font-size:13px}
.aria-refs-title{flex:0 0 auto;letter-spacing:.01em}
.aria-refs-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:18px;padding:0 6px;
  font-size:11px;font-weight:700;line-height:1;
  background:var(--surface-2,#F5F0E6);color:var(--ink-mid,#3a3833);
  border-radius:9px;
}
.aria-refs-chev{
  margin-left:auto;font-size:18px;font-weight:400;line-height:1;
  color:var(--ink-light,#6B6862);transition:transform .15s ease;
}
.aria-refs[open] .aria-refs-chev{transform:rotate(90deg)}
.aria-refs-list{
  display:flex;flex-direction:column;
  border-top:1px solid var(--rule,#E7E3DB);
}
.aria-refs-row{
  display:flex;flex-direction:column;gap:2px;
  padding:9px 13px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--rule,#E7E3DB);
  transition:background .12s ease;
}
.aria-refs-row:last-child{border-bottom:0}
.aria-refs-row:hover{background:var(--surface-2,#F5F0E6)}
.aria-refs-row-title{
  font-size:12.5px;font-weight:500;color:var(--ink,#1C1B19);
  line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.aria-refs-row:hover .aria-refs-row-title{color:var(--accent,#B08D57)}
.aria-refs-row-host{
  font-size:11px;color:var(--ink-light,#6B6862);
  letter-spacing:.01em;
}

/* R8.3 — image.lookup thumbnails. Three-up grid; tap a tile to open the
   full-size proxy URL in a new tab. Aspect-ratio keeps the row tidy even
   when Google returns tall portraits + wide landscapes in the same set. */
.aria-imgs{display:flex;flex-direction:column;gap:4px}
.aria-imgs-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:6px}
.aria-img-tile{display:block;border-radius:9px;overflow:hidden;border:1px solid var(--rule,#E7E3DB);background:var(--surface-2,#F5F0E6);aspect-ratio:1/1;cursor:pointer;transition:border-color .12s ease, transform .12s ease}
.aria-img-tile:hover{border-color:var(--accent,#B08D57);transform:translateY(-1px)}
.aria-img-tile img{width:100%;height:100%;object-fit:cover;display:block}

/* Approval card */
.aria-approve{
  border:1px solid var(--accent);border-radius:12px;background:var(--surface);
  padding:11px 12px;box-shadow:var(--shadow);animation:ariaMsgIn .18s ease both;
}
.aria-approve-head{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--text)}
.aria-approve-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:ariaMicPulse 1.4s ease-in-out infinite}
.aria-approve-summary{font-size:13px;color:var(--text);line-height:1.45;margin:6px 0 3px}
.aria-approve-tool{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--text-3)}
.aria-approve-sens{color:var(--error-dark,#CC2F26);font-weight:700}
.aria-approve-edit{margin-top:8px}
.aria-approve-edit>summary{font-size:11.5px;color:var(--text-2);cursor:pointer;user-select:none;list-style:none}
.aria-approve-edit>summary::-webkit-details-marker{display:none}
.aria-approve-edit>summary::before{content:'▸ ';color:var(--text-3)}
.aria-approve-edit[open]>summary::before{content:'▾ '}
.aria-approve-fields{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.aria-af-row{display:flex;align-items:center;gap:8px;font-size:12px}
.aria-af-row.col{flex-direction:column;align-items:stretch;gap:3px}
.aria-af-k{font-size:10.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--text-3);font-weight:600}
.aria-af{
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
  padding:6px 9px;font-family:inherit;font-size:13px;color:var(--text);outline:none;width:100%;
}
.aria-af:focus{border-color:var(--accent);background:var(--surface)}
.aria-af[type=checkbox]{width:auto}
textarea.aria-af{resize:vertical;line-height:1.4}
.aria-af-json{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:6px 8px;margin:0;white-space:pre-wrap;word-break:break-word}
.aria-approve-grant{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-2);margin-top:10px;cursor:pointer}
.aria-approve-grant input{flex-shrink:0}
.aria-approve-grantnote{font-size:11px;color:var(--text-3);margin-top:10px;font-style:italic}
.aria-approve-actions{display:flex;gap:8px;margin-top:11px}
.aria-btn-primary,.aria-btn-ghost{
  flex:1;font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 12px;border-radius:9px;
  cursor:pointer;transition:background .12s,border-color .12s,color .12s,opacity .12s;
}
.aria-btn-primary{background:var(--navy);color:#E9CF9A;border:1px solid var(--navy)}
.aria-btn-primary:hover{background:var(--navy-mid);color:var(--text-inverse)}
.aria-btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--border-strong)}
.aria-btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.aria-btn-primary:disabled,.aria-btn-ghost:disabled{opacity:.5;cursor:default}
.aria-approve.resolved{border-color:var(--border);opacity:.9}
.aria-approve-statusline{font-size:11.5px;font-weight:600;margin-top:9px}
.aria-approve-statusline.ok{color:var(--success)}
.aria-approve-statusline.err{color:var(--error-dark,#CC2F26)}
.aria-approve-statusline.pending{color:var(--text-2)}

/* Undo affordance after an executed write */
.aria-action{
  display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--success);
  border-radius:8px;padding:7px 10px;animation:ariaMsgIn .18s ease both;
}
.aria-action-text{flex:1;line-height:1.4}
.aria-action-text::before{content:'✓ ';color:var(--success);font-weight:700}
.aria-action.undone{border-left-color:var(--text-3);opacity:.75}
.aria-action.undone .aria-action-text::before{content:'↺ ';color:var(--text-3)}
.aria-action-undo{
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);
  font-family:inherit;font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:var(--radius-pill,999px);
  cursor:pointer;flex-shrink:0;transition:background .12s,border-color .12s;
}
.aria-action-undo:hover{border-color:var(--accent);background:var(--accent-bg)}
.aria-action-undo:disabled{opacity:.6;cursor:default}

/* Sandbox tool chip */
.aria-tool-chip.sandbox{border-style:solid;border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
.aria-tool-chip.sandbox .aria-tool-mark{color:var(--accent)}

/* Permissions settings view (slides over the feed) */
.aria-set-view{
  position:absolute;inset:0;z-index:25;background:var(--surface);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .2s ease;visibility:hidden;
}
.aria-set-view.open{transform:translateX(0);visibility:visible}
.aria-set-head{display:flex;align-items:center;gap:8px;padding:14px 14px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.aria-set-title{font-size:15px;font-weight:600;color:var(--text)}
#aria-set-back{font-size:24px}
.aria-set-body{flex:1;overflow-y:auto;padding:14px}
.aria-set-intro{font-size:12px;color:var(--text-2);line-height:1.5;margin-bottom:14px}
.aria-set-group{margin-bottom:16px}
.aria-set-group-head{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:7px}
.aria-set-tool{display:flex;align-items:flex-start;gap:10px;justify-content:space-between;padding:10px 0;border-top:1px solid var(--border)}
.aria-set-tool-info{min-width:0;flex:1}
.aria-set-tool-name{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:600;color:var(--navy);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.aria-set-sens{font-family:inherit;font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--error-dark,#CC2F26);background:var(--error-bg);padding:1px 6px;border-radius:4px;font-weight:700}
.aria-set-grant{font-family:inherit;font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--accent);background:var(--accent-bg);padding:1px 6px;border-radius:4px;font-weight:700}
.aria-set-tool-desc{font-size:11.5px;color:var(--text-2);line-height:1.4;margin-top:3px}
.aria-seg{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:2px;flex-shrink:0}
.aria-seg-opt{
  border:none;background:transparent;color:var(--text-3);cursor:pointer;font-family:inherit;
  font-size:11px;font-weight:600;padding:4px 9px;border-radius:6px;transition:background .12s,color .12s;
}
.aria-seg-opt:hover{color:var(--text)}
.aria-seg-opt.active.auto{background:var(--navy);color:#E9CF9A}
.aria-seg-opt.active.ask{background:var(--accent);color:var(--text-inverse)}
.aria-seg-opt.active.never{background:var(--error-bg);color:var(--error-dark,#CC2F26)}

/* ════════════════════════════════════════════════════════════
   ARIA TASK ENGINE (R5) — task list, detail, plan checklist, autonomy
   ════════════════════════════════════════════════════════════ */
.atask-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.atask-title{font-family:var(--serif);font-size:24px;font-weight:500;color:var(--ink)}
.atask-sub{font-size:12.5px;color:var(--ink-faint);margin-top:2px}
.atask-header-actions{display:flex;gap:8px;flex-wrap:wrap}
.atask-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.atask-chip{font-size:12px;padding:4px 12px;border-radius:14px;background:var(--surface-2);color:var(--ink-light);cursor:pointer;border:1px solid transparent;transition:background .12s,color .12s;font-family:var(--sans)}
.atask-chip:hover{color:var(--ink)}
.atask-chip.active{background:var(--navy,#2b3a52);color:var(--text-on-navy)}
.atask-tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule,#E5E1D8);margin-bottom:18px}
.atask-tab{background:none;border:0;padding:10px 18px;font-size:14px;font-weight:600;color:var(--text-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:var(--sans)}
.atask-tab:hover{color:var(--text-2)}
.atask-tab.active{color:var(--accent,#b8965a);border-bottom-color:var(--accent,#b8965a)}

.mail-subtabs{display:flex;gap:6px;margin:8px 0 16px;flex-wrap:wrap}
.mail-subtab{background:var(--surface);border:1px solid var(--divider);border-radius:18px;padding:6px 14px;font-size:12.5px;color:var(--text-2);cursor:pointer;font-family:var(--sans)}
.mail-subtab:hover{background:var(--surface-2,var(--surface));color:var(--text-1)}
.mail-subtab.active{background:var(--accent,#b8965a);color:var(--text-inverse);border-color:var(--accent,#b8965a)}

.mail-sub-root{min-height:200px}
.mail-pane{background:var(--surface);border:1px solid var(--divider);border-radius:12px;padding:18px 20px}
.mail-pane-head{margin-bottom:14px}
.mail-pane-title{font-size:15px;font-weight:600}
.mail-pane-sub{font-size:12px;color:var(--text-3);margin-top:2px}

.mail-filters{background:var(--bg);border:1px solid var(--divider);border-radius:10px;padding:10px 12px;margin-bottom:14px}
.mail-filter-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:4px 0}
.mail-filter-row label{font-size:11.5px;color:var(--text-3);display:flex;align-items:center;gap:6px}
.mail-filter-row select,.mail-filter-row input{font-size:12.5px;padding:4px 8px;border:1px solid var(--divider);border-radius:6px;background:var(--surface);color:var(--text-1);font-family:var(--sans)}
.mail-filter-search{flex:1;min-width:180px}
.mail-filter-search input{width:100%}
.mail-filter-chips{align-items:flex-start}
.mail-chip-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mail-chip-label{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.04em;margin-right:4px}
.mail-chip{background:var(--surface);border:1px solid var(--divider);border-radius:14px;padding:3px 10px;font-size:11.5px;color:var(--text-2);cursor:pointer;font-family:var(--sans)}
.mail-chip:hover{background:var(--surface-2,var(--surface))}
.mail-chip.on{background:var(--accent,#b8965a);color:var(--text-inverse);border-color:var(--accent,#b8965a)}

.mail-sent-layout{display:grid;grid-template-columns:minmax(280px,340px) 1fr;gap:14px;align-items:start}
@media(max-width:840px){.mail-sent-layout{grid-template-columns:1fr}}
.mail-sent-list{display:flex;flex-direction:column;gap:6px;max-height:560px;overflow-y:auto}
.mail-sent-loading,.mail-sent-empty,.mail-sent-detail-empty{color:var(--text-3);font-size:12.5px;padding:18px;text-align:center;background:var(--bg);border:1px dashed var(--divider);border-radius:8px}
.mail-sent-row{background:var(--surface);border:1px solid var(--divider);border-radius:8px;padding:10px 12px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;transition:border-color .12s}
.mail-sent-row:hover{border-color:var(--accent,#b8965a)}
.mail-sent-row.active{border-color:var(--accent,#b8965a);box-shadow:0 0 0 2px rgba(184,150,90,0.12)}
.mail-sent-row-name{font-size:13px;font-weight:600}
.mail-sent-row-meta{font-size:11.5px;color:var(--text-3);margin-top:2px}
.mail-sent-row-pill{font-size:10.5px;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:0.04em;font-weight:600;white-space:nowrap}
.mail-sent-detail{background:var(--bg);border:1px solid var(--divider);border-radius:10px;padding:16px;min-height:200px}
.mail-sent-detail-head{margin-bottom:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mail-sent-detail-title{font-size:14px;font-weight:600}
.mail-sent-detail-sub{font-size:11.5px;color:var(--text-3);width:100%}
.mail-sent-timeline{margin-top:14px;border-top:1px dashed var(--divider);padding-top:10px}
.mail-sent-timestep{display:flex;justify-content:space-between;font-size:12px;padding:3px 0}
.mail-sent-tslabel{color:var(--text-3)}
.mail-sent-tsval{color:var(--text-2)}

.atask-layout{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:18px;align-items:start}
@media(max-width:840px){.atask-layout{grid-template-columns:1fr}}
.atask-list-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.atask-list{display:flex;flex-direction:column;gap:10px}
.atask-empty,.atask-detail-empty{color:var(--ink-faint);font-size:13px;font-family:var(--sans);padding:20px;text-align:center;background:var(--surface-2);border-radius:10px}
.atask-card{background:var(--surface);border:1px solid var(--rule,#E5E1D8);border-radius:10px;padding:12px 14px;cursor:pointer;transition:border-color .12s,box-shadow .12s,background .12s;position:relative}
.atask-card:hover{border-color:var(--accent)}
.atask-card.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 2px 10px rgba(184,150,90,0.18);background:var(--paper,var(--surface))}
.atask-card.active::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;background:var(--accent)}
.atask-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px}
.atask-card-title{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.atask-card-meta{font-size:11.5px;color:var(--ink-faint)}
.atask-card-ask{margin-top:8px;font-size:12px;color:var(--ink);background:var(--surface-2);border-left:2px solid var(--accent);padding:6px 10px;border-radius:6px}
.atask-card-err{margin-top:6px;font-size:11.5px;color:var(--error)}
.atask-badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;white-space:nowrap;letter-spacing:.02em}
.atask-badge.draft{background:#ECEAE3;color:var(--text-2)}
.atask-badge.scheduled{background:#E3EDF7;color:#2f6cb0}
.atask-badge.running{background:#DCF1E6;color:#1f7a4d}
.atask-badge.awaiting{background:#F7ECD2;color:#8a6a11}
.atask-badge.paused{background:#EDE7D6;color:#7a6a45}
.atask-badge.done{background:#DCF1E6;color:#1f7a4d}
.atask-badge.failed{background:#F8E0DD;color:#b23b2e}
.atask-badge.cancelled{background:#ECEAE3;color:#999}
.atask-progress{height:5px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin-top:8px}
.atask-progress.lg{height:7px;margin:10px 0}
.atask-progress-bar{height:100%;background:var(--accent);border-radius:4px;transition:width .4s ease}
.atask-detail{background:var(--surface);border:1px solid var(--rule,#E5E1D8);border-radius:12px;padding:18px 20px;min-height:200px}
.atask-d-head{border-bottom:1px solid var(--rule,#E5E1D8);padding-bottom:12px;margin-bottom:12px}
.atask-d-headrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.atask-d-title{font-family:var(--serif);font-size:20px;font-weight:500;color:var(--ink);line-height:1.25}
.atask-d-goal{font-size:13px;color:var(--ink-light);margin-top:4px;white-space:pre-wrap}
.atask-d-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.atask-tag{font-size:11px;padding:3px 9px;border-radius:8px;background:var(--surface-2);color:var(--ink-light)}
.atask-stop{animation:atask-pulse 1.4s infinite}
@keyframes atask-pulse{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.atask-d-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.atask-plan{margin:14px 0;background:var(--surface-2);border-radius:10px;padding:12px 14px}
.atask-plan-head{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin-bottom:8px}
.atask-step{display:flex;align-items:flex-start;gap:9px;padding:4px 0;font-size:13px;color:var(--ink)}
.atask-step.done{color:var(--ink-faint)}
.atask-step.done .atask-step-text{text-decoration:line-through}
.atask-step-check{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ink-faint);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-inverse)}
.atask-step-check.done{background:var(--accent);border-color:var(--accent)}
.atask-step-check.active{border-color:var(--accent);animation:atask-pulse 1.4s infinite}
.atask-approval{background:#FBF4E2;border:1px solid #E7D3A0;border-radius:10px;padding:14px;margin:12px 0}
.atask-approval-head{font-size:13px;font-weight:600;color:#8a6a11;margin-bottom:4px}
.atask-approval-reason{font-size:12px;color:var(--ink-light);margin-bottom:8px}
.atask-approval-summary{font-size:13.5px;color:var(--ink);margin-bottom:4px}
.atask-approval-tool{font-size:11px;color:var(--ink-faint);font-family:monospace;margin-bottom:10px}
.atask-approval-actions{display:flex;gap:8px}
.atask-failbox{background:#F8E0DD;border:1px solid #E7B6AE;color:#b23b2e;font-size:13px;border-radius:9px;padding:10px 12px;margin:10px 0}
.atask-notebox{background:var(--surface-2);color:var(--ink-light);font-size:12.5px;border-radius:9px;padding:8px 12px;margin:10px 0}
.atask-activity,.atask-artifacts{margin-top:16px}
.atask-act{display:flex;align-items:flex-start;gap:8px;padding:5px 0;font-size:12.5px;color:var(--ink-light);border-bottom:1px solid var(--surface-2)}
.atask-act-icon{flex-shrink:0}
.atask-act-tool{font-family:monospace;font-size:11px;color:var(--ink-faint);flex-shrink:0}
.atask-act-sum{flex:1;color:var(--ink)}
.atask-act.ok .atask-act-icon{color:#1f7a4d}
.atask-undo{margin-left:auto;font-size:11px;color:var(--accent);background:none;border:none;cursor:pointer;text-decoration:underline}
.atask-undone{margin-left:auto;font-size:11px;color:var(--ink-faint)}
.atask-artifact{font-size:13px;color:var(--ink);background:var(--surface-2);border-radius:8px;padding:10px 12px;white-space:pre-wrap;line-height:1.5}
/* autonomy cards (draft modal) */
.atask-autonomy-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:560px){.atask-autonomy-cards{grid-template-columns:1fr}}
.atask-auto-card{border:1.5px solid var(--rule,#E5E1D8);border-radius:9px;padding:10px;cursor:pointer;text-align:center;transition:border-color .12s,background .12s}
.atask-auto-card:hover{border-color:var(--accent)}
.atask-auto-card.active{border-color:var(--accent);background:#FBF4E2}
.atask-auto-icon{font-size:18px}
.atask-auto-label{font-size:13px;font-weight:600;color:var(--ink);margin-top:2px}
.atask-auto-desc{font-size:10.5px;color:var(--ink-faint);margin-top:2px;line-height:1.3}
.atask-scope{background:var(--surface-2);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.atask-scope-head{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:10px}
.atask-scope-head span{font-weight:400;color:var(--ink-faint);font-size:11px}
.atask-scope-tools{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-bottom:12px}
@media(max-width:560px){.atask-scope-tools{grid-template-columns:1fr}}
.atask-scope-tool{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink);cursor:pointer}
.atask-scope-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
@media(max-width:560px){.atask-scope-row{grid-template-columns:1fr}}
.atask-tpl{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--rule,#E5E1D8);border-radius:9px;margin-bottom:8px}
.atask-tpl-body{flex:1;min-width:0}
.atask-tpl-name{font-size:13.5px;font-weight:600;color:var(--ink)}
.atask-tpl-desc{font-size:11.5px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atask-tpl-meta{font-size:11px;color:var(--ink-light);margin-top:2px}
.atask-tpl-actions{display:flex;gap:4px;flex-shrink:0}
/* plan checklist inside the Aria chat panel */
.aria-task-plan{border:1px solid var(--rule,#E5E1D8);border-radius:10px;padding:10px 12px;margin:8px 0;background:var(--surface)}
.aria-task-plan-title{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.aria-task-step{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--ink);padding:2px 0}
.aria-task-step.done{color:var(--ink-faint)}
.aria-task-step.done .aria-task-step-t{text-decoration:line-through}
.aria-task-step-c{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink-faint);flex-shrink:0;margin-top:1px;font-size:9px;color:var(--text-inverse);display:flex;align-items:center;justify-content:center}
.aria-task-step-c.done{background:var(--accent);border-color:var(--accent)}
.aria-task-step-c.active{border-color:var(--accent)}

/* ════════════════════════════════════════════════════════════
   ARIA — Proactive routines, Concierge feed, Memory Inspector (R6)
   ════════════════════════════════════════════════════════════ */
/* Launcher unread badge */
.aria-launcher-badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#C8553D;color:var(--text-inverse);font-size:11px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--bg,#FAFAF8)}
/* Settings tab bar */
.aria-set-tabs{display:flex;gap:4px;padding:4px;background:var(--surface-2);border-radius:9px;margin-bottom:14px}
.aria-set-tab{flex:1;padding:7px 8px;border:none;background:none;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--ink-light);cursor:pointer}
.aria-set-tab.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.08))}
.aria-set-content{min-height:80px}
/* Routine rows */
.aria-rt{border:1px solid var(--rule,#E5E1D8);border-radius:11px;padding:12px 14px;margin-bottom:10px;background:var(--surface)}
.aria-rt-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.aria-rt-name{font-size:14px;font-weight:600;color:var(--ink)}
.aria-rt-meta{font-size:11.5px;color:var(--ink-faint);font-family:var(--mono,monospace);margin-top:2px}
.aria-rt-desc{font-size:12px;color:var(--ink-light);margin:8px 0;line-height:1.5}
.aria-rt-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--surface-2);padding-top:10px}
.aria-rt-push{font-size:12px;color:var(--ink-light);display:flex;align-items:center;gap:4px;cursor:pointer}
.aria-rt-test{font-size:12px;color:var(--accent);background:none;border:1px solid var(--rule,#E5E1D8);border-radius:7px;padding:4px 10px;cursor:pointer;margin-left:auto}
.aria-rt-test:disabled{opacity:.6;cursor:default}
.aria-digest-card{border-color:var(--brass-soft,#E7D3A0)}
.aria-digest-hour{font-size:12px;border:1px solid var(--rule,#E5E1D8);border-radius:6px;padding:2px 6px;background:var(--surface);color:var(--ink);cursor:pointer}
.aria-rt-toggle{width:38px;height:22px;border-radius:100px;background:var(--rule,#D8D3C8);border:none;position:relative;cursor:pointer;flex-shrink:0;transition:background .2s}
.aria-rt-toggle.on{background:#5A7A5A}
.aria-rt-toggle::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:var(--surface);top:3px;left:3px;transition:left .2s;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.aria-rt-toggle.on::after{left:19px}
.aria-rt-brev{flex-wrap:wrap}
/* Memory inspector */
.aria-mem-pending{background:linear-gradient(135deg,rgba(184,150,74,.10),rgba(184,150,74,.03));border:1px solid var(--brass-soft,#E7D3A0);border-radius:10px;padding:12px;margin-bottom:14px}
.aria-mem-pending-head{font-size:12.5px;font-weight:600;color:#8a6a11;margin-bottom:8px}
.aria-mem-cand{display:flex;align-items:flex-start;gap:8px;justify-content:space-between;padding:7px 0;border-top:1px solid rgba(184,150,74,.18)}
.aria-mem-cand:first-of-type{border-top:none}
.aria-mem-cand-text{font-size:13px;color:var(--ink);line-height:1.4}
.aria-mem-cand-acts{display:flex;gap:6px;flex-shrink:0}
.aria-mem-yes{font-size:12px;background:#5A7A5A;color:var(--text-inverse);border:none;border-radius:7px;padding:4px 10px;cursor:pointer}
.aria-mem-no{font-size:12px;background:none;color:var(--ink-faint);border:1px solid var(--rule,#E5E1D8);border-radius:7px;padding:4px 9px;cursor:pointer}
.aria-mem-add{display:flex;gap:6px;margin-bottom:6px}
.aria-mem-input{flex:1;min-width:0;font-size:13px;padding:8px 10px;border:1px solid var(--rule,#E5E1D8);border-radius:8px;background:var(--surface);color:var(--ink)}
.aria-mem-kind-sel{font-size:12px;border:1px solid var(--rule,#E5E1D8);border-radius:8px;background:var(--surface);color:var(--ink);padding:0 6px}
.aria-mem-add-btn{font-size:13px;font-weight:600;background:var(--accent);color:var(--text-inverse);border:none;border-radius:8px;padding:8px 14px;cursor:pointer}
.aria-mem-row{display:flex;align-items:flex-start;gap:10px;justify-content:space-between;padding:9px 0;border-top:1px solid var(--surface-2)}
.aria-mem-row-text{font-size:13px;color:var(--ink);line-height:1.4}
.aria-mem-row-meta{font-size:10.5px;color:var(--ink-faint);margin-top:3px}
.aria-mem-kind{display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--brass-2,#8a6a11);margin-left:6px}
.aria-mem-row-meta .aria-mem-kind{margin-left:0}
.aria-mem-forget{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:14px;flex-shrink:0;padding:2px 6px;border-radius:5px}
.aria-mem-forget:hover{color:#C8553D;background:rgba(200,85,61,.08)}
.aria-mem-wipe{font-size:12px;color:#C8553D;background:none;border:1px solid rgba(200,85,61,.3);border-radius:8px;padding:6px 14px;cursor:pointer}
/* Proactive feed cards in the chat */
.aria-proactive .aria-proactive-mark{background:linear-gradient(135deg,#B8964A,#9A7B3A);color:var(--text-inverse)}
.aria-proactive-bubble{border:1px solid var(--brass-soft,#E7D3A0);background:linear-gradient(135deg,rgba(184,150,74,.07),var(--surface))}
.aria-pa-title{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:5px}
.aria-pa-body{font-size:13.5px;color:var(--ink);line-height:1.55}
.aria-pa-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.aria-pa-btn{font-size:12.5px;font-weight:600;background:var(--accent);color:var(--text-inverse);border:none;border-radius:8px;padding:6px 12px;cursor:pointer}
.aria-pa-dismiss{display:block;margin-top:8px;font-size:11.5px;color:var(--ink-faint);background:none;border:none;cursor:pointer;padding:0}
.aria-pa-dismiss:hover{color:var(--ink-light);text-decoration:underline}
/* Email-sort Phase 5 — "✓ Added" confirmation after accepting a calendar suggestion. */
.aria-pa-done{display:inline-block;margin-top:8px;font-size:12px;font-weight:600;color:#4a7c59;background:rgba(74,124,89,.12);border-radius:8px;padding:6px 12px}
/* Email-sort Phase 5 — dashed "ghost" calendar suggestion chip (propose-only). */
.cal-ghost-suggestion{cursor:pointer;transition:background .12s ease}
.cal-ghost-suggestion:hover{background:var(--brass-glow,rgba(184,150,90,.14))!important}

/* ── Aria · The Map (R7) ─────────────────────────────────── */
.aria-map-overlay{position:fixed;inset:0;z-index:9600;background:rgba(30,28,24,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:24px}
.aria-map-overlay.open{display:flex}
.aria-map-panel{width:min(1100px,96vw);height:min(760px,92vh);background:var(--surface,#FAFAF8);border:1px solid var(--rule,#E8E2D3);border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden}
.aria-map-head{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--rule,#E8E2D3)}
.aria-map-title{font-size:16px;font-weight:700;color:var(--ink)}
.aria-map-views{display:flex;gap:4px;background:var(--bg,#F1ECE0);border-radius:9px;padding:3px}
.aria-map-vbtn{font-size:12.5px;font-weight:600;border:none;background:none;color:var(--ink-light,#8a7f6a);border-radius:7px;padding:5px 12px;cursor:pointer}
.aria-map-vbtn.active{background:var(--surface,#fff);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.aria-map-vbtn:disabled{opacity:.4;cursor:default}
.aria-map-sub{font-size:12px;color:var(--ink-faint,#9a917f);flex:1}
.aria-map-close{margin-left:auto;font-size:20px;line-height:1}
.aria-map-stage{position:relative;flex:1;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(184,150,74,.06),transparent 60%)}
.aria-map-svg{width:100%;height:100%;display:block}
.aria-map-node text{pointer-events:none;font-family:var(--sans,system-ui)}
.aria-map-node:hover circle{stroke:var(--brass,#B8964A);stroke-width:2.5}
.aria-map-legend{position:absolute;left:14px;bottom:12px;display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--ink-light,#8a7f6a);background:rgba(255,255,255,.7);padding:6px 10px;border-radius:8px}
.aria-map-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:middle}
.aria-map-detail{position:absolute;right:14px;top:14px;width:280px;max-height:calc(100% - 28px);overflow-y:auto;background:var(--surface,#fff);border:1px solid var(--rule,#E8E2D3);border-radius:12px;padding:14px;box-shadow:0 8px 28px rgba(0,0,0,.14)}
.aria-map-detail[hidden]{display:none}
.aria-map-detail-kind{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--brass,#B8964A);margin-bottom:6px}
.aria-map-detail-text{font-size:13px;color:var(--ink);line-height:1.5}
.aria-map-detail-x{margin-top:12px;font-size:12px;font-weight:600;border:1px solid var(--rule,#E8E2D3);background:var(--bg,#F1ECE0);color:var(--ink-light);border-radius:7px;padding:5px 12px;cursor:pointer}
@media (max-width:640px){
  .aria-map-overlay{padding:0}
  .aria-map-panel{width:100vw;height:100vh;border-radius:0}
  .aria-map-detail{width:auto;left:14px;right:14px}
  .aria-map-sub{display:none}
}

/* ── Mailed cards (Handwrytten) settings ──────────────────────── */
.hw-wrap { background: var(--surface); border: 1px solid var(--divider); border-radius: 12px; overflow: hidden; }
.hw-head { padding: 18px 20px; border-bottom: 1px solid var(--divider); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hw-title { font-size: 16px; font-weight: 600; }
.hw-sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.hw-credit { color: var(--text-2); font-size: 12px; }
.hw-body { padding: 18px 20px; }
.hw-enable { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin-bottom: 8px; }
.hw-enable input { width: 16px; height: 16px; }
.hw-enable span { font-size: 13px; }
/* Outbox hub (Outbox / In transit / History) — reuses the .aria-q card styles. */
.hw-outbox:empty { display: none; }
.hw-outbox { margin-bottom: 16px; }
.hw-ob-sec { margin-bottom: 12px; }
.hw-ob-sectitle { font-size: 12px; font-weight: 700; color: var(--text-2); margin: 6px 0 7px; text-transform: uppercase; letter-spacing: .04em; }
.hw-ob-count { display: inline-block; min-width: 17px; text-align: center; font-size: 11px; padding: 0 5px; border-radius: 999px; background: var(--surface-2); color: var(--text-3); margin-left: 4px; }
.hw-ob-hist { margin-top: 4px; }
.hw-ob-hist > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-3); padding: 4px 0; }
.hw-ob-hist[open] > summary { margin-bottom: 8px; }
.hw-ob-collapse { margin-bottom: 14px; border: 1px dashed var(--divider); border-radius: 10px; padding: 4px 12px; }
.hw-ob-collapse > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--text-2); padding: 6px 0; text-transform: uppercase; letter-spacing: .04em; list-style: none; }
.hw-ob-collapse > summary::-webkit-details-marker { display: none; }
.hw-ob-collapse > summary::before { content: '▸ '; color: var(--text-3); }
.hw-ob-collapse[open] > summary::before { content: '▾ '; }
.hw-ob-collapse[open] > summary { margin-bottom: 6px; }
.hw-ob-collapse-body { padding-bottom: 6px; }
.hw-ob-timeline { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: 11px; color: var(--text-3); }
.hw-ob-tstep { display: inline-flex; gap: 4px; align-items: baseline; }
.hw-ob-tstep-lbl { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; opacity: .75; }
.hw-ob-tstep-val { color: var(--text-2); }
.hw-ob-xtras { margin-top: 5px; font-size: 11.5px; color: var(--text-2); display: flex; gap: 10px; flex-wrap: wrap; }
.hw-mono { font-family: var(--mono, monospace); font-size: 11px; }
.hw-sched .aria-q-badge { background: rgba(184,150,90,0.14); color: #9a7b2e; }
.hw-faint { color: var(--text-3); }
.aria-alert-outbox:empty { display: none; }
.aria-alert-outbox { padding: 0 12px 6px; border-bottom: 1px solid var(--divider); margin-bottom: 4px; }
.aria-alert-outbox .aria-q { margin: 6px 0; }
.hw-sec-title { font-size: 12px; font-weight: 600; color: var(--text-2); margin: 20px 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.hw-sec-hint { font-size: 12px; color: var(--text-3); line-height: 1.5; margin: -3px 0 10px; }
.hw-loading { font-size: 12.5px; color: var(--text-3); padding: 10px 0; }
/* Address grid — 12 columns; fields span proportionally via inline grid-column. */
.hw-addr-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; align-items: end; }
@media (max-width: 560px) { .hw-addr-grid > .hw-field { grid-column: span 12 !important; } }
.hw-field { display: flex; flex-direction: column; min-width: 0; }
.hw-field label { font-size: 11px; color: var(--text-3); margin-bottom: 3px; }
.hw-field input, .hw-input { width: 100%; box-sizing: border-box; padding: 8px 11px; border: 1px solid var(--divider); border-radius: 8px; font-size: 16px; background: var(--bg); color: var(--text); }
.hw-card-filter { margin: 4px 0 10px; }
/* Occasion selector chips */
.hw-occbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.hw-occ-current { font-size: 12.5px; color: var(--text-2); margin-bottom: 10px; }
.hw-occ-current .hw-faint { color: var(--text-3); }
.hw-occ-clear { color: var(--accent); cursor: pointer; margin-left: 6px; text-decoration: underline; }
/* Keep the gallery + font picker from making the page enormous — scroll inside. */
.hw-gallery-scroll { max-height: 440px; overflow-y: auto; border: 1px solid var(--divider); border-radius: 10px; padding: 12px; background: var(--bg); }
.hw-fonts-scroll { max-height: 440px; overflow-y: auto; border: 1px solid var(--divider); border-radius: 10px; padding: 10px; background: var(--bg); }
.hw-occ { font-size: 12.5px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--divider); background: var(--bg); color: var(--text-2); cursor: pointer; transition: all .12s; }
.hw-occ:hover { border-color: var(--accent); color: var(--text); }
.hw-occ.active { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); font-weight: 600; }
/* Card gallery — masonry columns so cards keep their TRUE shape (landscape /
   portrait / flat) and show in full. A fixed grid box + object-fit:cover used to
   crop every card into one portrait silhouette. */
.hw-gallery { columns: 132px; column-gap: 12px; }
.hw-tile { position: relative; display: inline-block; width: 100%; margin: 0 0 12px; vertical-align: top; break-inside: avoid; -webkit-column-break-inside: avoid; padding: 0 0 8px; border: 2px solid var(--divider); border-radius: 10px; background: var(--bg); cursor: pointer; overflow: hidden; text-align: center; transition: border-color .12s, transform .12s; }
.hw-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.hw-tile.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
/* Natural aspect ratio — the card image is shown uncropped at its own proportions. */
.hw-tile-img { width: 100%; height: auto; display: block; background: var(--surface); }
.hw-tile-ph { width: 100%; aspect-ratio: 5 / 7; display: flex; align-items: center; justify-content: center; padding: 8px; font-size: 12px; color: var(--text-2); background: linear-gradient(135deg, var(--surface), var(--bg)); }
.hw-tile-title { font-size: 11.5px; color: var(--text-2); padding: 6px 6px 0; line-height: 1.3; }
.hw-tile-badges { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; padding: 0 5px; margin-top: 5px; }
.hw-badge { font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: var(--text-inverse); text-transform: uppercase; letter-spacing: .02em; }
/* Font picker */
.hw-fonts { display: grid; grid-template-columns: 1fr; gap: 12px; }
.hw-font { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-height: 130px; padding: 16px 14px; border: 2px solid var(--divider); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color .12s; }
.hw-font:hover { border-color: var(--accent); }
.hw-font.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
/* Samples are wide, short strips. Drive them by HEIGHT (so the strokes render
   big and legible) rather than width; a strip wider than the row scrolls
   sideways inside .hw-font-sample-wrap instead of being shrunk to fit. */
.hw-font-sample-wrap { width: 100%; overflow-x: auto; overflow-y: hidden; background: var(--surface); border-radius: 6px; -webkit-overflow-scrolling: touch; display: flex; align-items: center; min-height: 150px; padding: 8px 12px; }
.hw-font-sample { height: 150px; width: auto; max-width: none; object-fit: contain; display: block; }
.hw-font-name { font-size: 14px; color: var(--text); font-style: normal; text-align: center; line-height: 1.25; }
/* Recent cards list */
.hw-recent-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--divider); font-size: 12.5px; }

/* ── Aria in-chat card gallery + mailed-card approval preview ──── */
.aria-cg { margin: 8px 0 2px; }
.aria-cg-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.aria-cg-strip::-webkit-scrollbar { height: 6px; }
.aria-cg-strip::-webkit-scrollbar-thumb { background: var(--rule, #ddd); border-radius: 3px; }
.aria-cg-tile { flex: 0 0 auto; width: 96px; scroll-snap-align: start; border: 1px solid var(--rule, #e5e0d5); border-radius: 8px; overflow: hidden; background: var(--surface); }
.aria-cg-tile img { width: 100%; height: 124px; object-fit: cover; display: block; }
.aria-cg-ph { width: 100%; height: 124px; display: flex; align-items: center; justify-content: center; padding: 6px; font-size: 11px; text-align: center; color: var(--text-2); background: linear-gradient(135deg, var(--surface), var(--bg)); }
.aria-cg-cap { font-size: 10.5px; color: var(--text-2); padding: 4px 5px; line-height: 1.25; }
/* Mailed-card approval preview */
.aria-approve-preview { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0 4px; padding: 10px; border: 1px solid var(--rule, #e5e0d5); border-radius: 10px; background: var(--surface); }
.aria-ap-thumb { flex: 0 0 auto; }
.aria-ap-cardimg { width: 78px; height: 104px; object-fit: cover; border-radius: 6px; display: block; }
.aria-ap-meta { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
.aria-ap-row { display: flex; gap: 8px; align-items: center; margin-bottom: 3px; }
.aria-ap-lbl { flex: 0 0 38px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); }
.aria-ap-font { max-height: 26px; max-width: 140px; object-fit: contain; }
.aria-ap-fontname { font-style: italic; }
.aria-ap-msg { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--bg); font-style: italic; line-height: 1.4; white-space: pre-wrap; }

/* ── Aria option chips (tap to choose, single or multi-select) ── */
.aria-opts { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 2px; }
.aria-opt { font-size: 12.5px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--rule, #e5e0d5); background: var(--surface); color: var(--text); cursor: pointer; transition: all .12s; }
.aria-opt:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.aria-opt.sel { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); font-weight: 600; }
.aria-opts.done .aria-opt:not(.sel) { opacity: .45; }
.aria-opt:disabled { cursor: default; }
.aria-opt-send { font-size: 12.5px; font-weight: 600; padding: 7px 15px; border-radius: 999px; border: none; background: var(--accent); color: var(--text-inverse); cursor: pointer; }
.aria-opt-send:disabled { opacity: .4; cursor: default; }

/* ── Aria card-design picker + message-draft cards (R7) ── */
.aria-cp { margin: 8px 0 2px; }
.aria-cp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.aria-cp-tile { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--rule, #e5e0d5); border-radius: 10px; overflow: hidden; background: var(--surface); cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .1s; text-align: center; }
.aria-cp-tile:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,.08); transform: translateY(-1px); }
.aria-cp-tile.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.aria-cp-tile:disabled { cursor: default; }
.aria-cp.done .aria-cp-tile:not(.sel) { opacity: .5; }
.aria-cp-tile img { width: 100%; height: 96px; object-fit: cover; display: block; }
.aria-cp-tile.sm img { height: 70px; }
.aria-cp-ph { width: 100%; height: 96px; display: flex; align-items: center; justify-content: center; padding: 6px; font-size: 10.5px; text-align: center; color: var(--text-2); background: linear-gradient(135deg, var(--surface), var(--bg)); }
.aria-cp-cap { font-size: 10.5px; color: var(--text-2); padding: 5px 4px; line-height: 1.2; }
.aria-cp-more { margin-top: 8px; width: 100%; font-size: 12px; padding: 7px 10px; border-radius: 8px; border: 1px dashed var(--rule, #e5e0d5); background: var(--surface); color: var(--accent); cursor: pointer; font-weight: 600; }
.aria-cp-more:hover { background: var(--surface-2); }
.aria-cp-more.open { border-style: solid; }
.aria-cp-others { margin-top: 8px; }
/* Aria card picker: the "see other cards" extras carry .aria-cp-grid (display:grid),
   which overrides the default [hidden] behavior — scope an explicit hide so the
   expander actually toggles them. */
.aria-cp-grid.aria-cp-others[hidden] { display: none !important; }

/* Cards mode: full-width stacked tappable rows. Each row carries a faint
   brass left-edge accent that grows on hover + a right chevron so the
   affordance reads as "tap me" instead of a flat box. Selected state fills
   the row in brass and inverts the chevron. */
.aria-opts.cards { flex-direction: column; align-items: stretch; gap: 6px; }
.aria-opt-card {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; white-space: normal;
  border-radius: 12px; padding: 11px 14px 11px 16px;
  line-height: 1.4; font-size: 13.5px; font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--rule, #e5e0d5);
  box-shadow: 0 1px 2px rgba(28,27,25,0.03);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease, background .12s ease;
  overflow: hidden;
}
.aria-opt-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent, #B08D57); opacity: 0; transition: opacity .15s ease;
}
.aria-opt-card:hover:not(:disabled) {
  border-color: var(--accent, #B08D57);
  box-shadow: 0 3px 8px rgba(176,141,87,0.12);
  transform: translateY(-1px);
}
.aria-opt-card:hover:not(:disabled)::before { opacity: 1; }
.aria-opt-card.sel { background: var(--accent, #B08D57); border-color: var(--accent, #B08D57); color: var(--text-inverse); font-weight: 600; }
.aria-opt-card.sel::before { opacity: 0; }
.aria-opt-label { flex: 1; min-width: 0; }
.aria-opt-chev {
  flex-shrink: 0; font-size: 18px; font-weight: 400; line-height: 1;
  color: var(--ink-light, #6B6862); transition: transform .15s ease, color .15s ease;
}
.aria-opt-card:hover:not(:disabled) .aria-opt-chev { color: var(--accent, #B08D57); transform: translateX(2px); }
.aria-opt-card.sel .aria-opt-chev { color: var(--text-inverse); }

/* ── Aria mailed-card outbox: in-chat countdown card (R7) ── */
.aria-q { border: 1px solid var(--rule, #e5e0d5); border-radius: 12px; background: var(--surface); padding: 11px 12px; margin: 6px 0; }
.aria-q-main { display: flex; gap: 11px; align-items: flex-start; }
.aria-q-thumb { flex: 0 0 auto; width: 52px; height: 68px; border-radius: 7px; overflow: hidden; background: linear-gradient(135deg, var(--surface-2), var(--bg)); display: flex; align-items: center; justify-content: center; }
.aria-q-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aria-q-ph { font-size: 22px; }
.aria-q-info { flex: 1 1 auto; min-width: 0; }
.aria-q-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.aria-q-to { font-weight: 600; color: var(--text); }
.aria-q-badge { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.aria-q-badge.q { background: var(--accent-bg, #f3ece0); color: var(--accent); }
.aria-q-badge.go { background: #e7f0ff; color: #2f6bd1; }
.aria-q-badge.ship { background: #e6f3fb; color: #2a7bb0; }
.aria-q-badge.done { background: #e7f5ea; color: #2f8a46; }
.aria-q-badge.x { background: #f0eeeb; color: var(--text-3); }
.aria-q-status { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.aria-q-count { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.aria-q-err { color: #b3402f; }
.aria-q-actions { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.aria-q-btn { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule, #e5e0d5); background: var(--surface); color: var(--text); cursor: pointer; transition: all .12s; }
.aria-q-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.aria-q-btn:disabled { opacity: .5; cursor: default; }
.aria-q-btn.go { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }
.aria-q-btn.go:hover:not(:disabled) { filter: brightness(1.05); color: var(--text-inverse); }
.aria-q-btn.ghost { color: var(--text-3); }
.aria-q-editor { margin-top: 10px; border-top: 1px solid var(--rule, #eee); padding-top: 10px; }
.aria-q-lbl { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin: 6px 0 3px; font-weight: 600; }
.aria-q-msg, .aria-q-wishes { width: 100%; box-sizing: border-box; border: 1px solid var(--rule, #e5e0d5); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; background: var(--bg); color: var(--text); resize: vertical; }
.aria-q-editrow { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.aria-q-spacer { flex: 1 1 auto; }
.aria-q-designs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 9px; }
.aria-q-designs[hidden] { display: none; }
.aria-stopped { font-size: 11.5px; color: var(--text-3); font-style: italic; margin: 2px 0; }

/* Stop button (send ↑ becomes a stop square while streaming). */
.aria-send.stop { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong, #ccc); }
.aria-stop-sq { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: currentColor; }

/* ── Header: clickable mode status + "⋯" overflow menu (R7 declutter) ── */
.aria-headtext { position: relative; }
.aria-status { border: none; background: none; padding: 1px 0; margin: 0; font: inherit; font-size: 11px; color: var(--text-2); display: flex; align-items: center; gap: 5px; cursor: pointer; border-radius: 5px; max-width: 100%; }
.aria-status:hover { color: var(--text); }
.aria-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.aria-status.mode-personal::before { background: var(--navy); }
.aria-status.mode-work::before { background: #3A7CA5; }
.aria-status.mode-privacy::before { background: #7B5EA7; }
.aria-status.mode-sandbox::before { background: var(--accent); }
.aria-headtext .aria-mm { left: 0; right: auto; top: 40px; }
.aria-of-wrap { position: relative; display: flex; align-items: center; }
#aria-of-btn { font-size: 22px; letter-spacing: 1px; line-height: 1; }
.aria-of-menu { position: absolute; top: 36px; right: 0; z-index: 30; width: 210px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; animation: ariaMsgIn .14s ease both; }
.aria-of-menu[hidden] { display: none; }
.aria-of-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: none; border-radius: 8px; cursor: pointer; color: var(--text); font: inherit; font-size: 13px; text-align: left; }
.aria-of-item:hover { background: var(--surface-2); }
.aria-of-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-2); }

/* ── Aria Review sweep (email-sort Phase 2) ── */
.rev-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 15px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  margin-bottom: 10px;
  transition: opacity .2s, transform .2s, height .25s, padding .25s, margin .25s;
}
.rev-card.gone {
  opacity: 0;
  transform: translateX(40px);
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}
.rev-card .rh {
  font-size: 12px;
  color: var(--text-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.rev-card .rs {
  font-weight: 700;
  font-size: 13.5px;
  margin: 2px 0;
}
.rev-card .rhint {
  font-size: 11.5px;
  color: var(--text-3);
  margin-bottom: 6px;
  line-height: 1.4;
}
.rev-card .actbtns {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.rev-card .rev-refile {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  margin-top: 8px;
  line-height: 1.4;
}
.rev-card .rev-refile input[type="checkbox"] {
  vertical-align: middle;
  width: 13px;
  height: 13px;
  margin-right: 4px;
  cursor: pointer;
}
.rev-header {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.rev-header-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.rev-chip-amber {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--warning-bg);
  color: var(--warning-dark);
  border: 1px solid rgba(255,149,0,.3);
  white-space: nowrap;
}
.rev-subline {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 12px;
  line-height: 1.5;
}
.rev-empty {
  text-align: center;
  padding: 14px 0;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 600;
}
/* Undo banner — fixed bottom, non-blocking */
#aria-undo-banner {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--navy);
  color: var(--text-inverse);
  padding: 11px 18px;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  max-width: min(480px, calc(100vw - 32px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: rev-banner-in .18s ease;
}
@keyframes rev-banner-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#aria-undo-banner .rev-undo-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#aria-undo-banner .rev-undo-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--sans, inherit);
  transition: background .15s, color .15s;
}
#aria-undo-banner .rev-undo-btn:hover {
  background: var(--accent);
  color: var(--navy);
}
#aria-undo-banner .rev-undo-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,.55);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}
#aria-undo-banner .rev-undo-dismiss:hover { color: var(--text-inverse); }
/* Mobile review sweep */
@media (max-width: 600px) {
  #aria-email-review { padding: 0; }
  .rev-card { padding: 14px 14px; }
  .rev-card .actbtns { gap: 6px; }
  .rev-card .actbtns .btn, .rev-card .actbtns .btn-sm {
    min-height: 42px;
    font-size: 14px;
    padding: 9px 14px;
    flex: 1 1 auto;
    justify-content: center;
  }
  #aria-undo-banner {
    left: env(safe-area-inset-left, 8px);
    right: env(safe-area-inset-right, 8px);
    max-width: none;
    transform: none;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    border-radius: 12px;
    white-space: normal;
  }
  @keyframes rev-banner-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rev-card, .rev-card.gone {
    transition: none;
  }
  #aria-undo-banner { animation: none; }
}

/* ================================================================
   EMAIL SORT — Phases 3 & 4 (es-* prefix)
   ================================================================ */

/* ── Email sub-tab bar ── */
.es-subtabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.es-subtab {
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--divider, rgba(0,0,0,.1));
  background: var(--surface, #fff);
  color: var(--text-3, #9aa0a8);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.es-subtab.active {
  background: var(--navy, #1e2d3d);
  color: var(--text-inverse);
  border-color: transparent;
}
.es-subtab:hover:not(.active) {
  border-color: var(--accent, #b8965a);
  color: var(--accent, #b8965a);
}

/* ── Estimate table ── */
.esttable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 6px;
}
.esttable td {
  padding: 7px 4px;
  border-bottom: 1px solid var(--divider, rgba(0,0,0,.08));
}
.esttable tr:last-child td {
  border-bottom: none;
  font-weight: 800;
}
.esttable td:last-child {
  text-align: right;
}

/* ── Progress panel ── */
.es-prog-wrap {
  background: var(--surface, #fff);
  border: 1px solid var(--divider, rgba(0,0,0,.08));
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
}
.es-bigbar {
  height: 22px;
  border-radius: 8px;
  background: var(--bg, #fafaf8);
  overflow: hidden;
  display: flex;
  border: 1px solid var(--divider, rgba(0,0,0,.08));
  margin: 10px 0;
}
.es-bigbar-fill {
  background: linear-gradient(90deg, var(--accent, #b8965a), var(--accent-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-size: 11px;
  font-weight: 800;
  transition: width .4s;
  white-space: nowrap;
  overflow: hidden;
}
.es-bigbar-work {
  flex: 1;
  background: repeating-linear-gradient(45deg, #ece3cf, #ece3cf 6px, #f6f0e2 6px, #f6f0e2 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
}
.es-statline {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 8px;
}
.es-statnum {
  font-size: 22px;
  font-weight: 800;
}
.es-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.es-brow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.es-brow .es-lbl {
  flex: 0 0 130px;
  font-weight: 700;
}
.es-brow .es-tb {
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: var(--bg, #fafaf8);
  overflow: hidden;
}
.es-brow .es-tb > div {
  height: 100%;
  border-radius: 999px;
  transition: width .5s;
}
.es-brow .es-n {
  flex: 0 0 80px;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}

/* ── Backlog-status banners ── */
.es-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 12.5px;
  margin-bottom: 12px;
}
.es-banner-warn {
  background: rgba(255,149,0,.1);
  border: 1px solid rgba(255,149,0,.3);
  color: #cc7700;
}
.es-banner-error {
  background: rgba(255,59,48,.08);
  border: 1px solid rgba(255,59,48,.25);
  color: var(--rust, #9a4a3a);
}

/* ── Cost-gate action buttons ── */
.es-actbtns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.es-budget-note {
  font-size: 11px;
  color: var(--text-3, #9aa0a8);
  margin-top: 8px;
}

/* ── Rec line (★ recommended hint) ── */
.recline {
  font-size: 11.5px;
  color: var(--accent-dark);
  margin-top: 6px;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.5;
}
.recline .recstar {
  flex: 0 0 auto;
  color: var(--accent, #b8965a);
}
.recline b {
  color: var(--accent-dark);
}

/* ── Settings rows for email sub-tabs ── */
.es-setrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--divider, rgba(0,0,0,.08));
}
.es-setrow:last-child { border-bottom: none; }
.es-setrow .es-sleft { flex: 1; min-width: 0; padding-right: 12px; }
.es-setrow .es-sl { font-weight: 700; font-size: 13.5px; }
.es-setrow .es-sd { font-size: 12px; color: var(--text-3, #9aa0a8); margin-top: 2px; }

/* ── Seg control ── */
.es-seg {
  display: inline-flex;
  border: 1px solid var(--divider, rgba(0,0,0,.12));
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.es-seg button,
.es-seg .es-seg-btn {
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 700;
  border: none;
  background: var(--surface, #fff);
  color: var(--text-3, #9aa0a8);
  border-right: 1px solid var(--divider, rgba(0,0,0,.08));
  cursor: pointer;
  font-family: inherit;
  transition: background .1s, color .1s;
  min-height: 42px;
}
.es-seg button:last-child,
.es-seg .es-seg-btn:last-child { border-right: none; }
.es-seg button.on,
.es-seg .es-seg-btn.on {
  background: var(--accent, #b8965a);
  color: var(--navy);
}
.es-seg button:hover:not(.on),
.es-seg .es-seg-btn:hover:not(.on) {
  background: var(--bg, #fafaf8);
  color: var(--text, #1a1d21);
}

/* ── Confidence slider ── */
.es-slider {
  width: 200px;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 999px;
  background: var(--bg, #fafaf8);
  outline: none;
  flex-shrink: 0;
}
.es-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent, #b8965a);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  cursor: pointer;
}

/* ── Rules list ── */
.es-rule-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--divider, rgba(0,0,0,.06));
  font-size: 12.5px;
}
.es-rule-row:last-child { border-bottom: none; }
.es-rule-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(61,110,165,.12);
  color: #3d6ea5;
  white-space: nowrap;
}
.es-dryrun-result {
  font-size: 12px;
  color: var(--text-3, #9aa0a8);
  padding: 8px 12px;
  background: var(--bg, #fafaf8);
  border-radius: 8px;
  margin-top: 8px;
  border: 1px solid var(--divider, rgba(0,0,0,.08));
}

/* ── Add-rule form ── */
.es-add-rule-form {
  background: var(--bg, #fafaf8);
  border: 1px solid var(--divider, rgba(0,0,0,.08));
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 14px;
}
.es-add-rule-form input,
.es-add-rule-form select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--divider, rgba(0,0,0,.12));
  border-radius: 8px;
  font-size: 16px; /* iOS no-zoom */
  background: var(--surface, #fff);
  color: var(--text, #1a1d21);
  font-family: inherit;
  margin-bottom: 8px;
  box-sizing: border-box;
}
@media (min-width: 481px) {
  .es-add-rule-form input,
  .es-add-rule-form select { font-size: 13px; }
}

/* ── AI Activity Log chips ── */
.logchip {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--divider, rgba(0,0,0,.1));
  background: var(--surface, #fff);
  color: var(--text-3, #9aa0a8);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
  min-height: 36px;
}
.logchip.on {
  background: var(--navy, #1e2d3d);
  color: var(--text-inverse);
  border-color: transparent;
}
.logchip:hover:not(.on) {
  border-color: var(--accent, #b8965a);
  color: var(--text, #1a1d21);
}
.logrow {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 11px 4px;
  border-bottom: 1px solid var(--divider, rgba(0,0,0,.06));
  font-size: 13px;
}
.logrow:last-child { border-bottom: none; }
.log-scroll-box {
  max-height: 460px;
  overflow-y: auto;
  border-radius: 10px;
}

/* ── Activity pill on Aria launcher ── */
.aria-launcher-activity {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent, #b8965a);
  color: var(--navy);
  white-space: nowrap;
  position: absolute;
  top: -4px;
  right: -4px;
}

/* ── Mobile adjustments ── */
@media (max-width: 600px) {
  .es-subtabs { gap: 4px; }
  .es-subtab { padding: 7px 10px; font-size: 12px; }
  .es-setrow { flex-direction: column; align-items: flex-start; }
  .es-setrow .es-sleft { padding-right: 0; }
  .es-slider { width: 100%; }
  .es-seg { width: 100%; }
  .es-seg button { flex: 1; }
  .logchip { font-size: 11.5px; padding: 5px 9px; }
}

/* ═══════════════════════════════════════════════════
   TOP BAR  (Phase 1)
   The sidebar is position:fixed (240px). .app-main carries the
   240px left offset and is a full-height flex column so the 44px
   top bar stays put while .main-content scrolls beneath it.
   ═══════════════════════════════════════════════════ */

.app-main {
  margin-left: 240px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  /* anchor for the .tb absolute positioning below — required so the
     top bar can overlay .main-content (otherwise the glass blur has
     nothing behind it but the static .app-main background). */
  position: relative;
}

.tb {
  height: 52px;
  /* Glass: paper-tinted translucent layer; the blur shows whatever is
     scrolling underneath in .main-content. Bumped opacity slightly so
     content is still readable behind it. */
  background: rgba(250,250,248,0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(30,45,61,0.08);
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 12px;
  /* Position absolute so content scrolls UNDERNEATH the bar inside
     .main-content. With position:sticky the bar was a sibling of the
     scroll container, so nothing ever moved behind it — the glass
     blur had no source material and looked like a static paper band.
     .main-content gets a matching padding-top to keep content from
     being hidden at rest. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

.tb-page {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tb-page .tb-breadcrumb-sep {
  color: var(--text-3);
  font-weight: 400;
  font-size: 12px;
}
.tb-page .tb-breadcrumb-parent {
  color: var(--text-2);
  font-weight: 500;
  cursor: pointer;
}
.tb-page .tb-breadcrumb-parent:hover { color: var(--text); }

.tb-spacer { flex: 1; }

.tb-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(0,0,0,0.03);
  transition: background .15s;
  position: relative;
}
.tb-icon:hover { background: rgba(0,0,0,0.06); }

.tb-div {
  width: 1px;
  height: 24px;
  background: rgba(0,0,0,0.06);
  flex-shrink: 0;
}

/* Status Pills */
.tb-pills-container { display: flex; align-items: center; gap: 6px; }
.tb-pill {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 99px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
}
.tb-pill:hover { opacity: .8; }
.tb-pill-green { background: rgba(52,199,89,0.08); color: #1B8B3A; }
.tb-pill-brass { background: rgba(184,150,90,0.08); color: var(--accent-dark); }
.tb-pill-blue { background: rgba(59,130,246,0.08); color: #2563EB; }
.tb-pill-red { background: rgba(255,59,48,0.08); color: #CC2F26; }
.tb-pill-orange { background: rgba(255,149,0,0.08); color: #CC7700; }

/* Aria Button */
.tb-aria {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 7px;
  cursor: pointer;
  position: relative;
  transition: background .15s;
}
.tb-aria:hover { background: rgba(184,150,90,0.06); }
.tb-aria.tb-aria-active { background: var(--accent-bg); }

.tb-aria-orb {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tb-aria-name { font-size: 13px; font-weight: 500; color: var(--accent-dark); }
.tb-aria-status {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.tb-aria-status.working { color: var(--accent-dark); }

.tb-aria-spinner {
  width: 8px; height: 8px;
  border: 1.5px solid rgba(184,150,90,0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: tb-spin .8s linear infinite;
  flex-shrink: 0;
}
@keyframes tb-spin { to { transform: rotate(360deg); } }

/* Bell */
.tb-bell {
  position: relative;
  padding: 4px;
  cursor: pointer;
  transition: opacity .15s;
  border-radius: 6px;
}
.tb-bell:hover { background: rgba(0,0,0,0.04); }
.tb-bell.tb-bell-active { background: rgba(0,0,0,0.05); }

.tb-badge {
  position: absolute;
  min-width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--bg);
}
.tb-badge-red { background: var(--error); top: 1px; right: 1px; }
.tb-badge-brass { background: var(--accent); top: 2px; right: 3px; }
/* Count pill mode — when badge has text content, expand to pill shape */
.tb-badge:not(:empty) {
  min-width: 14px; height: 14px; padding: 0 4px;
  border-radius: 7px; font-size: 9px; font-weight: 700;
  color: var(--text-inverse); display: flex; align-items: center; justify-content: center;
  top: -2px; right: -4px;
}
.tb-badge-dot { min-width: 7px !important; height: 7px !important; padding: 0 !important; font-size: 0 !important; }

/* Aria contextual task pill — shown inline in status area during working state */
.tb-aria-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 500; color: var(--accent-dark);
  background: rgba(184,150,90,0.08);
  padding: 2px 8px; border-radius: 8px;
  white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis;
}

/* Avatar */
.tb-avatar {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
  user-select: none;
}
.tb-avatar:hover { transform: scale(1.06); }
.tb-avatar.tb-avatar-active { box-shadow: 0 0 0 2px var(--accent); }

/* Dropdowns (shared) */
.tb-dropdown {
  position: absolute;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
  z-index: 200;
  overflow: hidden;
  animation: tb-slideUp .2s ease;
}
@keyframes tb-slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* User Menu Dropdown */
#tb-user-menu {
  top: 52px;
  right: 16px;
  width: 240px;
}
.tb-user-info {
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  gap: 10px;
}
.tb-avatar-lg {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.tb-user-name { font-size: 13px; font-weight: 600; }
.tb-user-email { font-size: 11px; color: var(--text-3); }

.tb-menu-items { padding: 6px; }
.tb-menu-item {
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
  transition: background .12s;
}
.tb-menu-item:hover { background: rgba(0,0,0,0.03); }
.tb-menu-badge {
  margin-left: auto;
  background: var(--error, #b03a2e);
  color: var(--text-inverse);
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}

.tb-admin-section { border-top: 1px solid rgba(0,0,0,0.06); }
.tb-menu-group-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 16px 2px;
}
.tb-menu-signout {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 6px;
}

/* Mobile: hide top bar, revert .app-main to normal body-scroll layout */
@media (max-width: 768px) {
  .tb { display: none !important; }
  #tb-user-menu, #tb-notif-dropdown { display: none !important; }
  .app-main {
    margin-left: 0;
    display: block;
    height: auto;
  }
  /* Restore body-scroll on mobile (both axes visible — a mismatched
     hidden/visible pair would otherwise force an internal scroll container). */
  .main-content { overflow: visible; }
}

/* ═══════════════════════════════════════════════════
   TOAST SYSTEM (Phase 2)
   ═══════════════════════════════════════════════════ */

.toast-bubble {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.04);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: toast-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateX(40px) scale(0.96);
  position: relative;
}
.toast-bubble.toast-out {
  animation: toast-out 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(40px) scale(0.96); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to { opacity: 0; transform: translateX(30px) scale(0.94); }
}

.toast-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 13px; font-weight: 600;
}
.toast-icon-success { background: rgba(52,199,89,0.12); color: #1B8B3A; }
.toast-icon-error { background: rgba(255,59,48,0.1); color: var(--error); }
.toast-icon-bell { background: rgba(255,59,48,0.1); color: var(--error); }
.toast-icon-aria { background: rgba(184,150,90,0.12); color: var(--accent-dark); }

.toast-content { flex: 1; min-width: 0; }
.toast-title { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 1px; }
.toast-msg { font-size: 11px; color: var(--text-2); line-height: 1.4; }
.toast-dismiss {
  width: 20px; height: 20px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-3); font-size: 12px;
  transition: background .15s; flex-shrink: 0;
}
.toast-dismiss:hover { background: rgba(0,0,0,0.06); color: var(--text); }

.toast-persist-tag {
  font-size: 8px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 1px 5px; border-radius: 3px;
  display: inline-block; margin-top: 3px;
}
.toast-persist-tag.bell { background: rgba(255,59,48,0.08); color: var(--error); }
.toast-persist-tag.aria { background: rgba(184,150,90,0.08); color: var(--accent-dark); }

/* ADM-2: tap-to-copy error reference chip inside a toast. */
.toast-ref {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 10px; color: var(--text-3); margin-top: 3px;
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: rgba(0,0,0,0.05); cursor: pointer; user-select: all;
  transition: background .15s, color .15s;
}
.toast-ref:hover { background: rgba(0,0,0,0.10); color: var(--text); }

.toast-progress {
  position: absolute; bottom: 0; left: 12px; right: 12px; height: 2px;
  border-radius: 1px; overflow: hidden;
}
.toast-progress-bar {
  height: 100%; border-radius: 1px;
  animation: toast-timer 4s linear forwards;
}
.toast-progress-bar.green { background: rgba(52,199,89,0.35); }
.toast-progress-bar.red { background: rgba(255,59,48,0.25); }
.toast-progress-bar.brass { background: rgba(184,150,90,0.3); }
@keyframes toast-timer { from { width: 100%; } to { width: 0%; } }

/* ─── Dropdown Shared Classes ───
   Used by the notification dropdown (Phase 2) and Phase 3's task/live-call
   dropdowns. (The user menu uses its own .tb-menu-* classes.) */
.dd-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: space-between;
}
.dd-header h4 { font-size: 13px; font-weight: 600; margin: 0; }
.dd-item {
  padding: 10px 16px;
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.03);
  transition: background .12s;
}
.dd-item:hover { background: rgba(0,0,0,0.02); }
.dd-item:last-child { border-bottom: none; }
.dd-footer {
  padding: 10px 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
  text-align: center;
}
.dd-footer a {
  font-size: 12px; color: var(--accent); font-weight: 500; cursor: pointer;
}
/* Per-notification trailing column: unread dot + dismiss (✕) button. */
.dd-item-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; margin-top: 3px; }
.dd-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
/* All Notifications modal — opened from the bell dropdown's "View All Notifications"
   footer link. Reuses .dd-item / .dd-dismiss / .dd-unread-dot for row parity. */
.all-notif-overlay{
  position:fixed;inset:0;background:rgba(20,18,15,0.55);
  z-index:9990;display:flex;align-items:flex-start;justify-content:center;
  padding:60px 16px 16px;backdrop-filter:blur(2px);
  animation:fadeIn .14s ease both;
}
.all-notif-modal{
  width:100%;max-width:520px;max-height:calc(100vh - 120px);
  background:var(--surface,#fff);border-radius:14px;border:1px solid var(--rule,#E7E3DB);
  box-shadow:0 12px 32px rgba(28,27,25,0.18);
  display:flex;flex-direction:column;overflow:hidden;
  animation:slideDown .18s ease both;
}
.all-notif-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--rule,#E7E3DB);
}
.all-notif-title{font-weight:800;font-size:15px;color:var(--ink,#1C1B19)}
.all-notif-mark{
  font-size:12px;font-weight:600;color:var(--accent,#B08D57);cursor:pointer;
  border-bottom:1px solid transparent;transition:border-color .12s ease;
}
.all-notif-mark:hover{border-bottom-color:var(--accent,#B08D57)}
.all-notif-x{
  width:28px;height:28px;border:none;background:transparent;cursor:pointer;
  color:var(--ink-light,#6B6862);font-size:14px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s ease,color .12s ease;
}
.all-notif-x:hover{background:var(--surface-2,#F5F0E6);color:var(--ink,#1C1B19)}
.all-notif-body{flex:1;overflow-y:auto;padding:4px 0 8px}
.all-notif-empty{padding:32px 18px;text-align:center;color:var(--ink-light,#6B6862);font-size:13px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

.dd-dismiss {
  width: 22px; height: 22px; padding: 0; border: none; background: transparent;
  color: var(--text-3); border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.5; transition: opacity .12s, background .12s, color .12s;
}
.dd-item:hover .dd-dismiss { opacity: 1; }
.dd-dismiss:hover { background: rgba(0,0,0,0.06); color: var(--text); }

/* ═══════════════════════════════════════════════════
   CAPTURE / SEARCH INLINE  (Phase 3)
   ═══════════════════════════════════════════════════ */
.tb-cap-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  transition: all .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.tb-cap-collapsed { max-width: 34px; }
.tb-cap-expanded { max-width: 340px; }
.tb-cap-expanded .tb-cap-trigger { background: var(--accent-bg); }
.tb-cap-expanded .tb-cap-trigger svg { stroke: var(--accent); }

.tb-cap-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid rgba(184,150,90,0.25);
  border-radius: 8px;
  padding: 0 11px;
  height: 34px;
  overflow: hidden;
  opacity: 0;
  width: 0;
  transition: all .35s cubic-bezier(0.16, 1, 0.3, 1);
}
.tb-cap-expanded .tb-cap-input-wrap {
  opacity: 1;
  width: 270px;
  margin-left: 8px;
}
.tb-cap-input-wrap:focus-within { border-color: var(--accent); }
.tb-cap-input-wrap input {
  border: none;
  outline: none;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text);
  background: transparent;
  width: 100%;
  min-width: 0;
}
.tb-cap-input-wrap input::placeholder { color: var(--text-3); }

.tb-cap-close {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-3);
  font-size: 11px;
  flex-shrink: 0;
  transition: all .15s;
}
.tb-cap-close:hover { background: rgba(0,0,0,0.06); color: var(--text); }

.tb-cap-results {
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  max-height: 420px;
  overflow-y: auto;
}
.tb-cap-aria-row {
  padding: 10px 14px;
  background: rgba(184,150,90,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  display: flex; align-items: center; gap: 8px;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
}
.tb-cap-aria-row:hover { background: rgba(184,150,90,0.08); }
.tb-cap-type-row {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  transition: background .12s;
}
.tb-cap-type-row:hover { background: rgba(0,0,0,0.03); }
.tb-cap-type-row.selected { background: rgba(59,130,246,0.06); color: var(--text); }
.tb-cap-search-row {
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  transition: background .12s;
}
.tb-cap-search-row:hover { background: rgba(0,0,0,0.03); }
.tb-cap-hint {
  padding: 6px 14px 10px;
  font-size: 11px;
  color: var(--text-3);
  border-top: 1px solid rgba(0,0,0,0.04);
}

/* Live-call pulse reuses the existing @keyframes pulse (opacity). */

/* ═══════════════════════════════════════════════════
   ARIA ALERT MENU  (the orb's Suggestions dropdown)
   Shares #tb-notif-dropdown; matches docs/notifications-design-report.html.
   ═══════════════════════════════════════════════════ */
.aria-alert-menu .ar-item {
  padding: 13px 16px;
  border-top: 1px solid var(--rule-2, #F2F0EA);
  display: flex; gap: 11px;
}
.aria-alert-menu .ar-item:first-child { border-top: none; }
.aria-alert-menu .ar-ico {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.aria-alert-menu .ar-body { flex: 1; min-width: 0; }
.aria-alert-menu .ar-t { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.aria-alert-menu .ar-q {
  font-size: 12.5px; color: var(--text-2); margin-top: 2px; line-height: 1.45;
}
.aria-alert-menu .ar-acts {
  display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap;
}
/* Scoped button styling — the global .btn is large/uppercase, these are compact. */
.aria-alert-menu .ar-acts .btn {
  font-size: 12px; font-weight: 600; letter-spacing: 0;
  text-transform: none; padding: 5px 13px;
  border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; transition: all .12s;
  display: inline-flex; align-items: center;
}
.aria-alert-menu .ar-acts .btn-primary { background: var(--accent); color: var(--text-inverse); }
.aria-alert-menu .ar-acts .btn-primary:hover { background: var(--accent-dark); }
.aria-alert-menu .ar-acts .btn-ghost {
  background: var(--surface); border-color: var(--rule, #ECE9E2); color: var(--text-2);
}
.aria-alert-menu .ar-acts .btn-ghost:hover { border-color: var(--text-3); background: #FCFBF8; }
.aria-alert-menu .ar-acts .btn-danger {
  background: rgba(255,59,48,0.08); color: var(--error); border-color: transparent;
}
.aria-alert-menu .ar-acts .btn-danger:hover { background: rgba(255,59,48,0.14); }
.aria-alert-menu .ar-tier {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 5px;
  margin-left: auto; align-self: flex-start; white-space: nowrap;
}
.aria-alert-menu .ar-tier.block { background: rgba(255,59,48,0.1); color: var(--error); }
.aria-alert-menu .ar-tier.ask { background: rgba(255,149,0,0.12); color: #c26d00; }
.aria-alert-menu .ar-tier.fyi { background: #EEF0F2; color: var(--text-2); }

/* Blocking orb sub-state — red pulse ring + red badge for pending approvals. */
.tb-aria-orb.aria-blocking {
  background: linear-gradient(135deg, #ff6a60, var(--error));
  animation: aria-orb-pulse 1.6s infinite;
}
@keyframes aria-orb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,59,48,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255,59,48,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); }
}
.tb-badge.aria-badge-pulse { animation: aria-badge-blink 1.6s infinite; }
@keyframes aria-badge-blink { 0%,100% { opacity: 1; } 55% { opacity: 0.55; } }

/* ═══════════════════════════════════════════════════
   TOAST TIERS — progress (sticky, indeterminate) + undo (purple, countdown)
   ═══════════════════════════════════════════════════ */
.toast-icon-progress { background: rgba(59,130,246,0.12); color: var(--blue, #3B82F6); }
.toast-icon-undo { background: rgba(139,92,246,0.12); color: var(--purple, #8B5CF6); }
.toast-progress-bar.blue { background: rgba(59,130,246,0.45); }
.toast-progress-bar.purple { background: rgba(139,92,246,0.5); }

/* Indeterminate sweep for a running (progress) toast — overrides the timer anim. */
.toast-progress-bar.indeterminate {
  animation: toast-indeterminate 1.1s ease-in-out infinite;
  width: 40%;
}
@keyframes toast-indeterminate {
  0%   { margin-left: -40%; width: 40%; }
  50%  { margin-left: 30%;  width: 55%; }
  100% { margin-left: 100%; width: 40%; }
}
/* Inline Undo action button inside an undo toast. */
.toast-undo {
  font-size: 11.5px; font-weight: 700; color: var(--purple, #8B5CF6);
  cursor: pointer; margin-top: 6px; display: inline-block;
  padding: 3px 11px; border-radius: 7px;
  background: rgba(139,92,246,0.08); transition: background .12s;
}
.toast-undo:hover { background: rgba(139,92,246,0.16); }

/* ════════════════════════════════════════════════════════════
   FINANCE — Wellness Overview tab (.fw-*)
   ════════════════════════════════════════════════════════════ */
.fw-overview{display:flex;flex-direction:column;gap:18px}
/* Equal-sized KPI bar (wellness score + the four signals, all the same size) */
.fw-kpibar{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
/* Thinner KPI cards */
.fw-kpibar .fw-kpi{padding:9px 14px}
.fw-kpibar .fw-kpi-v{font-size:20px;margin-top:1px}
.fw-kpibar .fw-kpi-s{margin-top:1px}
/* Wellness KPI keeps its wheel chart */
.fw-kpi-score .fw-score-row{display:flex;align-items:center;gap:10px;margin-top:3px}
.fw-score-ring{flex-shrink:0}
.fw-score-grade{font-size:12.5px;font-weight:600;line-height:1.2}
/* Cashflow KPI tooltip — reveals on hover/focus, anchored above the card.
   Shows the user where the headline number actually came from (90-day txn
   average vs. recurring fallback vs. budget fallback) plus a comparison to
   the alternative source so they can sanity-check it. */
.fw-kpi-cashflow{position:relative;cursor:help;outline:none}
.fw-kpi-info{font-size:11px;color:var(--ink-light,#6B6862);opacity:.6;margin-left:3px}
.fw-kpi-cashflow:hover .fw-kpi-info,.fw-kpi-cashflow:focus .fw-kpi-info{opacity:1;color:var(--accent,#B08D57)}
.fw-kpi-tip{
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  width:280px;max-width:88vw;
  background:var(--surface,#fff);color:var(--ink,#1C1B19);
  border:1px solid var(--rule,#E7E3DB);border-radius:11px;
  box-shadow:0 12px 28px rgba(28,27,25,0.18);
  padding:11px 13px;font-size:12px;line-height:1.45;text-align:left;
  opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;
  z-index:50;
}
.fw-kpi-cashflow:hover .fw-kpi-tip,.fw-kpi-cashflow:focus .fw-kpi-tip,.fw-kpi-cashflow:focus-within .fw-kpi-tip{opacity:1;transform:translateX(-50%) translateY(-2px)}
.fw-kpi-tip-h{font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-light,#6B6862);margin-bottom:7px}
.fw-kpi-tip-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px}
.fw-kpi-tip-v{font-weight:700;font-variant-numeric:tabular-nums}
.fw-kpi-tip-sub{font-size:11px;color:var(--ink-light,#6B6862);font-style:italic;margin-top:1px}
.fw-kpi-tip-alt{font-size:11px;color:var(--ink-mid,#3a3833);margin-top:3px;padding:3px 7px;background:var(--surface-2,#F5F0E6);border-radius:6px}
.fw-kpi-tip-sep{height:1px;background:var(--rule,#E7E3DB);margin:8px 0 6px}
.fw-kpi-tip-warn{margin-top:8px;font-size:11px;color:var(--error,#C0492F);line-height:1.4}

/* Privacy blur — body.privacy-mode hides the financial numbers behind a soft
   blur until the user toggles it off (or hovers an individual number). Tagged
   selectors below are the dollar-figure spots across Finance + the Today
   page. CTRL/CMD-click on any of them reveals just that one. */
body.privacy-mode .fa-sum-v,
body.privacy-mode .fa-sum-v2,
body.privacy-mode .fw-kpi-v,
body.privacy-mode .fa-kpi-v,
body.privacy-mode .fa-acct-bal,
body.privacy-mode .fa-grp-tot,
body.privacy-mode .bt-row-amt,
body.privacy-mode .bt-detail-kpis .fa-kpi-v,
body.privacy-mode .bgt-row-num,
body.privacy-mode .bgt-cat-amt,
body.privacy-mode .bgt-health-big,
body.privacy-mode .bgt-sts-n,
body.privacy-mode .tx-row-amt,
body.privacy-mode .tx-amt,
body.privacy-mode .fc-kpi-v,
body.privacy-mode .fw-kpi-tip-v,
body.privacy-mode .plaid-nw-value,
body.privacy-mode .recur-amt,
body.privacy-mode .bgt-bar-amt{
  filter:blur(7px);transition:filter .14s ease;cursor:help;user-select:none;
}
body.privacy-mode .fa-sum-v:hover,
body.privacy-mode .fa-sum-v2:hover,
body.privacy-mode .fw-kpi-v:hover,
body.privacy-mode .fa-kpi-v:hover,
body.privacy-mode .fa-acct-bal:hover,
body.privacy-mode .fa-grp-tot:hover,
body.privacy-mode .bt-row-amt:hover,
body.privacy-mode .bt-detail-kpis .fa-kpi-v:hover,
body.privacy-mode .bgt-row-num:hover,
body.privacy-mode .bgt-cat-amt:hover,
body.privacy-mode .bgt-health-big:hover,
body.privacy-mode .bgt-sts-n:hover,
body.privacy-mode .tx-row-amt:hover,
body.privacy-mode .tx-amt:hover,
body.privacy-mode .fc-kpi-v:hover,
body.privacy-mode .fw-kpi-tip-v:hover,
body.privacy-mode .plaid-nw-value:hover,
body.privacy-mode .recur-amt:hover,
body.privacy-mode .bgt-bar-amt:hover{filter:blur(0)}
/* Eye toggle that lives in the Finance top bar — leftmost of the action row. */
.fa-privacy-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  border:1px solid var(--rule,#E7E3DB);border-radius:9px;
  background:var(--surface,#fff);color:var(--ink-mid,#3a3833);
  cursor:pointer;font-size:14px;
  transition:border-color .12s ease,background .12s ease;
}
.fa-privacy-btn:hover{border-color:var(--accent,#B08D57)}
body.privacy-mode .fa-privacy-btn{background:var(--accent,#B08D57);color:var(--text-inverse);border-color:var(--accent,#B08D57)}

/* Accounts-style top bar (reuses .fa-sum) with the Overview's refresh + sync note */
.fw-topbar{margin-bottom:2px}
.fw-topbar-sync{font-size:11px;color:var(--ink-light,#6B6862);white-space:nowrap;margin-right:2px}
/* Account rail on the Overview mirrors the Accounts tab rail */
.fw-rail-card{align-self:start}
.fw-rail-card .fa-rail{max-height:560px;overflow-y:auto}
/* Budget month navigation + auto-rules */
.budget-month-nav{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.budget-month-label{font-weight:700;font-size:15px;min-width:140px;text-align:center}
.budget-amt{transition:background .12s;border-radius:6px;padding:0 4px}
.budget-amt:hover{background:var(--bg,#F1EFEA)}
.rule-list{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow-y:auto;margin-bottom:12px}
.rule-row{display:flex;align-items:center;gap:10px;background:var(--surface,#fff);border:1px solid var(--rule,#E7E3DB);border-radius:10px;padding:10px 12px}
.rule-row-main{flex:1;min-width:0}
.rule-row-name{font-weight:700;font-size:14px}
.rule-row-sub{font-size:12px;color:var(--ink-light,#6B6862);margin-top:1px;word-break:break-word}
.rule-row-acts{display:flex;gap:4px;flex-shrink:0}
/* Body: accounts sidebar on the left, the rest of the widgets fill the right */
.fw-body{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
.fw-side{background:var(--surface,#fff);border:1px solid var(--rule,#E7E3DB);border-radius:14px;overflow:hidden;align-self:start}
.fw-side-head{padding:16px 16px 14px;border-bottom:1px solid var(--rule,#E7E3DB)}
.fw-side-nw{display:flex;flex-direction:column;gap:2px}
.fw-side-nw-l{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-light,#6B6862);font-weight:600}
.fw-side-nw-v{font-size:24px;font-weight:800;line-height:1.1}
.fw-side-sub{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-light,#6B6862);margin-top:6px}
.fw-side-sub b{color:var(--ink,#1C1B19);font-weight:700}
.fw-side-actions{display:flex;gap:8px;margin-top:12px}
.fw-side-actions .btn-sm{flex:1;text-align:center}
.fw-side-sync{font-size:11px;color:var(--ink-light,#6B6862);margin-top:8px;text-align:center}
.fw-side-list{padding:14px}
.fw-side-list .fw-grp{margin-bottom:12px}
.fw-side-list .fw-grp:last-child{margin-bottom:0}
.fw-side-empty{font-size:13px;color:var(--ink-light,#6B6862);padding:6px 2px}
.fw-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.fw-main .fw-insights{grid-template-columns:1fr 1fr}
.fw-empty{text-align:center;padding:48px 20px;color:var(--ink-light,#6B6862)}
.fw-empty-icon{font-size:40px;margin-bottom:8px}
.fw-empty h3{margin:0 0 6px;font-size:20px}
.fw-empty p{margin:0 auto 16px;max-width:380px}
.fw-score-card{display:flex;gap:24px;align-items:center;flex-wrap:wrap;background:var(--surface,#fff);border:1px solid var(--rule,#E7E3DB);border-radius:14px;padding:22px 24px}
.fw-ring{position:relative;width:150px;height:150px;flex-shrink:0}
.fw-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fw-ring-num{font-size:40px;font-weight:800;line-height:1;color:var(--ink,#1C1B19)}
.fw-ring-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-light,#6B6862);font-weight:700;margin-top:2px}
.fw-score-summary{flex:1;min-width:240px}
.fw-grade{font-size:22px;font-weight:800}
.fw-score-summary p{margin:6px 0 0;font-size:14px;color:var(--ink-mid,#3a3833)}
.fw-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fw-kpi{background:var(--surface,#fff);border:1px solid var(--rule,#E7E3DB);border-radius:11px;padding:13px 15px}
.fw-kpi-l{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-light,#6B6862);font-weight:600}
.fw-kpi-v{font-size:22px;font-weight:800;margin-top:3px}
.fw-kpi-s{font-size:11px;color:var(--ink-light,#6B6862);margin-top:2px}
.fw-section-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-light,#6B6862);margin:6px 0 -4px}
.fw-dims{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fw-dim{background:var(--surface,#fff);border:1px solid var(--rule,#E7E3DB);border-radius:11px;padding:13px 15px}
.fw-dim-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.fw-dim-name{font-weight:700;font-size:14px}
.fw-dim-sc{font-weight:800;font-size:15px}
.fw-bar{height:7px;border-radius:99px;background:var(--rule,#EEEBE4);overflow:hidden}
.fw-bar>i{display:block;height:100%;border-radius:99px}
.fw-dim-note{font-size:12px;color:var(--ink-light,#6B6862);margin-top:7px}
.fw-insights{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fw-insight{display:flex;gap:13px;align-items:flex-start;background:var(--surface,#fff);border:1px solid var(--rule,#E7E3DB);border-left:4px solid var(--rule,#E7E3DB);border-radius:11px;padding:13px 16px}
.fw-insight-ic{font-size:21px;flex-shrink:0;line-height:1.2}
.fw-insight-t{font-weight:700;font-size:14px}
.fw-insight-b{font-size:12.5px;color:var(--ink-light,#6B6862);margin-top:2px}
.fw-insight-red{border-left-color:var(--error,#C0492F)}
.fw-insight-amber{border-left-color:var(--brass,#C08A1E)}
.fw-insight-blue{border-left-color:#3A6EA5}
.fw-insight-green{border-left-color:var(--success,#3F8F5B)}
.fw-groups{display:flex;flex-direction:column;gap:14px}
.fw-grp-h{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-light,#6B6862);margin-bottom:6px}
.fw-grp-tot{font-size:14px;text-transform:none;letter-spacing:0;color:var(--ink,#1C1B19)}
.fw-acct{display:flex;align-items:center;gap:12px;background:var(--surface,#fff);border:1px solid var(--rule,#E7E3DB);border-radius:10px;padding:10px 14px;margin-bottom:7px}
.fw-acct-ic{width:34px;height:34px;border-radius:9px;background:var(--bg,#F1EFEA);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0}
.fw-acct-main{flex:1;min-width:0}
.fw-acct-name{font-weight:700;font-size:14px}
.fw-acct-sub{font-size:12px;color:var(--ink-light,#6B6862)}
.fw-acct-bal{font-weight:800;font-size:14px;white-space:nowrap}
.fw-acct-cov{font-size:12px;color:#6B5B95;font-weight:700}
.fw-tag{display:inline-block;font-size:10px;font-weight:700;padding:1px 7px;border-radius:6px;vertical-align:middle;margin-left:4px}
.fw-tag-red{background:#FBEAE5;color:#C0492F}
.fw-tag-purple{background:#EEEAF4;color:#6B5B95}
.fw-foot{font-size:12px;color:var(--ink-light,#6B6862);font-style:italic;margin-top:4px}
@media(max-width:1024px){.fw-kpibar{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.fw-body{grid-template-columns:1fr}}
@media(max-width:760px){.fw-kpibar{grid-template-columns:repeat(2,1fr)}.fw-kpis{grid-template-columns:repeat(2,1fr)}.fw-dims{grid-template-columns:1fr}.fw-main .fw-insights{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════
   FINANCE — Accounts master–detail (.fa-*) · Phase 2
   ════════════════════════════════════════════════════════════ */
.fa-sticky{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--surface,#fff);border:1px solid var(--rule,#E7E3DB);border-radius:12px;padding:14px 18px;margin-bottom:14px}
.fa-sum{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.fa-sum-l{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-light,#6B6862);font-weight:700}
.fa-sum-v{font-size:22px;font-weight:800;line-height:1.1}
.fa-sum-v2{font-size:17px;font-weight:700;line-height:1.1}
.fa-sticky-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.fa-search{font-size:13px;padding:6px 12px;width:170px}
.fa-mode{display:inline-flex;border:1px solid var(--rule,#E7E3DB);border-radius:9px;overflow:hidden}
.fa-mode-btn{font-size:12px;font-weight:600;padding:6px 11px;background:var(--surface,#fff);border:0;color:var(--ink-mid,#3a3833);cursor:pointer}
.fa-mode-btn.active{background:var(--navy,#1F2A44);color:var(--text-on-navy)}
.fa-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--rule,#E7E3DB);border-radius:9px;background:var(--surface,#fff);color:var(--ink-mid,#3a3833);cursor:pointer}
.fa-icon-btn:hover{border-color:var(--accent,#B08D57)}
.fa-icon-btn.fa-danger:hover{color:var(--error,#C0492F);border-color:var(--error,#C0492F)}

.fa-layout{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start;min-height:340px}
.fa-rail{border:1px solid var(--rule,#E7E3DB);border-radius:12px;background:#FCFBF8;padding:10px;max-height:72vh;overflow:auto}
.fa-rail-empty{padding:18px 10px;font-size:13px;color:var(--ink-light,#6B6862);text-align:center}
.fa-grp-h{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-light,#6B6862);padding:9px 6px 5px;cursor:pointer;user-select:none}
.fa-grp-h.fa-drop-on{box-shadow:inset 0 2px 0 var(--accent,#B08D57)}
.fa-grp-h.fa-dragging{opacity:.5}
.fa-grp-caret{font-size:10px;width:10px}
.fa-grp-lbl{flex:1}
.fa-grp-tot{font-weight:800;color:var(--ink,#1C1B19);text-transform:none;letter-spacing:0;font-size:12.5px}
.fa-grp-body{display:flex;flex-direction:column}
.fa-acct-row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px;cursor:pointer;border:1px solid transparent}
.fa-acct-row:hover{background:#F4F1EA}
.fa-acct-row.fa-selected{background:var(--navy,#1F2A44);color:var(--text-on-navy)}
.fa-acct-row.fa-selected .fa-acct-mt{color:rgba(245,240,230,.75)}
.fa-acct-row.fa-selected .fa-acct-ic{background:rgba(255,255,255,.16)}
.fa-acct-row.fa-dragging{opacity:.45}
.fa-acct-row.fa-drop-on{box-shadow:inset 0 2px 0 var(--accent,#B08D57)}
.fa-drag{color:var(--ink-light,#9C988F);font-size:14px;letter-spacing:-2px;cursor:grab;opacity:0;flex-shrink:0}
.fa-acct-row:hover .fa-drag{opacity:.7}
.fa-acct-row.fa-selected .fa-drag{color:rgba(245,240,230,.6)}
.fa-acct-ic{width:30px;height:30px;border-radius:8px;background:var(--bg,#F1EFEA);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0}
.fa-acct-info{flex:1;min-width:0}
.fa-acct-nm{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fa-acct-mt{font-size:11px;color:var(--ink-light,#6B6862);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fa-acct-bal{font-weight:700;font-size:13px;white-space:nowrap}
.fa-acct-bal.debt{color:var(--error,#C0492F)}
.fa-acct-row.fa-selected .fa-acct-bal.debt{color:#F0A99A}
.fa-cov{font-size:11px;font-weight:700;opacity:.8}

.fa-compact .fa-acct-row{padding:4px 8px}
.fa-compact .fa-acct-ic{width:24px;height:24px;font-size:13px;border-radius:7px}
.fa-compact .fa-acct-mt{display:none}

.fa-detail{border:1px solid var(--rule,#E7E3DB);border-radius:12px;background:var(--surface,#fff);padding:18px 20px}
.fa-detail-empty{padding:40px 20px;text-align:center;color:var(--ink-light,#6B6862);font-size:14px}
.fa-back{display:none;background:none;border:0;color:var(--accent,#B08D57);font-size:13px;font-weight:600;padding:0 0 10px;cursor:pointer}
.fa-d-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.fa-d-ic{width:44px;height:44px;border-radius:11px;background:var(--bg,#F1EFEA);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;flex-shrink:0}
.fa-d-title{flex:1;min-width:0}
.fa-d-nm{font-weight:800;font-size:17px}
.fa-d-sub{font-size:12.5px;color:var(--ink-light,#6B6862);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fa-d-actions{display:flex;gap:6px}
.fa-pill{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px}
.fa-pill-red{background:#FBEAE5;color:#C0492F}
.fa-pill-purple{background:#EEEAF4;color:#6B5B95}
.fa-pill-grey{background:#F1EFEA;color:var(--text-2)}
.fa-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.fa-kpi{background:var(--bg,#FCFBF8);border:1px solid var(--rule,#E7E3DB);border-radius:10px;padding:10px 12px}
.fa-kpi-l{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-light,#6B6862);font-weight:600}
.fa-kpi-v{font-size:18px;font-weight:800;margin-top:3px}
.fa-tx-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.fa-tx-filters{display:flex;gap:4px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
@media(max-width:760px){
  .fa-kpis{grid-template-columns:repeat(2,1fr)}
  .fa-layout{grid-template-columns:1fr}
  .fa-rail{max-height:none}
  .fa-layout .fa-detail{display:none}
  .fa-layout.fa-show-detail .fa-rail{display:none}
  .fa-layout.fa-show-detail .fa-detail{display:block}
  .fa-back{display:inline-block}
}

/* ════════════════════════════════════════════════════════════
   FINANCE — Bills Tracker (.bt-*) · Phase 3
   ════════════════════════════════════════════════════════════ */
.bt-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.bt-banner{border-radius:12px;padding:16px 20px;display:flex;align-items:center;gap:16px;margin-bottom:16px;color:var(--text-inverse)}
.bt-banner.bt-behind{background:linear-gradient(135deg,#C0492F,#A23C26)}
.bt-banner.bt-current{background:linear-gradient(135deg,#3F8F5B,#347A4D)}
.bt-banner-ic{font-size:30px;line-height:1}
.bt-banner-main{font-size:18px;font-weight:800}
.bt-banner-sub{font-size:13px;opacity:.92}
.bt-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.bt-kpi{background:var(--surface,#fff);border:1px solid var(--rule,#E7E3DB);border-radius:11px;padding:12px 15px}
.bt-kpi-l{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-light,#6B6862);font-weight:600}
.bt-kpi-v{font-size:24px;font-weight:800;margin-top:3px}
.bt-pill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.02em;white-space:nowrap}
.bt-pill-red{background:#FBEAE5;color:#C0492F}
.bt-pill-amber{background:#FBF1DC;color:#C08A1E}
.bt-pill-green{background:#E8F3EC;color:#3F8F5B}
.bt-pill-grey{background:#F1EFEA;color:#9C988F}
.bt-tag{display:inline-block;font-size:10px;font-weight:700;padding:1px 7px;border-radius:6px;vertical-align:middle}
.bt-tag-red{background:#FBEAE5;color:#C0492F}
.bt-tag-grey{background:#F1EFEA;color:var(--text-2)}
/* Autopay badge — sits next to the bill name when the user has flipped
   "Auto-pay is set up" on the detail. Sage-green so it reads as a
   reassurance ("you handled it"), distinct from the red critical chip. */
.bt-tag-autopay{background:#E4ECDF;color:#3F8F5B;letter-spacing:.02em}
.bt-att{background:var(--surface,#fff);border:1px solid var(--rule,#E7E3DB);border-radius:11px;padding:12px 15px;display:flex;align-items:center;gap:13px;margin-bottom:9px}
.bt-att-red{border-left:4px solid var(--error,#C0492F)}
.bt-att-amber{border-left:4px solid var(--brass,#C08A1E)}
.bt-att-ic{font-size:21px;flex-shrink:0}
.bt-att-main{font-weight:700;font-size:14px}
.bt-att-sub{font-size:12.5px;color:var(--ink-light,#6B6862)}
.bt-match{background:linear-gradient(135deg,#FBF7F0,#fff);border:1px solid var(--brass-soft,#C9A977);border-radius:12px;padding:13px 16px;margin-bottom:10px}
.bt-match-q{font-weight:700;font-size:14px;margin-bottom:8px}
.bt-row{background:var(--surface,#fff);border:1px solid var(--rule,#E7E3DB);border-radius:11px;padding:12px 15px;display:flex;align-items:center;gap:13px;margin-bottom:9px;cursor:pointer}
.bt-row:hover{border-color:var(--accent,#B08D57)}
.bt-row-ic{width:38px;height:38px;border-radius:10px;background:var(--bg,#F1EFEA);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.bt-row-main{min-width:0}
.bt-row-nm{font-weight:700;font-size:14.5px}
.bt-row-meta{font-size:12.5px;color:var(--ink-light,#6B6862)}
.bt-row-amt{font-weight:800;font-size:15px;text-align:right;white-space:nowrap}
.bt-row-amt .bt-due{display:block;font-size:11px;color:var(--ink-light,#6B6862);font-weight:600}
.bt-subs{margin-top:12px;border-top:1px dashed var(--rule,#E7E3DB);padding-top:12px}
.bt-subs-h{display:flex;align-items:center;gap:8px;color:var(--ink-light,#6B6862);font-size:13px;font-weight:600;cursor:pointer;margin-bottom:9px}
.bt-grid-wrap{background:var(--surface,#fff);border:1px solid var(--rule,#E7E3DB);border-radius:11px;padding:14px 16px;overflow-x:auto}
.bt-hm{border-collapse:separate;border-spacing:5px}
.bt-hm th{font-size:11px;color:var(--ink-light,#6B6862);font-weight:700;padding:4px;text-align:center}
.bt-hm-name{text-align:left;font-size:13px;font-weight:600;white-space:nowrap;padding-right:8px}
.bt-cell{width:40px;height:32px;border-radius:8px;text-align:center;font-size:11px;font-weight:700;color:var(--text-inverse)}
.bt-cell.c-paid{background:var(--success,#3F8F5B)}
.bt-cell.c-miss{background:var(--error,#C0492F)}
.bt-cell.c-due{background:var(--brass,#C08A1E)}
.bt-cell.c-late{background:#7A5C2E}
.bt-cell.c-na{background:#EDEAE3;color:#B8B3A8}
/* Inline mini-heatmap on each bill row — replaces the separate Payment
   History grid. 7 small cells (last 7 months) sit between the bill name
   and the status pill, so each row tells the full story at a glance.
   Each cell is a column: status square on top, 3-letter month label
   underneath (so the user can read which month each cell is for). */
.bt-mini-hm{display:inline-flex;gap:4px;align-items:flex-end;flex-shrink:0;margin:0 auto 0 12px}
.bt-mini-col{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.bt-mini-cell{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:20px;border-radius:4px;
  font-size:10px;font-weight:700;color:var(--text-inverse);line-height:1;
}
.bt-mini-cell.c-paid{background:var(--success,#3F8F5B)}
.bt-mini-cell.c-miss{background:var(--error,#C0492F)}
.bt-mini-cell.c-due{background:var(--brass,#C08A1E)}
.bt-mini-cell.c-late{background:#7A5C2E}
.bt-mini-cell.c-na{background:#EDEAE3;color:#B8B3A8}
.bt-mini-lbl{
  font-size:9px;font-weight:700;letter-spacing:.04em;
  color:var(--ink-light,#6B6862);text-transform:uppercase;line-height:1;
}
.bt-legend-bottom{margin-top:14px;justify-content:center}
@media (max-width:680px){.bt-mini-hm{display:none}}
.bt-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--ink-light,#6B6862)}
.bt-legend span{display:inline-flex;align-items:center;gap:6px}
.bt-sw{width:12px;height:12px;border-radius:4px;display:inline-block}
.bt-disc{background:linear-gradient(135deg,#FBF7F0,#fff);border:1px solid var(--brass-soft,#C9A977);border-radius:12px;padding:14px 16px;margin-bottom:11px}
.bt-disc-review{border-color:var(--rule,#E7E3DB);background:var(--surface,#fff)}
.bt-disc-nm{font-weight:800;font-size:16px}
.bt-disc-detect{font-size:13px;color:var(--ink-light,#6B6862);margin-top:4px}
.bt-disc-detect b{color:var(--ink,#1C1B19)}
.bt-detail-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
/* Clickable KPI tiles — sit on the bill detail modal. The whole strip opens
   the same edit form as the "Edit tracking settings" button below. Subtle
   hover affordance signals "tappable" without screaming. */
.bt-kpis-clickable{cursor:pointer;transition:transform .12s ease,opacity .12s ease}
.bt-kpis-clickable:hover{transform:translateY(-1px);opacity:.92}
/* Settings preview block — the rest of the editable settings (merchant
   patterns, grace days, budget envelope, pays-from) shown read-only with a
   visible "Edit tracking settings" affordance. Makes it obvious every value
   here is editable, not just the KPI tiles. */
.bt-settings-preview{
  margin-top:10px;padding:11px 13px;
  border:1px solid var(--rule,#E7E3DB);border-radius:11px;background:var(--surface-2,#F5F0E6);
  display:flex;flex-direction:column;gap:6px;
}
.bt-settings-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:12.5px;line-height:1.4;
}
.bt-settings-l{font-weight:600;color:var(--ink-light,#6B6862);letter-spacing:.01em;flex-shrink:0}
.bt-settings-v{color:var(--ink,#1C1B19);text-align:right;font-family:var(--mono,inherit);word-break:break-word}
.bt-settings-edit{
  margin-top:6px;align-self:flex-start;
  background:transparent;border:1px solid var(--accent,#B08D57);
  color:var(--accent,#B08D57);font-weight:600;font-size:12px;
  padding:6px 12px;border-radius:8px;cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.bt-settings-edit:hover{background:var(--accent,#B08D57);color:var(--text-inverse)}
/* Auto-pay toggle row inside the bill detail modal. Looks like a settings
   row (checkbox left, label + sublabel right) so it reads as a preference,
   not a primary action. */
.bt-autopay{
  display:flex;align-items:flex-start;gap:11px;
  margin:14px 0 0;padding:11px 13px;
  border:1px solid var(--rule,#E7E3DB);border-radius:10px;
  background:var(--surface-2,#F5F0E6);cursor:pointer;
  transition:border-color .12s ease,background .12s ease;
}
.bt-autopay:hover{border-color:var(--accent,#B08D57)}
.bt-autopay input[type="checkbox"]{margin-top:2px;flex-shrink:0;width:16px;height:16px;cursor:pointer;accent-color:var(--accent,#B08D57)}
.bt-autopay-label{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.bt-autopay-title{font-weight:700;font-size:13px;color:var(--ink,#1C1B19)}
.bt-autopay-sub{font-size:11.5px;color:var(--ink-mid,#3a3833)}

.bt-ph{position:relative;margin:4px 0 4px 8px;padding-left:22px;border-left:2px solid var(--rule,#E7E3DB)}
.bt-ph-item{position:relative;padding:7px 0}
.bt-ph-item::before{content:"";position:absolute;left:-28px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--success,#3F8F5B);border:2px solid var(--bg,#FAFAF8)}
.bt-ph-item.miss::before{background:var(--error,#C0492F)}
.bt-ph-item.late::before{background:#7A5C2E}
.bt-ph-when{font-weight:700;font-size:13px}
.bt-ph-detail{font-size:12.5px;color:var(--ink-light,#6B6862)}
@media(max-width:760px){.bt-kpis{grid-template-columns:repeat(2,1fr)}.bt-detail-kpis{grid-template-columns:1fr}}

/* ── Finance: unified "Add account" menu (Accounts tab header) ── */
.fa-add-wrap { position: relative; display: inline-block; }
.fa-add-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 236px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.16); padding: 6px; z-index: 200; display: none; }
.fa-add-menu.open { display: block; }
.fa-add-menu button { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: none; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--text); }
.fa-add-menu button:hover { background: var(--bg); }
.fa-add-ic { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; }
.fa-add-txt { display: flex; flex-direction: column; line-height: 1.25; }
.fa-add-t { font-size: 13px; font-weight: 600; }
.fa-add-d { font-size: 11px; color: var(--text-muted); }

/* ── Finance: transaction category / budget assignment (tx detail panel) ── */
.tx-cat-lbl { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.tx-cat-select { width: 100%; padding: 7px 9px; font-size: 13px; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg); color: var(--text); cursor: pointer; }
.tx-cat-select:focus { outline: none; border-color: var(--accent); }
.tx-cat-hint { font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.tx-detail-notes { font-size: 12px; color: var(--text-muted); padding-top: 4px; }

/* ── Finance Accounts — list widget toolbar moved into the card (v629) ── */
/* Search + By-role/Custom + density now live in the widget's own header. */
.fa-rail-card{border:1px solid var(--rule,#E7E3DB);border-radius:12px;background:var(--surface,#fff);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(28,27,25,.04)}
.fa-rail-head{display:flex;flex-direction:column;gap:9px;padding:11px;border-bottom:1px solid var(--rule,#E7E3DB);background:var(--bg,#FAFAF8)}
.fa-rail-search{display:flex;align-items:center;gap:8px;padding:8px 11px;background:var(--surface,#fff);border:1px solid var(--rule,#E7E3DB);border-radius:9px;color:var(--ink-light,#9C988F)}
.fa-rail-search:focus-within{border-color:var(--accent,#B08D57)}
.fa-rail-search .fa-search{flex:1;min-width:0;width:auto;border:0;background:transparent;padding:0;font-size:13px;color:var(--ink,#1C1B19);outline:none}
.fa-rail-search .fa-search::placeholder{color:var(--ink-light,#9C988F)}
.fa-rail-controls{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* the scroll list inside the card no longer needs its own border/background */
.fa-rail-card .fa-rail{border:0;border-radius:0;background:transparent;max-height:62vh;padding:8px}
/* balances colour-coded: green for positive assets, red for debts */
.fa-bal-amt.pos{color:var(--success,#3F8F5B)}
.fa-bal-amt.neg{color:var(--error,#C0492F)}
.fa-acct-row.fa-selected .fa-bal-amt,.fa-acct-row.fa-selected .fa-bal-amt.pos{color:var(--text-on-navy)}
.fa-acct-row.fa-selected .fa-bal-amt.neg{color:#F0A99A}
@media(max-width:760px){.fa-rail-card .fa-rail{max-height:none}.fa-layout.fa-show-detail .fa-rail-card{display:none}}

/* ===== Budget Redesign (envelopes, groups, rollover, report) ===== */
:root{ --bgt-accent-soft:#E7D9BE; --bgt-navy-mid:#2a3f54; --bgt-surface-3:#ECEAE3; --bgt-info:#3A7CA5; }

/* ---- 1 · HEALTH BANNER (navy gradient) ---- */
.bgt-health{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--navy),var(--bgt-navy-mid));
  border-radius:var(--radius-lg);padding:22px 24px;color:#eef3f8;
}
.bgt-health::after{
  content:"";position:absolute;right:-40px;top:-60px;width:240px;height:240px;
  background:radial-gradient(circle,rgba(184,150,90,.28),transparent 65%);pointer-events:none;
}
.bgt-health-top{
  position:relative;z-index:1;display:flex;justify-content:space-between;
  align-items:flex-start;gap:16px;flex-wrap:wrap;
}
.bgt-health-label{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#aab9c8;
}
.bgt-health-big{
  font-size:38px;font-weight:800;letter-spacing:-0.03em;line-height:1;color:#eef3f8;margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.bgt-health-of{font-size:18px;font-weight:500;color:#8499aa;letter-spacing:-0.01em;}
.bgt-health-sub{font-size:13px;color:#aab9c8;margin-top:6px;}
.bgt-sts{text-align:right;}
.bgt-sts-n{
  font-size:30px;font-weight:800;letter-spacing:-0.02em;color:var(--bgt-accent-soft);
  font-variant-numeric:tabular-nums;margin-top:6px;
}
.bgt-sts-d{font-size:12px;color:#aab9c8;margin-top:2px;}
.bgt-health-bar{
  position:relative;z-index:1;display:flex;height:9px;margin-top:18px;
  border-radius:var(--radius-pill);background:rgba(255,255,255,.14);overflow:hidden;
}
.bgt-health-seg{height:100%;transition:width .5s cubic-bezier(.4,0,.2,1);}
.bgt-health-legend{
  position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:18px;margin-top:11px;
}
.bgt-health-legend span{
  font-size:11.5px;color:#c4d0db;display:inline-flex;align-items:center;gap:6px;
}
.bgt-lg-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0;}

/* ---- 2 · VIEW TOGGLE + TOOLBAR ---- */
.bgt-toolbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0;
}
.bgt-seg{
  display:inline-flex;gap:3px;background:var(--surface-2);border-radius:var(--radius-pill);padding:4px;
}
.bgt-seg-btn{
  border:none;background:transparent;font-family:var(--font);font-size:13px;font-weight:600;
  color:var(--text-2);padding:7px 16px;border-radius:var(--radius-pill);cursor:pointer;transition:.15s;
}
.bgt-seg-btn:hover{color:var(--text);}
.bgt-seg-btn.on{background:var(--navy);color:var(--text-on-navy);}
.bgt-month-nav{display:inline-flex;align-items:center;gap:8px;margin-left:auto;}
.bgt-month-label{
  font-size:14px;font-weight:700;letter-spacing:-0.01em;min-width:96px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.bgt-navbtn{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rule,var(--border));background:var(--surface);color:var(--text-2);
  border-radius:var(--radius-sm);cursor:pointer;font-size:15px;line-height:1;transition:.15s;
}
.bgt-navbtn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-strong);}

/* ---- 3 · GROUPS + CATEGORY CARDS ---- */
.bgt-group{margin-top:18px;}
.bgt-group-head{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;cursor:pointer;user-select:none;
}
.bgt-group-chev{font-size:11px;color:var(--text-3);transition:transform .2s;flex-shrink:0;}
.bgt-group-pill{
  font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:3px 10px;border-radius:var(--radius-pill);
}
.bgt-pill-fixed{background:#e8edf2;color:#46617c;}
.bgt-pill-flexible{background:var(--accent-bg);color:var(--accent-dark);}
.bgt-pill-savings{background:var(--success-bg);color:var(--success-dark);}
.bgt-group-total{
  margin-left:auto;font-size:13px;color:var(--text-2);font-variant-numeric:tabular-nums;
}
.bgt-group.collapsed .bgt-cat-list{display:none;}
/* Two-column envelope grid. The Phase-3 redesign rendered each envelope
   full-width which wasted half the viewport on desktop. Stacks back to
   one column under 900px so phone reads stay tappable. */
.bgt-cat-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-items:start}
.bgt-cat-list > .bgt-empty-row,
.bgt-cat-list > .bgt-group-hint{grid-column:1 / -1}
@media (max-width:900px){.bgt-cat-list{grid-template-columns:1fr}}
.bgt-group.collapsed .bgt-group-chev{transform:rotate(-90deg);}

.bgt-cat{
  background:var(--surface);border:1px solid var(--rule,var(--border));border-radius:var(--radius-md);
  padding:13px 15px;margin-bottom:9px;cursor:pointer;transition:.15s;
}
.bgt-cat:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.04));}
.bgt-cat-row{display:flex;align-items:center;gap:12px;}
.bgt-cat-ic{
  width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:17px;border-radius:9px;background:var(--surface-2);
}
.bgt-cat-main{flex:1;min-width:0;}
.bgt-cat-name{
  font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.bgt-chev{font-size:11px;color:var(--text-3);transition:transform .2s;flex-shrink:0;}
.bgt-cat-desc{
  font-size:12px;color:var(--text-3);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bgt-spark{display:block;flex-shrink:0;}
.bgt-cat-amt{text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums;}
.bgt-cat-sp{font-size:14.5px;font-weight:700;}
.bgt-cat-pl{font-size:12px;color:var(--text-3);}
.bgt-prog{
  height:7px;margin-top:10px;border-radius:var(--radius-pill);
  background:var(--bgt-surface-3);overflow:hidden;
}
.bgt-fill{height:100%;border-radius:var(--radius-pill);transition:width .5s cubic-bezier(.4,0,.2,1);}
.bgt-meta{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:7px;font-size:11px;color:var(--text-3);
}
.bgt-meta b{font-weight:700;}

/* rollover + bill status chips */
.bgt-roll{
  display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;
  color:var(--success-dark);background:var(--success-bg);padding:2px 8px;border-radius:var(--radius-pill);
}
.bgt-bill{
  display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;
  padding:2px 8px;border-radius:var(--radius-pill);
}
.bgt-bill-paid{background:var(--success-bg);color:var(--success-dark);}
.bgt-bill-due{background:var(--warning-bg);color:var(--warning-dark);}
.bgt-bill-overdue{background:var(--error-bg);color:var(--error-dark);}

/* drill / expand */
.bgt-drill{
  display:none;margin-top:12px;border-top:1px dashed var(--border-strong);padding-top:12px;
}
.bgt-cat.open .bgt-drill{display:block;}
.bgt-cat.open .bgt-chev{transform:rotate(90deg);}
.bgt-tx{
  display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;
  border-bottom:1px solid var(--rule,var(--border));
}
.bgt-tx:last-child{border-bottom:none;}
.bgt-tx-ic{
  width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;border-radius:7px;background:var(--surface-2);
}
.bgt-tx-nm{flex:1;min-width:0;}
.bgt-tx-dt{font-size:11px;color:var(--text-3);}
.bgt-tx-am{font-weight:600;font-variant-numeric:tabular-nums;}
.bgt-bills-list{
  margin:8px 0;padding:8px 10px;border-radius:8px;
  background:rgba(127,140,170,0.06);border:1px solid var(--rule,var(--border));
}
.bgt-bills-h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:var(--text-3);margin-bottom:6px;}
.bgt-billrow{
  display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;cursor:pointer;
  border-bottom:1px solid var(--rule,var(--border));
}
.bgt-billrow:last-child{border-bottom:none;}
.bgt-billrow:hover{background:rgba(127,140,170,0.04);}
.bgt-billrow-ic{width:24px;text-align:center;font-size:13px;flex-shrink:0;}
.bgt-billrow-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bgt-billrow-dt{font-size:11px;color:var(--text-3);flex-shrink:0;}
.bgt-billrow-am{font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0;}
.bgt-billchip{
  display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.4px;flex-shrink:0;
}
.bgt-billchip-paid{background:var(--success-bg,#E4ECDF);color:var(--success-dark,#3F8F5B);}
.bgt-billchip-due{background:var(--warning-bg,#F8F1D9);color:var(--warning-dark,#8A6F1F);}
.bgt-billchip-overdue{background:var(--error-bg,#F3E8E8);color:var(--error-dark,#9B5454);}
.bgt-cat-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.bgt-desc-edit{
  width:100%;margin-top:10px;font-family:var(--font);font-size:12px;padding:7px 10px;
  border:1px solid var(--rule,var(--border));background:var(--surface);color:var(--text);
  border-radius:var(--radius-sm);outline:none;transition:.15s;
}
.bgt-desc-edit:focus{border-color:var(--accent);}
.bgt-desc-edit::placeholder{color:var(--text-3);}

/* ---- 4 · ROLLOVER TOGGLE SWITCH ---- */
.bgt-toglabel{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2);cursor:pointer;
}
.bgt-tog{position:relative;width:38px;height:21px;flex-shrink:0;}
.bgt-tog input{position:absolute;opacity:0;width:0;height:0;margin:0;}
.bgt-tog-track{
  position:absolute;inset:0;background:var(--bgt-surface-3);border-radius:var(--radius-pill);
  cursor:pointer;transition:.2s;
}
.bgt-tog-track::before{
  content:"";position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;
  background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.2);transition:.2s;
}
.bgt-tog input:checked + .bgt-tog-track{background:var(--success);}
.bgt-tog input:checked + .bgt-tog-track::before{transform:translateX(17px);}

/* ---- 5 · REPORT VIEW (charts) ---- */
.bgt-report{margin-top:18px;}
.bgt-chart-card{
  background:var(--surface);border:1px solid var(--rule,var(--border));border-radius:var(--radius-lg);
  padding:20px 22px;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.04));margin-bottom:20px;
}
.bgt-chart-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px;
}
.bgt-chart-head b{font-size:16px;font-weight:700;letter-spacing:-0.01em;}
.bgt-chart-sub{font-size:13px;color:var(--text-3);}
.bgt-chart{position:relative;margin-top:12px;}
.bgt-chart svg rect,.bgt-chart svg path{cursor:pointer;}
.bgt-report-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.bgt-report-grid .bgt-chart-card{margin-bottom:0;}
.bgt-movers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px;}
.bgt-mover{
  background:var(--surface);border:1px solid var(--rule,var(--border));border-radius:var(--radius-md);
  padding:16px 18px;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.04));
}
.bgt-mover h4{font-size:16px;font-weight:600;margin:10px 0 4px;letter-spacing:-0.01em;}
.bgt-mover p{font-size:13px;color:var(--text-2);}
.bgt-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;}
.bgt-legend span{font-size:12px;color:var(--text-2);display:inline-flex;align-items:center;gap:7px;}
.bgt-sw{width:11px;height:11px;border-radius:3px;flex-shrink:0;}
.bgt-donut-legend{display:flex;flex-direction:column;gap:9px;flex:1;min-width:160px;}
.bgt-donut-legend > div{
  display:flex;align-items:center;gap:9px;font-size:13px;font-variant-numeric:tabular-nums;
}
.bgt-donut-legend .bgt-sw{margin-right:0;}
.bgt-donut-legend b{margin-left:auto;font-weight:700;}
.bgt-chart-tip{
  position:fixed;pointer-events:none;z-index:200;opacity:0;transition:opacity .12s;
  background:var(--navy);color:#eef3f8;font-size:12px;padding:8px 11px;border-radius:8px;
  box-shadow:var(--shadow-md,0 4px 16px rgba(0,0,0,.06));white-space:nowrap;
}
.bgt-chart-tip b{color:var(--text-inverse);font-weight:700;}

/* ---- 6 · AUTO-SUGGEST CARD ---- */
.bgt-suggest{
  background:var(--accent-bg);border:1px solid var(--bgt-accent-soft);border-radius:var(--radius-md);
  padding:16px 18px;
}
.bgt-suggest-head{font-size:14px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.bgt-suggest-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:13px;padding:6px 0;font-variant-numeric:tabular-nums;
}
.bgt-suggest-row + .bgt-suggest-row{border-top:1px solid var(--bgt-accent-soft);}
.bgt-suggest-row b{font-weight:700;}
.bgt-suggest-avg{color:var(--text-3);font-size:12px;}

/* ---- 7 · "DID WE GET THIS RIGHT?" REVIEW CARD ---- */
.bgt-review{
  background:var(--surface);border:1px solid var(--rule,var(--border));border-radius:var(--radius-md);
  padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.04));
}
.bgt-review-tx{display:flex;align-items:center;gap:10px;min-width:0;}
.bgt-review-ic{
  width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:16px;border-radius:8px;background:var(--surface-2);
}
.bgt-review-info{min-width:0;}
.bgt-review-name{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;}
.bgt-review-sub{font-size:11.5px;color:var(--text-3);margin-top:1px;}
.bgt-review-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* ---- 8 · MONTHLY REVIEW BANNER ---- */
.bgt-monthly{
  background:var(--accent-bg);border:1px solid var(--bgt-accent-soft);border-left:3px solid var(--accent);
  border-radius:0 var(--radius-md) var(--radius-md) 0;padding:16px 18px;margin-bottom:18px;
}
.bgt-monthly-head{font-size:14px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.bgt-monthly-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:13px;padding:7px 0;
}
.bgt-monthly-row + .bgt-monthly-row{border-top:1px solid var(--bgt-accent-soft);}
.bgt-monthly-row .bgt-apply{
  font-family:var(--font);font-size:11.5px;font-weight:600;color:var(--text-inverse);background:var(--accent);
  border:none;border-radius:var(--radius-sm);padding:4px 11px;cursor:pointer;transition:.15s;flex-shrink:0;
}
.bgt-monthly-row .bgt-apply:hover{background:var(--accent-dark);}

/* ---- 9 · TODAY-PAGE WIDGET ---- */
.bgt-widget{display:flex;flex-direction:column;gap:8px;}
.bgt-widget-main{
  font-size:20px;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;line-height:1.1;
}
.bgt-widget-main span{font-size:14px;font-weight:500;color:var(--text-3);}
.bgt-widget-bar{
  height:6px;border-radius:var(--radius-pill);background:var(--bgt-surface-3);overflow:hidden;
}
.bgt-widget-fill{
  height:100%;border-radius:var(--radius-pill);background:var(--accent);
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.bgt-widget-sub{font-size:12px;color:var(--text-2);}
.bgt-widget-groups{display:flex;gap:10px;margin-top:2px;}
.bgt-widget-groups > div{flex:1;display:flex;flex-direction:column;gap:4px;}
.bgt-widget-mini{height:5px;border-radius:var(--radius-pill);background:var(--bgt-surface-3);overflow:hidden;}
.bgt-widget-mini-fill{height:100%;border-radius:var(--radius-pill);}
.bgt-widget-mini-label{font-size:10px;color:var(--text-3);display:flex;justify-content:space-between;gap:6px;}

/* ---- 10 · EDIT-BUDGET MODAL ROWS ---- */
.bgt-erow{
  border:1px solid var(--rule,var(--border));border-radius:var(--radius-md);padding:13px 14px;
  margin-bottom:10px;background:var(--surface);
}
.bgt-erow-top{display:flex;align-items:center;gap:10px;}
.bgt-erow-top .bgt-erow-cat{
  flex:1;min-width:0;font-family:var(--font);font-size:13.5px;font-weight:600;padding:8px 10px;
  border:1px solid var(--rule,var(--border));background:var(--surface);color:var(--text);
  border-radius:var(--radius-sm);outline:none;transition:.15s;
}
.bgt-erow-top .bgt-erow-amt{
  width:110px;flex-shrink:0;font-family:var(--font);font-size:13.5px;font-weight:600;text-align:right;
  padding:8px 10px;border:1px solid var(--rule,var(--border));background:var(--surface);color:var(--text);
  border-radius:var(--radius-sm);outline:none;font-variant-numeric:tabular-nums;transition:.15s;
}
.bgt-erow-cat:focus,.bgt-erow-amt:focus{border-color:var(--accent);}
.bgt-erow-del{
  width:30px;height:30px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rule,var(--border));background:var(--surface);color:var(--text-3);
  border-radius:var(--radius-sm);cursor:pointer;font-size:14px;line-height:1;transition:.15s;
}
.bgt-erow-del:hover{background:var(--error-bg);color:var(--error-dark);border-color:var(--error);}
.bgt-erow-desc{
  width:100%;margin-top:10px;font-family:var(--font);font-size:12.5px;padding:8px 10px;
  border:1px solid var(--rule,var(--border));background:var(--surface);color:var(--text);
  border-radius:var(--radius-sm);outline:none;transition:.15s;
}
.bgt-erow-desc:focus{border-color:var(--accent);}
.bgt-erow-desc::placeholder{color:var(--text-3);}
.bgt-erow-opts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;}
.bgt-erow-group{
  font-family:var(--font);font-size:12.5px;font-weight:500;padding:7px 10px;color:var(--text);
  border:1px solid var(--rule,var(--border));background:var(--surface);border-radius:var(--radius-sm);
  cursor:pointer;outline:none;transition:.15s;
}
.bgt-erow-group:focus{border-color:var(--accent);}

/* ---- responsive ---- */
@media(max-width:768px){
  .bgt-health-top{flex-direction:column;}
  .bgt-sts{text-align:left;}
  .bgt-health-big{font-size:32px;}
  .bgt-sts-n{font-size:26px;}
  .bgt-report-grid{grid-template-columns:1fr;}
  .bgt-movers{grid-template-columns:1fr;}
  .bgt-month-nav{margin-left:0;}
  .bgt-cat-amt{min-width:64px;}
}

/* ===== Budget Redesign — supplemental (classes used by budget.js) ===== */
.bgt-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.bgt-actions .btn{font-size:13px}
.bgt-modal-lede{font-size:13px;color:var(--text-2,#6B7280);margin:0 0 14px}
.bgt-empty-row{font-size:12.5px;color:var(--text-3,#A1A7B0);padding:10px 4px}
.bgt-group-hint{font-size:12px;color:var(--text-2,#6B7280);padding:8px 6px 2px}
.bgt-group-hint a{color:var(--accent-dark,#8B7340);font-weight:600;cursor:pointer;text-decoration:none}
.bgt-group-hint a:hover{text-decoration:underline}
.bgt-goal-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--bgt-info,#3A7CA5);background:rgba(58,124,165,.12);padding:2px 8px;border-radius:999px;cursor:pointer;white-space:nowrap}
.bgt-goal-chip:hover{background:rgba(58,124,165,.2)}
.bgt-cat-roll{color:var(--success-dark,#1B8B3A);font-weight:600}
.bgt-cat-desc-empty{font-style:italic;color:var(--text-3,#A1A7B0);opacity:.7}
/* drill-down extras */
.bgt-tx-empty{font-size:12px;color:var(--text-3,#A1A7B0);padding:8px 2px;text-align:center}
.bgt-drill-note{font-size:11.5px;color:var(--text-2,#6B7280);background:var(--surface-2,#F3F2EE);border-radius:8px;padding:7px 10px;margin-top:10px}
.bgt-desc-row{display:flex;gap:8px;align-items:center;margin-top:12px}
.bgt-desc-row .bgt-desc-edit{flex:1}
.bgt-del:hover{color:var(--error,#FF3B30);border-color:var(--error,#FF3B30)}
/* suggest modal */
.bgt-suggest-list{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto;margin-bottom:6px}
.bgt-suggest-chk{display:flex;align-items:center;gap:8px;flex:1;font-size:13.5px;cursor:pointer}
.bgt-suggest-chk input{width:16px;height:16px;accent-color:var(--accent,#B8965A)}
.bgt-suggest-amt{max-width:92px;font-size:13px}
/* review (did we get this right) */
.bgt-review-head{font-weight:700;font-size:13.5px;margin-bottom:10px}
.bgt-review-sel{max-width:170px;font-size:12.5px}
/* monthly review banner */
.bgt-monthly-sub{font-size:12.5px;color:var(--text-2,#6B7280);margin:2px 0 10px}
.bgt-monthly-delta{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.bgt-monthly-delta.over{color:var(--error-dark,#CC2F26)}
.bgt-monthly-delta.under{color:var(--success-dark,#1B8B3A)}
.bgt-monthly-x{margin-left:auto;border:none;background:transparent;color:var(--text-3,#A1A7B0);font-size:14px;cursor:pointer;line-height:1;padding:0 2px}
.bgt-monthly-x:hover{color:var(--text,#1A1D21)}
/* report: by-category bars */
.bgt-catbar{margin-bottom:11px}
.bgt-catbar:hover{cursor:default}
.bgt-catbar-top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:4px;gap:8px}
.bgt-catbar-top .bgt-over{color:var(--error-dark,#CC2F26);font-weight:600}
.bgt-catbar-track{position:relative;height:9px;border-radius:999px;background:var(--bgt-surface-3,#ECEAE3);overflow:hidden}
.bgt-catbar-plan{position:absolute;inset:0;background:var(--bgt-accent-soft,#E7D9BE);border-radius:999px}
.bgt-catbar-act{position:absolute;top:0;left:0;height:100%;background:var(--accent,#B8965A);border-radius:999px}
.bgt-over{color:var(--error-dark,#CC2F26)}
/* report: donut layout + legend rows */
.bgt-donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:12px}
.bgt-donut-leg-row{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:6px}
.bgt-donut-leg-row span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bgt-donut-legend{flex:1;min-width:150px}
/* report: movers */
.bgt-mover-cat{font-size:13px;font-weight:600}
.bgt-mover-delta{font-size:18px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.bgt-mover-delta.over{color:var(--error-dark,#CC2F26)}
.bgt-mover-delta.under{color:var(--success-dark,#1B8B3A)}
.bgt-mover-sub{font-size:11.5px;color:var(--text-3,#A1A7B0);margin-top:1px}
/* empty state */
.bgt-emptystate{text-align:center;padding:38px 20px}
.bgt-emptystate-icon{font-size:40px;margin-bottom:8px}
.bgt-emptystate h3{font-size:19px;margin-bottom:6px}
.bgt-emptystate p{font-size:14px;color:var(--text-2,#6B7280);max-width:440px;margin:0 auto 16px}

/* ===== Emoji / icon picker ===== */
.icn-field{display:flex}
.icn-trigger{display:flex;align-items:center;gap:8px;background:var(--surface,#fff);border:1px solid var(--rule,var(--border,rgba(0,0,0,.12)));border-radius:8px;padding:7px 12px;cursor:pointer;line-height:1;min-width:96px;font-family:var(--font);transition:.15s}
.icn-trigger:hover{border-color:var(--accent,#B8965A);box-shadow:0 0 0 3px var(--accent-bg,rgba(184,150,90,.12))}
.icn-current{font-size:22px}
.icn-caret{margin-left:auto;font-size:11px;color:var(--text-3,#A1A7B0)}
.icn-pop{position:fixed;z-index:10002;background:var(--surface,#fff);border:1px solid var(--rule,var(--border,rgba(0,0,0,.12)));border-radius:14px;box-shadow:0 22px 60px -14px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column;animation:icnpop .12s ease}
@keyframes icnpop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.icn-pop-head{display:flex;gap:8px;padding:10px;border-bottom:1px solid var(--rule,var(--border,rgba(0,0,0,.08)));background:var(--bg,#FAFAF8)}
.icn-search{flex:1;border:1px solid var(--rule,var(--border,rgba(0,0,0,.12)));border-radius:8px;padding:8px 11px;font-size:13px;font-family:var(--font);background:var(--surface,#fff);color:var(--text,#1A1D21)}
.icn-search:focus{outline:none;border-color:var(--accent,#B8965A);box-shadow:0 0 0 3px var(--accent-bg,rgba(184,150,90,.12))}
.icn-custom{width:56px;border:1px solid var(--rule,var(--border,rgba(0,0,0,.12)));border-radius:8px;padding:7px;font-size:18px;text-align:center;background:var(--surface,#fff)}
.icn-custom:focus{outline:none;border-color:var(--accent,#B8965A)}
.icn-grid-wrap{overflow-y:auto;padding:6px 10px 12px;-webkit-overflow-scrolling:touch}
.icn-cat-label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3,#A1A7B0);margin:11px 2px 5px}
.icn-cat:first-child .icn-cat-label{margin-top:3px}
.icn-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.icn-btn{border:none;background:transparent;font-size:20px;line-height:1;padding:6px 0;border-radius:8px;cursor:pointer;transition:transform .1s,background .12s}
.icn-btn:hover{background:var(--accent-bg,rgba(184,150,90,.14));transform:scale(1.18)}
.icn-empty{font-size:12.5px;color:var(--text-3,#A1A7B0);text-align:center;padding:18px 8px}

/* ═══════════════════════════════════════════════════════════════
   WORKSTREAM A — Today Briefing (prototype match)
   Row-based timeline · inline dossier · narration band ·
   compact hero · rail2 action grid · movability pins.
   Class vocabulary mirrors Life-Command-Prototype.html.
   ═══════════════════════════════════════════════════════════════ */

/* Local-scope CSS variables that mirror the prototype's tokens but fall
   back to the live sovereign.css palette. Scoped to .tw-today so we don't
   bleed into other pages. */
.tw-today{
  /* Fill the available vertical space so the page doesn't leave a strip
     of empty viewport background below the last widget on tall monitors. */
  min-height:100%;padding-bottom:56px;
  --ivory:#FAF7F1;--ivory-2:#F2ECE0;--ivory-3:#EAE2D2;
  --card:#FFFFFF;--card-2:#FCFAF6;
  --ink-2:#55606E;--ink-3:#8A929C;
  --line:rgba(27,37,48,.10);--line-2:rgba(27,37,48,.17);
  --brass:#B8965A;--brass-deep:#8B7340;--brass-soft:rgba(184,150,90,.14);--brass-line:rgba(184,150,90,.40);
  --navy:#1e2d3d;--navy-2:#2a3f54;--navy-deep:#141f2a;--navy-soft:rgba(30,45,61,.06);
  --success-tw:#34A853;--success-soft:rgba(52,168,83,.13);--warn-tw:#E08A2B;--warn-soft:rgba(224,138,43,.14);
  --error-tw:#D24B43;--error-soft:rgba(210,75,67,.12);--violet:#7A6CB0;--violet-soft:rgba(122,108,176,.13);
  --inbox:#4F7E86;--inbox-soft:rgba(79,126,134,.13);--inbox-deep:#3C636A;
  --r:16px;--r-sm:10px;
  --tw-shadow:0 1px 2px rgba(27,37,48,.04),0 8px 24px -12px rgba(27,37,48,.14);
}

/* ── Compact hero (greet + date + day cursor) ──────────────── */
.tw-hero{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.tw-hgreet{font-family:'Fraunces',Georgia,serif;font-size:25px;font-weight:400;letter-spacing:-.01em;color:var(--ink,#1B2530)}
.tw-hdate{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.tw-hdate .pollen{color:var(--success-tw)}
.tw-hdate .precip{color:#3E78A8}
.tw-hero-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tw-datenav{display:flex;align-items:center;gap:3px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:4px}
.tw-datenav-arr,.tw-datenav-pill{border:none;background:transparent;font-family:var(--sans,inherit);font-size:12.5px;color:var(--ink-2);padding:6px 12px;border-radius:99px;cursor:pointer;font-weight:500;transition:.15s;line-height:1}
.tw-datenav-arr{padding:6px 9px;font-size:14px}
.tw-datenav-arr:hover,.tw-datenav-pill:hover{background:var(--ivory-2)}
.tw-datenav-pill.on{background:var(--navy);color:#F4EFE6}

/* ── Narration band (single-line sparkle + body) ──────────── */
.tw-narrate{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:var(--r-sm);background:linear-gradient(120deg,var(--brass-soft),transparent);border:1px solid var(--brass-line);font-size:13.5px;line-height:1.5;color:var(--ink,#1B2530);margin:0 0 16px}
.tw-narrate .s{font-size:15px;color:var(--brass-deep);flex-shrink:0;line-height:1.5}
.tw-narrate-tx{flex:1}
.tw-narrate-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);background:rgba(0,0,0,.05);padding:2px 7px;border-radius:8px;align-self:center;flex-shrink:0}
.tw-narrate-tag.tw-narrate-aria{color:var(--brass-deep,#7a5a32);background:rgba(184,150,90,.18);letter-spacing:.04em}
.tw-narrate-loading{color:var(--ink-3);font-style:italic}
.tw-narrate-skel{background:linear-gradient(120deg,rgba(184,150,90,.05),transparent);border-color:rgba(184,150,90,.15)}

/* ── Briefing grid (timeline + inline dossier) ────────────── */
.tw-bgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}
.tw-lbl-mini{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:2px 0 8px 2px}

/* ── Timeline card ───────────────────────────────────────── */
.tw-tlcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tw-tlhead{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;border-bottom:1px solid var(--line)}
.tw-tlhead .t{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--ink,#1B2530)}
.tw-tltoggle{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-3)}
.tw-sw2{width:36px;height:20px;border-radius:99px;background:var(--ivory-3);border:none;position:relative;cursor:pointer;transition:.2s}
.tw-sw2.on{background:var(--brass)}
.tw-sw2:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.tw-sw2.on:after{left:18px}

/* ── Timeline rows ───────────────────────────────────────── */
.tw-today .timeline{position:relative}
.tw-today .tlrow{display:grid;grid-template-columns:74px 1fr;min-height:44px;border-top:1px solid var(--line);position:relative}
.tw-today .tlrow:first-child{border-top:none}
.tw-today .tlrow::after{content:"";position:absolute;top:50%;left:74px;right:0;border-top:1px dashed rgba(27,37,48,.07);z-index:0;pointer-events:none}
.tw-today .tlh{padding:6px 8px 6px 13px;text-align:right;border-right:1px solid var(--line)}
.tw-today .tlh .hh{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;font-weight:500}
.tw-today .tlwx{display:none;align-items:center;justify-content:flex-end;gap:3px;margin-top:2px;font-size:10px;color:var(--inbox-deep);font-weight:600}
.tw-today .timeline.wx .tlwx{display:flex}
.tw-today .timeline.wx .tlh{background:linear-gradient(90deg,transparent,var(--inbox-soft))}
.tw-today .tlwx .pp{color:#3E78A8;font-weight:600;margin-left:3px}
.tw-today .tlslot{padding:5px 11px 5px 13px;display:flex;flex-direction:column;gap:6px}
.tw-today .timeline .ev{z-index:1;position:relative;border-radius:9px;padding:8px 11px;font-size:12.5px;cursor:pointer;transition:.16s;border-left:3px solid var(--brass);background:var(--card-2);box-shadow:0 1px 2px rgba(0,0,0,.03)}
.tw-today .timeline .ev:hover{transform:translateY(-1px);box-shadow:var(--tw-shadow)}
.tw-today .timeline .ev.sel{outline:2px solid var(--brass);outline-offset:2px}
.tw-today .timeline .ev.work{border-left-color:var(--navy);background:var(--navy-soft)}
.tw-today .timeline .ev.social{border-left-color:#C0563B;background:rgba(192,86,59,.07)}
.tw-today .timeline .ev.focus{border-left-color:var(--violet);background:var(--violet-soft)}
.tw-today .timeline .ev.health{border-left-color:var(--success-tw);background:var(--success-soft)}
.tw-today .timeline .ev.focus-auto{background:repeating-linear-gradient(45deg,var(--violet-soft),var(--violet-soft) 6px,rgba(122,108,176,.20) 6px,rgba(122,108,176,.20) 12px)}
.tw-today .ev .et{font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* Only stretch the TITLE span, not every <span> in .et — the chip and
   flexmark spans live alongside the title and used to inherit `flex: 1`
   from the broader rule (higher specificity than the chip rule), which
   made the "WORK" / "SOCIAL" category pill stretch across the whole row.
   :not() narrows the selector to text spans only. */
.tw-today .ev .et>span:not(.chip):not(.flexmark){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw-today .ev .em{font-size:11px;color:var(--ink-3);margin-top:2px}
.tw-today .ev .et>.chip{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:99px;background:rgba(0,0,0,.04);border:none;color:var(--ink-3);flex:0 0 auto;align-self:center}
.tw-today .ev.work .chip{background:rgba(30,45,61,.10);color:var(--navy,#1e2d3d)}
.tw-today .ev.social .chip{background:rgba(192,86,59,.10);color:#8E3B22}
.tw-today .ev.focus .chip{background:rgba(122,108,176,.14);color:#5A4F8C}
.tw-today .ev.health .chip{background:rgba(52,168,83,.14);color:#1f7a44}
.tw-today .ev .cue{position:absolute;right:9px;top:8px;font-size:9.5px;color:var(--brass-deep);opacity:.85;font-weight:600;letter-spacing:.02em}

/* Per-event weather chips (per-hour precip/UV/pollen flags inside an event) */
.tw-today .ev-wxchips{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.tw-today .evchip{font-size:10px;padding:2px 6px;border-radius:99px;font-weight:600;letter-spacing:.02em;background:rgba(0,0,0,.05);color:var(--ink-2)}
.tw-today .evchip-rain{background:rgba(62,120,168,.14);color:#2e5a85}
.tw-today .evchip-uv{background:rgba(224,138,43,.16);color:#8a5410}
.tw-today .evchip-pollen{background:rgba(52,168,83,.14);color:#1f7a44}

/* Movability pin (flexmark) — inline in event title */
.tw-today .flexmark{cursor:pointer;font-size:13px;line-height:1;padding:0 2px;border-radius:3px;user-select:none;flex:0 0 auto}
.tw-today .flexmark:hover{background:rgba(0,0,0,.06)}
.tw-today .flexmark.fixed{color:#d68f3e}
.tw-today .flexmark.movable{color:#2980b9}
.tw-today .flexmark.tw-flex-faded{opacity:.45}
.tw-today .flexmark.tw-flex-faded:hover{opacity:1}

/* NOW line */
.tw-today .nowl{display:grid;grid-template-columns:74px 1fr;align-items:center;margin:2px 0}
.tw-today .nowl .lab{text-align:right;padding-right:9px;font-size:9.5px;font-weight:700;color:var(--error-tw);letter-spacing:.05em}
.tw-today .nowl .ln{height:2px;background:linear-gradient(90deg,var(--error-tw),transparent)}

/* All-day strip */
.tw-allday{display:flex;gap:8px;padding:8px 13px;border-bottom:1px solid var(--line);background:var(--ivory)}
.tw-allday-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);min-width:54px;padding-top:3px;font-weight:600}
.tw-allday-events{display:flex;flex-wrap:wrap;gap:4px;flex:1}
.tw-allday-chip{display:inline-block;padding:3px 8px;border-radius:11px;font-size:11.5px;background:var(--brass-soft);color:var(--brass-deep);cursor:pointer;border:1px solid var(--brass-line)}
.tw-allday-chip.work{background:var(--navy-soft);color:var(--navy);border-color:rgba(30,45,61,.18)}
.tw-allday-chip.social{background:rgba(192,86,59,.07);color:#C0563B;border-color:rgba(192,86,59,.25)}
.tw-allday-chip.focus{background:var(--violet-soft);color:var(--violet);border-color:rgba(122,108,176,.3)}

/* Travel buffer row */
.tw-today .travel{font-size:10.5px;color:var(--inbox-deep);padding:3px 0 3px 13px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tw-today .travel:before{content:"";width:13px;border-top:1px dashed var(--inbox)}
/* Visual chip pieces inside the Today timeline travel row.
   Mirrors the calendar day-view rich chip (icon + leave-by + duration +
   parking + destination) so the user sees the same affordances on both
   surfaces. The whole row stays one line on a wide layout, wraps on narrow. */
.tw-today .travel .travel-icon-mini{font-size:11.5px;opacity:.85;flex-shrink:0}
.tw-today .travel .travel-leave-mini{font-size:10.5px;font-weight:600;color:var(--accent,#B8965A);white-space:nowrap}
.tw-today .travel .travel-dur-mini{font-size:9.5px;font-weight:600;background:rgba(184,150,90,0.12);color:var(--accent-dark,#7d6228);padding:1px 6px;border-radius:99px;white-space:nowrap}
.tw-today .travel .travel-dest-mini{font-size:10.5px;color:var(--inbox-deep);opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.tw-today .travel .travel-parking-mini{font-size:10px;background:rgba(39,174,96,0.10);color:var(--success,#27ae60);padding:1px 6px;border-radius:99px;white-space:nowrap;font-weight:500}

/* Empty state */
.tw-tl-empty{text-align:center;padding:32px 16px;color:var(--ink-3);font-size:13px}
.tw-tl-empty b{color:var(--ink-2);font-weight:500;display:block;margin-bottom:2px}

/* ── Inline dossier (right column) ──────────────────────── */
.tw-today .doss{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;min-height:200px}
.tw-today .doss-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 20px;color:var(--ink-3);height:100%;min-height:200px;line-height:1.5}
.tw-today .doss-h{padding:15px 17px;background:linear-gradient(160deg,var(--navy),var(--navy-deep));color:#F4EFE6}
.tw-today .doss-h .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:15px;color:var(--text-inverse);float:left;margin-right:11px;flex-shrink:0}
.tw-today .doss-h .nm{font-weight:600;font-size:15px;color:#F4EFE6}
.tw-today .doss-h .rl{font-size:11.5px;color:rgba(244,239,230,.7);margin-top:1px}
.tw-today .doss-h .mt{clear:both;margin-top:9px;font-size:11.5px;color:rgba(244,239,230,.8);display:flex;gap:12px;flex-wrap:wrap}
.tw-today .doss-b{padding:14px 17px}
.tw-today .doss-s{margin-bottom:13px}.tw-today .doss-s:last-child{margin-bottom:0}
.tw-today .doss-l{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.tw-today .doss-nudge{display:flex;gap:8px;padding:9px 11px;border-radius:var(--r-sm);background:var(--violet-soft);border:1px solid rgba(122,108,176,.3);font-size:12.5px;line-height:1.45;color:var(--ink,#1B2530)}
.tw-today .doss-seed{display:flex;gap:8px;font-size:12.5px;padding:3px 0;color:var(--ink-2);line-height:1.5}
.tw-today .doss-seed .d{color:var(--brass);font-weight:700}
.tw-today .doss-pills{display:flex;flex-wrap:wrap;gap:5px}
.tw-today .doss-pill{font-size:11px;padding:4px 9px;border-radius:99px;background:var(--ivory-2);border:1px solid var(--line);color:var(--ink-2)}
.tw-today .doss-pill.warn{background:var(--error-soft);border-color:rgba(210,75,67,.3);color:var(--error-tw)}
.tw-today .doss-act{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.tw-today .dbtn{font-size:11.5px;font-weight:500;padding:6px 12px;border-radius:99px;border:1px solid var(--line-2);background:var(--card);color:var(--ink,#1B2530);cursor:pointer}
.tw-today .dbtn.solid{background:var(--navy);color:#F4EFE6;border-color:var(--navy)}
.tw-today .dbtn:hover{border-color:var(--brass-line)}

/* ── Rail2 (action rail below briefing grid) ────────────── */
.tw-rail2{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tw-rail2 .wide2{grid-column:span 2}
.tw-today .wgt.tw-wgt{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px}
.tw-today .wgt-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.tw-today .wgt-h .t{font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;color:var(--ink,#1B2530)}
.tw-today .wgt-h .m{font-size:10.5px;color:var(--ink-3)}
.tw-today .wgt-h .m.lnk{cursor:pointer;color:var(--brass-deep);font-weight:500}
.tw-today .wgt-h .m.lnk:hover{text-decoration:underline}

/* Prep-row + del-row styling (from prototype) */
.tw-today .prep-row{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-top:1px dashed var(--line)}
.tw-today .prep-row:first-child{border-top:none;padding-top:2px}
.tw-today .prep-row .pi{font-size:15px;width:20px;text-align:center;flex-shrink:0;padding-top:1px}
.tw-today .prep-row .px{flex:1;min-width:0}
.tw-today .prep-row .px b{font-size:13px;font-weight:500;display:block;color:var(--ink,#1B2530)}
.tw-today .prep-row .px span{font-size:11.5px;color:var(--ink-3);display:block;margin-top:1px}
.tw-today .prep-row .pa{font-size:11px;font-weight:600;border:1px solid var(--line-2);background:var(--card);border-radius:99px;padding:5px 11px;cursor:pointer;color:var(--ink-2);white-space:nowrap;flex-shrink:0}
.tw-today .prep-row .pa:hover{border-color:var(--brass-line)}
.tw-today .prep-empty{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12.5px;color:var(--ink-3)}

.tw-today .del-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px dashed var(--line);cursor:pointer}
.tw-today .del-row:first-child{border-top:none;padding-top:2px}
.tw-today .del-row .di2{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:15px;flex-shrink:0;background:var(--ivory-2)}
.tw-today .del-row .dx2{flex:1;min-width:0}
.tw-today .del-row .dx2 b{font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink,#1B2530);font-weight:500}
.tw-today .del-row .dx2 span{font-size:11px;color:var(--ink-3)}
.tw-today .delstatus{font-size:9.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:3px 8px;border-radius:99px;white-space:nowrap}
.tw-today .delstatus.today{background:var(--success-soft);color:var(--success-tw)}
.tw-today .delstatus.out{background:var(--inbox-soft);color:var(--inbox-deep)}
.tw-today .delstatus.ship{background:var(--warn-soft);color:var(--warn-tw)}
.tw-today .delstatus.transit{background:var(--inbox-soft);color:var(--inbox-deep)}
.tw-today .delstatus.delivered{background:var(--success-soft);color:var(--success-tw)}
.tw-today .delstatus.buffer{background:var(--warn-soft);color:var(--warn-tw)}

/* AI Pick widget body (overrides existing buildDueTodosWidget output) */
.tw-today .wgt.tw-wgt .today-empty{padding:18px 0;text-align:center;color:var(--ink-3);font-size:12px}
.tw-today .focus-ai-pick{border-radius:var(--r-sm);background:linear-gradient(135deg,var(--brass-soft),transparent);border:1px solid var(--brass-line);padding:11px 12px;cursor:pointer}
.tw-today .focus-ai-pick .ai-label,.tw-today .focus-ai-pick .ai-pick-label{font-size:9.5px;font-weight:700;letter-spacing:.1em;color:var(--brass-deep);text-transform:uppercase}
.tw-today .focus-ai-pick .ai-pick-text,.tw-today .focus-ai-pick .ai-pick-title{font-size:13px;font-weight:600;margin:4px 0 3px;color:var(--ink,#1B2530)}
.tw-today .focus-ai-pick .ai-pick-context{font-size:11px;color:var(--ink-3)}

/* Habits widget body inside .tw-wgt */
.tw-today .wgt.tw-wgt .habits-list .habit-row,
.tw-today .wgt.tw-wgt .focus-habits .habit-row{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:12.5px}

/* ── "More on Today" extra widget columns ───────────────── */
.tw-extra-columns{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-top:8px}

/* ── Movability pin on calendar day/week views (kept) ──── */
.cal-mv-pin{cursor:pointer;font-size:11px;margin-left:6px;padding:0 2px;border-radius:3px;user-select:none;opacity:.85}
.cal-mv-pin:hover{background:rgba(0,0,0,.06);opacity:1}
.cal-mv-pin-fixed{color:#d68f3e}
.cal-mv-pin-movable{color:#2980b9}
.cal-mv-pin-faded{opacity:.4}

/* ── Meeting dossier modal (legacy fallback — used on mobile bottom sheet)  */
.modal-doss{max-width:520px;width:92vw}
.doss-root{padding:0}
.doss-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px 12px;border-bottom:1px solid var(--border-light,rgba(0,0,0,.06))}
.doss-eyebrow{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:4px}
.doss-title{font-size:20px;font-weight:600;color:var(--text-1);line-height:1.2}
.doss-body{padding:14px 20px 18px;max-height:70vh;overflow-y:auto}
.doss-eventmeta{font-size:12.5px;color:var(--text-2);padding:8px 12px;border-radius:8px;background:rgba(0,0,0,.03);margin-bottom:12px}

/* ── Mobile ────────────────────────────────────────────── */
@media (max-width:900px){
  .tw-bgrid{grid-template-columns:1fr}
  .tw-extra-columns{grid-template-columns:1fr}
  .tw-rail2{grid-template-columns:1fr}
  .tw-rail2 .wide2{grid-column:auto}
}
@media (max-width:768px){
  .modal-doss{position:fixed;bottom:0;left:0;right:0;top:auto;max-width:100%;width:100%;border-radius:18px 18px 0 0;max-height:88vh;transform:none}
  .doss-body{max-height:calc(88vh - 80px)}
  .tw-datenav-arr{padding:8px 11px;font-size:16px;min-width:36px}
  .tw-datenav-pill{padding:9px 14px;font-size:13px}
}

/* ═══════════════════════════════════════════════════════════════
   WORKSTREAM B — My Desk lanes (Suggestions + Delegated)
   ═══════════════════════════════════════════════════════════════ */
.md-lane{display:flex;flex-direction:column;gap:10px}
.md-lane-foot{padding-top:10px;border-top:1px dashed var(--border-light,rgba(0,0,0,.08));margin-top:6px;text-align:center}

/* Suggestion card */
.md-sug-card{display:flex;gap:12px;padding:14px;border-radius:12px;background:linear-gradient(135deg,rgba(184,150,90,.06),rgba(184,150,90,.02));border:1px solid rgba(184,150,90,.22);align-items:flex-start}
.md-sug-card:hover{background:linear-gradient(135deg,rgba(184,150,90,.10),rgba(184,150,90,.04))}
.md-sug-icon{font-size:22px;line-height:1;flex-shrink:0;padding-top:1px}
.md-sug-main{flex:1;min-width:0}
.md-sug-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}
.md-sug-title{font-weight:600;font-size:14px;color:var(--text-1)}
.md-sug-time{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums;flex-shrink:0}
.md-sug-body{font-size:13px;color:var(--text-2);line-height:1.45;margin-bottom:8px}
.md-sug-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.md-sug-actions .mbtn{font-size:11.5px;font-weight:500;padding:5px 11px;border-radius:99px;cursor:pointer;border:none;line-height:1.2}
.md-sug-actions .mbtn.b{background:var(--accent,#B8965A);color:var(--text-inverse)}
.md-sug-actions .mbtn.b:hover{background:var(--accent-hover,#a08550)}
.md-sug-actions .mbtn.g{background:transparent;border:1px solid var(--border-light,rgba(0,0,0,.12));color:var(--text-2)}
.md-sug-actions .mbtn.g:hover{background:rgba(0,0,0,.03)}

/* Delegated card */
.md-del-card{display:block;padding:14px;border-radius:12px;background:var(--surface,#fff);border:1px solid var(--border-light,rgba(0,0,0,.08));cursor:pointer;transition:.15s}
.md-del-card:hover{border-color:var(--accent,#B8965A);box-shadow:0 1px 3px rgba(0,0,0,.05)}
.md-del-status{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:99px;display:inline-block;margin-bottom:8px;background:rgba(0,0,0,.06);color:var(--text-3)}
.md-del-status-awaiting{background:rgba(231,76,60,.12);color:#a83426}
.md-del-status-paused{background:rgba(230,167,23,.16);color:#8a5a05}
.md-del-title{font-weight:600;font-size:14px;color:var(--text-1);margin-bottom:4px;line-height:1.3}
.md-del-desc{font-size:12.5px;color:var(--text-2);line-height:1.45;margin-bottom:6px}
.md-del-meta{font-size:11px;color:var(--text-3)}

/* ═══════════════════════════════════════════════════════════════
   WORKSTREAM C — Rituals UI (Morning Launch · Evening Debrief · Sunday Reset)
   ═══════════════════════════════════════════════════════════════ */
.modal-ritual{max-width:560px;width:92vw}
.rit-root{padding:0}
.rit-head{display:flex;justify-content:space-between;align-items:flex-start;padding:20px 22px 12px;border-bottom:1px solid var(--border-light,rgba(0,0,0,.06))}
.rit-eyebrow{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:4px}
.rit-title{font-size:21px;font-weight:600;color:var(--text-1);line-height:1.2}
.rit-dots{display:flex;gap:5px;padding:14px 22px 0;justify-content:center}
.rit-dot{width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.1);transition:.2s}
.rit-dot.on{background:var(--brass,#B8965A);width:22px;border-radius:4px}
.rit-dot.done{background:var(--brass-soft,rgba(184,150,90,.45))}
.rit-body{padding:18px 22px;max-height:60vh;overflow-y:auto;min-height:200px}
.rit-foot{display:flex;justify-content:space-between;padding:14px 22px 18px;border-top:1px solid var(--border-light,rgba(0,0,0,.06));gap:10px}
.rit-block{display:flex;flex-direction:column;gap:12px}
.rit-help{font-size:13px;color:var(--text-2);line-height:1.5}
.rit-empty{text-align:center;padding:24px 8px;color:var(--text-3);font-size:13.5px;line-height:1.5}

.rit-narr{padding:14px 16px;border-radius:12px;background:linear-gradient(135deg,rgba(184,150,90,.08),rgba(184,150,90,.02));border:1px solid rgba(184,150,90,.22)}
.rit-src{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--brass-dark,#7a5a32);background:rgba(184,150,90,.16);padding:2px 7px;border-radius:8px;margin-bottom:6px;display:inline-block}
.rit-narr-body{font-size:14px;color:var(--text-1);line-height:1.5}

.rit-side{background:rgba(0,0,0,.03);border-radius:10px;padding:10px 14px}
.rit-side-h{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:6px}
.rit-side-row{font-size:13px;color:var(--text-2);padding:3px 0;line-height:1.4}

.rit-evs{display:flex;flex-direction:column;gap:8px}
.rit-ev{padding:11px 14px;border-radius:10px;background:var(--surface,#fff);border:1px solid var(--border-light,rgba(0,0,0,.08))}
.rit-ev-time{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums;margin-bottom:2px}
.rit-ev-title{font-weight:600;font-size:14px;color:var(--text-1)}
.rit-ev-loc{font-size:11.5px;color:var(--text-3);margin-top:2px}

.rit-radio,.rit-check{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:10px;background:var(--surface,#fff);border:1px solid var(--border-light,rgba(0,0,0,.08));cursor:pointer;font-size:13.5px;color:var(--text-1)}
.rit-radio:hover,.rit-check:hover{border-color:var(--brass,#B8965A)}
.rit-radio.on,.rit-check.on{background:var(--brass-glow,rgba(184,150,90,.10));border-color:var(--brass,#B8965A)}
.rit-radio input,.rit-check input{flex-shrink:0;accent-color:var(--brass,#B8965A);width:16px;height:16px}
.rit-radio-text{flex:1}
.rit-radio-tag{font-size:10px;padding:2px 7px;border-radius:8px;background:rgba(192,57,43,.12);color:#a83426;font-weight:600}

.rit-input{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--border-light,rgba(0,0,0,.12));font-family:inherit;font-size:14px;color:var(--text-1);background:var(--surface,#fff);box-sizing:border-box;resize:vertical}
.rit-input:focus{outline:none;border-color:var(--brass,#B8965A);box-shadow:0 0 0 3px rgba(184,150,90,.15)}

.rit-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rit-stat{text-align:center;padding:14px 8px;border-radius:10px;background:var(--surface,#fff);border:1px solid var(--border-light,rgba(0,0,0,.08))}
.rit-stat-v{font-family:'Fraunces',Georgia,serif;font-size:24px;font-weight:500;color:var(--text-1);line-height:1}
.rit-stat-l{font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}

.rit-moods{display:flex;gap:8px;justify-content:center}
.rit-mood{font-size:32px;width:54px;height:54px;border-radius:50%;border:2px solid transparent;background:var(--surface,#fff);cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center}
.rit-mood:hover{transform:scale(1.1)}
.rit-mood.on{border-color:var(--brass,#B8965A);background:var(--brass-glow,rgba(184,150,90,.10))}

.rit-wys-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--surface,#fff);border:1px solid var(--border-light,rgba(0,0,0,.08));margin-bottom:8px}
.rit-wys-av{width:34px;height:34px;border-radius:50%;background:var(--brass,#B8965A);color:var(--text-inverse);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex-shrink:0}
.rit-wys-main{flex:1;min-width:0}
.rit-wys-name{font-weight:600;font-size:13.5px;color:var(--text-1)}
.rit-wys-ev{font-size:11px;color:var(--text-3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rit-wys-dims{display:flex;gap:4px;flex-shrink:0}
.rit-wys-dim{font-size:11px;padding:4px 7px;border-radius:99px;border:1px solid var(--border-light,rgba(0,0,0,.12));background:transparent;cursor:pointer;color:var(--text-3);min-width:36px;text-align:center}
.rit-wys-dim:hover{border-color:var(--brass,#B8965A)}
.rit-wys-dim.high{background:rgba(46,204,113,.12);color:#1f7a44;border-color:rgba(46,204,113,.3)}
.rit-wys-dim.low{background:rgba(231,76,60,.10);color:#a83426;border-color:rgba(231,76,60,.3)}

.rit-row{display:flex;justify-content:space-between;padding:7px 11px;border-bottom:1px dashed var(--border-light,rgba(0,0,0,.06));font-size:13px;color:var(--text-2)}
.rit-row:last-child{border-bottom:none}

@media (max-width:600px){
  .modal-ritual{position:fixed;bottom:0;left:0;right:0;top:auto;max-width:100%;width:100%;border-radius:18px 18px 0 0;max-height:92vh;transform:none}
  .rit-body{max-height:calc(92vh - 180px)}
  .rit-stats{grid-template-columns:repeat(2,1fr)}
  .rit-wys-dims{flex-wrap:wrap;justify-content:flex-end}
}

/* ═══════════════════════════════════════════════════════════════
   WORKSTREAM D — Proactiveness dial (Settings → Aria)
   ═══════════════════════════════════════════════════════════════ */
.prx-card{padding:0;margin-bottom:18px}
.prx-card .settings-card-h{padding:18px 22px;border-bottom:1px solid var(--border-light,rgba(0,0,0,.06))}
.prx-card .settings-card-h h3{margin:0;font-size:16px;font-weight:600;color:var(--text-1)}
.prx-card .settings-card-h p{margin:4px 0 0;font-size:12.5px;color:var(--text-3);line-height:1.45}
.prx-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px 22px}
.prx-level{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;border:1px solid var(--border-light,rgba(0,0,0,.10));border-radius:10px;background:var(--surface,#fff);cursor:pointer;text-align:left;transition:.15s}
.prx-level:hover{border-color:var(--brass,#B8965A)}
.prx-level.on{border-color:var(--brass,#B8965A);background:linear-gradient(135deg,rgba(184,150,90,.10),rgba(184,150,90,.02));box-shadow:0 0 0 3px rgba(184,150,90,.10)}
.prx-level-ic{font-size:22px;line-height:1}
.prx-level-l{font-size:13.5px;font-weight:600;color:var(--text-1)}
.prx-level-s{font-size:11.5px;color:var(--text-3);line-height:1.4}
.prx-quiet{padding:14px 22px;border-top:1px solid var(--border-light,rgba(0,0,0,.06))}
.prx-quiet-h{font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:8px}
.prx-quiet-sub{font-weight:400;color:var(--text-3);font-size:11.5px;margin-left:6px}
.prx-quiet-row{display:flex;gap:14px;align-items:center}
.prx-quiet-row label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2)}
.prx-quiet-row input{padding:6px 10px;border:1px solid var(--border-light,rgba(0,0,0,.12));border-radius:8px;font-family:inherit;font-size:13.5px}
.prx-areas-h{padding:14px 22px 6px;font-size:12.5px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;border-top:1px solid var(--border-light,rgba(0,0,0,.06))}
.prx-areas{padding:0 22px 18px}
.prx-area{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px dashed var(--border-light,rgba(0,0,0,.06));gap:14px}
.prx-area:last-child{border-bottom:none}
.prx-area-text{flex:1;min-width:0}
.prx-area-l{font-size:13.5px;color:var(--text-1);font-weight:500;margin-bottom:2px}
.prx-area-s{font-size:11.5px;color:var(--text-3);line-height:1.4}
.prx-toggle{accent-color:var(--brass,#B8965A);width:18px;height:18px;cursor:pointer}
.prx-toggle:disabled{opacity:.4;cursor:not-allowed}
@media (max-width:600px){.prx-levels{grid-template-columns:1fr 1fr}}

/* ============================================================
   WHAT'S HAPPENING (My Desk sub-tab) — wh-*
   Mode 2 of the Ahead Engine: browsable explorer of the user's
   monthly world-research catalog.
   ============================================================ */
.wh-root{padding:8px 0 24px}
.wh-loading{display:flex;align-items:center;gap:10px;padding:32px;color:var(--text-3,#8B8888);justify-content:center}
.wh-spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--rule,#3a3030);border-top-color:var(--brass,#B8965A);border-radius:50%;animation:wh-spin .8s linear infinite;vertical-align:middle}
.wh-spinner-big{width:32px;height:32px;border-width:3px;margin:0 auto 16px;display:block}
@keyframes wh-spin{to{transform:rotate(360deg)}}
.wh-empty,.wh-firstrun{text-align:center;padding:48px 24px;color:var(--text-3,#8B8888)}
.wh-empty b,.wh-firstrun h3{color:var(--text,#E8E1D9);display:block;margin-bottom:6px;font-size:16px;font-weight:600}
.wh-empty p,.wh-firstrun p{margin:4px 0;font-size:14px}
.wh-empty button{margin-top:12px}
.wh-firstrun{max-width:520px;margin:0 auto;padding:64px 24px}
.wh-firstrun-icon{font-size:56px;margin-bottom:12px}
.wh-firstrun h3{font-size:20px;margin-bottom:8px}
.wh-firstrun .btn{margin-top:16px}
.wh-firstrun-foot{margin-top:24px;font-size:12px;color:var(--text-3,#8B8888);opacity:.75}

.wh-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.wh-head-where{font-size:20px;font-weight:600;color:var(--text,#E8E1D9)}
.wh-head-meta{font-size:12px;color:var(--text-3,#8B8888);margin-top:2px}
.wh-stale{display:inline-block;background:rgba(212,140,80,.18);color:#D48C50;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:3px;margin-left:6px}

.wh-filters{background:var(--surface,#1F1A1A);border:1px solid var(--rule,#3a3030);border-radius:8px;padding:14px 16px;margin-bottom:18px}
.wh-filter-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.wh-filter-row:last-child{margin-bottom:0}
.wh-filter-label{font-size:11px;color:var(--text-3,#8B8888);text-transform:uppercase;letter-spacing:.05em;font-weight:600;min-width:60px}
.wh-radius-val{color:var(--brass,#B8965A);margin-left:8px;font-weight:500}
.wh-pills{display:flex;gap:6px;flex-wrap:wrap}
.wh-pill{background:transparent;border:1px solid var(--rule,#3a3030);color:var(--text-2,#B8AFA5);padding:6px 12px;border-radius:14px;cursor:pointer;font-size:13px;transition:all .15s ease}
.wh-pill:hover{border-color:var(--text-3,#8B8888);color:var(--text,#E8E1D9)}
.wh-pill.active{background:var(--brass,#B8965A);border-color:var(--brass,#B8965A);color:#1F1A1A;font-weight:600}
.wh-radius-slider{flex:1;max-width:300px;accent-color:var(--brass,#B8965A);height:4px}
.wh-filter-preview{font-size:12px;color:var(--text-3,#8B8888);font-style:italic;margin-top:-4px;padding-left:72px}
.wh-cat-row{padding-top:6px;border-top:1px dashed var(--rule,#3a3030);margin-top:10px}
.wh-cat-pill{background:transparent;border:1px solid var(--rule,#3a3030);color:var(--text-2,#B8AFA5);padding:5px 10px;border-radius:14px;cursor:pointer;font-size:12px;display:inline-flex;align-items:center;gap:5px;transition:all .15s ease}
.wh-cat-pill:hover{border-color:var(--text-3,#8B8888);color:var(--text,#E8E1D9)}
.wh-cat-pill.active{background:rgba(184,150,90,.15);border-color:var(--brass,#B8965A);color:var(--brass,#B8965A)}
.wh-cat-icon{font-size:13px}

.wh-month-head{font-size:14px;font-weight:600;color:var(--text-2,#B8AFA5);text-transform:uppercase;letter-spacing:.05em;margin:24px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--rule,#3a3030)}
.wh-month-head:first-of-type{margin-top:8px}
.wh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.wh-card{background:var(--surface,#1F1A1A);border:1px solid var(--rule,#3a3030);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease, border-color .15s ease}
.wh-card:hover{transform:translateY(-2px);border-color:var(--brass,#B8965A)}
.wh-card-photo{height:120px;position:relative;display:flex;align-items:flex-start;justify-content:space-between;padding:8px 10px}
.wh-card-cat{background:rgba(0,0,0,.55);backdrop-filter:blur(4px);color:var(--text-inverse);font-size:11px;font-weight:600;padding:3px 8px;border-radius:10px}
.wh-card-days{background:rgba(0,0,0,.55);backdrop-filter:blur(4px);color:var(--text-inverse);font-size:11px;font-weight:600;padding:3px 8px;border-radius:10px}
.wh-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.wh-card-title{font-size:15px;font-weight:600;color:var(--text,#E8E1D9);line-height:1.25}
.wh-card-date{font-size:12px;color:var(--brass,#B8965A);font-weight:500}
.wh-card-venue{font-size:12px;color:var(--text-2,#B8AFA5)}
.wh-card-dist{color:var(--text-3,#8B8888)}
.wh-card-desc{font-size:12.5px;color:var(--text-2,#B8AFA5);line-height:1.45;margin-top:2px}
.wh-card-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.wh-card-tag{font-size:10px;background:rgba(255,255,255,.05);color:var(--text-3,#8B8888);padding:2px 6px;border-radius:3px}
.wh-card-actions{display:flex;gap:6px;margin-top:auto;padding-top:10px;flex-wrap:wrap}
.wh-card-actions .btn-sm{font-size:11.5px;padding:5px 10px}

@media (max-width:600px){
  .wh-grid{grid-template-columns:1fr}
  .wh-filter-preview{padding-left:0;margin-top:6px}
  .wh-head{flex-direction:column;align-items:flex-start}
  .wh-head-actions{width:100%}
  .wh-head-actions .btn{width:100%}
}

/* Today widget — Ahead Engine nudges (Mode 1) */
.aheadw-list{display:flex;flex-direction:column;gap:8px}
.aheadw-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;background:var(--surface,#1F1A1A);border:1px solid var(--rule,#3a3030);transition:border-color .15s ease}
.aheadw-item:hover{border-color:var(--brass,#B8965A)}
.aheadw-icon{font-size:18px;flex-shrink:0;width:28px;text-align:center}
.aheadw-text{flex:1;min-width:0;overflow:hidden}
.aheadw-title{font-size:13px;font-weight:600;color:var(--text,#E8E1D9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aheadw-body{font-size:11.5px;color:var(--text-3,#8B8888);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.aheadw-actions{display:flex;gap:4px;flex-shrink:0}
.aheadw-btn{background:transparent;border:1px solid var(--rule,#3a3030);color:var(--text-2,#B8AFA5);width:26px;height:26px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .15s ease;padding:0}
.aheadw-btn:hover{border-color:var(--brass,#B8965A);color:var(--brass,#B8965A)}
.aheadw-empty{font-size:12px;color:var(--text-3,#8B8888);padding:8px 0;text-align:center;font-style:italic}
.aheadw-foot{margin-top:10px;text-align:center}
.aheadw-foot a{font-size:11px;color:var(--text-3,#8B8888);text-decoration:none}
.aheadw-foot a:hover{color:var(--brass,#B8965A)}
.aheadw-day-group{margin-bottom:10px}
.aheadw-day-group:last-child{margin-bottom:0}
.aheadw-day-head{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3,#8B8888);padding:6px 2px 4px;border-bottom:1px solid var(--rule,#3a3030);margin-bottom:6px}

/* Settings — Ahead radius slider preview */
.wh-settings-radius{margin-top:16px}
.wh-settings-radius-row{display:flex;align-items:center;gap:12px}
.wh-settings-radius-row label{min-width:140px;font-size:13px;color:var(--text-2,#B8AFA5)}
.wh-settings-radius-row input[type=range]{flex:1;max-width:280px;accent-color:var(--brass,#B8965A)}
.wh-settings-radius-val{font-weight:600;color:var(--brass,#B8965A);min-width:50px;text-align:right}
.wh-settings-radius-preview{font-size:12px;color:var(--text-3,#8B8888);font-style:italic;margin-top:6px;padding-left:152px}
@media (max-width:600px){
  .wh-settings-radius-row{flex-wrap:wrap}
  .wh-settings-radius-preview{padding-left:0}
}

/* What's Happening — photo fade-in + mobile polish (PR follow-up) */
.wh-card-photo{transition:background .35s ease}
.wh-card-photo-loaded{box-shadow:inset 0 -40px 60px -30px rgba(0,0,0,.5)}
.wh-card-photo-loaded .wh-card-cat,
.wh-card-photo-loaded .wh-card-days{background:rgba(0,0,0,.7);text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* Mobile polish — refine the cramped layout */
@media (max-width:600px){
  .wh-head{margin-bottom:12px}
  .wh-head-where{font-size:17px}
  .wh-head-meta{font-size:11px}
  .wh-filters{padding:12px;margin-bottom:14px}
  .wh-filter-row{gap:8px;margin-bottom:10px}
  .wh-filter-label{min-width:auto;font-size:10px;letter-spacing:.04em;width:100%}
  .wh-radius-slider{max-width:none;width:100%}
  .wh-radius-val{margin-left:4px;font-size:12px}
  .wh-pills{width:100%;justify-content:space-between}
  .wh-pill{padding:6px 10px;font-size:12px;flex:1;min-width:0;text-align:center}
  .wh-cat-row{margin-top:8px;padding-top:8px;gap:6px}
  .wh-cat-pill{padding:6px 10px;font-size:12px;min-height:36px;border-radius:18px}
  .wh-cat-icon{font-size:14px}
  .wh-month-head{font-size:12px;margin:16px 0 10px}
  .wh-grid{gap:12px}
  .wh-card-photo{height:140px}
  .wh-card-cat{font-size:10px;padding:3px 7px}
  .wh-card-days{font-size:10px;padding:3px 7px}
  .wh-card-body{padding:10px 12px 12px;gap:5px}
  .wh-card-title{font-size:14px}
  .wh-card-date{font-size:11px}
  .wh-card-venue{font-size:11px}
  .wh-card-desc{font-size:12px;line-height:1.4}
  .wh-card-actions{gap:6px;padding-top:8px}
  .wh-card-actions .btn,.wh-card-actions .btn-sm{flex:1;text-align:center;min-height:36px;display:inline-flex;align-items:center;justify-content:center}
  .wh-firstrun{padding:36px 16px}
  .wh-firstrun-icon{font-size:44px}
  .wh-firstrun h3{font-size:17px}
  .wh-firstrun p{font-size:13px}
}
/* Today widget — small-screen polish for the Coming Up list */
@media (max-width:600px){
  .aheadw-item{padding:10px 10px;min-height:48px}
  .aheadw-icon{font-size:20px;width:32px}
  .aheadw-title{font-size:13.5px}
  .aheadw-body{font-size:11.5px}
  .aheadw-btn{width:32px;height:32px;font-size:14px}
}

/* ============================================================
   WHAT'S HAPPENING — master-detail redesign (wh-md-*)
   Left rail: scrollable filterable list. Right pane: detail.
   ============================================================ */
.inbox-layout-fullwidth .inbox-main{flex:1 1 auto;width:100%;max-width:none}
.wh-md{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:18px;align-items:flex-start;margin-top:14px}
.wh-md-list{max-height:calc(100vh - 360px);min-height:420px;overflow-y:auto;padding-right:4px;display:flex;flex-direction:column;gap:4px}
.wh-md-month{font-size:11px;font-weight:600;color:var(--text-3,#8B8888);text-transform:uppercase;letter-spacing:.06em;padding:14px 8px 4px;position:sticky;top:0;background:var(--bg,#0F0E14);z-index:2}
.wh-md-month:first-child{padding-top:0}

.wh-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:8px;padding:9px 10px;cursor:pointer;transition:background .12s ease, border-color .12s ease}
.wh-row:hover{background:rgba(255,255,255,.03);border-color:var(--rule,#3a3030)}
.wh-row-on{background:rgba(184,150,90,.10);border-color:var(--brass,#B8965A)}
.wh-row-on .wh-row-title{color:var(--brass,#B8965A)}
.wh-row-cat{flex-shrink:0;width:32px;height:32px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--text-inverse)}
.wh-row-body{flex:1;min-width:0;overflow:hidden}
.wh-row-title{font-size:13.5px;font-weight:600;color:var(--text,#E8E1D9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.wh-row-meta{font-size:11.5px;color:var(--text-3,#8B8888);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.wh-row-days{flex-shrink:0;font-size:10.5px;color:var(--text-3,#8B8888);font-weight:500;padding:2px 7px;border-radius:10px;background:rgba(255,255,255,.04)}

.wh-md-detail{position:sticky;top:14px;background:var(--surface,#1F1A1A);border:1px solid var(--rule,#3a3030);border-radius:10px;overflow:hidden;min-height:420px}
.wh-md-empty{padding:48px 24px;text-align:center;color:var(--text-3,#8B8888);font-size:14px}

.wh-d-hero{height:220px;position:relative;padding:14px 18px;display:flex;flex-direction:column;justify-content:space-between;color:var(--text-inverse);transition:background .35s ease}
.wh-d-hero-loaded{box-shadow:inset 0 -60px 80px -40px rgba(0,0,0,.7)}
.wh-d-hero-top{display:flex;justify-content:space-between;align-items:flex-start}
.wh-d-hero-bottom{display:flex;flex-direction:column;gap:4px}
.wh-d-cat{background:rgba(0,0,0,.5);backdrop-filter:blur(4px);font-size:11px;font-weight:600;padding:4px 9px;border-radius:11px}
.wh-d-days{background:rgba(0,0,0,.5);backdrop-filter:blur(4px);font-size:11px;font-weight:600;padding:4px 9px;border-radius:11px}
.wh-d-title{font-size:22px;font-weight:700;line-height:1.15;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.wh-d-date{font-size:13px;font-weight:500;opacity:.95;text-shadow:0 1px 4px rgba(0,0,0,.5)}

.wh-d-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px}
.wh-d-venue{font-size:13.5px;color:var(--text-2,#B8AFA5)}
.wh-d-dist{color:var(--text-3,#8B8888)}
.wh-d-desc{font-size:13.5px;color:var(--text-2,#B8AFA5);line-height:1.55;white-space:pre-wrap}
.wh-d-tags{display:flex;gap:5px;flex-wrap:wrap}
.wh-d-tag{font-size:11px;background:rgba(184,150,90,.10);color:var(--brass,#B8965A);padding:3px 8px;border-radius:10px;font-weight:500}
.wh-d-actions{display:flex;gap:8px;padding-top:8px;flex-wrap:wrap}
.wh-d-actions .btn{min-height:38px}

/* Mobile: stack list above detail */
@media (max-width:768px){
  .wh-md{grid-template-columns:1fr;gap:14px}
  .wh-md-list{max-height:none;min-height:0;border-bottom:1px solid var(--rule,#3a3030);padding-bottom:10px}
  .wh-md-month{position:relative}
  .wh-md-detail{position:relative;top:0}
}

/* What's Happening — "already on calendar" indicator + filter toggle */
.wh-row-oncal{opacity:.68}
.wh-row-oncal .wh-row-title{color:var(--text-3,#8B8888)}
.wh-row-oncal-tick{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--brass,#B8965A);color:#1F1A1A;font-size:10px;font-weight:700;margin-right:2px;vertical-align:1px}
.wh-cat-pill-toggle{margin-left:6px;border-style:dashed!important}
.wh-cat-pill-toggle.active{border-style:solid!important;background:rgba(184,150,90,.22)!important;color:var(--brass,#B8965A)!important}

/* ════════════════════════════════════════════════════════════════
   DARK MODE — WS3.3
   theme.js sets <html data-theme="dark"> pre-paint (localStorage
   'lc_theme' → prefers-color-scheme fallback). Everything below
   redefines the design tokens, then patches components whose colors
   are hardcoded outside the token system. Brass/accent is UNCHANGED.
   ════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* core */
  --bg: #10171F;
  --surface: #1B2735;
  --surface-2: #16202C;
  --surface-3: #0D131A;
  --text: #F2EFE9;
  --text-2: #A8B0BA;
  --text-3: #6E7681;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --rule: rgba(255,255,255,0.12);

  /* brass stays brass; -dark variants brighten (they're used as text) */
  --accent: #B8965A;
  --accent-bg: rgba(184,150,90,0.18);
  --accent-dark: #C9A977;

  /* navy surfaces stay navy (sidebar, hero bars) */
  --navy: #1e2d3d;
  --navy-mid: #2a3f54;
  --navy-deep: #16202C;

  /* status — slightly desaturated for dark, brighter "-dark" text tones */
  --success: #43B864;
  --success-bg: rgba(67,184,100,0.14);
  --success-dark: #6FCE8F;
  --warning: #E08E2E;
  --warning-bg: rgba(224,142,46,0.14);
  --warning-dark: #E8A54C;
  --error: #E25A50;
  --error-bg: rgba(226,90,80,0.14);
  --error-dark: #F08077;

  /* WS3.3 semantics */
  --cream: #2A2620;                 /* warm highlight wells go warm-dark */
  --text-inverse: #FFFFFF;          /* stays light over colored fills */
  --text-on-navy: #F5F0E6;          /* cream ink on navy, unchanged */
  --chip-bg: rgba(255,255,255,0.06);
  --hover-bg: rgba(255,255,255,0.05);
  --scrim: rgba(0,0,0,0.6);
  --label-2: #C7C7CF;
  --elev-1: rgba(0,0,0,0.45);
  --elev-2: rgba(0,0,0,0.6);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.45);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);

  /* focus purple (used as text/badges on focus-bg) */
  --focus: #9B82FF;
  --focus-bg: rgba(124,92,252,0.16);
  --focus-light: rgba(124,92,252,0.24);
  --focus-dark: #B5A2FF;
  --focus-strong: rgba(155,130,255,0.38);

  /* forecast chart (read by forecast.js cssVar() at render time) */
  --fc-line: #6FA3DC;
  --fc-line-past: #4CC272;
  --fc-area: rgba(111,163,220,0.12);
  --fc-area-danger: rgba(226,90,80,0.12);
  --fc-threshold: #FF6B61;
  --fc-today: #C9A977;
  --fc-income: #4CC272;
  --fc-expense: #FF6B61;
  --fc-hypo: #A98BE0;
  --fc-band-90: rgba(150,115,210,0.14);
  --fc-band-50: rgba(150,115,210,0.28);
  --fc-band-90-solid: #A98BE0;
  --fc-band-50-solid: #8C72C8;
  --fc-dot-ring: #1B2735;
}

/* ── Scoped token re-maps (sections that define their own palettes) ── */

/* Health Map / Bug Tracker cards (--hm-*) */
[data-theme="dark"] .hm-kpi-strip,
[data-theme="dark"] .hm-topo-card,
[data-theme="dark"] .hm-detail-drawer,
[data-theme="dark"] .bt-card,
[data-theme="dark"] .bt-detail {
  --hm-bg: var(--bg);
  --hm-surface: var(--surface);
  --hm-surface-2: var(--surface-2);
  --hm-border: var(--border);
  --hm-border-strong: var(--border-strong);
  --hm-text: var(--text);
  --hm-text-2: var(--text-2);
  --hm-text-3: var(--text-3);
  --hm-accent-bg: var(--accent-bg);
  --hm-success: var(--success);
  --hm-success-bg: var(--success-bg);
  --hm-warning: var(--warning);
  --hm-warning-bg: var(--warning-bg);
  --hm-error: var(--error);
  --hm-error-bg: var(--error-bg);
}

/* Schema Viewer (--sv-*) */
:root[data-theme="dark"] {
  --sv-surface-2: rgba(255,255,255,0.04);
  --sv-rule-strong: rgba(255,255,255,0.16);
  --sv-text-light: rgba(255,255,255,0.55);
  --sv-text-faint: rgba(255,255,255,0.35);
  --sv-accent-bg: rgba(184,150,90,0.2);
}

/* Budget (--bgt-*) */
:root[data-theme="dark"] {
  --bgt-accent-soft: rgba(184,150,90,0.28);
  --bgt-surface-3: #0F151C;
  --bgt-info: #5FA3C7;
}

/* Today briefing prototype scope (.tw-today local tokens) */
[data-theme="dark"] .tw-today {
  --ivory: #141C26;
  --ivory-2: #16202C;
  --ivory-3: #1B2735;
  --card: #1B2735;
  --card-2: #18222E;
  --ink: var(--text);
  --ink-2: #A8B0BA;
  --ink-3: #79828D;
  --line: rgba(255,255,255,0.10);
  --line-2: rgba(255,255,255,0.17);
  --navy-soft: rgba(255,255,255,0.06);
  --tw-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -12px rgba(0,0,0,0.55);
}

/* ── Component fixes ────────────────────────────────────────── */

/* Top bar — dark glass */
[data-theme="dark"] .tb {
  background: rgba(13,19,26,0.72);
  border-bottom-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .tb-dropdown {
  border-color: var(--border);
  box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
}
[data-theme="dark"] .tb-cap-input-wrap { border-color: rgba(184,150,90,0.35); }

/* Modal scrim a touch heavier so dark surfaces still separate */
[data-theme="dark"] .modal-overlay { background: var(--scrim); }

/* Voice/AI chat bubbles (vm-*) — warm/blue paper tints → dark tints */
[data-theme="dark"] .vm-bubble.assistant .vm-bubble-text { background: rgba(201,162,39,0.10); }
[data-theme="dark"] .vm-bubble.customer .vm-bubble-text { background: rgba(88,128,200,0.14); }
[data-theme="dark"] .vm-bubble-playing .vm-bubble-text { background: rgba(201,162,39,0.18) !important; }

/* Status chips / badges with pastel backgrounds → translucent equivalents */
[data-theme="dark"] .book-status-badge.reading { background: var(--success-bg); color: var(--success-dark); }
[data-theme="dark"] .book-status-badge.want { background: rgba(88,128,200,0.16); color: #8FB4E8; }
[data-theme="dark"] .book-status-badge.hold { background: var(--accent-bg); color: var(--accent-dark); }
[data-theme="dark"] .cpw-req.cpw-req-met,
[data-theme="dark"] .ng-verified-badge { background: var(--success-bg); color: var(--success-dark); border-color: rgba(67,184,100,0.3); }
[data-theme="dark"] .ng-unverified-badge { background: var(--warning-bg); color: var(--warning-dark); border-color: rgba(224,142,46,0.3); }
[data-theme="dark"] .tbl-weather-cool { background: rgba(88,160,220,0.16); }
[data-theme="dark"] .tbl-weather-nice { background: var(--success-bg); }
[data-theme="dark"] .tbl-weather-warm { background: var(--warning-bg); }
[data-theme="dark"] .tbl-weather-hot { background: var(--error-bg); }
[data-theme="dark"] .tbl-window-factor-good { background: var(--success-bg); color: var(--success-dark); }
[data-theme="dark"] .tbl-window-factor-ok { background: var(--warning-bg); color: var(--warning-dark); }
[data-theme="dark"] .tbl-window-factor-bad { background: var(--error-bg); color: var(--error-dark); }
[data-theme="dark"] .confidence-badge.very-high,
[data-theme="dark"] .confidence-badge.high { background: var(--success-bg); color: var(--success-dark); }
[data-theme="dark"] .confidence-badge.medium { background: var(--warning-bg); color: var(--warning-dark); }
[data-theme="dark"] .confidence-badge.low { background: var(--error-bg); color: var(--error-dark); }
[data-theme="dark"] .btn-icon-xs.danger:hover { background: var(--error-bg); color: var(--error-dark); border-color: var(--error); }
[data-theme="dark"] .vt-perm-allow { background: var(--success-bg); color: var(--success-dark); }
[data-theme="dark"] .vt-perm-block { background: var(--error-bg); color: var(--error-dark); }
[data-theme="dark"] .vt-perm-approve { background: var(--warning-bg); color: var(--warning-dark); }
[data-theme="dark"] .vt-alert.info,
[data-theme="dark"] .ci-alert.info { background: rgba(88,128,200,0.14); border-color: rgba(140,170,220,0.3); color: #B8CCE8; }
[data-theme="dark"] .vt-alert.success { background: var(--success-bg); border-color: rgba(67,184,100,0.3); color: var(--success-dark); }
[data-theme="dark"] .ci-alert.warn { background: var(--warning-bg); border-color: rgba(224,142,46,0.3); color: var(--warning-dark); }
[data-theme="dark"] .rule-pill.when { background: rgba(88,128,200,0.16); color: #9FBEE8; }
[data-theme="dark"] .rule-pill.then { background: var(--warning-bg); color: var(--warning-dark); }
[data-theme="dark"] .rule-pill.scope { background: rgba(140,100,200,0.18); color: #C0A8E8; }
[data-theme="dark"] .aria-q-badge.go { background: rgba(88,128,200,0.16); color: #8FB4E8; }
[data-theme="dark"] .aria-q-badge.ship { background: rgba(70,140,180,0.18); color: #7CC0E0; }
[data-theme="dark"] .aria-q-badge.done { background: var(--success-bg); color: var(--success-dark); }
[data-theme="dark"] .aria-q-badge.x { background: var(--chip-bg); }
[data-theme="dark"] .aria-alert-menu .ar-tier.fyi { background: var(--chip-bg); }
[data-theme="dark"] .fw-tag-red { background: var(--error-bg); color: var(--error-dark); }
[data-theme="dark"] .fw-tag-purple { background: rgba(140,100,200,0.18); color: #C0A8E8; }
[data-theme="dark"] .bt-tag-autopay { background: var(--success-bg); color: var(--success-dark); }
[data-theme="dark"] .bt-cell.c-na,
[data-theme="dark"] .bt-mini-cell.c-na { background: var(--surface-2); color: var(--text-3); }
[data-theme="dark"] .bgt-pill-fixed { background: rgba(120,150,180,0.18); color: #9FB8D0; }
[data-theme="dark"] .atask-badge.draft { background: var(--chip-bg); }
[data-theme="dark"] .atask-badge.scheduled { background: rgba(88,128,200,0.16); color: #8FB4E8; }

/* Brass-tinted hover cards (#FFFCF5 family) */
[data-theme="dark"] .ctx-source:hover,
[data-theme="dark"] .tpl-card:hover,
[data-theme="dark"] .vc-mode-card:hover,
[data-theme="dark"] .vc-lang-card:hover,
[data-theme="dark"] .vov-call-row:hover { background: var(--accent-bg); }
[data-theme="dark"] .vc-mode-card.selected,
[data-theme="dark"] .vc-lang-card.selected { background: var(--accent-bg); }
[data-theme="dark"] .tpl-card.added { background: var(--success-bg); }

/* Bills tracker gradient cards */
[data-theme="dark"] .bt-match,
[data-theme="dark"] .bt-disc { background: linear-gradient(135deg, rgba(184,150,90,0.10), rgba(184,150,90,0.02)), #1B2735; }

/* Travel local-intel / banners (warm paper tints) */
[data-theme="dark"] .tbl-intel-gem { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .tbl-intel-safety { background: var(--warning-bg); }
[data-theme="dark"] .tbl-window-pto { background: var(--warning-bg); }
[data-theme="dark"] .tbl-cost-savings { background: var(--success-bg); }

/* Mobile sheet :active press tints (light paper → white veil) */
[data-theme="dark"] .cmi-row:active,
[data-theme="dark"] .tdm-kpi:active,
[data-theme="dark"] .lmb-reading-row:active,
[data-theme="dark"] .lmb-shelf-chip:active,
[data-theme="dark"] .hsm-task-row:active,
[data-theme="dark"] .nmb-card:active,
[data-theme="dark"] .tdm-card:active,
[data-theme="dark"] .cmb-row:active { background: var(--hover-bg); }
[data-theme="dark"] .imb-section .capture-triage .btn { background: var(--surface-2) !important; }
[data-theme="dark"] .imb-section .capture-triage .btn:active { background: var(--surface-3) !important; }
[data-theme="dark"] .tdm-card .focus-ai-pick { background: rgba(224,142,46,0.10); }

/* Scrollbars — color-scheme:dark covers native; tune the styled ones */
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.18); }

/* Calendar month-view category chips — dark text on color tints brightens */
[data-theme="dark"] .cal-event.work { color: #AFC4DC; }
[data-theme="dark"] .cal-event.social { color: #E8A296; }
[data-theme="dark"] .cal-event.professional { color: #8FBEE0; }
[data-theme="dark"] .cal-event.volunteer { color: #CBA8DE; }
[data-theme="dark"] .cal-event.travel { color: #7ECEC0; }
[data-theme="dark"] .deleg-pill-event { color: #A9B6E8; }

/* ════════════════════════════════════════════════════════════
   WS3.4 — Shared empty/error states (.es-*) + module picker rows
   Built by window.emptyStateHtml / errorStateHtml (onboarding.js).
   Tokens only — dark mode inherits via the [data-theme="dark"] root.
   ════════════════════════════════════════════════════════════ */
.es-card { text-align: center; padding: 48px 24px; }
.es-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; margin-bottom: 14px;
}
.es-icon-error { background: var(--error-bg); }
.es-title { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--text); margin-bottom: 6px; }
.es-body { font-size: 13px; color: var(--text-2); max-width: 300px; margin: 0 auto 18px; line-height: 1.6; }
.es-actions { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.es-aria {
  background: none; border: none; font-family: var(--font);
  font-size: 12px; font-weight: 600; color: var(--accent);
  cursor: pointer; padding: 6px 10px; border-radius: var(--radius-sm);
}
.es-aria:hover { background: var(--accent-bg); }

/* Module visibility rows — shared by the onboarding wizard (step 1) and the
   Settings → Notifications "Modules" card (buildModulesSettingsBlock). */
.ob-mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; margin-top: 10px; }
.ob-mod-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text); cursor: pointer;
  background: var(--surface); font-family: var(--font);
}
.ob-mod-row:hover { background: var(--hover-bg); }
@media (max-width: 600px) { .ob-mod-grid { grid-template-columns: 1fr 1fr; } }

/* ════════════════════════════════════════════════════════════
   WS3.5 — ACCESSIBILITY BASELINE
   Skip link · visible keyboard focus · reduced motion
   (append-only; colors via design tokens so dark mode inherits)
   ════════════════════════════════════════════════════════════ */

/* ── Skip link — visually hidden until keyboard-focused ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10001; /* above confirmAction overlay (10000) */
  background: var(--navy);
  color: var(--text-on-navy);
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font: 600 13px var(--font);
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 12px;
  top: 0;
}

/* ── Visible keyboard focus ──
   53 existing rules suppress `outline` on :focus for mouse aesthetics;
   :focus-visible only matches KEYBOARD focus, so forcing it back on with
   !important restores a visible ring for keyboard users without changing
   anything for pointer users. */
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}
/* Programmatic focus targets (dialog containers, #main-content via the skip
   link) shouldn't draw a ring around an entire region. */
[tabindex="-1"]:focus-visible {
  outline: none !important;
}

/* ── Reduced motion — collapse nonessential animation/transitions
   (shimmer, slide-ins, pulses, toasts, aria msg-in, vm-pulse, carousel
   smooth-scroll). Durations go to ~0 instead of `none` so any code waiting
   on animationend/transitionend still gets its event. animation-delay is
   deliberately NOT zeroed: the <body> forceReveal anti-flash failsafe in
   index.html relies on its 5s delay. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   WS4.2 — My Desk five lanes (desktop >1100px). JS gates rendering
   (renderInbox useLanes); these rules style the lane grid. Lane
   semantics: Attention = consequence if ignored; Suggestions =
   optional opportunity. Narrow screens keep the tab UI.
   var(--*) tokens only — the a11y/mobile-pass guards forbid raw hex
   below the WS3.5 marker, and dark mode inherits through the tokens.
   ══════════════════════════════════════════════════════════════ */
.md-lanes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:start}
.md-lane-col{min-width:0;display:flex;flex-direction:column;gap:10px}
.md-lane-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2);padding:4px 2px 6px;border-bottom:2px solid var(--rule)}
.md-lane-count{font-size:11px;font-weight:700;min-width:18px;height:18px;line-height:18px;text-align:center;padding:0 5px;border-radius:99px;background:var(--accent);color:var(--text-inverse)}
.md-lanes-bar{display:flex;justify-content:flex-end;margin-bottom:10px}
.md-lane-col .inbox-section{display:block}
.md-lane-col .inbox-section > .card{margin-bottom:10px}
@media (max-width:1100px){.md-lanes{grid-template-columns:1fr}}

/* My Desk — Focus + Rail: one wide "Needs You" column + a stacked rail.
   Replaces the five cramped equal columns. Tokens only (a11y guard). */
.md-desk{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr);gap:22px;align-items:start}
.md-desk-focus{min-width:0;display:flex;flex-direction:column;gap:10px}
.md-desk-rail{min-width:0;display:flex;flex-direction:column;gap:20px}
.md-rail-sec{min-width:0;display:flex;flex-direction:column;gap:10px}
.md-desk-focus .inbox-section > .card,.md-rail-sec .inbox-section > .card{margin-bottom:10px}
.md-lane-head-focus{font-size:13px}
@media (max-width:1280px){.md-desk{grid-template-columns:minmax(0,1.5fr) minmax(304px,1fr);gap:16px}}
@media (max-width:1100px){.md-desk{grid-template-columns:1fr;gap:16px}}

/* Reviews lane — ritual entry points (WS4.1) */
.md-rituals{padding:12px;border-radius:12px;background:var(--surface);border:1px solid var(--rule);margin-bottom:12px}
.md-rituals-h{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:8px}
.md-rituals-row{display:flex;flex-direction:column;gap:6px}
.md-rituals-row .mbtn{font-size:12px;font-weight:500;padding:7px 11px;border-radius:8px;cursor:pointer;border:1px solid var(--rule);background:transparent;color:var(--text);text-align:left}
.md-rituals-row .mbtn:hover{border-color:var(--accent);background:var(--hover-bg)}

/* WS4.1 — Sunday Reset goal-pace + plan-week step bits */
.rit-goal{display:flex;flex-direction:column;gap:5px}
.rit-goal-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;color:var(--text)}
.rit-goal-pct{font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums;flex-shrink:0}
.rit-goal-pct.late{color:var(--error)}
.rit-goal-bar{height:6px;border-radius:3px;background:var(--chip-bg);overflow:hidden}
.rit-goal-fill{height:100%;border-radius:3px;background:var(--brass)}
.rit-plan-acts{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.rit-plan-acts .btn{width:100%;text-align:left}

/* WS4.1 — ritual wizard at narrow widths (≤480px / 390px phones):
   tighter padding + a capped, scrollable body so steps never overflow. */
@media (max-width:480px){
  .modal-ritual{width:96vw;max-width:96vw}
  .rit-head,.rit-foot{padding-left:14px;padding-right:14px}
  .rit-body{padding:14px;max-height:56vh;overflow-y:auto}
  .rit-stats{grid-template-columns:1fr 1fr}
}

/* WS4.3 — the Proactiveness dial gained a 5th position (Concierge);
   later-in-file override widens the chip grid. */
.prx-levels{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){.prx-levels{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.prx-levels{grid-template-columns:1fr 1fr}}


/* ════════════════════════════════════════════════════════════
   WS4.7 mobile pass
   390px usability for Goals · Habits · Health · Meals · Finance
   (Accounts / Budget / Bills / Forecast) · Travel · Voice, plus
   generic modal polish. Append-only; var(--*) tokens only — no
   raw hex (tests/mobilePass.test.js guards this). Conventions:
   768px primary breakpoint (matches the mobile bottom-tab-bar
   switch), 480px tightening, hover:none for touch affordances.
   ════════════════════════════════════════════════════════════ */

/* ── Shared: tab / pill bars become swipeable rails ───────── */
@media (max-width: 768px) {
  .tab-bar,
  .fin-subtabs,
  .forecast-subtabs,
  .settings-subtabs,
  .travel-detail-tabs,
  .tbl-modal-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar,
  .fin-subtabs::-webkit-scrollbar,
  .forecast-subtabs::-webkit-scrollbar,
  .settings-subtabs::-webkit-scrollbar,
  .travel-detail-tabs::-webkit-scrollbar,
  .tbl-modal-tabs::-webkit-scrollbar { display: none; }
  .tab-bar .tab-btn,
  .fin-subtab,
  .forecast-subtab,
  .settings-subtab,
  .travel-detail-tab,
  .tbl-modal-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ── Generic modal polish (helps every wizard/form) ────── */
  .modal { max-height: 88dvh; }
  .form-actions .btn { min-height: 46px; }
  .modal-body > .form-actions {
    position: sticky;
    bottom: 0;                     /* sticky insets are scrollport-relative */
    margin: 16px -1rem -1rem;      /* counter .modal-body 1rem padding */
    padding: 10px 1rem calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--rule);
    z-index: 2;
  }
  .page-header .btn { min-height: 44px; }

  /* ── GOALS — view toggle + tab bar reachability ────────── */
  .view-toggle .btn { min-height: 40px; }
  .goal-matrix-dot { width: 32px; height: 32px; font-size: 10px; }
  .goal-board { gap: 10px; }

  /* ── HABITS — weekly grid wraps: dots get their own
     full-width row with real 42px touch targets ──────────── */
  .habit-row { flex-wrap: wrap; row-gap: 8px; }
  .habit-row .habit-dots {
    order: 9;
    width: 100%;
    justify-content: space-between;
    gap: 2px;
  }
  .habit-dot { width: 42px; height: 42px; font-size: 14px; border-radius: 8px; }
  .habit-dot-label { width: 42px; }
  .habit-row-actions-spacer { display: none; }
  .habit-name { max-width: none; flex: 1 1 auto; font-size: 14px; }
  .habit-row-actions .btn-icon,
  .habit-week-nav-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .habit-check-btn { width: 42px; height: 42px; min-width: 42px; }
  .habit-check-btn svg { width: 18px; height: 18px; }

  /* ── HEALTH — log row actions + filters ────────────────── */
  #health-log .btn-icon {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #health-log-filters .filter-pill { padding: 9px 14px; }
  #health-date-from, #health-date-to { min-height: 42px; }

  /* ── MEALS — contain the 600px week grid's scroll inside
     its card (it used to overflow the page sideways) ─────── */
  #page-meals .section-card { overflow-x: auto; }
  #page-meals .section-card .btn-icon {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .meal-planner-grid .meal-cell { min-height: 56px; }

  /* ── FINANCE · Accounts (.fa-) ─────────────────────────── */
  .fa-sticky { padding: 10px 12px; gap: 10px; }
  .fa-acct-row { min-height: 44px; }
  .fa-back { min-height: 44px; padding: 8px 0 10px; }
  .fa-tx-filters .btn, .fa-tx-toolbar .btn { min-height: 38px; }

  /* ── FINANCE · Bills (.bt-) ────────────────────────────── */
  .bt-toolbar { flex-wrap: wrap; gap: 10px; }
  .bt-banner { flex-wrap: wrap; padding: 14px 16px; }
  .bt-att { flex-wrap: wrap; }
  .bt-row { flex-wrap: wrap; row-gap: 6px; }
  .bt-kpi-v { font-size: 20px; }

  /* ── FINANCE · Budget (.bgt-) ──────────────────────────── */
  .bgt-toolbar { gap: 10px; }
  .bgt-seg-btn { padding: 10px 14px; min-height: 42px; }
  .bgt-cat-row { flex-wrap: wrap; row-gap: 6px; }
  .bgt-actions .btn { min-height: 44px; flex: 1 1 auto; }

  /* ── FINANCE · Forecast (.fc- / .fcl- / .fcs-) ─────────── */
  .fc-toolbar-row1 { flex-wrap: wrap; row-gap: 8px; }
  .fc-toolbar button { min-height: 38px; }
  .fcs-edit-btn, .fcs-reset-btn { min-width: 36px; min-height: 36px; }

  /* ── TRAVEL — trip-detail sub-tabs scroll (rail rules
     above); bigger tap padding ───────────────────────────── */
  .travel-detail-tab { padding: 12px 14px; }
  .tbl-modal-tab { padding: 12px 14px; }
  .tw-footer { flex-wrap: wrap; gap: 8px; }
  .tw-option-cards { grid-template-columns: 1fr 1fr; }

  /* ── VOICE — settings tables scroll instead of crushing;
     thead+tbody stay one anonymous table so columns align ── */
  .vt-cap-table, .vt-rules {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .vt-cap-table th:first-child { width: auto; min-width: 150px; }
  .vt-rules th, .vt-rules td { white-space: nowrap; }
  .vt-tcb { width: 28px; height: 28px; }
  .vov-call-row { padding: 12px 14px; }
}

/* ── 480px tightening ─────────────────────────────────────── */
@media (max-width: 480px) {
  .modal-body > .form-actions {
    margin: 14px -0.75rem -0.75rem; /* .modal-body padding is .75rem here */
    padding: 10px 0.75rem calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .vm-info-grid { grid-template-columns: 1fr; }
  .bt-kpis { gap: 8px; }
  .fc-kpi-strip { gap: 8px; }
  /* Trip wizard goes full-screen — 94vw × 90vh leaves dead
     margins and a cramped body at 390px */
  .tw-container {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .tw-body { padding: 16px; }
  .tw-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Touch-only affordances ───────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Carousel arrows are a hover affordance — swipe instead
     (dot pagination remains). Also removes their -14px edge
     offsets from the touch layout. */
  .tov-scroll-arrow { display: none; }
  /* Forecast ledger what-if button was hover-revealed —
     unreachable on touch. Always visible, bigger target. */
  .fcl-whatif-btn { opacity: 1; width: 32px; height: 32px; }
}