/* ============================================================
   GreenMinter layer over Lumen. Loaded after greenminter-tokens.css (Lumen's
   engine output) and /ui/lumen.css. Three jobs, in this order:
   1. Tokens. GreenMinter's own semantic tokens (--gm-*), copied value for value
      from the GreenMint design tokens (STYLE_SPEC 3.2, 4.1, 4.3, 6.3), per theme;
      then Lumen's --lm-* tokens pointed at them, so every Lumen construct draws
      in GreenMinter's exact surfaces, inks and shadows.
   2. Lumen primitives in GreenMint dress: the few rules a token cannot reach
      (button gradient and bevel, caps badges, segmented tabs, the lime nav
      wash, the green-to-lime progress fill ...), each scoped to its Lumen class.
   3. App-level helpers (.gm-num, .gm-caps, .gm-display, .gm-brand ...).
   Family files (static/ui/components/*.css) compose; they do not restyle the
   primitives here.
   ============================================================ */

/* Inter, latin subset, variable weight (SIL OFL 1.1), self-hosted: no CDN. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   1. Tokens
   ============================================================ */

/* ---- Theme-independent scales (STYLE_SPEC 2.1, 2.2, 4.1, 6.3) ----
   Arial follows Inter as GreenMint's metric fallback does, so glyphs the latin subset lacks
   (the U+2192 arrow) draw as GreenMint draws them. */
:root {
  --gm-font-sans: "Inter", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --gm-font-display: var(--gm-font-sans);
  --gm-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --gm-text-display-1: 3.5rem; /* 56 */
  --gm-text-display-2: 2.5rem; /* 40 */
  --gm-text-h1: 2rem; /* 32 */
  --gm-text-h2: 1.5rem; /* 24 */
  --gm-text-h3: 1.25rem; /* 20 */
  --gm-text-body-lg: 1rem; /* 16 */
  --gm-text-body: 0.875rem; /* 14 */
  --gm-text-small: 0.75rem; /* 12 */
  --gm-text-caption: 0.6875rem; /* 11 */

  /* GreenMint's 8pt ladder (space-5 is 24, not 20). Lumen's --lm-space-N stays 4 x N. */
  --gm-space-1: 4px;
  --gm-space-2: 8px;
  --gm-space-3: 12px;
  --gm-space-4: 16px;
  --gm-space-5: 24px;
  --gm-space-6: 32px;
  --gm-space-7: 48px;
  --gm-space-8: 64px;
  --gm-space-9: 80px;
  --gm-space-10: 96px;

  --gm-radius-xs: 6px;
  --gm-radius-sm: 8px;
  --gm-radius-md: 12px;
  --gm-radius-lg: 16px;
  --gm-radius-xl: 20px;
  --gm-radius-2xl: 28px;
  --gm-radius-full: 9999px;

  --gm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gm-dur-fast: 120ms;
  --gm-dur: 200ms;
  --gm-dur-slow: 350ms;

  /* Primitive ramps (GreenMint tokens.css): the component files name these for the few inks a
     semantic token does not cover (a lime-700 ink on a light card, a green-800 gain). They are
     theme-independent; the semantic tokens below pick from them. */
  --gm-lime-100: #f0fdc8;
  --gm-lime-200: #e4fba2;
  --gm-lime-300: #d6f97b;
  --gm-lime-400: #c6f54d;
  --gm-lime-500: #b2e236;
  --gm-lime-600: #93c221;
  --gm-lime-700: #6f9612;
  --gm-green-200: #b5f0a6;
  --gm-green-300: #93e781;
  --gm-green-400: #7edd6f;
  --gm-green-500: #52c455;
  --gm-green-600: #2f9d3f;
  --gm-green-700: #1f7c33;
  --gm-green-800: #145a26;
  --gm-neutral-0: #ffffff;
  --gm-neutral-50: #f4f7f3;
  --gm-neutral-100: #e9efe8;
  --gm-neutral-200: #dde4dc;
  --gm-neutral-300: #c4cec3;
  --gm-neutral-400: #96a29a;
  --gm-neutral-500: #8a968e;
  --gm-neutral-600: #4e5a52;
  --gm-neutral-700: #2b362e;
  --gm-neutral-800: #1c2620;
  --gm-neutral-850: #161f19;
  --gm-neutral-900: #111912;
  --gm-neutral-925: #0e150f;
  --gm-neutral-950: #0b100d;
  --gm-red-400: #f2545f;
  --gm-red-500: #e6394b;
  --gm-red-600: #cf2b3d;
  --gm-amber-500: #f5b40b;
  --gm-blue-500: #4e9cf5;
  --gm-purple-500: #9d7bf6;

  /* Lumen's scales, re-cut to GreenMint's. */
  --lm-font-sans: var(--gm-font-sans);
  --lm-font-display: var(--gm-font-display);
  --lm-font-mono: var(--gm-font-mono);
  --lm-text-xs: 0.75rem;
  --lm-text-sm: 0.875rem;
  --lm-text-base: 1rem;
  --lm-text-lg: 1.25rem;
  --lm-text-xl: 1.5rem;
  --lm-text-2xl: 2rem;
  --lm-text-3xl: 2.5rem;
  --lm-text-4xl: 3.5rem;
  --lm-text-5xl: 4rem;
  --lm-text-6xl: 4.75rem;
  --lm-text-7xl: 5.5rem;
  --lm-leading-body: 1.5;
  --lm-leading-snug: 1.35;
  --lm-leading-heading: 1.2;
  --lm-leading-display: 1;
  --lm-weight-heading: 600;
  --lm-weight-display: 700;
  --lm-tracking-display: -0.02em;
  --lm-tracking-heading: -0.01em;
  --lm-tracking-caps: 0.08em;

  --lm-radius-xs: var(--gm-radius-xs);
  --lm-radius-sm: var(--gm-radius-sm);
  --lm-radius-md: var(--gm-radius-md);
  --lm-radius-lg: var(--gm-radius-lg);
  --lm-radius-xl: var(--gm-radius-xl);
  --lm-radius-2xl: var(--gm-radius-2xl);
  --lm-radius-full: var(--gm-radius-full);
  --lm-radius-control: var(--gm-radius-md);
  --lm-radius-chip: var(--gm-radius-full);
  --lm-radius-card: var(--gm-radius-xl);
  --lm-radius-panel: var(--gm-radius-xl);

  --lm-control-xs: 24px;
  --lm-control-sm: 32px;
  --lm-control-md: 40px;
  --lm-control-lg: 48px;
  --lm-control-xl: 56px;
  --lm-icon-sm: 14px;
  --lm-icon-md: 16px;
  --lm-icon-lg: 20px;
  /* 16px on coarse pointers (Lumen's @media (pointer: coarse) rule reads this) so iOS does not zoom
     on focus; fields stay 14px on a desktop pointer. */
  --lm-field-font-min: 16px;

  --lm-duration-instant: 80ms;
  --lm-duration-fast: var(--gm-dur-fast);
  --lm-duration-base: var(--gm-dur);
  --lm-duration-slow: var(--gm-dur-slow);
  --lm-duration-slower: 560ms;
  /* One easing curve, no overshoot anywhere (STYLE_SPEC 6.3). */
  --lm-ease-out: var(--gm-ease);
  --lm-ease-spring: var(--gm-ease);

  --lm-button-press: translateY(1px);
  --lm-card-lift: translateY(-2px);
  --lm-ring-width: 2px;
  --lm-ring-offset: 2px;
}

/* ---- Dark (the brand default; STYLE_SPEC 3.2, 4.3, 4.5, 4.6) ---- */
html[data-theme="dark"] {
  color-scheme: dark;

  --gm-bg: #0b100d;
  --gm-surface: #0e150f;
  --gm-surface-2: #161f19;
  --gm-surface-3: #1c2620;
  --gm-border: #242f27;
  --gm-border-strong: #35443a;
  --gm-text: #f1f5ef;
  --gm-text-muted: #8a968e;
  --gm-text-subtle: #7f8c85;
  --gm-text-disabled: #4e5a52;
  --gm-text-inverse: #0b100d;

  --gm-primary: #c6f54d;
  --gm-primary-hover: #d6f97b;
  --gm-primary-active: #b2e236;
  --gm-primary-contrast: #131a05;
  --gm-primary-ink: #c6f54d;
  --gm-primary-control: #c6f54d;
  --gm-primary-soft: rgba(198, 245, 77, 0.1);
  --gm-primary-soft-hover: rgba(198, 245, 77, 0.16);
  --gm-primary-soft-border: rgba(198, 245, 77, 0.3);
  --gm-primary-glow: rgba(198, 245, 77, 0.35);

  --gm-up: #7edd6f;
  --gm-up-ink: #7edd6f;
  --gm-up-soft: rgba(126, 221, 111, 0.12);
  --gm-down: #f2545f;
  --gm-down-ink: #f2545f;
  --gm-down-soft: rgba(242, 84, 95, 0.12);

  --gm-success: #7edd6f;
  --gm-success-ink: #7edd6f;
  --gm-success-soft: rgba(126, 221, 111, 0.12);
  --gm-success-soft-border: rgba(126, 221, 111, 0.35);
  --gm-danger: #f2545f;
  --gm-danger-ink: #f2545f;
  --gm-danger-soft: rgba(242, 84, 95, 0.12);
  --gm-danger-soft-border: rgba(242, 84, 95, 0.35);
  --gm-warning: #f5b40b;
  --gm-warning-ink: #f5b40b;
  --gm-warning-soft: rgba(245, 180, 11, 0.12);
  --gm-warning-soft-border: rgba(245, 180, 11, 0.35);
  --gm-info: #4e9cf5;
  --gm-info-ink: #4e9cf5;
  --gm-info-soft: rgba(78, 156, 245, 0.12);
  --gm-info-soft-border: rgba(78, 156, 245, 0.35);
  --gm-accent: #9d7bf6;
  --gm-accent-ink: #9d7bf6;
  --gm-accent-soft: rgba(157, 123, 246, 0.12);
  --gm-accent-soft-border: rgba(157, 123, 246, 0.35);
  --gm-accent-contrast: #17102b;
  --gm-accent-glow: rgba(157, 123, 246, 0.35);

  --gm-inverse-surface: #f7faf5;
  --gm-inverse-border: #c9d4c7;
  --gm-inverse-text: #121812;

  --gm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
  --gm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --gm-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.32);
  --gm-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.42);
  --gm-shadow-xl: 0 24px 72px rgba(0, 0, 0, 0.52);
  --gm-shadow-glow: 0 0 0 1px rgba(198, 245, 77, 0.3), 0 4px 28px rgba(198, 245, 77, 0.14);
  --gm-shadow-glow-green: 0 0 0 1px rgba(126, 221, 111, 0.3), 0 4px 28px rgba(126, 221, 111, 0.14);
  --gm-glow-green: radial-gradient(ellipse 70% 60% at 60% 20%, rgba(82, 196, 85, 0.16), transparent 70%);
  --gm-glow-lime: radial-gradient(ellipse 70% 60% at 60% 20%, rgba(198, 245, 77, 0.12), transparent 70%);

  --gm-dots-color: rgba(126, 221, 111, 0.12);
  --gm-chart-grid: rgba(138, 150, 142, 0.12);
  --gm-scrim: rgba(5, 9, 6, 0.7);
  --gm-media-surface: #1c2620;
  --gm-media-border: #2b362e;
  --gm-wm-scale: 1;
  --gm-inverse-wm-scale: 0.55;
  --gm-dots-color-active: rgba(146, 235, 130, 0.55);
  --gm-dots-glow-core: rgba(198, 245, 100, 0.9);
  --gm-dots-glow-mid: rgba(146, 235, 130, 0.4);

  /* Inverse ramp: the light card inside the dark theme (.gm-inverse-scope). */
  --gm-inverse-bg: #eef2ec;
  --gm-inverse-surface-2: #e7ede5;
  --gm-inverse-surface-3: #dbe3d9;
  --gm-inverse-border-strong: #a7b5a6;
  --gm-inverse-text-muted: #4e5a52;
  --gm-inverse-text-subtle: #64716a;
  --gm-inverse-primary-ink: #6f9612;
  --gm-inverse-primary-control: #6f9612;
  --gm-inverse-up-ink: #145a26;
  --gm-inverse-down-ink: #a01727;

  /* Lumen's 12-step neutral ramp on GreenMint's green-black neutrals. */
  --lm-neutral-1: #0b100d;
  --lm-neutral-2: #0e150f;
  --lm-neutral-3: #111912;
  --lm-neutral-4: #161f19;
  --lm-neutral-5: #1c2620;
  --lm-neutral-6: #242f27;
  --lm-neutral-7: #2b362e;
  --lm-neutral-8: #35443a;
  --lm-neutral-9: #4e5a52;
  --lm-neutral-10: #7f8c85;
  --lm-neutral-11: #8a968e;
  --lm-neutral-12: #f1f5ef;
}

/* ---- Light (STYLE_SPEC 3.2, 3.4: border-defined white on mint, olive lime ink) ---- */
html[data-theme="light"] {
  color-scheme: light;

  --gm-bg: #f6f9f4;
  --gm-surface: #ffffff;
  --gm-surface-2: #f4f7f3;
  --gm-surface-3: #e9efe8;
  --gm-border: #e0e7de;
  --gm-border-strong: #c7d2c5;
  --gm-text: #121812;
  --gm-text-muted: #5b665c;
  --gm-text-subtle: #667069;
  --gm-text-disabled: #96a29a;
  --gm-text-inverse: #ffffff;

  --gm-primary: #b2e236;
  --gm-primary-hover: #c6f54d;
  --gm-primary-active: #93c221;
  --gm-primary-contrast: #182207;
  --gm-primary-ink: #57750f;
  --gm-primary-control: #6f9612;
  --gm-primary-soft: rgba(178, 226, 54, 0.16);
  --gm-primary-soft-hover: rgba(178, 226, 54, 0.26);
  --gm-primary-soft-border: rgba(147, 194, 33, 0.45);
  --gm-primary-glow: rgba(178, 226, 54, 0.4);

  --gm-up: #2b8f3a;
  --gm-up-ink: #1f7c33;
  --gm-up-soft: rgba(47, 157, 63, 0.12);
  --gm-down: #cf2b3d;
  --gm-down-ink: #cf2b3d;
  --gm-down-soft: rgba(207, 43, 61, 0.1);

  --gm-success: #2b8f3a;
  --gm-success-ink: #1f7c33;
  --gm-success-soft: rgba(47, 157, 63, 0.1);
  --gm-success-soft-border: rgba(47, 157, 63, 0.35);
  --gm-danger: #cf2b3d;
  --gm-danger-ink: #cf2b3d;
  --gm-danger-soft: rgba(207, 43, 61, 0.08);
  --gm-danger-soft-border: rgba(207, 43, 61, 0.3);
  --gm-warning: #a16207;
  --gm-warning-ink: #a16207;
  --gm-warning-soft: rgba(161, 98, 7, 0.1);
  --gm-warning-soft-border: rgba(161, 98, 7, 0.3);
  --gm-info: #2563eb;
  --gm-info-ink: #2563eb;
  --gm-info-soft: rgba(37, 99, 235, 0.08);
  --gm-info-soft-border: rgba(37, 99, 235, 0.3);
  --gm-accent: #7c3aed;
  --gm-accent-ink: #7c3aed;
  --gm-accent-soft: rgba(124, 58, 237, 0.08);
  --gm-accent-soft-border: rgba(124, 58, 237, 0.3);
  --gm-accent-contrast: #ffffff;
  --gm-accent-glow: rgba(124, 58, 237, 0.3);

  --gm-inverse-surface: #131a14;
  --gm-inverse-border: #2c3a2f;
  --gm-inverse-text: #f1f5ef;

  --gm-shadow-xs: 0 1px 2px rgba(18, 24, 18, 0.04);
  --gm-shadow-sm: 0 1px 2px rgba(18, 24, 18, 0.06);
  --gm-shadow-md: 0 4px 14px rgba(18, 24, 18, 0.08);
  --gm-shadow-lg: 0 12px 36px rgba(18, 24, 18, 0.1);
  --gm-shadow-xl: 0 24px 72px rgba(18, 24, 18, 0.14);
  --gm-shadow-glow: 0 0 0 1px rgba(147, 194, 33, 0.45), 0 4px 28px rgba(178, 226, 54, 0.2);
  --gm-shadow-glow-green: 0 0 0 1px rgba(47, 157, 63, 0.3), 0 4px 28px rgba(47, 157, 63, 0.12);
  --gm-glow-green: radial-gradient(ellipse 70% 60% at 60% 20%, rgba(47, 157, 63, 0.1), transparent 70%);
  --gm-glow-lime: radial-gradient(ellipse 70% 60% at 60% 20%, rgba(178, 226, 54, 0.14), transparent 70%);

  --gm-dots-color: rgba(47, 157, 63, 0.14);
  --gm-chart-grid: rgba(18, 24, 18, 0.08);
  --gm-scrim: rgba(18, 24, 18, 0.4);
  --gm-media-surface: #e9efe8;
  --gm-media-border: #dde4dc;
  --gm-wm-scale: 0.55;
  --gm-inverse-wm-scale: 1;
  --gm-dots-color-active: rgba(47, 157, 63, 0.6);
  --gm-dots-glow-core: rgba(47, 157, 63, 0.85);
  --gm-dots-glow-mid: rgba(47, 157, 63, 0.35);

  /* Inverse ramp: the dark card inside the light theme (.gm-inverse-scope). */
  --gm-inverse-bg: #10160f;
  --gm-inverse-surface-2: #1b241c;
  --gm-inverse-surface-3: #243026;
  --gm-inverse-border-strong: #3d4e41;
  --gm-inverse-text-muted: #9aa69e;
  --gm-inverse-text-subtle: #7f8c85;
  --gm-inverse-primary-ink: #c6f54d;
  --gm-inverse-primary-control: #c6f54d;
  --gm-inverse-up-ink: #7edd6f;
  --gm-inverse-down-ink: #f2545f;

  --lm-neutral-1: #ffffff;
  --lm-neutral-2: #f6f9f4;
  --lm-neutral-3: #f4f7f3;
  --lm-neutral-4: #e9efe8;
  --lm-neutral-5: #e0e7de;
  --lm-neutral-6: #dde4dc;
  --lm-neutral-7: #c7d2c5;
  --lm-neutral-8: #c4cec3;
  --lm-neutral-9: #96a29a;
  --lm-neutral-10: #667069;
  --lm-neutral-11: #5b665c;
  --lm-neutral-12: #121812;
}

/* ---- Tone scopes (STYLE_SPEC 3.3): wrap any construct to re-point the lime family ----
   Accent = purple brand tone; warn / danger = a poor score is never painted lime (the
   progress gradient's first stop, --gm-success, moves too). Market colours never change. */
.gm-accent-scope {
  --gm-primary: var(--gm-accent);
  --gm-primary-hover: color-mix(in srgb, var(--gm-accent) 82%, #fff);
  --gm-primary-active: color-mix(in srgb, var(--gm-accent) 85%, #000);
  --gm-primary-contrast: var(--gm-accent-contrast);
  --gm-primary-ink: var(--gm-accent-ink);
  --gm-primary-control: var(--gm-accent);
  --gm-primary-soft: var(--gm-accent-soft);
  --gm-primary-soft-hover: color-mix(in srgb, var(--gm-accent) 20%, transparent);
  --gm-primary-soft-border: var(--gm-accent-soft-border);
  --gm-primary-glow: var(--gm-accent-glow);
  --gm-shadow-glow: 0 0 0 1px var(--gm-accent-soft-border), 0 4px 28px var(--gm-accent-soft);
  --gm-glow-lime: radial-gradient(ellipse 70% 60% at 60% 20%, var(--gm-accent-soft), transparent 70%);
}
.gm-warn-scope,
.gm-danger-scope {
  --gm-primary: var(--gm-tone);
  --gm-primary-hover: var(--gm-tone);
  --gm-primary-active: var(--gm-tone);
  --gm-primary-ink: var(--gm-tone);
  --gm-primary-control: var(--gm-tone);
  --gm-primary-soft: var(--gm-tone-soft);
  --gm-primary-soft-border: var(--gm-tone-soft-border);
  --gm-primary-glow: var(--gm-tone-soft);
  --gm-success: var(--gm-tone);
}
.gm-warn-scope { --gm-tone: var(--gm-warning); --gm-tone-soft: var(--gm-warning-soft); --gm-tone-soft-border: var(--gm-warning-soft-border); }
.gm-danger-scope { --gm-tone: var(--gm-danger); --gm-tone-soft: var(--gm-danger-soft); --gm-tone-soft-border: var(--gm-danger-soft-border); }

/* Inverse scope (STYLE_SPEC 4.6, GreenMint's mechanism): the OPPOSITE theme's surface ramp on any
   construct, a light card on the dark page and a dark card on the light page. A scope is a token
   remap, not a shape: the card it wraps owns its radius. Primary fills, badges and soft tints keep
   the page's values. Gains and losses flip to the deep-green / deep-red (or bright) inks so they
   hold contrast on the flipped surface; the success and danger inks follow them. The --lm-* names
   are re-declared on this scope in the block below. */
.gm-inverse-scope {
  --gm-bg: var(--gm-inverse-bg);
  --gm-surface: var(--gm-inverse-surface);
  --gm-surface-2: var(--gm-inverse-surface-2);
  --gm-surface-3: var(--gm-inverse-surface-3);
  --gm-border: var(--gm-inverse-border);
  --gm-border-strong: var(--gm-inverse-border-strong);
  --gm-text: var(--gm-inverse-text);
  --gm-text-muted: var(--gm-inverse-text-muted);
  --gm-text-subtle: var(--gm-inverse-text-subtle);
  --gm-primary-ink: var(--gm-inverse-primary-ink);
  --gm-primary-control: var(--gm-inverse-primary-control);
  --gm-up-ink: var(--gm-inverse-up-ink);
  --gm-down-ink: var(--gm-inverse-down-ink);
  --gm-success-ink: var(--gm-inverse-up-ink);
  --gm-danger-ink: var(--gm-inverse-down-ink);
  --gm-wm-scale: var(--gm-inverse-wm-scale);
  background: var(--gm-surface);
  color: var(--gm-text);
}

/* ---- Lumen's semantic tokens on GreenMinter's (one mapping, both themes) ----
   surface-2 = inputs, chips, table head, secondary button, row hover (--lm-bg-subtle,
   --lm-surface-raised); surface-3 = tracks and hover-on-surface-2 (--lm-fill).
   Re-declared on every scope that re-points --gm-* tokens: a custom property resolves
   var() where it is declared, so without this a scope would not reach the --lm-* names. */
html[data-theme],
.gm-accent-scope,
.gm-warn-scope,
.gm-danger-scope,
.gm-inverse-scope {
  --lm-bg: var(--gm-bg);
  --lm-bg-subtle: var(--gm-surface-2);
  --lm-surface: var(--gm-surface);
  --lm-surface-raised: var(--gm-surface-2);
  --lm-surface-sunken: var(--gm-bg);
  --lm-fill: var(--gm-surface-3);
  --lm-fill-hover: var(--gm-border);
  --lm-fill-active: var(--gm-border-strong);
  --lm-border-subtle: var(--gm-border);
  --lm-border: var(--gm-border);
  --lm-border-strong: var(--gm-border-strong);
  --lm-border-control: var(--gm-border-strong);
  --lm-fg: var(--gm-text);
  --lm-fg-muted: var(--gm-text-muted);
  --lm-fg-subtle: var(--gm-text-subtle);
  --lm-fg-disabled: var(--gm-text-disabled);
  --lm-inverse-bg: var(--gm-inverse-surface);
  --lm-inverse-fg: var(--gm-inverse-text);

  --lm-primary: var(--gm-primary);
  --lm-primary-hover: var(--gm-primary-hover);
  --lm-primary-fg: var(--gm-primary-contrast);
  --lm-primary-soft: var(--gm-primary-soft);
  --lm-primary-soft-hover: var(--gm-primary-soft-hover);
  --lm-primary-border: var(--gm-primary-soft-border);
  --lm-primary-text: var(--gm-primary-ink);
  --lm-primary-strong: var(--gm-primary-ink);

  --lm-success: var(--gm-success);
  --lm-success-hover: var(--gm-success);
  --lm-success-fg: var(--gm-text-inverse);
  --lm-success-soft: var(--gm-success-soft);
  --lm-success-soft-hover: color-mix(in srgb, var(--gm-success) 20%, transparent);
  --lm-success-border: var(--gm-success-soft-border);
  --lm-success-text: var(--gm-success-ink);
  --lm-success-strong: var(--gm-success-ink);
  --lm-warning: var(--gm-warning);
  --lm-warning-hover: var(--gm-warning);
  --lm-warning-fg: var(--gm-text-inverse);
  --lm-warning-soft: var(--gm-warning-soft);
  --lm-warning-soft-hover: color-mix(in srgb, var(--gm-warning) 20%, transparent);
  --lm-warning-border: var(--gm-warning-soft-border);
  --lm-warning-text: var(--gm-warning-ink);
  --lm-warning-strong: var(--gm-warning-ink);
  --lm-danger: var(--gm-danger);
  --lm-danger-hover: var(--gm-danger);
  --lm-danger-fg: #ffffff;
  --lm-danger-soft: var(--gm-danger-soft);
  --lm-danger-soft-hover: color-mix(in srgb, var(--gm-danger) 20%, transparent);
  --lm-danger-border: var(--gm-danger-soft-border);
  --lm-danger-text: var(--gm-danger-ink);
  --lm-danger-strong: var(--gm-danger-ink);
  --lm-info: var(--gm-info);
  --lm-info-hover: var(--gm-info);
  --lm-info-fg: var(--gm-text-inverse);
  --lm-info-soft: var(--gm-info-soft);
  --lm-info-soft-hover: color-mix(in srgb, var(--gm-info) 20%, transparent);
  --lm-info-border: var(--gm-info-soft-border);
  --lm-info-text: var(--gm-info-ink);
  --lm-info-strong: var(--gm-info-ink);
  --lm-accent: var(--gm-accent);
  --lm-accent-hover: var(--gm-accent);
  --lm-accent-fg: var(--gm-accent-contrast);
  --lm-accent-soft: var(--gm-accent-soft);
  --lm-accent-soft-hover: color-mix(in srgb, var(--gm-accent) 20%, transparent);
  --lm-accent-border: var(--gm-accent-soft-border);
  --lm-accent-text: var(--gm-accent-ink);
  --lm-accent-strong: var(--gm-accent-ink);

  --lm-ring: var(--gm-primary-control);
  --lm-ring-soft: var(--gm-primary-soft);
  --lm-selection: var(--gm-primary-soft-border);
  --lm-scrim: var(--gm-scrim);
  --lm-shadow-xs: var(--gm-shadow-xs);
  --lm-shadow-sm: var(--gm-shadow-sm);
  --lm-shadow-md: var(--gm-shadow-md);
  --lm-shadow-lg: var(--gm-shadow-lg);
  --lm-shadow-xl: var(--gm-shadow-xl);
  --lm-shadow-inset: 0 0 #0000;
  --lm-chrome: color-mix(in srgb, var(--gm-surface) 88%, transparent);
  --lm-chrome-raised: color-mix(in srgb, var(--gm-surface-2) 88%, transparent);
  --lm-backdrop: blur(10px);

  /* Fields: border + a 3px soft ring on focus, never an outline (STYLE_SPEC 4.4). */
  --lm-focus-field-border: var(--gm-primary-control);
  --lm-focus-field-shadow: 0 0 0 3px var(--gm-primary-soft);
  --lm-focus-field-shadow-invalid: 0 0 0 3px var(--gm-danger-soft);
  --lm-focus-line-color: var(--gm-primary-control);
  --lm-focus-line-shadow: 0 1px 0 0 var(--gm-primary-control);
  --lm-input-bg: var(--gm-surface-2);
  --lm-input-bg-hover: var(--gm-surface-2);
  --lm-input-bg-focus: var(--gm-surface-2);
  --lm-input-bg-disabled: var(--gm-surface-2);
  --lm-input-border: var(--gm-border);
  --lm-input-border-hover: var(--gm-border-strong);
  --lm-input-shadow: 0 0 #0000;
  --lm-input-focus-border: var(--gm-primary-control);
  --lm-input-focus-shadow: 0 0 0 3px var(--gm-primary-soft);
  --lm-input-focus-shadow-invalid: 0 0 0 3px var(--gm-danger-soft);

  /* Buttons (STYLE_SPEC 5.1): the primary is a subtle vertical gradient with a 1px white bevel. */
  --lm-button-gradient: linear-gradient(180deg, var(--gm-primary-hover), var(--gm-primary));
  --lm-button-gradient-hover: var(--lm-button-gradient);
  --lm-button-primary-bg: var(--lm-button-gradient);
  --lm-button-primary-bg-hover: var(--lm-button-gradient);
  --lm-button-primary-fg: var(--gm-primary-contrast);
  --lm-button-primary-border: transparent;
  --lm-button-primary-border-hover: transparent;
  --lm-button-primary-shadow: var(--gm-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --lm-button-secondary-bg: var(--gm-surface-2);
  --lm-button-secondary-bg-hover: var(--gm-surface-3);
  --lm-button-secondary-fg: var(--gm-text);
  --lm-button-secondary-border: var(--gm-border);
  --lm-button-secondary-border-hover: var(--gm-border-strong);
  --lm-button-secondary-shadow: 0 0 #0000;

  /* Cards (STYLE_SPEC 5.7): hairline, no shadow at rest. */
  --lm-card-bg: var(--gm-surface);
  --lm-card-filled-bg: var(--gm-surface-2);
  --lm-card-ink: var(--gm-border-strong);
  --lm-card-border: var(--gm-border);
  --lm-card-border-hover: var(--gm-border-strong);
  --lm-card-shadow: 0 0 #0000;
  --lm-card-shadow-hover: var(--gm-shadow-lg);

  /* Market aliases the family files already use. */
  --gm-shadow-glow-lime: var(--gm-shadow-glow);
}

/* ============================================================
   2. Lumen primitives in GreenMint dress
   Scoped to the Lumen class each restyles. Where a family file also sets
   a primitive's active state, the selectors here carry one extra class so
   the theme wins regardless of load order.
   ============================================================ */

/* ---- 2.1 Base type (STYLE_SPEC 2.1, 2.2) ---- */
body {
  background: var(--gm-bg);
  color: var(--gm-text);
  font-family: var(--gm-font-sans);
  font-size: var(--gm-text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
/* Heading tracking is set per component (card and panel titles -0.01em, page titles -0.02em); a
   global h2/h3 rule leaked into the dialog titles, which GreenMint tracks normally. */
h2, h3 { line-height: 1.2; }
::selection { background: var(--gm-primary-soft-border); color: inherit; }
:focus-visible { outline-color: var(--gm-primary-control); }

/* ---- 2.2 Buttons (STYLE_SPEC 5.1, 4.4) ---- */
.lm-btn {
  --btn-pad: var(--gm-space-4);
  --btn-icon: 14px;
  gap: var(--gm-space-2);
  font-weight: 600;
  line-height: 1;
  transition:
    background-color var(--gm-dur) var(--gm-ease),
    border-color var(--gm-dur) var(--gm-ease),
    color var(--gm-dur) var(--gm-ease),
    box-shadow var(--gm-dur) var(--gm-ease),
    filter var(--gm-dur) var(--gm-ease),
    transform var(--gm-dur-fast) var(--gm-ease);
}
.lm-btn--xs { --btn-pad: var(--gm-space-2); --btn-fs: var(--gm-text-caption); --btn-icon: 12px; --btn-radius: var(--gm-radius-xs); }
.lm-btn--sm { --btn-pad: var(--gm-space-3); --btn-fs: var(--gm-text-small); --btn-icon: 14px; --btn-radius: var(--gm-radius-sm); }
.lm-btn--md { --btn-pad: var(--gm-space-4); --btn-fs: var(--gm-text-body); --btn-icon: 14px; --btn-radius: var(--gm-radius-md); }
.lm-btn--lg { --btn-pad: var(--gm-space-5); --btn-fs: var(--gm-text-body-lg); --btn-icon: 16px; --btn-radius: var(--gm-radius-lg); }
.lm-btn--xl { --btn-pad: 28px; --btn-fs: var(--gm-text-body-lg); --btn-icon: 18px; --btn-radius: var(--gm-radius-lg); letter-spacing: 0; }
.lm-btn.lm-btn--icon { --btn-icon: 16px; }
.lm-btn.lm-btn--icon.lm-btn--xs { --btn-icon: 12px; }
.lm-btn:disabled,
.lm-btn[aria-disabled="true"]:not([data-loading]) { opacity: 0.45; }

.lm-btn--primary:hover:not(:disabled, [aria-disabled="true"]) { box-shadow: var(--gm-shadow-glow); filter: brightness(1.05); }
.lm-btn--primary:active:not(:disabled, [aria-disabled="true"]) { box-shadow: var(--lm-button-primary-shadow); }
/* Disabled primary keeps its lime at 45% (olive on dark, pale lime on light), not Lumen's grey. */
.lm-btn--primary:is(:disabled, [aria-disabled="true"]):not([data-loading]) {
  --btn-bg: var(--lm-button-primary-bg);
  --btn-bg-hover: var(--lm-button-primary-bg);
  --btn-fg: var(--gm-primary-contrast);
  --btn-border: transparent;
  --btn-border-hover: transparent;
  --btn-shadow: none;
}
/* Outline is the lime outline: soft lime border, lime ink, soft lime fill on hover. */
.lm-btn--outline,
.lm-btn--outline.lm-intent-primary {
  --btn-bg: transparent;
  --btn-bg-hover: var(--gm-primary-soft);
  --btn-fg: var(--gm-primary-ink);
  --btn-border: var(--gm-primary-soft-border);
  --btn-border-hover: var(--gm-primary-soft-border);
  --btn-shadow: 0 0 #0000;
}
.lm-btn--outline.lm-intent-neutral { --btn-fg: var(--gm-text); --btn-border: var(--gm-border); --btn-border-hover: var(--gm-border-strong); --btn-bg-hover: var(--gm-surface-2); }
.lm-btn--ghost { --btn-bg-hover: var(--gm-surface-2); --btn-fg: var(--gm-text-muted); }
.lm-btn--ghost:hover { --btn-fg: var(--gm-text); }
.lm-btn--soft { --btn-shadow: 0 0 #0000; }
.lm-btn--danger {
  --btn-bg: var(--gm-danger);
  --btn-bg-hover: var(--gm-danger);
  --btn-fg: #ffffff;
  --btn-shadow: 0 0 #0000;
  --btn-shadow-active: 0 0 #0000;
}
.lm-btn--danger:hover:not(:disabled, [aria-disabled="true"]) { filter: brightness(1.1); }
.lm-btn--link { --btn-fg: var(--gm-primary-ink); min-height: 24px; padding-block: 2px; font-weight: 600; text-underline-offset: 3px; }
/* a link button inside a card's column sits at the start, not stretched across it */
.lm-card .lm-btn--link { align-self: flex-start; }
.lm-btn[data-loading] .lm-btn__spinner { --spinner-size: 14px; border-width: 2px; }

/* Opt-in halos (.gm-glow lime = action, .gm-glow-green = market-positive). Never on disabled. */
.lm-btn.gm-glow { box-shadow: var(--gm-shadow-glow), 0 4px 20px color-mix(in srgb, var(--gm-primary-glow) 65%, transparent); }
.lm-btn.gm-glow-green { box-shadow: var(--gm-shadow-glow-green), 0 4px 20px var(--gm-up-soft); }
.lm-btn--primary.gm-glow {
  box-shadow:
    0 4px 20px color-mix(in srgb, var(--gm-primary-glow) 70%, transparent),
    0 0 36px -12px var(--gm-primary-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.lm-btn--primary.gm-glow-green { box-shadow: var(--gm-shadow-glow-green), 0 4px 20px var(--gm-up-soft), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.lm-btn.gm-glow:hover:not(:disabled, [aria-disabled="true"]) {
  box-shadow: var(--gm-shadow-glow), 0 6px 28px var(--gm-primary-glow), 0 0 48px -10px var(--gm-primary-glow);
  filter: brightness(1.05);
}
.lm-btn.gm-glow-green:hover:not(:disabled, [aria-disabled="true"]) { box-shadow: var(--gm-shadow-glow-green), 0 6px 28px var(--gm-up-soft); filter: brightness(1.05); }
.lm-btn:is(.gm-glow, .gm-glow-green):is(:disabled, [aria-disabled="true"]) { box-shadow: none; }

/* ---- 2.3 Badges, tags and chips (STYLE_SPEC 5.3) ---- */
.lm-badge {
  gap: 6px;
  height: 22px;
  padding-inline: 10px;
  font-size: var(--gm-text-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--gm-radius-full);
  border-color: var(--i-border, var(--gm-border));
}
.lm-badge--sm { height: 18px; padding-inline: 8px; font-size: 10px; }
.lm-badge--lg { height: 26px; padding-inline: 12px; font-size: var(--gm-text-small); }
.lm-badge.lm-intent-neutral,
.lm-tag.lm-intent-neutral {
  --i-soft: var(--gm-surface-2);
  --i-soft-hover: var(--gm-surface-3);
  --i-border: var(--gm-border);
  --i-text: var(--gm-text-muted);
}
.lm-badge--soft { border-color: var(--i-border); }
.lm-badge--solid { border-color: transparent; }
.lm-badge--solid.lm-intent-neutral { --i-solid: var(--gm-text-muted); --i-fg: var(--gm-bg); }
.lm-badge__dot { background: currentColor; }
.lm-badge--glow,
.lm-badge.gm-glow { box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent), 0 1px 14px color-mix(in srgb, currentColor 26%, transparent); }
.lm-badge--solid.gm-glow { box-shadow: 0 1px 16px var(--gm-primary-glow); }
.lm-badge.gm-glow-green { box-shadow: var(--gm-shadow-glow-green); }
/* Light: 11px badge text on its 8 to 16% tint falls under 4.5:1 with the base inks (4.0 to 4.4).
   One step darker for the badge text only (4.9 to 5.7 on the card and page); solid badges read
   --i-fg and are untouched. */
html[data-theme="light"] .lm-badge.lm-intent-primary { --i-text: #536f0e; }
html[data-theme="light"] .lm-badge.lm-intent-success { --i-text: #1a6e2c; }
html[data-theme="light"] .lm-badge.lm-intent-warning { --i-text: #92570a; }
html[data-theme="light"] .lm-badge.lm-intent-danger { --i-text: #b8233a; }
html[data-theme="light"] .lm-badge.lm-intent-info { --i-text: #1d4fd8; }

/* Tags are GreenMint chips: pill, surface-2, hairline, 12/500, never caps. */
.lm-tag {
  --tag-h: 28px;
  --tag-px: 12px;
  --tag-fs: var(--gm-text-small);
  --tag-border: var(--i-border, var(--gm-border));
  gap: var(--gm-space-2);
  font-weight: 500;
  border-radius: var(--gm-radius-full);
}
.lm-tag.lm-intent-neutral { --tag-bg: var(--gm-surface-2); --tag-fg: var(--gm-text); }
.lm-tag--sm { --tag-h: 22px; --tag-px: 8px; --tag-fs: var(--gm-text-caption); }
.lm-tag--lg { --tag-h: 32px; --tag-px: 12px; --tag-fs: var(--gm-text-small); }

/* ---- 2.4 Cards (STYLE_SPEC 5.7, 4.4, 4.5) ---- */
.lm-card {
  --card-pad: var(--gm-space-5);
  transition:
    border-color var(--gm-dur) var(--gm-ease),
    box-shadow var(--gm-dur) var(--gm-ease),
    transform var(--gm-dur) var(--gm-ease),
    background-color var(--gm-dur) var(--gm-ease);
}
.lm-card--pad-sm { --card-pad: var(--gm-space-4); }
.lm-card--pad-md { --card-pad: var(--gm-space-5); }
.lm-card--pad-lg { --card-pad: var(--gm-space-6); }
.lm-card--outline { --card-shadow: 0 0 #0000; --card-shadow-hover: var(--gm-shadow-lg); --card-border: var(--gm-border); --card-border-hover: var(--gm-border-strong); }
.lm-card--elevated { --card-bg: var(--gm-surface); --card-border: var(--gm-border); --card-shadow: var(--gm-shadow-md); --card-shadow-hover: var(--gm-shadow-lg); }
.lm-card--filled { --card-bg: var(--gm-surface-2); --card-border: var(--gm-border); --card-border-hover: var(--gm-border-strong); }
.lm-card--sunken { --card-bg: var(--gm-bg); }
.lm-card__title { font-size: var(--gm-text-body-lg); font-weight: 600; letter-spacing: -0.01em; }
.lm-card__description { font-size: var(--gm-text-body); color: var(--gm-text-muted); }
.lm-card__footer { border-top-color: var(--gm-border); }
/* Ring vs wash are different things (STYLE_SPEC 0.3): a ring is a box-shadow, a wash a background. */
.gm-card--glow { --card-border: var(--gm-primary-soft-border); --card-border-hover: var(--gm-primary-soft-border); --card-shadow: var(--gm-shadow-glow); --card-shadow-hover: var(--gm-shadow-glow), var(--gm-shadow-lg); border-color: var(--gm-primary-soft-border); box-shadow: var(--gm-shadow-glow); }
.gm-card--market { --card-border: var(--gm-success-soft-border); --card-border-hover: var(--gm-success-soft-border); --card-shadow: var(--gm-shadow-glow-green); --card-shadow-hover: var(--gm-shadow-glow-green), var(--gm-shadow-lg); border-color: var(--gm-success-soft-border); box-shadow: var(--gm-shadow-glow-green); }
.gm-card--ambient { background-image: var(--gm-glow-green); background-repeat: no-repeat; }
.gm-card--ambient-lime { background-image: var(--gm-glow-lime); background-repeat: no-repeat; }

/* An accented card (molecules card(accent=...)). GreenMint has no top-stripe card (borders are 1px
   solid), so the card never takes Lumen's data-accent stripe: the intent tints the 1px hairline
   instead, the same soft border (--i-border) the soft badges and alerts use. */
.lm-card.gm-card--accent { --card-border: var(--i-border); border-color: var(--i-border); }

/* ---- 2.5 Tables (STYLE_SPEC 5.9) ---- */
/* position: the container is the containing block for the visually hidden text in its header cells
   (sort-state labels), so that text is clipped by the container's scroll and never widens the page. */
.lm-table-container { position: relative; border-color: var(--gm-border); border-radius: var(--gm-radius-xl); background: var(--gm-surface); }
.lm-table { font-size: var(--gm-text-body); }
.lm-table__header { background: var(--gm-surface-2); }
.lm-table__head {
  padding: var(--gm-space-3) var(--gm-space-4);
  font-size: var(--gm-text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gm-text-subtle);
  border-bottom-color: var(--gm-border);
}
.lm-table__sort-icon { opacity: 0.6; }
.lm-table__head[aria-sort]:not([aria-sort="none"]) { color: var(--gm-text); }
.lm-table__head[aria-sort]:not([aria-sort="none"]) .lm-table__sort-icon { color: var(--gm-primary-ink); opacity: 1; }
.lm-table__cell { padding: var(--gm-space-3) var(--gm-space-4); font-variant-numeric: tabular-nums; }
.lm-table__body .lm-table__row:not(:last-child) { border-bottom-color: var(--gm-border); }
.lm-table__row { transition: background-color var(--gm-dur-fast) var(--gm-ease); }
.lm-table__body .lm-table__row:hover { --row-bg: var(--gm-surface-2); }
.lm-table__caption { padding: var(--gm-space-3) var(--gm-space-4); font-size: var(--gm-text-small); color: var(--gm-text-muted); }
.lm-table--compact { font-size: var(--gm-text-small); }
.lm-table--compact .lm-table__head,
.lm-table--compact .lm-table__cell { padding: var(--gm-space-2) var(--gm-space-3); }
.lm-table--striped .lm-table__body .lm-table__row:nth-child(even) { --row-bg: var(--gm-surface-2); }
.lm-table--striped .lm-table__body .lm-table__row:hover { --row-bg: var(--gm-surface-3); }

/* A table wider than its box says so (2026-10-24, the walkthrough's item 20: at 420px tables cut
   off "WHY", four trade columns and badge words with no sign there was more). Every scrolling
   table box -- the kit's .lm-table-container, the admin .table-scroll and the fold's
   .gm-tech__scroll -- fades at its right edge and, below 760px, shows "Scroll for more ->" under
   the table, pinned to the box's left edge, until it is scrolled to the end. Both ride a scroll
   timeline on the box itself, which is inactive when nothing overflows, so a table that fits
   shows neither; a browser without scroll timelines just scrolls. Kit level: no page opts in. */
@keyframes gm-scroll-fade {
  0%, 94% { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  95%, 100% { -webkit-mask-image: none; mask-image: none; }
}
@keyframes gm-scroll-hint {
  0%, 94% { visibility: visible; max-height: 2.5em; padding-block: var(--gm-space-2); }
  95%, 100% { visibility: hidden; max-height: 0; padding-block: 0; }
}
@supports (animation-timeline: scroll()) {
  :is(.lm-table-container, .table-scroll, .gm-tech__scroll) {
    animation: gm-scroll-fade linear both;
    animation-timeline: scroll(self inline);
  }
  @media (max-width: 760px) {
    :is(.lm-table-container, .table-scroll, .gm-tech__scroll)::after {
      content: "Scroll for more \2192";
      position: sticky;
      left: 0;
      display: block;
      width: max-content;
      max-height: 0;
      overflow: hidden;
      visibility: hidden;
      padding: 0 var(--gm-space-4);
      color: var(--gm-text-muted);
      font-size: var(--gm-text-caption);
      font-weight: 600;
      letter-spacing: 0.02em;
      animation: gm-scroll-hint linear both;
      animation-timeline: scroll(nearest inline);
    }
  }
}

/* ---- 2.6 Tabs, segmented control, pagination (STYLE_SPEC 5.11) ----
   Static markup: no sliding indicator, so the active trigger draws its own state
   (aria-selected from greenminter.js, data-state from the macro). */
.lm-tabs__indicator { display: none; }
.lm-tabs__trigger { font-weight: 600; line-height: 1.5; transition: color var(--gm-dur-fast) var(--gm-ease), background-color var(--gm-dur-fast) var(--gm-ease), border-color var(--gm-dur-fast) var(--gm-ease); }
.lm-tabs__count { font-size: var(--gm-text-caption); color: var(--gm-text-subtle); font-variant-numeric: tabular-nums; }

/* Default = segmented: surface-2 well, the active tab surface-3 + strong border. Not lime. */
.lm-tabs.lm-tabs--segmented .lm-tabs__list,
.lm-tabs:not([class*="lm-tabs--pill"], [class*="lm-tabs--underline"], [class*="lm-tabs--enclosed"], [class*="lm-tabs--minimal"], [class*="lm-tabs--bordered"]) .lm-tabs__list {
  display: inline-flex;
  gap: 2px;
  width: max-content;
  padding: 3px;
  background: var(--gm-surface-2);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-md);
  box-shadow: none;
}
.lm-tabs.lm-tabs--segmented .lm-tabs__trigger,
.lm-tabs:not([class*="lm-tabs--pill"], [class*="lm-tabs--underline"], [class*="lm-tabs--enclosed"], [class*="lm-tabs--minimal"], [class*="lm-tabs--bordered"]) .lm-tabs__trigger {
  min-block-size: 0;
  padding: 6px 12px;
  font-size: var(--gm-text-small);
  color: var(--gm-text-muted);
  border: 1px solid transparent;
  border-radius: var(--gm-radius-sm);
}
.lm-tabs.lm-tabs--segmented .lm-tabs__trigger:is([aria-selected="true"], [data-state="active"]),
.lm-tabs:not([class*="lm-tabs--pill"], [class*="lm-tabs--underline"], [class*="lm-tabs--enclosed"], [class*="lm-tabs--minimal"], [class*="lm-tabs--bordered"]) .lm-tabs__trigger:is([aria-selected="true"], [data-state="active"]) {
  color: var(--gm-text);
  background: var(--gm-surface-3);
  border-color: var(--gm-border-strong);
  box-shadow: none;
}

/* Pill: detached surface-2 pills; the active one solid lime with inverse ink. */
.lm-tabs.lm-tabs--pill .lm-tabs__list { gap: var(--gm-space-2); padding: 0; background: transparent; border-radius: 0; }
.lm-tabs.lm-tabs--pill .lm-tabs__trigger {
  min-block-size: 0;
  padding: 8px 16px;
  font-size: var(--gm-text-small);
  color: var(--gm-text-muted);
  background: var(--gm-surface-2);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-full);
}
.lm-tabs.lm-tabs--pill .lm-tabs__trigger:hover { color: var(--gm-text); border-color: var(--gm-border-strong); }
.lm-tabs.lm-tabs--pill .lm-tabs__trigger:is([aria-selected="true"], [data-state="active"]) {
  color: var(--gm-text-inverse);
  background: var(--gm-primary-control);
  border-color: var(--gm-primary-control);
  box-shadow: none;
}
.lm-tabs.lm-tabs--pill .lm-tabs__trigger:is([aria-selected="true"], [data-state="active"]) .lm-tabs__count { color: inherit; background: transparent; opacity: 0.75; }

/* Underline: flat list on a 1px baseline, the active tab a 2px lime rule and lime ink. */
.lm-tabs.lm-tabs--underline .lm-tabs__list { gap: var(--gm-space-5); box-shadow: inset 0 -1px 0 var(--gm-border); }
.lm-tabs.lm-tabs--underline .lm-tabs__trigger {
  min-block-size: 0;
  padding: 10px 2px;
  font-size: var(--gm-text-small);
  color: var(--gm-text-muted);
  border-bottom: 2px solid transparent;
}
.lm-tabs.lm-tabs--underline .lm-tabs__trigger:is([aria-selected="true"], [data-state="active"]) {
  color: var(--gm-primary-ink);
  border-bottom-color: var(--gm-primary-control);
  box-shadow: none;
}

/* Enclosed: surface-2 tabs on a strong baseline; the active one merges into the panel. */
.lm-tabs.lm-tabs--enclosed .lm-tabs__list { gap: var(--gm-space-1); align-items: flex-end; box-shadow: inset 0 -1px 0 var(--gm-border-strong); }
.lm-tabs.lm-tabs--enclosed .lm-tabs__trigger {
  min-block-size: 0;
  padding: 8px 14px;
  font-size: var(--gm-text-small);
  color: var(--gm-text-muted);
  background: var(--gm-surface-2);
  border: 1px solid var(--gm-border);
  border-bottom: 0;
  border-radius: var(--gm-radius-sm) var(--gm-radius-sm) 0 0;
}
.lm-tabs.lm-tabs--enclosed .lm-tabs__trigger:is([aria-selected="true"], [data-state="active"]) {
  color: var(--gm-text);
  background: var(--gm-surface);
  border-color: var(--gm-border-strong);
  box-shadow: 0 1px 0 var(--gm-surface);
}

/* Segmented control (filters): the default-tabs look. */
.lm-segmented.lm-segmented {
  gap: 2px;
  padding: 3px;
  background: var(--gm-surface-2);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-md);
}
.lm-segmented.lm-segmented .lm-segmented__item {
  min-block-size: 0;
  padding: 6px 12px;
  font-size: var(--gm-text-small);
  font-weight: 600;
  line-height: 1.5;
  color: var(--gm-text-muted);
  border: 1px solid transparent;
  border-radius: var(--gm-radius-sm);
  transition: color var(--gm-dur-fast) var(--gm-ease), background-color var(--gm-dur-fast) var(--gm-ease), border-color var(--gm-dur-fast) var(--gm-ease);
}
.lm-segmented.lm-segmented .lm-segmented__item:hover { color: var(--gm-text); }
/* A radio item is selected by its checked input (no data-state), and its focus ring is the input's. */
.lm-segmented__item:has(input:focus-visible) { outline: var(--lm-ring-width) solid var(--lm-ring); outline-offset: 1px; }
.lm-segmented.lm-segmented .lm-segmented__item:is([data-state="on"], :has(input:checked)) {
  color: var(--gm-text);
  background: var(--gm-surface-3);
  border-color: var(--gm-border-strong);
  box-shadow: none;
}

.lm-pagination { --pg-h: 28px; --pg-font: var(--gm-text-small); }
.lm-pagination__page,
.lm-pagination__nav { padding-inline: 6px; font-weight: 600; border-radius: var(--gm-radius-sm); }
.lm-pagination__nav:hover:not(:disabled),
.lm-pagination__page:hover { background: var(--gm-surface-3); color: var(--gm-text); }
.lm-pagination__page[data-active] { background: var(--gm-primary); color: var(--gm-primary-contrast); }

/* ---- 2.7 Fields and selection (STYLE_SPEC 5.2, 4.4) ---- */
.lm-field { gap: 6px; }
/* Label, hint and error sit on GreenMint's inherited 1.5 line (a 12px label is 18px tall, so the
   control starts 24px under the label's top); the error is plain danger text with no icon. */
.lm-field__label { font-size: var(--gm-text-small); font-weight: 600; line-height: 1.5; color: var(--gm-text-muted); }
.lm-field__hint { font-size: var(--gm-text-small); line-height: 1.5; color: var(--gm-text-subtle); }
.lm-field__error { font-size: var(--gm-text-small); line-height: 1.5; color: var(--gm-danger); }
.lm-field-box { --box-pad-x: 0.3; transition: border-color var(--gm-dur) var(--gm-ease), box-shadow var(--gm-dur) var(--gm-ease); }
.lm-field-box:is([data-invalid], [aria-invalid="true"]),
.lm-field[data-invalid] .lm-field-box,
.lm-field-box:has(:is(input, select, textarea)[aria-invalid="true"]) { border-color: var(--gm-danger); box-shadow: 0 0 0 3px var(--gm-danger-soft); }
.lm-input__control::placeholder,
.lm-textarea__control::placeholder { color: var(--gm-text-subtle); }
/* Input group addon (STYLE_SPEC 5.2, GreenMint .gm-input-addon): a surface-3 block outside the input,
   14/500 muted, its own hairline and no border on the input side, radius 0 12 12 0. Lumen draws the
   addon inside the field box, so the block is pulled over the box's padding and border; its seam
   inherits the box's current border colour, so an invalid field reddens the input's frame and the
   seam while the addon itself stays neutral, as GreenMint does. A start addon is the mirror. */
.lm-input__addon {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  margin-block: -1px;
  padding-inline: var(--gm-space-3);
  font-size: var(--gm-text-body);
  font-weight: 500;
  color: var(--gm-text-muted);
  background: var(--gm-surface-3);
  border: 1px solid var(--gm-border);
}
.lm-field-box:has(> .lm-input__addon--end) { padding-inline-end: 0; }
.lm-field-box:has(> .lm-input__addon--start) { padding-inline-start: 0; }
.lm-input__addon--end { margin-inline: var(--gm-space-3) -1px; border-inline-start-color: inherit; border-radius: 0 var(--gm-radius-md) var(--gm-radius-md) 0; }
.lm-input__addon--start { margin-inline: -1px var(--gm-space-3); border-inline-end-color: inherit; border-radius: var(--gm-radius-md) 0 0 var(--gm-radius-md); }
.lm-native-select__icon { color: var(--gm-text-muted); }
.lm-textarea { --ta-pad-block: var(--gm-space-3); min-height: 96px; }
.lm-field-box.gm-glow:focus-within { box-shadow: 0 0 0 3px var(--gm-primary-soft), 0 0 22px var(--gm-primary-glow); }
.lm-field[data-invalid] .lm-field-box.gm-glow:focus-within { box-shadow: 0 0 0 3px var(--gm-danger-soft), 0 0 22px var(--gm-danger-soft); }

/* Native checkbox / radio / switch skins (.gm-check etc. live in atoms.css; the
   GreenMint colours live here). `html` lifts these over the family file. */
html .gm-check,
html .gm-radio {
  background: var(--gm-surface-2);
  border: 1.5px solid var(--gm-border-strong);
  box-shadow: none;
  transition: background-color var(--gm-dur-fast) var(--gm-ease), border-color var(--gm-dur-fast) var(--gm-ease);
}
html .gm-check { border-radius: var(--gm-radius-xs); }
html .gm-check:hover,
html .gm-radio:hover { border-color: var(--gm-border-strong); }
html .gm-check:checked { background: var(--gm-primary-control); border-color: var(--gm-primary-control); }
html .gm-check::after { inset: 2px; background: var(--gm-primary-contrast); transform: scale(0.6); transition: opacity var(--gm-dur-fast) var(--gm-ease), transform var(--gm-dur-fast) var(--gm-ease); }
html .gm-check:checked::after { transform: scale(1); }
html .gm-radio:checked { border-color: var(--gm-primary-control); background: var(--gm-surface-2); }
html .gm-radio::after { inset: 3.5px; background: var(--gm-primary-control); transition: transform var(--gm-dur-fast) var(--gm-ease); }
html .gm-switch {
  --sw-w: 40px;
  --sw-h: 22px;
  background: var(--gm-surface-3);
  border: 1px solid var(--gm-border-strong);
  transition: background-color var(--gm-dur) var(--gm-ease), border-color var(--gm-dur) var(--gm-ease);
}
html .gm-switch::after {
  width: 16px;
  height: 16px;
  background: var(--gm-text-muted);
  box-shadow: none;
  transform: translate(2px, -50%);
  transition: transform var(--gm-dur) var(--gm-ease), background-color var(--gm-dur) var(--gm-ease);
}
html .gm-switch:checked { background: var(--gm-primary-control); border-color: var(--gm-primary-control); }
html .gm-switch:checked::after { background: var(--gm-text-inverse); transform: translate(20px, -50%); }
html :is(.gm-check, .gm-radio, .gm-switch):focus-visible { outline: 2px solid var(--gm-primary-control); outline-offset: 2px; }
html :is(.gm-check, .gm-radio, .gm-switch):disabled { opacity: 0.45; }
/* Lumen's own (Radix) controls, same colours. */
.lm-checkbox { border: 1.5px solid var(--gm-border-strong); background: var(--gm-surface-2); box-shadow: none; }
.lm-checkbox:is([data-state="checked"], [data-state="indeterminate"]) { background: var(--gm-primary-control); border-color: var(--gm-primary-control); color: var(--gm-primary-contrast); }
.lm-switch { --sw-w: 40px; background: var(--gm-surface-3); border-color: var(--gm-border-strong); }
.lm-switch__thumb { width: 16px; height: 16px; background: var(--gm-text-muted); box-shadow: none; }
.lm-switch[data-state="checked"] { background: var(--gm-primary-control); border-color: var(--gm-primary-control); }
.lm-switch[data-state="checked"] .lm-switch__thumb { background: var(--gm-text-inverse); }
.lm-switch-row__label,
.lm-checkbox-row__label,
.lm-radio-row__label { font-size: var(--gm-text-body); line-height: 1.5; color: var(--gm-text); }
/* A bare label (no description under it) is GreenMint's plain 14/400 control label. */
:is(.lm-switch-row__label, .lm-checkbox-row__label, .lm-radio-row__label):only-child { font-weight: 400; }
.lm-switch-row__desc,
.lm-checkbox-row__desc,
.lm-radio-row__desc { font-size: var(--gm-text-small); color: var(--gm-text-muted); }

/* ---- 2.8 Progress, spinner, skeleton (STYLE_SPEC 5.5) ---- */
.lm-progress__track { background: var(--gm-surface-3); }
.lm-progress__track--md { height: 6px; }
.lm-progress__label { font-size: var(--gm-text-small); font-weight: 600; color: var(--gm-text-muted); }
.lm-progress__value { font-size: var(--gm-text-small); font-weight: 600; color: var(--gm-text); }
/* The brand fill is a green-to-lime gradient; other intents stay one colour. */
.lm-progress__track:is(.lm-intent-primary, :not([class*="lm-intent-"])) .lm-progress__indicator { background: linear-gradient(90deg, var(--gm-success), var(--gm-primary)); }
.lm-progress__track.gm-glow { overflow: visible; }
.lm-progress__track.gm-glow .lm-progress__indicator { box-shadow: 0 0 10px var(--gm-primary-glow), 0 0 22px var(--gm-primary-glow); }
.lm-progress-ring__track { stroke: var(--gm-surface-3); }
.lm-progress-ring__indicator { stroke-linecap: round; }
.lm-progress-ring:is(.lm-intent-primary, :not([class*="lm-intent-"])) .lm-progress-ring__indicator { stroke: var(--gm-primary-control); }
.lm-progress-ring__label { font-weight: 700; }
.lm-meter__track { background: var(--gm-surface-3); }
.lm-spinner:not(.lm-btn__spinner) {
  border: 2px solid var(--gm-surface-3);
  border-top-color: var(--gm-primary-control);
  opacity: 1;
  animation-duration: 0.7s;
}
.lm-skeleton {
  background: linear-gradient(90deg, var(--gm-surface-2) 25%, var(--gm-surface-3) 50%, var(--gm-surface-2) 75%);
  background-size: 200% 100%;
  border-radius: var(--gm-radius-sm);
  animation: gm-shimmer 1.4s ease infinite;
}
.lm-skeleton::after { display: none; }
@keyframes gm-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- 2.9 Alerts tint the whole box; toasts stay neutral (STYLE_SPEC 5.10) ---- */
.lm-alert {
  gap: var(--gm-space-3);
  padding: var(--gm-space-3) var(--gm-space-4);
  border-radius: var(--gm-radius-lg);
  font-size: var(--gm-text-body);
  line-height: 1.5;
}
.lm-alert:is(.lm-alert--soft, .lm-alert--outline) { background: var(--i-soft); border: 1px solid var(--i-border); box-shadow: none; }
.lm-alert.lm-intent-neutral { --i-soft: var(--gm-surface-2); --i-border: var(--gm-border); --i-solid: var(--gm-text-muted); --i-text: var(--gm-text); }
.lm-alert__icon { margin-top: 1px; }
.lm-alert__icon svg { width: 17px; height: 17px; }
.lm-alert__body { gap: 2px; }
.lm-alert__title { font-weight: 600; color: var(--i-text); }
.lm-alert__desc,
.lm-alert__desc:not(:only-child) { color: var(--gm-text-muted); }
.lm-alert:is(.lm-alert--soft, .lm-alert--outline) .lm-alert__icon { color: var(--i-text); }
.lm-alert__dismiss { color: var(--gm-text-subtle); border-radius: var(--gm-radius-xs); }
.lm-alert__dismiss:hover { color: var(--gm-text); background: transparent; }
.lm-alert--inline { padding: var(--gm-space-2) var(--gm-space-3); gap: var(--gm-space-2); border: 1px solid var(--i-border); border-radius: var(--gm-radius-md); }
.lm-toast {
  gap: var(--gm-space-3);
  min-width: 280px;
  max-width: 380px;
  padding: var(--gm-space-3) var(--gm-space-4);
  background: var(--gm-surface-2);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius-lg);
  box-shadow: var(--gm-shadow-lg);
}
.lm-toast__icon svg { width: 17px; height: 17px; }
.lm-toast[class*="lm-intent-"]:not(.lm-intent-neutral) .lm-toast__title { color: var(--i-text); }
.lm-toast__icon { color: var(--i-text, var(--gm-text-muted)); }
.lm-toast__desc { color: var(--gm-text-muted); }
/* Banner: full width, 8px radius, no side borders. */
.lm-banner__inner { border-radius: var(--gm-radius-sm); border: 1px solid var(--banner-border); border-inline: 0; }
.lm-banner__message { color: var(--i-text); font-weight: 600; }
.lm-banner__message :is(strong, b) { font-weight: 700; }

/* ---- 2.10 Nav: app sidebar items (STYLE_SPEC 5.12) ---- */
.lm-app-sidebar { --sidebar-item-h: auto; }
.lm-app-sidebar__item {
  gap: var(--gm-space-3);
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--gm-radius-md);
  font-size: var(--gm-text-body);
  font-weight: 500;
  color: var(--gm-text-muted);
  transition: background-color var(--gm-dur-fast) var(--gm-ease), color var(--gm-dur-fast) var(--gm-ease), border-color var(--gm-dur-fast) var(--gm-ease);
}
.lm-app-sidebar__item:hover { background: var(--gm-surface-2); color: var(--gm-text); }
.lm-app-sidebar__item:is([aria-current="page"], [aria-current="true"], [data-active]) {
  background: linear-gradient(90deg, var(--gm-primary-soft), transparent 80%);
  border-color: var(--gm-primary-soft-border);
  color: var(--gm-text);
  font-weight: 600;
}
.lm-app-sidebar__icon { color: var(--gm-text-subtle); }
.lm-app-sidebar__item:hover .lm-app-sidebar__icon { color: var(--gm-text); }
.lm-app-sidebar__item:is([aria-current="page"], [aria-current="true"], [data-active]) .lm-app-sidebar__icon { color: var(--gm-primary-ink); }
.lm-app-sidebar__section-label { font-size: var(--gm-text-caption); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gm-text-subtle); }
.lm-app-sidebar__badge { font-size: var(--gm-text-caption); font-weight: 600; color: var(--gm-text-subtle); }

/* ---- 2.11 Page header, eyebrows, panels, misc ---- */
.lm-eyebrow { font-size: var(--gm-text-caption); font-weight: 600; letter-spacing: 0.08em; color: var(--gm-text-muted); }
.lm-page-header__eyebrow { color: var(--gm-primary-ink); }
.lm-page-header__title { font-weight: 700; letter-spacing: -0.02em; }
.lm-page-header__description { font-size: var(--gm-text-body); color: var(--gm-text-muted); }
.lm-page-header-stats__label { font-size: var(--gm-text-caption); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gm-text-muted); }
.lm-page-header-stats__value { font-size: var(--gm-text-h3); font-weight: 700; letter-spacing: -0.01em; }
.lm-page-header-stats__note { font-size: var(--gm-text-small); color: var(--gm-text-subtle); }
.lm-panel__title { font-weight: 600; letter-spacing: -0.01em; }
.lm-stat__label { font-size: var(--gm-text-caption); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gm-text-muted); }
.lm-stat__value { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.lm-kbd { font-family: var(--gm-font-mono); color: var(--gm-text-muted); background: var(--gm-surface-2); border-color: var(--gm-border-strong); border-radius: var(--gm-radius-xs); box-shadow: none; }
.lm-avatar { --avatar-bg: var(--gm-surface-3); }
code, kbd, samp, pre { font-family: var(--gm-font-mono); }
/* Description list, layout="grid" (molecules description_list): Lumen's 11rem track floor drops a
   two-column grid to one column under ~370px, and its 12px block padding then reads as wide gaps.
   An 8rem floor keeps `columns` in a card-sized panel, and an unframed cell takes GreenMint's facts
   rhythm (STYLE_SPEC 5.16: rows pad 8/0). Lumen's columns=4 track rule is left as it is. */
.lm-dl--grid:not(.lm-dl--cols-4) { grid-template-columns: repeat(auto-fill, minmax(max(8rem, calc((100% - (var(--dl-cols, 2) - 1) * var(--dl-gap)) / var(--dl-cols, 2))), 1fr)); }
.lm-dl--grid:not(.lm-dl--bordered) .lm-dl__row { padding-block: var(--gm-space-2); }
/* A code block that wraps (`lm-code-block gm-code--wrap`), for a long one-line message such as an
   alert's JSON: Lumen sizes the code max-content so the pre scrolls sideways; this lets each line
   wrap at any character, and keeps the text clear of the copy button. */
.gm-code--wrap .lm-code-block__pre code { min-width: 0; }
.gm-code--wrap :is(.lm-code-block__pre code, .lm-code-block__line) { white-space: pre-wrap; overflow-wrap: anywhere; }
.gm-code--wrap:has(.lm-code-block__copy) .lm-code-block__pre { padding-inline-end: 3rem; }

/* ---- 2.11b Touch and narrow screens: fields are 16px so iOS Safari does not zoom on focus ---- */
@media (pointer: coarse), (max-width: 640px) {
  .lm-field-box { font-size: max(var(--box-fs, 14px), 16px); }
  :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="color"], [type="file"]) { font-size: max(1em, 16px); }
}

/* ---- 2.11c Load-time entrances ----
   GreenMint draws nothing on load but its own loops, so Lumen's one-shot entrances (a field error
   and an alert sliding down, a tab panel fading in, an activity row rising) stay off. A node that
   is inserted after load and should arrive (an HTMX swap) opts back in with [data-gm-animate]. */
.lm-field__error:not([data-gm-animate]),
.lm-alert:not([data-gm-animate]),
.lm-tabs__content:not([data-gm-animate]),
.lm-activity-feed__item:not([data-gm-animate]) { animation: none; }

/* ---- 2.12 Motion off (STYLE_SPEC 6.3) ---- */
@media (prefers-reduced-motion: reduce) {
  .lm-btn, .lm-card, .lm-tabs__trigger, .lm-app-sidebar__item { transition: none; }
  .lm-skeleton, .lm-spinner { animation: none; }
}

/* ============================================================
   3. App-level helpers (no Lumen construct covers these)
   ============================================================ */

.gm-up { color: var(--gm-up-ink); }
.gm-down { color: var(--gm-down-ink); }
.gm-mono { font-family: var(--gm-font-mono); font-variant-numeric: tabular-nums; }
/* Figures (prices, percentages, counts, P/L): Inter with tabular numerals, never mono
   (STYLE_SPEC 2.4). Mono is for code, ids, keys and token names only (.gm-mono). */
.gm-num { font-family: var(--gm-font-sans); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Display type: GreenMinter's heavy uppercase headline, lime second line (STYLE_SPEC 1.3). */
.gm-display {
  font-family: var(--gm-font-display);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.gm-display__accent { color: var(--gm-primary); }

/* Caps label: the card / stat label voice, 11/600/0.08em (STYLE_SPEC 2.3). */
.gm-caps {
  font-size: var(--gm-text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gm-text-subtle);
}

/* The wordmark: zap in lime + "GreenMinter" 700 / -0.01em. */
.gm-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-2);
  font-size: var(--gm-text-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gm-text);
  text-decoration: none;
}
.gm-brand .lm-icon { color: var(--gm-primary); }