/* The valley tab and the runway check. */
.valley-lede { color: var(--text); font-size: 1.05rem; max-width: 70ch; }
.valley-figure { margin: 0; display: grid; gap: 0.6rem; background: var(--grey); padding: 1.25rem 1rem 1rem; }
.valley-figure figcaption { color: var(--muted); font-size: var(--step-0); }
.valley-scroll { overflow-x: auto; }
.valley-chart { display: block; inline-size: 100%; min-inline-size: 36rem; block-size: auto; overflow: visible; }
.valley-area { fill: var(--sky); fill-opacity: 0.18; }
.valley-line { fill: none; stroke: var(--heading); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.valley-axis { stroke: var(--line); stroke-width: 2; }
.valley-guide { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 5; }
.valley-dot { fill: var(--page); stroke: var(--heading); stroke-width: 3; }
.valley-dot.is-current { fill: var(--sky); stroke: var(--heading); stroke-width: 4; }
.valley-stage { fill: var(--muted); font-size: 20px; font-weight: 600; font-family: var(--font); }
.valley-stage.is-current { fill: var(--heading); font-weight: 800; }
.valley-note { fill: var(--heading); font-size: 22px; font-weight: 700; font-family: var(--font); }
.valley-axis-label { fill: var(--muted); font-size: 18px; font-family: var(--font); }

.reality-list { list-style: none; margin: 0; padding: 0; display: grid; }
.reality { display: grid; gap: 0.4rem 2rem; grid-template-columns: 1fr; padding-block: 1.1rem; border-block-start: 1px solid var(--line); }
@media (min-width: 46rem) { .reality { grid-template-columns: 16rem minmax(0, 1fr); } }
.reality-feels { font-size: 1.15rem; font-weight: 700; color: var(--heading); }
.reality-asks { display: grid; gap: 0.35rem; max-width: 62ch; }
.reality-fix { color: var(--muted); font-size: var(--step-0); }
.inline-link { color: var(--blue); font-weight: 700; font-size: var(--step-0); text-decoration: underline; text-underline-offset: 3px; justify-self: start; }

.last-mile { display: grid; gap: 0.75rem; background: var(--grey); padding: 1.5rem 1.25rem; }
.mile-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.mile-item { display: flex; gap: 0.7rem; align-items: flex-start; padding-block: 0.6rem; border-block-start: 1px solid var(--line); }
.mile-item input { flex: none; inline-size: 1.25rem; block-size: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--blue); cursor: pointer; }
.mile-item label { cursor: pointer; }
.mile-item input:checked + label { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--sky); }

.tips-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.tips { display: grid; gap: 0.5rem; align-content: start; border: 1px solid var(--line); padding: 1.4rem 1.25rem; }
.tips-title { font-size: 1.3rem; }
.tip-list { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; }
.tip { display: grid; gap: 0.2rem; padding-block: 0.75rem; border-block-start: 1px solid var(--line); }
.tip strong { color: var(--heading); }
.tip span { color: var(--muted); font-size: var(--step-0); }

.runway-result[data-tone="warn"] .total-figure { color: #ffb4a8; }
.runway-verdict { color: #ffffff; font-weight: 600; max-width: 56ch; }