/* Shared, optional figure playback. No rest animation or scroll interception. */
.figure-animation { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; min-width: 0; margin-top: 12px; padding: 12px 0 4px; border-top: 1px solid var(--line-soft, #dfe6ed); color: var(--ink, #14202d); font: inherit; }
.figure-animation-controls { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.figure-animation button, .figure-animation select { box-sizing: border-box; min-width: 44px; min-height: 44px; border: 1px solid var(--line, #c7d2de); border-radius: var(--radius-small, 8px); padding: 9px 12px; background: var(--surface-raised, #f7f9fc); color: var(--ink, #14202d); font: inherit; font-size: 13px; font-weight: 500; line-height: 1.3; }
.figure-animation button { cursor: pointer; }
.figure-animation select { appearance: none; -webkit-appearance: none; height: 44px; }
.figure-animation [data-animation-action="play"] { min-width: 72px; color: var(--accent-ink, #fff); background: var(--accent, #204c80); border-color: var(--accent, #204c80); }
.figure-animation button:disabled, .figure-animation select:disabled { cursor: default; opacity: .5; }
.figure-animation button:focus-visible, .figure-animation select:focus-visible, .figure-animation input:focus-visible { outline: 2px solid var(--focus, #1d63ad); outline-offset: 3px; }
.figure-animation-speed { display: flex; align-items: center; gap: 6px; color: var(--muted, #586778); font-size: 12px; }
.figure-animation-speed, .figure-animation-format { position: relative; }
.figure-animation-speed::after, .figure-animation-format::after { content: ''; position: absolute; right: 8px; top: 16px; width: 12px; height: 12px; pointer-events: none; background: currentColor; mask: url('../../../assets/images/icons/arrow-down.svg?v=a63cdbe7d2975510') center / contain no-repeat; }
.figure-animation-speed select { width: 75px; padding-right: 22px; }
.figure-animation-export { display: flex; align-items: center; gap: 6px; min-width: 0; }
.figure-animation-export select { width: 76px; padding-right: 20px; }
.figure-animation input[type="range"] { box-sizing: border-box; display: block; width: 100%; min-width: 0; height: 44px; margin: 0; accent-color: var(--accent, #204c80); cursor: pointer; }
.figure-animation-readout { align-self: center; max-width: 220px; color: var(--ink, #14202d); font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: right; }
.figure-animation .suite-help { margin-left: auto; }
.figure-animation-status { grid-column: 1 / -1; margin: 0; color: var(--muted, #586778); font-size: 12px; overflow-wrap: anywhere; }
.figure-animation-status:empty { display: none; }
.figure-animation progress { grid-column: 1 / -1; width: 100%; height: 8px; accent-color: var(--accent, #204c80); }
.figure-animation-preview { min-width: 0; max-width: 100%; overflow-x: auto; background: white; }
.figure-animation-preview > svg { display: block; max-width: 100%; height: auto; pointer-events: none; }
.figure-animation [hidden], .figure-animation-preview[hidden] { display: none !important; }
@media (hover: hover) { .figure-animation button:not(:disabled):hover { border-color: var(--accent, #204c80); } }
.figure-animation button:not(:disabled):active { transform: scale(.985); }
@media (max-width: 480px) { .figure-animation { grid-template-columns: minmax(0, 1fr); } .figure-animation-readout { justify-self: end; max-width: 100%; } .figure-animation-controls { gap: 6px; } .figure-animation button { padding-inline: 10px; } .figure-animation select { font-size: 16px; } }
@media (pointer: coarse) { .figure-animation select { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .figure-animation button:not(:disabled):active { transform: none; } }
@media (forced-colors: active) { .figure-animation button, .figure-animation select { border: 1px solid ButtonText; } .figure-animation [data-animation-action="play"] { color: ButtonText; background: ButtonFace; } }
@media print { .figure-animation, .figure-animation-preview { display: none !important; } }