/*
 * shared.css — Responsive additions for all SideQuests public pages
 * Loaded after each page's own <style> block.
 */

/* ── Prevent iOS font-size auto-adjust ──────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Prevent iOS zoom on form inputs (needs font-size ≥ 16px) ───── */
@media (hover: none) and (pointer: coarse) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* ── Header: trim on very small screens ─────────────────────────── */
@media (max-width: 500px) {
  .sq-logo-text span { display: none; }
  .sq-beta           { display: none; }
}

/*
 * ── Content width — fill the screen properly on desktop ─────────
 *
 * All content containers get fluid width:
 * calc(100% - 48px) = 24px gutter each side, up to a sensible cap.
 *
 * Tool / home pages  → 1400px cap (cards, forms, grids)
 * Reading pages      → 1200px cap (notes, privacy — keeps line lengths sane)
 * Feature tiles      → 900px (decorative accent row, stays compact)
 *
 * On a 1440px monitor:
 *   tools-wrap / upload-main → 1392px (just 24px each side) ✓
 *   page-wrap                → 1200px (120px each side)      ✓
 * On a 1920px monitor:
 *   tools-wrap / upload-main → 1400px (260px each side)      ✓
 *   page-wrap                → 1200px (360px each side)      ✓
 */

.tools-wrap,
.upload-main {
  width: calc(100% - 48px);
  max-width: 1400px;
}

.page-wrap,
.main {
  width: calc(100% - 48px);
  max-width: 1200px;
}

.features-wrap {
  max-width: 900px;
}

/* ── Tables: scroll horizontally on small screens ───────────────── */
.def-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Auth cards: full width with a gutter on small screens ──────── */
@media (max-width: 520px) {
  .auth-wrap { padding-left: 16px; padding-right: 16px; }
  .auth-card { width: 100%; }
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}