/* SHELEG Design — Ledger token layer (light default + dark twin).
   Copy verbatim; consume only var(--…) in components.
   Theme switch: set data-theme="dark" on :root.

   Origin: basedash.com, read from its computed styles and its two shipped
   stylesheets (_astro/index.*.css, _astro/Section.*.css) on 2026-08-15. Every
   colour, radius, duration and curve below is that measurement unless the
   declaration says otherwise; four declarations say otherwise and each carries
   its reason inline.

   The neutral ramp is alpha over the ink, exactly as the reference builds it —
   so one ramp works on the field, on a card and on a table row. Each step ships
   the literal first and the relative-colour derivation second: a browser without
   Baseline-2024 relative colour drops the second declaration and keeps a correct
   literal, a newer one tracks --ink when a theme moves it. */

:root {
  /* ── field and surfaces ──────────────────────────────────────────────── */
  --bg: #fcf9f5;      /* the page; reference --color-background-1 (light) */
  --panel: #fffdfa;   /* the raised card; reference --color-background-2 */
  --panel-2: #ffffff; /* the data plane — tables, menus, popovers */

  --ink: #14100c;     /* reference --color-neutral-1 (light) */

  /* @role non-text: --inset — a fill, never a text colour: 1.03:1 on --bg by
     construction (5% ink over the field). It is the segmented track and the
     quiet tile, and anything written on it is --ink or --muted. */
  --inset: rgba(20, 16, 12, 0.05); /* = --on-ink at 5% */

  --ink-2: rgba(20, 16, 12, 0.72); /* = --on-ink at 72% —  --color-neutral-2 — secondary prose; composites to 7.47:1 */
  /* --muted composites to 4.13:1 on the field and 4.18:1 on --panel-2 — under
     AA by 0.37. It carries column heads, axis ticks and row numbers, where the
     word is repeated by position; a label a decision rests on takes --ink-2. */
  --muted: rgba(20, 16, 12, 0.55); /* = --on-ink at 55% —  --color-neutral-3 */
  --faint: rgba(20, 16, 12, 0.22); /* = --on-ink at 22% —  --color-neutral-4 — disabled, hairline ticks */
  --border: rgba(20, 16, 12, 0.12); /* = --on-ink at 12% —  --color-neutral-5 — THE elevation device */
  --border-strong: rgba(20, 16, 12, 0.22); /* = --on-ink at 22% —  --color-neutral-4 — the hover edge */

  --row-hover: #f7f7f7; /* reference --hero-table-row-hover (light) */

  /* ── the one accent ──────────────────────────────────────────────────── */
  /* It marks and it labels; it never fills a control. The control is --ink.
     --accent is the reference's --color-theme-1-text, which is the value the
     site actually paints text in; --accent-mark is --color-theme-1 itself, the
     fill used for chart ink and the icon tile. */
  --accent: #c2410c;      /* 4.93:1 on --bg — text-safe */
  --accent-mark: #e8792f; /* @role non-text: --accent-mark — 2.78:1 on --bg, a fill and a stroke */
  --accent-line: rgba(194, 65, 12, 0.30); /* --color-theme-1-line (light) */
  --accent-weak: rgba(232, 121, 47, 0.06); /* = --accent-mark at 6% —  --color-theme-1-wash (light) */

  --on-ink: #fcf9f5; /* text ON --ink — 18.04:1; the primary button's own colour */

  /* ── status ──────────────────────────────────────────────────────────── */
  /* @role non-text: --ok, --danger, --info, --warn — measured on the reference at
     2.89 / 3.34 / 3.51 / 2.06 against --bg, all below the 4.5 text floor and two of
     them below 3. They are dots, fills, bars and chart ink here; the word beside
     them is --ink. Status is never by colour alone in this pack, which is the rule
     that carries the meaning where the ratio cannot. */
  --ok: #2fa86b;      /* the site's positive delta and chart member 7 */
  --ok-weak: rgba(47, 168, 107, 0.10); /* = --chart-3 at 10% */
  --danger: #f84747;  /* the site's negative delta */
  --danger-weak: rgba(248, 71, 71, 0.10); /* = --danger at 10% */
  --info: #0891b2;    /* --color-theme-2 (light) — the "Verified" seal */
  --info-weak: rgba(8, 145, 178, 0.10);
  /* --warn is DERIVED, not measured in use: the reference declares amber-500 in
     its own theme layer and never paints a warning anywhere on the page. The step
     is this pack's choice, taken because it is the one amber that clears the hard
     separation floor against a terracotta accent in both themes (23.8 light,
     16.2 dark at full colour). */
  --warn: oklch(76.9% 0.188 70.08);
  --warn-weak: rgba(240, 160, 32, 0.12);

  /* ── chart ramp ──────────────────────────────────────────────────────── */
  /* Measured off the reference's own dashboard mock, in its stacking order.
     Names match shadcn/ui's chart contract so a Recharts series can read them
     directly. Two of the five are one hue apart under protanopia — see the
     pack's Bans: a series is labelled at its own mark, never by legend alone. */
  --chart-1: #ea863f; /* --color-chart-member-3 */
  --chart-2: #4679f2;
  --chart-3: #2fa86b; /* --color-chart-member-7 */
  --chart-4: #f47bd0;
  --chart-5: #4ebcfc; /* --color-chart-member-6 */

  /* ── radii ───────────────────────────────────────────────────────────── */
  /* The reference overrides the whole Tailwind ramp by ×1.25: 2.5 / 5 / 7.5 /
     10 / 15 / 20 / 30. Nesting is concentric — inner = outer − the padding
     between them, which is why a 15px track with 4px of padding holds a 10px
     thumb rather than a second 15. */
  --r-inset: 7.5px;  /* --radius / --radius-md */
  --r-control: 10px; /* --radius-lg — buttons, chips, the segmented thumb */
  --r-card: 15px;    /* --radius-xl — every card and every track */
  --r-panel: 20px;   /* --radius-2xl — dialogs and the outermost frame */
  --r-pill: 999px;

  /* ── elevation ───────────────────────────────────────────────────────── */
  /* One shadow, for true overlays only. Cards are drawn with --border. */
  --shadow-1: 0 1px 2px #11111108, 0 8px 24px #1111110a; /* --hero-demo-shadow (light) */

  /* ── type ────────────────────────────────────────────────────────────── */
  /* The display face is licensed and the reference self-hosts it. A project
     without that licence sets --font-display to --font-ui and loses nothing
     structural: the display face appears on one line per page. */
  --font-display: "Alpha Lyrae", var(--font-ui);
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-data: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --t-display: 48px; /* the one display line; line-height 1.1 */
  --t-title: 34px;   /* page and section titles; --track-title */
  --t-card: 18px;    /* card titles, weight 500 */
  --t-prose: 15px;   /* running text, in --ink-2 or --muted */
  --t-body: 14px;    /* dense UI and table cells */
  --t-meta: 12px;    /* labels, column heads, row numbers */
  --t-kicker: 10px;  /* the mono kicker; uppercase, --track-kicker, --accent */

  --track-title: -0.03em; /* −1.02px at 34px, as measured */
  --track-kicker: 0.1em;  /* +1px at 10px, as measured */

  --w-normal: 400;
  --w-medium: 500;
  --w-semibold: 600;

  /* ── grid ────────────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --h-row: 32px;     /* data row, measured */
  --h-control: 30px; /* segmented thumb, measured */
  --h-field: 38px;   /* segmented track and input, measured */

  /* ── motion ──────────────────────────────────────────────────────────── */
  /* One curve does the work: --ease is the reference's own default timing
     function. --ease-out and --ease-in-out are its other two, kept for enters
     and for on-screen movement. Its --ease-in is deliberately NOT carried over:
     MOTION_DOCTRINE bans ease-in in UI and this pack has no exception to it. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.17, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.66, 0, 0.34, 1);

  --dur-xs: 75ms;
  --dur-sm: 0.1s;
  --dur: 0.15s; /* the reference's default transition duration */
  --dur-lg: 0.2s;
  --dur-xl: 0.3s;

  --press-scale: 0.97; /* the measured :active feedback, on controls only */

  /* Focus is DERIVED. The reference answers focus-visible by swapping a
     border colour, which leaves a borderless control with no focus state at
     all. A 2px ring in --accent at 2px offset measures 4.93:1 against --bg,
     clearing the 3:1 non-text floor with room. */
  --focus-ring: 2px;
  --focus-offset: 2px;
}

[data-theme="dark"] {
  --bg: #080706;      /* the reference's html field; :root/:host carries #0c0b0a */
  --panel: #0c0b0a;
  --panel-2: #171513; /* --color-background-2 (dark) */

  --ink: #fffcf8;     /* --color-neutral-1 (dark) */

  /* The dark ramp is a different set of alphas, not the light one inverted —
     70 / 50 / 20 / 10 / 4 against the light theme's 72 / 55 / 22 / 12 / 5. */
  --inset: rgba(255, 252, 248, 0.04); /* = --ink at 4% */
  --ink-2: rgba(255, 252, 248, 0.70); /* = --ink at 70% */
  --muted: rgba(255, 252, 248, 0.50); /* = --ink at 50% */
  --faint: rgba(255, 252, 248, 0.20); /* = --ink at 20% */
  --border: rgba(255, 252, 248, 0.10); /* = --ink at 10% */
  --border-strong: rgba(255, 252, 248, 0.20); /* = --ink at 20% */

  --row-hover: #212121; /* --hero-table-row-hover (dark) */

  --accent: #f49556;      /* --color-theme-1-text (dark) — 8.89:1 on --bg */
  --accent-mark: #e8792f; /* the fill is the same hue in both themes */
  --accent-line: rgba(232, 121, 47, 0.35); /* = --accent-mark at 35% */
  --accent-weak: rgba(232, 121, 47, 0.08); /* = --accent-mark at 8% */

  --on-ink: #14100c; /* the ink button inverts with the theme, so its text does too */

  --info: #22d3ee; /* --color-theme-2 (dark) */
  --info-weak: rgba(34, 211, 238, 0.10); /* = --info at 10% */
  /* Derived, and a different step from the light theme's: at amber-500 the dark
     accent and the warning are 7.1 apart at full colour — one colour with two
     meanings. amber-300 is 16.2 apart and clears every dichromacy. */
  --warn: oklch(87.9% 0.169 91.605);
  --warn-weak: rgba(250, 204, 100, 0.12);

  --shadow-1: 0 0 0 1px #ffffff0a, 0 30px 90px #00000080; /* --hero-demo-shadow (dark) */
}

/* Motion is a state change here, never an entrance for its own sake. Reduced
   motion zeroes the durations and stops the three loops this pack allows (the
   typing cursor, the thinking dots, the live heartbeat) — the same answer the
   reference gives, which turns its transitions off rather than slowing them. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-xs: 0s;
    --dur-sm: 0s;
    --dur: 0s;
    --dur-lg: 0s;
    --dur-xl: 0s;
    --press-scale: 1;
  }
}


/* THE LITERALS ABOVE ARE THE FALLBACK, AND THEY ONLY WORK FROM IN HERE.
   A custom property accepts almost any token sequence, so
   `--x: rgb(from …)` PARSES even where relative colour is unsupported: it
   wins the cascade, and the invalidity surfaces only at substitution, as
   invalid-at-computed-value-time. By then the literal declaration is gone
   and every `var(--x)` falls back to `unset` — not to the line above it.
   Measured 2026-08-20: 23 custom properties across this pack and
   `showroom` shipped literal-then-relative and read as guarded. `@supports`
   is the mechanism that actually guards them. */
@supports (color: rgb(from red r g b)) {
  :root {
    --inset: rgb(from var(--ink) r g b / 0.05);
    --ink-2: rgb(from var(--ink) r g b / 0.72);
    --muted: rgb(from var(--ink) r g b / 0.55);
    --faint: rgb(from var(--ink) r g b / 0.22);
    --border: rgb(from var(--ink) r g b / 0.12);
    --border-strong: rgb(from var(--ink) r g b / 0.22);
    --accent-line: rgb(from var(--accent) r g b / 0.30);
    --accent-weak: rgb(from var(--accent-mark) r g b / 0.06);
    --ok-weak: rgb(from var(--ok) r g b / 0.10);
    --danger-weak: rgb(from var(--danger) r g b / 0.10);
    --info-weak: rgb(from var(--info) r g b / 0.10);
    --warn-weak: rgb(from var(--warn) r g b / 0.12);
  }
  [data-theme="dark"] {
    --inset: rgb(from var(--ink) r g b / 0.04);
    --ink-2: rgb(from var(--ink) r g b / 0.70);
    --muted: rgb(from var(--ink) r g b / 0.50);
    --faint: rgb(from var(--ink) r g b / 0.20);
    --border: rgb(from var(--ink) r g b / 0.10);
    --border-strong: rgb(from var(--ink) r g b / 0.20);
    --accent-line: rgb(from var(--accent-mark) r g b / 0.35);
    --accent-weak: rgb(from var(--accent-mark) r g b / 0.08);
    --info-weak: rgb(from var(--info) r g b / 0.10);
    --warn-weak: rgb(from var(--warn) r g b / 0.12);
  }
}
/* ── components ── */

/* Everything below consumes var(--…) only. Colour never appears as a literal:
   a kit that hardcodes one has left the token layer, and switching themes then
   fixes some of the screen and not the rest. */

/* Heading — three levels: 34 page / 18 section / 15 card title. The 48px
   display face is deliberately unreachable from here; it is one line per page,
   on a marketing surface, never on a console. */
.lg-heading {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-ui);
  text-wrap: balance;
}
.lg-heading--1 {
  font-size: var(--t-title);
  font-weight: var(--w-normal);
  letter-spacing: var(--track-title);
  line-height: 1.15;
}
.lg-heading--2 {
  font-size: var(--t-card);
  font-weight: var(--w-medium);
  line-height: 1.35;
}
.lg-heading--3 {
  font-size: var(--t-prose);
  font-weight: var(--w-medium);
  line-height: 1.4;
}

/* Rule — elevation is a line here, so the divider is the same line. */
.lg-rule {
  height: 0;
  margin: var(--space-4) 0;
  border: 0;
  border-top: 1px solid var(--border);
}
.lg-rule--strong {
  border-top-color: var(--border-strong);
}

/* Kicker — the pack's motif: 10px mono, uppercase, +0.1em, in the accent. */
.lg-kicker {
  margin: 0 0 var(--space-2);
  color: var(--accent);
  font-family: var(--font-data);
  font-size: var(--t-kicker);
  font-weight: var(--w-normal);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
}
.lg-kicker--muted {
  color: var(--muted);
}

/* Button — primary is the INK fill (one per view); the accent never fills a
   control in this pack, which is what keeps it meaningful where it does land. */
.lg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-family: var(--font-ui);
  font-weight: var(--w-semibold);
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    scale var(--dur-sm) var(--ease);
}
.lg-btn:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: var(--focus-offset);
}
.lg-btn:active:not(:disabled) {
  scale: var(--press-scale);
}
.lg-btn:disabled {
  background: var(--inset);
  border-color: var(--border);
  color: var(--faint);
  cursor: not-allowed;
}
.lg-btn--sm {
  height: 30px;
  padding: 0 var(--space-3);
  font-size: var(--t-meta);
}
.lg-btn--md {
  height: 34px;
  padding: 0 var(--space-5);
  font-size: var(--t-body);
}
.lg-btn--lg {
  height: 42px;
  padding: 0 var(--space-6);
  font-size: var(--t-prose);
}
.lg-btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}
.lg-btn--secondary {
  background: var(--panel);
  border-color: var(--border);
  color: var(--ink);
}
.lg-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}
@media (hover: hover) {
  .lg-btn--primary:hover:not(:disabled) {
    background: color-mix(in oklab, var(--ink) 92%, var(--bg));
    border-color: color-mix(in oklab, var(--ink) 92%, var(--bg));
  }
  .lg-btn--secondary:hover:not(:disabled) {
    border-color: var(--border-strong);
  }
  .lg-btn--ghost:hover:not(:disabled) {
    background: var(--inset);
    color: var(--ink);
  }
}

/* Card — a rectangle drawn at 12% ink, radius 15, and no shadow. A Seal placed
   as the first child is lifted into the title row: the seal belongs beside the
   figure it qualifies, not under it. */
.lg-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-3);
  padding: var(--space-5);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  container-type: inline-size;
  transition: border-color var(--dur) var(--ease);
}
.lg-card__head {
  grid-column: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.lg-card__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-card);
  font-weight: var(--w-medium);
}
.lg-card__meta {
  color: var(--muted);
  font-family: var(--font-data);
  font-size: var(--t-meta);
}
.lg-card__body {
  grid-column: 1 / -1;
  min-width: 0;
}
.lg-card > .lg-seal {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
@media (hover: hover) {
  .lg-card:hover {
    border-color: var(--border-strong);
  }
}

/* Chip — the kicker, boxed: 10px mono, 1px border of its own colour at 30%. */
.lg-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 20px;
  padding: 0 var(--space-2);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  color: var(--ink-2);
  font-family: var(--font-data);
  font-size: var(--t-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  white-space: nowrap;
}
.lg-chip--accent {
  border-color: var(--accent-line);
  color: var(--accent);
}
.lg-chip--selected {
  background: var(--accent-weak);
  border-color: var(--accent-line);
  color: var(--accent);
}

/* Seal — THE signature element. The word always renders: in light mode all
   three hues sit under 4.5:1 on the field, so the word carries the meaning and
   the colour reinforces it. */
.lg-seal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 16px;
  color: var(--info);
  font-family: var(--font-data);
  font-size: var(--t-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.lg-seal__glyph {
  width: 10px;
  height: 10px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 2px transparent;
  background:
    linear-gradient(currentColor, currentColor) center / 4px 1px no-repeat;
}
.lg-seal--inferred {
  color: var(--accent);
}
.lg-seal--unverified {
  color: var(--warn);
}
.lg-seal:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: var(--focus-offset);
  border-radius: var(--r-inset);
}
@media (hover: hover) {
  a.lg-seal:hover {
    color: var(--ink);
  }
}

/* Stat — the figure is the UI face at 34px, not the monospace. */
.lg-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.lg-stat__label {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--t-meta);
}
.lg-stat__value {
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-title);
  font-weight: var(--w-normal);
  letter-spacing: var(--track-title);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.lg-stat__source {
  color: var(--muted);
  font-family: var(--font-data);
  font-size: var(--t-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
}

/* StatusDot — the colour is on the dot, the word is in --ink. */
.lg-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.lg-status__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--faint);
}
.lg-status__label {
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-meta);
}
.lg-status--running .lg-status__dot {
  background: var(--info);
  animation: lg-heartbeat 1.4s var(--ease-in-out) infinite;
}
.lg-status--ok .lg-status__dot {
  background: var(--ok);
}
.lg-status--warn .lg-status__dot {
  background: var(--warn);
}
.lg-status--danger .lg-status__dot {
  background: var(--danger);
}

/* One of the three loops this pack allows, and it stops when the run does. */
@keyframes lg-heartbeat {
  0%,
  100% {
    opacity: 0.72;
    scale: 1;
  }
  35% {
    opacity: 1;
    scale: 1.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lg-status--running .lg-status__dot {
    animation: none;
  }
}

/* SegmentedControl — the worked example of concentric radii: a 15px track with
   4px of padding holding a 10px thumb. Nothing here animates; a range switch is
   a high-frequency control. */
.lg-seg {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--h-field);
  padding: var(--space-1);
  background: var(--inset);
  border-radius: var(--r-card);
}
.lg-seg__opt {
  height: var(--h-control);
  padding: 0 var(--space-3);
  background: transparent;
  border: 0;
  border-radius: var(--r-control);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  cursor: pointer;
}
.lg-seg__opt[aria-pressed='true'] {
  background: var(--panel-2);
  color: var(--ink);
}
.lg-seg__opt:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: var(--focus-offset);
}

/* DataTable — 32px rows on --panel-2, because the row hover is one step from
   the page field and vanishes on --bg. */
.lg-table-wrap {
  overflow-x: auto;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.lg-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--t-body);
}
.lg-table__caption {
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  font-size: var(--t-card);
  font-weight: var(--w-medium);
  text-align: left;
}
.lg-table th {
  height: var(--h-row);
  padding: 0 var(--space-2);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--t-meta);
  font-weight: var(--w-normal);
  text-align: left;
}
.lg-table td {
  height: var(--h-row);
  padding: 0 var(--space-2);
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
.lg-table__cell--num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.lg-table__num {
  width: 32px;
  color: var(--muted);
  font-family: var(--font-data);
  font-size: var(--t-meta);
  text-align: right;
}
.lg-table__row--selected {
  background: var(--accent-weak);
  box-shadow: inset 2px 0 0 0 var(--accent-mark);
}
@media (hover: hover) {
  .lg-table tbody tr:hover {
    background: var(--row-hover);
  }
}
@container (max-width: 40rem) {
  .lg-table__num {
    display: none;
  }
}

/* EmptyState — the capability, and two or three real questions that run. */
.lg-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
}
.lg-empty__message {
  margin: 0;
  max-width: 65ch;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: var(--t-prose);
}
.lg-empty__examples {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lg-empty__example {
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--accent);
  font-family: var(--font-data);
  font-size: var(--t-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.lg-empty__example:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: var(--focus-offset);
}
@media (hover: hover) {
  .lg-empty__example:hover {
    color: var(--ink);
  }
}