Every shared component rendered in one place. If a module page looks off, diff it against this page. Changes to public/styles/medtopo.css?v=17 or public/scripts/medtopo.js?v=17 should be visually verified here first.
CSS custom properties defined in :root. Reach for these — never hard-code hex.
Body copy (body, 15.5px, line-height 1.58). Use .mono for numbers: pNa 118 mEq/L. Inline keyboard keys like ⌘K use .kbd.
h4 is the smallest auto-styled header; use it for sub-blocks inside a card or grid cell.
The stage-tab bar is the universal top nav inside a module page.
Used everywhere. Use .card-elevated to bump shadow depth.
Equal-width 2-col.
.card-elevated shadow.
Left-rule emphasis blocks. Default uses --accent; colored modifiers override.
| Fluid | Tonicity | Na (mEq/L) | ICV Δ | ECV Δ |
|---|---|---|---|---|
| 0.9% NaCl | Isotonic | 154 | 0 | +1000 |
| D5W | Hypotonic | 0 | +667 | +333 |
| 3% NaCl | Hypertonic | 513 | −800 | +1800 |
| LR | Balanced | 130 | +50 | +950 |
Used on fluid cards and in tables to label tonicity / family.
The buttons below are hooked up via the exact convention every module uses: .journey-btn[data-stage="X"] toggles section.stage[id="stage-X"]. Click through to confirm medtopo.js is active. Press 1–3 to test keyboard shortcuts.
Stage α content. If you see this, medtopo.js rendered the default active stage correctly.
Stage β content — only visible when Beta is active.
Stage γ content — the url hash should update on switch.
.mt-10 / .mt-14 / .mt-20 — margin-top spacers.
.text-aqua · .text-teal · .text-rose · .text-gold · .text-emerald · .text-muted
Everything here is zero-config. Drop the markup in — medtopo.js finds and wires it.
| Markup | Behavior |
|---|---|
| #globalSidebar | Collapse toggle is injected top-right; state persists in localStorage per page. |
| .journey-btn[data-stage=X] | Activates section.stage#stage-X; deactivates siblings. |
| .gs-sub-link[data-sub=X] | Same as above but from the sidebar; marks itself .active. |
| body[data-keys="1-6,/"] | Numeric keys switch stages in order; / focuses search (if #search exists). |
| [data-spy-container] / [data-spy-link] / [data-spy-target] | Scroll-spy: links auto-highlight based on target visibility. |