/* Responsive helpers for tables and small viewports
   - Adds a horizontal-scroll container for wide tables
   - Prevents excessive wrapping of table cells so readers can scroll
   - Provides an optional stacked layout for very narrow screens
*/

/* Helper wrapper: use in markdown/HTML as <div class="table-responsive"> around tables
   If you can't add wrapper markup, the rules below will still make tables scroll. */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ensure tables do not exceed their container and keep cells readable */

/* Make tables scroll horizontally when they overflow their container.
   Using `display:block` allows the browser to show a horizontal scrollbar
   without breaking the table layout in most static-content scenarios. */
.chapter-content table,
.container table,
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}

.chapter-content table th,
.chapter-content table td,
.table-responsive table th,
.table-responsive table td {
  /* Keep cell content on a single line so horizontal scrollbar appears */
  white-space: nowrap;
}

/* On narrow viewports, allow horizontal scrolling on the chapter-content wrapper
   (this keeps the rest of the layout intact while tables can be scrolled). */
@media (max-width: 800px) {
  .chapter-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chapter-content table { width: auto; }
}

/* Optional: alternate stacked layout for very narrow screens. To enable,
   add the class `stack-table` on a wrapping element (e.g. <div class="stack-table">).
   This converts rows into block sections so each row stacks vertically.
*/
@media (max-width: 480px) {
  .stack-table table,
  .stack-table thead,
  .stack-table tbody,
  .stack-table tr,
  .stack-table th,
  .stack-table td {
    display: block;
    width: 100%;
  }
  .stack-table tr { margin-bottom: 0.75rem; }
  .stack-table td { white-space: normal; }
}