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

/* ── Inter / Inter Tight (self-hosted variable fonts) ─────────
   Declared globally so the @font-face rules exist once, but APPLIED only
   inside the workout-builder overlay (see the builder section far below).
   A declared face is never fetched unless something on the page actually
   renders in it, so the rest of the CRM's system-font stack is untouched
   and pays zero bytes. Inter = UI text; Inter Tight = display headings
   (italic 900 uppercase). */
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/InterTight-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/InterTight-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/InterTight-Italic-VariableFont_wght.ttf') format('truetype');
}

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Saira-VariableFont_wdth_wght.ttf') format('truetype-variations');
}

:root {
  --bg:            #0d1117;
  --surface:       #161c27;
  --surface-2:     #1e2535;
  --surface-hover: #232c3d;
  --border:        #313d54;
  --border-light:  #1e2535;

  --primary:       #2557d6;
  --primary-hover: #1f4bc0;
  --primary-dim:   rgba(37, 87, 214, 0.12);

  --accent:        #2557d6;
  --accent-hover:  #1f4bc0;
  --accent-dim:    rgba(37, 87, 214, 0.12);
  /* ⚠️ AT :root BECAUSE FLOATING LAYERS LIVE ON `body`. It was only defined
     inside the calendar's own scope, so the peek, the create and edit sheets
     and the menus — all appended to `document.body` — resolved it to NOTHING.
     `var(--accent-strong)` with no fallback is not an error; it just inherits,
     so two link colours and a checkbox were quietly plain text. Measured:
     empty on the modal, #5a86f5 inside `.c2-week`. */
  --accent-strong: #5a86f5;

  --chart-1:       #2557d6;
  --chart-2:       #7ac943;

  --success:       #22c55e;
  --success-dim:   rgba(34, 197, 94, 0.12);
  --warning:       #f59e0b;
  --warning-dim:   rgba(245, 158, 11, 0.12);
  --danger:        #ef4444;
  --danger-dim:    rgba(239, 68, 68, 0.12);
  --error:         var(--danger);
  --info:          #3b82f6;
  --info-dim:      rgba(59, 130, 246, 0.12);

  --text:          #e8edf5;
  --text-primary:  #e8edf5;
  --text-muted:    #9aaabe;
  --text-secondary:#9aaabe;
  --text-subtle:   #7a8fa8;

  --input-bg:      rgba(255,255,255,0.06);
  --row-border:    rgba(255,255,255,0.04);
  --hover-overlay: rgba(255,255,255,0.07);

  --sidebar-w:     220px;
  --radius:        6px;
  --radius-sm:     4px;
  --shadow:        0 2px 8px rgba(0,0,0,0.2);

  /* ── Type Scale ──────────────────────────────────────────── */
  --fs-xs:         12px;   /* floor — caps labels, timestamps, muted meta */
  --fs-sm:         13px;   /* secondary text, table cells, badges */
  --fs-base:       14px;   /* primary body, buttons, form inputs */
  --fs-md:         15px;   /* emphasized body, card descriptions */
  --fs-lg:         16px;   /* section titles, card headers */
  --fs-xl:         18px;   /* page sub-headings */
  --fs-2xl:        20px;   /* page headings */
  --fs-3xl:        24px;   /* large display values */
  --fs-4xl:        32px;   /* hero / dashboard KPIs */
}

/* ── Light Theme ─────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:             #f1f4f9;
  --surface:        #ffffff;
  --surface-2:      #f5f7fb;
  --surface-hover:  #edf1f7;
  --border:         #dde3ed;
  --border-light:   #edf1f7;

  --text:           #1e293b;
  --text-primary:   #1e293b;
  --text-muted:     #64748b;
  --text-secondary: #64748b;
  --text-subtle:    #94a3b8;

  --input-bg:       #ffffff;
  --row-border:     rgba(0,0,0,0.06);
  --hover-overlay:  rgba(0,0,0,0.05);

  --shadow:         0 4px 20px rgba(0,0,0,0.08);
  --primary-dim:    rgba(37, 87, 214, 0.10);
  --success-dim:    rgba(34, 197, 94, 0.10);
  --warning-dim:    rgba(245, 158, 11, 0.10);
  --danger-dim:     rgba(239, 68, 68, 0.10);
  --info-dim:       rgba(59, 130, 246, 0.10);
  --accent-dim:     rgba(37, 87, 214, 0.08);
}

html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-size: var(--fs-base); line-height: 1.5; overflow-x: hidden; color-scheme: dark; font-variant-numeric: tabular-nums; }
/* Light mode: flip native form controls (checkboxes, radios, selects, date pickers, scrollbars) to light.
   They inherit color-scheme, which otherwise stays 'dark' and renders dark/black controls on light pages. */
[data-theme="light"], [data-theme="light"] body { color-scheme: light; }

/* ============================================================
   GLOBAL TYPOGRAPHY RULE — no orphans (single-word last lines)
   ============================================================
   `text-wrap: pretty` is the modern browser solution to widow/orphan
   prevention: when a paragraph's last line would be a single word, the
   layout engine pulls a word back from the previous line to balance.
   Inherits down from body to every text node, so this is a one-line
   fix for the entire CRM.
   Browsers without support (older mobile WebViews) silently fall back
   to the default greedy wrap — no breakage.
*/
body { text-wrap: pretty; display: flex; flex-direction: column; }
/* ── Top-of-page banners (Phase 3.1) ──
   Stack natural-height above .app-layout so they push content down
   instead of overlaying it. Hidden state collapses to zero via display:none. */
body > .ops-admin-banner,
body > .coach-broadcasts-banner-stack { flex: 0 0 auto; }
/* For shorter, headline-y text where line balance matters more than
   orphan prevention (titles, section headers, card headings), opt into
   the more aggressive `balance` algorithm so all lines come out roughly
   equal in length. */
h1, h2, h3, h4, h5, h6,
.card-header h1, .card-header h2, .card-header h3,
.modal-title, .pe-rail-header,
.rf-tip-title { text-wrap: balance; }

/* ── Weight hierarchy — headings and display values get 600, everything else 500 baseline ── */
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.02em; }
.stat-value, .prog-stat-value, .prog-vol-value { font-weight: 600; letter-spacing: -0.03em; }
.view-header h1 { font-weight: 600; letter-spacing: -0.03em; }
.card-header h2 { font-weight: 600; letter-spacing: -0.01em; }
.ph-name, .ph-metric-value { font-weight: 600; letter-spacing: -0.02em; }
.prog-ctrl-title, .prog-section-title { font-weight: 600; }

/* ============================================================
   LAYOUT
   ============================================================ */
.app-layout {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0;
  /* Vertical fallback scroll: if the parent shrinks past brand+notif+add+footer,
     the entire sidebar can scroll so Sign Out stays reachable. Horizontal must
     stay hidden so the resize handle and tooltips don't add a horizontal track. */
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  transition: width 0.2s ease, min-width 0.2s ease;
  flex-shrink: 0;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { width: 0; background: transparent; }
/* Pin the non-nav rows so only .sidebar-nav consumes/releases vertical space */
.sidebar-brand,
.sidebar-notif-section,
.sidebar-add-wrap,
.sidebar-footer { flex-shrink: 0; }

/* Collapsed state — icon-only strip */
.sidebar.collapsed {
  width: 72px !important;
  min-width: 72px !important;
  overflow: visible;
}
.sidebar.collapsed .sidebar-label { display: none; }
.sidebar.collapsed .nav-btn span  { display: none; }
.sidebar.collapsed .brand-text    { display: none; }
.sidebar.collapsed .sidebar-brand {
  justify-content: center;
  padding: 16px 0;
}
.sidebar.collapsed .nav-btn        { justify-content: center; padding: 12px 0; position: relative; }
.sidebar.collapsed .nav-btn svg    { width: 22px; height: 22px; opacity: 0.8; }
.sidebar.collapsed .btn-add-client { position: relative; }
.sidebar.collapsed .btn-logout     { position: relative; }
.sidebar.collapsed .mode-badge     { position: relative; }
.sidebar.collapsed .nav-badges     { display: none; }
.sidebar.collapsed .sidebar-add-wrap { padding: 10px 8px 12px; }
.sidebar.collapsed .btn-add-client { padding: 12px 0; justify-content: center; }
.sidebar.collapsed .sidebar-footer { padding: 12px 0 16px; }
.sidebar.collapsed .mode-badge     { padding: 6px 0; justify-content: center; }
.sidebar.collapsed .btn-logout     { justify-content: center; padding: 8px 0; }
.sidebar.collapsed .sidebar-footer .nav-btn--footer { padding: 8px 0; }
.sidebar.collapsed .sidebar-resize-handle { display: none; }

/* Tooltips — visible only in collapsed mode */
.sidebar.collapsed [data-tooltip] { position: relative; }
.sidebar.collapsed [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 300;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.sidebar.collapsed [data-tooltip]:hover::after { opacity: 1; }

/* Sidebar edge toggle — circle chevron on sidebar right edge */
.sidebar-edge-toggle {
  position: absolute;
  left: calc(var(--sidebar-w) - 15px);
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  padding: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
  transition: left 0.2s ease, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.sidebar-edge-toggle:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(37, 87, 214,0.4);
}
.sidebar-edge-toggle svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.sidebar-edge-toggle.is-collapsed svg {
  transform: rotate(180deg);
}

/* Sidebar has two states only — expanded / collapsed. Drag-to-resize removed. */

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--border);
}

.brand-logo {
  width: 38px;
  height: 38px;
  background: var(--primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: var(--fs-base);
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  overflow: hidden;
}
.brand-logo.has-custom-logo { background: transparent; }
.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  display: block;
}

/* FitOps Pro sidebar mark — four variants swapped by state (expanded/collapsed)
   and theme (dark/light). Expanded shows the horizontal wordmark (icon baked in),
   collapsed shows just the icon; dark uses the white art, light the reversed +
   sapphire art. */
.brand-art { display: none; }
.brand-art--full-dark,
.brand-art--full-light { height: 24px; width: auto; }
.brand-art--icon-dark,
.brand-art--icon-light { height: 28px; width: auto; }
.sidebar:not(.collapsed) .brand-art--full-dark { display: block; }
.sidebar.collapsed .brand-art--icon-dark { display: block; }
[data-theme="light"] .sidebar:not(.collapsed) .brand-art--full-dark  { display: none; }
[data-theme="light"] .sidebar:not(.collapsed) .brand-art--full-light { display: block; }
[data-theme="light"] .sidebar.collapsed .brand-art--icon-dark  { display: none; }
[data-theme="light"] .sidebar.collapsed .brand-art--icon-light { display: block; }

.brand-name {
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--text);
}

.brand-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Hide scrollbar chrome but keep scroll behavior — only visible when banners push content past viewport */
.sidebar-nav::-webkit-scrollbar { width: 0; background: transparent; }
.sidebar-nav { scrollbar-width: none; }

.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  position: relative;
}

.nav-btn svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; }

.nav-btn:hover { background: var(--surface-hover); color: var(--text); }
.nav-btn:hover svg { opacity: 1; }

.nav-btn.active {
  background: var(--primary-dim);
  color: var(--primary);
  font-weight: 500;
}
.nav-btn.active svg { opacity: 1; }

.nav-badges {
  margin-left: auto;
  display: flex;
  gap: 3px;
  align-items: center;
}
.nav-badge {
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 500;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.nav-badge--blue {
  background: #3b82f6;
}

.sidebar-add-wrap {
  padding: 10px 10px 12px;
}

.sidebar-footer {
  padding: 14px 10px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Nav button placed inside the footer (e.g. Status) — slim it down to match
   .btn-logout neighbors while keeping .nav-btn active-state handling. */
.sidebar-footer .nav-btn--footer {
  justify-content: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: var(--fs-xs);
  border: 1px solid var(--border);
  margin-top: 8px;
}
.sidebar-footer .nav-btn--footer svg { width: 14px; height: 14px; opacity: 0.85; }
.sidebar-footer .nav-btn--footer:hover { border-color: var(--border-strong, var(--border)); }
.sidebar-footer .nav-btn--footer.active { border-color: var(--primary); }

/* ── Review mode (scoped Meta App Review login) ───────────────
   Only the Lead Engine is shown; everything else is hidden. Gated on the
   body.review-mode class set at bootstrap — zero effect on normal coaches. */
body.review-mode .nav-btn:not([data-view="lead-engine"]) { display: none !important; }
body.review-mode .sidebar-notif-section,
body.review-mode #btn-whats-new,
body.review-mode #btn-admin-panel,
body.review-mode .btn-add-client { display: none !important; }

.btn-add-client {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 14px 0;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-add-client svg { width: 16px; height: 16px; }
.btn-add-client:hover { background: var(--primary-hover); }

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.views-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.view {
  padding: 28px 32px 40px;
  /* Fill the scroll area minus the in-flow footer when content is short;
     grow past it (page scrolls) when content is tall. */
  flex: 1 0 auto;
}

.view.hidden { display: none; }

/* ============================================================
   VIEW HEADER
   ============================================================ */
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.view-header h1 {
  font-size: var(--fs-3xl);
  font-weight: 500;
  color: var(--text);
}
.view-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ── Global Search Bar (inline on dashboard) ─────────────────── */
.view-header > div:first-child { flex: 1; }
.view-header-actions { flex: 1; justify-content: flex-end; }
.global-search-bar {
  position: relative; flex: 1; max-width: 480px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0 14px; height: 38px; transition: border-color 0.15s;
}
.global-search-bar:focus-within { border-color: var(--primary); }
.gs-icon { color: var(--text-muted); flex-shrink: 0; }
.gs-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: var(--fs-sm); color: var(--text); font-family: inherit;
}
.gs-input::placeholder { color: var(--text-subtle); }
.gs-shortcut {
  font-size: 10px; font-weight: 600; color: var(--text-subtle);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px; padding: 2px 6px; white-space: nowrap;
}

/* ── Search Results Dropdown ─────────────────────────────────── */
.gs-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5); z-index: 200;
  max-height: 420px; overflow-y: auto;
}
.gs-results.hidden { display: none; }
.gs-results::-webkit-scrollbar { width: 4px; }
.gs-results::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.gs-category {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-subtle); padding: 10px 16px 4px;
}
.gs-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer; transition: background 0.1s;
}
.gs-result:hover, .gs-result.gs-active { background: rgba(255,255,255,0.04); }
.gs-result-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 600; flex-shrink: 0;
}
.gs-result-icon--client { background: rgba(37, 87, 214,0.12); color: var(--primary); }
.gs-result-icon--message { background: rgba(34,197,94,0.12); color: var(--success); }
.gs-result-icon--checkin { background: rgba(245,158,11,0.12); color: var(--warning); }
.gs-result-info { flex: 1; min-width: 0; }
.gs-result-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-result-sub { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-result-badge { font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 3px; flex-shrink: 0; }
.gs-match { background: rgba(37, 87, 214,0.2); color: var(--text); border-radius: 2px; padding: 0 1px; }
.gs-no-results { padding: 24px 16px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
.gs-searching { padding: 16px; text-align: center; color: var(--text-muted); font-size: var(--fs-xs); }

/* ── Global Search Modal (⌘K) ────────────────────────────────── */
.gs-modal-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.6); display: flex; align-items: flex-start;
  justify-content: center; padding-top: 15vh;
}
.gs-modal-overlay.hidden { display: none; }
.gs-modal {
  width: 560px; max-width: 90vw;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5); overflow: hidden;
}
.gs-modal-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.gs-modal-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: var(--fs-md); color: var(--text); font-family: inherit;
}
.gs-modal-input::placeholder { color: var(--text-subtle); }
.gs-shortcut-modal {
  font-size: 10px; font-weight: 600; color: var(--text-subtle);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px; padding: 2px 8px;
}
.gs-modal-results { max-height: 400px; overflow-y: auto; }
.gs-modal-results:empty::after {
  content: 'Start typing to search...'; display: block;
  padding: 24px; text-align: center; color: var(--text-subtle); font-size: var(--fs-sm);
}
.view-header-actions .btn-secondary {
  display: flex;
  align-items: center;
  gap: 6px;
}

.view-subtitle {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 3px;
}

.view-date {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 3px;
}

.view-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============================================================
   STATS GRID
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}


/* ── Rotating gradient border (default / uncolored cards) ── */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes border-spin {
  to { --border-angle: 360deg; }
}
/* Hover: subtle border brightening only */
.stat-card:hover,
.chart-card:hover {
  border-color: rgba(255,255,255,0.12);
}

/* ── Base stat card ─────────────────────────────────── */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 130px;
  box-shadow: none;
  transition: border-color 0.15s;
}
.stat-card:hover {
  border-color: rgba(255,255,255,0.12);
  box-shadow: none;
}
/* Suppress the spin animation on all neutral stat-card hovers — colored cards override this with their own rules */
.stat-card:hover::before { opacity: 0 !important; animation: none; }

/* ── Header row: label + period badge ── */
.stat-card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-bottom: auto;
}

/* ── KPI status — communicated via full border color, not value color ── */
/* 3-tier KPI: blue (on target), yellow (caution), red (below target) */
.stat-card--great   { border-color: rgba(37, 87, 214,0.6); }
.stat-card--warning { border-color: rgba(234,179,8,0.6); }
.stat-card--danger  { border-color: rgba(220,38,38,0.6); }

/* Values stay neutral — status is the border, not the number */
.stat-card--warning .stat-value,
.stat-card--danger .stat-value,
.stat-card--great .stat-value { color: var(--text) !important; }

/* Hover: border brightens */
.stat-card--great:hover   { border-color: rgba(37, 87, 214,0.8); }
.stat-card--warning:hover { border-color: rgba(234,179,8,0.8); }
.stat-card--danger:hover  { border-color: rgba(220,38,38,0.8); }


.stat-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.stat-value {
  font-size: var(--fs-4xl);
  font-weight: 500;
  color: var(--text);
  line-height: 1;
}

.stat-sub {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin-top: auto;
  min-height: 16px;
}

/* ============================================================
   CHARTS GRID
   ============================================================ */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.chart-card {
  padding: 16px 20px 20px;
  position: relative;
}

/* Card glare/sweep disabled — premium = restraint */
.glare-wrap {
  display: none;
}

/* Glare beam — real width with a center-bright gradient so it's
   properly clipped by the overflow:hidden wrap.
   Resting state: parked 120px off the left edge, invisible. */
/* Resting state: invisible. transform/opacity driven by Web Animations API. */
.glare-sweep {
  position: absolute;
  top: -60%;
  left: 0;
  width: 40px;
  height: 220%;
  transform: translateX(-60px) rotate(-20deg);
  opacity: 0;

  /* Very subtle bell-curve — this should catch your eye just barely,
     like peripheral light on glass, not a visible beam. Dark-mode
     cards are near-black so even 0.09 reads clearly. */
  background: linear-gradient(
    to right,
    transparent             0%,
    rgba(255,255,255,0.01)  20%,
    rgba(255,255,255,0.07)  42%,
    rgba(255,255,255,0.09)  50%,
    rgba(255,255,255,0.07)  58%,
    rgba(255,255,255,0.01)  80%,
    transparent             100%
  );

  pointer-events: none;
  will-change: transform, opacity;
}

/* Light mode — surface is lighter so peak needs to be a bit stronger
   to register as a reflection at all */
[data-theme="light"] .glare-sweep {
  background: linear-gradient(
    to right,
    transparent             0%,
    rgba(255,255,255,0.02)  20%,
    rgba(255,255,255,0.14)  42%,
    rgba(255,255,255,0.18)  50%,
    rgba(255,255,255,0.14)  58%,
    rgba(255,255,255,0.02)  80%,
    transparent             100%
  );
}

.chart-container {
  position: relative;
  height: 220px;
}

@media (max-width: 900px) {
  .charts-grid { grid-template-columns: 1fr; }
  .pinned-charts-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   DASHBOARD LOWER ROW — 3-column card grid
   ============================================================ */
.dashboard-lower {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 1100px) {
  .dashboard-lower { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .dashboard-lower { grid-template-columns: 1fr; }
}

/* ============================================================
   DASHBOARD CONTENT-SWAP — drag handles & slot highlights
   ============================================================ */

/* .dash-content fills its card slot */
.dash-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

/* Swap handle — shown on card hover */
.dash-swap-handle {
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--text-muted);
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
  margin-right: 8px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.card:hover .dash-swap-handle { opacity: 1; }
.dash-swap-handle:hover { color: var(--text); }
.dash-swap-handle:active { cursor: grabbing; }

/* Card being dragged */
.dash-slot-dragging {
  opacity: 0.35;
  pointer-events: none;
}

/* Drop target highlight — dashed primary border */
.dash-swap-target {
  outline: 2px dashed var(--primary) !important;
  outline-offset: -2px;
}


/* ============================================================
   CARD
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-header h2 {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}

.card-link {
  font-size: var(--fs-xs);
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-weight: 500;
}
.card-link:hover { text-decoration: underline; }

/* Renewal alert rows */
.renewal-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}
.renewal-item:last-child { border-bottom: none; }
.ra-group-rows .renewal-item:last-child { border-bottom: none; }
.renewal-item:hover .renewal-name { color: var(--primary); }

/* Left block: name + service/billing */
.renewal-item-left { flex: 1; min-width: 0; }
.renewal-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.renewal-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }

/* Middle block: continuity info */
.renewal-item-cont {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}
.ri-cont-check {
  color: var(--success);
  font-weight: 500;
  margin-right: 2px;
}
.ri-no-cont {
  color: var(--text-muted);
  font-style: italic;
}

/* Right block: days badge */
.renewal-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--surface-2);
  color: var(--text-muted);
}
.renewal-badge.warning { background: var(--warning-dim); color: var(--warning); }
.renewal-badge.urgent  { background: var(--danger-dim);  color: var(--danger); }

/* Renewal alert group headers & divider */
.ra-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 6px;
}
.ra-group-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.ra-group-count {
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 1px 7px;
}
.ra-divider {
  border: none;
  border-top: 2px solid var(--border);
  margin: 12px 0 4px;
}

/* Milestone alerts */
.milestone-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
}
.milestone-item:last-child { border-bottom: none; }
.milestone-item:hover .milestone-name { color: var(--primary); }
.milestone-icon { font-size: var(--fs-lg); flex-shrink: 0; }
.milestone-info { flex: 1; min-width: 0; }
.milestone-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.milestone-label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
.milestone-days {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.milestone-days--today   { background: rgba(34,197,94,0.12);  color: var(--success); }
.milestone-days--soon    { background: var(--warning-dim);    color: var(--warning); }
.milestone-days--upcoming{ background: var(--surface-2);      color: var(--text-secondary); }
.milestone-empty { font-size: var(--fs-sm); color: var(--text-muted); padding: 16px 0; text-align: center; font-style: italic; }

/* Breakdown */
.breakdown-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.breakdown-label {
  font-size: var(--fs-xs);
  width: 90px;
  flex-shrink: 0;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breakdown-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}

.breakdown-bar {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.4s ease;
  min-width: 3px;
}

.breakdown-bar--billing { background: var(--info); }
.breakdown-bar--source  { background: #a78bfa; }

.breakdown-section-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.breakdown-empty {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
  padding: 2px 0 4px;
}

.breakdown-count {
  font-size: var(--fs-xs);
  font-weight: 500;
  width: 24px;
  text-align: right;
}

.breakdown-divider { height: 2px; background: var(--border); margin: 12px 0; }

/* ============================================================
   INPUTS & FILTERS
   ============================================================ */
.search-input,
.filter-select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 7px 11px;
  font-size: var(--fs-sm);
  outline: none;
}

.search-input { width: 200px; }
.search-input::placeholder { color: var(--text-subtle); }
.search-input:focus,
.filter-select:focus { border-color: var(--primary); }

.filter-select option { background: var(--surface-2); color: var(--text); }

/* ── Clients view: frozen header + toolbar, only rows scroll ── */
#view-clients {
  flex: 1;
  min-height: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#view-clients .view-header {
  margin-bottom: 0;
  padding: 0 24px 16px;
}
#view-clients .table-wrapper {
  flex: 1;
  min-height: 0;
}
#view-clients .table-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* ── Clients view master search layout ─────────────────────── */
.clients-view-header {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.clients-header-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.clients-header-row h1 { flex: 1; flex-shrink: 0; }
.clients-header-row .clients-search-wrap { flex: 0 1 400px; }
.clients-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}
.clients-search-wrap {
  position: relative;
}

/* ── Filter Panel (Linear-style dropdown) ────────────────────── */
.cl-filter-wrap { position: relative; }
.cl-filter-toggle { display: flex; align-items: center; gap: 5px; }
.cl-filter-toggle.cl-filter-active { border-color: var(--primary); color: var(--primary); }
.cl-filter-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 100;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4); padding: 12px 14px;
  min-width: 240px;
}
.cl-filter-panel.hidden { display: none; }
.cl-fp-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cl-fp-row:last-child { margin-bottom: 0; }
.cl-fp-label { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); width: 60px; flex-shrink: 0; }
.cl-fp-row .filter-select { flex: 1; }
.cl-fp-actions { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ── Active Filter Pills ─────────────────────────────────────── */
.cl-active-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.cl-filter-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 500; padding: 2px 8px 2px 6px;
  background: var(--primary-dim); color: var(--primary); border-radius: 20px;
  cursor: default;
}
.cl-filter-pill-x {
  cursor: pointer; opacity: 0.6; font-size: 12px; line-height: 1;
}
.cl-filter-pill-x:hover { opacity: 1; }
.clients-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-subtle);
  pointer-events: none;
}
.clients-master-search {
  width: 100%;
  height: 38px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0 36px 0 42px;
  font-size: var(--fs-base);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.clients-master-search::placeholder { color: var(--text-subtle); }
.clients-master-search:focus {
  border-color: var(--primary);
}
.clients-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-sm);
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.1s, background 0.1s;
}
.clients-search-clear:hover { color: var(--text); background: var(--surface-3, var(--border)); }
.clients-search-clear.hidden { display: none; }

.filter-select.filter-active {
  border-color: var(--primary);
  color: var(--primary);
}
.filter-clear-btn {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
  white-space: nowrap;
}
.filter-clear-btn:hover { color: var(--text); border-color: var(--text-muted); }
.filter-clear-btn.hidden { display: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active, .btn-secondary:active, .btn:active { transform: scale(0.98); }
.btn-primary:disabled,
.btn-primary:disabled:hover {
  background: var(--surface-2);
  background-image: none;
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: default;
  box-shadow: none;
}

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-secondary:hover { background: var(--surface-hover); }

.btn-danger {
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.btn-danger:hover { background: #dc2626; }

.btn-danger-subtle {
  background: var(--danger-dim);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger-subtle:hover { background: rgba(239, 68, 68, 0.2); }

.btn-edit {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}
.btn-edit:hover {
  background: var(--info-dim);
  color: var(--info);
  border-color: var(--info);
}

.btn-delete {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}
.btn-delete:hover {
  background: var(--danger-dim);
  color: var(--danger);
  border-color: var(--danger);
}

/* ── Multi-select checkbox column ────────────────────────────── */
.col-check {
  width: 40px;
  min-width: 40px;
  padding: 0 8px !important;
  text-align: center;
  vertical-align: middle;
}
.col-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--primary);
  border-radius: 3px;
  transition: opacity 0.15s;
}
/* Header checkbox always visible */
.clients-table thead .col-check input[type="checkbox"] { opacity: 1; }
/* Row checkboxes: hidden until hover or checked */
.client-row .col-check input[type="checkbox"] { opacity: 0; }
.client-row:hover .col-check input[type="checkbox"],
.client-row .col-check input[type="checkbox"]:checked { opacity: 1; }
/* Selected row highlight */
.client-row.row-selected { background: var(--primary-dim) !important; box-shadow: inset 3px 0 0 var(--primary) !important; }

/* ── Bulk action bar ─────────────────────────────────────────── */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  margin: 0;
  background: var(--primary-dim);
  border: 1px solid rgba(37, 87, 214,0.35);
  border-radius: var(--radius);
  animation: bulkBarIn 0.18s cubic-bezier(0.22,1,0.36,1) both;
}
.bulk-bar.hidden { display: none; }
@keyframes bulkBarIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bulk-count {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--primary);
  white-space: nowrap;
}
.bulk-actions { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.bulk-btn {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  letter-spacing: 0.02em;
}
.bulk-btn:hover { background: var(--surface-hover); border-color: var(--primary); color: var(--primary); }
.bulk-btn--danger:hover { background: var(--danger-dim); border-color: var(--danger); color: var(--danger); }
.bulk-clear {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
  margin-left: auto;
  white-space: nowrap;
}
.bulk-clear:hover { color: var(--danger); }

/* ── Bulk action modal ───────────────────────────────────────── */
.bulk-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}
.bulk-modal-overlay.hidden { display: none; }
.bulk-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 420px;
  padding: 0;
  animation: modalIn 0.18s cubic-bezier(0.22,1,0.36,1) both;
}
.bulk-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
}
.bulk-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Tag delete warning modal */
.tag-delete-warning {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tag-delete-tag-preview {
  font-size: var(--fs-sm);
  color: var(--text);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.tag-delete-client-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--surface-2);
}
.tag-delete-client-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
}
.tag-delete-client-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tag-delete-client-name {
  flex: 1;
  font-weight: 500;
  color: var(--text);
}

.bulk-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
}
.bulk-form-group { display: flex; flex-direction: column; gap: 8px; }
.bulk-form-group label { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
/* Fields inside the generic bulk/confirm modals. ⚠️ These three classes were
   referenced by five fields across three modals (resend-receipt, edit-payment,
   bulk-SMS) while having NO rules at all — every one rendered as a raw
   browser-default input. Values mirror `.form-group input` exactly (the
   platform field recipe at its definition further down); change them together. */
.modal-input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 11px 13px;
  font-size: var(--fs-md);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.modal-input:focus { border-color: var(--primary); }
.modal-input::placeholder { color: var(--text-subtle); }
.modal-field { display: flex; flex-direction: column; gap: 8px; }
.modal-field-label { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.bulk-tag-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.bulk-tag-preset { padding: 4px 10px; border-radius: 20px; font-size: var(--fs-xs); font-weight: 500; cursor: pointer; border: 1px solid; transition: opacity 0.15s, box-shadow 0.15s; }
.bulk-tag-preset.selected { box-shadow: 0 0 0 2px var(--primary); }
.bulk-tag-remove-preset.selected { box-shadow: 0 0 0 2px var(--danger); opacity: 0.85; }
.bulk-tag-sections { display: flex; flex-direction: column; gap: 0; }
.bulk-tag-section { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.bulk-tag-section-label { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; }
.bulk-tag-divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; }

/* ── Bulk primary button ─────────────────────────────────────── */
.bulk-btn--primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.bulk-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }

/* ── Compose message modal ───────────────────────────────────── */
.compose-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}
.compose-overlay.hidden { display: none; }
.compose-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 480px;
  animation: modalIn 0.18s cubic-bezier(0.22,1,0.36,1) both;
}
.compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.compose-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.compose-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.compose-mode-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.compose-mode-btn {
  flex: 1;
  padding: 7px 14px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: none;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.compose-mode-btn.active {
  background: var(--primary);
  color: #fff;
}
.compose-mode-btn:not(.active):hover {
  background: var(--surface-hover);
  color: var(--text);
}
.compose-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.compose-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.compose-recipients {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 120px;
  overflow-y: auto;
}
.compose-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
.compose-input {
  width: 100%;
  padding: 8px 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.compose-input:focus { border-color: var(--primary); }
.compose-textarea {
  width: 100%;
  min-height: 120px;
  max-height: 240px;
  padding: 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.compose-textarea:focus { border-color: var(--primary); }
.compose-info {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}
.compose-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
}

/* Hover-reveal: hide action icons until the row is hovered */
.client-row .btn-edit,
.client-row .btn-delete,
.client-row .btn-action-icon    { opacity: 0; transition: opacity 0.15s, color 0.15s; }
.client-row:hover .btn-edit,
.client-row:hover .btn-delete,
.client-row:hover .btn-action-icon { opacity: 1; }

.btn-action-icon {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 4px; border-radius: var(--radius-sm); transition: color 0.15s, background 0.15s;
}
.btn-action-icon:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.btn-action-icon--danger:hover { color: var(--danger); background: rgba(239,68,68,0.1); }

.col-actions { display: flex; gap: 4px; }

.cell-link { color: var(--text-secondary); text-decoration: none; }
.cell-link:hover { color: var(--primary); text-decoration: underline; }

/* ── Quick Compose Modal ─────────────────────────────────────── */
.qc-modal { display: flex; flex-direction: column; gap: 10px; }
.qc-channel-row { display: flex; gap: 4px; }
.qc-channel-btn {
  padding: 5px 14px; font-size: var(--fs-xs); font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.qc-channel-btn:hover { border-color: var(--primary); color: var(--text); }
.qc-channel-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.qc-subject-row { }
.qc-meta { font-size: var(--fs-xs); color: var(--text-subtle); }

/* ── Client Hover Card ───────────────────────────────────────── */
.client-hover-card {
  position: fixed; z-index: 9999; width: 280px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5); padding: 14px 16px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  pointer-events: none;
}
.client-hover-card.visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.chc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.chc-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-xs); font-weight: 600; color: #fff; flex-shrink: 0;
}
.chc-info { flex: 1; min-width: 0; }
.chc-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chc-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06);
}
.chc-stat { text-align: center; }
.chc-stat-val { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.chc-stat-lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.chc-meta { display: flex; gap: 8px; margin-top: 10px; font-size: var(--fs-xs); color: var(--text-muted); }

/* ── Saved Views (Smart Lists) ────────────────────────────────── */
.saved-views-wrap { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.saved-views-select { min-width: 130px; }
.btn-save-view {
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 5px 10px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.btn-save-view:hover { border-color: var(--primary); color: var(--primary); }

/* ── Name column avatar ──────────────────────────────────────── */
.cl-name-wrap { display: flex; align-items: center; gap: 0; }
.cl-dot-slot { width: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cl-avatar {
  position: relative;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #fff; flex-shrink: 0;
  margin: 0 8px;
}
.cl-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cl-nophoto {
  position: absolute; right: -3px; bottom: -3px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.cl-nophoto svg { width: 9px; height: 9px; }

/* ── Summary strip ───────────────────────────────────────────── */
.cl-summary-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 24px; font-size: var(--fs-xs); color: var(--text-subtle);
}
.cl-strip-dot { opacity: 0.4; }
.cl-strip-active { color: var(--success); font-weight: 500; }

/* ── Column Resize ───────────────────────────────────────────── */
.clients-table th { position: relative; border-right: 1px solid rgba(255,255,255,0.12); }
.clients-table th:last-child { border-right: none; }
.clients-table th::after {
  content: ''; position: absolute; right: -3px; top: 0; bottom: 0;
  width: 6px; cursor: col-resize; z-index: 2;
}

.btn-save-loading {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ============================================================
   TABLE
   ============================================================ */
.table-wrapper {
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.table-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
}

.clients-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.clients-table thead tr {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.clients-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-subtle);
  white-space: nowrap;
}

.clients-table td {
  padding: 11px 14px;
  white-space: nowrap;
  vertical-align: middle;
}

.clients-table tbody tr                              { background: transparent; }
.clients-table tbody tr:nth-child(even)              { background: rgba(255,255,255,0.02); }
[data-theme="light"] .clients-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.02); }
.clients-table tbody tr.client-row                   { cursor: pointer; }
.clients-table tbody tr:hover,
.clients-table tbody tr:nth-child(even):hover,
[data-theme="light"] .clients-table tbody tr:nth-child(even):hover { background: rgba(255,255,255,0.04); box-shadow: inset 3px 0 0 var(--primary); }
.clients-table tbody tr.row-cancelled                { opacity: 0.55; }

/* ── Clients summary strip ───────────────────────────────────── */
.clients-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 0 2px 16px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  min-height: 34px;
}
.cs-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
.cs-pill-val {
  font-weight: 500;
  color: var(--text);
}
.cs-pill-val--ok     { color: var(--success); }
.cs-pill-val--warn   { color: var(--warning); }
.cs-pill-val--muted  { color: var(--text-muted); }
.cs-divider {
  color: var(--border);
  font-size: var(--fs-lg);
  line-height: 1;
  user-select: none;
}

/* ============================================================
   CHECK-INS VIEW & FORM BUILDER
   ============================================================ */

/* Sticky top bar: Check-Ins title + tab buttons */
.checkins-sticky-top {
  position: sticky;
  top: 0;
  z-index: 32;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  /* Bleed to cover the .view side and top padding */
  margin: -28px -32px 0;
  padding: 28px 32px 0;
}
.checkins-sticky-top .view-header {
  margin-bottom: 16px;
}

.checkins-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
/* Remove double border when tabs are inside sticky top */
.checkins-sticky-top .checkins-tabs {
  margin-bottom: 0;
}
.checkins-tab-btn {
  padding: 10px 20px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.checkins-tab-btn:hover { color: var(--text); }
.checkins-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.checkins-tab-panel { display: none; }
.checkins-tab-panel.active { display: block; }

.checkins-forms-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* ── Builder card/list view toggle (Workouts/Check-ins/Agreements/Nutrition/Onboarding) ─── */
.builder-view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.builder-view-toggle .bvt-btn {
  padding: 5px 9px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  line-height: 0;
}
.builder-view-toggle .bvt-btn + .bvt-btn {
  border-left: 1px solid var(--border);
}
.builder-view-toggle .bvt-btn:hover {
  color: var(--text);
  background: rgba(100,116,139,0.08);
}
.builder-view-toggle .bvt-btn.active {
  background: var(--primary);
  color: #fff;
}
.builder-view-toggle .bvt-btn.active:hover {
  background: var(--primary);
  color: #fff;
  opacity: 0.92;
}

/* ── Shared list-view table for Builder tabs (Workouts/Check-ins/Onboarding) ─── */
.builder-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.builder-list-table thead th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 14px;
  background: var(--surface-alt, rgba(100,116,139,0.05));
  border-bottom: 1px solid var(--border);
}
.builder-list-table tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}
.builder-list-table tbody tr:hover {
  background: rgba(100,116,139,0.05);
}
.builder-list-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.builder-list-table tbody tr:last-child td { border-bottom: none; }
.builder-list-table .blt-name { font-weight: 500; }
.builder-list-table .blt-meta { color: var(--text-muted); font-size: 0.78rem; }
.builder-list-table .blt-actions {
  text-align: right;
  white-space: nowrap;
}
.builder-list-table .blt-actions button {
  margin-left: 4px;
  padding: 4px 10px;
  font-size: 0.75rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}
.builder-list-table .blt-actions button:hover {
  color: var(--text);
  border-color: var(--text-muted);
}
/* While a superset leader is being dragged, its members collapse so the run
   visibly travels as one object (S67); onEnd's re-render restores them. */
.pe2-row.pe2-ss-drag-collapsed { display: none; }

/* List view sections — each group (TEMPLATES / PROGRAMS) is its own card,
   mirroring the card view's structure. Shared colgroup + fixed layout keep
   both cards' columns on the same x positions. */
.blt-section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 8px;
}
.blt-section-card .builder-list-table {
  width: 100%; table-layout: fixed;
  /* The card owns the chrome — strip the table's own border/radius. */
  border: none; border-radius: 0;
}

/* Template-vs-program explainer (S67) — hover ⓘ beside the Builder section
   labels, both views. Styled tooltip, not the native title bubble. */
.wb-info {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 9px; font-weight: 700; line-height: 1;
  margin-left: 6px; cursor: help;
  text-transform: none; letter-spacing: 0;
}
.wb-info::after {
  content: attr(data-tip);
  position: absolute; left: -4px; top: calc(100% + 8px); z-index: 60;
  width: 320px; padding: 10px 12px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-size: 0.78rem; font-weight: 400; line-height: 1.55;
  letter-spacing: 0; text-transform: none; white-space: normal;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  opacity: 0; pointer-events: none; transition: opacity 120ms ease;
}
.wb-info:hover::after { opacity: 1; }

.builder-list-table .blt-actions button.blt-btn-delete:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* ── Assigned-clients count + manage modal ─────────────────── */
.blt-count {
  background: var(--primary-dim);
  color: var(--primary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 2px 11px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.blt-count:hover { background: var(--primary); color: #fff; }
.form-card-clients {
  cursor: pointer;
  color: var(--primary);
  font-weight: 600;
}
.form-card-clients:hover { text-decoration: underline; }

.fa-empty { padding: 36px 24px; text-align: center; color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; }
.fa-empty-sub { font-size: 0.78rem; opacity: 0.8; }
.fa-selrow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.fa-chk { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.fa-muted { color: var(--text-muted); font-size: 0.8rem; }
.fa-list { padding: 4px 0; }
.fa-row { display: flex; align-items: center; gap: 11px; padding: 9px 16px; border-bottom: 1px solid var(--border-light); }
.fa-row:hover { background: var(--surface-hover); }
.fa-row:last-child { border-bottom: none; }
.fa-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-2); color: var(--text-muted);
  font-size: 0.68rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.fa-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.fa-name { flex: 1; font-size: 0.9rem; color: var(--text); }
.fa-ract { display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.12s; flex-shrink: 0; }
.fa-row:hover .fa-ract, .fa-row:focus-within .fa-ract { opacity: 1; }
.fa-iconb {
  width: 30px; height: 30px; border-radius: var(--radius-sm); border: none;
  background: transparent; color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.fa-iconb svg { width: 15px; height: 15px; }
.fa-iconb:hover { background: rgba(127, 127, 127, 0.14); color: var(--text); }
.fa-iconb.fa-dg:hover { color: var(--danger); }
.fa-floatbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 10px 16px 14px; padding: 8px 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
}
.fa-floatbar[hidden] { display: none; }
.fa-floatbtns { display: flex; gap: 8px; }
.fa-count { color: var(--text); font-size: 0.8rem; font-weight: 600; }
.fa-btnp {
  background: var(--primary); border: none; color: #fff; font-weight: 500;
  font-size: 0.78rem; border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer;
}
.fa-btnp:hover { background: var(--primary-hover); }
.fa-btnr {
  background: transparent; border: 1px solid var(--border); color: var(--danger);
  font-size: 0.78rem; border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer;
}
.fa-btnr:hover { border-color: var(--danger); }
.fa-menu {
  position: fixed; min-width: 180px; max-height: 280px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32); padding: 4px; z-index: 200;
}
.fa-menu-item {
  display: block; width: 100%; text-align: left; background: transparent; border: none;
  color: var(--text); font-size: 0.85rem; padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.fa-menu-item:hover { background: var(--surface-hover); }
.fa-menu-remove { color: var(--danger); border-top: 1px solid var(--border); margin-top: 4px; }
.fa-menu-empty { padding: 8px 10px; color: var(--text-muted); font-size: 0.8rem; }

/* ── Forms list ────────────────────────────────────────────── */
.checkins-forms-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
/* When the list renders in list-mode (table inside), let the table take the full width */
.checkins-forms-list:has(.builder-list-table),
.builder-program-list:has(.builder-list-table) {
  display: block;
}
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.form-card-name {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}
.form-card-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: flex;
  gap: 12px;
}
.form-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.form-card-actions button {
  font-size: var(--fs-xs);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
}
.form-card-actions button:hover { color: var(--text); border-color: var(--text-muted); }
.form-card-actions .btn-delete:hover { color: var(--error); border-color: var(--error); }

/* ── Form builder overlay ──────────────────────────────────── */
.form-builder {
  background: var(--surface);
  width: calc(100vw - 48px);
  min-width: 960px;
  margin: 12px auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 24px);
  min-height: calc(100vh - 32px);
}
.form-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-light, var(--border));
  gap: 12px;
  flex-shrink: 0;
  background: var(--surface-2);
}
.fb-form-name-input {
  font-size: var(--fs-xl);
  font-weight: 500;
  background: none;
  border: none;
  color: var(--text);
  outline: none;
  flex: 1;
  min-width: 0;
}
.fb-form-name-input::placeholder { color: var(--text-subtle); }
.form-builder-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}
.fb-mode-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fb-mode-select {
  font-size: var(--fs-xs);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}
.fb-mode-select option { background: var(--surface-2); }
.fb-icon-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fb-icon-btn:hover { color: var(--text); border-color: var(--text-subtle); }
.fb-auto-advance-wrap { font-size: var(--fs-xs); white-space: nowrap; }
.fb-auto-advance-wrap.hidden { display: none; }
.fb-mode-hint {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  white-space: nowrap;
}

/* ── Two-panel layout: palette + canvas ───────────────────── */
.form-builder-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Left palette ─────────────────────────────────────────── */
.fb-palette {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 16px 14px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
}
.fb-palette-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.fb-palette-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fb-palette-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 8px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: grab;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  user-select: none;
  position: relative;
  min-height: 72px;
}
.fb-palette-item:hover {
  border-color: var(--primary);
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}
.fb-palette-item:active { cursor: grabbing; }
.fb-palette-item.fb-palette-dragging {
  opacity: 0.4;
  border-color: var(--primary);
}
.fb-palette-icon {
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--primary);
}
.fb-palette-svg {
  width: 28px;
  height: 28px;
  color: var(--text);
  opacity: 0.7;
  transition: opacity 0.15s;
}
.fb-palette-item:hover .fb-palette-svg {
  opacity: 1;
  color: var(--primary);
}
/* Palette tooltip — global element positioned via JS to avoid overflow clipping */
/* ═══════════════════════════════════════════════════════════
   AGREEMENT BUILDER
   ═══════════════════════════════════════════════════════════ */
.ag-builder {
  background: var(--surface);
  width: calc(100vw - 48px);
  min-width: 960px;
  margin: 12px auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 24px);
  min-height: calc(100vh - 32px);
}
.ag-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
  gap: 12px;
}
.ag-name-input {
  font-size: var(--fs-xl);
  font-weight: 500;
  background: none;
  border: none;
  color: var(--text);
  outline: none;
  flex: 1;
  min-width: 0;
}
.ag-name-input::placeholder { color: var(--text-subtle); }
.ag-builder-header-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Layout: sidebar + canvas */
.ag-builder-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* Sidebar */
.ag-sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 16px 14px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
}
.ag-sidebar-section { margin-bottom: 16px; }
.ag-sidebar-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.ag-element-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ag-element-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  font-family: inherit;
}
.ag-element-btn:hover {
  border-color: var(--primary);
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.ag-element-btn svg { color: var(--text); opacity: 0.7; }
.ag-element-btn:hover svg { opacity: 1; color: var(--primary); }
.ag-element-btn[draggable="true"] { cursor: grab; }
.ag-element-btn[draggable="true"]:active { cursor: grabbing; }
.ag-drop-target {
  outline: 2px dashed color-mix(in srgb, var(--primary) 40%, transparent);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--primary) 3%, #fff) !important;
}

/* Merge field button */
.ag-merge-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.ag-merge-btn:hover { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }

/* Merge field picker popup */
.ag-merge-picker {
  position: absolute;
  top: 40px;
  left: 0;
  width: 280px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 100;
  padding: 8px;
}
.ag-merge-picker-title { font-size: var(--fs-xs); font-weight: 500; color: var(--text); padding: 8px 8px 4px; }
.ag-merge-cat { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; color: var(--text-subtle); padding: 10px 8px 4px; }
.ag-merge-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.ag-merge-item:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.ag-merge-key { font-size: var(--fs-xs); color: var(--text-subtle); font-family: monospace; }

/* Canvas */
.ag-canvas {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 24px 60vh 24px;
}

/* Floating toolbar */
.ag-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  flex-wrap: wrap;
}
.ag-tb-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: 4px;
  font-family: inherit;
  transition: background 0.1s, color 0.1s;
}
.ag-tb-btn:hover { background: var(--surface-2); color: var(--text); }
.ag-tb-sep { width: 1px; background: var(--border); margin: 0 4px; }
.ag-tb-select { font-size: var(--fs-xs); font-weight: 500; padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); cursor: pointer; outline: none; margin-right: 4px; }
.ag-tb-select:focus { border-color: var(--accent); }
.ag-tb-font-select { min-width: 120px; }
.ag-tb-size-select { width: 76px; }
.ag-tb-lh-select { width: 60px; }

/* Document page */
.ag-document {
  width: 100%;
  max-width: 860px;
  min-height: 1056px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 48px 56px;
  position: relative;
  font-size: var(--fs-base);
  line-height: 1.7;
}
[data-theme="dark"] .ag-document { background: #1c1f2e; }

/* TipTap editor content */
.ag-prosemirror {
  outline: none;
  min-height: 400px;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.7;
}
.ag-prosemirror h1 {
  font-size: var(--fs-3xl);
  font-weight: 500;
  margin: 20px 0 12px;
  line-height: 1.3;
}
.ag-prosemirror h2 {
  font-size: var(--fs-xl);
  font-weight: 500;
  margin: 18px 0 10px;
  line-height: 1.3;
}
.ag-prosemirror h3 {
  font-size: var(--fs-md);
  font-weight: 500;
  margin: 14px 0 8px;
}
.ag-prosemirror p { margin: 0 0 10px; }
.ag-prosemirror ul, .ag-prosemirror ol { padding-left: 24px; margin: 0 0 10px; }
.ag-prosemirror li { margin: 4px 0; }
.ag-prosemirror hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.ag-prosemirror a { color: var(--primary); text-decoration: underline; }
.ag-prosemirror img { max-width: 100%; border-radius: 4px; }
.ag-prosemirror .is-editor-empty::before {
  content: attr(data-placeholder);
  color: var(--text-subtle);
  pointer-events: none;
  float: left;
  height: 0;
}

/* ── Block list + blocks ──────────────────────────────────── */
.ag-blocks-list { min-height: 200px; }
.ag-empty-hint { color: var(--text-subtle); text-align: center; padding: 60px 20px; font-size: var(--fs-sm); }
.ag-block {
  position: relative;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: border-color 0.12s, box-shadow 0.12s;
  cursor: default;
}
.ag-block:hover { border-color: color-mix(in srgb, var(--primary) 25%, transparent); }
.ag-block-selected {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 15%, transparent);
}

/* Block handle (6-dot grid on left) */
.ag-block-handle {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  cursor: grab;
  color: var(--text-subtle);
  opacity: 0;
  transition: opacity 0.15s;
  padding: 4px;
}
.ag-block-handle:active { cursor: grabbing; }
.ag-block:hover .ag-block-handle,
.ag-block-selected .ag-block-handle { opacity: 1; }

/* Block action buttons (top-right) */
.ag-block-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 5;
}
.ag-block:hover .ag-block-actions,
.ag-block-selected .ag-block-actions { opacity: 1; }
.ag-block-actions button {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 4px; color: var(--text-muted); cursor: pointer; padding: 0;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.ag-block-actions button:hover { color: var(--primary); border-color: var(--primary); background: var(--surface); }
.ag-block-actions button:last-child:hover { color: var(--error); border-color: var(--error); }

/* Block content area */
.ag-block-content { min-height: 20px; }

/* TipTap editor inside blocks */
.ag-block-editor {
  outline: none;
  min-height: 24px;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.7;
}
.ag-block-editor h1 { font-size: var(--fs-3xl); font-weight: 500; margin: 0; }
.ag-block-editor h2 { font-size: var(--fs-xl); font-weight: 500; margin: 0; }
.ag-block-editor h3 { font-size: var(--fs-md); font-weight: 500; margin: 0; }
.ag-block-editor p { margin: 0 0 10px; }
.ag-block-editor ul, .ag-block-editor ol { padding-left: 24px; margin: 0 0 10px; }
.ag-block-editor a { color: var(--primary); }
.ag-block-editor .is-editor-empty::before {
  content: attr(data-placeholder);
  color: var(--text-subtle);
  pointer-events: none;
  float: left;
  height: 0;
}

/* ── Field preview elements ──────────────────────────────── */
.ag-field-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.ag-fp-signature { border-color: color-mix(in srgb, var(--primary) 40%, transparent); color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.ag-fp-initials { border-color: color-mix(in srgb, var(--error) 40%, transparent); color: var(--error); background: color-mix(in srgb, var(--error) 6%, transparent); }
.ag-fp-textfield { border-color: color-mix(in srgb, var(--warning) 40%, transparent); color: var(--text); background: color-mix(in srgb, var(--warning) 6%, transparent); }
.ag-fp-date { border-color: color-mix(in srgb, var(--success) 40%, transparent); color: var(--success); background: color-mix(in srgb, var(--success) 6%, transparent); }
.ag-fp-checkbox { border-color: color-mix(in srgb, var(--text-muted) 30%, transparent); color: var(--text); background: color-mix(in srgb, var(--text-muted) 4%, transparent); }
.ag-fp-req { color: var(--error); font-size: var(--fs-lg); margin-left: auto; }
.ag-fp-ini-box {
  width: 28px; height: 28px; border: 2px solid var(--error);
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 500; color: var(--error);
}
.ag-fp-input-mock {
  flex: 1; padding: 6px 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 4px;
  font-size: var(--fs-xs); color: var(--text-subtle); font-weight: 400;
}
.ag-fp-check-box {
  width: 18px; height: 18px; border: 2px solid var(--border);
  border-radius: 3px; flex-shrink: 0;
}
.ag-divider-line { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
.ag-page-break {
  text-align: center; padding: 8px; color: var(--text-subtle);
  font-size: var(--fs-xs); border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
}
.ag-image-preview { max-width: 100%; border-radius: 4px; }
.ag-image-placeholder {
  padding: 24px; text-align: center; color: var(--text-subtle); font-size: var(--fs-xs);
  border: 1px solid var(--border); border-radius: 4px; background: color-mix(in srgb, var(--surface-2) 50%, transparent);
}

/* ── SortableJS states for agreement blocks ──────────────── */
.ag-sort-ghost {
  opacity: 1 !important;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface)) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)) !important;
  border-radius: 2px;
}
.ag-sort-ghost * { visibility: hidden !important; }
.ag-sort-chosen { cursor: grabbing !important; }
.ag-sort-fallback {
  opacity: 0.92 !important;
  border: 1px solid var(--primary) !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
  background: var(--surface) !important;
  z-index: 100000 !important;
}

/* ── SortableJS states for workout-builder exercise rows ────
   Mirrors the agreement-builder pattern (ghost = drop-target preview,
   chosen = original-while-dragging, fallback = floating clone). */
.pe-row-sort-ghost {
  opacity: 1 !important;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface)) !important;
  border: 1px dashed color-mix(in srgb, var(--primary) 35%, var(--border)) !important;
  border-radius: 6px;
}
.pe-row-sort-ghost * { visibility: hidden !important; }
.pe-row-sort-chosen { cursor: grabbing !important; }
.pe-row-sort-fallback {
  opacity: 0.95 !important;
  border: 1px solid var(--primary) !important;
  border-radius: 6px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
  background: var(--surface) !important;
  z-index: 100000 !important;
}
/* The Focus-table fallback clone is a <tr>: without an explicit table display
   its cells stack and the clone collapses mid-drag. Keep row layout, and give
   the cells the surface so the clone reads as the row it is. */
tr.pe2-row.pe-row-sort-fallback { display: table-row !important; }
tr.pe2-row.pe-row-sort-fallback td { background: var(--surface) !important; }

/* ── Floating fillable fields (Moveable.js overlay layer) ─ */
.ag-floating-field {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 2px solid;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: move;
  z-index: 20;
  user-select: none;
  box-sizing: border-box;
  overflow: visible;
  white-space: nowrap;
  transition: box-shadow 0.12s;
}
.ag-floating-field:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.ag-ff-selected {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent), 0 2px 8px rgba(0,0,0,0.12) !important;
}
/* Type colors */
.ag-ff-signature { border-color: color-mix(in srgb, var(--primary) 50%, transparent); color: var(--primary); background: color-mix(in srgb, var(--primary) 5%, transparent); }
.ag-ff-initials { border-color: color-mix(in srgb, var(--error) 50%, transparent); color: var(--error); background: color-mix(in srgb, var(--error) 5%, transparent); }
.ag-ff-text_field { border-color: color-mix(in srgb, #f59e0b 50%, transparent); color: #92400e; background: color-mix(in srgb, #f59e0b 5%, transparent); }
.ag-ff-date_field { border-color: color-mix(in srgb, var(--success) 50%, transparent); color: var(--success); background: color-mix(in srgb, var(--success) 5%, transparent); }
.ag-ff-checkbox { border-color: color-mix(in srgb, var(--text-muted) 40%, transparent); color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 5%, transparent); }
.ag-ff-icon { display: flex; align-items: center; flex-shrink: 0; }
.ag-ff-label { font-size: var(--fs-xs); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.ag-ff-req { color: var(--error); font-size: var(--fs-base); margin-left: auto; line-height: 1; }

/* Signature/initials preview for alignment */
.ag-ff-preview-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; overflow: hidden; }
.ag-ff-sig-preview { width: 85%; height: auto; opacity: 0.25; }
.ag-ff-ini-preview { font-family: 'Dancing Script', 'Brush Script MT', cursive; font-size: var(--fs-4xl); font-weight: 500; opacity: 0.25; line-height: 1; text-align: center; width: 100%; }
.ag-ff-ini-preview-svg { width: 100%; height: 100%; opacity: 0.25; }
.ag-ff-date-preview { font-size: var(--fs-sm); font-weight: 500; opacity: 0.3; }
.ag-ff-check-preview { width: 18px; height: 18px; opacity: 0.3; }
.ag-ff-text-preview { font-size: var(--fs-xs); font-style: italic; opacity: 0.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%; }
.ag-ff-preview-label { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.5; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* Duplicate button on signature/initials fields */
.ag-ff-dup-btn { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s; z-index: 5; padding: 0; }
.ag-floating-field:hover .ag-ff-dup-btn, .ag-ff-selected .ag-ff-dup-btn { opacity: 1; }
.ag-ff-dup-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Moveable.js overrides */
.moveable-control-box .moveable-line { background: var(--primary) !important; }
.moveable-control-box .moveable-control { background: var(--primary) !important; border-color: #fff !important; }
.moveable-control-box .moveable-direction { width: 10px !important; height: 10px !important; border-radius: 2px !important; }
/* Dark theme adjustments */
[data-theme="dark"] .ag-ff-signature { background: color-mix(in srgb, var(--primary) 8%, transparent); }
[data-theme="dark"] .ag-ff-initials { background: color-mix(in srgb, var(--error) 8%, transparent); }
[data-theme="dark"] .ag-ff-text_field { background: color-mix(in srgb, #f59e0b 8%, transparent); }
[data-theme="dark"] .ag-ff-date_field { background: color-mix(in srgb, var(--success) 8%, transparent); }
[data-theme="dark"] .ag-ff-checkbox { background: color-mix(in srgb, var(--text-muted) 8%, transparent); }

/* ── Properties panel ────────────────────────────────────── */
.ag-properties {
  width: 300px; flex-shrink: 0; border-left: 1px solid var(--border);
  overflow-y: auto; background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
  display: flex; flex-direction: column;
}
.ag-props-empty {
  display: flex; align-items: center; justify-content: center; flex: 1;
  padding: 40px 20px; text-align: center; color: var(--text-subtle); font-size: var(--fs-sm);
}
.ag-props-content { display: flex; flex-direction: column; flex: 1; }
.ag-props-content.hidden { display: none; }
.ag-props-header {
  padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ag-props-title {
  font-size: var(--fs-sm); font-weight: 500; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.ag-props-body { flex: 1; overflow-y: auto; padding: 16px; }

/* Color input in toolbar */
.ag-tb-color {
  width: 28px; height: 28px; border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; padding: 0; background: none;
}

/* Fillable field badges (inline in editor) */
.ag-field-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: default;
  vertical-align: middle;
  line-height: 1;
  position: relative;
}
.ag-field-signature {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  border: 1px dashed var(--primary);
}
.ag-field-initials {
  background: color-mix(in srgb, var(--error) 10%, transparent);
  color: var(--error);
  border: 1px dashed var(--error);
}
.ag-field-date {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
  border: 1px dashed var(--success);
}
.ag-field-text_field {
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  color: var(--warning);
  border: 1px dashed var(--warning);
}
.ag-field-checkbox {
  background: color-mix(in srgb, var(--text-muted) 10%, transparent);
  color: var(--text-muted);
  border: 1px dashed var(--text-muted);
}
.ag-field-badge[data-required="true"]::after {
  content: '*';
  color: var(--error);
  font-size: var(--fs-base);
  position: absolute;
  top: -4px;
  right: -6px;
}

/* Templates list table */
.ag-templates-table { width: 100%; border-collapse: collapse; }
.ag-templates-table th {
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.ag-template-row {
  cursor: pointer;
  transition: background 0.1s;
}
.ag-template-row:hover { background: var(--surface); }
.ag-template-row td { padding: 14px; border-bottom: 1px solid var(--border); }
.ag-template-name { font-size: var(--fs-base); font-weight: 500; color: var(--text); }
.ag-template-date { font-size: var(--fs-xs); color: var(--text-muted); }
.ag-template-actions { text-align: right; }
.ag-action-btn {
  font-size: var(--fs-xs);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  margin-left: 4px;
}
.ag-action-btn:hover { color: var(--text); border-color: var(--text-muted); }
.ag-action-test { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.ag-action-test:hover { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface-2)); }
.ag-action-delete:hover { color: var(--error); border-color: var(--error); }

/* ── Agreement void-before-delete modal ──────────────────────── */
.ag-void-dialog {
  width: min(640px, 92vw);
  max-height: 86vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ag-void-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.ag-void-header h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}
.ag-void-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: var(--radius-sm);
}
.ag-void-close:hover { color: var(--text); background: rgba(100,116,139,0.08); }
.ag-void-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ag-void-intro {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}
.ag-void-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.ag-void-selectall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.ag-void-count {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.ag-void-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ag-void-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}
.ag-void-item:last-child { border-bottom: none; }
.ag-void-item input[type="checkbox"] {
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}
.ag-void-item-main {
  flex: 1;
  min-width: 0;
}
.ag-void-item-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
.ag-void-item-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.ag-void-status-pill {
  display: inline-block;
  padding: 1px 7px;
  font-size: 0.65rem;
  border-radius: 999px;
  background: rgba(100,116,139,0.15);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.ag-void-status-pill.sent   { background: rgba(59,130,246,0.15); color: #3b82f6; }
.ag-void-status-pill.viewed { background: rgba(245,158,11,0.15); color: #f59e0b; }
.ag-void-item-single {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.ag-void-item-single:hover {
  color: var(--error);
  border-color: var(--error);
}
.ag-void-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* ── Program editor — Shared-template banner ─────────────────── */
.pe-shared-banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.5;
}
.pe-shared-toggle .pe-template-label { color: #a78bfa; font-weight: 500; }

/* ── Program Details modal (tags, description, sessions/week, etc.) ──── */
.pe-details-modal { width: min(720px, 92vw); }
/* Overview editor sizing — enough vertical room for a real paragraph or
   two without making the modal feel oversized when the field is empty. */
.pe-overview-editor {
  min-height: 220px;
  max-height: 380px;
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pe-overview-editor:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-dim, rgba(37, 87, 214,0.15));
}
.pe-overview-editor .ee-editor-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pe-overview-editor .ee-content { flex: 1; min-height: 0; overflow-y: auto; }
/* Details modal is declared in the DOM BEFORE the program editor overlay,
   so a tied z-index (both inherit `.modal-overlay { z-index: 100 }`) puts
   the details overlay BEHIND the editor when both are open. Bump it above
   so clicking Details from within the editor actually surfaces the modal.
   Same gotcha applies to any other sub-modal authored before the editor's
   markup — keep this in mind if more get added. */
#pe-details-overlay { z-index: 110; }
.pe-details-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.pe-details-body .form-group { margin: 0; }
.pe-details-body .form-group label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; display: block; }
.pe-details-body input[type="text"],
.pe-details-body input[type="number"],
.pe-details-body textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 9px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}
.pe-details-body textarea { resize: vertical; min-height: 60px; }
.pe-details-body input:focus,
.pe-details-body textarea:focus { border-color: var(--primary); }

/* ── Save & Share modal ───────────────────────────────────────── */
.ss-modal { width: min(640px, 92vw); max-height: 90vh; display: flex; flex-direction: column; }
.ss-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.ss-intro { font-size: 0.9rem; color: var(--text); margin: 0 0 16px; }

.ss-mode-picker { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.ss-mode {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--surface);
  transition: border-color 0.12s, background 0.12s;
}
.ss-mode:hover { border-color: var(--text-muted); }
.ss-mode input[type="radio"] { flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.ss-mode:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.ss-mode-title { font-size: 0.9rem; font-weight: 500; color: var(--text); }
.ss-mode-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }

.ss-mode-panel {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ss-mode-panel.hidden { display: none; }

.ss-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}
.ss-checkbox input { flex-shrink: 0; margin-top: 2px; cursor: pointer; }

.ss-client-picker {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  overflow: hidden;
}
.ss-client-picker .pe-coach-search {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 9px 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
  box-sizing: border-box;
}
.ss-client-picker-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.75rem;
}
.ss-client-list { max-height: 260px; overflow-y: auto; }
.ss-client-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.85rem;
}
.ss-client-row:last-child { border-bottom: none; }
.ss-client-row:hover { background: rgba(100,116,139,0.06); }
.ss-client-row input { flex-shrink: 0; cursor: pointer; margin: 0; }
.ss-client-row-main { flex: 1; min-width: 0; }
.ss-client-row-name { font-weight: 500; color: var(--text); }
.ss-client-row-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.ss-client-footer {
  padding: 8px 12px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.ss-client-empty { padding: 22px; text-align: center; color: var(--text-muted); font-size: 0.82rem; }

.ss-convert-note {
  padding: 14px 16px;
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.55;
}

.ss-status { font-size: 0.8rem; color: var(--text-muted); margin-top: 10px; min-height: 18px; }
.ss-status.ss-status--error { color: var(--danger); }
.ss-status.ss-status--success { color: #22c55e; }

/* ── Program list — Shared + tag chips ───────────────────────── */
.program-shared-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  background: rgba(124,58,237,0.15);
  color: #a78bfa;
  margin-left: 6px;
}
.program-clients-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  background: rgba(100,116,139,0.14);
  color: var(--text-muted);
  margin-left: 6px;
}
.program-tag-chip {
  display: inline-block;
  padding: 1px 7px;
  margin: 2px 4px 0 0;
  font-size: 0.68rem;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
/* Equipment chips read as a different dimension from tags — slightly
   warmer color hint so the eye separates "what categorizes this program"
   (tags) from "what gear is required" (equipment). */
.program-equipment-chip {
  display: inline-block;
  padding: 1px 7px;
  margin: 2px 4px 0 0;
  font-size: 0.68rem;
  border-radius: 4px;
  background: var(--info-dim, rgba(59,130,246,0.12));
  color: var(--info, #3b82f6);
  border: 1px solid transparent;
}

/* ── Agreement templates — card view ─────────────────────────── */
.ag-templates-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.ag-template-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 16px 12px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ag-template-card:hover {
  border-color: var(--text-muted);
  transform: translateY(-1px);
}
.ag-template-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}
.ag-template-card-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.ag-template-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}
.ag-template-card-actions .ag-action-btn { margin-left: 0; }

/* ── Nutrition plans — card view ─────────────────────────────── */
.nut-plans-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.nut-plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nut-plan-card:hover {
  border-color: var(--text-muted);
  transform: translateY(-1px);
}
.nut-plan-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.nut-plan-card-head .nut-plan-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}
.nut-plan-card .nut-plan-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.nut-plan-card-macros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nut-plan-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: auto;
}
.nut-plan-card-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ── Custom confirm dialog ─────────────────────────────────── */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  animation: confirmFadeIn 0.15s ease;
}
.confirm-overlay.hidden { display: none; }
@keyframes confirmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.confirm-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  animation: confirmSlideIn 0.15s ease;
}
@keyframes confirmSlideIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.confirm-body {
  padding: 24px 24px 16px;
}
/* showPrompt's text box. `[hidden]` is not enough on its own here — the
   dialog's own rules would otherwise give it a display, which is the trap
   that has bitten this stylesheet before. */
.confirm-input[hidden] {
  display: none;
}
.confirm-input {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 9px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
}
.confirm-input:focus {
  outline: none;
  border-color: var(--primary, #2557d6);
}
/* A name is required, so the button says so rather than failing on click. */
.confirm-ok:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.confirm-message {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
  /* ⚠️ `pre-line`, so a confirm can put its consequence on its own line. The
     message is set with `textContent`, so a two-paragraph warning collapsed
     into one run-on sentence — the line that says a delete cannot be undone is
     exactly the line that must not be buried. Runs of spaces still collapse,
     so single-line callers are unaffected. */
  white-space: pre-line;
}
.confirm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px 20px;
  gap: 12px;
}
.confirm-remember {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.confirm-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.confirm-cancel {
  padding: 8px 18px;
  font-size: var(--fs-sm);
  border-radius: 6px;
}
.confirm-ok {
  padding: 8px 18px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: 6px;
}
/* ⚠️ DOUBLED CLASS ON PURPOSE — `.confirm-ok--danger` alone LOST. It ties with
   `.btn-primary` on specificity, and a second `.btn-primary` rule 12,000 lines
   further down the file wins on source order, so every destructive confirm was
   painted the ordinary primary blue and looked exactly like a routine one.
   Measured on the page: the OK button computed rgb(37, 87, 214). */
.confirm-ok.confirm-ok--danger {
  background: var(--error);
  border-color: var(--error);
}
.confirm-ok.confirm-ok--danger:hover {
  background: color-mix(in srgb, var(--error) 85%, #000);
}

.fb-tooltip {
  position: fixed;
  background: #1a1d27;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #e4e6f0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 99999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.fb-tooltip.visible {
  opacity: 1;
}

/* ── Right canvas ─────────────────────────────────────────── */
.form-builder-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  min-height: 0;
  background: var(--surface);
}

/* ── Field cards in builder ────────────────────────────────── */
.fb-fields-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100px;
}
.fb-field-card {
  display: block;
  padding: 16px 18px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.fb-field-card:hover:not(.fb-field-selected) {
  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
}
/* ── Canvas field card layout ─────────────────────────────── */
.fb-card-preview {
  padding: 0;
}
.fb-card-actions-bar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.fb-field-card:hover .fb-card-actions-bar,
.fb-field-card.fb-field-selected .fb-card-actions-bar {
  opacity: 1;
}
.fb-card-action {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.fb-card-action svg { width: 14px; height: 14px; }
.fb-card-action:hover { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.fb-card-action--delete:hover { color: var(--error); border-color: var(--error); background: color-mix(in srgb, var(--error) 8%, var(--surface)); }

/* ── Canvas live preview elements ─────────────────────────── */
.fcp-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.fcp-help {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 6px;
  line-height: 1.4;
}
.fcp-help a { color: var(--primary); }
.fcp-help strong { color: var(--text); }
.fcp-input-mock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--text-subtle);
}
.fcp-number-mock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  width: 140px;
}
.fcp-textarea-mock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  min-height: 64px;
  resize: vertical;
  overflow: auto;
  cursor: text;
}
.fcp-select-mock {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fcp-chevron { color: var(--text-subtle); font-size: var(--fs-xs); }
.fcp-opts {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fcp-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.fcp-bubble .fcp-opt {
  border-radius: 12px;
  padding: 10px 16px;
  width: auto;
  display: inline-flex;
}
.fcp-bubble { display: flex; flex-direction: column; align-items: flex-start; }
.fcp-radio {
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0;
}
.fcp-check {
  width: 14px; height: 14px;
  border: 2px solid var(--border);
  border-radius: 3px;
  flex-shrink: 0;
}
.fcp-label-edit {
  background: none;
  border: none;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: inherit;
  outline: none;
  width: 100%;
  padding: 0;
  margin-bottom: 6px;
}
.fcp-label-edit::placeholder { color: var(--text-subtle); }
.fcp-label-edit:focus { border-bottom: 1px solid var(--primary); }
.fcp-section-edit {
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  font-family: inherit;
  outline: none;
  width: 100%;
  padding: 0 0 6px;
}
.fcp-section-edit::placeholder { color: var(--text-subtle); }
.fcp-section-edit:focus { border-bottom-color: var(--primary); }
.fcp-text-edit {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-family: inherit;
  outline: none;
  width: 100%;
  padding: 4px;
  min-height: 40px;
  resize: vertical;
  line-height: 1.5;
}
.fcp-text-edit::placeholder { color: var(--text-subtle); }
.fcp-text-edit:focus { border-color: var(--primary); border-radius: 4px; }
.fcp-opts-wrap { margin-top: 2px; }
.fcp-opt-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.fcp-opt-row .fcp-opt { flex: 1; min-width: 0; }
.fcp-opt-drag {
  cursor: grab;
  color: var(--text-subtle);
  font-size: var(--fs-base);
  user-select: none;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
  line-height: 1;
}
.fcp-opt-drag:active { cursor: grabbing; }
.fcp-opt-row:hover .fcp-opt-drag { opacity: 1; }
.fcp-opt-delete {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-subtle);
  cursor: pointer;
  padding: 5px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
  line-height: 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}
.fcp-opt-row:hover .fcp-opt-delete { opacity: 1; }
.fcp-opt-delete:hover { color: var(--error); border-color: var(--error); }
.fcp-opt-row.fcp-canvas-drag-over { outline: 1px dashed var(--primary); border-radius: 4px; }
.fcp-opt-row.fcp-canvas-dragging { opacity: 0.4; }
.fcp-add-opt {
  background: none;
  border: none;
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  margin-top: 4px;
  font-family: inherit;
}
.fcp-add-opt:hover { opacity: 0.8; }
.fcp-opt-edit {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-family: inherit;
  outline: none;
  flex: 1;
  min-width: 0;
  padding: 0;
}
.fcp-opt-edit:focus {
  color: var(--text);
}
.fcp-opt-edit::placeholder { color: var(--text-subtle); }
.fcp-empty-opts {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  font-style: italic;
  padding: 4px 0;
}
.fcp-more {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  padding: 2px 0;
}
.fcp-scale-wrap { display: inline-block; }
.fcp-scale {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.fcp-scale-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}
.fcp-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin-top: 3px;
}
.fcp-photo {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 80px;
  height: 50px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  justify-content: center;
  color: var(--text-subtle);
  font-size: var(--fs-xs);
}
.fcp-photo-icon { font-size: var(--fs-lg); }
.fcp-media-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  text-align: center;
}
.fcp-media-icon { color: var(--text-subtle); }
.fcp-media-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.fcp-media-hint { font-size: var(--fs-xs); color: var(--text-subtle); }
/* Calculation field preview */
.fcp-calc-zone {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--border));
  border-radius: 8px;
}
.fcp-calc-icon {
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--primary);
  flex-shrink: 0;
}
.fcp-calc-label { font-size: var(--fs-xs); color: var(--text-muted); flex: 1; }
.fcp-calc-value { font-size: var(--fs-lg); font-weight: 500; color: var(--text); }
.fcp-calc-hint { font-size: var(--fs-xs); color: var(--text-subtle); }

/* Signature field preview */
.fcp-sig-zone {
  padding: 20px 0 8px;
}
.fcp-sig-line {
  border-bottom: 2px solid var(--border);
  margin-bottom: 4px;
}
.fcp-sig-label {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

/* Field width grid — half-width fields sit side by side */
.fb-fields-list.fb-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fb-fields-list.fb-grid-layout .fb-field-card[data-width="full"] {
  grid-column: 1 / -1;
}
.fb-fields-list.fb-grid-layout .fb-field-card[data-width="half"] {
  grid-column: span 1;
}

.fcp-video-hint {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin-top: 4px;
}
.fcp-section {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.fcp-text {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
}
.fcp-text a { color: var(--primary); }
.fcp-text strong { color: var(--text); }

.fb-field-card.fb-field-display {
  border-style: dashed;
  opacity: 0.85;
}
/* ── SortableJS drag states (matches GHL pattern) ─────────── */
/* Ghost: the in-place placeholder shown where the item will land */
.fb-sort-ghost {
  opacity: 1 !important;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-2)) !important;
  border: 2px dashed color-mix(in srgb, var(--primary) 25%, var(--border)) !important;
  border-radius: 8px !important;
  min-height: 50px;
}
.fb-sort-ghost * { visibility: hidden !important; }
.fb-sort-ghost .fb-card-actions-bar { display: none !important; }

/* Chosen: the element being picked up (before drag starts) */
.fb-sort-chosen {
  cursor: grabbing !important;
}

/* Fallback: the floating clone that follows the cursor */
.fb-sort-fallback {
  opacity: 0.92 !important;
  border: 2px solid var(--primary) !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent) !important;
  background: var(--surface) !important;
  transform: rotate(1deg) scale(1.02);
  z-index: 100000 !important;
}
.fb-sort-fallback .fb-card-actions-bar { display: none !important; }
/* drag handle hidden — entire card is draggable */
.fb-field-type {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.fb-field-label {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fb-field-badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.fb-field-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.fb-badge-required { color: var(--error); background: color-mix(in srgb, var(--error) 12%, transparent); }
.fb-badge-metric   { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.fb-badge-cond     { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }
.fb-field-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.fb-field-actions button {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  font-size: var(--fs-base);
  line-height: 1;
  border-radius: 4px;
}
.fb-field-actions button:hover { color: var(--text); background: var(--surface-2); }
.fb-field-actions .fb-btn-delete:hover { color: var(--error); }

/* ── Selected field card ──────────────────────────────────── */
.fb-field-card {
  cursor: grab;
  position: relative;
}
.fb-field-card:active { cursor: grabbing; }
.fb-field-card.fb-field-selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
  background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}

/* ── Right properties panel ──────────────────────────────── */
.fb-properties {
  width: 340px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
  display: flex;
  flex-direction: column;
}
.fb-props-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 40px 20px;
  text-align: center;
  color: var(--text-subtle);
}
.fb-props-empty-icon {
  font-size: var(--fs-4xl);
  margin-bottom: 12px;
  opacity: 0.4;
}
.fb-props-empty p {
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.fb-props-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.fb-props-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.fb-props-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.fb-props-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}
.fb-cover-note {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  line-height: 1.5;
  margin-bottom: 18px;
}

/* ── Inline field editor controls (matches CRM .form-group) ── */
.fe-group {
  margin-bottom: 18px;
}
.fe-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.fe-hint {
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}
.fe-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 12px;
  font-size: var(--fs-base);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.fe-input:focus { border-color: var(--primary); }
.fe-input::placeholder { color: var(--text-subtle); }
textarea.fe-input { resize: vertical; min-height: 72px; }
select.fe-input { cursor: pointer; }
select.fe-input option { background: var(--surface-2); }
.fe-toggles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.fe-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.fe-half { flex: 1; min-width: 0; }
.fe-divider {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-subtle);
  padding: 14px 0 10px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}

/* ── Box model spacing control (agreement builder) ─────────── */
.ag-box-model { user-select: none; }
.ag-box-outer { position: relative; background: var(--surface-2); border: 1px dashed var(--border); border-radius: 6px; padding: 22px 28px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ag-box-inner { position: relative; background: var(--surface); border: 1px dashed var(--border); border-radius: 4px; padding: 18px 24px; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.ag-box-center { width: 36px; height: 18px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-2); }
.ag-box-mid-row { display: flex; align-items: center; gap: 4px; width: 100%; justify-content: center; }
.ag-box-label { position: absolute; top: 3px; left: 6px; font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-subtle); pointer-events: none; }
.ag-box-input { width: 42px; text-align: center; font-size: var(--fs-xs); font-weight: 500; padding: 2px 2px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--text-muted); outline: none; transition: border-color 0.15s, background 0.15s; }
.ag-box-input:hover { border-color: var(--border); background: var(--surface); }
.ag-box-input:focus { border-color: var(--accent); background: var(--surface); color: var(--text); }
.ag-box-top, .ag-box-bottom { display: block; margin: 0 auto; }
.ag-box-left, .ag-box-right { flex-shrink: 0; }

/* ── Style picker (Standard / Bubble) ─────────────────────── */
.fe-style-picker {
  display: flex;
  gap: 8px;
}
.fe-style-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
}
.fe-style-btn:hover { border-color: var(--text-subtle); }
.fe-style-btn.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--text);
}

/* ── Interactive options list ─────────────────────────────── */
.fe-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.fe-option-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fe-option-drag {
  cursor: grab;
  color: var(--text-subtle);
  font-size: var(--fs-base);
  user-select: none;
  flex-shrink: 0;
  padding: 2px;
  line-height: 1;
}
.fe-option-drag:active { cursor: grabbing; }
.fe-option-input {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.fe-option-input:focus { border-color: var(--primary); }
.fe-option-input::placeholder { color: var(--text-subtle); }
.fe-option-delete {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-subtle);
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.fe-option-delete:hover { color: var(--error); border-color: var(--error); }
.fe-option-delete svg { width: 16px; height: 16px; }
.fe-add-option-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0;
  font-family: inherit;
  text-align: left;
  transition: opacity 0.15s;
}
.fe-add-option-btn:hover { opacity: 0.8; }
.fe-option-row.fe-option-dragging { opacity: 0.4; }
.fe-option-row.fe-option-drag-over .fe-option-input { border-color: var(--primary); }

.fe-actions {
  padding-top: 14px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
}
.fe-save-btn {
  width: 100%;
  padding: 12px;
  font-size: var(--fs-base);
}

/* ── Form card mode badge ─────────────────────────────────── */
.form-card-mode-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-subtle);
}

/* ── Checkbox styling fix (Item 8) ────────────────────────── */
.fe-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
  vertical-align: middle;
  margin-right: 8px;
  flex-shrink: 0;
}
.fe-toggle-label {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  user-select: none;
}
.fe-checkbox-grid .form-group {
  display: flex;
  align-items: center;
}

/* ── Form Preview overlay ─────────────────────────────────── */
.form-preview-container {
  background: var(--bg);
  width: 100%;
  max-width: 680px;
  margin: 40px auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
}
.form-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.form-preview-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}
.form-preview-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* ── The preview wears the FORM's theme, not the CRM's ──────
   The body used to inherit the CRM's own dark chrome no matter what the form
   was set to, which is why a light form previewed dark and read as proof the
   live page was dark. These two blocks repaint the preview body in the public
   form's own tokens, so what the coach previews is what the client gets. The
   modal header stays CRM chrome — it belongs to the CRM, not the form.
   --fp-accent is the coach's own brand colour, set inline when the preview
   opens; the hard-coded fallback only covers a coach who has no brand set. */
.form-preview-body.fp-theme-dark {
  --bg: #0d1117; --surface: #161c27; --surface-2: #1e2535; --border: #2a3340;
  --text: #e8edf5; --text-muted: #93a1b5; --text-subtle: #7a8fa8;
  --error: #f0605a;
  --primary: var(--fp-accent, #2557d6);
  background: var(--bg);
  color: var(--text);
  /* The body now paints its own ground, so it has to follow the container's
     rounded bottom corners — a square light corner over a rounded dark one
     reads as a rendering fault. */
  border-radius: 0 0 var(--radius) var(--radius);
}
.form-preview-body.fp-theme-light {
  --bg: #f7f8fb; --surface: #ffffff; --surface-2: #eef1f6; --border: #dde3ed;
  --text: #141a24; --text-muted: #5b6a80; --text-subtle: #75839a;
  --error: #d3413a;
  --primary: var(--fp-accent, #2557d6);
  background: var(--bg);
  color: var(--text);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Cover screen in the preview ───────────────────────────
   The coach's own words are the whole screen. Alignment applies to the cover
   only — a centred question over a left-aligned answer box reads as a
   mistake, so questions stay left whichever is picked. */
.fp-cover {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 0 4px;
  margin-bottom: 24px;
}
/* A step above a question title, as in the mockup — the cover heading is the
   biggest thing on its screen, and at the same size it read as question zero. */
.fp-cover h2 {
  font-size: var(--fs-3xl);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
}
.fp-cover p {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.fp-cover.fp-cover-centre {
  align-items: center;
  text-align: center;
}
/* Centred text is capped at the mockup's measure — a centred paragraph run to
   the full width of the modal is a different design from the one signed off. */
.fp-cover.fp-cover-centre p { max-width: 31ch; }
.fp-cover.fp-cover-centre .fp-slide-nav { width: 100%; max-width: 280px; }
/* One button on a title page fills its column rather than hugging the left
   edge of a centred one — otherwise the cover reads as mis-aligned. */
.fp-cover .fp-slide-nav .fp-nav-next { flex: 1; }

/* ── Classic preview ──────────────────────────────────────── */
.fp-classic {
  padding: 24px 28px 32px;
}
.fp-header {
  text-align: center;
  margin-bottom: 24px;
}
.fp-header h2 { font-size: var(--fs-2xl); font-weight: 500; margin-bottom: 4px; }
.fp-header p { font-size: var(--fs-xs); color: var(--text-muted); }
.fp-field {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
}
.fp-label { font-size: var(--fs-base); font-weight: 500; margin-bottom: 4px; }
.fp-label .fp-req { color: var(--error); margin-left: 2px; }
.fp-help {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 8px;
  line-height: 1.5;
}
.fp-help a { color: var(--primary); text-decoration: underline; }
.fp-help strong { font-weight: 500; color: var(--text); }
.fp-help em { font-style: italic; }
.fp-input, .fp-textarea, .fp-select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  padding: 10px 12px;
  font-size: var(--fs-base);
  font-family: inherit;
}
.fp-textarea { resize: vertical; min-height: 70px; }
.fp-scale { display: flex; gap: 6px; flex-wrap: wrap; }
.fp-scale-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--surface-2);
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500;
}
.fp-scale-labels { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 4px; }
.fp-multi { display: flex; flex-direction: column; gap: 6px; }
.fp-multi-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: var(--fs-sm); color: var(--text-muted);
}
.fp-multi-check {
  width: 16px; height: 16px; border: 2px solid var(--border);
  border-radius: 3px; flex-shrink: 0;
}
.fp-radio-dot {
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0;
}
.fp-bubble { align-items: flex-start; }
.fp-bubble .fp-multi-opt { border-radius: 12px; padding: 10px 16px; width: auto; display: inline-flex; }
.fp-photo-grid { display: flex; gap: 8px; }
.fp-photo-add {
  width: 80px; height: 80px; border: 2px dashed var(--border);
  border-radius: 6px; display: flex; align-items: center;
  justify-content: center; color: var(--text-muted); font-size: var(--fs-2xl);
}
.fp-section-header {
  padding: 20px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.fp-section-header h3 {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--text);
}
.fp-text-element {
  padding: 12px 16px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 14px;
}
.fp-text-element a { color: var(--primary); text-decoration: underline; }
.fp-text-element strong { font-weight: 500; color: var(--text); }
.fp-submit {
  width: 100%;
  padding: 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: var(--fs-md);
  font-weight: 500;
  margin-top: 8px;
  opacity: 0.5;
}

/* ── Focused preview ──────────────────────────────────────── */
.fp-focused {
  padding: 24px 28px 32px;
  min-height: 400px;
  position: relative;
}
.fp-progress-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 32px;
  overflow: hidden;
}
.fp-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.fp-slide {
  display: none;
}
.fp-slide.fp-slide-active {
  display: block;
  animation: fpSlideIn 0.3s ease;
}
@keyframes fpSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fp-focused-q-num {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-subtle);
  font-weight: 500;
  margin-bottom: 10px;
}
.fp-focused-q-title {
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 6px;
}
.fp-focused-q-help {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: 20px;
  line-height: 1.5;
}
.fp-focused-q-help a { color: var(--primary); text-decoration: underline; }
.fp-focused-q-help strong { font-weight: 500; color: var(--text); }
.fp-focused-section {
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--text);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.fp-focused-text {
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: 1.6;
}
.fp-focused-text a { color: var(--primary); }
.fp-focused-text strong { color: var(--text); }
.fp-slide-nav {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}
.fp-nav-btn {
  padding: 10px 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.fp-nav-btn:hover { border-color: var(--primary); color: var(--text); }
.fp-nav-next { background: var(--primary); border-color: var(--primary); color: #fff; }
.fp-nav-next:hover { opacity: 0.9; }
.fp-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Empty forms state ─────────────────────────────────────── */
.checkins-forms-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  grid-column: 1 / -1;
}
.checkins-forms-empty p { font-size: var(--fs-base); margin-bottom: 16px; }

/* ── Check-in review ───────────────────────────────────────── */
/* ── Pending tab count bubble ────────────────────────────────── */
.ci-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  background: var(--primary);
  color: #fff;
  vertical-align: middle;
  margin-left: 6px;
  position: relative;
  top: -1px;
}

/* ── Amber nav badge for check-ins ──────────────────────────── */
.nav-badge--amber {
  background: #f59e0b;
}

/* ── Pending cards ───────────────────────────────────────────── */
.cr-cards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cr-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.cr-card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
  transform: translateY(-1px);
}
.cr-card:active { transform: translateY(0); }
/* No status border on the card — urgency reads from the colored wait label
   ("13 days ago" in amber/red) and the queue's oldest-first order. A thick
   coloured left bar is visual noise (Clayton). */

.cr-card-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
  font-size: var(--fs-lg);
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid color-mix(in srgb, var(--primary) 25%, transparent);
}
.cr-card-avatar--sm {
  width: 32px; height: 32px;
  font-size: var(--fs-sm);
}
.cr-card-body { flex: 1; min-width: 0; }
.cr-card-name {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-card-week {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}
.cr-card-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cr-card-wait {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.cr-card--warn  .cr-card-wait { color: #f59e0b; font-weight: 500; }
.cr-card--overdue .cr-card-wait { color: #ef4444; font-weight: 500; }

/* Returned + snoozed card variants — the badge + dimmed opacity carry the
   state; no coloured left bar. */
.cr-card--returned { opacity: 0.85; }
.cr-card--snoozed { opacity: 0.6; }
.cr-card-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-xs); font-weight: 500; padding: 2px 7px;
  border-radius: 99px; margin-left: 6px; vertical-align: middle;
}
.cr-card-badge--returned { background: color-mix(in srgb, #f59e0b 12%, transparent); color: #92400e; }
.cr-card-badge--snoozed { background: color-mix(in srgb, var(--text-subtle) 12%, transparent); color: var(--text-subtle); }

/* Section labels in pending list */
.cr-section-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted); padding: 12px 0 6px;
}
.cr-section-returned { color: #92400e; }

/* Snoozed section (collapsed) */
.cr-snoozed-section { margin-top: 12px; }
.cr-snoozed-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-subtle);
  background: none; border: none; cursor: pointer; padding: 8px 0;
  font-family: inherit;
}
.cr-snoozed-toggle:hover { color: var(--text-muted); }
.cr-snoozed-chevron { transition: transform 0.2s; }
.cr-snoozed-section.expanded .cr-snoozed-chevron { transform: rotate(180deg); }
.cr-snoozed-list { display: none; }
.cr-snoozed-section.expanded .cr-snoozed-list { display: block; }

/* Snooze popover */
.cr-snooze-popover {
  position: absolute; top: 100%; right: 0; z-index: 100;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 4px; min-width: 180px; margin-top: 4px;
}
.cr-snooze-popover.hidden { display: none; }
.cr-snooze-opt {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; font-size: var(--fs-sm); font-weight: 500;
  background: none; border: none; cursor: pointer;
  border-radius: 6px; color: var(--text); font-family: inherit;
}
.cr-snooze-opt:hover { background: var(--surface-2); }

/* Template picker (in review editor) */
.cr-editor-notes-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.cr-template-picker-btn {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 10px; cursor: pointer; font-family: inherit;
}
.cr-template-picker-btn:hover { color: var(--primary); border-color: var(--primary); }
.cr-template-picker {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: 4px; margin-bottom: 8px; max-height: 200px; overflow-y: auto;
}
.cr-template-picker.hidden { display: none; }
.cr-tmpl-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; font-size: var(--fs-sm); font-weight: 500;
  background: none; border: none; cursor: pointer;
  border-radius: 6px; color: var(--text); font-family: inherit;
}
.cr-tmpl-item:hover { background: var(--surface-2); }
.cr-tmpl-empty {
  padding: 12px; font-size: var(--fs-xs); color: var(--text-subtle); text-align: center;
}

/* Return to client modal chips */
.cr-return-chip {
  font-size: var(--fs-xs); font-weight: 500; padding: 5px 12px;
  border: 1px solid var(--border); border-radius: 99px;
  background: var(--surface); color: var(--text-muted);
  cursor: pointer; font-family: inherit;
}
.cr-return-chip:hover { border-color: var(--primary); color: var(--primary); }

/* Response template items in settings */
.s-rt-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.s-rt-item:last-child { border-bottom: none; }
.s-rt-item-body { flex: 1; min-width: 0; }
.s-rt-item-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.s-rt-item-text { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; white-space: pre-wrap; }
.s-rt-delete {
  background: none; border: none; cursor: pointer; color: var(--text-subtle);
  padding: 4px; border-radius: 4px; flex-shrink: 0;
}
.s-rt-delete:hover { color: var(--error); }
.cr-card-arrow { color: var(--text-muted); flex-shrink: 0; }

/* ── Empty state ────────────────────────────────────────────── */
.cr-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 32px;
  text-align: center;
  gap: 10px;
}
.cr-empty-icon {
  color: var(--success);
  margin-bottom: 4px;
  opacity: 0.7;
}
.cr-empty-title {
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--text);
}
.cr-empty-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 340px;
}

/* ── History tab ────────────────────────────────────────────── */
.cr-history-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.cr-history-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.cr-history-search-wrap svg {
  position: absolute;
  left: 10px;
  color: var(--text-muted);
  pointer-events: none;
}
.cr-history-search-input {
  width: 280px;
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  transition: border-color 0.15s;
}
.cr-history-search-input:focus { outline: none; border-color: var(--primary); }
.cr-history-search-input::placeholder { color: var(--text-muted); }

.cr-history-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cr-history-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.cr-history-row:last-child { border-bottom: none; }
.cr-history-row:hover { background: var(--surface-2); }
.cr-history-info { flex: 1; min-width: 0; }
.cr-history-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-history-week {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}
.cr-history-tags {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.cr-htag {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  background: var(--surface-3);
  color: var(--text-muted);
}
.cr-htag--video   { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.cr-htag--notes   { background: color-mix(in srgb, #f59e0b 12%, transparent); color: #d97706; }
.cr-htag--actions { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); }
.cr-history-date {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 100px;
  text-align: right;
}

/* ── Legacy .cr-row / .cr-badge (kept for any other usage) ──── */
.cr-section-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cr-section-count {
  font-size: var(--fs-xs);
  background: var(--primary);
  color: #fff;
  padding: 1px 7px;
  border-radius: 99px;
  font-weight: 500;
}
.cr-list { display: flex; flex-direction: column; gap: 4px; }
.cr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s;
}
.cr-row:hover { border-color: var(--primary); }
.cr-row-name { font-weight: 500; font-size: var(--fs-sm); min-width: 140px; }
.cr-row-week { font-size: var(--fs-xs); color: var(--text-muted); flex: 1; }
.cr-row-time { font-size: var(--fs-xs); color: var(--text-subtle); }
.cr-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.cr-badge-pending { color: var(--warning, #f59e0b); background: color-mix(in srgb, var(--warning, #f59e0b) 14%, transparent); }
.cr-badge-reviewed { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }

/* ── Focus Mode — entered during screen recording ─────────────
   Hides sidebar, header, drawer so check-in data fills the screen */
body.cr-focus-mode-active .sidebar,
body.cr-focus-mode-active .sidebar-edge-toggle {
  display: none !important;
}
/* Queue reskin: the rail lists every OTHER waiting client — never allowed
   in a recording (privacy). Sticky top, Skip/queue counter and delete are
   coach chrome; Skip/Delete mid-take would also destroy the recorder DOM.
   The week row stays visible — it's context, and Compare is part of the
   recording flow. */
body.cr-focus-mode-active .ciq-rail,
body.cr-focus-mode-active .checkins-sticky-top,
body.cr-focus-mode-active .ciq-flow,
body.cr-focus-mode-active .cr-delete-btn {
  display: none !important;
}
/* :not() — in the queue reskin .cr-view-header is reused by the week row,
   which must survive focus mode (see above) */
.cr-focus-mode .cr-view-header:not(.ciq-weekrow) { display: none; }
.cr-focus-mode .cr-response-drawer,
.cr-focus-mode .cr-drawer-backdrop { display: none !important; }

/* ── Focus Mode — controls now live on the camera bubble ──────
   The focus pill is removed; only the action items overlay remains. */

/* ── Single check-in view ─────────────────────────────────── */

/* Two-column layout for completed (responded) check-ins */
.cr-view--completed { /* natural flow — .views-container is the scroll parent */ }

/* Check-in detail rows appended into .checkins-sticky-top */
.cr-checkin-frozen-ext {
  border-top: 1px solid var(--border);
  /* bleed to match sticky top's padding */
  margin-left: -32px;
  margin-right: -32px;
  padding: 12px 32px 0;
}

/* Page header row inside frozen extension */
.cr-view-header--completed {
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom: none;
  flex-wrap: nowrap;
  gap: 12px;
}
.cr-view-header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--success);
  white-space: nowrap;
  margin-left: auto;
}
.cr-view-header--completed .cr-view-actions { margin-left: 0; }

/* Column label bar inside frozen extension */
.cr-completed-col-headers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  margin-left: -32px;
  margin-right: -32px;
}
.cr-completed-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 32px;
}
.cr-completed-col-header--right {
  border-left: 1px solid var(--border);
}
.cr-col-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.cr-col-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Two-column content — natural height, scrolls with the page */
.cr-completed-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  /* bleed to cover .view side padding so column border aligns */
  margin-left: -32px;
  margin-right: -32px;
}
.cr-submission-col {
  border-left: 1px solid var(--border);
  padding: 20px 32px 60px;
  background: var(--surface);
}
.cr-submission-trends {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.cr-submission-trends > .cr-drawer-section-label { display: none; }

/* Response column */
.cr-response-col {
  padding: 20px 32px 60px;
  background: var(--surface);
}
.cr-response-col .cr-view-meta-bar { display: none; }
.cr-response-col .cr-view-footer   { display: none; }
.cr-response-col .cr-response-video-section { margin-bottom: 0; }
.cr-response-col .cr-response-notes-section,
.cr-response-col .cr-response-focus-section,
.cr-response-col .cr-response-insight-section {
  padding-top: 12px;
  padding-bottom: 12px;
}

@media (max-width: 900px) {
  .cr-view-header--completed { flex-wrap: wrap; }
  .cr-view-header-status { margin-left: 0; order: 3; flex-basis: 100%; }
  .cr-view-header--completed .cr-view-actions { margin-left: auto; }
}
@media (max-width: 768px) {
  .checkins-sticky-top  { margin: -28px -20px 0; padding: 28px 20px 0; }
  .cr-checkin-frozen-ext { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .cr-completed-col-headers { grid-template-columns: 1fr; margin-left: -20px; margin-right: -20px; }
  .cr-completed-col-header--right { border-left: none; border-top: 1px solid var(--border); }
  .cr-completed-layout { grid-template-columns: 1fr; margin-left: -20px; margin-right: -20px; }
  .cr-submission-col   { border-left: none; border-top: 1px solid var(--border); padding: 20px 20px 40px; }
  .cr-response-col     { padding: 20px 20px 32px; }
}

.cr-view-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.cr-view-title h2 { font-size: var(--fs-2xl); font-weight: 500; }
.cr-view-week { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.cr-view-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.cr-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
  font-size: var(--fs-xs);
}
.cr-delete-btn:hover {
  color: var(--error, #ef4444) !important;
  border-color: var(--error, #ef4444) !important;
  background: color-mix(in srgb, var(--error, #ef4444) 8%, transparent) !important;
}

/* ── Check-in content grid ─────────────────────────── */
.cr-checkins-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
  max-width: 50%;
  margin: 0 auto;
  /* Leave room for the fixed drawer on the right when it's open */
  transition: padding-right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.cr-checkins-grid.cr-grid-split {
  grid-template-columns: 1fr 1fr;
  max-width: 100%;
}
.cr-checkins-grid.cr-grid-merged {
  max-width: 75%;
}
@media (max-width: 900px) {
  .cr-checkins-grid.cr-grid-split { grid-template-columns: 1fr; }
}

/* Check-in panel (previous + current) — a LAYOUT container only, no card chrome.
   The BODY/COMPLIANCE cat-cards are the cards; wrapping them in another
   surface+border read as a redundant nested card (Clayton) and muffled the inner
   cards' shadows. Sit the cat-cards directly on the page ground instead. In
   compare mode the column is distinguished by its Previous/Current label, the
   grid gap, and the dimmed previous panel — not by a border. */
.cr-checkin-panel {
  padding: 0;
}
.cr-panel-label-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.cr-panel-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.cr-panel-label--prev { color: var(--text-subtle); }
.cr-panel-meta {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

/* Compare (two full panels): pin each panel's Previous/Current label so it
   stays visible while scrolling deep panels, and dim the previous panel so
   the eye defaults to the current week (brightens on hover for a close read).
   Scoped to .cr-grid-split so single view is untouched. */
.cr-grid-split .cr-panel-label-row {
  position: sticky; top: 0; z-index: 2;
  /* full-bleed over the panel's padding so scrolling content is masked and
     the pinned header keeps the panel's rounded top */
  margin: -20px -22px 18px; padding: 20px 22px 14px;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
}
.cr-grid-split .cr-panel-previous { opacity: 0.7; transition: opacity 0.15s ease; }
.cr-grid-split .cr-panel-previous:hover { opacity: 1; }

/* ── Compare selector ─────────────────────────────── */
.cr-compare-wrap { position: relative; }
.cr-compare-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
  font-family: inherit;
}
.cr-compare-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--text);
}
.cr-compare-btn--active {
  border-color: var(--primary);
  background: var(--primary-dim);
  color: var(--primary);
}
.cr-compare-btn--disabled { opacity: 0.45; cursor: not-allowed; }
.cr-compare-chevron { transition: transform 0.15s; }
.cr-compare-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  z-index: 800;
  overflow: hidden;
  padding: 4px 0;
}
.cr-compare-dd-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 8px 14px 4px;
}
.cr-compare-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.12s;
  font-family: inherit;
}
.cr-compare-option:hover { background: var(--surface-hover); }
.cr-compare-option--clear { border-bottom: 1px solid var(--border); }
.cr-compare-option-week {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.cr-compare-option-age {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  white-space: nowrap;
}

/* ── Respond button ────────────────────────────────── */
.cr-respond-btn { display: inline-flex; align-items: center; gap: 6px; }

/* ── Response drawer (slides in from right) ──────── */
.cr-response-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: calc(100vw - 48px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -6px 0 32px rgba(0,0,0,0.22);
  z-index: 700;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.cr-response-drawer.open { transform: translateX(0); }

.cr-drawer-bar {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.cr-drawer-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  flex: 1;
}
.cr-drawer-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s, background 0.15s;
}
.cr-drawer-close:hover { color: var(--text); background: var(--surface-hover); }

.cr-drawer-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* ── Drawer view (responded state) ─────────────────── */
.cr-drawer-view {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Meta bar */
.cr-view-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.cr-view-meta-left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--success);
  font-weight: 500;
  flex-wrap: wrap;
}
.cr-view-meta-date {
  color: var(--success);
}
.cr-edit-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 9px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.cr-edit-inline-btn:hover {
  color: var(--text);
  border-color: var(--border-light);
}

/* Video section */
.cr-response-video-section {
  margin-bottom: 18px;
}

/* Notes section */
.cr-response-notes-section {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.cr-response-notes-text {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.65;
  white-space: pre-wrap;
}

/* Focus points section */
.cr-response-focus-section {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.cr-response-section-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 10px;
}
.cr-response-focus-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: focus-counter;
}
.cr-response-focus-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.5;
  counter-increment: focus-counter;
}
.cr-response-focus-list li::before {
  content: counter(focus-counter);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 500;
  flex-shrink: 0;
  margin-top: 1px;
}

/* AI insight section */
.cr-response-insight-section {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.cr-response-insight-section .cr-ai-insight-section { margin: 0; }

/* Collapsible sections (photos, trends) */
.cr-response-collapse {
  border-top: 1px solid var(--border);
}
.cr-response-collapse-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  user-select: none;
  outline: none;
}
.cr-response-collapse-summary::-webkit-details-marker { display: none; }
.cr-response-collapse-summary::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--text-subtle);
  border-bottom: 1.5px solid var(--text-subtle);
  transform: rotate(45deg);
  margin-left: auto;
  margin-right: 2px;
  transition: transform 0.2s;
}
details[open] .cr-response-collapse-summary::after {
  transform: rotate(-135deg);
}
.cr-response-collapse-body {
  padding-bottom: 14px;
}
.cr-response-collapse-body .cr-drawer-section-label { display: none; }

/* Footer */
.cr-view-footer {
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* Legacy — kept for editor use */
.cr-drawer-responded-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--success);
  font-weight: 500;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* View tracking status badges */
.cr-view-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 6px;
}
.cr-view-status--none {
  color: var(--text-muted);
  background: var(--surface-alt);
}
.cr-view-status--opened {
  color: #eab308;
  background: rgba(234,179,8,0.1);
}
.cr-view-status--played {
  color: #3b82f6;
  background: rgba(59,130,246,0.1);
}
.cr-view-status--partial {
  color: #3b82f6;
  background: rgba(59,130,246,0.1);
}
.cr-view-status--full {
  color: var(--success);
  background: rgba(34,197,94,0.1);
}
.cr-view-progress-bar {
  display: inline-block;
  width: 48px;
  height: 4px;
  background: rgba(59,130,246,0.2);
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: middle;
}
.cr-view-progress-fill {
  display: block;
  height: 100%;
  background: #3b82f6;
  border-radius: 2px;
  transition: width 0.3s;
}
/* Transcript / summary */
.cr-transcript-block {
  margin-top: 10px;
  margin-bottom: 4px;
}
.cr-transcript-summary {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 8px;
}
.cr-transcript-toggle { font-size: var(--fs-xs); }
.cr-transcript-toggle summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  user-select: none;
  outline: none;
  transition: color 0.15s;
}
.cr-transcript-toggle summary::-webkit-details-marker { display: none; }
.cr-transcript-toggle summary::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-right: 1px;
}
.cr-transcript-toggle[open] summary::before { transform: rotate(45deg); }
.cr-transcript-toggle summary:hover { color: var(--text-muted); }
.cr-transcript-text {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--surface-alt);
  border-radius: 5px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.6;
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}
.cr-transcript-loading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* The transcript is not coming. Deliberately QUIETER than an error: nothing is
   broken for the client, who has the video and the notes — only the optional
   extra is missing. Amber carries it, and the WORDS carry it too, because
   colour is never the only signal. No spinner: the absence of one is half of
   what distinguishes this from the loading row directly above. */
.cr-transcript-failed {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: #f59e0b;
}

.cr-drawer-view-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  flex-wrap: wrap;
}

/* ── Drawer editor ──────────────────────────────────── */
.cr-drawer-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cr-drawer-video-section {}
.cr-drawer-notes-section {}
.cr-drawer-editor-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Backdrop ───────────────────────────────────────── */
.cr-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.30);
  z-index: 699;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* ── Recorder countdown overlay ─────────────────────── */
.vr-countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
  pointer-events: none;
}
.vr-countdown-num {
  font-size: 130px;
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 48px rgba(0,0,0,0.5);
  line-height: 1;
  animation: vr-cd-pop 0.9s ease forwards;
}
@keyframes vr-cd-pop {
  0%   { transform: scale(1.5); opacity: 0; }
  20%  { transform: scale(1.0); opacity: 1; }
  75%  { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(0.7); opacity: 0; }
}

/* Two-column layout */
.cr-layout {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .cr-layout { grid-template-columns: 1fr; }
}

/* Left column: client check-in */
.cr-col-checkin {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* When compare is active, split the left column */
.cr-col-checkin.cr-col-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cr-compare-slot.hidden { display: none; }

/* Shared card shell */
.cr-col-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}

/* Column header (shared left + right) */
.cr-col-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.cr-col-label-text {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}
.cr-col-meta {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin-left: auto;
}

/* Check-in response fields */
.cr-responses { display: flex; flex-direction: column; }
.cr-response-row {
  display: flex; flex-direction: row; align-items: baseline;
  justify-content: space-between; gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.cr-response-row:last-child { border-bottom: none; }
.cr-response-row:hover { background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.cr-response-label-text {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  flex-shrink: 0;
  max-width: 50%;
}
/* Metric-label tooltips render through the shared fixed-position portal
   (#ph-metric-tooltip / .ph-metric-tip) — a dark 320px card clamped to the
   viewport, so long text wraps and never runs off the card edge. The label
   just carries the hover affordance; the old inline ::after (white box, nowrap,
   overflowed) is gone. */
.cr-response-label-text[data-tip-title] {
  cursor: help;
  border-bottom: 1px dotted var(--text-muted);
  display: inline-block;
}
.cr-response-value { font-size: var(--fs-base); font-weight: 500; line-height: 1.5; text-align: right; flex: 1; color: var(--text); }

/* Weight value cell: muted "N readings" qualifier · [delta] · NUMBER (last).
   The qualifier is the hover anchor for the readings-context tooltip; the
   dotted underline signals it's hoverable, amber flags a single reading. */
.cr-wqual {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
  border-bottom: 1px dotted var(--text-subtle); cursor: help;
}
.cr-wqual--single {
  color: var(--warning);
  border-bottom-color: color-mix(in srgb, var(--warning) 55%, transparent);
}
.cr-wsep { color: var(--text-subtle); font-weight: 400; }
.cr-wnum { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
/* Empty-metric placeholder — reads as absence, not a value */
.cr-nodata { font-size: var(--fs-sm); font-weight: 400; color: var(--text-subtle); font-style: italic; }
.cr-val-text { white-space: pre-wrap; color: var(--text); }
.cr-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  padding: 3px 9px;
  border-radius: 4px;
  margin: 2px 4px 2px 0;
}

/* Scale display */
.cr-scale-display { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.cr-scale-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}
.cr-scale-dot.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Photos */
.cr-photos-grid { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cr-photo-thumb {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s;
}
.cr-photo-thumb:hover { border-color: var(--primary); }

/* ── AI Insight section ───────────────────────────────────── */
.cr-ai-insight-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.cr-insight-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 11px 16px;
  background: color-mix(in srgb, #9f67ff 6%, var(--surface-2));
  border: 1.5px dashed color-mix(in srgb, #9f67ff 40%, var(--border));
  border-radius: 8px;
  color: #9f67ff;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}
.cr-insight-btn:hover {
  background: color-mix(in srgb, #9f67ff 12%, var(--surface-2));
  border-color: #9f67ff;
}
.cr-insight-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  padding: 8px 0;
}
.cr-insight-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: #9f67ff;
  border-radius: 50%;
  animation: cr-spin 0.65s linear infinite;
  flex-shrink: 0;
}
@keyframes cr-spin { to { transform: rotate(360deg); } }
.cr-insight-block {
  background: color-mix(in srgb, #9f67ff 7%, var(--surface-2));
  border: 1px solid color-mix(in srgb, #9f67ff 25%, var(--border));
  border-radius: 8px;
  padding: 14px 16px;
}
.cr-insight-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9f67ff;
  margin-bottom: 10px;
}
.cr-insight-text {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  white-space: pre-wrap;
}
.cr-insight-regen {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  background: none;
  border: none;
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: color 0.15s;
}
.cr-insight-regen:hover { color: #9f67ff; }

/* AI-populated action item fields */
.cr-action-ai-filled {
  border-color: rgba(99, 102, 241, 0.5) !important;
  background: rgba(99, 102, 241, 0.04) !important;
}
.cr-action-ai-filled:focus {
  border-color: var(--primary) !important;
  background: var(--surface-2) !important;
}

/* ── Drawer section divider ──────────────────────────────── */
.cr-drawer-section {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.cr-drawer-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.cr-drawer-section-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Drawer: Progress Photos ─────────────────────────────── */
.cr-drawer-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.cr-drawer-photo-item {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: border-color 0.15s;
}
.cr-drawer-photo-item:hover { border-color: var(--primary); }
.cr-drawer-photo-item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
/* Compare mode: two labeled columns */
.cr-drawer-photos-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cr-drawer-photos-col-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  margin-bottom: 6px;
  text-align: center;
}
.cr-drawer-photos-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cr-drawer-photo-placeholder {
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  border: 1.5px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

/* ── Photo Lightbox ──────────────────────────────────────── */
.cr-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cr-lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  user-select: none;
}
.cr-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: var(--fs-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.cr-lightbox-close:hover { background: rgba(255,255,255,0.25); }
.cr-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.10);
  color: #fff;
  font-size: var(--fs-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.cr-lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.cr-lightbox-nav--prev { left: 16px; }
.cr-lightbox-nav--next { right: 16px; }

/* ── Drawer: Data Trends ─────────────────────────────────── */
.cr-drawer-metric-row {
  margin-bottom: 12px;
}
.cr-drawer-metric-row:last-child { margin-bottom: 0; }
.cr-drawer-metric-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.cr-drawer-metric-name {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text);
}
.cr-drawer-metric-value {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cr-drawer-metric-delta {
  font-size: var(--fs-xs);
  font-weight: 500;
  margin-left: 4px;
}
.cr-drawer-metric-delta--up   { color: var(--success); }
.cr-drawer-metric-delta--down { color: var(--danger); }
.cr-drawer-metric-delta--flat { color: var(--text-subtle); }
.cr-drawer-trend-wrap {
  height: 48px;
  position: relative;
}
.cr-drawer-trend-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ── Check-In Analytics Panel ────────────────────────────── */
.cr-analytics-loading {
  text-align: center; padding: 20px; color: var(--text-muted);
  font-size: var(--fs-xs); display: flex; align-items: center; justify-content: center; gap: 8px;
}
#cr-analytics-weight-chart { width: 100% !important; }

/* Delta badges (used on form fields and analytics rows) */
.cr-delta { font-size: var(--fs-xs); font-weight: 500; margin-left: 4px; }
.cr-delta--up { color: var(--success); }
.cr-delta--down { color: var(--danger); }

/* Colorblind overrides for deltas */

/* Metric field visual hierarchy — same as regular values */
.cr-response-value--metric { font-size: var(--fs-base); font-weight: 500; }

/* Compliance score — same as regular values */
.cr-compliance-score { font-size: var(--fs-base); font-weight: 700; }

/* Short transition week note under the Effort score */
.cr-week-note { font-size: var(--fs-xs); color: var(--text-muted); margin: 2px 0 6px; }

/* Prior week context text */
.cr-analytics-prior { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); margin-left: 4px; }

/* Flags / alerts */
.cr-flag {
  padding: 8px 12px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 500;
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.cr-flag::before { content: ''; width: 6px; height: 6px; border-radius: 3px; flex-shrink: 0; }
.cr-flag--danger { background: var(--danger-dim); color: var(--danger); }
.cr-flag--danger::before { background: var(--danger); }
.cr-flag--warn { background: rgba(245,158,11,0.1); color: var(--warning); }
.cr-flag--warn::before { background: var(--warning); }

/* Compact scale display */
.cr-scale-compact { display: inline-flex; align-items: center; gap: 6px; }
.cr-scale-num { font-size: var(--fs-md); font-weight: 500; color: var(--primary); }
.cr-scale-bar { width: 80px; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.cr-scale-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.3s; }
.cr-scale-max { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; }

/* Caution icon for single data point */
.cr-caution-icon { vertical-align: -2px; margin-right: 4px; }

/* Weight source label (e.g. "3-day avg") */
.cr-weight-source { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); margin-top: 1px; }

/* Clickable analytics rows */
.cr-response-row--clickable { cursor: pointer; }
.cr-response-row--clickable:hover { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
.cr-drill-icon { opacity: 0.7; vertical-align: -1px; margin-left: 3px; transition: opacity 0.15s; }
.cr-response-row--clickable:hover .cr-drill-icon { opacity: 1; }

/* Drill-down modal */
.cr-drilldown-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.cr-drilldown-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); width: 540px; max-width: 92vw;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.cr-drilldown-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.cr-drilldown-title { font-size: var(--fs-base); font-weight: 500; color: var(--text); }
.cr-drilldown-close {
  background: none; border: none; font-size: var(--fs-2xl); color: var(--text-muted);
  cursor: pointer; padding: 0; line-height: 1;
}
.cr-drilldown-close:hover { color: var(--text); }
.cr-drilldown-chart { padding: 20px 24px 24px; }
.cr-drill-stats {
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
}
.cr-drill-stat {
  flex: 1; text-align: center; padding: 12px 8px;
  border-right: 1px solid var(--border);
}
.cr-drill-stat:last-child { border-right: none; }
.cr-drill-stat-val { display: block; font-size: var(--fs-lg); font-weight: 500; color: var(--text); }
.cr-drill-stat-label { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

/* Drill-down list (workouts/cardio) */
.cr-drill-list { padding: 8px 0; }
.cr-drill-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-bottom: 1px solid var(--border);
}
.cr-drill-item:last-child { border-bottom: none; }
.cr-drill-item-icon { flex-shrink: 0; display: flex; }
.cr-drill-item-title { flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.cr-drill-item--missed .cr-drill-item-title { color: var(--danger); }
.cr-drill-item-duration { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); margin-left: 6px; }
.cr-drill-item-date { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.cr-drill-empty { padding: 20px 18px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }

/* Strength drill-down — per-lift volume-load rows, grouped by
   progressing / holding / stalling / new / dropped. */
.cr-str-note {
  margin: 12px 18px 4px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: var(--fs-xs);
  color: var(--text-muted); line-height: 1.45;
}
.cr-str-section-h {
  padding: 12px 18px 4px; font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle);
}
.cr-str-lift {
  display: grid; grid-template-columns: 1fr auto; column-gap: 10px;
  padding: 9px 18px; border-bottom: 1px solid var(--border);
}
.cr-str-lift:last-child { border-bottom: none; }
.cr-str-lift-name { grid-column: 1; grid-row: 1; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.cr-str-lift-chg { grid-column: 2; grid-row: 1; text-align: right; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.cr-str-lift-vl { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cr-str-lift-top, .cr-str-lift-rir { color: var(--text-subtle); }
.cr-str-lift--dropped { opacity: 0.6; }

/* Habits drill-down — per-habit "X / Y days" + which-days pip strip
   (filled = hit, outline = miss; fill/no-fill is the signal, colour secondary). */
.cr-habit-list { padding: 6px 0; }
.cr-habit-row { padding: 10px 18px; border-bottom: 1px solid var(--border); }
.cr-habit-row:last-child { border-bottom: none; }
.cr-habit-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cr-habit-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.cr-habit-count { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-habit-pips { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.cr-habit-pip { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.cr-habit-pip--hit { background: var(--success); color: var(--bg); }
.cr-habit-pip--miss { background: transparent; border: 1px solid var(--border); color: var(--text-subtle); }

/* Drill-down habit grid */
.cr-drill-grid-wrap { padding: 14px 18px; overflow-x: auto; }
.cr-drill-grid { width: 100%; border-collapse: collapse; }
.cr-drill-grid th {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); text-transform: uppercase;
  padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--border);
}
.cr-drill-grid td { padding: 8px; text-align: center; border-bottom: 1px solid var(--border); }
.cr-drill-grid tr:last-child td { border-bottom: none; }
.cr-drill-grid-habit {
  text-align: left; font-size: var(--fs-xs); font-weight: 500; color: var(--text);
  white-space: nowrap; padding-right: 12px;
}
.cr-drill-grid-check, .cr-drill-grid-miss { display: inline-flex; }
.cr-drill-grid-na { color: var(--border); font-size: var(--fs-xs); }

/* ── Merged comparison table ─────────────────────────────── */
.cr-merged-table { display: flex; flex-direction: column; }
.cr-merged-header-row {
  display: grid; grid-template-columns: 40% 30% 30%;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 60%, var(--bg));
}
.cr-merged-header-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
}
.cr-merged-header-label:not(:first-child) { text-align: right; }
.cr-merged-row {
  display: grid; grid-template-columns: 40% 30% 30%;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.cr-merged-row:hover { background: color-mix(in srgb, var(--primary) 4%, var(--surface)); }
.cr-merged-row:last-child { border-bottom: none; }
.cr-merged-row--clickable { cursor: pointer; }
.cr-merged-label {
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); min-width: 0;
}
.cr-merged-val {
  font-size: var(--fs-base); font-weight: 500; color: var(--text); text-align: right; white-space: nowrap;
  /* nowrap + grid min-content would let one long value stretch the whole
     table off-screen — clamp the cell instead */
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* Long-form answers: read side-by-side as wrapped prose, not one nowrap line */
.cr-merged-row--wide .cr-merged-val {
  white-space: normal; overflow: visible; text-align: left;
  overflow-wrap: anywhere; line-height: 1.5; font-size: var(--fs-sm);
}
.cr-merged-val .cr-delta { margin-right: 6px; }
.cr-merged-val--prev { color: var(--text-muted); }
.cr-merged-val--empty { color: var(--border); font-weight: 400; }
.cr-merged-category {
  grid-column: 1 / -1;
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text);
  padding: 14px 14px 6px; margin-top: 6px;
  background: color-mix(in srgb, var(--surface) 60%, var(--bg));
  border-top: 2px solid var(--border); border-bottom: 1px solid var(--border);
}
.cr-merged-category:first-of-type { margin-top: 0; border-top: none; }
.cr-merged-header-row + .cr-merged-category { margin-top: 0; border-top: none; }
.cr-merged-row:has(+ .cr-merged-category) { border-bottom: none; }

/* Photos comparison row */
.cr-merged-photos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  padding: 14px; border-top: 1px solid var(--border); margin-top: 4px;
}
.cr-merged-photos-col-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px;
}
.cr-merged-photos-grid { display: flex; gap: 8px; flex-wrap: wrap; }

/* Weight chart hover dots */
.cr-weight-chart-wrap { position: relative; }
.cr-weight-dot {
  position: absolute; width: 16px; height: 16px;
  transform: translate(-50%, -50%); cursor: pointer;
  border-radius: 50%; z-index: 2;
}
.cr-weight-dot[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  background: var(--text); color: var(--bg);
  font-size: var(--fs-xs); font-weight: 500; line-height: 1.3;
  padding: 5px 9px; border-radius: 4px;
  z-index: 100; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.cr-weight-dot:hover { background: color-mix(in srgb, var(--primary) 20%, transparent); }

/* Category group headers */
.cr-category-header {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  padding: 14px 14px 6px;
  margin-top: 6px;
  background: color-mix(in srgb, var(--surface) 60%, var(--bg));
  border-top: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cr-responses--grouped .cr-category-header:first-child { margin-top: 0; border-top: none; }
.cr-responses--grouped .cr-response-row:has(+ .cr-category-header) { border-bottom: none; }
.cr-responses--grouped .cr-response-row:last-child { border-bottom: none; }

/* Sticky badges (injected into existing sticky tab area) */
.cr-sticky-badges {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 12px;
}
.cr-sticky-badge {
  font-size: var(--fs-xs); font-weight: 500; padding: 3px 10px;
  border-radius: 6px; background: var(--surface); border: 1px solid var(--border);
  white-space: nowrap;
}
.cr-sticky-badge--score { font-size: var(--fs-xs); font-weight: 500; }

/* Analytics: Quick Plan Edits */
.cr-analytics-edits { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 4px; }
.cr-analytics-edits-summary {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
  cursor: pointer; padding: 8px 0; letter-spacing: 0.5px; user-select: none;
}
.cr-analytics-edits-summary:hover { color: var(--text); }
.cr-analytics-edits-body { padding: 8px 0 4px; }
.cr-edit-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}
.cr-edit-label {
  width: 100px; flex-shrink: 0; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
}
.cr-edit-input {
  flex: 1; min-width: 80px; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--text);
  font-size: var(--fs-xs); font-weight: 500;
}
.cr-edit-input:focus { border-color: var(--primary); outline: none; }
.cr-edit-save-btn {
  padding: 5px 12px; border-radius: 6px; border: none;
  background: var(--primary); color: #fff; font-size: var(--fs-xs); font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.cr-edit-save-btn:hover { opacity: 0.9; }

/* ── Drawer: Quick Action Items ──────────────────────────── */
.cr-action-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cr-action-item-row:last-child { margin-bottom: 0; }
.cr-action-bullet {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cr-action-input {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 7px 10px;
  font-size: var(--fs-sm);
  font-family: inherit;
  transition: border-color 0.15s;
}
.cr-action-input::placeholder { color: var(--text-subtle); }
.cr-action-input:focus { outline: none; border-color: var(--primary); }
/* Saved view */
.cr-action-items-view {
  background: color-mix(in srgb, var(--success) 6%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--success) 22%, var(--border));
  border-radius: 8px;
  padding: 12px 14px;
}
.cr-action-items-view-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--success);
  margin-bottom: 8px;
}
.cr-action-item-view {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.5;
}
.cr-action-item-view:last-child { margin-bottom: 0; }

/* ── Action items overlay during recording ──────────────── */
.vr-focus-actions {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9600;
  background: rgba(10, 12, 20, 0.92);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 14px 22px 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  min-width: 320px;
  max-width: 520px;
  width: max-content;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  text-align: center;
}
.vr-focus-actions-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 10px;
}
.vr-focus-action-item {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  line-height: 1.5;
  margin-bottom: 6px;
}
.vr-focus-action-item:last-child { margin-bottom: 0; }
.vr-focus-action-num {
  font-weight: 500;
  color: var(--primary, #6366f1);
  flex-shrink: 0;
  font-size: var(--fs-sm);
}

/* ── Right column: response view ─────────────────────────── */
.cr-response-view,
.cr-response-editor {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}

/* Video thumbnail card — click to open lightbox */
.cr-video-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  border: none;
  cursor: pointer;
  margin-bottom: 18px;
  padding: 0;
}
.cr-video-thumb-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cr-video-thumb-bg iframe {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: none;
  pointer-events: none;
}
.cr-video-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(0,0,0,0.35);
  transition: background 0.2s;
}
.cr-video-thumb:hover .cr-video-thumb-overlay { background: rgba(0,0,0,0.18); }
.cr-play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  transition: transform 0.18s, box-shadow 0.18s;
}
.cr-play-btn svg { color: #111; margin-left: 3px; }
.cr-video-thumb:hover .cr-play-btn {
  transform: scale(1.08);
  box-shadow: 0 6px 32px rgba(0,0,0,0.45);
}
.cr-video-thumb-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  letter-spacing: 0.02em;
}

/* Written feedback block */
.cr-feedback-block {
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.cr-feedback-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--primary);
  margin-bottom: 8px;
}
.cr-feedback-text {
  font-size: var(--fs-base);
  color: var(--text);
  line-height: 1.7;
  white-space: pre-wrap;
  margin: 0;
}

/* Action row at bottom of response view */
.cr-response-meta-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.cr-response-meta-actions .btn-primary { margin-left: auto; }

/* ── Right column: inline editor ─────────────────────────── */
.cr-editor-video-area { margin-bottom: 20px; }

.cr-record-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 15px 20px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-2));
  border: 1.5px dashed color-mix(in srgb, var(--primary) 60%, var(--border));
  border-radius: 8px;
  color: var(--primary);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 12px;
  font-family: inherit;
}
.cr-record-btn:hover {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-2));
  border-color: var(--primary);
}

/* Native video in editor preview slot */
.cr-native-video-preview { margin-top: 12px; }
.cr-native-video-inline {
  width: 100%;
  border-radius: 8px;
  background: #000;
  display: block;
  max-height: 260px;
}

/* Native video in response view (display mode) */
.cr-native-video-wrap { margin-bottom: 16px; }
.cr-native-video {
  width: 100%;
  border-radius: 6px;
  background: #000;
  display: block;
  margin-bottom: 10px;
}

/* Video wrap with play overlay (dashboard response view) */
/* Shown in place of the player while a coach's video reply is still
   transcoding. It occupies the same 16/9 footprint as .cr-video-wrap so the
   card does not resize when the real player replaces it. */
.cr-video-processing {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 0 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2, var(--bg));
  margin-bottom: 16px;
}
.cr-video-processing-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.cr-video-processing-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  max-width: 46ch;
  line-height: 1.5;
}

.cr-video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
}
.cr-video-wrap .cr-native-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  margin-bottom: 0;
}
.cr-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #0d0f1e 0%, #090b14 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  z-index: 4;
}
.cr-video-poster-logo {
  max-width: 220px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}
.cr-video-subtitle {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 6px;
}
.cr-video-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.12);
  border: 2px solid rgba(99, 102, 241, 0.4);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  outline: none;
}
.cr-video-play-btn:hover,
.cr-video-overlay:hover .cr-video-play-btn {
  background: rgba(99, 102, 241, 0.28);
  border-color: #6366f1;
  box-shadow: 0 0 28px rgba(99, 102, 241, 0.55), 0 0 60px rgba(99, 102, 241, 0.2);
  transform: scale(1.08);
}
.cr-video-play-btn:active { transform: scale(0.97); }
.cr-video-play-btn svg { transform: translateX(2px); }

/* ============================================================
   VIDEO RECORDER (.vr-*)
   ============================================================ */

/* Setup panel */
.vr-setup-section {
  margin-bottom: 16px;
}
.vr-setup-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.vr-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 3px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.vr-close-btn:hover { color: var(--text); }

/* Mode / size pills */
.vr-pill-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.vr-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.vr-pill:hover { border-color: var(--primary); color: var(--text); }
.vr-pill--active {
  border-color: var(--primary);
  background: var(--primary-dim);
  color: var(--primary);
  font-weight: 500;
}

/* Mic dropdown */
.vr-select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 9px 12px;
  font-size: var(--fs-sm);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
}
.vr-select:focus { outline: none; border-color: var(--primary); }

/* Start button */
.vr-start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 4px;
}
.vr-start-btn:hover:not(:disabled) { opacity: 0.88; }
.vr-start-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Setup preview ─────────────────────────────────────── */
.vr-preview-section { margin-bottom: 0; }

.vr-cam-preview-wrap {
  position: relative;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  aspect-ratio: 16 / 9;
}
.vr-cam-preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  border-radius: 8px;
}
.vr-cam-preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Audio meter */
.vr-audio-meter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--text-muted);
}
.vr-meter-track {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.vr-meter-fill {
  height: 100%;
  width: 0%;
  background: #22c55e;
  border-radius: 3px;
  transition: width 0.08s ease-out, background 0.15s;
}
.vr-meter-level {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  min-width: 40px;
  text-align: right;
}

/* Countdown GO flash */
.vr-countdown-go {
  color: #22c55e !important;
  animation: vr-go-pulse 0.35s ease-out;
}
@keyframes vr-go-pulse {
  0%   { transform: scale(0.6); opacity: 0.5; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Setup hint */
.vr-setup-hint {
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  line-height: 1.5;
}

/* Active recording panel */
.vr-status-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}
.vr-rec-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--danger, #ef4444);
  animation: vr-pulse 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
.vr-rec-dot--paused {
  background: var(--text-muted);
  animation: none;
}
@keyframes vr-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}
.vr-rec-label {
  font-size: var(--fs-xs);
  color: var(--danger, #ef4444);
  font-weight: 500;
}
.vr-rec-timer {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.vr-recording-hint {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  line-height: 1.5;
  margin-top: 8px;
}

/* Floating camera bubble — appears in recording as the camera overlay */
.vr-bubble {
  position: fixed;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  z-index: 9500;
  cursor: grab;
  user-select: none;
  border: 2px solid rgba(255,255,255,0.2);
  background: #000;
  transition: border-radius 0.2s ease;
}
.vr-bubble:active { cursor: grabbing; }
.vr-bubble-cam-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  transition: border-radius 0.2s ease, width 0.25s ease, height 0.25s ease;
}
.vr-bubble-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Circle variant */
.vr-bubble--circle { border-radius: 50%; }
.vr-bubble--circle .vr-bubble-cam-wrap { border-radius: 50%; }

/* ── Loom-style control bar on camera bubble ───────────────── */
.vr-bubble-controls {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 8px;
  background: rgba(12, 14, 22, 0.82);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  backdrop-filter: blur(14px);
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  cursor: default;
}
.vr-bubble-controls-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  padding: 0;
  flex-shrink: 0;
}
.vr-bubble-controls-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.vr-bubble-controls-btn--stop {
  background: #ef4444;
  color: #fff;
}
.vr-bubble-controls-btn--stop:hover { background: #dc2626; }
.vr-bubble-controls-timer {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  min-width: 38px;
  text-align: center;
  padding: 0 2px;
}
.vr-bubble-controls-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: vr-pulse 1.2s ease-in-out infinite;
}
.vr-bubble-controls-dot--paused {
  background: rgba(255,255,255,0.4);
  animation: none;
}
.vr-bubble-controls-divider {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.12);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Timer warning — last 30 seconds */
.vr-timer-warning {
  color: #ef4444 !important;
  animation: vr-timer-flash 0.8s ease-in-out infinite;
}
@keyframes vr-timer-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Size/shape popover — appears on hover above the bubble ── */
.vr-bubble-options {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px 12px;          /* extra bottom padding bridges the gap to the bubble */
  background: transparent;         /* transparent wrapper; inner bar has the bg */
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.vr-bubble-options-inner {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  background: rgba(12, 14, 22, 0.88);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  backdrop-filter: blur(14px);
}
.vr-bubble:hover .vr-bubble-options {
  opacity: 1;
  pointer-events: auto;
}
.vr-bubble-opt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 7px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.65);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.vr-bubble-opt-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.vr-bubble-opt-btn--active { background: rgba(255,255,255,0.15); color: #fff; }

/* Drawing toolbar — below the bubble */
.vr-bubble-draw-bar {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.vr-bubble:hover .vr-bubble-draw-bar {
  opacity: 1;
  pointer-events: auto;
}
.vr-draw-color {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
  padding: 0;
  flex-shrink: 0;
}
.vr-draw-color:hover { transform: scale(1.15); border-color: rgba(255,255,255,0.5); }
.vr-draw-color--active {
  border-color: #fff;
  transform: scale(1.2);
  box-shadow: 0 0 6px rgba(255,255,255,0.4);
}

/* Full-viewport drawing overlay canvas — always visible, pointer-events toggled by JS */
.vr-drawing-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10001;
  pointer-events: none;
  touch-action: none;
}

/* Voice recording indicator */
.vr-voice-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px 16px;
  gap: 14px;
}
.vr-voice-waves {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 44px;
}
.vr-wave {
  width: 4px;
  border-radius: 3px;
  background: var(--danger, #ef4444);
  animation: vr-wave-pulse 0.75s ease-in-out infinite;
}
.vr-wave:nth-child(1) { height: 14px; animation-delay: 0s; }
.vr-wave:nth-child(2) { height: 26px; animation-delay: 0.12s; }
.vr-wave:nth-child(3) { height: 44px; animation-delay: 0.24s; }
.vr-wave:nth-child(4) { height: 26px; animation-delay: 0.36s; }
.vr-wave:nth-child(5) { height: 14px; animation-delay: 0.48s; }
@keyframes vr-wave-pulse {
  0%, 100% { transform: scaleY(0.45); opacity: 0.45; }
  50%       { transform: scaleY(1);   opacity: 1; }
}

/* Voice audio preview */
.vr-preview-audio {
  width: 100%;
  border-radius: 8px;
  display: block;
  margin-bottom: 4px;
}

/* Camera bubble — full bubble is draggable, no separate handle */

/* Inline recording controls (inside the right-column panel) */
.vr-inline-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.vr-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.vr-toolbar-btn:hover { background: var(--surface-3, #2a2e3d); }
.vr-btn-stop {
  background: var(--danger, #ef4444);
  border-color: var(--danger, #ef4444);
  color: #fff;
}
.vr-btn-stop:hover { opacity: 0.88; background: var(--danger, #ef4444); }
.vr-btn-cancel {
  color: var(--text-muted);
  border-color: transparent;
  background: transparent;
}
.vr-btn-cancel:hover { color: var(--text); background: var(--surface-2); }

/* Inline camera preview for camera-only mode */
.vr-inline-cam-wrap {
  margin: 12px 0 4px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16/9;
}
.vr-inline-cam-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Preview panel */
.vr-preview-video-wrap {
  margin-bottom: 14px;
}
.vr-preview-video {
  width: 100%;
  border-radius: 8px;
  background: #000;
  display: block;
  max-height: 280px;
}
.vr-preview-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.vr-preview-actions .btn-primary { margin-left: auto; }

/* Upload progress */
.vr-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 4px;
}
.vr-upload-bar-wrap {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.vr-upload-bar {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.3s ease;
  width: 0%;
}
.vr-upload-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 100px;
  text-align: right;
}

.cr-editor-notes-area { margin-bottom: 20px; }
.cr-editor-notes-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.cr-optional {
  font-size: var(--fs-xs);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-subtle);
}
.cr-editor-textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 10px 12px;
  font-size: var(--fs-base);
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  transition: border-color 0.15s;
}
.cr-editor-textarea::placeholder { color: var(--text-subtle); }
.cr-editor-textarea:focus { outline: none; border-color: var(--primary); }

.cr-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* ── Clients view entrance animation ────────────────────────── */
@keyframes clientFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* View header (h1 + action bar) slides up first */
#view-clients.view-enter .view-header {
  animation: clientFadeUp 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Table header row comes in slightly after */
#view-clients.view-enter #clients-thead tr {
  animation: clientFadeUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.09s both;
}
/* Each body row staggers in, capped so large lists don't drag */
#view-clients.view-enter .client-row {
  animation: clientFadeUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--row-i, 0) * 28ms + 150ms);
}
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  #view-clients.view-enter .view-header,
  #view-clients.view-enter #clients-thead tr,
  #view-clients.view-enter .client-row { animation: none; }
}

/* Name cell — larger, heavier weight to lead the row */
.col-name { min-width: 140px; }
.col-name .client-name-link {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
}
.col-actions { display: flex; gap: 6px; }

.empty-cell {
  text-align: center;
  color: var(--text-subtle);
  padding: 40px !important;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: capitalize;
}

.badge-active              { background: var(--success-dim); color: var(--success); }
.badge-cancelled           { background: var(--danger-dim);  color: var(--danger); }
.badge-pending_cancellation { background: rgba(245,158,11,0.15); color: rgb(245,158,11); }
.badge-paused              { background: rgba(59,130,246,0.12); color: #3b82f6; }
.badge-lead                { background: var(--surface-2); color: var(--text-muted); }

.badge-service {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
}
.badge-service--online     { background: var(--primary-dim); color: var(--primary); }
.badge-service--hybrid     { background: rgba(245,158,11,0.12); color: #f59e0b; }
.badge-service--in-person  { background: rgba(34,197,94,0.12); color: #22c55e; }

.renewal-flag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--warning-dim);
  color: var(--warning);
}
.renewal-flag.urgent      { background: var(--danger-dim);  color: var(--danger); }
.renewal-flag.continuity  { background: var(--primary-dim); color: var(--primary); }
.renewal-flag.cancels     { background: var(--warning-dim); color: var(--warning); }

.cell-empty { color: var(--text-subtle); font-weight: 400; }

.text-ok      { color: var(--success); font-size: var(--fs-sm); font-weight: 500; }
.text-cancel  { color: var(--danger);  font-size: var(--fs-sm); font-weight: 500; }
.text-muted-c { color: var(--text-muted); }

/* ============================================================
   RENEWALS VIEW
   ============================================================ */
.renewals-summary {
  color: var(--text-muted);
  margin-bottom: 20px;
  font-size: var(--fs-sm);
}

.renewals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.renewal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.renewal-card--urgent { border-color: var(--danger); }

.renewal-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
}

.renewal-card-name {
  font-size: var(--fs-lg);
  font-weight: 500;
}

.renewal-days {
  font-size: var(--fs-xs);
  font-weight: 500;
  flex-shrink: 0;
}

.text-warning { color: var(--warning); }
.text-urgent  { color: var(--danger); }

.renewal-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.renewal-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-sm);
}

.detail-label { color: var(--text-muted); }
.detail-value { font-weight: 500; }

.renewal-card-actions { display: flex; gap: 8px; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  padding: 16px 0;
  text-align: center;
}

.empty-state-large {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: var(--text-subtle);
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal-overlay.hidden { display: none; }

/* Confirm/alert dialogs must sit above every App Studio modal (e.g. the
   Automation setup modal at z-index 100001) — otherwise their OK button and
   "saved" confirmation render behind it and it looks like nothing happened. */
.crm-dialog-overlay { z-index: 100002; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 780px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}

.modal-header h2 { font-size: var(--fs-xl); font-weight: 500; }

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-3xl);
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.modal-close:hover { background: var(--surface-hover); color: var(--text); }

.modal-form { padding: 14px 24px 20px; }

.form-section-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-subtle);
  margin: 18px 0 10px;
}
.form-section-label:first-child { margin-top: 0; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

/* Full-width row that uses flex so columns can have fixed/variable widths */
.form-row-flex {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  margin-top: 22px;
}
.form-row-flex .form-group { flex: 1; min-width: 0; margin-top: 0; }
.form-row-flex .form-group.col-state { flex: 0 0 76px; }
.form-row-flex .form-group.col-zip   { flex: 0 0 100px; }

.form-group { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; }
.form-col-2 { grid-column: 1 / -1; }

.form-group label {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-muted);
}

.required { color: var(--primary); }

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 11px 13px;
  font-size: var(--fs-md);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--primary); }

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-subtle); }

.form-group select option { background: var(--surface-2); }

.form-group textarea { resize: vertical; min-height: 56px; }

/* Currency prefix input */
.input-currency-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.input-currency-prefix {
  display: flex;
  align-items: center;
  padding: 0 10px 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: 500;
  pointer-events: none;
  flex-shrink: 0;
}
.input-currency-wrap input {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  flex: 1;
  min-width: 0;
}
.input-currency-wrap:focus-within .input-currency-prefix {
  border-color: var(--primary);
}

.hidden { display: none !important; }

/* Text for screen readers only — present in the accessibility tree, invisible
   and zero-footprint on screen. Use it where a tooltip carries meaning the
   visible text does not: `data-tip` is a plain attribute, so unlike `title` it
   is not announced, and an `aria-label` on a plain span or cell is ignored
   outright. Never `display: none` — that hides it from readers too. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 20px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  background: var(--surface);
}

/* Styled confirm/prompt dialog — replaces the native browser confirm()/prompt()
   so the admin panel + CRM stay on-brand. Reuses the .modal-overlay backdrop;
   global (not view-scoped) so it renders correctly when appended to <body>. */
.crm-dialog { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  width: 100%; max-width: 440px; padding: 22px 24px; box-shadow: var(--shadow); }
.crm-dialog-title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.crm-dialog-msg { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; margin: 8px 0 0; }
/* Lead variant — a title-less alert, where the message IS the main text. */
.crm-dialog-msg--lead { font-size: var(--fs-base); color: var(--text); margin: 0; white-space: pre-line; }
.crm-dialog-input { width: 100%; margin-top: 14px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 9px 11px; font-size: var(--fs-base);
  font-family: inherit; resize: vertical; }
.crm-dialog-input:focus { border-color: var(--primary); outline: none; }
.crm-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* Modal form actions row (Cancel + Submit inside the form) */
.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}

#btn-save {
  width: 100%;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 18px 18px;
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  cursor: pointer;
  transition: background 0.15s;
  order: -1; /* submit above cancel */
}
#btn-save:hover { background: var(--primary-hover); }
#btn-save:disabled { background: var(--primary-hover); opacity: 0.6; cursor: not-allowed; }

#btn-cancel {
  width: 100%;
  text-align: center;
}

/* One-off charge modal: pick a saved card, or add a new one. Flat rows in
   the CRM idiom. Selection must read at a GLANCE, not only in the 14px radio
   dot — the checked row gets a sapphire border + faint tint (dot + border,
   never colour alone). */
.co-card-list { display: flex; flex-direction: column; gap: 6px; }
.co-card-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); cursor: pointer; font-size: 13px; color: var(--text);
  transition: border-color 0.12s, background 0.12s;
}
.co-card-row:hover { border-color: var(--border-strong, var(--border)); }
.co-card-row:has(input:checked) {
  border-color: var(--primary);
  background: rgba(37, 87, 214, 0.07);
}
.co-card-row:focus-within { outline: 2px solid var(--primary); outline-offset: -2px; }
.co-card-row input[type="radio"] { accent-color: var(--primary); margin: 0; }
/* Brand names arrive lowercase from Stripe ('visa') — capitalize. The New
   card row uses co-card-label instead, so it stays sentence case. */
.co-card-row .co-card-brand { text-transform: capitalize; font-weight: 500; }
.co-card-row .co-card-label { font-weight: 500; }
.co-card-row .co-card-num { font-variant-numeric: tabular-nums; }
.co-card-row .co-card-exp { color: var(--text-muted); font-size: 12px; margin-left: auto; font-variant-numeric: tabular-nums; }
/* "Default" is information, not a state — quiet text, not a competing badge. */
.co-card-row .co-card-default { color: var(--text-muted); font-size: 12px; }
.co-card-loading { color: var(--text-muted); font-size: 12px; padding: 6px 2px; }
/* The new-card field reads as a CONTINUATION of its row — indented under the
   radio column, not a stray box floating below the group. */
.co-new-card { margin: 6px 0 0 26px; }
.co-new-card.hidden { display: none; }
#co-stripe-card-element {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 12px; min-height: 46px;
}
#co-stripe-card-element:focus-within { border-color: var(--primary); }

/* Money is typed against a $ that lives IN the field — full-width box,
   left-aligned tabular numerals, not a centered number. Doubled selector so
   it outranks the record-payment modal's own input styling. */
.record-payment-modal .co-amount-wrap { position: relative; }
.record-payment-modal .co-amount-wrap input,
.co-amount-wrap input {
  width: 100%; text-align: left; padding-left: 26px;
  font-variant-numeric: tabular-nums; font-size: 15px;
}
.co-amount-sym {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 14px; pointer-events: none;
}

/* Account tab: cards-on-file block inside the Stripe card. Flat detail rows;
   the section heads get a little air above so the three groups read apart. */
.cards-on-file-h { margin-top: 10px; }
.cards-usage-val { display: inline-flex; align-items: center; gap: 8px; }
.cards-usage-val .custom-select { min-width: 110px; }
select.cards-switch { font-size: 12px; }

/* ============================================================
   STRIPE ELEMENTS
   ============================================================ */
.stripe-card-element {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px 16px;
  min-height: 60px;
  margin-top: 28px;
  transition: border-color 0.15s;
}

.stripe-card-element:focus-within {
  border-color: var(--primary);
}

.stripe-error {
  color: var(--danger);
  font-size: var(--fs-xs);
  margin-top: 6px;
}

.stripe-card-errors {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 11px 14px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: var(--radius-sm);
  color: #f87171;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
}
.stripe-card-errors::before {
  content: '⚠';
  font-size: var(--fs-md);
  flex-shrink: 0;
  margin-top: 1px;
}

.charge-summary {
  background: var(--primary-dim);
  border: 1px solid rgba(37, 87, 214, 0.2);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-top: 28px;
  margin-bottom: 12px;
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(37, 87, 214, 0.08);
}
.charge-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.charge-summary .amount {
  color: var(--primary);
  font-size: var(--fs-4xl);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 2px;
}
.charge-amount-sub {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 2px;
}
.charge-notes {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(37, 87, 214, 0.15);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast-stack {
  position: fixed; bottom: 24px; right: 24px; z-index: 1000;
  display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none;
}
.toast {
  padding: 12px 20px;
  border-radius: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  animation: fadeInUp 0.25s ease;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  max-width: 400px;
}

.toast-success { background: var(--success); color: #fff; }
.toast-error   { background: var(--danger);  color: #fff; }
.toast-warning { background: #eab308; color: #18181b; }
.toast-info    { background: var(--surface); color: var(--text); border: 1px solid var(--border); }

/* Undo toast (delete-with-undo) — needs pointer events for the button. */
.toast--undo { pointer-events: auto; display: flex; align-items: center; gap: 12px; }
.toast--undo .toast-msg { flex: 1; }
.toast-undo-btn {
  flex-shrink: 0;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: #5a86f5;
  font: inherit; font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.toast-undo-btn:hover { background: rgba(90, 134, 245, 0.14); }
/* Bulk-delete confirm: the list of clients whose Stripe subs will be cancelled. */
.del-sub-list { margin: 8px 0 4px; padding-left: 18px; font-size: var(--fs-sm); color: var(--text); }
.del-sub-list li { margin: 3px 0; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   CONFIRM DIALOG
   ============================================================ */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.confirm-overlay.hidden { display: none; }

.confirm-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  max-width: 360px;
  width: 100%;
  box-shadow: var(--shadow);
}

.confirm-dialog p {
  margin-bottom: 20px;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.5;
}

.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ── Confirm-dialog choice rows (e.g. card-update send channels) ──
   Circular control, and the option NAME sits on its own line above the
   address / reason — so the method and its detail read as two different
   things instead of one run-on line.

   ⚠️ These rows live inside #confirm-choices-group, which is a .form-group, so
   `.form-group input` (0,1,1) — border-radius/padding/background for TEXT
   fields — outranks a bare `.choice-dot` (0,1,0) no matter the source order.
   Every control rule is therefore scoped `.choice-opt .choice-dot` (0,2,0) and
   explicitly resets padding/background/radius. Don't drop the ancestor. */
.choice-opt { display: flex; align-items: flex-start; gap: 11px; padding: 7px 0; cursor: pointer; }
.choice-opt.is-disabled { cursor: not-allowed; }
.choice-opt .choice-dot {
  appearance: none; -webkit-appearance: none;
  box-sizing: border-box;
  width: 18px; height: 18px; flex: 0 0 18px;
  margin: 0; padding: 0;
  border: 1.5px solid var(--border); border-radius: 50%;
  background: transparent; cursor: inherit;
  transition: border-color .12s ease, background-color .12s ease;
}
.choice-opt:not(.is-disabled):hover .choice-dot { border-color: var(--text-subtle); }
/* Stroked path, not the rotated-border trick: round caps and a 1.5 stroke match
   the app's Feather icons (2 on a 24 viewBox → 1.5 at 18px). Square-cut 2px
   borders read bulky at this size. The path is centred in the viewBox, so it
   needs no nudging. */
.choice-opt .choice-dot:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.9 9.2l2.6 2.6 5.6-5.6' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}
.choice-opt .choice-dot:disabled { border-color: var(--border-light); background: transparent; }
.choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-name { font-size: 14px; color: var(--text); line-height: 1.35; }
.choice-detail { font-size: 12px; color: var(--text-subtle); line-height: 1.35; }
/* Disabled rows step DOWN one rung as a PAIR, so the name-over-detail contrast
   survives instead of both tones flattening into one. Italic marks the second
   line as a reason rather than an address. */
.choice-opt.is-disabled .choice-name { color: var(--text-muted); }
.choice-opt.is-disabled .choice-detail { font-style: italic; }
/* The 360px default squeezes a channel list into a column; widen ONLY dialogs
   that render choices, so every other confirm dialog keeps its size. */
.confirm-dialog.has-choices { max-width: 440px; }
#confirm-choices-group { margin: 0 0 4px; }

/* ============================================================
   MODE BADGE (sidebar)
   ============================================================ */
.mode-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
  width: 100%;
}

.mode-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mode-badge--live { background: var(--success-dim); color: var(--success); }
.mode-badge--live .mode-badge-dot { background: var(--success); }

.mode-badge--test { background: var(--warning-dim); color: var(--warning); }
.mode-badge--test .mode-badge-dot { background: var(--warning); }

/* ============================================================
   TEST MODE BANNER (modal)
   ============================================================ */
.test-mode-banner {
  background: var(--warning-dim);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-sm);
  color: var(--warning);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 9px 14px;
  margin-bottom: 16px;
  text-align: center;
  letter-spacing: 0.3px;
}

/* ============================================================
   SETTINGS VIEW
   ============================================================ */
/* ── Settings tabs ─────────────────────────────────────────── */
.settings-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
  gap: 0;
}
.settings-tab-btn {
  padding: 10px 22px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--text-secondary);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.settings-tab-btn:hover { color: var(--text-primary); }
.settings-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 500;
}
.settings-tab-panel {
  display: none;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}
.settings-tab-panel.active { display: flex; }

/* Communications panel — same width as other settings tabs so the
   event list reads as a tight column, not a sparse matrix. */
#settings-tab-communications { max-width: 720px; }

/* ── Communications matrix ─────────────────────────────────── */
/* Single outer card holds everything. Audience sections are inline
   inside, separated by whitespace + an h2 header. Categories within
   each audience are tiny uppercase eyebrows. */
.comms-matrix-shell {
  padding: 0 !important;
}
.comms-matrix-toolbar {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap;
}
.comms-matrix-search {
  flex: 1; min-width: 220px; max-width: 360px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 11px;
}
.comms-matrix-search-icon { color: var(--text-muted); font-size: 13px; }
.comms-matrix-search input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--text-primary); font-size: 13px; font-family: inherit;
}
.comms-matrix-search input::placeholder { color: var(--text-muted); }
.comms-matrix-filter-chips { display: flex; gap: 6px; }
.comms-matrix-filter-chip {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 11px; font-weight: 600;
  padding: 5px 10px; border-radius: 6px; cursor: pointer;
  font-family: inherit;
}
.comms-matrix-filter-chip:hover { color: var(--text-primary); }
.comms-matrix-filter-chip.active {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}
.comms-matrix-inner {
  padding: 0;
  /* The list scrolls inside the card so the search/filter toolbar stays put
     and the column header can pin. max-height is tunable to the layout. */
  overflow-y: auto;
  /* Sized so the card fits inside .views-container (the main scroll area)
     with no outer scroll. The offset is fixed chrome + footer, so it holds
     across viewport heights. */
  max-height: calc(100vh - 314px);
  overscroll-behavior: contain;
}

/* Audience section — inline within the outer card. */
.comms-audience { padding: 0 0 8px; }
.comms-audience + .comms-audience { border-top: 1px solid var(--border); }

.comms-audience-header {
  display: flex; align-items: baseline; gap: 14px;
  padding: 20px 20px 12px;
}
.comms-audience-header h2 {
  font-size: 16px; font-weight: 600; letter-spacing: -0.014em;
  margin: 0; color: var(--text-primary);
}
.comms-audience-meta {
  font-size: 11px; color: var(--text-muted);
  letter-spacing: 0.04em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Category eyebrow — small uppercase label with a top gap. Acts as
   a visual scan-anchor without taking a full row. */
.comms-cat-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 20px 20px 6px;
}
.comms-cat-eyebrow.first { padding-top: 10px; }

.comms-event-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, 52px) 40px;
  align-items: center; column-gap: 12px;
  padding: 11px 20px;
  cursor: pointer;
  transition: background 0.12s ease;
}
/* Channel toggles + the column header share ONE template, so each label
   sits exactly above its toggle. Email/SMS/Push/In-app map to cols 2–5. */
.comms-event-row > [data-ch="email"], .comms-colhead > [data-ch="email"] { grid-column: 2; }
.comms-event-row > [data-ch="sms"],   .comms-colhead > [data-ch="sms"]   { grid-column: 3; }
.comms-event-row > [data-ch="push"],  .comms-colhead > [data-ch="push"]  { grid-column: 4; }
.comms-event-row > [data-ch="inapp"], .comms-colhead > [data-ch="inapp"] { grid-column: 5; }
.comms-rowactions { grid-column: 6; display: flex; align-items: center; justify-content: flex-end; gap: 2px; }

/* Column header — channel names once, aligned to the toggle columns. */
.comms-colhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, 52px) 40px;
  column-gap: 12px; align-items: center;
  padding: 10px 20px 9px;
  border-bottom: 1px solid var(--border);
  /* Pin the channel labels as the section's rows scroll past. */
  position: sticky; top: 0; z-index: 5;
  background: var(--surface);
}
.comms-colhead > [data-ch] {
  justify-self: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
}
.comms-event-row:hover { background: var(--surface-2, var(--surface)); }
.comms-event-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
/* Static rows (coach-facing events) — no modal, just pills + kebab.
   Cursor stays default; the pills + kebab keep their own pointer cursors.
   Chevron is rendered but hidden so the pill grid stays aligned across
   coach and client rows. */
.comms-event-row-static { cursor: default; }
.comms-event-row-static:focus-visible { outline: none; }
.comms-event-row-static .comms-chevron {
  visibility: hidden;
  pointer-events: none;
}
.comms-event-title {
  grid-column: 1; min-width: 0;
  font-size: 13.5px; font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 8px;
}

/* "Customized" badge appears beside titles whose templates have been
   overridden. Subtle brand-tinted pill, sized smaller than channel pills. */
.comms-customized-badge {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  flex-shrink: 0;
  cursor: help;
}
/* Neutral variant — for informational row badges like "Manual", which mark a
   send the coach triggers by hand (no standing toggle). */
.comms-customized-badge.muted {
  color: var(--text-muted);
  background: transparent;
  border-color: var(--border);
}

/* Kebab button — opens the row's bulk-action menu. Hidden until row hover. */
.comms-row-kebab {
  background: none; border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px; line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: inherit;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.comms-event-row:hover .comms-row-kebab,
.comms-event-row:focus-visible .comms-row-kebab,
.comms-row-kebab[aria-expanded="true"] { opacity: 1; }
.comms-row-kebab:hover {
  background: var(--surface-2, var(--surface));
  color: var(--text-primary);
}
.comms-row-kebab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.comms-chevron {
  color: var(--text-muted);
  font-size: 16px; line-height: 1;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.comms-event-row:hover .comms-chevron,
.comms-event-row:focus-visible .comms-chevron { opacity: 1; }

/* Row bulk-action menu — appears below the kebab, anchored to the row's
   right edge. */
.comms-row-menu {
  position: absolute;
  top: calc(100% - 4px);
  right: 20px;
  z-index: 10;
  min-width: 180px;
  display: flex; flex-direction: column;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
}
.comms-row-menu button {
  background: transparent; border: 0;
  color: var(--text-primary);
  text-align: left;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.comms-row-menu button:hover {
  background: var(--surface-2, var(--surface));
}
.comms-row-menu button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Channel toggle cell — label-less (the column header names it). State
   reads from FILL + GLYPH, never colour alone (accessible for a colorblind
   reader): on = filled + ✓ · off = hollow + faint dot · coming-soon =
   dashed & greyed · N/A = a muted dash. Fixed size keeps columns clean. */
.comms-pill {
  justify-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 22px;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s ease;
}
.comms-pill::before {
  content: ''; width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor; opacity: 0.45;
}
.comms-pill:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}
.comms-pill.on {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  color: var(--primary);
}
.comms-pill.on::before {
  content: '✓'; width: auto; height: auto; border-radius: 0;
  background: none; opacity: 1; font-size: 12px; font-weight: 800; line-height: 1;
}
.comms-pill.locked {
  border-style: dashed;
  cursor: not-allowed;
  opacity: 0.5;
}
.comms-pill.locked:hover { border-color: var(--border); color: var(--text-muted); }
.comms-pill:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* N/A — channel doesn't apply to this event. A calm dash keeps the column
   honest without reading as "off". */
.comms-na {
  justify-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 22px;
  color: var(--text-muted); opacity: 0.35;
  font-size: 13px; line-height: 1;
}
/* Notice banner shown inside the outer card, above the audience sections,
   when SMS isn't set up. */
.comms-sms-notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 20px;
  background: color-mix(in srgb, var(--warning-fg, #fbbf24) 7%, transparent);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.comms-sms-notice-dot {
  color: var(--warning-fg, #fbbf24);
  font-size: 11px;
  line-height: 1.5;
  flex-shrink: 0;
}
.comms-sms-notice strong { color: var(--text-primary); font-weight: 600; }
.comms-sms-notice-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.comms-sms-notice-link:hover { text-decoration: underline; }

/* ── Comms template editor modal ───────────────────────────── */
body.comms-tpl-open { overflow: hidden; }
.comms-tpl-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.comms-tpl {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 95vw;
  max-width: 1400px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.20);
}
.comms-tpl-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.comms-tpl-titles { flex: 1; min-width: 0; }
.comms-tpl-eyebrow {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px;
}
.comms-tpl-header h2 {
  font-size: 18px; font-weight: 600; letter-spacing: -0.014em;
  margin: 0 0 4px; color: var(--text-primary);
}
.comms-tpl-sub {
  font-size: 13px; color: var(--text-muted); margin: 0;
}
.comms-tpl-close {
  background: transparent; border: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  color: var(--text-muted); cursor: pointer;
  font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; flex-shrink: 0;
}
.comms-tpl-close:hover { background: var(--surface-2); color: var(--text-primary); }

.comms-tpl-tabs {
  display: flex; gap: 4px;
  padding: 6px 24px 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.comms-tpl-tab {
  background: transparent; border: 0;
  color: var(--text-muted);
  padding: 9px 14px 11px;
  margin-bottom: -1px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 2px solid transparent;
  font-family: inherit;
}
.comms-tpl-tab:hover { color: var(--text-primary); }
.comms-tpl-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
.comms-tpl-tab.locked::after {
  content: 'setup';
  background: var(--surface-2); color: var(--text-muted);
  font-size: 8px; font-weight: 700;
  padding: 1px 5px; border-radius: 4px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.comms-tpl-tab-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
}

.comms-tpl-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.comms-tpl-loading {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  grid-column: 1 / -1;
}
.comms-tpl-editor {
  padding: 20px 24px 24px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.comms-tpl-editor h3 {
  margin: 0 0 14px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-muted);
}
.comms-tpl-field { margin-bottom: 14px; }
.comms-tpl-field-label {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--text-secondary);
}
.comms-tpl-counter {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.comms-tpl-counter.warn { color: var(--warning-fg, #fbbf24); }
.comms-tpl-counter.danger { color: var(--danger-fg, #f87171); }
.comms-tpl-input, .comms-tpl-textarea {
  width: 100%;
  padding: 8px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-primary);
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.5;
}
.comms-tpl-textarea {
  resize: vertical;
  min-height: 90px;
  font-family: inherit;
}
.comms-tpl-input:focus, .comms-tpl-textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
}
.comms-tpl-field-help {
  font-size: 11.5px; color: var(--text-muted);
  margin-top: 6px;
}
.comms-tpl-merge-tags {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 6px;
}
.comms-merge-tag {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11px; font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: 'SF Mono', Menlo, monospace;
  white-space: nowrap;
}
.comms-merge-tag:hover {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--text-muted);
}
.comms-tpl-sms-meta {
  display: flex; gap: 14px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.comms-tpl-sms-meta strong { color: var(--text-primary); }
.comms-tpl-locked-notice {
  padding: 12px 14px;
  margin-bottom: 16px;
  background: color-mix(in srgb, var(--warning-fg, #fbbf24) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning-fg, #fbbf24) 35%, var(--border));
  border-radius: 8px;
  font-size: 12.5px; line-height: 1.55;
  color: var(--text-secondary);
}
.comms-tpl-locked-notice strong {
  display: block; color: var(--text-primary); margin-bottom: 4px;
}

/* Preview pane */
.comms-tpl-preview {
  padding: 20px 22px 24px;
  background: var(--surface-2, var(--surface));
  overflow-y: auto;
}
.comms-tpl-preview-header {
  margin-bottom: 14px;
  display: flex; align-items: baseline;
}
.comms-tpl-preview-header h3 {
  margin: 0;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text-muted);
}

/* Small "Notification banner" / "Messages app" label next to "Preview" */
.comms-tpl-preview-context {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
  margin-left: 10px;
}

/* Preview-controls cluster (device toggle + "Preview as" picker) */
.comms-tpl-preview-controls {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 10px;
}
.comms-tpl-preview-as {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-muted);
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.comms-tpl-preview-as select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 4px 26px 4px 8px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.comms-tpl-preview-as select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
}

/* Desktop / Mobile preview toggle (email tab) */
.comms-tpl-preview-device {
  display: inline-flex; gap: 4px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
}
.comms-tpl-device-btn {
  background: transparent; border: 0;
  padding: 4px 10px;
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
}
.comms-tpl-device-btn:hover { color: var(--text-primary); }
.comms-tpl-device-btn.active {
  background: var(--surface-2, var(--surface));
  color: var(--text-primary);
}

/* Phone frame — upper half of a phone, theme-aware. Used for Push,
   SMS, and In-app previews + for the Mobile email preview. */
.comms-tpl-phone-half {
  margin: 0 auto;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top-left-radius: 36px;
  border-top-right-radius: 36px;
  padding: 14px 14px 56px;
  position: relative;
  box-shadow: 0 12px 32px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.03);
}
/* Soft fade at the bottom so the frame doesn't feel cut off harshly */
.comms-tpl-phone-half::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48px;
  background: linear-gradient(180deg, transparent 0%, var(--surface) 100%);
  pointer-events: none;
}
.comms-tpl-phone-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 14px;
  margin-bottom: 14px;
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
}
.comms-tpl-phone-status-right {
  font-size: 9px; letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Push preview — notification banner card, nests inside .comms-tpl-phone-half. */
.comms-tpl-push-banner {
  margin: 0 8px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.comms-tpl-push-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.comms-tpl-push-icon {
  width: 18px; height: 18px;
  border-radius: 5px;
  background: var(--primary);
  flex-shrink: 0;
}
.comms-tpl-push-app {
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  flex: 1;
}
.comms-tpl-push-time {
  font-size: 11px;
  color: var(--text-muted);
}
.comms-tpl-push-title {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 2px;
}
.comms-tpl-push-body {
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

/* SMS preview — Messages-app interior, theme-aware. Nests inside phone-half. */
.comms-tpl-sms-app {
  margin: 0 8px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.comms-tpl-sms-app-header {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--surface-2, var(--surface));
  border-bottom: 1px solid var(--border);
  position: relative;
}
.comms-tpl-sms-app-back {
  position: absolute;
  left: 14px;
  color: var(--primary);
  font-size: 18px; font-weight: 500;
  line-height: 1;
}
.comms-tpl-sms-app-name {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
}
.comms-tpl-sms-app-body {
  padding: 16px 14px 18px;
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.comms-tpl-sms-app-time {
  font-size: 11px;
  color: var(--text-muted);
  align-self: center;
  margin-bottom: 4px;
}
.comms-tpl-sms-app-bubble {
  max-width: 240px;
  background: var(--surface-2, var(--surface));
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 16px 16px 16px 4px;
  padding: 9px 13px;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* Email preview card */
.comms-tpl-email-card {
  background: white;
  color: #1a1d28;
  border-radius: 8px;
  overflow: hidden;
  font-family: -apple-system, sans-serif;
}
.comms-tpl-email-from {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px 8px;
  border-bottom: 1px solid #e0e3eb;
}
.comms-tpl-email-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.comms-tpl-email-from-text { font-size: 12.5px; color: #1a1d28; }
.comms-tpl-email-name { font-weight: 600; }
.comms-tpl-email-addr { color: #6b7090; font-size: 11.5px; }
.comms-tpl-email-subject {
  padding: 12px 16px 4px;
  font-size: 15px; font-weight: 600;
  color: #1a1d28;
}
.comms-tpl-email-preheader {
  padding: 0 16px 12px;
  font-size: 12.5px;
  color: #6b7090;
}
.comms-tpl-email-body {
  padding: 18px 18px 20px;
  font-size: 13px;
  line-height: 1.6;
  color: #1a1d28;
  white-space: pre-wrap;
}

/* In-app preview — banner overlaid on a placeholder app screen. */
.comms-tpl-inapp-app {
  margin: 0 8px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  min-height: 240px;
}
.comms-tpl-inapp-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.comms-tpl-inapp-banner-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--primary);
  flex-shrink: 0;
}
.comms-tpl-inapp-banner-text {
  flex: 1;
  font-size: 13px; line-height: 1.4;
  color: var(--text-primary);
  white-space: pre-wrap;
}
.comms-tpl-inapp-app-placeholder {
  padding: 60px 16px;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* Footer */
.comms-tpl-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  gap: 12px;
  flex-shrink: 0;
}
.comms-tpl-footer-left { flex: 1; }
.comms-tpl-footer-right { display: flex; gap: 8px; align-items: center; }
.comms-tpl-reset-wrap { position: relative; }
.comms-tpl-reset-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  z-index: 11;
  min-width: 180px;
  display: flex; flex-direction: column;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
}
.comms-tpl-reset-menu button {
  background: transparent; border: 0;
  color: var(--text-primary);
  text-align: left;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.comms-tpl-reset-menu button:hover {
  background: var(--surface-2, var(--surface));
}

/* Disable Save button when nothing to save */
.comms-tpl-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Read-only editor view for coach-facing events (platform-controlled copy) */
.comms-tpl-platform-notice {
  padding: 11px 14px;
  margin-bottom: 16px;
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-radius: 8px;
  font-size: 12.5px; line-height: 1.55;
  color: var(--text-secondary);
}
.comms-tpl-platform-notice strong {
  display: block; color: var(--text-primary); margin-bottom: 4px;
}
.comms-tpl-readonly-field { margin-bottom: 14px; }
.comms-tpl-readonly-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.comms-tpl-readonly-value {
  padding: 9px 12px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-primary);
}
.comms-tpl-readonly-body { white-space: pre-wrap; min-height: 90px; }

/* TipTap mount container for the email body */
.comms-tpl-tiptap-mount { min-height: 240px; }
.comms-tpl-tiptap-mount .ee-editor-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
}
.comms-tpl-tiptap-mount .ee-content {
  min-height: 200px;
  padding: 11px 13px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-primary);
}

/* Send-test UI in the footer */
.comms-tpl-test-inline {
  display: inline-flex; align-items: center; gap: 6px;
}
.comms-tpl-test-input {
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  min-width: 220px;
}
.comms-tpl-test-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
}
.comms-tpl-test-btn {
  white-space: nowrap;
}

/* ── Toggle switch ─────────────────────────────────────────── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 24px;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.toggle-switch input:checked + .toggle-slider { background: var(--success); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Force off-state appearance (overrides :checked) — used when a
   parent master toggle is off to visually disable children while
   preserving their underlying checked state. */
.toggle-switch.force-off .toggle-slider {
  background: var(--border) !important;
}
.toggle-switch.force-off .toggle-slider::before {
  transform: translateX(0) !important;
}
.toggle-switch.force-off {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Phone verify quota bar ────────────────────────────────── */
.phone-verify-quota { margin-top: 14px; }
.quota-bar-wrap {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.quota-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--success);
  transition: width 0.4s, background 0.3s;
}
.quota-bar.warn   { background: var(--warning); }
.quota-bar.danger { background: var(--danger);  }
#phone-verify-quota-label {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

/* ── Persistent alert banner ───────────────────────────────── */
.alert-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  margin: 0 0 16px;
}
.alert-banner--warning {
  background: var(--warning-dim);
  border: 1px solid rgba(245,158,11,0.4);
  color: var(--warning);
}
.alert-banner span { flex: 1; line-height: 1.5; }
.alert-banner-close {
  background: none;
  border: none;
  color: inherit;
  font-size: var(--fs-2xl);
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  padding: 0 2px;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.alert-banner-close:hover { opacity: 1; }

/* legacy grid no longer used but kept for safety */
.settings-grid { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.settings-col  { display: flex; flex-direction: column; gap: 16px; }

.settings-card { padding: 20px 24px; }

.settings-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 4px;
}

.settings-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.settings-toggle-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}

.settings-note code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: var(--fs-xs);
  color: var(--text);
}

.settings-actions {
  margin-top: 16px;
}

/* ── Settings Metrics Editor (sme-*) ─────────────────────────── */
.sme-list { display: flex; flex-direction: column; gap: 6px; }
.sme-row { background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.sme-main {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
}
.sme-label { flex: 1; font-size: var(--fs-sm); min-width: 0; background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; color: var(--text); }
.sme-target { width: 64px; font-size: var(--fs-sm); background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; color: var(--text); text-align: center; }
.sme-streak { font-size: var(--fs-xs); color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
.sme-streak input { accent-color: var(--primary); }
.sme-expand {
  width: 24px; height: 24px; border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: var(--fs-xs); display: flex; align-items: center; justify-content: center;
  border-radius: 4px; transition: background 0.15s;
}
.sme-expand:hover { background: var(--surface-3); }
.sme-remove, .sme-sub-remove {
  width: 24px; height: 24px; border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: var(--fs-lg); display: flex; align-items: center; justify-content: center;
  border-radius: 4px; transition: background 0.15s, color 0.15s;
}
.sme-remove:hover, .sme-sub-remove:hover { background: var(--danger-dim); color: var(--danger); }

.sme-subs { padding: 4px 10px 8px 32px; display: flex; flex-direction: column; gap: 4px; }
.sme-sub-row { display: flex; align-items: center; gap: 6px; }
.sme-sub-label { flex: 1; font-size: var(--fs-xs); min-width: 0; background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; color: var(--text); }
.sme-sub-target { width: 52px; font-size: var(--fs-xs); background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; color: var(--text); text-align: center; }
.sme-sub-add { display: flex; gap: 6px; margin-top: 4px; }
.sme-sub-add input { flex: 1; font-size: var(--fs-xs); background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; color: var(--text); }

.sme-add-row { display: flex; gap: 8px; margin-top: 10px; }
.sme-add-row input { flex: 1; font-size: var(--fs-sm); background: transparent; border: 1px solid var(--border); border-radius: 4px; padding: 5px 8px; color: var(--text); }

.sme-divider { height: 1px; background: var(--border); margin: 14px 0 10px; }
.sme-section-label { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }

.sme-sync-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.sme-sync-label { font-size: var(--fs-sm); color: var(--text); min-width: 180px; }
.sme-sync-arrow { color: var(--text-muted); font-size: var(--fs-base); }
.sme-sync-select {
  flex: 1; max-width: 180px; font-size: var(--fs-sm); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 4px 8px; color: var(--text); cursor: pointer;
}

[data-theme="light"] .sme-row { background: #f1f5f9; }

/* ── Logo Upload ─────────────────────────────────────────────── */
.logo-upload-area {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 14px;
}
.logo-preview-wrap { flex-shrink: 0; }
.logo-preview-box {
  width: 64px;
  height: 64px;
  background: var(--primary);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: var(--fs-2xl);
  color: #fff;
  overflow: hidden;
  letter-spacing: 0.5px;
}
.logo-preview-box.has-custom-logo { background: var(--surface-2); border: 1px solid var(--border); }
.logo-upload-details { flex: 1; }
.logo-upload-specs {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.logo-upload-specs li {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding-left: 14px;
  position: relative;
}
.logo-upload-specs li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--text-subtle);
}
.logo-upload-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.logo-section-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  margin-top: 18px;
}
.logo-section-sub {
  font-weight: 400;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.logo-section-divider {
  border-top: 1px solid var(--border);
  margin: 20px 0 0;
}

/* Logo dark/light mode toggle */
.logo-mode-toggle {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.logo-mode-btn {
  padding: 4px 12px;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.logo-mode-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.logo-mode-btn.active {
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}

/* Show/hide logo upload panels based on selected mode */
#logo-card[data-logo-mode="dark"]  .logo-light-only { display: none !important; }
#logo-card[data-logo-mode="light"] .logo-dark-only  { display: none !important; }

.logo-variant-ph {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

/* Full logo preview box (wide/horizontal) */
.logo-full-preview-box {
  width: 160px;
  height: 48px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.logo-full-preview-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
#logo-full-preview-placeholder {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  font-weight: 500;
}

/* Sidebar full logo (expanded state) */
.sidebar-brand-full {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-full-logo-img {
  width: 100%;
  height: auto;
  display: block;
}
.sidebar-full-logo-name {
  font-size: clamp(10px, calc(var(--sidebar-w) * 0.052), 18px);
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.13);
  line-height: 1;
  text-align: center;
}
[data-theme="light"] .sidebar-full-logo-name {
  border-top-color: rgba(0,0,0,0.15);
}

/* Hide in expanded sidebar only (still visible when collapsed) */
.sidebar:not(.collapsed) .hide-when-expanded { display: none !important; }

/* Always hide full logo in collapsed mode */
.sidebar.collapsed .sidebar-brand-full { display: none !important; }

.code-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: var(--fs-xs);
  color: var(--success);
  margin-top: 12px;
  line-height: 1.8;
}

/* ============================================================
   MODE TOGGLE (settings page)
   ============================================================ */
.mode-toggle-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mode-toggle-group {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  width: fit-content;
  gap: 3px;
}

.mode-btn {
  padding: 7px 24px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.mode-btn:hover { color: var(--text); }

.mode-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.mode-btn[data-mode="live"].active { color: var(--success); }
.mode-btn[data-mode="test"].active { color: var(--warning); }

.mode-description { font-size: var(--fs-sm); }

.mode-status { font-weight: 500; }
.mode-status--live { color: var(--success); }
.mode-status--test { color: var(--warning); }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}

.login-container {
  width: 100%;
  max-width: 400px;
  padding: 20px;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px;
  box-shadow: var(--shadow);
}

.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-btn {
  width: 100%;
  padding: 11px;
  font-size: var(--fs-base);
  margin-top: 4px;
}

.login-error {
  background: var(--danger-dim);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: var(--fs-sm);
  padding: 10px 13px;
  line-height: 1.5;
}
.login-success {
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: var(--radius-sm);
  color: var(--success);
  font-size: var(--fs-sm);
  padding: 10px 13px;
  line-height: 1.5;
}
.login-forgot {
  text-align: center;
  margin-top: 12px;
}
.login-forgot button {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.login-forgot button:hover { color: var(--primary); }

/* ============================================================
   SIGNUP PAGE
   ============================================================ */
.signup-container {
  width: 100%;
  max-width: 520px;
  padding: 20px;
  margin: 0 auto;
}
.signup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px;
  box-shadow: var(--shadow);
}
.signup-plan-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}
.plan-btn {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  color: var(--text-muted);
}
.plan-btn.active {
  border-color: var(--primary);
  background: var(--primary-dim);
  color: var(--text);
}
.plan-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.plan-price {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text);
}
.plan-price span {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
}
.plan-save {
  font-size: var(--fs-xs);
  color: var(--success);
  font-weight: 500;
  margin-top: 3px;
}
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.signup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.signup-card-input {
  background: #1e2535;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  min-height: 40px;
}
@media (max-width: 480px) {
  .signup-row { grid-template-columns: 1fr; }
  .signup-card { padding: 28px 20px; }
}

/* ============================================================
   LOGOUT BUTTON (sidebar)
   ============================================================ */
.btn-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.15s;
}

.btn-logout:hover {
  background: var(--danger-dim);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.4);
}

/* ============================================================
   DATE RANGE BAR
   ============================================================ */
.date-range-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.preset-group {
  display: flex;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  gap: 6px;
}

.preset-btn {
  padding: 6px 0;
  width: 90px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.preset-btn:hover { color: var(--text); background: var(--surface-hover); }

.preset-btn.active {
  background: rgba(37, 87, 214, 0.25);
  border-color: var(--primary);
  color: var(--primary);
}

.custom-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.range-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 6px 10px;
  font-size: var(--fs-xs);
  outline: none;
}
.range-input:focus { border-color: var(--primary); }

/* Calendar icon — all date inputs, light mode matches --text-secondary (#64748b) */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(49%) sepia(10%) saturate(620%) hue-rotate(184deg) brightness(89%) contrast(90%);
  cursor: pointer;
  opacity: 1;
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.75) brightness(1.4);
  cursor: pointer;
  opacity: 0.85;
}

.range-sep { color: var(--text-muted); font-size: var(--fs-xs); }

.btn-sm {
  padding: 8px 16px;
  font-size: var(--fs-xs);
}

/* ============================================================
   STAT COMPARISON INDICATORS
   ============================================================ */
.stat-comparison {
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: auto;
}

/* ── Stat card tooltip ──────────────────────────────── */
.stat-tooltip {
  position: absolute;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-sizing: border-box;
  box-shadow: var(--shadow);
  pointer-events: none;
  animation: tip-in 0.15s ease;
  width: max-content;
  min-width: 300px;
  max-width: 480px;
}
@keyframes tip-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Row 1: rating badge + tier tag on same row */
.stat-tip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.stat-tip-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  white-space: nowrap;
}
.stat-tip-badge.tip-great   { background: rgba(37, 87, 214,0.15);    color: var(--primary); }
.stat-tip-badge.tip-poor    { background: rgba(220,38,38,0.15);   color: #dc2626;  }
.stat-tip-badge.tip-warning { background: rgba(234,179,8,0.15);   color: #eab308; }
.stat-tip-badge.tip-okay    { background: rgba(100,116,139,0.15); color: var(--text-muted); }
.stat-tip-tier-tag {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-subtle);
  background: rgba(100,116,139,0.08);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
/* Rated-on explainer — sits between header and context */
.stat-tip-rated {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin-bottom: 8px;
}
/* Row 2: context — hero numbers */
.stat-tip-context {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.stat-tip-ctx-sub {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-muted);
  display: block;
  margin-top: 3px;
}
/* Row 3: benchmarks — compact inline row */
.stat-tip-bench {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 10px;
}
.stat-tip-bench-line {
  font-size: var(--fs-xs);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.stat-tip-bench-line::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stat-tip-bench-line.tip-great-line { color: var(--primary); }
.stat-tip-bench-line.tip-great-line::before { background: var(--primary); }
.stat-tip-bench-line.tip-okay-line  { color: var(--text-muted); }
.stat-tip-bench-line.tip-okay-line::before  { background: rgba(100,116,139,0.45); }
.stat-tip-bench-line.tip-poor-line  { color: #dc2626; }
.stat-tip-bench-line.tip-poor-line::before  { background: #dc2626; }
.stat-tip-bench-line.tip-warn-line  { color: #eab308; }
.stat-tip-bench-line.tip-warn-line::before  { background: #eab308; }
/* Row 4: vs previous period */
.stat-tip-vs-prev {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.stat-tip-vs-prev.tip-vs-up   { color: var(--primary); }
.stat-tip-vs-prev.tip-vs-down { color: #dc2626;  }

/* ── Stat legend ─────────────────────────────────────── */
.stat-legend {
  display: none; /* KPI status communicated via card borders — legend not needed */
  padding-left: 2px;
  flex-wrap: wrap;
}
.stat-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.stat-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.stat-legend-item--great   .stat-legend-dot { background: var(--success); }
.stat-legend-item--poor    .stat-legend-dot { background: var(--danger); }
.stat-legend-item--warning .stat-legend-dot { background: var(--warning); }
.stat-legend-item--neutral .stat-legend-dot { background: rgba(100,116,139,0.45); }

/* Colorblind overrides removed — will rebuild later */

.comp-up   { color: rgba(37, 87, 214,0.8); }
.comp-down { color: rgba(220,38,38,0.8); }

.stat-period-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
  pointer-events: none;
  flex-shrink: 0;
}
[data-theme="dark"] .stat-period-label {
  color: rgba(180,195,220,0.90);
  background: rgba(124,58,237,0.12);
  border-color: rgba(124,58,237,0.28);
}

/* ============================================================
   SECTION DIVIDER (Hormozi metrics label)
   ============================================================ */
.section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 12px;
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ============================================================
   WIDE CHART CARD (Contracted vs Collected spans full width)
   ============================================================ */
.chart-card--wide {
  grid-column: 1 / -1;
}

/* ============================================================
   CARD BADGE (count pill in card header)
   ============================================================ */
.card-badge {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 1px 8px;
}

/* ============================================================
   AGREEMENT COMPLETION BAR
   ============================================================ */
.completion-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.completion-bar-bg {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  min-width: 80px;
}

.completion-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.completion-bar-bg--lg { height: 12px; border-radius: 6px; }
.completion-bar-bg--lg .completion-bar-fill { border-radius: 6px; }
.billing-progress-sub { margin-top: 8px; font-size: var(--fs-xs); color: var(--text-muted); }

.completion-pct {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  width: 32px;
  text-align: right;
}

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

/* ============================================================
   CLIENT PROFILE
   ============================================================ */

/* Back button */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.btn-back:hover { color: var(--text-primary); border-color: var(--text-secondary); }

.btn-danger {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  color: #ef4444;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger:hover { background: rgba(239,68,68,0.25); }

.btn-cancel-client {
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  color: #f59e0b;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-cancel-client:hover { background: rgba(245,158,11,0.22); }


.edit-stripe-warning {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-sm);
  color: var(--warning);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.edit-stripe-warning.hidden { display: none; }
.edit-warning-steps {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(245, 158, 11, 0.25);
}
.edit-warning-steps ol {
  margin: 6px 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.edit-warning-link {
  color: var(--warning);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
  font-family: monospace;
  font-size: var(--fs-xs);
}
.edit-warning-link:hover {
  color: #fbbf24;
}

.btn-undo-cancel {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #818cf8;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-undo-cancel:hover { background: rgba(99, 102, 241, 0.22); }
.btn-undo-cancel.hidden { display: none; }

.btn-save-attempt {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.18);
  color: #f59e0b;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-save-attempt:hover { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.3); }
.btn-save-attempt.hidden { display: none; }

.btn-resume-pause {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #22c55e;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-resume-pause:hover { background: rgba(34, 197, 94, 0.22); }
.btn-resume-pause.hidden { display: none; }

.profile-header-actions { display: flex; gap: 8px; align-items: center; }

/* Options dropdown */
.profile-options-wrap {
  position: relative;
}
.profile-options-wrap .btn-secondary {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--fs-sm);
  transition: all 0.2s;
}
.profile-options-wrap .btn-secondary:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: var(--text);
}
.profile-options-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  min-width: 160px;
  z-index: 200;
  overflow: hidden;
  padding: 4px 0;
}
.profile-options-dropdown.hidden { display: none; }
.profile-options-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 9px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.12s;
}
.profile-options-item:hover { background: var(--surface-hover); }
.profile-options-item--cancel { color: #f59e0b; }
.profile-options-item--cancel:hover { background: rgba(245,158,11,0.08); }
.profile-options-item--danger { color: #ef4444; }
.profile-options-item--danger:hover { background: rgba(239,68,68,0.08); }
.profile-options-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Hero */
/* ── Compact Profile Header ──────────────────────────────────── */
.profile-header-compact {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 20px;
  margin-bottom: 14px;
}
.profile-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.profile-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-hero { display: none; }
.profile-avatar { display: none; }
.profile-name-row { display: contents; }
.profile-name {
  font-size: var(--fs-2xl);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.3px;
}
.profile-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
  margin-right: 5px;
}
.profile-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Client tags */
.profile-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid;
  white-space: nowrap;
}
.tag-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--fs-sm);
  line-height: 1;
  padding: 0;
  color: inherit;
  opacity: 0.6;
  margin-left: 1px;
}
.tag-chip-remove:hover { opacity: 1; }
.tag-add-wrap { position: relative; }
.tag-add-btn {
  background: none;
  border: 1px dashed var(--border);
  border-radius: 20px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 3px 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.tag-add-btn:hover { border-color: var(--primary); color: var(--primary); }
.tag-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  padding: 10px;
  min-width: 220px;
}
.tag-picker-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.tag-preset {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  cursor: pointer;
  transition: opacity 0.15s;
}
.tag-preset:hover { opacity: 0.75; }
.tag-picker-custom {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tag-custom-input {
  flex: 1;
  font-size: var(--fs-xs);
  padding: 5px 8px;
  height: auto;
}
.tag-picker-empty {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 6px 4px;
}

/* Tag settings management */
.tag-def-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tag-def-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: none; /* chip already shows the color */
}
.tag-def-color-picker {
  width: 28px;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
}
.tag-def-chip {
  cursor: default;
}
.tag-def-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.tag-def-remove:hover { opacity: 1; color: var(--danger); }
.tag-settings-add {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.tag-settings-add input[type="text"] {
  flex: 1;
  min-width: 140px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 9px 13px;
  font-size: var(--fs-base);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.tag-settings-add input[type="text"]:focus { border-color: var(--primary); }
.tag-settings-add input[type="text"]::placeholder { color: var(--text-subtle); }
.tag-settings-add input[type="color"] {
  width: 38px;
  height: 34px;
  padding: 2px 3px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
}

/* Cancellation reason */
.cancellation-reason-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: var(--fs-xs);
}
.cr-label {
  font-weight: 500;
  color: var(--danger);
  white-space: nowrap;
}
.cr-text { color: var(--text-secondary); }
.badge-billing {
  background: rgba(139,92,246,0.15);
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,0.3);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.badge-renewal {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.3);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Agreement status badges */
.agreement-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
}
.agreement-badge--signed {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.28);
}
.agreement-badge--pending {
  background: rgba(245,158,11,0.12);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.28);
}
.agreement-badge--voided {
  background: rgba(239,68,68,0.12);
  color: var(--danger);
  border: 1px solid rgba(239,68,68,0.28);
}
.agreement-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  font-size: var(--fs-xs);
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.agreement-doc-link:hover { opacity: 1; text-decoration: underline; }

/* Onboarding status card */
.onb-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; }
.onb-card--done { padding: 10px 20px; }
.onb-done-badge { font-size: var(--fs-xs); font-weight: 500; color: var(--success, #48bb78); }
.onb-header { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 14px; }
.onb-steps { display: flex; align-items: center; gap: 0; }
.onb-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.onb-step-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-base); font-weight: 500; border: 2px solid var(--border); color: var(--text-muted); background: var(--surface); transition: all 0.2s; }
.onb-step--done .onb-step-icon { background: var(--success, #48bb78); color: #fff; border-color: var(--success, #48bb78); }
.onb-step--active .onb-step-icon { background: var(--primary); color: #fff; border-color: var(--primary); animation: onb-pulse 1.5s ease-in-out infinite; }
.onb-step--error .onb-step-icon { background: var(--danger, #e53e3e); color: #fff; border-color: var(--danger, #e53e3e); }
.onb-step-label { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); text-align: center; }
.onb-step--done .onb-step-label { color: var(--success, #48bb78); }
.onb-step--active .onb-step-label { color: var(--primary); font-weight: 500; }
.onb-step-line { flex: 0 0 auto; width: 24px; height: 2px; background: var(--border); margin: 0 -4px; margin-bottom: 18px; }
@keyframes onb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3); } 50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); } }
.onb-action, .onb-error { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.onb-waiting { font-size: var(--fs-xs); color: var(--text-muted); flex: 1; }
.onb-waiting.warning { color: #d97706; }
.onb-waiting.urgent { color: var(--danger, #e53e3e); font-weight: 500; }
.onb-error { color: var(--danger, #e53e3e); font-size: var(--fs-xs); }
.onb-error span { flex: 1; }

/* Quick stats row */
.profile-stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1200px) { .profile-stats-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .profile-stats-row { grid-template-columns: repeat(2, 1fr); } }

.profile-stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* Next-payment status pill — top-right corner of card */
.profile-pay-badge {
  position: absolute;
  top: 9px;
  right: 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 20px;
  pointer-events: none;
}
.profile-pay-badge--paid      { background: rgba(34, 197, 94, 0.15);  color: var(--success); }
.profile-pay-badge--upcoming  { background: rgba(59, 130, 246, 0.15); color: var(--info); }
.profile-pay-badge--due-soon  { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.profile-pay-badge--due-today { background: rgba(239, 68, 68, 0.15);  color: var(--danger); }
.profile-pay-badge--overdue   { background: rgba(239, 68, 68, 0.15);  color: var(--danger); }

/* Card border + outward glow matches status color */
.profile-stat--pay-paid      { border-color: var(--success) !important; box-shadow: 0 0 18px 5px rgba(34, 197, 94, 0.40); }
.profile-stat--pay-upcoming  { border-color: var(--info)    !important; box-shadow: 0 0 18px 5px rgba(59, 130, 246, 0.40); }
.profile-stat--pay-due-soon  { border-color: var(--warning) !important; box-shadow: 0 0 18px 5px rgba(245, 158, 11, 0.40); }
.profile-stat--pay-due-today { border-color: var(--danger)  !important; box-shadow: 0 0 18px 5px rgba(239, 68, 68, 0.40); }
.profile-stat--pay-overdue   { border-color: var(--danger)  !important; box-shadow: 0 0 18px 5px rgba(239, 68, 68, 0.40); }

/* LTV stat — highlighted with brand accent border (all four sides, overrides dark-theme top-color rule) */
.profile-stat--ltv {
  border-color: var(--accent) !important;
  background: var(--accent-dim);
}

.profile-stat-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.profile-stat-value {
  font-size: var(--fs-2xl);
  font-weight: 500;
  color: var(--text-primary);
}

/* Two-column profile grid */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } }
.profile-col { display: flex; flex-direction: column; gap: 16px; }

/* Card drag-to-reorder */
.card-press-pending {
  transition: box-shadow 0.3s, transform 0.3s;
  box-shadow: 0 0 0 2px var(--accent), 0 4px 20px rgba(0,0,0,0.25);
  transform: scale(1.005);
  cursor: grab;
}
.card-dragging {
  opacity: 0.93;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 2px var(--accent);
  transform: rotate(0.6deg) scale(1.01);
  transition: none !important;
}
.card-drag-placeholder {
  border: 2px dashed var(--border);
  border-radius: 6px;
  background: transparent;
  opacity: 0.5;
  pointer-events: none;
}
[data-card-key] .card-header {
  cursor: grab;
  user-select: none;
}
.profile-card { padding: 0; }
.profile-card .card-header { padding: 16px 20px 12px; }

/* Detail rows */
.profile-details { padding: 0 20px 16px; }
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.detail-row:last-child { border-bottom: none; }
.detail-key { color: var(--text-muted); }
.detail-val { color: var(--text-primary); font-weight: 500; text-align: right; }

/* Program start date — inline edit */
#cp-ps-row { align-items: center; }
.ps-display-wrap { display: flex; align-items: center; gap: 6px; }
.ps-empty { color: var(--text-muted); font-weight: 400; }
.ps-edit-btn {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  color: var(--text-muted); border-radius: 4px; line-height: 1;
  opacity: 0; transition: opacity 0.15s, color 0.15s;
  display: flex; align-items: center;
}
#cp-ps-row:hover .ps-edit-btn { opacity: 1; }
.ps-edit-btn:hover { color: var(--primary); }
.ps-set-link { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.02em; color: var(--primary); }
.ps-edit-inline {
  display: none; align-items: center; gap: 6px;
}
.ps-edit-inline input[type="date"] {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 4px 8px;
  font-size: var(--fs-xs); font-family: inherit; outline: none;
}
.ps-edit-inline input[type="date"]:focus { border-color: var(--primary); }
.btn-xs {
  font-size: var(--fs-xs); font-weight: 500; padding: 4px 10px;
  border-radius: var(--radius-sm); border: none; cursor: pointer;
  transition: background 0.15s;
}
.btn-xs.btn-primary  { background: var(--primary); color: #fff; }
.btn-xs.btn-primary:hover  { background: var(--primary-dark, #5b21b6); }
.btn-xs.btn-ghost    { background: var(--surface-3, var(--surface-2)); color: var(--text-muted); }
.btn-xs.btn-ghost:hover    { background: var(--surface-hover); color: var(--text); }
.detail-mono { font-family: 'Courier New', monospace; font-size: var(--fs-xs); color: var(--text-secondary); }
.stripe-dashboard-link { font-size: var(--fs-xs); font-weight: 500; color: #635bff; text-decoration: none; letter-spacing: 0.01em; }
.stripe-dashboard-link:hover { color: #7a73ff; text-decoration: underline; }
.stripe-id-link { color: var(--primary); text-decoration: none; transition: color 0.15s; }
.stripe-id-link:hover { color: var(--text); text-decoration: underline; }
.copy-on-click { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 4px; position: relative; }
.copy-on-click:hover { color: var(--accent); }
.copy-icon { opacity: 0; font-size: var(--fs-xs); transition: opacity 0.15s; }
.copy-on-click:hover .copy-icon { opacity: 1; }
.copy-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: var(--fs-xs);
  font-family: inherit;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 99;
}
.copy-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--accent);
}
.copy-on-click.copied .copy-tooltip { opacity: 1; }

/* Financial summary */
.profile-financial { padding: 0 20px 16px; }
.fin-row { display: flex; gap: 16px; margin-bottom: 16px; }
.fin-item { flex: 1; }
.fin-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.fin-value { font-size: var(--fs-xl); font-weight: 500; color: var(--text-primary); }
.fin-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Payment failure alert — on client profile */
.payment-failure-alert {
  margin: 0 20px 16px;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.pf-alert-title  { font-size: var(--fs-sm); font-weight: 500; color: #ef4444; margin-bottom: 4px; }
.pf-alert-detail { font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: 2px; }
.pf-alert-reason { font-size: var(--fs-xs); color: var(--text-muted); }

/* Payment history — on client profile */
.payment-history { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 12px; }
.ph-header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; margin-bottom: 8px; }
.ph-title { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.ph-add-entry-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500; padding: 2px 8px; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.ph-add-entry-btn:hover { border-color: var(--primary); color: var(--primary); }
.ph-empty { padding: 10px 20px; font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; }
.ph-item  { display: flex; align-items: center; gap: 10px; padding: 7px 20px; font-size: var(--fs-xs); border-bottom: 1px solid var(--border); }
.ph-item:last-child { border-bottom: none; }
.ph-date   { color: var(--text-muted); width: 90px; flex-shrink: 0; }
.ph-desc   { color: var(--text-secondary); flex: 1; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ph-period { font-size: var(--fs-xs); color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; white-space: nowrap; font-weight: 500; }
.ph-amount { font-weight: 500; flex-shrink: 0; }
.ph-late { font-size: var(--fs-xs); font-weight: 500; color: var(--danger, #ef4444); background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); border-radius: 3px; padding: 1px 5px; white-space: nowrap; }
.ph-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 4px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
}
.ph-item:hover .ph-delete-btn { opacity: 1; }
.ph-delete-btn:hover { color: var(--danger, #ef4444); }
.ph-overdue-info { font-size: var(--fs-xs); font-weight: 500; color: var(--danger); margin-top: 4px; }

/* Payment failures — on dashboard */
.payment-failure-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.15s;
}
.payment-failure-item:hover { background: var(--surface-hover); }
.payment-failure-item:last-child { border-bottom: none; }
.pf-name   { font-size: var(--fs-base); font-weight: 500; color: var(--text-primary); }
.pf-meta   { display: flex; gap: 12px; }
.pf-amount { font-size: var(--fs-sm); font-weight: 500; color: #ef4444; }
.pf-date   { font-size: var(--fs-xs); color: var(--text-muted); }
.pf-reason { font-size: var(--fs-xs); color: var(--text-muted); }

/* Danger badge variant */
.card-badge--danger { background: rgba(239,68,68,0.15); color: #ef4444; }

/* Notes */
.profile-notes {
  padding: 0 20px 16px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Timeline */
.profile-timeline {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tl-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}
.tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 4px;
  z-index: 1;
}
.tl-line {
  position: absolute;
  left: 4px;
  top: 14px;
  width: 2px;
  height: calc(100% + 8px);
  background: var(--border);
}
.tl-content { padding-bottom: 16px; }
.tl-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.tl-date  { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

.tl-signup      .tl-dot { background: var(--accent); }
.tl-paid        .tl-dot { background: #a855f7; }
.tl-signed      .tl-dot { background: #22c55e; }
.tl-start       .tl-dot { background: #3b82f6; }
.tl-continuity  .tl-dot { background: #06b6d4; }
.tl-end         .tl-dot { background: #3b82f6; }
.tl-urgent      .tl-dot { background: #ef4444; }
.tl-cancelled   .tl-dot { background: #6b7280; }
.tl-sub {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  font-weight: 500;
  margin-left: 4px;
}

/* Pending / future timeline steps */
.tl-pending .tl-dot {
  background: transparent !important;
  border: 2px solid var(--border-strong, #475569);
}
.tl-pending .tl-label { color: var(--text-muted); }
.tl-pending .tl-date  { color: var(--text-subtle); }
.tl-pending .tl-line  { background: var(--border); opacity: 0.5; }
.tl-awaiting {
  font-style: italic;
  color: var(--text-subtle);
  font-size: var(--fs-xs);
}

/* Clickable client name in table */
.client-name-link {
  cursor: pointer;
  color: var(--text-primary);
  transition: color 0.15s;
}
.client-name-link:hover { color: var(--accent); text-decoration: underline; }

/* Color helpers used in profile */
.text-success { color: #22c55e !important; }
.text-warning { color: #f59e0b !important; }
.text-danger  { color: #ef4444 !important; }
.text-muted   { color: var(--text-muted); }
.text-subtle  { color: var(--text-subtle); }

/* ============================================================
   SORTABLE COLUMNS + COLUMN PANEL
   ============================================================ */

.th-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.th-sortable:hover { color: var(--text-primary); }

.sort-arrow {
  font-size: 10px;
  margin-left: 3px;
  color: var(--primary);
}
.sort-arrow--inactive {
  opacity: 0.3;
  color: var(--text-muted);
}
.th-sortable:hover .sort-arrow--inactive { opacity: 0.5; }
th[data-sorted="true"] { color: var(--text); }

/* Centered column headers: arrow sits inline next to label */
.th-label-centered { display: inline; }
.sort-arrow-abs { display: inline; margin-left: 3px; }

/* Column panel wrapper (relative positioned for dropdown) */
.col-panel-wrap {
  position: relative;
}

/* Dropdown panel */
.col-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 200;
  min-width: 200px;
  padding-bottom: 8px;
}
.col-panel.open { display: block; }

.col-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.col-panel-reset {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: var(--fs-xs);
  cursor: pointer;
  padding: 2px 4px;
}
.col-panel-reset:hover { text-decoration: underline; }

.col-panel-list {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}

.col-panel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s;
}
.col-panel-item:hover { background: var(--surface-hover); color: var(--text); }
.col-panel-item input[type=checkbox] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* ============================================================
   NOTES FEED
   ============================================================ */

.notes-add-form {
  padding: 12px 20px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notes-add-form .btn-primary {
  padding: 10px 18px !important;
}

.notes-textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  font-family: inherit;
  resize: vertical;
  outline: none;
  min-height: 60px;
  transition: border-color 0.15s;
}
.notes-textarea:focus { border-color: var(--primary); }
.notes-textarea::placeholder { color: var(--text-subtle); }

.notes-feed { padding: 4px 0; }

.note-item {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.note-item:last-child { border-bottom: none; }
.note-item:hover { background: var(--surface); }

.note-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.note-date {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.note-delete {
  background: transparent;
  border: none;
  color: var(--text-subtle);
  cursor: pointer;
  font-size: var(--fs-xl);
  line-height: 1;
  padding: 0 4px;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
  opacity: 0;
}
.note-item:hover .note-delete { opacity: 1; }
.note-delete:hover { color: var(--danger); background: var(--danger-dim); }

.note-text {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.note-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-dim);
  color: var(--primary);
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 1px 7px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ============================================================
   CUSTOMIZE STATS PANEL
   ============================================================ */

.customize-section-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-left: 4px;
}

.customize-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.customize-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--surface);
  cursor: grab;
  user-select: none;
  transition: background 0.1s, border-color 0.15s, opacity 0.15s;
}
.customize-item:active { cursor: grabbing; }
.customize-item:hover  { background: var(--surface-hover); }
.customize-item--hidden { opacity: 0.45; }
.customize-item.stat-drag-source  { opacity: 0.3; }
.customize-item.stat-drop-target  { border-color: var(--primary); background: var(--primary-dim); }

.drag-handle {
  color: var(--text-subtle);
  font-size: var(--fs-md);
  line-height: 1;
  flex-shrink: 0;
}

.customize-item input[type=checkbox] {
  accent-color: var(--primary);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

.customize-item-label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  flex: 1;
}

/* ============================================================
   FORM SECTION TITLES
   ============================================================ */
.form-section-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  padding: 10px 0 6px;
  border-top: 1px solid var(--border);
  margin-top: 22px;
}
.form-section-title:first-child,
.form-section-title--first {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* Existing client toggle */
/* ── CSV Import Modal ─────────────────────────────────────────── */
.csv-import-step { }
.csv-import-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; margin-bottom: 8px; }
.csv-import-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 32px 20px; border: 2px dashed var(--border); border-radius: 8px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s; color: var(--text-muted); font-size: var(--fs-sm);
}
.csv-import-drop:hover, .csv-drop-zone--active { border-color: var(--primary); background: rgba(124,58,237,0.06); }
.csv-drop-icon { color: var(--text-muted); }
.csv-import-notes { margin-top: 14px; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.8; }
.csv-import-notes p { margin: 0; }
.csv-import-summary { display: flex; gap: 8px; margin-bottom: 14px; }
.csv-badge { font-size: var(--fs-xs); font-weight: 500; padding: 3px 10px; border-radius: 4px; }
.csv-badge--ok { background: rgba(34,197,94,0.15); color: #22c55e; }
.csv-badge--warn { background: rgba(234,179,8,0.15); color: #eab308; }
.csv-badge--err { background: rgba(239,68,68,0.15); color: #ef4444; }
.csv-import-table-wrap { max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.csv-import-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.csv-import-table th { position: sticky; top: 0; background: var(--surface-2); padding: 8px 10px; text-align: left; font-weight: 500; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.csv-import-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--text); }
.csv-row--skip { opacity: 0.4; }
.csv-row-icon { margin-right: 6px; }
.csv-row-icon--ok { color: #22c55e; }
.csv-row-icon--warn { color: #eab308; }
.csv-row-icon--err { color: #ef4444; }
.csv-action-select { font-size: var(--fs-xs); background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; color: var(--text); margin-left: 4px; }
.csv-import-footer { display: flex; justify-content: space-between; margin-top: 16px; }
.csv-progress-bar { width: 100%; height: 6px; background: var(--surface-2); border-radius: 3px; margin-top: 12px; overflow: hidden; }
.csv-progress-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.2s; width: 0; }
[data-theme="light"] .csv-import-drop:hover, [data-theme="light"] .csv-drop-zone--active { background: rgba(124,58,237,0.04); }

/* ── Notification Bell ─────────────────────────────────────────── */
.sidebar-notif-section {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin: 0 10px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.15s; border-radius: var(--radius-sm);
}
.sidebar-notif-section:hover { background: var(--surface-hover); }
.sidebar-notif-section .sidebar-label {
  font-size: 13.5px; color: var(--text-muted); font-weight: 500;
}
.sidebar.collapsed .sidebar-notif-section { padding: 10px 0; margin: 0; justify-content: center; }
.notif-bell {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: none; background: none;
  cursor: pointer; color: var(--text-muted); flex-shrink: 0;
}
.notif-bell svg { width: 18px; height: 18px; opacity: 0.7; }
.sidebar-notif-section:hover .notif-bell svg { opacity: 1; }
.notif-badge {
  position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px;
  background: var(--danger); color: #fff; font-size: var(--fs-xs); font-weight: 500;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1;
}
/* "What's new" indicator — a pure dot, no number */
.whats-new-dot {
  position: absolute; top: 6px; right: 10px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--surface, var(--bg));
  pointer-events: none;
}
.sidebar.collapsed .whats-new-dot { top: 4px; right: 6px; }
.notif-panel {
  position: fixed; top: 100px; left: calc(var(--sidebar-w) + 8px); width: 340px; max-height: 460px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35); overflow-y: auto; z-index: 1000;
}
.notif-panel-close {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: var(--fs-xl); line-height: 1; padding: 2px 6px; border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.notif-panel-close:hover { color: var(--text); background: var(--surface-2); }
.notif-overlay { position: fixed; inset: 0; z-index: 999; }
.notif-panel-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.notif-panel-header button { background: none; border: none; color: var(--primary); font-size: var(--fs-xs); font-weight: 500; cursor: pointer; }
.notif-item {
  display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background 0.1s;
}
.notif-item:hover { background: var(--surface-2); }
.notif-item--unread { background: rgba(124,58,237,0.06); }
.notif-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-base); flex-shrink: 0; }
.notif-icon--fail { background: rgba(239,68,68,0.15); color: #ef4444; }
.notif-icon--ok { background: rgba(34,197,94,0.15); color: #22c55e; }
.notif-icon--warn { background: rgba(234,179,8,0.15); color: #eab308; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: var(--fs-xs); font-weight: 500; color: var(--text); }
.notif-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.notif-time { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.notif-empty { padding: 24px; text-align: center; font-size: var(--fs-xs); color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════
   PROFILE V2 — Premium Dark Glass
   ══════════════════════════════════════════════════════════════════ */

/* ── Glass card overrides for profile ─────────────────────────── */
/* Profile cards — match dashboard card aesthetic */
.profile-tab-panel .card.profile-card,
.p-action-items {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
}
.profile-tab-panel .card.profile-card .card-header {
  border-bottom: 1px solid var(--border);
}
.profile-tab-panel .card.profile-card .card-header h2 {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.profile-tab-panel .detail-row {
  border-bottom-color: rgba(255,255,255,0.06);
}
.profile-tab-panel .detail-key {
  font-weight: 400; color: var(--text-subtle);
}
.profile-tab-panel .detail-val {
  font-weight: 500;
}

/* ── Header V2 ──────────────────────────────────────────────────── */
.profile-header-v2 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px 0; margin-bottom: 14px;
  position: relative;
}
/* Header shimmer border removed */

.ph-identity {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
.ph-avatar {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-lg); font-weight: 500; color: #fff;
  flex-shrink: 0; text-transform: uppercase;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}
.ph-name-block { flex: 1; min-width: 0; }
.ph-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ph-name { font-size: var(--fs-3xl); font-weight: 500; margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
.ph-status { font-size: var(--fs-xs); }
.ph-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* Banners */
.ph-banner {
  padding: 10px 16px; border-radius: var(--radius); font-size: var(--fs-xs); font-weight: 500;
  margin-bottom: 12px;
}
.ph-banner--danger { background: rgba(239,68,68,0.08); color: #f87171; border: 1px solid rgba(239,68,68,0.12); }
.ph-banner--info { background: rgba(59,130,246,0.08); color: #60a5fa; border: 1px solid rgba(59,130,246,0.12); }
.ph-banner--success { background: rgba(34,197,94,0.08); color: #4ade80; border: 1px solid rgba(34,197,94,0.12); }
.ph-banner-label { font-weight: 500; margin-right: 4px; }

/* Metric pills row */
.ph-metrics {
  display: flex; gap: 10px; margin-bottom: 16px; overflow-x: auto;
}
.ph-metric {
  flex: 1; min-width: 0; padding: 12px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  transition: border-color 0.15s;
}
/* Metric pill — clean border, no shimmer */
.ph-metric { border-color: var(--border); }
.ph-metric:hover { border-color: #4a5568; }
.ph-metric--accent {
  background: rgba(37, 87, 214,0.03);
}
.ph-metric--accent::before {
  background: linear-gradient(135deg, rgba(37, 87, 214,0.45) 0%, rgba(37, 87, 214,0.05) 25%, rgba(37, 87, 214,0.02) 50%, rgba(37, 87, 214,0.02) 75%, rgba(37, 87, 214,0.35) 100%);
}
.ph-metric-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-subtle); margin-bottom: 4px;
}
.ph-metric-value { font-size: var(--fs-xl); font-weight: 500; color: var(--text); line-height: 1.2; }
.ph-metric-sub { font-size: var(--fs-xs); font-weight: 500; margin-top: 2px; }

/* ── Metric Pill Tooltips ─────────────────────────────────────── */
.ph-metric-tip {
  position: fixed; z-index: 9999;
  width: 320px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  pointer-events: none;
}
.ph-metric-tip.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.pmt-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-bottom: 6px; }
.pmt-body { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6; }

/* ── Engagement Score Tooltip ────────────────────────────────── */
.ph-metric--engagement { position: relative; }
.engagement-info-icon {
  display: inline-flex; vertical-align: middle; margin-left: 4px;
  color: var(--text-subtle); cursor: help; opacity: 0.6; transition: opacity 0.15s;
}
.ph-metric--engagement:hover .engagement-info-icon { opacity: 1; }
.engagement-tooltip {
  position: fixed; z-index: 9999;
  width: 460px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  pointer-events: none;
}
.engagement-tooltip.visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.et-header { margin-bottom: 10px; }
.et-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.et-subtitle { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 2px; }
.et-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.6; margin-bottom: 14px; }
.et-section-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-subtle);
  margin-bottom: 6px; text-transform: uppercase;
}
.et-signals { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.et-signal {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400;
}
.et-signal-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.et-signal-window {
  margin-left: auto; font-size: 10px; font-weight: 500; color: var(--text-subtle);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 3px; padding: 0 5px; line-height: 1.6;
}
.et-ranges { display: flex; flex-direction: column; gap: 6px; }
.et-range { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); }
.et-range-bar { width: 3px; height: 16px; border-radius: 2px; flex-shrink: 0; }
.et-bar-healthy { background: var(--success); }
.et-bar-watch { background: #eab308; }
.et-bar-atrisk { background: #f97316; }
.et-bar-critical { background: var(--danger); }
.et-range-label { width: 56px; flex-shrink: 0; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.et-range-desc { color: var(--text-muted); font-weight: 400; }

/* Tab bar */
.ph-tab-bar {
  display: flex; gap: 0; border-top: 1px solid rgba(255,255,255,0.05);
  margin: 0 -24px; padding: 0 24px;
}
.profile-tab-btn {
  padding: 12px 20px; background: none; border: none; border-bottom: 2px solid transparent;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-subtle); cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.profile-tab-btn:hover { color: var(--text); }
.profile-tab-btn.active {
  color: var(--text); border-bottom-color: var(--primary);
}

/* Tab panels */
.profile-tab-panel { padding: 0; }
.profile-tab-panel > .card:first-child { margin-top: 0; }
.profile-tab-panel .card.profile-card { margin-bottom: 16px; }
.tab-loading { padding: 48px 20px; text-align: center; color: var(--text-subtle); font-size: var(--fs-sm); font-weight: 400; }

/* Two-column grid for tab content */
.p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.p-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.p-col > .card.profile-card { margin-bottom: 0; }
@media (max-width: 900px) { .p-grid { grid-template-columns: 1fr; } }

/* ── Quick Stats Row ──────────────────────────────────────────── */
.overview-quick-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px;
}
.qs-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; text-align: center;
}
.qs-label { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 4px; }
.qs-value { font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
@media (max-width: 900px) { .overview-quick-stats { grid-template-columns: repeat(2, 1fr); } }

/* ── Skeleton Feed ───────────────────────────────────────────── */
.skeleton-feed { padding: 16px 20px; }

/* ── Action Items ─────────────────────────────────────────────── */
.p-action-items { margin-bottom: 16px; }
.p-action-list { padding: 0; }
.p-action-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid var(--text-subtle); font-size: var(--fs-sm); font-weight: 400;
}
.p-action-item:last-child { border-bottom: none; }
.p-action-item--danger { border-left-color: var(--danger); }
.p-action-item--warning { border-left-color: var(--warning); }
.p-action-item--info { border-left-color: var(--info); }
.p-action-msg { flex: 1; font-weight: 500; color: var(--text); }

/* ── Activity Feed ────────────────────────────────────────────── */
.activity-feed { padding: 4px 0; }
.activity-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06); font-size: var(--fs-sm);
  transition: background 0.1s;
}
.activity-item:hover { background: rgba(255,255,255,0.03); }
.activity-item:last-child { border-bottom: none; }
.activity-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 6px;
  opacity: 0.8;
}
.activity-date {
  flex-shrink: 0; width: 80px; font-size: var(--fs-xs); font-weight: 500;
  color: var(--text-subtle); font-variant-numeric: tabular-nums;
}
.activity-label { flex: 1; color: var(--text-muted); font-weight: 400; }

/* ── Activity Feed Scroll Container ──────────────────────────── */
.activity-feed-scroll { max-height: 420px; overflow-y: auto; }
.activity-feed-scroll::-webkit-scrollbar { width: 4px; }
.activity-feed-scroll::-webkit-scrollbar-track { background: transparent; }
.activity-feed-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
.activity-feed-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
.af-hidden { display: none !important; }
.af-load-more {
  display: block; width: 100%; padding: 12px 20px; background: none; border: none;
  border-top: 1px solid rgba(255,255,255,0.06); color: var(--primary); font-size: var(--fs-xs);
  font-weight: 500; cursor: pointer; text-align: center; transition: background 0.15s;
}
.af-load-more:hover { background: rgba(255,255,255,0.03); }
.af-search {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 5px 10px; font-size: var(--fs-xs); color: var(--text); width: 160px;
  transition: border-color 0.15s;
}
.af-search:focus { outline: none; border-color: var(--primary); }
.af-search::placeholder { color: var(--text-subtle); }

/* ── This Week Summary Card ──────────────────────────────────── */
.tw-grid { padding: 0; }
.tw-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: var(--fs-sm);
}
.tw-row:last-child { border-bottom: none; }
.tw-label { font-weight: 400; color: var(--text-muted); }
.tw-value { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* ── Quick Links ──────────────────────────────────────────────── */
.p-quick-links {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 0;
}
.p-quick-link {
  padding: 9px 18px; border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer;
  transition: all 0.2s;
}
.p-quick-link:hover {
  color: var(--text); border-color: var(--primary);
  background: var(--surface-hover, rgba(255,255,255,0.04));
}

/* ── Billing Alert ────────────────────────────────────────────── */
.p-alert {
  padding: 14px 20px; border-radius: var(--radius); margin-bottom: 16px;
}
.p-alert--danger {
  background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.12);
}
.p-alert-title { font-size: var(--fs-sm); font-weight: 500; color: var(--danger); }
.p-alert-detail { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 3px; font-weight: 400; }
.p-alert-reason { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 2px; font-weight: 400; }

/* ── Payment entry (billing tab) ──────────────────────────────── */
.payment-entry {
  display: flex; align-items: center; gap: 14px; padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06); font-size: var(--fs-sm);
  transition: background 0.1s;
}
.payment-entry:hover { background: rgba(255,255,255,0.03); }
.payment-entry:last-child { border-bottom: none; }
.pe-date { width: 90px; flex-shrink: 0; color: var(--text-subtle); font-size: var(--fs-xs); font-weight: 400; font-variant-numeric: tabular-nums; }
.pe-desc { flex: 1; font-weight: 400; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pe-period { font-size: var(--fs-xs); color: var(--text-subtle); }
.pe-late { font-size: var(--fs-xs); font-weight: 500; color: var(--danger); background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); border-radius: 3px; padding: 1px 5px; }
.pe-amount { font-weight: 500; flex-shrink: 0; }
/* Row actions stay VISIBLE. They were hover-only, which made the receipt
   button — the sole path to viewing or resending a receipt — invisible on
   arrival, unreachable on touch, and a focus target with nothing to see when
   tabbed to. Restraint comes from the muted colour, not from hiding it. */
.pe-actions { display: flex; gap: 4px; flex-shrink: 0; }
.pe-action-btn { background: none; border: none; color: var(--text-subtle); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); transition: color 0.15s, background 0.15s; }
.payment-entry:hover .pe-action-btn { color: var(--text-muted); }
.pe-action-btn:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.pe-action-btn--danger:hover { color: var(--danger); background: rgba(239,68,68,0.1); }

/* ── Referral list ────────────────────────────────────────────── */
.referral-list { padding: 0; }
.referral-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 20px; width: 100%;
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer; text-align: left; color: var(--text); font-size: var(--fs-sm);
  transition: background 0.15s;
}
.referral-item:hover { background: rgba(255,255,255,0.03); }
.referral-item:last-child { border-bottom: none; }
.referral-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); flex-shrink: 0;
}
.referral-name { flex: 1; font-weight: 500; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ph-metrics { flex-wrap: wrap; }
  .ph-metric { min-width: calc(33% - 8px); }
  .ph-tab-bar { overflow-x: auto; }
}
@media (max-width: 600px) {
  .ph-metric { min-width: calc(50% - 8px); }
  .profile-tab-btn { padding: 12px 14px; font-size: var(--fs-xs); }
  .profile-header-v2 { padding: 16px 16px 0; }
  .ph-tab-bar { margin: 0 -16px; padding: 0 16px; }
}

/* ── Card badge danger variant ────────────────────────────────── */
.card-badge--danger { background: var(--danger); color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   PROFILE V2 — Premium Polish Pass
   ══════════════════════════════════════════════════════════════════ */

/* 1. Add Note button — glass, right-aligned, compact */
.profile-tab-panel .notes-add-form {
  flex-direction: column; align-items: stretch; gap: 8px;
}
.profile-tab-panel .notes-add-form .btn-primary {
  background: rgba(37, 87, 214,0.08);
  border: 1px solid rgba(37, 87, 214,0.18);
  color: var(--primary);
  font-weight: 500; font-size: var(--fs-xs);
  padding: 7px 18px !important;
  align-self: flex-end;
  width: auto;
  transition: all 0.2s;
  letter-spacing: 0.02em;
}
.profile-tab-panel .notes-add-form .btn-primary:hover {
  background: rgba(37, 87, 214,0.15);
  border-color: rgba(37, 87, 214,0.3);
}
.profile-tab-panel .notes-textarea {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
  transition: border-color 0.2s;
}
.profile-tab-panel .notes-textarea:focus {
  border-color: rgba(255,255,255,0.12);
  outline: none;
}

/* 2. Session tracker buttons — glass */
.profile-tab-panel .btn-record-payment {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important; font-size: var(--fs-xs) !important;
  padding: 6px 14px !important;
  transition: all 0.2s;
}
.profile-tab-panel .btn-record-payment:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: var(--text) !important;
}

/* 3. Back to Clients — refined */
#btn-back-to-clients {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-subtle);
  letter-spacing: 0.02em; transition: color 0.2s;
  text-decoration: none;
}
#btn-back-to-clients:hover { color: var(--text); }

/* 4. Card interior hierarchy — nested sections */
.profile-tab-panel .profile-details {
  padding: 2px 20px 14px;
}
.profile-tab-panel .detail-row {
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.profile-tab-panel .detail-row:last-child { border-bottom: none; }

/* Session stats row — subtle glass nested cards */
.profile-tab-panel .session-stats,
.profile-tab-panel .ss-grid {
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius);
}
.profile-tab-panel .ss-item {
  border-color: rgba(255,255,255,0.04) !important;
}

/* 5. Metric pill sub-label */
.ph-metric-sub {
  font-size: var(--fs-xs); font-weight: 400; margin-top: 3px;
  color: var(--text-subtle);
}

/* 7. Header presence — subtle gradient bg */
.profile-header-v2 {
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%);
}

/* 8. Activity feed — bolder layout */
.activity-dot { width: 8px; height: 8px; }
.activity-date { font-weight: 500; font-size: var(--fs-xs); color: var(--text-muted); width: 85px; }
.activity-label { font-weight: 400; color: var(--text); }
.activity-item { padding: 11px 20px; }

/* 9. Card hover states */
.profile-tab-panel .card.profile-card {
  transition: box-shadow 0.25s, transform 0.25s;
}
.profile-tab-panel .card.profile-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.22);
  transform: translateY(-1px);
}

/* 10. Tab panel fade-in */
.profile-tab-panel {
  animation: profileTabFadeIn 0.2s ease;
}
@keyframes profileTabFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 11. Session tracker inner stat boxes */
.profile-tab-panel .ss-item,
.profile-tab-panel .session-stat-box {
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
}

/* 12. Card header weight refinement */
.profile-tab-panel .card.profile-card .card-header h2 {
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--text-subtle);
}

/* Engagement score empty state — styled placeholder */
.profile-tab-panel #overview-churn-content .empty-state,
.profile-tab-panel .empty-state {
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  font-weight: 400;
  font-style: italic;
  opacity: 0.6;
  padding: 12px 20px;
}

/* Collapsible sections in session tracker */
.profile-tab-panel .sess-section {
  border-color: rgba(255,255,255,0.05) !important;
}
.profile-tab-panel .sess-section-head {
  background: rgba(255,255,255,0.025) !important;
  border-bottom-color: rgba(255,255,255,0.04) !important;
  font-weight: 500 !important;
  font-size: var(--fs-xs) !important;
}
.profile-tab-panel .sess-section-head:hover {
  background: rgba(255,255,255,0.04) !important;
}

/* Session summary strip — glass nested */
.profile-tab-panel .sess-summary-strip {
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.05);
}
.profile-tab-panel .sess-summary-tile {
  border-color: var(--border) !important;
}

/* Profile action buttons — refined sizing */
.profile-header-actions .btn-save-attempt,
.profile-header-actions .btn-renew,
.profile-header-actions .btn-resume-pause,
.profile-header-actions .btn-undo-cancel {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 7px 16px;
  border-radius: var(--radius);
  letter-spacing: 0.02em;
}

/* ── Template Editor ───────────────────────────────────────────── */
.tpl-btn-row { display: flex; gap: 10px; margin-top: 10px; }
.tpl-btn-row .btn-secondary { display: flex; flex-direction: column; align-items: flex-start; padding: 12px 16px; flex: 1; text-align: left; }
.tpl-btn-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.tpl-btn-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.tpl-var-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.tpl-var-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  font-family: monospace; font-size: var(--fs-xs); color: var(--primary); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tpl-var-chip:hover { background: rgba(124,58,237,0.1); border-color: var(--primary); }
.tpl-var-chip.copied { background: rgba(34,197,94,0.12); border-color: #22c55e; color: #22c55e; }
.tpl-editor-section { margin-bottom: 16px; }
.tpl-editor-section label { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.tpl-editor-section textarea,
.tpl-editor-section input[type="text"] {
  width: 100%; font-size: var(--fs-sm); font-family: inherit; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; outline: none; transition: border-color 0.15s; box-sizing: border-box;
}
.tpl-editor-section textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.tpl-editor-section textarea:focus,
.tpl-editor-section input[type="text"]:focus { border-color: var(--primary); }
.tpl-editor-section textarea::placeholder,
.tpl-editor-section input[type="text"]::placeholder { color: var(--text-muted); }
.tpl-editor-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.tpl-editor-actions .btn-test { display: flex; align-items: center; gap: 6px; }

/* ── Email Domain Setup ────────────────────────────────────────── */
.email-domain-divider { height: 1px; background: var(--border); margin: 18px 0 14px; }
.email-domain-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.email-domain-title { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.email-domain-status { font-size: var(--fs-xs); font-weight: 500; padding: 2px 8px; border-radius: 4px; }
.email-domain-status--none { background: var(--surface-2); color: var(--text-muted); }
.email-domain-status--pending { background: rgba(234,179,8,0.15); color: #eab308; }
.email-domain-status--verified { background: rgba(34,197,94,0.15); color: #22c55e; }
.email-domain-status--error { background: rgba(239,68,68,0.15); color: #ef4444; }

/* ── A2P per-stage status badges (SMS setup wizard) ─────────── */
.a2p-stages-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 4px;
}
.a2p-stage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.a2p-stage-row:last-child { border-bottom: none; }
.a2p-stage-label { font-size: 0.85rem; color: var(--text); font-weight: 500; }
.a2p-stage-sub { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.a2p-stage-pill {
  font-size: 0.7rem;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.a2p-stage-pill--done    { background: rgba(34,197,94,0.15);  color: #22c55e; }
.a2p-stage-pill--pending { background: rgba(245,158,11,0.18); color: #f59e0b; }
.a2p-stage-pill--review  { background: rgba(245,158,11,0.18); color: #f59e0b; }
.a2p-stage-pill--failed  { background: rgba(239,68,68,0.15);  color: #ef4444; }
.a2p-stage-pill--empty   { background: var(--surface-2);      color: var(--text-muted); }

/* ── Active-stage treatment ("You are here") ────────────────────
   The blocking stage gets a loud amber treatment so it can't be
   missed: left border accent + warm row tint + bolder amber text +
   filled-amber pill instead of the soft outline pill. Designed to
   read on dark backgrounds; uses Tailwind amber-500 (#f59e0b) per
   Clayton's bright-color preference. */
.a2p-stage-row.is-active {
  position: relative;
  background: rgba(245,158,11,0.06);
  border-left: 3px solid #f59e0b;
  padding-left: 11px; /* keep label aligned despite border */
}
.a2p-stage-row.is-active .a2p-stage-label {
  color: #f59e0b;
  font-weight: 700;
}
.a2p-stage-row.is-active .a2p-stage-pill--pending,
.a2p-stage-row.is-active .a2p-stage-pill--review {
  background: #f59e0b;
  color: #1a1d27;
  box-shadow: 0 0 0 4px rgba(245,158,11,0.18);
}
.a2p-stage-here {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f59e0b;
  background: rgba(245,158,11,0.15);
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ── Inline action banner (above the stage list when blocked) ─── */
.a2p-action-banner {
  background: var(--surface);
  border: 1px solid rgba(245,158,11,0.40);
  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 0 0 4px rgba(245,158,11,0.04);
}
.a2p-action-banner.is-success {
  border-color: rgba(34,197,94,0.35);
  border-left-color: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.04);
}
.a2p-action-banner-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.a2p-action-banner-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(245,158,11,0.15);
  color: #f59e0b;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.a2p-action-banner.is-success .a2p-action-banner-icon {
  background: rgba(34,197,94,0.15);
  color: #22c55e;
}
.a2p-action-banner-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.a2p-action-banner-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.a2p-action-banner-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.a2p-action-banner-item {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.a2p-action-banner-item::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  margin-top: 6px;
  flex-shrink: 0;
}
.a2p-action-banner-item strong { color: var(--text); font-weight: 600; }
.a2p-action-banner-item .item-sub { color: var(--text-muted); margin-top: 2px; font-size: 11px; }
.a2p-failure-box {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 6px;
  font-size: 0.82rem;
  color: #ef4444;
}
.a2p-failure-box strong { font-weight: 600; }
.a2p-failure-box .a2p-failure-reason {
  margin-top: 6px;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
}
.email-domain-setup-row { display: flex; gap: 8px; margin-top: 10px; }
.email-domain-setup-row input { flex: 1; }
.email-domain-records { margin-top: 12px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.email-domain-records table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.email-domain-records th { background: var(--surface-2); padding: 8px 10px; text-align: left; font-weight: 500; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.email-domain-records td { padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--text); word-break: break-all; }
.email-domain-records td:last-child { text-align: center; width: 60px; }
.dns-copy-cell { cursor: pointer; position: relative; transition: background 0.15s; }
.dns-copy-cell:hover { background: rgba(124,58,237,0.08); }
.dns-copy-cell.copied { background: rgba(34,197,94,0.12); }
.dns-copy-cell.copied::after { content: 'Copied'; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: var(--fs-xs); font-weight: 500; color: #22c55e; pointer-events: none; }
.email-domain-verified { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-sm); color: var(--success, #22c55e); font-weight: 500; }
.email-domain-actions { display: flex; gap: 8px; margin-top: 12px; }

.existing-client-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--surface-2); border-radius: 6px; border: 1px solid var(--border);
}
.existing-client-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.form-hint { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; margin-top: 4px; }

/* Installment amount read-only display */
.installment-amount-display {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 7px 11px;
  font-size: var(--fs-sm);
  font-weight: 500;
  min-height: 36px;
  display: flex;
  align-items: center;
}

/* ── Chart Labels ────────────────────────────────────────────── */
.chart-period-label {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* ── Footer ──────────────────────────────────────────────────── */
.crm-footer {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  background: var(--bg);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}
.crm-footer-dot { opacity: 0.4; }
.crm-footer.cw-active { padding-top: 26px; padding-bottom: 26px; }

/* ── Settings generic row ────────────────────────────────────── */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  flex-wrap: wrap;
}
.settings-row-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-row-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text-primary);
}
.settings-row-sub {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.settings-row-control { flex-shrink: 0; }

/* ── Theme Toggle ────────────────────────────────────────────── */
.theme-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.theme-toggle-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theme-toggle-title { font-size: var(--fs-base); font-weight: 500; color: var(--text-primary); }
.theme-toggle-sub   { font-size: var(--fs-xs); color: var(--text-secondary); }

.theme-seg-control {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.theme-seg-btn {
  padding: 5px 11px;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.theme-seg-btn:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}
.theme-seg-btn.active {
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}

/* Session format toggle */
.session-fmt-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
  margin-bottom: 14px;
}
.session-fmt-btn {
  padding: 5px 12px;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.session-fmt-btn:hover { background: var(--surface-hover); color: var(--text-primary); }
.session-fmt-btn.active {
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}

/* Continuity rate suggestion hint */
.continuity-suggest {
  margin-top: 6px;
  margin-bottom: -10px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.continuity-suggest strong {
  color: #d97706;
  font-weight: 500;
}
.continuity-suggest-use {
  background: none;
  border: 1px solid rgba(217,119,6,0.35);
  border-radius: 4px;
  color: #d97706;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 2px 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.continuity-suggest-use:hover { background: rgba(217,119,6,0.1); }

/* Continuity note in charge summary */
.charge-continuity-note {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-weight: 500;
}

/* ── Contact Info Card ───────────────────────────────────────────── */
.contact-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-card-edit {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px 6px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
}
.contact-info-card:hover .btn-card-edit { opacity: 1; }
.btn-card-edit:hover { color: var(--text-primary); background: var(--hover-overlay); }

/* Contact info view rows */
.contact-info-view { padding: 6px 0; }

.ci-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--row-border);
}
.ci-row:last-child { border-bottom: none; }
.ci-row--addr { align-items: flex-start; }

.ci-icon {
  flex-shrink: 0;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  width: 18px;
}
.ci-icon--top { margin-top: 2px; }

.ci-val {
  font-size: var(--fs-base);
  color: var(--text-primary);
  flex: 1;
}
.ci-addr {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.6;
}
.ci-addr span { font-size: var(--fs-base); color: var(--text-primary); }
.ci-empty { color: var(--text-secondary); }
.ci-age {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-left: 6px;
}

.ci-link {
  color: var(--text-primary);
  text-decoration: none;
}
.ci-link:hover { text-decoration: underline; }
.ci-link--accent { color: var(--accent); }
.ci-link--accent:hover { text-decoration: underline; }
.ci-ig-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  color: var(--accent);
  opacity: 0.75;
  transition: opacity 0.15s;
  vertical-align: middle;
}
.ci-ig-arrow:hover { opacity: 1; }
.ci-acquisition { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.ci-label { font-size: var(--fs-xs); color: var(--text-muted); min-width: 88px; }
.ci-client-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  text-decoration: underline;
}
.ci-client-link:hover { opacity: 0.8; }

/* Client autocomplete search */
.client-search-wrap { position: relative; }
.client-search-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  z-index: 200;
  overflow: hidden;
}
.cs-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.cs-item:hover { background: var(--hover, rgba(255,255,255,0.06)); }
.cs-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  flex-shrink: 0;
}
.cs-name { font-size: var(--fs-sm); flex: 1; }

/* Referrals card */
.referral-count-badge {
  background: var(--primary-dim);
  color: var(--primary);
  border-radius: 6px;
  padding: 2px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.referrals-list { padding: 0; }
.referral-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.12s;
}
.referral-row:last-child { border-bottom: none; }
.referral-row:hover { background: var(--hover, rgba(255,255,255,0.06)); }
.referral-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-dim);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  flex-shrink: 0;
}
.referral-name { flex: 1; font-size: var(--fs-sm); }

/* Contact inline edit form */
.contact-edit-form { padding: 16px 20px 20px; }

.ce-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.ce-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.ce-field label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ce-field input,
.ce-field select,
.ce-field textarea {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: var(--fs-base);
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.ce-field textarea {
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  min-height: 62px;
}
.ce-field input:focus,
.ce-field select:focus,
.ce-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.ce-help {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.45;
}
.ce-field--full { margin-bottom: 10px; }
.ce-field--grow { flex: 1; }
.ce-field--state { flex: 0 0 76px; }
.ce-field--zip { flex: 0 0 100px; }
.ce-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.btn-ce-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: var(--fs-sm);
  transition: color 0.15s, border-color 0.15s;
}
.btn-ce-cancel:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.btn-ce-save {
  background: var(--primary);
  border: none;
  color: #fff;
  border-radius: 6px;
  padding: 8px 20px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background 0.15s;
}
.btn-ce-save:hover { background: var(--primary-hover); }

/* ============================================================
   BRAND COLOR PICKERS (settings)
   ============================================================ */
.brand-colors-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 14px;
}

.color-swatch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--row-border);
}
.color-swatch-row:last-child { border-bottom: none; }

.color-swatch-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.color-swatch-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.color-swatch-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.color-picker-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.color-picker-input {
  width: 36px;
  height: 36px;
  border: 2px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  padding: 2px;
  background: none;
  flex-shrink: 0;
}
.color-picker-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker-input::-webkit-color-swatch { border: none; border-radius: 4px; }
.color-hex-input {
  width: 84px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-family: 'SF Mono', 'Fira Code', monospace;
  padding: 7px 10px;
  text-transform: uppercase;
}
.color-hex-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* Forecast lead badge */
.fc-pipe-lead-badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(99,102,241,0.15);
  color: #6366f1;
  border-radius: 20px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ============================================================
   REVENUE FORECAST
   ============================================================ */

/* ============================================================
   INBOX — coach messaging
   ============================================================ */

/* Inbox view override — no padding, fill the container exactly */
#view-inbox {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#view-inbox .view-header {
  padding: 20px 24px 0;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.inbox-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
@media (max-width: 800px) {
  .inbox-layout { grid-template-columns: 1fr; }
  .inbox-list-pane.conv-open { display: none; }
  .inbox-chat-pane { border-left: none !important; }
}

.inbox-list-pane {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.inbox-search-wrap {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
}
/* New-conversation affordance + client picker */
.inbox-compose-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
}
.inbox-compose-btn:hover { color: var(--text); border-color: var(--text-subtle); }
.inbox-compose-panel {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.inbox-compose-list { max-height: 260px; overflow-y: auto; margin-top: 8px; }
.inbox-compose-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.inbox-compose-item:hover { background: var(--surface); }
.inbox-compose-empty { padding: 10px; font-size: 12.5px; color: var(--text-subtle); }
.inbox-search {
  width: 100%;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  outline: none;
}
.inbox-search:focus { border-color: var(--primary); }
.inbox-search::placeholder { color: var(--text-muted); }

.inbox-conversations {
  flex: 1;
  overflow-y: auto;
}
.inbox-conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.inbox-conv-item:hover { background: var(--surface-2); }
.inbox-conv-item.active {
  background: var(--primary-bg, rgba(99,102,241,0.08));
  border-left: 3px solid var(--primary);
  padding-left: 13px;
}

.inbox-conv-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary-bg, rgba(99,102,241,0.1));
  color: var(--primary);
  font-size: var(--fs-base);
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.inbox-conv-info { flex: 1; min-width: 0; }
.inbox-conv-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-conv-preview {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.inbox-conv-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.inbox-conv-time {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.inbox-conv-unread {
  min-width: 18px; height: 18px;
  padding: 0 5px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #fff;
  background: var(--primary);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.inbox-conv-avatar--group {
  background: var(--surface-hover);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}
.inbox-conv-member-count {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 4px;
}
.inbox-group-member-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 8px;
}
.inbox-group-delete {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.inbox-group-delete:hover {
  background: var(--danger-dim);
  color: var(--danger);
  border-color: var(--danger);
}
.inbox-msg-sender {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 8px 0 2px 4px;
}
.inbox-conv-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.inbox-chat-pane {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  overflow: hidden;
  min-height: 0;
}
.inbox-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  min-height: 56px;
}
.inbox-chat-back {
  display: none;
  background: none;
  border: none;
  color: var(--primary);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
}
@media (max-width: 800px) {
  .inbox-chat-back { display: inline-flex; }
}
.inbox-chat-name {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
}
.inbox-chat-name--link {
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.inbox-chat-name--link:hover { color: var(--primary); }
.inbox-call-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.inbox-call-btn:hover { color: #22c55e; background: rgba(34,197,94,0.1); }

/* ── Filter tabs ──────────────────────────────────────── */
.inbox-filter-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.inbox-filter-tabs::-webkit-scrollbar { display: none; }
.inbox-filter-tab {
  padding: 5px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}
.inbox-filter-tab:hover { background: var(--surface-2); color: var(--text); }
.inbox-filter-tab.active {
  background: var(--primary-bg, rgba(99,102,241,0.08));
  color: var(--primary);
  border-color: rgba(99,102,241,0.2);
}

/* In-conversation channel filter strip — same tabs as the list filter, sitting
   under the chat header. Only rendered when the thread spans >1 channel. */
.inbox-conv-filter {
  display: flex;
  gap: 2px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
}
.inbox-conv-filter::-webkit-scrollbar { display: none; }

/* ── Chat header action buttons ───────────────────────── */
.inbox-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.inbox-ha-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.inbox-ha-btn:hover { background: var(--surface-2); color: var(--text); }
.inbox-ha-btn.active { color: #eab308; }
.inbox-ha-btn.active:hover { color: #ca8a04; }
.inbox-ha-btn--danger:hover { color: var(--danger); background: var(--danger-dim, rgba(239,68,68,0.08)); }

/* ── Conversation list indicators ─────────────────────── */
.inbox-conv-star {
  color: #eab308;
  margin-right: 4px;
  vertical-align: -1px;
  flex-shrink: 0;
}
.inbox-conv-ch {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 1px 4px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: 1px;
}
.inbox-conv-ch--sms { background: rgba(34,197,94,0.1); color: #22c55e; }
.inbox-conv-ch--email { background: rgba(99,102,241,0.1); color: var(--primary); }
.inbox-conv-ch--call { background: rgba(234,179,8,0.1); color: #eab308; }

/* ── Scheduled button in inbox header ──────────────────── */
.inbox-scheduled-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.inbox-scheduled-btn:hover { color: var(--text); border-color: var(--primary); }

/* ── Scheduled queue modal ────────────────────────────── */
.sched-queue-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
}
.sched-queue-tab {
  padding: 5px 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.sched-queue-tab:hover { color: var(--text); background: var(--surface-2); }
.sched-queue-tab.active {
  color: var(--primary);
  background: var(--primary-bg, rgba(99,102,241,0.08));
  border-color: rgba(99,102,241,0.2);
}
.sched-queue-body {
  overflow-y: auto;
  max-height: 420px;
}
.sched-queue-item {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.sched-queue-item:last-child { border-bottom: none; }
.sched-queue-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sched-queue-client {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.sched-queue-time {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.sched-queue-item-body {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sched-queue-item-actions {
  margin-top: 6px;
}
.sched-queue-cancel {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--danger, #ef4444);
  cursor: pointer;
  transition: all 0.15s;
}
.sched-queue-cancel:hover { background: var(--danger-dim, rgba(239,68,68,0.08)); border-color: var(--danger); }

/* ── Inline scheduled (GHL-style) ─────────────────────── */
.inbox-sched-inline {
  margin: 8px 0;
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.inbox-sched-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(99,102,241,0.08);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--primary);
}
.inbox-sched-time {
  font-weight: 500;
  color: var(--text-muted);
}
.inbox-sched-cancel {
  margin-left: auto;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
}
.inbox-sched-cancel:hover { color: var(--danger); }
.inbox-sched-preview {
  padding: 8px 12px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Group read-by count — shown on coach's sent group messages */
.inbox-msg-group-read {
  font-size: 11px;
  color: var(--text-muted, #71717a);
  margin-left: 4px;
  font-weight: 500;
}
.inbox-msg-group-read--all {
  color: var(--primary, #6366f1);
}

/* Typing indicator — dots while the client is composing */
.inbox-typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 10px 14px;
  margin-top: 4px;
  background: var(--panel, #18181b);
  border: 1px solid var(--border, #27272a);
  border-radius: 16px 16px 16px 4px;
  max-width: 60px;
}
.inbox-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted, #71717a);
  animation: inbox-typing-bounce 1.2s infinite ease-in-out;
}
.inbox-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.inbox-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes inbox-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.inbox-date-sep {
  text-align: center;
  margin: 12px 0 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.inbox-date-sep span {
  background: var(--surface-2);
  padding: 3px 10px;
  border-radius: 8px;
}
.inbox-msg {
  max-width: 70%;
  padding: 9px 14px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-bottom: 2px;
}
/* Form-check family — a client's form-check clip AND any reply quoting one.
   Review work reads as its own thread at a glance. A tinted surface + a
   hairline edge, never a thick left border (flat-row rule); the amber-family
   edge is the same "needs your attention" language the review chips use, and
   the Mark-reviewed button + the quote text carry the meaning in words. */
.inbox-msg--formcheck {
  background: color-mix(in srgb, var(--warning) 7%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--warning) 22%, transparent);
}
.inbox-msg--formcheck.inbox-msg--coach {
  /* A coach reply keeps its sapphire identity; the amber edge alone marks it
     as form-check work (colour is never the sole signal — the quote names it). */
  background: var(--primary);
  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
}

/* Links inside a message. `currentColor` rather than a fixed hue: a coach
   bubble's background IS var(--primary), so a var(--primary) link was the same
   colour as the bubble and read as an empty gap. Inheriting the text colour
   can't collide with the background in ANY context — coach bubble (white on
   sapphire), client bubble (light on surface-2), or an email card.

   The underline is permanent, not hover-only. Colour is already carrying no
   information here, so the underline is the ONLY thing marking a link — the
   hover state thickens it rather than introducing it. */
.msg-link {
  color: currentColor;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  transition: text-decoration-color .12s ease, text-decoration-thickness .12s ease;
}
.msg-link:hover,
.msg-link:focus-visible {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

.inbox-msg--coach {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.inbox-msg--coach.inbox-first { border-top-right-radius: 18px; }
.inbox-msg--coach.inbox-mid { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.inbox-msg--coach.inbox-last { border-top-right-radius: 6px; border-bottom-right-radius: 18px; }
.inbox-msg--coach.inbox-solo { border-radius: 18px; border-bottom-right-radius: 6px; }
.inbox-msg--client {
  align-self: flex-start;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 6px;
}
.inbox-msg--client.inbox-first { border-top-left-radius: 18px; }
.inbox-msg--client.inbox-mid { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.inbox-msg--client.inbox-last { border-top-left-radius: 6px; border-bottom-left-radius: 18px; }
.inbox-msg--client.inbox-solo { border-radius: 18px; border-bottom-left-radius: 6px; }
.inbox-msg-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
  margin-bottom: 4px;
}
.inbox-msg-time--coach { justify-content: flex-end; padding-right: 4px; }
.inbox-msg-time--client { justify-content: flex-start; padding-left: 4px; }
/* Per-message delivery status — text labels (replaces the old double-check
   icons). "Seen" emphasized (the meaningful signal); Delivered/Sent muted;
   Failed in danger color. */
.inbox-msg-status {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.inbox-msg-status--seen      { color: var(--primary); font-weight: 600; }
.inbox-msg-status--delivered { color: var(--text-muted); }
.inbox-msg-status--sent      { color: var(--text-subtle); }
.inbox-msg-status--failed    { color: var(--danger); font-weight: 600; }

.inbox-chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.inbox-chat-input {
  flex: 1;
  padding: 10px 14px;
  font-size: var(--fs-base);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 22px;
  color: var(--text);
  outline: none;
  resize: none;
  max-height: 100px;
  overflow-y: auto;
  font-family: inherit;
}
.inbox-chat-input:focus { border-color: var(--primary); }
.inbox-chat-input::placeholder { color: var(--text-muted); }
.inbox-chat-send {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--primary);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.inbox-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
.inbox-schedule-msg-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
.inbox-schedule-msg-btn:hover { color: var(--accent); }

/* ── Unified Composer ─────────────────────────────────── */
.uc-wrap {
  border-top: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: rgba(99,102,241,0.03);
  flex-shrink: 0;
  position: relative;
}
/* Inline row: dropdown + textarea + voice + send */
.uc-inline-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
}
.uc-channel-dropdown { position: relative; }
.uc-channel-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}
.uc-channel-trigger:hover { border-color: var(--accent); }
.uc-channel-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  z-index: 50;
  min-width: 150px;
  padding: 4px;
  backdrop-filter: blur(12px);
}
.uc-channel-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  text-align: left;
}
.uc-channel-option:hover { background: var(--bg-hover); }
.uc-channel-option.active { color: var(--accent); font-weight: 500; }
/* Channel fields */
.uc-fields { padding: 0 12px; border-bottom: 1px solid var(--border); }
.uc-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
}
.uc-field-row:last-child { border-bottom: none; }
.uc-field-label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--fs-xs);
  min-width: 48px;
  flex-shrink: 0;
}
.uc-field-value {
  color: var(--text);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uc-field-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-xs);
  padding: 2px 0;
  outline: none;
}
.uc-field-input::placeholder { color: var(--text-muted); }
.uc-textarea {
  flex: 1;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 18px;
  color: var(--text);
  outline: none;
  resize: none;
  min-height: 36px;
  /* Grows with the message (height is set by _autogrowComposer) and stops
     here, ~9 lines, before it starts eating the conversation above it. Was
     100px with nothing ever setting height, so the field sat at 36px and a
     coach typing a long message could see exactly one line of it. For SMS and
     email, whose min-height is 80px, the old cap left barely 20px of growth. */
  max-height: 220px;
  overflow-y: auto;
  font-family: inherit;
}
.uc-textarea:focus { border-color: var(--accent); }
.uc-textarea::placeholder { color: var(--text-muted); }
/* Expanded textarea for SMS/email */
.uc-wrap[data-channel="sms"] .uc-textarea,
.uc-wrap[data-channel="email"] .uc-textarea {
  border-radius: 8px;
  min-height: 80px;
  padding: 10px 14px;
}
.uc-voice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.uc-voice-btn:hover { color: var(--text); }
.uc-attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.uc-attach-btn:hover { color: var(--primary); }
.uc-wrap[data-channel="sms"] .uc-voice-btn,
.uc-wrap[data-channel="email"] .uc-voice-btn { display: none; }

/* Attachment pills */
.uc-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 12px 0;
}
.uc-attachment-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-xs);
  color: var(--text);
}
.uc-attachment-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uc-attachment-size { color: var(--text-muted); font-size: var(--fs-xs); }
.uc-attachment-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}
.uc-attachment-remove:hover { color: var(--danger); background: var(--danger-dim, rgba(239,68,68,0.08)); }

/* Email card attachment list */
.inbox-ecard-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
}
.inbox-ecard-att {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
/* Email/SMS: push send button to the right */
.uc-wrap[data-channel="sms"] .uc-inline-row,
.uc-wrap[data-channel="email"] .uc-inline-row {
  justify-content: space-between;
}
.uc-wrap[data-channel="email"] .uc-textarea { display: none; }
/* Split send button */
.uc-send-split {
  display: flex;
  position: relative;
  margin-left: auto;
}
.uc-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  border: none;
  background: var(--accent);
  color: #fff;
  border-radius: 6px 0 0 6px;
  cursor: pointer;
}
.uc-send-btn:hover { opacity: 0.9; }
.uc-send-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 32px;
  border: none;
  background: var(--accent);
  color: #fff;
  border-radius: 0 6px 6px 0;
  border-left: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
}
.uc-send-drop:hover { opacity: 0.9; }
.uc-send-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  z-index: 50;
  min-width: 140px;
  padding: 4px;
  backdrop-filter: blur(12px);
}
.uc-send-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  border-radius: 4px;
  text-align: left;
}
.uc-send-option:hover { background: var(--bg-hover); }

/* Voice recording */
.inbox-voice-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.inbox-voice-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--text-muted); }
.inbox-voice-btn.recording {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  animation: voicePulse 1.2s ease-in-out infinite;
}
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}
.inbox-voice-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--danger-dim);
  border-top: 1px solid var(--danger);
}
.inbox-voice-bar.hidden { display: none; }
.inbox-voice-indicator {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--danger);
  animation: voicePulse 1.2s ease-in-out infinite;
}
.inbox-voice-timer {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
}
.inbox-voice-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex: 1;
}
.inbox-voice-cancel {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s;
}
.inbox-voice-cancel:hover { color: var(--danger); }
/* Voice attachment pill */
.inbox-voice-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 14px 0;
  padding: 5px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text);
  width: fit-content;
}
.inbox-voice-attachment-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.12s;
}
.inbox-voice-attachment-play:hover { opacity: 0.85; }
.inbox-voice-attachment-play svg { margin-left: 1px; }
.inbox-voice-attachment-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--surface-3, #2a2e3d);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.inbox-voice-attachment-remove:hover { background: var(--danger); color: #fff; }

.inbox-voice-stop-rec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.12);
  color: #ef4444;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.inbox-voice-stop-rec:hover { background: rgba(239,68,68,0.22); border-color: rgba(239,68,68,0.5); }
.inbox-voice-stop-rec::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #ef4444;
  flex-shrink: 0;
}
.inbox-voice-send {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}
.inbox-voice-send:hover { opacity: 0.9; }

/* Voice message bubbles */
.inbox-msg--voice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}
.voice-play-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.2);
  color: inherit;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.inbox-msg--client .voice-play-btn { background: rgba(255,255,255,0.2); }
.inbox-msg--coach .voice-play-btn { background: var(--surface-hover); }
.voice-play-btn:hover { opacity: 0.8; }
.voice-progress-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.voice-progress-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.2);
  overflow: hidden;
}
.inbox-msg--coach .voice-progress-bar { background: var(--border); }
.voice-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: currentColor;
  transition: width 0.2s linear;
}
.inbox-msg--client .voice-progress-fill { background: rgba(255,255,255,0.6); }
.inbox-msg--coach .voice-progress-fill { background: var(--primary); }
.voice-duration {
  font-size: var(--fs-xs);
  opacity: 0.7;
}

.inbox-chat-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ============================================================
   CHAT WIDGET (.cw-*)
   ============================================================ */

/* Footer slot for minimized pill — pushed to far right, accounts for scrollbar */
#cw-footer-slot {
  position: absolute;
  right: 0;
  padding-right: calc(32px + 8px);
}
#cw-footer-slot.cw-hidden { display: none; }

/* Expanded panel — fixed above footer, right-aligned with card edge */
#chat-widget {
  position: fixed;
  bottom: 54px;
  right: calc(32px + 8px);
  z-index: 9000;
  font-family: inherit;
}
#chat-widget.cw-hidden { display: none; }

/* Minimized pill (inside footer) */
.cw-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(37, 87, 214, 0.08);
  border: 1px solid rgba(37, 87, 214, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.cw-pill:hover { background: rgba(37, 87, 214, 0.14); border-color: rgba(37, 87, 214, 0.35); }
.cw-pill-icon { color: var(--primary); flex-shrink: 0; opacity: 0.8; }
.cw-pill-name { font-size: var(--fs-xs); font-weight: 500; color: var(--primary); letter-spacing: 0.02em; }
.cw-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
}

/* Expanded panel */
.cw-panel {
  width: 380px;
  height: 520px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
  overflow: hidden;
}

.cw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cw-header-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.cw-header-actions { display: flex; gap: 4px; flex-shrink: 0; }
.cw-btn-minimize, .cw-btn-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.cw-btn-minimize:hover, .cw-btn-close:hover { background: var(--surface-2); color: var(--text); }

/* Messages area */
.cw-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cw-messages .inbox-date-sep { margin: 12px 0 8px; }
.cw-messages .inbox-msg { max-width: 85%; font-size: var(--fs-sm); }
.cw-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
  padding: 20px;
}

/* Voice attachment pill */
.cw-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px;
  padding: 5px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text);
  width: fit-content;
}
.cw-attachment.cw-hidden { display: none; }
.cw-attachment-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.12s;
}
.cw-attachment-play:hover { opacity: 0.85; }
.cw-attachment-play svg { margin-left: 1px; }
.cw-attachment-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--surface-3, #2a2e3d);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.cw-attachment-remove:hover { background: var(--danger, #ef4444); color: #fff; }

/* Composer */
.cw-composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.cw-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: var(--fs-sm);
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  outline: none;
  max-height: 80px;
  line-height: 1.4;
}
.cw-input:focus { border-color: var(--primary); }
.cw-input::placeholder { color: var(--text-muted); }

.cw-voice-btn, .cw-send-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.cw-voice-btn:hover, .cw-send-btn:hover { color: var(--text); background: var(--surface-2); }
.cw-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cw-voice-btn.recording { color: #ef4444; animation: cw-pulse 1s infinite; }
@keyframes cw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Composer action buttons (attach, template) */
.cw-composer-btn {
  background: none; border: none; color: var(--text-subtle); cursor: pointer;
  padding: 6px; border-radius: 6px; display: flex; align-items: center;
}
.cw-composer-btn:hover { color: var(--text); background: var(--surface-2); }

/* File attachment pill */
.cw-file-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; margin: 0 12px 4px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 8px; font-size: var(--fs-xs); color: var(--text);
}
/* There is NO generic .cw-hidden rule in this file — every widget element
   carries its own compound (see .cw-attachment.cw-hidden etc.). This one was
   missing, so the empty pill + its × rendered permanently above the composer
   ("looks like an empty message" — Clayton, S68). */
.cw-file-pill.cw-hidden { display: none; }
.cw-file-pill-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }

/* Chat template picker */
.cw-chat-templates {
  border-top: 1px solid var(--border); padding: 4px 8px;
  max-height: 160px; overflow-y: auto; background: var(--surface);
}
.cw-tmpl-item {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; font-size: var(--fs-xs); font-weight: 500;
  background: none; border: none; cursor: pointer;
  border-radius: 6px; color: var(--text); font-family: inherit;
}
.cw-tmpl-item:hover { background: var(--surface-2); }
.cw-tmpl-empty { padding: 10px; font-size: var(--fs-xs); color: var(--text-subtle); text-align: center; }

/* Message attachment rendering */
.inbox-msg-attachment-img { margin-top: 4px; }
.inbox-msg-attachment-img img { max-width: 220px; max-height: 180px; border-radius: 8px; cursor: pointer; }
.inbox-msg-attachment-video { margin-top: 4px; }
.inbox-msg-attachment-video video { max-width: 240px; max-height: 320px; border-radius: 8px; display: block; background: #000; }
.cw-fv-review-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px; padding: 5px 11px;
  background: var(--primary); color: #fff; border: none; border-radius: 6px;
  font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
}
.cw-fv-review-btn:hover { filter: brightness(1.08); }
.cw-fv-review-btn--done, .cw-fv-review-btn:disabled {
  background: var(--surface-2); color: var(--text-subtle); cursor: default; filter: none;
}

/* Check-in review: form checks awaiting review */
.cr-fv-section:not(:empty) { margin-bottom: 14px; }
.cr-fv-label {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-subtle);
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px;
}
.cr-fv-count {
  background: var(--primary); color: #fff; border-radius: 999px;
  font-size: 10px; font-weight: 700; padding: 1px 7px;
}
.cr-fv-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); margin-bottom: 8px;
}
.cr-fv-card video { width: 120px; max-height: 160px; border-radius: 8px; background: #000; flex-shrink: 0; display: block; }
.cr-fv-video-wrap { position: relative; flex-shrink: 0; line-height: 0; }
/* Expand → play the form video big (theater) so it's usable in a screen-recording response. */
.cr-fv-expand {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.62); border: 1px solid rgba(255,255,255,0.28);
  color: #fff; cursor: pointer; padding: 0;
  transition: background 0.15s, border-color 0.15s;
}
.cr-fv-expand:hover { background: var(--primary); border-color: var(--primary); }
.cr-fv-meta { flex: 1; min-width: 0; }
.cr-fv-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.cr-fv-note { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 3px; line-height: 1.4; }
.cr-fv-date { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 4px; }

/* Form-video theater — large centered playback. z-index 850 keeps it BELOW the
   screen-recording controls (9500) and annotation canvas (10001), so the coach
   can draw cues on the big video and it's all captured by the recording. */
.cr-fv-theater {
  position: fixed; inset: 0; z-index: 850;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 52px 24px 32px;
  background: rgba(0, 0, 0, 0.85);
}
.cr-fv-theater-title { color: #fff; font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; }
.cr-fv-theater-video {
  max-width: 92vw; max-height: 80vh; border-radius: 8px; background: #000;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
.cr-fv-theater-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: rgba(255, 255, 255, 0.12); color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.15s;
}
.cr-fv-theater-close:hover { background: rgba(255, 255, 255, 0.22); }
.inbox-msg-attachment-file {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px; padding: 6px 12px;
  background: rgba(0,0,0,0.05); border-radius: 6px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--primary);
  text-decoration: none;
}
.inbox-msg-attachment-file:hover { background: rgba(0,0,0,0.08); }

/* Voice transcript */
.inbox-msg-transcript {
  font-size: var(--fs-xs); color: var(--text-subtle); padding: 2px 12px 6px;
  max-width: 280px; line-height: 1.4; font-style: italic;
}
.inbox-msg-transcript--coach { margin-left: auto; text-align: right; }

/* Message search results */
.inbox-search-results {
  border-bottom: 1px solid var(--border);
  max-height: 300px; overflow-y: auto;
  background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}
.inbox-search-results.hidden { display: none; }
.inbox-search-header {
  padding: 8px 14px; font-size: var(--fs-xs); font-weight: 500;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px;
  border-bottom: 1px solid var(--border);
}
.inbox-search-item {
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border);
}
.inbox-search-item:hover { background: var(--surface-2); }
.inbox-search-item-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.inbox-search-item-date { font-size: var(--fs-xs); font-weight: 400; color: var(--text-subtle); margin-left: 6px; }
.inbox-search-item-body {
  font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbox-search-item-body mark { background: color-mix(in srgb, var(--primary) 25%, transparent); color: var(--text); border-radius: 2px; padding: 0 1px; }
.inbox-search-empty { padding: 16px; text-align: center; font-size: var(--fs-xs); color: var(--text-subtle); }

/* Pinned messages section */
.inbox-pinned-section {
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  background: color-mix(in srgb, #f59e0b 4%, var(--surface));
}
.inbox-pinned-header {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  color: #92400e; display: flex; align-items: center; gap: 4px;
  margin-bottom: 6px; letter-spacing: 0.3px;
}
.inbox-pinned-msg {
  padding: 8px 10px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--border);
  margin-bottom: 4px;
}
.inbox-pinned-msg-body { font-size: var(--fs-sm); color: var(--text); line-height: 1.4; }
.inbox-pinned-msg-meta {
  font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 4px;
  display: flex; align-items: center; justify-content: space-between;
}
.inbox-pinned-unpin {
  background: none; border: none; cursor: pointer;
  color: var(--text-subtle); font-size: var(--fs-lg); padding: 0 4px;
}
.inbox-pinned-unpin:hover { color: var(--error); }

/* Pin button on message meta */
.inbox-pin-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-subtle); padding: 0 2px; margin-left: 4px;
  opacity: 0; transition: opacity 0.15s;
}
.inbox-msg-time:hover .inbox-pin-btn { opacity: 1; }
.inbox-pin-btn.pinned { opacity: 1; color: #f59e0b; }
.inbox-pin-btn:hover { color: var(--primary); }

/* ── Reply micro-floater (above a bubble that replied to another) ── */
.inbox-msg-wrap { position: relative; display: flex; flex-direction: column; }
.inbox-msg-wrap--coach { align-items: flex-end; }
.inbox-msg-wrap--client { align-items: flex-start; }
.inbox-msg-wrap.inbox-msg-wrap--highlight .inbox-msg,
.inbox-msg-wrap.inbox-msg-wrap--highlight .inbox-reply-floater {
  box-shadow: 0 0 0 2px rgba(91,84,235,0.45);
  transition: box-shadow 400ms ease;
}

.inbox-reply-floater {
  max-width: 70%;
  opacity: 0.68;
  margin-bottom: 0;
  padding: 4px 11px;
  font-size: 12px;
  border-radius: 14px;
  cursor: pointer;
  line-height: 1.35;
  user-select: none;
  transition: opacity 150ms ease;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
}
/* The text clips, the thumbnail never shrinks. */
.inbox-reply-floater-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Mini media of the quoted message — answers "which clip?" at a glance. */
.inbox-reply-thumb {
  width: 26px; height: 34px;
  flex: none;
  border-radius: 4px;
  object-fit: cover;
  background: #000;
  pointer-events: none;
}
.inbox-reply-floater:hover { opacity: 0.9; }
.inbox-reply-floater--coach {
  background: var(--primary); color: #fff;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 14px;
}
.inbox-reply-floater--client {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 14px;
}
.inbox-reply-connector {
  width: 1px; height: 7px;
  background: rgba(140,145,170,0.4);
  align-self: flex-end;
  margin-right: 14px;
  margin-bottom: -1px;
}
.inbox-msg-wrap--client .inbox-reply-connector {
  align-self: flex-start;
  margin-right: 0;
  margin-left: 14px;
}

/* ── Reactions row (below bubble) ── */
.inbox-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: -2px;
  margin-bottom: 4px;
  padding: 0 4px;
}
.inbox-reactions--coach { align-self: flex-end; }
.inbox-reactions--client { align-self: flex-start; }
.inbox-reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms ease;
  user-select: none;
}
.inbox-reaction-chip:hover { background: rgba(255,255,255,0.08); }
.inbox-reaction-chip--mine {
  background: rgba(91,84,235,0.18);
  border-color: rgba(91,84,235,0.5);
  color: var(--text);
}
.inbox-reaction-emoji { font-size: 12px; line-height: 1; }

/* ── Hover-action strip on messages ── */
.inbox-msg-actions {
  position: absolute;
  top: -14px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px;
  background: rgba(22,24,35,0.98);
  border: 1px solid var(--border);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 3;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
[data-theme="light"] .inbox-msg-actions {
  background: #fff;
  border-color: #e4e4e7;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.inbox-msg-wrap--coach .inbox-msg-actions { right: 4px; }
.inbox-msg-wrap--client .inbox-msg-actions { left: 4px; }
.inbox-msg-wrap:hover .inbox-msg-actions {
  opacity: 1;
  pointer-events: auto;
}
.inbox-msg-action-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--text);
  transition: background 100ms ease;
  padding: 0;
}
.inbox-msg-action-btn:hover {
  background: rgba(255,255,255,0.08);
}
[data-theme="light"] .inbox-msg-action-btn:hover { background: rgba(0,0,0,0.05); }

/* Quick emoji set rendered inline in the strip */
.inbox-msg-action-emoji {
  font-size: 16px; line-height: 1;
}

/* ── Reply composer chip ── */
.inbox-reply-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 0 14px 6px;
  border-left: 2px solid var(--primary);
  background: rgba(91,84,235,0.08);
  border-radius: 8px;
}
.inbox-reply-chip-body {
  flex: 1;
  min-width: 0;
}
.inbox-reply-chip-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.inbox-reply-chip-preview {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-reply-chip-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
}
.inbox-reply-chip-close:hover { color: var(--text); }

/* ── Emoji picker popover ── */
.inbox-emoji-popover {
  position: absolute;
  z-index: 1000;
  width: 320px;
  max-height: 380px;
  background: rgba(22,24,35,0.98);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
[data-theme="light"] .inbox-emoji-popover {
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.15);
}
.inbox-emoji-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
}
.inbox-emoji-tab {
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  white-space: nowrap;
}
.inbox-emoji-tab.active {
  color: var(--text);
  background: rgba(91,84,235,0.18);
}
.inbox-emoji-grid {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.inbox-emoji-cell {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  font-size: 22px;
  padding: 0;
  transition: background 80ms ease;
}
.inbox-emoji-cell:hover { background: rgba(255,255,255,0.06); }
[data-theme="light"] .inbox-emoji-cell:hover { background: rgba(0,0,0,0.04); }

/* ── System Health event modal ── */
.sh-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
  animation: shFadeIn 150ms ease-out;
}
@keyframes shFadeIn { from { opacity: 0; } to { opacity: 1; } }
.sh-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  max-width: 640px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: shSlideIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes shSlideIn {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.sh-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.sh-modal-header-left {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}
.sh-modal-sev {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 3px;
}
.sh-modal-title-wrap { flex: 1; min-width: 0; }
.sh-modal-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}
.sh-modal-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.sh-modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  flex-shrink: 0;
}
.sh-modal-close:hover { color: var(--text); }

.sh-modal-status {
  margin: 0 22px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-top: 14px;
}
.sh-modal-status--resolved {
  background: rgba(18,165,88,0.1);
  color: #12a558;
  border: 1px solid rgba(18,165,88,0.3);
}
.sh-modal-status--ongoing {
  background: rgba(229,72,77,0.1);
  color: #e5484d;
  border: 1px solid rgba(229,72,77,0.3);
}
.sh-modal-status--stale {
  background: rgba(107,112,144,0.1);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.sh-modal-status--info {
  background: rgba(91,84,235,0.1);
  color: var(--primary);
  border: 1px solid rgba(91,84,235,0.3);
}
.sh-modal-section {
  padding: 14px 22px 0;
}
.sh-modal-section:last-of-type { padding-bottom: 10px; }
.sh-modal-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.sh-modal-body {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
}
.sh-modal-body--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--text-muted);
  word-break: break-all;
}
.sh-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 20px;
}
.sh-modal-detail {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
}
.sh-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.sh-modal-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 120ms ease;
}
.sh-modal-copy-btn:hover { opacity: 0.88; }
.sh-modal-ok-btn {
  padding: 8px 14px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
}
.sh-modal-ok-btn:hover { background: var(--bg); }

/* Hover state on log rows */
.sh-row:hover td { background: var(--bg); }
.sh-ongoing-dot {
  animation: shDotPulse 1.4s ease-in-out infinite;
}
@keyframes shDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Admin Panel button — health badge (owner only) ── */
#btn-admin-panel {
  position: relative;
}
.admin-health-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #ef8f1f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--surface), 0 2px 8px rgba(239,143,31,0.45);
  pointer-events: none;
  letter-spacing: 0.2px;
  z-index: 2;
  animation: adminBadgePulse 1.8s ease-in-out infinite;
}
.admin-health-badge--error {
  background: #e5484d;
  box-shadow: 0 0 0 2px var(--surface), 0 2px 10px rgba(229,72,77,0.55);
  animation: adminBadgePulseError 1.4s ease-in-out infinite;
}
#btn-admin-panel.admin-health-active {
  box-shadow: 0 0 0 1px rgba(239,143,31,0.5);
}
#btn-admin-panel.admin-health-active:has(.admin-health-badge--error) {
  box-shadow: 0 0 0 1px rgba(229,72,77,0.6);
}
@keyframes adminBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
@keyframes adminBadgePulseError {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px var(--surface), 0 2px 10px rgba(229,72,77,0.55); }
  50% { transform: scale(1.18); box-shadow: 0 0 0 2px var(--surface), 0 4px 18px rgba(229,72,77,0.85); }
}

/* ── Realtime-degraded banner ── */
.inbox-realtime-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin: 0;
  background: rgba(239,143,31,0.1);
  border-bottom: 1px solid rgba(239,143,31,0.3);
  color: #ef8f1f;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1px;
  animation: rtBannerIn 180ms ease-out;
}
@keyframes rtBannerIn {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Voice recording bar */
.cw-voice-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.cw-voice-bar.cw-hidden { display: none; }
.cw-voice-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: cw-pulse 1s infinite;
}
.cw-voice-timer { font-size: var(--fs-xs); font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.cw-voice-label { font-size: var(--fs-xs); color: var(--text-muted); flex: 1; }
.cw-voice-cancel, .cw-voice-stop {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}
.cw-voice-cancel { background: var(--surface-2); color: var(--text-muted); }
.cw-voice-cancel:hover { background: var(--surface-3, #2a2e3d); color: var(--text); }
.cw-voice-stop-rec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 6px;
  background: rgba(239,68,68,0.12);
  color: #ef4444;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.cw-voice-stop-rec:hover { background: rgba(239,68,68,0.22); border-color: rgba(239,68,68,0.5); }
.cw-voice-stop-rec::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #ef4444;
  flex-shrink: 0;
}
.cw-voice-send {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cw-voice-send:hover { opacity: 0.88; }
.cw-voice-send.cw-hidden, .cw-voice-stop-rec.cw-hidden { display: none; }

/* Light theme overrides */
[data-theme="light"] .cw-pill { background: var(--primary); }
[data-theme="light"] .cw-pill:hover { opacity: 0.88; }
[data-theme="light"] .cw-panel { box-shadow: 0 8px 32px rgba(0,0,0,0.15); }

/* ============================================================
   FORECAST
   ============================================================ */


/* At-risk list */
.fc-risk-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.fc-risk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  transition: background 0.15s;
}
.fc-risk-row:hover { background: var(--surface-hover); }
.fc-risk-name {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-risk-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fc-risk-days {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
}
.fc-risk-days--urgent {
  color: var(--warning);
  border-color: rgba(245,158,11,0.35);
  background: rgba(245,158,11,0.08);
}
.fc-risk-billing {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fc-risk-value {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--danger);
  white-space: nowrap;
}

/* Pipeline list */
.fc-pipe-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0 12px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.fc-pipe-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.fc-pipe-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  transition: background 0.15s;
}
.fc-pipe-row:hover { background: var(--surface-hover); }
.fc-pipe-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-pipe-stage {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 9px;
  white-space: nowrap;
}
.fc-pipe-value {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--success);
  white-space: nowrap;
  text-align: right;
  min-width: 80px;
}
.fc-pipe-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px 0;
  margin-top: 6px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.fc-empty {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding: 16px 12px;
  text-align: center;
  font-style: italic;
}

/* ============================================================
   RENEWAL PIPELINE BOARD
   ============================================================ */

/* Stats bar */
.pipeline-stats-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.pipeline-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pipeline-stat:hover {
  border-color: rgba(124,58,237,0.55);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.18), 0 4px 20px rgba(124,58,237,0.15);
}
.ps-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.ps-value {
  font-size: var(--fs-4xl);
  font-weight: 500;
  color: var(--text);
  line-height: 1;
}
.ps-label--urgent { color: var(--warning); }
.ps-value--urgent { color: var(--warning); }

/* Centering shell — sizes to board content, then centers on page */
.pipeline-center-wrap {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

/* Board wrapper — horizontal scroll */
.pipeline-board-wrap {
  overflow-x: auto;
  padding-bottom: 16px;
}
.pipeline-board {
  display: flex;
  gap: 12px;
  min-width: max-content;
  align-items: flex-start;
}

/* Column */
.pipeline-col {
  width: 360px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.pipeline-col.drag-over {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-dim);
}

/* Column header */
.pipeline-col-header {
  padding: 12px 14px 10px;
  background: var(--stage-dim);
  border-bottom: 1px solid var(--border);
}
.pch-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}
.pch-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stage-accent, var(--text-muted));
}
.pch-count {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 6px;
  line-height: 1.6;
}
.pch-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Cards list */
.pipeline-cards {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
}
.pipeline-empty {
  padding: 20px 8px;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

/* PIF opportunity badge on card */
.pc-pif-badge {
  display: inline-flex; align-items: center;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(217,119,6,0.15); color: #d97706;
  border: 1px solid rgba(217,119,6,0.3);
}

/* Renewal Queue — auto-stage combined column */
.pipeline-col--auto { cursor: default; }
.pipeline-group-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px 4px;
  margin-top: 4px;
}
.pipeline-group-hdr:first-child { margin-top: 0; }
.pgh-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pgh-count {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 6px;
}
.pipeline-empty--sm {
  padding: 10px 8px;
  font-size: var(--fs-xs);
}

/* Card */
.pipeline-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: grab;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s, transform 0.1s;
  position: relative;
}
.pipeline-card:hover {
  background: var(--surface-hover);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.pipeline-card.dragging {
  opacity: 0.45;
  cursor: grabbing;
  transform: rotate(1.5deg);
}
.pipeline-card--reach-out {
  border-left: 3px solid var(--warning);
}
.pipeline-card--renewed {
  border-left: 3px solid var(--success);
}
.pipeline-card--not-renewing {
  border-left: 3px solid var(--danger);
  opacity: 0.75;
}
.pipeline-card--pif {
  border-left: 3px solid #d97706;
  background: rgba(217,119,6,0.04);
}

/* Card header row */
.pc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 12px;
}
.pc-name {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
}
.pc-name:hover { color: var(--primary); text-decoration: underline; }
.pc-header-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

/* Days badge */
.pc-days {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}
.pc-days--ok      { background: var(--success-dim);  color: var(--success); }
.pc-days--caution { background: var(--info-dim);      color: var(--info); }
.pc-days--warn    { background: var(--warning-dim);   color: var(--warning); }
.pc-days--urgent  { background: var(--danger-dim);    color: var(--danger); }

/* Note button */
.pc-btn-note {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 2px 7px;
  line-height: 1.4;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.pc-btn-note:hover { color: var(--primary); border-color: var(--primary); }

/* Single info line: End Date · Service · Value */
.pc-info-line {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PIF banner across card top */
.pc-pif-banner {
  margin: -14px -16px 12px;
  padding: 5px 16px;
  background: rgba(217,119,6,0.13);
  border-bottom: 1px solid rgba(217,119,6,0.22);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #d97706;
  text-align: center;
}

/* PIF section — continuity + pitch value rows */
.pc-pif-section {
  border-top: 1px solid rgba(217,119,6,0.2);
  padding-top: 10px;
  margin-bottom: 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pc-pif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pc-pif-row-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}
.pc-pif-rate {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #d97706;
}

/* Last contact + note */
.pc-last-contact {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 4px;
}
.pc-note {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  background: var(--surface-2);
  border-radius: 4px;
  padding: 5px 8px;
  margin-bottom: 7px;
  line-height: 1.4;
  font-style: italic;
}

/* Card action buttons */
.pc-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.pc-actions--full .pc-btn { flex: 1; justify-content: center; }
.pc-btn {
  display: flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
  white-space: nowrap;
}
.pc-btn:hover { opacity: 0.85; }
.pc-btn--primary  { background: var(--primary-dim);  color: var(--primary); }
.pc-btn--urgent   { background: var(--warning-dim);  color: var(--warning); }
.pc-btn--purple   { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.pc-btn--success  { background: var(--success-dim);  color: var(--success); }
.pc-btn--danger   { background: var(--danger-dim);   color: var(--danger); }
.pc-btn--ghost    { background: var(--surface-2);    color: var(--text-muted); border: 1px solid var(--border); }
.pc-btn--pif      { background: rgba(217,119,6,0.14); color: #d97706; font-weight: 500; }

/* Badge service small variant */
.badge-service--sm {
  font-size: var(--fs-xs);
  padding: 1px 6px;
}

/* ── Pipeline Note Modal ───────────────────────────── */
.pipeline-note-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.pipeline-note-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 500px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 40px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: width 0.28s ease;
}
.pipeline-note-modal.pnm-expanded {
  width: min(1080px, calc(100vw - 32px));
  flex-direction: row;
  align-items: stretch;
  max-height: calc(100vh - 40px);
}
/* Left column — form + log */
.pnm-left-col {
  display: flex;
  flex-direction: column;
  flex: 1; /* fills full width when not expanded */
  min-width: 0;
  overflow-y: auto;
}
.pipeline-note-modal.pnm-expanded .pnm-left-col {
  width: 480px;
  min-width: 480px;
  flex: 0 0 480px;
  border-right: 1px solid var(--border);
}
/* Right column — talking points */
.pnm-tp-panel {
  border-top: 2px solid rgba(217,119,6,0.3);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pipeline-note-modal.pnm-expanded .pnm-tp-panel {
  flex: 1;
  border-top: none;
  border-left: 2px solid rgba(217,119,6,0.3);
  max-height: none;
  overflow: hidden; /* children scroll internally */
}
.pnm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.pnm-title {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-primary);
}
.pnm-close {
  background: none;
  border: none;
  font-size: var(--fs-lg);
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.pnm-close:hover { color: var(--text-primary); }
.pnm-body {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
}
.pnm-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.pnm-input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-base);
  font-family: inherit;
  padding: 8px 10px;
  width: 100%;
}
.pnm-input:focus { outline: none; border-color: var(--primary); }
.pnm-textarea {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  padding: 9px 10px;
  width: 100%;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}
.pnm-textarea:focus { outline: none; border-color: var(--primary); }
.pnm-actions {
  padding: 12px 20px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.pnm-save-group {
  display: flex;
  gap: 8px;
  align-items: center;
}
/* Ghost/outline save button for secondary action */
#pnm-save-secondary {
  font-size: var(--fs-xs);
  padding: 7px 12px;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
#pnm-save-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Pipeline window filter ──────────────────────────────── */
.pipeline-controls-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.pw-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 2px;
}
.pw-btn {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pw-btn:hover { color: var(--text-primary); background: var(--surface-hover); }
.pw-btn.active {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: var(--primary);
}

/* ── PIF stats in stats bar ──────────────────────────────── */
.ps-value--pif  { color: #d97706; }
.ps-label--pif  { color: #d97706; }

/* ── PIF potential value input on card ──────────────────── */
.pc-pif-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  gap: 8px;
}
.pc-pif-input-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(217,119,6,0.3);
  border-radius: 4px;
  overflow: hidden;
  width: 110px;
  flex-shrink: 0;
}
.pc-pif-currency {
  display: flex;
  align-items: center;
  padding: 0 6px;
  background: rgba(217,119,6,0.12);
  border-right: 1px solid rgba(217,119,6,0.3);
  color: #d97706;
  font-size: var(--fs-xs);
  font-weight: 500;
  user-select: none;
}
.pc-pif-value-input {
  background: rgba(217,119,6,0.06);
  border: none;
  border-radius: 0;
  color: #d97706;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 6px 7px;
  flex: 1;
  min-width: 0;
  text-align: right;
}
.pc-pif-value-input::placeholder { color: rgba(217,119,6,0.5); font-weight: 400; }
.pc-pif-value-input:focus { outline: none; }
.pc-pif-input-wrap:focus-within { border-color: #d97706; }

/* ── Note count badge on pipeline card ───────────────────── */
.pc-note-count {
  display: inline-block;
  background: var(--surface-hover);
  border-radius: 3px;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 1px 5px;
  color: var(--text-muted);
  margin-right: 5px;
  vertical-align: middle;
}

/* ── Pipeline note log (modal history section) ───────────── */
.pnm-log {
  border-top: 1px solid var(--border);
  max-height: 220px;
  overflow-y: auto;
  padding: 12px 20px 14px;
}
.pnm-log-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.pnm-log-entry {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--row-border);
}
.pnm-log-entry:last-child { border-bottom: none; }
.pnm-log-date {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 80px;
}
.pnm-log-text {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ── Method pills ────────────────────────────────────── */
.pnm-method-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.pnm-method-pill {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pnm-method-pill:hover { border-color: var(--primary); color: var(--primary); }
.pnm-method-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Method badge in log entries */
.pnm-log-method {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--primary-dim, rgba(124,58,237,0.12));
  color: var(--primary);
  border-radius: 3px;
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Talking Points toggle button ────────────────────── */
.pnm-tp-toggle {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 8px 12px;
  background: rgba(217,119,6,0.06);
  border: 1px solid rgba(217,119,6,0.25);
  border-radius: var(--radius-sm);
  color: #d97706;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.pnm-tp-toggle:hover { background: rgba(217,119,6,0.12); }

/* ── Talking Points Panel ────────────────────────────── */
.pnm-tp-panel-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.pnm-tp-panel-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: #d97706;
}

/* Stats summary bar */
.pnm-tp-summary {
  display: flex;
  gap: 6px;
  padding: 14px 20px;
  overflow-x: auto;
}
.tp-stat {
  flex: 1;
  min-width: 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 8px 6px;
}
.tp-stat-val {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}
.tp-stat-lbl {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Tab bar ─────────────────────────────────────────── */
.pnm-tp-accordion { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.tp-tab-bar {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
}
.tp-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 10px 10px;
  flex: 1;
  min-width: 60px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tp-tab:hover { background: var(--surface-2); }
.tp-tab.active {
  border-bottom-color: #d97706;
  background: rgba(217,119,6,0.05);
}
.tp-tab-letter {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 2px solid var(--border);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.tp-tab.active .tp-tab-letter {
  background: #d97706;
  color: #fff;
  border-color: #d97706;
}
.tp-tab-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.15s;
}
.tp-tab.active .tp-tab-label { color: #d97706; }

/* Active section content */
.tp-active-content {
  padding: 16px 20px 20px;
  overflow-y: auto;
  flex: 1;
}

/* ── Accordion sections (legacy — replaced by tabs) ──── */
.tp-section { border-bottom: 1px solid var(--border); }
.tp-section:last-child { border-bottom: none; }
.tp-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
}
.tp-section-header:hover .tp-section-title { color: #d97706; }
.tp-section-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(217,119,6,0.14);
  color: #d97706;
  font-size: var(--fs-xs);
  font-weight: 500;
  flex-shrink: 0;
}
.tp-section-title {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: color 0.15s;
}
.tp-section-chevron {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Section body content (accordion legacy) */
.tp-section-body {
  padding: 0 0 12px 36px;
}
/* Active section heading */
.tp-section-active-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #d97706;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(217,119,6,0.2);
}
/* Shared content styles used by both old accordion + new tabs */
.tp-prompt {
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--text-muted);
  margin: 0 0 8px;
  line-height: 1.5;
}
.tp-points {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
}
.tp-points li {
  position: relative;
  padding: 4px 0 4px 14px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}
.tp-points li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: var(--text-subtle, var(--text-muted));
}

/* Math comparison box */
.tp-math-box {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.tp-math-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.tp-math-row strong { color: var(--text-primary); }
.tp-math-savings strong { color: #16a34a; }

/* Objection blocks */
.tp-objection { margin-bottom: 10px; }
.tp-objection:last-child { margin-bottom: 0; }
.tp-objection-label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-primary);
  background: var(--surface-2);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
}

/* ============================================================
   RENEW CLIENT MODAL
   ============================================================ */

/* Renew button — profile header + pipeline board */
.btn-renew {
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.btn-renew:hover  { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.35); }
.btn-renew:active { opacity: 0.85; }
.btn-renew.hidden { display: none; }

/* Larger renew button inside modal footer */
.btn-renew--lg {
  padding: 9px 22px;
  font-size: var(--fs-base);
}

/* Modal width override — slightly wider than default */
.renew-modal {
  max-width: 580px;
}

/* Context bar — current agreement summary at top of modal */
.renew-context-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
}
.rcb-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 16px 4px 0;
  margin-right: 16px;
  border-right: 1px solid var(--border);
}
.rcb-item:last-child { border-right: none; margin-right: 0; }
.rcb-item--warn .rcb-label { color: var(--danger); }
.rcb-item--warn .rcb-val   { color: var(--danger); }
.rcb-log-warning {
  margin: 10px 0 2px;
  padding: 10px 12px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-secondary);
}
.rcb-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-subtle);
}
.rcb-val {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}

/* Subscription cancellation notice */
.renew-sub-notice {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  color: var(--warning);
  line-height: 1.4;
}
.renew-sub-notice.hidden { display: none; }

/* ============================================================
   DUPLICATE CLIENT WARNING MODAL
   ============================================================ */

/* Sits above the Add Client modal (z-index: 100) */
#duplicate-warning-overlay {
  z-index: 150;
}

.dupe-warning-modal {
  max-width: 480px;
}
.dupe-warning-modal .modal-header {
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.06);
}
.dupe-warning-modal .modal-header h2 {
  color: var(--warning);
}
.dupe-warning-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin: 0 0 16px;
  line-height: 1.5;
}
.dupe-warning-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 14px 0 0;
  line-height: 1.5;
}
.dupe-match {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.dupe-match-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dupe-match-info {
  flex: 1;
  min-width: 0;
}
.dupe-match-name {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.dupe-match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.dupe-match--inactive {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.05);
}
.dupe-match-tip {
  margin-top: 5px;
  font-size: var(--fs-xs);
  color: var(--warning);
  line-height: 1.4;
}
.btn-goto-existing {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.btn-goto-existing:hover {
  background: var(--accent);
  color: #fff;
}

/* ============================================================
   MANUAL CONTINUITY DUE — Dashboard section + profile
   ============================================================ */
.mc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.mc-row:last-child { border-bottom: none; }
.mc-client { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mc-name {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--primary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.mc-name:hover { text-decoration: underline; }
.mc-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.mc-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mc-collect-btn {
  white-space: nowrap;
  background: rgba(37, 87, 214, 0.18) !important;
  border: 1px solid var(--primary) !important;
  color: var(--primary) !important;
  border-radius: 4px !important;
  font-size: var(--fs-sm) !important;
}
.mc-collect-btn:hover {
  background: rgba(37, 87, 214, 0.30) !important;
}

/* Status badges — shared between dashboard list + profile stat */
.mc-status {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.mc-status--overdue   { background: rgba(220, 38, 38, 0.15); color: var(--danger); }
.mc-status--due-today { background: rgba(234, 179, 8, 0.15); color: var(--warning); }
.mc-status--due-soon  { background: rgba(234, 179, 8, 0.12); color: var(--warning); }
.mc-status--upcoming  { background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); }

/* Profile continuity due row */
.profile-continuity-due {
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-continuity-date { font-size: var(--fs-md); font-weight: 500; color: var(--text-primary); }
.profile-pay-btn-row {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.profile-pay-btn-row .btn-xs { width: 100%; padding-top: 8px; padding-bottom: 8px; }

/* Profile pay button — color matches status badge */
.profile-pay-btn { color: #fff; }
.profile-pay-btn--paid      { background: var(--success); }
.profile-pay-btn--paid:hover      { background: #16a34a; }
.profile-pay-btn--upcoming  { background: var(--info); }
.profile-pay-btn--upcoming:hover  { background: #2563eb; }
.profile-pay-btn--due-soon  { background: var(--warning); }
.profile-pay-btn--due-soon:hover  { background: #d97706; }
.profile-pay-btn--due-today { background: var(--danger); }
.profile-pay-btn--due-today:hover { background: #dc2626; }
.profile-pay-btn--overdue   { background: var(--danger); }
.profile-pay-btn--overdue:hover   { background: #dc2626; }
.profile-pay-auto { font-size: var(--fs-xs); color: var(--text-secondary); font-style: italic; opacity: 0.8; }

/* ============================================================
   RECORD MANUAL PAYMENT MODAL
   ============================================================ */
.record-payment-modal {
  max-width: 460px;
}

/* Record Payment button in Financial Summary card header */
.btn-record-payment {
  margin-left: auto;
  padding: 5px 12px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn-record-payment:hover {
  background: var(--accent);
  color: #fff;
}

/* Error message inside record payment modal */
.rp-error {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--danger);
  font-size: var(--fs-sm);
  margin-top: 4px;
}

/* ============================================================
   SURFACE SYSTEM — premium depth via elevation, not gradients
   ============================================================ */

/* Sidebar — flat surface */
.sidebar {
  background: var(--surface);
}

/* Active nav item — subtle primary tint */
.nav-btn.active {
  background: rgba(37, 87, 214,0.12);
}

/* Primary action buttons — solid primary */
.btn-primary,
.btn-add-client,
#btn-save {
  background: var(--primary);
}
.btn-primary:hover,
.btn-add-client:hover,
#btn-save:hover {
  background: var(--primary-hover);
}

/* Active filter pills — solid primary */
.filter-pill.active {
  background: var(--primary);
  border-color: transparent;
}

/* Card hover — subtle border + soft glow */
.card:hover,
.profile-stat:hover,
.pipeline-stat:hover {
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04);
}

/* ── Light theme overrides ──────────────────────────────────── */
[data-theme="light"] .sidebar {
  background: #f8f8fa;
}
[data-theme="light"] .nav-btn.active {
  background: rgba(37, 87, 214,0.08);
}
[data-theme="light"] .card:hover,
[data-theme="light"] .profile-stat:hover,
[data-theme="light"] .pipeline-stat:hover {
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* ============================================================
   ANALYTICS LIBRARY
   ============================================================ */

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

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

/* Metric card */
.analytics-metric-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.analytics-metric-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.analytics-metric-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.analytics-metric-icon {
  font-size: var(--fs-3xl);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.analytics-metric-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
}

.analytics-metric-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.4;
}

/* Pin button */
.analytics-pin-btn {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.analytics-pin-btn:hover {
  border-color: rgba(124,58,237,0.55);
  color: #9f67ff;
}
.analytics-pin-btn.pinned {
  background: var(--primary);
  border-color: transparent;
  color: #fff;
}
.analytics-pin-btn.pinned:hover {
  background: var(--primary-hover);
  color: #fff;
}

/* Metric body */
.analytics-metric-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Inline stats row */
.analytics-stat-row {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.analytics-stat-row--4col .analytics-inline-stat { flex: 1; }

.analytics-inline-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  text-align: center;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}
.analytics-inline-stat:last-child { border-right: none; }

.analytics-inline-val {
  font-size: var(--fs-3xl);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.analytics-inline-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 4px;
}

/* Chart containers */
.analytics-chart-wrap {
  position: relative;
  height: 220px;
  width: 100%;
}
.analytics-chart-wrap--hbar {
  height: 180px;
}

/* Donut chart */
.analytics-donut-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}
.analytics-chart-wrap--donut {
  height: 200px;
  width: 200px;
  flex-shrink: 0;
}
.analytics-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.analytics-donut-val {
  font-size: var(--fs-4xl);
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.analytics-donut-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* Referral list */
.analytics-referrer-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.analytics-referrer-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.analytics-referrer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.analytics-referrer-row:last-child { border-bottom: none; }
.analytics-referrer-row:hover { background: rgba(124,58,237,0.07); }
.analytics-referrer-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.analytics-referrer-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(124,58,237,0.13);
  color: #9f67ff;
  border: 1px solid rgba(124,58,237,0.25);
}

/* Revenue per call hero */
.analytics-rev-hero {
  text-align: center;
  padding: 8px 0 4px;
}
.analytics-rev-hero-val {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  background: var(--primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.analytics-rev-hero-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 6px;
}
.analytics-rev-note {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  text-align: center;
  padding: 6px 0 0;
  line-height: 1.5;
}

/* ── Pinned Analytics Charts (Dashboard) ────────────────────── */
.pinned-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.pcard-dragging {
  opacity: 0.45;
  box-shadow: 0 8px 32px rgba(124,58,237,0.25) !important;
  cursor: grabbing;
}
.pcard-drag-over {
  border-color: rgba(124,58,237,0.55) !important;
  box-shadow: 0 0 0 2px rgba(124,58,237,0.28), 0 4px 20px rgba(124,58,237,0.12) !important;
}

.pinned-drag-handle {
  cursor: grab;
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.35;
  flex-shrink: 0;
  margin-right: 2px;
  user-select: none;
  transition: opacity 0.15s;
}
.analytics-metric-card:hover .pinned-drag-handle {
  opacity: 0.75;
}

/* Analytics repository — "pinned to dashboard" notice */
.analytics-pinned-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 8px;
}
.analytics-pinned-notice-btn {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #7c3aed;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.analytics-pinned-notice-btn:hover { text-decoration: underline; }

/* Spinner keyframe — shared by .spinner-sm and other loaders */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Email / Phone verification ────────────────────────────── */
.verify-field-wrap {
  position: relative;
}
.verify-input-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}
.verify-input-wrap input { flex: 1; }
.btn-verify {
  flex-shrink: 0;
  padding: 0 14px;
  height: 38px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn-verify:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
  border-color: var(--primary);
}
.verify-status {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.verify-valid    { color: var(--success); }
.verify-invalid  { color: var(--danger);  }
.verify-unknown  { color: var(--warning); }
.verify-checking { color: var(--text-secondary); font-weight: 400; }

/* ── Google Places Autocomplete dropdown ───────────────────── */
.pac-container {
  z-index: 99999 !important;
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important;
  font-family: inherit !important;
  margin-top: 2px !important;
}
.pac-container::after { display: none !important; } /* hide "powered by Google" logo row */
.pac-item {
  padding: 8px 12px !important;
  cursor: pointer !important;
  color: var(--text-primary) !important;
  border-top: 1px solid var(--border) !important;
  font-size: var(--fs-sm) !important;
  line-height: 1.5 !important;
}
.pac-item:first-child { border-top: none !important; }
.pac-item:hover,
.pac-item-selected { background: var(--surface-hover) !important; }
.pac-item-query {
  color: var(--text-primary) !important;
  font-size: var(--fs-sm) !important;
}
.pac-matched { font-weight: 500 !important; }
.pac-icon,
.pac-icon-markerWithDot { display: none !important; } /* hide broken pin icons */

/* ── Address autocomplete wrapper ────────────────────────────── */
.address-autocomplete-wrap {
  display: block;
  width: 100%;
}
.address-autocomplete-wrap input {
  width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   SESSION TRACKER
   ============================================================ */

/* ── Arrangement banner ──────────────────────────────────────── */
/* ── Card body wrapper ───────────────────────────────────────── */
.sess-body {
  padding: 0 20px 20px;
}

.sess-arrangement {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 12px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.sess-arrangement-label {
  font-weight: 500;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Header actions ──────────────────────────────────────────── */
.sess-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Summary strip ───────────────────────────────────────────── */
.sess-summary-strip {
  display: flex;
  gap: 0;
  margin: 12px 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.sess-summary-tile {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  border-right: 1px solid var(--border);
}
.sess-summary-tile:last-child { border-right: none; }
.sess-summary-val {
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 1.2;
}
.sess-summary-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-top: 2px;
}

/* color helpers */
.sess-green  { color: var(--success); }
.sess-yellow { color: var(--warning); }
.sess-red    { color: var(--danger); }
.sess-blue   { color: var(--accent); }
.sess-purple { color: #8b5cf6; }
.sess-muted  { color: var(--text-muted); }

/* ── Alert banners ───────────────────────────────────────────── */
.sess-alert {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  margin-top: 10px;
}
.sess-alert-red    { background: var(--danger-dim);  color: var(--danger);  border: 1px solid rgba(239,68,68,0.2); }
.sess-alert-yellow { background: var(--warning-dim); color: var(--warning); border: 1px solid rgba(245,158,11,0.2); }
.sess-alert-purple { background: rgba(139,92,246,0.10); color: #8b5cf6;    border: 1px solid rgba(139,92,246,0.2); }

/* ── Collapsible sections ────────────────────────────────────── */
.sess-section {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.sess-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  background: var(--surface-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background 0.15s;
}
.sess-section-head:hover { background: var(--surface-hover); }
.sess-chevron {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  transition: transform 0.15s;
  width: 12px;
  display: inline-block;
  text-align: center;
}
.sess-section-title { color: var(--text); }
.sess-section-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sess-section-body.hidden { display: none; }

/* ── Row cards ───────────────────────────────────────────────── */
.sess-row-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.sess-row-card:hover { background: var(--surface-hover); }
.sess-row-card.sess-row-dimmed { opacity: 0.55; }
.sess-row-card.sess-row-urgent { border-color: var(--danger); }
.sess-row-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  flex-shrink: 0;
}
.sess-row-body { flex: 1; min-width: 0; }
.sess-row-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sess-row-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}
.sess-row-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Progress bar ────────────────────────────────────────────── */
.sess-prog-bg {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.sess-prog-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s;
}

/* ── Badges ──────────────────────────────────────────────────── */
.sess-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
.sess-green-badge  { background: var(--success-dim);          color: var(--success); }
.sess-yellow-badge { background: var(--warning-dim);          color: var(--warning); }
.sess-danger-badge { background: var(--danger-dim);           color: var(--danger); }
.sess-blue-badge   { background: var(--accent-dim);           color: var(--accent); }
.sess-purple-badge { background: rgba(139,92,246,0.12);       color: #8b5cf6; }
.sess-muted-badge  { background: var(--surface-2);            color: var(--text-muted); border: 1px solid var(--border); }

/* ── Icon button ─────────────────────────────────────────────── */
.sess-icon-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  transition: background 0.15s, color 0.15s;
}
.sess-icon-btn:hover { background: var(--danger-dim); color: var(--danger); }

/* ── Empty state ─────────────────────────────────────────────── */
.sess-empty {
  text-align: center;
  padding: 20px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ── Log Session Modal — outcome grid ────────────────────────── */
.sess-outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.sess-outcome-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.sess-outcome-card:hover { border-color: var(--accent); background: var(--surface-hover); }
.sess-outcome-icon  { font-size: var(--fs-2xl); }
.sess-outcome-label { font-size: var(--fs-xs); font-weight: 500; color: var(--text); }
.sess-outcome-sub   { font-size: var(--fs-xs); color: var(--text-muted); }

.sess-outcome-sel-completed { border-color: var(--success) !important; background: var(--success-dim) !important; }
.sess-outcome-sel-resched   { border-color: var(--warning) !important; background: var(--warning-dim) !important; }
.sess-outcome-sel-forfeit   { border-color: var(--danger)  !important; background: var(--danger-dim)  !important; }

/* Who cancelled — two-up picker inside log modal */
.sess-who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sess-who-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.sess-who-btn:hover { border-color: var(--accent); background: var(--surface-hover); }
.sess-who-label { font-size: var(--fs-xs); font-weight: 500; color: var(--text); }
.sess-who-sub   { font-size: var(--fs-xs); color: var(--text-muted); }
.sess-who-sel   { border-color: var(--accent) !important; background: rgba(124,58,237,0.10) !important; }

/* ── Session preview box ─────────────────────────────────────── */
.sess-preview-box {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid transparent;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sess-preview-green  { background: var(--success-dim); color: var(--success); border-color: rgba(34,197,94,0.2); }
.sess-preview-yellow { background: var(--warning-dim); color: var(--warning); border-color: rgba(245,158,11,0.2); }
.sess-preview-red    { background: var(--danger-dim);  color: var(--danger);  border-color: rgba(239,68,68,0.2); }
.sess-preview-src {
  display: block;
  opacity: 0.75;
  font-size: var(--fs-xs);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .sess-summary-strip { flex-wrap: wrap; }
  .sess-summary-tile  { flex: 1 1 30%; border-bottom: 1px solid var(--border); }
  .sess-outcome-grid  { grid-template-columns: 1fr; }
  .sess-header-actions { gap: 6px; }
}


/* ============================================================
   SESSIONS OVERVIEW VIEW
   ============================================================ */
.sess-ov-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  margin-bottom: 8px;
  gap: 16px;
}
.sess-ov-left { flex: 1; min-width: 0; }
.sess-ov-name { font-weight: 500; font-size: var(--fs-md); }
.sess-ov-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.sess-ov-desc { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sess-ov-expiring-badge {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--warning-dim);
  color: var(--warning);
  border: 1px solid rgba(245,158,11,0.2);
}
.sess-ov-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.sess-ov-bal {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}
.sess-ov-bal-num  { font-size: var(--fs-4xl); font-weight: 500; line-height: 1; }
.sess-ov-bal-label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.sess-ov-bal--ok   .sess-ov-bal-num { color: var(--success); }
.sess-ov-bal--warn .sess-ov-bal-num { color: var(--warning); }
.sess-ov-bal--zero .sess-ov-bal-num { color: var(--danger); }

/* ============================================================
   SESSIONS DETAIL VIEW (desktop)
   ============================================================ */
/* Sessions is a direct flex child of .main-content — full viewport height */
#view-sessions {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  padding: 0;
  overflow: hidden;
}
/* When hidden, display:none must override the flex display */
#view-sessions.hidden { display: none; }

/* Permanent client list panel — always visible, no open/close */
.sv-panel {
  width: 280px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sv-panel-header {
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Search */
.sv-panel-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sv-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: var(--fs-sm);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.sv-search-input:focus        { border-color: var(--primary); }
.sv-search-input::placeholder { color: var(--text-muted); }
.sv-panel-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex: 1;
}
.sv-panel-total {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-hover);
  border-radius: 999px;
  padding: 2px 8px;
}
.sv-panel-list { overflow-y: auto; flex: 1; padding: 0; }

/* Accordion groups inside the panel */
.sv-group { border-bottom: 1px solid var(--border); }
.sv-group:last-child { border-bottom: none; }

.sv-group-header {
  width: 100%;
  background: none;
  border: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  min-height: 44px;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  gap: 8px;
}
.sv-group-header:hover { background: var(--surface-hover); color: var(--text); }
.sv-group:not(.collapsed) > .sv-group-header { color: var(--text); }

.sv-group-label { flex: 1; }
.sv-group-count {
  background: var(--surface-hover);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  min-width: 22px;
  text-align: center;
  transition: background 0.15s;
}
.sv-group:not(.collapsed) > .sv-group-header .sv-group-count {
  background: var(--primary-dim);
  color: var(--primary);
}
.sv-group.collapsed > .sv-group-header .sv-group-count {
  background: var(--surface-hover);
  color: var(--text-muted);
}

.sv-group-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.15s;
}
.sv-group-header:hover .sv-group-chevron { opacity: 0.9; }
.sv-group.collapsed .sv-group-chevron { transform: rotate(-90deg); }
.sv-group.collapsed .sv-group-items   { display: none; }

/* List items */
.sv-drawer-empty { padding: 12px 16px; font-size: var(--fs-sm); color: var(--text-muted); font-style: italic; }
.sv-drawer-item {
  width: 100%;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  padding: 10px 14px 10px 13px;
  font-size: var(--fs-sm);
  cursor: pointer;
  text-align: left;
  gap: 9px;
  transition: background 0.12s, border-color 0.12s;
}
.sv-drawer-item:hover  { background: var(--surface-hover); border-left-color: var(--border); }
.sv-drawer-item.active { background: var(--primary-dim); border-left-color: var(--primary); }
.sv-drawer-item.active .sv-drawer-item-name { font-weight: 500; }

/* Avatar circle */
.sv-item-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #fff;
  opacity: 0.88;
}

/* Name + last-session body */
.sv-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sv-drawer-item-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-item-last {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inline issue button (No Credits items, desktop only) */
.sv-issue-btn {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--primary);
  background: var(--primary-dim);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 7px;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.12s;
  white-space: nowrap;
}
.sv-drawer-item:hover .sv-issue-btn { opacity: 1; }
.sv-issue-btn:hover { background: var(--primary); color: #fff; }

.sv-drawer-bal {
  font-size: var(--fs-xs);
  font-weight: 500;
  border-radius: 999px;
  padding: 2px 8px;
  flex-shrink: 0;
  min-width: 28px;
  text-align: center;
}
.sv-drawer-bal--ok   { background: var(--success-dim); color: var(--success); }
.sv-drawer-bal--warn { background: var(--warning-dim); color: var(--warning); }
.sv-drawer-bal--zero { background: var(--danger-dim);  color: var(--danger);  }

.sv-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 28px 32px 40px;
}

/* No-client placeholder */
.sv-no-client {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 32px;
  gap: 8px;
  text-align: center;
  color: var(--text-muted);
}
.sv-no-client-icon  { font-size: 40px; margin-bottom: 4px; }
.sv-no-client-title { font-size: var(--fs-xl); font-weight: 500; color: var(--text); }
.sv-no-client-sub   { font-size: var(--fs-base); }

/* Client detail */
.sv-client-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sv-client-name { font-size: var(--fs-2xl); font-weight: 500; }

.sv-summary-strip {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sv-summary-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 100px;
}
.sv-summary-num   { font-size: var(--fs-4xl); font-weight: 500; line-height: 1; color: var(--text); }
.sv-summary-label { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.sv-bal--ok   { color: var(--success); }
.sv-bal--warn { color: var(--warning); }
.sv-bal--zero { color: var(--danger);  }

/* Sections */
.sv-section { margin-bottom: 12px; overflow: hidden; }
.sv-section-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sv-section-header:hover { background: var(--surface-hover); }
.sv-section-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text-muted);
  margin-left: 8px;
  vertical-align: middle;
}
.sv-section-chev { font-size: var(--fs-xs); color: var(--text-muted); margin-left: auto; }
.sv-collapsed { display: none; }

.sv-sec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-top: 1px solid var(--border);
}
.sv-sec-row--dim { opacity: 0.4; }
.sv-sec-row-icon { font-size: var(--fs-xl); flex-shrink: 0; }
.sv-sec-row-body { flex: 1; min-width: 0; }
.sv-sec-row-title { font-size: var(--fs-base); font-weight: 500; }
.sv-sec-row-sub   { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.sv-sec-empty     { padding: 14px 18px; font-size: var(--fs-sm); color: var(--text-muted); }

/* ── AI Insights Card ─────────────────────────────────────── */
.ai-insights-card { position: relative; }
.ai-insights-header-left { display: flex; align-items: center; gap: 8px; }
.ai-insights-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ai-insights-badge {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 3px; padding: 1px 5px;
}
.ai-insights-idle { padding: 20px 20px 24px; }
.ai-insights-idle-text { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }

.ai-insights-loading { display: flex; align-items: center; gap: 12px; padding: 28px 20px; color: var(--text-muted); font-size: var(--fs-sm); }
.ai-insights-spinner {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-top-color: var(--primary);
  animation: ai-spin 0.7s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

.ai-insights-results { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 16px; }

.ai-insight-section { display: flex; flex-direction: column; gap: 6px; }
.ai-insight-section-label {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}

.ai-going-well-list { display: flex; flex-direction: column; gap: 4px; }
.ai-going-well-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--fs-sm); color: var(--text-primary); line-height: 1.5;
}
.ai-going-well-icon { flex-shrink: 0; font-size: var(--fs-base); margin-top: 1px; }

.ai-bottleneck-box {
  background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: var(--fs-sm); color: var(--text-primary); line-height: 1.55;
}

.ai-solutions-list { display: flex; flex-direction: column; gap: 6px; counter-reset: solutions; }
.ai-solution-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--fs-sm); color: var(--text-primary); line-height: 1.5;
}
.ai-solution-num {
  counter-increment: solutions;
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary); font-size: var(--fs-xs); font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

.ai-insights-footer {
  border-top: 1px solid var(--border); padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.ai-insights-footer-note { font-size: var(--fs-xs); color: var(--text-muted); }
.ai-insights-refresh {
  font-size: var(--fs-xs); color: var(--text-muted); background: none; border: none;
  cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}
.ai-insights-refresh:hover { color: var(--text-primary); background: var(--hover-bg); }

.ai-insights-error {
  padding: 16px 20px; font-size: var(--fs-sm); color: var(--danger, #ef4444);
  background: rgba(239,68,68,0.07); border-top: 1px solid rgba(239,68,68,0.15);
}

/* ── AI Insights History Panel ──────────────────────────────── */
.ai-history-overlay {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; justify-content: flex-end;
}
.ai-history-overlay.hidden { display: none; }
.ai-history-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
}
.ai-history-panel {
  position: relative; z-index: 1;
  width: min(560px, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  animation: ai-hist-slide-in 0.22s ease;
  overflow: hidden;
}
@keyframes ai-hist-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.ai-history-panel-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ai-history-panel-header h2 { margin: 0 0 2px; font-size: var(--fs-lg); }
.ai-history-panel-sub { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.ai-history-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: var(--fs-xl); line-height: 1;
  padding: 2px 4px; border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s; flex-shrink: 0;
}
.ai-history-close:hover { color: var(--text); background: var(--hover-bg); }

.ai-history-panel-body {
  flex: 1; overflow-y: auto;
  padding: 12px 16px 24px;
  display: flex; flex-direction: column; gap: 8px;
}

/* Individual history entry */
.ai-hist-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.ai-hist-item--current { border-color: color-mix(in srgb, var(--primary) 40%, transparent); }

.ai-hist-item-header {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: none; border: none;
  cursor: pointer; text-align: left;
  background: var(--surface-2);
  transition: background 0.15s;
}
.ai-hist-item-header:hover { background: var(--hover-bg); }
.ai-hist-item-date { flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.ai-hist-item-badge {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-radius: 3px; padding: 1px 6px; flex-shrink: 0;
}
.ai-hist-item-chevron {
  color: var(--text-muted); font-size: var(--fs-lg); flex-shrink: 0;
  transition: transform 0.2s;
}
.ai-hist-item.open .ai-hist-item-chevron { transform: rotate(90deg); }

.ai-hist-item-body {
  display: none;
  border-top: 1px solid var(--border);
}
.ai-hist-item.open .ai-hist-item-body { display: block; }

/* ============================================================
   CALENDAR MODULE
   ============================================================ */

/* ── Profile Tab Bar (legacy overridden by V2) ────────────────── */

/* ── Program Tab Layout ──────────────────────────────────────── */
.prog-container { }
.prog-section { margin-bottom: 16px; }
.prog-section-title {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 10px;
}

/* ── Program Stat Cards (top row) ────────────────────────────── */
.prog-stat-cards {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 1200px) { .prog-stat-cards { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .prog-stat-cards { grid-template-columns: repeat(2, 1fr); } }

.prog-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  text-align: center;
}
.prog-vitals-list { display: flex; flex-direction: column; }
.prog-vitals-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 2px; border-bottom: 1px solid var(--border-light);
}
.prog-vitals-row:last-child { border-bottom: none; }
.pv-label { font-size: 13px; font-weight: 500; color: var(--text); display: flex; align-items: baseline; gap: 8px; }
.pv-src { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.pv-value { font-size: 16px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.pv-unit { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.prog-stat-card--placeholder { opacity: 0.5; }
.prog-stat-label {
  font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px;
}
.prog-stat-value {
  font-size: var(--fs-3xl); font-weight: 500;
  color: var(--text); line-height: 1.1;
  margin-bottom: 2px; letter-spacing: -0.5px;
}
.prog-stat-sub {
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--text-muted); line-height: 1.3;
}

/* Health Metrics Row */
.prog-metrics-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 768px) { .prog-metrics-row { grid-template-columns: 1fr; } }

.prog-metric-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 14px; display: flex; flex-direction: column;
  transition: border-color 0.15s;
}
.prog-metric-card:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }

.prog-metric-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.prog-metric-title {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--text-muted);
}
.prog-metric-body { flex: 1; }
.prog-metric-value {
  font-size: var(--fs-3xl); font-weight: 500; color: var(--text);
  line-height: 1.1; margin-bottom: 2px; letter-spacing: -0.5px;
}
.prog-metric-sub {
  font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500;
  margin-bottom: 10px;
}
.prog-metric-bar {
  height: 6px; border-radius: 3px; background: var(--border);
  overflow: hidden; margin-bottom: 4px;
}
.prog-metric-bar-fill { height: 6px; border-radius: 3px; transition: width 0.3s ease; }
.prog-metric-pct { font-size: var(--fs-xs); font-weight: 500; text-align: right; }

.prog-metric-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.prog-metric-footer-label {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.prog-step-input-wrap { display: flex; align-items: center; }

/* Step target input inside stat card */
.prog-stat-target-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.prog-stat-target-input {
  width: 100%; padding: 4px 6px; text-align: center;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface-2); color: var(--text);
  font-size: var(--fs-xs); font-weight: 500; outline: none;
  -moz-appearance: textfield; transition: border-color 0.15s;
}
.prog-stat-target-input::-webkit-inner-spin-button,
.prog-stat-target-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.prog-stat-target-input:focus { border-color: var(--primary); }
.prog-stat-target-input::placeholder { font-weight: 400; color: var(--text-muted); }

/* Sleep stages */
.prog-sleep-stages {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.prog-sleep-stage {
  font-size: var(--fs-xs); color: var(--text-muted);
  display: flex; align-items: center; gap: 5px;
}
.prog-sleep-stage strong { color: var(--text); font-weight: 500; }
.prog-sleep-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* Check-In Settings Grid */
.prog-settings-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 14px;
}
@media (max-width: 768px) { .prog-settings-grid { grid-template-columns: 1fr; } }

.prog-setting { display: flex; flex-direction: column; gap: 6px; }
.prog-setting-label {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.prog-setting-select {
  font-size: var(--fs-sm); padding: 7px 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); outline: none;
  transition: border-color 0.15s;
}
.prog-setting-select:focus { border-color: var(--primary); }
.prog-setting-value { font-size: var(--fs-sm); font-weight: 500; padding: 7px 0; }

/* ── Daily Habits ────────────────────────────────────────────── */
.prog-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.habit-list { display: flex; flex-direction: column; gap: 6px; }
.habit-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 12px;
  transition: border-color 0.15s;
}
.habit-row:hover { border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.habit-row-color {
  width: 4px; height: 24px; border-radius: 2px; flex-shrink: 0;
}
.habit-row-name {
  flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--text);
}
.habit-row-freq {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--text-muted);
  background: var(--surface-2); border-radius: 4px; padding: 3px 8px;
}
.habit-empty {
  font-size: var(--fs-xs); color: var(--text-muted); padding: 12px 0;
}

/* Habit Modal */
.habit-color-picker { display: flex; align-items: center; gap: 10px; }
.habit-color-picker input[type="color"] {
  width: 32px; height: 32px; border: 1px solid var(--border);
  border-radius: 6px; padding: 2px; cursor: pointer;
  background: var(--surface);
}
.habit-color-swatches { display: flex; gap: 6px; }
.habit-swatch {
  width: 22px; height: 22px; border-radius: 4px; border: 2px solid transparent;
  cursor: pointer; transition: border-color 0.15s;
}
.habit-swatch:hover { border-color: var(--text-muted); }

.cal-habit-days { display: flex; gap: 6px; margin-top: 6px; }
.cal-habit-day-btn {
  width: 32px; height: 32px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.cal-habit-day-btn:hover { border-color: var(--primary); color: var(--text); }
.cal-habit-day-btn.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

.form-label-sm {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
  margin-bottom: 4px; display: block;
}

/* ── Weight Tracking Config ─────────────────────────────────── */
.wt-mode-row {
  display: flex; gap: 6px; margin-top: 8px;
}
.wt-mode-btn {
  flex: 1; padding: 7px 0; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500;
  cursor: pointer; transition: all 0.15s; text-align: center;
}
.wt-mode-btn:hover { border-color: rgba(255,255,255,0.15); color: var(--text); background: rgba(255,255,255,0.06); }
.wt-mode-btn.active {
  background: rgba(37, 87, 214, 0.12);
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 8px rgba(37, 87, 214, 0.2);
}
.wt-day-picker {
  display: flex; gap: 6px; margin-top: 8px;
}

/* ── Calendar Container ──────────────────────────────────────── */
.cal-container { padding: 0; }

.cal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 12px;
}
.cal-nav {
  display: flex; align-items: center; gap: 8px;
}
.cal-nav-btn {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px; cursor: pointer;
  color: var(--text); display: flex; align-items: center;
  transition: background 0.15s;
}
.cal-nav-btn:hover { background: var(--border); }
.cal-month-label {
  font-size: var(--fs-xl); font-weight: 500; min-width: 180px;
  text-align: center; color: var(--text);
}
.cal-today-btn {
  font-size: var(--fs-xs); font-weight: 500; padding: 4px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; color: var(--text-muted);
  transition: all 0.15s;
}
.cal-today-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.cal-toolbar-right {
  display: flex; align-items: center; gap: 16px;
}

/* ── Filter Bar ──────────────────────────────────────────────── */
.cal-filter-bar { display: flex; gap: 6px; }
.cal-filter-btn {
  font-size: var(--fs-xs); font-weight: 500; padding: 5px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
  color: var(--text-muted);
  cursor: pointer; transition: all 0.15s;
}
.cal-filter-btn:hover { border-color: rgba(255,255,255,0.15); color: var(--text); background: rgba(255,255,255,0.06); }
.cal-filter-btn.active { color: #fff; border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); }
.cal-filter-btn--workout.active { color: #818cf8; border-color: rgba(99,102,241,0.4); background: rgba(99,102,241,0.12); }
.cal-filter-btn--cardio.active  { color: #34d399; border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.12); }
.cal-filter-btn--custom.active  { color: #c084fc; border-color: rgba(168,85,247,0.4); background: rgba(168,85,247,0.12); }

/* ── Permission Row ──────────────────────────────────────────── */
.cal-perm-row { display: flex; align-items: center; gap: 6px; }
.cal-perm-label { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; }
.cal-perm-select {
  font-size: var(--fs-xs); padding: 3px 8px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 4px; color: var(--text);
}

/* ── Step Target Row ─────────────────────────────────────────── */
/* (Health metrics moved to .prog-metric-card styles above) */

/* Day cell health indicators */
.cal-day-health {
  display: flex; gap: 3px; justify-content: center;
  font-size: var(--fs-xs); font-weight: 500; margin-top: 1px;
}
.cal-day-steps { font-size: var(--fs-xs); font-weight: 500; }
.cal-day-sleep { font-size: var(--fs-xs); opacity: 0.7; }

/* ── Calendar Grid ───────────────────────────────────────────── */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.cal-day-header {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted);
  text-align: center; padding: 6px 4px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.cal-day {
  min-height: 96px; padding: 4px; border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background 0.1s; position: relative;
  background: var(--surface);
}
.cal-day:nth-child(7n) { border-right: none; }
.cal-day:hover { background: var(--surface-2); }
.cal-day--today {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
.cal-day--today .cal-day-num {
  background: var(--primary); color: #fff; border-radius: 50%;
  width: 22px; height: 22px; display: flex; align-items: center;
  justify-content: center; font-weight: 500;
}
.cal-day--other { opacity: 0.35; }
.cal-day--past:not(.cal-day--today) { opacity: 0.55; }
.cal-day--past:hover { opacity: 0.8; }
.cal-day--drag-over {
  background: color-mix(in srgb, var(--primary) 15%, var(--surface)) !important;
  outline: 2px dashed var(--primary); outline-offset: -2px;
  opacity: 1 !important;
}
.cal-day-num {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text);
  margin-bottom: 2px; padding: 2px 4px;
}
.cal-day-items { display: flex; flex-direction: column; gap: 2px; }

/* ── Check-in day marker ─────────────────────────────────────── */
.cal-checkin-marker {
  position: absolute; top: 3px; right: 4px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--primary); opacity: 0.7;
  text-transform: uppercase;
}

/* ── Week view cells ─────────────────────────────────────────── */
.cal-day--week { min-height: 200px; }

/* ── View toggle ─────────────────────────────────────────────── */
.cal-view-toggle {
  display: flex; gap: 0; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.cal-view-btn {
  padding: 4px 12px; font-size: var(--fs-xs); font-weight: 500;
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  transition: all 0.15s;
}
.cal-view-btn.active { background: var(--primary); color: #fff; }
.cal-view-btn:hover:not(.active) { color: var(--text); }

/* ── Summary card section dividers ───────────────────────────── */
/* ── Check-in day toggle ──────────────────────────────────── */
.ci-day-toggle { display: flex; gap: 3px; }
.ci-day-btn {
  padding: 4px 8px; font-size: var(--fs-xs); font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.ci-day-btn:hover { border-color: var(--primary); color: var(--text); }
.ci-day-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.prog-section-divider {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-subtle);
  text-transform: uppercase; padding: 8px 16px 4px; margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.prog-section-divider:first-child { border-top: none; margin-top: 0; padding-top: 4px; }
.prog-ctrl-body--meta { border-top: 1px solid rgba(255,255,255,0.06); }

/* ── Pills ───────────────────────────────────────────────────── */
.cal-pill {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 500; padding: 2px 6px;
  border-radius: 4px; cursor: grab; transition: opacity 0.15s;
  white-space: nowrap; overflow: hidden; line-height: 1.4;
}
.cal-pill:active { cursor: grabbing; }
.cal-pill--workout {
  background: color-mix(in srgb, #6366f1 15%, var(--surface));
  color: #6366f1; border-left: 3px solid #6366f1;
}
.cal-pill--cardio {
  background: color-mix(in srgb, #10b981 15%, var(--surface));
  color: #10b981; border-left: 3px solid #10b981;
}
.cal-pill--custom {
  background: color-mix(in srgb, #a855f7 15%, var(--surface));
  color: #a855f7; border-left: 3px solid #a855f7;
}
.cal-pill--completed {
  opacity: 0.5; text-decoration: line-through;
}
.cal-pill--dragging { opacity: 0.4; }
.cal-pill-text {
  overflow: hidden; text-overflow: ellipsis;
}
.cal-pill-recur {
  font-size: var(--fs-xs); opacity: 0.7; margin-left: auto; flex-shrink: 0;
}
.cal-pill-moved {
  font-size: var(--fs-xs); opacity: 0.6; margin-left: auto; flex-shrink: 0;
}
.cal-pill-moved + .cal-pill-recur { margin-left: 4px; }
.cal-pill:hover { filter: brightness(0.95); }

/* ── Client removals (read-only audit) ────────────────────────── */
.cal-removal-list { display: flex; flex-direction: column; gap: 6px; }
.cal-removal-row {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--fs-xs); color: var(--text-muted);
}
.cal-removal-title { font-weight: 500; color: var(--text-secondary); }
.cal-removal-meta { opacity: 0.85; }

/* ── Calendar Modal ───────────────────────────────────────────── */
.cal-modal-date-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 6px; padding: 6px 12px;
}

/* ── Cardio Presets ───────────────────────────────────────────── */
.cal-preset-row {
  display: flex; gap: 6px; margin: 8px 0 4px; flex-wrap: wrap;
}
.cal-preset-btn {
  font-size: var(--fs-xs); font-weight: 500; padding: 5px 14px;
  border-radius: 20px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-muted);
  cursor: pointer; transition: all 0.15s;
}
.cal-preset-btn:hover { border-color: var(--primary); color: var(--primary); }
.cal-preset-btn.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

.cal-add-recur-toggle { margin: 8px 0 4px; }
.cal-recur-check-label {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); cursor: pointer; color: var(--text);
}
.cal-recur-check-label input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--primary);
}
.cal-add-days-row {
  display: flex; gap: 4px; margin-top: 8px;
}
.cal-add-day-btn {
  width: 40px; height: 32px; font-size: var(--fs-xs); font-weight: 500;
  border: 1.5px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text-muted);
  cursor: pointer; transition: all 0.15s;
}
.cal-add-day-btn:hover { border-color: var(--primary); color: var(--primary); }
.cal-add-day-btn.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
}

/* btn-danger already defined above */

/* ============================================================
   BUILDER VIEW
   ============================================================ */
/* Overlay z-index stacking */
#exercise-editor-overlay { z-index: 120; }
.ex-editor-row { display: flex; gap: 12px; }
.ex-editor-row .form-group { margin-bottom: 0; }
#exercise-search-overlay { z-index: 120; }

/* ── Builder View ─────────────────────────────────────────── */
.builder-sticky-top { position: sticky; top: 0; z-index: 10; background: transparent; padding: 0 0 0 0; }
.builder-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.builder-tab-btn {
  padding: 10px 20px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; transition: color .15s, border-color .15s;
}
.builder-tab-btn:hover { color: var(--text); }
.builder-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.builder-tab-btn.disabled { opacity: 0.35; cursor: not-allowed; }
.builder-tab-panel { display: none; }
.builder-tab-panel.active { display: block; }
.builder-workout-toolbar { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }

/* Library filter controls */
.builder-search-input {
  padding: 6px 10px; font-size: var(--fs-sm);
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text); min-width: 220px;
}
.builder-tag-select {
  padding: 6px 10px; font-size: var(--fs-sm);
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text); cursor: pointer;
}
.builder-archived-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); user-select: none;
}
.builder-archived-toggle input { margin: 0; }
.builder-archived-toggle:has(input:checked) { color: var(--text); border-color: var(--primary); }

/* Archived program badges + dimming */
.program-archived-badge {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 1px 5px; border-radius: 3px; background: var(--border); color: var(--text-muted);
}
.program-card--archived { opacity: 0.6; }
.program-card--archived:hover { opacity: 0.85; }

/* Start-from picker modal */
.new-program-modal .np-modal-body { padding: 16px 20px 20px; }
.np-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.np-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px; text-align: left; background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s; font-family: inherit;
  color: var(--text);
}
.np-card:hover { border-color: var(--primary); background: var(--surface-2, rgba(0,0,0,0.02)); }
.np-card-icon {
  color: var(--primary); display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 6px; background: rgba(59, 130, 246, 0.08);
}
.np-card-title { font-size: var(--fs-base); font-weight: 600; }
.np-card-sub { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }
.np-card-ai .np-card-icon { color: #a855f7; background: rgba(168, 85, 247, 0.1); }
.np-soon {
  font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 1px 6px; border-radius: 3px; background: rgba(168, 85, 247, 0.12);
  color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); margin-left: 4px; vertical-align: middle;
}

/* Sub-picker shown after choosing template / client */
.np-picker { display: flex; flex-direction: column; gap: 12px; max-height: 520px; }
.np-picker-header { display: flex; gap: 10px; align-items: center; }
.np-back-btn {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  padding: 5px 10px; font-size: var(--fs-sm); color: var(--text-muted);
  cursor: pointer; font-family: inherit;
}
.np-back-btn:hover { color: var(--text); border-color: var(--text-muted); }
.np-picker-search {
  flex: 1; padding: 7px 10px; font-size: var(--fs-sm);
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text);
}
.np-picker-list {
  display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
  max-height: 380px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-2, rgba(0,0,0,0.02)); padding: 4px;
}
.np-picker-row {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 12px;
  text-align: left; background: var(--surface); border: 1px solid transparent;
  border-radius: 4px; cursor: pointer; color: var(--text); font-family: inherit;
  transition: border-color 0.12s;
}
.np-picker-row:hover { border-color: var(--primary); }
.np-picker-row-main { font-size: var(--fs-sm); font-weight: 500; }
.np-picker-row-sub { font-size: var(--fs-xs); color: var(--text-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

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

/* AI generation form */
.np-ai-form { display: flex; flex-direction: column; gap: 14px; }
.np-ai-form-title { font-size: var(--fs-base); font-weight: 500; color: var(--text); }
.np-ai-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.np-ai-full { grid-column: 1 / -1; }
.np-ai-actions {
  display: flex; justify-content: flex-end; gap: 8px; padding-top: 6px;
  border-top: 1px solid var(--border);
}
.np-req { color: var(--danger); }

/* Client search + selected chip inside the AI form */
.np-ai-client-list {
  border: 1px solid var(--border); border-radius: 4px; max-height: 220px;
  overflow-y: auto; margin-top: 4px; background: var(--surface);
}
.np-ai-client-item {
  display: block; width: 100%; padding: 8px 10px; text-align: left;
  border: none; border-bottom: 1px solid var(--border-light, var(--border));
  background: transparent; cursor: pointer; color: var(--text); font-family: inherit;
}
.np-ai-client-item:hover { background: var(--surface-2, rgba(0,0,0,0.04)); }
.np-ai-client-item:last-child { border-bottom: none; }
.np-ai-client-item-name { font-size: var(--fs-sm); font-weight: 500; }
.np-ai-client-item-email { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
.np-ai-client-empty { padding: 10px; font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }
.np-ai-client-selected {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px; padding: 8px 12px; background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.25); border-radius: 4px;
  font-size: var(--fs-sm); font-weight: 500; color: #7c3aed;
}
.np-ai-client-clear {
  background: none; border: 1px solid currentColor; border-radius: 3px;
  padding: 2px 8px; font-size: var(--fs-xs); cursor: pointer; color: inherit;
  font-family: inherit; margin-left: auto;
}
.np-ai-client-clear:hover { background: rgba(168, 85, 247, 0.15); }

/* Methodology explainer — collapsible summary that surfaces the evidence-based
   engine to coaches. Styled to feel like a trusted explainer, not a marketing
   block: subtle surface, restrained accent, tight type. */
.np-ai-methodology {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2, rgba(255,255,255,0.02));
  overflow: hidden;
}
.np-ai-methodology summary {
  padding: 10px 14px; cursor: pointer; font-size: var(--fs-sm);
  font-weight: 500; color: var(--text); list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.np-ai-methodology summary::-webkit-details-marker { display: none; }
.np-ai-methodology summary::before {
  content: ''; width: 8px; height: 8px; border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted); transform: rotate(-45deg);
  transition: transform 0.15s ease; flex-shrink: 0; margin-right: 2px;
}
.np-ai-methodology[open] summary::before { transform: rotate(45deg); }
.np-ai-methodology summary:hover { background: var(--surface-3, rgba(255,255,255,0.03)); }
.np-ai-methodology-body {
  padding: 4px 14px 14px 28px; font-size: var(--fs-xs);
  color: var(--text-muted); line-height: 1.55;
  border-top: 1px solid var(--border);
}
.np-ai-methodology-body p { margin: 10px 0 8px; }
.np-ai-methodology-body ul { margin: 0 0 8px; padding-left: 16px; }
.np-ai-methodology-body li { margin-bottom: 6px; }
.np-ai-methodology-body strong { color: var(--text); font-weight: 500; }
.np-ai-methodology-footnote { font-size: 0.7rem; font-style: italic; opacity: 0.8; }

/* Loading state */
.np-ai-loading {
  display: flex; flex-direction: column; align-items: center; padding: 40px 20px;
  gap: 14px; text-align: center;
}
.np-ai-spinner {
  width: 48px; height: 48px; border-radius: 50%;
  border: 3px solid rgba(168, 85, 247, 0.15);
  border-top-color: #a855f7;
  animation: np-spin 0.9s linear infinite;
}
@keyframes np-spin { to { transform: rotate(360deg); } }
.np-ai-loading-title { font-size: var(--fs-lg); font-weight: 500; color: var(--text); }
.np-ai-loading-sub { font-size: var(--fs-sm); color: var(--text-muted); max-width: 400px; line-height: 1.5; }
.np-ai-loading-elapsed {
  font-size: 0.7rem; font-weight: 500; color: var(--text-muted);
  padding: 2px 10px; background: var(--surface-2, rgba(0,0,0,0.04));
  border-radius: 12px; font-variant-numeric: tabular-nums;
}
.np-ai-loading-hint { font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; }

/* Error state */
.np-ai-error {
  display: flex; flex-direction: column; align-items: center; padding: 30px 20px;
  gap: 10px; text-align: center;
}
.np-ai-error-icon { font-size: 32px; color: var(--warning, #f59e0b); }
.np-ai-error-title { font-size: var(--fs-lg); font-weight: 500; color: var(--text); }
.np-ai-error-msg {
  font-size: var(--fs-sm); color: var(--text-muted); max-width: 420px; line-height: 1.5;
  padding: 10px 14px; background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25); border-radius: 4px;
}

@media (max-width: 640px) {
  .np-ai-grid { grid-template-columns: 1fr; }
}

/* Equipment / brand chips inside the AI form */
.np-ai-brands {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.np-ai-brand-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; font-size: var(--fs-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.4px;
  border: 1px solid var(--border); border-radius: 16px;
  background: transparent; color: var(--text-muted); cursor: pointer;
  font-family: inherit; transition: all 0.12s;
}
.np-ai-brand-chip:hover { border-color: var(--text); color: var(--text); }
.np-ai-brand-chip.active {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7; border-color: rgba(168, 85, 247, 0.4);
}
.np-ai-brand-chip--locked {
  background: var(--input-bg); color: var(--text); border-style: dashed;
  cursor: default;
}
.np-ai-brand-chip--locked:hover { border-color: var(--border); color: var(--text); }
.np-ai-brand-count { font-weight: 400; opacity: 0.7; font-size: 0.65rem; }
.form-hint { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; }

/* Program cards */
.builder-program-list { }
.program-section-label { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.program-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.program-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 16px; cursor: pointer; transition: border-color .15s;
}
.program-card:hover { border-color: var(--primary); }
.program-card-name { font-size: var(--fs-base); font-weight: 500; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.program-card-meta { font-size: var(--fs-xs); color: var(--text-muted); display: flex; gap: 12px; margin-bottom: 10px; }
.program-card-actions { display: flex; gap: 6px; }

/* Template & experience badges */
.program-template-badge {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 1px 5px; border-radius: 3px; background: var(--primary); color: #fff;
}
.program-exp-badge {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border);
}
.program-exp-beginner { color: #10b981; border-color: #10b981; }
.program-exp-advanced { color: #f59e0b; border-color: #f59e0b; }

/* Editor header controls */
/* Legacy native-select styling — the .crm-select upgrade hides the native
   <select> and inserts a .custom-select div next to it. These styles
   remain as a fallback only (before JS upgrade runs). */
.pe-exp-select {
  font-size: var(--fs-xs); padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer;
}
/* When the experience-level select has been upgraded, the custom-select
   wrap is its next sibling. Force it to match the height + padding of the
   adjacent buttons (.btn-secondary / .btn-primary) in the program editor
   top bar. */
.pe-exp-select--upgrade + .custom-select { min-width: 128px; }
.pe-exp-select--upgrade + .custom-select .custom-select-trigger {
  padding: 8px 14px;
  font-size: 13.5px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  gap: 10px;
}
.pe-exp-select--upgrade + .custom-select .custom-select-trigger:hover {
  border-color: var(--text-muted);
}
.pe-template-toggle {
  display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); cursor: pointer; user-select: none;
  padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface);
}
.pe-template-toggle input { margin: 0; }
.pe-template-label { font-weight: 500; color: var(--text); }

/* Day tab add buttons wrap */
.pe-day-add-wrap { display: flex; gap: 2px; }
/* When single-day mode hides the tab row, give the "+ Add day" button a
   softer appearance so it doesn't scream for attention on an empty program. */
.pe-day-add-wrap--solo { opacity: 0.7; }
.pe-day-add-wrap--solo:hover { opacity: 1; }
.pe-day-add-wrap--solo .pe-day-tab--add { font-size: var(--fs-sm); padding: 8px 14px; }
.pe-day-tab--saved { font-size: var(--fs-xs); padding: 4px 8px; }

/* Custom volume inputs */
.vol-custom-inputs {
  display: flex; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border);
}
.vol-custom-inputs label { font-size: var(--fs-xs); font-weight: 500; display: flex; align-items: center; gap: 3px; color: var(--text-muted); }
.vol-custom-input {
  width: 40px; padding: 2px 4px; font-size: var(--fs-xs); text-align: center;
  border: 1px solid var(--border); border-radius: 3px; background: var(--surface); color: var(--text);
}

/* Saved days overlay */
.saved-day-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.saved-day-card:last-child { border-bottom: none; }
.saved-day-name { font-size: var(--fs-sm); font-weight: 500; }
.saved-day-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.saved-day-actions { display: flex; gap: 6px; align-items: center; }

/* ── Progression Editor ──────────────────────────────────── */
#progression-overlay { align-items: flex-start; }
.progression-editor {
  background: var(--surface); border-radius: 8px; width: 96vw; max-width: 1400px;
  max-height: 90vh; display: flex; flex-direction: column; margin-top: 3vh;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.progression-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.progression-header h3 { margin: 0; font-size: var(--fs-lg); }
.progression-header-actions { display: flex; align-items: center; gap: 10px; }
.progression-weeks-label { font-size: var(--fs-xs); font-weight: 500; display: flex; align-items: center; gap: 4px; }
.progression-weeks-input {
  width: 48px; padding: 4px 6px; font-size: var(--fs-xs); text-align: center;
  border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text);
}
.progression-day-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 20px;
}
.progression-body { flex: 1; overflow: auto; padding: 16px 20px; }

/* Progression grid */
.prog-grid {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;
  min-height: 200px;
}
.prog-week-col {
  min-width: 200px; max-width: 240px; flex-shrink: 0;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.prog-week-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); text-align: center; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}

/* "Duplicate Wk N" button at the top of each Week 2+ column. Subtle so it
   doesn't compete with the week label, primary-tinted on hover so coaches
   notice it as a real action. Does the per-exercise copy in one click. */
.prog-week-dup-btn {
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.prog-week-dup-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-dim, rgba(37, 87, 214,0.08));
  border-style: solid;
}

/* Phases / blocks — layer above the week grid */
.prog-phase-strip {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; margin-bottom: 12px;
}
.prog-phase-strip-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.prog-phase-strip-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-muted);
}
.prog-phase-empty {
  font-size: var(--fs-xs); color: var(--text-muted); font-style: italic;
  padding: 6px 0;
}
.prog-phase-row {
  display: grid; grid-template-columns: minmax(160px, 2fr) auto minmax(120px, 2fr) auto;
  gap: 10px; align-items: center; padding: 8px 10px; margin-top: 6px;
  border-left: 3px solid transparent; border-radius: 4px; background: var(--bg);
}
.prog-phase-row--0 { border-left-color: #3b82f6; }
.prog-phase-row--1 { border-left-color: #10b981; }
.prog-phase-row--2 { border-left-color: #f59e0b; }
.prog-phase-row--3 { border-left-color: #a855f7; }
.prog-phase-row--4 { border-left-color: #ec4899; }
.prog-phase-row--5 { border-left-color: #06b6d4; }
.prog-phase-name, .prog-phase-notes {
  padding: 6px 8px; font-size: var(--fs-sm); font-weight: 500;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text);
}
.prog-phase-range {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-muted);
}
.prog-phase-week {
  width: 42px; padding: 4px 4px; font-size: var(--fs-sm); font-weight: 500;
  text-align: center; background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text);
}

/* Week-column phase tint — subtle background pulled from the phase's stripe color */
.prog-week-col--phase-0 { background: rgba(59, 130, 246, 0.04); }
.prog-week-col--phase-1 { background: rgba(16, 185, 129, 0.04); }
.prog-week-col--phase-2 { background: rgba(245, 158, 11, 0.04); }
.prog-week-col--phase-3 { background: rgba(168, 85, 247, 0.04); }
.prog-week-col--phase-4 { background: rgba(236, 72, 153, 0.04); }
.prog-week-col--phase-5 { background: rgba(6, 182, 212, 0.04); }
.prog-week-phase-name {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.4px;
  padding: 1px 6px; background: var(--bg); border-radius: 3px;
  color: var(--text); display: inline-block;
}
.prog-week-cards { display: flex; flex-direction: column; gap: 6px; min-height: 60px; }
.prog-week-cards.prog-drop-target { background: rgba(var(--primary-rgb, 37,87,214), 0.08); border-radius: 4px; }

/* Progression cards */
.prog-card {
  border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px;
  background: var(--surface); font-size: var(--fs-xs);
}
.prog-card--base { cursor: grab; border-left: 3px solid var(--primary); opacity: 0.85; }
.prog-card--base.dragging { opacity: 0.4; }
.prog-card--override { border-left: 3px solid #10b981; }
.prog-card--empty {
  border: 1px dashed var(--border); background: transparent; text-align: center;
  padding: 6px 8px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.prog-card--empty:hover {
  border-color: var(--primary);
  background: var(--primary-dim, rgba(37, 87, 214,0.08));
}
.prog-card--empty:hover .prog-empty-hint { color: var(--primary); }
.prog-card-name {
  font-weight: 500; font-size: var(--fs-xs); margin-bottom: 4px;
  display: flex; justify-content: space-between; align-items: center;
}
.prog-card-remove {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: var(--fs-base); line-height: 1; padding: 0 2px;
}
.prog-card-remove:hover { color: var(--danger); }
.prog-card-fields { display: flex; gap: 8px; flex-wrap: wrap; }
/* Stack variant — used in override cards now that we render Sets / Reps /
   Intensity per week. Three inputs side-by-side don't fit a 220px-wide
   week column, so we go vertical inside the card. */
.prog-card-fields--stack { flex-direction: column; gap: 6px; }
.prog-card-fields--stack .prog-card-field { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
.prog-card-fields--stack .prog-card-input { width: 80px; }
.prog-card-val { font-size: var(--fs-xs); color: var(--text-muted); }
.prog-empty-hint {
  display: inline-block; margin-top: 2px;
  font-size: 10.5px; color: var(--text-subtle);
  letter-spacing: 0.02em;
}
.prog-card-field {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; color: var(--text-muted);
  display: flex; flex-direction: column; gap: 2px;
}
.prog-card-input {
  width: 52px; padding: 3px 4px; font-size: var(--fs-xs); text-align: center;
  border: 1px solid var(--border); border-radius: 3px; background: var(--bg); color: var(--text);
}
.prog-empty-label { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 3px; }
.prog-copy-btn {
  font-size: var(--fs-xs); padding: 2px 6px; border: 1px solid var(--border); border-radius: 3px;
  background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.prog-copy-btn:hover { border-color: var(--primary); color: var(--primary); }

/* ── Workout Schedules (client profile) ──────────────────── */
.workout-schedules-list { margin-top: 8px; }
.workout-schedules-empty { font-size: var(--fs-xs); color: var(--text-muted); padding: 8px 0; text-align: center; }
.workout-schedules-loading { font-size: var(--fs-xs); color: var(--text-muted); }
.ws-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.ws-row:last-child { border-bottom: none; }
.ws-name { font-size: var(--fs-sm); font-weight: 500; }
.ws-dates { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.ws-status {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 1px 5px; border-radius: 3px;
}
.ws-active { background: #10b981; color: #fff; }
.ws-scheduled { background: var(--border); color: var(--text-muted); }
.ws-completed { background: var(--bg); color: var(--text-muted); opacity: 0.6; }
.ws-actions { display: flex; gap: 4px; }

/* Timeline container for the Program tab queue view */
.ws-timeline { display: flex; flex-direction: column; gap: 14px; }
.ws-timeline-section {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px;
}
.ws-timeline-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-muted); margin-bottom: 6px;
}
.ws-label-active   { color: #10b981; }
.ws-label-next     { color: #3b82f6; }
.ws-label-queued   { color: var(--text-muted); }
.ws-label-completed { color: var(--text-muted); cursor: pointer; list-style: none; }
.ws-label-completed::-webkit-details-marker { display: none; }
.ws-completed-wrap {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px;
}
.ws-completed-wrap[open] .ws-label-completed::after { content: ' ▾'; }
.ws-completed-wrap:not([open]) .ws-label-completed::after { content: ' ▸'; }

/* Row variants per kind */
.ws-row--active {
  padding: 10px 0; border-bottom: 1px dashed var(--border);
}
.ws-row--active .ws-name { font-size: var(--fs-base); font-weight: 600; }
.ws-row--next { padding: 8px 0; }
.ws-row--queued { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.ws-row--completed { padding: 5px 0; opacity: 0.7; border-bottom: 1px dashed var(--border); }
.ws-row--completed .ws-name { font-size: var(--fs-xs); }

/* Style + remaining badges */
.ws-style-badge {
  font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 1px 6px; border-radius: 3px; background: var(--input-bg); color: var(--text-muted);
  border: 1px solid var(--border); margin-left: 6px;
}
.ws-style-cycle { background: #f3e8ff; color: #7c3aed; border-color: #d8b4fe; }
.ws-remaining {
  font-size: var(--fs-xs); color: #10b981; font-weight: 500; margin-left: 4px;
}

/* Adherence chips (last 7d completion %) on active schedule rows */
.ws-adh {
  display: inline-block; font-size: 0.7rem; font-weight: 500;
  padding: 1px 6px; border-radius: 3px; margin-left: 6px;
  border: 1px solid var(--border);
}
.ws-adh-good { background: rgba(16, 185, 129, 0.12); color: #10b981; border-color: rgba(16, 185, 129, 0.3); }
.ws-adh-warn { background: rgba(245, 158, 11, 0.12); color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); }
.ws-adh-bad  { background: rgba(59, 130, 246, 0.12); color: #3b82f6; border-color: rgba(59, 130, 246, 0.3); }

.ws-queue-add {
  display: flex; justify-content: center; padding-top: 4px;
}

/* ── Assignment Modal ────────────────────────────────────── */
.assign-program-name { font-size: var(--fs-base); font-weight: 500; margin-bottom: 12px; }
.assign-schedule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.assign-day-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.assign-day-row:last-child { border-bottom: none; }
.assign-day-name { font-size: var(--fs-xs); font-weight: 500; min-width: 100px; }
.assign-day-checks { display: flex; gap: 4px; }
.assign-wd-check {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); cursor: pointer;
}
.assign-wd-check input { margin: 0; }
.assign-wd-check input:checked + span { color: var(--primary); }
.assign-preview { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 8px; }

/* Style badge next to program name (weekly vs cycle) */
.assign-program-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.assign-style-badge {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.6px;
  padding: 2px 8px; border-radius: 4px; background: var(--surface-2, rgba(0,0,0,0.04));
  color: var(--text-muted); border: 1px solid var(--border);
}
.assign-style-badge--cycle { background: #f3e8ff; color: #7c3aed; border-color: #d8b4fe; }

/* Cycle preview strip (14-day look-ahead) */
.assign-cycle-preview {
  margin-top: 12px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.assign-cycle-preview-header {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-muted); padding: 8px 12px; background: var(--surface-2, rgba(0,0,0,0.03));
  border-bottom: 1px solid var(--border);
}
.assign-cycle-row {
  display: grid; grid-template-columns: 1fr 90px 1fr; gap: 8px;
  padding: 6px 12px; font-size: var(--fs-xs); border-bottom: 1px solid var(--border);
  align-items: center;
}
.assign-cycle-row:last-child { border-bottom: none; }
.assign-cycle-row.is-rest { color: var(--text-muted); background: var(--surface-2, rgba(0,0,0,0.02)); }
.assign-cycle-date { font-weight: 500; color: var(--text); }
.assign-cycle-row.is-rest .assign-cycle-date { color: var(--text-muted); }
.assign-cycle-slot { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; font-size: 0.7rem; }
.assign-cycle-label { font-weight: 500; text-align: right; }

/* Access level picker */
.assign-access-picker { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.assign-access-opt {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 6px; transition: border-color 0.12s, background 0.12s;
}
.assign-access-opt:hover { border-color: var(--text-muted); }
.assign-access-opt input { margin-top: 3px; }
.assign-access-opt input:checked ~ div .assign-access-title { color: var(--primary); }
.assign-access-opt:has(input:checked) { border-color: var(--primary); background: rgba(59, 130, 246, 0.04); }
.assign-access-title { font-size: var(--fs-sm); font-weight: 500; }
.assign-access-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
.assign-access-default { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; margin-left: 4px; }

/* ── Workout Detail View ─────────────────────────────────── */
.wd-week-badge {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; background: var(--primary); color: #fff;
}
.wd-section { margin-bottom: 16px; }
.wd-section-name {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.wd-exercise {
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.wd-exercise:last-child { border-bottom: none; }
.wd-exercise--edit { background: var(--bg); border-radius: 4px; padding: 8px; margin-bottom: 4px; border: 1px solid var(--border); }
.wd-ex-name { font-size: var(--fs-sm); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.wd-ex-muscle { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); }
.wd-ss-badge {
  font-size: var(--fs-xs); font-weight: 500; padding: 1px 4px; border-radius: 3px;
  background: var(--primary); color: #fff;
}
.wd-ex-stats {
  display: flex; gap: 10px; margin-top: 3px; font-size: var(--fs-xs); color: var(--text-muted);
}
.wd-ex-notes { font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; margin-top: 3px; }
.wd-ex-fields { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.wd-field {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; color: var(--text-muted);
  display: flex; flex-direction: column; gap: 2px;
}
.wd-field-input {
  width: 60px; padding: 4px 6px; font-size: var(--fs-xs);
  border: 1px solid var(--border); border-radius: 3px; background: var(--surface); color: var(--text);
}
.wd-field-sm { width: 44px; }

/* Per-exercise "Customize for this client" (A.1) */
.wd-exercise--overridden {
  background: rgba(124, 58, 237, 0.06);
  border-left: 2px solid #7c3aed;
  padding-left: 8px;
}
.wd-ex-edit-btn {
  margin-left: auto; background: none; border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 5px; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; transition: all 0.12s;
}
.wd-ex-edit-btn:hover { border-color: #7c3aed; color: #7c3aed; }
.wd-ex-reset {
  font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 2px 6px; border-radius: 3px; background: rgba(124, 58, 237, 0.12);
  color: #7c3aed; border: 1px solid #d8b4fe; cursor: pointer;
}
.wd-ex-reset:hover { background: rgba(124, 58, 237, 0.2); }

.wd-ex-override-actions { display: inline-flex; gap: 4px; margin-left: auto; }
.wd-ex-promote {
  font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 2px 6px; border-radius: 3px;
  background: rgba(16, 185, 129, 0.12); color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.4); cursor: pointer;
}
.wd-ex-promote:hover { background: rgba(16, 185, 129, 0.22); }
.wd-override-panel {
  margin-top: 8px; padding: 10px 12px; background: var(--surface-2, rgba(0,0,0,0.03));
  border: 1px solid #d8b4fe; border-radius: 6px;
}
.wd-override-header {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  color: #7c3aed; margin-bottom: 8px;
}
.wd-override-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.wd-override-field {
  display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs);
  font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px;
}
.wd-override-field input, .wd-override-field textarea {
  padding: 5px 7px; font-size: var(--fs-sm); font-weight: 500; text-transform: none;
  border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text);
  font-family: inherit;
}
.wd-override-notes { margin-top: 8px; display: block; }
.wd-override-notes textarea { width: 100%; resize: vertical; }
.wd-override-actions {
  display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px;
}
.wd-override-remove { color: var(--danger); border-color: rgba(220, 38, 38, 0.3); }
.wd-override-remove:hover { background: rgba(220, 38, 38, 0.08); }

@media (max-width: 640px) {
  .wd-override-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Workout log banner (coach view) */
.wd-log-banner {
  display: flex; gap: 16px; padding: 10px 12px; margin-bottom: 12px;
  background: var(--bg); border-radius: 6px; border: 1px solid var(--border);
}
.wd-log-stat { display: flex; flex-direction: column; align-items: center; flex: 1; }
.wd-log-stat-val { font-size: var(--fs-base); font-weight: 500; }
.wd-log-stat-label { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; color: var(--text-muted); margin-top: 1px; }

/* Client set log table (coach view) */
.wd-set-logs { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
.wd-set-log-header { display: flex; gap: 4px; margin-bottom: 3px; }
.wd-set-log-header .wd-set-log-col { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.wd-set-log-row { display: flex; gap: 4px; padding: 2px 0; }
.wd-set-log-col { flex: 1; font-size: var(--fs-xs); text-align: center; }

/* ── Program Editor ───────────────────────────────────────── */
/* Save & Share is opened FROM the builder, so it has to sit on top of it.
   Both are plain `.modal-overlay` (z-index 9000) and #ss-overlay is declared
   EARLIER in index.html (2871 vs 2969) — at equal z-index the later element
   wins, so the dialog rendered underneath the builder and looked like nothing
   had happened. Above the builder, below the recording chrome (9500/9600). */
#ss-overlay:not(.hidden) { z-index: 9400; }

#program-editor-overlay { align-items: flex-start; }
/* Builder overlay overrides the generic modal-overlay padding so the
   editor truly fills the viewport — no dark margins, no centering. */
#program-editor-overlay { padding: 0; align-items: stretch; justify-content: stretch; background: var(--bg); }
.program-editor {
  /* Fullscreen workspace — no margins, no max-width. The builder is its
     own dedicated app surface; the dashboard chrome behind it is hidden by
     the overlay. */
  background: var(--bg);
  width: 100vw; max-width: none;
  height: 100vh; max-height: 100vh;
  margin: 0;
  border: 0; border-radius: 0;
  display: flex; flex-direction: column;
}
.program-editor-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border); gap: 12px; flex-shrink: 0;
}
.program-editor-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
/* Keep Save Program on a single line regardless of container width. */
.pe-save-btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }

/* ── Stage 4 save-control chrome ──────────────────────────────
   Unassigned programs autosave silently: the quiet hint replaces the button.
   Live programs show "Publish changes" + an unpublished-changes dot. */
.pe-save-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.pe-save-hint[data-state="saving"] { color: var(--text-subtle, var(--text-muted)); }
.pe-save-hint[data-state="error"]  { color: var(--warning, #f59e0b); }
/* Unpublished-changes dot on the Publish button. Amber (colorblind-safe,
   brighter) and always paired with the "Publish changes" label + tooltip, so
   colour is never the only signal. */
.pe-unpub-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
  flex: 0 0 auto;
}
.pe-unpub-dot[hidden] { display: none; }

/* Reopen-with-a-draft banner — "You have unpublished changes" + resume/discard.
   Sits at the top of the editor body like the shared-program banner. */
.pe-draft-banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.5;
}
.pe-draft-banner-text { min-width: 0; }
.pe-draft-banner-actions { display: inline-flex; gap: 8px; flex: 0 0 auto; }
.pe-draft-discard {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500;
  padding: 5px 10px; border-radius: 4px; font-family: inherit;
}
.pe-draft-discard:hover { color: var(--danger); background: rgba(239, 68, 68, 0.1); }

/* Options-menu destructive item ("Discard this session's changes"). */
.pe-more-item.pe-more-danger { cursor: pointer; }
.pe-more-item.pe-more-danger:hover { color: var(--danger); }
.pe-more-item.pe-more-danger:hover .pe-more-sub { color: var(--danger); opacity: 0.75; }
/* X close button — generously padded square so it reads as a real button
   alongside Save Program. Same surface + border as btn-secondary; hover
   tints red to signal destructive action. */
/* Inherits all sizing/colors from .btn-secondary — same height as the
   Assign + Options buttons natively. This rule only overrides what's needed
   to make it square (symmetric padding) and add the destructive-action red
   tint on hover. */
.pe-close-btn {
  padding-left: 7px;
  padding-right: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.pe-close-btn:hover { color: var(--danger); border-color: rgba(239, 68, 68, 0.4); }
/* Undo / redo icon buttons — borderless, larger glyphs, visible but
   unobtrusive at rest; pick up a soft background on hover. Disabled
   state (no history in that direction) fades them out. */
.pe-history-btn {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text); cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.pe-history-btn svg { width: 18px; height: 18px; }
.pe-history-btn:hover:not(:disabled) {
  background: var(--surface-2, rgba(255,255,255,0.06));
}
.pe-history-btn:disabled,
.pe-history-btn[aria-disabled="true"] { opacity: 0.28; cursor: default; }

/* ══════════════════════════════════════════════════════════════════
   STAGE 1 — the canvas swap. Top-bar chrome + sequence strip + dense
   editable field-table (pe2- prefix). Sapphire is accent-only; zone words
   always accompany zone colors (colorblind owner).
   ══════════════════════════════════════════════════════════════════ */

/* ── BUILDER GROUND (reference restyle) ──────────────────────────────
   The builder is a fullscreen dedicated surface, so it gets its OWN
   ground: near-black neutrals instead of the CRM's blue-tinted #0d1117
   family, white-alpha hairlines instead of solid #313d54, white-alpha
   text ramp. Done by REMAPPING the existing token names inside the
   overlay's scope — every pe-/pe2-/vol- rule already reads these tokens,
   so the whole builder moves at once and NOTHING outside the overlay is
   affected (the CRM's :root values are untouched).

   The extra selectors are the builder's body-portalled popovers (schedule,
   day kebab, volume tooltip/legend, exercise-info) — they render outside
   #program-editor-overlay in the DOM but belong to the builder, so they
   need the same ground or they'd read as a different app. */
#program-editor-overlay,
.pe2-schedule-pop,
.pe-day-kebab-menu,
.vol-hover-tip,
.vol-legend-popover,
.pe-info-popover {
  --bg:            #0d1117;
  --surface:       #161c27;
  --surface-2:     #1e2535;
  --surface-hover: #252d40;
  --border:        rgba(255, 255, 255, 0.10);
  --border-light:  rgba(255, 255, 255, 0.06);
  --text:          #ffffff;
  --text-primary:  #ffffff;
  --text-muted:    rgba(255, 255, 255, 0.60);
  --text-secondary:rgba(255, 255, 255, 0.60);
  --text-subtle:   rgba(255, 255, 255, 0.38);
  --input-bg:      #131926;
  --row-border:    rgba(255, 255, 255, 0.06);
  --hover-overlay: rgba(255, 255, 255, 0.05);

  /* Builder-only additions. Everything the restyle paints goes through one of
     these — no bare hex in the rules below — so the ground can move in one go.
     The ground is the CRM's own #0d1117 blue-black family, NOT the reference
     export's #141414: side by side with the rest of the app that warm neutral
     reads brown. The reference's contribution is the type, the card rows and
     the hairline system — not its hue. */
  --pe-faint:      rgba(255, 255, 255, 0.24);  /* the faintest legible tone */
  --pe-accent-lt:  #8fd2fb;                    /* light-blue companion to sapphire */
  --pe-accent-tint:rgba(37, 87, 214, 0.14);
  --pe-accent-edge:rgba(37, 87, 214, 0.30);
  --pe-card:       rgba(255, 255, 255, 0.05);  /* exercise row card */
  --pe-card-edge:  rgba(255, 255, 255, 0.06);
  --pe-card-hover: rgba(255, 255, 255, 0.075);
  --pe-card-hover-edge: rgba(255, 255, 255, 0.14);
  --pe-field-edge: rgba(255, 255, 255, 0.07);  /* prescription-field hairline */
  --pe-chrome:     #10151f;                    /* segmented / tab surface */
  --pe-rail-bg:    #0a0e15;
  --pe-footer-bg:  #06090e;
  --pe-item:       #121823;                    /* library row */
  --pe-item-hover: #1a2130;
  --pe-panel:      #0f141d;                    /* inset note block */
  --pe-track:      #1b2231;                    /* volume bar track */
  --pe-header-bg:  rgba(0, 0, 0, 0.55);        /* top-bar band */
  --pe-band:       rgba(255, 255, 255, 0.10);  /* MEV→MAV target band */
  --pe-band-edge:  rgba(255, 255, 255, 0.20);
  /* Headline face. Saira is a squared-terminal grotesque whose bowls are
     superelliptical — the structural DNA of the FitOps mark (its icon is a
     squircle; the O and p are squared rectangles). Set UPRIGHT: the oblique
     is the logo's signature, and repeating it across the UI turns a signature
     into a motif. The mark carries the energy so the interface does not. */
  --pe-display:    'Saira', 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Light theme keeps the SAME restyle — type, cards, columns, spacing — on a
   light ground. The reference is a dark design, so the near-black values
   above are the dark defaults; this block is what stops a light-mode coach
   getting a black builder with light-mode chrome around it. */
[data-theme="light"] #program-editor-overlay,
[data-theme="light"] .pe2-schedule-pop,
[data-theme="light"] .pe-day-kebab-menu,
[data-theme="light"] .vol-hover-tip,
[data-theme="light"] .vol-legend-popover,
[data-theme="light"] .pe-info-popover {
  --bg:            #f7f9fc;
  --surface:       #ffffff;
  --surface-2:     #f1f4f9;
  --surface-hover: #e9eef6;
  --border:        rgba(15, 23, 42, 0.14);
  --border-light:  rgba(15, 23, 42, 0.08);
  --text:          #0f172a;
  --text-primary:  #0f172a;
  --text-muted:    rgba(15, 23, 42, 0.62);
  --text-secondary:rgba(15, 23, 42, 0.62);
  --text-subtle:   rgba(15, 23, 42, 0.42);
  --input-bg:      #ffffff;
  --row-border:    rgba(15, 23, 42, 0.08);
  --hover-overlay: rgba(15, 23, 42, 0.05);

  --pe-faint:      rgba(15, 23, 42, 0.38);
  --pe-accent-lt:  #1f4bc0;
  --pe-accent-tint:rgba(37, 87, 214, 0.10);
  --pe-accent-edge:rgba(37, 87, 214, 0.28);
  --pe-card:       #ffffff;
  --pe-card-edge:  rgba(15, 23, 42, 0.10);
  --pe-card-hover: #ffffff;
  --pe-card-hover-edge: rgba(37, 87, 214, 0.35);
  --pe-field-edge: rgba(15, 23, 42, 0.12);
  --pe-chrome:     #f1f4f9;
  --pe-rail-bg:    #f7f9fc;
  --pe-footer-bg:  #f1f4f9;
  --pe-item:       #ffffff;
  --pe-item-hover: #f5f8fd;
  --pe-panel:      #f1f4f9;
  --pe-track:      #e2e8f0;
  --pe-header-bg:  #ffffff;
  --pe-band:       rgba(15, 23, 42, 0.10);
  --pe-band-edge:  rgba(15, 23, 42, 0.22);
}
/* Display type — Inter Tight, italic 900, uppercase, tight tracking. One
   utility so program name / day name / section label / rail headings can't
   drift apart. */
.pe-display,
#program-editor-overlay .pe-program-name,
#program-editor-overlay .pe2-day-name,
#program-editor-overlay .pe-volume-header,
#program-editor-overlay .pe-library-header {
  font-family: var(--pe-display);
  font-style: normal; font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.01em;
}

/* The shared block above sets display tracking (-0.01em), which is right for
   the big program/day names but wrong for the small uppercase rail headers —
   at 11-13px, uppercase needs air, not tightening. */
#program-editor-overlay .pe-volume-header,
#program-editor-overlay .pe-library-header { letter-spacing: 0.06em; }
/* Micro-label — 9-11px, 800, uppercase, wide tracking. Column heads,
   stat captions, meta captions. */
.pe-microlabel {
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-subtle);
}
#program-editor-overlay ::placeholder { color: var(--pe-faint); }

/* Top bar: program name · [Focus|Week|Grid] · actions (undo/redo · Options ·
   ⌘K · Assign · Save · close). Actions hug the right; name + switcher left. */
.program-editor-header { background: var(--pe-header-bg); }
.program-editor-header-actions { margin-left: auto; }
/* Program identity block — display name + DRAFT/LIVE badge over a quiet
   subtitle line ("Push / Pull / Legs · 4 days"). Replaces the bare input. */
.pe-title-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 0 1 auto; }
.pe-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pe-status-badge {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1; padding: 3px 6px; border-radius: 4px;
  color: var(--pe-accent-lt);
  background: rgba(37, 87, 214, 0.16);
  border: 1px solid var(--pe-accent-edge);
}
/* LIVE reads as amber (colorblind-safe, brighter) AND says the word — the
   colour is never the only signal. */
.pe-status-badge[data-state="live"] {
  color: #f59e0b; background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.38);
}
/* Metadata line: status badge + the derived subtitle, sharing one row.
   padding-left matches the name input's own 6px padding + 1px border so the
   badge lines up with the first letter of the program name above it. */
.pe-title-meta {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 7px;
}
.pe-title-sub {
  font-size: 11px; color: var(--text-subtle); letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.pe-title-sub:empty { display: none; }
.pe-program-name {
  background: transparent; border: 1px solid transparent; color: var(--text);
  font-size: 17px; line-height: 1.2;
  padding: 2px 6px; border-radius: var(--radius-sm); flex: 0 1 auto;
  /* Hugs its text instead of a flat 240px, which both stranded the badge
     out to its right and clipped any name longer than the box. */
  field-sizing: content; width: auto; min-width: 120px; max-width: 420px;
}
.pe-program-name:hover { border-color: var(--border); }
.pe-program-name:focus { border-color: var(--primary); outline: none; background: var(--input-bg); }
/* One height, one radius for the whole top-bar action row. It used to run
   three heights (switcher 34.5 / icon buttons 34 / Assign + Publish 31.5)
   and two radii. Heights are declared rather than left to fall out of
   padding, so the row can't drift apart again when a label changes. */
.pe-view-switcher--topbar {
  display: inline-flex; gap: 2px; align-items: stretch;
  background: var(--pe-chrome); border: 1px solid var(--pe-field-edge);
  border-radius: var(--radius-sm); padding: 2px; flex: 0 0 auto;
  height: 34px;
}
/* Scoped to the builder top bar — .btn-primary / .btn-secondary are shared
   across the whole CRM and must not be resized globally. */
.program-editor-header-actions .btn-primary,
.program-editor-header-actions .btn-secondary {
  height: 34px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Hairline between the canvas group and the program-action group. */
.pe-topbar-div {
  flex: 0 0 auto; width: 1px; height: 20px;
  background: var(--border); margin: 0 4px;
}
.pe-view-switcher--topbar .pe-view-tab {
  /* align-self, not the shell's align-items: the base .pe-view-switcher rule
     further down this file has the SAME specificity as --topbar and sets
     align-items: center, so it wins on order. Setting stretch on the item
     sidesteps that entirely and can't be undone by rule order. */
  align-self: stretch;
  display: inline-flex; align-items: center; gap: 6px;
  /* 2px = the 4px shell minus its 2px padding, so the active pill's corners
     sit concentric inside the shell instead of bulging past them. */
  padding: 0 13px; background: transparent; border: none; border-radius: 2px;
  color: var(--text-muted); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  font-family: inherit; cursor: pointer;
  transition: color .15s cubic-bezier(.16,1,.3,1), background .15s cubic-bezier(.16,1,.3,1);
}
.pe-view-switcher--topbar .pe-view-tab:hover { color: var(--text); background: var(--hover-overlay); }
.pe-view-switcher--topbar .pe-view-tab.active { background: var(--primary); color: #fff; }
.pe-view-switcher--topbar .pe-view-tab.active:hover { background: var(--primary); }
.pe-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; flex: 0 0 auto;
}
.pe-icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.pe-icon-btn.pe-history-btn { background: var(--surface-2); border: 1px solid var(--border); }
.pe-icon-btn.pe-history-btn:disabled,
.pe-icon-btn.pe-history-btn[aria-disabled="true"] { opacity: 0.32; cursor: default; }
.pe-icon-btn.pe-history-btn:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--surface-hover); color: var(--text); }
.pe-icon-btn.pe-close-btn:hover { color: var(--danger); border-color: rgba(239, 68, 68, 0.4); }

/* ── Sequence strip — the workout tab bar + Schedule control ── */
.pe-seqstrip-wrap { flex-shrink: 0; padding: 18px 28px 10px; }
.pe2-seqstrip { display: flex; align-items: flex-start; gap: 10px; }
.pe2-seqstrip--solo { justify-content: flex-start; }
.pe2-seq-spacer { flex: 1 1 0; min-width: 8px; }
.pe2-select-trigger {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border-light);
  border-radius: 6px; font-family: inherit; cursor: pointer; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  transition: all .15s cubic-bezier(.16,1,.3,1);
}
.pe2-select-trigger:hover { border-color: rgba(37, 87, 214, 0.6); }
.pe2-select-trigger svg { color: var(--text-subtle); }

/* Workout tab bar — one tab per day definition. WRAPS to multiple rows when
   there are many days (the old horizontal scroll hid tabs off-screen). Each
   tab carries its set count inline: "PUSH A  17 sets". */
.pe2-tabbar {
  display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto;
  flex-wrap: wrap; row-gap: 8px;
}
.pe2-tab {
  flex: 0 0 auto; max-width: 240px; height: 34px; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px; background: var(--pe-chrome); border: 1px solid var(--pe-field-edge); border-radius: 6px;
  font-family: inherit; cursor: pointer; color: var(--text-muted);
  transition: all .15s cubic-bezier(.16,1,.3,1);
}
.pe2-tab b {
  font-family: var(--pe-display); font-style: normal; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.01em;
  font-size: 13px; color: var(--text-muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pe2-tab-sets {
  font-size: 11px; font-weight: 600; color: inherit; opacity: 0.5;
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto;
}
.pe2-tab:hover { border-color: var(--text-subtle); }
.pe2-tab:hover b { color: var(--text); }
.pe2-tab-active { background: rgba(37, 87, 214, 0.16); border-color: var(--primary); color: var(--text); }
.pe2-tab-active b { color: var(--text); }
.pe2-tab-active:hover { border-color: var(--primary); }
.pe2-tab-rest b { color: var(--text-subtle); }
.pe2-tab-rest.pe2-tab-active b { color: var(--text); }

.pe2-seqadd {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  width: 30px; height: 30px; flex: 0 0 auto; background: none; border: 1px dashed var(--border);
  border-radius: 6px; color: var(--text-subtle); cursor: pointer; font-family: inherit;
}
.pe2-seqadd:hover { color: var(--text); border-color: var(--text-subtle); }
.pe2-seqadd--solo { width: auto; height: 32px; padding: 0 14px; font-size: var(--fs-sm); }

/* Ghost "Schedule" control — pinned right; opens the placement popover. */
.pe2-schedule-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); font-family: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.pe2-schedule-btn:hover { color: var(--text); border-color: var(--text-subtle); }
.pe2-schedule-btn svg { color: var(--text-subtle); flex: 0 0 auto; }
.pe2-schedule-btn-label { font-weight: 500; }
.pe2-schedule-btn-sum {
  font-size: 11px; color: var(--text-subtle); padding-left: 8px; margin-left: 1px;
  border-left: 1px solid var(--border); white-space: nowrap;
}

/* Schedule popover — floating placement surface (mode + per-slot rows). */
.pe2-schedule-pop {
  position: fixed; z-index: 10001; width: 264px; max-height: min(460px, 80vh); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md, 8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); padding: 12px;
}
.pe2-schedule-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pe2-schedule-pop-title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
.pe2-schedule-mode { height: 28px; }
.pe2-schedule-cyclelen {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 2px 10px; font-size: var(--fs-sm); color: var(--text-muted);
}
.pe2-schedule-cyclelen input {
  width: 56px; height: 26px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); text-align: center; font-family: inherit;
}
.pe2-schedule-rows { display: flex; flex-direction: column; gap: 4px; }
/* Shown in weekly mode in place of the old weekday rows — says where the
   placement decision moved to, so its absence reads as deliberate. */
.pe2-schedule-note {
  max-width: 250px; font-size: 12px; line-height: 1.5;
  color: var(--text-muted); text-transform: none; letter-spacing: 0;
}
.pe2-schedule-row { display: flex; align-items: center; gap: 10px; }
.pe2-schedule-slot {
  flex: 0 0 46px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-subtle);
}
.pe2-schedule-val { flex: 1 1 0; min-width: 0; justify-content: space-between; height: 30px; }
.pe2-schedule-val span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe2-schedule-val svg { flex: 0 0 auto; color: var(--text-subtle); }
.pe2-schedule-val-rest { color: var(--text-subtle); }
.pe2-schedule-val-rest span { font-weight: 400; }

/* ── Day header — DAY N eyebrow · big display name · stat row · kebab ──
   The reference's masthead: the day name is the loudest thing on the canvas,
   with the composition stats beneath as big numbers + small uppercase
   captions. The name is still a real <input> (rename in place). */
.pe2-day-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px 24px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border-light);
}
/* One line: name + stats + (rest chip). Was three stacked bands. */
.pe2-day-headline { min-width: 0; flex: 1 1 auto; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; row-gap: 4px; }
.pe2-day-restchip {
  align-self: center; font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-subtle);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
}
.pe2-day-eyebrow {
  font-family: var(--pe-display); font-style: normal; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.15em;
  font-size: 10px; color: var(--primary); margin-bottom: 5px;
}
.pe2-day-name {
  display: block;
  background: transparent; border: 1px solid transparent; color: var(--text);
  font-size: 26px; line-height: 1; letter-spacing: -0.02em;
  /* Explicit height: Chrome sizes an <input>'s content box from font metrics,
     not from line-height, so the box came out taller than the type. */
  height: 34px;
  padding: 2px 6px; margin: 0 0 0 -7px; border-radius: var(--radius-sm);
  /* The name shares its line with the stats now, so it must NOT claim the full
     row — it did, which pushed the stats onto a second line and undid the
     saving. field-sizing lets the input hug its text so short names ("Push A")
     don't leave a gap before the stats; browsers without it fall back to the
     default input width, which is still a sane size at this font. */
  flex: 0 1 auto;
  field-sizing: content;
  width: auto; min-width: 90px; max-width: 360px;
}
.pe2-day-name:hover { border-color: var(--border); }
.pe2-day-name:focus { border-color: var(--primary); outline: none; background: var(--input-bg); }
/* No column gap — the divider's own margins own the horizontal spacing, so
   it can sit optically centred between the two stats (see the ::before). */
.pe2-comp { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 0; }
/* Number + small uppercase caption, separated by a hairline tick. These are
   reference figures you glance at, not the headline — the day name is. At
   17px and full --text the numbers read as loud as the name beside them and
   split the eye between two focal points, so they sit a tier down in both
   size and brightness. */
.pe2-comp span {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  /* Caption colour is left alone — it was never the loud part, and at this
     size --text-subtle is already only 3.6:1. The number above it is what
     read as bright, so that's what steps down. (--pe-faint here would be
     2.1:1, nowhere near legible.) */
  color: var(--text-subtle);
}
/* The tick is a flex child of the span that FOLLOWS it, so that span's own
   5px gap lands on the tick's right side only. Equal margins would therefore
   look lopsided — 12 and 7 are what produce equal OPTICAL space: 12px before
   the tick, 7 + 5 = 12px after it. */
.pe2-comp span + span::before {
  content: ""; align-self: center; flex: 0 0 auto;
  width: 1px; height: 10px; background: var(--border);
  margin-left: 12px; margin-right: 7px;
}
.pe2-comp b {
  color: var(--text-muted); font-weight: 700; font-size: 12.5px; letter-spacing: 0;
  font-variant-numeric: tabular-nums; text-transform: none;
}
.pe2-day-kebab {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; background: var(--bg); border: 1px solid var(--border-light); border-radius: 6px;
  color: var(--text-subtle); cursor: pointer;
  transition: all .15s cubic-bezier(.16,1,.3,1);
}
.pe2-day-kebab:hover, .pe2-day-kebab[aria-expanded="true"] { color: var(--text); border-color: var(--text-subtle); }
.pe2-rest-message { padding: 40px 12px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }

/* ── Section header — display label, then a hairline rule running to the
   right edge (reference "MAIN WORK ——————— actions"). The rule is a
   flexible spacer element rather than a border-bottom so the label sits ON
   the line rather than above it. ── */
.pe2-section { margin-bottom: 18px; }
.pe2-sec-head {
  display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 2px;
  cursor: pointer;
}
.pe2-sec-head::after {
  content: ""; order: 8; flex: 1 1 auto; height: 1px; background: var(--border-light);
}
.pe2-sec-chevron { color: var(--text-subtle); display: inline-flex; transition: transform .12s; flex: 0 0 auto; }
.pe2-sec-name {
  background: transparent; border: 1px solid transparent; color: var(--text);
  font-family: var(--pe-display); font-style: normal; font-weight: 700;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
  padding: 3px 4px; border-radius: 4px; width: 118px; flex: 0 0 auto;
}
.pe2-sec-name:hover { border-color: var(--border); }
.pe2-sec-name:focus {
  border-color: var(--primary); outline: none; color: var(--text);
  background: var(--input-bg); text-transform: none;
  font-family: inherit; font-style: normal; font-weight: 500; letter-spacing: 0;
}
.pe2-sec-summary { font-size: 11px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.pe2-sec-est { font-size: 11px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
/* Actions ride after the flexible hairline (order 9 vs the rule's 8). */
.pe2-sec-actions { order: 9; margin-left: 0; display: flex; align-items: center; gap: 4px; opacity: 0; flex: 0 0 auto; }
.pe2-sec-head:hover .pe2-sec-actions, .pe2-section--collapsed .pe2-sec-head:hover .pe2-sec-actions { opacity: 1; }
.pe2-sec-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 26px;
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-muted); padding: 0 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: inherit; cursor: pointer;
  transition: all .15s cubic-bezier(.16,1,.3,1);
}
.pe2-sec-btn:hover { border-color: rgba(37, 87, 214, 0.6); }
.pe2-sec-btn:hover { background: var(--hover-overlay); color: var(--text); }
.pe2-sec-btn--danger:hover { background: var(--danger-dim); color: var(--danger); }

/* ── The dense grid table ──
   STAYS a <table> + <colgroup>. The reference draws each exercise as its own
   card; we get that look INSIDE the table with
   `border-collapse: separate; border-spacing: 0 6px` plus a background on the
   row's cells and the outer radii on the first/last cell. This is the only
   construction that keeps BOTH (a) the bulk-edit ghost row's pixel-exact
   column alignment (it's a real <tr> in the same colgroup) and (b) the merged
   superset rest cell as a rowspan — neither of which flexbox can express. */
.pe2-grid {
  /* Row height and the inside-a-run gap are tokens because the superset
     bracket has to span exactly N rows. The old connector line hardcoded
     "row 56px" in a comment and silently went wrong when rows became 44px —
     it overshot 3px at the top and stopped 6px short at the bottom. Anything
     that measures rows reads these. */
  --pe2-row-h: 44px;
  /* Every adjacent row is now one border-spacing apart. The zero-height link
     row used to sit between non-superset pairs and contribute a SECOND 3px,
     which is why runs read tighter than everything else. With that row gone
     the spacing is uniform and the bracket does the grouping. */
  --pe2-run-gap: 6px;
  width: 100%; table-layout: fixed;
  border-collapse: separate;
  /* One gap for every pair of rows, superset or not. It used to be 3px here
     because a zero-height link row sat between non-superset pairs and picked
     up a spacing on each side, which is why runs read tighter than the rest.
     That row is gone and the bracket does the grouping. */
  border-spacing: 0 6px;
  /* Cancel the leading/trailing spacing so the header and the last row
     aren't floating on dead air. */
  margin: -3px 0;
}
.pe2-grid col.c-drag { width: 26px; }
.pe2-grid col.c-num  { width: 38px; }
.pe2-grid col.c-ex   { width: auto; }
/* Column = field + the td's 0 10px padding (20px), so the col is what
   actually bounds the field — S67 widened the reps INPUT to 96px but left
   this col at 88px (68px inner), so "10-12/leg" still clipped, and the
   96px rest wrap overflowed its 94px cell into the RIR column (S68,
   measured). Keep col and field in sync when changing either. */
.pe2-grid col.c-sets { width: 66px; }
/* S69 (measured, 600 14px -apple-system): the rep shorthand made this the
   widest field in the row. Text widths + 8px pad/border — "8-10, 2x 10-12"
   106px, "2x8-10, 2x12-15" 118px. Field 124px covers every two-group spec
   with slack; three-group ladders ("6-8, 8-10, 2x12-15", 134px) still scroll
   inside the input, which is fine — none exist and they stay fully editable.
   Col = field + the td's 20px padding. */
.pe2-grid col.c-reps { width: 144px; }
.pe2-grid col.c-rest { width: 128px; }
.pe2-grid col.c-rir  { width: 78px; }
.pe2-grid col.c-tempo{ width: 98px; }
.pe2-grid col.c-form { width: 54px; }
.pe2-grid col.c-act  { width: 108px; }
.pe2-colhead th {
  height: 22px; padding: 0 8px; text-align: center;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-subtle); background: transparent; border-bottom: 0; white-space: nowrap;
}
.pe2-colhead th.pe2-th-ex { text-align: left; padding-left: 12px; }
.pe2-th-hint {
  display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px;
  margin-left: 2px; border: 1px solid var(--border); border-radius: 50%; color: var(--text-subtle);
  font-size: 9px; font-weight: 500; background: transparent; cursor: default; vertical-align: middle;
}
/* Row = card. Background + hairline top/bottom on every cell; the outer
   radii + side hairlines land on the first and last cell of the row. */
.pe2-row td {
  /* 56px was sized for a two-line row (name + meta line). With the meta line
     and muscle badge moved into the name popover the row is one line, so the
     explicit height comes down with it — otherwise removing the line saves no
     space at all, which is the whole point of moving it. */
  height: var(--pe2-row-h); padding: 0; vertical-align: middle;
  background: var(--pe-card);
  border-top: 1px solid var(--pe-card-edge);
  border-bottom: 1px solid var(--pe-card-edge);
  transition: background .15s cubic-bezier(.16,1,.3,1), border-color .15s cubic-bezier(.16,1,.3,1);
}
/* The drag column is a GUTTER, not part of the card — the handle lives in
   the margin beside the row, so the card begins at the `#` cell. That is the
   26px indent the rows read with, and .pe2-add-ex is inset to match it. */
.pe2-row td.pe2-drag {
  background: transparent;
  border-top: 0; border-bottom: 0; border-left: 0;
}
.pe2-row td.pe2-drag + td {
  border-left: 1px solid var(--pe-card-edge);
  border-top-left-radius: 6px; border-bottom-left-radius: 6px;
}
.pe2-row td:last-child {
  border-right: 1px solid var(--pe-card-edge);
  border-top-right-radius: 6px; border-bottom-right-radius: 6px;
}
.pe2-row:hover td { background: var(--pe-card-hover); border-color: var(--pe-card-hover-edge); }
/* ...but the gutter never lights up with it, or the card would appear to
   grow 26px to the left on hover — the exact wobble this indent removes. */
.pe2-row:hover td.pe2-drag { background: transparent; }
/* Fade the GLYPH, never the cell. opacity on the <td> took the card's
   background, left border and rounded corner with it, so every row was
   missing its leftmost 26px until hovered — which read as the rows being
   indented relative to the full-width "Add exercise" button below them. */
.pe2-drag { text-align: center; color: var(--pe-faint); }
/* The handle is its own element, not the cell: a superset's later rows render
   the gutter WITHOUT one, so only the run's leader (and its bracket) can start
   a drag — which is what stops a run being torn apart a row at a time. */
.pe2-drag-handle { display: inline-flex; cursor: grab; opacity: 0; transition: opacity .15s cubic-bezier(.16, 1, .3, 1); }
.pe2-drag-handle:active { cursor: grabbing; }
.pe2-row:hover .pe2-drag-handle { opacity: 1; }
.pe2-num-cell { text-align: center; }
/* Letter badge — 22px sapphire-tinted rounded square, light-blue glyph. */
.pe2-ex-label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 5px;
  font-size: 11px; font-weight: 800;
  background: var(--pe-accent-tint); border: 1px solid var(--pe-accent-edge);
  color: var(--pe-accent-lt);
  font-variant-numeric: tabular-nums;
}
.pe2-ex-label.pe2-ss { color: #fff; border-color: transparent; }
.pe2-ex-label.pe-ss-a { background: #2563eb; }
.pe2-ex-label.pe-ss-b { background: #16a34a; }
.pe2-ex-label.pe-ss-c { background: #d97706; }
.pe2-ex-label.pe-ss-d { background: #a855f7; }
.pe2-ex-label.pe-ss-e { background: #db2777; }
.pe2-ex-label.pe-ss-f { background: #0891b2; }
.pe2-ex-cell { padding-left: 12px; padding-right: 8px; }
.pe2-ex-body { min-width: 0; }
.pe2-ex-name-wrap { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pe2-ex-name { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.pe2-ex-name:hover { color: var(--pe-accent-lt); text-decoration: underline; text-decoration-color: var(--text-subtle); }
/* Which brand's machine, beside the name. These rows are one line by design,
   so there is no sub-line to carry it — and it has to be carried somewhere,
   because seven brands make a "Plate-Loaded Chest Press" and the name stopped
   saying which. Quiet: it identifies, it does not compete with the name. */
.pe2-ex-brand {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-subtle);
  padding: 2px 6px; border-radius: 4px;
  background: var(--surface-2); border: 1px solid var(--border-light);
  white-space: nowrap;
}
/* Second meta line — "Compound · Dumbbell · 24+ reps target". Faint, 11px,
   single line. Segments whose datum is unavailable are omitted upstream, so
   this never shows an invented value. */
/* Programmed volume for this instance, inside the exercise-name popover.
   Was the row's meta line before that moved here. */
#program-editor-overlay .pe-info-programmed,
.pe-info-popover .pe-info-programmed {
  font-size: 11px; color: var(--text-subtle); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.pe2-ex-meta {
  font-size: 11px; color: var(--pe-faint); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pe2-ex-meta:empty { display: none; }
/* Muscle chip on the row — light-blue on a sapphire tint (the reference's
   "on tinted backgrounds" companion). Scoped so the CRM-wide .muscle-badge
   used elsewhere is untouched. */
#program-editor-overlay .pe2-ex-name-wrap .muscle-badge.muscle-primary {
  flex-shrink: 0;
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  line-height: 1; padding: 3px 6px; border-radius: 3px;
  color: var(--pe-accent-lt); background: rgba(37, 87, 214, 0.12);
}

/* Visible compact fields — filled, no border at rest, sapphire ring on focus. */
.pe2-cell-td { position: relative; padding: 0 10px; }
/* A real row and the bulk-edit ghost row must have IDENTICAL cell geometry,
   or the ghost's fields drift inside their (correctly aligned) columns.
   `.pe2-row td` (0,2,0) was out-specifying `.pe2-cell-td` (0,1,0) and zeroing
   the real cells' horizontal padding while the ghost kept its 10px — which
   showed up as the rest field being 4px wider on real rows. Restate the
   padding at matching specificity so both sides measure the same. */
.pe2-row td.pe2-cell-td { padding: 0 10px; }
.pe2-td-sets .pe2-cell-input { max-width: 46px; }
/* RIR/RPE takes ranges ("1-2", "8-9") — width for five characters, not two. */
.pe2-td-rir  .pe2-cell-input { max-width: 58px; }
/* Reps is FREE TEXT by design ("10-12/leg", "AMRAP", "5/3/1") — the parse
   layer never restricts it. 100px = the c-reps col minus td padding. */
.pe2-td-reps  .pe2-cell-input { max-width: 124px; }
.pe2-td-tempo .pe2-cell-input { max-width: 78px; letter-spacing: 0.5px; }
.pe2-cell-input {
  display: block; width: 100%; max-width: 64px; height: 34px; margin: 0 auto;
  background: var(--input-bg); border: 1px solid var(--pe-field-edge); border-radius: 6px; outline: none;
  color: var(--text); font-size: 14px; font-weight: 600; text-align: center;
  font-variant-numeric: tabular-nums; font-family: inherit; padding: 0 4px;
  transition: border-color .15s cubic-bezier(.16,1,.3,1), box-shadow .15s cubic-bezier(.16,1,.3,1);
}
.pe2-cell-input::placeholder { color: var(--pe-faint); font-weight: 400; }
.pe2-cell-input:hover { border-color: rgba(37, 87, 214, 0.55); }
.pe2-cell-input:focus { background: var(--input-bg); border-color: transparent; box-shadow: 0 0 0 2px var(--primary); caret-color: var(--primary); }

/* Reps whose segment counts don't add up to `sets` — the client would silently
   lose per-set targets. Amber ring PLUS a glyph, so the state is never carried
   by colour alone. Focus still wins, so it can't fight the coach mid-typing. */
.pe2-td-reps.pe2-reps-mismatch { position: relative; }
.pe2-td-reps.pe2-reps-mismatch .pe2-cell-input {
  border-color: #f59e0b;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.3);
}
.pe2-td-reps.pe2-reps-mismatch .pe2-cell-input:focus {
  border-color: transparent; box-shadow: 0 0 0 2px var(--primary);
}
.pe2-td-reps.pe2-reps-mismatch::after {
  content: '!'; position: absolute; top: 3px; right: 5px;
  font-size: 10px; font-weight: 800; line-height: 1; color: #f59e0b;
  pointer-events: none;
}
/* Tempo is the optional field in the reference — dashed, quieter at rest. */
.pe2-td-tempo .pe2-cell-input {
  background: transparent; border-style: dashed; border-color: var(--border);
  color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
}
.pe2-td-tempo .pe2-cell-input:hover { color: var(--text); border-color: var(--text-subtle); }
.pe2-td-tempo .pe2-cell-input:focus { color: var(--text); border-style: solid; }

/* Rest = two labeled halves in one field: [2 MIN | 30 SEC] (S67 — the old
   min:sec with seconds hidden on whole minutes read as one ambiguous number).
   The column still SCANS: minutes right-aligned on one x, seconds on another,
   and both halves always occupy their space so digits never jump. */
.pe2-rest-wrap {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 34px; margin: 0 auto; width: 108px; background: var(--input-bg);
  border: 1px solid var(--pe-field-edge); border-radius: 6px;
  transition: border-color .15s cubic-bezier(.16,1,.3,1), box-shadow .15s cubic-bezier(.16,1,.3,1);
}
.pe2-rest-wrap:hover { border-color: rgba(37, 87, 214, 0.55); }
.pe2-rest-wrap:focus-within { border-color: transparent; box-shadow: 0 0 0 2px var(--primary); }
.pe2-rest-in { width: 20px; height: 30px; background: transparent; border: none; outline: none; color: var(--text); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: inherit; caret-color: var(--primary); padding: 0; }
.pe2-rest-min { text-align: right; }
.pe2-rest-sec { text-align: right; }
.pe2-rest-lbl {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-subtle); user-select: none;
}
.pe2-rest-lbl:first-of-type { margin-right: 3px; }

/* Optional-column switches in the section header. */
.pe2-colgroup-ctl { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
.pe2-colgroup-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pe-faint); margin-right: 2px;
}
.pe2-colbtn.on { color: var(--primary); border-color: var(--pe-accent-edge); background: var(--pe-accent-tint); }

/* Form check */
.pe2-form-cell { text-align: center; }
.pe2-form-box {
  width: 22px; height: 22px; border: 1px solid var(--text-subtle); border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center; background: transparent;
  cursor: pointer; padding: 0;
  transition: all .15s cubic-bezier(.16,1,.3,1);
}
.pe2-form-box:hover { border-color: var(--primary); }
.pe2-form-box.on { background: var(--primary); border-color: var(--primary); }

/* Per-row actions (revealed on hover) */
.pe2-act-cell { text-align: right; padding-right: 8px; }
.pe2-actions { display: inline-flex; align-items: center; gap: 2px; opacity: 0; }
.pe2-row:hover .pe2-actions { opacity: 1; }
.pe2-act-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  background: transparent; border: none; border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer;
}
.pe2-act-btn.pe2-act-hist { width: 18px; }
.pe2-act-btn:hover { background: var(--surface-hover); color: var(--text); }
.pe2-act-btn.danger:hover { background: var(--danger-dim); color: var(--danger); }
.pe2-act-btn.on { color: var(--primary); }
/* notes button lit when the exercise has coach notes (render-time + live
   toggle from notes-editor.js via the .pe-notes-btn hook class) */
.pe2-act-btn.has-notes { color: var(--primary); }

/* Superset — merged rest cell + thin structural connector */
/* Superset bracket — one object spanning the whole run in the drag gutter,
   mirroring the merged rest cell that spans the same rows on the right. It
   replaces the old per-row connector line, which only ever joined one row to
   the next and so read as separate rows that happened to be linked.
   Spans first-row centre to last-row centre, derived from the tokens on
   .pe2-grid so it cannot drift from the row height again. */
.pe2-drag { position: relative; }
.pe2-ss-bracket {
  position: absolute; left: 6px;
  top: calc(var(--pe2-row-h) / 2);
  height: calc((var(--ss-run) - 1) * (var(--pe2-row-h) + var(--pe2-run-gap)));
  width: 9px;
  border: 1.5px solid currentColor;
  border-right: 0;
  border-radius: 4px 0 0 4px;
  color: #2563eb;
  cursor: grab;
  z-index: 2;
}
.pe2-ss-bracket:active { cursor: grabbing; }
/* Hue reinforces the group; the bracket SHAPE and the A1/A2 labels carry it,
   so telling six hues apart is never load-bearing. */
.pe2-ss-bracket.pe-ss-a { color: #2563eb; }
.pe2-ss-bracket.pe-ss-b { color: #16a34a; }
.pe2-ss-bracket.pe-ss-c { color: #d97706; }
.pe2-ss-bracket.pe-ss-d { color: #a855f7; }
.pe2-ss-bracket.pe-ss-e { color: #db2777; }
.pe2-ss-bracket.pe-ss-f { color: #0891b2; }
/* Widen the grab target past the 9px it draws, without moving the drawing. */
.pe2-ss-bracket::after {
  content: ""; position: absolute; inset: -4px -6px -4px -6px;
}
.pe2-ss-tag { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); cursor: pointer; font-family: inherit; }
.pe2-ss-tag:hover { color: var(--text); }
.pe2-ss-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #2563eb; }
.pe2-ss-dot.pe-ss-a { background: #2563eb; }
.pe2-ss-dot.pe-ss-b { background: #16a34a; }
.pe2-ss-dot.pe-ss-c { background: #d97706; }
.pe2-ss-dot.pe-ss-d { background: #a855f7; }
.pe2-ss-dot.pe-ss-e { background: #db2777; }
.pe2-ss-dot.pe-ss-f { background: #0891b2; }
/* Merged (rowspan) rest cell for a superset run — the one construction
   flexbox can't express, which is why the table stays a table. */
.pe2-rest-merged {
  text-align: center; vertical-align: middle; padding: 0 8px;
  background: rgba(37, 87, 214, 0.07);
  border-top: 1px solid var(--pe-card-edge); border-bottom: 1px solid var(--pe-card-edge);
}
.pe2-merged-note { display: block; font-size: 9px; font-weight: 800; color: var(--pe-faint); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 3px; }

/* Superset link affordance between adjacent unlinked rows. With
   `border-spacing: 0 6px` this row must NOT paint a card of its own. */
/* add-exercise / empty / notes / ghost add row */
.pe2-add-ex {
  /* Indented by the 26px drag gutter (col.c-drag) so its left edge lines up
     with the exercise cards above rather than with the table itself. */
  display: flex; align-items: center; gap: 10px;
  width: calc(100% - 26px); margin-left: 26px; padding: 14px 12px;
  margin-top: 8px;
  background: transparent; border: 1px dashed var(--border); border-radius: 8px;
  color: var(--text-subtle); font-size: 13px; font-family: inherit; cursor: pointer; text-align: left;
  transition: all .15s cubic-bezier(.16,1,.3,1);
}
.pe2-add-ex:hover { color: var(--text); border-color: rgba(37, 87, 214, 0.5); background: rgba(37, 87, 214, 0.05); }
.pe2-add-ex kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted);
}
/* Neither the empty row nor a notes row should read as an exercise card. */
.pe2-empty-row td { background: transparent; border: 0; }
.pe2-empty-cell { padding: 18px 12px; text-align: center; color: var(--text-subtle); font-size: var(--fs-xs); font-style: italic; }
.pe2-notes-row td { padding: 0 10px 10px 48px; background: transparent; border: 0; }
/* Section actions as pills at the canvas bottom (+ Warm up · + Cool down · + Section). */
.pe2-add-row { display: flex; gap: 8px; margin-top: 22px; }
.pe2-ghost-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
  background: var(--bg); border: 1px solid var(--pe-field-edge); border-radius: 6px;
  color: var(--text-muted);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: inherit; cursor: pointer;
  transition: all .15s cubic-bezier(.16,1,.3,1);
}
.pe2-ghost-btn:hover { border-color: var(--text-subtle); color: var(--text); }

/* Library drop targets on the table + sortable ghost.
   Append and Alt-swap are both sapphire — they never show at once (the
   dragover handler clears one before setting the other), and they stay
   told apart by SHAPE, not hue: append outlines the whole section with a
   2px dash, swap draws a solid 1px ring around the single target row.
   Keep both non-colour cues if you touch this. */
tbody.pe-lib-drop-target { outline: 2px dashed var(--primary); outline-offset: -2px; background: var(--primary-dim); }
tr.pe2-row.pe-lib-swap-target td { background: var(--primary-dim); box-shadow: inset 0 0 0 1px var(--primary); }
/* The insertion line — the exercise lands exactly here on release. The dashed
   outline above says WHICH section; this says WHERE in it. Drawn with an inset
   shadow rather than a border so it costs the row no height and nothing below
   it shifts as the line moves between rows during a drag. */
tr.pe2-row.pe-lib-drop-before td { box-shadow: inset 0 2px 0 var(--primary); }
tr.pe2-row.pe-lib-drop-after td { box-shadow: inset 0 -2px 0 var(--primary); }
tr.pe2-row.pe-row-sort-ghost td { opacity: 0.35; }
tr.pe2-row.pe-row-sort-chosen td { background: var(--primary-dim); }

/* Row multi-select (Stage 2) — sapphire tint; wins over the hover overlay by
   coming later at equal specificity. The # cell / drag zone are the toggles. */
.pe2-row.pe2-row-selected td { background: rgba(37, 87, 214, 0.16); border-color: var(--pe-accent-edge); }
/* Follows the glyph, not the cell — see .pe2-drag. Targeting the cell here
   became a no-op once the cell stopped fading, which would have quietly
   dropped the drag handle from selected rows. */
.pe2-row.pe2-row-selected .pe2-drag-handle { opacity: 1; }
.pe2-num-cell, .pe2-drag { cursor: pointer; user-select: none; }

/* Bulk-edit GHOST ROW — a real <tr> in the SAME <colgroup>, which is exactly
   why the table has to stay a table: every ghost field lands pixel-exact
   under its column with zero offset. Card styling matches a real row. */
.pe2-bulk-row td {
  height: auto; padding-top: 8px; padding-bottom: 8px;
  background: rgba(37, 87, 214, 0.12);
  border-top: 1px solid var(--pe-accent-edge); border-bottom: 1px solid var(--pe-accent-edge);
}
.pe2-bulk-row td:first-child { border-left: 1px solid var(--pe-accent-edge); border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.pe2-bulk-row td:last-child { border-right: 1px solid var(--pe-accent-edge); border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
/* Count + hint sit right-aligned against the SETS column, with Superset to
   their left. Superset lives here rather than with Apply/Clear because the
   action column is only 108px — three buttons overflowed it into RIR — and
   because making a superset is a structural act, not a field edit. */
.pe2-bulk-label-cell { padding-right: 14px !important; }
.pe2-bulk-label-inner {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
}
.pe2-bulk-label-text { text-align: right; }
.pe2-bulk-count { font-size: var(--fs-sm); font-weight: 600; color: var(--text); white-space: nowrap; }
.pe2-bulk-hint { display: block; font-size: 10px; color: var(--text-subtle); margin-top: 1px; white-space: nowrap; }
.pe2-bulk-row .pe2-bulk-cell { background: var(--bg); }
/* The ghost's rest field has no "m" unit span (that's a whole-minute display
   affordance), so without an explicit width it comes out 4px narrower than a
   real row's. Pin it so the two line up exactly, not just their columns. */
/* No width override — the ghost's rest field is the SAME 78px box as a real
   row's, or its minutes and seconds drift apart from the ones above and the
   column stops scanning. Matching the rows is the entire point of the ghost. */
.pe2-bulk-restwrap { background: var(--bg); }
.pe2-bulk-actions-cell { padding-right: 8px; }
/* One row, one height. Clear used to be bare text with a 4px margin sitting
   against a filled button, which read as a stray word rather than a control. */
.pe2-bulk-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
}
.pe2-bulk-apply, .pe2-bulk-clear, .pe2-bulk-ss, .pe2-bulk-del {
  height: 28px; padding: 0 12px; border-radius: var(--radius-sm);
  font-size: var(--fs-xs); font-weight: 600; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.pe2-bulk-apply { background: var(--primary); color: #fff; border: 1px solid var(--primary); }
.pe2-bulk-apply:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
/* Icon, not the word: the action column is 108px and two labelled buttons
   needed 123px, which overflowed LEFT (flex-end) across the RIR field. The
   count is already stated on the left, so the label was the expendable part. */
.pe2-bulk-clear {
  width: 28px; padding: 0; justify-content: center;
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  font-size: 16px; line-height: 1;
}
.pe2-bulk-clear:hover { border-color: var(--danger); color: var(--danger); }
/* Making a superset is a structural act, so it sits apart from the field
   apply — same weight as Clear, not competing with the primary button. */
.pe2-bulk-ss { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.pe2-bulk-ss:hover { border-color: var(--primary); color: var(--text); }
.pe2-bulk-ss svg { flex: 0 0 auto; }
/* Destructive, so it reads as such — but it sits with Superset rather than
   beside Apply, because both are structural acts on the rows themselves
   rather than edits to the fields. */
.pe2-bulk-del {
  background: transparent; border: 1px solid rgba(239, 68, 68, 0.35); color: var(--danger);
}
.pe2-bulk-del:hover { background: rgba(239, 68, 68, 0.12); border-color: var(--danger); }
.pe2-bulk-del svg { flex: 0 0 auto; }

/* Keyboard hint footer */
.pe2-kbd-footer {
  flex-shrink: 0; display: flex; align-items: center; gap: 18px;
  height: 38px; padding: 0 20px; border-top: 1px solid var(--border-light);
  background: var(--pe-footer-bg); font-size: 11px; color: var(--text-subtle);
}
.pe2-kbd { display: inline-flex; align-items: center; gap: 6px; }
.pe2-kbd kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 19px; padding: 0 5px;
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: 10px; font-weight: 500;
  background: var(--pe-chrome); border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted);
}
.pe2-kbd-spacer { margin-left: auto; }

/* Canvas gutters — the reference's 28px side padding, generous bottom so the
   section pills clear the keyboard footer. */
/* Masthead is frozen above the scroller; it carries the horizontal padding
   the day content used to give it so the day name still lines up with the
   rows below. The scroller keeps only its bottom room. */
.pe-main > .pe-day-masthead { flex: 0 0 auto; padding: 4px 28px 0; }
.pe-main > .pe-day-content { padding: 0 28px 60px; }

/* Top-bar "More" menu — consolidates Details, Progression, Template and
   Shared toggles behind a single dropdown to quiet the top bar. */
.pe-more-wrap { position: relative; }
.pe-more-btn { display: inline-flex; align-items: center; }
.pe-more-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
  min-width: 340px; max-width: 420px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  display: flex; flex-direction: column; gap: 2px;
}
.pe-more-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px; border: none; border-radius: 4px;
  background: transparent; color: var(--text); text-align: left;
  cursor: pointer; font-family: inherit; font-size: var(--fs-sm);
  width: 100%;
}
.pe-more-item:hover { background: var(--surface-2, rgba(255,255,255,0.04)); }
.pe-more-sub { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; }
.pe-more-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.pe-more-toggle {
  flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap;
}
.pe-more-toggle input[type="checkbox"] {
  margin: 0; flex-shrink: 0; width: 16px; height: 16px; cursor: pointer;
}
.pe-more-toggle > span:first-of-type { flex: 0 0 auto; font-weight: 500; }
.pe-more-toggle > .pe-more-sub { flex-basis: 100%; padding-left: 26px; }
/* Segmented control inside an Options-menu item — used for the Intensity
   metric tri-state (Auto / RIR / RPE). Stacked layout: title → sub →
   segmented row, matching the visual rhythm of the column-based items
   above it (Details, Progression, etc.) instead of clashing with a
   right-aligned dropdown trigger. */
.pe-more-segmented {
  cursor: default;
}
.pe-more-segmented:hover { background: transparent; }
.pe-more-segmented-title { font-weight: 500; }
.pe-more-seg {
  display: flex;
  margin-top: 8px;
  background: var(--surface-2, rgba(255,255,255,0.06));
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
  width: 100%;
}
.pe-more-seg-btn {
  flex: 1;
  padding: 5px 6px;
  background: transparent; border: 0;
  border-radius: 4px;
  font-family: inherit; font-size: var(--fs-xs); font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.pe-more-seg-btn:hover { color: var(--text); }
.pe-more-seg-btn.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.program-editor-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
/* 3-column shell: left rail (structural nav) · main canvas · right rail
   (volume + library, unchanged). Right rail has its own width via its own
   styles, so we leave it `auto` here and let it size itself. */
.pe-layout { display: flex; flex: 1; overflow: hidden; }
.pe-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }


/* Per-day kebab popover — absolute-positioned next to the day item. */
.pe-day-kebab-menu {
  position: fixed;
  /* Above .pe2-schedule-pop (10001). This menu is opened FROM inside that
     popover — the Repeats / Week / N-day-split picker — and at 10000 it
     rendered behind the panel that spawned it, so the options could not be
     seen or clicked. A menu must always outrank whatever opened it. */
  z-index: 10002;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  min-width: 200px;
  padding: 4px;
  display: flex; flex-direction: column;
}
.pe-day-kebab-menu button {
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
}
.pe-day-kebab-menu button:hover { background: var(--surface-2); }
.pe-day-kebab-menu button.danger { color: var(--danger); }
.pe-day-kebab-menu button.danger:hover { background: rgba(239, 68, 68, 0.08); }
.pe-day-kebab-menu .pe-day-kebab-sep {
  height: 1px; background: var(--border); margin: 4px 0;
}


/* Day tabs */
.pe-day-tabs {
  display: flex; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--border);
  overflow-x: auto; flex-shrink: 0;
}
.pe-day-tab {
  padding: 8px 18px; border-radius: 6px; background: var(--surface-2);
  border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.3px; cursor: pointer;
  color: var(--text-muted); transition: all .15s; white-space: nowrap;
}
.pe-day-tab:hover { border-color: var(--primary); color: var(--text); }
.pe-day-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pe-day-tab.rest { border-style: dashed; }

/* Per-day muscle chips — live-updated as exercises/sets change. Color
   reflects WEEKLY volume status so the coach spots under-trained muscles
   at a glance without opening the volume panel. */
.pe-day-tab-chips {
  display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px;
  justify-content: center;
}
.pe-day-tab-chip {
  font-size: 0.55rem; font-weight: 500; letter-spacing: 0.3px;
  padding: 1px 5px; border-radius: 3px; text-transform: uppercase;
  border: 1px solid transparent;
}
.pe-day-tab-chip.vol-under   { background: var(--danger-dim);  color: var(--danger); }
.pe-day-tab-chip.vol-mv      { background: var(--warning-dim); color: var(--warning); }
.pe-day-tab-chip.vol-optimal { background: var(--success-dim); color: var(--success); }
.pe-day-tab-chip.vol-high    { background: var(--info-dim);    color: var(--info); }
.pe-day-tab-chip.vol-over    { background: var(--danger-dim);  color: var(--danger); }
.pe-day-tab.active .pe-day-tab-chip { background: rgba(255,255,255,0.2); color: #fff; }

.pe-day-tab--add { background: none; border-style: dashed; font-size: var(--fs-xl); line-height: 1; padding: 6px 14px; }
.pe-day-tab--add:hover { border-color: var(--primary); color: var(--primary); }
.pe-day-rest-badge {
  font-size: var(--fs-xs); background: var(--warning-dim); color: var(--warning);
  padding: 1px 5px; border-radius: 3px; margin-left: 4px; vertical-align: middle;
}


/* Day content */
.pe-day-content { flex: 1; overflow-y: auto; padding: 16px 20px; }

/* Collapsed sections (empty warm up / cool down) */
.pe-section-collapsed { margin-bottom: 8px; }
.pe-section-collapsed .pe-section-header {
  cursor: pointer; padding: 6px 0; border-bottom: none; opacity: 0.5;
  transition: opacity .15s;
}
.pe-section-collapsed .pe-section-header:hover { opacity: 1; }
.pe-section-collapsed .pe-section-actions { opacity: 0; }
.pe-section-collapsed .pe-section-header:hover .pe-section-actions { opacity: 1; }
.pe-section-chevron { flex-shrink: 0; color: var(--text-muted); }

/* Drag handle — still used by Week view rows. */
.pe-drag-handle { cursor: grab; padding: 2px 4px; flex-shrink: 0; }
.pe-drag-handle:active { cursor: grabbing; }

/* Superset badge */
.pe-ss-badge {
  font-size: var(--fs-xs); font-weight: 500; padding: 1px 6px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.pe-ss-a { color: var(--primary); background: var(--primary-dim); }
.pe-ss-b { color: var(--success); background: var(--success-dim); }
.pe-ss-c { color: var(--warning); background: var(--warning-dim); }
.pe-ss-d { color: #a855f7; background: rgba(168,85,247,0.12); }
.pe-ss-e { color: #ec4899; background: rgba(236,72,153,0.12); }
.pe-ss-f { color: #06b6d4; background: rgba(6,182,212,0.12); }

/* .pe-field-label — still used by the volume rail's "NOT TRAINED" line. */
.pe-field-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-muted);
}

/* Tempo help popover — click the ? to open. Small, positioned below the
   label. Dismissed on outside click. */
.pe-tempo-help {
  position: fixed; z-index: 9999;
  width: 320px; max-width: calc(100vw - 20px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  font-size: var(--fs-xs); line-height: 1.55; color: var(--text);
}
.pe-tempo-help.hidden { display: none; }
.pe-tempo-help-title {
  font-size: var(--fs-sm); font-weight: 600; margin-bottom: 6px;
}
.pe-tempo-help-row {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
  color: var(--text-muted);
}
.pe-tempo-help-row strong {
  flex: 0 0 28px; color: var(--text); font-variant-numeric: tabular-nums;
}
.pe-tempo-help-example {
  margin-top: 10px; padding: 8px 10px;
  background: var(--input-bg); border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--text);
}
.pe-tempo-help-note {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.7rem; font-style: italic;
}

/* Exercise letter label — A, B, C1, C2, D, ... Shown on every exercise row
   in Focus and Week views so coaches can see "I'm on exercise D of 6" at
   a glance.
   Focus view: subtle bordered badge (more surrounding chrome, so the label
   needs a little structure to stay legible).
   Week view: stripped down to just a letter in tabular-num text (rows are
   denser, a bordered badge overwhelms the row). Superset variants keep
   the filled color badge either way — they're a grouping signal. */
.pe-ex-label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 6px;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
/* Week-view letter: plain tabular text, no badge. Column is 34px wide
   (set on the grid) so the letter lines up left-aligned with padding. */
.pe-week-ex-row .pe-ex-label {
  background: transparent; border: none; padding: 0 4px;
  color: var(--text-muted); font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px; justify-content: flex-start;
  min-width: 0; height: auto;
}
.pe-ex-label--superset {
  color: #fff; border-color: transparent;
}
/* Superset variant stays a filled badge in Week view too — the color is
   the whole point (visually pairing A1/A2 etc). */
.pe-week-ex-row .pe-ex-label--superset {
  background: var(--input-bg);
  padding: 2px 6px; height: 20px; min-width: 26px;
  justify-content: center;
}
/* Superset tint reuses the superset-group classes that already exist on
   the row. We inherit the bg via a single rule instead of per-letter. */
.pe-ex-label.pe-ss-a { background: #2563eb; }
.pe-ex-label.pe-ss-b { background: #7c3aed; }
.pe-ex-label.pe-ss-c { background: #db2777; }
.pe-ex-label.pe-ss-d { background: #ea580c; }
.pe-ex-label.pe-ss-e { background: #059669; }
.pe-ex-label.pe-ss-f { background: #0891b2; }

/* Week-view card composition (compound·isolation inline) — still rendered
   by _renderCompositionInline. */
.pe-week-card-composition {
  font-size: var(--fs-xs); color: var(--text-muted);
  margin-left: 6px; font-variant-numeric: tabular-nums;
}

/* Shared hover tooltip — fires for any element with data-tip in the
   program editor. Styled to match the CRM (dark surface, subtle border)
   instead of the browser's native OS tooltip. 120ms show delay. */
.rf-tip {
  position: fixed; z-index: 99999;
  max-width: 280px;
  padding: 7px 10px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  font-size: var(--fs-xs); line-height: 1.45; font-weight: 500;
  letter-spacing: 0.01em;
  pointer-events: none;
  white-space: normal; text-wrap: balance;
  opacity: 1; transform: translateY(0);
  transition: opacity .13s cubic-bezier(.16, 1, .3, 1),
              transform .13s cubic-bezier(.16, 1, .3, 1);
}
/* Hidden via opacity rather than display:none so the tip can fade+rise into
   place instead of popping. It stays out of the layout's way regardless —
   position:fixed + pointer-events:none. Safe for the positioning code, which
   reads only tipRect.width/height, and a translateY doesn't change either. */
.rf-tip.hidden {
  opacity: 0; transform: translateY(4px); visibility: hidden;
  transition: opacity .1s ease, transform .1s ease, visibility 0s .1s;
}
@media (prefers-reduced-motion: reduce) {
  .rf-tip, .rf-tip.hidden { transform: none; transition: opacity .01s; }
}

/* Rich tooltip — title + tagline + bullet list. Used on the view-switcher
   tabs and other destinations that justify a longer explanation. Styled
   with the same dark surface as the plain tooltip but with proper type
   hierarchy so the eye lands on the title first. */
.rf-tip--rich {
  padding: 12px 14px;
  max-width: 320px;
}
.rf-tip-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.rf-tip-body {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.rf-tip-list {
  margin: 0;
  padding: 8px 0 0;
  list-style: none;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column;
  gap: 5px;
}
.rf-tip-list li {
  position: relative;
  padding-left: 14px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text);
}
.rf-tip-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 7px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-subtle);
}
/* AI reasoning banner — shown after AI generation with tally + narrative.
   ⚠️ THE HEIGHT CAP IS LOAD-BEARING. This sits inside .program-editor-body,
   which is `overflow:hidden` — so without `flex:0 0 auto` + a capped,
   internally-scrolling body, a long review grows until it pushes the whole
   program editor off-screen and cannot be scrolled (2026-08-13). */
.pe-ai-reasoning-banner {
  background: rgba(168, 85, 247, 0.06);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 6px;
  padding: 12px 14px; margin: 10px 16px 0;
  font-size: var(--fs-sm); color: var(--text);
  line-height: 1.55;
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  max-height: 38vh;
}
/* min-height:0 lets this shrink inside the column flex parent — without it
   the cap above is silently ignored and the banner grows again. */
.pe-ai-reasoning-scroll { overflow-y: auto; min-height: 0; }
.pe-ai-reasoning-toggle {
  background: none; border: none; cursor: pointer;
  padding: 8px 0 0; font: inherit; font-size: var(--fs-xs); font-weight: 600;
  color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px;
}
.pe-ai-reasoning-toggle:hover { color: var(--text); }
.pe-ai-reasoning-narrative {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}
.pe-ai-reasoning-banner--warn {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.35);
}
.pe-ai-reasoning-head {
  flex: 0 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: #7c3aed; margin-bottom: 6px;
}
.pe-ai-reasoning-banner--warn .pe-ai-reasoning-head { color: #d97706; }
.pe-ai-reasoning-close {
  background: none; border: none; cursor: pointer; font-size: 1.1rem;
  color: var(--text-muted); line-height: 1; padding: 0 4px;
}
.pe-ai-reasoning-close:hover { color: var(--text); }
.pe-ai-reasoning-body hr {
  border: none; border-top: 1px solid var(--border); margin: 8px 0;
}

/* Clickable exercise-name trigger — opens the library info popover. */
.pe-ex-name-trigger {
  cursor: pointer; text-decoration-color: transparent;
  text-underline-offset: 3px; transition: text-decoration-color 0.12s;
}
.pe-ex-name-trigger:hover { text-decoration: underline; text-decoration-color: var(--text-muted); }

/* Exercise info popover — library-sourced details, opened by clicking
   the exercise name. Shows thumbnail, muscles, category/pattern/brand
   chips, video link, description, tags. pointer-events: auto so users
   can click the video link + close button. */
.pe-exercise-info-popover {
  position: fixed; z-index: 9999;
  width: 360px; max-width: calc(100vw - 20px);
  /* No internal scroll — JS positioning shifts the popover up if it would
     overflow the viewport bottom, so the whole card is always visible. */
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  font-size: var(--fs-sm);
}
.pe-exercise-info-popover.hidden { display: none; }
.pe-info-thumb {
  width: 100%; height: 160px; object-fit: cover;
  background: var(--input-bg);
  border-top-left-radius: 8px; border-top-right-radius: 8px;
  display: block;
}
/* Play overlay on the thumbnail when a video is attached to the exercise.
   Clicking swaps the thumb for an inline YouTube / Vimeo iframe (or opens
   a new tab for unsupported hosts). */
.pe-info-media {
  position: relative; background: #000;
  border-top-left-radius: 8px; border-top-right-radius: 8px;
  overflow: hidden;
}
.pe-info-media--no-thumb {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(124, 58, 237, 0.15));
  height: 140px; display: flex; align-items: center; justify-content: center;
}
.pe-info-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.7); border: 2px solid #fff; color: #fff;
  cursor: pointer; transition: transform 0.15s, background 0.15s;
}
.pe-info-play:hover { background: rgba(0, 0, 0, 0.85); transform: translate(-50%, -50%) scale(1.08); }
.pe-info-play--centered {
  position: static; transform: none; width: auto; height: auto;
  padding: 10px 18px; border-radius: 24px; gap: 8px;
  font-size: var(--fs-sm); font-weight: 500;
}
.pe-info-play--centered:hover { transform: scale(1.04); }
.pe-info-video-frame {
  width: 100%; aspect-ratio: 16 / 9;
  border: none; display: block;
  background: #000;
}
/* Shorts (9:16): a centered portrait frame with a capped height — the 16:9
   box rendered them cut off (S67). */
.pe-info-media--playing-portrait { display: flex; justify-content: center; }
.pe-info-video-frame--portrait {
  aspect-ratio: 9 / 16; width: auto; height: 400px; max-width: 100%;
}

/* (Previously had a custom YouTube player with scaled iframe + corner
   masks + pause scrim. Removed — plain iframe embed looks better for
   the exercise-preview use case.) */
.pe-info-body { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.pe-info-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.pe-info-name { font-size: var(--fs-base); font-weight: 600; color: var(--text); line-height: 1.3; flex: 1; }
.pe-info-close {
  width: 24px; height: 24px; border: none; background: transparent;
  color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer;
  border-radius: 4px; flex-shrink: 0;
}
.pe-info-close:hover { background: var(--input-bg); color: var(--text); }
.pe-info-muscles { display: flex; flex-wrap: wrap; gap: 4px; }
.pe-info-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pe-info-chip {
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 8px; border-radius: 10px;
  background: var(--input-bg); color: var(--text-muted);
  border: 1px solid var(--border);
}
.pe-info-chip-brand { color: var(--primary); border-color: rgba(59, 130, 246, 0.4); }
.pe-info-video-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--primary); text-decoration: none;
  font-weight: 500;
  padding: 6px 10px; background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25); border-radius: 4px;
  width: fit-content;
}
.pe-info-video-link:hover { background: rgba(59, 130, 246, 0.14); }
.pe-info-desc {
  font-size: var(--fs-xs); color: var(--text); line-height: 1.55;
  padding-top: 8px; border-top: 1px solid var(--border);
  white-space: pre-wrap;
}
.pe-info-desc-empty { color: var(--text-muted); font-style: italic; }
.pe-info-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.pe-info-tag {
  font-size: 10px; color: var(--text-muted);
  padding: 1px 6px; background: var(--input-bg); border-radius: 8px;
}
.pe-info-fallback {
  font-size: 10px; color: var(--text-muted); font-style: italic;
  padding: 6px 8px; background: var(--input-bg); border-radius: 4px;
}
/* "Edit in library" jump button at the bottom of the info popover. Only
   rendered when the current user is allowed to edit (admin, or coach
   viewing one of their own exercises / overrides). Sits in its own row
   above the (now hidden) close button so it's visually distinct. */
.pe-info-edit-lib {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px;
  padding: 6px 10px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border); border-radius: 4px;
  color: var(--text);
  font-size: 11.5px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: all 0.12s;
  align-self: flex-start;
}
.pe-info-edit-lib:hover {
  border-color: var(--primary); color: var(--primary);
  background: var(--primary-dim, rgba(37, 87, 214,0.1));
}
.pe-info-edit-lib svg { opacity: 0.85; }

/* "Set as default" button — active variant shows the section is saved as
   the program-wide default warmup / cool-down for new training days. */
.pe-save-default--active {
  background: rgba(168, 85, 247, 0.12); color: #a855f7;
  border-color: rgba(168, 85, 247, 0.4);
}
.pe-save-default--active:hover {
  background: rgba(168, 85, 247, 0.2);
}

/* Copy-to-another-day picker modal */
.cdta-target-list {
  display: flex; flex-direction: column; gap: 6px;
}
.cdta-target-btn {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; text-align: left; background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
  color: var(--text); font-family: inherit; transition: border-color 0.12s;
}
.cdta-target-btn:hover { border-color: var(--primary); }
.cdta-target-name { font-size: var(--fs-sm); font-weight: 500; }
.cdta-target-meta { font-size: var(--fs-xs); color: var(--text-muted); }

/* Bulk actions modal */
.ba-action-picker {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;
}
.ba-action {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.ba-action:hover { border-color: var(--text-muted); }
.ba-action input { margin-top: 3px; }
.ba-action:has(input:checked) { border-color: var(--primary); background: rgba(59, 130, 246, 0.04); }
.ba-action-title { font-size: var(--fs-sm); font-weight: 500; }
.ba-action-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
.ba-panel { margin-top: 10px; }

/* Cohort view modal — per-client adherence + completion table for a
   shared program. Gives the coach a roster overview in one shot. */
.cv-aggregate {
  display: flex; gap: 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.cv-stat { flex: 1; text-align: center; }
.cv-stat-val { font-size: var(--fs-xl); font-weight: 600; color: var(--text); }
.cv-stat-label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.cv-section-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); margin-bottom: 6px;
}
.cv-most-skipped { margin-bottom: 16px; }
.cv-skip-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cv-skip-chip {
  font-size: var(--fs-xs); font-weight: 500;
  padding: 3px 8px; border-radius: 3px;
  background: rgba(245, 158, 11, 0.12); color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.cv-skip-count { opacity: 0.7; margin-left: 2px; font-size: 0.7rem; }
.cv-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
}
.cv-table th {
  text-align: left; padding: 8px 10px; font-size: var(--fs-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.cv-table td {
  padding: 10px; border-bottom: 1px solid var(--border-light, var(--border));
}
.cv-pct-counts {
  display: inline-block; margin-left: 6px; font-size: var(--fs-xs);
  color: var(--text-muted); font-weight: 400;
}
.cv-pct-good { color: #10b981; font-weight: 500; }
.cv-pct-warn { color: #f59e0b; font-weight: 500; }
.cv-pct-bad  { color: #3b82f6; font-weight: 500; } /* blue-bad, colorblind safe */
.cv-pct-none { color: var(--text-muted); }
.cv-bad { color: #3b82f6; font-weight: 500; }

/* Progression preview strip — inline under day tabs, compact week cells */
.pe-progression-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; background: var(--surface);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.pe-progstrip-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-muted); flex-shrink: 0;
}
.pe-progstrip-cells { display: flex; gap: 4px; overflow-x: auto; flex: 1; }
.pe-progstrip-cell {
  min-width: 84px; padding: 5px 8px; border-radius: 4px; cursor: pointer;
  background: var(--input-bg); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px; color: var(--text);
  font-family: inherit; transition: border-color 0.12s;
}
.pe-progstrip-cell:hover { border-color: var(--primary); }
.pe-progstrip-week {
  font-size: 0.6rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-muted);
}
.pe-progstrip-phase {
  font-size: 0.55rem; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px;
}
.pe-progstrip-sets { font-size: var(--fs-sm); font-weight: 600; display: flex; align-items: baseline; gap: 4px; }
.pe-progstrip-delta { font-size: 0.65rem; color: var(--text-muted); font-weight: 400; }
.pe-progstrip-cell--phase-0 { border-left: 3px solid #3b82f6; }
.pe-progstrip-cell--phase-1 { border-left: 3px solid #10b981; }
.pe-progstrip-cell--phase-2 { border-left: 3px solid #f59e0b; }
.pe-progstrip-cell--phase-3 { border-left: 3px solid #a855f7; }
.pe-progstrip-cell--phase-4 { border-left: 3px solid #ec4899; }
.pe-progstrip-cell--phase-5 { border-left: 3px solid #06b6d4; }

/* Panel mode tabs (Volume / Library toggle at top of right panel) */
.pe-panel-mode-tabs {
  display: flex; gap: 2px; padding: 2px; margin-bottom: 8px;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px;
}
.pe-panel-mode {
  flex: 1; padding: 5px 8px; font-size: var(--fs-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.5px;
  background: transparent; border: none; border-radius: 4px;
  color: var(--text-muted); cursor: pointer; transition: all 0.12s;
  font-family: inherit;
}
.pe-panel-mode:hover { color: var(--text); }
.pe-panel-mode.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

/* Library side panel (Layer 4.12) */
.pe-lib-panel { display: flex; flex-direction: column; gap: 0; }
.pe-lib-controls { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
/* Search field is a BOX with a magnifier glyph; the <input> inside is bare. */
.pe-lib-searchbox {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 10px;
  background: var(--bg); border: 1px solid var(--border-light); border-radius: 6px;
}
.pe-lib-searchbox:focus-within { border-color: var(--primary); }
.pe-lib-searchbox svg { flex: 0 0 auto; color: var(--text-subtle); }
.pe-lib-search {
  flex: 1; min-width: 0; padding: 0; font-size: 12px; font-family: inherit;
  background: transparent; border: 0; outline: none; color: var(--text);
}
.pe-lib-search::-webkit-search-cancel-button { filter: invert(1); opacity: 0.4; }
/* Quiet shorthand hint under the search field ("Shorthand: db dumbbell ·
   bb barbell · kb kettlebell"). Plain text, no kbd chrome. */
.pe-lib-hint { font-size: 10px; color: var(--pe-faint); margin: 0 2px 12px; letter-spacing: 0.04em; }
.pe-lib-list {
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0;
  overflow-y: auto; padding: 0 0 20px;
  background: transparent; border: 0; border-radius: 0;
}
.pe-lib-panel { flex: 1; min-height: 0; }
.pe-lib-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--pe-item); border: 1px solid var(--border-light);
  border-radius: 7px; cursor: grab;
  transition: all .15s cubic-bezier(.16,1,.3,1);
}
.pe-lib-item:hover { background: var(--pe-item-hover); border-color: rgba(37, 87, 214, 0.45); }
.pe-lib-item:active { cursor: grabbing; }
/* Row-click selection, no checkboxes — the whole row is the target.
   Selected = sapphire border + tint. */
.pe-lib-item--selected {
  border-color: var(--primary); background: rgba(37, 87, 214, 0.12);
}
.pe-lib-item-body { flex: 1; min-width: 0; }

/* Per-item quick-add — mirrors the drag gesture for coaches who'd rather
   click. Adds to the active day (and the whole selection when this row is
   part of one), same call the bulk add-bar makes. */
.pe-lib-item-add {
  flex: 0 0 auto;
  width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  background: var(--pe-accent-tint); border: 1px solid rgba(37, 87, 214, 0.28); border-radius: 5px;
  color: var(--pe-accent-lt); cursor: pointer;
  transition: all .15s cubic-bezier(.16,1,.3,1);
}
.pe-lib-item-add:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Per-row star button — toggles favorite state. Filled when active,
   outlined otherwise. Always visible so coaches can discover the feature
   without hovering each row. */
.pe-lib-item-fav {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  padding: 0; border: 0; background: transparent;
  display: grid; place-items: center;
  color: var(--pe-faint); font-size: 15px; line-height: 1;
  cursor: pointer; transition: color .15s, transform .15s;
  border-radius: 4px;
}
.pe-lib-item-fav:hover { color: #f5b400; transform: scale(1.12); }
.pe-lib-item-fav.active { color: #f5b400; }
.pe-lib-item--fav { /* row-level hint left subtle so star + Add still read */ }
/* Results count in the library header. */
.pe-lib-count {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap;
  font-family: 'Inter', sans-serif; font-style: normal;
  flex-shrink: 0;
}
/* Selection takes over the count's slot (see updateSelectedPill). */
.pe-library-header.pe-lib-has-sel .pe-lib-count { display: none; }

/* Favorites filter button in the Library controls row. Sits next to the
   muscle dropdown. Star-only (icon button) so the row always fits the
   280px-wide rail without wrapping or overflow. Tooltip describes the
   behavior; aria-label keeps it screen-readable. Clicked → active state
   with filled star + accent ring. */
.pe-lib-fav-filter {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  padding: 0; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border-light);
  color: var(--text-muted);
  font-family: inherit;
  cursor: pointer; transition: all .15s cubic-bezier(.16,1,.3,1);
}
.pe-lib-fav-filter:hover { color: var(--text); border-color: var(--text-subtle); }
.pe-lib-fav-filter.active {
  color: #f5b400; border-color: #f5b400;
  background: rgba(245, 180, 0, 0.08);
}
.pe-lib-fav-filter-star { font-size: 14px; line-height: 1; }

/* The muscle filter drops the shared trigger's uppercase + tracking. Two
   reasons: uppercase is reserved for section labels and column heads, not
   controls — and "ALL MUSCLES" tracked out ran 86px wide, which starved the
   search field next to it until its placeholder clipped mid-word. Sentence
   case gives ~24px back to search, where it belongs. */
.pe-lib-muscle-select .pe2-select-trigger {
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12px;
}
.pe-lib-muscle-select .pe2-select-trigger-label { min-width: 0; }

/* Selected-count pill in the Library header — next to the collapse button */
.pe-lib-selected-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 8px;
  /* Sapphire tokens — this was a stray Tailwind blue-500 that read as a
     second, slightly-off accent next to everything else in the rail. */
  background: var(--primary-dim); border: 1px solid rgba(37, 87, 214, 0.35);
  border-radius: 10px;
  font-size: 10px; font-weight: 500; color: var(--primary);
  text-transform: none; letter-spacing: 0;
  white-space: nowrap; flex-shrink: 0;
}
.pe-lib-clear-sel {
  width: 16px; height: 16px; border-radius: 50%;
  background: transparent; border: none; color: var(--primary);
  font-size: 14px; line-height: 1; padding: 0; cursor: pointer;
}
.pe-lib-clear-sel:hover { background: rgba(37, 87, 214, 0.2); }
.pe-lib-item-name { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Square thumb, and the row's ONLY info trigger. The name stays part of the
   row's own click because selecting for a bulk add is the common act and the
   name is the target a hand goes to. Often the picture alone settles whether
   this is the right exercise, which saves opening anything at all. */
.pe-lib-thumb {
  position: relative; flex: 0 0 auto;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border-light); border-radius: 6px;
  background: var(--bg); overflow: hidden; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .15s cubic-bezier(.16, 1, .3, 1);
}
.pe-lib-thumb:hover { border-color: var(--primary); }
.pe-lib-thumb:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-dim); }
.pe-lib-thumb img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; }
/* Plenty of exercises carry no image; a letter tile keeps the row's left edge
   and the name's start on one line down the list instead of ragged. */
.pe-lib-thumb-ph {
  font-size: 13px; font-weight: 700; color: var(--text-subtle);
  font-family: var(--pe-display, inherit); line-height: 1;
}
/* Play badge, bottom-right of the thumb: says a demo exists before you open
   anything. Decorative — aria-hidden — the button's tooltip carries the fact. */
.pe-lib-item-vid {
  position: absolute; right: 2px; bottom: 2px; z-index: 1;   /* above the ::after disc */
  color: #fff; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}
.pe-lib-thumb.has-vid::after {
  content: ""; position: absolute; inset: auto -2px -2px auto;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
}
/* Leads the sub-line and is BRIGHTER than the rest of it. Once the brand
   comes out of the name, seven brands' versions of "Plate-Loaded Chest Press"
   share one name — the brand is the only thing telling them apart, so it has
   to be the first thing read, not a faint tail. */
.pe-lib-item-brand { color: var(--text-muted); font-weight: 700; }
.pe-lib-item-muscle {
  font-size: 9.5px; font-weight: 700; color: var(--text-subtle);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* "Nothing matches" — with the way out of it. A coach who searched for
   something the library lacks is mid-build; sending them to the library
   manager costs them their place. */
.pe-lib-none { padding: 14px 4px; text-align: center; }
.pe-lib-none-msg { margin: 0 0 10px; font-size: 12px; color: var(--text-subtle); }
.pe-lib-none-add {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--pe-accent-tint); border: 1px solid rgba(37, 87, 214, 0.35);
  color: var(--pe-accent-lt); font: 600 12px/1.3 inherit; cursor: pointer;
  text-align: left;
}
.pe-lib-none-add:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.pe-lib-none-add svg { flex: 0 0 auto; }

/* The form itself — two fields are all exercise-create needs; equipment is
   a third because it costs one click and makes the row readable later. */
.pe-lib-quickadd {
  padding: 14px 12px; border: 1px solid var(--border-light); border-radius: 8px;
  background: var(--pe-item);
}
.pe-lib-qa-title {
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-subtle); margin-bottom: 10px;
}
.pe-lib-qa-field { display: block; margin-bottom: 9px; }
.pe-lib-qa-field > span {
  display: block; margin-bottom: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-subtle);
}
.pe-lib-qa-field input {
  width: 100%; height: 32px; padding: 0 9px;
  background: var(--bg); border: 1px solid var(--border-light); border-radius: 6px;
  color: var(--text); font: 500 12.5px/1 inherit;
}
.pe-lib-qa-field textarea {
  width: 100%; padding: 7px 9px; resize: vertical; min-height: 56px;
  background: var(--bg); border: 1px solid var(--border-light); border-radius: 6px;
  color: var(--text); font: 500 12.5px/1.45 inherit;
}
.pe-lib-qa-field input:focus, .pe-lib-qa-field textarea:focus { outline: none; border-color: var(--primary); }
/* Required marker — an asterisk alone is a weak signal, so it is coloured AND
   the optional fields are behind a disclosure, which says the same thing by
   structure. */
.pe-lib-qa-req { color: var(--primary); font-style: normal; margin-left: 3px; }
/* Everything the library manager offers is here, but folded away: the fast
   path is name, muscle, add. Opening it is one click when a coach wants to
   fill the rest in now rather than later. */
.pe-lib-qa-more { margin: 4px 0 2px; border-top: 1px solid var(--border-light); padding-top: 10px; }
.pe-lib-qa-more-toggle {
  display: block; width: 100%; text-align: left; padding: 2px 0 8px;
  background: none; border: none; cursor: pointer;
  font: 700 10px/1 inherit; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-subtle);
}
.pe-lib-qa-more-toggle::before { content: "+ "; color: var(--primary); font-weight: 800; }
.pe-lib-qa-more-toggle[aria-expanded="true"]::before { content: "− "; }
.pe-lib-qa-more-toggle:hover { color: var(--text); }
.pe-lib-qa-more-body.hidden { display: none; }
/* Brand suggestions. Reuses the builder's own menu styling rather than a
   <datalist>, whose dropdown the browser paints itself — white and off-system,
   the same reason native <select> is banned here. */
.pe-lib-qa-combo { position: relative; }
.pe-lib-qa-suggest { left: 0; right: 0; min-width: 0; max-height: 200px; }
.pe-lib-qa-suggest .pe2-select-opt.hidden { display: none; }
.pe-lib-qa-actions { display: flex; gap: 6px; margin-top: 12px; }
.pe-lib-qa-save, .pe-lib-qa-cancel {
  height: 30px; padding: 0 12px; border-radius: var(--radius-sm);
  font: 600 11.5px/1 inherit; cursor: pointer;
}
.pe-lib-qa-save { flex: 1; background: var(--primary); border: 1px solid var(--primary); color: #fff; }
.pe-lib-qa-save:hover { background: var(--primary-hover); }
.pe-lib-qa-cancel { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
.pe-lib-qa-cancel:hover { color: var(--text); border-color: var(--text-subtle); }
.pe-lib-qa-hint { margin: 9px 0 0; font-size: 10px; color: var(--text-subtle); line-height: 1.4; }

.pe-lib-truncate {
  font-size: 0.65rem; color: var(--text-muted); text-align: center;
  padding: 6px 0; font-style: italic;
}

/* Bulk add bar — appears under the list once ≥1 row is selected. Commits
   the row-click selection to the active day (mockup: selcount + "+ Add N
   selected"). The header's pe-lib-selected-pill (above) stays as the
   at-a-glance count; this is the action. */
.pe-lib-addbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  /* S67: was a bare hairline row with zero bottom margin — easy to miss and
     the button sat flush against the panel edge. A contained bar with real
     margins reads as THE action for the current selection. */
  margin-top: 10px; margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.pe-lib-selcount { font-size: var(--fs-xs); color: var(--text); font-weight: 500; }

/* Custom muscle-filter select (mockup spec: native <select> is banned —
   the OS renders it white and off-system). .pe2-select-trigger's base
   look is shared with the sequence-mode trigger; the rest is scoped here. */
.pe2-select { position: relative; flex-shrink: 0; }
.pe2-select-trigger[aria-expanded="true"] { border-color: transparent; box-shadow: 0 0 0 2px var(--primary); }
.pe2-select-trigger svg { color: var(--text-subtle); flex-shrink: 0; }
.pe2-select-trigger-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe2-select-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; min-width: 148px; max-height: 260px;
  overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5); padding: 4px;
}
.pe2-select-menu.hidden { display: none; }
.pe2-select-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 9px; border-radius: 4px; font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer;
}
.pe2-select-opt:hover, .pe2-select-opt-focus { background: var(--hover-overlay); color: var(--text); }
.pe2-select-opt-active { color: var(--text); font-weight: 500; }
.pe2-select-opt-check { color: var(--primary); flex-shrink: 0; }

/* Drop target highlight when dragging a library item over a section */
.pe-exercises.pe-lib-drop-target {
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
  background: rgba(59, 130, 246, 0.04);
}

/* Section-level acute variable fill modal — set sets/reps/RIR/rest/tempo
   once, apply to every exercise in the section. */
.acute-fill-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 14px;
}
.acute-fill-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.acute-fill-grid input {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text); font-size: var(--fs-sm);
  font-family: inherit;
}
.acute-fill-grid input:focus { border-color: var(--primary); outline: none; }
.acute-fill-mode {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 10px; border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text);
}
.acute-fill-mode label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.acute-fill-mode input[type="radio"] { margin: 0; }

/* Swap history popover — quick access to recent exercise swaps. */
.pe-swap-history-pop {
  position: fixed; z-index: 9999;
  min-width: 240px; max-width: 280px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  padding: 4px;
}
.pe-swap-history-header {
  font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); padding: 6px 10px 4px;
}
.pe-swap-history-item {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 7px 10px; background: transparent; border: none;
  border-radius: 4px; cursor: pointer; color: var(--text); font-family: inherit;
  font-size: var(--fs-sm);
}
.pe-swap-history-item:hover { background: var(--input-bg); }
.pe-swap-history-name { font-weight: 500; }
.pe-swap-history-muscle {
  font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Inline notes editor — lives on the row itself. Lazy-mounted TipTap
   instance (same factory as the program overview / email composer). Empty
   rows show no editor; rows with notes (or just-clicked-to-expand rows)
   render this slot. Saves are debounced and persisted automatically — no
   Save/Cancel buttons. The `.pe-notes-area-status` indicator confirms
   ("Saving…" → "Saved ✓"). */
.pe-notes-area {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  overflow: hidden;
  transition: border-color 0.12s;
}
.pe-notes-area:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-dim, rgba(37, 87, 214,0.12));
}
.pe-notes-area-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.pe-notes-area-label {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.pe-notes-area-sub {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  opacity: 0.75; margin-left: 4px;
}
.pe-notes-area-status {
  font-size: 11px; color: var(--text-muted);
  opacity: 0; transition: opacity 0.18s;
  font-variant-numeric: tabular-nums;
}
.pe-notes-area-status.is-visible { opacity: 1; }
.pe-notes-editor-host {
  display: flex; flex-direction: column;
  min-height: 90px; max-height: 320px;
}
.pe-notes-editor-host .ee-editor-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pe-notes-editor-host .ee-content { flex: 1; min-height: 0; overflow-y: auto; }
/* Subtle "+ Add coach notes" affordance shown in Week-view editor when
   the exercise has no notes yet. Discreet — looks like an inline link. */
.pe-notes-add-link {
  display: inline-flex; align-items: center;
  margin-top: 4px; padding: 4px 0;
  background: transparent; border: 0;
  font: inherit; font-size: var(--fs-xs);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.12s;
}
.pe-notes-add-link:hover { color: var(--primary); }

/* ── Builder view switcher (Focus / Week / Grid) ───────────
   Base styles for the tabs — neutral resting state, font-family inherit,
   transition. No background/border on the *container* base because the
   only render site uses the `--rail` variant which paints its own. (The
   prior base rule put a `border-bottom` here that bled through and
   showed up as a curved underline beneath the rail switcher.) */
.pe-view-switcher {
  display: flex; align-items: center; gap: 2px;
}
.pe-view-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--text-muted);
  font-size: var(--fs-sm); font-family: inherit; cursor: pointer;
  transition: all .12s;
}
.pe-view-tab svg { opacity: 0.75; }
.pe-view-tab.active svg { opacity: 1; }

/* ── Week view (all training days at once) ─────────────── */
.pe-week-grid {
  padding: 16px; display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto; flex: 1; min-height: 0;
}
.pe-week-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.pe-week-card-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface-2, rgba(255,255,255,0.02));
  flex-wrap: wrap;
}
.pe-week-card-title { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px; }
/* Week view is restyled only for consistency, not reworked: the card day
   name picks up the same display voice as the Focus masthead so switching
   views doesn't feel like switching apps. */
.pe-week-day-name {
  font-size: 15px; color: var(--text);
  font-family: var(--pe-display); font-style: normal; font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.01em;
  background: transparent; border: 1px solid transparent; padding: 4px 6px;
  border-radius: 4px; width: auto; min-width: 120px;
}
.pe-week-day-name:hover, .pe-week-day-name:focus {
  border-color: var(--border); background: var(--surface); outline: none;
}
.pe-week-card-count { font-size: var(--fs-xs); color: var(--text-muted); }
.pe-week-card-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.pe-week-chip {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 500;
}
.pe-week-chip.vol-under, .pe-week-chip.vol-over { background: rgba(239, 68, 68, 0.16); color: #ef4444; }
.pe-week-chip.vol-mv { background: rgba(245, 158, 11, 0.16); color: #f59e0b; }
.pe-week-chip.vol-optimal { background: rgba(16, 185, 129, 0.16); color: #10b981; }
.pe-week-chip.vol-high { background: rgba(59, 130, 246, 0.16); color: #3b82f6; }
.pe-week-card-actions { display: flex; gap: 6px; }
.pe-week-card-body { padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
/* Week-view exercise row — 4-column grid: letter badge · name · muscle ·
   acute vars. Every row now has a label (A, B, C1 …) so we don't branch
   on :has(.pe-ss-badge) anymore — that variant was putting 4 items into
   a 3-column grid and causing the letter bar to wrap to its own row. */
.pe-week-ex-row {
  display: grid;
  /* drag-handle · letter-badge · name · muscle · vars */
  grid-template-columns: 14px 34px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 4px;
  font-size: var(--fs-sm);
}
/* Drag handle on Week-view rows. Hidden by default; appears on row hover.
   Cursor: grab so coaches know it's the drag affordance. */
.pe-week-drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 16px;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.12s;
}
.pe-week-ex-row:hover .pe-week-drag-handle,
.pe-week-ex-row--open .pe-week-drag-handle { opacity: 1; }
.pe-week-drag-handle:active { cursor: grabbing; }
.pe-week-ex-row:hover { background: var(--surface-2, rgba(255,255,255,0.03)); }
.pe-week-ex-row .pe-ss-badge { margin-right: 2px; }
/* `justify-self: start` makes each grid-item span hug its text width
   instead of stretching to fill the whole column. Without this, clicking
   the empty whitespace to the right of "Bench Press" registered as a
   click on the name span (which has `data-ex-info-trigger`) and opened
   the preview popover — even though visually it looked like dead space.
   Now whitespace clicks fall through to the row's expand handler. */
.pe-week-ex-name { font-weight: 500; color: var(--text); justify-self: start; }
.pe-week-ex-muscle { font-size: var(--fs-xs); color: var(--text-muted); justify-self: start; }
.pe-week-ex-vars { font-size: var(--fs-xs); color: var(--text-muted); justify-self: end; font-variant-numeric: tabular-nums; }
.pe-week-ex-empty { font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; padding: 8px 4px; }
.pe-week-ex-row { cursor: pointer; transition: background 0.1s; }
.pe-week-ex-row:hover { background: var(--surface-2, rgba(255,255,255,0.04)); }
.pe-week-ex-row--open { background: var(--surface-2, rgba(255,255,255,0.05)); }
.pe-week-ex-caret {
  font-size: 10px; color: var(--text-muted); margin-left: auto; padding-left: 6px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
/* Superset bracket in Week view — same object Focus view draws, but per row
   rather than one spanning box, because a week row grows when its inline
   editor opens and a fixed-height bracket would be wrong the moment it did.
   First row starts at its middle, last row ends at its middle, so the run
   reads as one continuous brace. */
/* The gutter is on EVERY row, not just superset ones — give it only to the
   run and its rows sit 15px right of the solos above and below, which reads
   as a wobble rather than a group. Same reason Focus view puts the bracket in
   a column every row has. */
.pe-week-ex-row-wrap { position: relative; padding-left: 15px; }
.pe-week-ex-row-wrap.pe-week-ss { position: relative; }
.pe-week-ex-row-wrap.pe-week-ss::before {
  content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 9px;
  border-left: 1.5px solid currentColor;
  color: #2563eb;
  pointer-events: none;
}
.pe-week-ex-row-wrap.pe-week-ss-first::before {
  top: 50%;
  border-top: 1.5px solid currentColor;
  border-top-left-radius: 4px;
}
.pe-week-ex-row-wrap.pe-week-ss-last::before {
  bottom: 50%;
  border-bottom: 1.5px solid currentColor;
  border-bottom-left-radius: 4px;
}
/* Hue reinforces which group; the brace and the A1/A2 labels carry it. */
.pe-week-ex-row-wrap.pe-ss-a::before { color: #2563eb; }
.pe-week-ex-row-wrap.pe-ss-b::before { color: #16a34a; }
.pe-week-ex-row-wrap.pe-ss-c::before { color: #d97706; }
.pe-week-ex-row-wrap.pe-ss-d::before { color: #a855f7; }
.pe-week-ex-row-wrap.pe-ss-e::before { color: #db2777; }
.pe-week-ex-row-wrap.pe-ss-f::before { color: #0891b2; }
/* Members keep the handle's width so names stay on one axis down the card. */
.pe-week-drag-handle--none { visibility: hidden; }

.pe-week-ex-row-wrap { display: flex; flex-direction: column; }

/* Inline Week-view exercise editor — opens when the row is clicked. Uses a
   compact 6-column input grid so sets / reps / RIR / rest / tempo are all
   visible without scrolling the card. */
.pe-week-ex-editor {
  padding: 12px 14px 14px 30px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0 -14px 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.pe-week-editor-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
.pe-week-editor-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; font-weight: 500; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.pe-week-editor-grid input {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--input-bg); color: var(--text);
  font-size: var(--fs-xs); font-family: inherit;
}
.pe-week-editor-grid input:focus { border-color: var(--primary); outline: none; }
/* Week-view notes — same inline `.pe-notes-area` block as Focus view. The
   `--week` modifier just gives a touch more breathing room since the Week
   editor is itself a popover with a tighter feel. */
.pe-notes-area--week { margin-top: 4px; }
.pe-week-editor-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 6px; border-top: 1px solid var(--border);
}
@media (max-width: 1000px) {
  .pe-week-editor-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Grid-view inline cell editor. Kept tight so the table row doesn't jump
   dramatically when editing a cell. */
/* The editable cell's click target is a real <button> filling the cell, so it
   can be tabbed to and opened with Enter. The cell gives up its padding to the
   button — otherwise the focus ring would sit inside a dead 10px border and
   the clickable area would shrink. Keep these two paddings in sync. */
/* Two classes deliberately: the shared `.pe-grid-day-cell { padding: 10px 12px }`
   is declared LATER in this file, and at equal specificity source order wins —
   a single-class override here silently lost and left the button inset.
   `height: 1px` is the table trick, not a real height: table layout ignores it
   and still sizes the row by its tallest cell, but it gives the button's
   `height: 100%` something to resolve against. Without it a one-line day cell
   in a row made tall by a wrapped exercise name leaves a dead strip at the
   bottom that no longer responds to clicks. */
.pe-grid-day-cell.pe-grid-day-cell--has { padding: 0; height: 1px; }
.pe-grid-cell-btn {
  /* height:100% so a short cell in a tall row still has a click target all the
     way down — the row is sized by the exercise-name cell, and without this the
     bottom few px of the cell stopped responding to clicks. */
  /* flex column, not block: a stretched <button> centres its content
     vertically by default, which nudged the numbers down off the baseline
     they share with the neighbouring cells. */
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; height: 100%; padding: 10px 12px;
  background: none; border: 0; border-radius: 0;
  font: inherit; color: inherit; text-align: left;
  font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background 0.1s;
}
.pe-grid-cell-btn:hover { background: var(--surface-2, rgba(255,255,255,0.03)); }
.pe-grid-cell-btn:focus-visible {
  outline: 2px solid var(--primary); outline-offset: -2px;
  background: var(--surface-2, rgba(255,255,255,0.03));
}
.pe-grid-cell-btn .pe-grid-cell-main,
.pe-grid-cell-btn .pe-grid-cell-sub { display: block; }
.pe-grid-day-cell--editing { padding: 8px; background: var(--surface-2, rgba(255,255,255,0.04)); }
.pe-grid-editor {
  display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap;
}
.pe-grid-editor label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 9px; font-weight: 500; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.pe-grid-editor input {
  padding: 4px 6px; border: 1px solid var(--border); border-radius: 3px;
  background: var(--input-bg); color: var(--text);
  font-size: var(--fs-xs); font-family: inherit; width: 60px;
}
.pe-grid-editor input:focus { border-color: var(--primary); outline: none; }

/* Grid-view header bar: explains what the view is for above the table.
   Appears on every render (including empty state). */
.pe-grid-header-bar,
.pe-grid-intro {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.pe-grid-intro { padding: 32px 20px; text-align: center; max-width: 640px; margin: 40px auto; border-radius: 8px; border: 1px solid var(--border); }
.pe-grid-intro-title { font-size: var(--fs-base); font-weight: 500; color: var(--text); margin-bottom: 4px; }
.pe-grid-intro-sub { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
.pe-week-rest {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-radius: 6px;
  background: var(--surface); border: 1px dashed var(--border);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.pe-week-rest-label { font-weight: 500; }
.pe-week-add { display: flex; justify-content: center; padding: 8px 0 20px; }
.pe-empty-week {
  padding: 40px 20px; text-align: center; color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ── Grid view (spreadsheet: exercises × days) ─────────── */
.pe-grid-wrap {
  padding: 16px; overflow: auto; flex: 1; min-height: 0;
}
.pe-grid-table {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
  font-size: var(--fs-sm);
}
.pe-grid-table thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 10px 12px; text-align: left;
  background: var(--surface-2, rgba(255,255,255,0.02));
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted);
}
.pe-grid-ex-col { min-width: 220px; position: sticky; left: 0; z-index: 3; background: var(--surface-2, rgba(255,255,255,0.02)); }
.pe-grid-day-col { min-width: 130px; }
.pe-grid-ex-cell {
  position: sticky; left: 0; z-index: 1;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: var(--surface); min-width: 220px;
}
.pe-grid-ex-name { font-weight: 500; color: var(--text); margin-bottom: 2px; }
.pe-grid-ex-muscle { font-size: var(--fs-xs); color: var(--text-muted); }
.pe-grid-day-cell {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  vertical-align: top; font-variant-numeric: tabular-nums;
}
.pe-grid-day-cell--has .pe-grid-cell-main { font-weight: 500; color: var(--text); }
.pe-grid-day-cell--has .pe-grid-cell-sub { font-size: var(--fs-xs); color: var(--text-muted); }
.pe-grid-day-cell--empty { color: var(--text-muted); opacity: 0.4; text-align: center; }

/* ── Right rail: Volume (top) + Library (bottom), stacked ─── */
/* Three panels: volume | canvas | library. Volume moved left so its target
   bars get readable width (99px vs 71.7px in the old shared rail) and the
   library gets a full-height panel of its own — it is how a coach picks
   exercises and it was previously crushed into the bottom of a shared column.
   Widths are sized by content: the volume table's four fixed columns measure
   232px, the rest is the target track; a library row needs 225px of name. */
.pe-left-rail {
  width: 372px; flex-shrink: 0;
  border-right: 1px solid var(--border-light);
  display: flex; flex-direction: column;
  background: var(--pe-rail-bg);
  overflow: hidden;
}
.pe-right-rail {
  width: 352px; flex-shrink: 0;
  border-left: 1px solid var(--border-light);
  display: flex; flex-direction: column;
  background: var(--pe-rail-bg);
  overflow: hidden;
}
/* Each rail now holds ONE panel, so it fills the rail. */
.pe-left-rail .pe-volume-panel,
.pe-right-rail .pe-library-panel { flex: 1 1 auto; min-height: 0; border-bottom: none; }

/* Folded state — a 48px labelled strip with the panel name running vertically.
   Clicking the strip (or its chevron) restores the panel. */
.pe-left-rail.pe-rail-folded, .pe-right-rail.pe-rail-folded { width: 48px; }
.pe-rail-folded .pe-volume-panel, .pe-rail-folded .pe-library-panel { display: none; }
.pe-rail-strip {
  display: none; flex: 1; align-items: center; justify-content: center;
  writing-mode: vertical-rl; cursor: pointer; background: none; border: none;
  font-family: var(--pe-display); font-style: normal; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px;
  color: var(--text-subtle); padding: 12px 0;
}
.pe-left-rail.pe-rail-folded .pe-rail-strip,
.pe-right-rail.pe-rail-folded .pe-rail-strip { display: flex; }
.pe-rail-strip:hover { color: var(--text); }

/* Auto-fold policy. Measured floors: both panels open need 1785px before the
   exercise-name column starts losing; library folded 1481; both folded 1157.
   Folding is a DEFAULT, not a lock — a coach's explicit click sets
   data-rail-user on the overlay and these rules stand down. */
#program-editor-overlay:not([data-rail-user]) .pe-right-rail { container-type: inline-size; }
@media (max-width: 1784px) {
  #program-editor-overlay:not([data-rail-user]) .pe-right-rail { width: 48px; }
  #program-editor-overlay:not([data-rail-user]) .pe-right-rail .pe-library-panel { display: none; }
  #program-editor-overlay:not([data-rail-user]) .pe-right-rail .pe-rail-strip { display: flex; }
}
@media (max-width: 1480px) {
  #program-editor-overlay:not([data-rail-user]) .pe-left-rail { width: 48px; }
  #program-editor-overlay:not([data-rail-user]) .pe-left-rail .pe-volume-panel { display: none; }
  #program-editor-overlay:not([data-rail-user]) .pe-left-rail .pe-rail-strip { display: flex; }
}
.pe-volume-panel {
  flex: 0 0 55%; padding: 20px; overflow-y: auto;
  border-bottom: 1px solid var(--border-light);
  display: flex; flex-direction: column; min-height: 52px;
}
.pe-volume-panel.pe-rail-collapsed {
  flex: 0 0 auto; overflow: hidden; padding: 12px 20px;
}
.pe-volume-panel.pe-rail-collapsed > *:not(.pe-volume-header) { display: none; }
.pe-library-panel {
  flex: 1 1 45%; display: flex; flex-direction: column;
  overflow: hidden; padding: 18px 20px 0; min-height: 52px;
}
.pe-library-panel.pe-rail-collapsed {
  flex: 0 0 auto; overflow: hidden; padding: 12px 20px;
}
.pe-library-panel.pe-rail-collapsed > *:not(.pe-library-header) { display: none; }
/* Panel headings (WEEKLY VOLUME · EXERCISE LIBRARY) — display type, so they
   sit in the same voice as the day name. The column headers under them stay
   micro-labels, keeping the two tiers unmistakable. */
.pe-volume-header,
.pe-library-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 14px;
  /* 11px, matching .pe-rail-strip — the SAME label these panels show when
     folded, so the title doesn't change size as a panel opens and closes.
     At 15px the library header needed 316px of a 311px rail and wrapped to
     two lines, which in turn crushed the selected pill onto two lines. */
  font-size: 11px;
  color: var(--text);
  flex-shrink: 0;
  flex-wrap: nowrap;
}
/* The `?` is a hint, the `−` is a control — the control should carry more
   weight. At 20px with a filled ground the `?` matched the collapse button
   exactly and outweighed the 11px title beside it, so it shrinks to 16px
   and gives up its fill. */
.pe-volume-header .vol-info-btn,
.pe-library-header .vol-info-btn {
  font-family: 'Inter', sans-serif; font-style: normal; font-weight: 500; letter-spacing: 0;
  width: 16px; height: 16px; flex-shrink: 0;
  font-size: 10px; line-height: 1;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-subtle);
}
.pe-volume-header .vol-info-btn:hover,
.pe-library-header .vol-info-btn:hover { color: var(--text); border-color: var(--text-subtle); }
/* "Targets for [Beginner ▾]" sub-line under the volume title. Lives on its
   own row so the header reads as a clean section title, not a busy band of
   controls. Sentence case + light weight so it's a hint, not a second
   header competing with the title. */
.pe-volume-meta {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.pe-volume-meta-label {
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-subtle);
  flex-shrink: 0;
  white-space: nowrap;
}
/* The title is the only element here allowed to give up space. Everything
   to its right is a fixed-size control, so it truncates and they stay put. */
.pe-library-header-left {
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pe-library-help-btn { /* matches the volume `?` styling */ }
/* Left cluster in the volume header holds the title + the ? info button
   inline so the ? can't wrap onto its own line. */
.pe-volume-header-left {
  display: inline-flex; align-items: center; gap: 6px;
}
/* Right cluster: experience-level dropdown + collapse `−`. Experience
   level lives here because it controls the volume landmarks (MEV / MAV /
   MRV) the table is computed against — a contextual control, right next
   to the data it adjusts. */
.pe-volume-header-right {
  display: inline-flex; align-items: center; gap: 8px;
}
/* Experience-level trigger — matches the chunky dropdown padding the
   schedule slots use in the left rail so the two surfaces feel like one
   system. Lives on its own meta-row, so it can be the full hit-area size
   without pushing the title around. */
.pe-exp-select--volume + .custom-select { min-width: 0; flex: 1; }
/* Matches the library's muscle filter (.pe2-select-trigger) — the two rails
   sit either side of the canvas and their one dropdown each should read as
   the same control. Border comes along with the background: a heavier edge
   on the same fill still reads as a different component. */
.pe-exp-select--volume + .custom-select .custom-select-trigger {
  padding: 7px 12px;
  font-size: 12px;
  background: var(--bg);
  border-color: var(--border-light);
  text-transform: none; letter-spacing: 0; font-weight: 500;
  color: var(--text);
}
/* Resizer: drag between the Volume and Library panels to change their
   height split. 6px hit area, 1px visible line. */
.pe-rail-collapse {
  flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; padding: 0;
  transition: all .15s;
}
.pe-rail-collapse:hover { color: var(--text); border-color: var(--text-muted); }
/* Library panel's inner scroll container — the inner .pe-lib-list handles
   actual scrolling, this just lets pe-lib-panel flex correctly. */
#pe-library-table { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* When either rail pane is collapsed the other can expand to fill. */

/* Empty-state for Volume — show target zones so methodology is visible
   from line one, before any exercise is added. */
.vol-empty-targets {
  padding: 6px 0;
}
.vol-empty-title {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text);
  margin-bottom: 4px; text-transform: none; letter-spacing: 0;
}
.vol-empty-hint {
  font-size: var(--fs-xs); color: var(--text-muted);
  margin-bottom: 10px; line-height: 1.4;
}
.vol-empty-row td { padding: 4px 6px; border-bottom: 1px solid var(--border-light); }
.vol-dim-cell { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); }
.vol-target-cell { color: var(--success); font-weight: 500; }
.vol-header-row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
/* Older `.pe-volume-header` rule (small uppercase muted) removed — it
   silently overrode the section-heading restyle above. The active rule
   for this class lives at the top of the panel-header block. */
.vol-info-btn {
  width: 20px; height: 20px; border-radius: 50%; font-size: var(--fs-xs); font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.vol-info-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Volume legend — opens from the ? button in the volume header. Two blocks:
   a short acronym key (MV/MEV/MAV/MRV definitions) and a color-coded zone
   list with range annotations + plain-language descriptions. */
.vol-legend {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 12px; margin-bottom: 12px; font-size: var(--fs-xs); line-height: 1.5;
}
/* Floating popover variant — anchored to the `?` button via JS; positioned
   `fixed` so it can overflow the volume panel instead of forcing a scroll
   inside it. Slightly heavier shadow to read as elevated above the panel. */
.vol-legend-popover {
  position: fixed;
  z-index: 10000;
  margin: 0;
  width: 320px; max-width: calc(100vw - 16px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}
.vol-legend-acronyms {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
/* Flex row so wrapped text lines up under the description column, not
   under the MV/MEV/MAV/MRV label. Hanging indent effect. */
.vol-legend-acronym {
  display: flex; align-items: baseline; gap: 8px;
  color: var(--text-muted); line-height: 1.4;
}
.vol-legend-acronym strong {
  flex: 0 0 42px; color: var(--text);
  font-weight: 600; letter-spacing: 0.3px;
}
.vol-legend-acronym-body { flex: 1; min-width: 0; }
.vol-legend-zones { display: flex; flex-direction: column; gap: 8px; }
.vol-legend-row { display: flex; align-items: flex-start; gap: 8px; }
.vol-legend-body { flex: 1; min-width: 0; }
.vol-legend-title {
  font-size: var(--fs-xs); font-weight: 500; color: var(--text);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
}
.vol-legend-abbr {
  font-size: 0.65rem; color: var(--text-muted); font-weight: 400;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}
.vol-legend-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
.vol-legend-note {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.7rem; font-style: italic; line-height: 1.5;
}
.vol-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
}
.vol-dot.vol-under { background: var(--danger); }
.vol-dot.vol-mv { background: var(--warning); }
.vol-dot.vol-optimal { background: var(--success); }
.vol-dot.vol-high { background: var(--info); }
.vol-dot.vol-over { background: var(--danger); }

/* Volume table — MUSCLE · DAY · WEEK · VS TARGET · ZONE. The week number
   moved OUT of the bar into its own column so the bar is purely "vs target"
   (fill + the MEV→MAV target band drawn on the track), matching the
   reference. Zone stays a WORD in its own column — colour is never the only
   signal (colorblind owner). */
.vol-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.vol-table th {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-subtle); text-align: left; padding: 0 6px 10px;
  border-bottom: 0; white-space: nowrap;
}
.vol-table td {
  padding: 7px 6px; border-bottom: 0;
  vertical-align: middle;
}
.vol-table tbody tr { border-radius: 5px; }
.vol-table tbody tr:hover td { background: var(--hover-overlay); }
.vol-muscle { font-weight: 600; font-size: 12px; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
.vol-eye { background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; display: flex; color: var(--text-subtle); }
.vol-eye:hover svg { opacity: 0.8 !important; }
.vol-day-th { text-align: center; }
.vol-day { color: var(--text-muted); font-weight: 500; font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.vol-dimmed { opacity: 0.35; }
.vol-hidden-row td { opacity: 0.5; }
.vol-week-th { text-align: center; }
.vol-week-cell { text-align: center; font-variant-numeric: tabular-nums; }
.vol-week-num { font-size: 12px; font-weight: 700; }
.vol-week-num.vol-none    { color: var(--text-subtle); }
.vol-week-num.vol-under   { color: var(--danger); }
.vol-week-num.vol-mv      { color: var(--warning); }
.vol-week-num.vol-optimal { color: var(--success); }
.vol-week-num.vol-high    { color: var(--info); }
.vol-week-num.vol-over    { color: var(--danger); }

/* VS TARGET — a 6px track carrying the MEV→MAV band, with the fill on top. */
.vol-target-th { text-align: center; }
.vol-bar-wrap {
  position: relative; height: 6px; background: var(--pe-track);
  border-radius: 999px; overflow: hidden; min-width: 64px;
}
.vol-bar {
  position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px;
  transition: width .3s cubic-bezier(.16,1,.3,1);
}
.vol-band {
  position: absolute; top: 0; bottom: 0;
  background: var(--pe-band);
  border-left: 1px solid var(--pe-band-edge);
  border-right: 1px solid var(--pe-band-edge);
}
/* Bar colour matches its ZONE WORD exactly (same token as .vol-status-label
   below) so the two cues can never disagree. Solid now — the number moved
   out of the bar, so nothing has to read on top of it. */
.vol-bar.vol-none { background: transparent; }
.vol-bar.vol-under { background: var(--danger); }
.vol-bar.vol-mv { background: var(--warning); }
.vol-bar.vol-optimal { background: var(--success); }
.vol-bar.vol-high { background: var(--info); }
.vol-bar.vol-over { background: var(--danger); }

/* "NOT TRAINED THIS WEEK" — its own labelled block under the table, so the
   absence of work is as legible as the presence of it. */
.vol-untrained {
  margin-top: 16px; padding: 12px 14px;
  background: var(--pe-panel); border: 1px solid var(--border-light); border-radius: 8px;
  font-size: 12px; color: var(--text-muted); line-height: 1.55;
}
.vol-untrained-label {
  display: block; margin-bottom: 6px;
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-subtle);
}

/* ZONE column — small colored label (TOO LIGHT / MAINTAIN / GROW / HARD /
   TOO MUCH). Lives in its own td so it doesn't stretch the bar column
   and misalign the row. White-space: nowrap so the label stays on one
   line even when the panel is resized narrow. */
.vol-status-th { text-align: right; }
.vol-status-cell {
  text-align: right; white-space: nowrap;
}
.vol-status-label {
  display: inline-block;
  font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  line-height: 1.2;
}
.vol-status-label.vol-none    { color: var(--text-muted); }
.vol-status-label.vol-under   { color: var(--danger); }
.vol-status-label.vol-mv      { color: var(--warning); }
.vol-status-label.vol-optimal { color: var(--success); }
.vol-status-label.vol-high    { color: var(--info); }
.vol-status-label.vol-over    { color: var(--danger); }

/* Hover tooltip for volume rows — appears beside the Week Sets or Zone
   cell with contextual advice ("add N sets to reach MEV", "sweet spot",
   etc.) plus the full MV/MEV/MAV/MRV range at the current experience
   level. One tooltip element is reused across all rows. */
.vol-hover-tip {
  position: fixed; z-index: 9999;
  width: 260px; max-width: calc(100vw - 20px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  font-size: var(--fs-xs); line-height: 1.5; color: var(--text);
  pointer-events: none;
}
.vol-hover-tip.hidden { display: none; }
.vol-tip-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: var(--fs-sm);
}
.vol-tip-head strong { color: var(--text); font-weight: 600; }
.vol-tip-current { font-variant-numeric: tabular-nums; font-weight: 500; }
.vol-tip-zone {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; margin-top: 2px;
}
.vol-tip-zone.vol-under, .vol-tip-zone.vol-over { color: var(--danger); }
.vol-tip-zone.vol-mv { color: var(--warning); }
.vol-tip-zone.vol-optimal { color: var(--success); }
.vol-tip-zone.vol-high { color: var(--info); }
.vol-tip-abbr { font-weight: 400; color: var(--text-muted); }
.vol-tip-ranges {
  margin: 10px 0; padding: 8px 0; gap: 3px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.vol-tip-ranges > div {
  display: flex; align-items: center; justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.vol-tip-range-label {
  font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.4px;
}
.vol-tip-range-label.vol-mv { color: var(--warning); }
.vol-tip-range-label.vol-optimal { color: var(--success); }
.vol-tip-range-label.vol-high { color: var(--info); }
.vol-tip-range-label.vol-over { color: var(--danger); }
.vol-tip-advice { color: var(--text); line-height: 1.5; }
.vol-tip-advice strong { color: var(--text); font-weight: 600; }

/* Scientific abbreviation underneath plain-language label in legend rows */
.vol-legend-abbr {
  font-size: 0.7rem; font-weight: 400; color: var(--text-muted);
  margin-left: 2px; margin-right: 4px;
}

/* ── Exercise Library Overlay ─────────────────────────────── */
.exercise-library {
  background: var(--bg); width: calc(100vw - 48px); min-width: 960px;
  margin: 12px auto; border-radius: 6px; display: flex; flex-direction: column;
  max-height: calc(100vh - 24px); border: 1px solid var(--border); position: relative;
}
.el-close-btn { position: absolute; top: 10px; right: 12px; z-index: 15; font-size: var(--fs-3xl); }
.exercise-library-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border); gap: 12px; flex-shrink: 0;
}
.exercise-library-header h3 { font-size: var(--fs-lg); font-weight: 500; white-space: nowrap; }
.el-header-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex: 1; }
.el-header-controls .form-group input,
.el-header-controls .form-group select { padding: 7px 10px; font-size: var(--fs-xs); }
.el-header-controls .form-group input#el-search {
  padding: 9px 14px; font-size: var(--fs-base); font-weight: 500;
  border: 2px solid var(--primary); border-radius: 8px;
  background: var(--surface); color: var(--text);
}
.el-header-controls .form-group input#el-search::placeholder { color: var(--text-subtle); }
.el-header-controls .form-group input#el-search:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.exercise-library-body { flex: 1; overflow-y: auto; padding: 0 20px 16px; }

/* Exercise table */
.el-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.el-table thead { position: sticky; top: 0; z-index: 10; }
.el-table th {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); text-align: left; padding: 10px 10px;
  border-bottom: 2px solid var(--border); background: var(--bg);
}
.el-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-light); vertical-align: middle; font-size: var(--fs-xs); white-space: nowrap; }
.el-table tr:hover td { background: var(--surface-hover); }
.el-name-cell { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: var(--fs-sm); }
.el-thumb { width: 44px; height: 26px; border-radius: 3px; object-fit: cover; background: var(--surface-2); flex-shrink: 0; }
.el-thumb-clickable { cursor: pointer; transition: opacity 0.15s, box-shadow 0.15s; }
.el-thumb-clickable:hover { opacity: 0.8; box-shadow: 0 0 0 2px var(--accent); }
.el-thumb-placeholder { width: 44px; height: 26px; border-radius: 3px; background: var(--surface-2); flex-shrink: 0; }

/* Quick video preview modal */
.el-quick-video-box { width: 640px; max-width: 90vw; background: var(--surface); border-radius: 8px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.el-quick-video-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.el-quick-video-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-quick-video-player { position: relative; width: 100%; padding-bottom: 56.25%; background: #000; }
.el-quick-video-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.el-sys-badge { font-size: var(--fs-xs); font-weight: 500; padding: 1px 5px; border-radius: 3px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); margin-left: 4px; vertical-align: middle; }
.el-override-badge { font-size: var(--fs-xs); font-weight: 500; padding: 1px 5px; border-radius: 3px; background: color-mix(in srgb, #f59e0b 12%, transparent); color: #92400e; margin-left: 4px; vertical-align: middle; }
.el-brand-badge { font-size: var(--fs-xs); font-weight: 500; padding: 2px 6px; border-radius: 3px; background: color-mix(in srgb, var(--text-muted) 10%, transparent); color: var(--text-muted); }
.el-row-system td { opacity: 0.85; }

/* Clickable exercise name */
.el-name-link { color: var(--text); text-decoration: none; font-weight: 500; }
.el-name-link:hover { color: var(--primary); text-decoration: underline; }

/* Exercise view modal */
/* System Edit mode — inline video URL column */
.el-inline-video { display: flex; align-items: center; gap: 6px; }
.el-inline-video-input { width: 100%; font-size: var(--fs-xs); font-family: 'SF Mono', 'Consolas', monospace; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); outline: none; transition: border-color 0.15s, background 0.3s; }
.el-inline-video-input:focus { border-color: var(--accent); }
.el-inline-video-input::placeholder { color: var(--text-subtle); font-family: inherit; }
.el-inline-video-saved { background: rgba(72, 187, 120, 0.1) !important; border-color: rgba(72, 187, 120, 0.5) !important; }
.el-inline-video-error { background: rgba(229, 62, 62, 0.1) !important; border-color: rgba(229, 62, 62, 0.5) !important; }
.el-inline-video-ok { color: var(--success, #48bb78); font-size: var(--fs-base); font-weight: 500; flex-shrink: 0; }
.el-inline-video.has-video .el-inline-video-input { border-color: rgba(72, 187, 120, 0.3); }

/* View modal tabs */
.el-view-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 20px; }
.el-view-tab { padding: 8px 16px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.el-view-tab:hover { color: var(--text); }
.el-view-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Alternatives tab */
.el-alt-loading { padding: 40px 0; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); display: flex; align-items: center; justify-content: center; gap: 8px; }
.el-alt-section { margin-bottom: 20px; }
.el-alt-section-title { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.el-alt-count { font-size: var(--fs-xs); font-weight: 500; color: var(--text-subtle); background: var(--surface-2); padding: 1px 6px; border-radius: 99px; }
.el-alt-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; transition: background 0.1s; }
.el-alt-row:hover { background: var(--surface-2); }
.el-alt-info { flex: 1; min-width: 0; }
.el-alt-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-alt-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-muted); }
.el-alt-score { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); background: var(--surface-2); padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }
.el-alt-variant { font-size: var(--fs-xs); font-weight: 500; padding: 1px 5px; border-radius: 3px; background: rgba(99, 102, 241, 0.1); color: var(--accent); }
.el-alt-pinned { font-size: var(--fs-xs); font-weight: 500; padding: 1px 5px; border-radius: 3px; background: rgba(72, 187, 120, 0.15); color: var(--success, #48bb78); }
.el-alt-notes { font-size: var(--fs-xs); color: var(--text-subtle); font-style: italic; }
.el-alt-pin-btn { width: 24px !important; height: 24px !important; flex-shrink: 0; }

/* System Edit toggle button */
.el-sys-edit-btn.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* Exercise actions row — horizontal layout */
.el-actions-row { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.el-actions-row .btn-icon { width: 28px; height: 28px; padding: 0; }

.el-view-video { position: relative; width: 100%; padding-bottom: 56.25%; background: #000; }
.el-view-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.el-view-no-video { padding: 40px; text-align: center; color: var(--text-subtle); background: var(--surface-2); font-size: var(--fs-sm); }
.el-view-meta-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px 16px; margin-bottom: 16px; background: var(--surface); }
#el-view-modal .modal-box { background: var(--surface); }
.el-view-meta-item { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-base); font-weight: 500; }
.el-view-meta-item .muscle-badge { font-size: var(--fs-base); font-weight: 500; padding: 3px 10px; }
.el-view-meta-item .el-brand-badge { font-size: var(--fs-base); font-weight: 500; padding: 3px 10px; }
.el-view-meta-label { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.el-view-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.el-view-section-title { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 8px; }
.el-view-instructions { font-size: var(--fs-sm); line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.el-view-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.el-view-tag { font-size: var(--fs-xs); padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--text-muted); }

/* Muscle badges */
.muscle-badge {
  display: inline-block; font-size: var(--fs-xs); font-weight: 500; padding: 2px 7px;
  border-radius: 3px; white-space: nowrap;
}
.muscle-primary { color: var(--primary); background: var(--primary-dim); }
.muscle-secondary { color: var(--text-muted); background: var(--surface-2); }

/* ── Exercise Search Modal (multi-select) ─────────────────── */
.es-result-card {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 6px; transition: all .15s; cursor: pointer; user-select: none;
}
.es-result-card:hover { background: var(--surface-hover); border-color: var(--primary); }
.es-result-card.es-selected { background: var(--primary-dim); border-color: var(--primary); }
.es-check { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.es-check-empty {
  width: 16px; height: 16px; border: 2px solid var(--border); border-radius: 3px;
  transition: border-color .15s;
}
.es-result-card:hover .es-check-empty { border-color: var(--primary); }
.es-result-name { font-size: var(--fs-base); font-weight: 500; margin-bottom: 2px; }
.es-result-meta { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.es-footer {
  padding: 12px 16px; border-top: 1px solid var(--border); display: flex;
  align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0;
}

/* Btn helpers */
.btn-sm { font-size: var(--fs-xs); padding: 5px 12px; border-radius: 4px; cursor: pointer; border: none; font-weight: 500; }
.btn-danger { background: var(--danger-dim); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-icon { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; border-radius: 4px; }
.btn-icon:hover { background: var(--surface-hover); color: var(--text); }
.btn-icon--danger:hover { color: var(--danger); }

@media (max-width: 900px) {
  .pe-layout { flex-direction: column; }
  .pe-right-rail { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 360px; flex-direction: row; }
  .pe-volume-panel { flex: 0 0 50%; border-bottom: none; border-right: 1px solid var(--border); }
  .pe-library-panel { flex: 1 1 50%; }
  .pe-row-fields { flex-wrap: wrap; }
  .exercise-library-header { flex-direction: column; align-items: stretch; }
  .pe-schedule-grid { flex-wrap: wrap; }
}

/* ============================================================
   TASKS — Power List Page (Overhauled)
   ============================================================ */

/* Loading / Error */
.tasks-loading, .tasks-error {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 60px 20px; color: var(--text-muted); font-size: var(--fs-base);
}
.tasks-error button { margin-left: 8px; }

/* ── Top Bar ──────────────────────────────────────────────────── */
.tasks-top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; gap: 12px; flex-wrap: wrap;
}
.tasks-date-nav {
  display: flex; align-items: center; gap: 8px;
}
.tasks-nav-arrow {
  background: none; border: 1px solid var(--border); color: var(--text);
  width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
  font-size: var(--fs-xl); display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.tasks-nav-arrow:hover { background: var(--surface-2); border-color: var(--text-muted); }
.tasks-date-label { font-size: var(--fs-lg); font-weight: 500; color: var(--text); }
.tasks-today-btn {
  font-size: var(--fs-xs); font-weight: 500; background: var(--primary-dim); color: var(--primary);
  border: none; border-radius: 4px; padding: 4px 10px; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.tasks-top-center { display: flex; align-items: center; gap: 10px; }
.tasks-yesterday-rate { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); }
.tasks-plan-status {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 4px 12px; border-radius: 4px;
}
.tasks-plan-status--planned { background: var(--success-dim); color: var(--success); }
.tasks-plan-status--unplanned { background: var(--warning-dim); color: var(--warning); animation: tasks-pulse 2s infinite; }
@keyframes tasks-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.tasks-top-actions { display: flex; align-items: center; gap: 8px; }
.tasks-pomo-count { font-size: var(--fs-xs); color: var(--text-muted); }
.btn-icon { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 6px; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s; position: relative; }
.btn-icon:hover { background: var(--surface-2); color: var(--text); border-color: var(--text-muted); }
.tasks-backlog-badge { font-size: var(--fs-xs); font-weight: 500; background: var(--primary); color: #fff; border-radius: 50%; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; position: absolute; top: -4px; right: -4px; }

/* ── Rich Tooltips ───────────────────────────────────────────── */
.tasks-tip-wrap { position: relative; }
.tasks-tip {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 600;
  width: 260px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.tasks-tip::before {
  content: ''; position: absolute; top: -5px; right: 14px;
  width: 8px; height: 8px; background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.tasks-tip-wrap:hover .tasks-tip {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.tasks-tip-title { font-size: var(--fs-xs); font-weight: 500; color: var(--text); margin-bottom: 4px; }
.tasks-tip-body { font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); line-height: 1.5; }

[data-theme="light"] .tasks-tip { background: #fff; border-color: #dde3ed; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
[data-theme="light"] .tasks-tip::before { background: #fff; border-left-color: #dde3ed; border-top-color: #dde3ed; }
[data-theme="light"] .tasks-tip-title { color: #1e293b; }
[data-theme="light"] .tasks-tip-body { color: #64748b; }

/* Nudge banner */
.tasks-nudge {
  background: var(--warning-dim); color: var(--warning); padding: 10px 16px;
  border-radius: 6px; font-size: var(--fs-sm); display: flex; align-items: center;
  justify-content: space-between; gap: 12px; margin-bottom: 16px;
}
.tasks-nudge-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Celebration message */
.tasks-celebration {
  font-size: var(--fs-sm); color: var(--success); font-weight: 500; padding: 8px 0;
  animation: tasks-fade-in 0.3s ease;
}
@keyframes tasks-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── Calendar Strip ───────────────────────────────────────────── */
.tasks-cal-strip {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 16px; margin-bottom: 16px;
}
.tasks-cal-strip--collapsed { padding: 8px 16px; }
.tasks-cal-strip--collapsed .tasks-cal-header { margin-bottom: 0; }
.tasks-cal-toggle { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; display: flex; align-items: center; transition: color 0.15s; }
.tasks-cal-toggle:hover { color: var(--text); }
.tasks-cal-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px;
}
.tasks-cal-title {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-muted);
}
.tasks-cal-count { font-size: var(--fs-xs); color: var(--text-muted); }
.tasks-cal-empty { font-size: var(--fs-xs); color: var(--text-muted); }
.tasks-cal-allday {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}
.tasks-cal-allday-chip {
  font-size: var(--fs-xs); font-weight: 500; padding: 3px 10px; border-radius: 4px;
  background: var(--primary-dim); color: var(--primary);
}
.tasks-cal-timeline {
  position: relative; height: 64px; background: var(--surface-2);
  border-radius: 4px; overflow: hidden;
}
.tasks-cal-hours {
  position: absolute; inset: 0; pointer-events: none;
}
.tasks-cal-hour {
  position: absolute; bottom: 2px; font-size: var(--fs-xs); color: var(--text-muted);
  transform: translateX(-50%); opacity: 0.6;
}
.tasks-cal-events {
  position: absolute; inset: 0; top: 2px; bottom: 16px;
}
.tasks-cal-event {
  position: absolute; top: 0; height: 100%; border-radius: 3px;
  background: var(--primary); opacity: 0.85; padding: 2px 6px;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; cursor: default; min-width: 20px;
  transition: opacity 0.15s;
}
.tasks-cal-event:hover { opacity: 1; }
.tasks-cal-event--free { background: var(--success); opacity: 0.55; }
.tasks-cal-event-title {
  font-size: var(--fs-xs); font-weight: 500; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tasks-cal-event-time {
  font-size: var(--fs-xs); color: rgba(255,255,255,0.75);
  white-space: nowrap;
}
.tasks-cal-now {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--danger); z-index: 2; pointer-events: none;
}

/* ── Revenue Scoreboard (compact strip) ──────────────────────── */
.tasks-revenue-strip {
  display: flex; gap: 0; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden;
}
.tasks-rev-cell {
  flex: 1; padding: 10px 14px; cursor: pointer; transition: background 0.15s, border-color 0.3s;
  border-right: 1px solid var(--border);
}
.tasks-rev-cell:last-child { border-right: none; }
.tasks-rev-cell:hover { background: var(--surface-2); }
.tasks-rev-cell--hit { background: var(--success-dim); }
.tasks-rev-cell--amber { background: var(--warning-dim); }
.tasks-rev-cell--red { background: var(--danger-dim); animation: tasks-pulse 1s infinite; }
.tasks-rev-cell--expanded { background: var(--surface-2); }
.tasks-rev-cell-row { display: flex; align-items: center; gap: 8px; }
.tasks-rev-cell-label { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); white-space: nowrap; }
.tasks-rev-cell-count { font-size: var(--fs-sm); font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tasks-rev-cell-bar { width: 40px; height: 3px; background: var(--surface-2); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.tasks-rev-cell-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; }
.tasks-rev-streak-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tasks-rev-streak-dot--active { background: var(--success); }
.tasks-rev-streak-dot--lost { background: var(--danger); }
.tasks-rev-cell-expand { color: var(--text-muted); opacity: 0.4; transition: opacity 0.15s, transform 0.15s; flex-shrink: 0; display: flex; align-items: center; }
.tasks-rev-cell:hover .tasks-rev-cell-expand { opacity: 0.8; }
.tasks-rev-cell--expanded .tasks-rev-cell-expand { opacity: 1; }

/* Revenue expanded details */
.tasks-rev-expanded { padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--border); }
.tasks-rev-detail-streak { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); margin-bottom: 6px; }
.tasks-rev-detail-actions { display: flex; gap: 6px; margin-top: 6px; }
.tasks-rev-subs { display: flex; flex-direction: column; gap: 4px; }
.tasks-rev-sub {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: var(--text); padding: 3px 0;
}
.tasks-rev-sub--done { opacity: 0.5; }
.tasks-rev-sub--done .tasks-rev-sub-label { text-decoration: line-through; }
.tasks-rev-sub-check {
  width: 16px; height: 16px; min-width: 16px; border-radius: 3px;
  border: 1.5px solid var(--border); background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s; padding: 0;
}
.tasks-rev-sub-check:hover { border-color: var(--success); }
.tasks-rev-sub-check--done { background: var(--success); border-color: var(--success); color: #fff; }
.tasks-rev-sub-label { flex: 1; font-weight: 500; }
.tasks-rev-sub-count { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.tasks-rev-inc {
  padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); cursor: pointer;
  font-size: var(--fs-xs); font-weight: 500; transition: background 0.15s, border-color 0.15s;
}
.tasks-rev-inc:hover { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); }
.tasks-rev-dec {
  padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-muted); cursor: pointer;
  font-size: var(--fs-xs); font-weight: 500; transition: background 0.15s, border-color 0.15s;
}
.tasks-rev-dec:hover { background: var(--danger-dim); border-color: var(--danger); color: var(--danger); }

/* ── Main Layout ──────────────────────────────────────────────── */
.tasks-main-layout { display: flex; gap: 16px; }
.tasks-center { flex: 1; min-width: 0; }

/* ── Momentum Indicator ──────────────────────────────────────── */
.tasks-momentum { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tasks-momentum-count { font-size: var(--fs-xl); font-weight: 500; color: var(--text); white-space: nowrap; }
.tasks-momentum-bar { display: flex; gap: 3px; flex: 1; }
.tasks-momentum-seg { height: 6px; flex: 1; border-radius: 3px; background: var(--surface-2); transition: background 0.3s; }
.tasks-momentum-seg--done { background: var(--seg-color, var(--success)); }

/* ── Power List ───────────────────────────────────────────────── */
.tasks-power-list { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.tasks-slot-section { }
.tasks-slot-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; padding: 0 2px;
}
.tasks-slot-title {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-muted);
}
.tasks-slot--big .tasks-slot-title { color: var(--warning); }
.tasks-slot-cap { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; }
.tasks-slot-cards { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.tasks-slot-cards.tasks-slot-drop-target {
  outline: 2px dashed var(--primary); outline-offset: -2px; border-radius: 6px;
  background: var(--primary-dim);
}
.tasks-slot-empty {
  padding: 12px 16px; border: 1px dashed var(--border); border-radius: 6px;
  color: var(--text-muted); font-size: var(--fs-sm); cursor: pointer;
  text-align: center; transition: border-color 0.15s, color 0.15s;
}
.tasks-slot-empty:hover { border-color: var(--primary); color: var(--primary); }
.tasks-slot-empty-muted { padding: 12px 16px; color: var(--text-muted); font-size: var(--fs-sm); text-align: center; opacity: 0.5; }

/* ── Task Card ────────────────────────────────────────────────── */
.tasks-card {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; cursor: grab; transition: border-color 0.15s, opacity 0.15s;
  gap: 10px;
}
.tasks-card:hover { border-color: var(--text-muted); }
.tasks-card--big {
  padding: 14px 16px; border-left: 3px solid var(--warning);
}

/* Racing glow on incomplete #1 Priority */
@property --frog-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.tasks-card--frog-glow {
  position: relative;
  border-color: #f59e0b;
  border-left-color: #f59e0b;
}
/* Glow border overlay — ~30% lit, rest transparent */
.tasks-frog-glow-wrap {
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 3;
}
.tasks-frog-glow-spinner {
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: conic-gradient(
    from var(--frog-angle),
    transparent 0%,
    rgba(251,191,36,0.15) 5%,
    rgba(251,191,36,0.5) 12%,
    #fbbf24 18%,
    #fde68a 23%,
    #fbbf24 28%,
    rgba(251,191,36,0.5) 33%,
    rgba(251,191,36,0.15) 38%,
    transparent 42%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 4px;
  animation: frog-race 2.5s linear infinite;
}
/* Outer glow halo for the lit segment */
.tasks-frog-glow-spinner::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  background: conic-gradient(
    from var(--frog-angle),
    transparent 0%,
    transparent 8%,
    rgba(251,191,36,0.25) 15%,
    rgba(253,230,138,0.45) 23%,
    rgba(251,191,36,0.25) 30%,
    transparent 38%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 7px;
  filter: blur(5px);
  animation: frog-race 2.5s linear infinite;
}
@keyframes frog-race {
  to { --frog-angle: 360deg; }
}
.tasks-card--frog-glow > *:not(.tasks-frog-glow-wrap) { position: relative; z-index: 4; }
/* Kill the glow when task is done or in progress */
.tasks-card--done .tasks-frog-glow-wrap,
.tasks-card--active .tasks-frog-glow-wrap { display: none; }

/* Frog nudge toast */
.tasks-frog-nudge {
  padding: 10px 16px; margin-bottom: 12px;
  background: var(--warning-dim); color: var(--warning);
  border-radius: 6px; font-size: var(--fs-sm); font-weight: 500;
  animation: tasks-fade-in 0.3s ease;
}
.tasks-card--done { opacity: 0.5; }
.tasks-card--active { border-color: var(--primary); background: var(--primary-dim); }
.tasks-card--dragging { opacity: 0.3; }
.tasks-card-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.tasks-check {
  width: 20px; height: 20px; min-width: 20px; border-radius: 4px;
  border: 2px solid var(--border); background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.tasks-check:hover { border-color: var(--success); }
.tasks-check--done { background: var(--success); border-color: var(--success); }
.tasks-check--done svg { color: #fff; }
.tasks-card-body { flex: 1; min-width: 0; }
.tasks-card-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text); display: block; }
.tasks-card-title--done { text-decoration: line-through; color: var(--text-muted); }
.tasks-card-meta { display: flex; gap: 8px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
.tasks-card-cat { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.tasks-card-est, .tasks-card-elapsed { font-size: var(--fs-xs); color: var(--text-muted); }
.tasks-card-elapsed { color: var(--primary); font-weight: 500; }
.tasks-card-badge { font-size: var(--fs-xs); background: var(--surface-2); color: var(--text-muted); padding: 1px 5px; border-radius: 3px; }
.tasks-card-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.tasks-timer-btn:hover { background: var(--primary-dim); color: var(--primary); border-color: var(--primary); }
.tasks-timer-btn--active { background: var(--primary-dim); color: var(--primary); border-color: var(--primary); }
.tasks-pomo-btn:hover { background: rgba(220,80,60,0.1); border-color: #dc503c; }
.tasks-delete-btn:hover { background: var(--danger-dim); color: var(--danger); border-color: var(--danger); }

/* Unified action button base (Start, P, X all same size) */
.tasks-action-btn {
  width: 28px; height: 28px; border-radius: 4px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0; flex-shrink: 0;
}

/* Start button override */
.tasks-start-btn {
  width: auto; padding: 0 10px; background: var(--primary); color: #fff;
  border-color: var(--primary); font-size: var(--fs-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.tasks-start-btn:hover { filter: brightness(1.1); }
.tasks-start-btn:active { transform: scale(0.97); }

/* Reasoning hover tooltip on task title */
.tasks-card-title { position: relative; }
.tasks-card-reasoning-tip {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 600;
  width: 300px; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.2s ease 0.5s, transform 0.2s ease 0.5s, visibility 0.2s ease 0.5s;
  font-weight: 400;
}
.tasks-card-title:hover .tasks-card-reasoning-tip {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.tasks-card--expanded .tasks-card-reasoning-tip { display: none; }
[data-theme="light"] .tasks-card-reasoning-tip { background: #fff; border-color: #dde3ed; box-shadow: 0 6px 20px rgba(0,0,0,0.08); }

/* AI badge */
.tasks-card-badge--ai {
  background: var(--primary-dim); color: var(--primary); font-weight: 500;
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
}
.tasks-card-badge--ai svg { width: 10px; height: 10px; }

/* Expandable AI detail panel (inline below card content) */
.tasks-card--has-detail { cursor: pointer; }
.tasks-card-detail {
  flex-basis: 100%; width: 100%; padding: 12px 0 4px; margin-top: 2px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
  animation: tasks-fade-in 0.2s ease;
}
.tasks-card-detail-section {}
.tasks-card-detail-label {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--primary); margin-bottom: 4px;
}
.tasks-card-detail-text {
  font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); line-height: 1.6;
}
.tasks-card--expanded { border-color: var(--primary-dim); }

/* Tooltip for action buttons — default: below, anchored right */
.tasks-tip--left { right: 0; }

/* When card is expanded, buttons shift — tooltip below, anchored left */
.tasks-card--expanded .tasks-tip--left {
  right: auto; left: 0;
  width: 280px;
}
.tasks-card--expanded .tasks-tip--left::before {
  right: auto; left: 14px;
}

/* Soft focus: dims non-active sections */
.tasks-soft-focus .tasks-revenue-strip,
.tasks-soft-focus .tasks-cal-strip { opacity: 0.3; pointer-events: none; transition: opacity 0.3s; }
.tasks-soft-focus .tasks-card:not(.tasks-card--active) { opacity: 0.4; }

/* ── Backlog Drawer ──────────────────────────────────────────── */
.tasks-backlog-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 799;
  animation: tasks-fade-in 0.2s ease;
}
.tasks-backlog-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 320px; z-index: 800;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; padding: 16px;
  animation: tasks-slide-in-right 0.25s ease;
  overflow-y: auto;
}
@keyframes tasks-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
.tasks-backlog-drawer-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;
}
.tasks-backlog-drawer-title { font-size: var(--fs-base); font-weight: 500; color: var(--text); }
.tasks-backlog-drawer-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; display: flex; }
.tasks-backlog-drawer-close:hover { color: var(--text); }

/* Google Calendar status badge */
.gcal-status-badge {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: 4px; background: var(--success-dim); color: var(--success);
}
.tasks-backlog-content {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  padding: 12px; max-height: calc(100vh - 300px); overflow-y: auto;
}
.tasks-backlog-add { margin-bottom: 12px; }
.tasks-backlog-input {
  width: 100%; padding: 8px 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 4px; color: var(--text);
  font-size: var(--fs-xs); outline: none;
}
.tasks-backlog-input:focus { border-color: var(--primary); }
.tasks-backlog-group { margin-bottom: 12px; }
.tasks-backlog-group-title {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px;
}
.tasks-backlog-group--overdue { color: var(--danger); }
.tasks-backlog-empty { font-size: var(--fs-xs); color: var(--text-muted); padding: 8px 0; }
.tasks-backlog-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 4px; cursor: grab; font-size: var(--fs-xs); color: var(--text);
  transition: background 0.15s;
}
.tasks-backlog-item:hover { background: var(--surface-2); }
.tasks-backlog-item-cat { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tasks-backlog-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-backlog-item-due { font-size: var(--fs-xs); color: var(--text-muted); flex-shrink: 0; }
.tasks-backlog-item-due.overdue { color: var(--danger); font-weight: 500; }
.tasks-backlog-item-del {
  opacity: 0; font-size: var(--fs-base); color: var(--text-muted); cursor: pointer;
  background: none; border: none; transition: opacity 0.15s;
}
.tasks-backlog-item:hover .tasks-backlog-item-del { opacity: 1; }

/* ── Pomodoro Widget ──────────────────────────────────────────── */
.tasks-pomo-widget {
  position: fixed; bottom: 24px; right: 24px; z-index: 900;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 16px; display: flex;
  align-items: center; gap: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.tasks-pomo-widget--idle {
  cursor: default; opacity: 0.6; padding: 8px 14px;
}
.tasks-pomo-widget--active { border-color: var(--primary); }
.tasks-pomo-widget--break { border-color: var(--success); }
.tasks-pomo-icon { font-size: var(--fs-xl); }
.tasks-pomo-text { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; }
.tasks-pomo-ring { width: 48px; height: 48px; position: relative; }
.tasks-pomo-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tasks-pomo-bg-ring { fill: none; stroke: var(--surface-2); stroke-width: 3; }
.tasks-pomo-fg-ring { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray 1s linear; }
.tasks-pomo-widget--break .tasks-pomo-fg-ring { stroke: var(--success); }
.tasks-pomo-time {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-xs); font-weight: 500;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.tasks-pomo-info { display: flex; flex-direction: column; gap: 2px; }
.tasks-pomo-label { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); }
.tasks-pomo-task { font-size: var(--fs-xs); color: var(--text); font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-pomo-stop {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px;
  background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: var(--fs-xs); font-weight: 500; transition: background 0.15s, color 0.15s;
}
.tasks-pomo-stop:hover { background: var(--danger-dim); color: var(--danger); border-color: var(--danger); }

/* ── Focus Mode ──────────────────────────────────────────────── */
.tasks-focus-view {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100vh - 120px); gap: 24px; padding: 40px 20px;
}
.tasks-focus-progress { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.tasks-focus-title { font-size: var(--fs-3xl); font-weight: 500; color: var(--text); text-align: center; max-width: 500px; line-height: 1.3; }
.tasks-focus-timer { font-size: 48px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--primary); letter-spacing: 2px; }
.tasks-focus-slot { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
.tasks-focus-actions { display: flex; gap: 12px; margin-top: 8px; }
.tasks-focus-empty { text-align: center; }
.tasks-focus-done-title { font-size: var(--fs-2xl); font-weight: 500; color: var(--success); margin-bottom: 16px; }
.btn-lg { padding: 10px 24px; font-size: var(--fs-base); font-weight: 500; border-radius: 6px; }

/* ── Planning Wizard ─────────────────────────────────────────── */
.tasks-wizard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.tasks-wizard-title { margin: 0; font-size: var(--fs-lg); font-weight: 500; color: var(--text); }
.tasks-wizard-dots { display: flex; gap: 6px; }
.tasks-wizard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-2); transition: background 0.2s; }
.tasks-wizard-dot--active { background: var(--primary); }
.tasks-wizard-dot--done { background: var(--success); }
.tasks-wizard-step {}
.tasks-wizard-heading { font-size: var(--fs-base); font-weight: 500; color: var(--text); margin-bottom: 16px; }
.tasks-wizard-suggestions { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; margin-bottom: 16px; }
.tasks-wizard-group { margin-bottom: 8px; }
.tasks-wizard-group-label { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 4px; padding: 0 4px; }
.tasks-wizard-option {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 6px; cursor: pointer; font-size: var(--fs-sm); color: var(--text);
  transition: background 0.15s;
}
.tasks-wizard-option:hover { background: var(--surface-2); }
.tasks-wizard-option input { flex-shrink: 0; accent-color: var(--primary); }
.tasks-wizard-option-title { flex: 1; }
.tasks-wizard-custom { display: flex; gap: 8px; margin-bottom: 16px; }
.tasks-wizard-custom .form-input { flex: 1; }
.tasks-wizard-footer { display: flex; justify-content: space-between; align-items: center; }
.tasks-wizard-footer-right { display: flex; gap: 8px; margin-left: auto; }
.tasks-wizard-ai-loading { font-size: var(--fs-xs); color: var(--text-muted); padding: 8px 0; display: flex; align-items: center; gap: 8px; }
.spinner-sm { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.6s linear infinite; }

/* ── Skeleton Loading ────────────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
  background: var(--surface-2);
  background-image: linear-gradient(90deg, var(--surface-2) 0px, rgba(255,255,255,0.04) 40px, var(--surface-2) 80px);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: var(--radius-sm);
  animation: shimmer 1.5s ease-in-out infinite;
}
.skeleton-text { height: 14px; width: 60%; margin-bottom: 8px; }
.skeleton-text--short { width: 35%; }
.skeleton-text--full { width: 100%; }
.skeleton-heading { height: 20px; width: 40%; margin-bottom: 12px; }
.skeleton-card { height: 80px; width: 100%; margin-bottom: 12px; }
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }

/* Wizard Review */
.tasks-wizard-review { display: flex; flex-direction: column; gap: 16px; }
.tasks-wizard-review-section {}
.tasks-wizard-review-label { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px; }
.tasks-wizard-review-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--surface-2); border-radius: 6px; margin-bottom: 4px; }
.tasks-wizard-review-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.tasks-wizard-review-source { font-size: var(--fs-xs); color: var(--text-muted); background: var(--surface); padding: 2px 6px; border-radius: 3px; }
.tasks-wizard-review-empty { font-size: var(--fs-xs); color: var(--text-muted); padding: 4px 0; }

/* ── Brain Dump ──────────────────────────────────────────────── */
.tasks-braindump-items { display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow-y: auto; }
.tasks-braindump-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; background: var(--surface-2); border-radius: 6px;
}
.tasks-braindump-item--assigned { background: var(--primary-dim); }
.tasks-braindump-item-title { font-size: var(--fs-sm); font-weight: 500; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-braindump-item-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ── First-Time Setup Modal ──────────────────────────────────── */
.tasks-setup-modal {
  max-width: 600px; margin: 40px auto; padding: 32px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.tasks-setup-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.tasks-setup-title { margin: 0; font-size: var(--fs-xl); font-weight: 500; color: var(--text); }
.tasks-setup-desc { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 20px; line-height: 1.5; }
.tasks-setup-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.tasks-setup-step {}

/* Revenue targets grid */
.tasks-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tasks-setup-section {}
.tasks-setup-section-title { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 12px; }
.tasks-setup-sub-group { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--border); }
.tasks-setup-sub-title { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 8px; }
.tasks-setup-input-group { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.tasks-setup-input-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text); flex: 1; }

/* Match CRM .form-group input styling for all setup inputs */
.tasks-setup-modal input[type="number"],
.tasks-setup-modal input[type="text"],
.tasks-setup-modal select,
.tasks-setup-modal textarea {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 10px 12px; font-size: var(--fs-base); font-family: inherit;
  outline: none; transition: border-color 0.15s;
}
.tasks-setup-modal input:focus,
.tasks-setup-modal select:focus,
.tasks-setup-modal textarea:focus { border-color: var(--primary); }
.tasks-setup-modal input::placeholder,
.tasks-setup-modal textarea::placeholder { color: var(--text-muted); }
.tasks-setup-modal select option { background: var(--surface-2); }
.tasks-setup-input { width: 80px !important; text-align: center; flex: none !important; }
.tasks-setup-modal input[type="number"]::-webkit-inner-spin-button,
.tasks-setup-modal input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tasks-setup-modal input[type="number"] { -moz-appearance: textfield; }

/* Typeform-style single-question slides */
.tasks-setup-step--typeform {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 200px; text-align: center; gap: 24px; padding: 20px 0;
}
.tasks-setup-typeform-question {
  font-size: var(--fs-2xl); font-weight: 500; color: var(--text); line-height: 1.5; max-width: 440px;
}
.tasks-setup-typeform-select {
  width: 100%; max-width: 420px; padding: 14px 16px !important; font-size: var(--fs-md) !important;
  text-align: center; cursor: pointer;
}
.tasks-setup-content-total {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}

/* Recurring templates */
.tasks-setup-templates { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.tasks-setup-template-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--surface-2); border-radius: 6px;
}
.tasks-setup-template-row--disabled { opacity: 0.4; }
.tasks-setup-template-row input[type="checkbox"] { flex-shrink: 0; accent-color: var(--primary); }
.tasks-setup-template-title { flex: 1; font-size: var(--fs-sm); min-width: 0; }
.tasks-setup-add-row { display: flex; gap: 8px; }
.tasks-setup-add-row .form-input { flex: 1; }

/* Plan choice cards */
.tasks-setup-plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.tasks-setup-plan-card {
  padding: 20px 16px; border: 2px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.tasks-setup-plan-card:hover { border-color: var(--text-muted); background: var(--surface-2); }
.tasks-setup-plan-card--selected { border-color: var(--primary); background: var(--primary-dim); }
.tasks-setup-plan-card-title { font-size: var(--fs-base); font-weight: 500; color: var(--text); margin-bottom: 6px; }
.tasks-setup-plan-card-desc { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.4; }

/* Welcome step */
.tasks-setup-welcome-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.tasks-setup-welcome-item {
  font-size: var(--fs-sm); font-weight: 500; color: var(--text); padding: 10px 14px;
  background: var(--surface-2); border-radius: 6px; border-left: 3px solid var(--primary);
}

/* Auto-fill benchmarks */
/* Funnel flow — horizontal card layout */
.tasks-setup-funnel-flow {
  display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 20px;
}
.tasks-funnel-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px 20px; min-width: 110px; flex: 1;
}
.tasks-funnel-card-label {
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.tasks-funnel-card-input {
  width: 64px !important; text-align: center; font-size: var(--fs-3xl) !important; font-weight: 500 !important;
  background: transparent !important; border: none !important; border-bottom: 2px solid var(--border) !important;
  border-radius: 0 !important; color: var(--text); padding: 2px 0 4px !important;
  outline: none; transition: border-color 0.15s;
  -moz-appearance: textfield;
}
.tasks-funnel-card-input::-webkit-inner-spin-button,
.tasks-funnel-card-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tasks-funnel-card-input:focus { border-bottom-color: var(--primary) !important; }
.tasks-funnel-card-sub { font-size: var(--fs-xs); color: var(--text-muted); }
.tasks-funnel-arrow-col {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0 8px; flex-shrink: 0;
}
.tasks-funnel-arrow-icon { font-size: var(--fs-xl); color: var(--text-muted); }
.tasks-funnel-conv-pct { font-size: var(--fs-xs); font-weight: 500; color: var(--primary); }

.tasks-funnel-benchmark {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.tasks-funnel-autofill {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--primary); font-size: var(--fs-xs); font-weight: 500; padding: 4px 10px;
  cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s;
}
.tasks-funnel-autofill:hover { background: var(--surface-2); border-color: var(--primary); }

[data-theme="light"] .tasks-funnel-card { background: #f1f5f9; }

/* Smart questionnaire */
.tasks-setup-questionnaire { margin-top: 16px; padding: 16px; background: var(--surface-2); border-radius: 6px; }
.tasks-setup-q-title { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); margin-bottom: 12px; }

/* Summary */
.tasks-setup-summary { text-align: center; padding: 20px 0; }
.tasks-setup-summary-title { font-size: var(--fs-2xl); font-weight: 500; color: var(--success); margin-bottom: 20px; }
.tasks-setup-summary-items { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.tasks-setup-summary-item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.tasks-setup-summary-item svg { color: var(--success); }

/* Metrics editor (setup wizard) */
.tasks-setup-metrics-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.tasks-setup-metric-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--surface-2); border-radius: 6px;
}
.tasks-setup-metric-label { flex: 1; font-size: var(--fs-sm); min-width: 0; }
.tasks-setup-metric-streak { font-size: var(--fs-xs); color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
.tasks-setup-metric-streak input { accent-color: var(--primary); }
.tasks-setup-metric-remove {
  width: 24px; height: 24px; border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: var(--fs-lg); display: flex; align-items: center; justify-content: center;
  border-radius: 4px; transition: background 0.15s, color 0.15s;
}
.tasks-setup-metric-remove:hover { background: var(--danger-dim); color: var(--danger); }

[data-theme="light"] .tasks-setup-metric-row { background: #f1f5f9; }

/* Priority picker */
.tasks-setup-priority-list { display: flex; flex-direction: column; gap: 6px; }
.tasks-setup-priority-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--surface-2); border: 2px solid var(--border); border-radius: 6px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.tasks-setup-priority-item:hover { border-color: var(--text-muted); }
.tasks-setup-priority-item--frog { border-color: #f59e0b; background: rgba(245,158,11,0.08); }
.tasks-setup-priority-radio {
  width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
  border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.tasks-setup-priority-item--frog .tasks-setup-priority-radio {
  border-color: #f59e0b; background: #f59e0b; color: #fff;
}
.tasks-setup-priority-title { flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.tasks-setup-priority-badge {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 8px; border-radius: 3px; background: rgba(245,158,11,0.15); color: #f59e0b;
}

/* Light mode */
[data-theme="light"] .tasks-setup-modal { background: #fff; border-color: #dde3ed; box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
[data-theme="light"] .tasks-setup-modal input[type="number"],
[data-theme="light"] .tasks-setup-modal input[type="text"],
[data-theme="light"] .tasks-setup-modal select { background: #f1f5f9; border-color: #dde3ed; color: #1e293b; }
[data-theme="light"] .tasks-setup-template-row { background: #f1f5f9; }
[data-theme="light"] .tasks-setup-plan-card { border-color: #dde3ed; }
[data-theme="light"] .tasks-setup-plan-card:hover { background: #f1f5f9; border-color: #94a3b8; }
[data-theme="light"] .tasks-setup-plan-card--selected { border-color: #7c5cfc; background: #f5f3ff; }
[data-theme="light"] .tasks-setup-questionnaire { background: #f1f5f9; }

/* ── Task card expand hint ───────────────────────────────────── */
.tasks-card-expand-hint { color: var(--text-muted); opacity: 0.3; transition: opacity 0.15s; flex-shrink: 0; display: inline-flex; align-items: center; margin-left: 4px; }
.tasks-card:hover .tasks-card-expand-hint { opacity: 0.6; }
.tasks-card--expanded .tasks-card-expand-hint { opacity: 1; }

/* ── Coach notes textarea ────────────────────────────────────── */
.tasks-card-notes {
  width: 100%; min-height: 60px; padding: 8px 10px; font-size: var(--fs-xs); font-family: inherit;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); outline: none; resize: vertical; line-height: 1.5;
  transition: border-color 0.15s;
}
.tasks-card-notes:focus { border-color: var(--primary); }
.tasks-card-notes::placeholder { color: var(--text-muted); }

/* Get tips button */
.tasks-card-get-tips { display: inline-flex; align-items: center; gap: 4px; }
.tasks-card-detail-loading { font-size: var(--fs-xs); color: var(--text-muted); display: flex; align-items: center; gap: 8px; padding: 4px 0; }

/* ── AI Suggestion Panel ─────────────────────────────────────── */
.tasks-ai-panel-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 40px 20px; color: var(--text-muted); font-size: var(--fs-sm); }
.tasks-ai-panel-desc { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; }
.tasks-ai-panel-empty { font-size: var(--fs-xs); color: var(--text-muted); padding: 20px 0; text-align: center; }
.tasks-ai-panel-list { display: flex; flex-direction: column; gap: 8px; }
.tasks-ai-panel-item {
  padding: 10px 12px; background: var(--surface-2); border-radius: 6px;
  border: 1px solid var(--border); transition: border-color 0.15s;
}
.tasks-ai-panel-item:hover { border-color: var(--text-muted); }
.tasks-ai-panel-item-header { display: flex; align-items: center; gap: 8px; }
.tasks-ai-panel-item-slot {
  font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 6px; border-radius: 3px; flex-shrink: 0;
  background: var(--surface); color: var(--text-muted);
}
.tasks-ai-panel-item-slot--big { background: var(--warning-dim); color: var(--warning); }
.tasks-ai-panel-item-slot--medium { background: var(--primary-dim); color: var(--primary); }
.tasks-ai-panel-item-title { flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--text); min-width: 0; }
.tasks-ai-panel-add {
  width: 28px; height: 28px; border-radius: 4px; border: 1px solid var(--border);
  background: transparent; color: var(--primary); cursor: pointer;
  font-size: var(--fs-xl); font-weight: 500; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s; flex-shrink: 0;
}
.tasks-ai-panel-add:hover { background: var(--primary-dim); border-color: var(--primary); }
.tasks-ai-panel-item-reasoning { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 6px; line-height: 1.4; }

/* Light mode */
[data-theme="light"] .tasks-card-notes { background: #f1f5f9; border-color: #dde3ed; color: #1e293b; }
[data-theme="light"] .tasks-ai-panel-item { background: #f1f5f9; border-color: #dde3ed; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tasks-revenue-strip { flex-wrap: wrap; }
  .tasks-rev-cell { flex: 1 1 45%; }
}
@media (max-width: 768px) {
  .tasks-revenue-strip { flex-direction: column; }
  .tasks-rev-cell { border-right: none; border-bottom: 1px solid var(--border); }
  .tasks-rev-cell:last-child { border-bottom: none; }
  .tasks-main-layout { flex-direction: column; }
  .tasks-backlog-drawer { width: 100%; }
  .tasks-setup-grid { grid-template-columns: 1fr; }
  .tasks-setup-plan-cards { grid-template-columns: 1fr; }
}

/* ── Tasks: Light Mode Overrides ──────────────────────────────── */
[data-theme="light"] .tasks-nav-arrow { border-color: #c8d0dc; color: #334155; }
[data-theme="light"] .tasks-nav-arrow:hover { background: #e8ecf2; border-color: #94a3b8; }
[data-theme="light"] .tasks-plan-status--unplanned { background: #fef3c7; color: #92400e; }
[data-theme="light"] .tasks-plan-status--planned { background: #dcfce7; color: #166534; }
[data-theme="light"] .tasks-nudge { background: #fef3c7; color: #92400e; }
[data-theme="light"] .tasks-revenue-strip { background: #fff; border-color: #dde3ed; }
[data-theme="light"] .tasks-rev-cell { border-right-color: #dde3ed; }
[data-theme="light"] .tasks-rev-cell:hover { background: #f1f5f9; }
[data-theme="light"] .tasks-rev-cell--hit { background: #dcfce7; }
[data-theme="light"] .tasks-rev-cell--amber { background: #fef3c7; }
[data-theme="light"] .tasks-rev-cell--red { background: #fef2f2; }
[data-theme="light"] .tasks-rev-cell-label { color: #475569; }
[data-theme="light"] .tasks-rev-cell-count { color: #1e293b; }
[data-theme="light"] .tasks-rev-cell-bar { background: #e2e8f0; }
[data-theme="light"] .tasks-rev-sub { color: #1e293b; }
[data-theme="light"] .tasks-rev-sub-check { border-color: #c8d0dc; }
[data-theme="light"] .tasks-rev-sub-check:hover { border-color: #22c55e; }
[data-theme="light"] .tasks-rev-sub-count { color: #64748b; }
[data-theme="light"] .tasks-rev-inc { border-color: #c8d0dc; color: #475569; }
[data-theme="light"] .tasks-rev-inc:hover { background: #ede9fe; border-color: #7c5cfc; color: #7c5cfc; }
[data-theme="light"] .tasks-slot-title { color: #475569; }
[data-theme="light"] .tasks-slot--big .tasks-slot-title { color: #b45309; }
[data-theme="light"] .tasks-slot-cap { color: #64748b; }
[data-theme="light"] .tasks-slot-empty { border-color: #a8b5c7; color: #64748b; }
[data-theme="light"] .tasks-slot-empty:hover { border-color: #7c5cfc; color: #7c5cfc; }
[data-theme="light"] .tasks-cal-event--free { opacity: 0.65; }
[data-theme="light"] .tasks-cal-event--free .tasks-cal-event-title { color: #1e293b; }
[data-theme="light"] .tasks-cal-event--free .tasks-cal-event-time { color: #475569; }
[data-theme="light"] .tasks-card { border-color: #dde3ed; background: #fff; }
[data-theme="light"] .tasks-card:hover { border-color: #94a3b8; }
[data-theme="light"] .tasks-card--big { border-left-color: #d97706; }
[data-theme="light"] .tasks-frog-nudge { background: #fef3c7; color: #92400e; }
[data-theme="light"] .tasks-card--active { border-color: #7c5cfc; background: #f5f3ff; }
[data-theme="light"] .tasks-card-title { color: #1e293b; }
[data-theme="light"] .tasks-card-cat { font-weight: 500; }
[data-theme="light"] .tasks-card-est { color: #64748b; }
[data-theme="light"] .tasks-card-elapsed { color: #6d28d9; }
[data-theme="light"] .tasks-card-badge { background: #f1f5f9; color: #64748b; }
[data-theme="light"] .tasks-check { border-color: #c8d0dc; }
[data-theme="light"] .tasks-check:hover { border-color: #22c55e; }
[data-theme="light"] .tasks-timer-btn,
[data-theme="light"] .tasks-pomo-btn,
[data-theme="light"] .tasks-delete-btn { border-color: #dde3ed; color: #64748b; }
[data-theme="light"] .tasks-momentum-seg { background: #e2e8f0; }
[data-theme="light"] .tasks-backlog-drawer { background: #fff; border-left-color: #dde3ed; box-shadow: -8px 0 24px rgba(0,0,0,0.08); }
[data-theme="light"] .tasks-backlog-content { background: #fff; border-color: #dde3ed; }
[data-theme="light"] .tasks-backlog-input { background: #f1f5f9; border-color: #dde3ed; color: #1e293b; }
[data-theme="light"] .tasks-backlog-item:hover { background: #f1f5f9; }
[data-theme="light"] .tasks-cal-strip { background: #fff; border-color: #dde3ed; }
[data-theme="light"] .tasks-cal-title { color: #475569; }
[data-theme="light"] .tasks-cal-timeline { background: #f1f5f9; }
[data-theme="light"] .tasks-cal-hour { color: #64748b; }
[data-theme="light"] .tasks-pomo-widget { background: #fff; border-color: #dde3ed; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
[data-theme="light"] .tasks-pomo-bg-ring { stroke: #e2e8f0; }
[data-theme="light"] .tasks-pomo-stop { border-color: #dde3ed; color: #64748b; }
[data-theme="light"] .tasks-focus-timer { color: #6d28d9; }
[data-theme="light"] .tasks-wizard-option:hover { background: #f1f5f9; }
[data-theme="light"] .tasks-wizard-review-item { background: #f1f5f9; }
[data-theme="light"] .tasks-braindump-item { background: #f1f5f9; }
[data-theme="light"] .tasks-braindump-item--assigned { background: #ede9fe; }
[data-theme="light"] .tasks-card-ai-tip { background: #fff; border-color: #dde3ed; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
[data-theme="light"] .tasks-card-badge--ai { background: #ede9fe; color: #6d28d9; }
[data-theme="light"] .tasks-card-detail { border-top-color: #dde3ed; }
[data-theme="light"] .tasks-card-detail-text { color: #475569; }

/* ============================================================
   SAVE ATTEMPT MODAL
   ============================================================ */
/* ============================================================
   CUSTOM SELECT DROPDOWN
   ============================================================ */
/* Hide number input spinners globally */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  text-align: center;
}

.custom-select {
  position: relative;
  width: 100%;
}
.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color 0.15s;
  text-align: left;
}
.custom-select-trigger:hover { border-color: var(--text-muted); }
.custom-select-trigger:focus { border-color: var(--primary); outline: none; }
.custom-select-trigger svg { color: var(--text-muted); flex-shrink: 0; }
.custom-select-text { flex: 1; }

.custom-select-dropdown {
  /* position:fixed + top/left are set inline by upgradeSelects() so the
     dropdown escapes any overflow:hidden ancestor. The absolute fallback
     kicks in only if the JS positioning fails. */
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 140px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 9999;
}
.custom-select-dropdown.hidden { display: none; }

.custom-select-group {
  padding: 9px 12px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-subtle, #6b7688);
  cursor: default;
}
.custom-select-group:not(:first-child) { border-top: 1px solid var(--border); margin-top: 4px; }

/* ── Custom select — dropdown sweep (S76) ─────────────────────
   Keyboard highlight + per-surface sizing for the native selects newly
   upgraded by upgradeSelects(). Base .custom-select styles stay token-based;
   these only re-fit containers where the native select carried its own
   width/spacing (inline styles die with the hidden select). */
.custom-select-option.kb-focus { background: var(--primary-dim, rgba(37, 87, 214,0.1)); }

/* Settings — timezone flexes beside Detect; currency/date-format keep the
   row widths their native selects carried inline. */
#s-timezone + .custom-select { flex: 1; min-width: 0; }
#s-currency + .custom-select { width: auto; min-width: 220px; }
#s-date-format + .custom-select { width: auto; min-width: 280px; }
#s-date-format + .custom-select .custom-select-trigger,
#s-date-format + .custom-select .custom-select-dropdown { font-family: monospace; }

/* Exercise library — header filter rail (min-widths match the old inline
   values on the native selects) + editor's stacked secondary-muscle gap. */
.el-header-controls .custom-select { width: auto; }
.el-header-controls .custom-select-trigger { padding: 7px 10px; font-size: var(--fs-xs); }
#el-muscle-filter + .custom-select { min-width: 140px; }
#el-category-filter + .custom-select { min-width: 130px; }
#el-brand-filter + .custom-select { min-width: 140px; }
#el-pattern-filter + .custom-select { min-width: 130px; }
#el-region-filter + .custom-select { min-width: 130px; }
#el-difficulty-filter + .custom-select { min-width: 120px; }
#el-location-filter + .custom-select { min-width: 110px; }
#ex-secondary-2 + .custom-select { margin-top: 6px; }

/* Agreement builder toolbar — compact triggers, fixed widths like .ag-tb-select. */
.ag-toolbar .custom-select { width: auto; margin-right: 4px; }
.ag-toolbar .custom-select-trigger { padding: 5px 8px; font-size: var(--fs-xs); font-weight: 500; background: var(--surface); }
.ag-toolbar .custom-select-option { font-size: var(--fs-xs); padding: 6px 10px; }
#ag-tb-font + .custom-select { min-width: 120px; }
#ag-tb-size + .custom-select { width: 76px; }
#ag-tb-heading + .custom-select { min-width: 104px; }
#ag-tb-lh + .custom-select { width: 60px; }
#ag-tb-size + .custom-select .custom-select-dropdown,
#ag-tb-lh + .custom-select .custom-select-dropdown { min-width: 0; }

/* Workout builder toolbar — tag filter sits in a flex row. */
#builder-tag-filter + .custom-select { width: auto; min-width: 150px; }

/* Confirm dialog — reason select kept its inline bottom gap. */
#confirm-reason-select + .custom-select { margin-bottom: 8px; }
.custom-select-option {
  padding: 8px 12px;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
}
.custom-select-option:hover {
  background: var(--primary-dim, rgba(37, 87, 214,0.1));
}
.custom-select-option.active {
  background: var(--primary-dim, rgba(37, 87, 214,0.15));
  color: var(--primary);
  font-weight: 500;
}

/* ============================================================
   SAVE ATTEMPT MODAL
   ============================================================ */
.save-attempt-modal {
  max-width: 520px;
}
.save-attempt-modal .modal-body {
  padding: 20px 24px;
  min-height: 200px;
}
.save-attempt-modal .modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  gap: 8px;
}
.save-footer-right {
  display: flex;
  gap: 8px;
  align-items: center;
}
.save-step.hidden { display: none; }

/* Step label */
.save-step-label {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 14px;
}

/* Mode selection cards */
.save-mode-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.save-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.save-mode-card:hover {
  border-color: var(--accent);
  background: rgba(124, 58, 237, 0.04);
}
.save-mode-icon { color: var(--text-muted); }
.save-mode-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
}
.save-mode-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

/* Reason grid */
.save-reason-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.save-reason-btn {
  padding: 10px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.save-reason-btn:hover { border-color: var(--accent); }
.save-reason-btn.active {
  border-color: var(--accent);
  background: rgba(124, 58, 237, 0.08);
  color: var(--accent);
}

.save-notes-input {
  width: 100%;
  resize: none;
  font-size: var(--fs-sm);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}

/* Call mode panel */
.save-call-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.save-call-reason-badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border-radius: 100px;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.save-call-section {}
.save-call-heading {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.save-call-points {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.save-call-point {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.5;
  padding: 8px 10px;
  background: rgba(124, 58, 237, 0.04);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.save-call-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.save-call-action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.save-call-action-btn:hover { border-color: var(--accent); }
.save-call-action-btn .action-tag {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: 100px;
  font-weight: 500;
}
.action-tag--discount { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.action-tag--pause { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.action-tag--call { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.action-tag--switch { background: rgba(168, 85, 247, 0.12); color: #a855f7; }

/* Message mode actions */
.save-msg-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.save-msg-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s;
}
.save-msg-action:hover { border-color: var(--accent); }
.save-msg-action.active {
  border-color: var(--accent);
  background: rgba(124, 58, 237, 0.04);
}
.save-msg-action-check {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.save-msg-action.active .save-msg-action-check {
  border-color: var(--accent);
  background: var(--accent);
}
.save-msg-action-check svg { display: none; }
.save-msg-action.active .save-msg-action-check svg { display: block; }
.save-msg-action-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.save-msg-action-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Action configs */
.save-action-config {
  margin-top: 12px;
  padding: 12px;
  background: rgba(124, 58, 237, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.save-action-config.hidden { display: none; }
.save-config-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

/* Preset buttons */
.save-discount-presets,
.save-pause-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.save-preset-btn {
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s;
}
.save-preset-btn:hover { border-color: var(--accent); }
.save-preset-btn.active {
  border-color: var(--accent);
  background: rgba(124, 58, 237, 0.08);
  color: var(--accent);
}
.save-preset-btn--custom { font-style: italic; }

.save-custom-discount.hidden { display: none; }
.save-inline-fields {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.save-field-group {
  flex: 1;
}
.save-field-group label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.save-field-group input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  background: var(--surface);
  color: var(--text);
}

.save-discount-preview,
.save-switch-preview,
.save-pause-info {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 8px;
}

/* Message preview */
.save-message-input {
  width: 100%;
  resize: vertical;
  font-size: var(--fs-sm);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  line-height: 1.5;
  min-height: 100px;
}
.save-email-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
}
.save-email-toggle input { cursor: pointer; }

/* Status badges */
.badge-paused {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}
.badge-discount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border-radius: 100px;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.badge-pause-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  border-radius: 100px;
  font-size: var(--fs-xs);
  font-weight: 500;
}

/* Save history */
.save-history {
  margin-top: 12px;
}
.save-history-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.save-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  font-size: var(--fs-xs);
}
.save-history-reason { font-weight: 500; color: var(--text); }
.save-history-outcome {
  padding: 2px 8px;
  border-radius: 100px;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
}
.save-history-outcome--saved { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.save-history-outcome--failed { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.save-history-outcome--pending { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.save-history-date { color: var(--text-muted); }

/* ============================================================
   CHANNEL BADGES & SELECTOR (Unified Inbox)
   ============================================================ */
/* ============================================================
   COMMUNICATIONS SETUP WIZARD
   ============================================================ */
.comms-wizard-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comms-prog-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.comms-prog-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: transparent;
  transition: all 0.2s;
}
.comms-prog-dot.done {
  border-color: #22c55e;
  background: #22c55e;
}
.comms-prog-dot.active {
  border-color: var(--accent);
  background: var(--accent);
}
.comms-prog-line {
  width: 24px;
  height: 2px;
  background: var(--border);
}

.comms-step {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.comms-step-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.comms-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.comms-step-title {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text);
}
.comms-step-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

.comms-modal {
  max-width: 640px;
}
.comms-modal-body {
  padding: 24px 28px;
  min-height: 220px;
}
.comms-modal-desc {
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: 1.5;
}
.comms-modal-body input[type="text"],
.comms-modal-body input[type="email"],
.comms-modal-body input[type="tel"],
.comms-modal-body input[type="number"],
.comms-modal-body input[type="password"],
.comms-modal-body select,
.comms-modal-body textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-base);
  outline: none;
  transition: border-color 0.15s;
}
.comms-modal-body .custom-select-trigger {
  padding: 9px 12px;
  font-size: var(--fs-base);
}
.comms-modal-body input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.comms-modal-body input:focus,
.comms-modal-body select:focus,
.comms-modal-body textarea:focus {
  border-color: var(--primary);
}
.comms-modal-body input::placeholder {
  color: var(--text-subtle, var(--text-muted));
  opacity: 0.6;
}
.comms-modal-body label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

.comms-wizard-body {
  padding: 0 24px 8px;
}
.comms-wizard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
}
.comms-wizard-step-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 500;
}
.comms-step.hidden { display: none; }
.comms-divider {
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

/* Channel selection cards */
.comms-channel-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.comms-channel-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.comms-channel-card:hover { border-color: var(--accent); }
.comms-channel-card:has(.comms-channel-check:checked) {
  border-color: var(--accent);
  background: rgba(124, 58, 237, 0.06);
}
.comms-channel-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.comms-channel-icon { color: var(--text-muted); }
.comms-channel-card:has(.comms-channel-check:checked) .comms-channel-icon { color: var(--accent); }
.comms-channel-check {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.comms-channel-check:disabled {
  accent-color: #22c55e;
  cursor: default;
  opacity: 0.7;
}
.comms-channel-name {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.comms-channel-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.4;
}
.comms-channel-status {
  margin-top: 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
}

.comms-why {
  background: rgba(124, 58, 237, 0.04);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 16px;
}
.comms-why-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.comms-why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.comms-why-list li {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.4;
  padding-left: 16px;
  position: relative;
}
.comms-why-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.comms-substep.hidden { display: none; }
.comms-substep-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.comms-substep-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* DNS record table */
.comms-dns-table {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.comms-dns-row {
  display: grid;
  grid-template-columns: 60px 1fr 1.5fr 60px;
  gap: 12px;
  padding: 12px 14px;
  font-size: var(--fs-sm);
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.comms-dns-row:last-child { border-bottom: none; }
.comms-dns-row--header {
  background: rgba(255,255,255,0.03);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: 0.5px;
}
.comms-dns-type {
  font-weight: 500;
  color: var(--accent);
}
.comms-dns-name {
  font-family: monospace;
  font-size: var(--fs-xs);
  color: var(--text);
  word-break: break-all;
  cursor: pointer;
  transition: color 0.15s;
}
.comms-dns-name:hover { color: var(--accent); }
.comms-dns-val {
  font-family: monospace;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  word-break: break-all;
  cursor: pointer;
  transition: color 0.15s;
}
.comms-dns-val:hover { color: var(--accent); }
.comms-dns-pri { text-align: center; color: var(--text-muted); }

.comms-dns-help {
  margin-top: 8px;
}
.comms-dns-help summary {
  font-size: var(--fs-xs);
  color: var(--accent);
  cursor: pointer;
  font-weight: 500;
}
.comms-dns-instructions {
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.6;
}
.comms-dns-instructions p { margin-bottom: 8px; }
.comms-dns-instructions code {
  background: rgba(255,255,255,0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: var(--fs-xs);
}

/* Status summary */
.comms-summary {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.comms-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.comms-sum-icon {
  font-size: var(--fs-base);
  width: 20px;
  text-align: center;
}
.comms-sum--pending { color: var(--text-muted); }
.comms-sum--done { color: #22c55e; }
.comms-sum-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  width: 60px;
}
.comms-sum-status {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.inbox-ch-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-right: 4px;
  vertical-align: middle;
}
.inbox-ch--sms { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.inbox-ch--email { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.inbox-ch--call { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
/* In-app: the platform's native channel — muted, so it labels without shouting.
   The chip text is the signal (colorblind-safe); colour is secondary. */
/* Unknown channel value — surfaced loudly instead of silently unlabelled;
   `channel` is free text with no CHECK constraint, so typos land here. */
.inbox-ch--other { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px dashed rgba(245, 158, 11, 0.4); }

/* Event rows — source:'event'. A thin timeline line ("Email: Payment receipt —
   $200.00 · 2:31 PM · Delivered"), not a chat bubble: the artefact lives in the
   profile; the thread records when and how it went out. */
.inbox-event-row { text-align: center; margin: 6px 0; }
.inbox-event-text {
  display: inline-block;
  font-size: 11.5px;
  color: var(--text-subtle);
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 3px 10px;
  max-width: 82%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-event-failed { color: #f85149; font-weight: 600; }

/* Unsent tombstone — keeps the bubble's place in the thread, drops its voice. */
.inbox-msg--unsent {
  font-style: italic;
  color: var(--text-subtle) !important;
  background: transparent !important;
  border: 1px dashed var(--border) !important;
}

/* Link click status — under a coach bubble that carries a tracked link.
   Text is the signal; the green tint on "opened" is secondary (colorblind). */
.inbox-link-status {
  font-size: 11px;
  color: var(--text-subtle);
  margin: 2px 4px 0;
}
.inbox-msg-wrap--coach .inbox-link-status { text-align: right; }
.inbox-link-status--opened { color: #22c55e; }

/* Email composer */
.inbox-email-composer {
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.inbox-email-composer-fields {
  padding: 8px 14px 0;
}
.inbox-email-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.inbox-email-field-label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--fs-xs);
  min-width: 52px;
  flex-shrink: 0;
}
.inbox-email-field-value {
  color: var(--text);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-email-subject-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 0;
  outline: none;
}
.inbox-email-subject-input::placeholder { color: var(--text-muted); font-weight: 400; }
.inbox-email-body-input {
  width: 100%;
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.6;
  padding: 12px 14px;
  resize: none;
  outline: none;
  min-height: 120px;
  font-family: inherit;
}
.inbox-email-body-input::placeholder { color: var(--text-muted); }
.inbox-email-composer-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
}
.ee-cc-toggle {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #9ca3af;
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
}
.ee-cc-toggle:hover { color: #374151; border-color: #9ca3af; }
.inbox-email-schedule-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.inbox-email-schedule-btn:hover { color: var(--accent); border-color: var(--accent); }
.inbox-email-discard-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.inbox-email-discard-btn:hover { color: var(--danger); border-color: var(--danger); }
.inbox-email-send-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: 6px;
}

/* ── Email cards (GHL-style) ──────────────────────────── */
/* OLD classes removed — replaced by .inbox-ecard */
.inbox-email-card_DEPRECATED_DO_NOT_USE {
  width: 100%;
  align-self: stretch;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  margin: 8px 0;
  overflow: hidden;
}
.inbox-email-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  cursor: pointer;
  user-select: none;
  background: var(--surface-2);
  gap: 12px;
}
.inbox-email-header:hover { background: var(--bg-hover); }
.inbox-email-subject {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 12px;
}
.inbox-email-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.inbox-email-time {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.inbox-email-chevron {
  transition: transform 0.2s;
}
.inbox-email-body {
  display: none;
  border-top: 1px solid var(--border);
  background: #fff;
}
.inbox-email-body.expanded {
  display: block;
  max-height: 500px;
  overflow-y: auto;
}
.inbox-email-chevron {
  transition: transform 0.15s;
}
.inbox-email-chevron.rotated {
  transform: rotate(180deg);
}
.inbox-email-meta {
  padding: 10px 14px 6px;
  font-size: var(--fs-xs);
  color: #374151;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Peek section — always visible when collapsed, hidden when expanded */
.inbox-email-peek {
  padding: 6px 14px 10px;
  font-size: var(--fs-xs);
}
.inbox-email-peek-sender {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.inbox-email-peek-line {
  color: var(--text);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 2px;
}
.inbox-email-card.is-expanded .inbox-email-peek { display: none; }
.inbox-email-full {
  padding: 6px 14px 14px;
  font-size: var(--fs-sm);
  color: #1f2937;
  line-height: 1.6;
  white-space: pre-line;
  word-break: break-word;
}
/* Email card action buttons row */
.inbox-email-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.inbox-email-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}
.inbox-email-action-btn:hover { background: var(--bg-hover); color: var(--text); }
/* Email popout modal */
.inbox-email-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inbox-email-modal {
  background: var(--surface, var(--bg-card, #1e1e2e));
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.inbox-email-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.inbox-email-modal-subject {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--text);
}
.inbox-email-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-xl);
}
.inbox-email-modal-close:hover { background: var(--bg-hover); color: var(--text); }
.inbox-email-modal-meta {
  padding: 12px 20px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.inbox-email-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  font-size: var(--fs-base);
  color: var(--text);
  line-height: 1.7;
  white-space: pre-line;
  word-break: break-word;
}
.inbox-email-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}
.inbox-email-modal-reply-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.inbox-email-modal-reply-btn:hover { opacity: 0.9; }

/* ── New email cards (GHL-style) ─────────────────────── */
.inbox-ecard {
  width: 100%;
  align-self: stretch;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  margin: 8px 0;
  overflow: hidden;
}
.inbox-ecard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  gap: 12px;
}
.inbox-ecard-header:hover { background: rgba(255,255,255,0.09); }
[data-theme="light"] .inbox-ecard-header { background: #eef1f6; }
[data-theme="light"] .inbox-ecard-header:hover { background: #e4e8ef; }
.inbox-ecard-subject {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.inbox-ecard-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.inbox-ecard-chevron { transition: transform 0.15s; color: var(--text-muted); }
.inbox-ecard-chevron.rotated { transform: rotate(180deg); }
.inbox-ecard-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
}
.inbox-ecard-btn:hover { background: var(--bg-hover); color: var(--text); }
.inbox-ecard-collapsed {
  padding: 10px 14px;
}
.inbox-ecard-sender-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text);
  margin-bottom: 3px;
}
.inbox-ecard-preview {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 1px;
}
.inbox-ecard.expanded .inbox-ecard-collapsed { display: none; }
.inbox-ecard-expanded {
  display: none;
  flex-direction: column;
  max-height: 600px;
}
.inbox-ecard.expanded .inbox-ecard-expanded { display: flex; }
.inbox-ecard-sticky-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-card);
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--border);
}
.inbox-ecard-meta-left { min-width: 0; }
.inbox-ecard-meta-sender {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text);
}
.inbox-ecard-meta-to {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
  padding-left: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-ecard-meta-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.inbox-ecard-meta-time {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.inbox-ecard-content {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  font-size: var(--fs-sm);
  color: var(--text);
  min-height: 60px;
  line-height: 1.65;
  white-space: pre-line;
  word-break: break-word;
}
.inbox-ecard-footer {
  padding: 10px 4px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  position: sticky;
  bottom: 0;
}
.inbox-ecard-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}
.inbox-ecard-reply-btn:hover { opacity: 0.9; }

/* Inline reply editor inside expanded card */
.ecard-inline-reply {
  margin: 10px;
  border: 1px solid rgba(99,102,241,0.4);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: rgba(99,102,241,0.04);
  overflow: hidden;
}
.ecard-inline-reply-fields {
  padding: 8px 12px 0;
}
.ecard-inline-reply-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
}
.ecard-inline-reply-field:last-child { border-bottom: none; }
.ecard-inline-reply-label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: var(--fs-xs);
  min-width: 50px;
  flex-shrink: 0;
}
.ecard-inline-reply-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-xs);
  padding: 2px 0;
  outline: none;
}
.ecard-inline-reply-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 6px;
}
.ecard-inline-reply-body {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.5;
  padding: 10px;
  resize: vertical;
  outline: none;
  font-family: inherit;
  min-height: 80px;
}
.ecard-inline-reply-body:focus { border-color: var(--accent); }
.ecard-inline-reply-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 10px;
}
.ecard-inline-reply-actions .inbox-ecard-reply-btn,
.ecard-inline-reply-actions .inbox-email-schedule-btn,
.ecard-inline-reply-actions .ecard-inline-reply-discard {
  height: 34px;
  font-size: var(--fs-xs);
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ecard-inline-reply-actions .inbox-email-schedule-btn {
  width: 34px;
  padding: 0;
  justify-content: center;
}
.ecard-inline-reply-discard {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}
.ecard-inline-reply-discard:hover { color: #ef4444; border-color: #ef4444; }

.inbox-msg--call {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
}
.inbox-call-icon { font-size: var(--fs-base); }
.inbox-call-label { font-weight: 500; }

/* Channel selector bar */
.inbox-channel-bar {
  display: flex;
  align-items: center;
  padding: 4px 12px 0;
}
.inbox-channel-selector {
  display: flex;
  gap: 2px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.inbox-ch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  border: none;
  background: none;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.inbox-ch-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.inbox-ch-btn.active { background: var(--accent); color: #fff; }
[data-theme="light"] .tasks-card--expanded { border-color: #c4b5fd; }

/* ── Cohort Analysis ───────────────────────────────────────── */
@media (max-width: 900px) {
  .dash-bottom-row { grid-template-columns: 1fr !important; }
}
.cohort-table { margin-top: 8px; }
.cohort-header-row {
  display: grid;
  grid-template-columns: 90px 90px 90px 90px 1fr;
  gap: 4px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.cohort-header-row .cohort-cell {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  font-weight: 500;
}
.cohort-row {
  display: grid;
  grid-template-columns: 90px 90px 90px 90px 1fr;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.cohort-row:hover { background: rgba(255,255,255,0.02); }
[data-theme="light"] .cohort-row:hover { background: rgba(0,0,0,0.02); }
.cohort-row:last-child { border-bottom: none; }
.cohort-cell { font-size: var(--fs-xs); color: var(--text-secondary); display: flex; align-items: center; }
.cohort-label-cell { color: var(--text); }
.cohort-bar-cell { padding-right: 8px; }
.cohort-bar-track {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.cohort-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* ── Chart Drill-Down ──────────────────────────────────────── */
.drilldown-row {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
  border-radius: 4px;
}
.drilldown-row:hover { background: rgba(255,255,255,0.03); }
[data-theme="light"] .drilldown-row:hover { background: rgba(0,0,0,0.03); }
.drilldown-row:last-child { border-bottom: none; }

/* ── Benchmark Targets ─────────────────────────────────────── */
.benchmark-targets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.bt-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bt-row label {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  flex: 1;
  white-space: nowrap;
}
.bt-row input {
  width: 70px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text);
  font-size: var(--fs-xs);
  text-align: right;
}
.bt-row input::placeholder { color: var(--text-muted); }

/* ── Rate History ──────────────────────────────────────────── */
.profile-stat-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
  cursor: help;
  text-decoration: underline dotted;
}

/* ── Churn Detection ───────────────────────────────────────── */

/* Risk dot on client list */
.churn-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Score breakdown card on profile */
.churn-breakdown { padding: 4px 0; }
.churn-breakdown-empty {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 12px 20px;
}
.churn-loading {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 12px 0;
}
.churn-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.churn-score-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid var(--churn-color, var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.churn-score-num {
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--text);
}
.churn-score-meta { flex: 1; }
.churn-risk-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.churn-scored-at {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}
.churn-actions { flex-shrink: 0; }
.churn-velocity {
  font-size: var(--fs-xs);
  color: #f97316;
  background: rgba(249,115,22,0.08);
  border: 1px solid rgba(249,115,22,0.15);
  border-radius: 4px;
  padding: 6px 10px;
  margin-bottom: 12px;
}
.churn-snoozed {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  margin-bottom: 12px;
}
.churn-signals {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.churn-signal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}
.churn-signal-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.churn-signal-value {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-secondary);
  font-family: var(--font-mono, 'SF Mono', monospace);
}
.churn-bar-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.churn-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}
.churn-signal-detail {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════
   CHECK-INS TAB — Profile Inline Cards
   ══════════════════════════════════════════════════════════════ */

/* ── Metrics Strip ───────────────────────────────────────────── */
.ci-metrics-strip {
  display: flex; gap: 12px; margin-bottom: 16px;
}
.ci-metric {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px; text-align: center;
}
.ci-metric--pending { border-color: rgba(245,158,11,0.3); }
.ci-metric-value { font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.ci-metric-label { font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 2px; }

/* ── Status Filter ───────────────────────────────────────────── */
.ci-header-right { display: flex; align-items: center; gap: 10px; }
.ci-status-filter {
  display: flex; gap: 0; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.ci-filter-btn {
  padding: 4px 12px; font-size: var(--fs-xs); font-weight: 500;
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  transition: all 0.15s;
}
.ci-filter-btn.active { background: var(--primary); color: #fff; }
.ci-filter-btn:hover:not(.active) { color: var(--text); }

/* ── Delta Indicators ────────────────────────────────────────── */
.ci-delta {
  font-size: var(--fs-xs); font-weight: 500; margin-left: 6px;
  padding: 1px 5px; border-radius: 3px;
  color: var(--text-muted); background: rgba(255,255,255,0.04);
  cursor: help;
}

/* ── Review / Open Buttons ───────────────────────────────────── */
.ci-review-btn, .ci-open-btn { flex-shrink: 0; margin-left: auto; white-space: nowrap; }

/* ── Streak Dots (embedded in streak metric card) ────────────── */
.ci-metric--wide { min-width: 160px; }
.ci-streak-dots { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.ci-streak-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.12);
}
.ci-streak-dot--filled { background: var(--primary); border-color: var(--primary); }
.ci-streak-dot--current {
  width: 10px; height: 10px;
  background: none; border: 2px solid var(--text);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 700px) { .ci-metrics-strip { flex-wrap: wrap; } .ci-metric { min-width: calc(50% - 8px); } }

.ci-loading { padding: 24px 20px; color: var(--text-muted); font-size: var(--fs-sm); display: flex; align-items: center; gap: 10px; }
.ci-empty { padding: 48px 20px; text-align: center; }
.ci-empty-icon { color: var(--text-muted); opacity: 0.4; margin-bottom: 12px; }
.ci-empty-title { font-size: var(--fs-md); font-weight: 500; margin-bottom: 6px; }
.ci-empty-sub { font-size: var(--fs-xs); color: var(--text-muted); max-width: 320px; margin: 0 auto; line-height: 1.5; }

.ci-list-header { padding: 0 20px !important; height: 48px; display: flex; align-items: center; border-bottom: none !important; }

.ci-card {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.ci-card:first-child { border-top: 1px solid var(--border); }
.ci-card:last-child { border-bottom: none; }
.ci-card:hover { background: rgba(255,255,255,0.02); }

.ci-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 48px;
  max-height: 48px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.ci-week {
  font-weight: 500;
  font-size: var(--fs-sm);
  flex: 1;
  min-width: 0;
}

.ci-badge {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: 4px;
  flex-shrink: 0;
}
.ci-badge--approved  { background: rgba(34,197,94,0.12); color: #22c55e; }
.ci-badge--pending   { background: rgba(245,158,11,0.12); color: #f59e0b; }
.ci-badge--returned  { background: rgba(59,130,246,0.12); color: #3b82f6; }

.ci-submitted {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

.ci-chevron {
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
  display: flex;
}
.ci-card.expanded .ci-chevron { transform: rotate(90deg); }

.ci-detail {
  display: none;
  padding: 0 20px 16px;
  animation: fadeIn 0.2s ease;
}
.ci-card.expanded .ci-detail { display: block; }

.ci-responses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.ci-response-item--full { grid-column: 1 / -1; }

.ci-response-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.ci-response-value {
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.ci-scale-hint { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; }
.ci-no-responses { font-size: var(--fs-xs); color: var(--text-muted); padding: 8px 0; }

.ci-coach-response {
  margin-top: 14px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  padding: 14px;
  border-left: 3px solid var(--primary);
}
.ci-coach-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--primary);
  font-weight: 500;
  margin-bottom: 6px;
}
.ci-coach-notes { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); }

.ci-action-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ci-action-tag {
  font-size: var(--fs-xs);
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(99,102,241,0.1);
  color: var(--primary);
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   PROGRESS TAB — Stat Cards, Charts, Habit Grid
   ══════════════════════════════════════════════════════════════ */
.progress-tab-wrap { padding: 0; display: flex; flex-direction: column; gap: 16px; }
.progress-tab-wrap .p-grid { margin-bottom: 0; }

.prog-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.prog-stat-card {
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
}
.prog-stat-card--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}
.prog-stat-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 6px;
}
.prog-stat-value {
  font-size: var(--fs-3xl);
  font-weight: 500;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.prog-delta {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
}
.prog-delta--good { color: #2557d6; }
.prog-delta--bad  { color: rgba(255,255,255,0.45); }

/* Period toggle */
.prog-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.prog-period-toggle { display: flex; gap: 2px; background: rgba(255,255,255,0.04); border-radius: 6px; padding: 2px; border: 1px solid var(--border); }
.prog-period-btn {
  background: none; border: none; color: var(--text-muted);
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.5px;
  padding: 5px 14px; border-radius: 4px; cursor: pointer; transition: all 0.15s;
}
.prog-period-btn:hover { color: var(--text); }
.prog-period-btn.active { background: var(--primary); color: #fff; }

.progress-tab-wrap .p-grid .card.profile-card { display: flex; flex-direction: column; }
.prog-chart-wrap {
  padding: 16px 20px;
  height: 220px;
  position: relative;
  flex: 1;
}
.prog-habit-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 220px; }
.prog-empty {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
  padding: 40px 20px;
}

.card-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 8px;
}

/* Habit Grid */
.prog-habit-wrap { padding: 12px 20px 16px; }
.prog-habit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.prog-habit-row:last-child { border-bottom: none; }
.prog-habit-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  min-width: 120px;
  flex-shrink: 0;
}
.prog-habit-dots {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: flex-end;
}
.prog-habit-dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  transition: background 0.15s;
}
.prog-habit-dot--done {
  background: #2557d6;
  border-color: #003bcc;
}
.prog-habit-pct {
  font-size: var(--fs-xs);
  font-weight: 500;
  min-width: 36px;
  text-align: right;
  color: var(--text-muted);
}

/* Sparklines in stat cards */
.prog-stat-card { position: relative; overflow: hidden; }
.prog-sparkline {
  display: block;
  width: 100% !important;
  height: 24px !important;
  max-height: 24px;
  margin-bottom: 6px;
}

/* Compliance row */
.prog-compliance-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.prog-compliance-row:empty { display: none; }
.prog-compliance-card {
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.prog-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.prog-ring-inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card-bg, #0f0f19);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.prog-vol-value {
  font-size: var(--fs-3xl);
  font-weight: 500;
  letter-spacing: -0.5px;
}
.prog-compliance-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}
.prog-compliance-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Check-In Metric Trends */
.prog-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px 20px;
}
.prog-metric-item { }
.prog-metric-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.prog-metric-chart {
  height: 120px;
  position: relative;
}

/* Progress Photos */
.prog-photos { padding: 16px 20px; }
.prog-photo-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.prog-photo-select-wrap { flex: 1; }
.prog-photo-select-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
}
.prog-photo-select {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 12px;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.prog-photo-vs {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-top: 16px;
}
.prog-photo-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.prog-photo-col { }
.prog-photo-date {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-align: center;
}
.prog-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.prog-photo-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.prog-photo-img:hover {
  border-color: var(--primary);
  transform: scale(1.02);
}

/* Trend Alert Badges */
.prog-alert {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  color: var(--warning);
  animation: progAlertPulse 2s ease-in-out infinite;
}
@keyframes progAlertPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Annotation Button + Form */
.prog-ann-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.prog-ann-btn:hover { color: var(--text); border-color: var(--primary); }

.prog-ann-form {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
}
.prog-ann-date {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 10px;
  font-size: var(--fs-xs);
  color-scheme: dark;
}
.prog-ann-text {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 12px;
  font-size: var(--fs-xs);
}
.prog-ann-text::placeholder { color: var(--text-muted); }
.prog-ann-save {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
}
.prog-ann-cancel {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  padding: 6px 12px;
  font-size: var(--fs-xs);
  cursor: pointer;
}

/* Annotation List */
.prog-ann-list { padding: 8px 20px 16px; }
.prog-ann-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.prog-ann-item:last-child { border-bottom: none; }
.prog-ann-item-date {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  min-width: 60px;
}
.prog-ann-item-text { font-size: var(--fs-sm); flex: 1; }
.prog-ann-item-del {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-xl);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.prog-ann-item-del:hover { color: #ef4444; }

/* Weight Goal */
.prog-goal-wrap { margin-left: auto; }
.prog-goal-display {
  font-size: var(--fs-xs);
  color: var(--primary);
  font-weight: 500;
}
.prog-goal-edit {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-xs);
  padding: 0 4px;
}
.prog-goal-edit:hover { color: var(--text); }
.prog-goal-set {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  padding: 2px 8px;
  cursor: pointer;
}
.prog-goal-set:hover { color: var(--text); border-color: var(--primary); }
.prog-goal-input {
  width: 70px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 3px 8px;
  font-size: var(--fs-xs);
}
.prog-goal-save {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  cursor: pointer;
  margin-left: 4px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .prog-stats-row { grid-template-columns: repeat(2, 1fr); }
  .prog-compliance-row { grid-template-columns: 1fr; }
  .prog-metrics-grid { grid-template-columns: 1fr; }
  .prog-photo-compare { grid-template-columns: 1fr; }
  .ci-responses { grid-template-columns: 1fr; }
  .ci-submitted { display: none; }
  .prog-habit-name { min-width: 80px; font-size: var(--fs-xs); }
  .prog-habit-dot { width: 10px; height: 10px; }
  .prog-ann-form { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════
   PROGRAM TAB — Two-Column Layout
   ══════════════════════════════════════════════════════════════ */
.prog-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0 16px;
  align-items: start;
}
.prog-layout-cal {
  min-width: 0;
}
.prog-layout-cal .cal-container { }
.prog-layout-cal .cal-toolbar { }
.prog-layout-cal .cal-grid { }
.prog-layout-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 0;
  padding-bottom: 60px;
}

/* Control Cards */
.prog-ctrl-card {
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 6px;
}
.prog-ctrl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.prog-ctrl-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.prog-ctrl-body { padding: 12px 14px 14px; }

.prog-ctrl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  gap: 8px;
}
.prog-ctrl-row + .prog-ctrl-row { border-top: 1px solid rgba(255,255,255,0.04); }
.prog-ctrl-row--muted { opacity: 0.5; }
.prog-ctrl-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
}
.prog-ctrl-val {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-align: right;
}
.prog-ctrl-empty {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 8px 0;
  text-align: center;
}
.prog-ctrl-input {
  width: 90px;
  text-align: right;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 4px 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
}
.prog-ctrl-select {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 4px 8px;
  font-size: var(--fs-xs);
  cursor: pointer;
  min-width: 100px;
  text-align: right;
}

/* Compact weight mode toggle in control panel */
.wt-mode-row--compact {
  display: flex;
  gap: 2px;
}
.wt-mode-row--compact .wt-mode-btn {
  font-size: var(--fs-xs);
  padding: 3px 8px;
}

/* Habit rows in control panel */
.prog-habit-ctrl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.prog-habit-ctrl-row:last-child { border-bottom: none; }
.prog-habit-ctrl-name {
  font-size: var(--fs-xs);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prog-habit-ctrl-freq {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* Workout schedules in control panel */
.prog-ws-list { padding: 12px 14px 14px; }
.prog-ws-list:empty { display: none; }

@media (max-width: 1024px) {
  .prog-layout {
    grid-template-columns: 1fr;
  }
  .prog-layout-panel {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media (max-width: 640px) {
  .prog-layout-panel { grid-template-columns: 1fr; }
}

/* ============================================================
   NUTRITION TAB — client profile
   ============================================================ */
.nutrition-tab { display: flex; flex-direction: column; gap: 16px; padding: 0 0 24px; }

.nutrition-grid-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 1080px) { .nutrition-grid-top { grid-template-columns: 1fr; } }
/* When Daily Targets is hidden (plan assigned), Today's Intake spans full width */
.nutrition-grid-top.nutrition-grid-top-single { grid-template-columns: 1fr; }

.nutrition-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.nutrition-card-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
  position: relative;
}
.nutrition-card-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.nutrition-card-sub {
  font-size: var(--fs-sm);
  color: var(--text-subtle);
}
.nutrition-card-controls {
  position: absolute;
  top: 0;
  right: 0;
}

.nutrition-loading,
.nutrition-placeholder {
  padding: 24px;
  text-align: center;
  color: var(--text-subtle);
  font-size: var(--fs-sm);
}
.nutrition-error {
  padding: 16px;
  text-align: center;
  color: var(--danger, #ef4444);
  font-size: var(--fs-sm);
}

/* ── Mode toggle ─────────────────────────────────────────── */
.nutrition-mode-toggle {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.nutrition-mode-btn {
  flex: 1;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.nutrition-mode-btn:hover { color: var(--text); }
.nutrition-mode-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* ── Macro field grid ────────────────────────────────────── */
.nutrition-macro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.nutrition-field {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 34px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.1s;
}
.nutrition-field:focus-within { border-color: var(--primary, #2557d6); }
.nutrition-field.disabled { opacity: 0.45; }
.nutrition-field > span:first-child {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.nutrition-field input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: inherit;
  width: 100%;
  padding: 0;
  text-align: right;
}
.nutrition-field input::placeholder { color: var(--text-subtle); }
.nutrition-field input:disabled { cursor: not-allowed; }
.nutrition-unit {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  min-width: 24px;
  text-align: right;
}

/* ── Breakdown toggle ────────────────────────────────────── */
.nutrition-breakdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  padding: 8px 0;
  user-select: none;
}
.nutrition-breakdown-toggle input[type="checkbox"] {
  margin: 0;
  accent-color: var(--primary, #2557d6);
}

.nutrition-meal-breakdown { margin-bottom: 14px; }
.nutrition-meal-breakdown.hidden { display: none; }

.nutrition-meal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.nutrition-meal-table th {
  padding: 6px 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.nutrition-meal-table td {
  padding: 4px 4px;
  border-bottom: 1px solid var(--row-border);
}
.nutrition-meal-table input {
  width: 100%;
  padding: 6px 8px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  outline: none;
  transition: border-color 0.1s;
}
.nutrition-meal-table input:focus { border-color: var(--primary, #2557d6); }
.nutrition-meal-table input[type="number"] { text-align: right; }
.nutrition-meal-table input.nutrition-meal-name { font-weight: 500; }

/* ── Save row ────────────────────────────────────────────── */
.nutrition-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}
.nutrition-target-status {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}
.nutrition-target-status.success { color: var(--success, #22c55e); }
.nutrition-target-status.error { color: var(--danger, #ef4444); }

/* ── Day view ────────────────────────────────────────────── */
.nutrition-day-nav {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.nutrition-day-nav-btn {
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.nutrition-day-nav-btn:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-hover);
}
.nutrition-day-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.nutrition-day-totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}
.nutrition-macro-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
}
.nutrition-macro-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.nutrition-macro-bar {
  height: 6px;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
}
.nutrition-macro-bar-fill {
  height: 100%;
  background: var(--primary, #2557d6);
  border-radius: 3px;
  transition: width 0.2s;
}
.nutrition-macro-val {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nutrition-macro-val .actual { color: var(--text); font-weight: 600; }
.nutrition-macro-val .sep { color: var(--text-subtle); margin: 0 2px; }
.nutrition-macro-val .target { color: var(--text-muted); }
.nutrition-macro-val .unit { color: var(--text-subtle); margin-left: 3px; }

.nutrition-meal-block {
  padding: 10px 12px;
  border-top: 1px solid var(--row-border);
}
.nutrition-meal-block:first-child { border-top: none; padding-top: 0; }
.nutrition-meal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.nutrition-meal-head .nutrition-meal-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.nutrition-meal-totals {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.nutrition-meal-empty {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  font-style: italic;
  padding: 2px 0;
}
.nutrition-log-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nutrition-log-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  font-size: var(--fs-sm);
}
.nutrition-log-name {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nutrition-log-brand {
  color: var(--text-subtle);
  font-size: var(--fs-xs);
}
.nutrition-log-portion {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.nutrition-log-macros {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Range toggle (7/30/90) ──────────────────────────────── */
.nutrition-range-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nutrition-range-toggle button {
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.nutrition-range-toggle button:hover { color: var(--text); }
.nutrition-range-toggle button.active {
  background: var(--surface);
  color: var(--text);
}

.nutrition-compliance-body {
  min-height: 300px;
  position: relative;
}
.nutrition-compliance-body canvas {
  width: 100% !important;
  height: 300px !important;
}
.nutrition-compliance-body > .nutrition-placeholder,
.nutrition-compliance-body > .nutrition-loading,
.nutrition-compliance-body > .nutrition-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

/* ============================================================
   BUILDER → NUTRITION TAB
   ============================================================ */
.nut-builder-subnav {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  width: fit-content;
}
.nut-subnav-btn {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
}
.nut-subnav-btn:hover { color: var(--text); }
.nut-subnav-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.nut-subview { display: none; }
.nut-subview.active { display: block; }

.nut-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.nut-search-input {
  flex: 1;
  max-width: 340px;
  padding: 7px 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  outline: none;
}
.nut-search-input:focus { border-color: var(--primary, #2557d6); }

.nut-loading, .nut-empty, .nut-placeholder, .nut-error {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.nut-error { color: var(--danger, #ef4444); }
.nut-empty-title { font-size: var(--fs-md); color: var(--text); margin-bottom: 4px; font-weight: 500; }
.nut-empty-sub { color: var(--text-subtle); }

/* Plans table */
.nut-plans-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: var(--fs-sm);
}
.nut-plans-table th {
  padding: 10px 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.nut-plans-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--row-border);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.nut-plans-table tr:last-child td { border-bottom: none; }
.nut-plan-row { cursor: pointer; transition: background 0.1s; }
.nut-plan-row:hover { background: var(--hover-overlay); }
.nut-plan-name { font-weight: 500; }
.nut-plan-desc { color: var(--text-subtle); font-size: var(--fs-xs); margin-top: 2px; }
.nut-col-actions { text-align: right; width: 40px; }
.nut-row-action {
  background: transparent;
  border: none;
  color: var(--text-subtle);
  width: 24px;
  height: 24px;
  border-radius: 3px;
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: 1;
}
.nut-row-action:hover { background: var(--hover-overlay); color: var(--danger, #ef4444); }
/* "+ Assign" is a labelled, non-destructive action — size to its text and
   use a neutral/accent hover instead of the delete button's danger red. */
.nut-row-assign {
  width: auto;
  padding: 0 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.nut-row-assign:hover { background: var(--hover-overlay); color: var(--text); }
.nut-col-actions:has(.nut-row-assign) { width: auto; white-space: nowrap; }
.nut-plan-card-actions { display: inline-flex; align-items: center; gap: 4px; }

.nut-plan-type-pill, .nut-macro-pill, .nut-cal-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
}
.nut-macro-pill { margin-right: 4px; }
.nut-cal-pill { background: var(--surface); color: var(--text); }

/* ============================================================
   PLAN TYPE CHOOSER MODAL
   ============================================================ */
.nut-plan-type-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 640px;
  width: 90%;
  padding: 20px;
  box-shadow: var(--shadow);
}
.nut-plan-type-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.nut-plan-type-header h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
}
.nut-plan-type-sub {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-bottom: 16px;
}
.nut-modal-close {
  background: transparent;
  border: none;
  color: var(--text-subtle);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 3px;
}
.nut-modal-close:hover { background: var(--hover-overlay); color: var(--text); }
.nut-plan-type-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) { .nut-plan-type-options { grid-template-columns: 1fr; } }
.nut-plan-type-card {
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.1s, background 0.1s;
}
.nut-plan-type-card:hover {
  border-color: var(--primary, #2557d6);
  background: var(--surface);
}
.nut-plan-type-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.nut-plan-type-desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.45;
}

/* ============================================================
   PLAN EDITOR OVERLAY
   ============================================================ */
.nut-plan-editor {
  background: var(--bg);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.nut-plan-editor-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.nut-editor-back {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-md);
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.nut-editor-back:hover { color: var(--text); background: var(--hover-overlay); }

.nut-plan-name-input {
  flex: 1;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 600;
  font-family: inherit;
  outline: none;
}
.nut-plan-name-input:hover { border-color: var(--border); }
.nut-plan-name-input:focus { border-color: var(--primary, #2557d6); background: var(--input-bg); }

.nut-plan-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nut-plan-save-status {
  font-size: var(--fs-xs);
  color: var(--success, #22c55e);
  min-width: 60px;
  text-align: right;
}
.nut-plan-save-status.error { color: var(--danger, #ef4444); }
.btn-danger-outline {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--danger, #ef4444);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  font-family: inherit;
}
.btn-danger-outline:hover { background: var(--danger-dim, rgba(239,68,68,0.1)); border-color: var(--danger, #ef4444); }

.nut-plan-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.nut-plan-loading, .nut-empty-day {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.nut-empty-day { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* Day tabs */
.nut-day-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
  overflow-x: auto;
}
/* Day tabs — uniform structure across active + inactive.
 * Active state communicated via fill + border only; every tab shows the same
 * name + color-coded macro line so coaches can compare days at a glance
 * without jarring shape differences. */
.nut-day-tab {
  position: relative;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: inherit;
  min-width: 0;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.nut-day-tab:hover { color: var(--text); }
.nut-day-tab.active {
  background: var(--primary-dim, rgba(37, 87, 214, 0.12));
  border-color: var(--primary, #2557d6);
  color: var(--text);
}
/* Tab line 1 — day name + delete */
.nut-day-tab-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Delete × hidden on inactive by default, revealed on hover or active.
 * Follows the design-system pattern: action icons appear on hover. */
.nut-day-tab-delete {
  opacity: 0;
  transition: opacity 150ms ease;
}
.nut-day-tab.active .nut-day-tab-delete,
.nut-day-tab:hover .nut-day-tab-delete {
  opacity: 1;
}
/* Tab line 2 — compact color-coded totals on every tab (always visible) */
.nut-day-tab-totals {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.nut-day-tab-kcal { color: var(--text-muted); font-weight: 600; }
.nut-day-tab.active .nut-day-tab-kcal { color: var(--text); }
.nut-day-tab-sep { color: var(--text-subtle); opacity: 0.5; }
.nut-day-tab-macro.p { color: #10b981; }
.nut-day-tab-macro.c { color: #f59e0b; }
.nut-day-tab-macro.f { color: #3b82f6; }
.nut-day-tab-delete {
  color: var(--text-subtle);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  border-radius: 2px;
}
.nut-day-tab-delete:hover { color: var(--danger, #ef4444); background: var(--danger-dim, rgba(239,68,68,0.1)); }
.nut-day-tab-add {
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: inherit;
}
.nut-day-tab-add:hover { color: var(--primary, #2557d6); }

/* Day toolbar — grid matches the meal-items grid so KCAL/P/C/F columns line up.
 * Horizontal padding = meal-block padding (14px) + item-row padding (8px) = 22px
 * so the toolbar's content-box matches the item-row's content-box below. */
.nut-day-toolbar {
  display: grid;
  grid-template-columns: 20px minmax(0, 1.4fr) 64px 100px 60px 64px 58px 50px 60px;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 0 22px;
}
.nut-day-name-input {
  padding: 6px 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  font-family: inherit;
  outline: none;
  min-width: 200px;
}
.nut-day-name-input:focus { border-color: var(--primary, #2557d6); }

/* Day totals wrapper — pass-through so children slot into the toolbar grid */
.nut-day-totals-pills { display: contents; }

/* Meal-level totals (kept for any remaining callers) */
.nut-meal-totals-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.nut-tot-pill {
  padding: 3px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.nut-tot-pill b { color: var(--text); font-weight: 600; }

/* Day toolbar per-macro column — label stacked above value, color-coded */
.nut-day-toolbar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.nut-day-toolbar-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-subtle);
  line-height: 1;
}
.nut-day-toolbar-col.p .nut-day-toolbar-label { color: #10b981; }
.nut-day-toolbar-col.c .nut-day-toolbar-label { color: #f59e0b; }
.nut-day-toolbar-col.f .nut-day-toolbar-label { color: #3b82f6; }
.nut-day-toolbar-value {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* Color-coded day totals — values match their label color so they're
 * distinguishable for colorblind users. KCAL stays white (it's the sum). */
.nut-day-toolbar-col.p .nut-day-toolbar-value { color: #10b981; }
.nut-day-toolbar-col.c .nut-day-toolbar-value { color: #f59e0b; }
.nut-day-toolbar-col.f .nut-day-toolbar-value { color: #3b82f6; }
/* Tiny muted "X% of kcal" line under each macro — replaces the full-width
 * macro distribution bar. Empty (&nbsp;) under KCAL to keep rows aligned. */
.nut-day-toolbar-pct {
  font-size: 10px;
  color: var(--text-subtle);
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Meal blocks */
.nut-meals-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nut-meal-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.nut-meal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.nut-meal-name-input {
  flex: 0 0 auto;
  min-width: 140px;
  padding: 5px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  font-family: inherit;
  outline: none;
}
.nut-meal-name-input:hover { border-color: var(--border); }
.nut-meal-name-input:focus { border-color: var(--primary, #2557d6); background: var(--input-bg); }

.nut-meal-type-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nut-meal-type-btn {
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  font-family: inherit;
}
.nut-meal-type-btn:hover { color: var(--text); }
.nut-meal-type-btn.active { background: var(--surface); color: var(--text); }

.nut-meal-delete-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-subtle);
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: 1;
  margin-left: auto;
}
.nut-meal-delete-btn:hover { color: var(--danger, #ef4444); border-color: var(--danger, #ef4444); }

.nut-meal-target-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-top: 6px;
}
@media (max-width: 640px) { .nut-meal-target-grid { grid-template-columns: 1fr 1fr; } }
.nut-meal-target-grid label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.nut-meal-target-grid label > span {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.nut-meal-target-grid input {
  padding: 6px 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  outline: none;
  text-align: right;
}
.nut-meal-target-grid input:focus { border-color: var(--primary, #2557d6); }

/* Items list */
.nut-meal-items-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
}
.nut-meal-empty {
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  padding: 10px;
  font-style: italic;
}

.nut-item-row,
.nut-item-row-header {
  display: grid;
  grid-template-columns: 20px minmax(0, 1.4fr) 64px 100px 60px 64px 58px 50px 60px;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

/* Inline food-name rename (hover edit pencil) */
.nut-item-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  position: relative;
}
.nut-item-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: var(--text);
}
.nut-item-name-input {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  background: var(--input-bg);
  border: 1px solid var(--primary, #2557d6);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  outline: none;
}
.nut-item-name-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-subtle);
  cursor: pointer;
  font-family: inherit;
  opacity: 0;
  transition: opacity 120ms ease 0ms, color 120ms ease, background 120ms ease;
  flex-shrink: 0;
}
.nut-item-name:hover .nut-item-name-edit {
  opacity: 0.7;
  transition: opacity 120ms ease 120ms, color 120ms ease, background 120ms ease;
}
.nut-item-name-edit:hover {
  opacity: 1 !important;
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
  transition: opacity 0ms, color 120ms ease, background 120ms ease;
}

/* Unit button — looks like plain centered text; opens custom popover on click */
.nut-item-unit-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  padding: 4px 6px;
  text-align: center;
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.nut-item-unit-btn:hover {
  background-color: var(--surface-2);
}
.nut-item-unit-btn:focus-visible {
  outline: none;
  background-color: var(--surface-2);
  border-color: var(--primary, #2557d6);
}

/* Custom unit popover (CRM-styled dropdown) */
.nut-unit-popover {
  position: fixed;
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  padding: 4px;
  z-index: 10000;
  min-width: 180px;
  max-width: 280px;
  max-height: 340px;
  overflow-y: auto;
  font-family: inherit;
}
.nut-unit-popover-heading {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  padding: 8px 12px 4px;
}
.nut-unit-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 12px 8px 28px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background 80ms ease;
}
.nut-unit-option:hover {
  background: var(--surface-2);
}
.nut-unit-option.selected {
  background: rgba(37, 87, 214, 0.10);
  color: var(--primary, #2557d6);
}
.nut-unit-option.selected::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 10px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(-45deg);
}
.nut-unit-option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nut-unit-option-grams {
  font-size: 11px;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.nut-unit-option.selected .nut-unit-option-grams {
  color: var(--primary, #2557d6);
  opacity: 0.7;
}
.nut-item-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.nut-item-row:hover .nut-item-actions { opacity: 1; }
.nut-item-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-subtle);
  cursor: pointer;
  font-family: inherit;
  transition: all 100ms ease;
}
.nut-item-action-btn:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}
.nut-item-action-btn.danger:hover {
  color: var(--danger, #ef4444);
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}
.nut-item-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  opacity: 0;
  cursor: grab;
  /* On-leave: fade out in 120ms with no delay */
  transition: opacity 120ms ease 0ms, color 120ms ease;
}
/* On hover: fade in after a 500ms delay */
.nut-item-row:hover .nut-item-drag-handle {
  opacity: 0.6;
  transition: opacity 120ms ease 500ms, color 120ms ease;
}
.nut-item-drag-handle:hover {
  opacity: 1 !important;
  color: var(--text);
  transition: opacity 0ms, color 120ms ease;
}
.nut-item-drag-handle:active { cursor: grabbing; }

/* SortableJS feedback classes */
.nut-sortable-ghost {
  opacity: 0.4;
  background: var(--surface-2) !important;
}
.nut-sortable-chosen {
  cursor: grabbing;
}
.nut-sortable-drag {
  opacity: 0.95;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  border-radius: 6px;
  background: var(--surface);
}
/* Target drop-zone highlight when an item is being dragged over a meal */
.nut-meal-items-table.nut-drop-target {
  background: rgba(37, 87, 214, 0.05);
  border-radius: 6px;
  outline: 1px dashed rgba(37, 87, 214, 0.35);
  outline-offset: -2px;
}
.nut-item-row:hover { background: var(--surface-2); }
.nut-item-col {
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.nut-item-col b { font-weight: 600; color: var(--text); }
.nut-item-col.p b { color: #10b981; }
.nut-item-col.c b { color: #f59e0b; }
.nut-item-col.f b { color: #3b82f6; }

/* Header row above item rows — uses same grid so columns align perfectly */
.nut-item-row-header {
  padding-top: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-subtle);
}
.nut-item-row-header:hover { background: transparent; }
.nut-item-header-name { color: var(--text-subtle); }
.nut-item-header-qty,
.nut-item-header-unit { color: var(--text-subtle); text-align: center; }
.nut-item-unit { text-align: center; }

/* Target-only meal: inputs aligned to item-row grid columns */
.nut-meal-target-row {
  padding-top: 10px;
  padding-bottom: 10px;
}
.nut-meal-target-row:hover { background: transparent; }
.nut-target-row-label {
  color: var(--text);
  font-weight: 500;
  font-size: var(--fs-sm);
}
.nut-target-input {
  padding: 8px 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  outline: none;
  text-align: center;
  width: 100%;
  min-width: 0;
}
.nut-target-input:focus {
  border-color: var(--primary, #2557d6);
}
.nut-target-input.p { color: #10b981; }
.nut-target-input.c { color: #f59e0b; }
.nut-target-input.f { color: #3b82f6; }
.nut-target-input.kcal { color: var(--text); }

/* Meal totals row at bottom of items table */
.nut-item-totals-row {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  padding-bottom: 6px;
  margin-top: 4px;
  background: transparent !important;
  cursor: default;
}
.nut-item-totals-row:hover { background: transparent; }
.nut-item-totals-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-subtle);
}
.nut-item-totals-row .nut-item-col b {
  font-size: var(--fs-md);
  font-weight: 700;
}

/* Meal drag handle — hidden by default, reveals after a 500ms hover over the
 * meal header row (where the handle sits, at the left). Leaves instantly on mouseout. */
.nut-meal-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  cursor: grab;
  padding: 4px;
  border-radius: 4px;
  opacity: 0;
  /* Default (on-leave): fade out in 120ms with no delay */
  transition: opacity 120ms ease 0ms, color 120ms ease, background 120ms ease;
  flex-shrink: 0;
  margin-right: 2px;
}
/* On hover: fade in after a 500ms delay */
.nut-meal-head:hover .nut-meal-drag-handle {
  opacity: 0.6;
  transition: opacity 120ms ease 500ms, color 120ms ease, background 120ms ease;
}
.nut-meal-drag-handle:hover {
  opacity: 1 !important;
  color: var(--text);
  background: var(--surface-2);
  transition: opacity 0ms, color 120ms ease, background 120ms ease;
}
.nut-meal-drag-handle:active {
  cursor: grabbing;
}
.nut-item-header-col { text-align: center; color: var(--text-subtle); }
.nut-item-header-col.p { color: #10b981; }
.nut-item-header-col.c { color: #f59e0b; }
.nut-item-header-col.f { color: #3b82f6; }
.nut-item-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nut-item-brand { color: var(--text-subtle); font-size: var(--fs-xs); margin-left: 6px; }
.nut-item-amount {
  padding: 4px 8px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-family: inherit;
  outline: none;
  text-align: right;
  width: 100%;
}
.nut-item-amount:focus { border-color: var(--primary, #2557d6); }
.nut-item-unit { color: var(--text-subtle); font-size: var(--fs-xs); }
.nut-item-macros {
  display: flex;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  justify-content: flex-end;
  white-space: nowrap;
}
.nut-item-delete-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-subtle);
  width: 22px;
  height: 22px;
  cursor: pointer;
  line-height: 1;
  font-size: var(--fs-md);
}
.nut-item-delete-btn:hover { color: var(--danger, #ef4444); border-color: var(--border); }

.nut-meal-actions, .nut-add-meal-row {
  margin-top: 8px;
}
.nut-add-meal-row { margin-top: 16px; }

/* ============================================================
   FOOD SEARCH MODAL — redesigned
   ============================================================ */
.nut-food-search-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 780px;
  width: 92%;
  height: min(82vh, 720px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.nut-food-search-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.nut-food-search-input-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.nut-food-search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-subtle);
  pointer-events: none;
}
.nut-food-search-kbd {
  position: absolute;
  right: 10px;
  font-size: 11px;
  color: var(--text-subtle);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: inherit;
  pointer-events: none;
}
.nut-food-search-header input {
  flex: 1;
  padding: 10px 36px 10px 36px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-md);
  font-family: inherit;
  outline: none;
  width: 100%;
}
.nut-food-search-header input:focus { border-color: var(--primary, #2557d6); }
.nut-food-search-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.nut-fs-chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: var(--fs-xs);
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms ease;
}
.nut-fs-chip:hover { background: var(--surface-2); color: var(--text); }
.nut-fs-chip.active {
  background: rgba(37, 87, 214, 0.10);
  border-color: rgba(37, 87, 214, 0.40);
  color: var(--primary, #2557d6);
}
.nut-food-search-meta {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
.nut-food-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 0 6px 6px;
}
.nut-food-search-hint {
  padding: 28px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.nut-fs-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--primary, #2557d6);
  animation: nutFsSpin 0.6s linear infinite;
  display: inline-block;
}
@keyframes nutFsSpin { to { transform: rotate(360deg); } }
.nut-fs-section { padding: 4px 4px 8px; }
.nut-fs-section-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 600;
  padding: 8px 10px 4px;
}
/* Search result row — 5-column grid so macros line up vertically across rows */
.nut-food-search-result {
  display: grid;
  grid-template-columns: 1fr 64px 72px 64px 58px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 100ms ease;
}
.nut-food-search-result:hover,
.nut-food-search-result.selected {
  background: var(--surface-2);
  border-color: var(--border);
}
.nut-food-search-result.selected {
  border-color: rgba(37, 87, 214, 0.40);
  background: rgba(37, 87, 214, 0.06);
}
.nut-fsr-name-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.nut-fsr-check { flex-shrink: 0; display: inline-block; vertical-align: middle; }
.nut-fsr-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.nut-fsr-brand {
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  font-weight: 400;
  flex-shrink: 0;
}
.nut-fsr-per {
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 400;
  margin-left: auto;
  flex-shrink: 0;
}
.nut-fsr-col {
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
}
.nut-fsr-col b {
  font-weight: 600;
  color: var(--text);
}
.nut-fsr-col.p b { color: #10b981; }
.nut-fsr-col.c b { color: #f59e0b; }
.nut-fsr-col.f b { color: #3b82f6; }

/* Frozen header bar at top of scrollable results */
.nut-fsr-header {
  display: grid;
  grid-template-columns: 1fr 64px 72px 64px 58px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 3;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-subtle);
}
.nut-fsr-header-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text-subtle);
}
.nut-fsr-header-per {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-subtle);
  font-style: italic;
  opacity: 0.8;
}
.nut-fsr-header-col { text-align: center; }
.nut-fsr-header-col.p { color: #10b981; }
.nut-fsr-header-col.c { color: #f59e0b; }
.nut-fsr-header-col.f { color: #3b82f6; }
.nut-food-search-footer {
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  display: flex;
  justify-content: center;
}
.nut-food-search-footer[hidden] { display: none; }
.nut-food-search-footer .btn-secondary {
  min-width: 140px;
}

/* ============================================================
   PORTION PICKER MODAL
   ============================================================ */
.nut-portion-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 560px;
  width: 92%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.nut-portion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.nut-portion-title {
  flex: 1;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nut-portion-brand {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  font-weight: 400;
  margin-left: 6px;
}
.nut-portion-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
}
.nut-portion-preview {
  display: flex;
  justify-content: space-around;
  gap: 6px;
  padding: 14px 8px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.nut-portion-macro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.nut-portion-macro b {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.nut-portion-macro.p b { color: #10b981; }
.nut-portion-macro.c b { color: #f59e0b; }
.nut-portion-macro.f b { color: #3b82f6; }
.nut-portion-macro span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--text-subtle);
}
.nut-portion-qs-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
.nut-portion-qs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.nut-portion-qs-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 600;
}
.nut-portion-input {
  padding: 10px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  outline: none;
  text-align: right;
  height: 44px;
}
.nut-portion-input:focus {
  border-color: var(--primary, #2557d6);
}
.nut-portion-select {
  padding: 10px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  font-family: inherit;
  outline: none;
  height: 44px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
.nut-portion-select:focus {
  border-color: var(--primary, #2557d6);
}
.nut-portion-select optgroup {
  font-weight: 600;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.nut-portion-select option {
  font-weight: 500;
  color: var(--text);
}
.nut-portion-grams-hint {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.nut-portion-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

/* Create-custom-food CTA — shown in the food search results (both the
   no-results and has-results states) */
.nut-fs-create-row {
  padding: 8px 6px 10px;
  display: flex;
  justify-content: center;
}
.nut-fs-create-btn {
  padding: 8px 14px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 120ms ease;
}
.nut-fs-create-btn:hover {
  color: var(--primary, #2557d6);
  border-color: rgba(37, 87, 214, 0.40);
  background: rgba(37, 87, 214, 0.06);
}

/* Custom food modal — per-100g entry form (reuses the portion dialog shell) */
.nut-cf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.nut-cf-input {
  padding: 8px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  font-family: inherit;
  outline: none;
  height: 38px;
}
.nut-cf-input:focus { border-color: var(--primary, #2557d6); }
.nut-cf-input.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 100%;
}
.nut-cf-per100-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 600;
  margin: 4px 0 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.nut-cf-macros-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.nut-cf-macro-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.nut-cf-hint {
  margin-top: 12px;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}

/* ============================================================
   CLIENT PROFILE — ASSIGNED PLAN section
   ============================================================ */
.assigned-plan-card { }
.assigned-plan-body { min-height: 60px; }

.nut-no-plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0;
}
.nut-no-plan-text {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  max-width: 540px;
  line-height: 1.5;
}
.nut-no-plan-actions {
  display: flex;
  gap: 8px;
}

.nut-plan-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
.nut-plan-name-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nut-plan-totals-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.nut-plan-day-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
}
.nut-plan-day-label {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-right: 4px;
}
.nut-plan-day-hint { color: var(--text-subtle); font-style: italic; font-size: var(--fs-xs); font-weight: 400; letter-spacing: 0; text-transform: none; }
.nut-plan-day-warn .nut-plan-day-hint { color: var(--warning, #f59e0b); font-style: normal; font-weight: 500; }
.nut-plan-day-btn {
  padding: 4px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.3px;
}
.nut-plan-day-btn:hover { color: var(--text); background: var(--surface-hover); }
.nut-plan-day-btn.active {
  background: var(--primary, #2557d6);
  color: white;
  border-color: var(--primary, #2557d6);
}

.nut-plan-meals-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--row-border);
}
.nut-plan-meal-preview {
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.nut-plan-meal-preview.target-only { border-left: 2px solid var(--warning, #f59e0b); }
.nut-plan-meal-head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.nut-plan-meal-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.nut-plan-meal-tag {
  font-size: var(--fs-xs);
  color: var(--warning, #f59e0b);
  font-weight: 500;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.nut-plan-meal-totals {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nut-plan-items-preview {
  margin: 4px 0 0 12px;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.6;
}
.nut-plan-items-preview li { list-style: disc; }
.nut-plan-no-items {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  font-style: italic;
  padding: 2px 0;
}
.nut-plan-empty {
  text-align: center;
  color: var(--text-subtle);
  font-size: var(--fs-sm);
  padding: 16px;
  font-style: italic;
}

.nut-plan-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--row-border);
}

/* ============================================================
   PLAN SETTINGS MODAL + GEAR BUTTON
   ============================================================ */
.nut-plan-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.nut-plan-settings-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
  background: var(--hover-overlay);
}
.nut-plan-settings-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 90%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.nut-plan-settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.nut-plan-settings-header h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
}
.nut-plan-settings-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.nut-settings-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nut-settings-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  line-height: 1;
}
.nut-settings-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.5;
}
/* Settings-scoped override: make the day-selection-mode toggle fit the
 * narrower modal column width without horizontal scroll. */
#nut-plan-settings-body .nut-day-mode-toggle {
  flex-wrap: wrap;
  gap: 4px;
}
#nut-plan-settings-body .nut-day-mode-btn {
  flex: 1 1 auto;
}
.nut-settings-macro-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.nut-settings-macro-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms ease;
}
.nut-settings-macro-row:hover {
  background: var(--hover-overlay, rgba(255,255,255,0.04));
}
.nut-settings-macro-cb {
  margin: 2px 0 0;
  accent-color: var(--primary, #2557d6);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.nut-settings-macro-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.nut-settings-macro-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}
.nut-settings-macro-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.3;
}

/* ============================================================
   ASSIGN PLAN MODAL
   ============================================================ */
.nut-assign-plan-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 640px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-shadow: var(--shadow);
}
.nut-assign-plan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nut-assign-plan-header h3 {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
}
.nut-assign-plan-sub {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin: 6px 0 14px;
  line-height: 1.5;
}
.nut-assign-plan-options {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.nut-assign-plan-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  max-height: 420px;
}
.nut-assign-plan-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.1s;
}
.nut-assign-plan-option:hover {
  border-color: var(--primary, #2557d6);
}
/* A phase that can't take the plan — finished, or already holding one. The
   row still says WHY in words on the right, because dimming alone is not a
   reason and colour is never the only signal. */
.nut-assign-plan-option[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.nut-assign-plan-option[disabled]:hover {
  border-color: var(--border);
}
.nut-assign-plan-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.nut-assign-plan-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.nut-assign-plan-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.nut-assign-plan-macros {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.nut-assign-plan-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
}

/* Days library sub-page title */
.nut-sub-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text);
}
.nut-sub-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ============================================================
   PLAN EDITOR — day-selection-mode + per-day rotate-tag controls
   ============================================================ */
.nut-day-mode-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nut-day-mode-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.nut-day-mode-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nut-day-mode-btn {
  padding: 5px 10px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.nut-day-mode-btn:hover { color: var(--text); }
.nut-day-mode-btn.active {
  background: var(--primary, #2557d6);
  color: white;
}

.nut-day-toolbar-main {
  grid-column: 1 / span 4;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.nut-day-rotate-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nut-day-rotate-btn {
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.nut-day-rotate-btn:hover { color: var(--text); }
.nut-day-rotate-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* ── Workout builder: keyboard cheatsheet (?) + command palette (⌘K) ── */
.pe-shortcut-overlay,
.pe-cmdk-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.pe-shortcut-overlay.hidden,
.pe-cmdk-overlay.hidden { display: none; }

.pe-shortcut-card {
  width: min(560px, calc(100vw - 48px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; max-height: 76vh; overflow: hidden;
}
.pe-shortcut-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm); font-weight: 600;
}
.pe-shortcut-close {
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.pe-shortcut-close:hover { color: var(--text); }
.pe-shortcut-body { padding: 14px 18px; overflow-y: auto; }
.pe-shortcut-group + .pe-shortcut-group { margin-top: 18px; }
.pe-shortcut-group-title {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600; margin-bottom: 8px;
}
.pe-shortcut-rows { display: flex; flex-direction: column; gap: 6px; }
.pe-shortcut-row {
  display: flex; align-items: center; gap: 14px;
  padding: 7px 8px; border-radius: 5px;
}
.pe-shortcut-row:hover { background: var(--surface-2, rgba(255,255,255,0.04)); }
.pe-shortcut-keys {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  min-width: 110px;
}
.pe-shortcut-plus { color: var(--text-muted); font-size: 11px; }
.pe-shortcut-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--surface-2, rgba(255,255,255,0.06));
  border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; font-weight: 500; color: var(--text);
}
.pe-shortcut-desc { font-size: var(--fs-sm); color: var(--text); flex: 1 1 auto; }
.pe-shortcut-footer {
  padding: 10px 18px; border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-muted);
}

.pe-cmdk-card {
  width: min(620px, calc(100vw - 48px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; max-height: 70vh; overflow: hidden;
}
.pe-cmdk-input {
  width: 100%; padding: 16px 20px; box-sizing: border-box;
  background: transparent; border: 0; border-bottom: 1px solid var(--border);
  font-size: 15px; color: var(--text); outline: none; font-family: inherit;
}
.pe-cmdk-input::placeholder { color: var(--text-muted); }
.pe-cmdk-results { flex: 1 1 auto; overflow-y: auto; padding: 6px 4px; }
.pe-cmdk-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; border-radius: 5px; cursor: pointer;
}
.pe-cmdk-row--active { background: var(--surface-2, rgba(255,255,255,0.06)); }
.pe-cmdk-row-label { font-size: var(--fs-sm); color: var(--text); }
.pe-cmdk-row-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--text-muted);
}
.pe-cmdk-cat {
  padding: 2px 7px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted);
}
.pe-cmdk-empty {
  padding: 20px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm);
}
.pe-cmdk-footer {
  padding: 9px 18px; border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* ── Workout builder: client preview mode ── */
.pe-preview-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}
.pe-preview-overlay.hidden { display: none; }
.pe-preview-shell {
  width: min(960px, calc(100vw - 48px));
  height: min(820px, calc(100vh - 48px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,0.5);
}
.pe-preview-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
}
.pe-preview-title { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.pe-preview-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.pe-preview-close {
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 6px;
}
.pe-preview-close:hover { color: var(--text); }
.pe-preview-stage {
  flex: 1 1 auto; display: flex; min-height: 0;
}
.pe-preview-sidebar {
  flex: 0 0 200px; border-right: 1px solid var(--border);
  padding: 14px 12px; overflow-y: auto;
  background: var(--bg, rgba(0,0,0,0.15));
}
.pe-preview-sidebar-label {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600; padding: 0 6px 8px;
}
.pe-preview-day-list { display: flex; flex-direction: column; gap: 2px; }
.pe-preview-day-item {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 10px; border-radius: 5px;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: inherit; color: var(--text); width: 100%;
}
.pe-preview-day-item:hover { background: var(--surface-2, rgba(255,255,255,0.04)); }
.pe-preview-day-item.active { background: var(--surface-2, rgba(255,255,255,0.07)); }
.pe-preview-day-name { font-size: var(--fs-sm); font-weight: 500; }
.pe-preview-day-type {
  font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted);
}
.pe-preview-phone-wrap {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: linear-gradient(135deg, rgba(0,0,0,0.25), rgba(0,0,0,0.05));
  overflow: hidden;
}
.pe-preview-phone {
  width: 360px; height: 720px; border-radius: 38px;
  background: #0d0e12; border: 8px solid #16181f;
  box-shadow: 0 30px 70px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.03);
  overflow: hidden; position: relative;
  display: flex; flex-direction: column;
}
.pe-preview-app {
  flex: 1 1 auto; display: flex; flex-direction: column;
  background: #0d0e12; color: #e6e8ef; min-height: 0; overflow: hidden;
}
.pe-preview-app-statusbar {
  height: 22px; flex: 0 0 auto;
  background: radial-gradient(circle at 50% 14px, #000 0 9px, transparent 9px);
}
.pe-preview-app-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 18px;
}
.pe-preview-back { font-size: 22px; color: #6b7090; line-height: 1; }
.pe-preview-app-title { font-size: 15px; font-weight: 600; color: #e6e8ef; }
.pe-preview-app-meta { padding: 2px 18px 12px; }
.pe-preview-app-prog { font-size: 12px; color: #6b7090; letter-spacing: 0.02em; }
.pe-preview-app-stats { font-size: 12.5px; color: #8c91aa; margin-top: 2px; }
.pe-preview-app-body {
  flex: 1 1 auto; overflow-y: auto; padding: 0 18px 18px;
}
.pe-preview-section { margin-top: 16px; }
.pe-preview-section-name {
  font-size: 10.5px; letter-spacing: 0.1em; color: #6b7090; font-weight: 600;
  margin-bottom: 8px;
}
.pe-preview-ex {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
}
.pe-preview-ex-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.pe-preview-ex-name { font-size: 14px; font-weight: 500; color: #e6e8ef; display: flex; align-items: center; gap: 6px; }
.pe-preview-ss {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px;
  font-size: 10px; font-weight: 600;
  background: rgba(124,92,255,0.18); color: #b9a7ff;
}
.pe-preview-ex-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; color: #6b7090; border: 1px solid rgba(107,112,144,0.4);
  font-style: italic; font-family: Georgia, serif;
}
.pe-preview-ex-meta { font-size: 12px; color: #8c91aa; margin-top: 4px; }
.pe-preview-ex-notes {
  font-size: 11.5px; color: #8c91aa; margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.06);
}
.pe-preview-app-cta {
  padding: 14px 18px 22px; border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.4);
}
.pe-preview-app-startbtn {
  width: 100%; padding: 14px; border-radius: 12px;
  background: var(--primary, #2557d6); color: #fff;
  border: 0; font-weight: 600; font-size: 14px;
  cursor: pointer;
  transition: filter 0.12s;
}
.pe-preview-app-startbtn:hover:not(:disabled) { filter: brightness(1.08); }
.pe-preview-app-startbtn:disabled {
  background: #4a4f6a; color: #b8bcd0;
  cursor: not-allowed; opacity: 0.7;
}

/* Active-logging preview screen */
.pe-preview-app-topbar--active {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 12px;
}
.pe-preview-back--btn {
  background: transparent; border: 0; padding: 0 6px;
  font-size: 28px; line-height: 1; color: #6b7090; cursor: pointer;
}
.pe-preview-back--btn:hover { color: #e6e8ef; }
.pe-preview-active-title {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.pe-preview-active-timer {
  font-size: 11.5px; color: #6b7090; font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pe-preview-active-ex {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 12px 14px; margin-top: 12px;
}
.pe-preview-active-ex-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.pe-preview-active-ex-name {
  font-size: 14px; font-weight: 500; color: #e6e8ef;
  display: flex; align-items: center; gap: 6px;
}
.pe-preview-active-ex-meta {
  font-size: 11.5px; color: #8c91aa; margin-top: 4px;
}
.pe-preview-set-header {
  display: grid;
  grid-template-columns: 24px 1fr 1fr 38px 28px;
  gap: 8px; align-items: center;
  margin-top: 10px; padding: 0 2px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pe-preview-set-h {
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #6b7090; font-weight: 600; text-align: center;
}
.pe-preview-set-h.pe-preview-set-num { text-align: center; }
.pe-preview-set-row {
  display: grid;
  grid-template-columns: 24px 1fr 1fr 38px 28px;
  gap: 8px; align-items: center;
  padding: 8px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pe-preview-set-row:last-child { border-bottom: 0; }
.pe-preview-set-num {
  font-size: 12px; color: #6b7090; text-align: center;
  font-variant-numeric: tabular-nums;
}
.pe-preview-set-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px; padding: 6px 4px;
  font-size: 12.5px; color: #e6e8ef; text-align: center;
  width: 100%; box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.pe-preview-set-input::placeholder { color: rgba(140,145,170,0.5); }
.pe-preview-set-input--sm { font-size: 12px; }
.pe-preview-set-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(140,145,170,0.4);
  display: inline-block; margin: 0 auto;
}
.pe-preview-app-cta-note {
  font-size: 10.5px; color: #6b7090; margin-top: 8px; text-align: center;
}
.pe-preview-rest {
  flex: 1 1 auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  padding: 40px;
}
.pe-preview-rest-icon { font-size: 56px; color: #4a4f6a; }
.pe-preview-rest-title { font-size: 18px; font-weight: 600; color: #e6e8ef; }
.pe-preview-rest-sub { font-size: 13px; color: #6b7090; }
.pe-preview-empty { padding: 40px; text-align: center; color: var(--text-muted); }

/* ── Chip input (Details modal: tags + equipment) ── */
/* A bordered input row that holds N chips + a free text field. Type +
   press Enter or comma to add a chip; click × on a chip to remove; press
   Backspace on an empty input to nuke the last chip. Click anywhere in
   the row to focus the input. Replaces the old comma-separated text
   inputs that made coaches manage punctuation manually. */
.chip-input {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  min-height: 38px;
  background: var(--input-bg, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: text;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.chip-input:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-dim, rgba(37, 87, 214,0.15));
}
.chip-input-list {
  display: contents;
}
.chip-input .chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 9px;
  font-size: var(--fs-xs);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip-input .chip-x {
  background: transparent; border: 0;
  color: var(--text-muted);
  font-size: 16px; line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  border-radius: 50%;
}
.chip-input .chip-x:hover { color: var(--danger); background: var(--danger-dim, rgba(239,68,68,0.12)); }
.chip-input-field {
  flex: 1 1 100px;
  min-width: 100px;
  border: 0;
  background: transparent;
  padding: 4px 2px;
  font-size: var(--fs-sm);
  color: var(--text);
  outline: none;
  font-family: inherit;
}
.chip-input-field::placeholder { color: var(--text-subtle); }

/* Inline form help text — small muted line under an input that explains
   what the field is for / where it surfaces. Used in the Details modal. */
.form-help {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 6px;
}

/* ── Scheduling / availability editor ──────────────────────── */
.settings-subhead {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}

.sched-day-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: start;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.sched-day-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
}
.sched-day-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}
.sched-day-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sched-day-slots--disabled {
  opacity: 0.4;
  pointer-events: none;
}
.sched-day-empty {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-style: italic;
}
.sched-slot-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sched-slot-row input[type="time"] {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-xs);
  font-family: inherit;
}
.sched-slot-dash {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.sched-slot-remove {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 3px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sched-slot-remove:hover {
  border-color: var(--text-muted);
  color: var(--text);
}
.sched-slot-add {
  align-self: flex-start;
  font-size: var(--fs-xs);
  padding: 3px 8px;
}

/* ── Calendar Sync settings ────────────────────────────────── */
.cs-cal-list {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px; background: var(--surface);
}
.cs-cal-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 4px; cursor: pointer;
  transition: background 0.12s;
}
.cs-cal-row:hover { background: var(--surface-2); }
.cs-cal-swatch {
  width: 12px; height: 12px; border-radius: 6px;
  background: var(--text-muted); flex-shrink: 0;
}
.cs-cal-name {
  font-size: var(--fs-xs); color: var(--text);
}
.cs-select {
  width: 100%;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: var(--fs-xs);
}

.cs-wizard-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; padding: 16px;
}
.cs-wizard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; max-width: 480px; width: 100%;
  max-height: 90vh; overflow-y: auto;
}
.cs-wizard-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.cs-wizard-close {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px;
}
.cs-wizard-close:hover { color: var(--text); }
.cs-wizard-body { padding: 18px 20px 20px; }
.cs-wizard-providers {
  display: flex; flex-direction: column; gap: 8px;
}
.cs-wizard-provider {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 14px 16px; border-radius: 8px;
  cursor: pointer; font-size: var(--fs-sm); transition: border-color 0.12s, background 0.12s;
}
.cs-wizard-provider:hover:not(:disabled) {
  border-color: var(--text-muted); background: var(--surface);
}
.cs-wizard-provider:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Calendar (coach top-level) ───────────────────────────── */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cal-nav-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: var(--fs-xs);
}
.cal-nav-btn:hover { border-color: var(--text-muted); }
.cal-date-label {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  min-width: 200px;
  text-align: center;
}
.cal-view-switch {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.cal-view-switch button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 4px 12px;
  font-size: var(--fs-xs);
  cursor: pointer;
}
.cal-view-switch button.active {
  background: var(--surface-2);
  color: var(--text);
}
.cal-week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 18px;
}
.cal-week-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s;
}
.cal-week-day:hover { border-color: var(--text-muted); }
.cal-week-day.is-today { border-color: var(--primary); }
.cal-week-day.is-selected { background: var(--surface-2); border-color: var(--text); }
.cal-week-day-name {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 2px;
}
.cal-week-day-date {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.cal-week-day-count {
  font-size: 10px;
  color: var(--text-muted);
}
.cal-week-day-count.has {
  color: var(--primary);
  font-weight: 600;
}

.cal-day-grid {
  display: grid;
  grid-template-columns: 60px 1fr;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
  position: relative;
}
.cal-hour-label {
  padding: 6px 8px;
  font-size: 10px;
  color: var(--text-muted);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: right;
  height: 60px;
  box-sizing: border-box;
}
.cal-hour-slot {
  height: 60px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.cal-session-block {
  position: absolute;
  left: 4px;
  right: 4px;
  background: var(--primary-dim, rgba(59, 130, 246, 0.14));
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  overflow: hidden;
  z-index: 2;
  transition: background 0.12s;
}
.cal-session-block:hover { background: var(--brand-soft-hover, rgba(59, 130, 246, 0.22)); }
.cal-session-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-session-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.cal-empty-day {
  grid-column: 1 / -1;
  padding: 36px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.cal-google-block {
  position: absolute;
  background: var(--surface-2);
  border-left: 3px solid var(--text-muted);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  opacity: 0.85;
}
.cal-google-block:hover { opacity: 1; }
.cal-google-name {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-google-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

.cal-allday-banner {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  background: var(--surface-2);
  border-radius: 4px;
  z-index: 3;
  height: 18px;
  overflow: hidden;
}
.cal-allday-dot {
  width: 8px; height: 8px; border-radius: 4px;
  background: var(--text-muted);
  flex-shrink: 0;
}
.cal-allday-text {
  font-size: 10px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Slot can be clicked to create a new event in that hour */
.cal-hour-slot { cursor: pointer; transition: background 0.12s; }
.cal-hour-slot:hover { background: var(--surface-2); }

/* New / edit event modal */
.cal-evt-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; padding: 16px;
}
.cal-evt-overlay.hidden { display: none; }
.cal-evt-modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; max-width: 520px; width: 100%;
  max-height: 90vh; overflow-y: auto;
}
.cal-evt-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
  font-size: var(--fs-md); font-weight: 600; color: var(--text);
}
.cal-evt-close {
  background: transparent; border: none; color: var(--text-muted);
  font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px;
}
.cal-evt-close:hover { color: var(--text); }
.cal-evt-body {
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.cal-evt-label {
  font-size: 11px; letter-spacing: 0.6px; font-weight: 600;
  text-transform: uppercase; color: var(--text-muted);
  margin-top: 4px; margin-bottom: 4px;
}
.cal-evt-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
  font-size: var(--fs-xs); font-family: inherit;
}
.cal-evt-input:focus { outline: none; border-color: var(--text-muted); }
.cal-evt-row {
  display: flex; gap: 12px;
}
.cal-evt-footer {
  display: flex; align-items: center; gap: 8px; justify-content: flex-end;
  padding: 14px 20px; border-top: 1px solid var(--border);
}

/* Session detail panel (right side) */
.cal-detail-panel {
  width: 360px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 18px 20px;
  overflow-y: auto;
}
.cal-detail-empty {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
  margin-top: 60px;
}

/* ─────────────────────────────────────────────────────────────────
   Google-Calendar-style Coach Calendar — gcal-*
   ───────────────────────────────────────────────────────────────── */
#view-calendar { padding: 14px !important; flex: 1; min-height: 0; display: none; flex-direction: column; }
#view-calendar:not(.hidden) { display: flex; }

.gcal-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  background: var(--bg);
  overflow: hidden;
}

/* ── SIDEBAR ─────────────────────────────────────────────────── */
.gcal-sidebar {
  width: 256px;
  flex-shrink: 0;
  background: var(--bg);
  padding: 16px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gcal-sidebar.is-collapsed { display: none; }

.gcal-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  align-self: flex-start;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: box-shadow 0.12s, background 0.12s;
}
.gcal-create-btn:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.12); background: var(--surface-2); }
.gcal-create-btn svg { color: var(--primary); }

/* Mini month */
.gcal-mini-month {
  font-size: 11px;
  user-select: none;
}
.gcal-mm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 0 4px;
}
.gcal-mm-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.gcal-mm-nav {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gcal-mm-nav:hover { background: var(--surface-2); }
.gcal-mm-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.gcal-mm-dow {
  text-align: center;
  font-size: 10px;
  color: var(--text-muted);
  padding: 4px 0;
  font-weight: 500;
}
.gcal-mm-cell {
  text-align: center;
  font-size: 11px;
  color: var(--text);
  padding: 4px 0;
  cursor: pointer;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.gcal-mm-cell.is-other { color: var(--text-muted); opacity: 0.55; }
.gcal-mm-cell:hover { background: var(--surface-2); }
.gcal-mm-cell.is-today {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
.gcal-mm-cell.is-selected:not(.is-today) {
  background: var(--primary-dim, rgba(59,130,246,0.18));
  color: var(--primary);
  font-weight: 600;
}

/* Sections (My calendars / Other calendars) */
.gcal-section { display: flex; flex-direction: column; gap: 4px; }
.gcal-section-header {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  padding: 6px 8px;
}
.gcal-cal-list { display: flex; flex-direction: column; gap: 0; }
.gcal-cal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.gcal-cal-row:hover { background: var(--surface-2); }
.gcal-cal-check {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 2px solid var(--text-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #fff;
}
.gcal-cal-check.is-on { border-color: transparent; }
.gcal-cal-check.is-on svg { display: block; }
.gcal-cal-check svg { display: none; }
.gcal-cal-name {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── MAIN ─────────────────────────────────────────────────────── */
.gcal-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: transparent;
}

.gcal-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  flex-shrink: 0;
  background: var(--bg);
  position: relative;
  z-index: 5;
}
.gcal-toggle-sidebar {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gcal-toggle-sidebar:hover { background: var(--surface-2); color: var(--text); }
.gcal-today-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 18px;
  border-radius: 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.gcal-today-btn:hover { background: var(--surface-2); }
.gcal-icon-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gcal-icon-btn:hover { background: var(--surface-2); color: var(--text); }
.gcal-title {
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  margin: 0 4px 0 8px;
  letter-spacing: -0.2px;
}
.gcal-week-badge {
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 10px;
}
.gcal-week-badge:empty { display: none; }

.gcal-view-picker { position: relative; }
.gcal-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 8px 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  min-width: 96px;
  justify-content: space-between;
}
.gcal-view-btn:hover { background: var(--surface-2); }
.gcal-view-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.16);
  min-width: 140px;
  z-index: 100;
  padding: 4px 0;
  overflow: hidden;
}
.gcal-view-menu.hidden { display: none; }
.gcal-view-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
}
.gcal-view-opt:hover { background: var(--surface-2); }
.gcal-view-opt.is-active {
  background: var(--primary-dim, rgba(59,130,246,0.18));
  color: var(--primary);
  font-weight: 500;
}

/* ── VIEW CONTAINER ──────────────────────────────────────────── */
.gcal-view-container {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
}

/* ── TIMELINE VIEW (Day / 3 Day / Week) ──────────────────────── */
/* Single scroll container so the fixed (headers + all-day) and the
   scrolling time grid share the same available width. Without this,
   the body's scrollbar narrows it relative to the fixed rows above
   and the column dividers stop aligning. */
.gcal-tl {
  flex: 1;
  min-height: 0;
  background: var(--surface);
  overflow-y: auto;
  position: relative;
}
.gcal-tl-fixed {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
}
.gcal-tl-headers {
  display: grid;
  background: var(--surface);
}
.gcal-tl-corner {
  /* No border-right — day-header row has no vertical dividers. The
     gutter/column dividers start at the all-day row below. */
}
.gcal-tl-day-head {
  padding: 10px 8px 12px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.gcal-tl-day-head:hover { background: var(--surface-2); }
.gcal-tl-dow {
  font-size: 11px;
  letter-spacing: 0.8px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  font-family: 'Google Sans', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.gcal-tl-num {
  font-size: 25px;
  font-weight: 400;
  color: var(--text);
  line-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-family: 'Google Sans', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.gcal-tl-day-head.is-today .gcal-tl-dow { color: var(--primary); font-weight: 700; }
.gcal-tl-day-head.is-today .gcal-tl-num {
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}

.gcal-tl-allday {
  display: grid;
  border-bottom: 1px solid var(--border);
  min-height: 30px;
  flex-shrink: 0;
  background: var(--surface);
}
.gcal-tl-allday-corner {
  border-right: 1px solid var(--border);
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 6px 0;
  text-align: right;
}
.gcal-tl-allday-col {
  border-right: 1px solid var(--border);
  padding: 4px 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 30px;
}
.gcal-tl-allday-col:last-child { border-right: none; }
.gcal-tl-allday-pill {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 15px;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font-family: 'Google Sans Text', 'Google Sans', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.gcal-tl-grid {
  display: grid;
  position: relative;
}
.gcal-tl-times {
  position: relative;
  border-right: 1px solid var(--border);
}
.gcal-tl-time-label {
  position: absolute;
  right: 8px;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--surface);
  padding: 0 2px;
  transform: translateY(-7px);
}
.gcal-tl-col {
  position: relative;
  border-right: 1px solid var(--border);
}
.gcal-tl-col:last-child { border-right: none; }
.gcal-tl-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--border);
}
.gcal-tl-event {
  position: absolute;
  border-radius: 4px;
  padding: 4px 8px 4px 8px;
  cursor: grab;
  overflow: hidden;
  box-sizing: border-box;
  transition: filter 0.12s;
  z-index: 2;
  font-family: 'Google Sans Text', 'Google Sans', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  touch-action: none;
}
.gcal-tl-event:hover { filter: brightness(0.94); }
/* Past events darken in place via filter — using opacity makes the
   grid show through, which Google's calendar avoids. */
.gcal-tl-event.is-past { filter: brightness(0.7) saturate(0.85); }
.gcal-tl-event.is-past:hover { filter: brightness(0.78) saturate(0.95); }
.gcal-tl-resize-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  cursor: ns-resize;
  z-index: 3;
  background: transparent;
}
.gcal-tl-event-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gcal-tl-event-time {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1px;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gcal-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #ea4335;
  z-index: 5;
  pointer-events: none;
}
.gcal-now-line::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ea4335;
}

.gcal-tl-empty-slot {
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
}
.gcal-tl-empty-slot:hover { background: rgba(0, 0, 0, 0.02); }

/* ── SCHEDULE VIEW ──────────────────────────────────────────── */
.gcal-schedule {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px 80px;
}
.gcal-sch-day {
  display: flex;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.gcal-sch-date-col {
  width: 90px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.gcal-sch-num {
  font-size: 26px;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.gcal-sch-num.is-today {
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}
.gcal-sch-dow {
  font-size: 11px;
  letter-spacing: 0.6px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}
.gcal-sch-events { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.gcal-sch-evt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  background: var(--surface-2);
  transition: background 0.12s;
}
.gcal-sch-evt:hover { background: var(--surface); }
.gcal-sch-evt-dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}
.gcal-sch-evt-time {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1px;
  line-height: 15px;
  color: var(--text-muted);
  width: 130px;
  flex-shrink: 0;
  font-family: 'Google Sans Text', 'Google Sans', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.gcal-sch-evt-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Google Sans Text', 'Google Sans', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.gcal-sch-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-muted);
}

/* ── MONTH VIEW ─────────────────────────────────────────────── */
.gcal-month {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
}
.gcal-mv-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.gcal-mv-dow {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.6px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 8px 0 4px;
  border-right: 1px solid var(--border);
}
.gcal-mv-dow:last-child { border-right: none; }

.gcal-mv-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.gcal-mv-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex: 1;
  border-bottom: 1px solid var(--border);
  min-height: 0;
}
.gcal-mv-week:last-child { border-bottom: none; }
.gcal-mv-cell {
  border-right: 1px solid var(--border);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.gcal-mv-cell:last-child { border-right: none; }
.gcal-mv-cell:hover { background: var(--surface-2); }
.gcal-mv-cell.is-other { color: var(--text-muted); opacity: 0.5; }
.gcal-mv-num {
  font-size: 12px;
  color: var(--text);
  text-align: center;
  width: 22px;
  height: 22px;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 2px;
}
.gcal-mv-num.is-today {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
.gcal-mv-bar {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 15px;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font-family: 'Google Sans Text', 'Google Sans', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.gcal-mv-overflow {
  font-size: 10px;
  color: var(--text-muted);
  padding: 1px 5px;
  font-weight: 500;
}

/* ── Pulse Insight (Phase 2 — May 2026) ────────────────────
   At-risk / almost-at-risk / Watchlist / Paused card on the CRM
   client-profile header. Same shape as the mobile detail page
   AtRiskInsight + AlmostAtRiskCard so coaches see one
   consistent picture across surfaces. */
.ph-pulse-insight { margin-top: 14px; }
.ph-pulse-insight:empty { display: none; }
.pulse-card {
  border-radius: 10px;
  border: 1px solid;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
/* Phase 5 — gradient retrofit on "active attention" Pulse cards.
   Settled-state cards (watch, paused) keep flat backgrounds — the
   gradient is reserved for cards demanding the coach's attention. */
.pulse-card--risk {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--danger) 16%, transparent),
    color-mix(in srgb, var(--danger) 4%, transparent));
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}
.pulse-card--almost {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--warning) 16%, transparent),
    color-mix(in srgb, var(--warning) 4%, transparent));
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}
.pulse-card--watch {
  /* Settled state — flat. */
  background: color-mix(in srgb, var(--info, var(--accent)) 10%, transparent);
  border-color: color-mix(in srgb, var(--info, var(--accent)) 32%, transparent);
}
.pulse-card--paused {
  /* Settled state — flat. */
  background: var(--surface-2, var(--surface));
  border-color: var(--border);
}
.pulse-card--surge {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--success) 14%, transparent),
    color-mix(in srgb, var(--success) 3%, transparent));
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
}
/* Phase 5 — gold milestone celebration card. Highest attention
   slot. Earned-achievement color. Used sparingly. */
.pulse-card--milestone {
  background: linear-gradient(135deg, #d4a23a26, #d4a23a08);
  border-color: #d4a23a55;
}
.ph-milestone-celebration { margin-top: 12px; }
.pulse-card-title--milestone {
  color: #ecc878;
  display: flex; align-items: center; gap: 8px;
}
.pulse-milestone-badge {
  font-size: 14px; line-height: 1;
}
.pulse-milestone-headline {
  font-size: 18px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
  margin-top: 2px;
}
.pulse-milestone-dismiss {
  background: transparent; border: 0;
  color: var(--text-muted);
  font-size: 18px; line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.pulse-milestone-dismiss:hover { color: var(--text); }

/* Phase 5 — trophy case grid. */
.ph-trophy-case { margin-top: 12px; }
.trophy-case-card {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.trophy-case-eyebrow {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
}
.trophy-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
}
.trophy-tile {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid #d4a23a55;
  background: linear-gradient(135deg, #d4a23a1f, transparent);
  padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  cursor: default;
}
.trophy-tile-badge {
  font-size: 22px; line-height: 1;
}
.trophy-tile-label {
  font-size: 9px; font-weight: 700;
  color: var(--text);
  text-align: center;
  letter-spacing: -0.05px;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trophy-case-more {
  font-size: 11px; color: var(--text-muted);
  text-align: center;
}
.pulse-card-head {
  display: flex; justify-content: space-between; align-items: center;
}
.pulse-card-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.pulse-card-title--risk    { color: var(--danger); display: flex; align-items: center; gap: 6px; }
.pulse-card-title--almost  { color: var(--warning); }
.pulse-card-title--surge   { color: var(--success); display: flex; align-items: center; gap: 6px; }
.pulse-card-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 800;
}
.pulse-card-meta {
  font-size: 11px; color: var(--text-muted); font-weight: 600;
  letter-spacing: 0.04em;
}
.pulse-card-body {
  font-size: 13px; color: var(--text-secondary, var(--text-muted));
  line-height: 1.5;
}
.pulse-card-reasons,
.pulse-card-warnings {
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 6px;
  padding: 10px 12px;
}
.pulse-reason-headline,
.pulse-warning-headline {
  font-size: 13px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pulse-reason-detail,
.pulse-warning-clearing {
  font-size: 11px; color: var(--text-muted); margin-top: 2px;
}
.pulse-warning {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 18%, transparent);
}
.pulse-warning:last-child { border-bottom: 0; }
.pulse-warning-clearing {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--warning); margin: 0; white-space: nowrap;
}
.pulse-delta-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
}
.pulse-delta-chip--down {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 16%, transparent);
}
.pulse-delta-chip--up {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 16%, transparent);
}
.pulse-card-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.pulse-card-actions .btn-primary,
.pulse-card-actions .btn-secondary {
  flex: 1; min-width: 120px;
}
.pulse-card-footer {
  font-size: 10px; color: var(--text-muted);
  text-align: center; line-height: 1.4;
}

/* ── Phase 4 Item 2 (second half) — Avg reply chip ───────────── */
.ph-pulse-comms { margin-top: 6px; }
.pulse-comms-line {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
}
.pulse-comms-icon  { font-size: 12px; opacity: 0.85; }
.pulse-comms-label { font-weight: 700; }
.pulse-comms-window {
  margin-left: auto;
  font-size: 10px; font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
}
.pulse-comms-line.reply-fast .pulse-comms-icon,
.pulse-comms-line.reply-fast .pulse-comms-label { color: var(--success); }
.pulse-comms-line.reply-mid  .pulse-comms-icon,
.pulse-comms-line.reply-mid  .pulse-comms-label { color: var(--text-secondary, var(--text)); }
.pulse-comms-line.reply-slow .pulse-comms-icon,
.pulse-comms-line.reply-slow .pulse-comms-label { color: var(--warning); }

/* ── Phase 4 Item 4 — Recent client notes (CRM) ──────────────── */
.ph-shared-notes { margin-top: 12px; }
.shared-notes-card {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.shared-notes-eyebrow {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
}
.shared-notes-list {
  display: flex; flex-direction: column;
}
.shared-note-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.shared-note-row:last-child { border-bottom: 0; }
.shared-note-body { flex: 1; min-width: 0; }
.shared-note-headline {
  font-size: 13px; font-weight: 700; color: var(--text);
  letter-spacing: -0.1px;
}
.shared-note-text {
  font-size: 12px; line-height: 1.5;
  color: var(--text-secondary, var(--text-muted));
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shared-note-date {
  font-size: 10px; color: var(--text-muted); margin-top: 4px;
  letter-spacing: 0.04em;
}
.shared-note-review-btn {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.shared-note-review-btn:hover {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
}


/* ============================================================
   OPERATIONS ADMIN BANNER (Phase 3.1 Session 3)
   Owner-only platform-status banner above the app-layout. Hidden
   by default; _checkOwnerOpsBanner in app.js populates and unhides
   it when there are active warn/incident attention items.
   ============================================================ */
.ops-admin-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  font-size: 13px;
  line-height: 1.4;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.10);
  border-bottom: 1px solid rgba(251, 191, 36, 0.35);
}
.ops-admin-banner.danger {
  color: #f87171;
  background: rgba(248, 113, 113, 0.10);
  border-bottom-color: rgba(248, 113, 113, 0.40);
}
.ops-admin-banner.hidden { display: none; }
.ops-admin-banner .glyph { font-size: 16px; flex: 0 0 auto; }
.ops-admin-banner .body { flex: 1 1 auto; min-width: 0; }
.ops-admin-banner .body strong { font-weight: 600; }
.ops-admin-banner .body .sub { color: var(--text-muted); font-size: 12px; }
.ops-admin-banner .ops-banner-link {
  flex: 0 0 auto;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid currentColor;
  border-radius: 6px;
  opacity: 0.85;
}
.ops-admin-banner .ops-banner-link:hover { opacity: 1; }
.ops-admin-banner .ops-banner-dismiss {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: 0.6;
  padding: 4px 6px;
}
.ops-admin-banner .ops-banner-dismiss:hover { opacity: 1; }

/* ============================================================
   COACH BROADCAST BANNER STACK (Phase 3.1 Session 4)
   One banner per active platform_broadcasts row. Stack lives
   above .app-layout, same width as ops-admin-banner. Severity
   maps: info → blue, warn → amber, incident → red. Markdown
   body renders inline (escape + bold + italic + link + <br>).
   ============================================================ */
.coach-broadcasts-banner-stack.hidden { display: none; }
.coach-broadcast-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px;
  font-size: 13px;
  line-height: 1.45;
  color: #ffffff;
  background: #2563eb;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.coach-broadcast-banner.warn {
  color: #ffffff;
  background: #d97706;
}
.coach-broadcast-banner.incident {
  color: #ffffff;
  background: #dc2626;
}
.coach-broadcast-banner .glyph { font-size: 16px; flex: 0 0 auto; padding-top: 1px; }
.coach-broadcast-banner .content { flex: 1 1 auto; min-width: 0; }
.coach-broadcast-banner .title { font-weight: 600; margin-bottom: 2px; color: #ffffff; }
.coach-broadcast-banner .body { color: #ffffff; font-size: 12.5px; opacity: 0.95; }
.coach-broadcast-banner .body a { color: #ffffff; text-decoration: underline; }
.coach-broadcast-banner .cta {
  flex: 0 0 auto;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid currentColor;
  border-radius: 6px;
  opacity: 0.9;
  align-self: center;
}
.coach-broadcast-banner .cta:hover { opacity: 1; }
.coach-broadcast-banner .dismiss {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  opacity: 0.55;
  padding: 4px 6px;
  align-self: center;
}
.coach-broadcast-banner .dismiss:hover { opacity: 1; }

/* ============================================================
   PLATFORM STATUS PAGE (Phase 3.1 Session 3)
   Coach-facing status page. Layout follows status.claude.com's
   structure: hero banner → service grid with 90-day strips →
   recent incidents.
   ============================================================ */
.status-page-shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 8px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.status-loading {
  padding: 60px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Hero banner */
.status-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.30);
  border-left: 4px solid #4ade80;
  border-radius: 12px;
}
.status-hero.warn   { background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.30); border-left-color: #fbbf24; }
.status-hero.danger { background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.30); border-left-color: #f87171; }
.status-hero-disc {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #4ade80;
  display: flex; align-items: center; justify-content: center;
  color: var(--bg);
  font-size: 24px; font-weight: 700;
  flex: 0 0 auto;
}
.status-hero.warn   .status-hero-disc { background: #fbbf24; }
.status-hero.danger .status-hero-disc { background: #f87171; }
.status-hero-body { flex: 1 1 auto; min-width: 0; }
.status-hero-title { font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -0.012em; }
.status-hero-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.status-hero-meta { font-size: 11px; color: var(--text-muted); text-align: right; flex: 0 0 auto; }

/* Service list */
.status-services {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.status-service-row {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.status-service-row:last-child { border-bottom: none; }
.status-service-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.status-service-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  letter-spacing: -0.005em;
}
.status-service-pill {
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(74,222,128,0.16); color: #4ade80;
}
.status-service-pill.warn   { background: rgba(251,191,36,0.16); color: #fbbf24; }
.status-service-pill.danger { background: rgba(248,113,113,0.16); color: #f87171; }
.status-service-pill.muted  { background: var(--surface-2); color: var(--text-muted); }

/* 90-day uptime strip */
.status-strip {
  display: flex;
  gap: 2px;
  height: 28px;
}
.status-strip-cell {
  flex: 1 1 0;
  min-width: 3px;
  background: #4ade80;
  border-radius: 2px;
  position: relative;
  cursor: default;
  transition: opacity 0.15s;
}
.status-strip-cell:hover { opacity: 0.7; }
.status-strip-cell.warn     { background: #fbbf24; }
.status-strip-cell.incident { background: #f87171; }
.status-strip-cell.error    { background: #6b7280; }
.status-strip-cell.no-data  { background: var(--surface-2); opacity: 0.5; }
.status-strip-foot {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-size: 10px; color: var(--text-muted);
  letter-spacing: 0.04em;
}
.status-strip-rollup {
  color: #4ade80; font-weight: 600;
}
.status-strip-rollup.warn   { color: #fbbf24; }
.status-strip-rollup.danger { color: #f87171; }

/* Incidents */
.status-incidents-section { margin-top: 4px; }
.status-incidents-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}
.status-incidents-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.status-incident-row {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 12px;
}
.status-incident-row:last-child { border-bottom: none; }
.status-incident-glyph {
  flex: 0 0 16px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fbbf24;
  margin-top: 4px;
}
.status-incident-row.incident .status-incident-glyph { background: #f87171; }
.status-incident-body { flex: 1 1 auto; min-width: 0; }
.status-incident-msg {
  font-size: 13px; color: var(--text);
  line-height: 1.4;
}
.status-incident-meta {
  font-size: 11px; color: var(--text-muted);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.status-incidents-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ============================================================
   STATUS PAGE TOOLTIP (status.claude.com-style hover popover)
   Singleton element appended to body, positioned absolute above
   the hovered strip cell. White-card aesthetic on light, surface-2
   on dark, with subtle shadow + rounded corners.
   ============================================================ */
.status-tooltip {
  position: absolute;
  z-index: 9999;
  min-width: 200px;
  max-width: 320px;
  padding: 12px 14px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text, #1f2333);
  pointer-events: none;
  transition: opacity 0.12s;
}
.status-tooltip.hidden { opacity: 0; pointer-events: none; visibility: hidden; }
.status-tooltip-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #1f2333);
  margin-bottom: 8px;
}
.status-tooltip-empty {
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
}
.status-tooltip-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(251, 191, 36, 0.10);
  margin-bottom: 10px;
}
.status-tooltip-status.incident {
  background: rgba(248, 113, 113, 0.12);
}
.status-tooltip-status .glyph {
  font-size: 14px;
  color: #fbbf24;
}
.status-tooltip-status.incident .glyph { color: #f87171; }
.status-tooltip-status .label {
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text, #1f2333);
}
.status-tooltip-status .duration {
  font-size: 11.5px;
  color: var(--text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
}
.status-tooltip-related-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.status-tooltip-related-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.status-tooltip-related-item {
  font-size: 12px;
  color: var(--text, #1f2333);
  line-height: 1.4;
}

/* ── App branding wizard (Settings → App) ─────────────────────
   Uses revfit-design tokens only. Reuses .onb-steps / .btn-* / .form-group. */
#settings-tab-app { max-width: 760px; }
.appwiz-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 0 8px; }
.appwiz-phone { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.appwiz-appicon { width: 72px; height: 72px; border-radius: 17px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: var(--fs-2xl); letter-spacing: -0.02em; background: var(--primary);
  border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.appwiz-appname { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.appwiz-preview-note { font-size: var(--fs-xs); color: var(--text-subtle); }

.appwiz-steps { margin: 14px 0 18px; }
.appwiz-step { cursor: pointer; }
.appwiz-step .onb-step-label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }
.appwiz-step--active .onb-step-icon { background: var(--primary); color: #fff; border-color: var(--primary); }
.appwiz-step--active .onb-step-label { color: var(--text); }
.appwiz-step--done .onb-step-icon { background: var(--success-dim); color: var(--success); border-color: var(--success); }
.appwiz-step--locked { cursor: default; opacity: 0.45; }

.appwiz-pane { padding: 4px 2px 2px; }
.appwiz-h { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; color: var(--text); }
.appwiz-muted { color: var(--text-muted); font-weight: 400; }
.appwiz-hint { margin-top: 12px; font-size: var(--fs-xs); color: var(--text-subtle); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; }

.appwiz-iconrow { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.appwiz-iconpreview { width: 96px; height: 96px; flex-shrink: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.appwiz-iconpreview img { width: 100%; height: 100%; object-fit: cover; }
.appwiz-iconpreview span { font-size: var(--fs-xs); color: var(--text-subtle); text-align: center; padding: 0 6px; }
.appwiz-icondetails { flex: 1; min-width: 240px; }
.appwiz-iconactions { display: flex; gap: 8px; margin-top: 4px; }

/* Store-copy step — label row (label + right-aligned AI redraft), eyebrow labels, count under the textarea. */
.appwiz-deschead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.appwiz-eyebrow { text-transform: uppercase; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.05em; color: var(--text-muted); }
.appwiz-eyebrow .appwiz-muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.appwiz-aibtn { font-size: var(--fs-xs); font-weight: 600; padding: 5px 11px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--primary-dim); border: 1px solid var(--primary); color: var(--primary); transition: filter 150ms, background 150ms; white-space: nowrap; }
.appwiz-aibtn:hover { background: var(--primary); color: #fff; }
.appwiz-aibtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.appwiz-aibtn:disabled { opacity: 0.55; cursor: default; background: var(--primary-dim); color: var(--primary); }
.appwiz-descfoot { display: flex; justify-content: flex-end; margin-top: 5px; }
.appwiz-descfoot .appwiz-muted { font-size: var(--fs-xs); }

.appwiz-radio { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; margin-bottom: 8px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: var(--fs-sm); color: var(--text); }
.appwiz-radio:hover { border-color: var(--text-muted); }
.appwiz-radio input { margin-top: 2px; accent-color: var(--primary); }

/* Numbered "what you do" steps on the Apple/Google panes — scannable + premium. */
.appwiz-steplist { margin: 12px 0 14px; padding: 0; list-style: none; counter-reset: aws; }
.appwiz-steplist li { position: relative; padding: 1px 0 12px 32px; font-size: var(--fs-sm); color: var(--text); line-height: 1.6; counter-increment: aws; }
.appwiz-steplist li:last-child { padding-bottom: 0; }
.appwiz-steplist li::before { content: counter(aws); position: absolute; left: 0; top: 1px; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-dim);
  color: var(--primary); font-size: var(--fs-xs); font-weight: 600; }
/* The injected "Show me how" walkthrough pill sits inline after the step's link. */
.appwiz-steplist .wt-pill { margin-left: 8px; white-space: nowrap; vertical-align: baseline; }

/* Self-confirm checkbox on the Apple/Google steps — "I've done my part". */
.appwiz-attest { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 11px 13px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: var(--fs-sm); color: var(--text); line-height: 1.5; }
.appwiz-attest:hover { border-color: var(--text-muted); }
.appwiz-attest input { margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; }
.appwiz-attest strong { font-weight: 600; }

.appwiz-checklist { list-style: none; padding: 0; margin: 8px 0 0; }
.appwiz-check { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.appwiz-check:last-child { border-bottom: none; }
.appwiz-check-ic { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.appwiz-check.ok .appwiz-check-ic { background: var(--success-dim); color: var(--success); }
.appwiz-check.warn .appwiz-check-ic { background: var(--warning-dim); color: var(--warning); }
.appwiz-check-label { color: var(--text); font-weight: 500; }
.appwiz-check-detail { margin-left: auto; color: var(--text-muted); font-size: var(--fs-xs); }

/* App-icon step — mode toggle, real-size preview, design guidance (branding upgrade) */
.appwiz-mode { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin: 4px 0 14px; }
.appwiz-mode-btn { border: none; background: transparent; color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; padding: 8px 14px; cursor: pointer; }
.appwiz-mode-btn:hover { color: var(--text); }
.appwiz-mode-btn.appwiz-mode-on { background: var(--primary-dim); color: var(--primary); }
.appwiz-iconmode-pane { margin-bottom: 4px; }

/* ── Adaptive flow: triage fork, contextual D-U-N-S, merged Connect step ── */
/* Triage — two yes/no questions that drive which steps show. Reuses .appwiz-mode segmented control. */
.appwiz-q { margin: 16px 0; }
.appwiz-q-label { font-size: var(--fs-sm); color: var(--text); line-height: 1.5; margin-bottom: 8px; }
.appwiz-seg { margin: 0; }
.appwiz-triage-note { margin-top: 16px; font-size: var(--fs-sm); line-height: 1.5; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); }
.appwiz-triage-note.ok { background: var(--success-dim); border-color: transparent; color: var(--success); font-weight: 500; }

/* D-U-N-S step — "search first" framing in two guidance cards. */
.appwiz-dunscard { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.appwiz-dunscard-h { font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-bottom: 2px; }
.appwiz-dunscard .settings-note { margin: 4px 0 8px; }
.appwiz-dunscard .stores-link { margin: 2px 0 0; }

/* Connect step — one Apple block + one Google block, grouped by a flat bordered panel. */
.appwiz-connblock { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.appwiz-connhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.appwiz-connname { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
/* Recoverable escape — flip "I have / I don't have this account" inline, without leaving the step. */
.appwiz-flip { display: inline-block; margin-top: 10px; padding: 0; background: none; border: none; cursor: pointer;
  font-size: var(--fs-xs); color: var(--text-muted); }
.appwiz-flip:hover { color: var(--primary); text-decoration: underline; }
.appwiz-flip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }
/* Copyable value (Apple email / Google service account) — value chip + Copy button on one row. */
.appwiz-copyfield { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 8px 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.appwiz-copyfield code { flex: 1; min-width: 0; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.appwiz-copyfield .stores-copy { flex-shrink: 0; }

.appwiz-realsize { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.appwiz-realsize-h { font-size: var(--fs-sm); font-weight: 500; color: var(--text); margin-bottom: 12px; }
.appwiz-realsize-row { display: flex; gap: 26px; align-items: flex-end; flex-wrap: wrap; }
.appwiz-rs-cell { text-align: center; }
.appwiz-rs-icon { display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--surface-2); background-size: cover; background-position: center; }
.appwiz-rs-label { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 8px; }

.appwiz-guide { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.appwiz-guide > summary { cursor: pointer; padding: 11px 13px; font-size: var(--fs-sm); font-weight: 500; color: var(--text); list-style: none; }
.appwiz-guide > summary::-webkit-details-marker { display: none; }
.appwiz-guide > summary::before { content: '▸ '; color: var(--text-muted); }
.appwiz-guide[open] > summary::before { content: '▾ '; }
.appwiz-guide--inline > .appwiz-guide-h { padding: 11px 13px 0; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.appwiz-guide-body { padding: 0 13px 13px; }
.appwiz-guide-label { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 10px; }
.appwiz-examples { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.appwiz-ex { text-align: center; }
.appwiz-ex img { width: 56px; height: 56px; border-radius: 13px; border: 1px solid var(--border); display: block; }
.appwiz-ex span { display: block; font-size: 10px; color: var(--text-subtle); margin-top: 5px; max-width: 60px; }
.appwiz-guide-tips { margin: 0 0 10px; padding-left: 18px; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }

.appwiz-ready { margin-top: 12px; font-size: var(--fs-sm); font-weight: 500; padding: 10px 12px; border-radius: var(--radius-sm); }
.appwiz-ready.ok { background: var(--success-dim); color: var(--success); }
.appwiz-ready.warn { background: var(--warning-dim); color: var(--warning); }

.appwiz-nav { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.appwiz-nav-spacer { flex: 1; }


/* Submit step — send button + the post-submit confirmation that replaces it. */
.appwiz-submitrow { margin-top: 16px; }
.appwiz-submitbtn { width: 100%; }
.appwiz-submitted { margin-top: 12px; font-size: var(--fs-sm); font-weight: 500; line-height: 1.55; padding: 12px 14px; border-radius: var(--radius-sm); }
.appwiz-submitted strong { font-weight: 600; }
.appwiz-submitted.ok { background: var(--success-dim); color: var(--success); }
.appwiz-submitted.warn { background: var(--warning-dim); color: var(--warning); }

/* ── Store-accounts checklist (Settings → App) ────────────────── */
.stores-list { display: flex; flex-direction: column; }
.stores-item { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.stores-item:last-child { border-bottom: 0; }
.stores-dot { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; border-radius: 50%; border: 2px solid var(--border); background: transparent; position: relative; }
.stores-dot.ok { border-color: var(--success); background: var(--success); }
.stores-dot.ok::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--bg); }
.stores-main { flex: 1; min-width: 0; }
.stores-title { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.stores-meta { font-size: var(--fs-xs); font-weight: 400; color: var(--text-subtle); margin-left: 6px; }
.stores-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; margin: 4px 0 8px; }
.stores-link { display: inline-block; font-size: var(--fs-sm); color: var(--primary); text-decoration: none; margin-right: 14px; }
.stores-link:hover { text-decoration: underline; }
.stores-link-inline { color: var(--primary); text-decoration: none; white-space: nowrap; }
.stores-link-inline:hover { text-decoration: underline; }
.stores-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text); cursor: pointer; margin-top: 8px; }
.stores-check input { accent-color: var(--primary); }
.stores-namefield { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stores-namefield input { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 8px 11px; font-size: var(--fs-base); min-width: 220px; outline: none; }
.stores-namefield input:focus { border-color: var(--primary); }
/* D-U-N-S — a formal business ID, so give it a premium monospace/tabular feel. */
#stores-duns-input { font-family: ui-monospace, SFMono-Regular, Menlo, "Liberation Mono", monospace;
  font-size: var(--fs-lg); font-weight: 600; letter-spacing: 0.16em; font-variant-numeric: tabular-nums; min-width: 240px; }
#stores-duns-input::placeholder { font-weight: 500; letter-spacing: 0.08em; color: var(--text-subtle); }
.stores-namehint { font-size: var(--fs-sm); color: var(--text-subtle); }
.stores-namehint.ok { color: var(--success); }
.stores-namehint.warn { color: var(--warning); }
.stores-namedisclaimer { margin-top: 8px; font-size: var(--fs-xs); color: var(--text-subtle); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; line-height: 1.5; max-width: 460px; }

/* Store-accounts checklist — verified vs saved dot + cred action row */
.stores-dot.saved { border-color: var(--warning); background: var(--warning); }
.stores-dot.saved::after { content: ''; }
.stores-credactions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stores-connstatus { font-size: var(--fs-sm); color: var(--text-muted); }
.stores-connstatus.ok { color: var(--success); font-weight: 600; }
.stores-copy { font-size: var(--fs-sm); padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; transition: border-color 150ms; }
.stores-copy:hover { border-color: var(--primary); }
.stores-sa { display: flex; align-items: center; margin-top: 8px; }
.stores-sa code { font-size: var(--fs-xs); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 9px; word-break: break-all; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.stores-optional { margin-top: 8px; font-size: var(--fs-xs); }
.stores-optlabel { color: var(--text-muted); }

/* ── In-app walkthrough player (modules/walkthrough.js) ── */
.wt-pill { font-size: var(--fs-xs); padding: 5px 11px; border-radius: 20px; border: 1px solid var(--primary); background: transparent; color: var(--primary); cursor: pointer; transition: background .15s; }
.wt-pill:hover { background: var(--primary-dim); }
.wt-overlay { position: fixed; inset: 0; z-index: 100050; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 14px; }
.wt-panel { width: min(1180px, 97vw); max-height: 95vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.wt-close { margin-left: 2px; background: none; border: 0; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 3px 7px; border-radius: var(--radius-sm); }
.wt-close:hover { color: var(--text); background: var(--surface-2); }
.wt-loading { padding: 24px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }
.wt-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.wt-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.wt-step { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.wt-bar { flex: 1; height: 4px; background: var(--surface-2); border-radius: 20px; overflow: hidden; }
.wt-fill { height: 100%; background: var(--primary); border-radius: 20px; transition: width .35s ease; }
.wt-stage { position: relative; background: var(--surface-2); cursor: pointer; }
.wt-aspect { position: relative; width: 100%; padding-bottom: 62.5%; overflow: hidden; }
.wt-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.wt-redact { position: absolute; background: var(--surface); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border: 1px solid var(--border); border-radius: 4px; z-index: 3; }
.wt-cursor { position: absolute; width: 22px; height: 22px; margin: -2px 0 0 -2px; z-index: 5; transition: left .55s cubic-bezier(.22,.61,.36,1), top .55s cubic-bezier(.22,.61,.36,1); filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); pointer-events: none; }
.wt-ring { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 2px solid var(--primary); border-radius: 50%; opacity: 0; z-index: 4; pointer-events: none; }
.wt-ring.tap { animation: wt-tap .6s ease-out; }
@keyframes wt-tap { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.4); } }
.wt-callout { position: absolute; z-index: 6; transform: translate(-50%, 8px); background: var(--surface); border: 1px solid var(--primary); border-left: 3px solid var(--primary); border-radius: 8px; padding: 6px 10px; font-size: var(--fs-xs); color: var(--text); max-width: 200px; opacity: 0; transition: opacity .2s; pointer-events: none; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.wt-callout.on { opacity: 1; }
.wt-type { position: absolute; z-index: 6; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; border: 1px dashed var(--primary); border-radius: 6px; padding: 4px 7px; background: var(--surface); font-size: var(--fs-xs); color: var(--text-muted); opacity: 0; transition: opacity .2s; }
.wt-type.on { opacity: 1; }
.wt-type b { color: var(--text); }
.wt-copy { font-size: 10px; color: var(--primary); background: none; border: 0; cursor: pointer; }
.wt-branch { padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; background: var(--surface-2); min-height: 180px; justify-content: center; text-align: center; }
.wt-branch-q { font-size: var(--fs-lg); font-weight: 600; color: var(--text); line-height: 1.45; max-width: 480px; letter-spacing: -0.01em; }
.wt-branch-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.wt-branch-btns button { min-width: 140px; }
.wt-cap { padding: 11px 14px; font-size: var(--fs-sm); color: var(--text); line-height: 1.5; border-top: 1px solid var(--border); }
.wt-foot { display: flex; align-items: center; gap: 10px; padding: 9px 14px 12px; }
.wt-truth { flex: 1; font-size: var(--fs-xs); color: var(--text-muted); }
.wt-nav { display: flex; gap: 8px; }
.wt-report { display: block; width: 100%; text-align: center; padding: 7px; font-size: var(--fs-xs); color: var(--text-subtle); background: none; border: 0; border-top: 1px solid var(--border); cursor: pointer; }
.wt-report:hover { color: var(--text-muted); }
.wt-flash { animation: wt-flash 1.6s ease; }
@keyframes wt-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30%, 60% { box-shadow: 0 0 0 4px var(--primary-dim); } }
.wt-author { border-top: 1px dashed var(--primary); padding: 8px 14px; background: var(--primary-dim); }
.wt-authbtns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wt-authbtns button { font-size: var(--fs-xs); padding: 3px 9px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; }
.wt-authbtns button.on { border-color: var(--primary); color: var(--primary); }
.wt-authsp { flex: 1; }
.wt-json { margin: 8px 0 0; max-height: 150px; overflow: auto; font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; color: var(--text); white-space: pre; }
@media (prefers-reduced-motion: reduce) { .wt-cursor { transition: none; } .wt-ring.tap { animation: none; } }


/* ============================================================
   ROSTER REDESIGN (clients view) — FitOps Pro palette + table
   Scoped to #view-clients so the rest of the CRM keeps the current
   revfit-design tokens until the brand rolls out platform-wide.
   Palette locked from the FitOps Pro brand kit (Royal Sapphire /
   Midnight Navy); status reads by SHAPE + label, never colour alone.
   ============================================================ */
#view-clients {
  /* Grounds stay a NEUTRAL off-black / slate (not navy) — high-end dark = a
     neutral canvas + one saturated accent. The brand shows through the Sapphire
     accent and the pulse glyphs, never a tinted background. */
  --bg: #0d1117;
  --surface: #161c27;
  --surface-2: #1e2535;
  --surface-3: #232c3d;
  --surface-hover: #232c3d;
  --thead: #12161d;
  --border: #2a3340;
  --border-strong: #3a4658;
  --border-light: #1e2535;
  --row-line: rgba(255, 255, 255, 0.05);
  --hover-overlay: rgba(255, 255, 255, 0.028);
  --pulse-track: rgba(255, 255, 255, 0.10);

  --text: #e8edf5;
  --text-primary: #e8edf5;
  --text-muted: #9aaabe;
  --text-secondary: #9aaabe;
  --text-subtle: #7a8fa8;
  --muted: #9aaabe;
  --subtle: #7a8fa8;

  /* Royal Sapphire — one accent, used sparingly */
  --primary: #2557d6;
  --primary-hover: #1f4bc0;
  --primary-dim: rgba(37, 87, 214, 0.16);
  --accent: #2557d6;
  --accent-strong: #5a86f5;   /* dark-tuned bright, for dense in-table accents */
  --accent-dim: rgba(37, 87, 214, 0.16);

  --success: #2bbd7e;
  --warning: #f5a524;
  --danger: #f0605a;
  --info: #5a86f5;
  --green: #2bbd7e;  --green-dim: rgba(43, 189, 126, 0.14);  --green-text: #4fd39a;
  --amber: #f5a524;  --amber-dim: rgba(245, 165, 36, 0.14);  --amber-text: #f8bd5f;
  --red: #f0605a;    --red-dim: rgba(240, 96, 90, 0.13);     --red-text: #f6867f;
  --none-ink: #5b6472;

  --shadow-float: 0 8px 26px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ---- table shell ---- */
/* Float the roster as a proper card: breathing room on the sides + bottom so all
   four rounded corners sit against the page background (nothing straight — the
   sidebar border, the footer, the viewport edge — touches the curve). Sides match
   the header's 24px inset so the card lines up with the title/toolbar above it. */
#view-clients .table-wrapper {
  margin: 0 24px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
/* Keep the summary strip + bulk-action bar lined up with the floating card's
   24px inset (they're siblings of the table, not inside the padded header). */
#view-clients .cl-summary-strip { padding-left: 24px; padding-right: 24px; }
#view-clients #bulk-bar { margin-left: 24px; margin-right: 24px; }
#view-clients .table-scroll {
  /* keep the app's flex:1 height sizing; just re-enable horizontal scroll
     (the redesigned table is wider than the pane) and provide a positioning
     context for the sticky header/actions. */
  position: relative;
  overflow: auto;
}
#view-clients .clients-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 13px;
}

/* ---- header ---- */
#view-clients .clients-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 38px;
  padding: 0;
  background: var(--thead);
  border-bottom: 1px solid var(--border-strong);
  border-right: 0;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  user-select: none;
  text-transform: none;
  letter-spacing: 0;
}
#view-clients .clients-table thead th.th-sortable { cursor: pointer; transition: color 150ms, background 150ms; }
#view-clients .clients-table thead th.th-sortable:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
#view-clients .clients-table thead th[style*="center"],
#view-clients .clients-table thead th.th-center { text-align: center; }
#view-clients .clients-table thead th.th-right { text-align: right; }
#view-clients .clients-table thead th[data-sorted="true"] { color: var(--text); }
#view-clients .clients-table thead .sort-arrow { color: var(--accent-strong); font-size: 10px; opacity: 1; }
#view-clients .clients-table thead .sort-arrow--inactive { color: var(--subtle); opacity: 0; transition: opacity 150ms; }
#view-clients .clients-table thead th.th-sortable:hover .sort-arrow--inactive { opacity: 0.5; }
#view-clients .clients-table thead th.th-center .sort-arrow-abs { position: static; }
/* header inner-cell: mirrors the column's content alignment. For right-aligned
   columns the sort arrow renders to the LEFT of the label so the label stays
   flush with the numbers below (research-backed). */
#view-clients .clients-table thead .thc {
  display: flex; align-items: center; gap: 5px;
  height: 38px; padding: 0 12px;
  overflow: hidden; white-space: nowrap;
}
#view-clients .clients-table thead .thc.r { justify-content: flex-end; }
#view-clients .clients-table thead .thc.c { justify-content: center; position: relative; }
/* centered headers: the sort arrow is taken OUT of flow (absolute), so the label
   centres on the column exactly like the centered cell content below it, instead
   of the label+arrow group centring and pushing the label off-centre. */
#view-clients .clients-table thead .thc.c .sort-arrow { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
#view-clients .clients-table thead .thc .thl { overflow: hidden; text-overflow: ellipsis; }
/* "Client" header aligns with the client NAME (past the 36px avatar + 10px gap),
   not the cell edge, so it sits over the names rather than the avatars. */
#view-clients .clients-table thead th.col-name .thc { padding-left: 58px; }

/* resize handle (the app draws it as th::after) */
#view-clients .clients-table th::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 6px; height: 100%;
  cursor: col-resize;
  z-index: 2;
}

/* ---- body rows ---- */
#view-clients .clients-table tbody td {
  padding: 0;
  border-bottom: 1px solid var(--row-line);
  background: transparent;
  overflow: hidden;
  white-space: nowrap;
}
#view-clients .clients-table tbody tr.client-row { cursor: pointer; }
#view-clients .clients-table tbody tr.client-row:hover td { background: var(--hover-overlay); }
#view-clients .clients-table tbody tr:last-child td { border-bottom: 0; }
#view-clients .clients-table tbody tr.row-selected td { background: var(--primary-dim); }
#view-clients .clients-table tbody tr.row-selected td:first-child { box-shadow: inset 3px 0 0 var(--accent-strong); }

/* the flex inner-cell that gives the row its height + alignment */
#view-clients .cl-cin {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 11px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#view-clients .cl-cin.r { justify-content: flex-end; font-variant-numeric: tabular-nums; }
#view-clients .cl-cin.c { justify-content: center; }
#view-clients .cl-cin .txt { overflow: hidden; text-overflow: ellipsis; }
#view-clients .cl-cin .dim,
#view-clients .cl-cin .cell-empty { color: var(--subtle); }
#view-clients tr.row-cancelled .cl-cin { color: var(--muted); }
#view-clients tr.row-cancelled .cl-avatar { opacity: 0.55; }

/* ---- name cell ---- */
#view-clients .cl-avatar {
  width: 36px; height: 36px;
  margin: 0;                 /* kill the legacy .cl-avatar 8px side margins — the
                                .cl-cin gap (10px) is the only spacing, so the name
                                lands exactly at the "Client" header's indent. */
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.94);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  position: relative;
  overflow: visible;
}
#view-clients .cl-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
#view-clients .cl-nophoto {
  position: absolute; right: -2px; bottom: -2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--surface-3); border: 1.5px solid var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--subtle);
}
#view-clients .cl-nophoto svg { width: 9px; height: 9px; }
#view-clients .client-name-link {
  font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  border-radius: 4px;
}
#view-clients .client-name-link:hover { color: var(--text); text-decoration: none; }
#view-clients tr.row-cancelled .client-name-link { color: var(--muted); }

/* ---- pulse column: score ring (number = primary colour-blind-safe signal) ---- */
#view-clients .cl-pulse {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
}
#view-clients .cl-pulse-ring { display: block; }
#view-clients .cl-pulse-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}

/* ---- status / service pills ---- */
#view-clients .badge-status,
#view-clients .badge-service {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px;
  border-radius: 20px;
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
  text-transform: none;
  border: 0;
}
#view-clients .badge-active           { background: var(--green-dim); color: var(--green-text); }
#view-clients .badge-pending_cancellation { background: var(--amber-dim); color: var(--amber-text); }
#view-clients .badge-cancelled        { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
#view-clients .badge-paused           { background: var(--primary-dim); color: var(--accent-strong); }
#view-clients .badge-service          { background: transparent; color: var(--text); font-weight: 500; padding: 0; }
#view-clients .cl-cin .dim.billing    { color: var(--subtle); }

/* ---- renewal flags ---- */
#view-clients .renewal-flag {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--muted);
}
#view-clients .renewal-flag.urgent    { background: var(--red-dim); color: var(--red-text); }
#view-clients .renewal-flag.continuity{ background: var(--green-dim); color: var(--green-text); }
#view-clients .renewal-flag.cancels   { background: var(--amber-dim); color: var(--amber-text); }
#view-clients .text-ok   { color: var(--green-text); }
#view-clients .text-cancel { color: var(--subtle); }

/* ---- checkbox column (bulk select — proven system, kept) ---- */
#view-clients .clients-table .col-check { width: 40px; text-align: center; padding: 0; }
#view-clients .clients-table thead .col-check { z-index: 6; }
#view-clients .clients-table tbody .col-check { vertical-align: middle; }
#view-clients .client-row .row-check { opacity: 0; transition: opacity 150ms; }
#view-clients .client-row:hover .row-check,
#view-clients .client-row.row-selected .row-check,
#view-clients .clients-table thead .col-check input { opacity: 1; }

/* ---- sticky actions column ---- */
#view-clients .clients-table td.col-actions,
#view-clients .clients-table th.col-actions {
  position: sticky; right: 0; z-index: 4;
  display: table-cell;          /* beat the legacy `.col-actions { display:flex }` */
  vertical-align: middle;
  background: var(--surface);
  width: 118px;
}
#view-clients .clients-table th.col-actions { z-index: 6; background: var(--thead); }
#view-clients .clients-table td.col-actions::before,
#view-clients .clients-table th.col-actions::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -12px; width: 12px;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.22));
  pointer-events: none;
}
#view-clients .clients-table tbody tr:hover td.col-actions { background: #171d26; }
#view-clients .clients-table tbody tr.row-selected td.col-actions { background: #182233; }
#view-clients .col-actions .cl-acts {
  display: flex; align-items: center; justify-content: flex-end; gap: 2px;
  padding: 0 8px; min-height: 60px;
  opacity: 0; transition: opacity 150ms;
}
#view-clients .client-row:hover .cl-acts,
#view-clients .cl-acts:focus-within { opacity: 1; }
#view-clients .btn-action-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: transparent; border: 0; border-radius: 6px;
  color: var(--muted); cursor: pointer;
  transition: color 150ms, background 150ms;
}
#view-clients .btn-action-icon:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); }
#view-clients .btn-action-icon--danger:hover { color: var(--red-text); background: var(--red-dim); }

/* ---- empty state ---- */
#view-clients .empty-cell {
  padding: 44px 20px; text-align: center;
  color: var(--subtle); font-size: 13px; white-space: normal;
}


/* ============================================================
   ROSTER FILTER — smart-list chips, builder popover, pills
   ============================================================ */
/* Chips row lives between the search and the toolbar actions; nowrap + overflow
   hidden so chips can NEVER push the buttons to a second row (they collapse into
   the "More" chip instead — see _collapseChips). */
#view-clients .cl-active-filters {
  display: flex; align-items: center; gap: 6px;
  flex: 1 1 0; min-width: 0;
  flex-wrap: nowrap; overflow: hidden;
  margin: 0 4px;
}
/* Chips are the ONLY flex-filler in the header row so they have a defined width
   to collapse against — the title + toolbar actions size to their content. */
#view-clients .clients-header-row h1 { flex: 0 0 auto; }
#view-clients .clients-header-actions { flex: 0 0 auto; }
#view-clients .cl-chip {
  flex-shrink: 0;
  height: 28px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--border); border-radius: 20px;
  color: var(--muted); font-size: 12.5px; font-weight: 500; white-space: nowrap;
  cursor: pointer; transition: color .15s, background .15s, border-color .15s;
}
#view-clients .cl-chip:hover { color: var(--text); border-color: var(--border-strong); }
#view-clients .cl-chip.active { color: var(--accent-strong); background: var(--accent-dim); border-color: rgba(37,87,214,.45); }
#view-clients .cl-chip .cnt { color: var(--subtle); font-variant-numeric: tabular-nums; }
#view-clients .cl-chip.active .cnt { color: var(--accent-strong); opacity: .75; }
#view-clients .cl-chip--more { color: var(--muted); }
#view-clients .cl-chip--dashed { border-style: dashed; color: var(--subtle); }
#view-clients .cl-chip--dashed:hover { color: var(--text); }
/* active ad-hoc rule pills (State C) */
#view-clients .cl-pill {
  flex-shrink: 0;
  height: 26px; padding: 0 4px 0 10px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px;
  color: var(--text); font-size: 12.5px; white-space: nowrap;
}
#view-clients .cl-pill b { font-weight: 600; }
#view-clients .cl-pill-x {
  width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--subtle); border-radius: 20px; cursor: pointer; font-size: 11px;
}
#view-clients .cl-pill-x:hover { background: rgba(255,255,255,.1); color: var(--text); }
/* filter-button badge */
#view-clients #btn-filter-toggle.cl-filter-active { color: var(--accent-strong); border-color: rgba(37,87,214,.4); }
#view-clients .cl-filter-badge {
  min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; border-radius: 20px;
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---- builder popover (rules render inside #cl-filter-panel) ---- */
#view-clients .cl-filter-panel { width: 520px; padding: 0; overflow: hidden; }
#view-clients .cl-builder-rules { padding: 14px 16px 8px; }
#view-clients .cl-builder-empty { padding: 4px 2px 8px; font-size: 13px; color: var(--subtle); }
#view-clients .cl-rule { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
#view-clients .cl-rlbl { width: 40px; font-size: 12px; color: var(--subtle); text-align: right; flex-shrink: 0; }
#view-clients .cl-rcol, #view-clients .cl-rop, #view-clients .cl-rval, #view-clients .cl-rinp {
  height: 32px; padding: 0 9px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font: inherit; font-size: 12.5px;
}
#view-clients .cl-rcol, #view-clients .cl-rop, select.cl-rval {
  appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aaabe' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
#view-clients .cl-rcol { width: 150px; flex-shrink: 0; }
#view-clients .cl-rop { width: 116px; flex-shrink: 0; }
#view-clients .cl-rval, #view-clients .cl-rinp.cl-rval { flex: 1; min-width: 0; }
#view-clients .cl-rcol:focus, #view-clients .cl-rop:focus, #view-clients .cl-rval:focus, #view-clients .cl-rinp:focus { border-color: var(--accent-strong); outline: none; }
#view-clients .cl-rx { width: 28px; height: 28px; flex-shrink: 0; border: 0; background: transparent; color: var(--subtle); border-radius: 6px; cursor: pointer; font-size: 14px; }
#view-clients .cl-rx:hover { background: rgba(255,255,255,.06); color: var(--text); }
#view-clients .cl-addrule {
  height: 30px; padding: 0 12px; margin: 6px 0 2px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px dashed var(--border-strong); border-radius: 6px;
  color: var(--muted); font-size: 12.5px; font-weight: 500; cursor: pointer;
}
#view-clients .cl-addrule:hover { color: var(--text); border-color: var(--muted); }
#view-clients .cl-builder-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  padding: 12px 16px; border-top: 1px solid var(--border); background: rgba(255,255,255,.015);
}
#view-clients .cl-foot-spacer { flex: 1 1 auto; }
#view-clients .cl-builder-hint { font-size: 12px; color: var(--subtle); white-space: nowrap; flex-shrink: 0; }
#view-clients .cl-btn-sm {
  height: 30px; padding: 0 13px; border-radius: 6px; white-space: nowrap; flex-shrink: 0;
  display: inline-flex; align-items: center;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
#view-clients .cl-btn-sm:hover { color: var(--text); border-color: var(--border-strong); }
#view-clients .cl-btn-primary { background: var(--primary); border-color: transparent; color: #fff; }
#view-clients .cl-btn-primary:hover { background: var(--primary-hover); color: #fff; }

/* ---- "More" overflow menu (appended to <body>) ---- */
.cl-more-menu {
  position: fixed; z-index: 1200; min-width: 190px; padding: 6px;
  background: #232c3d; border: 1px solid #3a4658; border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
}
.cl-more-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px;
  background: transparent; border: 0; border-radius: 5px;
  color: #e8edf5; font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.cl-more-item:hover { background: rgba(255,255,255,.06); }
.cl-more-item.active { color: #5a86f5; }
.cl-more-item .cnt { margin-left: auto; color: #7a8fa8; font-variant-numeric: tabular-nums; }
/* Filter builder popover is 500px wide and the Filter button sits on the right of
   the toolbar, so open it right-aligned (extends left) to stay on screen. */
#view-clients .cl-filter-panel { left: auto; right: 0; }

/* ── Pulse hover card (stage-aware engagement detail) ─────────────
   Appended to document.body (outside #view-clients), so it uses the
   GLOBAL design tokens, not the scoped FitOps roster tokens. */
.cl-pulse-card {
  position: fixed; z-index: 9999; width: 304px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5); padding: 14px 16px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s, visibility .18s, transform .18s; pointer-events: none;
}
.cl-pulse-card.visible { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.cpc-head { display: flex; align-items: center; gap: 12px; }
.cpc-ring { position: relative; width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cpc-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.cpc-head-txt { min-width: 0; }
.cpc-title { font-size: var(--fs-sm); font-weight: 600; }
.cpc-sub { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; margin-top: 2px; }
.cpc-loading { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 12px; }
.cpc-sec { margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); }
.cpc-sec-h { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 9px; }
/* onboarding progress */
.cpc-prog { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.cpc-prog-fill { height: 100%; border-radius: 3px; background: var(--success); transition: width .3s; }
.cpc-prog-lbl { font-size: var(--fs-xs); color: var(--text); margin-top: 6px; }
.cpc-note { font-size: var(--fs-xs); color: #eab308; margin-top: 6px; }
/* at-risk reasons */
.cpc-reason { margin-bottom: 9px; }
.cpc-reason:last-child { margin-bottom: 0; }
.cpc-reason-h { font-size: var(--fs-xs); font-weight: 600; color: var(--text); line-height: 1.4; }
.cpc-reason-d { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; line-height: 1.4; }
/* engagement signals */
.cpc-sig { margin-bottom: 8px; }
.cpc-sig:last-child { margin-bottom: 0; }
.cpc-sig-top { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text); margin-bottom: 3px; }
.cpc-sig-v { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cpc-sig-track { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.cpc-sig-fill { height: 100%; border-radius: 3px; }

/* Save-as-smart-list dialog — the .confirm-overlay/.confirm-dialog shell is
   shared with other CRM modals; these style only its title, subtitle + input.
   Lives on <body> (outside #view-clients) so it uses the GLOBAL tokens. */
#cl-save-list-overlay .confirm-dialog { max-width: 420px; }
#cl-save-list-overlay .cl-save-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--text); }
#cl-save-list-overlay .cl-save-sub { margin: 0 0 15px; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
#cl-save-list-overlay .cl-save-input {
  width: 100%; height: 40px; padding: 0 13px; box-sizing: border-box;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font: inherit; font-size: var(--fs-sm); outline: none;
  transition: border-color .12s, box-shadow .12s;
}
#cl-save-list-overlay .cl-save-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
#cl-save-list-overlay .cl-save-input::placeholder { color: var(--text-muted); opacity: .7; }

/* ── Styled rule dropdowns (replace un-themable native <select>) ──────────
   The trigger sits in the panel; the menu (.cl-sel-menu) portals to <body>. */
#view-clients .cl-rsel {
  height: 32px; padding: 0 9px 0 11px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left;
}
#view-clients .cl-rsel:hover { border-color: var(--border-strong); }
#view-clients .cl-rsel.open { border-color: var(--accent-strong); }
#view-clients .cl-rsel--col { width: 150px; flex-shrink: 0; }
#view-clients .cl-rsel--op  { width: 138px; flex-shrink: 0; }
#view-clients .cl-rsel--val, #view-clients .cl-rinp.cl-rsel--val { flex: 1; min-width: 0; }
#view-clients .cl-rsel-txt  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-clients .cl-rsel-ph   { color: var(--subtle); }
#view-clients .cl-rsel-chev { flex-shrink: 0; color: var(--subtle); }

/* portal menu — on <body>, so it uses the GLOBAL tokens (mirrors .cl-more-menu) */
.cl-sel-menu {
  position: fixed; z-index: 100001; min-width: 130px; max-height: 300px; overflow-y: auto;
  padding: 5px; background: #232c3d; border: 1px solid #3a4658; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
}
.cl-sel-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 7px 10px; background: transparent; border: 0; border-radius: 5px;
  color: #e8edf5; font: inherit; font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap;
}
.cl-sel-opt:hover { background: rgba(255,255,255,.06); }
.cl-sel-opt.active { color: #5a86f5; }
.cl-sel-opt .cl-sel-check { flex-shrink: 0; color: #5a86f5; }

/* Custom date picker (portaled to <body>, so GLOBAL tokens / hex). */
.cl-cal {
  position: fixed; z-index: 100001; width: 250px; padding: 10px;
  background: #232c3d; border: 1px solid #3a4658; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  color: #e8edf5; user-select: none;
}
.cl-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cl-cal-title { font-size: 13px; font-weight: 600; }
.cl-cal-nav { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 6px; color: #9fb0c5; font-size: 17px; line-height: 1; cursor: pointer; }
.cl-cal-nav:hover { background: rgba(255,255,255,.08); color: #fff; }
.cl-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.cl-cal-dow span { text-align: center; font-size: 10px; font-weight: 600; color: #7a8fa8; padding: 3px 0; }
.cl-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cl-cal-day { height: 30px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 6px; color: #e8edf5; font: inherit; font-size: 12.5px; cursor: pointer; font-variant-numeric: tabular-nums; }
button.cl-cal-day:hover { background: rgba(255,255,255,.09); }
.cl-cal-pad { visibility: hidden; cursor: default; }
.cl-cal-day.today { color: #5a86f5; font-weight: 700; }
.cl-cal-day.sel, .cl-cal-day.sel:hover { background: #2557d6; color: #fff; font-weight: 600; }
.cl-cal-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid #3a4658; }
.cl-cal-foot button { background: transparent; border: 0; color: #9fb0c5; font: inherit; font-size: 12px; cursor: pointer; padding: 4px 7px; border-radius: 5px; }
.cl-cal-foot button:hover { background: rgba(255,255,255,.07); color: #fff; }
.cl-cal-foot .cl-cal-today { color: #5a86f5; }

/* ── Pulse 2.0 — profile pulse additions ─────────────────────────
   Not-tracked card, the "Your move" line on the at-risk card, and the
   quiet per-client tracking switch. Global tokens (profile scope). */
.pulse-card--offline { border-left: 3px solid var(--border-strong, #3a4658); }
.pulse-card--offline .pulse-card-title { color: var(--text-muted); }
.pulse-card-yourmove {
  margin: 12px 0 2px; padding: 10px 12px; border-radius: 6px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text); line-height: 1.55;
}
.pulse-yourmove-label {
  display: inline-block; margin-right: 8px; font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent, var(--primary));
}
.ph-pulse-tracking-row { margin-top: 8px; text-align: right; }
.ph-pulse-tracking-btn {
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 2px; text-decoration-color: transparent;
  transition: color .12s, text-decoration-color .12s;
}
.ph-pulse-tracking-btn:hover { color: var(--text); text-decoration-color: currentColor; }

/* Pulse hover card — "your move" line (Pulse 2.0). Global tokens. */
.cpc-yourmove {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.06);
  font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5;
}
.cpc-yourmove-l {
  display: inline-block; margin-right: 7px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--primary);
}

/* ============================================================
   AUTOMATIONS  (Phase A — gallery + read-only infinite canvas)
   CRM 2.0: neutral grounds, sapphire accent, icon+label so color
   is never the sole signal (colorblind-safe).
   ============================================================ */
#view-automations {
  /* CRM 2.0 — same neutral grounds + Royal Sapphire accent as the roster
     (scoped here too until the brand rolls out platform-wide). Category is
     carried by the node's icon + label, never a slab of colour. */
  --bg: #0d1117;
  --surface: #161c27;
  --surface-2: #1e2535;
  --surface-3: #232c3d;
  --surface-hover: #232c3d;
  --border: #2a3340;
  --border-strong: #3a4658;
  --border-light: #1e2535;
  --text: #e8edf5;
  --text-muted: #9aaabe;
  --text-subtle: #7a8fa8;

  --primary: #2557d6;
  --accent: #2557d6;              /* Royal Sapphire — one accent, used sparingly */
  --accent-strong: #5a86f5;
  --accent-dim: rgba(37, 87, 214, 0.16);

  --success: #2bbd7e;  --success-dim: rgba(43, 189, 126, 0.14);
  --warning: #f5a524;  --warning-dim: rgba(245, 165, 36, 0.14);
  --danger:  #f0605a;  --danger-dim:  rgba(240, 96, 90, 0.13);
  --info:    #5a86f5;  --info-dim:    rgba(90, 134, 245, 0.14);
  --shadow: 0 8px 26px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);

  /* automations-local */
  --au-wire:  #46536a;                    /* slate wires, readable on the dots */
  --au-paper: rgba(148, 163, 190, 0.08);  /* graph-paper dots */
  --au-trig:  var(--warning);
  --au-act:   var(--accent);
  --au-goal:  var(--success);
  --au-logic: var(--text-subtle);
}

/* ── Head ─────────────────────────────────────────────────── */
.au-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.au-head h1 { font-size:var(--fs-3xl); font-weight:500; letter-spacing:-0.02em; color:var(--text); margin:0; }
.au-head .view-subtitle { margin-top:4px; }
.au-head-actions { display:flex; gap:8px; align-items:center; margin-top:2px; }

.au-loading, .au-empty { padding:40px 4px; color:var(--text-muted); font-size:var(--fs-sm); }
.au-empty { display:flex; align-items:center; gap:12px; }

/* ── Results strip (earned — only on + fired) ─────────────── */
.au-results-label {
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted); margin:2px 2px 8px; font-weight:600;
}
.au-results { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.au-rtile {
  min-width:150px; padding:14px 16px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);
}
.au-rv { font-size:var(--fs-2xl); font-weight:600; color:var(--text); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.au-rv.money { color:var(--success); }
.au-rk { font-size:var(--fs-sm); color:var(--text); margin-top:3px; }
.au-rd { font-size:var(--fs-xs); color:var(--text-muted); margin-top:2px; }

/* ── Folder bar (pinned) ──────────────────────────────────── */
.au-folderbar {
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 2px; margin-bottom:16px;
  background:var(--bg); border-bottom:1px solid var(--border-light);
}
.au-fold {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:100px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text-muted); font-size:var(--fs-sm); font-weight:500;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.au-fold:hover { background:var(--surface-hover); color:var(--text); }
.au-fold.on { background:var(--accent-dim); border-color:var(--accent); color:var(--text); }
.au-fold b { font-weight:600; font-variant-numeric:tabular-nums; opacity:.7; }
.au-fold.new { border-style:dashed; color:var(--text-muted); }
.au-folderhint { margin-left:auto; font-size:var(--fs-xs); color:var(--text-muted); opacity:.75; }

/* ── Gallery grid + cards ─────────────────────────────────── */
.au-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px; }
.au-card {
  position:relative; padding:18px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius);
  display:flex; flex-direction:column; min-height:150px;
  transition:border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.au-card:hover { border-color:var(--border-hover, #3f4d68); transform:translateY(-1px); box-shadow:var(--shadow); }
.au-card-top { display:flex; align-items:flex-start; gap:12px; }
.au-card-top h3 { flex:1; font-size:var(--fs-md); font-weight:600; color:var(--text); margin:0; line-height:1.35; letter-spacing:-0.01em; }

.au-chip {
  flex:none; width:34px; height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted);
}
.au-chip svg { width:17px; height:17px; }
.au-chip[data-recipe="payment_rescue"]    { color:var(--success);  background:var(--success-dim);  border-color:transparent; }
.au-chip[data-recipe="testimonial_ask"]   { color:var(--warning);  background:var(--warning-dim);  border-color:transparent; }
.au-chip[data-recipe="referral_ask"]      { color:var(--info);     background:var(--info-dim);     border-color:transparent; }
.au-chip[data-recipe="renewal_reminders"] { color:var(--accent);   background:var(--accent-dim);   border-color:transparent; }

.au-tgl { display:flex; align-items:center; gap:8px; flex:none; }
.au-lbl { font-size:9.5px; font-weight:700; letter-spacing:.08em; color:var(--text-muted); }
.au-lbl.on { color:var(--success); }
.au-sw {
  position:relative; width:34px; height:20px; border-radius:100px;
  background:var(--surface-2); border:1px solid var(--border); cursor:pointer;
  transition:background .16s ease, border-color .16s ease;
}
.au-sw::after {
  content:''; position:absolute; top:2px; left:2px; width:14px; height:14px;
  border-radius:50%; background:var(--text-muted); transition:transform .16s ease, background .16s ease;
}
.au-sw.on { background:var(--accent); border-color:var(--accent); }
.au-sw.on::after { transform:translateX(14px); background:#fff; }
.au-sw:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.au-menu {
  border:none; background:none; color:var(--text-muted); cursor:pointer;
  font-size:16px; line-height:1; padding:2px 4px; border-radius:4px;
}
.au-menu:hover { background:var(--surface-hover); color:var(--text); }

.au-desc { font-size:var(--fs-sm); color:var(--text-muted); line-height:1.5; margin-top:12px; flex:1; }
.au-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:16px; }
.au-res { font-size:var(--fs-sm); font-weight:600; color:var(--text); }
.au-res.quiet { font-weight:500; color:var(--text-muted); }
.au-view { font-size:var(--fs-sm); color:var(--accent); cursor:pointer; white-space:nowrap; }
.au-view:hover { text-decoration:underline; }

/* Build-your-own (coming soon) */
.au-build {
  align-items:center; justify-content:center; text-align:center;
  border-style:dashed; background:transparent; cursor:default;
}
.au-build:hover { transform:none; box-shadow:none; border-color:var(--border); }
.au-build-plus { font-size:26px; color:var(--text-muted); line-height:1; }
.au-build-t { font-size:var(--fs-md); font-weight:600; color:var(--text); margin-top:8px; }
.au-build-d { font-size:var(--fs-xs); color:var(--text-muted); margin-top:6px; max-width:240px; line-height:1.5; }

/* ── Card ⋯ menu popover ──────────────────────────────────── */
.au-cardmenu {
  position:fixed; z-index:1000; min-width:200px; max-width:220px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:5px; overflow:hidden;
}
.au-cm-h { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); padding:6px 10px 4px; font-weight:600; }
.au-cm-item {
  display:block; width:100%; text-align:left; border:none; background:none;
  padding:8px 10px; border-radius:4px; color:var(--text); font-size:var(--fs-sm); cursor:pointer;
}
.au-cm-item:hover { background:var(--surface-hover); }
.au-cm-sep { height:1px; background:var(--border); margin:5px 6px; }
.au-cm-item.au-cm-danger { color:var(--danger); }
.au-cm-item.au-cm-danger:hover { background:var(--danger-dim); }

/* ── Canvas head ──────────────────────────────────────────── */
.au-cv-head { display:flex; align-items:center; gap:12px; margin-bottom:6px; flex-wrap:wrap; }
.au-cv-head h2 { font-size:var(--fs-xl); font-weight:600; color:var(--text); margin:0; display:flex; align-items:center; gap:10px; letter-spacing:-0.01em; }
.au-cv-grow { flex:1; }
.au-back { border:none; background:none; color:var(--text-muted); cursor:pointer; font-size:var(--fs-sm); padding:6px 8px 6px 0; }
.au-back:hover { color:var(--text); }
.au-pill { font-size:10px; font-weight:700; letter-spacing:.06em; padding:3px 8px; border-radius:100px; }
.au-pill.on  { color:var(--success); background:var(--success-dim); }
.au-pill.off { color:var(--text-muted); background:var(--surface-2); }
.au-cv-note { font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:14px; max-width:640px; line-height:1.5; }

/* ── Infinite canvas ──────────────────────────────────────── */
.au-world-wrap {
  position:relative; height:72vh; min-height:520px; overflow:hidden;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg); cursor:grab;
}
.au-world-wrap.panning { cursor:grabbing; }
.au-world {
  position:absolute; top:0; left:0; will-change:transform;
  background-image:radial-gradient(circle, var(--au-paper) 1.4px, transparent 1.4px);
  background-size:24px 24px;
}
.au-wires { position:absolute; top:0; left:0; overflow:visible; pointer-events:none; }

/* Zoom controls */
.au-zoom {
  position:absolute; right:14px; bottom:14px; z-index:6;
  display:flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--border); border-radius:100px;
  padding:4px 8px; box-shadow:var(--shadow);
}
.au-zoom button { border:none; background:none; color:var(--text); cursor:pointer; font-size:16px; width:22px; height:22px; border-radius:50%; line-height:1; }
.au-zoom button:hover { background:var(--surface-hover); }
.au-zpct { font-size:var(--fs-xs); color:var(--text-muted); min-width:38px; text-align:center; font-variant-numeric:tabular-nums; }
.au-cv-hint { position:absolute; left:16px; top:12px; z-index:6; font-size:var(--fs-xs); color:var(--text-muted); opacity:.7; pointer-events:none; }

/* ── Nodes ────────────────────────────────────────────────── */
/* Uniform, restrained cards — category is read from the icon + label, not
   a slab of colour down the edge. Depth comes from a soft lift off the
   graph paper, the way Linear/Vercel nodes sit. */
.au-node {
  position:absolute; width:214px; padding:13px 14px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.22);
  pointer-events:auto;
}
/* The exit goal is a watcher, not a step — hairline dashed, quieter fill. */
.au-node--goalcard { background:var(--surface); border-style:dashed; border-color:var(--border-strong); box-shadow:0 1px 2px rgba(0,0,0,.3); }
/* Wait = a small pill between the big cards (keeps the recipe's tight
   x-steps from overlapping the neighbouring nodes). */
.au-node--wait { width:134px; }
.au-nh { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.au-nic { flex:none; width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center; background:var(--surface-hover); color:var(--text-muted); }
.au-nic svg { width:13px; height:13px; }
.au-nic--trig   { color:var(--au-trig);  background:var(--warning-dim); }
.au-nic--wait   { color:var(--au-logic); background:var(--surface-hover); }
.au-nic--branch { color:var(--au-logic); background:var(--surface-hover); }
.au-nic--goal   { color:var(--au-goal);  background:var(--success-dim); }
.au-nic--note   { color:var(--info);     background:var(--info-dim); }
.au-nic--email, .au-nic--push, .au-nic--inapp, .au-nic--sms, .au-nic--task { color:var(--au-act); background:var(--accent-dim); }
.au-nkind { font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.au-ntt { font-size:var(--fs-sm); font-weight:600; color:var(--text); line-height:1.35; }
.au-ncfg { font-size:var(--fs-xs); color:var(--text-muted); margin-top:4px; line-height:1.45; }
.au-nsetup { display:inline-block; margin-top:6px; font-size:10px; font-weight:600; color:var(--warning); background:var(--warning-dim); padding:2px 7px; border-radius:20px; }
.au-nstats { display:flex; gap:10px; margin-top:8px; font-size:var(--fs-xs); color:var(--text-muted); }
.au-nstats b { color:var(--text); font-weight:600; }

/* ── Wires ────────────────────────────────────────────────── */
.au-wire { fill:none; stroke:var(--au-wire); stroke-width:2; }
.au-wire.goal { stroke:var(--au-goal); stroke-dasharray:5 5; opacity:.85; }
.au-wire-lbl {
  position:absolute; z-index:3; font-size:9px; font-weight:700; letter-spacing:.06em;
  color:var(--text-muted); background:var(--bg); padding:2px 6px; border-radius:100px;
  border:1px solid var(--border); pointer-events:none;
}

/* ── Runs log ─────────────────────────────────────────────── */
.au-runs-list { max-height:52vh; overflow:auto; display:flex; flex-direction:column; gap:2px; }
.au-run-row { display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--border-light); }
.au-run-name { font-size:var(--fs-sm); font-weight:600; color:var(--text); min-width:130px; }
.au-run-meta { flex:1; font-size:var(--fs-xs); color:var(--text-muted); }
.au-run-status { font-size:var(--fs-xs); font-weight:600; text-transform:capitalize; }

/* ============================================================
   AUTOMATIONS FLOW EDITOR  (palette · canvas · inspector)
   Inherits the #view-automations CRM 2.0 sapphire tokens.
   ============================================================ */
#view-automations .aue-shell { display:flex; flex-direction:column; height:calc(100vh - 72px); min-height:520px; padding:16px 28px 24px; }
.aue-top { flex:none; display:flex; align-items:center; gap:12px; padding:2px 2px 14px; border-bottom:1px solid var(--border); }
.aue-top h2 { font-size:var(--fs-lg); font-weight:600; margin:0; display:flex; align-items:center; gap:10px; color:var(--text); letter-spacing:-0.01em; }
.aue-grow { flex:1; }
.aue-div { width:1px; height:22px; background:var(--border); }
.aue-save { font-size:12px; color:var(--text-subtle); display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.aue-save::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--success); }
.aue-save.saving { color:var(--text-muted); } .aue-save.saving::before { background:var(--warning); }
.aue-save.err { color:var(--danger); } .aue-save.err::before { background:var(--danger); }
.aue-icon { border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text-muted); border-radius:7px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.aue-icon:hover:not(:disabled) { background:var(--surface-3); color:var(--text); } .aue-icon:disabled { opacity:.35; cursor:default; }
.aue-icon svg { width:15px; height:15px; }

.aue-body { flex:1; display:flex; min-height:0; margin-top:12px; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--bg); }
.aue-palette { width:232px; flex:none; border-right:1px solid var(--border); background:var(--surface); overflow-y:auto; padding:12px 10px; }
.aue-pal-section { font-size:11px; font-weight:600; letter-spacing:-.01em; color:var(--text-muted); margin:18px 6px 4px; padding-top:14px; border-top:1px solid var(--border); }
.aue-pal-section:first-child { margin-top:2px; padding-top:0; border-top:none; }
.aue-pal-h { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-subtle); margin:12px 6px 6px; }
.aue-pal-h:first-child { margin-top:2px; }
.aue-pal-item { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:8px; cursor:grab; margin-bottom:2px; border:1px solid transparent; }
.aue-pal-item:hover { background:var(--surface-2); border-color:var(--border); }
.aue-pal-item:active { cursor:grabbing; }
.aue-pal-item span:last-child { font-size:12.5px; color:var(--text); }
.aue-pal-ic { width:24px; height:24px; flex:none; border-radius:7px; display:flex; align-items:center; justify-content:center; background:var(--surface-3); color:var(--text-muted); }
.aue-pal-ic svg { width:14px; height:14px; }
.aue-pal-item.t-trigger .aue-pal-ic { color:var(--warning); background:var(--warning-dim); }
.aue-pal-item.t-message .aue-pal-ic, .aue-pal-item.t-integration .aue-pal-ic { color:var(--accent-strong); background:var(--accent-dim); }
.aue-pal-item.t-logic .aue-pal-ic { color:var(--text-subtle); background:var(--surface-3); }
.aue-pal-item.t-crm .aue-pal-ic { color:var(--info); background:var(--info-dim); }
.aue-pal-hint { font-size:11px; color:var(--text-subtle); padding:14px 6px; line-height:1.5; }

.aue-canvas { flex:1; position:relative; overflow:hidden; background:var(--bg); }
.aue-canvas.dropok { box-shadow:inset 0 0 0 2px var(--accent-dim); }
.aue-canvas .au-node { cursor:grab; }
.aue-canvas .au-node:active { cursor:grabbing; }

.aue-inspector { width:300px; flex:none; border-left:1px solid var(--border); background:var(--surface); overflow-y:auto; padding:16px 16px 40px; }
.aue-inspector.empty { display:flex; align-items:center; justify-content:center; text-align:center; color:var(--text-subtle); font-size:12.5px; padding:24px; }
.aue-insp-hd { display:flex; align-items:center; gap:9px; margin-bottom:4px; }
.aue-insp-kind { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.aue-insp-title { font-size:15px; font-weight:600; margin:0 0 16px; color:var(--text); }
.aue-field { margin-bottom:14px; }
.aue-field label { display:block; font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
.aue-field input, .aue-field textarea, .aue-field select { width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:7px; color:var(--text); padding:9px 10px; font:13px/1.5 inherit; resize:vertical; }
.aue-field input:focus, .aue-field textarea:focus, .aue-field select:focus { outline:none; border-color:var(--accent); }
.aue-help { font-size:11px; color:var(--text-subtle); margin-top:5px; line-height:1.4; }
/* Weekday toggles on the assign-workout step. Seven equal slots so they read
   as a week; state is the filled background plus aria-pressed, never colour
   alone (two of the initials repeat, so position is what identifies a day). */
.aue-weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.aue-wd {
  height:32px; padding:0; border-radius:6px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted);
  font:600 12px/1 inherit; transition:background .15s, border-color .15s, color .15s;
}
.aue-wd:hover { border-color:var(--text-subtle); color:var(--text); }
.aue-wd.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.aue-wd:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim); }
.aue-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.aue-chip { font-size:11px; color:var(--accent-strong); background:var(--accent-dim); border-radius:6px; padding:3px 7px; cursor:pointer; }
.aue-connect { display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:9px 10px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--accent-strong); font-size:var(--fs-sm); font-weight:500; cursor:pointer; transition:border-color .15s, background .15s; }
.aue-connect:hover { border-color:var(--accent); background:var(--surface-3); }
.aue-connect svg { flex:none; }
.aue-del { margin-top:8px; width:100%; border:1px solid var(--border); background:none; color:var(--text-muted); border-radius:7px; padding:8px; font-size:12.5px; cursor:pointer; }
.aue-del:hover { border-color:var(--danger); color:var(--danger); }

/* selected node + connection handles */
.au-node.aue-sel { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 8px 22px rgba(0,0,0,.3); }
.au-handle { position:absolute; width:13px; height:13px; border-radius:50%; background:var(--surface-3); border:2px solid var(--border-strong); top:50%; transform:translateY(-50%); cursor:crosshair; z-index:2; }
.au-handle:hover { border-color:var(--accent); background:var(--accent); }
.au-handle.out { right:-7px; } .au-handle.in { left:-7px; }
.au-handle.out.yes { top:34%; } .au-handle.out.no { top:66%; }
.au-hlbl { position:absolute; right:15px; font-size:9px; font-weight:600; color:var(--text-subtle); pointer-events:none; transform:translateY(-50%); }
.au-hlbl.yes { top:34%; } .au-hlbl.no { top:66%; }
.au-wire.tmp { stroke:var(--accent-strong); stroke-dasharray:5 5; }

/* editor flow-name (inline editable) */
.aue-name { font-size:var(--fs-lg); font-weight:600; color:var(--text); background:transparent; border:1px solid transparent; border-radius:6px; padding:4px 8px; letter-spacing:-0.01em; max-width:340px; font-family:inherit; }
.aue-name:hover { background:var(--surface-2); }
.aue-name:focus { outline:none; background:var(--surface-2); border-color:var(--border); }
.au-build.au-build-live { cursor:pointer; }
.au-build.au-build-live:hover { border-color:var(--accent); background:var(--accent-dim); }

/* ============================================================
   CLIENT PROFILE — NEXT (CRM 2.0 — THE profile since 2026-07-16; classic
   is reachable only via the revfit_profile_classic escape hatch)
   Scoped: every rule lives under .cp2 (or .cp2-pop portals).
   Tokens re-declared here per the #view-clients scoping precedent.
   ============================================================ */
.cp2 {
  --cp2-bg: #0d1117; --cp2-surface: #161c27; --cp2-surface-2: #1e2535; --cp2-surface-3: #232c3d;
  --cp2-border: #232c39; --cp2-border-2: #2f3a49; --cp2-border-strong: #3a4658;
  /* CONTRAST POLICY (researched 2026-07-15, measured against #0d1117 page / #161c27 card).
     Hairlines are LIGHTING; glyphs and text are INFORMATION. Spend ~nothing on
     containers, spend heavily on text/state/focus — the "contrast budget" every
     top dark UI runs (Geist: border 1.55 default → 2.06 hover → 5.51 active).
     WCAG 2.x OVER-RATES near-black pairs ~2.8x (our bg luminance 0.0055 is ~9x
     smaller than the formula's baked-in 0.05 flare constant), so every floor
     below sits one band above the legal minimum. Clear the number, never sit on it.
       --cp2-subtle  was #62708a = 3.79:1 page / 3.42:1 card → FAILED 1.4.3 for text.
                     (It was darker than GitHub's *disabled* token. 39 text uses.)
       Text ≥4.5:1 on the WORSE bg · meaningful glyph ≥4.5:1 · control border ≥3:1.
     The border ramp below is DECORATION and stays faint on purpose — Linear ships
     1.10:1, Vercel 1.44:1, Primer 1.92:1 on this exact ground. Never colour a glyph
     or live text from it; that is the most common dark-theme token error. */
  --cp2-text: #e9edf4; --cp2-muted: #97a3b6; --cp2-subtle: #8a93a6;
  --cp2-glyph: var(--cp2-subtle);  /* meaningful marks (flow arrows, state dots, "+") are drawn from the TEXT ramp, NEVER the border ramp — that swap is the most common dark-theme bug. 6.13 page / 5.53 card / 4.96 popover. */
  --cp2-border-ctl: #6f7887;  /* a control's ONLY boundary (inline input underline): 4.25 page / 3.83 card / 3.44 popover — clears 3:1 on every ground */
  --cp2-brand: #2557d6; --cp2-brand-bright: #5a86f5; --cp2-brand-dim: rgba(37,87,214,.18);
  --cp2-green: #2bbd7e; --cp2-amber: #f5a524; --cp2-red: #f0605a;
  color: var(--cp2-text);
  font-variant-numeric: tabular-nums;
}
.cp2 .cp2-green { color: var(--cp2-green); }
.cp2 .cp2-amber { color: var(--cp2-amber); }
.cp2 .cp2-red   { color: var(--cp2-red); }
.cp2 .cp2-loading { padding: 22px; color: var(--cp2-subtle); font-size: 13px; }

/* ── Header ── */
/* Header ground (Clayton, 2026-07-16). Three things, and the order of importance is the
   opposite of what it looks like:

   1. THE EDGE DOES THE SEPARATING, NOT THE FILL. --cp2-surface vs the page is 1.11:1 —
      photometrically the same step as the nutrition band that measured 1.10 and was
      reported as "literally no contrast". A fill cannot carry this boundary at any value
      the text ladder can afford: --cp2-surface-2 already drops --cp2-brand-bright to
      4.49, and a 1.53 ground drops --cp2-subtle to 4.04 — under the floor, on every stat
      label and both em-dashes. So the boundary rides the border, promoted --cp2-border
      (1.34, inside the invisible zone — this is why the header doesn't separate today)
      -> --cp2-border-strong (1.98). GitHub ships 1.08 fill + 1.92 edge on this exact
      #0d1117 ground; Vercel ships a pure-black fill and lets the border do all of it.
      If this still reads weak: strengthen the EDGE. Raising the fill breaks the text.

   2. FULL-BLEED IS LOAD-BEARING, not styling. .view (styles.css:456) wraps this in
      `padding: 28px 32px 40px`, so a background here renders as a slab inset 32px from
      both edges with the Back button floating above it — a card in the middle of the
      page, which is the one thing the no-chrome doctrine forbids. `margin: 0 -32px`
      pulls it back to the edges so it reads as a band. The 32px padding then re-insets
      the content, which also lands it flush with .btn-back (was 34px — a 2px misalign).
      If .view's padding ever changes, this -32px must change with it.

   3. 150px exactly = 30 top + 52 idrow + 14 band margin + 24 inline band + 29 bottom
      + 1 border. 30/29+1px edge reads as symmetric 30/30. The band's 14px margin stays
      put on purpose: inner gap must stay well under outer padding or the two rows stop
      reading as one block and the header becomes a card with sections. */
/* The sticky header rode the macOS rubber-band: the elastic overscroll
   transform applies to the SCROLLER'S CONTENT, and a sticky element lives
   inside that content — so it bounced at the top/bottom of the scroll and
   snapped back (Clayton, S68). Killing the elastic effect on the profile's
   scroller makes the header genuinely immobile. Scoped with :has so only
   the profile view loses the bounce; normal scrolling is untouched. */
.views-container:has(.cp2) { overscroll-behavior-y: none; }

.cp2 .cp2-head {
  background: var(--cp2-surface);
  border-bottom: 1px solid var(--cp2-border-strong);
  padding: 20px 32px 0;            /* was 30/32/29 — the tabs' own bottom pad is the close */
  margin: 0 -32px;
  /* Sticky against .views-container (the profile's scroll parent — verified:
     no clipping ancestor in between). Tabs, Message and the client's name
     stay reachable however deep the coach scrolls (Clayton, S68). The solid
     surface background is what hides the content sliding under; z-index
     clears the calendar chips / rail cards, while cp2 popovers are
     body-mounted and unaffected. */
  position: sticky;
  top: 0;
  z-index: 40;
}

/* SEAM HEADER (Clayton, 2026-07-16): the Back-to-Clients bar is GONE. It was 84px of
   padding around one 33px button, and it made the header pay top padding twice. The new
   header owns Back (a chevron), the actions (adopted from here), and the ground.

   :has(.cp2) is the gate and it is not optional — .view-header is a GLOBAL class on 13
   views and #client-profile-content is still shared with the classic profile behind
   revfit_profile_classic. Ungated, this blanks the CRM. .cp2-back delegates to the
   still-present-but-hidden #btn-back-to-clients; a hidden button still takes .click(). */
#view-client:has(.cp2) .view-header { display: none; }
/* .view ships padding: 28px 32px 40px; the old .view-header margin was the only thing
   cancelling that top. With the bar gone, kill it at the source so the header sits flush.
   (1,1,0) beats .view's (0,1,0). */
#view-client:has(.cp2) { padding-top: 0; }
.cp2 .cp2-idrow { display: flex; align-items: center; gap: 14px; }
.cp2 .cp2-avwrap { position: relative; cursor: pointer; }
.cp2 .cp2-av {
  width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center;
  background: linear-gradient(135deg, #2b3550, #1a2033); color: #cdd6ea;
  font-weight: 600; font-size: 17px; border: 1px solid var(--cp2-border-strong);
}
/* Always-on avatar ring — hue AND border-style both carry the state, so a
   colourblind coach reads it by shape: solid = good, dashed = watch, double =
   at-risk, dotted = onboarding, thin solid = idle/untracked. Pseudo-element (not
   box-shadow) because only a real border can render dashed/double/dotted. */
.cp2 .cp2-avwrap.cp2-ring::before {
  content: ''; position: absolute; inset: -4px; border-radius: 999px;
  border: 2px solid transparent; pointer-events: none;
}
.cp2 .cp2-avwrap.cp2-ring-good::before    { border-style: solid;  border-color: var(--cp2-green); }
.cp2 .cp2-avwrap.cp2-ring-watch::before   { border-style: dashed; border-color: var(--cp2-amber); }
.cp2 .cp2-avwrap.cp2-ring-danger::before  { border-style: double; border-width: 4px; inset: -5px; border-color: var(--cp2-red); }
.cp2 .cp2-avwrap.cp2-ring-onboard::before { border-style: dotted; border-width: 2.5px; border-color: var(--cp2-brand-bright); }
.cp2 .cp2-avwrap.cp2-ring-idle::before    { border-style: solid;  border-width: 1.5px; border-color: var(--cp2-border-strong); }
.cp2 .cp2-avbadge {
  position: absolute; top: -4px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--cp2-amber); color: #231a05; border: 2px solid var(--cp2-bg);
  font-size: 11px; font-weight: 700; line-height: 1; display: grid; place-items: center;
}
.cp2 .cp2-avbadge-good    { background: var(--cp2-green); color: #06281a; }
.cp2 .cp2-avbadge-watch   { background: var(--cp2-amber); color: #231a05; }
.cp2 .cp2-avbadge-danger  { background: var(--cp2-red);   color: #2a0d0c; }
.cp2 .cp2-avbadge-onboard { background: var(--cp2-brand-bright); color: #06152e; }
.cp2 .cp2-name { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; display: flex; align-items: center; gap: 10px; }
.cp2 .cp2-sub { font-size: 12px; color: var(--cp2-subtle); margin-top: 2px; }
.cp2 .cp2-status { font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 999px; text-transform: capitalize; }
.cp2 .cp2-status-active    { color: var(--cp2-green); background: rgba(43,189,126,.12); }
.cp2 .cp2-status-paused    { color: var(--cp2-amber); background: rgba(245,165,36,.12); }
.cp2 .cp2-status-cancelled { color: var(--cp2-red);   background: rgba(240,96,90,.12); }
.cp2 .cp2-headactions { margin-left: auto; display: flex; gap: 8px; }
.cp2 .cp2-btn {
  font-size: 13px; font-weight: 500; border-radius: 6px; padding: 8px 13px; cursor: pointer;
  border: 1px solid var(--cp2-border-2); color: var(--cp2-muted); background: var(--cp2-surface);
}
.cp2 .cp2-btn:hover { color: var(--cp2-text); border-color: var(--cp2-border-strong); }
.cp2 .cp2-btn-pri { background: var(--cp2-brand); border-color: var(--cp2-brand); color: #fff; }
.cp2 .cp2-btn-pri:hover { color: #fff; filter: brightness(1.08); }

/* stats band — uniform labels ON TOP */
.cp2 .cp2-band { display: flex; flex-wrap: wrap; margin-top: 14px; border-top: 1px solid var(--cp2-border); }
.cp2 .cp2-cell { padding: 11px 22px 11px 0; margin-right: 22px; border-right: 1px solid var(--cp2-border); }
.cp2 .cp2-cell:last-child { border-right: 0; }
.cp2 .cp2-k { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cp2-subtle); }
.cp2 .cp2-v { font-size: 16px; font-weight: 600; margin-top: 3px; letter-spacing: -0.01em; }
.cp2 .cp2-delta { font-size: 10px; color: var(--cp2-subtle); margin-left: 5px; }

/* tabs */
.cp2 .cp2-tabs { display: flex; gap: 2px; margin-top: 13px; }
.cp2 .cp2-tab {
  font-size: 13px; font-weight: 500; color: var(--cp2-muted); padding: 10px 14px;
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
}
.cp2 .cp2-tab.on { color: var(--cp2-text); border-bottom-color: var(--cp2-brand-bright); }

/* ── Popovers (elevation recipe — locked CRM 2.0) ── */
.cp2-pop {
  background: #1e2535; border: 1px solid #3a4658; border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6); overflow: hidden; z-index: 900;
  color: #e9edf4;
}
.cp2 .cp2-quickview { position: absolute; top: 60px; left: 0; width: 290px; }
.cp2-daypop { position: fixed; width: 250px; }
/* Picker option lists inside body-mounted popovers. The originals are scoped
   `.cp2 .cp2-phnut-*`, but every .cp2-daypop mounts on document.body — OUTSIDE
   .cp2 — so those rules never matched and the options rendered as native gray
   buttons (both the phase-nutrition picker and the check-in-form picker).
   Hardcoded hex per the .cp2-pop convention: tokens don't reach body. */
.cp2-pop .cp2-phnut-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.cp2-pop .cp2-phnut-opt {
  display: block; width: 100%; text-align: left; padding: 9px 11px; border-radius: 4px;
  border: 1px solid #2f3a49; background: #232c3d; color: #e9edf4;
  cursor: pointer; font: inherit; font-size: 12.5px; transition: border-color .12s;
}
.cp2-pop .cp2-phnut-opt:hover { border-color: #5a86f5; }
.cp2-pop .cp2-proto-meta { display: block; font-size: 11px; color: #97a3b6; margin-top: 2px; }

.cp2-pop .cp2-pop-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 13px; border-bottom: 1px solid #232c39;
  font-size: 11.5px; font-weight: 600; color: #97a3b6;
}
.cp2-pop .cp2-pop-x { cursor: pointer; color: #8a93a6; font-size: 14px; }
.cp2-pop .cp2-pop-r { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-bottom: 1px solid #232c39; font-size: 12.5px; }
.cp2-pop .cp2-pop-r:last-child { border-bottom: 0; }
.cp2-pop .cp2-pop-m { color: #e9edf4; }
.cp2-pop .cp2-sev { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.cp2-pop .cp2-sev-danger  { background: #f0605a; }
.cp2-pop .cp2-sev-warning { background: #f5a524; }
.cp2-pop .cp2-sev-info    { background: #5a86f5; }

/* Quickview (avatar click) — multi-line reason rows with "what clears it" */
.cp2 .cp2-quickview { width: 322px; }
.cp2-pop .cp2-pop-rr { align-items: flex-start; }
.cp2-pop .cp2-pop-rr .cp2-sev { margin-top: 4px; }
.cp2-pop .cp2-pop-mm { display: flex; flex-direction: column; gap: 3px; }
.cp2-pop .cp2-pop-hh { font-size: 12.5px; font-weight: 600; color: #e9edf4; }
.cp2-pop .cp2-pop-dd { font-size: 11.5px; color: #97a3b6; line-height: 1.45; }
.cp2-pop .cp2-pop-cc { font-size: 11px; color: #2bbd7e; font-weight: 500; }

/* ── Header score hover tooltips (Pulse / Effort) ── */
.cp2 .cp2-cell-tip { position: relative; }
/* The wrapper's top padding is a transparent bridge: because .cp2-tip is a
   descendant of .cp2-cell-tip, hovering the bridge keeps the cell "hovered",
   so the pointer can cross the gap without the card flickering shut. */
.cp2 .cp2-tip {
  position: absolute; top: 100%; left: 0; z-index: 900; width: 344px; padding-top: 9px;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
}
.cp2 .cp2-cell-tip:hover .cp2-tip { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
/* white-space:normal RESETS the .cp2-band .cp2-cell nowrap this card inherits
   (the cell keeps stat values on one line; the tooltip must wrap). overflow-x
   hidden kills the residual horizontal scrollbar. */
.cp2 .cp2-tip-card { max-height: 74vh; overflow-y: auto; overflow-x: hidden; white-space: normal; padding: 0; }
.cp2-pop .cp2-tip-hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 13px 15px 11px; border-bottom: 1px solid #232c39;
}
.cp2-pop .cp2-tip-t { font-size: 14px; font-weight: 600; color: #e9edf4; letter-spacing: -0.01em; }
.cp2-pop .cp2-tip-s { font-size: 11px; color: #8a93a6; margin-top: 2px; }
.cp2-pop .cp2-tbig { display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; }
.cp2-pop .cp2-tbig > span:first-child { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.cp2-pop .cp2-tband { font-size: 10px; font-weight: 600; letter-spacing: .03em; padding: 3px 7px; border-radius: 999px; }
.cp2-pop .cp2-tband-green { color: #2bbd7e; background: rgba(43,189,126,.14); }
.cp2-pop .cp2-tband-amber { color: #f5a524; background: rgba(245,165,36,.14); }
.cp2-pop .cp2-tband-red   { color: #f0605a; background: rgba(240,96,90,.14); }
.cp2-pop .cp2-tsec { padding: 12px 15px; border-bottom: 1px solid #1c2431; }
.cp2-pop .cp2-tsec:last-child { border-bottom: 0; }
.cp2-pop .cp2-bk{ font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8a93a6; margin-bottom: 9px; }
.cp2-pop .cp2-tp { font-size: 12px; color: #b7c0d0; line-height: 1.5; margin-bottom: 10px; }
.cp2-pop .cp2-tp:last-child { margin-bottom: 0; }
.cp2-pop .cp2-tp strong { color: #e9edf4; font-weight: 600; }
.cp2-pop .cp2-tmuted { color: #8a93a6; }
.cp2-pop .cp2-brow { margin-bottom: 11px; }
.cp2-pop .cp2-brow:last-child { margin-bottom: 0; }
.cp2-pop .cp2-brow-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.cp2-pop .cp2-brow-l { font-size: 12px; color: #e9edf4; font-weight: 500; }
.cp2-pop .cp2-brow-n { font-size: 12px; color: #e9edf4; font-weight: 600; font-variant-numeric: tabular-nums; }
.cp2-pop .cp2-brow-n em { color: #8a93a6; font-style: normal; font-weight: 500; }
.cp2-pop .cp2-brow-d { font-size: 11px; color: #97a3b6; line-height: 1.45; margin-top: 5px; }
.cp2-pop .cp2-tbar { height: 5px; border-radius: 999px; background: #232c3d; overflow: hidden; }
.cp2-pop .cp2-tbar-fill { display: block; height: 100%; border-radius: 999px; }
.cp2-pop .cp2-t-brand { background: #5a86f5; }
.cp2-pop .cp2-t-green { color: #2bbd7e; background: #2bbd7e; }
.cp2-pop .cp2-t-amber { color: #f5a524; background: #f5a524; }
.cp2-pop .cp2-t-red   { color: #f0605a; background: #f0605a; }
.cp2-pop .cp2-tbig .cp2-t-green, .cp2-pop .cp2-tbig .cp2-t-amber, .cp2-pop .cp2-tbig .cp2-t-red { background: none; }
.cp2-pop .cp2-tflag { padding: 9px 11px; border-radius: 8px; margin-bottom: 8px; border: 1px solid; }
.cp2-pop .cp2-tflag:last-child { margin-bottom: 0; }
.cp2-pop .cp2-tflag-danger { background: rgba(240,96,90,.08); border-color: rgba(240,96,90,.28); }
.cp2-pop .cp2-tflag-warn   { background: rgba(245,165,36,.08); border-color: rgba(245,165,36,.28); }
.cp2-pop .cp2-tflag-h { font-size: 12px; font-weight: 600; color: #e9edf4; }
.cp2-pop .cp2-tflag-d { font-size: 11.5px; color: #b7c0d0; line-height: 1.45; margin-top: 3px; }
.cp2-pop .cp2-tflag-c { font-size: 11px; color: #2bbd7e; font-weight: 500; margin-top: 5px; }
.cp2-pop .cp2-tgood { font-size: 12px; color: #2bbd7e; line-height: 1.5; }
.cp2-pop .cp2-tempty { padding: 14px 15px; font-size: 12px; color: #b7c0d0; line-height: 1.55; }
.cp2-pop .cp2-tgated { font-size: 11px; color: #8a93a6; margin-top: 9px; }
.cp2-pop .cp2-ttrend { font-size: 11.5px; color: #97a3b6; font-variant-numeric: tabular-nums; margin-top: 2px; }
.cp2-pop .cp2-tul { margin: 0; padding-left: 17px; }
.cp2-pop .cp2-tul li { font-size: 12px; color: #b7c0d0; line-height: 1.55; margin-bottom: 3px; }

/* ── Program tab ── */
.cp2 .cp2-ptool { display: flex; align-items: center; gap: 14px; padding: 14px 0 10px; }
.cp2 .cp2-seg { display: flex; background: var(--cp2-surface); border: 1px solid var(--cp2-border); border-radius: 7px; overflow: hidden; }
.cp2 .cp2-seg button { font-size: 12px; font-weight: 500; color: var(--cp2-muted); padding: 6px 13px; background: none; border: none; cursor: pointer; }
.cp2 .cp2-seg button.on { background: var(--cp2-brand); color: #fff; }
.cp2 .cp2-nav { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.cp2 .cp2-navbtn { width: 25px; height: 25px; border: 1px solid var(--cp2-border); border-radius: 6px; background: none; color: var(--cp2-muted); cursor: pointer; }
.cp2 .cp2-legend { margin-left: auto; display: flex; gap: 14px; font-size: 11px; color: var(--cp2-subtle); align-items: center; }
.cp2 .cp2-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cp2 .cp2-lg { width: 22px; height: 11px; border-radius: 3px; display: inline-block; }
.cp2 .cp2-lg-done { background: var(--cp2-brand); }
.cp2 .cp2-lg-up { border: 1px solid var(--cp2-brand-bright); }

.cp2 .cp2-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cp2 .cp2-dh { font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--cp2-subtle); text-align: center; padding: 2px 0 6px; }
.cp2 .cp2-day { position: relative; border: 1px solid var(--cp2-border); border-radius: 7px; min-height: 84px; padding: 4px 5px; background: var(--cp2-surface); }
.cp2 .cp2-grid-week .cp2-day { min-height: 150px; }
/* NO opacity here. .38 is Material's DISABLED value, and an out-of-month day is not
   disabled — it's clickable, a drag-drop target, and carries real workouts. Container
   opacity composites the whole subtree toward the page, which dragged the day number
   to 1.82:1 and the workout chip to 3.10:1. Out-of-month recede now lives on the
   GROUND at hero specificity (see .cp2-hero .cp2-day-out below); the numeral colour
   is already named at .cp2-hero .cp2-day-out .cp2-day-num. */
.cp2 .cp2-day-today { box-shadow: inset 0 0 0 1px var(--cp2-brand); }
.cp2 .cp2-day-n { font-size: 9.5px; color: var(--cp2-subtle); font-weight: 600; padding: 1px 2px; display: flex; justify-content: space-between; }
.cp2 .cp2-day-today .cp2-day-n { color: var(--cp2-brand-bright); }
.cp2 .cp2-ci { color: var(--cp2-amber); font-size: 9px; }
.cp2 .cp2-day-chips { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.cp2 .cp2-chip {
  font-size: 9.5px; font-weight: 500; border-radius: 4px; padding: 2px 5px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.cp2 .cp2-chip-done { background: var(--cp2-brand); color: #fff; }
.cp2 .cp2-chip-up { border: 1px solid rgba(90,134,245,.55); color: #a9c2f7; background: rgba(37,87,214,.06); }
.cp2 .cp2-chip-cardio { border: 1px solid var(--cp2-border-2); color: var(--cp2-muted); background: var(--cp2-surface-2); cursor: default; }
.cp2 .cp2-more { font-size: 9px; color: var(--cp2-brand-bright); font-weight: 600; padding: 1px 5px; cursor: pointer; }
.cp2-daypop .cp2-chip { cursor: pointer; }

/* program chain */
.cp2 .cp2-chainwrap { margin-top: 9px; }
.cp2 .cp2-chainbar { background: var(--cp2-surface); border: 1px solid var(--cp2-border); border-radius: 10px; padding: 9px 12px; }
.cp2 .cp2-chain-t { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cp2-muted); display: block; margin-bottom: 9px; }
.cp2 .cp2-chain-empty { font-size: 12.5px; color: var(--cp2-subtle); }
.cp2 .cp2-chain { display: flex; align-items: stretch; gap: 7px; overflow-x: auto; }
.cp2 .cp2-cseg { flex: 0 0 auto; min-width: 165px; border: 1px solid var(--cp2-border-2); border-radius: 8px; padding: 6px 10px; background: var(--cp2-surface-2); cursor: pointer; }
.cp2 .cp2-cseg-now { border-color: var(--cp2-brand); box-shadow: inset 0 0 0 1px var(--cp2-brand); }
.cp2 .cp2-cseg-q { border-style: dashed; }
.cp2 .cp2-cseg-gap { border-style: dotted; background: transparent; cursor: default; opacity: .8; }
.cp2 .cp2-cseg-st { font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cp2-subtle); }
.cp2 .cp2-cseg-now .cp2-cseg-st { color: var(--cp2-brand-bright); }
.cp2 .cp2-cseg-n { font-size: 12.5px; font-weight: 600; margin-top: 3px; white-space: nowrap; }
.cp2 .cp2-cseg-d { font-size: 10px; color: var(--cp2-subtle); margin-top: 1px; }
.cp2 .cp2-carrow { align-self: center; color: var(--cp2-subtle); flex: 0 0 auto; }

/* slim cards */
.cp2 .cp2-cards { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin: 9px 0 14px; }
.cp2 .cp2-slim { flex: 1 1 240px; max-width: 380px; display: flex; align-items: center; gap: 12px; background: var(--cp2-surface); border: 1px solid var(--cp2-border); border-radius: 10px; padding: 9px 12px; }
.cp2 .cp2-slim-m { flex: 1; min-width: 0; }
.cp2 .cp2-slim-t { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp2 .cp2-slim-s { font-size: 11.5px; color: var(--cp2-subtle); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp2 .cp2-stepinput {
  width: 86px; text-align: center; font-size: 14px; font-weight: 600;
  background: var(--cp2-surface-2); border: 1px solid var(--cp2-border-2); border-radius: 6px;
  color: var(--cp2-text); padding: 6px 8px;
}
.cp2 .cp2-stepinput:focus { outline: none; border-color: var(--cp2-brand); }

/* carry-over tabs */
.cp2 .cp2-carry { padding: 44px 20px; text-align: center; }
.cp2 .cp2-carry-t { font-size: 15px; font-weight: 600; }
.cp2 .cp2-carry-s { font-size: 13px; color: var(--cp2-subtle); max-width: 52ch; margin: 8px auto 16px; }

/* cp2 — increment 2: carried tabs, day-+ add form */
.cp2 .cp2-plus { opacity: 0; cursor: pointer; color: var(--cp2-subtle); font-size: 12px; padding: 0 2px; }
.cp2 .cp2-day:hover .cp2-plus { opacity: 1; }
.cp2 .cp2-plus:hover { color: var(--cp2-brand-bright); }
.cp2-pop .cp2-addform { padding: 11px 13px; display: flex; flex-direction: column; gap: 8px; }
.cp2-pop .cp2-addrow { display: flex; gap: 8px; align-items: center; }
.cp2-pop .cp2-input {
  flex: 1; background: #232c3d; border: 1px solid #2f3a49; border-radius: 6px;
  color: #e9edf4; font-size: 12.5px; padding: 7px 9px;
}
.cp2-pop .cp2-input:focus { outline: none; border-color: #2557d6; }
.cp2-pop .cp2-addnote { font-size: 10.5px; color: #8a93a6; line-height: 1.5; }
.cp2-pop .cp2-btn { font-size: 12px; font-weight: 500; border-radius: 6px; padding: 7px 12px; cursor: pointer; border: 1px solid #2f3a49; color: #97a3b6; background: #1e2535; }
.cp2-pop .cp2-btn-pri { background: #2557d6; border-color: #2557d6; color: #fff; }
.cp2 .cp2-carrytab { padding: 10px 0 24px; }
.cp2 .cp2-acct-h {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--cp2-subtle); padding: 18px 2px 10px; border-bottom: 1px solid var(--cp2-border); margin-bottom: 14px;
}

/* cp2 — full-build interactions */
.cp2 .cp2-day-drop { box-shadow: inset 0 0 0 2px #5a86f5; }
.cp2-pop .cp2-act {
  flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid #2f3a49; border-radius: 5px; color: #97a3b6; cursor: pointer; font-size: 12px;
}
.cp2-pop .cp2-act:hover { color: #2bbd7e; border-color: #2bbd7e; }
.cp2-pop .cp2-act-del:hover { color: #f0605a; border-color: #f0605a; }
.cp2 .cp2-cseg { position: relative; }
.cp2 .cp2-cseg-menu {
  position: absolute; top: 5px; right: 7px; color: var(--cp2-subtle); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 1px 3px; border-radius: 4px;
}
.cp2 .cp2-cseg-menu:hover { color: var(--cp2-text); background: var(--cp2-surface-3); }

/* cp2 — header-line tabs, phases, cardio recurrence */
.cp2 .cp2-headactions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.cp2 .cp2-tabs-inline { margin-top: 0; display: flex; gap: 2px; }
.cp2 .cp2-tabs-inline .cp2-tab { padding: 8px 12px; }
.cp2 .cp2-btn-sm { font-size: 11.5px; padding: 5px 10px; }
.cp2 .cp2-phasestrip {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 11px 0 2px;
}
/* (.cp2-ph-t retired 2026-07-16 — the "Phases" caption became a real .cp2-rhead/.cp2-rlabel
   section heading so it lines up with "Daily targets" in the rail opposite.) */
.cp2 .cp2-ph-empty { font-size: 12px; color: var(--cp2-subtle); }

/* ══ PHASE STEPPER ═══════════════════════════════════════════════════════════════
   Replaced floating chips + a → glyph (Clayton, 2026-07-16). The chips read as
   "flimsy" for a measurable reason: their border was --cp2-border = 1.34:1 on the
   page, i.e. no perceptible edge at all, and 33px of dead air separated two 27px
   chips with only a lone 13px arrow — the thinnest mark on the strip — holding them
   together. Nothing here floats: the line is continuous and every node sits on it.

   THE IDEA (Clayton's, and it's the load-bearing one): steps are EVENLY SPACED so a
   1-week deload gets the same room as a 12-week block and nothing is ever squeezed
   into an unreadable sliver. Real time rides the CONNECTOR FILL instead — the link
   leaving the current phase fills to how far through that phase we are, so it crawls
   across a long block and races across a short one. That is why this is neither a
   stepper (no time) nor a timeline (slivers): it is both, and neither cost is paid.

   STATE IS SHAPE + LUMINANCE, NEVER HUE (Clayton is colourblind):
     done = solid node + check + solid line   now = ring + the only --cp2-text label
     next = hollow node + DOTTED line
   The dots are not decoration — dotted IS "not yet", solid IS "done".
   Node outline is --cp2-border-ctl (4.25:1). The chips' 1.34 is what we came from.
   The phase's own colour is IDENTITY, not state: it only ever fills the node's dot.
───────────────────────────────────────────────────────────────────────────────── */
/* padding = half a node. The steps are zero-width so the nodes centre exactly on the
   flex positions (that is what keeps them evenly spaced), which means the end nodes
   would straddle the strip's edges and hang half-out. */
.cp2 .cp2-st { display: flex; align-items: flex-start; width: 100%; padding: 0 13px; }
.cp2 .cp2-st-step {
  display: flex; flex-direction: column; align-items: center;
  flex: 0 0 auto; width: 0; min-width: 0;
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
.cp2 .cp2-st-node {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--cp2-border-ctl); background: var(--cp2-bg);
  position: relative; z-index: 1;
  transition: border-color .12s, border-width .12s, box-shadow .12s;
}
.cp2 .cp2-st-dot { width: 8px; height: 8px; border-radius: 50%; }
.cp2 .cp2-st-chk { width: 12px; height: 12px; stroke: var(--cp2-bg); stroke-width: 3; fill: none; }
.cp2 .cp2-st-lbl { margin-top: 9px; font-size: 11.5px; font-weight: 500; color: var(--cp2-muted); white-space: nowrap; }
.cp2 .cp2-st-meta { margin-top: 2px; font-size: 10px; color: var(--cp2-subtle); white-space: nowrap; }
/* End labels are centred under a node sitting at the strip's edge, so half of each
   hangs outside — "Plan phase" rendered as "Plan phas". Tuck the outer two inward so
   their outer edge lines up with their node's. Everything between stays centred. */
.cp2 .cp2-st-step:first-child .cp2-st-lbl,
.cp2 .cp2-st-step:first-child .cp2-st-meta { transform: translateX(calc(50% - 13px)); }
.cp2 .cp2-st-step:last-child .cp2-st-lbl,
.cp2 .cp2-st-step:last-child .cp2-st-meta { transform: translateX(calc(-50% + 13px)); }
/* A lone node (the no-phases CTA) is BOTH first and last child, so the last-child rule
   won and shoved "Plan phase" off the LEFT edge — it rendered as "lan phase". A single
   node sits at the strip's start, so it wants the first-child tuck. Must stay after the
   rule above: same specificity, source order decides. */
.cp2 .cp2-st-step:only-child .cp2-st-lbl,
.cp2 .cp2-st-step:only-child .cp2-st-meta { transform: translateX(calc(50% - 13px)); }

.cp2 .cp2-st-done .cp2-st-node { background: var(--cp2-border-ctl); border-color: var(--cp2-border-ctl); }
/* The ring wears the phase's own INK (--phi), the same colour the calendar prints that
   phase's label in — so the stepper and the tinted days below agree (Clayton, 2026-07-16).
   Falls back to brand if a phase somehow has no colour. */
.cp2 .cp2-st-now .cp2-st-node {
  border-color: var(--phi, var(--cp2-brand-bright)); width: 30px; height: 30px; margin-top: -2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--phi, var(--cp2-brand)) 20%, transparent);
}
.cp2 .cp2-st-now .cp2-st-lbl { color: var(--cp2-text); font-weight: 650; }
.cp2 .cp2-st-now .cp2-st-meta { color: var(--cp2-muted); }
.cp2 .cp2-st-next .cp2-st-node { border-style: dashed; }
.cp2 .cp2-st-next .cp2-st-dot { background: transparent; box-shadow: inset 0 0 0 1px var(--cp2-border-ctl); }

/* HOVER INTENSIFIES THE NODE'S OWN COLOUR — it never swaps to brand (Clayton, 2026-07-16).
   Turning an amber ring blue on hover undoes the exact thing the ring's colour is for.
   The change is WEIGHT, not hue: 2px -> 3px of the same ink, plus a wider halo on the
   live node. Weight is a channel a colourblind coach actually gets; a hue swap is not.
   No layout shift — box-sizing: border-box (styles.css:4) makes the extra pixel eat
   inward, so the node stays 26/30px and the strip never reflows on mouse-over.
   A done/next node has --phi too, so hovering it reveals that phase's colour rather
   than announcing a generic "clickable". */
.cp2 .cp2-st-step:hover .cp2-st-node {
  border-color: var(--phi, var(--cp2-brand-bright));
  border-width: 3px;
}
.cp2 .cp2-st-now:hover .cp2-st-node {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--phi, var(--cp2-brand)) 30%, transparent);
}
.cp2 .cp2-st-step:focus-visible { outline: 2px solid var(--cp2-brand-bright); outline-offset: 3px; border-radius: 4px; }

/* SELECTED phase (Clayton, 2026-07-21) — clicking a step scopes the tab to it.
   The running phase keeps its native amber ring when picked; a future/past phase
   wears a brand ring so "which phase am I editing" is unmistakable. Label always
   goes bright + heavy. Selection is NOT hue-only: the label weight + the pencil
   affordance carry it too (Clayton is colourblind). */
.cp2 .cp2-st-sel:not(.cp2-st-now) .cp2-st-node {
  border-color: var(--cp2-brand-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp2-brand) 22%, transparent);
}
.cp2 .cp2-st-sel .cp2-st-lbl { color: var(--cp2-text); font-weight: 650; }
/* Pencil = edit the phase's name/dates/goal (was the whole-step click before). Shows
   on the selected step and on hover; a nested <span>, never a nested <button>. */
.cp2 .cp2-st-step { position: relative; }
.cp2 .cp2-st-edit {
  position: absolute; top: -7px; left: 15px; width: 18px; height: 18px;
  display: grid; place-items: center; border-radius: 4px; z-index: 3;
  color: var(--cp2-subtle); background: var(--cp2-bg); cursor: pointer;
  opacity: 0; transition: opacity .12s, color .12s;
}
.cp2 .cp2-st-edit svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }
.cp2 .cp2-st-step:hover .cp2-st-edit,
.cp2 .cp2-st-sel .cp2-st-edit { opacity: 1; }
.cp2 .cp2-st-edit:hover { color: var(--cp2-text); }

/* Planning banner — only when a future phase is selected. */
.cp2 .cp2-planban {
  display: flex; align-items: center; gap: 11px; margin: 0 0 16px;
  padding: 10px 14px; border-radius: var(--cp2-radius, 8px);
  background: color-mix(in srgb, var(--cp2-brand) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--cp2-brand) 32%, transparent);
  font-size: 13px; color: var(--cp2-text);
}
.cp2 .cp2-planban-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cp2-brand-bright); flex: 0 0 auto; }
.cp2 .cp2-planban-txt { color: var(--cp2-muted); }
.cp2 .cp2-planban-txt b { color: var(--cp2-text); font-weight: 600; }
.cp2 .cp2-planban-copy {
  margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
  color: #fff; background: var(--cp2-brand); border: 1px solid var(--cp2-brand);
  border-radius: var(--cp2-radius-sm, 4px); padding: 6px 11px;
}
.cp2 .cp2-planban-copy:hover { background: var(--cp2-brand-bright); }
.cp2 .cp2-planban-copy svg { stroke: currentColor; fill: none; }

/* "Copy from current" button on a blank phase-scoped target. */
.cp2 .cp2-copyfrom {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px;
  color: var(--cp2-subtle); background: none; border: 1px solid var(--cp2-border-ctl);
  border-radius: var(--cp2-radius-sm, 4px); cursor: pointer; vertical-align: middle;
  transition: color .12s, border-color .12s;
}
.cp2 .cp2-copyfrom:hover { color: var(--cp2-brand-bright); border-color: var(--cp2-brand-bright); }
.cp2 .cp2-copyfrom svg { stroke: currentColor; fill: none; }

/* A finished phase's banner is quieter — it is history, not a plan in hand.
   The standing is carried by the WORD next to the name; this only stops the
   sapphire tint claiming attention a read-only phase hasn't earned. */
.cp2 .cp2-planban-past {
  background: var(--cp2-surface-2);
  border-color: var(--cp2-border-2);
}
.cp2 .cp2-planban-past .cp2-planban-dot { background: var(--cp2-subtle); }
/* Standing — past / current / future said in words. Never colour alone. */
.cp2 .cp2-standing {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cp2-muted); border: 1px solid var(--cp2-border-2); border-radius: 4px;
  padding: 1px 5px; margin: 0 2px; white-space: nowrap;
}
/* Copy-forward: which elements move into which phase. */
.cp2 .cp2-cflist { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.cp2 .cp2-cfrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cp2-text); cursor: pointer; }
.cp2 .cp2-cfrow input { accent-color: var(--cp2-brand); width: 14px; height: 14px; flex: 0 0 auto; }
/* "In this phase" on a program card — a word, so the whole schedule list can
   stay visible (slicing it is what hid a deload) while still saying which
   blocks the selected phase owns. */
.cp2 .cp2-tl-inphase {
  font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cp2-brand-bright); border: 1px solid color-mix(in srgb, var(--cp2-brand) 45%, transparent);
  border-radius: 4px; padding: 1px 5px; margin-left: 6px;
}
/* Carry-forward note shown for an element the phase hasn't set. */
.cp2 .cp2-phcarry { font-style: italic; line-height: 1.5; }
.cp2 .cp2-phwin { font-style: italic; }

/* Future-phase nutrition picker. */
.cp2 .cp2-phnut-actions { display: flex; gap: 14px; margin-top: 8px; }
.cp2 .cp2-phnut-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.cp2 .cp2-phnut-opt {
  text-align: left; padding: 9px 11px; border-radius: var(--cp2-radius-sm, 4px);
  border: 1px solid var(--cp2-border-2); background: var(--cp2-surface-2); color: var(--cp2-text);
  cursor: pointer; font: inherit; transition: border-color .12s;
}
.cp2 .cp2-phnut-opt:hover { border-color: var(--cp2-brand-bright); }

/* Future-phase habits. */
.cp2 .cp2-phhab-empty { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; margin-top: 6px; }
.cp2 .cp2-copyfrom-wide {
  width: auto; height: auto; padding: 6px 11px; gap: 6px; display: inline-flex; align-items: center;
  font: inherit; font-size: 12px; font-weight: 500;
}
.cp2 .cp2-phhab-chip { position: relative; padding-right: 26px; }
.cp2 .cp2-phhab-x {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%;
  color: var(--cp2-subtle); font-size: 13px; line-height: 1;
}
.cp2 .cp2-phhab-x:hover { color: var(--cp2-red); background: rgba(240,96,90,.12); }

/* the connector: dotted by default = not yet; ::before fills it = travelled */
.cp2 .cp2-st-link {
  flex: 1 1 auto; height: 2px; margin-top: 12px; position: relative; min-width: 24px;
  background-image: radial-gradient(circle, var(--cp2-border-ctl) 1px, transparent 1.2px);
  background-size: 7px 2px; background-repeat: repeat-x;
}
.cp2 .cp2-st-link::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--fill, 0%); background: var(--cp2-border-ctl); border-radius: 1px;
}
/* The live segment wears the current phase's ink too — it IS that phase's progress, so
   it belongs to the phase, not to the system. Its head is where "now" is. */
.cp2 .cp2-st-link.cp2-st-live::before { background: var(--phi, var(--cp2-brand-bright)); }
.cp2 .cp2-st-link.cp2-st-live::after {
  content: ''; position: absolute; top: -2px; left: var(--fill, 0%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--phi, var(--cp2-brand-bright));
  transform: translateX(-3px);
}
/* The head breathes so "in progress" reads without a number — and motion, not hue, is
   what says "live", which is why colouring this by phase costs nothing. It is the only
   moving thing on the tab: deliberate, and it stops for anyone who asks it to. */
@media (prefers-reduced-motion: no-preference) {
  .cp2 .cp2-st-link.cp2-st-live::after { animation: cp2-st-pulse 2.4s ease-in-out infinite; }
}
@keyframes cp2-st-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--phi, var(--cp2-brand-bright)) 55%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--phi, var(--cp2-brand-bright)) 0%, transparent); }
}
/* "+ Plan phase" is a real node so the line ends somewhere instead of trailing off */
.cp2 .cp2-st-add .cp2-st-node { border-style: dashed; border-color: var(--cp2-border-strong); background: none; }
.cp2 .cp2-st-add .cp2-st-node::before { content: '+'; color: var(--cp2-subtle); font-size: 14px; line-height: 1; }
.cp2 .cp2-st-add .cp2-st-lbl { color: var(--cp2-subtle); }
.cp2 .cp2-st-add:hover .cp2-st-node { border-color: var(--cp2-brand-bright); }
.cp2 .cp2-st-add:hover .cp2-st-node::before { color: var(--cp2-brand-bright); }
.cp2 .cp2-day-inphase { background: rgba(37, 87, 214, .07); }
.cp2 .cp2-phl {
  font-size: 7.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #8fb6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70px;
}
.cp2-pop .cp2-addlbl { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a93a6; }
/* cp2 — labeled check-in day marker (replaces the bare amber checkmark) */
.cp2 .cp2-cimark {
  width: fit-content; font-size: 8.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--cp2-amber); background: rgba(245,165,36,.12);
  border: 1px dashed rgba(245,165,36,.35); border-radius: 4px; padding: 1px 5px;
}

/* cp2 — repeat picker restyle (image-2 style: letter IS the button) */
.cp2-hide { display: none !important; }
.cp2-pop .cp2-rseg { display: flex; background: #232c3d; border: 1px solid #2f3a49; border-radius: 8px; overflow: hidden; width: fit-content; }
.cp2-pop .cp2-rseg button {
  font-size: 12px; font-weight: 500; color: #97a3b6; padding: 6px 14px;
  background: none; border: none; cursor: pointer;
}
.cp2-pop .cp2-rseg button.on { background: #2557d6; color: #fff; }
.cp2-pop .cp2-dows { display: flex; gap: 5px; margin-top: 2px; }
.cp2-pop .cp2-dow { cursor: pointer; }
.cp2-pop .cp2-dow input { display: none; }
.cp2-pop .cp2-dow span {
  display: grid; place-items: center; width: 30px; height: 30px;
  font-size: 12px; font-weight: 600; color: #97a3b6;
  background: #232c3d; border: 1px solid #2f3a49; border-radius: 7px;
  transition: background .12s, color .12s, border-color .12s;
}
.cp2-pop .cp2-dow input:checked + span { background: #2557d6; border-color: #2557d6; color: #fff; }
.cp2-pop .cp2-dow:hover span { border-color: #3a4658; }

/* cp2 — popovers are position:fixed and TRACK their anchor on scroll
   (see _placePop): fixed + live-rect repositioning keeps them glued to
   the day/button regardless of which container scrolls. */

/* cp2 — add-item form gets tall (smart cardio); scroll in place */
.cp2-addpop { max-height: 82vh; overflow-y: auto; }

/* cp2 — Habits section (coach assign UI over the existing habit engine) */
.cp2 .cp2-habrow { display: flex; flex-wrap: wrap; gap: 8px; }
.cp2 .cp2-habchip {
  display: inline-flex; align-items: center; gap: 8px; color: var(--cp2-text);
  background: var(--cp2-surface); border: 1px solid var(--cp2-border);
  border-radius: 999px; padding: 6px 13px 6px 9px; cursor: pointer;
}
.cp2 .cp2-habchip:hover { border-color: var(--cp2-brand); }
.cp2 .cp2-habicon { font-size: 15px; line-height: 1; }
.cp2 .cp2-habname { font-size: 12.5px; font-weight: 600; }
.cp2 .cp2-habfreq { font-size: 10.5px; color: var(--cp2-subtle); letter-spacing: .04em; }

/* cp2 — emoji icon picker in the habit form */
.cp2-pop .cp2-habicons { display: flex; flex-wrap: wrap; gap: 5px; }
.cp2-pop .cp2-habicopt {
  width: 34px; height: 34px; font-size: 16px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  background: #232c3d; border: 1px solid #2f3a49; border-radius: 8px;
}
.cp2-pop .cp2-habicopt.on { border-color: #2557d6; box-shadow: inset 0 0 0 1px #2557d6; background: #1e2a44; }
.cp2-pop .cp2-habicopt:hover { border-color: #3a4658; }
/* cp2 — the smart cardio add form is a 2-column grid; give it room */
.cp2-addpop { width: 420px; max-width: calc(100vw - 24px); }
.cp2-pop .cp2-addgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 12px; }
.cp2-pop .cp2-addgrid > .cp2-full { grid-column: 1 / -1; }
.cp2-pop .cp2-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cp2-pop .cp2-fldl {
  font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #7d8aa1;
}
.cp2-pop .cp2-fldl em { font-style: normal; font-weight: 500; color: #5a6578; text-transform: none; letter-spacing: 0; }
.cp2-pop .cp2-addgrid .cp2-input { width: 100%; box-sizing: border-box; }
.cp2-pop .cp2-ivl3 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cp2-pop .cp2-ivl3 .cp2-input { width: 100%; box-sizing: border-box; }
.cp2-pop .cp2-addgrid .cp2-rseg { width: fit-content; }

/* cp2 — Client settings card: a vertical stack of coach-set knobs
   (steps / water / sleep · check-in day · calendar permission). Sits
   beside the nutrition card so the two columns balance in height. */
.cp2 .cp2-settingscard {
  flex: 1 1 300px; max-width: 380px;
  display: flex; flex-direction: column; gap: 11px;
  background: var(--cp2-surface); border: 1px solid var(--cp2-border);
  border-radius: 10px; padding: 12px 16px;
}
/* Fixed unit column (not max-content) so every independent row-grid uses
   identical column widths → inputs line up across rows. */
.cp2 .cp2-set-row { display: grid; grid-template-columns: 1fr 92px 52px; align-items: center; gap: 10px; min-height: 30px; }
.cp2 .cp2-set-row .cp2-tgt-u { text-align: left; }
.cp2 .cp2-set-row .cp2-fldl { flex: 0 0 auto; }
.cp2 .cp2-set-row .cp2-stepinput { width: 100%; }
.cp2 .cp2-tgt-f { display: flex; align-items: center; gap: 7px; }
.cp2 .cp2-tgt-u { font-size: 12px; color: var(--cp2-subtle); }
.cp2 .cp2-tgt-unit {
  font-size: 12.5px; font-weight: 500; color: var(--cp2-text);
  background: var(--cp2-surface-2); border: 1px solid var(--cp2-border-2);
  border-radius: 6px; padding: 6px 8px; cursor: pointer;
}
.cp2 .cp2-tgt-unit:focus { outline: none; border-color: var(--cp2-brand); }

/* cp2 — upgraded <select>. upgradeSelects() hides the native control and
   inserts a .custom-select sibling, so the OPEN list is our own markup
   instead of the OS popup (which ignored every style below and rendered
   light-on-white inside a dark popover). The native rules underneath still
   apply to the hidden element — harmless, and they remain the fallback for
   any select that hasn't been upgraded.
   These re-skin .custom-select to the cp2 popover palette; the global
   .custom-select-* rules are tuned for the main dashboard surface, whose
   tokens don't reach a body-mounted cp2 popover. */
.cp2-pop .custom-select-trigger {
  background: #232c3d; border: 1px solid #2f3a49; border-radius: 6px;
  color: #e9edf4; font-size: 12.5px; padding: 7px 9px;
}
.cp2-pop .custom-select-trigger:hover { border-color: #3b4759; }
.cp2-pop .custom-select-trigger:focus { border-color: #2557d6; }
.cp2-pop .custom-select-trigger svg { color: #97a3b6; }
.cp2-pop .custom-select-dropdown {
  background: #1e2535; border: 1px solid #2f3a49; border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.cp2-pop .custom-select-option { font-size: 12.5px; padding: 7px 10px; color: #c3cbd8; }
.cp2-pop .custom-select-option:hover { background: #232c3d; color: #e9edf4; }
.cp2-pop .custom-select-option.active { background: rgba(37,87,214,.16); color: #7ea2f5; font-weight: 500; }
/* Length + unit sit on one row — the unit must stay its own width, not
   stretch to fill the row the way a full-width field does. */
.cp2-pop .cp2-tgt-f .custom-select { width: auto; flex: 0 0 auto; }
.cp2-pop .cp2-tgt-f .custom-select-trigger { gap: 6px; }
.cp2-pop .cp2-tgt-f .custom-select-dropdown { min-width: 96px; }

/* cp2 — style native <select> boxes consistently (dark + custom chevron,
   no OS default arrow). Fallback for any select upgradeSelects() hasn't
   replaced; on an upgraded one the element is display:none. */
.cp2 select.cp2-tgt-unit,
.cp2-pop select.cp2-input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%2397a3b6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 12px;
}
.cp2-pop select.cp2-input:focus { outline: none; border-color: #2557d6; }

/* cp2 — habit form: roomy, clearly grouped sections */
.cp2-habpop { width: 344px; }
.cp2-pop .cp2-habform { padding: 15px 16px; display: flex; flex-direction: column; gap: 16px; }
.cp2-pop .cp2-habsec { display: flex; flex-direction: column; gap: 9px; }
.cp2-pop .cp2-habform .cp2-input { width: 100%; box-sizing: border-box; }
.cp2-pop .cp2-habform .cp2-rseg { display: flex; width: 100%; }
.cp2-pop .cp2-habform .cp2-rseg button { flex: 1; text-align: center; padding: 6px 8px; white-space: nowrap; }
.cp2-pop .cp2-habform .cp2-dows { display: flex; flex-wrap: wrap; gap: 6px; }
.cp2-pop .cp2-habactions { display: flex; gap: 8px; padding-top: 14px; border-top: 1px solid #232c39; }
.cp2-pop .cp2-habactions .cp2-btn-pri { flex: 1; }
.cp2-pop .cp2-habactions .cp2-btn-danger { color: #f0605a; border-color: #402a2e; background: transparent; }
.cp2-pop .cp2-habactions .cp2-btn-danger:hover { border-color: #f0605a; }

/* cp2 — steady target pair + interval work/rest target pair (2-up) */
.cp2-pop .cp2-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 12px; }
.cp2-pop .cp2-ivl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 9px; }
.cp2-pop .cp2-subgrid .cp2-input,
.cp2-pop .cp2-ivl-pair .cp2-input { width: 100%; box-sizing: border-box; }

/* cp2 — phase form (reuses the grouped hab-form layout) */
.cp2-phasepop { width: 340px; }

/* cp2 — Habit tab nested inside the "+" popup (no double padding) */
.cp2-pop .cp2-addform .cp2-habform { padding: 0; }
.cp2-pop .cp2-habit-current:not(:empty) {
  display: flex; flex-direction: column; gap: 9px;
  padding-top: 14px; border-top: 1px solid #232c39;
}

/* cp2 — native date inputs were rendering in the system font */
.cp2-pop .cp2-input[type="date"] { font-family: inherit; }
.cp2-pop .cp2-input[type="date"]::-webkit-datetime-edit { font-family: inherit; }

/* cp2 — Nutrition card: plan + per-day targets (subtext) + focus/tolerance */
.cp2 .cp2-nutcard {
  flex: 2 1 380px; max-width: 560px;
  background: var(--cp2-surface); border: 1px solid var(--cp2-border);
  border-radius: 10px; padding: 12px 16px;
}
/* Equal card-header height so WORKOUT PROGRAM / NUTRITION / DAILY TARGETS
   labels sit at the same y when read across the top row. */
.cp2 .cp2-chain-head,
.cp2 .cp2-nut-head,
.cp2 .cp2-set-head { min-height: 28px; }
.cp2 .cp2-nut-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cp2 .cp2-nut-head .cp2-slim-m { flex: 1; min-width: 0; }
.cp2 .cp2-nut-plan { margin-top: 10px; }
.cp2 .cp2-nut-lines { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
/* Consistent card-header label (matches WORKOUT PROGRAM) across cards */
.cp2 .cp2-nut-head .cp2-chain-t,
.cp2 .cp2-set-head .cp2-chain-t { margin: 0; }
.cp2 .cp2-nut-line { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; }
.cp2 .cp2-nut-dn { color: var(--cp2-muted); font-weight: 500; white-space: nowrap; }
.cp2 .cp2-nut-mv { color: var(--cp2-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp2 .cp2-nut-mv b { font-weight: 600; }
.cp2 .cp2-nut-p { color: #2bbd7e; }
.cp2 .cp2-nut-c { color: #f5a524; }
.cp2 .cp2-nut-f { color: #5a86f5; }
.cp2 .cp2-ph-prev { font-size: 11.5px; color: var(--cp2-subtle); white-space: nowrap; }

/* Assign modal — Length vs End-date toggle */
.assign-endmode { display: inline-flex; gap: 3px; margin-bottom: 8px; padding: 2px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 7px; }
.assign-endmode-btn { font-size: 12px; font-weight: 500; padding: 4px 12px; border: none; background: none; color: var(--text-secondary, #97a3b6); border-radius: 5px; cursor: pointer; }
.assign-endmode-btn.active { background: var(--accent, #2557d6); color: #fff; }

/* cp2 — Protocols (supplements & PEDs), gated. Neutral record-keeping. */
.cp2 .cp2-protocols:empty { display: none; }
.cp2 .cp2-protocols { margin: 0 0 14px; }
.cp2 .cp2-proto-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--cp2-surface); border: 1px solid var(--cp2-border);
  border-radius: 10px; padding: 10px 14px;
}
.cp2 .cp2-protocard {
  background: var(--cp2-surface); border: 1px solid var(--cp2-border);
  border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px;
}
.cp2 .cp2-protocard .cp2-proto-bar { background: none; border: 0; padding: 0; }
.cp2 .cp2-proto-group { display: flex; flex-direction: column; gap: 8px; }
.cp2 .cp2-proto-ghead { display: flex; align-items: center; justify-content: space-between; }
.cp2 .cp2-proto-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cp2 .cp2-protochip {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: var(--cp2-surface-2); border: 1px solid var(--cp2-border-2);
  border-radius: 8px; padding: 6px 11px; cursor: pointer; color: var(--cp2-text);
}
.cp2 .cp2-protochip:hover { border-color: var(--cp2-brand); }
.cp2 .cp2-proto-name { font-size: 12.5px; font-weight: 600; }
.cp2 .cp2-proto-meta { font-size: 10.5px; color: var(--cp2-subtle); }

/* cp2 — Program top row: equal-height vertical cards, each scrolls
   internally. Protocols col hides itself when the coach hasn't enabled
   it → the row is 3 cards, or 4 when protocols is on. */
.cp2 .cp2-toprow { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 9px 0 14px; }
.cp2 .cp2-topcol { flex: 1 1 240px; min-width: 0; min-height: 0; display: flex; }
.cp2 .cp2-topcol:empty { display: none; }
.cp2 .cp2-topcol > * {
  flex: 1 1 auto; width: 100%; max-width: none; box-sizing: border-box;
  min-height: 0; max-height: 340px; overflow-y: auto;
}
/* Workout program as a vertical card: fixed head, scrolling program list */
.cp2 .cp2-chaincard {
  background: var(--cp2-surface); border: 1px solid var(--cp2-border);
  border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; gap: 9px;
}
.cp2 .cp2-topcol > .cp2-chaincard { overflow: hidden; }
.cp2 .cp2-chain-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; }
.cp2 .cp2-chain-head .cp2-chain-t { margin: 0; display: block; }
.cp2 .cp2-chain-vlist { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.cp2 .cp2-chain-vlist .cp2-cseg { width: 100%; min-width: 0; box-sizing: border-box; }
.cp2 .cp2-cgap { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--cp2-subtle); padding-left: 2px; }

/* cp2 — per-card gear (set-once settings tucked into a popover) */
.cp2 .cp2-cardbtns { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cp2 .cp2-set-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cp2 .cp2-gear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border-radius: 7px; cursor: pointer;
  color: var(--cp2-subtle); background: none; border: 1px solid transparent;
}
.cp2 .cp2-gear:hover { color: var(--cp2-text); background: var(--cp2-surface-2); border-color: var(--cp2-border-2); }
.cp2-pop .cp2-habform .cp2-input { width: 100%; box-sizing: border-box; }

/* cp2 — phase color picker (Auto + swatches) in the phase form */
.cp2-pop .cp2-phcolors { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cp2-pop .cp2-phchip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; min-width: 28px; padding: 0 5px; border-radius: 7px;
  background: #232c3d; border: 1px solid #2f3a49; cursor: pointer; color: #97a3b6;
}
.cp2-pop .cp2-phchip-auto { padding: 0 12px; font-size: 12px; font-weight: 500; }
.cp2-pop .cp2-phchip-auto.on { color: #fff; }
.cp2-pop .cp2-phchip-dot { width: 14px; height: 14px; border-radius: 50%; display: block; }
.cp2-pop .cp2-phchip:hover { border-color: #3a4658; }
.cp2-pop .cp2-phchip.on { border-color: #5a86f5; box-shadow: inset 0 0 0 1px #5a86f5; }

/* ============================================================
   FIX: elements inside BODY-LEVEL popovers (.cp2-pop) use classes
   whose styling was scoped to `.cp2` — which the popover is NOT inside.
   Re-declare with hardcoded hex (the --cp2-* tokens live on .cp2 and are
   out of scope here). Values mirror .cp2-pop .cp2-input for consistency.
   ============================================================ */
.cp2-pop .cp2-stepinput {
  width: 86px; text-align: center; font-size: 14px; font-weight: 600;
  background: #232c3d; border: 1px solid #2f3a49; border-radius: 6px;
  color: #e9edf4; padding: 6px 8px; box-sizing: border-box;
}
.cp2-pop .cp2-stepinput:focus { outline: none; border-color: #2557d6; }
.cp2-pop .cp2-tgt-f { display: flex; align-items: center; gap: 7px; }
.cp2-pop .cp2-tgt-u { font-size: 12px; color: #97a3b6; }
.cp2-pop .cp2-ph-prev { font-size: 11.5px; color: #97a3b6; white-space: nowrap; }
.cp2-pop .cp2-tgt-unit {
  font-size: 12.5px; font-weight: 500; color: #e9edf4;
  background-color: #232c3d; border: 1px solid #2f3a49; border-radius: 6px;
  padding: 6px 28px 6px 8px; cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%2397a3b6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 12px;
}
.cp2-pop .cp2-tgt-unit:focus { outline: none; border-color: #2557d6; }

/* Classic Assign-Workout modal <select class="form-select"> had NO styling
   (native OS look). Style it dark + custom chevron, classic tokens. */
.form-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-color: var(--surface-2, #1e2535); border: 1px solid var(--border, #2f3a49);
  color: var(--text, #e9edf4); border-radius: 7px; padding: 9px 34px 9px 11px;
  font: 13px/1.5 inherit; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%2397a3b6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
}
.form-select:focus { outline: none; border-color: var(--accent, #2557d6); }

/* cp2 — small styled action menu (replaces window.prompt for ⋯ / delete) */
.cp2-pop.cp2-menu { width: auto; min-width: 190px; padding: 5px; }
.cp2-menu-item {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: 8px 12px; background: none; border: none; border-radius: 7px;
  cursor: pointer; color: #e9edf4; font-size: 12.5px; white-space: nowrap;
}
.cp2-menu-item:hover { background: #232c3d; }
.cp2-menu-danger { color: #f0605a; }
.cp2-menu-danger:hover { background: rgba(240,96,90,.12); }

/* cp2 — past calendar days recede: fade the workouts + mute the number,
   but keep the phase wash so a past phase still reads its color. */
/* NO opacity on past chips. They are the RECORD of work the client actually did —
   the highest-value data on the tab — and .cp2-cimark (the labelled check-in badge)
   renders inside .cp2-day-chips too, so this dimmed that to 2.62:1 as collateral.
   Past-ness is already carried by the numeral colour below plus position relative to
   today's filled brand disc. If past chips ever must recede, use the house precedent
   at .gcal-tl-event.is-past (filter: brightness/saturate) — a filter darkens without
   compositing toward the page, so the label keeps its own ratio — and re-measure. */
.cp2 .cp2-day-past .cp2-day-n { color: var(--cp2-subtle); }

/* ============================================================
   Assign Workout Program modal — CRM 2.0 restyle. The modal is
   body-level (not inside .cp2), so hardcode hex matching the cp2
   popover palette. Scoped to #assign-workout-overlay.
   ============================================================ */
/* Day mapping → weekday columns, one workout dropdown each (Clayton, 2026-08-04).
   The selects ride upgradeSelects (custom-select); overrides below compact the
   trigger so 7 columns fit, and mute a column that's resting. */
#assign-workout-overlay .assign-dm-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
#assign-workout-overlay .assign-dm-wd { font-size: 11px; font-weight: 600; color: #97a3b6; text-align: center; margin-bottom: 6px; }
#assign-workout-overlay .assign-dm-col .custom-select-trigger {
  padding: 7px 7px; font-size: 12px; gap: 3px;
  background: #232c3d; border-color: #2f3a49; color: #e9edf4; border-radius: 7px;
}
#assign-workout-overlay .assign-dm-col .custom-select-trigger:hover { border-color: #3a4658; }
#assign-workout-overlay .assign-dm-col .custom-select-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#assign-workout-overlay .assign-dm-col .custom-select-trigger svg { width: 10px; height: 10px; }
/* A resting day recedes; a scheduled day reads at full strength (not colour-only —
   the trigger literally says "Rest"). */
#assign-workout-overlay .assign-dm-rest .custom-select-trigger { color: #97a3b6; background: transparent; }
#assign-workout-overlay .assign-dm-note { margin-top: 8px; font-size: 12px; color: #97a3b6; }

/* Schedule fields: Ends-by toggle on its own row above a symmetric
   Start-date | Duration grid, so both inputs are the same width + aligned. */
#assign-workout-overlay .assign-endmode-row { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; }
#assign-workout-overlay .assign-schedule-grid { grid-template-columns: 180px 180px; gap: 16px; margin-bottom: 4px; align-items: start; }
#assign-workout-overlay .assign-schedule-grid .form-input { width: 100%; box-sizing: border-box; max-width: none; }
#assign-workout-overlay #assign-starting-cycle-day { max-width: 150px; }

/* Spacing / grouping between sections */
#assign-workout-overlay .form-group { margin-top: 18px; }
#assign-workout-overlay .form-hint { margin: 3px 0 10px; }

/* Access picker → sapphire highlight (was Tailwind-blue) */
#assign-workout-overlay .assign-access-opt { border-color: #2f3a49; border-radius: 8px; }
#assign-workout-overlay .assign-access-opt:hover { border-color: #3a4658; }
#assign-workout-overlay .assign-access-opt:has(input:checked) { border-color: #2557d6; background: rgba(37,87,214,.08); }
#assign-workout-overlay .assign-access-opt input:checked ~ div .assign-access-title { color: #5a86f5; }

/* Length / End-date toggle → sapphire active */
#assign-workout-overlay .assign-endmode-btn.active { background: #2557d6; }

/* Assign modal — grouping & rhythm (impeccable/layout pass) */
/* Program group: select label row with the style badge tucked to the right */
#assign-workout-overlay .assign-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
#assign-workout-overlay .assign-style-badge:empty { display: none; }
/* Separate the schedule group from the program pick — a real beat of space */
#assign-workout-overlay #assign-step-schedule { margin-top: 20px; padding-top: 20px; border-top: 1px solid #232c39; }
#assign-workout-overlay .assign-endmode-row { margin: 0 0 16px; }

/* ═══ CP2 Program tab — 2-column redesign (S52, 2026-07-15) ═══
   Narrow "record" rail (nutrition per-day → supplements → PEDs → cardio →
   program timeline) + vertical divider + calendar filling the width, with an
   inline-editable daily-targets row above it. Structure from alignment, not cards. */
/* 30px matches the header's own breathing room (30 above the name row, 30 below the stats
   to the border) so the page keeps one rhythm across the boundary instead of the content
   starting 19px up under the line. This rule is the SINGLE owner of the header->content
   gap: .cp2-rail and .cp2-phbar both zero their top padding so the two columns start
   level. Change the header's padding and change this with it. */
.cp2 .cp2-2col { display: grid; grid-template-columns: 262px 1px 1fr; gap: 24px; align-items: stretch; padding-top: 30px; }
.cp2 .cp2-coldiv { background: var(--cp2-border); }
/* No padding-top: .cp2-2col's 30px now owns the whole header->content gap, for BOTH
   columns, so the rail and the phase bar start level. Adding padding back here would
   stack on top of that 30px and push the rail below the calendar side. */
.cp2 .cp2-rail { display: flex; flex-direction: column; min-width: 0; }
.cp2 .cp2-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* rail section atoms */
.cp2 .cp2-rhead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cp2 .cp2-rlabel { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--cp2-subtle); margin-right: auto; }
.cp2 .cp2-rlink { font-size: 11.5px; font-weight: 500; color: var(--cp2-muted); background: none; border: none; padding: 2px 3px; cursor: pointer; transition: color .15s; }
/* Client-level default-goal chip on the Phases heading — shows/sets the Effort
   fallback goal; amber "unset" state nudges the coach to set one. */
.cp2 .cp2-goalchip { font-size: 11px; font-weight: 500; color: var(--cp2-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; padding: 3px 11px; cursor: pointer; transition: border-color .15s, color .15s; }
.cp2 .cp2-goalchip:hover { border-color: var(--primary); color: var(--text); }
.cp2 .cp2-goalchip--unset { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.cp2 .cp2-goalchip--unset:hover { border-color: var(--warning); color: var(--warning); }
.cp2 .cp2-rlink:hover { color: var(--cp2-brand-bright); }
.cp2 .cp2-rgear { width: 22px; height: 22px; display: grid; place-items: center; color: var(--cp2-subtle); background: none; border: none; border-radius: 5px; cursor: pointer; transition: .15s; }
.cp2 .cp2-rgear:hover { color: var(--cp2-text); background: var(--cp2-surface-2); }
.cp2 .cp2-rgear svg { width: 14px; height: 14px; }
.cp2 .cp2-rbig { font-size: 14px; font-weight: 600; color: var(--cp2-text); letter-spacing: -.01em; }
.cp2 .cp2-rmode { font-size: 11.5px; font-weight: 400; color: var(--cp2-subtle); margin-left: 6px; }
.cp2 .cp2-rsub { font-size: 12px; color: var(--cp2-subtle); }
.cp2 .cp2-rdiv { height: 1px; background: var(--cp2-border); margin: 15px 0; }

/* nutrition per-day — collapses to content (no dead space on a 2-day plan) but
   caps at ~5 days and scrolls beyond. Macros share ONE neutral tone: the P/C/F
   letters carry the meaning, and colour-coding made this out-shout the page. */
.cp2 .cp2-nutwrap { position: relative; margin-top: 9px; }
/* Fits a header + 5 day rows (measured: 150.25px) before it will scroll; a 6th row
   (175.75px) is what finally overflows. Most plans are 2–4 days, so in practice this
   never scrolls and the ▾ never appears. */
.cp2 .cp2-nutscroll { max-height: 158px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--cp2-border-2) transparent; }
.cp2 .cp2-nutscroll::-webkit-scrollbar { width: 5px; }
.cp2 .cp2-nutscroll::-webkit-scrollbar-thumb { background: var(--cp2-border-2); border-radius: 3px; }
/* TAB STOPS: every row's cells join ONE shared grid (via display:contents on the
   row), so calories / P / C / F land in fixed columns regardless of digit count —
   a 90 lines up under a 250. Right-aligned + tabular-nums so the digits register. */
/* The padding is not decorative — it absorbs the band's bleed. The band hangs 5px above
   and 4px below the grid tracks so it reads as a ground rather than a tight box; without
   this padding that overhang lands OUTSIDE the content box, which (a) gets clipped at the
   top by .cp2-nutscroll's overflow and (b) adds 4px of phantom scrollHeight at the bottom,
   which made the ▾ scroll hint appear on a 2-day plan that had nothing to scroll. */
.cp2 .cp2-nutlines { display: grid; grid-template-columns: 1fr auto auto auto auto; column-gap: 7px; row-gap: 9px; align-items: baseline; position: relative; padding: 5px 0 4px; }
.cp2 .cp2-nutline { display: contents; }
.cp2 .cp2-nut-dn { font-size: 11px; color: var(--cp2-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1; }
.cp2 .cp2-nut-kcal, .cp2 .cp2-nut-mac { font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; position: relative; z-index: 1; }
/* the letters, said once (Clayton, 2026-07-16) */
.cp2 .cp2-nut-h { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: center; white-space: nowrap; padding-bottom: 1px; position: relative; z-index: 1; }
/* Day rows open the plan builder at that day — cursor + a hover brighten on
   the day name. (.cp2-nutline is display:contents, so the hover ride on the
   cells themselves.) */
.cp2 .cp2-nutline[data-day-id] > span { cursor: pointer; }
.cp2 .cp2-nutline[data-day-id]:hover .cp2-nut-dn { color: var(--cp2-text); text-decoration: underline; text-underline-offset: 2px; }

/* GRADED vs UNGRADED — luminance + weight only, never hue. The macro palette is
   deliberately refused here (it made this the loudest thing on the page, and it is
   invisible to a colourblind coach). "off" is NOT dimmed: --cp2-muted measures 6.69:1,
   a real number you can still read — it just stops competing. Never opacity. */
.cp2 .cp2-nut-kcal.on, .cp2 .cp2-nut-mac.on { color: var(--cp2-text); font-weight: 600; }
.cp2 .cp2-nut-kcal.off, .cp2 .cp2-nut-mac.off { color: var(--cp2-muted); font-weight: 500; }
.cp2 .cp2-nut-h.on { color: var(--cp2-text); }
.cp2 .cp2-nut-h.off { color: var(--cp2-subtle); }

/* T3 band — a faint ground behind the graded columns. Two non-obvious requirements, both
   found by measuring rather than by reading the code:

   position:absolute is LOAD-BEARING. As an in-flow grid item the band occupied real cells,
   so auto-placement flowed every other cell around it: the 1fr day-name column collapsed
   to 31px and the columns scrambled. An absolutely-positioned grid child still resolves
   grid-column against the explicit columns, but takes no part in placing anything else.

   inset:0 is equally load-bearing. The grid area is only the band's CONTAINING BLOCK — with
   inset:auto it shrink-wraps to its own (empty) content and measures 0 tall.

   z-index 0 sits under every cell's 1, so the band can never wash out a number.

   NO negative vertical margin. With grid-row unset, an abspos grid child already resolves
   its row extent to the container's PADDING EDGE — so the band spans the full box on its
   own, and .cp2-nutlines' 5px/4px padding is what gives it breathing room above and below
   the rows. A negative top/bottom margin pushes it PAST the padding edge, which clipped it
   at the top and added 4px of phantom scrollHeight at the bottom — that was the ▾ scroll
   hint appearing on a 2-day plan with nothing to scroll.
   Horizontal bleed stays: columns are explicitly placed, so -5px just widens the ground.

   The alpha is Clayton's pick (2026-07-16) off a swatch strip rendered on the RAIL'S REAL
   GROUND (--cp2-bg #0d1117) with measured ratios — not a mockup card ground, which is how
   this went wrong the first time. .15 = 1.53:1 measured. For scale: it started at .045 = 1.10:1,
   which is arithmetically indistinguishable from the background — in the DOM, impossible to
   see. White-alpha so it composites over whatever it sits on. If you change this, re-measure
   band-vs-page on #0d1117; a screenshot will lie to you at these levels. */
.cp2 .cp2-nutband {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(255, 255, 255, .15); border-radius: 5px;
  margin: 0 -5px;
}

/* An absent stat is still a signal, so the dash keeps a TEXT-ramp colour and stays
   legible — it just stops being typeset at the weight of a real number. .cp2-v inherits
   --cp2-text, which rendered every em-dash exactly as loud as the LTV figure. */
.cp2 .cp2-v.empty { color: var(--cp2-subtle); font-weight: 500; }

/* scroll fade + chevron (shared: nutrition + program timeline) */
.cp2 .cp2-scrfade { position: absolute; left: 0; right: 5px; bottom: 0; height: 22px; pointer-events: none; opacity: 0; transition: opacity .2s;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1px; color: var(--cp2-brand-bright); font-size: 11px;
  background: linear-gradient(rgba(13,17,23,0), var(--cp2-bg)); }

/* cardio rollup */
.cp2 .cp2-cardlines { display: flex; flex-direction: column; gap: 7px; margin-top: 9px; }
/* Rail cardio lines are BUTTONS since the rail edit shipped (2026-08-13):
   full-row hit target into _openCardioEditForm. Chrome reset keeps the row
   look; hover borrows the protochip's brand accent (cursor + title carry the
   affordance too — colour is never the only signal). */
.cp2 .cp2-cardline { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; width: 100%; background: none; border: 0; margin: 0; padding: 0; font: inherit; text-align: inherit; cursor: pointer; }
.cp2 .cp2-cardline:hover .cp2-cardline-nm { color: var(--cp2-brand); }
.cp2 .cp2-cardline-nm { font-size: 12.5px; color: var(--cp2-text); font-weight: 500; }
.cp2 .cp2-cardline-mv { font-size: 11px; color: var(--cp2-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp2 .cp2-cardline-mv b { color: var(--cp2-text); font-weight: 600; }

/* protocols in the rail */
.cp2 .cp2-proto-off { display: inline-block; margin-top: 8px; font-size: 10.5px; color: var(--cp2-subtle); }

/* program timeline */
/* The queue fills whatever rail height is LEFT, down to the calendar's bottom
   (Clayton, 2026-07-28). The pieces that make that work, and why each matters:
   - .cp2-2col has align-items:stretch, so the rail is always as tall as the
     calendar column when the calendar is the taller one (the usual case).
   - .cp2-tlwrap is the rail's LAST flex child; flex:1 hands it all the slack.
     On a big display that's 3–4 queue cards before the scroll fade; on a
     laptop the slack shrinks and it degrades to what it showed before.
   - .cp2-tlscroll gets flex-basis 0 + min-height 200px: its NATURAL height
     contribution stays 200px, so when the rail's other sections are already
     taller than the calendar (small screens, long nutrition plans) the rail
     doesn't grow the page — 200px is the floor, slack is the only bonus.
   The old fixed `max-height:200px` was that floor doing double duty as a
   ceiling — tuned blind, before anyone looked at this on a tall display. */
.cp2 .cp2-tlwrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cp2 .cp2-tlscroll { flex: 1 1 0; min-height: 200px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--cp2-border-2) transparent; }
.cp2 .cp2-tlscroll::-webkit-scrollbar { width: 6px; }
.cp2 .cp2-tlscroll::-webkit-scrollbar-thumb { background: var(--cp2-border-2); border-radius: 3px; }
.cp2 .cp2-tl { position: relative; margin-top: 2px; }
/* Same language as the phase stepper above, turned vertical (Clayton, 2026-07-16):
   circle node, dotted connector = not travelled, filled = travelled, and the link
   leaving the RUNNING program fills at that program's real rate via --fill.
   ::before is the dotted track, ::after is the fill drawn over it. Node is 22px here
   (26px up top) because the rail is only 262px wide and the card sits beside it. */
.cp2 .cp2-tl-node { position: relative; padding-left: 32px; padding-bottom: 12px; cursor: pointer; }
.cp2 .cp2-tl-node:last-child { padding-bottom: 2px; }
.cp2 .cp2-tl-node:not(:last-child)::before {
  content: ""; position: absolute; left: 10px; top: 32px; bottom: -2px; width: 2px;
  background-image: radial-gradient(circle, var(--cp2-border-ctl) 1px, transparent 1.2px);
  background-size: 2px 7px; background-repeat: repeat-y;
}
/* scaleY of a FULL-LENGTH bar, not height:%. A percentage height resolves against the
   containing block — .cp2-tl-node, which is the whole card — not against the connector.
   Measured: --fill:30% rendered as 42% of the line, because 30% of a 102px node is 31px
   on a 72px track. scaleY(0.3) is 30% of the track by construction, whatever the card's
   height. --fill is therefore a UNITLESS FRACTION here (0–1), not a percentage like the
   horizontal stepper's width-based one. */
.cp2 .cp2-tl-node:not(:last-child)::after {
  content: ""; position: absolute; left: 10px; top: 32px; bottom: -2px; width: 2px;
  background: var(--cp2-border-ctl); border-radius: 1px;
  transform-origin: top; transform: scaleY(var(--fill, 0));
}
.cp2 .cp2-tl-live:not(:last-child)::after { background: var(--cp2-brand-bright); }
.cp2 .cp2-tl-dot {
  position: absolute; left: 0; top: 9px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--cp2-brand-bright); background: var(--cp2-bg); z-index: 1;
  display: grid; place-items: center; transition: border-color .12s;
}
/* the running program: ring + halo, mirroring .cp2-st-now */
.cp2 .cp2-tl-node.now .cp2-tl-dot { box-shadow: 0 0 0 4px rgba(37, 87, 214, .18); }
.cp2 .cp2-tl-node.now .cp2-tl-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cp2-brand-bright);
}
.cp2 .cp2-tl-node:hover .cp2-tl-dot { border-color: var(--cp2-brand-bright); }
/* each program boxed so its status + name + dates read as ONE unit — the timeline
   dots/connector still carry the sequence, the border just groups */
.cp2 .cp2-pcard { border: 1px solid var(--cp2-border-2); border-radius: 9px; background: var(--cp2-surface-2); padding: 8px 11px 9px; transition: border-color .15s; }
.cp2 .cp2-pcard:hover { border-color: var(--cp2-border-strong); }
.cp2 .cp2-pcard.now { border-color: rgba(37,87,214,.55); background: rgba(37,87,214,.10); }
.cp2 .cp2-pcard-top { display: flex; align-items: center; gap: 7px; }
.cp2 .cp2-pqueue { border: 1px dashed var(--cp2-border-2); border-radius: 9px; padding: 8px 11px; font-size: 12.5px; color: var(--cp2-muted); }
.cp2 .cp2-tl-q:hover .cp2-pqueue { color: var(--cp2-brand-bright); border-color: rgba(90,134,245,.5); }
/* queued = hollow + dashed, mirroring .cp2-st-next; the "+ Queue" node mirrors .cp2-st-add */
.cp2 .cp2-tl-dot.hollow { background: var(--cp2-bg); border: 2px dashed var(--cp2-border-ctl); }
.cp2 .cp2-tl-dot.hollow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--cp2-border-ctl);
}
.cp2 .cp2-tl-dot.dash { background: none; border: 2px dashed var(--cp2-border-strong); }
.cp2 .cp2-tl-dot.dash::before { content: '+'; color: var(--cp2-subtle); font-size: 13px; line-height: 1; }
.cp2 .cp2-tl-q:hover .cp2-tl-dot.dash { border-color: var(--cp2-brand-bright); }
.cp2 .cp2-tl-q:hover .cp2-tl-dot.dash::before { color: var(--cp2-brand-bright); }
.cp2 .cp2-tl-st { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cp2-subtle); }
.cp2 .cp2-tl-node.now .cp2-tl-st { color: var(--cp2-brand-bright); }
/* Deload chip on a timeline card — text label + the same diagonal hatch the
   calendar uses, so the block is identifiable without relying on color. */
.cp2 .cp2-tl-deload {
  font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cp2-muted); border: 1px solid var(--cp2-border-2); border-radius: 4px;
  padding: 1px 5px; margin-left: 6px;
  background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(255,255,255,.05) 3px, rgba(255,255,255,.05) 6px);
}
.cp2 .cp2-tl-nm { font-size: 13px; font-weight: 600; color: var(--cp2-text); margin-top: 1px; }
.cp2 .cp2-tl-node.then .cp2-tl-nm, .cp2 .cp2-tl-q .cp2-tl-nm { font-weight: 500; color: var(--cp2-muted); }
.cp2 .cp2-tl-meta { font-size: 11px; color: var(--cp2-subtle); margin-top: 2px; }
.cp2 .cp2-tl-menu { position: absolute; top: 0; right: 2px; color: var(--cp2-subtle); cursor: pointer; font-size: 13px; line-height: 1; padding: 1px 4px; border-radius: 4px; }
.cp2 .cp2-tl-menu:hover { color: var(--cp2-text); background: var(--cp2-surface-2); }
.cp2 .cp2-tl-q:hover .cp2-tl-nm { color: var(--cp2-brand-bright); }

/* Header band: NO dividers (Clayton, 2026-07-15) — the stats just sit next to
   each other. The hairline box around every cell was doing nothing but adding
   visual noise. */
.cp2 .cp2-band { border-top: none; gap: 34px; }
.cp2 .cp2-cell { padding: 0; margin-right: 0; border-right: none; }

/* Header band: ONE LINE PER STAT (Clayton, 2026-07-16) — "LTV $1,997", label beside
   the number instead of stacked above it. Band 42px -> 24px.
   Source order is load-bearing: `.cp2 .cp2-v { margin-top: 0 }` ties :29203 on
   specificity (0,2,0), so it only wins from BELOW. Do not hoist these rules.
   The .cp2-cell rule declares no padding, so :29871's `padding: 0` still stands and
   the per-cell dividers stay dead. */
.cp2 .cp2-cell { display: flex; align-items: baseline; gap: 6px; }
.cp2 .cp2-v { margin-top: 0; }

/* ══ SEAM HEADER LAYOUT (Clayton, 2026-07-16) ═══════════════════════════════════════
   Appended last on purpose: these override the scattered earlier .cp2-head rules by
   source order (the header CSS grew across several sessions). 234px → ~131px, every
   element kept at full ink. See _renderHeader/_wireHeader for the adopted-actions half. */

/* ROW 1 — identity + every action, one line */
.cp2 .cp2-idrow { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.cp2 .cp2-back {
  flex: 0 0 auto; width: 28px; height: 28px; margin-left: -6px;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 6px; color: var(--cp2-muted);
}
.cp2 .cp2-back:hover { color: var(--cp2-text); background: var(--cp2-surface-2); border-color: var(--cp2-border-2); }
.cp2 .cp2-back:focus-visible { outline: 2px solid var(--cp2-brand-bright); outline-offset: 2px; }
/* 72px (Clayton, 2026-07-28) — big enough to read as a FACE, not an icon.
   ⚠️ The header must NOT grow with it, and the photo keeps the SAME top
   margin it had at 50px: all 22 extra pixels are cancelled at the BOTTOM
   (margin-bottom −22px), so the wrap's margin-box stays the 50px the row
   was designed around, the painted top edge lands exactly where the 50px
   top edge did, and the photo grows DOWNWARD into the idrow→navrow gap.
   Name, buttons and tabs don't move a pixel. Change the size → change the
   bottom margin to −(new − 50) or the header starts growing again. */
.cp2 .cp2-av { width: 72px; height: 72px; font-size: 22px; }
.cp2 .cp2-avwrap { margin: 0 0 -22px; }
/* Client-uploaded profile photo fills the circle when present (mobile → data.avatarUrl);
   without this the <img> ignores the round frame. */
.cp2 .cp2-av-photo { padding: 0; overflow: hidden; }
.cp2 .cp2-av-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.cp2 .cp2-idblock { flex: 0 1 auto; min-width: 180px; }
.cp2 .cp2-name { font-size: 19px; line-height: 26px; gap: 9px; }
.cp2 .cp2-nametxt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp2 .cp2-name .cp2-status { flex: 0 0 auto; }   /* the pill is the state — never ellipsize it */
.cp2 .cp2-sub { margin-top: 2px; line-height: 16px; }
.cp2 .cp2-headactions { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.cp2 .cp2-headslot { display: flex; align-items: center; gap: 8px; }

/* the adopted classic buttons, restyled where they land (editing index.html's classes
   would repaint the classic profile behind the flag). No `display` — .hidden is
   display:none !important so the status-conditional buttons stay hidden until shown. */
.cp2 .cp2-headslot .btn-secondary,
.cp2 .cp2-headslot .btn-save-attempt,
.cp2 .cp2-headslot .btn-resume-pause,
.cp2 .cp2-headslot .btn-undo-cancel,
.cp2 .cp2-headslot .btn-renew {
  font-size: 13px; font-weight: 500; line-height: 18px; border-radius: 6px;
  padding: 7px 12px; cursor: pointer; align-items: center; gap: 6px;
  border: 1px solid var(--cp2-border-2); color: var(--cp2-muted); background: var(--cp2-surface);
  box-shadow: none; text-transform: none; letter-spacing: 0; min-width: 0;
}
.cp2 .cp2-headslot .btn-secondary:hover,
.cp2 .cp2-headslot .btn-save-attempt:hover,
.cp2 .cp2-headslot .btn-resume-pause:hover,
.cp2 .cp2-headslot .btn-undo-cancel:hover,
.cp2 .cp2-headslot .btn-renew:hover { color: var(--cp2-text); border-color: var(--cp2-border-strong); background: var(--cp2-surface-2); }
.cp2 .cp2-headslot .profile-options-wrap { position: relative; display: flex; }
/* z-index stays 200 (its value elsewhere) so Cancel/Delete/card-link never render behind
   the tab body; only `top` moves now the button sits 8px from the seam. */
.cp2 .cp2-headslot .profile-options-dropdown { top: calc(100% + 8px); right: 0; z-index: 200; }

/* ROW 2 — tabs on the seam, stats right-aligned into the empty half.
   margin-top separates the tabs/stats row from the identity/actions row above it
   (Clayton, 2026-07-16: 12 → 40 for clear air between the two rows). */
.cp2 .cp2-navrow { display: flex; align-items: flex-end; gap: 24px; margin-top: 40px; }
/* Swapped (Clayton, 2026-07-16): stats LEFT, tabs RIGHT. order flips the visual order
   without touching the DOM; margin-left:auto moves from the band to the tabs so the tabs
   are the ones pushed to the right edge. */
.cp2 .cp2-tabs-inline { margin-top: 0; flex: 0 0 auto; order: 1; margin-left: auto; }
/* line-height MUST stay pinned — unpinned it inherits the global 1.5 and the header
   silently grows. The trailing 8px + the 2px underline ARE the header's bottom padding. */
.cp2 .cp2-tabs-inline .cp2-tab { padding: 7px 12px 8px; line-height: 19px; }
.cp2 .cp2-band {
  margin-top: 0; order: 0; flex: 0 1 auto;
  gap: 26px; padding-bottom: 8px; border-top: none; flex-wrap: nowrap;
  /* Indent Pulse to line up under the AVATAR, not the back chevron (Clayton, 2026-07-16).
     34px = chevron 28 + gap 12 − chevron's −6 margin. If the chevron/gap change, so does this. */
  margin-left: 34px;
}
.cp2 .cp2-band .cp2-cell { white-space: nowrap; }
/* Time left + Rate are reference facts, not signals — muted so they don't compete with
   the colored Pulse/Effort scores and the green LTV for the eye (Clayton, 2026-07-16).
   --cp2-muted is 6.7:1 on the header ground: quieter than white, never hard to read. */
.cp2 .cp2-band .cp2-v-quiet { color: var(--cp2-muted); font-weight: 500; }

/* below the breakpoint the band drops to its own line — 147px, still −87px. Clayton's
   screen is 1512; he never sees this. nowrap on the cells means a bad estimate OVERFLOWS
   rather than degrades, so the breakpoint is bought generously at 1339. */
@media (max-width: 1339px) {
  .cp2 .cp2-navrow { flex-wrap: wrap; }
  .cp2 .cp2-band { order: -1; width: 100%; margin-left: 0; margin-bottom: 10px; padding-bottom: 0; }
  .cp2 .cp2-tabs-inline { margin-left: 0; }   /* tabs left-align on their own row once wrapped */
}

/* daily targets — first rail section: aligned key-value rows, inline-editable */
.cp2 .cp2-trow { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; font-size: 12.5px; }
.cp2 .cp2-tk { color: var(--cp2-muted); }
/* holds the input alone now — the unit moved to the label (Clayton, 2026-07-16), so every
   value is a bare right-aligned number and they share one edge. */
.cp2 .cp2-tval { display: inline-flex; align-items: baseline; }
.cp2 .cp2-tin { background: transparent; border: none; border-bottom: 1px dashed var(--cp2-border-ctl); color: var(--cp2-text); font-weight: 600; font-family: inherit; font-size: 13px; padding: 1px 3px 2px; text-align: right; font-variant-numeric: tabular-nums; cursor: text; transition: .12s; width: 52px; }
.cp2 .cp2-tin:hover { border-bottom-color: var(--cp2-border-strong); background: rgba(255,255,255,.02); }
.cp2 .cp2-tin:focus { outline: none; border-bottom: 1px solid var(--cp2-brand-bright); background: rgba(37,87,214,.10); }
/* A finished phase's targets are history — legible, plainly not editable.
   After the hover/focus rules above so a disabled field can't light up. */
.cp2 .cp2-tin:disabled,
.cp2 .cp2-tin:disabled:hover { color: var(--cp2-muted); background: transparent; border-bottom-color: transparent; cursor: default; }
.cp2 .cp2-cardline:disabled { cursor: default; }
.cp2 .cp2-cardline:disabled:hover .cp2-cardline-nm { color: var(--cp2-text); }
/* The unit rides the LABEL now ("Water oz", "Sleep hrs"), not the value. Steps has no unit
   because "Steps" IS the unit, and that left an empty slot next to the one number that
   didn't need one. No min-width any more: that 16px existed to hold a column open so the
   numbers lined up, and there is no column now — it also couldn't survive "hrs", which
   measured 16.5px and pushed sleep's number half a pixel out of line. */
.cp2 .cp2-tu { font-size: 11px; color: var(--cp2-subtle); margin-left: 5px; }
.cp2 .cp2-tu-btn { cursor: pointer; border-bottom: 1px dashed var(--cp2-border-ctl); transition: .12s; }
.cp2 .cp2-tu-btn:hover { color: var(--cp2-text); border-bottom-color: var(--cp2-border-strong); }

/* phases — the row directly above the calendar (they frame its time) */
/* A COLUMN now, not a row: the "Phases" heading gets its own line and the chips sit under it
   (Clayton, 2026-07-16). This is what levels PHASES with DAILY TARGETS — as an inline caption
   it was centred against the 27px chips and landed ~6px low. padding-top stays 0 because
   .cp2-2col's 30px owns the gap under the header. */
.cp2 .cp2-phbar { padding: 0 2px 13px; border-bottom: 1px solid var(--cp2-border); }
/* (.cp2-phrow retired 2026-07-16 — the chips-in-a-row became .cp2-st, the stepper.) */
.cp2 .cp2-phbar:empty { display: none; }

/* water unit dropdown (floating, lives on body) */
.cp2-pop.cp2-wdrop { min-width: 72px; padding: 4px; }
.cp2-pop.cp2-wdrop .cp2-wopt { font-size: 12px; color: var(--cp2-muted); padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.cp2-pop.cp2-wdrop .cp2-wopt:hover { background: var(--cp2-surface-3); color: var(--cp2-text); }
.cp2-pop.cp2-wdrop .cp2-wopt.on { color: var(--cp2-brand-bright); font-weight: 600; }

/* calendar toolbar (borderless above the framed grid — the grid is the panel) */
.cp2 .cp2-hero { background: transparent; border: none; border-radius: 0; padding: 0; }
.cp2 .cp2-hero .cp2-ptool { padding: 0 0 12px; }
.cp2 .cp2-phasestrip:empty { display: none; }
/* (.cp2-addphase retired 2026-07-16 — the toolbar's "+ Add a phase" was a duplicate once
   the Phases strip started always rendering its own "Plan phase" node.) */
.cp2 .cp2-calgear { flex: 0 0 auto; }

/* calendar cells — BOXES, not a gridline frame. The gridline version could not
   survive a phase: the wash lightens a cell to the line's own luminance (measured
   1.02:1 — invisible), so phase weeks fused into one block. A GAP has no contrast
   requirement at all, so day separation holds identically with the phase on or
   off. This also lets each cell own its whole background, which is what makes the
   wash + deload hatch layer cleanly. Don't reintroduce the frame. */
.cp2 .cp2-calframe { border: none; border-radius: 0; overflow: visible; }
.cp2 .cp2-hero .cp2-grid { gap: 5px; }
.cp2 .cp2-hero .cp2-dh { text-align: center; padding: 2px 0 7px; color: var(--cp2-subtle); background: none; border: none; }
.cp2 .cp2-hero .cp2-day { min-height: 96px; padding: 5px 6px; border: 1px solid var(--cp2-border-2); border-radius: 7px; background: var(--cp2-surface); }
.cp2 .cp2-hero .cp2-grid-week .cp2-day { min-height: 200px; }
.cp2 .cp2-hero .cp2-day:hover { border-color: var(--cp2-border-strong); }
/* Out-of-month recede rides the GROUND, never the content: the cell drops to page
   level so "not this month" is a luminance step on the container — where the
   contrast budget is meant to be spent (i.e. on nothing). Must be written at hero
   specificity (0,3,0): .cp2-hero .cp2-day above sets background and the border
   SHORTHAND, so a plain .cp2 .cp2-day-out (0,2,0) would lose and do nothing.
   Sits before .cp2-day-today so today still wins if it lands in a trailing cell. */
.cp2 .cp2-hero .cp2-day-out { background: var(--cp2-bg); border-color: var(--cp2-border); }
.cp2 .cp2-hero .cp2-day-today { box-shadow: none; background: color-mix(in srgb, var(--cp2-brand) 8%, var(--cp2-surface)); }
/* Deload = a hatch layered OVER the phase wash, so a deload week is never told
   apart by hue alone (SC 1.4.1) — the texture carries it, and the legend names
   both. The gradient itself is set inline (it composites with the phase colour);
   this rule just marks the cell for anything that needs to find it. */
.cp2 .cp2-hero .cp2-day-deload { background-repeat: repeat; }
.cp2 .cp2-lg-ph { color: var(--cp2-subtle); }
.cp2 .cp2-day-nl { display: inline-flex; align-items: center; gap: 5px; }
.cp2 .cp2-hero .cp2-day-num { font-size: 11px; font-weight: 500; color: var(--cp2-text); }
.cp2 .cp2-hero .cp2-day-out .cp2-day-num { color: var(--cp2-subtle); }
/* Past days recede on the NUMERAL, and it must be written here. `.cp2-day-past
   .cp2-day-n` (further up) paints the WRAPPER, but .cp2-hero .cp2-day-num paints
   the child span directly — so inheritance never reaches the numeral and that rule
   is inert on it. Measured: without this, a past day is pixel-identical to a future
   one. This is the only past treatment now; chips deliberately stay full strength. */
.cp2 .cp2-hero .cp2-day-past .cp2-day-num { color: var(--cp2-subtle); }
.cp2 .cp2-hero .cp2-day-today .cp2-day-num { width: 20px; height: 20px; border-radius: 50%; background: var(--cp2-brand); color: #fff; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 900px) {
  .cp2 .cp2-2col { grid-template-columns: 1fr; }
  .cp2 .cp2-coldiv { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CHECK-IN QUEUE (CIQ reskin) — rail + inline editor + guides
   Pending tab becomes a two-column walk-through: #ciq-rail (who's
   waiting) + #ciq-main (open check-in, editor inline at the bottom).
   ═══════════════════════════════════════════════════════════════ */
.ciq { display: flex; align-items: flex-start; gap: 0; }
.ciq-rail {
  width: 300px; flex: 0 0 auto;
  position: sticky; top: var(--checkins-top-h, 118px);
  max-height: calc(100vh - var(--checkins-top-h, 118px) - 16px);
  overflow-y: auto; padding: 4px 18px 20px 0;
  border-right: 1px solid var(--border-light);
}
.ciq-main { flex: 1; min-width: 0; padding: 4px 0 40px 26px; }

/* rail head */
.ciq-rail-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px 10px; }
.ciq-rail-title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ciq-guides-btn {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px dashed var(--border); background: none; color: var(--text-muted);
}
.ciq-guides-btn.on { color: var(--warning); border-color: var(--warning); background: var(--warning-dim); }
.ciq-count { font-weight: 700; color: var(--warning); margin-left: 4px; }
.ciq-rail-empty { font-size: 12px; color: var(--text-muted); padding: 10px 2px; }
.ciq-done { font-size: 12px; color: var(--success); padding: 14px 2px 0; }

/* rail cards: compact the full-width .cr-card for the narrow column */
.ciq-rail .cr-card { padding: 10px 12px; gap: 10px; margin-bottom: 6px; position: relative; }
.ciq-rail .cr-card-avatar { width: 32px; height: 32px; font-size: 13px; }
.ciq-rail .cr-card-name { font-size: 13px; }
.ciq-rail .cr-card-week { font-size: 11px; }
.ciq-rail .cr-card-wait { font-size: 10.5px; }
.ciq-rail .cr-card-arrow { display: none; }
.ciq-rail .cr-card.ciq-on { background: var(--surface-2); border-color: var(--border); }
.ciq-rail .cr-card.ciq-on::after {
  content: ''; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px; background: var(--accent);
}

/* identity strip */
.ciq-id { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border-light); margin-bottom: 14px; }
.ciq-idav {
  width: 40px; height: 40px; border-radius: 999px; overflow: hidden; flex: 0 0 auto;
  background: linear-gradient(135deg, #2b3550, #1a2033); color: #cdd6ea;
  display: grid; place-items: center; font-size: 14px; font-weight: 600;
}
.ciq-idav img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* avatar + name = one button; the whole cluster opens the profile */
.ciq-idbtn { display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-align: left; font: inherit; }
.ciq-idname { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.ciq-idbtn:hover .ciq-idname { text-decoration: underline; text-underline-offset: 3px; }
.ciq-flow { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ciq-progress { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* week row: neutralize full-page header chrome inside the pane */
.ciq-view .cr-view-header.ciq-weekrow { position: static; padding: 0; margin: 0 0 14px; }

/* submission grid: was capped at 50% page width for the drawer era */
.ciq-main .cr-checkins-grid { max-width: 100%; margin: 0; }

/* inline editor (was the slide-over drawer) */
.ciq-editor {
  margin-top: 26px; border: 1px solid var(--border-light); border-radius: 12px;
  background: var(--surface); padding: 16px 18px 18px;
}
.ciq-editor-title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.ciq-editor .cr-drawer-body { overflow: visible; padding: 0; flex: none; }

/* all-clear */
.ciq-allclear { padding: 90px 20px; }
.ciq-okring {
  width: 60px; height: 60px; border-radius: 999px; border: 2px solid var(--success);
  color: var(--success); display: grid; place-items: center; margin: 0 auto 16px;
}

/* numbered guides — evaluation aids, amber + dashed + numbered (never hue-only) */
.ciq-guide {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px dashed rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .05);
  border-radius: 8px; padding: 10px 13px; margin: 14px 0 10px;
}
.ciq-rail .ciq-guide { margin: 4px 0 12px; }
.ciq-gnum {
  width: 22px; height: 22px; border-radius: 999px; flex: 0 0 auto;
  background: var(--warning); color: #231a05; font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
}
.ciq-gtext { display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.5; }
.ciq-gtitle { font-weight: 600; color: var(--warning); }
.ciq-gwhat { color: var(--text, #e9edf4); }
.ciq-ghow { color: var(--text-muted); }
.ciq-ghow::before { content: 'How: '; font-weight: 600; }

/* ── Weight week bar chart (check-in review) ── */
.cr-wchart { padding: 8px 4px 4px; cursor: pointer; }
.cr-wchart svg { display: block; width: 100%; max-width: 520px; height: auto; }
.cr-wchart:hover rect { opacity: 1; }

/* Photo thumb that failed to load (expired/unsignable URL, deleted object) */
.cr-photo-missing {
  display: grid; place-items: center; text-align: center; cursor: default;
  font-size: 10.5px; color: var(--text-muted);
  background: var(--surface-2); border: 1px dashed var(--border); padding: 6px;
}

/* ── Program-tab overlay (opened from check-in review) ──
   z-index 95 is deliberate: BELOW .modal-overlay (100) so the workout /
   nutrition builders opened from inside the tab stack above it with their
   internal layering intact, and below .cp2-pop (900) so the calendar day
   popovers (body-mounted) float above. Chat (9000) floats over everything
   by design. */
.cp2-prog-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(4, 6, 10, .62);
  display: flex; align-items: center; justify-content: center; padding: 26px;
}
.cp2-prog-sheet {
  width: min(1180px, 100%); height: 100%;
  background: #0d1117; border: 1px solid #3a4658; border-radius: 14px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .65);
}
.cp2-prog-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 22px; border-bottom: 1px solid #232c39; background: #161c27; flex: 0 0 auto;
}
.cp2-prog-title { font-size: 15px; font-weight: 600; color: #e9edf4; letter-spacing: -0.01em; }
.cp2-prog-title span { color: #8a93a6; font-weight: 500; }
.cp2-prog-body { flex: 1; overflow-y: auto; padding: 20px 28px 34px; }

/* Adjust-the-plan block in the check-in editor */
.cr-plan-block { padding: 2px 0 4px; }
.cr-open-plan-btn { display: inline-flex; align-items: center; gap: 6px; }

/* ── Check-in review: category CARDS ──
   SINGLE-COLUMN rows (Clayton 2026-07-17: side-by-side compare needs rows
   that mirror line-for-line). Cards must READ as cards on the dark ground:
   stronger border, elevated header band with a sapphire tick, real gaps. */
.ciq-main .cr-responses { display: flex; flex-direction: column; gap: 16px; }
.ciq-main .cr-cat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 0 0 6px; overflow: hidden;
  /* No top inset highlight — it read as a double line against the header band */
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
/* Form Checks — trailing card of the client's unreviewed clips. Its own
   .cr-fv-label ("Form Checks Awaiting Review · N") is the header, so it holds a
   section (padded) rather than rows. Async: the slot is empty until it fills,
   so keep the whole card hidden until a label exists — a client with no clips
   shows nothing at all. */
.ciq-main .cr-cat-card--formchecks { padding: 13px 15px 5px; }
.ciq-main .cr-cat-card--formchecks:not(:has(.cr-fv-label)) { display: none; }
.ciq-main .cr-cat-card--formchecks .cr-fv-section:not(:empty) { margin-bottom: 0; }
.ciq-main .cr-cat-card .cr-category-header {
  margin: 0; padding: 11px 18px; border: 0; border-bottom: 1px solid var(--border-light);
  background: var(--surface-2);
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text); display: flex; align-items: center; gap: 9px;
}
.ciq-main .cr-cat-card .cr-category-header::before {
  content: ''; width: 3px; height: 12px; border-radius: 2px; background: var(--accent); flex: 0 0 auto;
}
.ciq-main .cr-cat-rows { display: block; padding: 2px 18px 0; }
.ciq-main .cr-cat-rows .cr-response-row { min-width: 0; padding: 9px 0; }
.ciq-main .cr-cat-card--photos { padding: 0 18px 12px; }
.ciq-main .cr-wchart { padding: 0 2px 10px; }
.ciq-main .cr-wchart svg { max-width: 460px; }

/* A metric row and its chart are ONE unit (Clayton 2026-07-19): the row's
   hairline was cutting the stat off from the chart that supports it. Drop
   the divider between them and let the unit's last piece carry it. */
.ciq-main .cr-cat-rows .cr-response-row:has(+ .cr-wchart),
.ciq-main .cr-cat-rows .cr-response-row:has(+ .crn-chart),
.ciq-main .cr-cat-rows .cr-response-row:has(+ .cr-eff-breakdown) { border-bottom: none; padding-bottom: 2px; }
.ciq-main .cr-cat-rows .cr-wchart:not(:last-child),
.ciq-main .cr-cat-rows .cr-eff-breakdown:not(:last-child),
.ciq-main .cr-cat-rows .crn-summary:not(:last-child) { border-bottom: 1px solid var(--border); }

/* Effort decomposition — the levers that fed the score, listed under it. The
   score stays bold (below); these factors are quiet so the eye reads the
   headline first, then scans for what was missing (a 0-earned lever). */
.cr-eff-breakdown { padding: 2px 0 8px; }
.cr-eff-factor { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; }
.cr-eff-name { font-size: var(--fs-xs); color: var(--text-muted); }
.cr-eff-pts { font-size: var(--fs-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Strength metric value (row) — direction word + arrow carry the meaning;
   colour is secondary (Clayton is colourblind). Down is amber "look closer",
   not danger red: a down week is often fatigue/deload, not a failure (J3U). */
.cr-str { font-weight: 600; }
.cr-str--up { color: var(--success); }
.cr-str--down { color: var(--warning); }
.cr-str--flat { color: var(--text-muted); }
.cr-str--new { color: var(--primary); }
/* The headline % is the median per-lift change — dotted underline signals the
   hover card that explains how it's figured (shared [data-tip-title] portal). */
.cr-str-pct { border-bottom: 1px dotted var(--text-subtle); cursor: help; }

/* Right-size the editor buttons (were full-width slabs) */
.ciq-editor .cr-insight-btn { width: auto; display: inline-flex; }
.ciq-editor .cr-record-btn { width: auto; display: inline-flex; }
.ciq-editor .cr-drawer-editor-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ciq-editor .cr-drawer-section { padding: 10px 0; }

/* ═══════════════════════════════════════════════════════════════
   CIQ v2 (S57) — queue LIST + client-profile review OVERLAY
   The pending tab is a plain list; the review lives in a sheet
   (reuses .cp2-prog-overlay chrome) with Program | Check-Ins tabs,
   the client's own check-in timeline, and #ciq-main inside.
   The .ciq / .ciq-rail rules above are the S56 split-pane era —
   inert now (no DOM emits them) but kept for one release.
   ═══════════════════════════════════════════════════════════════ */
.ciq-list { max-width: 760px; margin: 4px auto 0; }
.ciq-list-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 10px; }
.ciq-list .cr-cards-list { display: flex; flex-direction: column; gap: 8px; }
.ciq-done-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  opacity: .65; cursor: pointer; border-radius: var(--radius);
}
.ciq-done-row:hover { background: rgba(255, 255, 255, .03); opacity: .85; }
.ciq-done-name { font-size: var(--fs-sm); color: var(--text-muted); flex: 1; min-width: 0; }
.ciq-done-check { font-size: var(--fs-xs); color: var(--success); font-weight: 500; }

/* Full-page takeover, not a modal (Clayton 2026-07-19): the sheet owns the
   whole viewport — an opaque ground, no floating card chrome. */
#ciq-overlay { padding: 0; background: var(--bg); }
#ciq-overlay .cp2-prog-sheet {
  width: 100%; height: 100%;
  border-radius: 0; border: none; box-shadow: none;
}

/* sheet internals */
.ciq-ov-sheet { display: flex; flex-direction: column; }
.ciq-ov-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 22px;
  border-bottom: 1px solid #232c39; background: #161c27; flex: 0 0 auto;
}
.ciq-ov-head .ciq-idav { width: 36px; height: 36px; font-size: 13px; }
.ciq-ov-head .ciq-idname { font-size: 15px; }
.ciq-ov-head .ciq-flow { margin-left: auto; }
.ciq-ov-x {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid transparent;
  background: none; color: var(--text-muted); cursor: pointer;
  display: grid; place-items: center;
}
.ciq-ov-x:hover { color: var(--text); background: rgba(255, 255, 255, .05); border-color: var(--border); }
.ciq-ov-tabs {
  display: flex; gap: 0; padding: 0 22px;
  border-bottom: 1px solid #232c39; background: #161c27; flex: 0 0 auto;
}
.ciq-ov-body { flex: 1; min-height: 0; display: flex; }
.ciq-ov-tl {
  width: 216px; flex: 0 0 auto; border-right: 1px solid var(--border-light);
  padding: 16px 12px 16px 20px; overflow-y: auto;
}
.ciq-tl-item {
  position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 6px;
  padding: 8px 10px; margin-bottom: 3px; color: inherit; font: inherit;
}
.ciq-tl-item:hover { background: rgba(255, 255, 255, .03); }
.ciq-tl-item.on { background: var(--surface-2); border-color: var(--border); }
.ciq-tl-item.on::after {
  content: ''; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px; background: var(--accent);
}
.ciq-tl-week { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
.ciq-tl-sub { display: block; font-size: 11px; margin-top: 2px; color: var(--text-subtle); }
.ciq-tl-pend { color: var(--warning); font-weight: 600; }
.ciq-tl-late { color: var(--danger); font-weight: 600; }
.ciq-tl-ok { color: var(--success); }
/* No top padding on the scroll container itself, else scrolled content
   peeks above the sticky compare labels (which pin at top:0). The top gap
   lives on each direct child instead. */
.ciq-ov-body .ciq-main { overflow-y: auto; padding: 0 26px 30px; }
.ciq-ov-body .ciq-main > * { padding-top: 18px; }
.ciq-ov-prog { flex: 1; min-width: 0; }

/* Full-page sheet: the single-view review column caps and CENTERS in the
   pane; compare (split) releases to the full width — that's the point of
   it. The editor caps + centers in both modes (a full-width textarea is
   unusable), so under full-width compare panels it sits centered. */
.ciq-ov-body .ciq-view { max-width: 1120px; margin: 0 auto; }
.ciq-ov-body .ciq-view:has(.cr-grid-split) { max-width: none; margin: 0; }
.ciq-ov-body .ciq-editor { max-width: 1120px; margin-left: auto; margin-right: auto; }

/* ── Docked response composer (S57) ─────────────────────────────
   The composer docks at the bottom of the RIGHT pane (#ciq-main's column),
   so the coach writes while the check-in scrolls above AND the composer
   centers on the same column as the check-in content — not the full sheet
   width. Collapses to a slim toggle bar. */
.ciq-ov-cols { flex: 1; min-height: 0; display: flex; }
/* main + dock stack vertically in the right pane */
.ciq-ov-mainarea { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ciq-ov-mainarea > .ciq-main { flex: 1; min-height: 0; }
.ciq-dock {
  flex: 0 0 auto; background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .35);
  /* match #ciq-main's horizontal padding so .ciq-dock-inner centers exactly
     like .ciq-view (the check-in cards) above it */
  padding: 0 26px;
}
.ciq-dock[hidden] { display: none; }
.ciq-dock-inner { max-width: 1120px; margin: 0 auto; padding-bottom: 14px; }
.ciq-dock-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: 0; padding: 9px 2px 6px; cursor: pointer;
  font: 600 11px/1 inherit; font-family: inherit; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.ciq-dock-toggle:hover { color: var(--text); }
.ciq-dock-chevron { transition: transform .18s ease; }
.ciq-dock:not(.is-open) .ciq-dock-chevron { transform: rotate(180deg); }
.ciq-dock:not(.is-open) #cr-drawer-body { display: none; }

/* Compact composer: textarea + ONE toolbar row (formatting · tools · send) */
.ciq-compose { display: block; container-type: inline-size; }
/* The AI-insight result slot carries a border + margins for its populated
   state; collapse it entirely when empty so it adds no divider or gap. */
.ciq-compose .cr-ai-insight-section:empty { display: none; }
/* WYSIWYG response editor — a contenteditable surface (Bold actually bolds,
   lists render). Vertical resize grip lets the coach enlarge the writing
   area; the docked pane grows with it and the check-in stays scrollable. */
.cr-editor-rt {
  width: 100%; box-sizing: border-box;
  min-height: 76px; max-height: 50vh; overflow-y: auto; resize: vertical;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font: 500 var(--fs-base)/1.55 inherit; font-family: inherit;
  padding: 11px 13px; outline: none;
}
.cr-editor-rt:focus { border-color: var(--primary); }
.cr-editor-rt.rt-empty::before { content: attr(data-ph); color: var(--text-subtle); pointer-events: none; }
/* Contextual block rhythm — one 16px gap at EVERY block boundary (item↔item,
   list↔list, list↔paragraph, paragraph↔paragraph) so switching between numbered
   lists, bullet lists and paragraphs never collapses the spacing. Wrapped lines
   inside a single item/paragraph stay tight (line-height). Margin-collapse carries
   the gap across list boundaries; the trailing gap on the last block is zeroed. */
.cr-editor-rt ul, .cr-editor-rt ol { margin: 0 0 16px; padding-left: 22px; }
.cr-editor-rt li { margin: 0 0 16px; }
.cr-editor-rt li:last-child { margin-bottom: 0; }
.cr-editor-rt > div, .cr-editor-rt > p { margin: 0 0 16px; }
.cr-editor-rt > *:last-child { margin-bottom: 0; }
.cr-editor-rt a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.cr-editor-rt strong, .cr-editor-rt b { font-weight: 700; }
/* Inline link popover — replaces the native prompt() (which rendered unstyled
   at the top of the viewport). Appears just below the selection being linked. */
.cr-link-pop {
  position: fixed; z-index: 100001;
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
}
.cr-link-pop[hidden] { display: none; }
.cr-link-pop-input {
  width: 240px; box-sizing: border-box;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 7px 10px; font-size: var(--fs-sm); font-family: inherit; outline: none;
}
.cr-link-pop-input:focus { border-color: var(--primary); }
.cr-link-pop-input::placeholder { color: var(--text-subtle); }
.cr-link-pop-add {
  background: var(--primary); color: #fff; border: none; border-radius: 6px;
  padding: 7px 12px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.cr-link-pop-add:hover { background: var(--primary-hover); }
.cr-link-pop-x {
  display: grid; place-items: center; width: 26px; height: 26px;
  background: none; border: none; color: var(--text-subtle); cursor: pointer; border-radius: 6px;
}
.cr-link-pop-x:hover { color: var(--text); background: var(--surface-hover); }
.cr-drawer-editor.ciq-compose .cr-drawer-notes-section { margin: 0; }
/* Two-column composer: the written response + its text formatting on the left,
   the actions listed on the right, split by a hairline. The text field fills the
   left column to the height of the action list, so the pane stays one compact
   block (and the actions no longer add a row beneath a full-width field). */
.ciq-compose-cols { display: flex; gap: 18px; align-items: stretch; margin-top: 8px; }
.ciq-compose-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ciq-compose-left .cr-drawer-notes-section { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.ciq-compose-left .cr-editor-rt { flex: 1 1 auto; min-height: 96px; }
.ciq-compose-format { display: flex; align-items: center; gap: 3px; }
.ciq-compose-right {
  flex: 0 0 40%; min-width: 220px; max-width: 440px;
  display: flex; flex-direction: column; gap: 2px;
  padding-left: 18px; border-left: 1px solid var(--border);
}
/* actions are ~half the column so the hover/footprint doesn't sprawl into the
   empty right space; left-aligned so Send stacks directly under them */
.ciq-compose-right > .ciq-tb { width: 52%; min-width: 150px; justify-content: flex-start; height: 28px; margin: 0; }
.ciq-compose-actions-foot { margin-top: auto; display: flex; gap: 8px; padding-top: 6px; justify-content: flex-start; }
.ciq-compose-actions-foot .ciq-send { width: 52%; min-width: 150px; }
/* Narrow contexts (e.g. editing a past response in a completed view's column):
   stack the two columns and move the hairline to the top. */
@container (max-width: 560px) {
  .ciq-compose-cols { flex-wrap: wrap; }
  .ciq-compose-right {
    flex-basis: 100%; max-width: none; min-width: 0; margin-top: 4px; padding-top: 10px;
    padding-left: 0; border-left: none; border-top: 1px solid var(--border);
  }
}
.ciq-compose-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.ciq-tgrp { display: flex; align-items: center; gap: 3px; }
.ciq-tsep { width: 1px; align-self: stretch; background: var(--border); margin: 3px 3px; }
.ciq-tspacer { flex: 1; }
.ciq-tb {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px;
  border-radius: 6px; border: 1px solid transparent; background: none;
  color: var(--text-muted); font: 600 var(--fs-xs)/1 inherit; font-family: inherit;
  cursor: pointer; white-space: nowrap;
}
.ciq-tb:hover { color: var(--text); background: rgba(255, 255, 255, .05); border-color: var(--border); }
/* toggle "on" state — a solid fill (not just a border) so an active format is
   unmistakable and stays visible while the caret moves; wired via queryCommandState */
.ciq-tb.is-active { color: #fff; background: var(--primary); border-color: var(--primary); }
.ciq-tb.is-active:hover { color: #fff; background: var(--primary-hover); border-color: var(--primary-hover); }
.ciq-tb--icon { width: 30px; padding: 0; justify-content: center; }
.ciq-tb--rec { color: var(--primary); }
.ciq-tb--rec:hover { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.ciq-tb--ai { color: #a78bfa; }
.ciq-tb--ai:hover { color: #a78bfa; border-color: #a78bfa; background: rgba(167, 139, 250, .1); }
.ciq-tb--plan:hover { color: var(--text); border-color: var(--primary); }
/* neutralise the old full-width dashed record slab inside the compact toolbar */
.ciq-compose-toolbar .cr-record-btn { width: auto; margin: 0; }
.ciq-send { height: 36px; }

/* Recorder SETUP inside the dock: the vertical stack + full-width 16:9
   preview ballooned the dock off-screen. Lay it out WIDE and SHORT — the
   settings stack on the left, the live preview pinned right at a sane size —
   so it fits in a tidy panel like the normal composer. Scoped to .ciq-dock
   (the narrow history-column editor keeps the vertical layout). */
.ciq-dock .vr-setup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 260px;
  /* Two settings columns + a preview column. The preview spans grid-row 2/100
     with row-gap 0 so its extra height lands in the empty tail rows rather than
     inflating the two settings rows — a row-gap here would multiply across those
     rows (phantom-height trap, caught in the harness). */
  justify-content: start; column-gap: 24px; row-gap: 0; align-items: start;
  max-height: 64vh; overflow-y: auto;
  padding: 12px 18px; /* tighter than the default card padding — this is a compact dock panel */
}
/* minimal close row (× only, no title/divider) spans the top */
.ciq-dock .vr-setup > .vr-setup-close-row { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin: -2px 0 2px; }
/* live preview pinned to col 3, spanning the settings rows without inflating
   them (grid-row 2/100 + row-gap 0 — phantom-height trap caught in the harness) */
.ciq-dock .vr-setup > .vr-preview-section { grid-column: 3; grid-row: 2 / 100; margin: 0; }
.ciq-dock .vr-setup > .vr-preview-section .vr-cam-preview-wrap { max-width: 100%; margin-bottom: 6px; }
/* settings flow two-up: Recording Mode | Background, then Camera Overlay Size |
   Microphone; Start Recording sits under the Microphone (col 2, row 4) and the
   hint under Camera Overlay Size (col 1, row 4) */
.ciq-dock .vr-setup > .vr-mode-section { grid-column: 1; }
.ciq-dock .vr-setup > .vr-start-btn { grid-column: 2; grid-row: 4; width: 100%; padding: 9px 16px; margin: 2px 0 0; }
.ciq-dock .vr-setup > .vr-setup-hint { grid-column: 1; grid-row: 4; margin: 4px 0 0; }
.ciq-dock .vr-setup .vr-setup-section { margin-bottom: 7px; }
.ciq-dock .vr-setup .vr-setup-label { margin-bottom: 5px; }
/* Recording-active + clip-review panels also render in the dock (camera-only
   / voice-only, where focus mode doesn't fire) — same size safety. */
.ciq-dock .vr-active-panel,
.ciq-dock .vr-preview-panel { max-height: 64vh; overflow-y: auto; }
.ciq-dock .vr-preview-video-wrap { max-width: 420px; }

/* Video-attached chip (replaces the big inline player in the composer) */
.ciq-vchip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 7px 10px; border-radius: 8px; width: fit-content;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  font-size: var(--fs-sm); color: var(--text);
}
.ciq-vchip-thumb { width: 44px; height: 28px; border-radius: 4px; flex: 0 0 auto; display: grid; place-items: center; background: linear-gradient(135deg, #10151f, #1a2233); }
.ciq-vchip-x { width: 20px; height: 20px; border-radius: 5px; border: none; background: none; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; }
.ciq-vchip-x:hover { color: var(--danger); background: rgba(239, 68, 68, .1); }

/* recording focus mode: clear the coach chrome (sheet is already
   full-bleed; the opaque ground blots out the queue list behind it) */
body.cr-focus-mode-active .ciq-ov-tabs,
body.cr-focus-mode-active .ciq-ov-tl,
body.cr-focus-mode-active .ciq-ov-x { display: none !important; }

/* Recording: the response composer must never appear in the client's video
   (written feedback, record buttons, AI insight…). With the camera bubble
   on screen its Loom bar carries pause/stop — hide it outright. With the
   camera off, it holds the ONLY recording controls — so it becomes a
   compact floating pill instead of the docked bar. */
body.cr-focus-mode-active:has(#vr-camera-bubble) .ciq-dock,
body.cr-focus-mode-active:has(#vr-camera-bubble) .ciq-editor { display: none !important; }
body.cr-focus-mode-active:not(:has(#vr-camera-bubble)) .ciq-dock,
body.cr-focus-mode-active:not(:has(#vr-camera-bubble)) .ciq-editor {
  position: fixed; right: 22px; bottom: 22px; z-index: 1000; margin: 0;
  width: auto; max-width: 420px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
body.cr-focus-mode-active .ciq-dock-toggle,
body.cr-focus-mode-active .ciq-editor-title { display: none; }

/* Weigh-in calendar chip — dashed = prescribed, solid+✓ = logged */
.cp2 .cp2-chip-weighin {
  border: 1px dashed var(--cp2-border-2); color: var(--cp2-muted);
  background: transparent; cursor: default;
}
.cp2 .cp2-chip-weighin-done {
  border-style: solid; border-color: rgba(43, 189, 126, .45); color: var(--cp2-green);
}

/* ── Written feedback: markdown toolbar + rendered output ── */
.cr-md-toolbar { display: flex; gap: 4px; margin-left: auto; margin-right: 8px; }
.cr-md-btn {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border-light); border-radius: 5px;
  padding: 3px 8px; cursor: pointer; line-height: 1.4;
}
.cr-md-btn:hover { color: var(--text); border-color: var(--border); }
/* Rendered/saved view — mirror the editor's 16px block rhythm so what the coach
   types matches what's saved and shown (item↔item, list↔list, list↔paragraph,
   paragraph↔paragraph all 16px; last block's trailing gap zeroed). */
.cr-md-p { margin: 0 0 16px; }
.cr-md-p:last-child { margin-bottom: 0; }
.cr-md-list { margin: 0 0 16px; padding-left: 22px; }
.cr-md-list:last-child { margin-bottom: 0; }
.cr-md-list li { margin: 0 0 16px; }
.cr-md-list li:last-child { margin-bottom: 0; }
.cr-response-notes-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── Nutrition compliance chart (check-in review) ── */
.crn-head .crn-pills { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.crn-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border-light); border-radius: 999px; padding: 3px 10px; cursor: pointer;
  background: var(--surface-2); color: var(--text); font-family: inherit; }
.crn-pill-locked { cursor: default; }
.crn-pill-off { color: var(--text-muted); border-style: dashed; text-decoration: line-through; }
.crn-pill-off .crn-dot { background: transparent !important; border: 1.5px solid var(--text-muted); }
.crn-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.crn-tolsrc { font-size: 10px; color: var(--text-muted); opacity: 0.8; margin-left: 4px; }
.crn-chart { padding: 6px 2px 2px; }
/* macro toggles + band, de-emphasized above the chart (headline stat is the row) */
.crn-chart .crn-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.crn-chart svg { display: block; width: 100%; max-width: 560px; height: auto; }
.crn-summary .crn-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 0 2px; }
.crn-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border-light); border-radius: 999px; padding: 3px 10px;
  font-variant-numeric: tabular-nums; }
.crn-chip b { color: var(--text); }
.crn-chip-total { font-weight: 600; color: var(--text); }
.crn-read { font-size: 12px; color: var(--text-muted); padding: 6px 0 8px; max-width: 640px; }
.crn-read .crn-headline { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.crn-read ul { margin: 0; padding-left: 18px; }
.crn-read li { margin-bottom: 4px; }
.crn-read li:last-child { margin-bottom: 0; }
.crn-read b { color: var(--text); }
.crn-pat { color: var(--warning); }
#crn-tip { position: fixed; z-index: 950; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 11px; font-size: 12px; color: var(--text); pointer-events: none;
  display: none; box-shadow: 0 12px 32px rgba(0,0,0,.5); max-width: 270px; line-height: 1.45; }
#crn-tip span { color: var(--text-muted); font-size: 11px; }
#crn-tip .crn-ok { color: var(--success); }
#crn-tip .crn-off { color: var(--warning); }
.crn-planlegend { font-size: 10.5px; color: var(--text-muted); padding: 2px 2px 6px; }
.crn-planlegend b { color: var(--text); font-weight: 700; letter-spacing: 0.4px; }

/* ── Coach to-do list ("My Tasks") — sidebar badge + drawer + in-check-in popover.
   Lightweight coach reminders on the live coach_tasks backend: capture from a
   check-in, review/check-off in the drawer off the sidebar. ── */
.ciq-flow .ciq-addtask { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.ciq-flow .ciq-addtask:hover { color: var(--primary); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }

.tasks-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9990; }
.tasks-scrim.hidden { display: none; }
.tasks-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 90vw; background: var(--surface); border-left: 1px solid var(--border); z-index: 9991; display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(0, 0, 0, .4); }
.tasks-drawer.hidden { display: none; }
.ctk-head { display: flex; align-items: center; gap: 8px; padding: 16px 18px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.ctk-h-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.ctk-h-count { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-dim); border-radius: 20px; padding: 2px 8px; }
.ctk-h-count.hidden { display: none; }
.ctk-h-x { margin-left: auto; background: none; border: none; color: var(--text-subtle); font-size: 20px; line-height: 1; cursor: pointer; }
.ctk-h-x:hover { color: var(--text); }
.ctk-quick { padding: 11px 16px; border-bottom: 1px solid var(--border-light); flex: 0 0 auto; }
/* The composer field (S76, contenteditable — Clayton, 2026-08-05: the
   sentence lights up in place instead of being echoed a second time below
   itself). Same box as the plain <input> it replaces, byte-for-byte, plus
   min-height so an empty field doesn't collapse thinner than the old input,
   and pre-wrap so a long sentence wraps instead of scrolling sideways. */
.ctk-quick-field { width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 8px 11px; font-size: var(--fs-sm); outline: none; min-height: 34px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; cursor: text; }
.ctk-quick-field:focus { border-color: var(--primary); }
.ctk-quick-field:empty::before { content: attr(data-ph); color: var(--text-subtle); pointer-events: none; }
.ctk-list { flex: 1; overflow-y: auto; padding: 0 0 16px; }
/* Group heading (Group by: Client · Type · Due).
   Before 2026-08-05 a group break was 23px with NO rule, while two rows inside
   a group were 21px WITH a hairline — so the strongest boundary in the list was
   also its weakest line, and every group ran into the next. Three things carry
   the break now, and none of them is hue: the drawer's owner is colorblind, so
   colour is never the only signal.
   1. SPACE, asymmetric — 28px above, 7px below, so the heading binds downward
      to the rows it labels rather than floating between groups.
   2. A RULE stronger than the row hairline: --border reads 1.57:1 against the
      surface where --border-light reads 1.12:1. A luminance step, not a hue one.
   3. STICKY. In a 380px drawer two rows scroll the heading away; keeping it
      pinned is what answers "whose work am I looking at" on a long list. */
/* ⚠️ Each group is WRAPPED, and the wrapper is what makes sticky correct. A
   sticky element is bounded by its containing block, so flat sticky headings
   in one scroll container never push each other out — they pile up at the top,
   overlapping, three deep by the third group (measured 2026-08-05). The
   wrapper bounds each heading to its own group, so the next one displaces it. */
.ctk-group-wrap + .ctk-group-wrap {
  margin-top: 28px;
  border-top: 1px solid var(--border);
}
.ctk-group {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 18px 7px;
}
.ctk-group.over { color: var(--danger); }
/* A client's name is a door to their profile — in the heading and in a row's
   chip. Real <button>s, so Tab reaches them and Enter works; the hover and
   focus states are what make them look like doors before you click. */
.ctk-group-label { display: inline-block; font: inherit; letter-spacing: inherit;
  text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; }
button.ctk-group-label { cursor: pointer; }
button.ctk-group-label:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
button.ctk-group-label:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 3px; }
button.ctk-client { font-family: inherit; border: 0; cursor: pointer; }
button.ctk-client:hover { color: var(--text); background: var(--border); }
button.ctk-client:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.ctk-empty { padding: 30px 26px; text-align: center; color: var(--text-subtle); font-size: var(--fs-sm); line-height: 1.5; }
/* Roomier rows + a hairline between neighbours: sub-tasks and titles WRAP
   now, so adjacency needs more than proximity to read as separation. */
.ctk-item { display: flex; gap: 11px; padding: 10px 18px; align-items: flex-start; }
.ctk-item + .ctk-item { border-top: 1px solid var(--border-light, rgba(255,255,255,.05)); }
.ctk-item:hover { background: rgba(255, 255, 255, .02); }
.ctk-item:hover .ctk-del { opacity: 1; }
/* circle select with a checkmark on done — the platform's to-do tick */
.ctk-check { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; padding: 0; border-radius: 50%; border: 2px solid var(--border); background: none; cursor: pointer; display: grid; place-items: center; transition: border-color 0.15s, background 0.15s; }
.ctk-check:hover { border-color: var(--success); }
.ctk-check.done { background: var(--success); border-color: var(--success); }
.ctk-check.done svg { color: #fff; }
.ctk-main { flex: 1; min-width: 0; }
.ctk-title { font-size: var(--fs-sm); color: var(--text); line-height: 1.4; }
.ctk-meta { display: flex; gap: 8px; align-items: center; margin-top: 3px; }
.ctk-client { font-size: 11px; color: var(--text-muted); background: var(--surface-2); border-radius: 20px; padding: 1px 8px; }
.ctk-due { font-size: 11px; color: var(--text-subtle); }
.ctk-due.over { color: var(--danger); }
.ctk-due.today { color: var(--warning); }
.ctk-del { flex: 0 0 auto; background: none; border: none; color: var(--text-subtle); font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; opacity: 0; }
.ctk-del:hover { color: var(--danger); }
.ctk-item--done .ctk-title { color: var(--text-subtle); text-decoration: line-through; }

.ctk-pop { position: fixed; z-index: 9995; width: 400px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, .5); }
.ctk-pop[hidden] { display: none; }
.ctk-pop-title { font-size: 11px; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 9px; }
.ctk-pop-input { width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 9px 11px; font-size: var(--fs-base); outline: none; }
.ctk-pop-input:focus { border-color: var(--primary); }
.ctk-pop-due { display: flex; gap: 6px; align-items: center; margin-top: 11px; flex-wrap: wrap; }
.ctk-pop-lbl { font-size: var(--fs-sm); color: var(--text-subtle); margin-right: 2px; }
.ctk-chip { font-size: 12px; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); background: none; color: var(--text-muted); cursor: pointer; }
.ctk-chip.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.ctk-pop-date { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 4px 8px; font-size: 12px; }
.ctk-pop-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 13px; }
.ctk-pb { font-size: var(--fs-sm); padding: 7px 14px; border-radius: var(--radius-sm); font-weight: 600; border: none; cursor: pointer; }
.ctk-pb--ghost { background: none; border: 1px solid var(--border); color: var(--text-muted); }
.ctk-pb--ghost:hover { color: var(--text); }
.ctk-pb--go { background: var(--primary); color: #fff; }
.ctk-pb--go:hover { background: var(--primary-hover); }

/* check-in header "Tasks · N" count badge (this client's open tasks) */
.ciq-flow .ciq-addtask { position: relative; }
.ciq-flow .ciq-addtask .ciq-task-count { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-left: 5px; padding: 0 4px; border-radius: 20px; background: color-mix(in srgb, var(--primary) 22%, transparent); color: var(--primary); font-size: 10px; font-weight: 700; }
.ciq-flow .ciq-addtask .ciq-task-count.hidden { display: none; }

/* "Tasks for {client}" popover — this client's open tasks (check-off) + add form */
.ctk-pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ctk-pop-head .ctk-pop-title { margin-bottom: 0; flex: 1; }
.ctk-pop-x { margin-left: auto; background: none; border: none; color: var(--text-subtle); font-size: 18px; line-height: 1; cursor: pointer; }
.ctk-pop-x:hover { color: var(--text); }
.ctk-pop-list { max-height: 220px; overflow-y: auto; margin-bottom: 12px; }
.ctk-pop-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border-light); }
.ctk-pop-item:first-child { border-top: none; }
.ctk-pop-item:hover .ctk-del { opacity: 1; }
.ctk-pop-item-title { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctk-pop-empty { padding: 8px 2px 4px; font-size: var(--fs-sm); color: var(--text-subtle); }
.ctk-pop-add { border-top: 1px solid var(--border); padding-top: 12px; }

/* S76 drawer upgrades — quick-add due/client row, client filter, per-task
   notes, per-row due-edit popover, completed history. All optional: the
   plain type-and-Enter quick add is untouched. */
.ctk-qa-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.ctk-qa-row .ctk-chip { font-size: 11px; padding: 3px 8px; }
.ctk-qa-date { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 3px 7px; font-size: 11px; }
.ctk-qa-clear { background: none; border: none; color: var(--text-subtle); font-size: 13px; line-height: 1; padding: 0; cursor: pointer; }
.ctk-qa-clear:hover { color: var(--danger); }

.ctk-filter { padding: 9px 16px; border-bottom: 1px solid var(--border-light); flex: 0 0 auto; }
.ctk-filter .custom-select-trigger { padding: 5px 9px; font-size: 12px; }

.ctk-pivot { display: flex; gap: 4px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--border-light); font-size: 11px; color: var(--text-subtle); }
.ctk-pivot .ctk-chip { font-size: 11px; padding: 3px 9px; }

.ctk-notes { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; margin-top: 2px; white-space: pre-wrap; overflow-wrap: break-word; }
.ctk-notes-edit { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; background: var(--surface-2); border: 1px solid var(--primary); border-radius: var(--radius-sm); color: var(--text); padding: 6px 9px; font-size: 12px; line-height: 1.45; font-family: inherit; resize: vertical; outline: none; }
.ctk-edit { flex: 0 0 auto; background: none; border: none; color: var(--text-subtle); line-height: 1; padding: 2px; cursor: pointer; opacity: 0; }
.ctk-item:hover .ctk-edit, .ctk-edit:focus-visible { opacity: 1; }
.ctk-edit:hover { color: var(--text); }

/* Due tag doubles as the edit affordance on drawer rows (span elsewhere). */
.ctk-item button.ctk-due { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.ctk-item button.ctk-due:hover { text-decoration: underline dotted; }
.ctk-due-add { opacity: 0; }
.ctk-item:hover .ctk-due-add, .ctk-due-add:focus-visible { opacity: 1; }

.ctk-duepop { position: fixed; z-index: 9996; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; max-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; box-shadow: 0 12px 34px rgba(0, 0, 0, .5); }
.ctk-duepop[hidden] { display: none; }
.ctk-duepop-date { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 3px 7px; font-size: 11px; }

.ctk-done-date { flex: 0 0 auto; font-size: 11px; color: var(--text-subtle); margin-top: 2px; }
.ctk-foot { flex: 0 0 auto; border-top: 1px solid var(--border-light); padding: 9px 16px; }
.ctk-showdone { background: none; border: none; color: var(--text-subtle); font-size: 12px; cursor: pointer; padding: 0; }
.ctk-showdone:hover { color: var(--text); }
/* Sub to-dos (2026-08-05): compact indented checklist under the title. Done
   state carries line-through + muted, never colour alone. */
.ctk-subs { margin: 5px 0 3px; display: flex; flex-direction: column; gap: 6px; }
/* flex-start + a nudged check: sub-tasks WRAP now (no truncation — Clayton,
   2026-08-05), so the disc and × pin to the FIRST line of a wrapped title. */
.ctk-sub { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.ctk-sub .ctk-subcheck { margin-top: 2px; }
.ctk-sub .ctk-sub-del { margin-top: 2px; }
.ctk-sub .ctk-sub-del { opacity: 0; flex: 0 0 auto; background: none; border: none; color: var(--text-subtle); font-size: 13px; cursor: pointer; padding: 0 2px; line-height: 1; }
.ctk-sub:hover .ctk-sub-del { opacity: 1; }
.ctk-sub .ctk-sub-del:hover { color: var(--danger, #f0605a); }
.ctk-subcheck {
  flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--border); background: none; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.ctk-subcheck:hover { border-color: var(--text-muted); }
.ctk-subcheck.done { background: var(--primary); border-color: var(--primary); }
.ctk-sub-title { font-size: 12px; color: var(--text-2, var(--text)); min-width: 0; flex: 1; white-space: normal; word-break: break-word; line-height: 1.45; }
.ctk-sub-title.is-done { color: var(--text-subtle); text-decoration: line-through; }
.ctk-sub-add {
  width: 100%; box-sizing: border-box; margin-top: 1px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-size: 12px; padding: 5px 8px;
}
.ctk-sub-add:focus { outline: none; border-color: var(--primary); }
.ctk-subcount { font-size: 11px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
/* Inline editing (2026-08-05): titles/notes/sub-titles are contenteditable —
   click the text and type. Hover hints editability; focus frames the field.
   Negative margin + matching padding keep the resting layout byte-identical. */
.ctk-editable { cursor: text; border-radius: 4px; margin: -1px -4px; padding: 1px 4px; }
.ctk-editable:hover { background: var(--hover-overlay, rgba(255,255,255,.04)); }
.ctk-editable:focus { outline: 1px solid var(--primary); background: var(--surface-2); }
.ctk-sub-title.ctk-editable:focus { text-decoration: none; } /* strikethrough while retyping a done sub reads as noise */
/* The client picker is a plain .modal-overlay (z 100) but the tasks drawer
   sits at 9991 — opened from the drawer's "@ client", the picker landed
   BEHIND the panel and read as "nothing happened". Always-on-top is safe:
   it's a choose-dialog, nothing ever stacks over it. */
#client-picker-modal { z-index: 9997; }
/* Composer claim tokens + suggestion list (S76 rework): the suggestion list
   used to be a document.body popup, position:fixed, hand-closed from ~8
   places — it sat on top of the chip row and four commits couldn't keep it
   closed. It is now a normal-flow child of .ctk-quick (.ctk-sugg below): no
   position, no z-index, no listeners of its own, so it cannot cover anything
   and cannot outlive a render. The tokens themselves used to be echoed a
   second time below the plain <input> (.ctk-tk-row, since removed) — they
   now render inline inside .ctk-quick-field itself, the coach's own words
   lit up where they were typed. */
.ctk-tk { border-radius: 4px; padding: 1px 3px; }
.ctk-tk-client { background: rgba(249,115,22,.17); color: #f97316; box-shadow: inset 0 -1px 0 rgba(249,115,22,.45); }
.ctk-tk-due { background: rgba(37, 87, 214,.20); color: #6f9bff; box-shadow: inset 0 -1px 0 rgba(37, 87, 214,.55); }
.ctk-tk-type { background: rgba(34,197,94,.15); color: #22c55e; box-shadow: inset 0 -1px 0 rgba(34,197,94,.45); }
.ctk-tk.is-off { background: none; color: var(--text); box-shadow: none; text-decoration: line-through; }
.ctk-read { margin-top: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 11.5px; color: var(--text-muted); line-height: 1.85; }
.ctk-read b { color: var(--text); font-weight: 600; }
.ctk-read .ctk-k { display: inline-block; width: 58px; color: var(--text-subtle); }
.ctk-sugg { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.ctk-sugg button { text-align: left; background: none; border: 0; color: var(--text); padding: 6px 9px; border-radius: 5px; cursor: pointer; font-size: var(--fs-sm); }
.ctk-sugg button.is-active, .ctk-sugg button:hover { background: var(--surface-2); }
/* Repeats tag on a row + the repeat chips row inside the due popover. */
.ctk-recur { font-size: 11px; color: var(--text-subtle); white-space: nowrap; }
.ctk-duepop-sep { flex-basis: 100%; height: 0; }
.ctk-duepop-lbl { font-size: 11px; color: var(--text-subtle); margin-right: 2px; }
/* Inline @-token — the client tag lives IN the task line, platform mention
   orange, never bold (house rule). Click = the client's profile. */
.ctk-title-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ctk-title-row .ctk-title { flex: 1; min-width: 0; }
.ctk-client-inline { display: inline; background: none; border: none; padding: 0; cursor: pointer; font-size: inherit; font-weight: 400; color: #f97316; white-space: nowrap; }
.ctk-client-inline:hover { text-decoration: underline; }
/* A tag-only task renders just the token; keep a clickable sliver of title
   so text can be added inline later. */
.ctk-title.ctk-editable:empty { min-width: 60px; }
/* Creation composer (+ sub-tasks): sub-items set at add time. The sub-task-add
   input reuses .ctk-sub-add (the row-level style) — no separate class. */
.ctk-qa-more { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
/* Composer sub rows reuse the task-row look; the disc is decorative here. */
.ctk-qa-more span.ctk-subcheck { cursor: default; }
/* CP2 header Tasks chip count */
.cp2-tasks-n { margin-left: 6px; font-size: 11px; font-weight: 700; background: var(--primary-dim, rgba(37,87,214,.18)); border-radius: 8px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.cp2-tasks-n.hidden { display: none; }
.ctk-notes.ctk-editable:empty::before { content: attr(data-ph); color: var(--text-subtle); }

/* Program-window note on the add-item modal. Two states, and the wording
   carries the difference — the tint only reinforces it, since "in a program"
   vs "outside every program" must not depend on telling two colours apart. */
.cal-add-note {
  margin: 0 0 12px; padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: var(--fs-xs); line-height: 1.45;
  border: 1px solid var(--border);
}
.cal-add-note.hidden { display: none; }
.cal-add-note--in { color: var(--text-muted); background: var(--surface-2); }
.cal-add-note--out {
  color: var(--text); background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.45);
}

/* ══════════════════════════════════════════════════════════════
   CP2 Progress tab — phase-aware (S69, Clayton's mockup)
   Judged reads: cards carry a verdict label + tone, never color alone.
   ══════════════════════════════════════════════════════════════ */
.cp2-prog { display: flex; flex-direction: column; gap: 14px; }
.cp2-prog-loading { padding: 40px 0; color: var(--cp2-muted); display: flex; align-items: center; gap: 10px; font-size: 13px; }
.cp2-prog-card {
  background: var(--cp2-surface); border: 1px solid var(--cp2-border);
  border-radius: 8px; padding: 14px 16px;
}
.cp2-prog-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cp2-prog-headnote { font-size: 11px; color: var(--cp2-subtle); margin-left: auto; }
.cp2-prog-head .cp2-btn { flex: 0 0 auto; }
.cp2-prog-head .cp2-rlabel + .cp2-prog-headnote + .cp2-btn { margin-left: 10px; }

/* Phase strip */
.cp2-prog-phrow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.cp2-prog-ph {
  display: flex; align-items: center; gap: 7px; padding: 9px 11px;
  border: 1px solid var(--cp2-border); border-radius: 6px; background: var(--cp2-surface-2);
  min-width: 0;
}
.cp2-prog-ph.now { border-color: var(--cp2-brand); background: rgba(37, 87, 214, 0.08); }
.cp2-prog-ph.done { opacity: 0.75; }
.cp2-prog-ph.next { opacity: 0.85; border-style: dashed; }
.cp2-prog-ph-dot { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }
.cp2-prog-ph-nm { font-size: 12.5px; font-weight: 600; color: var(--cp2-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp2-prog-ph-st { font-size: 11px; color: var(--cp2-subtle); margin-left: auto; white-space: nowrap; }
.cp2-prog-ph.now .cp2-prog-ph-st { color: var(--cp2-brand-bright); font-weight: 600; }
.cp2-prog-goal { margin-top: 10px; font-size: 12.5px; color: var(--cp2-muted); }
.cp2-prog-goal b { color: var(--cp2-text); font-weight: 600; }
.cp2-prog-quiet { color: var(--cp2-subtle); }
.cp2-prog-empty { font-size: 12.5px; color: var(--cp2-subtle); padding: 8px 0; }

/* Stat cards */
.cp2-prog-statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cp2-prog-stat { background: var(--cp2-surface); border: 1px solid var(--cp2-border); border-radius: 8px; padding: 13px 15px; }
.cp2-prog-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cp2-prog-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.cp2-prog-badge-good  { color: #4fd6a0; border-color: rgba(43,189,126,.4); background: rgba(43,189,126,.08); }
.cp2-prog-badge-watch { color: #f7bd5c; border-color: rgba(245,165,36,.4); background: rgba(245,165,36,.08); }
.cp2-prog-badge-quiet { color: var(--cp2-subtle); border-color: var(--cp2-border-2); }
.cp2-prog-stat-val { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: var(--cp2-text); margin-top: 8px; font-variant-numeric: tabular-nums; }
.cp2-prog-unit { font-size: 13px; font-weight: 600; color: var(--cp2-muted); margin-left: 3px; }
.cp2-prog-stat-sub { font-size: 11.5px; color: var(--cp2-subtle); margin-top: 4px; }

/* Charts + legends + insights */
.cp2-prog-chart { height: 210px; position: relative; }
.cp2-prog-chart-tall { height: 250px; }
.cp2-prog-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 11.5px; color: var(--cp2-muted); }
.cp2-prog-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.cp2-prog-insight {
  margin-top: 10px; padding: 10px 12px; border-radius: 6px;
  background: var(--cp2-surface-2); border: 1px solid var(--cp2-border);
  font-size: 12.5px; line-height: 1.55; color: var(--cp2-muted);
}

/* Lift row */
.cp2-prog-grid2 { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; }
.cp2-prog-liftsel { margin-left: auto; flex: 0 0 auto; width: auto; min-width: 160px; }
.cp2-prog-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cp2-prog-table th {
  text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cp2-subtle); padding: 4px 0 8px; border-bottom: 1px solid var(--cp2-border);
}
.cp2-prog-table td { padding: 8px 0; border-bottom: 1px solid var(--cp2-border); color: var(--cp2-text); }
.cp2-prog-table tr:last-child td { border-bottom: 0; }
.cp2-prog-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cp2-prog-when { text-align: right; color: var(--cp2-subtle); }

/* cp2 popover-styled dropdown inside the progress cards (upgradeSelects) */
.cp2-prog .custom-select { width: auto; min-width: 160px; margin-left: auto; }
@media (max-width: 1100px) {
  .cp2-prog-statrow { grid-template-columns: 1fr; }
  .cp2-prog-grid2 { grid-template-columns: 1fr; }
  .cp2-prog-phrow { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   NUTRITION — MEAL ALTERNATES (variant groups)
   A meal can carry up to 5 alternates the client picks between.
   The builder renders a group as one card with a tab strip; the
   active tab is the variant being edited.
   ============================================================ */

/* Variant tab strip — small pills row at the top of the meal card head */
.nut-meal-variant-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.nut-variant-tab {
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nut-variant-tab:hover { color: var(--text); border-color: var(--text-subtle); }
.nut-variant-tab.active {
  color: var(--primary, #2557d6);
  border-color: var(--primary, #2557d6);
  background: rgba(37, 87, 214, 0.08);
}
/* Rename pencil — ghost icon button beside the ACTIVE pill (sibling, never
   nested). Sized like .nut-item-name-edit; muted → text on hover. */
.nut-variant-rename-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-subtle);
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.nut-variant-rename-btn:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}

/* Meal footer actions — "+ Add Food" now shares one row with "+ Alternate" */
.nut-meal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* "+ Alternate" — quiet link-button */
.nut-add-alt-btn {
  padding: 5px 8px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.nut-add-alt-btn:hover:not(:disabled) {
  color: var(--primary, #2557d6);
  background: rgba(37, 87, 214, 0.08);
}
.nut-add-alt-btn:disabled { color: var(--text-subtle); cursor: default; opacity: 0.7; }
.nut-alt-cap-hint { font-size: var(--fs-xs); color: var(--text-subtle); }

/* Duplicate-meal button — sits beside the delete × in the meal head */
.nut-meal-duplicate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-subtle);
  cursor: pointer;
  line-height: 1;
  margin-left: auto;
}
.nut-meal-duplicate-btn:hover { color: var(--text); border-color: var(--text-subtle); }
.nut-meal-duplicate-btn + .nut-meal-delete-btn { margin-left: 0; }

/* Alternates tag in the client-profile plan preview — informational, not a
   warning, so muted rather than the amber "target only" tag color */
.nut-plan-meal-tag.alt { color: var(--text-muted); }

/* ============================================================
   MEETINGS — owner-only capture library (Task 10)
   Row/hover recipe mirrors .cr-card (checkin-review.js); status pill
   mirrors .a2p-stage-pill; input recipe mirrors .modal-input. Flat rows,
   1px borders, no colored left border — CRM 2.0.
   ============================================================ */
.meeting-record-now {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.meeting-input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 11px 13px;
  font-size: var(--fs-md);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.meeting-input:focus { border-color: var(--primary); }
.meeting-input::placeholder { color: var(--text-subtle); }
#meetings-link-input { flex: 2; min-width: 220px; }
#meetings-title-input { flex: 1; min-width: 160px; }

.meeting-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.meeting-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.meeting-row:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
  transform: translateY(-1px);
}
.meeting-row:active { transform: translateY(0); }
/* No status border on the row — the pill carries the state (Clayton: no
   colored left bar on cards). */

.meeting-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.meeting-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meeting-row-sub {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Upcoming-row toggle wrapper — same recipe as .meeting-detail-actions,
   scoped separately because it sits in a list row, not the detail header. */
.meeting-row-actions { display: flex; gap: 8px; }

.meeting-status {
  font-size: 0.7rem;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}
.meeting-status--bot_dispatched,
.meeting-status--in_progress,
.meeting-status--processing { background: rgba(245,158,11,0.18); color: #f59e0b; }
.meeting-status--ready      { background: rgba(34,197,94,0.15);  color: #22c55e; }
.meeting-status--bot_failed { background: rgba(239,68,68,0.15);  color: #ef4444; }

/* Detail panel — mounted on the already-styled .card wrapper in meetings.js */
.meeting-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.meeting-detail-actions { display: flex; gap: 8px; }
.meeting-summary,
.meeting-actions,
.meeting-transcript { margin-top: 18px; }
.meeting-summary h4,
.meeting-actions h4,
.meeting-transcript h4,
.meeting-section-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.meeting-summary p { font-size: var(--fs-md); line-height: 1.5; }
.meeting-actions ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.meeting-actions li {
  font-size: var(--fs-md);
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.meeting-transcript pre {
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow-y: auto;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
#meeting-audio-slot audio { width: 100%; margin-top: 12px; }

/* ── Booking-type builder (FitOps Booked Phase 2) ─────────────── */
.bt-section { border-bottom: 1px solid var(--border-light); }
.bt-section:first-of-type { border-top: 1px solid var(--border-light); }
.bt-summary-row { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 56px; padding: 8px 2px; cursor: pointer; list-style: none; }
.bt-summary-row::-webkit-details-marker { display: none; }
.bt-summary-row:hover { background: var(--hover-overlay); }
.bt-summary-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.bt-summary-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bt-section-title { font-size: var(--fs-md); font-weight: 500; color: var(--text); }
.bt-summary { font-size: var(--fs-sm); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-chevron { flex: none; color: var(--text-subtle); transition: transform 150ms ease; }
.bt-section[open] .bt-chevron { transform: rotate(180deg); }
.bt-section-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 16px; }
.bt-inline-note { font-size: var(--fs-sm); color: var(--text-muted); }
.bt-url-preview { font-size: var(--fs-sm); color: var(--text-muted); word-break: break-all; }
@media (prefers-reduced-motion: reduce) { .bt-chevron { transition: none; } }

/* ── Booking form question builder (FitOps Booked Phase 2) ────── */
/* Flat rows, not cards — status by word ("Required", "Off"), never colour
   alone. .bq-row stacks its header line over an optional inline expansion
   or delete-confirm; .bq-row-main is the actual flat row. The drag handle
   (.bq-grip) drives SortableJS (see booking-question-editor.js's
   initSortable); the ↑/↓ buttons in .bq-flags are the keyboard/
   screen-reader path and are never merely a fallback for it. */
.bq-row { display: flex; flex-direction: column; border-bottom: 1px solid var(--row-border); }
.bq-row:last-of-type { border-bottom: 0; }
.bq-row-main { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 4px; }
.bq-row-off .bq-label, .bq-row-off .bq-meta { opacity: 0.55; }
.bq-grip { color: var(--text-subtle); cursor: grab; font-size: 15px; line-height: 1; padding: 4px; flex: none; }
.bq-grip:active { cursor: grabbing; }
.bq-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.bq-label { font-size: var(--fs-base); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bq-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.bq-flags { display: flex; align-items: center; gap: 6px; flex: none; }
.bq-required { font-size: var(--fs-xs); color: var(--text-muted); }
/* .btn-xs's own padding renders these ~22px tall — comfortably under a 44px
   tap target. .bq-row-main is already 52px, so the room exists to claim
   without touching .btn-xs (shared across the whole CRM) or the row's own
   density: an invisible ::after, centered on the real button, extends only
   the CLICKABLE region. It never paints, so hover/focus still look exactly
   like every other .btn-xs.btn-ghost in the app.
   Vertical-only, not a 44px square: a square forces the overlay to spill
   sideways into whatever sits beside the button — in the option row,
   .bq-option-remove's square overhung the ~8px gap into the text input
   next to it, and onRemoveOption splices the option with no confirm. The
   52px row already has the vertical room, so expanding only top/bottom
   closes the same dead zone without ever encroaching sideways. */
.bq-toggle, .bq-edit, .bq-delete, .bq-option-remove,
.bq-up, .bq-down, .bq-option-up, .bq-option-down { position: relative; }
.bq-toggle::after, .bq-edit::after, .bq-delete::after, .bq-option-remove::after,
.bq-up::after, .bq-down::after, .bq-option-up::after, .bq-option-down::after {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  width: auto; height: 44px; transform: translateY(-50%);
}
.bq-empty { font-size: var(--fs-xs); color: var(--text-subtle); text-align: center; margin: 0; padding: 16px 4px; }
.bq-add:disabled, .bq-add-option:disabled { opacity: 0.5; cursor: not-allowed; }

/* ↑/↓ reorder buttons — hover-revealed like the rest of .bq-flags, but
   also focus-revealed: hover-only would hide them from keyboard tabbing
   entirely, and they are the ONLY reorder path a keyboard or
   screen-reader user has, not a fallback for the drag handle. They stay
   in the accessibility tree (never display:none/visibility:hidden) at
   every opacity. */
.bq-up, .bq-down, .bq-option-up, .bq-option-down { opacity: 0; transition: opacity 120ms ease; }
.bq-row:hover .bq-up, .bq-row:hover .bq-down,
.bq-option-row:hover .bq-option-up, .bq-option-row:hover .bq-option-down { opacity: 1; }
.bq-up:focus-visible, .bq-down:focus-visible,
.bq-option-up:focus-visible, .bq-option-down:focus-visible { opacity: 1; }
/* A touch screen produces neither :hover nor :focus-visible, so the
   opacity-0 default above would leave these buttons in the accessibility
   tree but invisible — tappable without ever being seen, which is worse
   than either state on its own. Dragging is the touch-friendly reorder
   path, but these arrows are still the only one a touch screen reader
   exposes, so they stay permanently visible on any device that can't
   hover rather than relying on a gesture that bypasses them entirely. */
@media (hover: none) {
  .bq-up, .bq-down, .bq-option-up, .bq-option-down { opacity: 1; }
}
.bq-sort-ghost { opacity: 0.4; }
.bq-sort-chosen { background: var(--surface-hover); }
/* The floating clone SortableJS creates under fallbackOnBody — appended to
   <body>, so it's outside .bq-list's own styling context, and with no
   fallbackClass set it rendered with no border, no shadow, and no radius:
   a flat rectangle easy to lose against the page. Same treatment
   agreement-builder.js and checkin-forms.js give their own fallback
   clones: an opaque surface, a border and shadow that read as "lifted",
   and a z-index high enough to clear this editor's own modal. */
.bq-sort-fallback {
  opacity: 0.92 !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  background: var(--surface) !important;
  z-index: 100000 !important;
}
/* Screen-reader-only: announces each move without shifting layout. */
.bq-live { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .bq-up, .bq-down, .bq-option-up, .bq-option-down { transition: none; opacity: 1; }
}

.bq-expansion { display: flex; flex-direction: column; gap: 10px;
  padding: 12px; margin: 0 4px 10px; background: var(--surface-2); border-radius: var(--radius); }
.bq-field { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--text); flex: 1; min-width: 0; }
.bq-field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.bq-checkbox-field { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text); white-space: nowrap; }
.bq-label-field { position: relative; }
.bq-counter { font-size: var(--fs-xs); color: var(--text-muted); align-self: flex-end; }
.bq-type-fields { display: flex; flex-direction: column; gap: 10px; }
.bq-field-caption { font-size: var(--fs-sm); color: var(--text); }
.bq-options { display: flex; flex-direction: column; gap: 8px; }
.bq-options-list { display: flex; flex-direction: column; gap: 6px; }
.bq-option-row { display: flex; align-items: center; gap: 8px; }
.bq-option-row .meeting-input { flex: 1; }
.bq-option-grip { color: var(--text-subtle); cursor: grab; font-size: 15px; line-height: 1; padding: 4px; flex: none; }
.bq-option-grip:active { cursor: grabbing; }
.bq-error { font-size: var(--fs-sm); color: var(--danger); margin: 0; }
.bq-expansion-actions { display: flex; gap: 8px; margin-top: 2px; }

.bq-delete-confirm { display: flex; flex-direction: column; gap: 10px;
  padding: 12px; margin: 0 4px 10px; background: var(--surface-2); border-radius: var(--radius); }
.bq-delete-confirm-text { font-size: var(--fs-sm); color: var(--text); margin: 0; }
.bq-confirm-delete { background: var(--danger-dim); color: var(--danger); }
.bq-confirm-delete:hover { background: var(--danger); color: #fff; }

/* ── Settings → Booking links ─────────────────────────────────────────────
   The coach handle and the optional branded booking domain. Flat surfaces,
   sapphire only on the live link; status is a WORD in a pill, with tone as a
   secondary cue — never colour on its own. */
.bd-block { padding: 14px 0; border-top: 1px solid var(--border); }
.bd-block:first-child { padding-top: 0; border-top: none; }
.bd-block-head { display: flex; align-items: center; gap: 8px; }
.bd-label { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.bd-block-head .bd-label { margin-bottom: 0; }
.bd-help { font-size: var(--fs-sm); color: var(--text-muted); margin: 8px 0 10px; line-height: 1.6; }
.bd-row { display: flex; gap: 8px; align-items: center; }
.bd-row--actions { margin-top: 12px; }
.bd-input { flex: 1; min-width: 0; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-base); padding: 8px 11px; }
.bd-input::placeholder { color: var(--text-subtle); }
.bd-input:focus { outline: none; border-color: var(--primary); }
.bd-preview { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--text-subtle); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.bd-host { margin: 8px 0 0; font-size: var(--fs-md); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.bd-error { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--danger); }
.bd-reason { margin: 0; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.bd-link { color: var(--primary); text-decoration: none; }
.bd-link:hover { text-decoration: underline; }
.bd-danger { color: var(--danger); }

/* The DNS record a coach has to copy across. A definition list in two
   columns reads faster than a table at this size, and wraps without a
   horizontal scrollbar on a narrow settings pane. */
.bd-dns { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px;
  padding: 12px; background: var(--surface-2); border-radius: var(--radius-sm); }
.bd-dns > div { display: contents; }
.bd-dns-k { font-size: var(--fs-xs); color: var(--text-subtle); text-transform: uppercase; letter-spacing: .04em; }
.bd-dns-v { font-size: var(--fs-sm); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }

.bd-pill { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.bd-pill--success { background: var(--success-dim); color: var(--success); }
.bd-pill--danger { background: var(--danger-dim); color: var(--danger); }
.bd-pill--muted { background: var(--surface-2); color: var(--text-muted); }
/* Subdomain field: the coach types only the first part, the domain they
   already verified is shown fixed beside it. One box, one thing to mistype. */
.bd-hostsplit { display: flex; align-items: stretch; flex: 1; min-width: 0;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.bd-hostsplit:focus-within { border-color: var(--primary); }
.bd-input--sub { flex: 0 1 auto; width: 10ch; min-width: 6ch; background: transparent;
  border: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); padding-right: 0; }
.bd-input--sub:focus { border-color: transparent; }
.bd-suffix { display: flex; align-items: center; padding: 0 11px 0 0; white-space: nowrap;
  font-size: var(--fs-base); color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }


/* ═══════════════════════════════════════════════════════════════════
   COACH CALENDAR — Layout A ("today's list, always on the left")
   Namespace c2-. Approved mockup: _mockups/calendar-rebuild.html.
   Spec: docs/superpowers/specs/2026-08-13-calendar-rebuild-spec.md

   Two rules run through every line below:
   ① STATUS IS A WORD, NEVER A COLOUR. Clayton is colorblind. Hue may agree
     with the word; it may never carry the state alone. That is why the
     day-off column steps its ground AND hatches, why Held is dashed and
     hollow rather than grey, and why the destructive row in a peek is
     separated by structure rather than by red.
   ② TODAY MUST OUT-SHOUT THE WEEK. Brighter ground, a sapphire rule, bold
     numerals, and the word "Today" spelled out.
   ═══════════════════════════════════════════════════════════════════ */

/* ⚠️ EVERY MOMENT CONTAINER MUST BE IN THIS SCOPE. :root still carries the
   LEGACY revfit blue #2557d6 — anything left out of this list silently
   inherits it and loses the status treatment entirely. That exact miss is
   how the destructive rows once rendered the same colour as the safe ones.
   The ids for phase 1b are listed now so a new surface cannot be added
   without its tokens. Guarded by __tests__/token-scope.test.mjs. */
#view-calendar,
.c2-peek, .c2-sheet-wrap,
#c2-dropped, #c2-drag, #c2-cmd, #c2-undo {
  --bg: #0d1117;
  --surface: #161c27;
  --surface-2: #1e2535;
  --surface-3: #232c3d;
  --surface-hover: #232c3d;
  --border: #2a3340;
  --border-strong: #3a4658;
  --border-light: #1e2535;
  --hover-overlay: rgba(255, 255, 255, 0.028);

  --text: #e8edf5;
  --text-muted: #9aaabe;
  --text-subtle: #7a8fa8;
  /* One step below subtle. The hour labels outside the working day, and
     nothing else — it is below the body-text floor on purpose. */
  --text-dim: #5f7288;

  /* The ground step for "this is quieter, but nothing is hidden". Shared by a
     Day-off column and the hours outside the working day, so the two read as
     the same KIND of signal. Deliberately NOT --hover-overlay: an interaction
     state and a permanent ground must be able to move independently. */
  --c2-quiet: rgba(255, 255, 255, .028);

  /* Royal Sapphire — one accent, used sparingly */
  --primary: #2557d6;
  --primary-hover: #1f4bc0;
  --primary-dim: rgba(37, 87, 214, 0.16);
  --accent: #2557d6;
  --accent-strong: #5a86f5;
  --accent-dim: rgba(37, 87, 214, 0.16);

  --success: #2bbd7e;  --warning: #f5a524;  --danger: #f0605a;  --info: #5a86f5;
  --green-dim: rgba(43, 189, 126, 0.14);  --green-text: #4fd39a;
  --amber-dim: rgba(245, 165, 36, 0.14);  --amber-text: #f8bd5f;
  --red-dim: rgba(240, 96, 90, 0.13);     --red-text: #f6867f;
}
/* ⚠️ THE CALENDAR OWNS ITS PANE — it must FILL the scroll area, never grow
   past it. `.view` is `flex: 1 0 auto` inside a scrolling `.views-container`
   that also holds an in-flow footer, which is right for ordinary pages that
   grow downward. The calendar is the opposite: a fixed frame with its own
   internal scrollers. Without `1 1 auto` + `min-height: 0` its children get an
   auto height, collapse, and the whole thing renders as a squashed strip below
   the page footer (2026-08-14 — it shipped looking exactly like that). */
#view-calendar {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
/* The footer lives inside .views-container, which navigation.js already hides
   for outer views (_setOuterViewLayout). Nothing extra needed here. */

/* ── Cockpit bar ─────────────────────────────────────────────────── */
/* ⚠️ NO GROUND OF ITS OWN AND NO RULE UNDER IT. The toolbar, the rail and the
   page all share ONE ground, and the week grid is the only thing lifted off it.
   When the toolbar and rail were `--surface` and the page was `--bg`, the gap
   around the rounded card read as a dark channel CUT between two lighter
   panels — the calendar looked bolted on rather than part of the page. Google
   does the same thing: one ground, one delineated grid. */
.c2-bar { display: flex; align-items: center; gap: 14px; padding: 0 18px; height: 56px; flex: 0 0 auto;
  flex-wrap: nowrap; overflow: hidden; background: transparent; }
.c2-date { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.c2-date h1 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.03em; margin: 0; white-space: nowrap; }
.c2-date span { font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; }
.c2-nav { display: flex; align-items: center; gap: 2px; }
.c2-nav button { width: 28px; height: 28px; display: grid; place-items: center; background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; }
.c2-nav button:hover { background: var(--surface-hover); color: var(--text); }
.c2-today { height: 28px; padding: 0 12px; border: 1px solid var(--border); background: transparent;
  border-radius: var(--radius-sm); color: var(--text-muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.c2-today:hover { background: var(--surface-hover); color: var(--text); }
/* The snap-back goes loud ONLY once today has left the screen. The rail is
   why it never has to be urgent. */
.c2-today.is-away { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 500; }
.c2-spacer { flex: 1; }
.c2-seg { display: flex; background: var(--input-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 2px; }
.c2-seg button { padding: 4px 12px; border: 0; background: transparent; color: var(--text-muted); font: inherit;
  font-size: var(--fs-sm); border-radius: 3px; cursor: pointer; }
.c2-seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.c2-k { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px 0 9px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-subtle);
  font-size: var(--fs-sm); cursor: pointer; background: var(--input-bg); white-space: nowrap; }
.c2-k:hover { border-color: var(--text-subtle); }
.c2-k kbd { font: inherit; font-size: 11px; color: var(--text-muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; }
.c2-new { height: 28px; padding: 0 13px; background: var(--primary); border: 1px solid var(--primary); color: #fff;
  font: inherit; font-size: var(--fs-sm); font-weight: 500; border-radius: var(--radius-sm); cursor: pointer; }
.c2-new:hover { background: var(--primary-hover); }

/* ── Body ────────────────────────────────────────────────────────── */
.c2-body { flex: 1; min-height: 0; display: flex; overflow: hidden; }

/* ── The today rail (a run sheet — no dead air between appointments) ─
   340px or absent; it never partially shrinks. It always renders TODAY,
   whatever week the grid is showing — that is the whole reason "Back to
   today" is never urgent. */
/* ⚠️ SHARES THE PAGE GROUND, WITH NO HAIRLINE ON ITS RIGHT. The gap to the
   week card is what separates them now; a border as well drew a second line a
   few pixels from the card's own edge, which is the seam that made the two
   read as separate modules. */
.c2-run { width: var(--rail-w, 340px); flex: 0 0 auto; display: flex;
  flex-direction: column; background: transparent; overflow: hidden; }
.c2-run.is-full { width: 100%; }

/* The drag handle between the rail and the week card.
   ⚠️ THE HIT AREA IS THE WHOLE 11px, THE VISIBLE MARK IS 2px. A grip you can
   see but not easily hit is worse than no grip; a wide invisible strip that
   only shows itself on hover is how every resizable pane worth using behaves. */
.c2-grip { flex: 0 0 auto; width: 11px; cursor: col-resize; position: relative;
  background: transparent; border: 0; padding: 0; align-self: stretch; }
.c2-grip::after { content: ''; position: absolute; top: 14px; bottom: 14px; left: 4px; width: 2px;
  border-radius: 2px; background: transparent; transition: background .12s ease; }
.c2-grip:hover::after, .c2-grip:focus-visible::after,
.c2-grip.is-dragging::after { background: var(--border-strong); }
.c2-grip:focus-visible { outline: none; }
/* While dragging, nothing else may claim the cursor or start selecting text. */
.c2-body.is-resizing { cursor: col-resize; user-select: none; }
.c2-body.is-resizing * { pointer-events: none; }
.c2-run-head { padding: 13px 16px 11px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.c2-run-day { display: flex; align-items: baseline; gap: 8px; }
.c2-run-day strong { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.02em; }
.c2-run-day em { font-style: normal; font-size: var(--fs-xs); color: var(--accent-strong); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; }
.c2-run-sum { margin-top: 3px; font-size: var(--fs-sm); color: var(--text-muted); }
.c2-run-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0 40px; }
/* Run-sheet VIEW: the same rail content, full width, when the rail collapses
   or the coach picks it from the segmented control. Nothing about the content
   changes — same rows, same strip, same "Came off today". */
.c2-run.is-full { width: auto; flex: 1; border-right: 0; }
.c2-run.is-full .c2-run-list { padding-left: 0; padding-right: 0; }

.c2-item { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 9px 16px; position: relative;
  cursor: pointer; width: 100%; background: transparent; border: 0; font: inherit; color: inherit; text-align: left; }
.c2-item:hover { background: var(--hover-overlay); }
.c2-item .t { font-size: var(--fs-sm); color: var(--text-muted); padding-top: 1px; white-space: nowrap; }
.c2-item .n { font-size: var(--fs-base); font-weight: 500; letter-spacing: -.01em; }
.c2-item .m { margin-top: 3px; font-size: var(--fs-xs); color: var(--text-subtle); display: flex;
  flex-wrap: wrap; gap: 5px; align-items: center; }
.c2-item .m i { font-style: normal; }
.c2-dot { opacity: .5; }
/* Past rows dim to say ELAPSED. Only the word says "done". */
.c2-item.is-past .n, .c2-item.is-past .t { opacity: .5; }
.c2-item.is-personal .n { font-weight: 400; color: var(--text-muted); }
/* All-day rows are a compact single line: the title truncates rather than
   wrapping to a second and third row, and the badge rides at the end of it. */
.c2-item.is-allday { padding-top: 6px; padding-bottom: 6px; align-items: center; }
.c2-item.is-allday .n { display: flex; align-items: center; gap: 7px; min-width: 0; }
.c2-item.is-allday .n .c2-w { flex: 0 0 auto; }
.c2-item.is-allday .n .tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── The status chip. A WORD, always. ────────────────────────────── */
.c2-w { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px;
  border-radius: 3px; border: 1px solid var(--border); color: var(--text-muted); background: var(--surface-2); }
.c2-w--booked { color: var(--accent-strong); border-color: rgba(90, 134, 245, .38); background: var(--accent-dim); }
.c2-w--done { color: var(--green-text); border-color: rgba(43, 189, 126, .34); background: var(--green-dim); }
/* The only state that is ASKING for something. If everything is amber, nothing is. */
.c2-w--noshow { color: var(--amber-text); border-color: rgba(245, 165, 36, .38); background: var(--amber-dim); }
.c2-w--busy, .c2-w--hidden, .c2-w--shared { color: var(--text-subtle); }
.c2-w--hidden { border-style: dashed; }
.c2-w--shared { border-color: var(--border-strong); color: var(--text-muted); }
/* A standing slot beyond the 8-day horizon: held, not booked, no credit spent.
   Dashed and hollow — tentative by SHAPE, not by colour. */
.c2-w--held { color: var(--text-subtle); border-style: dashed; background: transparent; }

/* buffer strips + held ghosts, in the rail */
.c2-buffer { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 3px 16px;
  font-size: var(--fs-xs); color: var(--text-subtle); }
.c2-buffer .b { height: 14px; border-radius: 2px; display: flex; align-items: center; padding-left: 8px;
  background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255, 255, 255, .06) 4px 8px); }
.c2-ghost { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 9px 16px; cursor: pointer;
  width: 100%; background: transparent; border: 0; font: inherit; color: inherit; text-align: left; }
.c2-ghost:hover { background: var(--hover-overlay); }
.c2-ghost .t { font-size: var(--fs-sm); color: var(--text-subtle); }
.c2-ghost .g { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 7px 10px;
  background: transparent; }
.c2-ghost .g b { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.c2-ghost .g span { font-size: var(--fs-xs); color: var(--text-subtle); }

/* ── The unmarked-session reminder ────────────────────────────────
   Amber, at the top of the day, ONLY when something is actually
   outstanding — no permanent chrome. It NAMES the session, because a badge
   tells you a number and leaves you hunting. */
.c2-todo { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; width: calc(100% - 24px);
  margin: 4px 12px 8px; padding: 9px 12px; text-align: left; cursor: pointer; font: inherit;
  background: var(--amber-dim); border: 1px solid rgba(245, 165, 36, .34); border-radius: var(--radius-sm); }
.c2-todo:hover { background: rgba(245, 165, 36, .2); }
.c2-todo .n { font-size: var(--fs-sm); font-weight: 600; color: var(--amber-text); }
.c2-todo .d { font-size: var(--fs-xs); color: var(--text-muted); }

/* ── "Came off today" ─────────────────────────────────────────────
   Every cancel frees the hour immediately, so nothing sits on the grid.
   But the day still has to answer "what happened to 9:30?" */
.c2-offday { margin-top: 14px; padding: 13px 16px 4px; border-top: 1px solid var(--border); }
.c2-offday .lab { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-subtle);
  font-weight: 600; margin-bottom: 6px; }
.c2-off { display: grid; grid-template-columns: 52px 1fr; gap: 12px; width: 100%; padding: 7px 0;
  background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.c2-off:hover .b { color: var(--text); }
.c2-off .t { font-size: var(--fs-sm); color: var(--text-subtle); white-space: nowrap; }
.c2-off .b { font-size: var(--fs-sm); color: var(--text-muted); text-decoration: line-through;
  text-decoration-color: var(--text-subtle); }
.c2-off .m { grid-column: 2; font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 2px; }

/* the NOW rule, in the rail — red AND a time label, never colour alone */
.c2-now { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 7px 16px; }
.c2-now .lbl { font-size: 11px; font-weight: 600; color: #0d1117; background: var(--danger); border-radius: 3px;
  padding: 1px 5px; text-align: center; letter-spacing: .02em; }
.c2-now .rule { height: 1px; background: var(--danger); }

.c2-empty { padding: 18px 16px; font-size: var(--fs-sm); color: var(--text-subtle); }

/* The week and its category legend stack vertically inside the body's row. */
/* ⚠️ THE CARD IS THE WRAP, NOT THE GRID. The week grid and the category
   legend under it are ONE panel, so the radius belongs on the element that
   holds both — rounding `.c2-week` alone would curve its bottom corners into
   the middle of the panel, with the legend still square underneath.
   `overflow: hidden` is what actually clips the head, the all-day strip and the
   legend to the corners; without it the children just paint over them.
   The right margin IS the gutter — it used to be padding on `.c2-week`, which
   put the gap INSIDE the panel and so ran the card itself to the window edge,
   which is the "about to fall off the page" look this replaces. */
.c2-weekwrap { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  margin: 8px 20px 10px 12px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }

/* ── Week grid ───────────────────────────────────────────────────── */
/* ⚠️ THE RIGHT GUTTER IS ON .c2-week, SO THE HEAD AND THE BODY INSET TOGETHER.
   Without it Sunday ran flush to the window edge and read as clipped — as
   though the week continued off-screen. `#view-calendar` declares 14px of
   padding but something later overrides it to 0, so this cannot rely on it.
   --sb reserves the scrollbar's width in the HEAD and the all-day strip, which
   only the scrolling body loses. Measured on the real page: the Sunday header
   ended at 1800 and its column at 1794, so the two never lined up at the right
   edge. It is set from JS because a scrollbar is 0px on overlay systems and
   6-17px elsewhere, and a hardcoded guess is wrong on most machines. */
.c2-week { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); }
.c2-week-head, .c2-allday { padding-right: var(--sb, 0px); }
/* ⚠️ NO BOTTOM BORDER. The day/date row and the all-day strip share a ground
   and read as ONE block, the way Google's does — a rule between them cuts the
   date away from the all-day event sitting under it, which is the thing that
   date is labelling. The columns are still separated, vertically, by the lines
   that run down through both. */
.c2-week-head { display: flex; flex: 0 0 auto; background: var(--surface); }
.c2-gutter { width: var(--gut, 46px); flex: 0 0 auto; border-right: 1px solid var(--border);
  display: flex; align-items: flex-end; justify-content: stretch; padding-bottom: 4px; }
.c2-cols { flex: 1; min-width: 0; display: flex; }
.c2-col-h { flex: 1 1 0; min-width: 0; padding: 9px 8px; border-left: 1px solid var(--border-light);
  text-align: center; cursor: pointer; background: transparent; border-top: 0; border-right: 0; border-bottom: 0;
  font: inherit; color: inherit; }
.c2-col-h:hover { background: var(--hover-overlay); }
.c2-col-h:first-child { border-left: 0; }
.c2-col-h .d, .c2-col-h .n, .c2-col-h .c { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c2-col-h .d { font-size: var(--fs-xs); color: var(--text-subtle); letter-spacing: .07em; text-transform: uppercase; }
.c2-col-h .n { font-size: var(--fs-lg); font-weight: 500; letter-spacing: -.02em; margin-top: 1px; }
.c2-col-h .c { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 2px; }
.c2-col-h.is-quiet .n { color: var(--text-muted); font-weight: 400; }

/* Today. ⚠️ --accent-strong (#5a86f5, 4.49:1 on this ground), never --accent
   (#2557d6, 2.52:1) — today's own label must not be the least legible text on
   screen. The bold numerals and the spelled-out word carry it without hue. */
/* ⚠️ NO FILL ON TODAY'S HEADER. The pale block sat directly above the all-day
   strip, which is already lighter than the grid, so the two read as one box
   drawn around today's banners — a container that is not there.
   ⚠️ Today is still marked three ways without it, and one of them is a WORD:
   the bar above it, the accent-coloured day name, and "TODAY" spelled out. That
   matters here — colour is never the only signal on this calendar. */
.c2-col-h.is-today { box-shadow: inset 0 3px 0 var(--accent-strong); }
.c2-col-h.is-today .d { color: var(--accent-strong); font-weight: 700; }
.c2-col-h.is-today .n { font-weight: 700; color: var(--text); }

/* ── All-day strip ───────────────────────────────────────────────────
   ⚠️ `flex: 0 0 auto` IS LOAD-BEARING. `.c2-week` is a column flex box and the
   grid's whole height depends on `.c2-scroll` keeping a definite cross size; a
   growable strip here takes that height and the grid collapses.
   A multi-day event is ONE banner across the columns it spans, not a chip per
   day — and Google's `end.date` is exclusive, so the banner stops a day earlier
   than the raw field says. */
.c2-allday { display: flex; flex: 0 0 auto; border-bottom: 1px solid var(--border);
  background: var(--surface); max-height: 92px; overflow-y: auto; }
/* ⚠️ BOTTOM-ALIGNED, because it labels the hours that start immediately below
   it. Top-aligning left the names floating a row away from their own column. */
.c2-allday .lbl { width: var(--gut, 46px); flex: 0 0 auto; border-right: 1px solid var(--border);
  display: flex; align-items: flex-end; padding: 0 0 4px; line-height: 1.2; }
/* The column separators, continued through the all-day strip.
   ⚠️ DRAWN AS A BACKGROUND, NOT AS BORDERS. The lanes box is ONE element
   holding absolutely-positioned banners that span any number of days — there
   are no per-day children here to hang a border on. Each line sits on the RIGHT
   edge of its column, which is the same pixel as the `border-left` on `.c2-col`
   below, so the two line up down the whole grid. */
.c2-allday .lanes { flex: 1; min-width: 0; position: relative; padding: 4px 0;
  background-image: repeating-linear-gradient(to right,
    transparent 0 calc(100% / 7 - 1px),
    var(--border-light) calc(100% / 7 - 1px) calc(100% / 7)); }
.c2-allday .lane { position: relative; height: 20px; margin-bottom: 3px; }
.c2-allday .lane:last-child { margin-bottom: 0; }
/* ⚠️ THE CATEGORY COLOURS GO LAST, AND THE BORDER IS NOT A SHORTHAND. This rule
   set `--cat-bg` at the top and then `background: var(--surface-2)` further
   down — same rule, so the last one won and every all-day banner rendered grey
   however its category was coloured. The `border: 1px solid var(--border)`
   shorthand did the same to `--cat-bd`, resetting a colour that had already
   been set above it. Both were invisible: the element carried the right custom
   properties the whole time, so anything that read THEM looked correct. */
.c2-ad { position: absolute; height: 20px; border-radius: var(--radius-sm); padding: 0 7px;
  font-size: var(--fs-xs); line-height: 18px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; border-width: 1px; border-style: solid;
  text-align: left; font-weight: 500; cursor: pointer; font-family: inherit;
  background: var(--cat-bg, var(--surface-2));
  border-color: var(--cat-bd, var(--border));
  color: var(--cat-fg, var(--text-muted)); }
.c2-ad:hover { border-color: var(--text-subtle); }
/* The word leads here too, for the same reason it leads on a grid block. */
.c2-ad .wd { font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  font-size: var(--fs-xs); margin-right: 6px; }
.c2-ad .wd.w-busy, .c2-ad .wd.w-hidden, .c2-ad .wd.w-shared { color: var(--text-subtle); }

/* overscroll-behavior: a trackpad flick at the end of ~700px of grid used to
   chain straight into the page behind the calendar. */
.c2-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; position: relative;
  overscroll-behavior: contain; }
/* ⚠️ THE EXPLICIT HEIGHT ON BOTH PANES IS THE FIX FOR THE VANISHING GRID, and
   it is not about the absolute positioning. `.c2-scroll` is a single-line flex
   row with a DEFINITE cross size (`.c2-week` is overflow:hidden with a definite
   height), so `align-items: stretch` sized every child to exactly one pane.
   `.c2-col`'s only children are absolutely positioned and contribute no content
   height, so nothing pushed back, and `.c2-lines` (inset:0) painted its gradient
   over a one-pane box and stopped. The page scrolled at all only because the
   in-flow `.c2-hr` labels OVERFLOWED their stretched parent — which is why the
   labels kept going while the lines ran out.
   An explicit height beats stretch, because stretch only applies to an `auto`
   cross size. --hours comes from grid.js.
   ⚠️ NEVER add `contain: strict` or `contain: size` to these three boxes or
   `.c2-col`: size containment makes a box ignore its contents and re-breaks
   this in a way that looks identical. */
.c2-hours { width: var(--gut, 46px); flex: 0 0 auto; border-right: 1px solid var(--border); position: relative;
  height: calc(var(--hours, 24) * var(--hh, 52px)); min-height: 100%; }
.c2-hr { height: var(--hh, 52px); position: relative; }

/* ── The second timezone ──────────────────────────────────────────────
   ⚠️ ALL THREE COLUMNS SHARE `--gut`. The head gutter, the all-day spacer and
   the hour rail must be the SAME width or the all-day banners stop sitting over
   their own day columns — that alignment was already broken once. Widening for
   a second zone therefore widens one variable, never three rules. */
.c2-week.has-tz2 { --gut: 84px; }
/* ⚠️ THE SAME `top: -7px` AS THE PRIMARY. Both labels straddle the hour line
   they belong to; leaving this at +2px put the second zone 9px lower than the
   first, so the two columns read as staggered rather than as one row. */
.c2-hr i { position: absolute; left: 0; top: -7px; width: 34px; text-align: right;
  font-style: normal; font-size: 11px; color: var(--text-subtle); opacity: .72; }
.c2-week.has-tz2 .c2-hr span { padding-left: 40px; }

/* ⚠️ LAID OUT LIKE `.c2-hr`, NOT LIKE A BUTTON. The secondary name sits in a
   34px right-aligned block on the left and the primary 7px off the right edge —
   the exact positions of the two hour labels below, so each name sits over its
   own column. */
.c2-tzpick { width: 100%; position: relative; height: 15px; background: transparent; border: 0;
  padding: 0; cursor: pointer; font: inherit; font-size: 11px; letter-spacing: .04em;
  color: var(--text-subtle); border-radius: var(--radius-sm); }
.c2-tzpick:hover { color: var(--text); background: var(--hover-overlay); }
.c2-tzpick i { position: absolute; left: 0; top: 0; width: 34px; text-align: right;
  font-style: normal; opacity: .72; }
.c2-tzpick span { position: absolute; right: 7px; top: 0; color: var(--text-muted); }
.c2-tzpick.is-empty { justify-content: flex-end; opacity: 0; }
.c2-week-head:hover .c2-tzpick.is-empty { opacity: 1; }

.c2-edit-note { font-size: var(--fs-xs); color: var(--text-muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; line-height: 1.5; }
.c2-edit-note b { color: var(--text); font-weight: 600; }

.c2-scope { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.c2-scope label { display: flex; gap: 9px; align-items: flex-start; padding: 6px 7px;
  border-radius: var(--radius-sm); cursor: pointer; }
.c2-scope label:hover { background: var(--hover-overlay); }
.c2-scope input { margin: 3px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.c2-scope span { display: flex; flex-direction: column; font-size: var(--fs-sm); color: var(--text); }
.c2-scope em { font-style: normal; font-size: var(--fs-xs); color: var(--text-subtle); }

.c2-cxmenu { position: fixed; z-index: 82; width: 250px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .62); overflow: hidden; padding-bottom: 4px; }
.c2-cxmenu .lab { font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-subtle); padding: 9px 11px 4px; }
.c2-cxmenu .rows { max-height: 232px; overflow-y: auto; }
.c2-cx-row { display: flex; width: 100%; align-items: center; gap: 9px; background: transparent;
  border: 0; font: inherit; font-size: var(--fs-sm); color: var(--text); text-align: left;
  padding: 7px 11px; cursor: pointer; }
.c2-cx-row:hover:not([disabled]) { background: var(--hover-overlay); }
.c2-cx-row[disabled] { opacity: .45; cursor: default; }
.c2-cx-row i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.c2-cx-row span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c2-cx-row em { font-style: normal; color: var(--text-muted); flex: 0 0 auto; }
.c2-cx-row.is-on { background: var(--hover-overlay); }
/* ⚠️ Structure, not hue — the destructive row gets its own ground and a rule
   above it, because a red row that is only red is invisible to Clayton. */
.c2-cx-sep { height: 1px; background: var(--border); margin: 5px 0; }
.c2-cx-row.is-bad { color: var(--danger); background: rgba(240, 96, 90, .05); }
.c2-cx-why { padding: 6px 11px 8px; font-size: var(--fs-xs); color: var(--text-subtle); line-height: 1.45; }

.c2-tzmenu { position: fixed; z-index: 80; width: 268px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .62); overflow: hidden; }
.c2-tzmenu input { width: 100%; border: 0; border-bottom: 1px solid var(--border);
  background: var(--bg); color: var(--text); font: inherit; font-size: var(--fs-sm); padding: 9px 11px; }
.c2-tzmenu input:focus { outline: none; }
.c2-tzmenu .lab { font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-subtle); padding: 8px 11px 4px; }
.c2-tzmenu .rows { max-height: 264px; overflow-y: auto; }
.c2-tzrow { display: flex; width: 100%; justify-content: space-between; gap: 10px; align-items: baseline;
  background: transparent; border: 0; font: inherit; color: inherit; text-align: left;
  padding: 7px 11px; cursor: pointer; font-size: var(--fs-sm); }
.c2-tzrow:hover, .c2-tzrow.is-on { background: var(--hover-overlay); }
.c2-tzrow em { font-style: normal; color: var(--text-subtle); font-size: var(--fs-xs);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.c2-tzrow.is-off { color: var(--text-muted); border-top: 1px solid var(--border); }
.c2-tzmenu .none { padding: 12px; color: var(--text-subtle); font-size: var(--fs-xs); }
.c2-hr span { position: absolute; top: -7px; right: 7px; font-size: 11px; color: var(--text-subtle); }
/* An hour outside the working day. The class comes from grid.js, which knows
   the hour number — NOT an nth-child index, which silently mis-targets the
   moment the hour count or the label markup changes. */
.c2-hr.is-off span { color: var(--text-dim); }
.c2-grid { flex: 1; min-width: 0; display: flex; position: relative;
  height: calc(var(--hours, 24) * var(--hh, 52px)); min-height: 100%; }
/* .c2-col needs no height of its own: an explicit height on .c2-grid makes its
   stretched children match it, and .c2-lines follows via inset:0. */
.c2-col { flex: 1 1 0; min-width: 0; border-left: 1px solid var(--border-light); position: relative; }

/* ── The hours outside the working day ───────────────────────────────
   A quieter GROUND, not a dimming: nothing is hidden and every hour stays
   addressable, but 3am stops reading as significant as 3pm on a 24-row grid.
   Tone, never hue — this has to work for a colorblind reader, and the hour
   labels step down with it so the boundary is legible twice.

   ⚠️ THE EVENING BAND IS ANCHORED TO `bottom: 0`, NOT TO A HEIGHT. `.c2-grid`
   carries `min-height: 100%` (see above), so on a pane taller than
   24 × 52 = 1248px the column STRETCHES past midnight. A band with a fixed
   3-hour height would detach and leave an unbanded strip at the bottom that
   reads as a rendering fault. Stretching to the bottom also correctly quiets
   the dead space below midnight.

   ⚠️ These STACK with `.c2-col.is-off`, which means an EMPTY DAY (derived from
   the data), not a configured day off. An empty day's small hours therefore
   take two steps. That is intended and was approved on the mockup; what it
   costs is that a Day-off column's working hours land on the same value as a
   normal column's small hours. The column header spells out "Day off", which
   is what disambiguates them. */
.c2-col::before, .c2-col::after {
  content: ''; position: absolute; left: 0; right: 0;
  background: var(--c2-quiet); pointer-events: none;
}
.c2-col::before { top: 0; height: calc(var(--work-start, 7) * var(--hh, 52px)); }
.c2-col::after { top: calc(var(--work-end, 21) * var(--hh, 52px)); bottom: 0; }
.c2-col:first-child { border-left: 0; }
.c2-col.is-today { background: var(--surface); }
/* A no-client day must be visibly a DIFFERENT KIND of day, not a 1.02:1
   whisper. Hatching + a real ground step, so it reads without colour. */
.c2-col.is-off { background: var(--c2-quiet); }
.c2-col.is-off .c2-lines { opacity: .45; }
.c2-col-h.is-quiet { background: rgba(255, 255, 255, .022); }
/* ⚠️ BOUNDED TO THE REAL HOURS, NOT `inset: 0`. This is a REPEATING GRADIENT,
   so it draws a rule every --hh for as long as the box lasts — and the box is
   `.c2-col`, which `min-height: 100%` on `.c2-grid` stretches to the pane
   whenever 24 rows come up short of it. Measured at the old flat 52px on a
   1451px pane: 203px of grid below 11pm carrying about four hour rules for
   hours that do not exist. An explicit height ends the gradient at midnight and
   leaves the ground behind it alone. Keep it: the stretch makes short grids
   rare, not impossible — the ceiling means a pane taller than 24 × 116px comes
   up short again. */
.c2-lines { position: absolute; inset: 0 0 auto; pointer-events: none;
  height: calc(var(--hours, 24) * var(--hh, 52px));
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--hh, 52px) - 1px),
    var(--border-light) calc(var(--hh, 52px) - 1px) var(--hh, 52px)); }

/* ⚠️ HORIZONTAL GEOMETRY COMES FROM CUSTOM PROPERTIES, NOT FROM THE STYLE
   ATTRIBUTE. grid.js emits --l/--w/--z. An element-attached declaration
   outranks EVERY author rule regardless of specificity, so while left/width
   lived in the attribute no `:hover` rule could ever widen a block — not even
   with a longer selector. `top`/`height` stay in the attribute because nothing
   overrides them. Same pattern as --hh on .c2-week. */
.c2-ev { position: absolute; border-radius: var(--radius-sm); padding: 4px 6px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; text-align: left;
  font: inherit; color: inherit;
  left: calc(var(--l, 0%) + 3px); width: calc(var(--w, 100%) - 6px); z-index: var(--z, 1);
  transition: left 120ms ease, width 120ms ease; }
.c2-ev:hover { border-color: var(--text-subtle); }

/* ── Category legend and the week's hours ────────────────────────────
   Sits under the grid: a swatch, a NAME, and the hours that went to it. The
   name and the number are what carry the meaning, which is what lets the coach
   have more categories than there are separable colours. Tapping one hides it. */
.c2-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  padding: 8px 12px; border-top: 1px solid var(--border); background: var(--surface);
  flex: 0 0 auto; }
.c2-cats .lbl { font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-subtle); margin-right: 6px; display: inline-flex; align-items: center; gap: 8px; }
.c2-cat-off { text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--amber-text); }
.c2-cat { display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px;
  border: 1px solid var(--border); border-radius: 100px; background: var(--surface-2);
  font: inherit; font-size: var(--fs-xs); color: var(--text); cursor: pointer; }
.c2-cat:hover { border-color: var(--text-subtle); }
.c2-cat .sw { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.c2-cat .h { color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.c2-cat .h i { font-style: normal; }
/* Switched off. ⚠️ Carried by opacity, a line through the NAME and aria-pressed
   — never by the swatch alone, which is the one thing he may not be able to
   tell from its neighbour. */
.c2-cat.is-off { opacity: .55; }
.c2-cat.is-off .n { text-decoration: line-through; }
.c2-cat.is-off .sw { background: transparent !important; box-shadow: inset 0 0 0 1px var(--text-subtle); }

/* The category manager. Body-mounted, so it uses the dashboard's own modal
   chrome and its own palette — calendar tokens do not reach out here. */
.c2-cat.is-edit { border-style: dashed; color: var(--text-muted); }
.c2-cat-note { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; line-height: 1.5; }
.c2-cat-h { font-size: 14px; font-weight: 600; margin: 22px 0 6px; }
.c2-cat-fixed { font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-subtle); white-space: nowrap; padding: 0 4px; cursor: default; }
.c2-cat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.c2-cat-row input[type="color"] { width: 34px; height: 34px; padding: 2px; flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; }
.c2-cat-row input[type="text"] { flex: 1; min-width: 0; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; font-size: 14px; }
.c2-cat-del { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--text-subtle);
  font-size: 18px; line-height: 1; cursor: pointer; }
.c2-cat-del:hover { border-color: var(--border); color: var(--text); }
.c2-cat-map { display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--border); font-size: 14px; }
.c2-cat-map > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c2-cat-map select { flex: 0 0 auto; max-width: 190px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; font: inherit; font-size: 13px; }
/* ⚠️ A heads-up, never a veto — the coach asked for as many colours as he wants. */
.c2-cat-warn { flex: 1; font-size: 12.5px; color: #f8bd5f; line-height: 1.4; text-align: left; }

/* Event or client session. A segmented pair rather than a dropdown: it is a
   two-way choice the coach makes on every booking, and a dropdown hides one
   half of it behind a click. */
.c2-mode { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; }
.c2-mode button { flex: 1; padding: 8px 10px; border: 0; background: transparent;
  color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.c2-mode button + button { border-left: 1px solid var(--border); }
.c2-mode button[aria-pressed="true"] { background: var(--primary, #2557d6); color: #fff; font-weight: 600; }
/* The confirmation the server asked for, with what it is warning about. */
.c2-create-err div { margin-bottom: 4px; }
.c2-create-err .btn-secondary { font-size: 13px; padding: 5px 12px; }

/* ── A block being moved ─────────────────────────────────────────────
   ⚠️ pointer-events:none IS LOAD-BEARING TWICE. It stops `.c2-ev:hover` from
   matching — that rule sets `left` as a literal at higher specificity than the
   base rule reading --l, and during a drag the pointer is always over the
   block, so without this the block pins itself to the left edge. And it lets
   elementFromPoint see the COLUMN underneath, which is how a drag crosses days.
   ⚠️ The transform must not be transitioned. `.c2-ev` transitions left/width
   only, deliberately — adding transform there would make every drag lag the
   pointer by 120ms. */
.c2-ev.is-dragging { pointer-events: none; z-index: 45; opacity: .92;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .5); cursor: grabbing; }
.c2-ev.is-dragging.is-void { border-color: var(--danger); border-style: dashed; }

/* The time the drop would land on, beside the pointer. Neither reference
   implementation showed this and the coach had to release to find out. */
.c2-movetip { position: fixed; z-index: 9000; pointer-events: none;
  background: var(--surface-2, #161c27); color: var(--text, #e8edf5);
  border: 1px solid var(--border, #2a3340); border-radius: 5px;
  padding: 4px 9px; font-size: 12px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .5); }
.c2-movetip.is-void { border-color: #f0605a; color: #f6867f; }


/* ── The block being drawn ───────────────────────────────────────────
   ⚠️ IT LABELS ITSELF WITH THE TIMES IT IS PROPOSING. Both the implementations
   this was mined from drew a bare rectangle, so the coach only learned what
   they had drawn after releasing, from a form — and correcting it meant
   cancelling and drawing again.
   pointer-events:none so the ghost never becomes the hit target for its own
   pointermove, and so the column underneath keeps reporting the geometry. */
.c2-ghost { position: absolute; left: 3px; right: 3px; z-index: 30; pointer-events: none;
  border-radius: var(--radius-sm); background: var(--accent-dim);
  border: 1px solid var(--accent-strong); overflow: hidden; }
.c2-ghost .t { position: absolute; top: 3px; left: 6px; right: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .01em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* An hour that does not exist — spring-forward morning. Refused on release, and
   said in WORDS there rather than left to the colour here. */
.c2-ghost.is-void { border-style: dashed; border-color: var(--danger);
  background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(240, 96, 90, .16) 5px 10px); }

/* The new-event form reuses the dashboard's own .form-group fields, so it
   inherits the CRM's field styling rather than inventing a calendar-scoped
   one. ⚠️ It is body-mounted, OUTSIDE #view-calendar, so calendar tokens do
   not reach it — token-scope.test.mjs catches any c2- id that tries.  */
/* ── The create sheet ─────────────────────────────────────────────────
   ⚠️ AN ICON COLUMN INSTEAD OF NINE LABELS. The old sheet stacked
   "What is it? / Starts / Where / Category / Repeats / Notes" as headings above
   their inputs, which was most of its height and none of its content. The icon
   carries the meaning; the label survives in `aria-label` so nothing is lost to
   a screen reader. Borrowed from Google Calendar's own sheet, which is legible
   at a glance for exactly this reason. */
.c2-sheet-top { display: flex; align-items: flex-start; gap: 10px; padding: 18px 18px 0; }
.c2-title { flex: 1 1 auto; min-width: 0; background: transparent; border: 0;
  border-bottom: 2px solid var(--border); color: var(--text); font: inherit;
  font-size: var(--fs-xl); font-weight: 400; letter-spacing: -.02em; padding: 4px 2px 8px; }
.c2-title::placeholder { color: var(--text-subtle); }
.c2-title:focus { outline: none; border-bottom-color: var(--accent); }

.c2-sheet-tabs { padding: 14px 18px 0; }
.c2-sheet-body { padding: 6px 18px 18px !important; display: block !important; }

/* Each group is a band with a rule under it, so related rows read together. */
.c2-grp { padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.c2-grp:last-of-type { border-bottom: 0; }
/* ⚠️ EVERY ONE OF THESE NEEDS ITS OWN `[hidden]` RULE. Giving an element a
   `display` value overrides the `hidden` attribute's built-in `display: none`,
   so the rows stayed on screen while `.hidden` was perfectly true — the Ends
   block showed under "Does not repeat", and the client picker showed in Event
   mode. Caught on a screenshot; every measurement said `hidden === true`. */
.c2-grp[hidden], .c2-row[hidden], .c2-ends[hidden] { display: none; }

.c2-row { display: flex; align-items: flex-start; gap: 14px; padding: 5px 0; }
.c2-row-i { flex: 0 0 18px; color: var(--text-subtle); margin-top: 7px; }
.c2-row-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

/* ⚠️ CONTROLS SIT ON THE SHEET, NOT IN BOXES. A row of outlined inputs down a
   narrow sheet reads as a form to fill in; these read as a sentence to adjust.
   The outline returns on focus, so it is never unclear what has the caret. */
.c2-plain { background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text); font: inherit; font-size: var(--fs-sm); padding: 7px 8px; width: 100%; }
.c2-plain::placeholder { color: var(--text-subtle); }
.c2-plain:hover { background: var(--hover-overlay); }
.c2-plain:focus { outline: none; border-color: var(--accent); background: var(--bg); }
textarea.c2-plain { resize: vertical; min-height: 62px; line-height: 1.5; }

.c2-when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 1px; }
.c2-day { font-size: var(--fs-sm); color: var(--text); padding: 7px 2px; }
.c2-when input[type="time"] { background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: var(--fs-sm);
  padding: 6px 7px; }
.c2-when input[type="time"]:hover { background: var(--hover-overlay); }
.c2-when input[type="time"]:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.c2-dash { color: var(--text-subtle); }

/* Ends: three radio rows, each carrying its own field. */
.c2-ends { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 2px 2px; }
.c2-ends-lab { font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-subtle); margin-bottom: 3px; }
.c2-ends label { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm);
  padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; }
.c2-ends label:hover { background: var(--hover-overlay); }
.c2-ends input[type="radio"] { accent-color: var(--accent); margin: 0; flex: 0 0 auto; }
.c2-ends label > span { flex: 0 0 58px; }
.c2-ends input[type="date"], .c2-ends input[type="number"] { background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text);
  font: inherit; font-size: var(--fs-xs); padding: 4px 7px; }
.c2-ends input[type="number"] { width: 68px; }
.c2-ends em { font-style: normal; color: var(--text-subtle); font-size: var(--fs-xs); }
/* ⚠️ Disabled, not hidden — the row stays put so the three options do not jump
   around as you pick between them. */
.c2-ends input:disabled { opacity: .4; }

/* ── The notes editor ─────────────────────────────────────────────────
   ⚠️ SPACING IS PART OF THE FEATURE. A list whose items sit as far apart as its
   paragraphs is unreadable as a list; these are tight between items and loose
   between blocks, which is the difference between a checklist you can scan and
   a wall of ticks. */
.c2-rt { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.c2-rt-bar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.c2-rt-b { min-width: 26px; height: 26px; padding: 0 6px; background: transparent; border: 0;
  border-radius: var(--radius-sm); color: var(--text-muted); font: inherit; font-size: var(--fs-xs);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.c2-rt-b:hover:not([disabled]) { background: var(--hover-overlay); color: var(--text); }
.c2-rt-b[disabled] { opacity: .4; cursor: default; }
.c2-rt-sep { width: 1px; height: 16px; background: var(--border); margin: 0 5px; }

.c2-rt-body { min-height: 82px; max-height: 260px; overflow-y: auto; line-height: 1.55;
  font-size: var(--fs-sm); }
.c2-rt-body:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.c2-rt-body.is-empty::before { content: attr(data-ph); color: var(--text-subtle); pointer-events: none; }
.c2-rt-body p { margin: 0 0 10px; }
.c2-rt-body p:last-child { margin-bottom: 0; }
.c2-rt-body ul, .c2-rt-body ol { margin: 6px 0 10px; padding-left: 22px; }
.c2-rt-body li { margin: 0 0 3px; }
.c2-rt-body li:last-child { margin-bottom: 0; }
.c2-rt-body a { color: var(--accent-strong); }

/* ── Checklist items inside the editor ────────────────────────────────
   ⚠️ THE BOX IS DRAWN, NOT TYPED. It used to be a literal ☐ in the text, and
   every bug came from that: deleting it left a bare bullet, pressing the button
   twice stranded it on its own line, and it rendered as "• ☐ thing" — a bullet
   AND a box. As a marker it is not in the DOM, so it cannot be deleted, typed
   into, or left behind. The ☐ still goes to storage; see `fromEditorHtml`. */
.c2-rt-body ul.has-ck { padding-left: 4px; }
.c2-rt-body li.is-ck { list-style: none; position: relative; padding-left: 26px;
  margin-bottom: 6px; }
.c2-rt-body li.is-ck::before { content: ''; position: absolute; left: 0; top: 2px;
  width: 15px; height: 15px; border: 1.5px solid var(--accent-strong);
  border-radius: 3px; cursor: pointer; }
/* ⚠️ A TICK AND A STRIKE, not a colour change — a done item that only changes
   hue does not change for a colourblind reader. */
.c2-rt-body li.is-done::before { background: var(--accent-strong); }
.c2-rt-body li.is-done::after { content: ''; position: absolute; left: 4.5px; top: 5px;
  width: 6px; height: 3px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg); }
.c2-rt-body li.is-done { color: var(--text-subtle); text-decoration: line-through; }
/* ⚠️ Struck AND dimmed — a done item that only changes colour does not change
   for a colourblind reader. */
.c2-rt-body li.is-done { color: var(--text-subtle); text-decoration: line-through; }
.c2-rt-body u { text-underline-offset: 2px; }

/* Same rhythm wherever notes are READ, or the peek would look nothing like
   what was typed. */
.c2-peek-detail .body ul, .c2-peek-detail .body ol { margin: 5px 0 9px; padding-left: 20px; }
.c2-peek-detail .body li { margin: 0 0 3px; }
.c2-peek-detail .body p { margin: 0 0 9px; }

/* ── Sub-dialogs (which occurrences / custom repeat) ─────────────────
   ⚠️ ABOVE THE SHEET THAT OPENED THEM. `.modal-overlay` is z-index 100 and
   these are asked FROM one, so without their own layer they would render
   behind the form and read as a frozen page. */
.c2-scope-overlay { z-index: 120; }
.c2-cr-every { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); }
.c2-cr-every input { width: 66px; }
.c2-cr-every input, .c2-cr-every select { background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: var(--fs-sm); padding: 6px 8px; }
.c2-cr-lab { font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-subtle); margin-bottom: 7px; }
.c2-cr-dow { display: flex; gap: 6px; }
.c2-cr-dow button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.c2-cr-dow button:hover { border-color: var(--text-subtle); color: var(--text); }
/* ⚠️ Selected days carry a FILL and a border change, not a hue swap — a circle
   that only changes colour is a circle Clayton cannot read. */
.c2-cr-dow button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 600; }

.c2-static { color: var(--text-muted); }
.c2-create-err { font-size: var(--fs-sm); color: var(--danger-text, #f6867f);
  border: 1px solid rgba(240, 96, 90, .4); background: rgba(240, 96, 90, .1);
  border-radius: var(--radius-sm); padding: 8px 10px; }

/* ── Point at a block and read it ────────────────────────────────────
   Overlapping blocks split the column evenly, which at 108–166px cannot carry
   the longest status word ("Late cancel", 88px measured — two readable lanes
   would need a 210px column). So hovering a block gives it the whole column
   for as long as the pointer is on it, and covers whatever it overlaps.

   Coach's call, made with the trade-off measured in front of him: while a
   block is open the one underneath cannot be clicked, because the open block
   covers it. That is the point — it is momentary, it reverts the instant the
   pointer leaves, and both are equals again.

   ⚠️ NO `:has()` AND NO CLUSTER SCOPING. This does not need to know about
   neighbours: a block that is already full width expands to exactly the width
   it already has, so the rule is a no-op everywhere except a real overlap.
   :focus-visible carries the same affordance to the keyboard. */
.c2-ev:hover, .c2-ev:focus-visible { left: 3px; width: calc(100% - 6px); z-index: 40; }
@media (prefers-reduced-motion: reduce) { .c2-ev { transition: none; } }
.c2-ev .et { font-size: 10px; line-height: 1.25; display: flex;
  align-items: baseline; gap: 5px; }
.c2-ev .en { font-size: var(--fs-xs); font-weight: 500; line-height: 1.3; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* ⚠️ THE CATEGORY HUE IS A WASH, and the text on top never changes colour, so
   contrast is constant whatever the coach picks. Colour groups here; it never
   carries a state — the status WORD does that, and it is unaffected. */
/* ⚠️ TEXT COLOUR COMES FROM THE FILL, NOT FROM THE THEME. Blocks are painted at
   full strength now, so a fixed light text colour dies the moment a coach picks
   an amber or a mint. `--cat-fg` is chosen per block by relative luminance in
   categories.js — see `textOn`. The lead line is the same colour held back,
   never a different one, so it stays readable on every fill. */
.c2-ev { background: var(--cat-bg, var(--surface-2)); border-color: var(--cat-bd, var(--border));
  color: var(--cat-fg, var(--text)); }
.c2-ev .et, .c2-ev .en { color: var(--cat-fg, var(--text)); }
.c2-ev .et { opacity: .82; }
.c2-ev.is-session { background: var(--cat-bg, var(--accent-dim)); border-color: var(--cat-bd, rgba(90, 134, 245, .38)); }
.c2-ev.is-personal { background: var(--cat-bg, var(--surface)); border-style: dashed;
  border-color: var(--cat-bd, var(--border)); }
.c2-ev.is-personal .en { font-weight: 400; }
.c2-ev.is-ghost { background: transparent; border-style: dashed; border-color: var(--border); }
.c2-ev.is-ghost .en { color: var(--text-subtle); font-weight: 400; }
/* ⚠️ WHEN THE COLUMN IS TIGHT THE TIME GIVES WAY, NEVER THE WORD — the word
   is the only thing carrying the state to a colorblind reader, and it sits at
   the 12px caps floor, not below it. No separator glyph: a squeezed column
   would leave a dangling "·" behind.
   ⚠️ THE ORDER BELOW IS WHAT DELIVERS THAT, AND IT USED TO DO THE OPPOSITE.
   `.wd` is `flex: 0 0 auto` so it never shrinks and `.tm` is `flex: 0 1 auto`
   so it does — but grid.js emitted the TIME first, so the word was the thing
   pushed out of a narrow block. grid.js now emits `.wd` first. If the span
   order is ever swapped back, these rules quietly start protecting the wrong
   half of the line. */
.c2-ev .et .tm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* ⚠️ A BLOCK TOO SHORT FOR TWO LINES PUTS THE NAME ON THE ONE IT HAS. It reads
   at the name's weight and size, not the time's — this line IS the block's
   title now, and rendering it at the 10px/.82-opacity of a timestamp would
   trade a clipped name for an unreadable one. */
.c2-ev .et--tight { opacity: 1; }
/* The full name of a block too small to show it. Positioned in JS; everything
   visual lives here. `pointer-events:none` so it can never sit between the
   pointer and the block it describes — which would make the block unclickable
   the moment the tooltip appeared over it. */
.c2-nametip { position: fixed; z-index: 60; max-width: 280px;
  padding: 6px 9px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-size: var(--fs-xs); line-height: 1.35;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  pointer-events: none; white-space: normal; overflow-wrap: anywhere; }
.c2-nametip[hidden] { display: none; }
.c2-ev .et--tight .nm { flex: 0 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 500; }
.c2-ev .et .wd { flex: 0 0 auto; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  font-size: var(--fs-xs); }
/* ⚠️ THE WORD IS THE SIGNAL, NOT ITS COLOUR — which is the rule for a
   colourblind reader anyway. Tinting DONE green and NO-SHOW amber worked on a
   near-black block and cannot work on a saturated one; the words differ from
   each other by being different words. */
.c2-ev .et .wd.w-done,
.c2-ev .et .wd.w-noshow,
.c2-ev .et .wd.w-booked { color: var(--cat-fg, var(--text)); }
.c2-ev .et .wd.w-held, .c2-ev .et .wd.w-busy,
.c2-ev .et .wd.w-hidden, .c2-ev .et .wd.w-shared { color: var(--text-subtle); }
/* The tail of a block that started yesterday and ran past midnight. Square top
   corners are the convention Google and Outlook both use for "this carries on
   from above"; the lead line still names the real start time, so the join reads
   without depending on the corner alone. */
.c2-ev.is-continued { border-top-left-radius: 0; border-top-right-radius: 0; border-top-style: dashed; }
/* Elapsed, not completed.
   ⚠️ NO OPACITY HERE. It used to be .55, which dimmed the TEXT along with the
   fill and made most of a normal week unreadable — and two blocks side by side
   were the worst case, which is the case the coach most needs to read. The word
   in the lead line (DONE / NO-SHOW / BOOKED) already says what happened; that is
   the signal, and it stays at full strength. */
.c2-ev.is-past { opacity: 1; }
.c2-ev.is-buffer { border: 0; cursor: default;
  background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(255, 255, 255, .05) 4px 8px); }
.c2-nowline { position: absolute; left: 0; right: 0; height: 1px; background: var(--danger); z-index: 5;
  pointer-events: none; }
.c2-nowline::before { content: ''; position: absolute; left: -3px; top: -2.5px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--danger); }

/* ── Month view — same data, same vocabulary, no new interactions ── */
.c2-month { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.c2-month-head { display: flex; flex: 0 0 auto; border-bottom: 1px solid var(--border); background: var(--surface); }
.c2-month-head div { flex: 1 1 0; padding: 8px 10px; font-size: var(--fs-xs); color: var(--text-subtle);
  letter-spacing: .07em; text-transform: uppercase; }
.c2-month-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(7, 1fr); }
.c2-mday { min-height: 96px; border-left: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
  padding: 6px 7px; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.c2-mday:nth-child(7n + 1) { border-left: 0; }
.c2-mday:hover { background: var(--hover-overlay); }
.c2-mday .dn { font-size: var(--fs-sm); color: var(--text-muted); }
.c2-mday.is-today { background: var(--surface-2); box-shadow: inset 0 3px 0 var(--accent-strong); }
.c2-mday.is-today .dn { font-weight: 700; color: var(--text); }
.c2-mday.is-outside .dn { opacity: .4; }
.c2-mday.is-off { background: rgba(255, 255, 255, .028); }
.c2-mday .mev { margin-top: 3px; font-size: 11px; color: var(--text-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.c2-mday .mev .wd { font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .03em; }
.c2-mday .mev .wd.w-done { color: var(--green-text); }
.c2-mday .mev .wd.w-noshow { color: var(--amber-text); }
.c2-mday .mev .wd.w-booked { color: var(--accent-strong); }
.c2-mday .moff { margin-top: 3px; font-size: 11px; color: var(--text-subtle); }

/* ── The peek — where most decisions live ─────────────────────────
   Anchored to what you clicked, flipped to whichever side has room. */
.c2-peek { position: fixed; z-index: 75; width: 330px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .62); overflow: hidden; }
.c2-peek-h { padding: 2px 15px 12px; border-bottom: 1px solid var(--border); }
.c2-peek-h .who { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.c2-peek-h .who b { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.02em; }
.c2-peek-h .when { margin-top: 3px; font-size: var(--fs-sm); color: var(--text-muted); }
.c2-peek-h .facts { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  font-size: var(--fs-xs); color: var(--text-subtle); }
.c2-peek-h .facts i { font-style: normal; }
.c2-peek-do { padding: 5px 0; }
.c2-peek-do button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 15px;
  background: transparent; border: 0; color: var(--text); font: inherit; font-size: var(--fs-sm);
  cursor: pointer; text-align: left; }
.c2-peek-do button:hover { background: var(--hover-overlay); }
.c2-peek-do button .k { margin-left: auto; font-size: 11px; color: var(--text-subtle); }
.c2-peek-do button[disabled] { color: var(--text-subtle); cursor: default; }
.c2-peek-do button[disabled]:hover { background: transparent; }
.c2-peek-do button[disabled] .k { opacity: .5; }
/* ⚠️ THE ROW YOU CANNOT TAKE BACK IS SEPARATED BY STRUCTURE — its own group,
   a rule above it, its own ground — so it never depends on a hue Clayton
   cannot see. It also NAMES THE CLIENT, so a misclick reads wrong before it
   lands. Never separate this by colour alone. */
.c2-peek-undo { margin-top: 5px; border-top: 1px solid var(--border); background: rgba(240, 96, 90, .05); }
.c2-peek-undo button { color: var(--red-text); }
.c2-peek-undo button:hover { background: rgba(240, 96, 90, .12); }
.c2-peek-foot { padding: 10px 15px; border-top: 1px solid var(--border); background: var(--surface-2);
  font-size: var(--fs-xs); color: var(--text-subtle); line-height: 1.5; }
.c2-peek-ro { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 6px;
  padding-top: 6px; border-top: 1px dashed var(--border); }
.c2-peek-busy .seg button[disabled] { opacity: .45; cursor: default; }
.c2-peek-busy .seg button[disabled]:hover { background: transparent; color: var(--text-muted); }
.c2-peek-h .where { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 3px;
  overflow-wrap: anywhere; }

/* Join sits on its own, full width, because it is the one thing the coach opens
   the peek for while a call is starting. */
.c2-peek-join { padding: 10px 12px 0; }
.c2-join { display: block; text-align: center; background: var(--accent); color: #fff;
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: var(--fs-sm); font-weight: 500;
  text-decoration: none; }
.c2-join:hover { background: var(--primary-hover); }
/* "Open in Google Calendar" — a way OUT of an event the coach cannot change,
   not an action on it. Quieter than the Join button on purpose: a solid accent
   button here would read as the primary thing to do with the block, when the
   primary thing is usually to leave it alone. */
.c2-join--ghost { background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); }
.c2-join--ghost:hover { background: var(--surface-hover); color: var(--text);
  border-color: var(--text-subtle); }

/* ⚠️ SCROLLS RATHER THAN GROWS. A booking form's answers can run to 1500
   characters; letting that set the peek's height pushes the controls off the
   bottom of the window. */
/* ⚠️ NO RULE ON THE FIRST ONE. The header already draws a bottom border, so a
   detail block directly under it added a SECOND line 10px below the first —
   two hairlines with a strip of nothing between them. The rule only belongs
   BETWEEN blocks. */
.c2-peek-detail { padding: 12px; }
.c2-peek-detail + .c2-peek-detail,
.c2-peek-join + .c2-peek-detail { border-top: 1px solid var(--border); margin-top: 4px; }
.c2-peek-detail .lab { font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-subtle); margin-bottom: 5px; }
.c2-peek-detail .body { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 190px; overflow-y: auto; }
.c2-peek-detail .body a { color: var(--accent-strong); }

.c2-ck-count { float: right; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.c2-ck { display: flex; flex-direction: column; gap: 2px; max-height: 190px; overflow-y: auto; }
.c2-ck-row { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-xs);
  color: var(--text); padding: 4px 2px; cursor: pointer; border-radius: var(--radius-sm); }
.c2-ck-row:hover { background: var(--hover-overlay); }
.c2-ck-row input { margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--accent); }
/* ⚠️ Struck AND dimmed. Clayton is colorblind; a tick box that only changes
   colour is a tick box that does not change. */
.c2-ck-row.is-done span { text-decoration: line-through; color: var(--text-subtle); }

.c2-peek-tools { display: flex; justify-content: flex-end; gap: 2px; padding: 8px 8px 0; }
.c2-peek-tools button { width: 30px; height: 30px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--text-muted);
  cursor: pointer; }
.c2-peek-tools button:hover { background: var(--hover-overlay); color: var(--text); }
/* ⚠️ The destructive one earns a hue only on hover — it sits in a row of quiet
   icons, and a permanently red bin in a toolbar is noise until it is a warning. */
.c2-peek-tools button[data-c2-act="delete"]:hover { color: var(--danger); background: rgba(240, 96, 90, .1); }

/* ── Does this hour block bookings? ──────────────────────────────────
   ⚠️ ONE QUESTION, TWO ANSWERS. This replaced a Busy / Hidden / Shared control
   described as "what clients see" — a choice that never existed (no client sees
   a coach's events) and whose buttons were wired to nothing. Google's free/busy
   lookup, which Booked™ reads, is the real mechanism. */
.c2-peek-busy { padding: 11px 12px; border-top: 1px solid var(--border); background: var(--surface-2); }
.c2-peek-busy .seg { display: flex; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden; }
.c2-peek-busy .seg button { flex: 1 1 0; padding: 7px 8px; background: transparent; border: 0;
  color: var(--text-muted); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.c2-peek-busy .seg button:hover { background: var(--hover-overlay); color: var(--text); }
.c2-peek-busy .seg button[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 500; }
.c2-peek-busy .hint { font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 7px; }

/* A free hour is called out in the rail; a busy one needs no label. */
.c2-w--free { background: var(--surface-2); color: var(--text-muted); }
/* Whether the hour blocks booking is a SEPARATE question from what clients
   see — folded in here so you cannot end up with a Busy block that books over. */
.c2-switch { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-xs);
  color: var(--text-muted); cursor: pointer; }
.c2-switch input { accent-color: var(--accent-strong); width: 13px; height: 13px; }

/* ── The cancel sheet ─────────────────────────────────────────────
   Three answers because the backend has exactly three outcomes. Each states
   its money consequence on its own line, so the choice is never a guess. */
.c2-sheet-wrap { position: fixed; inset: 0; z-index: 76; background: rgba(3, 5, 9, .62);
  display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.c2-cancel { width: 460px; max-width: 92vw; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .7); overflow: hidden; height: max-content; }
.c2-cancel-h { padding: 16px 18px 14px; border-bottom: 1px solid var(--border); }
.c2-cancel-h h4 { margin: 0; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.02em; }
.c2-cancel-h p { margin: 5px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.c2-cancel-opts { display: flex; flex-direction: column; padding: 6px 0; }
.c2-cancel-opts button { display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  width: 100%; padding: 11px 18px; background: transparent; border: 0; font: inherit; text-align: left;
  cursor: pointer; color: inherit; }
.c2-cancel-opts button:hover { background: var(--hover-overlay); }
.c2-cancel-opts b { font-size: var(--fs-sm); font-weight: 600; }
.c2-cancel-opts span { font-size: var(--fs-xs); color: var(--text-subtle); line-height: 1.45; }
.c2-cancel-opts em { font-style: normal; color: var(--amber-text); font-weight: 600; }
/* The outcome that COSTS her the credit is amber + says so in words. */
.c2-cancel-opts .is-loss b { color: var(--amber-text); }
.c2-cancel-f { padding: 11px 18px; border-top: 1px solid var(--border); background: var(--surface-2);
  font-size: var(--fs-xs); color: var(--text-subtle); line-height: 1.5; }

/* ── Scribe follow-along transcript ──────────────────────────────────
   One sentence highlighted at a time as it is spoken (never one word — see
   packages/transcript-shared for the evidence). Spoken lines DIM rather than
   disappear, so a coach can scroll back and re-read; hiding them would make
   the transcript unusable as a record. */
.meeting-cue {
  margin: 0 0 2px; padding: 4px 8px; border-radius: var(--radius-sm);
  color: var(--text-muted); line-height: 1.55; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.meeting-cue:hover { background: var(--hover-overlay); }
.meeting-cue.is-past { opacity: .72; }
/* Sapphire wash + full-strength text: the CRM's accent, not a new colour, and
   the shift is in TONE as well as hue so it reads for a colourblind coach. */
.meeting-cue.is-active { background: rgba(37, 87, 214, .16); color: var(--text); }
.meeting-cue-spk { font-weight: 700; color: var(--text-muted); }
#meeting-transcript-follow { max-height: 320px; overflow-y: auto; }