/* Sprints — in-app roadmap / build log.
   Status never relies on hue: each state carries an icon, a text label and a
   distinct border treatment (solid / dashed / thick accent), so it reads for a
   colour-blind user. */

.spr-page { display: flex; flex-direction: column; gap: var(--sp-6); }
.spr-head { display: flex; flex-direction: column; }
.spr-head .page-desc { margin-top: var(--sp-3); }

/* Summary */
.spr-summary { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.spr-stat { flex: 1 1 140px; padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); display: flex; flex-direction: column; gap: 2px; }
.spr-stat__num { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.spr-stat__lbl { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-ink-faint); display: inline-flex; align-items: center; gap: 6px; }
.spr-stat__lbl svg { width: 0.95rem; height: 0.95rem; }
.spr-stat--wide { flex: 2 1 240px; justify-content: center; }
.spr-stat__now { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--c-accent-ink); margin-top: 2px; }

/* Legend */
.spr-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
.spr-legend__title { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--c-ink-faint); }

/* Status badge — icon + label, differentiated by border, not colour alone. */
.spr-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px var(--sp-2); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); border: 1px solid var(--c-border-strong); color: var(--c-ink-soft); background: var(--c-surface); white-space: nowrap; }
.spr-badge svg { width: 0.9rem; height: 0.9rem; flex: 0 0 auto; }
.spr-badge--now { border: 1px solid var(--c-accent-ink); color: var(--c-accent-ink); background: var(--c-accent-wash); }
.spr-badge--next { border-style: solid; border-color: var(--c-ink); color: var(--c-ink); }
.spr-badge--planned { border-style: dashed; }
.spr-badge--done { color: var(--c-ink-faint); }

/* Stage */
.spr-stage { display: flex; flex-direction: column; gap: var(--sp-4); }
.spr-stage__head { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border); }
.spr-stage__label { font-size: var(--fs-xl); letter-spacing: -0.01em; }
.spr-stage__note { font-size: var(--fs-sm); color: var(--c-ink-soft); }

.spr-list { display: flex; flex-direction: column; gap: var(--sp-3); }

/* Sprint card — left marker encodes status by thickness + style, plus the badge. */
.spr-card { min-width: 0; overflow-wrap: anywhere; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-border); border-left-width: 4px; border-radius: var(--r-md); background: var(--c-surface); }
.spr-card--done { border-left-color: var(--c-border-strong); }
.spr-card--next { border-left-color: var(--c-ink); }
.spr-card--planned { border-left-style: dashed; border-left-color: var(--c-border-strong); }
.spr-card--now { border-left-color: var(--c-accent-ink); box-shadow: inset 3px 0 0 var(--c-accent-ink), var(--shadow-sm); background: linear-gradient(90deg, var(--c-accent-wash), var(--c-surface) 60%); }

.spr-card__top { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.spr-card__code { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 2.4rem; height: 1.6rem; padding: 0 var(--sp-2); border-radius: var(--r-sm); background: var(--c-surface-2); border: 1px solid var(--c-border); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.02em; color: var(--c-ink); }
.spr-card__title { flex: 1 1 auto; min-width: 0; font-size: var(--fs-lg); letter-spacing: -0.01em; }
.spr-card--now .spr-card__code { background: var(--c-accent-ink); color: var(--c-on-accent); border-color: transparent; }
.spr-card__goal { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-soft); }

.spr-deliv { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.spr-deliv__item { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink); }
.spr-deliv__mark { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-top: 1px; color: var(--c-ink-faint); }
.spr-deliv__mark svg { width: 1rem; height: 1rem; }
.spr-deliv__item.is-done .spr-deliv__mark { color: var(--c-accent-ink); }
.spr-deliv__item.is-done { color: var(--c-ink-soft); }

/* Parking lot */
.spr-parking .spr-stage__head { border-bottom: 0; }
.spr-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.spr-chip { padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--c-border-strong); border-radius: var(--r-full); font-size: var(--fs-sm); color: var(--c-ink-soft); background: var(--c-surface); }

.spr-foot { font-size: var(--fs-xs); color: var(--c-ink-faint); }
.spr-foot code { padding: 1px 5px; background: var(--c-surface-2); border-radius: var(--r-sm); }

/* ---- Dev control: two-column (roadmap left, control right) ---- */
.dev-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-6); align-items: start; margin-top: var(--sp-5); }
.dev-main { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; }
.dev-side { display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 1000px) { .dev-layout { grid-template-columns: 1fr; } }

.dev-card { padding: var(--sp-4) var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.dev-card__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); }
.dev-card__icon { display: inline-grid; place-items: center; }
.dev-card__icon svg { width: 1.15rem; height: 1.15rem; }
.dev-card__note { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-soft); }
.dev-live { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-3) 0; }
.dev-live__state { font-weight: var(--fw-semibold); }
.dev-card__link { display: inline-block; margin-top: var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.dev-card .temp-add { margin-top: var(--sp-3); }
.dev-card .temp-list { margin-top: var(--sp-2); }

/* Dev control uses the full content width (the old 900px cap suited a single
   column). The roadmap cards flow into as many columns as fit, so the width is
   used by more cards rather than over-long lines; the control rail stays 320px. */
.dev-main .spr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: var(--sp-3); align-items: start; }