/* ═════════════════════════════════════════════════════════════════
   Alkali Partners — Insights: mobile treatment for SVG diagrams.
   Phones: the diagram escapes the 64px reading gutter and runs
   edge to edge, holds a legible scale, and scrolls sideways with a
   clear affordance (edge fade + swipe hint) instead of looking cut off.
   Paired with _mobile-graphics.js, which sets the per-diagram
   minimum width from its viewBox and drives the fade/hint state.
   ═════════════════════════════════════════════════════════════════ */
.svg-hint { display: none; }
@media (max-width: 700px) {
  .prose > figure.wide:has(.diagram-card) { justify-self: stretch; width: auto; max-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .prose > figure.wide:has(.diagram-card) > figcaption { padding: 0 22px; }
  .diagram-card.panel, .diagram-card.panel-light { padding-left: 0; padding-right: 0; }
  .diagram-card .dt { padding: 0 22px; margin-bottom: 20px; gap: 4px 16px; }
  .diagram-card .footnote { margin-left: 22px; margin-right: 22px; }
  .diagram-card .svg-wrap { overflow-x: auto; overflow-y: hidden; padding: 0 22px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .diagram-card .svg-wrap::-webkit-scrollbar { display: none; }
  .diagram-card .svg-wrap[data-scroll="start"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .diagram-card .svg-wrap[data-scroll="mid"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 40px), transparent); }
  .diagram-card .svg-wrap[data-scroll="end"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 24px); mask-image: linear-gradient(to right, transparent, #000 24px); }
  .svg-hint { display: block; padding: 12px 22px 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate-500); font-weight: 500; transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1); }
  .svg-hint[hidden] { display: none; }
  .svg-hint.gone { opacity: 0; }
  .svg-hint::after { content: " \2192"; color: var(--brass-dark); }
}