/* Chart cluster — /charts/*. Tokens come from main.css; nothing is hardcoded.
   Zero JS: the tables are the page, and they must survive a screenshot, a
   print-out and an AI crawler equally well. */

.chart-page { max-width: 100%; }

.chart-head { margin-bottom: 24px; }
.chart-head h1 { margin-bottom: .3em; }
.chart-lead {
  font-size: 1.0625rem;
  color: var(--ink);
  max-width: 46rem;
}

/* ---- the signature table ------------------------------------------------ */
.chart-card { margin-bottom: 48px; }
.chart-card-h { margin-top: 0; font-size: 1.125rem; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.chart-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}
.chart-table caption {
  caption-side: top;
  text-align: left;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 8px;
}
.chart-table :is(th, td) {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.chart-table thead th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1.5px solid var(--line);
  white-space: nowrap;
}
.chart-table tbody th { color: var(--ink); font-weight: 600; }
.chart-table tbody tr:nth-child(even) { background: var(--surface-alt); }
.chart-table tbody tr:last-child :is(th, td) { border-bottom: none; }
.chart-table a { color: var(--accent); text-decoration: none; }
.chart-table a:hover { color: var(--accent-deep); text-decoration: underline; }

.chart-table-sm { font-size: .875rem; min-width: 32rem; }
.chart-table-bands td:nth-child(2) { min-width: 18rem; font-weight: 400; color: var(--text); }
.band-temp { white-space: nowrap; }

/* a secondary value under the headline number — never a separate column */
.cell-sub {
  display: block;
  font-size: .75rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 2px;
}
.cell-list { list-style: none; padding: 0; margin: 0; font-size: .8125rem; }
.cell-list li { margin-bottom: 2px; }
.cell-list .num { font-size: .75rem; color: var(--text-muted); font-weight: 500; }

/* external (non-tea) reference rows in the caffeine table */
.chart-table tbody tr.ref-row th { color: var(--text); font-weight: 500; }
.chart-table tbody tr.ref-row { background: color-mix(in srgb, var(--leaf-tint) 60%, var(--surface)); }

.chart-note { font-size: .8125rem; color: var(--text-muted); margin: 12px 0 0; }
.chart-wordmark {
  text-align: right;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin: 12px 0 0;
}

/* ---- named-tea blocks --------------------------------------------------- */
.chart-notable { margin-bottom: 48px; }
.chart-sub { color: var(--text-muted); font-size: .9375rem; }
.notable-h { margin: 28px 0 10px; }
.notable-h a { text-decoration: none; }
.notable-h .cell-sub { display: inline; margin-left: 8px; }

.table-duo { display: grid; gap: 24px; }
@media (min-width: 900px) { .table-duo { grid-template-columns: 1fr 1fr; } .table-duo .chart-table { min-width: 0; } }

/* ---- gong fu ladders ---------------------------------------------------- */
.ladder-list { list-style: none; padding: 0; display: grid; gap: 16px; }
.ladder-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
  padding: 16px 20px;
}
.ladder-head { margin: 0 0 10px; font-weight: 600; color: var(--ink); max-width: none; }
.ladder-head a { text-decoration: none; }
.ladder-head .cell-sub { display: inline; margin-left: 8px; font-weight: 400; }

/* ---- prose -------------------------------------------------------------- */
.chart-prose { max-width: 38rem; margin: 0 auto 48px; }
.chart-prose h2 { margin-top: 1.8em; }
.chart-prose section:first-child h2 { margin-top: 0; }

/* ---- method + citation -------------------------------------------------- */
.chart-method { background: var(--surface-alt); margin-bottom: 32px; }
.chart-method h2 { margin-top: 0; font-size: 1.125rem; }
.chart-method h3 { font-size: .9375rem; margin-top: 1.4em; }
.chart-method p { font-size: .9375rem; }
.chart-source-line { font-size: .8125rem; color: var(--text-muted); font-style: normal; }
.chart-updated { font-size: .75rem; color: var(--text-muted); margin-bottom: 0; }

/* ---- tool bridge + related --------------------------------------------- */
.chart-tool { text-align: center; margin-bottom: 48px; }
.chart-tool h2 { margin-top: 0; }
.chart-tool p { margin-inline: auto; }

.chart-related { display: grid; gap: 32px; }
@media (min-width: 700px) { .chart-related { grid-template-columns: 1fr 1fr; } }
.chart-related h2 { font-size: 1rem; margin-top: 0; }
.chart-related ul { list-style: none; padding: 0; margin: 0; }
.chart-related li { margin-bottom: .4em; }
.chart-related a { text-decoration: none; }
.chart-related a:hover { text-decoration: underline; }

.chart-print-tip { font-size: .75rem; color: var(--text-muted); margin-top: 32px; }

/* ---- hub ---------------------------------------------------------------- */
.chart-grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin: 0 0 48px;
}
.chart-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
  padding: 20px;
  text-decoration: none;
  transition: box-shadow 150ms var(--ease), transform 150ms var(--ease);
}
.chart-tile:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }
.chart-tile-name { font-weight: 600; color: var(--ink); font-size: 1.0625rem; }
.chart-tile-blurb { color: var(--text); font-size: .875rem; line-height: 1.55; }

/* ---- print: the chart is the point, everything else goes ---------------- */
@media print {
  .chart-tool, .chart-related, .chart-print-tip, .breadcrumbs { display: none !important; }
  .chart-page { max-width: none; }
  .chart-card, .chart-method, .ladder-item { border: 1px solid #999; box-shadow: none; background: #fff; }
  .table-wrap { overflow: visible; }
  .chart-table { min-width: 0; font-size: 9pt; page-break-inside: auto; }
  .chart-table :is(th, td) { padding: 4pt 6pt; }
  .chart-table tbody tr { page-break-inside: avoid; }
  .chart-table tbody tr:nth-child(even) { background: #f2f2f2; }
  .chart-notable, .chart-prose { page-break-before: auto; }
  .chart-wordmark { color: #000; }
  .chart-prose { max-width: none; }
  a[href]::after { content: ""; }
}