/* 高品質 CPR 與 AED module. Shares the h3d layout (topics row, stage + side text) from style.css. */
.cpr .h3d-topic-text h3 { font-size: 16px; margin: 14px 0 4px; }
.cpr-cite { margin-left: 2px; color: var(--muted); font-size: 12px; }
.cpr-cite.is-block { display: block; margin: -4px 0 8px; }
@media (max-width: 900px) { .cpr .h3d-layout > .h3d-info { order: -1; } }
.cpr-fold { margin: 10px 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.cpr-fold > summary { cursor: pointer; font-weight: 600; min-height: 32px; display: list-item; }
.cpr-fold.is-deeper > summary { color: var(--ink-2); }

.cpr-svg { display: block; width: 100%; height: auto; }
.cpr-skin { fill: #f0d2bd; stroke: #b98b6e; stroke-width: 2; }
.cpr-ribs path { fill: none; stroke: #c9a189; stroke-width: 1.5; opacity: .7; }
.cpr-bone { fill: #f7f1e6; stroke: #a9977e; stroke-width: 2; }
path.cpr-bone { fill: none; stroke-width: 5; stroke-linecap: round; }
.cpr-nipple { fill: #c48a74; }
.cpr-nipline { stroke: #8a5a44; stroke-width: 1.5; stroke-dasharray: 4 4; }
.cpr-target { fill: rgba(31, 95, 191, .25); stroke: #1f5fbf; stroke-dasharray: 4 3; }
.cpr-hand { fill: rgba(31, 95, 191, .18); stroke: #1f5fbf; stroke-width: 2; }
.cpr-note { font-size: 14px; font-weight: 600; fill: #14181f; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.cpr-epad { pointer-events: none; }
.cpr-epad rect { fill: #e9edf2; stroke: #3d4654; stroke-width: 2; }
.cpr-epad text { font-size: 16px; font-weight: 700; text-anchor: middle; fill: #14181f; }
.cpr-spot { cursor: pointer; }
.cpr-spot circle { fill: rgba(255, 255, 255, .01); stroke: #1f5fbf; stroke-width: 2; stroke-dasharray: 5 4; }
.cpr-spot .cpr-spot-dot { fill: #1f5fbf; stroke: none; }
.cpr-spot:hover circle:first-child { fill: rgba(31, 95, 191, .18); stroke-dasharray: none; }
.cpr-spot:focus-visible circle:first-child { fill: rgba(31, 95, 191, .25); stroke: #14181f; stroke-width: 4; stroke-dasharray: none; }
.cpr-spot:focus { outline: none; }
.cpr-surface { fill: #8a929e; }
.cpr-wall { fill: none; stroke: #b98b6e; stroke-width: 4; }
.cpr-arm { stroke: #b98b6e; stroke-width: 12; stroke-linecap: round; }
.cpr-ruler line { stroke: var(--ink-2); stroke-width: 2; }
.cpr-ruler text { font-size: 12px; fill: var(--ink-2); }
.cpr-band { fill: rgba(29, 92, 52, .35); }
.cpr-press { transition: transform .12s ease-in; }
.cpr-press.is-down { transform: translateY(var(--press)); }
@media (prefers-reduced-motion: reduce) { .cpr-press { transition: none; } }

.cpr-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cpr-figs figure { margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.cpr-figs figcaption { font-size: 14px; color: var(--ink-2); text-align: center; }
.cpr-side { cursor: pointer; max-width: 420px; margin: 8px auto; }

.cpr-trainer, .cpr-aed, .cpr-quiz { display: grid; gap: 10px; }
.cpr-modes, .cpr-aed-pick, .cpr-pads { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cpr-modes .button, .cpr-aed-pick .button { white-space: normal; }
/* The chosen option is shown by colour and by a check mark. */
:is(.cpr-modes, .cpr-aed-pick, .cpr-pads) .button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
:is(.cpr-modes, .cpr-aed-pick, .cpr-pads) .button[aria-pressed="true"]::before { content: "✓ "; }
.cpr-demo { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.cpr-demo:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cpr-pad { min-height: 140px; border: 2px dashed var(--accent); border-radius: 10px; background: var(--accent-soft); color: var(--ink); font-size: 18px; font-weight: 700; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.cpr-pad small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-2); }
.cpr-pad:active { background: var(--surface); }
.cpr-readout { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.cpr-readout div { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.cpr-readout dt { font-size: 12px; color: var(--muted); }
.cpr-readout dd { margin: 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cpr-judge { margin: 0; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--line); font-weight: 600; }
.cpr-judge.is-ok { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.cpr-judge.is-warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.cpr-judge.is-error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.cpr-limit, .cpr-hint, .cpr-more { font-size: 13px; color: var(--muted); margin: 0; }
.cpr-summary { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.cpr-summary h3 { margin: 0 0 6px; font-size: 16px; }

.cpr-aed-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; align-items: start; }
.cpr-aed-body { padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.cpr-aed-device { padding: 12px; border-radius: 12px; background: #2f3a48; color: #e8ebf0; display: grid; gap: 10px; }
.cpr-aed-screen { margin: 0; min-height: 84px; padding: 10px; border-radius: 6px; background: #10151c; color: #8a929e; font-size: 15px; }
.cpr-aed-device.is-on .cpr-aed-screen { color: #9fe0b5; }
.cpr-aed-keys { display: flex; gap: 10px; justify-content: space-between; }
.cpr-key { flex: 1; min-height: 56px; border-radius: 28px; border: 2px solid #c3c9d3; background: #46536a; color: #fff; font-size: 16px; font-weight: 700; }
.cpr-key.is-power { background: #1d5c34; }
.cpr-key.is-shock { background: #b42318; }
.cpr-key:disabled { opacity: .4; }
.cpr-aed-cpr { margin: 0; font-size: 14px; }
.cpr-acts { flex-wrap: wrap; }

.cpr-cards { display: grid; gap: 10px; }
.cpr-card { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.cpr-card legend { padding: 0 4px; font-weight: 600; line-height: 1.5; }
.cpr-card-n { display: inline-block; min-width: 22px; margin-right: 6px; text-align: center; border-radius: 11px; background: var(--ink); color: var(--surface); font-size: 13px; }
.cpr-choices { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.cpr-choices .button { text-align: left; white-space: normal; max-width: 100%; }
.cpr-card { min-width: 0; }
.cpr-choices .is-right { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); opacity: 1; }
.cpr-choices .is-wrong { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); opacity: 1; }
.cpr-why { margin: 4px 0 0; font-size: 14px; }
.cpr-score { font-weight: 700; }

@media (max-width: 720px) {
  .cpr-figs, .cpr-aed-row { grid-template-columns: 1fr; }
  .cpr-readout { grid-template-columns: repeat(2, 1fr); }
}