/* Readable data tables. Wide content scrolls inside its own region. */
@media screen {
  body :is(.guide-table-wrap, .type-guide__table, .table-scroll, .cookie-table-scroll, .responsive-table__scroller) {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
  }

  body .responsive-table__scroller {
    width: 100%;
    overscroll-behavior-x: contain;
    scrollbar-width: auto;
    scrollbar-color: var(--cta-bg, #1D4E89) var(--soft, #f4f5f5);
  }

  html body .responsive-table__scroller:focus-visible {
    outline: 2px solid var(--cta-bg, #1D4E89);
    outline-offset: 3px;
  }

  body .responsive-table__scroller::-webkit-scrollbar { height: 12px; }
  body .responsive-table__scroller::-webkit-scrollbar-track { background: var(--soft, #f4f5f5); }
  body .responsive-table__scroller::-webkit-scrollbar-thumb {
    background: var(--cta-bg, #1D4E89);
    border: 3px solid var(--soft, #f4f5f5);
    border-radius: 6px;
  }

  /* Baselines also work before the enhancement script has loaded. */
  body.page-kennisbank main table.guide-table { min-width: var(--table-min-width, 28rem); font-size: 1rem; }
  body.about-page main table.data-table :is(th, td) { font-size: 1rem; }
  body .type-guide__table > table { min-width: 46rem; }
  body .cookie-table-scroll > table { min-width: 38rem; }
  body .seo-static-content table.product-specs-table { overflow-wrap: anywhere; }

  body .responsive-table__scroller > table.responsive-table {
    width: 100%;
    min-width: var(--table-min-width, 28rem);
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 1rem;
    line-height: 1.5;
  }

  body .responsive-table__scroller > table.responsive-table :is(th, td) {
    padding: 12px 14px;
    font-size: 1rem;
    line-height: 1.5;
    vertical-align: top;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }

  body .responsive-table__scroller > table.responsive-table th {
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
  }

  body .responsive-table__scroller > table.responsive-table tbody th {
    background: var(--card, #fff);
    color: var(--heading, #0f172a);
    font-weight: 600;
    text-align: left;
  }

  body .responsive-table__scroller > table.responsive-table caption {
    padding: 12px 14px;
    font-size: .875rem;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
  }

  body .responsive-table__scroller > table.product-specs-table { --table-min-width: 0px; }
  body .responsive-table__scroller > table.product-specs-table th { width: 40%; }
  body .responsive-table__scroller > table.compare-specs__table :is(th, td):first-child { width: 9rem; }
  body .responsive-table__scroller > table.responsive-table img { min-height: 0; }

  body .responsive-table__hint {
    margin: 8px 0;
    color: var(--text-muted, #475569);
    font-size: .875rem;
    line-height: 1.5;
  }
  body .responsive-table__hint[hidden] { display: none; }

  /* Keep the feature labels useful without covering most of a phone screen. */
  body .compare-modal__body table.compare-table { table-layout: fixed; }
  body .compare-modal__body table.compare-table :is(th, td):first-child {
    width: 9rem;
    min-width: 0;
    max-width: 9rem;
    z-index: 1;
  }
  body .compare-modal__body { min-height: 0; min-width: 0; overflow-y: auto; }

  @media (max-width: 768px) {
    body .responsive-table__scroller > table.responsive-table :is(th, td) { padding: 10px 12px; }
  }
}

@media print {
  .responsive-table__hint { display: none !important; }
  .responsive-table__scroller { overflow: visible !important; max-width: none; }
  .responsive-table__scroller > table { min-width: 0 !important; width: 100%; }
}