/* Build it Better shared responsive base (CentCom 31855 / 31867 / ET-27626).
 * Included ONCE by templates/base_content.html for every Build it Better app page
 * (body.bb-app). New builds inherit it with no per-page work.
 *  - dvh always has a vh declaration above it as the fallback
 *  - safe-area insets on notched devices
 *  - 44x44px minimum touch targets inside app content
 *  - no horizontal overflow down to 320px
 *  - breakpoints 1024 / 768 / 480 (respond BEFORE the layout reaches its floor)
 * Scoped to body.bb-app .content-main: the site header, brand font (Archivo Black)
 * and every colour are untouched. Layout only - no colour or font declarations. */

:root {
  --bb-vh: 100vh;
  --bb-vh: 100dvh;
  --bb-safe-top: env(safe-area-inset-top, 0px);
  --bb-safe-right: env(safe-area-inset-right, 0px);
  --bb-safe-bottom: env(safe-area-inset-bottom, 0px);
  --bb-safe-left: env(safe-area-inset-left, 0px);
  --bb-touch: 44px;
  --bb-gutter: 16px;
}

body.bb-app { max-width: 100%; }

body.bb-app .content-main {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  padding-left: max(var(--bb-gutter), var(--bb-safe-left));
  padding-right: max(var(--bb-gutter), var(--bb-safe-right));
  padding-bottom: max(24px, var(--bb-safe-bottom));
}

/* nothing in app content may be wider than its box */
body.bb-app .content-main *,
body.bb-app .content-main *::before,
body.bb-app .content-main *::after { box-sizing: border-box; }
body.bb-app .content-main :where(img, video) { max-width: 100%; height: auto; }
body.bb-app .content-main :where(canvas, svg, iframe) { max-width: 100%; }
body.bb-app .content-main h1,
body.bb-app .content-main h2,
body.bb-app .content-main h3,
body.bb-app .content-main p,
body.bb-app .content-main li,
body.bb-app .content-main td,
body.bb-app .content-main th,
body.bb-app .content-main a,
body.bb-app .content-main code { overflow-wrap: anywhere; }
body.bb-app .content-main pre {
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* wide tables scroll inside their own box, never the page */
body.bb-app .content-main table { max-width: 100%; }
body.bb-app .content-main .bb-scroll,
body.bb-app .content-main .table-wrap,
body.bb-app .content-main .table-scroll,
body.bb-app .content-main .tbl-wrap {
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
body.bb-app .content-main :where(input, select, textarea) { max-width: 100%; }
/* grid/flex children may shrink below their content width */
body.bb-app .content-main :where(section, article, div) { min-width: 0; }

/* 44x44 touch targets (WCAG 2.5.5) - DEFAULTS for controls the page has not sized itself.
 * CentCom 31875/31873: these rules used to out-rank page CSS (body.bb-app prefix) and silently
 * resized deliberately compact controls (a 104px "+ pair" field became 178x44 at 16px, a pill's
 * 18px remove button became 44x44), so the Agent Tournaments owner panel wrapped one word per line.
 * The whole selector sits inside :where() -> specificity 0: any page rule for the same property wins,
 * an unstyled control still gets the 44px target. */
:where(body.bb-app .content-main button, body.bb-app .content-main [role="button"], body.bb-app .content-main input[type="button"],
  body.bb-app .content-main input[type="submit"], body.bb-app .content-main input[type="reset"], body.bb-app .content-main select,
  body.bb-app .content-main summary, body.bb-app .content-main .btn, body.bb-app .content-main .button) {
  min-height: var(--bb-touch); min-width: var(--bb-touch);
}
:where(body.bb-app .content-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  body.bb-app .content-main select, body.bb-app .content-main textarea) {
  min-height: var(--bb-touch);
  font-size: max(16px, 1em); /* stops iOS zooming into a focused field */
}
:where(body.bb-app .content-main input[type="checkbox"], body.bb-app .content-main input[type="radio"]) {
  width: 24px; height: 24px; margin: 10px;
}
/* Stand-alone links become 44px inline-flex buttons. NOT a link that wraps block structure (a card, a tile,
 * a whole table row): forcing inline-flex + align-items:center on <a class="card" style="display:flex;
 * flex-direction:column"> shrank every child with no intrinsic width to 0px - the Agent Tournaments lobby's
 * oval collapsed and its prize pool rendered one letter per line (31875/31873). Such links keep their own
 * layout; their min-height stays. */
body.bb-app .content-main :where(a):not(p a):not(li a):not(td a):not(th a):not(h1 a):not(h2 a):not(h3 a):not(span a):not(small a):not(em a):not(strong a):not(:has(> :is(div, section, article, ul, ol, dl, table, figure, picture, form, nav, p, h1, h2, h3, h4, h5, h6))) {
  min-height: var(--bb-touch);
  display: inline-flex; align-items: center;
}
/* inline links in running text: pad the hit area without moving the text */
body.bb-app .content-main :where(p a, li a, td a, th a, span a) { padding-block: 12px; margin-block: -12px; }

/* short screens: shared full-height shells use a dvh height that has a vh fallback above it */
body.bb-app .bb-fill { min-height: 60vh; min-height: 60dvh; }
body.bb-app .bb-fill-screen { min-height: 100vh; min-height: 100dvh; }

/* ---- breakpoints ---- */
@media (max-width: 1024px) {
  body.bb-app .content-main { --bb-gutter: 20px; }
  body.bb-app .content-main :where(.grid, [class*="-grid"], [class*="grid-"]) { min-width: 0; }
}
@media (max-width: 768px) {
  body.bb-app .content-main { --bb-gutter: 14px; }
  body.bb-app .content-main :where(.row, .cols, .split, [class*="-row"], [class*="-cols"], [class*="-split"]) {
    flex-wrap: wrap;
  }
  body.bb-app .content-main :where(.row, .cols, .split, [class*="-row"], [class*="-cols"], [class*="-split"]) > * {
    min-width: 0;
  }
}
@media (max-width: 480px) {
  body.bb-app .content-main { --bb-gutter: 12px; }
  body.bb-app .content-main :where(button, .btn, .button) { max-width: 100%; }
  body.bb-app .content-main :where(h1) { font-size: clamp(1.4rem, 7vw, 2rem); }
}
/* landscape phones / short windows: never pin a panel taller than the visible viewport */
@media (max-height: 520px) {
  body.bb-app .bb-fill, body.bb-app .bb-fill-screen { min-height: 0; }
}

/* ---- scroll containment (CentCom 31874 / 31876 / 31867) ----
 * A panel scrolled to its end must not hand the gesture to the page behind it.
 * overscroll-behavior: contain on every scrollable panel. CSS cannot select by computed
 * overflow, so (a) the known panel classes of every Build it Better app are listed here and
 * (b) static/js/bb-scroll-guard.js (loaded with this sheet) marks ANY other overflow:auto|scroll
 * element at runtime, so new builds are covered too. Modal overlays and drawers use `none`
 * plus a page scroll lock while open (html.bb-scroll-locked, toggled by the same script). */
body.bb-app :where(
  .bb-scroll, .table-wrap, .table-scroll, .tbl-wrap, pre,
  .at-modal-card, .am-pre, .am-tape, .si-results, .si-log,
  .tdr-res .scroll, .tdr-proof .scroll, .tdr-sheet,
  .cza-left, .cza-right, .cza-tr-list, .cza-answer, .cza-botleg, .cza-pop
) { overscroll-behavior: contain; }
body.bb-app :where(
  [role="dialog"], [aria-modal="true"], .bb-modal, .bb-drawer,
  .at-modal, .at-modal-bg, .am-modal
) { overscroll-behavior: none; }
/* the scrolling card INSIDE a modal still contains its own scroll */
body.bb-app .am-modal > div, body.bb-app .at-modal-card { overscroll-behavior: contain; }
/* page scroll lock while a modal / drawer is open */
/* !important: main.css / mobile-responsive.css pin html{overflow-y:auto !important} below 768px, which silently defeated the lock on phones */
html.bb-scroll-locked, html.bb-scroll-locked body { overflow: hidden; overflow-y: hidden !important; overscroll-behavior: none; }
/* drag / resize handles must not scroll the page on a phone */
body.bb-app :where([class*="drag-handle"], [class*="resize-handle"], [class*="-grip"], .bb-drag, [draggable="true"]) {
  touch-action: none;
}