/* figanim — controls and caption bar for the step-by-step diagrams (see figanim.js).
   The host replaces the <img> in place and keeps its box, so nothing shifts. */
.fa-host { display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; }
.fa-host > svg { display: block; width: 100%; height: auto; max-width: inherit; overflow: visible; }
.fig-diagram .fa-host > svg { max-width: 34rem; }

.fa-bar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; margin-top: .6rem; min-height: 2.75rem;
  font: 500 .8rem/1.4 var(--sans, system-ui, sans-serif);
  color: var(--ink-2, #6b6b6b);
}
.fa-cap { margin: 0; flex: 1; text-align: left; color: var(--fig-ink, #2b2b2b); }
.fa-cap[hidden] { display: block; visibility: hidden; }
.fa-ctl { display: flex; align-items: center; gap: .15rem; margin-left: auto; opacity: .55; transition: opacity .2s; }
.fa-host:hover .fa-ctl, .fa-host:focus-within .fa-ctl, .fa-host[data-fa-state="partial"] .fa-ctl { opacity: 1; }
.fa-btn {
  appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer;
  min-width: 2.75rem; min-height: 2.75rem; border-radius: 999px; font: inherit; font-size: 1.05rem; line-height: 1;
}
.fa-btn:hover:not(:disabled) { background: color-mix(in srgb, currentColor 10%, transparent); color: var(--fig-ink, #2b2b2b); }
.fa-btn:focus-visible { outline: 2px solid var(--accent, #4e7191); outline-offset: 1px; }
.fa-btn:disabled { opacity: .35; cursor: default; }
.fa-count { min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; }

/* a figure being built is not a zoom target until it is complete */
.fa-host[data-fa-state="partial"] > svg { cursor: default; }

/* thumbnails and dialogs that should stay quiet */
[data-fa-nobar] .fa-bar { display: none; }

@media (prefers-reduced-motion: reduce) { .fa-ctl { transition: none; } }

/* reader: zoom like the static figure once complete; the lightbox copy rebuilds itself */
.book-figure .fa-host[data-fa-state="done"] > svg { cursor: zoom-in; }
.lightbox .fa-host {
  width: min(94vw, 64rem); max-height: 92vh; padding: 1.5rem 1.5rem .5rem;
  background: var(--fig-paper, #f7f4ef); border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.lightbox .fa-host > svg { max-width: 100%; max-height: 78vh; padding: 0; background: none; box-shadow: none; border-radius: 0; }

/* website surfaces: the inline SVG takes the box the <img> had */
.part__fig .fa-host { flex: 1; min-height: 0; }
.part__fig .fa-host > svg { height: 100%; }
.figpage__art .fa-host > svg { box-sizing: border-box; background: var(--paper-light); border: 1px solid var(--rule); padding: clamp(16px, 3vw, 40px); }
.figpage__art .fa-bar, .post-fig .fa-bar, .figdlg .fa-bar { font-family: inherit; font-size: .9375rem; }
.figpage__art .fa-count, .post-fig .fa-count, .figdlg .fa-count, .fig .fa-count { font-family: var(--f-mono, monospace); font-size: .8125rem; }
.figdlg .fa-host > svg { max-height: calc(92vh - 190px); padding: clamp(16px, 4vw, 40px) clamp(16px, 4vw, 40px) 0; box-sizing: border-box; }
.figdlg .fa-bar { padding: 0 clamp(16px, 4vw, 40px); box-sizing: border-box; }
/* lecture decks */
.fig .fa-host { flex: 1 1 0; min-height: 0; }
.fig .fa-host > svg { height: 100%; min-height: 0; }
.fig .fa-bar { min-height: 0; margin-top: 0; font-size: 16px; }
.lightbox .fa-bar { font-size: 1rem; }