/* ============================================================================
   ARC · mobile.css
   Deploy target: arcverse.world — SITE ROOT (alongside index.html).
   v1.1 · Built 9 August 2026 · Backend lane.
   v1.1 supersedes v1.0 (5d7fd126). See section 6 — v1.0 broke every nav.

   WHY THIS FILE EXISTS
   38 pages on arcverse reference it (37 as "../mobile.css", index.html as
   "mobile.css"). From the domain root all 38 resolve to the same one URL:
   /mobile.css. It has returned 404 on the live origin. None of those 38 pages
   is touched by this build; the file arrives at the path they already name.

   WHAT IT IS NOT
   It is NOT the mobile layer for these pages. All 38 already carry a viewport
   meta tag and their own media queries (measured: breakpoints at 768, 640, 480,
   760, 500 and 900). This file is a fault layer on top of that — the handful of
   faults page CSS characteristically does not cover.

   THE CASCADE PROBLEM, AND HOW THIS FILE ANSWERS IT
   On 37 of the 38 pages this stylesheet is loaded INSIDE <head> with 1 to 10
   further <style> blocks after it. On member-profile.html it is loaded in the
   BODY, at line 821. So it is never last, and it cannot rely on source order.

   Two tiers, and the split is deliberate:

     UNFORCED — used wherever measurement found nothing in the 38 that contests
     the property. These win on their own, or lose harmlessly to a rule that
     says the same thing.

     FORCED (!important) — used in ONE place only, section 3. It is forced
     because it cannot be won any other way: the competing rules are
     .search-input { font-size:14px } and .field input { font-size:.88rem },
     which carry a class and therefore outrank any selector this file can
     write, and there are 348 inline font-size declarations across the 38,
     which outrank everything except !important.

   WHAT THIS FILE DELIBERATELY DOES NOT TOUCH
   · nav, header, and every .nav-* class. Reserved for nav-mobile.js, which is
     built separately. A stylesheet that wins by force wins over that one too.
     Nothing below selects a nav element or a nav class.
   · html { overflow-x }. nav is position:sticky in 40 rules across these
     pages, and an overflow on the root element breaks sticky positioning.
     Containment is applied to body only — which is what 29 of the 38 already
     do for themselves.
   · Multi-column grid collapse. The pages' own media queries already handle it
     (12 rules matching div[style*="grid-template-columns"]). Duplicating it
     here would be this file fighting the page for a job the page is doing.

   ONE OPEN QUESTION, NOT DECIDED HERE
   Everything is gated at max-width:640px, matching arc-mobile.css so the
   estate carries one breakpoint. The section 3 fault is device-related rather
   than width-related and would arguably justify 768. Left at 640 deliberately;
   raising it is a decision, not a tweak.
   ========================================================================= */


/* ---------- 1 · horizontal containment — UNFORCED ----------
   29 of the 38 already set body{overflow-x:hidden} themselves. This extends
   the same behaviour to the 9 that do not. html is excluded on purpose (see
   header). */
@media (max-width:640px){
  html,body{max-width:100%;}
  body{overflow-x:hidden;overflow-wrap:break-word;}
}


/* ---------- 2 · media never wider than the screen — UNFORCED ----------
   29 rules across the 38 set a width or max-width on img. Where one of those
   is class-scoped it outranks this and keeps its size. That is accepted:
   forcing this would override deliberate sizing on every page at once, which
   is a larger change than the fault it fixes. Known partial, not an oversight. */
@media (max-width:640px){
  img,svg,video,iframe{max-width:100%;}
  img,svg,video{height:auto;}
}


/* ---------- 3 · iOS focus-zoom — THE ONLY FORCED SECTION ----------
   A form field under 16px makes Safari zoom the viewport on focus and never
   zoom back. It is the single most-felt mobile fault on these pages and it
   cannot be fixed without !important — measured, not assumed:
     · .search-input   { font-size:14px }   business-directory.html:32
     · .field input    { font-size:.88rem } 6 community/sp pages
     · 348 inline font-size declarations across the 38
   Each of those outranks every selector available to this file.

   The min-height on the same elements is UNFORCED: zero rules in the 38 set
   min-height on a form control, so nothing contests it. */
@media (max-width:640px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
  select,
  textarea{
    font-size:16px !important;
  }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
  select{
    min-height:44px;
  }
  textarea{
    min-height:88px;
  }
}


/* ---------- 4 · tap targets — UNFORCED ----------
   Zero rules in the 38 set min-height on a button or .btn. Nothing to beat. */
@media (max-width:640px){
  button,
  a.btn,
  .btn,
  input[type=submit],
  input[type=button]{
    min-height:44px;
  }
}


/* ---------- 5 · wide tables scroll instead of breaking the page — UNFORCED ----
   Zero table rules exist anywhere in the 38, so this is uncontested. */
@media (max-width:640px){
  table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}


/* ---------- 6 · preformatted blocks scroll — UNFORCED ----------
   v1.1, 9 Aug 2026. THIS SECTION WAS WRONG IN v1.0 AND BROKE EVERY NAV.

   v1.0 read:  a,code,kbd,samp{overflow-wrap:break-word;word-break:break-word;}
   It was measured as uncontested, and it was. It was not measured for
   CONSEQUENCE. 36 of the 38 pages have a display:flex nav at a fixed height
   with anchors inside it. A flex item will not shrink below its content's
   minimum width — which for an anchor is normally its longest word, and which
   word-break:break-word reduces to ONE CHARACTER. Every nav link collapsed to
   a vertical column of letters. Confirmed on arcverse.world/index.html by
   phone screenshot, 9 Aug.

   `a` is removed and is NOT re-scoped. Wrapping long URLs and email addresses
   is left UNFIXED here, deliberately: it cannot be scoped away from nav
   anchors without assumptions about markup on 38 pages, and that assumption is
   exactly what produced the fault. If it is wanted, it belongs on a selector
   the pages actually carry, which is a separate decision.

   What is left touches only preformatted content, which no nav uses. */
@media (max-width:640px){
  pre,code,kbd,samp{overflow-x:auto;}
}