/* Pipeline page - Pages/Pipeline.cshtml ("The Process to F1").
   Only what this page alone uses. The tier cards are components/tier.css. */

.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-of { font-size: .5em; color: var(--muted); }

.legend { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .78rem; color: var(--muted); justify-content: center; }
.legend-item { display: inline-flex; align-items: center; }

.req-grid { margin-top: 2.25rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.req { border: 1px solid var(--border); border-radius: .85rem; background: var(--surface); padding: 1.25rem; box-shadow: var(--shadow); }
.req-value { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
.req-unit { font-size: .45em; margin-left: .15em; color: var(--muted); }
.req h3 { margin: .5rem 0 0; font-size: 1rem; }
.req p { margin: .55rem 0 0; font-size: .85rem; color: var(--ink-soft); text-wrap: pretty; }