/* Shared mobile-overflow safety net — one canonical set of guardrails sitewide, loaded via
   <link rel="stylesheet" href="/shared-layout-safety.css">. Added 2026-08-03 (see docs/BACKLOG.md's
   "Mobile layout overflow bug" entry) after confirming 0/118 HTML pages declared `overflow-wrap`
   anywhere and 62/118 had no `overflow-x:hidden` on `body` — a single long unbreakable string
   (an email, a job title, an org name) was enough to blow out the whole viewport width on mobile
   instead of wrapping, forcing pinch-zoom to recover.

   Same zero-specificity pattern as /shared-select.css: written with :where() so it never wins a
   fight against a real page-specific rule, even a plain `body { ... }` or `img { ... }` already on
   the page — this file only fills a gap, it never overrides an intentional per-page choice. That's
   what makes it safe to link into every page unconditionally rather than an opt-in per file.

   This file does NOT fix the separate structural min-width/flex-stacking bug in control rows like
   organizacion/miembros.html's `.member-role`/`.btn-approve-small` (two children whose combined
   min-width can't shrink to fit a 390px viewport regardless of overflow-wrap) — that's a real
   component-layout decision, tracked separately in docs/BACKLOG.md, not a missing-CSS-property gap
   this stylesheet is meant to paper over. */

:where(body) {
  overflow-x: hidden;
}

/* Text-bearing elements that can receive variable-length or user-generated content (names, emails,
   job titles, headlines, paragraphs) — allow a long unbreakable run of characters to wrap onto a
   new line instead of forcing the container (and the viewport) wider than it should be. */
:where(p, span, div, a, li, td, th, h1, h2, h3, h4, h5, h6, label, button, blockquote, figcaption) {
  overflow-wrap: break-word;
}

/* Media and embeds should never exceed their container's width on a narrow viewport, regardless of
   the element's own width/height attributes. */
:where(img, svg, video, iframe, table) {
  max-width: 100%;
}