/* Styles for the reference/content pages (calorie tables and the like).
   Kept out of site.v2.css on purpose: the landing page is the one that has to
   paint fast, and it needs none of this. Loaded only where a table exists. */

.prose { max-width: 760px; }
.prose p { margin: 0 0 14px; line-height: 2; }
.prose ul { margin: 0 0 16px; padding-inline-start: 22px; line-height: 2; }

/* The method note. A calorie table that does not say where its numbers came
   from is asking to be trusted for no reason. */
.note {
  border-inline-start: 3px solid var(--brand, #059669);
  background: rgba(5, 150, 105, .06);
  padding: 14px 18px;
  border-radius: 10px;
  margin: 0 0 26px;
  line-height: 2;
  font-size: .95rem;
}

.cat { margin: 0 0 42px; scroll-margin-top: 90px; }
.cat h2 { margin: 0 0 6px; }
.cat .cat-sub { margin: 0 0 16px; opacity: .75; font-size: .95rem; }

/* Horizontal scroll rather than a squeezed table: six numeric columns cannot
   fit a 360px phone, and a table that wraps is a table nobody reads. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: 12px;
  background: #fff;
}
table.kcal { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .95rem; }
table.kcal caption { text-align: start; padding: 12px 16px 0; font-weight: 600; }
table.kcal th, table.kcal td { padding: 10px 14px; text-align: start; border-bottom: 1px solid rgba(0, 0, 0, .07); }
table.kcal thead th {
  position: sticky; top: 0;
  background: #f6f8f7;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 2px solid rgba(0, 0, 0, .1);
}
table.kcal tbody tr:last-child td { border-bottom: 0; }
table.kcal tbody tr:nth-child(even) { background: rgba(0, 0, 0, .018); }
table.kcal td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.kcal td.food { font-weight: 600; }
table.kcal td.serve { opacity: .8; white-space: nowrap; }

/* Jump list to the categories. */
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 34px; padding: 0; list-style: none; }
.toc a {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  background: rgba(5, 150, 105, .09); color: inherit; text-decoration: none;
  font-size: .9rem; border: 1px solid rgba(5, 150, 105, .16);
}
.toc a:hover { background: rgba(5, 150, 105, .16); }

@media (prefers-color-scheme: dark) {
  .table-wrap { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .12); }
  table.kcal thead th { background: rgba(255, 255, 255, .06); border-bottom-color: rgba(255, 255, 255, .16); }
  table.kcal th, table.kcal td { border-bottom-color: rgba(255, 255, 255, .08); }
  table.kcal tbody tr:nth-child(even) { background: rgba(255, 255, 255, .025); }
  .note { background: rgba(5, 150, 105, .12); }
}