/* Palette: the validated reference categorical slots 1-3 (blue, orange, aqua), neutrals, and the reserved status colours.
   Dark mode is its own set of steps, not an inversion. */
:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, .10);
  --wash: rgba(11, 11, 11, .045);
  --s1: #2a78d6;   /* blue   - fresh answers / input / average */
  --s2: #eb6834;   /* orange - output / p95 */
  --s3: #1baf7a;   /* aqua   - cached */
  --s1-soft: rgba(42, 120, 214, .12);
  --s1b: #86b6ef;  /* lighter step of the same blue: fresh data through a saved SQL plan */
  --neutral: #a9a7a0;
  --crit: #d03b3b;
  --crit-soft: rgba(208, 59, 59, .10);
  --good-ink: #006300;
  --serious: #ec835a;
  --shadow: 0 1px 2px rgba(20, 20, 20, .04);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --ink: #f0efec; --ink2: #c3c2b7; --muted: #898781;
    --grid: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, .10); --wash: rgba(255, 255, 255, .06);
    --s1: #3987e5; --s1b: #1c5cab; --s2: #d95926; --s3: #199e70; --s1-soft: rgba(57, 135, 229, .16);
    --neutral: #5d5c58; --crit: #e66767; --crit-soft: rgba(230, 103, 103, .13); --good-ink: #0ca30c; --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --ink: #f0efec; --ink2: #c3c2b7; --muted: #898781;
  --grid: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, .10); --wash: rgba(255, 255, 255, .06);
  --s1: #3987e5; --s1b: #1c5cab; --s2: #d95926; --s3: #199e70; --s1-soft: rgba(57, 135, 229, .16);
  --neutral: #5d5c58; --crit: #e66767; --crit-soft: rgba(230, 103, 103, .13); --good-ink: #0ca30c; --shadow: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); }
body {
  color: var(--ink);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
button, select, input { font: inherit; color: inherit; }

.dash { max-width: 1280px; margin: 0 auto; padding-inline: 20px; padding-block: 18px 40px; }

/* ---------- header ---------- */
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.title h1 { margin: 2px 0 0; font-size: 24px; letter-spacing: -.015em; font-weight: 650; }
.sub { margin: 2px 0 0; color: var(--ink2); }
.back { color: var(--ink2); text-decoration: none; font-size: 13px; }
.back:hover { color: var(--ink); }
.ghost {
  background: transparent; border: 1px solid var(--border); border-radius: 9px; padding: 6px 12px; cursor: pointer; white-space: nowrap;
}
.ghost:hover { background: var(--wash); }
.banner {
  background: var(--s1-soft); border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px; margin-bottom: 12px; color: var(--ink);
}

/* ---------- the single filter row ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.seg button { background: transparent; border: 0; padding: 5px 12px; border-radius: 7px; cursor: pointer; color: var(--ink2); }
.seg button:hover { background: var(--wash); }
.seg button.on { background: var(--s1); color: #fff; }
.check { display: inline-flex; align-items: center; gap: 6px; color: var(--ink2); cursor: pointer; }
.stamp { color: var(--muted); font-size: 12.5px; margin-left: auto; }

.content { transition: opacity .15s; }
.content.loading { opacity: .55; }  /* refetch keeps the frame: dim, never blank */

/* ---------- KPI tiles ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 12px; box-shadow: var(--shadow); min-width: 0; }
.kpi .lbl { color: var(--ink2); font-size: 13px; }
.kpi .val { font-size: 30px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; margin-top: 4px; }
.kpi .val small { font-size: 14px; font-weight: 500; color: var(--ink2); margin-left: 4px; letter-spacing: 0; }
.kpi .note { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.kpi .note b { color: var(--ink2); font-weight: 600; }
.kpi.bad .val { color: var(--crit); }
.kpi svg.spark { display: block; width: 100%; height: 26px; margin-top: 8px; }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 1px 8px 1px 6px; border-radius: 999px; background: var(--wash); color: var(--ink2); }

/* ---------- cards & charts ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 14px; box-shadow: var(--shadow); min-width: 0; }
.card.wide { grid-column: 1 / -1; }
.card header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.card h2 { margin: 0; font-size: 15px; font-weight: 620; }
.hint { margin: 2px 0 10px; color: var(--muted); font-size: 12.5px; }
.plot { position: relative; height: 270px; }
.plot.short { height: 230px; }
.card.wide .plot { height: 280px; }
.tbl { background: transparent; border: 0; color: var(--ink2); font-size: 12px; cursor: pointer; border-radius: 6px; padding: 2px 8px; }
.tbl:hover { background: var(--wash); }
.tbl[aria-pressed="true"] { background: var(--wash); color: var(--ink); }
.twin { max-height: 280px; overflow: auto; }

/* source composition bar */
.sbar { display: flex; gap: 2px; height: 22px; margin: 4px 0 14px; }
.sbar i { display: block; min-width: 3px; border-radius: 4px; }
.slist { list-style: none; margin: 0; padding: 0; }
.slist li { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--grid); }
.slist li:first-child { border-top: 0; }
.slist .sw { width: 12px; height: 12px; border-radius: 4px; }
.slist .n { font-weight: 600; font-variant-numeric: tabular-nums; }
.slist .p { color: var(--muted); width: 54px; text-align: right; font-variant-numeric: tabular-nums; }
.slist .sub2 { color: var(--muted); font-size: 12.5px; margin-left: 6px; }

/* ---------- tables ---------- */
.scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th { text-align: left; color: var(--ink2); font-weight: 600; font-size: 12px; padding: 7px 10px; border-bottom: 1px solid var(--axis); white-space: nowrap; }
table.data td { padding: 8px 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }
table.clickable tbody tr { cursor: pointer; }
table.clickable tbody tr:hover { background: var(--wash); }
td.q { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.when { color: var(--ink2); white-space: nowrap; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; }

.log header { margin-bottom: 8px; flex-wrap: wrap; }
.logtools { display: flex; gap: 8px; flex-wrap: wrap; }
.logtools select, .logtools input { background: var(--page); border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px; min-width: 0; }
.more { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; color: var(--muted); font-size: 12.5px; }

/* status badges: icon + label, never colour alone */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 9px 2px 7px; border-radius: 999px; background: var(--wash); color: var(--ink); white-space: nowrap; }
.badge svg { width: 13px; height: 13px; flex: none; }
.badge.ok svg { color: var(--s1); }
.badge.cached svg { color: var(--s3); }
.badge.refused svg, .badge.greeting svg, .badge.aborted svg { color: var(--muted); }
.badge.error { background: var(--crit-soft); }
.badge.error svg { color: var(--crit); }
.kind { font-size: 12px; padding: 1px 8px; border-radius: 6px; background: var(--wash); color: var(--ink2); }
.kind.bad { background: var(--crit-soft); color: var(--crit); }

.empty { padding: 22px 6px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.empty svg { color: var(--good-ink); }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 20; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--surface); z-index: 21;
  border-left: 1px solid var(--border); overflow-y: auto; padding: 16px 18px calc(24px + env(safe-area-inset-bottom, 0px));
}
.drawer header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.drawer h2 { margin: 0; font-size: 17px; }
.drawer h3 { margin: 18px 0 6px; font-size: 13px; color: var(--ink2); font-weight: 620; }
.dq { font-size: 16px; font-weight: 560; margin: 8px 0; overflow-wrap: anywhere; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.fact { background: var(--page); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.fact .l { color: var(--muted); font-size: 12px; }
.fact .v { font-weight: 620; font-variant-numeric: tabular-nums; }
.tline { display: flex; gap: 2px; height: 16px; margin: 6px 0 8px; }
.tline i { display: block; border-radius: 4px; min-width: 3px; }
.tkey { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink2); }
.tkey span::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--c); }
.errbox { background: var(--crit-soft); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; }
pre.sql { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--page); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12px; }

/* ---------- hover tip for HTML marks ---------- */
.tip { position: fixed; z-index: 30; pointer-events: none; background: var(--surface); color: var(--ink); border: 1px solid var(--border);
  border-radius: 9px; padding: 6px 10px; font-size: 12.5px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); max-width: 260px; }
.tip b { font-weight: 650; }

@media (max-width: 860px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .stamp { margin-left: 0; width: 100%; }
}
@media (max-width: 520px) {
  .dash { padding-inline: 16px; }
  .kpi .val { font-size: 26px; }
  td.q { max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) { .content { transition: none; } }

.nodata { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; pointer-events: none; }
.plot canvas { max-width: 100%; }

[hidden] { display: none !important; }

/* ---------- section tabs & cache page ---------- */
.tabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--grid); }
.tabs a { padding: 8px 14px; color: var(--ink2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); border-bottom-color: var(--s1); font-weight: 600; }
.meter { height: 8px; border-radius: 6px; background: var(--s1-soft); overflow: hidden; margin-top: 10px; }
.meter i { display: block; height: 100%; border-radius: 6px; background: var(--s1); min-width: 2px; }
.meter.warn i { background: var(--serious); }
.meter.crit i { background: var(--crit); }
.mini { display: inline-block; width: 46px; height: 5px; border-radius: 4px; background: var(--s1-soft); vertical-align: middle; margin-left: 8px; overflow: hidden; }
.mini i { display: block; height: 100%; background: var(--s3); }
.kind.live { background: var(--s1-soft); color: var(--ink); }
.btn-danger { border-color: var(--crit); color: var(--crit); }
.btn-danger:hover { background: var(--crit-soft); }
td.prev { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.keyline { color: var(--muted); overflow-wrap: anywhere; }
.note-card { color: var(--ink2); }
.note-card p { margin: 6px 0; }