/* AI-Motley patient UI — S96 Phase-A chrome.
   Ported from design_handoff_ai_motley_patient_ui/styles.css.
   Component rules are scoped under body.redesign-mode so they never bleed
   into landing / creator / teach / admin templates that are still on the
   pre-S96 visual system. */

:root {
  --bg-canvas: #FAF8F3;
  --bg-app: #FAFAF7;
  --bg-sidebar: #F4F1E9;
  --surface: #FFFFFF;
  --surface-muted: #F6F3EC;
  --surface-sunken: #F0EDE5;

  --border: #EBE6DA;
  --border-soft: #F2EEE3;
  --border-strong: #D8D2C2;

  --text: #1A1C1E;
  --text-2: #4A4843;
  --text-3: #7C786F;
  --text-4: #A8A498;

  --indigo: oklch(54% 0.13 264);
  --indigo-strong: oklch(46% 0.15 264);
  --indigo-soft: oklch(95% 0.024 264);
  --indigo-line: oklch(88% 0.05 264);

  --sage: oklch(58% 0.08 145);
  --sage-soft: oklch(95% 0.022 145);
  --sage-line: oklch(86% 0.05 145);

  --amber: oklch(70% 0.11 70);
  --amber-soft: oklch(95% 0.035 70);

  --rose: oklch(62% 0.13 25);
  --rose-soft: oklch(95% 0.03 25);

  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20,18,12,.04), 0 1px 1px rgba(20,18,12,.03);
  --shadow-md: 0 2px 8px rgba(20,18,12,.05), 0 1px 2px rgba(20,18,12,.04);
  --shadow-lg: 0 8px 32px rgba(20,18,12,.08), 0 2px 6px rgba(20,18,12,.04);

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── Body / shell overrides ────────────────────────────────────────────── */
body.redesign-mode {
  font-family: var(--font-sans);
  background: var(--bg-app);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
}

body.redesign-mode .app-layout { background: var(--bg-app); }

body.redesign-mode .chat-column { background: var(--bg-app); }

/* Today's .messages keeps its flex / overflow behavior; we just retint it. */
body.redesign-mode .messages { background: var(--bg-app); }

/* ── Sidebar (.sb) ─────────────────────────────────────────────────────── */
body.redesign-mode .sb {
  width: 260px;
  flex: 0 0 260px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px 10px 10px;
  gap: 6px;
  overflow: hidden;
  z-index: 20;
}

body.redesign-mode .sb__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px 14px;
}
body.redesign-mode .sb__brand-name {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--text);
}
body.redesign-mode .sb__brand-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-4);
  margin-top: 1px;
}

body.redesign-mode .sb__new {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .12s;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
body.redesign-mode .sb__new:hover { background: #fff; }

body.redesign-mode .sb__search {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--text-3);
  cursor: text;
  transition: border-color 0.12s ease;
}
body.redesign-mode .sb__search:focus-within {
  border-color: var(--accent-primary, #2563eb);
}
body.redesign-mode .sb__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--text-2);
  outline: none;
  padding: 0;
}
body.redesign-mode .sb__search-input::placeholder {
  color: var(--text-4);
}
/* Strip the WebKit clear button styling so it does not clash with the pill. */
body.redesign-mode .sb__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background-image: linear-gradient(45deg, transparent 44%, var(--text-4) 44% 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 44%, var(--text-4) 44% 56%, transparent 56%);
  cursor: pointer;
}

body.redesign-mode .sb__section {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 8px;
  overflow: hidden;
  min-height: 0;
  flex: 1 1 auto;
}
body.redesign-mode .sb__section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-4);
  padding: 6px 10px 4px;
}

body.redesign-mode .sb__history-scroll {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}

body.redesign-mode .sb__chat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
body.redesign-mode .sb__chat-row:hover { background: rgba(20,18,12,.04); }
body.redesign-mode .sb__chat-row--active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

body.redesign-mode .sb__nav {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

body.redesign-mode .sb__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
body.redesign-mode .sb__item:hover { background: rgba(20,18,12,.04); }
body.redesign-mode .sb__item--active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
body.redesign-mode .sb__item--active .sb__item-icon { color: var(--indigo); }
body.redesign-mode .sb__item-icon { color: var(--text-3); width: 16px; flex: 0 0 16px; display: flex; align-items: center; }

body.redesign-mode .sb__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  margin-top: 4px;
  transition: background .12s;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
body.redesign-mode .sb__user:hover { background: rgba(20,18,12,.04); }
body.redesign-mode .sb__user-meta { flex: 1; min-width: 0; }
body.redesign-mode .sb__user-name { font-size: 13.5px; font-weight: 500; color: var(--text); }
body.redesign-mode .sb__user-plan { font-size: 11.5px; color: var(--text-3); }
body.redesign-mode .sb__user-caret { color: var(--text-4); }

/* ── Avatar (scoped — does not collide with old .avatar) ─────────────── */
body.redesign-mode .sb .avatar,
body.redesign-mode .topbar .avatar,
body.redesign-mode .composer .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--indigo);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex: 0 0 28px;
  letter-spacing: 0;
  padding: 0;
}
body.redesign-mode .avatar--lg { width: 36px !important; height: 36px !important; flex-basis: 36px !important; font-size: 14px !important; }

/* ── Top bar ───────────────────────────────────────────────────────────── */
body.redesign-mode .topbar {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  gap: 14px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-app);
  flex-shrink: 0;
}

/* S97s — helping-pill CSS retired with the topbar switcher (s97j). */

body.redesign-mode .topbar__spacer { flex: 1; }

body.redesign-mode .icon-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  color: var(--text-3);
  cursor: pointer;
  transition: background .12s, color .12s;
  font-family: inherit;
}
body.redesign-mode .icon-btn:hover { background: rgba(20,18,12,.05); color: var(--text); }

/* Health Picture pill */
body.redesign-mode .hp-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color .12s;
  font-family: inherit;
}
body.redesign-mode .hp-pill:hover { border-color: var(--border-strong); }
body.redesign-mode .hp-pill__ring { width: 26px; height: 26px; flex: 0 0 26px; position: relative; display: flex; }
body.redesign-mode .hp-pill__pct { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
body.redesign-mode .hp-pill__label { font-size: 11.5px; color: var(--text-3); }

/* ── Shared authenticated phone shell (non-chat routes) ─────────────── */
/* Chat has an established mobile header in chat.html. The shared partial
   renders this shell only on Profile, Plan, Cabinet, Record, Settings, and
   Help, so their drawer behavior stays aligned without duplicating page JS. */
body.redesign-mode .patient-mobile-topbar,
body.redesign-mode .patient-nav-scrim { display: none; }

@media (max-width: 767px) {
  body.redesign-mode .patient-mobile-topbar {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: max(4px, env(safe-area-inset-top)) 10px 4px;
    background: var(--bg-app);
    border-bottom: 1px solid var(--border-soft);
    flex: 0 0 auto;
  }
  body.redesign-mode .patient-route-topbar { display: none; }
  body.redesign-mode .patient-mobile-topbar__menu,
  body.redesign-mode .patient-mobile-topbar__utility {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
  }
  body.redesign-mode .patient-mobile-topbar__utility { text-decoration: none; }
  body.redesign-mode .patient-mobile-topbar__menu:focus-visible,
  body.redesign-mode .patient-mobile-topbar__utility:focus-visible {
    outline: 2px solid var(--indigo);
    outline-offset: 2px;
  }
  body.redesign-mode .patient-mobile-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }
  body.redesign-mode .patient-mobile-topbar__mark {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--text);
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
  }
  body.redesign-mode .sb {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, 320px);
    height: 100dvh;
    flex: 0 0 auto;
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-lg);
    z-index: 100;
  }
  body.redesign-mode .sb.mobile-open { transform: translateX(0); }
  body.redesign-mode .patient-nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(20, 18, 12, .34);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  body.redesign-mode .patient-nav-scrim.is-visible { display: block; }
  body.redesign-mode.patient-nav-open { overflow: hidden; }
  /* Scheduling is still a Practice Better handoff for the first beta. */
  body.redesign-mode .sb__item--sessions { display: none; }
}

/* ── Composer (reuses canonical #messageInput / #sendBtn IDs) ─────────── */
body.redesign-mode .composer {
  padding: 12px 28px 18px;
  background: var(--bg-app);
}
body.redesign-mode .composer__inner { max-width: 720px; margin: 0 auto; }
body.redesign-mode .composer__box {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 8px 8px 8px 14px;
  box-shadow: var(--shadow-sm);
}
body.redesign-mode .composer__box #messageInput {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  /* S96s — was 8px (s96r); Isaac smoke-tested and the cursor still read as hugging the upload button. Bumped to 18px left to clearly separate the placeholder and cursor from the attach button. Right stays 0 (voice / send buttons own the right side). */
  padding: 8px 0 8px 18px;
  resize: none;
  outline: none;
  line-height: 1.45;
  min-height: 24px;
  max-height: 180px;
}
body.redesign-mode .composer__box #messageInput::placeholder { color: var(--text-4); }
body.redesign-mode .composer__btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--r-md);
  color: var(--text-3); cursor: pointer; padding: 0;
}
body.redesign-mode .composer__btn:hover { background: rgba(20,18,12,.05); color: var(--text); }
body.redesign-mode .composer__btn svg { display: block; }
body.redesign-mode .composer__send {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--indigo);
  color: #fff;
  border: none; border-radius: var(--r-md);
  cursor: pointer; padding: 0;
}
body.redesign-mode .composer__send:hover { background: var(--indigo-strong); }
body.redesign-mode .composer__send svg { display: block; }
body.redesign-mode .composer__foot {
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  color: var(--text-4);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Doc preview (existing markup re-used inside composer) */
body.redesign-mode .composer .doc-preview {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
body.redesign-mode .composer .doc-preview.active { display: flex; }
body.redesign-mode .composer .doc-preview-thumb { width: 32px; height: 32px; border-radius: var(--r-sm); object-fit: cover; }
body.redesign-mode .composer .doc-preview-info { flex: 1; font-size: 12.5px; color: var(--text-2); }
body.redesign-mode .composer .doc-preview-remove {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-3); font-size: 18px; line-height: 1; padding: 4px 6px;
}

/* ── Brand mark (28×28 viewBox monogram) ──────────────────────────────── */
body.redesign-mode .brand-mark { display: block; }

/* ── sb__nav role-tools label (Tools group eyebrow for admin entries) ── */
body.redesign-mode .sb__nav-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-4);
  padding: 10px 10px 4px;
}

/* ── History-item overrides ─────────────────────────────────────────────
   loadHistory() emits .history-item / .history-loading / .history-empty
   into #historyList. The pre-S96 inline <style> rules tint these grey.
   Override under .redesign-mode to match the warm-beige sidebar theme.
   Structural rules (padding, line-clamp) inherit from the original. */
body.redesign-mode #historyList .history-item {
  border-bottom: 1px solid var(--border-soft);
  padding: 9px 10px;
  border-radius: var(--r-sm);
  margin: 0 0 2px;
  transition: background .12s;
}
body.redesign-mode #historyList .history-item:hover { background: rgba(20,18,12,.04); }
body.redesign-mode #historyList .history-item-summary { color: var(--text-2); font-size: 13.5px; }
body.redesign-mode #historyList .history-item-meta { color: var(--text-4); font-family: var(--font-mono); font-size: 10.5px; }
body.redesign-mode #historyList .history-item-mode { background: var(--surface-muted); color: var(--text-3); }
body.redesign-mode #historyList .history-item-is-draft { border-left-color: var(--amber); }
body.redesign-mode #historyList .history-item-draft { background: var(--amber-soft); color: oklch(42% 0.08 70); }
body.redesign-mode #historyList .history-loading,
body.redesign-mode #historyList .history-empty { color: var(--text-3); font-size: 12.5px; padding: 14px 10px; }

/* S97a — bucket/row history styling for non-chat patient routes.
   The same rules live inline in chat.html (lines 2354-2411). The shared loader
   in static/js/chat_history_sidebar.js renders this markup on every patient
   route, so the styling has to be reachable from /plan, /cabinet, /sessions,
   /profile, /settings too. Values mirror chat.html so /chat is unchanged. */
body.redesign-mode #historyList .history-bucket { margin-top: 6px; }
body.redesign-mode #historyList .history-bucket:first-child { margin-top: 0; }
body.redesign-mode #historyList .history-bucket-label {
  font-size: 10px;
  color: #64748b;
  padding: 4px 10px 2px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
body.redesign-mode #historyList .history-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  margin: 1px 2px;
  border-radius: 6px;
  cursor: pointer;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.25;
  transition: background 0.12s ease;
  user-select: none;
}
body.redesign-mode #historyList .history-row:hover { background: rgba(59, 130, 246, 0.10); }
body.redesign-mode #historyList .history-row.active {
  background: rgba(59, 130, 246, 0.18);
  color: #1d4ed8;
  font-weight: 500;
}
body.redesign-mode #historyList .history-row.active:hover { background: rgba(59, 130, 246, 0.18); }
body.redesign-mode #historyList .history-row-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
body.redesign-mode #historyList .history-row-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  background: #f59e0b;
  color: #1a1a1a;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
/* S97p — Search-match snippet under the row title. Row becomes wrap-friendly
   when --with-snippet so the snippet takes its own line. */
body.redesign-mode #historyList .history-row--with-snippet {
  flex-wrap: wrap;
  padding-bottom: 8px;
}
body.redesign-mode #historyList .history-row__snippet {
  flex-basis: 100%;
  font-size: 11.5px;
  color: #64748b;
  font-weight: 400;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
body.redesign-mode #historyList .history-row.active .history-row__snippet { color: #4b5563; }
body.redesign-mode #historyList .history-error {
  padding: 10px;
  color: #ef4444;
  font-size: 12px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   S96b — Screen 2 inner content
   ─ Message bubbles (Slice A) + My Plan right drawer (Slice B).
   Scoped under body.redesign-mode so the pre-S96 chat styling in
   chat.html lines 103-155 (alternating grey/white full-bleed rows) is
   overridden without modifying the inline <style>.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Messages container — keep flex-column scrolling but retint canvas */
body.redesign-mode #messages { padding: 16px 0 24px; }

/* ── .message row override ─────────────────────────────────────────────
   Pre-S96 rule (line 103): padding 24px 0; border-bottom 1px solid #f0f0f0.
   Override to flex row layout (max-width 720 centered) with no separator.
   user → row-reverse so avatar disc renders on the right.
   assistant → row so MotleyMark renders on the left. */
body.redesign-mode .message {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 24px;
  background: transparent !important;
  border: none !important;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
body.redesign-mode .message.user { flex-direction: row-reverse; }
body.redesign-mode .message.assistant { flex-direction: row; }

/* S96s — bubble + affordances stack vertically inside a content column.
   Without this wrapper, the bubble plus Shop / Email / Dig Deeper plus meta
   timestamp would all become flex-row siblings inside .message (which is
   itself a flex-row), spreading the assistant reply across multiple
   visible columns. .message-content reclaims the post-avatar space as a
   single vertical stack. */
body.redesign-mode .message-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
body.redesign-mode .message.user .message-content { align-items: flex-end; }

/* Avatar pseudo-elements ───────────────────────────────────────────────
   User: 28px indigo disc with user's first initial (set on <body> via
   --user-initial CSS variable in chat.html).
   Assistant: 28px MotleyMark SVG (matches .sb__brand mark — dark square
   with white "m"). Inline data-URI so no extra HTTP request. */
body.redesign-mode .message::before {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}
body.redesign-mode .message.user::before {
  content: var(--user-initial, "?");
  background: var(--indigo);
  color: #fff;
  border-radius: 50%;
}
body.redesign-mode .message.assistant::before {
  content: "";
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><rect x='0.5' y='0.5' width='27' height='27' rx='7.5' fill='%231A1C1E'/><text x='14' y='20.5' text-anchor='middle' font-family='Geist, system-ui, sans-serif' font-weight='700' font-size='18' letter-spacing='-0.5' fill='%23FFFFFF'>m</text></svg>");
  background-size: 28px 28px;
  background-repeat: no-repeat;
  border-radius: 0;
}

/* ── .message-bubble override ─────────────────────────────────────────
   Pre-S96 rule (line 123): full-width text container.
   user → real bubble (surface-muted bg, soft border, padding, radius).
   assistant → no bubble (transparent, no border, no padding) — content
   flows as paragraphs per design. Both keep canonical text styling. */
body.redesign-mode .message-bubble {
  max-width: 75%;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  padding: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  width: auto;
}
body.redesign-mode .message.user .message-bubble {
  background: var(--surface-muted);
  border: 1px solid var(--border-soft);
  padding: 11px 14px;
  border-radius: var(--r-lg);
  color: var(--text);
}
body.redesign-mode .message.assistant .message-bubble {
  background: transparent;
  border: none;
  padding: 0;
  max-width: calc(100% - 40px);
}

/* ── Reasoning chip (static placeholder above AI replies) ─────────────
   Per design: pill on --surface-muted bg, 11px Geist Mono, leading 5px
   indigo dot with 3px --indigo-soft ring halo. Copy is placeholder until
   the streaming backend emits a per-message reasoning string in a later
   session. The dot + halo are layered radial-gradients on the bg. */
body.redesign-mode .message.assistant .message-bubble::before {
  content: "considering your profile and current plan";
  display: table;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--text-4);
  padding: 4px 12px 4px 22px;
  border-radius: var(--r-pill);
  margin-bottom: 10px;
  background:
    radial-gradient(circle 2.5px at 11px 50%, var(--indigo) 100%, transparent 0),
    radial-gradient(circle 5px at 11px 50%, var(--indigo-soft) 100%, transparent 0),
    var(--surface-muted);
}

/* ── Bullet list — real <ul class="bullet-list"> emitted by formatMessage
   in chat.html (S96d). Each <li> wears a sage check marker via ::before
   using the same rotated-rectangle technique as .plan-info-card__list and
   .intake-form lists so the visual is consistent across the patient UI. */
body.redesign-mode .message-bubble .bullet-list {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
body.redesign-mode .message-bubble .bullet-list li {
  padding-left: 22px;
  position: relative;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}
body.redesign-mode .message-bubble .bullet-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 8px;
  height: 4px;
  border-left: 1.5px solid var(--sage);
  border-bottom: 1.5px solid var(--sage);
  transform: rotate(-45deg);
}

/* ── .msg-actions — feedback button row under AI messages ─────────────
   Pre-S96 rule (line 1911): centered with padding 0 24px.
   Override to align with the new max-width 720 layout — strip the
   self-centering margins, indent to match the bubble baseline. */
body.redesign-mode .msg-actions {
  max-width: none;
  margin: 6px 0 0 0;
  padding: 0;
  gap: 4px;
}
body.redesign-mode .msg-actions .feedback-btn {
  font-size: 11.5px;
  color: var(--text-4);
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  transition: background .12s, color .12s;
}
body.redesign-mode .msg-actions .feedback-btn:hover {
  background: rgba(20,18,12,.05);
  color: var(--text-2);
}

/* ── Message meta (timestamp) — keep but quiet under redesign-mode */
body.redesign-mode .message-meta {
  margin-top: 4px;
  padding: 0;
  max-width: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-4);
}
body.redesign-mode .message.user .message-meta { text-align: right; padding-right: 0; }
body.redesign-mode .message.assistant .message-meta { text-align: left; }

/* ── Followup callout (under each AI reply, click pre-fills composer)
   Static copy in S96b; per-reply dynamic suggestions are a backend
   follow-up. The callout is appended by addMessage() in chat.html. */
body.redesign-mode .followup-callout {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--indigo-soft);
  border: 1px solid var(--indigo-line);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  max-width: 75%;
}
body.redesign-mode .followup-callout:hover {
  border-color: var(--indigo);
}
body.redesign-mode .followup-callout__icon {
  flex: 0 0 14px;
  width: 14px; height: 14px;
  color: var(--indigo);
  display: flex;
  align-items: center;
}

/* ── Email + Dig Deeper buttons sometimes emitted for action-plan replies.
   Keep but quiet so they read as secondary actions in the new aesthetic. */
body.redesign-mode .email-plan-btn,
body.redesign-mode .dig-deep-btn {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  margin: 6px 4px 0 0;
}

/* ════════════════════════════════════════════════════════════════════
   Slice B — My Plan right drawer
   ──────────────────────────────────────────────────────────────────── */

/* ── Hide pre-S96 .plans-overlay / .plans-sidebar under redesign-mode.
   The old overlay had family-roster controls (Add member, etc.) that are
   inert in S96b (single user only per phasing). Suppress in CSS; the
   drawer below replaces it as the My Plan surface. */
body.redesign-mode .plans-overlay,
body.redesign-mode .plans-sidebar { display: none !important; }

/* Drawer container — flex sibling of .chat-column in .app-layout.
   Width 360px when open; collapses to 0 (display: none) when closed
   so .chat-column reclaims the full width. */
body.redesign-mode .drawer {
  flex: 0 0 360px;
  width: 360px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: none;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
body.redesign-mode .drawer.is-open { display: flex; }

body.redesign-mode .drawer__header {
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid var(--border-soft);
}
body.redesign-mode .drawer__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}

body.redesign-mode .drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.redesign-mode .drawer__loading,
body.redesign-mode .drawer__empty {
  color: var(--text-3);
  font-size: 13px;
  padding: 16px 0;
  text-align: center;
}

/* Member-select row at top of body */
body.redesign-mode .drawer__member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
}
body.redesign-mode .drawer__member .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--indigo);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex: 0 0 28px;
}
body.redesign-mode .drawer__member-select {
  flex: 1;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: transparent;
  border: none;
  cursor: default;
  padding: 4px 0;
}

/* Eyebrow row (uppercase mono label + right-aligned meta) */
body.redesign-mode .drawer__eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
body.redesign-mode .drawer__eyebrow-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-4);
}
body.redesign-mode .drawer__eyebrow-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

/* Protocol card — current plan summary */
body.redesign-mode .protocol-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}
body.redesign-mode .protocol-card--past {
  background: var(--surface-muted);
  box-shadow: none;
}
body.redesign-mode .protocol-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body.redesign-mode .protocol-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
body.redesign-mode .protocol-card__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
body.redesign-mode .protocol-card__desc {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
}

/* Status badge — Active (sage) / Completed (neutral) */
body.redesign-mode .badge {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
body.redesign-mode .badge--active {
  background: var(--sage-soft);
  color: oklch(42% 0.07 145);
  border: 1px solid var(--sage-line);
}
body.redesign-mode .badge--completed {
  background: var(--surface-muted);
  color: var(--text-3);
  border: 1px solid var(--border);
}

/* Progress bar */
body.redesign-mode .progress-track {
  height: 5px;
  background: var(--surface-muted);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: 4px;
}
body.redesign-mode .progress-fill {
  height: 100%;
  background: var(--sage);
  border-radius: var(--r-pill);
  transition: width .3s ease;
}

/* Plan step group — clickable header + collapsible item list */
body.redesign-mode .plan-step-group {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
body.redesign-mode .plan-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}
body.redesign-mode .plan-step:hover { background: var(--surface-muted); }
body.redesign-mode .plan-step__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}
body.redesign-mode .plan-step__dot--start { background: var(--sage); }
body.redesign-mode .plan-step__dot--continue { background: var(--indigo); }
body.redesign-mode .plan-step__dot--watch { background: var(--amber); }
body.redesign-mode .plan-step__label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
body.redesign-mode .plan-step__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
body.redesign-mode .plan-step__caret {
  color: var(--text-4);
  transition: transform .15s ease;
}
body.redesign-mode .plan-step-group.is-expanded .plan-step__caret {
  transform: rotate(180deg);
}

/* Collapsed by default; expanded by .is-expanded on the group */
body.redesign-mode .plan-step__items {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s ease;
}
body.redesign-mode .plan-step-group.is-expanded .plan-step__items {
  max-height: 600px;
  border-top: 1px solid var(--border-soft);
}
body.redesign-mode .plan-step__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px 8px 30px;
  font-size: 12.5px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border-soft);
}
body.redesign-mode .plan-step__item:last-child { border-bottom: none; }
body.redesign-mode .plan-step__item-name {
  flex: 1;
  color: var(--text);
}
body.redesign-mode .plan-step__item-dose {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

/* S96c — "View full plan" link inside the drawer body */
body.redesign-mode .drawer__full-link {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--indigo);
  text-align: center;
  margin-top: 4px;
  text-decoration: none;
  transition: background .12s, border-color .12s;
}
body.redesign-mode .drawer__full-link:hover {
  background: var(--indigo-soft);
  border-color: var(--indigo-line);
}

/* ── Narrow-viewport handling ─────────────────────────────────────────
   Flex sibling layout handles the desktop narrowing automatically — when
   the drawer takes 360px, .chat-column reclaims the rest and composer__inner
   (max-width 720) caps naturally. Below 768px, switch the drawer to a
   fixed-position overlay so the chat surface stays usable on phones. */
@media (max-width: 768px) {
  body.redesign-mode .drawer.is-open {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 510;
    box-shadow: var(--shadow-lg);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   S96c — Screen 3: My Plan detail page (/plan)
   ─ Scaffold inside .chat-column for the full plan view. Breadcrumb,
   title row, tabs, info cards, contents grid, phase sections, products,
   past. All scoped under body.redesign-mode.
   ═══════════════════════════════════════════════════════════════════════ */

body.redesign-mode .plan-page {
  flex: 1;
  overflow-y: auto;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 26px 32px 60px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────── */
body.redesign-mode .plan-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-3);
}
body.redesign-mode .plan-breadcrumb__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-3);
  cursor: pointer;
  transition: color .12s;
}
body.redesign-mode .plan-breadcrumb__back:hover { color: var(--text); }
body.redesign-mode .plan-breadcrumb__sep { color: var(--text-4); opacity: .5; }
body.redesign-mode .plan-breadcrumb__current { color: var(--text-2); }

/* ── Title row ──────────────────────────────────────────────────────── */
body.redesign-mode .plan-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: -4px;
}
body.redesign-mode .plan-title-row__main { flex: 1; min-width: 0; }
body.redesign-mode .plan-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
body.redesign-mode .plan-title__meta {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
}
body.redesign-mode .plan-ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
body.redesign-mode .plan-ask-btn:hover { background: #fff; border-color: var(--text-3); }

/* ── Tabs (anchor-scroll) ───────────────────────────────────────────── */
body.redesign-mode .plan-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-soft);
  margin-top: 6px;
}
body.redesign-mode .plan-tab {
  padding: 8px 14px;
  font-size: 13.5px;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
  cursor: pointer;
}
body.redesign-mode .plan-tab:hover { color: var(--text); }
body.redesign-mode .plan-tab--active {
  color: var(--text);
  border-bottom-color: var(--indigo);
  font-weight: 500;
}

/* ── Three info cards (Why this plan / Progress / Goals) ────────────── */
body.redesign-mode .plan-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}
body.redesign-mode .plan-info-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}
body.redesign-mode .plan-info-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-4);
}
body.redesign-mode .plan-info-card__body {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
}
body.redesign-mode .plan-info-card__big {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
body.redesign-mode .plan-info-card__sub {
  font-size: 11.5px;
  color: var(--text-3);
}
body.redesign-mode .plan-info-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
body.redesign-mode .plan-info-card__list li {
  font-size: 12.5px;
  color: var(--text-2);
  padding-left: 18px;
  position: relative;
}
body.redesign-mode .plan-info-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px; height: 4px;
  border-left: 1.5px solid var(--sage);
  border-bottom: 1.5px solid var(--sage);
  transform: rotate(-45deg);
}
body.redesign-mode .plan-info-card__link {
  font-size: 12px;
  color: var(--indigo);
  margin-top: 4px;
  display: inline-block;
  transition: color .12s;
}
body.redesign-mode .plan-info-card__link:hover { color: var(--indigo-strong); }

/* ── "What is in this plan" mini-card grid ──────────────────────────── */
body.redesign-mode .plan-contents,
body.redesign-mode .plan-phase-section,
body.redesign-mode .plan-products,
body.redesign-mode .plan-past {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.redesign-mode .plan-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.redesign-mode .plan-section-title__count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 400;
  margin-left: 2px;
}
body.redesign-mode .plan-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
}
body.redesign-mode .plan-mini-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-sm);
}
body.redesign-mode .plan-mini-card__icon {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
body.redesign-mode .plan-mini-card__icon--indigo { background: var(--indigo-soft); color: var(--indigo); }
body.redesign-mode .plan-mini-card__icon--sage   { background: var(--sage-soft);   color: oklch(40% 0.08 145); }
body.redesign-mode .plan-mini-card__icon--amber  { background: var(--amber-soft);  color: oklch(42% 0.10 70); }
body.redesign-mode .plan-mini-card__icon--rose   { background: var(--rose-soft);   color: oklch(45% 0.11 25); }
body.redesign-mode .plan-mini-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
body.redesign-mode .plan-mini-card__desc {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.45;
}

/* ── Phase sections (Start here / Continue / Watch) ─────────────────── */
body.redesign-mode .plan-item-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
body.redesign-mode .plan-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}
body.redesign-mode .plan-item:last-child { border-bottom: none; }
body.redesign-mode .plan-item__main { flex: 1; min-width: 0; }
body.redesign-mode .plan-item__name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}
body.redesign-mode .plan-item__purpose {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
body.redesign-mode .plan-item__detail {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
}
body.redesign-mode .plan-item__dose,
body.redesign-mode .plan-item__timing {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
}
body.redesign-mode .plan-empty {
  padding: 14px;
  background: var(--surface-muted);
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--text-3);
  text-align: center;
}

/* ── Recommended for you product cards ──────────────────────────────── */
body.redesign-mode .plan-products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
body.redesign-mode .plan-product-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
body.redesign-mode .plan-product-card__thumb {
  width: 48px; height: 48px;
  background: var(--surface-muted);
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
body.redesign-mode .plan-product-card__body { flex: 1; min-width: 0; }
body.redesign-mode .plan-product-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
body.redesign-mode .plan-product-card__desc {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.4;
}

/* ── Past protocols (S96m — real cards from older plan records) ─────── */
body.redesign-mode .plan-past__empty {
  padding: 22px;
  background: var(--surface-muted);
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--text-3);
  text-align: center;
}
body.redesign-mode .plan-past__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
body.redesign-mode .plan-past-card {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .12s, background .12s;
}
body.redesign-mode .plan-past-card:hover { border-color: var(--border-strong); background: #fff; }
body.redesign-mode .plan-past-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
body.redesign-mode .plan-past-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
body.redesign-mode .plan-past-card__count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
}
body.redesign-mode .plan-past-card__desc {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
}
body.redesign-mode .plan-past-card__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

/* ── Placeholder stub marker (subtle "coming soon" tag) ─────────────── */
body.redesign-mode .placeholder-stub { position: relative; }
body.redesign-mode .placeholder-stub__marker {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-4);
  background: var(--surface-muted);
  padding: 2px 6px;
  border-radius: var(--r-pill);
  font-weight: 500;
}
body.redesign-mode .plan-section-title .placeholder-stub__marker {
  position: static;
  margin-left: 4px;
}

/* ── Mobile: collapse grids to single column ────────────────────────── */
@media (max-width: 820px) {
  body.redesign-mode .plan-info-grid { grid-template-columns: 1fr; }
  body.redesign-mode .plan-mini-grid { grid-template-columns: 1fr 1fr; }
  body.redesign-mode .plan-products-grid { grid-template-columns: 1fr; }
  body.redesign-mode .plan-title-row { flex-direction: column; align-items: stretch; gap: 12px; }
  body.redesign-mode .plan-ask-btn { justify-content: center; }
}
@media (max-width: 560px) {
  body.redesign-mode .plan-mini-grid { grid-template-columns: 1fr; }
  body.redesign-mode .plan-page { padding: 18px 18px 40px; }
  body.redesign-mode .plan-tabs { overflow-x: auto; }
}

/* ════════════════════════════════════════════════════════════════════════
   S96d — Settings (Screen 7) and Profile (Screen 6) pages
   ════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar active state for the bottom Settings row ───────────────── */
body.redesign-mode .sb__user--active { background: var(--surface); box-shadow: var(--shadow-sm); }
body.redesign-mode .sb__user--active .sb__user-name { color: var(--text); }

/* ── Page shell (shared by settings + profile) ──────────────────────── */
body.redesign-mode .settings-page,
body.redesign-mode .profile-page {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px 40px;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}
body.redesign-mode .settings-header,
body.redesign-mode .profile-header { margin-bottom: 18px; }
body.redesign-mode .settings-title,
body.redesign-mode .profile-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ── 2-col layout: left nav + body ──────────────────────────────────── */
body.redesign-mode .settings-cols,
body.redesign-mode .profile-cols {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  min-height: 480px;
}
body.redesign-mode .settings-nav,
body.redesign-mode .profile-nav {
  background: var(--surface-muted);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.redesign-mode .settings-nav__item,
body.redesign-mode .profile-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-2);
  border-radius: var(--r-sm);
  cursor: pointer;
}
body.redesign-mode .settings-nav__item:hover,
body.redesign-mode .profile-nav__item:hover { background: rgba(20,18,12,.04); color: var(--text); }
body.redesign-mode .settings-nav__item--active,
body.redesign-mode .profile-nav__item--active {
  background: var(--surface);
  color: var(--text);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}
body.redesign-mode .settings-nav__item--stub,
body.redesign-mode .profile-nav__item--stub { color: var(--text-3); }
body.redesign-mode .settings-nav__item--stub .placeholder-stub__marker,
body.redesign-mode .profile-nav__item--stub .placeholder-stub__marker {
  position: static;
  background: transparent;
  padding: 0;
  font-size: 9px;
}
body.redesign-mode .settings-nav__item--logout {
  color: oklch(50% 0.18 25);
  margin-top: 8px;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  padding-top: 13px;
}
body.redesign-mode .settings-body,
body.redesign-mode .profile-body {
  padding: 22px 26px 28px;
  background: var(--surface);
  min-width: 0;
}
body.redesign-mode .settings-body[hidden] { display: none; }

/* ── S96q: Chat empty-state welcome screen (Screen 1 design) ─────────── */
body.redesign-mode .chat-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px 32px;
  text-align: center;
  min-height: 0;
}
body.redesign-mode .chat-welcome__mark {
  margin-bottom: 28px;
}
body.redesign-mode .chat-welcome__greeting {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 10px;
}
body.redesign-mode .chat-welcome__subtitle {
  font-size: 14.5px;
  color: var(--text-3);
  line-height: 1.55;
  max-width: 480px;
  margin: 0 0 44px;
}
body.redesign-mode .chat-welcome--first-run {
  max-width: 700px;
}
body.redesign-mode .chat-welcome__eyebrow {
  color: var(--indigo-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  margin: -8px 0 10px;
}
body.redesign-mode .chat-welcome--first-run .chat-welcome__subtitle {
  margin-bottom: 10px;
}
body.redesign-mode .chat-welcome__boundary,
body.redesign-mode .chat-welcome__optional {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  max-width: 560px;
}
body.redesign-mode .chat-welcome__boundary {
  color: var(--text-2);
}
body.redesign-mode .chat-welcome__optional {
  margin-top: 8px;
}
body.redesign-mode .chat-welcome__optional a {
  color: var(--indigo-strong);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.redesign-mode .chat-welcome__start {
  background: var(--indigo);
  border: 0;
  border-radius: 9px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  margin: 20px 0 0;
  padding: 10px 18px;
}
body.redesign-mode .chat-welcome__start:hover,
body.redesign-mode .chat-welcome__start:focus-visible {
  background: var(--indigo-strong);
}
body.redesign-mode .chat-welcome__prompt-label {
  color: var(--text-3);
  font-size: 12.5px;
  margin: 22px 0 9px;
}
body.redesign-mode .chat-welcome--first-run .chat-welcome__starters {
  max-width: 580px;
}
body.redesign-mode .chat-welcome__starters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 640px;
}
body.redesign-mode .chat-starter {
  position: relative;
  display: block;
  width: 100%;
  height: 92px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
body.redesign-mode .chat-starter:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
body.redesign-mode .chat-starter__text {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  max-width: 78%;
}
body.redesign-mode .chat-starter__icon {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.redesign-mode .chat-starter__icon--indigo { background: var(--indigo-soft); color: var(--indigo-strong); }
body.redesign-mode .chat-starter__icon--amber  { background: var(--amber-soft);  color: oklch(42% 0.10 70); }
body.redesign-mode .chat-starter__icon--sage   { background: var(--sage-soft);   color: oklch(40% 0.08 145); }
body.redesign-mode .chat-starter__icon--rose   { background: var(--rose-soft);   color: oklch(45% 0.11 25); }

@media (max-width: 560px) {
  body.redesign-mode .chat-welcome { padding: 32px 16px 24px; }
  body.redesign-mode .chat-welcome__greeting { font-size: 24px; }
  body.redesign-mode .chat-welcome__starters { grid-template-columns: 1fr; }
  body.redesign-mode .chat-starter { height: auto; min-height: 80px; }
}

/* S96p — placeholder panel content for nav stubs that switch in-page. */
body.redesign-mode .settings-coming-soon {
  padding: 22px 20px;
  background: var(--surface-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  margin-top: 8px;
}
body.redesign-mode .settings-coming-soon__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 6px;
}
body.redesign-mode .settings-coming-soon__body {
  font-size: 13.5px;
  color: var(--text-3);
  line-height: 1.55;
}

/* ── Settings body ──────────────────────────────────────────────────── */
body.redesign-mode .settings-h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
body.redesign-mode .settings-desc {
  font-size: 13.5px;
  color: var(--text-3);
  margin-top: 6px;
  line-height: 1.5;
  max-width: 520px;
}
body.redesign-mode .settings-form {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
}
body.redesign-mode .settings-choices {
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.redesign-mode .settings-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--surface);
  transition: border-color .15s ease, background .15s ease;
}
body.redesign-mode .settings-choice:hover { border-color: var(--text-3); }
body.redesign-mode .settings-choice.is-selected {
  border-color: var(--indigo);
  background: var(--indigo-soft);
}
body.redesign-mode .settings-choice input { position: absolute; opacity: 0; pointer-events: none; }
body.redesign-mode .settings-choice__radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  flex: 0 0 16px;
  margin-top: 2px;
  position: relative;
  background: var(--surface);
}
body.redesign-mode .settings-choice.is-selected .settings-choice__radio {
  border-color: var(--indigo);
}
body.redesign-mode .settings-choice.is-selected .settings-choice__radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--indigo);
}
body.redesign-mode .settings-choice__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
body.redesign-mode .settings-choice__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
body.redesign-mode .settings-choice__desc {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.45;
}
body.redesign-mode .settings-footnote {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 14px;
  max-width: 520px;
}
body.redesign-mode .settings-divider {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 22px 0 18px;
}
body.redesign-mode .settings-subhead {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 8px;
}
body.redesign-mode .settings-seg {
  display: inline-flex;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}
body.redesign-mode .settings-seg__opt {
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-3);
  border-radius: calc(var(--r-md) - 3px);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
body.redesign-mode .settings-seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
body.redesign-mode .settings-seg__opt:hover { color: var(--text); }
body.redesign-mode .settings-seg__opt.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
body.redesign-mode .settings-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
}
body.redesign-mode .settings-save-msg {
  font-size: 12px;
  color: var(--text-3);
  text-align: right;
  margin-top: 8px;
  min-height: 18px;
}
body.redesign-mode .settings-save-msg.is-error { color: oklch(50% 0.18 25); }
body.redesign-mode .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Profile body / Health Picture summary card ─────────────────────── */
body.redesign-mode .profile-overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
body.redesign-mode .profile-h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
body.redesign-mode .hp-summary {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 22px 24px;
  border: 1px solid var(--indigo-line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #FFF 0%, var(--indigo-soft) 100%);
  margin-bottom: 26px;
}
body.redesign-mode .hp-summary__ring {
  position: relative;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
}
body.redesign-mode .hp-summary__pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
}
body.redesign-mode .hp-summary__body { flex: 1; min-width: 0; }
body.redesign-mode .hp-summary__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.015em;
}
body.redesign-mode .hp-summary__desc {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 6px;
  line-height: 1.5;
  max-width: 480px;
}
body.redesign-mode .hp-summary__categories {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
}
body.redesign-mode .hp-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-2);
}
body.redesign-mode .hp-cat__check {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
body.redesign-mode .hp-cat--done .hp-cat__check {
  background: var(--sage-soft);
  border: 1.5px solid var(--sage);
}
body.redesign-mode .hp-cat--done .hp-cat__check::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 3px;
  border-left: 1.6px solid var(--sage);
  border-bottom: 1.6px solid var(--sage);
  transform: rotate(-45deg);
  top: 3px;
  left: 2.5px;
}
body.redesign-mode .hp-cat--partial .hp-cat__check {
  background: var(--amber);
  border: 1.5px solid var(--amber);
}
body.redesign-mode .hp-cat--empty .hp-cat__check {
  background: transparent;
  border: 1.5px solid var(--text-4);
}
body.redesign-mode .hp-cat--empty { color: var(--text-3); }

/* ── At-a-glance grid ──────────────────────────────────────────────── */
body.redesign-mode .profile-subhead {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin: 24px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.redesign-mode .profile-subhead .placeholder-stub__marker {
  position: static;
  margin-left: 4px;
}
body.redesign-mode .at-a-glance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
body.redesign-mode .at-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
body.redesign-mode .at-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}
body.redesign-mode .at-card__value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
body.redesign-mode .at-card__value--empty {
  font-style: italic;
  color: var(--text-3);
  font-weight: 400;
}
body.redesign-mode .at-card__link {
  font-size: 13px;
  color: var(--indigo);
  font-weight: 500;
}
body.redesign-mode .at-card__link:hover { color: var(--indigo-strong); }

/* S97q — Recent timeline. Real list of chronological entries (sessions,
   plans, lab reports). The placeholder-stub styling from s96d is retired. */
body.redesign-mode .profile-timeline {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.redesign-mode .profile-timeline__entry {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
}
body.redesign-mode .profile-timeline__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.redesign-mode .profile-timeline__entry--session .profile-timeline__icon {
  background: rgba(59, 130, 246, 0.10);
  color: var(--accent-primary, #2563eb);
}
body.redesign-mode .profile-timeline__entry--plan .profile-timeline__icon {
  background: rgba(34, 197, 94, 0.10);
  color: oklch(50% 0.13 145);
}
body.redesign-mode .profile-timeline__entry--lab_report .profile-timeline__icon {
  background: rgba(245, 158, 11, 0.10);
  color: oklch(50% 0.10 70);
}
body.redesign-mode .profile-timeline__body {
  flex: 1;
  min-width: 0;
}
body.redesign-mode .profile-timeline__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
  flex-wrap: wrap;
}
body.redesign-mode .profile-timeline__date {
  color: var(--text-3);
}
body.redesign-mode .profile-timeline__kind {
  padding: 1px 6px;
  background: var(--surface-muted);
  border-radius: 3px;
  font-size: 10px;
}
body.redesign-mode .profile-timeline__member {
  padding: 1px 6px;
  background: rgba(59, 130, 246, 0.08);
  color: var(--accent-primary-hover, #1d4ed8);
  border-radius: 3px;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
}
body.redesign-mode .profile-timeline__title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
}
body.redesign-mode .profile-timeline__desc {
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.45;
}
body.redesign-mode .profile-timeline__link {
  display: inline-block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--accent-primary, #2563eb);
  text-decoration: none;
}
body.redesign-mode .profile-timeline__link:hover { text-decoration: underline; }
body.redesign-mode .profile-timeline-empty {
  padding: 18px;
  border: 1px dashed var(--border-soft);
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--text-3);
  text-align: center;
}

/* ── Mobile: collapse the 2-col chrome and the at-a-glance grid ────── */
@media (max-width: 820px) {
  body.redesign-mode .settings-cols,
  body.redesign-mode .profile-cols {
    grid-template-columns: 1fr;
  }
  body.redesign-mode .settings-nav,
  body.redesign-mode .profile-nav {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 10px;
  }
  body.redesign-mode .settings-nav__item,
  body.redesign-mode .profile-nav__item { white-space: nowrap; }
  body.redesign-mode .settings-nav__item--logout {
    margin-top: 0;
    border-top: none;
    padding-top: 9px;
  }
  body.redesign-mode .hp-summary { flex-direction: column; gap: 14px; align-items: stretch; }
  body.redesign-mode .at-a-glance { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body.redesign-mode .settings-page,
  body.redesign-mode .profile-page { padding: 18px 18px 40px; }
  body.redesign-mode .hp-summary__categories { grid-template-columns: 1fr; }
}

/* ── S96f: Supplement Cabinet (Screen 4 Phase A) ──────────────────── */
body.redesign-mode .cabinet-page {
  flex: 1;
  overflow-y: auto;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 26px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.redesign-mode .cabinet-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
body.redesign-mode .cabinet-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text);
}
body.redesign-mode .cabinet-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  box-shadow: var(--shadow-sm);
}
body.redesign-mode .cabinet-cart:hover { background: #fff; border-color: var(--text-3); }
body.redesign-mode .cabinet-cart__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--indigo-soft);
  color: var(--indigo-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}

body.redesign-mode .cabinet-subtitle {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
  margin-top: -8px;
  max-width: 640px;
}

body.redesign-mode .cabinet-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-soft);
  margin-top: 4px;
  overflow-x: auto;
}
body.redesign-mode .cabinet-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13.5px;
  background: transparent;
  border: none;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
  cursor: pointer;
  white-space: nowrap;
}
body.redesign-mode .cabinet-tab:hover { color: var(--text); }
body.redesign-mode .cabinet-tab--active {
  color: var(--text);
  border-bottom-color: var(--indigo);
  font-weight: 500;
}
body.redesign-mode .cabinet-tab__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-4);
}

body.redesign-mode .cabinet-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.redesign-mode .cabinet-panel[hidden] { display: none; }

body.redesign-mode .cabinet-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.redesign-mode .cabinet-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}
body.redesign-mode .cabinet-section-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
}

body.redesign-mode .supp-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.redesign-mode .supp-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  transition: border-color .12s, background .12s;
}
body.redesign-mode .supp-row:hover { border-color: var(--border-strong); background: #fff; }
body.redesign-mode .supp-row__thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  background: var(--indigo-soft);
  color: var(--indigo-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.redesign-mode .supp-row__body { min-width: 0; }
body.redesign-mode .supp-row__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
body.redesign-mode .supp-row__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
body.redesign-mode .supp-row__desc {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.4;
}
body.redesign-mode .supp-row__price {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-3);
}
body.redesign-mode .supp-row__qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--surface);
}
body.redesign-mode .supp-row__qty-btn {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background .12s, color .12s;
}
body.redesign-mode .supp-row__qty-btn:hover { background: var(--surface-2, #ece7d8); color: var(--text); }
body.redesign-mode .supp-row__qty-val {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  min-width: 28px;
  text-align: center;
}
body.redesign-mode .supp-row__add {
  padding: 7px 12px;
  background: var(--text);
  color: #fff;
  border: 1px solid var(--text);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, opacity .12s;
}
body.redesign-mode .supp-row__add:hover { background: #000; }
body.redesign-mode .supp-row__add--in-cart {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  background: var(--surface);
  color: var(--text-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  cursor: default;
  pointer-events: none;
}

body.redesign-mode .cabinet-empty {
  padding: 18px 16px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--text-3);
  text-align: left;
}

/* S98a — cabinet status select, delete X, recommended-row buttons, cart dropdown */
body.redesign-mode .supp-row__status {
  display: inline-flex;
  align-items: center;
}
body.redesign-mode .supp-row__status-select {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 6px 22px 6px 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='none' stroke='%23667' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6L8 10.5 12.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 10px 10px;
  transition: border-color .12s, background-color .12s;
}
body.redesign-mode .supp-row__status-select:hover { border-color: var(--text-3); }
body.redesign-mode .supp-row__status-select:focus { outline: 2px solid var(--indigo); outline-offset: 1px; }

body.redesign-mode .supp-row__delete {
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3);
  font-size: 18px;
  line-height: 1;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
body.redesign-mode .supp-row__delete:hover {
  background: #fff;
  border-color: var(--border-strong);
  color: #a4382c;
}

body.redesign-mode .supp-row__rec-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.redesign-mode .supp-row__taking {
  padding: 7px 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
body.redesign-mode .supp-row__taking:hover { background: #fff; border-color: var(--text-3); }
body.redesign-mode .supp-row--rec { grid-template-columns: 56px 1fr auto; }

body.redesign-mode .cabinet-cart-wrap {
  position: relative;
  display: inline-block;
}
body.redesign-mode .cabinet-cart-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 280px;
  max-width: 360px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(28, 30, 34, 0.18);
  z-index: 40;
  overflow: hidden;
}
body.redesign-mode .cabinet-cart-dropdown[hidden] { display: none; }
body.redesign-mode .cabinet-cart-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}
body.redesign-mode .cabinet-cart-dropdown__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
}
body.redesign-mode .cabinet-cart-dropdown__list {
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
}
body.redesign-mode .cabinet-cart-dropdown__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-soft);
}
body.redesign-mode .cabinet-cart-dropdown__row:last-child { border-bottom: none; }
body.redesign-mode .cabinet-cart-dropdown__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  grid-column: 1;
  grid-row: 1;
}
body.redesign-mode .cabinet-cart-dropdown__dose {
  font-size: 11.5px;
  color: var(--text-3);
  grid-column: 1;
  grid-row: 2;
}
body.redesign-mode .cabinet-cart-dropdown__qty {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}
body.redesign-mode .cabinet-cart-dropdown__remove {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 16px;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  transition: background .12s, color .12s;
}
body.redesign-mode .cabinet-cart-dropdown__remove:hover {
  background: var(--surface);
  color: #a4382c;
}
body.redesign-mode .cabinet-cart-dropdown__empty {
  padding: 16px 14px;
  font-size: 12.5px;
  color: var(--text-3);
  text-align: left;
}
body.redesign-mode .cabinet-cart-dropdown__footer {
  padding: 9px 14px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
}
body.redesign-mode .cabinet-cart-dropdown__note {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
}

body.redesign-mode .cabinet-callout {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--indigo-soft);
  border: 1px solid var(--indigo-line);
  border-radius: var(--r-md);
  margin-top: 8px;
}
body.redesign-mode .cabinet-callout__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--indigo-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.redesign-mode .cabinet-callout__body { flex: 1; min-width: 0; }
body.redesign-mode .cabinet-callout__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
body.redesign-mode .cabinet-callout__desc {
  font-size: 12.5px;
  color: var(--text-2);
  margin-top: 2px;
}
body.redesign-mode .cabinet-callout__btn {
  padding: 8px 14px;
  background: var(--text);
  color: #fff;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
}
body.redesign-mode .cabinet-callout__btn:hover { background: #000; }

@media (max-width: 820px) {
  body.redesign-mode .supp-row {
    grid-template-columns: 48px 1fr auto;
    grid-template-rows: auto auto;
    gap: 10px 12px;
  }
  body.redesign-mode .supp-row__thumb { width: 48px; height: 48px; grid-row: 1 / 3; }
  body.redesign-mode .supp-row__status { grid-row: 1; grid-column: 3; justify-self: end; }
  body.redesign-mode .supp-row__qty { grid-row: 2; grid-column: 2; justify-self: start; }
  body.redesign-mode .supp-row__add,
  body.redesign-mode .supp-row__delete { grid-row: 2; grid-column: 3; justify-self: end; }
  body.redesign-mode .supp-row--rec { grid-template-columns: 48px 1fr auto; }
  body.redesign-mode .supp-row__rec-actions { grid-row: 1 / 3; grid-column: 3; flex-direction: column; align-items: stretch; }
  body.redesign-mode .cabinet-title-row { flex-direction: column; align-items: stretch; gap: 12px; }
  body.redesign-mode .cabinet-callout { flex-direction: column; align-items: stretch; text-align: left; }
  body.redesign-mode .cabinet-callout__btn { align-self: flex-start; }
  body.redesign-mode .cabinet-cart-dropdown { left: 0; right: auto; min-width: 100%; }
}
@media (max-width: 560px) {
  body.redesign-mode .cabinet-page { padding: 18px 18px 40px; }
  body.redesign-mode .cabinet-tabs { overflow-x: auto; }
}

/* ── S98b: Help Center ──────────────────────────────────────────────── */
body.redesign-mode .help-page {
  flex: 1;
  overflow-y: auto;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 30px 32px 60px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
body.redesign-mode .help-page--guest {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
}

body.redesign-mode .help-title-row { display: flex; flex-direction: column; gap: 6px; }
body.redesign-mode .help-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
body.redesign-mode .help-subtitle {
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.55;
  max-width: 560px;
}
body.redesign-mode .help-inline-link {
  color: var(--indigo-strong);
  border-bottom: 1px solid var(--indigo-line);
  transition: color .12s, border-color .12s;
}
body.redesign-mode .help-inline-link:hover { color: var(--text); border-bottom-color: var(--text-3); }

body.redesign-mode .help-section-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 10px;
}

body.redesign-mode .help-faq { display: flex; flex-direction: column; gap: 8px; }
body.redesign-mode .help-faq__item {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .12s, background .12s;
}
body.redesign-mode .help-faq__item:hover { border-color: var(--border-strong); }
body.redesign-mode .help-faq__item[open] { background: #fff; border-color: var(--border-strong); }
body.redesign-mode .help-faq__q {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px 14px 16px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
}
body.redesign-mode .help-faq__q::-webkit-details-marker { display: none; }
body.redesign-mode .help-faq__q::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-3);
  width: 14px;
  text-align: center;
  transition: transform .15s, color .12s;
}
body.redesign-mode .help-faq__item[open] .help-faq__q::before {
  content: "−";
  color: var(--indigo-strong);
}
body.redesign-mode .help-faq__a {
  padding: 0 18px 16px 42px;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.redesign-mode .help-faq__a p { margin: 0; }
body.redesign-mode .help-faq__note {
  font-size: 12.5px;
  color: var(--text-3);
  font-style: italic;
  border-left: 2px solid var(--border-strong);
  padding-left: 10px;
}

body.redesign-mode .help-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
body.redesign-mode .help-contact--guest {
  background: var(--indigo-soft);
  border-color: var(--indigo-line);
}
body.redesign-mode .help-contact__lead {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 12px;
}

body.redesign-mode .help-form { display: flex; flex-direction: column; gap: 6px; }
body.redesign-mode .help-form__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 10px;
}
body.redesign-mode .help-form__optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-4);
  font-size: 11.5px;
}
body.redesign-mode .help-form__input,
body.redesign-mode .help-form__textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  transition: border-color .12s, box-shadow .12s;
  resize: vertical;
  width: 100%;
}
body.redesign-mode .help-form__textarea { min-height: 110px; line-height: 1.55; }
body.redesign-mode .help-form__input:focus,
body.redesign-mode .help-form__textarea:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(89, 80, 207, 0.15);
}
body.redesign-mode .help-form__meta {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
}
body.redesign-mode .help-form__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
body.redesign-mode .help-form__submit {
  padding: 9px 18px;
  background: var(--text);
  color: #fff;
  border: 1px solid var(--text);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, opacity .12s;
}
body.redesign-mode .help-form__submit:hover:not(:disabled) { background: #000; }
body.redesign-mode .help-form__submit:disabled { opacity: 0.55; cursor: default; }
body.redesign-mode .help-form__status {
  font-size: 12.5px;
  color: var(--text-3);
}
body.redesign-mode .help-form__status--ok { color: #2e7d4f; }
body.redesign-mode .help-form__status--err { color: #a4382c; }

@media (max-width: 820px) {
  body.redesign-mode .help-page { padding: 22px 20px 60px; }
  body.redesign-mode .help-faq__a { padding-left: 36px; }
  body.redesign-mode .help-form__actions { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* ── S96g: Sessions with Dr. Motley (Screen 5 Phase A) ─────────────── */
body.redesign-mode .sessions-page {
  flex: 1;
  overflow-y: auto;
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
  padding: 26px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.redesign-mode .sessions-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
body.redesign-mode .sessions-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text);
}

body.redesign-mode .sessions-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-soft);
  margin-top: 4px;
}
body.redesign-mode .sessions-tab {
  padding: 8px 14px;
  font-size: 13.5px;
  background: transparent;
  border: none;
  color: var(--text-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
  cursor: pointer;
  white-space: nowrap;
}
body.redesign-mode .sessions-tab:hover { color: var(--text); }
body.redesign-mode .sessions-tab--active {
  color: var(--text);
  border-bottom-color: var(--indigo);
  font-weight: 500;
}

body.redesign-mode .sessions-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.redesign-mode .sessions-panel[hidden] { display: none; }

body.redesign-mode .sessions-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

body.redesign-mode .session-card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.redesign-mode .session-card {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  transition: border-color .12s, background .12s;
}
body.redesign-mode .session-card:hover { border-color: var(--border-strong); background: #fff; }
body.redesign-mode .session-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.redesign-mode .session-card__icon--sage   { background: var(--sage-soft);   color: oklch(40% 0.08 145); }
body.redesign-mode .session-card__icon--indigo { background: var(--indigo-soft); color: var(--indigo-strong); }
body.redesign-mode .session-card__icon--amber  { background: var(--amber-soft);  color: oklch(42% 0.10 70); }
body.redesign-mode .session-card__body { min-width: 0; }
body.redesign-mode .session-card__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
body.redesign-mode .session-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
body.redesign-mode .session-card__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
body.redesign-mode .session-card__desc {
  font-size: 12.5px;
  color: var(--text-2);
  margin-top: 4px;
  line-height: 1.45;
}
body.redesign-mode .session-card__price {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
body.redesign-mode .session-card__select {
  padding: 7px 14px;
  background: var(--text);
  color: #fff;
  border: 1px solid var(--text);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  cursor: default;
  opacity: 0.55;
}

body.redesign-mode .sessions-divider {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 6px 0;
}

body.redesign-mode .sessions-last {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
body.redesign-mode .sessions-last__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--indigo-soft);
  color: var(--indigo-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.redesign-mode .sessions-last__body { flex: 1; min-width: 0; }
body.redesign-mode .sessions-last__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
body.redesign-mode .sessions-last__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
body.redesign-mode .sessions-last__desc {
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.45;
}
body.redesign-mode .sessions-last__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

body.redesign-mode .ghost-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
body.redesign-mode .ghost-btn:hover:not(:disabled) { background: var(--surface); border-color: var(--border-strong); }
body.redesign-mode .ghost-btn:disabled { opacity: 0.55; cursor: default; }

body.redesign-mode .sessions-callout {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
body.redesign-mode .sessions-callout__body { flex: 1; min-width: 0; }
body.redesign-mode .sessions-callout__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
body.redesign-mode .sessions-callout__desc {
  font-size: 12.5px;
  color: var(--text-2);
  margin-top: 2px;
}
body.redesign-mode .sessions-callout__btn {
  padding: 8px 14px;
  background: var(--text);
  color: #fff;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
}
body.redesign-mode .sessions-callout__btn:hover { background: #000; }

body.redesign-mode .sessions-empty {
  padding: 18px 16px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--text-3);
  text-align: left;
}

body.redesign-mode .sessions-footnote {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-4);
  text-align: center;
  margin-top: 10px;
}

@media (max-width: 820px) {
  body.redesign-mode .session-card {
    grid-template-columns: 40px 1fr auto;
    grid-template-rows: auto auto;
    gap: 10px 12px;
  }
  body.redesign-mode .session-card__icon { grid-row: 1 / 3; }
  body.redesign-mode .session-card__price { grid-row: 1; grid-column: 3; }
  body.redesign-mode .session-card__select { grid-row: 2; grid-column: 3; justify-self: end; }
  body.redesign-mode .sessions-callout { flex-direction: column; align-items: stretch; text-align: left; }
  body.redesign-mode .sessions-callout__btn { align-self: flex-start; }
}
@media (max-width: 560px) {
  body.redesign-mode .sessions-page { padding: 18px 18px 40px; }
}

/* ── S96h: Health goals editor on /profile ────────────────────────── */
body.redesign-mode .at-card--link {
  color: inherit;
  text-decoration: none;
  display: block;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
body.redesign-mode .at-card--link:hover { border-color: var(--border-strong); background: #fff; }

body.redesign-mode .profile-subhead__sub {
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: -8px;
  margin-bottom: 4px;
  line-height: 1.45;
}

body.redesign-mode .goals-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}

body.redesign-mode .goals-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.redesign-mode .goals-empty {
  font-size: 12.5px;
  color: var(--text-4);
  font-style: italic;
  padding: 4px 0;
}
body.redesign-mode .goals-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
}
body.redesign-mode .goals-item__text {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--text);
}
body.redesign-mode .goals-item__remove {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
body.redesign-mode .goals-item__remove:hover { background: var(--surface-sunken); color: var(--text); }

body.redesign-mode .goals-add-row {
  display: flex;
  gap: 8px;
}
body.redesign-mode .goals-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  transition: border-color .12s;
}
body.redesign-mode .goals-input:focus {
  outline: none;
  border-color: var(--indigo);
}
body.redesign-mode .goals-input:disabled {
  background: var(--surface-sunken);
  color: var(--text-3);
  cursor: default;
}
body.redesign-mode .goals-add-btn {
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
body.redesign-mode .goals-add-btn:hover:not(:disabled) { background: #fff; border-color: var(--text-3); }
body.redesign-mode .goals-add-btn:disabled { opacity: 0.55; cursor: default; }

body.redesign-mode .goals-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.redesign-mode .goals-save-btn {
  padding: 8px 16px;
  background: var(--text);
  color: #fff;
  border: 1px solid var(--text);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s;
}
body.redesign-mode .goals-save-btn:hover:not(:disabled) { background: #000; }
body.redesign-mode .goals-save-btn:disabled { opacity: 0.45; cursor: default; }
body.redesign-mode .goals-status {
  font-size: 12.5px;
  color: var(--text-3);
}

/* ── S96j: Symptoms editor (mirrors goals editor; same chip-list shape) ──── */
body.redesign-mode .symptoms-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
body.redesign-mode .symptoms-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.redesign-mode .symptoms-empty {
  font-size: 12.5px;
  color: var(--text-4);
  font-style: italic;
  padding: 4px 0;
}
body.redesign-mode .symptoms-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
}
body.redesign-mode .symptoms-item__text {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--text);
}
body.redesign-mode .symptoms-item__remove {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
body.redesign-mode .symptoms-item__remove:hover { background: var(--surface-sunken); color: var(--text); }
body.redesign-mode .symptoms-add-row {
  display: flex;
  gap: 8px;
}
body.redesign-mode .symptoms-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  transition: border-color .12s;
}
body.redesign-mode .symptoms-input:focus { outline: none; border-color: var(--indigo); }
body.redesign-mode .symptoms-input:disabled {
  background: var(--surface-sunken);
  color: var(--text-3);
  cursor: default;
}
body.redesign-mode .symptoms-add-btn {
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
body.redesign-mode .symptoms-add-btn:hover:not(:disabled) { background: #fff; border-color: var(--text-3); }
body.redesign-mode .symptoms-add-btn:disabled { opacity: 0.55; cursor: default; }
body.redesign-mode .symptoms-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.redesign-mode .symptoms-save-btn {
  padding: 8px 16px;
  background: var(--text);
  color: #fff;
  border: 1px solid var(--text);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s;
}
body.redesign-mode .symptoms-save-btn:hover:not(:disabled) { background: #000; }
body.redesign-mode .symptoms-save-btn:disabled { opacity: 0.45; cursor: default; }
body.redesign-mode .symptoms-status {
  font-size: 12.5px;
  color: var(--text-3);
}

/* S98d — Find duplicates modal */
body.redesign-mode .symptoms-merge-btn {
  padding: 7px 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
body.redesign-mode .symptoms-merge-btn:hover { background: #fff; border-color: var(--text-3); }

body.redesign-mode .symptoms-merge-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.redesign-mode .symptoms-merge-modal[hidden] { display: none; }
body.redesign-mode .symptoms-merge-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 26, 0.45);
}
body.redesign-mode .symptoms-merge-modal__panel {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px rgba(20, 22, 26, 0.32);
  overflow: hidden;
}
body.redesign-mode .symptoms-merge-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
}
body.redesign-mode .symptoms-merge-modal__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
body.redesign-mode .symptoms-merge-modal__close {
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text-3);
  transition: background .12s, color .12s, border-color .12s;
}
body.redesign-mode .symptoms-merge-modal__close:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
body.redesign-mode .symptoms-merge-modal__body {
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.redesign-mode .symptoms-merge-modal__lead {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}
body.redesign-mode .symptoms-merge-modal__loading,
body.redesign-mode .symptoms-merge-modal__empty {
  font-size: 13.5px;
  color: var(--text-3);
  text-align: center;
  padding: 24px 0;
}
body.redesign-mode .symptoms-merge-modal__footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: flex-end;
}
body.redesign-mode .symptoms-merge-modal__done {
  padding: 8px 16px;
  background: var(--text);
  color: #fff;
  border: 1px solid var(--text);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
body.redesign-mode .symptoms-merge-modal__done:hover { background: #000; }

body.redesign-mode .symptoms-merge-group {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.redesign-mode .symptoms-merge-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
body.redesign-mode .symptoms-merge-group__chip {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border-strong);
  font-size: 11.5px;
  color: var(--text);
}
body.redesign-mode .symptoms-merge-group__keep {
  font-size: 12.5px;
  color: var(--text-2);
}
body.redesign-mode .symptoms-merge-group__keep strong {
  color: var(--indigo-strong);
  font-weight: 600;
}
body.redesign-mode .symptoms-merge-group__actions {
  display: flex;
  gap: 6px;
}
body.redesign-mode .symptoms-merge-group__merge {
  padding: 6px 14px;
  background: var(--text);
  color: #fff;
  border: 1px solid var(--text);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
body.redesign-mode .symptoms-merge-group__merge:hover { background: #000; }
body.redesign-mode .symptoms-merge-group__skip {
  padding: 6px 14px;
  background: transparent;
  color: var(--text-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
body.redesign-mode .symptoms-merge-group__skip:hover { color: var(--text); border-color: var(--text-3); }
body.redesign-mode .symptoms-merge-group--merged,
body.redesign-mode .symptoms-merge-group--skipped { opacity: 0.6; }
body.redesign-mode .symptoms-merge-group__done {
  font-size: 12.5px;
  color: var(--text-2);
}
body.redesign-mode .symptoms-merge-group__done--skipped { color: var(--text-3); }

/* S98c — symptoms review mode (one-time legacy cleanup) */
body.redesign-mode .symptoms-review-btn {
  padding: 7px 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
body.redesign-mode .symptoms-review-btn:hover { background: #fff; border-color: var(--text-3); }
body.redesign-mode .symptoms-item--review {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
body.redesign-mode .symptoms-item--review .symptoms-item__text {
  font-weight: 500;
}
body.redesign-mode .symptoms-review__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.redesign-mode .symptoms-review__btn {
  padding: 5px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
body.redesign-mode .symptoms-review__btn:hover { border-color: var(--text-3); }
body.redesign-mode .symptoms-review__btn--mine {
  background: var(--indigo-soft);
  border-color: var(--indigo-line);
  color: var(--indigo-strong);
}
body.redesign-mode .symptoms-review__btn--mine:hover { background: #fff; }
body.redesign-mode .symptoms-review__btn--delete {
  color: #a4382c;
  border-color: #e6cfca;
}
body.redesign-mode .symptoms-review__btn--delete:hover { background: #fdf5f3; }
body.redesign-mode .symptoms-toast {
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
body.redesign-mode .symptoms-toast--ok {
  background: #ecf6ee;
  border-color: #cfe5d4;
  color: #2e7d4f;
}
body.redesign-mode .symptoms-toast--err {
  background: #fdf3f0;
  border-color: #e6cfca;
  color: #a4382c;
}

/* ── S96k: Family history editor (chip list + notes textarea, one Save) ───── */
body.redesign-mode .fh-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
body.redesign-mode .fh-field-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
  margin-bottom: -2px;
}
body.redesign-mode .fh-field-label--spaced { margin-top: 6px; }
body.redesign-mode .fh-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.redesign-mode .fh-empty {
  font-size: 12.5px;
  color: var(--text-4);
  font-style: italic;
  padding: 4px 0;
}
body.redesign-mode .fh-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
}
body.redesign-mode .fh-item__text {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--text);
}
body.redesign-mode .fh-item__remove {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
body.redesign-mode .fh-item__remove:hover { background: var(--surface-sunken); color: var(--text); }
body.redesign-mode .fh-add-row {
  display: flex;
  gap: 8px;
}
body.redesign-mode .fh-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  transition: border-color .12s;
}
body.redesign-mode .fh-input:focus { outline: none; border-color: var(--indigo); }
body.redesign-mode .fh-input:disabled {
  background: var(--surface-sunken);
  color: var(--text-3);
  cursor: default;
}
body.redesign-mode .fh-add-btn {
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
body.redesign-mode .fh-add-btn:hover:not(:disabled) { background: #fff; border-color: var(--text-3); }
body.redesign-mode .fh-add-btn:disabled { opacity: 0.55; cursor: default; }
body.redesign-mode .fh-textarea {
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
  resize: vertical;
  min-height: 70px;
  transition: border-color .12s;
}
body.redesign-mode .fh-textarea:focus { outline: none; border-color: var(--indigo); }
body.redesign-mode .fh-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
body.redesign-mode .fh-save-btn {
  padding: 8px 16px;
  background: var(--text);
  color: #fff;
  border: 1px solid var(--text);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s;
}
body.redesign-mode .fh-save-btn:hover:not(:disabled) { background: #000; }
body.redesign-mode .fh-save-btn:disabled { opacity: 0.45; cursor: default; }
body.redesign-mode .fh-status {
  font-size: 12.5px;
  color: var(--text-3);
}

/* ── S96l: Recent labs editor (structured per-row form) ─────────────────── */
body.redesign-mode .labs-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
body.redesign-mode .labs-header {
  display: grid;
  grid-template-columns: 1.4fr 1fr 130px 28px;
  gap: 10px;
  padding: 0 4px 4px;
  border-bottom: 1px solid var(--border-soft);
}
body.redesign-mode .labs-header__col {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
body.redesign-mode .labs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.redesign-mode .labs-empty {
  font-size: 12.5px;
  color: var(--text-4);
  font-style: italic;
  padding: 8px 4px;
}
body.redesign-mode .labs-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 130px 28px;
  gap: 10px;
  align-items: center;
}
body.redesign-mode .labs-row__input {
  padding: 7px 10px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  min-width: 0;
  transition: border-color .12s;
}
body.redesign-mode .labs-row__input:focus { outline: none; border-color: var(--indigo); }
body.redesign-mode .labs-row__input--date { font-family: var(--font-mono); font-size: 12.5px; }
body.redesign-mode .labs-row__remove {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
body.redesign-mode .labs-row__remove:hover { background: var(--surface-sunken); color: var(--text); }
body.redesign-mode .labs-add-row {
  display: flex;
  margin-top: 4px;
}
body.redesign-mode .labs-add-btn {
  padding: 8px 14px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
body.redesign-mode .labs-add-btn:hover:not(:disabled) { background: #fff; border-color: var(--text-3); color: var(--text); }
body.redesign-mode .labs-add-btn:disabled { opacity: 0.55; cursor: default; }
body.redesign-mode .labs-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
body.redesign-mode .labs-save-btn {
  padding: 8px 16px;
  background: var(--text);
  color: #fff;
  border: 1px solid var(--text);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s;
}
body.redesign-mode .labs-save-btn:hover:not(:disabled) { background: #000; }
body.redesign-mode .labs-save-btn:disabled { opacity: 0.45; cursor: default; }
body.redesign-mode .labs-status {
  font-size: 12.5px;
  color: var(--text-3);
}

/* ── S96o: Basic info editor (4 fields, one Save) ───────────────────────── */
body.redesign-mode .bi-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}
body.redesign-mode .bi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
body.redesign-mode .bi-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
body.redesign-mode .bi-field--full { grid-column: 1 / -1; }
body.redesign-mode .bi-field__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
}
body.redesign-mode .bi-input,
body.redesign-mode .bi-select,
body.redesign-mode .bi-textarea {
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  transition: border-color .12s;
}
body.redesign-mode .bi-textarea {
  line-height: 1.5;
  resize: vertical;
  min-height: 56px;
}
body.redesign-mode .bi-input:focus,
body.redesign-mode .bi-select:focus,
body.redesign-mode .bi-textarea:focus { outline: none; border-color: var(--indigo); }
body.redesign-mode .bi-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
body.redesign-mode .bi-save-btn {
  padding: 8px 16px;
  background: var(--text);
  color: #fff;
  border: 1px solid var(--text);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s;
}
body.redesign-mode .bi-save-btn:hover:not(:disabled) { background: #000; }
body.redesign-mode .bi-save-btn:disabled { opacity: 0.45; cursor: default; }
body.redesign-mode .bi-status {
  font-size: 12.5px;
  color: var(--text-3);
}
@media (max-width: 560px) {
  body.redesign-mode .bi-grid { grid-template-columns: 1fr; }
}

/* S96n — Lab reports placeholder (forward-pointing stub for next slice). */
body.redesign-mode .profile-subhead--small {
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 8px;
}
/* S97c — Lab reports drag-drop editor. Replaces the s96n placeholder. */
body.redesign-mode .lab-reports-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
body.redesign-mode .lab-reports-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px;
  background: var(--surface-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
body.redesign-mode .lab-reports-drop:hover,
body.redesign-mode .lab-reports-drop:focus-visible {
  outline: none;
  border-color: var(--accent-primary, #2563eb);
  color: var(--text-2);
}
body.redesign-mode .lab-reports-drop--active {
  background: rgba(59, 130, 246, 0.08);
  border-color: var(--accent-primary, #2563eb);
  color: var(--text-2);
}
body.redesign-mode .lab-reports-drop__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  letter-spacing: 0.01em;
}
body.redesign-mode .lab-reports-drop__primary { color: var(--text-2); font-weight: 500; }
body.redesign-mode .lab-reports-drop__hint { color: var(--text-4); font-size: 11.5px; }

body.redesign-mode .lab-reports-status {
  font-size: 12.5px;
  color: var(--text-3);
  min-height: 1em;
}
body.redesign-mode .lab-reports-status--error { color: #ef4444; }
body.redesign-mode .lab-reports-status--working { color: var(--accent-primary, #2563eb); }

body.redesign-mode .lab-reports-empty {
  font-size: 12.5px;
  color: var(--text-4);
  font-style: italic;
  margin: 0;
}
body.redesign-mode .lab-reports-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.redesign-mode .lab-report-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 12px;
}
body.redesign-mode .lab-report-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
body.redesign-mode .lab-report-card__meta {
  flex: 1;
  min-width: 0;
}
body.redesign-mode .lab-report-card__title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.redesign-mode .lab-report-card__dates {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-4);
}
body.redesign-mode .lab-report-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
body.redesign-mode .lab-report-card__toggle {
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.12s ease;
}
body.redesign-mode .lab-report-card__toggle:hover { background: var(--surface-muted); }
body.redesign-mode .lab-report-card__delete {
  font-size: 18px;
  line-height: 1;
  background: transparent;
  border: none;
  color: var(--text-4);
  cursor: pointer;
  padding: 0 6px;
  border-radius: var(--r-sm);
  transition: color 0.12s ease, background 0.12s ease;
}
body.redesign-mode .lab-report-card__delete:hover { color: #ef4444; background: rgba(239, 68, 68, 0.08); }
body.redesign-mode .lab-report-card__summary {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--surface-muted);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow-y: auto;
}
body.redesign-mode .lab-report-card--working {
  opacity: 0.7;
  border-style: dashed;
}

/* S97f — Family members editor on /profile. Granular CRUD over the
   /api/family-roster endpoints. Sibling to the labs / fh / lab-reports
   editors; matches their visual rhythm. */
body.redesign-mode .family-members-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
body.redesign-mode .family-members-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.redesign-mode .family-member-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
body.redesign-mode .family-member-card__main { flex: 1; min-width: 0; }
body.redesign-mode .family-member-card__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.redesign-mode .family-member-card__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-4);
}
body.redesign-mode .family-member-card__role {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.redesign-mode .family-member-card__delete {
  font-size: 18px;
  line-height: 1;
  background: transparent;
  border: none;
  color: var(--text-4);
  cursor: pointer;
  padding: 0 6px;
  border-radius: var(--r-sm);
  transition: color 0.12s ease, background 0.12s ease;
}
body.redesign-mode .family-member-card__delete:hover { color: #ef4444; background: rgba(239, 68, 68, 0.08); }

/* S97g — Nicknames inline next to the name, scope toggle in actions column,
   duplicate-DOB warning chip, merge button. */
body.redesign-mode .family-member-card__nicks {
  font-weight: 400;
  font-size: 12.5px;
  color: var(--text-4);
}
body.redesign-mode .family-member-card__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
body.redesign-mode .family-member-card__scope {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  cursor: pointer;
  user-select: none;
}
body.redesign-mode .family-member-card__scope input[type="checkbox"] {
  margin: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--accent-primary, #2563eb);
}
body.redesign-mode .family-member-card--dupe {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.04);
}
body.redesign-mode .family-member-card__dupe-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: oklch(42% 0.08 70);
  flex-wrap: wrap;
}
body.redesign-mode .family-member-card__dupe-tag {
  background: var(--amber-soft, rgba(245, 158, 11, 0.18));
  color: oklch(42% 0.08 70);
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
}
body.redesign-mode .family-member-card__merge-btn {
  font-size: 11.5px;
  background: #fff;
  color: var(--accent-primary, #2563eb);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
body.redesign-mode .family-member-card__merge-btn:hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: #93c5fd;
}

/* S97j — Inline edit on family-member cards. The s97h "Currently helping"
   banner above the profile body was retired; editing now lives on each
   card. The view/edit modes toggle the hidden attribute on sibling divs. */
body.redesign-mode .family-member-card__view {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
body.redesign-mode .family-member-card__notes {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* S98d / S98e — Curated symptom display on family-member cards.
   Active conditions (chronic) sit prominently with indigo chips.
   Currently (acute/episodic/unknown within 21d) uses neutral chips.
   Past activity is a collapsed details/summary with narrative lines. */
body.redesign-mode .family-member-card__symptoms {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.redesign-mode .family-member-card__symptoms--chronic + .family-member-card__symptoms--currently { margin-top: 4px; }
body.redesign-mode .family-member-card__symptoms-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
body.redesign-mode .family-member-card__symptom-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0;
}
body.redesign-mode .family-member-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  background: var(--indigo-soft);
  border: 1px solid var(--indigo-line);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--indigo-strong);
  font-weight: 500;
}
body.redesign-mode .family-member-card__chip-remove {
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--indigo-strong);
  font-size: 14px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: background .12s, color .12s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.redesign-mode .family-member-card__chip-remove:hover { background: #fff; color: #a4382c; }

/* S98e — distinguish chronic chips visually (slightly stronger fill) */
body.redesign-mode .family-member-card__chip--chronic {
  background: var(--indigo-strong, #4338CA);
  color: #fff;
  border-color: transparent;
}
body.redesign-mode .family-member-card__chip--chronic .family-member-card__chip-remove { color: rgba(255,255,255,0.85); }
body.redesign-mode .family-member-card__chip--chronic .family-member-card__chip-remove:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* S98e — past-activity rollup section (collapsed details/summary). */
body.redesign-mode .family-member-card__past {
  margin-top: 8px;
  background: transparent;
}
body.redesign-mode .family-member-card__past[open] {
  background: var(--surface);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-soft);
}
body.redesign-mode .family-member-card__past-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
body.redesign-mode .family-member-card__past-summary::-webkit-details-marker { display: none; }
body.redesign-mode .family-member-card__past-summary::before {
  content: "▸";
  font-size: 10px;
  transition: transform .12s;
}
body.redesign-mode .family-member-card__past[open] .family-member-card__past-summary::before {
  transform: rotate(90deg);
}
body.redesign-mode .family-member-card__past-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-4);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
body.redesign-mode .family-member-card__past-list {
  list-style: none;
  margin-top: 6px;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.redesign-mode .family-member-card__past-line {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
}

/* S98e — own-profile symptoms editor: fade-by-age + auto-archived divider. */
body.redesign-mode .symptoms-item--fresh { opacity: 1; }
body.redesign-mode .symptoms-item--aging { opacity: 0.75; }
body.redesign-mode .symptoms-item--stale { opacity: 0.55; }
body.redesign-mode .symptoms-item--kind-chronic { opacity: 1; }
body.redesign-mode .symptoms-divider {
  display: flex;
  align-items: center;
  margin: 10px 0 4px;
  padding: 0;
  background: transparent;
  border: none;
}
body.redesign-mode .symptoms-divider__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-4);
  padding: 0 8px;
  background: var(--bg, #FAF8F3);
  position: relative;
  z-index: 1;
}
body.redesign-mode .symptoms-divider::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
  margin-right: -8px;
}
body.redesign-mode .symptoms-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
  margin-left: -8px;
}
body.redesign-mode .family-member-card__edit-btn {
  font-size: 12px;
  background: #fff;
  color: var(--accent-primary, #2563eb);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
body.redesign-mode .family-member-card__edit-btn:hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: #93c5fd;
}
body.redesign-mode .family-member-card__edit {
  margin: 0;
  padding: 0;
  border: none;
}
body.redesign-mode .family-member-card__edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
body.redesign-mode .family-member-card__edit-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--text-3);
}
body.redesign-mode .family-member-card__edit-field--wide { grid-column: 1 / -1; }
body.redesign-mode .family-member-card__edit-field em {
  font-style: normal;
  color: var(--text-4);
  font-size: 11px;
  margin-left: 4px;
}
body.redesign-mode .family-member-card__edit-field input,
body.redesign-mode .family-member-card__edit-field select,
body.redesign-mode .family-member-card__edit-field textarea {
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--text-2);
  min-width: 0;
}
body.redesign-mode .family-member-card__edit-field textarea {
  resize: vertical;
  min-height: 70px;
  line-height: 1.5;
}
body.redesign-mode .family-member-card__edit-field input:focus,
body.redesign-mode .family-member-card__edit-field select:focus,
body.redesign-mode .family-member-card__edit-field textarea:focus {
  outline: none;
  border-color: var(--accent-primary, #2563eb);
}
body.redesign-mode .family-member-card__edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
body.redesign-mode .family-member-card__save-btn {
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 500;
  background: var(--accent-primary, #2563eb);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.12s ease;
}
body.redesign-mode .family-member-card__save-btn:hover { background: var(--accent-primary-hover, #1d4ed8); }
body.redesign-mode .family-member-card__cancel-btn {
  padding: 7px 14px;
  font-size: 12.5px;
  background: #fff;
  color: var(--text-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  cursor: pointer;
}
body.redesign-mode .family-member-card__cancel-btn:hover { background: var(--surface-muted); }
body.redesign-mode .family-member-card__edit-status {
  font-size: 12px;
  color: var(--text-3);
}
body.redesign-mode .family-member-card__edit-status--error { color: #ef4444; }
body.redesign-mode .family-member-card__edit-status--working { color: var(--accent-primary, #2563eb); }

/* S97j — Lab-reports filter strip + per-card owner chip. */
body.redesign-mode .lab-reports-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
}
body.redesign-mode .lab-reports-filter {
  font-size: 12px;
  padding: 5px 12px;
  background: #fff;
  color: var(--text-3);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
body.redesign-mode .lab-reports-filter:hover { background: var(--surface-muted); color: var(--text-2); }
body.redesign-mode .lab-reports-filter--active {
  background: rgba(59, 130, 246, 0.10);
  color: var(--accent-primary, #2563eb);
  border-color: rgba(59, 130, 246, 0.30);
}
body.redesign-mode .lab-report-card__owner {
  font-weight: 400;
  color: var(--text-4);
  font-size: 12px;
  margin-left: 4px;
}

/* S97j — Per-member filter chips on /plan. Sits between the breadcrumb and
   the title row when more than one member has plans. Anchor-based (no JS)
   so the chosen filter survives refresh. */
body.redesign-mode .plan-member-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 14px;
}
body.redesign-mode .plan-member-filter {
  font-size: 12.5px;
  padding: 5px 14px;
  background: #fff;
  color: var(--text-3);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
body.redesign-mode .plan-member-filter:hover { background: var(--surface-muted); color: var(--text-2); }
body.redesign-mode .plan-member-filter--active {
  background: rgba(59, 130, 246, 0.10);
  color: var(--accent-primary, #2563eb);
  border-color: rgba(59, 130, 246, 0.30);
  font-weight: 500;
}

/* S97l — Cumulative-plan warnings banner. Amber-tinted, sits above the
   phase sections when Sonnet curation flagged contradictions / harmful
   stacking / redundancy. Hidden when warnings is empty. */
body.redesign-mode .plan-warnings {
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin: 0 0 18px;
}
body.redesign-mode .plan-warnings__head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: oklch(46% 0.10 70);
  margin-bottom: 6px;
}
body.redesign-mode .plan-warnings__label {
  font-size: 13px;
  font-weight: 600;
}
body.redesign-mode .plan-warnings__list {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
body.redesign-mode .plan-warnings__list li { margin-bottom: 3px; }

@media (max-width: 560px) {
  body.redesign-mode .family-member-card__edit-grid { grid-template-columns: 1fr; }
}
body.redesign-mode .family-members-empty {
  font-size: 12.5px;
  color: var(--text-4);
  font-style: italic;
  margin: 0;
}
body.redesign-mode .family-members-addrow {
  display: grid;
  grid-template-columns: 1fr 130px 150px auto;
  gap: 8px;
  margin-top: 4px;
}
body.redesign-mode .family-members-name,
body.redesign-mode .family-members-role,
body.redesign-mode .family-members-dob {
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--text-2);
  min-width: 0;
}
body.redesign-mode .family-members-add-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  background: var(--accent-primary, #2563eb);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.12s ease;
}
body.redesign-mode .family-members-add-btn:hover { background: var(--accent-primary-hover, #1d4ed8); }
body.redesign-mode .family-members-status {
  font-size: 12.5px;
  color: var(--text-3);
  min-height: 1em;
}
body.redesign-mode .family-members-status--error { color: #ef4444; }
body.redesign-mode .family-members-status--working { color: var(--accent-primary, #2563eb); }

@media (max-width: 560px) {
  body.redesign-mode .family-members-addrow {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  body.redesign-mode .family-members-name { grid-column: 1 / -1; }
  body.redesign-mode .family-members-role { grid-column: 1; grid-row: 2; }
  body.redesign-mode .family-members-dob { grid-column: 2; grid-row: 2; }
  body.redesign-mode .family-members-add-btn { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 560px) {
  body.redesign-mode .labs-header { display: none; }
  body.redesign-mode .labs-row {
    grid-template-columns: 1fr 28px;
    grid-template-rows: auto auto auto;
    gap: 6px 8px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
  }
  body.redesign-mode .labs-row__input--name { grid-column: 1; grid-row: 1; }
  body.redesign-mode .labs-row__input--value { grid-column: 1; grid-row: 2; }
  body.redesign-mode .labs-row__input--date { grid-column: 1; grid-row: 3; }
  body.redesign-mode .labs-row__remove { grid-column: 2; grid-row: 1; align-self: start; }
}

/* ── S96i: At-a-Glance inline editors (bio sex, birthday) ─────────── */
body.redesign-mode .at-card--editable { cursor: pointer; transition: border-color .12s, background .12s; }
body.redesign-mode .at-card--editable:hover:not(.at-card--editing) { border-color: var(--border-strong); background: #fff; }
body.redesign-mode .at-card--editing { cursor: default; }
body.redesign-mode .at-card--editing:hover { border-color: var(--indigo); }
body.redesign-mode .at-card__view { /* no extra padding; inherits at-card */ }
body.redesign-mode .at-card__edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
body.redesign-mode .at-card__select,
body.redesign-mode .at-card__date-input {
  width: 100%;
  padding: 7px 10px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  transition: border-color .12s;
}
body.redesign-mode .at-card__select:focus,
body.redesign-mode .at-card__date-input:focus { outline: none; border-color: var(--indigo); }
body.redesign-mode .at-card__edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
body.redesign-mode .at-card__cancel {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
body.redesign-mode .at-card__cancel:hover { background: var(--surface); border-color: var(--border-strong); }
body.redesign-mode .at-card__save {
  padding: 6px 14px;
  background: var(--text);
  color: #fff;
  border: 1px solid var(--text);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s;
}
body.redesign-mode .at-card__save:hover:not(:disabled) { background: #000; }
body.redesign-mode .at-card__save:disabled { opacity: 0.55; cursor: default; }
body.redesign-mode .at-card__status {
  font-size: 11.5px;
  color: var(--text-3);
  min-height: 14px;
}


/* ── Login page (front door) — patient-UI system, 2026-06 redesign ────
   Standalone page (no sidebar/topbar). Scoped under .login-page so none
   of this bleeds into the app shell. Warm canvas, single centered card,
   indigo reserved for the primary action + focus rings. */
body.redesign-mode.login-page {
  background: var(--bg-canvas);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
}

body.redesign-mode .login-shell {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Brand lockup — monogram + name + mono tag, confident above the card */
body.redesign-mode .login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  text-align: center;
}
body.redesign-mode .login-brand__name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  line-height: 1.2;
}
body.redesign-mode .login-brand__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-4);
  margin-top: 3px;
}

body.redesign-mode .login-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 32px 30px 28px;
}

/* Panel switching — fade/lift-in so mode changes feel intentional */
body.redesign-mode .login-card .panel { display: none; }
body.redesign-mode .login-card .panel.active {
  display: block;
  animation: login-panel-in .24s ease;
}
@keyframes login-panel-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.redesign-mode .login-card .panel.active { animation: none; }
}

body.redesign-mode .login-panel-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 4px;
}
body.redesign-mode .login-panel-sub {
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 22px;
  line-height: 1.5;
}

body.redesign-mode .login-field { margin-bottom: 16px; text-align: left; }
body.redesign-mode .login-label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 6px;
}
body.redesign-mode .login-input {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* 16px floor — stops iOS Safari focus-zoom at 375px */
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
body.redesign-mode .login-input::placeholder { color: var(--text-4); }
body.redesign-mode .login-input:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-soft);
}

body.redesign-mode .login-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  padding: 11px 14px;
  margin-top: 4px;
  border-radius: var(--r-md);
  border: 1px solid var(--indigo);
  background: var(--indigo);
  color: #fff;
  cursor: pointer;
  transition: background .12s;
}
body.redesign-mode .login-submit:hover { background: var(--indigo-strong); }
body.redesign-mode .login-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--indigo-soft);
}

/* Inline error / notice — danger + sage tokens; hidden until populated */
body.redesign-mode .login-card .error,
body.redesign-mode .login-card .notice {
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  margin: 12px 0 0;
  padding: 9px 12px;
  border-radius: var(--r-md);
}
body.redesign-mode .login-card .error {
  color: oklch(46% 0.14 25);
  background: var(--rose-soft);
  border: 1px solid oklch(85% 0.05 25);
}
body.redesign-mode .login-card .notice {
  color: oklch(40% 0.07 145);
  background: var(--sage-soft);
  border: 1px solid var(--sage-line);
}
body.redesign-mode .login-card .error:empty,
body.redesign-mode .login-card .notice:empty { display: none; }

/* Consent checkbox (signup) */
body.redesign-mode .consent-label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}
body.redesign-mode .consent-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  accent-color: var(--indigo);
}
body.redesign-mode .consent-label a {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.redesign-mode .consent-label a:hover { color: var(--text); }

/* Mode-switch links */
body.redesign-mode .login-links {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--text-4);
  text-align: center;
}
body.redesign-mode .login-links .toggle-link {
  color: var(--text-2);
  cursor: pointer;
  text-decoration: none;
}
body.redesign-mode .login-links .toggle-link:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Quiet footer under the card — invite toggle + legal links */
body.redesign-mode .login-foot {
  margin-top: 22px;
  text-align: center;
}
body.redesign-mode .login-foot__invite {
  font-size: 12.5px;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: none;
}
body.redesign-mode .login-foot__invite:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.redesign-mode .login-foot__legal {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--text-4);
  margin-top: 10px;
}
body.redesign-mode .login-foot__legal a { color: var(--text-4); text-decoration: none; }
body.redesign-mode .login-foot__legal a:hover { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 480px) {
  body.redesign-mode .login-card { padding: 26px 20px 24px; }
  body.redesign-mode .login-brand { margin-bottom: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   S110 — My Health Record (/record), spec 2026-07-11
   ─ Read-only six-section aggregation (header, plan, notes, labs,
   supplements, about). .record-page IS the <main> scroll container
   (mirrors .plan-page: flex:1 + overflow-y:auto so content scrolls inside
   the .chat-column shell). All scoped under body.redesign-mode.
   ═══════════════════════════════════════════════════════════════════════ */

body.redesign-mode .record-page { flex: 1; overflow-y: auto; min-height: 0; max-width: 720px; width: 100%; margin: 0 auto; padding: 24px 20px 64px; }
body.redesign-mode .record-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
body.redesign-mode .record-subtitle { color: var(--text-3); font-size: 13.5px; margin: 0; }
body.redesign-mode .record-section { margin: 0 0 28px; }
body.redesign-mode .record-section__head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--border-soft, #e5e7eb); padding-bottom: 6px; margin-bottom: 10px; }
body.redesign-mode .record-section__head h2 { font-size: 15px; font-weight: 600; margin: 0; }
body.redesign-mode .record-manage { font-size: 12.5px; color: var(--text-3); text-decoration: none; }
body.redesign-mode .record-manage:hover { color: var(--text, #111827); }
body.redesign-mode .record-list { list-style: none; margin: 0 0 8px; padding: 0; }
body.redesign-mode .record-list li { padding: 5px 0; font-size: 14px; }
body.redesign-mode .record-list--notes a { display: flex; gap: 10px; align-items: baseline; text-decoration: none; color: inherit; }
body.redesign-mode .record-list--notes a:hover { background: var(--surface-muted, #f9fafb); }
body.redesign-mode .record-note__date { color: var(--text-3); font-size: 12.5px; white-space: nowrap; }
body.redesign-mode .record-note__mode { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
body.redesign-mode .record-phase { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin: 12px 0 2px; }
body.redesign-mode .record-plan__protocol { font-weight: 600; margin: 0 0 6px; }
body.redesign-mode .record-plan__bar { display: inline-block; width: 120px; height: 6px; border-radius: 3px; background: var(--surface-muted, #f3f4f6); vertical-align: middle; margin-left: 8px; overflow: hidden; }
body.redesign-mode .record-plan__bar span { display: block; height: 100%; border-radius: 3px; background: var(--sage, #16a34a); }
body.redesign-mode .record-markers { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 8px; }
body.redesign-mode .record-markers td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--border-soft, #f3f4f6); }
body.redesign-mode .record-report summary { cursor: pointer; font-size: 14px; padding: 5px 0; }
body.redesign-mode .record-report__summary { white-space: pre-wrap; font-size: 12.5px; color: var(--text-2, #374151); background: var(--surface-muted, #f9fafb); padding: 10px; border-radius: 8px; }
body.redesign-mode .record-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.redesign-mode .record-chip { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--surface-muted, #f3f4f6); }
body.redesign-mode .record-chip--chronic { background: var(--amber-soft, #fef3c7); }
body.redesign-mode .record-empty, body.redesign-mode .record-error, body.redesign-mode .record-meta { color: var(--text-3); font-size: 13px; }
body.redesign-mode .record-error { color: #b45309; }
@media (max-width: 640px) {
    body.redesign-mode .record-page { padding: 16px 14px 48px; }
    body.redesign-mode .record-title { font-size: 19px; }
}