/* ============================================================================
 * cb-anat.css — Self-contained INTERACTIVE ANATOMY FIGURE widget.
 *
 * Rolls the shoulder module's interactive figures out to ANY module without
 * requiring that module to be migrated onto the cb-mod-v4 design system.
 *
 *   • numbered hotspot dots over a white image "plate"
 *   • a detail PANEL that updates on click (eyebrow / name / sub / points / hint)
 *   • a "Jump to a structure" CHIP list that fills the left column
 *   • optional label-highlight + leader line for labeled SCHEMATICS
 *
 * All look-and-feel tokens are scoped LOCALLY to .v4-anat, so the widget renders
 * identically (emerald glass, matching the shoulder) on any host page regardless
 * of that page's own theme/design. Critical props use !important so the host's
 * generic button / figure / img / ul rules can't break the widget.
 *
 * Pairs with cb-anat-interactive.js (the data-driven engine). v6 behavior baked
 * in: a clicked dot does NOT glow/scale, there is no moving spotlight, and the
 * image wrap reserves the image's aspect-ratio so %-positioned overlays never
 * drift on click.
 *
 * NOTE: the SHOULDER module keeps its own inline copy of this styling for now;
 * this is the shared rollout version. De-duplicating the shoulder onto this file
 * is a later, separately-verified step (its gold-standard state stays untouched).
 * ========================================================================== */

/* ---- scoped design tokens (emerald-on-dark, matching the shoulder) -------- */
.v4-anat{
  --accent:#2dff80; --accent2:#10b981; --ar:45,255,128;
  --v4-glass:rgba(255,255,255,.05); --v4-line:rgba(255,255,255,.10);
  --v4-text:rgba(247,245,246,.92); --v4-text2:rgba(247,245,246,.66); --v4-text3:rgba(247,245,246,.50);
}

/* ---- layout --------------------------------------------------------------- */
.v4-anat{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:18px; align-items:stretch; margin:20px 0 10px;
}
.v4-anat-left{ display:flex; flex-direction:column; gap:14px; min-width:0; }

/* ---- figure card = white image plate inside a dark glass card ------------- */
.v4-anat-figure{
  position:relative; border-radius:16px; overflow:visible; margin:0;
  border:1px solid var(--v4-line) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016)) !important;
  padding:10px !important; display:flex; flex-direction:column; justify-content:flex-start; gap:4px;
  backdrop-filter: var(--glass-filter-ambient); -webkit-backdrop-filter: var(--glass-filter-ambient);
}
.v4-anat-imgwrap{ position:relative; display:block; min-width:0; }
.v4-anat-imgwrap img,
.v4-anat-figure > img{
  display:block !important; width:100% !important; height:auto !important;
  background:#fff !important; border-radius:10px !important; border:none !important; padding:0 !important; margin:0 !important;
}
.v4-anat-figure figcaption{
  background:transparent !important; padding:8px 4px 2px !important;
  color:rgba(247,245,246,.9); font-size:11.5px; line-height:1.5;
}
.v4-anat-figure figcaption a{ color:var(--accent); }

/* ---- numbered hotspot dots ------------------------------------------------ */
.v4-hot{
  position:absolute !important; width:25px !important; height:25px !important;
  transform:translate(-50%,-50%) !important; border-radius:50% !important;
  border:2px solid #fff !important; background:var(--accent) !important; color:#05130b !important;
  font-family:'Manrope',sans-serif !important; font-weight:800 !important; font-size:11.5px !important; line-height:1 !important;
  cursor:pointer; display:flex !important; align-items:center; justify-content:center;
  box-shadow:0 0 0 4px rgba(var(--ar),.22),0 2px 8px rgba(0,0,0,.45);
  transition:box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
  z-index:3; outline:none; padding:0 !important; margin:0 !important; animation:none;
}
.v4-hot:hover,
.v4-hot.hovered{ transform:translate(-50%,-50%) scale(1.12) !important; box-shadow:0 0 0 6px rgba(var(--ar),.35),0 4px 12px rgba(0,0,0,.55) !important; z-index:5 !important; }
/* active = glowing white dot + pulsing accent halo */
.v4-hot.active{
  transform:translate(-50%,-50%) scale(1.10) !important;
  background:#fff !important;
  color:#05130b !important;
  border-color:var(--accent2) !important;
  z-index:4 !important;
  animation:v4ActivePulse 2.5s infinite ease-in-out !important;
}
@keyframes v4ActivePulse{
  0%, 100%{ box-shadow:0 0 0 4px rgba(var(--ar),.30), 0 0 0 1px #fff, 0 2px 8px rgba(0,0,0,.45); }
  50%{ box-shadow:0 0 0 10px rgba(var(--ar),.60), 0 0 0 2px #fff, 0 4px 14px rgba(0,0,0,.60); }
}
.v4-hot.active::after{ content:none !important; }
.v4-hot:focus-visible{ box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(var(--ar),.6) !important; }
/* optional off-structure dot w/ thin leader line (set --ang deg + --len px inline) */
.v4-hot--lead::after{
  content:""; position:absolute; left:50%; top:50%; width:var(--len,22px); height:2px;
  background:linear-gradient(90deg,var(--accent),rgba(var(--ar),.2));
  transform-origin:0 50%; transform:rotate(var(--ang,0deg)); pointer-events:none; border-radius:2px; z-index:-1;
}

/* ---- detail panel --------------------------------------------------------- */
.v4-anat-panel{
  position:relative; background:var(--v4-glass); border:1px solid var(--v4-line);
  border-radius:16px; padding:20px 22px; min-height:230px; flex:1 1 auto; order:1;
  backdrop-filter: var(--glass-filter-ambient); -webkit-backdrop-filter: var(--glass-filter-ambient);
}
.v4-anat-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:8px; }
.v4-anat-name{ font-family:'Manrope',sans-serif; font-size:20px; font-weight:800; color:#fff; letter-spacing:-.02em; margin:0 0 4px; line-height:1.15; }
.v4-anat-sub{ font-size:12.5px; color:var(--v4-text2); margin:0 0 12px; font-style:italic; }
.v4-anat-hint{ font-size:14px; line-height:1.62; color:var(--v4-text2); }
.v4-anat-pts{ margin:10px 0 0 !important; padding:0 !important; list-style:none !important; display:flex; flex-direction:column; gap:10px; }
.v4-anat-pts li{ position:relative; padding-left:18px !important; margin:0 !important; font-size:14.5px; line-height:1.5; color:var(--v4-text); list-style:none !important; }
.v4-anat-pts li::before{ content:"" !important; position:absolute; left:2px; top:8px; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px rgba(var(--ar),.6); }
.v4-anat-pts strong{ color:var(--accent); font-weight:700; }

/* ---- "Jump to a structure" chip list -------------------------------------- */
.v4-anat-list{
  order:-1; flex:0 0 auto; display:flex; flex-direction:column; min-width:0;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.016));
  border:1px solid var(--v4-line); border-radius:14px; padding:13px 13px 11px;
  backdrop-filter: var(--glass-filter-ambient); -webkit-backdrop-filter: var(--glass-filter-ambient);
}
.v4-anat-list-h{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--v4-text3); font-weight:700; margin:0 2px 10px; }
.v4-chips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:7px; align-content:start; flex:1 1 auto; }
.v4-chip{
  display:flex !important; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 11px !important;
  border-radius:10px !important; cursor:pointer; background:rgba(255,255,255,.03) !important; border:1px solid var(--v4-line) !important;
  color:var(--v4-text2) !important; font-family:'Manrope',sans-serif !important; font-size:13px !important; font-weight:600 !important; line-height:1.25 !important;
  transition:background .15s ease,border-color .15s ease,color .15s ease; margin:0 !important;
}
.v4-chip:hover,
.v4-chip.hovered{ background:rgba(45,255,128,.10) !important; border-color:rgba(45,255,128,.42) !important; color:#fff !important; }
.v4-chip:focus-visible{ outline:none; border-color:rgba(45,255,128,.8) !important; box-shadow:0 0 0 2px rgba(5,8,11,.9),0 0 0 4px rgba(45,255,128,.6) !important; }
.v4-chip.active{ background:linear-gradient(120deg,rgba(45,255,128,.22),rgba(16,64,40,.05)) !important; border-color:rgba(45,255,128,.6) !important; color:#fff !important; box-shadow:inset 0 0 0 1px rgba(45,255,128,.35) !important; }
.v4-chip-n{ flex:0 0 21px; height:21px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--accent); color:#05130b; font-weight:800; font-size:11px; }
.v4-chip-t{ flex:1 1 auto; min-width:0; }

/* ---- label-highlight + leader line (for labeled SCHEMATIC figures) -------- */
/* when a figure is in "labels" mode the printed labels ARE the structures, so the
 * numbered dots are invisible (a dot on a label would obscure the word it marks);
 * the invisible dot is still the click hit-target. */
.v4-anat[data-anat-labels] .v4-hot{ opacity:0 !important; }
.v4-lbl-hl{ position:absolute; display:none; z-index:5; pointer-events:none; border-radius:5px; background:rgba(45,255,128,.30); box-shadow:0 0 0 1.5px rgba(45,255,128,.85),0 0 16px rgba(45,255,128,.55); }
.v4-lbl-hl.on{ display:block; animation:v4-hl-in .2s ease both; }
@keyframes v4-hl-in{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
.v4-lead-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; overflow:visible; }
.v4-lead-svg line{ stroke:#2dff80; stroke-width:2.5; stroke-linecap:round; display:none; filter:drop-shadow(0 0 4px rgba(45,255,128,.9)); }
.v4-lead-svg line.on{ display:block; }
@media (prefers-reduced-motion: reduce){ .v4-lbl-hl.on{ animation:none; } }

/* ---- responsive ----------------------------------------------------------- */
@media(max-width:760px){ .v4-anat{ grid-template-columns:1fr; } .v4-anat-panel{ position:relative; top:0; } }

/* ---- LIGHT THEME ---------------------------------------------------------- */
html[data-theme="light"] .v4-anat{
  --v4-text:#13241c; --v4-text2:#475a51; --v4-text3:#788a81;
  --v4-glass:rgba(255,255,255,.72); --v4-line:rgba(5,150,105,.20);
  --accent:#059669; --accent2:#10b981; --ar:5,150,105;
}
html[data-theme="light"] .v4-anat-panel,
html[data-theme="light"] .v4-anat-list,
html[data-theme="light"] .v4-anat-figure{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.62)) !important; border-color:var(--v4-line) !important;
}
html[data-theme="light"] .v4-anat-name{ color:#0d1c15; }
html[data-theme="light"] .v4-anat-list-h{ color:#0d1c15; }
html[data-theme="light"] .v4-anat-hint,
html[data-theme="light"] .v4-anat-sub,
html[data-theme="light"] .v4-anat-pts li{ color:#3a4a42; }
html[data-theme="light"] .v4-anat-eyebrow{ color:#059669; }
html[data-theme="light"] .v4-anat-pts strong{ color:#047857; }
html[data-theme="light"] .v4-chip{ background:rgba(255,255,255,.7) !important; border-color:var(--v4-line) !important; color:#23332b !important; }
html[data-theme="light"] .v4-chip .v4-chip-t{ color:#23332b !important; }
html[data-theme="light"] .v4-chip:hover{ background:rgba(5,150,105,.10) !important; color:#0d1c15 !important; }
html[data-theme="light"] .v4-chip.active{ background:linear-gradient(120deg,rgba(5,150,105,.2),rgba(16,185,129,.06)) !important; color:#0d1c15 !important; }