/* ============================================================
   SO3D site-wide mobile layer (changelog #207)
   Loaded LAST on every public/member page (after each page's own inline
   <style>), so it only has to patch what breaks on phones:
   - a hamburger menu (built by assets/site-mobile.js) replacing the
     nav links that each page simply hid below 640px, and the
     Sign up / Sign in / Dashboard buttons that pushed the header wider
     than the screen;
   - no sideways page scroll;
   - comfortable tap targets and 16px form inputs (stops iOS auto-zoom).
   ============================================================ */

.so3d-mnav-btn, .so3d-mnav-panel { display: none; }

/* Footer social icons whose link is still a "#" placeholder stay hidden
   until a real profile URL is filled in (changelog #218). */
.socials a[href="#"] { display: none !important; }
.socials:not(:has(a:not([href="#"]))) { display: none; }

@media (max-width: 900px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, video, canvas, iframe { max-width: 100%; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
  table { max-width: 100%; }

  /* ---- Header: brand · Launch app · hamburger ---- */
  .nav .nav-inner { gap: 0.5rem; min-height: 56px; }
  .nav .nav-menu { display: none !important; }
  .nav .nav-right { gap: 0.4rem; flex-shrink: 0; }
  .nav .nav-right > a.btn:not(.btn-accent),
  .nav .nav-right > .btn-ghost { display: none !important; }
  .nav .nav-right .btn-accent { padding: 0.55rem 0.85rem; font-size: 0.74rem; min-height: 38px; }
  .nav .brand { min-width: 0; }
  .nav .brand-word { white-space: nowrap; }

  .so3d-mnav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex-shrink: 0; padding: 0;
    border-radius: 10px; border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.03); color: #f4f4f5; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .so3d-mnav-btn svg { width: 20px; height: 20px; display: block; }
  .so3d-mnav-btn .so3d-mnav-close { display: none; }
  .so3d-mnav-open .so3d-mnav-btn .so3d-mnav-burger { display: none; }
  .so3d-mnav-open .so3d-mnav-btn .so3d-mnav-close { display: block; }
  .so3d-mnav-open .so3d-mnav-btn { border-color: rgba(245,255,0,0.55); color: #f5ff00; }

  .so3d-mnav-panel {
    display: block; position: fixed; left: 0; right: 0; z-index: 190;
    top: var(--so3d-mnav-top, 57px);
    max-height: calc(100vh - var(--so3d-mnav-top, 57px));
    max-height: calc(100dvh - var(--so3d-mnav-top, 57px));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: rgba(10,10,11,0.98); border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 24px 50px rgba(0,0,0,0.55);
    padding: 0.5rem 1rem 1.1rem;
    transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .so3d-mnav-open .so3d-mnav-panel {
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .so3d-mnav-panel a, .so3d-mnav-panel button.so3d-mnav-item {
    display: flex; align-items: center; gap: 0.7rem; width: 100%;
    min-height: 48px; padding: 0 0.6rem; border: 0; border-radius: 10px;
    background: none; color: #e4e4e7; font: inherit; font-size: 1rem; font-weight: 600;
    text-decoration: none; text-align: left; cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .so3d-mnav-panel a:active, .so3d-mnav-panel button.so3d-mnav-item:active { background: rgba(255,255,255,0.06); }
  .so3d-mnav-panel a.active { color: #f5ff00; }
  .so3d-mnav-panel .so3d-mnav-sep { height: 0.6rem; }
  .so3d-mnav-panel .so3d-mnav-who { color: #a1a1aa; font-size: 0.85rem; padding: 0.6rem 0.6rem 0.2rem; }
  .so3d-mnav-panel a.so3d-mnav-cta {
    justify-content: center; margin-top: 0.8rem; border: 0;
    background: #f5ff00; color: #000; border-radius: 100px; font-weight: 700;
  }
  .so3d-mnav-scrim {
    position: fixed; inset: 0; z-index: 180; background: rgba(0,0,0,0.45);
    opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0s linear 0.18s;
  }
  .so3d-mnav-open .so3d-mnav-scrim { opacity: 1; visibility: visible; transition: opacity 0.18s ease; }
  .so3d-mnav-open nav.nav { z-index: 195; }

  /* ---- Site search overlay: full width, no sideways bleed ---- */
  .search-overlay { padding: 4.5rem 0.75rem 1rem; }
  .search-modal { max-width: 100%; }
  .search-input-wrap input { font-size: 16px; min-width: 0; }
  .search-kbd { min-height: 32px; min-width: 44px; }

  /* ---- Forms: 16px text stops iOS zooming in on focus ---- */
  input[type=text], input[type=email], input[type=password], input[type=search],
  input[type=number], input[type=url], input[type=tel], textarea, select {
    font-size: 16px;
  }

  /* ---- Footer "All systems operational · time": one tidy line ---- */
  .foot-status { display: block; line-height: 1.6; }
  .foot-status .dot { display: inline-block; margin-right: 0.4rem; vertical-align: middle; }
  .foot-status #footTime { white-space: nowrap; }

  /* ---- Dashboard: project action buttons wrap instead of spilling out ---- */
  .row-actions { flex-wrap: wrap; gap: 0.45rem; max-width: 100%; }
  .row-actions form { margin: 0; }
  .row-btn, .del-btn { min-height: 38px; }

  /* ---- Tap targets for small inline links in footers / tables of contents ---- */
  footer a, .foot a, .toc a, .doc-toc a { display: inline-block; padding-top: 6px; padding-bottom: 6px; }
}