/* spinal/ — ultrasound section styles. Every selector starts with .spinal-app .us- or #us-.
   The scan image is black and the diagram is the printed plate in both themes; the frame and controls follow the theme. */

/* ---------------------------------------------------------------- viewer frame */
.spinal-app .us-viewer{margin:28px 0 40px}
.spinal-app .us-top{margin:0 0 10px}
.spinal-app .us-panels{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:14px}
.spinal-app .us-panel{min-width:0;margin:0}
.spinal-app .us-panel-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;margin:0 0 6px;font:500 14px/1.4 var(--sp-sans);color:var(--sp-ink)}
.spinal-app .us-panel-note{font:400 12px/1.4 var(--sp-mono);letter-spacing:.02em;color:var(--sp-muted)}
.spinal-app .us-cvwrap{position:relative;width:100%;aspect-ratio:170/104;background:var(--us-bg);border:1px solid var(--sp-line)}
.spinal-app .us-panel--diagram .us-cvwrap{background:var(--an-plate)}
.spinal-app .us-cv{display:block;width:100%;height:100%;touch-action:manipulation}
@media (min-width:1100px){
  .spinal-app .us-panels{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .spinal-app .us-showseg{display:none}
}
@media (max-width:1099.98px){
  .spinal-app .us-panels[data-show=scan] .us-panel--diagram,
  .spinal-app .us-panels[data-show=diagram] .us-panel--scan{display:none}
}

/* ---------------------------------------------------------------- controls */
.spinal-app .us-ctlrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%}
.spinal-app .us-ctlrow--view[data-view=pso]{display:none}
.spinal-app .us-ctlrow--view{padding-top:2px}
.spinal-app .us-tog{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border:1px solid var(--sp-line-strong);border-radius:0;background:transparent;color:var(--sp-ink);font:14px/1.3 var(--sp-sans);cursor:pointer;transition:border-color .15s,background-color .15s}
.spinal-app .us-tog:hover:not(:disabled){border-color:var(--sp-accent)}
.spinal-app .us-tog[aria-pressed=true]{background:var(--sp-accent-soft);border-color:var(--sp-accent)}
.spinal-app .us-tog:disabled{opacity:.5;cursor:not-allowed}
.spinal-app .us-tog[hidden]{display:none}
.spinal-app .us-tog-box{position:relative;flex:none;width:14px;height:14px;border:1.5px solid var(--sp-line-strong);background:var(--sp-bg)}
.spinal-app .us-tog[aria-pressed=true] .us-tog-box{background:var(--sp-accent);border-color:var(--sp-accent)}
.spinal-app .us-tog[aria-pressed=true] .us-tog-box::after{content:'';position:absolute;left:3.5px;top:0.5px;width:4px;height:8px;border:solid var(--sp-on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.spinal-app .us-stopctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.spinal-app .us-stopctl[hidden],.spinal-app .us-tmodeseg[hidden]{display:none}
.spinal-app .us-ctl-label{font:400 12px/1.4 var(--sp-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--sp-muted)}
.spinal-app .us-slide{white-space:nowrap}
.spinal-app .us-calna{align-self:center;font-size:14px;line-height:1.4;color:var(--sp-muted);max-width:32ch}
.spinal-app .us-calna[hidden]{display:none}
.spinal-app .us-calnote{margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--sp-accent);background:var(--sp-accent-soft);font-size:14px;line-height:1.6;color:var(--sp-ink);max-width:80ch}
.spinal-app .us-calnote[hidden]{display:none}

/* ---------------------------------------------------------------- under the images */
.spinal-app .us-under{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:16px;padding-top:16px;border-top:1px solid var(--sp-line)}
@media (min-width:700px){.spinal-app .us-under{grid-template-columns:200px minmax(0,1fr)}.spinal-app .us-structs{grid-column:1/-1}}
@media (min-width:1100px){.spinal-app .us-under{grid-template-columns:200px minmax(0,1fr) minmax(0,1.15fr)}.spinal-app .us-structs{grid-column:auto}}
.spinal-app .us-mini-h{font:600 12px/1.4 var(--sp-sans);text-transform:uppercase;letter-spacing:.08em;color:var(--sp-muted);margin:0 0 8px}
.spinal-app .us-info{font-size:15px;line-height:1.65}
.spinal-app .us-info p{margin:0 0 10px}
.spinal-app .us-view-info[hidden]{display:none}
.spinal-app .us-view-info:focus{outline:none}
.spinal-app .us-view-info:focus-visible{outline:2px solid var(--sp-focus);outline-offset:3px}

/* probe schematic */
.spinal-app .us-probe{min-width:0}
.spinal-app .us-sv-wrap{width:100%;max-width:200px}
.spinal-app .us-sv{display:block;width:100%;height:auto}
.spinal-app .us-sv-body{fill:var(--sp-surface-2);stroke:var(--sp-line-strong);stroke-width:1}
.spinal-app .us-sv-line{fill:none;stroke:var(--sp-line-strong);stroke-width:1.5}
.spinal-app .us-sv-dash{stroke:var(--sp-muted);stroke-width:1;stroke-dasharray:3 3}
.spinal-app .us-sv-mid{stroke:var(--sp-line-strong);stroke-width:1;stroke-dasharray:2 3}
.spinal-app .us-sv-sac{fill:var(--sp-surface);stroke:var(--sp-ink);stroke-width:1}
.spinal-app .us-sv-sp{fill:var(--sp-surface);stroke:var(--sp-ink);stroke-width:1.2}
.spinal-app .us-sv-t{font:400 12px var(--sp-mono);fill:var(--sp-muted)}
.spinal-app .us-sv-probe{transition:transform .2s ease}
.spinal-app .us-sv-probe-body{fill:var(--sp-accent);stroke:var(--sp-ink);stroke-width:.8}
.spinal-app .us-sv-marker{fill:var(--sp-on-accent)}
.spinal-app .us-sv-tilt path{fill:none;stroke:var(--sp-accent);stroke-width:1.3;stroke-linejoin:miter}
.spinal-app .us-probe-cap{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--sp-muted)}

/* structure list */
.spinal-app .us-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}
.spinal-app .us-list li{margin:0}
.spinal-app .us-item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 10px;border:1px solid var(--sp-line);border-radius:0;background:transparent;color:var(--sp-ink);text-align:left;font:14px/1.3 var(--sp-sans);cursor:pointer;transition:border-color .15s,background-color .15s}
.spinal-app .us-item:hover,.spinal-app .us-item.us-item--hi{border-color:var(--sp-accent);background:var(--sp-accent-soft)}
.spinal-app .us-item[aria-pressed=true]{border-color:var(--sp-accent);background:var(--sp-accent-soft);border-left:3px solid var(--sp-accent);padding-left:8px;font-weight:500}
.spinal-app .us-item-code{flex:none;min-width:40px;padding:2px 4px;border:1px solid var(--sp-line-strong);font:500 12px/1.4 var(--sp-mono);text-align:center;color:var(--sp-muted)}
.spinal-app .us-desc{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--sp-muted);min-height:3.2em}
.spinal-app .us-desc strong{color:var(--sp-ink)}

/* ---------------------------------------------------------------- prose */
.spinal-app .us-prose{max-width:68ch}
.spinal-app .us-evidence{max-width:940px}
.spinal-app .us-bullets{margin:0 0 16px;padding-left:1.2em}
.spinal-app .us-bullets li{margin:0 0 4px}
.spinal-app .us-note{font-size:14px;color:var(--sp-muted)}

@media (max-width:760px){
  .spinal-app .us-panels{padding:10px}
  .spinal-app .us-viewer{margin:20px 0 32px}
}
.spinal-app .us-anchor{display:block;height:0;overflow:hidden}
.spinal-app .us-anchor[hidden]{display:none}
.spinal-app .us-anchor:focus{outline:none}
.spinal-app .us-sv-tilt text,.spinal-app .us-sv-t{paint-order:stroke;stroke:var(--sp-surface-2);stroke-width:3px;stroke-linejoin:round}

/* ------------------------------------------------------------------ real scans (shared viewer: shared/regional/js/realscan.js)
   The viewer brings its own realscan.css; these rules only fit it into the spinal page (its main p / ul margins and
   the engine's tb-btn, which this page does not load). The overlay colours are the clinical code: never recoloured. */
.spinal-app .us-real{max-width:none}
.spinal-app .us-real-pick{margin:0 0 14px}
.spinal-app .us-real-host{max-width:980px;margin:0 0 8px}
.spinal-app .us-real-status{font-size:15px;color:var(--sp-muted)}
.spinal-app main .ra-rs :is(p,ul,ol){max-width:none}
.spinal-app main .ra-rs .ra-rs-cap p{margin:0 0 4px;max-width:70ch}
.spinal-app main .ra-rs :is(.ra-rs-keyk,.ra-rs-hint,.ra-rs-your-note,.ra-rs-name p){margin:0}
.spinal-app main .ra-rs ul.ra-rs-key{margin:0}
.spinal-app main .ra-rs .ra-rs-links a{color:var(--sp-accent)}
.spinal-app .ra-rs .tb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid var(--sp-line-strong);border-radius:0;background:transparent;color:var(--sp-ink);font:14px/1.3 var(--sp-sans);cursor:pointer}
.spinal-app .ra-rs .tb-btn:hover{border-color:var(--sp-accent);background:var(--sp-accent-soft)}
@media print{.spinal-app .ra-rs-your,.spinal-app .ra-rs-keywrap{display:none}}