/* === NOBLIX AI — mobile override layer v1 ===
   Loaded AFTER each page's own styles. Audit-driven (2026-06-10): the site is
   already heavily mobile-optimized; this layer only patches the few gaps the
   audit flagged in the shared legal template and the analytics tooling.
   Uses no hardcoded brand colors — layout/overflow/tap-target only.
   NOTE: deliberately omits `canvas{height:auto}` from the generic baseline —
   analytics.php renders Chart.js canvases that rely on their own dimensions. */

/* --- Safe baseline (no canvas rule; see note above) --- */
html { -webkit-text-size-adjust: 100%; }
img, svg, video, iframe { max-width: 100%; }

/* A-#1 (MEDIUM, lib/legal-template.php): long URLs / emails in legal copy can
   force horizontal overflow on ≤360px screens — break them instead. */
.legal-content { overflow-wrap: anywhere; }

/* A-#3 (LOW, analytics.php): a few static `.tbl` summary tables are not wrapped
   in `.table-wrap`. Let their containing card scroll horizontally on small
   screens rather than push the page wide. */
@media (max-width: 768px) {
  .chart-box { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* A-#2 (MEDIUM, lib/legal-template.php): nav (13px) and footer (11px) links have
   sub-44px tap targets. Grow the hit area on touch devices only — desktop hover
   layout is untouched. */
@media (hover: none) and (pointer: coarse) {
  /* nav is a flex row — a real min-height tap box is safe here */
  .nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 2px 8px; }
  /* footer links flow inline inside a <p>; grow hit area with padding only so
     the `·` separators and line wrapping stay intact */
  footer a { display: inline-block; padding: 11px 7px; }
}
@media (max-width: 600px) {
  /* extra leading so padded footer links don't overlap when the row wraps */
  footer p { line-height: 2.4; }
}