:root {
  --bg: #f4f6f8;
  --panel: #fff;
  --text: #1a1d21;
  --muted: #5c6570;
  --border: #dde3ea;
  --accent: #017cee;
  --present: #1e8e3e;
  --present-hover: #137333;
  --missing-partition: #d93025;
  --missing-partition-hover: #b3261e;
  --out-of-range: #eef1f4;
  --error: #c5221f;
  --sidebar-w: 320px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 9px 18px;
  background: #050508;
  border-radius: 8px;
  text-decoration: none;
  line-height: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.brand:hover {
  background: #0a0a10;
}
.brand-mark {
  display: block;
  height: 42px;
  width: auto;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.site-nav a {
  padding: 6px 10px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}
.site-nav a:hover { background: var(--bg); color: var(--text); }
.site-nav a.active { background: #e8f0fe; color: var(--accent); font-weight: 500; }
.user-menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}
.avatar { width: 28px; height: 28px; border-radius: 50%; }
.user-email { color: var(--muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  margin-left: auto;
}
.user-menu .lang-switch { margin-left: 0; }
.lang-link {
  color: var(--muted);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
}
.lang-link:hover { color: var(--text); background: var(--bg); }
.lang-link.active { color: var(--accent); font-weight: 600; }
.lang-sep { color: var(--border); user-select: none; }
.login-lang-switch { justify-content: center; margin-bottom: 12px; }
.login-lang-switch.lang-switch { margin-left: 0; }

.site-body {
  display: flex;
  max-width: 1800px;
  margin: 0 auto;
  min-height: calc(100vh - 53px);
}
.page-sidebar,
.docs-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  padding: 20px 12px 24px 16px;
  border-right: 1px solid var(--border);
  background: var(--panel);
  position: sticky;
  top: 53px;
  align-self: flex-start;
  max-height: calc(100vh - 53px);
  overflow-y: auto;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-group-label {
  margin: 12px 0 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sidebar-card {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sidebar-card:hover {
  border-color: #c6dafc;
  box-shadow: 0 1px 4px rgba(1, 124, 238, 0.08);
}
.sidebar-card.active {
  border-color: var(--accent);
  background: #e8f0fe;
  box-shadow: 0 1px 4px rgba(1, 124, 238, 0.12);
}
.sidebar-card-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  font-family: ui-monospace, Menlo, monospace;
  line-height: 1.3;
}
.sidebar-card-desc {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}
.sidebar-card-desc code {
  font-size: 0.68rem;
}
.sidebar-card-nested {
  margin-left: 12px;
  border-style: dashed;
}
.expanded-events-note {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.field-group {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: lowercase;
  background: #f1f3f4;
  color: #5f6368;
}
.field-group-event_param { background: #e8f0fe; color: #1967d2; }
.field-group-user_property { background: #fce8e6; color: #c5221f; }
.field-group-arguments { background: #e6f4ea; color: #137333; }
.sidebar-toc {
  font-size: 0.78rem;
}
.sidebar-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-toc li {
  margin: 0;
}
.sidebar-toc a {
  display: block;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--muted);
  text-decoration: none;
}
.sidebar-toc a:hover {
  color: var(--accent);
  background: var(--bg);
}
.sidebar-toc ul ul a {
  padding-left: 16px;
  font-size: 0.74rem;
}
.doc-card-summary {
  margin: 4px 0 0;
  font-size: 0.85rem;
}
[id="data-pipeline"],
[id="partition-calendar"] {
  scroll-margin-top: 72px;
}

.site-main { flex: 1; padding: 24px; min-width: 0; }
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Page hierarchy */
.page-hero {
  margin: 0 0 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.page-hero h1 {
  margin: 0 0 10px;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.page-lead {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
  max-width: 42rem;
  line-height: 1.55;
}
.page-note {
  margin: 12px 0 0;
  font-size: 0.88rem;
}
.page-hero-panel .page-hero {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 28px;
}
.page-hero-compact {
  margin-bottom: 16px;
  padding-bottom: 16px;
}
.page-hero-compact h1 {
  font-size: 1.35rem;
  font-family: ui-monospace, Menlo, monospace;
}

.pipeline-role-banner {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.45;
  border: 1px solid var(--border);
}
.pipeline-role-banner strong {
  display: inline-block;
  margin-right: 6px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pipeline-role-upstream {
  background: #f0f7ff;
  border-color: #c6dafc;
  color: #174ea6;
}
.pipeline-role-upstream strong { color: #1967d2; }
.pipeline-role-downstream {
  background: #f3faf4;
  border-color: #c2e7cb;
  color: #137333;
}
.pipeline-role-downstream strong { color: #1e8e3e; }
.pipeline-role-dbxaix {
  background: #fef7e0;
  border-color: #f9e076;
  color: #7a5c00;
}
.pipeline-role-dbxaix strong { color: #b06000; }

.dbxaix-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 12px;
}
.dbxaix-search-label {
  font-size: 0.85rem;
}
.dbxaix-search-label input {
  margin-left: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  min-width: 200px;
}
.dbxaix-layer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dbxaix-layer-tab {
  padding: 4px 10px;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  cursor: pointer;
}
.dbxaix-layer-tab.active {
  background: #e8f0fe;
  border-color: var(--accent);
  color: var(--accent);
}
.dbxaix-table-wrap {
  max-height: 520px;
  overflow: auto;
}
.dbxaix-featured-card h4 code {
  font-size: 0.78rem;
  word-break: break-all;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.overview-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, #fafbfc 0%, var(--panel) 100%);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.overview-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(1, 124, 238, 0.1);
  transform: translateY(-1px);
}
.overview-card-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.overview-card-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}
.overview-card-desc {
  margin: 0;
  flex: 1;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
}
.overview-card-cta {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent);
}
.muted { color: var(--muted); }
.err { color: var(--error); }
.warn { color: #b06000; font-weight: 500; }

.btn, button.btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-block;
}
.btn:hover, button.btn:hover { filter: brightness(1.05); }
.btn.secondary, button.secondary {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn.small { padding: 5px 12px; font-size: 0.8rem; }

.error-banner {
  background: #fce8e6;
  color: var(--error);
  padding: 12px 14px;
  border-radius: 6px;
  margin: 12px 0;
  font-size: 0.9rem;
}

.sample-query-blocked {
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid #b9d9f8;
  border-radius: 8px;
  color: #17466f;
  background: #eff7ff;
}
.sample-query-blocked p { margin: 4px 0 0; }

/* Login — dark theme */
.login-page {
  --login-bg: #050508;
  --login-card: #12141a;
  --login-border: #2a2e38;
  --login-text: #f4f6f8;
  --login-muted: #9aa3b0;
  --login-accent: #e63946;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(230, 57, 70, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(1, 124, 238, 0.1), transparent 50%),
    var(--login-bg);
  color: var(--login-text);
}
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  background: var(--login-card);
  border: 1px solid var(--login-border);
  border-radius: 14px;
  padding: 32px 36px 36px;
  max-width: 440px;
  width: 100%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 24px 48px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
}
.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    #e63946 0%,
    #f4a261 18%,
    #2a9d8f 38%,
    #017cee 62%,
    #7b2cbf 82%,
    #e63946 100%
  );
}
.login-page .muted { color: var(--login-muted); }
.login-page .lang-link { color: var(--login-muted); }
.login-page .lang-link:hover { color: var(--login-text); background: rgba(255, 255, 255, 0.06); }
.login-page .lang-link.active { color: var(--login-text); }
.login-page .lang-sep { color: var(--login-border); }
.login-lang-switch { justify-content: center; margin-bottom: 20px; }
.login-lang-switch.lang-switch { margin-left: 0; }
.login-brand {
  text-align: center;
  margin-bottom: 8px;
}
.login-logo {
  display: block;
  width: min(100%, 280px);
  height: auto;
  margin: 0 auto 16px;
}
.login-tagline {
  margin: 0 0 4px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.login-error {
  background: rgba(197, 34, 31, 0.15);
  border: 1px solid rgba(229, 57, 53, 0.35);
  color: #ff8a80;
}
.login-error code {
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.85em;
}
.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  margin-top: 20px;
  background: #1e2128;
  border: 1px solid #3c4454;
  border-radius: 8px;
  color: var(--login-text);
  font-weight: 500;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.btn-google:hover {
  background: #282c36;
  border-color: #5c6570;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}
button.btn-google { width: 100%; cursor: pointer; font: inherit; }
.login-popup-hint { margin-top: 12px; font-size: 0.8rem; text-align: center; }
.login-gcp-setup {
  margin-top: 24px;
  font-size: 0.8rem;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.login-gcp-setup summary { cursor: pointer; font-weight: 600; color: var(--text-muted); }
.login-gcp-steps { margin: 10px 0 0; padding-left: 1.2rem; }
.login-gcp-steps li { margin-bottom: 8px; }
.login-gcp-steps code { font-size: 0.72rem; word-break: break-all; }

/* Docs */
.doc-list { list-style: none; padding: 0; margin: 16px 0 0; }
.doc-list li { padding: 12px 0; border-bottom: 1px solid var(--border); }
.doc-list a { font-weight: 500; color: var(--accent); text-decoration: none; }
.doc-list .filename { margin-left: 8px; font-size: 0.8rem; }

.prose h1 { margin-top: 0; font-size: 1.5rem; }
.prose h2 { margin-top: 2rem; padding-top: 8px; border-top: 1px solid var(--border); font-size: 1.2rem; }
.prose h3 { font-size: 1rem; }
.prose pre {
  background: #f6f8fa;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
  font-size: 0.82rem;
}
.prose code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.88em;
}
.prose :not(pre) > code {
  background: #f0f3f6;
  padding: 2px 6px;
  border-radius: 3px;
}
.prose table { border-collapse: collapse; width: 100%; font-size: 0.88rem; margin: 12px 0; }
.prose th, .prose td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.prose th { background: #f6f8fa; }
.prose a { color: var(--accent); }

/* Partitions & doc sections */
.display-section {
  margin-bottom: 36px;
  padding-top: 8px;
}
.display-section + .display-section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.display-section-calendar {
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.section-heading {
  margin: 0 0 10px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
}
.section-lead {
  margin: 0 0 22px;
  font-size: 0.92rem;
  max-width: 52rem;
  line-height: 1.5;
}
.pipeline-footnote {
  margin: 16px 0 0;
  font-size: 0.82rem;
}
.pipeline-diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px 4px;
  padding: 20px 16px;
  background: linear-gradient(180deg, #f8fafc 0%, #f4f6f8 100%);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
}
.pipeline-step {
  flex: 1 1 140px;
  min-width: 130px;
  display: flex;
}
.pipeline-node {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  font-size: 0.82rem;
  line-height: 1.4;
}
.pipeline-node-source {
  border-color: #c2e7cb;
  background: #f6fbf7;
}
.pipeline-node-sink {
  border-color: #c6dafc;
  background: #f5f9ff;
}
.pipeline-icon {
  display: block;
  line-height: 0;
  margin-bottom: 2px;
}
.pipeline-icon img {
  width: 40px;
  height: 40px;
  display: block;
}
.pipeline-node strong {
  font-size: 0.88rem;
  color: var(--text);
}
.pipeline-code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  background: #eef1f4;
  padding: 2px 6px;
  border-radius: 3px;
  word-break: break-all;
}
.pipeline-detail {
  color: var(--muted);
  font-size: 0.75rem;
}
.pipeline-detail code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  background: transparent;
  padding: 0;
}
.pipeline-arrow {
  flex: 0 0 auto;
  align-self: center;
  color: var(--muted);
  font-size: 1.25rem;
  font-weight: 300;
  padding: 0 2px;
  user-select: none;
}

.pipeline-lane-realtime {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

/* GCP cloud architecture diagram */
.cloud-arch {
  border: 1px solid #d0d7de;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  margin-bottom: 24px;
}
.cloud-arch-band {
  padding: 10px 16px;
  background: linear-gradient(90deg, #0e2741 0%, #1a3a5c 100%);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cloud-arch-scroll {
  overflow-x: auto;
  background:
    linear-gradient(90deg, rgba(66, 133, 244, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(66, 133, 244, 0.04) 1px, transparent 1px),
    #fbfcfe;
  background-size: 24px 24px;
}
.cloud-arch-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-width: min(100%, 980px);
  padding: 28px 20px;
  gap: 0;
}
.cloud-arch-node {
  flex: 0 0 132px;
}
.cloud-arch-node-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 132px;
  padding: 14px 10px 12px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12), 0 1px 3px rgba(60, 64, 67, 0.08);
  text-align: center;
}
.cloud-arch-node--client .cloud-arch-node-card {
  border-color: #c2e7cb;
  background: linear-gradient(180deg, #f6fbf7 0%, #fff 100%);
}
.cloud-arch-node--powerbi .cloud-arch-node-card,
.cloud-arch-node--vendor .cloud-arch-node-card {
  border-color: #f6d365;
  background: linear-gradient(180deg, #fffdf5 0%, #fff 100%);
}
.cloud-arch-icon {
  width: 40px;
  height: 40px;
  display: block;
}
.cloud-arch-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  align-items: center;
}
.cloud-arch-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e8f0fe;
  border: 1px solid #c6dafc;
  color: #174ea6;
  font-size: 0.72rem;
  font-weight: 600;
}
.cloud-arch-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.cloud-arch-detail {
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.35;
  word-break: break-word;
}
.cloud-arch-detail code {
  font-size: 0.62rem;
  background: #f1f3f4;
  padding: 2px 4px;
  border-radius: 3px;
  display: block;
}
.cloud-arch-edge {
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5f6368;
}
.cloud-arch-edge-svg {
  width: 36px;
  height: 24px;
  display: block;
}

.cloud-route-section {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px dashed #d0d7de;
}
.cloud-route-section-title {
  margin: 0 0 6px;
  font-size: 1rem;
}
.cloud-route-section-lead {
  margin: 0 0 12px;
  font-size: 0.85rem;
}
.environment-policy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid #c6dafc;
  border-radius: 10px;
  background: #f5f9ff;
}
.environment-policy-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.82rem;
}
.environment-policy-copy strong {
  color: #174ea6;
}
.environment-policy-copy span {
  color: var(--muted);
}
.environment-policy-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.environment-policy-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  flex-wrap: wrap;
  white-space: normal;
}
.environment-pause-notice {
  margin: 20px 0;
  padding: 18px 22px;
  border: 1px solid #e4b95f;
  border-left: 4px solid #a66300;
  border-radius: 8px;
  background: #fffaf0;
  color: #604000;
  font-size: 0.85rem;
}
.environment-pause-notice h2 {
  margin: 0 0 8px;
  font-size: 1rem;
}
.environment-pause-notice p {
  margin: 8px 0;
}
.environment-pause-notice ul {
  padding-left: 20px;
  margin: 10px 0;
}
.environment-pause-notice li + li {
  margin-top: 5px;
}
.environment-pause-caution {
  font-size: 0.78rem;
}
.environment-policy-badge--paused,
.cloud-route-env.cloud-route-env--paused {
  color: #783f04;
  background: #fce8d5;
}
.cloud-route-pause-note {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 8px 12px;
  border-left: 3px solid #a66300;
  background: #fffaf0;
  color: #604000;
  font-size: 0.72rem;
}
.environment-policy-badge--active {
  color: #137333;
  background: #e6f4ea;
}
.environment-policy-badge--reserved {
  color: #7a4d00;
  background: #fef7e0;
}
.environment-policy-badge--not-migrating {
  color: #5f6368;
  background: #eef1f4;
}
.naming-patterns {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
}
.naming-patterns > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  background: #fff;
}
.naming-patterns span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.naming-patterns code {
  padding: 0;
  background: transparent;
  font-size: 0.68rem;
  word-break: break-word;
}
.cloud-route-lane {
  margin-bottom: 18px;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.cloud-route-lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #f6f8fa;
  border-bottom: 1px solid #e1e4e8;
}
.cloud-route-game {
  font-weight: 600;
  font-size: 0.92rem;
}
.cloud-route-source {
  margin-left: 8px;
  color: var(--muted);
  font-size: 0.68rem;
}
.cloud-route-count {
  font-size: 0.75rem;
  color: var(--muted);
}
.cloud-route-grid-wrap {
  overflow-x: auto;
}
.cloud-route-grid {
  display: grid;
  grid-template-columns:
    88px
    minmax(250px, 1.4fr) 16px
    minmax(148px, 1fr) 16px
    minmax(134px, 0.9fr) 16px
    minmax(152px, 1fr) 16px
    minmax(132px, 0.9fr) 16px
    minmax(132px, 0.9fr);
  column-gap: 6px;
  row-gap: 10px;
  align-items: stretch;
  padding: 12px 14px;
  min-width: 1360px;
}
.cloud-route-grid-head {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  align-self: end;
  padding-bottom: 2px;
}
.cloud-route-grid-head.cloud-route-grid-env,
.cloud-route-grid-head.cloud-route-grid-arrow {
  padding: 0;
}
.cloud-route-env {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #e8f0fe;
  color: #174ea6;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: lowercase;
  align-self: center;
}
.cloud-route-env small {
  font-size: 0.56rem;
  font-weight: 600;
  opacity: 0.8;
}
.cloud-route-env--active {
  color: #137333;
  background: #e6f4ea;
}
.cloud-route-env--reserved {
  color: #7a4d00;
  background: #fef7e0;
}
.cloud-route-chip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  height: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #dadce0;
  box-shadow: 0 1px 1px rgba(60, 64, 67, 0.08);
}
.cloud-route-chip-path {
  border-color: #c2e7cb;
  background: #f6fbf7;
}
.cloud-route-chip-dataset {
  border-color: #c6dafc;
  background: #f5f9ff;
}
.cloud-route-chip code {
  font-size: 0.68rem;
  word-break: break-all;
  background: transparent;
  padding: 0;
}
.cloud-route-chip small {
  color: var(--muted);
  font-size: 0.6rem;
  word-break: break-all;
}
.cloud-route-reserved {
  grid-column: 4 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px dashed #e4b95f;
  border-radius: 8px;
  color: #7a4d00;
  background: #fffaf0;
  font-size: 0.72rem;
}
.cloud-route-count--not-migrating {
  color: #5f6368;
  font-weight: 600;
}
.cloud-route-not-migrating {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  color: #4b5563;
  background: #f8f9fa;
  font-size: 0.8rem;
}
.cloud-route-not-migrating strong {
  color: #30343b;
}
.cloud-route-arrow {
  flex: 0 0 14px;
  width: 14px;
  height: 2px;
  align-self: center;
  justify-self: center;
  background: #9aa0a6;
  position: relative;
}
.cloud-route-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: #9aa0a6;
}

.ingestion-meta {
  margin: 8px 0 0;
  font-size: 0.85rem;
}
.table-scroll {
  overflow-x: auto;
  margin: 0 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}
.ingestion-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 720px;
}
.ingestion-table th,
.ingestion-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.ingestion-table thead th {
  background: #f6f8fa;
  font-weight: 600;
  white-space: nowrap;
}
.ingestion-table tbody tr:last-child th,
.ingestion-table tbody tr:last-child td {
  border-bottom: none;
}
.ingestion-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ingestion-total-row {
  background: #f8fafc;
}
.ingestion-total-row th,
.ingestion-total-row td {
  font-weight: 600;
}
.pipeline-lane {
  padding: 20px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fafbfc;
}
.pipeline-lane-batched {
  background: #f7f8fa;
}
.pipeline-lane-instructions {
  background: #fafbfc;
}
.ingestion-instructions h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}
.ingestion-instructions h3:first-child {
  margin-top: 0;
}
.ingestion-instructions > h4 {
  margin: 1rem 0 0.5rem;
  font-size: 0.9rem;
}
.ingestion-instructions ol,
.ingestion-instructions ul {
  margin: 0.5rem 0 1rem;
  padding-left: 1.4rem;
  line-height: 1.55;
}
.ingestion-instructions li + li {
  margin-top: 0.35rem;
}
.ingestion-stage-list strong {
  color: #202124;
}
.ingestion-technical-table {
  min-width: 720px;
}
.ingestion-prefix-table {
  min-width: 1320px;
}
.ingestion-prefix-table td:first-child,
.ingestion-prefix-table td:nth-child(2) {
  white-space: nowrap;
}
.ingestion-validation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0.75rem 0 1rem;
}
.ingestion-validation-grid section {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}
.ingestion-validation-grid h4 {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
}
.ingestion-validation-grid ul {
  margin-bottom: 0;
}
.technical-note,
.technical-callout {
  padding: 12px 14px;
  border-left: 3px solid #4285f4;
  border-radius: 0 6px 6px 0;
  background: #f3f7fe;
  line-height: 1.5;
}
.technical-note {
  margin: 0.75rem 0 1rem;
}
.technical-callout {
  margin: 1rem 0;
}
.technical-callout p {
  margin: 0.35rem 0 0;
}
.technical-callout pre {
  margin: 0.75rem 0;
}
.technical-gotchas {
  margin-top: 1rem !important;
}
@media (max-width: 760px) {
  .ingestion-validation-grid {
    grid-template-columns: 1fr;
  }
}
.cost-subsection-title {
  margin: 2rem 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
}
.cost-subsection-title:first-child,
.cost-baseline-block .cost-subsection-title {
  margin-top: 0;
}
.cost-subsection-lead,
.cost-formulas-lead {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  max-width: 52rem;
  line-height: 1.5;
}
.cost-formulas-title {
  margin: 1.75rem 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.cost-tier-label {
  font-size: 0.75rem;
  margin-top: 2px;
}
.ingestion-cost-table-baseline {
  min-width: 880px;
}
.ingestion-cost-table-baseline .cost-band-ingest {
  background: #e8f0fe;
}
.ingestion-cost-table-baseline .cost-band-process {
  background: #fef7e0;
}
.ingestion-cost-table-baseline .cost-header-band th {
  text-align: center;
  font-size: 0.78rem;
}
.ingestion-cost-formulas {
  min-width: 520px;
}
.ingestion-cost-formulas code {
  font-size: 0.8rem;
  white-space: normal;
  word-break: break-word;
}
.pipeline-diagram-wide {
  margin-bottom: 20px;
}
.pipeline-diagram-wide .pipeline-step {
  flex: 1 1 110px;
  min-width: 100px;
}
.resource-map-block {
  margin-top: 18px;
}
.resource-map-block + .resource-map-block {
  margin-top: 24px;
}
.resource-map-title {
  margin: 0 0 10px;
  font-size: 1rem;
}
.resource-map-table {
  min-width: 640px;
}
.resource-map-table code {
  font-size: 0.78rem;
}
.ingestion-game-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}
.ingestion-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef1f4;
  border: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 500;
}
.ingestion-empty {
  margin: 0;
  padding: 12px 0;
}

.page-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.page-toolbar h1 { margin: 0 0 6px; font-size: 1.2rem; }
.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 16px;
}
.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 4px;
  border: 1px solid rgba(0,0,0,.08);
}
.swatch.present { background: var(--present); }
.swatch.missing { background: var(--missing-partition); }
.swatch.out { background: var(--out-of-range); }

#partition-status.loading { opacity: 0.6; }
.dataset-group { margin-bottom: 32px; }
.dataset-title { margin: 0 0 4px; font-size: 1rem; }
.dataset-meta { font-size: 0.8rem; color: var(--muted); margin-bottom: 14px; }
.table-block {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.table-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; margin-bottom: 10px; }
.table-head h3 { margin: 0; font-family: ui-monospace, monospace; font-size: 0.95rem; }
.table-stats { font-size: 0.8rem; color: var(--muted); }
.months-row { display: flex; flex-wrap: wrap; gap: 20px; }
.month-label { font-size: 0.75rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; }
.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 12px);
  gap: 3px;
  margin-bottom: 3px;
  font-size: 0.55rem;
  color: var(--muted);
  text-align: center;
}
.days { display: grid; grid-template-columns: repeat(7, 12px); gap: 3px; }
.day { width: 12px; height: 12px; border-radius: 2px; cursor: default; }
.day.pad { visibility: hidden; }
.day.present { background: var(--present); }
.day.present:hover { background: var(--present-hover); transform: scale(1.15); }
.day.missing { background: var(--missing-partition); }
.day.missing:hover { background: var(--missing-partition-hover); transform: scale(1.15); }
.day.out { background: var(--out-of-range); }
.day.future { background: transparent; border: 1px solid var(--border); }

#tooltip {
  position: fixed;
  pointer-events: none;
  background: #202124;
  color: #fff;
  font-size: 0.75rem;
  padding: 6px 10px;
  border-radius: 4px;
  z-index: 300;
  display: none;
}

/* Schema references */
.schema-group { margin-top: 28px; }
.schema-group h2 { margin: 0 0 4px; font-size: 1rem; }
.schema-table-list { list-style: none; padding: 0; margin: 12px 0 0; }
.schema-table-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.schema-table-list a { font-weight: 600; color: var(--accent); text-decoration: none; font-family: ui-monospace, monospace; }
.schema-summary { margin: 6px 0 0; font-size: 0.85rem; color: var(--muted); }
.schema-extra-links { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); }
.schema-extra-links h2 { margin: 0 0 8px; font-size: 1rem; }
.breadcrumb { margin: 0 0 6px; font-size: 0.85rem; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.schema-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  font-size: 0.82rem;
}
.vendor-schema-note { margin-top: 10px; font-size: 0.82rem; }
.table-evolution-card {
  margin: 26px 0;
  padding: 18px;
  border: 1px solid #d8e3ed;
  border-radius: 10px;
  background: linear-gradient(145deg, #fbfdff, #f5f9fc);
}
.table-evolution-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.table-evolution-head h2 {
  margin: 3px 0 4px;
}
.table-evolution-head p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}
.table-evolution-status {
  margin-top: 13px;
  padding: 9px 11px;
  border-radius: 6px;
  color: #576b7e;
  background: #edf3f7;
  font-size: 0.76rem;
}
.table-evolution-status.active {
  color: #155b8b;
  background: #e6f4fd;
}
.table-evolution-status.changed {
  color: #8a5b0c;
  background: #fff5dd;
}
.table-evolution-status.error {
  color: #a33127;
  background: #ffebe8;
}
.table-evolution-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.table-evolution-summary > div {
  padding: 10px 11px;
  border: 1px solid #e0e8ef;
  border-radius: 6px;
  background: #fff;
}
.table-evolution-summary span,
.table-evolution-summary strong {
  display: block;
}
.table-evolution-summary span {
  color: #718090;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.table-evolution-summary strong {
  overflow: hidden;
  margin-top: 4px;
  color: #253a50;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-evolution-timeline {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.table-evolution-timeline li {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-left: 3px solid #6baee0;
  border-radius: 0 5px 5px 0;
  color: #596b7c;
  background: #fff;
  font-size: 0.7rem;
}
.table-evolution-timeline li.breaking { border-left-color: #d1554b; }
.table-evolution-timeline li.compatible { border-left-color: #2f9d6a; }
.table-evolution-timeline time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #748392;
}
.table-evolution-timeline strong { color: #31475d; }
.table-evolution-fields {
  display: flex;
  grid-column: 2 / -1;
  flex-wrap: wrap;
  gap: 4px;
}
.table-evolution-fields code {
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.64rem;
}
.table-evolution-fields code.added {
  color: #176b48;
  background: #e6f7ef;
}
.table-evolution-fields code.removed {
  color: #a53d34;
  background: #ffebe8;
}
.table-evolution-fields code.modified {
  color: #8a5b0c;
  background: #fff5dd;
}
.sidebar-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 600;
}
.sidebar-label-spaced { margin-top: 18px; }
.sample-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 10px 0 14px;
  font-size: 0.85rem;
}
.sample-toolbar input[type="date"] {
  margin-left: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
@media (max-width: 700px) {
  .table-evolution-head {
    flex-direction: column;
  }
  .table-evolution-summary {
    grid-template-columns: 1fr 1fr;
  }
  .table-evolution-timeline li {
    grid-template-columns: 1fr;
  }
  .table-evolution-fields {
    grid-column: auto;
  }
}
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 24px;
}
.table-scroll.wide { max-height: 520px; overflow-y: auto; }
.data-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.78rem;
}
.data-table th, .data-table td {
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-table th {
  position: sticky;
  top: 0;
  background: #f6f8fa;
  z-index: 1;
}
.data-table tbody tr:hover { background: #fafbfc; }
.data-table td.cell-masked {
  color: var(--muted);
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
}
.pii-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b3261e;
  background: #fce8e6;
  border-radius: 4px;
  vertical-align: middle;
}
.data-table tr.pii-row td:first-child code {
  color: #b3261e;
}
.page-subtitle { margin: 0; font-size: 0.9rem; }

/* Metrics ETL / lineage */
.lineage-diagram-wrap {
  margin: 16px 0 24px;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
}
.lineage-layout {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.lineage-layer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.lineage-layer-tab {
  padding: 4px 10px;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  cursor: pointer;
}
.lineage-layer-tab.active {
  background: #e8f0fe;
  border-color: var(--accent);
  color: var(--accent);
}
.lineage-node-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
}
.lineage-node-card {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  width: 100%;
}
.lineage-node-card:hover,
.lineage-node-card.active {
  border-color: var(--accent);
  background: #e8f0fe;
}
.lineage-node-name {
  display: block;
  font-weight: 600;
  font-size: 0.82rem;
  font-family: ui-monospace, Menlo, monospace;
}
.lineage-node-loc {
  display: block;
  font-size: 0.72rem;
  margin-top: 4px;
  word-break: break-all;
}
.lineage-node-flag {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  font-size: 0.68rem;
  border-radius: 4px;
  background: #fef7e0;
  color: #b06000;
}
.lineage-node-flag.inline { margin: 8px 0; }
.lineage-detail-panel {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  min-height: 200px;
}
.lineage-detail-panel h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-family: ui-monospace, Menlo, monospace;
}
.lineage-dl {
  margin: 12px 0 0;
  font-size: 0.8rem;
}
.lineage-dl dt {
  font-weight: 600;
  color: var(--muted);
  margin-top: 8px;
}
.lineage-dl dd {
  margin: 2px 0 0;
}
.subsection-heading {
  margin: 28px 0 10px;
  font-size: 1.02rem;
  font-weight: 600;
}
.lineage-table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 12px 0 20px;
}
.lineage-table-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.lineage-table-card h4 {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-family: ui-monospace, Menlo, monospace;
}
.dag-steps {
  margin: 8px 0 16px;
  padding-left: 1.2rem;
  font-size: 0.85rem;
}
.dag-steps li { margin-bottom: 6px; }
.panel-inset {
  padding: 16px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 24px;
}
.panel-inset h3 { margin: 0 0 10px; font-size: 0.95rem; }
.panel-inset ul { margin: 0; padding-left: 1.2rem; font-size: 0.85rem; }
.semantic-domain { margin-bottom: 32px; scroll-margin-top: 72px; }
.metric-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.metric-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}
.metric-card h4 {
  margin: 0 0 8px;
  font-size: 0.85rem;
}
.metric-card p {
  margin: 0 0 10px;
  font-size: 0.82rem;
}
.metric-dl {
  margin: 0;
  font-size: 0.78rem;
}
.metric-dl dt {
  font-weight: 600;
  color: var(--muted);
  margin-top: 6px;
}
.metric-dl dd {
  margin: 2px 0 0;
  word-break: break-word;
}
.metric-dl code {
  font-size: 0.72rem;
}

.compact-list {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.85rem;
}
.compact-list li { margin-bottom: 4px; }
.layer-block { margin-bottom: 28px; scroll-margin-top: 72px; }
.staging-columns {
  font-size: 0.78rem;
  line-height: 1.6;
  word-break: break-word;
}
.metric-calc-table-wrap {
  overflow-x: auto;
  margin-top: 12px;
}
.metric-calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.metric-calc-table th,
.metric-calc-table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.metric-calc-table th {
  background: #f8fafc;
  font-weight: 600;
}
.metric-calc-table code { font-size: 0.78rem; }

@media (max-width: 900px) {
  .lineage-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .site-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .user-menu {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 800px) {
  .site-body { flex-direction: column; }
  .panel { padding: 20px 18px; }
  .page-hero h1 { font-size: 1.45rem; }
  .brand-mark { height: 36px; }
  .brand { padding: 8px 15px; }
  .page-sidebar,
  .docs-sidebar {
    width: 100%;
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .pipeline-diagram {
    flex-direction: column;
    align-items: stretch;
  }
  .pipeline-arrow {
    align-self: center;
    transform: rotate(90deg);
    padding: 4px 0;
  }
  .pipeline-step {
    min-width: 0;
  }
  .cloud-route-grid {
    min-width: 1120px;
    grid-template-columns:
      72px
      minmax(200px, 1.25fr) 12px
      minmax(120px, 1fr) 12px
      minmax(112px, 0.85fr) 12px
      minmax(128px, 0.9fr) 12px
      minmax(108px, 0.9fr) 12px
      minmax(108px, 0.9fr);
  }
  .environment-policy {
    align-items: flex-start;
    flex-direction: column;
  }
  .environment-policy-badges {
    justify-content: flex-start;
  }
  .naming-patterns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Access List Page */
.access-list-page {
  --access-ink: #1f2d3d;
  --access-muted: #667586;
  --access-border: #dce4ec;
  --access-surface: #f7f9fb;
  --access-accent: #176fac;
  --access-accent-soft: #eaf4fb;
}
.access-panel {
  overflow: hidden;
}
.access-hero {
  margin-bottom: 24px;
}
.access-list-page .access-hero h1 {
  color: var(--access-ink);
}
.access-list-page .page-lead {
  color: var(--access-muted);
}
.access-section {
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--access-border);
  border-radius: 10px;
  background: #fff;
}
.access-list-page .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--access-border);
  background: var(--access-surface);
}
.access-list-page .section-header h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  border-bottom: none;
  padding-bottom: 0;
  color: var(--access-ink);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.access-list-page #refresh-iam {
  display: inline-flex;
  min-height: 32px;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  border-color: #cbd7e2;
  color: #40566d;
  background: #fff;
  font-family: inherit;
  font-weight: 600;
}
.access-list-page #refresh-iam:hover {
  border-color: #aac9df;
  color: var(--access-accent);
  background: #fafdff;
}
.access-list-page #refresh-iam:disabled {
  cursor: wait;
  opacity: 0.65;
}
.refresh-icon {
  font-size: 1rem;
  line-height: 1;
}
.access-badge,
.role-badge,
.perm-tag,
.domain-list li {
  font-family: inherit;
}
.access-badge {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.access-badge-live {
  border-color: #bfdcf0;
  color: var(--access-accent);
  background: var(--access-accent-soft);
}
.access-badge-secondary {
  border-color: #d6dee6;
  color: #5d6c7c;
  background: #f1f4f7;
}
.access-badge-enabled {
  border-color: #bfe1cd;
  color: #17683f;
  background: #eaf7ef;
}
.access-badge-disabled {
  border-color: #efc8c4;
  color: #a33a32;
  background: #fcecea;
}
.domain-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 18px;
}
.domain-list li {
  padding: 5px 10px;
  border: 1px solid #d4dee8;
  border-radius: 6px;
  color: #43576b;
  background: #f3f6f8;
  font-size: 0.76rem;
}
.domain-list code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
.access-table-wrap {
  overflow-x: auto;
}
.access-table {
  width: 100%;
  border-collapse: collapse;
  color: #405165;
  font-size: 0.8rem;
}
.access-table th,
.access-table td {
  padding: 12px 18px;
  border-bottom: 1px solid #e7edf2;
  text-align: left;
  vertical-align: top;
}
.access-table tr:last-child td {
  border-bottom: 0;
}
.access-table th {
  color: #6c7988;
  background: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.access-table tbody tr:hover {
  background: #fafcfd;
}
.account-email {
  color: var(--access-ink);
  font-weight: 600;
  white-space: nowrap;
}
.domain-code {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid #dbe4ec;
  border-radius: 5px;
  color: #4f6275;
  background: #f4f7f9;
  font-size: 0.72rem;
  white-space: nowrap;
}
.access-list-page .warning-banner,
.access-list-page .error-banner {
  border-radius: 8px;
  padding: 13px 16px;
  font-size: 0.8rem;
  line-height: 1.5;
}
.access-list-page .warning-banner {
  background: #fff8e1;
  border: 1px solid #eed990;
  color: #70540d;
  margin: 20px 0 0;
}
.access-list-page .empty-state {
  margin: 0;
  padding: 22px 18px;
  color: var(--access-muted);
  background: #fff;
  font-size: 0.8rem;
  font-style: normal;
}

/* Role Badges */
.role-badge {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid #d5dee6;
  border-radius: 5px;
  color: #425568;
  background: #f1f4f7;
  font-size: 0.7rem;
  font-weight: 650;
}
.role-badge.custom-role {
  border-color: #bfdcf0;
  color: var(--access-accent);
  background: var(--access-accent-soft);
}

/* Role group: role name + inline permissions — horizontal layout */
.role-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  margin: 0 10px 5px 0;
  vertical-align: middle;
}
.role-group:last-child {
  margin-right: 0;
}
.perm-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 4px;
}
.perm-tag {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid #e0e6ec;
  border-radius: 4px;
  color: #667587;
  background: #fafbfc;
  font-size: 0.64rem;
  line-height: 1.4;
  white-space: nowrap;
}

/* Error Banner */
.access-list-page .error-banner {
  margin: 18px;
  border: 1px solid #f5c6c2;
  color: #c5221f;
  background: #fce8e6;
}

@media (max-width: 700px) {
  .access-list-page .section-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .access-list-page #refresh-iam {
    width: 100%;
    justify-content: center;
  }
  .access-table {
    min-width: 640px;
  }
  .access-table th,
  .access-table td {
    padding: 11px 14px;
  }
}

/* Project schema registry */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.schema-registry-page .site-main {
  padding: 24px clamp(18px, 3vw, 44px) 48px;
}
.schema-registry {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
}
.schema-registry-hero {
  position: relative;
  overflow: hidden;
  min-height: 264px;
  padding: clamp(30px, 4vw, 54px);
  border-radius: 18px;
  color: #f8fbff;
  background:
    radial-gradient(circle at 82% 20%, rgba(48, 176, 255, 0.22), transparent 27%),
    linear-gradient(120deg, #0a1326 0%, #102547 58%, #0e325c 100%);
  box-shadow: 0 14px 38px rgba(13, 35, 68, 0.18);
}
.schema-registry-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 790px;
}
.schema-eyebrow,
.schema-section-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #72caff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.schema-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #42e5a6;
  box-shadow: 0 0 0 5px rgba(66, 229, 166, 0.13);
}
.schema-registry-hero h1 {
  margin: 14px 0 12px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}
.schema-registry-hero-copy > p {
  max-width: 660px;
  margin: 0;
  color: #c6d7eb;
  font-size: 1rem;
}
.schema-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 28px;
  color: #a9bfd8;
  font-size: 0.76rem;
}
.schema-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.schema-hero-meta b {
  color: #fff;
  font-weight: 600;
}
.schema-hero-meta code {
  color: #d9efff;
}
.schema-hero-mark {
  position: absolute;
  right: clamp(30px, 7vw, 100px);
  top: 50%;
  width: 170px;
  height: 150px;
  transform: translateY(-50%);
}
.schema-hero-mark span {
  position: absolute;
  left: 50%;
  width: 126px;
  height: 70px;
  border: 1px solid rgba(121, 207, 255, 0.38);
  border-radius: 50%;
  transform: translateX(-50%);
}
.schema-hero-mark span:nth-child(1) { top: 0; background: rgba(48, 176, 255, 0.08); }
.schema-hero-mark span:nth-child(2) { top: 39px; background: rgba(48, 176, 255, 0.06); }
.schema-hero-mark span:nth-child(3) { top: 78px; background: rgba(48, 176, 255, 0.04); }
.schema-setup-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding: 16px 20px;
  border: 1px solid #b9d9f8;
  border-radius: 12px;
  color: #17466f;
  background: #eff7ff;
}
.schema-setup-notice p {
  margin: 3px 0 0;
  font-size: 0.82rem;
}
.schema-setup-notice code {
  padding: 7px 10px;
  border-radius: 6px;
  color: #173f66;
  background: #dceeff;
  white-space: nowrap;
}
.schema-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 0;
}
.schema-stat-card {
  display: flex;
  min-height: 126px;
  flex-direction: column;
  padding: 20px 22px;
  border: 1px solid #dbe3ec;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(18, 42, 71, 0.04);
}
.schema-stat-card > span {
  color: #6a7583;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.schema-stat-card strong {
  margin: 6px 0 2px;
  color: #16263b;
  font-size: 2rem;
  line-height: 1;
}
.schema-stat-card small {
  margin-top: auto;
  color: #7b8693;
  font-size: 0.74rem;
}
.schema-stat-card-pii {
  border-color: #ebd6df;
  background: linear-gradient(145deg, #fff 45%, #fff4f8);
}
.schema-stat-card-pii strong {
  color: #a03b64;
}
.schema-stat-card-alert {
  border-color: #f5c5b9;
  background: #fff9f7;
}
.schema-stat-card-alert strong {
  color: #b93825;
}
.schema-section-nav {
  display: flex;
  gap: 30px;
  margin: 30px 0 0;
  border-bottom: 1px solid #d8e0e9;
}
.schema-section-nav a {
  position: relative;
  padding: 0 2px 12px;
  color: #657282;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}
.schema-section-nav a:hover,
.schema-section-nav a.active {
  color: #126dc1;
}
.schema-section-nav a.active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  content: "";
  background: #188ce5;
}
.schema-registry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(330px, 0.75fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}
.schema-catalog-panel,
.schema-evolution-panel {
  padding: 26px;
  border: 1px solid #dbe3ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(18, 42, 71, 0.04);
}
.schema-evolution-panel {
  position: sticky;
  top: 92px;
  max-height: calc(100vh - 108px);
  max-height: calc(100dvh - 108px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
.schema-evolution-panel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.schema-section-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}
.schema-section-kicker {
  color: #2886c9;
}
.schema-section-heading h2 {
  margin: 5px 0 5px;
  color: #18283b;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}
.schema-section-heading p {
  max-width: 590px;
  margin: 0;
  color: #73808e;
  font-size: 0.8rem;
}
.schema-result-count {
  flex-shrink: 0;
  padding: 5px 9px;
  border: 1px solid #d5e0eb;
  border-radius: 999px;
  color: #607082;
  background: #f7f9fb;
  font-size: 0.72rem;
  font-weight: 600;
}
.schema-visibility-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(220px, 0.5fr);
  gap: 16px;
  align-items: start;
  margin: 18px 0;
  padding: 18px 20px;
  border: 1px solid #cfe2f1;
  border-radius: 12px;
  background: linear-gradient(135deg, #f5fbff 0%, #eef7fc 100%);
}
.schema-visibility-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #218fd3;
  font-size: 0.78rem;
  font-weight: 800;
}
.schema-visibility-copy h2 {
  margin: 3px 0 8px;
  color: #1d3f5a;
  font-size: 1rem;
}
.schema-visibility-copy ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 17px;
  color: #50677b;
  font-size: 0.72rem;
}
.schema-visibility-why {
  margin: 9px 0 0;
  color: #315d7c;
  font-size: 0.7rem;
  font-weight: 600;
}
.schema-exclusion-list {
  padding-left: 16px;
  border-left: 1px solid #cbddea;
}
.schema-exclusion-list strong,
.schema-exclusion-list small {
  display: block;
}
.schema-exclusion-list strong {
  color: #31566f;
  font-size: 0.7rem;
}
.schema-exclusion-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 7px 0;
}
.schema-exclusion-list code {
  padding: 3px 6px;
  border: 1px solid #d3e1eb;
  border-radius: 5px;
  color: #375a73;
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.62rem;
}
.schema-exclusion-list small {
  color: #6c7f8e;
  font-size: 0.63rem;
  line-height: 1.45;
}
.schema-filter-bar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(145px, 0.5fr) auto;
  gap: 10px;
  align-items: center;
  margin: 22px 0 16px;
}
.schema-search {
  position: relative;
}
.schema-search > span:not(.sr-only) {
  position: absolute;
  top: 50%;
  left: 12px;
  color: #7e8a98;
  font-size: 1.25rem;
  transform: translateY(-54%);
}
.schema-filter-bar input[type="search"],
.schema-filter-bar select {
  width: 100%;
  height: 40px;
  border: 1px solid #d5dee8;
  border-radius: 8px;
  color: #243447;
  background: #fff;
  font: inherit;
  font-size: 0.78rem;
}
.schema-filter-bar input[type="search"] {
  padding: 0 12px 0 36px;
}
.schema-filter-bar select {
  padding: 0 30px 0 11px;
}
.schema-filter-bar input:focus,
.schema-filter-bar select:focus {
  border-color: #2994e5;
  outline: 3px solid rgba(41, 148, 229, 0.12);
}
.schema-change-toggle {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid #d5dee8;
  border-radius: 8px;
  color: #536273;
  font-size: 0.76rem;
  white-space: nowrap;
}
.schema-change-toggle input {
  accent-color: #188ce5;
}
.schema-dataset-card {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid #dce4ed;
  border-radius: 10px;
  background: #fff;
}
.schema-dataset-card > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  background: #f7f9fc;
}
.schema-dataset-card > summary::-webkit-details-marker {
  display: none;
}
.schema-dataset-card > summary:hover {
  background: #f1f6fb;
}
.schema-dataset-icon {
  position: relative;
  width: 22px;
  height: 18px;
  border: 1.5px solid #2788d2;
  border-radius: 50%;
}
.schema-dataset-icon::before,
.schema-dataset-icon::after {
  position: absolute;
  right: -1.5px;
  left: -1.5px;
  height: 8px;
  border: 1.5px solid #2788d2;
  border-top: 0;
  border-radius: 0 0 50% 50%;
  content: "";
}
.schema-dataset-icon::before { top: 3px; }
.schema-dataset-icon::after { top: 8px; }
.schema-dataset-card summary strong,
.schema-dataset-card summary small {
  display: block;
}
.schema-dataset-card summary strong {
  color: #203246;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84rem;
}
.schema-dataset-card summary small {
  margin-top: 1px;
  color: #778493;
  font-size: 0.68rem;
}
.schema-chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #788695;
  border-bottom: 1.5px solid #788695;
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.schema-dataset-card:not([open]) .schema-chevron {
  transform: rotate(-45deg);
}
.schema-table-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(150px, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 68px;
  padding: 11px 16px 11px 50px;
  border-top: 1px solid #ebeff4;
  color: inherit;
  text-decoration: none;
}
.schema-table-row:hover {
  background: #f8fbfe;
}
.schema-table-primary,
.schema-table-facts {
  min-width: 0;
}
.schema-table-name,
.schema-table-path {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schema-table-name {
  color: #1c334d;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 650;
}
.schema-table-path {
  margin-top: 3px;
  color: #8893a0;
  font-size: 0.65rem;
}
.schema-column-preview {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}
.schema-column-preview code,
.schema-column-preview > span {
  overflow: hidden;
  max-width: 100px;
  padding: 2px 5px;
  border-radius: 4px;
  color: #607286;
  background: #eef3f7;
  font-size: 0.6rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schema-column-preview code.pii {
  color: #8f3559;
  background: #fae8ef;
}
.schema-table-facts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  color: #7a8794;
  font-size: 0.68rem;
  white-space: nowrap;
}
.schema-type-pill,
.schema-change-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.schema-pii-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #91385c;
  background: #fae8ef;
  font-weight: 700;
}
.schema-type-pill {
  color: #4a6882;
  background: #edf3f7;
}
.schema-change-pill.compatible {
  color: #16724a;
  background: #e6f7ef;
}
.schema-change-pill.breaking {
  color: #b33b2e;
  background: #ffebe8;
}
.schema-row-arrow {
  margin-left: 2px;
  color: #2188d2;
  font-size: 0.9rem;
}
.schema-no-results {
  margin-top: 12px;
  padding: 34px 20px;
  border: 1px dashed #cbd6e1;
  border-radius: 10px;
  color: #5f7082;
  text-align: center;
  background: #f9fbfc;
}
.schema-no-results p {
  margin: 4px 0 0;
  font-size: 0.78rem;
}
.schema-tracking-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}
.schema-tracking-summary > div {
  padding: 12px;
  border-radius: 8px;
  background: #f3f7fa;
}
.schema-tracking-summary span,
.schema-tracking-summary strong {
  display: block;
}
.schema-tracking-summary span {
  color: #7a8794;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.schema-tracking-summary strong {
  margin-top: 3px;
  color: #24384f;
  font-size: 0.88rem;
}
.schema-activity-strip {
  display: flex;
  height: 34px;
  align-items: end;
  gap: 3px;
  margin-top: 16px;
  padding: 0 2px;
}
.schema-activity-strip span {
  min-width: 4px;
  height: 8px;
  flex: 1;
  border-radius: 2px;
  background: #cbd7e2;
}
.schema-activity-strip span.has-change {
  height: 26px;
  background: #32a9ef;
}
.schema-activity-legend {
  display: flex;
  gap: 12px;
  margin: 6px 0 20px;
  color: #7d8996;
  font-size: 0.62rem;
}
.schema-activity-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.schema-activity-legend i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd7e2;
}
.schema-activity-legend i.changed {
  background: #32a9ef;
}
.schema-change-timeline {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.schema-change-timeline > li {
  position: relative;
  margin-left: 7px;
  padding: 0 0 22px 22px;
  border-left: 1px solid #d9e1e9;
}
.schema-change-timeline > li:last-child {
  padding-bottom: 4px;
  border-left-color: transparent;
}
.schema-timeline-marker {
  position: absolute;
  top: 2px;
  left: -6px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #2b9bdf;
  box-shadow: 0 0 0 1px #2b9bdf;
}
.schema-change-timeline > li.baseline .schema-timeline-marker {
  background: #33a473;
  box-shadow: 0 0 0 1px #33a473;
}
.schema-change-timeline > li.breaking .schema-timeline-marker {
  background: #dd5a47;
  box-shadow: 0 0 0 1px #dd5a47;
}
.schema-timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.schema-timeline-head time {
  color: #42566d;
  font-size: 0.75rem;
  font-weight: 700;
}
.schema-timeline-head > span:not(.schema-change-pill) {
  color: #72808f;
  font-size: 0.65rem;
}
.schema-change-timeline li > p {
  margin: 5px 0 0;
  color: #778493;
  font-size: 0.7rem;
}
.schema-diff-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}
.schema-diff-counts span {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
}
.schema-diff-counts .added { color: #16724a; background: #e6f7ef; }
.schema-diff-counts .removed { color: #b33b2e; background: #ffebe8; }
.schema-diff-counts .modified { color: #94610c; background: #fff5d9; }
.schema-event-details {
  margin-top: 8px;
}
.schema-event-details > summary {
  color: #247dbb;
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 600;
}
.schema-event-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 7px;
  background: #f6f8fa;
}
.schema-event-table strong {
  overflow: hidden;
  color: #30465d;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schema-event-table code {
  grid-column: 1 / -1;
  font-size: 0.61rem;
  white-space: normal;
}
.schema-event-table code.added { color: #16724a; }
.schema-event-table code.removed { color: #b33b2e; }
.schema-event-table code.modified { color: #94610c; }
.schema-method-note {
  margin-top: 22px;
  padding: 13px 14px;
  border-left: 3px solid #2398dd;
  border-radius: 0 7px 7px 0;
  color: #53697f;
  background: #eef7fc;
}
.schema-method-note strong {
  color: #235d86;
  font-size: 0.72rem;
}
.schema-method-note p {
  margin: 3px 0 0;
  font-size: 0.68rem;
}
.schema-pii-policy {
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid #ead8df;
  border-radius: 8px;
  color: #596979;
  background: #fff8fb;
}
.schema-pii-policy summary {
  color: #853554;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 750;
}
.schema-pii-policy > p {
  margin: 8px 0 12px;
  font-size: 0.68rem;
  line-height: 1.55;
}
.schema-pii-policy dl,
.schema-pii-policy dl div {
  display: grid;
  gap: 6px;
  margin: 0;
}
.schema-pii-policy dl {
  gap: 10px;
}
.schema-pii-policy dt {
  color: #7b6170;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.schema-pii-policy dd {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}
.schema-pii-policy code {
  overflow-wrap: anywhere;
  padding: 2px 5px;
  border-radius: 4px;
  color: #72324c;
  background: #f6e6ed;
  font-size: 0.61rem;
}

@media (max-width: 1180px) {
  .schema-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .schema-registry-layout {
    grid-template-columns: 1fr;
  }
  .schema-evolution-panel {
    position: static;
  }
}
@media (max-width: 900px) {
  .schema-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .schema-hero-mark {
    opacity: 0.45;
  }
  .schema-table-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .schema-column-preview {
    display: none;
  }
  .schema-visibility-note {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .schema-exclusion-list {
    grid-column: 2;
    padding: 12px 0 0;
    border-top: 1px solid #cbddea;
    border-left: 0;
  }
}
@media (max-width: 620px) {
  .schema-registry-page .site-main {
    padding: 12px;
  }
  .schema-registry-hero {
    min-height: 0;
    padding: 28px 22px;
    border-radius: 12px;
  }
  .schema-hero-mark {
    display: none;
  }
  .schema-hero-meta {
    display: grid;
    gap: 7px;
  }
  .schema-setup-notice {
    align-items: stretch;
    flex-direction: column;
  }
  .schema-setup-notice code {
    overflow-x: auto;
  }
  .schema-stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .schema-stat-card {
    min-height: 110px;
    padding: 15px;
  }
  .schema-visibility-note {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .schema-visibility-icon {
    display: none;
  }
  .schema-exclusion-list {
    grid-column: 1;
  }
  .schema-filter-bar {
    grid-template-columns: 1fr;
  }
  .schema-catalog-panel,
  .schema-evolution-panel {
    padding: 18px 14px;
  }
  .schema-table-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-left: 16px;
  }
  .schema-table-facts {
    justify-content: flex-start;
  }
  .schema-row-arrow {
    margin-left: auto;
  }
}

/* Ingestion health */
.health-page {
  --health-green: #19764a;
  --health-green-soft: #e8f5ee;
  --health-amber: #9a5d00;
  --health-amber-soft: #fff4d6;
  --health-red: #b3261e;
  --health-red-soft: #fcebea;
  --health-slate: #52606d;
  padding: 0;
  overflow: hidden;
}
.health-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 32px 24px;
  background:
    linear-gradient(118deg, rgba(1, 124, 238, 0.09), transparent 42%),
    linear-gradient(180deg, #fbfdff, #fff);
  border-bottom: 1px solid var(--border);
}
.health-hero h1 {
  margin: 0 0 8px;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.health-eyebrow {
  margin: 0 0 6px;
  color: #1967d2;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.health-controls {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.health-controls label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}
.health-controls select {
  min-height: 37px;
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}
.health-controls button:disabled { opacity: 0.55; cursor: wait; }
.health-observation-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding: 11px 32px;
  color: var(--muted);
  background: #f7f9fb;
  border-bottom: 1px solid var(--border);
  font-size: 0.76rem;
}
.health-observation-bar b { color: var(--text); font-weight: 600; }
.health-observation-bar code { font-size: 0.72rem; }
.health-window-summary { color: var(--text); font-weight: 700; }
.health-query-context { padding: 12px 32px; border-bottom: 1px solid var(--border); font-size: 0.76rem; color: var(--muted); }
.health-query-context p { margin: 0 0 6px; }
.health-query-context b { color: var(--text); }
.health-query-context pre { margin: 8px 0 0; padding: 10px 12px; background: #f7f9fb; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.health-query-context code { font-size: 0.72rem; }
.health-cache-note {
  margin-left: auto;
  color: #456178;
}
.health-source-error { margin: 20px 32px 0; }
.health-source-error strong { display: block; }
.health-source-error ul { margin: 6px 0 0; padding-left: 20px; }
.health-summary {
  display: grid;
  gap: 14px;
  padding: 24px 32px 18px;
}
.health-verdict {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 18px;
  border: 1px solid var(--border);
  border-left-width: 5px;
  border-radius: 9px;
  background: #fafbfc;
}
.health-verdict-mark {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: currentColor;
  color: var(--health-slate);
  font-size: 0.95rem;
  font-weight: 700;
}
.health-verdict-mark::after { color: #fff; content: "…"; }
.health-verdict-copy { min-width: 0; flex: 1; }
.health-verdict-copy strong { display: block; font-size: 1.05rem; letter-spacing: -0.01em; }
.health-verdict-copy span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.45;
}
.health-verdict-counts {
  display: flex;
  gap: 10px;
  margin: 0;
  flex-shrink: 0;
}
.health-verdict-count {
  min-width: 96px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  text-align: right;
}
.health-verdict-count dt {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.health-verdict-count dd {
  margin: 2px 0 0;
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.health-verdict-count--confirmed dd { color: var(--health-green); }
.health-verdict-count--attention dd { color: var(--health-amber); }
.health-verdict[data-verdict="clean"] {
  border-color: #b8dfca;
  background: var(--health-green-soft);
}
.health-verdict[data-verdict="clean"] .health-verdict-mark { color: var(--health-green); }
.health-verdict[data-verdict="clean"] .health-verdict-mark::after { content: "✓"; }
.health-verdict[data-verdict="clean"] .health-verdict-copy strong { color: var(--health-green); }
.health-verdict[data-verdict="tolerated"] { border-color: #bfd2dc; background: #eff5f8; }
.health-verdict[data-verdict="tolerated"] .health-verdict-mark { color: #3d647b; }
.health-verdict[data-verdict="tolerated"] .health-verdict-mark::after { content: "≈"; }
.health-verdict[data-verdict="tolerated"] .health-verdict-copy strong { color: #31566d; }
.health-verdict[data-verdict="discrepancy"] {
  border-color: #ead49e;
  background: var(--health-amber-soft);
}
.health-verdict[data-verdict="discrepancy"] .health-verdict-mark { color: var(--health-amber); }
.health-verdict[data-verdict="discrepancy"] .health-verdict-mark::after { content: "!"; }
.health-verdict[data-verdict="discrepancy"] .health-verdict-copy strong { color: var(--health-amber); }
.health-verdict[data-verdict="failed"] {
  border-color: #f0c4c1;
  background: var(--health-red-soft);
}
.health-verdict[data-verdict="failed"] .health-verdict-mark { color: var(--health-red); }
.health-verdict[data-verdict="failed"] .health-verdict-mark::after { content: "!"; }
.health-verdict[data-verdict="failed"] .health-verdict-copy strong { color: var(--health-red); }
.health-verdict[data-verdict="unavailable"] { border-color: #d9cbf2; background: #f7f3fd; }
.health-verdict[data-verdict="unavailable"] .health-verdict-mark { color: #6c4aa3; }
.health-verdict[data-verdict="unavailable"] .health-verdict-mark::after { content: "?"; }
.health-chain-lead {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}
.health-chain {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}
.health-chain-step,
.health-chain-delta {
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 9px;
}
.health-chain-step {
  flex: 1 1 0;
  background: #fafbfc;
}
.health-chain-step > span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.health-chain-step > strong {
  display: block;
  margin: 5px 0 2px;
  font-size: 1.5rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.health-chain-step > small,
.health-chain-delta > small { display: block; color: var(--muted); font-size: 0.68rem; line-height: 1.35; }
.health-chain-delta {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  max-width: 190px;
  background: #fff;
  border-style: dashed;
  cursor: help;
  text-align: center;
}
.health-chain-delta > strong {
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}
.health-chain-delta > span {
  display: block;
  margin: 1px 0 2px;
  color: var(--text);
  font-size: 0.7rem;
  line-height: 1.3;
}
.health-chain-delta--within { border-color: #b8dfca; background: var(--health-green-soft); }
.health-chain-delta--within > strong,
.health-chain-delta--within > small { color: var(--health-green); }
.health-chain-delta--even > strong { color: var(--health-slate); }
.health-chain-delta--tolerated { border-color: #bfd2dc; background: #eff5f8; }
.health-chain-delta--tolerated > strong,
.health-chain-delta--tolerated > small { color: #31566d; }
.health-chain-delta--review { border-color: #ead49e; background: var(--health-amber-soft); }
.health-chain-delta--review > strong,
.health-chain-delta--review > small { color: var(--health-amber); }
.health-chain-delta--unknown > strong,
.health-chain-step--unknown > strong { color: var(--health-slate); }
.health-chain-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.health-chain-check {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 11px 15px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fafbfc;
}
.health-chain-check > span {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}
.health-chain-check > strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.health-chain-check > small { color: var(--muted); font-size: 0.68rem; line-height: 1.35; }
.health-chain-check--within { border-color: #b8dfca; background: var(--health-green-soft); }
.health-chain-check--within > strong { color: var(--health-green); }
.health-chain-check--tolerated { border-color: #bfd2dc; background: #eff5f8; }
.health-chain-check--tolerated > strong { color: #31566d; }
.health-chain-check--review { border-color: #ead49e; background: var(--health-amber-soft); }
.health-chain-check--review > strong { color: var(--health-amber); }
.health-chain-check--unknown > strong { color: var(--health-slate); }
.health-formula {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 32px 28px;
  padding: 12px 15px;
  border: 1px solid #c6dafc;
  border-radius: 8px;
  background: #f4f8ff;
  color: #17466f;
  font-size: 0.8rem;
}
.health-formula-mark {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1967d2;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}
.health-formula strong,
.health-formula span { display: block; }
.health-formula span { margin-top: 2px; color: #4c647b; }
.health-formula small {
  display: block;
  margin-top: 7px;
  color: #5f7285;
  font-size: 0.72rem;
  line-height: 1.45;
}
.health-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 32px 12px;
}
.health-section-head h2 { margin: 0; font-size: 1.1rem; }
.health-section-head p { margin: 3px 0 0; color: var(--muted); font-size: 0.8rem; }
.health-loading-label {
  color: var(--muted);
  font-size: 0.76rem;
}
.health-table-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.health-table {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.health-table th,
.health-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #e8edf2;
  text-align: left;
  white-space: nowrap;
}
.health-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  background: #f7f9fb;
  font-size: 0.66rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.health-table th:first-child { padding-left: 32px; }
.health-table td:last-child { padding-right: 32px; }
.health-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.health-row { cursor: pointer; transition: background 0.12s; }
.health-row:hover,
.health-row:focus { background: #f7faff; outline: none; }
.health-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.health-row.selected { background: #eef5ff; box-shadow: inset 3px 0 #1967d2; }
.health-row:last-child th,
.health-row:last-child td { border-bottom: 0; }
.health-route-name { display: inline-block; min-width: 105px; font-size: 0.82rem; }
.health-env {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  color: #44505c;
  background: #edf0f3;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}
.health-env--prod { color: #174ea6; background: #e8f0fe; }
.health-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--health-slate);
  background: #edf0f3;
  font-size: 0.69rem;
  font-weight: 700;
  white-space: nowrap;
}
.health-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.health-status--confirmed { color: var(--health-green); background: var(--health-green-soft); }
.health-status--covered { color: #176b57; background: #e5f4f0; }
.health-status--tolerated { color: #31566d; background: #eff5f8; }
.health-status--discrepancy { color: var(--health-amber); background: var(--health-amber-soft); }
.health-status--failed { color: var(--health-red); background: var(--health-red-soft); }
.health-status--unknown { color: #6c4aa3; background: #f2ebfc; }
.health-status--paused,
.health-status--quiet { color: var(--health-slate); background: #edf0f3; }
.health-status--loading::before { animation: health-pulse 1.2s infinite; }
@keyframes health-pulse { 50% { opacity: 0.25; } }
.health-gap--zero { color: var(--health-green); font-weight: 700; }
.health-gap--tolerated { color: #31566d; font-weight: 700; }
.health-gap--open { color: var(--health-amber); font-weight: 700; }
.health-gap strong { display: block; }
.health-failure { color: var(--health-red); }
.health-no-failure { color: var(--muted); }
.health-detail {
  margin: 28px 32px 32px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fbfcfd;
}
.health-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.health-detail-head h2 { margin: 0; font-size: 1.1rem; }
.health-detail-resource {
  margin: 5px 0 0;
  color: var(--muted);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  overflow-wrap: anywhere;
}
.health-detail-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(85px, 1fr));
  gap: 1px;
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--border);
}
.health-detail-stats > div { padding: 10px 12px; background: #fff; }
.health-detail-stats span,
.health-detail-stats strong { display: block; }
.health-detail-stats span { color: var(--muted); font-size: 0.66rem; }
.health-unmatched {
  padding: 12px 14px;
  border: 1px solid #ead49e;
  border-radius: 7px;
  background: var(--health-amber-soft);
}
.health-unmatched--tolerated { border-color: #bfd2dc; background: #eff5f8; }
.health-unmatched > strong { font-size: 0.8rem; }
.health-unmatched > p { margin: 3px 0 8px; color: var(--muted); font-size: 0.7rem; }
.health-unmatched ul { margin: 0; padding: 0; list-style: none; }
.health-unmatched li { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 3px 0; font-size: 0.78rem; }
.health-unmatched code { color: var(--muted); }
.health-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* .btn sets display, so the hidden attribute needs its own rule to win here. */
.health-console-link { white-space: nowrap; }
.health-console-link::after { content: "\2197"; margin-left: 5px; font-size: 0.75rem; opacity: 0.65; }
.health-console-link[hidden] { display: none; }
.health-detail-stats strong { margin-top: 3px; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.health-detail-discrepancy {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--health-amber);
  background: var(--health-amber-soft);
  color: var(--health-slate);
  font-size: 0.78rem;
  line-height: 1.5;
}
.health-detail-discrepancy--tolerated { border-left-color: #3d647b; background: #eff5f8; }

@media (max-width: 1100px) {
  .health-verdict { flex-wrap: wrap; }
  .health-verdict-counts { width: 100%; }
  .health-verdict-count { flex: 1; }
  .health-chain-step > strong { font-size: 1.3rem; }
  .health-detail-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .health-hero { flex-direction: column; padding: 22px 20px; }
  .health-controls { width: 100%; flex-wrap: wrap; }
  .health-controls button { margin-left: auto; }
  .health-observation-bar,
  .health-summary,
  .health-section-head { padding-left: 20px; padding-right: 20px; }
  /* The chain reads top to bottom once the arrow of measurements cannot fit. */
  .health-chain { flex-direction: column; }
  .health-chain-delta { max-width: none; align-self: stretch; text-align: left; }
  .health-formula { margin-left: 20px; margin-right: 20px; }
  .health-source-error { margin-left: 20px; margin-right: 20px; }
  .health-table th:first-child { padding-left: 20px; }
  .health-detail { margin: 22px 20px; }
  .health-detail-stats { grid-template-columns: repeat(2, 1fr); }
  .health-cache-note { width: 100%; margin-left: 0; }
}
@media (max-width: 480px) {
  .health-verdict-counts { flex-direction: column; }
  .health-verdict-count { text-align: left; }
  .health-detail-stats { grid-template-columns: 1fr 1fr; }
}

/* Alerts page */
.alerts-page {
  --alerts-sev1: #b3261e;
  --alerts-sev2: #b06000;
  --alerts-sev3: #017cee;
  --alerts-sev4: #5f6368;
  padding: 0;
  overflow: hidden;
}
.alerts-hero {
  padding: 28px 32px 22px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(118deg, rgba(1, 124, 238, 0.08), transparent 45%),
    linear-gradient(180deg, #fbfdff, #fff);
}
.alerts-eyebrow {
  margin: 0 0 6px;
  color: #1967d2;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.alerts-hero h1 {
  margin: 0 0 8px;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
.alerts-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 18px 0 0;
  font-size: 0.76rem;
}
.alerts-meta > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.alerts-meta dt {
  color: var(--muted);
  font-weight: 600;
}
.alerts-meta dd {
  margin: 0;
  color: var(--text);
}
.alerts-meta code { font-size: 0.72rem; }

.alerts-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 11px 32px;
  border-bottom: 1px solid var(--border);
  background: #f7f9fb;
  font-size: 0.76rem;
}
.alerts-toc-label {
  margin-right: 4px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.alerts-toc a {
  color: var(--accent);
  text-decoration: none;
  border-radius: 4px;
  padding: 1px 4px;
}
.alerts-toc a:hover { background: #e8f0fe; }

.alerts-section {
  padding: 26px 32px 0;
  scroll-margin-top: 72px;
}
.alerts-section + .alerts-section {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.alerts-section-head h2 {
  margin: 0;
  font-size: 1.1rem;
}
.alerts-section-head p {
  margin: 5px 0 14px;
  max-width: 62rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}
.alerts-subheading {
  margin: 24px 0 0;
  font-size: 0.95rem;
}
.alerts-sublead {
  margin: 4px 0 12px;
  color: var(--muted);
  font-size: 0.82rem;
}
.alerts-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.alerts-table th,
.alerts-table td {
  padding: 10px 13px;
  border-bottom: 1px solid #e8edf2;
  text-align: left;
  vertical-align: top;
}
.alerts-table thead th {
  color: var(--muted);
  background: #f7f9fb;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.alerts-table tbody th {
  font-weight: 600;
  white-space: nowrap;
}
.alerts-table tbody tr:last-child th,
.alerts-table tbody tr:last-child td { border-bottom: 0; }
.alerts-table--compact { min-width: 420px; }
.alerts-table--definitions { min-width: 1050px; table-layout: fixed; }
.alerts-table--definitions th:nth-child(1) { width: 18%; }
.alerts-table--definitions th:nth-child(2) { width: 20%; }
.alerts-table--definitions th:nth-child(3) { width: 40%; }
.alerts-table--definitions th:nth-child(4) { width: 22%; }
.alerts-table--definitions th { white-space: normal; }
.alerts-table--definitions td { overflow-wrap: anywhere; line-height: 1.5; }
.alerts-field-list {
  display: block;
  max-width: 24rem;
  color: #3c4a58;
  font-size: 0.7rem;
  line-height: 1.5;
  white-space: normal;
  word-break: break-word;
}
.alerts-example {
  color: var(--muted);
  font-size: 0.75rem;
}
.alerts-scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.alerts-scenario {
  border: 1px solid var(--border);
  border-top: 3px solid #6b7785;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.alerts-scenario--observe { border-top-color: #52729a; }
.alerts-scenario--investigate { border-top-color: var(--alerts-sev2); }
.alerts-scenario--recovering { border-top-color: #2e7d50; }
.alerts-scenario-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px 10px;
  background: #f8fafc;
}
.alerts-scenario-head h3 {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.35;
}
.alerts-scenario-state {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  color: #40556d;
  background: #e9eef4;
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}
.alerts-scenario--investigate .alerts-scenario-state { color: #8a3d00; background: #fff0df; }
.alerts-scenario--recovering .alerts-scenario-state { color: #17683f; background: #eaf7ef; }
.alerts-scenario dl { margin: 0; padding: 4px 14px 12px; }
.alerts-scenario dl > div { padding: 9px 0; border-bottom: 1px dashed #e4e9ef; }
.alerts-scenario dl > div:last-child { border-bottom: 0; }
.alerts-scenario dt {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.alerts-scenario dd {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.45;
}
.alerts-target {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.alert-tier {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.alert-tier--sev1 { background: var(--alerts-sev1); }
.alert-tier--sev2 { background: var(--alerts-sev2); }
.alert-tier--sev3 { background: var(--alerts-sev3); }
.alert-tier--sev4 { background: var(--alerts-sev4); }
.alert-tier--ghost {
  color: var(--alerts-sev2);
  background: #fdf1e0;
  box-shadow: inset 0 0 0 1px rgba(176, 96, 0, 0.25);
}
.alert-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  color: #4a5763;
  background: #eef1f4;
  font-size: 0.64rem;
  font-weight: 600;
  white-space: nowrap;
}
.alert-status--new { color: #174ea6; background: #e8f0fe; }
.alert-status--keep { color: #17683f; background: #eaf7ef; }
.alert-status--retune { color: #8a5b0c; background: #fff5dd; }
.alert-status--partial { color: #8a5b0c; background: #fff5dd; }
.alert-implementation {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid #cbd5df;
  border-radius: 999px;
  color: #46586a;
  background: #f7f9fb;
  font-size: 0.64rem;
  font-weight: 600;
  white-space: nowrap;
}
.alert-implementation--ready { color: #17683f; border-color: #b9dfc9; background: #eaf7ef; }
.alert-implementation--feasibility { color: #8a5b0c; border-color: #efd397; background: #fff5dd; }
/* Service or scheduled code is required. */
.alert-implementation--pipeline { color: #8b2f5f; border-color: #ebbad3; background: #fcecf4; font-weight: 700; }
.alert-implementation--low { color: #17683f; border-color: #b9dfc9; background: #eaf7ef; }
.alert-implementation--medium { color: #8a5b0c; border-color: #efd397; background: #fff5dd; }
.alert-implementation--high { color: #8b2f5f; border-color: #ebbad3; background: #fcecf4; }
.alerts-table td > .alert-implementation { margin-right: 6px; }
.alerts-destination {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
}
.alerts-destination--invalid { color: #8a5b0c; background: #fff5dd; }
.alerts-destination--nowhere { color: #a33127; background: #ffebe8; }

@media (max-width: 900px) {
  .alerts-scenario-grid { grid-template-columns: 1fr; }
}

.alerts-stage { margin-top: 22px; }
.alerts-stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 10px;
}
.alerts-stage-head h3 {
  margin: 0;
  font-size: 0.95rem;
}
.alerts-stage-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.alert-card {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--alerts-sev3);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.alert-card--sev1 { border-left-color: var(--alerts-sev1); }
.alert-card--sev2 { border-left-color: var(--alerts-sev2); }
.alert-card--sev4 { border-left-color: var(--alerts-sev4); }
.alert-card > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 12px 15px;
  cursor: pointer;
  list-style: none;
  background: #fbfcfd;
}
.alert-card > summary::-webkit-details-marker { display: none; }
.alert-card > summary:hover { background: #f4f8fd; }
.alert-card[open] > summary {
  border-bottom: 1px solid var(--border);
  background: #f4f8fd;
}
.alert-card-id {
  flex: 0 0 auto;
  min-width: 30px;
  color: var(--muted);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 700;
}
.alert-card-name {
  flex: 1 1 260px;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 600;
}
.alert-card > summary::after {
  margin-left: auto;
  color: #788695;
  content: "+";
  font-size: 1rem;
  font-weight: 700;
}
.alert-card[open] > summary::after { content: "–"; }
.alert-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  padding: 16px 18px 18px;
}
.alert-facts {
  margin: 0;
  font-size: 0.78rem;
}
.alert-facts > div {
  padding: 8px 0;
  border-bottom: 1px dashed #e4e9ef;
}
.alert-facts > div:last-child { border-bottom: 0; }
.alert-facts dt {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.alert-facts dd {
  margin: 3px 0 0;
  color: var(--text);
  line-height: 1.45;
}
.alert-facts dd code {
  display: block;
  padding: 4px 7px;
  border-radius: 4px;
  background: #f1f4f7;
  font-size: 0.68rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.alert-prose {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.82rem;
}
.alert-prose-block {
  padding: 10px 13px;
  border-radius: 7px;
  background: #fafbfc;
}
.alert-prose-block--action {
  border-left: 3px solid #017cee;
  background: #f4f8ff;
}
.alert-prose-block h4 {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.alert-prose-block p {
  margin: 0;
  line-height: 1.55;
}

.alerts-code-group + .alerts-code-group { margin-top: 24px; }
.alerts-code-title {
  margin: 0 0 4px;
  font-size: 0.95rem;
}
.alerts-code-title--4xx { color: var(--alerts-sev2); }
.alerts-code-title--5xx { color: var(--alerts-sev1); }
.alerts-code {
  padding: 1px 6px;
  border-radius: 4px;
  background: #eef1f4;
  font-size: 0.74rem;
  font-weight: 700;
}
.alerts-code--4xx { color: #8a5b0c; background: #fff5dd; }
.alerts-code--5xx { color: #a33127; background: #ffebe8; }

.alerts-lag-table { min-width: 720px; }
.alerts-lag-row--alert { background: #fffaf5; }
.alerts-lag-verdict { margin-left: 7px; }

.alerts-footer {
  margin: 28px 0 0;
  padding: 16px 32px 26px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8rem;
}

@media (max-width: 1000px) {
  .alert-card-body { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .alerts-hero,
  .alerts-toc,
  .alerts-section { padding-left: 20px; padding-right: 20px; }
  .alerts-footer { padding: 16px 20px 22px; }
  .alerts-meta { flex-direction: column; gap: 6px; }
}

/* Verified resources behind each alert. Keep long IDs and filters readable on mobile. */
.alerts-inventory-note { padding: 10px 12px; background: #f4f8ff; border-left: 3px solid #017cee; }
.alert-monitoring { grid-column: 1 / -1; min-width: 0; }
.alert-monitoring > h4 { margin: 0 0 12px; font-size: 0.9rem; }
.alert-monitor { margin-top: 8px; padding: 8px 10px; border: 1px solid #e4eaf2; border-radius: 5px; background: #fff; }
.alert-monitor-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px 12px; flex-wrap: wrap; }
.alert-monitor-head > div { min-width: 0; }
.alert-monitor-head h5 { margin: 0; font-size: 0.78rem; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.alert-monitor-kind { margin: 0 0 2px; color: var(--muted); font-size: 0.68rem; }
.alert-monitor-resource { display: block; margin: 4px 0; font-size: 0.65rem; overflow-wrap: anywhere; }
.alert-monitor-state { padding: 2px 6px; border-radius: 4px; font-size: 0.66rem; font-weight: 400; background: #eaf2fc; color: #24496d; }
.alert-monitor-state--missing, .alert-monitor-state--unwired { background: #fff2d9; color: #774b00; }
.alert-monitor .alert-facts { font-size: 0.73rem; }
.alert-monitor .alert-facts > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 3px 0; }
.alert-monitor .alert-facts dt { font-size: 0.65rem; font-weight: 500; text-transform: none; letter-spacing: normal; }
.alert-monitor .alert-facts dd { flex: 1 1 240px; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.alert-monitor-filter { margin-top: 5px; font-size: 0.7rem; }
.alert-monitor-filter summary { cursor: pointer; color: var(--muted); }
.alert-monitor-filter pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px; background: #f4f6f8; font-size: 0.68rem; }
.alert-monitor-links { display: flex; gap: 4px 14px; flex-wrap: wrap; margin: 6px 0 0; padding: 0; list-style: none; font-size: 0.7rem; }
.alert-monitor-links a { overflow-wrap: anywhere; }

/* One fleet overview, with one selected resource panel. */
.alert-matrix-scroll { overflow-x: auto; border: 1px solid #dbe4ef; border-radius: 10px; }
.alert-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.alert-matrix caption { text-align: left; padding: 12px; font-weight: 700; }
.alert-matrix th, .alert-matrix td { padding: 10px 7px; border-top: 1px solid #e4eaf2; text-align: center; min-width: 78px; }
.alert-matrix th:first-child { position: sticky; left: 0; background: #f5f8fc; text-align: left; min-width: 210px; max-width: 260px; z-index: 1; }
.alert-matrix thead th { background: #f5f8fc; }
.alert-matrix-cell { cursor: pointer; font: inherit; line-height: 1.35; border: 1px solid #cbd8e8; background: #f1f5fa; color: #334155; border-radius: 6px; padding: 6px; width: 100%; }
.alert-matrix-cell--tested, .alert-matrix-cell--routing_tested { background: #edf8f0; color: #166534; }
.alert-matrix-cell--untested, .alert-matrix-cell--mixed, .alert-matrix-cell--synthetic { background: #fff7e6; color: #854d0e; }
.alert-matrix-cell[aria-pressed="true"] { outline: 2px solid #2563eb; outline-offset: 2px; }
.alert-matrix-cell:focus-visible { outline: 3px solid #2563eb; }
.alert-matrix-unknown { color: #94a3b8; }
.alert-matrix-detail { margin-top: 12px; padding: 10px 12px; border: 1px solid #e4eaf2; border-radius: 6px; }
.alert-matrix-detail > h3 { margin: 0 0 8px; font-size: 0.88rem; font-weight: 500; line-height: 1.4; }

/* Request journey and date/time range controls. */
.payload-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: .65rem; list-style: none; padding: 0; margin: 1.25rem 0 .65rem; }
.payload-flow li { display: flex; align-items: center; gap: .65rem; flex: 1 1 130px; }
.payload-flow li:not(:last-child)::after { content: "→"; color: var(--muted, #68758a); }
.payload-flow a, .payload-flow li > span { display: flex; flex-direction: column; justify-content: center; gap: .3rem; padding: .85rem; border: 1px solid var(--border, #dce2eb); border-radius: 10px; min-height: 76px; flex: 1; text-decoration: none; }
.payload-flow b { font-size: .75rem; letter-spacing: .06em; }
.payload-flow-note { color: var(--muted, #68758a); font-size: .9rem; }
.alerts-connection-note { border-left: 3px solid #c58b20; padding: .7rem 1rem; margin-top: 1.25rem; }
.alerts-code-guide summary { cursor: pointer; font-weight: 600; }
.alerts-simple-codes > div { display: flex; gap: 1rem; margin: .8rem 0; }
.alerts-simple-codes dt { min-width: 3rem; font-weight: 700; }
.alerts-simple-codes dd { margin: 0; }
.health-controls { flex-wrap: wrap; flex-shrink: 1; max-width: 680px; }
.health-custom-range { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.health-custom-range[hidden] { display: none; }
.health-custom-range label { display: grid; gap: .3rem; }
.health-custom-range input { font: inherit; padding: .55rem; border: 1px solid var(--border, #dce2eb); border-radius: 6px; background: var(--surface, white); color: inherit; }
.health-custom-range small { flex-basis: 100%; }
.health-range-error { flex-basis: 100%; color: #b42318; margin: .25rem 0; }
@media (max-width: 650px) { .payload-flow { flex-direction: column; } .payload-flow li { flex: auto; } .payload-flow li:not(:last-child)::after { content: "↓"; } .health-custom-range input { max-width: 100%; } }

.partitions-page details > summary { cursor: pointer; }
.alert-matrix-detail[hidden] { display: none; }

.docs-pause-summary { margin: 1.25rem 0; border-left: 3px solid #c58b20; padding: .65rem 1rem; }
.docs-pause-summary > summary { cursor: pointer; font-weight: 600; }
.docs-pause-summary .environment-pause-notice { margin-bottom: 0; }

/* Phased alert rollout */
.alert-rollout { background: #f8fbff; border-bottom: 1px solid var(--border); }
.rollout-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rollout-heading h2 { margin: 0; font-size: 1.35rem; }
.rollout-proposal { padding: 6px 12px; border: 1px solid #cbdcf2; border-radius: 20px; color: #365c88; font-size: .75rem; white-space: nowrap; }
.rollout-intro { max-width: 920px; color: #526174; line-height: 1.6; }
.rollout-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.rollout-status { background: white; border: 1px solid #dbe5ef; border-radius: 10px; padding: 16px 20px; }
.rollout-status:first-child { border-left: 3px solid #298061; }
.rollout-status:last-child { border-left: 3px solid #d59b35; }
.rollout-status h3, .rollout-steps h3 { margin: 0 0 8px; font-size: .9rem; }
.rollout-status p, .rollout-steps p { margin: 0; color: #526174; font-size: .85rem; line-height: 1.6; }
.rollout-table { background: white; width: 100%; }
.rollout-table th, .rollout-table td { padding: 12px 16px; }
.rollout-table tbody th { color: #526174; font-weight: 500; }
.rollout-table tbody td:first-of-type { font-weight: 600; }
.rollout-notes { margin: 16px 0; font-size: .83rem; line-height: 1.6; }
.rollout-notes p { margin: 6px 0; }
.rollout-details { border-top: 1px solid #dbe5ef; padding-top: 16px; }
.rollout-details summary { cursor: pointer; color: #1967d2; font-weight: 600; font-size: .88rem; }
.rollout-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0; }
.rollout-evidence { font-size: .72rem; color: #68788b; margin: 16px 0 0; }
@media (max-width: 700px) {
  .rollout-status-grid, .rollout-steps { grid-template-columns: 1fr; }
  .rollout-table { min-width: 540px; }
}

/* Live incident status and readable setup cards. */
.alert-status-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 16px 0; }
.alert-status-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: .8rem; }
.alert-status-legend > span { display: inline-flex; align-items: center; gap: 6px; }
#alert-status-updated { margin: 0; font-size: .78rem; color: var(--muted); }
.alert-health-icon { display: inline-flex; flex: 0 0 20px; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; font-size: 13px; font-weight: 700; line-height: 1; }
.alert-health-icon--clear { background: #dcfce7; color: #166534; }
.alert-health-icon--recent { background: #fef3c7; color: #92400e; }
.alert-health-icon--open { background: #fee2e2; color: #b91c1c; }
.alert-health-icon--unknown { background: #e8edf3; color: #64748b; }
.alert-matrix-cell { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; white-space: nowrap; }
.alert-matrix-cell[data-health="clear"] { border-color: #bbdec8; background: #f3fbf6; }
.alert-matrix-cell[data-health="recent"] { border-color: #eacb81; background: #fffbeb; }
.alert-matrix-cell[data-health="open"] { border-color: #f0b5b5; background: #fff4f4; }
.alert-matrix-detail { padding: 22px; border-radius: 12px; background: #f8fafc; }
.alert-setup-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.alert-setup-heading h3 { margin: 4px 0 0; font-size: 1.15rem; line-height: 1.4; }
.alert-setup-eyebrow { margin: 0; color: var(--muted); font-size: .8rem; }
.alert-setup-close { border: 1px solid #dbe4ef; border-radius: 7px; background: #fff; color: #475569; font: inherit; font-size: 1.5rem; width: 34px; height: 34px; cursor: pointer; }
.alert-setup-summary { margin: 12px 0; font-size: .95rem; line-height: 1.55; }
.alert-setup-status { margin-bottom: 18px; }
.alert-setup-status > p:first-child { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; }
.alert-setup-status h4 { margin: 12px 0 8px; font-size: .8rem; }
.alert-incident-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.alert-incident-list li { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; font-size: .82rem; }
.alert-incident-list li > span { font-size: .76rem; color: var(--muted); }
.alert-setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.alert-setup-card { padding: 18px; border: 1px solid #dbe4ef; border-radius: 10px; background: #fff; min-width: 0; }
.alert-setup-card-head { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.alert-setup-kind { font-size: .75rem; color: #526174; }
.alert-setup-card .alert-monitor-state { font-size: .72rem; }
.alert-setup-card h4 { margin: 10px 0 8px; font-size: .95rem; line-height: 1.45; }
.alert-setup-card > p { margin: 0; font-size: .85rem; line-height: 1.65; color: #475569; }
.alert-setup-links { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 14px 0 0; font-size: .8rem; }
.alert-setup-technical { margin-top: 16px; padding-top: 12px; border-top: 1px solid #edf1f5; font-size: .78rem; }
.alert-setup-technical summary, .alert-setup-supporting > summary { cursor: pointer; color: #526174; }
.alert-setup-technical code { font-size: .72rem; overflow-wrap: anywhere; }
.alert-setup-technical pre { white-space: pre-wrap; padding: 10px; background: #f5f7fa; border-radius: 6px; }
.alert-setup-supporting { margin-top: 18px; }
.alert-setup-supporting > summary { font-size: .85rem; padding: 8px 0; }
.alert-setup-supporting .alert-setup-grid { margin-top: 10px; }
.alert-setup-note { font-size: .78rem; color: var(--muted); line-height: 1.55; }
.alert-setup-close:focus-visible, .alert-setup-technical summary:focus-visible, .alert-setup-supporting summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
@media (max-width: 650px) { .alert-matrix-detail { padding: 14px; } .alert-status-legend { gap: 10px; } }

/* Keep the traffic comparison readable in a narrow preview or mobile viewport. */
#alert-calibration { scroll-margin-top: 160px; }
.alerts-table--calibration { table-layout: fixed; }
.alerts-table--calibration thead th,
.alerts-table--calibration tbody th { white-space: normal; }
.alerts-table--calibration th:nth-child(1) { width: 22%; }
.alerts-table--calibration th:nth-child(2) { width: 17%; }
.alerts-table--calibration th:nth-child(3) { width: 14%; }
.alerts-table--calibration th:nth-child(4) { width: 20%; }
.alerts-table--calibration th:nth-child(5) { width: 27%; }