/* The Stats tab: summary cards, a coloured section per kind of record, and a card per
   statistic with share bars. Colour and type do the grouping; every number is also
   written as text. Loaded after app.css, so it uses its tokens. */

/* Summary cards */
.stat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem; }
.stat-card { --section: var(--c-projects); display: grid; gap: 0.3rem; align-content: start; padding: 0.75rem 0.9rem; border: 1px solid color-mix(in srgb, var(--section) 55%, var(--line)); border-top: 5px solid var(--section); border-radius: var(--radius); background: color-mix(in srgb, var(--section) 14%, var(--surface)); box-shadow: var(--shadow); }
.stat-card.grants { --section: var(--c-grants); }
.stat-card-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.stat-card-label .icon { color: var(--section); }
.stat-card-number { font-size: 2.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-card-breakdown { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; list-style: none; margin: 0.2rem 0 0; padding: 0; font-size: 0.82rem; color: var(--text); }
.stat-card-breakdown li { display: flex; align-items: center; }

/* One section per kind of record */
.stats-section { --section: var(--c-projects); margin: 1.5rem 0 1rem; }
.stats-section.grants { --section: var(--c-grants); }
.stats-section > h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.7rem; padding-bottom: 0.35rem; font-size: 1.2rem; color: var(--section); border-bottom: 3px solid var(--section); }
.stats-section > h2 .icon { color: var(--section); }

/* A card per statistic */
.stat { margin-bottom: 0.75rem; padding: 0.6rem 0.8rem 0.4rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--section, var(--c-stats)); border-radius: var(--radius); box-shadow: var(--shadow); }
.stat table { width: 100%; border-collapse: collapse; }
.stat caption { padding: 0 0 0.4rem; text-align: left; }
.stat-head { display: flex; justify-content: space-between; align-items: baseline; }
.stat-title { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.stat-total { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat thead th { padding: 0.2rem 0.4rem; text-align: left; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.stat thead th.num { text-align: right; }
.stat tbody th { padding: 0.35rem 0.4rem; text-align: left; font-weight: 600; overflow-wrap: anywhere; }
.stat tbody td { padding: 0.35rem 0.4rem; overflow-wrap: anywhere; }
.stat tbody tr + tr > * { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.stat td.num { font-size: 1.05rem; font-weight: 800; }

/* Fixed columns, so the bars line up from one card to the next */
.stat.has-shares table { table-layout: fixed; }
.stat.has-shares thead th:nth-child(1) { width: 40%; }
.stat.has-shares thead th:nth-child(2) { width: 15%; }

/* The coloured dot before a name, and the share bar (decoration; the percentage says it too) */
.swatch { display: inline-block; flex: none; width: 0.7rem; height: 0.7rem; margin-right: 0.45rem; border-radius: 50%; background: var(--bar, var(--section)); }
.share { display: flex; align-items: center; gap: 0.5rem; min-width: 7rem; }
.share-bar { flex: 1; height: 0.55rem; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--line) 70%, transparent); }
.share-fill { display: block; width: var(--pct, 0%); height: 100%; border-radius: 999px; background: var(--bar, var(--section)); }
.share-text { min-width: 2.6rem; font-size: 0.8rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Report results use the same cards, in the Stats blue */
.stats-builder { --section: var(--c-stats); }

@media (max-width: 420px) {
  .stat.has-shares thead th:nth-child(1) { width: 42%; }
  .stat.has-shares thead th:nth-child(2) { width: 20%; }
  .share-text { min-width: 2.2rem; }
  .stat thead th { letter-spacing: 0.02em; padding-inline: 0.25rem; }
  .share { min-width: 0; }
  .stat-card-number { font-size: 2.2rem; }
}