:root {
  /* Ember identity — smouldering coal, contained glow */
  --bg: #0a0806;              /* warm near-black */
  --surface: #14100d;          /* warm charcoal */
  --surface-alt: #1a1512;      /* card surface */
  --border: #2a1f17;           /* warm dark border */
  --border-bright: #3a2d22;    /* hover/active border */

  --text: #e7e1dd;             /* warm off-white (ash) */
  --text-dim: #8a7f77;         /* muted warm */
  --text-faint: #4a423d;       /* warm faint */

  --accent: #e8633a;           /* ember glow (primary accent) */
  --accent-dim: #b8502d;       /* coal-red (secondary) */
  --accent-faint: rgba(232, 99, 58, 0.06);  /* subtle surface wash */

  --warm: #fbbf24;             /* amber spark (rare highlight) */
  --green: #4ade80;            /* health: viable */
  --amber: #f59e0b;            /* health: warning / degraded_streak > 0 */
  --red: #f87171;              /* health: substrate_failure */

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
}

header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 1rem;
}

header a {
  color: var(--text);
  text-decoration: none;
  margin-right: 1rem;
  font-weight: bold;
}

header a:hover {
  color: var(--accent);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.badge {
  display: inline-block;
  padding: 0.25em 0.5em;
  font-size: 0.85em;
  font-weight: bold;
  background: var(--surface);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
}

.badge.nursery { border-color: var(--accent-dim); color: var(--accent); }
.badge.viable { border-color: var(--green); color: var(--green); }
.badge.degraded { border-color: var(--amber); color: var(--amber); }
.badge.failure { border-color: var(--red); color: var(--red); }
.badge.truncation { border-color: var(--amber); color: var(--amber); }
.badge.warning { border-color: var(--amber); color: var(--amber); }
.badge.critical { border-color: var(--red); color: var(--red); }

pre {
  background: var(--surface);
  color: var(--text-dim);
  padding: 1em;
  overflow-x: auto;
  font-size: 0.9em;
  font-family: var(--font-mono);
  border-radius: 4px;
  border: 1px solid var(--border);
}

pre code {
  color: var(--text);
}

.persisted-payload {
  border-left: 4px solid var(--accent);
  padding-left: 1rem;
  margin: 1rem 0;
  background: var(--surface);
  padding: 1rem;
}

.ephemeral-output {
  border-left: 4px solid var(--border-bright);
  padding-left: 1rem;
  margin: 1rem 0;
  color: var(--text-dim);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

th {
  color: var(--text-dim);
  font-weight: normal;
  text-transform: uppercase;
  font-size: 0.85em;
}

tr.clickable-row {
  cursor: pointer;
}

tr.clickable-row:hover {
  background: var(--accent-faint);
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.timeline {
    position: relative;
    padding: 1rem 0;
}
.timeline-item {
    margin-bottom: 0.5rem;
}

/* Reshape overrides */
body.theme-dark { background-color: #121212; color: #e0e0e0; font-family: sans-serif; }
.pb-20 { padding-bottom: 5rem; }
.main-container { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }

.bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; background: #1a1a1a; border-top: 1px solid #333; display: flex; justify-content: space-between; padding: 1rem 2rem; box-sizing: border-box; align-items: center; z-index: 100; font-size: 0.9rem;}
.bottom-nav a { color: #888; text-decoration: none; padding: 0 0.5rem; }
.bottom-nav a:hover, .bottom-nav a.active { color: #fff; }
.ember-dot { display: inline-block; width: 8px; height: 8px; background: #f59e0b; border-radius: 50%; margin-right: 6px; }
.ember-title { font-weight: bold; color: #fff; letter-spacing: 1px;}
.nav-right { color: #888; }

.stream-card { background: #1e1e1e; border-left: 4px solid #555; border-radius: 6px; padding: 1.2rem; margin-bottom: 1.5rem; }
.stream-card.teal { border-left-color: #14b8a6; }
.stream-card.orange { border-left-color: #f97316; }
.stream-card.purple { border-left-color: #a855f7; }
.stream-card.gray { border-left-color: #6b7280; }
.stream-card.muted-teal { border-left-color: #0f766e; }

.stream-header { font-size: 1.1rem; margin-bottom: 0.5rem; color: #fff; }
.stream-body { font-family: serif; font-size: 1.15rem; line-height: 1.6; color: #ccc; margin-bottom: 0.8rem;}
.stream-body.faded { color: #777; font-style: italic; }
.stream-caption { font-size: 0.8rem; color: #666; }
.day-separator { margin: 2rem 0 1rem; font-weight: bold; color: #888; border-bottom: 1px solid #333; padding-bottom: 0.5rem;}
.empty-state { padding: 2rem; text-align: center; color: #666; font-style: italic;}

.journal-header { display: flex; justify-content: space-between; margin-bottom: 1rem; align-items: center; border-bottom: 1px solid #333; padding-bottom: 1rem;}
.journal-title { font-size: 1.5rem; font-weight: bold; }
.journal-nav a { color: #aaa; text-decoration: none; padding: 0 0.5rem;}
.summary-bar { background: #1a1a1a; padding: 1rem; border-radius: 6px; margin-bottom: 2rem; color: #aaa; font-size: 0.9rem;}

.journal-entry { display: flex; margin-bottom: 2rem; }
.gutter { width: 60px; flex-shrink: 0; display: flex; align-items: flex-start; gap: 8px; padding-top: 4px;}
.gutter .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px;}
.gutter .dot.teal { background: #14b8a6; }
.gutter .dot.orange { background: #f97316; }
.gutter .dot.purple { background: #a855f7; }
.gutter .dot.gray { background: #6b7280; }
.gutter .dot.muted-teal { background: #0f766e; }
.gutter .time { font-size: 0.8rem; color: #666; }

.entry-content { flex-grow: 1; }
.cycle-tag { font-size: 0.8rem; color: #888; margin-bottom: 0.5rem; }
.body { font-family: serif; font-size: 1.1rem; line-height: 1.6; color: #ccc; }
.body.faded { color: #777; font-style: italic; }
.text-content.trunc { max-height: 200px; overflow: hidden; position: relative; }
.text-content.trunc::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; background: linear-gradient(transparent, #121212); }
.expand-btn { font-size: 0.8rem; color: #aaa; cursor: pointer; margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 1px;}
.intercept-caption { font-size: 0.8rem; color: #a855f7; margin-top: 0.5rem; }

pre { background: #1a1a1a; padding: 1rem; border-radius: 4px; overflow-x: auto; font-family: mono; font-size: 0.9rem; color: #ddd; border: 1px solid #333;}

.traces-tabs { display: flex; gap: 1rem; margin-bottom: 2rem; border-bottom: 1px solid #333; padding-bottom: 1rem;}
.traces-tabs a { color: #888; text-decoration: none; padding: 0.5rem 1rem; border-radius: 4px;}
.traces-tabs a.active { background: #222; color: #fff;}
.traces-header { font-size: 0.9rem; color: #888; margin-bottom: 1rem;}
.buffer-render { font-family: serif; font-size: 1.15rem; line-height: 1.6; color: #ccc; }

.epochs-layout { display: flex; gap: 2rem; }
.epochs-list { width: 250px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0.5rem;}
.epoch-item { display: block; padding: 1rem; background: #1a1a1a; border-radius: 6px; text-decoration: none; color: #aaa;}
.epoch-item.active, .epoch-item:hover { background: #2a2a2a; color: #fff;}
.epoch-date { font-weight: bold; margin-bottom: 0.25rem;}
.epoch-bytes { font-size: 0.8rem;}

.intercept-card { background: #1a1a1a; padding: 1rem; border-radius: 6px; margin-bottom: 1rem; border-left: 4px solid #a855f7;}
.intercept-meta { font-size: 0.8rem; color: #888; margin-bottom: 0.5rem;}
.intercept-reason { font-size: 0.8rem; color: #ef4444; margin-top: 0.5rem;}

.ops-section { margin-bottom: 3rem; }
.ops-section h2 { font-size: 1.2rem; margin-bottom: 1rem; color: #fff; border-bottom: 1px solid #333; padding-bottom: 0.5rem;}
.ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem;}
.ops-item { background: #1a1a1a; padding: 1rem; border-radius: 6px; font-size: 0.9rem;}
.ops-item .label { color: #888; display: block; margin-bottom: 0.25rem;}
.ops-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; text-align: left; }
.ops-table th, .ops-table td { padding: 0.5rem; border-bottom: 1px solid #222; }
.ops-table th { color: #888; }
.alert-item { padding: 0.5rem 1rem; border-left: 4px solid #888; background: #1a1a1a; margin-bottom: 0.5rem;}
.alert-item.warning { border-color: #f59e0b; }
.alert-item.critical { border-color: #ef4444; }
.event-item { font-size: 0.85rem; padding: 0.25rem 0; border-bottom: 1px solid #222; display: flex; gap: 1rem;}
.event-item .time { color: #666; width: 60px; flex-shrink: 0;}
.event-item .event-name { color: #aaa; width: 150px; flex-shrink: 0;}
.event-item .detail { color: #ccc; }
.event-item.failure .event-name { color: #ef4444; }
.event-item.warning .event-name { color: #f59e0b; }
.mono-text { font-family: mono; font-size: 0.9rem; color: #888; }

/* XSS fix: preserve whitespace via CSS instead of <br> tags */
.stream-body, .text-content, .buffer-render {
    white-space: pre-wrap;
}

/* Hotfix: Missing selectors for dashboard reshape */

.stream-container, .journal-entries, .traces-content, .ops-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ops-layout {
    gap: 3rem; /* Ops needs a bit more breathing room between sections */
}

.epochs-detail {
    flex: 1;
    min-width: 0;
    background: #1a1a1a;
    padding: 1.5rem;
    border-radius: 6px;
}

.nav-left {
    display: flex;
    align-items: center;
    flex: 1;
}

.nav-center {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex: 2;
}

.nav-right {
    display: flex;
    justify-content: flex-end;
    flex: 1;
}

.faded {
    opacity: 0.6;
    color: #777;
}

.italic {
    font-style: italic;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    padding: 1rem 0;
}

.older-btn {
    padding: 0.6rem 1.2rem;
    background: #222;
    color: #aaa;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}

.older-btn:hover {
    background: #333;
    color: #fff;
}

.alerts-list, .events-list, .interceptions-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}