/*
  Schumann Resonance Live — layout guard (load last)
  Prevents horizontal overflow, fixes RTL/long strings, smooth scroll UX.
*/

html {
  overflow-x: clip;
  scroll-behavior: auto;
  scrollbar-gutter: stable;
  --sr-scroll-p: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body.sr-site {
  overflow-x: clip !important;
  width: 100%;
  max-width: 100vw;
}

body.sr-site .site-wrapper {
  overflow-x: clip;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

body.sr-site #world-solar-bg {
  overflow: hidden;
  max-width: 100vw;
}

/* Hero glow was 120vw — main horizontal overflow source */
body.sr-site .hero-orbit-glow {
  width: 100% !important;
  max-width: 100vw !important;
  height: 100% !important;
  max-height: 100vh !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none;
}

body.sr-site .hero-stage {
  overflow: hidden;
}

/* Sections — no bleed */
body.sr-site section,
body.sr-site .sr-viz-suite,
body.sr-site .sr-seo-inner,
body.sr-site .footer-premium-shell,
body.sr-site .nav-glass {
  max-width: 100%;
}

body.sr-site .chart-tab-row {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

body.sr-site .chart-tab-row::-webkit-scrollbar {
  display: none;
}

body.sr-site .tab-btn {
  flex-shrink: 0;
  max-width: 14rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Long translations (DE, RU, AR, etc.) */
body.sr-site .brand-title,
body.sr-site .nav-cta-link,
body.sr-site .hero-visual-h1,
body.sr-site .hero-readout-meta,
body.sr-site .sr-viz-panel-title,
body.sr-site .sr-viz-panel-sub,
body.sr-site .sr-footer-desc,
body.sr-site .sr-seo-title,
body.sr-site .sr-seo-lead,
body.sr-site .card h3,
body.sr-site .faq-question {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

body.sr-site .sr-viz-panel-head {
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

body.sr-site .sr-viz-panel-head > div:nth-child(2) {
  min-width: 0;
  flex: 1 1 12rem;
}

body.sr-site .sr-viz-canvas-wrap,
body.sr-site .sr-viz-canvas-wrap canvas {
  max-width: 100%;
}

body.sr-site #main-spectro,
body.sr-site .spectro-image-wrap img {
  max-width: 100%;
  height: auto;
}

body.sr-site .hero-stats-row .card span {
  white-space: normal !important;
  text-align: center;
  line-height: 1.25;
}

/* RTL (Arabic) */
[dir="rtl"] body.sr-site .nav-glass .nav-shell,
[dir="rtl"] body.sr-site .hero-stats-row,
[dir="rtl"] body.sr-site .sr-viz-panel-head {
  direction: rtl;
}

[dir="rtl"] body.sr-site .chart-tab-row {
  direction: rtl;
}

/* Scroll performance — pause decorative motion while scrolling (not cosmos bg) */
body.is-scrolling .hero-orbit-glow,
body.is-scrolling .sr-section-orb {
  animation-play-state: paused !important;
}

/* Nav progress */
body.sr-site .nav-scroll-progress {
  transform-origin: left center;
  will-change: width;
}

[dir="rtl"] body.sr-site .nav-scroll-progress {
  transform-origin: right center;
}

/* Mobile menu open — no background scroll bleed */
body.sr-mobile-menu-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}

/* ── Smooth scroll polish ── */
body.sr-site .nav-scroll-progress {
  height: 2px;
  background: linear-gradient(90deg, #0d9488, #2dd4bf, #818cf8);
  box-shadow: 0 0 12px rgba(45, 212, 191, 0.45);
  transition: width 0.12s linear;
}

body.sr-site section[id] {
  scroll-margin-top: calc(var(--sr-nav-offset, 5.85rem) + 0.75rem);
}

/* ── Mobile: zero overflow, tight layout ── */
@media (max-width: 767px) {
  body.sr-site {
    overflow-x: clip !important;
    -webkit-text-size-adjust: 100%;
  }

  body.sr-site .site-wrapper,
  body.sr-site main,
  body.sr-site section,
  body.sr-site .hero-stage-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.sr-site .hero-stage,
  body.sr-site .sr-aether-hero:not(.sr-hero-pro) {
    padding-top: calc(var(--sr-nav-offset, 5.15rem) + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 1.35rem !important;
    padding-inline: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
  }

  body.sr-site .hero-visual-h1 {
    font-size: clamp(1rem, 4.8vw, 1.45rem) !important;
    line-height: 1.15 !important;
    padding-inline: 0.15rem;
  }

  body.sr-site .hero-freq-value {
    font-size: clamp(2.65rem, 15vw, 4rem) !important;
    line-height: 1 !important;
    max-width: 100%;
  }

  body.sr-site .hero-readout-shell {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 0.65rem !important;
  }

  body.sr-site .hero-readout-meta,
  body.sr-site .hero-readout-status {
    max-width: 100%;
    padding-inline: 0.15rem;
  }

  body.sr-site .hero-readout-status {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 0.35rem;
    font-size: 0.72rem;
  }

  body.sr-site .hero-stats-row {
    gap: 0.4rem !important;
    margin-bottom: 0.85rem !important;
  }

  body.sr-site .hero-stats-row .card {
    flex: 1 1 calc(50% - 0.25rem) !important;
    min-width: 0 !important;
    padding: 0.45rem 0.4rem !important;
  }

  body.sr-site .hero-audience-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
    padding: 0.85rem !important;
  }

  body.sr-site .hero-audience-copy {
    min-width: 0;
    max-width: 100%;
  }

  body.sr-site .nav-glass .nav-shell {
    padding-inline: 0.55rem;
    gap: 0.35rem;
    min-width: 0;
  }

  body.sr-site .nav-glass .nav-brand,
  body.sr-site .nav-glass .brand-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.sr-site .grid.grid-cols-2 {
    gap: 0.45rem !important;
  }

  body.sr-site #solar.grid-cols-2 .card,
  body.sr-site .grid.grid-cols-2 .card {
    min-width: 0;
    padding: 0.65rem !important;
  }

  body.sr-site .card {
    min-width: 0;
  }

  body.sr-site .sr-viz-panel {
    padding: 0.85rem !important;
  }

  body.sr-site .sr-viz-live-badge {
    flex-shrink: 0;
  }

  body.sr-site .spectro-container,
  body.sr-site .spectro-image-wrap {
    max-width: 100%;
    overflow: hidden;
  }

  body.sr-site .sr-footer-chips {
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  body.sr-site .sr-footer-chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 380px) {
  body.sr-site .hero-freq-value {
    font-size: clamp(2.35rem, 14vw, 3.2rem) !important;
  }

  body.sr-site .hero-cta-row a {
    font-size: 0.82rem;
    padding-inline: 0.85rem;
  }
}