/* /status (status.php, core/components/status/). Colours are the site's tokens, so both spaces work; state always carries an icon and words too. */
.page-status { --st-ok: var(--layer-green); --st-warn: var(--layer-ochre); --st-bad: var(--layer-red); }

.st-banner { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border: var(--pen-2) solid var(--st-color, var(--line)); border-left-width: .5rem; border-radius: var(--radius); background: var(--sheet-2); }
.st-banner > .bi { font-size: 1.75rem; line-height: 1; color: var(--st-color, var(--line)); }
.st-headline { margin: 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; }
.st-checked { margin: .25rem 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.st-operational { --st-color: var(--st-ok); }
.st-degraded { --st-color: var(--st-warn); }
.st-outage { --st-color: var(--st-bad); }
.st-unknown { --st-color: var(--line); }

.st-body { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.st-body h2 { font-size: var(--fs-md); margin: 0 0 1rem; }
.st-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1rem; }
.st-section-head h2 { margin: 0; }
.st-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--ink-2); }
.st-legend li { display: flex; align-items: center; gap: .4rem; }
.st-key { display: inline-block; width: .6rem; height: .9rem; border-radius: 1px; }

.st-list, .st-incidents { margin: 0; padding: 0; list-style: none; border-top: var(--pen-1) solid var(--grid); }
.st-item { padding-block: 1.1rem; border-bottom: var(--pen-1) solid var(--grid); }
.st-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.st-item h3, .st-incidents h3 { margin: 0; font-size: var(--fs-base); font-weight: 650; }
.st-about { margin: .1rem 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.st-state { display: flex; align-items: center; gap: .4rem; margin: 0; flex: none; font-size: var(--fs-sm); font-weight: 600; }
.st-state .bi { color: var(--st-color); }

.st-bars { display: flex; gap: 2px; height: 2rem; }
.st-bar { position: relative; flex: 1 1 0; min-width: 0; border-radius: 1px; outline-offset: 1px; }
.st-day-ok { background: var(--st-ok); }
.st-day-some { background: var(--st-warn); }
.st-day-bad { background: var(--st-bad); }
.st-day-none { background: var(--grid); }
.st-bar::after { content: attr(data-tip); position: absolute; z-index: 5; bottom: calc(100% + .4rem); left: 50%; transform: translateX(-50%); padding: .25rem .5rem; border-radius: var(--radius); background: var(--ink); color: var(--sheet); font-size: .8125rem; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; }
.st-bar:hover::after, .st-bar:focus-visible::after { opacity: 1; }
.st-bar:hover { filter: brightness(.85); }
.st-bar:nth-child(-n+12)::after { left: 0; transform: none; }
.st-bar:nth-last-child(-n+12)::after { left: auto; right: 0; transform: none; }
.st-axis { display: flex; justify-content: space-between; gap: 1rem; margin-top: .35rem; font-size: .8125rem; color: var(--ink-2); }
.st-axis-short { display: none; }

.st-table-wrap { overflow-x: auto; }
.st-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.st-table th, .st-table td { padding: .55rem .75rem; border-bottom: var(--pen-1) solid var(--grid); text-align: right; font-weight: 400; white-space: nowrap; }
.st-table thead th { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); border-bottom-color: var(--line); }
.st-table th:first-child { padding-left: 0; text-align: left; white-space: normal; }
.st-table td:last-child, .st-table thead th:last-child { padding-right: 0; }
.st-note { margin: .75rem 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.st-incidents li { padding-block: .9rem; border-bottom: var(--pen-1) solid var(--grid); }
.st-incidents p { margin: .2rem 0 0; }
.st-how p { margin: 0; }

@media (max-width: 40rem) {
  .st-bar:nth-child(-n+60) { display: none; }
  .st-bar:nth-child(-n+72)::after { left: 0; transform: none; }
  .st-axis-long { display: none; }
  .st-axis-short { display: inline; }
  .st-item-head { flex-direction: column; gap: .35rem; }
}
@media (forced-colors: active) {
  .st-bar { border: 1px solid CanvasText; }
  .st-day-some, .st-day-bad { background: Highlight; }
}