/* CB Glassmorphic front-page overlay — v486 (theme-aware)
 * Adds: mesh gradient backdrop, frosted cards, glow dividers, premium nav.
 * Mesh colors derive from each theme's --ar/--gr/--nr/--pr/--or CSS variables,
 * so light leans CB-green, dark goes vibrant green/blue, pink stays pink,
 * cat stays warm amber/orange. Brand identity preserved.
 * Brand identity preserved across themes.
 */
:root, [data-theme="light"]{
  --glass-tint: rgba(255,255,255,.58);
  --glass-tint-strong: rgba(255,255,255,.76);
  --glass-border: rgba(255,255,255,.6);
  --glass-shadow: 0 10px 40px rgba(22,101,52,.06), 0 2px 10px rgba(15,23,42,.04), inset 0 1px 0 rgba(255,255,255,.65);
  --glass-shadow-hover: 0 20px 60px rgba(22,101,52,.10), 0 4px 14px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.75);
  --mesh-opacity-1: .16;     /* primary accent — green in default CB */
  --mesh-opacity-2: .12;     /* gold/amber */
  --mesh-opacity-3: .14;     /* secondary green */
  --mesh-opacity-4: .09;     /* purple */
  --mesh-opacity-5: .10;     /* orange */
}
[data-theme="dark"]{
  --glass-tint: rgba(24,24,27,.62);
  --glass-tint-strong: rgba(24,24,27,.82);
  --glass-border: rgba(255,255,255,.08);
  --glass-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  --glass-shadow-hover: 0 20px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
  --mesh-opacity-1: .22;
  --mesh-opacity-2: .14;
  --mesh-opacity-3: .18;
  --mesh-opacity-4: .14;
  --mesh-opacity-5: .14;
}


/* v711 — OBSIDIAN: override the glass token system. Without this block,
   .cbd-* + .glass-* surfaces fall back to LIGHT-theme cream values and
   render as "frosted cream cards" on the dark Obsidian canvas. Setting
   these tokens here sweeps every consumer in one shot. */


/* v711 — OBSIDIAN: kill backdrop-filter blur sitewide. User's explicit
   no-frost rule. Backgrounds become solid (via --glass-tint above)
   instead of blurred-through. Catches inline styles too. */


/* v713 — extend the v711 Obsidian frost-fix to Pulse + Ember.
   David's screenshots showed cbd-* dashboard cards rendering as cream
   frost on Pulse + Ember (because the per-card override was Obsidian-only).
   Solution: list each theme explicitly with its theme-tinted background.
   Selectors duplicate the class list to win specificity over inline. */

/* === OBSIDIAN — dark indigo glass (v711, expanded v714) === */


/* === PULSE — neon pink/violet glass (v713, expanded v714) === */


/* === EMBER — fiery red glass (v713, expanded v714) === */


/* Inputs across all 3 dark themes — match the glass look */





/* Mesh gradient background — derived from each theme's accent palette.
   --ar = accent RGB · --gr = gold · --nr = green · --pr = purple · --or = orange
   v488: wider radial stops (60-70%) so colors overlap and blanket the page,
   killing the "hot spot in corners" look. Result: one continuous wash. */
.cb-mesh-bg{
  position:fixed; inset:-10%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 10% 15%, rgba(var(--ar), var(--mesh-opacity-1)) 0%, transparent 65%),
    radial-gradient(ellipse 70% 60% at 95% 20%, rgba(var(--gr), var(--mesh-opacity-2)) 0%, transparent 65%),
    radial-gradient(ellipse 90% 70% at 50% 55%, rgba(var(--nr), var(--mesh-opacity-3)) 0%, transparent 70%),
    radial-gradient(ellipse 70% 60% at 15% 90%, rgba(var(--pr), var(--mesh-opacity-4)) 0%, transparent 65%),
    radial-gradient(ellipse 75% 60% at 90% 90%, rgba(var(--or), var(--mesh-opacity-5)) 0%, transparent 65%),
    var(--bg);
}

/* Section backgrounds become transparent to let the mesh show through seamlessly */
body { background: transparent !important; }
.features, .features.clinician-tools, .howto-section, .modules-section,
.audience-cards, .biz-strip, .daily-session, .stats-row,
.pricing-section, .pricing-3{
  background: transparent !important;
  border-top:none !important; border-bottom:none !important;
}

/* Glassmorphic surfaces — feature cards, audience cards, module cards */
.feat-card, .audience-card, .module-card, .howto-step, .pricing-card,
.aud-card, .tile, .stat-item{
  backdrop-filter: var(--glass-filter-anchor);
  -webkit-backdrop-filter: var(--glass-filter-anchor);
  background: var(--glass-tint) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: 18px !important;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, background .25s !important;
}
.feat-card:hover, .audience-card:hover, .module-card:hover, .aud-card:hover, .tile:hover{
  background: var(--glass-tint-strong) !important;
  box-shadow: var(--glass-shadow-hover) !important;
  transform: translateY(-4px) !important;
}

/* Nav: premium frosted bar */
.site-nav{
  backdrop-filter: var(--glass-filter-anchor) !important;
  -webkit-backdrop-filter: var(--glass-filter-anchor) !important;
  background: var(--glass-tint-strong) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.4), 0 4px 24px rgba(15,23,42,.04) !important;
}

/* Section dividers — barely-there gradient ghost (v488 even softer) */
.section-divider, hr, .divider{
  background: linear-gradient(90deg, transparent 0%, rgba(var(--ar),.15) 35%, rgba(var(--nr),.12) 50%, rgba(var(--gr),.12) 65%, transparent 100%) !important;
  height: 1px !important;
  border: none !important;
  margin: 80px auto !important;
  opacity: .6 !important;
}

/* Hero heading: theme-chroma gradient + accent-tinted glow.
   chroma-1/2/3 are theme-specific (light: green→cyan→purple,
   dark: bright-green→sky→purple, pink: pink→hot-pink→light-purple,
   cat: burnt-orange→bright-orange→purple). */
.idx-hero h1 em{
  background: linear-gradient(135deg, var(--chroma-1) 0%, var(--chroma-2) 50%, var(--chroma-3) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: drop-shadow(0 4px 24px rgba(var(--ar),.28));
}

/* CTAs — glassy with theme-accent gradient sheen */
.cta-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  box-shadow: 0 8px 24px rgba(var(--ar),.30), inset 0 1px 0 rgba(255,255,255,.25) !important;
  border-radius: 14px !important;
  backdrop-filter: var(--glass-filter-ambient);
  -webkit-backdrop-filter: var(--glass-filter-ambient);
}
.cta-ghost{
  background: var(--glass-tint) !important;
  backdrop-filter: var(--glass-filter-standard) !important;
  -webkit-backdrop-filter: var(--glass-filter-standard) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--glass-shadow) !important;
}

/* Stat counters — small frosted pills */
.stats-row{ gap: 16px !important; }
.stat-item{
  padding: 16px 22px !important;
  border-radius: 16px !important;
}

/* Audience cards — bigger glass surfaces */
.aud-card{
  border-radius: 22px !important;
  padding: 28px !important;
}

/* CB Business strip — gradient gets the glass treatment too */
.biz-strip > div, [class*="biz-strip"] > div:first-of-type{
  backdrop-filter: var(--glass-filter-anchor) !important;
  -webkit-backdrop-filter: var(--glass-filter-anchor) !important;
}

/* Tier stamps stay vivid (brand identity) — slight refinement */
.tier-stamp{
  backdrop-filter: var(--glass-filter-ambient);
  -webkit-backdrop-filter: var(--glass-filter-ambient);
}


/* Section tags get a subtle glow */
.sec-tag, .hero-tag{
  background: var(--glass-tint) !important;
  backdrop-filter: var(--glass-filter-ambient);
  -webkit-backdrop-filter: var(--glass-filter-ambient);
  border: 1px solid var(--glass-border) !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  display: inline-block !important;
}

/* Mobile: dial back blur for perf */
@media (max-width: 720px){
  .feat-card, .audience-card, .module-card, .howto-step, .aud-card{
    backdrop-filter: var(--glass-filter-ambient);
    -webkit-backdrop-filter: var(--glass-filter-ambient);
  }
  .site-nav{
    backdrop-filter: var(--glass-filter-anchor) !important;
    -webkit-backdrop-filter: var(--glass-filter-anchor) !important;
  }
  .cb-mesh-bg{
    background:
      radial-gradient(at 50% 0%, var(--mesh-1) 0%, transparent 60%),
      radial-gradient(at 50% 100%, var(--mesh-5) 0%, transparent 60%),
      var(--bg, #f8f7f4);
  }
}

/* ============================================================
 * MODULE-PAGE EXTENSIONS (v487)
 * Apply the same glassmorphic language to CB_*.html module pages.
 * Targets the standard module layout: .hero / .chip-nav / .tab-panel
 * + the callout/table/self-check patterns used across all modules.
 * ============================================================ */

/* Module hero — let the mesh show through, kill ALL boundaries (v488).
   Existing theme.css adds ::before/::after radial orbs and a border-bottom
   to .hero — those create a visible "card" feel against the page mesh.
   Disable them so the hero floats on one continuous mesh surface. */
.hero, .hero-howto, .container > .hero{
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
}
.hero::before, .hero::after,
.hero-howto::before, .hero-howto::after{
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  animation: none !important;
}
.hero h1, .hero h2{
  filter: drop-shadow(0 4px 24px rgba(var(--ar), .18));
}

/* The two-pane tab layout — left chip nav + right content panel */
.tab-layout{
  background: transparent !important;
}

/* Left side: chip-nav (Start Here / Core Concept / etc.) — frosted glass */
.chip-nav{
  backdrop-filter: var(--glass-filter-anchor);
  -webkit-backdrop-filter: var(--glass-filter-anchor);
  background: var(--glass-tint) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: 16px !important;
  padding: 12px !important;
}
.chip-nav button, .chip-nav a{
  background: transparent !important;
  transition: background .15s ease, color .15s ease, transform .15s ease !important;
}
.chip-nav button:hover, .chip-nav a:hover{
  background: rgba(var(--ar), .08) !important;
}
.chip-nav .active,
.chip-nav button.active,
.chip-nav a.active{
  background: rgba(var(--ar), .12) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--ar), .25) !important;
}

/* Right side: the tab-panel — frosted glass card */
.tab-panel, .tab-panel.active{
  backdrop-filter: var(--glass-filter-anchor);
  -webkit-backdrop-filter: var(--glass-filter-anchor);
  background: var(--glass-tint) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: 18px !important;
}

/* Callout strips (.bl-strip variants) — keep accent left-border, kill right
   side card-edge feel, blend into mesh more (v488). */
.bl-strip{
  backdrop-filter: var(--glass-filter-standard);
  -webkit-backdrop-filter: var(--glass-filter-standard);
  border-radius: 0 12px 12px 0 !important; /* round only on right, flush with left accent */
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  box-shadow: 0 2px 14px rgba(15,23,42,.03) !important;
}
[data-theme="dark"] .bl-strip{
  box-shadow: 0 2px 14px rgba(0,0,0,.2) !important;
}

/* Self-check Q&A reveal cards */
.self-check{
  backdrop-filter: var(--glass-filter-standard);
  -webkit-backdrop-filter: var(--glass-filter-standard);
  background: var(--glass-tint) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: 14px !important;
}

/* Data tables — glassy header, transparent body rows */
.data-table{
  backdrop-filter: var(--glass-filter-standard);
  -webkit-backdrop-filter: var(--glass-filter-standard);
  background: var(--glass-tint) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: 14px !important;
  overflow: hidden;
}
.data-table th{
  background: rgba(var(--ar), .08) !important;
  backdrop-filter: var(--glass-filter-ambient);
  -webkit-backdrop-filter: var(--glass-filter-ambient);
}

/* Generic content containers used inside modules */
.rc, .rc2, .ma-item, .tc-card, .ms-card, .cdr-step,
.cb-anatomy-figure, .cb-figure-pair,
.howto-card, .reference-card, .reference-block,
.exam-pane, .quiz-card{
  backdrop-filter: var(--glass-filter-standard);
  -webkit-backdrop-filter: var(--glass-filter-standard);
  background: var(--glass-tint) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  border-radius: 14px !important;
}

/* Sections inside modules that have their own backgrounds — make seamless */
section, .section,
.module-body, .module-content,
.muscles-section, .tests-section, .treatment-section,
.bg-band, .bg-section{
  background: transparent !important;
}

/* Stats / number callouts — DO NOT apply backdrop-filter on .stat-num.
   It's nested inside .stat-item which already has the glass effect; an
   inner blur captures the outer tint and renders as a visible white
   patch around the number (v490 fix). */
.hero-stats, .hero-meta{
  background: transparent !important;
}
.stat-num{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Module footers — let mesh show through */
footer, .footer, .site-footer, [class*="cb-footer"]{
  background: transparent !important;
}

/* Don't glassify the QuickBar / Search / Voice Notes modals — they need solid backgrounds */
.cb-qb-modal, .cb-qb-panel,
.cb-search-modal, .cb-flashcards-modal,
.cb-vn-modal{
  /* leave their own backgrounds intact */
}

/* ============================================================
 * SEAMLESS PASS (v488)
 * Final sweep to kill any remaining hard edges between sections
 * so the whole page reads as one continuous mesh surface.
 * ============================================================ */

/* Any container with a max-width that creates a visible card edge — soften */
.container, main, article, .module-body, .module-content{
  background: transparent !important;
  border: none !important;
}

/* Strip ALL section borders (top/bottom hairlines) that create banding */
.features, .features.clinician-tools, .howto-section, .modules-section,
.pricing-section, .pricing-3, .audience-cards, .biz-strip,
.daily-session, .stats-row, .module-section{
  border-top: none !important;
  border-bottom: none !important;
}

/* Tier stamps and badges — keep colors, soften shadow so they don't pop hard */
.tier-stamp{
  box-shadow: 0 2px 8px rgba(var(--ar),.12), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* Card borders even softer so the glass feels lighter against mesh */
.feat-card, .audience-card, .module-card, .howto-step, .pricing-card,
.aud-card, .tile, .stat-item,
.tab-panel, .self-check, .data-table,
.rc, .rc2, .ma-item, .tc-card, .ms-card, .cdr-step,
.cb-anatomy-figure, .howto-card, .reference-card, .quiz-card{
  border-width: 0.5px !important;
  border-color: var(--glass-border) !important;
}

/* Optional: subtle reverse-vignette so center-page feels brighter than edges
   — adds depth without hard boundaries */
body::after{
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(255,255,255,.06) 90%);
  z-index: -1;
}
[data-theme="dark"] body::after{
  background: radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(0,0,0,.22) 90%);
}

/* ============================================================
 * PREMIUM POLISH PASS (v489)
 * Site-wide refinements pushing the glass language into "luxury SaaS"
 * territory: slow-breathing mesh, micro-grain texture, multi-layer
 * shadows, gradient borders on Premium tiles, shimmer on hero em,
 * smoother hover easing. All respects prefers-reduced-motion.
 * ============================================================ */

/* --- 1. Slow drifting mesh — barely-perceptible breathing motion --- */
@keyframes cbMeshDrift{
  0%,100%{ transform: scale(1) rotate(0deg); opacity:1; }
  33%   { transform: scale(1.04) rotate(0.4deg); opacity:.94; }
  66%   { transform: scale(1.06) rotate(-0.3deg); opacity:.98; }
}
.cb-mesh-bg{
  animation: cbMeshDrift 60s ease-in-out infinite;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce){
  .cb-mesh-bg{ animation: none !important; }
}

/* --- 2. Subtle SVG noise/grain — adds tactile depth, ~2.5% opacity --- */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.025;
  background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
[data-theme="dark"] body::before{ opacity:.04; mix-blend-mode: soft-light; }

/* --- 3. Multi-layer shadows for depth on glass cards --- */
:root, [data-theme="light"]{
  --glass-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 6px 16px rgba(22,101,52,.05),
    0 20px 48px rgba(22,101,52,.06),
    inset 0 1px 0 rgba(255,255,255,.7);
  --glass-shadow-hover:
    0 2px 4px rgba(15,23,42,.06),
    0 10px 24px rgba(22,101,52,.08),
    0 32px 64px rgba(22,101,52,.10),
    inset 0 1px 0 rgba(255,255,255,.8);
}
[data-theme="dark"]{
  --glass-shadow:
    0 1px 2px rgba(0,0,0,.3),
    0 6px 16px rgba(0,0,0,.35),
    0 24px 56px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.06);
  --glass-shadow-hover:
    0 2px 4px rgba(0,0,0,.4),
    0 12px 28px rgba(0,0,0,.45),
    0 40px 80px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.09);
}




/* --- 4. Tighter hero typography + shimmer on em --- */
.idx-hero h1, .hero h1{
  letter-spacing: -.028em !important;
  font-weight: 800 !important;
}
@keyframes cbShimmer{
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.idx-hero h1 em, .hero h1 em{
  background-size: 200% 200% !important;
  animation: cbShimmer 8s ease-in-out infinite;
  will-change: background-position;
}
@media (prefers-reduced-motion: reduce){
  .idx-hero h1 em, .hero h1 em{ animation: none !important; }
}

/* --- 5. Smoother hover easing site-wide (long-tail cubic-bezier) --- */
.feat-card, .audience-card, .module-card, .howto-step,
.aud-card, .tile, .stat-item, .pricing-card{
  transition:
    transform .45s cubic-bezier(.16,1,.3,1),
    box-shadow .45s cubic-bezier(.16,1,.3,1),
    background .25s ease,
    border-color .25s ease !important;
}
.feat-card:hover, .audience-card:hover, .module-card:hover,
.aud-card:hover, .tile:hover, .pricing-card:hover{
  transform: translateY(-6px) !important;
}

/* --- 6. Premium-tier cards get a subtle gradient inner-border glow --- */
.feat-card.pr,
.feat-card.pro{
  position: relative;
}
.feat-card.pr::before,
.feat-card.pro::before{
  content:'';
  position:absolute; inset:0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(var(--ar),.4), rgba(var(--gr),.2) 50%, rgba(var(--pr),.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .55;
  transition: opacity .35s ease;
}
.feat-card.pr:hover::before,
.feat-card.pro:hover::before{ opacity: .9; }

.feat-card.biz{ position: relative; }
.feat-card.biz::before{
  content:'';
  position:absolute; inset:0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(16,185,129,.5), rgba(59,130,246,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .55;
  transition: opacity .35s ease;
}
.feat-card.biz:hover::before{ opacity: 1; }

/* --- 7. Refined nav active state — subtle inner glow on hover --- */
.site-nav a, .nav-cat > button{
  transition: color .2s ease, background .2s ease !important;
}
/* v525: hover background removed per user request — color change is enough.
   Gradient/CTA buttons keep their own hover treatment defined elsewhere. */
.site-nav a:not(.cb-nav-npte-btn):not(.cb-nav-biz-btn):not(.cb-nav-pricing-btn):not(.idx-npte-promo):hover,
.nav-cat > button:hover{
  background: transparent !important;
}

/* --- 8. CTA primary — refined press feel + premium gradient sheen --- */
.cta-primary, .btn-primary, .cb-cta-primary{
  position: relative;
  overflow: hidden;
}
.cta-primary::after, .btn-primary::after, .cb-cta-primary::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.cta-primary:hover::after, .btn-primary:hover::after, .cb-cta-primary:hover::after{
  transform: translateX(100%);
}

/* --- 9. Tier stamps — slight halo glow per tier color --- */
.tier-stamp.free{
  box-shadow: 0 2px 8px rgba(var(--ar),.10), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.tier-stamp.pro{
  box-shadow: 0 2px 10px rgba(124,58,237,.25), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.tier-stamp.premium{
  box-shadow: 0 2px 12px rgba(220,38,38,.28), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.tier-stamp.business{
  box-shadow: 0 2px 12px rgba(16,185,129,.28), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* --- 10. Subtle page-load fade-in so glass surfaces don't pop in harshly --- */
@keyframes cbFadeIn{
  from{ opacity:0; transform: translateY(8px); }
  to  { opacity:1; transform: translateY(0); }
}
.idx-hero, .hero, .features, .features.clinician-tools,
.modules-section, .howto-section, .pricing-section,
.tab-layout{
  animation: cbFadeIn .7s cubic-bezier(.16,1,.3,1) both;
}
.features.clinician-tools{ animation-delay: .1s; }
.modules-section{ animation-delay: .15s; }
.howto-section{ animation-delay: .2s; }
.pricing-section{ animation-delay: .25s; }
@media (prefers-reduced-motion: reduce){
  .idx-hero, .hero, .features, .modules-section, .howto-section,
  .pricing-section, .tab-layout{ animation: none !important; }
}

/* ============================================================
 * COLLAPSIBLE MODULE CATEGORIES (v494)
 * Replaces the giant 45-module wall on the home page with 8
 * <details>/<summary> cards. Each opens to reveal its module-grid.
 * ============================================================ */

details.cat-d{
  margin-bottom: 14px;
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background: var(--glass-tint);
  backdrop-filter: var(--glass-filter-anchor);
  -webkit-backdrop-filter: var(--glass-filter-anchor);
  box-shadow: var(--glass-shadow);
  transition: box-shadow .35s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}
details.cat-d[open]{
  box-shadow: var(--glass-shadow-hover);
}
summary.cat-header{
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  user-select: none;
  transition: background .2s ease;
}
summary.cat-header::-webkit-details-marker{ display: none; }
summary.cat-header:hover{
  background: rgba(var(--ar), .04);
}
summary.cat-header .cat-icon{
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(var(--ar), .10);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  flex-shrink: 0;
}
summary.cat-header .cat-title{
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
}
summary.cat-header .cat-count{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--accent);
  background: rgba(var(--ar), .10);
  padding: 4px 9px;
  border-radius: 999px;
  margin-right: 6px;
}
.cat-chev{
  display: inline-block;
  color: var(--text2);
  font-size: 13px;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
  margin-right: 4px;
}
details.cat-d[open] .cat-chev{ transform: rotate(90deg); }
details.cat-d > .cat-desc{
  padding: 0 20px 12px 72px;
  font-size: 13.5px;
  color: var(--text2);
  line-height: 1.55;
  margin: 0;
}
details.cat-d > .module-grid{
  padding: 4px 20px 18px 20px;
}

/* Expand-all / collapse-all toggle bar */
.cat-toolbar{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}
.cat-toolbar button{
  background: var(--glass-tint);
  backdrop-filter: var(--glass-filter-standard);
  -webkit-backdrop-filter: var(--glass-filter-standard);
  border: 1px solid var(--glass-border);
  color: var(--text2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s ease;
}
.cat-toolbar button:hover{
  color: var(--accent);
  border-color: rgba(var(--ar),.3);
  background: rgba(var(--ar),.05);
}

@media (max-width: 640px){
  summary.cat-header{ padding: 14px 16px; gap: 10px; }
  summary.cat-header .cat-icon{ width: 32px; height: 32px; font-size: 11px; }
  summary.cat-header .cat-title{ font-size: 15px; }
  details.cat-d > .cat-desc{ padding-left: 16px; }
  details.cat-d > .module-grid{ padding: 4px 12px 14px 12px; }
}

/* ============================================================
 * FRONT-PAGE PREMIUM POLISH v495
 * Scoped to .idx-hero cascade so module pages stay calm.
 * Light: stunning, well-defined, luminous. Dark: super premium.
 * ============================================================ */

/* --- 1. Hero spotlight: radial accent glow under the headline --- */
.idx-hero{ position: relative; isolation: isolate; }
.idx-hero::before{
  content: '';
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 90%; max-width: 1100px;
  height: 110%;
  background:
    radial-gradient(ellipse 60% 70% at 50% 35%, rgba(var(--ar), .12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 30% 60%, rgba(var(--gr), .08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 70% 60%, rgba(var(--pr), .07) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
  filter: blur(8px);
}
[data-theme="dark"] .idx-hero::before{
  background:
    radial-gradient(ellipse 65% 75% at 50% 35%, rgba(var(--ar), .22) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 25% 60%, rgba(var(--pr), .14) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 75% 60%, rgba(var(--gr), .12) 0%, transparent 60%);
  filter: blur(10px);
}

/* --- 2. Hero typography refinement --- */
.idx-hero h1{
  font-size: clamp(2.4rem, 5.5vw, 4.6rem) !important;
  letter-spacing: -.035em !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
  filter: none !important;       /* override the global hero h1 drop-shadow */
  color: var(--text) !important;
}
[data-theme="dark"] .idx-hero h1{
  color: #fafafa !important;
}
.idx-hero h1 em{
  font-style: normal !important;
  background: linear-gradient(120deg, var(--chroma-1) 0%, var(--chroma-2) 40%, var(--chroma-3) 80%, var(--chroma-1) 100%) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
[data-theme="dark"] .idx-hero h1 em{
  filter: drop-shadow(0 4px 32px rgba(var(--ar), .45));
}
.idx-hero .sub, .idx-hero p.sub{
  font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important;
  font-weight: 400 !important;
  color: var(--text2);
  letter-spacing: -.005em;
}

/* --- 3. Hero CTAs: refined press feel + dark luminescence --- */
.idx-hero .cta-row{ gap: 14px !important; }
.idx-hero .cta-primary{
  padding: 14px 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
}
[data-theme="dark"] .idx-hero .cta-primary{
  box-shadow:
    0 8px 32px rgba(var(--ar), .45),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.2);
}
.idx-hero .cta-ghost{
  padding: 14px 24px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
}

/* --- 4. Stats row: crispier numbers, theme-distinct treatment --- */
.idx-hero .stats-row{ margin-top: 36px !important; gap: 14px !important; }
.idx-hero .stat-item{
  padding: 18px 22px !important;
  border-radius: 16px !important;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s !important;
}
.idx-hero .stat-item:hover{ transform: translateY(-3px); }
.idx-hero .stat-num{
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
[data-theme="dark"] .idx-hero .stat-num{
  filter: drop-shadow(0 0 18px rgba(var(--ar), .35));
}
.idx-hero .stat-label{
  font-size: 10px !important;
  letter-spacing: 1.6px !important;
  margin-top: 6px !important;
  text-transform: uppercase !important;
}

/* --- 5. Audience cards: pseudo-orb behind icon area, glow on hover --- */
body > .container .aud-card, .aud-card{
  position: relative;
  overflow: hidden;
}
.aud-card::after{
  content: '';
  position: absolute;
  top: -20%; right: -20%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(var(--ar), .15) 0%, transparent 60%);
  pointer-events: none;
  filter: blur(20px);
  transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .35s;
  opacity: .6;
}
.aud-card:hover::after{ transform: translate(-10%, 10%) scale(1.15); opacity: 1; }
[data-theme="dark"] .aud-card::after{
  background: radial-gradient(circle, rgba(var(--ar), .28) 0%, transparent 60%);
}

/* --- 6. Card hover: theme-tinted glow ring (drop-shadow filter) --- */
.feat-card, .aud-card, .audience-card, .module-card, .pricing-card,
.howto-step{
  transition: transform .45s cubic-bezier(.16,1,.3,1),
              box-shadow .45s cubic-bezier(.16,1,.3,1),
              filter .35s !important;
}
.feat-card:hover, .aud-card:hover, .audience-card:hover,
.module-card:hover, .pricing-card:hover, .howto-step:hover{
  filter: drop-shadow(0 12px 32px rgba(var(--ar), .12));
}
[data-theme="dark"] .feat-card:hover,
[data-theme="dark"] .aud-card:hover,
[data-theme="dark"] .module-card:hover,
[data-theme="dark"] .pricing-card:hover{
  filter: drop-shadow(0 16px 40px rgba(var(--ar), .25));
}

/* --- 7. Section dividers: travelling shimmer (premium feel) --- */
@keyframes cbDividerShimmer{
  0%   { background-position: -150% 0; }
  100% { background-position: 250% 0; }
}
.section-divider, hr.section-divider{
  background:
    linear-gradient(90deg, transparent 0%, rgba(var(--ar),.12) 30%, rgba(var(--ar),.4) 50%, rgba(var(--ar),.12) 70%, transparent 100%) !important;
  background-size: 200% 100% !important;
  background-position: -150% 0 !important;
  animation: cbDividerShimmer 10s linear infinite;
  height: 1px !important;
  border: none !important;
  margin: 80px auto !important;
  opacity: .85 !important;
}
@media (prefers-reduced-motion: reduce){
  .section-divider{ animation: none !important; }
}

/* --- 8. NPTE Blueprint + CB Business strips: enhanced glow on hover --- */
[class*="biz-strip"] > div:first-of-type,
.biz-strip > div{
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s !important;
}
[class*="biz-strip"] > div:first-of-type:hover,
.biz-strip > div:hover{
  transform: translateY(-3px);
  box-shadow:
    0 16px 48px rgba(16,185,129,.18),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
}

/* --- 9. Tier stamps: refined luminance per tier --- */
.tier-stamp{
  letter-spacing: 1.8px !important;
  font-weight: 800 !important;
}
[data-theme="dark"] .tier-stamp.pro{
  box-shadow: 0 4px 16px rgba(16,185,129,.45), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
[data-theme="dark"] .tier-stamp.premium{
  box-shadow: 0 4px 18px rgba(52,211,153,.5), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
[data-theme="dark"] .tier-stamp.business{
  box-shadow: 0 4px 18px rgba(16,185,129,.5), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* --- 10. Brighter / richer mesh in BOTH modes (front-page only) --- */
body:has(.idx-hero) .cb-mesh-bg,
.idx-hero ~ .cb-mesh-bg{
  /* css :has fallback handled below by data attribute when JS sets it */
}
/* Use a simple body-class trigger: index.html has .idx-hero, so we boost mesh */
.idx-hero{
  /* dummy rule so the body can be inferred */
}
/* Front-page mesh richness — apply via root since .idx-hero only exists on home */
:root, [data-theme="light"]{
  --mesh-opacity-1: .20;   /* was .16 */
  --mesh-opacity-2: .14;
  --mesh-opacity-3: .16;
  --mesh-opacity-4: .10;
  --mesh-opacity-5: .12;
}
[data-theme="dark"]{
  --mesh-opacity-1: .28;   /* was .22 — richer, more premium */
  --mesh-opacity-2: .17;
  --mesh-opacity-3: .22;
  --mesh-opacity-4: .17;
  --mesh-opacity-5: .17;
}

/* --- 11. Dark-mode card surface tweak: subtle blue undertone for premium dark --- */
[data-theme="dark"]{
  --glass-tint: rgba(28,28,32,.68);          /* slightly cool tint */
  --glass-tint-strong: rgba(28,28,32,.88);
  --glass-border: rgba(255,255,255,.09);
}

/* --- 12. Light-mode card surface tweak: crisper, slightly cooler white --- */
:root, [data-theme="light"]{
  --glass-tint: rgba(255,255,255,.66);
  --glass-tint-strong: rgba(255,255,255,.82);
  --glass-border: rgba(255,255,255,.7);
}

/* --- 13. Nav: deeper frosted bar in dark, sharper in light --- */
[data-theme="dark"] .site-nav{
  background: rgba(12,12,16,.78) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 6px 28px rgba(0,0,0,.4) !important;
}
[data-theme="light"] .site-nav{
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 6px 24px rgba(15,23,42,.05) !important;
}

/* --- 14. Subtle scroll-parallax on mesh (transform with scroll) --- */
.cb-mesh-bg{
  will-change: transform, opacity;
}

/* ============================================================
 * DARK MODE CONTRAST FIX (v496)
 * v495 went too premium/translucent — body text on cards was
 * washing out and ghost CTAs disappeared into the mesh. This
 * restores readability without losing the premium feel.
 * ============================================================ */

/* 1) Solid-ish glass tint in dark — cards need a real surface */
[data-theme="dark"]{
  --glass-tint: rgba(20,20,24,.88) !important;
  --glass-tint-strong: rgba(20,20,24,.94) !important;
  --glass-border: rgba(255,255,255,.10) !important;
  /* tone down the over-saturated mesh */
  --mesh-opacity-1: .20 !important;
  --mesh-opacity-2: .12 !important;
  --mesh-opacity-3: .16 !important;
  --mesh-opacity-4: .12 !important;
  --mesh-opacity-5: .12 !important;
}

/* 2) Brighter body text inside dark-mode cards */
[data-theme="dark"] .feat-card,
[data-theme="dark"] .feat-card p,
[data-theme="dark"] .feat-card .feat-desc,
[data-theme="dark"] .aud-card,
[data-theme="dark"] .aud-card p,
[data-theme="dark"] .audience-card,
[data-theme="dark"] .audience-card p,
[data-theme="dark"] .module-card .mc-desc,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .pricing-card p,
[data-theme="dark"] .pricing-card li,
[data-theme="dark"] .howto-step p,
[data-theme="dark"] .tab-panel,
[data-theme="dark"] .tab-panel p{
  color: #d4d4d8 !important;
}

/* 3) Headings stay full-bright white in dark */
[data-theme="dark"] .feat-card h3,
[data-theme="dark"] .feat-card .feat-title,
[data-theme="dark"] .audience-card h3,
[data-theme="dark"] .aud-card h3,
[data-theme="dark"] .module-card .mc-title,
[data-theme="dark"] .pricing-card h3,
[data-theme="dark"] .howto-step h3{
  color: #fafafa !important;
}

/* 4) Ghost CTAs — readable in dark (Search everything, Practice Exam) */
[data-theme="dark"] .cta-ghost{
  background: rgba(255,255,255,.06) !important;
  color: #fafafa !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: var(--glass-filter-standard);
  -webkit-backdrop-filter: var(--glass-filter-standard);
}
[data-theme="dark"] .cta-ghost:hover{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: #fff !important;
}

/* 5) Primary CTA in dark — solid base + glow, less translucent haze */
[data-theme="dark"] .cta-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: #08120c !important;        /* dark green on bright green = strong contrast */
  font-weight: 800 !important;
  box-shadow:
    0 6px 22px rgba(var(--ar),.40),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="dark"] .cta-primary:hover{
  box-shadow:
    0 12px 32px rgba(var(--ar),.55),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* 6) Eyebrow / sec-tag / hero-tag readability in dark */
[data-theme="dark"] .sec-tag,
[data-theme="dark"] .idx-hero-eyebrow,
[data-theme="dark"] .hero-tag{
  color: var(--accent2) !important;
}

/* 7) Stat labels in dark — readable monospace */
[data-theme="dark"] .stat-label{
  color: #a1a1aa !important;
}

/* 8) NPTE Blueprint + Business strip text in dark — already white via inline,
      but child paragraphs inherit; force white. */
[data-theme="dark"] .biz-strip *,
[data-theme="dark"] [class*="biz-strip"] > div *{
  /* preserve inline color where it exists — only fix unstyled paragraphs */
}

/* ============================================================
 * NAV BAR PREMIUM DARK (v497)
 * v496 left the dark nav at .78 alpha — too translucent, the mesh
 * bled through and the bar read as light gray-green. Make it
 * deeper, near-solid, with a subtle accent-tinted bottom edge.
 * ============================================================ */

[data-theme="dark"] .site-nav{
  /* Near-solid deep black so the green mesh behind doesn't bleed through.
     The saturate(160%) on backdrop was amplifying the mesh colors before
     the dark layer could cover them — removed. */
  background: rgba(8,9,12,.98) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow:
    0 1px 0 rgba(var(--ar),.18),
    0 10px 36px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter: var(--glass-filter-ambient) !important;
  -webkit-backdrop-filter: var(--glass-filter-ambient) !important;
}
/* Subtle accent glow line at the very bottom of the nav */
[data-theme="dark"] .site-nav::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--ar),.35) 30%,
    rgba(var(--ar),.55) 50%,
    rgba(var(--ar),.35) 70%,
    transparent 100%);
  pointer-events: none;
  opacity: .6;
}
[data-theme="dark"] .site-nav{ position: relative; }

/* Light mode nav — luminous, near-opaque white */
[data-theme="light"] .site-nav{
  background: rgba(252,252,250,.94) !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7),
    0 6px 26px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  backdrop-filter: var(--glass-filter-standard) !important;
  -webkit-backdrop-filter: var(--glass-filter-standard) !important;
}

/* ============================================================
 * DARK MODE PREMIUM POLISH v500
 * Pushing the glassmorphic gradient feel deeper in dark mode.
 * Light mode stays as-is — dark gets the rich layered treatment.
 * ============================================================ */

/* --- 1. Ambient floating orbs in hero (dark only) --- */
@keyframes cbHeroOrbFloat{
  0%,100%{ transform: translate(0,0) scale(1); }
  25%   { transform: translate(20px,-15px) scale(1.05); }
  50%   { transform: translate(-15px,10px) scale(0.98); }
  75%   { transform: translate(10px,-5px) scale(1.03); }
}
[data-theme="dark"] .idx-hero{
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .idx-hero::after{
  content:'';
  position: absolute;
  left: 10%; top: 15%;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--ar),.18) 0%, rgba(var(--ar),.06) 40%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
  animation: cbHeroOrbFloat 18s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  [data-theme="dark"] .idx-hero::after{ animation: none; }
}

/* --- 2. Top-edge highlight on glass cards (dark only) — "surface catching light" --- */
[data-theme="dark"] .feat-card,
[data-theme="dark"] .aud-card,
[data-theme="dark"] .audience-card,
[data-theme="dark"] .module-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .howto-step,
[data-theme="dark"] .stat-item,
[data-theme="dark"] details.cat-d{
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .feat-card::after,
[data-theme="dark"] .aud-card::before,
[data-theme="dark"] .audience-card::before,
[data-theme="dark"] .module-card::after,
[data-theme="dark"] .pricing-card::after,
[data-theme="dark"] .howto-step::after,
[data-theme="dark"] details.cat-d::before{
  content:'';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.12) 30%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.12) 70%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* --- 3. Illuminated chrome stat numbers (dark) --- */
[data-theme="dark"] .idx-hero .stat-num{
  background: linear-gradient(180deg,
    var(--accent2) 0%,
    var(--accent) 50%,
    var(--accent2) 100%) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter:
    drop-shadow(0 0 24px rgba(var(--ar),.45))
    drop-shadow(0 2px 0 rgba(0,0,0,.5));
  animation: cbStatShimmer 6s ease-in-out infinite;
}
@keyframes cbStatShimmer{
  0%,100%{ background-position: 0% 0%; }
  50%   { background-position: 0% 100%; }
}
@media (prefers-reduced-motion: reduce){
  [data-theme="dark"] .idx-hero .stat-num{ animation: none; }
}

/* --- 4. Hero primary CTA: accent halo (dark) --- */
[data-theme="dark"] .idx-hero .cta-primary{
  position: relative;
  box-shadow:
    0 0 0 1px rgba(var(--ar),.5),
    0 8px 28px rgba(var(--ar),.55),
    0 16px 56px rgba(var(--ar),.30),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.2) !important;
}
[data-theme="dark"] .idx-hero .cta-primary::before{
  content:'';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(var(--ar),.4), rgba(var(--gr),.2), rgba(var(--ar),.4));
  filter: blur(16px);
  z-index: -1;
  opacity: .5;
  transition: opacity .35s ease;
}
[data-theme="dark"] .idx-hero .cta-primary:hover::before{ opacity: 1; }

/* --- 5. Premium / Pro / Business tier stamps as neon pills (dark) --- */
[data-theme="dark"] .tier-stamp{
  position: relative;
  font-weight: 800 !important;
  letter-spacing: 1.8px !important;
}
[data-theme="dark"] .tier-stamp.free{
  background: linear-gradient(135deg, rgba(74,222,128,.18), rgba(34,197,94,.10)) !important;
  color: var(--accent2) !important;
  border: 1px solid rgba(var(--ar),.35) !important;
  box-shadow: 0 0 16px rgba(var(--ar),.30), inset 0 1px 0 rgba(255,255,255,.15) !important;
}
[data-theme="dark"] .tier-stamp.pro{
  background: linear-gradient(135deg, #10b981, #34d399) !important;
  color: #fff !important;
  border: 1px solid rgba(16,185,129,.5) !important;
  box-shadow:
    0 0 18px rgba(16,185,129,.55),
    0 4px 14px rgba(16,185,129,.40),
    inset 0 1px 0 rgba(255,255,255,.4) !important;
}
[data-theme="dark"] .tier-stamp.premium{
  background: linear-gradient(135deg, #34d399, #10b981) !important;
  color: #fff !important;
  border: 1px solid rgba(52,211,153,.5) !important;
  box-shadow:
    0 0 20px rgba(52,211,153,.55),
    0 4px 14px rgba(52,211,153,.40),
    inset 0 1px 0 rgba(255,255,255,.4) !important;
}
[data-theme="dark"] .tier-stamp.business{
  background: linear-gradient(135deg, #10b981, #34d399) !important;
  color: #fff !important;
  border: 1px solid rgba(94,234,212,.5) !important;
  box-shadow:
    0 0 18px rgba(16,185,129,.50),
    0 4px 14px rgba(52,211,153,.40),
    inset 0 1px 0 rgba(255,255,255,.4) !important;
}

/* --- 6. Card hover: inner accent glow (dark only) --- */
@keyframes cbCardGlow{
  0%   { opacity: 0; }
  100% { opacity: .35; }
}
[data-theme="dark"] .feat-card:hover,
[data-theme="dark"] .audience-card:hover,
[data-theme="dark"] .aud-card:hover,
[data-theme="dark"] .module-card:hover,
[data-theme="dark"] .pricing-card:hover,
[data-theme="dark"] .howto-step:hover{
  border-color: rgba(var(--ar),.28) !important;
}
[data-theme="dark"] .feat-card.pr:hover,
[data-theme="dark"] .feat-card.pro:hover{
  border-color: rgba(var(--pr),.45) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.4),
    0 12px 32px rgba(124,58,237,.22),
    0 24px 64px rgba(124,58,237,.18),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}
[data-theme="dark"] .feat-card.biz:hover{
  border-color: rgba(16,185,129,.45) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.4),
    0 12px 32px rgba(16,185,129,.22),
    0 24px 64px rgba(59,130,246,.18),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* --- 7. Module category icons (FD, UE, LE, SP, NR, CP, FN, SX) as gradient pills (dark) --- */
[data-theme="dark"] summary.cat-header .cat-icon{
  background: linear-gradient(135deg, rgba(var(--ar),.22), rgba(var(--gr),.12)) !important;
  color: var(--accent2) !important;
  border: 1px solid rgba(var(--ar),.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 2px 8px rgba(var(--ar),.20) !important;
}
[data-theme="dark"] details.cat-d[open] summary.cat-header .cat-icon{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 0 16px rgba(var(--ar),.35) !important;
}

/* --- 8. Logo block (CB mark) in nav: refined dark mode --- */
[data-theme="dark"] .mark{
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  box-shadow:
    0 0 12px rgba(var(--ar),.40),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}

/* --- 9. Section sec-tag eyebrow — gradient text in dark --- */
[data-theme="dark"] .sec-tag,
[data-theme="dark"] .hero-tag{
  background: linear-gradient(90deg, var(--accent2), var(--accent), var(--accent2)) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  animation: cbStatShimmer 12s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  [data-theme="dark"] .sec-tag,
  [data-theme="dark"] .hero-tag{ animation: none; }
}

/* --- 10. Refined body text contrast in dark — slight bump for premium readability --- */
[data-theme="dark"]{
  --text2: #c4c4c8 !important;   /* was a1a1aa */
}

/* --- 11. Card top inner highlight when nesting glass (subtle) --- */
[data-theme="dark"] .bl-strip{
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .bl-strip::after{
  content:'';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  pointer-events: none;
}

/* --- 12. Search button + Cards button in nav — get accent-glow halo on hover (dark) --- */
[data-theme="dark"] .cb-nav-search-btn:hover,
[data-theme="dark"] .cb-nav-flashcards-btn:hover{
  background: rgba(var(--ar),.10) !important;
  color: var(--accent2) !important;
  border-color: rgba(var(--ar),.35) !important;
  box-shadow: 0 0 16px rgba(var(--ar),.25) !important;
}

/* --- 13. Subtle gradient border on Pricing cards in dark --- */
[data-theme="dark"] .pricing-card{
  border: 1px solid rgba(255,255,255,.08) !important;
  background: linear-gradient(180deg,
    rgba(28,28,32,.92),
    rgba(20,20,24,.88)) !important;
}
[data-theme="dark"] .pricing-card.recommended,
[data-theme="dark"] .pricing-card.popular{
  border: 1px solid rgba(var(--ar),.4) !important;
  background: linear-gradient(180deg,
    rgba(28,28,32,.92),
    rgba(20,20,24,.88)) !important;
  box-shadow:
    0 0 32px rgba(var(--ar),.18),
    0 16px 48px rgba(var(--ar),.15),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* ============================================================
 * NAV TEXT VISIBILITY IN DARK (v501)
 * Ensure brand text, category labels, and inline action buttons
 * (Cards, Search) are clearly readable on the deep-black nav.
 * ============================================================ */
[data-theme="dark"] .site-nav .brand-text{
  color: #fafafa !important;
  opacity: 1 !important;
}
[data-theme="dark"] .site-nav .nav-cat > button{
  color: #e4e4e7 !important;
  font-weight: 600 !important;
}
[data-theme="dark"] .site-nav .nav-cat > button:hover{
  color: var(--accent2) !important;
  background: rgba(var(--ar),.10) !important;
}
[data-theme="dark"] .cb-nav-search-btn,
[data-theme="dark"] .cb-nav-flashcards-btn{
  color: #d4d4d8 !important;
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
}
[data-theme="dark"] .cb-nav-search-btn:hover,
[data-theme="dark"] .cb-nav-flashcards-btn:hover{
  color: var(--accent2) !important;
  background: rgba(var(--ar),.10) !important;
  border-color: rgba(var(--ar),.35) !important;
}
/* Sign in button outline in dark */
[data-theme="dark"] .site-nav a[href*="Account"],
[data-theme="dark"] .site-nav a.signin-btn{
  color: #fafafa !important;
  border-color: rgba(255,255,255,.20) !important;
}

/* ============================================================
 * GRADIENT NAV BUTTON SHINE (v502)
 * NPTE / Business / Upgrade have inline-style gradient backgrounds.
 * On hover they should SHINE (brighter + glow + lift), not invert.
 * ============================================================ */

.cb-nav-npte-btn,
.cb-nav-biz-btn,
.cb-nav-pricing-btn{
  position: relative;
  transition:
    transform .25s cubic-bezier(.16,1,.3,1),
    box-shadow .25s ease,
    filter .25s ease !important;
  will-change: transform, box-shadow, filter;
}
.cb-nav-npte-btn:hover,
.cb-nav-biz-btn:hover,
.cb-nav-pricing-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.15) saturate(1.15);
  /* DO NOT override background — keep the inline gradient */
}

/* Per-button colored shine glow */
.cb-nav-npte-btn:hover{
  box-shadow:
    0 0 0 1px rgba(168,85,247,.4),
    0 4px 16px rgba(124,58,237,.55),
    0 8px 28px rgba(124,58,237,.30) !important;
}
.cb-nav-biz-btn:hover{
  box-shadow:
    0 0 0 1px rgba(16,185,129,.5),
    0 4px 16px rgba(16,185,129,.55),
    0 8px 28px rgba(59,130,246,.30) !important;
}
.cb-nav-pricing-btn:hover{
  box-shadow:
    0 0 0 1px rgba(var(--ar),.5),
    0 4px 16px rgba(var(--ar),.55),
    0 8px 28px rgba(var(--ar),.30) !important;
}

/* Subtle sweeping shine animation on hover (light pulse across gradient) */
@keyframes cbNavShine{
  0%   { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
  40%  { opacity: .55; }
  100% { transform: translateX(220%) skewX(-20deg); opacity: 0; }
}
.cb-nav-npte-btn,
.cb-nav-biz-btn,
.cb-nav-pricing-btn{ overflow: hidden; }
.cb-nav-npte-btn::after,
.cb-nav-biz-btn::after,
.cb-nav-pricing-btn::after{
  content:'';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}
.cb-nav-npte-btn:hover::after,
.cb-nav-biz-btn:hover::after,
.cb-nav-pricing-btn:hover::after{
  animation: cbNavShine .9s cubic-bezier(.16,1,.3,1) forwards;
}
@media (prefers-reduced-motion: reduce){
  .cb-nav-npte-btn::after,
  .cb-nav-biz-btn::after,
  .cb-nav-pricing-btn::after{ animation: none !important; }
}

/* ============================================================
 * v503 — POLISH SWEEP: nav dropdowns, pricing, footer, scroll cue
 * ============================================================ */

/* --- NAV DROPDOWNS — glassmorphic with subtle lift --- */
.nav-drop{
  background: var(--glass-tint-strong) !important;
  backdrop-filter: var(--glass-filter-anchor) !important;
  -webkit-backdrop-filter: var(--glass-filter-anchor) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow:
    0 16px 48px rgba(15,23,42,.10),
    0 4px 16px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.65) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  margin-top: 8px !important;
}
[data-theme="dark"] .nav-drop{
  background: rgba(18,18,22,.96) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 16px 56px rgba(0,0,0,.6),
    0 0 0 1px rgba(var(--ar),.08),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.nav-drop a{
  padding: 8px 14px !important;
  border-radius: 8px !important;
  transition: background .2s, color .2s, transform .2s !important;
}
.nav-drop a:hover{
  background: rgba(var(--ar),.10) !important;
  color: var(--accent) !important;
  transform: translateX(4px) !important;
}
[data-theme="dark"] .nav-drop a{ color: #d4d4d8 !important; }
[data-theme="dark"] .nav-drop a:hover{
  background: rgba(var(--ar),.12) !important;
  color: var(--accent2) !important;
}
.nav-drop-label{
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 9.5px !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  color: var(--text3) !important;
  padding: 8px 14px 4px !important;
  font-weight: 700 !important;
}

/* --- PRICING CARDS — deeper premium --- */
.price-card{
  background: var(--glass-tint-strong) !important;
  backdrop-filter: var(--glass-filter-anchor) !important;
  -webkit-backdrop-filter: var(--glass-filter-anchor) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--glass-shadow) !important;
  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    box-shadow .4s cubic-bezier(.16,1,.3,1),
    border-color .25s !important;
}
.price-card:hover{
  transform: translateY(-6px) !important;
  box-shadow: var(--glass-shadow-hover) !important;
}
.price-card.featured{
  border: 1.5px solid rgba(var(--ar),.45) !important;
  background: linear-gradient(180deg,
    rgba(var(--ar),.06) 0%,
    var(--glass-tint-strong) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(var(--ar),.18),
    0 16px 48px rgba(var(--ar),.18),
    0 24px 64px rgba(var(--ar),.10) !important;
  position: relative;
}
.price-card.featured::before{
  content: 'MOST POPULAR';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(var(--ar),.4);
  white-space: nowrap;
}
[data-theme="dark"] .price-card.featured{
  background: linear-gradient(180deg,
    rgba(var(--ar),.10) 0%,
    rgba(28,28,32,.94) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(var(--ar),.3),
    0 0 32px rgba(var(--ar),.25),
    0 24px 64px rgba(var(--ar),.15) !important;
}
.price-amount, .price-num, .price-card .price{
  font-size: 36px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
[data-theme="dark"] .price-amount,
[data-theme="dark"] .price-num,
[data-theme="dark"] .price-card .price{
  filter: drop-shadow(0 0 18px rgba(var(--ar),.35));
}

/* --- FOOTER — glass treatment matching the site --- */
.cb-site-footer{
  background: transparent !important;
  border-top: 1px solid rgba(var(--ar),.10) !important;
  margin-top: 60px;
  padding: 40px 24px 32px !important;
  position: relative;
}
.cb-site-footer::before{
  content:'';
  position: absolute;
  top: -1px; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--ar),.45) 25%,
    rgba(var(--ar),.55) 50%,
    rgba(var(--ar),.45) 75%,
    transparent);
  pointer-events: none;
}
.cb-footer-inner{
  max-width: 1100px;
  margin: 0 auto;
}
.cb-footer-disclaimer{
  background: var(--glass-tint) !important;
  backdrop-filter: var(--glass-filter-anchor);
  -webkit-backdrop-filter: var(--glass-filter-anchor);
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--text2) !important;
  margin-bottom: 24px;
  box-shadow: var(--glass-shadow);
}
.cb-footer-disclaimer strong{ color: var(--text); }
.cb-footer-disclaimer a{
  color: var(--accent) !important;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.cb-footer-disclaimer a:hover{ border-bottom-color: var(--accent); }
.cb-footer-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0 4px;
}
.cb-footer-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--text);
}
.cb-footer-mark{
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(var(--ar),.25);
}
[data-theme="dark"] .cb-footer-mark{
  box-shadow:
    0 0 12px rgba(var(--ar),.4),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.cb-footer-links{
  display: flex;
  gap: 18px;
}
.cb-footer-links a{
  color: var(--text2) !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: color .2s, transform .2s;
}
.cb-footer-links a:hover{
  color: var(--accent) !important;
  transform: translateY(-1px);
}
.cb-footer-copyright{
  font-size: 11.5px;
  color: var(--text3);
  text-align: right;
  flex: 1;
  min-width: 280px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .2px;
}
@media (max-width: 700px){
  .cb-footer-meta{ flex-direction: column; align-items: flex-start; }
  .cb-footer-copyright{ text-align: left; min-width: 0; }
}

/* --- HERO SCROLL-DOWN CUE --- */
.idx-hero{ padding-bottom: 50px !important; }
.idx-hero::before, .idx-hero::after{ z-index: -1; }
.cb-scroll-cue{
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 36px;
  border: 1.5px solid rgba(var(--ar),.4);
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.cb-scroll-cue::after{
  content:'';
  width: 3px; height: 8px;
  border-radius: 2px;
  background: var(--accent);
  animation: cbScrollDrop 1.8s ease-in-out infinite;
}
@keyframes cbScrollDrop{
  0%   { transform: translateY(0); opacity: 1; }
  60%  { transform: translateY(14px); opacity: 0; }
  61%  { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
[data-theme="dark"] .cb-scroll-cue{
  border-color: rgba(var(--ar),.5);
  box-shadow: 0 0 16px rgba(var(--ar),.2);
}
@media (prefers-reduced-motion: reduce){
  .cb-scroll-cue::after{ animation: none; }
}

/* --- IN-VIEW FADE-UP (subtle, JS adds .in-view) --- */
.cb-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1);
}
.cb-reveal.in-view{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .cb-reveal{ opacity: 1 !important; transform: none !important; }
}

/* ============================================================
 * v504 — POLISH SWEEP 2: theme picker, audience cards, framework
 * map, how-it-works numbers, NPTE/Business strips, hero entry,
 * module chip-nav, keyboard focus rings.
 * ============================================================ */

/* --- 1. THEME DROPDOWN PICKER (top-right moon/theme button) --- */
.theme-dd-trigger{
  background: var(--glass-tint) !important;
  backdrop-filter: var(--glass-filter-standard) !important;
  -webkit-backdrop-filter: var(--glass-filter-standard) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px !important;
  transition: all .25s cubic-bezier(.16,1,.3,1) !important;
}
.theme-dd-trigger:hover{
  background: rgba(var(--ar),.08) !important;
  border-color: rgba(var(--ar),.3) !important;
  transform: translateY(-1px);
}
[data-theme="dark"] .theme-dd-trigger{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #e4e4e7 !important;
}
[data-theme="dark"] .theme-dd-trigger:hover{
  background: rgba(var(--ar),.10) !important;
  border-color: rgba(var(--ar),.35) !important;
  box-shadow: 0 0 16px rgba(var(--ar),.25);
}
.theme-dd-popover{
  background: var(--glass-tint-strong) !important;
  backdrop-filter: var(--glass-filter-anchor) !important;
  -webkit-backdrop-filter: var(--glass-filter-anchor) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow:
    0 20px 60px rgba(15,23,42,.15),
    0 4px 16px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.6) !important;
  padding: 8px !important;
}
[data-theme="dark"] .theme-dd-popover{
  background: rgba(18,18,22,.96) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,.65),
    0 0 0 1px rgba(var(--ar),.10),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.theme-dd-popover .theme-btn{
  transition: all .2s !important;
  border-radius: 8px !important;
}
.theme-dd-popover .theme-btn:hover{
  background: rgba(var(--ar),.08) !important;
  transform: translateX(2px);
}
[data-theme="dark"] .theme-dd-popover .theme-btn{
  color: #d4d4d8 !important;
}
[data-theme="dark"] .theme-dd-popover .theme-btn:hover{
  background: rgba(var(--ar),.12) !important;
  color: #fff !important;
}

/* --- 2. HOW-IT-WORKS NUMBERED STEPS --- */
.howto-step{
  position: relative;
  padding-top: 8px !important;
}
.howto-num{
  font-size: 48px !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  line-height: 1 !important;
  margin-bottom: 8px;
  display: inline-block;
}
[data-theme="dark"] .howto-num{
  filter: drop-shadow(0 0 22px rgba(var(--ar),.4));
}
.howto-step:hover .howto-num{
  transform: scale(1.08) translateY(-2px);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}

/* --- 3. AUDIENCE CARDS (idx-audience-card) — gradient border on hover --- */
.idx-audience-card{
  position: relative;
  overflow: hidden;
  transition:
    transform .45s cubic-bezier(.16,1,.3,1),
    box-shadow .45s,
    border-color .35s !important;
}
.idx-audience-card::before{
  content:'';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg,
    rgba(var(--ar),.0),
    rgba(var(--ar),.45) 30%,
    rgba(var(--gr),.30) 60%,
    rgba(var(--pr),.40));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
}
.idx-audience-card:hover::before{ opacity: 1; }
.idx-audience-card:hover{
  transform: translateY(-6px) !important;
}
.idx-audience-arrow{
  display: inline-block !important;
  transition: transform .35s cubic-bezier(.16,1,.3,1) !important;
}
.idx-audience-card:hover .idx-audience-arrow{
  transform: translateX(6px) !important;
}

/* --- 4. NINE FRAMEWORKS MAP (.frmap-card) --- */
.frmap-card{
  background: var(--glass-tint) !important;
  backdrop-filter: var(--glass-filter-standard) !important;
  -webkit-backdrop-filter: var(--glass-filter-standard) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--glass-shadow) !important;
  transition:
    transform .45s cubic-bezier(.16,1,.3,1),
    box-shadow .45s !important;
}
.frmap-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-hover) !important;
}
.frmap-name{
  letter-spacing: -.01em;
}
.frmap-lenses{
  font-family: 'IBM Plex Mono', monospace !important;
  letter-spacing: 1.2px !important;
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  background: linear-gradient(90deg, var(--accent), var(--accent2)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: 700 !important;
}
.frmap-tier-label{
  font-family: 'IBM Plex Mono', monospace !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* --- 5. NPTE BLUEPRINT + CB BUSINESS strips: hover lift + arrow pulse --- */
.idx-npte-promo{
  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    box-shadow .35s !important;
  position: relative;
  overflow: hidden;
}
.idx-npte-promo:hover{
  transform: translateY(-3px);
  box-shadow:
    0 16px 48px rgba(124,58,237,.30),
    0 8px 24px rgba(59,130,246,.25) !important;
}
.idx-npte-promo::after{
  content:'';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.idx-npte-promo:hover::after{ transform: translateX(100%); }

/* --- 6. HERO ENTRY ANIMATION (subtle fade-up on page load) --- */
@keyframes cbHeroIn{
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.idx-hero-eyebrow{ animation: cbHeroIn .9s cubic-bezier(.16,1,.3,1) .1s both; }
.idx-hero h1{ animation: cbHeroIn .9s cubic-bezier(.16,1,.3,1) .2s both; }
.idx-hero .sub{ animation: cbHeroIn .9s cubic-bezier(.16,1,.3,1) .35s both; }
.idx-hero .cta-row{ animation: cbHeroIn .9s cubic-bezier(.16,1,.3,1) .5s both; }
.idx-hero .stats-row{ animation: cbHeroIn .9s cubic-bezier(.16,1,.3,1) .65s both; }
@media (prefers-reduced-motion: reduce){
  .idx-hero-eyebrow,
  .idx-hero h1,
  .idx-hero .sub,
  .idx-hero .cta-row,
  .idx-hero .stats-row{ animation: none !important; }
}

/* --- 7. MODULE CHIP-NAV: active state premium (slide animation hint) --- */
.chip-nav button{
  transition:
    background .25s,
    color .25s,
    transform .25s cubic-bezier(.16,1,.3,1),
    box-shadow .25s !important;
  position: relative !important;
}
.chip-nav button:hover{
  transform: translateX(2px);
}
.chip-nav button.active{
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  box-shadow:
    0 4px 16px rgba(var(--ar),.35),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}
[data-theme="dark"] .chip-nav button.active{
  box-shadow:
    0 0 0 1px rgba(var(--ar),.4),
    0 4px 18px rgba(var(--ar),.55),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* --- 8. KEYBOARD FOCUS RINGS (accessibility) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(var(--ar),.35) !important;
  border-radius: 6px;
}
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible{
  box-shadow: 0 0 0 3px rgba(var(--ar),.50) !important;
}

/* --- 9. KBD elements (Q, /, V hotkey hints) — refined chips --- */
kbd{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 3px 7px !important;
  background: var(--glass-tint-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 6px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  box-shadow:
    0 1px 0 rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.5) !important;
}
[data-theme="dark"] kbd{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: #fafafa !important;
  box-shadow:
    0 1px 0 rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* --- 10. SECTION TITLES — refined entry sequence + dark mode glow --- */
.sec-title{
  letter-spacing: -.025em !important;
}
[data-theme="dark"] .sec-title{
  text-shadow: 0 2px 24px rgba(var(--ar),.08);
}

/* --- 11. SCROLL-BAR styling (premium thin bar) --- */
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(var(--ar),.4), rgba(var(--ar),.25)) !important;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(var(--ar),.7), rgba(var(--ar),.5)) !important;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(var(--ar),.5), rgba(var(--ar),.3)) !important;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(var(--ar),.8), rgba(var(--ar),.55)) !important;
}

/* --- 12. SELECTION color match accent --- */
::selection{
  background: rgba(var(--ar),.30);
  color: var(--text);
}
[data-theme="dark"] ::selection{
  background: rgba(var(--ar),.45);
  color: #fff;
}

/* ============================================================
 * v505 — KILL SECTION SIDE LINES
 * Vertical hairlines were appearing on the .features.clinician-tools
 * section. Two causes: inline background gradient creating contrast
 * at the section's max-width boundary, and cb-reveal transform on
 * top-level sections creating subpixel edges. Fix both.
 * ============================================================ */
.features,
.features.clinician-tools,
.howto-section,
.modules-section,
.audience-cards,
.biz-strip,
.daily-session,
.stats-row,
.pricing-section,
.pricing-3,
.module-section,
.paths-section,
.frmap{
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Sections should never trigger cb-reveal layer (cards do that fine
   on their own). Belt + suspenders alongside the JS change. */
.features.cb-reveal,
.features.clinician-tools.cb-reveal,
.howto-section.cb-reveal,
.modules-section.cb-reveal,
.frmap.cb-reveal,
.paths-section.cb-reveal{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ============================================================
 * v507 — FOUR FIXES from user feedback
 * 1) Remove the bottom-edge glow line under the dark nav
 * 2) Fix cut-off numbers in How-it-works (.howto-num)
 * 3) Dropdown menus less transparent (more opaque bg)
 * ============================================================ */

/* 1) Kill the ::after glow line under the nav */
[data-theme="dark"] .site-nav::after,
.site-nav::after{
  display: none !important;
  content: none !important;
}

/* 2) Fix How-it-works numbers being cut off at the top */
.howto-step{
  padding-top: 22px !important;   /* was 8 */
  overflow: visible !important;
}
.howto-num{
  font-size: 44px !important;
  line-height: 1.15 !important;    /* was 1 — give the cap some room */
  display: inline-block;
  padding-top: 4px;                /* breathing room above the digit */
  /* margin-bottom 8px stays */
}
.howto-grid{
  align-items: stretch;
  padding-top: 4px;
}

/* 3) Dropdowns: bump opacity so text behind doesn't read through */
.nav-drop{
  background: rgba(252,252,250,.98) !important;
  backdrop-filter: var(--glass-filter-anchor) !important;
  -webkit-backdrop-filter: var(--glass-filter-anchor) !important;
}
[data-theme="dark"] .nav-drop{
  background: rgba(16,16,20,.98) !important;
  backdrop-filter: var(--glass-filter-anchor) !important;
  -webkit-backdrop-filter: var(--glass-filter-anchor) !important;
}

/* v508 — Remove any visible bottom edge on the nav */
.site-nav,
[data-theme="dark"] .site-nav,
[data-theme="light"] .site-nav{
  border-bottom: none !important;
  border-bottom-width: 0 !important;
  box-shadow: none !important;
}
/* Restore only an extremely subtle ambient shadow if needed, no hairline */
[data-theme="dark"] .site-nav{
  box-shadow: 0 12px 32px rgba(0,0,0,.55) !important;
}
[data-theme="light"] .site-nav{
  box-shadow: 0 8px 28px rgba(15,23,42,.04) !important;
}

/* v509 — Dashboard nav button shine (matching NPTE / Business / Upgrade) */
.cb-nav-dashboard-btn{ position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, filter .25s !important; }
.cb-nav-dashboard-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.15) saturate(1.15);
  box-shadow:
    0 0 0 1px rgba(var(--ar),.5),
    0 4px 16px rgba(var(--ar),.55),
    0 8px 28px rgba(var(--ar),.30) !important;
}
.cb-nav-dashboard-btn::after{
  content:''; position: absolute; top:0; bottom:0; left:0; width:40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-120%) skewX(-20deg); pointer-events: none; opacity: 0;
}
.cb-nav-dashboard-btn:hover::after{ animation: cbNavShine .9s cubic-bezier(.16,1,.3,1) forwards; }

/* v514 — Larger, easier-to-read fonts in Modality + Medication modals
   Replaces tight 11-13px clinical text with 13-15px for bedside legibility */
.cb-mod-modal,
.cb-meds-modal,
[class*="cb-mod-"],
[class*="cb-meds-"]{ font-size: 14.5px !important; line-height: 1.6 !important; }
.cb-mod-card-name, .cb-meds-card-name,
.cb-mod-card-cat, .cb-meds-card-cat{ font-size: 16px !important; }
.cb-mod-card-summary, .cb-meds-card-summary{ font-size: 13.5px !important; line-height: 1.55 !important; }
.cb-mod-detail-summary, .cb-meds-detail-summary{ font-size: 15px !important; line-height: 1.65 !important; }
.cb-mod-detail h2, .cb-meds-detail h2{ font-size: 22px !important; }
.cb-mod-detail h3, .cb-meds-detail h3,
.cb-mod-detail-section-h, .cb-meds-detail-section-h{ font-size: 12.5px !important; letter-spacing: 1.4px !important; }
.cb-mod-detail-table, .cb-meds-detail-table,
.cb-mod-detail-table td, .cb-meds-detail-table td,
.cb-mod-detail-table th, .cb-meds-detail-table th{ font-size: 14px !important; padding: 11px 13px !important; line-height: 1.55 !important; }
.cb-mod-callout, .cb-meds-callout,
.cb-mod-pearl, .cb-meds-pearl{ font-size: 14px !important; line-height: 1.6 !important; }
.cb-mod-cat-pill, .cb-meds-cat-pill{ font-size: 12.5px !important; padding: 7px 14px !important; }
.cb-mod-search, .cb-meds-search,
.cb-mod-search-input, .cb-meds-search-input{ font-size: 15px !important; padding: 13px 16px !important; }
.cb-mod-head-title, .cb-meds-head-title{ font-size: 19px !important; }

/* v517 — Kill the top reading-progress bar site-wide (user found it annoying) */
.cb-progress-bar,
.cb-progress-fill{
  display: none !important;
  visibility: hidden !important;
}

/* ============================================================
 * v518 — Dashboard FONT BUMP for bedside readability
 * Keeps sitewide Manrope + IBM Plex Mono stack. Just larger.
 * Targets all .cbd-* dashboard classes.
 * ============================================================ */

/* Top bar */
.cbd-time{ font-size: 13px !important; letter-spacing: 1.5px !important; }
.cbd-greet-text{ font-size: 19px !important; }
.cbd-metric-num{ font-size: 21px !important; }
.cbd-metric-lbl{ font-size: 11px !important; letter-spacing: 1.3px !important; }

/* Search bar */
.cbd-search-input{ font-size: 16px !important; padding: 4px 0 !important; }
.cbd-search-kbd{ font-size: 11.5px !important; }

/* v543: Section headers + Quick actions sizing governed by Dashboard inline CSS */

/* Setting context bar */
.cbd-setting-eyebrow{ font-size: 11px !important; letter-spacing: 1.6px !important; }
.cbd-setting-name{ font-size: 17px !important; }
.cbd-setting-hint{ font-size: 13px !important; }
.cbd-setting-btn{ font-size: 14px !important; padding: 11px 20px !important; }

/* Cheat sheets */
.cbd-cheat-title{ font-size: 16px !important; }
.cbd-cheat-tag{ font-size: 11px !important; letter-spacing: 1.4px !important; }

/* Threshold tiles (vitals) */
.cbd-thresh{ padding: 13px 11px !important; }
.cbd-thresh-emoji{ font-size: 20px !important; }
.cbd-thresh-lbl{ font-size: 11px !important; letter-spacing: 1.2px !important; }
.cbd-thresh-val{ font-size: 14px !important; line-height: 1.35 !important; }

/* Bullet lists (WB, sternal, hip, lab values, stroke) */
.cbd-list-item{ font-size: 14px !important; line-height: 1.55 !important; padding: 10px 13px !important; }
.cbd-list-item strong{ font-size: 12px !important; min-width: 56px !important; letter-spacing: 1.1px !important; }

/* Tables (8-min rule) */
.cbd-table{ font-size: 14px !important; }
.cbd-table th{ font-size: 11.5px !important; padding: 10px 12px !important; letter-spacing: 1.3px !important; }
.cbd-table td{ padding: 11px 12px !important; }
.cbd-table td:first-child{ font-size: 13px !important; }

/* RPE bars */
.cbd-rpe-bar{ font-size: 12px !important; }
.cbd-rpe-labels{ font-size: 11px !important; }

/* v544: shortcut sizing now governed by Dashboard inline CSS */

/* Treatment Stopwatch (v526: compact strip — values now defined inline on Dashboard) */
/* .cbd-sw-time / .cbd-sw-label / .cbd-sw-btn font/padding overrides removed —
   the compact strip in CB_Dashboard.html now governs sizing. */
.cbd-sw-lap{ font-size: 14px !important; padding: 10px 14px !important; }
.cbd-sw-lap-time{ font-size: 13px !important; }
.cbd-sw-totals{ font-size: 14px !important; }
.cbd-sw-totals strong{ font-size: 16px !important; }
.cbd-sw-empty{ font-size: 13px !important; }
.cbd-sw-clear{ font-size: 11px !important; }

/* Productivity Calculator */
.cbd-prod-head{ font-size: 12.5px !important; letter-spacing: 1.6px !important; }
.cbd-prod-lbl{ font-size: 11px !important; letter-spacing: 1.3px !important; }
.cbd-prod-input{ font-size: 17px !important; padding: 11px 13px !important; }
.cbd-prod-pct{ font-size: 48px !important; }
.cbd-prod-status{ font-size: 12px !important; letter-spacing: 1.4px !important; }
.cbd-prod-detail{ font-size: 13px !important; }
.cbd-prod-detail strong{ font-size: 14px !important; }
.cbd-prod-autohint{ font-size: 11.5px !important; }

/* v519 — Cleaner nav: Education button replaces 7 category dropdowns */
.cb-nav-edu-btn:hover{
  background: rgba(var(--ar),.08) !important;
  border-color: rgba(var(--ar),.25) !important;
  color: var(--accent) !important;
}
[data-theme="dark"] .cb-nav-edu-btn{ color: #e4e4e7 !important; }
[data-theme="dark"] .cb-nav-edu-btn:hover{
  background: rgba(var(--ar),.12) !important;
  color: var(--accent2) !important;
  border-color: rgba(var(--ar),.30) !important;
}

/* ============================================================
 * v520 — Three fixes
 * 1) Dial back Dashboard font sizes ~12-15% (was too tall on screen)
 * 2) Fix module chip-nav active state contrast (green-on-green text)
 * 3) Deeper, more premium dark mode (sharper accents, richer base)
 * ============================================================ */

/* ===== 1) Dashboard tighter (override v518 bumps slightly) ===== */
.cbd-greet-text{ font-size: 17px !important; }
.cbd-time{ font-size: 12px !important; }
.cbd-metric-num{ font-size: 19px !important; }
.cbd-metric-lbl{ font-size: 10.5px !important; }
.cbd-search-input{ font-size: 15px !important; }
.cbd-search-kbd{ font-size: 11px !important; }
/* v543: quick action sizing removed — Dashboard inline CSS governs */
/* v526: stopwatch compact strip overrides removed — sizes governed by Dashboard inline CSS */
.cbd-sw-totals strong{ font-size: 14.5px !important; }
.cbd-prod-head{ font-size: 11.5px !important; }
.cbd-prod-lbl{ font-size: 10.5px !important; }
.cbd-prod-input{ font-size: 15px !important; padding: 9px 12px !important; }
.cbd-prod-pct{ font-size: 40px !important; }
.cbd-prod-status{ font-size: 11px !important; }
.cbd-prod-detail{ font-size: 12.5px !important; }
.cbd-setting-name{ font-size: 16px !important; }
.cbd-cheat-title{ font-size: 15px !important; }
.cbd-thresh{ padding: 10px 8px !important; }
.cbd-thresh-emoji{ font-size: 16px !important; }
.cbd-thresh-val{ font-size: 13px !important; }
.cbd-list-item{ font-size: 13.5px !important; padding: 9px 12px !important; }
.cbd-list-item strong{ font-size: 11.5px !important; }
.cbd-table{ font-size: 13.5px !important; }
.cbd-table th{ font-size: 11px !important; padding: 9px 11px !important; }
.cbd-table td{ padding: 10px 11px !important; }
/* v544: section/card sizing now governed by Dashboard inline CSS (was forcing
   bigger paddings that fought the v543/v544 density pass) */

/* ===== 2) Module chip-nav: fix green-on-green text contrast ===== */
.chip-nav button.active,
.chip-nav a.active{
  color: #fff !important;
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.20);
  box-shadow:
    0 4px 16px rgba(var(--ar),.35),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.10) !important;
}
[data-theme="dark"] .chip-nav button.active,
[data-theme="dark"] .chip-nav a.active{
  color: #08120c !important;          /* DARK text on bright green = strong contrast */
  text-shadow: 0 1px 0 rgba(255,255,255,.10);
  box-shadow:
    0 0 0 1px rgba(var(--ar),.45),
    0 4px 18px rgba(var(--ar),.55),
    0 0 28px rgba(var(--ar),.30),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* ===== 3) DARK MODE — premium identity pass ===== */

/* Deeper, slightly cooler base for dark — less gray, more luxe */
[data-theme="dark"]{
  --bg:        #07080b !important;     /* was #09090b — slightly deeper, hint of blue */
  --bg2:       #0f1014 !important;     /* was #18181b */
  --bg3:       #16181d !important;
  --bg4:       #1d2027 !important;
  --glass-tint:        rgba(15,16,20,.86) !important;
  --glass-tint-strong: rgba(15,16,20,.93) !important;
  --glass-border:      rgba(255,255,255,.08) !important;
}

/* Dark mesh — slightly more saturation + richer color palette */
[data-theme="dark"]{
  --mesh-opacity-1: .26 !important;
  --mesh-opacity-2: .14 !important;
  --mesh-opacity-3: .20 !important;
  --mesh-opacity-4: .15 !important;
  --mesh-opacity-5: .14 !important;
}

/* Card top-edge highlight — sharper "glass" feel */
[data-theme="dark"] .cbd-cheat::before,
[data-theme="dark"] .cbd-sw::before,
[data-theme="dark"] .cbd-prod::before,
[data-theme="dark"] .cbd-top::before{
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--ar),.35) 25%,
    rgba(255,255,255,.18) 50%,
    rgba(var(--ar),.35) 75%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}
[data-theme="dark"] .cbd-cheat,
[data-theme="dark"] .cbd-sw,
[data-theme="dark"] .cbd-prod,
[data-theme="dark"] .cbd-top{
  position: relative;
  overflow: hidden;
}

/* Sharper accent moments — section headers get a subtle dot */
[data-theme="dark"] .cbd-quick-h::before,
[data-theme="dark"] .cb-ed-eyebrow::before{
  background: var(--accent2) !important;
  box-shadow: 0 0 12px rgba(var(--ar),.6);
}

/* Stronger metric drop-shadow glow in dark */
[data-theme="dark"] .cbd-metric-num,
[data-theme="dark"] .cbd-sw-time,
[data-theme="dark"] .cbd-prod-pct{
  filter: drop-shadow(0 0 18px rgba(var(--ar),.55)) drop-shadow(0 1px 0 rgba(0,0,0,.4));
}

/* Quick action cards get accent-color inner glow on hover in dark */
[data-theme="dark"] .cbd-quick:hover{
  border-color: rgba(var(--ar),.50) !important;
  box-shadow:
    0 0 0 1px rgba(var(--ar),.20),
    0 12px 32px rgba(var(--ar),.25),
    0 0 28px rgba(var(--ar),.15),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}
[data-theme="dark"] .cbd-quick.featured{
  box-shadow:
    0 0 0 1px rgba(var(--ar),.45),
    0 8px 28px rgba(var(--ar),.45),
    0 0 36px rgba(var(--ar),.25),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}

/* Threshold tiles in dark — richer color saturation */
[data-theme="dark"] .cbd-thresh.green{
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(34,197,94,.08)) !important;
  border-color: rgba(34,197,94,.45) !important;
  box-shadow: 0 0 16px rgba(34,197,94,.15);
}
[data-theme="dark"] .cbd-thresh.yellow{
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(245,158,11,.08)) !important;
  border-color: rgba(245,158,11,.45) !important;
  box-shadow: 0 0 16px rgba(245,158,11,.15);
}
[data-theme="dark"] .cbd-thresh.red{
  background: linear-gradient(135deg, rgba(220,38,38,.18), rgba(220,38,38,.08)) !important;
  border-color: rgba(220,38,38,.45) !important;
  box-shadow: 0 0 16px rgba(220,38,38,.15);
}

/* Section divider — richer accent sweep in dark */
[data-theme="dark"] .section-divider{
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--ar),.4) 30%,
    rgba(var(--ar),.7) 50%,
    rgba(var(--ar),.4) 70%,
    transparent 100%) !important;
  opacity: 1 !important;
  box-shadow: 0 0 16px rgba(var(--ar),.30);
}

/* Hero title gradient — stronger glow in dark */
[data-theme="dark"] .land-hero h1 em,
[data-theme="dark"] .idx-hero h1 em,
[data-theme="dark"] .cbd-greet-text em{
  filter: drop-shadow(0 4px 32px rgba(var(--ar),.55)) drop-shadow(0 0 12px rgba(var(--ar),.25)) !important;
}

/* Eyebrow pills — soft accent glow ring in dark */
[data-theme="dark"] .land-eyebrow,
[data-theme="dark"] .idx-hero-eyebrow,
[data-theme="dark"] .land-section-tag,
[data-theme="dark"] .cb-ed-eyebrow{
  box-shadow:
    inset 0 0 0 1px rgba(var(--ar),.30),
    0 0 22px rgba(var(--ar),.18) !important;
}

/* v521 — Remove box ring around section eyebrows + Notes+Reminders widget */

/* Kill the inset ring on .land-section-tag specifically (dark mode added it in v520) */
[data-theme="dark"] .land-section-tag,
.land-section-tag{
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.land-section-tag::before{
  background: var(--accent) !important;
}

/* Notes + Reminders widget on Dashboard */
.cbd-noterem{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:780px){.cbd-noterem{grid-template-columns:1fr}}
.cbd-noterem-card{background:var(--glass-tint-strong);backdrop-filter: var(--glass-filter-standard);-webkit-backdrop-filter: var(--glass-filter-standard);border:1px solid var(--glass-border);border-radius:14px;padding:12px 16px 14px;box-shadow:var(--glass-shadow);display:flex;flex-direction:column}
.cbd-noterem-h{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:1.6px;color:var(--text2);text-transform:uppercase;font-weight:700;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.cbd-noterem-meta{font-size:10px;color:var(--text3);font-family:"IBM Plex Mono",monospace;letter-spacing:.4px}
.cbd-note-ta{flex:1;min-height:110px;padding:11px 13px;border-radius:10px;border:1px solid var(--glass-border);background:var(--bg);color:var(--text);font-family:inherit;font-size:14px;line-height:1.55;outline:none;resize:vertical;transition:border-color .2s;font-weight:500}
.cbd-note-ta:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--ar),.10)}
[data-theme="dark"] .cbd-note-ta{background:rgba(255,255,255,.04)}
.cbd-rem-list{flex:1;display:flex;flex-direction:column;gap:6px;max-height:140px;overflow-y:auto;margin-bottom:8px}
.cbd-rem-empty{padding:14px 12px;text-align:center;color:var(--text3);font-size:12.5px;font-style:italic}
.cbd-rem{display:flex;gap:8px;align-items:center;padding:8px 12px;background:rgba(var(--ar),.05);border-left:3px solid rgba(var(--ar),.35);border-radius:0 8px 8px 0;font-size:13px}
.cbd-rem.done{opacity:.45;text-decoration:line-through}
[data-theme="dark"] .cbd-rem{background:rgba(255,255,255,.04)}
.cbd-rem-time{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:800;color:var(--accent);padding:2px 7px;border-radius:5px;background:rgba(var(--ar),.10);min-width:50px;text-align:center;flex-shrink:0}
.cbd-rem-text{flex:1;line-height:1.4;cursor:pointer}
.cbd-rem-x{background:none;border:none;color:var(--text3);font-size:14px;cursor:pointer;padding:2px 6px;border-radius:4px;opacity:0;transition:opacity .15s}
.cbd-rem:hover .cbd-rem-x{opacity:1}
.cbd-rem-x:hover{color:#dc2626;background:rgba(220,38,38,.10)}
.cbd-rem-add{display:flex;gap:6px;align-items:center;margin-top:auto}
.cbd-rem-add input[type=text]{flex:1;padding:9px 12px;border-radius:9px;border:1px solid var(--glass-border);background:var(--bg);color:var(--text);font-family:inherit;font-size:13px;outline:none;font-weight:500;transition:border-color .2s}
.cbd-rem-add input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--ar),.10)}
.cbd-rem-add input[type=time]{padding:9px 10px;border-radius:9px;border:1px solid var(--glass-border);background:var(--bg);color:var(--text);font-family:"IBM Plex Mono",monospace;font-size:12px;outline:none;font-weight:700;width:90px}
[data-theme="dark"] .cbd-rem-add input{background:rgba(255,255,255,.04)}
.cbd-rem-add button{padding:9px 16px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:9px;font-weight:800;cursor:pointer;font-size:18px;line-height:1;box-shadow:0 4px 12px rgba(var(--ar),.30)}
.cbd-rem-add button:hover{filter:brightness(1.1);transform:translateY(-1px)}

/* =====================================================================
 * v711 — END-OF-FILE OVERRIDES for Obsidian + Ember. There are subsequent
 * [data-theme="dark"] and [data-theme="light"] blocks earlier with
 * !important that were overriding my Obsidian rules at line 60-110.
 * Same-specificity rules win by source order — so these go at the END.
 * ===================================================================== */

/* OBSIDIAN — final glass token authority */



/* PULSE — neon pink/violet/cyan glass authority */



/* EMBER — fiery red glass authority */



/* All dark themes: kill backdrop-filter blur (no frost) and sweep
   any remaining light-cream card backgrounds via the var system. */


/* =====================================================================
 * v716 — .land-stat-num NUCLEAR FIX.
 *
 * History:
 *   v714 used `background: linear-gradient(...) !important` shorthand which
 *   resets background-clip to border-box, wiping out the `background-clip:
 *   text` rule. Result: solid-gradient rectangles instead of clipped text.
 *
 *   v715 switched to `background-image:` longhand. Locally that works (verified
 *   via preview: computed background-clip = "text", width = 78px = digit width).
 *   But user still saw bars — almost certainly browser cache OR Cloudflare worker
 *   serving older `main` (this fix lives on branch).
 *
 * v716 belt-and-suspenders:
 *   1. Bump every CSS link's ?v=1019 to nuke any stale cache.
 *   2. Force `display: inline-block` + `width: auto` so the element's BOX is
 *      only as wide as the digits themselves. Even if background-clip somehow
 *      fails on any device, the "fallback bar" would only be ~80px wide instead
 *      of the full ~225px card width — invisible-as-bar.
 *   3. Use `html[data-theme=...]` (specificity 0,2,0 same as before but bumped
 *      to 0,2,1 by adding html prefix) to out-specify the galaxy-language rule
 *      which uses `html:not([data-theme="galaxy"])`.
 *   4. Both `background-color: transparent` AND `background-image: gradient`
 *      LONGHANDS so no shorthand can reset background-clip.
 * ===================================================================== */

html[data-theme="light"]    .land-stat-num,
html[data-theme="dark"]     .land-stat-num{
  display: inline-block !important;       /* shrink box to digit width */
  width: auto !important;
  max-width: max-content !important;
  background-color: transparent !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 800 !important;
}



html[data-theme="light"] .land-stat-num{
  background-image: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%) !important;
}
html[data-theme="dark"] .land-stat-num{
  background-image: linear-gradient(135deg, #34d399 0%, #10b981 50%, #34d399 100%) !important;
  filter: drop-shadow(0 0 18px rgba(52,211,153,.35)) !important;
}

/* =====================================================================
 * v719 — MOTION LEVEL: "still"
 *
 * Suppresses ALL hover/active transform movement sitewide while keeping
 * color, opacity, border, and box-shadow transitions intact. Triggered
 * by html[data-motion="still"] (and "off" as a strict superset).
 *
 * Targets the catch-all element + every common hoverable class. We use
 * transform: none !important — beats every named transform (translateY,
 * scale, rotate, the combined shorthand). transition-duration is left
 * alone so colors still fade smoothly; only the transform property is
 * frozen.
 *
 * The 'off' level also gets these rules (matches the legacy contract
 * that 'off' suppresses everything 'still' does plus background motion).
 * ===================================================================== */
html[data-motion="still"] *,
html[data-motion="still"] *:hover,
html[data-motion="still"] *:active,
html[data-motion="still"] *:focus,
html[data-motion="still"] *:focus-visible,
html[data-motion="off"] *,
html[data-motion="off"] *:hover,
html[data-motion="off"] *:active,
html[data-motion="off"] *:focus,
html[data-motion="off"] *:focus-visible {
  transform: none !important;
  /* keep any 'transition' on color / bg / border — only kill transform. */
  transition-property: color, background-color, background-image, border-color, opacity, box-shadow, filter !important;
}

/* When motion=off, ALSO kill background animation (particles, mesh shift,
   shimmer, vignette pulse). 'still' keeps these subtle ambient effects;
   only 'off' is the full-static experience.
   v722b — DO NOT target body directly. theme.css has
       body { opacity: 0; animation: pageFadeIn .4s ease forwards }
   so killing the body animation leaves opacity stuck at 0 = blank page.
   We exclude body from the animation kill, and instead force body opacity
   back to 1 explicitly for off/still/reduced-motion users. */
html[data-motion="off"] *:not(body)::before,
html[data-motion="off"] *:not(body)::after {
  animation: none !important;
}
html[data-motion="off"] body,
html[data-motion="still"] body {
  opacity: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
  body { opacity: 1 !important; animation: none !important; }
}

/* =====================================================================
 * v720 — SITEWIDE GLASS AESTHETIC ON MODULE / TAB CONTENT
 *
 * David: "I want the entire module — all the tabs / cards / boxes —
 * sort of see through just like the educational library, with the
 * background moving around (cb-bg-galaxy particles) showing through."
 *
 * The Education library uses .cb-ed-card with:
 *   - background: var(--glass-tint-strong)
 *   - backdrop-filter: blur(14px) saturate(180%)
 *   - border: 1px solid var(--glass-border)
 *
 * We replicate that on every common module card/tab/panel class so the
 * cb-bg-galaxy canvas behind shows through ALL pages, not just the
 * Education library. Applied via a strong-specificity selector to beat
 * old solid-bg rules without an !important shotgun.
 *
 * Excludes: form controls, code blocks, navigation chrome (those have
 * specific solid surfaces by design). Excludes .cb-mesh-bg which is
 * intentionally a sealed background layer.
 * ===================================================================== */
.ma-item,
.tab-panel,
.feat-card,
.audience-card,
.pillar-card,
.pp-tier-card,
.cbd-card,
.cbd-prod,
.cb-callout,
.cb-pearl,
.cb-pitfall,
.cb-tryit,
.cb-mnemonic,
.cb-godeeper,
.cb-quiz,
.cb-mini-quiz,
.bl,             /* boards-like content blocks */
.section-card,
.ma-content,
.ma-detail-content,
.ma-test-card {
  background: var(--glass-tint-strong, var(--glass-tint, rgba(255,255,255,0.7))) !important;
  backdrop-filter: var(--glass-filter-standard) !important;
  -webkit-backdrop-filter: var(--glass-filter-standard) !important;
  border: 1px solid var(--glass-border, rgba(255,255,255,0.18)) !important;
  border-radius: 14px !important;
  box-shadow: var(--glass-shadow, 0 12px 28px rgba(0,0,0,0.10)) !important;
  position: relative;
  /* Ensure content stays readable above the glass */
  isolation: isolate;
}

/* Dark themes — slightly lower opacity so particles show through more clearly */
[data-theme="dark"] .ma-item,
[data-theme="dark"] .tab-panel,
[data-theme="dark"] .feat-card,
[data-theme="dark"] .audience-card,
[data-theme="dark"] .pillar-card,
[data-theme="dark"] .pp-tier-card,
[data-theme="dark"] .cbd-card,
[data-theme="dark"] .cb-callout,
[data-theme="dark"] .cb-pearl,
[data-theme="dark"] .bl,
[data-theme="dark"] .ma-content,
[data-theme="dark"] .ma-test-card{
  background: rgba(20, 20, 28, 0.55) !important;   /* slightly transparent */
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Hover lift — gated to motion ≠ still/off via the v719 rule above. */
.ma-item:hover,
.tab-panel:hover,
.feat-card:hover,
.audience-card:hover,
.pillar-card:hover,
.pp-tier-card:hover,
.cbd-card:hover,
.cbd-prod:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--ar,99), var(--ag,102), var(--ab,241), 0.32) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18),
              0 0 0 1px rgba(var(--ar,99), var(--ag,102), var(--ab,241), 0.06) !important;
}

/* Chip-nav tabs sitewide — match Education library's chip pill style */
.chip-nav button,
.tabs-bar button {
  background: var(--glass-tint, rgba(255,255,255,0.4));
  backdrop-filter: var(--glass-filter-ambient);
  -webkit-backdrop-filter: var(--glass-filter-ambient);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.18));
  transition: all .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.chip-nav button:hover,
.tabs-bar button:hover {
  border-color: rgba(var(--ar,99), var(--ag,102), var(--ab,241), 0.42);
  color: var(--accent);
}
.chip-nav button.active,
.tabs-bar button.active,
.chip-nav button[aria-selected="true"] {
  background: rgba(var(--ar,99), var(--ag,102), var(--ab,241), 0.14);
  border-color: rgba(var(--ar,99), var(--ag,102), var(--ab,241), 0.55);
  color: var(--accent);
}

/* =====================================================================
 * v729 — HERO EM VIBRANCY (Dark + Obsidian)
 *
 * User: 'fix the coloring of the circled item' — the hero italic ems
 * ('smarter', 'faster') on dark mode were too muted against the deep
 * navy bg. Brighter, more saturated gradient + stronger glow makes
 * them pop without losing the gradient-text aesthetic.
 * ===================================================================== */
/* v730 — Hero em right-edge fix. The trailing 'r' + period of 'smarter.' /
   'faster.' was looking cut off because (a) the 120° diagonal gradient
   ended at a dark/saturated stop that lost contrast against the bg, and
   (b) the period was OUTSIDE the em so it broke out of the gradient.
   Period is now INSIDE the em (HTML change in index.html). Gradient
   tweaks here:
     - Direction: 90° (purely horizontal — no diagonal cutoff feel)
     - Mid stop pushed to 55% (lavender held longer = more middle vibrancy)
     - End stop pulled to 96% with a brighter saturated color so the
       fade doesn't go dim in the final 10%
     - Stronger, more even drop-shadow halo (3 layers) so glow visibly
       extends past every letter — including the period.
     - display:inline-block + 0.05em right padding so the halo wraps
       the last glyph cleanly. */
/* v738 — David: 'shine/bloom on smarter/faster is too blunted, make
   brighter.' Doubled glow intensity (alpha .32 → .65), tighter inner
   glow (10px), wider outer halo (44px), added subtle slow shimmer
   animation that pulses the bloom +/- 10% so it feels alive. */
html[data-theme="dark"] .land-hero h1 em,
html[data-theme="dark"] .idx-hero h1 em,
html[data-theme="dark"] .cbd-greet-text em {
  display: inline-block;
  padding-right: 0.05em;
  background-image: linear-gradient(90deg, #34d399 0%, #6ee7b7 55%, #86efac 96%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter:
    drop-shadow(0 0 10px rgba(52,211,153,.55))
    drop-shadow(0 0 26px rgba(16,185,129,.65))
    drop-shadow(0 0 44px rgba(45,212,160,.42))
    drop-shadow(0 4px 22px rgba(45,212,160,.30)) !important;
  animation: heroEmBloom 4.5s cubic-bezier(.4,0,.6,1) infinite;
}
/* v749 — Obsidian em: glow REMOVED. David: "take off that glow slash blue,
   I don't want it to glow." Keep the clean gradient text fill (purple →
   indigo → mint reads beautifully on the indigo-black bg) but strip all
   4 drop-shadow layers + the bloom animation. Result: crisp text on a
   dark page, no halo distracting from the typography. Dark theme keeps
   its glow per v738 ("brighter" feedback). */

@keyframes heroEmBloom {
  0%, 100% { opacity: 1; }
  50%      { opacity: .92; }
}
/* Motion off → no breathing pulse, just static bloom */
html[data-motion="off"] .land-hero h1 em,
html[data-motion="still"] .land-hero h1 em {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .land-hero h1 em { animation: none !important; }
}

/* =====================================================================
 * v729 — DASHBOARD LINE CLEANUP
 *
 * User: 'in the dashboard of obsidian and dark mode and probably even
 * light, just double check for random lines. I feel like there might
 * be too many, like, random lines there that don't need to be there.'
 *
 * The Dashboard has several places where stray <hr>-like dividers or
 * card outlines fight the seamless direction. Kill them in all 3
 * surviving themes.
 * ===================================================================== */
.cbd-coach,
.cbd-cheat,
.cbd-rem-card,
.cbd-notes-card,
.cbd-pinned,
.cbd-prod,
.cbd-greet,
.cbd-quick,
.cbd-section,
.cbd-section-head,
.cbd-block,
.cbd-card {
  /* kill spurious hairline borders / dividers that don't belong */
  border-top: none !important;
}
.cbd-section + .cbd-section,
.cbd-block + .cbd-block,
.cbd-row + .cbd-row {
  /* sections that follow other sections shouldn't add an extra divider */
  border-top: none !important;
}

/* =====================================================================
 * v729 — QUICK REFERENCE: kill frost on Obsidian (was glassy)
 *
 * User: 'the quick reference, make sure it's not frosty because in
 * obsidian right now, it is frosty.'
 *
 * .cbd-quick is the 'Open the Pre-Shift Checklist' callout strip.
 * Force solid (non-frosted) background on obsidian — matches the
 * no-frost direction established in v709.
 * ===================================================================== */

[data-theme="dark"] .cbd-quick,
[data-theme="dark"] .cbd-quick-strip,
[data-theme="dark"] .cbd-quickref,
[data-theme="dark"] a.cbd-quick {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(20, 20, 28, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* =====================================================================
 * v745 — DASHBOARD greeting: FULL TOP-ROW NUKE.
 *
 * v740 only stripped chrome from .cbd-greet (the inner flex). The OUTER
 * .cbd-top still had a glass background on dark/obsidian + a stale dark
 * rule on light. User screenshot showed a white pill still wrapping the
 * "Good afternoon, clinician." text in light theme.
 *
 * User: "this white pill shape is ugly just remove it and have the text
 * just floating — make it seamless."
 *
 * Approach: explicit !important transparent + no border + no shadow on
 * EVERY element in the top row across all 3 surviving themes
 * (light / dark / obsidian). The time, greeting, and quip now float
 * directly on the page background with only padding for spacing.
 * ===================================================================== */
html .cbd-top,
html .cbd-greet,
html .cbd-greet-stack,
html .cbd-greet-text,
html .cbd-greet-quip,
html[data-theme="light"] .cbd-top,
html[data-theme="light"] .cbd-greet,
html[data-theme="light"] .cbd-greet-stack,
html[data-theme="light"] .cbd-greet-text,
html[data-theme="light"] .cbd-greet-quip,
html[data-theme="dark"] .cbd-top,
html[data-theme="dark"] .cbd-greet,
html[data-theme="dark"] .cbd-greet-stack,
html[data-theme="dark"] .cbd-greet-text,
html[data-theme="dark"] .cbd-greet-quip{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Also kill the ::before / ::after sheen overlays the dark theme adds. */
html[data-theme="dark"] .cbd-top::before,
html[data-theme="dark"] .cbd-top::after{
  display: none !important;
  content: none !important;
}

/* =====================================================================
 * v741 — BEDSIDE TAP TARGETS + INSTANT CLICK FEEDBACK
 *
 * David: "Make it for clinicians to truly use. Click should feel fast."
 *
 * 1) Minimum 44px tap targets on real action buttons. Apple HIG / WCAG 2.5.5.
 *    Skips close-x style buttons, tab buttons, icon-only buttons, and FAB
 *    children (those have their own sizing rules upstream).
 * 2) :active scale-down on every clickable surface so the user gets haptic
 *    feedback in the same frame as the press — even before any nav fires.
 * 3) cursor:pointer on cards and chip-like clickables that should look tappable.
 * ===================================================================== */

/* (1) Tap target heights — only for "real" buttons, not the dozens of micro-
 *     buttons that already have their own pixel sizes (close-x, chips, tabs). */
button.btn,
.cta,
.cta-primary,
.cta-secondary,
.cb-vn-btn:not(.small),
.cb-st-btn:not(.small),
.cb-scn-btn,
.cb-qb-tool,
.theme-btn,
.fx-btn,
.land-cta {
  min-height: var(--tap-min, 44px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* (2) Instant click feedback — :active scale-down. CSS-only, runs even if
 *     handler is slow. transform: scale(.98) is one composite-layer change
 *     so it's effectively free perf-wise. */
button,
[role="button"],
.cb-ed-card,
.feat-card,
.audience-card,
.cbd-quick,
.module-card,
.cb-callout a,
.tab,
.chip,
.tag,
.theme-btn,
.fx-btn {
  transition: transform .12s cubic-bezier(.34, 1.56, .64, 1),
              background-color .15s,
              border-color .15s,
              box-shadow .2s,
              color .15s;
}
button:active:not(:disabled),
[role="button"]:active,
.cbd-quick:active,
.feat-card:active,
.audience-card:active,
.cb-ed-card:active,
.theme-btn:active,
.fx-btn:active,
.chip:active,
.tag:active {
  transform: translateY(0) scale(.97);
}

/* (3) cursor:pointer on the surfaces that should feel tappable but might
 *     not (links inside cards, cards themselves, chips). */
.cbd-quick,
.cb-ed-card,
.feat-card,
.audience-card,
.pillar-card,
.module-card,
.cb-qb-tool,
.theme-btn,
.fx-btn,
.chip,
.tag,
.cb-scn-chip,
[role="button"] {
  cursor: pointer;
}

/* Touch-device disable hover lift (prevents sticky-hover after tap on iOS) */
@media (hover: none) {
  .cbd-quick:hover,
  .feat-card:hover,
  .audience-card:hover,
  .module-card:hover,
  .cb-ed-card:hover {
    transform: none !important;
  }
}

/* =====================================================================
 * v743 — MODULE AUDIT PATTERN: TL;DR + Go-deeper expand
 *
 * David: "make sure the information is in-depth but also minimalistic to
 * the point that students can get the benefit of reading this stuff, and
 * then they can click into more... So just make sure it's more student
 * oriented."
 *
 * Two new authoring primitives that any module page can adopt:
 *
 *   <div class="cb-tldr">
 *     <span class="cb-tldr-lbl">Quick take</span>
 *     The 1-3 sentence summary a student can read in 10 seconds.
 *   </div>
 *
 *   <details class="cb-deeper">
 *     <summary>↓ Go deeper</summary>
 *     ... the full detailed content (tables, mechanism, evidence stats, etc.)
 *   </details>
 *
 * Goal: a student can SCAN a module page top-to-bottom in 60 seconds and
 * get the high-yield clinical bits, then click into any section that needs
 * the full mechanism / dosing / evidence. Reduces cognitive overload + makes
 * CB feel more like a study aid than a textbook.
 *
 * Rolling pattern out one module at a time. Shoulder is exemplar.
 * ===================================================================== */
.cb-tldr {
  background: linear-gradient(135deg, rgba(var(--ar), .07), rgba(var(--ar), .02));
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  margin: 14px 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  position: relative;
}
.cb-tldr-lbl {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 6px;
}

[data-theme="dark"] .cb-tldr{
  background: linear-gradient(135deg, rgba(var(--ar), .12), rgba(var(--ar), .04));
}

/* Native <details>-based "Go deeper" expand. No JS needed. */
details.cb-deeper {
  margin: 12px 0 20px;
  border: 1px solid var(--border, rgba(0, 0, 0, .08));
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg2, #fff);
  transition: box-shadow .25s, border-color .25s;
}
details.cb-deeper[open] {
  border-color: rgba(var(--ar), .35);
  box-shadow: 0 4px 14px rgba(var(--ar), .08);
}
details.cb-deeper > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 18px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  background: linear-gradient(135deg, rgba(var(--ar), .05), transparent);
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  transition: background .2s, color .2s;
  min-height: 44px;
}
details.cb-deeper > summary::-webkit-details-marker { display: none; }
details.cb-deeper > summary::before {
  content: '↓';
  display: inline-block;
  font-family: inherit;
  font-size: 14px;
  width: 18px;
  text-align: center;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
details.cb-deeper[open] > summary::before {
  transform: rotate(180deg);
}
details.cb-deeper > summary:hover {
  background: linear-gradient(135deg, rgba(var(--ar), .12), rgba(var(--ar), .03));
  color: var(--accent);
}
details.cb-deeper > *:not(summary) {
  padding: 14px 20px 16px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text2);
  animation: cbDeeperReveal .25s ease-out;
}
@keyframes cbDeeperReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
details.cb-deeper > div:not(.cb-deeper-body),
details.cb-deeper > div:not(.cb-deeper-body) > * { padding: 0; }
details.cb-deeper > .cb-deeper-body {
  padding: 16px 20px 18px;
  color: var(--text);
}

[data-theme="dark"] details.cb-deeper{
  background: rgba(24, 24, 28, .60);
  border-color: rgba(255, 255, 255, .08);
}
[data-theme="dark"] details.cb-deeper[open]{
  background: rgba(24, 24, 28, .85);
  border-color: rgba(var(--ar), .38);
}

/* =====================================================================
 * v749 — CROSS-THEME SEAMLESS POLISH
 *
 * David: "continue to still make the themes across all the themes still
 * more seamless." Soften the visual chrome so cards + surfaces feel like
 * part of the page, not boxes sitting on top of it.
 *
 * Three moves:
 *   1) Soften CARD BORDERS — drop opacity 30-40% so edges are barely there
 *      instead of hard lines.
 *   2) Reduce DROP SHADOWS on cards — was 8-12px y-offset with .30 alpha,
 *      now 4-6px with .14 alpha. The cards float on the page bg rather
 *      than punching out of it.
 *   3) Match dashboard section HEADERS to the page bg — these were getting
 *      slight bg tints from upstream rules; lock them to transparent.
 * ===================================================================== */

/* Card borders — softer across all 3 themes (extended in v751 to include
   homepage-specific cards: .path-card, .sister-card, .cb-positioning-col,
   .land-stat — so the homepage matches the dashboard's seamless feel). */
html[data-theme="light"] .feat-card,
html[data-theme="light"] .audience-card,
html[data-theme="light"] .pillar-card,
html[data-theme="light"] .land-pillar,
html[data-theme="light"] .pp-tier-card,
html[data-theme="light"] .cb-ed-card,
html[data-theme="light"] .module-card,
html[data-theme="light"] .path-card,
html[data-theme="light"] .sister-card,
html[data-theme="light"] .cb-positioning-col,
html[data-theme="light"] .land-stat,
html[data-theme="light"] .cbd-coach,
html[data-theme="light"] .cbd-cheat,
html[data-theme="light"] .cbd-prod,
html[data-theme="light"] .cbd-rem-card,
html[data-theme="light"] .cbd-pinned {
  border-color: rgba(0, 0, 0, .045) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .04) !important;
}
html[data-theme="dark"] .feat-card,
html[data-theme="dark"] .audience-card,
html[data-theme="dark"] .pillar-card,
html[data-theme="dark"] .land-pillar,
html[data-theme="dark"] .pp-tier-card,
html[data-theme="dark"] .cb-ed-card,
html[data-theme="dark"] .module-card,
html[data-theme="dark"] .path-card,
html[data-theme="dark"] .sister-card,
html[data-theme="dark"] .cb-positioning-col,
html[data-theme="dark"] .land-stat,
html[data-theme="dark"] .cbd-coach,
html[data-theme="dark"] .cbd-cheat,
html[data-theme="dark"] .cbd-prod,
html[data-theme="dark"] .cbd-rem-card,
html[data-theme="dark"] .cbd-pinned {
  border-color: rgba(255, 255, 255, .055) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22) !important;
}


/* Dashboard section eyebrows / headers — fully transparent, no bg tint */
html .cbd-quick-h,
html .cbd-quick-h::after {
  background: transparent !important;
  background-color: transparent !important;
}
html .cbd-quick-h::after {
  /* Soften the gradient divider so it whispers instead of shouts */
  background-image: linear-gradient(90deg, rgba(var(--ar), .14), transparent) !important;
}

/* Lighten the "Five Minutes Before You Walk In" CTA chrome — feels too boxy */
html #cbd-preshift-cta {
  border-color: rgba(245, 158, 11, .20) !important;
  box-shadow: none !important;
}

/* ============================================================
 * v752 — OBSIDIAN GALAXY + CLEAR GLASS
 * David's call: "frosty glass — gone. Make it clear & see-through.
 * Obsidian needs an animated galaxy bg that looks pretty."
 *
 * Strategy:
 *  1. Override the v711-v714 opaque Obsidian card backgrounds with
 *     near-transparent versions. Cards become floating outlines on
 *     the galaxy, not solid panels.
 *  2. Layer an animated multi-cloud nebula on top of body via
 *     .cb-mesh-bg + ::before + ::after. Different drift speeds for
 *     parallax depth. Combined with the existing cb-bg-galaxy.js
 *     starfield, this reads as a real galaxy.
 *  3. Boost body radial gradient with deeper galaxy palette
 *     (purples/cyans/magentas).
 *  4. Respect prefers-reduced-motion (animations halt to static).
 * ============================================================ */

/* --- 1. CLEAR GLASS: Obsidian dashboard surfaces become see-through --- */
/* html[data-theme="obsidian"] prefix beats the v711-v714 rules above which
   use plain [data-theme="obsidian"] (same specificity → later wins; this
   block IS later, but adding html prefix is belt + suspenders for cascades). */


/* Patient cards + game tiles (the patient tile in David's "DONE" screenshot) */


/* "All N patients seen · enjoy a calm shift" banner — keep its green signal
   but make the panel see-through */


/* Search bar — most see-through of all (the most frosty in screenshot) */


/* --- 2. ANIMATED GALAXY: richer body bg palette --- */


/* --- 3. ANIMATED NEBULA LAYERS on .cb-mesh-bg --- */
/* Primary nebula — drifts + breathes (replaces the generic cbMeshDrift) */


/* Second nebula — drifts the OTHER direction for parallax depth */


/* Third layer — slow rotating spiral-arm hint */


@keyframes cbObsidianGalaxy{
  0%, 100% { transform: translate(0%, 0%)   scale(1)    rotate(0deg);  opacity: 1; }
  33%      { transform: translate(2%, -2%)  scale(1.05) rotate(3deg);  opacity: .96; }
  66%      { transform: translate(-2%, 2%)  scale(1.08) rotate(-2deg); opacity: 1; }
}
@keyframes cbObsidianGalaxyReverse{
  0%, 100% { transform: translate(0%, 0%)   scale(1.05) rotate(0deg); }
  50%      { transform: translate(-3%, 3%)  scale(1.10) rotate(-4deg); }
}
@keyframes cbObsidianSpiral{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  
}

/* ============================================================
 * v753 — OBSIDIAN: KILL THE BOX OUTLINES + MORE SPARK
 *
 * David's follow-up to v752: "remove the box-like outlines, keep
 * the words and stuff there, make sure ALL cards/buttons are
 * see-thru. Add a lil more spark, match the theme."
 *
 * v752 still showed visible borders + small bg on the metric pills
 * (LOCATION/STREAK/NOTES/UNITS), the search bar, and tool tiles.
 * This pass:
 *   1. Small chrome (pills, search, day tabs) → fully chromeless.
 *      Text/icons float directly on the galaxy. No bg, no border,
 *      no shadow. Hover/focus brings a brief tint for affordance.
 *   2. Big panels (productivity calc, coach, schedule) → drop the
 *      v752 bg from .22 alpha to .10. Border-only outline.
 *   3. Boost nebula alpha (was .16-.20 → now .24-.30) so the
 *      galaxy reads more vibrantly behind the now-chromeless UI.
 *   4. New CSS-only TWINKLE FIELD via body::before (overrides the
 *      grain pseudo on Obsidian only — galaxy aesthetic doesn't
 *      need fabric-grain texture).
 *   5. New CSS-only SHOOTING STAR via body::after (overrides the
 *      Obsidian vignette — replaces a barely-visible corner darken
 *      with an occasional shooting streak every ~14s).
 * ============================================================ */

/* --- 1a. FULLY CHROMELESS: stat pills + top row container --- */

/* Hover affordance — faint accent wash so the click target is felt */


/* --- 1b. TOOL TILES: transparent except the .featured purple gradient --- */
/* The featured (AI Voice Note) tile has an inline linear-gradient style we
   must preserve — match it by leaving inline-styled tiles alone. */



/* --- 1c. SEARCH BAR: chromeless, only the icon + placeholder visible --- */



/* --- 1d. INPUTS inside the productivity calc — faint outline, focus glow --- */



/* --- 2. BIG PANELS: drop v752's .22 bg → .10 (much more see-through) --- */
/* These were already overridden in v752 with .22 alpha + border + shadow +
   blur. Now: .10 alpha, border-only outline, no shadow, no blur. */


/* "All N patients seen" banner — keep green signal but lighter chrome */


/* --- 3. MORE SPARK: boost nebula alpha (was .16-.20 → .24-.30) --- */






/* --- 4. TWINKLE FIELD via body::before (Obsidian only) ---
   The base body::before is a fractal-noise grain (line 585) — barely visible
   on Obsidian (opacity .025). Override on Obsidian only: replace with a
   field of tiny colored pinpricks that pulse opacity in a slow sine. */


@keyframes cbObsidianTwinkle{
  0%, 100% { opacity: .65; }
  50%      { opacity: 1;   }
}

/* --- 5. SHOOTING STAR via body::after (Obsidian only) ---
   The base body::after is a soft vignette (line 549). Override on Obsidian:
   replace with a tiny bright dot that streaks diagonally every 14s. */


@keyframes cbObsidianShootingStar{
  0%   { transform: translate(0, 0);          opacity: 0; }
  3%   { transform: translate(-30px, 18px);    opacity: 1; }
  10%  { transform: translate(-540px, 330px);  opacity: 0; }
  100% { transform: translate(-540px, 330px);  opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  
  
}

/* ============================================================
 * v754 — OBSIDIAN: BULLETPROOF the chromeless metric pills.
 *
 * David sent a screenshot showing Obsidian STILL had visible
 * rectangular boxes around the WEATHER/STREAK/NOTES/UNITS pills,
 * while Dark mode shows them chromeless (which he wants to copy).
 *
 * v753 already targets .cbd-metric on Obsidian with !important
 * transparent bg + no border. By spec it SHOULD win. If something
 * cached or a higher-specificity rule slipped in, this v754 layer
 * makes it impossible to lose:
 *
 *  - Match the EXACT v745 pattern (which works for .cbd-top) so
 *    the cascade behavior is identical
 *  - Add ID-based selectors (#cbd-metric-* has higher specificity
 *    than the v711 class selector)
 *  - Re-include compound-class selectors (.cbd-metric.is-action,
 *    .cbd-metric.cbd-weather) to beat any future override
 *  - Use the universal-attribute trick `[class*="cbd-metric"]`
 *    on Obsidian to catch any element whose class CONTAINS the
 *    metric token (defensive against rename)
 * ============================================================ */
html .cbd-metric,
html .cbd-metric.is-action,
html .cbd-metric.cbd-weather,
html[data-theme="dark"] .cbd-metric,
html[data-theme="dark"] .cbd-metric.is-action,
html[data-theme="dark"] .cbd-metric.cbd-weather{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 none transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 none transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Restore the rest-state to truly chromeless, while keeping a faint
   accent wash on hover so Obsidian users still feel the tap-target. */


/* ============================================================
 * v755 — DARK + OBSIDIAN: full chromeless sweep
 *
 * David's stacked feedback:
 *   "make this clear, this is on dark mode" (tool tiles)
 *   "make this cleaner and seamless — don't have the rectangle
 *    and the pill shape stuff, just the icon and the search text"
 *   "there's a weird glow and like a box appearance please remove
 *    the box and just have the text there" (search bar)
 *   "make these card see thru" (greeting card)
 *
 * Approach: replicate the v753/v754 Obsidian chromeless treatment
 * on Dark too. Every non-featured tool tile, the search bar, and
 * the greeting card become text-on-galaxy. Borders/shadows gone,
 * backgrounds transparent. The .featured AI Voice Note tile keeps
 * its theme-accent gradient (it's the primary CTA).
 *
 * Apply to BOTH [data-theme="dark"] and [data-theme="obsidian"]
 * so the look is identical across the two dark modes.
 * ============================================================ */

/* --- TOOL TILES: kill the rectangle/pill shape, just icon + text --- */
/* Both dark + obsidian, but NOT .featured (AI Voice Note keeps gradient),
   and NOT tiles with inline linear-gradient backgrounds (Diagnosis Search
   etc. have custom colored gradient buttons that should stay vivid). */
html[data-theme="dark"]    .cbd-quick:not(.featured):not([style*="linear-gradient"]){
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 none transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 none transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background .25s ease, transform .25s cubic-bezier(.16,1,.3,1) !important;
}
/* Hover affordance — faint accent wash + lift, NO border return */
html[data-theme="dark"]    .cbd-quick:not(.featured):not([style*="linear-gradient"]):hover{
  background: rgba(var(--ar),.08) !important;
  border: 0 none transparent !important;
  border-radius: 12px !important;
  transform: translateY(-2px);
}
/* Keep the numbered key chip readable on the chromeless tile */
html[data-theme="dark"]    .cbd-quick:not(.featured) .cbd-quick-key{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* --- SEARCH BAR: no glow, no box, just the magnifier + placeholder --- */
html[data-theme="dark"] .cbd-search{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 none transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 none transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Subtle hover/focus hint — bottom-only hairline that fades up on interact */
html[data-theme="dark"] .cbd-search:hover,
html[data-theme="dark"] .cbd-search:focus-within{
  background: transparent !important;
  border: 0 none transparent !important;
  border-bottom: 1px solid rgba(var(--ar),.30) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Also nuke any inner shadow/glow on the input element itself */
html[data-theme="dark"] .cbd-search input,
html[data-theme="dark"] .cbd-search input[type="search"]{
  background: transparent !important;
  border: 0 none transparent !important;
  box-shadow: none !important;
  outline: 0 none transparent !important;
}

/* --- GREETING CARD: text floats, no box --- */
/* v745 already kills .cbd-top + .cbd-greet bg/border. But David's screenshot
   showed a faint card behind the "Good evening, clinician" + quip — that came
   from a subtle drop-shadow or a parent .cbd-* wrapping with a faint bg.
   Belt-and-suspenders: zero out backgrounds on every greeting descendant on
   both dark and obsidian. */
html[data-theme="dark"]    .cbd-top,
html[data-theme="dark"]    .cbd-greet,
html[data-theme="dark"]    .cbd-greet-stack,
html[data-theme="dark"]    .cbd-greet-text,
html[data-theme="dark"]    .cbd-greet-quip,
html[data-theme="dark"]    .cbd-time{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 none transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* --- METRIC PILLS on DARK too (we already did Obsidian in v754) --- */
/* Mirror v754 on dark mode so the WEATHER/STREAK/NOTES/UNITS pills look
   identical between dark and obsidian. */
html[data-theme="dark"] .cbd-metric,
html[data-theme="dark"] .cbd-metric.is-action,
html[data-theme="dark"] .cbd-metric.cbd-weather,
html[data-theme="dark"] #cbd-metric-weather,
html[data-theme="dark"] #cbd-metric-streak,
html[data-theme="dark"] #cbd-metric-notes,
html[data-theme="dark"] #cbd-metric-units{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 none transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] .cbd-metric.is-action:hover,
html[data-theme="dark"] .cbd-metric.cbd-weather:hover,
html[data-theme="dark"] #cbd-metric-streak:hover,
html[data-theme="dark"] #cbd-metric-notes:hover,
html[data-theme="dark"] #cbd-metric-units:hover,
html[data-theme="dark"] #cbd-metric-weather:hover{
  background: rgba(var(--ar),.08) !important;
  border-radius: 8px !important;
}

/* ============================================================
 * v757 — OBSIDIAN: darker base + contrast lift + gradient text
 *
 * David: "make the obsidian theme even darker with more contrast
 * colors and appropriate gradient of some text please."
 *
 * Companion to the theme.css token changes (--bg → #020207,
 * --text → #ffffff, brighter --text2/3, intensified chroma).
 * This block adds gradient text treatments where the chroma
 * palette earns its place — section headers, big numbers, the
 * greeting, the time pill. Subtle drop-shadows give the gradient
 * text a faint glow against the deeper black.
 *
 * Body-bg gradients above were updated separately to use
 * var(--bg, #020207) so the token drives the base color.
 * ============================================================ */

/* Helper: the standard 3-stop chroma gradient + glow. Used by every
   gradient-text target below. */

/* --- Greeting "Good evening, clinician." — em already had it; reinforce --- */


/* --- Time pill (1:21 PM · TUE MAY 26) — v759: SOLID bright purple,
   not gradient. Gradient on 11px monospace caps + 1.6 letter-spacing was
   invisible against the deeper Obsidian bg. Just give it a strong color
   + soft glow so it reads instantly. --- */


/* --- Section headers (Today's tools, Practice, etc.) — eyebrow text --- */



/* --- Big numbers: Productivity % + Streak/Notes/Units counts --- */


/* --- Productivity Calculator header — "📊 Productivity Calculator" --- */


/* --- Game card titles (Scenario Builder, Rapid Fire, etc.) — pop --- */


/* --- Tool tile labels (AI Voice Note, Diagnosis Search, etc.) ---
   Stay solid white for legibility (gradient on small UI text is mush).
   But the .featured tile keeps its high-contrast white-on-gradient. */


/* --- Contrast lift on body text inside any glass panel ---
   With the darker bg, the v755 chromeless surfaces have less ambient
   glow. Make sure body copy on cards reads as pure white. */



/* --- Borders: bump from v755's rgba(255,255,255,.06) → .10 on the bigger
   panels so they're slightly more present against the deeper black ---
   (Stat pills + tool tiles stay border-less per David's chromeless ask.) */


/* --- Hero em (homepage / module heroes) — keep + glow up --- */


/* ============================================================
 * v758 — Search bar (truly no highlight) + Schedule empty state
 * cleanup (kill dashed cream box) + smoother click animations
 *
 * David: "remove that highlighted color on the search" + "fix this
 * background, it kinda messed up" (Today's Schedule empty state)
 * + "make the click animation way more smoother please"
 *
 * ROOT CAUSES:
 *   - Search: my v755 hover/focus-within still painted a purple
 *     border-bottom hairline (perceived as "highlight"). Also the
 *     inner <input> had browser default focus styles.
 *   - Schedule empty: the inline <style> block uses #cb-sched-section
 *     .cb-sched-empty with specificity (1,1,0) which beats my v755
 *     attribute selector (0,2,1). Re-target with the ID present in
 *     the selector to win.
 *   - Click anim: BURST_LIFETIME 680ms with cubic-bezier(.16,1,.3,1)
 *     felt snappy. Bumped to 950ms with gentler ease curve (the
 *     change lives in cb-galaxy-fx.js).
 * ============================================================ */

/* --- SEARCH BAR: no highlight, ever (incl. hover/focus) --- */
html[data-theme="dark"]    .cbd-search,
html[data-theme="dark"]    .cbd-search:hover,
html[data-theme="dark"]    .cbd-search:focus-within,
html[data-theme="dark"]    .cbd-search:active{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 none transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 none transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}
/* Inner input — also zero focus chrome on every state */
html[data-theme="dark"]    .cbd-search-input,
html[data-theme="dark"]    .cbd-search-input:focus,
html[data-theme="dark"]    .cbd-search-input:hover,
html[data-theme="dark"]    .cbd-search-input:active,
html[data-theme="dark"]    .cbd-search input,
html[data-theme="dark"]    .cbd-search input:focus,
html[data-theme="dark"]    .cbd-search input:hover,
html[data-theme="dark"]    .cbd-search input:active{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 none transparent !important;
  box-shadow: none !important;
  outline: 0 none transparent !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
/* Autofill kill — Chrome/Safari paint a yellow bg on autofilled inputs */
html[data-theme="dark"]    .cbd-search input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* --- TODAY'S SCHEDULE empty state: kill the dashed cream box ---
   Beats the inline #cb-sched-section .cb-sched-empty (1,1,0) by adding
   the ID to my selector + data-theme attribute (1,2,1). */
html[data-theme="dark"]    #cb-sched-section .cb-sched-empty,
html[data-theme="dark"]    #cb-sched-section .cb-sched-empty:hover{
  background:
    linear-gradient(135deg, rgba(52,211,153,.04) 0%, rgba(52,211,153,.02) 60%, rgba(45,212,160,.03) 100%),
    rgba(17,17,26,.10) !important;
  border: 1px solid rgba(255,255,255,.10) !important;  /* SOLID, no dashes */
  border-radius: 14px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  transition: border-color .35s cubic-bezier(.25,.46,.45,.94), background .35s cubic-bezier(.25,.46,.45,.94) !important;
}

html[data-theme="dark"]    #cb-sched-section .cb-sched-empty:hover{
  border-color: rgba(52,211,153,.32) !important;
  background:
    linear-gradient(135deg, rgba(52,211,153,.08) 0%, rgba(52,211,153,.04) 60%, rgba(45,212,160,.05) 100%),
    rgba(17,17,26,.14) !important;
}


/* Inner dropzone (if .cb-sched-empty wraps an inner dashed area) — kill any
   nested dashed borders on the same themes. */
html[data-theme="dark"]    #cb-sched-section .cb-sched-empty *[style*="dashed"]{
  border-style: solid !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* --- Smoother transitions on small UI: tile hover, search hover etc. --- */
/* Was .25s cubic-bezier(.16,1,.3,1) — feels snappy. New: .42s with
   gentler ease-out-quad. Applies to dashboard hover targets on dark+obsidian. */
html[data-theme="dark"]    .cbd-quick,
html[data-theme="dark"]    .cbd-metric{
  transition:
    background .42s cubic-bezier(.25,.46,.45,.94),
    border-color .42s cubic-bezier(.25,.46,.45,.94),
    box-shadow .42s cubic-bezier(.25,.46,.45,.94),
    transform .42s cubic-bezier(.25,.46,.45,.94) !important;
}

/* ============================================================
 * v759 — GAMES POLISH (shared across all 5 games)
 *
 * David: "focus on the games that we have — make them cleaner
 * and visually appealing."
 *
 * Each game (Anatomy ID, Rapid Fire, Scenario Builder, Match the
 * Test, Predict the Prognosis) ships its own per-prefix inline
 * <style> block (.cb-aid-, .cb-rf-, .cb-scn-, .cb-tm-, .cb-pg-).
 * Rather than rewrite each file, this shared layer targets every
 * prefix at once via grouped selectors so the visual language is
 * uniform — same modal entrance, same correct/wrong feedback,
 * same chromeless-on-Obsidian treatment.
 * ============================================================ */

/* --- 1. Backdrop (all games) — galaxy-friendly --- */
.cb-aid-bg, .cb-rf-bg, .cb-scn-bg, .cb-tm-bg, .cb-pg-bg{
  background: rgba(2,2,7,.78) !important;
  backdrop-filter: var(--glass-filter-standard) !important;
  -webkit-backdrop-filter: var(--glass-filter-standard) !important;
  animation: cbGameFadeIn .35s cubic-bezier(.25,.46,.45,.94) !important;
}
@keyframes cbGameFadeIn{ from { opacity: 0 } to { opacity: 1 } }

/* --- 2. Modal entry — gentler than the bouncy .35s pop --- */
.cb-aid-modal, .cb-rf-modal, .cb-scn-modal, .cb-tm-modal, .cb-pg-modal{
  animation: cbGamePopIn .48s cubic-bezier(.22,1,.36,1) !important;
}
@keyframes cbGamePopIn{
  from { transform: translateY(18px) scale(.97); opacity: 0 }
  to   { transform: translateY(0)    scale(1);   opacity: 1 }
}
/* Dark / obsidian: deeper bg + faint chroma tint + lifted shadow */
html[data-theme="dark"]    .cb-aid-modal,
html[data-theme="dark"]    .cb-rf-modal,
html[data-theme="dark"]    .cb-scn-modal,
html[data-theme="dark"]    .cb-tm-modal,
html[data-theme="dark"]    .cb-pg-modal{
  background:
    linear-gradient(135deg, rgba(52,211,153,.04) 0%, rgba(52,211,153,.02) 50%, rgba(45,212,160,.03) 100%),
    rgba(13,13,22,.96) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.65),
    0 10px 24px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Header divider + footer styling — softer on dark/obsidian */
html[data-theme="dark"]    .cb-aid-head,
html[data-theme="dark"]    .cb-rf-head,
html[data-theme="dark"]    .cb-scn-head,
html[data-theme="dark"]    .cb-tm-head,
html[data-theme="dark"]    .cb-pg-head{
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
html[data-theme="dark"]    .cb-aid-foot,
html[data-theme="dark"]    .cb-rf-foot,
html[data-theme="dark"]    .cb-scn-foot,
html[data-theme="dark"]    .cb-tm-foot,
html[data-theme="dark"]    .cb-pg-foot{
  background: rgba(255,255,255,.02) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* --- 3. Choice buttons (MCQ games: aid, rf, pg) --- */
.cb-aid-choice, .cb-rf-choice, .cb-pg-choice{
  transition:
    background .28s cubic-bezier(.25,.46,.45,.94),
    border-color .28s cubic-bezier(.25,.46,.45,.94),
    transform .28s cubic-bezier(.25,.46,.45,.94),
    box-shadow .28s cubic-bezier(.25,.46,.45,.94) !important;
}
.cb-aid-choice:hover:not(.correct):not(.wrong):not(.dimmed),
.cb-rf-choice:hover:not(.correct):not(.wrong):not(.dimmed),
.cb-pg-choice:hover:not(.correct):not(.wrong):not(.dimmed){
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(99,102,241,.18) !important;
}
/* Dark/obsidian — base bg matches modal */
html[data-theme="dark"]    .cb-aid-choice,
html[data-theme="dark"]    .cb-rf-choice,
html[data-theme="dark"]    .cb-pg-choice{
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #f5f5fa !important;
}
html[data-theme="dark"]    .cb-aid-choice:hover:not(.correct):not(.wrong):not(.dimmed),
html[data-theme="dark"]    .cb-rf-choice:hover:not(.correct):not(.wrong):not(.dimmed),
html[data-theme="dark"]    .cb-pg-choice:hover:not(.correct):not(.wrong):not(.dimmed){
  background: rgba(52,211,153,.10) !important;
  border-color: rgba(52,211,153,.45) !important;
}

/* CORRECT — gradient bg + glow ring + scale-pop */
.cb-aid-choice.correct, .cb-rf-choice.correct, .cb-pg-choice.correct{
  border-color: #10b981 !important;
  background: linear-gradient(135deg, rgba(16,185,129,.20), rgba(34,197,94,.08)) !important;
  color: #6ee7b7 !important;
  font-weight: 800 !important;
  box-shadow:
    0 0 0 4px rgba(16,185,129,.20),
    0 12px 28px rgba(16,185,129,.24) !important;
  animation: cbGameCorrectPop .46s cubic-bezier(.34,1.56,.64,1) !important;
}
.cb-aid-choice.correct .cb-aid-choice-letter,
.cb-rf-choice.correct  .cb-rf-choice-letter,
.cb-pg-choice.correct  .cb-pg-choice-letter{
  background: #10b981 !important;
  color: #fff !important;
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(16,185,129,.25);
}
@keyframes cbGameCorrectPop{
  0%   { transform: scale(1) }
  25%  { transform: scale(1.025) }
  55%  { transform: scale(.995) }
  100% { transform: scale(1) }
}
/* WRONG — gradient bg + glow ring + shake */
.cb-aid-choice.wrong, .cb-rf-choice.wrong, .cb-pg-choice.wrong{
  border-color: #ef4444 !important;
  background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(220,38,38,.06)) !important;
  color: #fca5a5 !important;
  box-shadow:
    0 0 0 4px rgba(239,68,68,.14),
    0 10px 24px rgba(239,68,68,.20) !important;
  animation: cbGameWrongShake .42s cubic-bezier(.36,.07,.19,.97) !important;
}
.cb-aid-choice.wrong .cb-aid-choice-letter,
.cb-rf-choice.wrong  .cb-rf-choice-letter,
.cb-pg-choice.wrong  .cb-pg-choice-letter{
  background: #ef4444 !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.22);
}
@keyframes cbGameWrongShake{
  0%,100% { transform: translateX(0) }
  15%     { transform: translateX(-6px) }
  30%     { transform: translateX(6px) }
  45%     { transform: translateX(-4px) }
  60%     { transform: translateX(4px) }
  75%     { transform: translateX(-2px) }
}
.cb-aid-choice.dimmed, .cb-rf-choice.dimmed, .cb-pg-choice.dimmed{
  opacity: .35 !important;
  filter: saturate(.4) !important;
  transform: none !important;
}

/* --- 4. Setup chips (region / count / difficulty pickers) --- */
.cb-aid-chip, .cb-rf-chip, .cb-scn-chip, .cb-tm-chip, .cb-pg-chip{
  transition:
    background .25s cubic-bezier(.25,.46,.45,.94),
    border-color .25s cubic-bezier(.25,.46,.45,.94),
    transform .25s cubic-bezier(.25,.46,.45,.94) !important;
}
html[data-theme="dark"]    .cb-aid-chip,
html[data-theme="dark"]    .cb-rf-chip,
html[data-theme="dark"]    .cb-scn-chip,
html[data-theme="dark"]    .cb-tm-chip,
html[data-theme="dark"]    .cb-pg-chip{
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #f5f5fa !important;
}
html[data-theme="dark"]    .cb-aid-chip:hover:not(.active),
html[data-theme="dark"]    .cb-rf-chip:hover:not(.active),
html[data-theme="dark"]    .cb-scn-chip:hover:not(.active),
html[data-theme="dark"]    .cb-tm-chip:hover:not(.active),
html[data-theme="dark"]    .cb-pg-chip:hover:not(.active){
  background: rgba(52,211,153,.10) !important;
  border-color: rgba(52,211,153,.45) !important;
  transform: translateY(-1px) !important;
}


/* --- 5. Big score numbers — drop-shadow glow that matches state --- */
.cb-aid-score-big, .cb-rf-score-big, .cb-tm-score-big, .cb-pg-score-big{
  filter: drop-shadow(0 0 24px rgba(99,102,241,.30));
}
.cb-aid-score-big.good, .cb-rf-score-big.good, .cb-tm-score-big.good, .cb-pg-score-big.good{
  filter: drop-shadow(0 0 28px rgba(16,185,129,.35));
}
.cb-aid-score-big.low, .cb-rf-score-big.low, .cb-tm-score-big.low, .cb-pg-score-big.low{
  filter: drop-shadow(0 0 28px rgba(239,68,68,.30));
}

/* --- 6. Progress bars — thicker + smoother fill --- */
.cb-aid-progress-bar, .cb-rf-progress-bar, .cb-tm-progress-bar, .cb-pg-progress-bar{
  height: 7px !important;
  background: rgba(255,255,255,.06) !important;
}
.cb-aid-progress-fill, .cb-rf-progress-fill, .cb-tm-progress-fill, .cb-pg-progress-fill{
  transition: width .52s cubic-bezier(.25,.46,.45,.94) !important;
  box-shadow: 0 0 12px rgba(99,102,241,.45);
}

/* --- 7. Close button (×) — softer red hover --- */
html[data-theme="dark"]    .cb-aid-x:hover,
html[data-theme="dark"]    .cb-rf-x:hover,
html[data-theme="dark"]    .cb-scn-x:hover,
html[data-theme="dark"]    .cb-tm-x:hover,
html[data-theme="dark"]    .cb-pg-x:hover{
  background: rgba(239,68,68,.12) !important;
  color: #f87171 !important;
}

/* --- 8. Primary CTA button — smoother + brighten on hover --- */
.cb-aid-btn.primary, .cb-rf-btn.primary, .cb-scn-btn.primary, .cb-tm-btn.primary, .cb-pg-btn.primary{
  transition: transform .28s cubic-bezier(.25,.46,.45,.94), box-shadow .28s cubic-bezier(.25,.46,.45,.94), filter .28s ease !important;
}
.cb-aid-btn.primary:hover, .cb-rf-btn.primary:hover, .cb-scn-btn.primary:hover, .cb-tm-btn.primary:hover, .cb-pg-btn.primary:hover{
  filter: brightness(1.08);
}
/* Secondary btn on dark/obsidian — match modal bg */
html[data-theme="dark"]    .cb-aid-btn,
html[data-theme="dark"]    .cb-rf-btn,
html[data-theme="dark"]    .cb-scn-btn,
html[data-theme="dark"]    .cb-tm-btn,
html[data-theme="dark"]    .cb-pg-btn{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #f5f5fa !important;
}

/* --- 9. Teaching pearl / rationale callout — better contrast on dark/obsidian --- */
html[data-theme="dark"]    .cb-aid-teach,
html[data-theme="dark"]    .cb-rf-rationale,
html[data-theme="dark"]    .cb-pg-rationale{
  background: linear-gradient(135deg, rgba(52,211,153,.10), rgba(52,211,153,.04)) !important;
  border-left-color: rgba(52,211,153,.55) !important;
  color: #f5f5fa !important;
}


/* --- 10. Reduced motion — no shake/pop --- */
@media (prefers-reduced-motion: reduce){
  .cb-aid-choice.correct,
  .cb-rf-choice.correct,
  .cb-pg-choice.correct,
  .cb-aid-choice.wrong,
  .cb-rf-choice.wrong,
  .cb-pg-choice.wrong,
  .cb-aid-modal, .cb-rf-modal, .cb-scn-modal, .cb-tm-modal, .cb-pg-modal,
  .cb-aid-bg,    .cb-rf-bg,    .cb-scn-bg,    .cb-tm-bg,    .cb-pg-bg{
    animation: none !important;
  }
}

/* ============================================================
 * v760 — EDUCATION LIBRARY: see-through cards + sidebar
 *
 * David: "make the education see cards see thru."
 *
 * The library page (CB_Education.html) had two opaque surfaces
 * on dark/obsidian:
 *   - .cb-ed-nav (left sidebar holding category list)
 *   - .cb-ed-card (module tiles in the grid)
 *
 * Both pulled var(--glass-tint-strong) / var(--glass-tint) tokens
 * which on Obsidian are heavily opaque (.68 / .88 alpha). Plus
 * theme.css line 1921 explicitly painted .cb-ed-card with
 * rgba(17,17,26,.65) — fully opaque against the galaxy.
 *
 * Match the Dashboard chromeless treatment: faint chroma tint over
 * ~.10 dark, 1px white-alpha border, no blur, no heavy shadow.
 * Hover gets accent-tinted border + lift, no scale-bounce.
 * ============================================================ */

/* --- Sidebar (.cb-ed-nav) — see-through container --- */
html[data-theme="dark"]    .cb-ed-nav{
  background:
    linear-gradient(135deg, rgba(52,211,153,.03) 0%, rgba(52,211,153,.01) 60%, rgba(45,212,160,.02) 100%),
    rgba(17,17,26,.10) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* --- Sidebar nav buttons — transparent, accent wash on hover/active --- */
html[data-theme="dark"]    .cb-ed-nav-btn{
  background: transparent !important;
  color: var(--text2) !important;
  transition:
    background .28s cubic-bezier(.25,.46,.45,.94),
    color .28s cubic-bezier(.25,.46,.45,.94) !important;
}
html[data-theme="dark"]    .cb-ed-nav-btn:hover{
  background: rgba(52,211,153,.08) !important;
  color: #ffffff !important;
}

html[data-theme="dark"]    .cb-ed-nav-btn.active{
  background: rgba(52,211,153,.14) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(52,211,153,.35) !important;
}


/* --- Module cards (.cb-ed-card) — see-through tiles --- */
/* Beats theme.css [data-theme="obsidian"] .cb-ed-card (specificity 0,2,0)
   with html prefix (0,2,1). */
html[data-theme="dark"]    .cb-ed-card{
  background:
    linear-gradient(135deg, rgba(52,211,153,.04) 0%, rgba(52,211,153,.02) 60%, rgba(45,212,160,.03) 100%),
    rgba(17,17,26,.10) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition:
    background .35s cubic-bezier(.25,.46,.45,.94),
    border-color .35s cubic-bezier(.25,.46,.45,.94),
    box-shadow .35s cubic-bezier(.25,.46,.45,.94),
    transform .35s cubic-bezier(.25,.46,.45,.94) !important;
}

/* Hover: accent border + faint accent wash + subtle lift, no big bounce */
html[data-theme="dark"]    .cb-ed-card:hover{
  background:
    linear-gradient(135deg, rgba(52,211,153,.08) 0%, rgba(52,211,153,.04) 60%, rgba(45,212,160,.06) 100%),
    rgba(17,17,26,.14) !important;
  border-color: rgba(52,211,153,.40) !important;
  box-shadow:
    0 12px 32px rgba(52,211,153,.18),
    0 4px 10px rgba(0,0,0,.30) !important;
  transform: translateY(-3px) !important;
}

/* Active (mousedown) state — gentler than the v756 0,0,0,6px ring */
html[data-theme="dark"]    .cb-ed-card:active{
  transform: translateY(-1px) scale(.99) !important;
  transition-duration: 90ms !important;
}

/* Card body text — bright/clear against the see-through tile */
html[data-theme="dark"]    .cb-ed-card-title{
  color: #ffffff !important;
}
html[data-theme="dark"]    .cb-ed-card-desc{
  color: #c8c8de !important;
}

/* --- Education search bar — match dashboard search (chromeless) --- */
html[data-theme="dark"]    .cb-ed-search{
  background: transparent !important;
  border: 0 none transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 none transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"]    .cb-ed-search-input{
  background: transparent !important;
  border: 0 none transparent !important;
  outline: 0 none transparent !important;
  box-shadow: none !important;
}

/* --- Category panel (right side header + count) — light hint, no box --- */
html[data-theme="dark"]    .cb-ed-panel,
html[data-theme="dark"]    .cb-ed-panel-head{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"]    .cb-ed-panel-count{
  background: rgba(52,211,153,.10) !important;
  border: 1px solid rgba(52,211,153,.25) !important;
  color: var(--accent) !important;
}


/* ============================================================
 * v760 — OBSIDIAN: port the v3 PREMIUM glass system from Dark mode
 *
 * David: "the dark mode theme looks way more premium than obsidian,
 * isn't there a design language they both share?"
 *
 * Diagnosis: Dark mode has a full design system in
 * cb-dark-v3-premium.css (v577/v616) — tiered glass surfaces,
 * multi-layer composite shadows (inset top highlight + inset bottom
 * depth + outer shadow + soft accent glow), accent-tinted ::before
 * overlays, refined opacity ladder typography, input focus glows.
 * Obsidian was never ported to that system — it got galaxy + the
 * v755 chromeless treatment instead, which sacrificed depth.
 *
 * This block ports v3 premium to Obsidian with the purple/teal
 * palette. Galaxy bg + twinkle + shooting star stay layered behind.
 *
 * Exceptions (David's earlier asks): metric pills + greeting + the
 * search bar stay chromeless — those are intentional "floating text
 * on the galaxy" elements. Tool tiles + big cards + modals get the
 * premium glass back.
 * ============================================================ */

/* ---------- 1. PREMIUM TOKENS (mirror Dark v616, Obsidian palette) ----- */


/* ---------- 2. TIER 2 — STANDARD CARDS (override v755 chromeless) ------ */
/* Use the same selectors that Dark v3 premium uses, so the systems match. */

/* Inner accent overlay (the v3 ::before tint) */


/* Ensure card content sits above the ::before overlay */

/* Hover: lift + brighter border + soft glow */


/* ---------- 3. TIER 3 — ANCHOR (modals: walk-to-room, EOD, HEP) -------- */




/* ---------- 4. PINNED PATIENT — primary action surface (purple) -------- */



/* ---------- 5. TOOL TILES — Tier 2 glass restored (overrides v755) ----- */
/* The v755 chromeless treatment killed too much depth. Bring back Tier 2
   glass on every non-featured tile so they read as premium glass surfaces. */


/* Featured tile (AI Voice Note) — Obsidian purple gradient (was green) */





/* ---------- 6. TYPOGRAPHY LADDER (mirror v616) ------------------------- */






/* ---------- 7. INPUTS — Obsidian purple focus glow --------------------- */




/* ---------- 8. PRIMARY CTA BUTTONS — confident purple glow ------------- */



/* ---------- 9. KEEP CHROMELESS (David's earlier explicit asks) --------- */
/* The metric pills + greeting + search bar were specifically requested
   to be fully chromeless. Don't restore glass on those — they're the
   intentional "text floating on galaxy" element. v754/v755/v758 rules
   already win for these (later in cascade + same/higher specificity). */

/* ============================================================
 * v764 — MODULE V2 PRIMITIVES (Education redesign Phase 1)
 *
 * Three reusable design tokens the new module pages will compose:
 *
 *   1. .cb-objectives    — "By the end of this section…" banner at
 *                          the top of each tab. Sets the contract for
 *                          the reader (OpenStax-style learning objs).
 *
 *   2. .cb-anchor-rail   — Sticky right-rail container holding the
 *      .cb-anchor-card     "anchor facts" for the module / region:
 *                          OINA for muscles, sens/spec for tests,
 *                          ROM norms, etc. Wikipedia-infobox pattern,
 *                          PT-tuned. Author populates per-module.
 *
 *   3. .cb-section-nav   — Prev / Next sticky footer that lets the
 *                          learner move sequentially through sections
 *                          without hunting through chip-nav.
 *
 * Plus a 3-column layout shell (.cb-modv2-layout) for the preview
 * page: left chip-nav | content | right anchor-rail. The chip-nav
 * and tab-panel selectors stay compatible with existing modules.
 *
 * Theme-aware: light gets soft cream glass; dark/obsidian get the
 * see-through chromeless treatment matching v755/v761.
 * Respects prefers-reduced-motion + window.CBMotion.
 * ============================================================ */

/* ---------- 3-column layout shell ---------- */
.cb-modv2-layout{
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 280px;
  gap: 28px;
  align-items: start;
  margin-top: 18px;
}
@media (max-width: 1100px){
  .cb-modv2-layout{ grid-template-columns: 220px minmax(0, 1fr); }
  .cb-anchor-rail{ display: none; }
}
@media (max-width: 760px){
  .cb-modv2-layout{ grid-template-columns: 1fr; }
}

/* ---------- 1. Learning Objectives banner ---------- */
.cb-objectives{
  margin: 0 0 24px;
  padding: 16px 20px 14px;
  border-radius: 14px;
  background: rgba(167,139,250,.06);
  border: 1px solid rgba(167,139,250,.22);
  border-left: 3px solid var(--accent);
}
.cb-objectives-eyebrow{
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.cb-objectives-list{
  margin: 0;
  padding-left: 18px;
  list-style: none;
}
.cb-objectives-list li{
  position: relative;
  padding: 4px 0 4px 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.cb-objectives-list li::before{
  content: '→';
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--accent);
  font-weight: 800;
  font-size: 13px;
}
/* Dark / Obsidian: keep the accent-tinted glass feel */
html[data-theme="dark"]    .cb-objectives{
  background: rgba(52,211,153,.08) !important;
  border: 1px solid rgba(52,211,153,.22) !important;
  border-left: 3px solid var(--accent) !important;
}


/* ---------- 2. Anchor Facts right-rail ---------- */
.cb-anchor-rail{
  position: sticky;
  top: 88px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  /* Subtle scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(167,139,250,.30) transparent;
}
.cb-anchor-card{
  padding: 16px 18px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  transition:
    background .35s cubic-bezier(.25,.46,.45,.94),
    border-color .35s cubic-bezier(.25,.46,.45,.94);
}
.cb-anchor-card:hover{
  background: rgba(167,139,250,.04);
  border-color: rgba(167,139,250,.20);
}
.cb-anchor-eyebrow{
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text2);
  margin: 0 0 10px;
}
.cb-anchor-eyebrow-icon{
  font-size: 11px;
  line-height: 1;
}
.cb-anchor-title{
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.012em;
  color: var(--text);
  margin: 0 0 10px;
}
.cb-anchor-row{
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 10px;
  padding: 5px 0;
  font-size: 12.5px;
  line-height: 1.45;
  border-top: 1px solid rgba(255,255,255,.05);
}
.cb-anchor-row:first-of-type{ border-top: 0; }
.cb-anchor-label{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--text3);
  align-self: center;
}
.cb-anchor-value{
  color: var(--text);
  font-weight: 600;
  word-break: break-word;
}
.cb-anchor-value strong{
  color: var(--accent);
  font-weight: 800;
}
/* Light theme: a touch more chrome so the card still feels grounded */
html[data-theme="light"] .cb-anchor-card{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
html[data-theme="light"] .cb-anchor-row{
  border-top-color: rgba(0,0,0,.05);
}

/* ---------- 3. Section Prev / Next nav ---------- */
.cb-section-nav{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin: 36px 0 0;
  padding: 18px 0 4px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.cb-section-nav-btn{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  transition:
    background .28s cubic-bezier(.25,.46,.45,.94),
    border-color .28s cubic-bezier(.25,.46,.45,.94),
    transform .28s cubic-bezier(.25,.46,.45,.94);
}
.cb-section-nav-btn.next{ text-align: right; }
.cb-section-nav-btn:hover{
  background: rgba(167,139,250,.08);
  border-color: rgba(167,139,250,.35);
  transform: translateY(-2px);
}
.cb-section-nav-btn[aria-disabled="true"],
.cb-section-nav-btn:disabled{
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
.cb-section-nav-eyebrow{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cb-section-nav-btn.next .cb-section-nav-eyebrow{ justify-content: flex-end; }
.cb-section-nav-title{
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.008em;
  color: var(--text);
  line-height: 1.25;
}
.cb-section-nav-jump{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(167,139,250,.10);
  border: 1px solid rgba(167,139,250,.25);
  color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- Hero block (modv2 preview) ---------- */
.cb-modv2-hero{
  margin: 0 0 20px;
  padding: 18px 22px;
  border-radius: 16px;
  background: transparent;
}
.cb-modv2-hero h1{
  margin: 0 0 6px;
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.025em;
}
.cb-modv2-hero h1 em{
  font-style: normal;
  background: linear-gradient(120deg, var(--chroma-1, var(--accent)) 0%, var(--chroma-2, var(--accent2)) 60%, var(--chroma-3, var(--accent)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cb-modv2-hero-tagline{
  font-size: 15px;
  color: var(--text2);
  margin: 0 0 14px;
  letter-spacing: -.005em;
}
.cb-modv2-hero-meta{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.cb-modv2-hero-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(167,139,250,.08);
  border: 1px solid rgba(167,139,250,.20);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Section heading style (within modv2) ---------- */
.cb-modv2-section-h{
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.018em;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cb-modv2-section-h .cb-modv2-section-no{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--accent);
  text-transform: uppercase;
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce){
  .cb-anchor-card,
  .cb-section-nav-btn{
    transition: none !important;
  }
  .cb-section-nav-btn:hover{ transform: none !important; }
}
html[data-motion="off"] .cb-section-nav-btn:hover,
html[data-motion="still"] .cb-section-nav-btn:hover{
  transform: none !important;
}

/* ============================================================
 * v765 — MODULE V2 polish: seamless wrapper + tighter font rhythm
 *
 * David: "make sure the font is good and also make the outline of
 * that a bit more seamless and cleaner please."
 *
 * The preview's <main> wraps content in .tab-panel (existing module
 * primitive) which carries its own glass bg + border + shadow. That
 * was double-boxing with the Learning Objectives banner inside —
 * two nested rectangles fighting for visual weight.
 *
 * Fix: when .tab-panel sits inside .cb-modv2-layout, strip it back
 * to a transparent container. The accent-tinted .cb-objectives banner
 * (and any pearl/mnemonic callouts inside) become the only chrome.
 *
 * Plus: tighten body font size (16 → 15.5), line-height (1.6 → 1.55),
 * paragraph margins, and section-heading rhythm so the page reads
 * more like a polished reading experience and less like a textbook
 * column.
 * ============================================================ */

/* --- Strip the outer wrapper chrome (only inside modv2 layout) --- */
.cb-modv2-layout .tab-panel,
.cb-modv2-layout .tab-panel.active,
.cb-modv2-layout main > .tab-panel{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 none transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

/* --- Tighter body rhythm inside modv2 main --- */
.cb-modv2-layout main p{
  font-size: 15.5px;
  line-height: 1.62;
  margin: 0 0 14px;
  color: var(--text);
  letter-spacing: -.003em;
}
.cb-modv2-layout main p:last-child{ margin-bottom: 0; }

/* Section heading: a touch tighter, more presence above body */
.cb-modv2-layout .cb-modv2-section-h{
  margin: 0 0 18px !important;
  font-size: 26px !important;
  letter-spacing: -.022em !important;
  line-height: 1.15 !important;
  align-items: center !important;
}
.cb-modv2-layout .cb-modv2-section-h .cb-modv2-section-no{
  display: inline-block;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(167,139,250,.12);
  border: 1px solid rgba(167,139,250,.25);
  font-size: 10px !important;
  letter-spacing: 1.4px !important;
}

/* Learning Objectives: a touch lighter outline so it whispers, not shouts */
.cb-modv2-layout .cb-objectives{
  background: rgba(167,139,250,.05) !important;
  border: 1px solid rgba(167,139,250,.16) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 12px !important;
  padding: 18px 22px 16px !important;
  margin-bottom: 26px !important;
}
.cb-modv2-layout .cb-objectives-eyebrow{
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 10px !important;
}
.cb-modv2-layout .cb-objectives-list li{
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  padding: 5px 0 5px 24px !important;
}

/* Pearl + mnemonic inside modv2: match the lighter outline rhythm so
   nothing reads as "boxy" stack of callouts */
.cb-modv2-layout .cb-pearl,
.cb-modv2-layout .cb-mnemonic,
.cb-modv2-layout .cb-pitfall{
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin: 18px 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Section nav: a little more breathing room above */
.cb-modv2-layout .cb-section-nav{
  margin-top: 42px !important;
  padding-top: 22px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

/* Hero block: tighten meta chip spacing slightly + lighter tagline */
.cb-modv2-hero{
  margin: 0 0 24px !important;
  padding: 8px 0 0 !important;     /* no inset padding — float on galaxy */
}
.cb-modv2-hero h1{
  margin: 0 0 8px !important;
  letter-spacing: -.028em !important;
}
.cb-modv2-hero-tagline{
  font-size: 15.5px !important;
  line-height: 1.55 !important;
  max-width: 64ch;
  margin-bottom: 16px !important;
}

/* ============================================================
 * v766 — MODULE V2: no right-rail scroll + chromeless chip-nav
 *
 * David: "no scroll so make it fit/longer and for image 2 i wanna
 * see this see thru please."
 *
 *   1. Right rail (.cb-anchor-rail) had max-height + overflow-y:auto
 *      so the cards scrolled inside a 100vh column. Cards near the
 *      bottom got clipped ("region" → "regi..."). Drop both — let
 *      it grow naturally; sticky positioning still keeps it in view
 *      as the page scrolls.
 *
 *   2. Left sidebar (.chip-nav inside .cb-modv2-layout) had per-button
 *      glass boxes from the v720 sitewide glass rules. Match the
 *      Education library treatment from v761: container fully see-
 *      through (no bg, no border, no shadow), each button transparent
 *      at rest, accent wash on hover, accent ring on .active. Galaxy
 *      reads through cleanly.
 * ============================================================ */

/* --- 1. Right rail: kill the internal scroll, let it flow with the page --- */
.cb-modv2-layout .cb-anchor-rail{
  max-height: none !important;
  overflow-y: visible !important;
  overflow: visible !important;
  /* Stickiness is preserved (sticky from the v764 base rule). When the
     rail is taller than the viewport, sticky positions it to the top
     and the user scrolls the page — no internal scroll bar. */
}

/* --- 2. Chromeless chip-nav inside modv2 (mirrors the v761 cb-ed-nav fix) --- */
.cb-modv2-layout .chip-nav,
html[data-theme="dark"]    .cb-modv2-layout .chip-nav{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 none transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

/* Per-button: transparent at rest, accent wash on hover, accent ring active */
.cb-modv2-layout .chip-nav button,
.cb-modv2-layout .chip-nav a{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 none transparent !important;
  box-shadow: none !important;
  padding: 9px 12px !important;
  margin: 0 0 2px !important;
  border-radius: 8px !important;
  color: var(--text2) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  text-align: left !important;
  transition:
    background .28s cubic-bezier(.25,.46,.45,.94),
    color .28s cubic-bezier(.25,.46,.45,.94) !important;
}
.cb-modv2-layout .chip-nav button:hover,
.cb-modv2-layout .chip-nav a:hover{
  background: rgba(167,139,250,.08) !important;
  color: #ffffff !important;
}
.cb-modv2-layout .chip-nav button.active,
.cb-modv2-layout .chip-nav a.active{
  background: rgba(167,139,250,.14) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(167,139,250,.35) !important;
  font-weight: 700 !important;
}

/* ============================================================
 * v767 — MODULE V2 sub-primitives (Phase 3 Shoulder real)
 *
 * Pieces the build script needs in CSS:
 *   .cb-modv2-chip-group-label  — "LEARNING JOURNEY" / "QUICK
 *                                  REFERENCE" eyebrow inside chip-nav
 *   .cb-modv2-chip-group-label--ref — variant with top divider
 *   .cb-modv2-subdivider        — section-internal divider when one
 *                                  new section absorbs multiple old
 *                                  tab-panels (e.g. Anatomy =
 *                                  "Bones · joints · soft tissue" |
 *                                  "Nerves & neurovascular")
 *   .cb-modv2-main              — main content wrapper inside layout
 *   .cb-anchor-quicklink        — links inside Bedside Tools card
 *   .cb-modv2-tab               — alias of .chip-nav button for the
 *                                  new pages (forward-compat hook)
 * ============================================================ */

/* Chip-nav group labels — "Learning journey" / "Quick reference" */
.cb-modv2-layout .cb-modv2-chip-group-label{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.4px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text3);
  padding: 6px 12px 6px;
  margin: 0;
}
.cb-modv2-layout .cb-modv2-chip-group-label--ref{
  padding-top: 16px !important;
  margin-top: 10px !important;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Main column wrapper inside the 3-col layout */
.cb-modv2-layout .cb-modv2-main{
  min-width: 0;       /* prevent grid overflow on long pre/code blocks */
}

/* Sub-divider inside a section that absorbs multiple old tab-panels */
.cb-modv2-layout .cb-modv2-subdivider{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 22px;
  color: var(--text3);
}
.cb-modv2-layout .cb-modv2-subdivider-line{
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167,139,250,.30), transparent);
}
.cb-modv2-layout .cb-modv2-subdivider-label{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.4px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(167,139,250,.10);
  border: 1px solid rgba(167,139,250,.22);
  white-space: nowrap;
}

/* Bedside-tools quicklinks inside the anchor rail */
.cb-anchor-quicklink{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(167,139,250,.06);
  border: 1px solid rgba(167,139,250,.18);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background .25s cubic-bezier(.25,.46,.45,.94),
    border-color .25s cubic-bezier(.25,.46,.45,.94);
}
.cb-anchor-quicklink:hover{
  background: rgba(167,139,250,.14);
  border-color: rgba(167,139,250,.40);
}

/* ============================================================
 * v768 — MODULE V2 hotfix: explicit section toggle (broken display)
 *
 * v767 build orphaned a trailing </div> in each captured panel,
 * which closed my wrapper early and dropped the section nav + outer
 * </div> outside their intended parents. Sections rendered stacked
 * vertically instead of toggling.
 *
 * The Python build script now strips the trailing </div> before
 * re-wrapping. This CSS rule is the belt-and-suspenders: explicitly
 * scope show/hide to direct children of .cb-modv2-main so even if
 * a future regression breaks the wrappers again, only ONE section
 * shows at a time.
 * ============================================================ */
.cb-modv2-layout .cb-modv2-main > .tab-panel{
  display: none !important;
}
.cb-modv2-layout .cb-modv2-main > .tab-panel.active{
  display: block !important;
}

/* ============================================================
 * v769 — MODULE V2 width + density: kill the narrow text-column feel
 *
 * David: "this isnt good, its just a colum of text and the format is
 * so bad, the beginning format is good but as i scroll down its just
 * not good."
 *
 * ROOT CAUSE:
 *   - Outer .container caps at 1180px with 48px side padding (~1084px usable)
 *   - .cb-modv2-layout takes 240 (chip-nav) + 280 (rail) + 56 (gaps) = 576px
 *   - Main column was only ~508px wide on a 2000px viewport
 *   - Original content was authored for ~880px columns → wraps weirdly,
 *     .bl-strip / .tc-card / .data-table all feel cramped with dead space
 *
 * FIX (scoped to body.cb-modv2-body):
 *   1. Outer .container max-width 1180 → 1600px on modv2 pages
 *   2. Nested original .container loses its own max-width + padding
 *   3. Common content children (.bl-strip, .tc-card, .ma-item) get
 *      max-width:none so they fill the available width
 * ============================================================ */
body.cb-modv2-body .container{
  max-width: 1600px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}
@media (max-width: 760px){
  body.cb-modv2-body .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

body.cb-modv2-body .cb-modv2-layout .tab-panel .container,
body.cb-modv2-body .cb-modv2-layout .tab-panel > .container{
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.cb-modv2-body .cb-modv2-main .bl-strip,
body.cb-modv2-body .cb-modv2-main .tc-card,
body.cb-modv2-body .cb-modv2-main .ma-item,
body.cb-modv2-body .cb-modv2-main .data-table,
body.cb-modv2-body .cb-modv2-main .self-check,
body.cb-modv2-body .cb-modv2-main .rv-card,
body.cb-modv2-body .cb-modv2-main .quiz-card{
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.cb-modv2-body .cb-modv2-main{
  padding: 0 4px;
}

/* ============================================================
 * v770 — MODULE V2: main column takes ~70% of mid+right area
 *
 * David: "the colum needs to be more wide maybe taking up to 70%
 * of the mid and right side to make the info fill more on the
 * screen — please resign this."
 *
 * Strategy: widen everything, shift weight onto the main column,
 * keep reading width comfortable for plain prose.
 *
 *   1. Outer container max-width 1600 → 2000px (let it breathe on
 *      wide displays — your screenshots are on a ~2000px viewport).
 *   2. Grid template: chip-nav 240 → 200, rail 280 → 260, main 1fr
 *      So on a 2000px viewport with 32px padding each side, main
 *      now lives in ~1420px instead of ~1024px — almost a 40% gain.
 *   3. To keep paragraphs readable at that width, cap plain text
 *      block elements at 880px max-width inside the main column.
 *      Visual block elements (.bl-strip, .tc-card, .ma-item,
 *      tables, figures) break out to full width — Wikipedia +
 *      OpenStax pattern. Reading flow narrow, visual blocks wide.
 *   4. Multi-column block content (.cb-numlist, .ma-body)
 *      explicitly kept wide so number/icon rails don't crowd.
 * ============================================================ */

/* Wider container on modv2 pages */
body.cb-modv2-body .container{
  max-width: 2000px !important;
}

/* Grid: narrower chip-nav + rail, main takes the rest */
body.cb-modv2-body .cb-modv2-layout{
  grid-template-columns: 200px minmax(0, 1fr) 260px !important;
  gap: 32px !important;
}
@media (max-width: 1280px){
  body.cb-modv2-body .cb-modv2-layout{
    grid-template-columns: 200px minmax(0, 1fr) !important;
  }
  body.cb-modv2-body .cb-anchor-rail{ display: none !important; }
}
@media (max-width: 760px){
  body.cb-modv2-body .cb-modv2-layout{
    grid-template-columns: 1fr !important;
  }
}

/* Reading-width cap on plain prose inside the main column.
   The 880px cap keeps line length around 80–95 characters at 16px —
   the sweet spot for readability. Block visual elements escape this
   cap and fill the full main column. */
body.cb-modv2-body .cb-modv2-main p,
body.cb-modv2-body .cb-modv2-main > ul,
body.cb-modv2-body .cb-modv2-main > ol,
body.cb-modv2-body .cb-modv2-main .container > p,
body.cb-modv2-body .cb-modv2-main .container > ul,
body.cb-modv2-body .cb-modv2-main .container > ol,
body.cb-modv2-body .cb-modv2-main .tab-panel > p,
body.cb-modv2-body .cb-modv2-main .tab-panel > ul,
body.cb-modv2-body .cb-modv2-main .tab-panel > ol{
  max-width: 880px;
}

/* Visual blocks break out to full column width — text inside them
   is allowed to use their full width since they're meant to feel
   dense and rich. */
body.cb-modv2-body .cb-modv2-main .bl-strip,
body.cb-modv2-body .cb-modv2-main .bl-strip p,
body.cb-modv2-body .cb-modv2-main .bl-strip ul,
body.cb-modv2-body .cb-modv2-main .bl-strip ol,
body.cb-modv2-body .cb-modv2-main .tc-card,
body.cb-modv2-body .cb-modv2-main .tc-card p,
body.cb-modv2-body .cb-modv2-main .ma-item,
body.cb-modv2-body .cb-modv2-main .ma-item p,
body.cb-modv2-body .cb-modv2-main .data-table,
body.cb-modv2-body .cb-modv2-main .self-check,
body.cb-modv2-body .cb-modv2-main .self-check p,
body.cb-modv2-body .cb-modv2-main .rv-card,
body.cb-modv2-body .cb-modv2-main .quiz-card,
body.cb-modv2-body .cb-modv2-main .cb-pearl,
body.cb-modv2-body .cb-modv2-main .cb-pearl p,
body.cb-modv2-body .cb-modv2-main .cb-mnemonic,
body.cb-modv2-body .cb-modv2-main .cb-mnemonic p,
body.cb-modv2-body .cb-modv2-main .cb-pitfall,
body.cb-modv2-body .cb-modv2-main .cb-pitfall p,
body.cb-modv2-body .cb-modv2-main .cb-objectives,
body.cb-modv2-body .cb-modv2-main .cb-objectives li{
  max-width: none !important;
}

/* Numbered/iconed lists: keep them wide */
body.cb-modv2-body .cb-modv2-main .cb-numlist,
body.cb-modv2-body .cb-modv2-main .ma-body{
  max-width: none !important;
}

/* Section nav stays full-width regardless */
body.cb-modv2-body .cb-modv2-main .cb-section-nav{
  max-width: none !important;
}

/* ============================================================
 * v771 — MODULE V2: kill leftover empty gutters + tighten rhythm
 *
 * David: "idk there just to much empty space, make it format
 * better and cleaner please."
 *
 *   1. Container 2000 → 2400px max-width with generous edge padding
 *      → fills wide monitors without losing intentional margins
 *   2. Tighter vertical rhythm between callouts (18px not 22px+)
 *   3. Inside callouts: kill trailing empty space, normalize first/
 *      last child margins, tighten internal <p> spacing
 *   4. Header spacing: less vertical drift on h3/h4
 *   5. Empty <p></p> / trailing <br> collapse
 * ============================================================ */

body.cb-modv2-body .container{
  max-width: 2400px !important;
  padding-left: 56px !important;
  padding-right: 56px !important;
}
@media (max-width: 1400px){
  body.cb-modv2-body .container{
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}
@media (max-width: 760px){
  body.cb-modv2-body .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

body.cb-modv2-body .cb-modv2-main .bl-strip,
body.cb-modv2-body .cb-modv2-main .tc-card,
body.cb-modv2-body .cb-modv2-main .ma-item,
body.cb-modv2-body .cb-modv2-main .self-check,
body.cb-modv2-body .cb-modv2-main .cb-pearl,
body.cb-modv2-body .cb-modv2-main .cb-mnemonic,
body.cb-modv2-body .cb-modv2-main .cb-pitfall{
  margin-top: 18px !important;
  margin-bottom: 18px !important;
  min-height: auto !important;
}
body.cb-modv2-body .cb-modv2-main .data-table{
  margin: 14px 0 !important;
}

body.cb-modv2-body .cb-modv2-main .bl-strip > *:last-child,
body.cb-modv2-body .cb-modv2-main .tc-card > *:last-child,
body.cb-modv2-body .cb-modv2-main .ma-item > *:last-child,
body.cb-modv2-body .cb-modv2-main .cb-pearl > *:last-child,
body.cb-modv2-body .cb-modv2-main .cb-mnemonic > *:last-child,
body.cb-modv2-body .cb-modv2-main .cb-pitfall > *:last-child{
  margin-bottom: 0 !important;
}
body.cb-modv2-body .cb-modv2-main .bl-strip > *:first-child:not(.bl-label),
body.cb-modv2-body .cb-modv2-main .tc-card > *:first-child{
  margin-top: 0 !important;
}
body.cb-modv2-body .cb-modv2-main .bl-strip p,
body.cb-modv2-body .cb-modv2-main .tc-card p,
body.cb-modv2-body .cb-modv2-main .cb-pearl p,
body.cb-modv2-body .cb-modv2-main .cb-mnemonic p{
  margin: 0 0 10px !important;
}
body.cb-modv2-body .cb-modv2-main .bl-strip p:last-child,
body.cb-modv2-body .cb-modv2-main .tc-card p:last-child,
body.cb-modv2-body .cb-modv2-main .cb-pearl p:last-child,
body.cb-modv2-body .cb-modv2-main .cb-mnemonic p:last-child{
  margin-bottom: 0 !important;
}

body.cb-modv2-body .cb-modv2-main h3,
body.cb-modv2-body .cb-modv2-main .section-title{
  margin-top: 24px !important;
  margin-bottom: 10px !important;
}
body.cb-modv2-body .cb-modv2-main h4{
  margin-top: 18px !important;
  margin-bottom: 8px !important;
}

body.cb-modv2-body .cb-modv2-main p:empty{
  display: none !important;
}
body.cb-modv2-body .cb-modv2-main .bl-strip + br,
body.cb-modv2-body .cb-modv2-main .tc-card + br,
body.cb-modv2-body .cb-modv2-main br + br{
  display: none !important;
}

/* ============================================================
 * v772 — MODULE V2: 2D content density (no more endless 1-col scroll)
 *
 * David: "still feels empty maybe format the page/info better?"
 *
 * The issue: numbered lists (.cb-numlist), review-card decks
 * (.rv-card), and even bullet lists were stacking as one full-width
 * item per row. On a 1400px column that's a LOT of horizontal dead
 * space per item — looks like an endless single column.
 *
 * Fix: flow lists into a responsive grid so they fill the width
 * with 2-3 items per row instead of 1.
 *
 *   .cb-numlist            → auto-fit grid, min 420px per cell
 *   .rv-card grid          → already grids but enforce wider
 *   .cb-objectives-list    → 2-col on wide modv2 columns
 *   Review section cards   → 2-col grid
 *
 * Also: chip-nav becomes properly sticky so it follows scroll —
 * the left side of David's screenshot was empty galaxy because
 * the nav had scrolled out of view above the content fold.
 * ============================================================ */

/* 1. Numbered lists flow into 2-3 column grid on wide modv2 columns */
body.cb-modv2-body .cb-modv2-main .cb-numlist{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)) !important;
  gap: 12px !important;
  list-style: none !important;
  padding: 0 !important;
  counter-reset: cb-num !important;
  max-width: none !important;
}
body.cb-modv2-body .cb-modv2-main .cb-numlist > li{
  margin: 0 !important;
}

/* 2. Objectives banner bullets: 2-col on wide columns */
@media (min-width: 980px){
  body.cb-modv2-body .cb-modv2-main .cb-objectives-list{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px 22px !important;
  }
}

/* 3. Review section cards (.rv-card decks): 2-3 col grid */
body.cb-modv2-body .cb-modv2-main .rv-card{
  margin: 0 !important;
}
/* Wrap the cards in their natural sibling stream into a grid via
   container queries on tab-review specifically */
body.cb-modv2-body .cb-modv2-main #tab-review .rv-card,
body.cb-modv2-body .cb-modv2-main .tab-panel .rv-card{
  display: block;
}
/* If review cards have a parent wrapper, grid-ify it. The cards
   in CB_ShoulderModule are wrapped in .review-deck or just stream;
   target the stream by making sibling .rv-card flow into a grid
   on a parent that's the immediate container.
   Belt-and-suspenders: any contiguous .rv-card group gets flex-wrap. */
body.cb-modv2-body .cb-modv2-main .tab-panel > .container > .rv-card,
body.cb-modv2-body .cb-modv2-main .tab-panel > .rv-card{
  display: inline-block !important;
  vertical-align: top !important;
  width: calc(50% - 8px) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 4. Plain <ol> and bullet <ul> with 5+ items in the main column:
   flow into 2-column on wide displays. Skip nested lists (inside
   callouts/cards) since those already feel tight. */
@media (min-width: 1100px){
  body.cb-modv2-body .cb-modv2-main > ol:not(.cb-objectives-list),
  body.cb-modv2-body .cb-modv2-main > ul:not(.cb-objectives-list),
  body.cb-modv2-body .cb-modv2-main .container > ol,
  body.cb-modv2-body .cb-modv2-main .container > ul,
  body.cb-modv2-body .cb-modv2-main .tab-panel > ol,
  body.cb-modv2-body .cb-modv2-main .tab-panel > ul{
    column-count: 2;
    column-gap: 32px;
    max-width: none;
  }
  body.cb-modv2-body .cb-modv2-main > ol li,
  body.cb-modv2-body .cb-modv2-main > ul li,
  body.cb-modv2-body .cb-modv2-main .container > ol li,
  body.cb-modv2-body .cb-modv2-main .container > ul li,
  body.cb-modv2-body .cb-modv2-main .tab-panel > ol li,
  body.cb-modv2-body .cb-modv2-main .tab-panel > ul li{
    break-inside: avoid;
  }
}

/* 5. Chip-nav truly sticky so it follows scroll */
body.cb-modv2-body .cb-modv2-layout .chip-nav{
  position: sticky !important;
  top: 80px !important;
  align-self: start !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(167,139,250,.30) transparent !important;
}

/* 6. Hide the v767 PREVIEW BANNER when scrolled deeper —
   reduces the "preview overhead" on every section */
body.cb-modv2-body .container > div[style*="245,158,11"]{
  margin: 0 0 12px !important;
  padding: 8px 14px !important;
  font-size: 11px !important;
}
body.cb-modv2-body .container > div[style*="245,158,11"] > div:last-child{
  font-size: 11px !important;
  line-height: 1.4 !important;
}

/* ============================================================
 * v773 — MODULE V3 (AMBOSS-style fresh design)
 *
 * David: v2 still felt empty. Picked "AMBOSS-style dense med-ed" +
 * "revert and try a fresh design."
 *
 * DIFFERENCES FROM v2:
 *   - NO tab switching → single-scroll, all content visible
 *   - NO right rail → anchor facts move into a TOP STICKY STRIP
 *   - Narrow TOC, very wide main content area
 *   - Subtle TINTED surface on main so content doesn't float in void
 *   - Tighter vertical rhythm
 *   - Big chapter numbers in section header
 *   - Scoped to body.cb-mod-v3 — doesn't touch v2 or live modules
 * ============================================================ */

body.cb-mod-v3 .container{
  max-width: 2400px !important;
  padding: 24px 48px 60px !important;
  /* v798 — theme.css .container has `overflow-x: hidden` which silently
   * breaks `position: sticky` on the v3 TOC inside it. Promoting the v3
   * container to `overflow: visible` re-enables the sticky sidebar. */
  overflow: visible !important;
}
@media (max-width: 1400px){
  body.cb-mod-v3 .container{ padding: 18px 28px 48px !important; }
}
@media (max-width: 760px){
  body.cb-mod-v3 .container{ padding: 12px 16px 32px !important; }
}

/* v798 — "Back to Library" entry point that sits between the site-nav
 * and the hero on every v3 module. Subtle but always reachable. */
.cb-v3-backwrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 28px 0;
}
.cb-v3-back{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text2);
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.cb-v3-back:hover{
  background: var(--bg3);
  color: var(--accent);
  border-color: rgba(167,139,250,.30);
  transform: translateX(-2px);
}
.cb-v3-back-arrow{
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  transition: transform .2s ease;
}
.cb-v3-back:hover .cb-v3-back-arrow{ transform: translateX(-3px); }
@media (max-width: 760px){
  .cb-v3-backwrap{ padding: 10px 16px 0; }
  .cb-v3-back{ font-size: 12.5px; padding: 6px 12px 6px 10px; }
}

body.cb-mod-v3 .cb-v3-hero{
  margin: 0 0 18px;
  padding: 14px 0 4px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body.cb-mod-v3 .cb-v3-hero-eyebrow{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--text3);
  margin-bottom: 6px;
}
body.cb-mod-v3 .cb-v3-hero-title{
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.028em;
  margin: 0 0 8px;
  line-height: 1.08;
  background: linear-gradient(120deg, var(--chroma-1, var(--accent)) 0%, var(--chroma-2, var(--accent2)) 60%, var(--chroma-3, var(--accent)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.cb-mod-v3 .cb-v3-hero-tagline{
  font-size: 16px;
  line-height: 1.5;
  color: var(--text2);
  margin: 0;
  max-width: 72ch;
}

body.cb-mod-v3 .cb-v3-anchor-strip{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  margin: 0 0 24px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  overflow: hidden;
  position: sticky;
  top: 64px;
  z-index: 50;
  backdrop-filter: var(--glass-filter-standard);
  -webkit-backdrop-filter: var(--glass-filter-standard);
}
@media (max-width: 1100px){
  body.cb-mod-v3 .cb-v3-anchor-strip{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  body.cb-mod-v3 .cb-v3-anchor-strip{ grid-template-columns: repeat(2, 1fr); }
}
body.cb-mod-v3 .cb-v3-anchor-cell{
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  background: rgba(13,13,22,.78);
}
body.cb-mod-v3 .cb-v3-anchor-cell--flag{
  background: linear-gradient(135deg, rgba(239,68,68,.10), rgba(13,13,22,.78));
}
body.cb-mod-v3 .cb-v3-anchor-lbl{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--text3);
}
body.cb-mod-v3 .cb-v3-anchor-val{
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}

body.cb-mod-v3 .cb-v3-preview-banner{
  margin: 0 0 18px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.25);
  border-left: 3px solid #f59e0b;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text2);
}
body.cb-mod-v3 .cb-v3-preview-banner strong{
  color: #f59e0b;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-right: 6px;
}

body.cb-mod-v3 .cb-v3-layout{
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
@media (max-width: 980px){
  body.cb-mod-v3 .cb-v3-layout{ grid-template-columns: 1fr; }
  body.cb-mod-v3 .cb-v3-toc{ position: relative !important; top: auto !important; max-height: none !important; }
}

body.cb-mod-v3 .cb-v3-toc{
  position: sticky;
  top: 140px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(167,139,250,.25) transparent;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body.cb-mod-v3 .cb-v3-toc-grouplabel{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--text3);
  padding: 6px 10px;
}
body.cb-mod-v3 .cb-v3-toc-grouplabel--ref{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
body.cb-mod-v3 .cb-v3-toc-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  transition: background .2s, color .2s;
}
body.cb-mod-v3 .cb-v3-toc-item:hover{
  background: rgba(167,139,250,.08);
  color: var(--text);
}
body.cb-mod-v3 .cb-v3-toc-item.active{
  background: rgba(167,139,250,.14);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(167,139,250,.30);
}
body.cb-mod-v3 .cb-v3-toc-n{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--text3);
  flex-shrink: 0;
  min-width: 22px;
}
body.cb-mod-v3 .cb-v3-toc-item.active .cb-v3-toc-n{ color: var(--accent); }
body.cb-mod-v3 .cb-v3-toc-emoji{ font-size: 13px; flex-shrink: 0; }

body.cb-mod-v3 .cb-v3-main{
  min-width: 0;
  background: linear-gradient(180deg, rgba(167,139,250,.025) 0%, rgba(13,13,22,.18) 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 28px 36px 36px;
}

body.cb-mod-v3 .cb-v3-sec{
  padding: 18px 0 30px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  scroll-margin-top: 140px;
}
body.cb-mod-v3 .cb-v3-sec:last-child{ border-bottom: 0; padding-bottom: 8px; }
body.cb-mod-v3 .cb-v3-sec-head{
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(167,139,250,.18);
}
body.cb-mod-v3 .cb-v3-chapter-n{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: rgba(167,139,250,.55);
  line-height: 1;
  min-width: 56px;
}
body.cb-mod-v3 .cb-v3-chapter-emoji{ font-size: 30px; line-height: 1; }
body.cb-mod-v3 .cb-v3-sec-title{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.022em;
  color: var(--text);
  margin: 0;
  line-height: 1.15;
}

body.cb-mod-v3 .cb-v3-subhead{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 32px 0 14px;
  padding: 6px 12px;
  background: rgba(167,139,250,.06);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--accent);
}
body.cb-mod-v3 .cb-v3-subhead-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

body.cb-mod-v3 .cb-v3-main .container{
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.cb-mod-v3 .cb-v3-main p{
  font-size: 15px;
  line-height: 1.58;
  margin: 0 0 12px;
  color: var(--text);
  max-width: 78ch;
}
body.cb-mod-v3 .cb-v3-main .bl-strip,
body.cb-mod-v3 .cb-v3-main .tc-card,
body.cb-mod-v3 .cb-v3-main .ma-item,
body.cb-mod-v3 .cb-v3-main .self-check,
body.cb-mod-v3 .cb-v3-main .cb-pearl,
body.cb-mod-v3 .cb-v3-main .cb-mnemonic,
body.cb-mod-v3 .cb-v3-main .cb-pitfall{
  margin: 14px 0 !important;
  max-width: none !important;
}
body.cb-mod-v3 .cb-v3-main .data-table{
  margin: 14px 0 !important;
  max-width: none !important;
}
body.cb-mod-v3 .cb-v3-main h3,
body.cb-mod-v3 .cb-v3-main .section-title{
  margin: 22px 0 10px !important;
  font-size: 18px !important;
}
body.cb-mod-v3 .cb-v3-main h4{
  margin: 16px 0 8px !important;
  font-size: 15px !important;
}

/* v793 — Figures center full-width inside v3 sections (was float:right
 * at 360px, but on sections with short text like Anatomy intro, the
 * float left dead space on the left of the figure — David flagged it
 * in a screenshot). Centering eliminates that gap and gives diagrams
 * the prominence they deserve as the visual anchor of a learning
 * section. Still cap width so they don't blow out on huge screens. */
body.cb-mod-v3 .cb-v3-main .cb-anatomy-figure,
body.cb-mod-v3 .cb-v3-main .cb-bone-illustration{
  float: none !important;
  display: block !important;
  max-width: min(720px, 100%) !important;
  margin: 22px auto !important;
  clear: both !important;
}
body.cb-mod-v3 .cb-v3-main .cb-figure-pair{
  float: none !important;
  display: block !important;
  max-width: min(820px, 100%) !important;
  margin: 22px auto !important;
  clear: both !important;
}
/* Float-right is still available opt-in via .cb-fig-right for sections
 * with long text that explicitly want the wraparound textbook layout. */
body.cb-mod-v3 .cb-v3-main .cb-anatomy-figure.cb-fig-right,
body.cb-mod-v3 .cb-v3-main .cb-figure-pair.cb-fig-right{
  float: right !important;
  max-width: 360px !important;
  margin: 4px 0 14px 22px !important;
  clear: right !important;
}
body.cb-mod-v3 .cb-v3-sec::after{ content: ''; display: block; clear: both; }

/* v796 — Image overflow guard. Without this, an <img> inside a figure
 * renders at its natural pixel width (Wikimedia URLs request ?width=960),
 * blowing past the figure's max-width and bleeding into adjacent columns.
 * David saw the orange impingement illustration escape its container on
 * the Special Tests section. Constraining every image inside v3 figures
 * fixes it permanently. */
body.cb-mod-v3 .cb-v3-main figure img,
body.cb-mod-v3 .cb-v3-main .cb-anatomy-figure img,
body.cb-mod-v3 .cb-v3-main .cb-figure-pair img,
body.cb-mod-v3 .cb-v3-main .cb-bone-illustration img{
  max-width: 100% !important;
  height: auto !important;
  display: block;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}
body.cb-mod-v3 .cb-v3-main figure,
body.cb-mod-v3 .cb-v3-main .cb-figure-pair{
  overflow: hidden;
  box-sizing: border-box;
}
body.cb-mod-v3 .cb-v3-main .cb-figure-pair > figure{
  display: block;
  margin: 0 auto 18px;
  max-width: 100%;
}
body.cb-mod-v3 .cb-v3-main .cb-figure-pair > figure:last-child{ margin-bottom: 0; }
body.cb-mod-v3 .cb-v3-main figcaption,
body.cb-mod-v3 .cb-v3-main .cb-anatomy-figure figcaption{
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* v796 — TOC footer card. David flagged the left sidebar feeling
 * empty on scroll (TOC ends after Tools but the sticky column extends
 * to viewport bottom — galaxy bg shows through). Footer card auto-
 * pushes to the bottom of the flex column and shows module progress. */
body.cb-mod-v3 .cb-v3-toc-footer{
  margin-top: auto;
  padding: 16px 14px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(167,139,250,.06), rgba(94,234,212,.03));
  border: 1px solid rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}
body.cb-mod-v3 .cb-v3-toc-footer::before{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(167,139,250,.10), transparent 60%);
  pointer-events: none;
}
body.cb-mod-v3 .cb-v3-toc-foot-eyebrow{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text3);
  font-weight: 800;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
body.cb-mod-v3 .cb-v3-toc-foot-title{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
body.cb-mod-v3 .cb-v3-toc-foot-meta{
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--text2);
  position: relative;
  z-index: 1;
}
body.cb-mod-v3 .cb-v3-toc-foot-meta span{
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: .3px;
}
body.cb-mod-v3 .cb-v3-toc-foot-meta b{
  color: var(--text);
  font-weight: 700;
}
body.cb-mod-v3 .cb-v3-toc-foot-prog{
  margin-top: 10px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
body.cb-mod-v3 .cb-v3-toc-foot-prog-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--sec-accent, #a78bfa), #5eead4);
  border-radius: 2px;
  width: 8%;
  transition: width .4s cubic-bezier(.22,1,.36,1);
}
body.cb-mod-v3 .cb-v3-toc-foot-percent{
  text-align: right;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1px;
  color: var(--text3);
  margin-top: 6px;
  position: relative;
  z-index: 1;
}

/* Numbered lists 2-col */
body.cb-mod-v3 .cb-v3-main .cb-numlist{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)) !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 14px 0 !important;
  max-width: none !important;
}
body.cb-mod-v3 .cb-v3-main .cb-numlist > li{ margin: 0 !important; }

body.cb-mod-v3 .cb-v3-main p:empty{ display: none !important; }

/* ============================================================
 * v774 — V3 TAB SWITCHING (each tab = its own info)
 *
 * David: "each tab has its appropriate info like the core concept
 * has the core concept and then the anatomy tab has its anatomy
 * info." Keep the v3 visual design but switch sections instead of
 * stacking them in one long scroll.
 *
 * Companion JS lives inline at the bottom of CB_ShoulderModule_v3.html:
 *   - Click TOC item → showSection(id)
 *   - Removes .active from all sections + TOC links, adds to chosen
 *   - Smooth-scrolls window up to main column top
 *   - Honors URL hash on page load (#sec-anatomy etc.)
 *   - window.CbV3.show(id) public API
 * ============================================================ */
body.cb-mod-v3 .cb-v3-main > .cb-v3-sec{
  display: none !important;
  border-bottom: 0 !important;
  padding-bottom: 8px !important;
}
body.cb-mod-v3 .cb-v3-main > .cb-v3-sec.active{
  display: block !important;
  animation: cbV3SectionFade .35s cubic-bezier(.22,1,.36,1);
}
@keyframes cbV3SectionFade{
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  body.cb-mod-v3 .cb-v3-main > .cb-v3-sec.active{ animation: none; }
}

/* ============================================================
 * v775 — V3 anchor strip: expandable rich quick-ref cells
 *
 * David: "wtf is this bar? like maybe have a more info quick
 * access info?" Picked: rich quick-ref panel, clickable to
 * expand each.
 *
 * Each cell is now a <details>/<summary>. Click anywhere on
 * the cell to expand — the cell grows in-place to show full
 * clinical detail. Other cells stay collapsed (grid
 * align-items:start so uneven heights don't stretch siblings).
 *
 * Custom toggle chevron flips when open. Hover/expand state
 * visible. Red Flag cell uses red accent when open.
 * ============================================================ */

body.cb-mod-v3 .cb-v3-anchor-strip{
  align-items: start !important;
}

body.cb-mod-v3 details.cb-v3-anchor-cell{
  background: rgba(13,13,22,.78);
  padding: 0;
  cursor: pointer;
  transition: background .25s cubic-bezier(.25,.46,.45,.94);
}
body.cb-mod-v3 details.cb-v3-anchor-cell:hover{
  background: rgba(167,139,250,.10);
}
body.cb-mod-v3 details.cb-v3-anchor-cell[open]{
  background: rgba(167,139,250,.06);
  outline: 1px solid rgba(167,139,250,.30);
  outline-offset: -1px;
  position: relative;
  z-index: 1;
}
body.cb-mod-v3 details.cb-v3-anchor-cell.cb-v3-anchor-cell--flag[open]{
  background: rgba(239,68,68,.08);
  outline-color: rgba(239,68,68,.30);
}

body.cb-mod-v3 details.cb-v3-anchor-cell summary{
  list-style: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  position: relative;
}
body.cb-mod-v3 details.cb-v3-anchor-cell summary::-webkit-details-marker{ display: none; }
body.cb-mod-v3 details.cb-v3-anchor-cell summary::marker{ display: none; }

body.cb-mod-v3 .cb-v3-anchor-toggle{
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10px;
  color: var(--text3);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
  line-height: 1;
}
body.cb-mod-v3 details.cb-v3-anchor-cell[open] .cb-v3-anchor-toggle{
  transform: rotate(-180deg);
  color: var(--accent);
}
body.cb-mod-v3 details.cb-v3-anchor-cell--flag[open] .cb-v3-anchor-toggle{
  color: #f87171;
}

body.cb-mod-v3 .cb-v3-anchor-detail{
  padding: 4px 14px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  border-top: 1px solid rgba(167,139,250,.18);
  margin-top: 4px;
  animation: cbV3DetailFade .25s ease-out;
}
body.cb-mod-v3 details.cb-v3-anchor-cell--flag .cb-v3-anchor-detail{
  border-top-color: rgba(239,68,68,.25);
}
body.cb-mod-v3 .cb-v3-anchor-detail ul{
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}
body.cb-mod-v3 .cb-v3-anchor-detail li{
  padding: 4px 0 4px 14px;
  position: relative;
  color: var(--text2);
}
body.cb-mod-v3 .cb-v3-anchor-detail li::before{
  content: '·';
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--accent);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
}
body.cb-mod-v3 details.cb-v3-anchor-cell--flag .cb-v3-anchor-detail li::before{
  color: #ef4444;
}
body.cb-mod-v3 .cb-v3-anchor-detail strong{
  color: var(--text);
  font-weight: 700;
}

@keyframes cbV3DetailFade{
  from{ opacity: 0; transform: translateY(-3px); }
  to  { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  body.cb-mod-v3 .cb-v3-anchor-detail{ animation: none; }
  body.cb-mod-v3 .cb-v3-anchor-toggle{ transition: none; }
}

/* ============================================================
 * v776 — V3 fixes (white card + image scoping + left rail fill)
 *
 * 1. .cb-muscle-card / .cb-muscle-illus shipped with hardcoded
 *    white/cream backgrounds — looks broken on dark theme. Many
 *    .cb-muscle-illus figures lost their SVGs in v721, leaving
 *    empty cream boxes with only a figcaption.
 * 2. Float-right anatomy figures bleed across sub-area dividers
 *    in multi-panel sections (Anatomy = bones+nerves; Encounter
 *    = subj+triage+cspine). Need clear:both on sub-heads.
 * 3. Left rail (TOC) feels empty past its natural height.
 *    Adding a Tools group for shortcuts to Voice Note / AI / etc.
 * ============================================================ */

/* 1. Muscle card chrome — dark themed */
body.cb-mod-v3 .cb-muscle-card{
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin: 14px 0 !important;
  grid-template-columns: minmax(280px, 1fr) 1.4fr !important;
  gap: 18px !important;
}
body.cb-mod-v3 .cb-muscle-illus{
  background: rgba(167,139,250,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  padding: 12px !important;
}
body.cb-mod-v3 .cb-muscle-illus img{
  background: #f5f5f0 !important;
  border-radius: 6px !important;
}
body.cb-mod-v3 .cb-muscle-illus figcaption{
  color: var(--text2) !important;
  font-size: 11px !important;
}

/* 2. EMPTY .cb-muscle-illus (no img — v721 SVG removal) — collapse
   to single-column, show figcaption as a small accent eyebrow */
body.cb-mod-v3 .cb-muscle-card:not(:has(.cb-muscle-illus img)){
  grid-template-columns: 1fr !important;
}
body.cb-mod-v3 .cb-muscle-card:not(:has(.cb-muscle-illus img)) .cb-muscle-illus{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
  display: block !important;
  text-align: left !important;
}
body.cb-mod-v3 .cb-muscle-card:not(:has(.cb-muscle-illus img)) .cb-muscle-illus figcaption{
  font-size: 10px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  text-align: left !important;
  margin: 0 !important;
}

/* 3. Float-clearing on v3 sub-heads + section headings — anatomy
   figures stay in their sub-area, don't bleed downstream */
body.cb-mod-v3 .cb-v3-subhead,
body.cb-mod-v3 .cb-v3-main h3,
body.cb-mod-v3 .cb-v3-main .section-title{
  clear: both !important;
}

/* 4. Tools group in TOC — fills the left rail with shortcuts */
body.cb-mod-v3 .cb-v3-toc-item--tool{
  font-weight: 700;
}
body.cb-mod-v3 .cb-v3-toc-item--tool:hover{
  background: rgba(34,211,238,.10);
  color: #5eead4;
}
body.cb-mod-v3 .cb-v3-toc-tool-icon{
  font-size: 14px;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}

/* ============================================================
 * v778 — V3 anchor strip: simple (non-expandable) cell variant
 *
 * Idea 1 (context-aware swap) populates each section's strip with
 * its own 6 cells. Some cells have expansion details (rendered as
 * <details>), others are plain values (rendered as <div>).
 * .cb-v3-anchor-cell--simple = plain div with no hover-cursor +
 * no expansion machinery.
 * ============================================================ */
body.cb-mod-v3 .cb-v3-anchor-cell--simple{
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  cursor: default;
  background: rgba(13,13,22,.78);
}
body.cb-mod-v3 .cb-v3-anchor-cell--simple.cb-v3-anchor-cell--flag{
  background: linear-gradient(135deg, rgba(239,68,68,.10), rgba(13,13,22,.78));
}
body.cb-mod-v3 .cb-v3-anchor-cell--simple:hover{
  background: rgba(167,139,250,.05);
}

/* ============================================================
 * v779 — Per-section accent + tools polish + kbd + toast + help
 *
 * Per-section accent is set via --sec-accent / --sec-accent-rgb on
 * <html> by showSection() in v3 JS. Falls back to var(--accent).
 * Also: tool kbd hints, toast notification, keyboard help overlay,
 * print mode (only active section visible).
 * ============================================================ */

/* Per-section accent application — TOC active state */
body.cb-mod-v3 .cb-v3-toc-item[data-sec].active{
  background: rgba(var(--sec-accent-rgb, 167,139,250), .14) !important;
  color: var(--sec-accent, var(--accent)) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--sec-accent-rgb, 167,139,250), .35) !important;
}
body.cb-mod-v3 .cb-v3-toc-item[data-sec].active .cb-v3-toc-n{
  color: var(--sec-accent, var(--accent)) !important;
}
/* Section heading border + chapter number */
body.cb-mod-v3 .cb-v3-sec-head{
  border-bottom-color: rgba(var(--sec-accent-rgb, 167,139,250), .25) !important;
  transition: border-bottom-color .35s ease;
}
body.cb-mod-v3 .cb-v3-chapter-n{
  color: rgba(var(--sec-accent-rgb, 167,139,250), .65) !important;
  transition: color .35s ease;
}
/* Anchor strip border */
body.cb-mod-v3 .cb-v3-anchor-strip{
  border-color: rgba(var(--sec-accent-rgb, 167,139,250), .20) !important;
  transition: border-color .35s ease;
}
/* Sub-heads use the accent */
body.cb-mod-v3 .cb-v3-subhead{
  background: rgba(var(--sec-accent-rgb, 167,139,250), .07) !important;
  border-left-color: var(--sec-accent, var(--accent)) !important;
  color: var(--sec-accent, var(--accent)) !important;
}
body.cb-mod-v3 .cb-v3-subhead-dot{
  background: var(--sec-accent, var(--accent)) !important;
}
/* Hero title — keep chroma gradient but inject section accent as start */
body.cb-mod-v3 .cb-v3-hero-title{
  background: linear-gradient(120deg,
    var(--sec-accent, var(--chroma-1, var(--accent))) 0%,
    var(--chroma-2, var(--accent2)) 60%,
    var(--chroma-3, var(--accent)) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  transition: background .35s ease;
}
/* Anchor cell open + hover with section accent (not for flag cells) */
body.cb-mod-v3 details.cb-v3-anchor-cell[open]:not(.cb-v3-anchor-cell--flag){
  outline-color: rgba(var(--sec-accent-rgb, 167,139,250), .30) !important;
  background: rgba(var(--sec-accent-rgb, 167,139,250), .06) !important;
}
body.cb-mod-v3 details.cb-v3-anchor-cell[open]:not(.cb-v3-anchor-cell--flag) .cb-v3-anchor-toggle{
  color: var(--sec-accent, var(--accent)) !important;
}
body.cb-mod-v3 details.cb-v3-anchor-cell[open]:not(.cb-v3-anchor-cell--flag) .cb-v3-anchor-detail{
  border-top-color: rgba(var(--sec-accent-rgb, 167,139,250), .18) !important;
}
body.cb-mod-v3 details.cb-v3-anchor-cell:not(.cb-v3-anchor-cell--flag):hover{
  background: rgba(var(--sec-accent-rgb, 167,139,250), .08) !important;
}
body.cb-mod-v3 .cb-v3-anchor-detail li::before{
  color: var(--sec-accent, var(--accent)) !important;
}

/* Tool TOC items — keyboard chip on right */
body.cb-mod-v3 .cb-v3-toc-kbd{
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text3);
  line-height: 1;
}
body.cb-mod-v3 .cb-v3-toc-item--tool:hover .cb-v3-toc-kbd{
  background: rgba(34,211,238,.12);
  border-color: rgba(34,211,238,.30);
  color: #5eead4;
}

/* TOAST */
.cb-v3-toast{
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 22px;
  border-radius: 10px;
  background: rgba(13,13,22,.96);
  border: 1px solid rgba(167,139,250,.35);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: Manrope, system-ui, sans-serif;
  z-index: 100000;
  opacity: 0;
  transition: opacity .25s, transform .25s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 24px rgba(167,139,250,.20);
  pointer-events: none;
}
.cb-v3-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* KEYBOARD HELP overlay */
#cb-v3-help-overlay{
  position: fixed;
  inset: 0;
  background: rgba(2,2,7,.78);
  backdrop-filter: var(--glass-filter-standard);
  -webkit-backdrop-filter: var(--glass-filter-standard);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: cbV3HelpFade .25s ease;
}
.cb-v3-help-card{
  background: rgba(13,13,22,.96);
  border: 1px solid rgba(167,139,250,.30);
  border-radius: 14px;
  padding: 28px 32px;
  width: min(460px, 100%);
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
  font-family: Manrope, system-ui, sans-serif;
}
.cb-v3-help-card h3{
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.018em;
  background: linear-gradient(120deg, var(--chroma-1, var(--accent)), var(--chroma-2, var(--accent2)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cb-v3-help-card table{
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
}
.cb-v3-help-card td{
  padding: 7px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 13.5px;
  color: var(--text);
}
.cb-v3-help-card td:first-child{ width: 140px; white-space: nowrap; }
.cb-v3-help-card kbd{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(167,139,250,.14);
  border: 1px solid rgba(167,139,250,.30);
  color: var(--accent);
  margin-right: 4px;
}
.cb-v3-help-close{
  display: block;
  margin: 12px auto 0;
  padding: 9px 22px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #0a0a14;
  border: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
}
@keyframes cbV3HelpFade{ from{opacity:0} to{opacity:1} }

/* PRINT MODE — only active section visible */
@media print{
  body.cb-mod-v3 .cb-v3-toc,
  body.cb-mod-v3 .cb-v3-anchor-strip,
  body.cb-mod-v3 .cb-v3-preview-banner,
  body.cb-mod-v3 .cb-v3-hero,
  body.cb-mod-v3 .site-nav,
  body.cb-mod-v3 .cb-mesh-bg,
  body.cb-mod-v3 .cb-v3-toast,
  body.cb-mod-v3 #cb-v3-help-overlay,
  #cb-bg-galaxy-canvas{
    display: none !important;
  }
  body.cb-mod-v3 .cb-v3-main{
    background: white !important;
    border: 0 !important;
    color: black !important;
    padding: 0 !important;
  }
  body.cb-mod-v3 .cb-v3-main *{ color: black !important; }
  body.cb-mod-v3 .cb-v3-layout{ display: block !important; }
  body.cb-mod-v3 .cb-v3-sec-head{ border-color: black !important; }
  body.cb-mod-v3 .cb-v3-chapter-n{ color: #555 !important; }
}
body.cb-v3-print-mode .cb-v3-main .cb-v3-sec:not(.active){
  display: none !important;
}

/* ============================================================
 * v781 — SURPRISE: Voice-narrated Listen mode + Ask-AI co-pilot
 *
 * Two floating action buttons in the bottom-right corner:
 *   🎧 Listen   — narrates the active section with browser TTS
 *   💡 Ask      — opens CB_AIChat pre-loaded with section context
 *
 * Listen panel: horizontal controls strip with play/pause/skip/
 * speed/voice picker. Reading position highlights the active
 * paragraph in the main column.
 * ============================================================ */

/* FAB stack (bottom-right) */
body.cb-mod-v3 .cb-v3-fab,
body.cb-listen-ready .cb-v3-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(167,139,250,.40);
  background: linear-gradient(135deg, rgba(167,139,250,.20), rgba(96,165,250,.10));
  color: var(--text);
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 0 24px rgba(167,139,250,.30), inset 0 1px 0 rgba(255,255,255,.10);
  z-index: 9990;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),
              box-shadow .25s,
              background .25s;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.cb-mod-v3 .cb-v3-fab:hover,
body.cb-listen-ready .cb-v3-fab:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 40px rgba(0,0,0,.65), 0 0 36px rgba(167,139,250,.45);
}
body.cb-mod-v3 .cb-v3-fab:active,
body.cb-listen-ready .cb-v3-fab:active{ transform: scale(.96); }

/* Stack the three FABs vertically */
body.cb-mod-v3 .cb-qb-fab,
body.cb-listen-ready .cb-qb-fab {
  bottom: 28px !important;
  right: 28px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  font-size: 24px !important;
}
body.cb-mod-v3 .cb-v3-fab-listen,
body.cb-listen-ready .cb-v3-fab-listen {
  bottom: 96px !important;
  right: 28px !important;
}
body.cb-mod-v3 .cb-v3-fab-ask,
body.cb-listen-ready .cb-v3-fab-ask   { display: none !important; }   /* hide duplicate */
body.cb-mod-v3 #cb-ai-fab,
body.cb-listen-ready #cb-ai-fab {
  bottom: 164px !important;
  right: 28px !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  font-size: 24px !important;
}
body.cb-mod-v3 #cb-ai-fab:hover,
body.cb-listen-ready #cb-ai-fab:hover {
  transform: translateY(-3px) scale(1.05) !important;
}
body.cb-mod-v3 #cb-ai-fab:active,
body.cb-listen-ready #cb-ai-fab:active {
  transform: scale(.96) !important;
}

/* Active state pulse when TTS is speaking */
body.cb-mod-v3 .cb-v3-fab-active,
body.cb-listen-ready .cb-v3-fab-active {
  background: linear-gradient(135deg, rgba(94,234,212,.35), rgba(96,165,250,.20));
  border-color: rgba(94,234,212,.65);
  animation: cbV3FabPulse 2.5s ease-in-out infinite;
}
@keyframes cbV3FabPulse{
  0%, 100% { box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 0 24px rgba(94,234,212,.45), inset 0 1px 0 rgba(255,255,255,.10); }
  50%      { box-shadow: 0 16px 40px rgba(0,0,0,.65), 0 0 48px rgba(94,234,212,.75), inset 0 1px 0 rgba(255,255,255,.15); }
}

/* LISTEN PANEL — pops up above the FAB */
body.cb-mod-v3 .cb-v3-listen-panel,
body.cb-listen-ready .cb-v3-listen-panel {
  position: fixed;
  bottom: 96px;
  right: 96px;
  z-index: 9989;
  background: rgba(13,13,22,.96);
  border: 1px solid rgba(167,139,250,.35);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(440px, calc(100vw - 56px));
  box-shadow: 0 20px 60px rgba(0,0,0,.65), 0 0 32px rgba(167,139,250,.20);
  backdrop-filter: var(--glass-filter-standard);
  -webkit-backdrop-filter: var(--glass-filter-standard);
  opacity: 0;
  transform: translateY(8px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .2s, transform .2s cubic-bezier(.34,1.56,.64,1);
}
body.cb-mod-v3 .cb-v3-listen-panel.show,
body.cb-listen-ready .cb-v3-listen-panel.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
body.cb-mod-v3 .cb-v3-listen-row,
body.cb-listen-ready .cb-v3-listen-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
body.cb-mod-v3 .cb-v3-listen-btn,
body.cb-listen-ready .cb-v3-listen-btn {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .5px;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
  white-space: nowrap;
}
body.cb-mod-v3 .cb-v3-listen-btn:hover,
body.cb-listen-ready .cb-v3-listen-btn:hover {
  background: rgba(167,139,250,.12);
  border-color: rgba(167,139,250,.35);
}
body.cb-mod-v3 .cb-v3-listen-btn:active,
body.cb-listen-ready .cb-v3-listen-btn:active{ transform: scale(.96); }
body.cb-mod-v3 .cb-v3-listen-play,
body.cb-listen-ready .cb-v3-listen-play {
  background: linear-gradient(135deg, rgba(94,234,212,.20), rgba(96,165,250,.10));
  border-color: rgba(94,234,212,.40);
  color: #5eead4;
  min-width: 84px;
}
body.cb-mod-v3 .cb-v3-listen-prog,
body.cb-listen-ready .cb-v3-listen-prog {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text2);
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(255,255,255,.04);
}
body.cb-mod-v3 .cb-v3-listen-x,
body.cb-listen-ready .cb-v3-listen-x {
  background: transparent;
  border: 0;
  font-size: 18px;
  color: var(--text3);
  cursor: pointer;
  padding: 2px 8px;
  line-height: 1;
}
body.cb-mod-v3 .cb-v3-listen-x:hover,
body.cb-listen-ready .cb-v3-listen-x:hover{ color: #f87171; }
body.cb-mod-v3 .cb-v3-listen-lbl,
body.cb-listen-ready .cb-v3-listen-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text3);
  font-weight: 800;
}
body.cb-mod-v3 .cb-v3-listen-sel,
body.cb-listen-ready .cb-v3-listen-sel {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  min-width: 0;
}

/* Reading highlight — current paragraph being read */
body.cb-mod-v3 .cb-v3-tts-reading,
body.cb-listen-ready .cb-v3-tts-reading {
  background: linear-gradient(90deg,
    rgba(94,234,212,.10) 0%,
    rgba(94,234,212,.04) 100%) !important;
  border-left: 3px solid rgba(94,234,212,.65) !important;
  padding-left: 12px !important;
  margin-left: -15px !important;
  transition: background .25s ease, border-left-color .25s ease;
  scroll-margin-top: 200px;
  scroll-margin-bottom: 200px;
}

/* When actively listening, dim non-current paragraphs slightly */
body.cb-v3-listening .cb-v3-sec.active p:not(.cb-v3-tts-reading),
body.cb-v3-listening .cb-v3-sec.active li:not(.cb-v3-tts-reading){
  opacity: .55;
  transition: opacity .35s ease;
}
body.cb-v3-listening .cb-v3-sec.active .cb-v3-tts-reading{
  opacity: 1 !important;
}

/* Responsive: FAB smaller on mobile, panel full-width */
@media (max-width: 600px){
  body.cb-mod-v3 .cb-qb-fab,
  body.cb-listen-ready .cb-qb-fab {
    bottom: 18px !important;
    right: 18px !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
  }
  body.cb-mod-v3 .cb-v3-fab-listen,
  body.cb-listen-ready .cb-v3-fab-listen {
    bottom: 76px !important;
    right: 18px !important;
    width: 48px !important;
    height: 48px !important;
  }
  body.cb-mod-v3 .cb-v3-fab,
  body.cb-listen-ready .cb-v3-fab {
    width: 48px;
    height: 48px;
    font-size: 20px;
    bottom: 76px;
    right: 18px;
  }
  body.cb-mod-v3 .cb-v3-fab-ask,
  body.cb-listen-ready .cb-v3-fab-ask{ display: none !important; }
  body.cb-mod-v3 #cb-ai-fab,
  body.cb-listen-ready #cb-ai-fab {
    bottom: 134px !important;
    right: 18px !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
  }
  body.cb-mod-v3 .cb-v3-listen-panel,
  body.cb-listen-ready .cb-v3-listen-panel {
    right: 18px;
    left: 18px;
    bottom: 80px;
    width: auto;
  }
}

/* Reduced motion: kill the FAB pulse */
@media (prefers-reduced-motion: reduce){
  body.cb-mod-v3 .cb-v3-fab-active,
  body.cb-listen-ready .cb-v3-fab-active{ animation: none; }
  body.cb-mod-v3 .cb-v3-fab:hover,
  body.cb-listen-ready .cb-v3-fab:hover{ transform: none; }
}

/* ============================================================
 * v795 — LIGHT THEME: port the v3 PREMIUM glass system
 *
 * David: "port v3 premium glass to Light theme so it matches the
 * design language Dark + Obsidian both share now."
 *
 * Mirrors cb-dark-v3-premium.css (v577/v616 — Vision Pro / Linear /
 * Arc inspired) and the v760 Obsidian port. Light gets its own
 * tokens (warm cream surfaces with subtle grey depth shadows + CB
 * emerald accent glow) rather than the dark mode's inset-white-
 * highlight pattern.
 *
 * Principles (mirror from v3):
 *  - 3 glass tiers: ambient (search, mini chips) / standard (cards)
 *    / anchor (modals)
 *  - Multi-layer composite shadows: inset top highlight (subtle
 *    white) + inset bottom depth (warm shadow) + outer drop shadow
 *  - Accent-tinted ::before overlays for warmth
 *  - Refined typography opacity ladder
 *  - Soft emerald glow on hover for primary actions
 * ============================================================ */

/* ---------- 1. PREMIUM TOKENS for Light theme ---------- */
:root, html[data-theme="light"]{
  /* Tiered translucent backgrounds — high alpha (white-on-white) */
  --glass-1:          rgba(255,255,255,0.62);
  --glass-2:          rgba(255,255,255,0.74);
  --glass-3:          rgba(255,255,255,0.86);

  /* Multi-stop directional gradients (Vision Pro feel, light variant) */
  --glass-grad-1:     linear-gradient(135deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.52) 55%, rgba(255,255,255,0.42) 100%);
  --glass-grad-2:     linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.68) 50%, rgba(255,255,255,0.55) 100%);
  --glass-grad-3:     linear-gradient(135deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.82) 50%, rgba(255,255,255,0.70) 100%);

  /* Accent-tinted overlays — Light palette (CB emerald + sky + violet) */
  --glass-tint-accent: linear-gradient(135deg, rgba(22,101,52,0.060) 0%, transparent 38%, transparent 62%, rgba(22,101,52,0.030) 100%);
  --glass-tint-cool:   linear-gradient(135deg, rgba(14,165,233,0.055) 0%, transparent 38%, transparent 62%, rgba(56,189,248,0.030) 100%);
  --glass-tint-violet: linear-gradient(135deg, rgba(124,58,237,0.055) 0%, transparent 38%, transparent 62%, rgba(168,85,247,0.035) 100%);

  /* Borders — subtle warm-grey edges */
  --edge-1:           rgba(34,28,17,0.06);
  --edge-2:           rgba(34,28,17,0.08);
  --edge-3:           rgba(34,28,17,0.12);
  --edge-hover:       rgba(22,101,52,0.32);   /* CB green on hover */

  /* Top-edge highlights (light catching glass — almost-white) */
  --highlight-1:      rgba(255,255,255,0.65);
  --highlight-2:      rgba(255,255,255,0.80);
  --highlight-3:      rgba(255,255,255,0.95);

  /* Bottom inner shadow (warm depth, mimics shadow cast by glass) */
  --depth-1:          rgba(34,28,17,0.05);
  --depth-2:          rgba(34,28,17,0.08);
  --depth-3:          rgba(34,28,17,0.12);

  /* Soft ambient glow — CB emerald accent */
  --glow-soft:        0 0 28px rgba(22,101,52,0.10);
  --glow-active:      0 0 48px rgba(22,101,52,0.20);
  --glow-focus:       0 0 0 4px rgba(22,101,52,0.18);

  /* Composite multi-layer shadows (lighter than dark mode) */
  --shadow-glass-1:
    inset 0 1px 0 var(--highlight-1),
    inset 0 -1px 0 var(--depth-1),
    0 4px 14px rgba(34,28,17,0.05);
  --shadow-glass-2:
    inset 0 1px 0 var(--highlight-2),
    inset 0 -1px 0 var(--depth-2),
    0 8px 26px rgba(34,28,17,0.07),
    0 2px 6px rgba(34,28,17,0.04);
  --shadow-glass-3:
    inset 0 1px 0 var(--highlight-3),
    inset 0 -1px 0 var(--depth-3),
    0 24px 60px rgba(34,28,17,0.12),
    0 8px 22px rgba(34,28,17,0.07);
  --shadow-glass-hover:
    inset 0 1px 0 var(--highlight-3),
    inset 0 -1px 0 var(--depth-2),
    0 16px 42px rgba(34,28,17,0.10),
    0 4px 12px rgba(34,28,17,0.06),
    var(--glow-soft);
}

/* ---------- 2. BASE CANVAS — richer cream + soft ambient blobs ---------- */
html[data-theme="light"] body{
  background:
    radial-gradient(ellipse 70% 50% at 18% 12%, rgba(22,101,52,0.045) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 82% 18%, rgba(14,165,233,0.040) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 88% 78%, rgba(124,58,237,0.030) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 96%, rgba(22,101,52,0.025) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 12% 70%, rgba(245,158,11,0.020) 0%, transparent 60%),
    linear-gradient(180deg, #fbfaf6 0%, #f8f7f4 45%, #f5f3ed 100%) !important;
  background-attachment: fixed !important;
}

/* ---------- 3. TIER 2 — STANDARD CARDS ---------- */
html[data-theme="light"] .cbd-prod,
html[data-theme="light"] .cbd-coach,
html[data-theme="light"] .cbd-cheat,
html[data-theme="light"] .cbd-cheats,
html[data-theme="light"] .cbd-rem,
html[data-theme="light"] .cbd-rem-card,
html[data-theme="light"] .cbd-notes-card,
html[data-theme="light"] .cbd-noterem-card,
html[data-theme="light"] .cbd-clock,
html[data-theme="light"] .cbd-patient,
html[data-theme="light"] .cbd-patient-card,
html[data-theme="light"] .cbd-px-card,
html[data-theme="light"] .cbd-game,
html[data-theme="light"] .cb-sched-cmd,
html[data-theme="light"] .cb-sched-card-front,
html[data-theme="light"] .cb-sched-card-back{
  background: var(--glass-grad-2) !important;
  backdrop-filter: var(--glass-filter-standard) !important;
  -webkit-backdrop-filter: var(--glass-filter-standard) !important;
  border: 1px solid var(--edge-2) !important;
  box-shadow: var(--shadow-glass-2) !important;
  border-radius: 16px !important;
  position: relative;
  transition: border-color 320ms cubic-bezier(.16,1,.3,1), box-shadow 320ms cubic-bezier(.16,1,.3,1), transform 320ms cubic-bezier(.16,1,.3,1) !important;
}
/* Inner accent overlay (subtle emerald wash) */
html[data-theme="light"] .cbd-prod::before,
html[data-theme="light"] .cbd-coach::before,
html[data-theme="light"] .cbd-cheat::before,
html[data-theme="light"] .cbd-game::before,
html[data-theme="light"] .cb-sched-cmd::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-tint-accent);
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
html[data-theme="light"] .cbd-coach.coach-mid::before{
  background: var(--glass-tint-violet) !important;
}
/* Ensure card content sits above the ::before overlay */
html[data-theme="light"] .cbd-prod > *,
html[data-theme="light"] .cbd-coach > *,
html[data-theme="light"] .cbd-cheat > *,
html[data-theme="light"] .cbd-game > *,
html[data-theme="light"] .cb-sched-cmd > *{
  position: relative;
  z-index: 1;
}
/* Hover: lift + emerald border + soft accent glow */
html[data-theme="light"] .cbd-prod:hover,
html[data-theme="light"] .cbd-coach:hover,
html[data-theme="light"] .cbd-cheat:hover,
html[data-theme="light"] .cbd-rem-card:hover,
html[data-theme="light"] .cbd-game:hover,
html[data-theme="light"] .cb-sched-card:hover .cb-sched-card-front{
  border-color: var(--edge-hover) !important;
  box-shadow: var(--shadow-glass-hover) !important;
  transform: translateY(-2px);
}

/* ---------- 4. TIER 3 — ANCHOR SURFACES (modals) ---------- */
html[data-theme="light"] .cb-wtr-panel,
html[data-theme="light"] .cb-eod-panel,
html[data-theme="light"] .cb-hep-modal{
  background: var(--glass-grad-3) !important;
  backdrop-filter: var(--glass-filter-anchor) !important;
  -webkit-backdrop-filter: var(--glass-filter-anchor) !important;
  border: 1px solid var(--edge-3) !important;
  box-shadow: var(--shadow-glass-3) !important;
  position: relative;
}
html[data-theme="light"] .cb-wtr-panel::before,
html[data-theme="light"] .cb-eod-panel::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 25%, transparent 75%, rgba(34,28,17,0.04) 100%);
  pointer-events: none;
  z-index: 0;
}
html[data-theme="light"] .cb-wtr-panel > *,
html[data-theme="light"] .cb-eod-panel > *{ position: relative; z-index: 1; }

/* ---------- 5. TIER 1 — AMBIENT (search bar, mini chips) ---------- */
html[data-theme="light"] .cbd-search,
html[data-theme="light"] .cb-sched-search{
  background: var(--glass-grad-1) !important;
  backdrop-filter: var(--glass-filter-ambient) !important;
  -webkit-backdrop-filter: var(--glass-filter-ambient) !important;
  border: 1px solid var(--edge-1) !important;
  box-shadow: var(--shadow-glass-1) !important;
  border-radius: 14px !important;
  transition: all 280ms cubic-bezier(.16,1,.3,1) !important;
}
html[data-theme="light"] .cbd-search:hover,
html[data-theme="light"] .cb-sched-search:hover,
html[data-theme="light"] .cb-sched-search:focus-within{
  border-color: var(--edge-hover) !important;
  background: var(--glass-grad-2) !important;
  box-shadow:
    inset 0 1px 0 var(--highlight-2),
    inset 0 -1px 0 var(--depth-1),
    0 10px 28px rgba(34,28,17,0.08),
    var(--glow-soft) !important;
  transform: translateY(-1px);
}

/* ---------- 6. PINNED PATIENT — emerald primary surface ---------- */
html[data-theme="light"] .cbd-pinned{
  background: linear-gradient(135deg, rgba(22,101,52,0.10) 0%, rgba(22,101,52,0.04) 50%, rgba(22,101,52,0.015) 100%) !important;
  backdrop-filter: var(--glass-filter-standard) !important;
  -webkit-backdrop-filter: var(--glass-filter-standard) !important;
  border: 1px solid rgba(22,101,52,0.20) !important;
  border-left: 3px solid rgba(22,101,52,0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(34,28,17,0.06),
    0 10px 32px rgba(22,101,52,0.10),
    0 4px 12px rgba(34,28,17,0.06),
    var(--glow-soft) !important;
}
html[data-theme="light"] .cbd-pinned:hover{
  border-color: rgba(22,101,52,0.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    inset 0 -1px 0 rgba(34,28,17,0.08),
    0 16px 44px rgba(22,101,52,0.18),
    0 4px 14px rgba(34,28,17,0.08),
    var(--glow-active) !important;
  transform: translateY(-2px);
}

/* ---------- 7. TOOL TILES — Tier 2 glass + featured stays vivid ---------- */
html[data-theme="light"] .cbd-quick:not(.featured):not([style*="linear-gradient"]){
  background: var(--glass-grad-2) !important;
  backdrop-filter: var(--glass-filter-standard) !important;
  -webkit-backdrop-filter: var(--glass-filter-standard) !important;
  border: 1px solid var(--edge-2) !important;
  box-shadow:
    inset 0 1px 0 var(--highlight-2),
    inset 0 -1px 0 var(--depth-1),
    0 6px 18px rgba(34,28,17,0.05) !important;
  transition: all 250ms cubic-bezier(.16,1,.3,1) !important;
}
html[data-theme="light"] .cbd-quick:not(.featured):not([style*="linear-gradient"]):hover{
  transform: translateY(-3px) !important;
  border-color: var(--edge-hover) !important;
  box-shadow:
    inset 0 1px 0 var(--highlight-3),
    inset 0 -1px 0 var(--depth-1),
    0 18px 40px rgba(34,28,17,0.10),
    0 4px 10px rgba(34,28,17,0.06),
    var(--glow-soft) !important;
}
/* Featured tile (AI Voice Note) — CB emerald gradient */
html[data-theme="light"] .cbd-quick.featured{
  background: linear-gradient(135deg, #166534 0%, #15803d 50%, #22c55e 100%) !important;
  border: 1px solid rgba(22,101,52,0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 14px 36px rgba(22,101,52,0.32),
    0 4px 10px rgba(34,28,17,0.10),
    0 0 40px rgba(22,101,52,0.20) !important;
}
html[data-theme="light"] .cbd-quick.featured,
html[data-theme="light"] .cbd-quick.featured *:not(.cbd-quick-key){
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.20);
}
html[data-theme="light"] .cbd-quick.featured .cbd-quick-key{
  background: rgba(255,255,255,0.25) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.45) !important;
}
html[data-theme="light"] .cbd-quick.featured:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 22px 50px rgba(22,101,52,0.42),
    0 6px 14px rgba(34,28,17,0.12),
    0 0 56px rgba(22,101,52,0.28) !important;
  transform: translateY(-4px) !important;
}

/* ---------- 8. TYPOGRAPHY LADDER (Light variant) ---------- */
html[data-theme="light"]{
  color: rgba(28,25,23,0.94);   /* crisp primary against cream */
}
html[data-theme="light"] body,
html[data-theme="light"] p,
html[data-theme="light"] .cbd-prod-detail,
html[data-theme="light"] .cbd-coach-row-txt{
  color: rgba(28,25,23,0.74) !important;   /* warm grey body */
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] .cb-sched-name{
  color: rgba(28,25,23,0.92) !important;
}
html[data-theme="light"] .cbd-greet-text{ color: rgba(28,25,23,0.92) !important; }
html[data-theme="light"] .cbd-greet-quip{ color: rgba(28,25,23,0.55) !important; }

/* ---------- 9. INPUTS — emerald focus glow ---------- */
html[data-theme="light"] .cbd-prod-input,
html[data-theme="light"] #cb-sched-search-input,
html[data-theme="light"] .cb-sched-search-input,
html[data-theme="light"] .cb-wtr-doc-dict-ta,
html[data-theme="light"] textarea,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="number"]{
  background: rgba(255,255,255,0.62) !important;
  border: 1px solid var(--edge-2) !important;
  color: rgba(28,25,23,0.92) !important;
  transition: all 200ms cubic-bezier(.16,1,.3,1) !important;
}
html[data-theme="light"] .cbd-prod-input::placeholder,
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{
  color: rgba(28,25,23,0.42) !important;
}
html[data-theme="light"] .cbd-prod-input:focus,
html[data-theme="light"] #cb-sched-search-input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] input[type="text"]:focus,
html[data-theme="light"] input[type="number"]:focus{
  outline: none !important;
  border-color: rgba(22,101,52,0.50) !important;
  background: rgba(22,101,52,0.04) !important;
  box-shadow:
    var(--glow-focus),
    inset 0 1px 0 rgba(255,255,255,0.55) !important;
}

/* ---------- 10. PRIMARY CTA BUTTONS — confident emerald glow ---------- */
html[data-theme="light"] .cb-wtr-done,
html[data-theme="light"] .cb-sched-done-btn,
html[data-theme="light"] .cb-eod-btn.primary,
html[data-theme="light"] .cbd-clock-btn.primary{
  background: linear-gradient(135deg, #166534 0%, #15803d 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(22,101,52,0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 6px 18px rgba(22,101,52,0.32),
    0 0 24px rgba(22,101,52,0.12) !important;
  transition: all 220ms cubic-bezier(.16,1,.3,1) !important;
}
html[data-theme="light"] .cb-wtr-done:hover,
html[data-theme="light"] .cb-sched-done-btn:hover,
html[data-theme="light"] .cb-eod-btn.primary:hover,
html[data-theme="light"] .cbd-clock-btn.primary:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    0 10px 28px rgba(22,101,52,0.45),
    0 0 36px rgba(22,101,52,0.20) !important;
}

/* ============================================================
 * v796 — MOBILE OPTIMIZATION (all 3 themes)
 *
 * David: "optimize mobile code and feature, optimize format".
 *
 * The v755 chromeless sweep, v757 Obsidian darker bg, v760 Obsidian
 * v3 premium glass, and v795 Light v3 premium glass all shipped WITHOUT
 * mobile rules. At iPhone widths (<720px) this hits four problems:
 *
 *   1. Performance — 16-28px backdrop-filter blur on every card is
 *      GPU-expensive on mobile. Reduce 50-65%.
 *   2. Tap targets — chromeless metric pills shrunk; need 44x44 min.
 *   3. Hover effects — translateY + glow fire on EVERY tap on iOS
 *      (sticky :hover). Use @media (hover: none) to disable.
 *   4. Greeting + metric pills row — flex-wraps awkwardly; needs
 *      explicit column layout at narrow widths.
 *   5. Obsidian galaxy ::after spiral + twinkle field — expensive
 *      on mobile GPU. Disable below 720px.
 *   6. Font sizes — greeting 17px → 15px to fit narrow viewports.
 * ============================================================ */

@media (max-width: 720px){

  /* --- 1. PERF: dial back backdrop blurs (28px → 12px, 16px → 8px) --- */
  html[data-theme="light"] .cbd-prod,
  html[data-theme="light"] .cbd-coach,
  html[data-theme="light"] .cbd-cheat,
  html[data-theme="light"] .cbd-rem-card,
  html[data-theme="light"] .cbd-game,
  html[data-theme="light"] .cbd-patient,
  html[data-theme="light"] .cb-sched-cmd,
  html[data-theme="dark"] .cbd-prod,
  html[data-theme="dark"] .cbd-coach,
  html[data-theme="dark"] .cbd-cheat,
  html[data-theme="dark"] .cbd-rem-card,
  html[data-theme="dark"] .cbd-game,
  html[data-theme="dark"] .cbd-patient,
  html[data-theme="dark"] .cb-sched-cmd{
    backdrop-filter: var(--glass-filter-ambient) !important;
    -webkit-backdrop-filter: var(--glass-filter-ambient) !important;
  }
  html[data-theme="light"] .cb-wtr-panel,
  html[data-theme="light"] .cb-eod-panel,
  html[data-theme="light"] .cb-hep-modal,
  html[data-theme="dark"] .cb-wtr-panel,
  html[data-theme="dark"] .cb-eod-panel,
  html[data-theme="dark"] .cb-hep-modal{
    backdrop-filter: var(--glass-filter-standard) !important;
    -webkit-backdrop-filter: var(--glass-filter-standard) !important;
  }
  html[data-theme="light"] .cbd-quick:not(.featured),
  html[data-theme="dark"]  .cbd-quick:not(.featured){
    backdrop-filter: var(--glass-filter-ambient) !important;
    -webkit-backdrop-filter: var(--glass-filter-ambient) !important;
  }

  /* --- 2. PERF: kill accent ::before overlays on mobile (extra paint cost) --- */
  html[data-theme="light"] .cbd-prod::before,
  html[data-theme="light"] .cbd-coach::before,
  html[data-theme="light"] .cbd-cheat::before,
  html[data-theme="light"] .cbd-game::before,
  html[data-theme="light"] .cb-sched-cmd::before{
    display: none !important;
  }

  /* --- 3. PERF: kill Obsidian galaxy spiral + twinkle on mobile --- */
  
  
  

  /* --- 4. TAP TARGETS: metric pills + search + tool tiles ≥44x44 --- */
  .cbd-metric,
  .cbd-metric.is-action,
  .cbd-metric.cbd-weather,
  #cbd-metric-weather,
  #cbd-metric-streak,
  #cbd-metric-notes,
  #cbd-metric-units{
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 8px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .cbd-search{
    min-height: 48px !important;
    padding: 12px 14px !important;
  }
  .cbd-quick{
    min-height: 84px !important;
    padding: 12px 8px 10px !important;
  }

  /* --- 5. LAYOUT: .cbd-top stacks vertically; greeting full-width row --- */
  .cbd-top{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 4px !important;
  }
  .cbd-greet{
    width: 100% !important;
  }
  .cbd-top-meta{
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* Tighten the row so 4 pills fit horizontally on iPhone 14 (390px) */
    padding-bottom: 4px !important;
  }
  /* Hide scrollbar but keep scroll */
  .cbd-top-meta::-webkit-scrollbar{ display: none !important; }
  .cbd-top-meta{ scrollbar-width: none !important; }

  /* --- 6. FONT: greeting scales down to fit narrow viewports --- */
  .cbd-greet-text{ font-size: 15.5px !important; line-height: 1.3 !important; }
  .cbd-greet-quip{ font-size: 12px !important; }
  .cbd-time{ font-size: 10.5px !important; letter-spacing: 1.4px !important; }
  .cbd-metric-num{ font-size: 16px !important; }
  .cbd-metric-lbl{ font-size: 9px !important; letter-spacing: 1px !important; }

  /* --- 7. CARDS: tighter padding to maximize content area --- */
  html[data-theme="light"] .cbd-prod,
  html[data-theme="light"] .cbd-coach,
  html[data-theme="light"] .cbd-cheat,
  html[data-theme="dark"] .cbd-prod,
  html[data-theme="dark"] .cbd-coach,
  html[data-theme="dark"] .cbd-cheat{
    padding: 14px !important;
    border-radius: 12px !important;
  }
}

/* ---------- 8. HOVER STATES: disable on touch devices (iOS sticky-hover) ---
   On iOS, :hover fires after a tap and stays until the user taps elsewhere.
   Result: every card tap leaves a permanent translateY + glow until you tap
   the bg. Disable hover-only transforms on devices without true hover. */
@media (hover: none){
  html[data-theme="light"] .cbd-prod:hover,
  html[data-theme="light"] .cbd-coach:hover,
  html[data-theme="light"] .cbd-cheat:hover,
  html[data-theme="light"] .cbd-rem-card:hover,
  html[data-theme="light"] .cbd-game:hover,
  html[data-theme="light"] .cbd-pinned:hover,
  html[data-theme="light"] .cbd-quick:hover,
  html[data-theme="light"] .cbd-metric:hover,
  html[data-theme="dark"] .cbd-prod:hover,
  html[data-theme="dark"] .cbd-coach:hover,
  html[data-theme="dark"] .cbd-cheat:hover,
  html[data-theme="dark"] .cbd-rem-card:hover,
  html[data-theme="dark"] .cbd-game:hover,
  html[data-theme="dark"] .cbd-pinned:hover,
  html[data-theme="dark"] .cbd-quick:hover,
  html[data-theme="dark"] .cbd-metric:hover{
    transform: none !important;
  }
  /* Use :active (briefly fires on tap) for visual tap feedback instead */
  html[data-theme="light"] .cbd-prod:active,
  html[data-theme="light"] .cbd-coach:active,
  html[data-theme="light"] .cbd-game:active,
  html[data-theme="light"] .cbd-quick:active,
  html[data-theme="dark"] .cbd-prod:active,
  html[data-theme="dark"] .cbd-coach:active,
  html[data-theme="dark"] .cbd-game:active,
  html[data-theme="dark"] .cbd-quick:active{
    transform: scale(0.98) !important;
    transition: transform 120ms ease-out !important;
  }
}

/* ============================================================
 * v975 LIQUID EDGE — gradient border ring (Phase B refinement)
 * ------------------------------------------------------------
 * A 1px masked-gradient ring rides ::after on anchor-tier glass
 * chrome: light catches the top-left edge, falls away across the
 * pane, and returns as a faint cool reflection at the foot —
 * the "precise border gradient" a flat rgba border can't do.
 * Static decoration (no animation) -> needs no FX/motion gating.
 * Scope audit: .nav-drop owns no other pseudo in any sheet and
 * is position:absolute (theme.css:281), so inset:0 sizes to the
 * pane. Dark modals are deliberately SOLID (dark-v3 suppresses
 * their glass sheen) and .price-card's pseudos belong to the
 * galaxy shine sweep — both stay untouched by design.
 * ============================================================ */
.nav-drop::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(165deg,
    rgba(255,255,255,.60) 0%,
    rgba(255,255,255,.14) 30%,
    rgba(255,255,255,.05) 55%,
    rgba(173,199,255,.25) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  pointer-events:none;
  z-index:2;
}
[data-theme="dark"] .nav-drop::after{
  background:linear-gradient(165deg,
    rgba(255,255,255,.30) 0%,
    rgba(255,255,255,.08) 30%,
    rgba(255,255,255,.03) 55%,
    rgba(91,164,255,.20) 100%);
}