/* ========================================================================== allanninal.dev — phone overflow guard Loaded next to site-nav.css on every generated page. It fixes one class of bug and nothing else: content wide enough to push the whole document sideways on a phone, which makes the page scroll horizontally and the header slide off to the left. The three sources measured across the site were bare `

` blocks (the
   section stylesheets only give `.code-block pre` a scroll box, so a plain
   `` had none), data tables authored at desktop widths, and SVG
   diagrams with a fixed width attribute.

   Everything here is confined to `max-width: 720px` so no desktop layout
   changes, and each rule moves the overflow *inside* the element rather than
   clipping it — nothing becomes unreachable, it just scrolls in its own box.
   ========================================================================== */

@media (max-width: 720px) {
  /* Deliberately NOT `html, body { overflow-x: hidden }`. That hides the
     symptom, and it also turns  into a scroll container, which stops
     `position: sticky` working — it silently unsticks the site header on every
     phone. Each rule below instead gives the one wide thing its own scroll
     box, so the document never needs to scroll sideways in the first place. */

  /* Code: scroll in place. */
  pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Long unbroken tokens in inline code (URLs, ARNs, hashes) wrap rather than
     stretch their line box. */
  :not(pre) > code {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Tables: `display: block` is what makes overflow-x apply to a table at all.
     The cost is that a `width: 100%` table becomes content-width, which on a
     phone is the better of the two behaviours. */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Diagrams: scale to the column instead of setting the page width. Only
     SVGs that carry a viewBox, so icons sized by attribute are left alone. */
  svg[viewBox] {
    max-width: 100%;
    height: auto;
  }
  figure.diagram,
  figure.feature-img {
    max-width: 100%;
    overflow-x: auto;
  }

  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  /* Card grids on the analysis pages were authored with min-widths that exceed
     a phone viewport; let them collapse. */
  /* Grid and flex items default to `min-width: auto`, which refuses to shrink
     below the intrinsic width of a wide  and pushes the whole track past
     the viewport. */
  .step > * {
    min-width: 0;
  }

  .stat-card,
  .metric-card,
  .chart-card,
  .chart-container,
  .insight-card {
    min-width: 0;
    max-width: 100%;
  }
}