/* Same tokens as the main site (src/styles/global.css). The main site's chosen
   color scheme is pushed with the service list and applied on top of these. */
:root {
  --bg: #fdf8f3;
  --bg-sidebar: #f5ede0;
  --bg-alt: #ece3d5;
  --ink: #1c1815;
  --ink-soft: #5c5347;
  --ink-mute: #a8998a;
  --border: #e8d9c8;
  --accent: #c05c2a;
  --accent-soft: #c05c2a16;

  --ok: #3fa36b;
  --warn: #d59a2a;
  --bad: #d0453b;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141210;
    --bg-sidebar: #1c1815;
    --bg-alt: #252018;
    --ink: #f5ede0;
    --ink-soft: #c9bcab;
    --ink-mute: #8a7d6e;
    --border: #332b22;
    --accent: #e07848;
    --accent-soft: #e0784820;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141210;
  --bg-sidebar: #1c1815;
  --bg-alt: #252018;
  --ink: #f5ede0;
  --ink-soft: #c9bcab;
  --ink-mute: #8a7d6e;
  --border: #332b22;
  --accent: #e07848;
  --accent-soft: #e0784820;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; color: var(--ink-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--ink-mute); font-size: 0.9rem; }

/* Top bar */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--border);
  background: var(--bg-sidebar);
}
.brand { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.01em; }
.top-right { display: flex; align-items: center; gap: 1rem; }
.back { font-size: 0.85rem; color: var(--ink-soft); transition: color 0.15s; }
.back:hover { color: var(--accent); }
.theme-btn {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: none;
  color: var(--ink-mute);
  cursor: pointer;
}
.theme-btn:hover { color: var(--ink); border-color: var(--ink-mute); }
.theme-btn svg { width: 15px; height: 15px; display: none; grid-area: 1 / 1; }
.theme-btn[data-mode="system"] .ico-system,
.theme-btn[data-mode="light"] .ico-light,
.theme-btn[data-mode="dark"] .ico-dark { display: block; }

.wrap { max-width: 900px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem) 2rem; }
h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 1.5rem;
}

/* Overall banner */
.banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-sidebar);
  margin-bottom: 1.25rem;
}
.banner-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ink-mute); flex-shrink: 0; }
.banner-title { font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.banner-sub { font-size: 0.82rem; color: var(--ink-mute); }
.banner[data-state="operational"] { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); background: color-mix(in srgb, var(--ok) 9%, var(--bg)); }
.banner[data-state="operational"] .banner-dot { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
.banner[data-state="degraded"], .banner[data-state="partial"] { border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); background: color-mix(in srgb, var(--warn) 10%, var(--bg)); }
.banner[data-state="degraded"] .banner-dot, .banner[data-state="partial"] .banner-dot { background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 22%, transparent); }
.banner[data-state="major"] { border-color: color-mix(in srgb, var(--bad) 50%, var(--border)); background: color-mix(in srgb, var(--bad) 10%, var(--bg)); }
.banner[data-state="major"] .banner-dot { background: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 22%, transparent); }

/* Summary strip */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 2.75rem;
  overflow: hidden;
}
.stat { display: flex; flex-direction: column; gap: 0.2rem; padding: 1.1rem 1.25rem; }
.stat + .stat { border-left: 1px solid var(--border); }
.stat-v { font-family: var(--font-display); font-size: 1.65rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-l { font-size: 0.75rem; color: var(--ink-mute); }
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--border); }
}

.block { margin-bottom: 3rem; }
.block-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
h2 { font-size: 0.85rem; font-weight: 600; color: var(--ink-mute); margin: 0 0 1rem; }
.block-head h2 { margin: 0; }

.range { display: flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.range button {
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  color: var(--ink-soft);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
}
.range button.active { background: var(--ink); color: var(--bg); }

/* Services */
.group { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin: 1.75rem 0 0.6rem; }
.group:first-child { margin-top: 0; }
.svc { padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 0.6rem; }
.svc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.svc-name { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 500; color: var(--ink); }
.svc-name a { text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.svc-name a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-mute); flex-shrink: 0; }
.dot[data-s="operational"] { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.dot[data-s="degraded"] { background: var(--warn); }
.dot[data-s="down"] { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 20%, transparent); }
.svc-desc { display: block; font-size: 0.8rem; color: var(--ink-mute); margin: 0.1rem 0 0 1.1rem; }
.svc-right { text-align: right; flex-shrink: 0; }
.svc-state { display: block; font-size: 0.82rem; color: var(--ink-soft); }
.svc-state[data-s="down"] { color: var(--bad); }
.svc-state[data-s="degraded"] { color: var(--warn); }
.svc-meta { font-size: 0.74rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

.bars { display: grid; gap: 2px; height: 30px; margin-top: 0.85rem; }
.bars i { border-radius: 2px; background: var(--bg-alt); transition: opacity 0.1s; }
.bars i:hover { opacity: 0.7; }
.b-up { background: var(--ok) !important; }
.b-partial { background: var(--warn) !important; }
.b-down { background: var(--bad) !important; }
.bars-axis { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--ink-mute); margin-top: 0.3rem; }
.bars-axis b { font-weight: 500; color: var(--ink-soft); }

.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.72rem; color: var(--ink-mute); margin-top: 0.75rem; }
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend i { width: 10px; height: 10px; border-radius: 2px; }
.legend .b-none { background: var(--bg-alt); }

/* Incidents */
.incidents { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.incidents li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.incidents li span { color: var(--ink-mute); font-size: 0.8rem; text-align: right; }
.incidents .ongoing { color: var(--bad); }

.foot { max-width: 900px; margin: 0 auto; padding: 1.5rem clamp(1rem, 4vw, 2rem) 3rem; border-top: 1px solid var(--border); }
.foot p { font-size: 0.8rem; color: var(--ink-mute); }

@media (max-width: 560px) {
  .bars { height: 24px; gap: 1px; }
  .back { display: none; }
}

/* ── Communication: notices, incidents, maintenance ── */
:root { --maint: #5e81ac; }
.intro { margin: -0.75rem 0 1.5rem; max-width: 60ch; }
.b-maint { background: var(--maint) !important; }
.dot[data-s="maintenance"] { background: var(--maint); }
.svc-state[data-s="maintenance"] { color: var(--maint); }
.banner[data-state="maintenance"] { border-color: color-mix(in srgb, var(--maint) 45%, var(--border)); background: color-mix(in srgb, var(--maint) 9%, var(--bg)); }
.banner[data-state="maintenance"] .banner-dot { background: var(--maint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--maint) 22%, transparent); }

.notice { display: flex; gap: 0.75rem; padding: 0.85rem 1.1rem; border-radius: var(--radius); margin-bottom: 0.75rem; font-size: 0.92rem; color: var(--ink); border: 1px solid var(--border); background: var(--bg-sidebar); }
.notice::before { content: "i"; flex-shrink: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 600 0.75rem var(--font-body); color: #fff; background: var(--maint); }
.notice[data-level="warning"]::before { content: "!"; background: var(--warn); }
.notice[data-level="success"]::before { content: "✓"; background: var(--ok); }

.card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 1rem; scroll-margin-top: 1rem; }
.card.incident { border-left: 4px solid var(--warn); }
.card.incident[data-impact="major"], .card.incident[data-impact="critical"] { border-left-color: var(--bad); }
.card.incident[data-impact="none"] { border-left-color: var(--ink-mute); }
.card.maint { border-left: 4px solid var(--maint); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.card-title { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 0; }
.card-meta { font-size: 0.78rem; color: var(--ink-mute); }
.card-affects { font-size: 0.8rem; color: var(--ink-mute); margin-top: 0.3rem; }
.card-desc { margin-top: 0.6rem; font-size: 0.9rem; white-space: pre-line; }
.pill { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--bg-alt); color: var(--ink-soft); margin-right: 0.4rem; vertical-align: 1px; }
.pill[data-s="investigating"], .pill[data-s="identified"] { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.pill[data-s="monitoring"] { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.pill[data-s="resolved"] { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.pill[data-s="maintenance"] { background: color-mix(in srgb, var(--maint) 18%, transparent); color: var(--maint); }

.timeline { list-style: none; margin: 0.9rem 0 0; padding: 0 0 0 1rem; border-left: 1px solid var(--border); }
.timeline li { position: relative; padding-bottom: 0.85rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: calc(-1rem - 4px); top: 0.45rem; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-mute); }
.timeline li:first-child::before { background: var(--accent); }
.tl-msg { font-size: 0.9rem; color: var(--ink); white-space: pre-line; }
.tl-when { font-size: 0.74rem; color: var(--ink-mute); }

details.card summary { cursor: pointer; list-style: none; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary .card-title::after { content: " +"; color: var(--ink-mute); font-weight: 400; }
details.card[open] summary .card-title::after { content: " −"; }

.foot-links { margin-top: 0.4rem; }
.foot-links a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.foot-links a:hover { color: var(--accent); }

/* Partial outage (e.g. a maintenance window shown as partial) */
.dot[data-s="partial"] { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
.svc-state[data-s="partial"] { color: var(--warn); }