/*!
 * Bana UI v0.1.0-alpha.0 — MIT
 * Layer order (lowest → highest priority). Unlayered CSS always wins over Bana.
 */
/* Vazirmatn — SIL Open Font License 1.1 (https://github.com/rastikerdar/vazirmatn) */
@font-face{font-family:"Vazirmatn";src:local("Vazirmatn"),local("Vazirmatn Variable"),url("./fonts/Vazirmatn-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@layer bana.reset, bana.tokens, bana.themes, bana.base, bana.layout, bana.components, bana.utilities;

/* Non-colour design tokens: type, space, radius, motion, z-index, controls, density. */
@layer bana.tokens {
  :root {
    /* Typography — Vazirmatn first (see npm run fonts). Latin glyphs fall to Inter; Persian glyphs fall through
       a list of Persian-capable system fonts, so text is never rendered in a mismatched serif. */
    --bana-font-sans: "Vazirmatn", "Vazir", "IRANSansX", "IRANSans", "Shabnam", "Sahel", "Inter",
      "Noto Sans Arabic UI", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, -apple-system,
      "SF Arabic", "Geeza Pro", "Noto Naskh Arabic", sans-serif;
    --bana-font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

    --bana-text-xs: 0.75rem;
    --bana-text-sm: 0.84375rem;
    --bana-text-md: 0.96875rem;
    --bana-text-lg: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
    --bana-text-xl: clamp(1.1875rem, 1.12rem + 0.35vw, 1.375rem);
    --bana-text-2xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
    --bana-text-3xl: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);
    --bana-text-4xl: clamp(2rem, 1.4rem + 3vw, 3.25rem);

    --bana-leading-tight: 1.25;
    --bana-leading-snug: 1.45;
    --bana-leading-normal: 1.7; /* Persian script needs more air than Latin */
    --bana-weight-regular: 400;
    --bana-weight-medium: 460;   /* Vazirmatn is a variable font: in-between weights keep Persian text light */
    --bana-weight-semibold: 560;
    --bana-weight-bold: 660;

    /* Spacing — 4px grid */
    --bana-space-0: 0;
    --bana-space-1: 0.25rem;
    --bana-space-2: 0.5rem;
    --bana-space-3: 0.75rem;
    --bana-space-4: 1rem;
    --bana-space-5: 1.25rem;
    --bana-space-6: 1.5rem;
    --bana-space-8: 2rem;
    --bana-space-10: 2.5rem;
    --bana-space-12: 3rem;
    --bana-space-16: 4rem;

    /* Radius */
    --bana-radius-xs: 0.1875rem;
    --bana-radius-sm: 0.3125rem;
    --bana-radius-md: 0.5rem;
    --bana-radius-lg: 0.75rem;
    --bana-radius-xl: 1rem;
    --bana-radius-full: 999px;

    /* Motion */
    --bana-duration-fast: 120ms;
    --bana-duration-base: 200ms;
    --bana-duration-slow: 320ms;
    --bana-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --bana-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --bana-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

    /* Layering */
    --bana-z-sticky: 100;
    --bana-z-drawer: 400;
    --bana-z-popover: 450;
    --bana-z-modal: 500;
    --bana-z-toast: 600;

    /* Controls & density */
    --bana-density: 1;
    --bana-control-sm: calc(2rem * var(--bana-density));
    --bana-control-md: calc(2.5rem * var(--bana-density));
    --bana-control-lg: calc(3rem * var(--bana-density));
    --bana-icon-size: 1.25em;

    --bana-container: 72rem;
    --bana-gutter: clamp(1rem, 4vw, 2rem);
  }

  @supports (transition-timing-function: linear(0, 1)) {
    :root {
      --bana-ease-spring: linear(0, 0.2 6%, 0.62 14%, 0.92 22%, 1.04 30%, 1.05 38%, 1.01 50%, 0.998 66%, 1);
    }
  }

  @media (pointer: coarse) {
    :root { --bana-density: 1.1; }
  }

  [data-density="compact"] { --bana-density: 0.85; }
  [data-density="comfortable"] { --bana-density: 1; }
  [data-density="touch"] { --bana-density: 1.15; }

  /* Reduced motion: collapse every duration; components read these tokens. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --bana-duration-fast: 0.01ms;
      --bana-duration-base: 0.01ms;
      --bana-duration-slow: 0.01ms;
    }
  }
  :root[data-motion="reduce"] {
    --bana-duration-fast: 0.01ms;
    --bana-duration-base: 0.01ms;
    --bana-duration-slow: 0.01ms;
  }
}

/* GENERATED by scripts/build-tokens.mjs — do not edit by hand. */
@layer bana.tokens {
:root {
  --bana-lajvard-50: oklch(0.982 0.0084 262);
  --bana-lajvard-100: oklch(0.953 0.0222 262);
  --bana-lajvard-200: oklch(0.895 0.0508 262);
  --bana-lajvard-300: oklch(0.815 0.0924 262);
  --bana-lajvard-400: oklch(0.715 0.1394 262);
  --bana-lajvard-500: oklch(0.615 0.17 262);
  --bana-lajvard-600: oklch(0.52 0.1649 262);
  --bana-lajvard-700: oklch(0.43 0.1462 262);
  --bana-lajvard-800: oklch(0.33 0.1224 262);
  --bana-lajvard-900: oklch(0.24 0.0952 262);
  --bana-lajvard-950: oklch(0.17 0.068 262);
  --bana-firuzeh-50: oklch(0.982 0.0115 196);
  --bana-firuzeh-100: oklch(0.953 0.023 196);
  --bana-firuzeh-200: oklch(0.895 0.0437 196);
  --bana-firuzeh-300: oklch(0.815 0.069 196);
  --bana-firuzeh-400: oklch(0.715 0.0943 196);
  --bana-firuzeh-500: oklch(0.615 0.1048 196);
  --bana-firuzeh-600: oklch(0.52 0.0886 196);
  --bana-firuzeh-700: oklch(0.43 0.0733 196);
  --bana-firuzeh-800: oklch(0.33 0.0563 196);
  --bana-firuzeh-900: oklch(0.24 0.0412 196);
  --bana-firuzeh-950: oklch(0.17 0.0295 196);
  --bana-pesteh-50: oklch(0.982 0.0135 142);
  --bana-pesteh-100: oklch(0.953 0.027 142);
  --bana-pesteh-200: oklch(0.895 0.0513 142);
  --bana-pesteh-300: oklch(0.815 0.081 142);
  --bana-pesteh-400: oklch(0.715 0.1107 142);
  --bana-pesteh-500: oklch(0.615 0.135 142);
  --bana-pesteh-600: oklch(0.52 0.1309 142);
  --bana-pesteh-700: oklch(0.43 0.1161 142);
  --bana-pesteh-800: oklch(0.33 0.0972 142);
  --bana-pesteh-900: oklch(0.24 0.0756 142);
  --bana-pesteh-950: oklch(0.17 0.054 142);
  --bana-zaferan-50: oklch(0.982 0.0124 68);
  --bana-zaferan-100: oklch(0.953 0.03 68);
  --bana-zaferan-200: oklch(0.895 0.057 68);
  --bana-zaferan-300: oklch(0.815 0.09 68);
  --bana-zaferan-400: oklch(0.715 0.1229 68);
  --bana-zaferan-500: oklch(0.615 0.135 68);
  --bana-zaferan-600: oklch(0.52 0.1142 68);
  --bana-zaferan-700: oklch(0.43 0.0945 68);
  --bana-zaferan-800: oklch(0.33 0.0727 68);
  --bana-zaferan-900: oklch(0.24 0.0532 68);
  --bana-zaferan-950: oklch(0.17 0.0384 68);
  --bana-anar-50: oklch(0.982 0.0088 14);
  --bana-anar-100: oklch(0.953 0.0235 14);
  --bana-anar-200: oklch(0.895 0.0554 14);
  --bana-anar-300: oklch(0.815 0.1056 14);
  --bana-anar-400: oklch(0.715 0.164 14);
  --bana-anar-500: oklch(0.615 0.2 14);
  --bana-anar-600: oklch(0.52 0.194 14);
  --bana-anar-700: oklch(0.43 0.172 14);
  --bana-anar-800: oklch(0.33 0.1322 14);
  --bana-anar-900: oklch(0.24 0.0965 14);
  --bana-anar-950: oklch(0.17 0.0691 14);
  --bana-morakkab-50: oklch(0.982 0.0086 255);
  --bana-morakkab-100: oklch(0.953 0.012 255);
  --bana-morakkab-200: oklch(0.895 0.012 255);
  --bana-morakkab-300: oklch(0.815 0.012 255);
  --bana-morakkab-400: oklch(0.715 0.012 255);
  --bana-morakkab-500: oklch(0.615 0.012 255);
  --bana-morakkab-600: oklch(0.52 0.012 255);
  --bana-morakkab-700: oklch(0.43 0.012 255);
  --bana-morakkab-800: oklch(0.33 0.012 255);
  --bana-morakkab-900: oklch(0.24 0.012 255);
  --bana-morakkab-950: oklch(0.17 0.012 255);
  --bana-zomorrod-50: oklch(0.982 0.012 168);
  --bana-zomorrod-100: oklch(0.953 0.024 168);
  --bana-zomorrod-200: oklch(0.895 0.0456 168);
  --bana-zomorrod-300: oklch(0.815 0.072 168);
  --bana-zomorrod-400: oklch(0.715 0.0983 168);
  --bana-zomorrod-500: oklch(0.615 0.12 168);
  --bana-zomorrod-600: oklch(0.52 0.1053 168);
  --bana-zomorrod-700: oklch(0.43 0.0871 168);
  --bana-zomorrod-800: oklch(0.33 0.067 168);
  --bana-zomorrod-900: oklch(0.24 0.0489 168);
  --bana-zomorrod-950: oklch(0.17 0.0351 168);
  --bana-banafsh-50: oklch(0.982 0.0105 305);
  --bana-banafsh-100: oklch(0.953 0.0278 305);
  --bana-banafsh-200: oklch(0.895 0.0608 305);
  --bana-banafsh-300: oklch(0.815 0.096 305);
  --bana-banafsh-400: oklch(0.715 0.1311 305);
  --bana-banafsh-500: oklch(0.615 0.16 305);
  --bana-banafsh-600: oklch(0.52 0.1552 305);
  --bana-banafsh-700: oklch(0.43 0.1376 305);
  --bana-banafsh-800: oklch(0.33 0.1152 305);
  --bana-banafsh-900: oklch(0.24 0.0896 305);
  --bana-banafsh-950: oklch(0.17 0.064 305);
  --bana-narenji-50: oklch(0.982 0.0095 46);
  --bana-narenji-100: oklch(0.953 0.0253 46);
  --bana-narenji-200: oklch(0.895 0.0594 46);
  --bana-narenji-300: oklch(0.815 0.102 46);
  --bana-narenji-400: oklch(0.715 0.1394 46);
  --bana-narenji-500: oklch(0.615 0.17 46);
  --bana-narenji-600: oklch(0.52 0.1463 46);
  --bana-narenji-700: oklch(0.43 0.1211 46);
  --bana-narenji-800: oklch(0.33 0.0931 46);
  --bana-narenji-900: oklch(0.24 0.0681 46);
  --bana-narenji-950: oklch(0.17 0.0492 46);
  --bana-sadaf-50: oklch(0.982 0.01 352);
  --bana-sadaf-100: oklch(0.953 0.026 352);
  --bana-sadaf-200: oklch(0.895 0.0494 352);
  --bana-sadaf-300: oklch(0.815 0.078 352);
  --bana-sadaf-400: oklch(0.715 0.1066 352);
  --bana-sadaf-500: oklch(0.615 0.13 352);
  --bana-sadaf-600: oklch(0.52 0.1261 352);
  --bana-sadaf-700: oklch(0.43 0.1118 352);
  --bana-sadaf-800: oklch(0.33 0.0936 352);
  --bana-sadaf-900: oklch(0.24 0.0728 352);
  --bana-sadaf-950: oklch(0.17 0.052 352);
  --bana-ink-50: oklch(0.982 0.0086 255);
  --bana-ink-100: oklch(0.953 0.011 255);
  --bana-ink-200: oklch(0.895 0.011 255);
  --bana-ink-300: oklch(0.815 0.011 255);
  --bana-ink-400: oklch(0.715 0.011 255);
  --bana-ink-450: oklch(0.655 0.011 255);
  --bana-ink-500: oklch(0.615 0.011 255);
  --bana-ink-600: oklch(0.52 0.011 255);
  --bana-ink-700: oklch(0.43 0.011 255);
  --bana-ink-800: oklch(0.33 0.011 255);
  --bana-ink-900: oklch(0.24 0.011 255);
  --bana-ink-950: oklch(0.17 0.011 255);
  --bana-verdant-50: oklch(0.982 0.016 155);
  --bana-verdant-100: oklch(0.953 0.032 155);
  --bana-verdant-200: oklch(0.895 0.0608 155);
  --bana-verdant-300: oklch(0.815 0.096 155);
  --bana-verdant-400: oklch(0.715 0.1311 155);
  --bana-verdant-500: oklch(0.615 0.1521 155);
  --bana-verdant-600: oklch(0.52 0.1286 155);
  --bana-verdant-700: oklch(0.43 0.1064 155);
  --bana-verdant-800: oklch(0.33 0.0818 155);
  --bana-verdant-900: oklch(0.24 0.0597 155);
  --bana-verdant-950: oklch(0.17 0.0429 155);
  --bana-amber-50: oklch(0.982 0.016 82);
  --bana-amber-100: oklch(0.953 0.032 82);
  --bana-amber-200: oklch(0.895 0.0608 82);
  --bana-amber-300: oklch(0.815 0.096 82);
  --bana-amber-400: oklch(0.715 0.1311 82);
  --bana-amber-500: oklch(0.615 0.1268 82);
  --bana-amber-600: oklch(0.52 0.1072 82);
  --bana-amber-700: oklch(0.43 0.0887 82);
  --bana-amber-800: oklch(0.33 0.0682 82);
  --bana-amber-900: oklch(0.24 0.0499 82);
  --bana-amber-950: oklch(0.17 0.036 82);
  --bana-ember-50: oklch(0.982 0.0087 27);
  --bana-ember-100: oklch(0.953 0.0233 27);
  --bana-ember-200: oklch(0.895 0.0548 27);
  --bana-ember-300: oklch(0.815 0.1043 27);
  --bana-ember-400: oklch(0.715 0.164 27);
  --bana-ember-500: oklch(0.615 0.2 27);
  --bana-ember-600: oklch(0.52 0.194 27);
  --bana-ember-700: oklch(0.43 0.172 27);
  --bana-ember-800: oklch(0.33 0.1348 27);
  --bana-ember-900: oklch(0.24 0.0984 27);
  --bana-ember-950: oklch(0.17 0.0704 27);
  --bana-azure-50: oklch(0.982 0.0103 232);
  --bana-azure-100: oklch(0.953 0.0273 232);
  --bana-azure-200: oklch(0.895 0.0532 232);
  --bana-azure-300: oklch(0.815 0.084 232);
  --bana-azure-400: oklch(0.715 0.1148 232);
  --bana-azure-500: oklch(0.615 0.1255 232);
  --bana-azure-600: oklch(0.52 0.1061 232);
  --bana-azure-700: oklch(0.43 0.0878 232);
  --bana-azure-800: oklch(0.33 0.0675 232);
  --bana-azure-900: oklch(0.24 0.0493 232);
  --bana-azure-950: oklch(0.17 0.0354 232);
  --bana-night-0: oklch(0.14 0.022 262);
  --bana-night-1: oklch(0.18 0.026 262);
  --bana-night-2: oklch(0.225 0.027 262);
  --bana-night-3: oklch(0.265 0.027 262);
  --bana-night-4: oklch(0.315 0.026 262);
  --bana-night-5: oklch(0.385 0.024 262);
  --bana-night-6: oklch(0.54 0.02 262);
  --bana-white: oklch(1 0 0);
  --bana-chart-light-1: oklch(0.58 0.15 262);
  --bana-chart-dark-1: oklch(0.72 0.1452 262);
  --bana-chart-light-2: oklch(0.58 0.0988 196);
  --bana-chart-dark-2: oklch(0.72 0.1227 196);
  --bana-chart-light-3: oklch(0.58 0.1242 72);
  --bana-chart-dark-3: oklch(0.72 0.15 72);
  --bana-chart-light-4: oklch(0.58 0.15 14);
  --bana-chart-dark-4: oklch(0.72 0.15 14);
  --bana-chart-light-5: oklch(0.58 0.15 142);
  --bana-chart-dark-5: oklch(0.72 0.15 142);
  --bana-chart-light-6: oklch(0.58 0.15 330);
  --bana-chart-dark-6: oklch(0.72 0.15 330);
  --bana-chart-light-7: oklch(0.58 0.1183 232);
  --bana-chart-dark-7: oklch(0.72 0.1469 232);
  --bana-chart-light-8: oklch(0.58 0.15 45);
  --bana-chart-dark-8: oklch(0.72 0.15 45);
  --bana-brand-50: var(--bana-lajvard-50);
  --bana-brand-100: var(--bana-lajvard-100);
  --bana-brand-200: var(--bana-lajvard-200);
  --bana-brand-300: var(--bana-lajvard-300);
  --bana-brand-400: var(--bana-lajvard-400);
  --bana-brand-500: var(--bana-lajvard-500);
  --bana-brand-600: var(--bana-lajvard-600);
  --bana-brand-700: var(--bana-lajvard-700);
  --bana-brand-800: var(--bana-lajvard-800);
  --bana-brand-900: var(--bana-lajvard-900);
  --bana-brand-950: var(--bana-lajvard-950);
}
[data-palette="firuzeh"] {
  --bana-brand-50: var(--bana-firuzeh-50);
  --bana-brand-100: var(--bana-firuzeh-100);
  --bana-brand-200: var(--bana-firuzeh-200);
  --bana-brand-300: var(--bana-firuzeh-300);
  --bana-brand-400: var(--bana-firuzeh-400);
  --bana-brand-500: var(--bana-firuzeh-500);
  --bana-brand-600: var(--bana-firuzeh-600);
  --bana-brand-700: var(--bana-firuzeh-700);
  --bana-brand-800: var(--bana-firuzeh-800);
  --bana-brand-900: var(--bana-firuzeh-900);
  --bana-brand-950: var(--bana-firuzeh-950);
}
[data-palette="zomorrod"] {
  --bana-brand-50: var(--bana-zomorrod-50);
  --bana-brand-100: var(--bana-zomorrod-100);
  --bana-brand-200: var(--bana-zomorrod-200);
  --bana-brand-300: var(--bana-zomorrod-300);
  --bana-brand-400: var(--bana-zomorrod-400);
  --bana-brand-500: var(--bana-zomorrod-500);
  --bana-brand-600: var(--bana-zomorrod-600);
  --bana-brand-700: var(--bana-zomorrod-700);
  --bana-brand-800: var(--bana-zomorrod-800);
  --bana-brand-900: var(--bana-zomorrod-900);
  --bana-brand-950: var(--bana-zomorrod-950);
}
[data-palette="pesteh"] {
  --bana-brand-50: var(--bana-pesteh-50);
  --bana-brand-100: var(--bana-pesteh-100);
  --bana-brand-200: var(--bana-pesteh-200);
  --bana-brand-300: var(--bana-pesteh-300);
  --bana-brand-400: var(--bana-pesteh-400);
  --bana-brand-500: var(--bana-pesteh-500);
  --bana-brand-600: var(--bana-pesteh-600);
  --bana-brand-700: var(--bana-pesteh-700);
  --bana-brand-800: var(--bana-pesteh-800);
  --bana-brand-900: var(--bana-pesteh-900);
  --bana-brand-950: var(--bana-pesteh-950);
}
[data-palette="zaferan"] {
  --bana-brand-50: var(--bana-zaferan-50);
  --bana-brand-100: var(--bana-zaferan-100);
  --bana-brand-200: var(--bana-zaferan-200);
  --bana-brand-300: var(--bana-zaferan-300);
  --bana-brand-400: var(--bana-zaferan-400);
  --bana-brand-500: var(--bana-zaferan-500);
  --bana-brand-600: var(--bana-zaferan-600);
  --bana-brand-700: var(--bana-zaferan-700);
  --bana-brand-800: var(--bana-zaferan-800);
  --bana-brand-900: var(--bana-zaferan-900);
  --bana-brand-950: var(--bana-zaferan-950);
}
[data-palette="narenji"] {
  --bana-brand-50: var(--bana-narenji-50);
  --bana-brand-100: var(--bana-narenji-100);
  --bana-brand-200: var(--bana-narenji-200);
  --bana-brand-300: var(--bana-narenji-300);
  --bana-brand-400: var(--bana-narenji-400);
  --bana-brand-500: var(--bana-narenji-500);
  --bana-brand-600: var(--bana-narenji-600);
  --bana-brand-700: var(--bana-narenji-700);
  --bana-brand-800: var(--bana-narenji-800);
  --bana-brand-900: var(--bana-narenji-900);
  --bana-brand-950: var(--bana-narenji-950);
}
[data-palette="anar"] {
  --bana-brand-50: var(--bana-anar-50);
  --bana-brand-100: var(--bana-anar-100);
  --bana-brand-200: var(--bana-anar-200);
  --bana-brand-300: var(--bana-anar-300);
  --bana-brand-400: var(--bana-anar-400);
  --bana-brand-500: var(--bana-anar-500);
  --bana-brand-600: var(--bana-anar-600);
  --bana-brand-700: var(--bana-anar-700);
  --bana-brand-800: var(--bana-anar-800);
  --bana-brand-900: var(--bana-anar-900);
  --bana-brand-950: var(--bana-anar-950);
}
[data-palette="sadaf"] {
  --bana-brand-50: var(--bana-sadaf-50);
  --bana-brand-100: var(--bana-sadaf-100);
  --bana-brand-200: var(--bana-sadaf-200);
  --bana-brand-300: var(--bana-sadaf-300);
  --bana-brand-400: var(--bana-sadaf-400);
  --bana-brand-500: var(--bana-sadaf-500);
  --bana-brand-600: var(--bana-sadaf-600);
  --bana-brand-700: var(--bana-sadaf-700);
  --bana-brand-800: var(--bana-sadaf-800);
  --bana-brand-900: var(--bana-sadaf-900);
  --bana-brand-950: var(--bana-sadaf-950);
}
[data-palette="banafsh"] {
  --bana-brand-50: var(--bana-banafsh-50);
  --bana-brand-100: var(--bana-banafsh-100);
  --bana-brand-200: var(--bana-banafsh-200);
  --bana-brand-300: var(--bana-banafsh-300);
  --bana-brand-400: var(--bana-banafsh-400);
  --bana-brand-500: var(--bana-banafsh-500);
  --bana-brand-600: var(--bana-banafsh-600);
  --bana-brand-700: var(--bana-banafsh-700);
  --bana-brand-800: var(--bana-banafsh-800);
  --bana-brand-900: var(--bana-banafsh-900);
  --bana-brand-950: var(--bana-banafsh-950);
}
[data-palette="morakkab"] {
  --bana-brand-50: var(--bana-morakkab-50);
  --bana-brand-100: var(--bana-morakkab-100);
  --bana-brand-200: var(--bana-morakkab-200);
  --bana-brand-300: var(--bana-morakkab-300);
  --bana-brand-400: var(--bana-morakkab-400);
  --bana-brand-500: var(--bana-morakkab-500);
  --bana-brand-600: var(--bana-morakkab-600);
  --bana-brand-700: var(--bana-morakkab-700);
  --bana-brand-800: var(--bana-morakkab-800);
  --bana-brand-900: var(--bana-morakkab-900);
  --bana-brand-950: var(--bana-morakkab-950);
}
[data-palette="lajvard"] {
  --bana-brand-50: var(--bana-lajvard-50);
  --bana-brand-100: var(--bana-lajvard-100);
  --bana-brand-200: var(--bana-lajvard-200);
  --bana-brand-300: var(--bana-lajvard-300);
  --bana-brand-400: var(--bana-lajvard-400);
  --bana-brand-500: var(--bana-lajvard-500);
  --bana-brand-600: var(--bana-lajvard-600);
  --bana-brand-700: var(--bana-lajvard-700);
  --bana-brand-800: var(--bana-lajvard-800);
  --bana-brand-900: var(--bana-lajvard-900);
  --bana-brand-950: var(--bana-lajvard-950);
}
}

/* sRGB fallback for browsers without oklch() */
@supports not (color: oklch(0.5 0.1 100)) {
  @layer bana.tokens {
    :root {
      --bana-lajvard-50: #f6f9ff;
      --bana-lajvard-100: #e7f0ff;
      --bana-lajvard-200: #caddff;
      --bana-lajvard-300: #a2c3ff;
      --bana-lajvard-400: #72a2fa;
      --bana-lajvard-500: #4980e9;
      --bana-lajvard-600: #3063c6;
      --bana-lajvard-700: #1f4a9e;
      --bana-lajvard-800: #0e3073;
      --bana-lajvard-900: #041b4b;
      --bana-lajvard-950: #010c2c;
      --bana-firuzeh-50: #f1fcfc;
      --bana-firuzeh-100: #dff5f4;
      --bana-firuzeh-200: #bce6e6;
      --bana-firuzeh-300: #8cd1d1;
      --bana-firuzeh-400: #4fb5b6;
      --bana-firuzeh-500: #009899;
      --bana-firuzeh-600: #00787a;
      --bana-firuzeh-700: #005c5d;
      --bana-firuzeh-800: #003e3f;
      --bana-firuzeh-900: #002526;
      --bana-firuzeh-950: #001314;
      --bana-pesteh-50: #f4fcf3;
      --bana-pesteh-100: #e6f4e4;
      --bana-pesteh-200: #cae6c6;
      --bana-pesteh-300: #a5d0a0;
      --bana-pesteh-400: #7ab573;
      --bana-pesteh-500: #509849;
      --bana-pesteh-600: #357b2f;
      --bana-pesteh-700: #225f1d;
      --bana-pesteh-800: #10410b;
      --bana-pesteh-900: #042702;
      --bana-pesteh-950: #011501;
      --bana-zaferan-50: #fff8f0;
      --bana-zaferan-100: #feecdb;
      --bana-zaferan-200: #f6d6b5;
      --bana-zaferan-300: #eab883;
      --bana-zaferan-400: #d59345;
      --bana-zaferan-500: #b97200;
      --bana-zaferan-600: #935a00;
      --bana-zaferan-700: #714400;
      --bana-zaferan-800: #4d2d00;
      --bana-zaferan-900: #2f1a00;
      --bana-zaferan-950: #1a0c00;
      --bana-anar-50: #fff7f7;
      --bana-anar-100: #ffe9eb;
      --bana-anar-200: #ffced1;
      --bana-anar-300: #ffa6ae;
      --bana-anar-400: #f77284;
      --bana-anar-500: #e23e5f;
      --bana-anar-600: #be1a46;
      --bana-anar-700: #970032;
      --bana-anar-800: #680020;
      --bana-anar-900: #420011;
      --bana-anar-950: #260006;
      --bana-morakkab-50: #f5f9ff;
      --bana-morakkab-100: #eaf0f8;
      --bana-morakkab-200: #d7dde4;
      --bana-morakkab-300: #bdc3ca;
      --bana-morakkab-400: #9ea4ab;
      --bana-morakkab-500: #80858c;
      --bana-morakkab-600: #646970;
      --bana-morakkab-700: #4b5056;
      --bana-morakkab-800: #31363c;
      --bana-morakkab-900: #1b2025;
      --bana-morakkab-950: #0c1015;
      --bana-zomorrod-50: #f2fcf7;
      --bana-zomorrod-100: #e1f5ec;
      --bana-zomorrod-200: #c0e7d7;
      --bana-zomorrod-300: #94d2ba;
      --bana-zomorrod-400: #5eb797;
      --bana-zomorrod-500: #169b77;
      --bana-zomorrod-600: #007c5d;
      --bana-zomorrod-700: #005f46;
      --bana-zomorrod-800: #00402f;
      --bana-zomorrod-900: #00261b;
      --bana-zomorrod-950: #00140c;
      --bana-banafsh-50: #fbf7ff;
      --bana-banafsh-100: #f4ebff;
      --bana-banafsh-200: #e6d3fd;
      --bana-banafsh-300: #d1b3f5;
      --bana-banafsh-400: #b68de5;
      --bana-banafsh-500: #9b67d1;
      --bana-banafsh-600: #7e4caf;
      --bana-banafsh-700: #62368b;
      --bana-banafsh-800: #442064;
      --bana-banafsh-900: #290f40;
      --bana-banafsh-950: #160625;
      --bana-narenji-50: #fff7f4;
      --bana-narenji-100: #ffebe2;
      --bana-narenji-200: #ffd1bc;
      --bana-narenji-300: #faae8a;
      --bana-narenji-400: #e98553;
      --bana-narenji-500: #d35b09;
      --bana-narenji-600: #aa4600;
      --bana-narenji-700: #833400;
      --bana-narenji-800: #5a2200;
      --bana-narenji-900: #381200;
      --bana-narenji-950: #200700;
      --bana-sadaf-50: #fff6fa;
      --bana-sadaf-100: #fee9f1;
      --bana-sadaf-200: #f8d0e0;
      --bana-sadaf-300: #ebaec8;
      --bana-sadaf-400: #d687aa;
      --bana-sadaf-500: #be618d;
      --bana-sadaf-600: #9d4670;
      --bana-sadaf-700: #7c3156;
      --bana-sadaf-800: #571d3a;
      --bana-sadaf-900: #370d23;
      --bana-sadaf-950: #1f0412;
      --bana-ink-50: #f5f9ff;
      --bana-ink-100: #ebf0f7;
      --bana-ink-200: #d8dde4;
      --bana-ink-300: #bec3ca;
      --bana-ink-400: #9fa3aa;
      --bana-ink-450: #8c9197;
      --bana-ink-500: #80858b;
      --bana-ink-600: #65696f;
      --bana-ink-700: #4c5056;
      --bana-ink-800: #32363b;
      --bana-ink-900: #1c2025;
      --bana-ink-950: #0c1014;
      --bana-verdant-50: #f1fdf4;
      --bana-verdant-100: #e0f6e6;
      --bana-verdant-200: #bde9cb;
      --bana-verdant-300: #8fd5a7;
      --bana-verdant-400: #55bb7e;
      --bana-verdant-500: #009e5a;
      --bana-verdant-600: #007e46;
      --bana-verdant-700: #006035;
      --bana-verdant-800: #004122;
      --bana-verdant-900: #002712;
      --bana-verdant-950: #001507;
      --bana-amber-50: #fff8ed;
      --bana-amber-100: #faeed8;
      --bana-amber-200: #f1d9af;
      --bana-amber-300: #e2bd79;
      --bana-amber-400: #cc9a30;
      --bana-amber-500: #aa7c00;
      --bana-amber-600: #876200;
      --bana-amber-700: #684a00;
      --bana-amber-800: #473100;
      --bana-amber-900: #2b1c00;
      --bana-amber-950: #170d00;
      --bana-ember-50: #fff7f6;
      --bana-ember-100: #ffeae7;
      --bana-ember-200: #ffcfc9;
      --bana-ember-300: #ffa89e;
      --bana-ember-400: #f97569;
      --bana-ember-500: #e4423c;
      --bana-ember-600: #bf1f21;
      --bana-ember-700: #980610;
      --bana-ember-800: #6a0006;
      --bana-ember-900: #430002;
      --bana-ember-950: #270001;
      --bana-azure-50: #f3fbff;
      --bana-azure-100: #def3ff;
      --bana-azure-200: #bae3fa;
      --bana-azure-300: #8acdf0;
      --bana-azure-400: #4bafde;
      --bana-azure-500: #0090c3;
      --bana-azure-600: #00729b;
      --bana-azure-700: #005777;
      --bana-azure-800: #003b52;
      --bana-azure-900: #002332;
      --bana-azure-950: #00121c;
      --bana-night-0: #050912;
      --bana-night-1: #0b121d;
      --bana-night-2: #151c28;
      --bana-night-3: #1e2533;
      --bana-night-4: #2a323f;
      --bana-night-5: #3d4451;
      --bana-night-6: #686f7b;
      --bana-white: #ffffff;
      --bana-chart-light-1: #4777d2;
      --bana-chart-dark-1: #71a3ff;
      --bana-chart-light-2: #008c8d;
      --bana-chart-dark-2: #00bcbe;
      --bana-chart-light-3: #a76c00;
      --bana-chart-dark-3: #dd9314;
      --bana-chart-light-4: #c24d5f;
      --bana-chart-dark-4: #f37988;
      --bana-chart-light-5: #3d8f35;
      --bana-chart-dark-5: #69bc61;
      --bana-chart-light-6: #aa55a4;
      --bana-chart-dark-6: #d87fd1;
      --bana-chart-light-7: #0085b4;
      --bana-chart-dark-7: #00b3f0;
      --bana-chart-light-8: #c0571e;
      --bana-chart-dark-8: #f0834e;
    }
  }
}

/* GENERATED by scripts/build-tokens.mjs — do not edit by hand. */
@layer bana.themes {
:root,
[data-theme="light"] {
  color-scheme: light;
  --bana-surface-sunken: var(--bana-ink-100);
  --bana-surface-base: var(--bana-ink-50);
  --bana-surface-raised: var(--bana-white);
  --bana-surface-overlay: var(--bana-white);
  --bana-text-primary: var(--bana-ink-950);
  --bana-text-secondary: var(--bana-ink-700);
  --bana-text-muted: var(--bana-ink-600);
  --bana-text-inverse: var(--bana-ink-50);
  --bana-text-link: var(--bana-brand-700);
  --bana-border-subtle: var(--bana-ink-200);
  --bana-border-default: var(--bana-ink-300);
  --bana-border-control: var(--bana-ink-450);
  --bana-border-strong: var(--bana-ink-500);
  --bana-accent: var(--bana-brand-600);
  --bana-accent-hover: var(--bana-brand-700);
  --bana-accent-active: var(--bana-brand-800);
  --bana-accent-subtle: var(--bana-brand-100);
  --bana-accent-text: var(--bana-brand-700);
  --bana-on-accent: var(--bana-white);
  --bana-focus-ring: var(--bana-brand-600);
  --bana-selection: var(--bana-brand-200);
  --bana-disabled-bg: var(--bana-ink-100);
  --bana-disabled-text: var(--bana-ink-500);
  --bana-scrim: rgb(24 18 48 / 0.5);
  --bana-success: var(--bana-verdant-600);
  --bana-success-hover: var(--bana-verdant-700);
  --bana-success-on: var(--bana-white);
  --bana-success-subtle: var(--bana-verdant-100);
  --bana-success-border: var(--bana-verdant-300);
  --bana-success-text: var(--bana-verdant-800);
  --bana-warning: var(--bana-amber-400);
  --bana-warning-hover: var(--bana-amber-500);
  --bana-warning-on: var(--bana-ink-950);
  --bana-warning-subtle: var(--bana-amber-100);
  --bana-warning-border: var(--bana-amber-300);
  --bana-warning-text: var(--bana-amber-800);
  --bana-danger: var(--bana-ember-600);
  --bana-danger-hover: var(--bana-ember-700);
  --bana-danger-on: var(--bana-white);
  --bana-danger-subtle: var(--bana-ember-100);
  --bana-danger-border: var(--bana-ember-300);
  --bana-danger-text: var(--bana-ember-800);
  --bana-info: var(--bana-azure-600);
  --bana-info-hover: var(--bana-azure-700);
  --bana-info-on: var(--bana-white);
  --bana-info-subtle: var(--bana-azure-100);
  --bana-info-border: var(--bana-azure-300);
  --bana-info-text: var(--bana-azure-800);
  --bana-chart-1: var(--bana-chart-light-1);
  --bana-chart-2: var(--bana-chart-light-2);
  --bana-chart-3: var(--bana-chart-light-3);
  --bana-chart-4: var(--bana-chart-light-4);
  --bana-chart-5: var(--bana-chart-light-5);
  --bana-chart-6: var(--bana-chart-light-6);
  --bana-chart-7: var(--bana-chart-light-7);
  --bana-chart-8: var(--bana-chart-light-8);
  --bana-shadow-xs: 0 1px 2px rgb(30 36 60 / 0.05);
  --bana-shadow-sm: 0 1px 3px rgb(30 36 60 / 0.05), 0 1px 2px -1px rgb(30 36 60 / 0.05);
  --bana-shadow-md: 0 4px 8px -2px rgb(30 36 60 / 0.065), 0 2px 4px -2px rgb(30 36 60 / 0.05);
  --bana-shadow-lg: 0 12px 24px -6px rgb(30 36 60 / 0.085), 0 4px 8px -4px rgb(30 36 60 / 0.065);
  --bana-shadow-xl: 0 24px 48px -12px rgb(30 36 60 / 0.11), 0 8px 16px -8px rgb(30 36 60 / 0.085);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bana-surface-sunken: var(--bana-night-0);
  --bana-surface-base: var(--bana-night-1);
  --bana-surface-raised: var(--bana-night-2);
  --bana-surface-overlay: var(--bana-night-3);
  --bana-text-primary: var(--bana-ink-50);
  --bana-text-secondary: var(--bana-ink-300);
  --bana-text-muted: var(--bana-ink-400);
  --bana-text-inverse: var(--bana-ink-950);
  --bana-text-link: var(--bana-brand-300);
  --bana-border-subtle: var(--bana-night-4);
  --bana-border-default: var(--bana-night-5);
  --bana-border-control: var(--bana-night-6);
  --bana-border-strong: var(--bana-night-6);
  --bana-accent: var(--bana-brand-400);
  --bana-accent-hover: var(--bana-brand-300);
  --bana-accent-active: var(--bana-brand-200);
  --bana-accent-subtle: var(--bana-brand-900);
  --bana-accent-text: var(--bana-brand-300);
  --bana-on-accent: var(--bana-ink-950);
  --bana-focus-ring: var(--bana-brand-300);
  --bana-selection: var(--bana-brand-800);
  --bana-disabled-bg: var(--bana-night-3);
  --bana-disabled-text: var(--bana-night-6);
  --bana-scrim: rgb(0 0 0 / 0.62);
  --bana-success: var(--bana-verdant-400);
  --bana-success-hover: var(--bana-verdant-300);
  --bana-success-on: var(--bana-ink-950);
  --bana-success-subtle: var(--bana-verdant-900);
  --bana-success-border: var(--bana-verdant-700);
  --bana-success-text: var(--bana-verdant-200);
  --bana-warning: var(--bana-amber-400);
  --bana-warning-hover: var(--bana-amber-300);
  --bana-warning-on: var(--bana-ink-950);
  --bana-warning-subtle: var(--bana-amber-900);
  --bana-warning-border: var(--bana-amber-700);
  --bana-warning-text: var(--bana-amber-200);
  --bana-danger: var(--bana-ember-400);
  --bana-danger-hover: var(--bana-ember-300);
  --bana-danger-on: var(--bana-ink-950);
  --bana-danger-subtle: var(--bana-ember-900);
  --bana-danger-border: var(--bana-ember-700);
  --bana-danger-text: var(--bana-ember-200);
  --bana-info: var(--bana-azure-400);
  --bana-info-hover: var(--bana-azure-300);
  --bana-info-on: var(--bana-ink-950);
  --bana-info-subtle: var(--bana-azure-900);
  --bana-info-border: var(--bana-azure-700);
  --bana-info-text: var(--bana-azure-200);
  --bana-chart-1: var(--bana-chart-dark-1);
  --bana-chart-2: var(--bana-chart-dark-2);
  --bana-chart-3: var(--bana-chart-dark-3);
  --bana-chart-4: var(--bana-chart-dark-4);
  --bana-chart-5: var(--bana-chart-dark-5);
  --bana-chart-6: var(--bana-chart-dark-6);
  --bana-chart-7: var(--bana-chart-dark-7);
  --bana-chart-8: var(--bana-chart-dark-8);
  --bana-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
  --bana-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
  --bana-shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --bana-shadow-lg: 0 12px 24px -6px rgb(0 0 0 / 0.5), 0 4px 8px -4px rgb(0 0 0 / 0.4);
  --bana-shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.6), 0 8px 16px -8px rgb(0 0 0 / 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bana-surface-sunken: var(--bana-night-0);
    --bana-surface-base: var(--bana-night-1);
    --bana-surface-raised: var(--bana-night-2);
    --bana-surface-overlay: var(--bana-night-3);
    --bana-text-primary: var(--bana-ink-50);
    --bana-text-secondary: var(--bana-ink-300);
    --bana-text-muted: var(--bana-ink-400);
    --bana-text-inverse: var(--bana-ink-950);
    --bana-text-link: var(--bana-brand-300);
    --bana-border-subtle: var(--bana-night-4);
    --bana-border-default: var(--bana-night-5);
    --bana-border-control: var(--bana-night-6);
    --bana-border-strong: var(--bana-night-6);
    --bana-accent: var(--bana-brand-400);
    --bana-accent-hover: var(--bana-brand-300);
    --bana-accent-active: var(--bana-brand-200);
    --bana-accent-subtle: var(--bana-brand-900);
    --bana-accent-text: var(--bana-brand-300);
    --bana-on-accent: var(--bana-ink-950);
    --bana-focus-ring: var(--bana-brand-300);
    --bana-selection: var(--bana-brand-800);
    --bana-disabled-bg: var(--bana-night-3);
    --bana-disabled-text: var(--bana-night-6);
    --bana-scrim: rgb(0 0 0 / 0.62);
    --bana-success: var(--bana-verdant-400);
    --bana-success-hover: var(--bana-verdant-300);
    --bana-success-on: var(--bana-ink-950);
    --bana-success-subtle: var(--bana-verdant-900);
    --bana-success-border: var(--bana-verdant-700);
    --bana-success-text: var(--bana-verdant-200);
    --bana-warning: var(--bana-amber-400);
    --bana-warning-hover: var(--bana-amber-300);
    --bana-warning-on: var(--bana-ink-950);
    --bana-warning-subtle: var(--bana-amber-900);
    --bana-warning-border: var(--bana-amber-700);
    --bana-warning-text: var(--bana-amber-200);
    --bana-danger: var(--bana-ember-400);
    --bana-danger-hover: var(--bana-ember-300);
    --bana-danger-on: var(--bana-ink-950);
    --bana-danger-subtle: var(--bana-ember-900);
    --bana-danger-border: var(--bana-ember-700);
    --bana-danger-text: var(--bana-ember-200);
    --bana-info: var(--bana-azure-400);
    --bana-info-hover: var(--bana-azure-300);
    --bana-info-on: var(--bana-ink-950);
    --bana-info-subtle: var(--bana-azure-900);
    --bana-info-border: var(--bana-azure-700);
    --bana-info-text: var(--bana-azure-200);
    --bana-chart-1: var(--bana-chart-dark-1);
    --bana-chart-2: var(--bana-chart-dark-2);
    --bana-chart-3: var(--bana-chart-dark-3);
    --bana-chart-4: var(--bana-chart-dark-4);
    --bana-chart-5: var(--bana-chart-dark-5);
    --bana-chart-6: var(--bana-chart-dark-6);
    --bana-chart-7: var(--bana-chart-dark-7);
    --bana-chart-8: var(--bana-chart-dark-8);
    --bana-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
    --bana-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
    --bana-shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --bana-shadow-lg: 0 12px 24px -6px rgb(0 0 0 / 0.5), 0 4px 8px -4px rgb(0 0 0 / 0.4);
    --bana-shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.6), 0 8px 16px -8px rgb(0 0 0 / 0.5);
  }
}

/* data-contrast="more" (or the OS preference) — raises text and border contrast. Root only. */
@media (prefers-contrast: more) {
  :root:root:root:not([data-contrast="off"]) {
    --bana-text-secondary: var(--bana-text-primary);
    --bana-text-muted: var(--bana-text-primary);
    --bana-border-subtle: var(--bana-border-strong);
    --bana-border-default: var(--bana-text-primary);
    --bana-border-strong: var(--bana-text-primary);
    --bana-border-control: var(--bana-text-primary);
  }
}
:root:root:root[data-contrast="more"] {
  --bana-text-secondary: var(--bana-text-primary);
  --bana-text-muted: var(--bana-text-primary);
  --bana-border-subtle: var(--bana-border-strong);
  --bana-border-default: var(--bana-text-primary);
  --bana-border-strong: var(--bana-text-primary);
  --bana-border-control: var(--bana-text-primary);
}
}

@layer bana.reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
  body { min-block-size: 100dvh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
  img, video { block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; }
  button:disabled { cursor: not-allowed; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  a { color: inherit; }
  table { border-collapse: collapse; border-spacing: 0; }
  fieldset { border: 0; padding: 0; min-inline-size: 0; }
  summary { cursor: pointer; }
  [hidden]:not([hidden="until-found"]) { display: none; }
  :target { scroll-margin-block-start: 5rem; }
}

@layer bana.base {
  html {
    font-family: var(--bana-font-sans);
    font-size: 100%;
    line-height: var(--bana-leading-normal);
  }

  /* The page, and any scoped theme region, paints its own surface. */
  body,
  :where([data-theme]):not(:root) {
    background: var(--bana-surface-base);
    color: var(--bana-text-primary);
  }
  :where([data-theme]):not(:root) { color-scheme: inherit; }

  h1, h2, h3, h4, h5, h6 {
    line-height: var(--bana-leading-tight);
    font-weight: var(--bana-weight-semibold);
    text-wrap: balance;
    letter-spacing: -0.01em;
  }
  /* Connected scripts (Persian, Arabic) break when letter-spaced. */
  :where(:lang(fa), :lang(ar), [dir="rtl"]) :is(h1, h2, h3, h4, h5, h6) { letter-spacing: 0; }
  h1 { font-size: var(--bana-text-4xl); }
  h2 { font-size: var(--bana-text-3xl); }
  h3 { font-size: var(--bana-text-2xl); }
  h4 { font-size: var(--bana-text-xl); }
  h5 { font-size: var(--bana-text-lg); }
  h6 { font-size: var(--bana-text-md); }
  p { text-wrap: pretty; }
  small { font-size: var(--bana-text-sm); }
  strong, b { font-weight: var(--bana-weight-semibold); }

  a:not([ui]) {
    color: var(--bana-text-link);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--bana-duration-fast) var(--bana-ease-out);
  }
  a:not([ui]):hover { text-decoration-thickness: 0.14em; }

  :where(code, kbd, samp, pre) { font-family: var(--bana-font-mono); font-size: 0.9em; }
  :where(code):not(pre code) {
    background: var(--bana-surface-sunken);
    border: 1px solid var(--bana-border-subtle);
    border-radius: var(--bana-radius-xs);
    padding: 0.1em 0.4em;
    direction: ltr;
    unicode-bidi: isolate;
  }
  kbd {
    display: inline-block;
    min-inline-size: 1.6em;
    padding: 0.1em 0.45em;
    text-align: center;
    background: var(--bana-surface-raised);
    border: 1px solid var(--bana-border-default);
    border-block-end-width: 2px;
    border-radius: var(--bana-radius-xs);
    font-size: 0.8em;
  }
  hr { border: 0; border-block-start: 1px solid var(--bana-border-subtle); }
  mark { background: var(--bana-warning-subtle); color: var(--bana-warning-text); border-radius: 0.2em; padding-inline: 0.15em; }

  ::selection { background: var(--bana-selection); color: var(--bana-text-primary); }

  /* One consistent, always-visible focus ring (WCAG 2.4.7 / 2.4.11). */
  :focus-visible {
    outline: 2px solid var(--bana-focus-ring);
    outline-offset: 2px;
    border-radius: var(--bana-radius-xs);
  }
  :focus:not(:focus-visible) { outline: none; }

  /* Numbers line up in data. */
  :where(table, [ui~="numeric"]) { font-variant-numeric: tabular-nums; }

  @media (forced-colors: active) {
    :focus-visible { outline-color: Highlight; }
  }
}

@layer bana.layout {
  /* ---------- Container ---------- */
  [ui~="container"] {
    inline-size: min(100% - 2 * var(--bana-gutter), var(--bana-container));
    margin-inline: auto;
  }
  [ui~="container"][ui~="narrow"] { --bana-container: 44rem; }
  [ui~="container"][ui~="wide"] { --bana-container: 90rem; }

  /* ---------- Stack / Cluster ---------- */
  [ui~="stack"] {
    display: flex;
    flex-direction: column;
    gap: var(--bana-gap, var(--bana-space-4));
  }
  [ui~="stack"][ui~="tight"] { --bana-gap: var(--bana-space-2); }
  [ui~="stack"][ui~="loose"] { --bana-gap: var(--bana-space-8); }

  [ui~="cluster"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bana-gap, var(--bana-space-3));
  }
  [ui~="cluster"][ui~="between"] { justify-content: space-between; }
  [ui~="cluster"][ui~="end"] { justify-content: flex-end; }
  [ui~="cluster"][ui~="center"] { justify-content: center; }

  /* ---------- Grid (auto-fit, no breakpoints) ---------- */
  [ui~="grid"] {
    display: grid;
    gap: var(--bana-gap, var(--bana-space-5));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bana-grid-min, 16rem)), 1fr));
  }

  /* ---------- Sidebar layout (intrinsic; collapses without media queries) ---------- */
  [ui~="sidebar-layout"] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bana-gap, var(--bana-space-6));
    align-items: flex-start;
  }
  [ui~="sidebar-layout"] > aside {
    flex: 1 1 var(--bana-sidebar, 16rem);
    max-inline-size: 100%;
  }
  [ui~="sidebar-layout"] > :not(aside) {
    flex: 999 1 0;
    min-inline-size: min(100%, 24rem);
  }

  /* Opt-in container-query region: children can react to the width they are given. */
  [ui~="container-q"] { container-type: inline-size; }

  /* ---------- Visually hidden ---------- */
  [ui~="visually-hidden"]:not(:focus, :active) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* ---------- Prose ---------- */
  [ui~="prose"] {
    max-inline-size: 70ch;
    font-size: var(--bana-text-lg);
    color: var(--bana-text-primary);
  }
  [ui~="prose"] > * + * { margin-block-start: 1.1em; }
  [ui~="prose"] > :is(h2, h3, h4) { margin-block-start: 1.8em; }
  [ui~="prose"] :is(ul, ol) { padding-inline-start: 1.4em; }
  [ui~="prose"] li + li { margin-block-start: 0.4em; }
  [ui~="prose"] li::marker { color: var(--bana-text-muted); }
  [ui~="prose"] blockquote {
    padding-inline-start: 1.1em;
    border-inline-start: 3px solid var(--bana-accent);
    color: var(--bana-text-secondary);
  }
  [ui~="prose"] img { border-radius: var(--bana-radius-md); }
  [ui~="prose"] pre { overflow-x: auto; direction: ltr; text-align: start; }
  [ui~="prose"] table { inline-size: 100%; }
  [ui~="prose"] :is(th, td) { padding: 0.5em 0.75em; border-block-end: 1px solid var(--bana-border-subtle); text-align: start; }

  @media print {
    [ui~="prose"] { max-inline-size: none; font-size: 11pt; color: #000; }
    [ui~="prose"] a { color: inherit; text-decoration: underline; }
    [ui~="prose"] a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
    [ui~="prose"] :is(h2, h3, pre, blockquote, img, table) { break-inside: avoid; }
    [ui~="prose"] :is(h2, h3) { break-after: avoid; }
  }
}

@layer bana.components {
  /* Sizing works even before JavaScript upgrades the element. */
  bana-icon {
    display: inline-block;
    flex: none;
    inline-size: var(--bana-icon-size, 1.25em);
    block-size: var(--bana-icon-size, 1.25em);
    vertical-align: -0.2em;
    color: inherit;
    line-height: 1;

    & > svg {
      inline-size: 100%;
      block-size: 100%;
      fill: none;
      stroke: currentColor;
      stroke-width: var(--bana-icon-stroke, 2);
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    /* variant="solid" fills closed shapes; variant="duo" fills them softly; badge discs (class a) always fill */
    & > svg > path:is(.a, .f) { fill-rule: evenodd; }
    & > svg > path.a, &[variant="solid"] > svg > path.f { fill: currentColor; }
    &[variant="duo"] > svg > path.f { fill: currentColor; fill-opacity: 0.2; }
    /* Direction-aware glyphs mirror in RTL */
    &[data-directional]:dir(rtl) > svg { transform: scaleX(-1); }
  }
}

@layer bana.components {
  /*
   * Button — <button ui="primary">, <a ui="button primary">, <input type="submit" ui="...">
   * Variants set colour variables; modifiers (outline, ghost) re-map them.
   */
  :is(button[ui], a[ui~="button"], input:is([type="button"], [type="submit"], [type="reset"])[ui]) {
    --_bg: var(--bana-surface-raised);
    --_bg-h: var(--bana-surface-sunken);
    --_bg-a: var(--bana-border-subtle);
    --_fg: var(--bana-text-primary);
    --_bd: var(--bana-border-default);
    --_t: var(--bana-text-primary);
    --_s: var(--bana-surface-sunken);
    --_c: var(--bana-border-strong);
    --_h: var(--bana-control-md);
    --_px: var(--bana-space-4);
    --_fs: var(--bana-text-md);
    --_shadow: var(--bana-shadow-xs);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bana-space-2);
    min-block-size: var(--_h);
    padding-inline: var(--_px);
    padding-block: 0;
    border: 1px solid var(--_bd);
    border-radius: var(--bana-radius-md);
    background: var(--_bg);
    color: var(--_fg);
    font-size: var(--_fs);
    font-weight: var(--bana-weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    box-shadow: var(--_shadow);
    transition:
      background-color var(--bana-duration-fast) var(--bana-ease-out),
      border-color var(--bana-duration-fast) var(--bana-ease-out),
      box-shadow var(--bana-duration-base) var(--bana-ease-out),
      transform var(--bana-duration-fast) var(--bana-ease-out);

    &:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
      background: var(--_bg-h);
      box-shadow: var(--bana-shadow-sm);
    }
    &:active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
      background: var(--_bg-a);
      transform: translateY(1px) scale(0.985);
      box-shadow: none;
    }

    /* ---- variants ---- */
    &[ui~="primary"] {
      --_bg: var(--bana-accent); --_bg-h: var(--bana-accent-hover); --_bg-a: var(--bana-accent-active);
      --_fg: var(--bana-on-accent); --_bd: transparent;
      --_t: var(--bana-accent-text); --_s: var(--bana-accent-subtle); --_c: var(--bana-accent);
      box-shadow: var(--bana-shadow-sm), inset 0 1px 0 oklch(1 0 0 / 0.16);
    }
    &[ui~="success"] {
      --_bg: var(--bana-success); --_bg-h: var(--bana-success-hover); --_bg-a: var(--bana-success-hover);
      --_fg: var(--bana-success-on); --_bd: transparent;
      --_t: var(--bana-success-text); --_s: var(--bana-success-subtle); --_c: var(--bana-success);
    }
    &[ui~="warning"] {
      --_bg: var(--bana-warning); --_bg-h: var(--bana-warning-hover); --_bg-a: var(--bana-warning-hover);
      --_fg: var(--bana-warning-on); --_bd: transparent;
      --_t: var(--bana-warning-text); --_s: var(--bana-warning-subtle); --_c: var(--bana-warning);
    }
    &[ui~="danger"] {
      --_bg: var(--bana-danger); --_bg-h: var(--bana-danger-hover); --_bg-a: var(--bana-danger-hover);
      --_fg: var(--bana-danger-on); --_bd: transparent;
      --_t: var(--bana-danger-text); --_s: var(--bana-danger-subtle); --_c: var(--bana-danger);
    }

    /* ---- style modifiers ---- */
    &[ui~="outline"] {
      --_bg: transparent; --_fg: var(--_t); --_bd: var(--_c); --_bg-h: var(--_s);
      --_bg-a: color-mix(in oklab, var(--_s), var(--_c) 18%);
      --_shadow: none;
      box-shadow: none;
    }
    &[ui~="ghost"] {
      --_bg: transparent; --_fg: var(--_t); --_bd: transparent; --_bg-h: var(--_s);
      --_bg-a: color-mix(in oklab, var(--_s), var(--_c) 18%);
      --_shadow: none;
      box-shadow: none;
    }

    /* ---- sizes ---- */
    &[ui~="small"] { --_h: var(--bana-control-sm); --_px: var(--bana-space-3); --_fs: var(--bana-text-sm); border-radius: var(--bana-radius-sm); }
    &[ui~="large"] { --_h: var(--bana-control-lg); --_px: var(--bana-space-6); --_fs: var(--bana-text-lg); border-radius: var(--bana-radius-lg); }
    &[ui~="block"] { display: flex; inline-size: 100%; }

    /* ---- icon-only (needs an accessible name: aria-label or visually hidden text) ---- */
    &[ui~="icon"] {
      inline-size: var(--_h);
      padding-inline: 0;
      --_bg: transparent; --_bd: transparent; --_shadow: none;
      box-shadow: none;
    }
    &[ui~="icon"][ui~="small"] { inline-size: var(--bana-control-sm); }
    &[ui~="icon"][ui~="large"] { inline-size: var(--bana-control-lg); }

    /* ---- states ---- */
    &[aria-busy="true"] { cursor: progress; opacity: 0.85; }
    &[aria-busy="true"]::before {
      content: "";
      inline-size: 1em;
      block-size: 1em;
      flex: none;
      border: 2px solid currentColor;
      border-inline-end-color: transparent;
      border-radius: 50%;
      animation: bana-spin 0.7s linear infinite;
    }
    &:disabled, &[aria-disabled="true"] {
      --_bg: var(--bana-disabled-bg); --_fg: var(--bana-disabled-text); --_bd: transparent;
      cursor: not-allowed;
      box-shadow: none;
      transform: none;
    }
    &[ui~="ghost"]:disabled, &[ui~="icon"]:disabled { --_bg: transparent; }
    &[ui~="outline"]:disabled { --_bd: var(--bana-border-default); --_bg: transparent; }

    @media (forced-colors: active) {
      border: 1px solid ButtonText;
      &:disabled, &[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
    }
  }

  /* Animations live outside the nested rule. Reduced motion → slow, not removed (it carries meaning). */
  @keyframes bana-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    :is(button, a)[aria-busy="true"]::before { animation-duration: 2.4s; }
  }

  /* Grouped buttons */
  [ui~="button-group"] {
    display: inline-flex;
    & > :is(button[ui], a[ui~="button"]) { border-radius: 0; }
    & > :first-child { border-start-start-radius: var(--bana-radius-md); border-end-start-radius: var(--bana-radius-md); }
    & > :last-child { border-start-end-radius: var(--bana-radius-md); border-end-end-radius: var(--bana-radius-md); }
    & > :not(:first-child) { margin-inline-start: -1px; }
    & > :is(:hover, :focus-visible) { z-index: 1; position: relative; }
  }
}

@layer bana.components {
  /* ------------------------------------------------------------------ *
   * Field — <label ui="field"> or <div ui="field"><label for>…</div>
   * ------------------------------------------------------------------ */
  :is(label, div, fieldset)[ui~="field"] {
    display: grid;
    gap: var(--bana-space-2);
    align-content: start;
    min-inline-size: 0;

    & > :is(span, legend, label):first-child {
      font-size: var(--bana-text-sm);
      font-weight: var(--bana-weight-medium);
      color: var(--bana-text-primary);
    }
    /* Required marker without relying on colour alone */
    &:has(:is(input, textarea, select)[required]) > :is(span, label):first-child::after {
      content: " *";
      color: var(--bana-danger-text);
    }
    & > small {
      font-size: var(--bana-text-xs);
      color: var(--bana-text-muted);
      line-height: var(--bana-leading-snug);
    }
    & > small[ui~="error"] {
      display: flex;
      &[hidden] { display: none; }
      gap: var(--bana-space-2);
      align-items: flex-start;
      color: var(--bana-danger-text);
      font-weight: var(--bana-weight-medium);
      &::before {
        content: "!";
        flex: none;
        display: inline-grid;
        place-items: center;
        inline-size: 1.15em;
        block-size: 1.15em;
        border-radius: 50%;
        background: var(--bana-danger-text);
        color: var(--bana-surface-raised);
        font-size: 0.85em;
        font-weight: var(--bana-weight-bold);
        line-height: 1;
      }
    }
    & > small[ui~="success"] { color: var(--bana-success-text); font-weight: var(--bana-weight-medium); }
  }

  /* ------------------------------------------------------------------ *
   * Text-like controls
   * ------------------------------------------------------------------ */
  :is(
    [ui~="field"] input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"], [type="button"], [type="submit"], [type="reset"], [type="image"])),
    [ui~="field"] textarea,
    [ui~="field"] select,
    :is(input, textarea, select)[ui~="input"]
  ) {
    --_bd: var(--bana-border-control);
    inline-size: 100%;
    min-block-size: var(--bana-control-md);
    padding: 0 var(--bana-space-3);
    background: var(--bana-surface-raised);
    color: var(--bana-text-primary);
    border: 1px solid var(--_bd);
    border-radius: var(--bana-radius-md);
    font-size: var(--bana-text-md);
    line-height: 1.4;
    box-shadow: var(--bana-shadow-xs);
    transition: border-color var(--bana-duration-fast) var(--bana-ease-out), box-shadow var(--bana-duration-base) var(--bana-ease-out), background-color var(--bana-duration-fast);

    /* Persian typed → right-aligned, Latin typed (emails, URLs) → left-aligned, per input. */
    unicode-bidi: plaintext;
    text-align: start;
    &::placeholder { color: var(--bana-text-muted); opacity: 1; }
    &:hover:not(:disabled, :read-only) { --_bd: var(--bana-border-strong); }
    &:focus-visible {
      --_bd: var(--bana-focus-ring);
      outline: 2px solid transparent; /* stays visible in forced-colors mode */
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--bana-focus-ring) 24%, transparent);
    }
    &:read-only:not(select) { background: var(--bana-surface-sunken); }
    &:read-only:not(select, :focus-visible) { box-shadow: none; }
    &:disabled { background: var(--bana-disabled-bg); color: var(--bana-disabled-text); border-color: var(--bana-border-subtle); box-shadow: none; cursor: not-allowed; }
    &[aria-invalid="true"], &:user-invalid { --_bd: var(--bana-danger); border-width: 1px; box-shadow: 0 0 0 1px var(--bana-danger); }
    &[ui~="success"] { --_bd: var(--bana-success); box-shadow: 0 0 0 1px var(--bana-success); }
    &[ui~="small"] { min-block-size: var(--bana-control-sm); font-size: var(--bana-text-sm); border-radius: var(--bana-radius-sm); }
    &[ui~="large"] { min-block-size: var(--bana-control-lg); font-size: var(--bana-text-lg); border-radius: var(--bana-radius-lg); }

    /* Browser autofill: keep it on-brand instead of bright yellow */
    &:-webkit-autofill {
      -webkit-text-fill-color: var(--bana-text-primary);
      box-shadow: inset 0 0 0 100px var(--bana-accent-subtle);
      caret-color: var(--bana-text-primary);
    }
  }

  :is([ui~="field"] textarea, textarea[ui~="input"]) {
    padding-block: var(--bana-space-3);
    min-block-size: 6.5rem;
    resize: block;
    field-sizing: content;
  }

  /* Select: native control, custom chevron drawn with gradients (no data-URIs, CSP friendly) */
  :is([ui~="field"] select, select[ui~="input"]) {
    appearance: none;
    padding-inline-end: var(--bana-space-10);
    /* a thin chevron: two 1.5px diagonal strokes meeting at the bottom point */
    background-image:
      linear-gradient(to top right, transparent calc(50% - 0.75px), var(--bana-text-muted) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
      linear-gradient(to top left, transparent calc(50% - 0.75px), var(--bana-text-muted) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px));
    background-size: 0.38rem 0.38rem, 0.38rem 0.38rem;
    background-repeat: no-repeat;
    background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.77rem) 50%;
    &:dir(rtl) { background-position: 0.77rem 50%, 1.15rem 50%; }
    &[multiple] { background-image: none; padding-block: var(--bana-space-2); }
  }

  /* ------------------------------------------------------------------ *
   * Input group — prefix / suffix / icons around one input
   * ------------------------------------------------------------------ */
  [ui~="input-group"] {
    display: flex;
    align-items: center;
    min-block-size: var(--bana-control-md);
    background: var(--bana-surface-raised);
    border: 1px solid var(--bana-border-control);
    border-radius: var(--bana-radius-md);
    box-shadow: var(--bana-shadow-xs);
    color: var(--bana-text-muted);
    transition: border-color var(--bana-duration-fast), box-shadow var(--bana-duration-base);

    &:hover:not(:has(:disabled)) { border-color: var(--bana-border-strong); }
    &:has(:focus-visible) { border-color: var(--bana-focus-ring); outline: 2px solid transparent; box-shadow: 0 0 0 3px color-mix(in oklab, var(--bana-focus-ring) 24%, transparent); }
    &:has([aria-invalid="true"]) { border-color: var(--bana-danger); box-shadow: 0 0 0 1px var(--bana-danger); }
    &:has(:disabled) { background: var(--bana-disabled-bg); }

    & > :is(span, bana-icon, button) { flex: none; padding-inline: var(--bana-space-3); }
    & > bana-icon { padding: 0; margin-inline: var(--bana-space-3); }
    & > span { font-size: var(--bana-text-sm); white-space: nowrap; }
    & > :is(span:first-child) { border-inline-end: 1px solid var(--bana-border-subtle); }
    & > :is(span:last-child) { border-inline-start: 1px solid var(--bana-border-subtle); }
  }
  [ui~="input-group"][ui~="input-group"] > input {
    flex: 1;
    min-inline-size: 0;
    min-block-size: calc(var(--bana-control-md) - 2px);
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    padding-inline: var(--bana-space-3);
    color: var(--bana-text-primary);
    border-radius: inherit;
    &:focus-visible { outline: 0; box-shadow: none; }
  }

  /* ------------------------------------------------------------------ *
   * Checkbox / Radio / Switch — <label ui="check"><input …><span>Text</span></label>
   * ------------------------------------------------------------------ */
  label[ui~="check"] {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--bana-space-3);
    cursor: pointer;
    min-block-size: 1.5rem;
    line-height: 1.5;
    &:has(:disabled) { cursor: not-allowed; color: var(--bana-disabled-text); }
  }

  label[ui~="check"] input:is([type="checkbox"], [type="radio"]) {
    appearance: none;
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin: 0.125rem 0 0;
    display: inline-grid;
    place-content: center;
    background: var(--bana-surface-raised);
    border: 1.25px solid var(--bana-border-control);
    border-radius: var(--bana-radius-xs);
    cursor: inherit;
    transition: background-color var(--bana-duration-fast) var(--bana-ease-out), border-color var(--bana-duration-fast), transform var(--bana-duration-fast) var(--bana-ease-spring);

    &::before {
      content: "";
      inline-size: 0.8rem;
      block-size: 0.8rem;
      background: var(--bana-on-accent);
      transform: scale(0);
      transition: transform var(--bana-duration-base) var(--bana-ease-spring);
    }
    &:hover:not(:disabled) { border-color: var(--bana-accent); }
    &:checked, &:indeterminate { background: var(--bana-accent); border-color: var(--bana-accent); }
    &:checked::before, &:indeterminate::before { transform: scale(1); }
    &:active:not(:disabled) { transform: scale(0.92); }
    &:focus-visible { outline: 2px solid var(--bana-focus-ring); outline-offset: 2px; }
    &:disabled { background: var(--bana-disabled-bg); border-color: var(--bana-border-default); }
    &:disabled:checked { background: var(--bana-border-default); }
    &[aria-invalid="true"] { border-color: var(--bana-danger); }
  }
  label[ui~="check"] input[type="checkbox"]:not([role="switch"]) {
    &::before { clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
    &:indeterminate::before { clip-path: polygon(10% 40%, 90% 40%, 90% 60%, 10% 60%); }
  }
  label[ui~="check"] input[type="radio"] {
    border-radius: 50%;
    &::before { border-radius: 50%; inline-size: 0.5rem; block-size: 0.5rem; }
  }

  /* Switch: <input type="checkbox" role="switch"> */
  label[ui~="check"] input[type="checkbox"][role="switch"] {
    position: relative;
    inline-size: 2.75rem;
    block-size: 1.5rem;
    border-radius: var(--bana-radius-full);
    background: var(--bana-border-control);
    border-color: transparent;
    display: block;

    &::before {
      content: "";
      position: absolute;
      inset-block-start: 0.1875rem;
      inset-inline-start: 0.1875rem;
      inline-size: 1.125rem;
      block-size: 1.125rem;
      border-radius: 50%;
      background: var(--bana-surface-raised);
      box-shadow: var(--bana-shadow-sm);
      transform: none;
      clip-path: none;
      transition: inset-inline-start var(--bana-duration-base) var(--bana-ease-spring);
    }
    &:checked { background: var(--bana-accent); border-color: transparent; }
    &:checked::before { inset-inline-start: calc(100% - 1.125rem - 0.1875rem); transform: none; background: var(--bana-on-accent); }
    &:disabled::before { background: var(--bana-disabled-bg); }
    @media (forced-colors: active) { border: 1px solid ButtonText; &:checked { background: Highlight; } }
  }

  label[ui~="check"] > small, label[ui~="check"] > span > small { display: block; color: var(--bana-text-muted); font-size: var(--bana-text-sm); }

  /* ------------------------------------------------------------------ *
   * Range — native control, themed through accent-color
   * ------------------------------------------------------------------ */
  [ui~="field"] input[type="range"] {
    inline-size: 100%;
    block-size: 1.75rem;
    accent-color: var(--bana-accent);
    cursor: pointer;
    &:disabled { cursor: not-allowed; opacity: 0.5; }
  }

  /* ------------------------------------------------------------------ *
   * File input — styling only. accept / size checks are UX, NOT security.
   * ------------------------------------------------------------------ */
  [ui~="field"] input[type="file"] {
    inline-size: 100%;
    padding: var(--bana-space-2);
    background: var(--bana-surface-raised);
    color: var(--bana-text-secondary);
    border: 1px dashed var(--bana-border-control);
    border-radius: var(--bana-radius-md);
    font-size: var(--bana-text-sm);
    cursor: pointer;
    transition: border-color var(--bana-duration-fast), background-color var(--bana-duration-fast);
    &:hover { border-color: var(--bana-accent); background: var(--bana-accent-subtle); }
    &::file-selector-button {
      margin-inline-end: var(--bana-space-3);
      min-block-size: var(--bana-control-sm);
      padding-inline: var(--bana-space-4);
      background: var(--bana-accent);
      color: var(--bana-on-accent);
      border: 0;
      border-radius: var(--bana-radius-sm);
      font-weight: var(--bana-weight-semibold);
      cursor: pointer;
    }
    &:focus-visible { outline: 2px solid var(--bana-focus-ring); outline-offset: 2px; }
  }

  /* Fieldset / legend groups of checks or radios */
  fieldset[ui~="field"] > legend { padding: 0; margin-block-end: var(--bana-space-2); }
  [ui~="field"] [ui~="options"] { display: grid; gap: var(--bana-space-3); }

  /* [hidden] must win over the field's own display rule (used by Schema `when` and by app code). */
  :is(label, div, fieldset)[ui~="field"][hidden], [ui~="check"][hidden], [ui~="upload"][hidden] { display: none; }
}

@layer bana.components {
  /* ---------------------------- Card ---------------------------- */
  [ui~="card"] {
    display: flex;
    flex-direction: column;
    gap: var(--bana-space-4);
    padding: var(--bana-space-6);
    background: var(--bana-surface-raised);
    color: var(--bana-text-primary);
    border: 1px solid var(--bana-border-subtle);
    border-radius: var(--bana-radius-lg);
    box-shadow: var(--bana-shadow-sm);
    min-inline-size: 0;

    & > header { display: grid; gap: var(--bana-space-1); }
    & > header :is(h2, h3, h4) { font-size: var(--bana-text-xl); }
    & > header p { color: var(--bana-text-secondary); font-size: var(--bana-text-sm); }
    & > footer {
      display: flex;
      flex-wrap: wrap;
      gap: var(--bana-space-3);
      align-items: center;
      margin-block-start: auto;
      padding-block-start: var(--bana-space-4);
      border-block-start: 1px solid var(--bana-border-subtle);
    }
    & > img:first-child { margin: calc(-1 * var(--bana-space-6)) calc(-1 * var(--bana-space-6)) 0; max-inline-size: none; inline-size: calc(100% + 2 * var(--bana-space-6)); border-start-start-radius: inherit; border-start-end-radius: inherit; }

    &[ui~="flat"] { box-shadow: none; }
    &[ui~="sunken"] { background: var(--bana-surface-sunken); box-shadow: none; }
    &[ui~="interactive"] {
      transition: transform var(--bana-duration-base) var(--bana-ease-out), box-shadow var(--bana-duration-base) var(--bana-ease-out), border-color var(--bana-duration-fast);
      &:hover { transform: translateY(-2px); box-shadow: var(--bana-shadow-lg); border-color: var(--bana-border-default); }
    }
  }
  /* Container-query layout: place a card inside <div ui="container-q"> */
  @container (min-width: 36rem) {
    [ui~="card"][ui~="split"] { flex-direction: row; align-items: center; }
    [ui~="card"][ui~="split"] > header { flex: 1; }
  }

  /* ---------------------------- Badge ---------------------------- */
  [ui~="badge"] {
    --_bg: var(--bana-surface-sunken); --_fg: var(--bana-text-secondary); --_bd: transparent;
    display: inline-flex;
    align-items: center;
    gap: var(--bana-space-1);
    padding: 0.1rem 0.6rem;
    background: var(--_bg);
    color: var(--_fg);
    border: 1px solid var(--_bd);
    border-radius: var(--bana-radius-full);
    font-size: var(--bana-text-xs);
    font-weight: var(--bana-weight-medium);
    line-height: 1.6;
    white-space: nowrap;
    &[ui~="accent"] { --_bg: var(--bana-accent-subtle); --_fg: var(--bana-accent-text); --_bd: transparent; }
    &[ui~="success"] { --_bg: var(--bana-success-subtle); --_fg: var(--bana-success-text); --_bd: transparent; }
    &[ui~="warning"] { --_bg: var(--bana-warning-subtle); --_fg: var(--bana-warning-text); --_bd: transparent; }
    &[ui~="danger"] { --_bg: var(--bana-danger-subtle); --_fg: var(--bana-danger-text); --_bd: transparent; }
    &[ui~="info"] { --_bg: var(--bana-info-subtle); --_fg: var(--bana-info-text); --_bd: var(--bana-info-border); }
    &[ui~="dot"]::before { content: ""; inline-size: 0.5em; block-size: 0.5em; border-radius: 50%; background: currentColor; }
  }

  /* ---------------------------- Avatar ---------------------------- */
  [ui~="avatar"] {
    --_size: 2.5rem;
    display: inline-grid;
    place-items: center;
    inline-size: var(--_size);
    block-size: var(--_size);
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bana-accent-subtle);
    color: var(--bana-accent-text);
    font-size: calc(var(--_size) * 0.38);
    font-weight: var(--bana-weight-bold);
    box-shadow: 0 0 0 2px var(--bana-surface-raised);
    user-select: none;
    & > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
    &[ui~="small"] { --_size: 1.75rem; }
    &[ui~="large"] { --_size: 3.5rem; }
  }
  [ui~="avatar-group"] { display: inline-flex; & > [ui~="avatar"] + [ui~="avatar"] { margin-inline-start: -0.6rem; } }

  /* ---------------------------- Alert ---------------------------- */
  /* Use role="alert" for danger/warning, role="status" for info/success. */
  [ui~="alert"] {
    --_bg: var(--bana-info-subtle); --_fg: var(--bana-info-text); --_bd: var(--bana-info-border); --_bar: var(--bana-info);
    display: flex;
    gap: var(--bana-space-3);
    align-items: flex-start;
    padding: var(--bana-space-4);
    background: var(--_bg);
    color: var(--_fg);
    border: 1px solid var(--_bd);
    border-inline-start: 4px solid var(--_bar);
    border-radius: var(--bana-radius-md);
    line-height: var(--bana-leading-snug);
    & > bana-icon { flex: none; margin-block-start: 0.1em; }
    & > div { display: grid; gap: var(--bana-space-1); min-inline-size: 0; }
    & strong { font-weight: var(--bana-weight-bold); }
    &[ui~="success"] { --_bg: var(--bana-success-subtle); --_fg: var(--bana-success-text); --_bd: var(--bana-success-border); --_bar: var(--bana-success); }
    &[ui~="warning"] { --_bg: var(--bana-warning-subtle); --_fg: var(--bana-warning-text); --_bd: var(--bana-warning-border); --_bar: var(--bana-warning); }
    &[ui~="danger"] { --_bg: var(--bana-danger-subtle); --_fg: var(--bana-danger-text); --_bd: var(--bana-danger-border); --_bar: var(--bana-danger); }
  }

  /* ---------------------------- Divider ---------------------------- */
  hr[ui~="divider"] { border: 0; border-block-start: 1px solid var(--bana-border-subtle); margin-block: var(--bana-space-4); }
  div[ui~="divider"] {
    display: flex;
    align-items: center;
    gap: var(--bana-space-4);
    color: var(--bana-text-muted);
    font-size: var(--bana-text-sm);
    &::before, &::after { content: ""; flex: 1; border-block-start: 1px solid var(--bana-border-subtle); }
  }

  /* ---------------------------- Spinner ---------------------------- */
  [ui~="spinner"] {
    display: inline-block;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border: 3px solid var(--bana-border-default);
    border-block-start-color: var(--bana-accent);
    border-radius: 50%;
    animation: bana-spin 0.8s linear infinite;
    &[ui~="small"] { inline-size: 1rem; block-size: 1rem; border-width: 2px; }
    &[ui~="large"] { inline-size: 2.5rem; block-size: 2.5rem; border-width: 4px; }
  }
  @media (prefers-reduced-motion: reduce) { [ui~="spinner"] { animation-duration: 2.4s; } }

  /* ---------------------------- Progress ---------------------------- */
  progress[ui~="progress"] {
    appearance: none;
    inline-size: 100%;
    block-size: 0.375rem;
    border: 0;
    border-radius: var(--bana-radius-full);
    background: var(--bana-border-subtle);
    box-shadow: none;
    overflow: hidden;
    &::-webkit-progress-bar { background: transparent; }
    &::-webkit-progress-value { background: var(--bana-accent); border-radius: inherit; transition: inline-size var(--bana-duration-slow) var(--bana-ease-out); }
    &::-moz-progress-bar { background: var(--bana-accent); border-radius: inherit; }
    &[ui~="success"]::-webkit-progress-value { background: var(--bana-success); }
    &[ui~="success"]::-moz-progress-bar { background: var(--bana-success); }
    &[ui~="danger"]::-webkit-progress-value { background: var(--bana-danger); }
    &[ui~="danger"]::-moz-progress-bar { background: var(--bana-danger); }
    &[ui~="large"] { block-size: 0.875rem; }
  }

  /* ---------------------------- Skeleton ---------------------------- */
  /* Mark placeholders aria-hidden="true" and put aria-busy="true" on the loading region. */
  [ui~="skeleton"] {
    display: block;
    min-block-size: 1em;
    border-radius: var(--bana-radius-sm);
    background: linear-gradient(90deg, var(--bana-surface-sunken) 25%, var(--bana-border-subtle) 50%, var(--bana-surface-sunken) 75%);
    background-size: 300% 100%;
    animation: bana-shimmer 1.6s ease-in-out infinite;
    &[ui~="text"] { block-size: 1em; inline-size: 100%; }
    &[ui~="circle"] { border-radius: 50%; inline-size: 2.5rem; block-size: 2.5rem; }
    &[ui~="block"] { block-size: 8rem; }
  }
  @keyframes bana-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
  @media (prefers-reduced-motion: reduce) { [ui~="skeleton"] { animation: none; background: var(--bana-surface-sunken); } }

  /* ---------------------------- Empty state ---------------------------- */
  [ui~="empty"] {
    display: grid;
    justify-items: center;
    gap: var(--bana-space-3);
    padding: var(--bana-space-12) var(--bana-space-6);
    text-align: center;
    color: var(--bana-text-secondary);
    border: 1px dashed var(--bana-border-default);
    border-radius: var(--bana-radius-lg);
    & > bana-icon { --bana-icon-size: 2.5rem; color: var(--bana-text-muted); }
    & > :is(h2, h3, h4) { color: var(--bana-text-primary); font-size: var(--bana-text-xl); }
    & > p { max-inline-size: 38ch; }
  }

  /* ---------------------------- Table ---------------------------- */
  [ui~="table-wrap"] {
    position: relative; /* contains visually-hidden cells */
    overflow-x: auto;
    border: 1px solid var(--bana-border-subtle);
    border-radius: var(--bana-radius-lg);
    background: var(--bana-surface-raised);
    box-shadow: var(--bana-shadow-xs);
  }
  table[ui~="table"] {
    inline-size: 100%;
    font-size: var(--bana-text-sm);
    font-variant-numeric: tabular-nums;
    & caption { padding: var(--bana-space-3) var(--bana-space-4); text-align: start; font-weight: var(--bana-weight-medium); color: var(--bana-text-secondary); caption-side: top; }
    & :is(th, td) { padding: var(--bana-space-3) var(--bana-space-4); text-align: start; vertical-align: middle; }
    & thead th {
      background: color-mix(in oklab, var(--bana-surface-sunken) 70%, var(--bana-surface-raised));
      color: var(--bana-text-secondary);
      font-weight: var(--bana-weight-medium);
      font-size: var(--bana-text-xs);
      border-block-end: 1px solid var(--bana-border-subtle);
      white-space: nowrap;
    }
    & tbody tr + tr :is(th, td) { border-block-start: 1px solid var(--bana-border-subtle); }
    & tbody th { font-weight: var(--bana-weight-semibold); }
    &[ui~="hover"] tbody tr:hover { background: var(--bana-accent-subtle); }
    &[ui~="striped"] tbody tr:nth-child(even) { background: color-mix(in oklab, var(--bana-surface-sunken) 60%, transparent); }
    & :is(td, th)[ui~="end"] { text-align: end; }
  }

  /* ---------------------------- Code block ---------------------------- */
  pre[ui~="code"] {
    direction: ltr;
    text-align: left;
    overflow-x: auto;
    padding: var(--bana-space-4);
    background: var(--bana-surface-sunken);
    color: var(--bana-text-primary);
    border: 1px solid var(--bana-border-subtle);
    border-radius: var(--bana-radius-md);
    font-size: var(--bana-text-sm);
    line-height: 1.6;
    tab-size: 2;
    & code { background: none; border: 0; padding: 0; font-size: inherit; }
  }
}

@layer bana.components {
  /* ---------------------------- Data table ---------------------------- */
  /* Wrapper for <table ui="table"> enhanced by the table module. Works unstyled-friendly without JS. */
  [ui~="data-table"] {
    display: grid;
    gap: var(--bana-space-3);
    min-inline-size: 0;
    & > [data-toolbar], & > :is(label, div)[ui~="field"]:first-child { max-inline-size: 22rem; }
    & > [ui~="table-wrap"] { min-inline-size: 0; }
    & th[data-sort] { padding: 0; }
    & th[data-sort] > button {
      display: flex;
      align-items: center;
      gap: var(--bana-space-2);
      inline-size: 100%;
      min-block-size: 2.75rem;
      padding: var(--bana-space-3) var(--bana-space-4);
      background: none;
      border: 0;
      border-radius: 0;
      color: inherit;
      font: inherit;
      text-align: start;
      cursor: pointer;
      transition: background-color var(--bana-duration-fast), color var(--bana-duration-fast);
      &:hover { background: var(--bana-accent-subtle); color: var(--bana-accent-text); }
      &:focus-visible { outline-offset: -2px; }
      /* sort indicator: up/down chevrons (inactive), a single arrow when sorted. Painted with a mask so it follows currentColor. */
      &::after {
        content: "";
        flex: none;
        inline-size: 0.875rem;
        block-size: 0.875rem;
        margin-inline-start: auto;
        background: currentColor;
        opacity: 0.4;
        -webkit-mask: var(--_sort) center / contain no-repeat;
        mask: var(--_sort) center / contain no-repeat;
        --_sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5 8 3l3.5 3.5M4.5 9.5 8 13l3.5-3.5'/%3E%3C/svg%3E");
      }
    }
    & th[aria-sort="ascending"] > button, & th[aria-sort="descending"] > button { color: var(--bana-accent-text); &::after { opacity: 1; } }
    & th[aria-sort="ascending"] > button::after { --_sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13V3M4 7l4-4 4 4'/%3E%3C/svg%3E"); }
    & th[aria-sort="descending"] > button::after { --_sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v10M4 9l4 4 4-4'/%3E%3C/svg%3E"); }
    & [data-table-empty] td { padding-block: var(--bana-space-8); text-align: center; color: var(--bana-text-muted); }
    & [data-table-foot] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bana-space-3); }
    & [data-table-status] { margin: 0; font-size: var(--bana-text-sm); color: var(--bana-text-secondary); }
    & [ui~="pagination"][hidden] { display: none; }
    & [ui~="pagination"] ul { justify-content: flex-end; }
  }
}

@layer bana.components {
  /* Lock page scroll while a modal dialog is open — CSS only. */
  :root:has(dialog[open]:modal) { overflow: hidden; scrollbar-gutter: stable; }

  /* ---------------------------- Modal dialog ---------------------------- */
  dialog[ui~="modal"] {
    inline-size: min(34rem, calc(100vw - 2rem));
    max-block-size: min(40rem, calc(100dvh - 2rem));
    margin: auto;
    padding: var(--bana-space-6);
    overflow: auto;
    overscroll-behavior: contain;
    color: var(--bana-text-primary);
    background: var(--bana-surface-overlay);
    border: 1px solid var(--bana-border-subtle);
    border-radius: var(--bana-radius-xl);
    box-shadow: var(--bana-shadow-xl);

    /* enter / exit — works with display:none ↔ block thanks to allow-discrete */
    opacity: 0;
    transform: translateY(0.75rem) scale(0.97);
    transition:
      opacity var(--bana-duration-base) var(--bana-ease-out),
      transform var(--bana-duration-base) var(--bana-ease-spring),
      overlay var(--bana-duration-base) allow-discrete,
      display var(--bana-duration-base) allow-discrete;

    &[open] { opacity: 1; transform: none; }
    @starting-style { &[open] { opacity: 0; transform: translateY(0.75rem) scale(0.97); } }

    &::backdrop {
      background: var(--bana-scrim);
      backdrop-filter: blur(4px);
      opacity: 0;
      transition: opacity var(--bana-duration-base) var(--bana-ease-out), overlay var(--bana-duration-base) allow-discrete, display var(--bana-duration-base) allow-discrete;
    }
    &[open]::backdrop { opacity: 1; }
    @starting-style { &[open]::backdrop { opacity: 0; } }

    & > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bana-space-4); margin-block-end: var(--bana-space-3); }
    & > header :is(h1, h2, h3) { font-size: var(--bana-text-xl); }
    & > p, & > div { color: var(--bana-text-secondary); }
    & > footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--bana-space-3); margin-block-start: var(--bana-space-6); }
    @media (forced-colors: active) { border: 1px solid CanvasText; }
  }

  /* ---------------------------- Drawer ---------------------------- */
  /* Slides in from the inline-end edge (right in LTR, left in RTL). Add ui="drawer start" for the other side. */
  dialog[ui~="drawer"] {
    inline-size: min(26rem, 100vw);
    block-size: 100dvh;
    max-block-size: 100dvh;
    margin-block: 0;
    margin-inline: auto 0;
    padding: var(--bana-space-6);
    overflow: auto;
    overscroll-behavior: contain;
    color: var(--bana-text-primary);
    background: var(--bana-surface-overlay);
    border: 0;
    border-inline-start: 1px solid var(--bana-border-subtle);
    border-radius: 0;
    box-shadow: var(--bana-shadow-xl);

    translate: 100% 0;
    transition:
      translate var(--bana-duration-slow) var(--bana-ease-out),
      overlay var(--bana-duration-slow) allow-discrete,
      display var(--bana-duration-slow) allow-discrete;
    &:dir(rtl) { translate: -100% 0; }
    &[open] { translate: 0 0; }
    @starting-style {
      &[open] { translate: 100% 0; }
      &[open]:dir(rtl) { translate: -100% 0; }
    }

    &[ui~="start"] {
      margin-inline: 0 auto;
      border-inline-start: 0;
      border-inline-end: 1px solid var(--bana-border-subtle);
      translate: -100% 0;
      &:dir(rtl) { translate: 100% 0; }
      &[open] { translate: 0 0; }
      @starting-style {
        &[open] { translate: -100% 0; }
        &[open]:dir(rtl) { translate: 100% 0; }
      }
    }

    &::backdrop {
      background: var(--bana-scrim);
      opacity: 0;
      transition: opacity var(--bana-duration-slow) var(--bana-ease-out), overlay var(--bana-duration-slow) allow-discrete, display var(--bana-duration-slow) allow-discrete;
    }
    &[open]::backdrop { opacity: 1; }
    @starting-style { &[open]::backdrop { opacity: 0; } }

    & > header { display: flex; align-items: center; justify-content: space-between; gap: var(--bana-space-4); margin-block-end: var(--bana-space-4); }
    & > header :is(h1, h2, h3) { font-size: var(--bana-text-xl); }
    & > footer { display: flex; gap: var(--bana-space-3); justify-content: flex-end; margin-block-start: var(--bana-space-6); }
  }

  /* ---------------------------- Accordion ---------------------------- */
  /* Native <details>: content stays reachable without JavaScript. Share a `name` for single-open groups. */
  [ui~="accordion"] {
    border: 1px solid var(--bana-border-subtle);
    border-radius: var(--bana-radius-lg);
    background: var(--bana-surface-raised);
    overflow: hidden;
    & > details + details { border-block-start: 1px solid var(--bana-border-subtle); }
    & summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--bana-space-4);
      padding: var(--bana-space-4) var(--bana-space-5);
      min-block-size: 3rem;
      font-weight: var(--bana-weight-semibold);
      list-style: none;
      transition: background-color var(--bana-duration-fast);
      &::-webkit-details-marker { display: none; }
      &::after {
        content: "";
        flex: none;
        inline-size: 0.5rem;
        block-size: 0.5rem;
        border-inline-end: 2px solid currentColor;
        border-block-end: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform var(--bana-duration-base) var(--bana-ease-out);
        margin-inline-end: 0.2rem;
      }
      &:hover { background: var(--bana-surface-sunken); }
      &:focus-visible { outline-offset: -3px; }
    }
    & details[open] > summary::after { transform: rotate(-135deg); }
    & details > :not(summary) { padding: 0 var(--bana-space-5) var(--bana-space-5); color: var(--bana-text-secondary); }
  }

  /* ---------------------------- Tabs ---------------------------- */
  /* Markup: [ui~=tabs] > [role=tablist] > button[role=tab]; panels: [role=tabpanel]. Enhanced by Bana.start(). */
  [ui~="tabs"] {
    &:not([data-ready]) > [role="tablist"] { display: none; } /* no JS → show every panel as plain content */
    & > [role="tablist"] {
      display: flex;
      gap: var(--bana-space-1);
      border-block-end: 1px solid var(--bana-border-default);
      overflow-x: auto;
      scrollbar-width: none;
    }
    & [role="tab"] {
      position: relative;
      padding: var(--bana-space-3) var(--bana-space-4);
      background: none;
      border: 0;
      border-radius: var(--bana-radius-sm) var(--bana-radius-sm) 0 0;
      color: var(--bana-text-secondary);
      font-weight: var(--bana-weight-semibold);
      white-space: nowrap;
      transition: color var(--bana-duration-fast), background-color var(--bana-duration-fast);
      &::after {
        content: "";
        position: absolute;
        inset-inline: var(--bana-space-3);
        inset-block-end: -1px;
        block-size: 2px;
        background: var(--bana-accent);
        border-radius: 2px;
        transform: scaleX(0);
        transition: transform var(--bana-duration-base) var(--bana-ease-out);
      }
      &:hover { color: var(--bana-text-primary); background: var(--bana-surface-sunken); }
      &[aria-selected="true"] { color: var(--bana-accent-text); }
      &[aria-selected="true"]::after { transform: scaleX(1); }
    }
    & [role="tabpanel"] { padding-block: var(--bana-space-5); &:focus-visible { outline-offset: 4px; } }
  }

  /* ---------------------------- Toast ---------------------------- */
  [ui~="toast-region"] {
    position: fixed;
    inset-block-end: var(--bana-space-4);
    inset-inline-end: var(--bana-space-4);
    z-index: var(--bana-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--bana-space-3);
    inline-size: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
  }
  [ui~="toast"] {
    --_bar: var(--bana-info);
    pointer-events: auto;
    display: flex;
    gap: var(--bana-space-3);
    align-items: flex-start;
    padding: var(--bana-space-4);
    background: var(--bana-surface-overlay);
    color: var(--bana-text-primary);
    border: 1px solid var(--bana-border-subtle);
    border-inline-start: 4px solid var(--_bar);
    border-radius: var(--bana-radius-md);
    box-shadow: var(--bana-shadow-lg);
    animation: bana-toast-in var(--bana-duration-slow) var(--bana-ease-spring) both;
    &[ui~="success"] { --_bar: var(--bana-success); }
    &[ui~="warning"] { --_bar: var(--bana-warning); }
    &[ui~="danger"] { --_bar: var(--bana-danger); }
    & > [data-toast-body] { flex: 1; min-inline-size: 0; display: grid; gap: 0.15rem; overflow-wrap: anywhere; }
    & > [data-toast-body] > strong { font-weight: var(--bana-weight-bold); }
    & > [data-toast-body] > span { color: var(--bana-text-secondary); font-size: var(--bana-text-sm); }
    &[data-leaving] { animation: bana-toast-out var(--bana-duration-base) var(--bana-ease-in-out) both; }
  }
  @keyframes bana-toast-in { from { opacity: 0; transform: translateY(1rem) scale(0.96); } to { opacity: 1; transform: none; } }
  @keyframes bana-toast-out { to { opacity: 0; transform: translateX(1rem); } }
}

@layer bana.components {
  /* ---------------------------- Popover & menu ---------------------------- */
  /* Native Popover API. Requires Chrome 114+, Safari 17+, Firefox 125+; elsewhere the content stays hidden. */
  [popover][ui~="popover"],
  [popover][ui~="menu"] {
    inset: auto;
    margin: 0;
    padding: var(--bana-space-4);
    min-inline-size: 10rem;
    max-inline-size: min(22rem, calc(100vw - 1rem));
    max-block-size: min(26rem, 70dvh);
    overflow: auto;
    overscroll-behavior: contain;
    color: var(--bana-text-primary);
    background: var(--bana-surface-overlay);
    border: 1px solid var(--bana-border-default);
    border-radius: var(--bana-radius-lg);
    box-shadow: var(--bana-shadow-lg);

    opacity: 0;
    transform: translateY(-0.25rem) scale(0.98);
    transform-origin: top;
    transition:
      opacity var(--bana-duration-fast) var(--bana-ease-out),
      transform var(--bana-duration-base) var(--bana-ease-out),
      overlay var(--bana-duration-base) allow-discrete,
      display var(--bana-duration-base) allow-discrete;
    &:popover-open { opacity: 1; transform: none; }
    @starting-style { &:popover-open { opacity: 0; transform: translateY(-0.25rem) scale(0.98); } }
    &[data-side="top"] { transform-origin: bottom; }
    @media (forced-colors: active) { border: 1px solid CanvasText; }
    /* No Popover API → keep the content out of the page instead of showing it inline. */
    @supports not selector(:popover-open) { display: none; }
  }

  [popover][ui~="popover"] > header { margin-block-end: var(--bana-space-2); font-weight: var(--bana-weight-semibold); }
  [popover][ui~="popover"] > * + * { margin-block-start: var(--bana-space-3); }

  /* Menu: padding is tighter, items fill the row */
  [popover][ui~="menu"] {
    display: none;
    padding: var(--bana-space-1);
    &:popover-open { display: grid; gap: 2px; align-content: start; }
    & > :is(button, a, [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) {
      display: flex;
      align-items: center;
      gap: var(--bana-space-3);
      inline-size: 100%;
      min-block-size: 2.25rem;
      padding: 0 var(--bana-space-3);
      background: none;
      border: 0;
      border-radius: var(--bana-radius-sm);
      color: var(--bana-text-primary);
      font-size: var(--bana-text-sm);
      font-weight: var(--bana-weight-medium);
      text-align: start;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      transition: background-color var(--bana-duration-fast);
      &:is(:hover, :focus-visible, :focus) { background: var(--bana-accent-subtle); color: var(--bana-accent-text); outline: 0; }
      &:focus-visible { box-shadow: inset 0 0 0 2px var(--bana-focus-ring); }
      &[aria-disabled="true"], &:disabled { color: var(--bana-disabled-text); background: none; cursor: not-allowed; }
      &[ui~="danger"] { color: var(--bana-danger-text); &:is(:hover, :focus-visible, :focus) { background: var(--bana-danger-subtle); color: var(--bana-danger-text); } }
      & > kbd { margin-inline-start: auto; }
      & > bana-icon { color: var(--bana-text-muted); }
      &[aria-checked="true"]::after { content: "✓"; margin-inline-start: auto; color: var(--bana-accent-text); font-weight: var(--bana-weight-bold); }
    }
    & > hr { margin: var(--bana-space-1) var(--bana-space-2); border: 0; border-block-start: 1px solid var(--bana-border-subtle); }
    & > [role="presentation"], & > small { padding: var(--bana-space-2) var(--bana-space-3) var(--bana-space-1); font-size: var(--bana-text-xs); font-weight: var(--bana-weight-semibold); color: var(--bana-text-muted); }
  }

  /* ---------------------------- Tooltip ---------------------------- */
  /* Created by Bana for [data-tooltip]. Supplementary text only; never put controls inside. */
  [ui~="tooltip"] {
    position: fixed;
    inset: auto;
    margin: 0;
    z-index: calc(var(--bana-z-toast) + 1);
    max-inline-size: min(18rem, calc(100vw - 1rem));
    padding: 0.375rem 0.625rem;
    background: var(--bana-text-primary);
    color: var(--bana-text-inverse);
    border: 0;
    border-radius: var(--bana-radius-sm);
    box-shadow: var(--bana-shadow-md);
    font-size: var(--bana-text-xs);
    font-weight: var(--bana-weight-medium);
    line-height: var(--bana-leading-snug);
    overflow: visible;
    pointer-events: auto;
    animation: bana-tip-in var(--bana-duration-fast) var(--bana-ease-out) both;
    &[hidden] { display: none; }
    @media (forced-colors: active) { border: 1px solid CanvasText; }
  }
  @keyframes bana-tip-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
}

@layer bana.components {
  /* ---------------------------- Command menu ---------------------------- */
  dialog[ui~="command"] {
    inline-size: min(36rem, calc(100vw - 2rem));
    max-block-size: min(30rem, 80dvh);
    margin: 12dvh auto auto;
    padding: 0;
    overflow: hidden;
    color: var(--bana-text-primary);
    background: var(--bana-surface-overlay);
    border: 1px solid var(--bana-border-default);
    border-radius: var(--bana-radius-xl);
    box-shadow: var(--bana-shadow-xl, var(--bana-shadow-lg));
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.98);
    transition: opacity var(--bana-duration-fast), transform var(--bana-duration-base) var(--bana-ease-out), overlay var(--bana-duration-base) allow-discrete, display var(--bana-duration-base) allow-discrete;
    &[open] { display: flex; flex-direction: column; opacity: 1; transform: none; }
    @starting-style { &[open] { opacity: 0; transform: translateY(-0.5rem) scale(0.98); } }
    &::backdrop { background: color-mix(in oklab, var(--bana-text-primary) 40%, transparent); backdrop-filter: blur(2px); }
    & > input {
      flex: none;
      inline-size: 100%;
      min-block-size: 3.25rem;
      padding-inline: var(--bana-space-5);
      font: inherit;
      color: inherit;
      background: none;
      border: 0;
      border-block-end: 1px solid var(--bana-border-subtle);
      border-radius: 0;
      outline: 0;
      unicode-bidi: plaintext;
      &::placeholder { color: var(--bana-text-muted); }
      &::-webkit-search-cancel-button { display: none; }
      &:focus-visible { box-shadow: inset 0 -2px 0 var(--bana-focus-ring); }
    }
    & [role="listbox"] { overflow: auto; padding: var(--bana-space-2); margin: 0; list-style: none; display: grid; gap: 2px; align-content: start; }
    & [role="presentation"] { padding: var(--bana-space-3) var(--bana-space-3) var(--bana-space-1); font-size: var(--bana-text-xs); font-weight: var(--bana-weight-semibold); color: var(--bana-text-muted); }
    & [role="option"] {
      display: flex; align-items: center; gap: var(--bana-space-3);
      min-block-size: 2.5rem; padding: 0 var(--bana-space-3);
      border-radius: var(--bana-radius-sm); cursor: pointer; font-size: var(--bana-text-sm); font-weight: var(--bana-weight-medium);
      &[aria-selected="true"] { background: var(--bana-accent-subtle); color: var(--bana-accent-text); }
      &[hidden] { display: none; }
      & > kbd { margin-inline-start: auto; }
      & > a { flex: 1; align-self: stretch; display: flex; align-items: center; color: inherit; text-decoration: none; margin-inline: calc(-1 * var(--bana-space-3)); padding-inline: var(--bana-space-3); }
    }
    & [data-empty] { padding: var(--bana-space-8) var(--bana-space-4); text-align: center; color: var(--bana-text-muted); &[hidden] { display: none; } }
    @media (forced-colors: active) { & [role="option"][aria-selected="true"] { outline: 2px solid Highlight; } }
  }
}

@layer bana.components {
  /* date / time pickers: see picker.css */
  :is(input[data-datepicker], input[data-timepicker]) { text-align: start; }
}

@layer bana.components {
  /* ---------------------------- Combobox ---------------------------- */
  input[role="combobox"][id^="bana-cb-"] {
    padding-inline-end: var(--bana-space-10);
    background-image:
      linear-gradient(45deg, transparent 50%, currentColor 50%),
      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-size: 0.42rem 0.42rem, 0.42rem 0.42rem;
    background-repeat: no-repeat;
    background-position: calc(100% - 1.25rem) 52%, calc(100% - 0.83rem) 52%;
    &:dir(rtl) { background-position: 0.83rem 52%, 1.25rem 52%; }
    text-align: start;
    unicode-bidi: plaintext;
  }
  [popover][ui~="listbox"] {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: var(--bana-space-1);
    min-inline-size: 0;
    max-block-size: min(18rem, 50dvh);
    overflow: auto;
    overscroll-behavior: contain;
    color: var(--bana-text-primary);
    background: var(--bana-surface-overlay);
    border: 1px solid var(--bana-border-default);
    border-radius: var(--bana-radius-md);
    box-shadow: var(--bana-shadow-lg);
    z-index: var(--bana-z-popover);
    & ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
    & [role="option"] {
      min-block-size: 2.25rem;
      display: flex;
      align-items: center;
      padding: 0 var(--bana-space-3);
      border-radius: var(--bana-radius-sm);
      font-size: var(--bana-text-sm);
      cursor: pointer;
      &[hidden] { display: none; }
      &[data-active] { background: var(--bana-accent-subtle); color: var(--bana-accent-text); }
      &[aria-selected="true"] { font-weight: var(--bana-weight-semibold); }
      &[aria-selected="true"]::after { content: "✓"; margin-inline-start: auto; color: var(--bana-accent-text); }
      &[aria-disabled="true"] { color: var(--bana-disabled-text); cursor: not-allowed; }
    }
    & [data-group] { padding: var(--bana-space-2) var(--bana-space-3) var(--bana-space-1); font-size: var(--bana-text-xs); font-weight: var(--bana-weight-semibold); color: var(--bana-text-muted); &[hidden] { display: none; } }
    & [data-empty] { margin: 0; padding: var(--bana-space-4); text-align: center; color: var(--bana-text-muted); font-size: var(--bana-text-sm); &[hidden] { display: none; } }
    @media (forced-colors: active) { & [role="option"][data-active] { outline: 2px solid Highlight; } }
  }
}

@layer bana.components {
  /* ------------------------ Date & time pickers ------------------------
     Every look is a custom property on the picker (.dp / .tp) — set them in your own CSS, on a wrapper, or per input with
     data-variant / data-size / data-shape / data-accent.
       --bana-dp-accent  --bana-dp-on-accent  --bana-dp-bg  --bana-dp-fg  --bana-dp-muted  --bana-dp-border  --bana-dp-hover
       --bana-dp-weekend  --bana-dp-range  --bana-dp-radius (panel)  --bana-dp-cell-radius  --bana-dp-cell (size)  --bana-dp-font  --bana-dp-shadow */
  [popover][ui~="picker"] { position: fixed; inline-size: max-content; max-inline-size: calc(100vw - 1rem); padding: 0; overflow: visible; border: 0; background: transparent; box-shadow: none; }
  :is(.dp, .tp) {
    --_acc: var(--bana-dp-accent, var(--bana-accent));
    --_on: var(--bana-dp-on-accent, var(--bana-on-accent));
    --_cell: var(--bana-dp-cell, 2.5rem);
    --_cr: var(--bana-dp-cell-radius, var(--bana-radius-sm));
    --_fs: var(--bana-dp-font, var(--bana-text-sm));
    --_hover: var(--bana-dp-hover, color-mix(in oklab, var(--_acc) 12%, transparent));
    --_range: var(--bana-dp-range, color-mix(in oklab, var(--_acc) 14%, transparent));
    --_wk: var(--bana-dp-weekend, var(--bana-danger-text));
    display: grid; gap: var(--bana-space-2); padding: var(--bana-space-3); box-sizing: border-box;
    inline-size: max-content; max-inline-size: 100%;
    background: var(--bana-dp-bg, var(--bana-surface-overlay)); color: var(--bana-dp-fg, var(--bana-text-primary));
    border: 1px solid var(--bana-dp-border, var(--bana-border-default)); border-radius: var(--bana-dp-radius, var(--bana-radius-lg));
    box-shadow: var(--bana-dp-shadow, var(--bana-shadow-lg)); font-size: var(--_fs);
  }
  :is(.dp, .tp)[data-size="sm"] { --_cell: var(--bana-dp-cell, 2rem); --_fs: var(--bana-dp-font, var(--bana-text-xs)); }
  :is(.dp, .tp)[data-size="lg"] { --_cell: var(--bana-dp-cell, 3rem); --_fs: var(--bana-dp-font, var(--bana-text-md)); }
  :is(.dp, .tp)[data-shape="square"] { --_cr: var(--bana-dp-cell-radius, 2px); }
  :is(.dp, .tp)[data-shape="circle"] { --_cr: var(--bana-dp-cell-radius, 999px); }
  :is(.dp, .tp)[data-inline] { display: grid; margin-block-start: var(--bana-space-2); box-shadow: var(--bana-dp-shadow, var(--bana-shadow-xs)); }
  :is(.dp, .tp)[data-variant="minimal"] { border-color: transparent; box-shadow: none; background: transparent; }
  :is(.dp, .tp)[data-variant="outline"] { box-shadow: none; border-width: 2px; border-color: var(--_acc); }
  .dp[data-variant="solid"] > .dp-head { background: var(--_acc); color: var(--_on); margin: calc(var(--bana-space-3) * -1) calc(var(--bana-space-3) * -1) 0; padding: var(--bana-space-2) var(--bana-space-3); border-start-start-radius: inherit; border-start-end-radius: inherit; }
  .dp[data-variant="solid"] > .dp-head :is(button, select, input) { color: inherit; }
  .dp[data-variant="solid"] > .dp-head :is(select, input) { background-color: color-mix(in oklab, white 16%, transparent); border-color: color-mix(in oklab, white 45%, transparent); }
  .dp[data-variant="solid"] > .dp-head :is(select, input):focus-visible { outline-color: var(--_on); }
  .dp[data-variant="solid"] > .dp-head option { color: var(--bana-text-primary); background: var(--bana-surface-overlay); }
  .dp[data-variant="solid"] > .dp-head button:hover:not(:disabled) { background: color-mix(in oklab, white 18%, transparent); }

  .dp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--bana-space-2); }
  .dp-title { flex: 1; font-weight: var(--bana-weight-semibold); font-size: var(--_fs); }
  .dp-title:hover { background: var(--_hover); }
  .dp-selects { flex: 1; display: flex; gap: var(--bana-space-2); justify-content: center; & select { inline-size: auto; min-block-size: 2rem; padding-block: 0; font-size: var(--_fs); } & input { inline-size: 4.5rem; min-block-size: 2rem; text-align: center; font-size: var(--_fs); font-variant-numeric: tabular-nums; } }
  .dp-grid { border-collapse: separate; border-spacing: 2px; text-align: center; table-layout: fixed; & :is(th, td) { padding: 0; inline-size: var(--_cell); } }
  .dp-grid th { block-size: calc(var(--_cell) * .8); font-size: calc(var(--_fs) * .85); font-weight: var(--bana-weight-semibold); color: var(--bana-dp-muted, var(--bana-text-muted)); }
  .dp-grid :is(th, td)[data-weekend] { color: var(--_wk); }
  :is(.dp-grid td > button, .dp-cells > button, .tp-col > button) {
    display: grid; place-items: center; inline-size: 100%; min-block-size: 0; padding: 0; margin: 0; background: none; border: 1px solid transparent; border-radius: var(--_cr);
    color: inherit; font: inherit; font-size: var(--_fs); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--bana-duration-fast), color var(--bana-duration-fast);
    &:hover:not(:disabled, [data-selected], [aria-selected="true"]) { background: var(--_hover); }
    &:disabled { color: var(--bana-disabled-text); cursor: not-allowed; text-decoration: line-through; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
    &:focus-visible { outline: 2px solid var(--bana-focus-ring); outline-offset: 1px; }
    &[aria-current="date"] { border-color: var(--_acc); }
  }
  .dp-grid td > button { block-size: var(--_cell); }
  .dp-grid td[data-weekend] > button:not([data-selected], :disabled) { color: var(--_wk); }
  :is(.dp-grid td > button, .dp-cells > button)[data-selected], .tp-col > button[aria-selected="true"] { background: var(--_acc); color: var(--_on); border-color: var(--_acc); font-weight: var(--bana-weight-semibold); }
  .dp[data-variant="soft"] :is(.dp-grid td > button, .dp-cells > button)[data-selected], .tp[data-variant="soft"] .tp-col > button[aria-selected="true"] { background: color-mix(in oklab, var(--_acc) 22%, transparent); color: var(--bana-accent-text, var(--_acc)); border-color: transparent; }
  .dp[data-variant="outline"] :is(.dp-grid td > button, .dp-cells > button)[data-selected], .tp[data-variant="outline"] .tp-col > button[aria-selected="true"] { background: transparent; color: var(--_acc); border: 2px solid var(--_acc); }
  .dp-grid td[data-in-range] { background: var(--_range); border-radius: 0; }
  .dp-grid td[data-in-range] > button:not([data-selected]) { border-radius: 0; }
  .dp-grid td:has(> [data-edge="start"]) { border-start-start-radius: var(--_cr); border-end-start-radius: var(--_cr); }
  .dp-grid td:has(> [data-edge="end"]) { border-start-end-radius: var(--_cr); border-end-end-radius: var(--_cr); }
  .dp-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bana-space-1); inline-size: calc(var(--_cell) * 7 + 12px); & > button { block-size: calc(var(--_cell) * 1.3); } }
  .dp[data-view="months"] .dp-body, .dp[data-view="years"] .dp-body { min-block-size: calc(var(--_cell) * 5.2); display: grid; align-items: center; }
  .dp-time { border-block-start: 1px solid var(--bana-border-subtle); padding-block-start: var(--bana-space-2); }
  .dp-yscroll { grid-template-columns: repeat(4, 1fr); max-block-size: calc(var(--_cell) * 7.2); overflow-y: auto; position: relative; overscroll-behavior: contain; scrollbar-width: thin; & > button { block-size: calc(var(--_cell) * 1.1); } }
  .dp-yjump, .dp-yshort, .dp-presets { display: flex; flex-wrap: wrap; gap: var(--bana-space-1); justify-content: center; margin-block-end: var(--bana-space-2); }
  .dp-presets { margin-block: var(--bana-space-2) 0; border-block-start: 1px solid var(--bana-border-subtle); padding-block-start: var(--bana-space-2); }
  .dp-presets[hidden] { display: none; }
  .dp-grid .dp-wk { color: var(--bana-dp-muted, var(--bana-text-muted)); font-size: calc(var(--_fs) * .75); inline-size: calc(var(--_cell) * .7); font-weight: var(--bana-weight-regular); }
  .dp-grid td[data-holiday] > button:not([data-selected], :disabled) { color: var(--_wk); }
  .dp-grid td[data-mark] > button { position: relative; &::after { content: ""; position: absolute; inset-block-end: 3px; inset-inline-start: 50%; translate: -50% 0; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--_acc); } &[data-selected]::after { background: var(--_on); } }
  .dp-grid td > button > small { position: absolute; inset-block-start: 1px; inset-inline-end: 3px; font-size: .6em; opacity: .6; }
  .dp-grid td > button { position: relative; }
  .dp-count { color: var(--bana-dp-muted, var(--bana-text-muted)); font-size: calc(var(--_fs) * .85); }
  .dp-foot { display: flex; align-items: center; gap: var(--bana-space-2); border-block-start: 1px solid var(--bana-border-subtle); padding-block-start: var(--bana-space-2); }
  .dp-spacer { flex: 1; }
  .dp[data-mode="datetime"] .dp-body { inline-size: calc(var(--_cell) * 7 + 14px); }
  .tp-cols { display: flex; justify-content: center; gap: var(--bana-space-2); }
  .tp-col { position: relative; scroll-behavior: auto; display: grid; gap: 2px; align-content: start; max-block-size: calc(var(--_cell) * 5); overflow-y: auto; padding-inline: 2px; scrollbar-width: thin; min-inline-size: calc(var(--_cell) * 1.3); & > button { block-size: calc(var(--_cell) * .85); } }
  .tp-slot { display: grid; }
  @media (forced-colors: active) { :is(.dp-grid td > button, .dp-cells > button, .tp-col > button)[data-selected], .tp-col > button[aria-selected="true"] { outline: 2px solid Highlight; } }
  @media (max-width: 30rem) { :is(.dp, .tp) { --_cell: var(--bana-dp-cell, 2.35rem); } }
}

@layer bana.components {
  /* ---------------------------- Upload ---------------------------- */
  [ui~="upload"] { display: grid; gap: var(--bana-space-3); min-inline-size: 0; }

  [ui~="dropzone"] {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--bana-space-1);
    padding: var(--bana-space-6) var(--bana-space-4);
    text-align: center;
    color: var(--bana-text-secondary);
    background: var(--bana-surface-sunken);
    border: 1.5px dashed var(--bana-border-control);
    border-radius: var(--bana-radius-lg);
    cursor: pointer;
    transition: background-color var(--bana-duration-fast), border-color var(--bana-duration-fast);
    & > input[type="file"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
    & > bana-icon { --bana-icon-size: 1.75rem; color: var(--bana-accent-text); }
    & > strong { color: var(--bana-text-primary); }
    & > span { font-size: var(--bana-text-sm); }
    &:hover, &[data-dragover] { background: var(--bana-accent-subtle); border-color: var(--bana-accent); }
    &:has(input:focus-visible) { outline: 2px solid var(--bana-focus-ring); outline-offset: 2px; }
    &:has(input:disabled) { opacity: 0.6; cursor: not-allowed; }
  }

  [ui~="upload"] [data-upload-list] { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bana-space-2); &:empty { display: none; } }
  [data-upload-item] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--bana-space-3);
    padding: var(--bana-space-2) var(--bana-space-3);
    background: var(--bana-surface-raised);
    border: 1px solid var(--bana-border-subtle);
    border-radius: var(--bana-radius-md);
    &[data-status="done"] { border-color: var(--bana-success-border); }
    &[data-invalid] { border-color: var(--bana-danger-border); background: var(--bana-danger-subtle); }
    & [data-thumb] {
      display: grid; place-items: center;
      inline-size: 2.5rem; block-size: 2.5rem;
      border-radius: var(--bana-radius-sm);
      background: var(--bana-surface-sunken);
      color: var(--bana-text-muted);
      overflow: hidden;
      & img { inline-size: 100%; block-size: 100%; object-fit: cover; }
    }
    & [data-body] { display: grid; gap: 2px; min-inline-size: 0; }
    & [data-name] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--bana-weight-medium); font-size: var(--bana-text-sm); }
    & [data-info] { font-size: var(--bana-text-xs); color: var(--bana-text-secondary); }
    &[data-invalid] [data-info] { color: var(--bana-danger-text); font-weight: var(--bana-weight-medium); }
    & progress { block-size: 0.35rem; margin-block-start: 2px; }
    /* author display rules on buttons/progress would otherwise beat the UA [hidden] rule */
    & :is(button, progress, small, span)[hidden][hidden] { display: none; }
  }
  [ui~="upload"] [data-upload-status]:empty { display: none; }
  [ui~="upload"] [data-upload-status] { margin: 0; font-size: var(--bana-text-sm); color: var(--bana-text-secondary); }
}

@layer bana.components {
  /* ---------------------------- DevTools (development only) ---------------------------- */
  [ui~="devtools"] {
    position: fixed;
    inset-block-end: var(--bana-space-4);
    inset-inline-start: var(--bana-space-4);
    z-index: calc(var(--bana-z-toast) + 10);
    font-size: var(--bana-text-sm);
    color: var(--bana-text-primary);
    & > [data-dt-toggle] {
      display: inline-flex; align-items: center; gap: var(--bana-space-2);
      min-block-size: 2.5rem; padding-inline: var(--bana-space-4);
      background: var(--bana-text-primary); color: var(--bana-text-inverse);
      border: 0; border-radius: var(--bana-radius-full); box-shadow: var(--bana-shadow-lg);
      font: inherit; font-weight: var(--bana-weight-semibold); cursor: pointer;
    }
    & [data-dt-badge] {
      display: inline-grid; place-items: center; min-inline-size: 1.5rem; block-size: 1.5rem; padding-inline: 0.35rem;
      border-radius: var(--bana-radius-full); background: var(--bana-success); color: var(--bana-success-on); font-size: var(--bana-text-xs); font-weight: var(--bana-weight-bold);
      &[data-level="warn"] { background: var(--bana-warning); color: var(--bana-warning-on); }
      &[data-level="error"] { background: var(--bana-danger); color: var(--bana-danger-on); }
    }
    & [data-dt-panel] {
      position: absolute; inset-block-end: calc(100% + var(--bana-space-2)); inset-inline-start: 0;
      inline-size: min(26rem, calc(100vw - 2rem)); max-block-size: min(32rem, 70dvh);
      display: flex; flex-direction: column;
      background: var(--bana-surface-overlay); border: 1px solid var(--bana-border-default);
      border-radius: var(--bana-radius-lg); box-shadow: var(--bana-shadow-xl, var(--bana-shadow-lg)); overflow: hidden;
      &[hidden] { display: none; }
    }
    & [data-dt-head] { display: flex; align-items: center; justify-content: space-between; gap: var(--bana-space-2); padding: var(--bana-space-2); border-block-end: 1px solid var(--bana-border-subtle); background: var(--bana-surface-sunken); }
    & [data-dt-tabs] { display: flex; gap: 2px; }
    & [role="tab"] {
      min-block-size: 2.25rem; padding-inline: var(--bana-space-3); background: none; border: 0; border-radius: var(--bana-radius-sm);
      color: var(--bana-text-secondary); font: inherit; font-weight: var(--bana-weight-medium); cursor: pointer;
      &[aria-selected="true"] { background: var(--bana-accent-subtle); color: var(--bana-accent-text); }
    }
    & [data-dt-body] { overflow: auto; padding: var(--bana-space-3); display: grid; gap: var(--bana-space-2); align-content: start; }
    & [data-dt-row] { display: flex; align-items: center; justify-content: space-between; gap: var(--bana-space-2); }
    & [data-dt-note] { margin: 0; color: var(--bana-text-muted); font-size: var(--bana-text-xs); }
    & details {
      border: 1px solid var(--bana-border-subtle); border-inline-start: 3px solid var(--bana-warning); border-radius: var(--bana-radius-sm);
      &[data-level="error"] { border-inline-start-color: var(--bana-danger); }
      & > summary { padding: var(--bana-space-2) var(--bana-space-3); cursor: pointer; font-weight: var(--bana-weight-semibold); }
      & ul { list-style: none; margin: 0; padding: 0 var(--bana-space-2) var(--bana-space-2); display: grid; gap: 2px; }
    }
    & [data-dt-pick] { inline-size: 100%; padding: var(--bana-space-1) var(--bana-space-2); text-align: start; background: none; border: 0; border-radius: var(--bana-radius-xs); font: inherit; font-size: var(--bana-text-xs); color: var(--bana-text-secondary); cursor: pointer; unicode-bidi: plaintext; &:hover { background: var(--bana-accent-subtle); color: var(--bana-accent-text); } }
    & [data-dt-log] { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--bana-text-xs); }
    & [data-dt-log] li { display: grid; grid-template-columns: auto auto 1fr; gap: var(--bana-space-2); align-items: baseline; padding-block: 2px; border-block-end: 1px solid var(--bana-border-subtle); }
    & [data-dt-log] time { color: var(--bana-text-muted); font-variant-numeric: tabular-nums; }
    & [data-dt-log] span { color: var(--bana-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; }
    & [data-dt-group] { display: flex; flex-wrap: wrap; gap: var(--bana-space-1); border: 0; margin: 0; padding: 0; & legend { padding: 0; margin-block-end: var(--bana-space-1); font-weight: var(--bana-weight-semibold); } }
    & table th { font-weight: var(--bana-weight-medium); text-align: start; }
    & [data-dt-mark] { position: fixed; pointer-events: none; border: 2px solid var(--bana-danger); border-radius: var(--bana-radius-xs); box-shadow: 0 0 0 9999px color-mix(in oklab, black 25%, transparent); &[hidden] { display: none; } }
    @media (forced-colors: active) { & [data-dt-toggle], & [data-dt-panel] { border: 1px solid CanvasText; } }
  }
}

@layer bana.components {
  /* ---------------------------- Navbar ---------------------------- */
  [ui~="navbar"] {
    display: flex;
    align-items: center;
    gap: var(--bana-space-4);
    min-block-size: 3.5rem;
    padding-inline: var(--bana-gutter);
    background: color-mix(in oklab, var(--bana-surface-raised) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-block-end: 1px solid var(--bana-border-subtle);
    & > :is(a, strong)[ui~="brand"] { font-weight: var(--bana-weight-bold); font-size: var(--bana-text-lg); text-decoration: none; color: var(--bana-text-primary); }
    & ul { display: flex; flex-wrap: wrap; gap: var(--bana-space-1); list-style: none; padding: 0; }
    & ul a, & > a:not([ui~="brand"]) {
      display: inline-flex;
      align-items: center;
      min-block-size: 2.25rem;
      padding-inline: var(--bana-space-3);
      border-radius: var(--bana-radius-sm);
      color: var(--bana-text-secondary);
      font-weight: var(--bana-weight-medium);
      text-decoration: none;
      transition: background-color var(--bana-duration-fast), color var(--bana-duration-fast);
      &:hover { background: var(--bana-surface-sunken); color: var(--bana-text-primary); }
      &[aria-current="page"] { background: var(--bana-accent-subtle); color: var(--bana-accent-text); }
    }
    &[ui~="sticky"] { position: sticky; inset-block-start: 0; z-index: var(--bana-z-sticky); }
    & > [ui~="spacer"] { flex: 1; }
  }

  /* ---------------------------- Sidebar navigation ---------------------------- */
  [ui~="sidebar-nav"] {
    display: grid;
    gap: var(--bana-space-1);
    align-content: start;
    & :is(h2, h3, [ui~="label"]) { padding: var(--bana-space-3) var(--bana-space-3) var(--bana-space-1); font-size: var(--bana-text-xs); font-weight: var(--bana-weight-bold); color: var(--bana-text-muted); }
    & ul { list-style: none; padding: 0; display: grid; gap: 2px; }
    & a {
      display: flex;
      align-items: center;
      gap: var(--bana-space-3);
      min-block-size: 2.5rem;
      padding-inline: var(--bana-space-3);
      border-radius: var(--bana-radius-sm);
      color: var(--bana-text-secondary);
      font-weight: var(--bana-weight-medium);
      text-decoration: none;
      transition: background-color var(--bana-duration-fast), color var(--bana-duration-fast);
      &:hover { background: var(--bana-surface-sunken); color: var(--bana-text-primary); }
      &[aria-current="page"] { background: var(--bana-accent-subtle); color: var(--bana-accent-text); font-weight: var(--bana-weight-semibold); }
    }
  }

  /* ---------------------------- Breadcrumb ---------------------------- */
  [ui~="breadcrumb"] {
    & ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bana-space-2); list-style: none; padding: 0; font-size: var(--bana-text-sm); color: var(--bana-text-muted); }
    & li { display: inline-flex; align-items: center; gap: var(--bana-space-2); }
    & li + li::before {
      content: "";
      inline-size: 0.4rem;
      block-size: 0.4rem;
      border-block-start: 1.5px solid currentColor;
      border-inline-end: 1.5px solid currentColor;
      transform: rotate(45deg);
      opacity: 0.7;
    }
    & li + li:dir(rtl)::before { transform: rotate(-135deg); }
    & a { color: var(--bana-text-secondary); text-decoration: none; &:hover { color: var(--bana-text-link); text-decoration: underline; } }
    & [aria-current="page"] { color: var(--bana-text-primary); font-weight: var(--bana-weight-semibold); }
  }

  /* ---------------------------- Pagination ---------------------------- */
  [ui~="pagination"] {
    & ul { display: flex; flex-wrap: wrap; gap: var(--bana-space-1); list-style: none; padding: 0; justify-content: center; }
    & :is(a, button) {
      display: inline-grid;
      place-items: center;
      min-inline-size: var(--bana-control-md);
      min-block-size: var(--bana-control-md);
      padding-inline: var(--bana-space-2);
      border: 1px solid transparent;
      border-radius: var(--bana-radius-sm);
      background: none;
      color: var(--bana-text-secondary);
      font-weight: var(--bana-weight-medium);
      text-decoration: none;
      font-variant-numeric: tabular-nums;
      transition: background-color var(--bana-duration-fast);
      &:hover:not([aria-disabled="true"], :disabled) { background: var(--bana-surface-sunken); color: var(--bana-text-primary); }
      &[aria-current="page"] { background: var(--bana-accent); color: var(--bana-on-accent); border-color: transparent; }
      &[aria-disabled="true"], &:disabled { color: var(--bana-disabled-text); cursor: not-allowed; }
    }
  }

  /* ---------------------------- Stepper ---------------------------- */
  [ui~="stepper"] {
    display: flex;
    gap: var(--bana-space-2);
    list-style: none;
    padding: 0;
    counter-reset: bana-step;
    & > li {
      flex: 1;
      display: flex;
      align-items: center;
      gap: var(--bana-space-3);
      counter-increment: bana-step;
      color: var(--bana-text-muted);
      font-weight: var(--bana-weight-medium);
      font-size: var(--bana-text-sm);
      &::before {
        content: counter(bana-step);
        flex: none;
        display: grid;
        place-items: center;
        inline-size: 2rem;
        block-size: 2rem;
        border-radius: 50%;
        border: 2px solid var(--bana-border-strong);
        color: var(--bana-text-secondary);
        font-weight: var(--bana-weight-bold);
        background: var(--bana-surface-raised);
        font-variant-numeric: tabular-nums;
      }
      &[aria-current="step"] { color: var(--bana-text-primary); }
      &[aria-current="step"]::before { border-color: var(--bana-accent); background: var(--bana-accent); color: var(--bana-on-accent); }
      &[data-complete]::before { border-color: var(--bana-success); background: var(--bana-success); color: var(--bana-success-on); content: "✓"; }
      &:not(:last-child)::after { content: ""; flex: 1; block-size: 2px; background: var(--bana-border-default); border-radius: 2px; min-inline-size: 1rem; }
    }
  }
}