/* MetaLens VGC — design tokens, skins, layout, components.
   Pro (default, dark theme by default): JetBrains Mono / Inter, dense Bloomberg-terminal grid.
   Retro: Press Start 2P / Silkscreen / VT323, pixel-window chrome.
   Categorical chart palette validated via dataviz skill's validate_palette.js
   against all four skin×theme surfaces (see agent report). */

/* Google Fonts are loaded by a <link> in index.html (an @import here would
   delay them until this file has downloaded). */

/* ---------- tokens ---------- */
:root {
  --font-retro-head: 'Press Start 2P', monospace;
  --font-retro-label: 'Silkscreen', monospace;
  --font-retro-body: 'VT323', monospace;
  --font-pro-head: 'JetBrains Mono', monospace;
  --font-pro-label: 'JetBrains Mono', monospace;
  --font-pro-body: Inter, system-ui, -apple-system, sans-serif;

  --radius: 3px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;

  --header-h: 56px;
  --filterbar-h: 64px;

  /* categorical (light-mode step; overridden dark below) */
  --series-1:#1f8a4c; --series-2:#2a78d6; --series-3:#d98a1a; --series-4:#8a5cc7;
  --series-5:#d1566e; --series-6:#15999a; --series-7:#7a9a1f; --series-8:#c0503a;
  /* sequential green ramp, low->high */
  --seq-1:#e1f3e6; --seq-2:#bfe6cb; --seq-3:#93d3a8; --seq-4:#5fbd82; --seq-5:#379f60; --seq-6:#217d46; --seq-7:#135a31;
  /* diverging blue<->red, neutral mid overridden per theme */
  --div-neg-2:#104281; --div-neg-1:#3987e5; --div-mid:#f0efec; --div-pos-1:#e66767; --div-pos-2:#8a1f1f;
  /* status: fixed, never themed */
  --status-good:#0ca30c; --status-warning:#fab219; --status-serious:#ec835a; --status-critical:#d03b3b;

  --dur-fast: 120ms; --dur-med: 200ms;
  --ease: cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --series-1:#5fd38a; --series-2:#5b9cf0; --series-3:#f0b44c; --series-4:#a98bf0;
    --series-5:#f07a92; --series-6:#3cc8c8; --series-7:#b5d65a; --series-8:#e8765c;
    --div-mid:#2a332d;
  }
}
:root[data-theme="dark"] {
  --series-1:#5fd38a; --series-2:#5b9cf0; --series-3:#f0b44c; --series-4:#a98bf0;
  --series-5:#f07a92; --series-6:#3cc8c8; --series-7:#b5d65a; --series-8:#e8765c;
  --div-mid:#2a332d;
}

/* ---------- skin: retro ---------- */
/* Handheld-console chrome in a low-glare green palette: deep moss-black with
   lime and mint (dark), pale Game Boy green with forest green (light). Pixel
   borders use --frame, a quiet tone, instead of full-contrast ink. */
[data-skin="retro"] {
  --font-head: var(--font-retro-head);
  --font-label: var(--font-retro-label);
  --font-body: var(--font-retro-body);
  --fs-head: 11px; --fs-head-lg: 13px;
  --fs-label: 13px; --fs-body: 20px; --fs-small: 18px;
  --ls-head: .06em;
  --radius: 0px;
}
/* Light values are the default for the skin (covers theme="light" and the
   theme="auto" + light-OS case); dark overrides below win via
   [data-theme="dark"] or the prefers-color-scheme media query. */
[data-skin="retro"] {
  color-scheme: light;
  --surface-0: #cfd9bf; --surface-1: #dce5cc; --surface-2: #e6edd8;
  --ink: #17220f; --ink-2: #33432a; --muted: #4a5a3f;
  --grid: #c3cfb0; --axis: #a3b18e; --border: rgba(23,34,15,.25);
  --frame: #71826a;
  --tooltip-bg: #e6edd8;
  --accent: #2d6a2f;   /* forest green */
  --accent-2: #1d5e4d; /* deep teal-green */
  --fx-1: #3f8f2a; --fx-2: #b8683f; --fx-3: #6f5fb3;
}
[data-skin="retro"][data-theme="dark"] {
  --surface-0: #0d110e; --surface-1: #131913; --surface-2: #1a221b;
  --ink: #e1ebd4; --ink-2: #aebb9f; --muted: #8e9d83;
  --grid: #243026; --axis: #344337; --border: rgba(225,235,212,.15);
  --frame: #3c4c3e;
  --tooltip-bg: #1a221b;
  --accent: #a6d65e;   /* lime */
  --accent-2: #7fd6a8; /* mint */
  --fx-1: #7fd34a; --fx-2: #e9a07f; --fx-3: #a996e0;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-skin="retro"]:not([data-theme="light"]) {
    --surface-0: #0d110e; --surface-1: #131913; --surface-2: #1a221b;
    --ink: #e1ebd4; --ink-2: #aebb9f; --muted: #8e9d83;
    --grid: #243026; --axis: #344337; --border: rgba(225,235,212,.15);
    --frame: #3c4c3e;
    --tooltip-bg: #1a221b;
    --accent: #a6d65e; --accent-2: #7fd6a8;
    --fx-1: #7fd34a; --fx-2: #e9a07f; --fx-3: #a996e0;
    color-scheme: dark;
  }
}

/* ---------- skin: pro ---------- */
[data-skin="pro"] {
  --frame: var(--ink);
  --font-head: var(--font-pro-head);
  --font-label: var(--font-pro-label);
  --font-body: var(--font-pro-body);
  --fs-head: 13px; --fs-head-lg: 16px;
  --fs-label: 11px; --fs-body: 14px; --fs-small: 12px;
  --ls-head: .02em;
  --radius: 3px;
  --accent: #2f6a17;   /* forest green (vwesley.dev light accent) */
  --accent-2: #14673a; /* mint-forest (links, focus) */
  --fx-1: #35a52a; --fx-2: #c7704a; --fx-3: #7d68c4; /* background pixel field */
}
[data-skin="pro"] {
  --surface-0: #f3f7ec; --surface-1: #f9fbf5; --surface-2: #ffffff;
  --ink: #1b2712; --ink-2: #3a4a2f; --muted: #52623f;
  --grid: #dfe8d2; --axis: #c9d6b8; --border: rgba(27,39,18,.14);
  --tooltip-bg: #ffffff;
  color-scheme: light;
}
[data-skin="pro"][data-theme="dark"] {
  --surface-0: #11150e; --surface-1: #151a11; --surface-2: #1a2015;
  --ink: #e9f0df; --ink-2: #aebb9f; --muted: #8e9d80;
  --grid: #232c1d; --axis: #2f3a26; --border: rgba(233,240,223,.12);
  --tooltip-bg: #1a2015;
  --accent: #8fd15a; --accent-2: #4fe0a0;
  --fx-1: #6fe23c; --fx-2: #e9a07f; --fx-3: #a996e0;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-skin="pro"]:not([data-theme="light"]) {
    --surface-0: #11150e; --surface-1: #151a11; --surface-2: #1a2015;
    --ink: #e9f0df; --ink-2: #aebb9f; --muted: #8e9d80;
    --grid: #232c1d; --axis: #2f3a26; --border: rgba(233,240,223,.12);
    --tooltip-bg: #1a2015;
    --accent: #8fd15a; --accent-2: #4fe0a0;
    --fx-1: #6fe23c; --fx-2: #e9a07f; --fx-3: #a996e0;
    color-scheme: dark;
  }
}
/* default before JS sets data-theme: assume retro+light so first paint isn't unstyled */
html:not([data-skin]) { --surface-0:#11150e; --surface-1:#151a11; --surface-2:#1a2015; --ink:#e9f0df; }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--surface-0);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-head); letter-spacing: var(--ls-head); margin: 0; }
h2.section__title { font-size: var(--fs-head); text-transform: uppercase; color: var(--ink); }
a { color: var(--accent-2); }
button, input, select { font-family: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
tr[tabindex]:focus-visible { outline-offset: -2px; }
html { scroll-padding-top: calc(var(--header-real, var(--header-h)) + var(--stickybar-h, 0px) + 8px); }

/* CRT scanlines (retro only, disabled under reduced motion via opacity+no anim already; static overlay is fine) */
[data-skin="retro"] body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 500;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.021) 0, rgba(0,0,0,.021) 1px, transparent 1px, transparent 3px);
  /* No mix-blend-mode: blending a full-screen fixed layer forces the browser to
     re-composite the whole page on every scroll frame. A plain translucent
     layer on its own compositor layer looks the same and scrolls smoothly. */
  transform: translateZ(0);
  contain: strict;
}
[data-skin="pro"] body::before { content: none; }

/* pixel-window border (retro) vs hairline (pro) */
.pixel-panel {
  border: 2px solid var(--frame);
  box-shadow: 3px 0 0 var(--frame), 0 3px 0 var(--frame), 3px 3px 0 var(--frame), -0 -0 0 var(--frame);
  image-rendering: pixelated;
}
[data-skin="pro"] .pixel-panel { border: 1px solid var(--border); box-shadow: none; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 300;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  min-height: var(--header-h);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-1);
  border-bottom: 2px solid var(--frame);
}
[data-skin="pro"] .site-header { border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-head); font-size: var(--fs-head-lg); text-transform: uppercase; white-space: nowrap; }
.brand__logo { width: 28px; height: 28px; flex: none; }
.brand__name b { color: var(--accent); }
.header__controls { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; flex-wrap: wrap; }

/* ---------- segmented control ---------- */
.segmented { display: inline-flex; border: 2px solid var(--frame); border-radius: var(--radius); overflow: hidden; }
[data-skin="pro"] .segmented { border: 1px solid var(--border); }
.segmented button {
  background: var(--surface-1); border: 0; cursor: pointer;
  padding: 6px 10px; font-family: var(--font-label); font-size: var(--fs-label);
  color: var(--ink-2); border-right: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.segmented button:last-child { border-right: 0; }
.segmented button[aria-pressed="true"] { background: var(--accent); color: var(--surface-1); }
.segmented button:disabled { opacity: .4; cursor: not-allowed; }
.segmented button:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--surface-2); }

/* ---------- toggle switch ---------- */
.toggle { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-label); font-size: var(--fs-label); cursor: pointer; user-select: none; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle__track { width: 34px; height: 18px; border: 2px solid var(--frame); border-radius: 9px; position: relative; background: var(--surface-2); transition: background var(--dur-fast); flex: none; }
[data-skin="pro"] .toggle__track { border: 1px solid var(--border); border-radius: 3px; }
.toggle__track::after { content: ""; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; background: var(--ink); border-radius: 50%; transition: transform var(--dur-fast) var(--ease); }
[data-skin="pro"] .toggle__track::after { border-radius: 2px; }
.toggle input:checked + .toggle__track { background: var(--accent); }
.toggle input:checked + .toggle__track::after { transform: translateX(16px); background: var(--surface-1); }
.toggle input:focus-visible + .toggle__track { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ---------- filter bar ---------- */
/* Filter bar + active-filter chips stick together under the header, so the
   filters in effect (and Clear all) stay visible while scrolling. */
.stickybar { position: sticky; top: var(--header-real, var(--header-h)); z-index: 250; }
.filterbar {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-2);
  border-bottom: 2px solid var(--frame);
  font-family: var(--font-label); font-size: var(--fs-label);
}
[data-skin="pro"] .filterbar { border-bottom: 1px solid var(--border); }
.filterbar__group { display: flex; align-items: center; gap: var(--space-2); }
.filterbar__label { color: var(--muted); font-size: var(--fs-small); text-transform: uppercase; }
.filterbar input[type="date"] {
  background: var(--surface-1); color: var(--ink); border: 2px solid var(--frame); border-radius: var(--radius);
  padding: 4px 6px; font-family: var(--font-body); font-size: var(--fs-small);
}
[data-skin="pro"] .filterbar input[type="date"] { border: 1px solid var(--border); }
.filterbar input[type="range"] { width: 120px; accent-color: var(--accent); }
.filterbar__multi { display: flex; gap: 2px; }
.filterbar__multi label {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 2px solid var(--frame); border-radius: var(--radius);
  background: var(--surface-1); cursor: pointer; font-size: var(--fs-small);
}
[data-skin="pro"] .filterbar__multi label { border: 1px solid var(--border); }
.filterbar__multi input { accent-color: var(--accent); }
.filterbar__multi label:has(input:checked) { background: var(--accent); color: var(--surface-1); }
.filterbar__sample { margin-left: auto; color: var(--ink-2); font-size: var(--fs-small); white-space: nowrap; }
.filterbar__body { display: contents; }

/* collapse / expand */
.filterbar__toggle-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: var(--surface-1); color: var(--ink-2); border: 2px solid var(--frame);
  border-radius: var(--radius); padding: 4px 8px; font-family: var(--font-label); font-size: var(--fs-small); cursor: pointer;
}
[data-skin="pro"] .filterbar__toggle-btn { border: 1px solid var(--border); }
.filterbar__toggle-btn:hover { background: var(--surface-2); color: var(--ink); }
.filterbar__summary {
  display: none; min-width: 0; flex: 1 1 0; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-label); font-size: var(--fs-small); color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filterbar__summary::after { content: " · " attr(data-sample); color: var(--muted); }
.filterbar__summary:not([data-sample])::after, .filterbar__summary[data-sample=""]::after { content: none; }
:root[data-filters-collapsed] .filterbar { padding-block: var(--space-1); }
:root[data-filters-collapsed] .filterbar__body,
:root[data-filters-collapsed] .header__controls { display: none; }
:root[data-filters-collapsed] .filterbar__summary { display: block; }
:root[data-filters-collapsed] .filterbar__toggle-btn { margin-left: auto; }

@media (max-width: 700px) {
  /* expanded filters are tall on phones: only stick while collapsed */
  :root:not([data-filters-collapsed]) .stickybar { position: static; }
  :root:not([data-filters-collapsed]) .filterbar__body { display: flex; flex-wrap: wrap; gap: var(--space-3); width: 100%; }
  .filterbar__sample { flex-basis: 100%; margin-left: 0; order: 10; white-space: normal; }
  :root:not([data-filters-collapsed]) .filterbar__toggle-btn { order: -1; margin-left: auto; }
  :root[data-filters-collapsed] .filterbar { flex-wrap: nowrap; }
  .filterbar__toggle-more { display: none; }
  .filterbar__group { flex-wrap: wrap; max-width: 100%; }
  .filterbar__multi { flex-wrap: wrap; gap: 4px; }
  .filterbar input[type="date"] { flex: 1 1 120px; min-width: 0; }
}

/* ---------- chips (active filters) ---------- */
.chips {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  padding: var(--space-2) var(--space-4);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-1));
  border-bottom: 1px solid var(--border);
  box-shadow: inset 3px 0 0 var(--accent);
}
.chips:empty { display: none; }
.chips__title {
  font-family: var(--font-label); font-size: var(--fs-small); text-transform: uppercase; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 6px; margin-right: var(--space-1);
}
.chips__count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--surface-1); font-weight: 700;
}
.chips__note { flex-basis: 100%; color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 700px) { .chips__note { display: none; } .chips { padding-block: var(--space-1); } }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 2px solid var(--frame); border-radius: 12px;
  padding: 3px 4px 3px 8px; font-family: var(--font-label); font-size: var(--fs-small);
  animation: chip-pop var(--dur-med) var(--ease);
}
[data-skin="pro"] .chip { border: 1px solid var(--border); border-radius: 3px; }
.chip img.sprite { width: 20px; height: 20px; image-rendering: pixelated; }
.chip--neg { background: color-mix(in srgb, var(--status-critical) 18%, var(--surface-2)); }
.chip--neg .chip__label::before { content: "NOT "; color: var(--status-critical); font-weight: 700; }
.chip__swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.chip__x {
  border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1;
  width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
}
.chip__x:hover { background: var(--status-critical); color: #fff; }
.chips__clear {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-1); color: var(--ink); border: 1px solid var(--accent); border-radius: var(--radius);
  cursor: pointer; font-family: var(--font-label); font-size: var(--fs-small); padding: 4px 10px;
}
.chips__clear:hover { background: var(--accent); color: var(--surface-1); }
.chips__clear:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
@keyframes chip-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chip { animation: none; } }

/* ---------- layout ---------- */
/* 12-column dashboard grid (>=1100px). Generic span utilities: put
   `.span-4/.span-6/.span-8/.span-12` directly on any .section (or other
   grid child) to size it; sections with no span class default to full
   width. Collapses to a 2-col grid between 900-1099px, then 1 column
   below 900px so nothing needs its own responsive rules. */
main.grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4);
  padding: var(--space-4);
  max-width: 1440px; margin: 0 auto;
}
main.grid .section { grid-column: span 12; }
/* Same specificity family as `main.grid .section` above (both two classes +
   one type), so source order alone would be fragile; scope every span rule
   under `.grid` too so it always wins over the bare default. */
main.grid .section.span-12 { grid-column: span 12; }
main.grid .section.span-8 { grid-column: span 8; }
main.grid .section.span-6 { grid-column: span 6; }
main.grid .section.span-4 { grid-column: span 4; }

@media (max-width: 1099px) and (min-width: 900px) {
  main.grid { grid-template-columns: repeat(2, 1fr); }
  main.grid .section,
  main.grid .section.span-12, main.grid .section.span-8, main.grid .section.span-6, main.grid .section.span-4 { grid-column: span 2; }
}
@media (max-width: 899px) {
  main.grid { grid-template-columns: 1fr; padding: var(--space-3); gap: var(--space-3); }
  main.grid .section,
  main.grid .section.span-12, main.grid .section.span-8, main.grid .section.span-6, main.grid .section.span-4 { grid-column: span 1; }
}

/* ---------- card ---------- */
.card {
  /* slightly see-through, so the background pixel field shimmers behind the cards */
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  border: 2px solid var(--frame);
  border-radius: var(--radius);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
[data-skin="pro"] .card { border: 1px solid var(--border); }
.card:hover { transform: translateY(-1px); }
.card__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--frame);
}
[data-skin="pro"] .card__head { border-bottom: 1px solid var(--border); }
/* Title never shrinks below its own single-line width; when the meta line
   can't fit beside it on the same row, flex-wrap drops the whole meta line
   to its own row instead of squeezing the title into 2-3 lines. */
/* Cap the "don't shrink below single line" floor at 65% of the header's
   width: short titles still hold their full line (pushing the meta line
   below instead of squeezing into 2-3 lines), but a genuinely long title
   ("Most Common Weaknesses in the Field") still wraps within its own box
   instead of overflowing the card. */
.card__head h2, .card__head h3 { font-size: var(--fs-head); text-transform: uppercase; flex: 1 1 auto; min-width: min(max-content, 65%); }
.card__meta, .meta-line { color: var(--muted); font-size: var(--fs-small); font-family: var(--font-body); }
.meta-line__part { white-space: nowrap; }
.card__body { padding: var(--space-4); }

/* ---------- KPI tile ---------- */
.kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); }
.kpi__label { font-family: var(--font-label); font-size: var(--fs-small); color: var(--muted); text-transform: uppercase; }
.kpi__value { font-family: var(--font-head); font-size: 28px; color: var(--ink); font-variant-numeric: tabular-nums; }
[data-skin="retro"] .kpi__value { font-family: var(--font-body); font-size: 34px; }
.kpi__delta { font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.kpi__delta--up { color: var(--status-good); }
.kpi__delta--down { color: var(--status-critical); }

/* ---------- table ---------- */
.table-wrap { overflow-x: auto; max-width: 100%; }
/* Cap very long tables (usage leaderboard, regulation shift) instead of
   letting the page grow thousands of pixels tall; header stays visible
   while scrolling the body. */
.table-wrap--scroll { max-height: 720px; overflow-y: auto; }
.table-wrap--scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-1); }
table.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); font-family: var(--font-body); }
table.data-table th, table.data-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--grid); white-space: nowrap; }
table.data-table th { font-family: var(--font-label); text-transform: uppercase; color: var(--muted); font-size: var(--fs-small); }
table.data-table td.num, table.data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data-table tbody tr:hover { background: var(--surface-2); cursor: pointer; }

/* ---------- pill / chip (static, for legends etc.) ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px;
  font-family: var(--font-label); font-size: var(--fs-small); color: #fff;
}
[data-skin="pro"] .pill { border-radius: 3px; }

/* ---------- tooltip for [data-tip] (js/ui/tip.js positions it; ECharts tooltips use --tooltip-bg too) ---------- */
[data-tip] { cursor: help; }
button[data-tip] { cursor: pointer; }
.tip {
  position: fixed; z-index: 1000; pointer-events: none;
  max-width: min(320px, calc(100vw - 16px)); width: max-content;
  background: var(--tooltip-bg); color: var(--ink); border: 1px solid var(--border);
  padding: 6px 10px; border-radius: var(--radius); font-family: var(--font-body); font-size: var(--fs-small);
  line-height: 1.4; white-space: normal; overflow-wrap: anywhere; box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.tip[hidden] { display: none; }

/* ---------- empty / insufficient-data state ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-6) var(--space-4); color: var(--muted); text-align: center; font-family: var(--font-body);
}
.empty-state__title { font-family: var(--font-label); text-transform: uppercase; color: var(--ink-2); }

/* ---------- skeleton loader ---------- */
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-1) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: skeleton-sweep 1.4s ease infinite; border-radius: var(--radius); }
@keyframes skeleton-sweep { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; opacity: .6; } }

/* ---------- section coming-soon ---------- */
.section__mount:empty::before { content: ""; }
.section-placeholder { padding: var(--space-5); text-align: center; color: var(--muted); font-family: var(--font-label); }

/* ---------- drawer / deep-dive aside ---------- */
.drawer { position: fixed; inset: 0; z-index: 600; visibility: hidden; overflow: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity var(--dur-med) var(--ease); }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(480px, 100vw);
  background: var(--surface-1); border-left: 2px solid var(--frame);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--dur-med) var(--ease);
}
[data-skin="pro"] .drawer__panel { border-left: 1px solid var(--border); }
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--frame); }
[data-skin="pro"] .drawer__head { border-bottom: 1px solid var(--border); }
.drawer__head h2 { font-size: var(--fs-head); text-transform: uppercase; }
.drawer__close { border: 2px solid var(--frame); background: var(--surface-2); width: 28px; height: 28px; cursor: pointer; font-size: 16px; border-radius: var(--radius); }
[data-skin="pro"] .drawer__close { border: 1px solid var(--border); }
.drawer__body { padding: var(--space-4); overflow-y: auto; flex: 1; }
@media (prefers-reduced-motion: reduce) { .drawer__panel, .drawer__backdrop { transition: none; } }

/* ---------- footer ---------- */
.site-footer { padding: var(--space-4); text-align: center; color: var(--muted); font-size: var(--fs-small); font-family: var(--font-body); border-top: 2px solid var(--frame); background: var(--surface-1); }
[data-skin="pro"] .site-footer { border-top: 1px solid var(--border); }

/* ---------- toast ---------- */
.toast-region { position: fixed; bottom: var(--space-4); right: var(--space-4); z-index: 700; display: flex; flex-direction: column; gap: var(--space-2); }
.toast {
  background: var(--surface-2); border: 2px solid var(--frame); border-radius: var(--radius); padding: var(--space-2) var(--space-3);
  font-family: var(--font-body); font-size: var(--fs-small); max-width: 320px; box-shadow: 0 4px 10px rgba(0,0,0,.2);
  animation: toast-in var(--dur-med) var(--ease);
}
[data-skin="pro"] .toast { border: 1px solid var(--border); }
.toast--error { border-color: var(--status-critical); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ---------- creator credits ---------- */
.creator__body {
  display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: var(--space-4); align-items: center;
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 90% at 18% 55%, color-mix(in srgb, #3fae6a 28%, transparent), transparent 70%),
    radial-gradient(circle, color-mix(in srgb, #3fae6a 22%, transparent) 1.2px, transparent 1.6px) 0 0 / 14px 14px;
}
.creator__art img {
  display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; object-position: bottom;
  /* the drawing is cut at the bottom: fade it out like a vignette */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
  filter: drop-shadow(0 0 18px color-mix(in srgb, #3fae6a 45%, transparent));
}
.creator__eyebrow { margin: 0; font-family: var(--font-label); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.creator__name { margin: 2px 0 var(--space-2); font-family: var(--font-head); font-size: clamp(1.25rem, 3vw, 1.75rem); color: var(--accent); }
.creator__blurb { margin: 0 0 var(--space-3); color: var(--ink-2); max-width: 52ch; }
.creator__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.creator__links a {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; min-height: 36px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
  color: var(--ink); text-decoration: none; font-family: var(--font-label); font-size: var(--fs-small);
}
.creator__links a:hover { border-color: var(--accent); color: var(--accent); }
.creator__links svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.creator__links svg .fill { fill: currentColor; stroke: none; }
.site-footer a { color: inherit; }
@media (max-width: 600px) {
  .creator__body { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .creator__art { width: min(220px, 60vw); }
  .creator__links { justify-content: center; }
}

/* "what this shows · click: …" line under a chart (ui/meta.js clickHint) */
.click-hint { margin: 0 0 var(--space-2); color: var(--muted); font-size: var(--fs-small); font-family: var(--font-body); line-height: 1.4; }

/* ---------- credits: pixel fireflies + sparkles + name glow (pure CSS) ---------- */
.creator__fx { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.creator__art, .creator__text { position: relative; z-index: 1; }
.creator__fx i {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s);
  background: #e6ffb0; image-rendering: pixelated;
  box-shadow: 0 0 4px 1px #b8f06a, 0 0 12px 4px color-mix(in srgb, #5fd07a 70%, transparent), 0 0 26px 8px color-mix(in srgb, #3fae6a 35%, transparent);
  animation: ff-drift var(--d) ease-in-out var(--delay) infinite alternate, ff-blink var(--b) steps(6, end) var(--delay) infinite;
}
@keyframes ff-drift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(calc(var(--dx) * .6), calc(var(--dy) * -.4)); }
  100% { transform: translate(var(--dx), var(--dy)); }
}
@keyframes ff-blink { 0%, 100% { opacity: .15; } 35% { opacity: 1; } 60% { opacity: .75; } 80% { opacity: .3; } }
/* 4-point pixel star, like the sparkles on vwesley.dev */
.creator__fx .spark {
  position: absolute; left: var(--x); top: var(--y); width: 15px; height: 15px; color: #8ff0a4;
  background:
    linear-gradient(currentColor, currentColor) 50% 50% / 3px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 50% 50% / 100% 3px no-repeat;
  filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px color-mix(in srgb, #3fae6a 60%, transparent));
  animation: ff-twinkle var(--t) steps(8, end) var(--delay, 0s) infinite;
}
.creator__fx .spark--sm { width: 9px; height: 9px; }
@keyframes ff-twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 45% { opacity: 1; transform: scale(1); } 60% { opacity: .9; transform: scale(.85); } }
.creator__name span {
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 22px color-mix(in srgb, #3fae6a 55%, transparent);
  animation: name-glow 3.6s ease-in-out infinite;
}
@keyframes name-glow {
  0%, 100% { text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 16px color-mix(in srgb, #3fae6a 40%, transparent); }
  50% { text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 85%, transparent), 0 0 30px color-mix(in srgb, #3fae6a 70%, transparent); }
}
/* light themes: deeper green pixels so they read on a pale card */
:root[data-theme="light"] .creator__fx i { background: #5fbf4a; box-shadow: 0 0 3px 1px #7fd65f, 0 0 10px 3px color-mix(in srgb, #3fae6a 45%, transparent); }
:root[data-theme="light"] .creator__fx .spark { color: #2f9a55; }
@media (prefers-reduced-motion: reduce) {
  .creator__fx i, .creator__fx .spark, .creator__name span { animation: none !important; }
  .creator__fx i { opacity: .6; }
  .creator__fx .spark { opacity: .8; }
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] .creator__fx i { background: #5fbf4a; box-shadow: 0 0 3px 1px #7fd65f, 0 0 10px 3px color-mix(in srgb, #3fae6a 45%, transparent); }
  :root[data-theme="auto"] .creator__fx .spark { color: #2f9a55; }
}

/* ---------- background pixel field (js/ui/pixelfield.js; the vwesley.dev look) ---------- */
.fx-region { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; }
.fx-region[data-ready] { opacity: 1; transition: opacity .8s; }
.fx-region canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
@media print { .fx-region { display: none; } }