:root {
    color-scheme: light;
    --ink: #182026;
    --muted: #5e6970;
    --line: #d6dde1;
    --surface: #ffffff;
    --green: #238636;
    --amber: #b66a00;
    --red: #c52b2f;
    --unknown: #7d878d;
}

* { box-sizing: border-box; }
body { margin: 0; background: #f2f5f6; color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
main { width: min(1380px, calc(100% - 28px)); margin: 68px auto 36px; }
.status-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.eyebrow { margin: 0 0 5px; color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2rem, 6vw, 3.25rem); letter-spacing: -.035em; }
.intro { margin: 8px 0 0; color: var(--muted); }
.overall { flex: 0 0 auto; padding: 10px 14px; border-radius: 999px; color: #fff; font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.overall--green { background: var(--green); }
.overall--amber { background: var(--amber); }
.overall--red { background: var(--red); }
.overall--unknown { background: var(--unknown); }
.refresh-status { margin: 24px 0 14px; color: var(--muted); font-size: .9rem; }
.refresh-status--error { color: var(--red); font-weight: 700; }
.feed-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.feed-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 8px 24px rgba(37, 51, 58, .06); }
.feed-card__heading { display: flex; align-items: center; gap: 10px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.feed-card__heading h2 { margin: 0; font-size: 1.12rem; }
.feed-card__state { margin-left: auto; color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.light { display: inline-block; width: .72rem; height: .72rem; margin: 0 .3rem 0 .15rem; border-radius: 50%; background: var(--unknown); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.light--green { background: var(--green); }
.light--amber { background: var(--amber); }
.light--red { background: var(--red); }
.light--unknown { background: var(--unknown); }
.chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stage { position: relative; min-width: 0; padding: 15px 22px 17px 17px; }
.stage + .stage { border-left: 1px solid var(--line); }
.stage + .stage::before { content: "›"; position: absolute; top: 12px; left: -8px; z-index: 1; width: 16px; border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 1.2rem; font-weight: 900; line-height: 16px; text-align: center; }
.stage--red { background: rgba(197, 43, 47, .045); }
.stage--amber { background: rgba(182, 106, 0, .055); }
.stage__title { display: flex; align-items: center; margin: 0 0 11px; font-size: .82rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.stage__description { min-height: 2.8em; margin: 0 0 10px; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.metric { margin: 7px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.35; }
.metric strong { display: block; overflow-wrap: anywhere; color: var(--ink); font-size: .97rem; font-variant-numeric: tabular-nums; }
.metric--amber strong { color: var(--amber); }
.metric--red strong, .metric--attention strong { color: var(--red); }
.help-link { display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; border: 1px solid #9ba6ac; border-radius: 50%; color: #4e5b62; font-size: .7rem; font-weight: 800; line-height: 1; text-decoration: none; vertical-align: .08rem; }
.help-link:hover, .help-link:focus-visible { border-color: var(--ink); color: var(--ink); outline: 2px solid rgba(24, 32, 38, .16); outline-offset: 1px; }
.key { margin-top: 20px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--muted); font-size: .9rem; line-height: 1.5; }
.key h2 { margin: 0; color: var(--ink); font-size: 1rem; }
.key h3 { margin: 20px 0 0; color: var(--ink); font-size: .95rem; }
.key p { margin: 9px 0 0; }
.number-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 6px 0 0; }
.number-help div { padding: 10px 0; border-top: 1px solid var(--line); }
.number-help dt { scroll-margin-top: 72px; color: var(--ink); font-weight: 800; }
.number-help dd { margin: 3px 0 0; }
.delivery-panel { margin-top: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 8px 24px rgba(37, 51, 58, .06); }
.delivery-panel__heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.delivery-panel__heading h2 { margin: 0; font-size: 1.12rem; }
.chain--delivery { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 720px) {
    main { margin-top: 62px; }
    .status-heading { align-items: flex-end; }
    .chain, .chain--delivery { grid-template-columns: 1fr 1fr; }
    .stage:nth-child(odd) { border-left: 0; }
    .stage:nth-child(odd)::before { display: none; }
    .stage:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 430px) {
    .status-heading { display: block; }
    .overall { display: inline-block; margin-top: 14px; }
    .chain, .chain--delivery { grid-template-columns: 1fr; }
    .stage { padding: 13px; }
    .stage + .stage { border-top: 1px solid var(--line); border-left: 0; }
    .stage + .stage::before { display: none; }
    .stage__description { min-height: 0; }
    .number-help { grid-template-columns: 1fr; }
}