/* Sample plan pages (/plans, /plans/<slug>) and the stats page (/stats), on top of site.css. */

.sample-cards { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 720px) { .sample-cards { grid-template-columns: 1fr 1fr; } }
.sample-cards .card { margin: 0; }
.sample-cards .kicker { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 4px; }
.sample-cards h2 { font-size: 1.05rem; line-height: 1.35; margin: 0 0 6px; }
.sample-cards h2 a { color: var(--text); text-decoration: none; }
.sample-cards h2 a:hover { color: var(--accent); text-decoration: underline; }
.sample-cards p { margin: 0; color: var(--muted); font-size: .93rem; }
.sample-cards h3 { font-size: 1.05rem; line-height: 1.35; margin: 0 0 6px; }
.sample-cards h3 a { color: var(--text); text-decoration: none; }
.sample-cards h3 a:hover { color: var(--accent); text-decoration: underline; }
.sample-family { font-size: 1.15rem; margin: 26px 0 0; }
/* A triathlon or cycling sample the engine cannot build yet: shown, not linked. */
.sample-cards .card.soon h3 { color: var(--muted); }
.sample-cards .soon-tag { color: var(--warn); font-weight: 700; }

.crumbs { font-size: .88rem; margin: 0 0 6px; }
.sample-intro { max-width: 70ch; font-size: 1.02rem; margin: 10px 0 0; }
.glance dl.inputs { margin-top: 8px; }
.faq h3 { font-size: 1rem; margin: 16px 0 4px; }
.faq h3:first-of-type { margin-top: 10px; }
.faq p { margin: 0; max-width: 72ch; }
.sample-cta { border-color: var(--accent); background: var(--accent-soft); margin-top: 20px; }
.sample-cta p:last-child { margin-bottom: 0; }
.more-samples ul { margin: 8px 0 0; padding-left: 20px; columns: 2 300px; }
.more-samples li { margin-bottom: 6px; break-inside: avoid; }

/* /stats */
.stats-login { max-width: 420px; }
.stats-login input[type=password] { width: 100%; padding: 9px 10px; font: inherit; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); margin: 6px 0 12px; }
.funnel { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.funnel li { display: grid; grid-template-columns: 11em 5em 1fr; gap: 10px; align-items: center; font-size: .93rem; }
.funnel .n { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.funnel .meter { height: 10px; border-radius: 5px; background: var(--accent-soft); overflow: hidden; }
.funnel .meter span { display: block; height: 100%; background: var(--accent); }
.funnel small { color: var(--muted); }
table.stats td, table.stats th { text-align: right; white-space: nowrap; }
table.stats td:first-child, table.stats th:first-child { text-align: left; }
table.stats tr.total td { font-weight: 700; border-top: 2px solid var(--line); }
table.stats td.zero { color: var(--muted); }