/* STAGE126 — MOBILE RESPONSIVE HOTFIX
Scope: screen only <= 820px. Desktop + print remain Stage125 frozen. */

html, body {
  max-width: 100%;
  overflow-x: clip;
}
body { min-width: 0 !important; }

img, svg, canvas, video, iframe {
  max-width: 100% !important;
  height: auto !important;
}

main, section, article, header, footer, nav, div { min-width: 0; }

a, p, li, td, th, h1, h2, h3, h4, h5, h6, span, strong, b {
  overflow-wrap: anywhere;
  word-break: normal;
}

.chapter, .hero, section {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* Collapse known multi-column layouts */
.power-map121,
.obbb-cards121,
.obbb-bridge121,
.timeline121,
.solar-risk120,
.origin-grid120,
.origin-grid122,
.storyMapGrid120,
.hero-grid,
.section-grid,
.card-grid,
.stat-grid,
.kpi-grid,
.metric-grid,
.feature-grid {
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Hero */
.hero h1, .hero-title, h1 {
  font-size: clamp(3rem, 14vw, 5.4rem) !important;
  line-height: .9 !important;
  max-width: 100% !important;
  letter-spacing: -.04em !important;
}
.hero p, .hero-lead {
  font-size: 1.04rem !important;
  line-height: 1.5 !important;
  max-width: 100% !important;
}
.hero-kpis, .kpis, .heroStats, .hero-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

/* Navigation stays usable instead of being clipped */
.topnav, .site-nav, .main-nav, header nav, .story-nav, .chapter-nav, nav[aria-label] {
  max-width: 100vw !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
}
.topnav::-webkit-scrollbar, .site-nav::-webkit-scrollbar, .main-nav::-webkit-scrollbar,
.story-nav::-webkit-scrollbar, .chapter-nav::-webkit-scrollbar, nav[aria-label]::-webkit-scrollbar {
  display: none;
}
.topnav a, .site-nav a, .main-nav a, header nav a, .story-nav a, .chapter-nav a, nav[aria-label] a {
  display: inline-flex;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  scroll-snap-align: start;
}

/* Story map / floating controls */
#storyMap120, .storyMap120, .story-map, .story-map-trigger, .storyMapButton120 {
  max-width: calc(100vw - 36px) !important;
}

/* Wide tables scroll inside their own region */
.table-wrap, .table-shell, .tariffTableShell104, .responsive-table {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
table {
  width: max-content !important;
  min-width: 100% !important;
  border-collapse: collapse;
}
th, td {
  white-space: normal !important;
  max-width: 68vw;
}
#tariffMaster34 table, .tariffTableShell104 table {
  min-width: 760px !important;
}

/* Panels/cards */
.card, .panel, .callout, .source-card, .evidence-card, .metric-card,
.power-map121 article, .obbb-cards121 article, .timeline121 article {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.power-map121, .obbb-cards121, .timeline121 { gap: 12px !important; }

/* Long horizontal mechanisms become locally scrollable */
.process, .process-row, .flow, .flow-row, .formula, .equation, .pipeline,
.money-flow, .rule-strip, .power-rule121 {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Solar calculator */
input, select, button, textarea {
  max-width: 100% !important;
  box-sizing: border-box;
}
input[type="number"] { width: 100% !important; }
.solar-calculator, .solar-model, .solar-tool, .solar-risk120, #solar-decision118 {
  max-width: 100% !important;
}
.solar-calculator form, .solar-model form, .solar-tool form {
  grid-template-columns: 1fr !important;
}

/* Charts */
.chart, .chart-shell, .chart-wrap, canvas {
  width: 100% !important;
  max-width: 100% !important;
}

h2 {
  font-size: clamp(2rem, 10vw, 3.6rem) !important;
  line-height: .98 !important;
}

@media (max-width: 480px) {
  .chapter, .hero, section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .hero h1, .hero-title, h1 {
    font-size: clamp(2.75rem, 16vw, 4.5rem) !important;
  }
  .hero-kpis, .kpis, .heroStats, .hero-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  .chapter-no, .chapterNo, .chapter-number {
    position: static !important;
    margin-bottom: 10px !important;
  }
}