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

/* ⚠️ ROOT-RELATIVE ON PURPOSE. styles.css is served from
   /v/<BUILD>/styles.css, so a bare relative "fonts/…" reference would resolve
   to /v/<BUILD>/fonts/… — a brand new cache key on every deploy. netlify.toml's
   /fonts/* immutable block was written so "a font file only changes on a
   deliberate font swap, not a routine deploy", and it never matched a single
   request. A leading slash is the whole fix; do NOT add a /v/<BUILD>/fonts/* header
   rule instead, which keeps the per-deploy key.

   ⚠️ ONE src PER FACE. Each of these used to name the same file twice, as
   'truetype-variations' and again as 'truetype'.

   ⚠️ "NOTHING AT BOOT RENDERS IN THESE" IS NOW ONLY TRUE OF INTER'S ITALIC
   FACE. Inter's normal weight and the headline face are still named inside
   #program-editor-overlay, but BC1 (below, and the h1/h2/h3 rules further
   down this file) also put the headline face on the base heading rules — every
   view header and card header renders in it, so it now downloads on boot,
   same as the program editor. SA2 (2026-09-29): the headline face is Saira
   Extra Bold again; the condensed face tried on 9/10 was retired the same
   way the one before it was. That is a deliberate, approved trade: kept
   cheap by staying subset (~37 KB, one variable-weight file) with font-display: swap and
   ascent/descent/line-gap overrides matched to the fallback stack below, so
   there is no render block and no layout shift while it loads — but it is a
   real font on the boot path again, not zero like Task 4 measured. A
   declared face is not fetched until something renders in it — so still do
   not add a preload for any of these. */
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/Inter-latin.woff2') format('woff2');
  /* Measured with fontTools ttx from the subset file itself (unitsPerEm 2048). */
  ascent-override: 96.875%; descent-override: 24.1211%; line-gap-override: 0%;
}
@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');
}
@font-face {
  font-family: 'Saira';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/Saira-latin.woff2') format('woff2');
  /* Measured with fontTools ttx from the subset file itself (unitsPerEm 1000). */
  ascent-override: 113.5%; descent-override: 43.9%; line-gap-override: 0%;
}

:root {
  --bg:            #0E1014;
  --surface:       #171B20;
  --surface-2:     #1D2228;
  --surface-hover: #22282F;
  --border:        rgba(255, 255, 255, 0.07);
  --border-light:  rgba(255, 255, 255, 0.05);

  --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:          #E3E8EE;
  --text-primary:  #E3E8EE;
  --text-muted:    #A4AFBE;
  --text-secondary:#A4AFBE;
  --text-subtle:   #6F7C8D;

  --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:     236px;
  /* The sidebar used to paint var(--surface), so it could never differ from a
     card. It is a persistent navigation surface and gets its own ground. */
  --sidebar-bg:    #13171C;
  /* Darker than any surface on purpose: the recessed groove behind a
     progress or scrub bar has to read as cut INTO the panel. */
  --groove:        #0C0E10;
  /* Midnight Navy — secondary branded surfaces (avatars, contextual panels).
     Never the page ground; the neutrals above are the ground. */
  --navy:          #182534;
  --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;

  --sidebar-bg:     #f8f8fa;
  --groove:         #e4e8ef;
  --navy:           #e8edf5;

  --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 ── */
/* h3 split out from the shared reset below (BC1) so its own headline
   treatment doesn't leak onto h4/h5/h6, which stay exactly as they were. */
h1, h2, h4, h5, h6 { font-weight: 600; letter-spacing: -0.02em; }
h3 {
  font-family: 'Saira', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.prog-stat-value, .prog-vol-value { font-weight: 600; letter-spacing: -0.03em; }
.view-header h1 { font-weight: 800; letter-spacing: 0.01em; }
.card-header h2 { font-weight: 800; letter-spacing: 0.02em; }
.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(--sidebar-bg);
  /* A floating soft panel (2026-10-12): a gap around it, its own rounded edge.
     ⚠️ NO transform, filter or backdrop-filter here: #notif-panel and the menus
     are position:fixed inside it and would be trapped and clipped. */
  margin: 10px 0 10px 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  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,
.sb-quick,
.sidebar-notif-section,
.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; }
/* Every span in a narrow row is a word to hide, except the Listening icon (it
   used to vanish with them, leaving an empty box). */
.sidebar.collapsed .nav-btn span:not(.atlas-wake-icon)  { display: none; }
.sidebar.collapsed .brand-text    { display: none; }
.sidebar.collapsed .sidebar-brand {
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 12px 0 8px;
}
.sidebar.collapsed .nav-btn        { justify-content: center; padding: 9px 0; position: relative; }
.sidebar.collapsed .nav-btn svg    { width: 22px; height: 22px; opacity: 0.8; }
.sidebar.collapsed .nav-badges     { display: none; }
.sidebar.collapsed .sidebar-footer { padding: 8px 0 12px; }
.sidebar.collapsed .sidebar-footer .nav-btn--footer { padding: 9px 0; }

/* The narrow menu's names come from one floating tooltip, .sb-tip (modules/sidebar.js),
   and the circle on the edge became the panel button beside the logo (2026-10-12). */

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

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px 12px 18px;
  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-footer {
  padding: 8px 10px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

/* 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); }

/* ── The Atlas wake-word indicator (brief W2 item 4) ───────────
   ⚠️ COLOUR IS THE THIRD SIGNAL HERE, NEVER THE FIRST. The owner is
   colourblind, so every state already differs by ICON and by the words beside
   it (modules/jarvis/wake-indicator.js); everything below is decoration on top
   of a control that reads correctly in greyscale. Remove all of it and the
   indicator still says which state it is in.
   ⚠️ AND THE PULSE RESPECTS prefers-reduced-motion. A thing that throbs in the
   corner of a screen all day is the wrong answer for anybody who has asked
   their machine to stop moving. */
/* ⚠️ HIDDEN MEANS HIDDEN (owner, live, 2026-09-17). `.nav-btn` sets
   `display: flex`, and an author display beats the browser's own
   `[hidden] { display: none }` — with the switch off the button showed as an
   empty bordered box above "Status". Three simple selectors, so it outranks
   both `.nav-btn` and `.sidebar-footer .nav-btn--footer` wherever it sits. */
.sidebar-footer .atlas-wake-indicator[hidden] { display: none; }
.atlas-wake-indicator .atlas-wake-icon { display: inline-flex; align-items: center; }
.atlas-wake-indicator[data-state="loading"] { opacity: 0.55; }
.atlas-wake-indicator[data-state="armed"] { color: var(--primary); }
.atlas-wake-indicator[data-state="heard"] {
  color: #f59e0b;
  border-color: #f59e0b;
  animation: atlas-wake-pulse 600ms ease-out 2;
}
.atlas-wake-indicator[data-state="paused"] { opacity: 0.6; }
@keyframes atlas-wake-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-wake-indicator[data-state="heard"] { animation: none; }
}

/* ── 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 .sb-quick,
body.review-mode .sb-new-menu,
body.review-mode .sb-group-title { display: none !important; }


/* ============================================================
   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-family: 'Saira', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text);
}

/* ── The ⌘K search's icon ─────────────────── */
.view-header > div:first-child { flex: 1; }
.gs-icon { color: var(--text-muted); flex-shrink: 0; }

.gs-category {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text); padding: 10px 12px 4px;
}
.gs-result {
  display: flex; align-items: center; gap: 12px; border-radius: 10px;
  padding: 9px 12px; cursor: pointer; transition: background 0.1s;
}
.gs-result:hover, .gs-result.gs-active { background: var(--surface-hover); }
.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); }
/* A page wears its sidebar icon; Ask Atlas wears sapphire (2026-10-12). */
.gs-result-icon--page { border-radius: 10px; background: var(--surface-hover); color: var(--text-muted); }
.gs-result-icon--page svg { width: 16px; height: 16px; }
.gs-result-icon--atlas { border-radius: 10px; background: var(--primary-dim); color: var(--primary); }
[data-theme="dark"] .gs-result-icon--atlas, [data-theme="dark"] .gs-mic:hover { color: var(--accent-strong); }
/* A thin line sets Ask Atlas apart when results sit above it. */
.gs-result--atlas:not(:first-child) { position: relative; margin-top: 9px; }
.gs-result--atlas:not(:first-child)::before {
  content: ''; position: absolute; left: 12px; right: 12px; top: -5px; height: 1px; background: var(--border);
}
.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: 600px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .18); overflow: hidden;
}
[data-theme="dark"] .gs-modal { box-shadow: 0 16px 48px rgba(0,0,0,0.5); }
.gs-modal-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 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: transparent; border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 8px;
}
/* Talk to Atlas: opens Atlas listening (2026-10-12). */
.gs-mic {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); cursor: pointer;
  transition: background .15s, color .15s;
}
.gs-mic:hover { background: var(--primary-dim); color: var(--primary); }
.gs-mic:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.gs-modal-results { max-height: 420px; overflow-y: auto; padding: 6px; }
.gs-modal-results:empty { padding: 0; }
.gs-modal-results:empty::after {
  content: 'Type to search, or to ask Atlas to do something'; display: block;
  padding: 24px; text-align: center; color: var(--text-subtle); font-size: var(--fs-sm);
}

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


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


/* ============================================================
   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-family: 'Saira', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text);
}


/* ============================================================
   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);
}

/* BC2 fix (2026-09-10) — document content keeps its own typography, not
   the headline treatment. The bare h3 rule above (BC1) is a UI headline
   treatment; it must not reach a coach's own agreement/contract text.
   .ag-prosemirror/.ag-block-editor/.ag-void-header's own h1/h2/h3 rules
   above already keep their own font-size/font-weight (more specific than
   the bare rule, so BC1 never actually touched those) — only
   font-family, letter-spacing and text-transform leaked through, because
   none of those rules ever set them. Restores exactly what rendered
   before BC1 (git show 8bbc8641:apps/crm/dashboard/styles.css — the
   commit BC1's own db23cd00 was built on): no family override (inherits
   the body font, same as always), no tracking, no uppercase. Same
   specificity as this file's other per-container heading rules, placed
   after the base rules above so it also wins on source order; no
   !important. */
.ag-prosemirror h1 { font-family: inherit; font-weight: 500; text-transform: none; letter-spacing: -0.02em; font-size: var(--fs-3xl); line-height: 1.3; }
.ag-prosemirror h2 { font-family: inherit; font-weight: 500; text-transform: none; letter-spacing: -0.02em; font-size: var(--fs-xl); line-height: 1.3; }
.ag-prosemirror h3 { font-family: inherit; font-weight: 500; text-transform: none; letter-spacing: normal; font-size: var(--fs-md); line-height: normal; }
.ag-block-editor h1 { font-family: inherit; font-weight: 500; text-transform: none; letter-spacing: normal; font-size: var(--fs-3xl); line-height: normal; }
.ag-block-editor h2 { font-family: inherit; font-weight: 500; text-transform: none; letter-spacing: normal; font-size: var(--fs-xl); line-height: normal; }
.ag-block-editor h3 { font-family: inherit; font-weight: 500; text-transform: none; letter-spacing: normal; font-size: var(--fs-md); line-height: normal; }
.ag-void-header h3 { font-family: inherit; font-weight: 600; text-transform: none; letter-spacing: normal; font-size: 1rem; line-height: normal; }

.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);
}

/* showChoice's danger-toned choice (standing-slot-flow.js's "Add anyway",
   red, beside "Move one of the existing times", blue — product owner's
   explicit call, 2026-08-23: the unpaid choice must not look like the
   routine one). ⚠️ SAME DOUBLING AS `.confirm-ok.confirm-ok--danger` ABOVE,
   same reason — `.btn-danger` alone has THREE competing definitions
   elsewhere in this file (the last one in source order wins, and it is the
   muted `--danger-dim` chip style, not a bold red), so a single shared class
   name cannot be trusted to stay red here. This pairs two classes nothing
   else in the file combines, which guarantees it wins regardless of where
   either one is redefined later. Self-contained rather than layered on
   `.btn-primary` — `showChoice` always sets exactly one class per button, so
   there is nothing to layer onto. */
.choice-btn.choice-btn--danger {
  background: var(--error);
  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;
}
.choice-btn.choice-btn--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); }

/* 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 {
  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; }

/* ── 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;
}
/* "Message <first name>" in both check-in review headers (the pending head and
   the answered header) opens the client's corner chat (corner messages, D5):
   a secondary button, its chat icon beside its words. The pending head is
   dark, and white in light mode ([data-theme="light"] .ciq-ov-head); the
   button follows the theme through .btn-secondary, like Tasks and Skip beside
   it, so it needs no light twin of its own. */
.cr-message-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ── 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);
}

/* 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; }

/* ── 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); }

.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; }

/* Community's pop-ups (new post, channel). Moved here from community.js's own
   style block, so the corner's full-screen pop-up scan reads it too. */
.cm-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.cm-modal.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; }
/* A row where one field has a hint under it: the labels line up at the top, not the bottoms. */
.form-row-flex--top { align-items: flex-start; }

.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);
}

/* The card for the three two-factor pop-ups in index.html (enable, disable,
   backup codes). They were built on .modal-content, which had no rule at all,
   so their words sat on the dimmed page between a white header and footer
   (found 2026-10-05). Same card as .modal. */
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}
.modal-content > .modal-body { padding: 0 24px 8px; }

/* 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
   ============================================================ */
/* ⚠️ ABOVE THE CHAT WINDOWS: the corner messenger (#md-root, 9002, in the
   CORNER MESSAGES block at the end of this file). Both sit bottom-right; at
   1000 a toast fired with a chat window open showed behind it (the old corner
   chat at 9000, live, 2026-10-06). Still below the 9999 menus and the dialog
   band. While the corner shows, the stack lifts to 96px from the bottom so a
   toast never lands on the corner button.
   Guard: a-toast-shows-above-the-chat-window.test.mjs. */
.toast-stack {
  position: fixed; bottom: 24px; right: 24px; z-index: 9500;
  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;
}

/* ⚠️ AN ACTION TOAST MUST TAKE CLICKS. Both the stack and the toast set
   pointer-events: none so a passing toast never swallows a click meant for
   the page beneath it — which would have made an Undo button unclickable.
   Only toasts that actually carry an action opt back in. */
.toast-has-action {
  pointer-events: auto;
  display: flex; align-items: center; gap: 16px;
  padding-right: 12px;
}
/* A toast can carry a whole message the coach wrote (send-failure.js
   wordsToastOptions): long words wrap, and a long message scrolls inside the
   toast instead of growing past the screen. */
.toast-has-action .toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto; }
.toast-action {
  flex: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: inherit; font: inherit; font-weight: 600;
  padding: 5px 12px; border-radius: 6px;
}
.toast-action:hover { background: rgba(255, 255, 255, 0.26); }
.toast-action:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.toast-action:disabled { opacity: 0.5; cursor: default; }

.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;
}

/* Add Client: card charges need a connected Stripe account */
/* A link inside a settings note that only switches tabs, e.g. Online
   Booking's "Change it in Settings → Appearance" (the one time zone). */
.settings-inline-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}
.settings-inline-link:hover { color: var(--accent-hover); }

.stripe-connect-needed {
  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-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
}

/* ============================================================
   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;
}
/* The real shell's masthead: the coach's brand colour, the business name on
   it, and the same left edge as the letter below (CARD_GUTTER in
   _shared/email-render.js). The preview showed no masthead at all until
   2026-08-24, so a coach could not see the one place his colour appears. */
.comms-tpl-email-masthead {
  padding: 14px 18px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
}
.comms-tpl-email-body {
  padding: 18px 18px 20px;
  font-size: 13px;
  line-height: 1.6;
  color: #1a1d28;
  white-space: pre-wrap;
}
/* The calendar row and the CTA are real block elements injected into the
   body's text, which is `white-space: pre-wrap` — without this they inherit
   it and every newline in their own markup becomes a visible blank line. */
.comms-tpl-email-body > div { white-space: normal; }

/* 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);
}

/* Ready-to-paste preview under the cancellation agreement textarea.
   Neutral surface, sapphire only on the copy button's hover. No coloured
   left border — status reads from the sentence in .agreement-preview-note. */
.agreement-preview {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.agreement-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.agreement-preview-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.agreement-preview-copy { font-size: 12px; padding: 4px 10px; }
.agreement-preview-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
}
.agreement-preview-note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}
.agreement-preview-note.is-platform { color: #f59e0b; }

.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);
}


/* 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;
}


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


/* ============================================================
   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-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); }


/* ============================================================
   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); }

.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 */
[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; }
/* The Plan row (modules/client-package/plan-row.js) waits hidden until the server answers.
   `.detail-row` is display:flex, which beats the browser's own [hidden]. */
.detail-row.plan-row[hidden] { display: none; }
/* The package name beside its Change… list: the list takes the room and the name would wrap ("Custom / plan"), seen in the mockup. */
.detail-row.plan-row .plan-name { white-space: nowrap; }
/* Its open list: package names are longer than "Change…", so the list is wider than the button and reads left to right.
   plan-row.js moves it so it ends where the button ends. */
.detail-row.plan-row .custom-select-dropdown { min-width: 240px; text-align: left; }

/* Sign up date — inline edit, and the guard that lists what a new date changes (piece 2d) */
#cp-su-row { align-items: center; }
#cp-su-row:hover .ps-edit-btn, #cp-su-row .ps-edit-btn:focus-visible { opacity: 1; }
.su-guard { margin: 2px 0 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); font-size: var(--fs-sm); line-height: 1.5; color: var(--text); }
.su-guard[hidden] { display: none; }
.su-guard-h { margin: 0 0 6px; font-weight: 600; }
.su-guard-list { margin: 0 0 10px; padding-left: 18px; }
.su-guard-list li { margin: 2px 0; }
.su-guard-none { margin: 0 0 10px; color: var(--text-muted); }
.su-guard-f { display: flex; justify-content: flex-end; }

/* 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; }


/* 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;
}


/* ============================================================
   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); }
/* New purchase, part 3b (mockups/new-purchase/undo-a-purchase.html): Undo on a purchase's row, and an undone card
   purchase's amount, struck through beside its "Refunded" label (never colour alone) */
.pe-undo { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 3px 10px; font: inherit; font-size: 12px; color: var(--text); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.pe-undo:hover { border-color: var(--text-muted); background: var(--surface-hover); }
.pe-undo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pe-amount.pe-amount--refunded { color: var(--text-muted); text-decoration: line-through; }

/* ── 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;
}


/* ── 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; }

/* ── 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; }
.form-group .client-search-wrap > input { width: 100%; }
.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); }

/* Choice 8's rows (D8, the corner's softer look): rounded rows inset from the
   pane, parted by a thin line that starts after the avatar. The open row is a
   soft sapphire tint, never a thick coloured left edge. */
.inbox-conversations {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 8px;
}
.inbox-conv-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  border-bottom: 0;
  border-radius: 12px;
  transition: background 0.12s;
}
/* 68px = the row's 16px padding + the 40px avatar + the 12px gap. */
.inbox-conv-item + .inbox-conv-item::before {
  content: ''; position: absolute; left: 68px; right: 12px; top: 0; height: 1px; background: var(--border);
}
.inbox-conv-item:hover { background: var(--surface-2); }
.inbox-conv-item.active {
  background: var(--primary-dim);
  padding-left: 16px;
}
/* The line never cuts through a rounded tint. */
.inbox-conv-item.active::before, .inbox-conv-item.active + .inbox-conv-item::before,
.inbox-conv-item:hover::before, .inbox-conv-item:hover + .inbox-conv-item::before { opacity: 0; }

.inbox-conv-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary-dim);
  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-dim);
  color: var(--primary);
  border-color: var(--primary-dim);
}
/* The Unread tab's number (D7: people waiting, written by the conversation
   store). A number, so the sapphire is never the only signal. It starts with
   the hidden attribute, before the first count. */
.inbox-filter-count {
  display: inline-block; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--primary); color: var(--md-on-fill);
  font-size: 12px; font-weight: 600; line-height: 18px; text-align: center;
}
.inbox-filter-count[hidden] { display: none; }

/* 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;
}
/* Quiet grey outlines (D8): the word is the signal, so SMS, Email and Call
   share one look instead of three colours. */
.inbox-conv-ch,
.inbox-conv-ch--sms,
.inbox-conv-ch--email,
.inbox-conv-ch--call {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  margin-right: 4px;
  vertical-align: baseline;
}

/* ── 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-dim);
  border-color: var(--primary-dim);
}
.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: var(--fs-xs);
  color: var(--text-muted);
  margin-left: 4px;
  font-weight: 500;
}
/* The brighter sapphire reads on dark (A21), as "Seen" does. */
.inbox-msg-group-read--all {
  color: var(--md-new);
}

/* 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;
  /* The client's own bubble colours (.inbox-msg--client). It was
     var(--panel, #18181b), and --panel is defined nowhere, so the bubble was
     near-black on the light theme. */
  background: var(--surface-2);
  border: 1px solid var(--border);
  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;
}
/* "Load earlier messages" — top of a thread in the Inbox and the corner chat
   (modules/chat-history.js). Quiet on purpose: it is how far back the coach
   can read, not an action competing with the conversation. The words carry
   it, never the colour alone. */
.chat-load-earlier {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px 0 8px;
}
.chat-load-earlier-btn {
  padding: 6px 14px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--primary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.chat-load-earlier-btn:hover:not(:disabled) { background: var(--surface-2); }
.chat-load-earlier-btn:disabled { color: var(--text-muted); cursor: default; }
.inbox-msg {
  max-width: 70%;
  padding: 9px 14px;
  border-radius: 18px;
  font-size: var(--fs-base);
  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. The same 12px as the rest of the time line
   ("4:03 PM · SMS · Delivered", D8), and "Seen" in the brighter sapphire that
   reads on dark (A21). */
.inbox-msg-status {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.inbox-msg-status--seen      { color: var(--md-new); font-weight: 600; }
.inbox-msg-status--delivered { color: var(--text-muted); }
.inbox-msg-status--sent      { color: var(--text-muted); }
.inbox-msg-status--sending   { color: var(--text-muted); }
.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);
  background: var(--surface);
  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); }
/* Recording: red and pulsing, and the bar below the composer says "Recording..."
   with a timer, so the colour is never the only signal. inbox.js puts this class
   on #uc-voice-btn; the .inbox-voice-btn.recording rule further down was written
   for a button class the page does not have. */
.uc-voice-btn.recording {
  background: var(--danger);
  color: #fff;
  animation: voicePulse 1.2s ease-in-out infinite;
}
.uc-voice-btn.recording:hover { color: #fff; }
.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);
}

/* 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; }
/* The form clip's Mark reviewed button. The cw- name is left from the old
   corner chat (retired); the shared renderer (messages/thread-render.js),
   inbox.js and check-in review still draw it, so it stays. */
.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 var(--md-new);
  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: var(--groove);
  pointer-events: none;
}
.inbox-reply-floater:hover { opacity: 0.9; }
.inbox-reply-floater--coach {
  background: var(--primary); color: var(--md-on-fill);
  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: var(--md-edge);
  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; }
/* The corner's reaction chips (C7): your own is a sapphire tint with a
   sapphire edge, the others a quiet outline. */
.inbox-reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 120ms ease;
  user-select: none;
}
.inbox-reaction-chip:hover { background: var(--surface-2); }
.inbox-reaction-chip--mine {
  background: var(--primary-dim);
  border-color: var(--md-new);
  color: var(--text);
}
.inbox-reaction-emoji { font-size: 14px; line-height: 1; }

/* ── Hover-action strip on messages ──
   Floating, so one step lighter than the thread on dark (--md-raise), on the
   CRM's own tokens in both themes (C7). Quick reactions, more reactions and
   Reply, then the ⋯ that opens the message menu (§13 item 10). */
.inbox-msg-actions {
  position: absolute;
  top: -14px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px;
  background: var(--md-raise);
  border: 1px solid var(--md-edge);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 3;
  box-shadow: var(--shadow);
}
.inbox-msg-wrap--coach .inbox-msg-actions { right: 4px; }
.inbox-msg-wrap--client .inbox-msg-actions { left: 4px; }
/* The strip holds the ⋯, and a hidden strip hides it, so it also shows while
   the message holds the keyboard cursor and while its menu is open (the menu
   sits on <body>, so the pointer and the cursor have both left the message). */
.inbox-msg-wrap:hover .inbox-msg-actions,
.inbox-msg-wrap:focus-within .inbox-msg-actions,
.inbox-msg-wrap:has(.md-more-btn[aria-expanded="true"]) .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: var(--md-raise-hover);
}
/* The ⋯ (messages/thread-render.js, the shared .md-more-btn) is one of the
   strip's buttons: the same words colour and the same hover. */
.inbox-msg-actions .md-more-btn { color: var(--text); }
.inbox-msg-actions .md-more-btn:hover,
.inbox-msg-actions .md-more-btn[aria-expanded="true"] { background: var(--md-raise-hover); }

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

/* ── Reply composer chip ── a neutral inner panel, never a coloured edge. */
.inbox-reply-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 0 14px 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 12px;
}
.inbox-reply-chip-body {
  flex: 1;
  min-width: 0;
}
.inbox-reply-chip-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  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 ──
   On the CRM's menu band (9999), the same layer as the message menu that
   opens it with "+" (§4.2, §6.5), and the same panel: tokens in both themes. */
.inbox-emoji-popover {
  position: absolute;
  z-index: 9999;
  width: 320px;
  max-height: 380px;
  background: var(--surface);
  border: 1px solid var(--md-edge);
  border-radius: 12px;
  box-shadow: var(--md-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.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: 12px;
  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: var(--primary-dim);
}
.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: var(--surface-2); }

/* ── 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; }
}

/* ============================================================
   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;
}


/* 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;
}
/* New purchase sits after Record Payment or Charge card on file: that one keeps the auto margin, New purchase is 8px on */
.btn-record-payment + .btn-new-purchase {
  margin-left: 8px;
}
/* New purchase, part 4 (spec §12): where New purchase is on for the account (purchase-button.js newPurchaseOn marks the
   page), the buttons it replaces go: Charge card on file and the Session Tracker's Prepaid Pack */
body.np-on [data-np-retire] { display: none !important; }
/* The one sessions system's switch (sessions.js sessionsLedgerOn marks body.sl-on): what it retires, what only it
   shows, and the sessions-per-period fields Add Client and Renew keep (Total Session Credits never gave anything). */
body.sl-on [data-sl-retire] { display: none !important; }
body:not(.sl-on) [data-sl-only] { display: none !important; }
/* Change billing's switch (change-billing/billing-card.js marks body.cb-on): what only it can do, like the Session
   Tracker's Pause (Clayton 10/15: Freeze goes away into Pause) */
body:not(.cb-on) [data-cb-only] { display: none !important; }
body.sl-on .form-row-flex[data-sl-show].hidden { display: flex !important; }

/* 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, on its own ground token */
.sidebar {
  background: var(--sidebar-bg);
}

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

/* Primary action buttons — solid primary */
.btn-primary,
#btn-save {
  background: var(--primary);
}
.btn-primary: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"] .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;
}


/* 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; }

/* The Calendar page's two tabs, Calendar and Sessions (Clayton, 2026-10-12):
   one strip above both pages (index.html #cal-tabs), on the page ground, the
   open one underlined in sapphire like the client profile's tabs. */
.cal-tabs { display: flex; gap: 4px; flex: 0 0 auto; padding: 12px 18px 0; border-bottom: 1px solid var(--border); background: var(--bg); }
.cal-tabs.hidden { display: none; }
.cal-tab { position: relative; padding: 8px 14px 12px; border: 0; border-radius: 10px 10px 0 0; background: transparent;
  color: var(--text-muted); font: inherit; font-size: var(--fs-base); font-weight: 500; cursor: pointer; transition: color .15s; }
.cal-tab:hover { color: var(--text); }
.cal-tab[aria-selected="true"] { color: var(--text); font-weight: 600; }
.cal-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--primary); }
.cal-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* The tab names the page, so the Sessions page drops its own "Sessions" heading. */
#view-sessions .sv-main > .view-header h1 { 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); }

/* ============================================================
   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 ─────────────────────────────────────────── */
/* Solid, in the page ground: the header stays pinned while the view scrolls, and
   a see-through header let rows and cards show through the tab names. */
.builder-sticky-top { position: sticky; top: 0; z-index: 10; background: var(--bg); 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:            #0E1014;
  --surface:       #171B20;
  --surface-2:     #1D2228;
  --surface-hover: #22282F;
  --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 Extra Bold (OFL) again as of SA2 (2026-09-29);
     the condensed face from BC1 (2026-09-10) was retired as too condensed
     and small. Set UPRIGHT, same as before. */
  --pe-display:    'Saira', '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: 800;
  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: 800;
  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: 800;
  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: 800;
  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: 800;
  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, .el-quick-video-player video { 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, .el-view-video video { 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; }

/* Change billing 4c part 2: an offer that doesn't fit the client, and the offer waiting on their yes (profile) */
.save-offer-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 8px 0 0;
  line-height: 1.5;
}
.sa-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid rgba(37, 87, 214, 0.45);
  border-radius: 10px;
  background: var(--accent-dim);
}
.sa-offer-t {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.5;
}
.sa-offer-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* 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); }
/* Priority sits outside .comms-dns-val so click-to-copy never picks it up. */
.comms-dns-prio {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.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);
}

/* A chip inside a bubble or an email card: the call's details (VM, 3m, CALL)
   and the email card's Email tag. Texts and emails no longer carry one in the
   bubble: their channel is on the time line ("4:03 PM · SMS · Delivered", D8).
   One quiet grey outline, the same as the list's tags; the word is the
   signal. On the coach's sapphire bubble it takes the bubble's own words
   colour, because grey on sapphire would not read. */
.inbox-ch-badge {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-right: 4px;
  vertical-align: middle;
}
.inbox-msg--coach .inbox-ch-badge {
  color: inherit;
  border-color: color-mix(in srgb, currentColor 40%, transparent);
}
/* 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); }

/* Reply to a billing text — source:'billing_reply'. Billing texts leave from
   the shared platform number, so this bubble is the client answering the
   platform about money, not answering the coach. Written out in words, never
   a colour alone; muted so it labels the bubble without competing with what
   the client actually said. */
.inbox-billing-reply-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: var(--fs-xs);
  font-weight: 500;
  margin-right: 5px;
  vertical-align: middle;
  color: var(--text-muted);
  background: var(--surface-3);
  border: 1px solid var(--border-light);
}

/* 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: var(--fs-xs);
  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: var(--fs-xs);
  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); }
/* A bounced email says so in words and an icon. The red is only extra: the
   coach is colourblind, so colour is never the signal. Flat row, no thick
   side border. Sits under the header so it shows on a closed card too. */
.inbox-ecard-failed {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--danger);
  background: var(--danger-dim);
  border-bottom: 1px solid var(--border);
}
.inbox-ecard-failed svg { flex-shrink: 0; }
.inbox-ecard-failed strong { font-weight: 600; }
.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 var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  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; }


/* ── 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: #0E1014;
  --surface: #171B20;
  --surface-2: #1D2228;
  --surface-3: #282D38;
  --surface-hover: #22282F;
  --thead: #14161B;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: #3D4755;
  --border-light: rgba(255, 255, 255, 0.05);
  --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: #E3E8EE;
  --text-primary: #E3E8EE;
  --text-muted: #A4AFBE;
  --text-secondary: #A4AFBE;
  --text-subtle: #6F7C8D;
  --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: #282D38; border: 1px solid #3D4755; 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: #282D38; border: 1px solid #3D4755; 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: #282D38; border: 1px solid #3D4755; 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 #3D4755; }
.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);
}

/* ── ROSTER — LIGHT MODE ─────────────────────────────────────────
   #view-clients re-declares the global token names with DARK values only, so
   under light mode the roster stayed a dark card on the light page, and the
   title, search box and toolbar went dark-on-dark. This is the light half:
   the global light palette for the shared names, the roster's own extras
   (thead, row lines, pulse track, the *-text status inks) matched to it.
   Status TEXT steps down to the 600/700 shade (the 500s measure 2–3:1 on
   white); rings and fills keep their 500. Every rule is gated on light. */
[data-theme="light"] #view-clients {
  --bg: #f1f4f9;
  --surface: #ffffff;
  --surface-2: #f5f7fb;
  --surface-3: #e8edf4;
  --surface-hover: #edf1f7;
  --thead: #f8fafc;
  --border: #dde3ed;
  --border-strong: #c3ccd9;
  --border-light: #edf1f7;
  --row-line: #edf1f7;
  --hover-overlay: rgba(15, 23, 42, 0.035);
  --pulse-track: rgba(15, 23, 42, 0.10);

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

  --primary-dim: rgba(37, 87, 214, 0.10);
  --accent-strong: #2557d6;
  --accent-dim: rgba(37, 87, 214, 0.10);

  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #2557d6;
  --green: #10b981;  --green-dim: rgba(16, 185, 129, 0.12);  --green-text: #047857;
  --amber: #f59e0b;  --amber-dim: rgba(245, 158, 11, 0.14);  --amber-text: #b45309;
  --red: #ef4444;    --red-dim: rgba(239, 68, 68, 0.10);     --red-text: #dc2626;
  --none-ink: #9aa5b5;

  --shadow-float: 0 8px 26px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
}
/* white-alpha hovers and grounds vanish on white — same marks, drawn in ink */
[data-theme="light"] #view-clients .clients-table thead th.th-sortable:hover { background: rgba(15, 23, 42, 0.03); }
[data-theme="light"] #view-clients .badge-cancelled { background: rgba(15, 23, 42, 0.06); }
[data-theme="light"] #view-clients .btn-action-icon:hover { background: rgba(15, 23, 42, 0.06); }
[data-theme="light"] #view-clients .cl-pill-x:hover { background: rgba(15, 23, 42, 0.08); }
[data-theme="light"] #view-clients .cl-rx:hover { background: rgba(15, 23, 42, 0.06); }
[data-theme="light"] #view-clients .cl-builder-foot { background: rgba(15, 23, 42, 0.02); }
/* the sticky actions column is opaque, so it needs the hovered/selected row's
   colour pre-mixed: white + the hover overlay, white + --primary-dim */
[data-theme="light"] #view-clients .clients-table td.col-actions::before,
[data-theme="light"] #view-clients .clients-table th.col-actions::before { background: linear-gradient(to right, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.06)); }
[data-theme="light"] #view-clients .clients-table tbody tr:hover td.col-actions { background: #f7f7f8; }
[data-theme="light"] #view-clients .clients-table tbody tr.row-selected td.col-actions { background: #e9eefb; }
/* body-mounted: More menu, rule dropdowns, date picker, Pulse hover card */
[data-theme="light"] .cl-more-menu,
[data-theme="light"] .cl-sel-menu,
[data-theme="light"] .cl-cal { background: #ffffff; border-color: #cfd7e3; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06); }
[data-theme="light"] .cl-more-item,
[data-theme="light"] .cl-sel-opt,
[data-theme="light"] .cl-cal,
[data-theme="light"] .cl-cal-day { color: #1e293b; }
[data-theme="light"] .cl-more-item:hover,
[data-theme="light"] .cl-sel-opt:hover,
[data-theme="light"] button.cl-cal-day:hover { background: #edf1f7; }
[data-theme="light"] .cl-more-item.active,
[data-theme="light"] .cl-sel-opt.active,
[data-theme="light"] .cl-sel-opt .cl-sel-check,
[data-theme="light"] .cl-cal-day.today,
[data-theme="light"] .cl-cal-foot .cl-cal-today { color: #2557d6; }
[data-theme="light"] .cl-cal-day.sel,
[data-theme="light"] .cl-cal-day.sel:hover { background: #2557d6; color: #fff; }
[data-theme="light"] .cl-more-item .cnt,
[data-theme="light"] .cl-cal-dow span { color: #64748b; }
[data-theme="light"] .cl-cal-nav,
[data-theme="light"] .cl-cal-foot button { color: #475569; }
[data-theme="light"] .cl-cal-nav:hover,
[data-theme="light"] .cl-cal-foot button:hover { background: #edf1f7; color: #1e293b; }
[data-theme="light"] .cl-cal-foot { border-top-color: #dde3ed; }
[data-theme="light"] .cl-pulse-card { box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14); }
[data-theme="light"] .cpc-sec,
[data-theme="light"] .cpc-yourmove { border-top-color: #e3e8ef; }
[data-theme="light"] .cpc-prog,
[data-theme="light"] .cpc-sig-track { background: rgba(15, 23, 42, 0.08); }
[data-theme="light"] .cpc-note { color: #b45309; }
[data-theme="light"] .pulse-card-yourmove { background: rgba(15, 23, 42, 0.03); }

/* ============================================================
   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: #0E1014;
  --surface: #171B20;
  --surface-2: #1D2228;
  --surface-3: #282D38;
  --surface-hover: #22282F;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: #3D4755;
  --border-light: rgba(255, 255, 255, 0.05);
  --text: #E3E8EE;
  --text-muted: #A4AFBE;
  --text-subtle: #6F7C8D;

  --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.025em; }

.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,
.au-nic--notify_event { color:var(--au-act); background:var(--accent-dim); }
/* ⚠️ THE ONE STEP THAT TAKES A CLIENT'S COACHING AWAY. It had no rule at all,
   so the lock sat in the muted default while the emails beside it were accent
   coloured — the least significant looking thing on the canvas. Danger, the
   same pair every destructive control in this sheet uses; the node's own title
   ("Suspend coaching access") is what carries the meaning, so the colour only
   agrees with it. */
.au-nic--suspend_access { color:var(--danger); background:var(--danger-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); }
/* ⚠️ NO text-transform HERE. The label is composed in code (automations.js
   _runStatusLabel) because one of them carries a reason clause — "Stopped:
   payment arrangement" — and `capitalize` would title-case it into
   "Stopped: Payment Arrangement". The CRM writes sentence case. */
.au-run-status { font-size:var(--fs-xs); font-weight:600; }

/* ============================================================
   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; }
/* Automations is Builder's last tab (2026-10-12). Builder's header (title and
   tab row) sticks to the top of the same scroll area, and builder.js hands its
   height in as --builder-head-h: the folder bar sticks under it, the flow
   editor leaves room for it, and the page's own "Automations" heading goes
   (the tab names it). */
#builder-tab-automations .au-folderbar { top: var(--builder-head-h, 0px); }
#builder-tab-automations .aue-shell { height: calc(100vh - 72px - var(--builder-head-h, 0px)); }
#builder-tab-automations .au-head h1 { display: none; }
.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; }
/* A step whose content is fixed — the notification step names a message the
   coach edits in Settings → Communications, not here. Matches the input box it
   sits beside so the panel keeps one rhythm, but reads as a value rather than
   a field: no focus ring, no caret, muted text. */
.aue-ro {
  width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:7px;
  color:var(--text-muted); padding:9px 10px; font:13px/1.5 inherit;
}
/* 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); }

/* ── AUTOMATIONS — LIGHT MODE ────────────────────────────────────
   Same story as the roster: #view-automations re-declares the global token
   names with dark values only, so the cards, the folder bar and the canvas
   stayed dark on the light page. This is the light half of that palette;
   the automations-local wire and graph-paper tones are re-picked to read on
   white. Every rule is gated on light. */
[data-theme="light"] #view-automations {
  --bg: #f1f4f9;
  --surface: #ffffff;
  --surface-2: #f5f7fb;
  --surface-3: #e8edf4;
  --surface-hover: #edf1f7;
  --border: #dde3ed;
  --border-strong: #c3ccd9;
  --border-light: #edf1f7;
  --text: #1e293b;
  --text-muted: #64748b;
  --text-subtle: #768296;

  --accent-strong: #2557d6;
  --accent-dim: rgba(37, 87, 214, 0.10);

  --success: #059669;  --success-dim: rgba(16, 185, 129, 0.12);
  --warning: #d97706;  --warning-dim: rgba(245, 158, 11, 0.14);
  --danger:  #dc2626;  --danger-dim:  rgba(239, 68, 68, 0.10);
  --info:    #2557d6;  --info-dim:    rgba(37, 87, 214, 0.10);
  --shadow: 0 8px 26px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);

  --au-wire:  #9aa6b8;
  --au-paper: rgba(100, 116, 139, 0.16);
}
[data-theme="light"] .au-card:hover { border-color: #c3ccd9; }
[data-theme="light"] .au-node { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 20px rgba(15, 23, 42, 0.06); }
/* restated after .au-node, which they tie with on specificity */
[data-theme="light"] .au-node--goalcard { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
[data-theme="light"] .au-node.aue-sel { box-shadow: 0 0 0 1px var(--accent), 0 8px 22px rgba(15, 23, 42, 0.10); }

/* ============================================================
   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: #0E1014; --cp2-surface: #171B20; --cp2-surface-2: #1D2228; --cp2-surface-3: #282D38;
  --cp2-border: #262D36; --cp2-border-2: #323A46; --cp2-border-strong: #3D4755;
  /* CONTRAST POLICY (researched 2026-07-15; re-measured 2026-09-30 on the September grounds: #0E1014 page / #171B20 card / #1D2228 popover).
     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.0051 is ~10x
     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, each on its own 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.17 page / 5.60 card / 5.19 popover. */
  --cp2-border-ctl: #6f7887;  /* a control's ONLY boundary (inline input underline): 4.27 page / 3.88 card / 3.59 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;
  --cp2-hatch: rgba(255,255,255,.045);  /* deload-day stripes (set inline by _renderCalendar) */
  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.10: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.70, 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.37, inside the invisible zone — this is why the header doesn't separate today)
      -> --cp2-border-strong (2.02). GitHub ships 1.08 fill + 1.92 edge on a near-black
      ground like this one; 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-status-pending_cancellation { color: var(--cp2-amber); background: rgba(245,165,36,.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: #1D2228; border: 1px solid #3D4755; 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 #323A46; background: #282D38; color: #e9edf4;
  cursor: pointer; font: inherit; font-size: 12.5px; transition: border-color .12s;
}
.cp2-pop .cp2-phnut-opt:hover { border-color: #5a86f5; }
/* A greyed-out answer (the overrun question's Shorten, for a program that starts after
   the phase ended) keeps its reason at full strength; only its title dims. */
.cp2-pop .cp2-phnut-opt:disabled { cursor: default; }
.cp2-pop .cp2-phnut-opt:disabled:hover { border-color: #323A46; }
.cp2-pop .cp2-phnut-opt:disabled .cp2-phnut-title { color: #97a3b6; }
.cp2-pop .cp2-proto-meta { display: block; font-size: 11px; color: #97a3b6; margin-top: 2px; }

/* The "what will happen" window (Program schedule changes, 2026-10-01). It
   carries .cp2, so the profile's tokens and their light halves reach it, and the
   Program schedule list's own cards draw the picture inside it. A changed card
   says so in words (its label) as well as by its sapphire edge; the picked
   answer has a filled dot and aria-checked as well as its border. */
.cp2-pop.cp2-planpop { width: 340px; }
.cp2-pop.cp2-planpop.cp2-planpop-wide { width: 404px; }
.cp2 .cp2-planres .cp2-tl-node { cursor: default; }
.cp2 .cp2-planres .cp2-pcard.is-plain { background: transparent; }
.cp2 .cp2-planres .cp2-pcard.is-plain .cp2-tl-nm { font-weight: 500; color: var(--cp2-muted); }
.cp2 .cp2-planres .cp2-pcard.is-changed { border-color: color-mix(in srgb, var(--cp2-brand) 55%, transparent); }
.cp2 .cp2-planres .cp2-pcard.is-changed .cp2-tl-meta { color: var(--cp2-text); font-weight: 500; }
/* A removed card keeps its reason ("Its 16 workouts come off the calendar.") at full
   strength: the reason is the point, and the owner reads by contrast. Only the name is
   dimmed, by a text token that stays above 4.5:1 in both themes, never by opacity on
   the whole card, which took the reason well under the 4.5:1 floor. It says so in
   words as well (its "Removed" label) and by its dashed edge. */
.cp2 .cp2-planres .cp2-pcard.is-removed { border-style: dashed; }
.cp2 .cp2-planres .cp2-pcard.is-removed .cp2-tl-nm { color: var(--cp2-subtle); }
.cp2 .cp2-planres-was { margin-top: 2px; font-size: 11px; color: var(--cp2-subtle); }
.cp2 .cp2-planres-sub { margin-top: 5px; font-size: 11px; line-height: 1.4; color: var(--cp2-muted); }
.cp2 .cp2-planres-gap { margin: -2px 0 12px 32px; padding: 6px 10px; border: 1px dashed var(--cp2-border-2); border-radius: 9px; font-size: 11px; line-height: 1.4; color: var(--cp2-muted); }
.cp2 .cp2-planq-lead { margin-bottom: -8px; font-size: 12px; line-height: 1.45; color: var(--cp2-text); }
/* The answers never scroll inside a box: the option list's 300px cap is for long
   plan pickers, and four answers cut the last one off. */
.cp2-pop .cp2-phnut-list.cp2-planq { max-height: none; overflow: visible; }
.cp2-pop.cp2-planpop .cp2-planq-opt { position: relative; padding-left: 32px; }
.cp2-pop.cp2-planpop .cp2-planq-opt::before { content: ""; position: absolute; left: 11px; top: 11px; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--cp2-border-ctl); }
.cp2-pop.cp2-planpop .cp2-planq-opt.on { border-color: var(--cp2-brand-bright); box-shadow: inset 0 0 0 1px var(--cp2-brand-bright); }
.cp2-pop.cp2-planpop .cp2-planq-opt.on::before { border-color: var(--cp2-brand-bright); background: radial-gradient(circle, var(--cp2-brand-bright) 0 2.5px, transparent 3px); }
/* A greyed-out answer keeps its reason ("Not possible: …") at full strength, the same
   rule as the ⋯ menus' greyed-out items: the reason is the point, and the owner reads
   by contrast. Only the title and the round marker are dimmed, the title by a text token
   (above 4.5:1 in both themes), never by opacity on the whole answer, which took the
   reason down to about 2.5:1 in both. The reason is set to the muted token here, so
   which of the profile's two rules for `.cp2-proto-meta` wins cannot lower it. */
.cp2-pop.cp2-planpop .cp2-planq-opt:disabled { cursor: default; }
.cp2-pop.cp2-planpop .cp2-planq-opt:disabled .cp2-planq-title { color: var(--cp2-subtle); }
.cp2-pop.cp2-planpop .cp2-planq-opt:disabled .cp2-proto-meta { color: var(--cp2-muted); }
.cp2-pop.cp2-planpop .cp2-planq-opt:disabled::before { opacity: .5; }
.cp2-pop.cp2-planpop .cp2-planq-title { display: block; font-weight: 600; }
.cp2 .cp2-plannotes { display: flex; flex-direction: column; gap: 6px; }
.cp2 .cp2-plannote { display: flex; gap: 8px; align-items: baseline; font-size: 12px; line-height: 1.4; color: var(--cp2-text); }
.cp2 .cp2-plannote-mark { flex: none; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--cp2-bg); background: var(--cp2-amber); transform: translateY(2px); }
.cp2 .cp2-planerr { font-size: 12px; line-height: 1.45; color: var(--cp2-red); }
/* A phase change (2026-10-02): the card's dot wears that phase's own color, set inline
   (--dotc) from the phase colors. The words on the card say the same thing, so the color
   never carries it alone. The running phase's dot is filled with it; an upcoming one keeps
   its dashed ring in it. */
.cp2 .cp2-planres .cp2-tl-node.now .cp2-tl-dot::before { background: var(--dotc, var(--cp2-brand-bright)); }
/* The one line under a phase list ("Everything in a phase moves with it: …"): not a
   warning, so no mark, only a quiet rule above it. */
.cp2 .cp2-planfoot { padding-top: 10px; border-top: 1px solid var(--cp2-border); font-size: 11.5px; line-height: 1.4; color: var(--cp2-subtle); }
.cp2-pop.cp2-planpop .cp2-btn:disabled { opacity: .55; cursor: default; }
/* While the change is on its way the × does nothing, like the greyed-out second button. */
.cp2-pop.cp2-planpop .cp2-pop-x[aria-disabled="true"] { opacity: .4; cursor: default; }

.cp2-pop .cp2-pop-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 13px; border-bottom: 1px solid #262D36;
  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 #262D36; 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 #262D36;
}
.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: #282D38; 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; }
/* Completed = solid fill + ✓, same treatment as a done workout, so every
   done item on a day reads the same at a glance. */
.cp2 .cp2-chip-cardio-done { border-color: transparent; background: var(--cp2-brand); color: #fff; }
.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: #282D38; border: 1px solid #323A46; border-radius: 6px;
  color: #e9edf4; font-size: 12.5px; padding: 7px 9px;
}
.cp2-pop .cp2-input:focus { outline: none; border-color: #2557d6; }
/* The end goal panel's words box. A textarea does not inherit the page font:
   the browser default is monospace (measured in the 2026-10-01 mockup). */
.cp2-pop textarea.cp2-input { font-family: inherit; line-height: 1.45; resize: vertical; min-height: 64px; }
/* The phase write-up: room for a few paragraphs, never so tall it pushes Save off the popover. */
.cp2-pop #cp2-ph-goal { max-height: 260px; }
.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 #323A46; color: #97a3b6; background: #1D2228; }
.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 #323A46; 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.27: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; }
/* A phase's ink arrives inline as TWO values, --phi-d for the dark ground and --phi-l
   for the light one (see PHASE_COLORS). This picks the dark one; the light-mode block
   at the end of this section swaps in --phi-l. Every rule below reads plain --phi. */
.cp2 .cp2-st-step, .cp2 .cp2-st-link, .cp2 .cp2-phl { --phi: var(--phi-d); }
.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); }

/* Drag an upcoming phase to a new place (2026-10-02, section 5). Only upcoming steps
   (.cp2-st-next) drag: they show a grab pointer and a faint halo on hover. While one is
   dragged, its name follows the pointer in a pill and a blue line shows where it will land;
   the step itself dims. The line is drawn inside the strip, so the strip is positioned.
   The pointer, the halo, the line and the name carry it: the line's color does not. */
.cp2 .cp2-phbar { position: relative; }
.cp2 .cp2-st-step.cp2-st-next { cursor: grab; }
.cp2 .cp2-st-step.cp2-st-next:hover .cp2-st-node { box-shadow: 0 0 0 3px rgba(90, 134, 245, .28); }
.cp2 .cp2-st-step.cp2-st-dragging { opacity: .4; }
.cp2 .cp2-st-dropline { position: absolute; width: 2px; border-radius: 1px; background: var(--cp2-brand-bright); pointer-events: none; }
.cp2 .cp2-st-ghost { padding: 5px 11px; border-radius: 999px; background: var(--cp2-surface-3); border: 1px solid var(--cp2-border-strong);
  color: var(--cp2-text); font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }

/* "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; }

/* 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: var(--phi, #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;
}
/* Check-in submitted that week: solid amber fill + ✓ (dashed = still owed). */
.cp2 .cp2-cimark-done { background: var(--cp2-amber); border: 1px solid transparent; color: #101623; }

/* cp2 — repeat picker restyle (image-2 style: letter IS the button) */
.cp2-hide { display: none !important; }
.cp2-pop .cp2-rseg { display: flex; background: #282D38; border: 1px solid #323A46; 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: #282D38; border: 1px solid #323A46; 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: #3D4755; }

/* 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: #282D38; border: 1px solid #323A46; 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: #3D4755; }
/* 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: #282D38; border: 1px solid #323A46; 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: #1D2228; border: 1px solid #323A46; 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: #282D38; 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 #262D36; }
.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)
   The Start | Ends row was two equal 147px columns, but By date · Length · Open
   needs 155px at 8px padding, so "Open" ran into the picker's edge and was cut
   off (Clayton, 2026-09-30). The Ends column now sizes to the picker, whose
   buttons get 12px sides, and the form is 32px wider so Start keeps its 147px.
   Never wider than the screen: _placePop holds a popup 8px from each edge, and on a
   375px phone the form ran about 5px past the right one. */
.cp2-phasepop { width: 372px; max-width: calc(100vw - 16px); }
.cp2-pop.cp2-phasepop .cp2-subgrid { grid-template-columns: minmax(0, 1fr) auto; }
.cp2-pop.cp2-phasepop .cp2-habform .cp2-rseg button { padding: 6px 12px; }
/* The phase form, Program tab part 3 (2026-10-02). It is mounted on the body, outside
   .cp2, so these use hex like the popover rules around them, with a light half each.
   · A phase that has started keeps its start: the Start box is locked and a short note
     says why.
   · Moving an upcoming phase's start asks what should happen to its end: three answers,
     the picked one with a filled dot and aria-checked as well as its border, and a
     greyed-out one with its reason at full strength (never dimmed as a whole).
   · A refusal from the server is shown under the dates, in words. */
.cp2-pop .cp2-phlock { margin-top: 6px; font-size: 11.5px; line-height: 1.4; color: #97a3b6; }
.cp2-pop .cp2-pherr { margin-top: 10px; font-size: 12px; line-height: 1.45; color: #f68a85; }
.cp2-pop #cp2-ph-endchoice { margin-top: 12px; }
.cp2-pop .cp2-endq-lead { margin-bottom: 8px; font-size: 12px; line-height: 1.45; color: #cfd6e2; }
.cp2-pop .cp2-phnut-list.cp2-endq { max-height: none; overflow: visible; }
.cp2-pop .cp2-endq-opt { position: relative; padding-left: 32px; }
.cp2-pop .cp2-endq-opt::before { content: ""; position: absolute; left: 11px; top: 11px; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 2px solid #6f7887; }
.cp2-pop .cp2-endq-opt.on { border-color: #5a86f5; box-shadow: inset 0 0 0 1px #5a86f5; }
.cp2-pop .cp2-endq-opt.on::before { border-color: #5a86f5; background: radial-gradient(circle, #5a86f5 0 2.5px, transparent 3px); }
.cp2-pop .cp2-endq-title { display: block; font-weight: 600; }
.cp2-pop .cp2-endq-opt:disabled { cursor: default; }
.cp2-pop .cp2-endq-opt:disabled .cp2-endq-title { color: #97a3b6; }
.cp2-pop .cp2-endq-opt:disabled .cp2-proto-meta { color: #97a3b6; }
.cp2-pop .cp2-endq-opt:disabled::before { opacity: .5; }
.cp2-pop .cp2-endq-opt:disabled:hover { border-color: #323A46; }

/* 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 #262D36;
}

/* 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; }
/* The end goal panel's "By" box, dark theme only (2026-10-01). Its calendar icon was dark
   on dark. The page already draws controls for a dark page (html, body), which paints the
   icon light; the dark theme's rule for every date input (filter: invert(0.75)
   brightness(1.4), written for a black icon) then darkened it. Measured in Chromium:
   color-scheme alone changed nothing, the filter reset is what shows the icon. */
[data-theme="dark"] .cp2-pop #cp2-eg-date { color-scheme: dark; }
[data-theme="dark"] .cp2-pop #cp2-eg-date::-webkit-calendar-picker-indicator { filter: none; }

/* 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: #282D38; border: 1px solid #323A46; 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: #3D4755; }
.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: #282D38; border: 1px solid #323A46; 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: #282D38; border: 1px solid #323A46; 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, #1D2228); border: 1px solid var(--border, #323A46);
  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: #282D38; }
.cp2-menu-danger { color: #f0605a; }
.cp2-menu-danger:hover { background: rgba(240,96,90,.12); }
/* Menu header, second line, greyed-out item, divider (2026-09-30). Body-mounted,
   so hex here with the light half below. A greyed-out item keeps its reason at
   full strength: the reason is the point. */
.cp2-menu-h { padding: 6px 12px 5px; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #97a3b6; }
.cp2-menu-meta { display: block; margin-top: 1px; font-size: 11px; color: #97a3b6; white-space: nowrap; }
.cp2-menu-item:disabled { cursor: default; color: #7d8799; }
.cp2-menu-item:disabled:hover { background: none; }
.cp2-menu-sep { height: 1px; margin: 4px 6px; background: #323A46; }

/* 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. */
/* #training-days-overlay (Program tab ⋯ → Change training days, 2026-09-30)
   reuses this row exactly; every rule here carries its twin
   (training-days-window-shares-the-assign-styles.test.mjs). */
#assign-workout-overlay .assign-dm-grid,
#training-days-overlay .assign-dm-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
#assign-workout-overlay .assign-dm-wd,
#training-days-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,
#training-days-overlay .assign-dm-col .custom-select-trigger {
  padding: 7px 7px; font-size: 12px; gap: 3px;
  background: #282D38; border-color: #323A46; color: #e9edf4; border-radius: 7px;
}
#assign-workout-overlay .assign-dm-col .custom-select-trigger:hover,
#training-days-overlay .assign-dm-col .custom-select-trigger:hover { border-color: #3D4755; }
#assign-workout-overlay .assign-dm-col .custom-select-text,
#training-days-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,
#training-days-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,
#training-days-overlay .assign-dm-rest .custom-select-trigger { color: #97a3b6; background: transparent; }
#assign-workout-overlay .assign-dm-note,
#training-days-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,
#training-days-overlay .form-hint { margin: 3px 0 10px; }

/* Access picker → sapphire highlight (was Tailwind-blue) */
#assign-workout-overlay .assign-access-opt { border-color: #323A46; border-radius: 8px; }
#assign-workout-overlay .assign-access-opt:hover { border-color: #3D4755; }
#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,
#training-days-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 #262D36; }
#assign-workout-overlay .assign-endmode-row { margin: 0 0 16px; }
/* First week: Pick up this week / Start fresh next week (2026-10-07), under the start date. */
#assign-workout-overlay .assign-firstweek-row { margin: 2px 0 6px; }
#assign-workout-overlay .assign-firstweek-note { margin: 0 0 16px; }
/* "Filled in from the last time … ran" (Use this program again → Change the details…). */
#assign-workout-overlay .assign-reuse-note { margin: 0 0 14px; }

/* Change training days (Program tab ⋯ menu), 2026-09-30. Shares the assign
   window's day row via the #training-days-overlay twins above; these are its
   own parts. Mockup: mockups/change-training-days-2026-09-30.html. */
#training-days-overlay .cd-prog { margin: 0 0 14px; font-size: 13px; color: var(--text); }
#training-days-overlay .cd-prog span { color: var(--text-muted); }
#training-days-overlay .cd-start-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
#training-days-overlay .cd-start-row .assign-endmode { margin-bottom: 0; }
#training-days-overlay .cd-summary { margin: 14px 0 0; padding: 12px 14px; list-style: none; border: 1px solid var(--border);
  border-radius: 6px; font-size: 13px; line-height: 1.5; color: var(--text); }
#training-days-overlay .cd-summary li + li { margin-top: 6px; }
#training-days-overlay .cd-summary .cd-quiet { color: var(--text-muted); }

/* ═══ 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 #0E1014) 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 #0E1014; 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(14,16,20,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 shows every program, at its own height, with no scroll box of its own
   (Clayton, 2026-10-13: "how do we get more room for workouts being queued to show
   up on the page without needing to scroll that specific little section so that at
   least 2 or 3 queued programs fit on screen"). It used to fill only the rail height
   the calendar left over (2026-07-28) and scroll inside that, so on a laptop it showed
   one program. Now a long queue makes the left column taller, the calendar's panel
   grows to meet it (.cp2-right > .cp2-hero, flex 1 1 auto) so both columns still end
   on one line, and the page scrolls instead of the little section. */
.cp2 .cp2-tlwrap { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; }
.cp2 .cp2-tlscroll { flex: 0 0 auto; }
.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); }
/* The label row carries the card's ⋯ (.cp2-tl-menu, below). position:relative anchors
   it here; padding-right keeps the labels out from under it; a row too long for the
   card (THEN · DELOAD · IN THIS PHASE measured 206px in a 200px row) wraps instead of
   running under the ⋯ and past the border. min-height makes the first line 17px, the
   height a chip gives it, so the ⋯ centres on that line with or without a chip. */
.cp2 .cp2-pcard-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; position: relative; min-height: 17px; padding-right: 18px; }
.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; }
/* The ⋯ sat ON the card's top border (top 0, 2px from the edge), so its hover fill
   painted over the border (Clayton, 2026-09-30). It now centres on the label row's
   first 17px line, and right:-6px reaches into the card's 12px border+padding so it
   sits 6px inside the card's edge. */
.cp2 .cp2-tl-menu { position: absolute; top: 8.5px; right: -6px; transform: translateY(-50%); 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); }
/* Finished programs (2026-09-30): one quiet row above "Now" folds them away,
   the count in words. */
.cp2 .cp2-tl-fingroup { cursor: default; }
.cp2 .cp2-tl-finbar { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 1px solid var(--cp2-border-2); border-radius: 9px; padding: 7px 11px; background: transparent;
  font: inherit; font-size: 12.5px; color: var(--cp2-muted); cursor: pointer; transition: border-color .15s, color .15s; }
.cp2 .cp2-tl-finbar:hover { color: var(--cp2-text); border-color: var(--cp2-border-strong); }
.cp2 .cp2-tl-finbar .cp2-tl-chev { margin-left: auto; transition: transform .15s; }
.cp2 .cp2-tl-finbar.open .cp2-tl-chev { transform: rotate(180deg); }
/* A finished program's dot: a solid ring with a check (travelled). Its label says "Done". */
.cp2 .cp2-tl-dot.cp2-tl-donedot { border: 2px solid var(--cp2-border-ctl); background: var(--cp2-surface-2); color: var(--cp2-muted); }
.cp2 .cp2-tl-dot.cp2-tl-donedot svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cp2 .cp2-tl-node.done .cp2-tl-nm { font-weight: 500; color: var(--cp2-muted); }
.cp2 .cp2-tl-node.done .cp2-pcard { background: transparent; }
/* Drag to reorder (2026-10-01): a queued card's hollow dot turns into a grip on
   hover; while dragging, a copy follows the pointer and a sapphire line shows
   where it lands. The cards that were added or moved ring briefly afterwards. */
.cp2 .cp2-tl-node.cp2-tl-drag, .cp2 .cp2-tl-node.cp2-tl-drag .cp2-pcard { cursor: grab; }
.cp2 .cp2-tl-node.cp2-tl-drag:hover .cp2-tl-dot.hollow { border-style: solid; border-color: var(--cp2-brand-bright); }
.cp2 .cp2-tl-node.cp2-tl-drag:hover .cp2-tl-dot.hollow::before { width: 8px; height: 11px; box-shadow: none; border-radius: 0;
  background-image: radial-gradient(circle, var(--cp2-brand-bright) 1.1px, transparent 1.4px); background-size: 4px 4px; }
.cp2 .cp2-tl-node.cp2-tl-dragging { opacity: .4; }
.cp2 .cp2-tl-dropline { position: relative; height: 2px; margin: -7px 0 5px 32px; border-radius: 1px; background: var(--cp2-brand-bright); pointer-events: none; }
.cp2 .cp2-tl-dropline::before { content: ""; position: absolute; left: -27px; top: -5px; width: 12px; height: 12px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--cp2-brand-bright); background: var(--cp2-bg); }
.cp2 .cp2-tl-ghost { box-shadow: 0 12px 30px rgba(0,0,0,.45); }
/* A reorder is on its way: the list carries aria-busy from the drop until the server
   has answered and the list is read again, and a new drag is held meanwhile
   (client-profile/schedule-changes.js). The cards that can move wait with a waiting
   pointer and are dimmed: the pointer's shape and the dimming carry it, colour does not. */
.cp2 .cp2-tl[aria-busy="true"] .cp2-tl-node.cp2-tl-drag { opacity: .6; }
.cp2 .cp2-tl[aria-busy="true"] .cp2-tl-node.cp2-tl-drag,
.cp2 .cp2-tl[aria-busy="true"] .cp2-tl-node.cp2-tl-drag .cp2-pcard { cursor: progress; }
.cp2 .cp2-pcard.cp2-tl-flash { animation: cp2-tl-flash 2.4s ease-out; }
@keyframes cp2-tl-flash {
  0%, 35% { border-color: var(--cp2-brand-bright); box-shadow: 0 0 0 3px rgba(90,134,245,.28); }
  100% { box-shadow: 0 0 0 0 rgba(90,134,245,0); }
}

/* 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; }
/* The phase wash is a variable: _renderCalendar sets --phw-d per day, and light
   mode zeroes --phw so every day stays white (Clayton, 2026-09-30). */
.cp2 .cp2-day { --phw: var(--phw-d, transparent); }
.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: #0E1014; border: 1px solid #3D4755; 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 #262D36; background: #171B20; 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; }

/* The exit interview pop-up's step entrance (change-billing.css .cb-tf-step; Change billing round two, piece 3). The
   pop-up itself is styled in change-billing.css, under .cb. */
@keyframes cb-tf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* The Exit Interviews card on the Account tab (classic and CRM 2.0 profiles both render it). */
.xi-row { gap: 12px; padding: 10px 0; }
.xi-row-t { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.xi-row-s { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.xi-pill { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px; }
.xi-pill-now { color: #fff; background: #2557d6; }
.xi-pill-good { color: #2bbd7e; background: rgba(43,189,126,.12); }
.xi-pill-bad { color: #f0605a; background: rgba(240,96,90,.12); }
.xi-pill-watch { color: #f5a524; background: rgba(245,165,36,.12); }
.xi-pill-quiet { color: var(--text-muted); border: 1px solid var(--border); }
.xi-open { font-size: 12px; padding: 5px 12px; flex: 0 0 auto; }

/* 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 #262D36; background: #171B20; 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 #262D36; background: #171B20; 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; }
/* The check-in review's glance layout uses the width beside the check-in list, up to 1,500px (his 9/30 cap for the big monitor). */
.ciq-view:has(#crg-root) { max-width: 1500px; }
.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; gap: 8px; }
.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; }

/* 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 (round 2a, 2026-10-01): the response composer must never appear
   in the client's video, and every control now lives on the recorder's bar
   along the bottom of the window — so the composer hides outright, in every
   mode, and the page leaves room for the bar (the recorder sets --rec-bar-h
   on <html> while a take runs). */
body.cr-focus-mode-active .ciq-dock,
body.cr-focus-mode-active .ciq-editor,
body.cr-focus-mode-active .cr-response-col { display: none !important; }
body.cr-focus-mode-active { padding-bottom: var(--rec-bar-h, 0px); }

/* The attached-video chip: uploading (percent), ready (length · mode, Play), failed (Retry). */
.ciq-vchip-text { display: inline-flex; flex-direction: column; line-height: 1.3; }
.ciq-vchip-status { font-size: var(--fs-xs); color: var(--text-muted); }
.ciq-vchip--failed { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.ciq-vchip--failed .ciq-vchip-status { color: var(--danger); }
.ciq-vchip-play, .ciq-vchip-retry { height: 24px; padding: 0 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.ciq-vchip-play:hover, .ciq-vchip-retry:hover { background: var(--surface-hover); }
.ciq-vplay { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 12px; max-width: min(92vw, 960px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); }
.ciq-vplay::backdrop { background: rgba(0, 0, 0, 0.6); }
.ciq-vplay video { display: block; width: min(88vw, 920px); max-height: 70vh; border-radius: var(--radius-sm); background: #000; }
.ciq-vplay .ciq-vplay-close { margin-top: 10px; }

/* ── The glance layout's reply area (10/6; mockups/checkin-review-simple-2026-10-06.html rounds 7 to 12) ──
   The drawer runs across the whole window, under the check-in list too (the classic layout keeps it under
   the review column), centred up to 1,700px on very wide screens. Left to right inside it: the camera with
   Record video under it · Open plan and the take's setup · the written reply, with Send & next
   in its bottom-right corner. Thin lines between the three. */
.ciq-ov-body.ciq-dock-below { flex-direction: column; }
.ciq-dock-below > .ciq-ov-cols { flex: 1 1 auto; min-height: 0; }
.ciq-dock.ciq-dock--wide { padding: 0 24px; }
.ciq-dock--wide .ciq-dock-inner { max-width: 1700px; }
.ciq-rec-cols { display: grid; grid-template-columns: 252px 214px minmax(0, 1fr); align-items: stretch; margin-top: 8px; }
.ciq-rec-cam { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ciq-recset .custom-select { width: 100%; }
/* Record video, under the preview (2026-10-12): the column's one action, a full-width button the height of a menu. */
.ciq-rec-cam > .ciq-rec-go { width: 100%; height: 36px; margin: 0; padding: 0 12px; justify-content: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--primary) 8%, var(--surface-2)); font-size: var(--fs-sm); }
.ciq-rec-cols .ciq-rec-cam > .ciq-rec-go:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface-2)); }
.ciq-rec-cam > .ciq-rec-go:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ciq-rec-cam > .ciq-rec-go svg { flex: 0 0 auto; }
.ciq-rec-acts, .ciq-rec-reply { padding-left: 20px; margin-left: 20px; border-left: 1px solid var(--border); }
.ciq-rec-acts { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ciq-rec-acts > .ciq-tb { width: 100%; justify-content: flex-start; height: 28px; margin: 0; }
.ciq-rec-acts > .ciq-tb svg { flex: 0 0 auto; }   /* inside a full-width button the icon must not shrink away */
.ciq-recset { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 0 9px; padding-top: 10px; border-top: 1px solid var(--row-border); }
.ciq-rec-checks { display: flex; flex-direction: column; gap: 7px; }
.ciq-rec-check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--text); cursor: pointer; }
.ciq-rec-check input { margin: 0; accent-color: var(--primary); }
.ciq-rec-hint { margin: -2px 0 0 21px; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-muted); }
.ciq-rec-reply { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ciq-rec-reply .cr-drawer-notes-section { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; gap: 8px; margin: 0; }
.ciq-rec-reply .cr-editor-rt { flex: 1 1 auto; min-height: 120px; }
.ciq-rec-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ciq-rec-send { display: flex; align-items: center; gap: 8px; }
.ciq-rec-send .ciq-send { min-width: 160px; }
/* The live camera preview: 16:9, mirrored like a mirror (the recording is not), a caption and an off button. */
.ciq-rec-prev { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.ciq-rec-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.ciq-rec-cap { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 4px 9px; border-radius: 999px; background: rgba(15, 23, 42, .74); color: #fff; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.ciq-rec-off { position: absolute; top: 6px; right: 6px; z-index: 3; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 999px; background: rgba(15, 23, 42, .62); color: #fff; cursor: pointer; }
.ciq-rec-off:hover { background: rgba(15, 23, 42, .82); }
.ciq-rec-off:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ciq-rec-off svg { width: 14px; height: 14px; }
.ciq-rec-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; text-align: center; font-size: var(--fs-xs); color: var(--text-muted); }
.ciq-rec-ph svg { width: 22px; height: 22px; color: var(--text-subtle); }
.ciq-rec-link { padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-xs); font-weight: 500; color: var(--accent-strong); cursor: pointer; }
.ciq-rec-link:hover { text-decoration: underline; text-underline-offset: 3px; }
[data-theme="light"] .ciq-rec-link { color: var(--primary); }
/* A narrow reply area (an answered check-in's column): the camera and the actions side by side, the reply under them. */
@container (max-width: 760px) {
  .ciq-rec-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 14px; }
  .ciq-rec-reply { grid-column: 1 / -1; margin-left: 0; padding-left: 0; border-left: 0; padding-top: 12px; border-top: 1px solid var(--border); }
}

/* While a take runs with the talking points on, they take the check-in list's column (focus mode hides the
   list: other clients' names). The recording cuts this column out (video-recorder.js cropLeft). */
body.cr-focus-mode-active.ciq-tp-on .ciq-ov-tl { display: block !important; background: var(--surface); }
.ciq-tp-list { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: tp; }
.ciq-tp-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--fs-sm); line-height: 1.45; color: var(--text); counter-increment: tp; }
.ciq-tp-list li::before { content: counter(tp); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-dim); color: var(--accent-strong); font-size: var(--fs-xs); font-weight: 600; }
.ciq-tp-wait { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.ciq-tp-off { display: flex; gap: 8px; align-items: flex-start; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--row-border); font-size: var(--fs-xs); line-height: 1.45; color: var(--text-muted); }
.ciq-tp-off svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }

/* 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: transparent; background: var(--cp2-brand); color: #fff;
}

/* ── 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; }
}

/* ============================================================
   CLIENT PROFILE — LIGHT MODE
   .cp2 re-declares its own palette (top of this section) and only ever had
   the dark half, so the global [data-theme="light"] tokens never reached the
   profile: under light mode the header, the calendar and the Progress cards
   stayed dark, and everything that inherits --cp2-text (#e9edf4) went
   near-white on the light page (phase names, targets, check-in dates).
   · In the page it is enough to flip the tokens; every .cp2 rule reads them.
   · Body-mounted layers (.cp2-pop popovers, menus, the program/review sheet,
     the assign-program modal) sit OUTSIDE .cp2 and hard-code the dark hex,
     so each is restated here. A restated base colour ties with its own
     :hover/:focus/.on rule and would win on source order, so every state
     is restated right after its base.
   · Same contrast policy as the dark palette: text clears 4.5:1 on the page
     (#f1f4f9), the worst ground. Status colours step down to the 600/700
     shade for TEXT (the 500s measure 2–3:1 on white); rings, badges and
     bars stay at 500 so they still read bright.
   Dark mode is untouched: every rule here is gated on [data-theme="light"].
   ============================================================ */
[data-theme="light"] .cp2 {
  --cp2-bg: #f1f4f9; --cp2-surface: #ffffff; --cp2-surface-2: #f5f7fb; --cp2-surface-3: #edf1f7;
  --cp2-border: #dde3ed; --cp2-border-2: #cfd7e3; --cp2-border-strong: #bcc6d4;
  /* text 13.3 · muted 6.9 · subtle 5.5 · control edge 3.3 — all on the page ground */
  --cp2-text: #1e293b; --cp2-muted: #475569; --cp2-subtle: #56637a;
  --cp2-border-ctl: #7b8699;
  --cp2-brand-bright: #2557d6; --cp2-brand-dim: rgba(37,87,214,.10);
  --cp2-green: #047857; --cp2-amber: #b45309; --cp2-red: #dc2626;
  --cp2-hatch: rgba(15,23,42,.07);
}
[data-theme="light"] .cp2 .cp2-st-step,
[data-theme="light"] .cp2 .cp2-st-link,
[data-theme="light"] .cp2 .cp2-phl { --phi: var(--phi-l); }

/* header */
[data-theme="light"] .cp2 .cp2-av,
[data-theme="light"] .ciq-idav { background: linear-gradient(135deg, #e8edf5, #d6deea); color: #334155; }
[data-theme="light"] .cp2 .cp2-avwrap.cp2-ring-good::before   { border-color: #10b981; }
[data-theme="light"] .cp2 .cp2-avwrap.cp2-ring-watch::before  { border-color: #f59e0b; }
[data-theme="light"] .cp2 .cp2-avwrap.cp2-ring-danger::before { border-color: #ef4444; }
[data-theme="light"] .cp2 .cp2-avbadge,
[data-theme="light"] .cp2 .cp2-avbadge-watch   { background: #f59e0b; }
[data-theme="light"] .cp2 .cp2-avbadge-good    { background: #10b981; }
[data-theme="light"] .cp2 .cp2-avbadge-danger  { background: #ef4444; }
[data-theme="light"] .cp2 .cp2-avbadge-onboard { background: #5a86f5; }

/* Program tab */
[data-theme="light"] .cp2 .cp2-chip-up { color: #2557d6; border-color: rgba(37,87,214,.45); background: rgba(37,87,214,.05); }
[data-theme="light"] .cp2 .cp2-day-drop { box-shadow: inset 0 0 0 2px #2557d6; }
/* Light mode: every calendar day is white. The phase shows by its name label. */
[data-theme="light"] .cp2 .cp2-day { --phw: transparent; }
[data-theme="light"] .cp2 .cp2-lg-tint { display: none; }
[data-theme="light"] .cp2 .cp2-cimark { border-color: rgba(217,119,6,.5); }
[data-theme="light"] .cp2 .cp2-cimark-done { background: #f59e0b; border-color: transparent; }
[data-theme="light"] .cp2 .cp2-nut-p { color: #047857; }
[data-theme="light"] .cp2 .cp2-nut-c { color: #b45309; }
[data-theme="light"] .cp2 .cp2-nut-f { color: #2557d6; }
/* White-alpha grounds and stripes vanish on white — same marks, drawn in ink. */
[data-theme="light"] .cp2 .cp2-nutband { background: rgba(15,23,42,.05); }
[data-theme="light"] .cp2 .cp2-tin:hover { background: rgba(15,23,42,.03); }
[data-theme="light"] .cp2 .cp2-tl-deload {
  background: repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(15,23,42,.08) 3px, rgba(15,23,42,.08) 6px);
}
/* brand-bright IS brand on this ground, so the hover needs its own darker step */
/* the unset default-goal chip is amber TEXT (global --warning, 1.9:1 on its tint) */
[data-theme="light"] .cp2 .cp2-goalchip--unset,
[data-theme="light"] .cp2 .cp2-goalchip--unset:hover { color: #b45309; }

/* Progress tab. .cp2-prog-head is ALSO the program sheet's header (below), whose
   #161c27 ground the Progress cards inherit — seamless on a dark card, a black bar
   on a white one. */
[data-theme="light"] .cp2-prog-head { background: #ffffff; border-bottom-color: #dde3ed; }
[data-theme="light"] .cp2-prog-badge-good  { color: #047857; border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.08); }
[data-theme="light"] .cp2-prog-badge-watch { color: #b45309; border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.08); }

/* program sheet + check-in review overlay (body-mounted) */
[data-theme="light"] .cp2-prog-overlay { background: rgba(15,23,42,.38); }
[data-theme="light"] .cp2-prog-sheet { background: #f1f4f9; border-color: #cfd7e3; box-shadow: 0 32px 80px rgba(15,23,42,.18); }
[data-theme="light"] .cp2-prog-title { color: #1e293b; }
[data-theme="light"] .cp2-prog-title span { color: #56637a; }
[data-theme="light"] .ciq-ov-head,
[data-theme="light"] .ciq-ov-tabs { background: #ffffff; border-bottom-color: #dde3ed; }
[data-theme="light"] .ciq-ov-x:hover,
[data-theme="light"] .ciq-tb:hover { background: rgba(15,23,42,.05); }
[data-theme="light"] .ciq-tb.is-active:hover { background: var(--primary-hover); }
[data-theme="light"] .ciq-tb--rec:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
[data-theme="light"] .ciq-tb--ai,
[data-theme="light"] .ciq-tb--ai:hover { color: #7c3aed; }
[data-theme="light"] .ciq-tb--ai:hover { border-color: #7c3aed; background: rgba(124,58,237,.08); }
[data-theme="light"] .ciq-tl-item:hover,
[data-theme="light"] .ciq-done-row:hover { background: rgba(15,23,42,.03); }
[data-theme="light"] .ciq-dock { box-shadow: 0 -10px 30px rgba(15,23,42,.08); }
[data-theme="light"] .ciq-main .cr-cat-card { box-shadow: 0 8px 24px rgba(15,23,42,.06); }

/* Save-attempt pills + client tasks */
[data-theme="light"] .xi-pill-good  { color: #047857; }
[data-theme="light"] .xi-pill-bad   { color: #dc2626; }
[data-theme="light"] .xi-pill-watch { color: #b45309; }
[data-theme="light"] .ctk-item:hover { background: rgba(15,23,42,.03); }
[data-theme="light"] .ctk-tk-due { color: #2557d6; }
[data-theme="light"] .ctk-tk-type { color: #047857; }
[data-theme="light"] .tasks-drawer { box-shadow: -12px 0 40px rgba(15,23,42,.12); }

/* ── popovers (.cp2-pop) — base colours, then every state they would shadow ── */
[data-theme="light"] .cp2-pop { background: #ffffff; border-color: #cfd7e3; color: #1e293b; box-shadow: 0 16px 40px rgba(15,23,42,.14); }
[data-theme="light"] .cp2-pop .cp2-pop-h { border-bottom-color: #e3e8ef; color: #475569; }
[data-theme="light"] .cp2-pop .cp2-pop-r,
[data-theme="light"] .cp2-pop .cp2-tip-hd { border-bottom-color: #e3e8ef; }
[data-theme="light"] .cp2-pop .cp2-tsec { border-bottom-color: #edf1f7; }
[data-theme="light"] .cp2-pop .cp2-habactions,
[data-theme="light"] .cp2-pop .cp2-habit-current:not(:empty) { border-top-color: #e3e8ef; }
[data-theme="light"] .cp2-pop .cp2-pop-m,
[data-theme="light"] .cp2-pop .cp2-pop-hh,
[data-theme="light"] .cp2-pop .cp2-tip-t,
[data-theme="light"] .cp2-pop .cp2-tp strong,
[data-theme="light"] .cp2-pop .cp2-brow-l,
[data-theme="light"] .cp2-pop .cp2-brow-n,
[data-theme="light"] .cp2-pop .cp2-tflag-h { color: #1e293b; }
[data-theme="light"] .cp2-pop .cp2-tp,
[data-theme="light"] .cp2-pop .cp2-tflag-d,
[data-theme="light"] .cp2-pop .cp2-tempty,
[data-theme="light"] .cp2-pop .cp2-tul li { color: #334155; }
[data-theme="light"] .cp2-pop .cp2-proto-meta,
[data-theme="light"] .cp2-pop .cp2-pop-dd,
[data-theme="light"] .cp2-pop .cp2-brow-d,
[data-theme="light"] .cp2-pop .cp2-ttrend,
[data-theme="light"] .cp2-pop .cp2-tgt-u,
[data-theme="light"] .cp2-pop .cp2-ph-prev { color: #475569; }
[data-theme="light"] .cp2-pop .cp2-pop-x,
[data-theme="light"] .cp2-pop .cp2-tip-s,
[data-theme="light"] .cp2-pop .cp2-bk,
[data-theme="light"] .cp2-pop .cp2-tmuted,
[data-theme="light"] .cp2-pop .cp2-brow-n em,
[data-theme="light"] .cp2-pop .cp2-tgated,
[data-theme="light"] .cp2-pop .cp2-addnote,
[data-theme="light"] .cp2-pop .cp2-addlbl,
[data-theme="light"] .cp2-pop .cp2-fldl { color: #56637a; }
[data-theme="light"] .cp2-pop .cp2-fldl em { color: #7b8699; }
/* status text steps down; the bar fills that share these classes keep their 500 */
[data-theme="light"] .cp2-pop .cp2-pop-cc,
[data-theme="light"] .cp2-pop .cp2-tflag-c,
[data-theme="light"] .cp2-pop .cp2-tgood,
[data-theme="light"] .cp2-pop .cp2-t-green,
[data-theme="light"] .cp2-pop .cp2-tband-green { color: #047857; }
[data-theme="light"] .cp2-pop .cp2-t-amber,
[data-theme="light"] .cp2-pop .cp2-tband-amber { color: #b45309; }
[data-theme="light"] .cp2-pop .cp2-t-red,
[data-theme="light"] .cp2-pop .cp2-tband-red { color: #dc2626; }
[data-theme="light"] .cp2-pop .cp2-tbar { background: #e4e8ef; }
/* fields */
[data-theme="light"] .cp2-pop .cp2-input,
[data-theme="light"] .cp2-pop .cp2-stepinput,
[data-theme="light"] .cp2-pop .cp2-tgt-unit,
[data-theme="light"] .cp2-pop .custom-select-trigger { background-color: #f5f7fb; border-color: #cfd7e3; color: #1e293b; }
[data-theme="light"] .cp2-pop .custom-select-trigger:hover { border-color: #bcc6d4; }
[data-theme="light"] .cp2-pop .cp2-input:focus,
[data-theme="light"] .cp2-pop .cp2-stepinput:focus,
[data-theme="light"] .cp2-pop .cp2-tgt-unit:focus,
[data-theme="light"] .cp2-pop .custom-select-trigger:focus { border-color: #2557d6; }
[data-theme="light"] .cp2-pop .custom-select-trigger svg { color: #56637a; }
[data-theme="light"] .cp2-pop .custom-select-dropdown { background: #ffffff; border-color: #cfd7e3; box-shadow: 0 10px 28px rgba(15,23,42,.12); }
[data-theme="light"] .cp2-pop .custom-select-option { color: #334155; }
[data-theme="light"] .cp2-pop .custom-select-option:hover { background: #edf1f7; color: #1e293b; }
[data-theme="light"] .cp2-pop .custom-select-option.active { background: rgba(37,87,214,.10); color: #2557d6; }
[data-theme="light"] .cp2 select.cp2-tgt-unit,
[data-theme="light"] .cp2-pop select.cp2-input,
[data-theme="light"] .cp2-pop .cp2-tgt-unit {
  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='%2356637a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
/* buttons */
[data-theme="light"] .cp2-pop .cp2-btn { background: #ffffff; border-color: #cfd7e3; color: #475569; }
[data-theme="light"] .cp2-pop .cp2-btn-pri { background: #2557d6; border-color: #2557d6; color: #fff; }
[data-theme="light"] .cp2-pop .cp2-habactions .cp2-btn-danger { color: #dc2626; border-color: rgba(220,38,38,.35); background: transparent; }
[data-theme="light"] .cp2-pop .cp2-habactions .cp2-btn-danger:hover { border-color: #dc2626; }
[data-theme="light"] .cp2-pop .cp2-act { border-color: #cfd7e3; color: #475569; }
[data-theme="light"] .cp2-pop .cp2-act:hover { color: #047857; border-color: #10b981; }
[data-theme="light"] .cp2-pop .cp2-act-del:hover { color: #dc2626; border-color: #dc2626; }
/* option lists, segments, day picker, icon + colour chips */
[data-theme="light"] .cp2-pop .cp2-phnut-opt { border-color: #dde3ed; background: #f5f7fb; color: #1e293b; }
[data-theme="light"] .cp2-pop .cp2-phnut-opt:hover { border-color: #2557d6; }
[data-theme="light"] .cp2-pop .cp2-phnut-opt:disabled:hover { border-color: #dde3ed; }
[data-theme="light"] .cp2-pop .cp2-phnut-opt:disabled .cp2-phnut-title { color: #56637a; }
/* the phase form's lock note, refusal and question about the end (dark half: the phase form rules) */
[data-theme="light"] .cp2-pop .cp2-phlock { color: #475569; }
[data-theme="light"] .cp2-pop .cp2-pherr { color: #b91c1c; }
[data-theme="light"] .cp2-pop .cp2-endq-lead { color: #334155; }
[data-theme="light"] .cp2-pop .cp2-endq-opt::before { border-color: #7b8699; }
[data-theme="light"] .cp2-pop .cp2-endq-opt.on { border-color: #2557d6; box-shadow: inset 0 0 0 1px #2557d6; }
[data-theme="light"] .cp2-pop .cp2-endq-opt.on::before { border-color: #2557d6; background: radial-gradient(circle, #2557d6 0 2.5px, transparent 3px); }
[data-theme="light"] .cp2-pop .cp2-endq-opt:disabled .cp2-endq-title { color: #56637a; }
[data-theme="light"] .cp2-pop .cp2-endq-opt:disabled .cp2-proto-meta { color: #475569; }
[data-theme="light"] .cp2-pop .cp2-endq-opt:disabled:hover { border-color: #dde3ed; }
[data-theme="light"] .cp2 .cp2-tl-ghost { box-shadow: 0 12px 26px rgba(15,23,42,.16); }
[data-theme="light"] .cp2 .cp2-st-ghost { box-shadow: 0 10px 24px rgba(15,23,42,.14); }
[data-theme="light"] .cp2-pop .cp2-rseg { background: #f5f7fb; border-color: #cfd7e3; }
[data-theme="light"] .cp2-pop .cp2-rseg button { color: #475569; }
[data-theme="light"] .cp2-pop .cp2-rseg button.on { background: #2557d6; color: #fff; }
[data-theme="light"] .cp2-pop .cp2-dow span { color: #475569; background: #f5f7fb; border-color: #cfd7e3; }
[data-theme="light"] .cp2-pop .cp2-dow:hover span { border-color: #bcc6d4; }
[data-theme="light"] .cp2-pop .cp2-dow input:checked + span { background: #2557d6; border-color: #2557d6; color: #fff; }
[data-theme="light"] .cp2-pop .cp2-habicopt { background: #f5f7fb; border-color: #cfd7e3; }
[data-theme="light"] .cp2-pop .cp2-habicopt:hover { border-color: #bcc6d4; }
[data-theme="light"] .cp2-pop .cp2-habicopt.on { border-color: #2557d6; box-shadow: inset 0 0 0 1px #2557d6; background: #eaf0fc; }
[data-theme="light"] .cp2-pop .cp2-phchip { background: #f5f7fb; border-color: #cfd7e3; color: #475569; }
[data-theme="light"] .cp2-pop .cp2-phchip:hover { border-color: #bcc6d4; }
[data-theme="light"] .cp2-pop .cp2-phchip.on { border-color: #2557d6; box-shadow: inset 0 0 0 1px #2557d6; }
[data-theme="light"] .cp2-pop .cp2-phchip-auto.on { color: #1e293b; }
/* ⋯ action menu (the item rules are unscoped, so the danger item and its hover
   are restated after the plain ones they tie with) */
[data-theme="light"] .cp2-menu-item { color: #1e293b; }
[data-theme="light"] .cp2-menu-item:hover { background: #edf1f7; }
[data-theme="light"] .cp2-menu-danger { color: #dc2626; }
[data-theme="light"] .cp2-menu-danger:hover { background: rgba(220,38,38,.08); }
/* The header and the reason line read #56637a (the light --cp2-subtle), not #64748b:
   that was 4.2:1 on the hover fill and on the danger hover fill behind "None of its
   workouts were done.", under the 4.5:1 floor for words a coach has to read. */
[data-theme="light"] .cp2-menu-h, [data-theme="light"] .cp2-menu-meta { color: #56637a; }
[data-theme="light"] .cp2-menu-item:disabled { color: #8a94a6; }
[data-theme="light"] .cp2-menu-item:disabled:hover { background: none; }
[data-theme="light"] .cp2-menu-sep { background: #e2e8f0; }

/* assign-program modal (body-mounted, restyled with the popover hex) */
[data-theme="light"] .assign-endmode { background: rgba(15,23,42,.04); border-color: #dde3ed; }
[data-theme="light"] #assign-workout-overlay .assign-dm-wd,
[data-theme="light"] #training-days-overlay .assign-dm-wd,
[data-theme="light"] #assign-workout-overlay .assign-dm-note,
[data-theme="light"] #training-days-overlay .assign-dm-note { color: #56637a; }
[data-theme="light"] #assign-workout-overlay .assign-dm-col .custom-select-trigger,
[data-theme="light"] #training-days-overlay .assign-dm-col .custom-select-trigger { background: #f5f7fb; border-color: #cfd7e3; color: #1e293b; }
/* after the column rule it ties with, as in the dark original: a rest day recedes */
[data-theme="light"] #assign-workout-overlay .assign-dm-rest .custom-select-trigger,
[data-theme="light"] #training-days-overlay .assign-dm-rest .custom-select-trigger { color: #56637a; background: transparent; }
[data-theme="light"] #assign-workout-overlay .assign-access-opt { border-color: #cfd7e3; }
[data-theme="light"] #assign-workout-overlay .assign-dm-col .custom-select-trigger:hover,
[data-theme="light"] #training-days-overlay .assign-dm-col .custom-select-trigger:hover,
[data-theme="light"] #assign-workout-overlay .assign-access-opt:hover { border-color: #bcc6d4; }
[data-theme="light"] #assign-workout-overlay .assign-access-opt:has(input:checked) { border-color: #2557d6; }
[data-theme="light"] #assign-workout-overlay .assign-access-opt input:checked ~ div .assign-access-title { color: #2557d6; }
[data-theme="light"] #assign-workout-overlay #assign-step-schedule { border-top-color: #dde3ed; }

/* ============================================================
   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;
}
/* Booked™ — the share-one-link row above the meeting-type list */
.booked-onelink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--surface-2);
}
.booked-onelink-label {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
}
.booked-onelink-sub {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: 2px;
}
.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,
/* The dashboard's Today card draws the calendar's day list (10/16): the same tokens, or its status words lose their hue */
.tdy,
.c2-peek, .c2-sheet-wrap,
/* The client picker's list is body-mounted with the create sheet, so it needs
   the tokens by name like the other overlays — without this it inherits the
   legacy blue (token-scope.test.mjs enforces the pairing). */
#c2-client-list,
/* ⚠️ THE CREATE SHEET IS BODY-MOUNTED TOO, and was the one overlay missing
   from this list. Under a light theme it painted --surface: #ffffff while the
   client picker inside it stayed on the dark tokens — a white sheet with dark
   innards, which is the "weird white" the coach kept reporting on this dialog
   (2026-08-27). The token-scope guard could not catch it: that guard finds
   overlays by their `id="c2-…"`, and this one has only a data attribute. */
[data-c2-create-modal],
#c2-dropped, #c2-drag, #c2-cmd, #c2-undo {
  --bg: #0E1014;
  /* The drag strip down the right of every event block — see .c2-ev.is-rightmost.
     Wide enough to press without aiming, narrow enough not to eat a short name. */
  --c2-ev-gutter: 14px;
  --surface: #171B20;
  --surface-2: #1D2228;
  --surface-3: #282D38;
  --surface-hover: #22282F;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: #3D4755;
  --border-light: rgba(255, 255, 255, 0.05);
  --hover-overlay: rgba(255, 255, 255, 0.028);

  --text: #E3E8EE;
  --text-muted: #A4AFBE;
  --text-subtle: #6F7C8D;
  /* 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); }
/* "Needs your call" — the one scheduled state asking for a decision. Same
   amber treatment as no-show; the WORD carries the state, colour agrees. */
.c2-w--needscall { color: var(--amber-text); border-color: rgba(245, 165, 36, .38); background: var(--amber-dim); }
/* "Not covered" (sessions v2): no credit will pay for this session. Asks the
   coach something, so the same amber; the WORD carries the state. */
.c2-w--notcovered { 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; }
/* A client's request waiting for an answer: dashed and hollow too, and the WORD ("Requested") says what it is. */
.c2-w--requested { color: var(--text-muted); 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); }

/* ── "2 requests waiting for your OK" ─────────────────────────────────
   A QUIET strip: neutral ground, a dashed edge like the "Requested" marks it points to, plain words. Only while a
   client's ask waits for an answer. Not amber: the reminder above it is something that already happened, this is
   something waiting for his word. */
.c2-reqs { display: block; width: calc(100% - 24px); margin: 4px 12px 8px; padding: 8px 12px; text-align: left;
  cursor: pointer; font: inherit; font-size: var(--fs-sm); color: var(--text-muted); background: transparent;
  border: 1px dashed var(--accent-strong); border-radius: var(--radius-sm); }
.c2-reqs:hover, .c2-reqs:focus-visible { background: var(--hover-overlay); color: var(--text); }

/* ── "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); }
/* ⚠️ WHILE AWAY THE LABELS ARE NOT A CONTROL (travel time zones, 2026-09-28).
   The second clock is the home zone until the computer is home again, so
   nothing here opens a picker, and nothing here may look as if it does. */
.c2-tzpick.is-home { cursor: default; }
.c2-tzpick.is-home:hover { color: var(--text-subtle); background: transparent; }
.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;
  /* ⚠️ A BUTTON CENTRES ITS OWN CONTENT VERTICALLY. Left to the UA default,
     the time and name floated in the middle of the block, so a 90-minute
     meeting put its label halfway down and blocks of different lengths lined
     up with nothing (Clayton, 2026-08-27). The label belongs at the top edge,
     next to the hour line that says when it starts. */
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  left: calc(var(--l, 0%) + 3px); width: calc(var(--w, 100%) - 6px); z-index: var(--z, 1);
  transition: left 120ms ease, width 120ms ease; }
/* ⚠️ THE RIGHT-HAND GUTTER IS A CONTROL, NOT A MARGIN. create.js starts a new
   event from a press on the column and bails the moment the pointer is over a
   block — `e.target.closest('.c2-ev')`. A block spanning the full column width
   therefore made its own hours unbookable: there was nowhere left to press. The
   strip Google Calendar leaves down the right of every event is what you drag
   in, and this is the same strip. Only the block touching the column's right
   edge gives it back; interior lanes keep their ordinary 3px gap.
   ⚠️ THE HOVER RULE HAS TO RESPECT IT TOO. Hover expands a block to the whole
   column, and expanding over the gutter would swallow it exactly when the
   pointer is nearby — which is the only time it is ever reached for. */
.c2-ev.is-rightmost { width: calc(var(--w, 100%) - 3px - var(--c2-ev-gutter)); }
/* ⚠️ THE BOTTOM STRIP IS A HANDLE. move.js treats a press within 8px of the
   bottom edge as a RESIZE — the cursor says so before anything is pressed, as
   Google's does. A pseudo-element, so the block's own hit-testing is untouched:
   pointerdown still lands on the block, and closest('.c2-ev') still finds it.
   Ghosts have no length to change and continuations start on another day. */
.c2-ev:not(.is-ghost):not(.is-request):not(.is-continued)::after { content: ''; position: absolute; left: 0; right: 0;
  bottom: 0; height: 8px; cursor: ns-resize; }
.c2-ev.is-dragging::after { display: none; }
.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 14px; line-height: 1.5; }
/* Section label, in the dashboard's own uppercase-label idiom rather than a
   second heading size competing with the modal title. */
.c2-cat-h { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); margin: 24px 0 8px; padding-top: 18px; border-top: 1px solid var(--border); }
/* ⚠️ ONE FIXED TRAILING COLUMN FOR BOTH ROW KINDS. This label used to be
   free-width text while the other rows ended in a 30px button, so a row saying
   "always on" squeezed its name field narrower than the rest and the first and
   last rows visibly failed to line up. Both now sit in the same 74px column, so
   every name field ends at the same place.
   The words stay rather than becoming an icon: an unlabelled padlock is a
   worse trade for a colourblind reader than three small words. */
.c2-cat-fixed { flex: 0 0 auto; width: 74px; text-align: right; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle);
  white-space: nowrap; cursor: default; }
.c2-cat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
/* A flat swatch, not the browser's chunky colour well. */
.c2-cat-row input[type="color"] { width: 34px; height: 34px; flex: 0 0 auto; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
  cursor: pointer; -webkit-appearance: none; appearance: none; overflow: hidden; }
.c2-cat-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.c2-cat-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 3px; }
.c2-cat-row input[type="color"]:hover { border-color: var(--text-subtle); }
.c2-cat-row input[type="text"] { flex: 1; min-width: 0; height: 34px; background: var(--bg);
  color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0 10px; font: inherit; font-size: 14px; }
.c2-cat-row input[type="text"]:focus { outline: none; border-color: var(--primary); }
/* ⚠️ THE COLUMN IS 74px, THE BUTTON IS 30px SQUARE. Sizing the button itself to
   74 to match the "always on" column turned its hover border into a long
   rectangle with the × pushed against the right edge. The margin holds the
   column width so the name fields still all end at the same x (8 gap + 44
   margin + 30 button = the 8 + 74 a fixed row uses), while the control stays a
   square with the glyph centred in it. */
.c2-cat-del { flex: 0 0 auto; width: 30px; height: 30px; margin-left: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; color: var(--text-subtle);
  font-size: 18px; line-height: 1; cursor: pointer; transition: color .15s, border-color .15s; }
.c2-cat-del:hover { border-color: var(--danger); color: var(--danger); }
/* Reads as "add another row", so it lines up with the rows above it. */
/* Lines up with the name fields above it rather than floating at the margin.
   Addressed by data attribute because the markup carries no class of its own. */
[data-c2-cat-act="add"] { margin: 12px 0 4px 42px; }
.c2-cat-map { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--border); font-size: 14px; }
.c2-cat-map:last-child { border-bottom: none; }
.c2-cat-map > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--text-muted); }
/* These are upgraded to the CRM's own .custom-select component at mount, so the
   sizing lands on the WRAPPER, not the native element — the native one is
   hidden by then. The bare-select rules stay as the pre-upgrade fallback, the
   same way .pe-exp-select does in the program editor. */
.c2-cat-map select { flex: 0 0 auto; width: 180px; height: 32px; background: var(--bg);
  color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0 8px; font: inherit; font-size: 13px; cursor: pointer; }
.c2-cat-map .custom-select { flex: 0 0 auto; width: 180px; }
.c2-cat-map .custom-select-trigger { width: 100%; padding: 7px 10px; font-size: 13px;
  background: var(--bg); border-radius: var(--radius-sm); }
/* ⚠️ 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`.
   The Time off details (reason and dates) were the same: on screen with Time
   off unticked (seen on his picture of the New event form, 2026-10-12). */
.c2-grp[hidden], .c2-row[hidden], .c2-ends[hidden], .c2-timeoff[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; }
/* The category row's icon slot is the category's colour — the same disc the
   legend draws, so the coach is looking at one swatch, not two kinds. */
.c2-row-sw { width: 18px; height: 18px; margin-top: 8px; display: flex; align-items: center;
  justify-content: center; }
.c2-row-sw::before { content: ''; width: 12px; height: 12px; border-radius: 50%;
  background: var(--sw, var(--text-subtle)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.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; }

/* Client picker — type to narrow. The value lives in a hidden input under the
   same data-c2-f="client" hook the submit path reads; this is only the way in. */
.c2-combo { position: relative; width: 100%; }
.c2-combo-list { position: absolute; z-index: 40; top: calc(100% + 2px); left: 0; right: 0;
  margin: 0; padding: 4px; list-style: none; max-height: 216px; 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.38); }
.c2-combo-list li { padding: 7px 9px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); color: var(--text); cursor: pointer; }
.c2-combo-list li:hover,
.c2-combo-list li.is-active { background: var(--hover-overlay); }
/* Keyboard focus must be visible on its own, not by colour alone. */
.c2-combo-list li.is-active { outline: 1px solid var(--accent); outline-offset: -1px; }

.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; }
/* The date reads as part of the sentence, like the times beside it — a field
   you can click into, not a boxed-in form control. */
.c2-when input[type="time"], .c2-when input[type="date"] { 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, .c2-when input[type="date"]:hover { background: var(--hover-overlay); }
.c2-when input[type="time"]:focus, .c2-when input[type="date"]: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; }

/* ── Session peek actions (cancel / move / note / can't-make-it) ───── */
.c2-peek-cmi { border: 1px solid rgba(245, 165, 36, .38); background: var(--amber-dim);
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 10px 12px 0; }
.c2-cmi-note { font-size: var(--fs-sm); color: var(--amber-text); margin-bottom: 6px; }
.c2-cmi-excused { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 8px; }
.c2-peek-cmi .c2-peek-do { margin: 0; padding: 0; }
.c2-sa-body { display: flex !important; flex-direction: column; gap: 12px; padding: 14px 18px 16px !important; }
.c2-sa-line { font-size: var(--fs-sm); color: var(--text); }
.c2-sa-quiet { font-size: var(--fs-xs); color: var(--text-subtle); }
.c2-sa-input, .c2-sa-textarea { width: 100%; box-sizing: border-box; background: transparent;
  color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: var(--fs-sm); font-family: inherit; }
.c2-sa-textarea { resize: vertical; }
.c2-sa-input:focus, .c2-sa-textarea:focus { outline: none; border-color: var(--accent); }
.c2-sa-when { display: flex; gap: 8px; }
.c2-sa-when input { background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 6px 8px; font-size: var(--fs-sm); }

/* ── Time off (create sheet + confirm) ─────────────────────────────── */
.c2-checkline { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm);
  color: var(--text); cursor: pointer; padding: 2px 0; }
.c2-checkline input { accent-color: var(--accent); }
.c2-timeoff { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.c2-timeoff-days { display: flex; align-items: center; gap: 8px; }
/* ⚠️ `font: inherit` IS THE WHOLE BUG. A native date input does NOT inherit the
   page's typeface — left alone it renders in the platform's own control font,
   which is why these two boxes read as a monospace slab beside the CRM's own
   fields while the identical inputs under "Ends" looked right: those already
   set it. Reported 2026-08-30 ("the styling for the dates, especially in the
   vacation section, is not crm styling"). The rest matches .form-group input,
   the dashboard's standing treatment for a field you fill in: --surface-2
   ground, --border edge, --primary on focus. */
.c2-timeoff-days input[type="date"] { background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text);
  font: inherit; font-size: var(--fs-sm); padding: 7px 9px;
  transition: border-color .15s; }
.c2-timeoff-days input[type="date"]:hover { border-color: var(--border-strong, var(--border)); }
.c2-timeoff-days input[type="date"]:focus { outline: none; border-color: var(--accent); }
.c2-timeoff-hint, .c2-to-hint, .c2-to-quiet { font-size: var(--fs-xs); color: var(--text-subtle); }
.c2-to-body { display: flex !important; flex-direction: column; gap: 16px; padding: 14px 18px 18px !important; }
.c2-to-range { font-size: var(--fs-sm); color: var(--text-muted); }
.c2-to-block { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border);
  padding-top: 12px; }
.c2-to-head { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.c2-to-list { margin: 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--text-muted);
  display: flex; flex-direction: column; gap: 3px; }
.c2-to-msg { width: 100%; box-sizing: border-box; background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px;
  font-size: var(--fs-sm); font-family: inherit; resize: vertical; }
.c2-to-msg:focus { outline: none; border-color: var(--accent); }

/* ── 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% - 3px - var(--c2-ev-gutter)); 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; }
/* Where it happens — an address, or the name of whatever the meeting link
   opens. Quieter than the name on purpose: it is the third thing you read, and
   only when the block is tall enough to have a third line at all. */
.c2-ev .ew { font-size: var(--fs-xs); font-weight: 400; line-height: 1.3; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; opacity: .78; }
/* The drive to THIS block from the one before it (spec T11: the later event
   carries it, Apple-Calendar style). Amber AND the words "does not fit" when
   the drive is longer than the gap — never colour alone. */
.c2-ev .ed { font-size: 10px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: .85; display: flex; align-items: center; gap: 4px; }
.c2-ev .ed.is-late { color: var(--warning); opacity: 1; font-weight: 600; }
.c2-buffer.is-drive .b { background: none; padding-left: 0; }
.c2-buffer.is-drive.is-late { color: var(--warning); }
.c2-buffer.is-drive.is-late .b { font-weight: 600; }
/* ⚠️ 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, .c2-ev .ew { 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)); }
/* ⚠️ AN EVENT THE COACH MADE IS NOT DASHED. It used to be, from when a
   personal event could only be a read-only mirror of a Google one. The moment
   he could create events here, everything he made came out dashed — and dashed
   already means TENTATIVE on this grid (a held slot, hollow, no credit spent).
   One shape carrying two meanings, and the wrong one landed on the events he
   owns outright: "the dashed border gives it a pending feel". A session and an
   event are told apart by the category colour; the border says nothing. */
.c2-ev.is-personal { background: var(--cat-bg, var(--surface));
  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; }
/* ── A client's request waiting for the coach's OK ("Requested · Ann") ──────────────────────────────
   HOLLOW and DASHED, like a held hour, because it is the same kind of thing: something that might happen and has not.
   Nothing is booked in it and it takes no time (requests.js). It is told apart from a held hour by its WORDS ("Requested
   · Ann" leads the block, "Held" is the other's word), and by a brighter, heavier edge in the accent, so it reads as
   waiting for an answer rather than as a quiet reservation. The edge is never the only signal: Clayton is colourblind.
   ⚠️ THE TEXT IS SET HERE, NOT LEFT TO --cat-fg. That variable is chosen for text sitting on the category's FILL; this
   block has none, and a light-on-light or dark-on-dark pair would make the words disappear in one of the two themes. */
.c2-ev.is-request { background: transparent; border: 1.5px dashed var(--accent-strong); cursor: pointer; }
.c2-ev.is-request .en, .c2-ev.is-request .et--tight .nm { color: var(--text); font-weight: 500; }
.c2-ev.is-request .et, .c2-ev.is-request .et .tm { color: var(--text-muted); }
.c2-ev.is-request:hover, .c2-ev.is-request:focus-visible { border-color: var(--text); background: var(--surface); }
/* ⚠️ 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; }
/* "Requested · Ann": dashed, like the mark on the week grid. The words say it; the edge agrees. */
.c2-mday .mev.is-request { border: 1px dashed var(--accent-strong); border-radius: 3px; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; }
.c2-mday .mev .wd.w-done { color: var(--green-text); }
.c2-mday .mev .wd.w-noshow, .c2-mday .mev .wd.w-notcovered { 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; }
/* The request peek: what to know before answering, one quiet line each (the server's own sentences), then the two answers.
   No coloured edge on anything; the words do the work. */
.c2-req-line { margin-top: 7px; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; overflow-wrap: anywhere; }
.c2-req-line.is-warn { color: var(--text); }
.c2-req-busy { padding: 8px 15px; font-size: var(--fs-sm); color: var(--text-muted); }
.c2-peek-do button.c2-req-go { font-weight: 600; }
.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); }
.c2-join-note { font-size: 12px; line-height: 1.45; color: var(--text-muted); text-align: center; margin-top: 7px; }
/* The exit interview's Client line, under Join. Colour is never the only
   signal here: Change / Pick the client are WORDS, not a coloured dot. */
.c2-xi-client { display: flex; align-items: center; gap: 10px; margin-top: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.c2-xi-client .k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); }
.c2-xi-client .v { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c2-xi-client .v.is-none { font-weight: 400; color: var(--text-muted); }
.c2-xi-client button { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-sm);
  font-weight: 500; color: var(--accent); cursor: pointer; white-space: nowrap; }
.c2-xi-client button:hover { text-decoration: underline; }
/* "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); }
/* ⚠️ SHARED WITH THE CREATE SHEET ON PURPOSE. Busy/Free is the same decision in
   both places and has to look and read the same in both, or the coach learns it
   twice. These were scoped to the peek while it was the only surface that could
   set it; the create form can now set it too, before the event exists. */
.c2-peek-busy .seg, .c2-sheet .seg { display: flex; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden; }
.c2-peek-busy .seg button, .c2-sheet .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, .c2-sheet .seg button:hover { background: var(--hover-overlay); color: var(--text); }
.c2-peek-busy .seg button[aria-pressed="true"], .c2-sheet .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; }

/* ── CALENDAR — LIGHT MODE ────────────────────────────────────────
   The calendar's token block (top of this section) is dark-only, so under
   light mode the week grid stayed a dark slab beside a light rail and toolbar.
   This is its light half, for the SAME selector list (the view and every
   body-mounted overlay — keep the two lists in step; token-scope.test.mjs
   guards the dark one). Event blocks keep their category fills: those pick
   their own text colour by luminance and read on either ground. */
[data-theme="light"] #view-calendar,
[data-theme="light"] .tdy,
[data-theme="light"] .c2-peek, [data-theme="light"] .c2-sheet-wrap,
[data-theme="light"] #c2-client-list,
[data-theme="light"] [data-c2-create-modal],
[data-theme="light"] #c2-dropped, [data-theme="light"] #c2-drag, [data-theme="light"] #c2-cmd, [data-theme="light"] #c2-undo {
  --bg: #f1f4f9;
  --surface: #ffffff;
  --surface-2: #f5f7fb;
  --surface-3: #e8edf4;
  --surface-hover: #edf1f7;
  --border: #dde3ed;
  --border-strong: #c3ccd9;
  --border-light: #edf1f7;
  --hover-overlay: rgba(15, 23, 42, 0.035);

  --text: #1e293b;
  --text-muted: #64748b;
  --text-subtle: #768296;
  --text-dim: #8c97a8;
  --c2-quiet: rgba(15, 23, 42, 0.025);

  --primary-dim: rgba(37, 87, 214, 0.10);
  --accent-strong: #2557d6;
  --accent-dim: rgba(37, 87, 214, 0.10);

  --success: #059669;  --warning: #d97706;  --danger: #dc2626;  --info: #2557d6;
  --green-dim: rgba(16, 185, 129, 0.12);  --green-text: #047857;
  --amber-dim: rgba(245, 158, 11, 0.14);  --amber-text: #b45309;
  --red-dim: rgba(239, 68, 68, 0.10);     --red-text: #dc2626;
}
/* white-alpha stripes and grounds vanish on white — same marks, drawn in ink */
[data-theme="light"] .c2-buffer .b { background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(15, 23, 42, 0.07) 4px 8px); }
[data-theme="light"] .c2-ev.is-buffer { background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(15, 23, 42, 0.06) 4px 8px); }
[data-theme="light"] .c2-col-h.is-quiet { background: rgba(15, 23, 42, 0.025); }
[data-theme="light"] .c2-mday.is-off { background: rgba(15, 23, 42, 0.03); }
[data-theme="light"] .c2-row-sw::before { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.14); }
/* light-on-dark status inks */
[data-theme="light"] .c2-cat-warn { color: #b45309; }
[data-theme="light"] .c2-movetip.is-void { border-color: #dc2626; color: #dc2626; }
[data-theme="light"] .c2-create-err { color: #dc2626; }
/* floating layers: a soft lift instead of the dark theme's black drop */
[data-theme="light"] .c2-sheet-wrap { background: rgba(15, 23, 42, 0.38); }
[data-theme="light"] .c2-cxmenu,
[data-theme="light"] .c2-tzmenu,
[data-theme="light"] .c2-peek { box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16); }
[data-theme="light"] .c2-cancel { box-shadow: 0 24px 70px rgba(15, 23, 42, 0.2); }
[data-theme="light"] .c2-nametip,
[data-theme="light"] .c2-combo-list,
[data-theme="light"] .c2-movetip { box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12); }
[data-theme="light"] .c2-ev.is-dragging { box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.25); }
[data-theme="light"] .c2-seg button[aria-pressed="true"] { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12); }

/* ── 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; }

/* ── Recent weigh-ins under the weight chart (client profile › Progress) ──
   Flat rows, the number in tabular figures, a pencil that turns the number
   into a box in place. No borders on the rows: the hairline between them is
   the only rule, like every other list on this page. */
.prog-weight-entries { padding: 4px 20px 16px; }
.prog-entries-lab { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 500; margin: 10px 0 4px; }
.prog-entry { display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.prog-entry:last-child { border-bottom: 0; }
.prog-entry-date { flex: 1; color: var(--text-muted); }
.prog-entry-val { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; }
.prog-entry-val i { font-style: normal; color: var(--text-subtle); font-weight: 400; }
.prog-entry-edit { background: transparent; border: 0; color: var(--text-subtle); cursor: pointer;
  padding: 2px 6px; border-radius: var(--radius-sm); font-size: 13px; }
.prog-entry-edit:hover { color: var(--text); background: var(--hover-overlay, rgba(255,255,255,.04)); }
.prog-entry-remove { background: transparent; border: 0; color: var(--text-subtle); cursor: pointer;
  padding: 2px 6px; border-radius: var(--radius-sm); font-size: 15px; line-height: 1; }
.prog-entry-remove:hover { color: var(--text); background: var(--hover-overlay, rgba(255,255,255,.04)); }
.prog-entry-input { width: 84px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: var(--fs-sm);
  padding: 5px 8px; font-variant-numeric: tabular-nums; }
.prog-entry-input:focus { outline: none; border-color: var(--primary); }
.prog-entry .btn-primary, .prog-entry .btn-secondary { padding: 5px 10px; font-size: var(--fs-xs); }

/* ============================================================
   SCRIBE™ — the meeting library, workspace and context rail
   ============================================================
   Moved verbatim from the approved mockup (apps/crm/dashboard/_mockups/
   scribe.html, gitignored). Every colour is a token and every size is on
   the type scale, so this block moves with the palette.

   ⚠️ .sc-row-sum and .sc-tile-s use var(--text-muted), NOT --text-subtle.
   #6F7C8D measures 3.82:1 on an elevated row, under the 4.5 AA floor, and
   the coach is colourblind. --text-subtle is for separators and icon tints
   only — never for anything a coach has to read.

   ⚠️ Status is never carried by colour alone: every .sc-pill also carries
   its own word, and Failed and Processing carry a glyph as well.
   ============================================================ */
/* ══════════════════════════════════════════════════════════════════
2. SCRIBE LAYOUT
══════════════════════════════════════════════════════════════════ */
/* ── Toolbar ─────────────────────────────────────────────────── */
.sc-tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:16px; }
.sc-tab {
  padding:9px 16px; background:none; border:none; border-bottom:2px solid transparent;
  margin-bottom:-1px; color:var(--text-muted); font-size:var(--fs-base);
  font-weight:500; cursor:pointer; transition:color .15s, border-color .15s;
}
.sc-tab:hover { color:var(--text); }
.sc-tab.is-active { color:var(--text); border-bottom-color:var(--primary); }
.sc-tab-note {
  margin-left:6px; font-size:10px; font-weight:600; letter-spacing:.04em;
  color:var(--text-subtle); border:1px solid var(--border);
  border-radius:20px; padding:1px 6px; vertical-align:1px;
}
.sc-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:14px; }
.sc-search { position:relative; flex:1; min-width:0; }
.sc-search svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-subtle); }
.sc-search input {
  width:100%; box-sizing:border-box; padding:8px 12px 8px 34px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text); font-size:var(--fs-base);
  font-family:inherit;
}
.sc-search input::placeholder { color:var(--text-subtle); }
.sc-search input:focus { outline:none; border-color:var(--primary); }
.sc-kbd {
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-size:11px; color:var(--text-subtle); border:1px solid var(--border);
  border-radius:3px; padding:1px 5px; background:var(--bg); pointer-events:none;
}
.sc-ctl {
  display:inline-flex; align-items:center; gap:6px; padding:8px 11px;
  background:transparent; border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text-muted); font-size:var(--fs-sm); font-weight:500;
  cursor:pointer; white-space:nowrap; font-family:inherit; transition:color .15s, border-color .15s, background .15s;
}
.sc-ctl:hover { color:var(--text); background:var(--surface-2); }
.sc-ctl.is-on { color:var(--text); border-color:var(--primary); background:var(--primary-dim); }

/* ⚠️ upgradeSelects() replaces each <select> with a .custom-select that is
   width:100%. In a flex row that made all three dropdowns 574px each and
   crushed the search box to ZERO — measured on the real page. Pin them to
   their content and let search take what is left. */
.sc-toolbar .custom-select { width:auto; flex:0 0 auto; min-width:118px; }
.sc-toolbar .custom-select-trigger { padding:8px 11px; white-space:nowrap; }
.sc-toolbar .sc-search { flex:1 1 240px; min-width:160px; }
/* Below this the three dropdowns and the search cannot share one line. */
@media (max-width:1100px) {
  .sc-toolbar { flex-wrap:wrap; }
  .sc-toolbar .sc-search { flex:1 1 100%; }
}
.sc-ctl-count {
  background:var(--primary); color:#fff; border-radius:20px;
  font-size:10px; font-weight:600; padding:0 5px; min-width:14px; text-align:center;
}
/* ── Three panes ─────────────────────────────────────────────── */
.sc-split {
  display:grid; grid-template-columns:340px minmax(0,1fr) 320px;
  gap:0; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); overflow:hidden;
  height:calc(100vh - 232px); min-height:520px;
}
.sc-pane { min-width:0; overflow-y:auto; overflow-x:hidden; }
.sc-pane--list { border-right:1px solid var(--border); background:var(--bg); }
.sc-pane--rail { border-left:1px solid var(--border); background:var(--bg); }
.sc-pane::-webkit-scrollbar { width:10px; }
.sc-pane::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08); border-radius:5px; border:3px solid transparent; background-clip:content-box; }
.sc-pane::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.16); background-clip:content-box; }
/* ── List ────────────────────────────────────────────────────── */
.sc-group {
  position:sticky; top:0; z-index:2;
  padding:10px 16px 6px; font-size:11px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-subtle);
  background:var(--bg); backdrop-filter:saturate(1.2);
}
.sc-row {
  display:block; width:100%; text-align:left; font-family:inherit;
  padding:10px 16px 11px; background:transparent; border:none;
  border-bottom:1px solid var(--border-light); cursor:pointer;
  position:relative; transition:background .12s;
}
.sc-row:hover { background:var(--surface-2); }
.sc-row.is-active { background:var(--primary-dim); }
.sc-row.is-active::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 2px 0 0 var(--primary);
}
.sc-row.is-muted { opacity:.5; }
.sc-row.is-muted:hover { opacity:.75; }
.sc-row:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.sc-row-top { display:flex; align-items:flex-start; gap:8px; }
.sc-row-title {
  flex:1; min-width:0; font-size:var(--fs-base); font-weight:500; color:var(--text);
  line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sc-row-meta {
  margin-top:3px; font-size:var(--fs-xs); color:var(--text-muted);
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.sc-row-meta .sc-dot { color:var(--text-subtle); }
/* --text-muted, not --text-subtle: this is content the coach reads to find a
meeting. #6F7C8D scores 3.82 on an elevated row, under the 4.5 AA floor. */
.sc-row-sum {
  margin-top:5px; font-size:var(--fs-xs); color:var(--text-muted); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sc-row-foot { margin-top:7px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
/* Compact density — drops the summary line. The list stays usable at 1,000+. */
.sc-split.is-compact .sc-row-sum { display:none; }
.sc-split.is-compact .sc-row { padding:8px 16px 9px; }
.sc-split.is-compact .sc-row-foot { margin-top:6px; }
/* Status pill — one per row. Colour is never the only signal: each pill
carries its own word, and Failed/Processing also carry a glyph. */
.sc-pill {
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:600; letter-spacing:.03em;
  padding:2px 8px; border-radius:20px; white-space:nowrap;
}
.sc-pill--ready     { background:var(--success-dim); color:var(--success); }
.sc-pill--working   { background:var(--warning-dim); color:var(--warning); }
.sc-pill--failed    { background:var(--danger-dim);  color:var(--danger); }
.sc-pill--cancelled { background:rgba(255,255,255,.05); color:var(--text-subtle); }
/* Action-item count is a quiet chip, not a second loud pill. */
.sc-chip {
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:500; padding:2px 8px; border-radius:20px;
  background:var(--surface-2); color:var(--text-muted);
}
.sc-chip b { color:var(--text); font-weight:600; }
.sc-type { font-size:10px; font-weight:500; color:var(--text-subtle); letter-spacing:.03em; }
.sc-more { padding:14px 16px 20px; text-align:center; }
/* ── Detail ──────────────────────────────────────────────────── */
.sc-detail { padding:20px 24px 32px; }
.sc-detail-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:2px; }
.sc-detail-head h2 {
  flex:1; min-width:0; margin:0; font-size:var(--fs-xl); font-weight:600;
  letter-spacing:-.015em; color:var(--text); line-height:1.3;
}
.sc-iconbtn {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:var(--radius-sm);
  background:transparent; border:none; color:var(--text-subtle); cursor:pointer;
  transition:color .15s, background .15s;
}
.sc-iconbtn:hover { color:var(--text); background:var(--surface-2); }
.sc-detail-meta {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin-top:9px; font-size:var(--fs-sm); color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.sc-avatar {
  width:22px; height:22px; border-radius:50%; background:var(--navy);
  border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:600; color:var(--text-muted); flex:none; letter-spacing:.02em;
}
.sc-avatar--lg { width:38px; height:38px; font-size:12px; }
.sc-dtabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin:18px 0 22px; }
.sc-dtab {
  padding:8px 13px; background:none; border:none; border-bottom:2px solid transparent;
  margin-bottom:-1px; color:var(--text-muted); font-size:var(--fs-sm); font-weight:500;
  cursor:pointer; font-family:inherit; transition:color .15s, border-color .15s;
}
.sc-dtab:hover { color:var(--text); }
.sc-dtab.is-active { color:var(--text); border-bottom-color:var(--primary); }
.sc-sec { margin-bottom:26px; }
.sc-sec-head { display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.sc-sec-head h3 {
  margin:0; font-size:var(--fs-xs); font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-muted); flex:1;
}
.sc-sec-head svg { color:var(--text-subtle); flex:none; }
.sc-sec p { margin:0; font-size:var(--fs-base); line-height:1.62; color:var(--text-muted); }
.sc-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.sc-decision {
  display:flex; gap:10px; align-items:flex-start; padding:7px 0;
  font-size:var(--fs-base); line-height:1.5; color:var(--text-muted);
}
.sc-decision svg { color:var(--success); flex:none; margin-top:3px; }
.sc-ai {
  display:flex; gap:10px; align-items:flex-start; padding:9px 10px; margin:0 -10px;
  border-radius:var(--radius-sm); transition:background .12s;
}
.sc-ai:hover { background:var(--surface-2); }
/* Nothing is ticked by default. Scribe heard these; the coach decides which
are theirs. On a group call the summariser will happily attribute someone
else's commitment, so the owner is on every line and never pre-selected. */
.sc-ai-box {
  flex:none; margin-top:0; width:18px; height:18px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.sc-ai-tick {
  appearance:none; -webkit-appearance:none; margin:0;
  width:15px; height:15px; border-radius:3px; cursor:pointer;
  border:1.5px solid var(--text-subtle); background:transparent;
  display:inline-flex; align-items:center; justify-content:center;
}
.sc-ai-tick:hover { border-color:var(--text-muted); }
.sc-ai-tick:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
.sc-ai-tick:checked { background:var(--primary); border-color:var(--primary); }
.sc-ai-tick:checked::after {
  content:''; width:4px; height:8px; margin-top:-2px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
/* Already a task — locked, because the task itself now owns its state. */
.sc-ai-box.is-locked { color:var(--success); cursor:default; }
.sc-ai.is-added .sc-ai-text { color:var(--text-muted); }
.sc-ai-body { flex:1; min-width:0; }
.sc-ai-text { font-size:var(--fs-base); color:var(--text); line-height:1.45; }
.sc-ai-meta {
  margin-top:4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:var(--fs-xs); color:var(--text-subtle);
}
.sc-owner { color:var(--text-muted); }
.sc-owner--you { color:var(--accent-strong); font-weight:500; }
.sc-owner--none { font-style:italic; }
.sc-ai-added {
  display:inline-flex; align-items:center; gap:5px;
  font-size:var(--fs-xs); font-weight:500; color:var(--success);
}
.sc-ai-hint {
  margin:-4px 0 10px; font-size:var(--fs-xs); color:var(--text-muted);
}
.sc-add-btn { flex:none; padding:5px 11px; font-size:11px; }
.sc-add-btn:disabled { opacity:.45; cursor:default; }
.sc-add-btn:disabled:hover { color:var(--text-muted); background:transparent; }
.sc-moment {
  display:flex; gap:11px; align-items:flex-start; width:100%; text-align:left;
  padding:8px 10px; margin:0 -10px; border:none; background:transparent;
  border-radius:var(--radius-sm); cursor:pointer; font-family:inherit; transition:background .12s;
}
.sc-moment:hover { background:var(--surface-2); }
.sc-moment-play {
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--primary-dim); color:var(--accent-strong);
  display:inline-flex; align-items:center; justify-content:center; margin-top:1px;
}
.sc-moment:hover .sc-moment-play { background:var(--primary); color:#fff; }
.sc-moment-at {
  flex:none; width:42px; font-size:var(--fs-xs); font-weight:600; color:var(--text-muted);
  font-variant-numeric:tabular-nums; margin-top:4px;
}
.sc-moment-note { flex:1; min-width:0; font-size:var(--fs-sm); color:var(--text); line-height:1.45; }
.sc-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sc-tile {
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius); padding:13px 14px;
}
.sc-tile-n {
  font-size:var(--fs-3xl); font-weight:600; line-height:1; letter-spacing:-.02em;
  color:var(--text); font-variant-numeric:tabular-nums;
}
.sc-tile-l { margin-top:7px; font-size:var(--fs-sm); font-weight:500; color:var(--text); }
.sc-tile-s { margin-top:3px; font-size:var(--fs-xs); color:var(--text-muted); line-height:1.45; }
/* ── Rail ────────────────────────────────────────────────────── */
.sc-rail-sec { padding:16px; border-bottom:1px solid var(--border); }
.sc-rail-head {
  display:flex; align-items:center; gap:7px; margin-bottom:11px;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-muted);
}
.sc-rail-head svg { color:var(--text-subtle); }
.sc-rail-head .sc-link { margin-left:auto; text-transform:none; letter-spacing:0; }
.sc-link {
  background:none; border:none; padding:0; font-family:inherit; cursor:pointer;
  font-size:var(--fs-xs); font-weight:500; color:var(--accent-strong);
}
.sc-link:hover { text-decoration:underline; }
.sc-video {
  position:relative; aspect-ratio:16/9; border-radius:var(--radius);
  overflow:hidden; background:var(--navy); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
/* Fullscreen: the browser paints its own black ground, so the frame gives up
   its rounded corners and its aspect lock and simply fills. */
.sc-video:fullscreen { aspect-ratio:auto; width:100vw; height:100vh; border:none; border-radius:0; }
.sc-video:fullscreen video { object-fit:contain; }
.sc-video-poster {
  position:absolute; inset:0;
  background: var(--navy);
}
/* ⚠️ `display:flex` in an author stylesheet BEATS the UA's [hidden] rule, so
   the big play button stayed on screen for the whole recording. Anything here
   that gets hidden by attribute needs to say so itself. */
.sc-video-play[hidden], .sc-video-poster[hidden] { display:none !important; }
.sc-video-play {
  position:relative; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--bg); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s;
}
.sc-video-play:hover { transform:scale(1.06); }
/* The recessed groove. Track 8px, fill 4px, centred, 2px inset. */
.sc-groove {
  height:8px; border-radius:20px; background:var(--groove); cursor:pointer;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.035);
  display:flex; align-items:center; padding:0 2px; position:relative;
}
.sc-groove-fill { height:4px; border-radius:20px; background:var(--primary); }
.sc-groove-knob {
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.5); opacity:0; transition:opacity .15s;
}
.sc-groove:hover .sc-groove-knob { opacity:1; }
.sc-player-times {
  display:flex; justify-content:space-between; margin-top:7px;
  font-size:11px; color:var(--text-subtle); font-variant-numeric:tabular-nums;
}
.sc-player-ctl { display:flex; align-items:center; gap:4px; margin-top:9px; }
.sc-player-ctl .sc-spacer { flex:1; }
.sc-pbtn {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:var(--radius-sm); background:transparent;
  border:none; color:var(--text-muted); cursor:pointer; transition:color .15s, background .15s;
}
.sc-pbtn:hover { color:var(--text); background:var(--surface-2); }
.sc-pbtn--main {
  width:34px; height:34px; border-radius:50%; background:var(--primary); color:#fff;
}
.sc-pbtn--main:hover { background:var(--primary-hover); color:#fff; }
.sc-rate {
  font-size:11px; font-weight:600; color:var(--text-muted); background:transparent;
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 7px;
  cursor:pointer; font-family:inherit; font-variant-numeric:tabular-nums;
}
.sc-rate:hover { color:var(--text); }
/* ⚠️ A resting person row is a BUTTON — the whole row opens the picker, so it
   needs the reset. Values match .sc-prev so the rail's two clickable rows
   behave identically. .sc-record is used only by scribe/rail.js. */
.sc-record {
  display:flex; align-items:center; gap:11px;
  width:100%; text-align:left; background:transparent; border:none;
  padding:8px 10px; margin:0 -10px; border-radius:var(--radius-sm);
  font-family:inherit; cursor:pointer; transition:background .12s;
}
.sc-record:hover, .sc-record:focus-visible { background:var(--surface-2); }
.sc-record-go { flex:none; color:var(--text-subtle); transition:color .15s; }
.sc-record:hover .sc-record-go,
.sc-record:focus-visible .sc-record-go { color:var(--accent-strong); }
.sc-record-body { flex:1; min-width:0; }
.sc-record-name { font-size:var(--fs-base); font-weight:500; color:var(--text); display:flex; align-items:center; gap:7px; }
.sc-record-sub { margin-top:2px; font-size:var(--fs-xs); color:var(--text-subtle); }
.sc-badge {
  font-size:10px; font-weight:600; padding:1px 7px; border-radius:20px;
  background:var(--primary-dim); color:var(--accent-strong);
}
.sc-badge--client { background:var(--success-dim); color:var(--success); }
/* One person on the call, with the bucket you can change. */
.sc-person + .sc-person { margin-top:16px; padding-top:16px; border-top:1px solid var(--border-light); }
.sc-person-ctl { display:flex; gap:6px; align-items:center; margin-top:10px; }
.sc-person-note { margin-top:7px; font-size:var(--fs-xs); color:var(--text-muted); line-height:1.5; }
.sc-prev {
  display:flex; gap:10px; align-items:center; width:100%; text-align:left;
  padding:8px 10px; margin:0 -10px; background:transparent; border:none;
  border-radius:var(--radius-sm); cursor:pointer; font-family:inherit; transition:background .12s;
}
.sc-prev:hover { background:var(--surface-2); }
.sc-prev-ic { flex:none; color:var(--text-subtle); }
.sc-prev:hover .sc-prev-ic { color:var(--accent-strong); }
.sc-prev-body { flex:1; min-width:0; }
.sc-prev-t {
  font-size:var(--fs-sm); color:var(--text); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sc-prev-s { margin-top:2px; font-size:var(--fs-xs); color:var(--text-subtle); font-variant-numeric:tabular-nums; }
.sc-meta-row { display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:var(--fs-xs); }
.sc-meta-row dt { color:var(--text-subtle); }
.sc-meta-row dd { margin:0; color:var(--text-muted); text-align:right; font-variant-numeric:tabular-nums; }
/* ── Failure / processing / empty ────────────────────────────── */
.sc-fail {
  background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.22);
  border-radius:var(--radius); padding:15px 16px;
}
.sc-fail-t { display:flex; align-items:center; gap:8px; font-size:var(--fs-base); font-weight:500; color:var(--text); }
.sc-fail-t svg { color:var(--danger); flex:none; }
.sc-fail-p { margin:7px 0 0; font-size:var(--fs-sm); color:var(--text-muted); line-height:1.55; }
.sc-fail-acts { margin-top:13px; display:flex; gap:8px; }
.sc-steps { list-style:none; margin:0; padding:0; }
.sc-step { display:flex; align-items:center; gap:10px; padding:6px 0; font-size:var(--fs-sm); color:var(--text-subtle); }
.sc-step-dot {
  width:15px; height:15px; border-radius:50%; flex:none; border:1.5px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center; color:transparent;
}
.sc-step.is-done { color:var(--text-muted); }
.sc-step.is-done .sc-step-dot { background:var(--success); border-color:var(--success); color:#06210f; }
.sc-step.is-now { color:var(--text); font-weight:500; }
.sc-step.is-now .sc-step-dot { border-color:var(--warning); border-style:solid; position:relative; }
.sc-step.is-now .sc-step-dot::after {
  content:''; width:6px; height:6px; border-radius:50%; background:var(--warning);
  animation:scpulse 1.6s ease-in-out infinite;
}
@keyframes scpulse { 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion:reduce){ .sc-step.is-now .sc-step-dot::after { animation:none } }
.sc-empty { padding:56px 28px; text-align:center; }
.sc-empty-ic { color:var(--text-subtle); opacity:.5; margin-bottom:14px; }
.sc-empty h3 { margin:0 0 6px; font-size:var(--fs-lg); font-weight:500; color:var(--text); }
.sc-empty p { margin:0 auto 18px; font-size:var(--fs-sm); color:var(--text-subtle); max-width:320px; line-height:1.6; }
/* ── Send Scribe modal ───────────────────────────────────────── */
.sc-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9000;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.sc-overlay[hidden] { display:none; }
.sc-modal {
  width:min(460px,100%); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 16px 48px rgba(0,0,0,.5);
}
.sc-modal-head {
  display:flex; align-items:center; padding:16px 18px; border-bottom:1px solid var(--border);
}
.sc-modal-head h2 { margin:0; flex:1; font-size:var(--fs-lg); font-weight:600; color:var(--text); letter-spacing:-.01em; }
.sc-modal-body { padding:18px; }
.sc-field { margin-bottom:15px; }
.sc-field label { display:block; margin-bottom:6px; font-size:var(--fs-sm); font-weight:500; color:var(--text-muted); }
.sc-field input {
  width:100%; box-sizing:border-box; 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); font-family:inherit;
}
.sc-field input:focus { outline:none; border-color:var(--primary); }
.sc-field input::placeholder { color:var(--text-subtle); }
.sc-detect {
  margin-top:7px; display:flex; align-items:center; gap:6px;
  font-size:var(--fs-xs); color:var(--success); min-height:16px;
}
.sc-detect.is-idle { color:var(--text-subtle); }
.sc-modal-foot {
  display:flex; justify-content:flex-end; gap:8px; padding:14px 18px;
  border-top:1px solid var(--border);
}
@media (max-width:1400px) {
  .sc-split { grid-template-columns:300px minmax(0,1fr) 290px; }
}
/* The shortcut hint costs more room than it earns once space is tight. */
@media (max-width:1000px) { .sc-kbd { display:none; } }
@media (max-width:1180px) {
  .sc-split { grid-template-columns:290px minmax(0,1fr); }
  .sc-pane--rail { display:none; }
}
@media (max-width:860px) {
  .sc-split { grid-template-columns:1fr; height:auto; min-height:0; }
  .sc-pane--list { border-right:none; border-bottom:1px solid var(--border); max-height:340px; }
}

/* ── Transcript tab ──────────────────────────────────────────────
   The approved mockup drew the Transcript BUTTON but never the panel
   behind it, so these rules are new. They follow the same grammar as the
   rest of Scribe: a row with a hover fill, a hairline between rows, no
   box around anything, and one accent for "you are here".

   ⚠️ .sc-cue-text is var(--text), not --text-subtle. A transcript is the
   densest reading on the page; #6F7C8D is 3.82:1 on an elevated row. */
.sc-tx { display:flex; flex-direction:column; min-height:0; }
.sc-tx .sc-toolbar { margin-bottom:10px; }
/* The transcript's own search box reuses .sc-search's frame; this is the
   input inside it, matching .sc-search input exactly so the two are one
   control, not two that merely look alike. */
.sc-tx-q {
  width:100%; box-sizing:border-box; padding:8px 12px 8px 34px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text);
  font-size:var(--fs-base); font-family:inherit;
}
.sc-tx-q::placeholder { color:var(--text-subtle); }
.sc-tx-q:focus { outline:none; border-color:var(--primary); }
.sc-tx-q::-webkit-search-cancel-button { filter:grayscale(1) opacity(.6); }

.sc-tx-count {
  flex:none; font-size:var(--fs-xs); color:var(--text-muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.sc-tx-list { overflow-y:auto; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { .sc-tx-list { scroll-behavior:auto; } }
.sc-tx-empty {
  padding:28px 4px; text-align:center;
  font-size:var(--fs-sm); color:var(--text-muted);
}

.sc-cue {
  display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left;
  padding:8px 10px; margin:0 -10px; border:none; background:transparent;
  border-radius:var(--radius-sm); cursor:pointer; font-family:inherit;
  transition:background .12s, opacity .12s; position:relative;
}
.sc-cue:hover { background:var(--surface-2); }
.sc-cue:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
/* Already played: quieter, but never below the reading floor. */
.sc-cue.is-past { opacity:.62; }
/* Where the recording is now. A left bar as well as a wash, because a wash
   alone is a colour-only signal. */
.sc-cue.is-active { background:var(--primary-dim); opacity:1; }
.sc-cue.is-active::before {
  content:''; position:absolute; left:0; top:6px; bottom:6px;
  width:2px; border-radius:2px; background:var(--accent-strong);
}
.sc-cue-at {
  flex:none; width:44px; padding-top:2px;
  font-size:var(--fs-xs); font-weight:600; color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.sc-cue.is-active .sc-cue-at { color:var(--accent-strong); }
.sc-cue-body { flex:1; min-width:0; }
.sc-cue-spk {
  display:block; font-size:var(--fs-xs); font-weight:600;
  color:var(--text-muted); margin-bottom:2px;
}
.sc-cue-text {
  display:block; font-size:var(--fs-sm); line-height:1.6; color:var(--text);
}
.sc-cue-text mark {
  background:var(--warning-dim); color:var(--text);
  border-radius:2px; padding:0 1px;
}
/* Secondary actions stay out of the way until the row is reached. */
.sc-cue-acts {
  flex:none; display:flex; gap:2px; opacity:0; transition:opacity .12s;
}
.sc-cue:hover .sc-cue-acts,
.sc-cue:focus-within .sc-cue-acts { opacity:1; }
@media (hover:none) { .sc-cue-acts { opacity:1; } }

/* ══════════════════════════════════════════════════════════════════════
   SOFTER LOOK — the Scribe page (Clayton, 2026-10-13)
   Built from the approved prototype mockups/scribe-softer-2026-10-13.html.
   The scale every softer page uses: 16px panels · 12px inner panels, rows,
   tiles and menus (8px choices inside) · 10px buttons and inputs · round
   pills for status. Thin lines between rows STAY (his 10/5 pick).
   Scoped to #view-scribe like .cp2 and the Inbox block; the menus and the
   windows live on <body>, so they carry their own sizes.
   ⚠️ ORDER MATTERS. Several pairs tie on specificity (.sc-pane then
   .sc-pane--list, :hover then .is-active): never reorder or merge rules.
   ══════════════════════════════════════════════════════════════════════ */
#view-scribe {
  --radius: 16px; --radius-sm: 10px;
  /* Status words on light step down to the 700 shade (the 500s measure 2–3:1
     on white); tints and dots stay at 500. Same rule as the client profile. */
  --sc-ok: #22c55e; --sc-bad: #f87171; --sc-warn: #f59e0b;
  --sc-ring: 0 0 0 3px var(--primary-dim);
  --sc-menu-shadow: 0 12px 32px rgba(0,0,0,.5);
  --sc-rule: var(--border-light);
  display: flex; flex-direction: column;
  flex: 1 1 0; min-height: 640px;
  padding: 28px 40px 28px;
}
[data-theme="light"] #view-scribe {
  --sc-ok: #047857; --sc-bad: #b91c1c; --sc-warn: #b45309;
  --text-muted: #556377;   /* #64748b is 4.32:1 on the grey grounds inside this page; this is 5.5:1 */
  --sc-menu-shadow: 0 10px 28px rgba(15,23,42,.14);
  --sc-rule: #e8edf4;
}
#view-scribe button { font-family: inherit; }
#view-scribe :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#view-scribe [hidden] { display: none !important; }
:root:not([data-theme="light"]) #view-scribe :focus-visible,
:root:not([data-theme="light"]) #view-scribe .sc-ai:has(input:focus-visible) { outline-color: var(--accent-strong); }
:root:not([data-theme="light"]) #view-scribe .sc-tab.is-active .sc-tab-count,
:root:not([data-theme="light"]) #view-scribe .sc-src.is-on,
:root:not([data-theme="light"]) #view-scribe .sc-composer:focus-within,
:root:not([data-theme="light"]) #view-scribe .sc-search input:focus,
:root:not([data-theme="light"]) #view-scribe .sc-row.is-active,
:root:not([data-theme="light"]) #view-scribe .custom-select-trigger[aria-expanded="true"] { border-color: var(--accent-strong); }
:root:not([data-theme="light"]) #view-scribe .sc-row.is-active { box-shadow: inset 0 0 0 1px var(--accent-strong); }

/* ── Header ─────────────────────────────────────────────────────────── */
#view-scribe .view-header { margin-bottom: 22px; }
#view-scribe .btn-primary,
#view-scribe .sc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 10px; line-height: 18px;
  font-size: var(--fs-base); font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
#view-scribe .sc-btn {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
}
#view-scribe .sc-btn:hover { background: var(--surface-hover); }
#view-scribe .sc-btn:disabled { opacity: .45; cursor: not-allowed; }
#view-scribe .sc-btn--sm { height: 32px; padding: 0 12px; font-size: var(--fs-sm); gap: 6px; }

/* ── Tabs + toolbar share one row ───────────────────────────────────── */
#view-scribe .sc-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
#view-scribe .sc-tabs {
  display: inline-flex; gap: 2px; margin: 0; padding: 3px; flex: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
#view-scribe .sc-tab {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 14px; margin: 0; border: 0; border-radius: 10px;
  color: var(--text-muted); font-size: var(--fs-base); font-weight: 500;
  transition: background .15s, color .15s;
}
#view-scribe .sc-tab:hover { background: var(--surface-hover); color: var(--text); }
#view-scribe .sc-tab.is-active { background: var(--primary-dim); color: var(--primary); font-weight: 600; }
[data-theme="light"] #view-scribe .sc-tab.is-active { background: rgba(37,87,214,.08); }
:root:not([data-theme="light"]) #view-scribe .sc-tab.is-active { color: var(--accent-strong); }
#view-scribe .sc-tab svg { opacity: .8; }
#view-scribe .sc-tab-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-muted); font-size: 11px; font-weight: 600;
}
#view-scribe .sc-tab.is-active .sc-tab-count { background: var(--surface); color: var(--primary); }

#view-scribe .sc-toolbar { flex: 1 1 520px; display: flex; gap: 8px; align-items: center; margin: 0; min-width: 0; }
#view-scribe .sc-search { position: relative; flex: 1 1 240px; min-width: 180px; }
#view-scribe .sc-search > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
#view-scribe .sc-search input {
  width: 100%; height: 38px; padding: 0 40px 0 38px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font: inherit; font-size: var(--fs-base);
  transition: border-color .15s, box-shadow .15s;
}
#view-scribe .sc-search input::placeholder { color: var(--text-muted); }
#view-scribe .sc-search input:focus { outline: none; border-color: var(--primary); box-shadow: var(--sc-ring); }
#view-scribe .sc-kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-2); padding: 0 6px; pointer-events: none;
}
/* The platform dropdown (upgradeSelects' .custom-select), on the softer scale:
   38px trigger with 10px corners · 12px menu with 8px choices · soft ring. */
#view-scribe .sc-toolbar .custom-select { width: auto; flex: 0 0 auto; min-width: 160px; }
#view-scribe .custom-select-trigger {
  height: 38px; gap: 10px; padding: 0 12px 0 13px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font-size: var(--fs-sm); font-weight: 500;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
#view-scribe .custom-select-trigger:hover { background: var(--surface-hover); border-color: var(--border); }
#view-scribe .custom-select-trigger:focus { border-color: var(--border); }
#view-scribe .custom-select-trigger:focus-visible,
#view-scribe .custom-select-trigger[aria-expanded="true"] { outline: none; border-color: var(--primary); box-shadow: var(--sc-ring); }
#view-scribe .custom-select-dropdown {
  padding: 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--sc-menu-shadow);
}
#view-scribe .custom-select-option { padding: 8px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; transition: background .15s; }
#view-scribe .custom-select-option + .custom-select-option { margin-top: 2px; }
#view-scribe .custom-select-option:hover,
#view-scribe .custom-select-option.kb-focus { background: var(--surface-hover); }
#view-scribe .custom-select-option.active { background: var(--primary-dim); color: var(--primary); font-weight: 600; }
[data-theme="light"] #view-scribe .custom-select-option.active { background: rgba(37,87,214,.08); }
:root:not([data-theme="light"]) #view-scribe .custom-select-option.active { color: var(--accent-strong); }

/* ── Three soft panels instead of one ruled card ───────────────────── */
#view-scribe .sc-split {
  flex: 1; min-height: 0; height: auto;
  grid-template-columns: 344px minmax(0, 1fr) 380px; gap: 16px;
  border: 0; border-radius: 0; background: transparent; overflow: visible;
}
#view-scribe .sc-split[data-mode="ask"] { grid-template-columns: minmax(0, 1fr) 360px; }
#view-scribe .sc-split[data-mode="ask"] .sc-pane--list { display: none; }
#view-scribe .sc-pane,
#view-scribe .sc-pane--list,
#view-scribe .sc-pane--rail {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  overflow-y: auto; overflow-x: hidden; min-height: 0;
}
/* The panels scroll without a visible scroll bar (his call, 10/13). */
#view-scribe .sc-pane, #view-scribe .sc-ask-scroll { scrollbar-width: none; }
#view-scribe .sc-pane::-webkit-scrollbar, #view-scribe .sc-ask-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ── The list: every meeting is its own card on a soft tray ─────────── */
#view-scribe .sc-pane--list { padding: 0 10px 12px; background: var(--bg); }
#view-scribe .sc-group {
  margin: 0 -10px; padding: 16px 20px 8px; background: var(--bg);
  font-size: 11px; font-weight: 700; letter-spacing: .07em; color: var(--text-muted);
}
#view-scribe .sc-row {
  margin: 0; padding: 14px 14px 13px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
#view-scribe .sc-row + .sc-row { margin-top: 8px; }
#view-scribe .sc-row:hover { border-color: var(--text-subtle); box-shadow: 0 2px 6px rgba(15,23,42,.06); }
#view-scribe .sc-row.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface)); box-shadow: inset 0 0 0 1px var(--primary); }
#view-scribe .sc-row.is-active::before { box-shadow: none; }      /* no coloured left bar */
#view-scribe .sc-row.is-muted { opacity: 1; }
#view-scribe .sc-row.is-muted .sc-row-title,
#view-scribe .sc-row.is-muted .sc-row-meta { color: var(--text-muted); }
#view-scribe .sc-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
#view-scribe .sc-row-title { font-size: var(--fs-base); font-weight: 600; letter-spacing: -.005em; }
#view-scribe .sc-row-meta { margin-top: 3px; color: var(--text-muted); gap: 6px; }
#view-scribe .sc-row-meta .sc-dot { color: var(--text-subtle); }
#view-scribe .sc-row-sum { margin-top: 6px; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted); }
#view-scribe .sc-row-foot { margin-top: 9px; gap: 6px; }
/* "New": a call Scribe finished that you have not opened yet. A dot AND the
   word, so it never rests on color alone. It goes the moment the call opens. */
#view-scribe .sc-new { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--primary); }
#view-scribe .sc-new i { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
:root:not([data-theme="light"]) #view-scribe .sc-new { color: var(--accent-strong); }

#view-scribe .sc-pill { font-size: 11px; font-weight: 600; letter-spacing: .01em; padding: 3px 9px; border-radius: 999px; gap: 5px; }
#view-scribe .sc-pill--ready   { background: var(--success-dim); color: var(--sc-ok); }
#view-scribe .sc-pill--failed  { background: var(--danger-dim);  color: var(--sc-bad); }
#view-scribe .sc-pill--working { background: var(--warning-dim); color: var(--sc-warn); }
#view-scribe .sc-pill--cancelled { background: var(--surface-2); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }
#view-scribe .sc-pill--join { background: var(--primary-dim); color: var(--primary); }
:root:not([data-theme="light"]) #view-scribe .sc-pill--join { color: var(--accent-strong); }
#view-scribe .sc-pill--skip { background: var(--surface-2); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }
#view-scribe .sc-chip {
  font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; gap: 5px;
  background: var(--surface); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border);
}
#view-scribe .sc-type { font-size: 11px; font-weight: 500; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
#view-scribe .sc-caldot { width: 8px; height: 8px; border-radius: 999px; flex: none; box-shadow: inset 0 0 0 1px rgba(15,23,42,.15); }

/* ── The meeting ────────────────────────────────────────────────────── */
#view-scribe .sc-detail { padding: 28px 32px 40px; max-width: 920px; }
#view-scribe .sc-detail-head { align-items: center; gap: 8px; }
#view-scribe .sc-detail-head h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
#view-scribe .sc-iconbtn { width: 34px; height: 34px; border-radius: 10px; color: var(--text-muted); }
#view-scribe .sc-iconbtn:hover { background: var(--surface-hover); color: var(--text); }
#view-scribe .sc-detail-meta { margin-top: 10px; gap: 8px; color: var(--text-muted); font-size: var(--fs-sm); }
#view-scribe .sc-detail-meta b { color: var(--text); font-weight: 500; }
#view-scribe .sc-avatar { width: 24px; height: 24px; font-size: 10px; background: var(--surface-2); color: var(--text-muted); }
#view-scribe .sc-avatar--lg { width: 36px; height: 36px; font-size: 12px; }


#view-scribe .sc-sec { margin-bottom: 34px; }
#view-scribe .sc-sec-head { gap: 10px; margin-bottom: 14px; }
#view-scribe .sc-sec-head h3 { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--text); }
#view-scribe .sc-sec-ico {
  width: 28px; height: 28px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text-muted);
}
#view-scribe .sc-sec p { font-size: var(--fs-md); line-height: 1.7; color: var(--text); max-width: 72ch; }

#view-scribe .sc-decisions { list-style: none; background: var(--bg); border-radius: 12px; padding: 6px 18px; }
#view-scribe .sc-decision { padding: 12px 0; font-size: var(--fs-base); line-height: 1.6; color: var(--text); gap: 12px; }
#view-scribe .sc-decision + .sc-decision { border-top: 1px solid var(--border); }
#view-scribe .sc-decision svg { color: var(--sc-ok); flex: none; margin-top: 3px; }

#view-scribe .sc-ai-hint { margin: -4px 0 12px; font-size: var(--fs-sm); color: var(--text-muted); }
#view-scribe .sc-ais { list-style: none; display: grid; gap: 8px; }
#view-scribe .sc-ai {
  display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 13px 14px;
  border: 1px solid var(--border); border-radius: 12px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
#view-scribe .sc-ai:hover { background: var(--surface-hover); }
#view-scribe .sc-ai.is-ticked { border-color: var(--primary); background: var(--primary-dim); }
[data-theme="light"] #view-scribe .sc-ai.is-ticked { background: rgba(37,87,214,.05); }
#view-scribe .sc-ai input { position: absolute; opacity: 0; pointer-events: none; }
#view-scribe .sc-ai.is-added { cursor: default; background: var(--bg); border-color: transparent; }
#view-scribe .sc-ai.is-added .sc-tick { background: var(--sc-ok); border-color: var(--sc-ok); }
#view-scribe .sc-ai.is-added .sc-ai-text { color: var(--text-muted); }
#view-scribe .sc-tick {
  width: 18px; height: 18px; border-radius: 6px; flex: none; margin-top: 2px;
  border: 1.5px solid var(--text-subtle); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  transition: background .15s, border-color .15s;
}
[data-theme="light"] #view-scribe .sc-tick { border-color: var(--text-muted); }
#view-scribe .sc-ai.is-ticked .sc-tick { background: var(--primary); border-color: var(--primary); }
#view-scribe .sc-ai:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
#view-scribe .sc-ai-text { font-size: var(--fs-base); line-height: 1.55; color: var(--text); }
#view-scribe .sc-ai-meta { margin-top: 4px; font-size: var(--fs-sm); color: var(--text-muted); }
#view-scribe .sc-ai-meta i { font-style: italic; }

#view-scribe .sc-moments { display: grid; gap: 2px; }
#view-scribe .sc-moment {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
  padding: 10px 12px; margin: 0 -12px; width: calc(100% + 24px);
  background: none; border: 0; border-radius: 12px; cursor: pointer; transition: background .15s;
}
#view-scribe .sc-moment:hover { background: var(--surface-hover); }
#view-scribe .sc-moment.is-playing { background: var(--primary-dim); }
#view-scribe .sc-moment-note { font-size: var(--fs-base); line-height: 1.55; color: var(--text); padding-top: 2px; }
#view-scribe .sc-at {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 26px; padding: 0 10px 0 8px; border-radius: 999px;
  background: var(--primary-dim); color: var(--primary);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
:root:not([data-theme="light"]) #view-scribe .sc-at { color: var(--accent-strong); }
#view-scribe button.sc-at { border: 0; cursor: pointer; }
/* The old page gave these times a fixed column (.sc-cue-at 44px,
   .sc-moment-at 42px); on the pill that cut its background short. */
#view-scribe .sc-cue-at,
#view-scribe .sc-moment-at { width: auto; margin-top: 0; }
#view-scribe .sc-at:hover { background: var(--primary); color: #fff; }
:root:not([data-theme="light"]) #view-scribe .sc-at:hover { color: #fff; }

#view-scribe .sc-fail {
  border-radius: 12px; padding: 18px 20px; background: var(--danger-dim);
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
}
#view-scribe .sc-fail-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
#view-scribe .sc-fail-title svg { color: var(--sc-bad); }
#view-scribe .sc-fail p { margin-top: 6px; font-size: var(--fs-sm); color: var(--text-muted); }
#view-scribe .sc-fail-acts { margin-top: 14px; display: flex; gap: 8px; }
#view-scribe .sc-note {
  margin-top: 12px; display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 12px; background: var(--bg);
  font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55;
}
#view-scribe .sc-note b { color: var(--text); font-weight: 600; }
#view-scribe .sc-linkbtn { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; font-weight: 500; cursor: pointer; }
:root:not([data-theme="light"]) #view-scribe .sc-linkbtn { color: var(--accent-strong); }
#view-scribe .sc-linkbtn:hover { text-decoration: underline; }

/* Transcript */
#view-scribe .sc-cue { display: flex; gap: 14px; padding: 12px; margin: 0 -12px; border-radius: 12px; position: relative; transition: background .15s; }
#view-scribe .sc-cue + .sc-cue { box-shadow: 0 -1px 0 var(--border-light); }
#view-scribe .sc-cue:hover { background: var(--surface-hover); box-shadow: none; }
#view-scribe .sc-cue.is-active { background: var(--primary-dim); opacity: 1; }
#view-scribe .sc-cue.is-active::before { content: none; }      /* no coloured left bar */
#view-scribe .sc-cue.is-active .sc-at { font-weight: 700; }
:root:not([data-theme="light"]) #view-scribe .sc-cue.is-active .sc-at,
:root:not([data-theme="light"]) #view-scribe .sc-moment.is-playing .sc-at { background: var(--surface); }
#view-scribe .sc-cue-body { flex: 1; min-width: 0; }
#view-scribe .sc-cue-spk { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
#view-scribe .sc-cue-text { margin-top: 2px; font-size: var(--fs-base); line-height: 1.65; color: var(--text); }
#view-scribe .sc-cue-text mark { background: var(--warning-dim); color: inherit; border-radius: 4px; padding: 0 2px; }
#view-scribe .sc-cue-acts { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; align-self: flex-start; }
#view-scribe .sc-cue:hover .sc-cue-acts, #view-scribe .sc-cue:focus-within .sc-cue-acts { opacity: 1; }

/* ── The rail ───────────────────────────────────────────────────────── */
#view-scribe .sc-rail-sec { padding: 20px 20px 22px; border-bottom: 1px solid var(--border-light); }
[data-theme="light"] #view-scribe .sc-rail-sec { border-bottom-color: var(--sc-rule); }
#view-scribe .sc-rail-sec:last-child { border-bottom: 0; }
#view-scribe .sc-rail-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
#view-scribe .sc-rail-head .sc-linkbtn { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }
/* ── The player: controls sit on the video ───────────────────────────
   One bar along the bottom of the picture (YouTube's pattern): position bar,
   play, back and forward 10 seconds, sound, time, speed, full screen.
   It stays while paused and fades while playing until the pointer or the
   keyboard comes back. White on a dark scrim, so it reads on any recording. */
#view-scribe .sc-player { position: relative; }
#view-scribe .sc-video {
  position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; border: 0; color: #fff;
  background: radial-gradient(120% 90% at 30% 20%, #334155 0%, #1e293b 55%, #0f172a 100%);
}
#view-scribe .sc-video > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; }
#view-scribe .sc-video.is-full, #view-scribe .sc-video:fullscreen { border-radius: 0; aspect-ratio: auto; }
#view-scribe .sc-video-face {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border-radius: 999px; background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600;
}
#view-scribe .sc-video-hit { position: absolute; inset: 0; border: 0; background: none; cursor: pointer; }
/* Where you left off: on a paused recording that opens part-way in. It goes
   as soon as the recording plays or moves. */
#view-scribe .sc-resume {
  position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 4px 4px 10px; border-radius: 999px; background: rgba(15,23,42,.72); color: #fff; font-size: 12px; font-weight: 500;
}
#view-scribe .sc-resume button { border: 0; border-radius: 999px; padding: 4px 10px; background: rgba(255,255,255,.16); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
#view-scribe .sc-resume button:hover { background: rgba(255,255,255,.26); }
#view-scribe .sc-resume button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
#view-scribe .sc-video-play {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); width: 52px; height: 52px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: #0f172a; display: flex; align-items: center; justify-content: center; pointer-events: none;
  transition: opacity .2s, transform .15s;
}
#view-scribe .sc-video:hover .sc-video-play { transform: translate(-50%,-50%) scale(1.06); }
#view-scribe .sc-player.is-playing .sc-video-play { opacity: 0; }
#view-scribe .sc-vbar {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 8px 6px;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.42) 55%, rgba(0,0,0,0)); transition: opacity .2s;
}
#view-scribe .sc-player.is-playing:not(.is-away) .sc-video:not(:hover):not(:has(:focus-visible)) .sc-vbar { opacity: 0; }
/* Touch screens have no hover to bring it back, and a tap on the picture pauses. */
@media (hover: none) { #view-scribe .sc-player.is-playing .sc-video .sc-vbar { opacity: 1; } }
#view-scribe .sc-vbar .sc-groove {
  display: block; position: relative; height: 4px; margin: 0 6px 6px; padding: 0; border-radius: 999px;
  background: rgba(255,255,255,.3); box-shadow: none; cursor: pointer; transition: height .15s;
}
#view-scribe .sc-vbar .sc-groove::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -6px; }
#view-scribe .sc-vbar .sc-groove:hover, #view-scribe .sc-vbar .sc-groove:focus-visible { height: 6px; }
#view-scribe .sc-vbar .sc-groove:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
#view-scribe .sc-vbar .sc-groove-fill { height: 100%; border-radius: 999px; background: var(--accent-strong); }
#view-scribe .sc-vbar .sc-groove-knob {
  position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 999px;
  background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.45); opacity: 0; transition: opacity .15s;
}
#view-scribe .sc-vbar .sc-groove:hover .sc-groove-knob, #view-scribe .sc-vbar .sc-groove:focus-visible .sc-groove-knob { opacity: 1; }
#view-scribe .sc-vctl { display: flex; align-items: center; gap: 2px; }
#view-scribe .sc-vbtn {
  width: 32px; height: 32px; flex: none; border-radius: 10px; border: 0; background: none; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s;
}
#view-scribe .sc-vbtn:hover { background: rgba(255,255,255,.16); }
#view-scribe .sc-vbtn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
#view-scribe .sc-vrate { width: auto; padding: 0 8px; font-size: 12px; font-weight: 700; }
#view-scribe .sc-vtime { padding: 0 6px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.92); white-space: nowrap; font-variant-numeric: tabular-nums; }
#view-scribe .sc-vgap { flex: 1; min-width: 4px; }
#view-scribe .sc-player:not(.is-wide) .sc-vwide { display: none; }
/* Popped out: the page keeps the controls and says where the picture went. */
#view-scribe .sc-away {
  position: absolute; inset: 0 0 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: rgba(255,255,255,.88); font-size: var(--fs-base); font-weight: 500; text-align: center; padding: 0 24px;
}
#view-scribe .sc-away svg { width: 40px; height: 40px; opacity: .8; }
#view-scribe .sc-away small { display: block; font-size: var(--fs-sm); font-weight: 400; color: rgba(255,255,255,.7); }
#view-scribe .sc-away button {
  margin-top: 4px; height: 34px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.94); color: #0f172a; font: inherit; font-size: var(--fs-sm); font-weight: 600;
}
#view-scribe .sc-away button:hover { background: #fff; }
#view-scribe .sc-away button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#view-scribe .sc-player.is-wide .sc-vbar { padding: 40px 14px 10px; }
#view-scribe .sc-player.is-wide .sc-vbtn { width: 38px; height: 38px; }
#view-scribe .sc-player.is-wide .sc-vtime { font-size: 13px; }
#view-scribe .sc-player.is-wide .sc-video-face { width: 96px; height: 96px; font-size: 30px; }
#view-scribe .sc-player.is-wide .sc-video-play { width: 72px; height: 72px; }

/* ── Where Scribe is up to (a call in progress) ───────────────────────
   Each step is named for the work ("Record the call"), and the word on the
   right says where it stands: Done, Recording now · 18:04, Up next. A step
   that is happening is never worded as finished. */
#view-scribe .sc-steps2 { list-style: none; border: 1px solid var(--border); border-radius: 12px; padding: 4px 18px; }
#view-scribe .sc-step2 { display: flex; align-items: center; gap: 14px; padding: 14px 0; font-size: var(--fs-base); color: var(--text-muted); }
#view-scribe .sc-step2 + .sc-step2 { border-top: 1px solid var(--border-light); }
[data-theme="light"] #view-scribe .sc-step2 + .sc-step2 { border-top-color: var(--sc-rule); }
#view-scribe .sc-step2-dot {
  width: 24px; height: 24px; border-radius: 999px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1.5px var(--text-subtle); color: #fff;
}
#view-scribe .sc-step2.is-done { color: var(--text); }
#view-scribe .sc-step2.is-done .sc-step2-dot { background: var(--success); box-shadow: none; }
#view-scribe .sc-step2.is-now { color: var(--text); font-weight: 600; }
#view-scribe .sc-step2.is-now .sc-step2-dot { box-shadow: inset 0 0 0 2px var(--warning); }
#view-scribe .sc-step2.is-now .sc-step2-dot i { width: 10px; height: 10px; border-radius: 999px; background: var(--warning); animation: scask 1.2s ease-in-out infinite; }
#view-scribe .sc-step2-label { flex: 1; }
#view-scribe .sc-step2-word { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
#view-scribe .sc-step2.is-now .sc-step2-word { color: var(--sc-warn); font-weight: 600; }
#view-scribe .sc-steps2-foot { margin-top: 12px; font-size: var(--fs-sm); color: var(--text-muted); }
#view-scribe .sc-live { width: 7px; height: 7px; border-radius: 999px; background: currentColor; animation: scask 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #view-scribe .sc-step2.is-now .sc-step2-dot i, #view-scribe .sc-live { animation: none; } }

/* ── A lead move Scribe suggests (Clayton, 2026-10-14) ────────────── */
#view-scribe .sc-leadmove { margin-top: 18px; border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; background: var(--bg); }
#view-scribe .sc-leadmove-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
#view-scribe .sc-leadmove-title svg { flex: none; color: var(--primary); }
:root:not([data-theme="light"]) #view-scribe .sc-leadmove-title svg { color: var(--accent-strong); }
#view-scribe .sc-leadmove p { margin: 6px 0 14px; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
#view-scribe .sc-leadmove-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
/* Did they show up? (part 3a of the dashboard build): a card for a sales call, one quiet line for any other call */
#view-scribe .sc-outcome { margin-top: 18px; border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; background: var(--bg); }
#view-scribe .sc-outcome-q { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
#view-scribe .sc-outcome p { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
#view-scribe .sc-outcome-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
#view-scribe .sc-outcome .sc-btn[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); font-weight: 600; }
#view-scribe .sc-outcome--quiet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; font-size: var(--fs-sm); color: var(--text-muted); }
#view-scribe .sc-outcome--quiet .sc-outcome-acts { margin-top: 0; }

/* ── A write-up that never finished, and one being written ─────────── */
#view-scribe .sc-writeup-box { border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; background: var(--bg); }
#view-scribe .sc-writeup-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
#view-scribe .sc-writeup-title svg { color: var(--sc-warn); }
#view-scribe .sc-writeup-box p { margin: 6px 0 14px; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
#view-scribe .sc-writing { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--text-muted); }
#view-scribe .sc-writing i { width: 8px; height: 8px; border-radius: 999px; background: var(--primary); animation: scask 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #view-scribe .sc-writing i { animation: none; } }
#view-scribe .sc-fail p.sc-fail-what { color: var(--text); }
#view-scribe .sc-you { font-weight: 600; color: var(--primary); }
:root:not([data-theme="light"]) #view-scribe .sc-you { color: var(--accent-strong); }

/* ── Important moments as dots on the position bar ─────────────────── */
#view-scribe .sc-vbar .sc-mark {
  position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; padding: 0; border: 2px solid var(--accent-strong); border-radius: 999px;
  background: #fff; cursor: pointer; z-index: 2; transition: transform .15s;
}
#view-scribe .sc-vbar .sc-mark:hover, #view-scribe .sc-vbar .sc-mark:focus-visible { transform: scale(1.4); outline: none; }

/* ── The recording, at the top of the meeting ──────────────────────── */
#view-scribe .sc-detail-player { margin-bottom: 24px; }

/* ── The transcript, at the top of the right panel ───────────────────
   It follows the recording: the line being spoken is highlighted and kept
   in view, lines already spoken fade, a click on a line jumps the video. */
#view-scribe .sc-txside-note { margin-left: auto; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
#view-scribe .sc-txside-note i { width: 7px; height: 7px; border-radius: 999px; background: var(--sc-ok); }
#view-scribe .sc-rail-txq { margin-bottom: 8px; }
#view-scribe .sc-rail-txq input { height: 34px; }
#view-scribe .sc-search input::-webkit-search-cancel-button { display: none; }
#view-scribe .sc-rail-txlist { position: relative; height: min(50vh, 470px); overflow-y: auto; margin: 0 -8px; padding: 0 8px; scrollbar-width: none; }
#view-scribe .sc-rail-txlist::-webkit-scrollbar { width: 0; display: none; }
#view-scribe .sc-rail-txlist .sc-cue { margin: 0; padding: 10px 8px; gap: 12px; }
#view-scribe .sc-rail-txlist .sc-cue-text { font-size: var(--fs-sm); line-height: 1.6; }
#view-scribe .sc-rail-txlist .sc-cue.is-past { opacity: .6; }
#view-scribe .sc-rail-txlist .sc-cue.is-past:hover { opacity: 1; }
#view-scribe .sc-rail-txlist .sc-cue-acts {
  position: absolute; top: 6px; right: 6px; padding: 2px; border-radius: 10px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 4px 12px rgba(15,23,42,.08);
}

/* ── The call's chat ───────────────────────────────────────────────── */
#view-scribe .sc-rail-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-muted); font-size: 11px; letter-spacing: 0; }
#view-scribe .sc-chat-sub { margin: 4px 0 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
#view-scribe .sc-chat-sub ~ .sc-chat-sub { margin-top: 14px; }
#view-scribe .sc-chat-link {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); text-decoration: none; transition: background .15s, border-color .15s;
}
#view-scribe .sc-chat-link + .sc-chat-link { margin-top: 6px; }
#view-scribe .sc-chat-link:hover { background: var(--surface-hover); border-color: var(--text-subtle); }
#view-scribe .sc-chat-link > svg { color: var(--text-muted); flex: none; }
#view-scribe .sc-chat-link-ico { width: 30px; height: 30px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--primary-dim); color: var(--primary); }
:root:not([data-theme="light"]) #view-scribe .sc-chat-link-ico { color: var(--accent-strong); }
#view-scribe .sc-chat-link-text { flex: 1; min-width: 0; }
#view-scribe .sc-chat-link-title { display: block; font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-scribe .sc-chat-link-sub { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
#view-scribe .sc-chat-msg { display: flex; gap: 10px; padding: 7px 0; font-size: var(--fs-sm); line-height: 1.5; }
#view-scribe .sc-chat-msg + .sc-chat-msg { border-top: 1px solid var(--border-light); }
[data-theme="light"] #view-scribe .sc-chat-msg + .sc-chat-msg { border-top-color: var(--sc-rule); }
#view-scribe .sc-chat-at {
  flex: none; height: 22px; padding: 0 7px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bg); color: var(--text-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
}
#view-scribe .sc-chat-at:hover { background: var(--primary); color: #fff; }
#view-scribe .sc-chat-msg > div { flex: 1; min-width: 0; }
#view-scribe .sc-chat-who { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--text); }
#view-scribe .sc-chat-text { color: var(--text); word-break: break-word; }
#view-scribe .sc-chat-url { color: var(--primary); text-decoration: none; }
:root:not([data-theme="light"]) #view-scribe .sc-chat-url { color: var(--accent-strong); }
#view-scribe .sc-chat-url:hover { text-decoration: underline; }

/* ── Clients and leads on the call ─────────────────────────────────── */
#view-scribe .sc-linked { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
#view-scribe .sc-linked + .sc-linked { border-top: 1px solid var(--border-light); }
[data-theme="light"] #view-scribe .sc-linked + .sc-linked { border-top-color: var(--sc-rule); }
#view-scribe .sc-linked-text { flex: 1; min-width: 0; }
#view-scribe .sc-linked-name { font-size: var(--fs-base); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-scribe .sc-linked-sub b { font-weight: 600; color: var(--text); }
#view-scribe .sc-linked-sub { margin-top: 1px; font-size: var(--fs-xs); color: var(--text-muted); }
#view-scribe a.sc-btn { text-decoration: none; }
#view-scribe .sc-fold {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 0 12px; height: 40px;
  border: 0; border-radius: 12px; background: var(--bg); color: var(--text); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; text-align: left;
  transition: background .15s;
}
#view-scribe .sc-fold:hover { background: var(--surface-hover); }
#view-scribe .sc-fold span { flex: 1; }
#view-scribe .sc-fold svg { color: var(--text-muted); flex: none; }
#view-scribe .sc-fold svg:last-child { transition: transform .15s; }
#view-scribe .sc-fold[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
#view-scribe .sc-others { margin-top: 4px; }
#view-scribe .sc-other { display: flex; align-items: center; gap: 10px; padding: 9px 2px; }
#view-scribe .sc-other-wrap + .sc-other-wrap { border-top: 1px solid var(--border-light); }
[data-theme="light"] #view-scribe .sc-other-wrap + .sc-other-wrap { border-top-color: var(--sc-rule); }
#view-scribe .sc-other-name { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-scribe .sc-other .sc-linkbtn { font-size: var(--fs-xs); flex: none; }
#view-scribe .sc-picker { margin: 0 0 10px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--sc-menu-shadow); }
#view-scribe .sc-picker .sc-search input { height: 36px; }
#view-scribe .sc-pick-list { margin-top: 6px; display: grid; gap: 2px; }
#view-scribe .sc-pick {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none;
  color: var(--text); font-size: var(--fs-sm); font-weight: 500; text-align: left; cursor: pointer; transition: background .15s;
}
#view-scribe .sc-pick:hover { background: var(--surface-hover); }
#view-scribe .sc-pick-name { flex: 1; }
#view-scribe .sc-pick-note { font-size: var(--fs-xs); color: var(--text-muted); }
#view-scribe .sc-rail-empty { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 8px; }

#view-scribe .sc-empty { padding: 72px 28px; text-align: center; }
#view-scribe .sc-empty-ico {
  width: 52px; height: 52px; border-radius: 12px; margin: 0 auto 16px; background: var(--bg); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
}
#view-scribe .sc-empty h3 { font-size: 15px; font-weight: 800; letter-spacing: .03em; color: var(--text); }
#view-scribe .sc-empty p { margin: 8px auto 0; max-width: 340px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); }

/* ── Upcoming: does Scribe join? ────────────────────────────────────── */
#view-scribe .sc-join {
  margin-top: 24px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
#view-scribe .sc-join-main { display: flex; gap: 16px; align-items: center; padding: 20px 22px; }
#view-scribe .sc-join-ico {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-dim); color: var(--primary);
}
:root:not([data-theme="light"]) #view-scribe .sc-join-ico { color: var(--accent-strong); }
#view-scribe .sc-join.is-off .sc-join-ico { background: var(--bg); color: var(--text-muted); }
#view-scribe .sc-join-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); letter-spacing: -.01em; }
#view-scribe .sc-join-sub { margin-top: 3px; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; }
#view-scribe .sc-join-rule {
  display: flex; gap: 14px; align-items: center; padding: 16px 22px;
  background: var(--bg); border-top: 1px solid var(--border);
}
#view-scribe .sc-join-rule-text { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
#view-scribe .sc-join-rule-text b { color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 8px; }
#view-scribe .sc-join-rule-text b svg { color: var(--text-muted); }
#view-scribe .sc-facts { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
#view-scribe .sc-fact { padding: 14px 16px; border-radius: 12px; background: var(--bg); }
#view-scribe .sc-fact-l { font-size: var(--fs-xs); color: var(--text-muted); }
#view-scribe .sc-fact-v { margin-top: 3px; font-size: var(--fs-base); font-weight: 600; color: var(--text); }

/* The switch: on = filled track AND the knob on the right AND the word. */
#view-scribe .sc-switch { display: inline-flex; align-items: center; gap: 10px; flex: none; cursor: pointer; background: none; border: 0; padding: 4px; border-radius: 999px; }
#view-scribe .sc-switch-track {
  width: 40px; height: 24px; border-radius: 999px; background: var(--groove); position: relative; transition: background .15s;
  box-shadow: inset 0 0 0 1px var(--border);
}
#view-scribe .sc-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,.25); transition: transform .15s;
}
[data-theme="light"] #view-scribe .sc-switch-track { box-shadow: inset 0 0 0 1.5px var(--text-muted); }
:root:not([data-theme="light"]) #view-scribe .sc-switch-track { background: var(--text-subtle); box-shadow: none; }
#view-scribe .sc-switch:hover .sc-switch-track { box-shadow: inset 0 0 0 1.5px var(--text); }
#view-scribe .sc-switch[aria-checked="true"] .sc-switch-track { background: var(--primary); box-shadow: none; }
:root:not([data-theme="light"]) #view-scribe .sc-switch[aria-checked="true"] .sc-switch-track { background: var(--accent-strong); }
#view-scribe .sc-switch[aria-checked="true"] .sc-switch-knob { transform: translateX(16px); }
#view-scribe .sc-switch-word { font-size: var(--fs-sm); font-weight: 600; color: var(--text); min-width: 32px; text-align: left; }
#view-scribe .sc-cal { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
#view-scribe .sc-cal + .sc-cal { border-top: 1px solid var(--border-light); }
[data-theme="light"] #view-scribe .sc-cal + .sc-cal { border-top-color: var(--sc-rule); }
#view-scribe .sc-cal-text { flex: 1; min-width: 0; }
#view-scribe .sc-cal-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 8px; }
#view-scribe .sc-cal-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-scribe .sc-cal-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; padding-left: 16px; }
#view-scribe .sc-rail-lede { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; margin: -4px 0 8px; }

/* ── Ask Scribe ─────────────────────────────────────────────────────── */
#view-scribe .sc-ask { display: flex; flex-direction: column; height: 100%; min-height: 0; }
#view-scribe .sc-ask-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 32px 40px 16px; }
#view-scribe .sc-ask-inner { max-width: 760px; margin: 0 auto; }
#view-scribe .sc-ask-hero { text-align: center; padding: 0 0 28px; }
#view-scribe .sc-ask.is-empty .sc-ask-scroll { display: flex; flex-direction: column; justify-content: center; padding-bottom: 72px; }
#view-scribe .sc-ask.is-empty .sc-ask-inner { width: 100%; }
#view-scribe .sc-ask-mark {
  width: 52px; height: 52px; border-radius: 12px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center; background: var(--primary-dim); color: var(--primary);
}
:root:not([data-theme="light"]) #view-scribe .sc-ask-mark { color: var(--accent-strong); }
#view-scribe .sc-ask-hero h2 {
  font-family: 'Saira', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 24px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; color: var(--text);
}
#view-scribe .sc-ask-hero p { margin: 10px auto 0; max-width: 440px; font-size: var(--fs-md); line-height: 1.6; color: var(--text-muted); }
#view-scribe .sc-suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
#view-scribe .sc-sugg {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-size: var(--fs-sm); font-weight: 500; cursor: pointer; text-align: left; transition: background .15s, border-color .15s;
}
#view-scribe .sc-sugg:hover { background: var(--surface-hover); border-color: var(--text-subtle); }
#view-scribe .sc-sugg svg { color: var(--text-muted); flex: none; }

#view-scribe .sc-composer-wrap { padding: 12px 40px 24px; }
#view-scribe .sc-ask.is-empty .sc-composer-wrap { padding-top: 0; }
#view-scribe .sc-composer {
  max-width: 760px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 12px 10px 16px; transition: border-color .15s, box-shadow .15s;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
#view-scribe .sc-composer:focus-within { border-color: var(--primary); box-shadow: var(--sc-ring); }
#view-scribe .sc-composer textarea {
  display: block; width: 100%; min-height: 48px; max-height: 160px; resize: none; border: 0; outline: none; background: transparent;
  color: var(--text); font: inherit; font-size: var(--fs-md); line-height: 1.55; padding: 4px 0;
}
#view-scribe .sc-composer textarea::placeholder { color: var(--text-muted); }
#view-scribe .sc-composer-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
#view-scribe .sc-scope {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 9px; border-radius: 999px;
  background: var(--bg); border: 0; color: var(--text); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; max-width: 340px;
}
#view-scribe .sc-scope:hover { background: var(--surface-hover); }
#view-scribe .sc-scope span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-scribe .sc-scope svg { color: var(--text-muted); flex: none; }
#view-scribe .sc-quote-chip {
  display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; padding: 8px 10px; border-radius: 10px;
  background: var(--bg); font-size: var(--fs-sm); color: var(--text-muted);
}
#view-scribe .sc-quote-chip q { color: var(--text); quotes: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#view-scribe .sc-quote-chip button { margin-left: auto; }
#view-scribe .sc-send {
  margin-left: auto; width: 36px; height: 36px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, opacity .15s;
}
#view-scribe .sc-send:hover { background: var(--primary-hover); }
#view-scribe .sc-send:disabled { opacity: .35; cursor: not-allowed; }
#view-scribe .sc-ask-foot { max-width: 760px; margin: 8px auto 0; font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }

#view-scribe .sc-turn + .sc-turn { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--border-light); }
[data-theme="light"] #view-scribe .sc-turn + .sc-turn { border-top-color: var(--sc-rule); }
#view-scribe .sc-q {
  margin-left: auto; width: fit-content; max-width: 80%;
  padding: 10px 16px; border-radius: 12px; background: var(--bg); color: var(--text); font-size: var(--fs-md); line-height: 1.5;
}
#view-scribe .sc-q-quote { display: block; margin-bottom: 4px; font-size: var(--fs-xs); color: var(--text-muted); }
#view-scribe .sc-a { margin-top: 18px; }
#view-scribe .sc-a-who { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-bottom: 10px; }
#view-scribe .sc-a-who .sc-ask-mark { width: 26px; height: 26px; border-radius: 10px; margin: 0; }
#view-scribe .sc-a p, #view-scribe .sc-a li { font-size: var(--fs-md); line-height: 1.7; color: var(--text); }
#view-scribe .sc-a p + p, #view-scribe .sc-a p + ul, #view-scribe .sc-a ul + p { margin-top: 10px; }
#view-scribe .sc-a ul { padding-left: 20px; }
#view-scribe .sc-a li + li { margin-top: 2px; }
#view-scribe .sc-cite {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  margin: 0 1px; vertical-align: 2px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--primary-dim); color: var(--primary); font-size: 11px; font-weight: 700; transition: background .15s, color .15s;
}
:root:not([data-theme="light"]) #view-scribe .sc-cite { color: var(--accent-strong); }
#view-scribe .sc-cite:hover, #view-scribe .sc-cite.is-on { background: var(--primary); color: #fff; }
:root:not([data-theme="light"]) #view-scribe .sc-cite:hover,
:root:not([data-theme="light"]) #view-scribe .sc-cite.is-on { color: #fff; }
#view-scribe .sc-a-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
#view-scribe .sc-thinking { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--text-muted); }
#view-scribe .sc-thinking i {
  width: 8px; height: 8px; border-radius: 999px; background: var(--primary); animation: scask 1s ease-in-out infinite;
}
@keyframes scask { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #view-scribe .sc-thinking i { animation: none; } }
#view-scribe .sc-a.is-in { animation: scin .28s cubic-bezier(.05,.7,.1,1) both; }
@keyframes scin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #view-scribe .sc-a.is-in { animation: none; } }
#view-scribe .sc-nohit { padding: 14px 16px; border-radius: 12px; background: var(--bg); font-size: var(--fs-base); color: var(--text); line-height: 1.6; }
#view-scribe .sc-nohit span { display: block; color: var(--text-muted); font-size: var(--fs-sm); margin-top: 2px; }

/* Sources rail */
#view-scribe .sc-src { border: 1px solid var(--border); border-radius: 12px; padding: 14px; transition: border-color .15s, box-shadow .15s; }
#view-scribe .sc-src + .sc-src { margin-top: 10px; }
#view-scribe .sc-src { cursor: pointer; }
#view-scribe .sc-src:hover { border-color: var(--text-subtle); }
#view-scribe .sc-src.is-on { border-color: var(--primary); box-shadow: var(--sc-ring); }
#view-scribe .sc-src-head { display: flex; gap: 10px; align-items: flex-start; }
#view-scribe .sc-src-n {
  flex: none; min-width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-dim); color: var(--primary); font-size: 11px; font-weight: 700;
}
:root:not([data-theme="light"]) #view-scribe .sc-src-n { color: var(--accent-strong); }
#view-scribe .sc-src-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); line-height: 1.35; }
#view-scribe .sc-src-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
#view-scribe .sc-src-body { margin-top: 10px; display: flex; gap: 10px; align-items: flex-start; }
#view-scribe .sc-src-quote { font-size: var(--fs-sm); line-height: 1.55; color: var(--text); }
#view-scribe .sc-src-quote b { display: block; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; margin-bottom: 1px; }
#view-scribe .sc-src-foot { margin-top: 10px; display: flex; gap: 8px; }

/* ── The More menu (a fixed portal on <body>) ─────────────────────── */
.sc-menu {
  position: fixed; z-index: 9500; min-width: 230px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
[data-theme="light"] .sc-menu { box-shadow: 0 10px 28px rgba(15,23,42,.14); }
.sc-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer;
  transition: background .15s;
}
.sc-menu button:hover { background: var(--surface-hover); }
.sc-menu button:focus-visible { background: var(--surface-hover); outline: 2px solid var(--primary); outline-offset: -2px; }
:root:not([data-theme="light"]) .sc-menu button:focus-visible { outline-color: var(--accent-strong); }
.sc-menu button svg { color: var(--text-muted); flex: none; }
.sc-menu-sep { height: 1px; margin: 6px 4px; background: var(--border); }
.sc-menu { max-width: 360px; }
.sc-menu button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-menu button.is-on { font-weight: 600; }
.sc-menu button em { font-style: normal; display: inline-flex; color: var(--primary); }
:root:not([data-theme="light"]) .sc-menu button em { color: var(--accent-strong); }

/* ── Send Scribe window (softer) ────────────────────────────────────── */
.sc-overlay.sc-soft { background: rgba(15,23,42,.45); }
:root:not([data-theme="light"]) .sc-overlay.sc-soft { background: rgba(0,0,0,.6); }
.sc-soft .sc-modal { border-radius: 16px; box-shadow: 0 20px 50px rgba(15,23,42,.18); }
:root:not([data-theme="light"]) .sc-soft .sc-modal { box-shadow: 0 16px 48px rgba(0,0,0,.5); }
.sc-soft .sc-modal-head { padding: 20px 20px 4px; border-bottom: 0; display: flex; align-items: center; }
.sc-soft .sc-modal-head h2 { font-size: var(--fs-lg); font-weight: 600; }
.sc-soft .sc-modal-head button { margin-left: auto; width: 32px; height: 32px; border-radius: 10px; border: 0; background: none; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sc-soft .sc-modal-head button:hover { background: var(--surface-hover); color: var(--text); }
.sc-soft .sc-modal-body { padding: 14px 20px 6px; }
.sc-soft .sc-keys { list-style: none; margin: 0; padding: 0 0 14px; }
.sc-soft .sc-keys li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: var(--fs-sm); color: var(--text); }
.sc-soft .sc-keys li + li { border-top: 1px solid var(--border); }
.sc-soft .sc-keys .k { display: inline-flex; gap: 4px; }
.sc-soft .sc-keys kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 7px;
  border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-family: inherit; font-size: 12px; font-weight: 600;
}
.sc-soft .sc-field label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text); margin-bottom: 6px; }
.sc-soft .sc-field label span { color: var(--text-muted); font-weight: 400; }
.sc-soft .sc-field input { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font: inherit; transition: border-color .15s, box-shadow .15s; }
.sc-soft .sc-field input::placeholder { color: var(--text-muted); }
[data-theme="light"] .sc-soft .sc-field input { background: var(--surface); }
.sc-soft .sc-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.sc-soft .sc-field + .sc-field { margin-top: 16px; }
.sc-soft .sc-detect { margin-top: 7px; font-size: var(--fs-xs); color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.sc-soft .sc-detect.is-ok { color: #047857; }
.sc-soft .sc-detect.is-warn { color: #b45309; }
:root:not([data-theme="light"]) .sc-soft .sc-detect.is-warn { color: #f59e0b; }
:root:not([data-theme="light"]) .sc-soft .sc-detect.is-ok { color: #22c55e; }
.sc-soft .sc-modal-foot { padding: 18px 20px 20px; border-top: 0; display: flex; justify-content: flex-end; gap: 8px; }
.sc-soft .sc-modal-foot button { height: 38px; padding: 0 16px; border-radius: 10px; font: inherit; font-size: var(--fs-base); font-weight: 500; cursor: pointer; }
.sc-soft .sc-modal-foot .sc-cancel { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.sc-soft .sc-modal-foot .sc-cancel:hover { background: var(--surface-hover); }

@media (max-width: 1400px) { #view-scribe .sc-split { grid-template-columns: 310px minmax(0,1fr) 340px; } }
@media (max-width: 1180px) {
  /* The rail carries the transcript, the chat and the people now, so on a
     narrow window it moves under the meeting instead of disappearing.
     ⚠️ The old page's own rule at this width is .sc-pane--rail{display:none}:
     this block must say display:block, or the rail is still gone (it was, at
     first, 10/14). The view grows past the screen and the page scrolls down
     to the rail; the list and the meeting keep a screen-high row. */
  #view-scribe { flex: 1 0 auto; }
  #view-scribe .sc-split { grid-template-columns: 300px minmax(0,1fr); grid-template-rows: minmax(480px, calc(100vh - 240px)) auto; }
  #view-scribe .sc-split[data-mode="ask"] { grid-template-columns: minmax(0,1fr); }
  #view-scribe .sc-pane--rail { display: block; grid-column: 1 / -1; max-height: 560px; }
}
@media (max-width: 1100px) { #view-scribe .sc-toolbar { flex-basis: 100%; } }
@media (max-width: 1000px) { #view-scribe .sc-kbd { display: none; } }
@media (max-width: 860px) {
  #view-scribe { padding: 20px 16px; }
  #view-scribe .sc-split { grid-template-columns: 1fr; grid-template-rows: none; }
  #view-scribe .sc-pane--list { max-height: 340px; }
  #view-scribe .sc-facts { grid-template-columns: 1fr; }
  #view-scribe .sc-ask-scroll, #view-scribe .sc-composer-wrap { padding-left: 16px; padding-right: 16px; }
}
/* ═════════════════════════ end SOFTER LOOK — Scribe ═════════════════════ */

/* ============================================================
   BOOKED™ — external scheduling links
   ============================================================
   Booked is the front door strangers walk through: a lead off an
   Instagram bio, a BNI contact, a podcast host. The screen answers
   "which of my doors are open, are they working, and who came through" —
   it is NOT a second calendar, and nothing here shows the coach's own
   schedule back to him.

   Rules this block keeps, all of them load-bearing:
   · ROWS, NEVER CARDS. One hairline between rows, a fill on hover, no
     lift and no glow. The old .meeting-row put a full border on every row
     INSIDE a bordered card painted the same --surface, so a list of six
     booking types read as seven boxes. Same ruling Scribe shipped under.
   · EVERY STATUS CARRIES ITS OWN WORD. Clayton is colourblind; a green
     dot on its own is not a state. .bkd-pill always has text in it.
   · --text-muted, not --text-subtle, for anything a coach has to READ.
     #6F7C8D measures 3.82:1 on an elevated row, under the 4.5 AA floor.
     --text-subtle is for separators, icon tints and column headers only.
   · A NUMBER FIELD IS AS WIDE AS ITS NUMBER (.bkd-num is 72px). The old
     form stretched "Daily cap" across 900px because the width was there.
   · Every colour is a token. Nothing in this block hard-codes a hex, so
     it moves with the palette — which has already been re-picked once.
   ============================================================ */

/* ⚠️ THE `hidden` ATTRIBUTE MUST WIN. Several classes in this block set
   `display:flex` or `display:grid`, and a class beats the UA stylesheet's
   `[hidden] { display: none }` on specificity — so `el.hidden = true` on a
   .bkd-note or a .bkd-field left the element fully visible. Measured on the
   real page: the "changing this breaks every copy of the old link" warning
   showed on an untouched booking page, with `el.hidden === true` and
   `getComputedStyle(el).display === "flex"`. */
.bkd-note[hidden],
.bkd-field[hidden],
.bkd-fb-row[hidden],
.bkd-universal[hidden],
.bkd-tl-item[hidden],
[id^="bkd-"][hidden] { display: none !important; }

/* ── Shell: tab strip ─────────────────────────────────────────
   Same grammar as .sc-tabs. Its own class rather than a shared one
   because every view in this app owns its tab strip (.checkins-tabs,
   .builder-tabs, .el-view-tabs, .sc-tabs) — a shared one would make a
   Scribe restyle silently move Booked. */
.bkd-tabs { display:flex; border-bottom:1px solid var(--border); margin-bottom:18px; }
.bkd-tab {
  padding:9px 16px; background:none; border:none; border-bottom:2px solid transparent;
  margin-bottom:-1px; color:var(--text-muted); font-size:var(--fs-base);
  font-weight:500; cursor:pointer; font-family:inherit;
  transition:color .15s, border-color .15s;
}
.bkd-tab:hover { color:var(--text); }
.bkd-tab.is-active { color:var(--text); border-bottom-color:var(--primary); }
.bkd-tab:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
/* "Nothing here yet" said on the tab itself, so a coach does not open an
   empty screen to find out. Never a count — nothing counts page views. */
.bkd-tab-note {
  margin-left:6px; font-size:10px; font-weight:600; letter-spacing:.04em;
  color:var(--text-subtle); border:1px solid var(--border);
  border-radius:20px; padding:1px 6px; vertical-align:1px;
}

/* ── The universal link ───────────────────────────────────────
   Deliberately NOT a row in the list below: it is one system-level link
   that serves every page at once, so it gets its own ground (--surface-2)
   and sits above the list rather than inside it. */
.bkd-universal {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:18px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
}
.bkd-universal-icon {
  flex:none; display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--radius-sm);
  background:var(--primary-dim); color:var(--primary);
}
.bkd-universal-text { flex:1 1 260px; min-width:0; }
.bkd-universal-label { font-size:var(--fs-base); font-weight:600; color:var(--text); }
.bkd-universal-sub { margin-top:2px; font-size:var(--fs-xs); color:var(--text-muted); }
.bkd-universal-acts { display:flex; gap:8px; flex:none; }

/* ── Toolbar: search, filters, sort ───────────────────────────── */
.bkd-toolbar { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.bkd-search { position:relative; flex:1 1 240px; min-width:160px; }
.bkd-search svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-subtle); pointer-events:none; }
.bkd-search input {
  width:100%; box-sizing:border-box; padding:8px 12px 8px 34px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text); font-size:var(--fs-base);
  font-family:inherit;
}
.bkd-search input::placeholder { color:var(--text-subtle); }
.bkd-search input:focus { outline:none; border-color:var(--primary); }
/* ⚠️ upgradeSelects() swaps each <select> for a .custom-select that is
   width:100%. Left alone in a flex row that makes every dropdown take an
   equal share and crushes the search box — measured at zero width in
   Scribe's own toolbar. Pin them to their content; search takes the rest. */
.bkd-toolbar .custom-select { width:auto; flex:0 0 auto; min-width:124px; }
.bkd-toolbar .custom-select-trigger { padding:8px 11px; white-space:nowrap; }
@media (max-width:1000px) { .bkd-toolbar .bkd-search { flex:1 1 100%; } }

/* ── Booking-page list ────────────────────────────────────────
   A list/table hybrid: one grid template shared by the header and every
   row, so the columns line up without a <table> and collapse column by
   column as the window narrows. Duration is NOT its own column — it
   lives in the name's own sub-line, where it reads as part of the page's
   identity rather than as a number to compare. */
.bkd-list { border-top:1px solid var(--border); }
.bkd-cols,
.bkd-row {
  display:grid;
  grid-template-columns:
    minmax(190px, 1.7fr)   /* page name + duration/kind sub-line */
    minmax(130px, .9fr)    /* where it happens */
    minmax(140px, 1fr)     /* which hours it uses */
    minmax(150px, 1.1fr)   /* its link */
    minmax(96px, .7fr)     /* bookings */
    132px                  /* status */
    auto;                  /* actions */
  gap:14px; align-items:center;
}
.bkd-cols {
  padding:0 12px 8px; font-size:10px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-subtle);
}
.bkd-row {
  padding:12px; border-bottom:1px solid var(--border-light);
  background:transparent; cursor:pointer; text-align:left;
  width:100%; border-left:0; border-right:0; border-top:0; font-family:inherit;
  transition:background .12s;
}
.bkd-row:hover { background:var(--surface-2); }
.bkd-row:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
/* A paused page is still a page — dimmed, never hidden and never red. */
.bkd-row.is-paused .bkd-row-name,
.bkd-row.is-paused .bkd-row-sub { opacity:.6; }

.bkd-row-name {
  font-size:var(--fs-base); font-weight:500; color:var(--text); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bkd-row-sub {
  margin-top:3px; font-size:var(--fs-xs); color:var(--text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bkd-cell { font-size:var(--fs-sm); color:var(--text-muted); min-width:0; }
.bkd-cell-strong { color:var(--text); }
.bkd-cell-2 { display:flex; flex-direction:column; gap:2px; min-width:0; }
.bkd-cell-2 span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bkd-cell-sub { font-size:var(--fs-xs); color:var(--text-subtle); }
.bkd-where { display:flex; align-items:center; gap:7px; min-width:0; }
.bkd-where svg { flex:none; color:var(--text-subtle); }
.bkd-where span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Numbers a coach compares down a column — tabular or they jitter. */
.bkd-num-cell { font-variant-numeric:tabular-nums; }

/* The link cell: monospace-ish path plus a copy affordance that only
   appears on hover, so the row is not a wall of buttons at rest. */
.bkd-linkcell { display:flex; align-items:center; gap:6px; min-width:0; }
.bkd-linkcell code {
  font-family:inherit; font-size:var(--fs-xs); color:var(--text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bkd-copy {
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:var(--radius-sm);
  background:transparent; border:none; color:var(--text-subtle); cursor:pointer;
  opacity:0; transition:opacity .12s, color .15s, background .15s;
}
.bkd-row:hover .bkd-copy,
.bkd-copy:focus-visible { opacity:1; }
.bkd-copy:hover { color:var(--text); background:var(--surface-hover); }
@media (hover:none) { .bkd-copy { opacity:1; } }

.bkd-acts { display:flex; gap:6px; align-items:center; justify-content:flex-end; }

/* ── Status + health pills ────────────────────────────────────
   Colour is never the only signal: every pill carries its own word, and
   the two that mean "look at this" also carry a glyph. */
.bkd-pill {
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:600; letter-spacing:.03em;
  padding:2px 8px; border-radius:20px; white-space:nowrap; max-width:100%;
}
.bkd-pill span { overflow:hidden; text-overflow:ellipsis; }
.bkd-pill--active   { background:var(--success-dim); color:var(--success); }
.bkd-pill--attention{ background:var(--warning-dim); color:var(--warning); }
.bkd-pill--broken   { background:var(--danger-dim);  color:var(--danger); }
.bkd-pill--paused   { background:rgba(255,255,255,.05); color:var(--text-muted); }
.bkd-pill--draft    { background:rgba(255,255,255,.05); color:var(--text-muted); }
.bkd-pill--neutral  { background:var(--surface-2); color:var(--text-muted); }

/* ── Empty + loading ──────────────────────────────────────────
   An empty screen is an invitation, not a report. */
.bkd-empty { padding:56px 24px; text-align:center; }
.bkd-empty h3 { font-size:var(--fs-lg); font-weight:600; color:var(--text); margin-bottom:6px; }
.bkd-empty p { font-size:var(--fs-sm); color:var(--text-muted); max-width:400px; margin:0 auto 18px; line-height:1.6; }
.bkd-skel { border-top:1px solid var(--border); }
.bkd-skel-row { padding:12px; border-bottom:1px solid var(--border-light); }
.bkd-skel-bar {
  height:11px; border-radius:3px; background:var(--surface-2);
  animation:bkd-pulse 1.4s ease-in-out infinite;
}
.bkd-skel-bar + .bkd-skel-bar { margin-top:7px; }
@keyframes bkd-pulse { 0%,100% { opacity:.45; } 50% { opacity:.9; } }
@media (prefers-reduced-motion:reduce) { .bkd-skel-bar { animation:none; opacity:.6; } }

/* ── List: column collapse ────────────────────────────────────
   Columns leave in order of what a coach can live without, and the ones
   that leave fold back into the name's sub-line (see bookedPages'
   subLine()) rather than disappearing — the row never loses information,
   only columns. Breakpoints are where a cell starts truncating its own
   text, measured, not guessed. */
@media (max-width:1360px) {
  .bkd-cols, .bkd-row { grid-template-columns:minmax(180px,1.7fr) minmax(120px,.9fr) minmax(140px,1.1fr) minmax(90px,.7fr) 128px auto; }
  .bkd-col-hours, .bkd-cell-hours { display:none; }
}
@media (max-width:1140px) {
  .bkd-cols, .bkd-row { grid-template-columns:minmax(180px,1.8fr) minmax(120px,.9fr) minmax(140px,1.1fr) 128px auto; }
  .bkd-col-bookings, .bkd-cell-bookings { display:none; }
}
@media (max-width:940px) {
  .bkd-cols, .bkd-row { grid-template-columns:minmax(160px,1.8fr) minmax(140px,1.1fr) 128px auto; }
  .bkd-col-where, .bkd-cell-where { display:none; }
}
/* Below this the grid stops being a table and becomes a stacked row —
   name, then everything else on one wrapped meta line, then actions. */
@media (max-width:760px) {
  .bkd-cols { display:none; }
  .bkd-row { display:block; padding:14px 12px; }
  .bkd-row > * + * { margin-top:8px; }
  .bkd-cell-link, .bkd-cell-status { display:block; }
  .bkd-acts { justify-content:flex-start; flex-wrap:wrap; }
}

/* ============================================================
   BOOKED™ — the booking-page editor
   ============================================================
   Three regions, never one long form: a nav that names each section AND
   its current value, one focused section at a time, and a preview of the
   real public page beside it. The old builder was five closed grey
   accordions inside the list's own card, with Save at the bottom of a
   1,400px scroll. */
.bkd-editor { display:flex; flex-direction:column; min-height:0; }

/* ── Sticky action bar ────────────────────────────────────────
   Sticks to the top of the scroll container so Save is never more than a
   glance away, whichever section is open. */
.bkd-ed-bar {
  position:sticky; top:0; z-index:6;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 0 14px; margin-bottom:2px;
  background:var(--bg); border-bottom:1px solid var(--border);
}
.bkd-ed-back {
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-sm); color:var(--text-muted); background:none; border:none;
  padding:4px 6px 4px 0; cursor:pointer; font-family:inherit;
}
.bkd-ed-back:hover { color:var(--text); }
.bkd-ed-ident { display:flex; align-items:center; gap:10px; flex:1 1 220px; min-width:0; }
.bkd-ed-title {
  font-size:var(--fs-xl); font-weight:600; color:var(--text); letter-spacing:-.015em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Save state in words, never a colour alone: "Unsaved changes" / "Saving…"
   / "Saved". Reserves its own width so the bar does not jump as it changes. */
.bkd-ed-state {
  font-size:var(--fs-xs); color:var(--text-muted); white-space:nowrap;
  min-width:104px; display:inline-flex; align-items:center; gap:5px;
}
.bkd-ed-state.is-dirty { color:var(--warning); }
.bkd-ed-state.is-saved { color:var(--success); }
.bkd-ed-acts { display:flex; gap:8px; align-items:center; flex:none; }

/* ── Three regions ────────────────────────────────────────────
   The preview is a real iframe of the real public page, so it needs a
   real column. Below 1400 it moves under the content; below 900 the nav
   becomes a horizontal strip. */
.bkd-ed-grid {
  display:grid; grid-template-columns:210px minmax(0,1fr);
  gap:0; margin-top:16px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); overflow:hidden;
}
.bkd-ed-grid.has-preview { grid-template-columns:210px minmax(0,1fr); }
@media (min-width:1400px) {
  .bkd-ed-grid.has-preview { grid-template-columns:210px minmax(0,1fr) 400px; }
}
@media (min-width:1760px) {
  .bkd-ed-grid.has-preview { grid-template-columns:230px minmax(0,1fr) 480px; }
}
.bkd-ed-nav { border-right:1px solid var(--border); background:var(--bg); padding:8px 0; min-width:0; }
.bkd-ed-navitem {
  display:block; width:100%; text-align:left; font-family:inherit;
  padding:9px 14px; background:transparent; border:none; cursor:pointer;
  position:relative; transition:background .12s;
}
.bkd-ed-navitem:hover { background:var(--surface-2); }
.bkd-ed-navitem.is-active { background:var(--primary-dim); }
.bkd-ed-navitem.is-active::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 2px 0 0 var(--primary);
}
.bkd-ed-navitem:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.bkd-ed-navname { display:block; font-size:var(--fs-sm); font-weight:500; color:var(--text); }
/* The single biggest scanability win on this screen: what the section is
   set to RIGHT NOW, read off the live draft, so a coach can take in a
   page's whole configuration without opening anything. */
.bkd-ed-navval {
  display:block; margin-top:2px; font-size:var(--fs-xs); color:var(--text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bkd-ed-navitem.has-error .bkd-ed-navval { color:var(--danger); }

.bkd-ed-body { padding:22px 24px 32px; min-width:0; }
.bkd-ed-h { margin-bottom:4px; font-size:var(--fs-lg); font-weight:600; color:var(--text); }
.bkd-ed-hsub { margin-bottom:20px; font-size:var(--fs-sm); color:var(--text-muted); line-height:1.55; }
/* A rule between groups of settings, not a box around each one. */
.bkd-ed-group + .bkd-ed-group { margin-top:22px; padding-top:22px; border-top:1px solid var(--border); }
.bkd-ed-grouph { margin-bottom:12px; font-size:var(--fs-sm); font-weight:600; color:var(--text); }

/* ── Form controls ────────────────────────────────────────────
   A field is a label over a control, capped at a readable width. Nothing
   stretches just because the screen is wide. */
.bkd-field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; max-width:520px; }
.bkd-field > label,
.bkd-flabel { font-size:var(--fs-sm); font-weight:500; color:var(--text); }
.bkd-fhint { font-size:var(--fs-xs); color:var(--text-muted); line-height:1.55; }
.bkd-input, .bkd-select, .bkd-textarea {
  width:100%; box-sizing:border-box; padding:8px 11px;
  background:var(--input-bg); border:1px solid var(--border);
  border-radius:var(--radius-sm); color:var(--text);
  font-size:var(--fs-base); font-family:inherit;
}
.bkd-input::placeholder, .bkd-textarea::placeholder { color:var(--text-subtle); }
.bkd-input:focus, .bkd-select:focus, .bkd-textarea:focus { outline:none; border-color:var(--primary); }
.bkd-textarea { min-height:92px; resize:vertical; line-height:1.55; }
.bkd-grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; max-width:520px; }
.bkd-grid2 .bkd-field { margin-bottom:0; max-width:none; }

/* The sentence-with-a-number. "Prevent someone from booking less than
   [12] hours before the meeting" reads as English; "Minimum notice
   (hours)" over a 900px-wide box does not. */
.bkd-sentence {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:var(--fs-base); color:var(--text); line-height:2;
}
/* 88px, measured: the widest thing these boxes ever hold is the word
   "Default" at 14px, which overflowed a 72px box and rendered "Your de". */
.bkd-num { width:88px; text-align:center; flex:none; font-variant-numeric:tabular-nums; }
.bkd-inline-select { width:auto; min-width:104px; flex:none; }

/* Row toggle: a sentence on the left, a switch on the right, a hairline
   between rows. Used for every on/off in the editor. */
.bkd-switchrow {
  display:flex; align-items:flex-start; gap:14px; padding:12px 0;
  border-bottom:1px solid var(--border-light);
}
.bkd-switchrow:last-child { border-bottom:0; }
.bkd-switchrow-text { flex:1; min-width:0; }
/* ⚠️ BOTH ARE BLOCKS. As inline spans the sub-line ran on after the name —
   "This page is taking bookings Turn it off and the link stops offering
   times." on one line — and its own margin-top did nothing, because
   vertical margins do not apply to inline boxes. Measured on the real page. */
.bkd-switchrow-name { display:block; font-size:var(--fs-base); color:var(--text); }
.bkd-switchrow-sub { display:block; margin-top:3px; font-size:var(--fs-xs); color:var(--text-muted); line-height:1.55; }
/* A radio or checkbox that IS the name sits on the line with it. */
.bkd-switchrow-name > input { margin-right:8px; vertical-align:-1px; }
.bkd-switchrow-ctl { flex:none; padding-top:2px; }

/* A read-only fact panel — what Booked is INHERITING from somewhere else
   (the coach's own hours, a connected account). Recessed, so it reads as
   "shown here, owned there". */
.bkd-readout {
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:14px 16px; max-width:520px;
}
.bkd-readout-head {
  display:flex; align-items:center; gap:8px; justify-content:space-between;
  margin-bottom:10px; flex-wrap:wrap;
}
.bkd-readout-title { font-size:var(--fs-sm); font-weight:600; color:var(--text); }
.bkd-readout-line {
  display:flex; justify-content:space-between; gap:16px;
  font-size:var(--fs-sm); color:var(--text-muted); padding:3px 0;
  font-variant-numeric:tabular-nums;
}
.bkd-readout-line b { font-weight:500; color:var(--text); }
.bkd-readout-foot { margin-top:12px; display:flex; gap:14px; flex-wrap:wrap; }

/* A warning that belongs to one field — never a page-wide banner. */
.bkd-note {
  display:flex; gap:8px; align-items:flex-start; max-width:520px;
  padding:9px 11px; border-radius:var(--radius-sm);
  font-size:var(--fs-xs); line-height:1.55;
  background:var(--surface-2); color:var(--text-muted); border:1px solid var(--border);
}
.bkd-note svg { flex:none; margin-top:1px; }
.bkd-note--warn { background:var(--warning-dim); border-color:transparent; color:var(--text); }
.bkd-note--warn svg { color:var(--warning); }
.bkd-note a { color:var(--primary); }

/* ── Booking form builder ─────────────────────────────────────
   Two blocks, because they behave differently: Contact Information is
   fixed (Name and Email are what a booking IS — they cannot be removed),
   and Qualification is the coach's own questions, which reorder, toggle
   and delete. Presenting them as one undifferentiated list was what made
   the old form read as raw database fields. */
.bkd-fb-block + .bkd-fb-block { margin-top:24px; }
.bkd-fb-head { margin-bottom:4px; font-size:var(--fs-sm); font-weight:600; color:var(--text); }
.bkd-fb-sub { margin-bottom:10px; font-size:var(--fs-xs); color:var(--text-muted); }
.bkd-fb-list { border-top:1px solid var(--border); max-width:600px; }
.bkd-fb-row {
  display:flex; align-items:center; gap:12px;
  padding:11px 4px; border-bottom:1px solid var(--border-light);
}
.bkd-fb-row-name { flex:1; min-width:0; font-size:var(--fs-base); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bkd-fb-row-type { flex:none; font-size:var(--fs-xs); color:var(--text-subtle); }
/* Fixed fields get the grab handle's SPACE but not a handle — the column
   stays aligned with the questions below without implying they can move. */
.bkd-fb-grip { flex:none; width:16px; color:var(--text-subtle); display:flex; align-items:center; }
.bkd-fb-req {
  flex:none; font-size:10px; font-weight:600; letter-spacing:.03em;
  padding:2px 7px; border-radius:20px;
  background:var(--surface-2); color:var(--text-muted);
}
.bkd-fb-req.is-required { background:var(--primary-dim); color:var(--accent-strong); }

/* ── Notifications timeline ───────────────────────────────────
   Reminders are points on the run-up to a meeting, so they are drawn as
   one: a rail with a dot per message, newest-to-the-meeting last. The old
   UI was a raw minutes box and a channel dropdown with no sense of when
   anything happened relative to anything else. */
.bkd-tl { position:relative; padding-left:22px; max-width:600px; }
.bkd-tl::before {
  content:''; position:absolute; left:5px; top:14px; bottom:26px;
  width:1px; background:var(--border);
}
.bkd-tl-item { position:relative; padding:11px 0; border-bottom:1px solid var(--border-light); }
.bkd-tl-item::before {
  content:''; position:absolute; left:-21px; top:18px;
  width:9px; height:9px; border-radius:50%;
  background:var(--surface); box-shadow:inset 0 0 0 2px var(--text-subtle);
}
.bkd-tl-item.is-on::before { box-shadow:inset 0 0 0 2px var(--primary); background:var(--primary); }
.bkd-tl-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bkd-tl-when { flex:1 1 150px; min-width:0; font-size:var(--fs-base); color:var(--text); }
.bkd-tl-fixed { font-size:var(--fs-base); color:var(--text); }
.bkd-tl-sub { margin-top:3px; font-size:var(--fs-xs); color:var(--text-muted); line-height:1.55; }
.bkd-tl-add { margin-top:12px; }

/* ── Live preview ─────────────────────────────────────────────
   A real <iframe> of the real public page, not a drawing of one. It is
   the only preview that cannot drift from what a stranger sees. */
.bkd-pv { border-left:1px solid var(--border); background:var(--bg); display:flex; flex-direction:column; min-width:0; }
.bkd-pv-bar {
  display:flex; align-items:center; gap:8px; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.bkd-pv-label { font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-subtle); }
.bkd-pv-devices { display:flex; gap:2px; }
.bkd-pv-device {
  display:inline-flex; align-items:center; gap:5px; padding:5px 9px;
  background:transparent; border:1px solid transparent; border-radius:var(--radius-sm);
  color:var(--text-muted); font-size:var(--fs-xs); font-family:inherit; cursor:pointer;
  transition:color .15s, background .15s, border-color .15s;
}
.bkd-pv-device:hover { color:var(--text); background:var(--surface-2); }
.bkd-pv-device.is-active { color:var(--text); background:var(--primary-dim); border-color:var(--primary); }
/* The frame is rendered at a REAL viewport width and scaled down to fit the
   column, rather than squeezed into it. Squeezed, a 371px-wide iframe made
   the public page serve its own mobile layout — so the Desktop button
   showed the phone view, which is worse than no preview at all. The scale
   is computed in JS from the stage's measured width (see fitPreview). */
/* ⚠️ A `transform` DOES NOT CHANGE LAYOUT SIZE. Scaling the shell and then
   sizing it to the frame's real 1180×860 left an 860px-tall box in the
   layout while only 329px of it was painted — the editor row grew to 939px
   and the settings column ran 500px past its own content. Measured on the
   real page. So the SHELL carries the scaled size and clips, and the
   TRANSFORM sits on the iframe inside it. Both numbers come from
   fitPreview(); neither is in this stylesheet. */
.bkd-pv-stage { padding:14px; display:flex; justify-content:center; overflow:auto; min-height:200px; }
.bkd-pv-shell {
  overflow:hidden; flex:none; align-self:flex-start;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff;
}
.bkd-pv-frame { border:0; display:block; background:#fff; transform-origin:top left; }
.bkd-pv-stage.is-mobile .bkd-pv-shell { border-radius:10px; }
/* Shown instead of the frame when the page has never been saved, or when
   the draft is ahead of what the public URL would serve. Honest: the
   preview is the LIVE page, so it cannot show unsaved work. */
.bkd-pv-hold {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:32px 20px; margin:auto;
  font-size:var(--fs-sm); color:var(--text-muted); max-width:280px; line-height:1.6;
}
@media (max-width:1399px) {
  .bkd-pv { border-left:0; border-top:1px solid var(--border); grid-column:1 / -1; }
  .bkd-pv-stage { min-height:520px; }
}

/* ── Editor: narrow ───────────────────────────────────────────
   Under 900 the section nav becomes a scrolling strip above the content —
   still every section, still its current value, one line each. */
@media (max-width:900px) {
  .bkd-ed-grid, .bkd-ed-grid.has-preview { grid-template-columns:minmax(0,1fr); }
  .bkd-ed-nav {
    border-right:0; border-bottom:1px solid var(--border);
    display:flex; overflow-x:auto; padding:0; scrollbar-width:none;
  }
  .bkd-ed-nav::-webkit-scrollbar { display:none; }
  .bkd-ed-navitem { width:auto; flex:none; padding:10px 14px; white-space:nowrap; }
  .bkd-ed-navitem.is-active::before { box-shadow:inset 0 -2px 0 var(--primary); }
  .bkd-ed-navval { display:none; }
  .bkd-ed-body { padding:18px 16px 26px; }
}

/* ── Booking activity ─────────────────────────────────────────
   What came through the doors — a person, which page they used, when
   they booked and when the call is. NOT a calendar: no grid, no month,
   nothing about the coach's own schedule. */
.bkd-act-group {
  position:sticky; top:0; z-index:2;
  padding:12px 12px 6px; font-size:10px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-subtle); background:var(--bg);
}
.bkd-act-row {
  display:grid;
  grid-template-columns:minmax(170px,1.4fr) minmax(130px,1fr) minmax(150px,1.1fr) 128px auto;
  gap:14px; align-items:center;
  padding:12px; border-bottom:1px solid var(--border-light);
  transition:background .12s;
}
.bkd-act-row:hover { background:var(--surface-2); }
.bkd-act-who { font-size:var(--fs-base); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bkd-act-mail { margin-top:3px; font-size:var(--fs-xs); color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:900px) {
  .bkd-act-row { grid-template-columns:minmax(0,1.4fr) minmax(0,1.1fr) auto; }
  .bkd-act-col-page, .bkd-act-cell-page { display:none; }
}
@media (max-width:640px) {
  .bkd-act-row { display:block; }
  .bkd-act-row > * + * { margin-top:8px; }
}

/* ── Analytics ────────────────────────────────────────────────
   One number per question, and a recessed groove for anything that is a
   share of a whole. Royal Sapphire is the only series colour; semantic
   colours mean a problem, never a category. */
.bkd-an-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.bkd-an-cell { background:var(--surface); padding:16px 18px; }
.bkd-an-label { font-size:var(--fs-xs); color:var(--text-muted); }
.bkd-an-value { margin-top:6px; font-size:var(--fs-3xl); font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.bkd-an-sub { margin-top:4px; font-size:var(--fs-xs); color:var(--text-subtle); }
/* Recessed groove — cut INTO the panel, never a floating bar. --groove is
   darker than every surface for exactly this. */
.bkd-groove {
  height:8px; border-radius:4px; background:var(--groove);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.03);
  padding:2px; margin-top:10px;
}
.bkd-groove-fill { height:4px; border-radius:2px; background:var(--primary); min-width:2px; }
.bkd-an-note { margin-top:18px; }

/* ── Create-page dialog ───────────────────────────────────────
   Four questions, not forty. Everything else is configured after the page
   exists, in the editor, where it can be previewed. */
.bkd-modal-overlay {
  position:fixed; inset:0; z-index:2400; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(0,0,0,.6);
}
.bkd-modal {
  width:100%; max-width:440px; max-height:90vh; overflow:auto;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 16px 48px rgba(0,0,0,.5);
}
.bkd-modal-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:18px 20px 6px;
}
.bkd-modal-head h2 { font-size:var(--fs-lg); font-weight:600; color:var(--text); }
.bkd-modal-head p { margin-top:4px; font-size:var(--fs-xs); color:var(--text-muted); line-height:1.55; }
.bkd-modal-body { padding:14px 20px 4px; }
.bkd-modal-body .bkd-field { max-width:none; }
.bkd-modal-foot {
  display:flex; justify-content:flex-end; gap:8px;
  padding:14px 20px 18px;
}
.bkd-iconbtn {
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:var(--radius-sm);
  background:transparent; border:none; color:var(--text-subtle); cursor:pointer;
  transition:color .15s, background .15s;
}
.bkd-iconbtn:hover { color:var(--text); background:var(--surface-hover); }

/* ── Row overflow menu ────────────────────────────────────────
   Fixed-positioned against the button that opened it, so a row deep in a
   scrolling list does not push the menu off screen. There is no shared
   menu component in this stylesheet — every module that needs one builds
   it (checked: no .context-menu, .dropdown-menu or .popover exists). */
.bkd-menu {
  min-width:196px; padding:5px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 10px 32px rgba(0,0,0,.45);
}
.bkd-menu-item {
  display:block; width:100%; text-align:left; font-family:inherit;
  padding:8px 10px; border:none; border-radius:var(--radius-sm);
  background:transparent; color:var(--text); font-size:var(--fs-sm); cursor:pointer;
}
.bkd-menu-item:hover:not(:disabled) { background:var(--surface-hover); }
.bkd-menu-item:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.bkd-menu-item:disabled { color:var(--text-subtle); cursor:default; }

/* ── Share dialog ─────────────────────────────────────────────
   Three shapes of the same link, because all three really resolve
   (public-booking-page.js resolveCoachId) and only one of them is worth
   pasting into an Instagram bio. Each row says what it is, so a coach
   picks rather than guesses. */
.bkd-share-list { display:flex; flex-direction:column; gap:10px; }
.bkd-share-item {
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 12px; background:var(--surface-2);
}
.bkd-share-item.is-best { border-color:var(--primary); background:var(--primary-dim); }
.bkd-share-kind {
  display:flex; align-items:center; gap:6px;
  font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-subtle); margin-bottom:5px;
}
.bkd-share-item.is-best .bkd-share-kind { color:var(--accent-strong); }
.bkd-share-url {
  display:flex; align-items:center; gap:8px;
}
.bkd-share-url code {
  flex:1; min-width:0; font-family:inherit; font-size:var(--fs-sm); color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bkd-share-why { margin-top:6px; font-size:var(--fs-xs); color:var(--text-muted); line-height:1.5; }

/* ── Settings → Team ──────────────────────────────────────────
   Half-tint CRM palette. ⚠️ Status is a WORD first and a tint second —
   the tint alone would be invisible to a colourblind reader, which
   includes the person who owns this product. */
.team-invite-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 200px auto;
  gap: 10px;
  align-items: center;
  margin: 18px 0 6px;
}
/* ⚠️ BOTH INPUT TYPES, not just email. This row started as email-only and the
   name box arrived later as type="text", which matched nothing and rendered
   as a raw browser input next to three styled controls. */
.team-invite-row input[type="text"],
.team-invite-row input[type="email"],
.team-invite-row select,
.team-role {
  background: #13171C;
  border: 1px solid #1D2228;
  border-radius: 6px;
  color: #E3E8EE;
  padding: 9px 11px;
  font-size: 13.5px;
  min-height: 38px;
}
.team-invite-row input[type="text"]::placeholder,
.team-invite-row input[type="email"]::placeholder { color: #6F7C8D; }
.team-invite-row input[type="text"]:focus,
.team-invite-row input[type="email"]:focus,
.team-invite-row select:focus,
.team-role:focus { outline: 2px solid #2557d6; outline-offset: 1px; border-color: #2557d6; }
.team-role-hint { grid-column: 1 / -1; margin: 2px 0 0; min-height: 18px; }

.team-list { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.team-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: #13171C;
  border: 1px solid #171B20;
  border-radius: 8px;
}
.team-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.team-email { color: #E3E8EE; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-role-static { color: #A4AFBE; font-size: 13.5px; }
.team-actions { display: flex; gap: 8px; justify-content: flex-end; }
.team-you { color: #6F7C8D; font-size: 12.5px; }

.team-badge {
  flex: none;
  font-size: 11.5px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  color: #E3E8EE;
  background: color-mix(in srgb, var(--team-badge-tint) 22%, #171B20);
  border: 1px solid color-mix(in srgb, var(--team-badge-tint) 45%, transparent);
}

@media (max-width: 720px) {
  .team-invite-row, .team-row { grid-template-columns: 1fr; }
  .team-actions { justify-content: flex-start; }
}

/* ── Settings → Team: the roles matrix ────────────────────────── */
.team-role-editor {
  margin-top: 16px;
  padding: 16px;
  background: #13171C;
  border: 1px solid #1D2228;
  border-radius: 8px;
}
.team-role-editor input[type="text"] {
  background: #171B20;
  border: 1px solid #1D2228;
  border-radius: 6px;
  color: #E3E8EE;
  padding: 9px 11px;
  font-size: 13.5px;
  min-height: 38px;
  width: 100%;
}
.team-role-editor input[type="text"]::placeholder { color: #6F7C8D; }
.team-role-editor input[type="text"]:focus { outline: 2px solid #2557d6; outline-offset: 1px; border-color: #2557d6; }

.team-matrix {
  display: grid;
  /* ⚠️ ONE COLUMN, ON PURPOSE. This was a self-filling grid of narrow boxes,
     which broke each family across the page and left the reader hunting for
     which heading a tick box belonged to. Deciding what a setter may touch is
     read family by family, top to bottom, so the families run down the page in
     one column and each one is as tall as its own list. */
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
.team-matrix-group {
  border: 1px solid #1D2228;
  border-radius: 8px;
  padding: 10px 12px 12px;
  margin: 0;
  min-width: 0;
}
.team-matrix-group legend {
  color: #A4AFBE;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 0 6px;
}
.team-perm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  font-size: 13px;
  color: #E3E8EE;
  cursor: pointer;
  min-height: 30px;
}
/* The tick box is the SAME CONTROL as the notification matrix's channel cell
   (.comms-pill) — hollow with a faint dot when off, filled with a ✓ when on,
   dashed and dimmed when it is not yours to change. Two matrices that ask the
   same question should not answer it in two different shapes.
   ⚠️ STILL A REAL <input type="checkbox">, only wearing the pill. appearance:
   none takes the browser's own box away and leaves everything else — the label
   click, the space bar, the screen reader, and `:checked` — exactly as it was,
   which is what team-role-save reads the ticked keys out of.
   ⚠️ State is FILL + GLYPH, never colour alone; the person who owns this
   product is colourblind. */
.team-perm input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  margin: 0;
  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;
}
.team-perm input[type="checkbox"]::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}
.team-perm:hover input[type="checkbox"]:not(:disabled) {
  border-color: var(--text-muted);
  color: var(--text-primary);
}
.team-perm input[type="checkbox"]:checked {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  color: var(--primary);
}
.team-perm input[type="checkbox"]:checked::before {
  content: '\2713';
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  opacity: 1;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.team-perm input[type="checkbox"]:disabled {
  border-style: dashed;
  cursor: not-allowed;
  opacity: 0.5;
}
.team-perm input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* ⚠️ NO text-transform. The labels used to be chopped out of the key and
   arrived lowercase, so this capitalised them — which now fights the written
   ones and produces "Add A Lead". They are sentence case as typed. */
.team-perm span { text-transform: none; }
/* ⚠️ Locked rows say WHY in words. A greyed checkbox with no explanation reads
   as a bug, and the reason matters: these stay with the account owner. */
.team-perm-locked { color: #6F7C8D; cursor: not-allowed; }
.team-perm-locked input { cursor: not-allowed; }
.team-perm-note {
  margin-left: auto;
  font-size: 10.5px;
  color: #6F7C8D;
  text-transform: none;
  white-space: nowrap;
}

/* Name leads, email sits under it — the list is scanned by who, not by
   address, and the address is only there to tell two Sarahs apart. */
.team-person { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.team-name {
  color: #E3E8EE; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.team-person .team-email { font-size: 11.5px; color: #6F7C8D; }

/* ── Client profile: who is coaching them ─────────────────────
   Sits under the identity row. Hidden entirely on a solo account — the
   element ships with [hidden] and only the painter removes it, so a coach
   with no team never sees a control for a team they do not have. */
.ph-coach {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.ph-coach-label { color: var(--text-muted); }
.ph-coach-name { color: var(--text); font-weight: 500; }
.ph-coach-select {
  background: #13171C;
  border: 1px solid #1D2228;
  border-radius: 6px;
  color: #E3E8EE;
  font-family: inherit;
  font-size: 13px;
  padding: 5px 9px;
  min-height: 30px;
  cursor: pointer;
}
.ph-coach-select:focus { outline: 2px solid #2557d6; outline-offset: 1px; border-color: #2557d6; }
.ph-coach-select:disabled { opacity: 0.5; cursor: wait; }

/* ── Owner-only controls ──────────────────────────────────────
   A team member types in-app and nothing else: a text or an email leaves on
   the account's own number and verified domain, which is the business's
   identity and its bill. messages-send refuses them server-side, and this is
   what stops the button being there to press in the first place.

   ⚠️ CSS, NOT JAVASCRIPT, ON PURPOSE. These controls are rendered from four
   different places — the Clients bulk bar in index.html and three separate
   email-reply buttons built at different moments in the thread — and a member
   check at each render site is a check somebody forgets at the fifth. The body
   carries `member-mode` from the moment a member boots, so marking a control
   `data-owner-only` is the whole of it.

   ⚠️ THIS IS NOT THE LOCK. It hides an affordance; the server is what refuses
   the send. Anything marked here must already be refused there. */
body.member-mode [data-owner-only] { display: none !important; }

/* Mirror of the rule above, for a control that exists ONLY for a team
   member — the account owner already has this exact control somewhere else
   on the page (see the control's own comment for where), and showing both
   at once would let two copies of one value drift apart on screen even
   though they read the same switch. Hidden until body actually carries
   member-mode. Ruling J83 — the Atlas voice card on the Security tab. */
body:not(.member-mode) [data-member-only] { display: none !important; }

/* The narrowing control on a permission that supports one — today only
   "View leads". Sits at the end of its row, after the label. Clicking it must
   not toggle the tick box it lives inside, which is what the inline
   stopPropagation is for. */
.team-perm-scope {
  margin-left: auto;
  background: #171B20;
  border: 1px solid #1D2228;
  border-radius: 5px;
  color: #A4AFBE;
  font-family: inherit;
  font-size: 11.5px;
  padding: 3px 6px;
  cursor: pointer;
}
.team-perm-scope:focus { outline: 2px solid #2557d6; outline-offset: 1px; }
.team-perm-locked .team-perm-scope { display: none; }

/* ── A team member who cannot get in ──────────────────────────
   Replaces the whole page. Deliberately plain: this person is not a coach,
   has never seen this product, and the only useful thing on screen is the
   sentence telling them who to ask. */
.member-refused {
  max-width: 460px;
  margin: 18vh auto 0;
  padding: 0 24px;
  text-align: center;
  font-family: -apple-system, "system-ui", "Segoe UI", sans-serif;
  color: #E3E8EE;
}
.member-refused h1 { font-size: 20px; font-weight: 600; margin: 0 0 10px; letter-spacing: -0.01em; }
.member-refused p  { font-size: 14px; line-height: 1.6; color: #A4AFBE; margin: 0 0 22px; }

/* ── Jarvis command bar ─────────────────────────────────────────── */
/* ⚠️ TOKENS ONLY. The dashboard has a light theme; a hardcoded dark palette
   here is invisible text on a white page. */
/* ⚠️ z-index 100010 — RULING J64. 900 sat BENEATH most of the app's real
   overlays: the toast stack (.toast-stack, then 1000, 9500 since 2026-10-06), the Global Search /
   drill-down / old corner chat band (all 9000), and .crm-dialog-overlay
   (100002) — the confirm/alert band this file's own comment above already
   calls the ceiling, "above every App Studio modal". A coach who triggered
   Jarvis while any of those was open got an invisible bar underneath it
   (Task 11 review, Critical #1 note / Important #2). Jarvis is a global,
   keyboard-triggered utility meant to be reachable from anywhere — the same
   reasoning crm-dialog-overlay's own comment gives for ITS value — so it
   goes above the whole band rather than hunting for a gap inside it. */
.jarvis {
  position: fixed; inset: 0; z-index: 100010;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 14vh;
}
/* ⚠️ [hidden] MUST WIN OVER display: flex. The UA sheet's [hidden] { display: none }
   loses to any author display value on the same element, so close() setting
   el.hidden = true left the bar and its dimmed backdrop on screen until a
   reload (owner, 2026-09-16 11:30 CDT). Same pattern as every other widget
   in this file that pairs a display rule with a [hidden] rule. */
.jarvis[hidden] { display: none; }
/* ── The Atlas signature border (glow-brief.md, 2026-09-16) ────────────
   A wrapper AROUND the panel, never a pseudo-element INSIDE it — the panel
   keeps `overflow: hidden` (its card content still needs that clip), and a
   ring painted from inside it would have been cut off on every edge, which
   is exactly what the first mockup got wrong and the owner caught. `::before`
   is the ring itself, a conic gradient read from `--a` (the driver's own
   angle, modules/jarvis/glow.js — there are no CSS keyframes anywhere here);
   `::after` is the soft halo, offset further out so it never gets clipped by
   the frame's own box either. `isolation: isolate` gives the three layers
   (halo behind, ring, panel in front) their own stacking context, so their
   z-index only has to make sense relative to each other.
   Resting defaults below are the driver's own starting values — a coach
   with JS disabled or before glow.js's first frame runs still sees the calm,
   correct ring, never a blank one. */
.jarvis-frame {
  width: min(640px, calc(100vw - 40px));
  position: relative;
  padding: 2px;
  border-radius: 8px;
  isolation: isolate;
  --a: 0deg;
  --arc: 70deg;
  --halo: 14px;
  --halo-mix: 25%;
  --head: var(--accent);
  --tail: color-mix(in srgb, var(--accent) 35%, transparent);
}
.jarvis-frame::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 8px;
  z-index: 0;
  background: conic-gradient(from var(--a),
    transparent 0deg, transparent calc(360deg - var(--arc)),
    var(--tail) calc(360deg - var(--arc)), var(--head) calc(360deg - 14deg), #fff 360deg);
}
.jarvis-frame::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 12px;
  z-index: -1;
  pointer-events: none;
  box-shadow: 0 0 var(--halo) color-mix(in srgb, var(--accent) var(--halo-mix), transparent);
}
/* ⚠️ COLOUR IS NEVER THE ONLY SIGNAL, HERE EITHER (Clayton is colourblind) —
   the ring is decoration on top of the existing "Listening for your answer"
   text and the spoken line already on the card, never their replacement. */
@media (prefers-reduced-motion: reduce) {
  .jarvis-frame::before { background: color-mix(in srgb, var(--accent) 55%, transparent); }
}
.jarvis-panel {
  position: relative; z-index: 1;
  width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 16px 48px rgba(0,0,0,.35);
  overflow: hidden;
}
.jarvis-input {
  width: 100%; padding: 16px 18px; font-size: 16px;
  background: transparent; border: 0; color: var(--text); outline: none;
}
/* ⚠️ outline:none ABOVE IS NOT LEFT WITHOUT A REPLACEMENT (Important #6) —
   this is the one focusable element in the panel today, auto-focused on open
   and refocused after every request (index.js), so it must never be
   invisible when focused. Inset, because .jarvis-panel clips overflow and an
   outward ring flush against the panel's own edge would be cut off there. */
.jarvis-input:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.jarvis-input::placeholder { color: var(--text-muted); }
.jarvis-out:not(:empty) { border-top: 1px solid var(--border); padding: 14px 18px; }
.jarvis-line { font-size: 15px; color: var(--text); line-height: 1.5; }
.jarvis-detail { font-size: 14px; color: var(--text-muted); line-height: 1.55; margin-top: 8px; }
.jarvis-detail div { margin-bottom: 3px; }
/* ⚠️ PRODUCTION HOTFIX 2026-09-16 — the voice's own one-time setup notice
   (result.js's speak(), on a 409 from jarvis-speak). Same muted, secondary
   treatment as .jarvis-detail on purpose — it is a plain aside under the
   card's real answer, never a second headline — but its own class, because
   .jarvis-detail already means "this card's preview lines" elsewhere in this
   file and the two must never collide inside the same node. */
.jarvis-voice-note { font-size: 14px; color: var(--text-muted); line-height: 1.55; margin-top: 8px; }
/* ⚠️ TASK 16 — BOTH FORKS GO ON ONE CARD, AS FIELDS RATHER THAN BUTTONS.
   Swapping an exercise forks twice (this workout only or every week from here;
   this client only or everyone on the shared program), and asking those as two
   dialogues after the sentence is three interactions for one spoken command.
   These sit between the card's detail lines and its go button, already
   answered with the narrowest reading, so a coach who ignores them entirely
   still gets the sensible thing.
   ⚠️ COLOUR IS NEVER THE ONLY SIGNAL — Clayton is colourblind. The picked chip
   carries a ✓ in its own label and aria-pressed in the accessibility tree
   (result.js); the accent tint here is the third signal, not the first. */
.jarvis-choices { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.jarvis-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.jarvis-choice-ask { flex: 1 0 100%; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.jarvis-chip {
  font-size: 13px; padding: 5px 11px; border-radius: 4px;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer;
}
.jarvis-chip:hover, .jarvis-chip:focus-visible { border-color: var(--accent); color: var(--text); }
.jarvis-chip[data-on="1"] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text); font-weight: 600; cursor: default;
}

.jarvis-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.jarvis-opt {
  font-size: 13px; padding: 6px 12px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer;
}
.jarvis-opt:hover, .jarvis-opt:focus-visible { border-color: var(--accent); color: var(--text); }

/* ⚠️ COLOUR IS NEVER THE ONLY SIGNAL — Clayton is colourblind, and a coach
   reading fast does not parse hue either. The amber border is the third signal
   here, not the first: the button's own words say what it does ("Cancel
   session", not "Confirm"), and the ⚠ glyph marks it without any colour at all.
   ⚠️ --warning, NOT --amber — styles.css has no --amber token (it would have
   fallen back to its own literal #f59e0b, which happens to equal --warning's
   value, but "close because it happens to match" is exactly what Ruling J20
   forbids; --warning is the real token this codebase already uses for amber). */
.jarvis-opt[data-kind="danger"] {
  border-color: color-mix(in srgb, var(--warning) 50%, var(--border));
  color: var(--warning);
  font-weight: 600;
}
.jarvis-opt[data-kind="danger"]::before { content: "⚠ "; }

/* ⚠️ Task 12 addendum — "colour is never the only signal" applies to the
   CARD too, not just the dangerous button above. A confirm card and a
   question card both block until the coach acts; this label says so in
   words, so the ONLY signal a colourblind coach gets that something is
   waiting is never a tint they cannot read. Sapphire accent at a low mix so
   it reads as a status, not another button. */
.jarvis-waiting {
  display: inline-block; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 4px; padding: 3px 8px; margin-top: 8px;
}

/* ===== LEAD ENGINE — SHELL-OWNED RULES ==========================
   ⚠️ THESE LIVE HERE ON PURPOSE, NOT BY ACCIDENT. Two reasons:

   1. The Lead Engine's rail is STATIC MARKUP in index.html
      (#view-lead-engine .le-sidebar). It is on screen and clickable about
      200 ms after load, while the 199 KB module that wires it is still
      downloading — app.js:206-228 exists entirely because of that gap. If
      its CSS shipped with the module, the rail would paint unstyled first.

   2. The --le-* tokens are read by floating layers that append to
      document.body, OUTSIDE .le-view. Scoping them to .le-view resolved
      them to nothing; that is why they were at :root in lead-engine.css and
      why they are at :root here.

   Everything else that starts .le- / .le7c- stays in lead-engine.css, which
   is now loaded on demand by _ensureLeadEngineCss() in app.js.
   ================================================================ */

/* ⚠️ TOKENS ON :root, LAYOUT ON .le-view — AND THAT SPLIT IS LOAD-BEARING.
   These used to live only inside `.le-view`, which meant every floating layer —
   modals, dialogs, menus — resolved them to NOTHING, because they are appended
   to `document.body` and body is outside that scope. `var(--le-surface)` with no
   fallback is not an error; it just inherits, so the Charge & add client dialog
   computed to `rgba(0,0,0,0)`: a transparent panel with a text-coloured border.
   The CRM has already documented this exact failure once, for --accent-strong
   (styles.css:56-63). Declaring the values here fixes every layer at once.

   ⚠️ DO NOT MOVE THE LAYOUT DECLARATIONS UP HERE. `.le-view` also carries
   `display:flex !important` and the `.le-view.hidden` override exists only to
   outrank it — hoisting those to :root would paint the Lead Engine over every
   other screen. */
:root {
  /* ⚠️ THESE MIRROR :root IN styles.css AND MUST NOT DRIFT AGAIN. The CRM moved
     off the navy ground on 2026-09-05 ("The CRM's greys stop reading as navy",
     9dd927d5) and this fork was missed, so the Lead Engine went on rendering
     #0d1117 / #161c27 / #313d54 — the 35%-saturation blue that was rejected —
     while every other screen sat on the half tint. Same hue, same lightness,
     half the saturation is the whole point of the correction.

     The fork itself is NOT removable: this rule also carries the Lead Engine's
     layout contract (`display: flex !important` and friends below), and
     `.le-view.hidden { display: none !important }` further down exists only to
     outrank it. Deleting the block to "just inherit :root" leaves the Lead
     Engine painted on top of every other CRM screen. Change the VALUES here;
     leave the declarations alone. */
  --le-bg:            #0E1014;
  --le-surface:       #171B20;
  --le-surface-2:     #1D2228;
  --le-surface-hover: #22282F;
  --le-surface-elev:  #1A1F25;
  --le-border:        rgba(255, 255, 255, 0.07);
  --le-border-light:  rgba(255, 255, 255, 0.05);

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

  --le-ig-grad:       linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

  --le-success:       #22c55e;
  --le-warning:       #f59e0b;
  --le-warning-text:  #f59e0b;
  --le-warning-dim:   rgba(245, 158, 11, 0.12);
  --le-danger:        #ef4444;

  /* AI lead-temperature (#16): hot / warm / cold + tinted backgrounds */
  --le-hot:           #f87171;
  --le-hot-bg:        rgba(248, 113, 113, 0.14);
  --le-warm:          #fbbf24;
  --le-warm-bg:       rgba(251, 191, 36, 0.15);
  --le-cold:          #94a3b8;
  --le-cold-bg:       rgba(148, 163, 184, 0.14);

  --le-text:          #E3E8EE;
  --le-text-muted:    #A4AFBE;
  --le-text-subtle:   #6F7C8D;

  --le-row-border:    rgba(255, 255, 255, 0.04);
  --le-hover-overlay: rgba(255, 255, 255, 0.07);

  --le-radius:        6px;
  --le-radius-sm:     4px;
  --le-radius-lg:     10px;

}

/* ── Light theme ─────────────────────────────────────────────
   Lead Engine rides the platform theme: applyTheme() sets
   [data-theme="light"] on <html>. We remap only the --le-* COLOR
   tokens to the platform's light palette (from styles.css
   [data-theme="light"]) so Lead Engine matches the rest of the CRM.
   Radii / layout tokens are unchanged. */
:root[data-theme="light"], [data-theme="light"] .le-view {
  --le-bg:            #f1f4f9;
  --le-surface:       #ffffff;
  --le-surface-2:     #f5f7fb;
  --le-surface-hover: #edf1f7;
  --le-surface-elev:  #ffffff;
  --le-border:        #dde3ed;
  --le-border-light:  #edf1f7;

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

  --le-success:       #16a34a;
  --le-warning:       #d97706;
  --le-warning-text:  #92400e;
  --le-warning-dim:   rgba(245, 158, 11, 0.12);
  --le-danger:        #dc2626;

  --le-hot:           #e11d48;
  --le-hot-bg:        rgba(225, 29, 72, 0.10);
  --le-warm:          #d97706;
  --le-warm-bg:       rgba(217, 119, 6, 0.12);
  --le-cold:          #64748b;
  --le-cold-bg:       rgba(100, 116, 139, 0.12);

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

  --le-row-border:    rgba(0, 0, 0, 0.06);
  --le-hover-overlay: rgba(0, 0, 0, 0.04);
}

.le-view {
  /* Take over the full CRM main area */
  padding: 0 !important;
  background: var(--le-bg);
  color: var(--le-text);
  font-size: 14px;
  line-height: 1.45;
  display: flex !important;
  flex-direction: column;
  /* Fill the scroll area minus the in-flow footer (same pattern as inbox/clients). */
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.le-view.hidden { display: none !important; }

.le-shell {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Sub-sidebar: collapsible section rail ───────────────── */
.le-sidebar {
  width: 56px;
  flex-shrink: 0;
  background: var(--le-surface);
  border-right: 1px solid var(--le-border-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0;
  gap: 4px;
  transition: width 0.18s ease;
}
.le-sidebar.expanded {
  width: 184px;
  align-items: stretch;
  padding: 14px 10px;
}
.le-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.le-sidebar.expanded .le-sidebar-brand { padding: 0 6px; }
.le-sidebar-logo {
  width: 32px;
  height: 32px;
  background: var(--le-ig-grad);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 1px 6px rgba(220, 39, 67, 0.3);
}
.le-sidebar-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--le-text);
  white-space: nowrap;
  display: none;
}
.le-sidebar.expanded .le-sidebar-name { display: inline; }
.le-sidebar-btn {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--le-text-subtle);
  border-radius: var(--le-radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.le-sidebar.expanded .le-sidebar-btn {
  width: 100%;
  height: 38px;
  justify-content: flex-start;
  gap: 11px;
  padding: 0 9px;
}
.le-sidebar-btn:hover:not(.le-disabled) {
  background: var(--le-surface-2);
  color: var(--le-text);
}
.le-sidebar-btn.active {
  background: var(--le-primary-dim);
  color: #6e92ff;
}
.le-sidebar-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.le-sidebar-btn.le-disabled { opacity: 0.32; cursor: not-allowed; }
.le-sidebar-label {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  display: none;
}
.le-sidebar.expanded .le-sidebar-label { display: inline; }
/* Hover tooltip — only when collapsed (the label is visible when expanded). */
.le-sidebar:not(.expanded) .le-sidebar-btn:hover::after,
.le-sidebar:not(.expanded) .le-sidebar-collapse:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 46px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--le-surface);
  border: 1px solid var(--le-border);
  color: var(--le-text);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: var(--le-radius);
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  z-index: 30;
  pointer-events: none;
}
/* Collapse toggle at the bottom of the rail */
.le-sidebar-collapse {
  margin-top: auto;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--le-text-subtle);
  border-radius: var(--le-radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.le-sidebar.expanded .le-sidebar-collapse {
  width: 100%;
  justify-content: flex-start;
  padding: 0 9px;
}
.le-sidebar-collapse:hover { background: var(--le-surface-2); color: var(--le-text); }
.le-sidebar-collapse svg { width: 17px; height: 17px; flex-shrink: 0; transition: transform 0.18s; }
.le-sidebar.expanded .le-sidebar-collapse svg { transform: rotate(180deg); }

/* Connected account + Disconnect at the sidebar bottom — reachable in review mode */
.le-sidebar-account {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}
.le-sidebar-account.hidden { display: none; }
.le-sidebar-acct-handle {
  font-size: 11px;
  color: var(--le-text-subtle);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.le-sidebar:not(.expanded) .le-sidebar-acct-handle { display: none; }
.le-sidebar-disconnect:hover { background: rgba(239, 68, 68, 0.12) !important; color: var(--le-danger) !important; }

/* ============================================================
   AMOUNT OWED + BALANCE PAST DUE (2026-09-18)
   ============================================================
   The two billing surfaces from the approved mockup
   (mockups/charge-balance-switch-2026-09-18.html): the client
   profile's "Amount owed" card, and the Charge card modal's
   New payment / Balance past due switch. Every rule below
   follows a convention already in this file rather than
   inventing a fresh one — each says which. */

/* ⚠️ `[hidden]` IS A UA RULE AND LOSES TO ANY AUTHOR `display:`. The host
   starts hidden and only appears once Stripe has answered with something to
   show, so it needs its own rule — the same lesson as .c2-grp, .sc-overlay and
   .bkd-field above. Guarded by
   modules/__tests__/a-hidden-billing-element-stays-hidden.test.mjs. */
.amount-owed-host[hidden] { display: none; }

/* The status line under the unpaid payments, and the "we could not ask
   Stripe" line. Same 20px side gutter as .profile-card .card-header, so it
   lines up with the heading above it. */
.owed-note { padding: 10px 20px 0; }

/* Action row inside the Amount owed card — same gap/pad rhythm as
   .modal-footer and .confirm-actions. */
.owed-actions { display: flex; gap: 8px; padding: 14px 20px 20px; flex-wrap: wrap; }
/* Paid another way (10/14): Another card is a menu under its button, in the Options menu's look, opening down and to
   the right so it stays on the card; each item says what it does under its name. */
.owed-menu-wrap { position: relative; display: inline-flex; }
.owed-menu-btn { display: inline-flex; align-items: center; gap: 6px; }
.owed-menu.profile-options-dropdown { left: 0; right: auto; min-width: 230px; }
.owed-menu .profile-options-item { padding: 10px 16px; }
.owed-menu .owed-menu-t { display: block; }
.owed-menu .owed-menu-d { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); }

/* ── The coach's suspension controls, inside the Amount owed card ──
   From the approved mockup, mockups/crm-suspension-controls-2026-09-18.html.
   Every rule below follows a convention already in this file — cited per rule
   — rather than inventing a fresh visual language, and no rule introduces a
   colour value this sheet did not already carry.
   ⚠️ NO COLOUR-ONLY MEANING (the owner is colorblind). Both badges spell their
   state out in capitals, the suspended one also carries a lock glyph, and
   every state has a full sentence under it. ⚠️ AND NO THICK COLOURED LEFT
   BORDER: the separation is the same hairline every other footer row uses. */

/* The new controls sit under .owed-actions, separated by a hairline — same
   idiom as .cl-fp-actions (border-top + padding-top on a footer row), and the
   same 20px side gutter .owed-note and .owed-actions already use in this card. */
.owed-suspension {
  border-top: 1px solid var(--border);
  padding: 14px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* A quiet, plain-language status line — same size and colour as .form-hint,
   just not nested under a form field. The --warning modifier tints it amber
   for a deadline that is coming; the sentence itself always carries the whole
   meaning in words. */
.owed-suspend-notice { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.owed-suspend-notice--warning { color: var(--warning); }

/* Switch + label row. The same 44x24 .toggle-switch this client's other
   per-profile overrides use, just not squeezed into a .detail-row — this
   switch is a primary control of the card rather than a table row. */
.owed-switch-row { display: flex; align-items: center; gap: 10px; }
.owed-switch-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
/* Helper line under the switch, indented to sit under its label text —
   the 44px switch plus the 10px gap. */
.owed-switch-sub { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; margin-left: 54px; }

/* Plain text action — same idiom as .notif-panel-header button (no
   background, no border, --primary, pointer).
   ⚠️ SCOPED TO THIS CARD, AND IT HAS TO BE. `.btn-text` already exists on two
   OTHER buttons — the choice dialog's Cancel (index.html) and the profile's
   "Reset to default" — which have never had a rule of their own and carry
   inline styles instead. Inline styles beat a class on colour and size but not
   on `padding: 0`, `text-align` or `align-self`, so an unscoped rule here
   would silently reshape both of them. The approved mockup draws every one of
   these buttons inside .owed-suspension, so scoping changes nothing about the
   look that was signed off. */
.owed-suspension .btn-text {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--primary); font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer; text-align: left; align-self: flex-start;
}
.owed-suspension .btn-text:hover { text-decoration: underline; }
.owed-suspension .btn-text:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; }

/* Status badges for the two new states — the same formula and the same
   values as .agreement-badge--pending / --voided above.
   ⚠️ THE FOREGROUNDS ARE TOKENS, NOT LITERALS. --warning is #f59e0b at the
   root, so the arrangement badge renders exactly as the approved mockup drew
   it; writing it once means it cannot drift from the
   .owed-suspend-notice--warning line directly above, which has always read the
   token. (#view-clients retunes --warning for the ROSTER; the client profile
   is #view-client, its sibling, so this badge is unaffected either way.)
   The two rgba tints are the .agreement-badge pair's own values, kept literal
   exactly as those rules keep them. */
.owed-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 4px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.03em;
  align-self: flex-start;
}
.owed-status-badge--arrangement { background: rgba(245,158,11,0.12); color: var(--warning); border: 1px solid rgba(245,158,11,0.28); }
.owed-status-badge--suspended   { background: rgba(239,68,68,0.12); color: var(--danger); border: 1px solid rgba(239,68,68,0.28); }

/* The recorded arrangement's own note and metadata. The note is a coach's
   free text and may run to several lines. */
.owed-arrangement-note { font-size: var(--fs-sm); color: var(--text); line-height: 1.5; }
.owed-arrangement-meta { font-size: var(--fs-xs); color: var(--text-muted); }
.owed-arrangement-meta--muted { color: var(--text-subtle); }

/* Save/Cancel row for the inline arrangement form — same gap as .owed-actions,
   primary first, just as Retry payment leads that row; no extra bottom padding
   since it already sits inside .owed-suspension's own. */
.owed-arrangement-actions { display: flex; gap: 8px; margin-top: 2px; }

/* The arrangement form's fields sit right under the hairline. .form-group's
   own margin-top:22px assumes it is stacking inside a modal body rather than
   following a border, so the first field resets to 0 — the same "first child
   resets its margin" idiom as .profile-tab-panel > .card:first-child. */
.owed-suspension .form-group { margin-top: 12px; }
.owed-suspension .form-group:first-child { margin-top: 0; }

/* Disabled segment of a .session-fmt-toggle pair. No rule existed because
   every current use (Issue Credits' Regular/Make-up switch) has both sides
   always pickable. Same opacity + not-allowed convention as
   .btn-primary:disabled and .fp-nav-btn:disabled.
   ⚠️ THE WORDS CARRY THE STATE, NOT THE DIM. The owner is colorblind, so the
   disabled side is accompanied by the sentence "No balance past due." — the
   opacity is a hint, never the signal. */
.session-fmt-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.session-fmt-btn:disabled:hover { background: transparent; color: var(--text-secondary); }

/* "What is this for?" becomes a fixed, non-editable line in balance mode —
   same input box, just inert. Matches the dim + not-allowed convention
   already used for disabled fields (e.g. .nutrition-field input:disabled),
   which this file did not define for .form-group inputs because none were
   ever disabled before now. */
.form-group input:disabled { opacity: 0.6; cursor: not-allowed; background: var(--surface-2); }

/* Unpaid-payment row inside the charge modal: informational, not a pickable
   radio row, so it borrows .co-card-row's flat bordered idiom (border,
   radius-sm, surface-2 fill — the same row the card picker two fields down
   uses) without the radio dot. */
.co-balance-list { display: flex; flex-direction: column; gap: 6px; }
.co-balance-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 13px; color: var(--text);
}
.co-balance-row .co-balance-date { color: var(--text-muted); }
.co-balance-row .co-balance-amount { font-variant-numeric: tabular-nums; font-weight: 500; }

/* Rows and the fixed description line only exist in balance mode. Both need
   their own [hidden] rule: .co-balance-list is display:flex above, and
   `hidden` on the description's .form-group would lose to any author display
   the same way. */
.co-balance-list[hidden],
.co-balance-group[hidden],
.co-balance-hint[hidden] { display: none; }

/* Owner, 2026-09-18: every charge button reads on TWO lines — the action and
   amount first, the card underneath. One button, two spans; the card line is
   lighter in weight and size, never a different colour (the words carry the
   meaning). */
.btn-charge-2line {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  line-height: 1.2; padding-top: 9px; padding-bottom: 9px;
}
.btn-charge-2line .btn-charge-amount { font-weight: 600; font-size: 14px; }
.btn-charge-2line .btn-charge-card {
  font-weight: 400; font-size: 12px; opacity: .85;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}

/* Narrow screens (the mockup's frame 5): the primary action takes the full
   width and Cancel sits under it, rather than two half-width buttons with a
   two-line label wrapping inside each. */
@media (max-width: 520px) {
  .record-payment-modal .modal-footer,
  .confirm-dialog .confirm-actions {
    flex-direction: column-reverse; align-items: stretch; gap: 8px;
  }
  .record-payment-modal .modal-footer .btn-primary,
  .record-payment-modal .modal-footer .btn-secondary,
  .confirm-dialog .confirm-actions .btn-primary,
  .confirm-dialog .confirm-actions .btn-secondary { width: 100%; justify-content: center; }
  .owed-actions .btn-primary, .owed-actions .btn-secondary { width: 100%; justify-content: center; }
  .owed-actions .owed-menu-wrap { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   SOFTER LOOK — the client profile (Clayton, 2026-10-05)
   ══════════════════════════════════════════════════════════════════════
   "Make it look easier to use ... a bigger radius ... quite a bit of padding on
   different surfaces." Approved from mockups/crm-softer-profile-2026-10-05.html
   (the "Softer" look, built on the live page). Colors, fonts, headlines and
   layout do not change; corners, room and surfaces do.

   One corner scale, sized to what it rounds (a big surface gets a big corner):
     16px  cards and banners          12px  calendar days, tiles, inner panels, chips
     10px  buttons, menus, inputs     pill  status tags, check-in marks, toggles

   ⚠️ THE THIN LINES BETWEEN ROWS STAY. He chose this over a "calmer" version
   without them: "the thin lines that are separating the rows help give structure
   to the page." Don't remove dividers to quiet a screen.

   ⚠️ SCOPED TO .cp2 (the profile and everything it mounts). The rest of the CRM
   still uses the old corners until it gets its own pass; the two corner tokens
   are re-pointed here rather than on :root for that reason. Everything below sits
   after every other .cp2 rule, so equal specificity wins by order. */

.cp2 { --radius: 16px; --radius-sm: 10px; }

/* ── The page and the header ── */
#view-client:has(.cp2) { padding-left: 40px; padding-right: 40px; }
.cp2 .cp2-head { padding: 26px 40px 0; margin: 0 -40px; }
.cp2 .cp2-idrow { gap: 16px; }
.cp2 .cp2-headactions,
.cp2 .cp2-headslot { gap: 10px; }
/* .cp2-btn-sm keeps its own size: it is the compact button in pop-ups. */
.cp2 .cp2-btn:not(.cp2-btn-sm),
.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 { border-radius: 10px; padding: 9px 16px; line-height: 18px; }
.cp2 .cp2-tabs-inline .cp2-tab { padding: 9px 16px 11px; }
.cp2 .cp2-band { gap: 40px; }
.cp2 .cp2-status { padding: 3px 11px; }

/* ── Program tab: the left column, the phases and the calendar each sit on their
   own soft panel with room inside, instead of floating between thin lines. ── */
/* No align-items here: the grid keeps stretching the left column to the calendar's bottom, so the
   program queue still fills that height (Clayton, 2026-07-28) and both panels end on one line. */
.cp2 .cp2-2col { padding-top: 28px; gap: 24px; grid-template-columns: 300px 1fr; }
.cp2 .cp2-coldiv { display: none; }
.cp2 .cp2-rail,
.cp2 .cp2-phbar,
.cp2 .cp2-hero { background: var(--cp2-surface); border: 1px solid var(--cp2-border); border-radius: 16px; }
.cp2 .cp2-rail { padding: 22px 22px 24px; }
.cp2 .cp2-phbar { padding: 18px 24px 20px; }
.cp2 .cp2-hero { padding: 18px 20px 20px; }
.cp2 .cp2-right { gap: 20px; }
/* When the left column is the taller one, the calendar's panel grows to meet it, so both
   columns end on one line. When the calendar is taller (the usual case), the grid already
   stretches the left column to it. */
.cp2 .cp2-right > .cp2-hero { flex: 1 1 auto; }
.cp2 .cp2-rhead { margin-bottom: 10px; }
.cp2 .cp2-rdiv { margin: 20px 0; }
.cp2 .cp2-protochip { border-radius: 12px; padding: 9px 14px; }
.cp2 .cp2-tl-finbar,
.cp2 .cp2-pqueue { border-radius: 12px; padding: 10px 14px; }
.cp2 .cp2-goalchip { border-radius: 999px; padding: 5px 13px; }
.cp2 .cp2-hero .cp2-ptool { padding: 0 0 16px; }
.cp2 .cp2-seg { border-radius: 999px; padding: 3px; gap: 2px; background: var(--cp2-surface-2); }
.cp2 .cp2-seg button { border-radius: 999px; padding: 6px 15px; }
.cp2 .cp2-navbtn { width: 30px; height: 30px; border-radius: 999px; }
.cp2 .cp2-gear { width: 32px; height: 32px; border-radius: 10px; }
/* The calendar's own rules are scoped to its panel (.cp2-hero), so these are too. No min-height:
   the panel's rule already gives a day 96px, and the Week view keeps its taller days. */
.cp2 .cp2-hero .cp2-grid { gap: 8px; }
.cp2 .cp2-hero .cp2-dh { padding: 2px 0 8px; }
.cp2 .cp2-hero .cp2-day { border-radius: 12px; padding: 8px 10px; }
.cp2 .cp2-cimark { border-radius: 999px; padding: 2px 8px; }

/* ── Account tab ── */
.cp2 .cp2-carrytab { padding: 16px 0 40px; }
.cp2 .cp2-acct-h { padding: 26px 2px 12px; margin-bottom: 20px; }
.cp2 .p-grid,
.cp2 .p-col { gap: 24px; }
/* "Amount owed" (shown only when money is owed) sat flush on the cards below; with round
   corners that reads as two boxes colliding. The same gap as between the cards. */
.cp2 .amount-owed-host > .card { margin-bottom: 24px; }
.cp2 .profile-card .card-header { padding: 24px 28px 14px; }
.cp2 .profile-details { padding: 2px 28px 22px; }
.cp2 .detail-row { padding: 12px 0; }
.cp2 .profile-financial { padding: 0 28px 22px; }
.cp2 .ph-header { padding: 0 28px; }
.cp2 .payment-entry { padding: 12px 28px; }
.cp2 .sess-body { padding: 0 28px 26px; }
.cp2 .sess-arrangement { padding: 10px 0 14px; }
.cp2 .sess-summary-strip { margin: 16px 0 8px; }
.cp2 .sess-summary-tile { padding: 14px 8px; }
.cp2 .sess-section { margin-top: 12px; border-radius: 12px; }
.cp2 .sess-section-head { padding: 12px 16px; }
.cp2 .sess-header-actions { gap: 8px; }
.cp2 .btn-record-payment { padding: 7px 14px; }
.cp2 .agreement-badge { border-radius: 999px; padding: 3px 10px; }
.cp2 .custom-select-trigger { padding: 8px 12px; }
/* One button height on the profile (Clayton, 2026-10-08): the buttons in a card's header are 38px, like the header's
   Save Attempt, Options, Tasks and Message. The fill says which is the main action, never a smaller button. */
.cp2 .card-header .btn-primary,
.cp2 .card-header .btn-secondary,
.cp2 .card-header .btn-record-payment { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 38px; padding: 0 16px; border-radius: 10px; line-height: 18px; }
/* The Change billing window (.cb) opens outside .cp2, on the same scale: its dropdowns are the CRM's styled ones
   (upgradeSelects), 38px with 10px corners, a 12px menu and 8px options; its small buttons get the 10px corner. */
.cb .custom-select-trigger { height: 38px; gap: 10px; padding: 0 15px 0 12px; background: var(--surface-2); border-radius: 10px; font-size: var(--fs-base); }
.cb .custom-select-trigger svg { width: 14px; height: 14px; }
.cb .custom-select-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cb .custom-select-dropdown { padding: 4px; border-radius: 12px; background: var(--surface); }
.cb .custom-select-option { padding: 9px 12px; border-radius: 8px; font-size: var(--fs-base); }
.cb .btn-sm { border-radius: 10px; }
.cp2 .onb-card { border-radius: 14px; padding: 18px 22px; }
.cp2 .completion-bar-bg,
.cp2 .completion-bar-fill { border-radius: 999px; }
.cp2 .ci-row { padding: 6px 0; }

/* ── Calls: the Scribe calls with this person (approved mockup profile-calls-2026-10-13.html).
   The card at the bottom of a client's Account tab (client-profile/calls-card.js) and the rows
   of the Calls card on a lead's Overview (lead-engine.css sizes them for the narrow rail) are
   drawn by calls-card-view.js. Same card as the rest of the profile, on the softer scale: 16px
   card (.cp2's --radius), 12px rows, 10px buttons, pill tags. Rows keep thin lines between
   them; hover gives a soft fill. Every status is a word in a pill, never colour alone, and
   Failed carries an icon too. Prefixed pcl- (the prototype's .cl-pill is taken by the roster). */
.pcl-section[hidden] { display: none; }
.pcl-calls { margin: 0 0 24px; }
.pcl-calls .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pcl-all { font-size: var(--fs-sm); font-weight: 500; color: var(--accent-strong); text-decoration: none; border-radius: 10px; }
[data-theme="light"] .pcl-all { color: var(--primary); }
.pcl-all:hover { text-decoration: underline; }
.pcl-all:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pcl-list { padding: 4px 16px 14px; }
.pcl-call {
  display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 12px; position: relative;
  color: inherit; text-decoration: none; transition: background .15s;
}
.pcl-call + .pcl-call::before { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--border); }
.pcl-call:hover { background: var(--surface-hover); }
.pcl-call:hover::before,
.pcl-call:hover + .pcl-call::before { opacity: 0; }
.pcl-call:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.pcl-ico { width: 36px; height: 36px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-muted); }
.pcl-text { flex: 1; min-width: 0; }
.pcl-title { display: block; font-size: var(--fs-base); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcl-sub { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--text-muted); }
.pcl-pill { flex: none; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.pcl-pill--ready { background: var(--success-dim); color: #22c55e; }
.pcl-pill--failed { background: var(--danger-dim); color: #f87171; }
.pcl-pill--live { background: color-mix(in srgb, var(--primary) 16%, transparent); color: #93b4ff; }
.pcl-pill--quiet { background: var(--surface-2); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }
[data-theme="light"] .pcl-pill--ready { color: #047857; }
[data-theme="light"] .pcl-pill--failed { color: #b91c1c; }
[data-theme="light"] .pcl-pill--live { color: #1d4ed8; }
.pcl-chev { color: var(--text-subtle); flex: none; }
.pcl-empty { padding: 18px 12px; font-size: var(--fs-sm); color: var(--text-muted); }
.pcl-note { padding: 8px 12px 2px; font-size: var(--fs-xs); color: var(--text-subtle); }
.pcl-more {
  margin: 6px 12px 2px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.pcl-more:hover { background: var(--surface-hover); }
.pcl-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── The header on its own soft panel (Clayton, 2026-10-13: "the top header/hero area of the
   client profile is not updated to the softer look ... make it look perfect with the rest of
   the page"). It was a white band, edge to edge with a line under it; everything around it is
   now a floating panel. So it becomes one too: the same white, border and 16px corner as the
   panels below, the same left and right edges as them, and its top on the sidebar's top line
   (the sidebar floats 10px down). The tabs take the sidebar's own look for the page you are
   on: a soft blue fill and blue words, 10px corners, in place of the underline. The words use
   the profile's brighter blue, which in the dark theme is lighter than the sidebar's so it can
   be read on the dark panel.

   ⚠️ IT IS STILL STICKY. The header element is a strip of the page's ground (so whatever
   scrolls under it is hidden), and ::before draws the panel inside it. z-index -1 puts the
   panel above the strip's own ground and below the header's contents; that only works because
   the sticky header with its z-index is a stacking context of its own. A 12px strip of ground
   is left under the panel, so scrolled content disappears on a straight line below it and
   never shows in the panel's round bottom corners. The tab body is pulled up by the same 12px,
   so every tab keeps its distance from the header. ── */
.cp2 .cp2-head {
  padding: 30px 64px 32px;
  background: var(--cp2-bg);
  border-bottom: 0;
}
.cp2 .cp2-head::before {
  content: ''; position: absolute; z-index: -1; inset: 10px 40px 12px;
  background: var(--cp2-surface); border: 1px solid var(--cp2-border); border-radius: 16px;
  pointer-events: none;
}
.cp2 .cp2-head + #cp2-tabbody { margin-top: -12px; }
/* The panels below sit 24px apart side by side, so the header sits 24px above them too. */
.cp2 .cp2-2col { padding-top: 24px; }
/* The avatar's corner badge is ringed in the colour behind it, which is now the panel. */
.cp2 .cp2-head .cp2-avbadge { border-color: var(--cp2-surface); }
.cp2 .cp2-navrow { margin-top: 32px; align-items: center; }
.cp2 .cp2-band { padding-bottom: 0; }
.cp2 .cp2-tabs-inline { gap: 4px; }
.cp2 .cp2-tabs-inline .cp2-tab {
  padding: 8px 14px; line-height: 18px; border: 0; border-radius: 10px;
  color: var(--text-muted); transition: background .15s, color .15s;
}
.cp2 .cp2-tabs-inline .cp2-tab:hover { background: var(--surface-hover); color: var(--text); }
.cp2 .cp2-tabs-inline .cp2-tab.on { background: rgba(37, 87, 214, .12); color: var(--cp2-brand-bright); }
[data-theme="light"] .cp2 .cp2-tabs-inline .cp2-tab.on { background: rgba(37, 87, 214, .08); }
.cp2 .cp2-tabs-inline .cp2-tab:focus-visible { outline: 2px solid var(--cp2-brand-bright); outline-offset: 2px; }
@media (max-width: 1339px) {
  .cp2 .cp2-band { margin-bottom: 12px; }
}

/* ── The Phases panel's top row (Clayton, 2026-10-13): the blue banner under the strip is
   gone. Copy forward sits beside the end goal, on the same chip. A picked phase that is not
   running says so on its own line under the heading, the full width of the panel, so the
   day it goes live is never cut off (the row wraps; the line is ordered last). ── */
.cp2 .cp2-phbar .cp2-rhead { flex-wrap: wrap; row-gap: 6px; }
.cp2 .cp2-phnote {
  order: 99; flex: 1 0 100%; min-width: 0;
  white-space: normal; line-height: 1.45;
  font-size: 12px; color: var(--cp2-muted);
}
.cp2 .cp2-phnote b { color: var(--cp2-text); font-weight: 600; }
.cp2 .cp2-phnote .cp2-standing { border-radius: 999px; padding: 1px 7px; }
.cp2 .cp2-phcopy { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap; }

/* ── SOFTER LOOK — the profile's pop-ups and the Queue window's "Ends by" (Clayton, 2026-10-13) ──
   Touched to add Ongoing to Change dates and to the Queue window, and brought to the scale every
   surface touched gets (10/11): 10px inputs and buttons, pills for the toggles. The pop-ups open
   on <body>, outside .cp2, so the profile's own pass above never reached them. Colours, sizes of
   type and wording do not change. A toggle that can't be used right now (Ongoing with a program
   queued after it) is dimmed, and its tooltip says why. */
.cp2-pop .cp2-input { border-radius: 10px; padding: 8px 10px; }
.cp2-pop .cp2-btn { border-radius: 10px; padding: 8px 14px; }
.cp2-pop .cp2-rseg { border-radius: 999px; padding: 2px; gap: 2px; }
.cp2-pop .cp2-rseg button { border-radius: 999px; padding: 5px 12px; }
.cp2-pop .cp2-rseg button:disabled { opacity: .45; cursor: not-allowed; }
.assign-endmode { border-radius: 999px; padding: 3px; }
.assign-endmode-btn { border-radius: 999px; padding: 5px 13px; }

/* ══════════════════════════════════════════════════════════════════════
   THE SIDEBAR (Clayton, 2026-10-12)
   ══════════════════════════════════════════════════════════════════════
   Built from the approved prototype, mockups/crm-sidebar-prototype.html, on
   the softer look (10/11, "yes build it like the right side"): 10px for menu
   items and buttons, 12px for menus, pills for counts. A floating panel; a
   panel button beside the logo; "Search or ask ⌘K" and a + menu; three
   groups; an account row whose menu holds Settings, Status, What's new, Admin
   Panel and Sign Out. Behaviour: modules/sidebar.js. Scoped to .sidebar,
   because .brand-logo is also on the sign-in screen. */

.sidebar .nav-btn,
.sidebar .btn-logout,
.sidebar .sidebar-notif-section,
.sidebar .brand-logo,
.sidebar .brand-logo-img { border-radius: 10px; }
.sidebar .nav-badge { border-radius: 999px; }

/* The panel button beside the logo. */
.sidebar .sb-toggle {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); cursor: pointer;
  transition: background .15s, color .15s;
}
.sidebar .sb-toggle:hover { background: var(--surface-hover); color: var(--text); }
.sidebar .sb-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sidebar.collapsed .sb-toggle svg { transform: scaleX(-1); }

/* The top row: Search or ask, and the + button. */
.sb-quick { display: flex; gap: 6px; padding: 10px 10px 4px; }
.sb-search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-muted);
  font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; transition: border-color .15s, color .15s;
}
.sb-search:hover { border-color: var(--text-subtle); color: var(--text); }
.sb-search .sidebar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sb-search kbd {
  flex: none; margin-left: auto; padding: 1px 5px; border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 11px; color: var(--text-subtle);
}
.sb-new {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 10px; background: var(--primary); color: #fff; cursor: pointer; transition: background .15s;
}
.sb-new:hover, .sb-new[aria-expanded="true"] { background: var(--primary-hover); }
.sb-search:focus-visible, .sb-new:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sidebar.collapsed .sb-quick { flex-direction: column; align-items: center; padding: 8px 0 4px; }
.sidebar.collapsed .sb-search { flex: none; width: 40px; padding: 0; justify-content: center; }
.sidebar.collapsed .sb-new { width: 40px; }

/* The two menus. The + menu floats (sidebar.js places it); the account menu sits
   above its row in the wide sidebar and floats beside it in the narrow one. */
.sb-new-menu, .sb-account-menu {
  display: none; padding: 6px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
}
[data-theme="dark"] .sb-new-menu, [data-theme="dark"] .sb-account-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.sb-new-menu.open { display: block; position: fixed; z-index: 1100; width: 220px; }
.sidebar:not(.collapsed) .sb-new-menu.open { width: calc(var(--sidebar-w) - 22px); }
.sb-account-menu.open { display: block; margin-bottom: 4px; }
.sidebar.collapsed .sb-account-menu.open { position: fixed; z-index: 1100; width: 220px; margin: 0; }
.sidebar .sb-menu-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; margin: 0;
  padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
}
.sidebar .sb-menu-item:hover, .sidebar .sb-menu-item:focus-visible { background: var(--surface-hover); color: var(--text); border-color: transparent; outline: none; }
.sidebar .sb-menu-item svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); opacity: 1; }
.sidebar .sb-menu-item.active { background: var(--primary-dim); color: var(--primary); }
.sidebar .sb-account-menu .sb-signout:hover { background: var(--danger-dim); color: var(--danger); }
.sidebar .sb-account-menu .whats-new-dot { position: static; margin-left: auto; box-shadow: none; }
/* The Admin Panel's health warning: a count at the end of its row, not the old
   button's orange outline and corner badge (seen on his CRM, 2026-10-12). It
   keeps its pulse and glow: an error pulses faster and glows red. */
.sidebar .sb-account-menu #btn-admin-panel.admin-health-active { box-shadow: none; }
.sidebar .sb-account-menu .admin-health-badge { position: static; margin-left: auto; }
.sb-menu-sep { height: 1px; margin: 6px 4px; background: var(--border); }
/* The narrow sidebar hides words; its floating menus keep theirs. */
.sidebar.collapsed .sb-account-menu .sidebar-label,
.sidebar.collapsed .sb-account-menu .nav-btn span { display: inline; }
.sidebar.collapsed .sb-account-menu .sb-menu-item { justify-content: flex-start; padding: 8px 10px; }
.sidebar.collapsed .sb-account-menu .sb-menu-item svg { width: 16px; height: 16px; }

/* Notifications and My Tasks: plain rows, their counts on the right. */
.sidebar .sidebar-notif-section { border-bottom: 0; }
.sidebar .sidebar-notif-section:last-of-type { margin-bottom: 4px; }
.sidebar-notif-section > .notif-badge {
  position: static; margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; font-size: 12px; font-variant-numeric: tabular-nums;
}
.sidebar-notif-section > .notif-badge.hidden { display: none; }
.sidebar.collapsed .sidebar-notif-section { position: relative; }
.sidebar.collapsed .sidebar-notif-section > .notif-badge { position: absolute; top: 2px; left: auto; right: 8px; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }

/* The groups: a dark heading over each (Clayton, 10/12: darker so the long list
   reads as short ones); a thin line in the narrow sidebar. */
.sb-group { display: flex; flex-direction: column; gap: 2px; }
.sb-group + .sb-group { margin-top: 10px; }
.sb-group-title { padding: 6px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.sidebar.collapsed .sb-group-title { height: 1px; margin: 4px 16px 6px; padding: 0; font-size: 0; background: var(--border); }

/* The bottom: the Listening row (quiet, never a box) and the account row. */
.sidebar-footer > .atlas-wake-indicator { justify-content: flex-start; padding: 9px 12px; margin: 0; border: 0; font-size: 13.5px; }
.sidebar.collapsed .sidebar-footer > .atlas-wake-indicator { justify-content: center; padding: 9px 0; }
.sb-account {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px;
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .15s;
}
.sb-account:hover, .sb-account[aria-expanded="true"] { background: var(--surface-hover); }
.sb-account.is-current { background: var(--primary-dim); }
.sb-account.is-current .sb-who-name { color: var(--primary); }
.sb-account:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sb-avatar {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center;
  background: var(--primary-dim); color: var(--primary); font-size: 12px; font-weight: 600;
}
/* "Something new" (What's new) and the Admin Panel's warning, on the closed row. */
.sb-avatar-dot { display: none; position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 999px; background: var(--primary); border: 2px solid var(--sidebar-bg); }
.sb-account.has-news .sb-avatar-dot { display: block; }
.sb-account.has-alert .sb-avatar-dot { display: block; background: var(--danger); }
.sb-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sb-who-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-who-business { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-account-chev { margin-left: auto; flex: none; color: var(--text-muted); }
.sidebar.collapsed .sb-who, .sidebar.collapsed .sb-account-chev { display: none; }
.sidebar.collapsed .sb-account { justify-content: center; padding: 6px 0; }

/* The narrow menu's names: one floating tooltip, drawn on <body> so nothing
   clips it (modules/sidebar.js). */
.sb-tip {
  position: fixed; z-index: 1200; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 500; white-space: nowrap;
  pointer-events: none; box-shadow: 0 6px 18px rgba(15, 23, 42, .14);
  opacity: 0; transform: translate(-4px, -50%); transition: opacity .12s, transform .12s;
}
.sb-tip.on { opacity: 1; transform: translate(0, -50%); }
.sb-tip kbd { margin-left: 8px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 11px; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .sb-tip { transition: none; } }
/* A check-in recording hides the sidebar (privacy); its floating parts go with it. */
body.cr-focus-mode-active .sb-tip,
body.cr-focus-mode-active .sb-new-menu { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   SOFTER LOOK — the Inbox page (Clayton, 2026-10-11)
   ══════════════════════════════════════════════════════════════════════
   "yes build it like the bottom one", from mockups/crm-softer-inbox-2026-10-11.jpg
   (his real Inbox). The same scale: 16px for the Inbox panel, 12px for menus and
   inner panels, 10px for buttons and inputs, 8px for a choice inside a menu,
   pills for tabs, date labels and counts. Scoped to #view-inbox, because the
   corner messages and the Lead Engine inbox share some of these classes. */

/* Room around the panel, so its round corners sit on the page (it ran edge to
   edge). The header above already has 24px at the sides. */
#view-inbox .inbox-layout { border-radius: 16px; margin: 0 24px 24px; }
@media (max-width: 800px) { #view-inbox .inbox-layout { margin: 0 12px 12px; } }
#view-inbox .inbox-compose-btn,
#view-inbox .inbox-search,
#view-inbox .inbox-group-delete,
#view-inbox .inbox-ha-btn,
#view-inbox .inbox-scheduled-btn,
#view-inbox .sched-queue-cancel,
#view-inbox .uc-channel-trigger,
#view-inbox .uc-attachment-pill,
#view-inbox .inbox-ecard-att,
#view-inbox .inbox-voice-cancel,
#view-inbox .inbox-voice-attachment,
#view-inbox .inbox-voice-stop-rec,
#view-inbox .inbox-voice-send { border-radius: 10px; }
#view-inbox .uc-send-btn { border-radius: 10px 0 0 10px; }
#view-inbox .uc-send-drop { border-radius: 0 10px 10px 0; }
#view-inbox .uc-channel-menu,
#view-inbox .uc-send-menu,
#view-inbox .inbox-sched-inline,
#view-inbox .uc-wrap[data-channel="email"] .uc-textarea { border-radius: 12px; }
#view-inbox .inbox-compose-item,
#view-inbox .uc-channel-option,
#view-inbox .uc-send-option { border-radius: 8px; }
#view-inbox .inbox-filter-tab,
#view-inbox .sched-queue-tab,
#view-inbox .inbox-date-sep span,
#view-inbox .inbox-conv-unread { border-radius: 999px; }

/* ══════════════════════════════════════════════════════════════════════
   SOFTER LOOK — the calendar's event form (Clayton, 2026-10-12)
   ══════════════════════════════════════════════════════════════════════
   On a picture of the New event form: "this needs to also get updated to the
   softer look". The same scale as the profile, the sidebar and the Inbox: 16px
   for the window, 10px for fields and buttons, 12px for a dropdown list, 8px
   for a choice in it, pills for the two switches. Scoped to .c2-sheet: the New
   event form, the edit form, the Time off check, and a client session's
   Cancel, Move, Note and credit windows (session-actions.js). Every other
   window keeps its corners, and the Busy | Free on a block's card keeps its own.
   Unchanged on purpose: fields still sit on the sheet with no box until pointed
   at or typed in (".c2-plain": a sentence to adjust, not a form to fill in),
   the Time off dates keep their box, and a pressed switch is a fill AND bolder
   type, never colour alone. Colours, type and wording do not change; the one
   addition is a soft ring on a field being typed in. */
.modal.c2-sheet { border-radius: 16px; box-shadow: 0 20px 50px rgba(15, 23, 42, .18); }
[data-theme="dark"] .modal.c2-sheet { box-shadow: 0 16px 48px rgba(0, 0, 0, .5); }
.c2-sheet .c2-sheet-top { padding: 20px 20px 0; }
.c2-sheet .c2-sheet-tabs { padding: 14px 20px 0; }
.c2-sheet .c2-sheet-body { padding: 6px 20px 18px !important; }
.c2-sheet .modal-close {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border-radius: 10px; line-height: 1;
}
.c2-sheet .modal-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* The last group showing has no line of its own: it doubled the footer's.
   (:last-of-type never matched, as the hidden message box under it is a div
   too, and in Client session mode the Event groups after it are hidden.) */
.c2-sheet .c2-grp:not(:has(~ .c2-grp:not([hidden]))) { border-bottom: 0; }

/* The two switches: Event | Client session, and Busy | Free. Each keeps its
   edge; Event | Client session takes Busy | Free's ground so the pair match.
   overflow: visible so a keyboard ring is not cut off by the track. */
.c2-sheet .c2-mode,
.c2-sheet .seg { gap: 2px; padding: 3px; border-radius: 999px; overflow: visible; }
.c2-sheet .c2-mode { background: var(--bg); }
.c2-sheet .c2-mode button,
.c2-sheet .seg button { border-radius: 999px; transition: background .15s, color .15s; }
.c2-sheet .c2-mode button { padding: 7px 12px; }
.c2-sheet .c2-mode button + button { border-left: 0; }
.c2-sheet .c2-mode button:not([aria-pressed="true"]):hover { color: var(--text); }
.c2-sheet .c2-mode button:focus-visible,
.c2-sheet .seg button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Fields: rounder, and a soft ring while typing. */
.c2-sheet .c2-plain,
.c2-sheet .c2-when input[type="date"],
.c2-sheet .c2-when input[type="time"] { border-radius: 10px; transition: background .15s, border-color .15s, box-shadow .15s; }
.c2-sheet .c2-plain:focus,
.c2-sheet .c2-when input[type="date"]:focus,
.c2-sheet .c2-when input[type="time"]:focus,
.c2-sheet .c2-timeoff-days input[type="date"]:focus { box-shadow: 0 0 0 3px var(--primary-dim); }
.c2-sheet .c2-timeoff-days input[type="date"] { border-radius: 10px; }
.c2-sheet .c2-rt-body { border-radius: 12px; }
.c2-sheet .c2-rt-b { border-radius: 8px; }
.c2-sheet .c2-ends label,
.c2-sheet .c2-ends input[type="date"],
.c2-sheet .c2-ends input[type="number"] { border-radius: 8px; }
.c2-sheet .c2-to-msg,
.c2-sheet .c2-sa-input,
.c2-sheet .c2-sa-textarea,
.c2-sheet .c2-sa-when input { border-radius: 10px; }

/* The client list under "Search clients". */
.c2-sheet .c2-combo-list {
  top: calc(100% + 4px); padding: 6px; border-radius: 12px; box-shadow: 0 10px 28px rgba(15, 23, 42, .14);
}
[data-theme="dark"] .c2-sheet .c2-combo-list { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.c2-sheet .c2-combo-list li { padding: 8px 10px; border-radius: 8px; }

/* What the server asked to confirm, and the buttons at the bottom: one height,
   the fill says which is the main action. Only the two event forms move their
   footer in to their 20px gutter; a window with a header keeps both at 24px. */
.c2-sheet .c2-create-err,
.c2-sheet .c2-create-err .btn-secondary { border-radius: 10px; }
.c2-sheet .c2-sheet-body + .modal-footer { padding: 14px 20px 18px; }
.c2-sheet .modal-footer .btn-primary,
.c2-sheet .modal-footer .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 38px; padding: 0 16px; border-radius: 10px; line-height: 18px;
}

/* ══════════════════════════════════════════════════════════════════════
   THE CRM'S OWN CALENDAR (Clayton, 2026-10-08)
   ══════════════════════════════════════════════════════════════════════
   "All of our pop-up calendars need to get styled correctly with border
   radiuses, proper spacing between dates ... cohesive with the rest of our
   new updated styling." modules/date-picker.js upgradeDates turns a date box
   into a button that says the date in words and opens this calendar. On the
   softer scale: 10px on the box, 12px on the calendar, round days, a ring on
   today and a filled circle on the picked day (never color alone: the picked
   day is also bold and read out as pressed). Change billing uses it first; the
   CRM's other date boxes get it in their own job. */
.dp-trigger { display: inline-flex; align-items: center; gap: 10px; min-width: 220px; height: 38px; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font: inherit; font-size: var(--fs-base); text-align: left; cursor: pointer; transition: border-color .15s; }
.dp-trigger:hover:not(:disabled) { border-color: var(--text-muted); }
.dp-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dp-trigger:disabled { opacity: .5; cursor: default; }
.dp-trigger .dp-text { flex: 1; }
.dp-trigger .dp-empty { color: var(--text-muted); }
.dp-trigger svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.dp-pop { position: fixed; z-index: 10000; width: 300px; padding: 14px 14px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55); }
[data-theme="light"] .dp-pop { box-shadow: 0 16px 48px rgba(15, 23, 42, 0.16); }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px 6px; }
.dp-month { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.dp-nav { display: flex; gap: 4px; }
.dp-nav button { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--text-muted); cursor: pointer; }
.dp-nav button:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.dp-nav button:disabled { opacity: .3; cursor: default; }
.dp-nav button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 36px); justify-content: space-between; row-gap: 4px; }
.dp-dow { height: 26px; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
.dp-day { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .12s; }
.dp-day:hover:not(:disabled):not(.dp-sel) { background: var(--surface-hover); }
.dp-day.dp-out { color: var(--text-muted); }
.dp-day.dp-today:not(.dp-sel) { box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary); font-weight: 600; }
.dp-day.dp-sel { background: var(--primary); color: #fff; font-weight: 600; }
.dp-day:disabled { opacity: .32; cursor: default; }
.dp-day:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dp-foot { display: flex; justify-content: flex-end; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.dp-foot button { padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--primary); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.dp-foot button:hover { background: var(--surface-hover); }
@media (prefers-reduced-motion: reduce) { .dp-trigger, .dp-day { transition: none; } }

/* === CORNER MESSAGES (#md-root): START ===
   The messenger in the bottom-right corner of every CRM page (spec
   docs/superpowers/specs/2026-10-10-crm-corner-messages-design.md, §3 and §4).
   Ported from the round-two prototype (head.html) with the spec's fixes and
   additions. Every corner rule lives between this marker and the END marker;
   the-corner-stylesheet-follows-the-house-rules.test.mjs reads this block.

   House rules held here: tokens only (the corner's own --md-* tokens are
   defined for dark in :root and for light in [data-theme="light"] just below),
   no text under 12px, no thick coloured left border, sapphire only for Send and
   unread counts, colour never the only signal (every state also has words),
   and reduced motion turns every corner animation off (the last rule).

   Radii, the 10/5 softer scale: 16px panels and windows, 12px rows, tabs and
   inner panels, 10px buttons, menus and inputs, round pills.

   ⚠️ LAYERS (§4.2). #md-root is 9002: above the Glance side sheet (.crg-sheet,
   9001), so a chat opened from a Glance card shows; below toasts (9500), the
   recorder bar (9600), My Tasks (9990+), menus (9999) and the dialog band.
   While any full-screen pop-up shows, the one body:has(…) rule drops it to 99:
   under the pop-up, still over the check-in review takeover (95). Inside
   #md-root: windows and "+N" (1), the corner button (2), the list (3), menus
   and the emoji tray (4 and up).

   ⚠️ THE MENU, THE EMOJI TRAY AND THE MESSAGE ⋯ BUTTON ARE NOT SCOPED TO
   #md-root, so the Inbox page draws the same ones (messages/message-menu.js,
   messages/emoji-tray.js). Their tokens are on :root for the same reason.

   CLASS CONTRACT for the corner's modules (the corner-messages folder), beyond the
   prototype's own markup:
     #md-root.md-has-open      a chat window is expanded (narrow screens hide
                               the corner button on it)
     body.md-on-inbox          the Inbox page is showing (navigation.js)
     html[data-recording]      the check-in recorder bar is up (recorder/bar.js)
     .md-win.is-min            a minimized tab; .is-arrival a tab an arrival
                               added (also .is-min); .is-active holds the cursor;
                               .has-new new messages while not reading
     .md-head-new              the "N new" pill in an open window's header
     .md-who-sub.md-status.md-status--danger|warning|muted
                               the D3 status word under the name
     .md-tip                   the minimized tab's tooltip (inside .md-win)
     .md-notice                the quiet "Not by text: …" line above the box
     .md-chip.is-uploading / .is-failed, .md-chip-state, .md-chip-note
                               "Uploading…", "Couldn't upload. Try again",
                               "Goes in the app"
     .md-mic-blocked           "Your browser blocked the microphone. …"
     .md-review-failed         "Couldn't mark it reviewed: …"
     .md-thread-error          "Couldn't load this chat." with Try again
     .inbox-msg-wrap.is-not-sent > .md-failed
                               the Not sent bubble, its words and buttons
                               (the shared renderer's wrap; no .md-m row)
     .md-msgs .md-m (tabindex) the roving message stop (2px --md-new ring)
     .md-sr                    words for screen readers only */

/* Dark is :root; light overrides it, the same way the CRM's own tokens do. */
:root {
  --md-shadow: 0 20px 56px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  --md-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.4);
  --md-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
  --md-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --md-w: 360px;       /* an open chat window */
  --md-w-min: 240px;   /* a minimized one (its header, sitting on the bottom edge) */
  /* Sapphire words and the focus ring: the brighter sapphire reads on dark (A21). */
  --md-new: var(--accent-strong);
  /* On dark, something floating is one step lighter than the panels under it,
     with a clearer edge (a --surface button over --surface measured 1.00:1). */
  --md-raise: var(--surface-hover);
  --md-raise-hover: #2a3139;
  --md-edge: rgba(255, 255, 255, 0.12);
  /* Words on a filled sapphire or red pill. */
  --md-on-fill: #ffffff;
  /* The status word and the red warning lines: the bright 500 shades on dark. */
  --md-warning-text: var(--warning);
  --md-danger-text: var(--danger);
}
[data-theme="light"] {
  --md-shadow: 0 18px 48px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.06);
  --md-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.08);
  --md-shadow-sm: 0 6px 20px rgba(15, 23, 42, 0.14), 0 1px 3px rgba(15, 23, 42, 0.08);
  --md-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --md-new: var(--primary);
  --md-raise: var(--surface);
  --md-raise-hover: var(--surface-hover);
  --md-edge: var(--border);
  --md-on-fill: #ffffff;
  /* ⚠️ On a white window the bright shades fail 12px contrast (amber about
     2.1:1, red about 3.8:1): the CRM's own light twins (--amber-text, light --danger). */
  --md-warning-text: #b45309;
  --md-danger-text: #dc2626;
}

/* ── The root and where it shows ───────────────────────────────────── */
#md-root { position: fixed; right: 0; bottom: 0; z-index: 9002; }
/* ⚠️ UNDER EVERY FULL-SCREEN POP-UP (C6). One entry per pop-up, written the
   way it shows: in the page and shown by taking off .hidden (:not(.hidden)),
   or made when it opens and removed when it closes (the bare class). The test
   scans every stylesheet for a full-screen layer from 100 to 9001 that is in
   neither this list nor its exempt list (.crg-scrim, .cr-drawer-backdrop,
   .notif-overlay). */
body:has(
  .modal-overlay:not(.hidden),
  .confirm-overlay:not(.hidden),
  .gym-drawer-overlay:not(.hidden),
  .gym-modal-overlay:not(.hidden),
  .tasks-backlog-backdrop,
  .cr-lightbox-overlay,
  .cr-fv-theater,
  .comms-tpl-overlay,
  .le-builder-overlay,
  .bulk-modal-overlay:not(.hidden),
  .compose-overlay:not(.hidden),
  .pipeline-note-overlay:not(.hidden),
  .bkd-modal-overlay,
  #gs-modal-overlay:not(.hidden),
  .cr-drilldown-overlay,
  .pe-shortcut-overlay:not(.hidden),
  .pe-cmdk-overlay:not(.hidden),
  .sc-overlay,
  .le-ro-overlay,
  .cm-modal:not(.hidden)
) #md-root { z-index: 99; }
/* On the Inbox page the page itself is the messenger, so the corner steps
   aside; its windows keep their state and come back when the coach leaves. */
body.md-on-inbox #md-root { display: none; }
/* While the check-in recorder records, the recording captures this tab, so no
   other client's chat may show (the corner's script also sets inert and
   aria-hidden). Numbers keep counting. */
html[data-recording] #md-root { visibility: hidden; }
/* Toasts move up above the corner button instead of landing on it. */
html:not([data-recording]) body:not(.md-on-inbox):has(> #md-root) .toast-stack { bottom: 96px; }
/* Check-in review's reply area keeps the corner button's corner clear, so Send
   & next sits to its left (§4.1): the button is 56px, 24px in from the right,
   and 16px of air beside it. */
html:not([data-recording]) body:not(.md-on-inbox):has(> #md-root) .ciq-dock { padding-right: 96px; }
/* ⚠️ And above the row: the padding above stops where the first chat tab
   starts, so a minimized tab (52px tall) sat over Send & next (14 to 50px up),
   and a click there opened the chat. While the row holds a chat, the reply area
   rises a tab's height. Same for the Check-Ins page's Edit reply (.crg-reply-dock). */
html:not([data-recording]) body:not(.md-on-inbox):has(> #md-root.md-has-row) .ciq-dock { padding-bottom: 52px; }
/* The rest of the page makes room the same way (10/11, no strip across the
   page): room for the round button (80px up) whenever it shows, room for a
   minimized tab (52px) only while the row holds a chat. Each rule outranks the
   page's own, whatever order the lazy stylesheets load in. */
/* Every Glance side sheet (the Brief's Rebuild was under the button) ends 16px above the button. */
html:not([data-recording]) body:not(.md-on-inbox):has(> #md-root) .crg-sheet-body { padding-bottom: 96px; }
/* Calendar week: the "This week" strip (category switches, Edit categories) rises above the
   tabs, and its chips stop short of the button (the card ends 20px in, the button starts 80px in). */
html:not([data-recording]) body:not(.md-on-inbox):has(> #md-root.md-has-row) .c2-weekwrap { margin-bottom: 62px; }
html:not([data-recording]) body:not(.md-on-inbox):has(> #md-root) .c2-cats { padding-right: 72px; }
/* Lead Engine: the bar for ticked conversations floats above the tabs. */
html:not([data-recording]) body:not(.md-on-inbox):has(> #md-root.md-has-row) .le-inbox-bulkbar { bottom: 64px; }
/* Lead Engine: narrow panes turn the details into a drawer, so the reply box
   reaches the window's right edge; Send stays left of the button. */
@container le-panes (max-width: 1099px) {
  html:not([data-recording]) body:not(.md-on-inbox):has(> #md-root) .le-composer { padding-right: 96px; }
}
#md-root :focus-visible { outline: 2px solid var(--md-new); outline-offset: 2px; }
/* Buttons take the page's font; :where() keeps this below every class rule. */
:where(#md-root) button { font: inherit; }
#md-root [hidden], .md-menu [hidden], .md-tray [hidden], .md-menu[hidden], .md-tray[hidden] { display: none !important; }
.md-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── The corner button ─────────────────────────────────────────────── */
.md-launch {
  position: fixed; right: 24px; bottom: 24px; z-index: 2; width: 56px; height: 56px;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--md-edge);
  background: var(--md-raise); color: var(--text); box-shadow: var(--md-shadow-sm);
  transition: background .15s ease, transform .15s ease;
}
.md-launch:hover { background: var(--md-raise-hover); }
.md-launch:active { transform: scale(.96); }
.md-launch > svg { width: 24px; height: 24px; grid-area: 1 / 1; transition: opacity .15s ease, transform .15s ease; }
.md-launch .md-ico-close { opacity: 0; transform: rotate(-45deg); }
.md-launch.is-open .md-ico-chat { opacity: 0; transform: rotate(45deg); }
.md-launch.is-open .md-ico-close { opacity: 1; transform: none; }
/* Same badge as the sidebar's Inbox count: a number, so colour is never the only signal. */
.md-badge {
  position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--danger); color: var(--md-on-fill);
  font-size: 12px; font-weight: 600; line-height: 22px; text-align: center;
  box-shadow: 0 0 0 2px var(--md-raise);
}

/* ── Shared bits ───────────────────────────────────────────────────── */
.md-iconbtn {
  width: 32px; height: 32px; flex-shrink: 0; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.md-iconbtn:hover { background: var(--surface-2); color: var(--text); }
.md-iconbtn[aria-disabled="true"] { opacity: .45; cursor: default; }
.md-iconbtn[aria-disabled="true"]:hover { background: transparent; color: var(--text-muted); }
.md-iconbtn svg { width: 16px; height: 16px; }
.md-av {
  width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 999px; background: var(--primary-dim); color: var(--md-new);
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
}
.md-av--group { background: var(--surface-hover); color: var(--text-muted); font-size: 12px; }
/* A client's photo over their initials (Clayton, 2026-10-12): the corner list,
   the corner chat windows and the Inbox list. A photo that fails to load is
   taken away (client-photo.js), so the initials under it show. */
.md-av, .inbox-conv-avatar { position: relative; overflow: hidden; }
.md-av-img, .inbox-conv-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.md-unread {
  min-width: 20px; height: 20px; padding: 0 6px; flex-shrink: 0;
  border-radius: 999px; background: var(--primary); color: var(--md-on-fill);
  font-size: 12px; font-weight: 600; line-height: 20px; text-align: center;
}
.md-btn {
  height: 34px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 600;
}
.md-btn:hover { background: var(--surface-2); }
.md-btn:disabled, .md-btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.md-btn--pri { background: var(--primary); border-color: var(--primary); color: var(--md-on-fill); }
.md-btn--pri:hover { background: var(--primary-hover); }
.md-btn--danger { background: var(--danger); border-color: var(--danger); color: var(--md-on-fill); }
.md-btn--danger:hover { background: var(--danger); filter: brightness(.95); }
@keyframes md-pop { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes md-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes md-rec { 50% { opacity: .35; } }

/* ── The conversation list (opens from the corner button) ──────────── */
.md-list {
  position: fixed; right: 24px; bottom: 92px; z-index: 3; width: 372px;
  height: min(620px, calc(100vh - 124px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--md-edge); border-radius: 16px;
  box-shadow: var(--md-shadow); transform-origin: bottom right; animation: md-pop .16s ease-out;
}
.md-list-head { display: flex; align-items: center; gap: 4px; padding: 18px 14px 12px 20px; }
.md-list-head h3 { flex: 1; margin: 0; color: var(--text); }   /* the CRM's own h3: Saira 800, uppercase */
.md-search { position: relative; display: block; margin: 0 16px; }
.md-search svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.md-search input {
  width: 100%; height: 40px; padding: 0 12px 0 36px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font: inherit; font-size: 14px;
}
.md-search input::placeholder { color: var(--text-muted); }
.md-search input:focus { outline: none; border-color: var(--md-new); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-dim); }
.md-seg { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; margin: 12px 16px 8px; border-radius: 999px; background: var(--surface-2); }
.md-seg button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; cursor: pointer;
  border: 0; border-radius: 999px; background: transparent; color: var(--text-muted);
  font-size: 14px; font-weight: 500;
}
.md-seg button:hover { color: var(--text); }
.md-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border), var(--md-shadow-xs); }
.md-seg .md-unread { min-width: 18px; height: 18px; line-height: 18px; font-size: 12px; padding: 0 5px; }
/* 6px over the first row, so its focus ring is not cut off (A21). */
.md-rows { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 8px; }
.md-rows-label { padding: 12px 12px 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.md-row {
  position: relative; width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 0; border-radius: 12px; background: transparent;
  color: inherit; text-align: left; cursor: pointer;
}
/* The thin lines between rows stay (10/5: they give the list its structure). */
.md-row + .md-row::before { content: ''; position: absolute; left: 64px; right: 12px; top: 0; height: 1px; background: var(--border-light); }
[data-theme="light"] .md-row + .md-row::before { background: var(--border); }
.md-row:hover { background: var(--surface-2); }
.md-row:hover::before, .md-row:hover + .md-row::before { opacity: 0; }
.md-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.md-row-top, .md-row-bot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.md-row-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-members { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.md-row-time { flex-shrink: 0; font-size: 12px; color: var(--text-muted); }
.md-row-prev { flex: 1; min-width: 0; font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-row.is-unread .md-row-name { font-weight: 700; }
.md-row.is-unread .md-row-prev { color: var(--text); font-weight: 500; }
.md-row.is-unread .md-row-time { color: var(--text); font-weight: 600; }
/* "Draft:" and "Not sent:" are words, so their red is never the only signal. */
.md-row-prev .md-draftword { color: var(--danger); font-weight: 600; }
.md-star { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; color: var(--warning); }
.md-empty-list { padding: 40px 24px; text-align: center; font-size: 14px; color: var(--text-muted); }
.md-list-foot { padding: 8px; border-top: 1px solid var(--border-light); }
[data-theme="light"] .md-list-foot { border-top-color: var(--border); }
.md-list-foot button {
  width: 100%; height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  border: 0; border-radius: 10px; background: transparent; color: var(--text); font-size: 14px; font-weight: 500;
}
.md-list-foot button:hover { background: var(--surface-2); }
.md-list-foot svg { width: 16px; height: 16px; color: var(--text-muted); }

/* ── A chat window ─────────────────────────────────────────────────── */
.md-win {
  position: fixed; bottom: 0; z-index: 1; width: var(--md-w); height: min(440px, calc(100vh - 96px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--md-edge); border-bottom: 0;
  border-radius: 16px 16px 0 0; box-shadow: var(--md-shadow);
  /* Windows slide sideways when a neighbour opens or closes. Minimizing snaps (no size animation):
     the contents hide at once, so an animated shrink showed an empty box for a moment. */
  transition: right .2s ease;
  animation: md-pop .16s ease-out;
}
/* The window holding the cursor: a neutral shadow step, never a coloured bar (A14). */
.md-win.is-active:not(.is-min) { box-shadow: var(--md-shadow-lg); }
/* A minimized tab shows only its header; its tooltip rises above it. */
.md-win.is-min { width: var(--md-w-min); height: 52px; overflow: visible; border-radius: 12px 12px 0 0; box-shadow: var(--md-shadow-sm); }
.md-win.is-min:hover, .md-win.is-min:focus-within { z-index: 2; }
/* A tab an arrival added: it fades in where it is, and moves nothing (D1). */
.md-win.is-arrival { animation: md-fade .2s ease-out; }
.md-win-head { display: flex; align-items: center; gap: 2px; min-height: 62px; padding: 8px 6px; flex-shrink: 0; cursor: default; border-bottom: 1px solid var(--border-light); transition: background .2s ease; }
[data-theme="light"] .md-win-head { border-bottom-color: var(--border); }
.md-win.is-min .md-win-head { min-height: 52px; padding: 6px; border-bottom: 0; }
/* A message arrived while this window was open but the coach was elsewhere (D1).
   The status line stays (A18); the "N new" pill says how many. */
.md-win.has-new:not(.is-min) .md-win-head { background: var(--primary-dim); }
.md-head-new { flex-shrink: 0; margin-right: 4px; padding: 0 8px; border-radius: 999px; line-height: 20px; font-size: 12px; font-weight: 600; color: var(--md-on-fill); background: var(--primary); }
.md-win.is-min .md-head-new { display: none; }
.md-who {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px; cursor: pointer;
  border: 0; border-radius: 10px; background: transparent; color: inherit; text-align: left;
}
.md-who:hover { background: var(--surface-2); }
.md-win.has-new:not(.is-min) .md-who:hover { background: transparent; }
.md-who .md-av { width: 34px; height: 34px; font-size: 13px; }
.md-win.is-min .md-who .md-av { width: 30px; height: 30px; font-size: 12px; }
.md-who-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.md-who-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The window being worked in reads at full strength; the others step back (A14). */
.md-win:not(.is-active):not(.is-min) .md-who-name { color: var(--text-muted); }
.md-win.is-min.has-new .md-who-name { font-weight: 700; }
.md-who-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-win.is-min .md-who-sub, .md-who-sub:empty { display: none; }
/* D3: the client's status word. The word is always printed; the tone only colours it. */
.md-status--danger { color: var(--md-danger-text); font-weight: 600; }
.md-status--warning { color: var(--md-warning-text); font-weight: 600; }
.md-status--muted { color: var(--text-muted); }
.md-who-meta { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.md-who-meta:empty { display: none; }
.md-draft { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.md-win:not(.is-min) .md-draft { display: none; }
.md-rec-min { color: var(--md-danger-text); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.md-rec-min i { width: 8px; height: 8px; border-radius: 999px; background: var(--danger); }
/* Tools: ⋯, Open in Inbox, Minimize, Close, 32px with 4px gaps (A15). */
.md-win-tools { display: flex; gap: 4px; flex-shrink: 0; }
.md-win-tools .md-iconbtn { width: 32px; height: 32px; }
.md-win.is-min .md-win-tools .md-open-only { display: none; }
.md-win.is-min .md-msgs-wrap, .md-win.is-min .md-msgs, .md-win.is-min .md-compose { display: none; }
/* D2: the minimized tab's tooltip, on hover and on keyboard focus. */
.md-tip {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 4;
  max-width: 300px; padding: 6px 10px; border-radius: 10px;
  background: var(--md-raise); border: 1px solid var(--md-edge); box-shadow: var(--md-shadow-sm);
  color: var(--text); font-size: 13px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease;
}
.md-win.is-min:hover .md-tip, .md-win.is-min:focus-within .md-tip { opacity: 1; visibility: visible; }
.md-win:not(.is-min) .md-tip { display: none; }

/* ── The thread: the Inbox's own bubbles (.inbox-msg …), sized for a narrow window ── */
.md-msgs-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.md-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 14px 12px; display: flex; flex-direction: column; gap: 2px; }
.md-msgs:focus-visible { outline-offset: -2px; }
.md-msgs .inbox-msg { max-width: 84%; font-size: 14px; }
.md-msgs .inbox-date-sep { margin: 14px 0 8px; }
.md-msgs .inbox-msg-transcript { max-width: 84%; font-size: 13px; font-style: normal; color: var(--text-muted); }
.md-msgs .inbox-ecard { cursor: pointer; margin: 4px 0; }
.md-msgs .inbox-msg-status { font-size: 12px; }
.md-msgs .inbox-msg-status--sent { color: var(--text-muted); }
.md-msgs .inbox-msg-status--seen { color: var(--md-new); }
.md-msgs .cw-fv-review-btn { margin-top: 8px; }
.md-msgs .cw-fv-review-btn svg { width: 12px; height: 12px; }
.md-sender { margin: 10px 0 3px 4px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.md-empty { margin: auto; padding: 24px; text-align: center; font-size: 14px; color: var(--text-muted); }
/* "Couldn't load this chat." with Try again, or the server's sentence with Close. */
.md-thread-error { margin: auto; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: 14px; color: var(--text); }
/* The words sit 12px (the gap) above the button, without the paragraph's own margins. */
.md-thread-error p { margin: 0; }
.md-typing { align-self: flex-start; display: inline-flex; gap: 4px; margin-top: 6px; padding: 11px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 18px 18px 18px 6px; }
.md-typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--text-subtle); animation: inbox-typing-bounce 1.2s infinite ease-in-out; }
.md-typing i:nth-child(2) { animation-delay: .15s; }
.md-typing i:nth-child(3) { animation-delay: .3s; }
/* A message row: the bubble, its ⋯ button just outside it, then reactions. */
.md-m { display: flex; flex-direction: column; max-width: 92%; min-width: 0; border-radius: 12px; }
.md-m--coach { align-self: flex-end; align-items: flex-end; }
.md-m--client { align-self: flex-start; align-items: flex-start; }
.md-m-line { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.md-m--coach .md-m-line { flex-direction: row; }
.md-m--client .md-m-line { flex-direction: row-reverse; }
.md-msgs .md-m .inbox-msg { max-width: 100%; min-width: 0; align-self: auto; }
/* The thread is one Tab stop; Up and Down move between messages (§10). */
.md-msgs .md-m:focus-visible { outline: 2px solid var(--md-new); outline-offset: 2px; }
.md-quote {
  max-width: 100%; margin: 6px 0 3px; padding: 6px 10px; border-radius: 10px;
  background: var(--surface-2); color: var(--text-muted); font-size: 13px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.md-quote b { font-weight: 600; color: var(--text); }
.md-reacts { display: flex; gap: 4px; margin: 3px 0 2px; }
.md-react {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 14px; color: var(--text);
}
.md-react.is-mine { border-color: var(--md-new); background: var(--primary-dim); }
.md-react small { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.md-unsent { padding: 8px 12px; border-radius: 16px; border: 1px dashed var(--border); color: var(--text-muted); font-size: 13px; }
.md-call { display: inline-flex; align-items: center; gap: 8px; }
.md-call svg { width: 14px; height: 14px; flex-shrink: 0; }
.md-file { display: inline-flex; align-items: center; gap: 10px; }
.md-file svg { width: 18px; height: 18px; flex-shrink: 0; }
.md-file small { display: block; font-size: 12px; opacity: .8; }
.md-linkline { display: flex; align-items: center; gap: 4px; margin: 2px 4px 0; font-size: 12px; color: var(--text-muted); }
.md-linkline svg { width: 12px; height: 12px; }
.md-ecard-time { margin-left: auto; padding-left: 8px; flex-shrink: 0; font-size: 12px; color: var(--text-muted); }
.md-reviewed { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.md-reviewed svg { width: 13px; height: 13px; }
/* "Couldn't mark it reviewed: …" under the button; the words carry it. */
.md-review-failed { margin-top: 6px; max-width: 260px; font-size: 12px; font-weight: 600; color: var(--md-danger-text); }
.md-status-sending { color: var(--text-muted); }
/* Not sent: the bubble steps back, the words "Not sent." and the reason sit under it with Try again and Remove. */
.md-m.is-not-sent .inbox-msg { opacity: .72; }
/* The shared renderer draws no .md-m row: the corner marks the message's own
   .inbox-msg-wrap and puts .md-failed straight inside it, after the bubble. */
.md-msgs .inbox-msg-wrap.is-not-sent > .inbox-msg { opacity: .72; }
.md-failed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 4px 2px 2px; font-size: 13px; color: var(--text); max-width: 100%; }
.md-msgs .inbox-msg-wrap--coach > .md-failed { justify-content: flex-end; }
.md-failed-words { flex-basis: 100%; text-align: right; }
.md-m--client .md-failed-words { text-align: left; }
.md-failed-words b { color: var(--danger); font-weight: 600; }
.md-failed .md-btn { height: 30px; padding: 0 12px; font-size: 13px; }
/* The "New" line above the first unread message, and the pill when the coach is reading higher up. */
.md-newline { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; font-size: 12px; font-weight: 600; color: var(--md-new); }
.md-newline::before, .md-newline::after { content: ''; flex: 1; height: 1px; background: var(--md-new); opacity: .35; }
.md-newpill {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 2;
  height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--md-edge);
  background: var(--surface); color: var(--text); box-shadow: var(--md-shadow-sm);
  font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}

/* ── The message ⋯ button (not scoped: the Inbox page uses it too) ── */
.md-more-btn {
  width: 28px; height: 28px; flex-shrink: 0; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); opacity: 0;
  transition: opacity .12s ease, background .12s ease;
}
.md-more-btn svg { width: 16px; height: 16px; }
.md-m:hover .md-more-btn, .md-m:focus-within .md-more-btn, .md-more-btn:focus-visible, .md-more-btn[aria-expanded="true"] { opacity: 1; }
/* messages/thread-render.js draws the ⋯ inside .inbox-msg-wrap with no .md-m
   row around it (in the Inbox's hover strip, and alone in a corner thread), so
   its reveal keys on the message wrap too. */
.inbox-msg-wrap:hover .md-more-btn, .inbox-msg-wrap:focus-within .md-more-btn { opacity: 1; }
.md-more-btn:hover, .md-more-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
@media (hover: none) { .md-more-btn { opacity: 1; } }

/* ── The composer ──────────────────────────────────────────────────── */
.md-compose { position: relative; flex-shrink: 0; padding: 10px 12px 12px; border-top: 1px solid var(--border-light); }
[data-theme="light"] .md-compose { border-top-color: var(--border); }
.md-input {
  display: block; width: 100%; min-height: 42px; max-height: 128px; resize: none; overflow-y: auto;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font: inherit; font-size: 14px; line-height: 1.45;
}
.md-input::placeholder { color: var(--text-muted); }
.md-input:focus { outline: none; border-color: var(--md-new); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-dim); }
.md-compose-row { display: flex; align-items: center; gap: 2px; margin-top: 8px; }
.md-spacer { flex: 1; }
.md-chan {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 9px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); font-size: 14px; font-weight: 500;
}
.md-chan:hover { background: var(--surface-2); color: var(--text); }
.md-chan svg { width: 14px; height: 14px; }
.md-chan .md-caret { width: 10px; height: 10px; }
.md-chan.is-sms { background: var(--surface-2); color: var(--text); border-color: transparent; }
.md-compose-row .md-iconbtn { width: 32px; height: 32px; }
.md-send { width: 36px; height: 36px; margin-left: 4px; display: grid; place-items: center; padding: 0; cursor: pointer; border: 0; border-radius: 10px; background: var(--primary); color: var(--md-on-fill); transition: background .12s ease, opacity .12s ease; }
.md-send:hover { background: var(--primary-hover); }
.md-send:disabled { opacity: .4; cursor: default; }
.md-send svg { width: 16px; height: 16px; }
/* "Sent as a text to (612) 555-0142". */
.md-smsline { margin: 0 2px 6px; font-size: 12px; color: var(--text-muted); }
.md-smsline b { color: var(--text); font-weight: 600; }
/* The quiet line on a fallback: "Not by text: Client has no phone number on file". */
.md-notice { margin: 0 2px 6px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.md-notice b { color: var(--text); font-weight: 600; }
/* "Your browser blocked the microphone. Allow it in the address bar to record." */
.md-mic-blocked { margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: var(--danger-dim); font-size: 12px; line-height: 1.4; color: var(--text); }
.md-handoff { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; color: var(--text-muted); }
.md-handoff span { flex: 1; }
.md-rec { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--danger-dim); color: var(--text); font-size: 14px; font-weight: 500; }
.md-rec-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--danger); animation: md-rec 1.2s ease-in-out infinite; }
.md-rec span { flex: 1; }
.md-rec b { font-weight: 600; font-variant-numeric: tabular-nums; }
.md-ask { padding: 12px; border-radius: 12px; background: var(--danger-dim); font-size: 14px; color: var(--text); }
.md-ask p { margin: 0 0 10px; font-weight: 600; }
.md-ask div { display: flex; justify-content: flex-end; gap: 8px; }
/* Chips above the box: the reply target, a waiting file, a voice note. */
.md-chips { display: flex; flex-direction: column; gap: 6px; }
.md-chips:not(:empty) { margin-bottom: 8px; }
.md-chip {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 6px 6px 12px;
  border-radius: 12px; background: var(--surface-2); font-size: 13px; color: var(--text-muted);
}
.md-chip > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-chip b { color: var(--text); font-weight: 600; }
.md-chip img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.md-chip .md-iconbtn { width: 28px; height: 28px; }
/* "Remove" on a failed upload's chip, sized to the chip like its × buttons. */
.md-chip .md-btn { height: 28px; padding: 0 10px; font-size: 13px; flex-shrink: 0; }
.md-chip .md-play { width: 30px; height: 30px; flex-shrink: 0; border: 0; border-radius: 999px; background: var(--md-new); color: var(--md-on-fill); display: grid; place-items: center; cursor: pointer; padding: 0; }
.md-chip .md-play svg { width: 12px; height: 12px; }
/* "Uploading…" and "Couldn't upload. Try again" are words on the chip; a failed one is never sent. */
.md-chip-state { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.md-chip.is-uploading { cursor: progress; }
.md-chip.is-uploading img { opacity: .6; }
.md-chip.is-failed { background: var(--danger-dim); }
.md-chip.is-failed .md-chip-state { color: var(--danger); }
/* "Goes in the app": a file or voice note waiting while the window is on SMS. */
.md-chip-note { flex-shrink: 0; padding: 0 8px; border-radius: 999px; line-height: 20px; border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-muted); }

/* ── Small menus (not scoped: the Inbox page uses them too) ─────────── */
/* 9999 is the CRM's menu band on the Inbox page; inside #md-root it is local
   to the corner and still above the windows, the button and the list. */
.md-menu {
  position: absolute; z-index: 9999; min-width: 220px; max-width: 300px; padding: 6px;
  background: var(--surface); border: 1px solid var(--md-edge); border-radius: 10px; box-shadow: var(--md-shadow-sm);
  animation: md-pop .12s ease-out;
}
.md-menu button {
  width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; cursor: pointer;
  border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: left;
}
.md-menu button:hover { background: var(--surface-2); }
.md-menu button:focus-visible, .md-tray button:focus-visible { outline: 2px solid var(--md-new); outline-offset: -2px; }
.md-menu button svg { width: 15px; height: 15px; margin-top: 2px; flex-shrink: 0; color: var(--text-muted); }
.md-menu .md-check { margin-left: auto; color: var(--md-new); }
.md-menu-note { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.md-menu-label { padding: 6px 10px 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
/* A quiet note under a menu's heading ("Replies go in the app" under "Send as";
   the Quick replies menu's empty, loading and failed lines): not a second heading. */
.md-menu-label.md-menu-hint { font-weight: 400; padding-top: 0; }
.md-menu button .md-opt-main { display: flex; flex-direction: column; }
.md-compose .md-menu { left: 12px; bottom: 52px; }
/* An account may hold up to 100 quick replies: the menu scrolls instead of running off the window. */
.md-qr-menu { max-height: 300px; overflow-y: auto; }
/* The message menu: reactions on top, then words with icons. */
.md-msg-menu { min-width: 236px; transform-origin: top; }
/* No room below its ⋯, so it opened above it (message-menu.js place()). The
   pop already rises from 8px lower, away from the ⋯, so only its origin
   flips to the edge next to the ⋯. */
.md-menu.md-menu--up { transform-origin: bottom; }
/* The message menu over the Inbox page: message-menu.js puts it on <body>,
   fixed to the window on the CRM menus' band (9999), the layer the Inbox's
   emoji popover shares, below the dialog band. */
.md-menu.md-menu--page { position: fixed; z-index: 9999; }
.md-menu .md-quick { display: flex; align-items: center; gap: 2px; padding: 4px 4px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.md-menu .md-quick button { width: 36px; height: 36px; padding: 0; justify-content: center; align-items: center; font-size: 18px; border-radius: 999px; }
.md-menu .md-quick button svg { margin: 0; }
.md-menu .md-quick .is-mine { background: var(--primary-dim); }
.md-menu hr { border: 0; height: 1px; background: var(--border); margin: 4px 6px; }
.md-menu button.md-danger, .md-menu button.md-danger svg { color: var(--danger); }
.md-menu button[aria-disabled="true"] { color: var(--text-muted); cursor: default; }
.md-menu button[aria-disabled="true"]:hover { background: transparent; }
.md-menu button[aria-disabled="true"] svg { color: var(--text-muted); }
.md-menu .md-confirm { padding: 8px 10px 6px; }
.md-menu .md-confirm p { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--text); }
.md-menu .md-confirm span { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.md-menu .md-confirm-row { display: flex; justify-content: flex-end; gap: 8px; }
.md-menu .md-confirm-row button { width: auto; justify-content: center; }
/* .md-menu button (a class and a tag) outranks .md-btn (a class), which
   flattened Cancel and the red Unsend into plain words. They keep their look. */
.md-menu .md-confirm-row .md-btn {
  height: 34px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 600;
}
.md-menu .md-confirm-row .md-btn:hover { background: var(--surface-2); }
.md-menu .md-confirm-row .md-btn--danger,
.md-menu .md-confirm-row .md-btn--danger:hover { background: var(--danger); border-color: var(--danger); color: var(--md-on-fill); }
.md-menu .md-confirm-row .md-btn--danger:hover { filter: brightness(.95); }
/* A refused Unsend: the server's sentence, or "Couldn't unsend. Try again.",
   between the confirm words and the buttons. A sentence, so the red is never
   the only signal. Hidden (the [hidden] rule above) until it has words. */
.md-menu-error { margin: 0 0 10px; font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--md-danger-text); }
.md-menu .md-done svg { color: var(--md-new); }

/* ── The emoji tray (not scoped: built so the Inbox composer could use it) ── */
.md-tray { margin: -2px 0 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.md-tray-head { display: flex; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--border); }
.md-tray-head .md-tray-label { flex: 1; padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.md-tray-tabs { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; }
.md-tray-tab { width: 32px; height: 32px; flex-shrink: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 17px; cursor: pointer; }
.md-tray-tab[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--md-new); }
.md-tray-grid { height: 140px; overflow-y: auto; padding: 4px; display: grid; grid-template-columns: repeat(8, 1fr); align-content: start; }
.md-tray-cell { height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 20px; cursor: pointer; }
.md-tray-cell:hover, .md-tray-cell:focus-visible { background: var(--surface-2); }

/* ── Windows that did not fit sit behind one "+N" tab ──────────────── */
.md-more {
  position: fixed; bottom: 0; z-index: 1; height: 52px; padding: 0 16px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--md-edge); border-bottom: 0; border-radius: 12px 12px 0 0;
  background: var(--md-raise); color: var(--text); box-shadow: var(--md-shadow-sm);
  font-size: 14px; font-weight: 600;
}
.md-more-menu { position: fixed; bottom: 60px; z-index: 4; }
/* Each name fills its row, so its count sits at the right end. Written after
   .md-menu button (the same weight, flex-start), so it wins. */
.md-more-menu button { align-items: center; }
.md-more-menu button > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Narrow screens: one chat at a time, full width minus the gutters ── */
@media (max-width: 760px) {
  .md-win:not(.is-min) { left: 12px !important; right: 12px !important; width: auto; height: calc(100vh - 64px); }
  .md-list { left: 12px; right: 12px; width: auto; }
  /* The corner button would cover Send and the mic (A16). */
  #md-root.md-has-open .md-launch { display: none; }
}

/* Reduced motion turns off every corner animation: the pop-ins, the slides,
   the arrival fade, the recording dot, the typing dots and the ⋯ fade. */
@media (prefers-reduced-motion: reduce) {
  .md-launch, .md-launch > svg, .md-iconbtn, .md-list, .md-win, .md-win.is-arrival, .md-win-head,
  .md-tip, .md-typing i, .md-more-btn, .md-send, .md-rec-dot, .md-menu { animation: none; transition: none; }
}

/* === CORNER MESSAGES: END === */

/* ══════════════════════════════════════════════════════════════════════
   SOFTER LOOK — Payment History and its windows (Clayton, 2026-10-15)
   ══════════════════════════════════════════════════════════════════════
   "The payment history section on the account tab of the client profile needs to be updated to our new soft
   design. along with the pop ups, calendar picker, etc." The list takes the Calls card's rows (12px rows with a
   soft fill on hover, the thin lines between them kept and inset, 10px buttons, pill tags: the way paid, the card,
   the month, Refunded, Late). Its windows (Record Payment in index.html, Edit, Delete, the receipt and Resend in
   modules/payment-entry-windows.js) are the Change billing window's (change-billing.css .cb kit) with the CRM's
   own calendar; only their few parts the kit has no rule for are here. Colours, words and layout stay. */
.cp2 .payment-history { margin-top: 20px; padding: 16px 16px 12px; }
.cp2 .ph-header { min-height: 32px; padding: 0 12px; margin-bottom: 6px; }
.cp2 .ph-add-entry-btn {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 10px;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text);
}
.cp2 .ph-add-entry-btn:hover { border-color: var(--text-muted); color: var(--text); background: var(--surface-hover); }
.cp2 .ph-add-entry-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cp2 .ph-empty { padding: 10px 12px; }
.cp2 .payment-entry { position: relative; padding: 12px; border-bottom: 0; border-radius: 12px; }
.cp2 .payment-entry + .payment-entry::before { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--border); }
.cp2 .payment-entry:hover { background: var(--surface-hover); }
.cp2 .payment-entry:hover::before,
.cp2 .payment-entry:hover + .payment-entry::before { opacity: 0; }
.cp2 .pe-period {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border);
  font-size: 11px; font-weight: 600; line-height: 16px; color: var(--text-muted);
}
.cp2 .pe-late { padding: 2px 9px; border: 0; border-radius: 999px; background: var(--danger-dim); font-size: 11px; font-weight: 600; line-height: 16px; }
.cp2 .pe-actions { align-items: center; }
.cp2 .pe-action-btn { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: 10px; }
.cp2 .pe-action-btn:hover { background: var(--surface-2); }
.cp2 .pe-action-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cp2 .pe-undo { height: 30px; padding: 0 12px; border-radius: 10px; font-size: var(--fs-sm); font-weight: 600; }

/* Record Payment: what it records on a soft panel under the title (a label over each value), the two boxes side by
   side, and + Add Entry's note in the warning it always had, in red */
.cb .rp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px 16px; margin: 0 0 20px; padding: 12px 14px; border-radius: var(--cb-r-panel, 12px); background: var(--surface-2); }
.cb .rp-fact-k { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.cb .rp-fact-v { display: block; margin-top: 3px; font-size: var(--fs-base); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.cb .rp-fact--warn .rp-fact-k,
.cb .rp-fact--warn .rp-fact-v { color: var(--danger); }
/* A caution that reads as one in both themes (Clayton, 10/15: in dark mode the plain red tint "doesn't really stand
   out"): a warning triangle and a red heading as well as the tint, so it never rests on colour alone; a red edge and a
   stronger tint for the dark ground, where the 12% tint read as a muddy brown */
.cb .rp-note {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; margin: 0 0 20px; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent); border-radius: var(--cb-r-panel, 12px);
  background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: var(--text); font-size: var(--fs-sm); line-height: 1.5;
}
.cb .rp-note-ic { width: 20px; height: 20px; margin-top: 1px; color: #f87171; }
.cb .rp-note-h { display: block; margin-bottom: 4px; color: #fca5a5; font-weight: 700; }
[data-theme="light"] .cb .rp-note { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
[data-theme="light"] .cb .rp-note-ic { color: #dc2626; }
[data-theme="light"] .cb .rp-note-h { color: #b91c1c; }
.cb .rp-note ul { margin: 0; padding-left: 18px; }
.cb .rp-note li + li { margin-top: 2px; }
.cb .rp-row { display: flex; flex-wrap: wrap; gap: 18px 16px; margin-bottom: 18px; }
.cb .rp-optional { font-weight: 400; color: var(--text-subtle); }
.cb .rp-wide,
.cb .pew-wide { width: 100%; box-sizing: border-box; }
.cb .rp-dialog input[type="number"],
.cb.pew input[type="number"] { -moz-appearance: textfield; appearance: textfield; text-align: left; }
.cb .rp-dialog input[type="number"]::-webkit-inner-spin-button,
.cb .rp-dialog input[type="number"]::-webkit-outer-spin-button,
.cb.pew input[type="number"]::-webkit-inner-spin-button,
.cb.pew input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* The receipt: the email in its frame with the panels' corner; Resend on the left, Close on the right */
.cb .pew-frame { display: block; width: 100%; height: 56vh; border: 1px solid var(--border); border-radius: var(--cb-r-panel, 12px); background: #f4f4f5; }
.cb .pew-left { margin-right: auto; }

/* ── SOFTER LOOK — Assign standing slot (Clayton, 2026-10-15: "also needs updated styling") ──
   The Session Tracker's standing slot window (index.html #sess-standing-modal) takes the Change billing window's
   look without its stylesheet, which may not be loaded: a 16px window, the Saira title, 38px boxes and buttons with
   10px corners on the soft grey ground, the day list with its own arrow. Same ids, words and handlers. */
.modal.ssw { width: min(480px, calc(100vw - 32px)); max-width: none; border-radius: 16px; box-shadow: 0 16px 48px rgba(15, 23, 42, .16); }
[data-theme="dark"] .modal.ssw { box-shadow: 0 16px 48px rgba(0, 0, 0, .5); }
.ssw .ssw-h { align-items: flex-start; gap: 16px; padding: 20px 24px 16px; border-radius: 16px 16px 0 0; }
.ssw .ssw-h h2 { margin: 0; font: 800 16px/1.25 'Saira', -apple-system, BlinkMacSystemFont, sans-serif; text-transform: uppercase; letter-spacing: .02em; color: var(--text); }
.ssw .ssw-x { width: 32px; height: 32px; flex: none; display: grid; place-items: center; margin: -4px -8px 0 0; padding: 0; border-radius: 10px; font-size: 20px; line-height: 1; }
.ssw .ssw-x:hover { background: var(--surface-hover); color: var(--text); }
.ssw .ssw-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ssw .ssw-b { padding: 20px 24px 24px; }
.ssw .ssw-b .modal-form { padding: 0; }
.ssw .ssw-why { margin: 0 0 20px; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.ssw .ssw-row { display: flex; flex-wrap: wrap; gap: 16px; }
.ssw .ssw-field { display: flex; flex-direction: column; min-width: 0; }
.ssw .ssw-lbl { display: block; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.ssw .ssw-ctl {
  box-sizing: border-box; height: 38px; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); font: inherit; font-size: var(--fs-base); outline: none; transition: border-color .15s, box-shadow .15s;
}
.ssw .ssw-ctl:hover { border-color: var(--text-subtle); }
.ssw .ssw-ctl:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.ssw .ssw-select {
  min-width: 140px; padding-right: 34px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 14px 14px;
}
.ssw .ssw-dur { width: 110px; text-align: left; -moz-appearance: textfield; appearance: textfield; }
.ssw .ssw-dur::-webkit-inner-spin-button,
.ssw .ssw-dur::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ssw .ssw-f { gap: 8px; margin-top: 0; padding: 14px 24px; border-radius: 0 0 16px 16px; }
.ssw .ssw-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 96px; height: 38px; padding: 0 20px; border-radius: 10px; line-height: 18px; }

/* ── SOFTER LOOK — Log Session Outcome (Clayton, 2026-10-15: "needs to all be updated") ──
   The Session Tracker's Log Session window on the standing slot window's .ssw look above: line icons in place of the
   emoji (a check, two turning arrows, a cross: the shape says which, never colour alone), 12px outcome cards, the
   picked one with a ring and a tick in its corner, the CRM's own calendar, and the note under the outcome on a soft
   panel that wraps. Same ids, words and handlers (sessions.js sets the classes). */
.modal.ssw.ssw-log { width: min(540px, calc(100vw - 32px)); }
.ssw .ssw-next { margin-top: 20px; }
.ssw .ssw-wide { width: 100%; }
.ssw .ssw-optional { font-weight: 400; color: var(--text-subtle); }
.ssw .sess-outcome-grid { gap: 10px; margin: 0; }
.ssw .sess-outcome-card {
  position: relative; gap: 4px; padding: 16px 10px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); font: inherit; transition: border-color .15s, background .15s, box-shadow .15s;
}
.ssw .sess-outcome-card:hover { border-color: var(--text-subtle); background: var(--surface-hover); }
.ssw .sess-outcome-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ssw .sess-outcome-icon { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 12px; font-size: 0; }
.ssw .sess-outcome-icon svg { width: 22px; height: 22px; }
.ssw .ssw-ok    { background: var(--success-dim); color: #16a34a; }
.ssw .ssw-moved { background: var(--warning-dim); color: #d97706; }
.ssw .ssw-lost  { background: var(--danger-dim);  color: #dc2626; }
[data-theme="dark"] .ssw .ssw-ok    { color: #22c55e; }
[data-theme="dark"] .ssw .ssw-moved { color: #f59e0b; }
[data-theme="dark"] .ssw .ssw-lost  { color: #f87171; }
.ssw .sess-outcome-label { font-size: var(--fs-sm); font-weight: 600; }
.ssw .sess-outcome-sub { line-height: 1.35; }
.ssw .sess-outcome-sel-completed,
.ssw .sess-outcome-sel-resched,
.ssw .sess-outcome-sel-forfeit { box-shadow: 0 0 0 1px currentColor; }
.ssw .sess-outcome-sel-completed { color: #16a34a; }
.ssw .sess-outcome-sel-resched   { color: #d97706; }
.ssw .sess-outcome-sel-forfeit   { color: #dc2626; }
[data-theme="dark"] .ssw .sess-outcome-sel-completed { color: #22c55e; }
[data-theme="dark"] .ssw .sess-outcome-sel-resched   { color: #f59e0b; }
[data-theme="dark"] .ssw .sess-outcome-sel-forfeit   { color: #f87171; }
.ssw [class*="sess-outcome-sel-"] .sess-outcome-label { color: var(--text); }
.ssw [class*="sess-outcome-sel-"]::after {
  content: ''; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 999px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6 5.4-5.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat, currentColor;
}
.ssw .sess-who-grid { gap: 10px; }
.ssw .sess-who-btn {
  gap: 2px; padding: 12px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  color: var(--text); font: inherit; transition: border-color .15s, background .15s, box-shadow .15s;
}
.ssw .sess-who-btn:hover { border-color: var(--text-subtle); background: var(--surface-hover); }
.ssw .sess-who-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ssw .sess-who-label { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 600; }
.ssw .sess-who-label svg { width: 18px; height: 18px; color: var(--text-muted); }
.ssw .sess-who-sel { border-color: var(--primary) !important; background: var(--primary-dim) !important; box-shadow: 0 0 0 1px var(--primary); }
.ssw .sess-who-sel .sess-who-label svg { color: var(--primary); }
.ssw #sess-outcome-preview:not(:empty) { margin-top: 12px; }
.ssw .sess-preview-box { padding: 11px 14px; border: 0; border-radius: 12px; color: var(--text); font-size: var(--fs-sm); font-weight: 500; text-align: left; white-space: normal; }
.ssw .sess-preview-src { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-muted); opacity: 1; white-space: normal; }

/* ── SOFTER LOOK — the CRM's confirm boxes (Clayton, 2026-10-15: "this also needs to get updated") ──
   Both share .confirm-dialog: the old one (#confirm-overlay, modals.js showConfirmDialog: Freeze, Cancel client,
   Delete client and more) and showConfirm's (#sc-overlay). A 16px box with the Change billing window's shadow, the
   message at the window's size, 10px buttons at least 38px tall (min-height, so the two-line charge button still
   fits) and 96px wide, 10px corners on the fields some of them show. Words, colours and layout stay. */
.confirm-dialog { border-radius: 16px; box-shadow: 0 16px 48px rgba(15, 23, 42, .16); }
[data-theme="dark"] .confirm-dialog { box-shadow: 0 16px 48px rgba(0, 0, 0, .5); }
#confirm-overlay .confirm-dialog { max-width: 420px; padding: 24px; }
#confirm-overlay .confirm-dialog.has-choices { max-width: 460px; }
#confirm-overlay #confirm-message { margin: 0; font-size: var(--fs-base); line-height: 1.55; }
#confirm-overlay .confirm-actions { gap: 8px; margin-top: 22px; }
.confirm-dialog .confirm-actions > button {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 38px; min-width: 96px; padding: 0 18px; border-radius: 10px; line-height: 18px;
}
#confirm-overlay input[type="date"],
#confirm-overlay select,
#confirm-overlay textarea { border-radius: 10px; }
#sc-overlay .confirm-input { border-radius: 10px; }

/* ══════════════════════════════════════════════════════════════════════
   ACCOUNT TAB — the redesign (Clayton, 2026-10-15: "start building the Account tab")
   ══════════════════════════════════════════════════════════════════════
   The approved prototype (mockups/account-tab-round-two-2026-10-15.html), drawn by
   modules/client-profile/account-tab.js. The answers first in three tiles that jump to their card, then a wide main
   column (Plan, Session Tracker, Payments) and a narrow side column (Client details, App and messages, the rest) that
   follows the page under the profile's sticky header while it fits. One look per kind of thing: every heading inside a
   card is the sidebar's group title; every button but the page's main one is the profile header's (38px, 10px
   corners, a border, no fill); every tag an 11px pill with no border; every row 12px above and below. Below 1180px the
   side column drops under the main one. ⚠️ The Billing card's own classes (cb-*) belong to change-billing.css alone
   (change-billing-css.test.mjs), so its parts are reached here by id and shape, never by those names. */
.cp2 .acct { display: grid; gap: 24px; }
.cp2 .acct .profile-card { margin: 0; }
.cp2 .acct .card-header { display: flex; align-items: center; gap: 12px; }
.cp2 .acct [id] { scroll-margin-top: var(--acct-top, 16px); }
/* The session request email's link stops at "Waiting for your OK" (session-requests/open-from-link.js), which has no id */
.cp2 .acct [data-sess-requests] { scroll-margin-top: var(--acct-top, 16px); }
.cp2 .acct .profile-card.is-arrived { box-shadow: 0 0 0 2px var(--primary); transition: box-shadow .3s; }

/* The top row: At a glance, and the tab's actions */
.cp2 .acct-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-height: 38px; }
.cp2 .acct-top .cp2-acct-h { flex: 1; margin: 0; padding: 0 2px; border: 0; font-size: 11px; font-weight: 700; color: var(--text); }
.cp2 .acct-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Every button that is not the page's main action: the profile header's */
.cp2 .acct .acct-actions .btn-record-payment,
.cp2 .acct .card-header .btn-record-payment,
.cp2 .acct .ph-add-entry-btn,
.cp2 .acct .amount-owed-host .btn-secondary {
  display: inline-flex; align-items: center; gap: 7px; box-sizing: border-box; height: 38px; padding: 0 14px; margin: 0;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 18px; box-shadow: none; cursor: pointer;
}
.cp2 .acct .acct-actions .btn-record-payment:hover,
.cp2 .acct .card-header .btn-record-payment:hover,
.cp2 .acct .ph-add-entry-btn:hover,
.cp2 .acct .amount-owed-host .btn-secondary:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border); }
/* The one filled button: the page's main action (Change billing), and Retry inside the owed box */
.cp2 .acct .acct-actions .btn-primary,
.cp2 .acct .amount-owed-host .btn-primary { display: inline-flex; align-items: center; box-sizing: border-box; height: 38px; padding: 0 16px; margin: 0; border-radius: 10px; font-size: 13.5px; font-weight: 600; }
.cp2 .acct .acct-actions .hidden { display: none !important; }

/* The tiles */
.cp2 .acct-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cp2 .acct-tile {
  display: block; width: 100%; min-width: 0; box-sizing: border-box; padding: 18px 20px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border); font: inherit; text-align: left; color: inherit;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.cp2 .acct-tile:hover { border-color: var(--text-subtle); box-shadow: 0 4px 14px rgba(15, 23, 42, .06); }
.cp2 .acct-tile:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cp2 .acct-tile-k { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.cp2 .acct-tile-k svg { width: 16px; height: 16px; flex: none; }
.cp2 .acct-tile-go { margin-left: auto; font-size: 18px; line-height: 1; color: var(--text-subtle); }
.cp2 .acct-tile-v,
.cp2 .acct-tile-s { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp2 .acct-tile-v { margin-top: 8px; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; }
.cp2 .acct-tile-s { min-height: 1.4em; margin-top: 3px; font-size: var(--fs-sm); color: var(--text-muted); }
.cp2 .acct-tile.is-ok .acct-tile-k { color: #22c55e; }
.cp2 .acct-tile.is-owed { background: var(--warning-dim); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.cp2 .acct-tile.is-owed .acct-tile-k { color: #f59e0b; }
.cp2 .acct-tile.is-paused { background: var(--primary-dim); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.cp2 .acct-tile.is-paused .acct-tile-k { color: #5a86f5; }
[data-theme="light"] .cp2 .acct-tile.is-ok .acct-tile-k { color: #15803d; }
[data-theme="light"] .cp2 .acct-tile.is-owed .acct-tile-k { color: #b45309; }
[data-theme="light"] .cp2 .acct-tile.is-paused .acct-tile-k { color: var(--primary); }
.cp2 .acct-tile.is-loading { display: grid; gap: 10px; cursor: default; }
.cp2 .acct-tile.is-loading:hover { border-color: var(--border); box-shadow: none; }
/* Loading: soft grey shapes where the words will be */
.cp2 .acct-sk {
  display: block; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-hover) 50%, var(--surface-2) 100%);
  background-size: 200% 100%; animation: acct-sk 1.2s ease-in-out infinite;
}
@keyframes acct-sk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .cp2 .acct-sk { animation: none; } }

/* The two columns */
.cp2 .acct-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
.cp2 .acct-main,
.cp2 .acct-side { display: grid; gap: 24px; min-width: 0; }
.cp2 .acct-side.is-sticky { position: sticky; top: var(--acct-top, 16px); }
.cp2 .acct .pcl-section > .cp2-acct-h { display: none; }
.cp2 .acct .pcl-calls { margin: 0; }
@media (max-width: 1180px) {
  .cp2 .acct-cols,
  .cp2 .acct-tiles { grid-template-columns: minmax(0, 1fr); }
  .cp2 .acct-side.is-sticky { position: static; }
}

/* Every heading inside a card: the sidebar's group title (.sb-group-title) */
.cp2 .acct .acct-group-h,
.cp2 .acct .ph-title,
.cp2 .acct #client-billing-card > div > h3 { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
/* Every row: 12px above and below, in both columns */
.cp2 .acct .detail-row { box-sizing: border-box; min-height: 44px; padding: 12px 0; align-items: center; gap: 16px; }
.cp2 .acct .detail-val { min-width: 0; }
/* Every tag: an 11px pill with no border */
.cp2 .acct .agreement-badge { padding: 3px 10px; border: 0; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 16px; }
.cp2 .acct .agreement-badge--signed { background: var(--success-dim); color: #22c55e; }
[data-theme="light"] .cp2 .acct .agreement-badge--signed { color: #15803d; }
.cp2 .acct .agreement-doc-link { font-size: 13px; font-weight: 600; color: var(--accent); }
.cp2 .acct-agree { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.cp2 .acct-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--fs-sm); font-weight: 600; text-decoration: none; cursor: pointer; }
.cp2 .acct-link:hover { text-decoration: underline; }
.cp2 .acct-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.cp2 .acct-link--danger { color: var(--danger); }
.cp2 .acct-link--quiet { color: var(--text-muted); font-weight: 500; }
.cp2 .acct-links { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px; }
.cp2 .acct-muted { color: var(--text-muted); font-weight: 400; }
.cp2 .acct-lines { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cp2 .acct-lines .acct-muted { font-size: var(--fs-xs); }
.cp2 .acct-row-top { align-items: flex-start; }
.cp2 .acct-wrap { white-space: pre-line; text-align: right; }
.cp2 .acct-prog { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cp2 .acct-prog i { display: block; width: 180px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cp2 .acct-prog b { display: block; height: 100%; border-radius: 999px; background: var(--primary); }

/* Plan: the Billing card's rows first (its frame and title off; Change billing sits in the top row), then the plan
   as the record has it where that card is off, then the agreement and Stripe, then Coming up when a change waits */
.cp2 .acct-plan { display: flex; flex-direction: column; }
.cp2 .acct-plan > .card-header { order: 0; }
.cp2 .acct-plan > #client-billing-card { display: contents; }
.cp2 .acct-plan > #client-billing-card > .card-header { display: none; }
.cp2 .acct-plan > #client-billing-card > .profile-details { order: 1; padding-bottom: 0; }
.cp2 .acct-plan > .acct-plan-own { order: 2; padding-bottom: 0; }
.cp2 .acct-plan > .acct-agreement { order: 3; padding-top: 0; }
.cp2 .acct-plan > #client-billing-card > p { order: 4; margin: 0; padding: 0 28px 16px; }
.cp2 .acct-plan > #client-billing-card > div:has(> h3) { order: 5; margin: 0; padding: 4px 28px 22px; border-top: 0; }
.cp2 .acct-plan > #client-billing-card > div:has(> h3 + p:last-child) { display: none; }
.cp2 .acct-plan .detail-row:last-child { border-bottom: 1px solid var(--border); }
.cp2 .acct-plan > .acct-agreement > .detail-row:last-child { border-bottom: 0; }
.cp2 .acct-plan .detail-row[data-acct-tiled] { display: none; }
/* Where the Billing card shows, it says the plan; the record's own rows step aside (the Plan row stays wherever it
   has not given way, as it did beside the card before) */
.cp2 .acct-plan:has(> #client-billing-card:not(.hidden) .detail-key) > .acct-plan-own > .detail-row:not(.plan-row) { display: none; }

/* Payments */
.cp2 .acct .amount-owed-host > .card {
  margin: 0 28px 16px; border-radius: 12px; box-shadow: none;
  background: var(--warning-dim); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
}
.cp2 .acct .amount-owed-host > .card > .card-header { padding: 14px 16px 4px; }
.cp2 .acct .amount-owed-host > .card > .card-header h2 { font-family: inherit; font-size: var(--fs-base); font-weight: 700; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--text); }
.cp2 .acct .amount-owed-host .payment-entry { padding: 8px 16px; }
.cp2 .acct .amount-owed-host .payment-entry:hover { background: none; }
.cp2 .acct .amount-owed-host .owed-note { padding: 4px 16px; }
.cp2 .acct .amount-owed-host .owed-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 16px; }
.cp2 .acct-decline { margin: 0 28px 16px; padding: 10px 14px; border-radius: 12px; background: var(--danger-dim); font-size: var(--fs-sm); line-height: 1.5; color: var(--text); }
.cp2 .acct-decline b { color: #f87171; }
.cp2 .acct .amount-owed-host:not([hidden]) ~ .acct-decline .acct-decline-what { display: none; }
[data-theme="light"] .cp2 .acct-decline b { color: #b91c1c; }
.cp2 .acct-sum { display: flex; flex-wrap: wrap; gap: 22px; padding: 0 28px 4px; font-size: var(--fs-sm); color: var(--text-muted); }
.cp2 .acct-sum b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cp2 .acct .payment-history { margin-top: 10px; }
.cp2 .acct-rows.is-capped > .payment-entry:nth-child(n+6) { display: none; }
.cp2 .pe-status { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.cp2 .pe-status.is-paid { background: var(--success-dim); color: #22c55e; }
.cp2 .pe-status.is-failed { background: var(--danger-dim); color: #f87171; }
.cp2 .pe-status.is-refunded { background: var(--surface-2); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }
[data-theme="light"] .cp2 .pe-status.is-paid { color: #15803d; }
[data-theme="light"] .cp2 .pe-status.is-failed { color: #b91c1c; }
.cp2 .acct .payment-entry { gap: 12px; }
.cp2 .acct-viewall { display: flex; justify-content: center; padding: 6px 16px 16px; }
.cp2 .acct-viewall button,
.cp2 .acct .acct-edit { padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.cp2 .acct-viewall button:hover { background: var(--surface-hover); }
.cp2 .acct-viewall button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cp2 .acct-cards { padding-top: 0; }
.cp2 .acct .cards-on-file-h { min-height: 0; padding: 20px 0 4px; border-bottom: 0; }
.cp2 .acct .cards-on-file-h:first-child { padding-top: 8px; }
.cp2 .acct .cards-on-file-h strong { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
/* View all: the payments in a panel beside the page */
.cp2 .acct-drawer-bg { position: fixed; inset: 0; z-index: 94; background: rgba(15, 23, 42, .35); }
.cp2 .acct-drawer {
  position: fixed; top: 10px; right: 10px; bottom: 10px; z-index: 95; width: min(560px, calc(100vw - 20px)); overflow-y: auto;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 16px 48px rgba(15, 23, 42, .2);
}
.cp2 .acct-drawer-h { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 12px; }
.cp2 .acct-drawer-h h2 { margin: 0; font: 800 16px/1.25 'Saira', sans-serif; text-transform: uppercase; letter-spacing: .02em; color: var(--text); }
.cp2 .acct-drawer-x { width: 32px; height: 32px; border: 0; border-radius: 10px; background: none; color: var(--text-muted); font-size: 20px; cursor: pointer; }
.cp2 .acct-drawer-x:hover { background: var(--surface-hover); }
.cp2 .acct-drawer-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cp2 .acct-drawer .acct-sum { padding: 0 24px 4px; }
.cp2 .acct-drawer .payment-history { border-top: 0; padding-bottom: 96px; }   /* clear of the corner messages button */

/* The side column's cards: groups of rows under a heading */
.cp2 .acct-props { padding: 2px 28px 22px; }
.cp2 .acct-group ~ .acct-group { margin-top: 24px; }
.cp2 .acct-props .detail-row.has-note { border-bottom: 0; padding-bottom: 6px; min-height: 0; }
.cp2 .acct-note { padding: 0 0 11px; border-bottom: 1px solid var(--border); font-size: var(--fs-xs); line-height: 1.45; color: var(--text-muted); }
.cp2 .acct-note:empty { display: none; }
.cp2 .acct-hint { margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted); }
.cp2 .acct .acct-edit { margin-left: auto; }
.cp2 .acct .acct-edit:hover { background: var(--surface-hover); }
.cp2 .acct-contact { display: inline-flex; align-items: center; gap: 2px; }
.cp2 .acct-contact > span { margin-right: 6px; overflow-wrap: anywhere; }
.cp2 .acct-act { width: 30px; height: 30px; flex: none; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); cursor: pointer; }
.cp2 .acct-act:hover { background: var(--surface-2); color: var(--text); }
.cp2 .acct-act:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cp2 .acct-act svg { width: 16px; height: 16px; }
.cp2 .acct-act.is-done { color: #22c55e; }
.cp2 .acct-ow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); }
.cp2 .acct-reset { padding: 0 0 6px; text-align: right; }
.cp2 .acct-onb { padding: 0 20px 16px; }
/* The edit form and Program start's date box in the narrow column: their fields wrap instead of pushing the card wide */
.cp2 .acct-props .contact-edit-form { padding: 12px 0 0; }
.cp2 .acct-props .ce-row { flex-wrap: wrap; }
.cp2 .acct-props .ce-row > .ce-field { flex: 1 1 140px; min-width: 0; }
.cp2 .acct #cp-ps-row,
.cp2 .acct .ps-edit-inline { flex-wrap: wrap; }
/* The CRM's dropdowns in the side column: the Change billing windows' size (38px, 14px words, a 12px list) */
.cp2 .acct-props .custom-select { width: 220px; max-width: 100%; }
.cp2 .acct-props .custom-select-trigger { height: 38px; gap: 10px; padding: 0 15px 0 12px; background: var(--surface-2); border-radius: 10px; font-size: var(--fs-base); }
.cp2 .acct-props .custom-select-trigger svg { width: 14px; height: 14px; }
.cp2 .acct-props .custom-select-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cp2 .acct-props .custom-select-dropdown { padding: 4px; border-radius: 12px; background: var(--surface); }
.cp2 .acct-props .custom-select-option { padding: 9px 12px; border-radius: 8px; font-size: var(--fs-base); white-space: nowrap; text-align: left; }

/* ── The calendar's client picker says how many sessions are free (Clayton, 2026-10-15) ──
   create.js paintPickerFree: "3 free" beside each in-person or hybrid client's name as the coach types, and a line
   under the picker for the one picked. None free is amber AND says "0 free" / "no sessions", never colour alone. */
.c2-combo-list li[data-c2-opt] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.c2-combo-list .c2-opt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c2-combo-list .c2-opt-free {
  flex: none; padding: 2px 8px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border);
  font-size: 11px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.c2-combo-list .c2-opt-free.is-none { background: var(--warning-dim); box-shadow: none; color: #b45309; }
[data-theme="dark"] .c2-combo-list .c2-opt-free.is-none { color: #f59e0b; }
.c2-free-line { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: var(--fs-sm); line-height: 1.45; color: var(--text); }
.c2-free-line[hidden] { display: none; }
.c2-free-line.is-none { background: var(--warning-dim); }

/* ── One picked look for every pick-one switch (Clayton, 2026-10-15: "make it match the others") ──
   The pick-one switches are all pills now; the picked choice is the same everywhere too: raised on the track (white
   with a soft shadow in the light theme, a lighter grey in the dark one) with its word in bold, so it never rests on
   colour alone. Was a blue fill on the profile's Month and Week, the profile's pop-up switches (a phase's end,
   cardio, change duration), Assign workout's Length and End date, and the calendar form's Event or Client session
   and Busy or Free. Change billing's switches (change-billing.css .cb-seg) and the messages dock already looked this
   way. The blue stays for the one main button in a window. */
.cp2 .cp2-seg button.on,
.cp2-pop .cp2-rseg button.on,
.assign-endmode-btn.active,
#assign-workout-overlay .assign-endmode-btn.active,
#training-days-overlay .assign-endmode-btn.active,
.c2-mode button[aria-pressed="true"],
.c2-peek-busy .seg button[aria-pressed="true"],
.c2-sheet .seg button[aria-pressed="true"] { background: var(--surface-hover); color: var(--text); font-weight: 600; box-shadow: none; }
[data-theme="light"] .cp2 .cp2-seg button.on,
[data-theme="light"] .cp2-pop .cp2-rseg button.on,
[data-theme="light"] .assign-endmode-btn.active,
[data-theme="light"] #assign-workout-overlay .assign-endmode-btn.active,
[data-theme="light"] #training-days-overlay .assign-endmode-btn.active,
[data-theme="light"] .c2-mode button[aria-pressed="true"],
[data-theme="light"] .c2-peek-busy .seg button[aria-pressed="true"],
[data-theme="light"] .c2-sheet .seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(15, 23, 42, .10), 0 0 0 1px var(--border); }

/* ══════════════════════════════════════════════════════════════════════
   SESSION TRACKER — the softer card (Account tab redesign, part 2; Clayton, 2026-10-15)
   ══════════════════════════════════════════════════════════════════════
   modules/sessions.js renderSessionCard, on the Account tab and the classic Overview. The approved prototype's card
   (mockups/account-tab-round-two-2026-10-15.html, mockups/session-tracker-softer-2026-10-15.html): line icons in soft
   squares, three numbers that say what they mean, Standing slot, Credits and Session history as rows with thin inset
   lines and a soft hover, every status a word in a pill (never colour alone), 38px buttons with 10px corners, the
   section headings the sidebar's group title. Pause and the prepaid pack sit in the ⋯ menu, which shows only when one
   of them can be used. Older and spent rows wait one click away. */
.stp-card .card-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stp-head-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.stp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; height: 38px; padding: 0 14px; margin: 0;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 18px; cursor: pointer; white-space: nowrap;
}
.stp-btn:hover { background: var(--surface-hover); }
.stp-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.stp-btn:disabled { opacity: .5; cursor: not-allowed; }
.stp-btn:disabled:hover { background: var(--surface); }
.stp-btn svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
.stp-more-btn { width: 38px; padding: 0; list-style: none; }
.stp-more-btn::-webkit-details-marker { display: none; }
.stp-more-btn::marker { content: ''; }
.stp-more { position: relative; display: none; }
/* The ⋯ menu shows only when something in it can be used: Pause where Change billing is on, the prepaid pack where
   neither New purchase nor the one sessions system has replaced it (the same body classes that hide each item) */
body.cb-on .stp-more:has([data-cb-only]),
body:not(.sl-on):not(.np-on) .stp-more:has([data-prepaid]) { display: inline-block; }
body.member-mode:not(.cb-on) .stp-more { display: none; }
.stp-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 250px; padding: 6px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
[data-theme="light"] .stp-menu { box-shadow: 0 10px 28px rgba(15, 23, 42, .14); }
.stp-mi {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 600; text-align: left; cursor: pointer;
}
.stp-mi:hover { background: var(--surface-hover); }
.stp-mi:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.stp-mi svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--text-muted); }
.stp-mi small { display: block; margin-top: 1px; font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); }

.stp-body { padding: 0 28px 24px; }
.stp-period { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; margin: 2px 0 10px; font-size: var(--fs-sm); color: var(--text-muted); }
.stp-period b { color: var(--text); font-weight: 600; }
.stp-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stp-num { padding: 14px 16px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.stp-num-v { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.stp-num-k { margin-top: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.stp-num-d { margin-top: 1px; font-size: var(--fs-xs); color: var(--text-muted); }
.stp-num.is-zero .stp-num-v { color: var(--text-muted); }
.stp-num.is-warn { background: var(--warning-dim); }
.stp-num.is-warn .stp-num-v { color: #f59e0b; }
[data-theme="light"] .stp-num.is-warn .stp-num-v { color: #b45309; }
.stp-body .sess-alert { margin: 14px 0 0; padding: 11px 14px; border: 0; border-radius: 12px; font-size: var(--fs-sm); line-height: 1.5; }

.stp-sec { margin-top: 22px; }
.stp-sec-h { display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 0 0 4px; }
.stp-sec-t { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.stp-sec-m { font-size: var(--fs-sm); color: var(--text-muted); }
.stp-sec-h .stp-link { margin-left: auto; }
.stp-list { margin: 0 -12px; }
.stp-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 12px; }
.stp-row + .stp-row::before,
.stp-rest > .stp-row:first-of-type::before { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--border); }
.stp-row:hover { background: var(--surface-hover); }
.stp-row:hover::before, .stp-row:hover + .stp-row::before { opacity: 0; }
.stp-row.is-dim { opacity: .62; }
.stp-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--text-muted); }
.stp-ico svg { width: 24px; height: 24px; }
.stp-ico.is-ok { background: var(--success-dim); color: #22c55e; }
.stp-ico.is-credit { background: var(--primary-dim); color: #5a86f5; }
.stp-ico.is-makeup { background: rgba(168, 85, 247, .14); color: #c084fc; }
.stp-ico.is-warn { background: var(--warning-dim); color: #f59e0b; }
.stp-ico.is-danger { background: var(--danger-dim); color: #f87171; }
[data-theme="light"] .stp-ico.is-ok { color: #16a34a; }
[data-theme="light"] .stp-ico.is-credit { color: var(--primary); }
[data-theme="light"] .stp-ico.is-makeup { color: #7e22ce; }
[data-theme="light"] .stp-ico.is-warn { color: #b45309; }
[data-theme="light"] .stp-ico.is-danger { color: #dc2626; }
.stp-text { flex: 1; min-width: 0; }
.stp-t { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.stp-s { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-muted); }
.stp-bar { height: 6px; max-width: 320px; margin-top: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.stp-bar i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.stp-bar.is-dim i { background: var(--border); }
.stp-pill {
  flex: none; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap;
  background: var(--surface-2); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border);
}
.stp-pill.is-ok { background: var(--success-dim); color: #22c55e; box-shadow: none; }
.stp-pill.is-credit { background: var(--primary-dim); color: #93b4ff; box-shadow: none; }
.stp-pill.is-makeup { background: rgba(168, 85, 247, .14); color: #d8b4fe; box-shadow: none; }
.stp-pill.is-warn { background: var(--warning-dim); color: #f59e0b; box-shadow: none; }
.stp-pill.is-danger { background: var(--danger-dim); color: #f87171; box-shadow: none; }
[data-theme="light"] .stp-pill.is-ok { color: #15803d; }
[data-theme="light"] .stp-pill.is-credit { color: var(--primary); }
[data-theme="light"] .stp-pill.is-makeup { color: #7e22ce; }
[data-theme="light"] .stp-pill.is-warn { color: #b45309; }
[data-theme="light"] .stp-pill.is-danger { color: #b91c1c; }
.stp-link, .stp-quiet {
  flex: none; padding: 6px 10px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap;
}
.stp-link { color: var(--accent); font-weight: 600; }
.stp-quiet { color: var(--text-muted); font-weight: 500; }
.stp-link:hover, .stp-quiet:hover { background: var(--surface-2); }
.stp-quiet:hover { color: var(--text); }
.stp-link:focus-visible, .stp-quiet:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.stp-empty { padding: 12px; font-size: var(--fs-sm); color: var(--text-muted); }
/* Older and spent rows, one click away */
.stp-rest > summary {
  display: flex; justify-content: center; margin: 6px 12px 0; padding: 8px 14px; list-style: none;
  border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.stp-rest > summary::-webkit-details-marker { display: none; }
.stp-rest > summary::marker { content: ''; }
.stp-rest > summary:hover { background: var(--surface-hover); }
.stp-rest > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.stp-rest .stp-rest-less, .stp-rest[open] .stp-rest-more { display: none; }
.stp-rest[open] .stp-rest-less { display: inline; }
.stp-rest[open] > summary { order: 2; margin: 6px 12px 0; }
.stp-rest[open] { display: flex; flex-direction: column; }
.stp-rest[open] > .stp-row { order: 1; }
@media (max-width: 640px) {
  .stp-nums { grid-template-columns: minmax(0, 1fr); }
  .stp-row { flex-wrap: wrap; }
}

/* ── SESSION REQUESTS, on the Session Tracker (Clayton, 2026-10-16) ──
   modules/session-requests/section.js. "Waiting for your OK" is the card's own rows (a request is a row: an icon, the time,
   when it was asked, what to know before saying yes), with the one main button in sapphire and Decline quiet beside it. The
   warnings are plain lines in the text colour (the time is the headline, the asking date the muted line), so nothing
   leans on colour to be read, and there is no coloured edge on anything. "Booking" is one quiet row with a select. */
.stp-warn { color: var(--text); }
.stp-btn.stp-go { background: var(--primary); border-color: var(--primary); color: #fff; }
.stp-btn.stp-go:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.stp-booking .stp-row:hover { background: none; }
.stp-select {
  flex: none; box-sizing: border-box; height: 38px; max-width: 100%; padding: 0 32px 0 12px; border: 1px solid var(--border); border-radius: 10px;
  background-color: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 500; line-height: 18px; cursor: pointer;
  -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% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
}
.stp-select:hover { background-color: var(--surface-hover); }
.stp-select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.stp-select option { background: var(--surface); color: var(--text); }
@media (max-width: 640px) {
  .stp-select { width: 100%; }
}

/* ── AVAILABILITY SETS (settings) ──
   Named sets of hours (Clayton, 2026-10-16: "calendly handles this by allowing a coach to create different availability
   templates"). modules/availability-sets.js draws all of it: the Settings → Availability tab (#settings-tab-availability),
   the window that makes, copies and edits one set (#av-hours-overlay, shared with the Booked page editor), and the
   Online Booking card's Hours part (modules/scheduling-settings.js). The softer scale every new surface uses: 16px
   window, 12px rows and panels, 10px buttons and boxes at 38px, thin lines between rows kept. Neutral, sapphire only on
   the one main button and focus. Status is always a word; there is no coloured edge on anything. The window carries its
   own classes (av-*), not Change billing's, because that kit loads lazily and belongs to its own stylesheet. */
.av-sets-body { margin-top: 14px; }
.av-list { margin: 0 -12px; padding: 0; list-style: none; }
.av-row {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px;
  padding: 16px 12px; border-radius: 12px;
}
.av-row + .av-row::before { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--border); }
.av-row:hover { background: var(--surface-hover); }
.av-row:hover::before, .av-row:hover + .av-row::before { opacity: 0; }
.av-row-main { flex: 1; min-width: 0; }
.av-row-name { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.av-row-hours { margin-top: 6px; font-size: var(--fs-base); line-height: 1.5; color: var(--text); text-wrap: pretty; }
.av-row-limits { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-muted); }
.av-row-used { margin-top: 8px; font-size: var(--fs-sm); color: var(--text-muted); text-wrap: pretty; }
.av-row-acts { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.av-actions { margin-top: 14px; }
.av-load-error { color: var(--text); font-weight: 600; }

/* Buttons: 38px, 10px corners, a border and no fill; the one main button is the CRM's blue */
.av-btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 38px; min-width: 96px;
  padding: 0 16px; margin: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 18px; cursor: pointer; white-space: nowrap;
}
.av-btn:hover { background: var(--surface-hover); }
.av-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.av-btn:disabled, .av-btn:disabled:hover { opacity: .5; cursor: not-allowed; background: var(--surface); }
.av-btn.btn-primary { border-color: transparent; background: var(--primary); color: #fff; }
.av-btn.btn-primary:hover { background: var(--primary-hover); }
.av-btn.btn-primary:disabled, .av-btn.btn-primary:disabled:hover { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); opacity: 1; }
.av-row-acts .av-btn { min-width: 0; height: 34px; padding: 0 14px; }

/* The window */
.av-overlay { z-index: 2500; }
.av-dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
  color: var(--text); font-size: var(--fs-base);
}
[data-theme="light"] .av-dialog { box-shadow: 0 16px 48px rgba(15, 23, 42, .16); }
.av-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 16px; border-bottom: 1px solid var(--border); }
.av-title { margin: 0; font: 800 16px/1.25 'Saira', -apple-system, BlinkMacSystemFont, sans-serif; text-transform: uppercase; letter-spacing: .02em; color: var(--text); }
.av-x {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; margin: -4px -8px 0 0; border: 0; border-radius: 10px;
  background: none; color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.av-x:hover { background: var(--surface-hover); color: var(--text); }
.av-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.av-body { padding: 20px 24px 8px; overflow-y: auto; }
.av-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--border); }
.av-shared { margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: var(--fs-sm); line-height: 1.5; color: var(--text); }
.av-field + .av-field { margin-top: 20px; }
.av-label { display: block; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.av-input {
  box-sizing: border-box; height: 38px; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font: inherit; outline: none;
}
.av-input:focus { border-color: var(--primary); }
.av-input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.av-name { width: 100%; }
.av-num { width: 76px; margin: 0 6px; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.av-num::-webkit-inner-spin-button, .av-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.av-limits { display: grid; gap: 12px; margin-top: 22px; }
.av-limit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: var(--fs-base); color: var(--text); }
.av-err { margin: 16px 0 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; color: var(--danger); }
.av-err[hidden], .av-shared[hidden] { display: none; }

/* The days and times: the same editor Settings always had, on the softer scale inside the window */
.av-weekly { display: flex; flex-direction: column; margin: 0 -12px; }
.av-weekly .sched-day-row {
  position: relative; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 10px 12px; border: 0; border-radius: 12px; background: none;
}
.av-weekly .sched-day-row + .sched-day-row::before { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--border); }
.av-weekly .sched-day-row:hover { background: var(--surface-hover); }
.av-weekly .sched-day-row:hover::before, .av-weekly .sched-day-row:hover + .sched-day-row::before { opacity: 0; }
.av-weekly .sched-day-label { font-size: var(--fs-base); }
.av-weekly .sched-slot-row input[type="time"] {
  height: 34px; padding: 0 10px; border-radius: 10px; background: var(--surface-2); border-color: var(--border); font-size: var(--fs-sm);
}
.av-weekly .sched-slot-remove { width: 30px; height: 30px; padding: 0; border-radius: 10px; }
.av-weekly .sched-slot-add { height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.av-weekly .sched-slot-add:hover { background: var(--surface-hover); }
.av-weekly .sched-day-empty { font-style: normal; }

/* Online Booking card, Hours: the picker, what the picked hours say, and the two ways on */
.sched-hours { display: grid; gap: 12px; max-width: 560px; margin-top: 10px; }
.sched-hours .sched-hours-pick { margin-top: 0; }
.sched-hours .sched-hours-pick select { height: 38px; padding: 0 12px; border-radius: 10px; }
.sched-hours-read { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.sched-hours-read:empty { display: none; }
.sched-hours-days { margin: 0; font-size: var(--fs-base); line-height: 1.5; color: var(--text); text-wrap: pretty; }
.sched-hours-limits { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.sched-hours-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.sched-hours-edit {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 38px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 18px; cursor: pointer;
}
.sched-hours-edit:hover { background: var(--surface-hover); }
.sched-hours-edit:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sched-hours-edit:disabled, .sched-hours-edit:disabled:hover { opacity: .5; cursor: not-allowed; background: var(--surface); }
#s-sched-hours-error[hidden] { display: none; }

@media (max-width: 640px) {
  .av-row { flex-direction: column; align-items: stretch; }
  .av-row-acts { justify-content: flex-start; }
  .av-weekly .sched-day-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .av-head, .av-body, .av-foot { padding-left: 18px; padding-right: 18px; }
}
/* ── end AVAILABILITY SETS (settings) ── */

/* ── BOOKED: HOURS PICKER ──
   The Availability section of the Booked™ page editor (modules/booked/sections.js hoursPicker): a select of the coach's
   sets of hours, what the chosen one says in words, and a note when other pages or client sessions share it. It reuses
   .bkd-select, .bkd-readout, .bkd-note and .bkd-pill; only the sentences inside the read-out and the softer corners are
   new. Neutral surfaces, no coloured edge; the status is always a sentence. */
.bkd-hours-readout { border-radius: 12px; padding: 16px 18px; }
.bkd-hours-text { margin: 0; font-size: var(--fs-base); line-height: 1.55; color: var(--text); text-wrap: pretty; }
.bkd-hours-text + .bkd-hours-text { margin-top: 6px; }
.bkd-hours-limits { font-size: var(--fs-sm); color: var(--text-muted); }
.bkd-hours-shared { margin-top: 12px; border-radius: 12px; }
/* ── end BOOKED: HOURS PICKER ── */