/* M4 Eternal — the status page (status-page): the banner, the numbers, the 90-day bars, the players chart and the incidents.
   Built on ds.css; every class here is st-* (ds.css already has .status). No inline style: the tooltip's place is set through
   CSS custom properties from status.js (CSSOM, allowed by the CSP). */

.page-status { --st-ok: var(--jade); --st-degraded: var(--amber); --st-partial: #f08a3c; --st-major: var(--danger); --st-maint: var(--cyan); --st-none: #3a4454; }

.st-page { padding-top: var(--sp-8); }
.st-page .wrap { display: grid; gap: var(--sp-6); }

/* ---------- banner ---------- */
.st-banner {
  --tone: var(--faint);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-4) var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 16%, transparent), rgba(10, 15, 23, 0.85) 55%), var(--panel);
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
  border-left: 4px solid var(--tone);
  box-shadow: var(--sh-2);
}
.st-banner[data-tone="ok"] { --tone: var(--st-ok); }
.st-banner[data-tone="warn"] { --tone: var(--st-degraded); }
.st-banner[data-tone="danger"] { --tone: var(--st-major); }
.st-banner[data-tone="info"] { --tone: var(--st-maint); }
.st-banner__mark {
  position: relative; width: 18px; height: 18px; transform: rotate(45deg); background: var(--tone);
  box-shadow: 0 0 14px var(--tone);
}
.st-banner__mark::after {
  content: ""; position: absolute; inset: -6px; border: 1px solid var(--tone); opacity: 0;
  animation: st-ping 2.4s var(--ease) infinite;
}
.st-banner[data-tone="muted"] .st-banner__mark::after { animation: none; }
@keyframes st-ping { 0% { opacity: 0.7; transform: scale(0.6); } 80%, 100% { opacity: 0; transform: scale(1.5); } }
.st-banner__title { margin: 0; font-size: var(--fs-xl); line-height: var(--lh-snug); color: #fff; letter-spacing: 0.02em; }
.st-banner__sub { margin: var(--sp-1) 0 0; color: var(--text-soft); font-size: var(--fs-sm); }
.st-banner__sub:empty { display: none; }
.st-banner__meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.st-updated { margin: 0; font-size: var(--fs-xs); }
.st-updated:empty { display: none; }
.st-stale { margin: 0; font-size: var(--fs-xs); color: var(--warn, var(--muted)); }
.st-stale:empty { display: none; }
.st-since { display: block; margin-top: 2px; font-size: var(--fs-2xs); line-height: var(--lh-snug); font-weight: normal; }

/* ---------- numbers ---------- */
.st-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--gold-hair); border: 1px solid var(--gold-hair); }
.st-kpi { padding: var(--sp-4); background: var(--panel); min-width: 0; }
.st-kpi dt { font-size: var(--fs-2xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.st-kpi dd { margin: var(--sp-1) 0 0; font-size: var(--fs-2xl); line-height: var(--lh-tight); color: var(--gold-hi); }

/* ---------- blocks ---------- */
.st-block { min-width: 0; }
.st-block__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-4); position: relative; z-index: 1; }
.st-block__title { margin: 0; font-size: var(--fs-lg); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold-hi); }
.st-block .tabs { margin-bottom: 0; }
.st-note { margin: 0 0 var(--sp-4); font-size: var(--fs-xs); }

.st-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--muted); }
.st-legend li { display: inline-flex; align-items: center; gap: 6px; }
.st-sw { width: 10px; height: 10px; border-radius: 1px; flex: none; }
.st-sw--ok, .st-day--ok { background: var(--st-ok); }
.st-sw--degraded, .st-day--degraded { background: var(--st-degraded); }
.st-sw--partial, .st-day--partial { background: var(--st-partial); }
.st-sw--major, .st-day--major { background: var(--st-major); }
.st-sw--maintenance, .st-day--maintenance { background: var(--st-maint); }
.st-sw--none, .st-day--none { background: var(--st-none); }

/* ---------- components ---------- */
.st-components { margin: 0; padding: 0; list-style: none; }
.st-comp { padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.st-comp:first-child { border-top: 0; padding-top: 0; }
.st-comp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.st-comp__name { min-width: 0; }
.st-comp__name h3 { margin: 0; font-size: var(--fs-md); color: #fff; }
.st-comp__name p { margin: 2px 0 0; font-size: var(--fs-xs); }
.st-comp__state { flex: none; }

.st-bars { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; height: 34px; }
.st-day { display: block; min-width: 0; border-radius: 1px; cursor: default; transition: filter var(--dur-1), transform var(--dur-1); }
.st-day:hover, .st-day:focus-visible { filter: brightness(1.3); transform: scaleY(1.12); }
.st-day:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.st-axis { display: flex; justify-content: space-between; margin-top: var(--sp-2); font-size: var(--fs-2xs); }
.st-axis__narrow { display: none; }
.st-ups { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); margin: var(--sp-3) 0 0; font-size: var(--fs-xs); }
.st-up { display: flex; gap: var(--sp-2); }
.st-up dt { color: var(--muted); }
.st-up dd { margin: 0; color: var(--text); }

.st-tip {
  position: fixed; left: var(--tip-x, 0); top: var(--tip-y, 0); z-index: 50; max-width: min(320px, calc(100vw - 16px));
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--text);
  background: var(--surface-3); border: 1px solid var(--gold-line); box-shadow: var(--sh-3); pointer-events: none;
}
.st-tip[hidden] { display: none; }

/* ---------- chart ---------- */
.st-chart__keys { display: flex; gap: var(--sp-4); margin: 0 0 var(--sp-2); padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--muted); }
.st-chart__keys li { display: inline-flex; align-items: center; gap: 6px; }
.st-key { width: 16px; height: 3px; flex: none; }
.st-key--avg { background: var(--gold); }
.st-key--max { height: 0; border-top: 2px dashed var(--cyan); }
.st-chart__box { position: relative; min-height: 190px; outline: none; }
.st-chart__box:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.st-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.st-svg__grid { stroke: var(--line); stroke-width: 1; }
.st-svg__base { stroke: var(--line-strong); stroke-width: 1; }
.st-svg__y, .st-svg__x { fill: var(--muted); font-size: 11.5px; font-family: var(--font); }
.st-svg__area { fill: rgba(210, 171, 103, 0.16); }
.st-svg__avg { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.st-svg__max { fill: none; stroke: var(--cyan); stroke-width: 1.5; stroke-dasharray: 4 3; stroke-linejoin: round; opacity: 0.9; }
.st-svg__cross { stroke: var(--text-soft); stroke-width: 1; stroke-dasharray: 2 3; }
.st-svg__dot { stroke: var(--night); stroke-width: 2; }
.st-svg__dot--avg { fill: var(--gold-hi); }
.st-svg__dot--max { fill: var(--cyan); }
.st-chart__empty { display: grid; place-items: center; min-height: 190px; margin: 0; border: 1px dashed var(--line); }
.st-chart__readout { min-height: 1.6em; margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--text); }
.st-chart__summary { margin: 0; font-size: var(--fs-xs); }
.st-chart__summary:empty { display: none; }

/* ---------- incidents ---------- */
.st-incidents { margin: 0; padding: 0; list-style: none; }
.st-inc { padding: var(--sp-4) 0; border-top: 1px solid var(--line); }
.st-inc:first-child { border-top: 0; padding-top: 0; }
.st-inc--open { padding: var(--sp-4); margin-bottom: var(--sp-2); border: 1px solid rgba(239, 106, 82, 0.4); background: rgba(91, 19, 13, 0.25); }
.st-inc--open + .st-inc { border-top: 0; }
.st-inc--none { display: flex; align-items: center; gap: var(--sp-3); }
.st-inc--none p { margin: 0; color: var(--text-soft); }
.st-inc__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.st-inc__head h3 { margin: 0; font-size: var(--fs-md); color: #fff; }
.st-inc__what { margin: var(--sp-2) 0 0; color: var(--text-soft); font-size: var(--fs-sm); }
.st-inc__when { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); }

/* ---------- narrow screens ---------- */
@media (max-width: 1080px) {
  .st-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .st-banner { grid-template-columns: auto 1fr; padding: var(--sp-4); }
  .st-banner__meta { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .st-banner__title { font-size: var(--fs-lg); }
  .st-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-kpi { padding: var(--sp-3); }
  .st-kpi dd { font-size: var(--fs-xl); }
  /* The last 30 days only: 90 bars would be under 3 px wide. */
  .st-bars { grid-template-columns: repeat(30, minmax(0, 1fr)); height: 30px; }
  .st-day:nth-child(-n + 60) { display: none; }
  .st-axis__wide { display: none; }
  .st-axis__narrow { display: inline; }
  .st-comp__head { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .st-banner__mark::after { animation: none; }
  .st-day:hover, .st-day:focus-visible { transform: none; }
}
@media (forced-colors: active) {
  .st-day, .st-sw, .st-banner__mark { forced-color-adjust: none; }
}