/* ─────────────────────────────────────────────────────────
   B-Less — Modern Minimal UI
   ───────────────────────────────────────────────────────── */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── THEME TOKENS ────────────────────────────────────────
   Three solid themes — light, dim, dark. Opaque surfaces, no
   translucency or backdrop-filter; the goal is fast paint and
   legible content over decorative effects. Status colors
   (green/red/yellow) stay because they carry semantic meaning. */
:root {
  --bg:           #ffffff;
  --surface:      #f7f8fa;
  --surface-2:    #eef0f4;
  --surface-3:    #ffffff;
  --border:       #e3e6ec;
  --border-2:     #d5d9e0;

  --text:         #11141b;
  --muted:        #555c6b;
  --muted-2:      #8089a0;

  /* Brand accent — pulled from the new clipboard logo: a vivid purple
     that sits between the gradient's top violet (#7c3aed) and middle
     lavender (#c084fc). Reads well on white surfaces and pairs with
     the navy clip detail. */
  --accent:       #3b82f6;
  --accent-h:     #2563eb;
  --accent-soft:  rgba(59, 130, 246, .12);
  --accent-soft2: rgba(59, 130, 246, .26);
  --on-accent:    #ffffff;
  /* Full brand gradient — blue range from indigo to sky for focal points. */
  --brand-gradient: linear-gradient(180deg, #1d4ed8 0%, #3b82f6 55%, #38bdf8 100%);

  --green:        #16a34a;
  --orange:       #d97706;
  --red:          #dc2626;
  --purple:       #7c3aed;
  --yellow:       #ca8a04;
  --rose:         #e11d48;

  --shadow-sm:    0 1px 2px rgba(15, 20, 30, .06);
  --shadow:       0 6px 18px rgba(15, 20, 30, .08);
  --shadow-lg:    0 14px 36px rgba(15, 20, 30, .12);

  /* Frosted-glass tokens — used by chrome surfaces (bottom-nav,
     top-bar, drawer, modals, sidebars). Solid fallback below
     via @supports for browsers without backdrop-filter. */
  --glass-bg:     rgba(255, 255, 255, .60);
  --glass-bg-2:   rgba(255, 255, 255, .50);
  --glass-bg-card: rgba(255, 255, 255, .72);
  --glass-border: rgba(15, 20, 30, .08);
  --glass-highlight: rgba(255, 255, 255, .90);
  --glass-blur:   blur(24px) saturate(1.6);
  --glow-accent:  0 0 0 1px rgba(59, 130, 246, .25), 0 0 14px rgba(59, 130, 246, .25);
  --card-shadow:  0 8px 24px rgba(15, 20, 30, .08), 0 2px 6px rgba(15, 20, 30, .04);
  color-scheme: light;
}
input[type="date"] { color-scheme: light; }

/* Dim — warm gray, between light and dark. Easier on eyes for long
   sessions; keeps content high-contrast against a calm backdrop. */
:root[data-theme="dim"] {
  --bg:           #1c1f25;
  --surface:      #232730;
  --surface-2:    #2a2f3a;
  --surface-3:    #2f3441;
  --border:       #353a45;
  --border-2:     #41475a;

  --text:         #e8eaf0;
  --muted:        #a4abb8;
  --muted-2:      #767e8d;

  /* Dim mode accent — lighter sky-blue so it stays vivid on warm gray */
  --accent:       #60a5fa;
  --accent-h:     #93c5fd;
  --accent-soft:  rgba(96, 165, 250, .16);
  --accent-soft2: rgba(96, 165, 250, .30);
  --brand-gradient: linear-gradient(180deg, #3b82f6 0%, #60a5fa 55%, #38bdf8 100%);
  --on-accent:    #0a0c14;

  --green:        #4ade80;
  --orange:       #fb923c;
  --red:          #f87171;
  --purple:       #c4b5fd;
  --yellow:       #fcd34d;
  --rose:         #fb7185;

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, .35);
  --shadow:       0 6px 18px rgba(0, 0, 0, .35);
  --shadow-lg:    0 14px 36px rgba(0, 0, 0, .45);

  /* Tighter glass tokens for a more pronounced frosted-glass feel.
     Card alpha bumped to .17 (visible), inner highlight via border. */
  --glass-bg:     rgba(255, 255, 255, .10);
  --glass-bg-2:   rgba(255, 255, 255, .14);
  --glass-bg-card: rgba(255, 255, 255, .18);
  --glass-border: rgba(255, 255, 255, .14);
  --glass-highlight: rgba(255, 255, 255, .22);
  --glass-blur:   blur(24px) saturate(1.5);
  --glow-accent:  0 0 0 1px rgba(96, 165, 250, .35), 0 0 14px rgba(96, 165, 250, .28);
  --card-shadow:  0 8px 24px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .10);
  color-scheme: dark;
}
:root[data-theme="dim"] input[type="date"] { color-scheme: dark; }
:root[data-theme="dim"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85); }

/* Dark — pure black background, deep surfaces. */
:root[data-theme="dark"] {
  --bg:           #000000;
  --surface:      #14161c;
  --surface-2:    #1a1d24;
  --surface-3:    #20232b;
  --border:       #262932;
  --border-2:     #353a45;

  --text:         #f0f3fa;
  --muted:        #98a0b3;
  --muted-2:      #6b7185;

  /* Dark mode accent — bright sky-blue for vivid contrast on black. */
  --accent:       #60a5fa;
  --accent-h:     #93c5fd;
  --accent-soft:  rgba(96, 165, 250, .16);
  --accent-soft2: rgba(96, 165, 250, .28);
  --on-accent:    #0a0c14;
  --brand-gradient: linear-gradient(180deg, #3b82f6 0%, #60a5fa 55%, #38bdf8 100%);

  --green:        #4ade80;
  --orange:       #fb923c;
  --red:          #f87171;
  --purple:       #c4b5fd;
  --yellow:       #fcd34d;
  --rose:         #fb7185;

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, .55);
  --shadow:       0 6px 18px rgba(0, 0, 0, .55);
  --shadow-lg:    0 14px 36px rgba(0, 0, 0, .65);

  --glass-bg:     rgba(255, 255, 255, .08);
  --glass-bg-2:   rgba(255, 255, 255, .12);
  --glass-bg-card: rgba(255, 255, 255, .16);
  --glass-border: rgba(255, 255, 255, .12);
  --glass-highlight: rgba(255, 255, 255, .20);
  --glass-blur:   blur(26px) saturate(1.5);
  --glow-accent:  0 0 0 1px rgba(96, 165, 250, .35), 0 0 14px rgba(96, 165, 250, .32);
  --card-shadow:  0 8px 28px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .18);
  color-scheme: dark;
}
:root[data-theme="dark"] input[type="date"] { color-scheme: dark; }
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.85); }

:root {
  --radius-xs:    5px;
  --radius-sm:    7px;
  --radius:       9px;
  --radius-md:    11px;
  --radius-lg:    14px;
  --radius-xl:    18px;
  --ease:         cubic-bezier(.4,0,.2,1);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}
/* Desktop: bump root size so the default reads like a comfortable
   ~115-125% zoom without the user having to adjust the browser. */
@media (min-width: 900px) { html { font-size: 17.5px; } }
@media (min-width: 1280px) { html { font-size: 18px; } }
@media (min-width: 1600px) { html { font-size: 19px; } }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  /* Use dynamic viewport height so iOS Safari's URL bar doesn't push content
     below the visible area. Falls back to 100vh on older browsers. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
}

/* Improve readability on mobile */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

/* Universal focus ring */
:where(button, input, textarea, [role="button"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

svg { display: inline-block; vertical-align: -0.18em; flex-shrink: 0; }

/* ─── HEADER ────────────────────────────────────────────── */
/* Hidden everywhere now — all entries (Today/Calendar/Visits/Settings) live
   in the floating bottom pill on both web and mobile. */
header { display: none; }


/* ── Language switcher ────────────────────────────────── */
.lang-switcher {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
}
.lang-btn {
  padding: 4px 9px;
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.lang-btn:hover  { color: var(--text); }
.lang-btn.active { background: var(--surface); color: var(--text); }

.tabs { display: flex; gap: 1px; }

.tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.tab:hover  { background: var(--surface-2); color: var(--text); }
.tab.active { background: var(--accent-soft); color: var(--accent); }
.tab .ico   { width: 15px; height: 15px; }

.header-right {
  gap: 6px;
}

.settings-nav-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.settings-nav-btn:hover,
.settings-nav-btn.active {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
.settings-nav-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Round icon-only button (theme toggle) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.icon-btn.open  { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* Improve touch targets on mobile */
@media (max-width: 480px) {
  .icon-btn {
    width: 40px;
    height: 40px;
  }
}

/* Backup button (chip-style) */
.backup-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 13px 5px 11px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.backup-btn:hover         { border-color: var(--accent); color: var(--text); }
.backup-btn.backup-ok     { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.backup-btn.backup-warn   { border-color: var(--orange); color: var(--orange); }
.backup-icon              { display: inline-flex; align-items: center; }
.backup-label:empty       { display: none; }
/* Icon-only state: tighter, circular button */
.backup-btn:has(.backup-label:empty) { padding: 6px; }

/* Hide backup label on mobile for space */
@media (max-width: 600px) {
  .backup-label {
    display: none !important;
  }
  .backup-btn {
    padding: 6px;
  }
}

/* Backup popover — centered modal-style popup with backdrop */
.backup-backdrop {
  position: fixed; inset: 0;
  background: rgba(8,11,18,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 499;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease);
}
.backup-backdrop.open { opacity: 1; pointer-events: auto; }

.backup-popover {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.96);
  width: 440px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  z-index: 500;
  box-shadow: var(--shadow-lg);
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transition: opacity .15s var(--ease), transform .18s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .backup-popover { background: var(--surface); border-color: var(--border-2); }
}
.backup-popover.open {
  display: flex;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Below 720px collapse to a near-full-width sheet anchored to the
   left/right edges. Above that, the desktop 440px column from the
   base rule applies. */
@media (max-width: 720px) {
  .backup-popover {
    width: auto;
    left: 12px; right: 12px;
    transform: translate(0, -50%) scale(.96);
    max-width: none;
  }
  .backup-popover.open { transform: translate(0, -50%) scale(1); }
}

@media (max-width: 480px) {
  .backup-popover {
    width: calc(100vw - 20px);
    left: 10px;
    right: 10px;
    padding: 16px 18px;
    max-height: calc(100vh - 100px);
  }
}

.bp-title    { font-size: 13.5px; font-weight: 600; color: var(--text); }
.bp-subtitle { font-size: 12px; color: var(--muted); margin-top: -4px; }
.bp-last     { font-size: 12px; color: var(--muted); }
.bp-actions  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bp-actions .btn-primary,
.bp-actions .btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px; font-size: 12.5px;
  justify-content: center;
}
.bp-hint {
  font-size: 11.5px; color: var(--muted-2);
  border-top: 1px solid var(--border);
  padding-top: 9px; line-height: 1.55;
}

/* Task action selected states must win over the global glass button skin. */
.task-actions-row .btn-sm.active-toggle {
  background: rgba(63, 185, 80, .16) !important;
  border-color: rgba(63, 185, 80, .38) !important;
  color: var(--green) !important;
}
.task-actions-row .btn-sm.active-toggle:hover {
  background: rgba(63, 185, 80, .24) !important;
}
.task-actions-row .btn-sm.goal-toggle.active-toggle {
  background: rgba(96, 165, 250, .18) !important;
  border-color: rgba(96, 165, 250, .42) !important;
  color: #63b2ff !important;
}
.task-actions-row .btn-sm.goal-toggle.active-toggle:hover {
  background: rgba(96, 165, 250, .26) !important;
}
.bp-reconnect-warning {
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid rgba(245, 158, 11, .30);
  background: rgba(245, 158, 11, .10);
  color: #fbbf24;
  font-size: 12px;
  line-height: 1.45;
}

.bp-storage-warning {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, .42);
  background: rgba(146, 64, 14, .20);
  color: #fde68a;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.sync-safety-bar {
  position: sticky;
  top: var(--topbar-h, 0px);
  z-index: 70;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(20, 28, 40, .78);
  backdrop-filter: blur(14px);
}
.sync-safety-bar[hidden] { display: none !important; }
.sync-safety-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(96, 165, 250, .34);
  border-radius: 999px;
  color: #93c5fd;
  background: rgba(59, 130, 246, .12);
  font-size: 12px;
  font-weight: 650;
}
.sync-safety-warning {
  color: #fde68a;
  border-color: rgba(251, 191, 36, .38);
  background: rgba(146, 64, 14, .18);
}
.pending-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
  flex: 0 0 auto;
}

/* ── Drive popover: friendlier first-time intro ─────── */
.bp-intro {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 6px;
  padding: 6px 0 4px;
}
.bp-intro-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.bp-intro-icon svg { width: 28px; height: 28px; }
.bp-intro-title { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.bp-intro-sub { font-size: 13px; color: var(--muted); line-height: 1.45; max-width: 320px; }

.bp-intro-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 6px;
  display: flex; flex-direction: column; gap: 6px;
}
.bp-intro-list li {
  position: relative;
  padding: 6px 10px 6px 28px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.4;
}
.bp-intro-list li::before {
  content: "";
  position: absolute;
  left: 11px; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--accent);
}

.bp-cta-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: filter .15s var(--ease), transform .12s var(--ease);
}
.bp-cta-btn:hover  { filter: brightness(1.05); }
.bp-cta-btn:active { transform: scale(.99); }
.bp-cta-ico {
  display: inline-flex;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  width: 26px; height: 26px;
  align-items: center; justify-content: center;
}
.bp-cta-ico svg { width: 16px; height: 16px; }

/* Connected card (legacy class kept for back-compat) */
.bp-connected {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.bp-provider-line {
  display: flex; align-items: center; gap: 10px;
}
.bp-provider-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.bp-provider-info { flex: 1; min-width: 0; }
.bp-provider-name { font-size: 13px; font-weight: 600; color: var(--text); }
.bp-provider-folder {
  font-size: 11.5px; color: var(--muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}

/* ── New connected popover (account + meta + actions) ── */
.bp-account {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
}
.bp-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
}
.bp-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-avatar-fallback {
  font-size: 15px; font-weight: 700; color: var(--accent);
}
.bp-account-info { flex: 1; min-width: 0; }
.bp-account-name {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  letter-spacing: -.005em;
  line-height: 1.25;
}
.bp-account-email {
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}

.bp-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s var(--ease);
}
.bp-icon-btn:hover {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-2);
}
.bp-signout-btn:hover { color: var(--red); border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); }

.bp-meta {
  padding: 4px 4px 0;
}
.bp-meta-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px;
  border-bottom: 1px solid var(--border);
}
.bp-meta-row:last-child { border-bottom: none; }
.bp-meta-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  min-width: 76px;
}
.bp-meta-value {
  flex: 1;
  font-size: 12.5px;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bp-last-sync {
  font-family: inherit;
  color: var(--accent);
  font-weight: 500;
}
.bp-status-dot { display: none; }

/* Info rows in connected card */
.bp-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 0;
  font-size: 12px;
  border-top: 1px dashed var(--border);
  margin-top: 8px;
  padding-top: 8px;
}
.bp-info-row:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 4px;
}
.bp-info-label {
  color: var(--muted);
  font-weight: 500;
  min-width: 64px;
}
.bp-info-value {
  flex: 1;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-mini-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  cursor: pointer;
  transition: all .15s var(--ease);
  flex-shrink: 0;
}
.bp-mini-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.bp-open-folder {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s var(--ease);
}
.bp-open-folder:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.bp-disconnect {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 11.5px;
  cursor: pointer;
  padding: 4px 0;
  align-self: flex-start;
  text-decoration: underline;
  transition: color .15s var(--ease);
}
.bp-disconnect:hover { color: var(--red); }

/* Provider button (detected service or install link) */
.bp-providers, .bp-installs {
  display: flex; flex-direction: column; gap: 6px;
}
.provider-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: all .15s var(--ease);
}
.provider-btn:hover {
  border-color: var(--accent);
  background: var(--surface-3);
}
.provider-btn .provider-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: all .15s var(--ease);
}
.provider-btn:hover .provider-ico {
  background: var(--accent);
  color: var(--on-accent);
}
.provider-btn .provider-info { flex: 1; min-width: 0; }
.provider-btn .provider-name { font-size: 13px; font-weight: 600; color: var(--text); display: block; }
.provider-btn .provider-hint {
  font-size: 11px; color: var(--muted);
  display: block; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}
.provider-btn .provider-arrow {
  color: var(--muted);
  flex-shrink: 0;
  transition: transform .15s var(--ease), color .15s var(--ease);
}
.provider-btn:hover .provider-arrow { color: var(--accent); transform: translateX(2px); }
.provider-btn.small { padding: 7px 10px; }

/* Manual folder picker fallback */
.bp-manual {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 12.5px;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.bp-manual:hover { border-color: var(--accent); color: var(--text); border-style: solid; }

/* Warning when no cloud detected */
.bp-warn {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px;
  background: rgba(240,136,62,.1);
  border: 1px solid rgba(240,136,62,.25);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
}
.bp-warn svg  { color: var(--orange); flex-shrink: 0; margin-top: 2px; }
.bp-warn strong { font-weight: 600; }

/* ─── MAIN ──────────────────────────────────────────────── */
main { flex: 1; overflow: hidden; display: flex; padding-bottom: 0; }

/* Desktop layout is handled in the dedicated @media (min-width: 1000px)
   block at the end of this file: persistent sidebar + full-width main
   capped at 1280px. The old 720px phone-column cap is gone. */

/* The Robots in-section sidebar is redundant — Spaces drawer drives nav. */
#robots.section > .sidebar { display: none; }

.section { display: none; height: 100%; flex: 1; min-width: 0; overflow-x: hidden; }
.section.active { display: flex; }
/* Bottom clearance on every section so the final item can scroll above the
   floating pill + home indicator. */
.section.active { scroll-padding-bottom: 96px; }
#more.section.active,
#settings.section.active {
  display: block;
  overflow-y: auto;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
#field-visits.active { display: block; overflow-y: auto; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* ── v4 Space sidebar (global navigation) ─────────────── */
.space-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.space-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
}
.space-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--muted);
}
.space-add-space-btn {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.space-add-space-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
.space-sidebar-actions { display: inline-flex; gap: 6px; align-items: center; }
.space-search-btn {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.space-search-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }

.space-list { flex: 1; overflow-y: auto; padding: 8px 8px 16px; }

/* Each Space (Work / Personal / B-less) is a framed card so its
   members read as a grouped unit. */
.space-group {
  margin-bottom: 8px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.space-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.space-header:hover { background: var(--surface-2); color: var(--text); }
.space-chev {
  display: inline-flex;
  width: 14px; height: 14px;
  color: var(--muted);
  transition: transform .15s var(--ease);
}
.space-chev svg { width: 12px; height: 12px; }
.space-group.collapsed .space-chev { transform: rotate(-90deg); }
.space-group.collapsed .space-items { display: none; }
.space-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.space-add-btn,
.space-more-btn {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  transition: all .15s var(--ease);
}
.space-header:hover .space-add-btn,
.space-header:hover .space-more-btn { opacity: 1; }
.space-add-btn:hover, .space-more-btn:hover { background: var(--surface-3); color: var(--text); }

.space-items { padding-left: 6px; }
.space-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  transition: background .12s var(--ease), color .12s var(--ease);
  margin: 1px 0;
  min-height: 32px;
}
.space-item:hover { background: var(--surface-2); color: var(--text); }
.space-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.space-item[draggable="true"] { cursor: grab; }
.space-item.dragging { opacity: .35; cursor: grabbing; }
.space-group.drag-target {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
}
.space-item-icon { display: inline-flex; flex-shrink: 0; opacity: .8; }
.space-item.active .space-item-icon { opacity: 1; }
.space-item-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.space-empty {
  padding: 6px 12px;
  font-size: 11.5px;
  color: var(--muted-2);
  font-style: italic;
}

/* Improve sidebar items on mobile */
@media (max-width: 480px) {
  .space-item {
    padding: 8px 12px;
    min-height: 40px;
    font-size: 13.5px;
  }
}

/* Collapsible sub-groups inside a space (Meetings / Visits) */
.space-subgroup { margin: 2px 0; }
.space-subheader {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.space-subheader:hover { background: var(--surface-2); color: var(--text); }
.space-subchev {
  display: inline-flex;
  width: 12px; height: 12px;
  color: var(--muted);
  transition: transform .15s var(--ease);
  flex-shrink: 0;
}
.space-subchev svg { width: 10px; height: 10px; }
.space-subgroup.collapsed .space-subchev { transform: rotate(-90deg); }
.space-subgroup.collapsed .space-subitems { display: none; }
.space-subicon { opacity: .8; }
.space-subname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.space-subcount {
  font-size: 10px;
  color: var(--muted-2);
  background: var(--surface-3);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.space-subitems { padding-left: 18px; }
.space-subitems .space-item { padding: 5px 9px; font-size: 12.5px; }

/* Sub-group "+" (add Meeting/Visit directly into this group) */
.space-sub-add-btn {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  transition: all .15s var(--ease);
  flex-shrink: 0;
}
.space-subheader:hover .space-sub-add-btn { opacity: 1; }
.space-sub-add-btn:hover { background: var(--surface-3); color: var(--text); }

/* Cross-space top nav (Today / Calendar / All Tasks) */
.cross-nav {
  display: flex;
  gap: 2px;
  flex: 1;
  justify-content: flex-start;
}
.cross-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s var(--ease);
  min-height: 32px;
}
.cross-nav-btn:hover  { background: var(--surface-2); color: var(--text); }
.cross-nav-btn.active { background: var(--accent-soft); color: var(--accent); }
.cross-nav-btn svg { flex-shrink: 0; }

@media all { /* mobile-first universal */
  .cross-nav-btn span { display: none; }
  .cross-nav-btn { padding: 6px 10px; min-height: 40px; }
}

@media (max-width: 480px) {
  .cross-nav-btn {
    padding: 8px 8px;
    min-height: 44px;
    font-size: 11px;
  }
  .cross-nav-btn svg { width: 18px; height: 18px; }
}

/* ── Add Item picker modal ──────────────────────────── */
.modal-picker { width: 480px; }

/* ── Welcome / onboarding modal ─────────────────────── */
.modal-welcome { width: 480px; max-width: 92vw; }
.welcome-lede {
  margin: 4px 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.welcome-tips {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.welcome-tips li {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.welcome-tips li strong { color: var(--accent); margin-right: 6px; }
.welcome-tips li em { font-style: normal; font-weight: 600; color: var(--text); }
.modal-welcome .modal-actions {
  display: flex; justify-content: flex-end;
}

.modal-quick { width: 480px; max-width: 92vw; }
.modal-quick .search-bar { border-bottom: 1px solid var(--border); margin-bottom: 12px; padding: 12px 14px; }
.quick-meta {
  display: flex; align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 14px;
  padding: 0 4px;
}
.quick-meta select,
.quick-meta input[type="date"] {
  flex: 1; min-width: 120px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}
.quick-meta input[type="date"] { color-scheme: light; }
.quick-new-list-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s var(--ease);
}
.quick-new-list-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.quick-date-quick {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  font-size: 11.5px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: all .15s var(--ease);
}
.quick-date-quick:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ── Morning brief modal ───────────────────────────── */
.modal-brief { width: 480px; max-width: 92vw; }
.brief-body { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.brief-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  margin-bottom: 6px;
}
.brief-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.brief-list li {
  display: flex; align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  min-width: 0;
}
.brief-list li > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brief-meta { font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
.brief-more { background: transparent; border: none; color: var(--muted); font-size: 12px; padding: 4px 10px; }
.brief-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent);
}
.brief-dot.meeting { background: var(--purple); }
.brief-dot.visit   { background: var(--green); }
.brief-empty { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 4px 0; }

/* ── Streak / weekly stats widget ──────────────────── */
/* ── Global top bar (hamburger + search) ─────────────────── */
/* Persistent across every section. Lives above <main> in the DOM and is
   pinned to the top so it stays visible while content scrolls. */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* Hamburger + search are square icon buttons */
.topbar-icon-btn {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.topbar-icon-btn:hover { background: var(--surface-2); }
.topbar-icon-btn:active { transform: scale(.97); }


/* Brand block — used to show only inside the (now-removed) persistent
   desktop sidebar. With the unified mobile-style layout the slide-out
   drawer doesn't carry a header wordmark, so this block stays hidden
   on every viewport. The topbar's centred title is the brand surface. */
.spaces-drawer-brand { display: none !important; }
.spaces-drawer-logo {
  width: 32px;
  height: 32px;
  border-radius: 0;
  flex-shrink: 0;
  object-fit: contain;
}
.spaces-drawer-wordmark {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  background: var(--brand-gradient, linear-gradient(180deg, #1d4ed8, #38bdf8));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Section title — centred within the remaining flex space (logo sits
   to its left, search/avatar to its right). */
.topbar-title {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}
.topbar-title #topbar-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Avatar button — picture when signed in, fallback user icon when not.
   No `overflow: hidden` on the button so the presence dot can sit
   outside the round edge; the <img> clips itself via its own
   border-radius. Width/height locked with min/max so nothing in the
   flex parent or rem-scaling can stretch it. */
.topbar-avatar-btn {
  position: relative;
  width: 28px; height: 28px;
  min-width: 28px; min-height: 28px;
  max-width: 28px; max-height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center; justify-content: center;
  box-sizing: border-box;
  transition: border-color .12s var(--ease), transform .12s var(--ease);
}
.topbar-avatar-btn:hover  { border-color: var(--border-2); }
.topbar-avatar-btn:active { transform: scale(.97); }
.topbar-avatar-img {
  width: 26px; height: 26px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
}
.topbar-avatar-img[hidden] { display: none; }
.topbar-avatar-fallback {
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--muted);
}
.topbar-avatar-fallback[hidden] { display: none; }
/* Tiny green presence dot — scaled down to match the smaller avatar. */
.topbar-avatar-dot {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green, #16a34a);
  border: 2px solid var(--bg);
  z-index: 2;
  box-sizing: border-box;
}
.topbar-avatar-dot[hidden] { display: none; }

/* Inline search dropdown was removed — search opens via modal-search now. */

/* ── Home dashboard ──────────────────────────────────────── */
#home.section.active { display: block; overflow-y: auto; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.home-container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 16px 0;
}
.home-burger {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s var(--ease);
}
.home-burger:hover { background: var(--surface-3); }
.home-header {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.home-workspace {
  display: flex; align-items: center; gap: 10px;
}
.home-ws-avatar {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.home-ws-name {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px; font-weight: 700;
  color: var(--text);
  padding: 6px 8px;
  border-radius: 8px;
  transition: background .15s var(--ease);
}
.home-ws-name:hover { background: var(--surface-2); }
.home-ws-name svg { color: var(--muted); }
.home-search-pill {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.home-search-pill:hover { border-color: var(--border-2); }
.home-search-pill svg { flex-shrink: 0; }

.home-ws-name-static {
  font-size: 16px; font-weight: 700; color: var(--text);
}

.home-section { margin-bottom: 28px; }

/* Home — This Week's Goals */
.home-goal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 9px 4px;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background .1s var(--ease);
}
.home-goal-item:last-child { border-bottom: none; }
.home-goal-item:hover { background: var(--surface-2); border-radius: var(--radius-xs); }
.home-goal-item.done .home-goal-title { text-decoration: line-through; color: var(--muted); }
.home-goal-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.home-goal-title {
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.home-goal-sub {
  font-size: 11.5px;
  color: var(--muted);
}
.home-goal-arr { flex-shrink: 0; color: var(--muted); }
/* Small coloured dot to visually distinguish space goals */
.home-goal-badge-space {
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .65;
}
.home-goals-shortcut {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)),
    rgba(19, 24, 32, .62);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 34px rgba(0, 0, 0, .16);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  transition: transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.home-goals-shortcut:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, .46);
  background:
    linear-gradient(135deg, rgba(96, 165, 250, .16), rgba(255, 255, 255, .04)),
    rgba(22, 28, 38, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px rgba(0, 0, 0, .2);
}
.home-goals-shortcut-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: var(--accent);
  background: rgba(96, 165, 250, .13);
  border: 1px solid rgba(96, 165, 250, .22);
}
.home-goals-shortcut-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.home-goals-shortcut-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-goals-shortcut-sub {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-goals-shortcut-arrow {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 16px;
  line-height: 1;
}
.home-goals-more {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 7px 0;
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-align: center;
  letter-spacing: .3px;
  transition: opacity .12s var(--ease);
}
.home-goals-more:hover { opacity: .75; }

.home-section-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  margin: 0 4px 8px;
}
.home-section-add {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.home-section-add:hover { background: var(--surface-2); color: var(--text); }
.home-section-actions {
  display: inline-flex;
  gap: 6px;
}
.home-section-icon-btn {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease);
}
.home-section-icon-btn:hover { background: var(--accent-soft); }

/* ── Left Spaces drawer (toggled by hamburger on Home) ── */
.spaces-drawer-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 110;
}
body.spaces-drawer-open .spaces-drawer-backdrop { display: block; }
.spaces-drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(320px, 88vw);
  background: var(--surface);
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 16px rgba(0, 0, 0, .12);
  transform: translateX(-104%);
  transition: transform .22s var(--ease);
  z-index: 120;
  overflow-y: auto;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
body.spaces-drawer-open .spaces-drawer { transform: translateX(0); }
.spaces-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; box-sizing: border-box;
  padding: 6px 14px 10px;
}
.spaces-drawer-title {
  font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted);
}
.spaces-drawer .home-spaces { padding: 0 8px; }

/* ── Type-group nesting inside a space (Lists / Meetings / Visits…) ── */
.home-type-group {
  position: relative;
  padding-left: 2px;
}
.home-type-head {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 5px 6px;
  margin-top: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 6px;
}
.home-type-head:hover { background: var(--surface-2); color: var(--text); }
.home-type-head::before {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid currentColor;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  flex-shrink: 0;
  transition: transform .15s var(--ease);
}
.home-type-group.open .home-type-head::before { transform: rotate(90deg); }
.home-type-count {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--muted-2);
  font-weight: 600;
}
.home-type-items {
  display: none;
  flex-direction: column;
  gap: 0;
  padding-left: 14px;
  margin-left: 4px;
  border-left: 1px solid var(--border);
}
.home-type-group.open .home-type-items { display: flex; }

/* This-week mini calendar — 7-day strip with per-day dots + count */
.home-week-mini {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 6px 4px 16px;
  box-sizing: border-box;
}
.wm-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 2px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
  transition: background .12s var(--ease), border-color .12s var(--ease), transform .12s var(--ease);
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.wm-cell:hover { background: var(--surface-2); border-color: var(--border-2); }
.wm-cell:active { transform: scale(.97); }
/* Cell with items in it — subtle accent wash so busy days pop. */
.wm-cell.wm-has { background: var(--accent-soft); }
/* Today — accent border + accent day number + label.
   Stays a normal solid card; only the colour cues mark it as today. */
.wm-cell.wm-today {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.wm-cell.wm-today.wm-has { background: var(--accent-soft); }
.wm-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  line-height: 1;
}
.wm-cell.wm-today .wm-label { color: var(--accent); font-weight: 700; }
.wm-day {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}
.wm-cell.wm-today .wm-day { color: var(--accent); }
.wm-dots {
  display: flex;
  gap: 3px;
  height: 6px;
  align-items: center;
  justify-content: center;
}
.wm-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  display: inline-block;
}
.wm-dot-task    { background: var(--accent); }
.wm-dot-meeting { background: #f97316; }
.wm-dot-visit   { background: #10b981; }
.wm-count {
  position: absolute;
  top: 4px;
  right: 5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
}
@media (max-width: 380px) {
  /* Very narrow phones (iPhone SE etc.) — shrink slightly so all seven
     cells fit without horizontal scrolling. */
  .home-week-mini { gap: 4px; }
  .wm-cell { padding: 8px 2px 10px; border-radius: 9px; }
  .wm-label { font-size: 10px; }
  .wm-day { font-size: 16px; }
  .wm-count { top: 3px; right: 3px; min-width: 15px; height: 15px; line-height: 15px; font-size: 9.5px; }
}

/* Empty-state card for the This-Week list — themed sparkle icon
   (replaces the emoji we used to show). */
.home-empty-week {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  color: var(--muted);
  font-size: 13.5px;
  background: var(--accent-soft, rgba(59, 130, 246, .08));
  border: 1px solid var(--border);
  border-radius: 12px;
}
.home-empty-icon {
  color: var(--accent);
  flex-shrink: 0;
}

/* Day-grouped list (This Week, organised by day) */
.home-day-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-day-group + .home-day-group { margin-top: 20px; }
.home-assigned-group {
  padding: 10px;
  border: 1px solid rgba(96, 165, 250, .18);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(96, 165, 250, .07), rgba(255, 255, 255, .02)),
    rgba(15, 23, 42, .18);
}
.home-day-head {
  display: inline-flex;     /* hugs content, no solid rectangle */
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  margin: 4px 0 8px;
  /* No sticky background — when day-head scrolls under the topbar
     it just disappears like any other content. The topbar's frost
     already provides a visual anchor at the top. */
  background: transparent;
}
.home-day-name {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text);
}
.home-day-count {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  padding: 1px 7px;
  border-radius: 999px;
}
.home-day-group + .home-day-group .home-day-head { margin-top: 10px; }
.home-day-flash > .home-day-head .home-day-name {
  color: var(--accent);
  transition: color .25s var(--ease);
}
.home-day-flash > .home-day-head .home-day-count {
  border-color: var(--accent);
  color: var(--accent);
}

/* Tinted rows — each task picks up its parent project's stable colour
   via inline --row-c so users can scan by project at a glance. */
.home-list-item-tinted {
  position: relative;
  padding-left: 14px;
}
.home-list-item-tinted::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--row-c, var(--accent));
  opacity: .9;
}

.home-list { display: flex; flex-direction: column; gap: 8px; }
.home-list-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: background .12s var(--ease);
}
.home-list-item:hover { background: var(--surface-2); }
.home-list-item-assigned {
  border: 1px solid rgba(96, 165, 250, .24);
  background: linear-gradient(135deg, rgba(96, 165, 250, .08), rgba(255, 255, 255, .025));
}
.home-list-item-assigned:hover {
  border-color: rgba(96, 165, 250, .42);
  background: linear-gradient(135deg, rgba(96, 165, 250, .13), rgba(255, 255, 255, .04));
}
.home-list-item-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--c, var(--surface-2));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.home-list-item-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.home-list-item-title {
  font-size: 14px; font-weight: 600;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-list-item-sub {
  font-size: 12px; color: var(--muted);
}
.home-list-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.home-list-assignees {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.home-list-assignees .task-assignee-chip {
  width: 20px;
  height: 20px;
  margin-right: -4px;
  box-shadow: 0 0 0 2px var(--surface);
}
.home-list-assignees .task-assignee-chip:last-child { margin-right: 0; }
.home-list-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .24);
  background: rgba(148, 163, 184, .11);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.home-list-pill-me {
  border-color: rgba(96, 165, 250, .3);
  background: rgba(96, 165, 250, .14);
  color: var(--accent);
}
.home-list-empty {
  padding: 14px 12px;
  font-size: 13px; color: var(--muted-2);
  text-align: center;
}

/* Spaces tree on Home — left-aligned hierarchy with a leading caret per
   row. Children indent under their parent space and connect to a faint
   vertical guide line for that classic file-tree feel. */
.home-spaces { display: flex; flex-direction: column; gap: 0; }
.home-space {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}
.home-space-head {
  display: flex; align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  border-radius: 8px;
}
.home-space-head:hover { background: var(--surface-2); }
/* Caret to the LEFT of the row (file-tree style), rotates when expanded */
.home-space-head::before {
  content: '';
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-right: 4px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform .15s var(--ease);
}
.home-space.open .home-space-head::before { transform: rotate(90deg); }
.home-space-icon {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--c, var(--accent));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.home-space-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.home-space-name  { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-space-meta  {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 11.5px;
  color: var(--muted);
}
.sync-health-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 17px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .12);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.sync-health-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.sync-health-chip.sync-ok { color: var(--green); background: rgba(34, 197, 94, .10); }
.sync-health-chip.sync-syncing { color: var(--accent); background: rgba(59, 130, 246, .12); }
.sync-health-chip.sync-offline,
.sync-health-chip.sync-pull-needed { color: var(--orange); background: rgba(245, 158, 11, .13); }
.sync-health-chip.sync-conflict { color: var(--red); background: rgba(239, 68, 68, .13); }
.home-space-chev  { display: none; }

.home-space-items {
  display: none;
  /* Indent children + draw a faint vertical guide line so the hierarchy
     reads at a glance, like a sidebar tree. */
  position: relative;
  padding: 2px 0 6px 26px;
  margin-left: 12px;
  flex-direction: column;
  gap: 0;
  border-left: 1px solid var(--border);
}
.home-space.open .home-space-items { display: flex; }
.home-space-item {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  font-size: 13px;
  color: var(--text);
  transition: background .12s var(--ease);
}
.home-space-item::before {
  /* Tree elbow connecting the vertical guide to each child row */
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--border);
}
.home-space-item:hover { background: var(--surface-2); }
.home-space-item[draggable="true"] {
  cursor: grab;
  /* Block iOS's long-press magnifier / share sheet so our touch-drag shim
     gets the gesture instead of the system. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.home-space-item.dragging { opacity: .4; cursor: grabbing; }
.home-space.drag-target {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
}
.home-space-item-icon {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: var(--c, var(--surface-2));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.home-space-item-name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-space-item-add {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  margin: 4px 0 0 14px;
  padding: 5px 8px;
  background: transparent;
  border: 1px dashed var(--border-2);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}
.home-space-item-add:hover { color: var(--text); border-color: var(--accent); }

/* Inbox */
#inbox.section.active { display: block; overflow-y: auto; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.inbox-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.inbox-title { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -.02em; margin: 0; }
.inbox-sub   { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
#inbox-list {
  max-width: 960px;
}
#inbox-list .inbox-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#inbox-list .home-list-item {
  min-height: 58px;
  padding: 11px 14px;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .045);
}
#inbox-list .home-list-item:hover {
  border-color: rgba(99, 178, 255, .28);
  background: rgba(99, 178, 255, .08);
}
#inbox-list .home-list-item-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--c, var(--accent)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 34%, transparent);
  color: var(--c, var(--accent));
}
#inbox-list .home-list-item-title {
  max-width: 100%;
}
#inbox-list .home-list-item-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 520px) {
  .inbox-header {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }
}

/* Colorful card grid (now in More tab) */
.home-card {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 14px 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
  transition: transform .12s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.home-card:hover { border-color: var(--border-2); }
.home-card-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 28%, transparent);
  color: var(--c, var(--accent));
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
.home-card-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.85;
}
.home-card:hover .home-card-icon {
  background: color-mix(in srgb, var(--c, var(--accent)) 22%, transparent);
  border-color: color-mix(in srgb, var(--c, var(--accent)) 42%, transparent);
}
.home-card-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}
.more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
@media (max-width: 380px) {
  .home-card       { padding: 12px 6px 10px; border-radius: 16px; }
  .home-card-icon  { width: 50px; height: 50px; border-radius: 14px; }
  .home-card-label { font-size: 12px; }
  .more-grid       { gap: 10px; }
}

.streak-widget {
  display: flex;
  gap: 6px;
  margin: 2px 0 10px;
}
.streak-stat {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  display: flex; align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.streak-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.streak-lbl {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* ── Global search modal ───────────────────────────── */
.search-overlay { align-items: flex-start; padding-top: 12vh; }
.search-overlay.open { display: flex; }
.search-modal {
  width: 560px; max-width: 92vw;
  padding: 0;
  display: flex; flex-direction: column;
  max-height: 70vh;
  overflow: hidden;
}
.search-bar {
  display: flex; align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.search-bar-ico { color: var(--muted); flex-shrink: 0; }
.search-input {
  flex: 1;
  border: none; outline: none; background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  padding: 4px 0;
}
.search-input::placeholder { color: var(--muted-2); }
.search-close { flex-shrink: 0; }
.search-results {
  flex: 1; overflow-y: auto;
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.search-empty {
  color: var(--muted-2);
  text-align: center;
  padding: 36px 16px;
  font-size: 13px;
}
.search-result {
  display: flex; align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  transition: background .12s var(--ease);
}
.search-result:hover { background: var(--surface-2); }
.search-result-kind {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  min-width: 56px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-xs);
}
.search-result-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.search-result-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-sub {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 480px) {
  .search-overlay { padding-top: 8vh; }
  .search-modal   { max-height: 80vh; }
  .search-bar     { padding: 10px 12px; }
}

/* ── Easter egg: irem'e hoşgeldin overlay ───────────────
   Themed to match the rest of the app — frosted glass over a
   dimmed backdrop, accent-coloured card, theme tokens for text
   and surface. The hearts/emoji keep the personality. */
.irem-welcome-overlay {
  position: fixed; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  animation: iremFadeIn .3s ease-out;
  overflow: hidden;
  cursor: pointer;
}
.irem-welcome-overlay.closing { animation: iremFadeOut .35s ease-in forwards; }

@keyframes iremFadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes iremFadeOut { from { opacity: 1 } to { opacity: 0 } }

.irem-hearts {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.irem-heart {
  position: absolute;
  bottom: -10vh;
  animation-name: iremFloat;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
  user-select: none;
}
@keyframes iremFloat {
  0%   { transform: translateY(0) translateX(0)     rotate(0);    opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(-55vh) translateX(20px) rotate(15deg);  opacity: 1; }
  100% { transform: translateY(-110vh) translateX(-20px) rotate(-10deg); opacity: 0; }
}

.irem-welcome-card {
  position: relative;
  z-index: 1;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  max-width: 92vw;
  text-align: center;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-soft) inset;
  animation: iremPop .55s cubic-bezier(.22, 1.2, .36, 1) both;
  cursor: default;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .irem-welcome-card { background: var(--surface); border-color: var(--border-2); }
}
@keyframes iremPop {
  0%   { transform: scale(.6) rotate(-4deg); opacity: 0; }
  60%  { transform: scale(1.05) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.irem-welcome-emoji {
  font-size: 48px;
  margin-bottom: 8px;
  animation: iremBeat 1.2s ease-in-out infinite;
}
@keyframes iremBeat {
  0%, 100% { transform: scale(1); }
  20%      { transform: scale(1.15); }
  40%      { transform: scale(1); }
  60%      { transform: scale(1.1); }
}

.irem-welcome-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.2;
  margin-bottom: 8px;
}
.irem-welcome-sub {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 22px;
  font-weight: 500;
}
.irem-welcome-close {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius);
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: filter .15s var(--ease), transform .12s var(--ease);
  font-family: inherit;
}
.irem-welcome-close:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.irem-welcome-close:active { transform: translateY(0); }

@media (max-width: 480px) {
  .irem-welcome-card { padding: 26px 22px; border-radius: 20px; }
  .irem-welcome-emoji { font-size: 40px; }
  .irem-welcome-title { font-size: 22px; }
  .irem-welcome-sub { font-size: 14px; }
}
/* Mobile: sidebar collapses to a drawer accessible from a button */
@media all { /* mobile-first universal */
  .space-sidebar {
    width: 100%;
    height: auto;
    max-height: 30vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  main { flex-direction: column; }
}

/* ─── SIDEBAR ──────────────────────────────────────────── */
.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-header {
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sidebar-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--muted);
}

.robot-list { flex: 1; overflow-y: auto; padding: 6px 6px calc(24px + env(safe-area-inset-bottom, 0px)); }

/* ── Category groups in sidebar ── */
.cat-group { margin-bottom: 4px; }
.cat-header {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  transition: background .12s var(--ease), color .12s var(--ease);
  margin: 4px 0 2px;
}
.cat-header:hover { background: var(--surface-2); color: var(--text); }
.cat-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-count {
  background: var(--surface-3);
  color: var(--muted);
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0;
}
.cat-chev {
  display: inline-flex;
  color: var(--muted);
  transition: transform .15s var(--ease);
  width: 12px;
  margin-right: -2px;
}
.cat-chev svg { width: 11px; height: 11px; }
.cat-group.collapsed .cat-chev { transform: rotate(-90deg); }
.cat-group.collapsed .cat-items { display: none; }
.cat-items { padding: 0; }

.robot-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .12s var(--ease);
  user-select: none;
  margin-bottom: 1px;
}
.robot-item:hover  { background: var(--surface-2); }
.robot-item.active { background: var(--surface-3); }

.robot-avatar {
  width: 30px; height: 30px;
  border-radius: var(--radius);
  background: var(--surface-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.robot-item.active .robot-avatar { background: var(--accent); color: var(--on-accent); }
.robot-item.active .mtg-avatar   { color: var(--on-accent); }
.mtg-avatar svg { color: inherit; }

.robot-item-info { flex: 1; min-width: 0; }
.robot-item-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.robot-item.active .robot-item-name { color: var(--accent); font-weight: 600; }

.robot-item-count {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
}

/* ─── CONTENT ──────────────────────────────────────────── */
.content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 28px 32px calc(24px + env(safe-area-inset-bottom, 0px));
  /* Transparent so the body gradient (and any underlying frosted glass)
     reads through, instead of stamping a flat dark rectangle on top. */
  background: transparent;
}

/* Improve content padding on mobile */
@media (max-width: 600px) {
  .content {
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 480px) {
  .content {
    padding: 16px 12px calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%;
  color: var(--muted);
  gap: 16px;
  text-align: center;
  line-height: 1.7;
}
.empty-icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted-2);
}
.empty-icon svg { width: 28px; height: 28px; }

/* ─── ROBOT/TOPIC DETAIL HEADER ────────────────────────── */
.robot-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 26px;
  gap: 16px;
}
.robot-detail-name {
  font-size: 24px; font-weight: 700;
  letter-spacing: -.02em;
}
.robot-detail-desc {
  color: var(--muted); font-size: 13.5px; margin-top: 4px;
  line-height: 1.5;
}

.btn-group { display: flex; gap: 6px; flex-shrink: 0; }

/* ─── DETAIL SECTIONS ──────────────────────────────────── */
.dsection { margin-bottom: 32px; }
.dsection-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}
.dsection-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.count-pill {
  background: var(--surface-3);
  color: var(--muted);
  font-size: 10px;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.issues-pill { background: rgba(248,81,73,.12); color: var(--red); }

/* ─── INNER TABS ───────────────────────────────────────── */
.inner-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  width: fit-content;
}
.inner-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all .15s var(--ease);
  white-space: nowrap;
}
.inner-tab:hover  { background: var(--surface-2); color: var(--text); }
.inner-tab.active { background: var(--surface-3); color: var(--text); }

/* ─── TASKS ────────────────────────────────────────────── */
.task-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 7px;
  overflow: hidden;
  transition: border-color .2s var(--ease);
}
.task-item:hover { border-color: var(--border-2); }

.task-header {
  display: flex; align-items: center;
  padding: 12px 14px; gap: 11px;
  cursor: pointer; user-select: none;
}

.task-dot {
  width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
}
.task-dot.active   { background: var(--green); box-shadow: 0 0 0 3px rgba(63,185,80,.18); }
.task-dot.pending  { background: var(--orange); }
.task-dot.done     { background: var(--border-2); }

.task-title-text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.task-item.done .task-title-text {
  text-decoration: line-through;
  color: var(--muted);
  font-weight: 400;
}

.task-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.task-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.task-actions-row .btn-sm {
  padding: 2px 8px;
  font-size: 11px;
  gap: 4px;
  min-height: 22px;
  border-radius: var(--radius-xs);
}
.task-actions-row .btn-sm svg { width: 11px; height: 11px; }

.priority-tag, .status-tag, .severity-tag, .issue-status-tag {
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  flex-shrink: 0;
}
.priority-tag.critical { background: rgba(248,81,73,.15); color: var(--red); }
.priority-tag.high     { background: rgba(240,136,62,.15); color: var(--orange); }
.priority-tag.normal   { display: none; }

.status-tag.active  { background: rgba(63,185,80,.12); color: var(--green); }
.status-tag.pending { background: rgba(240,136,62,.12); color: var(--orange); }
.status-tag.done    { background: rgba(139,148,158,.1); color: var(--muted); }

.expand-chevron {
  color: var(--muted);
  transition: transform .2s var(--ease);
  flex-shrink: 0;
  display: inline-flex;
}
.task-item.expanded .expand-chevron { transform: rotate(180deg); }

.task-body { display: none; padding: 0 14px 14px 34px; }
.task-item.expanded .task-body { display: block; }
.task-body-inner {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.field-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--muted);
  margin-bottom: 7px;
}
.field-label + .field-label { margin-top: 14px; }

.notes-area {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  resize: vertical;
  min-height: 160px;
  line-height: 1.6;
  transition: border-color .15s var(--ease);
}
.notes-area:focus { outline: none; border-color: var(--accent); }

.task-actions {
  display: flex; gap: 6px;
  margin-top: 12px; flex-wrap: wrap;
}

/* ─── ISSUE ITEMS ──────────────────────────────────────── */
.issue-dot {
  width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
}
.issue-dot.open          { background: var(--red);    box-shadow: 0 0 0 3px rgba(248,81,73,.18); }
.issue-dot.investigating { background: var(--yellow); box-shadow: 0 0 0 3px rgba(227,179,65,.18); }
.issue-dot.resolved      { background: var(--border-2); }

.severity-tag.critical { background: rgba(248,81,73,.15); color: var(--red); }
.severity-tag.high     { background: rgba(240,136,62,.15); color: var(--orange); }
.severity-tag.medium   { background: rgba(227,179,65,.12); color: var(--yellow); }
.severity-tag.low      { background: rgba(139,148,158,.1); color: var(--muted); }

.issue-status-tag.open          { background: rgba(248,81,73,.12); color: var(--red); }
.issue-status-tag.investigating { background: rgba(227,179,65,.1);  color: var(--yellow); }
.issue-status-tag.resolved      { background: rgba(139,148,158,.1); color: var(--muted); }

.task-item.resolved .task-title-text { text-decoration: line-through; color: var(--muted); }

/* ─── NOTE COUNT BADGE ─────────────────────────────────── */
.nb-count {
  font-size: 10px;
  background: var(--accent-soft2);
  color: var(--accent);
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ─── NOTEBOOK ─────────────────────────────────────────── */
.notebook {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.nb-entries {
  max-height: 340px;
  overflow-y: auto;
  padding: 4px 0;
}
.nb-empty {
  padding: 18px 16px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.nb-entry {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  transition: background .12s var(--ease);
}
.nb-entry:last-child { border-bottom: none; }
.nb-entry:hover      { background: var(--surface-3); }

.nb-entry-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.nb-entry-time {
  font-size: 11px;
  color: var(--muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .3px;
}
.nb-delete-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-xs);
  opacity: 0;
  transition: all .15s var(--ease);
  display: inline-flex; align-items: center; justify-content: center;
}
.nb-entry:hover .nb-delete-btn { opacity: 1; }
.nb-delete-btn:hover { color: var(--red); background: rgba(248,81,73,.1); }

.nb-entry-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.nb-edit-btn,
.nb-save-btn,
.nb-cancel-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  transition: all .15s var(--ease);
}

.nb-edit-btn:hover,
.nb-save-btn:hover,
.nb-cancel-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--surface-3);
}

.nb-edit-input {
  width: 100%;
  min-height: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  resize: vertical;
  line-height: 1.6;
}

.nb-entry-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text);
  white-space: normal;
  word-break: break-word;
}
.nb-entry-text code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.nb-entry-text a { color: var(--accent); text-decoration: underline; word-break: break-all; }
.nb-entry-text strong { font-weight: 700; color: var(--text); }
.nb-entry-text em     { font-style: italic; }
.nb-entry-text .md-list { margin: 6px 0; padding-left: 20px; }
.nb-entry-text .md-list li { margin: 2px 0; }
.nb-entry-text .md-check {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-left: -18px;
}
.nb-entry-text .md-check-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  border-radius: 4px;
  border: 1px solid var(--border-2);
  color: var(--accent);
  font-size: 10px;
  line-height: 1;
  flex: 0 0 auto;
}
.nb-entry-text .md-check.checked .md-check-box {
  border-color: rgba(96, 165, 250, .45);
  background: rgba(96, 165, 250, .14);
}
.md-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.md-table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  font-size: 12.5px;
}
.md-table th,
.md-table td {
  padding: 8px 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.md-table th:last-child,
.md-table td:last-child { border-right: none; }
.md-table tbody tr:last-child td { border-bottom: none; }
.md-table th {
  color: var(--text);
  background: rgba(148, 163, 184, .10);
  font-weight: 700;
}
.md-table td { color: var(--muted); }

.note-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.note-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .24);
  background: rgba(255, 255, 255, .06);
  color: var(--muted);
  font: 600 11.5px/1 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease), transform .14s var(--ease);
}
.note-tool-btn svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}
.note-tool-btn span {
  line-height: 1;
}
.note-tool-btn:hover {
  transform: translateY(-1px);
  background: rgba(96, 165, 250, .12);
  border-color: rgba(96, 165, 250, .30);
  color: var(--accent);
}

.nb-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  align-items: flex-end;
}
.nb-compose {
  flex: 1;
  min-width: 0;
}
.nb-compose .note-tools { margin-bottom: 7px; }
.nb-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  resize: none;
  line-height: 1.5;
  transition: border-color .15s var(--ease);
}
.nb-input:focus { outline: none; border-color: var(--accent); }

.nb-add-btn {
  padding: 7px 14px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s var(--ease);
  align-self: flex-end;
}
.nb-add-btn:hover { background: var(--accent-h); }

/* ─── BRAINSTORM ───────────────────────────────────────── */
.brainstorm-wrap { position: relative; }
.brainstorm-area {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 320px;
  line-height: 1.75;
  transition: border-color .15s var(--ease);
}
.brainstorm-area:focus { outline: none; border-color: var(--accent); }

.save-indicator {
  position: absolute;
  bottom: 10px; right: 12px;
  font-size: 11px; color: var(--green);
  opacity: 0; transition: opacity .3s var(--ease);
}
.save-indicator.show { opacity: 1; }

/* ─── BUTTONS ──────────────────────────────────────────── */
.btn-add {
  padding: 5px 10px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background .15s var(--ease);
}
.btn-add:hover { background: var(--accent-h); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .15s var(--ease), transform .1s var(--ease);
  white-space: nowrap;
}
.btn-primary:hover  { background: var(--accent-h); }
.btn-primary:active { transform: translateY(1px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  transition: all .15s var(--ease);
}
.btn-ghost:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-2); }

.btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all .15s var(--ease);
}
.btn-sm:hover         { background: var(--surface-3); color: var(--text); border-color: var(--border-2); }
.btn-sm.danger:hover  { border-color: var(--red);   color: var(--red);   background: rgba(248,81,73,.08); }
.btn-sm.success:hover { border-color: var(--green); color: var(--green); background: rgba(63,185,80,.08); }
.btn-sm svg { color: inherit; }

/* ─── MODALS ───────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(8,11,18,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  /* overflow-y: auto + margin:auto on the .modal child = the modal stays
     centered when its content fits the viewport, and the overlay itself
     becomes scrollable when the form is too tall (mobile, big forms). */
  overflow-y: auto;
  /* Dialogs must sit above every transient layer they can be opened over:
     backup popover (500), space menu (900), quick-notes (1300), the mobile
     bottom-nav pill (3000) — but below full-screen takeovers (welcome /
     photo lightbox at 9999). */
  z-index: 4000;
  animation: fadeIn .15s var(--ease);
  padding: 70px 16px 24px;
}
.modal-overlay.open { display: flex; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.96) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  width: 460px;
  max-width: calc(100vw - 40px);
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-lg);
  animation: scaleIn .18s var(--ease);
  overflow: visible;
  /* margin:auto pairs with the overlay's overflow-y:auto — keeps the
     modal vertically centered while it fits, then naturally yields to
     scroll when the form is taller than the viewport. */
  margin: auto;
}

/* ─── BUDGIE SPEAKER ────────────────────────────────────
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .modal { background: var(--surface); border-color: var(--border-2); }
}

/* Improve modal for mobile */
@media (max-width: 480px) {
  .modal {
    padding: 20px 16px;
    width: 100%;
    max-width: calc(100vw - 20px);
    gap: 12px;
  }
  .modal-header h3 {
    font-size: 16px;
  }
}

.modal-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.modal-header h3 {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius-xs);
  transition: all .15s var(--ease);
}
.modal-close:hover { color: var(--text); background: var(--surface-2); }

/* Improve close button for mobile */
@media (max-width: 480px) {
  .modal-close {
    width: 36px;
    height: 36px;
  }
}

.modal label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted);
}

.modal input,
.modal textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s var(--ease);
}
.modal input:focus,
.modal textarea:focus { outline: none; border-color: var(--accent); }
.modal textarea { resize: vertical; min-height: 120px; line-height: 1.5; }

/* Improve form inputs on mobile */
@media (max-width: 480px) {
  .modal input,
  .modal textarea {
    padding: 12px;
    font-size: 16px;
    line-height: 1.5;
  }
  .modal textarea {
    min-height: 140px;
  }
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

/* Improve button sizing on mobile */
@media (max-width: 480px) {
  .btn-primary,
  .btn-ghost {
    padding: 10px 16px;
    font-size: 14px;
    min-height: 40px;
  }
  .modal-actions {
    flex-direction: column;
    gap: 10px;
  }
  .modal-actions .btn-primary,
  .modal-actions .btn-ghost {
    width: 100%;
  }
}

/* ─── RADIO GROUP ──────────────────────────────────────── */
.radio-group { display: flex; gap: 6px; flex-wrap: wrap; }
.radio-btn {
  padding: 5px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  transition: all .15s var(--ease);
  user-select: none;
}
.radio-btn:hover  { border-color: var(--accent); color: var(--text); }
.radio-btn.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Improve radio buttons on mobile */
@media (max-width: 480px) {
  .radio-btn {
    padding: 8px 14px;
    font-size: 13px;
    min-height: 36px;
  }
}

/* ─── FIELD VISITS ─────────────────────────────────────── */
.fv-container {
  padding: 28px 32px;
  margin: 0;
}
.fv-header {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 26px; gap: 16px;
}
.fv-header h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.fv-subtitle { color: var(--muted); font-size: 13.5px; margin-top: 4px; }

/* All-Tasks header filter row (Only-me toggle) */
.at-filter-row { display: flex; align-items: center; gap: 12px; }
.at-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.at-filter-toggle:hover { background: var(--surface-2); border-color: var(--border-2); }
.at-filter-toggle input { accent-color: var(--accent); cursor: pointer; }
.at-filter-toggle:has(input:checked) {
  background: var(--accent-soft, rgba(59, 130, 246, .14));
  border-color: var(--accent);
  color: var(--accent);
}

/* Inbox sections */
.inbox-section + .inbox-section { margin-top: 18px; }
.inbox-section-head {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 600;
  padding: 0 4px 6px;
}

/* Visit row — same compact pattern as link-row / meeting list items
   so all feature lists share one design language. */
.visit-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 6px;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.visit-row:hover { background: var(--surface-2); border-color: var(--border-2); }

.visit-row-main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.visit-row-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
}
.visit-row-icon svg { width: 14px; height: 14px; }
.visit-row-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.visit-row-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  word-break: break-word;
}
.visit-row-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}
.visit-row-date { color: var(--accent); font-weight: 500; }
.visit-row-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.visit-row-tag svg { width: 11px; height: 11px; }
.visit-row-notes {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
  white-space: pre-wrap;
}
.visit-row-actions {
  display: flex; gap: 6px;
  align-items: flex-start;
  flex-shrink: 0;
}

/* visit-robot-tag is reused in meeting-meta; keep its styles. */
.visit-robot-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px; padding: 2px 9px;
  border-radius: 4px; font-weight: 500;
}
.visit-robot-tag svg { width: 12px; height: 12px; }

.days-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; padding: 2px 8px;
  border-radius: 999px; font-weight: 600;
}
.days-badge.future { background: rgba(63,185,80,.1);  color: var(--green); }
.days-badge.soon   { background: rgba(240,136,62,.12); color: var(--orange); }
.days-badge.today  { background: rgba(163,113,247,.15); color: var(--purple); }
.days-badge.past   { background: rgba(139,148,158,.1); color: var(--muted); }

.empty-visits {
  text-align: center; padding: 60px 20px;
  color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.empty-visits .empty-icon { width: 56px; height: 56px; }

/* ─── MEETINGS ─────────────────────────────────────────── */
.meeting-meta {
  display: flex; flex-wrap: wrap;
  gap: 12px; align-items: center;
  margin-top: 8px; font-size: 12.5px; color: var(--muted);
}
.meeting-meta > span {
  display: inline-flex; align-items: center; gap: 5px;
}
.meeting-meta svg { color: var(--muted-2); }
.meeting-meta .visit-robot-tag { font-size: 11.5px; }
.meeting-meta .visit-robot-tag svg { color: inherit; }

.action-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 6px;
  transition: opacity .2s var(--ease);
}
.action-item.done { opacity: .55; }
.action-item.done .action-text { text-decoration: line-through; }

.action-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-2);
  background: transparent;
  color: var(--green);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .15s var(--ease);
}
.action-check.checked {
  border-color: var(--green);
  background: rgba(63,185,80,.2);
}
.action-check:hover { border-color: var(--green); }

.action-text { flex: 1; font-size: 13.5px; color: var(--text); }

/* Action items "add new" row — lighter than .nb-input-row, no
   framing background or border, just an inline input + ghost button. */
.action-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 10px;
}
.action-input {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  transition: border-color .15s var(--ease);
}
.action-input::placeholder { color: var(--muted); }
.action-input:focus { outline: none; border-color: var(--accent); }
.action-add-btn {
  padding: 0 14px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.action-add-btn:hover { background: var(--surface-2); border-color: var(--border-2); }

/* ─── SCROLLBAR ────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* ─── RESPONSIVE / MOBILE ──────────────────────────────── */
@media all { /* mobile-first universal */
  .header-right { gap: 6px; }
  .lang-switcher { padding: 1px; }
  .lang-btn { padding: 3px 6px; font-size: 10px; }
  .icon-btn { width: 30px; height: 30px; }
  .backup-btn { padding: 4px 10px 4px 8px; }
  .backup-label { display: none; }

  /* Sidebars stack on top, content below; only one visible at a time via tab change works */
  .section.active { flex-direction: column; }
  .sidebar {
    width: 100%;
    height: auto;
    max-height: 38vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-header { padding: 10px 14px; }
  .robot-list { max-height: calc(38vh - 50px); }

  .content { padding: 18px 14px; }
  .robot-detail-header { flex-direction: column; gap: 10px; align-items: stretch; }
  .robot-detail-name { font-size: 20px; }
  .btn-group { margin-left: 0; }

  /* Modals stay centered at every viewport size; their height is left
     When the form is taller than the viewport the overlay itself
     scrolls (overflow-y: auto + margin:auto on the child). */

  /* Backup popover full-width handled in main .backup-popover @media block above */

  /* Calendar — single column, panel below grid */
  .cal-body { grid-template-columns: 1fr; }
  .cal-day-panel { max-height: 50vh; }
  .cal-day { min-height: 56px; padding: 5px 6px; }
  .cal-day-num { font-size: 11.5px; }
  .cal-day-events { font-size: 9.5px; }
  .cal-header h2 { font-size: 16px; }

  /* Field visits / All tasks header stacked */
  .fv-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .fv-container { padding: 18px 14px; }
  .visit-row { padding: 10px; }
  .visit-row-actions { flex-direction: column; }

}

/* Touch-friendly hit areas */
@media (pointer: coarse) {
  .nb-delete-btn, .att-del { opacity: 1; }
  .robot-item { padding: 11px 10px; }
  .task-header { padding: 13px 14px; }
  .btn-sm { padding: 6px 12px; }
}

/* Task header: tighter on narrow screens. Tags can't stay inline on
   phones — when the chip strip is wider than the leftover space the
   title gets squeezed to 0px and each letter wraps to its own line.
   Wrap the row so tags drop under the title on narrow screens. */
@media (max-width: 640px) {
  .task-title-text { font-size: 13.5px; }
  .task-actions-row .btn-sm { flex: 0 1 auto; }
  .task-header { flex-wrap: wrap; row-gap: 6px; }
  .task-title-text {
    flex: 1 1 100%;
    min-width: 0;
  }
  .task-tags {
    margin-left: 28px;     /* line up with title (after dot + gap) */
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* ─── SUBTASKS ─────────────────────────────────────────── */
.sub-section {
  margin-bottom: 12px;
  padding-bottom: 10px;
}
.sub-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.sub-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted);
}
.sub-count {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
}
.sub-list {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.subtask {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  transition: background .12s var(--ease);
}
.subtask:hover { background: var(--surface-2); }
.subtask.done .subtask-text { text-decoration: line-through; color: var(--muted); }
.subtask-main {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
}
.subtask-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.6px solid var(--border-2);
  background: transparent;
  color: var(--green);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .15s var(--ease);
  padding: 0;
}
.subtask-check:hover { border-color: var(--green); }
.subtask-check.checked {
  background: rgba(34,197,94,.18);
  border-color: var(--green);
}
.subtask-text { flex: 1; font-size: 13px; color: var(--text); }
.subtask-note {
  width: calc(100% - 34px);
  margin-left: 34px;
  min-height: 48px;
  max-height: 132px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.45;
  resize: none;
  overflow-y: auto;
  scrollbar-width: thin;
}
.subtask-note:placeholder-shown {
  min-height: 44px;
}
.subtask-note:focus {
  outline: none;
  border-color: rgba(99, 178, 255, .36);
  background: rgba(99, 178, 255, .06);
}
.subtask-del {
  background: transparent; border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  opacity: 0;
  transition: all .15s var(--ease);
  display: inline-flex; align-items: center; justify-content: center;
}
.subtask:hover .subtask-del { opacity: 1; }
.subtask-del:hover { color: var(--red); background: rgba(239,68,68,.1); }

.sub-add-row { display: flex; gap: 6px; }
.sub-add-input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  transition: border-color .15s var(--ease);
}
.sub-add-input:focus { outline: none; border-color: var(--accent); }
.sub-add-input::placeholder { color: var(--muted-2); }
.sub-add-btn {
  flex-shrink: 0;
  width: 34px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: filter .15s var(--ease);
}
.sub-add-btn:hover  { filter: brightness(1.05); }
.sub-add-btn:active { filter: brightness(.95); }

/* ─── ATTACHMENTS ──────────────────────────────────────── */
.att-section {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.att-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.att-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.att-total {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.att-manage-btn {
  margin: -2px 0 9px;
  padding: 5px 8px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: 11.5px;
  cursor: pointer;
}
.att-manage-btn:hover {
  color: var(--text);
  border-color: var(--border-2);
  background: rgba(255,255,255,.05);
}
.att-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .55px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.att-label svg { color: var(--muted); width: 13px; height: 13px; }
.att-add-btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 10px;
  cursor: pointer;
  transition: color .12s var(--ease), border-color .12s var(--ease), background .12s var(--ease);
}
.att-add-btn:hover {
  color: var(--text);
  border-color: var(--border-2);
  background: var(--surface-3, var(--surface));
}
.att-add-btn:active { transform: none; }
.att-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.att-chip {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
  transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.att-chip:hover {
  border-color: var(--border-2);
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
  transform: translateY(-1px);
}
.att-chip .att-ico {
  display: inline-flex;
  color: var(--accent);
  flex-shrink: 0;
}
.att-chip .att-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  cursor: pointer;
  min-width: 0;
}
.att-chip .att-name:hover { color: var(--accent); }
.att-chip .att-size {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}
.att-del {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.att-del:hover {
  background: rgba(255,255,255,.08);
  color: var(--red);
}

.att-chip .att-size {
  color: var(--muted-2);
  font-size: 10.5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  flex-shrink: 0;
}
.att-chip .att-del {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all .15s var(--ease);
}
.att-chip:hover .att-del { opacity: 1; }
.att-chip .att-del:hover {
  color: var(--red);
  background: rgba(239,68,68,.1);
}

/* In visit cards, attachments come after notes — give them spacing */
.visit-row-body .att-section { margin-top: 10px; padding-top: 10px; }

/* ── Photo Gallery ─────────────────────────────────────── */
.photo-section {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 7px;
  margin-top: 4px;
}
.photo-thumb-wrap {
  position: relative;
  border-radius: var(--radius-xs);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--surface-3, var(--surface));
  cursor: pointer;
}
.photo-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.photo-thumb-wrap:hover .photo-thumb { transform: scale(1.04); opacity: .88; }
.photo-thumb-del {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  border-radius: 999px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s var(--ease), background .15s var(--ease);
  padding: 0;
}
.photo-thumb-wrap:hover .photo-thumb-del { opacity: 1; }
.photo-thumb-del:hover { background: rgba(239,68,68,.82); }

/* Lightbox */
#photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-lb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.84);
  cursor: pointer;
}
.photo-lb-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-lb-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  display: block;
}
.photo-lb-close {
  position: absolute;
  top: -14px;
  right: -14px;
  background: rgba(255,255,255,.18);
  color: #fff;
  border: none;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background .15s var(--ease);
  padding: 0;
}
.photo-lb-close:hover { background: rgba(255,255,255,.3); }

/* ─── ALL TASKS ────────────────────────────────────────── */
/* Padding-bottom so the last item can scroll above the floating pill +
   home-indicator safe area on every platform. */
#all-tasks.active {
  display: block;
  overflow-y: auto;
  /* Bar clearance lives on .fv-container — don't double-pad here. */
}

.at-filter-btn {
  padding: 5px 14px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.at-filter-btn:hover  { color: var(--text); }
.at-filter-btn.active { background: var(--accent-soft); color: var(--accent); }

.at-group { margin-bottom: 24px; }
.at-group-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .9px;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}

.at-task {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 5px;
  transition: border-color .15s var(--ease);
}
.at-task:hover { border-color: var(--border-2); }
.at-task.done { opacity: .5; }
.at-task.done .at-task-title { text-decoration: line-through; }
.at-task-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.at-task-dot.active   { background: var(--green); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.at-task-dot.pending  { background: var(--orange); }
.at-task-dot.done     { background: var(--border-2); }
.at-task-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.at-task-project {
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.at-task-prio {
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  flex-shrink: 0;
}
.at-task-prio.high     { background: rgba(245,158,11,.15); color: var(--orange); }
.at-task-prio.critical { background: rgba(239,68,68,.15); color: var(--red); }

@media (max-width: 760px) {
  .at-task {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 7px 8px;
    padding: 10px 12px;
  }

  .at-task-dot {
    margin-top: 6px;
  }

  .at-task-title {
    flex: 1 1 calc(100% - 18px);
  }

  .at-task .task-label-chip,
  .at-task .task-due,
  .at-task .at-task-prio,
  .at-task .at-task-project {
    max-width: calc(100% - 18px);
    margin-left: 18px;
  }

  .at-task .task-label-chip + .task-due,
  .at-task .task-label-chip + .at-task-prio,
  .at-task .task-due + .at-task-prio,
  .at-task .at-task-prio + .at-task-project {
    margin-left: 0;
  }
}

/* ─── CALENDAR ─────────────────────────────────────────── */
#calendar.active { display: block; overflow: hidden; }

.cal-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  gap: 16px;
}

.cal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cal-header h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  flex: 1;
  text-align: left;
  margin: 0 8px;
}
.cal-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s var(--ease);
}
.cal-nav:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
.cal-today-btn { padding: 6px 14px; font-size: 12.5px; }
.cal-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12.5px;
}
.cal-export-btn svg { flex-shrink: 0; }

.cal-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.cal-grid {
  display: grid;
  /* minmax(0, 1fr) prevents long event labels from blowing up column width
     and forcing the whole grid to scroll horizontally. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  /* DOW headers stay compact, every day row is an equal share of the
     remaining height. Without this an old `auto 1fr` rule (left over from
     the week view) was giving the first day row all the leftover space
     and squashing every later row to its min-height. */
  grid-template-rows: auto;
  grid-auto-rows: 1fr;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  overflow: auto;
}

.cal-dow {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  text-align: center;
  padding: 4px 0;
  grid-row: 1;
}

/* Compact month-grid day cell — date number on top, up to 3 thin colored
   bars at the bottom indicating event types for that day. Tap to expand
   the day panel below. */
.cal-day {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 6px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 56px;
  transition: all .12s var(--ease);
  position: relative;
}
.cal-day:hover     { border-color: var(--border-2); background: var(--surface); }
.cal-day.other-mo  { opacity: .35; }
.cal-day.today .cal-day-num {
  background: var(--text);
  color: var(--bg);
  border-radius: 999px;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.cal-day.selected  { border-color: var(--text); background: var(--surface); }

.cal-bars {
  display: flex; flex-direction: column;
  gap: 2px;
  width: 80%;
  min-height: 8px;
}
.cal-bar {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.cal-bar.meeting { background: var(--accent); }
.cal-bar.task    { background: var(--green); }
.cal-bar.visit   { background: var(--orange); }
.cal-bar.event   { background: var(--purple); }

.cal-day-num {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.cal-day-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--text);
  overflow: hidden;
  flex: 1;
}
.cal-day-event {
  display: block;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .08);
  line-height: 1.35;
  cursor: pointer;
  color: var(--text);
}
.cal-day-event-label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cal-day-event.meeting { background: var(--accent-soft); color: var(--accent); }
.cal-day-event.visit   { background: var(--surface-3); color: var(--muted); border: 1px dashed var(--border-2); }
.cal-day-event.task    { background: rgba(63,185,80,.10);  color: var(--green); }
.cal-day-event.event   { background: rgba(163,113,247,.14); color: var(--purple); }
.cal-day-event[data-mode="daily"] { border-left: 2px solid var(--muted); padding-left: 3px; }
.cal-day-event.cal-day-event-more {
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  padding: 0 4px;
  cursor: default;
}
.cal-day-event-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

.cal-day-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cal-day-empty {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 32px 0;
}
.cal-day-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.cal-day-title {
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
}
.cal-add-event-btn {
  font-size: 12px;
  padding: 5px 10px;
}
.cal-event-item {
  position: relative;
  padding-right: 28px;
}
.cal-event-notes {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
.cal-event-del {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  border: none; background: transparent;
  color: var(--muted-2);
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 16px; line-height: 1;
}
.cal-event-del:hover { background: var(--surface-2); color: var(--red); }
.cal-day-section-label {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .9px;
  color: var(--muted);
  margin-bottom: 6px;
}
.cal-day-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12.5px;
  margin-bottom: 5px;
}
.cal-day-item .at-task-project { display: inline-block; margin-right: 6px; }

.cal-notes {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 200px;
  line-height: 1.55;
  transition: border-color .15s var(--ease);
}
.cal-notes:focus { outline: none; border-color: var(--accent); }

/* Section-level header used by Meetings & Journal so they match
   the Reviews/Links header pattern even though their bodies are
   master-detail layouts, not flat lists. */
.section > .fv-header.section-head-pad {
  padding: 28px 32px 0;
  margin-bottom: 18px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .section > .fv-header.section-head-pad { padding: 18px 18px 0; margin-bottom: 14px; }
}

/* ─── Calendar pill click affordance + flash highlight ──── */
.cal-day-event[data-go-meeting],
.cal-day-event[data-go-visit]   { cursor: pointer; }
.cal-day-event[data-go-meeting]:hover,
.cal-day-event[data-go-visit]:hover { filter: brightness(1.25); }
.cal-day-item.clickable {
  cursor: pointer;
  border-radius: 4px;
  transition: background .15s var(--ease);
}
.cal-day-item.clickable:hover { background: var(--surface-2); }
@keyframes karta-flash {
  0%   { box-shadow: 0 0 0 0 rgba(228,228,231,.55); }
  50%  { box-shadow: 0 0 0 6px rgba(228,228,231,.15); }
  100% { box-shadow: 0 0 0 0 rgba(228,228,231,0); }
}
.visit-row.flash { animation: karta-flash 1.4s ease-out; }


/* ─── FLOATING PILL NAV (mobile) ─── */
.bnav-dock {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 90;
  pointer-events: none; /* let internal hit areas opt in */
}
.bnav-dock > * { pointer-events: auto; }
.bottom-nav {
  display: flex;
  align-items: stretch;
  height: 60px;
  padding: 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(15, 20, 30, .14), 0 2px 6px rgba(15, 20, 30, .06);
}
.bnav-fab {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .35), 0 3px 8px rgba(15, 20, 30, .12);
  transition: transform .12s var(--ease), background .12s var(--ease);
}
.bnav-fab:hover  { background: var(--accent-h); }
.bnav-fab:active { transform: scale(.94); }
.bnav-btn {
  position: relative;
  display: inline-flex;
  width: 52px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  margin: 0 2px;
  background: transparent;
  border: none;
  border-radius: 16px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
  transition: color .15s var(--ease), background .15s var(--ease);
}
.bnav-btn span { display: inline; }
.bnav-btn svg  { width: 24px; height: 24px; stroke-width: 1.7; }
.bnav-btn:hover { color: var(--text); }
/* Old top-bar underline removed — the new pill uses a soft circular
   highlight behind the icon (see the rule further down) for the
   active state. */
.bnav-btn.active { color: var(--accent); background: transparent; }
.bnav-btn-icon-wrap { position: relative; display: inline-flex; font-style: normal; }
.bnav-badge {
  position: absolute;
  top: -4px; right: -8px;
  min-width: 16px; height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ec4899;
  color: #fff;
  font-size: 10px; font-weight: 700;
  line-height: 16px;
  text-align: center;
  display: none;
}
.bnav-badge.has { display: inline-block; }

@media (max-width: 480px) {
  .bottom-nav { height: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .bnav-btn   { padding: 4px 2px; font-size: 10.5px; }
  .bnav-btn svg { width: 23px; height: 23px; }
}
@media (max-width: 380px) {
  .bnav-btn > span:not(.bnav-badge) { display: none; }
}

.space-drawer-backdrop { display: none; }

/* Master-detail back button — hidden on desktop, re-shown inside the mobile @media block */
.robot-detail-back { display: none; }

/* ─── "MORE" PAGE ──────────────────────────────────────── */
.more-page {
  width: 100%;
  max-width: 720px;
  margin: 0;
  padding: 28px 32px;
}
@media all { /* mobile-first universal */
  /* Add bottom-nav clearance so the version line at the foot of the page
     isn't trapped under the fixed nav. */
  .more-page { max-width: 560px; margin: 0 auto; padding: 18px 14px 96px; }
}
.more-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
}
@media all { /* mobile-first universal */
  .more-card-list { grid-template-columns: 1fr; }
}
.more-card {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.more-card:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
}
.more-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}
.more-card-icon svg { width: 14px; height: 14px; }
.more-card-label {
  flex: 1;
  font-weight: 500;
  letter-spacing: 0;
}
.more-card-arrow {
  color: var(--muted-2);
  font-size: 13px;
  line-height: 1;
}
.more-card-static { cursor: default; }
.more-card-static:hover { border-color: var(--border); background: var(--surface); }

/* Light/Dark theme toggle (Settings → Theme) */
.theme-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
  margin-bottom: 14px;
}
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.theme-toggle-btn:hover { color: var(--text); }
.theme-toggle-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}


.more-version {
  margin: 22px 4px 8px;
  font-size: 11px;
  letter-spacing: .4px;
  color: var(--muted-2);
  text-align: center;
  user-select: none;
}
.more-card-actions {
  display: flex;
  gap: 3px;
}
.more-card-actions .lang-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10.5px;
  color: var(--muted);
  min-width: 30px;
  transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}
.more-card-actions .lang-btn:hover {
  border-color: var(--accent);
}
.more-card-actions .lang-btn.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.more-card-actions .lang-btn.active:hover {
  background: var(--accent);
}
.more-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 0;
}
.more-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 16px 4px 8px;
}
.more-section-title:first-child { padding-top: 4px; }
.more-section-title[data-i18n="more.section.settings"] {
  padding-top: 4px;
}

/* ─── MOBILE: bottom nav + collapsed header ───────────── */
@media all { /* mobile-first universal */
  body.space-drawer-open { overflow: hidden; }

  .space-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .28);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s var(--ease);
    z-index: 74;
  }
  body.space-drawer-open .space-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .space-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(340px, 88vw);
    height: 100dvh;
    max-height: none;
    background: var(--surface);
    border-right: 1px solid var(--border);
    border-bottom: none;
    box-shadow: var(--shadow-lg);
    transform: translateX(-104%);
    transition: transform .22s var(--ease);
    z-index: 80;
  }
  body.space-drawer-open .space-sidebar { transform: translateX(0); }

  .space-sidebar-header {
    min-height: 56px;
    padding: 0 14px;
  }
  .space-list {
    padding: 8px 10px calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .space-add-btn,
  .space-more-btn,
  .space-sub-add-btn {
    opacity: 1;
  }

  main {
    flex-direction: row;
    padding-bottom: 0;
  }

  .bnav-btn span { display: none; }

  /* Collapse header right-side controls — these live in bottom nav / More now */
  header .cross-nav   { display: none; }
  header .settings-nav-btn { display: none; }
  header .header-right { display: none; }

  /* "More" section stays scrollable above the bottom nav */
  #more.section.active,
  #settings.section.active { display: block; overflow-y: auto; }

  /* On mobile the calendar becomes a single vertical scroll: month grid first,
     then the selected-day panel below. The `1fr 320px` desktop layout would
     squash both into a fixed viewport-height area, so we let #calendar itself
     scroll instead. */
  #calendar.active { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .cal-container   { height: auto; padding: 14px; gap: 12px; }
  .cal-body        { display: flex; flex-direction: column; gap: 12px; flex: none; min-height: 0; }

.draft-content textarea {
  width: 100%;
  height: 200px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px;
  resize: vertical;
  outline: none;
}

.draft-content textarea::placeholder {
  color: var(--muted);
}

.draft-content textarea:focus {
  border-color: var(--accent);
}
  /* Compact month grid stays 7 columns on mobile — cells just shrink.
     Bars (no labels) make this readable even on narrow screens. */
  .cal-grid    { padding: 8px; gap: 4px; grid-auto-rows: minmax(54px, auto); }
  .cal-day     { min-height: 54px; padding: 6px 4px 5px; }
  .cal-day-num { font-size: 13px; }
  .cal-day.today .cal-day-num { width: 24px; height: 24px; font-size: 12.5px; }
  .cal-day-panel   { max-height: none; }

  /* Mobile master-detail: when a project is selected, hide the project list and
     give the detail content the full screen. Re-show via the in-detail "back" button. */
  #robots.section[data-detail-open="true"] .sidebar       { display: none; }
  #robots.section[data-detail-open="true"] .content       { padding: 14px 14px 18px; }

  /* When no project is selected, give the project list the full screen instead
     of cramming it into ~30vh and showing a redundant "select a project" empty
     state below it. */
  #robots.section:not([data-detail-open="true"]) .sidebar {
    max-height: none;
    height: 100%;
    flex: 1;
    border-bottom: none;
  }
  #robots.section:not([data-detail-open="true"]) .robot-list {
    max-height: none;
    height: calc(100% - 50px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #robots.section:not([data-detail-open="true"]) .content { display: none; }
  .robot-detail-back {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 32px; height: 32px;
    margin-right: 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
  }
  .robot-detail-back:hover { background: var(--surface-2); color: var(--text); }

  /* Improve bottom nav button sizing on smaller phones */
  @media (max-width: 480px) {
    .bnav-btn {
      min-height: 56px;
      padding: 8px 4px 6px;
      font-size: 11px;
    }
    .bnav-btn svg { width: 20px; height: 20px; }
  }
}

/* ── Master-detail for Meetings / Journal / Reviews ──
   These sections used to live inside Spaces (so the in-section sidebar was
   hidden). Now they're global, so the list IS the primary view. */
#meetings.section > .sidebar { display: flex !important; }

/* Mobile-first stacked layout + master-detail toggle */
#meetings.section { flex-direction: column; }
#meetings.section > .sidebar {
  width: 100%; flex: 1; min-height: 0;
  border-right: none; border-bottom: 1px solid var(--border);
  max-height: none;
}
#meetings.section > .content { flex: 1; min-height: 0; }
#meetings.section[data-detail-open="true"] > .sidebar { display: none !important; }
#meetings.section:not([data-detail-open="true"]) > .content { display: none; }

#reviews[data-detail-open="true"] .reviews-list  { display: none; }
#reviews:not([data-detail-open="true"]) .reviews-editor { display: none; }

/* Detail back button — common to all three */
.md-back-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  margin-right: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}
.md-back-btn:hover { background: var(--surface-2); color: var(--text); }

/* Compact detail header for master-detail pages (Meetings/etc) */
.md-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.md-detail-title {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-detail-actions {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.md-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 16px;
  padding-left: 42px;
  font-size: 12px;
  color: var(--muted);
}
.md-detail-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.md-detail-meta svg { color: var(--muted-2); }
@media (max-width: 480px) {
  .md-detail-meta { padding-left: 0; }
}

/* ═══════════════════════════════════════════════════════════
   DENSITY PASS — tighter spacing, smaller radii, snappier UI
   Single-block override; safe to tune or remove together.
   ═══════════════════════════════════════════════════════════ */
:root {
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    8px;
  --radius-md: 10px;
  --radius-lg: 12px;
}
body { font-size: 13px; }

/* Header: shorter, tighter spacing */
.app-header { padding: 0 14px; }
.app-title  { font-size: 17px; }

/* Buttons: snappier */
.btn-sm { padding: 4px 9px; font-size: 12px; }

/* Sidebar — denser tree */
.space-header   { padding: 4px 7px; gap: 5px; font-size: 12.5px; }
.space-item     { padding: 4px 9px; gap: 7px; font-size: 12.5px; }
.space-items    { padding-left: 5px; }
.space-subheader{ padding: 3px 9px; gap: 6px; }
.space-subitems .space-item { padding: 3px 8px; font-size: 12px; }
.space-empty    { padding: 4px 10px; font-size: 11px; }

/* Tasks — tighter rows + cards */
.task-item   { margin-bottom: 5px; }
.task-header { padding: 9px 12px; gap: 9px; }
.task-title-text { font-size: 13.5px; line-height: 1.35; }
.task-header-actions .btn-sm { padding: 4px 8px; }
.priority-tag, .status-tag, .severity-tag, .issue-status-tag {
  font-size: 9px; padding: 2px 6px; letter-spacing: .4px;
}

/* Subtasks compactness */
.subtask        { padding: 8px 9px; gap: 8px; }
.subtask-main   { gap: 8px; }
.subtask-text   { font-size: 12.5px; }
.subtask-note   { font-size: 12.5px; padding: 9px 11px; min-height: 46px; max-height: 132px; }
.sub-section    { margin-bottom: 9px; padding-bottom: 7px; }
.sub-add-input  { padding: 5px 9px; font-size: 12.5px; }
.sub-list       { gap: 6px; margin-bottom: 7px; }

/* Cards / panels */
.card           { padding: 14px 16px; }
.section-card   { padding: 14px; }
.field-label    { font-size: 10.5px; letter-spacing: .55px; }

/* Notebook / attachments — pull in */
.nb-entry, .att-item { padding: 9px 11px; }

/* Modals — keep airy, just tighten heads */
.modal-card     { padding: 16px 18px; }

/* Lists / tables / generic rows */
.robot-item     { padding: 9px 10px; }

/* Touch-friendly bump still applies on coarse pointers */
@media (pointer: coarse) {
  .space-item    { padding: 6px 10px; min-height: 36px; }
  .task-header   { padding: 11px 12px; }
  .btn-sm        { padding: 6px 11px; font-size: 12.5px; }
}

/* Mobile gets a touch more breathing room than desktop */
@media (max-width: 640px) {
  body { font-size: 13.5px; }
  .task-title-text { font-size: 13.5px; }
}

/* ─── TAGS, DUE DATES, AT-TASK INTERACTIVITY ────────────── */
.task-label-chip {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-3, var(--surface-2));
  color: var(--muted);
  border: 1px solid var(--border);
  flex-shrink: 0;
  white-space: nowrap;
}
.task-due {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(139,148,158,.12);
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}
.task-due.today    { background: rgba(63,185,80,.16);  color: var(--green); }
.task-due.overdue  { background: rgba(248,81,73,.16);  color: var(--red); }

.tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}
.tag-chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .12s var(--ease);
}
.tag-chip:hover { color: var(--text); border-color: var(--border-2); }
.tag-chip.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.at-task { cursor: pointer; transition: background .12s var(--ease); }
.at-task:hover { background: var(--surface-2); }

@keyframes karta-flash-task {
  0%   { box-shadow: 0 0 0 0 rgba(63,185,80,.55); }
  60%  { box-shadow: 0 0 0 6px rgba(63,185,80,.12); }
  100% { box-shadow: 0 0 0 0 rgba(63,185,80,0); }
}
.task-item.flash-highlight { animation: karta-flash-task 1.4s ease-out; }

/* "Add to today" toggle highlighted state */
.btn-sm.active-toggle {
  background: rgba(63,185,80,.14);
  color: var(--green);
  border-color: rgba(63,185,80,.35);
}
.btn-sm.active-toggle:hover { background: rgba(63,185,80,.22); }

/* Logo PNG ships finished — no theme inversion needed. */


/* ── Reviews (weekly + monthly summaries) ───────────────── */
.reviews-container {
  padding: 28px 32px 80px;
  max-width: 1100px;
  margin: 0;
}

.reviews-period-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.rev-period-btn {
  padding: 6px 14px;
  font-size: 13px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.rev-period-btn:hover { color: var(--text); }
.rev-period-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.reviews-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}
.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}
.reviews-empty {
  padding: 20px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.rev-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.rev-row:hover { background: var(--surface-2); }
.rev-row.active { border-color: var(--accent); background: var(--accent-soft); }
.rev-row-label   { font-size: 13px; font-weight: 600; }
.rev-row-preview { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.reviews-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  min-height: 60vh;
}
.reviews-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.reviews-editor-period {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.rev-delete-btn { font-size: 12px; }
.reviews-textarea {
  flex: 1;
  min-height: 50vh;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  resize: vertical;
}
.reviews-textarea { min-height: 180px; }
.reviews-textarea:disabled { opacity: .6; cursor: not-allowed; }

/* ── Review: Goals & Completed sections ── */
.rev-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 2px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.rev-notes-header { margin-top: 4px; }
.rev-goals-section,
.rev-completed-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 8px;
}
.rev-goals-list,
.rev-completed-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
}
.rev-goal-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 13px;
  color: var(--text);
}
.rev-goal-item.done { opacity: .55; }
.rev-goal-item.done .rev-goal-title { text-decoration: line-through; }
.rev-goal-status {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--success, #22c55e);
}
.rev-goal-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--success, #22c55e);
  transition: background .1s, border-color .1s;
}
.rev-goal-check.checked {
  background: var(--success-soft, #dcfce7);
  border-color: var(--success, #22c55e);
}
.rev-goal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.rev-goal-project {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rev-goal-title {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rev-goal-remove {
  opacity: 0;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
  transition: opacity .12s, background .12s;
}
.rev-goal-item:hover .rev-goal-remove { opacity: 1; }
.rev-goal-remove:hover { background: var(--danger-soft, #fee2e2); color: var(--danger, #ef4444); }
.rev-goal-item--link { cursor: pointer; }
.rev-goal-item--link:hover { background: var(--hover); }
.rev-goal-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 8px;
}
.rev-goal-add {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.rev-goal-input {
  flex: 1;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: 13px/1.4 inherit;
}
.rev-goal-input:focus { outline: none; border-color: var(--accent); }
.rev-completed-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 13px;
}
.rev-completed-project {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.rev-completed-title { color: var(--text); }

/* Space Goals section */
.rev-space-goals-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 8px;
}
.rev-space-header {
  justify-content: flex-start;
  gap: 8px;
}
.rev-space-select {
  margin-left: auto;
  font: 11px/1.4 inherit;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.rev-space-name-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.rev-space-sync-btn {
  margin-left: auto;
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--muted);
  border-radius: 4px;
  display: flex;
  align-items: center;
  opacity: 0.7;
}
.rev-space-sync-btn:hover { opacity: 1; color: var(--text); }
.rev-space-sync-btn:disabled { opacity: 0.4; cursor: default; }
/* Space goals — richer card list */
.rev-space-goals-section .rev-goals-list { gap: 7px; }
.rev-space-goal-item {
  position: relative;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: none;
  overflow: hidden;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.rev-space-goal-item::before { content: none; }
.rev-space-goal-item.rev-goal-item--link:hover {
  border-color: var(--border-2);
  box-shadow: none;
  transform: none;
  background: var(--surface-2);
}
.rev-space-goal-item .rev-goal-body { gap: 2px; }
.rev-space-goal-item .rev-goal-project {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  background: transparent;
  padding: 0;
  border-radius: 0;
  text-transform: uppercase;
}
.rev-space-goal-item .rev-goal-title {
  font-size: 13px;
  font-weight: 500;
  white-space: normal;
  line-height: 1.35;
  color: var(--text);
}
.rev-space-goal-by {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.rev-space-goal-by::before {
  content: none;
}
.rev-space-goal-item.done::before { content: none; }
.rev-space-goal-item.done .rev-goal-project { color: var(--muted); background: transparent; }

.reviews-editor-foot {
  display: flex;
  justify-content: flex-end;
  min-height: 16px;
  font-size: 12px;
  color: var(--muted);
}

@media all { /* mobile-first universal */
  .reviews-container { padding: 18px 14px 96px; }
  .reviews-layout { grid-template-columns: 1fr; }
  .reviews-list { max-height: 240px; }
  .reviews-editor { min-height: 50vh; }
}

/* ──────────────────────────────────────────────────────────
   DESKTOP LAYOUT (≥1000px)
   ─────────────────────────────────────────────────────────
   - Persistent left sidebar (280px), never collapses
   - Topbar + main fill the rest, capped at 1280px content width
   - Hamburger + bottom-nav pill hidden (sidebar covers nav)
   - Drawer becomes static (no transform, no backdrop)
   ─────────────────────────────────────────────────────────── */
@media (min-width: 1000px) {
  /* Desktop now mirrors the mobile layout: floating pill nav handles
     primary navigation, the spaces drawer slides out from the left
     on demand (hamburger), no permanent sidebar eating screen space. */
  body { display: flex; flex-direction: column; }
  .spaces-drawer { /* falls back to the mobile slide-out behaviour */ }
  .spaces-drawer-backdrop { /* re-enabled (was display:none on desktop) */ }
  /* Floating pill stays centred over the full viewport now that the
     sidebar isn't claiming the left 280px. */
  .bnav-dock { left: 50%; }

  /* Section containers: lift the max-width caps so content uses the
     available space (still capped at a comfortable reading width). */
  /* Section containers grow to use the available width, centered. */
  .home-container,
  .reviews-container,
  .fv-container,
  .cal-container,
  .more-page {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
  #home.section.active { padding-left: 24px; padding-right: 24px; }

  /* The persistent sidebar nav block is gone — show the drawer-nav
     items only inside the slide-out drawer (its default display:flex
     applies to both viewports now). */
}

/* ── Drawer system nav — hidden entirely. The floating pill nav
       (Home/Inbox/Tasks/More) plus the More-page card grid already
       cover every section, so the drawer is reserved for Spaces only. ── */
.drawer-nav { display: none !important; }
.drawer-nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.drawer-nav-btn svg { color: var(--muted); flex-shrink: 0; }
.drawer-nav-btn:hover { background: var(--surface-2); }
.drawer-nav-btn:hover svg { color: var(--text); }
.drawer-nav-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.drawer-nav-btn.active svg { color: var(--accent); }
.drawer-nav-btn span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-nav-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--red, #dc2626);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.drawer-nav-badge[hidden] { display: none; }

/* ── Backup popover: inline Settings block (theme + export) ──── */
.bp-settings-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bp-section-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
}
.bp-theme-toggle { width: 100%; }

.bp-settings-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.bp-settings-link:hover { background: var(--surface-2); border-color: var(--border-2); }
.bp-settings-link svg   { color: var(--muted); flex-shrink: 0; }
.bp-settings-link:hover svg { color: var(--text); }

/* ── Shared-space UI (Phase 2) ──────────────────────────── */

/* Tiny "people" badge in the Spaces sidebar header */
.space-shared-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--brand-gradient);
  color: #fff;
  margin-left: 4px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(59, 130, 246, .25);
}
.space-shared-badge svg { display: block; }

/* Share modal body */
.modal.modal-share { width: 560px; max-width: 96vw; }
.share-body { display: flex; flex-direction: column; gap: 14px; padding: 0 4px; }
.share-blurb {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.share-bullets {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}
.share-bullets li { margin: 2px 0; }

.share-meta {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.share-meta-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px;
}
.share-meta-label { color: var(--muted); }

.share-role-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.share-role-owner  { color: var(--accent); border-color: var(--accent-soft2); background: var(--accent-soft); }
.share-role-writer { color: #2a9d4f; border-color: rgba(63,185,80,.4); background: rgba(63,185,80,.10); }
.share-role-reader { color: #c98a2a; border-color: rgba(201,138,42,.4); background: rgba(201,138,42,.10); }

.share-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px auto;
  gap: 8px;
  align-items: center;
}
.share-add input {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.share-collab-list {
  width: 100%;
  font-size: 13px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.share-collab-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 12px;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
}
.share-collab-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}
.share-collab-row:last-child { border-bottom: none; }
.share-collab-email {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-weight: 600;
  line-height: 1.35;
}
.share-collab-controls {
  display: grid;
  grid-template-columns: minmax(156px, 1fr) 96px;
  gap: 8px;
  align-items: center;
  justify-content: end;
}
.share-role-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 156px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 2px;
  background: var(--surface);
}
.share-role-option {
  min-width: 0;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-role-option.active {
  background: rgba(99, 178, 255, .18);
  color: var(--accent);
}
.share-role-option:disabled { opacity: .55; cursor: not-allowed; }
.share-collab-remove {
  width: 96px;
  height: 36px;
  color: var(--red, #dc2626);
  font-size: 12px;
  white-space: nowrap;
}
.share-collab-empty {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 16px 8px;
}

.share-status {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(63,185,80,.10);
  color: #2a9d4f;
  border: 1px solid rgba(63,185,80,.30);
  font-size: 12.5px;
}
.share-error {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(220,38,38,.10);
  color: var(--red, #dc2626);
  border: 1px solid rgba(220,38,38,.30);
  font-size: 12.5px;
}

.share-conflict,
.share-activity {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  padding: 12px;
}
.share-conflict-title {
  font-weight: 800;
  color: #fecaca;
  margin-bottom: 3px;
}
.share-conflict-copy {
  color: var(--muted);
  font-size: 12.5px;
  margin-bottom: 10px;
}
.share-conflict-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.share-activity-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.share-activity-row:first-of-type { border-top: none; }
.share-activity-row small {
  color: var(--muted);
  font-size: 11.5px;
}

.share-stop-btn { color: var(--red, #dc2626); }

@media (max-width: 600px) {
  .sync-safety-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 8px 10px;
  }
  .sync-safety-item {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .att-section-head {
    align-items: flex-start;
  }
  .att-head-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
  }
  .share-add { grid-template-columns: 1fr; }
  .share-add input, .share-add button, .share-add-role-toggle { width: 100%; }
  .share-collab-head { display: none; }
  .share-collab-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .share-collab-controls {
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
  }
  .share-role-toggle,
  .share-collab-remove {
    width: 100%;
  }
}

/* ── home-space row: head + share button ────────────────── */
.home-space-head-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.home-space-head-row .home-space-head { flex: 1; min-width: 0; }
.home-space-share-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.home-space-share-btn:hover { background: var(--surface-2); color: var(--text); }

/* Shared badge inline in the space name — uses the brand gradient so
   the "shared" signal carries the app's identity at the right moment. */
.home-space-shared-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 16px; height: 16px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--brand-gradient);
  color: #fff;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(59, 130, 246, .25);
}
.home-space-shared-badge svg { display: block; }

/* ── Floating Space menu (Rename / Share / Delete) ─────── */
.space-menu {
  min-width: 180px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  animation: spaceMenuIn .12s var(--ease);
}
@keyframes spaceMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.space-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background .12s var(--ease);
}
.space-menu-item:hover { background: var(--surface-2); }
.space-menu-item svg   { color: var(--muted); flex-shrink: 0; }
.space-menu-item:hover svg { color: var(--text); }
.space-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}
.space-menu-danger        { color: var(--red, #dc2626); }
.space-menu-danger svg    { color: var(--red, #dc2626); }
.space-menu-danger:hover  { background: rgba(220,38,38,.10); }

/* ── "Shared with you" sidebar section ─────────────────── */
.home-shared-section {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px dashed var(--border-2);
  border-radius: 10px;
  background: var(--accent-soft);
}
.home-shared-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.home-shared-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.home-shared-row:first-of-type { border-top: none; }
.home-shared-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.home-shared-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-shared-sub  { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-shared-import {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 7px;
  flex-shrink: 0;
}

/* ── Share modal: Pull/Push sync row ───────────────────── */
.share-sync {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.share-sync-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
}
.share-sync-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.share-sync-buttons .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Read-only mode (Viewer role on a shared Space) ────── */
.readonly-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(201,138,42,.08);
  border: 1px solid rgba(201,138,42,.30);
  color: #c98a2a;
  font-size: 12.5px;
  font-weight: 500;
}
.readonly-banner svg { flex-shrink: 0; }

/* Inside the robot detail, hide the controls a Viewer can't use. Their
   Drive permission is reader-only, so the edits would 403 on push. */
body.is-readonly #robot-content .btn-group,
body.is-readonly #robot-content .robot-detail-header .btn-sm,
body.is-readonly #robot-content .btn-add,
body.is-readonly #robot-content .task-quick-add,
body.is-readonly #robot-content .task-add,
body.is-readonly #robot-content .add-task-row,
body.is-readonly #robot-content .add-issue-row,
body.is-readonly #robot-content .task-actions,
body.is-readonly #robot-content .task-actions-row,
body.is-readonly #robot-content .issue-actions,
body.is-readonly #robot-content .notebook-add,
body.is-readonly #robot-content .nb-add,
body.is-readonly #robot-content .nb-add-row,
body.is-readonly #robot-content .nb-add-btn,
body.is-readonly #robot-content .nb-item-del,
body.is-readonly #robot-content .nb-del,
body.is-readonly #robot-content .nb-edit,
body.is-readonly #robot-content .subtask-add,
body.is-readonly #robot-content .sub-add-row,
body.is-readonly #robot-content .sub-add-input,
body.is-readonly #robot-content .sub-add-btn,
body.is-readonly #robot-content .subtask-del,
body.is-readonly #robot-content .tag-add,
body.is-readonly #robot-content [data-add-task],
body.is-readonly #robot-content [data-add-issue] {
  display: none !important;
}
/* Catch-all: every button inside an expanded task body / notebook entry
   mutates state. Hide them; the header click that expands/collapses the
   task is on the task header itself, not inside .task-body. */
body.is-readonly #robot-content .task-body button,
body.is-readonly #robot-content .task-body .btn-sm,
body.is-readonly #robot-content .nb-item button,
body.is-readonly #robot-content .nb-actions button {
  display: none !important;
}
/* Disable inline interactions that mutate state */
body.is-readonly #robot-content .task-checkbox,
body.is-readonly #robot-content .task-status-btn,
body.is-readonly #robot-content .task-priority-btn,
body.is-readonly #robot-content .subtask-check,
body.is-readonly #robot-content .subtask,
body.is-readonly #robot-content [contenteditable="true"],
body.is-readonly #robot-content input,
body.is-readonly #robot-content textarea,
body.is-readonly #robot-content select {
  pointer-events: none !important;
  opacity: .85;
}
/* Hide the global quick-add FAB while a read-only space is open. */
body.is-readonly #quick-fab { display: none !important; }
/* Drag handles & inline reorder are also off */
body.is-readonly #robot-content .task-item,
body.is-readonly #robot-content [draggable="true"] {
  cursor: default !important;
}
body.is-readonly #robot-content [draggable="true"] { -webkit-user-drag: none; }
body.is-readonly #robot-content .nb-item { cursor: default !important; }

/* ── Owner avatar / name in share modal + sidebar ──────── */
.share-owner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.share-owner-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.share-owner-avatar-fallback {
  background: var(--accent-soft);
  color: var(--accent);
}
.share-owner-text {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.2;
}
.share-owner-name  { font-size: 13px; font-weight: 600; color: var(--text); }
.share-owner-email { font-size: 11.5px; color: var(--muted); }

/* Tiny owner avatar next to the space name in the sidebar (replaces the
   generic shared SVG badge when an avatar is available). */
.home-space-owner-avatar {
  width: 14px; height: 14px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: 6px;
  vertical-align: middle;
  border: 1px solid var(--border);
}

/* Version footer inside the avatar popover */
.bp-version {
  text-align: center;
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: .5px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

/* Recurring task indicator — tiny refresh-arrows next to the title */
.task-recurring-ico {
  display: inline-flex;
  align-items: center;
  margin-right: 5px;
  vertical-align: -1px;
  color: var(--accent);
  opacity: .85;
}
.task-recurring-ico svg { display: block; }
.task-item.done .task-recurring-ico { opacity: .35; }

/* Task assignee chip — small avatar / initial circle in the task row */
.task-assignee-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 2px;
}
.task-assignee-chip img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.task-assignee-chip .assignee-initial {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1;
}
.task-assignee-chip.is-me {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.task-assignee-chip.is-me .assignee-initial { color: var(--accent); }

/* ── Task assignees multi-select checkbox list ──────────── */
.task-assignees-checklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 160px;
  overflow-y: auto;
  padding: 4px 0;
}
/* .modal label overrides (uppercase, 11px) must be neutralised here */
label.assignee-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text) !important;
  transition: background 0.12s;
}
label.assignee-check-row:hover { background: var(--hover); }
/* .modal input { width:100% } would stretch the checkbox — override it */
label.assignee-check-row .assignee-cb {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── In-app prompt modal (replaces window.prompt) ──────── */
.modal.modal-input { width: 420px; max-width: 92vw; }
.modal-input label { margin-top: 4px; display: block; font-size: 12px; color: var(--muted); }
.modal-input input[type="text"],
.modal-input input[type="email"],
.modal-input input[type="number"],
.modal-input input[type="url"] {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  margin-top: 6px;
}
.modal-input input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.modal-input .modal-actions { margin-top: 14px; }

/* ── App toast (non-blocking notifications) ─────────────── */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translate(-50%, 20px);
  max-width: 92vw;
  padding: 10px 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid color-mix(in srgb, var(--border) 88%, #ffffff);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .18), 0 1px 0 rgba(255, 255, 255, .9) inset;
  opacity: 0;
  z-index: 1500;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.app-toast.open {
  opacity: 1;
  transform: translate(-50%, 0);
}
.app-toast[data-kind="sync"] {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background: #ffffff;
  color: var(--text);
}
:root[data-theme="dim"] .app-toast,
:root[data-theme="dark"] .app-toast,
:root[data-theme="dim"] .app-toast[data-kind="sync"],
:root[data-theme="dark"] .app-toast[data-kind="sync"] {
  background: var(--surface);
  border-color: var(--border-2);
}
@media (min-width: 1000px) {
  .app-toast { bottom: 24px; }
}

/* ── In-app confirm / alert dialog ─────────────────────── */
.modal.modal-confirm { width: 420px; max-width: 92vw; }
#modal-confirm-message {
  margin: 4px 0 6px;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.modal-confirm .modal-actions { margin-top: 14px; }
.modal-confirm .btn-primary.danger {
  background: var(--red, #dc2626);
  border-color: var(--red, #dc2626);
  color: #fff;
}
.modal-confirm .btn-primary.danger:hover { filter: brightness(.92); }
/* ════════════════════════════════════════════════════════════
   DESIGN SYSTEM v4 — single source of truth.
   Mobile (<1000px) and Desktop (>=1000px) handled separately
   with their own complete layouts. Replaces every patch /
   theme experiment above.
   ════════════════════════════════════════════════════════════ */

/* ----- Body backdrop: solid, no gradients ----- */
body {
  background: var(--bg) !important;
}

/* ----- Universal kill ----- */
* {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ----- Glass tokens collapsed to solid surfaces ----- */
:root {
  --glass-bg:        var(--surface);
  --glass-bg-2:      var(--surface-2);
  --glass-bg-card:   var(--surface);
  --glass-border:    var(--border);
  --glass-highlight: transparent;
  --glass-blur:      none;
}

/* ════════════════════════════════════════════════════════════
   1. CONSISTENT BUTTONS — three shapes, that's it.
   ════════════════════════════════════════════════════════════ */

/* Primary action button: solid accent pill */
.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 999px !important;
  color: var(--on-accent) !important;
  font: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  min-height: 38px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background .12s var(--ease, ease), border-color .12s var(--ease, ease) !important;
  box-shadow: none !important;
}
.btn-primary:hover { background: var(--accent-h) !important; border-color: var(--accent-h) !important; }

/* Secondary action button: ghost pill */
.btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  color: var(--text) !important;
  font: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  min-height: 38px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background .12s var(--ease, ease), border-color .12s var(--ease, ease) !important;
  box-shadow: none !important;
}
.btn-ghost:hover { background: var(--surface-3) !important; border-color: var(--border-2) !important; }

/* Small action button: compact pill */
.btn-sm, .btn-mini {
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  min-height: 30px !important;
}

/* Icon-only square button: small rounded square */
.icon-btn, .topbar-icon-btn, .topbar-avatar-btn, .modal-close,
.md-back-btn, .bp-icon-btn, .home-section-icon-btn,
.cal-nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: background .12s var(--ease, ease), color .12s var(--ease, ease) !important;
  box-shadow: none !important;
}
.icon-btn:hover, .topbar-icon-btn:hover, .topbar-avatar-btn:hover,
.modal-close:hover, .md-back-btn:hover, .bp-icon-btn:hover,
.home-section-icon-btn:hover, .cal-nav:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Header action row: consistent gap */
.finance-header-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Inline tab pills (Reviews Weekly/Monthly) */
.rev-period-btn {
  padding: 10px 20px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  color: var(--text) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  min-height: 38px !important;
  cursor: pointer !important;
  flex: none !important;
}
.rev-period-btn.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
}
.reviews-period-toggle {
  display: inline-flex !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   2. CONSISTENT INPUTS
   ════════════════════════════════════════════════════════════ */

input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="password"], input[type="number"],
input[type="search"], input[type="date"], input[type="color"],
input:not([type]), textarea, select {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  color: var(--text) !important;
  font: inherit !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder { color: var(--muted) !important; opacity: .8; }

/* Native <select> dropdown options: the OS popup ignores the select's own
   color, so set them explicitly or they render low-contrast on dark themes.
   Use the opaque --bg (the surface vars are semi-transparent and composite
   unpredictably in the native popup). */
select option,
select optgroup {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}

textarea.auto-grow-textarea {
  resize: none !important;
  overflow-y: hidden;
  scrollbar-width: thin;
}

/* ════════════════════════════════════════════════════════════
   3. CONSISTENT CARDS — one style, every list item
   ════════════════════════════════════════════════════════════ */

.home-list-item, .home-card,
.at-task, .visit-row, .rev-row,
.task-body, .task-card,
.cal-day-panel, .streak-stat,
#meeting-list .robot-item, #meetings .robot-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}
.home-list-item:hover, .home-card:hover, .at-task:hover,
.visit-row:hover, .rev-row:hover,
.cal-day-panel:hover,
#meeting-list .robot-item:hover, #meetings .robot-item:hover {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
}
.rev-row.active,
#meeting-list .robot-item.active, #meetings .robot-item.active {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}

/* Lists: consistent gap between cards */
.home-list, #meeting-list, .reviews-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* ════════════════════════════════════════════════════════════
   4. SECTION LAYOUT — mobile-first
   ════════════════════════════════════════════════════════════ */

/* Generic section container */
.section { min-width: 0; }
.section.active {
  display: flex !important;
  flex-direction: column !important;
}

.fv-container,
.reviews-container, .cal-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  /* Bottom padding = mobile bar height (64 + safe-area) so the last
     item lands flush against the docked bar with no dead zone. On
     desktop the bar is hidden and this padding is overridden in the
     desktop media block. */
  padding: 18px 16px calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Strip the bottom margin off the last child of any scroll container
   — otherwise stacked .at-group / .meeting-row / etc. margins add
   visible white between the last item and the docked bar. */
.fv-container > *:last-child,
.reviews-container > *:last-child,
.cal-container > *:last-child {
  margin-bottom: 0 !important;
  background: transparent !important;
  border: none !important;
  min-height: auto !important;
}

/* Section header (title + subtitle + action buttons) */
.fv-header, .fv-header.section-head-pad {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
}
.fv-header > div:first-child { flex: 0 0 auto; }
.fv-header h2 {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  margin: 0 !important;
  color: var(--text) !important;
}
.fv-subtitle {
  font-size: 13.5px !important;
  color: var(--muted) !important;
  margin: 4px 0 0 !important;
}

/* ════════════════════════════════════════════════════════════
   5. MOBILE (<1000px) — single column + floating pill nav
   ════════════════════════════════════════════════════════════ */

/* Topbar: sticky */
@media (max-width: 999px) {
  body { display: flex !important; flex-direction: column !important; }
  /* Bottom-nav clearance: instead of padding-bottom on <main> (which
     leaves a dead zone when content is shorter than the viewport),
     use scroll-padding-bottom so only *scrolling* content reserves
     room for the bar. Last item lands just above the bar; short
     pages have no empty gap. */
  main {
    scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .app-topbar {
    position: sticky !important;
    top: 0 !important;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--border) !important;
    z-index: 60;
  }
  #topbar-burger-btn { display: inline-flex !important; }

  /* Spaces drawer: slide-out (default mobile behaviour) */
  .spaces-drawer {
    position: fixed !important;
    top: 0; bottom: 0; left: 0;
    width: min(320px, 88vw) !important;
    background: var(--surface) !important;
    border-right: 1px solid var(--border) !important;
    transform: translateX(-104%);
    transition: transform .22s var(--ease, ease);
    z-index: 120;
    overflow-y: auto;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  body.spaces-drawer-open .spaces-drawer { transform: translateX(0); }
  .spaces-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .5);
    display: none;
    z-index: 110;
  }
  body.spaces-drawer-open .spaces-drawer-backdrop { display: block; }

  /* Drawer nav inside the slide-out drawer */
  .drawer-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    padding: 8px !important;
    border-bottom: 1px solid var(--border);
  }
  .drawer-nav-btn {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: var(--text) !important;
    font-size: 14px !important;
    cursor: pointer !important;
    width: 100%;
    text-align: left;
  }
  .drawer-nav-btn:hover { background: var(--surface-2) !important; }
  .drawer-nav-btn.active { background: var(--accent-soft) !important; color: var(--accent) !important; }

  /* Floating pill nav — detached, centered, rounded */
  .bnav-dock {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    max-width: calc(100vw - 24px);
    z-index: 90;
    pointer-events: none;
  }
  .bnav-dock > * { pointer-events: auto; }
  .bnav-dock .bottom-nav {
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-around !important;
    height: 60px !important;
    padding: 0 6px !important;
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 30px rgba(15, 20, 30, .24), 0 2px 8px rgba(15, 20, 30, .12) !important;
    gap: 2px !important;
  }
  .bnav-btn {
    flex: 0 0 auto;
    min-width: 54px;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--muted) !important;
    cursor: pointer;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    position: relative !important;
    box-shadow: none !important;
    padding: 6px 4px !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
  }
  /* Top accent bar for active tab */
  .bnav-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: transparent;
    transition: background .15s ease;
  }
  .bnav-btn.active::before { background: var(--accent); }
  .bnav-btn.active {
    background: transparent !important;
    color: var(--accent) !important;
    box-shadow: none !important;
  }
  .bnav-btn.active svg { color: var(--accent) !important; }
  /* Show labels — hide only the notification badge span */
  .bnav-btn > span:not(.bnav-badge) {
    display: inline !important;
    font-size: 10.5px;
    line-height: 1;
  }
  .bnav-btn svg { width: 22px; height: 22px; }
  /* FAB sits inside the floating dock, beside the pill */
  .bnav-fab {
    position: static !important;
    flex: 0 0 auto;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    color: var(--on-accent) !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 10px 26px rgba(37, 99, 235, .4) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 91;
  }
  .bnav-fab:hover { background: var(--accent-h) !important; }

  /* Master-detail mobile: list view OR detail view */
  #meetings.section { flex-direction: column !important; }
  #meetings.section > .sidebar { padding: 0 !important; border: none !important; width: 100% !important; }
  #meetings.section > .content { padding: 0 !important; }
  #meetings.section[data-detail-open="true"] > .sidebar { display: none !important; }
  #meetings.section:not([data-detail-open="true"]) > .content { display: none !important; }

  #reviews:not([data-detail-open="true"]) .reviews-editor { display: none !important; }
  #reviews[data-detail-open="true"] .reviews-list { display: none !important; }
  .reviews-layout { display: block !important; }

  /* Calendar: single column on mobile */
  .cal-body { grid-template-columns: 1fr !important; gap: 14px !important; }
}

/* ════════════════════════════════════════════════════════════
   6. DESKTOP (>=1000px) — sidebar + master-detail multi-column
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1000px) {
  /* Body grid: sidebar | topbar/main */
  body {
    display: grid !important;
    grid-template-columns: 280px 1fr !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
      "sidebar topbar"
      "sidebar main" !important;
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
  }
  .app-topbar {
    grid-area: topbar !important;
    position: static !important;
    background: var(--bg) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 24px !important;
  }
  #topbar-burger-btn { display: none !important; }
  main {
    grid-area: main !important;
    overflow: hidden !important;
    display: flex !important;
  }

  /* Permanent sidebar */
  .spaces-drawer {
    position: static !important;
    grid-area: sidebar !important;
    transform: none !important;
    width: auto !important;
    background: var(--surface) !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: none !important;
    z-index: auto !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    padding: 18px 12px !important;
  }
  .spaces-drawer-backdrop { display: none !important; }

  /* Drawer nav as a clean vertical list */
  .drawer-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid var(--border) !important;
    margin-bottom: 12px !important;
  }
  .drawer-nav-btn {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 12px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: var(--text) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    width: 100% !important;
    text-align: left !important;
  }
  .drawer-nav-btn:hover { background: var(--surface-2) !important; }
  .drawer-nav-btn.active {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
  }
  .drawer-nav-btn.active svg { color: var(--accent) !important; }

  /* Floating pill nav hidden — sidebar handles navigation */
  .bnav-dock { display: none !important; }

  /* Sections fill main area */
  .section.active {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    padding: 24px 32px !important;
  }
  /* Desktop has no bottom-nav, so don't reserve the mobile bar height */
  .fv-container,
  .reviews-container, .cal-container {
    padding: 18px 16px 24px !important;
  }
  /* Master-detail sections — stacked single column (header above
     list/detail). Previous "row" direction was leftover from the
     side-by-side experiment and made the header sit beside the list. */
  #meetings.section.active {
    flex-direction: column !important;
  }

  /* Generic section containers full-width, centered with max-width */
  .fv-container,
  .reviews-container, .cal-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* Header: title left, actions right (back to row) */
  .fv-header, .fv-header.section-head-pad {
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 0 0 28px !important;
  }

  /* Meetings / Journal / Reviews on desktop: SAME single-column
     pattern as mobile. Master view shows the list; clicking an item
     swaps to the detail view (same data-detail-open toggle). */
  #meetings.section { flex-direction: column !important; }
  #meetings.section > .sidebar {
    width: 100% !important;
    flex: none !important;
    border-right: none !important;
    border-bottom: none !important;
    overflow-y: visible !important;
    padding: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  #meetings.section > .content {
    flex: 1 !important;
    width: 100% !important;
    padding: 0 !important;
    overflow-y: auto !important;
  }
  #meetings.section[data-detail-open="true"] > .sidebar { display: none !important; }
  #meetings.section:not([data-detail-open="true"]) > .content { display: none !important; }

  .reviews-layout {
    display: block !important;
    grid-template-columns: 1fr !important;
    margin-top: 0 !important;
  }
  #reviews:not([data-detail-open="true"]) .reviews-editor { display: none !important; }
  #reviews[data-detail-open="true"]       .reviews-list   { display: none !important; }

  /* Calendar: grid + day panel */
  .cal-body {
    display: grid !important;
    grid-template-columns: 1fr 360px !important;
    gap: 18px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   7. MODAL / POPOVER consistency
   ════════════════════════════════════════════════════════════ */
.modal {
  background: rgba(22, 27, 36, .72) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(26px) saturate(1.28) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.28) !important;
}
.backup-popover {
  background: rgba(22, 27, 36, .72) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(26px) saturate(1.28) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.28) !important;
}
:root[data-theme="light"] .modal,
:root[data-theme="light"] .backup-popover {
  background: rgba(255, 255, 255, .76) !important;
  border-color: rgba(15, 23, 42, .12) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}
.bp-account, .bp-meta, .bp-settings-block {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.bp-meta-row { border-bottom: 1px solid var(--border) !important; padding: 8px 0 !important; }
.bp-meta-row:last-child { border-bottom: none !important; }

/* Theme toggle in popover: clean segmented pill */
.theme-toggle, .bp-theme-toggle {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 4px !important;
  display: inline-flex !important;
  width: 100%;
}
.bp-theme-toggle {
  margin-bottom: 10px !important;
}

/* Light-theme polish: calmer controls and roomier note composers */
:root[data-theme="light"] .note-tool-btn {
  background: #ffffff !important;
  border-color: #d8dee8 !important;
  color: #475569 !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .note-tool-btn:hover {
  background: #f8fafc !important;
  color: #1f2937 !important;
  border-color: #cbd5e1 !important;
}
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .sub-add-btn,
:root[data-theme="light"] .bnav-fab {
  background: #dbeafe !important;
  border: 1px solid #bfdbfe !important;
  color: #0f172a !important;
  box-shadow: none !important;
  filter: none !important;
}
:root[data-theme="light"] .btn-primary:hover,
:root[data-theme="light"] .sub-add-btn:hover,
:root[data-theme="light"] .bnav-fab:hover {
  background: #bfdbfe !important;
  border-color: #93c5fd !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .btn-sm.active-toggle,
:root[data-theme="light"] .task-actions-row .btn-sm.active-toggle {
  background: #e0f2fe !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .task-actions-row .btn-sm.goal-toggle.active-toggle {
  background: #dbeafe !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .home-goals-shortcut {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(239, 246, 255, .78)),
    rgba(255, 255, 255, .86) !important;
  border-color: rgba(148, 163, 184, .32) !important;
  color: #111827 !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}
:root[data-theme="light"] .home-goals-shortcut:hover {
  background:
    linear-gradient(135deg, rgba(239, 246, 255, .98), rgba(219, 234, 254, .8)),
    rgba(255, 255, 255, .92) !important;
  border-color: rgba(96, 165, 250, .42) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .1), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}
:root[data-theme="light"] .home-goals-shortcut-title {
  color: #111827 !important;
}
:root[data-theme="light"] .home-goals-shortcut-sub {
  color: #64748b !important;
}
:root[data-theme="light"] .home-goals-shortcut-icon {
  background: #dbeafe !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}
:root[data-theme="light"] .nb-input-row,
:root[data-theme="light"] .nb-compose {
  background: #ffffff !important;
}
.nb-compose {
  min-width: 0;
  overflow: visible;
}
.nb-compose .note-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nb-input-row {
  align-items: end;
}
.nb-input {
  min-height: 72px !important;
  max-height: 260px !important;
  padding-bottom: 14px !important;
}
@media (max-width: 700px) {
  .nb-input-row {
    grid-template-columns: 1fr !important;
  }
  .nb-input-row .btn-primary {
    width: 100%;
  }
}
.theme-toggle-btn {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  color: var(--muted) !important;
  font-size: 12.5px !important;
  cursor: pointer !important;
}
.theme-toggle-btn.active {
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1) !important;
}

/* Inner tabs (Tasks/Known Issues) */
.inner-tabs {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 4px !important;
}
.inner-tab {
  border-radius: 999px !important;
  padding: 7px 16px !important;
}
.inner-tab.active {
  background: var(--surface) !important;
}

/* Reviews textarea */
.reviews-textarea {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  min-height: 60vh !important;
}
.reviews-editor { width: 100%; }

/* Bar clearance now lives on .fv-container (= bar height exactly).
   The old 110px section padding-bottom was a holdover from the
   floating-pill era and is what created the dead zone above the
   docked bar — keep it at 0 here. */
@media (max-width: 999px) {
  .section.active { padding-bottom: 0; }
}

/* ════════════════════════════════════════════════════════════
   TEAMS-STYLE RAIL (desktop)
   - Mobile: drawer shows only Spaces (drawer-nav hidden)
   - Desktop: vertical icon rail on far left + spaces panel
     next to it. Implemented with CSS grid on .spaces-drawer.
   ════════════════════════════════════════════════════════════ */

/* Mobile: drawer-nav stays hidden — floating pill nav covers it */
@media (max-width: 999px) {
  .drawer-nav { display: none !important; }
}

@media (min-width: 1000px) {
  /* spaces-drawer becomes a 2-column grid: rail on left, spaces panel
     on right. drawer-nav spans full height of rail column. */
  .spaces-drawer {
    display: grid !important;
    grid-template-columns: 72px 260px !important;
    grid-template-rows: auto auto 1fr !important;
    width: 332px !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: 100dvh !important;
  }

  /* Left column: icon rail — spans all rows so it fills viewport */
  .drawer-nav {
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 14px 8px !important;
    margin: 0 !important;
    border-right: 1px solid var(--border) !important;
    border-bottom: none !important;
    background: var(--bg) !important;
    overflow-y: auto !important;
  }
  .drawer-nav-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 9px 4px !important;
    width: 100% !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: var(--muted) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-align: center !important;
    min-height: 50px !important;
  }
  .drawer-nav-btn svg {
    width: 20px !important;
    height: 20px !important;
    color: var(--muted) !important;
    flex-shrink: 0 !important;
  }
  .drawer-nav-btn span {
    display: block !important;
    width: 100% !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .drawer-nav-btn:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
  }
  .drawer-nav-btn:hover svg { color: var(--text) !important; }
  .drawer-nav-btn.active {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
  }
  .drawer-nav-btn.active svg { color: var(--accent) !important; }

  /* Right column: spaces panel — wrap everything except drawer-nav */
  .spaces-drawer-head,
  .home-spaces,
  .spaces-drawer-section {
    grid-column: 2 !important;
  }
  /* Brand block moved to the topbar — hide its sidebar slot */
  .spaces-drawer-brand { display: none !important; }
  .spaces-drawer-head  { grid-row: 2; align-self: start; padding: 12px 14px 8px; }
  .home-spaces         {
    grid-row: 3 !important;
    align-self: stretch !important;
    overflow-y: auto !important;
    padding: 0 8px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--surface) !important;
    border-left: 1px solid var(--border) !important;
  }
  /* Tweak: brand area also surface bg so the whole right column matches */
  .spaces-drawer-brand { background: var(--surface) !important; border-left: 1px solid var(--border) !important; }
  .spaces-drawer-head  { background: var(--surface) !important; border-left: 1px solid var(--border) !important; }
}

/* Respect the [hidden] HTML attribute — my !important button rules
   were overriding the default display:none for hidden elements. */
[hidden] { display: none !important; }

/* Force 8px gap between cards in every list. Some parents are not
   flex containers (e.g. #all-tasks-list, .at-group, #visits-list);
   margin-bottom on the card itself guarantees spacing. */
.at-task,
.visit-row,
.rev-row,
#meeting-list .robot-item,
#meetings .robot-item {
  margin-bottom: 8px !important;
}
.at-task:last-child,
.visit-row:last-child,
.rev-row:last-child {
  margin-bottom: 0 !important;
}

/* Day-group headers and section blocks get bottom space too */
.at-group { margin-bottom: 20px !important; }
.at-group-label { margin-bottom: 10px !important; }

/* Desktop rail Inbox badge: kill the original badge entirely and
   show a tiny dot via the parent button's ::after instead. Cleaner
   than fighting the absolute positioning + content sizing. */
@media (min-width: 1000px) {
  .drawer-nav-btn { position: relative !important; }
  .drawer-nav-badge,
  #drawer-inbox-badge {
    display: none !important;
  }
  /* Show the dot only when the badge has a count (drawer-inbox-badge
     is NOT hidden via the [hidden] attribute). Use a sibling check
     via :has() on the button. */
  .drawer-nav-btn:has(#drawer-inbox-badge:not([hidden]))::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red, #dc2626);
    border: 2px solid var(--bg);
    box-sizing: content-box;
    pointer-events: none;
  }
}

/* Meetings + Journal sections on desktop: ensure header sits at full
   width of main column with proper padding, and list rows fill the
   container. Earlier overrides removed all padding, leaving the
   header flush against the sidebar edge. */
@media (min-width: 1000px) {
  #meetings.section.active {
    padding: 24px 32px !important;
  }
  #meetings.section > .sidebar {
    padding: 0 !important;
  }
  /* Meeting cards full width */
  #meeting-list {
    width: 100% !important;
  }
}

/* Meetings + Journal: cards FULL-width, same layout as Links page */
#meeting-list .robot-item,
#meetings .robot-item {
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  margin-bottom: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
#meeting-list, .robot-list {
  padding: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Meetings + Journal sections: ensure no horizontal overflow.
   .sidebar (containing the meeting list) was overflowing the
   section padding because of its overflow: hidden + 100% width
   not being constrained by section padding properly. */
#meetings.section.active {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
#meetings.section > .sidebar {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}
#meetings.section > .content {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#meeting-list, .robot-list {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: visible !important;
}
#meeting-list .robot-item,
#meetings .robot-item {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Mobile: hide section header's section-head-pad padding leftover */
@media (max-width: 999px) {
  #meetings.section.active {
    padding: 18px 14px 0 !important;
  }
}

/* Meetings: mimic the Reviews page layout exactly so they
   look identical (title row at top + full-width list below). */
@media (min-width: 1000px) {
  #meetings.section.active {
    padding: 24px 32px 24px calc(32px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
  }
}
@media (max-width: 999px) {
  #meetings.section.active {
    padding: 18px 14px 0 !important;
  }
}

/* Header on every viewport: title left + buttons right, just like
   .reviews-container .fv-header */
#meetings .fv-header.section-head-pad {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  width: 100% !important;
}
#meetings .fv-header h2 {
  margin: 0 !important;
}
#meetings .fv-subtitle {
  margin: 4px 0 0 !important;
}

/* Mobile: collapse header to column (title above buttons) */
@media (max-width: 600px) {
  #meetings .fv-header.section-head-pad {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
}

/* List container: transparent, full-width, no border */
#meetings > .sidebar {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 100% !important;
  flex: none !important;
  overflow: visible !important;
}
/* Hide the empty content/detail area on mobile + desktop when no
   meeting/journal entry is selected — list IS the primary view. */
#meetings.section:not([data-detail-open="true"]) > .content { display: none !important; }

/* Meetings content: same max-width + centring as Reviews */
@media (min-width: 1000px) {
  #meetings .fv-header.section-head-pad,
  #meetings > .sidebar,
  #meetings > .content {
    max-width: min(1600px, 95vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Section padding matches the Reviews page (24px top/bottom +
     32px horizontal). Children centered inside via margin: 0 auto. */
  #meetings.section.active {
    padding: 24px 32px !important;
  }
}

/* Meetings + Journal: now use .fv-container wrapper like Visits/Links.
   Drop all the bespoke #meetings.section + #journal.section special
   overrides — they inherit the standard fv-container layout now. */

/* Inside the fv-container, the inner .sidebar (meeting list) just
   holds the list — transparent, no border, no padding around it. */
#meetings .fv-container > .sidebar {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 100% !important;
  display: block !important;
  overflow: visible !important;
}

/* Detail wrappers: hidden by default, shown when an item is selected */
#meetings .content {
  display: none !important;
}
#meetings.section[data-detail-open="true"] .fv-container { display: none !important; }
#meetings.section[data-detail-open="true"] .content { display: block !important; }

/* Kill old #meetings / #journal special positioning rules — let the
   generic .fv-container styling do the work. */

/* Meeting detail: clear vertical spacing between sections so the
   ATTACHMENTS card doesn't visually overlap ACTION ITEMS below. */
#meetings .content .dsection,
#meetings .content .att-section {
  margin-bottom: 24px !important;
}
#meetings .content .att-section { margin-top: 4px; }

/* ==========================================================================
   Frosted glass refresh
   --------------------------------------------------------------------------
   This layer intentionally sits at the end of the stylesheet so it can revive
   glass after the solid-surface reset above while keeping the existing layout.
   ========================================================================== */
:root {
  --bg: #f3f7fb;
  --surface: rgba(255, 255, 255, .50);
  --surface-2: rgba(255, 255, 255, .34);
  --surface-3: rgba(255, 255, 255, .66);
  --border: rgba(35, 46, 66, .10);
  --border-2: rgba(35, 46, 66, .18);
  --glass-bg: rgba(255, 255, 255, .50);
  --glass-bg-2: rgba(255, 255, 255, .34);
  --glass-bg-card: rgba(255, 255, 255, .56);
  --glass-border: rgba(255, 255, 255, .72);
  --glass-highlight: rgba(255, 255, 255, .96);
  --glass-blur: blur(28px) saturate(1.7);
  --shadow-sm: 0 3px 10px rgba(24, 36, 58, .06);
  --shadow: 0 18px 44px rgba(24, 36, 58, .12);
  --shadow-lg: 0 30px 74px rgba(24, 36, 58, .20);
  --card-shadow: 0 16px 40px rgba(24, 36, 58, .12), inset 0 1px 0 rgba(255, 255, 255, .78);
}

:root[data-theme="dim"] {
  --bg: #171b22;
  --surface: rgba(40, 45, 56, .48);
  --surface-2: rgba(255, 255, 255, .07);
  --surface-3: rgba(255, 255, 255, .115);
  --border: rgba(255, 255, 255, .11);
  --border-2: rgba(255, 255, 255, .18);
  --glass-bg: rgba(34, 39, 50, .48);
  --glass-bg-2: rgba(255, 255, 255, .075);
  --glass-bg-card: rgba(255, 255, 255, .105);
  --glass-border: rgba(255, 255, 255, .22);
  --glass-highlight: rgba(255, 255, 255, .28);
  --glass-blur: blur(30px) saturate(1.65);
  --card-shadow: 0 18px 48px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .16);
}

:root[data-theme="dark"] {
  --bg: #05070b;
  --surface: rgba(18, 21, 29, .62);
  --surface-2: rgba(255, 255, 255, .07);
  --surface-3: rgba(255, 255, 255, .12);
  --border: rgba(255, 255, 255, .10);
  --border-2: rgba(255, 255, 255, .18);
  --glass-bg: rgba(18, 21, 29, .60);
  --glass-bg-2: rgba(255, 255, 255, .07);
  --glass-bg-card: rgba(255, 255, 255, .11);
  --glass-border: rgba(255, 255, 255, .15);
  --glass-highlight: rgba(255, 255, 255, .17);
  --glass-blur: blur(28px) saturate(1.35);
  --card-shadow: 0 18px 46px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .08);
}

body {
  background:
    linear-gradient(135deg, rgba(59, 130, 246, .13) 0%, transparent 34%),
    linear-gradient(315deg, rgba(20, 184, 166, .12) 0%, transparent 38%),
    var(--bg) !important;
}

:root[data-theme="dim"] body,
:root[data-theme="dark"] body {
  background:
    linear-gradient(135deg, rgba(96, 165, 250, .13) 0%, transparent 34%),
    linear-gradient(315deg, rgba(20, 184, 166, .10) 0%, transparent 38%),
    var(--bg) !important;
}

.app-topbar,
.spaces-drawer,
.bottom-nav,
.modal,
.backup-popover,
.search-modal,
.quick-modal,
.dropdown-menu {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  box-shadow: var(--shadow) !important;
}

.app-topbar {
  border-bottom: 1px solid var(--glass-border) !important;
}

.spaces-drawer {
  border-right: 1px solid var(--glass-border) !important;
}

/* Spaces drawer should read like a light glass layer, not a solid wall. */
:root[data-theme="dim"] .spaces-drawer,
:root[data-theme="dark"] .spaces-drawer {
  background: rgba(18, 21, 29, .30) !important;
  border-right-color: rgba(255, 255, 255, .075) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .035) !important;
}

:root[data-theme="dim"] .spaces-drawer-head,
:root[data-theme="dark"] .spaces-drawer-head,
:root[data-theme="dim"] .home-spaces,
:root[data-theme="dark"] .home-spaces {
  background: transparent !important;
}

:root[data-theme="dim"] .home-space-head:hover,
:root[data-theme="dark"] .home-space-head:hover,
:root[data-theme="dim"] .home-space-item:hover,
:root[data-theme="dark"] .home-space-item:hover,
:root[data-theme="dim"] .home-space-item-add:hover,
:root[data-theme="dark"] .home-space-item-add:hover {
  background: rgba(255, 255, 255, .055) !important;
}

.drawer-nav {
  border-bottom-color: var(--border) !important;
}

.bottom-nav {
  border-top: 1px solid var(--glass-border) !important;
  box-shadow: 0 -12px 30px rgba(24, 36, 58, .10), inset 0 1px 0 var(--glass-highlight) !important;
}

@media (min-width: 1000px) {
  .app-topbar,
  .spaces-drawer {
    background: var(--glass-bg) !important;
  }
}

.home-list-item, .home-card,
.at-task, .visit-row, .rev-row,
.task-body, .task-card,
.cal-day-panel, .streak-stat, .meeting-row, .release-row,
.version-card, .issue-card, .att-section, .dsection,
#meeting-list .robot-item, #meetings .robot-item {
  background: var(--glass-bg-card) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--card-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
}

.home-list-item:hover, .home-card:hover,
.at-task:hover, .visit-row:hover, .rev-row:hover,
.task-card:hover, .cal-day-panel:hover,
#meeting-list .robot-item:hover, #meetings .robot-item:hover {
  background: var(--surface-3) !important;
  border-color: var(--border-2) !important;
  box-shadow: var(--shadow) !important;
}

.rev-row.active,
#meeting-list .robot-item.active, #meetings .robot-item.active,
.drawer-nav-btn.active, .bnav-btn.active {
  background: linear-gradient(180deg, rgba(59, 130, 246, .18), rgba(59, 130, 246, .08)) !important;
  border-color: rgba(59, 130, 246, .36) !important;
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="password"], input[type="number"],
input[type="search"], input[type="date"], input[type="color"],
input:not([type]), textarea, select,
.home-search-pill {
  background: var(--glass-bg-2) !important;
  border-color: var(--glass-border) !important;
  backdrop-filter: blur(16px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight) !important;
}

.btn-ghost,
.icon-btn, .topbar-icon-btn, .topbar-avatar-btn, .modal-close,
.md-back-btn, .bp-icon-btn, .home-section-icon-btn,
.cal-nav,
.rev-period-btn,
.drawer-nav-btn {
  background: rgba(255, 255, 255, .18) !important;
  border-color: rgba(255, 255, 255, .24) !important;
  backdrop-filter: blur(14px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.25) !important;
}

:root[data-theme="dim"] .btn-ghost,
:root[data-theme="dark"] .btn-ghost,
:root[data-theme="dim"] .icon-btn,
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dim"] .topbar-icon-btn,
:root[data-theme="dark"] .topbar-icon-btn,
:root[data-theme="dim"] .topbar-avatar-btn,
:root[data-theme="dark"] .topbar-avatar-btn,
:root[data-theme="dim"] .drawer-nav-btn,
:root[data-theme="dark"] .drawer-nav-btn {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .11) !important;
}

.btn-primary,
.bnav-fab {
  box-shadow: 0 14px 28px rgba(37, 99, 235, .28), inset 0 1px 0 rgba(255, 255, 255, .30) !important;
}

.modal-overlay,
.backup-backdrop,
.spaces-drawer-backdrop {
  backdrop-filter: blur(12px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.18) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-topbar,
  .spaces-drawer,
  .bottom-nav,
  .modal,
  .backup-popover,
  .search-modal,
  .home-list-item, .home-card,
  .at-task, .visit-row, .rev-row,
  .task-body, .task-card,
  .cal-day-panel, .streak-stat {
    background: var(--surface) !important;
  }
}

/* Task list polish: dense rows inside a single glass panel */
#robot-content .dsection:has(#task-list) {
  background: var(--glass-bg-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--card-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

#robot-content .dsection:has(#task-list) .dsection-header {
  margin: 0 !important;
  padding: 8px 10px !important;
  background: rgba(255, 255, 255, .08) !important;
  border-bottom: 1px solid var(--border) !important;
}

#robot-content #task-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

#robot-content #task-list .task-item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin: 0 !important;
  overflow: visible !important;
}

#robot-content #task-list .task-item:last-child {
  border-bottom: 0 !important;
}

#robot-content #task-list .task-item:hover,
#robot-content #task-list .task-item.expanded {
  background: rgba(255, 255, 255, .07) !important;
}

:root[data-theme="dim"] #robot-content #task-list .task-item:hover,
:root[data-theme="dark"] #robot-content #task-list .task-item:hover,
:root[data-theme="dim"] #robot-content #task-list .task-item.expanded,
:root[data-theme="dark"] #robot-content #task-list .task-item.expanded {
  background: rgba(255, 255, 255, .045) !important;
}

#robot-content #task-list .task-header {
  min-height: 44px !important;
  padding: 9px 12px !important;
  gap: 10px !important;
}

#robot-content #task-list .task-dot {
  width: 9px !important;
  height: 9px !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .12) !important;
}

#robot-content #task-list .task-title-text {
  color: var(--text) !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

#robot-content #task-list .task-tags {
  gap: 6px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
}

#robot-content #task-list .task-label-chip,
#robot-content #task-list .task-due,
#robot-content #task-list .priority-tag,
#robot-content #task-list .status-tag,
#robot-content #task-list .nb-count {
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background: rgba(255, 255, 255, .08) !important;
  color: var(--muted) !important;
  padding: 0 7px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .15px !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

#robot-content #task-list .priority-tag.high,
#robot-content #task-list .priority-tag.critical {
  color: #f59e0b !important;
  background: rgba(245, 158, 11, .12) !important;
  border-color: rgba(245, 158, 11, .14) !important;
  text-transform: uppercase !important;
}

#robot-content #task-list .status-tag.active {
  color: #4ade80 !important;
  background: rgba(34, 197, 94, .12) !important;
  border-color: rgba(34, 197, 94, .16) !important;
  text-transform: uppercase !important;
}

#robot-content #task-list .task-due.overdue,
#robot-content #task-list .task-due.yesterday {
  color: #f87171 !important;
  background: rgba(248, 113, 113, .12) !important;
  border-color: rgba(248, 113, 113, .16) !important;
}

#robot-content #task-list .task-assignee-chip {
  width: 21px !important;
  height: 21px !important;
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

#robot-content #task-list .expand-chevron {
  width: 22px !important;
  height: 22px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 7px !important;
  color: var(--muted-2) !important;
}

#robot-content #task-list .task-item:hover .expand-chevron {
  background: rgba(255, 255, 255, .08) !important;
  color: var(--text) !important;
}

#robot-content #task-list .task-body {
  padding: 0 14px 14px 40px !important;
  background: rgba(0, 0, 0, .035) !important;
}

#robot-content #task-list .task-body-inner {
  border-top-color: var(--border) !important;
}

@media (max-width: 700px) {
  #robot-content #task-list .task-header {
    align-items: flex-start !important;
  }

  #robot-content #task-list .task-tags {
    flex-wrap: wrap !important;
  }
}

/* Theme consistency pass: align controls, pills, tabs and dark shadows */
:root {
  --glass-control: rgba(255, 255, 255, .20);
  --glass-control-hover: rgba(255, 255, 255, .30);
  --glass-chip: rgba(255, 255, 255, .16);
  --glass-chip-border: rgba(255, 255, 255, .34);
  --glass-active: linear-gradient(180deg, rgba(59, 130, 246, .26), rgba(59, 130, 246, .12));
  --glass-active-border: rgba(59, 130, 246, .44);
}

:root[data-theme="dim"] {
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .16);
  --shadow: 0 16px 40px rgba(0, 0, 0, .24);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, .34);
  --glass-control: rgba(255, 255, 255, .065);
  --glass-control-hover: rgba(255, 255, 255, .115);
  --glass-chip: rgba(255, 255, 255, .075);
  --glass-chip-border: rgba(255, 255, 255, .18);
  --glass-active: linear-gradient(180deg, rgba(96, 165, 250, .24), rgba(96, 165, 250, .10));
  --glass-active-border: rgba(96, 165, 250, .42);
}

:root[data-theme="dark"] {
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .20);
  --shadow: 0 16px 42px rgba(0, 0, 0, .30);
  --shadow-lg: 0 30px 76px rgba(0, 0, 0, .42);
  --glass-control: rgba(255, 255, 255, .065);
  --glass-control-hover: rgba(255, 255, 255, .11);
  --glass-chip: rgba(255, 255, 255, .075);
  --glass-chip-border: rgba(255, 255, 255, .11);
}

.app-topbar,
.spaces-drawer,
.bottom-nav {
  box-shadow: var(--shadow) !important;
}

.count-pill,
.nb-count,
.task-label-chip,
.task-due,
.priority-tag,
.status-tag,
.severity-tag,
.issue-status-tag,
.at-task-prio,
.cal-day-event,
.home-goal-badge-space {
  border: 1px solid var(--glass-chip-border) !important;
  background: var(--glass-chip) !important;
  color: var(--muted) !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight) !important;
}

.inner-tabs,
.reviews-period-toggle,
.lang-switcher,
.theme-toggle {
  background: var(--glass-control) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight) !important;
  backdrop-filter: blur(16px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
}

.inner-tab,
.lang-btn,
.theme-btn {
  color: var(--muted) !important;
}

.inner-tab:hover,
.lang-btn:hover,
.theme-btn:hover,
.drawer-nav-btn:hover,
.btn-ghost:hover,
.icon-btn:hover,
.topbar-icon-btn:hover,
.topbar-avatar-btn:hover,
.modal-close:hover,
.md-back-btn:hover,
.bp-icon-btn:hover,
.home-section-icon-btn:hover,
.cal-nav:hover {
  background: var(--glass-control-hover) !important;
  border-color: var(--border-2) !important;
  color: var(--text) !important;
}

.inner-tab.active,
.lang-btn.active,
.theme-btn.active,
.rev-period-btn.active,
.drawer-nav-btn.active,
.bnav-btn.active,
.tab.active {
  background: var(--glass-active) !important;
  border-color: var(--glass-active-border) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.drawer-nav-btn.active svg,
.bnav-btn.active svg,
.tab.active svg {
  color: var(--accent) !important;
}

.priority-tag.high,
.priority-tag.critical,
.at-task-prio.high,
.at-task-prio.critical {
  color: #f59e0b !important;
  background: rgba(245, 158, 11, .12) !important;
  border-color: rgba(245, 158, 11, .18) !important;
}

.status-tag.active,
.issue-status-tag.resolved {
  color: #4ade80 !important;
  background: rgba(34, 197, 94, .12) !important;
  border-color: rgba(34, 197, 94, .18) !important;
}

.bottom-nav .bnav-btn,
.bottom-nav .tab.bnav-btn {
  --nav-color: var(--accent);
  overflow: hidden;
  color: var(--muted) !important;
}
.bottom-nav .bnav-btn:nth-child(1) { --nav-color: #60a5fa; }
.bottom-nav .bnav-btn:nth-child(2) { --nav-color: #fb7185; }
.bottom-nav .bnav-btn:nth-child(3) { --nav-color: #a78bfa; }
.bottom-nav .bnav-btn:nth-child(4) { --nav-color: #38bdf8; }

.bottom-nav .bnav-btn svg {
  color: var(--nav-color) !important;
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.85 !important;
}

.bottom-nav .bnav-btn.active,
.bottom-nav .tab.bnav-btn.active {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
}

.bottom-nav .bnav-btn::before {
  top: 5px !important;
  left: 50% !important;
  width: min(58px, calc(100% - 10px)) !important;
  height: calc(100% - 10px) !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  opacity: 0;
  box-shadow: none !important;
  transform: translateX(-50%) !important;
  transition: opacity .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
}

.bottom-nav .bnav-btn.active::before {
  background: color-mix(in srgb, var(--nav-color) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--nav-color) 34%, transparent) !important;
  opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 18px color-mix(in srgb, var(--nav-color) 12%, transparent) !important;
}

.bottom-nav .bnav-btn:hover::before {
  background: color-mix(in srgb, var(--nav-color) 10%, transparent) !important;
  opacity: 1;
}

.bottom-nav .bnav-btn svg,
.bottom-nav .bnav-btn > span {
  position: relative;
  z-index: 1;
}

.task-due.overdue,
.task-due.yesterday,
.severity-tag.critical,
.issue-status-tag.open {
  color: #f87171 !important;
  background: rgba(248, 113, 113, .12) !important;
  border-color: rgba(248, 113, 113, .18) !important;
}

.dsection:not(:has(#task-list)) {
  padding: 14px 16px !important;
}

.dsection:not(:has(#task-list)) .dsection-header {
  margin: -2px 0 12px !important;
}

/* Desktop rail polish: keep every nav item readable in the narrow column */
@media (min-width: 1000px) {
  .spaces-drawer {
    grid-template-columns: 74px 260px !important;
    width: 334px !important;
  }

  .drawer-nav {
    padding: 10px 10px !important;
    gap: 4px !important;
    background: var(--glass-bg) !important;
    border-right: 1px solid var(--glass-border) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .05) !important;
    scrollbar-width: none !important;
  }
  .drawer-nav::-webkit-scrollbar { display: none !important; }

  .drawer-nav-btn {
    --rail-color: var(--accent);
    width: 54px !important;
    min-height: 50px !important;
    padding: 6px 3px 5px !important;
    gap: 3px !important;
    border-radius: 11px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    color: var(--muted) !important;
  }

  .drawer-nav-btn:nth-child(1)  { --rail-color: #60a5fa; }
  .drawer-nav-btn:nth-child(2)  { --rail-color: #fb7185; }
  .drawer-nav-btn:nth-child(3)  { --rail-color: #a78bfa; }
  .drawer-nav-btn:nth-child(4)  { --rail-color: #38bdf8; }
  .drawer-nav-btn:nth-child(5)  { --rail-color: #f59e0b; }
  .drawer-nav-btn:nth-child(6)  { --rail-color: #34d399; }
  .drawer-nav-btn:nth-child(7)  { --rail-color: #2dd4bf; }
  .drawer-nav-btn:nth-child(8)  { --rail-color: #e879f9; }
  .drawer-nav-btn:nth-child(9)  { --rail-color: #818cf8; }
  .drawer-nav-btn:nth-child(10) { --rail-color: #22c55e; }
  .drawer-nav-btn:nth-child(11) { --rail-color: #f472b6; }
  .drawer-nav-btn:nth-child(12) { --rail-color: #93c5fd; }

  .drawer-nav-btn svg {
    width: 17px !important;
    height: 17px !important;
    color: var(--rail-color) !important;
    stroke-width: 1.85 !important;
  }

  .drawer-nav-btn span {
    width: 50px !important;
    max-width: 50px !important;
    min-height: 11px !important;
    max-height: 20px !important;
    font-size: 9px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
  }

  .drawer-nav-btn:hover {
    background: color-mix(in srgb, var(--rail-color) 10%, transparent) !important;
    border-color: transparent !important;
    color: var(--text) !important;
    transform: none !important;
  }

  .drawer-nav-btn.active {
    background: color-mix(in srgb, var(--rail-color) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--rail-color) 34%, transparent) !important;
    color: var(--text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 20px color-mix(in srgb, var(--rail-color) 12%, transparent) !important;
  }

  .drawer-nav-btn:has(#drawer-inbox-badge:not([hidden]))::after {
    top: 7px !important;
    right: 9px !important;
    border-color: var(--glass-bg) !important;
  }
}

/* Project task list: match the separate-card rhythm used by All Tasks */
#robot-content .dsection:has(#task-list) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

#robot-content .dsection:has(#task-list) .dsection-header {
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border-bottom: 0 !important;
}

#robot-content #task-list {
  gap: 8px !important;
}

#robot-content #task-list .task-item {
  background: var(--glass-bg-card) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--card-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
  margin: 0 0 8px !important;
  overflow: hidden !important;
}

#robot-content #task-list .task-item:hover,
#robot-content #task-list .task-item.expanded {
  background: var(--surface-3) !important;
  border-color: var(--border-2) !important;
  box-shadow: var(--shadow) !important;
}

#robot-content #task-list .task-header {
  min-height: 48px !important;
  padding: 11px 14px !important;
}

#robot-content #task-list .task-body {
  margin: 0 8px 8px !important;
  padding: 12px 14px 14px !important;
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid var(--glass-chip-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:root[data-theme="dim"] #robot-content #task-list .task-body,
:root[data-theme="dark"] #robot-content #task-list .task-body {
  background: rgba(255, 255, 255, .055) !important;
}

#robot-content #task-list .task-body-inner {
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* Button polish: align primary actions with the glass system */
.btn-primary,
.btn-add,
.nb-add-btn,
.sub-add-btn,
.action-add-btn,
.home-shared-import {
  min-height: 34px !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(96, 165, 250, .34) !important;
  background:
    linear-gradient(180deg, rgba(96, 165, 250, .30), rgba(59, 130, 246, .18)) !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 8px 20px rgba(37, 99, 235, .14) !important;
  backdrop-filter: blur(14px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.25) !important;
  transition: background .14s var(--ease), border-color .14s var(--ease), box-shadow .14s var(--ease) !important;
}

.btn-primary:hover,
.btn-add:hover,
.nb-add-btn:hover,
.sub-add-btn:hover,
.action-add-btn:hover,
.home-shared-import:hover {
  background:
    linear-gradient(180deg, rgba(96, 165, 250, .40), rgba(59, 130, 246, .24)) !important;
  border-color: rgba(96, 165, 250, .48) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 24px rgba(37, 99, 235, .18) !important;
}

.btn-primary:active,
.btn-add:active,
.nb-add-btn:active,
.sub-add-btn:active,
.action-add-btn:active {
  transform: translateY(1px) !important;
}

.btn-ghost,
.btn-sm,
.btn-mini,
.quick-date-quick,
.home-section-add,
.cal-add-event-btn {
  border-radius: 10px !important;
  background: var(--glass-control) !important;
  border: 1px solid var(--glass-chip-border) !important;
  color: var(--muted) !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
}

.btn-ghost:hover,
.btn-sm:hover,
.btn-mini:hover,
.quick-date-quick:hover,
.home-section-add:hover,
.cal-add-event-btn:hover {
  background: var(--glass-control-hover) !important;
  border-color: var(--border-2) !important;
  color: var(--text) !important;
}

.btn-sm,
.btn-mini {
  min-height: 28px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
}

/* Reviews period switcher: one calm segmented control, not two big pills */
.reviews-period-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 3px !important;
  min-height: 34px !important;
  background: var(--glass-control) !important;
  border: 1px solid var(--glass-chip-border) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
}

.reviews-period-toggle .rev-period-btn {
  min-height: 28px !important;
  padding: 6px 13px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  line-height: 1.1 !important;
}

.reviews-period-toggle .rev-period-btn:hover {
  background: var(--glass-control-hover) !important;
  color: var(--text) !important;
  border-color: transparent !important;
}

.reviews-period-toggle .rev-period-btn.active {
  background: var(--glass-active) !important;
  border-color: var(--glass-active-border) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

/* Backup popover: bring Drive/settings panel into the glass system */
.backup-backdrop.open {
  background: rgba(3, 7, 18, .42) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
}

.backup-popover {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  width: 420px !important;
  padding: 22px !important;
  gap: 16px !important;
}

#bp-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.bp-account,
.bp-meta,
.bp-settings-block {
  background: var(--glass-bg-card) !important;
  border: 1px solid var(--glass-chip-border) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight) !important;
}

.bp-account {
  padding: 14px !important;
  gap: 12px !important;
}

.bp-meta {
  padding: 8px 12px !important;
}

.bp-settings-block {
  padding: 14px !important;
  margin-top: 0 !important;
}
.bp-restore-safety {
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid rgba(251, 191, 36, .34);
  background: rgba(146, 64, 14, .14);
  color: #fde68a;
  border-radius: 10px;
  padding: 9px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.bp-restore-safety:hover {
  background: rgba(146, 64, 14, .22);
}

:root[data-theme="light"] .bp-restore-safety {
  border-color: rgba(180, 83, 9, .34) !important;
  background: rgba(245, 158, 11, .12) !important;
  color: #92400e !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .bp-restore-safety:hover {
  background: rgba(245, 158, 11, .18) !important;
  border-color: rgba(180, 83, 9, .46) !important;
}

.bp-meta-row {
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 0 !important;
  gap: 14px !important;
}

.bp-meta-label {
  min-width: 98px !important;
}

.bp-icon-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: var(--glass-control) !important;
  border-color: var(--glass-chip-border) !important;
}

.bp-icon-btn:hover {
  background: var(--glass-control-hover) !important;
}

.bp-actions {
  gap: 10px !important;
  margin: 0 !important;
}

.bp-actions .btn-primary,
.bp-actions .btn-ghost {
  min-height: 42px !important;
  padding: 11px 14px !important;
  gap: 8px !important;
  border-radius: 10px !important;
}

@media (max-width: 720px) {
  .backup-popover {
    width: auto !important;
    left: 12px !important;
    right: 12px !important;
  }
}

@media (max-width: 480px) {
  .backup-popover {
    width: calc(100vw - 20px) !important;
    left: 10px !important;
    right: 10px !important;
    padding: 18px !important;
  }

  .bp-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Space options menu: keep it legible over the translucent sidebar tree. */
.space-menu {
  z-index: 900 !important;
  min-width: 188px !important;
  padding: 6px !important;
  background: rgba(22, 27, 36, .68) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(28px) saturate(1.32) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.32) !important;
}

:root[data-theme="light"] .space-menu {
  background: rgba(255, 255, 255, .74) !important;
  border-color: rgba(15, 23, 42, .12) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

.space-menu-item {
  color: var(--text) !important;
  background: transparent !important;
  text-shadow: none !important;
}

.space-menu-item:hover {
  background: rgba(255, 255, 255, .13) !important;
}

:root[data-theme="light"] .space-menu-item:hover {
  background: rgba(15, 23, 42, .06) !important;
}

.space-menu-item svg {
  color: currentColor !important;
  opacity: .72 !important;
}

.space-menu-sep {
  background: rgba(255, 255, 255, .12) !important;
}

.bp-theme-toggle,
.theme-toggle {
  background: var(--glass-control) !important;
  border: 1px solid var(--glass-chip-border) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 var(--glass-highlight) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
}

.theme-toggle-btn {
  border-radius: 9px !important;
  color: var(--muted) !important;
}

.theme-toggle-btn.active {
  background: var(--glass-active) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.bp-version {
  color: var(--muted-2) !important;
}

/* Calendar toolbar spacing */
.cal-container {
  gap: 18px !important;
}

.cal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 0 12px !important;
  padding: 0 2px !important;
}

.cal-title-group,
.cal-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.cal-title-group {
  flex: 1 1 auto !important;
}

.cal-actions {
  flex: 0 0 auto !important;
}

.cal-header h2 {
  flex: 0 1 auto !important;
  margin: 0 8px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

.cal-nav {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
}

.cal-today-btn,
.cal-export-btn {
  min-height: 36px !important;
  padding: 8px 14px !important;
}

.cal-body {
  margin-top: 0 !important;
}

@media (max-width: 700px) {
  .cal-header {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .cal-title-group,
  .cal-actions {
    width: 100% !important;
  }

  .cal-actions {
    justify-content: flex-end !important;
  }
}

/* Desktop rail: match the mobile nav language; no default boxed buttons. */
@media (min-width: 1000px) {
  .drawer-nav .drawer-nav-btn {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .spaces-drawer .drawer-nav .drawer-nav-btn:not(.active):not(:hover) {
    background: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .drawer-nav .drawer-nav-btn:hover {
    background: color-mix(in srgb, var(--rail-color) 9%, transparent) !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .drawer-nav .drawer-nav-btn.active {
    background: color-mix(in srgb, var(--rail-color) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--rail-color) 34%, transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 20px color-mix(in srgb, var(--rail-color) 12%, transparent) !important;
  }
}


/* ════════════════════════════════════════════════════════════
   Reviews list — fill the available height in master (list) view
   instead of squishing to the top with empty space below.
   ════════════════════════════════════════════════════════════ */
@media (min-width: 1000px) {
  #reviews:not([data-detail-open="true"]) .fv-container {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  #reviews:not([data-detail-open="true"]) .reviews-layout {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 14px;
  }
  #reviews:not([data-detail-open="true"]) .reviews-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   QUICK NOTES — Drive-synced global scratchpad.
   • < 1200px: off-canvas drawer sliding in from the right,
     toggled by the topbar note button.
   • ≥ 1200px: a permanent third grid column (always visible).
   ════════════════════════════════════════════════════════════ */
.quick-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  background: var(--surface);
  /* mobile/tablet: off-canvas drawer */
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(380px, 88vw);
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px rgba(15, 23, 42, .18);
  transform: translateX(100%);
  transition: transform .25s var(--ease, ease);
  z-index: 70;
  overflow: hidden;
}
body.quick-notes-open .quick-notes { transform: translateX(0); }

.quick-notes-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .35);
  z-index: 69;
}
body.quick-notes-open .quick-notes-backdrop { display: block; }

.quick-notes-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.quick-notes-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.quick-notes-title svg { color: var(--accent); }
.quick-notes-saved {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.quick-notes-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.quick-notes-close:hover { background: var(--surface-2); color: var(--text); }
.quick-notes-area {
  flex: 1 1 0;
  align-self: stretch;
  height: auto;
  min-height: 0;
  max-height: none;
  width: 100%;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  padding: 14px 16px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.7;
  box-sizing: border-box;
  overflow-y: auto;
}
.quick-notes-area:focus { outline: none; border-color: var(--accent); }
.quick-notes-area::placeholder { color: var(--muted-2, var(--muted)); }

@media (min-width: 1200px) {
  .quick-notes {
    grid-area: notes;
    position: static;
    transform: none !important;
    width: auto;
    height: 100dvh;
    z-index: auto;
    box-shadow: none;
    padding: 16px 16px 18px;
  }
  .quick-notes-close { display: none; }
  .quick-notes-backdrop { display: none !important; }
  #topbar-notes-btn { display: none !important; }
}

/* Reviews redesign */
#reviews .fv-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  min-height: 0 !important;
}

#reviews .fv-header {
  align-items: flex-start !important;
  gap: 16px !important;
  margin-bottom: 0 !important;
}

#reviews .finance-header-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

#reviews .reviews-period-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 4px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent) !important;
}

#reviews .rev-period-btn {
  min-height: 34px !important;
  padding: 7px 13px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#reviews .rev-period-btn:hover {
  color: var(--text) !important;
  background: var(--surface) !important;
}

#reviews .rev-period-btn.active {
  color: var(--text) !important;
  background: var(--surface) !important;
  border: 0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08) !important;
}

#reviews #rev-current-btn {
  min-height: 38px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

#reviews .reviews-layout {
  display: grid !important;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
  margin-top: 0 !important;
  min-height: 0 !important;
}

#reviews .reviews-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 190px) !important;
  overflow-y: auto !important;
  padding: 2px 2px 6px !important;
}

#reviews .rev-row {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 7px !important;
  min-height: 92px !important;
  padding: 14px 14px 13px 16px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#reviews .rev-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: var(--border-2);
}

#reviews .rev-row.has-notes::before { background: #22c55e; }

#reviews .rev-row:hover {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
}

#reviews .rev-row.active {
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border)) !important;
}

#reviews .rev-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

#reviews .rev-row-label {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

#reviews .rev-row-badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 80%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}

#reviews .rev-row-preview {
  display: -webkit-box;
  max-width: 100%;
  min-height: 32px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#reviews .rev-row.is-empty .rev-row-preview {
  color: color-mix(in srgb, var(--muted) 68%, transparent);
}

#reviews .rev-row-meta {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

#reviews .reviews-editor {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  min-width: 0 !important;
  min-height: calc(100dvh - 190px) !important;
  padding: 18px !important;
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
}

#reviews .reviews-editor-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

#reviews .reviews-editor-period {
  flex: 1;
  min-width: 0;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 850;
  line-height: 1.15;
}

#reviews .rev-delete-btn {
  border-radius: 9px !important;
  color: var(--muted) !important;
}

#reviews .rev-goals-section,
#reviews .rev-space-goals-section,
#reviews .rev-completed-section {
  padding: 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent) !important;
}

#reviews .rev-section-header {
  padding: 0 0 10px !important;
  margin: 0 0 10px !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: .06em !important;
}

#reviews .rev-notes-header {
  margin: 4px 0 -4px !important;
  border-bottom: 0 !important;
}

#reviews .rev-goals-list,
#reviews .rev-completed-list {
  gap: 7px !important;
  margin-bottom: 10px !important;
}

#reviews .rev-goal-item,
#reviews .rev-completed-item {
  min-height: 38px;
  padding: 9px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 11px !important;
  background: var(--surface) !important;
}

#reviews .rev-goal-title,
#reviews .rev-completed-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.35;
}

#reviews .rev-goal-add {
  gap: 8px !important;
  margin-top: 8px !important;
}

#reviews .rev-goal-input {
  min-width: 0 !important;
  height: 38px !important;
}

#reviews .note-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: -2px 0 -6px;
}

#reviews .reviews-textarea {
  flex: 1 1 auto !important;
  min-height: 320px !important;
  width: 100% !important;
  padding: 16px !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: color-mix(in srgb, var(--bg) 62%, var(--surface)) !important;
  color: var(--text) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  resize: vertical !important;
}

#reviews .reviews-editor-foot {
  min-height: 18px;
  justify-content: flex-end;
  color: var(--muted);
}

@media (min-width: 1500px) {
  #reviews.section .reviews-layout,
  #reviews.section[data-detail-open="true"] .reviews-layout,
  #reviews.section:not([data-detail-open="true"]) .reviews-layout {
    display: grid !important;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  #reviews.section .reviews-list,
  #reviews.section[data-detail-open="true"] .reviews-list,
  #reviews.section:not([data-detail-open="true"]) .reviews-list {
    display: flex !important;
  }

  #reviews.section .reviews-editor,
  #reviews.section[data-detail-open="true"] .reviews-editor,
  #reviews.section:not([data-detail-open="true"]) .reviews-editor {
    display: flex !important;
  }

  #reviews .md-back-btn {
    display: none !important;
  }
}

@media (max-width: 899px) {
  #reviews .fv-container {
    padding: 18px 14px calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #reviews .fv-header,
  #reviews .finance-header-actions {
    align-items: stretch !important;
  }

  #reviews .finance-header-actions,
  #reviews .reviews-period-toggle,
  #reviews #rev-current-btn {
    width: 100% !important;
  }

  #reviews .reviews-period-toggle {
    justify-content: stretch !important;
  }

  #reviews .rev-period-btn {
    flex: 1 1 0 !important;
  }

  #reviews .reviews-layout {
    display: block !important;
  }

  #reviews:not([data-detail-open="true"]) .reviews-editor {
    display: none !important;
  }

  #reviews[data-detail-open="true"] .reviews-list {
    display: none !important;
  }

  #reviews .reviews-list {
    max-height: none !important;
  }

  #reviews .reviews-editor {
    min-height: calc(100dvh - 150px) !important;
    padding: 14px !important;
  }

  #reviews .reviews-editor-period {
    font-size: 18px;
  }

  #reviews .reviews-textarea {
    min-height: 300px !important;
  }
}

/* Reviews/Quick Notes stabilization after the redesign */
@media (max-width: 1199px) {
  .quick-notes {
    background: var(--bg) !important;
    opacity: 1 !important;
    z-index: 1300 !important;
    box-shadow: -18px 0 42px rgba(15, 23, 42, .24) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .quick-notes-backdrop {
    z-index: 1290 !important;
    background: rgba(15, 23, 42, .58) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .quick-notes-area {
    background: #ffffff !important;
  }
}

:root[data-theme="dim"] .quick-notes-area,
:root[data-theme="dark"] .quick-notes-area {
  background: var(--surface) !important;
}

@media (min-width: 1100px) {
  #reviews .fv-container {
    max-width: none !important;
  }

  #reviews.section .reviews-layout,
  #reviews.section[data-detail-open="true"] .reviews-layout,
  #reviews.section:not([data-detail-open="true"]) .reviews-layout {
    display: grid !important;
    grid-template-columns: minmax(270px, 315px) minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 20px !important;
    height: calc(100dvh - 132px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #reviews.section .reviews-list,
  #reviews.section[data-detail-open="true"] .reviews-list,
  #reviews.section:not([data-detail-open="true"]) .reviews-list {
    display: flex !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  #reviews.section .reviews-editor,
  #reviews.section[data-detail-open="true"] .reviews-editor,
  #reviews.section:not([data-detail-open="true"]) .reviews-editor {
    display: flex !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
  }

  #reviews .md-back-btn {
    display: none !important;
  }

  #reviews .reviews-textarea {
    flex: 0 0 auto !important;
    min-height: 260px !important;
  }
}

@media (min-width: 1100px) and (max-width: 1320px) {
  #reviews.section .reviews-layout,
  #reviews.section[data-detail-open="true"] .reviews-layout,
  #reviews.section:not([data-detail-open="true"]) .reviews-layout {
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  #reviews .rev-row {
    min-height: 82px !important;
    padding: 12px 12px 11px 15px !important;
  }

  #reviews .reviews-editor {
    padding: 16px !important;
  }
}

/* Desktop primary nav: floating bottom island instead of the left rail. */
@media (min-width: 1000px) {
  body {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
      "sidebar topbar"
      "sidebar main" !important;
    overflow: hidden !important;
  }

  .spaces-drawer {
    position: static !important;
    grid-area: sidebar !important;
    display: flex !important;
    flex-direction: column !important;
    width: 260px !important;
    height: 100dvh !important;
    padding: 14px 8px !important;
    grid-template-columns: none !important;
    transform: none !important;
    background: var(--surface) !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .app-topbar {
    grid-area: topbar !important;
  }

  main {
    grid-area: main !important;
  }

  .spaces-drawer-head,
  .home-spaces,
  .spaces-drawer-section {
    grid-column: auto !important;
  }

  .spaces-drawer-head {
    grid-row: auto !important;
    border-left: 0 !important;
  }

  .home-spaces {
    flex: 1 1 auto !important;
    grid-row: auto !important;
    border-left: 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .drawer-nav {
    position: fixed !important;
    left: 50vw !important;
    right: auto !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    z-index: 3000 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    max-width: min(760px, calc(100vw - 32px)) !important;
    height: auto !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent) !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
    backdrop-filter: blur(18px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
    overflow: visible !important;
    scrollbar-width: none !important;
  }

  .drawer-nav-btn {
    width: 58px !important;
    min-width: 58px !important;
    min-height: 54px !important;
    padding: 6px 5px !important;
    border-radius: 15px !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
  }

  .drawer-nav-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  .drawer-nav-btn span {
    width: 52px !important;
    max-width: 52px !important;
    min-height: 11px !important;
    font-size: 9.5px !important;
    line-height: 1.08 !important;
  }

  .drawer-nav-btn.active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 24px color-mix(in srgb, var(--rail-color) 14%, transparent) !important;
  }

  .drawer-nav-btn:has(#drawer-inbox-badge:not([hidden]))::after {
    top: 6px !important;
    right: 9px !important;
    border-color: var(--surface) !important;
  }

  .section.active {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (min-width: 1000px) {
  :root[data-theme="light"] .drawer-nav {
    background: rgba(255, 255, 255, .94) !important;
    border-color: rgba(148, 163, 184, .34) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .86) !important;
  }
}

@media (min-width: 1200px) {
  body {
    grid-template-columns: 260px minmax(0, 1fr) 320px !important;
    grid-template-areas:
      "sidebar topbar notes"
      "sidebar main   notes" !important;
  }

  .quick-notes {
    width: auto !important;
    min-width: 0 !important;
  }
}

@media (min-width: 1600px) {
  body {
    grid-template-columns: 260px minmax(0, 1fr) 360px !important;
  }
}

@media (min-width: 1000px) {
  #inbox.section.active {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #inbox .fv-container {
    width: min(100%, 1040px) !important;
    max-width: 1040px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  #inbox-list {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Floating mobile dock occupies ~88px at the bottom — give scroll
   containers enough bottom clearance so the last item isn't hidden. */
@media (max-width: 999px) {
  .section.active { scroll-padding-bottom: 110px !important; }
  .fv-container,
  .home-container,
  .cal-container,
  .reviews-container,
  #inbox-list,
  .more-page {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ════════════════════════════════════════════════════════════
   Shared frosted-glass material for the nav docks.
   The global "universal kill" stripped backdrop-blur; re-enable it for
   the mobile floating pill and the desktop sidebar so both read as the
   same frosted glass (translucent surface + blur). Higher specificity +
   later source order overrides the `* { backdrop-filter:none }` kill and
   the per-theme solid sidebar backgrounds.
   ════════════════════════════════════════════════════════════ */
:root                    { --dock-glass: rgba(255, 255, 255, .60); --dock-glass-border: rgba(15, 20, 30, .10); }
:root[data-theme="dim"]  { --dock-glass: rgba(28, 33, 43, .55);   --dock-glass-border: rgba(255, 255, 255, .10); }
:root[data-theme="dark"] { --dock-glass: rgba(14, 18, 26, .55);   --dock-glass-border: rgba(255, 255, 255, .09); }

.bnav-dock .bottom-nav,
.spaces-drawer,
:root[data-theme="dim"] .spaces-drawer,
:root[data-theme="dark"] .spaces-drawer {
  background: var(--dock-glass) !important;
  backdrop-filter: blur(18px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
}
.bnav-dock .bottom-nav {
  border: 1px solid var(--dock-glass-border) !important;
}