/* mobile-quickwins.css — Tier A mobile fixes for nobleglitch.cloud
 * Scoped ENTIRELY inside @media (max-width: 640px). Zero desktop risk.
 * Injected globally via services/nav-inject.js (both authed + unauth surfaces).
 * Shipped 2026-08-30. Backup files carry .bak.mobileA.<epoch> suffix.
 */

@media (max-width: 640px) {
  /* A1 · Global mobile-font-min — floor readable text at 15px.
   * !important is needed because most Noble text uses higher-specificity class
   * selectors (e.g. .tool-desc, .arya-title). The @media scope keeps this
   * mobile-only so desktop styling is untouched. */
  body, p, li, td, span, a { font-size: max(1em, 15px) !important; }
  /* div gets the floor too but nav frame + brand icons are excluded so
   * icon-only glyph divs don't blow up */
  div:not(#ng-frame):not(#ng-frame *):not(.icon):not(.paw):not(.dot) {
    font-size: max(1em, 15px) !important;
  }

  /* Known specific offenders below A1 that need their own targeted push
   * (some are computed at 9-12px via clamp/rem despite A1 because they use
   * shorter tags or high-specificity chains that override even our div rule) */
  .highlight-quote { font-size: 15px !important; line-height: 1.55 !important; }
  .tool-status,
  .tool-status.live { font-size: 12px !important; }

  /* A2 · Body padding — content stops hugging the edge */
  body { padding-inline: 16px; box-sizing: border-box; }

  /* A3 · Wordmark bump — "NOBLE GLITCH" was rendering at 9.92px */
  .wordmark,
  .brand-mark,
  [data-role="wordmark"],
  #nav-logo,
  .ld-title {
    font-size: clamp(20px, 5vw, 32px) !important;
    letter-spacing: 3px !important;
  }

  /* A4 · Small-text minimums for known offenders (measured live @ 390px) */
  /* 5.6px : hero image caption "ERIC · ARYA · THE ARCH" */
  .hero-img-caption { font-size: 12px !important; letter-spacing: 2px !important; }

  /* 5.76px : "▼ SCROLL TO READ THE MISSION" */
  #scroll-cue { font-size: 12px !important; letter-spacing: 3px !important; }

  /* 6.72px : "LOADING MISSION BRIEFING..." */
  .ld-sub { font-size: 12px !important; letter-spacing: 3px !important; }

  /* 8px : "Liberty · Innovation · Community" tagline */
  .hero-tagline { font-size: 13px !important; letter-spacing: 4px !important; }

  /* 10.4px : "★ ★ ★" star dividers */
  .star-divider,
  .ld-star-row { font-size: 12px !important; letter-spacing: 6px !important; }

  /* 12px : "// MISSION BRIEFING //" eyebrow — bump to 13 for parity */
  .hero-eyebrow { font-size: 13px !important; }

  /* 13.12px : "THE FOUNDATION" and other section stamps */
  .stamp-title { font-size: 15px !important; }

  /* Landing #nav secondary text */
  #nav-stars { font-size: 15px !important; }
  #nav-login { font-size: 15px !important; padding: 8px 14px !important; }

  /* Trust chips + hot-model badge inside #ng-frame — don't drop below 12px */
  #ng-frame .ng-hot,
  #ng-frame nav a,
  #ng-frame .trust,
  #ng-frame .user,
  #ng-frame .frame-btn,
  #ng-frame .signout { font-size: 12px !important; }
  #ng-frame .ng-brand { font-size: 14px !important; }

  /* Any small inline stamp paragraphs (font-size:clamp(.38rem,...) on landing) */
  #main [style*="font-size:clamp(.38rem"],
  #main [style*="font-size: clamp(.38rem"] { font-size: 13px !important; }

  /* Login form controls: LABEL was rendering at 6.08px, BUTTON at 9.28px.
   * Not in A1 element list per spec, but they're form primitives and must be
   * legible for the login page to work on mobile. */
  label { font-size: max(1em, 13px) !important; letter-spacing: 1px !important; }
  button, input, select, textarea { font-size: max(1em, 15px) !important; }
}