/* ============================================================================
   base.css — structural primitives shared by every page on blackmantrading.com
   ============================================================================

   PURPOSE: this file carries NO visual identity. No colors, no fonts, no
   spacing scale, no component styling. Pages here are deliberately independent
   — ai-bubble-monitor has its own look and its own inline stylesheet, and more
   standalone pages are coming — so this layer exists only to stop each new page
   re-growing the same structural bugs.

   It was extracted after fixing the identical two defects twice in one day, once
   in styles.css and once in ai-bubble-monitor's inline block: both had grown
   grid items that would not shrink, and data tables that crushed themselves
   unreadable on phones instead of scrolling.

   USAGE: link this FIRST, before the page's own stylesheet, so a page can always
   override it.

       <link rel="stylesheet" href="/base.css" />
       <link rel="stylesheet" href="/styles.css" />   <!-- or an inline <style> -->

   Adopting a page costs three things: the link tag, class="scroll-x" on a table
   wrapper, and min-width:0 on that page's own grid containers' children.
   ========================================================================== */

/* --- Box model -----------------------------------------------------------
   Padding and borders inside the declared width. Without this, a padded card
   in a fixed grid track overflows its own column. */
*, *::before, *::after { box-sizing: border-box; }

/* --- Media ---------------------------------------------------------------
   Images and embeds never exceed their container. `height:auto` keeps the
   aspect ratio once width is capped. Canvas is excluded from height:auto —
   Chart.js manages its own pixel height and fights an auto override. */
img, svg, video, iframe { max-width: 100%; height: auto; }
canvas { max-width: 100%; }

/* --- Text overflow -------------------------------------------------------
   break-word, deliberately NOT `anywhere`. Both let a long token wrap, but
   `anywhere` ALSO reduces the element's min-content width, which lets table
   columns collapse to ~40px and breaks text one character per line. That
   difference is subtle, invisible on desktop, and shipped a broken mobile
   layout here once already. */
body { overflow-wrap: break-word; }

/* --- Grid and flex children ----------------------------------------------
   Grid and flex items default to min-width:auto, meaning they refuse to shrink
   below their min-content width. One wide child or one long word then widens
   the whole page rather than wrapping, and the body scrolls sideways.

   `.grid > *` covers containers already using that class; `.min0 > *` is the
   opt-in for a page whose grid containers are named something else. Prefer
   minmax(0, 1fr) over a bare 1fr in track definitions for the same reason. */
.grid > *, .min0 > * { min-width: 0; }

/* --- Scrollable data tables ----------------------------------------------
   A wide comparison table must scroll inside its own container rather than
   widening the page. Both halves are required and neither works alone:

     - the WRAPPER scrolls (overflow-x: auto), and
     - the TABLE keeps a min-width.

   Without the min-width, a width:100% table simply obeys the narrow wrapper
   and squeezes its columns to nothing — the wrapper never has anything to
   scroll. Override the floor per table with --table-min. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-x > table { min-width: var(--table-min, 660px); }

/* Tell the reader the table scrolls, or the cut-off edge reads as a broken
   layout instead of an affordance. Shown only where scrolling is likely. */
.scroll-hint { display: none; }
@media (max-width: 760px) {
  .scroll-hint { display: block; }
}