/* Template sections: Stats variants (template-sections/stats.html). Counters: js/library/library.js [data-ts-count]. */
.ts-stats dd { margin: 0; font-family: var(--font-heading); font-weight: var(--fw-medium); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ts-stats dt { color: var(--text-medium); }

/* V1 four up */
.ts-stats__four { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-10) var(--space-4); text-align: center; }
.ts-stats__four div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-2); }
.ts-stats__four dd { font-size: var(--h2-size); line-height: 1; letter-spacing: var(--h2-ls); }
.ts-stats__four small { font-size: 0.5em; color: var(--text-low); }
.ts-stats__four dt { font-size: var(--para-sm-size); }
@media (min-width: 1024px) { .ts-stats__four { grid-template-columns: repeat(4, 1fr); } .ts-stats__four dd { font-size: 64px; } }

/* V2 dark notes */
.ts-stats__notes { display: grid; gap: var(--space-8); }
.ts-stats__notes div { display: grid; gap: var(--space-2); padding-top: var(--space-6); border-top: 1px solid var(--border-thin); }
.ts-stats__notes dd { order: -2; font-size: var(--h1-size); line-height: 1; letter-spacing: var(--h1-ls); color: var(--orange-400); }
.ts-stats__notes dt { order: -1; font-weight: var(--fw-medium); font-size: var(--body-lg-size); color: var(--text-strong); }
.ts-stats__notes .ts-stats__desc { order: 0; font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--para-sm-size); line-height: var(--para-sm-lh); letter-spacing: 0; color: var(--text-medium); }
@media (min-width: 768px) { .ts-stats__notes { grid-template-columns: repeat(3, 1fr); gap: var(--space-10); } }

/* V3 split + tiles */
.ts-stats__split { display: grid; gap: var(--space-10); align-items: center; }
.ts-stats__claim { display: grid; justify-items: start; gap: var(--space-4); }
.ts-stats__tiles { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--border-thin); border-radius: var(--radius-xl); overflow: hidden; }
.ts-stats__tiles div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-2); padding: var(--space-5); }
.ts-stats__tiles div:nth-child(odd) { border-right: 1px solid var(--border-thin); }
.ts-stats__tiles div:nth-child(-n+2) { border-bottom: 1px solid var(--border-thin); }
.ts-stats__tiles dd { font-size: var(--h3-size); line-height: 1.1; letter-spacing: var(--h3-ls); }
.ts-stats__tiles dt { font-size: var(--para-sm-size); line-height: var(--para-sm-lh); }
@media (min-width: 640px) { .ts-stats__tiles div { padding: var(--space-8); } }
@media (min-width: 1024px) { .ts-stats__split { grid-template-columns: 1fr 1.2fr; gap: var(--space-20); } .ts-stats__tiles div { padding: var(--space-10); } }

/* V4 chart cards */
.ts-stats__title { margin-bottom: var(--space-8); }
.ts-stats__cards { display: grid; gap: var(--space-4); }
.ts-stats__card { display: grid; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--border-thin); border-radius: var(--radius-lg); background: var(--base-high); box-shadow: var(--shadow-sm); }
.ts-stats__card-top { display: flex; justify-content: space-between; align-items: center; font-size: var(--body-sm-size); color: var(--text-low); }
.ts-stats__card-top em { padding: 2px 8px; border-radius: var(--radius-pill); font-style: normal; font-weight: var(--fw-medium); }
.ts-stats__card-top .is-up, .ts-stats__card-top .is-down { background: var(--mint-100); color: var(--emerald-600); }
.ts-stats__card-num { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--h4-size); line-height: 1.1; color: var(--text-strong); }
.ts-stats__card svg { width: 100%; height: 40px; margin-top: var(--space-2); }
.ts-stats__card path { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ts-stats__card path.is-good { stroke: var(--emerald-500); }
.ts-stats__minibars { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin-top: var(--space-2); }
.ts-stats__minibars i { flex: 1; height: var(--h); border-radius: 3px; background: var(--peach-100); }
.ts-stats__minibars i:last-child { background: var(--accent); }
@media (min-width: 640px) { .ts-stats__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ts-stats__cards { grid-template-columns: repeat(4, 1fr); } }

/* V5 strip */
.ts-stats--v5 { padding-block: var(--space-10); }
.ts-stats__strip { display: grid; grid-template-columns: repeat(2, 1fr); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--stone-100); }
.ts-stats__strip div { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-end; gap: var(--space-1); padding: var(--space-4) var(--space-2); text-align: center; }
.ts-stats__strip dd { font-size: var(--h5-size); }
.ts-stats__strip dt { font-size: var(--para-sm-size); }
.ts-stats__strip div:nth-child(odd) { border-right: 1px solid var(--border-thin); }
.ts-stats__strip div:nth-child(-n+2) { border-bottom: 1px solid var(--border-thin); }
@media (min-width: 768px) {
  .ts-stats__strip { grid-template-columns: repeat(4, 1fr); padding-inline: 0; }
  .ts-stats__strip div { flex-direction: row-reverse; align-items: baseline; justify-content: center; gap: var(--space-2); border-bottom: 0 !important; border-right: 1px solid var(--border-thin); }
  .ts-stats__strip div:last-child { border-right: 0; }
}