/* 2nd Thought — mobile containment (salary hero + tables). Safe to keep even if styles.css churns. */
.layout-with-rail {
  grid-template-columns: minmax(0, 1fr);
}
.layout-with-rail > *,
.page > *,
.board, .board-hero, #liveBoard,
.salary-hero, .salary-answer, .salary-hero-main, .salary-hero-actions,
.product-card, .product-head, .stat-grid, .stat-card,
.table-wrap, .metro-table-wrap, .rpp-card, .honesty, .agent-card,
.gap-strip, .gap-item, .calc-main, .card.calc, .answer, .results {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
@media (min-width: 1040px) {
  .layout-with-rail {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

.agent-card { overflow: hidden; }
.agent-card pre {
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.table-wrap,
.metro-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-table th,
.compare-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.salary-answer,
.salary-hero,
.answer,
.results {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

@media (max-width: 899px) {
  .stat-grid,
  .gap-strip,
  .calc-grid.two,
  .pair-grid,
  .split-grid,
  .tool-grid {
    grid-template-columns: 1fr !important;
  }
  .salary-hero {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }
  html, body {
    max-width: 100%;
    overflow-x: clip;
  }
}