/* ───────────────────────────────────────
   FILE: css/mobile.css
   PURPOSE: Responsive + MOBILE-FIRST RESPONSIVE OVERRIDES. Loaded late so its media
            queries win. Primary viewport 390px. Reduced-motion overrides included.
   PART OF: Sentinel website stylesheet (split from css/styles.css)
   LAST UPDATED: 2026-06-05
   ─────────────────────────────────────── */

@media (max-width: 1080px) {
  .form-layout { grid-template-columns: 1fr; }
  .preview-col { order: -1; }
  .preview-sticky { position: static; max-width: 360px; }
}
@media (max-width: 860px) {
  :root { --gutter: 24px; }
  nav { padding: 14px 20px; }
  .ticker { top: 52px; }

  /* Mobile nav — slide-in panel from the right + blur backdrop (Part 4) */
  .nav-hamburger { display: flex; }
  .nav-links {
    position: fixed;
    top: 0; right: 0;
    height: 100vh; height: 100svh;
    width: min(80vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-left: 0;
    padding: 92px 28px 28px;
    background: rgba(10, 10, 8, 0.92);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.34s var(--ease-out);
    visibility: hidden;
    z-index: 120;
  }
  .nav-links.open { transform: translateX(0); visibility: visible; }
  .nav-links a {
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-2);
    font-size: 14px;
  }
  @supports not ((backdrop-filter: blur(1px)) or
                 (-webkit-backdrop-filter: blur(1px))) {
    .nav-links { background: rgba(10, 10, 8, 0.98); }
  }
  .nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.34s ease, visibility 0.34s ease;
    z-index: 110;
  }
  .nav-backdrop.open { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }

  /* hamburger morphs to an X when the panel is open */
  .nav-hamburger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .nav-hamburger span { transition: transform 0.25s var(--ease-out), opacity 0.2s ease; }
  .hero { padding: 130px 22px 80px; }
  .hero-orbit { width: 600px; height: 600px; }
  .hero-readout { grid-template-columns: repeat(2, 1fr); }
  .readout-cell { border-bottom: 1px solid var(--border); }

  .philosophy { grid-template-columns: 1fr; gap: 56px; padding: 90px 22px; }
  .counters { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .counter:nth-child(2n) { border-right: none; }
  .counter:nth-child(-n+2) { border-bottom: 1px solid var(--border); }

  /* on mobile the showcase becomes a stacked list, not scrub */
  .showcase-stage { height: auto; }
  .showcase-sticky {
    position: static; height: auto;
    grid-template-columns: 1fr;
    padding: 24px 22px; gap: 32px;
  }
  .caption-card {
    position: static; opacity: 1; transform: none;
    padding-bottom: 32px; border-bottom: 1px solid var(--border-2);
    margin-bottom: 32px;
  }
  .caption-track { min-height: 0; }
  .showcase-rail { display: none; }
  .showcase-phone { display: none; }

  .ledger-head, .ledger-row { grid-template-columns: 50px 1fr 90px; }
  .ledger-row .when, .ledger-head span:nth-child(4) { display: none; }
  .ledger-row .city { font-size: 10px; }

  .field-row { grid-template-columns: 1fr; }
  .option-group { grid-template-columns: 1fr; }
  .accent-group { grid-template-columns: 1fr 1fr 1fr; }
  .route-actions { grid-template-columns: 1fr; }
  .survey-options,
  .rating-options { grid-template-columns: 1fr; }
  .auth-shell { padding: 110px 22px 52px; }
  .auth-panel { padding: 28px; }
  .admin-head,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .footer-row { flex-direction: column; gap: 12px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orbit-spin, .ticker-track, .pulse-dot, .nav-status-dot, .hero-scroll-line { animation: none; }
}

/* Base mobile layout */
@media (max-width: 768px) {
  /* Hide cursor system entirely on touch */
  .cursor-dot, .cursor-ring { display: none !important; }

  /* Remove loader on mobile */
  .loader { display: none !important; }

  /* Navigation — slide-in panel rules live in the max-width:860 block above.
     Keep the bar itself single-line; do not wrap. */
  #nav {
    padding: 12px 16px;
    gap: 8px;
  }
  .nav-status {
    font-size: 10px;
    gap: 6px;
  }

  /* Add hamburger button — shown only on mobile */
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    padding: 4px;
    margin-left: auto;
  }
  .nav-hamburger span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--text);
  }

  /* Hero — single column, full height screen */
  .hero {
    min-height: 100svh;
    padding: 64px 24px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Tighten the vertical rhythm so the wordmark, schematic and CTAs read as one
     unit instead of three pieces drifting apart (the schematic's own viewBox
     reserves the upper band for the top readouts — that whitespace is part of
     the animation and is left intact). */
  .hero-meta { margin-bottom: 14px; }
  .hero-subtitle-tag { margin-bottom: 14px; }
  .hero-schematic { margin-bottom: 32px; }
  .hero-actions { margin-bottom: 24px; }

  /* Orbit SVG — scale down on mobile */
  .hero-orbit {
    width: 280px;
    height: 280px;
    opacity: 0.4;
  }

  /* Typography scaling */
  h1, .hero-title { font-size: clamp(32px, 8vw, 56px); }
  h2 { font-size: clamp(24px, 6vw, 40px); }

  /* Section padding */
  section { padding: 48px 24px; }
  .section-inner { padding: 0; }

  /* Cards — full width on mobile */
  .card-grid, .module-grid, .pillar-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Buttons — full width, large tap targets */
  .btn-submit, .btn-cta, .nav-cta {
    width: 100%;
    min-height: 48px;
    font-size: 14px;
    text-align: center;
  }

  /* Survey shell — full screen on mobile */
  .survey-shell {
    padding: 80px 20px 40px;
    min-height: 100svh;
  }
  .auth-panel {
    max-width: 100%;
    padding: 0;
  }

  /* Survey options — full width tap targets */
  .option {
    padding: 14px 16px;
    min-height: 48px;
  }
  .option-group {
    gap: 8px;
  }

  /* Survey form navigation buttons */
  .form-nav {
    flex-direction: row;
    gap: 12px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 20px;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    z-index: 100;
  }
  .btn-prev {
    min-height: 48px;
    flex: 0 0 80px;
  }
  .btn-submit {
    min-height: 48px;
    flex: 1;
  }

  /* Survey result blocks */
  .result-block {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
  }
  .result-archetype {
    font-size: 28px;
    font-family: var(--font-display);
    color: var(--accent);
    letter-spacing: 0.1em;
    margin: 8px 0;
  }
  .result-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.3em;
    color: var(--accent);
    text-transform: uppercase;
  }
  .result-description {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dim);
    margin-top: 8px;
  }
  .result-chief-message {
    font-size: 15px;
    line-height: 1.7;
    font-style: italic;
    color: var(--text);
    margin-top: 8px;
  }
  .result-note {
    font-size: 11px;
    color: var(--muted);
    margin-top: 8px;
    font-family: var(--font-mono);
  }
  .callsign-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-2);
  }
  .callsign-tag {
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--text);
    letter-spacing: 0.05em;
  }
  .callsign-status.available {
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 10px;
  }
  .callsign-status.taken {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 10px;
  }
  .status-banner {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    padding: 12px 16px;
    margin-bottom: 24px;
    font-family: var(--font-mono);
    font-size: 11px;
  }

  /* Footer */
  footer {
    padding: 32px 24px;
    font-size: 11px;
  }

  /* Philosophy pages — prose layout */
  .prose {
    font-size: 15px;
    line-height: 1.8;
    max-width: 100%;
  }
  .prose h2 {
    font-size: 20px;
    margin: 32px 0 12px;
  }

  /* Three column roadmap → single column */
  .roadmap-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Survey bottom padding for fixed nav bar */
  .survey-shell main,
  #survey-panel {
    padding-bottom: 80px;
  }
}

/* Tablet adjustments */
@media (min-width: 861px) and (max-width: 1024px) {
  section { padding: 64px 32px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop / wide tablet — inline nav row, hamburger hidden (matches the
   861px slide-panel boundary so there is no dead zone). */
@media (min-width: 861px) {
  .nav-hamburger { display: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-orbit-spin,
  .hero-sonar,
  .reveal,
  .reveal-stagger,
  * { animation: none !important; transition: none !important; }
}