/* ─────────────────────────────────────────────────────────────────────────────
 * tc-shell.css — canonical TherapyConnect v2 design system.
 *
 * Mission anchor: this stylesheet is the trust surface a parent rescuing
 * their own child reads in seconds. See JARVIS.md → "Mission" for the
 * north star: make competent intervention reachable for any family on Earth.
 *
 * Reference page: contacts.html (the "good" example). Every v2 page should
 * either link this file or paste the same CSS-variable definitions into its
 * own <style> block.
 *
 * Loaded by:  <link rel="stylesheet" href="/php_api_v2/web/tc-shell.css">
 * ────────────────────────────────────────────────────────────────────────── */

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

/* ── TOKENS START (auto-generated from tc_design_tokens.json — do not edit) ── */
:root {
  /* ── color ── */
  --teal: #0061D4;  /* Primary brand — TC blue (CSS --teal) */
  --teal2: #0052B0;  /* Darker primary — gradient stop, hover */
  --teal-soft: #7BB6F2;  /* Soft accent on navy backgrounds */
  --navy: #0B3F82;  /* Sidebar background (web) */
  --bg: #F7FBFF;  /* Page background */
  --surface: #FFFFFF;  /* Card / topbar / list-row background */
  --border: #D7E5F8;  /* Thin divider line */
  --border-soft: #EEF5FF;  /* Very thin divider, hover separators */
  --text: #243447;  /* Primary text */
  --subtext: #6B7A8D;  /* Secondary text */
  --muted: #8B92A5;  /* Tertiary / placeholder text */
  --success: #10B981;  /* Success / mastered base */
  --success-text: #15803D;  /* Success — dark text variant on light bg */
  --success-bg: #DCFCE7;  /* Success — soft background fill */
  --success-border: #86EFAC;  /* Success — border accent on bg fill */
  --warning: #F59E0B;  /* Warning / on-hold / coming-soon base */
  --warning-text: #92400E;  /* Warning — dark text variant on light bg */
  --warning-bg: #FEF3C7;  /* Warning — soft background fill */
  --warning-border: #FCD34D;  /* Warning — border accent */
  --danger: #DC2626;  /* Error / destructive base */
  --danger-text: #B91C1C;  /* Danger — dark text variant on light bg */
  --danger-bg: #FEE2E2;  /* Danger — soft background fill */
  --danger-border: #FCA5A5;  /* Danger — border accent */
  --info: #2563EB;  /* Informational accent base */
  --info-text: #1D4ED8;  /* Info — dark text variant */
  --info-bg: #DBEAFE;  /* Info — soft background fill */
  --purple: #7C3AED;  /* Admin / supervisor accent base */
  --purple-text: #6D28D9;  /* Purple — dark text variant */
  --purple-bg: #EDE9FE;  /* Purple — soft background fill */
  --create: #16A34A;  /* Create / add / activate action — primary CTA for adding new entities (caseload, profile, target, note, etc.). Distinct from --success (which signals 'this thing succeeded'). */
  --create-dark: #15803D;  /* Create — hover/pressed state */
  --create-text: #166534;  /* Create — dark text variant on light bg */
  --create-bg: #DCFCE7;  /* Create — soft background fill */
  --create-border: #86EFAC;  /* Create — border accent on bg fill */
  --gray-50: #F9FAFB;  /* Tailwind-style gray 50 — softest bg tint */
  --gray-100: #F3F4F6;  /* Gray 100 — alt page bg, hover fill */
  --gray-200: #E5E7EB;  /* Gray 200 — divider, disabled bg */
  --gray-300: #D1D5DB;  /* Gray 300 — input border */
  --gray-400: #9CA3AF;  /* Gray 400 — disabled text, placeholder */
  --gray-500: #6B7280;  /* Gray 500 — secondary text on light */
  --gray-600: #4B5563;  /* Gray 600 — body text alt */
  --gray-700: #374151;  /* Gray 700 — heading alt */
  --gray-800: #1F2937;  /* Gray 800 — dark heading on light bg */
  --gray-900: #111827;  /* Gray 900 — darkest neutral */

  /* ── badge ── */
  --badge-active: #10B981;  /* Active program / target status */
  --badge-on-hold: #F59E0B;  /* On-hold program / target */
  --badge-mastered: #0061D4;  /* Mastered target */
  --badge-inactive: #8B92A5;  /* Inactive / deprecated */

  /* ── tier ── */
  --tier-family: #7C3AED;  /* TC Family subscription tier — gradient start. Family pills/labels/badges. Pair: linear-gradient(135deg, var(--tier-family), var(--tier-family-2)). */
  --tier-family-2: #0061D4;  /* TC Family tier — gradient end (TC blue). */
  --tier-pro: #F59E0B;  /* TC PRO subscription tier — gradient start (amber/gold). PRO pills/labels/badges. Pair: linear-gradient(135deg, var(--tier-pro), var(--tier-pro-2)). */
  --tier-pro-2: #D97706;  /* TC PRO tier — gradient end (deep amber). */
  --tier-personal: #334155;  /* TC Personal subscription tier — gradient start (graphite/concierge). Personal pills/labels/badges. Pair: linear-gradient(135deg, var(--tier-personal), var(--tier-personal-2)). */
  --tier-personal-2: #0F172A;  /* TC Personal tier — gradient end (near-black). */

  /* ── cert ── */
  --cert-level0: #8B92A5;  /* ETP cert badge level 0 — no certification (grey). Star+moon badge fill. Canonical asset: badge_cert_0.svg. */
  --cert-level0-2: #6B7A8D;  /* ETP cert level 0 — moon/depth shade (grey dark). */
  --cert-level1: #0061D4;  /* ETP cert badge level 1 — ETP Assistant (blue, = color.primary). Star+moon badge fill. mainprofilelist.MP19='1'. */
  --cert-level1-2: #0052B0;  /* ETP cert level 1 — moon/depth shade (primary_dark). */
  --cert-level2: #F59E0B;  /* ETP cert badge level 2 — ETP Instructor (gold, = tier.pro). MP19='2'. */
  --cert-level2-2: #D97706;  /* ETP cert level 2 — moon/depth shade (deep amber). */
  --cert-level3: #10B981;  /* ETP cert badge level 3 — ETP Supervisor I (green, = color.success). MP19='3'. */
  --cert-level3-2: #059669;  /* ETP cert level 3 — moon/depth shade (deep green). */
  --cert-level4: #DC2626;  /* ETP cert badge level 4 — ETP Supervisor II (red, = color.danger). MP19='4'. */
  --cert-level4-2: #B91C1C;  /* ETP cert level 4 — moon/depth shade (deep red). */

  /* ── vdq_evidence ── */
  --vdq_evidence-studies-bg: #EDE9FE;  /* Literature chip — soft purple fill. Used in ask-dr-q.html and the floating VDQ bubble. Convention: purple = literature, teal = real cases, blue = cases like yours, amber = heuristics, green = protocols. */
  --vdq_evidence-studies-text: #6D28D9;  /* Literature chip — purple text */
  --vdq_evidence-studies-border: #C4B5FD;  /* Literature chip — purple border */
  --vdq_evidence-cases-bg: #CCFBF1;  /* Real-cases chip — soft teal fill */
  --vdq_evidence-cases-text: #0F766E;  /* Real-cases chip — teal text */
  --vdq_evidence-cases-border: #5EEAD4;  /* Real-cases chip — teal border */
  --vdq_evidence-similar-bg: #DBEAFE;  /* Cases-like-yours chip — soft blue fill */
  --vdq_evidence-similar-text: #1D4ED8;  /* Cases-like-yours chip — blue text */
  --vdq_evidence-similar-border: #93C5FD;  /* Cases-like-yours chip — blue border */
  --vdq_evidence-heuristics-bg: #FEF3C7;  /* Heuristics chip — soft amber fill */
  --vdq_evidence-heuristics-text: #92400E;  /* Heuristics chip — amber text */
  --vdq_evidence-heuristics-border: #FCD34D;  /* Heuristics chip — amber border */
  --vdq_evidence-protocols-bg: #DCFCE7;  /* Protocols chip — soft green fill */
  --vdq_evidence-protocols-text: #166534;  /* Protocols chip — green text */
  --vdq_evidence-protocols-border: #86EFAC;  /* Protocols chip — green border */

  /* ── typography ── */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  /* Primary UI font stack */
  --font-mono: 'SF Mono', Menlo, Consolas, monospace;  /* Monospace font for codes / IDs */
  --display-size: 48;  /* Landing/hero display headline (pt) */
  --h1-size: 34px;  /* Hero / wordmark size (pt) */
  --h2-size: 24px;  /* Section title size (pt) */
  --h3-size: 20px;  /* Card title size (pt) */
  --body-size: 16px;  /* Body text size (pt) */
  --small-size: 14px;  /* Secondary / metadata (pt) */
  --caption-size: 12px;  /* Caption / micro label (pt) */
  --mega-size: 64;  /* Marketing hero — extra large (pt) */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-tight: -0.25px;  /* Letter-spacing for large titles (px) */
  --tracking-normal: 0px;
  --tracking-wide: 1px;  /* Letter-spacing for caption labels (px) */

  /* ── spacing ── */
  --space-px: 1px;  /* Hairline / 1px border */
  --space-2: 2px;  /* Sub-hairline gap, tight chip inner */
  --space-xs: 4px;  /* Inline gap between adjacent icons / chips */
  --space-4: 4px;  /* Inline gap between adjacent icons / chips */
  --space-6: 6px;  /* Tight chip / pill inner padding */
  --space-sm: 8px;  /* Tight padding inside small components */
  --space-8: 8px;  /* Tight padding inside small components */
  --space-10: 10px;  /* Compact button / input padding */
  --space-md: 12px;  /* Default vertical/horizontal padding */
  --space-12: 12px;  /* Default vertical/horizontal padding */
  --space-14: 14px;  /* Medium card padding, dense layouts */
  --space-lg: 16px;  /* Card content padding */
  --space-16: 16px;  /* Card content padding */
  --space-18: 18px;  /* Slightly relaxed card padding */
  --space-20: 20px;  /* Loose card / form padding */
  --space-22: 22px;  /* Section header padding */
  --space-xl: 24px;  /* Section padding */
  --space-24: 24px;  /* Section padding */
  --space-28: 28px;  /* Large card outer padding */
  --space-2xl: 32px;  /* Outer page padding */
  --space-32: 32px;  /* Outer page padding */
  --space-40: 40px;  /* Hero / landing padding */
  --space-3xl: 48px;  /* Large hero padding */
  --space-48: 48px;  /* Large hero padding */
  --space-56: 56px;  /* Extra-large hero */
  --space-64: 64px;  /* Top-of-funnel hero */

  /* ── radius ── */
  --r-6: 6px;  /* Tight chip / micro-button radius (px) */
  --r-sm: 8px;  /* Small button / input radius (px) */
  --r-8: 8px;  /* Small button / input radius (px) */
  --r-md: 10px;  /* Default control radius (px) */
  --r-10: 10px;  /* Default control radius (px) */
  --r-12: 12px;  /* Medium card radius (px) */
  --r-lg: 14px;  /* Card radius (px) */
  --r-14: 14px;  /* Card radius (px) */
  --r-16: 16px;  /* Soft card radius (px) */
  --r-xl: 18px;  /* Large surface radius (px) */
  --r-18: 18px;  /* Large surface radius (px) */
  --r-20: 20px;  /* Hero card radius (px) */
  --r-24: 24px;  /* Extra large surface (px) */
  --r-pill: 50px;  /* Capsule / pill */
  --r-full: 999px;  /* Fully rounded (button-icon style) */

  /* ── shadow ── */
  --shadow-card: 0 2px 5px rgba(0,0,0,0.05);  /* Standard card elevation */
  --shadow-elevated: 0 8px 24px rgba(0,0,0,0.08);  /* Elevated / floating panel */
  --shadow-subtle: 0 1px 2px rgba(0,0,0,0.04);  /* Hairline button shadow */

  /* ── layout ── */
  --sidebar-w: 240px;  /* Fixed sidebar width (px) — web only */
  --topbar-h: 64px;  /* Sticky topbar height (px) — web only */
  --content-max-w: 960px;  /* Centered content max width (px) */
  --gutter: 20px;  /* Horizontal page gutter on mobile (px) */

  /* ── motion ── */
  --motion-quick: 150ms;  /* Hover / tap feedback (ms) */
  --motion-standard: 250ms;  /* Default transition duration (ms) */
  --motion-slow: 400ms;  /* Page / sheet transition (ms) */

  /* ── legacy aliases — kept so older HTML/CSS that references these
   *    pre-canonicalization tokens still renders. DO NOT use in new code;
   *    use the canonical token names. Added 2026-05-25 after platform audit
   *    found ~300 references to undefined tokens that caused chip / card /
   *    banner backgrounds and body text to render unstyled. */
  --mist: #EEF5FF;  /* alias of --border-soft — soft light-blue bg fill */
  --slate: #243447;  /* alias of --text — primary body text color */
  --gray: #6B7280;  /* alias of --gray-500 — secondary text on light bg */
  --accent: #0061D4;  /* alias of --teal — primary brand accent */
  --blue: #0061D4;  /* alias of --teal */
  --navy-soft: #1F4E94;  /* lighter navy for card backgrounds */
  --teal-dim: #4D8DD2;  /* muted teal for inactive states */
  --teal-glow: rgba(0,97,212,.25);  /* teal accent w/ glow */
  --card: #FFFFFF;  /* alias of --surface — card background */
  --card-bg: #FFFFFF;  /* alias of --surface — card background */
  --card-fg: #243447;  /* alias of --text — card foreground/text */
  --card-bd: #D7E5F8;  /* alias of --border — card border */
  --card-ring: rgba(0,97,212,.08);  /* subtle ring around cards */
  --error: #DC2626;  /* alias of --danger */
  --red: #DC2626;  /* alias of --danger */
  --warn: #F59E0B;  /* alias of --warning */
  --warning-soft: #FEF3C7;  /* alias of --warning-bg */
  --gold: #F59E0B;  /* alias of --warning — gold/amber */
  --yellow: #F59E0B;  /* alias of --warning */
  --green: #10B981;  /* alias of --success */
  --light: #F7FBFF;  /* alias of --bg */
  --soft: #EEF5FF;  /* alias of --border-soft */
  --white: #FFFFFF;
  --pro: #F59E0B;  /* PRO badge — amber */
  --pro-glow: rgba(245,158,11,.3);  /* PRO badge glow */
  --pct: #10B981;  /* percentage / success color */
  --percent: #10B981;  /* alias of --pct */
  --stat-fg: #243447;  /* stat value foreground */
  --stat-ring: rgba(0,97,212,.12);  /* stat chip ring */
  --radius: 10px;  /* legacy radius alias (canonical: --r-md) */
  --r-2xl: 22px;  /* legacy extra-large radius */
  --shadow: 0 6px 18px rgba(0,97,212,.10);  /* legacy default shadow */
  --shadow-sm: 0 2px 6px rgba(11,31,58,.06);  /* legacy small shadow */
  --shadow-md: 0 6px 18px rgba(11,31,58,.10);  /* legacy medium shadow */
  --shadow-lg: 0 14px 36px rgba(11,31,58,.18);  /* legacy large shadow */
  --sidebar-width: 248px;  /* legacy sidebar width alias (canonical: --sidebar-w) */
  --topbar-height: 56px;  /* legacy topbar height alias (canonical: --topbar-h) */
  --amazon: #FF9900;  /* Amazon brand (product/affiliate badge) */
  --ml: #FFE600;  /* MercadoLibre brand yellow */
  --ml-ink: #2D3277;  /* MercadoLibre brand ink */

}
/* ── TOKENS END ── */

/* ── CANONICAL PROGRESS BAR (2026-07-24) ───────────────────────────────────
 * The single progress bar for the whole platform. Thick, full-width track with
 * a teal fill that turns green (--create) at 100%. Optional inline label to the
 * right. Modeled on the program-list "trials today" bar (.prog-today) so every
 * surface — Continue/Recent cards, program lists, Mi Día/Semana, profile headers
 * — reads as one component. New surfaces should use THIS, not a bespoke bar.
 *
 * Markup:
 *   <div class="tc-progress is-done?">            (add .is-done at 100%)
 *     <span class="tc-progress__track">
 *       <span class="tc-progress__fill" style="width:NN%"></span>
 *     </span>
 *     <span class="tc-progress__label">1/15 today</span>   (optional)
 *   </div>
 *
 * Track height override per instance: set --tc-progress-h (default 10px). */
.tc-progress { display: flex; align-items: center; gap: 10px; width: 100%; }
.tc-progress__track {
  flex: 1; min-width: 40px; height: var(--tc-progress-h, 10px);
  border-radius: var(--r-pill, 999px);
  background: rgba(0, 97, 212, .12); overflow: hidden;
}
.tc-progress__fill {
  height: 100%; width: 0; border-radius: inherit; background: var(--teal, #0061D4);
  transition: width var(--motion-standard, .3s) ease, background var(--motion-quick, .15s) ease;
}
.tc-progress__label {
  font-size: .8rem; font-weight: 800; color: var(--teal, #0061D4);
  white-space: nowrap; flex-shrink: 0;
}
.tc-progress.is-done .tc-progress__track { background: var(--create-bg, #DCFCE7); }
.tc-progress.is-done .tc-progress__fill  { background: var(--create, #16A34A); }
.tc-progress.is-done .tc-progress__label { color: var(--create-text, #166534); }

html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  display: flex;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  height: 100vh;            /* hard-cap to viewport so the inner flex:1 + overflow-y can scroll */
  background: var(--navy);
  display: flex; flex-direction: column;
  position: fixed; left: 0; top: 0; bottom: 0;
  z-index: 50;
  transition: transform .25s;
  overflow: hidden;         /* sidebar itself never scrolls — only .sidebar-nav inside it does */
}
.sidebar-logo {
  padding: 22px 24px 20px;
  font-size: 1.1rem; font-weight: 800;
  color: #fff; letter-spacing: -.3px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-decoration: none; display: block;
}
.sidebar-logo span { color: var(--teal-soft); }
/* Third logo segment injected by tc-brand.js — TherapyConnectData / TherapyConnectCE.
   Inherits color so it matches "Therapy" in any context (white sidebar, light header). */
.tc-brand-suffix { color: inherit; font-weight: inherit; }
.sidebar-logo .tc-brand-suffix { color: #fff; }

/* Canonical 5-pill language toggle — used in topbars across the platform.
   Pages that defined their own .lang-toggle / .lang-btn styles will be
   overridden by these rules; the dashboard look is the source of truth. */
.lang-toggle { display: inline-flex; align-items: center; background: var(--bg); border: 1.5px solid var(--border); border-radius: 50px; padding: 3px; gap: 2px; }
.lang-toggle .lang-btn { padding: 5px 12px; border-radius: 50px; border: none; background: transparent; font-size: .75rem; font-weight: 700; cursor: pointer; color: var(--subtext); letter-spacing: .3px; font-family: inherit; transition: background .15s, color .15s, box-shadow .2s; }
.lang-toggle .lang-btn:hover { color: var(--text); }
.lang-toggle .lang-btn.active { background: var(--teal); color: #fff; box-shadow: 0 2px 6px rgba(0,97,212,.3); }

/* When tc-sidebar.js injects a sidebar onto a page that didn't ship with one
   (the public marketing pages), body content needs to shift right by the
   sidebar width. Sidebar is position:fixed so this is just left padding.
   Override the global body display:flex back to block so the marketing
   page's natural top-nav + .page block layout isn't turned into two
   side-by-side flex columns.
   Mobile: drop the padding so the sidebar can slide over content instead. */
body.has-injected-sidebar { display: block; padding-left: var(--sidebar-w); }
/* Pages that explicitly opt out of the sidebar layout (marketing/landing pages
   loaded by an anonymous visitor). Without this, the global body{display:flex}
   stacks their top-nav and main column horizontally. */
body.no-sidebar { display: block; }
@media (max-width: 768px) {
  body.has-injected-sidebar { padding-left: 0; }
  .sidebar.tc-sidebar-injected { transform: translateX(-100%); }
}

/* Back button at the top of the sidebar (injected by tc-sidebar.js).
   Sits above the section labels, ghost-style on the dark navy background. */
.sidebar-back { display: flex; align-items: center; gap: 8px; margin: 12px 12px 6px; padding: 8px 12px; border-radius: var(--r-md, 10px); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: rgba(255,255,255,.7); font-size: .8rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .15s, color .15s, border-color .15s; text-decoration: none; }
.sidebar-back:hover { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.22); }
.sidebar-back svg { width: 14px; height: 14px; flex-shrink: 0; }

.sidebar-nav {
  flex: 1; padding: 16px 12px;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
}
.nav-section-label {
  /* Brighter section labels (was .25 — too dim to read on the dark sidebar)
     so MAIN / SUPERVISOR / PRO / LEARNING / ADMIN headers stand out clearly
     above their groups but still recede from the active-item color. */
  display: block;
  font-size: .7rem; font-weight: 800;
  color: #fff;
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 16px 12px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r-md);
  color: #fff;
  font-size: .875rem; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s;
  border: none; background: none; width: 100%; text-align: left;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,.12); color: #fff; }
/* Active item: the highlight is a light-yellow "pill" (.nav-slide-pill) that
   slides between items on navigation (set up by tc-sidebar.js setupNavSlider).
   The item itself stays transparent so the pill shows through; nav children sit
   above the pill via z-index. A subtle left accent is the no-JS fallback. */
.nav-item.active { background: transparent; color: #fff; box-shadow: inset 3px 0 0 rgba(250,204,21,.9); }
.nav-item.nav-profile-notes.active { background: transparent; color: #fff; }
.sidebar-nav, nav.profile-menu { position: relative; }
.sidebar-nav .nav-item, .sidebar-nav .nav-section-label,
nav.profile-menu .nav-item, nav.profile-menu .nav-section-label { position: relative; z-index: 1; }
.nav-slide-pill {
  position: absolute; left: 6px; right: 6px; top: 0; height: 0; border-radius: 10px;
  background: linear-gradient(90deg, rgba(250,204,21,.34), rgba(245,158,11,.16));
  box-shadow: 0 0 14px rgba(250,204,21,.40);
  transition: top .34s cubic-bezier(.4,0,.2,1), height .34s cubic-bezier(.4,0,.2,1), opacity .2s;
  opacity: 0; pointer-events: none; z-index: 0;
}

/* Profile-context highlight (2026-06-15). When tc-sidebar.js detects a selected
   profile it adds `.tc-nav--profile` to the nav root (.sidebar-nav / .profile-menu).
   In that mode the active-item highlight goes GREEN (--create) instead of the
   default yellow, so the color itself signals "you're inside a client's context"
   vs a general/account context. Same treatment as the yellow (sliding pill tint +
   glow + left accent), only the hue changes — uses color-mix on the token so no
   hex is hardcoded. Label stays #fff (per §2.11 contrast on the dark sidebar). */
.tc-nav--profile .nav-item.active {
  box-shadow: inset 3px 0 0 var(--create, #16A34A);
}
.tc-nav--profile .nav-slide-pill {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--create, #16A34A) 34%, transparent),
    color-mix(in srgb, var(--create, #16A34A) 16%, transparent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--create, #16A34A) 42%, transparent);
}

/* Profile-aware "My Notes" entry — appears at the top of the sidebar when
   the URL carries a ?profile= param (client.html / program-detail / etc.).
   The parent section label shows the active client's name in title case. */
.nav-item.nav-profile-notes { color: #fff; }
.nav-item.nav-profile-notes:hover { color: #fff; }
.nav-item.nav-profile-notes.active { background: rgba(0,97,212,.28); color: #fff; }
.nav-pro-badge {
  margin-left: auto;
  background: linear-gradient(135deg, var(--tier-pro, #F59E0B), var(--tier-pro-2, #D97706));
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .6px;
  padding: 2px 6px;
  border-radius: 50px;
  text-transform: uppercase;
  line-height: 1;
}
/* When the user IS a PRO subscriber, the badge stays visible. Canonical
   PRO tier gradient (2026-06-11 badge audit) — same amber as the upsell
   pill; a subtle inset ring marks the "you have this" state. */
.nav-pro-badge.pro-active {
  background: linear-gradient(135deg, var(--tier-pro, #F59E0B), var(--tier-pro-2, #D97706));
  box-shadow: 0 0 0 1px rgba(245,158,11,.25) inset;
}
/* "All profiles" scope marker. Appears on global views (contact-notes.html,
   progress-reports.html, timesheet.html, evaluations.html, questionnaires.html,
   documents.html) that have a per-profile twin elsewhere in the sidebar.
   Visually distinct from the orange PRO pill — neutral teal/slate so it
   reads as a scope label, not an entitlement. Sits AFTER the PRO badge
   when both are present. */
.nav-allscope-badge {
  margin-left: 6px;
  background: rgba(123,182,242,.18);
  color: #cfe2ff;
  border: 1px solid rgba(123,182,242,.32);
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .8px;
  padding: 1px 6px;
  border-radius: 50px;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}
/* When the PRO badge is absent the all-scope pill should still hug the
   right edge of the row so the layout doesn't look unbalanced. */
.nav-item .nav-pro-badge + .nav-allscope-badge { margin-left: 6px; }
.nav-item > .nav-allscope-badge:not(.nav-pro-badge + .nav-allscope-badge) { margin-left: auto; }

/* Virtual Dani readiness banner. Sits below a page topbar, surfaces what
   the next AI feature requires. Self-hides when empty so the JS doesn't
   need to toggle display — just set or clear innerHTML. */
.vd-banner {
  margin: 14px 22px 0;
  padding: 14px 18px;
  background: #fff;
  border: 1.5px solid var(--teal);
  border-radius: 12px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: .9rem; line-height: 1.5; color: var(--navy);
  box-shadow: 0 2px 10px rgba(0,97,212,.08);
}
.vd-banner:empty { display: none; }
.vd-banner .vd-icon { font-size: 1.3rem; flex-shrink: 0; }
.vd-banner .vd-text { flex: 1; min-width: 200px; }
.vd-banner a { color: var(--teal); font-weight: 700; text-decoration: none; }
.vd-banner a:hover { text-decoration: underline; }

/* Profile-completeness ring — three concentric arcs (demographics / clinical /
   ai-ready). Reusable in dashboard cards (sm) and client header (lg). Hover
   pops a tooltip with the top missing fields per category. Tied to
   profile_completeness.php?action=score response shape.

   Usage:
     <span class="tc-ring tc-ring--sm" data-d="80" data-c="40" data-a="20">
       <svg viewBox="0 0 40 40">...</svg>
     </span>
   The JS in tc-helpers.js paints the arcs from the data-* attrs.        */
.tc-ring { display: inline-block; position: relative; line-height: 0; vertical-align: middle; }
.tc-ring--sm { width: 40px; height: 40px; }
.tc-ring--lg { width: 96px; height: 96px; }
.tc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tc-ring circle { fill: none; stroke-width: 4; }
.tc-ring--lg circle { stroke-width: 5; }
.tc-ring .ring-track { stroke: var(--border); }
.tc-ring .ring-d { stroke: var(--teal); }
.tc-ring .ring-c { stroke: #8b5cf6; }    /* purple — clinical */
.tc-ring .ring-a { stroke: var(--success); }
.tc-ring .ring-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 800; color: var(--subtext); transform: none;
}
.tc-ring--lg .ring-pct { font-size: 1.1rem; color: var(--navy); }
.tc-ring[data-low="1"] .ring-pct { color: var(--warning); }
/* Tooltip is a high-contrast white card so it stays readable on ANY parent
   background (navy sidebar, white main area). All colors set with !important
   to win against parent text-color inheritance. white-space normal so the
   field list wraps inside max-width. */
.tc-ring-tip {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #fff !important; color: var(--navy) !important;
  padding: 10px 12px; border-radius: var(--r-md);
  font-size: .76rem; line-height: 1.45; opacity: 0;
  pointer-events: none; transition: opacity .15s;
  z-index: 1000; width: 260px; max-width: 260px;
  text-align: left; white-space: normal;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.tc-ring-tip strong {
  display: block; margin-top: 8px;
  font-size: .65rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--subtext) !important; font-weight: 800;
}
.tc-ring-tip strong:first-child { margin-top: 0; }
.tc-ring-tip span { display: block; color: var(--text) !important; font-weight: 500; word-wrap: break-word; }
.tc-ring:hover .tc-ring-tip { opacity: 1; }

/* Red notification bubble for #nav-courses (active-enrollments count) and
   any other sidebar item that wants a count badge in the future. Sits at
   the far right of the row; hidden when the count is 0. */
.nav-item .nav-count-badge {
  margin-left: auto;
  background: var(--danger); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .02em;
  min-width: 18px; height: 18px; padding: 0 6px;
  border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(220,38,38,.4);
  flex-shrink: 0;
}
#profile-section-label { color: var(--teal-soft); text-transform: none; letter-spacing: .3px; font-size: .82rem; font-weight: 700; padding-top: 18px; }

/* Profile section block — shows the active client's name + a muted id chip
   underneath. Lives at the top of the sidebar on every page where the URL
   carries a ?profile= or ?id=. */
.nav-profile-header { padding: 18px 12px 6px; display: flex; flex-direction: column; gap: 4px; }
.nav-profile-header .nav-profile-name { color: #fff; font-size: .92rem; font-weight: 700; letter-spacing: -.1px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-profile-header .nav-profile-pid {
  align-self: flex-start;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.65);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 2px 8px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.1);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Notification badge — canonical red pill for unread/pending counts.
   Use via tc-nav-badges.js: tcNavBadge.set('contacts.html', 5) → injects
   <span class="nav-badge">5</span> at the end of the matching nav-item.
   .nav-badge.dot variant = small empty dot (no number).
   Also reusable inside cards / topbar — anywhere a red unread marker is needed. */
.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .2px;
  padding: 2px 7px;
  min-width: 18px;
  height: 18px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--navy);   /* halo so it pops on the dark sidebar */
}
.nav-badge.dot {
  min-width: 10px;
  width: 10px;
  height: 10px;
  padding: 0;
  font-size: 0;
  box-shadow: 0 0 0 2px var(--navy);
}
/* On a light surface (topbar, cards) the navy halo is wrong — drop the box-shadow */
.topbar .nav-badge, .card .nav-badge, .surface-light .nav-badge { box-shadow: none; }

.sidebar-footer { padding: 16px 12px; border-top: 1px solid rgba(255,255,255,.07); }
.user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md);
  cursor: pointer; transition: background .15s;
}
.user-row:hover { background: rgba(255,255,255,.06); }
.s-avatar {
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--teal), var(--teal2));
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.user-name { font-size: .88rem; font-weight: 700; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing: -.1px; }
.user-plan {
  font-size: .62rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.10);
  padding: 2px 8px; border-radius: 50px;
  align-self: flex-start; line-height: 1.4;
}
.user-plan.pro { color: #fff; background: linear-gradient(135deg, var(--tier-pro, #F59E0B), var(--tier-pro-2, #D97706)); }

/* ── Canonical subscription-tier colors (2026-06-11) ─────────────────────────
   FAMILY purple→blue · PRO amber · PERSONAL slate. Apply to ANY plan label,
   chip, pill, or CTA across v2 (sidebar pill, account badge, dashboard banner,
   upgrade CTAs, gate badges). Uses the --tier-* tokens from the generated
   :root block. Compound selectors beat page-local .badge-plan / .user-plan.pro
   without resorting to !important. Current-plan buttons stay neutral gray —
   never apply these to a "your current plan" state. */
.tc-tier-family, .badge-pill.tc-tier-family, .user-plan.pro.tc-tier-family, .user-plan.tc-tier-family {
  background: linear-gradient(135deg, var(--tier-family, #7C3AED), var(--tier-family-2, #0061D4));
  color: #fff;
}
.tc-tier-pro, .badge-pill.tc-tier-pro, .user-plan.pro.tc-tier-pro, .user-plan.tc-tier-pro {
  background: linear-gradient(135deg, var(--tier-pro, #F59E0B), var(--tier-pro-2, #D97706));
  color: #fff;
}
.tc-tier-personal, .badge-pill.tc-tier-personal, .user-plan.pro.tc-tier-personal, .user-plan.tc-tier-personal {
  background: linear-gradient(135deg, var(--tier-personal, #334155), var(--tier-personal-2, #0F172A));
  color: #fff;
}
/* Chip shape for tier names rendered inline in copy (e.g. dashboard banner). */
.tc-tier-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 50px;
  font-size: .68rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; line-height: 1.5; white-space: nowrap;
  vertical-align: middle;
}

/* Policies link injected at the very bottom of the sidebar by
   tc-sidebar.js. Sits below the user-pill row in .sidebar-footer.
   Visible enough to read at a glance; underlined on hover so it reads
   as a link, not a label. */
.sidebar-policies {
  display: block;
  text-align: center;
  margin-top: 12px;
  padding: 10px 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 0 0 6px 6px;
  transition: color .15s, background .15s;
}
.sidebar-policies:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
  text-decoration: underline;
}

/* ── MAIN ────────────────────────────────────────────────────────────────── */
.main {
  margin-left: var(--sidebar-w); flex: 1;
  min-height: 100vh;
  display: flex; flex-direction: column;
  /* min-width:0 (2026-07-15): flex items default to min-width:auto, so any
     unbreakable content (a nowrap line, a long URL) forces .main — and the
     whole page — wider than the viewport. 0 lets .main shrink to the
     viewport; inner overflow rules then clip/ellipsize as designed. */
  min-width: 0;
}
/* When tc-sidebar.js injects the sidebar (pages that don't ship with their
   own <aside class="sidebar">), body.has-injected-sidebar already gets
   padding-left:240px. Without this rule, .main's own margin-left:240px
   stacks on top → 480px of empty space to the left of the content. */
body.has-injected-sidebar .main { margin-left: 0; }
@media (max-width: 768px) {
  body.has-injected-sidebar .main { margin-left: 0; }
}
.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 28px; gap: 16px;
  position: sticky; top: 0; z-index: 40;
}
.topbar-title { font-size: 1rem; font-weight: 700; color: var(--text); flex: 1; }
/* Canonical topbar pill button (account control, etc.). Pages may override inline,
   but this guarantees a compact icon+label pill even when a page omits its own rule. */
.topbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1.5px solid var(--border); color: var(--text);
  padding: 6px 14px; border-radius: var(--r-sm);
  font-size: .8rem; font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.topbar-btn:hover { border-color: var(--teal); color: var(--teal); }
.topbar-btn svg { width: 15px; height: 15px; flex: none; }
.search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--r-md); padding: 7px 12px; width: 220px;
}
.search-wrap svg { width: 15px; height: 15px; color: var(--subtext); flex-shrink: 0; }
.search-wrap input {
  border: none; background: transparent;
  font-size: .82rem; font-family: inherit; color: var(--text);
  outline: none; width: 100%;
}
.content { flex: 1; padding: 28px 32px; max-width: 960px; }

/* ── PAGE HEADERS ────────────────────────────────────────────────────────── */
.page-header { margin-bottom: 24px; }
.page-title  { font-size: 1.4rem; font-weight: 800; color: var(--text); letter-spacing: -.4px; margin-bottom: 4px; }
.page-sub    { font-size: .875rem; color: var(--subtext); }

/* ── CARDS ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 20px;
  transition: box-shadow .2s;
}
.card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.card.interactive { cursor: pointer; transition: box-shadow .2s, transform .15s, border-color .2s; }
.card.interactive:hover { box-shadow: 0 8px 24px rgba(13,158,138,.10); transform: translateY(-2px); border-color: rgba(13,158,138,.25); }

/* ── TAGS / PILLS ────────────────────────────────────────────────────────── */
.tag { font-size: .7rem; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: rgba(13,158,138,.1); color: var(--teal); }
.tag.therapy { background: rgba(99,102,241,.1); color: #6366F1; }
.tag.warning { background: rgba(245,158,11,.1); color: #D97706; }
.tag.danger  { background: rgba(220,38,38,.1);  color: var(--danger-text); }
.tag.success { background: rgba(16,185,129,.1); color: #047857; }
.tag.muted   { background: rgba(107,122,141,.1); color: var(--subtext); }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── *
 * 2026-05-23 — Visual refresh ("Option C" from the UI audit).
 *
 * Promoted the dashboard's `.qa-btn` chunkier-with-border styling to be the
 * canonical primary CTA across the platform. Every page now renders the same
 * shape: 10px radius, 1.5px border, 9px 16px padding, 0.82rem font, 8px gap.
 * Hover transitions border-color + background + color smoothly.
 *
 * Variants:
 *   .btn                — base shape; defaults to "secondary" appearance
 *                          (white bg, gray border, dark text). Good for
 *                          Cancel / view-more / back links.
 *   .btn .btn-primary   — teal-filled, white text. The main CTA on a page.
 *   .btn .btn-ghost     — transparent bg (use on dark hero cards / colored
 *                          backgrounds where white would look like a chip).
 *   .btn .btn-danger    — red, for destructive actions (delete, revoke).
 *   .btn .btn-sm        — size modifier (compact). Stack with any variant.
 *
 * Disabled state is handled at the base level — every variant gets it. */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--border); color: var(--text);
  padding: 9px 16px; border-radius: var(--r-md);
  font-size: .82rem; font-weight: 700;
  cursor: pointer; text-decoration: none;
  font-family: inherit;
  transition: border-color .15s, background .15s, color .15s, opacity .15s;
}
.btn:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--teal2); border-color: var(--teal2); color: #fff; }
.btn-ghost { background: transparent; color: var(--subtext); border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { color: var(--teal); border-color: var(--teal); }
.btn-danger { background: rgba(220,38,38,.1); color: var(--danger); border-color: rgba(220,38,38,.2); }
.btn-danger:hover:not(:disabled) { background: rgba(220,38,38,.18); border-color: rgba(220,38,38,.35); }
/* Canonical green "create / add / new" CTA — pairs with the "+" sign convention.
 * CLAUDE.md §2.25 mandates this for every "+ New / + Add / + Create" button so
 * users build muscle memory for "green = the affordance that adds a new thing".
 * Stacks with .btn-sm and overrides .btn-primary when both are present. */
.btn-create { background: var(--create); border-color: var(--create); color: #fff; }
.btn-create:hover:not(:disabled) { background: #138538; border-color: #138538; color: #fff; }
/* Size modifier — compact CTA. Stacks with .btn-primary / .btn-create / .btn-ghost / .btn-danger. */
.btn-sm { padding: 6px 12px; font-size: .76rem; gap: 5px; }
.btn-sm svg { width: 12px; height: 12px; }
/* ── Inline text-action button (the "link-styled" mini-button)
 * 2026-06-03 — canonical class for "Select all / None / Clear / Toggle all"
 * type micro-actions that sit next to a heading, label, or section header.
 * No background, no border — just teal bold text with an underline on hover.
 * Lives at .btn-link so any surface that wants the style can apply it
 * without inlining the rule (was previously hand-rolled per-page, e.g.
 * .srcm-toggle-all on eval-report.html).
 *
 * NOT to be confused with `.btn .btn-ghost` which is a full pill-shaped
 * button on dark backgrounds — .btn-link has no .btn base, it's standalone. */
.btn-link {
  background: transparent; border: 0; padding: 2px 4px;
  color: var(--teal); font-family: inherit; font-size: .76rem; font-weight: 700;
  cursor: pointer; line-height: 1;
  transition: color .15s, text-decoration-color .15s;
}
.btn-link:hover:not(:disabled) { color: var(--teal2); text-decoration: underline; }
.btn-link:disabled, .btn-link[disabled] { opacity: .5; cursor: not-allowed; }
.btn-link + .btn-link { margin-left: 6px; }   /* small gap between adjacent .btn-link buttons */

/* ── Virtual Dr. Q banner ────────────────────────────────────────────────
 * Collapsible card. Collapsed state: clean centered "Ask Virtual Dr. Q"
 * with the brain icon. Click expands to reveal the value-prop pitch
 * (24y / 650+ cases / 3,600+ heuristics) + the chat widget + the profile
 * picker. Default state is COLLAPSED so the bar doesn't dominate the
 * first paint — but the moat is one click away. 2026-05-23 (Daniel ask). */
.vd-pro-bar { background: linear-gradient(135deg, rgba(0,97,212,.07) 0%, rgba(0,97,212,.02) 100%); border: 1.5px solid rgba(0,97,212,.18); border-radius: var(--r-lg); margin: 0 0 18px; padding: 0; overflow: hidden; box-shadow: 0 2px 12px rgba(11,63,130,.05); }
details.vd-pro-bar > summary.vd-pro-summary {
  cursor: pointer; padding: 14px 18px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 1rem; font-weight: 800; color: var(--navy);
  background: #fff; list-style: none; user-select: none;
  transition: background .15s;
}
details.vd-pro-bar > summary.vd-pro-summary::-webkit-details-marker { display: none; }
details.vd-pro-bar > summary.vd-pro-summary::marker { content: ''; }
details.vd-pro-bar > summary.vd-pro-summary:hover { background: rgba(0,97,212,.04); }
details.vd-pro-bar[open] > summary.vd-pro-summary { border-bottom: 1px solid rgba(0,97,212,.10); }
.vd-pro-head { display: flex; align-items: flex-start; gap: 14px; padding: 14px 18px; background: #fff; border-bottom: 1px solid rgba(0,97,212,.10); }
.vd-pro-text { flex: 1; min-width: 0; }
.vd-pro-pitch { font-size: .82rem; color: var(--text); line-height: 1.5; max-width: 760px; }
.vd-pro-pitch strong { color: var(--navy); font-weight: 800; }
.vd-pro-pitch em { color: var(--teal); font-style: normal; font-weight: 700; }
.vd-pro-readiness { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .74rem; font-weight: 600; color: var(--subtext); align-self: center; flex-shrink: 0; max-width: 240px; text-align: right; justify-content: flex-end; }
.vd-pro-mount { padding: 14px 18px; background: #fff; }
@media (max-width: 680px) {
  .vd-pro-head { flex-wrap: wrap; }
  .vd-pro-readiness { max-width: none; justify-content: flex-start; text-align: left; padding-top: 6px; border-top: 1px dashed rgba(0,97,212,.12); width: 100%; }
}

/* ── INPUTS ──────────────────────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.label { display: block; font-size: .82rem; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.input, .select, .textarea {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-size: .92rem; color: var(--text); background: var(--surface);
  font-family: inherit;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(13,158,138,.12);
}
.textarea { resize: vertical; min-height: 70px; }

/* ── TABS ────────────────────────────────────────────────────────────────── */
.tabs-bar { display: flex; gap: 8px; border-bottom: 1px solid var(--border); margin-bottom: 18px; align-items: center; flex-wrap: wrap; }
.tab-btn {
  background: transparent; border: none;
  color: var(--muted); padding: 9px 14px;
  font-size: .86rem; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: inherit; transition: color .15s, border-color .15s;
  display: flex; align-items: center; gap: 8px;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--teal); border-bottom-color: var(--teal); }

/* ── EMPTY / SKELETON ────────────────────────────────────────────────────── */
.empty { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 60px 32px; text-align: center; }
.empty-icon { font-size: 48px; margin-bottom: 16px; }
.empty h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.empty p  { font-size: .875rem; color: var(--subtext); max-width: 380px; margin: 0 auto; }

.skeleton { background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── HAMBURGER + MOBILE ──────────────────────────────────────────────────── */
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 4px; color: var(--text); }
.hamburger svg { width: 22px; height: 22px; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 49; }

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }
  .main { margin-left: 0; }
  .hamburger { display: flex; }
  .content { padding: 20px 16px; }
  .search-wrap { width: 100%; }
}

/* ── ALERT BANNERS ───────────────────────────────────────────────────────── */
.alert { padding: 11px 14px; border-radius: var(--r-md); font-size: .88rem; font-weight: 500; margin-bottom: 14px; }
.alert.alert-info    { background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.18); color: var(--info-text); }
.alert.alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--success-text); }
.alert.alert-warn    { background: #fffbeb; border: 1px solid #fde68a; color: var(--warning-text); }
.alert.alert-error   { background: #fef2f2; border: 1px solid #fecaca; color: var(--danger-text); }

/* ── ADMIN RAIL (danielqm-only sidebar block) ───────────────────────────── */
.sidebar-admin-rail { padding: 12px 8px 8px; margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-admin-rail .nav-section-label {
  display: block; padding: 8px 12px 6px; font-size: .68rem;
  letter-spacing: .12em; color: rgba(255,255,255,.8); font-weight: 700;
}
.admin-rail-stats {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-md); padding: 10px 12px; margin: 4px 4px 8px; font-size: .78rem;
}
.admin-rail-stats .ar-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0; color: rgba(255,255,255,.92);
}
.admin-rail-stats .ar-k { font-weight: 600; letter-spacing: .02em; color: #fff; }
.admin-rail-stats .ar-v { font-weight: 800; color: #B5D4FA; font-variant-numeric: tabular-nums; padding-left: 8px; }
.sidebar-admin-rail .ar-link svg { width: 18px; height: 18px; flex: none; }

/* ─────────────────────────────────────────────────────────────────────────────
 * Evidence + Controversy pills (2026-05-25)
 * Two orthogonal dimensions surfaced anywhere VDQ cites a clinical claim:
 *   .cl-pill.tier-{i..vi}   — evidence tier (RCT/meta → expert experience)
 *   .cl-pill.controversial  — independent controversy flag (red ⚠)
 * Pair them inside .cl-pill-row when both apply. Render helper:
 *   tcEvidenceBadges({tier:'II', controversial:true, controversyNote:'...'})
 * See: tc-evidence.js + memory/feedback_transparency_over_curation_2026-05-25.md.
 * ─────────────────────────────────────────────────────────────────────────── */
.cl-pill-row{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;vertical-align:middle;margin-right:8px}
.cl-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:50px;
  font-size:.66rem;font-weight:700;letter-spacing:.05em;line-height:1.2;
  border:1px solid transparent;white-space:nowrap;text-transform:uppercase;font-family:inherit}
.cl-pill .cl-pill-num{font-weight:800;font-variant-numeric:tabular-nums}
.cl-pill.tier-i,.cl-pill.tier-ii{background:rgba(15,110,86,.10);border-color:rgba(15,110,86,.32);color:#085041}
.cl-pill.tier-iii,.cl-pill.tier-iv{background:rgba(11,63,130,.10);border-color:rgba(11,63,130,.32);color:#0b3f82}
.cl-pill.tier-v{background:rgba(95,94,90,.10);border-color:rgba(95,94,90,.30);color:#444441}
.cl-pill.tier-vi{background:rgba(186,117,23,.10);border-color:rgba(186,117,23,.32);color:#7c4f00}
.cl-pill.controversial{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.32);color:#a32d2d}
.cl-pill.controversial::before{content:"⚠";font-size:.78rem;line-height:1;margin-right:1px}
.cl-pill.clickable{cursor:pointer;transition:filter .15s,box-shadow .15s}
.cl-pill.clickable:hover{filter:brightness(1.04);box-shadow:0 1px 4px rgba(0,0,0,.08)}
/* Tooltip wrapper — small popover above the pill on hover/click */
.cl-pill-tip{position:absolute;z-index:50;max-width:340px;background:#fff;color:#243447;
  font-size:.78rem;font-weight:500;letter-spacing:0;text-transform:none;
  border:1px solid var(--border,#E4E9F0);border-radius:10px;padding:12px 14px;line-height:1.45;
  box-shadow:0 6px 20px rgba(11,31,58,.10)}
.cl-pill-tip .cl-tip-title{font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--subtext,#5F5E5A);margin-bottom:4px}
.cl-pill-tip .cl-tip-ref{font-size:.74rem;color:var(--subtext,#5F5E5A);margin-top:6px;font-style:italic}
/* 2026-06-14 — The completeness wheel must NEVER appear in the left sidebar
   (Daniel). The 5 tab pages render a .client-ring-portal #ringHost ring in the
   profile card; nuke it (and any stray sidebar ring) here so it can't return.
   The readiness ring still shows in the MAIN frame (Background Info hero, the
   eval generator, the AI-program/eval recommendations). */
.sidebar .client-ring-portal,
aside.sidebar .client-ring-portal,
.sidebar #ringHost,
.sidebar .client-ring-mini,
.sidebar .tc-ring { display: none !important; }
/* 2026-06-14 — Creation/add buttons are green (signal "this creates something").
   Use class "btn-create" on any add/new button. Pairs with the --create token. */
.btn-create{background:var(--create,#16A34A)!important;color:#fff!important;border:none!important}
.btn-create:hover{background:var(--create-dark,#15803D)!important;box-shadow:0 4px 12px rgba(22,163,74,.25)}

/* ── tc-flash-new (2026-06-17, Daniel) — transient "shine/glow" attention cue ──
   When a row is freshly ADDED or EDITED, briefly flash a glow that MATCHES the
   selected left-menu item's highlight (the green --create glow used in profile
   context: `.tc-nav--profile .nav-slide-pill { box-shadow: 0 0 14px <create>… }`)
   then fade to NOTHING over ~1.8s — a pure attention cue that leaves zero
   residual styling (end state is identical to no class).

   One-shot + re-fireable: window.tcFlashNew(el) (tc-helpers.js) adds the class
   and removes it on animationend, so the next add/edit flashes again.

   The optional single-pass "shine" sweep rides a ::after gradient that
   translateX-es across the row once. The row needs position:relative while
   flashing (tcFlashNew sets it temporarily if the element is statically
   positioned, and clears it on animationend). overflow stays visible so the
   glow isn't clipped; the shine pseudo clips itself via its own inset + the
   row's border-radius is inherited where present. */
@keyframes tc-flash {
  0%   { box-shadow: 0 0 0 3px var(--create, #16A34A), 0 0 14px color-mix(in srgb, var(--create, #16A34A) 60%, transparent);
         background-color: color-mix(in srgb, var(--create, #16A34A) 16%, transparent); }
  18%  { box-shadow: 0 0 0 3px var(--create, #16A34A), 0 0 16px color-mix(in srgb, var(--create, #16A34A) 55%, transparent);
         background-color: color-mix(in srgb, var(--create, #16A34A) 14%, transparent); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0), 0 0 0 rgba(22,163,74,0);
         background-color: rgba(22,163,74,0); }
}
@keyframes tc-flash-shine {
  0%   { transform: translateX(-120%); opacity: 0; }
  12%  { opacity: .9; }
  100% { transform: translateX(120%); opacity: 0; }
}
.tc-flash-new {
  animation: tc-flash 1.8s ease-out;
  /* belt-and-suspenders: the animated box-shadow/bg both land on transparent
     at 100%, but forwards is intentionally NOT used so the element snaps back
     to its own base styles the instant the class is removed. */
}
.tc-flash-new::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 45%;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 0%,
    color-mix(in srgb, var(--create, #16A34A) 22%, #fff) 50%, transparent 100%);
  pointer-events: none; z-index: 2;
  animation: tc-flash-shine 1.8s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  /* Respect reduced-motion: keep a brief static tint, drop the sweep. */
  .tc-flash-new { animation: tc-flash 1.8s ease-out; }
  .tc-flash-new::after { display: none; }
}

/* ── AI Plan Designer button (2026-08-27) ──────────────────────────────
   Sits beside "+ Add Program" on the profile's Programs header. Reads as a
   sibling action, not a second primary: outlined in brand blue with the
   spark, so the manual path stays the default and the AI path is the
   deliberate choice. Tokens only (§2.24). */
.btn.btn-ai-plan {
  background: linear-gradient(180deg, var(--surface, #fff) 0%, #F1F7FF 100%);
  border: 1.5px solid var(--teal, #0061D4);
  color: var(--teal, #0061D4);
  font-weight: 800;
}
.btn.btn-ai-plan:hover {
  background: var(--teal, #0061D4);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 97, 212, .24);
}

/* 2026-10-07 (Daniel): side-menu text is pure white for maximum contrast on the
   blue sidebar. Higher specificity than the page-local .nav-item rules some
   pages still carry inline. Icons follow currentColor. */
.sidebar-nav .nav-item, nav.profile-menu .nav-item,
.sidebar-nav .nav-section-label, nav.profile-menu .nav-section-label { color: #fff; }
.sidebar-nav .nav-item svg, nav.profile-menu .nav-item svg { opacity: 1; }