/* Pressure and time stay in SVG coordinates; the compact and expanded views
   use different viewBoxes so individual pulse phases remain legible. */
#arterial-waveform{grid-column:1/-1;min-width:0;margin-top:12px}
.wave-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;font-weight:500}
.wave-heading button{flex:none;min-width:32px;min-height:30px;font-size:18px;color:var(--soft);border-radius:5px}
.wave-heading button:hover{background:var(--faint);color:var(--ink)}
#arterial-waveform svg{display:block;width:100%;height:160px;overflow:visible}
.wave-key{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:10px;color:var(--soft);line-height:1.5}
.wave-key span:before{content:'';display:inline-block;width:18px;border-top:2px dashed #7f9099;vertical-align:middle;margin-right:6px}
.wave-key span+span:before{border-top:2px solid var(--arterial-color)}
.wave-axis{fill:none;stroke:var(--soft);stroke-width:1;opacity:.55}
.wave-grid{fill:none;stroke:var(--line);stroke-width:1}
.wave-aorta{fill:none;stroke:#7f9099;stroke-width:1.7;stroke-dasharray:5 3;stroke-linejoin:round;stroke-linecap:round}
.wave-radial{fill:none;stroke:var(--arterial-color);stroke-width:2.3;stroke-linejoin:round;stroke-linecap:round}
.wave-phase{fill:var(--venous-color);opacity:.075;stroke:none}
.wave-event{fill:none;stroke:var(--venous-color);stroke-width:1;stroke-dasharray:3 4;opacity:.7}
.wave-chart text,#wave-dialog svg text{font-family:inherit;font-size:11px;fill:var(--soft)}
.wave-chart .wave-event-label,#wave-dialog svg .wave-event-label{font-size:10px;fill:var(--venous-color)}
.wave-chart .wave-annotation,#wave-dialog svg .wave-annotation{fill:var(--ink);font-size:11px;font-weight:500}
#arterial-waveform .wave-values{font-size:10px;line-height:1.5;color:var(--soft);margin:2px 0 0;font-variant-numeric:tabular-nums}
.wave-live-note{font-size:10px;line-height:1.5;color:var(--soft);margin:5px 0 0}
#wave-dialog{box-sizing:border-box;position:fixed;inset:0;margin:auto;width:min(1080px,calc(100vw - 40px));height:fit-content;max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain;padding:24px 28px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:0 24px 100px #243c4633}
#wave-dialog[open]{display:block}
#wave-dialog::backdrop{background:#20343d59;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#wave-dialog header{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:18px;min-height:0;padding:0;border:0;margin:0 0 12px}
#wave-dialog h2{font-size:21px;line-height:1.35;letter-spacing:-.02em}
#wave-dialog header button{flex:none;font-size:28px;line-height:1;min-width:40px;min-height:40px;padding:0;border-radius:50%;color:var(--soft)}
#wave-dialog header button:hover{background:var(--faint);color:var(--ink)}
#wave-dialog .wave-key{font-size:12px}
#wave-dialog svg{display:block;width:100%;height:auto;min-height:240px;max-height:48dvh;margin:12px 0 8px;overflow:visible}
#wave-dialog svg text{font-size:13px}
#wave-dialog svg .wave-event-label{font-size:12px}
#wave-dialog svg .wave-annotation{font-size:13px}
#wave-dialog .wave-aorta{stroke-width:2}
#wave-dialog .wave-radial{stroke-width:2.8}
#wave-dialog p{font-size:12px;line-height:1.65;margin:12px 0}
#wave-dialog .wave-values{font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink);margin:8px 0 14px}
#wave-dialog .wave-controls{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin:12px 0}
#wave-dialog label{font-size:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#wave-dialog select{font-size:12px;padding:7px 10px;min-height:34px}
#wave-dialog details{border-top:1px solid var(--line);margin-top:14px;padding-top:9px}
#wave-dialog summary{cursor:pointer;font-size:12px;line-height:1.6;padding:5px 0;color:var(--soft)}
#wave-dialog a{font-size:12px;color:var(--venous-color)}
#wave-dialog .wave-live-note{font-size:11px;color:var(--soft);margin:8px 0}
.wave-reading{font-size:12px;line-height:1.65;padding-left:20px}
.wave-reading li{margin:8px 0}
@media(max-width:600px){
 #arterial-waveform svg{height:150px}
 #wave-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:16px;border-radius:12px}
 #wave-dialog h2{font-size:18px}
 #wave-dialog svg{min-height:210px;max-height:none;margin:8px 0}
 #wave-dialog .wave-key{font-size:11px}
 #wave-dialog .wave-controls{align-items:stretch;gap:10px}
 #wave-dialog label{font-size:11px;gap:8px}
 #wave-dialog select{min-height:40px}
}
@media(prefers-reduced-motion:reduce){#wave-dialog{scroll-behavior:auto}}