:root {
  --bg: #0d1117;
  --surface: #161b22;
  --surface-2: #1c2128;
  --border: #30363d;
  --text: #c9d1d9;
  --text-dim: #8b949e;
  --accent: #58a6ff;
  --good: #3fb950;
  --warn: #d29922;
  --bad: #f85149;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); background: var(--surface-2); padding: 1px 4px; border-radius: 3px; }

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 600;
}
.brand-mark {
  background: var(--accent);
  color: var(--bg);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--mono);
  font-weight: 700;
}
.brand-name { font-size: 16px; }
.tagline { color: var(--text-dim); flex: 1; min-width: 280px; }
.updated { color: var(--text-dim); font-family: var(--mono); font-size: 12px; }

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

.hero {
  text-align: center;
  padding: 32px 16px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.hero-label { color: var(--text-dim); text-transform: uppercase; font-size: 12px; letter-spacing: 1px; }
.hero-value { font-family: var(--mono); font-size: 56px; font-weight: 700; margin-top: 4px; }
.hero-value.good { color: var(--good); }
.hero-value.warn { color: var(--warn); }
.hero-value.bad { color: var(--bad); }
.hero-sub { color: var(--text-dim); margin-top: 4px; font-size: 13px; }

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 800px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .cards { grid-template-columns: 1fr; }
  .container { padding: 12px; }
  .hero-value { font-size: 40px; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
}
.card-label { color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.card-value { font-family: var(--mono); font-size: 28px; margin-top: 4px; }
.card-sub { color: var(--text-dim); font-size: 12px; }

.chart-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
}
.chart-title { font-weight: 600; margin-bottom: 8px; }
.chart-frame { height: 280px; }
/* v1.6.0 Bug #3: chart-frame variant that hosts a status-badge
   overlay (added to the network-drift chart only). `position: relative`
   anchors the absolutely-positioned badge to this frame. */
.chart-frame-with-badge { position: relative; }
.chart-status-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  pointer-events: none;
  z-index: 4;
}
.chart-status-badge[hidden] { display: none !important; }
.chart-status-badge.badge-normal  { color: #22c55e; border-color: #22c55e; }
.chart-status-badge.badge-warning { color: #f59e0b; border-color: #f59e0b; }
.chart-status-badge.badge-anomaly { color: #ef4444; border-color: #ef4444; }

.ranking-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
}

.ranking-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ranking-title { font-weight: 600; }

.search {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 13px;
  min-width: 220px;
}
.search:focus { outline: none; border-color: var(--accent); }

.table-wrap { overflow-x: auto; }

table.ranking {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
}
table.ranking th, table.ranking td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
table.ranking th { color: var(--text-dim); cursor: pointer; user-select: none; font-weight: 600; }
table.ranking th.num, table.ranking td.num { text-align: right; }
table.ranking tr:hover td { background: var(--surface-2); }
table.ranking td.pos { color: var(--bad); }
table.ranking td.neg { color: var(--accent); }
table.ranking td.zero { color: var(--text-dim); }

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
}
.pagination button {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--mono);
}
.pagination button:hover:not(:disabled) { border-color: var(--accent); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination span { color: var(--text-dim); font-family: var(--mono); }

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0 8px;
  color: var(--text-dim);
  font-size: 12px;
  flex-wrap: wrap;
  gap: 12px;
}

/* ===== Language toggle ===== */
.lang-toggle {
  display: flex;
  gap: 4px;
}
.lang-btn {
  background: var(--surface-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  transition: border-color 0.1s, color 0.1s;
}
.lang-btn:hover { border-color: var(--accent); color: var(--text); }
.lang-btn.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* ===== "My Clock vs World" section ===== */
.section-title {
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 14px;
}
.section-help {
  color: var(--text-dim);
  font-size: 12px;
  margin-bottom: 12px;
}
.clock-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
}
.clock-help {
  color: var(--text-dim);
  font-size: 12px;
  margin: 4px 0 16px;
  line-height: 1.5;
}
.clock-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 800px) {
  .clock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .clock-grid { grid-template-columns: 1fr; }
}
.clock-cell {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
}
.clock-cell-label {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.clock-cell-value {
  font-size: 18px;
  font-weight: 600;
}
.clock-cell-value.mono { font-family: var(--mono); }
.clock-cell-value.good { color: var(--good); }
.clock-cell-value.good-yellow { color: #a3d055; }
.clock-cell-value.warn { color: var(--warn); }
.clock-cell-value.warn-strong { color: #e08e25; }
.clock-cell-value.bad { color: var(--bad); }

/* ===== Best synchronized validators section (green theme) ===== */
.best-synced-section {
  background: var(--surface);
  border: 1px solid #1f6f37;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
  position: relative;
}
.best-synced-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--good);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.best-synced-header {
  margin-bottom: 12px;
}
.best-synced-header .section-title { color: var(--good); }
.best-synced-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
}
.best-synced-table th, .best-synced-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.best-synced-table th { color: var(--text-dim); font-weight: 600; }
.best-synced-table th.num, .best-synced-table td.num { text-align: right; }
.best-synced-table tr:hover td { background: var(--surface-2); }
.best-synced-table td.best-good { color: var(--good); font-weight: 600; }
.best-synced-table td.best-ok { color: #a3d055; }
.best-synced-table td.best-neutral { color: var(--text); }

/* ===== NTP sources table ===== */
.sources-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
}
.sources-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
}
.sources-table th, .sources-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.sources-table th { color: var(--text-dim); font-weight: 600; }
.sources-table th.num, .sources-table td.num { text-align: right; }
.sources-table tr:hover td { background: var(--surface-2); }
td.mono { font-family: var(--mono); }

/* ===== Header controls (filter toggle + lang toggle) ===== */
.header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  color: var(--text);
}
.filter-toggle:hover { border-color: var(--accent); }
.filter-toggle input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent);
}
.toggle-info {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
}

/* ===== Operator clusters section ===== */
.clusters-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
}
.clusters-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}
@media (max-width: 800px) {
  .clusters-row { grid-template-columns: 1fr; }
}
.cluster-stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cluster-label {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cluster-value {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
}
.cluster-pct {
  color: var(--text-dim);
  font-size: 12px;
  font-family: var(--mono);
}
/* v1.3.0 — secondary detail under the largest-cluster value (its drift
   band, e.g. "drift: -842.3 ms"); kept dim so the count + stake stay
   the dominant signal. */
.cluster-stat-detail {
  color: var(--text-dim);
  font-size: 11px;
  font-family: var(--mono);
}
/* v1.3.0 — informational note explaining the 100-XNT noise floor and
   how many groups got filtered out. Subtle so it doesn't compete with
   the actual data. */
.cluster-noise-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
.cluster-noise-count {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--text-dim);
  font-family: var(--mono);
}
.cluster-noise-count:empty { display: none; }

/* ===== Scatter section ===== */
.scatter-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
}
.scatter-section .chart-frame { height: 360px; margin-top: 8px; }
.scatter-stats {
  margin-top: 8px;
  color: var(--text-dim);
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* ===== Cluster column ===== */
.cluster-cell {
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
  cursor: help;
}
.cluster-cell-singleton { color: var(--text-dim); }

/* ===== Pubkey cell click ===== */
.pubkey-cell { cursor: pointer; }
.pubkey-cell:hover { color: var(--accent); }

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-overlay[hidden] { display: none; }
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: min(720px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}
.modal-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  word-break: break-all;
}
.modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.modal-close:hover { border-color: var(--accent); }
.modal-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
}
@media (max-width: 480px) { .modal-stats { grid-template-columns: 1fr; } }
.modal-stat-value { color: var(--accent); }
.modal-chart-frame { height: 280px; margin-bottom: 16px; }
.modal-empty {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
  margin: 12px 0;
  color: var(--text-dim);
  font-size: 12px;
}
.modal-link { text-align: right; font-size: 12px; }

/* ===== v1.0.0 Layer 1 / Layer 2 framework ===== */

/* Hero — shared shell (replaces .hero1-section / .hero2-section) */
.hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}
.hero-pipeline { text-align: center; }
.hero-subtitle {
  color: var(--text-dim);
  font-size: 13px;
  margin: 0 0 16px;
}
.hero-figure {
  font-size: 48px;
  font-weight: 700;
  margin: 16px 0 8px;
  font-family: var(--mono);
  line-height: 1.1;
}
.hero-figure .good { color: var(--good); }
.hero-figure .warn { color: var(--warn); }
.hero-figure .bad  { color: var(--bad); }
.hero-figure .mono.good { color: var(--good); }
.hero-figure .mono.warn { color: var(--warn); }
.hero-figure .mono.bad  { color: var(--bad); }
.hero-trend {
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 12px;
}
.hero-explanation {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
  max-width: 70ch;
  margin: 16px auto 8px;
}
.hero-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
.hero-link:hover { color: var(--text); border-bottom-color: var(--text); }

/* Hero #2 — Validator pipeline health (drift-magnitude bands) */
.hero-health { text-align: center; }
.health-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
  text-align: left;
}
@media (max-width: 800px) { .health-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .health-cards { grid-template-columns: 1fr; } }
.health-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  border-left: 4px solid var(--border);
}
/* v1.0.0 health bands */
.health-card.health-normal     { border-left-color: var(--good); }
.health-card.health-slow       { border-left-color: var(--warn); }
.health-card.health-drift      { border-left-color: var(--bad); }
.health-card.health-foundation { border-left-color: var(--accent); }
/* legacy v0.4.0 classes — kept so older HTML snapshots still style */
.health-card.severity-critical   { border-left-color: var(--bad); }
.health-card.severity-high       { border-left-color: var(--warn); }
.health-card.severity-healthy    { border-left-color: var(--good); }
.health-card.severity-foundation { border-left-color: var(--accent); }
.health-icon { font-size: 22px; margin-bottom: 4px; }
.health-label {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.health-value {
  font-size: 28px;
  font-weight: 700;
  margin: 4px 0;
}
.health-normal .health-value     { color: var(--good); }
.health-slow .health-value       { color: var(--warn); }
.health-drift .health-value      { color: var(--bad); }
.health-foundation .health-value { color: var(--accent); }
.severity-critical .health-value   { color: var(--bad); }
.severity-high .health-value       { color: var(--warn); }
.severity-healthy .health-value    { color: var(--good); }
.severity-foundation .health-value { color: var(--accent); }
.health-sub { color: var(--text-dim); font-size: 11px; }

/* v0.6.0: optional client-side stake lens shown above best/worst tables. */
.table-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 8px 0 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
}
.stake-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}
.stake-filter input {
  width: 100px;
  padding: 4px 8px;
  font: inherit;
  font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.stake-filter input:focus {
  outline: none;
  border-color: var(--accent);
}
.filter-hint {
  font-size: 12px;
  color: var(--text-dim);
}

/* Worst-validators table */
.worst-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
}
.ranking-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.severity-filter {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
}
.severity-filter:focus { outline: none; border-color: var(--accent); }

table.worst-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
}
table.worst-table th, table.worst-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
table.worst-table th { color: var(--text-dim); cursor: pointer; user-select: none; font-weight: 600; }
table.worst-table th.num, table.worst-table td.num { text-align: right; }
table.worst-table tr:hover td { background: var(--surface-2); }
table.worst-table td.pos { color: var(--bad); }
table.worst-table td.neg { color: var(--accent); }
table.worst-table td.zero { color: var(--text-dim); }

/* Severity badge cell — v0.4.1 shows TWO icons side by side:
   the severity glyph (🚨 / ⚠️ / ✅ / ·) followed by the foundation
   badge (🏛️) when applicable. */
.severity-cell {
  text-align: center;
  font-size: 14px;
  white-space: nowrap;
  min-width: 48px;
}
.severity-cell .sev-icon { display: inline-block; }
.severity-cell .foundation-badge {
  display: inline-block;
  margin-left: 4px;
  color: var(--accent);
}
.row-critical    td.pos, .row-critical td.neg { font-weight: 700; }
/* Foundation table (in its own showcase section) keeps its own subtle
   blue tint via .row-foundation; that selector is no longer applied
   in the worst-table — see app.js severityCell rationale. */
.row-foundation td { background: rgba(88, 166, 255, 0.04); }
.row-foundation:hover td { background: rgba(88, 166, 255, 0.1); }

/* Foundation table */
.foundation-section {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
  position: relative;
}
.foundation-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.foundation-section .section-title { color: var(--accent); }
table.foundation-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
}
table.foundation-table th, table.foundation-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
table.foundation-table th { color: var(--text-dim); font-weight: 600; }
table.foundation-table th.num, table.foundation-table td.num { text-align: right; }
table.foundation-table td.pos { color: var(--bad); }
table.foundation-table td.neg { color: var(--accent); }
table.foundation-table td.zero { color: var(--text-dim); }
table.foundation-table tr:hover td { background: var(--surface-2); }

/* Deeper analytics — collapsible */
.analytics-section {
  margin-bottom: 24px;
}
.analytics-section details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0;
}
.analytics-section summary {
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
}
.analytics-section summary::-webkit-details-marker { display: none; }
.analytics-section summary::before {
  content: "▸";
  color: var(--text-dim);
  font-size: 12px;
  transition: transform 0.15s;
}
.analytics-section details[open] summary::before {
  transform: rotate(90deg);
}
.analytics-section summary:hover { background: var(--surface-2); }
.analytics-hint {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: normal;
  margin-left: auto;
}
.analytics-section details[open] > *:not(summary) {
  padding: 0 16px 16px;
}
.analytics-section .clusters-section,
.analytics-section .chart-block {
  margin-bottom: 16px;
  padding: 0;
  background: transparent;
  border: 0;
}

/* Severity row tints (subtle, doesn't fight badge color) */
.row-critical td:not(.severity-cell):not(.pubkey-cell) {
  background-color: rgba(248, 81, 73, 0.04);
}
.row-high td:not(.severity-cell):not(.pubkey-cell) {
  background-color: rgba(210, 153, 34, 0.03);
}
/* v1.0.0 row tints (Layer 1/2 framework — match severity-cell badges) */
.row-severity-layer2 td:not(.severity-cell):not(.pubkey-cell) {
  background-color: rgba(248, 81, 73, 0.06);
}
.row-severity-pipeline-slow td:not(.severity-cell):not(.pubkey-cell) {
  background-color: rgba(210, 153, 34, 0.04);
}
.row-severity-normal td:not(.severity-cell):not(.pubkey-cell) {
  background-color: transparent;
}
/* v1.0.0 severity badge colors (Layer 1/2) */
.sev-icon.severity-layer2 { color: var(--bad); }
.sev-icon.severity-pipeline-slow { color: var(--warn); }
.sev-icon.severity-normal { color: var(--good); }

/* ===== v0.5.0 — Foundation drift trend section ===== */
.foundation-trend-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
}
.foundation-trend-section .chart-frame { height: 320px; margin-top: 12px; }

.foundation-trend-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}
@media (max-width: 800px) { .foundation-trend-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .foundation-trend-stats { grid-template-columns: 1fr; } }

.foundation-trend-stats .stat-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.foundation-trend-stats .stat-label {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.foundation-trend-stats .stat-value {
  font-size: 18px;
  font-weight: 600;
}
.stat-warning { color: var(--warn); }
.stat-alert {
  border-color: var(--warn) !important;
  background: rgba(210, 153, 34, 0.08) !important;
}
.stat-alert .stat-value { color: var(--warn); font-size: 12px; }
.stat-alert[hidden] { display: none !important; }

/* ===== v0.7.0: Network drift chart controls (window selector + outliers) ===== */
.chart-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 4px 0 12px;
}
.window-selector {
  display: inline-flex;
  gap: 4px;
}
.window-selector .window-btn {
  background: var(--surface-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.window-selector .window-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.window-selector .window-btn.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.chart-axis-note {
  color: var(--text-dim);
  font-size: 11px;
  margin-left: auto;
}
.chart-axis-note[hidden] { display: none !important; }

.outlier-alert {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(210, 153, 34, 0.08);
  border: 1px solid var(--warn);
  border-left: 3px solid var(--warn);
  border-radius: 4px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}
.outlier-alert[hidden] { display: none !important; }
.outlier-alert-title {
  font-weight: 600;
  color: var(--warn);
  margin-bottom: 6px;
}
.outlier-alert-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.outlier-alert-list li {
  padding: 2px 0;
}
.outlier-alert-list li::before {
  content: "• ";
  color: var(--warn);
  margin-right: 4px;
}
/* v1.4.0 — explanatory footer inside the outlier alert (used by the
   foundation-trend variant). Subtle so it doesn't compete with the
   actual list of events above it. */
.outlier-alert .outlier-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ===== v1.5.0 — Network state widget (active vs observed counts) ===== */
.network-state {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0 24px;
}
.network-state > .section-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
}
.network-state-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
@media (max-width: 768px) {
  .network-state-grid { grid-template-columns: 1fr; }
}
.state-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  border-left: 3px solid var(--good);
}
/* Observed = neutral accent — it's the universe count, not "good" or
   "bad" by itself. Zombie = dim border so the eye reads it as the
   reduce-pile bucket; the value is informational not actionable. */
.state-card-observed { border-left-color: var(--accent); }
.state-card-zombie   { border-left-color: var(--text-dim); }
.state-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}
.state-value {
  font-size: 24px;
  font-weight: 700;
  margin: 4px 0;
}
.state-detail {
  font-size: 11px;
  color: var(--text-dim);
}
.network-state-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.5;
}
.network-state-note strong {
  color: var(--text);
  font-weight: 600;
  font-style: normal;
}

/* ===== v1.7.0 — Strontium Oracle widget. Sized to slot between the
   network-state strip and Hero #2 without dominating either. The
   whole section is `display: none` when the JSON artifact is missing
   (the hidden attribute does that natively). =============== */
.strontium-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 16px 0 24px;
}
.strontium-section[hidden] { display: none !important; }
.strontium-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.strontium-header .section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
/* v1.7.2 Fix #4 — strontium-icon was a span carrying an emoji; now it
   is an inline SVG. `currentColor` on the SVG strokes inherits the
   surrounding text colour so the icon picks up h2 / muted text styles
   automatically. Sized in `em` so it scales with the heading font. */
.strontium-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
  color: var(--accent);
}
.strontium-fleet-badge {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  letter-spacing: 0.3px;
}
.strontium-fleet-badge.strontium-fleet-live {
  color: var(--good);
  border-color: var(--good);
}
.strontium-fleet-badge.strontium-fleet-offline {
  color: var(--text-dim);
}
.strontium-stats {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  row-gap: 6px;
  column-gap: 16px;
  margin: 6px 0 12px;
  font-size: 13px;
}
.strontium-stat {
  display: contents;
}
.strontium-stat-label {
  color: var(--text-dim);
  font-size: 12px;
  white-space: nowrap;
}
.strontium-stat-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text);
}
.strontium-bar {
  display: inline-block;
  flex: 0 0 90px;
  height: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
}
.strontium-bar-fill {
  display: block;
  height: 100%;
  background: var(--good);
  transition: width 0.25s ease-out;
}
.strontium-history {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.strontium-history-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.strontium-history-label {
  color: var(--text-dim);
  font-size: 12px;
}
.strontium-history-count {
  color: var(--text-dim);
  font-size: 11px;
  margin-left: auto;
}
.strontium-sparkline {
  display: block;
  width: 100%;
  height: 32px;
  /* Path drawn here — the SVG itself is invisible until renderStrontium
     populates the `d` attribute. */
}
.strontium-sparkline path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* ===== v1.0.0: Anomalies & deviations (Tier 1 + Tier 2) ===== */
.anomalies-section {
  margin-bottom: 24px;
}
.anomalies-section > .section-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}
.anomaly-tier {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}
.anomaly-tier.tier-pipeline {
  border-left: 4px solid var(--warn);
}
.anomaly-tier.tier-drift {
  border-left: 4px solid var(--bad);
  background: rgba(248, 81, 73, 0.03);
}
.tier-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tier-icon {
  font-size: 18px;
}
.tier-subtitle {
  color: var(--text-dim);
  font-size: 12px;
  margin-bottom: 8px;
}
.tier-help {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
  max-width: 80ch;
  margin: 4px 0 12px;
}
.tier-empty {
  color: var(--text-dim);
  font-size: 13px;
  font-style: italic;
  margin: 8px 0 0;
}
.tier-empty[hidden] { display: none !important; }

/* Tier 2 compact table — clock_drift.json renderer */
.clock-drift-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.clock-drift-table th,
.clock-drift-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.clock-drift-table th.num,
.clock-drift-table td.num {
  text-align: right;
  font-family: var(--mono);
}
.clock-drift-table th {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.clock-drift-table tbody tr:hover { background: var(--surface-2); }

/* ===== v1.0.0: Layer 1 / Layer 2 explainer ===== */
.layer-explainer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}
.layer-explainer > .section-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}
.layer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 700px) { .layer-grid { grid-template-columns: 1fr; } }
.layer-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  border-left: 4px solid var(--border);
}
.layer-card.layer-card-1 { border-left-color: var(--accent); }
.layer-card.layer-card-2 { border-left-color: var(--bad); }
.layer-card h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
}
.layer-card p {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}
.explainer-cta {
  font-size: 13px;
  color: var(--text-dim);
}
.explainer-cta a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
  margin-left: 4px;
}
.explainer-cta a:hover { color: var(--text); border-bottom-color: var(--text); }

/* ===== v1.1.0: diagnostic snapshot widget (Layer 1 / Layer 2 side-by-side) ===== */
.diagnostic-snapshot {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}
.diagnostic-snapshot > .section-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
}
.diagnostic-snapshot .section-subtitle {
  color: var(--text-dim);
  font-size: 13px;
  margin: 0 0 16px;
}
.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 12px 0;
}
@media (max-width: 768px) {
  .snapshot-grid { grid-template-columns: 1fr; }
}
.snapshot-card {
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  border-left: 4px solid var(--border);
}
.snapshot-pipeline { border-left-color: var(--good); }
.snapshot-drift    { border-left-color: var(--bad); }
.snapshot-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.snapshot-header h3 {
  margin: 0;
  flex: 1;
  font-size: 14px;
  font-weight: 700;
}
.snapshot-icon { font-size: 20px; }
.snapshot-layer-badge {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.snapshot-metric {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 8px 0;
}
.snapshot-metric .metric-value {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
}
/* Pipeline status colors — match Hero #1 band logic */
.snapshot-pipeline .metric-value.status-healthy   { color: var(--good); }
.snapshot-pipeline .metric-value.status-elevated  { color: var(--warn); }
.snapshot-pipeline .metric-value.status-disrupted { color: var(--bad); }
/* Clock-drift outlier count — clean (zero) is good, anything else is alarming */
.snapshot-drift .metric-value.status-clean   { color: var(--good); }
.snapshot-drift .metric-value.status-warning { color: var(--bad); }
.snapshot-metric .metric-unit {
  font-size: 14px;
  color: var(--text-dim);
}
.snapshot-status {
  font-size: 13px;
  font-weight: 600;
  margin: 4px 0 8px;
}
.snapshot-context {
  font-size: 12px;
  color: var(--text-dim);
  margin: 4px 0;
}
.snapshot-help {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 8px 0 0;
}
.diagnostic-cta {
  text-align: center;
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-dim);
}
.diagnostic-cta a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
  font-weight: 600;
}
.diagnostic-cta a:hover { color: var(--text); border-bottom-color: var(--text); }

/* v1.7.2 Fix #1/#2 — "Showing all available history (X days)." hint.
   Subtle muted text right under the relevant chart frame; hidden by
   the JS render helper when the requested window fits inside the
   retained data. */
.chart-fallback-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}
.chart-fallback-hint[hidden] { display: none !important; }

/* v1.7.2 Fix #1 — let the chart-history window selector wrap to a
   second row on narrow viewports (was 4 buttons; now 6 including
   30d / 90d). flex-wrap on the parent and on the segmented control
   itself, never horizontal-scroll. */
.window-selector {
  flex-wrap: wrap;
  row-gap: 4px;
}

/* v1.7.2 Fix #5c — mobile-viewport polish. Chart legends shrink
   their font and wrap freely instead of stretching the panel
   beyond the viewport. The breakpoint matches the existing mobile
   media query elsewhere in the stylesheet (most panels collapse
   to single-column below ~600 px). */
@media (max-width: 600px) {
  .chart-controls {
    gap: 8px;
  }
  .window-selector .window-btn {
    padding: 4px 8px;
    font-size: 11px;
  }
  /* Chart.js renders the legend inside the canvas, so we can't
     style its text directly — but we can give the chart frame
     enough breathing room that the legend wraps cleanly. */
  .chart-frame { height: 260px; }
  .foundation-trend-section .chart-frame { height: 300px; }
  .scatter-section .chart-frame { height: 320px; }
  /* DOM-rendered controls and helper text shrink in proportion. */
  .chart-fallback-hint,
  .section-help,
  .chart-axis-note {
    font-size: 11px;
  }
}