/* polish.css — merged polish-v25 through polish-v30
 * Generated by merge_polish.py — declarations combined per CSS cascade
 * Order: layered overrides resolved at build time, not runtime
 */

/* ===== DESIGN SYSTEM OVERHAUL v25 ===== */
/* Goal: premium, seamless, editorial quality. Blueprint-brand atmosphere. */
/* ------- GLOBAL REFINEMENTS ------- */
html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* Body background: flat, content-first. Grid pattern removed in v27 per reading-focus request. */
body{background:var(--bg);position:relative}
[data-theme="dark"] body{background:var(--bg)}
/* Subtle vignette at page edges */
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at center, transparent 0%, transparent 60%, rgba(0,0,0,.03) 100%);pointer-events:none;z-index:0}
[data-theme="dark"] body::before{background:radial-gradient(ellipse at center, transparent 0%, transparent 50%, rgba(0,0,0,.2) 100%)}
/* ------- NAVIGATION BAR: richer glass effect ------- */
.site-nav{background:rgba(var(--bg-rgb, 249, 249, 247), .72) !important;backdrop-filter: var(--glass-filter-anchor) !important;-webkit-backdrop-filter: var(--glass-filter-anchor) !important;border-bottom:1px solid var(--border) !important;box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 6px 32px rgba(0,0,0,.04)}
[data-theme="dark"] .site-nav{background:rgba(20, 22, 20, .7) !important;box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 6px 32px rgba(0,0,0,.3)}
/* Logo: more elegant with small interaction */
.logo-link{transition:opacity .2s}
.mark{background:linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%) !important;box-shadow:0 4px 14px rgba(var(--ar), .35), inset 0 1px 0 rgba(255,255,255,.2);font-weight:800;letter-spacing:-.5px}
/* ------- HERO: dramatic presentation ------- */
.hero{padding:80px 40px 72px !important;position:relative;overflow:hidden;background:radial-gradient(ellipse 800px 400px at 100% 100%, rgba(var(--ar), .06) 0%, transparent 60%),
    radial-gradient(ellipse 600px 300px at 0% 0%, rgba(var(--ar), .04) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, var(--bg2) 100%)}
[data-theme="dark"] .hero{background:radial-gradient(ellipse 800px 400px at 100% 100%, rgba(var(--ar), .12) 0%, transparent 60%),
    radial-gradient(ellipse 600px 300px at 0% 0%, rgba(var(--ar), .08) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,.02) 100%)}
/* Thin top gradient line anchoring hero to nav */
.hero::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:80%;max-width:800px;height:1px;background:linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);opacity:.3}
/* Upgrade chroma orb - bigger, more visible, more elegant */
.hero::after{top:0 !important;right:-100px !important;transform:none !important;width:520px !important;height:520px !important;opacity:.18 !important;filter:blur(60px) !important;animation:heroOrbSlow 24s ease-in-out infinite alternate !important}
[data-theme="dark"] .hero::after{opacity:.28 !important}
@keyframes heroOrbSlow{
  0%{transform:translate(0,0) scale(1);opacity:.15}
  50%{transform:translate(-30px,20px) scale(1.08);opacity:.22}
  100%{transform:translate(10px,-15px) scale(1.05);opacity:.18}
}
.hero-tag{font-size:11px !important;letter-spacing:2px !important;color:var(--accent) !important;font-weight:700 !important;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:var(--soft);border:1px solid var(--border);border-radius:100px;margin-bottom:20px !important;box-shadow:0 2px 8px rgba(var(--ar), .08);position:relative;z-index:2}
.hero-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:dotPulse2 2s ease-in-out infinite}
@keyframes dotPulse2{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(1.3)}
}
.hero h1{font-size:clamp(36px, 4.5vw, 56px) !important;font-weight:800 !important;line-height:1.05 !important;letter-spacing:-.03em !important;margin:0 0 20px !important;position:relative;z-index:2}
.hero h1 span{background:linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}
.hero p{font-size:17px !important;line-height:1.6 !important;max-width:55ch !important;color:var(--text2) !important;position:relative;z-index:2}
/* Hero stats: refined placement */
.cb-hero-stats{right:52px !important;bottom:48px !important;gap:36px !important}
.cb-hs-num{font-size:40px !important;font-weight:800 !important}
.cb-hs-lbl{font-size:10px !important;letter-spacing:1.8px !important}
/* ------- VIEW CONTROLS ROW: more elegant ------- */
.view-controls,
div:has(> .theme-btn),
.mode-bar{padding:12px 32px;background:var(--bg2);border-bottom:1px solid var(--border)}
/* ------- SIDEBAR (chip-nav vertical) ------- */
.tab-layout .chip-nav,
.chip-nav.chip-nav-vertical{padding:24px 16px !important;background:linear-gradient(180deg, var(--bg2) 0%, transparent 100%) !important;border-right:1px solid var(--border);min-height:100vh}
.chip-nav button{margin-bottom:2px !important;padding:10px 14px !important;border-radius:10px !important;font-size:13.5px !important;font-weight:500 !important;letter-spacing:-.01em;color:var(--text2) !important;background:transparent !important;border:1px solid transparent !important;position:relative;padding-left:32px !important;transition:all .2s cubic-bezier(.4,0,.2,1) !important}
.chip-nav button::before{content:'';position:absolute;left:14px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--border2);transition:all .25s cubic-bezier(.34,1.56,.64,1)}
.chip-nav button:hover{color:var(--text) !important;background:var(--soft) !important;transform:translateX(2px) !important}
.chip-nav button:hover::before{background:var(--accent);box-shadow:0 0 0 3px var(--soft)}
.chip-nav button.active{color:var(--text) !important;background:var(--soft) !important;font-weight:700 !important;border-color:var(--border) !important;box-shadow:0 2px 8px rgba(var(--ar), .08) !important;transform:translateX(0) !important}
.chip-nav button.active::before{width:8px;height:8px;background:var(--accent);box-shadow:0 0 0 4px var(--soft), 0 0 12px var(--accent)}
/* Remove old indicator dot that was baked in */
.chip-nav button > span[class*="dot"],
.chip-nav button::marker{display:none !important}
/* Practice Quiz button: more prominent CTA style */
.chip-nav button.quiz-chip,
.chip-nav button[onclick*="quiz"]{margin-top:20px !important;padding:12px 14px 12px 32px !important;background:linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%) !important;color:#fff !important;border:none !important;font-weight:700 !important;box-shadow:0 4px 16px rgba(var(--ar), .3) !important}
.chip-nav button.quiz-chip::before,
.chip-nav button[onclick*="quiz"]::before{background:rgba(255,255,255,.8) !important;box-shadow:0 0 0 3px rgba(255,255,255,.15) !important;width:6px !important;height:6px !important}
.chip-nav button.quiz-chip:hover,
.chip-nav button[onclick*="quiz"]:hover{transform:translateY(-2px) translateX(0) !important;box-shadow:0 8px 24px rgba(var(--ar), .4) !important}
/* ------- BL-STRIP: more elegant premium card ------- */
.bl-strip{padding:20px 24px !important;border-radius:0 !important;border-left-width:3px !important;background:var(--bg2) !important;border:1px solid var(--border) !important;border-left:3px solid var(--border2) !important;box-shadow:0 1px 3px rgba(0,0,0,.02);margin:20px 0 !important;position:relative;overflow:hidden}
.bl-strip:hover{box-shadow:0 6px 18px rgba(0,0,0,.05) !important;border-left-width:3px !important;transform:none !important}
/* Colored variants: use token soft+mid but more refined */
.bl-strip.gold{background:linear-gradient(135deg, var(--gold-mid) 0%, transparent 70%), var(--bg2) !important;border-left-color:var(--gold) !important}
.bl-strip.purple{background:linear-gradient(135deg, var(--purple-mid) 0%, transparent 70%), var(--bg2) !important;border-left-color:var(--purple) !important}
.bl-strip.red{background:linear-gradient(135deg, var(--red-mid) 0%, transparent 70%), var(--bg2) !important;border-left-color:var(--red) !important}
.bl-strip.green{background:linear-gradient(135deg, var(--green-mid) 0%, transparent 70%), var(--bg2) !important;border-left-color:var(--green) !important}
.bl-strip.orange{background:linear-gradient(135deg, var(--orange-mid) 0%, transparent 70%), var(--bg2) !important;border-left-color:var(--orange) !important}
/* Colored hover: amplify the tint */
.bl-strip.gold:hover{box-shadow:0 12px 32px rgba(var(--gr), .16) !important;border-left-color:var(--gold) !important}
.bl-strip.purple:hover{box-shadow:0 12px 32px rgba(var(--pr), .16) !important;border-left-color:var(--purple) !important}
.bl-strip.red:hover{box-shadow:0 12px 32px rgba(var(--rr), .16) !important;border-left-color:var(--red) !important}
.bl-strip.green:hover{box-shadow:0 12px 32px rgba(var(--nr), .16) !important;border-left-color:var(--green) !important}
.bl-strip.orange:hover{box-shadow:0 12px 32px rgba(var(--or), .16) !important;border-left-color:var(--orange) !important}
[data-theme="dark"] .bl-strip{background:rgba(255,255,255,.025) !important;border-color:rgba(255,255,255,.06) !important;box-shadow:0 2px 6px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.03) !important}
[data-theme="dark"] .bl-strip.gold{background:linear-gradient(135deg, rgba(var(--gr),.07) 0%, transparent 80%) !important}
[data-theme="dark"] .bl-strip.purple{background:linear-gradient(135deg, rgba(var(--pr),.07) 0%, transparent 80%) !important}
[data-theme="dark"] .bl-strip.red{background:linear-gradient(135deg, rgba(var(--rr),.07) 0%, transparent 80%) !important}
[data-theme="dark"] .bl-strip.green{background:linear-gradient(135deg, rgba(var(--nr),.07) 0%, transparent 80%) !important}
[data-theme="dark"] .bl-strip.orange{background:linear-gradient(135deg, rgba(var(--or),.07) 0%, transparent 80%) !important}
/* Shine sweep removed in v27 — was distracting during reading */
.bl-strip::after{display:none !important}
.bl-strip .bl-label{font-size:11px !important;letter-spacing:1.8px !important;font-weight:800 !important;margin-bottom:8px !important;padding-bottom:0 !important;border-bottom:none !important;text-transform:uppercase}
/* === FIX: prevent bl-label font from bleeding into nested content ===
   When a <p>, <ul>, <ol>, <table>, nested <div>, or ma-item ends up inside
   an unclosed <div class="bl-label">, reset font-family, size, letter-spacing,
   text-transform, and font-weight so the content renders normally. */
.bl-label p,
.bl-label ul,
.bl-label ol,
.bl-label li,
.bl-label table,
.bl-label td,
.bl-label th,
.bl-label .bl-strip,
.bl-label .ma-item,
.bl-label .ma-header,
.bl-label .ma-body,
.bl-label .data-table{font-family:'Manrope',sans-serif !important;text-transform:none !important;letter-spacing:normal !important;font-weight:normal !important;font-size:14.5px !important}
.bl-label p strong,
.bl-label .bl-strip .bl-label,
.bl-label .ma-header h4{font-weight:700 !important}
.bl-label .data-table th{font-family:'IBM Plex Mono',monospace !important;font-size:11px !important;letter-spacing:.7px !important;text-transform:uppercase !important;font-weight:600 !important}
[data-theme="dark"] .bl-strip .bl-label{border-bottom-color:rgba(255,255,255,.06) !important}
.bl-strip .bl-label::before{width:5px !important;height:5px !important;box-shadow:0 0 0 3px rgba(var(--ar), .15) !important}
/* === CASE TRIAD GROUPING (v27) ===
   Each 3-card case (FINDINGS + DIAGNOSIS + PEARL/RED) is wrapped in .case-triad.
   Tight gap between cards within a case, breathing room between cases. */
.case-triad{margin:32px 0 !important;display:block}
.case-triad .bl-strip{margin:6px 0 !important}
.case-triad .bl-strip:first-child{margin-top:0 !important}
.case-triad .bl-strip:last-child{margin-bottom:0 !important}
/* Bl-strip inside bl-strip (nested): slightly different to show hierarchy */
.bl-strip .bl-strip{margin:16px 0 0 !important;box-shadow:none !important;border-radius:12px !important}
/* ------- SECTION TITLE: editorial feel ------- */
.section-title{font-size:28px !important;font-weight:800 !important;letter-spacing:-.025em !important;line-height:1.15 !important;color:var(--text) !important;margin:48px 0 16px !important;padding-bottom:0 !important;position:relative;display:block;margin-top:32px !important;margin-bottom:8px !important}
/* Override theme.css aggressive pseudo reset with higher specificity + content */
.container .section-title::before,
.tab-panel .section-title::before,
body .section-title::before{content:'§' !important;color:var(--accent) !important;font-weight:500 !important;font-size:.7em !important;margin-right:14px !important;opacity:.4 !important;vertical-align:super !important;font-family:'IBM Plex Mono',monospace !important;display:inline-block !important;width:auto !important;height:auto !important;background:none !important;border:none !important}
/* v443 — when a section has its own SVG icon, suppress the § marker so we don't show both */
.container .section-title.section-title--icon::before,
.tab-panel .section-title.section-title--icon::before,
body .section-title.section-title--icon::before{content:none !important;display:none !important;margin-right:0 !important}
.container .section-title::after,
.tab-panel .section-title::after,
body .section-title::after{content:'' !important;position:absolute !important;left:0 !important;bottom:-8px !important;width:40px !important;height:3px !important;background:linear-gradient(90deg,var(--accent),var(--accent2)) !important;border-radius:3px !important;transition:width .4s cubic-bezier(.34,1.56,.64,1) !important;display:block !important}
.section-title:hover::after{width:80px !important}
/* First section-title in a container: less top margin */
.container > .section-title:first-child,
.tab-panel > .section-title:first-child,
.tab-panel .container > .section-title:first-child{margin-top:24px !important}
.section-sub{font-size:15.5px !important;line-height:1.7 !important;color:var(--text2) !important;max-width:65ch;margin:0 0 28px !important;margin-top:0 !important;margin-bottom:24px !important}
/* ------- DATA TABLES: editorial precision ------- */
.data-table{border-radius:14px !important;border:1px solid var(--border) !important;overflow:hidden;background:var(--bg2);box-shadow:0 2px 8px rgba(0,0,0,.03);margin:20px 0 !important}
.data-table thead th{background:linear-gradient(180deg, var(--bg3) 0%, var(--bg2) 100%) !important;padding:14px 18px !important;font-size:10.5px !important;letter-spacing:1.6px !important;color:var(--text2) !important;font-weight:700 !important;border-bottom:1px solid var(--border) !important}
.data-table tbody td{padding:14px 18px !important;border-bottom:1px solid var(--border) !important;line-height:1.6}
.data-table tbody tr:last-child td{border-bottom:none !important}
.data-table tbody tr{transition:background .15s}
.data-table tbody tr:hover{background:var(--soft) !important}
.data-table tbody tr:hover td{color:var(--text)}
/* ------- STAT PILLS (Sn/Sp) ------- */
.stat-pill,.wb-pill{padding:3px 10px !important;border-radius:100px !important;font-family:'IBM Plex Mono',monospace !important;font-size:11.5px !important;font-weight:700 !important;letter-spacing:.3px !important;box-shadow:inset 0 -1px 0 rgba(0,0,0,.06);transition:transform .2s}
.stat-pill:hover,.wb-pill:hover{transform:scale(1.06)}
/* ------- BUTTONS: more tactile ------- */
button:not(.chip-nav button):not(.theme-btn):not(.cb-nav-search-btn):not(.cb-nav-flashcards-btn):not(#cb-search-fab):not(#cb-fc-fab):not(.cb-fc-btn):not(.ma-header):not(.v4-hot){transition:all .2s cubic-bezier(.34,1.56,.64,1) !important}
/* ------- SR DASHBOARD: refined pill ------- */
.sr-dashboard{margin-top:12px !important;padding:9px 16px !important;font-size:12px !important;letter-spacing:.4px !important;border-radius:100px !important;font-weight:600 !important}
.sr-dashboard.sr-empty{background:linear-gradient(135deg, var(--green-soft) 0%, var(--bg2) 100%) !important;border:1px solid var(--green-mid) !important;color:var(--green) !important;display:none !important}
.sr-dashboard:not(.sr-empty){background:linear-gradient(135deg, var(--mid) 0%, var(--bg2) 100%) !important;border:1px solid var(--accent) !important;color:var(--text) !important;display:inline-flex !important}
/* ------- "All caught up" / view controls: ensure proper spacing ------- */
/* Container padding-top must align with chip-nav padding-top (14px from theme.css line 50)
   so sidebar first item and content first item start at same y position. */
.container,
.tab-panel .container{padding-top:14px}
/* ------- CONTAINER: soft page gutter ------- */
.container{max-width:1180px;margin:0 auto;padding-left:40px;padding-right:40px}
/* ------- SELECTION STYLING ------- */
::selection{background:rgba(var(--ar), .25);color:var(--text)}
/* ------- PAGE TRANSITIONS: smoother ------- */
.tab-panel.active{animation:tabEnterSoft .4s cubic-bezier(.22,1,.36,1) !important}
@keyframes tabEnterSoft{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
/* ------- LINKS IN CONTENT ------- */
.container a:not([class]){color:var(--accent);text-decoration:none;background-image:linear-gradient(var(--accent),var(--accent));background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s}
.container a:not([class]):hover{background-size:100% 1px}
/* ------- MOBILE REFINEMENTS ------- */
@media (max-width:768px){
  .hero{padding:48px 24px 40px !important}
  .hero h1{font-size:32px !important}
  .hero p{font-size:15px !important}
  .container{padding-left:20px;padding-right:20px}
  .section-title{font-size:22px !important;margin:32px 0 12px !important;margin-top:24px !important}
  .bl-strip{padding:18px 20px !important;border-radius:12px !important}
  .data-table{border-radius:10px !important}
  /* Horizontal chip nav on mobile */
  .chip-nav{padding:10px 16px !important;min-height:auto !important;gap:8px !important;background:linear-gradient(180deg,var(--bg2) 0%,transparent 100%) !important;border-right:none !important;border-bottom:1px solid var(--border)}
  .chip-nav button{padding:8px 14px 8px 26px !important;min-height:36px !important;font-size:13px !important}
  .chip-nav button::before{left:10px !important;width:4px !important;height:4px !important}
  .chip-nav button.active::before{width:6px !important;height:6px !important}
  /* Quiz chip more compact */
  .chip-nav button.quiz-chip{padding:8px 16px !important;margin-top:4px !important}
  .cb-next-nav{margin:24px 0 !important}
  .self-check{margin:20px 0 !important}
  .section-sub{margin-bottom:20px !important}
}
/* Reduce motion respect */
@media (prefers-reduced-motion:reduce){
  .hero::after,.chip-nav button.active::before,
  .bl-strip::after,.hero-tag::before,.mark{animation:none !important}
}
/* Theme toggle: fully transparent to blend with glass nav */
.site-nav .theme-toggle{background:transparent !important;border-color:var(--border) !important}
.site-nav .theme-toggle .theme-btn{background:transparent !important}
.site-nav .theme-toggle .theme-btn.active{background:var(--soft) !important}
/* ===== VIEW CONTROL ROW + SR PILL INTEGRATION ===== */
/* The SR pill floats at the top of the content area without pushing content down.
   Without this, it creates a ~70px gap between sidebar top and content top. */
.container .sr-dashboard,
.tab-panel .sr-dashboard{position:absolute !important;top:14px !important;right:24px !important;margin:0 !important;z-index:5}
/* Parent must be positioned for absolute child to anchor correctly */
.tab-layout>.tab-panel{position:relative}
/* On narrow screens, float the pill below (avoids overlap with mobile chip nav) */
@media (max-width:900px){
  .container .sr-dashboard,
  .tab-panel .sr-dashboard{position:static !important;margin:0 0 16px !important}
  .tab-layout{background:var(--bg) !important}
  .tab-layout::before{display:none !important}
  .chip-nav{background:var(--bg2) !important;box-sizing:border-box !important;max-width:100vw !important}
  /* Prevent any child from forcing horizontal overflow */
  .tab-panel{max-width:100vw !important;box-sizing:border-box !important}
  html body .tab-panel .container,
  html body .container{padding-left:20px !important;padding-right:20px !important}
}
/* VIEW controls row: blend with hero, less prominent */
[class*="mode-bar"],
.view-controls{padding:14px 40px !important;background:transparent !important;border-bottom:1px solid var(--border) !important}
/* Layout mode buttons - better styling */
[class*="layout-btn"],
[onclick*="setLayout"],
button[data-layout]{transition:all .2s cubic-bezier(.34,1.56,.64,1) !important}
button[data-layout]:hover:not(.active){background:var(--soft) !important;transform:scale(1.05)}
/* ===== ADDITIONAL POLISH ===== */
/* Improved dropdown menu styling */
.dropdown-menu,.nav-dropdown{background:var(--bg) !important;border:1px solid var(--border) !important;border-radius:12px !important;box-shadow:0 20px 50px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06) !important;overflow:hidden;padding:6px !important}
.dropdown-menu a,.nav-dropdown a{border-radius:8px;padding:8px 12px !important;transition:background .15s;margin:0 !important}
.dropdown-menu a:hover,.nav-dropdown a:hover{background:var(--soft) !important;color:var(--accent) !important}
/* Tighter code/keyboard key styling */
kbd,code{font-family:'IBM Plex Mono',monospace;background:var(--soft);border:1px solid var(--border);border-radius:4px;padding:1px 6px;font-size:.9em;box-shadow:0 1px 0 rgba(0,0,0,.06)}
/* Trophy toast: premium feel */
.cb-trophy-toast,.cb-toast{background:var(--bg-glass,rgba(255,255,255,.92)) !important;backdrop-filter: var(--glass-filter-anchor);-webkit-backdrop-filter: var(--glass-filter-anchor);border:1px solid var(--border) !important;box-shadow:0 20px 60px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.08) !important;border-radius:18px !important}
[data-theme="dark"] .cb-trophy-toast,
[data-theme="dark"] .cb-toast{background:rgba(24,26,24,.88) !important;border-color:rgba(255,255,255,.08) !important}
/* Trophy icon container */
.cb-trophy-toast img,.cb-trophy-toast svg{filter:drop-shadow(0 2px 4px rgba(var(--ar),.3))}
/* ===== QUIZ MODAL: ensure proper polish ===== */
.quiz-modal,.quiz-container{background:var(--bg) !important;border-radius:20px !important;box-shadow:0 30px 80px rgba(0,0,0,.25) !important}
.quiz-header{background:linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%) !important;border-bottom:1px solid var(--border) !important}
.quiz-header-title{font-size:18px !important;font-weight:800 !important;letter-spacing:-.02em}
/* Quiz question styling */
.q-option,.quiz-choice{border-radius:12px !important;padding:14px 18px !important;border:1px solid var(--border) !important;background:var(--bg2) !important;transition:all .2s cubic-bezier(.34,1.56,.64,1) !important}
.q-option:hover,.quiz-choice:hover{border-color:var(--accent) !important;background:var(--soft) !important}
.q-option.selected,.quiz-choice.selected{border-color:var(--accent) !important;background:var(--mid) !important;box-shadow:0 2px 8px rgba(var(--ar), .15)}
.q-option.correct,.quiz-choice.correct{border-color:var(--green) !important;background:var(--green-soft) !important}
.q-option.incorrect,.quiz-choice.incorrect{border-color:var(--red) !important;background:var(--red-soft) !important}
/* ===== MOBILE: better chip-nav positioning ===== */
/* ===== DARK MODE: extra polish ===== */
[data-theme="dark"]{color-scheme:dark}
[data-theme="dark"] .bl-strip:hover{box-shadow:0 12px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06) !important}
[data-theme="dark"] .data-table{box-shadow:0 2px 8px rgba(0,0,0,.2) !important}
[data-theme="dark"] .mark{box-shadow:0 4px 14px rgba(var(--ar), .5), inset 0 1px 0 rgba(255,255,255,.15) !important}
/* ===== QUIZ EXPLANATION — STRUCTURED RENDER (v36) ===== */
/* Transform dense paragraph explanations into scannable chunks. */
.quiz-explanation{font-size:14.5px;line-height:1.65}
.quiz-explanation .qx-section-header{font-family:'IBM Plex Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--accent);font-weight:700;margin:14px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.quiz-explanation .qx-section-header:first-child{margin-top:0}
.quiz-explanation .qx-intro{margin:4px 0 8px;color:var(--text2)}
.quiz-explanation .qx-list{list-style:none;padding:0;margin:6px 0 10px;counter-reset:qxitem}
.quiz-explanation .qx-list > li{position:relative;padding:8px 10px 8px 34px;margin:0 0 6px 0;background:var(--bg);border-left:2px solid var(--accent);border-radius:4px;counter-increment:qxitem;color:var(--text2)}
.quiz-explanation .qx-list > li::before{content:counter(qxitem);position:absolute;left:8px;top:8px;width:20px;height:20px;background:var(--accent);color:var(--bg);border-radius:50%;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.quiz-explanation .qx-emph{color:var(--text);font-weight:600;background:linear-gradient(transparent 62%, rgba(var(--ar), .15) 62%);padding:0 1px}
/* Mobile - keep readable */
@media (max-width:640px){
  .quiz-explanation{font-size:14px}
  .quiz-explanation .qx-list > li{padding:7px 8px 7px 30px}
  .quiz-explanation .qx-list > li::before{left:6px;top:7px;width:18px;height:18px;font-size:10px}
  .dx-grid{grid-template-columns:1fr}
  .case-reveal-btn{font-size:13px;padding:12px 14px}
  .self-check{padding:14px 16px}
}
/* ========================================================================= 
 * v118: PARAGRAPH SPACING inside ma-body (Encounter accordions, reveal cards)
 * Multiple consecutive prose paragraphs get proper vertical breathing room
 * so stacked predict-then-reveal content doesn't run together.
 * ========================================================================= */
.ma-body > p{margin:0 0 14px 0;line-height:1.7}
.ma-body > p:last-child{margin-bottom:0}
.ma-body > p + p{margin-top:14px}
/* Paragraphs immediately following a ul/ol get a touch of separation */
.ma-body > ul + p,
.ma-body > ol + p{margin-top:14px}
.ma-body > p + ul,
.ma-body > p + ol{margin-top:8px}
/* Bolded "section sub-header" paragraphs (Label: pattern) get tighter to their following content */
.ma-body > p > strong:first-child{display:inline}
/* === FIX (v120): wide tables get proper horizontal scroll without breaking column alignment ===
   Previous rule used display:block on tables which broke column-width calculation.
   New approach: keep tables as display:table for proper column layout, and let parent
   containers handle horizontal scroll if needed. Tables themselves never overflow viewport. */
.container .data-table,
.tab-panel .data-table,
.bl-strip .data-table,
.ma-body .data-table{display:table;width:100%;max-width:100%;table-layout:auto}
.container .data-table thead,
.tab-panel .data-table thead,
.bl-strip .data-table thead,
.ma-body .data-table thead{display:table-header-group}
.container .data-table tbody,
.tab-panel .data-table tbody,
.bl-strip .data-table tbody,
.ma-body .data-table tbody{display:table-row-group}
.container .data-table tr,
.tab-panel .data-table tr,
.bl-strip .data-table tr,
.ma-body .data-table tr{display:table-row}
/* Cells: allow text wrapping, no max-width restriction */
.data-table td,
.data-table th{max-width:none;white-space:normal;word-wrap:break-word;overflow-wrap:break-word}
/* For the rare case where a table genuinely cannot fit (e.g. very wide on narrow viewport),
   wrap individual rows so content stays readable rather than truncating */
@media (max-width: 720px){
  .ma-body .data-table,
  .container .data-table{font-size:13px}
  .data-table td,
  .data-table th{padding:8px 10px !important}
}
/* === FIX: ensure quiz explanation body renders in Manrope regardless of parent font === */
.quiz-explanation,
.quiz-explanation *,
.quiz-explanation-text,
.quiz-explanation-text *,
.quiz-explanation .qx-intro,
.quiz-explanation .qx-list,
.quiz-explanation .qx-list li{font-family:'Manrope',sans-serif}
/* === FIX: review cards (rc2) should use Manrope, not inherit any mono/caps === */
.rc2,
.rc2 *,
.rc2 .rc2-q,
.rc2 .rc2-a,
.rc2 .rc2-a *{font-family:'Manrope',sans-serif;text-transform:none;letter-spacing:normal}
.rc2 .rc2-flip{font-family:'IBM Plex Mono',monospace}
/* === STEP BLOCKS (PPE sequences, procedures) === */
.bl-strip.step{display:flex;align-items:flex-start;gap:18px;padding:16px 20px !important;margin:10px 0 !important}
.bl-strip.step .step-num{flex:0 0 34px;height:34px;width:34px;border-radius:50%;background:var(--accent);color:var(--bg);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:700;line-height:1}
.bl-strip.step .step-body{flex:1;min-width:0}
.bl-strip.step .step-body h5{font-family:'Manrope',sans-serif;font-size:15px;font-weight:700;color:var(--text);margin:0 0 6px;line-height:1.3}
.bl-strip.step .step-body p{margin:0;color:var(--text2);line-height:1.65;font-size:14.5px}
/* === MA-ITEM: better visual separation in dark mode === */
.ma-item, .ma-card{margin-bottom:10px !important;border:1px solid var(--border2) !important}
[data-theme="dark"] .ma-item, [data-theme="dark"] .ma-card{border-color:#3a3a3f !important}
.ma-item + .ma-item, .ma-card + .ma-card, .ma-item + .ma-card, .ma-card + .ma-item{margin-top:10px}
/* Chevron: more visible, clearly interactive */
.ma-chevron{opacity:.9 !important}
/* === HERO "How to use this module" callout === */
.hero .hero-howto{font-size:13.5px !important;color:var(--text3) !important;margin-top:14px !important;padding:10px 14px !important;border-left:2px solid var(--accent) !important;background:var(--soft) !important;border-radius:0 6px 6px 0 !important;line-height:1.6 !important}
.hero .hero-howto strong{color:var(--accent) !important;font-weight:700}
/* ============================================================
   REVEAL-ON-CLICK: Case Triads, Self-Check, Diagnosis Cards
   ============================================================ */
/* === CASE TRIAD REVEAL === */
.case-triad.reveal .case-reveal{margin:10px 0}
.case-reveal-btn{display:block;width:100%;padding:14px 20px;background:var(--soft);border:1px dashed var(--border2);border-radius:10px;color:var(--accent);font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.6px}
.case-reveal-btn:hover{background:var(--mid);border-color:var(--accent);transform:translateX(2px)}
.case-reveal-btn::before{content:'? ';margin-right:4px;font-weight:700}
.case-reveal-btn.revealed{display:none}
.case-reveal-content{animation:revealFade .35s ease}
.case-reveal-content.hidden{display:none}
@keyframes revealFade{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:translateY(0);}
}
/* === SELF-CHECK INLINE QUESTIONS === */
.self-check{margin:24px 0 !important;padding:18px 22px;background:linear-gradient(135deg, var(--soft), var(--bg2));border:1px solid var(--border2);border-left:3px solid var(--accent);border-radius:10px}
[data-theme="dark"] .self-check{border-color:#3a3a3f}
.self-check-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--accent);font-weight:700;margin-bottom:8px}
.self-check-q{font-size:15px;font-weight:600;color:var(--text);line-height:1.5;margin-bottom:12px}
.self-check-btn{display:inline-block;padding:8px 16px;background:var(--accent);color:var(--bg);border:none;border-radius:8px;font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease}
.self-check-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--ar),.25)}
.self-check-btn.revealed{display:none}
.self-check-a{margin-top:12px;padding:12px 16px;background:var(--bg2);border-radius:8px;font-size:14px;line-height:1.6;color:var(--text2);animation:revealFade .3s ease}
.self-check-a.hidden{display:none}
.self-check-a strong{color:var(--text)}
/* === DIAGNOSIS CARDS === */
.dx-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:12px;margin:16px 0}
.dx-card{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;padding:14px 18px;cursor:pointer;transition:all .2s ease;position:relative}
[data-theme="dark"] .dx-card{border-color:#3a3a3f}
.dx-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 20px rgba(var(--ar),.12)}
.dx-card-name{font-size:15px;font-weight:700;color:var(--text);margin-bottom:4px;display:flex;align-items:center;justify-content:space-between}
.dx-card-name::after{content:'+';font-size:18px;color:var(--accent);font-weight:300;transition:transform .25s ease}
.dx-card.open .dx-card-name::after{content:'−';transform:rotate(180deg)}
.dx-card-preview{font-size:13px;color:var(--text3);line-height:1.5}
.dx-card-details{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);font-size:14px;line-height:1.65}
.dx-card.open .dx-card-details{display:block;animation:revealFade .3s ease}
.dx-card-details p{margin:6px 0}
.dx-card-details strong{color:var(--accent)}
/* Mobile adjustments */
/* ===== v62: prevent vertical-line artifacts on narrow viewports ===== */
/* Background is source of spurious stripes when narrow elements overlap the tab-layout gradient */
/* === v69: SR dashboard positioning fix === */
/* The sr-dashboard ("All caught up" badge) was injected at top of .container, 
   taking up vertical space and pushing the first section-title down.
   Reposition it to float top-right of the tab-panel without disrupting content flow. */
.tab-panel .container > .sr-dashboard:first-child{position:absolute !important;top:14px !important;right:20px !important;z-index:5 !important;margin:0 !important}
.tab-panel{position:relative}
/* When sr-dashboard is empty (which is the default state), hide it entirely 
   rather than showing the placeholder text that clutters the view */
/* Restore first-section-title :first-child behavior even with sr-dashboard present */
.container > .sr-dashboard + .section-title{margin-top:24px !important}
/* Keep the sr-dashboard visible only when there are actually due cards to review */
/* =========================================================================
 * v69 INTERACTIVE LEARNING PRIMITIVES
 * ========================================================================= */
/* === Per-tab progress bar === */
.ix-progress-bar{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin:0 0 20px 0;font-family:'IBM Plex Mono', monospace;font-size:11.5px;transition:border-color .3s ease, background .3s ease}
.ix-progress-label{display:flex;justify-content:space-between;align-items:center;color:var(--text2);letter-spacing:.02em;text-transform:uppercase;margin-bottom:6px}
.ix-progress-count{color:var(--accent);font-weight:600}
.ix-progress-track{height:4px;background:var(--bg3);border-radius:2px;overflow:hidden}
.ix-progress-fill{height:100%;background:linear-gradient(90deg, var(--accent), var(--accent2));width:0%;transition:width .5s cubic-bezier(.25,.8,.25,1);border-radius:2px}
.ix-progress-complete{border-color:var(--accent) !important;background:var(--soft) !important}
.ix-progress-complete .ix-progress-label::after{content:' ✓';color:var(--accent);font-weight:700}
/* === REVEAL CARD === */
.ix-reveal{background:var(--bg2);border:1.5px solid var(--border);border-left:3px solid var(--purple);border-radius:10px;padding:16px 20px;margin:14px 0;cursor:pointer;transition:all .25s ease;position:relative}
.ix-reveal:hover{border-color:var(--purple);background:var(--purple-soft);transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--pr), .08)}
.ix-reveal-prompt{font-weight:600;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:12px}
.ix-reveal-prompt::before{content:'◆ THINK FIRST';font-family:'IBM Plex Mono', monospace;font-size:10px;letter-spacing:.08em;color:var(--purple);background:var(--purple-soft);padding:3px 8px;border-radius:4px;margin-right:10px;display:inline-block;flex-shrink:0}
.ix-reveal-hint{font-family:'IBM Plex Mono', monospace;font-size:10.5px;color:var(--text2);opacity:.7;white-space:nowrap;flex-shrink:0}
.ix-reveal-answer{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);color:var(--text);line-height:1.65;animation:ixReveal .35s ease}
.ix-reveal.ix-done{border-left-color:var(--accent);background:var(--soft)}
.ix-reveal.ix-done .ix-reveal-hint{color:var(--accent);opacity:1;font-weight:600}
/* === DEEP-DIVE CARD === */
.ix-deepdive{background:var(--bg2);border:1.5px solid var(--border);border-radius:10px;margin:14px 0;transition:all .25s ease}
.ix-deepdive-teaser{padding:14px 18px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:background .2s ease}
.ix-deepdive-teaser:hover{background:var(--gold-soft)}
.ix-deepdive-teaser::before{content:'▸ DIVE DEEPER';font-family:'IBM Plex Mono', monospace;font-size:10px;letter-spacing:.08em;color:var(--gold);background:var(--gold-soft);padding:3px 8px;border-radius:4px;margin-right:10px;flex-shrink:0}
.ix-deepdive-hint{font-family:'IBM Plex Mono', monospace;font-size:10.5px;color:var(--gold);font-weight:600;white-space:nowrap;flex-shrink:0}
.ix-dd-chev{display:inline-block;transition:transform .25s ease}
.ix-deepdive-content{padding:0 18px 16px 18px;border-top:1px solid var(--border);color:var(--text);line-height:1.7;animation:ixReveal .35s ease}
.ix-deepdive-content > *:first-child{margin-top:14px}
.ix-deepdive-content .ix-dd-list{margin:8px 0 0 0;padding:0}
.ix-deepdive-content .ix-dd-list dt{font-weight:700;color:var(--text);margin-top:14px;font-size:14.5px}
.ix-deepdive-content .ix-dd-list dt:first-child{margin-top:0}
.ix-deepdive-content .ix-dd-list dd{margin:4px 0 0 0;color:var(--text);line-height:1.65;font-size:14px}
/* === v85: Multi-question quiz group === */
.ix-quiz-group{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:10px;padding:16px 20px;margin:14px 0}
.ix-quiz-title{font-family:'IBM Plex Mono', monospace;font-size:11px;letter-spacing:.08em;color:var(--gold);text-transform:uppercase;margin-bottom:14px;font-weight:700}
.ix-quiz-sub{background:transparent;border:none;border-top:1px dashed var(--border);border-left:none;border-radius:0;padding:14px 0 4px 0;margin:0}
.ix-quiz-sub:first-of-type{border-top:none;padding-top:0}
.ix-deepdive.ix-done{border-color:var(--gold)}
/* === QUIZ CARD === */
.ix-quiz{background:var(--bg2);border:1.5px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:16px 20px;margin:14px 0;transition:all .25s ease}
.ix-quiz-q{font-weight:600;color:var(--text);margin-bottom:12px;display:flex;align-items:flex-start;gap:10px}
.ix-quiz-q::before{content:'◉ QUICK CHECK';font-family:'IBM Plex Mono', monospace;font-size:10px;letter-spacing:.08em;color:var(--accent);background:var(--soft);padding:3px 8px;border-radius:4px;flex-shrink:0;font-weight:600}
.ix-quiz-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:0}
.ix-quiz-opts button{background:var(--bg);border:1.5px solid var(--border);border-radius:8px;padding:10px 14px;text-align:left;cursor:pointer;font-family:'Manrope', sans-serif;font-size:14.5px;color:var(--text);transition:all .2s ease;position:relative}
.ix-quiz-opts button:not(:disabled):hover{border-color:var(--accent);background:var(--soft);transform:translateX(2px)}
.ix-quiz-opts button:disabled{cursor:default;opacity:.7}
.ix-quiz-opts button.ix-quiz-correct{border-color:var(--accent) !important;background:var(--soft) !important;color:var(--accent) !important;font-weight:600;opacity:1 !important}
.ix-quiz-opts button.ix-quiz-correct::after{content:' ✓';color:var(--accent);font-weight:700;margin-left:8px}
.ix-quiz-opts button.ix-quiz-wrong{border-color:var(--red) !important;background:var(--red-soft) !important;color:var(--red) !important;opacity:1 !important}
.ix-quiz-opts button.ix-quiz-wrong::after{content:' ✗';color:var(--red);font-weight:700;margin-left:8px}
.ix-quiz-explain{margin-top:14px;padding:12px 14px;background:var(--bg3);border-radius:8px;border-left:3px solid var(--accent);color:var(--text);font-size:14px;line-height:1.65;animation:ixReveal .35s ease}
.ix-quiz-explain strong{color:var(--accent)}
.ix-quiz.ix-answered-wrong{border-left-color:var(--red)}
/* Shared animation */
@keyframes ixReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Mobile adjustments */
@media (max-width: 768px){
  .ix-reveal-prompt,
  .ix-deepdive-teaser,
  .ix-quiz-q{flex-direction:column;align-items:flex-start;gap:8px}
  .ix-reveal-prompt::before,
  .ix-deepdive-teaser::before,
  .ix-quiz-q::before{font-size:9.5px}
  .cb-numlist > li{padding-left:38px;padding-right:10px}
  .cb-numlist > li::before{width:22px;height:22px;font-size:10.5px}
}
/* =========================================================================
 * v71 NUMBERED LIST STYLING (.cb-numlist)
 * Converts inline (1)(2)(3) paragraph-prose into readable numbered lists
 * ========================================================================= */
.cb-numlist{list-style:none;counter-reset:cb-num;padding:0;margin:14px 0 20px}
/* v761 — explicit 15.5px/1.7 so cb-numlist items match .bl-strip p sizing
   (was inheriting v738's sitewide 19px → felt 25% bigger than the callouts
   right next to them). */
.cb-numlist > li{counter-increment:cb-num;position:relative;padding:12px 16px 12px 48px;margin:8px 0;font-size:15.5px;line-height:1.7;color:var(--text);border-radius:8px;background:var(--bg2);border-left:2px solid var(--border);transition:background .2s ease, border-color .2s ease}
.cb-numlist > li::before{content:counter(cb-num);position:absolute;left:10px;top:12px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono', monospace;font-size:12px;font-weight:700;color:var(--accent);background:var(--soft);border-radius:50%;line-height:1}
.cb-numlist > li:hover{background:var(--soft);border-left-color:var(--accent)}
/* Inside a bl-strip, the numlist should feel integrated */
.bl-strip .cb-numlist{margin:10px 0 6px}
.bl-strip .cb-numlist > li{padding:10px 12px 10px 46px;background:rgba(0,0,0,.02);border-left:2px solid rgba(0,0,0,.06)}
.bl-strip .cb-numlist > li::before{top:10px;background:var(--bg2)}
/* Dark theme: adjust marker background and item background */
[data-theme="dark"] .cb-numlist > li{background:rgba(255,255,255,.025);border-left-color:rgba(255,255,255,.08)}
[data-theme="dark"] .cb-numlist > li::before{background:rgba(255,255,255,.06)}
[data-theme="dark"] .bl-strip .cb-numlist > li{background:rgba(255,255,255,.02);border-left-color:rgba(255,255,255,.06)}
[data-theme="dark"] .bl-strip .cb-numlist > li::before{background:rgba(255,255,255,.04)}
/* Nested <ul> inside a cb-numlist <li>: indented sub-bullets, no card chrome */
.cb-numlist > li > ul,
.cb-numlist > li ul:not(.cb-numlist){list-style:disc;padding-left:22px;margin:8px 0 4px;background:transparent;border-left:none}
.cb-numlist > li > ul > li,
.cb-numlist > li ul:not(.cb-numlist) > li{padding:4px 0;margin:0;background:transparent;border-left:none;border-radius:0;font-size:14px;line-height:1.6;color:var(--text2)}
.cb-numlist > li > ul > li::before,
.cb-numlist > li ul:not(.cb-numlist) > li::before{content:none}
.cb-numlist > li > ul > li::marker,
.cb-numlist > li ul:not(.cb-numlist) > li::marker{color:var(--text3);font-size:14px}
/* Mobile: tighter spacing */
/* === v94: subnav button inside tab panel for cross-linking consolidated tabs === */
.cb-sub-link{display:inline-block;margin:4px 6px 4px 0;padding:8px 14px;background:var(--bg2);color:var(--purple);border:1px solid var(--border);border-radius:8px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:all 0.15s ease}
.cb-sub-link:hover{background:var(--purple-soft);border-color:var(--purple)}
/* === v96: predict-then-reveal card variant === */
.cb-reveal-card .ma-header{background:linear-gradient(135deg, var(--purple-mid) 0%, var(--purple-soft) 100%)}
.cb-reveal-card .ma-title{color:var(--text);font-weight:600}
.cb-reveal-tag{display:inline-block;font-family:'IBM Plex Mono', monospace;font-size:11px;color:var(--purple);background:var(--purple-soft);padding:4px 10px;border-radius:6px;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:12px;font-weight:600;transition:all .2s ease}
/* v308: extract two repeated inline-style patterns into classes for
   consistency + maintainability:
   - .cb-deeper-link — the gold gradient "Go deeper" cross-reference
     callout used in NeuroRehab (4× on its own page) at section endings.
   - .cb-mono-block — purple-bordered monospace blockquote for code-like
     snippets / verbatim documentation excerpts (8× across 6 modules). */
.cb-deeper-link{padding:14px 16px;background:linear-gradient(90deg,rgba(212,175,55,0.18),rgba(212,175,55,0.05));border-left:4px solid #d4af37;border-radius:6px;margin:14px 0}
.cb-mono-block{border-left:3px solid var(--purple);padding:10px 14px;margin:10px 0;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;line-height:1.6;background:var(--bg2);color:var(--text2);border-radius:0 6px 6px 0}
/* v306: fix click-the-whole-card reveal pattern that uses .ma-head + .ma-chev
   (different class names from the .ma-header / .ma-chevron accordion pattern).
   Whole card is clickable, h3 is the prompt, .ma-chev is the disclosure caret.
   v307: also handle the variant in CB_PD.html where .ma-head contains
   .ma-num + .ma-title + .cb-reveal-tag (no h3, no .ma-chev). */
.cb-reveal-card{cursor:pointer;padding:18px 20px 4px;transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease}
.cb-reveal-card:hover{border-color:var(--purple) !important;box-shadow:0 4px 18px rgba(124,58,237,.12)}
.cb-reveal-card .ma-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin:0;flex-wrap:wrap}
.cb-reveal-card .ma-head h3,.cb-reveal-card .ma-head h4{margin:0;font-size:15px;font-weight:600;line-height:1.55;color:var(--text);flex:1}
.cb-reveal-card .ma-head .ma-num{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;padding:0 8px;border-radius:6px;background:var(--purple-soft);color:var(--purple);font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.04em;transition:background .2s ease, color .2s ease}
.cb-reveal-card .ma-head .ma-title{flex:1 1 60%;margin:0;font-size:15px;font-weight:600;line-height:1.55;color:var(--text);min-width:0}
.cb-reveal-card .ma-head .cb-reveal-tag{margin:0;align-self:flex-start;flex-shrink:0}
.cb-reveal-card .ma-chev{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--purple-soft);color:var(--purple);font-size:11px;transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .2s ease}
.cb-reveal-card:hover .ma-chev,.cb-reveal-card:hover .ma-head .ma-num{background:var(--purple);color:#fff}
.cb-reveal-card.open .ma-chev{transform:rotate(90deg);background:var(--purple);color:#fff}
.cb-reveal-card.open .ma-head .ma-num{background:var(--purple);color:#fff}
.cb-reveal-card .ma-body{display:none;padding:14px 0 4px;background:transparent;border-top:1px solid var(--border);margin-top:14px;animation:none}
.cb-reveal-card.open .ma-body{display:block;animation:revealBody .3s cubic-bezier(.4,0,.2,1)}
.cb-reveal-card.open .cb-reveal-tag{background:var(--purple);color:#fff}
.cb-reveal-card.open .cb-reveal-tag::after{content:" \2713";font-weight:700}
/* ================================================================
   polish-v26.css
   Visual flattening pass — kills the nested-box-in-box feel.
   
   Targets:
   1. .bl-strip — soften over-saturated dark mode tints + remove
      internal divider line under .bl-label that creates a
      two-row card inside a card.
   2. .ma-item / .ma-card — flatten accordion nesting so body and
      header read as one continuous block, not two stacked cards.
   3. data-tables inside ma-body — remove redundant outer border
      since they sit inside an already-bordered container.
   ================================================================ */
/* --- 1. bl-strip flattening ----------------------------------- */
/* Remove the internal divider under bl-label everywhere.
   This was creating a visible "header / body" split INSIDE the
   already-tinted bl-strip card — the "card within a card" feel. */
/* In dark mode, soften the colored tints. The .15 opacity reads
   way too vivid against the deep background. .07 reads as a hint,
   not a wash. */
/* Drop the rounded corners — bl-strip should read as a marginal
   note, not a card. Just keep the left border accent. */
/* --- 2. ma-item / ma-card accordion flattening ----------------- */
/* The core fix: ma-body should NOT have a different background
   from ma-header. They are one continuous block visually.
   The chevron rotation and content reveal already signal "open" —
   we don't need a colored body surface to reinforce it. */
.ma-body{background:transparent !important;border-top:1px solid var(--border) !important}
/* Soften the outer border of the whole accordion item.
   The hard 1px border with 14px radius reads as a heavy frame. */
.ma-item,
.ma-card{border-radius:8px !important;border-color:var(--border) !important}
/* Reduce the contrast of the header background.
   bg3 against bg2 creates a strong "this is a button" feel; we
   want it to feel like a clickable label, not a chunky card. */
.ma-header{background:transparent !important}
.ma-header:hover{background:rgba(var(--ar),.04) !important}
/* When open, give the header a subtle bottom highlight to signal
   state without painting a whole second background. */
.ma-item.open > .ma-header,
.ma-card.open > .ma-header{background:rgba(var(--ar),.04) !important}
/* --- 3. data-table inside ma-body cleanup ---------------------- */
/* Tables inside an accordion should not add another border ring.
   The accordion already has a frame; the table rides inside it. */
.ma-body > .data-table,
.ma-body > div > .data-table{border:none !important;margin:0 !important}
/* Remove rounded corners on tables inside accordions to avoid
   the rounded-table-inside-rounded-card stacking. */
.ma-body table{border-radius:0 !important}
/* --- 4. Hover effect calm-down --------------------------------- */
/* The hover transform translateX(2px) on bl-strip was making
   content shift sideways every time the mouse passed near. Calm. */
/* ================================================================
   polish-v27.css
   Three targeted fixes layered on top of polish-v26.

   1. Chip-nav vertical line consolidation. Multiple borders,
      gradients, and pseudo-elements were stacking up to produce
      4 visible vertical structures next to each other. Now: 1
      crisp divider, no gradient edges.
   2. Tab-layout background gradient flattened. The hard-edge
      gradient at 240px was creating a faux border. Removed.
   3. Table breathing room. data-table padding bumped, row spacing
      relaxed so dense tables read less crowded.
   ================================================================ */
/* --- 1. Chip-nav: one line, not four --------------------------- */
/* Kill the chip-nav background gradient that creates a soft vertical
   edge separate from the actual border. */
.chip-nav,
.tab-layout .chip-nav,
.chip-nav.chip-nav-vertical{background:transparent !important}
/* Single border on the chip-nav, in a slightly softer color so it
   reads as a divider not a hard frame. */
.chip-nav,
.chip-nav.chip-nav-vertical{border-right:1px solid var(--border) !important}
.tab-layout .chip-nav{border-right:1px solid var(--border) !important}
/* In dark mode, soften the chip-nav border so it doesn't fight
   the active-button accent for visual weight. */
[data-theme="dark"] .chip-nav,
[data-theme="dark"] .tab-layout .chip-nav{border-right-color:rgba(255,255,255,.06) !important}
/* --- 2. Tab-layout: kill the gradient + the ::before line ------ */
/* The tab-layout background gradient creates a hard color edge at
   240px that reads as a separate vertical line, parallel to the
   chip-nav's actual border. Flatten to single bg color. */
.tab-layout{background:var(--bg) !important}
/* The ::before is a 1px line at 240px. With the chip-nav border
   already there at the same position, this creates a doubled line
   that reads as nested. Hide it. */
.tab-layout::before{display:none !important}
/* --- 3. data-table breathing room ------------------------------ */
/* Bump cell padding so rows have more vertical air between them.
   The default 12px top/bottom is tight when rows have multi-line
   content. */
.data-table td{padding:16px 18px !important;line-height:1.6 !important}
.data-table th{padding:14px 18px !important}
/* Row separators softer in dark mode — the hard 1px against bg2
   creates ladder-stripes when rows are dense. */
[data-theme="dark"] .data-table td{border-bottom-color:rgba(255,255,255,.05) !important}
/* On hover, only highlight the data cells, not flash a whole bg
   change. (Already exists but reinforce against polish-v25 overrides.) */
.data-table tr:hover td{background:rgba(var(--ar),.03) !important}
/* --- 4. Section-title spacing ---------------------------------- */
/* When you have 5+ section-titles in one tab, they need more
   vertical air between them so the reader can find the next
   section visually. */
.tab-panel .section-title{margin-top:36px !important}
.tab-panel .container > .section-title:first-child,
.tab-panel .container > .bl-strip + .section-title{margin-top:0 !important}
/* ================================================================
   polish-v28.css
   AGGRESSIVE FIX: visible vertical lines persist despite v26 + v27.
   This sheet uses very high specificity + !important to override
   any conflicting rules from theme.css, polish-v25, or anywhere
   else, and removes any remaining vertical visual structures
   between sidebar and content.
   
   Also adds sub-tab styling to make it READABLE and CLICKABLE
   per user's request "make it better to view and click on".
   ================================================================ */
/* ==== STEP 1: Nuke EVERY possible vertical line source ==== */
/* Remove ALL borders on chip-nav and replace with single subtle one */
html body .chip-nav,
html body .chip-nav.chip-nav-vertical,
html body .tab-layout .chip-nav{background:transparent !important;border:none !important;border-right:1px solid var(--border) !important;box-shadow:none !important}
/* In dark mode the chip-nav border is barely visible — keep it that way */
html body[data-theme="dark"] .chip-nav,
html body[data-theme="dark"] .tab-layout .chip-nav{border-right:1px solid rgba(255,255,255,.04) !important}
/* Kill ALL pseudo-elements on chip-nav and tab-layout */
html body .chip-nav::before,
html body .chip-nav::after,
html body .tab-layout::before,
html body .tab-layout::after{display:none !important;content:none !important}
/* Kill tab-layout backgrounds */
html body .tab-layout{background:var(--bg) !important}
/* Kill any chip-nav button glow that might extend into the gap */
html body .chip-nav button{box-shadow:none !important}
html body .chip-nav button.active{box-shadow:0 1px 4px rgba(var(--ar),.15) !important}
/* Kill the body::before grain texture in dark mode — it can produce
   visible artifacts at high zoom or low opacity displays */
html body[data-theme="dark"]::before{display:none !important}
/* Kill body::after radial gradients which might paint visible
   gradient edges in unexpected places */
html body::after{display:none !important}
/* Container should not have any left border or shadow that creates
   a vertical line on its left edge */
html body .container,
html body .tab-panel .container{border-left:none !important;box-shadow:none !important;background:transparent !important}
/* ==== STEP 2: Make sub-tab navigation MUCH more clickable ==== */
/* The sub-link buttons (the pill-style nav inside Special Tests, Nerves,
   etc.) should look obviously clickable. Currently they read as
   secondary text. Make them real buttons. */
html body .cb-sub-link{display:inline-flex !important;align-items:center !important;gap:8px !important;padding:10px 16px !important;margin:4px 6px 4px 0 !important;background:rgba(var(--ar),.06) !important;border:1px solid rgba(var(--ar),.18) !important;border-radius:8px !important;color:var(--text) !important;font-size:13px !important;font-weight:500 !important;font-family:'Manrope',sans-serif !important;cursor:pointer !important;transition:all .15s ease !important;text-align:left !important;line-height:1.4 !important;white-space:normal !important;min-height:38px !important}
html body .cb-sub-link:hover{background:rgba(var(--ar),.12) !important;border-color:var(--accent) !important;color:var(--accent) !important;transform:translateY(-1px) !important}
html body[data-theme="dark"] .cb-sub-link{background:rgba(var(--ar),.08) !important;border-color:rgba(var(--ar),.25) !important;color:var(--text) !important}
html body[data-theme="dark"] .cb-sub-link:hover{background:rgba(var(--ar),.18) !important;color:var(--accent) !important}
/* The sub-link nav's containing bl-strip — make sure it doesn't
   itself feel like a card-within-a-card. */
html body .bl-strip:has(> .bl-label + p > .cb-sub-link){background:transparent !important;border-left:3px solid rgba(var(--ar),.3) !important;padding-top:10px !important;padding-bottom:14px !important;margin-bottom:24px !important}
/* ==== STEP 3: Reduce visible nesting in tables ==== */
/* Tables inside containers should not add their own outer border —
   the surrounding div already provides separation */
html body .tab-panel .container > div > table.data-table,
html body .tab-panel .container > table.data-table{border:none !important;border-radius:0 !important}
/* Section-titles need MORE breathing room before them so each
   section reads as separate */
html body .tab-panel .section-title{margin-top:48px !important;padding-top:0 !important}
html body .tab-panel .container > .section-title:first-child,
html body .tab-panel .container > .bl-strip + .section-title{margin-top:8px !important}
/* ==== STEP 4: Calmer dark-mode borders sitewide ==== */
/* In dark mode every border was rendering with high contrast,
   contributing to the "everything is bordered" feel. Soften them. */
html body[data-theme="dark"] .data-table td,
html body[data-theme="dark"] .data-table th{border-color:rgba(255,255,255,.04) !important}
html body[data-theme="dark"] .ma-item,
html body[data-theme="dark"] .ma-card{border-color:rgba(255,255,255,.05) !important}
html body[data-theme="dark"] .ma-body{border-top-color:rgba(255,255,255,.05) !important}
/* ================================================================
   polish-v29.css
   Fix the gap problem: content (especially .ma-item accordions)
   sits flush against the chip-nav with no visual breathing room.
   The .container has padding:32px 24px but 24px is not enough
   visual gap when chip-nav border is right against it.
   
   Solution: bump the container's left padding so all content
   inside (ma-items, bl-strips, tables, sections) has consistent
   gap from the chip-nav border.
   ================================================================ */
/* Bump container horizontal padding for breathing room.
   This affects all content inside .container — ma-items, bl-strips,
   tables, headings, paragraphs — uniformly. */
html body .tab-panel .container,
html body .container{padding-left:48px !important;padding-right:48px !important;padding-top:32px !important;padding-bottom:48px !important}
/* On narrower screens (tablet), reduce the bumped padding so we
   don't waste screen space. */
@media (max-width:1100px){
  html body .tab-panel .container,
  html body .container{padding-left:32px !important;padding-right:32px !important}
}
/* On mobile-sized screens where chip-nav becomes horizontal,
   restore standard padding. */
/* Make sure .ma-item, .bl-strip, .data-table inherit the container
   padding rather than getting weird margin-left from anywhere. */
html body .container > .ma-item,
html body .container > .bl-strip,
html body .container > .data-table,
html body .container > .section-title,
html body .container > .ma-card,
html body .container > .self-check,
html body .container > .cb-related-card{margin-left:0 !important;margin-right:0 !important}
/* Sub-link nav buttons are direct children of .bl-strip — they
   inherit the container padding via parent. No fix needed. */
/* polish-v30 — uniform vertical rhythm
   
   The Treatment/Postop/Anatomy tab content stacks several block-level "card"
   elements: cb-next-nav (PREVIOUS/NEXT card), .self-check (Self-Check box),
   .ma-item / .ma-card (accordions), .section-title (section header).
   
   These were each given different vertical margins in earlier polish layers,
   so when they appear in sequence the gaps look inconsistent — sometimes
   tight, sometimes generous. Normalize to a 24px baseline so any combination
   reads as one rhythmic stack.
*/
/* CB next/prev nav: was margin:56px 0 32px — now match the rest */
.cb-next-nav{margin:32px 0 !important;padding-top:24px}
/* Self-Check card: was 20px 0 */
/* Accordions: keep their tight 16px stacking between siblings, but ensure
   a 24px gap above the first one when it follows a non-accordion (so the
   gap reads consistently). */
.container > .ma-item:first-of-type,
.container > .ma-card:first-of-type{margin-top:24px}
/* When ma-item / ma-card directly follows cb-next-nav or self-check, give
   it the same uniform gap. Combined selectors so any order works. */
.cb-next-nav + .ma-item,
.cb-next-nav + .ma-card,
.cb-next-nav + .section-title,
.self-check + .ma-item,
.self-check + .ma-card,
.self-check + .section-title{margin-top:24px}
/* When self-check follows ma-item / ma-card / section-title, same. */
.ma-item + .self-check,
.ma-card + .self-check,
.section-title + .self-check{margin-top:24px}
/* When section-title follows accordions, override its 32px top margin to
   match the rhythm. */
.ma-item + .section-title,
.ma-card + .section-title{margin-top:32px}
/* Pin section-title to a uniform 32px top gap regardless of what precedes
   it. Theme.css gives it margin:32px 0 8px but :first-child override and
   nested-content edge cases sometimes leave it under-spaced (or pile up
   against unusual preceding elements with their own bottom margin). */
.section-title:first-child{margin-top:0 !important}
/* When section-title is the first child of .container, it should still be
   tight to the container top, not 32px deep. */
.container > .section-title:first-child,
.tab-panel > .section-title:first-child{margin-top:0 !important}
/* Normalize section-sub margin so it sits tight under section-title. */
/* On mobile, slightly tighter rhythm. */

/* ═══════════════════════════════════════════════════════════════════
 * v156 — EDITORIAL DESIGN SYSTEM
 * Sitewide-safe additions. Adds new patterns without changing existing
 * components' behavior. Activated by class hooks (.cb-editorial, .stat-pill,
 * .test-card-grid). Pure CSS — no HTML restructuring required.
 * ═══════════════════════════════════════════════════════════════════ */

/* ----- Typography refresh (sitewide; subtle on existing modules) ----- */
/* Activates whenever module is wrapped in .cb-editorial. Without that
 * class, modules retain original styling. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   Universal typography (v170) — applies to ALL CB modules
   - TITLES   → Fraunces serif (Fraunces fallback to Manrope/Georgia)
   - BODY     → Inter (fallback to Manrope sans-serif)
   - LABELS   → IBM Plex Mono (eyebrows, table headers, tags, action labels)
   Note: kept .cb-editorial class-based rules below for modules that opt in
   to a few additional editorial-style treatments. The universal rules here
   apply regardless of whether body has .cb-editorial class.
   ============================================================ */
body {
  font-family: 'Inter', 'Manrope', system-ui, sans-serif;
  font-feature-settings: 'ss01' on, 'cv11' on;
}
.hero h1 em,
.module-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

/* v341 — Editorial is now a COLOR theme only, no slanted/serif fonts.
 * All typography uses Inter sans-serif everywhere for clean readability.
 * Editorial palette (warm cream + amber accents) is preserved via theme.css. */
.cb-editorial{
  font-family: 'Inter', 'Manrope', sans-serif;
  font-feature-settings: 'ss01' on, 'cv11' on;
}

.cb-editorial .hero h1,
.cb-editorial .module-title,
.cb-editorial > h1{
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: clamp(36px, 5vw, 56px) !important;
  letter-spacing: -.025em !important;
  line-height: 1.05 !important;
}

.cb-editorial .hero h1 em,
.cb-editorial .module-title em{
  font-style: normal;
  font-weight: 500;
  color: var(--accent);
}

.cb-editorial .section-title{
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  letter-spacing: -.015em !important;
  margin: 56px 0 12px !important;
  color: var(--text) !important;
  position: relative;
}

.cb-editorial .section-title::before {
  content: '';
  display: block;
  width: 32px;
  height: 1.5px;
  background: var(--text);
  margin-bottom: 18px;
  opacity: .85;
}

.cb-editorial .hero p,
.cb-editorial .lede{
  font-family: 'Inter', 'Manrope', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  letter-spacing: 0;
}

.cb-editorial p,
.cb-editorial .ma-body p {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--text);
}

/* v346 — SITE-WIDE GUARANTEE: no italic, no serif anywhere.
 * David asked for straight fonts site-wide. This block kills every
 * remaining italic + Fraunces leak across all themes. Comes after
 * every other rule so it wins by source order. */
body,
body *,
.cb-editorial,
.cb-editorial * {
  font-style: normal !important;
}
.cb-editorial p,
.cb-editorial li,
.cb-editorial td,
.cb-editorial th,
.cb-editorial span,
.cb-editorial div,
.cb-editorial h1,
.cb-editorial h2,
.cb-editorial h3,
.cb-editorial h4,
.cb-editorial h5,
.cb-editorial h6 {
  font-family: 'Inter', 'Manrope', system-ui, sans-serif !important;
}
.cb-editorial .hero-tag,
.cb-editorial .eyebrow,
.cb-editorial code,
.cb-editorial pre {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace !important;
}
/* The .hero h1 em on non-editorial themes: keep weight emphasis but no italic */
.hero h1 em,
.module-title em {
  font-style: normal !important;
}

.cb-editorial .hero-tag,
.cb-editorial .eyebrow {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 2.2px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  font-weight: 500 !important;
  margin-bottom: 14px !important;
}

/* ----- Stat pill component ----- */
/* Use: <span class="stat-pill stat-spec">47–99%</span>
 *      <span class="stat-pill stat-sen">11–98%</span>
 *      <span class="stat-pill stat-neutral">N=240</span>
 * Global — works in every module regardless of editorial mode. */

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .3px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
  vertical-align: middle;
}

.stat-pill.stat-spec {
  background: rgba(var(--nr), .08);
  color: var(--green);
  border-color: rgba(var(--nr), .25);
}

.stat-pill.stat-sen {
  background: rgba(14, 165, 233, .1);
  color: #0369a1;
  border-color: rgba(14, 165, 233, .25);
}

[data-theme="dark"] .stat-pill.stat-sen {
  color: #38bdf8;
  background: rgba(56, 189, 248, .12);
  border-color: rgba(56, 189, 248, .3);
}

.stat-pill.stat-neutral {
  background: var(--bg3);
  color: var(--text2);
  border-color: var(--border);
}

.stat-pill.stat-warning {
  background: rgba(var(--gr), .1);
  color: var(--gold);
  border-color: rgba(var(--gr), .3);
}

/* ----- Test-card grid component ----- */
/* Replaces table-based special-test layouts with structured cards.
 * Use: <div class="test-card-grid">
 *        <div class="test-card">
 *          <div class="test-svg"><svg>...</svg></div>
 *          <div class="test-meat">
 *            <div class="test-name">O'Brien Active Compression</div>
 *            <div class="test-mech">Compression Loading</div>
 *            <ol class="test-steps"><li>...</li></ol>
 *            <div class="test-stats">
 *              <span class="stat-pill stat-spec">Spec 47–99</span>
 *              <span class="stat-pill stat-sen">Sen 11–98</span>
 *            </div>
 *          </div>
 *        </div>
 *      </div>
 */

.test-card-grid {
  display: grid;
  gap: 0;
  margin: 32px 0;
  border-top: 1px solid var(--border);
}

.test-card {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.test-card-grid + .test-card-grid { margin-top: 0; border-top: 0; }

@media (max-width: 720px) {
  .test-card {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.test-svg {
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.test-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

.test-svg::after {
  content: attr(data-label);
  position: absolute;
  bottom: 10px;
  left: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text3);
}

.test-svg:empty,
.test-svg:not([data-label])::after { display: none; }

.test-meat .test-name {
  font-family: 'Manrope', 'Manrope', serif;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: -.02em;
  margin-bottom: 4px;
  color: var(--text);
}

.test-meat .test-mech {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  font-weight: 500;
}

.test-meat .test-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.test-meat .test-steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  counter-increment: step;
}

.test-meat .test-steps li:first-child {
  border-top: 0;
  padding-top: 4px;
}

.test-meat .test-steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--text3);
  padding-top: 2px;
  letter-spacing: .5px;
}

/* The step content must be wrapped in a span (.step-text) so it's a single
 * grid item, not multiple. Otherwise mixed text + <em> + text produces
 * separate grid items each forced into the next available cell — which
 * shoves the <em> into the 28px counter column and wraps it one character
 * per line. We learned this the hard way in v156. */
.test-meat .test-steps li > .step-text {
  grid-column: 2;
}

.test-meat .test-steps li em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
  background: rgba(var(--ar), .08);
  padding: 1px 6px;
  border-radius: 3px;
}

.test-meat .test-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* When in editorial mode, intensify the test-card visual */
.cb-editorial .test-card {
  padding: 40px 0;
  gap: 40px;
}

.cb-editorial .test-svg {
  background: var(--bg2);
}

/* ----- Pull-quote / pearl callout ----- */
/* Use: <blockquote class="pull-quote">Combine specificity with...</blockquote>
 *      <div class="pearl">PEARL: ...</div>
 */

.pull-quote {
  border-left: 2px solid var(--text);
  padding: 4px 0 4px 24px;
  margin: 32px 0;
  font-family: 'Manrope', serif;
  font-size: clamp(17px, 1.6vw, 19px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text2);
  max-width: 600px;
}

.pearl {
  margin: 18px 0;
  padding: 14px 18px 14px 18px;
  background: rgba(var(--gr), .08);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  position: relative;
}

.pearl::before {
  content: 'PEARL';
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--gold);
  margin-bottom: 4px;
}

[data-theme="dark"] .pearl {
  background: rgba(var(--ar), .04);
}

/* ----- Pattern 02: region map (legacy CSS — markup removed in v227) ----- */

/* (Orphaned @media openings from earlier cbi-region / cbi-anim / cbi-shr
 * deletions removed — they were left without bodies and breaking CSS
 * parsing for everything that came after, including .cb-check.) */

/* ============================================================
   v163 — Muscle action animator (cb-muscle-anim.js)
   Pattern 05: interactive anatomy widget for muscle groups.
   Container: .cbi-muscle-anim[data-muscle-set="..."]
   State: data-muscle-active="<muscle-key>" toggled by JS.
   CSS var: --muscle-color is set per active muscle by JS.
   ============================================================ */

.cbi-muscle-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 1rem;
  min-height: 380px;
}
.cbi-muscle-stage svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 460px;
}

.cbi-muscle-action-label {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muscle-color);
  text-align: center;
  min-height: 1.4em;
  font-weight: 600;
  transition: color 0.4s ease;
}

/* ---- Muscle buttons ---- */
.cbi-muscle-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.cbi-muscle-btn {
  appearance: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  background: #ffffff;
  color: #2a2a2a;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.18s ease;
}
.cbi-muscle-btn::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--btn-color, #999);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9) inset;
}
.cbi-muscle-btn:hover {
  border-color: rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.cbi-muscle-btn.active {
  border-color: var(--btn-color, #d4a017);
  background: var(--btn-color, #d4a017);
  color: #ffffff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--btn-color, #d4a017) 35%, transparent);
}
.cbi-muscle-btn.active::before {
  background: #ffffff;
  box-shadow: none;
}
.cbi-muscle-btn:focus-visible {
  outline: 2px solid var(--btn-color, #d4a017);
  outline-offset: 2px;
}

/* ---- Bones ---- */
.cbi-bone {
  fill: #f0e6d6;
  stroke: #6b5a3e;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.cbi-bone-shaft {
  fill: #f0e6d6;
  stroke: #6b5a3e;
  stroke-width: 1.6;
}
.cbi-bone-detail {
  fill: none;
  stroke: #6b5a3e;
  stroke-width: 1.2;
  stroke-linecap: round;
}
.cbi-bone-fossa-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  fill: #8a7556;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cbi-tubercle {
  fill: #e8d4af;
  stroke: #6b5a3e;
  stroke-width: 1;
}
.cbi-tubercle-anterior {
  fill: none;
  stroke: #b09872;
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

/* (Humerus stays static across muscle selections — action is depicted via
   the per-muscle .cbi-action-arrow paths defined below. Future iteration
   could add a "play motion" mode with humerus rotation + tendon redraw.) */

/* ---- Muscles ---- */
.cbi-muscle {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.cbi-muscle .belly {
  fill: rgba(180, 100, 80, 0.18);
  stroke: rgba(180, 100, 80, 0.45);
  stroke-width: 1.4;
  transition: fill 0.4s ease, stroke 0.4s ease, stroke-width 0.4s ease;
}

/* Subscapularis is anterior — ghosted (dashed) until active */
.cbi-muscle[data-muscle="subscapularis"] .belly {
  stroke-dasharray: 4 3;
}

/* ---- Origin and insertion markers ---- */
.cbi-attach-dot {
  fill: var(--muscle-color);
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes cbi-pulse-dot {
  0%   { transform: scale(0.6); opacity: 0; }
  20%  { transform: scale(1.6); opacity: 1; }
  60%  { transform: scale(1.0); opacity: 0.95; }
  100% { transform: scale(1.0); opacity: 0.95; }
}

/* ---- Action arrows ---- */
.cbi-action-arrow {
  opacity: 0;
  stroke: var(--muscle-color);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: opacity 0.3s ease;
}
@keyframes cbi-arrow-trace {
  0%   { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 0; }
}
.cbi-action-arrow .arrow-head {
  fill: var(--muscle-color);
  stroke: none;
  opacity: 0;
}
@keyframes cbi-fade-in {
  to { opacity: 1; }
}

/* ---- Meta panel ---- */
.cbi-muscle-meta {
  display: flex;
  flex-direction: column;
  padding: 0.25rem;
}
.cbi-muscle-meta-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a7556;
  margin-bottom: 0.4rem;
}
.cbi-muscle-name {
  font-family: 'Manrope', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--muscle-color);
  margin: 0 0 0.85rem;
  transition: color 0.4s ease;
}
.cbi-muscle-detail {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 0.85rem;
  font-size: 0.92rem;
  line-height: 1.45;
}
.cbi-muscle-detail dt {
  font-weight: 600;
  color: #6b5a3e;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 0.15rem;
}
.cbi-muscle-detail dd {
  margin: 0;
  color: #2a2a2a;
}
.cbi-muscle-pearl {
  margin-top: 1rem;
  padding: 0.7rem 0.85rem;
  background: color-mix(in srgb, var(--muscle-color) 8%, #ffffff);
  border-left: 3px solid var(--muscle-color);
  border-radius: 4px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #2a2a2a;
}
.cbi-muscle-pearl-label {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muscle-color);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .cbi-humerus-group,
  .cbi-rotation-indicator,
  .cbi-muscle,
  .cbi-action-arrow,
  .cbi-muscle .belly {
    transition: none !important;
  }
  .cbi-attach-dot,
  .cbi-action-arrow {
    animation: none !important;
  }
      }

/* ============================================================
   v164 — 3D Anatomy viewer (Pattern 06, cb-3d-anatomy.js)
   Shell: Editorial ivory + Fraunces serif + IBM Plex Mono labels
   Stage: Deep navy gradient (Visible Body / Complete Anatomy aesthetic)
   ============================================================ */

/* ---- Stage (3D canvas) ---- */

/* Vignette overlay for that "premium viewer" feel */

/* Floating control bar — bottom of stage. Filters on left, camera on right */

/* (Muscles filter button now only toggles 3D mesh visibility — UI layout
   stays the same regardless of toggle state. Old .cb3d-muscles-hidden
   class is no longer applied.) */

/* Muscle group sections — visual grouping of pills (SITS / Deltoid / etc.) */

/* Action label below stage */

/* Muscle pill row */

/* ---- Sidebar info panel ---- */

/* Action — primary headline + secondary list */

/* Hint text below pill row */

/* Reduced-motion: disable auto-rotate by default */

/* ============================================================
   v165 — Special test viewer extras (3D Hawkins-Kennedy etc.)
   ============================================================ */

/* Test viewer: the Action Label is the most prominent thing */

/* ═══════════════════════════════════════════════════════════════════
 * v204 — Visual richness without icons
 * Pull-quote board pearls · table row hover · refined section titles
 * ═══════════════════════════════════════════════════════════════════ */

/* Pull-quote treatment for board pearls — large decorative open quote
 * in the muscle's accent color, editorial pull-quote feel for what's
 * already a key learning callout. */

/* Data table row hover — subtle accent highlight for scanability */
.data-table tbody tr {
  transition: background-color .15s ease;
}
.data-table tbody tr:hover {
  background: rgba(var(--ar), .045);
}
[data-theme="dark"] .data-table tbody tr:hover {
  background: rgba(255, 255, 255, .035);
}

/* Stat callout — large numerals + label paired vertically. Useful for
 * placing prominent metrics (tensile strength %, RTS month) inline. */
.cb-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 20px;
  background: rgba(var(--ar), .05);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  margin: 8px 0;
}
.cb-stat-value {
  font-family: 'Manrope', serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cb-stat-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text3);
  font-weight: 700;
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════════════
 * v203 — Section titles with leading icons (anatomy + treatment tabs)
 * ═══════════════════════════════════════════════════════════════════ */
.section-title.section-title--icon {
  display: flex !important;
  align-items: center;
  gap: 14px;
}
/* v224 — Bulletproof sizing on .section-title-svg. Some browsers / CSS
 * pre-cached states were rendering these as full-width SVGs because the
 * 28px size lacked !important and lost specificity in some contexts.
 * Fixed both ways: !important here + explicit width/height attrs in HTML. */
.section-title-svg {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  color: var(--accent);
  padding: 5px;
  background: rgba(var(--ar), .08);
  border-radius: 8px;
  box-sizing: content-box;
  display: inline-block !important;
  vertical-align: middle;
}
[data-theme="dark"] .section-title-svg {
  background: rgba(var(--ar), .14);
}
@media (max-width: 540px) {
  .section-title-svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    padding: 4px;
  }
}

/* v243 — Single labeled bone-illustration figure (OpenStax Fig 8.4).
 * Wider max-width (820 px) since the image is a horizontal pair, with
 * a subtle warm sepia tint to soften the stark B&W line art. */
.cb-bone-illustration {
  max-width: 600px;
  margin: 18px auto 24px;
}
.cb-bone-illustration img {
  max-height: 520px;
  filter: sepia(0.18) saturate(1.05) brightness(1.02);
  background: #faf6ee;
}
[data-theme="dark"] .cb-bone-illustration img {
  filter: sepia(0.15) saturate(1.05) brightness(0.85) invert(0.92) hue-rotate(180deg);
  background: #1f1d1a;
}

/* v240 — Static anatomy figure: image + caption only. No JS, no
 * polygons, no buttons. v254 — bumped image max-height for readability
 * and tightened container width so the image actually fills the box. */
.cb-anatomy-figure {
  margin: 16px auto 24px;
  max-width: 600px;
  padding: 0;
  text-align: center;
}
.cb-anatomy-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
/* v327 — tall-content variant for chart/diagram figures (e.g. SCI level
   chart, NeuroRehab framework comparison). Default 460px max-height was
   shrinking them to ~700x460 which made the text unreadable. */
.cb-anatomy-figure.tall img {
  max-height: 900px;
}
.cb-anatomy-figure.wide img {
  max-height: 600px;
}
@media (max-width: 600px) {
  /* On mobile, allow tall figures to scale freely — readability matters
     more than fitting in the viewport. User can scroll/zoom. */
  .cb-anatomy-figure.tall img,
  .cb-anatomy-figure.wide img { max-height: none; }
}
/* v324 — Dark-mode fix for anatomy diagrams. The diagrams have dark
   text labels baked into the image, so they disappear when rendered
   on the dark theme's --bg. Force a white plate behind them in dark
   theme so labels stay readable. Light/pink/cat/editorial themes
   already have light bg values — no change needed there. */
[data-theme="dark"] .cb-anatomy-figure img,
[data-theme="dark"] .cb-figure-pair img:not(.cb-device-thumb) {
  background: #ffffff;
  /* Slight padding gives breathing room so the figure's white plate
     reads as a paper / lightbox, not a glitch. */
  padding: 6px;
  /* Border becomes invisible on white in dark mode; use a faint shade. */
  border-color: rgba(255, 255, 255, 0.06);
}
.cb-anatomy-figure figcaption {
  margin-top: 10px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text2);
  letter-spacing: .25px;
  line-height: 1.55;
  text-align: left;
  padding: 0 4px;
}
.cb-anatomy-figure figcaption a {
  color: var(--text2);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.cb-anatomy-figure figcaption a:hover { color: var(--accent); }

/* v254 — Side-by-side pair of cb-anatomy-figures (e.g. anterior +
 * posterior views, or paired upper-limb bones). Stacks back to a
 * single column on narrow viewports. Each figure inside the pair
 * resets its standalone max-width so it can fill its flex slot. */
.cb-figure-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  max-width: 1180px;
  margin: 18px auto 28px;
  align-items: flex-start;
  justify-content: center;
}
.cb-figure-pair > .cb-anatomy-figure,
.cb-figure-pair > .cb-bone-illustration {
  flex: 1 1 calc(50% - 11px);
  min-width: 300px;
  max-width: none;
  margin: 0;
}
.cb-figure-pair img {
  max-height: 480px;
}
@media (max-width: 760px) {
  .cb-figure-pair { flex-direction: column; }
  .cb-figure-pair > .cb-anatomy-figure,
  .cb-figure-pair > .cb-bone-illustration {
    flex: 1 1 100%;
  }
}

/* v278 — Device identification gallery grid (Medical Devices module).
 * Responsive grid of small image+name cards for quick visual ID. */
.cb-device-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 14px 0 22px;
}
.cb-device-card {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
[data-theme="dark"] .cb-device-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.cb-device-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 7px;
  background: #f4f4f6;
  display: block;
}
.cb-device-card .cb-device-name {
  font-weight: 700;
  font-size: 11.5px;
  margin-top: 7px;
  line-height: 1.3;
}
.cb-device-card .cb-device-sub {
  font-size: 10px;
  opacity: 0.7;
  margin-top: 2px;
  line-height: 1.3;
}

/* v295 — Cross-link callouts to Medical Devices module.
 * Targets purple bl-strip variants that include the Medical Devices link,
 * giving them subtle visual emphasis so they stand out as navigation hints. */
.bl-strip.purple a[href="CB_MedicalDevices.html"] {
  font-weight: 700;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  text-decoration: none !important;
  transition: opacity 0.15s;
}
.bl-strip.purple a[href="CB_MedicalDevices.html"]:hover {
  opacity: 0.7;
}
[data-theme="dark"] .bl-strip.purple a[href="CB_MedicalDevices.html"] {
  color: #c9b6ff;
}

/* Inline device thumbnail within parameter tables (Medical Devices). */
img.cb-device-thumb {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  display: block;
  margin: 0 auto 8px;
  background: #f4f4f6;
}
@media (max-width: 760px) {
  img.cb-device-thumb { width: 90px; height: 90px; }
}
[data-theme="dark"] img.cb-device-thumb { border-color: rgba(255,255,255,0.1); }
.cb-device-row-name {
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
}

/* v227 — Sub-headings inside flat test-table groups (replaces ma-item
 * accordion wrappers in the Diagnoses & Tests tab). Rendered between
 * the section-title and each grouped data-table for fast scanning. */
.cb-tests-subhead {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  margin: 22px 0 8px;
  padding: 6px 0 6px 12px;
  border-left: 3px solid var(--accent);
  background: rgba(var(--ar), .04);
  border-radius: 0 6px 6px 0;
}
[data-theme="dark"] .cb-tests-subhead {
  background: rgba(var(--ar), .08);
}
.cb-tests-subhead + .data-table {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════
 * v208 — Knowledge Check inline cards + numbered learning path
 * ═══════════════════════════════════════════════════════════════════ */

/* Knowledge check inline retrieval-practice card. Editorial design —
 * eyebrow + question + click-to-reveal answer. Dropped into key learning
 * moments throughout the module so students hit a recall test instead
 * of just passively reading. */
.cb-check {
  margin: 24px 0 24px !important;
  padding: 20px 22px 22px !important;
  background: linear-gradient(135deg, rgba(var(--ar), .045) 0%, transparent 60%), var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 10px !important;
  position: relative !important;
  display: block !important;
}
.cb-check-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.cb-check-q {
  font-family: 'Manrope', serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.45;
  color: var(--text);
  letter-spacing: -.005em;
  margin-bottom: 14px;
}
.cb-check-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(var(--ar), .35);
  background: transparent;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--accent);
  cursor: pointer;
  transition: background .18s ease, transform .12s ease;
}
.cb-check-toggle:hover {
  background: rgba(var(--ar), .08);
}
.cb-check-toggle:active { transform: translateY(1px); }
.cb-check-chev {
  display: inline-block;
  transition: transform .25s ease;
  font-size: 12px;
}
.cb-check.cb-check-open .cb-check-chev { transform: rotate(180deg); }
.cb-check-a {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .25s ease, padding .35s ease, margin .35s ease;
  border-top-width: 0;
  padding-top: 0;
  margin-top: 0;
}
.cb-check.cb-check-open .cb-check-a {
  max-height: 800px;
  opacity: 1;
  padding-top: 14px;
  margin-top: 14px;
  border-top-width: 1px;
}
.cb-check-a p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.cb-check-a p:last-child { margin-bottom: 0; }
.cb-check-a strong { color: var(--accent); }

/* Numbered "path through this module" — visual step list with big
 * accent numerals + click-to-jump tab links. */
.cb-path {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  counter-reset: cb-path;
}
.cb-path-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: rgba(var(--pr), .04);
  border: 1px solid rgba(var(--pr), .15);
  cursor: pointer;
  transition: background .18s ease, transform .12s ease, border-color .18s ease;
}
.cb-path-step:hover {
  background: rgba(var(--pr), .09);
  border-color: rgba(var(--pr), .35);
  transform: translateX(2px);
}
.cb-path-num {
  font-family: 'Manrope', serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--purple);
  min-width: 44px;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.cb-path-step > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.cb-path-step strong {
  font-family: 'Manrope', serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--text);
}
.cb-path-step span {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text2);
}

[data-theme="dark"] .cb-path-step {
  background: rgba(var(--pr), .07);
  border-color: rgba(var(--pr), .2);
}
[data-theme="dark"] .cb-path-step:hover {
  background: rgba(var(--pr), .12);
}

/* v215 — mobile tightening for cb-check + cb-path so they breathe
 * on narrow viewports (≤540px). Padding/typography step down a notch;
 * cb-path number column collapses to keep usable text width on phones. */
@media (max-width: 540px) {
  .cb-check { padding: 16px 16px 18px; margin: 20px 0; }
  .cb-check-q { font-size: 16px; line-height: 1.4; }
  .cb-check-toggle { padding: 7px 14px; font-size: 10.5px; }
  .cb-check-a { margin-top: 12px; }
  .cb-check.cb-check-open .cb-check-a { padding-top: 12px; margin-top: 12px; }
  .cb-check-a p { font-size: 13.5px; line-height: 1.55; }
  .cb-path-step { gap: 12px; padding: 12px 14px; }
  .cb-path-num { font-size: 22px; min-width: 32px; padding-top: 1px; }
  .cb-path-step strong { font-size: 16px; }
  .cb-path-step span { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════
 * v207 — Interactive Brachial Plexus map
 * SVG diagram (Roots → Trunks → Divisions → Cords → Branches) with
 * click-to-trace pathway highlighting + sidebar info panel.
 * ═══════════════════════════════════════════════════════════════════ */
.bp-widget {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  margin: 20px 0 28px;
  align-items: stretch;
}
@media (max-width: 920px) {
  .bp-widget { grid-template-columns: 1fr; }
}
.bp-stage {
  background: linear-gradient(180deg, #07172e 0%, #0c1f3d 100%);
  border-radius: 14px;
  padding: 16px 12px 12px;
  position: relative;
  overflow: hidden;
  color: #e8d9b8;
  border: 1px solid rgba(255,255,255,0.06);
}
.bp-eyebrow {
  position: absolute;
  top: 14px; left: 16px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: rgba(232, 217, 184, 0.55);
  text-transform: uppercase;
}
.bp-eyebrow strong { color: #fff8e8; font-weight: 600; }
.bp-svg {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 28px;
}

/* Default node styling */
.bp-node { cursor: pointer; }
.bp-node circle, .bp-node rect {
  fill: rgba(255, 248, 232, 0.10);
  stroke: rgba(255, 248, 232, 0.55);
  stroke-width: 1.4;
  transition: fill .18s ease, stroke .18s ease, stroke-width .18s ease;
}
.bp-node text {
  fill: #fff8e8;
  pointer-events: none;
  user-select: none;
}
.bp-node:hover circle, .bp-node:hover rect {
  fill: rgba(255, 248, 232, 0.20);
  stroke: rgba(255, 248, 232, 0.95);
}

/* Per-tier color tint */
.bp-root      circle, .bp-root      rect { fill: rgba(217, 119, 6, 0.18);  stroke: rgba(217, 119, 6, 0.85); }
.bp-trunk     rect                     { fill: rgba(196, 80, 32, 0.20);    stroke: rgba(196, 80, 32, 0.85); }
.bp-div-ant   rect                     { fill: rgba(134, 56, 168, 0.20);   stroke: rgba(134, 56, 168, 0.85); }
.bp-div-post  rect                     { fill: rgba(63, 98, 18, 0.22);     stroke: rgba(63, 98, 18, 0.85); }
.bp-cord-lat  rect                     { fill: rgba(77, 138, 168, 0.25);   stroke: rgba(77, 138, 168, 0.95); }
.bp-cord-post rect                     { fill: rgba(63, 98, 18, 0.30);     stroke: rgba(120, 160, 60, 0.95); }
.bp-cord-med  rect                     { fill: rgba(201, 58, 92, 0.20);    stroke: rgba(201, 58, 92, 0.85); }
.bp-term      rect                     { fill: rgba(212, 160, 23, 0.18);   stroke: rgba(212, 160, 23, 0.95); }
.bp-prebranch rect                     { fill: rgba(255, 248, 232, 0.08);  stroke: rgba(255, 248, 232, 0.45); stroke-dasharray: 3 2; }

/* Active highlight — applied to nodes in the traced path */
.bp-node.bp-active circle,
.bp-node.bp-active rect {
  fill: rgba(255, 200, 80, 0.45) !important;
  stroke: #ffc850 !important;
  stroke-width: 2.4 !important;
}
.bp-line.bp-active {
  stroke: #ffc850 !important;
  stroke-width: 2.6 !important;
  opacity: 1 !important;
}

/* Dim non-active nodes when a path is active */
.bp-widget[data-bp-active]:not([data-bp-active=""]) .bp-node:not(.bp-active) circle,
.bp-widget[data-bp-active]:not([data-bp-active=""]) .bp-node:not(.bp-active) rect {
  opacity: 0.30;
}
.bp-widget[data-bp-active]:not([data-bp-active=""]) .bp-line:not(.bp-active) {
  opacity: 0.15;
}

/* Sidebar info panel */
.bp-info {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 20px;
}
.bp-info-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 10px;
}
.bp-info-title {
  font-family: 'Manrope', serif;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -.015em;
  color: var(--accent);
  margin: 0 0 12px;
}
.bp-info-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text2);
  margin: 0 0 14px;
}
.bp-info-detail {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 6px 12px;
  font-size: 13px;
  margin: 12px 0 14px;
}
.bp-info-detail dt {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text3);
  font-weight: 700;
  padding-top: 2px;
}
.bp-info-detail dd {
  margin: 0;
  color: var(--text);
  line-height: 1.5;
}
.bp-pearl {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(var(--ar), .07);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.bp-pearl-label {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 6px;
}

[data-theme="dark"] .bp-stage {
  background: linear-gradient(180deg, #060f1d 0%, #08182f 100%);
}

/* ═══════════════════════════════════════════════════════════════════
 * v205 — Pan pad overlay (every 3D widget)
 * Directional buttons in the bottom-right of the stage. Click to pan
 * by 10% of viewing distance, press-and-hold to pan continuously.
 * Center button recenters on the focused region (or default view).
 * ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
 * v203 — Bone Anatomy explorer: region selector pills
 * ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
 * v201 — Post-Op Rehab tab enhancements
 * Procedure quick-nav grid · iconographic principles · healing curve
 * Comparison table · color-coded data table cells
 * ═══════════════════════════════════════════════════════════════════ */

/* Procedure quick-nav grid — 9 cards in responsive grid, click to scroll.
 * v204: Stripped icons — visual identity now comes from a category-colored
 * top bar, an editorial serif title, and a tabular-numerals stat block. */
.postop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin: 24px 0 32px;
}
.postop-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 20px 18px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}
/* Top accent bar — 4px tall, full width. Each card gets a category color
 * via the --postop-accent CSS var (set per category class on the parent
 * .postop-card via inline data-cat or matched siblings) */
.postop-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--postop-accent, var(--accent));
  opacity: 0.85;
  transition: opacity .2s ease;
}
.postop-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--ar), .03) 0%, transparent 35%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.postop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(var(--ar), .12), 0 1px 0 rgba(0,0,0,.04);
  border-color: rgba(var(--ar), .35);
  text-decoration: none;
}
.postop-card:hover::before { opacity: 1; height: 5px; }
.postop-card:hover::after { opacity: 1; }
.postop-card-name {
  font-family: 'Manrope', serif;
  font-weight: 500;
  font-size: 19px;
  color: var(--text);
  letter-spacing: -.015em;
  line-height: 1.18;
  margin-bottom: 14px;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}
.postop-card-meta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--text3);
  line-height: 1.65;
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
}
.postop-card-meta strong {
  color: var(--text);
  font-weight: 600;
}

/* Per-card category accent. Quick-nav cards use the same category class
 * key as the matching ma-item below (via a 1:1 href→id mapping). */
.postop-grid .postop-card[href="#postop-rcr"]       { --postop-accent: var(--red); }
.postop-grid .postop-card[href="#postop-slap"]      { --postop-accent: #4d8aa8; }
.postop-grid .postop-card[href="#postop-bankart"]   { --postop-accent: var(--green); }
.postop-grid .postop-card[href="#postop-latarjet"]  { --postop-accent: var(--green); }
.postop-grid .postop-card[href="#postop-sad"]       { --postop-accent: var(--gold); }
.postop-grid .postop-card[href="#postop-tenodesis"] { --postop-accent: var(--orange); }
.postop-grid .postop-card[href="#postop-orif"]      { --postop-accent: var(--orange); }
.postop-grid .postop-card[href="#postop-tsa"]       { --postop-accent: var(--purple); }
.postop-grid .postop-card[href="#postop-rtsa"]      { --postop-accent: var(--purple); }

[data-theme="dark"] .postop-card {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.07);
}
[data-theme="dark"] .postop-card:hover {
  background: rgba(255,255,255,.045);
  border-color: rgba(var(--ar), .45);
}

/* Universal Principles rules grid — typography-only chips with a colored
 * left bar replacing the v201 icon. Reads as labelled call-outs. */
.postop-rules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.postop-rule {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 14px 16px;
  background: rgba(var(--ar), .04);
  border-radius: 10px;
  border: 1px solid rgba(var(--ar), .14);
  border-left: 3px solid var(--accent);
  transition: background .18s ease, transform .12s ease;
}
.postop-rule:hover {
  background: rgba(var(--ar), .08);
  transform: translateX(2px);
}
.postop-rule.danger {
  background: rgba(var(--rr), .06);
  border-color: rgba(var(--rr), .18);
  border-left-color: var(--red);
}
.postop-rule-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.postop-rule-text strong {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
}
.postop-rule.danger .postop-rule-text strong { color: var(--red); }
.postop-rule-text span {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  font-weight: 500;
}

/* Tissue healing tensile-strength curve */
.postop-healing {
  margin: 20px 0 12px;
  padding: 16px 8px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
}
.postop-healing svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 320px;
}
[data-theme="dark"] .postop-healing { background: rgba(255,255,255,.02); }
.postop-healing-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.55;
}

/* Comparison table — readable color-coding for sling/RTS cells */
.data-table.postop-compare th {
  font-size: 10.5px;
}
.data-table.postop-compare td {
  font-size: 13px;
  vertical-align: middle;
}
.data-table.postop-compare td.ok   { color: var(--green); font-weight: 600; }
.data-table.postop-compare td.warn { color: var(--orange); font-weight: 600; }
.data-table.postop-compare td.bad  { color: var(--red); font-weight: 600; }

/* Smooth-scroll behavior on procedure quick-nav anchor jumps */
html { scroll-behavior: smooth; }

@media (max-width: 600px) {
  .postop-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .postop-card { padding: 14px 12px 12px; }
  .postop-card-name { font-size: 15px; }
  .postop-rules { grid-template-columns: 1fr; }
}

/* v204 — Procedure ma-item: thicker colored left border + category eyebrow
 * label replaces the v202 icon. Categorized list reads as a curated menu
 * via typography + color rather than icons. */
.ma-item.postop--labral,
.ma-item.postop--instab,
.ma-item.postop--decomp,
.ma-item.postop--cuff,
.ma-item.postop--soft,
.ma-item.postop--fx,
.ma-item.postop--arthro,
.ma-item.postop--arthroR {
  border-left-width: 4px !important;
}

/* Category eyebrow label above each h4 — small monospace tag rendered
 * via ::before so we don't have to touch the HTML for every procedure. */
.ma-item.postop--labral   .ma-header h4::before,
.ma-item.postop--instab   .ma-header h4::before,
.ma-item.postop--decomp   .ma-header h4::before,
.ma-item.postop--cuff     .ma-header h4::before,
.ma-item.postop--soft     .ma-header h4::before,
.ma-item.postop--fx       .ma-header h4::before,
.ma-item.postop--arthro   .ma-header h4::before,
.ma-item.postop--arthroR  .ma-header h4::before {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--postop-accent);
  margin-bottom: 6px;
  opacity: 0.95;
}
.ma-item.postop--labral   .ma-header h4::before { content: 'Labrum · superior'; }
.ma-item#postop-bankart   .ma-header h4::before { content: 'Instability · capsular shift'; }
.ma-item#postop-latarjet  .ma-header h4::before { content: 'Instability · bone augmentation'; }
.ma-item.postop--decomp   .ma-header h4::before { content: 'Decompression'; }
.ma-item.postop--cuff     .ma-header h4::before { content: 'Tendon-to-bone repair'; }
.ma-item.postop--soft     .ma-header h4::before { content: 'Tendon · long head biceps'; }
.ma-item.postop--fx       .ma-header h4::before { content: 'Fracture · open reduction'; }
.ma-item#postop-tsa       .ma-header h4::before { content: 'Arthroplasty · anatomic'; }
.ma-item#postop-rtsa      .ma-header h4::before { content: 'Arthroplasty · reverse'; }

/* Category accents — left-border colored stripe per procedure type.
 * Mirrors bl-strip color variants. The variable --postop-accent drives
 * both the border and the icon color in a single declaration. */
.postop--labral   { --postop-accent: var(--accent2, #4d8aa8); }
.postop--instab   { --postop-accent: var(--green); }
.postop--decomp   { --postop-accent: var(--gold); }
.postop--cuff     { --postop-accent: var(--red); }
.postop--soft     { --postop-accent: var(--orange); }
.postop--fx       { --postop-accent: var(--orange); }
.postop--arthro   { --postop-accent: var(--purple); }
.postop--arthroR  { --postop-accent: var(--purple); }

.ma-item.postop--labral,
.ma-item.postop--instab,
.ma-item.postop--decomp,
.ma-item.postop--cuff,
.ma-item.postop--soft,
.ma-item.postop--fx,
.ma-item.postop--arthro,
.ma-item.postop--arthroR {
  border-left: 3px solid var(--postop-accent) !important;
}
.ma-item.postop--labral  .ma-h-icon,
.ma-item.postop--instab  .ma-h-icon,
.ma-item.postop--decomp  .ma-h-icon,
.ma-item.postop--cuff    .ma-h-icon,
.ma-item.postop--soft    .ma-h-icon,
.ma-item.postop--fx      .ma-h-icon,
.ma-item.postop--arthro  .ma-h-icon,
.ma-item.postop--arthroR .ma-h-icon {
  color: var(--postop-accent);
}

/* Subtle tinted gradient on the collapsed header (only when closed) so
 * each procedure has a distinct visual signature in the procedure list.
 * Disabled when the body is open to keep the expanded reading view clean. */
.ma-item.postop--labral   .ma-header { background: linear-gradient(90deg, rgba(77,138,168,.06) 0%, transparent 60%); }
.ma-item.postop--instab   .ma-header { background: linear-gradient(90deg, rgba(var(--nr),.06) 0%, transparent 60%); }
.ma-item.postop--decomp   .ma-header { background: linear-gradient(90deg, rgba(var(--gr),.06) 0%, transparent 60%); }
.ma-item.postop--cuff     .ma-header { background: linear-gradient(90deg, rgba(var(--rr),.06) 0%, transparent 60%); }
.ma-item.postop--soft     .ma-header { background: linear-gradient(90deg, rgba(var(--or),.06) 0%, transparent 60%); }
.ma-item.postop--fx       .ma-header { background: linear-gradient(90deg, rgba(var(--or),.06) 0%, transparent 60%); }
.ma-item.postop--arthro   .ma-header { background: linear-gradient(90deg, rgba(var(--pr),.06) 0%, transparent 60%); }
.ma-item.postop--arthroR  .ma-header { background: linear-gradient(90deg, rgba(var(--pr),.06) 0%, transparent 60%); }

[data-theme="dark"] .ma-item.postop--labral  .ma-header { background: linear-gradient(90deg, rgba(77,138,168,.10) 0%, transparent 60%); }
[data-theme="dark"] .ma-item.postop--instab  .ma-header { background: linear-gradient(90deg, rgba(var(--nr),.10) 0%, transparent 60%); }
[data-theme="dark"] .ma-item.postop--decomp  .ma-header { background: linear-gradient(90deg, rgba(var(--gr),.10) 0%, transparent 60%); }
[data-theme="dark"] .ma-item.postop--cuff    .ma-header { background: linear-gradient(90deg, rgba(var(--rr),.10) 0%, transparent 60%); }
[data-theme="dark"] .ma-item.postop--soft    .ma-header { background: linear-gradient(90deg, rgba(var(--or),.10) 0%, transparent 60%); }
[data-theme="dark"] .ma-item.postop--fx      .ma-header { background: linear-gradient(90deg, rgba(var(--or),.10) 0%, transparent 60%); }
[data-theme="dark"] .ma-item.postop--arthro  .ma-header { background: linear-gradient(90deg, rgba(var(--pr),.10) 0%, transparent 60%); }
[data-theme="dark"] .ma-item.postop--arthroR .ma-header { background: linear-gradient(90deg, rgba(var(--pr),.10) 0%, transparent 60%); }

/* v322 — Mobile polish for SR review modals.
   Hide keyboard-shortcut hints + tighten grade-button widths on small
   viewports so Again/Hard/Good fit on a single row. */
@media (max-width: 480px){
  .cb-kbd-hint{display:none}
  /* All 3 grade buttons in one row on phones (was wrapping) */
  .srr-grade,.sw-grade{min-width:0 !important;padding:11px 12px !important;flex:1}
  /* Tighten the keyboard hint area inside the reveal-modal footer */
  .sr-review-backdrop > div{padding-left:0;padding-right:0}
}

/* ============================================================
   v332 — UNIFORM ANATOMY + DEVICE CARDS
   Illustration on the left, info table on the right. Stacks
   vertically on narrow screens. Replaces the inconsistent mix
   of standalone tables + figures with one repeatable pattern.
   ============================================================ */

/* ---- Muscle card: illustration + OINA table ---- */
.cb-muscle-card {
  display: grid;
  grid-template-columns: minmax(320px, 1.2fr) 1fr;
  gap: 20px;
  align-items: start;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 18px;
  margin: 18px 0 24px;
}
.cb-muscle-illus {
  margin: 0;
  min-width: 0;
  background: #fdf6e8;
  border: 1px solid #e7e0cf;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cb-muscle-illus img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
  display: block;
}
.cb-muscle-illus figcaption {
  margin-top: 8px;
  font-size: 11.5px;
  color: #6b7280;
  text-align: center;
  line-height: 1.4;
  font-family: 'IBM Plex Mono', monospace;
}
.cb-muscle-data {
  min-width: 0;
  overflow-x: auto;
}
.cb-muscle-data table.data-table {
  margin: 0;
  font-size: 12.5px;
}
.cb-muscle-data table.data-table th {
  font-size: 11px;
  padding: 6px 8px;
}
.cb-muscle-data table.data-table td {
  padding: 7px 8px;
  vertical-align: top;
}

/* ---- Device card: illustration + structured info ---- */
.cb-dme-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-left: 4px solid var(--accent, #2563eb);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 0;
}
.cb-dme-card .cb-device-img {
  margin: 0;
  background: #fafaf7;
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 8px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cb-dme-card .cb-device-img img {
  width: 100%;
  height: auto;
  max-height: 160px;
  object-fit: contain;
}
.cb-dme-card .cb-device-info { min-width: 0; }
.cb-dme-card .cb-device-name {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.cb-dme-card .cb-device-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #eef2ff;
  color: #3730a3;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.cb-dme-card dl.cb-device-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
}
.cb-dme-card dl.cb-device-dl dt {
  font-weight: 700;
  color: #4b5563;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding-top: 3px;
}
.cb-dme-card dl.cb-device-dl dd {
  margin: 0;
  color: #1f2937;
}

/* Grid container so device cards can pack 2-up on wide screens.
 * `min(440px, 100%)` lets the grid collapse cleanly on narrow viewports
 * instead of overflowing horizontally. */
.cb-device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 14px;
  margin: 16px 0 22px;
}

/* Tablet/mobile stack */
@media (max-width: 800px) {
  .cb-muscle-card { grid-template-columns: 1fr; }
  .cb-muscle-illus img { max-height: 280px; }
  .cb-dme-card { grid-template-columns: 130px 1fr; gap: 12px; padding: 12px; }
  .cb-dme-card .cb-device-img { aspect-ratio: 1 / 1; }
}
@media (max-width: 480px) {
  .cb-dme-card { grid-template-columns: 1fr; }
  .cb-dme-card .cb-device-img { max-width: 200px; margin: 0 auto; }
}

/* Dark-mode treatment for muscle illustrations + device thumbs */
[data-theme="dark"] .cb-muscle-illus,
[data-theme="dark"] .cb-dme-card .cb-device-img {
  background: #fafaf2;
  border-color: rgba(255,255,255,0.08);
}

/* v335 - Profile button in nav */
.cb-nav-profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-size: 18px;
  margin-left: 6px;
  transition: all 0.15s ease;
  cursor: pointer;
}
.cb-nav-profile-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ====================================================================
   cb-reveal — paragraph-level progressive disclosure
   Default: punchy hook + 1-line tease. Click → full prose unfolds.
   Built on native <details>/<summary> for zero-JS accessibility.
   ==================================================================== */
.cb-reveal {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 12px 0;
  background: var(--bg2);
  transition: box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
.cb-reveal:hover {
  border-color: var(--accent);
}
.cb-reveal[open] {
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(var(--ar), .10);
}
.cb-reveal > summary {
  cursor: pointer;
  padding: 13px 16px 13px 18px;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: background .15s ease;
  user-select: none;
}
.cb-reveal > summary::-webkit-details-marker { display: none; }
.cb-reveal > summary::marker { content: ''; }
.cb-reveal > summary:hover {
  background: var(--bg3);
}
.cb-reveal > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.cb-reveal-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.cb-reveal-hook {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  line-height: 1.32;
  letter-spacing: -.005em;
}
.cb-reveal-tease {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.45;
  font-weight: 500;
}
.cb-reveal > summary::after {
  content: '\25BC'; /* ▼ */
  font-size: 10px;
  color: var(--accent);
  margin-left: auto;
  transition: transform .25s ease;
  flex-shrink: 0;
  padding-top: 5px;
  opacity: .7;
}
.cb-reveal[open] > summary::after {
  transform: rotate(180deg);
  opacity: 1;
}
.cb-reveal[open] > summary {
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
}
.cb-reveal-body {
  padding: 14px 18px 16px 18px;
  animation: cbRevealOpen .28s cubic-bezier(.4,0,.2,1);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.cb-reveal-body > p:first-child { margin-top: 0; }
.cb-reveal-body > p:last-child { margin-bottom: 0; }
.cb-reveal-body ul, .cb-reveal-body ol {
  margin: 8px 0;
  padding-left: 22px;
}
.cb-reveal-body li { margin: 4px 0; }
@keyframes cbRevealOpen {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Color variants — match existing bl-strip palette */
.cb-reveal.cb-reveal--red { border-left: 4px solid #dc2626; }
.cb-reveal.cb-reveal--red[open] { border-color: #dc2626; }
.cb-reveal.cb-reveal--gold { border-left: 4px solid #f59e0b; }
.cb-reveal.cb-reveal--gold[open] { border-color: #f59e0b; }
.cb-reveal.cb-reveal--green { border-left: 4px solid #16a34a; }
.cb-reveal.cb-reveal--green[open] { border-color: #16a34a; }
.cb-reveal.cb-reveal--purple { border-left: 4px solid #7c3aed; }
.cb-reveal.cb-reveal--purple[open] { border-color: #7c3aed; }

/* Compact variant — for inline use inside ma-body or bl-strip */
.cb-reveal.cb-reveal--inline {
  margin: 8px 0;
  background: transparent;
  border-radius: 8px;
}
.cb-reveal.cb-reveal--inline > summary { padding: 9px 12px 9px 14px; }
.cb-reveal.cb-reveal--inline .cb-reveal-hook { font-size: 13.5px; }
.cb-reveal.cb-reveal--inline .cb-reveal-tease { font-size: 11.5px; }
.cb-reveal.cb-reveal--inline .cb-reveal-body { padding: 10px 14px 12px 14px; font-size: 13.5px; }

/* Print: always expand */
@media print {
  .cb-reveal > summary::after { display: none; }
  .cb-reveal-body { display: block !important; }
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .cb-reveal > summary { padding: 11px 12px 11px 14px; gap: 10px; }
  .cb-reveal-hook { font-size: 14px; }
  .cb-reveal-tease { font-size: 12px; }
  .cb-reveal-body { padding: 12px 14px 14px 14px; font-size: 13.5px; }
}

/* ====================================================================
   cb-site-footer — global legal/disclaimer footer injected on every page
   ==================================================================== */
.cb-site-footer {
  margin-top: 60px;
  padding: 32px 0 24px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
  font-family: 'Manrope', sans-serif;
}
.cb-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}
.cb-footer-disclaimer {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text2);
  background: var(--bg3);
  border-left: 3px solid var(--accent);
  padding: 16px 18px;
  border-radius: 8px;
  margin-bottom: 22px;
}
.cb-footer-disclaimer strong { color: var(--text); }
.cb-footer-disclaimer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.cb-footer-disclaimer a:hover { text-decoration: underline; }
.cb-footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text3);
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.cb-footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cb-footer-mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 10px;
}
.cb-footer-brand span {
  font-size: 13px;
  color: var(--text2);
  font-weight: 600;
}
.cb-footer-links {
  display: flex;
  gap: 18px;
}
.cb-footer-links a {
  color: var(--text2);
  text-decoration: none;
  font-weight: 600;
  font-size: 12.5px;
  transition: color .15s ease;
}
.cb-footer-links a:hover { color: var(--accent); }
.cb-footer-copyright {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--text3);
  line-height: 1.5;
}
@media (max-width: 768px) {
  .cb-site-footer { margin-top: 40px; padding: 24px 0 18px; }
  .cb-footer-inner { padding: 0 14px; }
  .cb-footer-disclaimer { font-size: 11.5px; padding: 12px 14px; }
  .cb-footer-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cb-footer-copyright { font-size: 10.5px; }
}
@media print { .cb-site-footer { display: none; } }

/* ===== v440 - PWA install banner + iOS modal ===== */
.cb-pwa-banner {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  z-index: 9000;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  transform: translateY(120%);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s;
}
.cb-pwa-banner.cb-pwa-show { transform: translateY(0); opacity: 1; }
.cb-pwa-banner.cb-pwa-hide { transform: translateY(120%); opacity: 0; }
.cb-pwa-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, #3b82f6, #a855f7);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 17px;
  flex-shrink: 0;
}
.cb-pwa-body { flex: 1; min-width: 0; }
.cb-pwa-title { font-weight: 700; font-size: 14px; color: var(--text); line-height: 1.25; }
.cb-pwa-sub { font-size: 12px; color: var(--text2); line-height: 1.4; margin-top: 2px; }
.cb-pwa-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cb-pwa-btn {
  border: none; cursor: pointer;
  font-family: inherit; font-weight: 700;
  border-radius: 8px;
  transition: opacity .15s;
}
.cb-pwa-btn.primary {
  padding: 8px 14px;
  font-size: 13px;
  background: linear-gradient(135deg, #3b82f6, #a855f7);
  color: #fff;
}
.cb-pwa-btn.primary:hover { opacity: 0.92; }
.cb-pwa-btn.ghost {
  width: 30px; height: 30px;
  padding: 0;
  font-size: 18px; line-height: 1;
  background: transparent;
  color: var(--text3);
}
.cb-pwa-btn.ghost:hover { color: var(--text); background: var(--bg3); }

@media (max-width: 480px) {
  .cb-pwa-banner { left: 8px; right: 8px; bottom: 8px; padding: 12px 14px; gap: 10px; }
  .cb-pwa-icon { width: 38px; height: 38px; font-size: 15px; }
  .cb-pwa-title { font-size: 13px; }
  .cb-pwa-sub { font-size: 11.5px; }
}

/* iOS instructions modal */
.cb-pwa-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity .2s;
  padding: 16px;
  backdrop-filter: var(--glass-filter-ambient);
  -webkit-backdrop-filter: var(--glass-filter-ambient);
}
.cb-pwa-modal-overlay.cb-pwa-show { opacity: 1; }
.cb-pwa-modal-overlay.cb-pwa-hide { opacity: 0; }
.cb-pwa-modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 24px 22px;
  max-width: 380px;
  width: 100%;
  font-family: 'Manrope', sans-serif;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}
.cb-pwa-modal-close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: none;
  color: var(--text3); font-size: 22px;
  cursor: pointer; padding: 4px 8px;
  line-height: 1; border-radius: 6px;
}
.cb-pwa-modal-close:hover { color: var(--text); background: var(--bg3); }
.cb-pwa-modal-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3b82f6, #a855f7);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 22px;
  margin: 0 auto 14px;
}
.cb-pwa-modal h3 {
  font-size: 19px; font-weight: 800;
  text-align: center; margin: 0 0 8px;
  color: var(--text);
}
.cb-pwa-modal p {
  text-align: center; font-size: 13.5px;
  color: var(--text2); line-height: 1.55;
  margin: 0 0 18px;
}
.cb-pwa-steps {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
  margin: 0 0 16px;
}
.cb-pwa-steps li {
  display: flex; gap: 12px;
  font-size: 13.5px; color: var(--text);
  line-height: 1.5;
}
.cb-pwa-step-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #a855f7);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.cb-pwa-share {
  display: inline-block;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}
.cb-pwa-modal-foot {
  font-size: 11.5px !important;
  color: var(--text3) !important;
  margin: 0 !important;
}

/* ===== v440 - Mobile/PWA optimizations ===== */
html.cb-installed body { padding-top: env(safe-area-inset-top, 0); }
html.cb-installed .site-nav {
  padding-top: max(8px, env(safe-area-inset-top, 8px));
}

/* Bigger touch targets on mobile (44pt min — Apple HIG) */
@media (max-width: 768px) and (pointer: coarse) {
  .pf-btn, .ac-btn, .cb-nav-flashcards-btn, .cb-nav-search-btn,
  .cb-nav-npte-btn, .cb-nav-pricing-btn, .cb-nav-profile-btn,
  button[data-pf-key] .pf-pill, .pf-pill {
    min-height: 44px;
  }
  .ac-input, .pf-input { min-height: 46px; font-size: 16px; /* iOS auto-zoom prevention */ }
  .theme-btn { min-width: 38px; min-height: 38px; }
}

/* Mobile nav: stack and scroll-x on narrow screens */
@media (max-width: 768px) {
  .site-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 12px;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav .nav-cat { flex-shrink: 0; }
  .site-nav .nav-spacer { flex-shrink: 0; min-width: 4px; }
  .site-nav .theme-toggle { flex-shrink: 0; }
  .logo-link .brand-text { display: none; }
  .logo-link .mark { font-size: 16px; }

  /* Hide nav dropdowns on hover (replace with click-to-open on mobile) */
  .nav-cat .nav-drop {
    position: fixed;
    top: 56px;
    left: 8px; right: 8px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    z-index: 9001;
  }

  /* Smaller hero on mobile */
  .hero h1 { font-size: 28px !important; line-height: 1.2 !important; }
  .hero p { font-size: 15px !important; }
  .container { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 480px) {
  .site-nav .cb-nav-pricing-btn,
  .site-nav .cb-nav-npte-btn,
  .site-nav .cb-nav-flashcards-btn { padding: 6px 10px !important; font-size: 12px !important; }
}

/* Tap highlight cleanup */
* { -webkit-tap-highlight-color: rgba(59,130,246,0.18); }

/* Smooth scroll for in-page anchors */
html { scroll-behavior: smooth; }

/* Disable text selection on nav and action buttons (feels more native) */
.site-nav, .pf-btn, .ac-btn, .cb-pwa-btn, .pf-pill, .theme-btn {
  -webkit-user-select: none;
  user-select: none;
}

/* iOS keyboard fix: viewport meta is set with viewport-fit=cover — body needs safe-area */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* When installed (standalone), tighten top spacing */
html.cb-installed .pf-wrap,
html.cb-installed .ac-wrap,
html.cb-installed .container {
  padding-top: max(8px, env(safe-area-inset-top));
}

/* Prevent overscroll bounce on body in standalone mode */
html.cb-installed { overscroll-behavior-y: contain; }

/* "Installed" badge can be shown anywhere with this class */
.cb-installed-only { display: none; }
html.cb-installed .cb-installed-only { display: inline-flex; }
.cb-not-installed-only { display: inline-flex; }
html.cb-installed .cb-not-installed-only { display: none; }

/* ===== v474: Clinical Decision Rule (CDR) step-card component =====
   For step-by-step decision trees (Canadian C-Spine Rule, Ottawa Ankle/Knee/Foot, etc.).
   Replaces the older bl-strip + nested table format with a proper card-based tree.
   Use:
     <div class="cdr-tree">
       <div class="cdr-step">
         <div class="cdr-step-num">1</div>
         <div class="cdr-step-body">
           <div class="cdr-step-title">Step title</div>
           <div class="cdr-step-prompt">Risk factor 1 · Risk factor 2 · ...</div>
           <div class="cdr-branches">
             <div class="cdr-branch cdr-stop">
               <span class="cdr-branch-label">YES</span>
               <span class="cdr-branch-icon">⚠</span>
               <span class="cdr-branch-action"><strong>RADIOGRAPHY required.</strong> Stop here, refer.</span>
             </div>
             <div class="cdr-branch cdr-go">
               <span class="cdr-branch-label">NO</span>
               <span class="cdr-branch-action">Proceed to Step 2.</span>
               <span class="cdr-branch-arrow">→</span>
             </div>
           </div>
         </div>
       </div>
     </div>
*/
.cdr-tree { display:flex; flex-direction:column; gap:14px; margin:18px 0; position:relative; }
.cdr-tree::before { content:''; position:absolute; left:23px; top:48px; bottom:48px; width:2px; background:linear-gradient(180deg, var(--accent) 0%, var(--accent2) 50%, var(--accent) 100%); opacity:.18; border-radius:1px; z-index:0; }
@media (max-width:560px) { .cdr-tree::before { display:none; } }

.cdr-step { display:flex; gap:14px; background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:18px 20px; position:relative; transition:border-color .25s, box-shadow .25s; box-shadow:0 1px 3px rgba(0,0,0,.04); z-index:1; }
.cdr-step:hover { border-color:var(--accent); box-shadow:0 4px 14px rgba(0,0,0,.06); }
[data-theme="dark"] .cdr-step { background:var(--bg2); }
[data-theme="dark"] .cdr-step:hover { box-shadow:0 8px 24px rgba(0,0,0,.3); }

.cdr-step-num { width:32px; height:32px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Manrope', sans-serif; font-size:14px; font-weight:800; letter-spacing:-.3px; box-shadow:0 3px 10px rgba(var(--ar), .35); position:relative; }

.cdr-step-body { flex:1; min-width:0; }
.cdr-step-tag { display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:4px; }
.cdr-step-title { font-family:'Manrope', sans-serif; font-size:15.5px; font-weight:800; letter-spacing:-.2px; color:var(--text); line-height:1.3; margin:0 0 6px; }
.cdr-step-prompt { font-size:13.5px; color:var(--text2); line-height:1.55; margin-bottom:12px; }
.cdr-step-prompt strong { color:var(--text); font-weight:700; }

.cdr-branches { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.cdr-branch { display:flex; align-items:center; gap:14px; padding:11px 14px; border-radius:10px; font-size:13.5px; line-height:1.5; color:var(--text); transition:transform .15s, background .15s; }
.cdr-branch-label { display:inline-flex; align-items:center; justify-content:center; min-width:48px; height:26px; padding:0 10px; font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:800; letter-spacing:1px; border-radius:6px; flex-shrink:0; text-transform:uppercase; }
.cdr-branch-icon { font-size:15px; flex-shrink:0; line-height:1; }
.cdr-branch-action { flex:1; min-width:0; }
.cdr-branch-action strong { font-weight:800; }
.cdr-branch-arrow { font-size:14px; font-weight:700; flex-shrink:0; opacity:.7; }

/* STOP branch — red, indicates referral / radiography needed */
.cdr-branch.cdr-stop { background:rgba(220,38,38,.06); border:1px solid rgba(220,38,38,.22); }
.cdr-branch.cdr-stop:hover { background:rgba(220,38,38,.10); transform:translateX(2px); }
.cdr-branch.cdr-stop .cdr-branch-label { background:#dc2626; color:#fff; box-shadow:0 1px 3px rgba(220,38,38,.4); }
.cdr-branch.cdr-stop .cdr-branch-icon { color:#dc2626; }
.cdr-branch.cdr-stop .cdr-branch-action strong { color:#b91c1c; }
[data-theme="dark"] .cdr-branch.cdr-stop { background:rgba(220,38,38,.10); border-color:rgba(220,38,38,.30); }
[data-theme="dark"] .cdr-branch.cdr-stop .cdr-branch-action strong { color:#fca5a5; }

/* GO branch — neutral, proceeds to next step */
.cdr-branch.cdr-go { background:rgba(var(--ar),.05); border:1px solid rgba(var(--ar),.18); }
.cdr-branch.cdr-go:hover { background:rgba(var(--ar),.10); transform:translateX(2px); }
.cdr-branch.cdr-go .cdr-branch-label { background:var(--accent); color:#fff; box-shadow:0 1px 3px rgba(var(--ar),.4); }
.cdr-branch.cdr-go .cdr-branch-arrow { color:var(--accent); }

/* CLEAR branch — green/positive, indicates clearance */
.cdr-branch.cdr-clear { background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.25); }
.cdr-branch.cdr-clear:hover { background:rgba(16,185,129,.14); transform:translateX(2px); }
.cdr-branch.cdr-clear .cdr-branch-label { background:#10b981; color:#fff; box-shadow:0 1px 3px rgba(16,185,129,.4); }
.cdr-branch.cdr-clear .cdr-branch-icon { color:#10b981; }
.cdr-branch.cdr-clear .cdr-branch-action strong { color:#047857; }
[data-theme="dark"] .cdr-branch.cdr-clear .cdr-branch-action strong { color:#34d399; }

/* Mobile compact */
@media (max-width:560px) {
  .cdr-step { padding:14px 14px; gap:10px; }
  .cdr-step-num { width:28px; height:28px; font-size:13px; }
  .cdr-step-title { font-size:14.5px; }
  .cdr-step-prompt { font-size:13px; }
  .cdr-branch { padding:10px 12px; gap:10px; flex-wrap:wrap; }
  .cdr-branch-label { min-width:42px; height:24px; font-size:10.5px; }
  .cdr-branch-action { font-size:13px; }
}


/* v597 — PNG illustration polish (special tests + HEP exercises) */
.cb-anatomy-figure img,
.cb-hep-illustration,
img[src*="assets/anatomy/"][src*=".webp"],
img[src*="assets/hep/"][src*=".webp"] {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  margin: 8px auto;
  border-radius: 14px;
  background: #fafafa;
  padding: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme="dark"] .cb-anatomy-figure img,
[data-theme="dark"] .cb-hep-illustration,
[data-theme="dark"] img[src*="assets/anatomy/"][src*=".webp"],
[data-theme="dark"] img[src*="assets/hep/"][src*=".webp"] {
  background: rgba(255,255,255,0.94);
  box-shadow: 0 8px 28px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.08);
}


/* v597 — PNG illustration polish (special tests + HEP exercises) */
.cb-anatomy-figure img,
.cb-hep-illustration,
img[src*="assets/anatomy/"][src*=".webp"],
img[src*="assets/hep/"][src*=".webp"] {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  margin: 8px auto;
  border-radius: 14px;
  background: #fafafa;
  padding: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme="dark"] .cb-anatomy-figure img,
[data-theme="dark"] .cb-hep-illustration,
[data-theme="dark"] img[src*="assets/anatomy/"][src*=".webp"],
[data-theme="dark"] img[src*="assets/hep/"][src*=".webp"] {
  background: rgba(255,255,255,0.94);
  box-shadow: 0 8px 28px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.08);
}


/* v597 — PNG illustration polish (special tests + HEP exercises) */
.cb-anatomy-figure img,
.cb-hep-illustration,
img[src*="assets/anatomy/"][src*=".webp"],
img[src*="assets/hep/"][src*=".webp"] {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  margin: 8px auto;
  border-radius: 14px;
  background: #fafafa;
  padding: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme="dark"] .cb-anatomy-figure img,
[data-theme="dark"] .cb-hep-illustration,
[data-theme="dark"] img[src*="assets/anatomy/"][src*=".webp"],
[data-theme="dark"] img[src*="assets/hep/"][src*=".webp"] {
  background: rgba(255,255,255,0.94);
  box-shadow: 0 8px 28px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.08);
}


/* v597 — PNG illustration polish (special tests + HEP exercises) */
.cb-anatomy-figure img,
.cb-hep-illustration,
img[src*="assets/anatomy/"][src*=".webp"],
img[src*="assets/hep/"][src*=".webp"] {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  margin: 8px auto;
  border-radius: 14px;
  background: #fafafa;
  padding: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme="dark"] .cb-anatomy-figure img,
[data-theme="dark"] .cb-hep-illustration,
[data-theme="dark"] img[src*="assets/anatomy/"][src*=".webp"],
[data-theme="dark"] img[src*="assets/hep/"][src*=".webp"] {
  background: rgba(255,255,255,0.94);
  box-shadow: 0 8px 28px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.08);
}


/* v597 — PNG illustration polish (special tests + HEP exercises) */
.cb-anatomy-figure img,
.cb-hep-illustration,
img[src*="assets/anatomy/"][src*=".png"],
img[src*="assets/hep/"][src*=".png"] {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  margin: 8px auto;
  border-radius: 14px;
  background: #fafafa;
  padding: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme="dark"] .cb-anatomy-figure img,
[data-theme="dark"] .cb-hep-illustration,
[data-theme="dark"] img[src*="assets/anatomy/"][src*=".png"],
[data-theme="dark"] img[src*="assets/hep/"][src*=".png"] {
  background: rgba(255,255,255,0.94);
  box-shadow: 0 8px 28px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.08);
}


/* ====================================================================
   cb-ts-simulator — Thompson Test Interactive Simulator Widget
   ==================================================================== */
.cb-ts-simulator {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  font-family: 'Manrope', sans-serif;
}
.cb-ts-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}
.cb-ts-subtitle {
  font-size: 13px;
  color: var(--text2);
  margin: -10px 0 4px;
  line-height: 1.45;
}
.cb-ts-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
  align-items: center;
}
@media (max-width: 640px) {
  .cb-ts-layout {
    grid-template-columns: 1fr;
  }
}
.cb-ts-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.cb-ts-toggle {
  display: flex;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2px;
  width: fit-content;
}
.cb-ts-mode-btn {
  background: transparent;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.cb-ts-mode-btn:hover {
  color: var(--text);
}
.cb-ts-mode-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(var(--ar), 0.2);
}
.cb-ts-squeeze-btn {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  color: #fff;
  border: none;
  padding: 11px 20px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(var(--ar), 0.25);
  transition: all 0.2s ease;
  user-select: none;
  width: fit-content;
}
.cb-ts-squeeze-btn:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--ar), 0.3);
}
.cb-ts-squeeze-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(var(--ar), 0.2);
}
.cb-ts-svg-container {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="dark"] .cb-ts-svg-container {
  background: #f8fafc;
}
.cb-ts-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.cb-ts-explainer {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text2);
  background: var(--bg3);
  padding: 12px 16px;
  border-radius: 10px;
  border-left: 3px solid var(--accent);
}
.cb-ts-explainer strong {
  color: var(--text);
  font-weight: 700;
}