/* ============================================================
 * Universal viz infrastructure — applies to every <d-figure data-viz>
 * regardless of which post owns it.
 *
 * If you find yourself adding post-specific selectors here, move them
 * to `src/styles/posts/<slug>.css` instead.
 * ============================================================ */

/* Viz figures.
 *
 * Posts mount viz via:
 *   <d-figure data-viz="ComponentName" id="fig-name">
 *     <figcaption>…</figcaption>
 *   </d-figure>
 *
 * The `d-figure[data-viz]` selector picks up only the interactive
 * figures, leaving plain image/video figures (which don't carry
 * data-viz) untouched.
 *
 * `min-width: 0` is the load-bearing rule. `<d-article>` is
 * `display: grid` and Distill assigns every direct child
 * `grid-column: text` (~720px). Grid items default to
 * `min-width: auto` which means "fit content" — so any inner flex
 * layout with non-shrinking children expands the grid track, pushing
 * the column wider than the viewport. Setting `min-width: 0` lets
 * the figure honor its assigned grid track.
 *
 * `overflow: clip` (not `hidden`): `hidden` creates a scroll
 * container which silently breaks `position: sticky` on the TOC
 * ancestor. `clip` prevents the scrollbar without that side-effect.
 */
d-figure[data-viz] {
  min-width: 0;
  max-width: 100%;
  margin: 2.5rem 0;
  overflow: clip;
  box-sizing: border-box;
  /* Blend into the page background by default — components opt
   * into card-style chrome inside themselves if they want it. */
  background: transparent;
  border: none;
  box-shadow: none;
}

/* React renders into this child node, not directly into <d-figure>.
 * Distill's <d-figure> custom element manages its own intersection-
 * observer state on the host; React's createRoot would clobber that
 * if it mounted into the host directly. See src/viz/index.js. */
d-figure[data-viz] > .viz-mount {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Safety net: force border-box on every viz subtree so `width: 100%`
 * + `padding` doesn't quietly overflow the assigned grid track. The
 * Distill template doesn't include a global `* { box-sizing }` reset
 * and several components rely on padding-inside-width. */
d-figure[data-viz] *,
d-figure[data-viz] *::before,
d-figure[data-viz] *::after {
  box-sizing: border-box;
}