/* Scoped teaching figures. Color values inherit the Cardiology Guide palette. */
.co-refresh {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--rule-hair);
  border-radius: 7px;
  background: var(--paper);
  color: var(--ink);
  break-inside: avoid;
}
.co-refresh .co-refresh-title { display: block; margin: 0 0 7px; color: var(--guide-red-deep); font-size: 1.08em; }
.co-refresh .co-refresh-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; align-items: center; }
.co-refresh .co-refresh-body > * { min-width: 0; }
.co-refresh svg { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink); }
.co-refresh svg text { fill: var(--ink); font: 16px system-ui, sans-serif; }
.co-refresh svg .co-refresh-small { font-size: 14px; }
.co-refresh .co-refresh-ink { fill: var(--ink-2); }
.co-refresh .co-refresh-red { fill: var(--guide-red-deep); }
.co-refresh .co-refresh-paper { fill: var(--paper); }
.co-refresh .co-refresh-tint { fill: var(--tint); }
.co-refresh .co-refresh-rule { stroke: var(--ink-3); fill: none; stroke-width: 1.5; }
.co-refresh .co-refresh-arrow { stroke: var(--guide-red-deep); fill: none; stroke-width: 2.5; }
.co-refresh .co-refresh-outline { fill: none; stroke: var(--guide-red-deep); stroke-width: 2; }
.co-refresh .co-refresh-focus { fill: none; stroke: var(--rule-hair); stroke-width: 1.5; }
.co-refresh [data-co-step].is-current .co-refresh-focus { stroke: var(--guide-red-deep); stroke-width: 3; }
.co-refresh .co-refresh-trace { fill: none; stroke: var(--guide-red-deep); stroke-width: 3; stroke-dasharray: 7 6; }
.co-refresh[data-co-playing="true"] .is-current .co-refresh-trace { animation: co-refresh-flow 1.2s linear infinite; }
.co-refresh .co-refresh-steps { display: grid; gap: 5px; }
.co-refresh .co-refresh-step { padding: 6px 8px; border-left: 3px solid var(--rule-hair); background: var(--paper-warm); }
.co-refresh .co-refresh-step.is-current { border-left-color: var(--guide-red-deep); background: var(--tint); }
.co-refresh .co-refresh-step b { display: block; }
.co-refresh figcaption { margin-top: 7px; line-height: 1.4; }
.co-refresh .co-refresh-controls { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 8px; }
.co-refresh .co-refresh-controls[hidden] { display: none; }
.co-refresh .co-refresh-controls button { color: var(--ink); background: var(--paper); border: 1px solid var(--ink-3); border-radius: 4px; font: inherit; min-height: 36px; padding: 5px 12px; cursor: pointer; }
.co-refresh .co-refresh-controls button:focus-visible { outline: 3px solid var(--guide-red-deep); outline-offset: 2px; }
.co-refresh .co-refresh-controls button:disabled { cursor: default; opacity: .65; }
.co-refresh .co-refresh-status { color: var(--ink-3); }
.co-refresh .co-refresh-source { margin-top: 5px; font-size: .9em; }
.co-refresh .co-refresh-source a { color: var(--guide-red-deep); text-decoration: underline; overflow-wrap: anywhere; }
.co-refresh.co-refresh-pathology .co-refresh-body { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: start; }
.co-refresh.co-refresh-pathology img { display: block; width: 100%; height: auto; max-height: 440px; object-fit: contain; }
.co-refresh.co-refresh-pathology figcaption { margin-top: 0; }
@keyframes co-refresh-flow { to { stroke-dashoffset: -26; } }
@media screen and (max-width: 560px) {
  .co-refresh .co-refresh-body, .co-refresh.co-refresh-pathology .co-refresh-body { grid-template-columns: minmax(0, 1fr); }
  .co-refresh { padding: 10px; }
  .co-refresh .co-refresh-controls button { min-height: 44px; }
  .co-refresh.co-refresh-pathology img { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .co-refresh *, .co-refresh *::before, .co-refresh *::after { animation: none !important; transition: none !important; }
  .co-refresh [data-co-step] .co-refresh-focus { stroke: var(--guide-red-deep); stroke-width: 2; }
}
@media print {
  .co-refresh { margin: 5px 0; padding: 6px; font-size: 7.4pt; }
  .co-refresh *, .co-refresh *::before, .co-refresh *::after { animation: none !important; transition: none !important; }
  .co-refresh .co-refresh-controls { display: none !important; }
  .co-refresh .co-refresh-body { gap: 8px; }
  .co-refresh [data-co-step] .co-refresh-focus { stroke: var(--guide-red-deep); stroke-width: 2; }
  .co-refresh .co-refresh-step, .co-refresh .co-refresh-step.is-current { border-left-color: var(--guide-red-deep); background: var(--paper); }
  .co-refresh .co-refresh-trace { stroke-dasharray: none; }
  .co-refresh.co-refresh-pathology img { max-height: 300px; }
}