/* ───────────────────────────────────────
   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: 80px 24px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* 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; }
}