@klars/agentobs 0.1.0 → 0.1.2

package/dist/server/public/app.css

@@ -1,668 +1,961 @@
-/*
- * AgentObs dashboard styling.
- *
- * Colors come from a validated data-viz palette: the categorical slots and
- * status steps below passed the six-checks validator (lightness band, chroma
- * floor, CVD separation, normal-vision floor, contrast) against both the
- * light (#fcfcfb) and dark (#1a1a19) surfaces. Do not substitute hexes by eye
- * - re-run the validator if these change.
- *
- * Every color is defined on bare :root first, then redefined for dark under
- * both the OS media query and the explicit [data-theme] scope, so the toggle
- * wins in either direction.
- */
-
-:root {
-  color-scheme: light;
-
-  --page: #f9f9f7;
-  --surface: #fcfcfb;
-  --text-primary: #0b0b0b;
-  --text-secondary: #52514e;
-  --text-muted: #898781;
-  --grid: #e1e0d9;
-  --axis: #c3c2b7;
-  --border: rgba(11, 11, 11, 0.1);
-  --raised: rgba(11, 11, 11, 0.04);
-
-  /* Categorical slots 1-3 (validated all-pairs in both modes). */
-  --series-1: #2a78d6; /* calls */
-  --series-2: #eb6834; /* secondary */
-  --series-3: #1baf7a;
-
-  /* Status palette - reserved, never reused as a series color. */
-  --status-good: #0ca30c;
-  --status-warning: #fab219;
-  --status-serious: #ec835a;
-  --status-critical: #d03b3b;
-  --success-text: #006300;
-
-  --radius: 10px;
-  --radius-sm: 6px;
-  --shadow: 0 1px 2px rgba(11, 11, 11, 0.05), 0 8px 24px -12px rgba(11, 11, 11, 0.12);
-  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
-    "Helvetica Neue", Arial, sans-serif;
-  --mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    color-scheme: dark;
-    --page: #0d0d0d;
-    --surface: #1a1a19;
-    --text-primary: #ffffff;
-    --text-secondary: #c3c2b7;
-    --text-muted: #898781;
-    --grid: #2c2c2a;
-    --axis: #383835;
-    --border: rgba(255, 255, 255, 0.1);
-    --raised: rgba(255, 255, 255, 0.05);
-    --series-1: #3987e5;
-    --series-2: #d95926;
-    --series-3: #199e70;
-    --success-text: #0ca30c;
-    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
-  }
-}
-
-:root[data-theme="dark"] {
-  color-scheme: dark;
-  --page: #0d0d0d;
-  --surface: #1a1a19;
-  --text-primary: #ffffff;
-  --text-secondary: #c3c2b7;
-  --text-muted: #898781;
-  --grid: #2c2c2a;
-  --axis: #383835;
-  --border: rgba(255, 255, 255, 0.1);
-  --raised: rgba(255, 255, 255, 0.05);
-  --series-1: #3987e5;
-  --series-2: #d95926;
-  --series-3: #199e70;
-  --success-text: #0ca30c;
-  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  background: var(--page);
-  color: var(--text-primary);
-  font-family: var(--font);
-  font-size: 14px;
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-}
-
-.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;
-}
-
-.skip-link {
-  position: absolute;
-  left: -9999px;
-  top: 0;
-  background: var(--surface);
-  color: var(--text-primary);
-  padding: 10px 16px;
-  z-index: 10;
-  border-radius: var(--radius-sm);
-}
-.skip-link:focus {
-  left: 12px;
-  top: 12px;
-}
-
-/* ---------- Top bar ---------- */
-
-.topbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 16px 24px;
-  background: var(--surface);
-  border-bottom: 1px solid var(--border);
-  position: sticky;
-  top: 0;
-  z-index: 5;
-  flex-wrap: wrap;
-}
-
-.brand {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.brand-mark {
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  background: linear-gradient(135deg, var(--series-1), var(--series-3));
-  flex: none;
-}
-
-.brand h1 {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 650;
-  letter-spacing: -0.01em;
-}
-
-.brand-sub {
-  margin: 0;
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.topbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.rangeset,
-.filterset {
-  display: inline-flex;
-  background: var(--raised);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 2px;
-  gap: 2px;
-}
-
-.rangeset button,
-.filterset button {
-  appearance: none;
-  border: 0;
-  background: transparent;
-  color: var(--text-secondary);
-  font: inherit;
-  font-size: 13px;
-  padding: 5px 12px;
-  border-radius: 4px;
-  cursor: pointer;
-  min-height: 30px;
-}
-
-.rangeset button:hover,
-.filterset button:hover {
-  color: var(--text-primary);
-}
-
-.rangeset button[aria-pressed="true"],
-.filterset button[aria-pressed="true"] {
-  background: var(--surface);
-  color: var(--text-primary);
-  font-weight: 600;
-  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.08);
-}
-
-.icon-btn {
-  appearance: none;
-  width: 34px;
-  height: 34px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--border);
-  background: var(--raised);
-  color: var(--text-secondary);
-  cursor: pointer;
-  font-size: 15px;
-  line-height: 1;
-}
-.icon-btn:hover {
-  color: var(--text-primary);
-}
-
-:focus-visible {
-  outline: 2px solid var(--series-1);
-  outline-offset: 2px;
-}
-
-/* ---------- Layout ---------- */
-
-main {
-  max-width: 1240px;
-  margin: 0 auto;
-  padding: 24px;
-  display: grid;
-  gap: 20px;
-}
-
-.panel {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-  overflow: hidden;
-}
-
-.panel-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 16px 18px;
-  border-bottom: 1px solid var(--border);
-  flex-wrap: wrap;
-}
-
-.panel-head h2 {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 650;
-}
-
-.panel-sub {
-  margin: 2px 0 0;
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.split {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20px;
-  /* Start-align so a short table doesn't stretch to match a tall neighbour,
-     leaving a block of dead whitespace under its last row. */
-  align-items: start;
-}
-
-@media (max-width: 900px) {
-  .split {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* ---------- Hero ---------- */
-
-.hero {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-  padding: 22px 24px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 24px;
-  flex-wrap: wrap;
-}
-
-.hero-label {
-  margin: 0;
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--text-muted);
-  font-weight: 600;
-}
-
-/* Proportional figures: tabular-nums makes a large value look loose. */
-.hero-figure {
-  margin: 4px 0 0;
-  font-size: 48px;
-  line-height: 1.05;
-  font-weight: 680;
-  letter-spacing: -0.02em;
-}
-
-.hero-note {
-  margin: 6px 0 0;
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.hero-side {
-  display: flex;
-  gap: 28px;
-  margin: 0;
-  flex-wrap: wrap;
-}
-
-.hero-side div {
-  min-width: 88px;
-}
-
-.hero-side dt {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-muted);
-  font-weight: 600;
-}
-
-.hero-side dd {
-  margin: 2px 0 0;
-  font-size: 18px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-
-/* ---------- Stat tiles ---------- */
-
-.tiles {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
-}
-
-@media (max-width: 900px) {
-  .tiles {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-.tile {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 16px 18px;
-  box-shadow: var(--shadow);
-}
-
-.tile-label {
-  margin: 0;
-  font-size: 12px;
-  color: var(--text-muted);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.tile-value {
-  margin: 6px 0 0;
-  font-size: 28px;
-  font-weight: 660;
-  letter-spacing: -0.015em;
-}
-
-.tile-sub {
-  margin: 2px 0 0;
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-/* ---------- Chart ---------- */
-
-.chart-wrap {
-  position: relative;
-  padding: 16px 18px 8px;
-}
-
-#timeline {
-  width: 100%;
-  display: block;
-}
-
-.legend {
-  display: flex;
-  gap: 14px;
-  align-items: center;
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.legend-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.swatch {
-  width: 10px;
-  height: 10px;
-  border-radius: 3px;
-  display: inline-block;
-}
-
-.swatch-calls {
-  background: var(--series-1);
-}
-
-/* Errors use the reserved critical status step, never a categorical slot. */
-.swatch-errors {
-  background: var(--status-critical);
-}
-
-.tooltip {
-  position: absolute;
-  pointer-events: none;
-  background: var(--text-primary);
-  color: var(--surface);
-  padding: 7px 10px;
-  border-radius: var(--radius-sm);
-  font-size: 12px;
-  line-height: 1.45;
-  white-space: nowrap;
-  opacity: 0;
-  transition: opacity 0.12s ease;
-  z-index: 4;
-  font-variant-numeric: tabular-nums;
-}
-
-.tooltip.is-visible {
-  opacity: 1;
-}
-
-.panel-note {
-  margin: 0;
-  padding: 0 18px 14px;
-}
-
-.linklike {
-  appearance: none;
-  background: none;
-  border: 0;
-  padding: 0;
-  color: var(--text-secondary);
-  font: inherit;
-  font-size: 12px;
-  text-decoration: underline;
-  cursor: pointer;
-}
-.linklike:hover {
-  color: var(--text-primary);
-}
-
-/* ---------- Tables ---------- */
-
-.table-wrap {
-  overflow-x: auto;
-}
-
-.table-wrap.is-hidden {
-  display: none;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-}
-
-thead th {
-  text-align: left;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-muted);
-  font-weight: 600;
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--border);
-  white-space: nowrap;
-  background: var(--surface);
-}
-
-tbody td {
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--grid);
-  vertical-align: top;
-}
-
-tbody tr:last-child td {
-  border-bottom: 0;
-}
-
-tbody tr:hover td {
-  background: var(--raised);
-}
-
-.num {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-td.empty {
-  color: var(--text-muted);
-  text-align: center;
-  padding: 28px 14px;
-}
-
-.mono {
-  font-family: var(--mono);
-  font-size: 12px;
-}
-
-.truncate {
-  max-width: 420px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-}
-
-/* ---------- Status pills ---------- */
-
-/* Icon + label pairing, never color alone: on the light surface several
-   status steps sit below 3:1, and this is the documented mitigation. */
-.pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 12px;
-  font-weight: 600;
-  padding: 2px 8px;
-  border-radius: 999px;
-  border: 1px solid transparent;
-  white-space: nowrap;
-}
-
-.pill::before {
-  font-size: 10px;
-  line-height: 1;
-}
-
-.pill-success {
-  color: var(--success-text);
-  background: color-mix(in srgb, var(--status-good) 12%, transparent);
-  border-color: color-mix(in srgb, var(--status-good) 34%, transparent);
-}
-.pill-success::before {
-  content: "\2713";
-}
-
-.pill-error {
-  color: var(--status-critical);
-  background: color-mix(in srgb, var(--status-critical) 12%, transparent);
-  border-color: color-mix(in srgb, var(--status-critical) 34%, transparent);
-}
-.pill-error::before {
-  content: "\2717";
-}
-
-.pill-blocked {
-  color: var(--status-serious);
-  background: color-mix(in srgb, var(--status-serious) 14%, transparent);
-  border-color: color-mix(in srgb, var(--status-serious) 38%, transparent);
-}
-.pill-blocked::before {
-  content: "\26D4";
-}
-
-.pill-pending {
-  color: var(--text-secondary);
-  background: var(--raised);
-  border-color: var(--border);
-}
-.pill-pending::before {
-  content: "\25CB";
-}
-
-.badge {
-  display: inline-block;
-  font-size: 11px;
-  padding: 1px 6px;
-  border-radius: 4px;
-  background: var(--raised);
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-  margin-left: 6px;
-}
-
-/* ---------- Footer ---------- */
-
-.footer {
-  max-width: 1240px;
-  margin: 0 auto;
-  padding: 8px 24px 32px;
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  font-size: 12px;
-  color: var(--text-muted);
-  flex-wrap: wrap;
-}
-
-.footer code {
-  font-family: var(--mono);
-  font-size: 11px;
-}
-
-.conn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.conn::before {
-  content: "";
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--text-muted);
-}
-
-.conn.is-live::before {
-  background: var(--status-good);
-}
-
-.conn.is-down::before {
-  background: var(--status-critical);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  * {
-    transition-duration: 0.01ms !important;
-    animation-duration: 0.01ms !important;
-  }
-}
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+/*
+ * AgentObs dashboard styling.
+ *
+ * Colors come from a validated data-viz palette: the categorical slots and
+ * status steps below passed the six-checks validator (lightness band, chroma
+ * floor, CVD separation, normal-vision floor, contrast) against both the
+ * light (#fcfcfb) and dark (#1a1a19) surfaces. Do not substitute hexes by eye
+ * - re-run the validator if these change.
+ *
+ * Every color is defined on bare :root first, then redefined for dark under
+ * both the OS media query and the explicit [data-theme] scope, so the toggle
+ * wins in either direction.
+ */
+
+:root {
+  color-scheme: light;
+
+  --page: #f9f9f7;
+  --surface: #fcfcfb;
+  --text-primary: #0b0b0b;
+  --text-secondary: #52514e;
+  --text-muted: #898781;
+  --grid: #e1e0d9;
+  --axis: #c3c2b7;
+  --border: rgba(11, 11, 11, 0.1);
+  --raised: rgba(11, 11, 11, 0.04);
+
+  /* Categorical slots 1-3 (validated all-pairs in both modes). */
+  --series-1: #2a78d6; /* calls */
+  --series-2: #eb6834; /* secondary */
+  --series-3: #1baf7a;
+
+  /* Status palette - reserved, never reused as a series color. */
+  --status-good: #0ca30c;
+  --status-warning: #fab219;
+  --status-serious: #ec835a;
+  --status-critical: #d03b3b;
+  --success-text: #006300;
+
+  --radius: 10px;
+  --radius-sm: 6px;
+  --shadow: 0 1px 2px rgba(11, 11, 11, 0.05), 0 8px 24px -12px rgba(11, 11, 11, 0.12);
+  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --page: #0d0d0d;
+    --surface: #1a1a19;
+    --text-primary: #ffffff;
+    --text-secondary: #c3c2b7;
+    --text-muted: #898781;
+    --grid: #2c2c2a;
+    --axis: #383835;
+    --border: rgba(255, 255, 255, 0.1);
+    --raised: rgba(255, 255, 255, 0.05);
+    --series-1: #3987e5;
+    --series-2: #d95926;
+    --series-3: #199e70;
+    --success-text: #0ca30c;
+    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
+  }
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --page: #0d0d0d;
+  --surface: #1a1a19;
+  --text-primary: #ffffff;
+  --text-secondary: #c3c2b7;
+  --text-muted: #898781;
+  --grid: #2c2c2a;
+  --axis: #383835;
+  --border: rgba(255, 255, 255, 0.1);
+  --raised: rgba(255, 255, 255, 0.05);
+  --series-1: #3987e5;
+  --series-2: #d95926;
+  --series-3: #199e70;
+  --success-text: #0ca30c;
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: var(--page);
+  color: var(--text-primary);
+  font-family: var(--font);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+.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;
+}
+
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  background: var(--surface);
+  color: var(--text-primary);
+  padding: 10px 16px;
+  z-index: 10;
+  border-radius: var(--radius-sm);
+}
+.skip-link:focus {
+  left: 12px;
+  top: 12px;
+}
+
+/* ---------- Top bar ---------- */
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 24px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  flex-wrap: wrap;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.brand-mark {
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, var(--series-1), var(--series-3));
+  flex: none;
+}
+
+.brand h1 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+
+.brand-sub {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.rangeset,
+.filterset {
+  display: inline-flex;
+  background: var(--raised);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 2px;
+  gap: 2px;
+}
+
+.rangeset button,
+.filterset button {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 13px;
+  padding: 5px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  min-height: 30px;
+}
+
+.rangeset button:hover,
+.filterset button:hover {
+  color: var(--text-primary);
+}
+
+.rangeset button[aria-pressed="true"],
+.filterset button[aria-pressed="true"] {
+  background: var(--surface);
+  color: var(--text-primary);
+  font-weight: 600;
+  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.08);
+}
+
+.icon-btn {
+  appearance: none;
+  width: 34px;
+  height: 34px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--raised);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 1;
+}
+.icon-btn:hover {
+  color: var(--text-primary);
+}
+
+:focus-visible {
+  outline: 2px solid var(--series-1);
+  outline-offset: 2px;
+}
+
+/* ---------- Layout ---------- */
+
+main {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 24px;
+  display: grid;
+  gap: 20px;
+}
+
+.panel {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.panel-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--border);
+  flex-wrap: wrap;
+}
+
+.panel-head h2 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.panel-sub {
+  margin: 2px 0 0;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.split {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  /* Start-align so a short table doesn't stretch to match a tall neighbour,
+     leaving a block of dead whitespace under its last row. */
+  align-items: start;
+}
+
+@media (max-width: 900px) {
+  .split {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ---------- Hero ---------- */
+
+.hero {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 22px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.hero-label {
+  margin: 0;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+/* Proportional figures: tabular-nums makes a large value look loose. */
+.hero-figure {
+  margin: 4px 0 0;
+  font-size: 48px;
+  line-height: 1.05;
+  font-weight: 680;
+  letter-spacing: -0.02em;
+}
+
+.hero-note {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.hero-side {
+  display: flex;
+  gap: 28px;
+  margin: 0;
+  flex-wrap: wrap;
+}
+
+.hero-side div {
+  min-width: 88px;
+}
+
+.hero-side dt {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.hero-side dd {
+  margin: 2px 0 0;
+  font-size: 18px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---------- Stat tiles ---------- */
+
+.tiles {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+}
+
+@media (max-width: 900px) {
+  .tiles {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.tile {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px 18px;
+  box-shadow: var(--shadow);
+}
+
+.tile-label {
+  margin: 0;
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.tile-value {
+  margin: 6px 0 0;
+  font-size: 28px;
+  font-weight: 660;
+  letter-spacing: -0.015em;
+}
+
+.tile-sub {
+  margin: 2px 0 0;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+/* ---------- Chart ---------- */
+
+.chart-wrap {
+  position: relative;
+  padding: 16px 18px 8px;
+}
+
+#timeline {
+  width: 100%;
+  display: block;
+}
+
+.legend {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+  display: inline-block;
+}
+
+.swatch-calls {
+  background: var(--series-1);
+}
+
+/* Errors use the reserved critical status step, never a categorical slot. */
+.swatch-errors {
+  background: var(--status-critical);
+}
+
+.tooltip {
+  position: absolute;
+  pointer-events: none;
+  background: var(--text-primary);
+  color: var(--surface);
+  padding: 7px 10px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  line-height: 1.45;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+  z-index: 4;
+  font-variant-numeric: tabular-nums;
+}
+
+.tooltip.is-visible {
+  opacity: 1;
+}
+
+.panel-note {
+  margin: 0;
+  padding: 0 18px 14px;
+}
+
+.linklike {
+  appearance: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  color: var(--text-secondary);
+  font: inherit;
+  font-size: 12px;
+  text-decoration: underline;
+  cursor: pointer;
+}
+.linklike:hover {
+  color: var(--text-primary);
+}
+
+/* ---------- Tables ---------- */
+
+.table-wrap {
+  overflow-x: auto;
+}
+
+.table-wrap.is-hidden {
+  display: none;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+thead th {
+  text-align: left;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  font-weight: 600;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+  background: var(--surface);
+}
+
+tbody td {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--grid);
+  vertical-align: top;
+}
+
+tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+tbody tr:hover td {
+  background: var(--raised);
+}
+
+.num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+td.empty {
+  color: var(--text-muted);
+  text-align: center;
+  padding: 28px 14px;
+}
+
+.mono {
+  font-family: var(--mono);
+  font-size: 12px;
+}
+
+.truncate {
+  max-width: 420px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+
+/* ---------- Status pills ---------- */
+
+/* Icon + label pairing, never color alone: on the light surface several
+   status steps sit below 3:1, and this is the documented mitigation. */
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+
+.pill::before {
+  font-size: 10px;
+  line-height: 1;
+}
+
+.pill-success {
+  color: var(--success-text);
+  background: color-mix(in srgb, var(--status-good) 12%, transparent);
+  border-color: color-mix(in srgb, var(--status-good) 34%, transparent);
+}
+.pill-success::before {
+  content: "\2713";
+}
+
+.pill-error {
+  color: var(--status-critical);
+  background: color-mix(in srgb, var(--status-critical) 12%, transparent);
+  border-color: color-mix(in srgb, var(--status-critical) 34%, transparent);
+}
+.pill-error::before {
+  content: "\2717";
+}
+
+.pill-blocked {
+  color: var(--status-serious);
+  background: color-mix(in srgb, var(--status-serious) 14%, transparent);
+  border-color: color-mix(in srgb, var(--status-serious) 38%, transparent);
+}
+.pill-blocked::before {
+  content: "\26D4";
+}
+
+.pill-pending {
+  color: var(--text-secondary);
+  background: var(--raised);
+  border-color: var(--border);
+}
+.pill-pending::before {
+  content: "\25CB";
+}
+
+.badge {
+  display: inline-block;
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--raised);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  margin-left: 6px;
+}
+
+/* ---------- Footer ---------- */
+
+.footer {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 8px 24px 32px;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  font-size: 12px;
+  color: var(--text-muted);
+  flex-wrap: wrap;
+}
+
+.footer code {
+  font-family: var(--mono);
+  font-size: 11px;
+}
+
+.conn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.conn::before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--text-muted);
+}
+
+.conn.is-live::before {
+  background: var(--status-good);
+}
+
+.conn.is-down::before {
+  background: var(--status-critical);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
+}
+
+/* =====================================================================
+   Visual layer
+   ---------------------------------------------------------------------
+   Colors still come only from the validated palette tokens above; what
+   follows adds depth, brand presence and trend context on top of them.
+   ===================================================================== */
+
+:root {
+  /* Tints derived from palette hues. Used for washes and accent bars only,
+     never as a series color, so nothing here competes with the data. */
+  --tint-blue: rgba(42, 120, 214, 0.08);
+  --tint-green: rgba(27, 175, 122, 0.08);
+  --tint-amber: rgba(250, 178, 25, 0.1);
+  --tint-red: rgba(208, 59, 59, 0.08);
+  --glow: rgba(42, 120, 214, 0.16);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --tint-blue: rgba(57, 135, 229, 0.14);
+    --tint-green: rgba(25, 158, 112, 0.14);
+    --tint-amber: rgba(250, 178, 25, 0.14);
+    --tint-red: rgba(208, 59, 59, 0.14);
+    --glow: rgba(57, 135, 229, 0.22);
+  }
+}
+
+:root[data-theme='dark'] {
+  --tint-blue: rgba(57, 135, 229, 0.14);
+  --tint-green: rgba(25, 158, 112, 0.14);
+  --tint-amber: rgba(250, 178, 25, 0.14);
+  --tint-red: rgba(208, 59, 59, 0.14);
+  --glow: rgba(57, 135, 229, 0.22);
+}
+
+/* Ambient background. Two very low-opacity radial washes give the page
+   depth without tinting any surface the data sits on. Fixed attachment so
+   it reads as a backdrop rather than scrolling wallpaper. */
+body {
+  background-image:
+    radial-gradient(900px 420px at 12% -8%, var(--tint-blue), transparent 62%),
+    radial-gradient(760px 380px at 92% 4%, var(--tint-green), transparent 58%);
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  letter-spacing: -0.006em;
+}
+
+/* ---------- brand ---------- */
+
+.brand-mark {
+  background: none;
+  border-radius: 0;
+  display: grid;
+  place-items: center;
+}
+
+.brand-mark img,
+.brand-mark svg {
+  width: 30px;
+  height: 30px;
+  display: block;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px -2px var(--glow);
+}
+
+.topbar {
+  /* Translucent bar over the ambient wash, so the backdrop shows through
+     as the content scrolls under it. */
+  background: color-mix(in srgb, var(--surface) 82%, transparent);
+  backdrop-filter: saturate(1.4) blur(10px);
+  -webkit-backdrop-filter: saturate(1.4) blur(10px);
+}
+
+/* ---------- hero ---------- */
+
+.hero {
+  position: relative;
+  overflow: hidden;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--series-1) 5%, var(--surface)), var(--surface));
+}
+
+/* A hairline of brand color along the top edge - enough to make the hero
+   read as the primary panel without adding a heavy colored block. */
+.hero::before {
+  content: '';
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--series-1), var(--series-3));
+}
+
+.hero-figure {
+  font-variant-numeric: proportional-nums;
+  background: linear-gradient(135deg, var(--text-primary), color-mix(in srgb, var(--series-1) 55%, var(--text-primary)));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.hero-spark {
+  flex: 1 1 260px;
+  min-width: 200px;
+  max-width: 420px;
+  height: 76px;
+  display: block;
+}
+
+/* ---------- stat tiles ---------- */
+
+.tile {
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.tile:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(11, 11, 11, 0.05), 0 14px 32px -14px rgba(11, 11, 11, 0.22);
+}
+
+/* Left accent bar: the one place each tile carries its own hue, so the four
+   read as distinct cards at a glance. Status hues stay reserved for status. */
+.tile::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--series-1);
+  opacity: 0.85;
+}
+
+.tile[data-accent='calls']::before { background: var(--series-1); }
+.tile[data-accent='sessions']::before { background: var(--series-3); }
+.tile[data-accent='errors']::before { background: var(--status-critical); }
+.tile[data-accent='blocked']::before { background: var(--status-serious); }
+
+.tile[data-accent='calls'] { background: linear-gradient(180deg, var(--tint-blue), transparent 42%), var(--surface); }
+.tile[data-accent='sessions'] { background: linear-gradient(180deg, var(--tint-green), transparent 42%), var(--surface); }
+.tile[data-accent='errors'] { background: linear-gradient(180deg, var(--tint-red), transparent 42%), var(--surface); }
+.tile[data-accent='blocked'] { background: linear-gradient(180deg, var(--tint-amber), transparent 42%), var(--surface); }
+
+.tile-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.tile-value {
+  font-variant-numeric: proportional-nums;
+}
+
+.tile-spark {
+  width: 100%;
+  height: 30px;
+  display: block;
+  margin-top: 10px;
+  opacity: 0.9;
+}
+
+/* Delta chip: direction is carried by an arrow glyph and the sign, not by
+   color alone - the same icon+label rule the status pills follow. */
+.delta[hidden] {
+  display: none;
+}
+
+.delta {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 11.5px;
+  font-weight: 600;
+  padding: 2px 7px;
+  border-radius: 999px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  background: var(--raised);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+}
+
+.delta-good {
+  color: var(--success-text);
+  background: color-mix(in srgb, var(--status-good) 12%, transparent);
+  border-color: color-mix(in srgb, var(--status-good) 30%, transparent);
+}
+
+.delta-bad {
+  color: var(--status-critical);
+  background: color-mix(in srgb, var(--status-critical) 12%, transparent);
+  border-color: color-mix(in srgb, var(--status-critical) 30%, transparent);
+}
+
+/* ---------- panels & tables ---------- */
+
+.panel {
+  transition: box-shadow 0.15s ease;
+}
+
+.panel:hover {
+  box-shadow: 0 2px 4px rgba(11, 11, 11, 0.05), 0 16px 36px -18px rgba(11, 11, 11, 0.2);
+}
+
+.panel-head {
+  background: linear-gradient(180deg, var(--raised), transparent);
+}
+
+thead th {
+  position: sticky;
+  top: 0;
+  background: color-mix(in srgb, var(--surface) 92%, transparent);
+  backdrop-filter: blur(6px);
+}
+
+tbody tr {
+  transition: background 0.1s ease;
+}
+
+/* A tool name reads better with its own weight than with a colored dot,
+   which would imply a series identity the table does not have. */
+tbody td:first-child {
+  font-weight: 500;
+}
+
+.pill {
+  letter-spacing: 0.01em;
+}
+
+.badge {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  letter-spacing: -0.01em;
+}
+
+/* ---------- chart ---------- */
+
+.chart-wrap {
+  background: linear-gradient(180deg, transparent, var(--raised));
+}
+
+.tooltip {
+  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.45);
+  font-weight: 500;
+}
+
+/* ---------- footer ---------- */
+
+.conn.is-live::before {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-good) 22%, transparent);
+}
+
+/* ---------- icons ---------- */
+
+/* Inline SVG icons inherit the text color of whatever they sit in, so they
+   never need a per-theme override and never carry a data color. */
+.i {
+  width: 14px;
+  height: 14px;
+  flex: none;
+  vertical-align: -2px;
+  margin-right: 7px;
+  color: var(--text-muted);
+}
+
+.panel-head h2 {
+  display: flex;
+  align-items: center;
+}
+
+.panel-head h2 .i {
+  width: 15px;
+  height: 15px;
+  color: var(--series-1);
+  opacity: 0.9;
+}
+
+.tile-label {
+  display: flex;
+  align-items: center;
+}
+
+/* The tile icon picks up its card's accent, which is what makes the four
+   tiles scannable by color+shape rather than by reading each label. */
+.tile[data-accent='calls'] .tile-label .i { color: var(--series-1); }
+.tile[data-accent='sessions'] .tile-label .i { color: var(--series-3); }
+.tile[data-accent='errors'] .tile-label .i { color: var(--status-critical); }
+.tile[data-accent='blocked'] .tile-label .i { color: var(--status-serious); }