/* Research pages (/research, /de/research).
   The blog stylesheet does the heavy lifting; this file only adds what a
   data-dense comparison page needs: a wide table that can scroll sideways on a
   phone instead of squeezing six columns into 360px, and a footnote style. */

.prose .tbl-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.4em 0;
  border-radius: 12px;
}

/* The article column is --readw (720px); a six-column provider table does not
   fit in it and would silently clip its last two columns. On wide screens let
   the table break out of the reading column, up to --maxw, staying centred.
   Below that it falls back to the sideways scroll above. */
@media (min-width: 1040px) {
  .prose .tbl-scroll {
    width: min(var(--maxw), calc(100vw - 56px));
    margin-left: calc(50% - min(var(--maxw), calc(100vw - 56px)) / 2);
    margin-right: 0;
  }
}
.prose .tbl-scroll table {
  margin: 0;
  min-width: 680px;
  font-size: .88rem;
}
.prose .tbl-scroll th,
.prose .tbl-scroll td {
  padding: .65em .85em;
  vertical-align: top;
}
.prose .tbl-scroll th {
  white-space: nowrap;
}
/* The provider column is the row's label: keep it on one line so the eye can
   run down it while the rest of the row wraps. */
.prose .tbl-scroll td:first-child {
  white-space: nowrap;
}
.prose .tbl-scroll sup {
  font-size: .72em;
  color: var(--ink-soft);
}

/* Source and cross-reference notes under a table or at the end of a section. */
.prose p.fn {
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* The key-takeaways list is the quotable part of the page: give it a little
   more air than a normal prose list so each line reads as its own fact. */
.prose h2#kurz + ul li,
.prose h2#takeaways + ul li {
  margin-bottom: .5em;
}

/* Below the breakout width the table scrolls sideways, which is invisible until
   you try it. Say so, and only there. */
.prose .tbl-hint { display: none; }
@media (max-width: 1039px) {
  .prose .tbl-hint {
    display: block;
    font-size: .84rem;
    color: var(--ink-soft);
    margin-bottom: -.6em;
  }
}