/* Source: ~/perf_server/design/show/or-tokens.css (copy, do not edit here; refresh from the source) */
/* Obsidian Run — tokens for the canvas, from tokens.json (night by default, .or-day for day) */
:root, .or-night {
  --surface-000: #060708; --surface-100: #0c0d10; --surface-200: #14161a; --surface-300: #1d2026;
  --line-100: #25282e; --line-200: #6b707b;
  --ink: #eee8dd; --ink-muted: #a39d92;
  --gold: #cfae74; --gold-strong: #e2c58f; --on-gold: #0c0d10;
  --carmine: #f05a5e; --on-carmine: #0c0d10;
  --cyan: #6fd6cf; --on-cyan: #0c0d10;
  --copper: #e0975f; --on-copper: #0c0d10;
  --steel: #a9bccf;
  --chart-1: #cfae74; --chart-2: #6fd6cf; --chart-3: #a9bccf; --chart-4: #e0975f; --chart-grid: #25282e;
  --focus: #e2c58f;
  --shadow-gold: 0 0 0 1px #cfae7433, 0 18px 48px -18px #cfae7455;
  --shadow-deep: 0 24px 64px -24px #000000cc;
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-0: 0px; --radius-1: 2px; --radius-pill: 999px;
  --stroke-hair: 1px; --stroke-rule: 2px;
}
.or-day {
  --surface-000: #e9e4da; --surface-100: #f4f0e8; --surface-200: #fbf9f4; --surface-300: #ffffff;
  --line-100: #d9d2c5; --line-200: #7f786d;
  --ink: #121316; --ink-muted: #5e5a53;
  --gold: #7d5f2c; --gold-strong: #644a1f; --on-gold: #fbf9f4;
  --carmine: #b3202a; --on-carmine: #ffffff;
  --cyan: #0f6964; --on-cyan: #ffffff;
  --copper: #9a4a1c; --on-copper: #ffffff;
  --steel: #3f5a73;
  --chart-1: #7d5f2c; --chart-2: #0f6964; --chart-3: #3f5a73; --chart-4: #9a4a1c; --chart-grid: #d9d2c5;
  --focus: #644a1f;
  --shadow-gold: 0 0 0 1px #7d5f2c26, 0 18px 40px -20px #7d5f2c40;
  --shadow-deep: 0 24px 48px -28px #12131633;
}

/* Shared chart marks */
.ch { display: block; width: 100%; height: auto; overflow: visible; }
.ch text { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ch .grid { stroke: var(--chart-grid); stroke-width: 1; fill: none; shape-rendering: crispEdges; }
.ch .axis { stroke: var(--line-200); stroke-width: 1; fill: none; shape-rendering: crispEdges; }
.ch .s1 { stroke: var(--chart-1); } .ch .s2 { stroke: var(--chart-2); } .ch .s3 { stroke: var(--chart-3); } .ch .s4 { stroke: var(--chart-4); stroke-dasharray: 6 4; }
.ch .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch .ln-thin { fill: none; stroke-width: 1.25; stroke-linejoin: round; }
.ch .t1 { fill: var(--chart-1); } .ch .t2 { fill: var(--chart-2); } .ch .t3 { fill: var(--chart-3); } .ch .t4 { fill: var(--chart-4); }
.ch .tink { fill: var(--ink); } .ch .tgold { fill: var(--gold); } .ch .tcar { fill: var(--carmine); } .ch .tcop { fill: var(--copper); } .ch .tcy { fill: var(--cyan); }
.ch .area-gold { fill: var(--gold); fill-opacity: .14; stroke: none; }
.ch .area-cyan { fill: var(--cyan); fill-opacity: .14; stroke: none; }
.ch .plan { fill: none; stroke: var(--ink-muted); stroke-width: 1.25; stroke-dasharray: 4 4; }
.ch .limit-car { fill: none; stroke: var(--carmine); stroke-width: 1.25; stroke-dasharray: 2 3; }
.ch .limit-cop { fill: none; stroke: var(--copper); stroke-width: 1.25; stroke-dasharray: 2 3; }
.ch .future { fill: var(--surface-000); fill-opacity: .55; }
.ch .band { fill: var(--carmine); fill-opacity: .06; }
.ch .now { stroke: var(--carmine); stroke-width: 1; }
.ch .now-dot { fill: var(--carmine); }
.ch .bar-c { fill: var(--steel); } .ch .bar-to { fill: var(--copper); } .ch .bar-5 { fill: var(--carmine); }
.ch .hm1 { fill: var(--cyan); fill-opacity: .12; } .ch .hm2 { fill: var(--cyan); fill-opacity: .3; } .ch .hm3 { fill: var(--cyan); fill-opacity: .55; } .ch .hm4 { fill: var(--cyan); fill-opacity: .85; } .ch .hm5 { fill: var(--gold); }
.ch .gap { fill: url(#hatch); }

.lbl { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
.cap { font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: .08em; color: var(--ink-muted); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.panel { background: var(--surface-200); border: 1px solid var(--line-100); padding: 24px; box-sizing: border-box; min-width: 0; }
.rule { width: 32px; height: 2px; background: var(--gold); }
.key { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-muted); }
.sw { width: 16px; height: 2px; display: inline-block; }
.sw-dash { width: 16px; height: 0; border-top: 2px dashed; display: inline-block; }
.pill { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; padding: 6px 12px; min-height: 32px; border: 1px solid var(--line-200); background: transparent; color: var(--ink-muted); cursor: pointer; }
.pill:hover { color: var(--ink); border-color: var(--ink-muted); }
.pill.on { color: var(--on-gold); background: var(--gold); border-color: var(--gold); }
.pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }