/*! WUI v1.4.1 | wui.css | assembled from src/styles/* (concatenated in token->layout->utilities->persian->components->theme order) | MIT-style internal library, headers preserved */
/* ==========================================================================
   WUI — Web UI Library · Tokens Layer (v1.0.0)
   Single source of truth for --wui-* design tokens.
   Unified superset of research ds.css + finance fn tokens.
   Rules:
   - Raw hex only INSIDE this block; components consume tokens only.
   - Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 (no magic numbers).
   - Radius obeys the concentric law r_outer = r_inner + padding.
   - Logical properties in components; no physical left/right.
   ========================================================================== */

:root {
  /* ---- Brand (default theme; remappable per project via theme-overrides) ---- */
  --wui-brand-50: #eef2ff;
  --wui-brand-100: #e0e7ff;
  --wui-brand-500: #6366f1;
  --wui-brand-600: #4f46e5;
  --wui-brand-700: #4338ca;
  --wui-brand: var(--wui-brand-600);
  --wui-brand-hover: var(--wui-brand-700);
  --wui-brand-on: #ffffff;
  --wui-brand-soft: #eef2ff;
  --wui-brand-border: #c7d2fe;
  --wui-brand-focus-ring: rgba(79, 70, 229, 0.22);

  /* ---- Neutrals ---- */
  --wui-ink: #1e1b4b;
  --wui-ink-muted: #5b5a75;
  --wui-ink-subtle: #8b89a6;
  --wui-ink-on-dark: #f8fafc;

  /* ---- Surfaces & canvas ---- */
  --wui-surface: #ffffff;
  --wui-surface-soft: #f7f7fd;
  --wui-surface-subtle: #eef1fb;
  --wui-bg: #eef1fb;

  /* ---- Borders ---- */
  --wui-border: #e4e3f0;
  --wui-border-soft: #f1f5f9;
  --wui-border-strong: #8b89a6;

  /* ---- Semantic states (color never the only signal: pair with icon/text) ---- */
  --wui-success: #047857;
  --wui-success-soft: #ecfdf5;
  --wui-danger: #b91c1c;
  --wui-danger-soft: #fef2f2;
  --wui-warn: #b45309;
  --wui-warn-soft: #fffbeb;
  --wui-info: #2563eb;
  --wui-info-soft: #eff6ff;

  /* ---- State focus rings (components layer consumes these, never raw rgba) ---- */
  /* Coupling: each ring's rgb channel must match its solid token — update the
     ring (keep the alpha) whenever the solid colour changes, or the halo keeps
     the old hue. --wui-success-focus-ring rgb was left stale by the 1.4.0 hue
     change. */
  --wui-danger-focus-ring: rgba(185, 28, 28, 0.18);
  --wui-success-focus-ring: rgba(4, 120, 87, 0.18);

  /* ---- Spacing scale ---- */
  --wui-sp-1: 4px;
  --wui-sp-2: 8px;
  --wui-sp-3: 12px;
  --wui-sp-4: 16px;
  --wui-sp-5: 24px;
  --wui-sp-6: 32px;
  --wui-sp-7: 48px;

  /* ---- Radius tiers (concentric law: outer = inner + padding) ---- */
  --wui-r-xs: 6px;   /* badges, chips */
  --wui-r-sm: 8px;   /* buttons, inputs */
  --wui-r-md: 12px;  /* toasts, table containers */
  --wui-r-lg: 14px;  /* cards */
  --wui-r-xl: 20px;  /* major surfaces, dialogs */
  --wui-r-full: 9999px;

  /* ---- Typography (fluid clamp scale, Persian-body aware) ---- */
  --wui-font-body: 'DanaFaNum', 'Dana', 'Vazirmatn', Tahoma, system-ui, -apple-system, sans-serif;
  --wui-font-heading: var(--wui-font-body);
  --wui-fs-xs: clamp(0.78rem, 0.72rem + 0.2vw, 0.85rem);
  --wui-fs-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.95rem);
  --wui-fs-base: clamp(1rem, 0.95rem + 0.22vw, 1.1rem);
  --wui-fs-lg: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  --wui-fs-xl: clamp(1.35rem, 1.2rem + 0.6vw, 1.55rem);
  --wui-fs-2xl: clamp(1.65rem, 1.4rem + 1vw, 2rem);
  --wui-fs-3xl: clamp(2rem, 1.65rem + 1.4vw, 2.5rem);
  --wui-fw-normal: 400;
  --wui-fw-medium: 500;
  --wui-fw-semibold: 600;
  --wui-fw-bold: 700;
  --wui-lh-tight: 1.25;
  --wui-lh-snug: 1.4;
  --wui-lh-body: 1.7;   /* >= 1.6 mandated for Persian text */
  --wui-lh-relaxed: 1.8;

  /* ---- Elevation ---- */
  --wui-shadow-sm: 0 1px 3px rgba(30, 27, 75, 0.05), 0 1px 2px rgba(30, 27, 75, 0.04);
  --wui-shadow-md: 0 4px 14px rgba(30, 27, 75, 0.08), 0 2px 4px rgba(30, 27, 75, 0.03);
  --wui-shadow-lg: 0 10px 28px rgba(30, 27, 75, 0.12), 0 4px 8px rgba(30, 27, 75, 0.04);

  /* ---- Elevation enum (v1.2.0, 6-step ladder replaces free-form shadows) ----
     0 = none (flat) · 1 = hairline lift · 2 = card rest · 3 = raised/hover
     4 = dropdown/sticky · 5 = modal/topmost. Consume via .wui-elev-0..5 or
     var() directly; never author raw box-shadow values in components. */
  --wui-elevation-0: none;
  --wui-elevation-1: 0 1px 2px rgba(30, 27, 75, 0.05);
  --wui-elevation-2: 0 1px 3px rgba(30, 27, 75, 0.05), 0 1px 2px rgba(30, 27, 75, 0.04);
  --wui-elevation-3: 0 4px 14px rgba(30, 27, 75, 0.08), 0 2px 4px rgba(30, 27, 75, 0.03);
  --wui-elevation-4: 0 10px 28px rgba(30, 27, 75, 0.12), 0 4px 8px rgba(30, 27, 75, 0.04);
  --wui-elevation-5: 0 18px 44px rgba(30, 27, 75, 0.18), 0 8px 16px rgba(30, 27, 75, 0.06);

  /* ---- Aspect-ratio scale (v1.2.0; media boxes, thumbs, avatars) ----
     Pair with .wui-ar-* utilities; values are native CSS <ratio>, no px math. */
  --wui-ar-1-1: 1 / 1;
  --wui-ar-4-3: 4 / 3;
  --wui-ar-3-4: 3 / 4;
  --wui-ar-16-9: 16 / 9;
  --wui-ar-9-16: 9 / 16;
  --wui-ar-2-1: 2 / 1;
  --wui-ar-1-2: 1 / 2;

  /* ---- Motion (single easing family) ---- */
  --wui-t-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --wui-t-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --wui-t-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Z-index scale ---- */
  --wui-z-dropdown: 1000;
  --wui-z-sticky: 1020;
  --wui-z-modal-backdrop: 1040;
  --wui-z-modal: 1050;
  --wui-z-toast: 1080;

  /* ---- Layout ---- */
  --wui-container-max: 1200px;
  --wui-container-pad: var(--wui-sp-4);

  /* ---- Persian layer (v1.1.0, additive; see src/styles/persian.css) ---- */
  --wui-fa-font-body: 'DanaFaNum', 'Dana', 'Vazirmatn', 'IRANSansX', Tahoma, system-ui, sans-serif;
  --wui-fa-font-heading: 'MorabbaVF', var(--wui-fa-font-body);
  --wui-fa-num-font: var(--wui-fa-font-body);
  --wui-fa-lh-body: 1.7;      /* >= 1.6 mandated for Persian text */
  --wui-fa-lh-heading: 1.35;  /* Persian headings need more air than Latin */
  --wui-fa-ls-body: 0em;      /* Persian script: NEVER positive letter-spacing */
}
/* ==========================================================================
   WUI — Web UI Library · Layout Primitives (v1.0.0)
   All class-scoped (.wui-*). No bare element selectors — isolation contract.
   Logical properties only (RTL-first).
   ========================================================================== */

/* box-sizing fallback for host pages that did NOT load wui-reset.css:
   applied ONLY to .wui-* classes (class-scoped, no global * leak). */
.wui-container, .wui-stack, .wui-row, .wui-grid, .wui-section,
.wui-card, .wui-panel, .wui-panel__head, .wui-table-wrap,
.wui-btn, .wui-input, .wui-select, .wui-textarea, .wui-field, .wui-check,
.wui-badge, .wui-alert, .wui-alert__icon, .wui-nav, .wui-nav__links,
.wui-tabs__list, .wui-tabs__tab, .wui-accordion, .wui-accordion__trigger,
.wui-accordion__panel, .wui-dialog, .wui-dialog__panel, .wui-dialog__header,
.wui-dialog__body, .wui-dialog__footer, .wui-dialog__close, .wui-toasts,
.wui-toast, .wui-toast__content, .wui-toast__close, .wui-empty,
.wui-empty__icon {
  box-sizing: border-box;
}

.wui-container {
  width: 100%;
  max-width: var(--wui-container-max);
  margin-inline: auto;
  padding-inline: var(--wui-container-pad);
}

/* Stack: vertical flow with token gap (override per instance via --wui-gap) */
.wui-stack {
  display: flex;
  flex-direction: column;
  gap: var(--wui-gap, var(--wui-sp-3));
}
.wui-stack--sm { --wui-gap: var(--wui-sp-2); }
.wui-stack--md { --wui-gap: var(--wui-sp-3); }
.wui-stack--lg { --wui-gap: var(--wui-sp-5); }
.wui-stack--xl { --wui-gap: var(--wui-sp-6); }

/* Row: horizontal wrap flow, logical start/end alignment */
.wui-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wui-gap, var(--wui-sp-3));
}
.wui-row--sm { --wui-gap: var(--wui-sp-2); }
.wui-row--between { justify-content: space-between; }
.wui-row--end { justify-content: flex-end; }
.wui-row--start { justify-content: flex-start; }

/* Simple responsive grid; columns collapse on narrow containers */
.wui-grid {
  display: grid;
  gap: var(--wui-gap, var(--wui-sp-4));
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .wui-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wui-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Section rhythm */
.wui-section { padding-block: var(--wui-sp-5); }
.wui-section--lg { padding-block: var(--wui-sp-6); }

.wui-divider {
  border: 0;
  height: 1px;
  background-color: var(--wui-border);
  margin-block: var(--wui-sp-4);
}
/* ==========================================================================
   WUI — Web UI Library · Utilities (v1.0.0)
   Class-scoped helpers. Persian/RTL numeric & bidi conventions live here.
   ========================================================================== */

/* Numeric integrity: digit columns must not jitter (finance/ledger law) */
.wui-num {
  font-variant-numeric: tabular-nums;
}

/* Persian digits context: keep Latin/numeric runs isolated inside RTL text.
   Wrap mixed-direction tokens (IDs, codes, prices+sign) with these. */
.wui-bidi-iso {
  unicode-bidi: isolate;
}

/* Visually hidden but screen-reader accessible */
.wui-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Focus helper for any interactive element inside a wui surface */
.wui-focus-ring:focus-visible {
  outline: 2px solid var(--wui-brand);
  outline-offset: 2px;
}

/* Text helpers */
.wui-text-muted { color: var(--wui-ink-muted); }
.wui-text-subtle { color: var(--wui-ink-subtle); }
.wui-text-start { text-align: start; }
.wui-text-center { text-align: center; }

.wui-heading {
  font-family: var(--wui-font-heading);
  font-weight: var(--wui-fw-bold);
  line-height: var(--wui-lh-snug);
  color: var(--wui-ink);
  margin-block: 0 var(--wui-sp-2);
}
.wui-heading--sm { font-size: var(--wui-fs-lg); }
.wui-heading--md { font-size: var(--wui-fs-xl); }
.wui-heading--lg { font-size: var(--wui-fs-2xl); }
.wui-heading--xl { font-size: var(--wui-fs-3xl); }

.wui-sub {
  font-size: var(--wui-fs-sm);
  line-height: var(--wui-lh-body);
  color: var(--wui-ink-muted);
  margin-block: 0;
}

/* Scoped reduced-motion for wui-animated pieces (no global * leak) */
@media (prefers-reduced-motion: reduce) {
  .wui-anim, .wui-anim::before, .wui-anim::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   v1.2.0 additions
   ========================================================================== */

/* ---- Elevation enum: the ONLY sanctioned shadow ladder (0..5) ----
   Raw box-shadow values are banned from consuming markup; remap via tokens. */
.wui-elev-0 { box-shadow: var(--wui-elevation-0); }
.wui-elev-1 { box-shadow: var(--wui-elevation-1); }
.wui-elev-2 { box-shadow: var(--wui-elevation-2); }
.wui-elev-3 { box-shadow: var(--wui-elevation-3); }
.wui-elev-4 { box-shadow: var(--wui-elevation-4); }
.wui-elev-5 { box-shadow: var(--wui-elevation-5); }

/* ---- Aspect-ratio utilities: pair each with an overflow-safe media child ----
   The box reserves its ratio; the child fills it (width: 100%; height: 100%;
   object-fit: cover) so images never cause layout shift. */
.wui-ar-1-1   { aspect-ratio: var(--wui-ar-1-1); }
.wui-ar-4-3   { aspect-ratio: var(--wui-ar-4-3); }
.wui-ar-3-4   { aspect-ratio: var(--wui-ar-3-4); }
.wui-ar-16-9  { aspect-ratio: var(--wui-ar-16-9); }
.wui-ar-9-16  { aspect-ratio: var(--wui-ar-9-16); }
.wui-ar-2-1   { aspect-ratio: var(--wui-ar-2-1); }
.wui-ar-1-2   { aspect-ratio: var(--wui-ar-1-2); }
/* Perfect circle: same ratio box with a fully rounded radius */
.wui-ar-circle {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

/* ---- Directional icon mirroring (OPT-IN, RTL) ----
   Apply ONLY to directional glyphs: arrows, chevrons, back/next, play direction.
   NEVER apply to logos, faces, or symmetric icons — a mirrored logo/face reads
   as a defect, not localization. Blanket scaleX(-1) on all icons is forbidden;
   each icon opts in individually. */
[dir="rtl"] .wui-flip-rtl { transform: scaleX(-1); }
[dir="rtl"] .wui-flip-rtl-inline {
  transform: scaleX(-1);
  display: inline-block;   /* transform needs a non-inline box */
}
/* ==========================================================================
   WUI — Web UI Library · Persian / RTL Excellence Layer (v1.3.0)
   --------------------------------------------------------------------------
   The consolidated Persian style law for every RTL project. This file is the
   OPERATIONAL source of truth; provenance memory laws are cited inline and
   mapped 1:1 in docs/persian-style-guide.md.

   v1.3.0 (BUG-6 fold): this whole file is concatenated INSIDE wui.css, so a
   project linking wui.css alone gets the full Persian layer. Section 1b is
   the only automatically-active part ([dir="rtl"] / :lang(fa) scoped); every
   other rule stays class- or [data-wui-fa]-scoped. wui-persian.css in dist
   is now a thin COMPATIBILITY shim that just @imports nothing new — it
   re-states this contract for old linkers and will carry anything that can
   never be scope-safely folded (currently: nothing).

   Provenance (memory laws, read-only):
   - persian-typography-rules.md   -> PERSIAN-TYPO-1..3 (this file, sec 1/3/5)
   - rtl-bidi-isolate-law.md       -> BIDI-ISO-1..4 (sec 2)
   - persian-date-rule.md          -> FA-DATE-1..2 (sec 4)
   - typography-dana-morabba.md    -> FA-FONT-1..2 (sec 6)

   Contract:
   - Class-scoped (.wui-fa-*) / attribute-scoped ([dir="rtl"] .wui-*) only.
   - Isolation contract: a page loading this file WITHOUT .wui-fa-* markup
     changes nothing outside [data-wui-fa] opt-in scopes.
   - Tokens: consumes only --wui-fa-* (added to tokens.css, additive).
   - Logical properties only; physical left/right forbidden.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. New tokens live in tokens.css (--wui-fa-*). Reference summary:
   --wui-fa-font-body        body stack (DanaFaNum first per owner taste A9)
   --wui-fa-font-heading     heading stack (per-project may point to Morabba)
   --wui-fa-lh-body          1.7  (>= 1.6 Persian anti-cramming law)
   --wui-fa-lh-heading        1.35 (Persian headings need more air than Latin)
   --wui-fa-ls-body          0em  (Persian script: NEVER positive letter-spacing)
   --wui-fa-num-font         tabular Persian digit stack for ledgers/KPIs
   -------------------------------------------------------------------------- */

/* ==========================================================================
   1. Persian reading flow (PERSIAN-TYPO-1: native RTL, not mirrored LTR)
   ========================================================================== */

/* Persian document/region baseline: Rachel Andrew-style logical defaults.
   Applied only when the host page opted in via [data-wui-fa] wrapper or
   loaded this file as the page's Persian layer with dir="rtl" on <html>. */
[dir="rtl"] [data-wui-fa],
[data-wui-fa][dir="rtl"] {
  text-align: start;           /* right edge in RTL — never hardcode right */
  line-height: var(--wui-fa-lh-body);
  letter-spacing: var(--wui-fa-ls-body);
}

/* Persian headings breathe more than Latin; tighten ONLY the ratio scale. */
[dir="rtl"] [data-wui-fa] :is(h1, h2, h3, h4, .wui-heading),
[data-wui-fa][dir="rtl"] :is(h1, h2, h3, h4, .wui-heading) {
  line-height: var(--wui-fa-lh-heading);
}

/* Persian body copy helper (opt-in class for text blocks) */
.wui-fa-text {
  line-height: var(--wui-fa-lh-body);
  text-align: start;
}

/* RTL numbered sequences (PERSIAN-TYPO-3): step 1 sits at the INLINE-START
   (right) edge. Flex order mirrors automatically in RTL; this helper makes
   the intent explicit and protects against LTR container leaks. */
.wui-fa-steps {
  display: flex;
  flex-direction: row;              /* flex row is direction-aware */
}
.wui-fa-steps > * { flex: 0 0 auto; }
/* If embedded in an LTR page, flip the step architecture, not just text. */
[dir="ltr"] .wui-fa-steps {
  flex-direction: row-reverse;
}

/* ==========================================================================
   1b. Auto-RTL baseline (v1.3.0 — BUG-6 fold: one stylesheet suffices)
   --------------------------------------------------------------------------
   wui-persian.css used to be a "mandatory second include" for RTL projects —
   a mandatory file sessions forget is a file that gets forgotten. The whole
   layer now ships INSIDE wui.css; this section is the only part that fires
   automatically. It is scoped to [dir="rtl"] / :lang(fa) AND to .wui-*
   classes / [data-wui-fa] opt-in scopes, so the isolation contract holds:
   an LTR page loading wui.css sees ZERO new rules from this section.
   Anything requiring a class stays in the class sections below; anything
   that could not be scoped would live in the wui-persian.css compat shim.
   ========================================================================== */

/* Persian headings need more air than the Latin-tuned snug default —
   applied automatically whenever the page declares RTL or lang="fa". */
[dir="rtl"] .wui-heading,
[dir="rtl"] .wui-heading--sm,
[dir="rtl"] .wui-heading--md,
[dir="rtl"] .wui-heading--lg,
[dir="rtl"] .wui-heading--xl,
:lang(fa) .wui-heading,
:lang(fa) .wui-heading--sm,
:lang(fa) .wui-heading--md,
:lang(fa) .wui-heading--lg,
:lang(fa) .wui-heading--xl {
  line-height: var(--wui-fa-lh-heading);
}

/* ==========================================================================
   2. BiDi isolation (BIDI-ISO-1..4 — rtl-bidi-isolate-law)
   Rule: a correct character order is NOT a correct render. Any "sign + number"
   or Latin run inside Persian flow MUST be isolated, ONE isolate covering the
   whole run (a lone percent sign isolated separately re-orders independently).
   ========================================================================== */

/* BIDI-ISO-1: generic inline isolate for mixed-direction runs.
   HTML: wrap with <bdi> preferred; use the class when the DOM is generated
   and <bdi> cannot be injected (e.g. legacy templates). */
.wui-fa-iso,
.wui-bidi-iso {
  unicode-bidi: isolate;
}

/* BIDI-ISO-2: signed numeric runs (percent, minus, currency). One isolate
   wraps the ENTIRE run: sign + digits, e.g. HTML (no DOM edit needed):
   <span class="wui-fa-num-run">٪-۱۴.۷</span> */
.wui-fa-num-run {
  unicode-bidi: isolate;
  unicode-bidi: plaintext; /* numeric run reads in its own base direction */
}

/* BIDI-ISO-3: strong isolation for codes/IDs/phones (Latin digits by law —
   human-readable numbers are Persian digits; codes/IDs stay Latin). */
.wui-fa-code {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums lining-nums;
  direction: ltr;                 /* the CODE itself reads LTR */
  unicode-bidi: isolate;          /* ...but stays isolated in Persian flow */
}

/* BIDI-ISO-4 (presentation fallback): when even the class cannot be added,
   an isolated element with plaintext resolves majority of PnP mis-renders. */
[data-wui-fa] bdi,
[dir="rtl"] bdi {
  unicode-bidi: isolate;
}

/* ==========================================================================
   3. Persian numerals (PERSIAN-TYPO-2 + finance ledger law)
   ========================================================================== */

/* Human-readable numbers render in Persian digits (markup/tool-level concern:
   the string itself should contain ۰-۹ — CSS cannot transpose glyph code-
   points). This class guarantees PRESENTATION integrity once Persian digits
   are in the string: no jitter, no Latin fallback digits, mono-width cells. */
.wui-fa-num,
.wui-num {
  font-family: var(--wui-fa-num-font);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "kern" 0; /* kern off between digits */
}

/* Ledger/KPI/table numeric cells (spec 95: digit columns must not shift) */
.wui-fa-num-cell {
  font-family: var(--wui-fa-num-font);
  font-variant-numeric: tabular-nums;
  text-align: end;                 /* numbers align to inline-end in any dir */
}

/* Force-Latin-digit context (codes, IPs, phone numbers, currency ISO codes)
   inside a Persian page — the deliberate OPPOSITE of .wui-fa-num. */
.wui-fa-latin-num {
  font-variant-numeric: lining-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ==========================================================================
   4. Persian (Jalali) date presentation (persian-date-rule)
   Dates are Jalali at the DATA layer (e.g. ۱۴۰۵/۰۵/۲۹). Presentation rules:
   - Persian digits, slashes or month names stay in one unbreakable run.
   - Never allow a Jalali date to wrap mid-year (۱۴۰۵ on line 1, ۰۵/۲۹ next).
   ========================================================================== */
.wui-fa-date {
  font-family: var(--wui-fa-num-font);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  white-space: nowrap;             /* one date = one visual atom */
}

/* Long Jalali month-name dates ("۲۹ مرداد ۱۴۰۵") SHOULD wrap between
   day-month and month-year, never inside a number: keep nbsp joins at the
   markup level (day&nbsp;month), allow wrap between the two groups. */
.wui-fa-date--long {
  white-space: normal;
  word-spacing: 0.05em;
}

/* Gregorian/ISO dates appearing in Persian UI (imports, APIs): isolated LTR */
.wui-fa-date--greg {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==========================================================================
   5. Punctuation & spacing conventions (Persian native feel)
   ========================================================================== */

/* Persian comma ، and percent ٪ are part of the Persian run; keep them glued
   to the preceding token at markup level with ZWNJ/nbsp. CSS-side: forbid
   orphaned punctuation breaking to a new line after Persian numerals. */
.wui-fa-text {
  hanging-punctuation: none;
}

/* ZWNJ (نیم‌فاصله) safety net: compound words contain U+200C; make sure the
   body font actually renders it (coarse defensive fallback stack). */
[data-wui-fa],
[dir="rtl"] [data-wui-fa] {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   6. Fonts (FA-FONT-1..2 — typography-dana-morabba + owner taste A9)
   VARIABLE fonts only, font-display swap, local per-project font paths.
   No binaries are shipped in the library; each project points src to its
   own /fonts directory via the template below (uncomment + adapt path).
   ========================================================================== */

/* -- TEMPLATE (per-project; do NOT enable by default in the library) -------
@font-face {
  font-family: "DanaFaNum";
  src: url("/fonts/DanaFaNum-VF.woff2") format("woff2-variations"),
       url("/fonts/DanaFaNum-VF.woff") format("woff-variations");
  font-weight: 100 900;             /* full variable axis range */
  font-display: swap;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
@font-face {
  font-family: "MorabbaVF";         /* headings only (owner law: body Dana, headings Morabba) */
  src: url("/fonts/MorabbaVF.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
--------------------------------------------------------------------------- */

/* ==========================================================================
   6a. Webfont metric override template (v1.2.0 — CLS defense for fallback).
   Problem: while a Persian webfont loads, the fallback (Tahoma/system) has
   different ascent/descent/width, so the swap shifts layout (CLS).
   Fix: size-adjust / ascent-override / descent-override / line-gap-override
   on the FALLBACK face so its metrics match the real webfont.

   LAW: values MUST be measured per font pair (webfont vs its fallback), e.g.
   with fontkit / opentype.js (hhea or OS/2 sTypoAscender etc.) or by
   layout-freezing devtools probes. NEVER copy the numbers below blindly —
   they are valid ONLY for the exact DanaFaNum-VF + Tahoma pairing measured.

   TEMPLATE (per-project; uncomment, replace family/src, insert MEASURED %):
   @font-face {
     font-family: "DanaFaNum Fallback";       /* local-metric clone of the real face */
     src: local("Tahoma");                    /* the actual fallback in --wui-fa-font-body */
     font-weight: 100 900;
     font-display: swap;
     ascent-override: 90%;                    /* MEASURED, not guessed */
     descent-override: 22%;                   /* MEASURED */
     line-gap-override: 0%;                   /* MEASURED */
     size-adjust: 100%;                       /* MEASURED: avg glyph width ratio */
   }
   Then put "DanaFaNum Fallback" FIRST in the body stack so the swap happens
   between metric-matched faces (zero CLS), e.g.:
     font-family: "DanaFaNum", "DanaFaNum Fallback", Tahoma, sans-serif;

   WORKED EXAMPLE (method, not a copy-paste value): DanaFaNum-VF was measured
   against Tahoma at font-size 16px: Tahoma box too short by ~5.5% height and
   glyphs ~3% narrow -> ascent-override: 95%; descent-override: 21%;
   size-adjust: 97%. After measuring YOUR pair, round to whole percents and
   verify with Playwright: layout width of a fixed test string must be equal
   before and after font load (target CLS == 0 for the text region).
   ========================================================================== */

/* Token-level default stacks (safe without any @font-face: falls to Tahoma) */
.wui-fa-font-body    { font-family: var(--wui-fa-font-body); }
.wui-fa-font-heading { font-family: var(--wui-fa-font-heading); }

/* Computed-font assertion contract (Playwright): headings must resolve to
   --wui-fa-font-heading, body to --wui-fa-font-body. Enforced per project. */
[data-wui-fa] :is(h1, h2, h3, h4, h5, h6, .wui-heading) {
  font-family: var(--wui-fa-font-heading);
}

/* ==========================================================================
   7. RTL logical-property pattern library (spec sections 30/95)
   Canonical replacements — grep targets for legacy physical properties in
   consuming projects' own CSS (the WUI core never uses physical sides).
   ========================================================================== */

/* Starter direction-agnostic box for Persian widgets */
.wui-fa-box {
  padding-inline: var(--wui-sp-4);
  padding-block: var(--wui-sp-3);
  border-start-start-radius: var(--wui-r-sm);
  border-start-end-radius: var(--wui-r-sm);
  border-end-start-radius: var(--wui-r-sm);
  border-end-end-radius: var(--wui-r-sm);
}

/* Icon + text rows: logical gap, object mirrors via margin-inline only */
.wui-fa-row {
  display: flex;
  align-items: center;
  gap: var(--wui-sp-2);
}
.wui-fa-row > svg,
.wui-fa-row > img {
  margin-inline-end: var(--wui-sp-2);
  flex: 0 0 auto;
}

/* Caret/chevron that must point in reading direction */
.wui-fa-caret {
  transform: scaleX(1);
}
[dir="rtl"] .wui-fa-caret {
  transform: scaleX(-1);
}
@media (prefers-reduced-motion: reduce) {
  .wui-fa-caret { transition: none; }
}

/* ==========================================================================
   8. Print-at-375 law (print-doc-responsive-law): Persian documents print
   as a 375px-wide mobile document — print styles must be authored for the
   phone canvas first. Generic, class-scoped, no project assumption.
   ========================================================================== */
@media print {
  /* Fixed viewport chrome never prints; avoid position tricks */
  .wui-fa-print-hide { display: none !important; }
  /* Persian print: slightly tighter leading, black text, isolated numerics */
  [data-wui-fa] {
    line-height: 1.55;
    color: #000;
  }
  [data-wui-fa] :is(h1, h2, h3) {
    line-height: 1.3;
    break-after: avoid;
  }
  /* Keep ledger rows intact across page breaks (spec 80: break-inside avoid) */
  .wui-fa-num-cell,
  tr, .wui-card, [data-wui] .break-inside-avoid {
    break-inside: avoid;
  }
}

/* ==========================================================================
   9. Reduced motion + a11y guard rails (Persian-specific surfaces)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .wui-fa-steps > *,
  .wui-fa-row > * { transition: none; }
}

/* Focus visibility on Persian text links inside data-wui-fa scope */
[data-wui-fa] a:focus-visible {
  outline: 2px solid var(--wui-brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- end of Persian layer ------------------------------------------------ */
/* ==========================================================================
   WUI — Web UI Library · Buttons (v1.0.0)
   Variants: primary / secondary / ghost / danger · Sizes: sm / md(implicit) / lg
   States: hover / focus-visible / active / disabled / [data-loading]
   Logical properties only. RTL-correct by construction.
   ========================================================================== */

.wui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wui-sp-2);
  padding: var(--wui-sp-2) var(--wui-sp-4);
  font-family: var(--wui-font-body);
  font-size: var(--wui-fs-sm);
  font-weight: var(--wui-fw-medium);
  line-height: var(--wui-lh-snug);
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--wui-r-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--wui-t-fast), border-color var(--wui-t-fast),
              color var(--wui-t-fast), box-shadow var(--wui-t-fast);
}

.wui-btn:focus-visible {
  outline: 2px solid var(--wui-brand);
  outline-offset: 2px;
}

.wui-btn:active { transform: translateY(1px); }

/* --- Variants --- */
.wui-btn--primary {
  background-color: var(--wui-brand);
  color: var(--wui-brand-on);
}
.wui-btn--primary:hover { background-color: var(--wui-brand-hover); }

.wui-btn--secondary {
  background-color: var(--wui-surface);
  color: var(--wui-ink);
  border-color: var(--wui-border-strong);
}
.wui-btn--secondary:hover { background-color: var(--wui-surface-subtle); }

.wui-btn--ghost {
  background-color: transparent;
  color: var(--wui-brand);
}
.wui-btn--ghost:hover { background-color: var(--wui-brand-soft); }

.wui-btn--danger {
  background-color: var(--wui-danger);
  color: #ffffff;
}
.wui-btn--danger:hover { background-color: #991b1b; }

/* --- Sizes --- */
.wui-btn--sm { padding: var(--wui-sp-1) var(--wui-sp-3); min-height: 32px; font-size: var(--wui-fs-xs); }
.wui-btn--lg { padding: var(--wui-sp-3) var(--wui-sp-5); min-height: 48px; font-size: var(--wui-fs-base); }

/* --- Disabled (attribute or class; disabled buttons keep 3:1 boundary) --- */
.wui-btn:disabled,
.wui-btn[aria-disabled="true"],
.wui-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.wui-btn--primary:disabled,
.wui-btn--primary[aria-disabled="true"] { background-color: var(--wui-ink-subtle); color: var(--wui-surface); }

/* --- Loading: spinner via pseudo-element; keep width stable --- */
.wui-btn[data-loading="true"] {
  pointer-events: none;
  color: transparent;
  position: relative;
}
.wui-btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 1em;
  height: 1em;
  margin-block-start: -0.5em;
  margin-inline-start: -0.5em;
  border: 2px solid currentcolor;
  border-top-color: transparent;
  border-radius: var(--wui-r-full);
  color: var(--wui-brand-on);
  animation: wui-spin 0.7s linear infinite;
}
.wui-btn--ghost[data-loading="true"]::after,
.wui-btn--secondary[data-loading="true"]::after { color: var(--wui-brand); }

@keyframes wui-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .wui-btn { transition: none; }
  .wui-btn[data-loading="true"]::after { animation-duration: 1.5s; }
}
/* ==========================================================================
   WUI — Web UI Library · Form Controls (v1.0.0)
   label / input / hint / error, validation states (is-invalid / is-valid).
   Error states pair color WITH text + aria (never color alone).
   ========================================================================== */

.wui-field {
  display: flex;
  flex-direction: column;
  gap: var(--wui-sp-1);
}

.wui-label {
  font-size: var(--wui-fs-sm);
  font-weight: var(--wui-fw-medium);
  color: var(--wui-ink);
  line-height: var(--wui-lh-snug);
}
.wui-label__required {
  color: var(--wui-danger);
  margin-inline-start: 2px;
}

.wui-input,
.wui-select,
.wui-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--wui-sp-2) var(--wui-sp-3);
  font-family: var(--wui-font-body);
  font-size: var(--wui-fs-base);
  line-height: var(--wui-lh-snug);
  color: var(--wui-ink);
  background-color: var(--wui-surface);
  border: 1px solid var(--wui-border-strong);
  border-radius: var(--wui-r-sm);
  transition: border-color var(--wui-t-fast), box-shadow var(--wui-t-fast);
}

.wui-textarea { min-height: 96px; resize: vertical; }

.wui-input::placeholder,
.wui-textarea::placeholder { color: var(--wui-ink-subtle); }

.wui-input:focus-visible,
.wui-select:focus-visible,
.wui-textarea:focus-visible {
  outline: none;
  border-color: var(--wui-brand);
  box-shadow: 0 0 0 3px var(--wui-brand-focus-ring);
}

.wui-input:disabled,
.wui-select:disabled,
.wui-textarea:disabled {
  background-color: var(--wui-surface-subtle);
  color: var(--wui-ink-subtle);
  cursor: not-allowed;
}

/* --- Validation states --- */
.wui-input.is-invalid,
.wui-textarea.is-invalid,
.wui-select.is-invalid {
  border-color: var(--wui-danger);
  box-shadow: 0 0 0 3px var(--wui-danger-focus-ring);
}
.wui-input.is-invalid:focus-visible,
.wui-textarea.is-invalid:focus-visible,
.wui-select.is-invalid:focus-visible {
  border-color: var(--wui-danger);
  box-shadow: 0 0 0 3px var(--wui-danger-focus-ring);
}

.wui-input.is-valid,
.wui-textarea.is-valid,
.wui-select.is-valid {
  border-color: var(--wui-success);
}
.wui-input.is-valid:focus-visible,
.wui-textarea.is-valid:focus-visible,
.wui-select.is-valid:focus-visible {
  border-color: var(--wui-success);
  box-shadow: 0 0 0 3px var(--wui-success-focus-ring);
}

.wui-hint {
  font-size: var(--wui-fs-xs);
  color: var(--wui-ink-muted);
  line-height: var(--wui-lh-body);
}

.wui-error {
  display: flex;
  align-items: flex-start;
  gap: var(--wui-sp-1);
  font-size: var(--wui-fs-xs);
  color: var(--wui-danger);
  line-height: var(--wui-lh-body);
}
.wui-error::before {
  content: "!";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--wui-fw-bold);
  color: var(--wui-danger);
  border: 1.5px solid currentcolor;
  border-radius: var(--wui-r-full);
}

/* Checkbox / radio baseline */
.wui-check {
  display: inline-flex;
  align-items: center;
  gap: var(--wui-sp-2);
  font-size: var(--wui-fs-sm);
  color: var(--wui-ink);
  min-height: 44px;
}
.wui-check input[type="checkbox"],
.wui-check input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--wui-brand);
}
/* ==========================================================================
   WUI — Web UI Library · Cards, Tables, Empty State (v1.0.0)
   Concentric radius law: card (r-lg 14px) wraps inner controls (r-sm 8px).
   ========================================================================== */

.wui-card {
  background-color: var(--wui-surface);
  border: 1px solid var(--wui-border);
  border-radius: var(--wui-r-lg);
  padding: var(--wui-sp-5);
  box-shadow: var(--wui-shadow-sm);
  transition: box-shadow var(--wui-t-base);
}
.wui-card--flat { box-shadow: none; }
.wui-card--interactive:hover { box-shadow: var(--wui-shadow-md); }
a.wui-card { text-decoration: none; color: inherit; display: block; }
a.wui-card:focus-visible,
button.wui-card:focus-visible {
  outline: 2px solid var(--wui-brand);
  outline-offset: 2px;
}

.wui-panel {
  background-color: var(--wui-surface);
  border: 1px solid var(--wui-border);
  border-radius: var(--wui-r-md);
  padding: var(--wui-sp-4);
}
.wui-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wui-sp-3);
  padding-block-end: var(--wui-sp-3);
  border-block-end: 1px solid var(--wui-border);
  margin-block-end: var(--wui-sp-4);
}
.wui-panel__title {
  font-family: var(--wui-font-heading);
  font-size: var(--wui-fs-lg);
  font-weight: var(--wui-fw-bold);
  color: var(--wui-ink);
  margin: 0;
}

/* --- Data table --- */
.wui-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--wui-border);
  border-radius: var(--wui-r-md);
  background-color: var(--wui-surface);
}
.wui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wui-fs-sm);
  line-height: var(--wui-lh-body);
}
.wui-table caption {
  text-align: start;
  padding: var(--wui-sp-3) var(--wui-sp-4);
  font-weight: var(--wui-fw-semibold);
  color: var(--wui-ink);
}
.wui-table th,
.wui-table td {
  padding: var(--wui-sp-3) var(--wui-sp-4);
  text-align: start;
  border-block-end: 1px solid var(--wui-border-soft);
}
.wui-table thead th {
  background-color: var(--wui-surface-soft);
  font-weight: var(--wui-fw-semibold);
  color: var(--wui-ink-muted);
  border-block-end: 1px solid var(--wui-border);
}
.wui-table tbody tr:last-child td { border-block-end: 0; }
.wui-table tbody tr:hover { background-color: var(--wui-surface-soft); }
/* Numeric columns: stable digit columns */
.wui-table .wui-num { text-align: end; }

/* --- Empty state: explain situation + next action --- */
.wui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wui-sp-3);
  padding: var(--wui-sp-6) var(--wui-sp-5);
  text-align: center;
  color: var(--wui-ink-muted);
}
.wui-empty__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--wui-fs-2xl);
  color: var(--wui-ink-subtle);
  background-color: var(--wui-surface-subtle);
  border-radius: var(--wui-r-full);
}
.wui-empty__title {
  font-family: var(--wui-font-heading);
  font-size: var(--wui-fs-lg);
  font-weight: var(--wui-fw-bold);
  color: var(--wui-ink);
  margin: 0;
}
.wui-empty__text {
  max-width: 42ch;
  font-size: var(--wui-fs-sm);
  line-height: var(--wui-lh-body);
  margin: 0;
}
/* ==========================================================================
   WUI — Web UI Library · Badges & Alerts (v1.0.0)
   Semantic states: success / danger / warn / info / brand.
   Color is never the only signal — badges render text, alerts include icons.
   ========================================================================== */

.wui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--wui-sp-1);
  padding: 2px var(--wui-sp-2);
  min-height: 22px;
  font-size: var(--wui-fs-xs);
  font-weight: var(--wui-fw-medium);
  line-height: var(--wui-lh-snug);
  border-radius: var(--wui-r-full);
  border: 1px solid transparent;
  white-space: nowrap;
}
.wui-badge--brand   { background: var(--wui-brand-soft);    color: var(--wui-brand);   border-color: var(--wui-brand-border); }
.wui-badge--success { background: var(--wui-success-soft);  color: var(--wui-success); border-color: currentcolor; }
.wui-badge--danger  { background: var(--wui-danger-soft);   color: var(--wui-danger);  border-color: currentcolor; }
.wui-badge--warn    { background: var(--wui-warn-soft);     color: var(--wui-warn);    border-color: currentcolor; }
.wui-badge--info    { background: var(--wui-info-soft);     color: var(--wui-info);    border-color: currentcolor; }
.wui-badge--neutral { background: var(--wui-surface-subtle); color: var(--wui-ink-muted); border-color: var(--wui-border); }

/* --- Alerts: situation + recovery action, RTL-correct flow --- */
.wui-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--wui-sp-3);
  padding: var(--wui-sp-3) var(--wui-sp-4);
  border-radius: var(--wui-r-md);
  border: 1px solid;
  font-size: var(--wui-fs-sm);
  line-height: var(--wui-lh-body);
}
.wui-alert__icon { flex-shrink: 0; font-weight: var(--wui-fw-bold); line-height: var(--wui-lh-body); }
.wui-alert__title {
  font-weight: var(--wui-fw-semibold);
  color: inherit;
  margin-block-end: 2px;
}
.wui-alert__body { color: var(--wui-ink-muted); }

.wui-alert--success { background: var(--wui-success-soft); border-color: var(--wui-success); color: var(--wui-success); }
.wui-alert--danger  { background: var(--wui-danger-soft);  border-color: var(--wui-danger);  color: var(--wui-danger); }
.wui-alert--warn    { background: var(--wui-warn-soft);    border-color: var(--wui-warn);    color: var(--wui-warn); }
.wui-alert--info    { background: var(--wui-info-soft);    border-color: var(--wui-info);    color: var(--wui-info); }
.wui-alert--success .wui-alert__body,
.wui-alert--danger .wui-alert__body,
.wui-alert--warn .wui-alert__body,
.wui-alert--info .wui-alert__body { color: var(--wui-ink-muted); }
/* ==========================================================================
   WUI — Web UI Library · Navigation Primitives (v1.0.0)
   Nav bar, tabs (markup-driven, JS-enhanced), accordion.
   RTL-first: nav flows inline-start -> inline-end naturally.
   ========================================================================== */

/* --- Top navigation --- */
.wui-nav {
  display: flex;
  align-items: center;
  gap: var(--wui-sp-4);
  padding: var(--wui-sp-3) var(--wui-sp-4);
  background-color: var(--wui-surface);
  border-block-end: 1px solid var(--wui-border);
  border-radius: var(--wui-r-md);
}
.wui-nav__brand {
  font-family: var(--wui-font-heading);
  font-weight: var(--wui-fw-bold);
  font-size: var(--wui-fs-lg);
  color: var(--wui-ink);
  text-decoration: none;
}
.wui-nav__links {
  display: flex;
  align-items: center;
  gap: var(--wui-sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.wui-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--wui-sp-2) var(--wui-sp-3);
  min-height: 40px;
  font-size: var(--wui-fs-sm);
  color: var(--wui-ink-muted);
  text-decoration: none;
  border-radius: var(--wui-r-sm);
  transition: background-color var(--wui-t-fast), color var(--wui-t-fast);
}
.wui-nav__link:hover { background-color: var(--wui-surface-subtle); color: var(--wui-ink); }
.wui-nav__link:focus-visible { outline: 2px solid var(--wui-brand); outline-offset: 2px; }
.wui-nav__link[aria-current="page"] {
  background-color: var(--wui-brand-soft);
  color: var(--wui-brand);
  font-weight: var(--wui-fw-semibold);
}

/* --- Tabs (JS module: data-wui-tabs) --- */
.wui-tabs__list {
  display: flex;
  gap: var(--wui-sp-1);
  border-block-end: 1px solid var(--wui-border);
  padding: 0;
  margin: 0 0 var(--wui-sp-4);
  list-style: none;
}
.wui-tabs__tab {
  padding: var(--wui-sp-2) var(--wui-sp-4);
  min-height: 44px;
  font-size: var(--wui-fs-sm);
  font-weight: var(--wui-fw-medium);
  color: var(--wui-ink-muted);
  background: transparent;
  border: 0;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  cursor: pointer;
  transition: color var(--wui-t-fast), border-color var(--wui-t-fast);
}
.wui-tabs__tab:hover { color: var(--wui-ink); }
.wui-tabs__tab:focus-visible { outline: 2px solid var(--wui-brand); outline-offset: -2px; }
.wui-tabs__tab[aria-selected="true"] {
  color: var(--wui-brand);
  border-block-end-color: var(--wui-brand);
  font-weight: var(--wui-fw-semibold);
}
.wui-tabs__panel[hidden] { display: none; }
.wui-tabs__panel:focus-visible { outline: 2px solid var(--wui-brand); outline-offset: 4px; }

/* --- Accordion (JS module: data-wui-accordion) --- */
.wui-accordion {
  border: 1px solid var(--wui-border);
  border-radius: var(--wui-r-md);
  background-color: var(--wui-surface);
  overflow: hidden;
}
.wui-accordion__item + .wui-accordion__item { border-block-start: 1px solid var(--wui-border); }
.wui-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wui-sp-3);
  width: 100%;
  padding: var(--wui-sp-3) var(--wui-sp-4);
  min-height: 44px;
  font-family: var(--wui-font-body);
  font-size: var(--wui-fs-base);
  font-weight: var(--wui-fw-medium);
  color: var(--wui-ink);
  text-align: start;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color var(--wui-t-fast);
}
.wui-accordion__trigger:hover { background-color: var(--wui-surface-soft); }
.wui-accordion__trigger:focus-visible { outline: 2px solid var(--wui-brand); outline-offset: -2px; }
.wui-accordion__chevron {
  flex-shrink: 0;
  transition: transform var(--wui-t-base);
}
.wui-accordion__trigger[aria-expanded="true"] .wui-accordion__chevron {
  transform: rotate(180deg);
}
.wui-accordion__panel { padding: 0 var(--wui-sp-4) var(--wui-sp-4); }
.wui-accordion__panel[hidden] { display: none; }
/* ==========================================================================
   WUI — Web UI Library · Overlays: Dialog & Toast (v1.0.0)
   Dialog: backdrop + centered panel, z-index scale, [hidden]-driven.
   Toast: fixed inline-end bottom stack (logical, RTL-correct), JS module.
   ========================================================================== */

/* --- Dialog (JS module: data-wui-dialog) --- */
.wui-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--wui-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wui-sp-4);
}
.wui-dialog[hidden] { display: none; }
.wui-dialog__backdrop {
  position: absolute;
  inset: 0;
  z-index: var(--wui-z-modal-backdrop);
  background: rgba(30, 27, 75, 0.45);
}
.wui-dialog__panel {
  position: relative;
  z-index: var(--wui-z-modal);
  width: min(480px, 100%);
  max-height: min(85vh, 720px);
  overflow-y: auto;
  background-color: var(--wui-surface);
  border-radius: var(--wui-r-xl);
  box-shadow: var(--wui-shadow-lg);
  animation: wui-dialog-in var(--wui-t-base) both;
}
@keyframes wui-dialog-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wui-dialog__panel { animation: none; }
}
.wui-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wui-sp-3);
  padding: var(--wui-sp-4) var(--wui-sp-5);
  border-block-end: 1px solid var(--wui-border);
}
.wui-dialog__title {
  font-family: var(--wui-font-heading);
  font-size: var(--wui-fs-lg);
  font-weight: var(--wui-fw-bold);
  color: var(--wui-ink);
  margin: 0;
}
.wui-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: var(--wui-fs-lg);
  line-height: 1;
  color: var(--wui-ink-muted);
  background: transparent;
  border: 0;
  border-radius: var(--wui-r-sm);
  cursor: pointer;
  transition: background-color var(--wui-t-fast), color var(--wui-t-fast);
}
.wui-dialog__close:hover { background-color: var(--wui-surface-subtle); color: var(--wui-ink); }
.wui-dialog__close:focus-visible { outline: 2px solid var(--wui-brand); outline-offset: 2px; }
.wui-dialog__body {
  padding: var(--wui-sp-4) var(--wui-sp-5);
  font-size: var(--wui-fs-base);
  line-height: var(--wui-lh-body);
  color: var(--wui-ink);
}
.wui-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--wui-sp-2);
  padding: var(--wui-sp-3) var(--wui-sp-5) var(--wui-sp-4);
  border-block-start: 1px solid var(--wui-border);
}

/* --- Toast (JS module: data-wui-toast containers) --- */
.wui-toasts {
  position: fixed;
  inset-block-end: var(--wui-sp-4);
  inset-inline-end: var(--wui-sp-4);
  z-index: var(--wui-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--wui-sp-2);
  width: min(360px, calc(100vw - 2 * var(--wui-sp-4)));
  pointer-events: none;
}
.wui-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--wui-sp-3);
  padding: var(--wui-sp-3) var(--wui-sp-4);
  background-color: var(--wui-surface);
  border: 1px solid var(--wui-border);
  border-inline-start: 4px solid var(--wui-info);
  border-radius: var(--wui-r-md);
  box-shadow: var(--wui-shadow-md);
  pointer-events: auto;
  animation: wui-toast-in var(--wui-t-base) both;
}
@keyframes wui-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.wui-toast--success { border-inline-start-color: var(--wui-success); }
.wui-toast--danger  { border-inline-start-color: var(--wui-danger); }
.wui-toast--warn    { border-inline-start-color: var(--wui-warn); }
@media (prefers-reduced-motion: reduce) {
  .wui-toast { animation: none; }
}
.wui-toast__content { flex: 1 1 auto; min-width: 0; }
.wui-toast__title { font-weight: var(--wui-fw-semibold); color: var(--wui-ink); }
.wui-toast__msg { font-size: var(--wui-fs-sm); color: var(--wui-ink-muted); line-height: var(--wui-lh-body); }
.wui-toast__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: var(--wui-fs-base);
  color: var(--wui-ink-subtle);
  background: transparent;
  border: 0;
  border-radius: var(--wui-r-xs);
  cursor: pointer;
}
.wui-toast__close:hover { background-color: var(--wui-surface-subtle); color: var(--wui-ink); }
.wui-toast__close:focus-visible { outline: 2px solid var(--wui-brand); outline-offset: 2px; }
/* ==========================================================================
   WUI — Web UI Library · Default Theme (v1.0.0)
   The theme layer is PURE token remapping onto --wui-* semantic names.
   Components never change here — rebranding = overriding these aliases only
   (see projects/<id>/theme-overrides.css for live examples).
   ========================================================================== */

:root {
  /* Default brand: indigo (research ds heritage).
     Consume via aliases so per-project overrides are a single layer deep. */
  --wui-theme-color-primary: var(--wui-brand);
  --wui-theme-color-primary-hover: var(--wui-brand-hover);
  --wui-theme-surface: var(--wui-surface);
  --wui-theme-canvas: var(--wui-bg);
  --wui-theme-text: var(--wui-ink);
  --wui-theme-text-muted: var(--wui-ink-muted);
  --wui-theme-border: var(--wui-border);
}