/* owl design system
 *
 * Tokens are OKLCH-only. Neutrals share a warm hue (80°) at very low
 * chroma so the whole interface coheres without colour bleeding.
 * One accent (muted magenta, hue 0°). Series palette derived from the
 * accent by 60° hue rotation, lightness and chroma held constant.
 */

:root {
  /* Type scale (ratio 1.2) */
  --fs-xs:   0.6875rem;  /* 11px */
  --fs-sm:   0.8125rem;  /* 13px */
  --fs-base: 0.9375rem;  /* 15px */
  --fs-md:   1.0625rem;  /* 17px */
  --fs-lg:   1.25rem;    /* 20px */
  --fs-xl:   1.5rem;     /* 24px */
  --fs-2xl:  1.875rem;   /* 30px */

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  /* Radius */
  --r-sm: 3px;
  --r-md: 5px;

  /* Type families */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
}

/* Light theme — default */
:root,
:root[data-theme="light"] {
  --bg:          oklch(0.985 0.003 80);
  --bg-elevated: oklch(1.000 0.000 80);
  /* Inline-code background sits a perceptual step below body bg in
     light mode (slight tint) and a clear step above body bg in dark
     mode, where --bg-elevated alone is too close to --bg. */
  --code-bg:     oklch(0.945 0.006 80);
  --fg:          oklch(0.20 0.008 80);
  --muted:       oklch(0.55 0.006 80);
  --subtle:      oklch(0.70 0.005 80);
  --rule:        oklch(0.90 0.005 80);
  --grid-line:   oklch(0.94 0.004 80);
  --focus-ring:  oklch(0.62 0.13 0 / 0.4);

  --accent:    oklch(0.62 0.13 0);
  /* Twelve series colours, hue every 30°. The first five take the
     well-separated cardinal positions (0/60/120/180/240) so small
     panels keep the original colour scheme; slots 6-12 fill the
     intermediate angles for dense multi-series charts. */
  --series-1:   oklch(0.62 0.13 0);    /* magenta */
  --series-2:   oklch(0.62 0.13 120);  /* green */
  --series-3:   oklch(0.62 0.13 240);  /* blue */
  --series-4:   oklch(0.62 0.13 60);   /* amber */
  --series-5:   oklch(0.62 0.13 180);  /* teal */
  --series-6:   oklch(0.62 0.13 30);   /* coral */
  --series-7:   oklch(0.62 0.13 90);   /* lime */
  --series-8:   oklch(0.62 0.13 150);  /* mint */
  --series-9:   oklch(0.62 0.13 210);  /* sky */
  --series-10:  oklch(0.62 0.13 270);  /* violet */
  --series-11:  oklch(0.62 0.13 300);  /* purple */
  --series-12:  oklch(0.62 0.13 330);  /* rose */
}

/* Dark theme — lift lightness on accent and series for perceptual parity */
:root[data-theme="dark"] {
  --bg:          oklch(0.205 0.008 80);
  --bg-elevated: oklch(0.245 0.007 80);
  /* Clear lift above body bg so inline code reads even on long
     paragraphs of dark surface. */
  --code-bg:     oklch(0.305 0.010 80);
  --fg:          oklch(0.94 0.004 80);
  --muted:       oklch(0.66 0.005 80);
  --subtle:      oklch(0.48 0.005 80);
  --rule:        oklch(0.30 0.006 80);
  --grid-line:   oklch(0.28 0.006 80);
  --focus-ring:  oklch(0.70 0.13 0 / 0.45);

  --accent:    oklch(0.70 0.13 0);
  --series-1:   oklch(0.70 0.13 0);
  --series-2:   oklch(0.70 0.13 120);
  --series-3:   oklch(0.70 0.13 240);
  --series-4:   oklch(0.70 0.13 60);
  --series-5:   oklch(0.70 0.13 180);
  --series-6:   oklch(0.70 0.13 30);
  --series-7:   oklch(0.70 0.13 90);
  --series-8:   oklch(0.70 0.13 150);
  --series-9:   oklch(0.70 0.13 210);
  --series-10:  oklch(0.70 0.13 270);
  --series-11:  oklch(0.70 0.13 300);
  --series-12:  oklch(0.70 0.13 330);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }

html {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

body {
  background: var(--bg);
  color: var(--fg);
  transition: background-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

/* Layout */
.shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-5) var(--s-7);
}
.shell--narrow {
  max-width: 760px;
}

/* Top nav */
/* Topbar height is fixed so every item — text of any size, button,
   input — sits inside the same visual envelope. align-items: center
   geometrically centres each child; line-height: 1 on text strips
   leading so the inline box equals the font-size; sharing one
   font-size across brand and crumbs removes the cap-height/x-height
   perceptual drift that different sizes always produce. Hierarchy
   between brand and crumbs is carried by weight + colour. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: 48px;
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule);
}
.topbar__brand,
.topbar__crumbs { line-height: 1; font-size: var(--fs-sm); }
.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
}
.topbar__mark {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  /* Optical correction. The mark's visible content (ears + eyes +
     beak) is top-heavy: ears push the perceived centre of mass above
     the SVG box centre. Flex centering puts the box centre at the
     bar mid, which leaves the eyes reading slightly high next to the
     wordmark's x-height. A small downward nudge re-balances the
     mark so the eyes sit on the same optical line as the text. */
  transform: translateY(1.5px);
}
.topbar__crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--muted);
  flex: 1;
  min-width: 0;
}
.topbar__crumbs a { color: var(--muted); text-decoration: none; }
.topbar__crumbs a:hover { color: var(--fg); }
.topbar__crumbs .sep { color: var(--subtle); }
.topbar__crumbs .current { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Time-window picker */
.range-picker {
  display: inline-flex;
  align-items: center;
}
.range-picker select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 2px 22px 2px 8px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'><path d='M0 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.25'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 8px 6px;
}
.range-picker select:hover { color: var(--fg); border-color: var(--muted); }
.range-picker select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.time-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  line-height: 1;
}

.time-nav__anchor,
.time-nav__back,
.time-nav__now {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}

.time-nav__anchor {
  gap: var(--s-2);
  height: 28px;
  padding: 0 var(--s-2);
}
.time-nav__anchor:hover,
.time-nav__back:hover,
.time-nav__now:hover {
  color: var(--fg);
  background: var(--bg-elevated);
}

.time-nav__icon {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

.time-nav__back,
.time-nav__now {
  width: 28px;
  height: 28px;
  font-size: var(--fs-sm);
}
.time-nav__now {
  width: auto;
  padding: 0 var(--s-2);
}

.time-nav__label {
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.time-nav [hidden] { display: none; }

.time-nav[data-historic] .time-nav__anchor {
  border: 1px solid var(--accent);
  color: var(--fg);
}

.time-nav__popover {
  position: absolute;
  z-index: 20;
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-3);
  box-shadow: 0 8px 24px -12px oklch(0 0 0 / 0.25);
  font-size: var(--fs-sm);
  min-width: 252px;
}
.time-nav__popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-2);
}
.time-nav__popover-head button {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 0 var(--s-2);
  line-height: 1;
}
.time-nav__popover-head button:hover { color: var(--fg); }
.time-nav__popover-title {
  font-weight: 500;
  color: var(--fg);
}
.time-nav__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.time-nav__dow {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
  padding: var(--s-1) 0;
}
.time-nav__day {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: var(--s-1) 0;
  font: inherit;
  color: var(--fg);
  text-align: center;
  cursor: pointer;
}
.time-nav__day[disabled] {
  color: var(--muted);
  cursor: default;
  pointer-events: none;
}
.time-nav__day:hover:not([disabled]) {
  background: var(--bg);
}
.time-nav__day[data-current] {
  border-color: var(--accent);
}
.time-nav__day[data-today]::after {
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  margin: 1px auto 0;
}

/* Theme toggle */
.theme-toggle {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
}
.theme-toggle:hover { color: var(--fg); background: var(--bg-elevated); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.theme-toggle svg { width: 16px; height: 16px; display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun,
:root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }

/* Page title */
.page-title {
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-2);
}
.page-hint {
  margin: 0 0 var(--s-6);
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: 65ch;
}

/* Secondary section dividers reuse .page-title for style consistency
   but need top breathing room: the H2 must read as "introducing the
   section below", not "trailing the section above". H1 is the page
   heading and stays flush. */
h2.page-title,
h3.page-title {
  margin-top: var(--s-7);
}
.page-hint code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--code-bg);
  padding: 0.05em 0.35em;
  border-radius: var(--r-sm);
  color: var(--fg);
}

/* The dot separator used inside the page title (404 · not found)
   echoes the topbar crumb separator so the vocabulary stays
   consistent across pages. */
.page-title .sep { color: var(--subtle); margin: 0 0.25em; }

/* 404 page — reads like one line of access log followed by a
   short status. The path is the figure; everything else mutes
   into context. */
.notfound__line {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-md);
  line-height: 1.6;
}
.notfound__verb {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.85em;
  margin-right: 0.5em;
}
.notfound__path {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--fg);
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  padding: 0.1em 0.5em;
  border-radius: var(--r-sm);
  word-break: break-all;
}
.notfound__hint {
  margin: 0 0 var(--s-7);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.notfound__label {
  margin: 0 0 var(--s-3);
  color: var(--muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

/* Dashboard list (homepage) */
.dashboard-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-1);
}
.dashboard-list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.dashboard-list__item:last-child { border-bottom: 0; }
.dashboard-list__link {
  font-size: var(--fs-md);
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color var(--t-fast) var(--ease-out);
}
.dashboard-list__link:hover { color: var(--accent); }
.dashboard-list__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* Targets table */
.targets {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.targets thead th {
  text-align: left;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-xs);
  color: var(--muted);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.targets th.num, .targets td.num {
  text-align: right;
  font-family: var(--font-mono);
}
.targets tbody td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.targets tbody tr:last-child td { border-bottom: 0; }
.t-name { font-weight: 500; color: var(--fg); }
.t-sub  { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.t-url  { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); word-break: break-all; }
.t-err  { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; max-width: 60ch; }
.t-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: var(--r-sm);
}
.t-status--ok      { color: oklch(0.55 0.11 150); border: 1px solid oklch(0.85 0.04 150); }
.t-status--down    { color: oklch(0.55 0.13 25);  border: 1px solid oklch(0.85 0.04 25);  }
.t-status--pending { color: var(--muted); border: 1px solid var(--rule); }

:root[data-theme="dark"] .t-status--ok      { color: oklch(0.75 0.12 150); border-color: oklch(0.40 0.05 150); }
:root[data-theme="dark"] .t-status--down    { color: oklch(0.75 0.14 25);  border-color: oklch(0.40 0.05 25);  }

/* Empty state */
.empty {
  border: 1px dashed var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-6);
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: 65ch;
}
.empty strong { color: var(--fg); font-weight: 500; }
.empty code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--code-bg);
  padding: 0.05em 0.35em;
  border-radius: var(--r-sm);
  color: var(--fg);
}

/* Dashboard grid + panels */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: var(--s-4);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-3);
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  min-height: 0;
}

.panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--s-2);
}
.panel__title {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.panel__unit {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--subtle);
}

.panel__chart {
  display: block;
  width: 100%;
  height: 160px;
  overflow: visible;
}
.panel__chart .gridline { stroke: var(--grid-line); stroke-width: 1; }
.panel__chart .baseline { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; }
.panel__chart .series   { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.panel__chart .series--1  { stroke: var(--series-1); }
.panel__chart .series--2  { stroke: var(--series-2); }
.panel__chart .series--3  { stroke: var(--series-3); }
.panel__chart .series--4  { stroke: var(--series-4); }
.panel__chart .series--5  { stroke: var(--series-5); }
.panel__chart .series--6  { stroke: var(--series-6); }
.panel__chart .series--7  { stroke: var(--series-7); }
.panel__chart .series--8  { stroke: var(--series-8); }
.panel__chart .series--9  { stroke: var(--series-9); }
.panel__chart .series--10 { stroke: var(--series-10); }
.panel__chart .series--11 { stroke: var(--series-11); }
.panel__chart .series--12 { stroke: var(--series-12); }
.panel__chart .marker--1  { fill: var(--series-1); }
.panel__chart .marker--2  { fill: var(--series-2); }
.panel__chart .marker--3  { fill: var(--series-3); }
.panel__chart .marker--4  { fill: var(--series-4); }
.panel__chart .marker--5  { fill: var(--series-5); }
.panel__chart .marker--6  { fill: var(--series-6); }
.panel__chart .marker--7  { fill: var(--series-7); }
.panel__chart .marker--8  { fill: var(--series-8); }
.panel__chart .marker--9  { fill: var(--series-9); }
.panel__chart .marker--10 { fill: var(--series-10); }
.panel__chart .marker--11 { fill: var(--series-11); }
.panel__chart .marker--12 { fill: var(--series-12); }

/* Stat panels overlay a big headline number on the panel body. The
   plain variant is centred both horizontally and vertically; the
   sparkline variant keeps the number centred in flow but layers a
   muted chart behind it (own Y/X axes, dashed crosshair on hover,
   circular hover-point on the series). */
.panel__stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 160px;
  padding: var(--s-3);
}
.panel__stat-value {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg);
  position: relative;
  z-index: 1;
}
.panel--stat:not([data-graph-mode="area"]) .panel__stat-value {
  font-size: clamp(3rem, 7vw, 4.5rem);
}
.panel--stat[data-graph-mode="area"] .panel__stat-value {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
}
.panel__stat-value--placeholder {
  color: var(--muted);
}
/* The time slot always reserves a row of vertical space so the
   headline does not shift when hover toggles its visibility. */
.panel__stat-time {
  visibility: hidden;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  min-height: var(--fs-xs);
  line-height: 1.2;
  position: relative;
  z-index: 1;
}
.panel__stat-time--shown {
  visibility: visible;
}
.panel__sparkline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.panel__sparkline .series {
  fill: none;
  stroke: var(--series-1);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.28;
}
.panel__sparkline .axis-tick {
  fill: var(--muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
}
.panel__sparkline .axis-tick--y {
  text-anchor: end;
  dominant-baseline: middle;
}
.panel__sparkline .axis-tick--x {
  text-anchor: start;
  dominant-baseline: alphabetic;
}
.panel__sparkline .axis-tick--x-end {
  text-anchor: end;
}
.panel__sparkline .crosshair {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  pointer-events: none;
}
.panel__sparkline .hover-point {
  pointer-events: none;
  stroke: var(--series-1);
  stroke-width: 1.5;
  fill: var(--bg-elevated);
}
.panel__stat-value--hover {
  color: var(--fg);
}

/* Docs page demo: two stat panels side by side. The row constrains
   itself to the prose column via docs.css's .docs__article > rule. */
.stat-demo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin: var(--s-4) 0;
}
@media (max-width: 560px) {
  .stat-demo-row {
    grid-template-columns: 1fr;
  }
}

/* Axis labels (rendered inside the SVG) */
.panel__chart .axis-label {
  fill: var(--muted);
  font-family: var(--font-mono);
  font-size: 9.5px;
}
.panel__chart .axis-label--y { text-anchor: end; dominant-baseline: middle; }
.panel__chart .axis-label--x { dominant-baseline: alphabetic; }

/* Hover overlay + crosshair + per-series point */
.panel__chart .hover-overlay { fill: transparent; cursor: crosshair; }
.panel__chart .crosshair {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  pointer-events: none;
}
.panel__chart .hover-point {
  pointer-events: none;
  stroke-width: 1.5;
  fill: var(--bg-elevated);
}
.panel__chart .hover-point--1  { stroke: var(--series-1); }
.panel__chart .hover-point--2  { stroke: var(--series-2); }
.panel__chart .hover-point--3  { stroke: var(--series-3); }
.panel__chart .hover-point--4  { stroke: var(--series-4); }
.panel__chart .hover-point--5  { stroke: var(--series-5); }
.panel__chart .hover-point--6  { stroke: var(--series-6); }
.panel__chart .hover-point--7  { stroke: var(--series-7); }
.panel__chart .hover-point--8  { stroke: var(--series-8); }
.panel__chart .hover-point--9  { stroke: var(--series-9); }
.panel__chart .hover-point--10 { stroke: var(--series-10); }
.panel__chart .hover-point--11 { stroke: var(--series-11); }
.panel__chart .hover-point--12 { stroke: var(--series-12); }

/* Tooltip block (SVG-native) */
.panel__chart .tooltip-bg {
  fill: var(--bg-elevated);
  stroke: var(--rule);
  stroke-width: 1;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.06));
}
.panel__chart .tooltip-text {
  fill: var(--fg);
  font-family: var(--font-mono);
  font-size: 10px;
  dominant-baseline: alphabetic;
  pointer-events: none;
}
.panel__chart .tooltip-text--muted { fill: var(--muted); }
.panel__chart .tooltip-swatch--1  { fill: var(--series-1); }
.panel__chart .tooltip-swatch--2  { fill: var(--series-2); }
.panel__chart .tooltip-swatch--3  { fill: var(--series-3); }
.panel__chart .tooltip-swatch--4  { fill: var(--series-4); }
.panel__chart .tooltip-swatch--5  { fill: var(--series-5); }
.panel__chart .tooltip-swatch--6  { fill: var(--series-6); }
.panel__chart .tooltip-swatch--7  { fill: var(--series-7); }
.panel__chart .tooltip-swatch--8  { fill: var(--series-8); }
.panel__chart .tooltip-swatch--9  { fill: var(--series-9); }
.panel__chart .tooltip-swatch--10 { fill: var(--series-10); }
.panel__chart .tooltip-swatch--11 { fill: var(--series-11); }
.panel__chart .tooltip-swatch--12 { fill: var(--series-12); }

.panel__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.panel__value {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  line-height: 1;
  white-space: nowrap;
}
.panel__value--placeholder { color: var(--subtle); }
.panel__value--hidden { display: none; }
.panel__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.panel__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}
.panel__legend-swatch {
  display: inline-block;
  width: 10px;
  height: 2px;
}

/* Unsupported / error panel state */
.panel--unsupported {
  background: transparent;
  border-style: dashed;
}
.panel__notice {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
  padding: var(--s-2) 0;
  max-width: 50ch;
}
.panel__notice strong {
  color: var(--fg);
  font-weight: 500;
}
.panel__notice code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--fg);
}

/* Focus visibility on interactive elements */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Events table panel. */
.panel__events { overflow: auto; height: 100%; }
.panel__events table { width: 100%; border-collapse: collapse; font-size: 13px; }
.panel__events th { text-align: left; font-weight: 500; color: var(--muted); padding: 4px 8px; }
.panel__events td { padding: 4px 8px; border-top: 1px solid var(--rule); }
.panel__events tbody tr { transition: background-color var(--t-fast) var(--ease-out); }
.panel__events tbody tr:hover { background: var(--bg); }
.panel__events-time { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.panel__events-kind { color: var(--muted); white-space: nowrap; }
.panel__events-render { color: var(--fg); }

/* Annotation overlays on timeseries panels. */
.panel__annot-line { stroke-width: 1; opacity: 0.55; pointer-events: none; }
.panel__annot-zone { fill: transparent; cursor: pointer; }

/* Print: hide chrome, just data */
@media print {
  .topbar, .theme-toggle { display: none; }
  body { background: white; color: black; }
  .panel { break-inside: avoid; }
}