/* GunningRadar design tokens + base + .gr- components. v1, 2026-10-27.
   One file for site B and the app. Light theme only (see DESIGN-SYSTEM.md).
   Fonts: put fonts/ next to this file, or fix the url() paths. */

/* ---------- fonts (OFL, self-hosted, latin + latin-ext split by unicode-range) ---------- */
@font-face { font-family: "Fraunces GR"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/fraunces-latin-display.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces GR"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/fraunces-latin-ext-display.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tokens ---------- */
:root {
  color-scheme: light;

  /* colour: neutrals (warm paper, black ink) */
  --gr-paper: #F3EFE6;        /* page background */
  --gr-surface: #FFFFFF;      /* tables, cards, inputs */
  --gr-sunken: #ECE7DC;       /* table head, hover, code */
  --gr-ink: #121212;          /* 16.3:1 on paper, 18.7:1 on surface */
  --gr-ink-2: #4B463F;        /* secondary text: 8.1 / 9.4 */
  --gr-ink-3: #5E584F;        /* meta, captions: 6.1 / 7.0 / 5.7 on sunken */
  --gr-rule: #D9D1C3;         /* hairlines, decorative only (1.5:1) */
  --gr-rule-strong: #8C857B;  /* input borders, focusable edges: 3.6 / 3.2 */

  /* colour: one accent (the radar dot) */
  --gr-accent: #FF5A1F;       /* fills only: CTA bg (ink text 6.0:1), bars, dot, focus */
  --gr-accent-ink: #B53A0C;   /* accent as text: 5.1 paper / 5.9 surface */
  --gr-accent-tint: #FFE7D6;  /* highlight row, selection */

  /* colour: semantic (text on own tint >= 5.5:1) */
  --gr-pos: #1F6B45;  --gr-pos-bg: #E4F0E8;
  --gr-neg: #B42318;  --gr-neg-bg: #FBE8E5;
  --gr-warn: #8A5300; --gr-warn-bg: #FBEFD5;
  --gr-info: #2A3550; --gr-info-bg: #E6E9F0;

  /* colour: data viz, max 5, in this order */
  --gr-dv-1: #2A3550;  /* slate: main series */
  --gr-dv-2: #FF5A1F;  /* orange: the one thing to look at */
  --gr-dv-3: #4F8A6B;  /* sage */
  --gr-dv-4: #C99A2E;  /* ochre: needs direct label (2.6:1) */
  --gr-dv-5: #A39C92;  /* stone: "rest", "overig" */

  /* type */
  --gr-f-display: "Fraunces GR", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --gr-f-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gr-f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gr-fs-display: clamp(2.5rem, 3.2vw + 1.4rem, 4rem);      /* 40 -> 64 */
  --gr-fs-h1: clamp(2rem, 1.6vw + 1.45rem, 2.75rem);         /* 32 -> 44 */
  --gr-fs-h2: clamp(1.5rem, .9vw + 1.2rem, 2rem);            /* 24 -> 32 */
  --gr-fs-h3: 1.25rem;    /* 20 */
  --gr-fs-h4: 1rem;       /* 16, sans 600 */
  --gr-fs-lede: 1.1875rem;/* 19 */
  --gr-fs-body: 1rem;     /* 16 */
  --gr-fs-small: .875rem; /* 14 */
  --gr-fs-data: .875rem;  /* 14, tables */
  --gr-fs-kpi: 2.25rem;   /* 36, sans 600 tnum */
  --gr-fs-meta: .75rem;   /* 12, mono meta / source lines */

  /* space: 4px base, use 8px steps for layout */
  --gr-s-1: 4px;  --gr-s-2: 8px;  --gr-s-3: 12px; --gr-s-4: 16px; --gr-s-5: 24px;
  --gr-s-6: 32px; --gr-s-7: 48px; --gr-s-8: 64px; --gr-s-9: 96px; --gr-s-10: 128px;

  --gr-r-1: 2px;  /* badges, inputs */
  --gr-r-2: 4px;  /* buttons, cards, tables */
  --gr-r-pill: 999px;

  --gr-hair: 1px solid var(--gr-rule);
  --gr-line: 1px solid var(--gr-ink);
  --gr-shadow-1: 0 1px 2px rgba(18,18,18,.06);
  --gr-shadow-2: 0 1px 2px rgba(18,18,18,.06), 0 8px 24px -12px rgba(18,18,18,.18);

  --gr-max: 1200px;       /* content */
  --gr-max-wide: 1360px;  /* app tables */
  --gr-max-text: 40rem;   /* reading measure ~68ch */
  --gr-pad: clamp(16px, 4vw, 48px);
  --gr-gutter: 24px;

  --gr-dur: 160ms;
  --gr-ease: cubic-bezier(.2, .6, .2, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--gr-paper); color: var(--gr-ink);
  font: 400 var(--gr-fs-body)/1.55 var(--gr-f-body);
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, .gr-display {
  font-family: var(--gr-f-display); font-weight: 500; color: var(--gr-ink);
  font-variant-numeric: lining-nums; margin: 0 0 .5em; text-wrap: balance;
}
.gr-display { font-size: var(--gr-fs-display); line-height: 1.05; letter-spacing: -.022em; }
h1 { font-size: var(--gr-fs-h1); line-height: 1.1; letter-spacing: -.018em; }
h2 { font-size: var(--gr-fs-h2); line-height: 1.2; letter-spacing: -.012em; }
h3 { font-size: var(--gr-fs-h3); line-height: 1.3; letter-spacing: -.005em; }
h4 { font: 600 var(--gr-fs-h4)/1.4 var(--gr-f-body); margin: 0 0 .4em; letter-spacing: 0; }
p { margin: 0 0 1em; max-width: var(--gr-max-text); text-wrap: pretty; }
small, .gr-small { font-size: var(--gr-fs-small); line-height: 1.5; }
.gr-lede { font-size: var(--gr-fs-lede); line-height: 1.5; color: var(--gr-ink-2); }
.gr-meta { font: 400 var(--gr-fs-meta)/1.5 var(--gr-f-mono); letter-spacing: .02em; color: var(--gr-ink-3); }
.gr-kicker { font: 400 var(--gr-fs-meta)/1.4 var(--gr-f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gr-ink-2); margin: 0 0 var(--gr-s-3); }
.gr-num { font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
code, kbd, .gr-mono { font-family: var(--gr-f-mono); font-size: .875em; }
::selection { background: var(--gr-accent-tint); color: var(--gr-ink); }
:focus-visible { outline: 2px solid var(--gr-accent); outline-offset: 2px; border-radius: var(--gr-r-1); }
img, svg { max-width: 100%; height: auto; }
hr { border: 0; border-top: var(--gr-hair); margin: var(--gr-s-6) 0; }

a { color: var(--gr-ink); text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: .18em; text-decoration-color: var(--gr-rule-strong);
    transition: color var(--gr-dur) var(--gr-ease), text-decoration-color var(--gr-dur) var(--gr-ease); }
a:hover { color: var(--gr-accent-ink); text-decoration-color: currentColor; }

.gr-wrap { max-width: var(--gr-max); margin: 0 auto; padding: 0 var(--gr-pad); }
.gr-wrap--wide { max-width: var(--gr-max-wide); }
.gr-section { padding: var(--gr-s-9) 0; border-top: var(--gr-hair); }
.gr-grid { display: grid; gap: var(--gr-gutter); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.gr-stack > * + * { margin-top: var(--gr-s-4); }
.gr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gr-skip { position: absolute; left: 12px; top: -60px; background: var(--gr-ink); color: #fff; padding: 8px 16px; z-index: 50; }
.gr-skip:focus { top: 12px; color: #fff; }

/* ---------- buttons ---------- */
.gr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gr-s-2);
  min-height: 44px; padding: 0 var(--gr-s-5); border-radius: var(--gr-r-2);
  font: 600 .9375rem/1 var(--gr-f-body); letter-spacing: 0; text-decoration: none; cursor: pointer;
  border: 1px solid var(--gr-ink); background: var(--gr-ink); color: #fff;
  transition: background-color var(--gr-dur) var(--gr-ease), border-color var(--gr-dur) var(--gr-ease), color var(--gr-dur) var(--gr-ease);
}
.gr-btn:hover { background: #2B2B2B; color: #fff; }
.gr-btn--accent { background: var(--gr-accent); border-color: var(--gr-accent); color: var(--gr-ink); }
.gr-btn--accent:hover { background: #F04A10; border-color: #F04A10; color: var(--gr-ink); }
.gr-btn--ghost { background: transparent; color: var(--gr-ink); border-color: var(--gr-rule-strong); }
.gr-btn--ghost:hover { background: var(--gr-surface); color: var(--gr-ink); border-color: var(--gr-ink); }
.gr-btn--sm { min-height: 36px; padding: 0 var(--gr-s-4); font-size: .875rem; }
.gr-btn--block { display: flex; width: 100%; }
.gr-btn[disabled], .gr-btn[aria-disabled="true"] { background: var(--gr-sunken); border-color: var(--gr-rule); color: var(--gr-ink-3); cursor: not-allowed; }
.gr-link-arrow { font-weight: 600; text-decoration: none; }
.gr-link-arrow::after { content: "\2192"; margin-left: .3em; }

/* ---------- badges / pills ---------- */
.gr-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  border-radius: var(--gr-r-1); border: 1px solid var(--gr-rule); background: var(--gr-surface);
  font: 600 .75rem/1 var(--gr-f-body); letter-spacing: .01em; color: var(--gr-ink-2); white-space: nowrap;
}
.gr-badge--country { font: 400 .6875rem/1 var(--gr-f-mono); letter-spacing: .06em; color: var(--gr-ink); padding: 0 6px; }
.gr-badge--sector { background: var(--gr-info-bg); border-color: transparent; color: var(--gr-info); }
.gr-badge--pos { background: var(--gr-pos-bg); border-color: transparent; color: var(--gr-pos); }
.gr-badge--neg { background: var(--gr-neg-bg); border-color: transparent; color: var(--gr-neg); }
.gr-badge--warn { background: var(--gr-warn-bg); border-color: transparent; color: var(--gr-warn); }
.gr-badge--demo { background: transparent; border: 1px dashed var(--gr-accent-ink); color: var(--gr-accent-ink);
  font: 400 .6875rem/1 var(--gr-f-mono); letter-spacing: .08em; text-transform: uppercase; }
.gr-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------- data table (award rows) ---------- */
.gr-table-wrap { background: var(--gr-surface); border: var(--gr-hair); border-radius: var(--gr-r-2); overflow-x: auto; box-shadow: var(--gr-shadow-1); }
.gr-table { width: 100%; border-collapse: collapse; font-size: var(--gr-fs-data); line-height: 1.4; font-variant-numeric: lining-nums tabular-nums; }
.gr-table caption { text-align: left; padding: var(--gr-s-4) var(--gr-s-4) var(--gr-s-2); font-weight: 600; }
.gr-table th { position: sticky; top: 0; background: var(--gr-sunken); text-align: left; vertical-align: bottom;
  font: 400 .6875rem/1.3 var(--gr-f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gr-ink-2);
  padding: 10px var(--gr-s-4); border-bottom: 1px solid var(--gr-rule-strong); white-space: nowrap; }
.gr-table td { padding: 12px var(--gr-s-4); border-bottom: var(--gr-hair); vertical-align: top; }
.gr-table tbody tr:last-child td { border-bottom: 0; }
.gr-table tbody tr:hover td { background: #FBF9F4; }
.gr-table .is-num { text-align: right; white-space: nowrap; }
.gr-table .is-date { white-space: nowrap; color: var(--gr-ink-2); }
.gr-table .gr-cell-main { font-weight: 600; color: var(--gr-ink); display: block; }
.gr-table .gr-cell-sub { display: block; color: var(--gr-ink-3); font-size: .8125rem; margin-top: 2px; }
.gr-months { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.gr-months__bar { width: 48px; height: 4px; background: var(--gr-sunken); border-radius: 2px; overflow: hidden; }
.gr-months__bar > i { display: block; height: 100%; background: var(--gr-dv-1); }
.gr-months--soon { color: var(--gr-accent-ink); font-weight: 600; }
.gr-months--soon .gr-months__bar > i { background: var(--gr-accent); }
.gr-source { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between;
  padding: 10px var(--gr-s-4); border-top: var(--gr-hair); background: var(--gr-surface);
  font: 400 var(--gr-fs-meta)/1.5 var(--gr-f-mono); color: var(--gr-ink-3); }

/* ---------- KPI tile ---------- */
.gr-kpi { background: var(--gr-surface); border: var(--gr-hair); border-radius: var(--gr-r-2); padding: var(--gr-s-5); display: flex; flex-direction: column; gap: var(--gr-s-2); }
.gr-kpi__label { font-size: var(--gr-fs-small); color: var(--gr-ink-2); margin: 0; }
.gr-kpi__value { font: 600 var(--gr-fs-kpi)/1.05 var(--gr-f-body); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; margin: 0; }
.gr-kpi__delta { font-size: var(--gr-fs-small); font-weight: 600; }
.gr-kpi__delta--pos { color: var(--gr-pos); } .gr-kpi__delta--neg { color: var(--gr-neg); }
.gr-kpi__spark { height: 28px; width: 100%; }
.gr-kpi__source { margin-top: auto; padding-top: var(--gr-s-3); border-top: var(--gr-hair); font: 400 .6875rem/1.5 var(--gr-f-mono); color: var(--gr-ink-3); }

/* ---------- pricing ---------- */
.gr-price { background: var(--gr-surface); border: var(--gr-hair); border-radius: var(--gr-r-2); padding: var(--gr-s-6); display: flex; flex-direction: column; gap: var(--gr-s-4); }
.gr-price--featured { border: 1px solid var(--gr-ink); box-shadow: var(--gr-shadow-2); position: relative; }
.gr-price--featured::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--gr-accent); border-radius: var(--gr-r-2) var(--gr-r-2) 0 0; }
.gr-price__name { font: 600 1rem/1.3 var(--gr-f-body); margin: 0; }
.gr-price__amount { font: 600 2.75rem/1 var(--gr-f-body); letter-spacing: -.03em; margin: 0; font-variant-numeric: lining-nums tabular-nums; }
.gr-price__amount small { font-size: .9375rem; font-weight: 400; letter-spacing: 0; color: var(--gr-ink-2); }
.gr-price__list { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.gr-price__list li { padding: 8px 0 8px 24px; border-top: var(--gr-hair); position: relative; }
.gr-price__list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 10px; height: 5px; border-left: 2px solid var(--gr-pos); border-bottom: 2px solid var(--gr-pos); transform: rotate(-45deg); }
.gr-price__fine { font-size: var(--gr-fs-small); color: var(--gr-ink-3); margin: 0; }

/* ---------- forms ---------- */
.gr-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--gr-s-4); }
.gr-label { font: 600 .875rem/1.3 var(--gr-f-body); }
.gr-hint { font-size: .8125rem; color: var(--gr-ink-3); }
.gr-input, .gr-select, .gr-textarea {
  font: 400 1rem/1.4 var(--gr-f-body); color: var(--gr-ink); background: var(--gr-surface);
  border: 1px solid var(--gr-rule-strong); border-radius: var(--gr-r-1); min-height: 44px; padding: 10px 12px; width: 100%;
  transition: border-color var(--gr-dur) var(--gr-ease), box-shadow var(--gr-dur) var(--gr-ease);
}
.gr-input:hover, .gr-select:hover { border-color: var(--gr-ink-2); }
.gr-input:focus, .gr-select:focus, .gr-textarea:focus { outline: none; border-color: var(--gr-ink); box-shadow: 0 0 0 3px var(--gr-accent-tint), 0 0 0 4px var(--gr-accent); }
.gr-input[aria-invalid="true"] { border-color: var(--gr-neg); }
.gr-error { display: flex; gap: 6px; align-items: baseline; font-size: .8125rem; font-weight: 600; color: var(--gr-neg); }
.gr-error::before { content: "!"; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--gr-neg); color: #fff; font-size: 10px; flex: none; }
.gr-check { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; }
.gr-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gr-ink); }
.gr-alert { padding: 12px 16px; border-radius: var(--gr-r-2); border-left: 3px solid var(--gr-info); background: var(--gr-info-bg); color: var(--gr-ink); font-size: .9375rem; }
.gr-alert--neg { border-color: var(--gr-neg); background: var(--gr-neg-bg); }
.gr-alert--pos { border-color: var(--gr-pos); background: var(--gr-pos-bg); }

/* ---------- nav ---------- */
.gr-nav { position: sticky; top: 0; z-index: 20; background: rgba(243,239,230,.92); backdrop-filter: saturate(1.2) blur(8px); border-bottom: var(--gr-hair); }
.gr-nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--gr-s-5); height: 64px; }
.gr-nav__logo { display: block; height: 28px; width: auto; }
.gr-nav__links { display: flex; gap: var(--gr-s-5); list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.gr-nav__links a { text-decoration: none; color: var(--gr-ink-2); }
.gr-nav__links a:hover, .gr-nav__links a[aria-current="page"] { color: var(--gr-ink); }
.gr-nav__cta { display: flex; gap: var(--gr-s-3); align-items: center; }
@media (max-width: 760px) { .gr-nav__links { display: none; } .gr-nav__logo { height: 24px; } }

/* ---------- footer ---------- */
.gr-footer { border-top: 1px solid var(--gr-ink); padding: var(--gr-s-7) 0 var(--gr-s-6); font-size: var(--gr-fs-small); color: var(--gr-ink-2); }
.gr-footer__grid { display: grid; gap: var(--gr-s-6); grid-template-columns: 2fr 1fr 1fr; }
.gr-footer h4 { font-size: .8125rem; color: var(--gr-ink); }
.gr-footer ul { list-style: none; margin: 0; padding: 0; }
.gr-footer li { margin: 0 0 6px; }
.gr-footer a { color: var(--gr-ink-2); text-decoration: none; }
.gr-footer a:hover { color: var(--gr-ink); text-decoration: underline; }
.gr-footer__legal { margin-top: var(--gr-s-6); padding-top: var(--gr-s-4); border-top: var(--gr-hair); font: 400 var(--gr-fs-meta)/1.6 var(--gr-f-mono); color: var(--gr-ink-3); }
@media (max-width: 760px) { .gr-footer__grid { grid-template-columns: 1fr; } }

/* ---------- empty state ---------- */
.gr-empty { text-align: center; padding: var(--gr-s-8) var(--gr-s-5); border: 1px dashed var(--gr-rule-strong); border-radius: var(--gr-r-2); background: var(--gr-surface); }
.gr-empty__mark { width: 40px; height: 40px; margin: 0 auto var(--gr-s-4); opacity: .5; }
.gr-empty h3 { font-size: 1.125rem; margin-bottom: var(--gr-s-2); }
.gr-empty p { margin: 0 auto var(--gr-s-5); color: var(--gr-ink-2); max-width: 32rem; }

/* ---------- charts ---------- */
.gr-chart { font: 400 .75rem/1.3 var(--gr-f-body); font-variant-numeric: tabular-nums; color: var(--gr-ink-2); }
.gr-bars { display: grid; gap: 8px; }
.gr-bar { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 5.5rem; gap: 12px; align-items: center; font-size: .8125rem; }
.gr-bar__track { height: 12px; background: transparent; }
.gr-bar__fill { height: 100%; background: var(--gr-dv-1); border-radius: 0 2px 2px 0; }
.gr-bar--hl .gr-bar__fill { background: var(--gr-dv-2); }
.gr-bar__val { text-align: right; color: var(--gr-ink); font-weight: 600; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
}