/* Ael Status — styled on cronixui, the same design-token system as the app.
 *
 * The first version of this page hand-rolled its own palette, radii and type,
 * and the result looked like a different product on its own domain. That is the
 * cost of a surface nobody styles from the system: nothing tells you the page
 * has drifted, it just looks wrong next to the thing it reports on.
 *
 * So the tokens are not re-declared here. `cronixui.css` is a verbatim copy of
 * `cronixui/packages/web/dist/variables.css` (see the header in the README for
 * why it is vendored rather than imported from node_modules), and every value
 * below resolves to a `--cn-*` token. The overrides that follow mirror
 * `src/app/globals.css` — the same ember accent, the same fonts, the same
 * light-theme contrast corrections — because a status page that is on-brand
 * except for its secondary text contrast is still off-brand.
 *
 * If cronixui is upgraded, copy the file again and re-run:
 *   cp node_modules/cronixui/packages/web/dist/variables.css status/public/cronixui.css
 */
@import "./cronixui.css";

/* The app self-hosts both faces through next/font and exposes them as
   --rs-font-*. A static deployment cannot do that, so the same two families
   are requested from the CDN; identical faces, different delivery. The
   system fallbacks are kept behind them exactly as the app keeps its own. */
:root {
  --cn-font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cn-font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;
}

/* Mirrors the app's overrides, for the same reasons documented there. */
:root {
  --cn-text-dim: rgba(240, 237, 232, 0.42);
  --rs-ember-primary: var(--cn-accent);
  --rs-ember-tile: #8a2f26;
  --rs-ember-text: var(--cn-accent-text);
  --rs-ember-wash: var(--cn-accent-glow);
  --rs-ember-warning: #c2703a;
  --rs-overlay: rgba(0, 0, 0, 0.55);
  --rs-dur-fast: 120ms;
  --rs-dur-base: 150ms;
  --rs-dur-spatial: 200ms;
  --rs-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --rs-focus-glow: inset 0 0 0 1.5px var(--cn-accent-glow);
}

[data-theme="light"] {
  --cn-text-muted: rgba(28, 25, 23, 0.62);
  --cn-text-dim: rgba(28, 25, 23, 0.5);
  --rs-danger-text: #a12020;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --cn-text-muted: rgba(28, 25, 23, 0.62);
    --cn-text-dim: rgba(28, 25, 23, 0.5);
    --rs-danger-text: #a12020;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cn-bg);
  color: var(--cn-text);
  font-family: var(--cn-font);
  font-size: var(--cn-text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

code, .mono { font-family: var(--cn-font-mono); }

/* ── Shell ─────────────────────────────────────────────────────────────── */
.bar { border-bottom: 1px solid var(--cn-border); background: var(--cn-surface); }
.bar-inner {
  max-width: var(--cn-container-max);
  margin: 0 auto;
  padding: calc(var(--cn-space-8) + var(--cn-space-2)) var(--cn-space-6) var(--cn-space-6);
}
h1 {
  margin: 0;
  font-size: var(--cn-text-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: var(--cn-space-3);
}
.sub { margin: var(--cn-space-2) 0 0; color: var(--cn-text-muted); }
/* The app's brand mark tile, from the ember palette in globals.css. */
.mark {
  width: 14px; height: 14px; border-radius: var(--cn-radius-sm);
  background: var(--rs-ember-tile); display: inline-block; flex: none;
}

main {
  max-width: var(--cn-container-max);
  margin: 0 auto;
  padding: var(--cn-space-6) var(--cn-space-6) calc(var(--cn-space-12) + var(--cn-space-6));
}

/* ── State colour: the design system's own semantic ramp ────────────────
   operational → success, degraded → warning, down → error, unknown → dim.
   Using the tokens rather than hand-picked greens and reds is the whole point
   of being on cronixui: --cn-error is the same red as the app's danger text,
   so a down row reads as this product speaking, not a borrowed dashboard. */
.dot {
  width: 10px; height: 10px; border-radius: var(--cn-radius-full);
  background: var(--cn-text-dim); flex: none;
}
.dot.operational { background: var(--cn-success-text); }
.dot.degraded { background: var(--cn-warning-text); }
.dot.down { background: var(--cn-error-text); }
.dot.unknown { background: var(--cn-text-dim); }

/* ── Summary ──────────────────────────────────────────────────────────── */
.summary {
  display: flex; flex-wrap: wrap; gap: var(--cn-space-2) var(--cn-space-4);
  align-items: baseline; margin-bottom: var(--cn-space-5);
}
.summary-state {
  display: flex; align-items: center; gap: var(--cn-space-3);
  font-size: var(--cn-text-lg); font-weight: 600;
}
.summary-meta { color: var(--cn-text-muted); font-size: var(--cn-text-sm); }
.sep { opacity: 0.5; margin: 0 var(--cn-space-1); }

.notes {
  border: 1px solid var(--cn-warning-border);
  border-left: 2px solid var(--cn-warning-text);
  background: var(--cn-warning);
  color: var(--cn-text);
  border-radius: var(--cn-radius);
  padding: var(--cn-space-3) var(--cn-space-4);
  margin-bottom: var(--cn-space-5);
  font-size: var(--cn-text-sm);
}
.notes strong { color: var(--cn-warning-text); font-weight: 600; }
.notes ul { margin: var(--cn-space-2) 0 0; padding-left: var(--cn-space-5); }
.notes li { margin: var(--cn-space-1) 0; color: var(--cn-text-muted); }

.scope {
  color: var(--cn-text-muted);
  font-size: var(--cn-text-sm);
  border-left: 2px solid var(--cn-border);
  padding: 0 0 0 var(--cn-space-3);
  margin: 0 0 var(--cn-space-5);
}

/* ── Components ───────────────────────────────────────────────────────── */
.components { display: grid; gap: var(--cn-space-3); }

.card {
  border: 1px solid var(--cn-border);
  background: var(--cn-surface);
  border-radius: var(--cn-radius);
  overflow: hidden;
  transition: border-color var(--rs-dur-base) var(--rs-ease-out);
}
.card:focus-within { border-color: var(--cn-border-focus); }

.card-head {
  display: flex; align-items: center; gap: var(--cn-space-3);
  padding: var(--cn-space-3) var(--cn-space-4);
  cursor: pointer; user-select: none;
}
.card-head:hover { background: var(--cn-surface-2); }
.card-label { font-weight: 600; flex: 1; }
.chev {
  color: var(--cn-text-dim); font-size: var(--cn-text-xs);
  transition: transform var(--rs-dur-base) var(--rs-ease-out);
}
.card.open .chev { transform: rotate(90deg); }

/* Pill uses the accent as its text colour and a tinted surface, which is how
   the app's badges read; a filled block would shout louder than a status page
   should. */
.state-pill {
  font-size: var(--cn-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 2px var(--cn-space-2);
  border-radius: var(--cn-radius-full);
  border: 1px solid var(--cn-border);
  color: var(--cn-text-muted);
  background: var(--cn-surface-2);
}
.state-pill.operational { color: var(--cn-success-text); border-color: var(--cn-success-border); background: var(--cn-success); }
.state-pill.degraded { color: var(--cn-warning-text); border-color: var(--cn-warning-border); background: var(--cn-warning); }
.state-pill.down { color: var(--cn-error-text); border-color: var(--cn-error-border); background: var(--cn-error); }
.state-pill.unknown { color: var(--cn-text-dim); }

.latency {
  color: var(--cn-text-muted); font-size: var(--cn-text-xs);
  font-variant-numeric: tabular-nums; min-width: 52px; text-align: right;
}

.card-detail { padding: 0 var(--cn-space-4) var(--cn-space-3); font-size: var(--cn-text-sm); }
.card:not(.open) .card-detail { display: none; }
/* The invariant, stated in the product's own voice rather than as a tooltip
   nobody opens. */
.proves { margin: 0 0 var(--cn-space-2); color: var(--cn-text-muted); font-style: italic; }
.detail-text { color: var(--cn-text); }

.subs {
  margin-top: var(--cn-space-2);
  border-top: 1px solid var(--cn-border);
  padding-top: var(--cn-space-2);
  display: grid; gap: var(--cn-space-1);
}
.sub {
  display: flex; align-items: center; gap: var(--cn-space-2);
  padding: var(--cn-space-1) 0; font-size: var(--cn-text-sm);
}
.sub-label {
  font-family: var(--cn-font-mono);
  font-size: var(--cn-text-xs);
  min-width: 108px; color: var(--cn-text);
}
.sub-state { font-size: var(--cn-text-xs); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.sub-detail { color: var(--cn-text-muted); flex: 1; }

/* ── History ──────────────────────────────────────────────────────────── */
.history { margin-top: calc(var(--cn-space-8) + var(--cn-space-3)); }
.history-head { display: flex; align-items: center; justify-content: space-between; }
h2 { font-size: var(--cn-text-lg); margin: 0; font-weight: 600; }
h3 { font-size: var(--cn-text-sm); margin: var(--cn-space-5) 0 var(--cn-space-2); color: var(--cn-text-muted); font-weight: 600; }

.windows { display: flex; gap: var(--cn-space-1); }
.windows button {
  background: var(--cn-surface);
  border: 1px solid var(--cn-border);
  color: var(--cn-text-muted);
  border-radius: var(--cn-radius-sm);
  padding: var(--cn-space-1) var(--cn-space-3);
  font-family: var(--cn-font);
  font-size: var(--cn-text-xs);
  cursor: pointer;
  transition: all var(--rs-dur-base) var(--rs-ease-out);
}
.windows button:hover { border-color: var(--cn-border-hover); color: var(--cn-text); }
.windows button.on { color: var(--cn-text); border-color: var(--cn-accent); background: var(--cn-accent-glow); }
.windows button:focus-visible { outline: none; box-shadow: var(--rs-focus-glow); }
.windows button:disabled { opacity: 0.4; cursor: not-allowed; }
.windows button:disabled:hover { border-color: var(--cn-border); color: var(--cn-text-muted); }

.unavailable {
  border: 1px dashed var(--cn-border);
  border-radius: var(--cn-radius);
  padding: var(--cn-space-5) var(--cn-space-4);
  color: var(--cn-text-muted);
  font-size: var(--cn-text-sm);
  background: var(--cn-surface);
}

.persistence { color: var(--cn-text-muted); font-size: var(--cn-text-xs); margin: var(--cn-space-2) 0 var(--cn-space-4); }

.uptime { display: grid; gap: var(--cn-space-1); }
.up-row { display: flex; align-items: center; gap: var(--cn-space-3); font-size: var(--cn-text-sm); }
.up-name { min-width: 108px; }
.up-bar { flex: 1; height: 6px; border-radius: var(--cn-radius-full); background: var(--cn-surface-2); overflow: hidden; }
.up-fill { height: 100%; background: var(--cn-success-text); border-radius: var(--cn-radius-full); }
.up-fill.degraded { background: var(--cn-warning-text); }
.up-fill.down { background: var(--cn-error-text); }
.up-fill.unknown { background: var(--cn-text-dim); }
.up-val {
  font-variant-numeric: tabular-nums; color: var(--cn-text-muted);
  min-width: 64px; text-align: right; font-size: var(--cn-text-xs);
}

.chart {
  display: flex; gap: 2px; align-items: flex-end;
  height: 40px; margin: var(--cn-space-4) 0 var(--cn-space-1);
}
.bar-col { flex: 1; min-width: 2px; height: 100%; background: var(--cn-success-text); border-radius: 1px; opacity: 0.85; }
.bar-col.degraded { background: var(--cn-warning-text); }
.bar-col.down { background: var(--cn-error-text); }
.bar-col.unknown { background: var(--cn-text-dim); }

.incidents { display: grid; gap: var(--cn-space-1); }
.incident {
  display: flex; gap: var(--cn-space-3); align-items: baseline;
  font-size: var(--cn-text-sm);
  border: 1px solid var(--cn-border); border-radius: var(--cn-radius-sm);
  padding: var(--cn-space-2) var(--cn-space-3); background: var(--cn-surface);
}
.inc-when {
  color: var(--cn-text-muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; font-size: var(--cn-text-xs);
}
.inc-live {
  color: var(--cn-warning-text); font-weight: 600;
  font-size: var(--cn-text-xs); text-transform: uppercase; letter-spacing: 0.05em;
}
.empty { color: var(--cn-text-muted); font-size: var(--cn-text-sm); }

footer { border-top: 1px solid var(--cn-border); margin-top: calc(var(--cn-space-10) + var(--cn-space-2)); }
footer p {
  max-width: var(--cn-container-max); margin: 0 auto;
  padding: var(--cn-space-5) var(--cn-space-6);
  color: var(--cn-text-muted); font-size: var(--cn-text-xs);
}

@media (max-width: 560px) {
  .sub-label, .up-name { min-width: 88px; }
  .chart { height: 30px; }
}