/* Status page rules. Everything else comes from the official Vortex CSS in /css. */
@layer pages {
.site-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
.site-topbar > span { display: block; }
.status { display: grid; gap: var(--space-24); max-width: 1040px; margin: 0 auto; }
.hidden { display: none !important; }
.dot { --dot: var(--palette-warning); display: inline-block; flex: none; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--dot); }
.dot.up { --dot: var(--palette-success-bright); }
.dot.down { --dot: var(--palette-danger-text); }
.checked { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--color-muted); font-size: var(--text-sm); }

.hero { display: grid; gap: var(--space-16); }
.hero-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; }
.hero h1 { display: flex; align-items: center; gap: var(--space-16); font-size: var(--text-6xl); line-height: 1.1; font-weight: var(--weight-bold); letter-spacing: -.02em; color: var(--color-text); }
.hero h1 .dot { width: 16px; height: 16px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--dot) 18%, transparent); }
.hero[data-state="online"] h1 .dot { --dot: var(--palette-success-bright); }
.hero[data-state="down"] h1 .dot { --dot: var(--palette-danger-text); }
.hero-note { color: var(--color-error); font-size: var(--text-sm); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-8); list-style: none; }
.chips .ui-meta-chip { margin: 0; }

.msg { padding: var(--space-12) var(--space-16); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); font-size: var(--text-sm); }
.msg.success { border-color: var(--palette-success); color: var(--palette-success-bright); }
.msg.error { border-color: var(--palette-danger-border); background: var(--palette-danger-surface); color: var(--color-error); }

.stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-12); }
.stats .ui-card { --card-padding: var(--space-20); --card-radius: var(--radius-card); display: grid; gap: var(--space-8); }
.stats dt { color: var(--color-muted); font-size: var(--text-sm); }
.stats dd { color: var(--palette-white); font-size: clamp(var(--text-3xl), 4vw, var(--text-6xl)); line-height: 1.1; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }

.range { display: flex; gap: var(--space-8); }
.figures { margin-top: calc(-1 * var(--space-8)); }
.strip { display: flex; gap: 2px; height: 28px; margin-top: calc(-1 * var(--space-8)); }
.strip i { flex: 1; min-width: 1px; border-radius: var(--radius-sm); background: var(--palette-success-bright); }
.strip i.down { background: var(--palette-danger-text); }
.strip i.none { background: var(--color-control); }

.chart { --card-padding: var(--space-16); --card-radius: var(--radius-card); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-8); }
.legend button { --button-color: var(--color-muted); }
.legend button[aria-pressed="true"] { --button-color: var(--color-text); }
.legend .dot { --dot: var(--c); }
.legend button[aria-pressed="false"] .dot { background: transparent; box-shadow: inset 0 0 0 2px var(--c); }
.legend [data-key="playing"] { --c: var(--palette-success-bright); }
.legend [data-key="active"] { --c: var(--palette-purple); }
.legend [data-key="visitsDelta"] { --c: var(--palette-info-text); }
.legend [data-key="reports"] { --c: var(--palette-danger-text); }
.plot { position: relative; height: 360px; }
#history-chart { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.tip { position: absolute; top: var(--space-8); z-index: 2; min-width: 150px; padding: var(--space-8) var(--space-12); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-control); color: var(--color-text); font-size: var(--text-xs); pointer-events: none; }
.tip b { display: block; margin-bottom: var(--space-4); font-weight: var(--weight-semibold); color: var(--color-muted); }
.tip div { display: flex; justify-content: space-between; gap: var(--space-16); }
.tip span { color: var(--color-muted); }
.empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-muted); }

@media (max-width: 800px) {
  .site-shell, .site-navigation-expanded .site-shell { padding-bottom: var(--space-24); }
  .site-topbar { grid-template-columns: 1fr auto; }
  .site-topbar > span { display: none; }
  .site-page { --page-shell-inline: var(--space-4); }
  .hero h1 { font-size: var(--text-5xl); }
  .hero-head > button { width: 100%; }
  .stats { grid-template-columns: 1fr; gap: var(--space-8); }
  .stats .ui-card { grid-template-columns: auto 1fr; align-items: baseline; --card-padding: var(--space-16); }
  .stats dd { text-align: right; font-size: var(--text-4xl); }
  .range > button { flex: 1; }
  .plot { height: 300px; }
}
}