/* Degenix lab: dense, dark by default, status as text plus colour, usable at 375 px. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --raise: #232321;
  --ink: #f4f4f1;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --line: rgba(255, 255, 255, 0.10);
  --accent: #3987e5;
  --good: #0ca30c;
  --warn: #fab219;
  --serious: #ec835a;
  --bad: #e66767;
  --focus: #9ec5f4;
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --raise: #f0efec;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #6b6a65;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --line: rgba(11, 11, 11, 0.10);
  --accent: #2a78d6;
  --good: #006300;
  --warn: #8a5a00;
  --serious: #b04a1c;
  --bad: #c22f2f;
  --focus: #2a78d6;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--ink); }
body { font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.num, td.n, th.n { font-variant-numeric: tabular-nums; text-align: right; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.muted { color: var(--muted); }

.top { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line);
  background: var(--surface); position: sticky; top: 0; z-index: 3; flex-wrap: wrap; }
.brand { font-weight: 700; letter-spacing: .02em; }
.brand span { color: var(--accent); font-weight: 600; }
.tabs { display: flex; gap: 2px; }
.tabs button, .chips button, .pager button, .theme, .drawer-head button {
  background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px; cursor: pointer; }
.tabs button[aria-pressed="true"], .chips button[aria-pressed="true"] {
  background: var(--raise); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.fresh { color: var(--muted); margin-left: auto; font-size: 12px; }
.fresh.stale { color: var(--warn); }

.filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; padding: 8px 16px;
  border-bottom: 1px solid var(--line); }
.filters label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
.filters select, .filters input[type="text"], .filters input[type="number"] {
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; min-width: 0; }
.filters input[type="number"] { width: 72px; }
.filters input[type="text"] { width: 120px; }
.filters .check { flex-direction: row; align-items: center; gap: 4px; color: var(--ink-2); font-size: 12px; }
.chips { display: flex; gap: 2px; }

.summary { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 8px 16px; color: var(--ink-2); font-size: 12px; }
.summary b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.summary .ci { color: var(--muted); }

.board { overflow-x: auto; padding: 0 0 8px; }
table { border-collapse: collapse; width: 100%; background: var(--surface); }
th, td { padding: 5px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
th { position: sticky; top: 0; background: var(--raise); color: var(--muted); font-weight: 600; font-size: 11px;
  text-align: left; z-index: 1; }
th button { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
th[aria-sort] { color: var(--ink); }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--raise); }
tbody tr.sel { background: var(--raise); box-shadow: inset 3px 0 0 var(--accent); }
td:first-child, th:first-child { position: sticky; left: 0; background: inherit; z-index: 2; }
tbody td:first-child { background: var(--surface); }
tbody tr:hover td:first-child, tbody tr.sel td:first-child { background: var(--raise); }
.coin { display: flex; align-items: center; gap: 6px; max-width: 190px; }
.coin .sym { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 20px; height: 20px; border-radius: 50%; flex: none; background: var(--raise); display: grid;
  place-items: center; font-size: 10px; color: var(--ink-2); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.empty { padding: 24px 16px; color: var(--muted); }
.err { padding: 12px 16px; color: var(--bad); }

.st { font-weight: 600; }
.st::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px;
  vertical-align: 1px; background: currentColor; }
.st-hit { color: var(--good); }
.st-miss { color: var(--bad); }
.st-open { color: var(--warn); }
.st-unknown, .st-excluded { color: var(--muted); }
.up { color: var(--good); }
.down { color: var(--bad); }
.tag { border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; font-size: 11px; color: var(--ink-2); }
.tag.warn { color: var(--warn); border-color: currentColor; }

.pager { display: flex; gap: 8px; align-items: center; padding: 8px 16px; color: var(--muted); }

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100vw); background: var(--surface);
  border-left: 1px solid var(--line); overflow-y: auto; z-index: 5; box-shadow: -8px 0 24px rgba(0, 0, 0, .35); }
.drawer-head { position: sticky; top: 0; display: flex; justify-content: flex-end; padding: 8px 12px;
  background: var(--surface); border-bottom: 1px solid var(--line); z-index: 1; }
#detail { padding: 12px 16px 32px; }
#detail h2 { font-size: 16px; margin: 0 0 2px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#detail h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 18px 0 6px; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; }
.facts div { display: flex; flex-direction: column; }
.facts > div > span:first-child { font-size: 11px; color: var(--muted); }
.facts > div > :last-child { font-variant-numeric: tabular-nums; }
#detail .coin { max-width: none; }
#detail .mono { overflow-wrap: anywhere; }
.chart { width: 100%; height: auto; display: block; background: var(--surface); }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .axis { stroke: var(--axis); stroke-width: 1; }
.chart .label { fill: var(--muted); font-size: 10px; }
.chart .series { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.chart .entry { stroke: var(--ink-2); stroke-dasharray: 4 3; stroke-width: 1; }
.chart .peak { fill: var(--good); stroke: var(--surface); stroke-width: 2; }
.chart .rug { fill: var(--bad); stroke: var(--surface); stroke-width: 2; }
.chart .buy { stroke: var(--warn); stroke-width: 2; }
.chart .hair { stroke: var(--ink-2); stroke-width: 1; }
.chart .dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.tip { font-size: 11px; color: var(--ink-2); min-height: 16px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.key { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-top: 4px; }
.key i { display: inline-block; width: 12px; height: 2px; vertical-align: middle; margin-right: 4px; }
.list td, .list th { font-size: 12px; }
.list tbody tr { cursor: default; }

@media (max-width: 600px) {
  .top, .filters, .summary, .pager { padding-left: 16px; padding-right: 16px; }
  .fresh { order: 5; width: 100%; margin-left: 0; }
  .filters label { flex: 1 1 40%; }
  .filters select, .filters input[type="text"] { width: 100%; }
  .coin { max-width: 120px; }
  td .coin .muted { display: none; }
  #detail { padding: 12px 16px 32px; }
  th, td { padding: 5px 6px; }
}
@media (prefers-reduced-motion: no-preference) {
  tbody tr { transition: background-color .12s; }
}

/* experiments (LAB-D2) */
.filters .wide { flex: 1 1 100%; }
textarea.rule { width: 100%; min-height: 9em; background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
  padding: 6px; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.filters .stack { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
button.run { background: var(--accent); color: #fff; border: 0; border-radius: 4px; padding: 5px 12px; cursor: pointer; font-weight: 600; }
button.run:disabled { opacity: .6; cursor: progress; }
pre.rule { background: var(--raise); border-radius: 4px; padding: 8px; overflow-x: auto; font-size: 12px; }
section.experiment { padding: 8px 16px 32px; }
section.experiment h2 { font-size: 16px; margin: 12px 0 2px; }
section.experiment h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 18px 0 6px; }