@sethlivingston/cathode 0.1.0

package/dist/cathode.css

@@ -0,0 +1,1388 @@
+/*! cathode v0.1.0 — dark-only design system · github.com/sethlivingston/cathode · MIT (fonts: IBM Plex, OFL-1.1) */
+
+/* cathode/reset.css — minimal modern reset (subset of modern-normalize, MIT) */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  tab-size: 2;
+}
+
+body {
+  margin: 0;
+}
+
+b,
+strong {
+  font-weight: 600;
+}
+
+code,
+kbd,
+samp,
+pre {
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+table {
+  border-color: currentcolor;
+  border-collapse: collapse;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+  margin: 0;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+legend {
+  padding: 0;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+summary {
+  display: list-item;
+}
+
+img,
+svg,
+video,
+canvas {
+  display: block;
+  max-width: 100%;
+}
+
+/* cathode/fonts.css — self-hosted IBM Plex (OFL-1.1), latin subset */
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
+}
+
+/* cathode/tokens.css — design tokens. The single source of truth.
+   Rule for humans and agents alike: style with these variables, never raw values. */
+
+:root {
+  color-scheme: dark;
+
+  /* ── Surfaces ─────────────────────────────────────────────
+     Elevation is expressed by border brightness, not shadows.
+     bg-0 page · bg-1 card · bg-2 control resting · bg-3 hover fill */
+  --ct-bg-0: #0b0b10;
+  --ct-bg-1: #121219;
+  --ct-bg-2: #1a1a23;
+  --ct-bg-3: #23232e;
+
+  --ct-border: #28282f;
+  --ct-border-bright: #41414c;
+
+  /* ── Text ───────────────────────────────────────────────── */
+  --ct-text: #e9e9f1;
+  --ct-text-dim: #a2a2b3;
+  --ct-text-faint: #6a6a78;
+
+  /* ── Interactive accent — arcade magenta ────────────────── */
+  --ct-accent: #c95cf2;
+  --ct-accent-bright: #de8bff;
+  --ct-accent-glow: rgba(201, 92, 242, 0.4);
+  --ct-on-accent: #150420;
+
+  /* ── Arcade semantic palette ──────────────────────────────
+     Status hues — fixed meanings, do not repurpose: */
+  --ct-green: #4ae07a;  /* success / pass / online */
+  --ct-red: #ff5d5d;    /* danger / fail / destructive */
+  --ct-amber: #ffb454;  /* warning / pending */
+  --ct-cyan: #4dd8ff;   /* info / neutral-active */
+
+  /* Categorical hues — free for tagging/series, no fixed meaning: */
+  --ct-orange: #ff8d4d;
+  --ct-lime: #b5e853;
+  --ct-pink: #ff6fb0;
+  --ct-indigo: #8a93ff;
+
+  /* ── Typography ───────────────────────────────────────────
+     Sans for prose. Mono for data: IDs, counts, timestamps,
+     code, badges, table numerics. */
+  --ct-font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
+  --ct-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
+
+  --ct-text-xs: 0.75rem;     /* 12px — fine print, table headers */
+  --ct-text-sm: 0.8125rem;   /* 13px — mono data, badges, captions */
+  --ct-text-md: 0.9375rem;   /* 15px — body default */
+  --ct-text-lg: 1.0625rem;   /* 17px — emphasized body, h4 */
+  --ct-text-xl: 1.3125rem;   /* 21px — h3 */
+  --ct-text-2xl: 1.625rem;   /* 26px — h2 */
+  --ct-text-3xl: 2rem;       /* 32px — h1 */
+
+  --ct-leading: 1.55;
+  --ct-leading-tight: 1.25;
+  --ct-tracking-mono: 0.04em; /* uppercase mono labels */
+
+  /* ── Space — 4px grid. Compose only from these. ─────────── */
+  --ct-space-1: 4px;
+  --ct-space-2: 8px;
+  --ct-space-3: 12px;
+  --ct-space-4: 16px;
+  --ct-space-5: 24px;
+  --ct-space-6: 32px;
+  --ct-space-7: 48px;
+  --ct-space-8: 64px;
+
+  /* ── Shape ──────────────────────────────────────────────── */
+  --ct-radius: 2px;
+
+  /* ── Motion ─────────────────────────────────────────────── */
+  --ct-ease: cubic-bezier(0.2, 0, 0.2, 1);
+  --ct-quick: 120ms;
+  --ct-slow: 240ms;
+
+  /* ── Layers ─────────────────────────────────────────────── */
+  --ct-z-nav: 100;
+  --ct-z-modal: 200;
+  --ct-z-toast: 300;
+  --ct-z-tooltip: 400;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --ct-quick: 0ms;
+    --ct-slow: 0ms;
+  }
+}
+
+/* cathode/base.css — element defaults on the dark base */
+
+html {
+  background: var(--ct-bg-0);
+}
+
+body {
+  font-family: var(--ct-font-sans);
+  font-size: var(--ct-text-md);
+  line-height: var(--ct-leading);
+  color: var(--ct-text);
+  background: var(--ct-bg-0);
+  -webkit-font-smoothing: antialiased;
+}
+
+::selection {
+  background: var(--ct-accent);
+  color: var(--ct-on-accent);
+}
+
+/* Headings — tight, confident, no decoration */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0 0 var(--ct-space-3);
+  line-height: var(--ct-leading-tight);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+h1 { font-size: var(--ct-text-3xl); }
+h2 { font-size: var(--ct-text-2xl); }
+h3 { font-size: var(--ct-text-xl); }
+h4 { font-size: var(--ct-text-lg); }
+h5,
+h6 { font-size: var(--ct-text-md); }
+
+p {
+  margin: 0 0 var(--ct-space-3);
+}
+
+p:last-child {
+  margin-bottom: 0;
+}
+
+a {
+  color: var(--ct-accent);
+  text-decoration: none;
+  transition: color var(--ct-quick) var(--ct-ease);
+}
+
+a:hover {
+  color: var(--ct-accent-bright);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid var(--ct-border);
+  margin: var(--ct-space-5) 0;
+}
+
+ul,
+ol {
+  margin: 0 0 var(--ct-space-3);
+  padding-left: var(--ct-space-5);
+}
+
+blockquote {
+  margin: 0 0 var(--ct-space-3);
+  padding: var(--ct-space-2) var(--ct-space-4);
+  border-left: 2px solid var(--ct-accent);
+  color: var(--ct-text-dim);
+}
+
+/* Code & data — the mono wink */
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-sm);
+}
+
+code,
+samp {
+  background: var(--ct-bg-2);
+  border: 1px solid var(--ct-border);
+  border-radius: var(--ct-radius);
+  padding: 1px 5px;
+}
+
+pre {
+  background: var(--ct-bg-1);
+  border: 1px solid var(--ct-border);
+  border-radius: var(--ct-radius);
+  padding: var(--ct-space-4);
+  overflow-x: auto;
+  margin: 0 0 var(--ct-space-3);
+}
+
+pre code {
+  background: none;
+  border: 0;
+  padding: 0;
+}
+
+kbd {
+  background: var(--ct-bg-3);
+  border: 1px solid var(--ct-border-bright);
+  border-bottom-width: 2px;
+  border-radius: var(--ct-radius);
+  padding: 1px 6px;
+  font-size: var(--ct-text-xs);
+}
+
+/* .ct-data — apply to any inline run of IDs, counts, timestamps */
+.ct-data {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-sm);
+  font-variant-numeric: tabular-nums;
+}
+
+/* .ct-label-mono — uppercase mono micro-label (section headers, table heads) */
+.ct-label-mono {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-xs);
+  font-weight: 600;
+  letter-spacing: var(--ct-tracking-mono);
+  text-transform: uppercase;
+  color: var(--ct-text-faint);
+}
+
+/* Muted text helpers */
+.ct-dim { color: var(--ct-text-dim); }
+.ct-faint { color: var(--ct-text-faint); }
+
+/* Focus — one ring to rule them all */
+:focus-visible {
+  outline: 2px solid var(--ct-accent-glow);
+  outline-offset: 1px;
+}
+
+/* Scrollbars — quiet, square */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--ct-border-bright) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--ct-border-bright);
+  border: 2px solid var(--ct-bg-0);
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* cathode/layout.css — app shell and composition helpers */
+
+/* App shell: navbar on top, sidebar + main below
+   <body class="ct-shell">
+     <nav class="ct-navbar">…</nav>
+     <aside class="ct-sidebar">…</aside>
+     <main class="ct-main">…</main>
+   </body> */
+.ct-shell {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    "nav nav"
+    "side main";
+  min-height: 100vh;
+}
+
+.ct-shell > .ct-navbar { grid-area: nav; }
+.ct-shell > .ct-sidebar { grid-area: side; }
+.ct-shell > .ct-main { grid-area: main; }
+
+.ct-main {
+  padding: var(--ct-space-5);
+  overflow-y: auto;
+  min-width: 0;
+}
+
+/* Centered content page (docs, marketing, settings) */
+.ct-container {
+  width: min(720px, 100% - var(--ct-space-6));
+  margin-inline: auto;
+}
+
+.ct-container--wide {
+  width: min(1100px, 100% - var(--ct-space-6));
+}
+
+/* Vertical rhythm */
+.ct-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ct-space-4);
+}
+
+.ct-stack--tight { gap: var(--ct-space-2); }
+.ct-stack--loose { gap: var(--ct-space-6); }
+
+/* Horizontal cluster, wraps */
+.ct-cluster {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ct-space-2);
+}
+
+/* Responsive card grid */
+.ct-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: var(--ct-space-4);
+}
+
+/* Mobile: sidebar collapses under navbar */
+@media (max-width: 720px) {
+  .ct-shell {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "nav"
+      "main";
+  }
+
+  .ct-shell > .ct-sidebar {
+    display: none;
+  }
+}
+
+/* cathode/button.css */
+
+.ct-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ct-space-2);
+  font-family: var(--ct-font-sans);
+  font-size: var(--ct-text-md);
+  font-weight: 500;
+  line-height: 1;
+  color: var(--ct-text);
+  background: var(--ct-bg-2);
+  border: 1px solid var(--ct-border);
+  border-radius: var(--ct-radius);
+  padding: var(--ct-space-2) var(--ct-space-4);
+  min-height: 36px;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  transition:
+    border-color var(--ct-quick) var(--ct-ease),
+    background var(--ct-quick) var(--ct-ease),
+    color var(--ct-quick) var(--ct-ease);
+}
+
+.ct-button:hover {
+  border-color: var(--ct-border-bright);
+  background: var(--ct-bg-3);
+}
+
+.ct-button:active {
+  transform: translateY(1px);
+}
+
+.ct-button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Primary — the one magenta action per view */
+.ct-button--primary {
+  background: var(--ct-accent);
+  border-color: var(--ct-accent);
+  color: var(--ct-on-accent);
+  font-weight: 600;
+}
+
+.ct-button--primary:hover {
+  background: var(--ct-accent-bright);
+  border-color: var(--ct-accent-bright);
+}
+
+/* Danger — destructive actions only */
+.ct-button--danger {
+  color: var(--ct-red);
+  border-color: color-mix(in srgb, var(--ct-red) 40%, transparent);
+}
+
+.ct-button--danger:hover {
+  background: color-mix(in srgb, var(--ct-red) 12%, transparent);
+  border-color: var(--ct-red);
+}
+
+/* Ghost — toolbar/inline actions, no box until hover */
+.ct-button--ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--ct-text-dim);
+}
+
+.ct-button--ghost:hover {
+  background: var(--ct-bg-2);
+  border-color: var(--ct-border);
+  color: var(--ct-text);
+}
+
+/* Sizes */
+.ct-button--sm {
+  font-size: var(--ct-text-sm);
+  padding: var(--ct-space-1) var(--ct-space-3);
+  min-height: 28px;
+}
+
+.ct-button--lg {
+  font-size: var(--ct-text-lg);
+  padding: var(--ct-space-3) var(--ct-space-5);
+  min-height: 44px;
+}
+
+/* Icon-only — square */
+.ct-button--icon {
+  padding: var(--ct-space-2);
+  width: 36px;
+}
+
+.ct-button--icon.ct-button--sm {
+  width: 28px;
+  padding: var(--ct-space-1);
+}
+
+/* Button row */
+.ct-button-group {
+  display: inline-flex;
+  gap: var(--ct-space-2);
+}
+
+/* cathode/forms.css — fields, inputs, selects, checks, switch */
+
+.ct-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ct-space-2);
+  margin-bottom: var(--ct-space-4);
+}
+
+.ct-label {
+  font-size: var(--ct-text-sm);
+  font-weight: 500;
+  color: var(--ct-text-dim);
+}
+
+.ct-label--required::after {
+  content: " *";
+  color: var(--ct-red);
+}
+
+.ct-input,
+.ct-select,
+.ct-textarea {
+  font-family: var(--ct-font-sans);
+  font-size: var(--ct-text-md);
+  color: var(--ct-text);
+  background: var(--ct-bg-1);
+  border: 1px solid var(--ct-border);
+  border-radius: var(--ct-radius);
+  padding: var(--ct-space-2) var(--ct-space-3);
+  min-height: 36px;
+  width: 100%;
+  transition: border-color var(--ct-quick) var(--ct-ease);
+}
+
+.ct-input:hover,
+.ct-select:hover,
+.ct-textarea:hover {
+  border-color: var(--ct-border-bright);
+}
+
+.ct-input:focus,
+.ct-select:focus,
+.ct-textarea:focus {
+  outline: none;
+  border-color: var(--ct-accent);
+  box-shadow: 0 0 0 2px var(--ct-accent-glow);
+}
+
+.ct-input::placeholder,
+.ct-textarea::placeholder {
+  color: var(--ct-text-faint);
+}
+
+/* Mono input — for IDs, tokens, code-like values */
+.ct-input--mono {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-sm);
+}
+
+.ct-textarea {
+  min-height: 96px;
+  resize: vertical;
+  line-height: var(--ct-leading);
+}
+
+.ct-select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23a2a2b3' stroke-width='1.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--ct-space-3) center;
+  padding-right: var(--ct-space-6);
+  cursor: pointer;
+}
+
+/* Validation */
+.ct-input[aria-invalid="true"],
+.ct-select[aria-invalid="true"],
+.ct-textarea[aria-invalid="true"] {
+  border-color: var(--ct-red);
+}
+
+.ct-input[aria-invalid="true"]:focus,
+.ct-textarea[aria-invalid="true"]:focus {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ct-red) 40%, transparent);
+}
+
+.ct-help {
+  font-size: var(--ct-text-sm);
+  color: var(--ct-text-faint);
+}
+
+.ct-error {
+  font-size: var(--ct-text-sm);
+  color: var(--ct-red);
+}
+
+/* Checkbox & radio — square pixels, round dots */
+.ct-check,
+.ct-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ct-space-2);
+  font-size: var(--ct-text-md);
+  cursor: pointer;
+  user-select: none;
+}
+
+.ct-check input,
+.ct-radio input {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  background: var(--ct-bg-1);
+  border: 1px solid var(--ct-border-bright);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition:
+    background var(--ct-quick) var(--ct-ease),
+    border-color var(--ct-quick) var(--ct-ease);
+}
+
+.ct-check input {
+  border-radius: var(--ct-radius);
+}
+
+.ct-radio input {
+  border-radius: 50%;
+}
+
+.ct-check input:checked,
+.ct-radio input:checked {
+  background: var(--ct-accent);
+  border-color: var(--ct-accent);
+}
+
+.ct-check input:checked {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.5l2.5 2.5 4.5-5.5' fill='none' stroke='%23150420' stroke-width='2'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.ct-radio input:checked {
+  box-shadow: inset 0 0 0 3px var(--ct-bg-1);
+}
+
+/* Switch */
+.ct-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ct-space-2);
+  font-size: var(--ct-text-md);
+  cursor: pointer;
+  user-select: none;
+}
+
+.ct-switch input {
+  appearance: none;
+  width: 32px;
+  height: 18px;
+  margin: 0;
+  background: var(--ct-bg-3);
+  border: 1px solid var(--ct-border-bright);
+  border-radius: var(--ct-radius);
+  position: relative;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background var(--ct-quick) var(--ct-ease);
+}
+
+.ct-switch input::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 12px;
+  height: 12px;
+  background: var(--ct-text-dim);
+  border-radius: var(--ct-radius);
+  transition:
+    translate var(--ct-quick) var(--ct-ease),
+    background var(--ct-quick) var(--ct-ease);
+}
+
+.ct-switch input:checked {
+  background: var(--ct-accent);
+  border-color: var(--ct-accent);
+}
+
+.ct-switch input:checked::before {
+  translate: 14px 0;
+  background: var(--ct-on-accent);
+}
+
+/* Inline form row */
+.ct-form-row {
+  display: flex;
+  gap: var(--ct-space-3);
+  align-items: flex-end;
+}
+
+.ct-form-row .ct-field {
+  flex: 1;
+  margin-bottom: 0;
+}
+
+/* cathode/badge.css — the arcade tag. Always mono, always meaningful.
+   Status variants have fixed meanings; categorical variants are free.
+   Custom hue: <span class="ct-badge" style="--badge-hue: var(--ct-pink)"> */
+
+.ct-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ct-space-1);
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-xs);
+  font-weight: 600;
+  letter-spacing: var(--ct-tracking-mono);
+  text-transform: uppercase;
+  line-height: 1;
+  border-radius: var(--ct-radius);
+  padding: 3px var(--ct-space-2);
+  --badge-hue: var(--ct-text-dim);
+  color: var(--badge-hue);
+  background: color-mix(in srgb, var(--badge-hue) 13%, transparent);
+  border: 1px solid color-mix(in srgb, var(--badge-hue) 35%, transparent);
+  white-space: nowrap;
+}
+
+/* Status — fixed meanings */
+.ct-badge--success { --badge-hue: var(--ct-green); }
+.ct-badge--danger  { --badge-hue: var(--ct-red); }
+.ct-badge--warning { --badge-hue: var(--ct-amber); }
+.ct-badge--info    { --badge-hue: var(--ct-cyan); }
+.ct-badge--accent  { --badge-hue: var(--ct-accent); }
+
+/* Categorical — free for tags/series */
+.ct-badge--orange  { --badge-hue: var(--ct-orange); }
+.ct-badge--lime    { --badge-hue: var(--ct-lime); }
+.ct-badge--pink    { --badge-hue: var(--ct-pink); }
+.ct-badge--indigo  { --badge-hue: var(--ct-indigo); }
+
+/* Solid variant — louder, for counts and hero stats */
+.ct-badge--solid {
+  color: var(--ct-bg-0);
+  background: var(--badge-hue);
+  border-color: var(--badge-hue);
+}
+
+/* Status dot — minimal presence indicator */
+.ct-dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  --dot-hue: var(--ct-text-faint);
+  background: var(--dot-hue);
+  box-shadow: 0 0 6px color-mix(in srgb, var(--dot-hue) 60%, transparent);
+}
+
+.ct-dot--success { --dot-hue: var(--ct-green); }
+.ct-dot--danger  { --dot-hue: var(--ct-red); }
+.ct-dot--warning { --dot-hue: var(--ct-amber); }
+.ct-dot--info    { --dot-hue: var(--ct-cyan); }
+.ct-dot--accent  { --dot-hue: var(--ct-accent); }
+
+/* cathode/card.css — the 1px-ruled box. Elevation = border brightness. */
+
+.ct-card {
+  background: var(--ct-bg-1);
+  border: 1px solid var(--ct-border);
+  border-radius: var(--ct-radius);
+}
+
+.ct-card--interactive {
+  cursor: pointer;
+  transition: border-color var(--ct-quick) var(--ct-ease);
+}
+
+.ct-card--interactive:hover {
+  border-color: var(--ct-border-bright);
+}
+
+.ct-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ct-space-3);
+  padding: var(--ct-space-3) var(--ct-space-4);
+  border-bottom: 1px solid var(--ct-border);
+}
+
+.ct-card__title {
+  font-size: var(--ct-text-md);
+  font-weight: 600;
+  margin: 0;
+}
+
+.ct-card__body {
+  padding: var(--ct-space-4);
+}
+
+.ct-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--ct-space-2);
+  padding: var(--ct-space-3) var(--ct-space-4);
+  border-top: 1px solid var(--ct-border);
+}
+
+/* Stat card — hero number in mono */
+.ct-stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ct-space-1);
+  padding: var(--ct-space-4);
+}
+
+.ct-stat__value {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-2xl);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: var(--ct-leading-tight);
+}
+
+.ct-stat__delta {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-sm);
+}
+
+.ct-stat__delta--up { color: var(--ct-green); }
+.ct-stat__delta--down { color: var(--ct-red); }
+
+/* cathode/table.css — data tables. Numerics get .ct-num (mono, right-aligned). */
+
+.ct-table {
+  width: 100%;
+  font-size: var(--ct-text-md);
+  border: 1px solid var(--ct-border);
+  border-radius: var(--ct-radius);
+}
+
+.ct-table th {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-xs);
+  font-weight: 600;
+  letter-spacing: var(--ct-tracking-mono);
+  text-transform: uppercase;
+  color: var(--ct-text-faint);
+  text-align: left;
+  padding: var(--ct-space-2) var(--ct-space-3);
+  border-bottom: 1px solid var(--ct-border);
+  background: var(--ct-bg-1);
+}
+
+.ct-table td {
+  padding: var(--ct-space-2) var(--ct-space-3);
+  border-bottom: 1px solid var(--ct-border);
+}
+
+.ct-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.ct-table tbody tr {
+  transition: background var(--ct-quick) var(--ct-ease);
+}
+
+.ct-table tbody tr:hover {
+  background: var(--ct-bg-1);
+}
+
+.ct-table tbody tr[aria-selected="true"] {
+  background: color-mix(in srgb, var(--ct-accent) 8%, transparent);
+}
+
+/* Numeric/data cells */
+.ct-table .ct-num,
+.ct-table th.ct-num {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-sm);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+/* Compact variant for dense dashboards */
+.ct-table--compact th,
+.ct-table--compact td {
+  padding: var(--ct-space-1) var(--ct-space-2);
+}
+
+/* cathode/nav.css — navbar, sidebar, tabs, breadcrumb */
+
+/* Top navbar */
+.ct-navbar {
+  display: flex;
+  align-items: center;
+  gap: var(--ct-space-4);
+  padding: 0 var(--ct-space-4);
+  height: 52px;
+  background: var(--ct-bg-1);
+  border-bottom: 1px solid var(--ct-border);
+  position: sticky;
+  top: 0;
+  z-index: var(--ct-z-nav);
+}
+
+.ct-navbar__brand {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-md);
+  font-weight: 600;
+  letter-spacing: var(--ct-tracking-mono);
+  text-transform: uppercase;
+  color: var(--ct-text);
+}
+
+.ct-navbar__spacer {
+  flex: 1;
+}
+
+/* Sidebar */
+.ct-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ct-space-1);
+  width: 220px;
+  padding: var(--ct-space-3);
+  background: var(--ct-bg-1);
+  border-right: 1px solid var(--ct-border);
+  overflow-y: auto;
+}
+
+.ct-sidebar__section {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-xs);
+  font-weight: 600;
+  letter-spacing: var(--ct-tracking-mono);
+  text-transform: uppercase;
+  color: var(--ct-text-faint);
+  padding: var(--ct-space-3) var(--ct-space-2) var(--ct-space-1);
+}
+
+.ct-nav-item {
+  display: flex;
+  align-items: center;
+  gap: var(--ct-space-2);
+  font-size: var(--ct-text-md);
+  color: var(--ct-text-dim);
+  padding: var(--ct-space-2) var(--ct-space-3);
+  border: 1px solid transparent;
+  border-radius: var(--ct-radius);
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    color var(--ct-quick) var(--ct-ease),
+    background var(--ct-quick) var(--ct-ease);
+}
+
+.ct-nav-item:hover {
+  color: var(--ct-text);
+  background: var(--ct-bg-2);
+  text-decoration: none;
+}
+
+.ct-nav-item[aria-current="page"],
+.ct-nav-item--active {
+  color: var(--ct-text);
+  background: var(--ct-bg-2);
+  border-color: var(--ct-border);
+}
+
+.ct-nav-item[aria-current="page"]::before,
+.ct-nav-item--active::before {
+  content: "";
+  width: 2px;
+  align-self: stretch;
+  margin: 2px 0;
+  background: var(--ct-accent);
+}
+
+/* Tabs */
+.ct-tabs {
+  display: flex;
+  gap: var(--ct-space-1);
+  border-bottom: 1px solid var(--ct-border);
+}
+
+.ct-tab {
+  font-family: var(--ct-font-sans);
+  font-size: var(--ct-text-md);
+  font-weight: 500;
+  color: var(--ct-text-dim);
+  background: none;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  padding: var(--ct-space-2) var(--ct-space-3);
+  margin-bottom: -1px;
+  cursor: pointer;
+  transition: color var(--ct-quick) var(--ct-ease);
+}
+
+.ct-tab:hover {
+  color: var(--ct-text);
+}
+
+.ct-tab[aria-selected="true"],
+.ct-tab--active {
+  color: var(--ct-text);
+  border-bottom-color: var(--ct-accent);
+}
+
+/* Breadcrumb — mono path, like a filesystem */
+.ct-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: var(--ct-space-2);
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-sm);
+  color: var(--ct-text-faint);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ct-breadcrumb li {
+  display: flex;
+  align-items: center;
+  gap: var(--ct-space-2);
+}
+
+.ct-breadcrumb li + li::before {
+  content: "/";
+  color: var(--ct-text-faint);
+}
+
+.ct-breadcrumb a {
+  color: var(--ct-text-dim);
+}
+
+.ct-breadcrumb li:last-child {
+  color: var(--ct-text);
+}
+
+/* cathode/overlay.css — modal (native <dialog>), toast, tooltip */
+
+/* Modal — use <dialog class="ct-modal"> with .showModal() */
+.ct-modal {
+  background: var(--ct-bg-1);
+  color: var(--ct-text);
+  border: 1px solid var(--ct-border-bright);
+  border-radius: var(--ct-radius);
+  padding: 0;
+  width: min(480px, calc(100vw - var(--ct-space-6)));
+  max-height: calc(100vh - var(--ct-space-8));
+}
+
+.ct-modal::backdrop {
+  background: rgba(5, 5, 8, 0.7);
+}
+
+.ct-modal[open] {
+  animation: ct-modal-in var(--ct-slow) var(--ct-ease);
+}
+
+@keyframes ct-modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+.ct-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--ct-space-4);
+  border-bottom: 1px solid var(--ct-border);
+}
+
+.ct-modal__title {
+  font-size: var(--ct-text-lg);
+  font-weight: 600;
+  margin: 0;
+}
+
+.ct-modal__body {
+  padding: var(--ct-space-4);
+  overflow-y: auto;
+}
+
+.ct-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--ct-space-2);
+  padding: var(--ct-space-4);
+  border-top: 1px solid var(--ct-border);
+}
+
+/* Toasts — fixed stack, bottom right */
+.ct-toasts {
+  position: fixed;
+  bottom: var(--ct-space-4);
+  right: var(--ct-space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ct-space-2);
+  z-index: var(--ct-z-toast);
+}
+
+.ct-toast {
+  display: flex;
+  align-items: center;
+  gap: var(--ct-space-3);
+  background: var(--ct-bg-2);
+  border: 1px solid var(--ct-border-bright);
+  border-left: 2px solid var(--toast-hue, var(--ct-border-bright));
+  border-radius: var(--ct-radius);
+  padding: var(--ct-space-3) var(--ct-space-4);
+  min-width: 280px;
+  max-width: 400px;
+  font-size: var(--ct-text-md);
+  animation: ct-toast-in var(--ct-slow) var(--ct-ease);
+}
+
+@keyframes ct-toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+}
+
+.ct-toast--success { --toast-hue: var(--ct-green); }
+.ct-toast--danger  { --toast-hue: var(--ct-red); }
+.ct-toast--warning { --toast-hue: var(--ct-amber); }
+.ct-toast--info    { --toast-hue: var(--ct-cyan); }
+
+.ct-toast__title {
+  font-weight: 600;
+}
+
+/* Tooltip — CSS-only: <button data-ct-tip="Copied!"> */
+[data-ct-tip] {
+  position: relative;
+}
+
+[data-ct-tip]::after {
+  content: attr(data-ct-tip);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--ct-bg-3);
+  color: var(--ct-text);
+  border: 1px solid var(--ct-border-bright);
+  border-radius: var(--ct-radius);
+  padding: var(--ct-space-1) var(--ct-space-2);
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-xs);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--ct-quick) var(--ct-ease);
+  z-index: var(--ct-z-tooltip);
+}
+
+[data-ct-tip]:hover::after,
+[data-ct-tip]:focus-visible::after {
+  opacity: 1;
+}
+
+/* cathode/feedback.css — progress, meter, spinner, empty state, alert */
+
+/* Progress bar — smooth fill. Set width on the fill span. */
+.ct-progress {
+  height: 6px;
+  background: var(--ct-bg-3);
+  border: 1px solid var(--ct-border);
+  border-radius: var(--ct-radius);
+  overflow: hidden;
+}
+
+.ct-progress__fill {
+  display: block;
+  height: 100%;
+  background: var(--progress-hue, var(--ct-accent));
+  transition: width var(--ct-slow) var(--ct-ease);
+}
+
+.ct-progress--success { --progress-hue: var(--ct-green); }
+.ct-progress--danger  { --progress-hue: var(--ct-red); }
+.ct-progress--warning { --progress-hue: var(--ct-amber); }
+
+/* Meter — the cell variant. Visible segments, the one louder wink. */
+.ct-meter {
+  height: 10px;
+  background: var(--ct-bg-3);
+  border: 1px solid var(--ct-border);
+  border-radius: var(--ct-radius);
+  overflow: hidden;
+}
+
+.ct-meter__fill {
+  display: block;
+  height: 100%;
+  background: var(--progress-hue, var(--ct-accent));
+  -webkit-mask: repeating-linear-gradient(
+    to right,
+    #000 0 6px,
+    transparent 6px 8px
+  );
+  mask: repeating-linear-gradient(to right, #000 0 6px, transparent 6px 8px);
+  transition: width var(--ct-slow) var(--ct-ease);
+}
+
+/* Spinner — a rotating square, naturally */
+.ct-spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--ct-border-bright);
+  border-top-color: var(--ct-accent);
+  border-radius: var(--ct-radius);
+  animation: ct-spin 0.7s linear infinite;
+}
+
+@keyframes ct-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Empty state */
+.ct-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ct-space-2);
+  padding: var(--ct-space-7) var(--ct-space-4);
+  text-align: center;
+  border: 1px dashed var(--ct-border-bright);
+  border-radius: var(--ct-radius);
+  color: var(--ct-text-dim);
+}
+
+.ct-empty__glyph {
+  font-family: var(--ct-font-mono);
+  font-size: var(--ct-text-2xl);
+  color: var(--ct-text-faint);
+  line-height: 1;
+}
+
+.ct-empty__title {
+  font-weight: 600;
+  color: var(--ct-text);
+}
+
+.ct-empty__hint {
+  font-size: var(--ct-text-sm);
+  color: var(--ct-text-faint);
+  max-width: 360px;
+}
+
+/* Alert — inline callout */
+.ct-alert {
+  display: flex;
+  gap: var(--ct-space-3);
+  padding: var(--ct-space-3) var(--ct-space-4);
+  font-size: var(--ct-text-md);
+  border: 1px solid color-mix(in srgb, var(--alert-hue, var(--ct-cyan)) 35%, transparent);
+  border-left-width: 2px;
+  border-left-color: var(--alert-hue, var(--ct-cyan));
+  border-radius: var(--ct-radius);
+  background: color-mix(in srgb, var(--alert-hue, var(--ct-cyan)) 7%, transparent);
+}
+
+.ct-alert--success { --alert-hue: var(--ct-green); }
+.ct-alert--danger  { --alert-hue: var(--ct-red); }
+.ct-alert--warning { --alert-hue: var(--ct-amber); }
+.ct-alert--info    { --alert-hue: var(--ct-cyan); }
+
+.ct-alert__title {
+  font-weight: 600;
+  margin: 0 0 var(--ct-space-1);
+}