/* ux.css — Enginecy UX pass 1 (2026-09-03). Loaded on every page after the page's own CSS.
   Scope: (1) the cookie banner on phones, (2) 44px tap targets on touch devices, (3) nothing else.
   Overrides the inline banner CSS by specificity (html body #id), so no page markup had to change.
   Audit reference: decisions 3 (fixes 1 to 4) on the Sep 3 plan page. */

/* 1. Cookie banner on phones: a compact bar that sits ABOVE the sticky call bar instead of on top of it,
      one line of copy, three full-width 44px buttons. Desktop banner untouched. */
@media (max-width: 640px) {
  html body #mhs-cookie-banner.mhs-cc {
    left: 8px; right: 8px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    max-width: none; border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
  }
  html body #mhs-cookie-banner .mhs-cc__inner { padding: 12px 14px 12px; gap: 10px; }
  html body #mhs-cookie-banner .mhs-cc__title { display: none; }
  html body #mhs-cookie-banner .mhs-cc__body { flex: 1 1 100%; min-width: 0; }
  html body #mhs-cookie-banner .mhs-cc__text { font-size: 12.5px; line-height: 1.4; }
  html body #mhs-cookie-banner .mhs-cc__text a { display: inline-block; padding: 8px 0; margin: -8px 0; }
  html body #mhs-cookie-banner .mhs-cc__actions { width: 100%; gap: 8px; flex-wrap: nowrap; }
  html body #mhs-cookie-banner .mhs-cc__btn { flex: 1 1 0; min-height: 44px; padding: 10px 6px; font-size: 14px; }
  html body #mhs-cookie-banner .mhs-cc__settings { padding: 4px 14px 14px; }
  html body #mhs-cookie-banner .mhs-cc__settings-actions .mhs-cc__btn { min-height: 44px; }
}

/* 2. Tap targets on touch devices (WCAG 2.5.8 minimum 24px, Apple/Google guidance 44px).
      Inline text links get a taller hit area without moving the layout (padding + negative margin).
      Chips, nav links and footer links get real height. Mouse/trackpad users see no change. */
@media (pointer: coarse) {
  .seg { min-height: 44px; padding: .75em 1em; font-size: .8rem; display: inline-flex; align-items: center; }
  .segs { gap: 8px; }
  .field-more-toggle { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  header.menu-open .nav-links a { display: block; padding: 12px 0; }
  .brand { min-height: 44px; }
  .foot-grid a { padding: 10px 0; margin-bottom: 0; }
  .foot-social a { min-height: 44px; }
  .foot-verify a, .disclaimer a, .who-fit a, .aside a, .sec-head a, .hero-byline a,
  .rev-sec a, .lv-sec a, .cta-final a:not(.btn), .path-row a:not(.btn),
  main p a:not(.btn), main li a:not(.btn), .faq a:not(.btn) {
    display: inline-block; padding: 10px 0; margin: -10px 0;
  }
  .mobile-bar .btn { min-height: 48px; }
}