/* LedgerWorks Design System v1.0.0 — DB-generated */
:root {
  --border-radius-lg: 8px;
  --border-radius-md: 4px;
  --border-radius-sm: 2px;
  --color-accent-link: #58A6FF;
  --color-accent-primary: #FF8844;
  --color-bg-card: #0A0A0A;
  --color-bg-hover: #1A1A2A;
  --color-bg-primary: #0B0F14;
  --color-bg-secondary: #11161C;
  --color-bg-tertiary: #1A1F28;
  --color-border-focus: #FF8844;
  --color-border-primary: #222222;
  --color-border-subtle: #111111;
  --color-ribbon-bg: #1A0F0F;
  --color-ribbon-border: #2A1A1A;
  --color-ribbon-text: #FF8844;
  --color-status-fail: #FF4444;
  --color-status-idle: #555555;
  --color-status-info: #44AAFF;
  --color-status-success: #66FF88;
  --color-status-warning: #FFAA44;
  --color-text-dim: #555555;
  --color-text-muted: #8B949E;
  --color-text-primary: #E6EDF3;
  --color-text-secondary: #AAAAAA;
  --component-badge-fail-bg: #3a1a1a;
  --component-badge-fail-color: #ff4444;
  --component-badge-ok-bg: #1a3a1a;
  --component-badge-ok-color: #44ff44;
  --component-badge-padding: 2px 8px;
  --component-badge-radius: 3px;
  --component-badge-warn-bg: #3a2a1a;
  --component-badge-warn-color: #ffaa44;
  --component-bar-bg: #1a1a1a;
  --component-bar-danger: #ff4444;
  --component-bar-ok: #44cc88;
  --component-bar-warn: #ffaa44;
  --component-card-bg: #0a1a0a;
  --component-card-border: 1px solid #1a3a1a;
  --component-card-heading-color: #88cc88;
  --component-card-heading-size: 14px;
  --component-card-padding: 16px;
  --component-card-radius: 6px;
  --component-graph-bg: #000;
  --component-graph-border: 1px solid #1a3a1a;
  --component-metric-label-color: #888;
  --component-metric-label-size: 11px;
  --component-metric-value-color: #fff;
  --component-metric-value-size: 24px;
  --component-mode-controlled: #ffaa44;
  --component-mode-full: #44ff44;
  --component-mode-shadow: #888;
  --component-status-defined: #888;
  --component-status-executed: #88ccff;
  --component-status-rejected: #ff4444;
  --component-status-simulated: #ffaa44;
  --component-status-validated: #44ff44;
  --component-table-cell-padding: 6px 8px;
  --component-table-header-border: 1px solid #333;
  --component-table-header-color: #888;
  --component-table-row-border: 1px solid #1a1a1a;
  --component-table-size: 13px;
  --font-family-base: Inter, system-ui, -apple-system, sans-serif;
  --font-family-mono: JetBrains Mono, Consolas, monospace;
  --font-size-base: 14px;
  --font-size-heading: 15px;
  --font-size-lg: 16px;
  --font-size-sm: 11px;
  --font-size-xl: 20px;
  --font-size-xs: 10px;
  --font-weight-bold: 600;
  --font-weight-normal: 400;
  --layout-content-maxwidth: 1400px;
  --layout-grid-gap: 12px;
  --layout-nav-height: 28px;
  --layout-ribbon-height: 28px;
  --spacing-lg: 20px;
  --spacing-md: 12px;
  --spacing-sm: 6px;
  --spacing-xl: 32px;
  --spacing-xs: 4px;
  --zindex-modal: 10000;
  --zindex-ribbon: 9999;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: 1.5;
}
a { color: var(--color-accent-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-primary);
}
header h1 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
header h1 a { color: var(--color-accent-primary); }
header .actor { font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: var(--font-family-mono); }

/* Nav */
nav {
  display: flex; gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-primary);
  flex-wrap: wrap;
}
nav a {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  text-decoration: none;
}
nav a.active { background: var(--color-bg-hover); color: var(--color-text-primary); }
nav a:hover { background: var(--color-bg-hover); text-decoration: none; }

/* Main */
main { padding: var(--spacing-lg); max-width: var(--layout-content-maxwidth); }

/* Health ribbon */
.health-ribbon {
  position: fixed; top: 0; left: 0; width: 100%; height: var(--layout-ribbon-height);
  display: flex; align-items: center; padding: 0 var(--spacing-md);
  font-size: var(--font-size-xs); font-family: var(--font-family-mono);
  z-index: var(--zindex-ribbon);
  background: var(--color-ribbon-bg);
  border-bottom: 1px solid var(--color-ribbon-border);
  color: var(--color-ribbon-text);
}
.health-ribbon .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-ribbon-text); margin-right: 8px;
}

/* Cards */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md);
}
.card h2 {
  font-size: var(--font-size-heading); color: var(--color-accent-primary);
  border-bottom: 1px solid var(--color-border-primary);
  padding-bottom: var(--spacing-sm); margin-bottom: var(--spacing-md);
}

/* Tables */
table.data { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
table.data th {
  text-align: left; color: var(--color-text-muted); padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 1px solid var(--color-border-primary);
  font-weight: var(--font-weight-normal); text-transform: uppercase; font-size: var(--font-size-xs);
}
table.data td {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
}

/* Grid */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-grid-gap); margin-top: var(--spacing-md); }
.grid-full { grid-column: span 2; }

/* Summary bar */
.summary-bar {
  display: flex; gap: var(--spacing-lg); padding: var(--spacing-md) 0;
  font-size: var(--font-size-sm); color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-primary); margin-bottom: var(--spacing-md);
}
.summary-bar .val { color: var(--color-accent-primary); font-weight: var(--font-weight-bold); }

/* Status colors */
.status-ok, .status-pass, .status-success { color: var(--color-status-success); }
.status-fail, .status-error, .status-red { color: var(--color-status-fail); }
.status-warning, .status-degraded { color: var(--color-status-warning); }
.status-info { color: var(--color-status-info); }
.status-idle, .status-muted { color: var(--color-status-idle); }

/* Buttons */
.btn {
  padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-xs);
  cursor: pointer; background: var(--color-bg-hover); color: var(--color-text-muted);
  border: 1px solid var(--color-border-primary); border-radius: var(--border-radius-sm);
}
.btn:hover { color: var(--color-text-primary); }

/* Banner */
.banner {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm); font-family: var(--font-family-mono);
  border-radius: var(--border-radius-md); margin-bottom: var(--spacing-sm);
}
.banner-warning { background: #2a2a0f; border: 1px solid var(--color-status-warning); color: var(--color-status-warning); }
.banner-error { background: #2a0f0f; border: 1px solid var(--color-status-fail); color: var(--color-status-fail); }

/* VCard (used across bio, mesh, federation, etc.) */
.vcard {
  background: var(--component-card-bg, #0a1a0a);
  border: var(--component-card-border, 1px solid #1a3a1a);
  border-radius: var(--component-card-radius, 6px);
  padding: var(--component-card-padding, 16px);
  margin: var(--spacing-md) 0;
}
.vcard h3 {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--component-card-heading-color, #88cc88);
  font-size: var(--component-card-heading-size, 14px);
  text-transform: uppercase; letter-spacing: 1px;
}

/* Metric display */
.metric { display: inline-block; margin-right: var(--spacing-lg); }
.metric .val { font-size: var(--component-metric-value-size, 24px); font-weight: var(--font-weight-bold); color: var(--component-metric-value-color, #fff); }
.metric .lbl { font-size: var(--component-metric-label-size, 11px); color: var(--component-metric-label-color, #888); text-transform: uppercase; }

/* Generic table (pages using raw table without .data class) */
table:not(.data) { width: 100%; border-collapse: collapse; font-size: var(--component-table-size, 13px); }
table:not(.data) th {
  text-align: left; color: var(--component-table-header-color, #888);
  border-bottom: var(--component-table-header-border, 1px solid #333);
  padding: var(--component-table-cell-padding, 6px 8px);
  font-size: var(--font-size-xs); text-transform: uppercase;
}
table:not(.data) td {
  padding: var(--component-table-cell-padding, 6px 8px);
  border-bottom: var(--component-table-row-border, 1px solid #1a1a1a);
}

/* Badge system */
.badge { display: inline-block; padding: var(--component-badge-padding, 2px 8px); border-radius: var(--component-badge-radius, 3px); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }
.badge-ok, .badge-normal { background: var(--component-badge-ok-bg, #1a3a1a); color: var(--component-badge-ok-color, #44ff44); }
.badge-warn, .badge-warning { background: var(--component-badge-warn-bg, #3a2a1a); color: var(--component-badge-warn-color, #ffaa44); }
.badge-fail, .badge-critical { background: var(--component-badge-fail-bg, #3a1a1a); color: var(--component-badge-fail-color, #ff4444); }
.badge-halted { background: #3a1a2a; color: #ff44aa; }

/* Status line colors (bio + others) */
.s-defined { color: var(--component-status-defined, #888); }
.s-simulated { color: var(--component-status-simulated, #ffaa44); }
.s-validated { color: var(--component-status-validated, #44ff44); }
.s-rejected { color: var(--component-status-rejected, #ff4444); }
.s-executed { color: var(--component-status-executed, #88ccff); }

/* Mode colors */
.mode-shadow { color: var(--component-mode-shadow, #888); }
.mode-controlled { color: var(--component-mode-controlled, #ffaa44); }
.mode-full { color: var(--component-mode-full, #44ff44); }

/* Bar system */
.bar-bg { display: inline-block; width: 120px; height: 10px; background: var(--component-bar-bg, #1a1a1a); border-radius: 3px; overflow: hidden; vertical-align: middle; }
.bar-fill { height: 100%; border-radius: 3px; }
.bar-ok { background: var(--component-bar-ok, #44cc88); }
.bar-warn { background: var(--component-bar-warn, #ffaa44); }
.bar-danger { background: var(--component-bar-danger, #ff4444); }

/* Graph placeholder */
.graph-placeholder {
  width: 100%; height: 240px;
  background: var(--component-graph-bg, #000);
  border: var(--component-graph-border, 1px solid #1a3a1a);
  border-radius: var(--border-radius-md, 4px);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-dim); font-size: var(--font-size-sm); font-family: var(--font-family-mono);
}

/* Weight bar */
.weight-bar { display: inline-block; height: 8px; background: var(--component-bar-ok, #44cc88); border-radius: 2px; }