:root {
    --bg: #fafaf7;
    --fg: #1a1a1a;
    --muted: #6a6a6a;
    --card: #ffffff;
    --border: #e6e3dd;
    --accent: #2563eb;
    --pos: #058544;
    --neg: #c2410c;
    --warn: #a16207;
    --mono: ui-monospace, SFMono-Regular, "Menlo", Consolas, monospace;
}

* { box-sizing: border-box; }
html { font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
body { margin: 0; background: var(--bg); color: var(--fg); }
header, section, footer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
}
header { padding-top: 2rem; padding-bottom: 0.5rem; }
h1 { margin: 0 0 0.2rem; font-size: 1.4rem; }
h2 { margin: 2rem 0 0.6rem; font-size: 1.1rem; }
h3 { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--muted); font-weight: 600; }

.subtitle { color: var(--muted); }
.muted { color: var(--muted); }

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

.row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.half { flex: 1 1 320px; }

table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
th, td {
    text-align: right;
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 12.5px;
    white-space: nowrap;
}
th { color: var(--muted); font-weight: 600; text-align: right; }
th.l, td.l { text-align: left; }
tr:last-child td { border-bottom: none; }

.table-wrap { overflow-x: auto; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.warn { color: var(--warn); font-weight: 600; }
.dim { color: var(--muted); }
.tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    font-size: 11px;
    font-family: var(--mono);
    font-weight: 600;
    text-transform: uppercase;
}
.tag.completed { background: #ecfdf5; color: #047857; }
.tag.failed   { background: #fef2f2; color: #b91c1c; }
.tag.started  { background: #fefce8; color: #a16207; }
.tag.intent_persisted, .tag.orders_placed { background: #eff6ff; color: #1d4ed8; }

#equity-canvas { display: block; width: 100%; height: 280px; max-width: 100%; }
.legend {
    display: flex; gap: 1rem; margin-top: 0.5rem;
    font-size: 11.5px; color: var(--muted);
}
.swatch {
    display: inline-block; width: 14px; height: 4px;
    vertical-align: middle; margin-right: 4px; border-radius: 2px;
}
.swatch.nav { background: var(--accent); }
.swatch.surprise { background: var(--warn); }

footer { padding-bottom: 3rem; font-size: 12px; }
footer a { color: var(--muted); }