@import url('/stories/situations.css');

/* Hero: three bars for one result's round trips, longest first. */
.trip-bars{display:block;width:100%;height:auto;margin:4px 0 0}
.trip-bars__label{fill:#d2dccb;font:12px Inter,system-ui,sans-serif}
.trip-bars__value{fill:#f5f3eb;font:600 14px Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.trip-bars__axis{fill:#d2dccb;font:11px Inter,system-ui,sans-serif}
.trip-bars__bar{fill:#d2dccb}
.trip-bars__bar--slow{fill:#e4655c}
.trip-bars__bar--fast{fill:#d6e98d}
.hero .evidence figcaption a{color:#d6e98d}

.reason-list{list-style:none;counter-reset:reason;padding:0;margin:0 0 20px}
.reason-list li{counter-increment:reason;position:relative;padding:16px 0 4px 44px;border-top:1px solid var(--line)}
.reason-list li::before{content:counter(reason);position:absolute;left:0;top:18px;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;font-size:12px}
.reason-list h3{font-size:16px;line-height:1.5;margin:0 0 6px}
.reason-list p{font-size:14px!important;margin:0 0 12px!important;color:var(--muted)}
.reason-list code{font-size:13px}
.sources{font-size:13px;line-height:1.7;padding-left:20px}
.sources li{margin-bottom:10px}
@media(max-width:700px){.reason-list li{padding-left:40px}.trip-bars__label{font-size:14px}.trip-bars__value{font-size:16px}}