/* ============================================================================
 * Shared touch-device polish for the app pages (index, app, dashboard, tracker).
 *
 * Linked AFTER each page's inline <style>, so it wins at equal specificity
 * without needing !important — the same arrangement as css/blog.css.
 *
 * Everything here comes from a measured audit rather than taste. Each block
 * says what was measured and why the number is what it is.
 * ========================================================================== */

@media (max-width: 768px) {

  /* ── iOS focus zoom ────────────────────────────────────────────────────────
   * Measured: all 16 form controls rendered at 14px.
   *
   * Safari on iOS zooms the viewport whenever a focused field is under 16px,
   * then leaves the user pinching back out. It fires on sign-in, sign-up,
   * password reset, the LinkedIn tool and settings — the entire entry path.
   * 16px is the exact threshold, not a preference.
   *
   * The alternative fix, `user-scalable=no` in the viewport meta, disables
   * pinch zoom for everyone including people who need it. This is the
   * accessible way to get the same result.
   */
  /* !important is deliberate and load-bearing here. Three controls (#liRole,
   * #liProfile, #promoInput) set font-size:14px in an inline style attribute,
   * which no stylesheet can outrank. The declaration is scoped to this media
   * query, so desktop keeps its 14px and nothing outside touch widths is
   * affected. The alternative — editing three inline styles — would change
   * desktop sizing too. */
  input, select, textarea,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="url"], input[type="tel"], input[type="number"], input[type="date"] {
    font-size: 16px !important;
  }

  /* ── Tap targets ───────────────────────────────────────────────────────────
   * Measured: footer and inline links were 13–19px tall. Apple's guideline is
   * 44px, Google's is 48dp.
   *
   * Padding rather than height, so the text stays where it is and only the
   * touchable area grows — enlarging the visual element would wreck the
   * footer layout. inline-block is required for vertical padding to apply.
   */
  /* Selector list is explicit rather than `a { padding }` on purpose: padding
   * every link would create overlapping hit areas inside article paragraphs
   * and open visible gaps mid-sentence. These are the containers the audit
   * actually flagged — footers, the auth fine print, the sidebar logout, the
   * app back-link and the support FAQ body. */
  footer a, .footer a, .footer-links a, .auth-fine a, .ac-url,
  .nav-links a:not(.nav-btn), .back,
  .sb-logout, .hdr-back, .faq-a a,
  .modal a, .viewer-box a, .overlay a,
  .auth-box + div a, #mainApp > div:last-child a {
    display: inline-block;
    padding-block: 10px;
    /* Pull the row back together so the bigger hit area does not add
       visible space between links. */
    margin-block: -6px;
  }

  .footer-links, footer > div, .footer > div {
    row-gap: 4px;
  }

  /* The sidebar logout is a 22x25 glyph — the smallest control in the app and
   * the one with the worst consequence if mis-tapped next to it. */
  .sb-logout { min-width: 40px; min-height: 40px; display: inline-flex;
               align-items: center; justify-content: center; }

  /* ── Legibility floor ──────────────────────────────────────────────────────
   * Measured: 8px on the template PRO badges, 9–11px elsewhere.
   * 8px is unreadable on a phone; badges can stay small but not that small.
   */
  .tpl-pro-badge, .sb-badge, .ac-badge, .ref-status, .vf-count {
    font-size: 10.5px;
  }

  /* ── Comfortable hit area on controls that are already buttons ─────────── */
  .btn-sm, .vt-chip, .vf-chip, .tf-chip {
    min-height: 40px;
  }

  /* Keyboard focus must stay visible once these are enlarged. */
  a:focus-visible, button:focus-visible,
  input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--gold2, #D6B98C);
    outline-offset: 2px;
  }
}

/* ── Motion ──────────────────────────────────────────────────────────────────
 * Not viewport-specific: honour the OS setting on every device. The sidebar
 * slide, card hovers and toasts all animate, and for someone with vestibular
 * sensitivity that is a real problem rather than a nicety.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}