/* assets/mobile-targets.css — GUIDELINES §7.5 on phones (wq-143, 2026-10-07).
 *
 * Two rules, phones only:
 *   1. Interactive controls and CTAs are at least 44×44px to tap.
 *   2. Body copy (paragraphs and prose lists) is at least 16px.
 *
 * Kept in its own file, loaded after the page's other stylesheets, so it can be
 * reviewed and reverted as one unit. Only selectors measured below the floor at
 * 390px and 360px are listed, so nothing that already meets it gets smaller.
 * Links inside a sentence are left alone: their size is set by the line of text
 * they sit in (WCAG 2.5.8's inline exception).
 */
@media (max-width: 768px) {

  /* 1. Tap targets ------------------------------------------------------- */

  .ds-header__brand,
  .ds-header__nav-link,
  .ds-header__cta,
  .cite-btn,
  .copy-btn,
  .toggle-btn,
  .year-btn,
  .btn-primary,
  .contact-btn,
  .btn-secondary,
  #geo-view-bar,
  #geo-view-scatter,
  #consumer-filters button,
  .th-sort,
  .row-toggle,
  [data-dv] {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Checkboxes: the label is the tap target (tapping it toggles the box). */
  .ad-toggle,
  .counterfactual-toggle label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: 10px;
  }
  #cf-check,
  #diverg-excl-ad {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
  }

  /* 2. Body copy --------------------------------------------------------- */

  .hybrid-q__desc,
  .hybrid-e-card__body,
  .hybrid-impl-card__body,
  .hybrid-evidence__asof,
  .hybrid-section-head__main p,
  .wq-lead,
  .subscribe-box p,
  .contact-band p,
  .page-primer > p,
  .pub-item p,
  .section > p,
  .h2-sub,
  .takeaway,
  .mobile-scroll-hint,
  .page-provenance p,
  .card > ul > li,
  .card-grid .card p,
  .surface-dark > .container > p,
  .surface-dark > main > .container > p,
  .container > ul > li,
  .principles li {
    /* !important: several of these paragraphs set a size inline or through a
       page-level rule, and this file exists to hold the floor on phones. */
    font-size: 16px !important;
    line-height: 1.55;
  }
}