/* DocuVision — shared mobile layer (phones only, <=680px). Loaded last on every customer page.
   Desktop is untouched. Colours come from each page's existing palette:
   marketing/auth pages: #0A84FF accent, #8E8E93 secondary; dashboard: var(--blue), var(--ink*) tokens. */
@media (max-width: 680px) {

  /* ── Base: no tap flash, no double-tap zoom on controls, steady text size ── */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: transparent; }
  a, button, select, label, summary, [role="button"], [onclick] { touch-action: manipulation; }

  /* Tap feedback: a quick dim on press (no transforms, so positioned controls don't move) */
  a:active, button:active, [role="button"]:active { opacity: .72; }

  /* Visible keyboard focus */
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid #4d8dff; outline-offset: 2px;
  }

  /* Forms: 16px text stops iOS zooming into fields; comfortable height */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: 16px !important; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select { min-height: 44px; }
  input[type="file"] { min-height: 44px; }

  /* ── Marketing pages (index, product, demo, docs) ── */
  body > nav:not(.nav-back):not(.topnav), #nav { padding-top: env(safe-area-inset-top, 0px) !important; height: calc(60px + env(safe-area-inset-top, 0px)) !important; }
  .nav-r a, .nr a, .demo-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-cta, .nbtn, .hbtns .bp, .hbtns .bs { min-height: 44px; }
  .hbtns > a { display: inline-flex; align-items: center; min-height: 44px; }
  .ex-link, .ex-card > a, .examples-grid > a, .wrap > .rv > a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-col a, .flc a, .footer-api a { display: flex !important; align-items: center; min-height: 44px; margin-bottom: 0 !important; }
  .wrap > .nav a { display: inline-flex; align-items: center; min-height: 44px; }

  .topnav { padding-top: env(safe-area-inset-top, 0px); height: calc(56px + env(safe-area-inset-top, 0px)); }
  .topnav-logo, .topnav-links a { white-space: nowrap; }
  .topnav-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .topnav-links { gap: 6px !important; }
  .topnav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  .tab-btn { min-height: 44px; }
  .copy-btn { min-height: 44px; min-width: 56px; padding: 0 12px !important; font-size: 12px !important; top: 4px !important; right: 4px !important; }

  /* Bottom tab bar on public pages: home-indicator safe, native height, clear active state */
  .mob-bottom-nav {
    height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(28, 28, 30, .94) !important;
    -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  }
  .mob-bottom-nav a { min-height: 50px; justify-content: center; border-radius: 10px; }
  body:has(.mob-bottom-nav) { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ── Sign-in pages (login, signup, forgot, reset) ── */
  .nav-back { padding-top: env(safe-area-inset-top, 0px); height: calc(56px + env(safe-area-inset-top, 0px));
              background: rgba(10, 10, 12, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }  /* page colour; keeps scrolling content from showing through */
  .nav-back a { min-height: 44px; color: #8E8E93; }          /* was #48484A (about 2.3:1) */
  .pw-toggle { width: auto !important; left: auto !important; min-height: 44px; min-width: 52px; }  /* mobile.css sets button{width:100%}; this kept "Show" over the whole field */
  .links-row { gap: 12px; flex-wrap: wrap; }
  .links-row .link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  .proof-text, .divider-text, .proof-logo { color: #8E8E93; }

  /* Contrast on phones: secondary text to the palette's #8E8E93 (5.2–6.1:1 on these backgrounds) */
  span[style*="color:#6b7280"] { color: #8E8E93 !important; }          /* index: "Trusted in" (was 3.5:1) */
  body:has(.topnav) { --g2: #8E8E93; }                                  /* docs: code labels, table heads (was 3.2:1) */
  .cm { color: #8b9bd0; }                                               /* docs: code comments (was 3.0:1, now 6.6:1+) */

  .footer-col a, .flc a { color: #8E8E93 !important; }               /* index/product footer links (were #48484A, about 2.2:1) */
  p[style*="color:#48484A"] { color: #8E8E93 !important; }          /* footer tagline */
  .fm, .footer-copy, .fc2 { color: #8E8E93 !important; }             /* product tagline, copyright lines */
  .b-block { color: #ff8a84 !important; }                            /* demo BLOCK badge text (4.2:1 -> 5.5:1) */
  #content:has(> .loading) { min-height: 2100px; }                    /* demo: hold the results' height while the scan loads (stops the jump) */

  /* ── Legal pages (terms, privacy) ── */
  body > p:first-child a { display: inline-flex; align-items: center; min-height: 44px; }

  /* ── Dashboard ── */
  .topbar {
    position: sticky; top: 0; z-index: 60;
    height: auto !important; min-height: calc(50px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px) !important;
    background: rgba(11, 20, 34, .92); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  }
  .mob-search-toggle { min-width: 44px; min-height: 44px; }
  .btn, .btn-sm, .abar-tools .btn { min-height: 44px !important; }
  .sbc { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  th[onclick] { height: 44px; }
  span[onclick] { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

  .mob-nav {
    background: rgba(11, 20, 34, .94) !important; border-top: 1px solid var(--rule, rgba(255,255,255,.06)) !important;
    -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  }
  .mob-btn { min-height: 48px; justify-content: center; border-radius: 12px; }
  .mob-btn.on { color: var(--blue); background: rgba(59, 120, 255, .12); }

  /* "More" sheet: slides up instead of popping in */
  .mob-more { display: flex !important; visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; }
  .mob-more.on { visibility: visible; opacity: 1; transition: opacity .2s ease; }
  .mob-more-sheet { transform: translateY(24px); transition: transform .26s cubic-bezier(.2, .8, .2, 1); position: relative; padding-top: 22px; }
  .mob-more.on .mob-more-sheet { transform: none; }
  .mob-more-sheet::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
  .mob-more-sheet button { min-height: 48px; }

  /* Momentum scrolling in inner scroll areas */
  .mob-more-sheet, [style*="overflow-x:auto"], [style*="overflow-x: auto"], .tbl-wrap, .table-wrap { -webkit-overflow-scrolling: touch; }
}

/* Respect "reduce motion" everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Small phones: hide the duplicate Home link in the docs nav (the logo goes home) */
@media (max-width: 420px) { .topnav-links a[href="/"] { display: none; } }

/* Signup on short screens scrolls from the top (its own rule pads 64px); add the notch inset in installed mode */
@media (max-width: 680px) and (max-height: 820px) {
  body:has(#signupForm) { padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important; }
  /* let the page grow with the card so its bottom padding clears the tab bar (height:100% clipped the last row) */
  html:has(#signupForm), body:has(#signupForm) { height: auto !important; min-height: 100%; }
}