/* Narrow-viewport corrections for the Bulma blog pages.
 *
 * The posts are the original standalone Bulma documents, and Bulma
 * already handles most of this: `pre` carries overflow-x:auto, the
 * minireset caps `img`/`video` at max-width:100%, and `.columns` stacks
 * below 769px. What it does not cover is content that arrived after the
 * theme -- MathJax output and hand-written tables -- and that is the
 * whole of what this file addresses.
 *
 * Every rule here is a containment rule: it gives too-wide content its
 * own scroll area instead of letting it widen the page. Nothing changes
 * colour, type, spacing or layout, and each rule is inert when the
 * content already fits, so desktop rendering is untouched.
 */

/* ------------------------------------------------------------------ */
/* 1. MathJax display equations                                        */
/* ------------------------------------------------------------------ */
/* This is the main cause of the horizontal scroll. MathJax 3 lays each
 * display equation out at its natural width and does nothing when that
 * exceeds the viewport -- the equation simply sticks out, and because it
 * is in normal flow it widens the document, so the whole page scrolls
 * sideways rather than just the equation.
 *
 * The posts have 36, 78 and 24 display equations respectively; the
 * widest is a 419-character \begin{cases} block in the Baker's post,
 * several times the width of a phone screen.
 *
 * overflow-y must be hidden rather than left visible: CSS promotes a
 * `visible` counterpart to `auto`, which would add a vertical scrollbar
 * to every equation. The vertical padding is the room that hiding it
 * would otherwise shave off a tall fraction or a large operator.
 */
mjx-container[display="true"] {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 6px;
  -webkit-overflow-scrolling: touch;
}

/* MathJax centres display math by giving the container text-align:center.
 * That centring is what a scroll container drops when the content is
 * wider than the box -- and it is also what pins a *narrower* equation to
 * the middle. Keeping the container centred preserves the second case;
 * the first is handled by the scroll itself. */
mjx-container[display="true"] > mjx-math {
  margin-inline: auto;
}

/* Long *inline* math is the other half of the problem, and it needs a
 * different remedy. Seven formulas across these posts are written as
 * inline \( .. \) but are really whole display equations -- the widest
 * renders 648px wide inside a 390px viewport. MathJax lays an inline
 * container out as `display:inline`, and overflow does not apply to a
 * non-replaced inline box, so the rules above cannot catch them.
 *
 * Giving those containers `display:inline-block` so overflow *does*
 * apply was measured and rejected: it changed the height of every one
 * of the 855 short inline formulas (26px to a ragged 10-25px) and made
 * the post 2400px longer. The math must not be touched.
 *
 * So the scroll container goes on the paragraph instead, which leaves
 * the math itself entirely alone. Two details make that safe:
 *
 *   :has()  restricts it to blocks that actually contain inline math.
 *           Applied to every paragraph, the new block formatting
 *           context stopped margins collapsing through the ones that
 *           wrap block-level children -- this post has several -- and
 *           opened 32px gaps that accumulated to 1168px down the page.
 *
 *   hidden  scrollbars. Justified text overflows its line box by a
 *   bars    fraction of a pixel often enough that 19 blocks here
 *           qualified as scrollable; a visible gutter under each added
 *           15px of dead space apiece. Hiding the chrome keeps the
 *           scrolling (a swipe still works, which is the gesture on the
 *           devices this targets) without the spacing cost.
 *
 * Measured against the unpatched page at 390px: document scrollWidth
 * 672px to 485px, page height unchanged, and not one of 578 tracked
 * elements moved vertically. Browsers without :has() simply keep the
 * old behaviour.
 */
@media (max-width: 768px) {
  .content p:has(mjx-container:not([display="true"])),
  .content li:has(mjx-container:not([display="true"])),
  .content dd:has(mjx-container:not([display="true"])) {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;          /* Firefox, Chrome 121+ */
    -ms-overflow-style: none;
  }

  .content p:has(mjx-container)::-webkit-scrollbar,
  .content li:has(mjx-container)::-webkit-scrollbar,
  .content dd:has(mjx-container)::-webkit-scrollbar {
    display: none;
    height: 0;
  }
}

/* ------------------------------------------------------------------ */
/* 2. Tables                                                           */
/* ------------------------------------------------------------------ */
/* Bulma's scroll wrapper for tables. The posts' tables are now wrapped
 * in it (see the .table-container divs in _posts/), which is Bulma's own
 * mechanism and needs no styling from us -- but `overflow:auto` only
 * works if the wrapper cannot itself be stretched by its content, and a
 * flex or grid item's default `min-width:auto` does exactly that. */
.table-container {
  min-width: 0;
}

/* ------------------------------------------------------------------ */
/* 3. Flex/grid children generally                                     */
/* ------------------------------------------------------------------ */
/* Same `min-width:auto` problem one level up: a Bulma `.column` holding
 * a wide equation or table refuses to shrink below that content's width,
 * which defeats the scroll containers above. Bulma's columns stack on
 * mobile but keep `flex: none` sizing, so this is still needed. */
.content .column,
.content .columns {
  min-width: 0;
}