/* Titanite Status.
   Tokens are TITANNET's live ones (titanite-public src/index.css and the
   runtime ACCENT in ThemeProvider.tsx, 26 Sept 2026): warm paper by day, a
   brown-black by night, IBM Plex Sans for text and Plex Mono for numbers.
   titanite-themes/themes/titannet.css predates the 15 Sept redesign, so the
   values are copied from the app rather than from that file. */

:root,
html[data-theme="day"] {
  --void: #f7f5f2;
  --panel: #ffffff;
  --raised: #f1eee9;
  --sunk: #ebe7e1;
  --line: #e2ddd5;
  --line-hi: #cfc8bd;
  --hi: #1c1a17;
  --mid: #5a554d;
  --lo: #66615a;
  --dim: #716b63;
  --accent: #3b3b8f;
  --accent-ink: #ffffff;
  --accent-tint: #edebf4;
  --ok: #1e8f52;
  --warn: #b3770f;
  --alert: #c23a31;
  --ok-tint: #e3f2e9;
  --alert-tint: #f8e5e3;
  --warn-tint: #f6ecd9;
  --bar-empty: #e8e3dc;
  --shadow: 0 1px 2px rgba(28, 26, 23, 0.06), 0 6px 22px rgba(28, 26, 23, 0.05);
  --r-ctl: 6px;
  --r-pick: 10px;
  --r-card: 13px;
  --ease: 140ms ease;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

html[data-theme="night"] {
  --void: #15130f;
  --panel: #1a1714;
  --raised: #1c1915;
  --sunk: #23201b;
  --line: #2a2721;
  --line-hi: #3a362e;
  --hi: #f2eee7;
  --mid: #b8b1a5;
  --lo: #8f887c;
  --dim: #878074;
  --accent: #a3a2f2;
  --accent-ink: #15130f;
  --accent-tint: #2a2846;
  --ok: #4fbf7d;
  --warn: #dca24a;
  --alert: #e5675e;
  --ok-tint: #17291e;
  --alert-tint: #33191a;
  --warn-tint: #30261a;
  --bar-empty: #2a2721;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 30px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--void);
  color: var(--hi);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── Top bar: TITANNET's, trimmed to the brand ─────────────────────────── */
.top { height: 56px; background: var(--panel); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.top-in {
  max-width: 880px; height: 100%; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; white-space: nowrap; }
.brand:hover { color: var(--hi); }
.mark { width: 24px; height: 27px; flex-shrink: 0; }
.brand-sub {
  font-weight: 500; letter-spacing: 0; color: var(--mid);
  padding-left: 10px; border-left: 1px solid var(--line-hi);
}
.ibtn {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--r-ctl); color: var(--mid); transition: background var(--ease), color var(--ease);
}
.ibtn:hover { background: var(--sunk); color: var(--hi); }
html[data-theme="day"] .i-day,
html[data-theme="night"] .i-night { display: none; }

/* ── Page ──────────────────────────────────────────────────────────────── */
.page { flex: 1; width: 100%; max-width: 880px; margin: 0 auto; padding: 28px 20px 40px; display: flex; flex-direction: column; gap: 20px; }

/* The one-line answer, first. Colour and word both carry the state. */
.summary {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 24px; border-radius: var(--r-card);
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
  border-left: 4px solid var(--line-hi);
}
.summary-state { display: flex; align-items: center; gap: 12px; }
.summary h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.summary-sub { color: var(--mid); font-size: 14px; padding-left: 24px; }
.summary.is-up { border-left-color: var(--ok); }
.summary.is-partial { border-left-color: var(--warn); background: linear-gradient(90deg, var(--warn-tint), var(--panel) 60%); }
.summary.is-down { border-left-color: var(--alert); background: linear-gradient(90deg, var(--alert-tint), var(--panel) 60%); }

.pip { width: 12px; height: 12px; border-radius: 50%; background: var(--line-hi); flex-shrink: 0; position: relative; }
.is-up .pip, .svc.is-up .pip { background: var(--ok); }
.is-partial .pip { background: var(--warn); }
.is-down .pip, .svc.is-down .pip { background: var(--alert); }
.svc.is-pending .pip, .svc.is-paused .pip, .svc.is-unknown .pip { background: var(--dim); }
.is-down .pip::after, .is-partial .summary-state .pip::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid currentColor; color: inherit; opacity: 0;
  animation: ping 1.8s ease-out infinite;
}
.is-down .pip::after { color: var(--alert); }
.is-partial .pip::after { color: var(--warn); }
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pip::after { animation: none !important; } }

/* ── Panels ────────────────────────────────────────────────────────────── */
.groups { display: flex; flex-direction: column; gap: 20px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--raised);
}
.panel-head h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mid); }
.panel-meta { font-family: var(--font-mono); font-size: 12px; color: var(--dim); white-space: nowrap; }

/* One service. Name and state on the first line, the 90-day strip under it. */
.svc { padding: 16px 20px 14px; border-bottom: 1px solid var(--line); }
.svc:last-child { border-bottom: 0; }
.svc-row { display: flex; align-items: center; gap: 12px; }
.svc-name { font-weight: 600; font-size: 15px; }
.svc-note { color: var(--lo); font-size: 13px; margin-top: 1px; }
.svc-id { min-width: 0; flex: 1; }
.svc-state {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-size: 13px; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 999px;
  background: var(--sunk); color: var(--mid);
}
.svc-state .pip { width: 8px; height: 8px; }
.svc.is-up .svc-state { background: var(--ok-tint); color: var(--ok); }
.svc.is-down .svc-state { background: var(--alert-tint); color: var(--alert); }

.strip { display: flex; gap: 2px; height: 30px; margin-top: 12px; align-items: stretch; }
.day { flex: 1; min-width: 0; border-radius: 2px; background: var(--bar-empty); transition: transform var(--ease), filter var(--ease); }
.day.ok { background: var(--ok); }
.day.dip { background: var(--warn); }
.day.bad { background: var(--alert); }
.day:hover { transform: scaleY(1.12); filter: brightness(1.1); }
.strip-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--dim); font-family: var(--font-mono); }
.strip-foot .up { color: var(--mid); }

/* ── Incidents ─────────────────────────────────────────────────────────── */
.incident-list { list-style: none; margin: 0; padding: 0; }
.incident { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: baseline; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.incident:last-child { border-bottom: 0; }
.incident .pip { width: 8px; height: 8px; align-self: center; background: var(--ok); }
.incident.is-open .pip { background: var(--alert); }
.incident-what { font-weight: 600; }
.incident-when { font-family: var(--font-mono); font-size: 12.5px; color: var(--lo); white-space: nowrap; }
.incident-how { grid-column: 2 / 4; color: var(--mid); font-size: 13.5px; }
.empty { padding: 18px 20px; color: var(--lo); font-size: 14px; }

.notice {
  padding: 12px 16px; border-radius: var(--r-pick); font-size: 14px;
  background: var(--warn-tint); color: var(--hi); border: 1px solid var(--line-hi);
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.foot {
  max-width: 880px; width: 100%; margin: 0 auto; padding: 8px 20px 36px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--lo); font-size: 13px;
}
.foot a { color: var(--mid); }
.foot a:hover { color: var(--accent); }

/* ── Tooltip for a day ─────────────────────────────────────────────────── */
.tip {
  position: fixed; z-index: 20; pointer-events: none;
  padding: 7px 10px; border-radius: var(--r-ctl);
  background: var(--hi); color: var(--void); font-size: 12.5px; line-height: 1.35;
  box-shadow: 0 8px 24px rgba(28, 26, 23, 0.18); white-space: nowrap;
}
.tip b { font-weight: 600; }

@media (max-width: 560px) {
  .page { padding: 18px 16px 32px; gap: 16px; }
  .top-in { padding: 0 16px; }
  .summary { padding: 18px 18px; }
  .summary h1 { font-size: 19px; }
  .summary-sub { padding-left: 0; }
  .svc, .panel-head, .incident { padding-left: 16px; padding-right: 16px; }
  .svc-note { display: none; }
  .strip { gap: 1px; height: 26px; }
  .foot { padding: 4px 16px 28px; }
}