/* Status page (B4). Layout specifics only — tokens from app.css. */

.status-banner {
  --tone: var(--signal);
  --tone-soft: var(--signal-soft);
  --tone-border: var(--signal-border);
  --tone-text: var(--signal-text);
  /* one indicator only: the live dot in the title when operational, otherwise the state icon on the first text line */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--tone-border);
  border-left: 4px solid var(--tone);
  border-radius: var(--radius-lg);
  background: var(--tone-soft);
}
.status-banner--degraded, .status-banner--partial_outage { --tone: var(--warn); --tone-soft: var(--warn-soft); --tone-border: var(--warn-border); --tone-text: var(--warn-text); }
.status-banner--major_outage { --tone: var(--danger); --tone-soft: var(--danger-soft); --tone-border: var(--danger-border); --tone-text: var(--danger-text); }
.status-banner--maintenance { --tone: var(--info); --tone-soft: var(--info-soft); --tone-border: var(--info-border); --tone-text: var(--info-text); }
.status-banner--unknown { --tone: var(--border-strong); --tone-soft: var(--surface-2); --tone-border: var(--border); --tone-text: var(--text-muted); }
.status-banner--plain { grid-template-columns: minmax(0, 1fr); }
.status-banner__icon { color: var(--tone-text); display: inline-flex; margin-top: 3px; }
.status-banner__body { min-width: 0; }
.status-banner__title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.015em; color: var(--text); }
.status-banner__text { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 2px; }
.status-banner__meta { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; grid-column: 1 / -1; }
@media (min-width: 768px) {
  .status-banner { grid-template-columns: auto minmax(0, 1fr) auto; }
  .status-banner--plain { grid-template-columns: minmax(0, 1fr) auto; }
  .status-banner__meta { grid-column: auto; align-self: center; }
}

.status-split { align-items: start; }
@media (min-width: 1024px) {
  .status-aside { position: sticky; top: calc(var(--header-h) + 24px); }
}
.status-group .card__header { padding-bottom: var(--s-3); }
.status-components { display: flex; flex-direction: column; }
.status-component { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); scroll-margin-top: calc(var(--header-h) + 16px); }
.status-component:first-child { border-top: 0; }
.status-component .uptime__head .badge { white-space: nowrap; }
.status-component .uptime__bar:focus-visible { box-shadow: 0 0 0 2px var(--brand); }

.status-subscribe { display: flex; flex-direction: column; gap: 2px; }
.status-subscribe a {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-2);
  margin-inline: calc(var(--s-2) * -1);
  border-radius: var(--radius);
  color: var(--text);
}
.status-subscribe a:hover { background: var(--surface-2); text-decoration: none; }
.status-subscribe a > .icon { margin-top: 2px; color: var(--brand-text); flex-shrink: 0; }
.status-subscribe span { display: flex; flex-direction: column; min-width: 0; }
.status-subscribe strong { font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.status-subscribe small { font-size: var(--fs-xs); color: var(--text-muted); }

/* incident history */
.status-history { display: flex; flex-direction: column; gap: var(--s-8); }
.status-month__title { font-size: var(--fs-lg); font-weight: 650; padding-bottom: var(--s-3); margin-bottom: var(--s-3); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); }
.status-month__empty { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-muted); }
.status-month__empty .icon { color: var(--signal-text); }

.status-incident { scroll-margin-top: calc(var(--header-h) + 16px); }
.status-incident.is-targeted { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.status-incident--active { border-left: 4px solid var(--warn); }
.status-incident__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.status-incident__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px var(--s-3);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  list-style: none;
}
.status-incident__summary::-webkit-details-marker { display: none; }
.status-incident__summary:focus-visible { outline: none; box-shadow: inset var(--focus-ring); border-radius: var(--radius-lg); }
.status-incident__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); grid-column: 1; }
.status-incident__title { font-weight: 600; font-size: var(--fs-base); color: var(--text); }
.status-incident__meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 2px var(--s-4); font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.status-incident__chevron { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--text-muted); transition: transform var(--dur) var(--ease); }
.status-incident[open] .status-incident__chevron { transform: rotate(180deg); }
.status-incident__content { padding: 0 var(--s-5) var(--s-5); border-top: 1px solid var(--border); padding-top: var(--s-4); }
.status-incident__body { font-size: var(--fs-sm); color: var(--text); max-width: 75ch; }
.status-incident--active .status-incident__meta { margin-top: var(--s-2); }
.status-incident--active .status-incident__body { margin-top: var(--s-3); }

.status-updates { margin-top: var(--s-4); display: flex; flex-direction: column; border-left: 2px solid var(--border); padding-left: var(--s-5); gap: var(--s-4); }
.status-updates__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.status-updates__item::before {
  content: "";
  position: absolute;
  left: calc(var(--s-5) * -1 - 6px);
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
}
.status-updates__item--resolved::before { border-color: var(--signal); background: var(--signal); }
.status-updates__item--monitoring::before { border-color: var(--info); }
.status-updates__item--identified::before, .status-updates__item--investigating::before { border-color: var(--warn); }
.status-updates__item--scheduled::before { border-color: var(--brand); }
.status-updates__status { font-size: var(--fs-sm); font-weight: 650; }
.status-updates__time { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.status-updates__body { font-size: var(--fs-sm); color: var(--text-muted); max-width: 75ch; }
@media (min-width: 768px) {
  .status-updates__item { grid-template-columns: 150px minmax(0, 1fr); column-gap: var(--s-4); }
  .status-updates__status { grid-column: 1; }
  .status-updates__time { grid-column: 1; grid-row: 2; }
  .status-updates__body { grid-column: 2; grid-row: 1 / span 2; }
}