/* pose-anatomy.css Styles for both the pictogram layer (pf-* classes, from pose-figures.js) and the anatomy layers (pa-* classes, from pose-anatomy.js). Kept in one file since PoseRenderer composites them into a single per pose and they need to read as one coherent image, not two mismatched styles. NOTE: this replaces the stale .pf-limb/.pf-head/.pf-joint/.pf-ground rules in sequence.css, which target class names from the OLD pose-figures.js. The current pose-figures.js (spine-as-bezier rewrite) emits: pf-spine, pf-girdle, pf-neck, pf-limb-upper, pf-limb-lower, pf-head, pf-joint, pf-terminal, pf-ground. Remove the old block in sequence.css (lines ~451-473) when this file is wired in, to avoid two rulesets fighting over the same figures. */ :root { --pa-skeleton: #E8E4D8; --pa-muscle: rgba(247, 37, 133, 0.55); --pa-muscle-stroke: rgba(247, 37, 133, 0.85); --pa-fascia: rgba(157, 78, 221, 0.8); --pa-gland: #FFD166; } /* ---------- Pictogram (pf-*) ---------- */ .pf-spine { stroke: var(--lhc-cyan); stroke-width: 2.4; stroke-linecap: round; fill: none; } .pf-girdle { stroke: var(--lhc-cyan); stroke-width: 2; stroke-linecap: round; } .pf-neck { stroke: var(--lhc-cyan); stroke-width: 2; stroke-linecap: round; } .pf-limb-upper { stroke: var(--lhc-cyan); stroke-width: 2.4; stroke-linecap: round; fill: none; } .pf-limb-lower { stroke: var(--lhc-cyan); stroke-width: 1.8; stroke-linecap: round; fill: none; } .pf-head { fill: rgba(0, 240, 255, 0.08); stroke: var(--lhc-cyan); stroke-width: 2.2; } .pf-joint { fill: var(--lhc-cyan); } .pf-terminal { fill: var(--lhc-cyan); opacity: 0.85; } .pf-ground { stroke: rgba(148, 163, 184, 0.35); stroke-width: 1; stroke-dasharray: 3 3; } /* ---------- Anatomy layers (pa-*) ---------- */ /* Each layer group gets a short fade-in so toggling feels responsive rather than an abrupt swap. */ .pa-layer { animation: pa-fade-in 0.25s ease-out; } @keyframes pa-fade-in { from { opacity: 0; } to { opacity: 1; } } .pa-bone-spine, .pa-bone-girdle, .pa-bone-limb { fill: var(--pa-skeleton); stroke: rgba(232, 228, 216, 0.9); stroke-width: 0.4; opacity: 0.9; } .pa-muscle { fill: var(--pa-muscle); stroke: var(--pa-muscle-stroke); stroke-width: 0.3; mix-blend-mode: normal; } .pa-fascia-line { fill: none; stroke: var(--pa-fascia); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.5 2.4; opacity: 0.85; } .pa-gland { fill: var(--pa-gland); filter: drop-shadow(0 0 2px var(--pa-gland)); opacity: 0.9; } /* Layer stacking: keep pictogram crisp on top regardless of DOM order the renderer used, in case future layers get inserted between. */ .pa-layer-skeleton { opacity: 0.9; } .pa-layer-muscles { opacity: 0.85; } .pa-layer-myofascial { opacity: 0.8; } .pa-layer-endocrine { opacity: 0.95; } /* ---------- Hover affordance for anatomy shapes ---------- */ /* .pa-hoverable is applied (in pose-anatomy.js) to every bone/muscle/ fascia/gland shape that backs a hover tooltip, and .pa-shape-hovered is toggled onto it on mouseover/mouseout (in rocket-atlas.js's wireHoverTooltips). Neither class had any rule anywhere in the project, so hovering a shape gave no cursor or visual feedback at all - the tooltip system worked, but nothing signaled it was there to find. */ .pa-hoverable { cursor: pointer; transition: opacity 0.15s ease; } .pa-shape-hovered { opacity: 1; filter: brightness(1.35); } /* ---------- Shared hover tooltip (.pa-tooltip) ---------- */ /* Single tooltip element, created once in rocket-atlas.js's ensureTooltipEl() and reused for both layer-toggle summaries and per-shape anatomy callouts (showTooltip/positionTooltip/hideTooltip). It is appended directly to and previously had NO ruleset anywhere in the project - not in this file, not in sequence.css, not in atlas-ui.css. With no `position` set, the `left`/`top` px values positionTooltip() writes inline had zero effect: the element simply sat in normal document flow as the last child of . That's a plausible contributor to sitewide page-length/scroll-drift symptoms (an unstyled block appearing at the bottom of the document on first hover), separate from - but consistent with - the overlap bug the layout task is fixing. This adds the missing ruleset, using the new --z-tooltip token and mirroring sequence.css's `.atlas-hover-tooltip` visual language so both tooltip systems read as one family. */ .pa-tooltip { position: fixed; z-index: var(--z-tooltip); pointer-events: none; max-width: 260px; background: rgba(6, 10, 20, 0.95); border: 1px solid var(--panel-border-strong); border-radius: var(--radius-sm); padding: 0.55rem 0.8rem; font-size: 0.75rem; line-height: 1.4; color: var(--text-color); backdrop-filter: blur(8px); box-shadow: var(--shadow-sm), 0 0 12px rgba(var(--color-accent-rgb), 0.15); } .pa-tooltip[hidden] { display: none; } .pa-tooltip strong { display: block; margin-bottom: 0.2rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; } .pa-tooltip span { display: block; color: var(--text-muted); } /* ---------- PoseRenderer size presets ---------- */ .pose-render-hint { filter: drop-shadow(0 0 2px rgba(0, 240, 255, 0.4)); } .pose-render-card { filter: drop-shadow(0 0 3px rgba(0, 240, 255, 0.45)); } .pose-render-detail { filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.5)); }