/* ============================================================
   bahtui design tokens — 20baht design system, "ledger" retone.
   Minimal · flat · focused: near-black ink on white, hairline
   neutral borders, one indigo accent, IBM Plex Sans Thai.

   Every value below is a CSS custom property. Override any of
   them on :root (or any ancestor) to retheme — at build time,
   at runtime ("CSS on the fly"), or by injecting your own sheet.

   Fonts are NOT bundled. Load IBM Plex Sans Thai / IBM Plex Mono
   yourself (Google Fonts or self-hosted); the stacks below fall
   back to the system UI face until they arrive.
   ============================================================ */

:root {
  /* ---------- Raw scales (reference — prefer the semantic tokens below) ----------
     Neutral gray carries the whole UI; hue is reserved for status and the
     accent. --baht-green-* keeps its name: it is the documented override
     point that banknote themes swap wholesale (see apps/docs banknotes.css),
     and success + the coloured note palettes derive from it. */

  /* Green — success (and the banknote override ramp) */
  --baht-green-50: #f0fdf4;
  --baht-green-100: #dcfce7;
  --baht-green-200: #bbf7d0;
  --baht-green-300: #86efac; /* dark-mode success ink */
  --baht-green-400: #4ade80; /* dark-mode success */
  --baht-green-500: #22c55e;
  --baht-green-600: #16a34a; /* success */
  --baht-green-700: #15803d;
  --baht-green-750: #166534; /* success ink on the light tint */
  --baht-green-800: #14532d;
  --baht-green-900: #0f3d22;
  --baht-green-950: #052e16; /* content on green-400 */

  /* aliases — --baht-green-* stays the override point (banknote themes
     swap the whole scale); --baht-olive-* is kept for callers of the old name. */
  --baht-olive-50: var(--baht-green-50);
  --baht-olive-100: var(--baht-green-100);
  --baht-olive-200: var(--baht-green-200);
  --baht-olive-300: var(--baht-green-300);
  --baht-olive-400: var(--baht-green-400);
  --baht-olive-500: var(--baht-green-500);
  --baht-olive-600: var(--baht-green-600);
  --baht-olive-700: var(--baht-green-700);
  --baht-olive-750: var(--baht-green-750);
  --baht-olive-800: var(--baht-green-800);
  --baht-olive-900: var(--baht-green-900);
  --baht-olive-950: var(--baht-green-950);

  /* Canvas — white page, light-gray wells. (name kept from the paper era) */
  --baht-cream-50: #ffffff;
  --baht-cream-100: #ffffff; /* page background (base-200) */
  --baht-cream-200: #f5f5f5; /* sunken wells, rails */
  --baht-cream-300: #e5e5e5; /* hairline border */
  --baht-cream-400: #d4d4d4;

  /* Ink — pure neutral gray, no warm or cool cast */
  --baht-gray-50: #fafafa; /* zebra rows */
  --baht-gray-100: #f5f5f5; /* row divider */
  --baht-gray-200: #e5e5e5; /* border */
  --baht-gray-300: #d4d4d4; /* strong border */
  --baht-gray-400: #a3a3a3;
  --baht-gray-500: #737373; /* tertiary text */
  --baht-gray-600: #595959; /* secondary text */
  --baht-gray-700: #404040;
  --baht-gray-800: #262626; /* headings */
  --baht-gray-900: #0a0a0a; /* ink (body) */

  /* Rose — error dot / destructive (a red ramp under the legacy name) */
  --baht-rose-50: #fef2f2;
  --baht-rose-100: #fee2e2;
  --baht-rose-200: #fecaca;
  --baht-rose-300: #fca5a5; /* dark-mode secondary */
  --baht-rose-400: #f87171;
  --baht-rose-500: #ef4444; /* error dot */
  --baht-rose-600: #dc2626;
  --baht-rose-700: #b91c1c;
  --baht-rose-800: #991b1b;
  --baht-rose-900: #450a0a; /* content on rose-300 */

  /* Gold — amber, the warning tone */
  --baht-gold-50: #fff5e3; /* warning tint */
  --baht-gold-300: #fcd34d; /* dark-mode warning ink */
  --baht-gold-400: #fbbf24; /* dark-mode warning */
  --baht-gold-500: #f59e0b; /* warning */
  --baht-gold-600: #d97706;
  --baht-gold-700: #8a5f10; /* warning ink on the light tint (5.2:1 on gold-50) */
  --baht-gold-900: #451a03; /* content on gold-400 */

  /* Lime — legacy warning name, now aliases amber */
  --baht-lime-400: var(--baht-gold-400);
  --baht-lime-500: var(--baht-gold-500);
  --baht-lime-900: var(--baht-gold-900);

  /* Red — error */
  --baht-red-50: #fef2f2;
  --baht-red-300: #fca5a5; /* dark-mode error */
  --baht-red-400: #f87171;
  --baht-red-500: #dc2626; /* error */
  --baht-red-600: #991b1b; /* error ink on the light tint */
  --baht-red-700: #7f1d1d;
  --baht-red-900: #450a0a; /* content on red-300 */

  /* Slate — the one accent: note blue (links, info, highlights) */
  --baht-slate-50: #eaf1fb; /* info tint */
  --baht-slate-300: #7ea3d2; /* dark-mode info / accent */
  --baht-slate-500: #3465a8; /* info, accent */
  --baht-slate-600: #255492; /* link ink */
  --baht-slate-900: #14294a; /* content on slate-300 */

  /* ---------- Theme tier (daisyUI-style knobs — THE flexible theming API) ----------
     Override any of these on :root (or a wrapper, or inline style) and every
     semantic token below derives from them. Hover/active/tint shades are
     computed with color-mix, so one --baht-primary swap rethemes everything.

     Distribution rule: the page and every surface are white; separation is a
     1px hairline, never a fill. Ink (near-black) is the primary — it appears
     on the primary button, the table header and the active nav. Colour is
     spent only on status pills and the indigo accent (links, info). */
  --baht-base-100: #ffffff; /* surfaces: cards, tables, inputs, modals */
  --baht-base-200: var(--baht-cream-100); /* page background */
  --baht-base-300: var(--baht-cream-200); /* sunken wells, rails, code chips */
  --baht-base-content: var(--baht-gray-900);
  --baht-row-alt: var(--baht-gray-50); /* zebra rows: a 2% step off the surface, not 10% */

  --baht-primary: #171717; /* ink button */
  --baht-primary-content: #fafafa;
  --baht-secondary: var(--baht-gray-100); /* quiet fill: secondary buttons, chips */
  --baht-secondary-content: var(--baht-gray-900);
  --baht-accent: var(--baht-slate-500); /* indigo: links, highlights, Pro tags */
  --baht-accent-content: #ffffff;
  --baht-neutral: #171717; /* table header, inverse blocks */
  --baht-neutral-content: #fafafa;

  --baht-info: var(--baht-slate-500);
  --baht-info-content: #ffffff;
  --baht-success: var(--baht-green-600);
  --baht-success-content: #ffffff;
  --baht-warning: var(--baht-gold-500);
  --baht-warning-content: var(--baht-gold-900);
  --baht-error: var(--baht-red-500);
  --baht-error-content: #ffffff;

  /* Status tints — the pill pairs used for scanning a table column.
     A pale tint with its own dark ink; the dot carries the saturated hue. */
  --baht-success-tint: var(--baht-green-50);
  --baht-success-ink: var(--baht-green-750);
  --baht-success-dot: var(--baht-green-600);
  --baht-warning-tint: var(--baht-gold-50);
  --baht-warning-ink: var(--baht-gold-700);
  --baht-warning-dot: var(--baht-gold-500);
  --baht-error-tint: var(--baht-red-50);
  --baht-error-ink: var(--baht-red-600);
  --baht-error-dot: var(--baht-rose-500);
  --baht-info-tint: var(--baht-slate-50);
  --baht-info-ink: var(--baht-slate-600);
  --baht-info-dot: var(--baht-slate-500);

  /* ---------- Semantic colors (stable names components consume) ---------- */
  --baht-color-bg: var(--baht-base-200);
  --baht-color-bg-elev: var(--baht-base-100);
  --baht-color-bg-sunken: var(--baht-base-300);
  --baht-color-bg-inverse: var(--baht-neutral);

  --baht-color-surface: var(--baht-base-100);
  --baht-color-surface-alt: var(--baht-gray-50);
  --baht-color-row-alt: var(--baht-row-alt);

  --baht-color-text: var(--baht-base-content);
  --baht-color-text-muted: var(--baht-gray-600);
  --baht-color-text-subtle: var(--baht-gray-500);
  --baht-color-text-inverse: var(--baht-neutral-content);

  --baht-color-border: var(--baht-cream-300);
  --baht-color-border-cool: var(--baht-gray-200);
  --baht-color-border-strong: var(--baht-gray-300);
  /* Input borders must hit 3:1 against the surface (WCAG 1.4.11); hairline
     gray does not, so controls get a mid-gray of their own. */
  --baht-color-border-control: #949494; /* 3.0:1 on white */
  --baht-color-divider: var(--baht-gray-100);

  /* border shorthands — one place to change width + colour together */
  --baht-border-default: 1px solid var(--baht-color-border);
  --baht-border-cool: 1px solid var(--baht-color-border-cool);

  --baht-color-primary: var(--baht-primary);
  /* ink cannot darken further, so hover/active lift toward white instead */
  --baht-color-primary-hover: color-mix(in oklab, var(--baht-primary) 86%, white);
  --baht-color-primary-active: color-mix(in oklab, var(--baht-primary) 74%, white);
  --baht-color-primary-tint: color-mix(in oklab, var(--baht-primary) 8%, white);
  /* translucent washes for hover/selection on any surface */
  --baht-color-primary-wash: color-mix(in oklab, var(--baht-primary) 5%, transparent);
  --baht-color-primary-wash-active: color-mix(in oklab, var(--baht-primary) 9%, transparent);
  --baht-color-primary-contrast: var(--baht-primary-content);

  --baht-color-secondary: var(--baht-secondary);
  --baht-color-secondary-contrast: var(--baht-secondary-content);
  --baht-color-accent: var(--baht-accent);
  --baht-color-accent-contrast: var(--baht-accent-content);

  --baht-color-success: var(--baht-success);
  --baht-color-warning: var(--baht-warning);
  --baht-color-danger: var(--baht-error);
  --baht-color-danger-hover: color-mix(in oklab, var(--baht-error) 84%, black);
  --baht-color-info: var(--baht-info);

  --baht-color-error: var(--baht-error); /* alias kept for form validation styling */
  --baht-color-link: var(--baht-slate-600);
  --baht-color-focus: var(--baht-primary);

  --baht-focus-ring: 2px solid var(--baht-color-focus);

  /* shadow ink as an rgb triple so alphas can be mixed in */
  --baht-color-shadow-ink: 0, 0, 0;

  /* ---------- Typography ---------- */
  --baht-font-display:
    'IBM Plex Sans Thai', 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --baht-font-family:
    'IBM Plex Sans Thai', 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --baht-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* type scale */
  --baht-text-xs: 0.75rem; /* 12px */
  --baht-text-sm: 0.8125rem; /* 13px */
  --baht-text-base: 0.9375rem; /* 15px */
  --baht-text-md: 1rem; /* 16px */
  --baht-text-lg: 1.125rem; /* 18px */
  --baht-text-xl: 1.25rem; /* 20px */
  --baht-text-2xl: 1.5rem; /* 24px */

  --baht-font-size: 0.875rem; /* 14px */
  --baht-font-size-label: var(
    --baht-font-size
  ); /* 14px — label reads as the field's name, not a caption */
  --baht-font-size-error: var(--baht-text-xs);
  --baht-font-size-control: var(--baht-font-size);
  --baht-font-weight-label: 600;

  --baht-leading-tight: 1.1;
  --baht-leading-normal: 1.5;
  --baht-tracking-tight: -0.02em;
  --baht-tracking-widest: 0.12em;

  /* ---------- Spacing (4px base) ---------- */
  --baht-space-1: 4px;
  --baht-space-2: 8px;
  --baht-space-3: 12px;
  --baht-space-4: 16px;
  --baht-space-5: 20px;
  --baht-space-6: 24px;
  --baht-space-8: 32px;
  --baht-space-10: 40px;
  --baht-space-12: 48px;

  /* ---------- Radii (three knobs, daisyUI-style) ----------
     Softer than the original "ledger" pass (paypers.ai shape reference,
     2026-09-17): rounder fields and boxes, same one-accent palette. */
  --baht-radius-field: 14px; /* inputs, buttons */
  --baht-radius-box: 20px; /* cards, panels, modals */
  --baht-radius-selector: 999px; /* checkboxes, toggles, badges, pills */
  /* derived aliases (older names, still honoured) */
  --baht-radius-xs: 4px; /* chips, badges */
  --baht-radius-sm: 8px; /* inputs (small), menu items */
  --baht-radius: var(--baht-radius-field);
  --baht-radius-md: var(--baht-radius-box);
  --baht-radius-lg: 24px; /* large cards, modals */
  --baht-radius-pill: var(--baht-radius-selector);

  /* ---------- Borders / effects ---------- */
  --baht-border-width: 1px;
  --baht-border: var(--baht-border-width) solid var(--baht-color-border-cool);
  --baht-depth: 0; /* reserved: extra elevation multiplier */
  --baht-noise: 0; /* reserved: grain overlay opacity (always 0 in this theme) */

  /* ---------- Shadows (two elevations only, never inner) ----------
     Flat by default: lift is a 1px hint under menus and raised buttons; float
     is the only real shadow and belongs to modals and popovers. */
  --baht-shadow-lift:
    0 1px 3px rgba(var(--baht-color-shadow-ink), 0.08),
    0 1px 2px -1px rgba(var(--baht-color-shadow-ink), 0.06);
  --baht-shadow-float:
    0 2px 6px rgba(var(--baht-color-shadow-ink), 0.06),
    0 12px 32px -8px rgba(var(--baht-color-shadow-ink), 0.12);

  /* ---------- Motion ("paper" ease — quick start, gentle settle) ---------- */
  --baht-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --baht-dur-fast: 120ms;
  --baht-dur-base: 200ms;
  --baht-dur-slow: 320ms;

  /* ---------- Controls ---------- */
  --baht-size-field: 0.275rem; /* control height = size-field × 10 (0.275rem → 44px) */
  --baht-size-selector: 0.25rem; /* reserved: checkbox/toggle geometry */
  --baht-control-height: calc(var(--baht-size-field) * 10);
  --baht-control-padding-x: var(--baht-space-4);
  --baht-field-gap: var(--baht-space-6); /* 24px — one field reads as one block */
}

/* iOS Safari zooms into a focused input under 16px */
@media (pointer: coarse) {
  :root {
    --baht-font-size-control: max(16px, var(--baht-font-size));
  }
}

/* ============================================================
   Theme scope — a [data-baht-theme] / .baht-dark WRAPPER re-derives every
   token that is computed from another one. Custom properties resolve where
   they are declared, so tokens declared only on :root reach descendants
   already resolved: a dark wrapper flipped the raw ramps but kept light
   surfaces and text. Literal knobs are not repeated (a host's own :root
   overrides still inherit). Generated from the :root block above; the
   tokens spec fails if the two drift.
   ============================================================ */
/* @generated theme-scope */
/* jscpd:ignore-start */
[data-baht-theme],
.baht-dark,
.baht-light {
  --baht-olive-50: var(--baht-green-50);
  --baht-olive-100: var(--baht-green-100);
  --baht-olive-200: var(--baht-green-200);
  --baht-olive-300: var(--baht-green-300);
  --baht-olive-400: var(--baht-green-400);
  --baht-olive-500: var(--baht-green-500);
  --baht-olive-600: var(--baht-green-600);
  --baht-olive-700: var(--baht-green-700);
  --baht-olive-750: var(--baht-green-750);
  --baht-olive-800: var(--baht-green-800);
  --baht-olive-900: var(--baht-green-900);
  --baht-olive-950: var(--baht-green-950);
  --baht-lime-400: var(--baht-gold-400);
  --baht-lime-500: var(--baht-gold-500);
  --baht-lime-900: var(--baht-gold-900);
  --baht-base-200: var(--baht-cream-100);
  --baht-base-300: var(--baht-cream-200);
  --baht-base-content: var(--baht-gray-900);
  --baht-row-alt: var(--baht-gray-50);
  --baht-secondary: var(--baht-gray-100);
  --baht-secondary-content: var(--baht-gray-900);
  --baht-accent: var(--baht-slate-500);
  --baht-info: var(--baht-slate-500);
  --baht-success: var(--baht-green-600);
  --baht-warning: var(--baht-gold-500);
  --baht-warning-content: var(--baht-gold-900);
  --baht-error: var(--baht-red-500);
  --baht-success-tint: var(--baht-green-50);
  --baht-success-ink: var(--baht-green-750);
  --baht-success-dot: var(--baht-green-600);
  --baht-warning-tint: var(--baht-gold-50);
  --baht-warning-ink: var(--baht-gold-700);
  --baht-warning-dot: var(--baht-gold-500);
  --baht-error-tint: var(--baht-red-50);
  --baht-error-ink: var(--baht-red-600);
  --baht-error-dot: var(--baht-rose-500);
  --baht-info-tint: var(--baht-slate-50);
  --baht-info-ink: var(--baht-slate-600);
  --baht-info-dot: var(--baht-slate-500);
  --baht-color-bg: var(--baht-base-200);
  --baht-color-bg-elev: var(--baht-base-100);
  --baht-color-bg-sunken: var(--baht-base-300);
  --baht-color-bg-inverse: var(--baht-neutral);
  --baht-color-surface: var(--baht-base-100);
  --baht-color-surface-alt: var(--baht-gray-50);
  --baht-color-row-alt: var(--baht-row-alt);
  --baht-color-text: var(--baht-base-content);
  --baht-color-text-muted: var(--baht-gray-600);
  --baht-color-text-subtle: var(--baht-gray-500);
  --baht-color-text-inverse: var(--baht-neutral-content);
  --baht-color-border: var(--baht-cream-300);
  --baht-color-border-cool: var(--baht-gray-200);
  --baht-color-border-strong: var(--baht-gray-300);
  --baht-color-divider: var(--baht-gray-100);
  --baht-border-default: 1px solid var(--baht-color-border);
  --baht-border-cool: 1px solid var(--baht-color-border-cool);
  --baht-color-primary: var(--baht-primary);
  --baht-color-primary-hover: color-mix(in oklab, var(--baht-primary) 86%, white);
  --baht-color-primary-active: color-mix(in oklab, var(--baht-primary) 74%, white);
  --baht-color-primary-tint: color-mix(in oklab, var(--baht-primary) 8%, white);
  --baht-color-primary-wash: color-mix(in oklab, var(--baht-primary) 5%, transparent);
  --baht-color-primary-wash-active: color-mix(in oklab, var(--baht-primary) 9%, transparent);
  --baht-color-primary-contrast: var(--baht-primary-content);
  --baht-color-secondary: var(--baht-secondary);
  --baht-color-secondary-contrast: var(--baht-secondary-content);
  --baht-color-accent: var(--baht-accent);
  --baht-color-accent-contrast: var(--baht-accent-content);
  --baht-color-success: var(--baht-success);
  --baht-color-warning: var(--baht-warning);
  --baht-color-danger: var(--baht-error);
  --baht-color-danger-hover: color-mix(in oklab, var(--baht-error) 84%, black);
  --baht-color-info: var(--baht-info);
  --baht-color-error: var(--baht-error);
  --baht-color-link: var(--baht-slate-600);
  --baht-color-focus: var(--baht-primary);
  --baht-focus-ring: 2px solid var(--baht-color-focus);
  --baht-font-size-label: var(--baht-font-size);
  --baht-font-size-error: var(--baht-text-xs);
  --baht-font-size-control: var(--baht-font-size);
  --baht-radius: var(--baht-radius-field);
  --baht-radius-md: var(--baht-radius-box);
  --baht-radius-pill: var(--baht-radius-selector);
  --baht-border: var(--baht-border-width) solid var(--baht-color-border-cool);
  --baht-shadow-lift:
    0 1px 3px rgba(var(--baht-color-shadow-ink), 0.08),
    0 1px 2px -1px rgba(var(--baht-color-shadow-ink), 0.06);
  --baht-shadow-float:
    0 2px 6px rgba(var(--baht-color-shadow-ink), 0.06),
    0 12px 32px -8px rgba(var(--baht-color-shadow-ink), 0.12);
  --baht-control-height: calc(var(--baht-size-field) * 10);
  --baht-control-padding-x: var(--baht-space-4);
  --baht-field-gap: var(--baht-space-6);
  --baht-chart-6: var(--baht-gray-600);
  --baht-chart-7: var(--baht-gray-500);
  --baht-chart-8: var(--baht-gray-400);
  --baht-chart-9: var(--baht-gray-300);
  --baht-chart-10: var(--baht-gray-200);
  --baht-chart-muted: var(--baht-gray-300);
  --baht-chart-grid: var(--baht-gray-200);
  --baht-chart-surface: var(--baht-color-surface);
}
/* jscpd:ignore-end */
/* @end theme-scope */

/* ============================================================
   Dark theme — "20baht-dark". Opt in with [data-baht-theme="dark"] (or the
   .baht-dark class) on <html> or any wrapper. Default (no attribute) is
   light — dark never activates from OS preference alone.
   ============================================================ */

[data-baht-theme='dark'],
.baht-dark {
  /* The ramps re-anchor for a near-black canvas; every semantic token above
     derives from them, so only the values that genuinely invert are listed. */
  --baht-green-50: #0f2a1a; /* success tint */
  --baht-green-100: #14361f;
  --baht-green-200: #166534;
  --baht-green-300: #86efac; /* success ink on the dark tint */
  --baht-green-400: #4ade80; /* success */
  --baht-green-500: #22c55e;
  --baht-green-600: #4ade80; /* banknote primaries brighten so the button still leads */
  --baht-green-700: #86efac;
  --baht-green-750: #86efac;
  --baht-green-800: #14532d;
  --baht-green-900: #14361f;
  --baht-green-950: #052e16;

  --baht-cream-50: #e5e5e5; /* inverse ink */
  --baht-cream-100: #0a0a0a;
  --baht-cream-200: #171717;
  --baht-cream-300: #262626;
  --baht-cream-400: #333333;

  --baht-gray-50: #0a0a0a;
  --baht-gray-100: #171717;
  --baht-gray-200: #262626;
  --baht-gray-300: #333333;
  --baht-gray-400: #737373;
  --baht-gray-500: #8a8a8a;
  --baht-gray-600: #a3a3a3;
  --baht-gray-700: #c4c4c4;
  --baht-gray-800: #e5e5e5;
  --baht-gray-900: #fafafa;

  /* Charts — the same five hues re-stepped into OKLCH L 0.48-0.67 on the dark
     surface; validated (adjacent CVD ΔE 10.9 protan, normal-vision
     ΔE 20.0, every slot >= 3:1 on the surface). */
  --baht-chart-1: #0f7d4d;
  --baht-chart-2: #b58b13;
  --baht-chart-3: #3685ca;
  --baht-chart-4: #df3c2c;
  --baht-chart-5: #9570cc;

  /* Sequential ramp flips its anchor for the dark surface. */
  --baht-chart-seq-1: #186540;
  --baht-chart-seq-2: #2c8c5b;
  --baht-chart-seq-3: #4fa577;
  --baht-chart-seq-4: #82c39e;
  --baht-chart-seq-5: #b3dcc4;

  --baht-chart-muted: var(--baht-gray-400);
  --baht-chart-grid: var(--baht-gray-300);

  --baht-rose-50: #2a1414;
  --baht-rose-100: #3a1a1a;
  --baht-rose-200: #4a2020;
  --baht-rose-300: #fca5a5;
  --baht-rose-400: #f87171;
  --baht-rose-500: #f87171; /* error dot */
  --baht-rose-600: #fca5a5;
  --baht-rose-700: #ef4444;
  --baht-rose-800: #991b1b;

  --baht-gold-50: #2a2010; /* warning tint */
  --baht-gold-400: #fcd34d;
  --baht-gold-500: #fbbf24; /* warning */
  --baht-gold-600: #f59e0b;
  --baht-gold-700: #fcd34d; /* warning ink on the dark tint */

  --baht-red-50: #2a1414; /* error tint */
  --baht-red-400: #fca5a5;
  --baht-red-500: #f87171; /* error */
  --baht-red-600: #fca5a5; /* error ink on the dark tint */
  --baht-red-700: #ef4444;

  --baht-slate-50: #0f1d33; /* info tint */
  --baht-slate-500: #7ea3d2; /* info, accent */
  --baht-slate-600: #a8c8f0; /* link ink */

  /* Dark inverts one distribution rule: the card is *lighter* than the page
     (surface base-100 over the base-200 app background). */
  --baht-base-100: #171717; /* surfaces: panels, tables, inputs, modals */
  --baht-base-300: var(--baht-cream-300);
  --baht-row-alt: #141414;

  /* ink flips: the primary button is now the brightest thing on screen */
  --baht-primary: #fafafa;
  --baht-primary-content: #171717;
  --baht-secondary: var(--baht-gray-200);
  --baht-secondary-content: var(--baht-gray-900);
  --baht-accent-content: var(--baht-slate-900);
  --baht-neutral: var(--baht-gray-200);
  --baht-neutral-content: #fafafa;
  --baht-info-content: var(--baht-slate-900);
  --baht-success: var(--baht-green-400);
  --baht-success-content: var(--baht-green-950);
  --baht-warning-content: var(--baht-gold-900);
  --baht-error-content: var(--baht-red-900);
  --baht-error-dot: var(--baht-red-500);

  --baht-color-surface-alt: #1f1f1f;
  --baht-color-divider: #222222;
  --baht-color-border-control: var(--baht-gray-400); /* 3.8:1 on the dark surface */

  /* the light-mode mixes lift a black primary toward white; on a dark canvas
     the primary is white, so hover/active settle toward black instead. */
  --baht-color-primary-hover: color-mix(in oklab, var(--baht-primary) 88%, black);
  --baht-color-primary-active: color-mix(in oklab, var(--baht-primary) 76%, black);
  --baht-color-primary-tint: color-mix(in oklab, var(--baht-primary) 12%, var(--baht-base-100));
  --baht-color-primary-wash: color-mix(in oklab, var(--baht-primary) 8%, transparent);
  --baht-color-primary-wash-active: color-mix(in oklab, var(--baht-primary) 14%, transparent);
  --baht-color-danger-hover: color-mix(in oklab, var(--baht-error) 88%, white);
  --baht-color-link: var(--baht-slate-600);

  --baht-color-shadow-ink: 0, 0, 0;
  --baht-shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
  --baht-shadow-float: 0 4px 16px rgba(0, 0, 0, 0.5), 0 24px 48px -8px rgba(0, 0, 0, 0.6);
}

/* @generated theme-light */
/* jscpd:ignore-start */
[data-baht-theme='light'],
.baht-light {
  --baht-green-50: #f0fdf4;
  --baht-green-100: #dcfce7;
  --baht-green-200: #bbf7d0;
  --baht-green-300: #86efac;
  --baht-green-400: #4ade80;
  --baht-green-500: #22c55e;
  --baht-green-600: #16a34a;
  --baht-green-700: #15803d;
  --baht-green-750: #166534;
  --baht-green-800: #14532d;
  --baht-green-900: #0f3d22;
  --baht-green-950: #052e16;
  --baht-cream-50: #ffffff;
  --baht-cream-100: #ffffff;
  --baht-cream-200: #f5f5f5;
  --baht-cream-300: #e5e5e5;
  --baht-cream-400: #d4d4d4;
  --baht-gray-50: #fafafa;
  --baht-gray-100: #f5f5f5;
  --baht-gray-200: #e5e5e5;
  --baht-gray-300: #d4d4d4;
  --baht-gray-400: #a3a3a3;
  --baht-gray-500: #737373;
  --baht-gray-600: #595959;
  --baht-gray-700: #404040;
  --baht-gray-800: #262626;
  --baht-gray-900: #0a0a0a;
  --baht-chart-1: #1f7a4e;
  --baht-chart-2: #b8912e;
  --baht-chart-3: #2f6a9f;
  --baht-chart-4: #c44536;
  --baht-chart-5: #7b5ea7;
  --baht-chart-seq-1: #82c39e;
  --baht-chart-seq-2: #4fa577;
  --baht-chart-seq-3: #2c8c5b;
  --baht-chart-seq-4: #186540;
  --baht-chart-seq-5: #0d3422;
  --baht-chart-muted: var(--baht-gray-300);
  --baht-chart-grid: var(--baht-gray-200);
  --baht-rose-50: #fef2f2;
  --baht-rose-100: #fee2e2;
  --baht-rose-200: #fecaca;
  --baht-rose-300: #fca5a5;
  --baht-rose-400: #f87171;
  --baht-rose-500: #ef4444;
  --baht-rose-600: #dc2626;
  --baht-rose-700: #b91c1c;
  --baht-rose-800: #991b1b;
  --baht-gold-50: #fff5e3;
  --baht-gold-400: #fbbf24;
  --baht-gold-500: #f59e0b;
  --baht-gold-600: #d97706;
  --baht-gold-700: #8a5f10;
  --baht-red-50: #fef2f2;
  --baht-red-400: #f87171;
  --baht-red-500: #dc2626;
  --baht-red-600: #991b1b;
  --baht-red-700: #7f1d1d;
  --baht-slate-50: #eaf1fb;
  --baht-slate-500: #3465a8;
  --baht-slate-600: #255492;
  --baht-base-100: #ffffff;
  --baht-base-300: var(--baht-cream-200);
  --baht-row-alt: var(--baht-gray-50);
  --baht-primary: #171717;
  --baht-primary-content: #fafafa;
  --baht-secondary: var(--baht-gray-100);
  --baht-secondary-content: var(--baht-gray-900);
  --baht-accent-content: #ffffff;
  --baht-neutral: #171717;
  --baht-neutral-content: #fafafa;
  --baht-info-content: #ffffff;
  --baht-success: var(--baht-green-600);
  --baht-success-content: #ffffff;
  --baht-warning-content: var(--baht-gold-900);
  --baht-error-content: #ffffff;
  --baht-error-dot: var(--baht-rose-500);
  --baht-color-surface-alt: var(--baht-gray-50);
  --baht-color-divider: var(--baht-gray-100);
  --baht-color-border-control: #949494;
  --baht-color-primary-hover: color-mix(in oklab, var(--baht-primary) 86%, white);
  --baht-color-primary-active: color-mix(in oklab, var(--baht-primary) 74%, white);
  --baht-color-primary-tint: color-mix(in oklab, var(--baht-primary) 8%, white);
  --baht-color-primary-wash: color-mix(in oklab, var(--baht-primary) 5%, transparent);
  --baht-color-primary-wash-active: color-mix(in oklab, var(--baht-primary) 9%, transparent);
  --baht-color-danger-hover: color-mix(in oklab, var(--baht-error) 84%, black);
  --baht-color-link: var(--baht-slate-600);
  --baht-color-shadow-ink: 0, 0, 0;
  --baht-shadow-lift:
    0 1px 3px rgba(var(--baht-color-shadow-ink), 0.08),
    0 1px 2px -1px rgba(var(--baht-color-shadow-ink), 0.06);
  --baht-shadow-float:
    0 2px 6px rgba(var(--baht-color-shadow-ink), 0.06),
    0 12px 32px -8px rgba(var(--baht-color-shadow-ink), 0.12);
}
/* jscpd:ignore-end */
/* @end theme-light */

/* the surrounding page follows the theme too, when the host opts in */
[data-baht-theme] {
  color-scheme: light;
}
[data-baht-theme='dark'],
.baht-dark {
  color-scheme: dark;
}


/* ============================================================
   Structural styles (light DOM — override freely per app)
   ============================================================ */

.baht-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--baht-field-gap);
  font-family: var(--baht-font-family);
  font-size: var(--baht-font-size);
  color: var(--baht-color-text);
}

/* width -> flex-basis (spec 01 §3): 1/4 1/2 3/4 full, minus gutters */
.baht-field {
  display: block;
  flex: 0 0 100%;
  min-width: 0;
}
.baht-field--w-1-4 {
  flex-basis: calc(25% - var(--baht-field-gap) * 3 / 4);
}
.baht-field--w-1-2 {
  flex-basis: calc(50% - var(--baht-field-gap) / 2);
}
.baht-field--w-3-4 {
  flex-basis: calc(75% - var(--baht-field-gap) / 4);
}
.baht-field--w-full {
  flex-basis: 100%;
}
/* Phone: a half- or quarter-width field is too narrow to read (a datepicker
   cut "19:02" to "19:0"), so every field takes the whole row. */
@media (max-width: 480px) {
  .baht-field--w-1-4,
  .baht-field--w-1-2,
  .baht-field--w-3-4 {
    flex-basis: 100%;
  }
}
.baht-field--hidden {
  display: none;
}
/* rule show: the field was hidden last render, fade it into place */
.baht-field--revealed {
  animation: baht-rise-in var(--baht-dur-base) var(--baht-ease);
}

/* readonly display mode (<baht-form readonly>): the same grid/widths, values as text.
   Label sits small and muted above a plain value; empty values say so quietly. */
.baht-form--readonly .baht-required-mark {
  display: none;
}
.baht-form--readonly .baht-help {
  display: none;
}
.baht-field--readonly .baht-label {
  margin-bottom: 2px;
  font-size: var(--baht-text-xs);
  font-weight: 500;
  color: var(--baht-color-text-muted);
}
.baht-readonly-value {
  display: block;
  color: var(--baht-color-text);
  font-size: var(--baht-font-size);
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.baht-readonly-value--empty {
  color: var(--baht-color-text-muted);
  font-style: italic;
}
.baht-readonly-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  white-space: normal;
}
.baht-readonly-chip {
  display: inline-block;
  padding: 2px 10px;
  border: var(--baht-border-default);
  border-radius: var(--baht-radius-full, 999px);
  background: var(--baht-color-surface-muted, var(--baht-color-surface));
  font-size: var(--baht-text-sm, 0.875rem);
}
/* An uploaded file in read-only mode: the chip is a download link. */
a.baht-readonly-file {
  color: var(--baht-color-primary, inherit);
  text-decoration: none;
}
a.baht-readonly-file:hover,
a.baht-readonly-file:focus-visible {
  text-decoration: underline;
}
.baht-readonly-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.baht-readonly-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 6px 10px;
  border: var(--baht-border-default);
  border-radius: var(--baht-radius-md);
}
.baht-readonly-cell {
  display: inline-flex;
  flex-direction: column;
}
.baht-readonly-cell-label {
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-muted);
}
.baht-readonly-cell-value {
  font-size: var(--baht-text-sm, 0.875rem);
}

.baht-label {
  display: block;
  margin-bottom: var(--baht-space-2);
  font-size: var(--baht-font-size-label);
  font-weight: var(--baht-font-weight-label);
  color: var(--baht-color-text);
}
.baht-required-mark {
  color: var(--baht-color-error);
  margin-left: 4px;
}
/* "(optional)" after a non-required label — <baht-form show-optional> */
.baht-optional {
  margin-left: 4px;
  font-weight: 400;
  color: var(--baht-color-text-muted);
}

.baht-control {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--baht-control-height);
  padding: 10px var(--baht-control-padding-x); /* 21px line + 20 + 2 border < 44, so min-height sets the size */
  border: 1px solid var(--baht-color-border-control);
  border-radius: var(--baht-radius);
  background: var(--baht-color-surface);
  color: var(--baht-color-text);
  font: inherit;
  font-size: var(--baht-font-size-control);
  transition:
    border-color var(--baht-dur-fast) var(--baht-ease),
    box-shadow var(--baht-dur-fast) var(--baht-ease);
}
.baht-control::placeholder {
  color: var(--baht-gray-500);
} /* gray-400 fails 4.5:1 on white */
.baht-control:focus-visible {
  border-color: var(--baht-color-focus);
  /* solid ring, no soft box-shadow fade — same crisp focus as .baht-otp input */
  outline: var(--baht-focus-ring);
  outline-offset: 0;
}
.baht-control:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.baht-control[aria-invalid='true'] {
  border-color: var(--baht-color-error);
}
.baht-control--textarea {
  min-height: auto;
}
.baht-control--currency {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- field.icon — leading glyph inside text/currency/textarea/
   dropdown controls (spec: FieldDescriptor.icon). Bare `.baht-field-icon`
   is a flex child (used as-is inside <baht-select>'s trigger row); wrapped
   in `.baht-field-icon-wrap` it's absolutely positioned over the control,
   which gets `.baht-control--has-icon` for the extra left padding. ---------- */
.baht-field-icon {
  display: inline-flex;
  flex: none;
  color: var(--baht-color-text-muted);
}
.baht-field-icon .baht-icon {
  height: 1rem;
}
.baht-field-icon-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.baht-field-icon-wrap .baht-field-icon {
  position: absolute;
  left: var(--baht-control-padding-x);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.baht-field-icon-wrap .baht-control--has-icon {
  padding-left: calc(var(--baht-control-padding-x) * 2 + 1rem);
}
/* textarea is multi-line — pin the icon to the first line instead of
   vertically centering it over the whole box. */
.baht-field-icon-wrap:has(.baht-control--textarea) .baht-field-icon {
  top: 10px; /* matches .baht-control's own vertical padding */
  transform: none;
}

/* ---------- <baht-datepicker> input — trailing calendar glyph ---------- */
.baht-datepicker-field {
  display: block;
  position: relative;
  width: 100%;
}
.baht-datepicker-field .baht-control--date {
  padding-right: calc(var(--baht-control-padding-x) + 1.25rem);
  width: 100%;
}
.baht-datepicker-field-icon {
  position: absolute;
  top: 50%;
  right: var(--baht-control-padding-x);
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--baht-color-text-muted);
  pointer-events: none;
}
.baht-datepicker-field-icon .baht-icon {
  height: 1rem;
}

/* ---------- <baht-select> — own popup list, never the OS picker ----------
   Trigger is a button styled as a control; the list is a positioned child so
   it looks identical on iOS/macOS and takes the tokens like everything else. */
.baht-select {
  position: relative;
}
.baht-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--baht-space-2);
  text-align: left;
  cursor: pointer;
}
.baht-select-trigger:disabled {
  cursor: not-allowed;
}
.baht-select-trigger[aria-readonly='true'] {
  cursor: default;
  background: var(--baht-color-surface-alt);
}
.baht-select-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* option description after the label, same line (control height stays) */
.baht-select-value:has(+ .baht-select-desc) {
  flex: 0 1 auto;
}
.baht-select-desc {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--baht-text-sm);
  color: var(--baht-color-text-muted);
}
.baht-select-trigger--placeholder .baht-select-value {
  color: var(--baht-gray-500); /* same as ::placeholder — 4.9:1 on white */
}
.baht-select-chevron {
  flex: none;
  display: inline-flex;
  color: var(--baht-color-text-muted);
  transition: transform var(--baht-dur-fast) var(--baht-ease);
}
.baht-select-chevron .baht-icon {
  height: 0.75rem;
}
.baht-select--open .baht-select-chevron {
  transform: rotate(180deg);
}
.baht-select--open .baht-select-trigger {
  border-color: var(--baht-color-focus);
  outline: var(--baht-focus-ring);
  outline-offset: 0;
}

/* Shared popup listbox (select, typeahead). */
.baht-listbox {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 16rem;
  overflow-y: auto;
  padding: var(--baht-space-1) 0;
  border: var(--baht-border-cool);
  border-radius: var(--baht-radius-sm);
  background: var(--baht-color-surface);
  box-shadow: var(--baht-shadow-lift);
  font-family: var(--baht-font-family);
  font-size: var(--baht-font-size);
  color: var(--baht-color-text);
}
.baht-listbox[hidden] {
  display: none;
}
.baht-listbox-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--baht-space-2);
  min-height: 36px;
  padding: var(--baht-space-2) var(--baht-space-3);
  cursor: pointer;
}
.baht-listbox-option--active {
  background: var(--baht-color-primary-wash);
}
.baht-listbox-option[aria-selected='true'] {
  font-weight: 600;
  color: var(--baht-color-link);
}
.baht-listbox-option--placeholder,
.baht-listbox-option--placeholder[aria-selected='true'] {
  color: var(--baht-color-text-muted);
  font-weight: normal; /* "nothing picked" is not a highlighted choice */
}
.baht-listbox-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.baht-listbox-option-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.baht-listbox-option-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--baht-text-xs);
  font-weight: normal;
  color: var(--baht-color-text-muted);
}
.baht-listbox-option-sub {
  flex: none;
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-subtle);
}
.baht-listbox-note {
  padding: var(--baht-space-2) var(--baht-space-3);
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-subtle);
}

/* ---------- <baht-typeahead> ---------- */
.baht-typeahead {
  position: relative;
  font-family: var(--baht-font-family);
}

/* ---------- <baht-tags> ---------- */
.baht-tags {
  position: relative;
  font-family: var(--baht-font-family);
}
.baht-tags-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--baht-space-1);
  height: auto;
  min-height: var(--baht-control-height);
  padding: calc(var(--baht-space-2) - 2px) var(--baht-space-2);
  cursor: text;
}
/* the focusable node is the borderless input inside — same ring as every
   other .baht-control, triggered by :focus-within instead of :focus-visible */
.baht-tags-control:focus-within {
  border-color: var(--baht-color-focus);
  outline: var(--baht-focus-ring);
  outline-offset: 0;
}
.baht-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--baht-space-1);
  padding: 2px var(--baht-space-2);
  border-radius: var(--baht-radius-full, 999px);
  background: var(--baht-color-primary-wash);
  color: var(--baht-color-text);
  font-size: var(--baht-text-sm, 0.875rem);
  line-height: 1.4;
  max-width: 100%;
}
.baht-tag-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.baht-tag-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: none;
  background: none;
  font-size: 1em;
  line-height: 1;
  color: var(--baht-color-text-muted);
  cursor: pointer;
  /* WCAG 2.2 target size: pad the hit area to 24px, then cancel it out so the chip keeps its size. */
  padding: 6px 8px;
  margin: -6px -8px;
}
.baht-tag-chip-remove:hover {
  color: var(--baht-color-text);
}
.baht-tag-chip-remove:focus-visible {
  outline: var(--baht-focus-ring);
  outline-offset: 1px;
  border-radius: var(--baht-radius-sm);
}
.baht-tags-input {
  flex: 1 1 80px;
  min-width: 80px;
  border: none;
  background: none;
  padding: 2px 0;
  font: inherit;
  font-size: var(--baht-font-size-control);
  color: var(--baht-color-text);
  outline: none;
}
.baht-tags-input:disabled {
  color: var(--baht-color-text-muted);
}
/* transient "why that chip was refused" hint (max_length/max_items/allow_new/duplicate) */
.baht-tags-hint {
  margin-top: var(--baht-space-1);
  font-size: var(--baht-text-sm, 0.875rem);
  color: var(--baht-color-text-muted);
}
.baht-control--radio,
.baht-control--multiselect,
.baht-control--checkbox,
.baht-control--toggle {
  border: none;
  padding: 0;
  min-height: auto;
  background: none;
  display: flex;
  flex-direction: column;
  gap: var(--baht-space-1);
}
.baht-option {
  display: flex;
  align-items: center;
  gap: var(--baht-space-2);
  cursor: pointer;
  /* WCAG 2.2 target size: rows of small native inputs stay 24px apart. */
  min-height: 24px;
}
.baht-option .baht-label {
  margin: 0;
  font-weight: normal;
  font-size: var(--baht-font-size);
  color: var(--baht-color-text);
}
.baht-option input[type='checkbox'],
.baht-option input[type='radio'] {
  accent-color: var(--baht-color-primary);
}

/* radio variant="card" — selectable card (label + muted description),
   accent border + wash only on the checked card (20baht: restraint —
   the accent marks state, it does not decorate every option). */
.baht-control--radio-card {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--baht-space-3);
}
.baht-option--card {
  align-items: stretch;
  flex-direction: column;
  gap: var(--baht-space-1);
  flex: 1 1 200px;
  /* An `option.width` fraction (below) counts padding+border in that
     percentage, like every other sized box in this file — without this,
     the browser default (content-box) adds padding on top of the
     flex-basis, inflating the rendered card past its intended share of
     the row. */
  box-sizing: border-box;
  border: var(--baht-border-default);
  border-radius: var(--baht-radius-md);
  padding: var(--baht-space-3) var(--baht-space-4);
  transition:
    border-color var(--baht-dur-fast) var(--baht-ease),
    background-color var(--baht-dur-fast) var(--baht-ease);
}
.baht-option--card:has(input:checked) {
  border-color: var(--baht-color-primary);
  background: var(--baht-color-primary-wash);
}
.baht-option--card:has(input:focus-visible) {
  outline: var(--baht-focus-ring);
  outline-offset: 2px;
}
.baht-option-card-row {
  display: flex;
  align-items: center;
  gap: var(--baht-space-2);
  /* A narrow card (a 1/4 option width in a phone-width form) drops the label
     under its icon instead of pushing it past the card edge into the next one. */
  flex-wrap: wrap;
  min-width: 0;
}
/* `option.width` — same fractions as `field.width`, against the card row's
   own gap (`--baht-space-3`) instead of the form grid's `--baht-field-gap`,
   overriding the default `flex: 1 1 200px` auto-wrap. `min-width: 0`
   overrides the flex item default of `auto` (= its content's min-content
   width), which otherwise floors the card at its label's natural width and
   silently defeats a basis smaller than that (e.g. long labels forcing 3
   per row instead of the requested 4) — the label wraps instead. */
.baht-option-card--w-1-4 {
  flex: 0 0 calc(25% - var(--baht-space-3) * 3 / 4);
  min-width: 0;
  padding-inline: var(--baht-space-3);
}
.baht-option-card--w-1-2 {
  flex: 0 0 calc(50% - var(--baht-space-3) / 2);
  min-width: 0;
}
.baht-option-card--w-3-4 {
  flex: 0 0 calc(75% - var(--baht-space-3) / 4);
  min-width: 0;
}
.baht-option-card--w-full {
  flex: 0 0 100%;
  min-width: 0;
}
/* Selection reads from the card's own border/wash (above), not a radio
   bullet — visually hidden rather than `display: none` so the input stays
   in the tab order and keyboard-focusable (`:focus-visible` above). */
.baht-option--card input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.baht-option-card-icon {
  display: inline-flex;
  flex: none;
  color: var(--baht-color-text-muted);
}
.baht-option-card-icon .baht-icon {
  height: 1.25rem;
  width: auto;
}
.baht-option--card:has(input:checked) .baht-option-card-icon {
  color: var(--baht-color-primary);
}
.baht-option-card-title {
  font-weight: 600;
  color: var(--baht-color-text);
  /* Last resort when even its own line is too narrow: clip, never overflow. */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.baht-option-card-desc {
  font-size: var(--baht-text-sm);
  color: var(--baht-color-text-muted);
}

.baht-control--checkbox {
  flex-direction: row;
  align-items: center;
}

/* toggle switch */
.baht-control--toggle {
  flex-direction: row;
  align-items: center;
}
.baht-control--toggle input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.baht-toggle-track {
  width: 36px;
  height: 20px;
  border-radius: var(--baht-radius-pill);
  background: var(--baht-color-border-control); /* off state must read at 3:1 */
  transition: background var(--baht-dur-fast) var(--baht-ease);
  flex: none;
  position: relative;
}
.baht-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--baht-color-surface);
  transition: left var(--baht-dur-fast) var(--baht-ease);
}
.baht-control--toggle input:checked + .baht-toggle-track {
  background: var(--baht-color-primary);
}
.baht-control--toggle input:checked + .baht-toggle-track .baht-toggle-thumb {
  left: 18px;
}
/* the real checkbox is visually hidden — surface keyboard focus on the track */
.baht-control--toggle input:focus-visible + .baht-toggle-track {
  outline: var(--baht-focus-ring);
  outline-offset: 2px;
}

.baht-error {
  margin-top: var(--baht-space-2);
  color: var(--baht-red-600);
  font-size: var(--baht-font-size-error);
  animation: baht-rise-in var(--baht-dur-base) var(--baht-ease);
}
.baht-help {
  margin-top: var(--baht-space-2);
  color: var(--baht-color-text-muted);
  font-size: var(--baht-text-sm);
}
/* client-script messages (spec 01 §14): showFieldMsg() under a control, addErrorMessage() above the form */
.baht-field-msg {
  margin-top: 6px;
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-muted);
}
.baht-field-msg--warning {
  color: var(--baht-color-warning);
}
.baht-field-msg--error {
  color: var(--baht-red-600);
}
.baht-form-messages {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--baht-space-2);
}
.baht-form-msg {
  border: var(--baht-border-cool);
  border-left: 3px solid var(--baht-color-info);
  border-radius: var(--baht-radius-md);
  background: var(--baht-slate-50);
  padding: var(--baht-space-3) var(--baht-space-4);
  font-family: var(--baht-font-family);
  font-size: var(--baht-font-size);
  color: var(--baht-color-text);
}
.baht-form-msg--warning {
  border-left-color: var(--baht-color-warning);
  background: var(--baht-gold-50);
}
.baht-form-msg--error {
  border-left-color: var(--baht-color-danger);
  background: var(--baht-red-50);
}

.baht-text {
  color: var(--baht-color-text);
}
.baht-text--muted,
.baht-text--info {
  color: var(--baht-color-text-muted);
}
/* semantic figures (ledger amounts, deltas) */
.baht-text--success {
  color: var(--baht-success-ink);
}
.baht-text--danger {
  color: var(--baht-error-ink);
}
.baht-text--heading {
  font-family: var(--baht-font-display);
  font-size: var(--baht-text-2xl);
  font-weight: 500;
  letter-spacing: var(--baht-tracking-tight);
  line-height: var(--baht-leading-tight);
}

.baht-section {
  display: flex;
  align-items: center;
  gap: var(--baht-space-3);
  margin: var(--baht-space-2) 0;
}
.baht-section-label {
  font-size: var(--baht-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--baht-color-text-muted);
  white-space: nowrap;
}
.baht-section::after {
  content: '';
  flex: 1;
  height: var(--baht-border-width);
  background: var(--baht-color-border);
}

/* ============================================================
   Buttons — no scale, no shadow change; color does all the work
   ============================================================ */

.baht-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--baht-space-2);
  min-height: var(--baht-control-height);
  padding: 10px var(--baht-space-4);
  border: 1px solid transparent;
  border-radius: var(--baht-radius-md);
  background: var(--baht-color-primary);
  color: var(--baht-color-primary-contrast);
  font-family: var(--baht-font-family);
  font-size: var(--baht-font-size);
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--baht-dur-fast) var(--baht-ease),
    border-color var(--baht-dur-fast) var(--baht-ease),
    color var(--baht-dur-fast) var(--baht-ease),
    transform var(--baht-dur-fast) var(--baht-ease);
}
.baht-button:hover {
  background: var(--baht-color-primary-hover);
}
.baht-button:active {
  background: var(--baht-color-primary-active);
  transform: translateY(1px);
}
.baht-button:focus-visible {
  outline: var(--baht-focus-ring);
  outline-offset: 2px;
}
.baht-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.baht-button:disabled:hover {
  background: var(--baht-color-primary);
}

.baht-button--secondary {
  background: var(--baht-color-surface);
  color: var(--baht-color-text);
  border-color: var(--baht-color-border-strong);
}
.baht-button--secondary:hover {
  background: var(--baht-color-primary-wash);
}
.baht-button--secondary:active {
  background: var(--baht-color-primary-wash-active);
}
.baht-button--secondary:disabled:hover {
  background: var(--baht-color-surface);
}

.baht-button--ghost {
  background: transparent;
  color: var(--baht-color-text);
}
.baht-button--ghost:hover {
  background: var(--baht-color-primary-wash);
}
.baht-button--ghost:active {
  background: var(--baht-color-primary-wash-active);
}
.baht-button--ghost:disabled:hover {
  background: transparent;
}

.baht-button--danger {
  background: var(--baht-color-danger);
}
.baht-button--danger:hover {
  background: var(--baht-color-danger-hover);
}
.baht-button--danger:active {
  background: var(--baht-red-600);
}
.baht-button--danger:disabled:hover {
  background: var(--baht-color-danger);
}

.baht-button--sm {
  min-height: 32px;
  padding: 6px var(--baht-space-3);
  font-size: var(--baht-text-sm);
  border-radius: var(--baht-radius-sm);
}
.baht-button--lg {
  min-height: 48px;
  padding: 14px 22px;
  font-size: var(--baht-text-md);
  border-radius: var(--baht-radius-box);
}

/* leading icon inside a button — inherits currentColor, never shrinks */
.baht-button .baht-icon {
  flex: 0 0 auto;
}

/* icon-only: square, centered glyph */
.baht-button--icon {
  padding: 0;
  width: var(--baht-control-height);
  min-width: var(--baht-control-height);
}
.baht-button--icon.baht-button--sm {
  width: 32px;
  min-width: 32px;
}
.baht-button--icon.baht-button--lg {
  width: 48px;
  min-width: 48px;
}

/* back-compat alias used by <baht-workflow>'s Back button */
.baht-button--back {
  background: var(--baht-color-surface);
  color: var(--baht-color-text);
  border-color: var(--baht-color-border-strong);
}
.baht-button--back:hover {
  background: var(--baht-color-primary-wash);
}
.baht-button--back:disabled:hover {
  background: var(--baht-color-surface);
}

/* ============================================================
   Badges — status pills, tags, counters
   ============================================================ */

.baht-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--baht-radius-pill);
  font-family: var(--baht-font-family);
  font-size: var(--baht-text-xs);
  font-weight: 500;
  background: var(--baht-color-bg-sunken);
  color: var(--baht-gray-800);
}
.baht-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--baht-radius-pill);
  background: var(--baht-gray-500);
}

.baht-badge--success {
  background: var(--baht-success-tint);
  color: var(--baht-success-ink);
  font-weight: 600;
}
.baht-badge--success .baht-badge-dot {
  background: var(--baht-success-dot);
}
.baht-badge--danger {
  background: var(--baht-error-tint);
  color: var(--baht-error-ink);
  font-weight: 600;
}
.baht-badge--danger .baht-badge-dot {
  background: var(--baht-error-dot);
}
.baht-badge--warning {
  background: var(--baht-warning-tint);
  color: var(--baht-warning-ink);
  font-weight: 600;
}
.baht-badge--warning .baht-badge-dot {
  background: var(--baht-warning-dot);
}
.baht-badge--info {
  background: var(--baht-info-tint);
  color: var(--baht-info-ink);
  font-weight: 600;
}
.baht-badge--info .baht-badge-dot {
  background: var(--baht-info-dot);
}

.baht-badge--outline {
  background: var(--baht-color-surface);
  border: var(--baht-border-cool);
  color: var(--baht-color-text);
  padding: 4px 10px;
}
.baht-badge--solid {
  background: var(--baht-color-primary);
  color: var(--baht-color-primary-contrast);
  padding: 4px 10px;
}
.baht-badge--gold {
  background: var(--baht-color-accent);
  color: var(--baht-color-accent-contrast);
  padding: 4px 10px;
} /* white on gold = 2.3:1 */
.baht-badge--inverse {
  background: var(--baht-color-bg-inverse);
  color: var(--baht-color-text-inverse);
  padding: 4px 10px;
}
.baht-badge--mono {
  font-family: var(--baht-font-mono);
  font-size: 0.6875rem;
  padding: 4px 8px;
  background: var(--baht-color-bg-sunken);
  color: var(--baht-gray-700);
}

/* ============================================================
   Avatar — small circular identity chip
   ============================================================ */

.baht-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--baht-radius-pill);
  background: var(--baht-color-bg-inverse);
  color: var(--baht-color-text-inverse);
  font-family: var(--baht-font-family);
  font-weight: 600;
  line-height: 1;
  user-select: none;
}
.baht-avatar--sm {
  width: 24px;
  height: 24px;
  font-size: 10px;
}
.baht-avatar--md {
  width: 32px;
  height: 32px;
  font-size: 12px;
}
.baht-avatar--lg {
  width: 44px;
  height: 44px;
  font-size: 15px;
}

/* ============================================================
   Code — inline chip + block
   ============================================================ */
.baht-code {
  font-family: var(--baht-font-mono);
  font-size: 0.88em;
}
code.baht-code {
  background: var(--baht-color-bg-sunken);
  border: var(--baht-border-default);
  padding: 1px 6px;
  border-radius: var(--baht-radius-xs);
  white-space: nowrap;
}
.baht-code--block {
  display: block;
  background: var(--baht-color-bg-inverse);
  color: var(--baht-color-text-inverse);
  padding: var(--baht-space-4);
  border-radius: var(--baht-radius-md);
  font-size: var(--baht-text-xs);
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}

/* ============================================================
   Workflow chrome
   ============================================================ */

.baht-workflow {
  display: block;
  font-family: var(--baht-font-family);
  /* the incoming step starts a few px off to the side; never show a scrollbar for it */
  overflow-x: clip;
}
/* Step change: the new step (a fresh node, keyed by form_name) slides in from
   the side it came from — right on next, left on back — and settles with the
   paper ease. First render carries no direction class, so nothing plays. */
.baht-workflow-step--forward {
  animation: baht-slide-in-forward var(--baht-dur-slow) var(--baht-ease);
}
.baht-workflow-step--back {
  animation: baht-slide-in-back var(--baht-dur-slow) var(--baht-ease);
}
@keyframes baht-slide-in-forward {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}
@keyframes baht-slide-in-back {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
}
.baht-workflow-nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--baht-space-2);
  margin-top: var(--baht-space-6);
}

/* approval step (spec 03 §4): read-only summary + decision buttons */
.baht-approval {
  display: flex;
  flex-direction: column;
  gap: var(--baht-space-4);
}
.baht-approval-summary {
  background: var(--baht-color-bg-sunken);
  border: var(--baht-border-default);
  border-radius: var(--baht-radius-md);
  padding: var(--baht-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--baht-space-4);
}
.baht-approval-group-title {
  margin: 0 0 var(--baht-space-2);
  font-size: var(--baht-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--baht-color-text-muted);
}
.baht-approval-group + .baht-approval-group {
  margin-top: var(--baht-space-3);
  padding-top: var(--baht-space-3);
  border-top: 1px solid var(--baht-color-border);
}
.baht-approval-summary .baht-form {
  font-size: var(--baht-text-sm);
}
.baht-approval-empty {
  margin: 0;
  color: var(--baht-color-text-muted);
  font-size: var(--baht-text-sm);
}
.baht-approval-comment {
  display: flex;
  flex-direction: column;
  gap: var(--baht-space-1);
}
.baht-approval-comment-label {
  font-size: var(--baht-text-sm);
  font-weight: 500;
}
.baht-approval-comment textarea {
  font-family: var(--baht-font-family);
  font-size: var(--baht-font-size-control);
  color: var(--baht-color-text);
  background: var(--baht-color-surface);
  border: 1px solid var(--baht-color-border-strong);
  border-radius: var(--baht-radius-sm);
  padding: var(--baht-space-2) var(--baht-space-3);
  resize: vertical;
}
.baht-button--reject {
  background: var(--baht-color-surface);
  color: var(--baht-red-600);
  border-color: var(--baht-red-500);
}
.baht-button--reject:hover {
  background: var(--baht-error-tint);
}

/* ============================================================
   Data — table & list (server-side paging: host fetches per page)
   ============================================================ */

/*
 * Card-like list: one hairline between rows (no zebra), a light tinted
 * header, a toolbar above (count / search / columns), row hover in the
 * primary wash. Knobs: --baht-table-row-height, --baht-table-pad-x.
 */
.baht-table-wrap {
  --baht-table-row-height: 46px;
  --baht-table-pad-x: var(--baht-space-4);
  overflow-x: auto;
  scroll-padding-top: 44px; /* focused rows stay clear of the sticky header (WCAG 2.4.11) */
  background: var(--baht-color-surface);
  border: var(--baht-border-cool);
  border-radius: var(--baht-radius-lg);
  font-family: var(--baht-font-family);
  font-size: var(--baht-font-size);
  color: var(--baht-color-text);
}

/* toolbar */
.baht-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--baht-space-3);
  flex-wrap: wrap;
  padding: var(--baht-space-3) var(--baht-table-pad-x);
  border-bottom: 1px solid var(--baht-color-border-cool);
}
.baht-table-toolbar-start,
.baht-table-toolbar-end {
  display: flex;
  align-items: center;
  gap: var(--baht-space-2);
  min-width: 0;
}
.baht-table-toolbar-end {
  margin-left: auto;
}
.baht-table-count {
  font-size: var(--baht-text-sm);
  color: var(--baht-color-text-muted);
  white-space: nowrap;
}
.baht-table-picker-toggle {
  border-color: var(--baht-color-border-cool);
  color: var(--baht-color-text-muted);
}
.baht-table-picker-toggle:hover {
  color: var(--baht-color-text);
}
.baht-table-picker-toggle[aria-expanded='true'] {
  border-color: var(--baht-color-primary);
  color: var(--baht-color-primary);
}

/* grid */
.baht-table {
  width: 100%;
  border-collapse: collapse;
}
.baht-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 44px;
  background: var(--baht-color-surface-alt);
  color: var(--baht-color-text-muted);
  font-weight: 600;
  font-size: var(--baht-text-sm);
  text-align: left;
  padding: 0 var(--baht-table-pad-x);
  white-space: nowrap;
  border-bottom: 1px solid var(--baht-color-border-cool);
}
.baht-table td {
  height: var(--baht-table-row-height);
  padding: 8px var(--baht-table-pad-x);
  border-top: 1px solid var(--baht-color-divider);
  vertical-align: middle;
}
.baht-table tbody tr:first-child td {
  border-top-color: transparent;
}
/* page / sort: the host swaps `rows`, new <tr>s fade in (keyed by row id) */
.baht-table tbody tr.baht-table-row {
  animation: baht-fade-in var(--baht-dur-fast) var(--baht-ease);
}
/* group-by: a tinted band opens each group (ServiceNow list "Group by").
   The header is a disclosure button — chevron + "Column: value (n)". */
.baht-table th.baht-table-group-head {
  position: static;
  height: auto;
  padding: 0;
  background: var(--baht-color-surface-alt);
  border-top: 1px solid var(--baht-color-border-cool);
  border-bottom: 1px solid var(--baht-color-border-cool);
  font-size: var(--baht-text-sm);
  font-weight: 600;
  color: var(--baht-color-text);
  white-space: normal;
}
.baht-table tbody.baht-table-group:first-of-type th.baht-table-group-head {
  border-top: none;
}
.baht-table-group-toggle,
.baht-table th.baht-table-group-head > .baht-table-group-text {
  display: flex;
  align-items: center;
  gap: var(--baht-space-2);
  width: 100%;
  min-height: 40px;
  padding: var(--baht-space-2) var(--baht-table-pad-x);
  box-sizing: border-box;
}
.baht-table-group-toggle {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.baht-table-group-toggle:hover {
  background: var(--baht-color-primary-wash);
}
.baht-table-group-toggle:focus-visible {
  outline: 2px solid var(--baht-color-primary);
  outline-offset: -2px;
}
.baht-table-group-toggle .baht-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--baht-color-text-muted);
}
.baht-table-group-count {
  font-weight: 500;
  color: var(--baht-color-text-muted);
  font-variant-numeric: tabular-nums;
}
.baht-table tbody.baht-table-group tr.baht-table-row:first-of-type td {
  border-top-color: transparent;
}
.baht-table th.baht-table-index,
.baht-table td.baht-table-index {
  width: 48px;
  padding-right: var(--baht-space-2);
  color: var(--baht-color-text-subtle);
  font-variant-numeric: tabular-nums;
}
.baht-table th.baht-table-select,
.baht-table td.baht-table-select {
  width: 40px;
  padding-right: 0;
  line-height: 0;
}
.baht-table .baht-table-select input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--baht-color-primary);
  cursor: pointer;
}
.baht-table th.baht-table-actions,
.baht-table td.baht-table-actions {
  width: 48px;
  padding-left: 0;
  text-align: right;
}
.baht-table-actions-btn {
  color: var(--baht-color-text-subtle);
  border-color: var(--baht-color-border-cool);
}
.baht-table-actions-btn:hover {
  color: var(--baht-color-text);
}
.baht-table-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.baht-table-align-start {
  text-align: left;
}
.baht-table-align-center {
  text-align: center;
}
.baht-table-align-end {
  text-align: right;
}
/* inline-flex follows the cell's text-align, so numeric/end headers keep label-then-icon at the right edge */

/* sortable header: the whole label is the button */
.baht-table-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--baht-space-1);
  margin: 0 -6px;
  padding: 4px 6px;
  border: 0;
  border-radius: var(--baht-radius-xs);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.baht-table-sort .baht-icon {
  color: var(--baht-color-text-subtle);
}
.baht-table-sort:hover {
  color: var(--baht-color-text);
  background: var(--baht-color-primary-wash);
}
.baht-table-sort--active,
.baht-table-sort--active .baht-icon {
  color: var(--baht-color-primary);
}
.baht-table-sort:focus-visible {
  outline: var(--baht-focus-ring);
  outline-offset: 1px;
}

/* rows */
.baht-table tbody tr[tabindex]:hover {
  background: var(--baht-color-primary-wash);
  cursor: pointer;
}
.baht-table tbody tr.baht-table-row--selected {
  background: var(--baht-color-primary-tint);
}
.baht-table tbody tr[tabindex]:focus-visible {
  outline: var(--baht-focus-ring);
  outline-offset: -2px;
}
.baht-table-state {
  padding: var(--baht-space-8);
  text-align: center;
  color: var(--baht-color-text-muted);
}
.baht-table-state--error {
  color: var(--baht-red-600);
}
.baht-table-footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--baht-space-2) var(--baht-space-3);
  border-top: 1px solid var(--baht-color-border-cool);
}

/* Dual-list "Personalize List Columns" modal (Available/Selected + move buttons). */
.baht-table-picker-scrim {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(var(--baht-color-shadow-ink), 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--baht-space-6);
  animation: baht-fade-in var(--baht-dur-base) var(--baht-ease);
}
.baht-table-picker-modal {
  background: var(--baht-color-surface);
  border-radius: var(--baht-radius-lg);
  box-shadow: var(--baht-shadow-float);
  max-width: 46rem;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  font-family: var(--baht-font-family);
  color: var(--baht-color-text);
  animation: baht-rise-in var(--baht-dur-base) var(--baht-ease);
}
.baht-table-picker-modal-head {
  display: flex;
  align-items: center;
  gap: var(--baht-space-3);
  padding: var(--baht-space-5) var(--baht-space-6) 0;
}
.baht-table-picker-modal-head b {
  flex: 1;
  font-family: var(--baht-font-display);
  font-size: var(--baht-text-xl);
  font-weight: 600;
  letter-spacing: var(--baht-tracking-tight);
}
.baht-table-picker-modal-close {
  border: none;
  background: none;
  cursor: pointer;
  padding: var(--baht-space-1);
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--baht-color-text-muted);
  font-size: var(--baht-text-lg);
  line-height: 1;
  border-radius: var(--baht-radius-xs);
}
.baht-table-picker-modal-close:hover {
  color: var(--baht-color-text);
}
.baht-table-picker-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--baht-space-4);
  padding: var(--baht-space-4) var(--baht-space-6);
  overflow-y: auto;
}
.baht-table-picker-collabel {
  font-size: var(--baht-text-sm);
  font-weight: 600;
  margin-bottom: var(--baht-space-1);
}
.baht-table-picker-select {
  width: 100%;
  min-width: 14rem;
  border: 1px solid var(--baht-color-border-control);
  border-radius: var(--baht-radius-sm);
  background: var(--baht-color-surface);
  color: var(--baht-color-text);
  font-family: var(--baht-font-family);
  font-size: var(--baht-text-sm);
  padding: var(--baht-space-1);
}
@media (pointer: coarse) {
  .baht-table-picker-select {
    font-size: var(--baht-font-size-control);
  }
}
.baht-table-picker-select option {
  padding: var(--baht-space-1) var(--baht-space-2);
  border-radius: var(--baht-radius-xs);
}
.baht-table-picker-btns {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--baht-space-2);
}
/* Available side is a tree so reference columns can unfold (dot-walk). */
.baht-table-picker-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}
.baht-table-picker-avail {
  min-width: 14rem;
  max-height: 16rem;
  overflow: auto;
  border: var(--baht-border-cool);
  border-radius: var(--baht-radius-sm);
  background: var(--baht-color-surface);
  padding: var(--baht-space-1);
}
.baht-table-picker-row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: calc(var(--baht-picker-depth, 0) * 1.25rem);
}
.baht-table-picker-expand {
  width: 1.5rem;
  height: 1.5rem; /* 24px target (WCAG 2.5.8) */
  flex: none;
  border: none;
  background: transparent;
  color: var(--baht-color-text-subtle);
  font-size: var(--baht-text-xs);
  cursor: pointer;
  border-radius: var(--baht-radius-xs);
}
.baht-table-picker-expand:hover {
  color: var(--baht-color-text);
  background: var(--baht-color-primary-wash);
}
.baht-table-picker-expand--leaf {
  pointer-events: none;
}
.baht-table-picker-option {
  flex: 1;
  text-align: left;
  padding: var(--baht-space-1) var(--baht-space-2);
  border: none;
  border-radius: var(--baht-radius-xs);
  background: transparent;
  color: var(--baht-color-text);
  font-family: var(--baht-font-family);
  font-size: var(--baht-text-sm);
  cursor: pointer;
}
.baht-table-picker-option:hover:not(:disabled) {
  background: var(--baht-color-primary-wash);
}
.baht-table-picker-option[aria-pressed='true'],
.baht-table-picker-option[aria-pressed='true']:hover {
  background: var(--baht-color-primary);
  color: var(--baht-color-text-inverse);
}
.baht-table-picker-option:disabled {
  color: var(--baht-color-text-subtle);
  cursor: default;
}
.baht-table-picker-btns button {
  white-space: nowrap;
  padding: var(--baht-space-1) var(--baht-space-3);
  border: 1px solid var(--baht-color-border-strong);
  border-radius: var(--baht-radius-sm);
  background: var(--baht-color-surface-alt);
  color: var(--baht-color-text);
  font-family: var(--baht-font-family);
  font-size: var(--baht-text-sm);
  cursor: pointer;
}
.baht-table-picker-btns button:hover:not(:disabled) {
  background: var(--baht-color-primary-wash);
}
.baht-table-picker-btns button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.baht-table-picker-modal-foot {
  display: flex;
  align-items: center;
  gap: var(--baht-space-2);
  padding: var(--baht-space-4) var(--baht-space-6);
  border-top: 1px solid var(--baht-color-border-cool);
}
.baht-table-picker-spacer {
  flex: 1;
}
.baht-table-picker-modal-foot button {
  padding: var(--baht-space-1) var(--baht-space-4);
  border: 1px solid var(--baht-color-border-strong);
  border-radius: var(--baht-radius-sm);
  background: var(--baht-color-surface-alt);
  color: var(--baht-color-text);
  font-family: var(--baht-font-family);
  font-size: var(--baht-text-sm);
  cursor: pointer;
}
.baht-table-picker-modal-foot button:hover {
  background: var(--baht-color-primary-wash);
}
.baht-table-picker-ok {
  background: var(--baht-color-primary) !important;
  color: var(--baht-color-text-inverse) !important;
  border-color: var(--baht-color-primary) !important;
}

/* ---------- <baht-swipe-row> ---------- */
baht-swipe-row {
  display: block;
}
.baht-swipe-row {
  position: relative;
  overflow: hidden;
  font-family: var(--baht-font-family);
  font-size: var(--baht-font-size);
  color: var(--baht-color-text);
}
.baht-swipe-row-content {
  position: relative;
  z-index: 1;
  background: var(--baht-color-surface);
  touch-action: pan-y;
  transition: transform var(--baht-dur-base) var(--baht-ease);
}
.baht-swipe-row--dragging .baht-swipe-row-content {
  transition: none;
  user-select: none;
}
.baht-swipe-row-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
}
.baht-swipe-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 0 var(--baht-space-4);
  border: 0;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.baht-swipe-row-action--neutral {
  background: var(--baht-color-bg-sunken);
  color: var(--baht-color-text);
}
.baht-swipe-row-action--danger {
  background: var(--baht-color-danger);
  color: var(--baht-error-content);
}
.baht-swipe-row-action:focus-visible {
  outline: var(--baht-focus-ring);
  outline-offset: -2px;
}

.baht-list {
  display: flex;
  flex-direction: column;
  font-family: var(--baht-font-family);
  font-size: var(--baht-font-size);
  color: var(--baht-color-text);
  background: var(--baht-color-surface);
  border: var(--baht-border-cool);
  border-radius: var(--baht-radius-md);
}
.baht-list-item {
  display: flex;
  align-items: center;
  gap: var(--baht-space-3);
  padding: var(--baht-space-3) var(--baht-space-4);
  border-top: 1px solid var(--baht-color-border-cool);
}
.baht-list-item:first-child {
  border-top: none;
}
.baht-list-item[tabindex]:hover {
  background: var(--baht-color-primary-tint);
  cursor: pointer;
}
.baht-list-item[tabindex]:focus-visible {
  outline: var(--baht-focus-ring);
  outline-offset: -2px;
}
.baht-list-main {
  flex: 1;
  min-width: 0;
}
.baht-list-title {
  font-weight: 500;
}
.baht-list-subtitle {
  font-size: var(--baht-text-sm);
  color: var(--baht-color-text-muted);
}
.baht-list-meta {
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-subtle);
  font-family: var(--baht-font-mono);
}
.baht-list-state {
  padding: var(--baht-space-6);
  text-align: center;
  color: var(--baht-color-text-muted);
}
.baht-list-state--error {
  color: var(--baht-red-600);
}

/* ============================================================
   Skeleton & loading — pulse (no gradient shimmer: no gradients in core UI)
   ============================================================ */

.baht-skeleton {
  display: block;
  background: var(--baht-color-bg-sunken);
  border-radius: var(--baht-radius-sm);
  animation: baht-pulse 1.4s var(--baht-ease) infinite;
}
.baht-skeleton--text {
  height: 1em;
  border-radius: var(--baht-radius-xs);
}
.baht-skeleton--circle {
  border-radius: 50%;
}
@keyframes baht-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.baht-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--baht-gray-200);
  border-top-color: var(--baht-color-primary);
  border-radius: 50%;
  animation: baht-spin 0.7s linear infinite;
}
.baht-spinner--sm {
  width: 14px;
  height: 14px;
}
.baht-spinner--lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}
@keyframes baht-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   Pagination
   ============================================================ */

.baht-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--baht-space-1);
  font-family: var(--baht-font-family);
  font-size: var(--baht-text-sm);
}
.baht-pagination button {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--baht-space-2);
  border: var(--baht-border-cool);
  border-radius: var(--baht-radius-sm);
  background: var(--baht-color-surface);
  color: var(--baht-color-text);
  font: inherit;
  cursor: pointer;
  transition:
    background var(--baht-dur-fast) var(--baht-ease),
    border-color var(--baht-dur-fast) var(--baht-ease);
}
.baht-pagination button {
  transition:
    background var(--baht-dur-fast) var(--baht-ease),
    border-color var(--baht-dur-fast) var(--baht-ease),
    color var(--baht-dur-fast) var(--baht-ease);
}
.baht-pagination button:hover {
  background: var(--baht-color-primary-wash);
}
.baht-pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.baht-pagination button:disabled:hover {
  background: var(--baht-color-surface);
}
.baht-pagination button[aria-current='page'] {
  background: var(--baht-color-primary);
  border-color: var(--baht-color-primary);
  color: var(--baht-color-primary-contrast);
  font-weight: 600;
}
.baht-pagination-ellipsis,
.baht-pagination-label {
  padding: 0 var(--baht-space-2);
  color: var(--baht-color-text-muted);
}

/* ============================================================
   Overlay — modal (scrim 0.4, no blur; float shadow; radius 20) & tooltip & toast
   ============================================================ */

.baht-modal-scrim {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(var(--baht-color-shadow-ink), 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--baht-space-6);
  animation: baht-fade-in var(--baht-dur-base) var(--baht-ease);
}
.baht-modal {
  background: var(--baht-color-surface);
  border-radius: var(--baht-radius-lg);
  box-shadow: var(--baht-shadow-float);
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  font-family: var(--baht-font-family);
  color: var(--baht-color-text);
  animation: baht-rise-in var(--baht-dur-base) var(--baht-ease);
}
.baht-modal-header {
  display: flex;
  align-items: flex-start;
  gap: var(--baht-space-4);
  padding: var(--baht-space-6);
  border-bottom: var(--baht-border-default);
}
.baht-modal-heading {
  flex: 1;
  min-width: 0;
}
.baht-modal-title {
  font-family: var(--baht-font-display);
  font-size: var(--baht-text-xl);
  font-weight: 700;
  letter-spacing: var(--baht-tracking-tight);
  line-height: 1.3;
}
.baht-modal-description {
  margin: var(--baht-space-1) 0 0;
  font-size: var(--baht-font-size);
  color: var(--baht-color-text-muted);
}
/* close = the hand-drawn "cross in a box" illustration; it brings its own square */
.baht-modal-close {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--baht-radius-sm);
  background: none;
  color: var(--baht-color-text);
  line-height: 1;
  cursor: pointer;
  transition: color var(--baht-dur-fast) var(--baht-ease);
}
.baht-modal-close .baht-illustration {
  height: 32px;
}
.baht-modal-close:hover {
  color: var(--baht-color-text-muted);
}
.baht-modal-close:focus-visible {
  outline: var(--baht-focus-ring);
  outline-offset: 2px;
}
.baht-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--baht-space-6); /* a form, a fieldset and a footer stack like fields do */
  padding: var(--baht-space-6);
  overflow-y: auto;
}
/* footer hook: put <div class="baht-modal-footer"> last inside the modal; buttons share the row */
.baht-modal-footer {
  position: sticky; /* a long form scrolls under the actions, never past them */
  bottom: calc(-1 * var(--baht-space-6));
  display: flex;
  gap: var(--baht-space-3);
  margin: 0 calc(-1 * var(--baht-space-6)) calc(-1 * var(--baht-space-6));
  padding: var(--baht-space-4) var(--baht-space-6);
  border-top: var(--baht-border-default);
  background: var(--baht-color-surface);
}
.baht-modal-footer > * {
  flex: 1 1 0;
  min-width: 0;
}
.baht-modal-footer .baht-button {
  width: 100%;
}

/* placement="sheet": bottom sheet below 600px, centered above */
.baht-modal-handle {
  display: none;
}
@media (max-width: 599.98px) {
  .baht-modal-scrim--sheet {
    align-items: flex-end;
    padding: 0;
  }
  .baht-modal--sheet {
    max-width: none;
    max-height: 90vh;
    max-height: 90dvh;
    border-radius: var(--baht-radius-lg) var(--baht-radius-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    animation: baht-sheet-in var(--baht-dur-slow) var(--baht-ease);
  }
  .baht-modal--sheet .baht-modal-handle {
    display: block;
    flex: none;
    width: 36px;
    height: 4px;
    margin: var(--baht-space-2) auto 0;
    border-radius: var(--baht-radius-pill);
    background: var(--baht-color-border-strong);
  }
}

/* placement="side": full-height drawer at the inline end */
.baht-modal-scrim--side {
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
}
.baht-modal--side {
  width: min(420px, 100vw);
  max-width: none;
  max-height: none;
  border-radius: 0;
  border-start-start-radius: var(--baht-radius-lg);
  border-end-start-radius: var(--baht-radius-lg);
  animation: baht-drawer-in var(--baht-dur-slow) var(--baht-ease);
}
.baht-modal--side:dir(rtl) {
  animation-name: baht-drawer-in-rtl;
}
@keyframes baht-sheet-in {
  from {
    transform: translateY(100%);
  }
}
@keyframes baht-sheet-out {
  to {
    transform: translateY(100%);
  }
}
@keyframes baht-drawer-in {
  from {
    transform: translateX(100%);
  }
}
@keyframes baht-drawer-in-rtl {
  from {
    transform: translateX(-100%);
  }
}
@keyframes baht-drawer-out {
  to {
    transform: translateX(100%);
  }
}
@keyframes baht-drawer-out-rtl {
  to {
    transform: translateX(-100%);
  }
}
@keyframes baht-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes baht-rise-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes baht-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes baht-sink-out {
  to {
    opacity: 0;
    transform: translateY(6px);
  }
}
.baht-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(var(--baht-color-shadow-ink), 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: baht-fade-in var(--baht-dur-base) var(--baht-ease);
}

/* Service dialogs (bank20baht-ui/overlay — dialog.confirm/alert/error/prompt) */
.baht-dialog--info,
.baht-dialog--success,
.baht-dialog--warning,
.baht-dialog--danger {
  border-left: 3px solid;
  padding-left: var(--baht-space-4);
}
.baht-dialog--info {
  border-left-color: var(--baht-color-info);
}
.baht-dialog--success {
  border-left-color: var(--baht-color-success);
}
.baht-dialog--warning {
  border-left-color: var(--baht-color-warning);
}
.baht-dialog--danger {
  border-left-color: var(--baht-color-danger);
}
.baht-dialog-message {
  margin: 0;
  font-size: var(--baht-text-base);
  line-height: var(--baht-leading-normal);
}
.baht-dialog-detail {
  margin: var(--baht-space-3) 0 0;
  padding: var(--baht-space-3);
  background: var(--baht-color-bg-sunken);
  border-radius: var(--baht-radius-sm);
  font-family: var(--baht-font-mono);
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow: auto;
}
.baht-dialog-input {
  width: 100%;
  margin-top: var(--baht-space-3);
}
.baht-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--baht-space-2);
  margin-top: var(--baht-space-5);
}

.baht-tooltip-host {
  position: relative;
  display: inline-block;
}
.baht-tooltip {
  position: absolute;
  z-index: 1100;
  background: var(--baht-color-bg-inverse);
  color: var(--baht-color-text-inverse);
  font-family: var(--baht-font-family);
  font-size: var(--baht-text-xs);
  padding: 5px 10px;
  border-radius: var(--baht-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--baht-dur-fast) var(--baht-ease);
}
.baht-tooltip--top {
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
}
.baht-tooltip--bottom {
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
}
.baht-tooltip--left {
  right: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
}
.baht-tooltip--right {
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
}
.baht-tooltip-host:hover .baht-tooltip,
.baht-tooltip-host:focus-within .baht-tooltip {
  opacity: 1;
}
/* Escape hides the tooltip until pointer/focus leaves (WCAG 1.4.13) */
.baht-tooltip-host--dismissed:hover .baht-tooltip,
.baht-tooltip-host--dismissed:focus-within .baht-tooltip {
  opacity: 0;
}

/* <baht-theme-toggle>: sun (light) / moon (dark) stacked, swapped with a small turn */
.baht-theme-toggle {
  position: relative;
  color: var(--baht-color-text);
}
.baht-theme-toggle-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition:
    opacity var(--baht-dur-fast) var(--baht-ease),
    transform var(--baht-dur-base) var(--baht-ease);
}
.baht-theme-toggle-icon .baht-icon {
  width: 1.15em;
  height: 1.15em;
}
.baht-theme-toggle[aria-pressed='true'] .baht-theme-toggle-icon--sun,
.baht-theme-toggle[aria-pressed='false'] .baht-theme-toggle-icon--moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

/* Keyboard shortcut chip: inside a tooltip (dark) or a menu item (muted). */
.baht-kbd {
  font-family: var(--baht-font-family);
  font-size: var(--baht-text-xs);
  font-weight: 400;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: inherit;
  opacity: 0.72;
}
.baht-tooltip .baht-kbd {
  margin-left: var(--baht-space-2);
}

/* ============================================================
   Split button + action menu
   ============================================================ */
.baht-split-button {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.baht-split-button-main .baht-button {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.baht-split-button-toggle.baht-button {
  padding-inline: var(--baht-space-2);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  /* hairline between the halves, legible on every variant */
  box-shadow: inset 1px 0 0 color-mix(in oklab, currentColor 28%, transparent);
}
.baht-split-button-toggle.baht-button--secondary {
  margin-inline-start: -1px; /* share the border instead of doubling it */
  box-shadow: none;
}
.baht-split-button-toggle .baht-icon {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform var(--baht-dur-fast) var(--baht-ease);
}
/* the open menu replaces the main button's shortcut tooltip */
.baht-split-button--open .baht-button-tip {
  opacity: 0 !important;
}
.baht-split-button--open .baht-split-button-toggle .baht-icon {
  transform: rotate(180deg);
}

.baht-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  min-width: 100%;
  padding: var(--baht-space-1);
  border: var(--baht-border-cool);
  border-radius: var(--baht-radius-sm);
  background: var(--baht-color-surface);
  box-shadow: var(--baht-shadow-lift);
}
.baht-menu--end {
  inset-inline-end: 0;
}
.baht-menu--start {
  inset-inline-start: 0;
}
.baht-menu[hidden] {
  display: none;
}
.baht-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--baht-space-6);
  width: 100%;
  min-height: 36px;
  padding: var(--baht-space-2) var(--baht-space-3);
  border: 0;
  border-radius: calc(var(--baht-radius-sm) - 2px);
  background: transparent;
  color: var(--baht-color-text);
  font-family: var(--baht-font-family);
  font-size: var(--baht-font-size);
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}
.baht-menu-item:hover,
.baht-menu-item:focus-visible {
  background: var(--baht-color-primary-wash);
  outline: none;
}
.baht-menu-item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--baht-color-focus);
}
.baht-menu-item--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.baht-menu-item--disabled:hover {
  background: transparent;
}
.baht-menu-item--danger {
  color: var(--baht-color-danger);
}
.baht-menu-item--danger:hover,
.baht-menu-item--danger:focus-visible {
  background: color-mix(in oklab, var(--baht-color-danger) 9%, transparent);
}

/* <baht-menu>: a trigger button + the shared .baht-menu panel */
.baht-menu-host {
  position: relative;
  display: inline-flex;
}
.baht-menu-trigger .baht-icon {
  width: 1.1em;
  height: 1.1em;
}
.baht-menu-trigger:not(.baht-button--icon) .baht-icon {
  width: 0.75em;
  height: 0.75em;
  margin-inline-start: 2px;
  transition: transform var(--baht-dur-fast) var(--baht-ease);
}
.baht-menu-host--open .baht-menu-trigger:not(.baht-button--icon) .baht-icon {
  transform: rotate(180deg);
}
.baht-menu-host .baht-menu {
  min-width: 12rem;
}

/* <baht-tabs>: an underline strip; panels are the host's own children */
.baht-tabs-list {
  display: flex;
  gap: var(--baht-space-1);
  border-bottom: 1px solid var(--baht-color-border-cool);
  overflow-x: auto;
  scrollbar-width: none;
}
.baht-tabs-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--baht-space-2);
  min-height: 40px;
  padding: 0 var(--baht-space-3);
  border: 0;
  background: none;
  color: var(--baht-color-text-muted);
  font-family: var(--baht-font-family);
  font-size: var(--baht-font-size);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--baht-dur-fast) var(--baht-ease);
}
.baht-tabs-tab::after {
  content: '';
  position: absolute;
  left: var(--baht-space-2);
  right: var(--baht-space-2);
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background var(--baht-dur-fast) var(--baht-ease);
}
.baht-tabs-tab:hover {
  color: var(--baht-color-text);
}
.baht-tabs-tab--on {
  color: var(--baht-color-text);
}
.baht-tabs-tab--on::after {
  background: var(--baht-color-primary);
}
.baht-tabs-tab:focus-visible {
  outline: var(--baht-focus-ring);
  outline-offset: -2px;
  border-radius: var(--baht-radius-sm);
}
.baht-tabs-tab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.baht-tabs-badge {
  min-width: 1.4em;
  padding: 0 0.45em;
  border-radius: 999px;
  background: var(--baht-color-bg-sunken);
  color: var(--baht-color-text-muted);
  font-size: var(--baht-text-xs);
  line-height: 1.6;
  text-align: center;
}
.baht-tabs-panels {
  padding-top: var(--baht-space-4);
}
.baht-tabs-panels > [role='tabpanel']:focus-visible {
  outline: var(--baht-focus-ring);
  outline-offset: 4px;
  border-radius: var(--baht-radius-sm);
}

/* pill variant: rounded chips, no underline strip */
.baht-tabs--pill .baht-tabs-list {
  gap: var(--baht-space-2);
  border-bottom: 0;
}
.baht-tabs--pill .baht-tabs-tab {
  min-height: 34px;
  padding: 0 var(--baht-space-4);
  border: 1px solid var(--baht-color-border);
  border-radius: 999px;
  font-size: var(--baht-text-sm);
}
.baht-tabs--pill .baht-tabs-tab::after {
  display: none;
}
.baht-tabs--pill .baht-tabs-tab--on {
  border-color: var(--baht-tabs-pill-active, var(--baht-color-primary));
  background: var(--baht-tabs-pill-active, var(--baht-color-primary));
  color: var(--baht-tabs-pill-active-ink, var(--baht-color-primary-contrast));
}
.baht-tabs--pill .baht-tabs-tab--on .baht-tabs-badge {
  background: color-mix(in oklab, currentColor 20%, transparent);
  color: inherit;
}
.baht-tabs--pill .baht-tabs-tab:focus-visible {
  border-radius: 999px;
  outline-offset: 2px;
}
.baht-tabs-panels[hidden] {
  display: none;
}

/* <baht-menu>: custom trigger content (an avatar), heading, checkbox items */
.baht-menu-trigger--custom {
  display: inline-flex;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
}
.baht-menu-trigger--custom:focus-visible {
  outline: var(--baht-focus-ring);
  outline-offset: 2px;
}
.baht-menu-heading {
  padding: var(--baht-space-2) var(--baht-space-3);
  margin-bottom: var(--baht-space-1);
  border-bottom: var(--baht-border-cool);
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18rem;
}
.baht-menu-item-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.baht-menu-item-desc {
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-muted);
  white-space: normal;
}
.baht-menu-item--check {
  justify-content: flex-start;
  gap: var(--baht-space-3);
}
.baht-menu-item-box {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--baht-color-border-control);
  border-radius: 5px;
  font-size: 12px;
  line-height: 1;
}
.baht-menu-item--check[aria-checked='true'] .baht-menu-item-box {
  border-color: var(--baht-color-primary);
  background: var(--baht-color-primary);
  color: var(--baht-color-primary-contrast);
}

/* <baht-popover> */
.baht-popover {
  position: relative;
  display: inline-block;
}
.baht-popover-anchor {
  display: inline-block;
}
.baht-popover-panel {
  position: absolute;
  z-index: 40;
  min-width: 16rem;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: var(--baht-space-4);
  border: var(--baht-border-cool);
  border-radius: var(--baht-radius-md);
  background: var(--baht-color-surface);
  color: var(--baht-color-text);
  box-shadow: var(--baht-shadow-lift);
}
.baht-popover-panel[hidden] {
  display: none;
}
.baht-popover-panel:focus-visible {
  outline: var(--baht-focus-ring);
}
.baht-popover-panel--bottom-start {
  top: calc(100% + 6px);
  inset-inline-start: 0;
}
.baht-popover-panel--bottom-end {
  top: calc(100% + 6px);
  inset-inline-end: 0;
}
.baht-popover-panel--top-start {
  bottom: calc(100% + 6px);
  inset-inline-start: 0;
}
.baht-popover-panel--top-end {
  bottom: calc(100% + 6px);
  inset-inline-end: 0;
}
.baht-menu-item .baht-kbd {
  color: var(--baht-color-text-muted);
  opacity: 1;
}

/* <baht-button shortcut>: the tooltip lives inside the native button. */
.baht-button--has-tip {
  position: relative;
}
.baht-button-tip {
  font-weight: 400;
}
.baht-button--has-tip:hover > .baht-button-tip,
.baht-button--has-tip:focus-visible > .baht-button-tip {
  opacity: 1;
}
.baht-button--tip-dismissed:hover > .baht-button-tip,
.baht-button--tip-dismissed:focus-visible > .baht-button-tip,
.baht-button--has-tip:disabled > .baht-button-tip {
  opacity: 0;
}

.baht-toaster {
  position: fixed;
  z-index: 1200;
  bottom: var(--baht-space-6);
  right: var(--baht-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--baht-space-2);
  font-family: var(--baht-font-family);
}
.baht-toast {
  display: flex;
  align-items: center;
  gap: var(--baht-space-3);
  min-width: 260px;
  max-width: 380px;
  background: var(--baht-color-surface);
  border: var(--baht-border-cool);
  border-left: 3px solid var(--baht-color-primary);
  border-radius: var(--baht-radius-md);
  box-shadow: var(--baht-shadow-lift);
  padding: var(--baht-space-3) var(--baht-space-4);
  font-size: var(--baht-font-size);
  color: var(--baht-color-text);
  animation: baht-rise-in var(--baht-dur-base) var(--baht-ease);
}
.baht-toast--success {
  border-left-color: var(--baht-color-success);
}
.baht-toast--warning {
  border-left-color: var(--baht-color-warning);
}
.baht-toast--danger {
  border-left-color: var(--baht-color-danger);
}
.baht-toast--info {
  border-left-color: var(--baht-color-info);
}
.baht-toast-message {
  flex: 1;
}
.baht-toast-dismiss {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--baht-color-text-muted);
  font-size: var(--baht-text-md);
  line-height: 1;
  padding: 2px;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   Feedback — alert & progress
   ============================================================ */

.baht-alert {
  display: flex;
  gap: var(--baht-space-3);
  align-items: flex-start;
  border: var(--baht-border-cool);
  border-left: 3px solid var(--baht-color-info);
  border-radius: var(--baht-radius-md);
  background: var(--baht-color-surface);
  padding: var(--baht-space-4);
  font-family: var(--baht-font-family);
  font-size: var(--baht-font-size);
  color: var(--baht-color-text);
}
.baht-alert--success {
  border-left-color: var(--baht-color-success);
  background: var(--baht-green-50);
}
.baht-alert--warning {
  border-left-color: var(--baht-color-warning);
  background: var(--baht-gold-50);
}
.baht-alert--danger {
  border-left-color: var(--baht-color-danger);
  background: var(--baht-red-50);
}
.baht-alert--info {
  border-left-color: var(--baht-color-info);
  background: var(--baht-slate-50);
}
.baht-alert-main {
  flex: 1;
}
.baht-alert-title {
  font-weight: 600;
  margin-bottom: 2px;
}
.baht-alert-dismiss {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--baht-color-text-muted);
  font-size: var(--baht-text-md);
  line-height: 1;
  padding: 2px;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.baht-progress {
  display: block;
  width: 100%;
  height: 8px;
  background: var(--baht-color-bg-sunken);
  border-radius: var(--baht-radius-pill);
  overflow: hidden;
}
.baht-progress-bar {
  height: 100%;
  background: var(--baht-color-primary);
  border-radius: var(--baht-radius-pill);
  transition: width var(--baht-dur-base) var(--baht-ease);
}
.baht-progress--indeterminate .baht-progress-bar {
  width: 40%;
  animation: baht-slide 1.2s var(--baht-ease) infinite;
}
.baht-progress--success .baht-progress-bar {
  background: var(--baht-color-success);
}
.baht-progress--warning .baht-progress-bar {
  background: var(--baht-color-warning);
}
.baht-progress--danger .baht-progress-bar {
  background: var(--baht-color-danger);
}
.baht-progress-label {
  font-family: var(--baht-font-family);
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-muted);
  margin-top: var(--baht-space-1);
}
@keyframes baht-slide {
  from {
    margin-left: -40%;
  }
  to {
    margin-left: 100%;
  }
}

.baht-progress-ring {
  display: inline-flex;
}
.baht-progress-ring-track {
  stroke: var(--baht-color-bg-sunken);
}
.baht-progress-ring-fill {
  stroke: var(--baht-color-primary);
  transition: stroke-dasharray var(--baht-dur-base) var(--baht-ease);
}
.baht-progress-ring--success .baht-progress-ring-fill {
  stroke: var(--baht-color-success);
}
.baht-progress-ring--warning .baht-progress-ring-fill {
  stroke: var(--baht-color-warning);
}
.baht-progress-ring--danger .baht-progress-ring-fill {
  stroke: var(--baht-color-danger);
}
.baht-progress-ring-value {
  font-family: var(--baht-font-family);
  font-size: 22px;
  font-weight: 600;
  fill: var(--baht-color-text);
}
.baht-progress-ring-label {
  font-family: var(--baht-font-family);
  font-size: 10px;
  fill: var(--baht-color-text-subtle);
}

/* ============================================================
   Inputs extra — rating, range, otp, filter chips
   ============================================================ */

.baht-rating {
  display: inline-flex;
  gap: 2px;
}
.baht-rating button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 1px;
  min-width: 24px;
  min-height: 24px; /* touch target (WCAG 2.5.8) */
  font-size: 1.375rem;
  line-height: 1;
  color: var(--baht-color-border-control); /* empty star: 3:1 graphic (1.4.11) */
  transition:
    color var(--baht-dur-fast) var(--baht-ease),
    transform var(--baht-dur-fast) var(--baht-ease);
}
.baht-rating button:not(:disabled):hover {
  transform: scale(1.15);
}
.baht-rating button.baht-rating--on {
  color: var(--baht-gold-500);
}
.baht-rating button:disabled {
  cursor: default;
}
.baht-rating--disabled {
  opacity: 0.45;
}
.baht-rating button:focus-visible {
  outline: var(--baht-focus-ring);
  outline-offset: 2px;
  border-radius: var(--baht-radius-xs);
}

.baht-range {
  display: block;
  font-family: var(--baht-font-family);
}
.baht-range input[type='range'] {
  flex: 1;
  min-width: 0;
  width: 100%;
  accent-color: var(--baht-color-primary);
}
.baht-range-row {
  display: flex;
  align-items: center;
  gap: var(--baht-space-3);
}
.baht-range-value {
  font-family: var(--baht-font-mono);
  font-size: var(--baht-text-sm);
  color: var(--baht-color-text-muted);
  flex: none; /* never squeezed under its digits ("24000") — the track gives way instead */
  min-width: 3ch;
  text-align: right;
}

.baht-otp {
  display: inline-flex;
  gap: var(--baht-space-2);
}
.baht-otp input {
  width: 40px;
  height: 48px;
  text-align: center;
  font-family: var(--baht-font-mono);
  font-size: var(--baht-text-lg);
  border: 1px solid var(--baht-color-border-control);
  border-radius: var(--baht-radius);
  background: var(--baht-color-surface);
  color: var(--baht-color-text);
  transition: border-color var(--baht-dur-fast) var(--baht-ease);
}
.baht-otp input:focus-visible {
  border-color: var(--baht-color-focus);
  outline: var(--baht-focus-ring);
  outline-offset: 0;
}
.baht-otp input:disabled {
  opacity: 0.4;
}

.baht-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--baht-space-2);
  font-family: var(--baht-font-family);
}
.baht-filter button {
  padding: 5px 14px;
  font-size: var(--baht-text-sm);
  font-weight: 500;
  border: var(--baht-border-cool);
  border-radius: var(--baht-radius-pill);
  background: var(--baht-color-surface);
  color: var(--baht-color-text);
  cursor: pointer;
  font-family: inherit;
  transition:
    background var(--baht-dur-fast) var(--baht-ease),
    border-color var(--baht-dur-fast) var(--baht-ease),
    color var(--baht-dur-fast) var(--baht-ease);
}
.baht-filter button:hover {
  background: var(--baht-color-primary-wash);
}
.baht-filter button[aria-pressed='true'] {
  background: var(--baht-color-primary);
  border-color: var(--baht-color-primary);
  color: var(--baht-color-primary-contrast);
}
/* variant="segmented": one joined control */
.baht-filter--segmented {
  flex-wrap: nowrap;
  gap: 0;
  padding: 2px;
  border: var(--baht-border-cool);
  border-radius: var(--baht-radius);
  background: var(--baht-color-surface);
}
.baht-filter--segmented button {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 14px;
  border: 0;
  border-radius: calc(var(--baht-radius) - 2px);
  background: transparent;
  color: var(--baht-color-text-muted);
  white-space: nowrap;
}
.baht-filter--segmented button:hover {
  background: var(--baht-color-primary-wash);
  color: var(--baht-color-text);
}
.baht-filter--segmented button[aria-pressed='true'] {
  background: var(--baht-color-text);
  color: var(--baht-color-text-inverse);
}
.baht-filter--segmented button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============================================================
   Structure — card, fieldset, accordion, timeline
   ============================================================ */

.baht-card {
  display: block;
  background: var(--baht-color-surface);
  border: var(--baht-border-default);
  border-radius: var(--baht-radius-md);
  padding: var(--baht-space-6);
  font-family: var(--baht-font-family);
  font-size: var(--baht-font-size);
  color: var(--baht-color-text);
  transition: border-color var(--baht-dur-fast) var(--baht-ease);
}
.baht-card--hero {
  border-radius: var(--baht-radius-lg);
  padding: var(--baht-space-8);
}
.baht-card-title {
  font-family: var(--baht-font-display);
  font-size: var(--baht-text-lg);
  font-weight: 600;
  letter-spacing: var(--baht-tracking-tight);
  margin-bottom: 2px;
}
.baht-card-subtitle {
  font-size: var(--baht-text-sm);
  color: var(--baht-color-text-muted);
  margin-bottom: var(--baht-space-3);
}

.baht-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--baht-font-family);
  min-width: 0;
}
/* the legend reads like a field label above the box, not an eyebrow on its border */
.baht-fieldset legend {
  float: left; /* pulls the legend into normal flow, off the border */
  width: 100%;
  padding: 0;
  margin-bottom: var(--baht-space-2);
  font-size: var(--baht-font-size-label);
  font-weight: var(--baht-font-weight-label);
  color: var(--baht-color-text);
}
.baht-fieldset-body {
  clear: both;
  display: flex;
  flex-direction: column;
  gap: var(--baht-space-4);
  padding: var(--baht-space-4);
  border: var(--baht-border-default);
  border-radius: var(--baht-radius-box);
  background: var(--baht-color-surface);
}
/* sub-fields inside a group are one step quieter than the group label */
.baht-fieldset-body .baht-label {
  font-size: var(--baht-text-sm);
  font-weight: 500;
  color: var(--baht-color-text-muted);
}
.baht-fieldset > .baht-help {
  margin-top: var(--baht-space-2);
}

.baht-accordion {
  display: block;
  border: var(--baht-border-cool);
  border-radius: var(--baht-radius-md);
  background: var(--baht-color-surface);
  font-family: var(--baht-font-family);
  font-size: var(--baht-font-size);
  color: var(--baht-color-text);
}
.baht-accordion-item {
  border-top: 1px solid var(--baht-color-border-cool);
}
.baht-accordion-item:first-child {
  border-top: none;
}
.baht-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--baht-space-4) var(--baht-space-5);
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  color: inherit;
  text-align: left;
}
.baht-accordion-trigger:hover {
  background: color-mix(in oklab, var(--baht-color-primary) 4%, transparent);
}
.baht-accordion-chevron {
  display: inline-flex;
  color: var(--baht-color-text-subtle);
  transition: transform var(--baht-dur-fast) var(--baht-ease);
}
.baht-accordion-item--open .baht-accordion-chevron {
  transform: rotate(180deg);
}
.baht-accordion-content {
  padding: 0 var(--baht-space-5) var(--baht-space-4);
  color: var(--baht-color-text-muted);
}

.baht-timeline {
  display: flex;
  flex-direction: column;
  font-family: var(--baht-font-family);
  font-size: var(--baht-font-size);
  color: var(--baht-color-text);
}
.baht-timeline-item {
  display: flex;
  gap: var(--baht-space-3);
  position: relative;
  padding-bottom: var(--baht-space-5);
}
.baht-timeline-item:last-child {
  padding-bottom: 0;
}
.baht-timeline-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.baht-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  margin-top: 5px;
  background: var(--baht-color-primary);
  border: 2px solid var(--baht-color-surface);
  box-shadow: 0 0 0 1px var(--baht-color-border-strong);
}
.baht-timeline-dot--success {
  background: var(--baht-color-success);
}
.baht-timeline-dot--warning {
  background: var(--baht-color-warning);
}
.baht-timeline-dot--danger {
  background: var(--baht-color-danger);
}
.baht-timeline-dot--muted {
  background: var(--baht-gray-400);
}
.baht-timeline-line {
  flex: 1;
  width: 1px;
  background: var(--baht-color-border-strong);
  margin-top: 2px;
}
.baht-timeline-title {
  font-weight: 500;
}
.baht-timeline-time {
  font-family: var(--baht-font-mono);
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-subtle);
}
.baht-timeline-desc {
  font-size: var(--baht-text-sm);
  color: var(--baht-color-text-muted);
  margin-top: 2px;
}

/* ============================================================
   Navigation — link, breadcrumbs
   ============================================================ */

.baht-link {
  color: var(--baht-color-link);
  font-family: var(--baht-font-family);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--baht-color-primary) 35%, transparent);
  transition: text-decoration-color var(--baht-dur-fast) var(--baht-ease);
  border-radius: 2px;
}
.baht-link:hover {
  text-decoration-color: var(--baht-color-link);
}
.baht-link:focus-visible {
  outline: var(--baht-focus-ring);
  outline-offset: 2px;
}
.baht-link-external {
  font-size: 0.85em;
}

.baht-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--baht-space-2);
  font-family: var(--baht-font-family);
  font-size: var(--baht-text-sm);
}
.baht-breadcrumbs .baht-link {
  font-size: inherit;
}
.baht-breadcrumbs-sep {
  color: var(--baht-color-text-subtle);
}
.baht-breadcrumbs-current {
  color: var(--baht-color-text);
  font-weight: 500;
}

/* ============================================================
   Charts — stat / donut / bar (pure SVG & divs, series tokens)
   ============================================================ */

/* Categorical slots 1-5: validated with the dataviz six checks on #ffffff
   (adjacent CVD ΔE 13.0 protan, normal-vision ΔE 20.0, chroma + band pass).
   Slot 2 (gold) sits at 2.95:1 — the relief rule applies, so every chart ships
   visible values or the table twin. Order is the CVD-safety mechanism: never
   reorder, never cycle, never generate a sixth hue — fold the tail to "Other".
   Slots 6-10 are deliberately grey steps, not new hues. */
:root {
  --baht-chart-1: #1f7a4e; /* green — brand primary */
  --baht-chart-2: #b8912e; /* gold — always direct-labelled */
  --baht-chart-3: #2f6a9f; /* blue */
  --baht-chart-4: #c44536; /* red — series only; status stays separate */
  --baht-chart-5: #7b5ea7; /* violet — data-viz only, never chrome */
  --baht-chart-6: var(--baht-gray-600);
  --baht-chart-7: var(--baht-gray-500);
  --baht-chart-8: var(--baht-gray-400);
  --baht-chart-9: var(--baht-gray-300);
  --baht-chart-10: var(--baht-gray-200);

  /* Sequential green ramp, light → dark (ordinal-validated). */
  --baht-chart-seq-1: #82c39e;
  --baht-chart-seq-2: #4fa577;
  --baht-chart-seq-3: #2c8c5b;
  --baht-chart-seq-4: #186540;
  --baht-chart-seq-5: #0d3422;

  --baht-chart-muted: var(--baht-gray-300); /* de-emphasis / previous period */
  --baht-chart-grid: var(--baht-gray-200); /* hairline, one step off surface */
  --baht-chart-surface: var(--baht-color-surface); /* the gap + ring color */
}

.baht-chart-empty {
  padding: var(--baht-space-10) 0;
  text-align: center;
  font-family: var(--baht-font-family);
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-subtle);
}

.baht-stat-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--baht-space-10) 0;
  font-family: var(--baht-font-family);
}
.baht-stat-chart-total {
  font-family: var(--baht-font-display);
  font-size: var(--baht-text-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--baht-color-primary);
}
.baht-stat-chart-label {
  margin-top: var(--baht-space-2);
  font-size: var(--baht-text-sm);
  color: var(--baht-color-text-muted);
}

.baht-donut-chart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--baht-space-8);
  padding: var(--baht-space-4) 0;
  font-family: var(--baht-font-family);
}
.baht-donut-chart-total {
  font-size: 24px;
  font-weight: 600;
  fill: var(--baht-color-text);
}
.baht-donut-chart-sub {
  font-size: 10px;
  fill: var(--baht-color-text-subtle);
}

.baht-chart-legend {
  display: flex;
  flex-direction: column;
  gap: var(--baht-space-1);
  max-height: 16rem;
  overflow-y: auto;
  padding-right: var(--baht-space-1);
}
.baht-chart-legend-row {
  display: flex;
  align-items: center;
  gap: var(--baht-space-2);
  font-size: var(--baht-text-sm);
}
.baht-chart-swatch {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: var(--baht-radius-xs);
}
.baht-chart-legend-label {
  color: var(--baht-color-text);
}
.baht-chart-legend-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.baht-chart-legend-pct {
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-subtle);
}

.baht-bar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--baht-space-2);
  padding: var(--baht-space-2) 0;
  font-family: var(--baht-font-family);
}
.baht-bar-chart-row {
  display: flex;
  align-items: center;
  gap: var(--baht-space-2);
}
.baht-bar-chart-label {
  width: 11rem;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-size: var(--baht-text-sm);
  color: var(--baht-color-text-muted);
}
.baht-bar-chart-track {
  position: relative;
  min-height: 24px;
  flex: 1;
  display: flex;
  align-items: center;
  border-radius: var(--baht-radius-sm);
  /* one step lighter than bg-sunken in both themes, so the muted `compare` bar
     never disappears into the empty track at small values */
  background: color-mix(in oklab, var(--baht-color-bg-sunken) 55%, var(--baht-color-surface));
}
.baht-bar-chart-bars {
  display: flex;
  flex-direction: column;
  gap: 2px; /* surface gap — never a border around the mark */
  width: 100%;
}
.baht-bar-chart-bar {
  height: 24px; /* thickness cap; the element writes the real value inline */
  max-height: 24px;
  border-radius: 0 4px 4px 0; /* rounded data-end, square at the baseline */
}
.baht-bar-chart-stack {
  display: flex;
  gap: 2px;
  width: 100%;
}
.baht-bar-chart-bar--segment {
  height: 100%;
  border-radius: 0;
}
.baht-bar-chart-stack .baht-bar-chart-bar--segment:last-child {
  border-radius: 0 4px 4px 0;
}
.baht-bar-chart-bar--compare {
  background: var(--baht-chart-muted);
}
.baht-bar-chart-marker {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--baht-color-text-muted);
}
.baht-bar-chart-marker--horizontal {
  left: 0;
  right: 0;
  top: auto;
  width: auto;
  height: 1px;
}
/* The strip of marker labels above the rows (horizontal orientation). */
.baht-bar-chart-row--markers {
  align-items: flex-end;
  min-height: 1.1rem;
}
.baht-bar-chart-markbar {
  position: relative;
  flex: 1;
  height: 1.1rem;
}
.baht-bar-chart-marker-label {
  position: absolute;
  bottom: 0;
  white-space: nowrap;
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-muted);
  line-height: 1.1rem;
}
.baht-bar-chart-marker-label::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 1px;
  margin-right: 4px;
  vertical-align: middle;
  background: var(--baht-color-text-muted);
}
/* A row with its own marker (a budget line) gets a caption lane above its
   bars: the label sits there beside its line and never covers a bar or the
   bar's value. */
.baht-bar-chart-track--marked {
  padding-top: 1.1rem;
}
.baht-bar-chart-marker-label--row {
  top: 0;
  bottom: auto;
  z-index: 2;
  padding: 0 2px;
}
.baht-bar-chart-marker-label--row::before {
  display: none; /* the line it names is right beside it */
}
.baht-bar-chart-marker-label--column {
  left: 50%;
  transform: translate(-50%, -2px);
  z-index: 2;
  background: var(--baht-chart-surface);
  padding: 0 2px;
  border-radius: var(--baht-radius-xs);
}
.baht-bar-chart-marker-label--end {
  right: 0;
  bottom: 0;
  transform: translateY(-2px);
  /* over the columns, which are painted later in the DOM, and on the surface so
     a bar behind it never runs through the text */
  z-index: 2;
  background: var(--baht-chart-surface);
  padding: 0 2px 0 4px;
  border-radius: var(--baht-radius-xs);
}
.baht-bar-chart-count {
  min-width: 2.5rem;
  font-size: var(--baht-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--baht-color-text);
}

/* Vertical (columns) */
.baht-bar-chart--vertical {
  display: block;
}
.baht-bar-chart-plot {
  display: flex;
  gap: var(--baht-space-2);
  max-width: 100%;
  /* the top tick label is shifted up half a line — pad so `overflow: hidden`
     (which keeps the columns inside the host) never crops it */
  padding-top: 8px;
  overflow: hidden;
}
.baht-bar-chart-yaxis {
  flex: 0 0 auto;
}
.baht-bar-chart-grid {
  min-width: 0;
}
.baht-bar-chart-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200px;
  text-align: right;
}
.baht-chart-tick-text {
  font-size: var(--baht-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--baht-color-text-subtle);
  line-height: 1;
  transform: translateY(-0.5em);
}
.baht-bar-chart-grid {
  position: relative;
  flex: 1;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.baht-chart-grid-rule {
  display: block;
  height: 1px;
  background: var(--baht-chart-grid);
}
.baht-bar-chart-columns {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;
}
.baht-bar-chart-column {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  /* share the plot evenly and shrink below the content width: 31 columns fit a
     400px card instead of spilling past it. The element writes an exact width
     once it has measured the host. */
  flex: 1 1 0;
  min-width: 0;
  cursor: default;
}
.baht-bar-chart-column-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 100%;
  width: 100%;
}
.baht-bar-chart-col {
  border-radius: var(--baht-radius-xs) var(--baht-radius-xs) 0 0;
  max-width: 24px;
  min-width: 0;
  flex: 0 1 auto;
}
.baht-bar-chart-col--compare {
  background: var(--baht-chart-muted);
}
.baht-bar-chart-xlabel {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-subtle);
  white-space: nowrap;
  pointer-events: none;
}
.baht-bar-chart--vertical .baht-bar-chart-plot {
  padding-bottom: 22px;
}

/* ---------- Shared chart chrome ---------- */

.baht-chart {
  position: relative;
  font-family: var(--baht-font-family);
}
.baht-chart--loading {
  opacity: 0.5;
}
@media (prefers-reduced-motion: no-preference) {
  .baht-chart {
    transition: opacity var(--baht-dur-fast, 150ms) ease;
  }
}
.baht-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.baht-chart-grid-line,
.baht-chart-baseline {
  stroke: var(--baht-chart-grid);
  stroke-width: 1; /* hairline, solid — never dashed */
}
.baht-chart-baseline {
  stroke: var(--baht-color-border-strong);
}
.baht-chart-marker-line {
  stroke: var(--baht-color-text-muted);
  stroke-width: 1;
}
.baht-chart-marker-label,
.baht-chart-tick {
  font-size: 11px;
  font-family: var(--baht-font-family);
  font-variant-numeric: tabular-nums;
  fill: var(--baht-color-text-subtle);
}
.baht-chart-end-label {
  font-size: 12px;
  font-family: var(--baht-font-family);
  font-weight: 600;
  fill: var(--baht-color-text);
}
.baht-chart-area {
  opacity: 0.1;
}
.baht-chart-line {
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.baht-chart-line--forecast {
  stroke-dasharray: 4 4;
}
.baht-chart-end-dot {
  stroke: var(--baht-chart-surface);
  stroke-width: 2; /* surface ring */
}
.baht-chart-crosshair {
  stroke: var(--baht-color-border-strong);
  stroke-width: 1;
  pointer-events: none;
}
.baht-chart-hit {
  fill: transparent;
  cursor: default;
}
.baht-chart-hit:focus-visible,
.baht-heatmap-cell:focus-visible,
.baht-bar-chart-track:focus-visible,
.baht-bar-chart-column:focus-visible {
  outline: 2px solid var(--baht-color-focus, var(--baht-color-primary));
  outline-offset: 2px;
}
.baht-chart-tooltip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transform: translate(-50%, -125%);
  max-width: 18rem;
  padding: var(--baht-space-1) var(--baht-space-2);
  border-radius: var(--baht-radius-sm);
  background: var(--baht-color-bg-inverse);
  color: var(--baht-color-text-inverse);
  font-size: var(--baht-text-xs);
  line-height: 1.4;
  white-space: nowrap;
}
.baht-chart-swatch--line {
  height: 3px;
  border-radius: 2px;
}
.baht-chart-table {
  margin-top: var(--baht-space-3);
  font-size: var(--baht-text-sm);
}
.baht-chart-table > summary {
  cursor: pointer;
  color: var(--baht-color-text-muted);
  font-size: var(--baht-text-xs);
}
.baht-chart-table table {
  width: 100%;
  margin-top: var(--baht-space-2);
  border-collapse: collapse;
}
.baht-chart-table caption {
  text-align: left;
  padding-bottom: var(--baht-space-1);
  color: var(--baht-color-text-subtle);
  font-size: var(--baht-text-xs);
}
.baht-chart-table th,
.baht-chart-table td {
  padding: var(--baht-space-1) var(--baht-space-2);
  border-bottom: 1px solid var(--baht-color-divider);
  text-align: left;
}
.baht-chart-table .baht-chart-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Sparkline ---------- */

baht-sparkline {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}
.baht-sparkline {
  display: block;
  overflow: visible;
}
.baht-sparkline-line {
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.baht-sparkline-dot {
  stroke: var(--baht-chart-surface);
  stroke-width: 2;
}

/* ---------- Stat tile ---------- */

.baht-stat {
  display: flex;
  flex-direction: column;
  gap: var(--baht-space-1);
  font-family: var(--baht-font-family);
}
.baht-stat-label-row {
  display: flex;
  align-items: center;
  gap: var(--baht-space-2);
}
.baht-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--baht-color-text-muted);
}
.baht-stat-icon .baht-icon {
  height: 1.1rem;
}
.baht-stat-label {
  font-size: var(--baht-text-sm);
  color: var(--baht-color-text-muted);
}
.baht-stat-value {
  font-size: var(--baht-text-2xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--baht-color-text); /* never a series hue */
  font-variant-numeric: proportional-nums;
}
.baht-stat--hero .baht-stat-value {
  font-size: clamp(48px, 6vw, 64px);
  font-weight: 700;
}
.baht-stat-delta {
  display: flex;
  align-items: baseline;
  gap: var(--baht-space-1);
  font-size: var(--baht-text-sm);
}
.baht-stat-delta--good {
  color: var(--baht-success-ink);
}
.baht-stat-delta--bad {
  color: var(--baht-error-ink);
}
.baht-stat-delta--flat {
  color: var(--baht-color-text-subtle);
}
.baht-stat-delta-label,
.baht-stat-caption {
  color: var(--baht-color-text-subtle);
}
.baht-stat-caption {
  font-size: var(--baht-text-sm);
}
.baht-stat-trend {
  margin-top: var(--baht-space-1);
}

/* ---------- Meter ---------- */

.baht-meter {
  --baht-meter-fill: var(--baht-chart-1);
  display: flex;
  flex-direction: column;
  gap: var(--baht-space-1);
  font-family: var(--baht-font-family);
}
.baht-meter--warning {
  --baht-meter-fill: var(--baht-color-warning);
}
.baht-meter--danger {
  --baht-meter-fill: var(--baht-color-danger);
}
.baht-meter-head {
  display: flex;
  align-items: baseline;
  gap: var(--baht-space-2);
  font-size: var(--baht-text-sm);
}
.baht-meter-label {
  color: var(--baht-color-text);
  font-weight: 500;
}
.baht-meter-value {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--baht-color-text-muted);
}
.baht-meter-status {
  display: inline-flex;
  align-items: center;
  gap: var(--baht-space-1);
  font-size: var(--baht-text-xs);
  font-weight: 600;
}
.baht-meter--warning .baht-meter-status {
  color: var(--baht-warning-ink);
}
.baht-meter--danger .baht-meter-status {
  color: var(--baht-error-ink);
}
.baht-meter-track {
  position: relative;
  height: 10px;
  border-radius: var(--baht-radius-sm);
  /* a lighter step of the fill's own ramp, so state reads across the whole bar */
  background: color-mix(in oklab, var(--baht-meter-fill) 18%, var(--baht-color-surface));
}
.baht-meter-fill {
  height: 100%;
  border-radius: var(--baht-radius-sm);
  background: var(--baht-meter-fill);
}
.baht-meter-expected {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--baht-color-text-muted);
}
.baht-meter-pace {
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-subtle);
}

/* ---------- Heatmap ---------- */

.baht-heatmap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--baht-space-2);
  font-family: var(--baht-font-family);
}
.baht-heatmap-svg {
  width: auto;
  max-width: 100%;
  height: auto;
  overflow: hidden;
}
.baht-heatmap-cell {
  cursor: default;
}
.baht-heatmap-scale {
  display: flex;
  margin-top: var(--baht-space-1);
  align-items: center;
  gap: var(--baht-space-1);
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-subtle);
}
.baht-heatmap-scale-label {
  margin: 0 var(--baht-space-1);
}

/* show-values: an HTML month grid. Fills the container; text keeps its size. */
.baht-heatmap-cal {
  --baht-heatmap-cell-min: 56px;
  --baht-heatmap-gap: 4px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--baht-heatmap-gap);
  width: 100%;
  align-self: stretch;
}
.baht-heatmap-weekday {
  padding: 0 var(--baht-space-2) var(--baht-space-1);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--baht-color-text-subtle);
}
.baht-heatmap-day {
  --baht-heatmap-fill: var(--baht-color-surface);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--baht-space-1);
  min-width: 0;
  min-height: var(--baht-heatmap-cell-min);
  margin: 0;
  padding: var(--baht-space-2) var(--baht-space-2);
  border: none;
  border-radius: var(--baht-radius-sm);
  background: var(--baht-heatmap-fill);
  color: var(--baht-color-text);
  font: inherit;
  text-align: left;
  cursor: default;
  box-shadow: inset 0 0 0 1px transparent;
}
.baht-heatmap-day--pad {
  background: transparent;
}
.baht-heatmap-day-num {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--baht-color-text);
}
.baht-heatmap-day-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.baht-heatmap-day--zero {
  box-shadow: inset 0 0 0 1px var(--baht-color-divider);
}
.baht-heatmap-day--zero .baht-heatmap-day-value {
  font-weight: 400;
  color: var(--baht-color-text-subtle);
}
.baht-heatmap-day--dark,
.baht-heatmap-day--dark .baht-heatmap-day-num {
  color: var(--baht-color-primary-contrast, #fff);
}
.baht-heatmap-day--dark .baht-heatmap-day-num {
  opacity: 0.8;
}
.baht-heatmap-day--today {
  box-shadow: inset 0 0 0 1.5px var(--baht-color-text);
}
.baht-heatmap-day:focus-visible {
  outline: 2px solid var(--baht-color-focus, var(--baht-color-primary));
  outline-offset: 1px;
}
@media (max-width: 480px) {
  .baht-heatmap-cal {
    --baht-heatmap-cell-min: 44px;
    --baht-heatmap-gap: 2px;
  }
  .baht-heatmap-day {
    padding: var(--baht-space-1);
  }
  .baht-heatmap-day-value {
    font-size: 10px;
  }
}

/* ---------- Line chart ---------- */

.baht-line-chart .baht-chart-legend {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--baht-space-4);
  max-height: none;
  margin-top: var(--baht-space-2);
}

/* ============================================================
   States — empty & error placeholders
   ============================================================ */

.baht-empty-state,
.baht-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--baht-space-2);
  padding: var(--baht-space-12) var(--baht-space-6);
  text-align: center;
  font-family: var(--baht-font-family);
}
.baht-error-state {
  border: 1px dashed var(--baht-color-border-strong);
  border-radius: var(--baht-radius-md);
  background: var(--baht-color-surface);
}
.baht-empty-state-icon {
  font-size: var(--baht-text-xl);
  color: var(--baht-color-text-subtle);
}
.baht-error-state-icon {
  font-size: var(--baht-text-2xl);
  color: var(--baht-color-text);
}
/* hand-drawn inline icon (koboyo, same pipeline as .baht-illustration):
   sized by height, width follows its own aspect — never force both. */
.baht-icon {
  display: inline-block;
  flex: none;
  height: 1em;
  width: auto;
}
/* hand-drawn illustration: sized by height, width follows its own aspect */
.baht-illustration {
  display: block;
  height: var(--baht-illustration-size, 48px);
  width: auto;
  margin: 0 auto;
}
.baht-empty-state-icon .baht-illustration,
.baht-error-state-icon .baht-illustration {
  height: var(--baht-illustration-size, 48px);
}
.baht-empty-state-message {
  font-size: var(--baht-text-sm);
  font-weight: 500;
  color: var(--baht-color-text-muted);
}
.baht-error-state-heading {
  font-size: var(--baht-text-sm);
  font-weight: 600;
  color: var(--baht-color-text);
}
.baht-empty-state-hint {
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-subtle);
}
.baht-error-state-message {
  max-width: 28rem;
  font-size: var(--baht-text-sm);
  color: var(--baht-color-text-muted);
}
.baht-error-state baht-button {
  margin-top: var(--baht-space-1);
}

/* ============================================================
   Key/value editor
   ============================================================ */

.baht-keyvalue {
  display: flex;
  flex-direction: column;
  gap: var(--baht-space-1);
  font-family: var(--baht-font-family);
}
.baht-keyvalue-row {
  display: flex;
  align-items: center;
  gap: var(--baht-space-1);
}
.baht-keyvalue-key {
  font-family: var(--baht-font-mono);
}
.baht-keyvalue-eq {
  color: var(--baht-color-text-subtle);
}
.baht-keyvalue-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  border: none;
  background: none;
  border-radius: var(--baht-radius-sm);
  color: var(--baht-color-text-muted); /* icon-only control: was 1.7:1 */
  cursor: pointer;
}
.baht-keyvalue-remove:hover {
  color: var(--baht-color-danger);
}
.baht-keyvalue-add {
  display: inline-flex;
  align-items: center;
  gap: var(--baht-space-1);
  align-self: flex-start;
  border: none;
  background: none;
  padding: 2px 4px;
  border-radius: var(--baht-radius-sm);
  font-family: var(--baht-font-family);
  font-size: var(--baht-text-sm);
  color: var(--baht-color-link);
  cursor: pointer;
}
.baht-keyvalue-add:hover {
  text-decoration: underline;
}
.baht-keyvalue-remove:disabled,
.baht-keyvalue-add:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ============================================================
   Reference picker — lookup input + typeahead dropdown
   ============================================================ */

.baht-refpicker {
  position: relative;
  display: flex;
  align-items: stretch;
  font-family: var(--baht-font-family);
}
.baht-refpicker-field {
  position: relative;
  min-width: 0;
  flex: 1;
}
.baht-refpicker-input {
  padding-right: calc(var(--baht-control-padding-x) + 20px);
}
.baht-refpicker-input[readonly]:not(:disabled) {
  cursor: pointer;
}
.baht-refpicker .baht-refpicker-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.baht-refpicker-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  border: none;
  background: none;
  border-radius: var(--baht-radius-sm);
  color: var(--baht-color-text-subtle);
  cursor: pointer;
}
.baht-refpicker-clear:hover {
  color: var(--baht-color-text);
  background: var(--baht-color-primary-wash);
}
.baht-refpicker-lookup,
.baht-refpicker-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--baht-control-height);
  flex-shrink: 0;
  border: 1px solid var(--baht-color-border-strong);
  border-left: none;
  background: var(--baht-color-surface-alt);
  color: var(--baht-color-text-muted);
  cursor: pointer;
}
.baht-refpicker-lookup:hover,
.baht-refpicker-open:hover {
  background: var(--baht-color-primary-wash);
  color: var(--baht-color-text);
}
.baht-refpicker-lookup:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.baht-refpicker > :last-child:not(.baht-refpicker-list):not(.baht-refpicker-field) {
  border-top-right-radius: var(--baht-radius-field);
  border-bottom-right-radius: var(--baht-radius-field);
}
.baht-refpicker-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 16rem;
  overflow-y: auto;
  padding: var(--baht-space-1) 0;
  border: var(--baht-border-cool);
  border-radius: var(--baht-radius-sm);
  background: var(--baht-color-surface);
  box-shadow: var(--baht-shadow-lift);
}
.baht-refpicker-list[hidden] {
  display: none;
}
.baht-refpicker-note {
  padding: var(--baht-space-1) var(--baht-space-3);
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-subtle);
}
.baht-refpicker-option {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--baht-space-2);
  padding: var(--baht-space-1) var(--baht-space-3);
  border: none;
  background: none;
  text-align: left;
  font-family: var(--baht-font-family);
  font-size: var(--baht-text-sm);
  color: var(--baht-color-text);
  cursor: pointer;
}
.baht-refpicker-option:hover,
.baht-refpicker-option--active {
  background: var(--baht-color-primary-wash);
}
.baht-refpicker-option-sub {
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-subtle);
}
.baht-refpicker-input[aria-invalid='true'] {
  border-color: var(--baht-color-error);
}

/* ============================================================
   Accessibility
   ============================================================ */

/* Screen-reader-only text (external-link hints, workflow step announcements). */
.baht-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* One consistent keyboard focus ring for every interactive piece that had none. */
.baht-accordion-trigger:focus-visible,
.baht-filter button:focus-visible,
.baht-pagination button:focus-visible,
.baht-toast-dismiss:focus-visible,
.baht-alert-dismiss:focus-visible,
.baht-modal-close:focus-visible,
.baht-code--block:focus-visible,
.baht-keyvalue-remove:focus-visible,
.baht-keyvalue-add:focus-visible,
.baht-refpicker-clear:focus-visible,
.baht-refpicker-lookup:focus-visible,
.baht-refpicker-open:focus-visible,
.baht-refpicker-option:focus-visible,
.baht-table-wrap:focus-visible,
.baht-table-picker-toggle:focus-visible,
.baht-table-picker-option:focus-visible,
.baht-table-picker-expand:focus-visible,
.baht-table-picker-modal-close:focus-visible,
.baht-table-picker-btns button:focus-visible,
.baht-table-picker-modal-foot button:focus-visible,
.baht-table-picker-select:focus-visible,
.baht-repeater-remove:focus-visible,
.baht-repeater-add:focus-visible,
.baht-file-remove:focus-visible,
.baht-upload-retry:focus-visible,
.baht-file-chip a:focus-visible,
.baht-breadcrumbs a:focus-visible {
  outline: var(--baht-focus-ring);
  outline-offset: 2px;
}

/* ---------- Motion: enter / leave for the transient components ----------
   Light by design: one fade for scrims, one 6px rise/sink for panels, all on
   --baht-dur-fast/base and --baht-ease. Exit classes (`--closing`, `--leaving`)
   are added by the component and removed when the animation ends
   (components/motion.ts), so the node stays for exactly one animation. Placed
   after every component block so the leave rules win the cascade. */
.baht-modal-scrim--closing {
  animation: baht-fade-out var(--baht-dur-fast) var(--baht-ease) forwards;
  pointer-events: none;
}
.baht-modal-scrim--closing .baht-modal {
  animation: baht-sink-out var(--baht-dur-fast) var(--baht-ease) forwards;
}
.baht-modal-scrim--closing .baht-modal--side {
  animation: baht-drawer-out var(--baht-dur-base) var(--baht-ease) forwards;
}
.baht-modal-scrim--closing .baht-modal--side:dir(rtl) {
  animation-name: baht-drawer-out-rtl;
}
@media (max-width: 599.98px) {
  .baht-modal-scrim--closing .baht-modal--sheet {
    animation: baht-sheet-out var(--baht-dur-base) var(--baht-ease) forwards;
  }
}
.baht-toast--leaving {
  animation: baht-sink-out var(--baht-dur-fast) var(--baht-ease) forwards;
  pointer-events: none;
}
.baht-alert--leaving {
  animation: baht-fade-out var(--baht-dur-fast) var(--baht-ease) forwards;
  pointer-events: none;
}
/* things that open under a trigger settle into place instead of popping */
.baht-accordion-content,
.baht-refpicker--open .baht-refpicker-list,
.baht-select--open .baht-select-list,
.baht-typeahead--open .baht-typeahead-list,
.baht-tags--open .baht-tags-list,
.baht-repeater-row {
  animation: baht-rise-in var(--baht-dur-fast) var(--baht-ease);
}
/* flatpickr ships a 300ms drop-in; match the token pace */
baht-datepicker .flatpickr-calendar.open {
  animation-duration: var(--baht-dur-base);
  animation-timing-function: var(--baht-ease);
}

@media (prefers-reduced-motion: reduce) {
  .baht-modal-scrim,
  .baht-modal,
  .baht-modal--sheet,
  .baht-modal--side,
  .baht-modal-scrim--closing .baht-modal--sheet,
  .baht-modal-scrim--closing .baht-modal--side,
  .baht-modal--side:dir(rtl),
  .baht-modal-scrim--closing .baht-modal--side:dir(rtl),
  .baht-toast,
  .baht-modal-scrim--closing,
  .baht-modal-scrim--closing .baht-modal,
  .baht-toast--leaving,
  .baht-alert--leaving,
  .baht-workflow-step--forward,
  .baht-workflow-step--back,
  .baht-error,
  .baht-field--revealed,
  .baht-table tbody tr.baht-table-row,
  .baht-accordion-content,
  .baht-refpicker--open .baht-refpicker-list,
  .baht-select--open .baht-select-list,
  .baht-typeahead--open .baht-typeahead-list,
  .baht-tags--open .baht-tags-list,
  .baht-repeater-row,
  baht-datepicker .flatpickr-calendar {
    animation: none;
  }
  .baht-skeleton {
    animation: none;
    opacity: 0.6;
  }
  /* indeterminate: swap the slide for a gentle opacity pulse */
  .baht-progress--indeterminate .baht-progress-bar {
    animation: baht-pulse 2s var(--baht-ease) infinite;
    width: 100%;
    margin-left: 0;
  }
  .baht-spinner {
    animation-duration: 1.6s;
  } /* still conveys "busy", just calmer */
  .baht-control,
  .baht-button,
  .baht-link,
  .baht-filter button,
  .baht-pagination button,
  .baht-accordion-chevron,
  .baht-toggle-track,
  .baht-toggle-thumb,
  .baht-progress-bar,
  .baht-rating button,
  .baht-tooltip,
  .baht-split-button-toggle .baht-icon,
  .baht-theme-toggle-icon,
  .baht-menu-trigger .baht-icon,
  .baht-tabs-tab,
  .baht-tabs-tab::after,
  .baht-otp input,
  .baht-select-chevron,
  baht-datepicker .flatpickr-day,
  .baht-swipe-row-content,
  .baht-card {
    transition: none;
  }
}

@media (forced-colors: active) {
  .baht-toggle-track {
    border: 1px solid ButtonText;
  }
  .baht-toggle-thumb {
    background: ButtonText;
  }
  .baht-control--toggle input:checked + .baht-toggle-track {
    background: Highlight;
  }
  .baht-skeleton {
    background: GrayText;
  }
  .baht-progress {
    border: 1px solid ButtonText;
  }
  .baht-progress-bar {
    background: Highlight;
  }
  .baht-badge {
    border: 1px solid ButtonText;
  }
  .baht-badge-dot {
    background: ButtonText;
  }
  .baht-rating button.baht-rating--on {
    color: Highlight;
  }
  .baht-filter button[aria-pressed='true'],
  .baht-pagination button[aria-current='page'],
  .baht-listbox-option--active,
  .baht-refpicker-option--active {
    background: SelectedItem;
    color: SelectedItemText;
  }
  .baht-listbox {
    border: 1px solid CanvasText;
  }
  baht-datepicker .flatpickr-day.selected,
  baht-datepicker .flatpickr-day.startRange,
  baht-datepicker .flatpickr-day.endRange {
    background: Highlight;
    color: HighlightText;
  }
  baht-datepicker .flatpickr-day.today {
    border-color: CanvasText;
  }
}

/* repeater — array of rows (spec 01 §10) */
.baht-repeater {
  display: flex;
  flex-direction: column;
  gap: var(--baht-field-gap);
}
.baht-repeater-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--baht-field-gap);
  padding: 12px;
  padding-right: 44px;
  border: 1px dashed var(--baht-color-border-strong);
  border-radius: var(--baht-radius-sm);
}
.baht-repeater-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--baht-color-text-muted);
  font-size: var(--baht-font-size);
  line-height: 1;
  padding: 4px;
  min-width: 24px;
  min-height: 24px; /* touch target (WCAG 2.5.8) */
}
.baht-repeater-remove:hover {
  color: var(--baht-color-error);
}
.baht-repeater-add {
  align-self: flex-start;
  border: 1px dashed var(--baht-color-border-control);
  background: transparent;
  border-radius: var(--baht-radius-sm);
  padding: 8px 14px;
  cursor: pointer;
  color: var(--baht-color-text-muted);
  font-size: var(--baht-font-size);
}
.baht-repeater-add:hover:not(:disabled) {
  border-color: var(--baht-color-primary);
  color: var(--baht-color-primary);
}
.baht-repeater-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- File upload: dropzone + chips (spec 01 §13, <baht-upload>) ----------
   One visual for both <baht-file> (capture / registry uploader) and <baht-upload>
   (HTTP endpoint): a dashed well with the action as a text button, the native input
   hidden but still focusable, and one chip per file — busy chips carry a progress bar.
   The hosts are block-level so the well takes the field's full width. */
baht-upload,
baht-file {
  display: block;
}
.baht-dropzone {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'icon text'
    'icon hint';
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 14px 16px;
  border: 1px dashed var(--baht-color-border-control);
  border-radius: var(--baht-radius-field);
  background: var(--baht-color-surface);
  color: var(--baht-color-text);
  transition:
    border-color var(--baht-dur-fast) var(--baht-ease),
    background var(--baht-dur-fast) var(--baht-ease);
}
.baht-dropzone:hover:not(.baht-dropzone--disabled) {
  border-color: var(--baht-color-primary);
  background: var(--baht-color-primary-wash);
}
.baht-dropzone--over {
  border-style: solid;
  border-color: var(--baht-color-primary);
  background: var(--baht-color-primary-tint);
}
.baht-dropzone--invalid {
  border-color: var(--baht-color-error);
}
.baht-dropzone--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.baht-dropzone:has(.baht-dropzone-input:focus-visible) {
  outline: var(--baht-focus-ring);
  outline-offset: 2px;
}
.baht-dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.baht-dropzone--disabled .baht-dropzone-input {
  cursor: not-allowed;
}
.baht-dropzone-icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--baht-radius-selector);
  background: var(--baht-color-primary-tint);
  color: var(--baht-color-primary);
}
.baht-dropzone-icon .baht-icon {
  height: 18px;
}
.baht-dropzone-icon .baht-illustration {
  height: 18px;
}
.baht-dropzone-text {
  grid-area: text;
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  font-size: var(--baht-font-size);
  line-height: 1.4;
}
.baht-dropzone-action {
  position: relative; /* above the invisible input so it is a real click target */
  z-index: 1;
  font-weight: 600;
  color: var(--baht-color-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--baht-color-link) 35%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
}
.baht-dropzone--disabled .baht-dropzone-action {
  pointer-events: none;
}
.baht-dropzone-or {
  color: var(--baht-color-text-muted);
}
.baht-dropzone-hint {
  grid-area: hint;
  font-size: var(--baht-text-xs);
  color: var(--baht-color-text-subtle);
}

.baht-upload-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.baht-file-status {
  margin: 6px 0 0;
  font-size: var(--baht-font-size-label);
  color: var(--baht-color-text-muted);
}
.baht-file-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  padding: 8px 8px 8px 12px;
  border: var(--baht-border-default);
  border-radius: var(--baht-radius-sm);
  font-size: var(--baht-font-size-label);
  background: var(--baht-color-surface);
  min-height: 40px;
}
/* <baht-file> (capture / registry mode) renders chips inline, not in a list */
span.baht-file-chip {
  display: inline-flex;
  margin: 8px 6px 0 0;
}
.baht-file-chip--error {
  border-color: color-mix(in oklab, var(--baht-color-error) 45%, var(--baht-color-border));
  background: var(--baht-red-50);
}
.baht-file-chip-icon {
  display: inline-flex;
  color: var(--baht-color-success);
}
.baht-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  color: inherit;
  font-weight: 500;
}
a.baht-file-name,
.baht-file-chip a {
  color: inherit;
}
.baht-file-size {
  color: var(--baht-color-text-muted);
  font-variant-numeric: tabular-nums;
}
.baht-file-status--error {
  margin: 0;
  color: var(--baht-color-error);
}
.baht-file-remove,
.baht-upload-retry {
  border: none;
  background: none;
  cursor: pointer;
  min-height: 24px; /* touch target (WCAG 2.5.8) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--baht-color-text-muted);
  line-height: 1;
  border-radius: var(--baht-radius-xs);
  transition: color var(--baht-dur-fast) var(--baht-ease);
}
.baht-file-remove {
  margin-left: auto;
  padding: 0 2px;
  min-width: 24px;
}
.baht-file-remove:hover {
  color: var(--baht-color-error);
}
.baht-file-remove:active,
.baht-upload-retry:active {
  transform: translateY(1px);
}
.baht-upload-retry {
  padding: 2px 8px;
  font: inherit;
  font-size: var(--baht-font-size-label);
  font-weight: 600;
  color: var(--baht-color-link);
}
.baht-upload-bar {
  flex: 1 1 100%;
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--baht-color-bg-sunken);
  overflow: hidden;
}
.baht-upload-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--baht-color-primary);
  transition: width var(--baht-dur-base) var(--baht-ease);
}
@media (prefers-reduced-motion: reduce) {
  .baht-dropzone,
  .baht-upload-bar-fill,
  .baht-file-remove,
  .baht-upload-retry {
    transition: none;
  }
}

/* wizard step indicator */
.baht-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.baht-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--baht-font-size-label);
  color: var(--baht-color-text-muted);
  transition: color var(--baht-dur-base) var(--baht-ease);
}
.baht-step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--baht-color-border-strong);
  background: var(--baht-color-surface);
  font-size: 12px;
  transition:
    background var(--baht-dur-base) var(--baht-ease),
    border-color var(--baht-dur-base) var(--baht-ease),
    color var(--baht-dur-base) var(--baht-ease);
}
.baht-step--current {
  color: var(--baht-color-text);
  font-weight: 600;
}
.baht-step--current .baht-step-marker {
  border-color: var(--baht-color-primary);
  background: var(--baht-color-primary);
  color: var(--baht-color-primary-contrast);
}

/* sidebar nav variant */
.baht-steps--sidebar {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0;
}
.baht-step--sidebar {
  display: block;
  padding: 10px var(--baht-space-3);
  border-radius: var(--baht-radius);
  border-left: 2px solid transparent;
  cursor: pointer;
}
.baht-step--sidebar.baht-step--current {
  background: var(--baht-color-primary-tint);
  border-left-color: var(--baht-color-primary);
}
.baht-step--sidebar:not(.baht-step--current):hover {
  background: var(--baht-color-primary-wash);
}
.baht-step--done .baht-step-marker {
  border-color: var(--baht-color-primary);
  color: var(--baht-color-primary);
}

/* ---- <baht-comments> ---------------------------------------------------- */
.baht-comments {
  display: grid;
  gap: 12px;
}
.baht-comments-empty,
.baht-comment-time {
  color: var(--baht-color-text-muted);
  font-size: var(--baht-text-sm, 0.875rem);
}
.baht-comments-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.baht-comment {
  padding: 10px 12px;
  border: var(--baht-border-default);
  border-radius: var(--baht-radius-md, 8px);
}
.baht-comment--internal {
  border-style: dashed;
  background: var(--baht-color-surface-muted, var(--baht-color-surface));
}
.baht-comment-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: var(--baht-text-sm, 0.875rem);
}
.baht-comment-tag {
  padding: 0 6px;
  border-radius: var(--baht-radius-full, 999px);
  background: var(--baht-color-warning-soft, rgb(250 204 21 / 25%));
  font-size: 0.75rem;
  font-weight: 600;
}
.baht-comment-body {
  margin: 4px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.baht-comments-composer {
  display: grid;
  gap: 8px;
}
.baht-comments-internal {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: var(--baht-text-sm, 0.875rem);
}
.baht-comments-input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}
.baht-comments-actions {
  display: flex;
  justify-content: flex-end;
}

/* ---- <baht-notification-bell> ------------------------------------------- */
baht-notification-bell {
  position: relative;
  display: inline-flex;
}
.baht-bell-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--baht-radius-full, 999px);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.baht-bell-button:hover,
.baht-bell-button[aria-expanded='true'] {
  background: var(--baht-color-surface-hover, rgb(127 127 127 / 15%));
}
.baht-bell-badge {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: var(--baht-radius-full, 999px);
  background: var(--baht-color-danger, #d93025);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.baht-bell-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: min(380px, calc(100vw - 32px));
  max-height: 70vh;
  overflow: auto;
  border: var(--baht-border-default);
  border-radius: var(--baht-radius-md, 8px);
  background: var(--baht-color-surface);
  color: var(--baht-color-text);
  box-shadow: var(--baht-shadow-lg, 0 8px 24px rgb(0 0 0 / 16%));
}
.baht-bell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: var(--baht-border-default);
}
.baht-bell-link {
  border: 0;
  background: none;
  color: var(--baht-color-primary);
  font: inherit;
  font-size: var(--baht-text-sm, 0.875rem);
  cursor: pointer;
}
.baht-bell-empty {
  margin: 0;
  padding: 16px;
  color: var(--baht-color-text-muted);
  font-size: var(--baht-text-sm, 0.875rem);
}
.baht-bell-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.baht-bell-item {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-bottom: var(--baht-border-default);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.baht-bell-item:hover {
  background: var(--baht-color-surface-hover, rgb(127 127 127 / 10%));
}
.baht-bell-item--unread {
  box-shadow: inset 3px 0 0 var(--baht-color-primary);
}
.baht-bell-title {
  font-size: var(--baht-text-sm, 0.875rem);
  font-weight: 600;
}
.baht-bell-body,
.baht-bell-time {
  color: var(--baht-color-text-muted);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

/* ---- <baht-edit-table> --------------------------------------------------- */
.baht-edit-table-wrap {
  overflow-x: auto;
}
.baht-edit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--baht-text-sm, 0.875rem);
}
.baht-edit-table th,
.baht-edit-table td {
  padding: 6px 8px;
  border-bottom: var(--baht-border-default);
  text-align: left;
  vertical-align: middle;
}
.baht-edit-table .baht-control {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.baht-edit-new td {
  background: var(--baht-color-surface-muted, var(--baht-color-surface));
}
.baht-edit-dirty td {
  background: var(--baht-color-primary-soft, rgb(37 99 235 / 6%));
}
.baht-edit-actions {
  white-space: nowrap;
}

/* ---- <baht-rule-builder> ------------------------------------------------- */
.baht-rule-builder {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.baht-rule {
  display: grid;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: var(--baht-border-default);
  border-radius: var(--baht-radius-md, 8px);
}
.baht-rule-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: var(--baht-text-sm, 0.875rem);
}
.baht-rule-line .baht-control {
  width: auto;
  min-width: 0;
}
.baht-rule-indent {
  margin-left: 16px;
}
.baht-rule-hint {
  margin: 0;
  color: var(--baht-color-text-muted);
  font-size: 0.75rem;
}
.baht-rule-link {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--baht-color-primary);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}
.baht-rule-link--danger {
  color: var(--baht-color-danger, #d93025);
}
.baht-rule-push {
  margin-left: auto;
}