/* ==========================================================================
 * status.css — the parts of the status page the main site doesn't have.
 * --------------------------------------------------------------------------
 * Everything else comes from css/graffiti.css, the main site's stylesheet,
 * copied unchanged by scripts/sync-design.sh. Tokens only: no colour is
 * written here (test/page.test.js checks), so a rebrand in graffiti.css
 * carries straight through.
 *
 * Rule 4 of the brand applies to this whole page: brand colour is not status
 * colour. No dot, bar or card here is ever orange; healthy is --live.
 * ========================================================================== */

/* -- The "right now" card in the hero ------------------------------------- */
.now { background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: var(--space-5); transform: rotate(-1deg); }
.now__state { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 900; font-size: var(--text-xl); letter-spacing: -0.03em; line-height: 1.1; }
.now__state .status-dot { width: 14px; height: 14px; }
.now__note { color: var(--ink-muted); font-size: var(--text-sm); margin: var(--space-3) 0 0; }
.now__meta { color: var(--ink-faint); font-size: var(--text-sm); margin: var(--space-2) 0 var(--space-5); }
.now .btn { width: 100%; justify-content: center; }

/* -- Notices above the components ------------------------------------------ */
.notices { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.notices:empty { display: none; }
.notices__item { margin-bottom: var(--space-3); }
.notices .callout p, .notices__item p { margin: 0; }
.notices .callout p + p, .notices__item p + .btn { margin-top: var(--space-2); }

/* -- Components ------------------------------------------------------------ */
.components { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.component { padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.component__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.component__name { font-weight: 700; font-size: var(--text-md); margin: 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.component__desc { color: var(--ink-muted); font-size: var(--text-sm); margin: var(--space-1) 0 0; }
.component__state { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.component__state .faint { font-weight: 400; }
.component--dependency .component__name { color: var(--ink-muted); }

/* -- History bars ---------------------------------------------------------- */
.bars { display: flex; gap: 2px; height: 34px; margin-top: var(--space-4); }
.bars > span { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--bg-inset); box-shadow: inset 0 0 0 1px var(--line); }
.bars > span[data-state="operational"] { background: var(--live); box-shadow: none; }
.bars > span[data-state="degraded"] { background: var(--warn); box-shadow: none; }
.bars > span[data-state="down"] { background: var(--danger-text); box-shadow: none; }
.bars > span:hover { opacity: 0.7; }
.bars--many { gap: 1px; }
.bars--many > span { border-radius: 1px; }
.bars--loading { background: var(--bg-inset); border-radius: 2px; }
.bars__empty { color: var(--ink-faint); font-size: var(--text-xs); margin-top: var(--space-2); }
.bars__axis { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--ink-faint); font-size: var(--text-xs); margin-top: var(--space-2); }
.bars__axis strong { color: var(--ink-muted); font-weight: 600; }
.bars__axis .narrow { display: none; }

/* One shared tooltip, moved into place over the hovered bar. */
.tip { position: fixed; z-index: 50; transform: translate(-50%, -100%); pointer-events: none; background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-3); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); white-space: nowrap; }
.tip__day { font-weight: 700; color: var(--ink); }
.tip__line { color: var(--ink-muted); }

.legend { display: flex; gap: var(--space-5); flex-wrap: wrap; color: var(--ink-muted); font-size: var(--text-sm); margin: var(--space-5) 0 var(--space-3); }
.legend > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend .status-dot--off { border-radius: 2px; }

/* -- Incidents --------------------------------------------------------------- */
.incidents > li { scroll-margin-top: calc(var(--space-9) + var(--space-4)); }
.incidents > li[data-severity="major_outage"]::before,
.incidents > li[data-severity="partial_outage"]::before { border-color: var(--danger-text); }
.incidents > li[data-severity="degraded"]::before,
.incidents > li[data-severity="dependency_outage"]::before { border-color: var(--warn); }
.incidents > li[data-status="resolved"]::before { border-color: var(--line-strong); }
.incidents > li:target { background: var(--bg-raised); border-radius: var(--radius); box-shadow: 0 0 0 var(--space-2) var(--bg-raised); }
.incidents p { margin: var(--space-1) 0 0; color: var(--ink-muted); }
.incident__updates { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--ink-muted); }
.incident__updates summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.incident__updates ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
/* graffiti.css styles every li inside .timeline; these nested ones are plain. */
.incident__updates li { padding: 2px 0; }
.incident__updates li::before { content: none; }
.incident__updates time { display: inline; color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-right: var(--space-2); }

/* -- Loading placeholders ---------------------------------------------------- */
.skeleton { display: inline-block; border-radius: var(--radius-sm); background: var(--bg-inset); color: transparent; }
.skeleton--title { width: 12rem; height: 1.1em; }
.skeleton--line { width: 60%; height: 1em; }

@media (max-width: 640px) {
  /* The last 30 buckets on a phone; the axis label says so. */
  .bars > span:nth-last-child(n+31) { display: none; }
  .bars--many { gap: 2px; }
  .bars__axis .wide { display: none; }
  .bars__axis .narrow { display: inline; }
  .now { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .now { transform: none; }
}