/*
  Schumann Resonance Live — Master Design Fix v4
  Fixes: Layout consistency, chart professionalism, logo enhancement
  Load LAST after sr-overflow-fix.css
*/

/* ═══════════════════════════════════════════════════════════════
   1. LAYOUT CONSISTENCY — Equal widths, no overflow/gaps
   ═══════════════════════════════════════════════════════════════ */

/* Enforce consistent content lane across all sections */
html body.sr-site {
  --sr-content-lane: min(78rem, calc(100% - 2.5rem));
}

@media (max-width: 767px) {
  html body.sr-site {
    --sr-content-lane: calc(100% - 1.5rem);
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  html body.sr-site {
    --sr-content-lane: min(72rem, calc(100% - 3rem));
  }
}

/* All inner containers use same max-width */
html body.sr-site .max-w-7xl,
html body.sr-site .max-w-5xl,
html body.sr-site .max-w-4xl,
html body.sr-site .max-w-3xl,
html body.sr-site .sr-lane,
html body.sr-site .sr-hero-pro__shell,
html body.sr-site .footer-premium-shell,
html body.sr-site .sr-footer-pro__container,
html body.sr-site #dashboard > .max-w-7xl,
html body.sr-site #dashboard > div,
html body.sr-site #guide > .max-w-7xl,
html body.sr-site #guide > div,
html body.sr-site #about > .max-w-7xl,
html body.sr-site #about > div {
  max-width: var(--sr-content-lane) !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}

/* Ensure all full-bleed sections are truly 100% */
html body.sr-site section[id],
html body.sr-site .sr-hero-pro.sr-aether-hero,
html body.sr-site .footer-premium,
html body.sr-site .sr-faq-section,
html body.sr-site .sr-seo-section,
html body.sr-site .sr-promo-strip,
html body.sr-site #dashboard,
html body.sr-site #guide,
html body.sr-site #about {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: clamp(0.75rem, 2.5vw, 1.5rem) !important;
  box-sizing: border-box !important;
}

/* Remove any stray negative margins or excessive paddings */
html body.sr-site .sr-dash-pro .card,
html body.sr-site .sr-dash-pro-chart,
html body.sr-site .sr-dash-pro-trend,
html body.sr-site .sr-dash-pro .sr-viz-panel,
html body.sr-site .sr-faq-card,
html body.sr-site .sr-seo-card {
  margin-inline: 0 !important;
  max-width: 100% !important;
}

/* Consistent section vertical rhythm */
html body.sr-site section[id] + section[id] {
  margin-top: 0 !important;
}

/* Grid items don't overflow */
html body.sr-site .grid {
  max-width: 100% !important;
  overflow: hidden;
}

html body.sr-site .grid > * {
  min-width: 0 !important;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   2. PROFESSIONAL CHARTS — Enhanced visual quality
   ═══════════════════════════════════════════════════════════════ */

/* Live frequency chart card — refined frame */
html body.sr-site .sr-dash-pro-chart {
  border-radius: 1.35rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(170deg, rgba(12, 18, 34, 0.96) 0%, rgba(4, 8, 18, 0.98) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 32px 80px -12px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.03) !important;
  overflow: hidden !important;
}

/* Chart inner frame — crisp professional look */
html body.sr-site .sr-dash-pro-chart-frame {
  position: relative !important;
  height: clamp(13rem, 30vw, 16rem) !important;
  margin: 1rem 1.25rem !important;
  border-radius: 0.85rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(96, 165, 250, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(2, 8, 22, 0.98) 0%, rgba(4, 12, 30, 0.95) 100%) !important;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 0 32px rgba(96, 165, 250, 0.02) !important;
}

/* Chart canvas — smooth rendering */
html body.sr-site .sr-dash-pro-chart-frame canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  image-rendering: auto !important;
}

/* Trend charts — same elevated treatment */
html body.sr-site .sr-dash-pro-trend {
  border-radius: 1.35rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(170deg, rgba(12, 18, 34, 0.96) 0%, rgba(4, 8, 18, 0.98) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 24px 64px -8px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.03) !important;
}

html body.sr-site .sr-dash-pro-trend-frame {
  height: 11.5rem !important;
  margin: 0.85rem 1.1rem 1.1rem !important;
  border-radius: 0.85rem !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background:
    linear-gradient(180deg, rgba(2, 8, 22, 0.95) 0%, rgba(4, 12, 30, 0.92) 100%) !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Viz panels — earth cavity, spectrum, oscilloscope */
html body.sr-site .sr-dash-pro .sr-viz-panel {
  border-radius: 1.35rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(155deg, rgba(8, 16, 32, 0.92) 0%, rgba(4, 10, 22, 0.96) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 28px 72px -12px rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
}

html body.sr-site .sr-dash-pro .sr-viz-canvas-wrap {
  border-radius: 0.85rem !important;
  border: 1px solid rgba(56, 189, 248, 0.1) !important;
  background: rgba(2, 6, 14, 0.88) !important;
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Spectrogram — premium frame */
html body.sr-site .sr-dash-pro #spectrogram.sr-dash-pro-spectro {
  border-radius: 1.35rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(170deg, rgba(10, 16, 32, 0.96) 0%, rgba(4, 8, 18, 0.98) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 36px 96px -16px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.03) !important;
}

html body.sr-site .sr-dash-pro-spectro-viewport {
  border-radius: 0.85rem !important;
  border: 1px solid rgba(56, 189, 248, 0.12) !important;
  background: #010812 !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Insight tiles — subtle top glow */
html body.sr-site .sr-dash-pro-insight {
  border-radius: 1rem !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.008) 100%),
    rgba(6, 10, 18, 0.82) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px -4px rgba(0, 0, 0, 0.3) !important;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

html body.sr-site .sr-dash-pro-insight:hover {
  border-color: color-mix(in srgb, var(--dp-insight-accent, #e2c178) 40%, transparent) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 16px 40px -8px rgba(0, 0, 0, 0.4),
    0 0 24px color-mix(in srgb, var(--dp-insight-accent, #e2c178) 12%, transparent) !important;
}

/* Metric cards — uniform refined appearance */
html body.sr-site .sr-dash-pro .card.metric-card,
html body.sr-site #solar .card {
  border-radius: 1.15rem !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  background:
    linear-gradient(165deg, rgba(10, 16, 30, 0.95) 0%, rgba(4, 8, 18, 0.98) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 16px 48px -8px rgba(0, 0, 0, 0.4) !important;
  transition: border-color 0.3s ease, transform 0.3s ease !important;
}

html body.sr-site .sr-dash-pro .card.metric-card:hover,
html body.sr-site #solar .card:hover {
  border-color: rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-1px) !important;
}

/* Harmonic cards */
html body.sr-site .sr-dash-pro .grid .card:not(.metric-card) {
  border-radius: 1.15rem !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background:
    linear-gradient(170deg, rgba(10, 16, 30, 0.92) 0%, rgba(4, 8, 18, 0.96) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 12px 32px -6px rgba(0, 0, 0, 0.35) !important;
  transition: border-color 0.3s ease, transform 0.2s ease !important;
}

html body.sr-site .sr-dash-pro .grid .card:not(.metric-card):hover {
  border-color: rgba(251, 191, 36, 0.25) !important;
  transform: translateY(-2px) !important;
}

/* Harmonic progress bars — gradient */
html body.sr-site .harmonic-bar {
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 60%, #d97706 100%) !important;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.3) !important;
}

/* Section header glass card */
html body.sr-site .sr-dash-pro .sr-aether-dash-head {
  border-radius: 1.35rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(145deg, rgba(12, 18, 34, 0.92) 0%, rgba(6, 10, 22, 0.96) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 20px 56px -12px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(28px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(150%) !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. LOGO — More logo-like, refined mark
   ═══════════════════════════════════════════════════════════════ */

/* Nexus mark container — tighter, more iconic */
html body.sr-site .sr-nexus-mark {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3.2rem !important;
  height: 3.2rem !important;
  border-radius: 1rem !important;
  background:
    linear-gradient(145deg, rgba(6, 20, 42, 0.98) 0%, rgba(2, 10, 24, 0.99) 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow:
    0 0 0 3px rgba(56, 189, 248, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

html body.sr-site .sr-nexus-logo {
  width: 2.4rem !important;
  height: 2.4rem !important;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.25)) !important;
}

/* Glow ring around logo — subtle professional */
html body.sr-site .sr-nexus-mark-glow {
  position: absolute !important;
  inset: -3px !important;
  border-radius: 1.15rem !important;
  background: conic-gradient(
    from 0deg,
    rgba(56, 189, 248, 0.3),
    rgba(251, 191, 36, 0.15) 25%,
    rgba(56, 189, 248, 0.05) 50%,
    rgba(251, 191, 36, 0.15) 75%,
    rgba(56, 189, 248, 0.3)
  ) !important;
  opacity: 0.6 !important;
  animation: sr-logo-glow-spin 12s linear infinite !important;
  z-index: -1 !important;
}

@keyframes sr-logo-glow-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

html body.sr-site .sr-nexus-mark-ring {
  position: absolute !important;
  inset: -1px !important;
  border-radius: 1.1rem !important;
  border: 1px solid rgba(56, 189, 248, 0.2) !important;
  animation: sr-logo-ring-pulse 3.5s ease-in-out infinite !important;
}

@keyframes sr-logo-ring-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.04); }
}

/* Brand lockup text — tighter professional spacing */
html body.sr-site .sr-vdm-brand {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.15rem !important;
  min-width: 0 !important;
}

html body.sr-site .sr-vdm-brand-title {
  font-family: 'Syne', 'Inter', system-ui, sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  background: linear-gradient(135deg, #f8fafc 0%, #bae6fd 45%, #fde68a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Responsive logo sizes */
@media (min-width: 1280px) {
  html body.sr-site .sr-nexus-mark {
    width: 3.5rem !important;
    height: 3.5rem !important;
    border-radius: 1.1rem !important;
  }

  html body.sr-site .sr-nexus-logo {
    width: 2.6rem !important;
    height: 2.6rem !important;
  }

  html body.sr-site .sr-vdm-brand-title {
    font-size: 0.95rem !important;
  }
}

@media (max-width: 767px) {
  html body.sr-site .sr-nexus-mark {
    width: 2.85rem !important;
    height: 2.85rem !important;
    border-radius: 0.85rem !important;
  }

  html body.sr-site .sr-nexus-logo {
    width: 2.1rem !important;
    height: 2.1rem !important;
  }

  html body.sr-site .sr-vdm-brand-title {
    font-size: 0.72rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   4. VISUAL CONSISTENCY — Section transitions & polish
   ═══════════════════════════════════════════════════════════════ */

/* Smooth section transitions */
html body.sr-site section[id] {
  border-top: none !important;
  border-bottom: none !important;
}

/* Consistent card spacing in grids */
html body.sr-site .sr-dash-pro .grid {
  gap: 1rem !important;
}

@media (min-width: 1024px) {
  html body.sr-site .sr-dash-pro .grid.grid-cols-2,
  html body.sr-site .sr-dash-pro .grid.lg\:grid-cols-2 {
    gap: 1.25rem !important;
  }

  html body.sr-site .sr-dash-pro .grid.lg\:grid-cols-4 {
    gap: 1rem !important;
  }

  html body.sr-site .sr-dash-pro .grid.lg\:grid-cols-5 {
    gap: 1rem !important;
  }
}

/* Viz suite consistent spacing */
html body.sr-site .sr-dash-pro .sr-viz-suite {
  gap: 1.25rem !important;
}

/* Ensure all viz canvas heights are consistent */
html body.sr-site .sr-dash-pro .sr-viz-canvas-wrap--earth {
  aspect-ratio: 1 / 1 !important;
  max-height: 340px !important;
}

html body.sr-site .sr-dash-pro .sr-viz-canvas-wrap--spectrum {
  height: 220px !important;
}

html body.sr-site .sr-dash-pro .sr-viz-canvas-wrap--scope {
  height: 180px !important;
}

/* Footer consistent */
html body.sr-site .footer-premium {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Avoid text overflow in any card */
html body.sr-site .card,
html body.sr-site [class*="sr-dash-pro"] {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Tab row no overflow */
html body.sr-site .sr-dash-pro-tabs {
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

html body.sr-site .sr-dash-pro-tabs::-webkit-scrollbar {
  display: none !important;
}