/* ── [2026-08-28] Mobile horizontal-scroll fixes ────────────────────────────────
   A crawl of 446 live pages at 390px found 40 that rendered wider than the screen,
   so the page rocked sideways and the right edge could not be reached. Every
   selector below is the element that was MEASURED as the cause - hide it and
   document.scrollWidth drops back to the viewport width - not a guess.
   `!important` is deliberate: this sheet is injected in <head>, and the page's own
   <style> block comes later, so an equal-specificity rule would lose.
   Twin copy: /assets/css/llos-overflow-fix.css, linked from the pages that do not
   load the shell's mobile sheet. Keep the two in step. */
@media (max-width: 768px) {

  /* 1. Button/pill rows laid out with flex and never allowed to wrap. */
  .m-orient .m-doors,
  .controls .search-row,
  .header-inner .header-btns,
  #filterBar.filters,
  #filterBar.filters .filter-group,
  #sortBar.sortbar,
  .epoch-nav,
  .content-navigation,
  #screen1 footer .controls,
  .app > .top,
  #langToggle {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
  .m-orient .m-doors > a,
  .m-orient .m-doors > a > b,
  #filterBar.filters .filter-group > .pill,
  #sortBar.sortbar > .sort-btn,
  .epoch-nav > .epoch-btn,
  #screen1 footer .controls > .btn-page,
  .app > .top > *,
  #langToggle > .lang-btn,
  .header-inner .header-btns > * {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }

  /* 2. Hover tooltips absolutely positioned past the right edge. Authored at a
        fixed width for desktop; on a phone the balloon is what widens the page. */
  .tooltiptext,
  .tooltip-text,
  .tooltip-container .tooltip-text,
  .token .tooltip,
  .tooltip > .tooltiptext {
    max-width: min(260px, calc(100vw - 32px)) !important;
    white-space: normal !important;
    word-break: break-word;
  }

  /* 3. Wide data tables. A table cannot be made narrower than its content, so give
        it its own scroll box instead of letting it push the page. */
  main table,
  .wrap section > table,
  article table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 4. Long unbroken tokens (paths, class names, URLs set as prose) on one line. */
  .cmp-prov b,
  .note .honest,
  #conceptList,
  .peer-nav .nav-peer {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* 5. Containers pinned to a desktop width - an arbitrary Tailwind value with no
        responsive cap, or a min-width on a mega-menu panel. */
  [class*="max-w-[900px]"],
  [class*="max-w-[1100px]"],
  [class*="max-w-[1200px]"],
  .max-w-6xl,
  main.main,
  .slide {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .topbar .mega {
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* 6. Card/icon grids that sized to their content instead of the screen. Only the
        width is capped here - forcing a narrower track made cards inside a wider
        template overflow their own column, which is the bug one level down. */
  #grid.grid {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    /* A track declared as minmax(420px, 1fr) is 420px wide even inside a 326px grid,
       which is how a card list ended up 62px past the screen. min() caps the track at
       the container and keeps the multi-column layout wherever it still fits. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)) !important;
  }
  #grid.grid > * ,
  #grid.grid .card > * {
    min-width: 0 !important;
  }
  .topbar .mega .mega-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    max-width: 100% !important;
  }
}

/* ── [2026-08-28] Second pass: what still scrolled after the block above ────────
   Measured with window.scrollTo(9999,0) - i.e. only where a phone could actually
   drag the page sideways, not merely where an element reported a wide box. */
@media (max-width: 768px) {

  /* Hover balloons. They never open on a touch screen, and even hidden they sit in
     layout - one of them dragged an article 780px wide. */
  .tooltiptext,
  .tooltip-container .tooltip-text {
    display: none !important;
  }
  .token .tooltip {
    max-width: min(220px, calc(100vw - 32px)) !important;
    left: 0 !important;
    transform: none !important;
  }

  /* Rows and rails whose children keep their desktop width. */
  .content-navigation > *,
  .peer-nav .nav-peer,
  #topbar .nav .nav-item {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .topbar-right,
  #topbar .nav {
    flex-wrap: wrap !important;
  }
  .slide { overflow-x: hidden; }
}

/* ── [2026-08-28] Third pass ────────────────────────────────────────────────────
   The milestone rail in the long-form articles is a fixed-width timeline; it cannot
   shrink, so it gets its own scroll strip rather than dragging the article with it. */
@media (max-width: 768px) {
  .content-navigation {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── [2026-08-28] Desktop, not just phones ─────────────────────────────────────
   Two of these overflowed at 1440 as well: the milestone rail dragged the article
   2,880px sideways, and the viewer's filter pills 163px. Both fixes are correct at
   any width - a fixed-width timeline belongs in its own scroll strip, and a row of
   filter pills should wrap rather than push the page. */
.content-navigation {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
#filterBar.filters,
#filterBar.filters .filter-group,
#sortBar.sortbar {
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

/* The inference viewer's fixed 220px sidebar eats half a phone screen, and the Gita
   rating grid is a three-across desktop layout. Give both a phone form. */
@media (max-width: 768px) {
  html body .sidebar { position: static !important; width: 100% !important;
                       height: auto !important; max-height: 40vh; }
  html body main.main { margin-left: 0 !important; }
  #conceptList .concept-row,
  .concept-grid { display: block !important; }
  .max-w-6xl > * { max-width: 100% !important; overflow-x: auto; }
}
