.cc-metabolic-figure {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 8px 16px;
  align-items: center;
  margin: 12px 0;
  padding: 10px;
  border: 1px solid var(--rule-hair);
  background: var(--paper-warm);
  color: var(--ink-2);
  break-inside: avoid;
}
.cc-metabolic-figure svg { width: 100%; height: auto; grid-row: 1 / span 2; overflow: visible; }
.cc-metabolic-figure svg rect { fill: var(--paper); stroke: var(--rule); }
.cc-metabolic-figure svg text { fill: var(--ink-2); font: 14px Arial, sans-serif; }
.cc-metabolic-figure svg .cc-svg-heading { font-size: 14px; font-weight: bold; }
.cc-metabolic-figure svg .cc-svg-small { font-size: 13px; }
.cc-metabolic-figure .cc-flow { fill: none; stroke: var(--guide-red-deep); stroke-width: 2; color: var(--guide-red-deep); }
.cc-metabolic-figure .cc-dot { fill: var(--guide-red-deep); animation: cc-metabolic-travel 2.8s linear infinite; animation-play-state: paused; }
.cc-metabolic-figure .cc-dot-delay { animation-delay: -1.4s; }
.cc-metabolic-figure[data-running="true"] .cc-dot { animation-play-state: running; }
.cc-metabolic-figure figcaption { margin: 0; font-size: 12px; line-height: 1.45; }
.cc-motion-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cc-motion-controls button { font: inherit; font-size: 12px; background: var(--paper); color: var(--ink-2); border: 1px solid var(--rule); border-radius: 4px; padding: 7px 9px; cursor: pointer; }
.cc-motion-controls button:focus-visible { outline: 3px solid var(--guide-red-deep); outline-offset: 2px; }
.cc-motion-controls button:disabled { cursor: default; }
.cc-motion-controls span { font-size: 11px; }
@keyframes cc-metabolic-travel { from { transform: translateX(0); } to { transform: translateX(51px); } }
@media (max-width: 600px) {
  .cc-metabolic-figure { grid-template-columns: minmax(0, 1fr); padding: 10px 6px; }
  .cc-metabolic-figure svg { grid-row: auto; }
  .cc-metabolic-figure figcaption, .cc-motion-controls button { font-size: 14px; }
  .cc-motion-controls button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .cc-metabolic-figure .cc-dot { animation: none; } }
@media print {
  .cc-motion-controls { display: none; }
  .cc-metabolic-figure svg { grid-row: auto; }
  .cc-metabolic-figure .cc-dot { animation: none !important; transform: translateX(25px); }
  .cc-metabolic-figure { margin: 8px 0; padding: 7px; }
}

/* Keep the two-column calcium emergency instructions fully visible on phones. */
@media screen and (max-width: 600px) {
  body[data-guide-id="electrolytes-acid-base"] .page table.cc-calcium-table { display: table; table-layout: fixed; width: 100%; max-width: 100%; overflow: visible; }
  body[data-guide-id="electrolytes-acid-base"] .page table.cc-calcium-table :is(th, td):first-child { width: 28% !important; }
  body[data-guide-id="electrolytes-acid-base"] .page table.cc-calcium-table :is(th, td):last-child { width: 72% !important; overflow-wrap: anywhere; }
  body[data-guide-id="diabetes-emergencies-sglt2"] .page table.cc-dka-precipitant-table { display: table; table-layout: fixed; width: 100%; max-width: 100%; overflow: visible; }
  body[data-guide-id="diabetes-emergencies-sglt2"] .page table.cc-dka-precipitant-table :is(th, td) { width: 50% !important; overflow-wrap: anywhere; }
}