:root {
  color-scheme: light;
  --bg: #f6f5f3;
  --surface: #ffffff;
  --surface-alt: #fbfaf8;
  --border: #e4e1da;
  --text: #221f1a;
  --text-muted: #6b6459;
  --text-faint: #97907f;
  --accent: #7a5c3e;
  --accent-dark: #5c4530;
  --accent-soft: #f1e9de;
  --success: #2f6d4f;
  --success-soft: #e5f1ea;
  --warn: #a3651c;
  --warn-soft: #fbeee0;
  --danger: #a3392f;
  --danger-soft: #fbe9e6;
  --info: #35618f;
  --info-soft: #e7eef6;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(34, 31, 26, 0.06), 0 4px 16px rgba(34, 31, 26, 0.06);
  --shadow-lg: 0 8px 32px rgba(34, 31, 26, 0.14);
  font-synthesis: none;
}

/* Dark theme tokens. Applied when the OS prefers dark and the user has not forced light,
   or whenever the user picks Dark in the sidebar theme switch (html[data-theme="dark"]). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #171512;
    --surface: #211e19;
    --surface-alt: #2a2620;
    --border: #3a352c;
    --text: #f1ede4;
    --text-muted: #b8b0a0;
    --text-faint: #857c6c;
    --accent: #cba26e;
    --accent-dark: #e0bb8b;
    --accent-soft: #382c1e;
    --success: #6cbf95;
    --success-soft: #1e2f26;
    --warn: #d99a4e;
    --warn-soft: #332413;
    --danger: #e08379;
    --danger-soft: #331f1c;
    --info: #7fabd6;
    --info-soft: #1c2a38;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #171512;
    --surface: #211e19;
    --surface-alt: #2a2620;
    --border: #3a352c;
    --text: #f1ede4;
    --text-muted: #b8b0a0;
    --text-faint: #857c6c;
    --accent: #cba26e;
    --accent-dark: #e0bb8b;
    --accent-soft: #382c1e;
    --success: #6cbf95;
    --success-soft: #1e2f26;
    --warn: #d99a4e;
    --warn-soft: #332413;
    --danger: #e08379;
    --danger-soft: #331f1c;
    --info: #7fabd6;
    --info-soft: #1c2a38;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}


* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-dark); }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

input, select, textarea, button {
  font-family: inherit;
}

/* ---------- Login page ---------- */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px 32px;
}

.login-brand {
  text-align: center;
  margin-bottom: 28px;
}

.login-brand .mark {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.login-brand h1 {
  font-size: 19px;
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}

.login-brand p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}

.field { margin-bottom: 16px; }

.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}

.field input:focus {
  border-color: var(--accent);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  transition: opacity 0.15s, transform 0.05s;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  width: 100%;
  padding: 11px 16px;
}
.btn-primary:hover { opacity: 0.92; }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.btn-secondary:hover { background: var(--surface-alt); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover { color: var(--text); }

.btn-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.error-banner {
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}
.error-banner.show { display: block; }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
/* The nav list scrolls on its own so the footer (account, View as, theme,
   Sign out) always stays pinned and visible, however many tabs there are. */
.sidebar-brand, .sidebar-footer { flex-shrink: 0; }
#navList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -6px;
  padding: 0 6px 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#navList::-webkit-scrollbar { width: 6px; }
#navList::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
#navList::-webkit-scrollbar-track { background: transparent; }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.sidebar-brand .mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.sidebar-brand span { font-weight: 600; font-size: 14.5px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 13.5px;
  margin-bottom: 2px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.nav-item:hover { background: var(--surface-alt); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.nav-item .count {
  margin-left: auto;
  font-size: 11px;
  background: var(--border);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 600;
}
.nav-item.active .count { background: var(--accent); color: #fff; }

.sidebar-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.sidebar-footer .btn { padding-top: 7px; padding-bottom: 7px; }
.sidebar-footer .user-chip { padding-bottom: 6px; }
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 10px;
}
.user-chip .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.user-chip .email { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip .role { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; }

.main {
  flex: 1;
  min-width: 0;
  padding: 28px 32px 60px;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-header h2 { margin: 0 0 4px; font-size: 21px; }
.page-header p { margin: 0; color: var(--text-muted); font-size: 13px; }
.page-actions { display: flex; gap: 8px; align-items: center; }

/* ---------- Toolbar / search ---------- */
.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.search-box {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 380px;
}
.search-box input {
  width: 100%;
  padding: 9px 12px 9px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.search-box input:focus { border-color: var(--accent); }
.search-box .icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); pointer-events: none;
}
.select-filter {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}
.state-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.state-toggle-btn {
  padding: 6px 12px;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
}
.state-toggle-btn.on {
  background: var(--accent);
  color: #fff;
}

/* ---------- Stat tiles ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.stat-tile .num { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.stat-tile .label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ---------- Business list ---------- */
.biz-list { display: flex; flex-direction: column; gap: 8px; }

.biz-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
}
.biz-row:hover { border-color: #c9c2b3; }
.order-remove-btn { padding: 5px 10px; font-size: 12px; flex: none; }

.checkbox {
  width: 19px; height: 19px;
  border-radius: 5px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
}
.checkbox.checked { background: var(--success); border-color: var(--success); color: #fff; }

.biz-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.biz-name {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.biz-sub {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.badge-beauty { background: #f7e4ef; color: #9c3f74; }
.badge-trades { background: #e4ecf7; color: #395a8f; }
.badge-food { background: #fdecd6; color: #9c621c; }
.badge-retail { background: #e9e4f7; color: #5f4a9c; }
.badge-pet { background: #e0f2e9; color: #2f7d55; }
.badge-auto { background: #f7e4e4; color: #9c3f3f; }
.badge-other { background: var(--surface-alt); color: var(--text-muted); }

.notes-btn {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
}
.notes-btn.has-notes { color: var(--accent-dark); background: var(--accent-soft); border-color: transparent; }
.notes-btn:hover { border-color: var(--accent); }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state .big { font-size: 34px; margin-bottom: 8px; }

/* pagination */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 20px; color: var(--text-muted); font-size: 13px;
  flex-wrap: wrap;
}
.page-size-label {
  display: flex; align-items: center; gap: 8px;
  margin-left: 14px; padding-left: 14px;
  border-left: 1px solid var(--border);
  color: var(--text-muted); font-size: 13px;
}
.page-size-label .select-filter {
  width: auto; padding: 6px 10px; font-size: 13px;
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 18, 14, 0.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 100;
}
.modal {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 26px 26px 22px;
  margin-bottom: 40px;
}
.modal.modal-wide { max-width: 720px; }
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.modal-head h3 { margin: 0 0 4px; font-size: 18px; }
.modal-head .sub { font-size: 12.5px; color: var(--text-muted); }
.modal-close {
  border: none; background: var(--surface-alt); color: var(--text-muted);
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.modal-close:hover { color: var(--text); }

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-bottom: 18px;
}
.detail-grid .full { grid-column: 1 / -1; }
.detail-item .k {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-faint); margin-bottom: 3px; font-weight: 600;
}
.detail-item .v { font-size: 13.5px; color: var(--text); word-break: break-word; }
.detail-item .v.muted { color: var(--text-faint); font-style: italic; }
.detail-item .v.pitch { line-height: 1.55; }

.modal-section { margin-bottom: 16px; }
.modal-section > label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--text-muted); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.modal-section textarea {
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--text);
  resize: vertical;
  outline: none;
}
.modal-section textarea:focus { border-color: var(--accent); }

.modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 6px; border-top: 1px solid var(--border); margin-top: 4px;
}

.save-hint { font-size: 11.5px; color: var(--text-faint); margin-right: auto; align-self: center; }

/* stage stepper inside modal */
.stage-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.stage-pill {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}
.stage-pill.current { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Import dropzone ---------- */
.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 28px 20px;
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 20px;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone.drag-over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.dropzone .big { font-size: 26px; margin-bottom: 6px; }
.dropzone input[type=file] { display: none; }
.dropzone .browse-link { color: var(--accent-dark); font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ---------- Calendar ---------- */
.cal-search { margin-bottom: 18px; }
.cal-search-results {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-top: 6px;
  max-height: 260px;
  overflow-y: auto;
  display: none;
}
.cal-search-results.show { display: block; }
.cal-search-row {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 13.5px;
}
.cal-search-row:last-child { border-bottom: none; }
.cal-search-row:hover { background: var(--surface-alt); }
.cal-search-row .cs-sub { font-size: 11.5px; color: var(--text-muted); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cal-weekday {
  background: var(--surface-alt);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 0;
  letter-spacing: 0.03em;
}
.cal-day {
  background: var(--surface);
  min-height: 96px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cal-day.other-month { background: var(--surface-alt); }
.cal-day .day-num { font-size: 11.5px; color: var(--text-faint); font-weight: 600; }
.cal-day.today .day-num {
  background: var(--accent); color: #fff; border-radius: 50%;
  width: 19px; height: 19px; display: flex; align-items: center; justify-content: center;
}
.cal-event {
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 5px;
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: pointer;
}
.cal-event.type-call { background: var(--info-soft); color: var(--info); }
.cal-event.type-consultation { background: var(--success-soft); color: var(--success); }
.cal-event.type-billing { background: var(--warn-soft); color: var(--warn); }

.cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cal-nav h3 { margin: 0; font-size: 17px; min-width: 170px; text-align: center; }
.cal-icon-btn {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.cal-icon-btn:hover { background: var(--surface-alt); }

/* ---------- Forms (clients / invoices) ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.form-grid .full { grid-column: 1 / -1; }
.form-field label {
  display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px;
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--text);
  outline: none;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--accent); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.chip-none { background: var(--surface-alt); color: var(--text-faint); }
.chip-draft { background: var(--info-soft); color: var(--info); }
.chip-sent { background: var(--warn-soft); color: var(--warn); }
.chip-paid { background: var(--success-soft); color: var(--success); }
.chip-overdue { background: var(--danger-soft); color: var(--danger); }

.toast {
  position: fixed; bottom: 22px; right: 22px;
  background: var(--text); color: var(--bg);
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-size: 13px; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s;
  pointer-events: none; z-index: 200;
}
.toast.show { opacity: 1; transform: translateY(0); }

.loading-veil {
  display: flex; align-items: center; justify-content: center;
  padding: 60px 0; color: var(--text-muted); font-size: 13px;
}

.hidden { display: none !important; }

/* ---------- Mobile: sidebar becomes a slide-over drawer ----------
   The drawer holds the same thing the desktop sidebar does -- every tab, then
   the account block (who you are, View as, theme, Sign out) pinned at the
   bottom. What changes on a phone is how you get at it and how you get rid of
   it: a scrim you can tap, Escape, a left swipe, or picking a tab. The page
   behind is frozen while it's open so the drawer isn't scrolling the content
   underneath it.

   ORDER MATTERS BELOW. The default (hidden) rules for .mobile-topbar and
   .sidebar-scrim have the same specificity as the ones inside the media
   query, so they must come FIRST -- otherwise the later `display: none`
   wins even on a phone and the hamburger never appears, which is exactly
   the bug this section used to have. */

.mobile-topbar {
  display: none;
  align-items: center; gap: 10px;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 40;
}
/* Avatar button on the right of the top bar: shows who is signed in and
   opens the drawer at the account block. */
.topbar-user {
  margin-left: auto;
  display: flex; align-items: center;
  border: none; background: transparent; padding: 2px;
  border-radius: 999px; cursor: pointer;
  min-width: 36px; min-height: 36px;
  justify-content: center;
}
.topbar-user:hover { background: var(--surface-alt); }
.topbar-user .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
}
.topbar-user img.avatar { object-fit: cover; }
#menuToggle { min-width: 38px; min-height: 38px; font-size: 18px; }

.sidebar-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.sidebar-scrim.show { opacity: 1; }

@media (max-width: 860px) {
  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    height: 100dvh;
    /* Narrow enough to leave a visible strip of the page, so it reads as a
       panel over the content rather than a whole new screen. */
    width: min(84vw, 300px);
    transform: translateX(-102%);
    transition: transform 0.22s ease;
    z-index: 60;
    box-shadow: var(--shadow-lg);
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .sidebar.open { transform: translateX(0); }

  /* Thumb-sized rows. 13.5px/9px is fine for a mouse and cramped for a
     fingertip. */
  .nav-item { padding: 12px 11px; font-size: 14.5px; margin-bottom: 3px; }
  .sidebar-footer .btn { padding-top: 11px; padding-bottom: 11px; font-size: 13.5px; }
  .sidebar-footer { padding-top: 12px; }

  .sidebar-scrim { display: block; }
  /* Freeze the page behind the drawer. Set on html as well as body, because
     Safari will happily keep scrolling the root element otherwise. */
  html.nav-open, body.nav-open { overflow: hidden; }

  .main { padding: 20px 16px 60px; }
  .detail-grid, .form-grid { grid-template-columns: 1fr; }
  .mobile-topbar { display: flex; }
}

/* Last, so it beats the media query's display:block when the drawer is shut. */
.sidebar-scrim[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
  .sidebar-scrim { transition: none; }
}

/* Demo video embed — responsive 16:9 box */
.video-embed {
  position: relative; width: 100%; padding-top: 56.25%;
  background: #000; border-radius: var(--radius); overflow: hidden;
}
.video-embed iframe, .video-embed video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* Team page role grouping (client-facing "contact team" view) */
.role-group { margin-bottom: 22px; }
.role-group:last-child { margin-bottom: 0; }
.role-group-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-faint); margin-bottom: 8px; padding-left: 2px;
}

/* Messages inbox -- styled after the Google Messages conversation list and
   chat view: a flat, divider-separated row list (no per-row card/border)
   with a bold name + small unread dot for unread threads, and tightly
   grouped, heavily-rounded bubbles in the thread view. */
.thread-list { display: flex; flex-direction: column; }
.thread-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 6px;
  border: none; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent; cursor: pointer; margin-bottom: 0;
  transition: background-color 0.12s ease;
}
.thread-row:last-child { border-bottom: none; }
.thread-row:hover { background: var(--surface-alt); }
.thread-main { flex: 1; min-width: 0; }
.thread-top-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.thread-name { font-weight: 500; font-size: 14.5px; }
.thread-row.unread .thread-name { font-weight: 700; }
.thread-preview {
  font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 3px;
}
.thread-row.unread .thread-preview { color: var(--text); font-weight: 500; }
.thread-time-row { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.thread-time { font-size: 12px; color: var(--text-faint); }
.thread-row.unread .thread-time { color: var(--accent); font-weight: 600; }
.thread-unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

.msg-bubble-list {
  display: flex; flex-direction: column; gap: 2px; max-height: 460px; overflow-y: auto;
  padding: 14px 10px; background: var(--surface-alt); border-radius: var(--radius);
}
.msg-bubble {
  max-width: 75%; padding: 6px 11px; border-radius: 15px; font-size: 12px; line-height: 1.35;
  white-space: pre-wrap; word-break: break-word; margin-bottom: 2px;
}
.msg-bubble.mine { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.msg-bubble.theirs { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.msg-bubble .msg-time { display: block; font-size: 9.5px; opacity: 0.7; margin-top: 2px; }
.msg-bubble.mine .msg-time { color: rgba(255, 255, 255, 0.8); }

/* Client-facing demo video gallery (multiple videos per client) */
.video-gallery { display: flex; flex-direction: column; gap: 22px; }
.video-card { display: flex; flex-direction: column; gap: 10px; }
.video-card-title { font-weight: 600; font-size: 14px; }

/* Admin "manage demo videos" modal list */
.video-manage-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.video-manage-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.video-manage-main { flex: 1; min-width: 0; }
.video-manage-title { font-weight: 600; font-size: 13px; }
.video-manage-url {
  font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-family: monospace;
}

/* Shared section label (matches .modal-section > label styling, usable
   outside a modal) */
.section-label {
  display: block; font-size: 12px; font-weight: 700; color: var(--text-muted);
  margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.03em;
}

/* My Website — build progress checklist */
.checklist-list { display: flex; flex-direction: column; gap: 7px; }
.checklist-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-alt); font-size: 13.5px; color: var(--text-muted);
}
.checklist-row.done { color: var(--text); background: var(--success-soft); border-color: transparent; }
.checklist-mark {
  width: 19px; height: 19px; flex-shrink: 0; border-radius: 50%;
  border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: transparent;
}
.checklist-row.done .checklist-mark { background: var(--success); border-color: var(--success); color: #fff; }

/* Admin: plan & checklist editor (business detail modal) */
.checklist-edit-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 4px; cursor: pointer;
  font-size: 13px;
}
.checklist-edit-row:hover { background: var(--surface-alt); border-radius: var(--radius-sm); }

/* Upgrade page */
.upgrade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.upgrade-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; gap: 6px;
}
.upgrade-card-name { font-weight: 700; font-size: 14.5px; }
.upgrade-card-price { font-size: 21px; font-weight: 700; color: var(--accent-dark); }
.upgrade-discount-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.upgrade-was { font-size: 13px; color: var(--text-faint); text-decoration: line-through; }
.upgrade-discount-badge { font-size: 10.5px; font-weight: 700; color: #1a7f37; background: #e3f6e8; border-radius: 99px; padding: 2px 7px; white-space: nowrap; }
.upgrade-card-price.discounted { color: #d0021b; }
.upgrade-installment { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.upgrade-limited { font-size: 10.5px; font-weight: 700; color: #d0021b; margin: 2px 0 0; }
.upgrade-card-blurb { font-size: 12.5px; color: var(--text-muted); flex: 1; margin-bottom: 8px; }
.upgrade-pay-row { display: flex; gap: 6px; flex-wrap: wrap; }
.upgrade-pay-row .btn { flex: 1; min-width: 64px; padding: 8px 10px; font-size: 12.5px; }

/* Website setup wizard (My Website page -- js/websiteSetup.js) */
.setup-progress-wrap { margin-bottom: 18px; }
.setup-progress-track { height: 5px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); overflow: hidden; }
.setup-progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s ease; }
.setup-step-counter { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin-top: 8px; }

.setup-step-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.setup-step-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.setup-step-heading { font-size: 19px; font-weight: 700; margin: 0; }
.setup-step-sub { font-size: 13px; color: var(--text-muted); margin: 6px 0 0; }

.setup-step-fields { display: flex; flex-direction: column; gap: 18px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.setup-field { display: flex; flex-direction: column; gap: 8px; }
.setup-field-label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.setup-field-label .req { color: #d0021b; }
.setup-input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-alt); color: var(--text); outline: none; font: inherit;
}
.setup-input:focus { border-color: var(--accent); }
textarea.setup-input { resize: vertical; min-height: 64px; }

.setup-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.setup-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  padding: 13px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; font: inherit; color: var(--text); transition: border-color 0.15s, background 0.15s;
}
.setup-card:hover { border-color: var(--accent); }
.setup-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.setup-card-label { font-size: 13px; font-weight: 700; }
.setup-card-desc { font-size: 11.5px; color: var(--text-muted); }
.setup-card-swatch { display: flex; gap: 4px; }
.setup-card-swatch i { display: block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12); }
.setup-card-font-preview { font-size: 26px; line-height: 1; color: var(--text); }

.setup-checklist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; }

.setup-toggle-row { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 4px 0; user-select: none; }
.setup-toggle-switch { position: relative; width: 40px; height: 22px; border-radius: 999px; background: var(--border); flex-shrink: 0; transition: background 0.2s; }
.setup-toggle-switch i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s; }
.setup-toggle-row[data-on="1"] .setup-toggle-switch { background: var(--accent); }
.setup-toggle-row[data-on="1"] .setup-toggle-switch i { transform: translateX(18px); }
.setup-toggle-label { font-size: 13.5px; }

.setup-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 30px 16px; cursor: pointer;
  background: var(--surface-alt); transition: border-color 0.15s, background 0.15s;
}
.setup-dropzone:hover, .setup-dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); }
.setup-dropzone-icon { font-size: 26px; }
.setup-dropzone-text { font-size: 13.5px; }
.setup-dropzone-link { color: var(--accent-dark); font-weight: 600; text-decoration: underline; }
.setup-dropzone-hint { font-size: 11.5px; color: var(--text-faint); }
.setup-photo-progress { font-size: 12px; color: var(--text-muted); margin-top: 8px; min-height: 1em; }
.setup-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 12px; }
.setup-photo-thumb { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.setup-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.setup-photo-remove {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.55); color: #fff; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.setup-photo-remove:hover { background: rgba(0,0,0,0.75); }

.setup-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 40px 20px; }
.setup-done-icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--success); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.setup-done h4 { margin: 0; font-size: 17px; }
.setup-done p { margin: 0; font-size: 13.5px; color: var(--text-muted); max-width: 40ch; }

/* Admin "View as client" preview banner */
.preview-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--accent-soft); color: var(--accent-dark);
  border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 500;
}
.preview-banner strong { font-weight: 700; }

/* ---------- Website Visionary chat (n8n @n8n/chat, fullscreen mode) ---------- */
.visionary-chat-mount {
  height: 620px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-y: auto;
}
/* The n8n chat widget's own root wrapper (.n8n-chat) has no explicit
   height in fullscreen mode, so its "height:100%" chain down to
   .chat-layout / .chat-body resolves against an auto-height ancestor and
   is effectively ignored -- the whole widget just grows with the message
   list instead of staying inside our fixed-height box. That pushed the
   input off the bottom with nothing scrollable to reach it. Force an
   explicit height down the chain so the widget's own internal scrolling
   (its .chat-body already has overflow-y:auto) actually kicks in, and
   keep overflow-y:auto here too as a fallback so the input is reachable
   even if a future widget update changes this structure. */
.visionary-chat-mount > div,
.visionary-chat-mount .n8n-chat,
.visionary-chat-mount .chat-layout {
  height: 100%;
  min-height: 0;
}
.visionary-chat-mount .chat-body {
  min-height: 0;
}


/* ---------- Markups (client website review) ---------- */
.nav-item .count.count-hot { background: var(--danger); color: #fff; }
.nav-item.active .count.count-hot { background: var(--danger); color: #fff; }
.nav-item .count.count-zero { display: none; }
.mk-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.mk-clients .biz-row.active { border-color: var(--accent); background: var(--accent-soft); }
.mk-unread { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; flex-shrink: 0; }
.mk-detail { min-width: 0; }
.mk-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mk-detail-head a { color: var(--accent-dark); }
.mk-filters { display: flex; gap: 6px; }
.mk-filters .btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.mk-groups { display: grid; gap: 18px; }
.mk-group { display: grid; gap: 8px; }
.mk-group-title { margin: 0 0 2px; font-size: 14px; }
.mk-group-title .muted { font-weight: 400; color: var(--text-faint); font-size: 12px; margin-left: 6px; }
.mk-card { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; align-items: start; }
.mk-card.is-unread { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); box-shadow: inset 3px 0 0 var(--danger); }
.mk-card.is-resolved { opacity: .65; }
.mk-card-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #221f1a; }
.mk-card-body { min-width: 0; display: grid; gap: 6px; }
.mk-card-meta { font-size: 12px; color: var(--text-muted); }
.mk-new { color: var(--danger); font-weight: 700; }
.mk-quote { margin: 0; padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--surface-alt); font-style: italic; font-size: 13px; color: var(--text-muted); border-radius: 4px; }
.mk-card-text { font-size: 14px; overflow-wrap: anywhere; }
.mk-replies { display: grid; gap: 6px; padding-left: 10px; border-left: 2px solid var(--border); font-size: 13px; }
.mk-reply b { font-size: 12.5px; } .mk-reply.is-admin b { color: var(--accent-dark); } .mk-reply .muted { color: var(--text-faint); font-size: 11.5px; margin-left: 4px; }
.mk-reply-form { display: flex; gap: 6px; }
.mk-reply-form input { flex: 1; font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.mk-reply-form input:focus { outline: none; border-color: var(--accent); }
.mk-card-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.mk-card-actions .btn { justify-content: center; white-space: nowrap; }
.mk-card-actions .btn-danger[data-armed] { background: var(--danger); color: #fff; }
.mk-code { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 8px; }
.mk-hint { margin-top: 10px; font-size: 13px; color: var(--text-muted); background: var(--accent-soft); border-radius: var(--radius-sm); padding: 10px 12px; }
.mk-hint a { color: var(--accent-dark); }
.muted { color: var(--text-muted); }
.mk-back { display: none; padding: 0 0 6px; }
@media (max-width: 960px) {
  .mk-back { display: inline-flex; }
  .mk-layout { grid-template-columns: 1fr; }
  .mk-layout.has-detail .mk-clients { display: none; }
  .mk-card { grid-template-columns: 26px minmax(0, 1fr); }
  .mk-card-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}

/* Call queue */
.queue-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; margin-bottom:16px; border:1px solid var(--border); border-radius: var(--radius-md, 12px); background: var(--info-soft); }
.queue-banner--empty { background: var(--success-soft); }
.queue-banner .queue-title { font-weight:600; font-size:15px; }
.queue-banner .queue-sub { font-size:12.5px; color: var(--text-muted); margin-top:2px; }
.queue-row .queue-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; max-width: 440px; }
.queue-row .queue-actions .btn { flex: 0 0 auto; }
.queue-row .biz-main { flex: 1; min-width: 0; }
.queue-progress { height:6px; border-radius:999px; background: var(--surface-alt); margin-top:8px; max-width:360px; overflow:hidden; }
.queue-progress-bar { height:100%; background: var(--success); border-radius:999px; transition: width .3s; }
.queue-quick { display:flex; gap:6px; margin-top:8px; }
.queue-quick .btn { padding:4px 10px; font-size:12px; }
.queue-pool-note { font-size:12.5px; color: var(--text-muted); padding:10px 12px; background: var(--surface-alt); border-radius: var(--radius-sm); }
@media (max-width: 720px) { .queue-banner { flex-direction:column; align-items:flex-start; } .queue-row .queue-actions { justify-content:flex-start; } }
.queue-checks { display:flex; flex-wrap:wrap; gap:6px 14px; }
.queue-check { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; cursor:pointer; }
.queue-check input { width:auto; margin:0; }
.queue-prefs { margin-top:3px; }
.queue-banner a { color: inherit; text-decoration: underline; }
.queue-batch-list { margin-top:10px; border:1px solid var(--border); border-radius: var(--radius-sm); overflow:hidden; max-width:640px; }
.queue-batch { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; font-size:13px; border-top:1px solid var(--border); }
.queue-batch:first-child { border-top:0; }
.queue-batch-main { min-width:0; }
.btn-danger { color: var(--danger); }

/* ---------- Training page ---------- */
.training-gallery { gap: 28px; }
.training-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.training-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.training-num { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.training-card-text { flex: 1; min-width: 0; }
.training-desc { font-size: 13px; color: var(--text-muted); margin-top: 3px; line-height: 1.45; }
.training-admin-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.training-admin-actions .btn { padding: 4px 8px; font-size: 12px; }

/* ---------- Analytics ---------- */
:root {
  --viz-s1: #2a78d6; --viz-s2: #eb6834; --viz-s3: #1baf7a;
  --viz-ord1: #86b6ef; --viz-ord2: #5598e7; --viz-ord3: #2a78d6; --viz-ord4: #1c5cab;
  --viz-seq1: #cde2fb; --viz-seq2: #9ec5f4; --viz-seq3: #6da7ec; --viz-seq4: #3987e5; --viz-seq5: #1c5cab;
  --viz-grid: #ebe8e1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --viz-s1: #3987e5; --viz-s2: #d95926; --viz-s3: #199e70;
    --viz-ord1: #184f95; --viz-ord2: #256abf; --viz-ord3: #3987e5; --viz-ord4: #6da7ec;
    --viz-seq1: #0d366b; --viz-seq2: #104281; --viz-seq3: #1c5cab; --viz-seq4: #2a78d6; --viz-seq5: #6da7ec;
    --viz-grid: #332e26;
  }
}
:root[data-theme="dark"] {
    --viz-s1: #3987e5; --viz-s2: #d95926; --viz-s3: #199e70;
    --viz-ord1: #184f95; --viz-ord2: #256abf; --viz-ord3: #3987e5; --viz-ord4: #6da7ec;
    --viz-seq1: #0d366b; --viz-seq2: #104281; --viz-seq3: #1c5cab; --viz-seq4: #2a78d6; --viz-seq5: #6da7ec;
    --viz-grid: #332e26;
}

.an-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.an-filters .select-filter { min-width: 220px; }
.an-range { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.an-range-btn { border: 0; background: transparent; padding: 7px 12px; font: inherit; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.an-range-btn + .an-range-btn { border-left: 1px solid var(--border); }
.an-range-btn.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.an-person { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px; }
.an-person-name { font-weight: 700; font-size: 16px; }
.an-person-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.an-person-right { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.an-person-right .chip { white-space: nowrap; }
@media (max-width: 600px) { .an-person { flex-wrap: wrap; } .an-person-right { margin-left: 0; width: 100%; justify-content: flex-start; } }
.an-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.an-kpi .num { font-size: 26px; }
.an-kpi .label { margin: 0 0 2px; }
.an-kpi-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; line-height: 1.35; }
.an-spark { display: block; width: 100%; height: 28px; margin-top: 6px; }
.an-spark--empty { height: 0; margin: 0; }
.an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.an-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px 18px; box-shadow: var(--shadow); min-width: 0; }
.an-card--wide { grid-column: 1 / -1; }
.an-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.an-card-head h3 { margin: 0; font-size: 14.5px; font-weight: 700; }
.an-card-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.an-muted { color: var(--text-faint); font-size: 13px; }
.an-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.an-legend i, .an-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.an-chart-wrap { position: relative; }
.an-line { width: 100%; height: auto; display: block; overflow: visible; }

.an-line .an-gridline { stroke: var(--viz-grid); stroke-width: 1; }
.an-axis { font-size: 11px; fill: var(--text-faint); font-family: inherit; }
.an-crossline { stroke: var(--text-faint); stroke-width: 1; }
.an-cross.off { display: none; }
.an-table th, .an-table td { padding-left: 8px; padding-right: 8px; }
.an-hit { cursor: crosshair; }
.an-tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 8px 10px; font-size: 12.5px; color: var(--text); min-width: 150px; z-index: 5; }
.an-tip div + div { margin-top: 3px; }
.an-tip b { float: right; margin-left: 12px; font-variant-numeric: tabular-nums; }
.an-tip-title { font-weight: 600; margin-bottom: 4px; }
.an-tip-sub { color: var(--text-faint); font-size: 11.5px; margin-top: 4px !important; }
.an-empty-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 13px; pointer-events: none; }
.an-table-wrap { overflow-x: auto; }
.an-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.an-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.an-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.an-table td.num, .an-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.an-table td.num { text-align: right; }
.an-table tbody tr:last-child td { border-bottom: 0; }
.an-leaderboard tbody tr { cursor: pointer; }
.an-leaderboard tbody tr:hover, .an-leaderboard tbody tr:focus { background: var(--surface-alt); outline: none; }
.an-who { display: flex; align-items: center; gap: 10px; }
.an-who-name { font-weight: 600; white-space: nowrap; }
.an-who-sub { font-size: 11.5px; color: var(--text-faint); }
.an-barcell { width: 120px; }
.an-minibar { height: 8px; background: var(--surface-alt); border-radius: 4px; overflow: hidden; }
.an-minibar span { display: block; height: 100%; background: var(--viz-s1); border-radius: 0 4px 4px 0; }
.an-series-table { margin-top: 14px; max-height: 320px; overflow: auto; }
.an-funnel { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.an-funnel-row { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; }
.an-funnel-label { font-size: 13px; color: var(--text-muted); }
.an-funnel-track { position: relative; height: 22px; background: var(--surface-alt); border-radius: 4px; display: flex; align-items: center; }
.an-funnel-bar { height: 100%; border-radius: 0 4px 4px 0; min-width: 0; transition: width .4s ease; }
.an-funnel-val { position: absolute; left: calc(100% + 0px); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 8px; }
.an-funnel-track { margin-right: 44px; }
.an-funnel-conv { font-size: 12px; color: var(--text-faint); text-align: right; }
.an-heat { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-faint); }
.an-heat-row { display: grid; grid-template-columns: 34px repeat(16, 1fr); gap: 3px; align-items: center; }
.an-heat-head { margin-bottom: 2px; }
.an-heat-hl { text-align: left; font-size: 10.5px; }
.an-heat-dl { font-size: 11.5px; color: var(--text-muted); }
.an-heat-cell { aspect-ratio: 1 / 1; border-radius: 3px; background: var(--surface-alt); min-height: 14px; }
.an-heat-cell.s1 { background: var(--viz-seq1); } .an-heat-cell.s2 { background: var(--viz-seq2); } .an-heat-cell.s3 { background: var(--viz-seq3); } .an-heat-cell.s4 { background: var(--viz-seq4); } .an-heat-cell.s5 { background: var(--viz-seq5); }
.an-heat-cell:hover { outline: 2px solid var(--text-faint); outline-offset: 1px; }
.an-heat-legend { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 8px; }
.an-heat-legend i { display: inline-block; width: 12px; height: 12px; aspect-ratio: auto; min-height: 0; }
.an-bars { display: flex; flex-direction: column; gap: 9px; }
.an-bar-row { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; }
.an-bar-label { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-bar-track { height: 16px; background: var(--surface-alt); border-radius: 4px; }
.an-bar { height: 100%; background: var(--viz-s1); border-radius: 0 4px 4px 0; transition: width .4s ease; }
.an-bar-val { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.an-habits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.an-habit { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.an-habit-icon { font-size: 18px; width: 26px; text-align: center; }
.an-habit-val { font-weight: 700; font-size: 16px; line-height: 1.1; }
.an-habit-label { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.an-habit-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 1px; }
.an-feed { display: flex; flex-direction: column; }
.an-feed-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.an-feed-row:last-child { border-bottom: 0; }
.an-feed-icon { text-align: center; }
.an-feed-time { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
@media (max-width: 820px) {
  .an-grid { grid-template-columns: 1fr; }
  .an-habits { grid-template-columns: 1fr; }
  .an-funnel-row, .an-bar-row { grid-template-columns: 90px 1fr 40px; }
}

/* ---------- View-as picker ---------- */
.va-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.va-tab { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; color: var(--text-muted); }
.va-tab.active { background: var(--accent-soft); color: var(--accent-dark); border-color: transparent; font-weight: 600; }

/* ---------- Credentials modal ---------- */
.cred-field { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text); }

/* ---------- Theme switch (sidebar) ---------- */
.theme-switch { display: flex; gap: 4px; margin-bottom: 8px; }
.theme-switch button { flex: 1; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: var(--radius-sm); padding: 6px 4px; font: inherit; font-size: 12px; cursor: pointer; }
.theme-switch button.active { background: var(--accent-soft); color: var(--accent-dark); border-color: transparent; font-weight: 600; }

/* ---------- Idle check ---------- */
.idle-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.idle-card { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 24px 26px; max-width: 420px; width: calc(100% - 32px); text-align: center; }
.idle-card h3 { margin: 0 0 6px; font-size: 18px; }
.idle-card p { margin: 0 0 16px; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
.idle-card .idle-count { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }

/* ---------- Tax & Payments ---------- */
.tax-status { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tax-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; font-size: 13px; border: 1px solid var(--border); background: var(--surface); }
.tax-pill.ok { background: var(--success-soft); color: var(--success); border-color: transparent; }
.tax-pill.todo { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.tax-pill.ready { background: var(--info-soft); color: var(--info); border-color: transparent; font-weight: 600; }
.tax-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; grid-auto-flow: dense; align-items: start; }
.tax-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tax-sub[hidden], .tax-form [hidden], #payBankWrap[hidden] { display: none !important; }
.an-card-head .btn { white-space: nowrap; }
.tax-card { min-width: 0; }
.tax-form { margin-top: 4px; }
.tax-form input[type="password"] { letter-spacing: .15em; }
.tax-radios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tax-sub { margin-top: 8px; font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tax-sub input[type="text"] { flex: 1; min-width: 160px; }
.tax-cert { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12.5px; line-height: 1.5; }
.tax-row-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.tax-row-actions .btn { padding: 4px 8px; font-size: 12px; white-space: nowrap; }
.tax-kv { display: grid; gap: 10px; }
.tax-kv > div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: baseline; font-size: 13.5px; }
.tax-kv span { color: var(--text-faint); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 900px) { .tax-grid { grid-template-columns: 1fr; } .tax-radios { grid-template-columns: 1fr; } .tax-kv > div { grid-template-columns: 1fr; } }
/* Primary buttons inside action clusters shouldn't stretch to full width. */
.tax-row-actions .btn-primary, .queue-row .queue-actions .btn-primary, .an-card-head .btn-primary, .page-actions .btn-primary, .an-table .btn-primary { width: auto; padding: 7px 12px; }

/* Tax-year readiness strip */
.tax-ready { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.tax-ready-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-muted); }
.tax-ready-item::before { content: none; }
.tax-ready-item > :first-child { }
.tax-ready-item.ok { color: var(--success); }
.tax-ready-item.todo { color: var(--warn); }
.tax-ready-item.todo span, .tax-ready-item.ok span { color: var(--text-muted); }
.tax-row-actions .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Training course --------------------------------------------------- */
.course-progress { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; box-shadow: var(--shadow); }
.course-progress-text { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 10px; }
.course-progress-text span { color: var(--text-muted); font-size: 12.5px; }
.course-progress-bar { height: 8px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); overflow: hidden; }
.course-progress-fill { height: 100%; background: var(--success); border-radius: 999px; transition: width .5s ease; }
.course { display: flex; flex-direction: column; gap: 10px; }
.course-lesson { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border-left: 6px solid var(--danger); }
.course-lesson.is-complete { border-left-color: var(--success); }
.course-lesson.course-pitch { border-left-color: var(--accent); }
.course-lesson.is-locked { opacity: .72; }
.course-bar { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; cursor: pointer; background: var(--danger-soft); color: var(--text); transition: background .25s; }
.course-lesson.is-complete .course-bar { background: var(--success-soft); }
.course-lesson.course-pitch .course-bar { background: var(--accent-soft); }
.course-bar:hover { filter: brightness(.985); }
.course-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.course-num { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; background: var(--danger); color: #fff; }
.course-lesson.is-complete .course-num { background: var(--success); }
.course-lesson.course-pitch .course-num { background: var(--accent); }
.course-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.course-title { font-weight: 600; font-size: 14.5px; }
.course-meta { font-size: 12px; color: var(--text-muted); }
.course-status { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--danger); color: #fff; flex-shrink: 0; }
.course-lesson.is-complete .course-status { background: var(--success); }
.course-lesson.course-pitch .course-status { background: var(--accent); }
.course-chevron { font-size: 18px; color: var(--text-muted); transition: transform .25s; line-height: 1; flex-shrink: 0; }
.course-lesson.is-open .course-chevron { transform: rotate(180deg); }
.course-body { padding: 18px 20px 22px; border-top: 1px solid var(--border); }
.course-body[hidden] { display: none !important; }
.course-desc { color: var(--text-muted); font-size: 13.5px; margin: 0 0 14px; line-height: 1.5; }
.course-admin-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.course-admin-tools .btn { padding: 4px 9px; font-size: 12px; }
.course-admin-line { font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; }
.course-video .video-embed { max-width: 860px; margin: 0 0 14px; }
.course-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.course-actions .btn-primary { width: auto; }
.course-hint { font-size: 12.5px; color: var(--text-muted); }
.course-notes { max-width: 860px; font-size: 14px; line-height: 1.6; }
.course-notes .course-h { margin: 18px 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); }
.course-notes .course-h:first-child { margin-top: 0; }
.course-notes p { margin: 0 0 10px; }
.course-list { margin: 0 0 10px; padding-left: 20px; }
.course-list li { margin-bottom: 6px; }
.course-example { background: var(--surface-alt); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 14px; margin: 8px 0 12px; }
.course-example-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 4px; }
.course-example p { margin: 0 0 6px; }
.course-example p:last-child { margin-bottom: 0; }

/* Pitch Builder */
.pb-intro p { font-size: 14px; line-height: 1.6; margin: 0 0 10px; max-width: 860px; }
.pb-rules { margin: 0 0 18px; padding-left: 20px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.pb-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
@media (max-width: 980px) { .pb-grid { grid-template-columns: 1fr; } }
.pb-h { margin: 0 0 10px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); }
.pb-part { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--border); }
.pb-part-head h4 { margin: 0 0 4px; font-size: 15px; }
.pb-part-head p { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.pb-options { display: flex; flex-direction: column; gap: 8px; }
.pb-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font-size: 13.5px; line-height: 1.55; }
.pb-option input { margin-top: 4px; accent-color: var(--accent); }
.pb-option.is-picked { border-color: var(--accent); background: var(--accent-soft); }
.pb-weak { margin-top: 8px; font-size: 12.5px; color: var(--text-faint); }
.pb-weak-label { font-weight: 600; color: var(--text-muted); }
.pb-weak s { text-decoration-color: var(--danger); }
mark.pb-slot { background: var(--warn-soft); color: var(--warn); border-radius: 3px; padding: 0 2px; font-weight: 600; }
mark.pb-filled { background: var(--success-soft); color: var(--success); border-radius: 3px; padding: 0 1px; font-weight: 600; }
.pb-right { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
.pb-preview-card { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.pb-preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pb-preview-head h4 { margin: 0; font-size: 14px; }
.pb-preview p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; }
.pb-preview-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1px; }
.pb-preview-foot { font-size: 12px; color: var(--text-faint); margin-top: 6px; }
.pb-swaps { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.pb-swaps h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); }
.pb-swaps table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pb-swaps th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); padding: 4px 6px 6px 0; }
.pb-swaps td { padding: 5px 6px 5px 0; border-top: 1px solid var(--border); vertical-align: top; line-height: 1.4; }
.pb-swaps td s { color: var(--text-faint); text-decoration-color: var(--danger); }

/* ---- Call notes log ----------------------------------------------------- */
.nl-compose { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.nl-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.nl-timer { display: flex; align-items: center; gap: 10px; }
.nl-timer .btn.is-running { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.nl-clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; min-width: 44px; }
.nl-mins { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.nl-mins input { width: 64px; padding: 6px 8px; }
.nl-outcomes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.nl-chip { border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; font-weight: 600; }
.nl-chip.is-static { cursor: default; }
.nl-chip.is-on, .nl-chip.is-static { color: #fff; border-color: transparent; }
.nl-chip.tone-muted.is-on, .nl-chip.tone-muted.is-static { background: var(--text-faint); }
.nl-chip.tone-warn.is-on, .nl-chip.tone-warn.is-static { background: var(--warn); }
.nl-chip.tone-info.is-on, .nl-chip.tone-info.is-static { background: var(--info); }
.nl-chip.tone-success.is-on, .nl-chip.tone-success.is-static { background: var(--success); }
.nl-chip.tone-danger.is-on, .nl-chip.tone-danger.is-static { background: var(--danger); }
.nl-spoke { flex: 1; min-width: 180px; }
.nl-follow { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.nl-follow input { padding: 6px 8px; }
.nl-compose textarea { width: 100%; box-sizing: border-box; }
.nl-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.nl-actions .btn-primary { width: auto; }
.nl-hint { font-size: 12px; color: var(--text-faint); }
.nl-suggest { margin-top: 10px; }
.nl-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.nl-summary { font-size: 12.5px; color: var(--text-muted); margin-bottom: 2px; }
.nl-empty { font-size: 13px; color: var(--text-faint); padding: 8px 0; }
.nl-entry { border-left: 3px solid var(--border); padding: 6px 12px; }
.nl-entry-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--text-muted); }
.nl-when { font-weight: 700; color: var(--text); }
.nl-dur, .nl-spokewith, .nl-follow-pill { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.nl-follow-pill { color: var(--warn); border-color: var(--warn-soft); background: var(--warn-soft); }
.nl-del { margin-left: auto; border: 0; background: none; color: var(--text-faint); cursor: pointer; font-size: 12px; }
.nl-del:hover { color: var(--danger); }
.nl-body { font-size: 13.5px; line-height: 1.5; margin-top: 4px; white-space: pre-wrap; }
.nl-legacy { margin-top: 14px; font-size: 12.5px; color: var(--text-muted); }
.nl-legacy summary { cursor: pointer; font-weight: 600; }
.nl-legacy pre { white-space: pre-wrap; font: inherit; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin: 8px 0 0; }

/* ---- Assistant ------------------------------------------------------------ */
.ai-fab { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 0; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-lg); cursor: pointer; transition: transform .15s; }
.ai-fab:hover { transform: translateY(-1px); }
.ai-fab.is-open { opacity: 0; pointer-events: none; }
.ai-fab-icon { font-size: 16px; }
.ai-fab[data-badge]::after { content: attr(data-badge); position: absolute; top: -6px; right: -4px; background: var(--danger); color: #fff; font-size: 11px; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.ai-drawer { position: fixed; right: 20px; bottom: 20px; z-index: 950; width: min(420px, calc(100vw - 24px)); height: min(640px, calc(100vh - 40px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.ai-drawer[hidden] { display: none !important; }
.ai-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--accent-soft); }
.ai-title { font-weight: 700; font-size: 14.5px; color: var(--accent-dark); }
.ai-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.ai-head-actions { display: flex; gap: 4px; flex-shrink: 0; }
.ai-icon-btn { border: 0; background: transparent; color: var(--text-muted); font-size: 15px; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; }
.ai-icon-btn:hover { background: var(--surface); color: var(--text); }
.ai-thread { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.ai-msg { display: flex; gap: 8px; align-items: flex-end; }
.ai-user { justify-content: flex-end; }
.ai-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.ai-bubble-wrap { max-width: 86%; display: flex; flex-direction: column; gap: 8px; }
.ai-bubble { background: var(--surface); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 9px 12px; font-size: 13.5px; line-height: 1.5; color: var(--text); word-wrap: break-word; }
.ai-user .ai-bubble { background: var(--accent); color: #fff; border-color: var(--accent); border-radius: 14px 14px 4px 14px; max-width: 86%; }
.ai-bubble p { margin: 0 0 8px; }
.ai-bubble p:last-child { margin-bottom: 0; }
.ai-bubble ul { margin: 0 0 8px; padding-left: 18px; }
.ai-bubble code { background: var(--surface-alt); padding: 0 4px; border-radius: 4px; font-size: 12.5px; }
.ai-user .ai-bubble code { background: rgba(255,255,255,.2); }
.ai-typing { display: flex; gap: 4px; padding: 12px 14px; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: ai-blink 1.2s infinite; }
.ai-typing span:nth-child(2) { animation-delay: .2s; } .ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ai-blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
.ai-options { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; background: var(--bg); border-top: 1px solid var(--border); min-height: 0; }
.ai-options:empty { display: none; }
.ai-opt { border: 1px solid var(--accent); color: var(--accent-dark); background: var(--surface); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ai-opt:hover { background: var(--accent-soft); }
.ai-compose { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface); align-items: flex-end; }
.ai-compose textarea { flex: 1; resize: none; min-height: 38px; max-height: 120px; font: inherit; font-size: 13.5px; padding: 9px 12px; border-radius: 10px; }
.ai-compose .btn-primary { width: auto; padding: 9px 14px; }
.ai-card { background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; padding: 12px 14px; font-size: 13px; }
.ai-card-title { font-weight: 700; margin-bottom: 8px; color: var(--accent-dark); }
.ai-card-rows { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.ai-card-rows th { text-align: left; font-weight: 600; color: var(--text-muted); padding: 3px 10px 3px 0; white-space: nowrap; vertical-align: top; font-size: 12px; }
.ai-card-rows td { padding: 3px 0; vertical-align: top; }
.ai-card-actions { display: flex; gap: 8px; }
.ai-card-actions .btn { width: auto; padding: 7px 14px; }
.ai-card-foot { font-size: 11.5px; color: var(--text-faint); margin-top: 8px; }
.ai-action-done { font-size: 12.5px; color: var(--success); background: var(--success-soft); border-radius: 10px; padding: 8px 12px; }
.ai-chart { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 8px; }
.ai-chart-title { font-weight: 700; font-size: 12.5px; margin-bottom: 6px; }
.ai-chart svg { display: block; }
.ai-grid { stroke: var(--border); stroke-width: 1; }
.ai-axis { fill: var(--text-faint); font-size: 10px; }
.ai-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: 11.5px; color: var(--text-muted); }
.ai-legend-item i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ai-chart-note { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }
.ai-inline { background: var(--accent-soft); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.ai-inline-text { margin-bottom: 8px; line-height: 1.45; }
.ai-inline-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-inline-opts button { border: 1px solid var(--accent); color: var(--accent-dark); background: var(--surface); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ai-inline-opts button:hover { background: var(--surface-alt); }
@media (max-width: 640px) {
  .ai-drawer { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; }
  .ai-fab { right: 14px; bottom: 14px; }
  .ai-fab-label { display: none; }
  .ai-fab { padding: 12px 14px; }
}

/* ---- Messages: two-pane chat --------------------------------------------- */
.chat { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; height: calc(100vh - 190px); min-height: 480px; }
.chat-list { border-right: 1px solid var(--border); overflow-y: auto; background: var(--surface); }
.chat-row { all: unset; box-sizing: border-box; display: flex; gap: 10px; align-items: center; width: 100%; padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.chat-row:hover { background: var(--surface-alt); }
.chat-row.active { background: var(--accent-soft); }
.chat-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-row-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.chat-row-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row-time { font-size: 11.5px; color: var(--text-faint); flex-shrink: 0; }
.chat-row-preview { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row.unread .chat-row-name, .chat-row.unread .chat-row-preview { font-weight: 700; color: var(--text); }
.chat-unread { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.chat-pane { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.chat-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }
.chat-empty .big { font-size: 28px; margin-bottom: 6px; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.chat-back { display: none; border: 0; background: transparent; font-size: 20px; cursor: pointer; color: var(--text-muted); padding: 4px 8px; }
.chat-head-name { font-weight: 700; font-size: 14.5px; }
.chat-head-sub { font-size: 12px; color: var(--text-muted); }
.chat-thread { flex: 1; overflow-y: auto; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 6px; }
.chat-day { display: flex; justify-content: center; margin: 10px 0 6px; }
.chat-day span { font-size: 11px; font-weight: 600; color: var(--text-faint); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; }
.chat-msg { display: flex; align-items: flex-end; gap: 6px; max-width: 78%; }
.chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg.theirs { align-self: flex-start; }
.chat-bubble { padding: 9px 12px; border-radius: 16px; font-size: 14px; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.chat-msg.mine .chat-bubble { background: var(--accent); color: #fff; border-color: var(--accent); border-bottom-left-radius: 16px; border-bottom-right-radius: 5px; }
.chat-meta { display: block; font-size: 10.5px; opacity: .7; margin-top: 3px; text-align: right; }
.chat-del { border: 0; background: transparent; cursor: pointer; font-size: 13px; opacity: 0; transition: opacity .15s; color: var(--text-faint); padding: 4px; }
.chat-msg:hover .chat-del, .chat-del:focus-visible { opacity: 1; }
.chat-del:hover { color: var(--danger); }
.chat-compose { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface); align-items: flex-end; }
.chat-compose textarea { flex: 1; resize: none; min-height: 40px; max-height: 140px; font: inherit; font-size: 14px; padding: 9px 12px; border-radius: 12px; }
.chat-compose .btn-primary { width: auto; padding: 10px 16px; }
.chat-people { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.chat-person { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; width: 100%; }
.chat-person:hover { background: var(--surface-alt); }
.chat-person span { display: flex; flex-direction: column; }
.chat-person small { color: var(--text-muted); font-size: 12px; }
@media (max-width: 760px) {
  .chat { grid-template-columns: 1fr; height: calc(100dvh - 150px); min-height: 420px; }
  .chat-list { border-right: 0; }
  .chat-pane { display: none; }
  .chat.is-thread .chat-list { display: none; }
  .chat.is-thread .chat-pane { display: flex; }
  .chat-back { display: inline-block; }
  .chat-msg { max-width: 88%; }
  .chat-del { opacity: .6; }
}
@media (hover: none) { .chat-del { opacity: .6; } }

/* ---- Guide ----------------------------------------------------------------- */
.guide { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.guide-nav { position: sticky; top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); }
.guide-nav input { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.guide-nav nav { display: flex; flex-direction: column; gap: 2px; }
.guide-nav a { display: block; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-muted); text-decoration: none; }
.guide-nav a:hover { background: var(--surface-alt); color: var(--text); }
.guide-nav a.active { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.guide-nav a[hidden] { display: none; }
.guide-body { display: flex; flex-direction: column; gap: 16px; }
.guide-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); font-size: 14.5px; line-height: 1.65; scroll-margin-top: 16px; }
.guide-section[hidden] { display: none; }
.guide-section h3 { margin: 0 0 10px; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.guide-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.guide-section p { margin: 0 0 10px; }
.guide-section ul, .guide-section ol { margin: 0 0 10px; padding-left: 22px; }
.guide-section li { margin-bottom: 6px; }
.guide-noresults { color: var(--text-muted); padding: 20px; text-align: center; }
@media (max-width: 860px) { .guide { grid-template-columns: 1fr; } .guide-nav { position: static; } .guide-nav nav { flex-direction: row; flex-wrap: wrap; } .guide-nav a { font-size: 12px; } }
.course-reading { margin-bottom: 18px; }
.course-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.course-team-card { display: flex; align-items: center; gap: 10px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.course-team-name { font-weight: 600; font-size: 13.5px; }
.course-team-role { font-size: 12px; color: var(--text-muted); }

/* ---- Analytics additions --------------------------------------------------- */
.an-goal { display: flex; align-items: center; gap: 16px; }
.an-goal-track { fill: none; stroke: var(--surface-alt); stroke-width: 10; }
.an-goal-fill { fill: none; stroke: var(--success); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.an-goal-num { font-size: 26px; font-weight: 700; fill: var(--text); }
.an-goal-sub { font-size: 11px; fill: var(--text-faint); }
.an-goal-text { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.an-goal-text span { color: var(--text-muted); font-size: 12.5px; }
.an-outcomes { display: flex; flex-direction: column; gap: 7px; }
.an-outcome-row { display: grid; grid-template-columns: 120px 1fr 64px; gap: 10px; align-items: center; font-size: 12.5px; }
.an-outcome-label { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-outcome-num { text-align: right; font-weight: 600; }
.an-outcome-num small { color: var(--text-faint); font-weight: 400; }
.an-minibar--success span { background: var(--success) !important; }
.an-minibar--danger span { background: var(--danger) !important; }
.an-minibar--warn span { background: var(--warn) !important; }
.an-minibar--info span { background: var(--info) !important; }
.an-minibar--muted span { background: var(--text-faint) !important; }
.an-hours { display: flex; gap: 6px; align-items: flex-end; height: 120px; }
.an-hour { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.an-hour-bar { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.an-hour-bar span { display: block; width: 100%; background: var(--viz-seq-3, #3987e5); border-radius: 3px 3px 0 0; opacity: .75; }
.an-hour-bar span.is-best { background: var(--success); opacity: 1; }
.an-hour-label { font-size: 10px; color: var(--text-faint); margin-top: 4px; }
.an-hour-pct { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.an-vels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.an-vel { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; text-align: center; }
.an-vel-num { font-size: 22px; font-weight: 700; }
.an-vel-label { font-size: 12px; font-weight: 600; margin-top: 2px; }
.an-vel-hint { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.an-upcoming { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.an-up-title { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin: 6px 0 2px; }
.an-up-row { display: flex; gap: 10px; padding: 5px 8px; border-radius: 6px; background: var(--surface-alt); }
.an-up-row.overdue { background: var(--danger-soft); color: var(--danger); }
.an-up-row.today { background: var(--warn-soft); }
.an-up-when { font-weight: 600; white-space: nowrap; }
.an-up-what { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-up-row.overdue .an-up-what { color: inherit; }
.an-week { display: flex; gap: 8px; align-items: flex-end; height: 110px; }
.an-week-day { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.an-week-bar { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.an-week-bar span { display: block; width: 100%; background: var(--viz-seq-4, #2a78d6); border-radius: 3px 3px 0 0; min-height: 2px; }
.an-week-label { font-size: 10.5px; color: var(--text-faint); margin-top: 4px; }
.an-week-num { font-size: 11px; font-weight: 600; }

/* ---- Dashboard hero (Analytics) ------------------------------------------- */
.dash { display: flex; flex-direction: column; gap: 18px; margin-bottom: 26px; }
.dash-top { display: grid; grid-template-columns: minmax(260px, 1.15fr) minmax(240px, 1fr) minmax(220px, .9fr); gap: 18px; }
.dash-bottom { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 18px; }
@media (max-width: 1100px) { .dash-top { grid-template-columns: 1fr 1fr; } .dash-stack { grid-column: 1 / -1; flex-direction: row; } }
@media (max-width: 760px) { .dash-top, .dash-bottom { grid-template-columns: 1fr; } .dash-stack { flex-direction: column; } }
.dash-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 18px 20px; box-shadow: var(--shadow); }
.dash-card-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.dash-dots { color: var(--text-faint); letter-spacing: 1px; font-weight: 700; }
.dash-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 20px 22px; color: #fff; background: linear-gradient(135deg, #8a6a46 0%, #b3895a 55%, #d8b07a 100%); box-shadow: 0 14px 36px rgba(122, 92, 62, .32); display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.dash-hero .dash-wave { flex: 1; max-height: 90px; min-height: 54px; }
.dash-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.12); }
.dash-hero-head { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; opacity: .95; }
.dash-hero-num { font-size: 40px; font-weight: 700; letter-spacing: -.5px; line-height: 1.05; }
.dash-wave { width: 100%; height: 54px; margin: 2px 0 4px; }
.dash-hero-split { display: flex; }
.dash-hero-split > div { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 0 12px; border-left: 1px solid rgba(255,255,255,.35); }
.dash-hero-split > div:first-child { padding-left: 0; border-left: 0; }
.dash-hero-split .k { font-size: 11.5px; opacity: .85; }
.dash-hero-split .v { font-size: 17px; font-weight: 700; }
.dash-trend { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.22); }
.dash-trend.down { background: rgba(0,0,0,.18); }
.dash-card .dash-trend.up, .dash-row .dash-trend.up { background: var(--success-soft); color: var(--success); }
.dash-card .dash-trend.down, .dash-row .dash-trend.down { background: var(--danger-soft); color: var(--danger); }
.dash-donut-wrap { display: flex; align-items: center; gap: 14px; }
.dash-donut { width: 128px; height: 128px; flex-shrink: 0; }
.dash-donut-num { font-size: 20px; font-weight: 700; fill: var(--text); }
.dash-donut-sub { font-size: 9.5px; fill: var(--text-faint); }
.dash-legend { flex: 1; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; }
.dash-legend > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dash-legend-label { color: var(--text-muted); flex: 1; min-width: 0; }
.dash-legend b { font-size: 16px; }
.dash-stack { display: flex; flex-direction: column; gap: 14px; }
.dash-tile { display: flex; gap: 14px; align-items: center; padding: 14px 16px; flex: 1; }
.dash-tile-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; background: var(--accent-soft); color: var(--accent-dark); }
.dash-tile-icon.small { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
.dash-tile.tone-danger .dash-tile-icon { background: var(--danger-soft); color: var(--danger); }
.dash-tile.tone-success .dash-tile-icon { background: var(--success-soft); color: var(--success); }
.dash-tile.tone-info .dash-tile-icon { background: var(--info-soft); color: var(--info); }
.dash-tile-body { flex: 1; min-width: 0; }
.dash-tile-top { display: flex; align-items: baseline; gap: 10px; }
.dash-tile-value { font-size: 22px; font-weight: 700; }
.dash-tile-label { font-size: 13px; color: var(--text-muted); }
.dash-progress { height: 8px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; margin-top: 8px; }
.dash-progress span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.dash-tile.tone-danger .dash-progress span { background: var(--danger); }
.dash-tile.tone-success .dash-progress span { background: var(--success); }
.dash-tile.tone-info .dash-progress span { background: var(--info); }
.dash-tile-sub { font-size: 11.5px; color: var(--text-faint); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-list-card { min-width: 0; }
.dash-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin-bottom: 10px; padding: 0 4px; }
.dash-tab { all: unset; cursor: pointer; padding: 8px 2px 10px; font-size: 14px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dash-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.dash-rows { display: flex; flex-direction: column; gap: 8px; }
.dash-row { display: grid; grid-template-columns: 44px minmax(0, 1.6fr) minmax(0, .8fr) auto; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; }
.dash-row-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: var(--accent-soft); }
.dash-row-icon.tone-success { background: var(--success-soft); } .dash-row-icon.tone-danger { background: var(--danger-soft); } .dash-row-icon.tone-info { background: var(--info-soft); } .dash-row-icon.tone-warn { background: var(--warn-soft); } .dash-row-icon.tone-muted { background: var(--surface-alt); }
.dash-row-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row-sub { font-size: 12px; color: var(--text-faint); margin-top: 1px; }
.dash-row-tag { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row-metric { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.dash-pill { background: var(--text); color: var(--bg); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.dash-week .dash-weekbars { width: 100%; height: 170px; }
.dash-bar { fill: var(--border); }
.dash-bar.is-best { fill: var(--accent); }
.dash-bar-dot { fill: #fff; stroke: var(--accent); stroke-width: 2; }
.dash-bar-label { font-size: 10px; fill: var(--text-faint); }
.dash-line { stroke: var(--text); stroke-width: 1.6; opacity: .7; }
.dash-week-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.dash-week-foot-label { font-weight: 600; font-size: 13.5px; }
.dash-week-foot-sub { font-size: 12px; color: var(--text-faint); }
.dash-week-foot-value { margin-left: auto; font-size: 20px; font-weight: 700; }
.an-section-title { margin: 6px 0 12px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
@media (max-width: 640px) { .dash-row { grid-template-columns: 40px 1fr auto; } .dash-row-tag { display: none; } .dash-hero-num { font-size: 32px; } }

/* ---- Site Stats ------------------------------------------------------------- */
.ss-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ss-actions select { min-width: 220px; }
.ss-setup { margin-top: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.ss-setup code { background: var(--surface-alt); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.ss-bars { display: flex; flex-direction: column; gap: 8px; }
.ss-bar-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr 48px; gap: 10px; align-items: center; font-size: 12.5px; }
.ss-bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-bar-label small { display: block; color: var(--text-faint); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-bar-num { text-align: right; font-weight: 600; }
.ss-devices { display: flex; gap: 12px; }
.ss-device { flex: 1; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.ss-device-pct { font-size: 24px; font-weight: 700; }
.ss-device-label { font-size: 12.5px; font-weight: 600; margin-top: 2px; }
.ss-device-sub { font-size: 11px; color: var(--text-faint); }
.ss-hours { height: 90px; gap: 3px; }
.ss-line { display: block; }
.ss-heat-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ss-heat-controls select { max-width: 260px; }
.ss-heat-wrap { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-alt); }
.ss-heat-stage { position: relative; width: 100%; overflow: hidden; }
.ss-heat-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ss-heat-inner iframe { border: 0; display: block; pointer-events: none; background: #fff; }
.ss-heat-canvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.ss-heat-canvas[hidden] { display: none; }
.ss-heat-note { margin-top: 8px; font-size: 12px; }

/* ---- Pitch Builder: real business search + AI examples ---- */
.pb-biz { margin-bottom: 20px; }
.pb-biz-search { position: relative; }
.pb-biz-search input[type=search] { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font: inherit; font-size: 14px; }
.pb-biz-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 320px; overflow: auto; }
.pb-biz-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name chip" "sub chip"; gap: 0 10px; align-items: center; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border); background: transparent; cursor: pointer; font: inherit; color: inherit; }
.pb-biz-row:last-child { border-bottom: 0; }
.pb-biz-row:hover, .pb-biz-row:focus { background: var(--accent-soft); outline: none; }
.pb-biz-row-name { grid-area: name; font-weight: 600; font-size: 13.5px; }
.pb-biz-row-sub { grid-area: sub; font-size: 12px; color: var(--text-muted); }
.pb-biz-row .chip { grid-area: chip; }
.pb-biz-empty { padding: 10px 12px; font-size: 13px; }
.pb-biz-picked { margin-top: 10px; }
.pb-biz-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius-sm); }
.pb-biz-name { font-weight: 700; font-size: 15px; }
.pb-biz-sub { font-size: 12.5px; color: var(--text-muted); }
.pb-biz-actions { display: flex; gap: 6px; align-items: center; }
.pb-ai-status { font-size: 12.5px; margin-top: 6px; min-height: 16px; }
.pb-biz-hint { font-size: 12.5px; margin-top: 8px; line-height: 1.5; }
.pb-ai { border-top-style: solid; border-top-color: var(--accent); }
.pb-ai-examples { display: grid; gap: 12px; }
.pb-ai-example { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 12px 14px; }
.pb-ai-example-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pb-ai-example-head b { flex: 1; font-size: 13.5px; }
.pb-ai-badge { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
.pb-ai-example-body p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; }
.pb-ai-example-body p:last-child { margin-bottom: 0; }
.pb-ai-tips { margin-top: 12px; font-size: 13px; line-height: 1.5; }
.pb-ai-tips ul { margin: 4px 0 0; padding-left: 20px; }
@media (max-width: 720px) { .pb-biz-card { flex-direction: column; align-items: stretch; } .pb-biz-actions { justify-content: space-between; } }

/* ---- Tax form: plain-English groups ---- */
.tax-group-title { grid-column: 1 / -1; margin: 10px 0 -4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); }
.tax-group-title:first-child { margin-top: 0; }
.tax-group-title .an-muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.tax-radio-help { display: block; font-size: 12px; margin-top: 2px; line-height: 1.4; }
.tax-rare { grid-column: 1 / -1; border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 8px 12px; }
.tax-rare summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.tax-rare[open] summary { margin-bottom: 2px; }

/* Pitch Builder link card inside Training (the builder lives on its own tab) */
.course-lesson.course-pitch--link .course-bar { cursor: pointer; }
.course-lesson.course-pitch--link .course-status { background: var(--accent); }

.pb-biz-row-top { display: flex; gap: 8px; align-items: flex-start; }
.pb-biz-row-top .pb-biz-search { flex: 1; }
.pb-biz-row-top .btn { white-space: nowrap; padding-top: 10px; padding-bottom: 10px; }
.pb-biz-add { background: var(--accent-soft); }
.pb-biz-add .pb-biz-row-name { color: var(--accent-dark); }
@media (max-width: 560px) { .pb-biz-row-top { flex-direction: column; } .pb-biz-row-top .btn { width: 100%; } }

/* ---- Analytics: AI usage card ---- */
.an-ai-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.an-ai-kpis > div { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); }
.an-ai-kpis b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.an-ai-kpis span { font-size: 12px; color: var(--text-muted); }

/* ---- Agreements: contractor documents signed in the portal ---- */
.agree-banner { padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-alt); margin-bottom: 16px; font-size: 14px; }
.agree-banner.warn { border-color: var(--accent); }
.agree-banner.ok { border-color: var(--success); }
.agree-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 12px; overflow: hidden; }
.agree-card.signed { border-color: var(--success); }
.agree-head { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: none; border: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.agree-head.static { cursor: default; }
.agree-head:hover:not(.static) { background: var(--surface-alt); }
.agree-title { flex: 1; min-width: 0; display: block; }
.agree-title strong { display: block; font-size: 15px; }
.agree-title small { display: block; color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.agree-chev { color: var(--text-muted); }
.agree-status { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.agree-status.ok { color: var(--success); border: 1px solid var(--success); }
.agree-status.todo { color: var(--danger); border: 1px solid var(--danger); }
.agree-body { padding: 0 16px 16px; }
.agree-doc { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 20px; background: var(--surface-alt); font-size: 14px; line-height: 1.62; }
.agree-doc h4 { margin: 20px 0 6px; font-size: 14.5px; }
.agree-doc h4:first-child { margin-top: 0; }
.agree-doc p { margin: 0 0 10px; }
.agree-doc ul { margin: 0 0 10px 18px; }
.agree-doc li { margin-bottom: 5px; }
.agree-doc .agree-party { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-muted); }
.agree-doc .agree-foot { color: var(--text-muted); font-size: 13px; }
.agree-sign { margin-top: 16px; }
.agree-scroll-hint { font-size: 13px; color: var(--text-muted); margin: 0 0 10px; }
.agree-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; margin-bottom: 14px; cursor: pointer; }
.agree-consent input { margin-top: 3px; flex: none; }
.agree-consent input:disabled + span { opacity: .55; }
.agree-sign-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.agree-name-label { font-size: 13px; color: var(--text-muted); width: 100%; }
.agree-name { flex: 1; min-width: 220px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: inherit; font: inherit; }
.agree-name:disabled { opacity: .55; }
.agree-legal { font-size: 12px; color: var(--text-muted); margin: 12px 0 0; }
.agree-signed-note { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--success); border-radius: var(--radius-sm); font-size: 13.5px; }
.agree-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.agree-table th, .agree-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
.agree-table th { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
@media (max-width: 640px) {
  .agree-doc { max-height: 58vh; padding: 14px 15px; }
  .agree-name { min-width: 0; }
}

/* ---- Account: tab bar (Profile / Agreements / My Stats / Tax & Payments) ---- */
.account-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 20px; padding-bottom: 0; }
.account-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid transparent; border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: none; color: var(--text-muted); font: inherit; font-size: 14px; cursor: pointer; margin-bottom: -1px; }
.account-tab:hover { color: inherit; background: var(--surface-alt); }
.account-tab.active { color: inherit; font-weight: 600; background: var(--surface); border-color: var(--border); border-bottom: 1px solid var(--surface); }
.account-tab-dot { color: var(--danger); font-size: 10px; line-height: 1; }
#accountPane > .page-header h2 { font-size: 18px; }
@media (max-width: 640px) {
  .account-tab span:not(.account-tab-dot) { display: none; }
  .account-tab.active span:not(.account-tab-dot) { display: inline; }
}

/* ---- Ballpark quote on the business profile ------------------------------
   Figures here are GUIDE figures under Section 3A of the contractor
   agreement. The warning line is part of the component, not decoration --
   do not drop it when restyling. */
.quote-box {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent, #c9a227);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface-2, rgba(127, 127, 127, 0.06));
}
.quote-box .k {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.quote-tier {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent, #c9a227);
  color: #1a1a1a;
}
.quote-auto {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-faint);
}
.quote-range {
  font-size: 22px;
  font-weight: 650;
  line-height: 1.2;
  margin: 6px 0 2px;
}
.quote-basis {
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.5;
}
.quote-warn {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted, var(--text-faint));
}
.quote-warn::before {
  content: "⚠ ";
}
@media (max-width: 860px) {
  .quote-range { font-size: 19px; }
}

/* ---------------------------------------------------------------------------
   Activity Log (js/activityLog.js)

   A row is a <button> rather than a div with a click handler, so it is
   reachable by keyboard and announces its expanded state. The detail panel
   is a <dl>; the labels carry the meaning, so it must stay a definition
   list rather than becoming a grid of bare text.
   --------------------------------------------------------------------------- */

.al-wrap { display: flex; flex-direction: column; gap: 14px; }

.al-controls {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
}
.al-ctl { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.al-ctl > span { color: var(--text-muted); font-weight: 600; letter-spacing: .01em; }
.al-ctl select {
  font: inherit; font-size: 13px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); min-width: 150px;
}

/* Pager. The count and the buttons sit on one line on a desktop and stack on
   a phone, where the count matters more than the page numbers. */
.al-pager {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--text-muted);
}
.al-pager-count strong { color: var(--text); font-weight: 700; }
.al-pager-btns { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.al-page {
  font: inherit; font-size: 12.5px; line-height: 1;
  padding: 7px 10px; min-width: 32px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); cursor: pointer;
}
.al-page:hover:not(:disabled):not(.is-current) { background: var(--surface-alt); }
.al-page:disabled { opacity: .4; cursor: default; }
.al-page.is-current {
  background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 700; cursor: default;
}
:root[data-theme="dark"] .al-page.is-current,
.al-page.is-current { color: var(--surface); }
.al-gap { padding: 0 2px; color: var(--text-faint); }

/* Rows */
.al-rows {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.al-row { border-bottom: 1px solid var(--border); }
.al-row:last-child { border-bottom: 0; }
.al-row.is-open { background: var(--surface-alt); }

.al-row-head {
  display: grid; grid-template-columns: 28px 1fr auto 16px;
  gap: 10px; align-items: baseline; width: 100%;
  padding: 11px 14px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--text); text-align: left;
}
.al-row-head:hover { background: var(--surface-alt); }
.al-row-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.al-icon { text-align: center; font-size: 14px; }
.al-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.al-summary { line-height: 1.45; }
.al-who { font-size: 11.5px; color: var(--text-faint); }
.al-time { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
.al-chev { color: var(--text-faint); font-size: 11px; }
.al-dim { color: var(--text-faint); }

/* Detail */
.al-detail { padding: 2px 14px 16px 52px; }
.al-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px 20px; margin: 0;
}
.al-field { margin: 0; min-width: 0; }
.al-field dt {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-faint); margin-bottom: 2px;
}
.al-field dd { margin: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.al-field--wide { grid-column: 1 / -1; }
.al-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; white-space: pre-wrap;
}
.al-note {
  grid-column: 1 / -1; margin: 10px 0 0;
  font-size: 12px; line-height: 1.5; color: var(--text-muted);
  border-left: 2px solid var(--border); padding-left: 10px;
}
.al-empty {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 28px 18px;
  text-align: center; font-size: 13px; color: var(--text-muted);
}

@media (max-width: 640px) {
  .al-ctl, .al-ctl select { width: 100%; }
  .al-row-head { grid-template-columns: 24px 1fr 14px; row-gap: 2px; }
  /* The timestamp drops under the summary rather than squeezing it. */
  .al-time { grid-column: 2; font-size: 11px; }
  .al-detail { padding-left: 14px; }
  .al-pager { justify-content: flex-start; }
}

/* ---- "How to use this site": read-progress ------------------------------- */
/* Sections tick themselves off as the reader scrolls past them (js/guide.js),
   so this is a progress readout rather than a control. Uses the same tokens
   as the rest of the guide so it inherits light and dark automatically. */
.guide-progress { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.guide-progress-track { flex: 1 1 200px; min-width: 140px; max-width: 420px; height: 6px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); overflow: hidden; }
.guide-progress-bar { width: 0%; height: 100%; border-radius: 999px; background: var(--accent); transition: width 240ms ease; }
.guide-progress-count { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.guide-progress-hint { font-size: 12px; color: var(--text-muted); }

.guide-read { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--accent-dark); background: var(--accent-soft); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.guide-read[hidden] { display: none; }

.guide-nav a.read { color: var(--text); }
.guide-nav a.read::after { content: "✓"; float: right; color: var(--accent-dark); font-weight: 700; }
.guide-nav a.read.active::after { color: var(--accent-dark); }

/* Zero-height sentinel at the end of each section; never visible itself. */
.guide-end { height: 1px; margin: 0; padding: 0; }

@media (max-width: 720px) {
  .guide-progress-hint { display: none; }
  .guide-read { margin-left: 0; }
}

/* ---- Parent/guardian co-signature (under-18 contractors) ---------------- */
.agree-guardian { margin-top: 14px; padding: 14px 16px; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.agree-guardian.done { border-style: solid; }
.agree-guardian.waiting { background: transparent; }
.agree-guardian-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.agree-guardian .agree-sign-row { margin-top: 8px; }
.agree-guardian .agree-signed-note { margin: 0; }

/* ---- Messages scroll fix ---------------------------------------------------
   The thread pane is a flex column inside a fixed-height grid. Without
   min-height:0 on the grid row, the pane and the thread, Firefox (and some
   mobile browsers) let the thread grow to its full content height instead of
   scrolling, so older messages could not be scrolled back to. */
.chat { grid-template-rows: minmax(0, 1fr); }
.chat-list, .chat-pane { min-height: 0; }
.chat-pane { overflow: hidden; }
.chat-thread {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.chat-head, .chat-compose { flex-shrink: 0; }

/* Calendar: caller notes travel with the appointment */
.cal-has-notes { font-size: 10px; margin-right: 3px; }
.cal-note-snippet { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cal-note-snippet.is-empty { color: var(--text-faint); font-style: italic; }
.cal-brief { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; }
.cal-brief-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.cal-brief-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 16px; font-size: 13.5px; }
.cal-brief-grid span { display: block; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; }
.cal-brief-grid a { font-weight: 700; }
.cal-brief-hint { font-size: 12px; color: var(--text-faint); margin-top: 10px; }
.cal-notes-section { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.cal-prev-notes { margin-top: 6px; max-height: 260px; overflow-y: auto; }
/* On an appointment, show the history first: read before you dial. */
.cal-notes-section .nl { display: flex; flex-direction: column; }
.cal-notes-section .nl-list { order: -1; margin: 0 0 14px; max-height: 340px; overflow-y: auto; }
.cal-notes-section .nl-legacy { order: -1; margin-bottom: 12px; }

/* Website leads · Google Analytics / Tag Manager card (Site Stats + Analytics) */
.ss-google .an-card-head code, .ss-google-setup code { background: var(--surface-alt); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.ss-google .an-kpis { margin: 4px 0 10px; }
.ss-google-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ss-google-pills .chip b { margin-left: 4px; }
.ss-google-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ss-google-link { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.ss-google-link:hover { border-color: var(--accent); transform: translateY(-1px); }
.ss-google-link b { font-size: 14px; }
.ss-google-link span { font-size: 12.5px; color: var(--text-muted); }
.ss-google-setup { margin-top: 14px; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.ss-google-setup summary { cursor: pointer; color: var(--text); font-weight: 600; }
.ss-google-setup ul { margin: 8px 0 0 18px; padding: 0; }
.ss-google-setup li { margin: 4px 0; }

/* Owner availability (Calendar): note line, per-day timeline bar, slot chips, rules editor */
.av-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); margin: -6px 0 14px; line-height: 1.5; }
.av-note:empty { display: none; }
.av-note b { color: var(--text); }
.av-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success, #2f9e6e); flex: none; }
.av-note-busy { color: var(--danger, #b4473a); }
.av-bar { position: relative; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--success, #2f9e6e) 28%, var(--surface-alt)); margin: 2px 0 4px; overflow: hidden; }
.av-bar--off { background: var(--surface-alt); }
.av-bar--full { background: color-mix(in srgb, var(--danger, #b4473a) 22%, var(--surface-alt)); }
.av-bar i { position: absolute; top: 0; bottom: 0; display: block; }
.av-bar .av-busy { background: var(--danger, #b4473a); opacity: .75; }
.av-bar .av-booked { background: var(--text); opacity: .85; min-width: 3px; }
.cal-day.other-month .av-bar { opacity: .45; }
.av-section { margin: 4px 0 14px; }
.av-head { font-size: 12.5px; color: var(--text-muted); margin: 6px 0 8px; line-height: 1.5; }
.av-head b { color: var(--text); }
.av-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.av-chip { font: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .12s, background .12s; }
.av-chip.is-open:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.av-chip.is-selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.av-chip.is-busy, .av-chip.is-booked { cursor: not-allowed; color: var(--text-faint); background: var(--surface-alt); text-decoration: line-through; }
.av-chip.is-booked { border-style: dashed; }
.av-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.av-legend span { display: inline-flex; align-items: center; gap: 5px; }
.av-legend i { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--border); background: var(--surface); }
.av-legend i.is-busy { background: var(--surface-alt); }
.av-legend i.is-booked { background: var(--surface-alt); border-style: dashed; }
.av-none { font-size: 13px; color: var(--text-muted); padding: 8px 0; }
.av-rule-day { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); align-items: start; }
.av-rule-dayname { font-weight: 600; font-size: 13px; padding-top: 3px; }
.av-rule-list { display: flex; flex-wrap: wrap; gap: 6px; }
.av-rule { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 8px 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.av-rule.is-open { border-color: color-mix(in srgb, var(--success, #2f9e6e) 50%, var(--border)); }
.av-rule.is-busy { border-color: color-mix(in srgb, var(--danger, #b4473a) 50%, var(--border)); color: var(--danger, #b4473a); }
.av-rule button { border: 0; background: transparent; cursor: pointer; color: var(--text-faint); font-size: 12px; padding: 0 2px; }
.av-rule button:hover { color: var(--danger, #b4473a); }
.av-add .form-field.full { grid-column: 1 / -1; }

/* My Clients (callers): home card + page */
.mc-home { margin: 0 0 18px; }
.mc-home-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mc-home-head h3 { margin: 0 0 2px; font-size: 17px; }
.mc-home-head p { margin: 0; font-size: 13px; color: var(--text-muted); }
.mc-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow-sm, none); }
.mc-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.mc-name { font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.mc-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.mc-commission { text-align: right; min-width: 180px; }
.mc-commission b { display: block; font-size: 20px; color: var(--text); }
.mc-commission span { font-size: 12px; color: var(--text-muted); line-height: 1.4; display: block; }
.mc-commission.is-paid b { color: var(--success, #2f9e6e); }
.mc-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 14px 0 10px; }
.mc-step { position: relative; padding: 8px 8px 8px 10px; border-radius: 10px; background: var(--surface-alt); border: 1px solid transparent; }
.mc-step.is-done { background: color-mix(in srgb, var(--success, #2f9e6e) 12%, var(--surface)); }
.mc-step.is-current { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.mc-step-dot { width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); margin-bottom: 6px; }
.mc-step.is-done .mc-step-dot { background: var(--success, #2f9e6e); color: #fff; border-color: transparent; }
.mc-step.is-current .mc-step-dot { background: var(--accent); color: #fff; border-color: transparent; }
.mc-step-label { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.mc-step-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }
.mc-status { font-size: 13.5px; line-height: 1.55; padding: 10px 12px; border-radius: 10px; background: var(--surface-alt); margin-bottom: 12px; }
.mc-todo { color: var(--text-muted); }
.mc-grid { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 16px; }
.mc-contact div { font-size: 13px; margin: 4px 0; display: flex; gap: 8px; }
.mc-contact span { color: var(--text-faint); min-width: 54px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding-top: 1px; }
.mc-notes-title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: 6px; }
.mc-note { padding: 8px 10px; border-radius: 8px; background: var(--surface-alt); margin-bottom: 6px; }
.mc-note-meta { font-size: 11.5px; color: var(--text-muted); margin-bottom: 2px; }
.mc-note-body { font-size: 13px; white-space: pre-wrap; line-height: 1.45; }
.mc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 820px) { .mc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mc-grid { grid-template-columns: 1fr; } .mc-commission { text-align: left; } }

/* Home: turn-on-notifications nudge */
.notif-nudge { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin: 0 0 16px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface); }
.notif-nudge-icon { font-size: 20px; }
.notif-nudge-text { flex: 1; min-width: 240px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.notif-nudge-text b { color: var(--text); }

/* Calendar time zones: picker, conversion line, converted times */
.tz-btn--unset { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.tz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-top: 6px; }
.tz-opt { font: inherit; text-align: left; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: border-color .12s, background .12s; }
.tz-opt b { font-size: 14px; }
.tz-opt span { font-size: 12px; color: var(--text-muted); }
.tz-opt:hover { border-color: var(--accent); }
.tz-opt.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.tz-line { font-size: 13px; color: var(--text-muted); padding: 8px 10px; border-radius: 8px; background: var(--surface-alt); }
.tz-line b { color: var(--text); }
.form-field.full { grid-column: 1 / -1; }
.cal-event-time { font-weight: 700; opacity: .85; }
.av-chip small { display: block; font-size: 10px; color: var(--text-faint); line-height: 1.1; margin-top: 1px; font-weight: 400; }
.av-chip.is-selected small { color: rgba(255,255,255,.85); }

/* Business local clock on cards and lists */
.biz-clock { white-space: nowrap; color: var(--text-muted); }
.biz-clock.is-closed { color: var(--danger, #b4473a); }