/* mobile-fix.css v2 — cache-busting fix file (new filename avoids 1-year CSS cache)
   Key fix: overflow-x:clip (not hidden) on parents so child table scroll works.
   overflow-x:hidden creates a scroll container that blocks child overflow-x:auto.
   overflow-x:clip clips visually without creating a scroll container. */

/* 1 ── Global page containment ─────────────────────────────────────── */
html {
  overflow-x: hidden;     /* viewport-level: fine here, no child scrollers at html level */
  width: 100%;
  max-width: 100%;
}
body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* 2 ── Layout ancestors: clip NOT hidden (preserves child scroll containers) */
.calc-page-layout,
.page-main {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;     /* ← clip: visual containment without absorbing scroll */
  box-sizing: border-box;
}

/* mc-tabs can exceed viewport if labels are long */
.mc-tabs {
  max-width: 100% !important;
  overflow-x: auto !important;
  flex-wrap: wrap !important;
}

/* 3 ── Guide wrapper: clip on outer, NOT inner (so tables scroll inside) ── */
.calc-guide {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;     /* ← clip: keeps guide inside viewport */
  box-sizing: border-box;
  contain: layout style;  /* layout+style containment, NOT paint — paint would block scroll */
}

/* 4 ── Article card: no overflow property at all (let table-wrapper scroll) */
.calc-guide .article-copy {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 !important;
  overflow: visible;    /* ← must be visible so table-wrapper scroll works */
}

/* 5 ── All guide descendants: min-width:0 (grid/flex shrink) ── */
.calc-guide * {
  min-width: 0;
  box-sizing: border-box;
}

/\* 6 ── TABLE SCROLL ────────────────────────────────────────────────────
   Desktop: full-width, normal wrapping.
   Mobile: wrapper scrolls, table at natural/min width, cells nowrap. */
.calc-guide .table-wrapper { width: 100%; max-width: 100%; margin: 0.75rem 0; }

@media (min-width: 769px) {
  .calc-guide .table-wrapper { overflow: visible !important; }
  .calc-guide .compare-table { width: 100% !important; min-width: 0 !important; table-layout: auto !important; }
  .calc-guide th, .calc-guide td { white-space: normal !important; }
}

@media (max-width: 768px) {
  .calc-guide .table-wrapper { overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 10px; }
  .calc-guide .compare-table { width: max-content !important; min-width: 760px !important; table-layout: auto !important; }
  .calc-guide th, .calc-guide td { white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; }
  .calc-guide th { font-size: 0.95rem; font-weight: 700; }
  .calc-guide td { font-size: 0.95rem; line-height: 1.45; }
}


/* 7 ── Stat row: single column on mobile ─────────────────────────────── */
@media (max-width: 768px) {
  .stat-row {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  .calc-guide .article-copy {
    padding: 1rem !important;
    gap: 1.1rem !important;
  }
  .calc-guide .table-wrapper {
    border-radius: 10px;
    margin: 0.6rem 0;
  }
}