/* --- Quiet Instrument · Bangumi Status ------------------------------------- */

:root {
  --bg:           #f8f7f3;
  --bg-grain:    rgba(0,0,0,0.015);
  --surface:      #ffffff;
  --surface-2:    #f4f2ec;
  --surface-sunk: #f6f4ef;
  --border:       #eae8e1;
  --border-strong:#d8d5cc;
  --text:         #2c2a24;
  --text-dim:     #6b6a63;
  --text-faint:   #9a978e;

  --brand:        #f09199;
  --brand-ink:    #F77E94;
  --accent:       #f09199;

  --ok:           #85c99b;
  --ok-soft:      #e8f1e7;
  --ok-line:      #b6d2bb;

  --degraded:     #D9C775;
  --degraded-soft:#f7ecd3;
  --degraded-line:#e3c488;

  --down:         #D97A92;
  --down-soft:    #f4dede;
  --down-line:    #deb1b1;

  --none:         #e6e4dc;
  --none-soft:    #eeece4;

  --shadow-sm: 0 1px 0 rgba(26,24,20,0.04);
  --shadow-md: 0 1px 2px rgba(26,24,20,0.04), 0 6px 24px -12px rgba(26,24,20,0.08);

  --radius:    10px;
  --radius-sm: 6px;

  --font-sans:   "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* No serif anywhere — alias --font-serif to the sans face so legacy usages (brand, headings) render sans too. */
  --font-serif:  var(--font-sans);
  --font-mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-body:   var(--font-sans);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #121311;
    --bg-grain:    rgba(255,255,255,0.02);
    --surface:      #191b18;
    --surface-2:    #1f211d;
    --surface-sunk: #15171400;
    --border:       #272a26;
    --border-strong:#3a3e38;
    --text:         #e8e6df;
    --text-dim:     #a7a69c;
    --text-faint:   #71736b;

    --brand:        #f4a3aa;
    --brand-ink:    #F77E94;
    --accent:       #f4a3aa;

    --ok:           #8ccfa3;
    --ok-soft:      #11241a;
    --ok-line:      #294a36;

    --degraded:     #D9C775;
    --degraded-soft:#2a2212;
    --degraded-line:#553f16;

    --down:         #D97A92;
    --down-soft:    #2a1414;
    --down-line:    #552424;

    --none:         #2c2f2a;
    --none-soft:    #23251f;

    --shadow-sm: 0 1px 0 rgba(0,0,0,0.3);
    --shadow-md: 0 1px 2px rgba(0,0,0,0.4), 0 10px 40px -20px rgba(0,0,0,0.6);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  text-autospace: normal;
}

body {}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }

h1, h2, h3 { font-weight: 600; letter-spacing: -0.015em; margin: 0; }

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero", "ss02";
  letter-spacing: -0.01em;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Accent top rule ------------------------------------------------------ */
.accent-rule { display: none; }

/* --- Page top toolbar (brand + subscribe) --------------------------------- */
.page-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.page-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.top-nav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.top-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.top-nav a:hover {
  color: var(--text);
  background: var(--surface-2);
  text-decoration: none;
}
body[data-page="status"] .top-nav a[data-route-link="status"],
body[data-page="wiki"] .top-nav a[data-route-link="wiki"] {
  color: var(--text);
  background: var(--surface-2);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  font-size: 23px;
  color: var(--text);
  /* Keep the original wordmark face (Instrument Sans) even though the rest of
     the site moved to Hanken Grotesk. */
  font-family: "Instrument Sans", var(--font-sans);
}
.brand:hover { text-decoration: none; }
.brand-badge {
  width: 37px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  color: var(--brand-ink);
  transform: translateY(4px);
}
.brand-badge svg { width: 100%; height: 100%; }
.brand-name { font-weight: 600; letter-spacing: -0.01em; }
.brand-name-italic {
  font-style: italic;
  font-weight: 600;
  font-size: 26px;
  color: var(--brand-ink);
  margin-right: -2px;
}

.lang-btn {
  padding: 5px 11px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.lang-btn:hover { border-color: var(--brand); color: var(--brand-ink); }

.subscribe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 2px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.subscribe-btn svg {
  width: 13px;
  height: 13px;
  color: var(--brand-ink);
}
/* Match the top-nav hover language: gentle surface-2 fill, no colour shift, no lift. */
.subscribe-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}
.subscribe-btn:active { background: var(--surface-2); }

@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .page-top { align-items: flex-start; gap: 12px; }
  .page-actions { gap: 8px; }
  .top-nav a { padding: 3px 8px; font-size: 11.5px; }
  .subscribe-btn span { display: none; }
  .subscribe-btn { width: 32px; padding: 2px; }
  .subscribe-btn svg { width: 15px; height: 15px; }
}

main.container { padding-top: 40px; padding-bottom: 80px; }

/* --- Banner --------------------------------------------------------------- */
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 22px 26px;
  margin-bottom: 30px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.banner::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--border-strong);
  transition: background 0.2s ease;
}
.banner__left {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.banner__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--none);
  color: #fff;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.06);
}
.banner__icon svg { width: 18px; height: 18px; display: block; }
.banner__text { min-width: 0; }
.banner__title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.banner__sub {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--text-dim);
}

.banner__meta {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  text-align: right;
}
.banner__meta > div { display: flex; flex-direction: column; gap: 4px; }
.banner__meta dt {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 500;
}
.banner__meta dd {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}

.banner--loading::before { background: var(--border-strong); }
.banner--loading .banner__icon { background: var(--surface-2); color: var(--text-faint); }
.banner--loading .banner__icon svg { animation: pulse 1.4s ease-in-out infinite; }

.banner--ok { border-color: var(--ok-line); }
.banner--ok::before { background: var(--ok); }
.banner--ok .banner__icon { background: var(--ok); }

.banner--degraded { border-color: var(--degraded-line); }
.banner--degraded::before { background: var(--degraded); }
.banner--degraded .banner__icon { background: var(--degraded); }

.banner--down { border-color: var(--down-line); }
.banner--down::before { background: var(--down); }
.banner--down .banner__icon { background: var(--down); }

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@media (max-width: 640px) {
  .banner { gap: 12px; padding: 14px 16px; }
  .banner__left { gap: 12px; }
  .banner__icon { width: 28px; height: 28px; flex-shrink: 0; }
  .banner__icon svg { width: 14px; height: 14px; }
  .banner__title { font-size: 16px; }
  .banner__sub { font-size: 12px; }
  .banner__meta { gap: 16px; text-align: right; flex-shrink: 0; }
  .banner__meta dt { font-size: 10px; }
  .banner__meta dd { font-size: 16px; }
}

/* --- Sections ------------------------------------------------------------- */
.components-section { margin-bottom: 44px; }

body[data-page="wiki"] #banner,
body[data-page="wiki"] .banner-reactions,
body[data-page="wiki"] #unresolved-section,
body[data-page="wiki"] .components-section,
body[data-page="wiki"] .online-section,
body[data-page="wiki"] #past-incidents-section,
body[data-page="wiki"] .probes-section {
  display: none;
}

body[data-page="status"] #wiki-stats-page {
  display: none;
}

/* --- Wiki stats ----------------------------------------------------------- */
.wiki-page {
  margin-top: 2px;
}

body[data-page="wiki"] .container {
  max-width: 1180px;
}

.wiki-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
  padding: 2px 2px 20px;
  border-bottom: 1px solid var(--border);
}
.wiki-hero h1 {
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.wiki-hero p:not(.wiki-kicker) {
  max-width: 520px;
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: 13.5px;
}
.wiki-hero__meta {
  display: flex;
  gap: 24px;
  margin: 0;
  text-align: right;
}
.wiki-hero__meta dt {
  margin-bottom: 4px;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.wiki-hero__meta dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
}
.wiki-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 32px;
}
.wiki-summary__item {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.wiki-summary__item .num {
  display: block;
  color: var(--text);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.1;
}
.wiki-summary__item .desc {
  display: block;
  margin-top: 5px;
  color: var(--text-faint);
  font-size: 12px;
}
.wiki-summary__item:nth-child(2) .num { color: #459f74; }
.wiki-summary__item:nth-child(3) .num { color: #4f84bf; }
.wiki-summary__item:nth-child(4) .num { color: #b77a3b; }

.wiki-error {
  margin-bottom: 22px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-dim);
}

.wiki-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 24px;
}
.wiki-chart-block {
  min-width: 0;
}
.wiki-chart-block .section-head {
  margin-bottom: 10px;
}
.wiki-chart {
  width: 100%;
  height: 560px;
  min-height: 560px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.wiki-chart__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-faint);
  font-size: 12px;
  font-style: italic;
}

@media (max-width: 960px) {
  body[data-page="wiki"] .container {
    max-width: 800px;
  }
  .wiki-charts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .wiki-hero {
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }
  .wiki-hero__meta {
    text-align: left;
    gap: 18px;
    flex-wrap: wrap;
  }
  .wiki-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wiki-chart {
    height: 520px;
    min-height: 520px;
  }
}

@media (max-width: 420px) {
  .wiki-summary {
    grid-template-columns: 1fr;
  }
}

/* --- Legend --------------------------------------------------------------- */
.legend {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 14px;
  padding: 0 2px;
}
.legend__item { display: inline-flex; align-items: center; gap: 7px; }
.legend__spacer { flex: 1; min-width: 10px; }
.legend__axis {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.dot--ok { background: var(--ok); }
.dot--degraded { background: var(--degraded); }
.dot--down { background: var(--down); }
.dot--none { background: var(--none); border: 1px solid var(--border-strong); }

/* --- Components ----------------------------------------------------------- */
.components {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.group {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.group-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  background: var(--surface-sunk);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.domain-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-dim);
}
.uptime-hint {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 500;
}
.group-hdr-right { display: inline-flex; align-items: center; gap: 10px; }

/* --- Reactions (Quiet Instrument · editorial accent) --- */
.banner-reactions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: -20px;
  margin-bottom: 16px;
  position: relative;
  z-index: 10;
}

/* Active chips — minimal token frame, serif-italic count */
.likes_grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.likes_grid .item {
  position: relative;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 3px 9px 3px 8px;
  color: var(--text-dim);
  font-size: 11.5px;
  font-family: var(--font-sans);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  line-height: 1;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.likes_grid .item:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.likes_grid .item.selected {
  color: var(--brand-ink);
  border-color: color-mix(in srgb, var(--brand) 60%, var(--border));
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
}
.likes_grid .item.selected .num { color: var(--brand-ink); }
.likes_grid .item.busy { opacity: 0.6; }
.likes_grid .item .emoji {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: 100% auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  flex-shrink: 0;
  image-rendering: pixelated;
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.likes_grid .item:hover .emoji { transform: scale(1.12) rotate(-4deg); }
.likes_grid .item .num {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  transition: color 0.18s ease;
}

/* Trigger — pill matching .guest-toggle, with serif label */
.rx-dd { position: relative; }
.rx-dd a.icon.like_dropdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  color: var(--text-faint);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.rx-dd a.icon.like_dropdown:hover,
.rx-dd.open a.icon.like_dropdown {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
}
.rx-dd a.icon.like_dropdown .title {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
}
.rx-dd a.icon.like_dropdown .ico {
  display: inline-block;
  width: 12px;
  height: 11px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rx-dd a.icon.like_dropdown:hover .ico,
.rx-dd.open .ico { opacity: 1; color: var(--brand-ink); transform: scale(1.08); }
.ico_like {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0307 1.69986C11.4024 1.07447 10.5705 0.732655 9.68264 0.732655C8.79479 0.732655 7.96036 1.077 7.332 1.70239L7.00382 2.02901L6.67056 1.69733C6.0422 1.07194 5.20523 0.72506 4.31738 0.72506C3.43207 0.72506 2.59764 1.0694 1.97182 1.69226C1.34346 2.31766 0.997478 3.14814 1.00002 4.03179C1.00002 4.91544 1.34855 5.74339 1.97691 6.36878L6.75451 11.1238C6.82066 11.1896 6.9097 11.2251 6.99619 11.2251C7.08269 11.2251 7.17173 11.1921 7.23787 11.1263L12.0256 6.37891C12.654 5.75351 13 4.92303 13 4.03938C13.0025 3.15573 12.6591 2.32525 12.0307 1.69986ZM11.5423 5.8953L6.99619 10.4022L2.46027 5.88771C1.96165 5.39145 1.6869 4.73314 1.6869 4.03179C1.6869 3.33044 1.9591 2.67213 2.45772 2.1784C2.9538 1.68467 3.61524 1.41122 4.31738 1.41122C5.02206 1.41122 5.68604 1.68467 6.18466 2.18093L6.7596 2.75315C6.89443 2.88735 7.11067 2.88735 7.2455 2.75315L7.81535 2.186C8.31397 1.68973 8.97795 1.41628 9.68009 1.41628C10.3822 1.41628 11.0437 1.68973 11.5423 2.18346C12.0409 2.67973 12.3131 3.33803 12.3131 4.03938C12.3157 4.74073 12.0409 5.39904 11.5423 5.8953Z' fill='currentColor'/%3E%3C/svg%3E");
}

/* Picker grid — 4 columns, opens upward */
.rx-grid {
  list-style: none;
  margin: 0;
  padding: 6px;
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  min-width: 168px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.15s ease,
              transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 0s 0.18s;
  pointer-events: none;
}
.rx-dd.open .rx-grid {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.15s ease,
              transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 0s 0s;
}
.rx-grid li { margin: 0; padding: 0; list-style: none; opacity: 0; transform: translateY(2px); }
.rx-dd.open .rx-grid li {
  animation: rx-item-in 0.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.rx-dd.open .rx-grid li:nth-child(1)  { animation-delay: 0.02s; }
.rx-dd.open .rx-grid li:nth-child(2)  { animation-delay: 0.04s; }
.rx-dd.open .rx-grid li:nth-child(3)  { animation-delay: 0.06s; }
.rx-dd.open .rx-grid li:nth-child(4)  { animation-delay: 0.08s; }
.rx-dd.open .rx-grid li:nth-child(5)  { animation-delay: 0.05s; }
.rx-dd.open .rx-grid li:nth-child(6)  { animation-delay: 0.07s; }
.rx-dd.open .rx-grid li:nth-child(7)  { animation-delay: 0.09s; }
.rx-dd.open .rx-grid li:nth-child(8)  { animation-delay: 0.11s; }
.rx-dd.open .rx-grid li:nth-child(9)  { animation-delay: 0.08s; }
.rx-dd.open .rx-grid li:nth-child(10) { animation-delay: 0.10s; }
.rx-dd.open .rx-grid li:nth-child(11) { animation-delay: 0.12s; }
.rx-dd.open .rx-grid li:nth-child(12) { animation-delay: 0.14s; }
@keyframes rx-item-in {
  to { opacity: 1; transform: none; }
}
.rx-grid li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease;
}
.rx-grid li a:hover { background: var(--surface-2); transform: scale(1.12); }
.rx-grid li a:active { transform: scale(0.94); }
.rx-grid li a.is-mine {
  background: color-mix(in srgb, var(--brand) 14%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent);
}
.rx-grid li a.is-busy { opacity: 0.6; }
@keyframes rx-shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-4px); }
  75%       { transform: translateX(4px); }
}
.rx-shake { animation: rx-shake 0.3s ease; }
@keyframes rx-float-up {
  0%   { opacity: 1;   transform: translateY(0)     scale(1.5) rotate(0deg); }
  30%  { opacity: 1;   transform: translateY(-24px) scale(1.2) rotate(calc(var(--rx-rot, 0deg) * 0.5)); }
  100% { opacity: 0;   transform: translateY(-72px) scale(0.5) rotate(var(--rx-rot, 0deg)); }
}
.rx-float {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
  animation: rx-float-up 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.rx-grid img.emoji {
  width: 22px;
  height: 22px;
  display: block;
  image-rendering: pixelated;
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rx-grid li a:hover img.emoji { transform: scale(1.05); }

.guest-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--down);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.guest-badge--degraded { background: var(--degraded); }

.guest-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid transparent;
  color: var(--text-faint);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 2px 8px 2px 5px;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.guest-toggle:hover { color: var(--text); background: var(--surface); border-color: var(--border); }
.guest-toggle__chevron {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  transition: transform 0.18s ease;
}
.guest-toggle[aria-pressed="true"] .guest-toggle__chevron { transform: rotate(90deg); }
.guest-toggle[aria-pressed="true"] { color: var(--text); }

/* Guest rows hidden when group lacks .show-guest — regardless of status. */
/* Guest rows are kept in the DOM and animated open/closed via .show-guest. */
.component[data-kind="guest"] {
  max-height: 180px;
  overflow: hidden;
  /* One duration + easing for every animated property so the row opens/closes
     as a single coherent motion (no padding/border lagging behind max-height). */
  transition:
    background 0.15s ease,
    max-height 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    padding-top 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    padding-bottom 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-top-width 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Once probe-detail is expanded, the 280px cap clips the probe list (the
   .show-guest collapse animation needs a finite max-height, but the open
   state would otherwise hide most rows behind overflow:hidden). */
.component[data-kind="guest"].open {
  max-height: none;
  overflow: visible;
}
.group:not(.show-guest) .component[data-kind="guest"] {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
}
/* When guest row is collapsed, the auth row sits flush under the header. */
.group:not(.show-guest) .component[data-kind="guest"] + .component {
  border-top: none;
}

.component {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 0;
  align-items: start;
  padding: 12px 18px 8px;
  border-top: 1px solid var(--border);
  transition: background 0.15s ease;
  overflow: hidden;
}
.component:first-of-type { border-top: none; }
.component:hover { background: color-mix(in srgb, var(--surface-2) 40%, transparent); }

.component-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  min-width: 0;
  height: 20px;
}
.component-label .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.component-label .label-text { font-weight: 500; color: var(--text); }
.component-label .status-text {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-left: 1px;
}

.status-dot.status-ok { background: var(--ok); }
.status-dot.status-degraded { background: var(--degraded); }
.status-dot.status-down { background: var(--down); }
.status-dot.status-none { background: var(--none); }

.component-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}

/* 90-day strip */
.strip {
  display: flex;
  gap: 1.5px;
  align-items: stretch;
  height: 20px;
  flex: 1;
  min-width: 0;
}
.strip-cell {
  flex: 1 1 0;
  min-width: 0;
  background: var(--none);
  border-radius: 2px;
  cursor: help;
  transition: transform 0.08s ease, filter 0.08s ease;
}
.strip-cell:hover { filter: brightness(1.12); }
.strip-cell.cell-ok { background: var(--ok); }
.strip-cell.cell-degraded { background: var(--degraded); }
.strip-cell.cell-down { background: var(--down); }
.strip-cell.cell-none { background: var(--none-soft); border: 1px solid var(--border); }

.component-right .mid {
  color: var(--text-dim);
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 80px;
  text-align: right;
}

@media (max-width: 720px) {
  .component { grid-template-columns: 1fr; column-gap: 0; row-gap: 8px; padding: 10px 14px; }
  .component-right { flex-wrap: wrap; gap: 4px 8px; }
  .strip { flex: 1 1 100%; }
  .component-right .mid { flex: 1 0 auto; font-size: 10.5px; text-align: left; }
}

/* Probe detail (expandable) */
.probe-detail {
  grid-column: 1 / -1;
  overflow: hidden;
  min-width: 0;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: 1px dashed var(--border-strong);
  border-top-width: 0;
  transition:
    max-height 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    margin-top 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    padding-top 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-top-width 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.component.open .probe-detail {
  /* max-height inline-set by JS to scrollHeight; cleared after open animation. */
  opacity: 1;
  margin-top: 14px;
  padding-top: 14px;
  border-top-width: 1px;
}
.probe-detail.is-open {
  /* After the open transition completes, drop the cap so SSE-driven probe
     additions can grow the panel naturally. Non-interpolatable (none),
     so no animation runs at this transition; the visual size is already
     where it needs to be (frozen by inline maxHeight just before). */
  max-height: none;
}

.probe-row {
  display: grid;
  grid-template-columns: minmax(80px, 180px) minmax(0, 1fr) 80px 90px;
  gap: 10px;
  padding: 7px 0;
  font-size: 12.5px;
  align-items: center;
  color: var(--text-dim);
  min-width: 0;
}
.probe-row + .probe-row { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.probe-row .probe-name {
  color: var(--text);
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.probe-row .probe-err {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.probe-row .probe-lat {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text);
}
.probe-row .probe-status {
  text-align: right;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.probe-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 7px;
  border-radius: 20px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.probe-toggle:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.component.open .probe-toggle { color: var(--text); border-color: var(--border-strong); }
.probe-toggle__count { font-variant-numeric: tabular-nums; }
.probe-toggle__chevron::before { content: "▸"; font-size: 9px; }
.component.open .probe-toggle__chevron::before { content: "▾"; }

/* --- Probes section ------------------------------------------------------- */
.probes-section { margin-bottom: 48px; }
.probes-toggle { cursor: pointer; user-select: none; }
.probes-toggle::after { content: "▸"; margin-left: 6px; font-size: 11px; color: var(--text-faint); transition: transform 0.15s ease; display: inline-block; }
.probes-toggle[aria-expanded="true"]::after { transform: rotate(90deg); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 0 2px;
}
.section-head h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.section-head__hint {
  font-size: 11.5px;
  color: var(--text-faint);
  font-family: var(--font-mono);
}
.section-head__right {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

.probe-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.probe-list[hidden] {
  display: none;
}
.probe-list.animating {
  overflow: hidden;
  transition:
    max-height 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 240ms ease;
}
.probe-list.is-collapsed {
  opacity: 0;
}
.probe-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.probe-card:hover { border-color: var(--border-strong); }
.probe-card .name {
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.probe-card .region {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 2px;
  font-family: var(--font-mono);
}
.pill {
  font-size: 10.5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.probe-card.online .pill {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: var(--ok-line);
}
.probe-card.offline {
  opacity: 0.75;
}
.probe-card.offline .pill {
  background: var(--down-soft);
  color: var(--down);
  border-color: var(--down-line);
}

/* --- Footer --------------------------------------------------------------- */
.ftr {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.ftr__right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ftr__right .ftr__meta { margin: 0; }
.ftr__desc {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-dim);
  max-width: 540px;
  line-height: 1.55;
}
.ftr__meta {
  margin: 0;
  font-size: 12px;
  color: var(--text-faint);
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  font-family: var(--font-mono);
}
.ftr__meta .num { color: var(--text-dim); }

/* --- Online users chart -------------------------------------------------- */
.online-section { margin-bottom: 44px; }
.online-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 0 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.online-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
/* Pill segmented controls, matching .top-nav. */
.online-tabs, .online-metrics {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.online-tab, .online-metric {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 3px 11px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-faint);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.online-tab:hover, .online-metric:hover { color: var(--text); background: var(--surface-2); }
.online-tab.active, .online-metric.active { color: var(--text); background: var(--surface-2); }
.online-card__chart {
  position: relative; width: 100%; height: 140px;
  padding: 0 18px;
  margin-top: 14px;
}
/* uPlot host: the chart canvas fills the padded card area. */
.online-uplot-host { width: 100%; height: 100%; }
.online-card__chart .uplot,
.online-card__chart .u-wrap { width: 100%; height: 100%; font-family: var(--font-mono); }
.online-card__chart .u-over { cursor: crosshair; }
.online-card__chart .u-cursor-x { border-right: 1px dashed var(--text-dim); }
.online-card__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-faint);
  font-size: 12px;
  font-style: italic;
}
.online-card__note {
  margin: 8px 0 0;
  padding: 0 18px;
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}
@media (max-width: 560px) {
  .online-card__chart { height: 120px; }
  .probe-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 10px;
  }
  .probe-row .probe-name   { grid-column: 1; grid-row: 1; }
  .probe-row .probe-status { grid-column: 2; grid-row: 1; }
  .probe-row .probe-err    { grid-column: 1; grid-row: 2; white-space: normal; word-break: break-all; }
  .probe-row .probe-lat    { grid-column: 2; grid-row: 2; }
}

/* --- Incidents (unresolved + past) --------------------------------------- */
.inc-section { margin-bottom: 44px; }
.inc-section--unresolved {
  margin-bottom: 30px;
  padding: 14px 18px 16px;
  border: 1px solid var(--down-line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--down-soft) 85%, transparent), var(--surface) 80%);
  box-shadow: var(--shadow-sm);
}
.inc-section--unresolved .section-head { margin-bottom: 10px; padding: 0; }
.inc-section--unresolved .section-head h2 {
  color: var(--down);
}
.inc-section--unresolved .section-head__hint { color: var(--down); }

.inc-list { display: flex; flex-direction: column; gap: 10px; }

.inc-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--none);
  border-radius: var(--radius-sm);
}
.inc-card--down { border-left-color: var(--down); }
.inc-card--degraded { border-left-color: var(--degraded); }

.inc-card__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--none);
  color: #fff;
  margin-top: 1px;
}
.inc-card__icon svg { width: 12px; height: 12px; display: block; }
.inc-card--down .inc-card__icon { background: var(--down); }
.inc-card--degraded .inc-card__icon { background: var(--degraded); }

.inc-card__body { flex: 1; min-width: 0; }
.inc-card__title {
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.inc-card__title .inc-title__sev { color: var(--text); font-weight: 600; }
.inc-card__meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-dim);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
}
.inc-card__meta .sep { color: var(--text-faint); }
.inc-card__meta .mono { font-family: var(--font-mono); font-size: 11.5px; }

/* Past incidents - grouped by day */
.inc-days { display: flex; flex-direction: column; gap: 22px; }
.inc-day {
  border-bottom: 1px solid var(--border);
  padding-bottom: 18px;
}
.inc-day:last-child { border-bottom: none; padding-bottom: 0; }
.inc-day__date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  margin-bottom: 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.inc-day__date .inc-day__rel {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}
.inc-day__none {
  font-size: 13px;
  color: var(--text-faint);
  font-style: italic;
  padding: 2px 0;
}
.inc-day__list { display: flex; flex-direction: column; }
.inc-day__collapsed {
  display: none;
  font-size: 13px;
  color: var(--text-faint);
  font-style: italic;
  padding: 4px 0;
  cursor: pointer;
  user-select: none;
}
.inc-day__collapsed:hover { color: var(--text); }
.inc-day__collapsed:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 2px;
  border-radius: 3px;
}
.inc-day__entry[data-kind="guest"] {
  max-height: 160px;
  overflow: hidden;
  /* Single coherent motion — every property shares the same duration/easing. */
  transition:
    max-height 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    margin-top 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    padding-top 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    padding-bottom 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-top-width 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.inc-day:not(.show-guest) .inc-day__entry[data-kind="guest"] {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
}
.inc-day.has-guest .inc-day__collapsed {
  display: block;
}
.inc-day__entry {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  font-size: 13px;
  color: var(--text);
}
.inc-day__entry + .inc-day__entry { margin-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent); }
.inc-day__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  justify-self: center;
  transform: translateY(1px);
}
.inc-day__dot.status-down { background: var(--down); }
.inc-day__dot.status-degraded { background: var(--degraded); }
.inc-day__entry .label {
  min-width: 0;
}
.inc-day__entry .label .sev { font-weight: 600; }
.inc-day__entry .label .sev--down { color: var(--down); }
.inc-day__entry .label .sev--degraded { color: var(--degraded); }
.inc-day__entry .label .comp { color: var(--text); }
.inc-day__entry .label .desc {
  display: block;
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 2px;
}
.inc-day__entry .metric {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .inc-day__entry { grid-template-columns: 18px 1fr; }
  .inc-day__entry .metric { grid-column: 2; color: var(--text-dim); }
}

/* --- Subscribe modal ----------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 19, 16, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fadeIn 0.18s ease-out;
}
@media (prefers-color-scheme: dark) {
  .modal__backdrop { background: rgba(0, 0, 0, 0.6); }
}
.modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 24px 80px -20px rgba(26,24,20,0.25), 0 4px 12px -4px rgba(26,24,20,0.1);
  padding: 22px 24px 24px;
  animation: modalIn 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}
.modal__head h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.modal__close {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
  transition: color 0.15s ease, background 0.15s ease;
}
.modal__close svg { width: 14px; height: 14px; }
.modal__close:hover { color: var(--text); background: var(--surface-2); }
.modal__intro {
  margin: 0 0 18px;
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.55;
}
.modal__foot {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.55;
}

.sub-option + .sub-option { margin-top: 12px; }
.sub-option {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--surface-sunk);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sub-option:hover { border-color: var(--border-strong); }
.sub-option__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sub-option__icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--brand-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sub-option__icon svg { width: 15px; height: 15px; }
.sub-option__text { flex: 1; min-width: 0; }
.sub-option__title { font-weight: 500; font-size: 13.5px; color: var(--text); }
.sub-option__desc { margin-top: 3px; font-size: 12px; color: var(--text-dim); line-height: 1.55; }
.sub-option__action {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.sub-url {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.sub-url:focus { outline: 2px solid color-mix(in srgb, var(--brand) 60%, transparent); outline-offset: 1px; border-color: var(--brand); }
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--surface);
  background: var(--text);
  border: 1px solid var(--text);
  min-height: 32px;
  padding: 4px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.copy-btn:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; text-decoration: none; }
.copy-btn.copied { background: var(--ok); border-color: var(--ok); color: #fff; }
/* Telegram row: button sits inline with the icon + text, vertically centered. */
.sub-option__row--inline { align-items: center; }
.sub-option__row--inline .copy-btn { flex-shrink: 0; }

/* --- Footer link --------------------------------------------------------- */
.ftr__link {
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--text-dim) 45%, transparent);
}
.ftr__link:hover { color: var(--brand-ink); border-bottom-color: var(--brand); text-decoration: none; }

/* --- Tooltip -------------------------------------------------------------- */
.tooltip {
  position: fixed;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  pointer-events: none;
  z-index: 50;
  box-shadow:
    0 1px 2px rgba(20, 18, 16, 0.04),
    0 12px 28px -12px rgba(20, 18, 16, 0.18);
  max-width: 280px;
}

/* Rich layout for strip-cell day tooltip. */
.tooltip__day-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.tooltip__day-date {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text);
}
.tooltip__day-rel {
  font-size: 11px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.tooltip__day-divider {
  height: 1px;
  background: var(--border);
  margin: 7px -2px 7px;
}
.tooltip__day-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  white-space: nowrap;
}
.tooltip__day-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
}
.tooltip__day-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tooltip__day-status-dot.status-ok       { background: var(--ok); }
.tooltip__day-status-dot.status-degraded { background: var(--degraded); }
.tooltip__day-status-dot.status-down     { background: var(--down); }
.tooltip__day-status-dot.status-none     { background: var(--none); border: 1px solid var(--border-strong); }
.tooltip__day-uptime {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  color: var(--text);
}
.tooltip__day-counts {
  margin-top: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 11px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.tooltip__day-counts .sep { color: var(--text-faint); }
.tooltip__day-counts .down    { color: var(--down); font-weight: 500; }
.tooltip__day-counts .degrade { color: var(--degraded); font-weight: 500; }
.tooltip__day-empty {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
}

/* --- Stable-DOM transitions ----------------------------------------------- */
/* The frontend now diff-patches in place rather than rebuilding DOM, so CSS
   transitions persist across data refreshes and play whenever a status
   color, badge, or pill actually changes. Kept conservative on purpose. */

.strip-cell {
  transition: background 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.banner__icon {
  transition: background 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.banner__title, .banner__sub {
  transition: color 190ms ease;
}
.status-dot {
  transition: background 190ms ease;
}
.inc-card {
  transition: border-left-color 190ms ease, background 190ms ease;
}
.inc-day__dot {
  transition: background 190ms ease;
}
.guest-badge {
  transition: background 190ms ease;
}
.probe-card .pill {
  transition: background 190ms ease, color 190ms ease, border-color 190ms ease;
}

/* Shared fade-in keyframe used by several entry animations across the page. */
@keyframes chart-fade-in {
  to { opacity: 1; }
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}