/* Bolrach shared interaction floor — cdn.bolrach.com/base.css
 *
 * ADR D16 (one design source) + D20 (mobile is designed per page and PROVEN in an emulator).
 * tokens.css stays pure design tokens; this file carries the behaviour every surface owes a
 * person holding a phone. Loading it is one <link> per surface, so the rules live in exactly
 * one place and a new product inherits them on day one.
 *
 * Verified by ops/estate/mobile_audit.mjs, which measures painted geometry in device emulation.
 */

/* ---------------------------------------------------------------------------
 * 1. Touch targets.
 *
 * Gated on `pointer: coarse`, NEVER on width: a 768px browser window is not a finger, and a
 * 768px tablet is. Deliberately scoped to CONTROLS and to links in navigation chrome — a blunt
 * `a { min-height:44px }` would turn every inline link inside a sentence into a 44px block and
 * shred prose line-height.
 * ------------------------------------------------------------------------ */
@media (pointer: coarse) {
  button,
  summary,
  [role="button"],
  .btn,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  /* Entry fields are targets too: you tap one to focus it, and a 39px box is a miss on a
     phone. Excludes checkbox/radio, which have their own sizing and often a styled label. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input:not([type]),
  select,
  textarea,
  header a,
  nav a,
  footer a,
  form a,
  [class*="nav"] > a,
  [class*="menu"] > a,
  /* Mastheads are navigation chrome whatever element they are built from - several apps use
     a plain <div class="topbar"> rather than <header>. */
  [class*="topbar"] a,
  [class*="masthead"] a {
    min-height: 44px;
    min-width: 44px;
  }

  /* Give the box somewhere to put that height without moving the label off-centre.
   * inline-flex keeps links on their own line-box; it does not force a block break. */
  header a,
  nav a,
  footer a,
  form a,
  [class*="topbar"] a,
  [class*="masthead"] a,
  summary,
  [class*="nav"] > a,
  [class*="menu"] > a {
    display: inline-flex;
    align-items: center;
  }

  /* Icon-only controls (burger menus, close buttons) are square and were landing at 40px. */
  button[aria-label],
  button[aria-expanded],
  a[aria-label] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ---------------------------------------------------------------------------
 * 2. Wide content stays inside its own scroller.
 *
 * Programme section E: wide media and code may exceed the text column, but the PAGE must never
 * scroll sideways. Code samples were painting to x=426 inside a 390px viewport, which drags the
 * whole document with them.
 * ------------------------------------------------------------------------ */
img,
svg,
video,
canvas,
iframe,
table {
  max-width: 100%;
}

pre,
.code,
[class*="codeblock"] {
  max-width: 100%;
  overflow-x: auto;
}

/* A long unbroken token (an API key, a URL, a hash) is the other way a line pushes the page
 * wider than the screen. Wrap it rather than letting it set the document width. */
code,
kbd,
samp {
  overflow-wrap: anywhere;
}