/* Layout: one centred column, cards in auto-fit grids. Palette: cool neutrals with one blue accent; status colours for ranges only. */
:root {
  --bg: #f4f6f8; --color-panel: #ffffff; --color-fg: #1a1f26; --color-fg-muted: #5a6472; --color-border-line: #dde2e8;
  --color-ok: #2f8a4e; --color-warn: #b7791f; --color-bad: #c2413b;
  --on-accent: #ffffff; --c1: #2c6db3; --c2: #d2692b; --c3: #3f9a63; --c4: #8758c4; --c5: #b88a1f;
  --cds-chart-muted: #9aa5b3; --cds-chart-grid: #e8ecf0; --cds-chart-axis: #b4bdc8; --cds-chart-reference: #7d8794; --cds-chart-status-critical: #c2413b;
  --cds-surface-popover: #ffffff; --cds-border: #d4dae1; --cds-shadow-popover: 0 4px 16px rgba(20, 30, 45, .12); --cds-text-secondary: #5a6472;
  --font-anthropic-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-anthropic-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --cds-font-size-caption: .78rem; --cds-font-size-body: .95rem; --cds-font-size-heading: 1.08rem; --cds-font-size-title: 2rem; --cds-font-weight-medium: 600;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 16px; --cds-gap-xl: 40px;
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 12px; --cds-pad-lg: 20px; --cds-radius: 10px;
  --cds-dur-slow: .4s; --cds-ease-out: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101317; --color-panel: #171b21; --color-fg: #e6e9ee; --color-fg-muted: #9aa3af; --color-border-line: #2a3039;
    --color-ok: #5cc784; --color-warn: #e0a84a; --color-bad: #ef7a73;
    --on-accent: #0b1622; --c1: #6aa6ec; --c2: #f0935a; --c3: #6cc58f; --c4: #b18cee; --c5: #e2b94f;
    --cds-chart-muted: #6c7684; --cds-chart-grid: #232a33; --cds-chart-axis: #3b4450; --cds-chart-reference: #8c96a3; --cds-chart-status-critical: #ef7a73;
    --cds-surface-popover: #1e232b; --cds-border: #343c47; --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, .5); --cds-text-secondary: #9aa3af;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--color-fg); font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-body);
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left)); }
a { color: var(--c1); }
.wj-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 72rem; margin: 0 auto 24px; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.wj-nav .btn { font-size: var(--cds-font-size-body); }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--c1); background: var(--c1); color: var(--on-accent); text-decoration: none; font-weight: 600; cursor: pointer; font: inherit; }
.btn.ghost { background: transparent; color: var(--c1); }
.btn:focus-visible, input:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }
.dash-skeleton { color: transparent; background: var(--cds-chart-grid); border-radius: 4px; }
.wj-loading { color: var(--color-fg-muted); }
.wj { display: grid; gap: var(--cds-gap-xl); font-family: var(--font-anthropic-sans); max-width: 72rem; margin-inline: auto; }
.wj-head { display: grid; gap: var(--cds-gap-sm); }
.wj-eyebrow { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); letter-spacing: .06em; text-transform: uppercase; }
.wj-title { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.05; margin: 0; text-wrap: balance; }
.wj-lede { font-size: var(--cds-font-size-heading); color: var(--color-fg-muted); max-width: 46rem; margin: 0; line-height: 1.45; text-wrap: pretty; }
.wj-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: var(--cds-gap-md); }
.wj-tile { display: grid; gap: var(--cds-gap-xs); align-content: start; padding-block: var(--cds-pad-md); border-top: 1px solid var(--color-border-line); }
.wj-tile .lbl { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.wj-tile .big { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); font-variant-numeric: tabular-nums; line-height: 1.1; }
.wj-tile .big small { font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-body); color: var(--color-fg-muted); margin-left: .2em; }
.wj-tile .sub { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
.wj-section { display: grid; gap: var(--cds-gap-md); }
.wj-section > h2 { font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); margin: 0; }
.wj-section > p.intro { margin: 0; color: var(--color-fg-muted); max-width: 46rem; line-height: 1.5; }
.wj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--cds-gap-md); }
.wj-card { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-lg); display: grid; gap: var(--cds-gap-sm); align-content: start; min-width: 0; }
.wj-card h3 { margin: 0; font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); }
.wj-card .note { margin: 0; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); line-height: 1.45; }
.wj-card .note b, .wj .callout b { font-weight: 600; color: var(--color-fg); font-variant-numeric: tabular-nums; }
.wj-chart { position: relative; min-width: 0; }
.wj-chart svg { display: block; overflow: visible; }
.wj-chart text { fill: var(--color-fg-muted); font-size: 11px; font-family: var(--font-anthropic-sans); font-variant-numeric: tabular-nums; }
.wj-chart .ann { fill: var(--color-fg); font-size: 11px; }
.wj-chart .axt { fill: var(--color-fg-muted); font-size: 11px; font-weight: 500; }
.wj-main { min-height: 340px; }
.wj-pace { min-height: 220px; }
.wj-small { min-height: 200px; }
.wj-multi { min-height: 200px; }
.wj-cal { min-height: 150px; overflow-x: auto; }
.wj-scatter { min-height: 252px; }
.wj-tip { position: absolute; pointer-events: none; background: var(--cds-surface-popover); border: 1px solid var(--cds-border); border-radius: var(--cds-radius); box-shadow: var(--cds-shadow-popover); padding: var(--cds-pad-xs) var(--cds-pad-sm); font-size: var(--cds-font-size-caption); white-space: nowrap; z-index: 2; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.wj-tip .d { color: var(--cds-text-secondary); }
.wj-tip .row { display: flex; gap: 6px; align-items: center; }
.wj-tip .sw { width: 8px; height: 8px; border-radius: 50%; }
.wj-legend { display: flex; flex-wrap: wrap; gap: var(--cds-gap-md); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.wj-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wj-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.wj-legend i.dot { width: 7px; height: 7px; border-radius: 50%; }
.wj-legend i.band { width: 14px; height: 10px; border-radius: 2px; }
.wj-table-wrap { overflow-x: auto; }
.wj-table { width: 100%; border-collapse: collapse; font-size: var(--cds-font-size-body); font-variant-numeric: tabular-nums; }
.wj-table th, .wj-table td { padding: var(--cds-pad-xs) var(--cds-pad-sm); text-align: right; border-bottom: 1px solid var(--color-border-line); white-space: nowrap; }
.wj-table th:first-child, .wj-table td:first-child { text-align: left; }
.wj-table th { font-weight: var(--cds-font-weight-medium); color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
.wj-table .gain { color: var(--color-warn); }
.wj-table .loss { color: var(--color-ok); }
.wj-measures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--cds-gap-md); }
.wj-m { display: grid; gap: var(--cds-gap-xs); }
.wj-m .name { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.wj-m .val { font-family: var(--font-anthropic-serif); font-size: var(--cds-font-size-title); font-variant-numeric: tabular-nums; line-height: 1.1; }
.wj-m .val small { font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); margin-left: .25em; }
.wj-m .from { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
.wj .callout { margin: 0; font-size: var(--cds-font-size-body); line-height: 1.5; max-width: 46rem; }
.wj-fail { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: inherit; color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }
.wj-fail::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--color-bad); }
@media (prefers-reduced-motion: no-preference) {
  .wj-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: wj-draw 1.6s var(--cds-ease-out) forwards; }
  @keyframes wj-draw { to { stroke-dashoffset: 0; } }
}