/* Ventriculus Cardiac Exam: same family as the ECG Atlas (paper, serif headings, deep red ink). */
:root {
  color-scheme: light;
  --page: #f6f8fb; --sheet: #fff; --ink: #1d2a44; --ink-2: #4b5876; --ink-3: #7b86a0; --rule: #dde3ec;
  --paper: #fdeceb; --grid: #f3d2ce; --red: #c8102e; --blue: #3f6fb5; --amber: #b7791f; --green: #2f7d4f;
  --insp: rgba(63, 111, 181, 0.08);
  --f-display: "Young Serif", Georgia, "Times New Roman", serif;
  --f-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.5 var(--f-body); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums }
button, input, select { font: inherit; color: inherit }
a { color: inherit }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px }
.wrap { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); max-width: 1440px; margin: 0 auto }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.muted { color: var(--ink-3) }
.grow { flex: 1 }

.banner { background: var(--ink); color: #e7ecf5; font-size: 14px }
.banner-in { display: flex; align-items: center; gap: 14px; padding-block: 8px; flex-wrap: wrap }
.brand { text-decoration: none; display: inline-flex; gap: 9px; align-items: center; color: #fff; font: 19px var(--f-display); white-space: nowrap }
.brand svg { width: 30px; height: 18px }
.brand b { font-weight: 400; color: #ff8fa3 }
.pill-beta { border: 1px solid #f0c36a; color: #f0c36a; border-radius: 999px; padding: 2px 10px; font-weight: 600; font-size: 12.5px }
.out { text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 4px 12px; font-weight: 600 }
.out:hover { background: #fff; color: var(--ink) }

.intro { padding-top: 28px; padding-bottom: 8px }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; margin: 0 }
h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.05 }
.lead { max-width: 70ch; color: var(--ink-2); font-size: 17px; margin: 10px 0 0 }

.lab { padding-top: 14px; padding-bottom: 40px }
.lesions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px }
.chip { border: 1px solid var(--rule); background: var(--sheet); border-radius: 999px; padding: 6px 13px; font-size: 14.5px; font-weight: 600; cursor: pointer; color: var(--ink-2) }
.chip:hover { border-color: var(--ink-3); color: var(--ink) }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink) }

.lab-grid { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 14px; align-items: start }
.col-left, .col-right { display: grid; gap: 14px; min-width: 0 }
.card { background: var(--sheet); border-radius: 14px; box-shadow: 0 0 0 1px var(--rule); padding: 14px }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; flex-wrap: wrap }
.card-h h3 { font-size: 20px }
.card-h .muted { font-size: 13.5px }

#torso { width: 100%; height: auto; display: block; touch-action: manipulation; max-height: 520px }
.anat .skin { fill: #f3ece6; stroke: #c9b8ac; stroke-width: 1.5 }
.anat .rib { fill: #e9ddd2; stroke: #c2ad9c; stroke-width: .8 }
.anat .cart { fill: #f1e7de; stroke: #cdbbad; stroke-width: .8 }
.anat .clav, .anat .stern { fill: #e6d7ca; stroke: #b39d8b; stroke-width: 1 }
.anat .heart { fill: rgba(200,16,46,.08); stroke: rgba(200,16,46,.5); stroke-dasharray: 4 3; stroke-width: 1.2 }
#bodymap .anat .skin { stroke-width: 4 }
#bodymap .anat .heart { stroke-width: 3; stroke-dasharray: 10 6 }
.anno { font: 600 10px var(--f-body); fill: #9a8577 }
.anno-l { stroke: #a8907e; stroke-width: 1.2 }
.bedside { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start }
#bodymap { width: 96px; height: auto; display: block }
#bodymap .pt { cursor: pointer }
#bodymap .pt circle.hit { fill: transparent }
#bodymap .pt circle.dot { fill: var(--sheet); stroke: var(--ink-2); stroke-width: 7 }
#bodymap .pt.on circle.dot { fill: var(--red); stroke: var(--red) }
#bodymap .pt:hover circle.dot { stroke: var(--red) }
#torso .pt { cursor: pointer }
#torso .pt circle.hit { fill: transparent }
#torso .pt circle.dot { fill: var(--sheet); stroke: var(--ink-2); stroke-width: 2; transition: r .2s }
#torso .pt text { font: 600 11px var(--f-body); fill: var(--ink-2); pointer-events: none }
#torso .pt:hover circle.dot { stroke: var(--red) }
#torso .pt.on circle.dot { fill: var(--red); stroke: var(--red); r: 9 }
#torso .pt.on text { fill: var(--red) }
#torso .pt:focus-visible { outline: none }
#torso .pt:focus-visible circle.dot { stroke: var(--red); stroke-width: 3 }

.ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 10px }
.ctl-l { width: 100%; font-size: 13px; font-weight: 700; color: var(--ink-3) }
.seg { border: 1px solid var(--rule); background: var(--page); border-radius: 8px; padding: 5px 10px; font-size: 14px; cursor: pointer; color: var(--ink-2) }
.seg:hover { color: var(--ink); border-color: var(--ink-3) }
.seg[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink) }
.man-note { font-size: 13.5px; margin: 2px 0 0; min-height: 20px }

.strip-card { padding: 10px 10px 6px }
.strip-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 2px 4px 8px }
.play { background: var(--red); color: #fff; border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 700; cursor: pointer }
.play[aria-pressed="true"] { background: var(--ink) }
.vol, .chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2) }
.vol input { width: 110px; accent-color: var(--red) }
.chk input { accent-color: var(--red) }
.vitals { font-size: 14px; color: var(--ink-2) }
.vitals b { color: var(--ink) }
#strip { width: 100%; height: 360px; display: block; border-radius: 10px; background: var(--paper) }

.duo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px }
.findings { font-size: 15px }
.findings h4 { margin: 10px 0 2px; font-size: 14px; color: var(--ink-3); font-weight: 700 }
.findings ul { margin: 0; padding-left: 18px }
.findings li { margin: 4px 0 }
.findings .g { display: inline-block; min-width: 34px; text-align: center; border-radius: 6px; background: var(--paper); color: var(--red); font-weight: 700; font-size: 13px; padding: 0 5px; margin-right: 4px }
.findings .tip { background: #fff7e6; border-radius: 8px; padding: 6px 9px; font-size: 14px; margin-top: 8px; color: #6b4a10 }
.findings.hidden .ans { filter: blur(6px); user-select: none }
.findings .delta-up { color: var(--red); font-weight: 700 }
.findings .delta-dn { color: var(--blue); font-weight: 700 }

.neckpulse { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: start }
#neck { width: 110px; height: auto }
.pulse { font-size: 14.5px }
.pulse p { margin: 0 0 8px }
.pulse b { display: block; font-size: 13px; color: var(--ink-3) }

.foot { padding-bottom: 32px; font-size: 14px; color: var(--ink-2) }
.foot p { margin: 4px 0; max-width: 90ch }

@media (max-width: 980px) {
  .lab-grid { grid-template-columns: 1fr }
  .col-left { grid-template-columns: 1fr 1fr }
  .duo { grid-template-columns: 1fr }
}
@media (max-width: 640px) {
  .col-left { grid-template-columns: 1fr }
  #strip { height: 300px }
  .neckpulse { grid-template-columns: 90px 1fr }
  #neck { width: 90px }
}

/* modes and guide */
.modes { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap }
.modes .chip { font-size: 15px; padding: 7px 15px }
.modes .chip[aria-pressed="true"] { background: var(--red); border-color: var(--red) }
.guide { border-left: 0; box-shadow: 0 0 0 1px var(--rule), inset 4px 0 0 #f0c36a; padding: 16px 18px }
.guide h3 { font-size: 24px; margin: 4px 0 6px }
.guide p { margin: 0 0 6px; max-width: 80ch; font-size: 16px }
.guide ul { margin: 4px 0 0; padding-left: 18px; color: var(--ink-2) }
.g-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap }
.g-k { font-size: 13px; font-weight: 700; color: var(--amber) }
.g-dots { display: flex; gap: 5px }
.g-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--rule); padding: 0; cursor: pointer }
.g-dot.on { background: var(--amber) }
.g-nav { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap }
.g-nav .seg:disabled { opacity: .4; cursor: default }
.g-hint { font-size: 13.5px }
.g-ans { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.g-ok { color: var(--green) } .g-no { color: var(--red) }