/* status.zubaer.com. Brand: zubaer.com ink/paper, teal + lime, Syne/Sora. */

/* ---------- tokens ---------- */
:root {
  color-scheme: light dark;

  --bg: #f7f6f3;
  --surface: #ffffff;
  --surface-2: #efede8;
  --line: #dedbd3;
  --text: #1a2421;
  --muted: #56625e;
  --faint: #7d8884;
  --accent: #24776a;
  --ok: #17785e;
  --ok-fill: #35a98a;
  --warn: #8f5b00;
  --warn-fill: #e0a526;
  --orange-fill: #e2762f;
  --down: #b33a2b;
  --down-fill: #d9513f;
  --empty: #e4e1da;
  --shadow: 0 1px 2px rgb(14 20 18 / 0.05), 0 12px 32px -18px rgb(14 20 18 / 0.18);

  --font-display: "Syne", "Sora", system-ui, sans-serif;
  --font-body: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 18px;
  --state: var(--faint);
}

/* Fallback for browsers without light-dark(): follow the system setting. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b100e; --surface: #121a18; --surface-2: #18221f; --line: #25322e;
    --text: #e9f0ec; --muted: #9babA4; --faint: #71827b; --accent: #c5ed9a;
    --ok: #7fe0b2; --ok-fill: #52b7a6; --warn: #f2c14e; --warn-fill: #f2c14e;
    --orange-fill: #f08a4b; --down: #ff8275; --down-fill: #ff6b5e; --empty: #1d2925;
    --shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 24px 48px -28px rgb(0 0 0 / 0.7);
  }
}

@supports (color: light-dark(white, black)) {
  :root {
    --bg: light-dark(#f7f6f3, #0b100e);
    --surface: light-dark(#ffffff, #121a18);
    --surface-2: light-dark(#efede8, #18221f);
    --line: light-dark(#dedbd3, #25322e);
    --text: light-dark(#1a2421, #e9f0ec);
    --muted: light-dark(#56625e, #9baba4);
    --faint: light-dark(#7d8884, #71827b);
    --accent: light-dark(#24776a, #c5ed9a);
    --ok: light-dark(#17785e, #7fe0b2);
    --ok-fill: light-dark(#35a98a, #52b7a6);
    --warn: light-dark(#8f5b00, #f2c14e);
    --warn-fill: light-dark(#e0a526, #f2c14e);
    --orange-fill: light-dark(#e2762f, #f08a4b);
    --down: light-dark(#b33a2b, #ff8275);
    --down-fill: light-dark(#d9513f, #ff6b5e);
    --empty: light-dark(#e4e1da, #1d2925);
    --shadow: 0 1px 2px light-dark(rgb(14 20 18 / 0.05), transparent), 0 24px 48px -28px light-dark(rgb(14 20 18 / 0.25), rgb(0 0 0 / 0.7));
  }
}

/* The theme toggle writes the <meta>; map it back so CSS follows it. */
:root:has(> head > meta[name="color-scheme"][content="dark"]) { color-scheme: dark; }
:root:has(> head > meta[name="color-scheme"][content="light"]) { color-scheme: light; }

body[data-state="operational"] { --state: var(--ok-fill); }
body[data-state="degraded"] { --state: var(--warn-fill); }
body[data-state="partial"], body[data-state="major"] { --state: var(--down-fill); }

.s-up { --c: var(--ok); --cf: var(--ok-fill); }
.s-slow { --c: var(--warn); --cf: var(--warn-fill); }
.s-down { --c: var(--down); --cf: var(--down-fill); }
.s-pending { --c: var(--faint); --cf: var(--faint); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  min-height: 100vh;
  font: 400 15px/1.55 var(--font-body);
  color: var(--text);
  background:
    radial-gradient(70rem 34rem at 12% -12rem, color-mix(in oklab, var(--state) 20%, transparent), transparent 70%),
    radial-gradient(50rem 26rem at 105% -6rem, color-mix(in oklab, var(--accent) 9%, transparent), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: min(1180px, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 14px; border-radius: 10px; background: var(--text); color: var(--bg); }
.skip:focus { top: 12px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- top bar ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 19px/1 var(--font-display); letter-spacing: -0.02em; }
.brand:hover { color: inherit; }
.brand-mark { width: 30px; height: 30px; }
.brand-mark rect { fill: var(--text); }
.brand-mark path { fill: none; stroke: var(--bg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.brand-sub { margin-left: -8px; font: 500 14px/1 var(--font-mono); color: var(--muted); letter-spacing: 0; }
.top-right { display: flex; align-items: center; gap: 12px; }
.live { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in oklab, var(--surface) 70%, transparent); font: 500 12px/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--state); box-shadow: 0 0 0 0 color-mix(in oklab, var(--state) 60%, transparent); animation: ping 2.4s ease-out infinite; }
.theme-btn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in oklab, var(--surface) 70%, transparent); color: var(--muted); cursor: pointer; }
.theme-btn:hover { color: var(--text); border-color: var(--faint); }
.theme-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
/* Show the action for the opposite of what is rendered now. */
.theme-btn .to-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:has(> head > meta[name="color-scheme"][content="light dark"]) .theme-btn .to-light { display: block; }
  :root:has(> head > meta[name="color-scheme"][content="light dark"]) .theme-btn .to-dark { display: none; }
}
:root:has(> head > meta[name="color-scheme"][content="dark"]) .theme-btn .to-light { display: block; }
:root:has(> head > meta[name="color-scheme"][content="dark"]) .theme-btn .to-dark { display: none; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 56px); align-items: end; padding-block: clamp(28px, 6vw, 72px) clamp(28px, 4vw, 44px); }
.eyebrow { display: flex; align-items: center; gap: 16px; padding-left: 6px; font: 500 12px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.orb { position: relative; width: 14px; height: 14px; flex: none; }
.orb i { position: absolute; inset: 0; border-radius: 50%; background: var(--state); }
.orb i + i { background: none; border: 1.5px solid var(--state); animation: ripple 2.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.orb i + i + i { animation-delay: 1.4s; }
.hero-copy { container-type: inline-size; min-width: 0; }
.hero h1 { margin-top: 22px; font: 800 clamp(1.7rem, 9.3cqi, 5rem)/0.98 var(--font-display); letter-spacing: -0.045em; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--state); }
body[data-state="operational"] .hero h1 em { color: var(--accent); }
.lede { margin-top: 22px; max-width: 46ch; font-size: clamp(15px, 1.5vw, 17px); color: var(--muted); text-wrap: pretty; }
.lede strong { color: var(--text); font-weight: 600; }

.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }

/* live response-time equalizer */
.eq { padding: 18px 20px 14px; }
.eq-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.eq-read { color: var(--text); text-transform: none; letter-spacing: 0; text-align: right; }
.eq-groups { display: flex; gap: 14px; margin-top: 16px; }
.eq-group { flex: var(--n) 1 0; min-width: 0; }
.eq-bars { display: flex; align-items: flex-end; gap: 4px; height: 132px; background: repeating-linear-gradient(to top, transparent 0 32px, color-mix(in oklab, var(--line) 70%, transparent) 32px 33px); border-bottom: 1px solid var(--line); }
.eq-bar { flex: 1 1 0; display: flex; align-items: flex-end; height: 100%; min-width: 0; border-radius: 5px 5px 0 0; }
.eq-bar i { display: block; width: 100%; height: var(--h); min-height: 4px; border-radius: 4px 4px 0 0; background: linear-gradient(to top, color-mix(in oklab, var(--cf) 45%, transparent), var(--cf)); transform-origin: bottom; transition: height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.15s; }
.eq-bar.s-down i { background: repeating-linear-gradient(-45deg, var(--cf) 0 4px, color-mix(in oklab, var(--cf) 45%, transparent) 4px 8px); }
.eq-bar.s-pending i { background: var(--empty); }
.eq-bar:hover i, .eq-bar:focus-visible i { filter: brightness(1.2) saturate(1.2); }
.eq-bars:hover .eq-bar:not(:hover) i { opacity: 0.45; }
.eq-label { margin-top: 8px; font: 500 10px/1.2 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.booting .eq-bar i { animation: grow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: var(--d); }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tile { padding: 18px 20px; }
.tile-k { font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tile-v { margin-top: 10px; font: 700 clamp(1.6rem, 2.6vw, 2.1rem)/1 var(--font-display); letter-spacing: -0.03em; }
.tile-v small { font: 500 0.5em/1 var(--font-mono); letter-spacing: 0; color: var(--muted); margin-left: 4px; }
.tile-n { margin-top: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.notice { margin-top: 14px; padding: 14px 18px; border: 1px solid color-mix(in oklab, var(--warn-fill) 55%, var(--line)); border-radius: 14px; background: color-mix(in oklab, var(--warn-fill) 12%, var(--surface)); font-size: 14px; }
.notice a { text-decoration: underline; }

/* ---------- service groups ---------- */
.group { margin-top: clamp(36px, 5vw, 56px); }
.group-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-inline: 4px; margin-bottom: 14px; }
.group-head h2 { font: 700 clamp(1.25rem, 2.2vw, 1.6rem)/1.1 var(--font-display); letter-spacing: -0.025em; }
.group-head p { color: var(--muted); font-size: 13.5px; }
.group-count { margin-left: auto; font: 500 12px/1 var(--font-mono); color: var(--muted); }
.group-count b { color: var(--c); font-weight: 600; }

.rows { overflow: hidden; }
.row { display: grid; grid-template-columns: minmax(190px, 250px) minmax(0, 1fr) 124px 112px; gap: clamp(16px, 2.4vw, 30px); align-items: center; padding: 18px 22px; border-top: 1px solid var(--line); position: relative; }
.row:first-child { border-top: 0; }
.row::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cf); opacity: 0; }
.row.s-down::before, .row.s-slow::before { opacity: 1; }
.row.s-down { background: color-mix(in oklab, var(--down-fill) 7%, transparent); }
.row:target { background: color-mix(in oklab, var(--accent) 9%, transparent); }

.row-id { min-width: 0; }
.row-id h3 { display: flex; align-items: center; gap: 9px; font: 600 15.5px/1.25 var(--font-body); letter-spacing: -0.01em; }
.row-id h3 a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-id h3 a::after { content: "↗"; margin-left: 5px; font-size: 11px; color: var(--faint); opacity: 0; transition: opacity 0.15s; }
.row-id h3 a:hover::after, .row-id h3 a:focus-visible::after { opacity: 1; }
.glyph { width: 15px; height: 15px; flex: none; color: var(--cf); }
.glyph svg { display: block; width: 100%; height: 100%; }
.desc { margin-top: 3px; padding-left: 24px; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host { margin-top: 2px; padding-left: 24px; font: 400 11px/1.4 var(--font-mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.row-history { min-width: 0; }
.bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; height: 34px; border-radius: 6px; cursor: crosshair; touch-action: pan-y; }
.bars i { border-radius: 2px; background: var(--empty); transition: transform 0.12s, filter 0.12s; }
.bars i.d-ok { background: var(--ok-fill); }
.bars i.d-warn { background: var(--warn-fill); }
.bars i.d-bad { background: var(--orange-fill); }
.bars i.d-down { background: var(--down-fill); }
.bars i.d-none { background: none; box-shadow: inset 0 0 0 1px var(--empty); }
.bars i.on { transform: scaleY(1.22); filter: brightness(1.15); }
.bars i.d-none.on { box-shadow: inset 0 0 0 1px var(--faint); }
.booting .bars { animation: reveal 1.1s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
.readout { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; min-height: 16px; font: 400 11px/1.4 var(--font-mono); color: var(--faint); }
.readout .r-detail { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.readout .narrow { display: none; }

.row-spark { min-width: 0; }
.spark { display: block; width: 100%; height: 30px; overflow: visible; }
.spark .line { fill: none; stroke: var(--cf); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark .area { fill: color-mix(in oklab, var(--cf) 16%, transparent); stroke: none; }
.spark .fail { stroke: var(--down-fill); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark-cap { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; margin-top: 5px; font: 400 11px/1.3 var(--font-mono); color: var(--faint); }
.spark-cap b { font-weight: 500; color: var(--text); }

.row-stats { text-align: right; }
.uptime { font: 600 17px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.uptime-k { margin-top: 3px; font: 400 11px/1.3 var(--font-mono); color: var(--faint); }
.pill { display: inline-block; margin-top: 7px; padding: 3px 9px; border-radius: 999px; font: 600 10.5px/1.4 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--c); background: color-mix(in oklab, var(--cf) 14%, transparent); }
.row-error { grid-column: 1 / -1; margin-top: -6px; padding-left: 24px; font: 500 12px/1.4 var(--font-mono); color: var(--down); }

/* ---------- incidents ---------- */
.incidents { margin-top: clamp(40px, 6vw, 64px); }
.inc-list { padding: 6px 22px; }
.inc { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); }
.inc:first-child { border-top: 0; }
.inc .glyph { margin-top: 3px; }
.inc-title { font-weight: 600; }
.inc-title a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.inc-meta { margin-top: 3px; font: 400 12px/1.5 var(--font-mono); color: var(--muted); }
.inc-when { font: 400 12px/1.5 var(--font-mono); color: var(--muted); text-align: right; white-space: nowrap; }
.calm { display: flex; align-items: center; gap: 16px; padding: 26px 22px; color: var(--muted); }
.calm svg { width: 34px; height: 34px; flex: none; color: var(--ok-fill); }
.calm strong { display: block; color: var(--text); font-weight: 600; }

/* ---------- footer ---------- */
.foot { display: flex; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-top: clamp(48px, 7vw, 88px); padding-block: 26px 44px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.foot p { flex: 1 1 420px; max-width: 70ch; text-wrap: pretty; }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; }
.foot nav a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }

/* ---------- motion ---------- */
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--state) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes ripple { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.7); opacity: 0; } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id stats" "history history"; row-gap: 14px; }
  .row-id { grid-area: id; }
  .row-stats { grid-area: stats; }
  .row-history { grid-area: history; }
  .row-spark { display: none; }
}
@media (max-width: 560px) {
  .top { padding-block: 16px; }
  .live { padding: 7px 10px; }
  .live .lp { display: none; }
  .top-right { gap: 8px; }
  .eq { padding: 16px 14px 12px; }
  .eq-groups { gap: 8px; }
  .eq-bars { gap: 2px; height: 104px; }
  .tile { padding: 15px 16px; }
  .row { padding: 16px; }
  .inc-list { padding-inline: 16px; }
  .inc { grid-template-columns: 22px minmax(0, 1fr); }
  .inc-when { grid-column: 2; text-align: left; }
  /* 45 days fit a phone better than 90. */
  .bars i:nth-child(-n + 45) { display: none; }
  .readout .wide { display: none; }
  .readout .narrow { display: inline; }
}