:root {
  --accent: #0b6b64;
  --accent-hover: #085049;
  --accent-soft: #e2f2f0;

  --bg: #ffffff;
  --bg-alt: #f6f8f8;
  --surface: #ffffff;
  --border: #e2e5ea;
  --border-strong: #c9cfd8;

  --text: #14181f;
  --text-muted: #5b6572;

  --up-bg: #e8f6ee;   --up-text: #14663c;   --up-dot: #2f9e44;
  --deg-bg: #fdf3e3;  --deg-text: #7a4c06;  --deg-dot: #e8940c;
  --down-bg: #fdeaea; --down-text: #8a1f1f; --down-dot: #d63939;
  --unk-bg: #f1f2f4;  --unk-text: #5b6572;  --unk-dot: #9aa2ad;

  --radius: 10px;
  --maxw: 860px;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #4fd6c6; --accent-hover: #7fe6da; --accent-soft: #102a28;
    --bg: #0e1117; --bg-alt: #141922; --surface: #161b24;
    --border: #262d39; --border-strong: #38414f;
    --text: #e8ecf2; --text-muted: #99a3b1;

    --up-bg: #10301f;   --up-text: #78d3a1;   --up-dot: #3fbf6d;
    --deg-bg: #33280f;  --deg-text: #e7bd6a;  --deg-dot: #e8a33c;
    --down-bg: #3a1717; --down-text: #f19a9a; --down-dot: #e35b5b;
    --unk-bg: #1c222c;  --unk-text: #99a3b1;  --unk-dot: #6b7684;

    --shadow: none;
  }
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.site-header { border-bottom: 1px solid var(--border); background: var(--bg); }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; flex-wrap:wrap; }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:650; font-size:1.02rem; color:var(--text); text-decoration:none; letter-spacing:-.01em; }
.brand .mark { width:22px; height:22px; border-radius:5px; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:700; }
.site-nav { display:flex; gap:18px; font-size:.94rem; flex-wrap:wrap; }
.site-nav a { color:var(--text-muted); text-decoration:none; }
.site-nav a:hover, .site-nav a[aria-current='page'] { color:var(--accent); }

.site-footer { margin-top:64px; border-top:1px solid var(--border); background:var(--bg-alt); padding:28px 0 44px; font-size:.86rem; color:var(--text-muted); }
.site-footer p { margin:0 0 8px; }
.site-footer a { color:var(--text-muted); }
.site-footer a:hover { color:var(--accent); }

h1 { font-size:clamp(1.85rem,5vw,2.45rem); line-height:1.2; letter-spacing:-.022em; margin:40px 0 12px; }
h2 { font-size:1.35rem; line-height:1.3; letter-spacing:-.014em; margin:44px 0 12px; }
h3 { font-size:1.06rem; margin:26px 0 6px; }
p { margin:0 0 14px; }
a { color: var(--accent); }
.lede { font-size:1.1rem; color:var(--text-muted); margin-bottom:26px; }
.muted { color: var(--text-muted); }
.small { font-size:.86rem; }
code, .mono { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size:.92em; }
code { background:var(--bg-alt); border:1px solid var(--border); border-radius:5px; padding:1px 5px; }
pre { background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; overflow-x:auto; font-size:.86rem; }
pre code { background:none; border:none; padding:0; }

/* ---- overall banner ---- */
.banner { border-radius:var(--radius); padding:18px 22px; margin:26px 0 8px; border:1px solid transparent; display:flex; gap:14px; align-items:flex-start; }
.banner-up   { background:var(--up-bg);   color:var(--up-text); }
.banner-degraded { background:var(--deg-bg); color:var(--deg-text); }
.banner-down { background:var(--down-bg); color:var(--down-text); }
.banner-unknown { background:var(--unk-bg); color:var(--unk-text); }
.banner .dot { width:14px; height:14px; border-radius:50%; flex:0 0 auto; margin-top:8px; background:currentColor; }
.banner h2 { margin:0; font-size:1.3rem; color:inherit; }
.banner p { margin:2px 0 0; font-size:.92rem; opacity:.85; }

/* ---- service cards ---- */
.services { display:flex; flex-direction:column; gap:14px; margin-top:24px; }
.service { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); overflow:hidden; }
.service-head { display:grid; grid-template-columns: 1.7fr auto .7fr .7fr; gap:12px; align-items:center; padding:14px 18px; background:var(--bg-alt); border-bottom:1px solid var(--border); }
.service-head .svc-name { min-width:0; }
.service-head h2 { margin:0; font-size:1.02rem; letter-spacing:-.005em; }
.service-head h2 a { color:var(--text); text-decoration:none; }
.service-head h2 a:hover { color:var(--accent); text-decoration:underline; }
.service-head .svc-label { display:block; font-size:.82rem; color:var(--text-muted); }
.service-head .col { text-align:right; font-size:.82rem; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.service-head .col b { display:block; font-weight:600; font-size:.92rem; color:var(--text); }
.service-head .col span { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }

.checks { list-style:none; margin:0; padding:0; }
.checks li { display:grid; grid-template-columns: 1.7fr auto .7fr .7fr; gap:12px; align-items:center; padding:11px 18px; border-bottom:1px solid var(--border); font-size:.92rem; }
.checks li:last-child { border-bottom:none; }
.checks .chk-name { min-width:0; }
.checks .chk-name b { font-weight:560; }
.checks .chk-name .req { display:block; font-size:.78rem; color:var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap:anywhere; }
.checks .num { text-align:right; font-variant-numeric:tabular-nums; color:var(--text-muted); font-size:.86rem; }
.note { grid-column:1 / -1; margin:2px 0 0; font-size:.82rem; color:var(--text-muted); }

.pill { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; border-radius:999px; padding:3px 10px; white-space:nowrap; }
.pill .dot { width:7px; height:7px; border-radius:50%; }
.pill-up { background:var(--up-bg); color:var(--up-text); }
.pill-up .dot { background:var(--up-dot); }
.pill-degraded { background:var(--deg-bg); color:var(--deg-text); }
.pill-degraded .dot { background:var(--deg-dot); }
.pill-down { background:var(--down-bg); color:var(--down-text); }
.pill-down .dot { background:var(--down-dot); }
.pill-unknown { background:var(--unk-bg); color:var(--unk-text); }
.pill-unknown .dot { background:var(--unk-dot); }

@media (max-width: 700px) {
  .service-head, .checks li { grid-template-columns: 1fr auto; row-gap:4px; }
  .service-head .col, .checks .num { grid-column: auto; text-align:left; }
  .service-head .col:nth-of-type(n), .checks .num { font-size:.78rem; }
}

/* ---- incident feed ---- */
.feed { list-style:none; padding:0; margin:14px 0 0; }
.feed li { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); font-size:.92rem; align-items:baseline; flex-wrap:wrap; }
.feed li:last-child { border-bottom:none; }
.feed time { color:var(--text-muted); font-size:.82rem; white-space:nowrap; flex:0 0 auto; font-variant-numeric:tabular-nums; }

.cta { background:var(--accent-soft); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; margin-top:48px; }
.cta h2 { margin-top:0; }
.cta p:last-child { margin-bottom:0; }

.table-scroll { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); margin-top:14px; }
table { border-collapse:collapse; width:100%; font-size:.92rem; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
th { background:var(--bg-alt); font-weight:600; white-space:nowrap; }
tbody tr:last-child td { border-bottom:none; }

.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }