/* Narrow viewports: nothing may widen the PAGE — bean `2r2n`.
 *
 * At 390 px, 105 of 249 built pages scrolled sideways (measured 2026-09-24).
 * The rule here is the bean's: wide content scrolls INSIDE ITS OWN BOX with a
 * visible cue, and the page itself never pans.
 *
 * ONE FILE, TWO WAYS IN. Themed pages link it from `_includes/head_custom.html`.
 * The standalone viewer pages carry no theme stylesheet at all, so
 * `withViewerNav` in `scripts/viewer-page.ts` inlines this same file when it
 * adds the rail. A copy of these rules in each place would be two answers to
 * "what does a table do at 390 px", free to drift apart.
 *
 * Every selector here is written to be safe on both kinds of page: no
 * `.main-content` scope (a standalone page has none), the navbar excluded by
 * name, and the theme's own `.table-wrapper` left alone, since it already does
 * this job for Markdown tables. */

@media (max-width: 799.98px) {
  /* A table the theme did not wrap: raw HTML from a generator, or one built at
   * runtime. `display: block` makes the table its own scroll box. Its cells
   * still lay out as a table inside the anonymous table box. */
  table:not(.table-wrapper > table):not(.fa-nav table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* THE CUE: the edge that has more content past it fades out. The fade is a
   * MASK over the table's own pixels, driven by its own scroll position, so
   * it needs no knowledge of the page's background. A painted cover (the
   * usual `background-attachment: local` trick) does: the first version used
   * `Canvas`, and on a page that is dark under a LIGHT scheme it laid a white
   * band over the first column.
   *
   * A table that does not overflow has an inactive scroll timeline, so the
   * animation has no effect and both fades stay at their initial 0: no cue
   * where there is nothing to scroll to. A browser without scroll-driven
   * animations shows no fade, and the table still scrolls. */
  @supports (animation-timeline: scroll()) {
    table:not(.table-wrapper > table):not(.fa-nav table) {
      mask-image: linear-gradient(to right,
        transparent 0, #000 var(--fa-cue-l),
        #000 calc(100% - var(--fa-cue-r)), transparent 100%);
      animation: fa-scroll-cue linear both;
      animation-timeline: scroll(self inline);
    }
  }

  /* A code block scrolls in its own box, which is what `pre` is for. Mermaid
   * SOURCE sits in a `pre` until the renderer replaces it, and at 390 px a
   * diagram's source line is longer than the screen. */
  pre {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Prose that has no break opportunity: a long path in inline code, or a
   * glossary definition naming one. Breaking the string is better than
   * widening the page it sits on. */
  :not(pre) > code,
  dd {
    overflow-wrap: anywhere;
  }
}

@property --fa-cue-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fa-cue-r { syntax: "<length>"; inherits: false; initial-value: 0px; }

@keyframes fa-scroll-cue {
  0%   { --fa-cue-l: 0px;    --fa-cue-r: 2.5rem; }
  12%  { --fa-cue-l: 2.5rem; }
  88%  { --fa-cue-r: 2.5rem; }
  100% { --fa-cue-l: 2.5rem; --fa-cue-r: 0px; }
}