/* Host-site shell for the standalone Snowflake monitor pages. */
body.monitor-page {
  margin: 0;
  padding: 0;
  color: var(--fg);
  background: var(--bg-primary);
  display: flex;
  min-height: 100vh;
}

body.monitor-page > .wrap {
  width: 100%;
  padding: 2.5rem 1.25rem 5rem;
  flex: 1 0 auto;
}

body.monitor-page .site-header {
  flex: 0 0 64px;
  font-family: "BIZ UDPGothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.8;
}

body.monitor-page .site-header a {
  text-decoration: none;
}

body.monitor-page .header-nav a[aria-current="page"] {
  color: var(--accent);
}

body.monitor-page .site-footer {
  width: 100%;
  flex: 0 0 auto;
  font-family: "BIZ UDPGothic", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
  line-height: 1.8;
}

html[data-theme="light"] {
  --bg: #f6f7f9;
  --card: #fff;
  --fg: #16181d;
  --muted: #666e7a;
  --line: #e3e6ea;
  --accent: #3ea8ff;
  --accent-dark: #11567f;
  --code-bg: #f2f4f7;
}

html[data-theme="dark"] {
  --bg: #1a1b26;
  --card: #24283b;
  --fg: #c0caf5;
  --muted: #9aa5ce;
  --line: #3b4261;
  --accent: #7aa2f7;
  --accent-dark: #89b4fa;
  --code-bg: #343a52;
}

body.monitor-page .monitor-category {
  --category-bg: #edf2f7;
  --category-border: #cbd5e1;
  --category-fg: #475569;
  --category-dot: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.16rem 0.55rem;
  border: 1px solid var(--category-border);
  border-radius: 999px;
  color: var(--category-fg);
  background: var(--category-bg);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

body.monitor-page .monitor-category::before {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--category-dot);
  content: "";
  flex: 0 0 auto;
}

body.monitor-page .monitor-category--user-guide {
  --category-bg: #e0f2fe;
  --category-border: #7dd3fc;
  --category-fg: #075985;
  --category-dot: #0284c7;
}

body.monitor-page .monitor-category--release-notes {
  --category-bg: #ede9fe;
  --category-border: #c4b5fd;
  --category-fg: #6d28d9;
  --category-dot: #7c3aed;
}

body.monitor-page .monitor-category--sql-reference {
  --category-bg: #ffe4e6;
  --category-border: #fda4af;
  --category-fg: #9f1239;
  --category-dot: #e11d48;
}

body.monitor-page .monitor-category--developer-guide {
  --category-bg: #d1fae5;
  --category-border: #6ee7b7;
  --category-fg: #047857;
  --category-dot: #059669;
}

body.monitor-page .monitor-category--migrations {
  --category-bg: #fef3c7;
  --category-border: #fcd34d;
  --category-fg: #92400e;
  --category-dot: #d97706;
}

body.monitor-page .monitor-category--data-integration {
  --category-bg: #ccfbf1;
  --category-border: #5eead4;
  --category-fg: #0f766e;
  --category-dot: #0d9488;
}

body.monitor-page .monitor-category--cortex {
  --category-bg: #fae8ff;
  --category-border: #e879f9;
  --category-fg: #86198f;
  --category-dot: #c026d3;
}

html[data-theme="dark"] body.monitor-page .monitor-category--user-guide {
  --category-bg: #082f49;
  --category-border: #0369a1;
  --category-fg: #bae6fd;
  --category-dot: #38bdf8;
}

html[data-theme="dark"] body.monitor-page .monitor-category--release-notes {
  --category-bg: #2e1065;
  --category-border: #6d28d9;
  --category-fg: #ddd6fe;
  --category-dot: #a78bfa;
}

html[data-theme="dark"] body.monitor-page .monitor-category--sql-reference {
  --category-bg: #4c0519;
  --category-border: #be123c;
  --category-fg: #fecdd3;
  --category-dot: #fb7185;
}

html[data-theme="dark"] body.monitor-page .monitor-category--developer-guide {
  --category-bg: #022c22;
  --category-border: #047857;
  --category-fg: #a7f3d0;
  --category-dot: #34d399;
}

html[data-theme="dark"] body.monitor-page .monitor-category--migrations {
  --category-bg: #451a03;
  --category-border: #b45309;
  --category-fg: #fde68a;
  --category-dot: #fbbf24;
}

html[data-theme="dark"] body.monitor-page .monitor-category--data-integration {
  --category-bg: #042f2e;
  --category-border: #0f766e;
  --category-fg: #99f6e4;
  --category-dot: #2dd4bf;
}

html[data-theme="dark"] body.monitor-page .monitor-category--cortex {
  --category-bg: #4a044e;
  --category-border: #a21caf;
  --category-fg: #f5d0fe;
  --category-dot: #e879f9;
}

@media (max-width: 768px) {
  body.monitor-page > .wrap {
    padding: 1.5rem 0.9rem 3rem;
  }
}

@media (max-width: 560px) {
  body.monitor-page .day {
    display: block;
  }

  body.monitor-page .day .date {
    padding: 0 0 0.45rem;
  }
}