/* ═══════════════════════════════════════════════════════════════════════════
   RenDS — Registered Custom Properties (CSS Houdini @property)
   ═══════════════════════════════════════════════════════════════════════════
   @property tells the browser the *type* of a custom property, enabling:
   - Smooth transitions/animations on custom properties
   - Proper inheritance behavior
   - Type-safe fallback values

   Without @property, the browser treats custom properties as opaque strings,
   so `transition: --color-accent 200ms` silently does nothing.
   With @property, the browser knows it's a <color> and can interpolate it.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── Color Tokens ───
   Enables smooth color transitions when theme/mode changes.

   NOTA sobre hex literals:
     CSS Houdini @property exige un initial-value resuelto — no acepta
     var() ni light-dark(). Los hex aquí DEBEN ser literales. Los valores
     reflejan la paleta RenDS real (Apple HIG) para que el fallback del
     browser se vea idéntico a los tokens cargados por tokens/semantic/.
   */

@property --color-accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #0063D1; /* --blue-600 */
}

@property --color-accent-hover {
  syntax: '<color>';
  inherits: true;
  initial-value: #004DA3; /* --blue-700 */
}

@property --color-surface {
  syntax: '<color>';
  inherits: true;
  initial-value: #FFFFFF; /* --white */
}

@property --color-surface-raised {
  syntax: '<color>';
  inherits: true;
  initial-value: #FFFFFF; /* --white */
}

@property --color-text {
  syntax: '<color>';
  inherits: true;
  initial-value: #000000; /* --black */
}

@property --color-text-muted {
  syntax: '<color>';
  inherits: true;
  initial-value: #636366; /* --gray-700 */
}

@property --color-border {
  syntax: '<color>';
  inherits: true;
  initial-value: #E5E5EA; /* --gray-200 */
}

@property --color-focus-ring {
  syntax: '<color>';
  inherits: true;
  initial-value: #0063D1; /* --blue-600 */
}

/* ─── Duration Tokens ───
   Enables smooth transitions between duration values */

@property --duration-fast {
  syntax: '<time>';
  inherits: true;
  initial-value: 100ms;
}

@property --duration-normal {
  syntax: '<time>';
  inherits: true;
  initial-value: 150ms;
}

@property --duration-moderate {
  syntax: '<time>';
  inherits: true;
  initial-value: 250ms;
}

@property --duration-slow {
  syntax: '<time>';
  inherits: true;
  initial-value: 300ms;
}

/* ─── Spacing Tokens ───
   Enables smooth spacing animations */

@property --space-1 {
  syntax: '<length>';
  inherits: true;
  initial-value: 0.25rem;
}

@property --space-2 {
  syntax: '<length>';
  inherits: true;
  initial-value: 0.5rem;
}

@property --space-4 {
  syntax: '<length>';
  inherits: true;
  initial-value: 1rem;
}

/* ─── Radius Tokens ───
   Enables smooth border-radius animations */

@property --radius-sm {
  syntax: '<length>';
  inherits: true;
  initial-value: 0.25rem;
}

@property --radius-md {
  syntax: '<length>';
  inherits: true;
  initial-value: 0.5rem;
}

@property --radius-lg {
  syntax: '<length>';
  inherits: true;
  initial-value: 0.75rem;
}
/* ============================================
   RenDS — Primitive Color Tokens
   ============================================
   Raw color palette. These are never used directly
   in components — they feed into semantic tokens.

   Based on Apple HIG color system + accessible
   contrast ratios (WCAG 2.1 AA minimum, AAA target).
   ============================================ */

:root {
  /* ─── Blue Scale ─── */
  --blue-50:  #EBF5FF;
  --blue-100: #D1E9FF;
  --blue-200: #A3D3FF;
  --blue-300: #75BDFF;
  --blue-400: #47A7FF;
  --blue-500: #007AFF; /* Apple system blue */
  --blue-600: #0063D1;
  --blue-700: #004DA3;
  --blue-800: #003775;
  --blue-900: #002147;

  /* ─── Gray Scale ─── */
  --gray-50:  #F9F9FB;
  --gray-100: #F2F2F7; /* Apple secondary bg */
  --gray-200: #E5E5EA; /* Apple fill */
  --gray-300: #D1D1D6; /* Apple secondary fill */
  --gray-400: #C7C7CC; /* Apple tertiary fill */
  --gray-500: #AEAEB2;
  --gray-600: #8E8E93; /* Apple tertiary text */
  --gray-700: #636366;
  --gray-800: #48484A;
  --gray-900: #3A3A3C;
  --gray-950: #2C2C2E;
  --gray-1000: #1C1C1E; /* Apple dark secondary bg */

  /* ─── Green Scale ─── */
  --green-50:  #E8FAF0;
  --green-100: #C2F0D5;
  --green-200: #7DDBA3;
  --green-300: #4ECB71;
  --green-400: #34C759; /* Apple system green */
  --green-500: #28A745;
  --green-600: #1E8E3E;
  --green-700: #167A32;
  --green-800: #0F5B25;
  --green-900: #083D19;

  /* ─── Red Scale ─── */
  --red-50:  #FFF0EF;
  --red-100: #FFD6D4;
  --red-200: #FFA8A3;
  --red-300: #FF7A72;
  --red-400: #FF3B30; /* Apple system red */
  --red-500: #D70015;
  --red-600: #B80012;
  --red-700: #990010;
  --red-800: #7A000D;
  --red-900: #5C000A;

  /* ─── Orange Scale ─── */
  --orange-50:  #FFF5EB;
  --orange-100: #FFE5C7;
  --orange-200: #FFCB8F;
  --orange-300: #FFB157;
  --orange-400: #FF9500; /* Apple system orange */
  --orange-500: #D97E00;
  --orange-600: #B36700;
  --orange-700: #8C5100;
  --orange-800: #663B00;
  --orange-900: #402500;

  /* ─── Yellow Scale ─── */
  --yellow-50:  #FFFBE5;
  --yellow-100: #FFF4B8;
  --yellow-200: #FFEA7A;
  --yellow-300: #FFE03C;
  --yellow-400: #FFCC00; /* Apple system yellow */
  --yellow-500: #D4AA00;
  --yellow-600: #AA8800;
  --yellow-700: #806600;
  --yellow-800: #554400;
  --yellow-900: #2B2200;

  /* ─── Teal Scale ─── */
  --teal-50:  #E5FAFE;
  --teal-100: #BFF2FC;
  --teal-200: #80E5F9;
  --teal-300: #40D8F6;
  --teal-400: #5AC8FA; /* Apple system teal */
  --teal-500: #32ACD6;
  --teal-600: #1E90B3;
  --teal-700: #14748F;
  --teal-800: #0C586C;
  --teal-900: #063C48;

  /* ─── Purple Scale ─── */
  --purple-50:  #F5EEFF;
  --purple-100: #E5D4FF;
  --purple-200: #CBAAFF;
  --purple-300: #B180FF;
  --purple-400: #AF52DE; /* Apple system purple */
  --purple-500: #8E3EBE;
  --purple-600: #6F2E9E;
  --purple-700: #52207E;
  --purple-800: #38155E;
  --purple-900: #200C3E;

  /* ─── Pink Scale ─── */
  --pink-50:  #FFF0F5;
  --pink-100: #FFD6E5;
  --pink-200: #FFADCB;
  --pink-300: #FF85B1;
  --pink-400: #FF2D55; /* Apple system pink */
  --pink-500: #D4234A;
  --pink-600: #AA1C3E;
  --pink-700: #801532;
  --pink-800: #550E26;
  --pink-900: #2B071A;

  /* ─── Neutral Absolutes ─── */
  --white: #FFFFFF;
  --black: #000000;
  --transparent: transparent;
}
/* ============================================
   RenDS — Primitive Spacing Tokens
   ============================================
   Based on 8pt grid system (Apple HIG).
   All spacing derives from multiples of 8,
   with 4px as a half-unit for tight spaces.

   Usage: margins, padding, gap, positioning.
   ============================================ */

:root {
  /* ─── Base Unit ─── */
  --space-unit: 0.5rem; /* 8px — the fundamental unit */

  /* ─── Scale ─── */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;  /* 2px  — hairline */
  --space-1:   0.25rem;   /* 4px  — half unit, tight */
  --space-2:   0.5rem;    /* 8px  — 1 unit */
  --space-3:   0.75rem;   /* 12px — 1.5 units */
  --space-4:   1rem;      /* 16px — 2 units, standard */
  --space-5:   1.25rem;   /* 20px — 2.5 units */
  --space-6:   1.5rem;    /* 24px — 3 units */
  --space-7:   1.75rem;   /* 28px — 3.5 units */
  --space-8:   2rem;      /* 32px — 4 units */
  --space-9:   2.25rem;   /* 36px */
  --space-10:  2.5rem;    /* 40px — 5 units */
  --space-12:  3rem;      /* 48px — 6 units */
  --space-14:  3.5rem;    /* 56px — 7 units */
  --space-16:  4rem;      /* 64px — 8 units */
  --space-20:  5rem;      /* 80px — 10 units */
  --space-24:  6rem;      /* 96px — 12 units */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */
  --space-48:  12rem;     /* 192px */
  --space-56:  14rem;     /* 224px */
  --space-64:  16rem;     /* 256px */

  /* ─── Aliases (fractional) ─── */
  --space-0-25: 0.0625rem; /* 1px */
  --space-1-5:  0.375rem;  /* 6px */
}
/* ============================================
   RenDS — Primitive Typography Tokens
   ============================================
   Based on Apple HIG type hierarchy.
   System font stack for native feel across OS.
   Scale from 11px (min) to 34px (display).
   ============================================ */

:root {
  /* ─── Font Families ─── */
  --font-sans:
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Helvetica Neue',
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji';

  --font-mono:
    'SF Mono',
    ui-monospace,
    'Cascadia Code',
    'Source Code Pro',
    Menlo,
    Monaco,
    Consolas,
    'Courier New',
    monospace;

  /* ─── Font Sizes ─── */
  --text-xs:    0.6875rem;  /* 11px — minimum (Apple HIG) */
  --text-sm:    0.8125rem;  /* 13px — footnote, caption */
  --text-base:  1rem;       /* 16px — body default */
  --text-md:    1.0625rem;  /* 17px — headline (Apple) */
  --text-lg:    1.125rem;   /* 18px — title small */
  --text-xl:    1.25rem;    /* 20px — title medium */
  --text-2xl:   1.375rem;   /* 22px — title large */
  --text-3xl:   1.625rem;   /* 26px — display small */
  --text-4xl:   1.75rem;    /* 28px — display medium */
  --text-5xl:   2.125rem;   /* 34px — display large */
  --text-6xl:   2.5rem;     /* 40px — hero */
  --text-7xl:   3rem;       /* 48px — hero large */
  --text-8xl:   3.75rem;    /* 60px — display hero */

  /* ─── Font Weights ─── */
  --weight-thin:      100;
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* ─── Line Heights ─── */
  --leading-none:    1;
  --leading-tight:   1.2;   /* headlines, display */
  --leading-snug:    1.375; /* titles */
  --leading-normal:  1.5;   /* body text — default */
  --leading-relaxed: 1.625; /* long-form reading */
  --leading-loose:   1.75;  /* accessibility, large text */
  --leading-double:  2;     /* very loose */

  /* ─── Letter Spacing (Tracking) ─── */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;
}
/* ============================================
   RenDS — Modular Type Scale Definitions
   ============================================
   Ratios from musical intervals, matching the
   Type Scale Node in holistic-rust.

   Usage:
     <html data-type-ratio="major-third">
     OR set --type-ratio in :root

   The active ratio is used by typography.css to
   compute --text-* sizes from base × ratio^step.

   Available ratios:
     minor-second  (1.067)  — Subtle, almost equal
     major-second  (1.125)  — Gentle progression
     minor-third   (1.200)  — Compact, readable ★
     major-third   (1.250)  — Classic web ★ (default)
     perfect-fourth(1.333)  — Bold contrast ★
     aug-fourth    (1.414)  — √2, musical
     perfect-fifth (1.500)  — High contrast
     minor-sixth   (1.600)  — Editorial
     golden-ratio  (1.618)  — φ, dramatic
     major-sixth   (1.667)  — Very dramatic
     octave        (2.000)  — Extreme contrast
   ============================================ */

/* ─── Ratio Custom Properties ─── */
:root,
[data-type-ratio="major-third"] {
  --type-ratio:     1.250;
  --type-ratio-name: 'Major Third';
}

[data-type-ratio="minor-second"] {
  --type-ratio:     1.067;
  --type-ratio-name: 'Minor Second';
}

[data-type-ratio="major-second"] {
  --type-ratio:     1.125;
  --type-ratio-name: 'Major Second';
}

[data-type-ratio="minor-third"] {
  --type-ratio:     1.200;
  --type-ratio-name: 'Minor Third';
}

[data-type-ratio="perfect-fourth"] {
  --type-ratio:     1.333;
  --type-ratio-name: 'Perfect Fourth';
}

[data-type-ratio="aug-fourth"] {
  --type-ratio:     1.414;
  --type-ratio-name: 'Aug. Fourth';
}

[data-type-ratio="perfect-fifth"] {
  --type-ratio:     1.500;
  --type-ratio-name: 'Perfect Fifth';
}

[data-type-ratio="minor-sixth"] {
  --type-ratio:     1.600;
  --type-ratio-name: 'Minor Sixth';
}

[data-type-ratio="golden-ratio"] {
  --type-ratio:     1.618;
  --type-ratio-name: 'Golden Ratio';
}

[data-type-ratio="major-sixth"] {
  --type-ratio:     1.667;
  --type-ratio-name: 'Major Sixth';
}

[data-type-ratio="octave"] {
  --type-ratio:     2.000;
  --type-ratio-name: 'Octave';
}

/* ─── Base Size ─── */
:root {
  --type-base-px: 16;  /* base in px, for JS interop */
}

/* ─── Computed Scale Steps ───
   step  0 = base         (1rem)
   step -1 = base / ratio
   step -2 = base / ratio²
   step  1 = base × ratio
   step  2 = base × ratio²
   ...and so on.

   CSS can't do pow(), so we pre-compute with
   calc() chains. For accurate modular scales,
   use the JS generator (cli/type-scale.js) or
   the holistic-rust Type Scale Node.

   The --text-* tokens in typography.css remain the
   canonical sizes. This file provides the ratio
   and the --scale-step-* alternatives for projects
   that want a pure modular scale.
   ============================================ */

:root {
  /* Steps computed from --type-ratio via calc() chains.
     These approximate pow(ratio, step) using repeated multiplication.
     For ratios that need exact values, use the CLI generator. */

  --scale-step--2: calc(1rem / var(--type-ratio) / var(--type-ratio));
  --scale-step--1: calc(1rem / var(--type-ratio));
  --scale-step-0:  1rem;
  --scale-step-1:  calc(1rem * var(--type-ratio));
  --scale-step-2:  calc(1rem * var(--type-ratio) * var(--type-ratio));
  --scale-step-3:  calc(1rem * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));
  --scale-step-4:  calc(1rem * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));
  --scale-step-5:  calc(1rem * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));
  --scale-step-6:  calc(1rem * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));
  --scale-step-7:  calc(1rem * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));
  --scale-step-8:  calc(1rem * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));
}
/* ============================================
   RenDS — Primitive Sizing Tokens
   ============================================
   Touch targets, component heights, icon sizes,
   and common width constraints.

   Apple HIG: 44px minimum touch target.
   ============================================ */

:root {
  /* ─── Touch Target ─── */
  --touch-min: 2.75rem;  /* 44px — Apple HIG minimum */

  /* ─── Component Heights ─── */
  --size-xs:  1.5rem;    /* 24px — compact inline */
  --size-sm:  2rem;      /* 32px — small button/badge */
  --size-md:  2.25rem;   /* 36px — medium control */
  --size-lg:  2.75rem;   /* 44px — standard (touch target) */
  --size-xl:  3.25rem;   /* 52px — large button */
  --size-2xl: 3.75rem;   /* 60px — extra large */

  /* ─── Icon Sizes ─── */
  --icon-xs:  0.75rem;   /* 12px — inline micro */
  --icon-sm:  1rem;      /* 16px — inline small */
  --icon-md:  1.25rem;   /* 20px — default */
  --icon-lg:  1.5rem;    /* 24px — toolbar */
  --icon-xl:  2rem;      /* 32px — featured */
  --icon-2xl: 3rem;      /* 48px — hero */

  /* ─── Avatar Sizes ─── */
  --avatar-xs:  1.5rem;  /* 24px */
  --avatar-sm:  2rem;    /* 32px */
  --avatar-md:  2.5rem;  /* 40px */
  --avatar-lg:  3rem;    /* 48px */
  --avatar-xl:  4rem;    /* 64px */
  --avatar-2xl: 5rem;    /* 80px */

  /* ─── Content Widths ─── */
  --width-xs:   20rem;   /* 320px */
  --width-sm:   24rem;   /* 384px */
  --width-md:   28rem;   /* 448px */
  --width-lg:   32rem;   /* 512px */
  --width-xl:   36rem;   /* 576px */
  --width-2xl:  42rem;   /* 672px */
  --width-3xl:  48rem;   /* 768px */
  --width-4xl:  56rem;   /* 896px */
  --width-5xl:  64rem;   /* 1024px */
  --width-6xl:  72rem;   /* 1152px */
  --width-7xl:  80rem;   /* 1280px */
  --width-full: 100%;
  --width-prose: 65ch;   /* optimal reading width */

  /* ─── Border / Stroke Widths ─── */
  --stroke-0:    0;
  --stroke-1:    1px;
  --stroke-2:    2px;
  --stroke-3:    3px;
  --stroke-4:    4px;
}
/* ============================================
   RenDS — Primitive Border Radius Tokens
   ============================================
   Based on Apple HIG corner radius patterns.
   Consistent rounding across all components.
   ============================================ */

:root {
  --radius-none: 0;
  --radius-xs:   0.125rem;  /* 2px  — subtle */
  --radius-sm:   0.25rem;   /* 4px  — small controls */
  --radius-md:   0.5rem;    /* 8px  — standard (Apple default) */
  --radius-lg:   0.75rem;   /* 12px — cards, modals */
  --radius-xl:   1rem;      /* 16px — large panels */
  --radius-2xl:  1.25rem;   /* 20px — sheets */
  --radius-3xl:  1.5rem;    /* 24px — large sheets */
  --radius-full: 9999px;    /* pill / circle */
}
/* ============================================
   RenDS — Primitive Shadow Tokens
   ============================================
   Soft, Apple-style layered shadows.
   Each level uses two shadows for realism:
   one for ambient occlusion, one for key light.

   NOTE: The actual --shadow-xs through --shadow-2xl
   values are defined in semantic/colors.css using
   light-dark() color tokens for automatic dark mode.
   This file defines shadow-independent primitives only.
   ============================================ */

:root {
  /* ─── Shadow Reset ─── */
  --shadow-none: none;

  /* ─── Inset Shadow ─── */
  --shadow-inset-color: light-dark(rgb(0, 0, 0, 0.06), rgb(0, 0, 0, 0.3));
  --shadow-inset: inset 0 2px 4px var(--shadow-inset-color);

  /* ─── Ring Shadow (for focus, borders) ─── */
  /* Used as: box-shadow: var(--ring-offset), var(--ring); */
  --ring-width: 2px;
  --ring-color: var(--blue-500);
  --ring-offset-width: 2px;
  --ring-offset-color: light-dark(var(--white), var(--black));
}
/* ============================================
   RenDS — Primitive Motion Tokens
   ============================================
   Based on Apple HIG animation principles.
   Every animation must have purpose.
   Always respect prefers-reduced-motion.
   ============================================ */

:root {
  /* ─── Durations ─── */
  --duration-0:       0ms;
  --duration-fastest: 50ms;    /* micro-feedback (opacity flicker) */
  --duration-fast:    100ms;   /* instant response (active states) */
  --duration-normal:  150ms;   /* interaction feedback (hover, focus) */
  --duration-moderate:250ms;   /* small transitions (accordion, collapse) */
  --duration-slow:    300ms;   /* standard transitions (view change) */
  --duration-slower:  450ms;   /* modal entrance, complex transitions */
  --duration-slowest: 600ms;   /* page transitions, large animations */

  /* ─── Easing Curves ─── */
  /*
     Easings organized by *intent*. Use these names when writing
     new motion; the legacy aliases below keep existing components
     working unchanged.
  */

  --ease-linear:        linear;

  /* Standard — most common, balanced feel (legacy default) */
  --ease-default:       cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Decelerate — element arriving / entering / expanding.
     Preferred for ANY motion that ends at rest in the UI. */
  --ease-decelerate:    cubic-bezier(0.00, 0.00, 0.20, 1.00);

  /* Accelerate — element leaving / exiting / collapsing.
     Use only when the element goes off-screen or disappears. */
  --ease-accelerate:    cubic-bezier(0.40, 0.00, 1.00, 1.00);

  /* Standard in-out — symmetric, for in-flight position changes
     (not entering/exiting, just moving between two on-screen states). */
  --ease-standard:      cubic-bezier(0.20, 0.00, 0.00, 1.00);

  /* Emphasized (Material 3) — slower start, fast middle, gentle stop.
     Use for hero / attention-seeking transitions. */
  --ease-emphasized:    cubic-bezier(0.20, 0.00, 0.00, 1.00);
  --ease-emphasized-decelerate: cubic-bezier(0.05, 0.70, 0.10, 1.00);
  --ease-emphasized-accelerate: cubic-bezier(0.30, 0.00, 0.80, 0.15);

  /* Spring-soft — gentle overshoot, friendly feel */
  --ease-spring-soft:   cubic-bezier(0.34, 1.20, 0.64, 1.00);

  /* Spring-snappy — fast overshoot, playful (Apple sheet feel) */
  --ease-spring-snappy: cubic-bezier(0.20, 1.50, 0.40, 1.00);

  /* Bounce — noticeable overshoot (use sparingly) */
  --ease-bounce:        cubic-bezier(0.34, 1.56, 0.64, 1.00);

  /* ─── Legacy aliases (preserved verbatim) ─── */
  --ease-out:           var(--ease-decelerate);
  --ease-in:            var(--ease-accelerate);
  --ease-in-out:        cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-spring:        var(--ease-spring-soft);
  --ease-snappy:        var(--ease-standard);

  /* ─── Duration aliases (compatibility) ─── */
  --duration-100: var(--duration-fast);
  --duration-200: var(--duration-normal);
}

/* ─── Reduced Motion ───
   When user prefers reduced motion,
   all durations collapse to near-zero.
   Components still change state, just instantly. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fastest: 0ms;
    --duration-fast:    0ms;
    --duration-normal:  0ms;
    --duration-moderate:0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
    --duration-slowest: 0ms;
  }
}
/* ============================================
   RenDS — Primitive Z-Index Tokens
   ============================================
   Layering system. Uses defined levels to
   prevent z-index wars.

   Convention: each layer has a clear purpose.
   ============================================ */

:root {
  --z-behind:    -1;
  --z-base:       0;
  --z-raised:     1;     /* slightly above siblings */
  --z-dropdown:  10;     /* dropdown menus */
  --z-sticky:    20;     /* sticky headers, navbars */
  --z-overlay:   30;     /* overlays, backdrops */
  --z-modal:     40;     /* modals, dialogs */
  --z-popover:   50;     /* popovers, floating elements */
  --z-toast:     60;     /* toast notifications */
  --z-tooltip:   70;     /* tooltips (always on top) */
  --z-max:     9999;     /* escape hatch (use sparingly) */
}
/* ============================================
   RenDS — All Primitive Tokens
   ============================================ */










/* ============================================
   RenDS — Semantic Color Tokens
   ============================================
   Maps primitive colors to meaningful purposes.
   THESE are the tokens components should use.

   Modern approach: Uses light-dark() CSS function
   to eliminate mode duplication. Automatically
   respects color-scheme and [data-theme] overrides.

   Structure: --{purpose}-{property}-{variant}
   ============================================ */

:root {
  color-scheme: light dark;

  /* ─── Accent / Tint ─── */
  /* Accent is used as a SOLID background with --color-on-accent text. Values tuned
     so that WHITE on accent (light) and BLACK on accent (dark) both pass WCAG AA.
     Light: blue-600 (5.88:1 vs white). Dark: blue-400 (8.2:1 vs black). */
  --color-accent:        light-dark(var(--blue-600), var(--blue-400));
  --color-accent-hover:  light-dark(var(--blue-700), var(--blue-300));
  --color-accent-active: light-dark(var(--blue-800), var(--blue-200));
  --color-accent-subtle: light-dark(var(--blue-50), var(--blue-900));
  --color-on-accent:     light-dark(var(--white), var(--black));

  /* ─── Semantic Status ─── */
  /* Status tokens follow the same rule as --color-accent: solid bg with adaptive
     on-X text that passes AA. Each pair tuned per color, Apple-like brightness
     preserved in dark mode. */
  --color-success:        light-dark(var(--green-700), var(--green-400));
  --color-success-subtle: light-dark(var(--green-50), var(--green-900));
  --color-on-success:     light-dark(var(--white), var(--black));

  --color-warning:        light-dark(var(--orange-700), var(--orange-400));
  --color-warning-subtle: light-dark(var(--orange-50), var(--orange-900));
  --color-on-warning:     light-dark(var(--white), var(--black));

  --color-danger:         light-dark(var(--red-500), var(--red-400));
  --color-danger-subtle:  light-dark(var(--red-50), var(--red-900));
  --color-on-danger:      light-dark(var(--white), var(--black));

  --color-info:           light-dark(var(--teal-700), var(--teal-400));
  --color-info-subtle:    light-dark(var(--teal-50), var(--teal-900));
  --color-on-info:        light-dark(var(--white), var(--black));

  /* AI — used by Carbon-for-AI message patterns (ren-ai). */
  --color-ai:             light-dark(var(--purple-500), var(--purple-300));
  --color-ai-hover:       light-dark(var(--purple-600), var(--purple-200));
  --color-ai-subtle:      light-dark(var(--purple-50), var(--purple-900));
  --color-on-ai:          light-dark(var(--white), var(--black));

  /* ─── Text ─── */
  --color-text:           light-dark(var(--black), var(--white));
  --color-text-secondary: light-dark(var(--gray-700), var(--gray-300));
  --color-text-muted:     light-dark(var(--gray-700), var(--gray-500)); /* gray-700 light 7.24:1; gray-500 dark 4.78:1 */
  /* NOTE: --color-text-faint is INCIDENTAL CONTENT ONLY (WCAG-exempt): disabled labels, placeholder
     hints, decorative punctuation (breadcrumb separators, ellipsis), non-interactive calendar
     outside-month dates. It does NOT meet AA and must NEVER be used for eyebrows, captions, table
     headers, step numbering, or any other text the user is expected to read. Use --color-text-muted
     for those cases (7.24:1 light / 4.78:1 dark = AA in both). */
  --color-text-faint:     light-dark(var(--gray-400), var(--gray-800));
  --color-text-inverted:  light-dark(var(--white), var(--black));
  --color-text-link:      var(--color-accent-strong); /* strong variant so links pass AA on light surface */
  --color-text-link-hover:var(--color-accent-active);

  /* ─── Surfaces / Backgrounds ─── */
  --color-surface:        light-dark(var(--white), var(--black));
  --color-surface-raised: light-dark(var(--white), var(--gray-1000));
  --color-surface-sunken: light-dark(var(--gray-100), var(--black));
  --color-surface-overlay:light-dark(var(--white), var(--gray-1000));
  --color-surface-contrast: var(--black);
  --color-on-surface-contrast: var(--white);

  /* ─── Borders ─── */
  /* --color-border: decorative separator between regions (fails 3:1, por diseño).
     --color-border-interactive: bordes de controles (inputs, buttons, checkboxes)
        que DEBEN pasar WCAG 1.4.11 3:1 contra su surface. gray-500 da 3.07:1 light
        / 7.42:1 dark — ambos AA. */
  --color-border:             light-dark(var(--gray-200), var(--gray-900));
  --color-border-strong:      light-dark(var(--gray-300), var(--gray-800));
  --color-border-muted:       light-dark(var(--gray-100), var(--gray-950));
  --color-border-interactive: light-dark(var(--gray-500), var(--gray-500));
  --color-border-accent:      var(--color-accent);

  /* ─── Fills (interactive backgrounds) ─── */
  --color-fill:        light-dark(var(--gray-100), var(--gray-950));
  --color-fill-hover:  light-dark(var(--gray-200), var(--gray-900));
  --color-fill-active: light-dark(var(--gray-300), var(--gray-800));

  /* ─── Strong variants (AA-compliant for text on light surfaces) ─── */
  --color-accent-strong:     var(--color-accent-hover);                   /* blue-600 light, 5.88:1 vs white */
  --color-success-strong:    light-dark(var(--green-700), var(--green-300)); /* 5.92:1 light, 6.22:1 dark */
  --color-danger-strong:     light-dark(var(--red-500),   var(--red-300));   /* 6.93:1 light, 4.63:1 dark */
  --color-info-strong:       light-dark(var(--teal-700),  var(--teal-300)); /* 5.27:1 light */
  --color-warning-strong:    light-dark(var(--orange-700), var(--orange-300)); /* 6.29:1 light */

  /* ─── Aliases (compatibility) ─── */
  --color-background-hover:  var(--color-fill-hover);
  --color-background-active: var(--color-fill-active);
  --color-border-hover:      var(--color-border-strong);
  --color-fill-subtle:       light-dark(var(--gray-50), var(--gray-950));
  --color-surface-hover:     var(--color-fill-hover);
  --color-surface-active:    var(--color-fill-active);
  --color-text-primary:      var(--color-text);

  /* ─── Overlay / Backdrop ─── */
  --color-overlay: light-dark(rgb(0, 0, 0, 0.4), rgb(0, 0, 0, 0.6));

  /* ─── Separator ─── */
  --color-separator: light-dark(var(--gray-200), var(--gray-900));

  /* ─── Focus Ring ─── */
  --color-focus-ring: var(--color-accent);

  /* ─── Selection ─── */
  --color-selection-bg:   light-dark(var(--blue-100), var(--blue-900));
  --color-selection-text: light-dark(var(--black), var(--white));

  /* ─── Form States ─── */
  --color-input-bg:               light-dark(var(--gray-100), var(--gray-1000));
  --color-input-bg-hover:         light-dark(var(--white), var(--gray-950));
  --color-input-border:           var(--color-border-interactive); /* 3:1 AA en ambos modos */
  --color-input-border-focus:     var(--color-accent);
  --color-input-placeholder:      light-dark(var(--gray-700), var(--gray-500)); /* AA on input bg */
  --color-input-disabled-bg:      light-dark(var(--gray-200), var(--gray-950));
  --color-input-disabled-text:    light-dark(var(--gray-400), var(--gray-800));
  --color-input-error-border:     var(--color-danger);
  --color-input-focus-ring:       light-dark(rgb(0, 122, 255, 0.15), rgb(10, 132, 255, 0.25));

  /* ─── Disabled ─── */
  --color-disabled-bg:   light-dark(var(--gray-200), var(--gray-950));
  --color-disabled-text: light-dark(var(--gray-400), var(--gray-800));

  /* ─── Elevation Shadows ───
     light-dark() only accepts <color> values, so we decompose:
     define theme-aware shadow colors, then compose box-shadows from them.
     This gives us automatic light/dark shadow switching. */

  --shadow-color-1: light-dark(rgb(0, 0, 0, 0.05), rgb(0, 0, 0, 0.3));
  --shadow-color-2: light-dark(rgb(0, 0, 0, 0.06), rgb(0, 0, 0, 0.3));
  --shadow-color-3: light-dark(rgb(0, 0, 0, 0.07), rgb(0, 0, 0, 0.4));
  --shadow-color-4: light-dark(rgb(0, 0, 0, 0.1),  rgb(0, 0, 0, 0.4));
  --shadow-color-5: light-dark(rgb(0, 0, 0, 0.15), rgb(0, 0, 0, 0.5));
  --shadow-color-6: light-dark(rgb(0, 0, 0, 0.08), rgb(0, 0, 0, 0.4));

  --shadow-xs:
    0 1px 2px var(--shadow-color-1);

  --shadow-sm:
    0 1px 3px var(--shadow-color-4),
    0 1px 2px var(--shadow-color-2);

  --shadow-md:
    0 4px 6px var(--shadow-color-3),
    0 2px 4px var(--shadow-color-2);

  --shadow-lg:
    0 10px 15px var(--shadow-color-4),
    0 4px 6px var(--shadow-color-1);

  --shadow-xl:
    0 20px 25px var(--shadow-color-4),
    0 8px 10px var(--shadow-color-1);

  --shadow-2xl:
    0 25px 50px var(--shadow-color-5),
    0 12px 24px var(--shadow-color-6);
}

/* ─── Manual theme overrides ─── */
[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
}
/* ============================================
   RenDS — Semantic Typography Tokens
   ============================================
   Named text styles combining size, weight,
   line-height, and tracking for each role.

   Based on Apple HIG type hierarchy.
   ============================================ */

:root {
  /* Theme overrides may provide distinctive families; the semantic defaults
     remain usable when appearance.css is not loaded. */
  --font-body: var(--font-sans, system-ui, sans-serif);
  --font-heading: var(--font-body);
  /* ─── Display — Hero and page titles ─── */
  --display-lg-size:     var(--text-5xl);
  --display-lg-weight:   var(--weight-bold);
  --display-lg-leading:  var(--leading-tight);
  --display-lg-tracking: var(--tracking-tight);

  --display-md-size:     var(--text-4xl);
  --display-md-weight:   var(--weight-bold);
  --display-md-leading:  var(--leading-tight);
  --display-md-tracking: var(--tracking-tight);

  --display-sm-size:     var(--text-3xl);
  --display-sm-weight:   var(--weight-semibold);
  --display-sm-leading:  var(--leading-tight);
  --display-sm-tracking: var(--tracking-tight);

  /* ─── Title — Section headings ─── */
  --title-lg-size:       var(--text-2xl);
  --title-lg-weight:     var(--weight-semibold);
  --title-lg-leading:    var(--leading-snug);

  --title-md-size:       var(--text-xl);
  --title-md-weight:     var(--weight-semibold);
  --title-md-leading:    var(--leading-snug);

  --title-sm-size:       var(--text-lg);
  --title-sm-weight:     var(--weight-semibold);
  --title-sm-leading:    var(--leading-snug);

  /* ─── Headline — Emphasized body ─── */
  --headline-size:       var(--text-md);
  --headline-weight:     var(--weight-semibold);
  --headline-leading:    var(--leading-snug);

  /* ─── Lead — Introductory / emphasized paragraph ─── */
  --lead-size:           var(--text-xl);
  --lead-weight:         var(--weight-regular);
  --lead-leading:        var(--leading-relaxed);
  --lead-tracking:       var(--tracking-normal);

  /* ─── Body — Default content ─── */
  --body-lg-size:        var(--text-md);
  --body-lg-weight:      var(--weight-regular);
  --body-lg-leading:     var(--leading-normal);

  --body-size:           var(--text-base);
  --body-weight:         var(--weight-regular);
  --body-leading:        var(--leading-normal);

  --body-sm-size:        var(--text-sm);
  --body-sm-weight:      var(--weight-regular);
  --body-sm-leading:     var(--leading-normal);

  /* ─── Label — UI controls, buttons ─── */
  --label-lg-size:       var(--text-base);
  --label-lg-weight:     var(--weight-medium);

  --label-size:          var(--text-sm);
  --label-weight:        var(--weight-medium);

  --label-sm-size:       var(--text-xs);
  --label-sm-weight:     var(--weight-medium);

  /* ─── Caption — Small secondary text ─── */
  --caption-size:        var(--text-sm);
  --caption-weight:      var(--weight-regular);
  --caption-leading:     var(--leading-normal);

  --caption-sm-size:     var(--text-xs);
  --caption-sm-weight:   var(--weight-regular);

  /* ─── Code — Monospace ─── */
  --code-size:           0.875em; /* relative to parent */
  --code-weight:         var(--weight-regular);
  --code-family:         var(--font-mono);

  /* ─── Aliases (compatibility) ─── */
  --label-md-size:       var(--label-size);
  --label-md-weight:     var(--label-weight);
  --font-size-body:      var(--body-size);
  --font-size-body-sm:   var(--body-sm-size);
  --font-size-caption:   var(--caption-size);
  --font-size-label:     var(--label-size);
  --font-size-xs:        var(--text-xs);
  --font-weight-semibold:var(--weight-semibold);
  --line-height-body:    var(--body-leading);
  --line-height-caption: var(--caption-leading);
  --leading-5:           var(--leading-normal);
  --size-body-sm:        var(--body-sm-size);
}
/* ============================================
   RenDS — Dual Type System (Productive vs Expressive)
   ============================================
   Inspired by IBM Carbon's two-scale approach.

   Two type *modes* share the same token API but
   tune the values for different contexts:

     Productive  — default. Compact, dense, works
                   for dashboards, tables, settings.
                   Smaller body, tight leading.

     Expressive  — for marketing, onboarding, hero
                   pages, documentation. Larger body,
                   relaxed leading, more tracking on
                   display text.

   Activate Expressive mode by setting data-type-mode
   at any level of the tree:

     <html data-type-mode="expressive">
     <section data-type-mode="expressive">
     <article data-type-mode="productive">

   Nesting works — deeper attributes override.
   Scope is local because these are CSS custom properties.
   ============================================ */

/* ═══════════════════════════════════════════════
   PRODUCTIVE (default)
   ═══════════════════════════════════════════════
   Optimized for density, scanning, complex UI. */

:root,
:root[data-type-mode="productive"],
[data-type-mode="productive"] {
  /* Body */
  --body-size:          var(--text-base);    /* 16px */
  --body-leading:       var(--leading-normal); /* 1.5 */
  --body-tracking:      var(--tracking-normal);

  --body-lg-size:       var(--text-md);      /* 17px */
  --body-lg-leading:    var(--leading-normal);

  --body-sm-size:       var(--text-sm);      /* 14px */
  --body-sm-leading:    var(--leading-normal);

  /* Lead — intro paragraphs */
  --lead-size:          var(--text-lg);      /* compact lead */
  --lead-leading:       var(--leading-relaxed);
  --lead-tracking:      var(--tracking-normal);

  /* Display — page titles */
  --display-lg-leading: var(--leading-tight);
  --display-lg-tracking:var(--tracking-tight);
  --display-md-leading: var(--leading-tight);
  --display-md-tracking:var(--tracking-tight);

  /* Title — section headings */
  --title-lg-leading:   var(--leading-snug);
  --title-md-leading:   var(--leading-snug);
  --title-sm-leading:   var(--leading-snug);

  /* Weight — productive favors medium for emphasis */
  --productive-emphasis-weight: var(--weight-semibold);
}

/* ═══════════════════════════════════════════════
   EXPRESSIVE
   ═══════════════════════════════════════════════
   Optimized for reading, marketing, storytelling. */

:root[data-type-mode="expressive"],
[data-type-mode="expressive"] {
  /* Body — 1 step up, more breathing room */
  --body-size:          var(--text-md);      /* 17px vs 16px */
  --body-leading:       var(--leading-relaxed); /* 1.625 vs 1.5 */
  --body-tracking:      var(--tracking-normal);

  --body-lg-size:       var(--text-lg);      /* 19px */
  --body-lg-leading:    var(--leading-relaxed);

  --body-sm-size:       var(--text-base);    /* 16px vs 14px */
  --body-sm-leading:    var(--leading-relaxed);

  /* Lead — bigger, airier */
  --lead-size:          var(--text-2xl);
  --lead-leading:       var(--leading-relaxed);
  --lead-tracking:      var(--tracking-normal);

  /* Display — more dramatic, more tracked */
  --display-lg-leading: var(--leading-none);   /* ultra tight */
  --display-lg-tracking:var(--tracking-tighter);
  --display-md-leading: var(--leading-none);
  --display-md-tracking:var(--tracking-tighter);

  /* Title — a touch more relaxed */
  --title-lg-leading:   var(--leading-normal);
  --title-md-leading:   var(--leading-normal);
  --title-sm-leading:   var(--leading-normal);

  /* Weight — expressive favors bold for display */
  --productive-emphasis-weight: var(--weight-bold);
}

/* ═══════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════
   Classes to apply the mode without a data attribute,
   useful for one-off sections inside a page. */

.ren-type-productive { /* alias for readability */ }
.ren-type-productive[data-type-mode],
.ren-type-expressive[data-type-mode] {
  /* no-op: already set via attribute selector above */
}

.ren-type-expressive {
  --body-size:          var(--text-md);
  --body-leading:       var(--leading-relaxed);
  --body-lg-size:       var(--text-lg);
  --body-sm-size:       var(--text-base);
  --lead-size:          var(--text-2xl);
  --lead-leading:       var(--leading-relaxed);
  --display-lg-leading: var(--leading-none);
  --display-lg-tracking:var(--tracking-tighter);
}
/* ============================================
   RenDS — Dynamic Type Scale
   ============================================
   Apple HIG-inspired adaptive typography system.
   4 size categories that respond to user preference
   using CSS clamp() for fluid scaling.

   Categories:
     1. xSmall  — compact UI (dense data, toolbars)
     2. Default — standard experience
     3. Large   — comfortable reading
     4. xLarge  — accessibility, low vision

   Usage:
     <html data-type-scale="large">
     OR auto via prefers-contrast / prefers-reduced-motion

   Each scale adjusts: base size, min touch target,
   spacing multiplier, and line-height.
   ============================================ */

/* ─── Default Scale (base) ─── */
:root,
[data-type-scale="default"] {
  --type-scale-factor:     1;
  --type-base:             1rem;        /* 16px */
  --type-min-target:       2.75rem;     /* 44px */
  --type-spacing-factor:   1;
  --type-leading-factor:   1;

  /* Fluid sizes using clamp() */
  --type-display:   clamp(1.75rem, 1.5rem + 1.25vw, 2.125rem);   /* 28–34px */
  --type-lead:      clamp(1.125rem, 1.0625rem + 0.3125vw, 1.25rem); /* 18–20px */
  --type-title:     clamp(1.25rem, 1.125rem + 0.625vw, 1.375rem); /* 20–22px */
  --type-headline:  clamp(1rem, 0.9375rem + 0.3125vw, 1.0625rem); /* 16–17px */
  --type-body:      1rem;                                           /* 16px */
  --type-callout:   0.9375rem;                                      /* 15px */
  --type-subhead:   0.875rem;                                       /* 14px */
  --type-footnote:  0.8125rem;                                      /* 13px */
  --type-caption:   0.75rem;                                        /* 12px */
  --type-caption2:  0.6875rem;                                      /* 11px */
}

/* ─── xSmall — Compact / Dense UI ─── */
[data-type-scale="xsmall"] {
  --type-scale-factor:     0.85;
  --type-base:             0.875rem;    /* 14px */
  --type-min-target:       2.5rem;      /* 40px — still touch-friendly */
  --type-spacing-factor:   0.85;
  --type-leading-factor:   0.95;

  --type-display:   clamp(1.5rem, 1.25rem + 1.25vw, 1.75rem);
  --type-lead:      1rem;
  --type-title:     clamp(1.0625rem, 1rem + 0.3125vw, 1.125rem);
  --type-headline:  0.9375rem;
  --type-body:      0.875rem;
  --type-callout:   0.8125rem;
  --type-subhead:   0.75rem;
  --type-footnote:  0.6875rem;
  --type-caption:   0.625rem;
  --type-caption2:  0.5625rem;
}

/* ─── Large — Comfortable Reading ─── */
[data-type-scale="large"] {
  --type-scale-factor:     1.15;
  --type-base:             1.125rem;    /* 18px */
  --type-min-target:       3rem;        /* 48px */
  --type-spacing-factor:   1.15;
  --type-leading-factor:   1.1;

  --type-display:   clamp(2rem, 1.75rem + 1.25vw, 2.5rem);
  --type-lead:      clamp(1.25rem, 1.1875rem + 0.3125vw, 1.375rem);
  --type-title:     clamp(1.375rem, 1.25rem + 0.625vw, 1.625rem);
  --type-headline:  1.1875rem;
  --type-body:      1.125rem;
  --type-callout:   1.0625rem;
  --type-subhead:   1rem;
  --type-footnote:  0.9375rem;
  --type-caption:   0.875rem;
  --type-caption2:  0.8125rem;
}

/* ─── xLarge — Accessibility / Low Vision ─── */
[data-type-scale="xlarge"] {
  --type-scale-factor:     1.35;
  --type-base:             1.375rem;    /* 22px */
  --type-min-target:       3.5rem;      /* 56px */
  --type-spacing-factor:   1.3;
  --type-leading-factor:   1.2;

  --type-display:   clamp(2.5rem, 2rem + 2.5vw, 3.25rem);
  --type-lead:      clamp(1.5rem, 1.375rem + 0.625vw, 1.75rem);
  --type-title:     clamp(1.75rem, 1.5rem + 1.25vw, 2.125rem);
  --type-headline:  1.5rem;
  --type-body:      1.375rem;
  --type-callout:   1.25rem;
  --type-subhead:   1.1875rem;
  --type-footnote:  1.125rem;
  --type-caption:   1.0625rem;
  --type-caption2:  1rem;
}

/* ─── Auto: respect OS accessibility settings ─── */
@media (prefers-contrast: more) {
  :root:not([data-type-scale]) {
    --type-scale-factor:   1.15;
    --type-base:           1.125rem;
    --type-min-target:     3rem;
    --type-spacing-factor: 1.15;
    --type-leading-factor: 1.1;
  }
}

/* ─── Adaptive spacing that scales with type ─── */
:root {
  --type-space-xs:  calc(var(--space-1) * var(--type-spacing-factor));
  --type-space-sm:  calc(var(--space-2) * var(--type-spacing-factor));
  --type-space-md:  calc(var(--space-3) * var(--type-spacing-factor));
  --type-space-lg:  calc(var(--space-4) * var(--type-spacing-factor));
  --type-space-xl:  calc(var(--space-6) * var(--type-spacing-factor));
  --type-space-2xl: calc(var(--space-8) * var(--type-spacing-factor));
}

/* ─── Adaptive line-height ─── */
:root {
  --type-leading-tight:   calc(1.2 * var(--type-leading-factor));
  --type-leading-snug:    calc(1.375 * var(--type-leading-factor));
  --type-leading-normal:  calc(1.5 * var(--type-leading-factor));
  --type-leading-relaxed: calc(1.625 * var(--type-leading-factor));
}

/* ─── Utility classes for type roles ─── */
.type-display  { font-size: var(--type-display);  font-weight: var(--weight-bold);     line-height: var(--type-leading-tight); letter-spacing: var(--tracking-tight); }
.type-lead     { font-size: var(--type-lead);     font-weight: var(--weight-regular);  line-height: var(--type-leading-relaxed); color: var(--color-text-secondary); }
.type-title    { font-size: var(--type-title);    font-weight: var(--weight-semibold); line-height: var(--type-leading-snug); }
.type-headline { font-size: var(--type-headline); font-weight: var(--weight-semibold); line-height: var(--type-leading-snug); }
.type-body     { font-size: var(--type-body);     font-weight: var(--weight-regular);  line-height: var(--type-leading-normal); }
.type-callout  { font-size: var(--type-callout);  font-weight: var(--weight-regular);  line-height: var(--type-leading-normal); }
.type-subhead  { font-size: var(--type-subhead);  font-weight: var(--weight-regular);  line-height: var(--type-leading-normal); }
.type-footnote { font-size: var(--type-footnote); font-weight: var(--weight-regular);  line-height: var(--type-leading-normal); }
.type-caption  { font-size: var(--type-caption);  font-weight: var(--weight-regular);  line-height: var(--type-leading-normal); }
.type-caption2 { font-size: var(--type-caption2); font-weight: var(--weight-regular);  line-height: var(--type-leading-normal); }

/* ─── Bold variants ─── */
.type-body-bold     { font-size: var(--type-body);     font-weight: var(--weight-semibold); line-height: var(--type-leading-normal); }
.type-callout-bold  { font-size: var(--type-callout);  font-weight: var(--weight-semibold); line-height: var(--type-leading-normal); }
.type-subhead-bold  { font-size: var(--type-subhead);  font-weight: var(--weight-semibold); line-height: var(--type-leading-normal); }
.type-footnote-bold { font-size: var(--type-footnote); font-weight: var(--weight-semibold); line-height: var(--type-leading-normal); }
.type-caption-bold  { font-size: var(--type-caption);  font-weight: var(--weight-semibold); line-height: var(--type-leading-normal); }
/* ============================================
   RenDS — Semantic Spacing Tokens
   ============================================
   Intent-based spacing tokens that sit between
   primitive scale (--space-1, --space-2, …) and
   component-specific tokens (--ren-card-padding).

   Use these in custom layouts and one-off compositions
   so the meaning of the space is visible in the CSS.

   Inspired by Polaris semantic spacing.

   When in doubt:
     - card / panel padding   → --space-card
     - form vertical rhythm   → --space-form-gap
     - section between blocks → --space-section
     - header / page top      → --space-page
   ============================================ */

:root {
  /* ─── Container insets ─────────────────────
     Padding inside surfaces (cards, panels, dialogs). */
  --space-card-padding:        var(--space-6);  /* 24 */
  --space-card-padding-sm:     var(--space-4);  /* 16 */
  --space-card-padding-lg:     var(--space-8);  /* 32 */

  --space-panel-padding:       var(--space-6);
  --space-dialog-padding:      var(--space-6);
  --space-toast-padding:       var(--space-4);

  /* ─── Form rhythm ──────────────────────────
     Stacking and clustering inside forms. */
  --space-form-gap:            var(--space-5);  /* 20 — between fields */
  --space-form-gap-tight:      var(--space-3);  /* 12 */
  --space-form-gap-loose:      var(--space-8);  /* 32 — between sections */

  --space-field-label-gap:     var(--space-2);  /* label ↔ input */
  --space-field-helper-gap:    var(--space-1);  /* input ↔ helper text */

  --space-fieldset-gap:        var(--space-6);  /* between fieldsets */

  /* ─── List & menu rhythm ───────────────────
     Vertical gap between adjacent list rows. */
  --space-list-gap:            var(--space-2);
  --space-list-gap-tight:      var(--space-1);
  --space-menu-item-gap:       var(--space-1);

  /* ─── Inline grouping ──────────────────────
     For ren-cluster / ren-row content. */
  --space-inline-tight:        var(--space-2);  /* button + icon */
  --space-inline:              var(--space-3);  /* default cluster gap */
  --space-inline-loose:        var(--space-4);  /* spacious cluster */

  /* ─── Section & page rhythm ────────────────
     Vertical gap between major content blocks. */
  --space-section:             var(--space-12); /* 48 — between sections */
  --space-section-lg:          var(--space-16); /* 64 — hero spacing */
  --space-section-sm:          var(--space-8);  /* 32 — tight sections */

  --space-page-top:            var(--space-12); /* page header below nav */
  --space-page-bottom:         var(--space-16); /* page footer breathing room */

  /* ─── Stack defaults ───────────────────────
     Default --gap value for ren-stack utilities.
     Override per-instance with style="--gap: …" */
  --space-stack-tight:         var(--space-2);
  --space-stack:               var(--space-4);
  --space-stack-loose:         var(--space-6);

  /* ─── Density-aware aliases ────────────────
     These shift with [data-density] on <html>.
     Defaults to "comfortable" values. */
  --space-density-card:        var(--space-card-padding);
  --space-density-form:        var(--space-form-gap);
  --space-density-row:         var(--space-3);
}

/* ─── Density: compact ─── */
:root[data-density="compact"] {
  --space-density-card:        var(--space-4);
  --space-density-form:        var(--space-3);
  --space-density-row:         var(--space-2);
  --space-card-padding:        var(--space-4);
  --space-form-gap:            var(--space-3);
}

/* ─── Density: spacious ─── */
:root[data-density="spacious"] {
  --space-density-card:        var(--space-8);
  --space-density-form:        var(--space-6);
  --space-density-row:         var(--space-4);
  --space-card-padding:        var(--space-8);
  --space-form-gap:            var(--space-6);
}
/* ============================================
   RenDS — Semantic Motion Tokens
   ============================================
   Maps primitive durations + easings into
   INTENT-based motion tokens. Components should
   reach for these, not the primitives.

   Think of these as "presets" at the token level:
   every pair is a (duration, ease) decision that
   has already been made correctly for its intent.

   Categories:
     · State:    enter / exit / in-place / emphasize
     · Scale:    micro (feedback) → macro (route change)
     · Surface:  overlay / sheet / menu / tooltip

   Use the composed --transition-* tokens when you
   need a ready-to-paste `transition:` value.

   All tokens automatically collapse to 0ms under
   prefers-reduced-motion via tokens/primitives/motion.css.
   ============================================ */

:root {
  /* ─── INTENT DURATIONS ─────────────────────────
     Name by *role*, not by value. If later you need
     every enter to be 50ms faster, change one token. */

  --duration-micro:       var(--duration-fastest);  /* 50ms   — pixel-level feedback */
  --duration-tactile:     var(--duration-fast);     /* 100ms  — hover, focus, press */
  --duration-state:       var(--duration-normal);   /* 150ms  — toggle, checkbox */
  --duration-enter:       var(--duration-moderate); /* 250ms  — widget appearing */
  --duration-exit:        var(--duration-fast);     /* 100ms  — widget leaving (always faster than enter) */
  --duration-emphasize:   var(--duration-slower);   /* 450ms  — hero transitions */
  --duration-route:       var(--duration-slow);     /* 300ms  — page change */
  --duration-overlay:     var(--duration-moderate); /* 250ms  — dialog/sheet/popover scrim */

  /* ─── INTENT EASINGS ──────────────────────────── */
  --ease-enter:           var(--ease-decelerate);
  --ease-exit:            var(--ease-accelerate);
  --ease-state-change:    var(--ease-standard);
  --ease-attention:       var(--ease-emphasized-decelerate);
  --ease-playful:         var(--ease-spring-soft);

  /* ─── INFINITE LOOP ──────────────────────────────
     Continuous animations — spinners, skeletons, icon
     rotations. These do NOT collapse under
     prefers-reduced-motion (that would freeze the
     indicator visually); components using them are
     expected to swap to a reduced-motion variant that
     itself reaches for loop tokens. */

  --duration-loop:         1s;     /* spinner, icon-spin */
  --duration-loop-slow:    1.5s;   /* skeleton pulse */
  --duration-loop-gentle:  2s;     /* reduced-motion opacity pulse */

  --ease-loop:             linear;                        /* constant rotation */
  --ease-loop-smooth:      cubic-bezier(0.4, 0, 0.2, 1);  /* breathy rotation */
  --ease-loop-pulse:       ease-in-out;                   /* gentle in/out cycle */

  /* ─── READY-TO-PASTE TRANSITION PRESETS ─────────
     Use as:
       transition: var(--transition-tactile);
     or compose property-specific:
       transition: opacity var(--duration-enter) var(--ease-enter),
                   transform var(--duration-enter) var(--ease-enter);
  */

  /* Tactile: hover/focus/press. Affects colors + borders + shadows. */
  --transition-tactile:
    color           var(--duration-tactile) var(--ease-state-change),
    background-color var(--duration-tactile) var(--ease-state-change),
    border-color    var(--duration-tactile) var(--ease-state-change),
    box-shadow      var(--duration-tactile) var(--ease-state-change),
    opacity         var(--duration-tactile) var(--ease-state-change);

  /* State change: aria-expanded, aria-pressed, data-state. Adds transform. */
  --transition-state:
    color           var(--duration-state) var(--ease-state-change),
    background-color var(--duration-state) var(--ease-state-change),
    border-color    var(--duration-state) var(--ease-state-change),
    box-shadow      var(--duration-state) var(--ease-state-change),
    transform       var(--duration-state) var(--ease-state-change),
    opacity         var(--duration-state) var(--ease-state-change);

  /* Enter: mounting a widget (dialog, menu, toast, popover).
     Use together with @starting-style for open animation. */
  --transition-enter:
    opacity   var(--duration-enter) var(--ease-enter),
    transform var(--duration-enter) var(--ease-enter),
    filter    var(--duration-enter) var(--ease-enter);

  /* Exit: unmounting. ALWAYS shorter than enter. */
  --transition-exit:
    opacity   var(--duration-exit) var(--ease-exit),
    transform var(--duration-exit) var(--ease-exit),
    filter    var(--duration-exit) var(--ease-exit);

  /* Overlay: backdrop / scrim / dialog body composited move. */
  --transition-overlay:
    opacity         var(--duration-overlay) var(--ease-enter),
    background-color var(--duration-overlay) var(--ease-enter),
    backdrop-filter var(--duration-overlay) var(--ease-enter),
    overlay         var(--duration-overlay) allow-discrete,
    display         var(--duration-overlay) allow-discrete;

  /* Emphasize: for hero / onboarding / attention flows. */
  --transition-emphasize:
    opacity   var(--duration-emphasize) var(--ease-attention),
    transform var(--duration-emphasize) var(--ease-attention);

  /* ─── CHOREOGRAPHY ─────────────────────────────
     Stagger delay between sibling entries (applied by
     base/motion.css `.ren-stagger > *` or via JS helper). */
  --motion-stagger-step:   40ms;
  --motion-stagger-max:    10;  /* cap to avoid long total delays */
}

/* ─── REDUCED MOTION ────────────────────────────
   Collapse semantic durations under reduced-motion.
   (Primitive durations are already collapsed in
   tokens/primitives/motion.css — this keeps the
   semantic tokens in sync and removes staggering.) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-micro:     0ms;
    --duration-tactile:   0ms;
    --duration-state:     0ms;
    --duration-enter:     0ms;
    --duration-exit:      0ms;
    --duration-emphasize: 0ms;
    --duration-route:     0ms;
    --duration-overlay:   0ms;
    --motion-stagger-step: 0ms;
  }
}
/* ============================================
   RenDS — All Semantic Tokens
   ============================================ */







/* ============================================
   RenDS — Component-Level Tokens
   ============================================
   Each component exposes its own --ren-{component}-*
   custom properties. These default to semantic tokens
   but can be overridden per-component or per-theme.

   This is the "Appearance API" layer — the formal
   contract for theming individual components.

   Usage:
     .my-theme .ren-btn {
       --ren-btn-bg: hotpink;
       --ren-btn-radius: 999px;
     }

   Constraint-driven: only the properties that matter
   are exposed. No "change everything" escape hatch.
   ============================================ */

/* ═══════════════════════════════════════════════
   BUTTON
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-btn-height:       var(--size-lg);
  --ren-btn-padding-x:    var(--space-4);
  --ren-btn-padding-y:    var(--space-2);
  --ren-btn-font-size:    var(--label-lg-size);
  --ren-btn-font-weight:  var(--label-lg-weight);
  --ren-btn-radius:       var(--radius-md);
  --ren-btn-gap:          var(--space-2);
  --ren-btn-border-width: var(--stroke-1);

  /* Primary colors (default) */
  --ren-btn-bg:           var(--color-accent);
  --ren-btn-bg-hover:     var(--color-accent-hover);
  --ren-btn-bg-active:    var(--color-accent-active);
  --ren-btn-color:        var(--color-on-accent);
  --ren-btn-border-color: var(--color-accent);

  /* Focus ring */
  --ren-btn-ring-color:   var(--color-focus-ring);
  --ren-btn-ring-offset:  var(--ring-offset-width);
  --ren-btn-ring-width:   var(--ring-width);

  /* Motion */
  --ren-btn-duration:     var(--duration-state);
  --ren-btn-easing:       var(--ease-enter);
}

/* ═══════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-card-bg:            var(--color-surface-raised);
  --ren-card-border-color:  var(--color-border);
  --ren-card-border-width:  var(--stroke-1);
  --ren-card-radius:        var(--radius-lg);
  --ren-card-padding:       var(--space-4);
  --ren-card-shadow:        none;
  --ren-card-header-gap:    var(--space-1);
  --ren-card-gap:           0px;
}

/* ═══════════════════════════════════════════════
   INPUT / FIELD
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-field-height:        var(--size-lg);
  --ren-field-padding-x:     var(--space-3);
  --ren-field-padding-y:     var(--space-2);
  --ren-field-font-size:     var(--body-size);
  --ren-field-radius:        var(--radius-md);
  --ren-field-border-color:  var(--color-border-interactive);
  --ren-field-border-width:  var(--stroke-1);
  --ren-field-bg:            var(--color-input-bg);
  --ren-field-color:         var(--color-text);
  --ren-field-placeholder:   var(--color-input-placeholder);
  --ren-field-focus-color:   var(--color-input-border-focus);
  --ren-field-error-color:   var(--color-input-error-border);
  --ren-field-success-color: var(--color-success);
}

/* ═══════════════════════════════════════════════
   BADGE
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-badge-height:      auto;
  --ren-badge-padding-x:   0.55em;
  --ren-badge-font-size:   var(--text-xs);
  --ren-badge-font-weight: var(--weight-semibold);
  --ren-badge-radius:      var(--radius-full);
  --ren-badge-bg:          var(--color-fill);
  --ren-badge-color:       var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════
   TAG
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-tag-height:       auto;
  --ren-tag-padding-x:    0.65em;
  --ren-tag-font-size:    var(--caption-size);
  --ren-tag-font-weight:  var(--weight-medium);
  --ren-tag-radius:       var(--radius-full);
  --ren-tag-bg:           var(--color-fill);
  --ren-tag-color:        var(--color-text);
  --ren-tag-border-color: var(--color-border);
  --ren-tag-gap:          var(--space-1);
}

/* ═══════════════════════════════════════════════
   BANNER / ALERT
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-banner-padding:      var(--space-3) var(--space-4);
  --ren-banner-radius:       var(--radius-md);
  --ren-banner-border-width: var(--stroke-1);
  --ren-banner-gap:          var(--space-3);
  --ren-banner-icon-size:    var(--icon-lg);
  --ren-banner-bg:           var(--color-info-subtle);
  --ren-banner-border-color: color-mix(in oklch, var(--color-info), transparent 70%);
  --ren-banner-color:        var(--color-text);
}

/* ═══════════════════════════════════════════════
   DIALOG
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-dialog-width:        min(90vw, 500px);
  --ren-dialog-padding:      var(--space-6);
  --ren-dialog-radius:       var(--radius-xl);
  --ren-dialog-bg:           var(--color-surface-overlay);
  --ren-dialog-border-color: var(--color-border);
  --ren-dialog-shadow:       var(--shadow-xl);
  --ren-dialog-gap:          var(--space-4);
  --ren-dialog-backdrop:     rgb(0, 0, 0, 0.5);

  /* Motion */
  --ren-dialog-duration:     var(--duration-normal);
  --ren-dialog-easing:       var(--ease-out);
}

/* ═══════════════════════════════════════════════
   SHEET
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-sheet-width:      320px;
  --ren-sheet-bg:         var(--color-surface-overlay);
  --ren-sheet-border:     var(--color-border);
  --ren-sheet-radius:     0;
  --ren-sheet-shadow:     var(--shadow-xl);
  --ren-sheet-padding:    var(--space-6);
  --ren-sheet-backdrop:   rgb(0, 0, 0, 0.5);

  /* Motion */
  --ren-sheet-duration:   var(--duration-normal);
  --ren-sheet-easing:     var(--ease-out);
}

/* ═══════════════════════════════════════════════
   TOOLTIP
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-tooltip-bg:        var(--color-text);
  --ren-tooltip-color:     var(--color-text-inverted);
  --ren-tooltip-font-size: var(--caption-sm-size);
  --ren-tooltip-padding-x: var(--space-3);
  --ren-tooltip-padding-y: var(--space-1);
  --ren-tooltip-radius:    var(--radius-md);
  --ren-tooltip-shadow:    var(--shadow-sm);

  /* Motion */
  --ren-tooltip-duration:  var(--duration-fast);
  --ren-tooltip-easing:    var(--ease-out);
  --ren-tooltip-delay:     500ms;
}

/* ═══════════════════════════════════════════════
   POPOVER
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-popover-width:        280px;
  --ren-popover-bg:           var(--color-surface-overlay);
  --ren-popover-border-color: var(--color-border);
  --ren-popover-radius:       var(--radius-lg);
  --ren-popover-shadow:       var(--shadow-lg);
  --ren-popover-padding:      var(--space-4);

  /* Motion */
  --ren-popover-duration:     var(--duration-normal);
  --ren-popover-easing:       var(--ease-out);
}

/* ═══════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-tabs-height:         var(--size-lg);
  --ren-tabs-font-size:      var(--label-size);
  --ren-tabs-font-weight:    var(--label-weight);
  --ren-tabs-color:          var(--color-text-muted);
  --ren-tabs-active-color:   var(--color-text);
  --ren-tabs-indicator-color:var(--color-accent);
  --ren-tabs-border-color:   var(--color-border);
  --ren-tabs-gap:            0;

  /* Motion */
  --ren-tabs-duration:       var(--duration-fast);
  --ren-tabs-easing:         var(--ease-out);
}

/* ═══════════════════════════════════════════════
   CHECKBOX & SWITCH
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-checkbox-size:        1.25rem;
  --ren-checkbox-radius:      var(--radius-sm);
  --ren-checkbox-border:      var(--color-border-interactive);
  --ren-checkbox-checked-bg:  var(--color-accent);
  --ren-checkbox-checked-color: var(--color-on-accent);
  --ren-checkbox-gap:         var(--space-2);

  /* Motion */
  --ren-checkbox-duration:    var(--duration-state);
  --ren-checkbox-easing:      var(--ease-playful);
}

:where(:root, [data-theme]) {
  --ren-switch-width:       3.1875rem;  /* 51px Apple HIG */
  --ren-switch-height:      1.9375rem;  /* 31px Apple HIG */
  --ren-switch-thumb-size:  1.6875rem;  /* 27px */
  --ren-switch-bg:          var(--color-fill-active);
  --ren-switch-checked-bg:  var(--color-success);
  --ren-switch-thumb-color: var(--white);

  /* Motion */
  --ren-switch-duration:    var(--duration-state);
  --ren-switch-easing:      var(--ease-state-change);
}

/* ═══════════════════════════════════════════════
   SLIDER
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-slider-track-height:  6px;
  --ren-slider-track-radius:  var(--radius-full);
  --ren-slider-track-bg:      var(--color-fill);
  --ren-slider-fill-color:    var(--color-accent);
  --ren-slider-thumb-size:    20px;
  --ren-slider-thumb-bg:      var(--color-surface);
  --ren-slider-thumb-border:  var(--color-accent);
  --ren-slider-thumb-shadow:  var(--shadow-sm);

  /* Motion */
  --ren-slider-duration:      var(--duration-fast);
  --ren-slider-easing:        var(--ease-out);
}

/* ═══════════════════════════════════════════════
   TOGGLE GROUP
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-toggle-height:       var(--size-lg);
  --ren-toggle-padding-x:    var(--space-4);
  --ren-toggle-font-size:    var(--label-size);
  --ren-toggle-font-weight:  var(--label-weight);
  --ren-toggle-radius:       var(--radius-md);
  --ren-toggle-bg:           var(--color-fill);
  --ren-toggle-active-bg:    var(--color-surface);
  --ren-toggle-active-color: var(--color-text);
  --ren-toggle-color:        var(--color-text-muted);
}

/* ═══════════════════════════════════════════════
   AVATAR
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-avatar-size:     var(--avatar-md);
  --ren-avatar-radius:   var(--radius-full);
  --ren-avatar-bg:       var(--color-fill);
  --ren-avatar-color:    var(--color-text-secondary);
  --ren-avatar-font-size:var(--text-sm);
  --ren-avatar-border:   2px solid var(--color-surface);
}

/* ═══════════════════════════════════════════════
   BREADCRUMB
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-breadcrumb-font-size:  var(--caption-size);
  --ren-breadcrumb-color:      var(--color-text-muted);
  --ren-breadcrumb-active-color: var(--color-text);
  --ren-breadcrumb-separator:  var(--breadcrumb-separator, '\203A');
  --ren-breadcrumb-gap:        var(--space-1);
}

/* ═══════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-pagination-size:        var(--size-lg);
  --ren-pagination-font-size:   var(--label-size);
  --ren-pagination-radius:      var(--radius-md);
  --ren-pagination-gap:         var(--space-1);
  --ren-pagination-bg:          transparent;
  --ren-pagination-hover-bg:    var(--color-fill);
  --ren-pagination-active-bg:   var(--color-accent);
  --ren-pagination-active-color:var(--color-on-accent);
}

/* ═══════════════════════════════════════════════
   PROGRESS
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-progress-height:     8px;
  --ren-progress-radius:     var(--radius-full);
  --ren-progress-bg:         var(--color-fill);
  --ren-progress-fill:       var(--color-accent);

  /* Motion */
  --ren-progress-duration:   var(--duration-state);
  --ren-progress-easing:     var(--ease-enter);
}

/* ═══════════════════════════════════════════════
   SPINNER
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-spinner-size:   var(--icon-lg);
  --ren-spinner-width:  2.5px;
  --ren-spinner-color:  var(--color-accent);
  --ren-spinner-speed:  1s;
}

/* ═══════════════════════════════════════════════
   SKELETON
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-skeleton-bg:      var(--color-fill);
  --ren-skeleton-shine:   var(--color-fill-hover);
  --ren-skeleton-radius:  var(--radius-sm);
  --ren-skeleton-speed:   var(--duration-loop-slow);
}

/* ═══════════════════════════════════════════════
   SEPARATOR
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-separator-color:  var(--color-separator);
  --ren-separator-width:  var(--stroke-1);
  --ren-separator-margin: var(--space-4);
}

/* ═══════════════════════════════════════════════
   LINK
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-link-color:       var(--color-text-link);
  --ren-link-hover-color: var(--color-text-link-hover);
  --ren-link-underline:   1px;
  --ren-link-font-weight: inherit;
}

/* ═══════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-nav-height:       3.5rem;
  --ren-nav-bg:           var(--color-surface);
  --ren-nav-border:       var(--color-border);
  --ren-nav-padding-x:    var(--space-4);
  --ren-nav-link-color:   var(--color-text-muted);
  --ren-nav-link-active:  var(--color-text);
  --ren-nav-gap:          var(--space-6);
}

/* ═══════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-sidebar-width:         260px;
  --ren-sidebar-collapsed-width: 60px;
  --ren-sidebar-bg:            var(--color-surface-sunken);
  --ren-sidebar-border:        var(--color-border);
  --ren-sidebar-item-height:   var(--size-lg);
  --ren-sidebar-item-radius:   var(--radius-md);
  --ren-sidebar-item-padding:  var(--space-2) var(--space-3);
  --ren-sidebar-active-bg:     var(--color-accent-subtle);
  --ren-sidebar-active-color:  var(--color-accent);

  /* Motion */
  --ren-sidebar-duration:      var(--duration-normal);
  --ren-sidebar-easing:        var(--ease-out);
}

/* ═══════════════════════════════════════════════
   COMMAND
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-command-width:      min(95vw, 560px);
  --ren-command-max-height: 340px;
  --ren-command-radius:     var(--radius-xl);
  --ren-command-bg:         var(--color-surface-overlay);
  --ren-command-border:     var(--color-border);
  --ren-command-shadow:     var(--shadow-xl);
  --ren-command-item-height:var(--size-lg);
  --ren-command-item-radius:var(--radius-md);
}

/* ═══════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-table-header-bg:    var(--color-surface-sunken);
  --ren-table-header-color: var(--color-text-muted);
  --ren-table-header-weight:var(--weight-semibold);
  --ren-table-header-size:  var(--label-sm-size);
  --ren-table-row-height:   var(--size-lg);
  --ren-table-cell-padding: var(--space-3);
  --ren-table-border-color: var(--color-border-muted);
  --ren-table-stripe-bg:    var(--color-surface-sunken);
  --ren-table-hover-bg:     var(--color-fill);
  --ren-table-selected-bg:  var(--color-accent-subtle);
}

/* ═══════════════════════════════════════════════
   MENU
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-menu-width:        200px;
  --ren-menu-padding:      var(--space-1);
  --ren-menu-radius:       var(--radius-lg);
  --ren-menu-bg:           var(--color-surface-overlay);
  --ren-menu-border:       var(--color-border);
  --ren-menu-shadow:       var(--shadow-lg);
  --ren-menu-item-height:  var(--size-md);
  --ren-menu-item-padding: var(--space-2) var(--space-3);
  --ren-menu-item-radius:  var(--radius-sm);
  --ren-menu-item-hover-bg:var(--color-fill);
  --ren-menu-danger-color: var(--color-danger);

  /* Motion */
  --ren-menu-duration:     var(--duration-fast);
  --ren-menu-easing:       var(--ease-out);
}

/* ═══════════════════════════════════════════════
   CALENDAR
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-calendar-width:       280px;
  --ren-calendar-day-size:    var(--size-md);
  --ren-calendar-radius:      var(--radius-lg);
  --ren-calendar-bg:          var(--color-surface);
  --ren-calendar-border:      var(--color-border);
  --ren-calendar-today-bg:    var(--color-accent-subtle);
  --ren-calendar-selected-bg: var(--color-accent);
  --ren-calendar-selected-color: var(--color-on-accent);
  --ren-calendar-range-bg:    var(--color-accent-subtle);
}

/* ═══════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-toast-width:       360px;
  --ren-toast-padding:     var(--space-4);
  --ren-toast-radius:      var(--radius-lg);
  --ren-toast-bg:          var(--color-surface-raised);
  --ren-toast-border:      var(--color-border);
  --ren-toast-shadow:      var(--shadow-lg);
  --ren-toast-gap:         var(--space-3);
  --ren-toast-duration:    5000ms;

  /* Motion */
  --ren-toast-anim-duration: var(--duration-normal);
  --ren-toast-easing:        var(--ease-out);
}

/* ═══════════════════════════════════════════════
   DROPZONE
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-dropzone-padding:      var(--space-8);
  --ren-dropzone-radius:       var(--radius-lg);
  --ren-dropzone-border-color: var(--color-border-strong);
  --ren-dropzone-border-style: dashed;
  --ren-dropzone-border-width: 2px;
  --ren-dropzone-bg:           transparent;
  --ren-dropzone-hover-bg:     var(--color-accent-subtle);
  --ren-dropzone-hover-border: var(--color-accent);
}

/* ═══════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-empty-padding:     var(--space-10);
  --ren-empty-icon-size:   3rem;
  --ren-empty-gap:         var(--space-3);
  --ren-empty-title-size:  var(--title-sm-size);
  --ren-empty-desc-color:  var(--color-text-muted);
  --ren-empty-max-width:   24rem;
}

/* ═══════════════════════════════════════════════
   COLLAPSIBLE / ACCORDION
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-collapse-radius:       var(--radius-lg);
  --ren-collapse-border:       var(--color-border);
  --ren-collapse-bg:           var(--color-surface);
  --ren-collapse-padding:      var(--space-4);
  --ren-collapse-trigger-font: var(--label-lg-size);
  --ren-collapse-trigger-weight: var(--weight-semibold);

  /* Motion */
  --ren-collapse-duration:       var(--duration-normal);
  --ren-collapse-easing:         var(--ease-out);
}

/* ═══════════════════════════════════════════════
   TOOLBAR
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-toolbar-height:      var(--size-lg);
  --ren-toolbar-padding:     var(--space-1);
  --ren-toolbar-radius:      var(--radius-lg);
  --ren-toolbar-bg:          var(--color-surface-raised);
  --ren-toolbar-border:      var(--color-border);
  --ren-toolbar-item-size:   var(--size-md);
  --ren-toolbar-item-radius: var(--radius-sm);
  --ren-toolbar-item-hover:  var(--color-fill);
  --ren-toolbar-active-bg:   var(--color-accent-subtle);
}

/* ═══════════════════════════════════════════════
   COLOR PICKER
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-cp-width:       280px;
  --ren-cp-radius:      var(--radius-lg);
  --ren-cp-bg:          var(--color-surface-overlay);
  --ren-cp-shadow:      var(--shadow-lg);
  --ren-cp-swatch-size: 24px;
  --ren-cp-handle-size: 16px;
  --ren-cp-track-height:12px;
}

/* ═══════════════════════════════════════════════
   CAROUSEL
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-carousel-gap:        var(--space-4);
  --ren-carousel-radius:     var(--radius-lg);
  --ren-carousel-arrow-size: var(--size-lg);
  --ren-carousel-dot-size:   8px;
  --ren-carousel-dot-active: var(--color-accent);
  --ren-carousel-dot-color:  var(--color-fill);

  /* Motion */
  --ren-carousel-duration:   var(--duration-normal);
  --ren-carousel-easing:     var(--ease-out);
}

/* ═══════════════════════════════════════════════
   KBD
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-kbd-bg:          var(--color-surface-sunken);
  --ren-kbd-border:      var(--color-border-strong);
  --ren-kbd-color:       var(--color-text);
  --ren-kbd-font-size:   var(--caption-size);
  --ren-kbd-font-family: var(--font-mono);
  --ren-kbd-padding:     0.1em 0.4em;
  --ren-kbd-radius:      var(--radius-sm);
}

/* ═══════════════════════════════════════════════
   ICON
   ═══════════════════════════════════════════════ */
:where(:root, [data-theme]) {
  --ren-icon-size:       var(--icon-md);
  --ren-icon-color:      currentColor;
  --ren-icon-fill:       currentColor;
}

/* (accordion + carousel duplicates removed — defined above) */
/* ============================================
   RenDS — Design Tokens
   ============================================
   Import order matters:
   1. Primitives (raw values)
   2. Semantic (meaningful mappings)
   ============================================ */





/* ============================================
   RenDS — Modern CSS Reset
   ============================================
   A sensible, modern reset that:
   - Removes default margins/padding
   - Sets box-sizing: border-box globally
   - Normalizes typography
   - Improves image defaults
   - Sets accessible defaults (focus, motion)
   - Preserves semantic meaning

   Based on: Andy Bell's Modern Reset + Josh Comeau's
   Custom Reset + Apple HIG accessibility standards.
   ============================================ */

/* ═══ RTL SUPPORT ═══ */
:root {
  /* Detected from html[dir] or auto from browser */
}

[dir="rtl"] {
  direction: rtl;
}

/* ─── Box Model ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ─── Enable height: auto transitions ───
   Allows CSS to animate to/from height: auto,
   enabling smooth accordion/collapsible animations
   without JavaScript. */
:root {
  interpolate-size: allow-keywords;
}

/* ─── Remove default margins ─── */
* {
  margin: 0;
}

/* ─── Prevent font-size inflation on mobile ─── */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* ─── Core body defaults ─── */
body {
  min-height: 100dvh;
  line-height: var(--leading-normal, 1.5);
  font-family: var(--font-body, var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif));
  font-size: var(--body-size, 1rem);
  color: var(--color-text);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── Typography reset ─── */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  text-wrap: balance;
}

p,
li,
figcaption {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* ─── Remove list styles on lists with role ─── */
ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

/* ─── Links ─── */
a {
  color: inherit;
  text-decoration-skip-ink: auto;
}

/* ─── Media defaults ─── */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ─── Inherit fonts for form controls ─── */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* ─── Textarea ─── */
textarea {
  field-sizing: content;
  min-height: 3lh;  /* At least 3 lines */
  resize: vertical;
}

/* ─── Button reset ─── */
button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* ─── Table ─── */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ─── Remove fieldset defaults ─── */
fieldset {
  border: none;
  padding: 0;
}

/* ─── Remove summary triangle in webkit ─── */
summary {
  cursor: pointer;
}

/* ─── Dialog reset ─── */
dialog {
  padding: 0;
  border: none;
  color: inherit;
  background-color: inherit;
}

/* ─── Horizontal rule ─── */
hr {
  border: none;
  border-top: 1px solid var(--color-separator);
  height: 0;
}

/* ─── Focus visible ───
   Only show focus ring on keyboard navigation.
   Uses the system's focus ring color. */
:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset, 2px);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ─── Smooth scroll (only if no motion preference) ─── */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

/* ─── Selection ─── */
::selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-text);
}

/* ─── Scrollbar ─── */
* {
  scrollbar-color: var(--color-fill-active) transparent;
  scrollbar-width: thin;
}

/* Reduced motion is handled by semantic/component tokens. A global wildcard
   clamp would also cancel intentional alternatives (for example the spinner's
   gentle feedback) and makes computed motion contracts impossible to inspect. */
/* ============================================
   RenDS — Classless Base Styles
   ============================================
   Beautiful defaults for semantic HTML.
   No classes needed — just write good HTML
   and it looks great automatically.

   Inspired by Pico CSS philosophy + Apple HIG.
   ============================================ */

/* ─── Headings ─── */
h1 {
  font-family: var(--font-heading, var(--font-sans, sans-serif));
  font-size: var(--display-md-size);
  font-weight: var(--display-md-weight);
  line-height: var(--display-md-leading);
  letter-spacing: var(--display-md-tracking, var(--tracking-tight));
  color: var(--color-text);
  margin-block: var(--space-8) var(--space-4);
}

h2 {
  font-family: var(--font-heading, var(--font-sans, sans-serif));
  font-size: var(--title-lg-size);
  font-weight: var(--title-lg-weight);
  line-height: var(--title-lg-leading);
  color: var(--color-text);
  margin-block: var(--space-6) var(--space-3);
}

h3 {
  font-family: var(--font-heading, var(--font-sans, sans-serif));
  font-size: var(--title-md-size);
  font-weight: var(--title-md-weight);
  line-height: var(--title-md-leading);
  color: var(--color-text);
  margin-block: var(--space-5) var(--space-2);
}

h4 {
  font-family: var(--font-heading, var(--font-sans, sans-serif));
  font-size: var(--title-sm-size);
  font-weight: var(--title-sm-weight);
  line-height: var(--title-sm-leading);
  color: var(--color-text);
  margin-block: var(--space-4) var(--space-2);
}

h5 {
  font-family: var(--font-heading, var(--font-sans, sans-serif));
  font-size: var(--headline-size);
  font-weight: var(--headline-weight);
  line-height: var(--headline-leading);
  color: var(--color-text);
  margin-block: var(--space-4) var(--space-2);
}

h6 {
  font-family: var(--font-heading, var(--font-sans, sans-serif));
  font-size: var(--body-size);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  margin-block: var(--space-3) var(--space-2);
}

/* First heading: no top margin */
:is(h1, h2, h3, h4, h5, h6):first-child {
  margin-block-start: 0;
}

/* ─── Paragraphs ─── */
p {
  color: var(--color-text);
  margin-block: var(--space-3);
}

p:first-child {
  margin-block-start: 0;
}

p:last-child {
  margin-block-end: 0;
}

/* ─── Lead Paragraph ───
   Introductory / subtitle paragraph.
   Triggered by ARIA doc-subtitle role or .lead class. */
p[role="doc-subtitle"],
:is(h1, h2, h3) + p.lead {
  font-size: var(--lead-size);
  font-weight: var(--lead-weight);
  line-height: var(--lead-leading);
  letter-spacing: var(--lead-tracking);
  color: var(--color-text-secondary);
}

/* ─── Links ─── */
a:not([class]) {
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color var(--duration-normal) var(--ease-out);
}

a:not([class]):hover {
  color: var(--color-text-link-hover);
  text-decoration-thickness: 2px;
}

a:not([class]):active {
  opacity: 0.8;
}

/* ─── Strong / Bold ─── */
strong, b {
  font-weight: var(--weight-semibold);
}

/* ─── Emphasis ─── */
em, i {
  font-style: italic;
}

/* ─── Small ─── */
small {
  font-size: var(--caption-size);
  color: var(--color-text-muted);
}

/* ─── Time ───
   Semantic date/time. Tabular numerals so dates and
   times align vertically in lists, tables, logs. */
time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ─── Mark ─── */
mark {
  background-color: var(--yellow-100);
  color: var(--color-text);
  padding-inline: var(--space-1);
  border-radius: var(--radius-xs);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) mark {
    background-color: var(--yellow-800);
  }
}

[data-theme="dark"] mark {
  background-color: var(--yellow-800);
}

/* ─── Del / Ins ───
   Semantic edit tracking. Del = removed, Ins = added.
   Styled with muted/subtle color fills so that, together,
   they form a lightweight visual "diff" — useful for
   changelogs, AI edit suggestions, revision views.
   No classes required: any <del> or <ins> in the page
   picks up the treatment automatically. */
del {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-danger);
  background-color: var(--color-danger-subtle);
  color: var(--color-text);
  padding-inline: 0.15em;
  border-radius: var(--radius-xs);
}

ins {
  /* No underline: the green subtle fill is enough to signal
     "added". Keeping underline would duplicate the signal
     and conflict with <a> underlines. */
  text-decoration: none;
  background-color: var(--color-success-subtle);
  color: var(--color-text);
  padding-inline: 0.15em;
  border-radius: var(--radius-xs);
}

/* Diff pair: when del and ins sit adjacent, they read as
   "this → that". A small gap makes the intent scannable. */
del + ins,
ins + del {
  margin-inline-start: 0.25em;
}

/* ─── Code (inline) ─── */
code:not(pre code) {
  font-family: var(--code-family);
  font-size: var(--code-size);
  background-color: var(--color-fill);
  color: var(--color-text);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
}

/* ─── Code Blocks ─── */
pre {
  font-family: var(--code-family);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  background-color: var(--color-surface-sunken);
  color: var(--color-text);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-block: var(--space-4);
  border: 1px solid var(--color-border);
  tab-size: 2;
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* ─── Kbd ─── */
kbd {
  font-family: var(--code-family);
  font-size: var(--caption-size);
  font-weight: var(--weight-medium);
  background-color: var(--color-surface-sunken);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-bottom-width: 2px;
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* ─── Samp ───
   Sample output from a program. Monospace like <code>,
   but muted color so it reads as output vs. input code. */
samp {
  font-family: var(--code-family);
  font-size: var(--code-size);
  color: var(--color-text-secondary);
  background-color: var(--color-surface-sunken);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

/* Inside <pre>, strip the pill treatment so samp
   blends into block formatting */
pre samp {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  color: inherit;
}

/* ─── Var ───
   Mathematical/programmatic variable. Italic is the
   classic convention. Inherits font-family from context
   so it blends into prose, and tabular-nums keeps any
   numeric subscripts/exponents aligned. */
var {
  font-style: italic;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* ─── Blockquote ─── */
blockquote {
  border-inline-start: 3px solid var(--color-accent);
  padding-inline-start: var(--space-4);
  margin-inline: 0;
  margin-block: var(--space-4);
  color: var(--color-text-secondary);
  font-style: italic;
}

blockquote > p {
  color: inherit;
}

/* ─── Cite ───
   Reference to a creative work, author, or source.
   Standalone: italic + muted. Inside a blockquote, it
   gets an em-dash prefix and separates from the quote. */
cite {
  font-style: italic;
  color: var(--color-text-secondary);
}

blockquote > cite,
blockquote > footer > cite,
blockquote > p + cite {
  display: block;
  font-style: normal;
  font-size: var(--caption-size);
  color: var(--color-text-secondary);
  margin-block-start: var(--space-2);
}

blockquote > cite::before,
blockquote > footer > cite::before,
blockquote > p + cite::before {
  content: "— ";
}

/* ─── Q (inline quote) ─── */
q {
  font-style: italic;
  color: var(--color-text-secondary);
}

/* ─── Lists ─── */
ul, ol {
  padding-inline-start: var(--space-6);
  margin-block: var(--space-3);
}

li {
  margin-block: var(--space-1);
  color: var(--color-text);
}

li::marker {
  color: var(--color-text-muted);
}

/* Nested lists */
:is(ul, ol) :is(ul, ol) {
  margin-block: var(--space-1);
}

/* Description lists */
dl {
  margin-block: var(--space-3);
}

dt {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-block-start: var(--space-2);
}

dd {
  margin-inline-start: var(--space-4);
  color: var(--color-text-secondary);
}

/* ─── Horizontal Rule ─── */
hr {
  margin-block: var(--space-6);
  border-top-color: var(--color-separator);
}

/* ─── Figure / Figcaption ─── */
figure {
  margin-inline: 0;
  margin-block: var(--space-4);
}

figcaption {
  font-size: var(--caption-size);
  color: var(--color-text-muted);
  margin-block-start: var(--space-2);
  text-align: center;
}

/* ─── Table ─── */
table {
  width: 100%;
  margin-block: var(--space-4);
  font-size: var(--text-sm);
}

caption {
  caption-side: top;
  font-size: var(--label-size);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-align: start;
  padding-block-end: var(--space-2);
}

thead {
  border-block-end: 2px solid var(--color-border-strong);
}

tfoot {
  border-block-start: 2px solid var(--color-border-strong);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

th {
  font-weight: var(--weight-semibold);
  text-align: start;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
}

td {
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-secondary);
  border-block-end: 1px solid var(--color-border);
}

tbody tr:hover {
  background-color: var(--color-fill);
}

/* ─── Forms (native) ─── */
label {
  display: block;
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--color-text);
  margin-block-end: var(--space-1);
}

/* ─── Fieldset & Legend ───
   Native HTML grouping for related form controls.
   Reset removes the browser default; Primitive Zero
   re-introduces a subtle group with the legend acting
   as a proper sub-heading. */
fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4) var(--space-3);
  margin-block: var(--space-4);
  min-inline-size: 0; /* prevent fieldset min-width quirk */
}

legend {
  padding-inline: var(--space-2);
  margin-inline-start: calc(var(--space-2) * -1);
  font-size: var(--body-size);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-normal);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
  display: block;
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  font-size: var(--body-size);
  color: var(--color-text);
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--duration-normal) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):hover,
select:hover,
textarea:hover {
  background-color: var(--color-input-bg-hover);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  /* Transparent outline is invisible in normal rendering but becomes
     system-colored in Windows Forced Colors mode, where box-shadow
     is stripped. Guarantees a visible focus ring in high contrast. */
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
  background-color: var(--color-input-bg-hover);
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--color-input-disabled-bg);
  color: var(--color-input-disabled-text);
  cursor: not-allowed;
  opacity: 0.7;
}

::placeholder {
  color: var(--color-input-placeholder);
  opacity: 1;
}

/* ─── Select ─── */

/* Fallback: appearance: none + SVG chevron (all browsers) */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-inline-end: var(--space-10);
}

/* Modern: appearance: base-select (Chrome 135+, Edge 135+)
   Enables full CSS control over the dropdown picker.
   BOTH select and ::picker(select) must opt in.
   Ref: Vanilla Web v3, Ch. 3 — Firtman / Open UI spec */
@supports (appearance: base-select) {
  /* ── Opt-in ── */
  select,
  select::picker(select) {
    appearance: base-select;
  }

  /* ── Trigger button ── */
  select {
    display: flex;
    align-items: center;
    background-image: none;
    padding-inline-end: var(--space-3);
  }

  /* Arrow pushed to far right */
  select::picker-icon {
    color: var(--color-text-muted);
    opacity: 0.6;
    margin-inline-start: auto;
    padding-inline-start: var(--space-3);
    transition: rotate var(--duration-fast) var(--ease-out);
  }

  select:open::picker-icon {
    rotate: 180deg;
  }

  /* Hide native checkmark — we use ::after instead */
  option::checkmark {
    display: none;
  }

  /* ── Dropdown popover ── */
  select::picker(select) {
    background: var(--color-surface-overlay);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgb(0, 0, 0, 0.08),
                0 1px 3px rgb(0, 0, 0, 0.06);
    padding: var(--space-1);
    margin-block-start: var(--space-1);
    overflow: clip;
  }

  /* ── Options ── */
  option {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: 4px;
    color: var(--color-text);
    background: transparent;
    cursor: pointer;
  }

  option + option {
    margin-block-start: 1px;
  }

  option:hover {
    background: light-dark(var(--gray-50), var(--gray-800));
  }

  option:focus-visible,
  option:active {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
    background: light-dark(var(--gray-50), var(--gray-800));
  }

  option:checked:not(:disabled) {
    background: light-dark(var(--blue-50), var(--blue-900));
    color: light-dark(var(--blue-700), var(--blue-200));
    font-weight: var(--weight-medium);
  }

  option:checked:not(:disabled)::after {
    content: "✓";
    margin-inline-start: auto;
    color: light-dark(var(--blue-600), var(--blue-300));
    font-weight: var(--weight-bold);
  }

  option:checked:hover {
    background: light-dark(var(--blue-100), var(--blue-800));
  }

  option:disabled {
    color: light-dark(var(--gray-500), var(--gray-400));
    cursor: not-allowed;
  }

  /* Hide placeholder option from dropdown */
  option[hidden] {
    display: none;
  }

  /* ── Optgroups ── */
  optgroup {
    padding: var(--space-1) 0;
    padding-inline-start: 0;
  }

  optgroup:not(:first-of-type) {
    border-block-start: 1px solid var(--color-border);
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-2);
  }

  optgroup > legend,
  optgroup > label {
    padding: var(--space-1) var(--space-3);
    margin-inline-start: var(--space-3);
  }

  /* ── Open state on trigger — no double ring ── */
  select:open {
    border-color: var(--color-input-border-focus);
    box-shadow: 0 0 0 3px var(--color-input-focus-ring);
  }
}

/* ─── Buttons (native) ─── */
button:not([class]),
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  font-size: var(--label-lg-size);
  font-weight: var(--label-lg-weight);
  color: var(--color-on-accent);
  background-color: var(--color-accent);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  user-select: none;
}

button:not([class]):hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
  background-color: var(--color-accent-hover);
}

button:not([class]):active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
  background-color: var(--color-accent-active);
  transform: scale(0.98);
}

button:not([class]):disabled,
input[type="submit"]:disabled {
  background-color: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  cursor: not-allowed;
  transform: none;
}

/* ─── Checkbox & Radio ─── */
input[type="checkbox"],
input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--color-accent);
  cursor: pointer;
  vertical-align: middle;
}

/* ─── Range ─── */
input[type="range"] {
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* ─── File ─── */
input[type="file"] {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

input[type="file"]::file-selector-button {
  font: inherit;
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  padding: var(--space-1) var(--space-3);
  margin-inline-end: var(--space-3);
  background-color: var(--color-fill);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-out);
}

input[type="file"]::file-selector-button:hover {
  background-color: var(--color-fill-hover);
}

/* ─── Output ───
   Form-associated element for showing a calculated
   result. Tabular numerics so values align vertically
   when stacked; medium weight to read as "result". */
output {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* ─── Progress ─── */
progress {
  width: 100%;
  height: 0.5rem;
  appearance: none;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--color-fill);
}

progress::-webkit-progress-bar {
  background-color: var(--color-fill);
  border-radius: var(--radius-full);
}

progress::-webkit-progress-value {
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

progress::-moz-progress-bar {
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
}

/* ─── Meter ───
   Semantic gauge: renders with different colors based on
   value vs. low/high/optimum attributes.
     - optimum range  → success
     - sub-optimum    → warning
     - far from opt.  → danger
   Browsers require vendor-prefixed pseudo-elements. */
meter {
  width: 100%;
  height: 0.5rem;
  appearance: none;
  border: none;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--color-fill);
}

/* Accessibility note:
   The semantic --color-success/warning/danger tokens are
   tuned for text and icons on surface backgrounds. On the
   meter's gray track they drop below the 3:1 UI contrast
   minimum in light mode. We use light-dark() to swap to
   darker variants on light backgrounds, keeping the Apple
   -400 tones on dark backgrounds where they pop. */

/* WebKit (Chrome, Safari, Edge) */
meter::-webkit-meter-bar {
  background-color: var(--color-fill);
  border: none;
  border-radius: var(--radius-full);
}

meter::-webkit-meter-optimum-value {
  background-color: light-dark(var(--green-600), var(--green-400));
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

meter::-webkit-meter-suboptimum-value {
  background-color: light-dark(var(--orange-600), var(--orange-400));
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

meter::-webkit-meter-even-less-good-value {
  background-color: light-dark(var(--red-500), var(--red-400));
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-out);
}

/* Firefox */
meter::-moz-meter-bar {
  border-radius: var(--radius-full);
}

meter:-moz-meter-optimum::-moz-meter-bar {
  background-color: light-dark(var(--green-600), var(--green-400));
}

meter:-moz-meter-sub-optimum::-moz-meter-bar {
  background-color: light-dark(var(--orange-600), var(--orange-400));
}

meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background-color: light-dark(var(--red-500), var(--red-400));
}

/* ─── Details / Summary (Accordion) ─── */
details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-block: var(--space-2);
}

details[open] {
  padding-block-end: var(--space-4);
}

summary {
  font-weight: var(--weight-medium);
  color: var(--color-text);
  padding: var(--space-1) 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

summary::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-inline-end: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(-45deg);
  transition: transform var(--duration-normal) var(--ease-out);
  flex-shrink: 0;
}

details[open] > summary::after {
  transform: rotate(45deg);
}

summary::-webkit-details-marker {
  display: none;
}

details[open] > summary {
  margin-block-end: var(--space-3);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

/* ─── Dialog (native) ─── */
dialog {
  background-color: var(--color-surface-overlay);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6);
  max-width: min(600px, 90vw);
  width: 100%;
  color: var(--color-text);
}

dialog::backdrop {
  background-color: var(--color-overlay);
}

/* ─── Iframe ───
   Embedded content (YouTube, Vimeo, maps, etc.).
   16:9 aspect-ratio is the web's de facto video default,
   so an <iframe> "just works" without a wrapper. If the
   content isn't video, override aspect-ratio locally. */
iframe {
  display: block;
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
}

/* ─── Audio ───
   Native audio player. Full width matches the <video>
   treatment in reset.css for consistent media blocks. */
audio {
  display: block;
  width: 100%;
}

/* ─── Abbr ─── */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* ─── Address ─── */
address {
  font-style: normal;
  color: var(--color-text-secondary);
}

/* ─── Sup / Sub ─── */
sup, sub {
  font-size: 0.75em;
}
/* ============================================
   RenDS — Utility Classes
   ============================================
   Minimal, essential utilities that are hard
   to achieve with just semantic HTML.

   Naming: .ren-{utility}
   ============================================ */

/* ─── Screen Reader Only ───
   Visually hidden but accessible to screen readers.
   Essential for a11y labels, skip links, etc. */
.ren-sr-only,
.ren-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* Becomes visible on focus (skip links) */
.ren-sr-only-focusable:focus,
.ren-sr-only-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

/* ─── Not Screen Reader ───
   Hide from screen readers but visible */
.ren-not-sr[aria-hidden="true"] {
  speak: never;
}

/* ─── Focus Ring ───
   Explicit focus ring for custom components */
.ren-focus-ring:focus-visible {
  outline: var(--ring-width, 2px) solid var(--color-focus-ring);
  outline-offset: var(--ring-offset-width, 2px);
}

/* ─── Skip Link ───
   Accessibility skip navigation link */
.ren-skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-max);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top var(--duration-normal) var(--ease-out);
}

.ren-skip-link:focus {
  top: var(--space-4);
}

/* ─── Lead Text ───
   Introductory paragraph — larger, more relaxed body text.
   Use for article intros, hero subtitles, or section summaries. */
.ren-lead {
  font-size: var(--lead-size);
  font-weight: var(--lead-weight);
  line-height: var(--lead-leading);
  letter-spacing: var(--lead-tracking);
  color: var(--color-text-secondary);
}

/* ─── Truncate Text ─── */
.ren-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Truncate with line clamp */
.ren-line-clamp-1 { -webkit-line-clamp: 1; }
.ren-line-clamp-2 { -webkit-line-clamp: 2; }
.ren-line-clamp-3 { -webkit-line-clamp: 3; }

.ren-line-clamp-1,
.ren-line-clamp-2,
.ren-line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Color Scheme ───
   Force light/dark on specific sections */
.ren-light { color-scheme: light; }
.ren-dark  { color-scheme: dark;  }

/* ─── Disabled state ─── */
.ren-disabled,
[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Loading state ─── */
.ren-loading {
  position: relative;
  pointer-events: none;
}

.ren-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-surface);
  opacity: 0.7;
  border-radius: inherit;
}

/* ─── Divider ───
   Semantic separator with text */
.ren-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--caption-size);
}

.ren-divider::before,
.ren-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-separator);
}

/* Empty divider (no text) */
.ren-divider:empty::before {
  flex: 1;
}
.ren-divider:empty::after {
  display: none;
}

/* ─── Responsive ─── */
.ren-hide-mobile {
  @media (max-width: 639px) { display: none !important; }
}

.ren-hide-desktop {
  @media (min-width: 640px) { display: none !important; }
}

/* ─── Transitions ─── */
.ren-transition {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: var(--duration-normal);
  transition-timing-function: var(--ease-out);
}

.ren-transition-fast {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-out);
}

/* ─── Opt-in pending state ───
   Add data-ren-pending while an application deliberately waits for a
   custom-element upgrade. No-JS/server-rendered content remains visible. */
[data-ren-pending] {
  opacity: 0;
  transition: opacity var(--duration-fast, 150ms) var(--ease-out, ease-out);
}
[data-ren-pending="false"] {
  opacity: 1;
}

/* ─── Data State Helpers (Radix-inspired) ───
   Standardized state selectors for components */

/* Open/Closed States */
[data-state="open"]    { --state: open; }
[data-state="closed"]  { --state: closed; }

/* Active/Inactive States */
[data-state="active"]   { --state: active; }
[data-state="inactive"] { --state: inactive; }

/* Checked/Unchecked States */
[data-state="checked"]      { --state: checked; }
[data-state="unchecked"]    { --state: unchecked; }
[data-state="indeterminate"] { --state: indeterminate; }

/* On/Off States */
[data-state="on"]  { --state: on; }
[data-state="off"] { --state: off; }

/* Loading States */
[data-state="loading"] { --state: loading; }
[data-state="loaded"]  { --state: loaded; }

/* Error State */
[data-state="error"] { --state: error; }

/* Interaction States */
[data-state="dragging"] { --state: dragging; }

/* Validation States */
[data-state="valid"]   { --state: valid; }
[data-state="invalid"] { --state: invalid; }

/* Disabled State */
[data-disabled] {
  pointer-events: none;
  opacity: 0.5;
}

/* Highlighted State */
[data-highlighted] { }

/* Orientation States */
[data-orientation="horizontal"] { --orientation: horizontal; }
[data-orientation="vertical"]   { --orientation: vertical; }

/* Hide closed elements */
[data-state="closed"]:not([data-keep]) {
  display: none;
}
/* ============================================
   RenDS — Layout Primitives
   ============================================
   Composable layout patterns based on
   Every Layout (Heydon Pickering & Andy Bell).

   These are the building blocks for any layout.
   Each solves ONE specific layout problem.
   ============================================ */

/* ─── Stack ───
   Vertical flow with consistent spacing.
   The most common layout pattern.

   Usage:
   <div class="ren-stack">
     <p>First</p>
     <p>Second</p>
     <p>Third</p>
   </div>

   Custom gap: style="--stack-gap: var(--space-6)"
*/
.ren-stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-density-row, var(--space-4)));
}

/* Stack variants */
.ren-stack-xs { --stack-gap: var(--space-1); }
.ren-stack-sm { --stack-gap: var(--space-2); }
.ren-stack-md { --stack-gap: var(--space-4); }
.ren-stack-lg { --stack-gap: var(--space-6); }
.ren-stack-xl { --stack-gap: var(--space-8); }

/* ─── Cluster ───
   Horizontal wrapping items with gap.
   For tags, buttons, inline elements.

   Usage:
   <div class="ren-cluster">
     <span>Tag 1</span>
     <span>Tag 2</span>
     <span>Tag 3</span>
   </div>
*/
.ren-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-3));
  align-items: var(--cluster-align, center);
}

/* ─── Row ───
   Horizontal non-wrapping flex.
   For inline layouts that shouldn't wrap.

   Usage:
   <div class="ren-row">
     <span>Left</span>
     <span>Right</span>
   </div>
*/
.ren-row {
  display: flex;
  align-items: var(--row-align, center);
  gap: var(--row-gap, var(--space-3));
}

/* Push last child to the end */
.ren-row-spread {
  display: flex;
  align-items: center;
  gap: var(--row-gap, var(--space-3));
  justify-content: space-between;
}

/* ─── Center ───
   Horizontally centered content with max-width.
   The classic content container.

   Usage:
   <main class="ren-center">
     <h1>Content</h1>
     <p>Centered with comfortable reading width.</p>
   </main>
*/
.ren-center {
  max-width: var(--center-width, var(--width-5xl));
  margin-inline: auto;
  padding-inline: var(--center-padding, var(--space-4));
}

/* Center variants */
.ren-center-narrow { --center-width: var(--width-2xl); }
.ren-center-prose  { --center-width: var(--width-prose); }
.ren-center-wide   { --center-width: var(--width-7xl); }

/* ─── Sidebar Layout ───
   Content + sidebar. Sidebar has intrinsic width,
   content fills remaining space.
   Stacks on narrow screens.

   Usage:
   <div class="ren-with-sidebar">
     <aside>Sidebar content</aside>
     <main>Main content</main>
   </div>
*/
/* NOTE: For a CSS Grid-based sidebar with animation support,
   see .ren-sidebar-grid in grid.css. This flexbox version
   remains for simple sidebar-content layouts. */
.ren-with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap, var(--space-6));
}

.ren-with-sidebar > :first-child {
  flex-basis: var(--sidebar-width, 16rem);
  flex-grow: 1;
}

.ren-with-sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min, 50%);
}

/* ─── Grid ───
   Auto-responsive grid.
   Items automatically wrap based on min-width.

   Usage:
   <div class="ren-grid">
     <div>Card 1</div>
     <div>Card 2</div>
     <div>Card 3</div>
   </div>

   Custom min: style="--grid-min: 300px"
*/
/* NOTE: For the full CSS Grid system (12-col, subgrid, bento, etc.),
   see grid.css. This is the simple auto-responsive grid. */
.ren-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--grid-min, 15rem)), 1fr)
  );
  gap: var(--grid-gap, var(--space-4));
}

/* Grid with explicit columns */
.ren-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ren-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ren-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Responsive: stack on mobile */
@media (max-width: 639px) {
  .ren-grid-2,
  .ren-grid-3,
  .ren-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ─── Cover ───
   Vertically centered content in full viewport.
   For hero sections, login pages, etc.

   Usage:
   <div class="ren-cover">
     <header>Top</header>
     <main>Centered content</main>
     <footer>Bottom</footer>
   </div>
*/
.ren-cover {
  display: flex;
  flex-direction: column;
  min-height: var(--cover-height, 100dvh);
  padding: var(--space-4);
}

.ren-cover h1,
.ren-cover h2,
.ren-cover h3 {
  text-wrap: balance;
}

.ren-cover > * {
  margin-block: var(--space-4);
}

.ren-cover > :first-child:not(.ren-cover-center) {
  margin-block-start: 0;
}

.ren-cover > :last-child:not(.ren-cover-center) {
  margin-block-end: 0;
}

.ren-cover > .ren-cover-center,
.ren-cover > :nth-child(2):not(:last-child) {
  margin-block: auto;
}

/* ─── Frame ───
   Aspect ratio container.

   Usage:
   <div class="ren-frame">
     <img src="photo.jpg" alt="...">
   </div>
*/
.ren-frame {
  aspect-ratio: var(--frame-ratio, 16 / 9);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ren-frame > img,
.ren-frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ren-frame-square { --frame-ratio: 1; }
.ren-frame-video  { --frame-ratio: 16 / 9; }
.ren-frame-photo  { --frame-ratio: 4 / 3; }

/* ─── Switcher ───
   Horizontal when space allows, vertical when not.
   Like flexbox wrap but with a threshold.

   Usage:
   <div class="ren-switcher">
     <div>First</div>
     <div>Second</div>
     <div>Third</div>
   </div>
*/
.ren-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, var(--space-4));
}

.ren-switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
}

/* ─── Reel ───
   Horizontal scroll container (carousel base).

   Usage:
   <div class="ren-reel">
     <div>Item 1</div>
     <div>Item 2</div>
     <div>Item 3</div>
   </div>
*/
.ren-reel {
  display: flex;
  gap: var(--reel-gap, var(--space-4));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: var(--reel-gap, var(--space-4));
  -webkit-overflow-scrolling: touch;
}

.ren-reel > * {
  flex: 0 0 var(--reel-item-width, auto);
  scroll-snap-align: start;
}

/* Hide scrollbar but keep functionality */
.ren-reel-hidden-scroll {
  scrollbar-width: none;
}

.ren-reel-hidden-scroll::-webkit-scrollbar {
  display: none;
}

/* ─── Container Query Utilities ───
   Make any element a container for responsive children.
   Components inside adapt to their container, not the viewport.

   Usage:
   <div class="ren-container">
     <div class="ren-container-responsive">
       Adapts based on container width
     </div>
   </div>
*/
.ren-container {
  container-type: inline-size;
}

.ren-container-name {
  container-type: inline-size;
  container-name: var(--container-name, none);
}

/* Common responsive patterns using container queries */
@container (max-width: 30rem) {
  .ren-cq-stack {
    flex-direction: column;
  }

  .ren-cq-hide {
    display: none;
  }

  .ren-cq-full {
    width: 100%;
  }
}

@container (min-width: 30rem) {
  .ren-cq-row {
    flex-direction: row;
  }
}

@container (min-width: 45rem) {
  .ren-cq-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (min-width: 60rem) {
  .ren-cq-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ============================================================================
   RENDS GRID SYSTEM
   ============================================================================
   A production-ready, vanilla CSS Grid implementation with fluid scaling,
   responsive breakpoints, and advanced layout patterns.

   Design philosophy:
   - Mobile-first responsive design with sensible defaults
   - Flexible use of CSS custom properties for runtime configuration
   - Modern patterns: RAM (Repeat Auto-fit Minmax), Holy Albatross, Pancake Stack
   - Accessibility-first with proper nesting and progressive enhancement
   - No dependencies—pure CSS Grid with @supports fallbacks

   Table of Contents:
   1. Grid Custom Properties (CSS Variables)
   2. Page Grid — Full-Bleed Layout System
   3. Column Grid — 12-Column Explicit System
   4. RAM Pattern — Auto-Responsive Grid
   5. Pancake Stack — Header/Main/Footer Layout
   6. Sidebar Grid — Two-Column with Collapse
   7. Holy Albatross — Binary Layout Switch
   8. Bento Grid — Irregular Apple-Style Layout
   9. Subgrid Utilities — Cross-Component Alignment
   10. Quantity Queries — Content-Driven Responsiveness
   11. Performance Utilities — Optimization & Containment
   12. Accessibility — Reading Flow & Semantics
   13. Animation Utilities — Grid-Based Transitions
   14. Modular Grid — Müller-Brockmann System
   ============================================================================ */

/* ============================================================================
   1. GRID CUSTOM PROPERTIES
   ============================================================================

   Core grid configuration. These are the foundational variables that control
   spacing, sizing, and responsive behavior across all grid components.

   Usage: Customize these at :root or override per-breakpoint or per-component
   to create responsive behavior without media queries.

   Properties:
   - --grid-columns: Number of columns for 12-column grid (for explicit grids)
   - --grid-gutter: Gap between items (fluid with clamp)
   - --grid-margin: Page margins (fluid, scales with viewport)
   - --grid-max-width: Maximum width constraint for page content
   - --grid-min-item: Minimum item size for RAM auto-fit pattern

   ============================================================================ */

:root {
  /* Column count for explicit grid systems */
  --grid-columns: 12;

  /* Fluid gutters scale from 1rem at mobile to 1.5rem at desktop */
  --grid-gutter: clamp(1rem, 3vw, 1.5rem);

  /* Fluid page margins scale from 1rem mobile to 3rem desktop */
  --grid-margin: clamp(1rem, 5vw, 3rem);

  /* Maximum content width (map to --width-xl if available) */
  --grid-max-width: var(--width-7xl, 1280px);

  /* Minimum item size for responsive auto-fit grids (RAM pattern) */
  --grid-min-item: 15rem;

  /* Pancake layout height (full viewport by default) */
  --pancake-height: 100dvh;

  /* Sidebar defaults */
  --sidebar-min: 15rem;
  --sidebar-max: 25%;

  /* Bento grid tiling */
  --bento-cols: 12;
  --bento-row: 6rem;

  /* Holy Albatross breakpoint and column count */
  --albatross-bp: 40rem;
  --albatross-cols: 3;

  /* Modular grid tiling */
  --mod-cols: 6;
  --mod-row: 4.5rem;

  /* Auto-grid configuration */
  --auto-grid-min: var(--grid-min-item);
  --auto-grid-gap: var(--grid-gutter);
  --auto-grid-placement: auto-fill;

  /* Ease function for animations */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ============================================================================
   2. PAGE GRID — Full-Bleed Layout System
   ============================================================================

   Ryan Mulligan/Josh Comeau full-bleed layout pattern with five named zones:

   [full-start] [feature-start] [popout-start] [content-start] [content-end]
               [popout-end] [feature-end] [full-end]

   This allows content to break out of the main constrained width, enabling:
   - Constrained default content (grid-column: content)
   - Full-width breakout (grid-column: full)
   - Feature-width popout (grid-column: feature)
   - Medium breakout (grid-column: popout)

   Example HTML:
   ```html
   <main class="ren-page-grid">
     <article>Regular width</article>
     <figure class="ren-full-bleed">Full width image</figure>
     <p>Back to regular width</p>
     <aside class="ren-feature">Featured sidebar</aside>
   </main>
   ```

   ============================================================================ */

.ren-page-grid {
  --_gap: var(--grid-margin);
  --_full: minmax(var(--_gap), 1fr);
  --_feature: minmax(0, 5rem);
  --_popout: minmax(0, 2rem);
  --_content: min(var(--grid-max-width), 100% - var(--_gap) * 2);

  display: grid;
  grid-template-columns:
    [full-start] var(--_full)
    [feature-start] var(--_feature)
    [popout-start] var(--_popout)
    [content-start] var(--_content) [content-end]
    var(--_popout) [popout-end]
    var(--_feature) [feature-end]
    var(--_full) [full-end];
  row-gap: var(--grid-gutter);

  /* Default: all children sit in content zone */
  > * {
    grid-column: content;
  }

  /* Zone-specific children use named areas */
  > .ren-full-bleed {
    grid-column: full;
  }

  > .ren-feature {
    grid-column: feature;
  }

  > .ren-popout {
    grid-column: popout;
  }

  /* Responsive: reduce feature/popout on smaller screens */
  @media (max-width: 768px) {
    --_feature: minmax(0, 1rem);
    --_popout: 0;
  }
}

/* ============================================================================
   PROSE GRID — Narrower full-bleed for typography-focused content

   Constrains content to readable prose width (65ch) while allowing full-width
   images and breakout elements.

   Example:
   ```html
   <article class="ren-prose-grid">
     <h1>Article Title</h1>
     <figure class="ren-full-bleed"><img src="..." /></figure>
     <p>Article body text...</p>
   </article>
   ```
   ============================================================================ */

.ren-prose-grid {
  /* Keep the internal tracks self-contained so this grid can be nested or
     mounted without inheriting page-grid implementation variables. */
  --_gap: var(--grid-margin);
  --_full: minmax(var(--_gap), 1fr);
  --grid-max-width: var(--width-prose, 65ch);
  display: grid;
  grid-template-columns:
    [full-start] var(--_full)
    [feature-start] minmax(0, 2rem)
    [popout-start] minmax(0, 1rem)
    [content-start] min(var(--width-prose, 65ch), 100% - var(--_gap) * 2) [content-end]
    minmax(0, 1rem) [popout-end]
    minmax(0, 2rem) [feature-end]
    var(--_full) [full-end];
  row-gap: var(--grid-gutter);

  > * {
    grid-column: content;
  }

  > .ren-full-bleed {
    grid-column: full;
  }

  > .ren-feature {
    grid-column: feature;
  }
}

/* ============================================================================
   3. COLUMN GRID — Explicit 12-Column System
   ============================================================================

   Traditional column-based grid layout using CSS Grid's `repeat()` function.
   Provides explicit column sizing and span utilities at desktop, tablet, and
   mobile breakpoints.

   Features:
   - 12-column default (customizable via --grid-columns)
   - Explicit span classes (.ren-col-1 through .ren-col-12)
   - Start/end column placement (.ren-col-start-1, etc.)
   - Responsive overrides at standard breakpoints

   Example HTML:
   ```html
   <div class="ren-col-grid">
     <article class="ren-col-8 ren-col-md-12">Main content</article>
     <aside class="ren-col-4 ren-col-md-12">Sidebar</aside>
     <div class="ren-col-start-2 ren-col-10">Offset column</div>
   </div>
   ```

   Mobile: Full width (single column)
   Tablet (768px): Responsive overrides via .ren-col-md-*
   Desktop (1024px): Full 12-column grid with .ren-col-lg-*

   ============================================================================ */

.ren-col-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
  gap: var(--grid-gutter);
}

/* Explicit column span utilities: .ren-col-1 through .ren-col-12 */
.ren-col-1 { grid-column: span 1; }
.ren-col-2 { grid-column: span 2; }
.ren-col-3 { grid-column: span 3; }
.ren-col-4 { grid-column: span 4; }
.ren-col-5 { grid-column: span 5; }
.ren-col-6 { grid-column: span 6; }
.ren-col-7 { grid-column: span 7; }
.ren-col-8 { grid-column: span 8; }
.ren-col-9 { grid-column: span 9; }
.ren-col-10 { grid-column: span 10; }
.ren-col-11 { grid-column: span 11; }
.ren-col-12 { grid-column: span 12; }

/* Column start positioning: .ren-col-start-1 through .ren-col-start-12 */
.ren-col-start-1 { grid-column-start: 1; }
.ren-col-start-2 { grid-column-start: 2; }
.ren-col-start-3 { grid-column-start: 3; }
.ren-col-start-4 { grid-column-start: 4; }
.ren-col-start-5 { grid-column-start: 5; }
.ren-col-start-6 { grid-column-start: 6; }
.ren-col-start-7 { grid-column-start: 7; }
.ren-col-start-8 { grid-column-start: 8; }
.ren-col-start-9 { grid-column-start: 9; }
.ren-col-start-10 { grid-column-start: 10; }
.ren-col-start-11 { grid-column-start: 11; }
.ren-col-start-12 { grid-column-start: 12; }

/* Tablet breakpoint: 768px — Medium sizes */
@media (min-width: 768px) {
  .ren-col-md-1 { grid-column: span 1; }
  .ren-col-md-2 { grid-column: span 2; }
  .ren-col-md-3 { grid-column: span 3; }
  .ren-col-md-4 { grid-column: span 4; }
  .ren-col-md-5 { grid-column: span 5; }
  .ren-col-md-6 { grid-column: span 6; }
  .ren-col-md-7 { grid-column: span 7; }
  .ren-col-md-8 { grid-column: span 8; }
  .ren-col-md-9 { grid-column: span 9; }
  .ren-col-md-10 { grid-column: span 10; }
  .ren-col-md-11 { grid-column: span 11; }
  .ren-col-md-12 { grid-column: span 12; }

  .ren-col-md-start-1 { grid-column-start: 1; }
  .ren-col-md-start-2 { grid-column-start: 2; }
  .ren-col-md-start-3 { grid-column-start: 3; }
  .ren-col-md-start-4 { grid-column-start: 4; }
  .ren-col-md-start-5 { grid-column-start: 5; }
  .ren-col-md-start-6 { grid-column-start: 6; }
  .ren-col-md-start-7 { grid-column-start: 7; }
  .ren-col-md-start-8 { grid-column-start: 8; }
  .ren-col-md-start-9 { grid-column-start: 9; }
  .ren-col-md-start-10 { grid-column-start: 10; }
  .ren-col-md-start-11 { grid-column-start: 11; }
  .ren-col-md-start-12 { grid-column-start: 12; }
}

/* Desktop breakpoint: 1024px — Large sizes */
@media (min-width: 1024px) {
  .ren-col-lg-1 { grid-column: span 1; }
  .ren-col-lg-2 { grid-column: span 2; }
  .ren-col-lg-3 { grid-column: span 3; }
  .ren-col-lg-4 { grid-column: span 4; }
  .ren-col-lg-5 { grid-column: span 5; }
  .ren-col-lg-6 { grid-column: span 6; }
  .ren-col-lg-7 { grid-column: span 7; }
  .ren-col-lg-8 { grid-column: span 8; }
  .ren-col-lg-9 { grid-column: span 9; }
  .ren-col-lg-10 { grid-column: span 10; }
  .ren-col-lg-11 { grid-column: span 11; }
  .ren-col-lg-12 { grid-column: span 12; }

  .ren-col-lg-start-1 { grid-column-start: 1; }
  .ren-col-lg-start-2 { grid-column-start: 2; }
  .ren-col-lg-start-3 { grid-column-start: 3; }
  .ren-col-lg-start-4 { grid-column-start: 4; }
  .ren-col-lg-start-5 { grid-column-start: 5; }
  .ren-col-lg-start-6 { grid-column-start: 6; }
  .ren-col-lg-start-7 { grid-column-start: 7; }
  .ren-col-lg-start-8 { grid-column-start: 8; }
  .ren-col-lg-start-9 { grid-column-start: 9; }
  .ren-col-lg-start-10 { grid-column-start: 10; }
  .ren-col-lg-start-11 { grid-column-start: 11; }
  .ren-col-lg-start-12 { grid-column-start: 12; }
}

/* ============================================================================
   4. RAM PATTERN — Auto-Responsive Grid (Repeat Auto-fit Minmax)
   ============================================================================

   The Responsive Auto-responsive Multipurpose (RAM) pattern creates a grid that
   automatically adjusts the number of columns based on available space, without
   media queries. Uses `repeat(auto-fill/auto-fit, minmax(min(100%, X), 1fr))`.

   Key formula: The `min(100%, Xpx)` protects against overflow when items are
   smaller than container width.

   Variants:
   - .ren-auto-grid: Default (15rem minimum item size)
   - .ren-auto-grid-sm: Smaller items (10rem minimum)
   - .ren-auto-grid-lg: Larger items (20rem minimum)

   Example HTML:
   ```html
   \3c !-- Default: cards that reflow from 1→2→3+ columns naturally -->
   <div class="ren-auto-grid">
     <article class="ren-card">Item 1</article>
     <article class="ren-card">Item 2</article>
     <article class="ren-card">Item 3</article>
   </div>

   \3c !-- Small items: badges, tags, etc. -->
   <div class="ren-auto-grid-sm">
     <span class="ren-badge">React</span>
     <span class="ren-badge">CSS</span>
   </div>

   \3c !-- Large items: featured cards -->
   <div class="ren-auto-grid-lg">
     <section class="ren-featured">Featured 1</section>
     <section class="ren-featured">Featured 2</section>
   </div>
   ```

   Note: Customize --auto-grid-min and --auto-grid-gap at component level
   for bespoke behavior without creating new classes.

   ============================================================================ */

.ren-auto-grid {
  display: grid;
  grid-template-columns: repeat(
    var(--auto-grid-placement, auto-fill),
    minmax(min(100%, var(--auto-grid-min, var(--grid-min-item))), 1fr)
  );
  gap: var(--auto-grid-gap, var(--grid-gutter));
}

/* Small variant: 10rem minimum item size for compact layouts */
.ren-auto-grid-sm {
  --auto-grid-min: 10rem;
  display: grid;
  grid-template-columns: repeat(
    var(--auto-grid-placement, auto-fill),
    minmax(min(100%, 10rem), 1fr)
  );
  gap: var(--auto-grid-gap, var(--grid-gutter));
}

/* Large variant: 20rem minimum item size for prominent components */
.ren-auto-grid-lg {
  --auto-grid-min: 20rem;
  display: grid;
  grid-template-columns: repeat(
    var(--auto-grid-placement, auto-fill),
    minmax(min(100%, 20rem), 1fr)
  );
  gap: var(--auto-grid-gap, var(--grid-gutter));
}

/* ============================================================================
   5. PANCAKE STACK — Header/Main/Footer Layout
   ============================================================================

   Simple but powerful: a three-row grid that stretches main content to fill
   available vertical space. Perfect for applications, full-page layouts, etc.

   Pattern:
   - header: auto (shrinks to content)
   - main: 1fr (fills available space)
   - footer: auto (shrinks to content)
   - Total minimum height: 100dvh (dynamic viewport height)

   Example HTML:
   ```html
   <div class="ren-pancake">
     <header>Navigation</header>
     <main>Page content</main>
     <footer>Footer</footer>
   </div>
   ```

   Customize with:
   - --pancake-height: Change minimum height (default: 100dvh)
   - Add margins/padding to rows as needed

   ============================================================================ */

.ren-pancake {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: var(--pancake-height, 100dvh);

  & > header {
    grid-row: 1;
  }

  & > main {
    grid-row: 2;
  }

  & > footer {
    grid-row: 3;
  }
}

/* ============================================================================
   6. SIDEBAR GRID — Two-Column with Collapse Animation
   ============================================================================

   A responsive two-column layout with an optional sidebar that can collapse
   using the CSS Grid `0fr` trick for smooth animation without JavaScript.

   Structure:
   - [sidebar-min, sidebar-max] | 1fr
   - Left column (sidebar) is flex: 15rem → 25%
   - Right column fills remaining space

   Example HTML:
   ```html
   <div class="ren-sidebar-grid">
     <aside class="ren-sidebar">
       <nav>Navigation</nav>
     </aside>
     <main>Main content</main>
   </div>

   \3c !-- Collapsed sidebar version -->
   <div class="ren-sidebar-grid" data-collapsed>
     <aside class="ren-sidebar">Sidebar</aside>
     <main>Main content (full width)</main>
   </div>
   ```

   The `data-collapsed` attribute triggers grid-template-columns change to `0fr 1fr`,
   and the first child gets overflow: hidden to animate the collapse.

   Customize with:
   - --sidebar-min: Minimum sidebar width (default: 15rem)
   - --sidebar-max: Maximum sidebar width (default: 25%)

   ============================================================================ */

.ren-sidebar-grid {
  display: grid;
  grid-template-columns:
    minmax(var(--sidebar-min, 15rem), var(--sidebar-max, 25%))
    1fr;
  gap: var(--grid-gutter);
  transition: grid-template-columns var(--duration-normal) var(--ease-out);

  & > :first-child {
    transition: min-width var(--duration-normal) var(--ease-out);
  }

  /* Collapsed state: sidebar collapses to 0fr with overflow hidden */
  &[data-collapsed] {
    grid-template-columns: 0fr 1fr;

    & > :first-child {
      overflow: hidden;
      min-width: 0;
    }
  }

  /* Mobile: Stack sidebar above content */
  @media (max-width: 768px) {
    grid-template-columns: 1fr;

    &[data-collapsed] {
      grid-template-columns: 1fr;

      & > :first-child {
        overflow: hidden;
        max-height: 0;
      }
    }
  }
}

/* ============================================================================
   7. HOLY ALBATROSS — Binary Layout Switch (Heydon Pickering)
   ============================================================================

   The Holy Albatross pattern automatically switches between one and two columns
   at a natural breakpoint WITHOUT media queries. Uses the container's own size
   to determine layout.

   Formula:
   ```
   minmax(
     clamp(
       100% / cols - gap,
       (breakpoint - 100%) * 999,
       100%
     ),
     1fr
   )
   ```

   When container is narrower than breakpoint, items wrap to one per line.
   When wider, items flow into multiple columns naturally.

   Example HTML:
   ```html
   \3c !-- Default: 3 columns, switches at 40rem -->
   <div class="ren-albatross">
     <article>Item 1</article>
     <article>Item 2</article>
     <article>Item 3</article>
     <article>Item 4</article>
     <article>Item 5</article>
   </div>

   \3c !-- Custom breakpoint -->
   <div class="ren-albatross" style="--albatross-bp: 50rem; --albatross-cols: 2;">
     <div>Two columns that switch at 50rem</div>
   </div>
   ```

   Customize with:
   - --albatross-bp: Breakpoint width (default: 40rem)
   - --albatross-cols: Number of columns (default: 3)

   ============================================================================ */

.ren-albatross {
  display: grid;
  gap: var(--grid-gutter);
  grid-template-columns: repeat(
    auto-fit,
    minmax(
      clamp(
        calc(100% / var(--albatross-cols, 3) - var(--grid-gutter)),
        (var(--albatross-bp, 40rem) - 100%) * 999,
        100%
      ),
      1fr
    )
  );
}

/* ============================================================================
   8. BENTO GRID — Irregular Apple-Style Layout
   ============================================================================

   An irregular grid for showcasing content with varied tile sizes. Combines
   fixed row height (--bento-row) with flexible columns and responsive
   column counts.

   Example HTML:
   ```html
   <div class="ren-bento">
     <div class="ren-tile-main">Main featured tile (2x2)</div>
     <div class="ren-tile-small">Small 1</div>
     <div class="ren-tile-small">Small 2</div>
     <div class="ren-tile-medium">Medium (1x2)</div>
     <div class="ren-tile-small">Small 3</div>
   </div>
   ```

   Responsive behavior:
   - < 600px: 4 columns (mobile)
   - 600–899px: 6 columns (tablet)
   - ≥ 900px: 12 columns (desktop)

   Tile span utilities:
   - .ren-tile-main: 2x2 (4 cells)
   - .ren-tile-medium: 1x2 (2 cells)
   - .ren-tile-small: 1x1 (1 cell)
   - Custom: grid-column: span N; grid-row: span M;

   Customize with:
   - --bento-cols: Number of columns
   - --bento-row: Row height in px/rem

   ============================================================================ */

.ren-bento {
  display: grid;
  grid-template-columns: repeat(var(--bento-cols, 12), minmax(0, 1fr));
  grid-auto-rows: var(--bento-row, 6rem);
  gap: var(--grid-gutter);

  /* Tile size variants */
  .ren-tile-main {
    grid-column: span 2;
    grid-row: span 2;
  }

  .ren-tile-medium {
    grid-column: span 1;
    grid-row: span 2;
  }

  .ren-tile-small {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* Tablet: 6 columns */
  @media (max-width: 899px) {
    --bento-cols: 6;

    & .ren-tile-main {
      grid-column: span 2;
      grid-row: span 2;
    }
  }

  /* Mobile: 4 columns */
  @media (max-width: 599px) {
    --bento-cols: 4;

    & .ren-tile-main {
      grid-column: span 2;
      grid-row: span 2;
    }

    & .ren-tile-medium {
      grid-column: span 2;
      grid-row: span 1;
    }
  }
}

/* ============================================================================
   9. SUBGRID UTILITIES — Cross-Component Alignment
   ============================================================================

   CSS Grid subgrid allows child grids to inherit the parent grid's row and
   column tracks for perfect alignment across nested components. Essential
   for design systems with consistent component alignment.

   Three utilities:
   - .ren-subgrid: Inherit columns only
   - .ren-subgrid-rows: Inherit rows only
   - .ren-subgrid-both: Inherit both rows and columns

   Example: Perfectly aligned card grid
   ```html
   <div class="ren-card-grid">
     <article class="ren-card">
       <img /> \3c !-- spans row 1 -->
       <h2 />  \3c !-- spans row 2 -->
       <p />   \3c !-- spans row 3 (1fr) -->
       <footer /> \3c !-- spans row 4 -->
     </article>
   </div>
   ```

   This ensures all cards have equal internal spacing and alignment.

   @supports fallback: Browsers without subgrid support fall back to grid
   with explicit sizing.

   ============================================================================ */

.ren-subgrid {
  display: grid;
  grid-template-columns: subgrid;
}

.ren-subgrid-rows {
  display: grid;
  grid-template-rows: subgrid;
}

.ren-subgrid-both {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

/* Fallback for browsers without subgrid support */
@supports not (grid-template-columns: subgrid) {
  .ren-subgrid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
  }

  .ren-subgrid-rows {
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  .ren-subgrid-both {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
    grid-template-rows: auto 1fr auto;
  }
}

/* ============================================================================
   Card Grid with Subgrid Alignment

   A grid system for cards where all cards maintain aligned internal sections
   (image, title, body, footer) regardless of content length.

   Example:
   ```html
   <div class="ren-card-grid">
     <article class="ren-card">
       <img src="..." />
       <h3>Title</h3>
       <p>Description...</p>
       <footer><button>Action</button></footer>
     </article>
   </div>
   ```
   ============================================================================ */

.ren-card-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, var(--grid-min-item)), 1fr)
  );
  grid-template-rows: repeat(4, auto auto 1fr auto);
  gap: var(--grid-gutter);

  & > * {
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
  }
}

/* Fallback for browsers without subgrid */
@supports not (grid-template-rows: subgrid) {
  .ren-card-grid {
    grid-template-rows: auto;

    & > * {
      grid-row: auto;
      grid-template-rows: auto;
    }
  }
}

/* ============================================================================
   10. QUANTITY QUERIES — Content-Driven Responsiveness
   ============================================================================

   Using `:has()` pseudo-class, the grid adapts its layout based on the
   number of direct children. No media queries needed—pure content-driven
   responsive design.

   Behavior:
   - 1 item: 1 column (100% width)
   - 2 items: 2 columns
   - 3 items: 3 columns
   - 4+ items: Auto-fill with RAM pattern (auto-responsive)

   Example HTML:
   ```html
   \3c !-- Automatically 1 column (1 item) -->
   <section class="ren-quantity-grid">
     <article>Single article</article>
   </section>

   \3c !-- Automatically 2 columns (2 items) -->
   <section class="ren-quantity-grid">
     <article>Left</article>
     <article>Right</article>
   </section>

   \3c !-- Automatically 3 columns (3 items) -->
   <section class="ren-quantity-grid">
     <article>First</article>
     <article>Second</article>
     <article>Third</article>
   </section>

   \3c !-- Automatically reflowing (4+ items) -->
   <section class="ren-quantity-grid">
     <article>1</article>
     <article>2</article>
     <article>3</article>
     <article>4</article>
     <article>5</article>
   </section>
   ```

   No classes needed! Layout is entirely content-driven.

   ============================================================================ */

.ren-quantity-grid {
  --_min: var(--grid-min-item);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gutter);

  /* 2 items: 2 columns */
  &:has(> :nth-child(2)) {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 3 items: 3 columns */
  &:has(> :nth-child(3)) {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 4+ items: Auto-responsive (RAM pattern) */
  &:has(> :nth-last-child(n + 5)) {
    grid-template-columns: repeat(
      auto-fill,
      minmax(min(100%, var(--_min)), 1fr)
    );
  }

  /* On tablets: reduce to 2 columns */
  @media (max-width: 1024px) {
    &:has(> :nth-child(3)) {
      grid-template-columns: repeat(2, 1fr);
    }

    &:has(> :nth-last-child(n + 4)) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* On mobile: always 1 column */
  @media (max-width: 640px) {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   11. PERFORMANCE UTILITIES — Optimization & Containment
   ============================================================================

   CSS features for rendering optimization:
   - content-visibility: Skip rendering of offscreen content
   - contain: Isolate element's layout/styling/paint from siblings

   These dramatically improve performance for long lists and large grids.

   Example:
   ```html
   \3c !-- Long list of cards—only visible ones render -->
   <div class="ren-auto-grid">
     <article class="ren-lazy-section">Item 1</article>
     <article class="ren-lazy-section">Item 2</article>
     \3c !-- ... 100 more items ... -->
     <article class="ren-lazy-section">Item 102</article>
   </div>
   ```

   Or use .ren-contain for layout isolation:
   ```html
   <div class="ren-contain">Styles/layout won't leak out</div>
   ```

   ============================================================================ */

.ren-lazy-section {
  content-visibility: auto;
  contain-intrinsic-size: auto var(--lazy-height, 600px);
}

.ren-contain {
  contain: layout style paint;
}

/* ============================================================================
   12. ACCESSIBILITY — Reading Flow & Semantic Grid
   ============================================================================

   CSS Grid can disrupt logical reading order. The reading-flow property
   (when supported) ensures keyboard navigation follows visual layout.

   Example:
   ```html
   <div class="ren-grid-reading-flow">
     \3c !-- Content in visual order, keyboard will follow -->
   </div>
   ```

   Progressive enhancement: On browsers without reading-flow, standard
   keyboard navigation applies.

   ============================================================================ */

@supports (reading-flow: grid-rows) {
  .ren-grid-reading-flow {
    reading-flow: grid-rows;
  }
}

/* Ensure proper focus handling in grids */
.ren-col-grid,
.ren-auto-grid,
.ren-page-grid,
.ren-sidebar-grid {
  & :focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
  }
}

/* ============================================================================
   13. GRID ANIMATION UTILITIES — Transitions & Reveal Patterns
   ============================================================================

   Smooth animations for grid layout changes:
   - Grid track transitions for expanding/collapsing
   - The `0fr` trick for smooth show/hide
   - Duration and easing from design tokens

   Example: Animated sidebar toggle
   ```html
   <div class="ren-sidebar-grid ren-grid-animate" data-collapsed>
     <aside>Sidebar</aside>
     <main>Content</main>
   </div>
   ```

   The transition applies only to grid-template-columns, making the animation
   smooth and performant.

   ============================================================================ */

.ren-grid-animate {
  transition: grid-template-columns var(--duration-normal) var(--ease-out);

  & > * {
    transition: min-width var(--duration-normal) var(--ease-out);
  }
}

/* Animation reveal pattern: gradually show/hide grid items */
.ren-grid-item-reveal {
  animation: gridItemReveal var(--duration-normal) var(--ease-out) both;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes gridItemReveal {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================================================
   14. MODULAR GRID — Müller-Brockmann System
   ============================================================================

   A baseline grid system combining both rows and columns for strict
   geometric alignment. Based on the Swiss graphic design tradition.

   Properties:
   - --mod-cols: Number of columns (default: 6)
   - --mod-row: Row height in rem/px (default: 4.5rem)

   All content aligns to the baseline grid.

   Example HTML:
   ```html
   \3c !-- Standard 6-column × 4.5rem modular grid -->
   <div class="ren-modular-grid">
     <section>Section 1</section>
     <section>Section 2</section>
     \3c !-- ... -->
   </div>

   \3c !-- 4-column, custom row height -->
   <div class="ren-modular-grid" style="--mod-cols: 4; --mod-row: 6rem;">
     <div>Item 1</div>
   </div>
   ```

   ============================================================================ */

.ren-modular-grid {
  display: grid;
  grid-template-columns: repeat(var(--mod-cols, 6), 1fr);
  grid-auto-rows: var(--mod-row, 4.5rem);
  gap: var(--grid-gutter);

  /* Responsive: reduce columns on mobile */
  @media (max-width: 768px) {
    --mod-cols: 4;
  }

  @media (max-width: 640px) {
    --mod-cols: 2;
  }
}

/* ============================================================================
   END OF GRID SYSTEM
   ============================================================================

   Summary of available components:

   Layout Patterns:
   • .ren-page-grid — Full-bleed content zones (content/popout/feature/full)
   • .ren-prose-grid — Narrower prose-optimized full-bleed
   • .ren-col-grid — 12-column explicit grid system
   • .ren-auto-grid — Responsive auto-fit pattern (RAM)
   • .ren-sidebar-grid — Two-column with collapsible sidebar
   • .ren-pancake — Header/main/footer stretching layout
   • .ren-albatross — Binary layout switch without media queries
   • .ren-bento — Irregular Apple-style grid
   • .ren-quantity-grid — Content-driven column count
   • .ren-modular-grid — Müller-Brockmann baseline grid

   Advanced:
   • .ren-subgrid — Inherit parent columns for alignment
   • .ren-card-grid — Card grid with subgrid internal alignment
   • .ren-lazy-section — Performance optimization (content-visibility)
   • .ren-contain — Layout containment for isolation
   • .ren-grid-animate — Smooth layout transitions

   All grids use:
   • CSS custom properties for theming and runtime configuration
   • CSS Nesting for organization
   • min(100%, X) overflow protection
   • clamp() for fluid scaling
   • @supports fallbacks for newer features
   • Responsive breakpoints: 640px, 768px, 1024px

   ============================================================================ */
/* ============================================
   RenDS — Glass / Materials Utilities
   ============================================
   Translucent materials inspired by Apple's
   Liquid Glass (WWDC 2025). Three tiers of
   blur, each with light and dark variants via
   light-dark().

   Usage:
     <header class="ren-glass-thin">…</header>
     <nav class="ren-glass-regular">…</nav>
     <aside class="ren-glass-thick">…</aside>

   Ideal for:
     - Sticky nav/header over scrolling content
     - Dialog and popover backgrounds
     - Sidebars and toolbars
     - Carousel arrow buttons

   Accessibility:
     - Text on glass should use --color-text (semantic),
       not hardcoded. Underlying content may be anything.
     - For critical text, prefer solid --color-surface.
     - Glass respects prefers-reduced-transparency — falls
       back to solid surface.

   Browser support:
     backdrop-filter: Safari 9+, Firefox 103+, Chrome 76+.
     Fallback: solid surface with opacity.
   ============================================ */

:root {
  /* Blur radii — fine-tunable via overrides */
  --glass-blur-thin:    8px;
  --glass-blur-regular: 20px;
  --glass-blur-thick:   40px;

  /* Saturation boost — makes the blur feel "alive"
     rather than muddy. Classic Apple trick. */
  --glass-saturation:   180%;

  /* Surface tint — a small amount of background color
     so glass has shape even over very busy content. */
  --glass-tint-light:   rgb(255, 255, 255, 0.55);
  --glass-tint-dark:    rgb(20, 20, 22, 0.55);
  --glass-tint:         light-dark(var(--glass-tint-light), var(--glass-tint-dark));

  /* Border — hairline that defines the edge */
  --glass-border-light: rgb(255, 255, 255, 0.25);
  --glass-border-dark:  rgb(255, 255, 255, 0.08);
  --glass-border:       light-dark(var(--glass-border-light), var(--glass-border-dark));
}

/* ─── Shared base ─── */
.ren-glass-thin,
.ren-glass-regular,
.ren-glass-thick {
  background-color: var(--glass-tint);
  border: var(--stroke-1) solid var(--glass-border);
  /* -webkit- prefix for Safari < 18 */
  -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur-regular));
          backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur-regular));
}

.ren-glass-thin {
  -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur-thin));
          backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur-thin));
  --glass-tint-light: rgb(255, 255, 255, 0.35);
  --glass-tint-dark:  rgb(20, 20, 22, 0.35);
}

.ren-glass-thick {
  -webkit-backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur-thick));
          backdrop-filter: saturate(var(--glass-saturation)) blur(var(--glass-blur-thick));
  --glass-tint-light: rgb(255, 255, 255, 0.75);
  --glass-tint-dark:  rgb(20, 20, 22, 0.75);
}

/* ─── Fallback: browsers without backdrop-filter ─── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ren-glass-thin,
  .ren-glass-regular,
  .ren-glass-thick {
    background-color: var(--color-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ─── Reduced transparency (macOS/iOS accessibility) ─── */
@media (prefers-reduced-transparency: reduce) {
  .ren-glass-thin,
  .ren-glass-regular,
  .ren-glass-thick {
    background-color: var(--color-surface);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border: var(--stroke-1) solid var(--color-border);
  }
}

/* ─── Forced colors (Windows high contrast) ─── */
@media (forced-colors: active) {
  .ren-glass-thin,
  .ren-glass-regular,
  .ren-glass-thick {
    background-color: Canvas;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border: var(--stroke-1) solid CanvasText;
  }
}
/* ============================================
   RenDS — Motion Alternatives for Reduced Motion
   ============================================
   The reset.css zeroes out transitions and animations
   when prefers-reduced-motion: reduce is active —
   which is a safe default. But sometimes a silent
   instant change feels wrong: a skeleton that never
   pulses, a toast that appears with no transition,
   a tab that switches with no signal.

   Apple HIG recommends offering an *alternative*
   rather than just cutting motion: a dissolve, a
   brightness blink, a color shift, an opacity pulse.

   This file exposes opt-in utility classes and
   keyframes that run only under reduced-motion.
   Use them on elements that need some feedback
   even when animation is disabled.

   Usage:
     <div class="ren-motion-dissolve">      \3c !-- fade on enter -->
     <div class="ren-motion-highlight">     \3c !-- brief bg flash -->
     <div class="ren-motion-pulse">         \3c !-- gentle opacity pulse -->

   These classes do nothing when reduced-motion is OFF.
   The main (motion-full) animation lives on the
   component itself, as usual.
   ============================================ */

@keyframes ren-dissolve-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ren-highlight-flash {
  0%   { background-color: var(--color-highlight, var(--color-accent-subtle)); }
  100% { background-color: transparent; }
}

@keyframes ren-pulse-gentle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@keyframes ren-color-shift {
  from { color: var(--color-text-muted); }
  to   { color: var(--color-accent); }
}

@keyframes ren-focus-glow {
  0%   { box-shadow: 0 0 0 0 var(--color-focus-ring); }
  40%  { box-shadow: 0 0 0 4px var(--color-focus-ring); }
  100% { box-shadow: 0 0 0 0 var(--color-focus-ring); }
}

/* ═══════════════════════════════════════════════
   DISSOLVE — opacity fade over 250ms
   Alternative to slide / scale entries.
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .ren-motion-dissolve {
    animation: ren-dissolve-in 250ms linear both !important;
  }

}

/* ═══════════════════════════════════════════════
   HIGHLIGHT — brief background flash on change
   Alternative to shake / bounce / scale.
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .ren-motion-highlight {
    animation: ren-highlight-flash 500ms ease-out both !important;
  }

}

/* ═══════════════════════════════════════════════
   PULSE — gentle opacity cycle for loading states
   Replaces spinning/shimmering.
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .ren-motion-pulse {
    animation: ren-pulse-gentle 2s ease-in-out infinite !important;
  }

}

/* ═══════════════════════════════════════════════
   COLOR-SHIFT — hue transition for state change
   Alternative to slide or check-mark animations.
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .ren-motion-color-shift {
    animation: ren-color-shift 300ms ease-out both !important;
  }

}

/* ═══════════════════════════════════════════════
   FOCUS-GLOW — brief focus ring pulse for attention
   Alternative to pointing arrows or jumps.
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .ren-motion-focus-glow {
    animation: ren-focus-glow 800ms ease-in-out both !important;
  }

}
/* ============================================
   RenDS — Motion Presets
   ============================================
   A coherent set of enter/exit animations plus a
   choreography helper (stagger). Pair with the
   semantic motion tokens in tokens/semantic/motion.css.

   Two ways to use:

   1) DATA ATTRIBUTES (declarative, recommended)
      <div data-motion="fade"         data-state="open">   …
      <div data-motion="scale"        data-state="closed"> …
      <div data-motion="slide-up"     data-state="open">   …

      Drives enter/exit via `data-state` flipping.
      Pairs perfectly with the JS helper in
      utils/motion.js (or any of your own toggles).

   2) UTILITY CLASSES (imperative, for ad-hoc use)
      <div class="ren-anim-fade-in">          …
      <div class="ren-anim-scale-out">        …
      <ul  class="ren-stagger">               …

   Every preset:
      · Uses semantic duration + ease tokens
      · Respects prefers-reduced-motion (collapses)
      · Ships with an accompanying `-out` / exit pair
      · Works with or without the JS helper

   Add a new preset by:
      1. Define @keyframes ren-{name}-in / ren-{name}-out
      2. Add the data-motion="{name}" selector below
      3. (Optional) Add utility classes
   ============================================ */

/* ─────────────────────────────────────────────
   KEYFRAMES — the primitive motions
   ───────────────────────────────────────────── */

@keyframes ren-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ren-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes ren-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ren-scale-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.96); }
}

@keyframes ren-pop-in {
  from { opacity: 0; transform: scale(0.8);  }
  60%  { opacity: 1; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1);    }
}
@keyframes ren-pop-out {
  from { opacity: 1; transform: scale(1);    }
  to   { opacity: 0; transform: scale(0.85); }
}

@keyframes ren-slide-up-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
@keyframes ren-slide-up-out {
  from { opacity: 1; transform: translateY(0);   }
  to   { opacity: 0; transform: translateY(-4px); }
}

@keyframes ren-slide-down-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes ren-slide-down-out {
  from { opacity: 1; transform: translateY(0);    }
  to   { opacity: 0; transform: translateY(4px);  }
}

@keyframes ren-slide-left-in {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0);   }
}
@keyframes ren-slide-left-out {
  from { opacity: 1; transform: translateX(0);   }
  to   { opacity: 0; transform: translateX(-4px); }
}

@keyframes ren-slide-right-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes ren-slide-right-out {
  from { opacity: 1; transform: translateX(0);    }
  to   { opacity: 0; transform: translateX(4px);  }
}

@keyframes ren-blur-in {
  from { opacity: 0; filter: blur(6px); }
  to   { opacity: 1; filter: blur(0);   }
}
@keyframes ren-blur-out {
  from { opacity: 1; filter: blur(0);   }
  to   { opacity: 0; filter: blur(4px); }
}

/* ─────────────────────────────────────────────
   DATA-MOTION DRIVEN — declarative state binding
   Component flips `data-state="open|closed"`,
   the preset picks the correct keyframe.
   Works without JS when the user toggles data-state.
   ───────────────────────────────────────────── */

[data-motion] {
  /* Default fill-mode keeps the element in its
     final rest state once the animation completes. */
  animation-fill-mode: both;
}

/* Each preset: two selectors (open / closed). */

[data-motion="fade"][data-state="open"] {
  animation: ren-fade-in var(--duration-enter) var(--ease-enter);
}
[data-motion="fade"][data-state="closed"] {
  animation: ren-fade-out var(--duration-exit) var(--ease-exit);
}

[data-motion="scale"][data-state="open"] {
  animation: ren-scale-in var(--duration-enter) var(--ease-enter);
}
[data-motion="scale"][data-state="closed"] {
  animation: ren-scale-out var(--duration-exit) var(--ease-exit);
}

[data-motion="pop"][data-state="open"] {
  animation: ren-pop-in var(--duration-enter) var(--ease-playful);
}
[data-motion="pop"][data-state="closed"] {
  animation: ren-pop-out var(--duration-exit) var(--ease-exit);
}

[data-motion="slide-up"][data-state="open"] {
  animation: ren-slide-up-in var(--duration-enter) var(--ease-enter);
}
[data-motion="slide-up"][data-state="closed"] {
  animation: ren-slide-up-out var(--duration-exit) var(--ease-exit);
}

[data-motion="slide-down"][data-state="open"] {
  animation: ren-slide-down-in var(--duration-enter) var(--ease-enter);
}
[data-motion="slide-down"][data-state="closed"] {
  animation: ren-slide-down-out var(--duration-exit) var(--ease-exit);
}

[data-motion="slide-left"][data-state="open"] {
  animation: ren-slide-left-in var(--duration-enter) var(--ease-enter);
}
[data-motion="slide-left"][data-state="closed"] {
  animation: ren-slide-left-out var(--duration-exit) var(--ease-exit);
}

[data-motion="slide-right"][data-state="open"] {
  animation: ren-slide-right-in var(--duration-enter) var(--ease-enter);
}
[data-motion="slide-right"][data-state="closed"] {
  animation: ren-slide-right-out var(--duration-exit) var(--ease-exit);
}

[data-motion="blur"][data-state="open"] {
  animation: ren-blur-in var(--duration-enter) var(--ease-attention);
}
[data-motion="blur"][data-state="closed"] {
  animation: ren-blur-out var(--duration-exit) var(--ease-exit);
}

/* ─────────────────────────────────────────────
   UTILITY CLASSES — imperative one-shots
   ───────────────────────────────────────────── */

.ren-anim-fade-in         { animation: ren-fade-in         var(--duration-enter) var(--ease-enter)  both; }
.ren-anim-fade-out        { animation: ren-fade-out        var(--duration-exit)  var(--ease-exit)   both; }
.ren-anim-scale-in        { animation: ren-scale-in        var(--duration-enter) var(--ease-enter)  both; }
.ren-anim-scale-out       { animation: ren-scale-out       var(--duration-exit)  var(--ease-exit)   both; }
.ren-anim-pop-in          { animation: ren-pop-in          var(--duration-enter) var(--ease-playful) both; }
.ren-anim-pop-out         { animation: ren-pop-out         var(--duration-exit)  var(--ease-exit)   both; }
.ren-anim-slide-up-in     { animation: ren-slide-up-in     var(--duration-enter) var(--ease-enter)  both; }
.ren-anim-slide-up-out    { animation: ren-slide-up-out    var(--duration-exit)  var(--ease-exit)   both; }
.ren-anim-slide-down-in   { animation: ren-slide-down-in   var(--duration-enter) var(--ease-enter)  both; }
.ren-anim-slide-down-out  { animation: ren-slide-down-out  var(--duration-exit)  var(--ease-exit)   both; }
.ren-anim-slide-left-in   { animation: ren-slide-left-in   var(--duration-enter) var(--ease-enter)  both; }
.ren-anim-slide-left-out  { animation: ren-slide-left-out  var(--duration-exit)  var(--ease-exit)   both; }
.ren-anim-slide-right-in  { animation: ren-slide-right-in  var(--duration-enter) var(--ease-enter)  both; }
.ren-anim-slide-right-out { animation: ren-slide-right-out var(--duration-exit)  var(--ease-exit)   both; }
.ren-anim-blur-in         { animation: ren-blur-in         var(--duration-enter) var(--ease-attention) both; }
.ren-anim-blur-out        { animation: ren-blur-out        var(--duration-exit)  var(--ease-exit)   both; }

/* ─────────────────────────────────────────────
   CHOREOGRAPHY — stagger children on enter
   ───────────────────────────────────────────── */

.ren-stagger > * {
  /* Use CSS counter for index, then multiply by step. */
  animation-delay: calc(var(--motion-stagger-step) * var(--ren-stagger-i, 0));
}

/*
  Runtime-safe stagger: set --ren-stagger-i per child
  either via inline style or the JS helper
  (applyStagger) in utils/motion.js. A pure-CSS
  fallback up to --motion-stagger-max (10 items):
*/
.ren-stagger > :nth-child(1)  { --ren-stagger-i: 0; }
.ren-stagger > :nth-child(2)  { --ren-stagger-i: 1; }
.ren-stagger > :nth-child(3)  { --ren-stagger-i: 2; }
.ren-stagger > :nth-child(4)  { --ren-stagger-i: 3; }
.ren-stagger > :nth-child(5)  { --ren-stagger-i: 4; }
.ren-stagger > :nth-child(6)  { --ren-stagger-i: 5; }
.ren-stagger > :nth-child(7)  { --ren-stagger-i: 6; }
.ren-stagger > :nth-child(8)  { --ren-stagger-i: 7; }
.ren-stagger > :nth-child(9)  { --ren-stagger-i: 8; }
.ren-stagger > :nth-child(10) { --ren-stagger-i: 9; }

/* ─────────────────────────────────────────────
   REDUCED MOTION — collapse to instant dissolves
   ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-motion][data-state="open"],
  [data-motion][data-state="closed"],
  .ren-anim-fade-in, .ren-anim-fade-out,
  .ren-anim-scale-in, .ren-anim-scale-out,
  .ren-anim-pop-in, .ren-anim-pop-out,
  .ren-anim-slide-up-in, .ren-anim-slide-up-out,
  .ren-anim-slide-down-in, .ren-anim-slide-down-out,
  .ren-anim-slide-left-in, .ren-anim-slide-left-out,
  .ren-anim-slide-right-in, .ren-anim-slide-right-out,
  .ren-anim-blur-in, .ren-anim-blur-out {
    animation-duration: 0ms !important;
    animation-name: ren-fade-in !important;
    animation-timing-function: linear !important;
  }
  /* Exit becomes instant fade-out */
  [data-motion][data-state="closed"],
  .ren-anim-fade-out, .ren-anim-scale-out, .ren-anim-pop-out,
  .ren-anim-slide-up-out, .ren-anim-slide-down-out,
  .ren-anim-slide-left-out, .ren-anim-slide-right-out,
  .ren-anim-blur-out {
    animation-name: ren-fade-out !important;
  }
  .ren-stagger > * {
    animation-delay: 0ms !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   RenDS — Progressive Enhancements
   ═══════════════════════════════════════════════════════════════════════════
   Modern CSS features applied via @supports for capable browsers.
   These are non-essential enhancements — everything works without them.
   ═════════════════════════════════════════════════════════════════════════ */

/* ═══ VIEW TRANSITIONS ═══
   Opt-in view transitions for smooth page-level state changes.
   Usage: Add `view-transition-name` to elements you want to animate.
   ─────────────────────────────────────────────────────────────────────── */

@supports (view-transition-name: none) {
  /* Enable cross-document view transitions */
  @view-transition {
    navigation: auto;
  }

  /* Default transition for page root */
  :root {
    view-transition-name: root;
  }

  /* Utility classes for named view transitions */
  .ren-vt-hero { view-transition-name: hero; }
  .ren-vt-header { view-transition-name: header; }
  .ren-vt-nav { view-transition-name: nav; }
  .ren-vt-main { view-transition-name: main; }
  .ren-vt-sidebar { view-transition-name: sidebar; }

  /* Default view transition animation timing */
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: var(--duration-normal, 200ms);
    animation-timing-function: var(--ease-out, ease-out);
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation-duration: 0ms;
    }
  }
}

/* ═══ SCROLL-DRIVEN ANIMATIONS ═══
   Utility classes for scroll-linked animations without JavaScript.
   ─────────────────────────────────────────────────────────────────────── */

@keyframes ren-scale-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes ren-scroll-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ren-parallax {
  from { transform: translateY(calc(var(--space-8, 2rem) * -1)); }
  to { transform: translateY(var(--space-8, 2rem)); }
}

@keyframes ren-scroll-fade-in {
  to { opacity: 1; }
}

@supports (animation-timeline: scroll()) {
  /* Scroll progress indicator — a thin bar at the top of the page */
  .ren-scroll-progress {
    position: fixed;
    top: 0;
    inset-inline: 0;
    height: 3px;
    background: var(--color-accent);
    transform-origin: left;
    z-index: 9999;
    animation: ren-scale-x linear both;
    animation-timeline: scroll(root);
  }

  /* Reveal on scroll — fade + slide up when element enters viewport */
  .ren-scroll-reveal {
    opacity: 0;
    transform: translateY(var(--space-6, 1.5rem));
    animation: ren-scroll-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  /* Parallax effect — subtle vertical shift on scroll */
  .ren-scroll-parallax {
    animation: ren-parallax linear both;
    animation-timeline: view();
  }

  /* Fade in on scroll — simple opacity reveal */
  .ren-scroll-fade {
    opacity: 0;
    animation: ren-scroll-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }

  /* Respect reduced motion for all scroll animations */
  @media (prefers-reduced-motion: reduce) {
    .ren-scroll-progress,
    .ren-scroll-reveal,
    .ren-scroll-parallax,
    .ren-scroll-fade {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
}

/* ═══ ANCHOR POSITIONING ═══
   Canonical feature query for anchored overlays.
   Components should treat CSS anchor positioning as available only when the
   browser supports anchor naming, anchor association, and the current
   position-area property (not the legacy inset-area alias).
   ─────────────────────────────────────────────────────────────────────── */

@supports (anchor-name: --ren-anchor) and
  (position-anchor: --ren-anchor) and
  (position-area: block-end span-all) {
  :root {
    --ren-supports-anchor-positioning: 1;
  }
}
/* ============================================
   RenDS — Base Layer
   ============================================
   Import order:
   1. Reset (normalize browser defaults)
   2. Classless (style semantic HTML)
   3. Utilities (essential helper classes)
   4. Layouts (composable layout primitives)

   Note: When imported via index.css, this entire
   file lives inside @layer base. The reset is
   promoted to @layer reset for lowest priority.
   ============================================ */










/* ============================================
   RenDS — Button Component
   ============================================
   Accessible, multi-variant button.
   Works as pure CSS classes OR as <ren-button>.

   Variants: primary, secondary, ghost, danger, outline
   Sizes: sm, md (default), lg
   States: hover, active, disabled, loading

   Touch target: 44px minimum (Apple HIG)
   ============================================ */

/* ─── Base Button ─── */
.ren-btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ren-btn-gap);

  /* Sizing — default md */
  min-height: var(--ren-btn-height);        /* 44px touch target */
  padding: var(--ren-btn-padding-y) var(--ren-btn-padding-x);
  font-size: var(--ren-btn-font-size);
  font-weight: var(--ren-btn-font-weight);
  line-height: 1;

  /* Appearance */
  border: var(--ren-btn-border-width) solid var(--ren-btn-border-color);
  border-radius: var(--ren-btn-radius);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;

  /* Transition — intent: tactile feedback on hover/press/focus */
  transition:
    background-color var(--ren-btn-duration) var(--ren-btn-easing),
    border-color var(--ren-btn-duration) var(--ren-btn-easing),
    color var(--ren-btn-duration) var(--ren-btn-easing),
    box-shadow var(--ren-btn-duration) var(--ren-btn-easing),
    transform var(--duration-tactile) var(--ease-enter),
    opacity var(--ren-btn-duration) var(--ren-btn-easing);
}

/* Active press effect */
.ren-btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(0.97);
}

/* ─── Variants ─── */

/* Primary (default) */
.ren-btn:not(.ren-btn-secondary):not(.ren-btn-ghost):not(.ren-btn-outline):not(.ren-btn-danger):not(.ren-btn-link):not(.ren-btn-accent),
.ren-btn-primary {
  background-color: var(--ren-btn-bg);
  color: var(--ren-btn-color);
  border-color: var(--ren-btn-border-color);
}

.ren-btn:not(.ren-btn-secondary):not(.ren-btn-ghost):not(.ren-btn-outline):not(.ren-btn-danger):not(.ren-btn-link):not(.ren-btn-accent):hover:not(:disabled):not([aria-disabled="true"]),
.ren-btn-primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--ren-btn-bg-hover);
  border-color: var(--ren-btn-bg-hover);
}

.ren-btn:not(.ren-btn-secondary):not(.ren-btn-ghost):not(.ren-btn-outline):not(.ren-btn-danger):not(.ren-btn-link):not(.ren-btn-accent):active:not(:disabled):not([aria-disabled="true"]),
.ren-btn-primary:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--ren-btn-bg-active);
  border-color: var(--ren-btn-bg-active);
}

/* Secondary */
.ren-btn-secondary {
  background-color: var(--color-fill);
  color: var(--color-text);
  border-color: var(--color-border);
}

.ren-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--color-fill-hover);
}

.ren-btn-secondary:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--color-fill-active);
}

/* Ghost (no background) */
.ren-btn-ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: transparent;
}

.ren-btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--color-fill);
}

.ren-btn-ghost:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--color-fill-hover);
}

/* Outline */
.ren-btn-outline {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.ren-btn-outline:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--color-accent-subtle);
}

.ren-btn-outline:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

/* Danger */
.ren-btn-danger {
  background-color: var(--color-danger);
  color: var(--color-on-danger);
  border-color: var(--color-danger);
}

.ren-btn-danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--red-500);
  border-color: var(--red-500);
}

.ren-btn-danger:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--red-600);
  border-color: var(--red-600);
}

/* Link style */
.ren-btn-link {
  background-color: transparent;
  color: var(--color-text-link);
  border-color: transparent;
  padding-inline: var(--space-1);
  min-height: auto;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ren-btn-link:hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--color-text-link-hover);
  text-decoration-thickness: 2px;
}

/* ─── Sizes ─── */

.ren-btn-sm {
  min-height: var(--size-sm);       /* 32px */
  padding: var(--space-1) var(--space-3);
  font-size: var(--label-size);
  border-radius: var(--radius-sm);
  gap: var(--space-1);
}

.ren-btn-lg {
  min-height: var(--size-xl);       /* 52px */
  padding: var(--space-3) var(--space-6);
  font-size: var(--body-size);
  border-radius: var(--radius-lg);
}

/* ─── Icon Button (square) ─── */
.ren-btn-icon {
  min-width: var(--size-lg);        /* 44px */
  padding: 0;
  aspect-ratio: 1;
}

.ren-btn-icon.ren-btn-sm {
  min-width: var(--size-sm);
  min-height: var(--size-sm);
}

.ren-btn-icon.ren-btn-lg {
  min-width: var(--size-xl);
  min-height: var(--size-xl);
}

/* ─── Full Width ─── */
.ren-btn-full {
  width: 100%;
}

/* ─── Button Group ─── */
.ren-btn-group {
  display: inline-flex;
  isolation: isolate;  /* contain z-index stacking */
}

.ren-btn-group > .ren-btn {
  border-radius: 0;
  position: relative;
}

.ren-btn-group > .ren-btn:first-child {
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}

.ren-btn-group > .ren-btn:last-child {
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}

.ren-btn-group > .ren-btn + .ren-btn {
  margin-inline-start: calc(var(--stroke-1) * -1);
}

/* Hovered/focused button rises above siblings so border isn't hidden */
.ren-btn-group > .ren-btn:hover,
.ren-btn-group > .ren-btn:focus-visible {
  z-index: 1;
}

/* ─── States ─── */

/* Disabled */
.ren-btn:disabled,
.ren-btn[aria-disabled="true"] {
  background-color: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  border-color: var(--color-disabled-bg);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Loading */
.ren-btn[data-loading] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.ren-btn[data-loading]::after {
  content: '';
  position: absolute;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--radius-full);
  animation: ren-btn-spin 600ms linear infinite;
  /* Restore color since parent is transparent */
  color: var(--color-on-accent);
}

.ren-btn-secondary[data-loading]::after,
.ren-btn-ghost[data-loading]::after,
.ren-btn-outline[data-loading]::after {
  color: var(--color-text);
}

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

@media (prefers-reduced-motion: reduce) {
  .ren-btn[data-loading]::after {
    animation-duration: 1.5s;
  }
  .ren-btn:active:not(:disabled):not([aria-disabled="true"]) {
    transform: none;
  }
}

/* ─── Custom Accent (color-mix pattern) ───
   Use a single --btn-accent color and derive hover/active automatically.
   Example: <button class="ren-btn ren-btn-accent" style="--btn-accent: #8B5CF6">Purple</button>
*/
.ren-btn-accent {
  --_hover: color-mix(in oklch, var(--btn-accent, var(--color-accent)), black 12%);
  --_active: color-mix(in oklch, var(--btn-accent, var(--color-accent)), black 22%);
  --_subtle: color-mix(in oklch, var(--btn-accent, var(--color-accent)), white 90%);

  background-color: var(--btn-accent, var(--color-accent));
  color: var(--color-on-accent);
  border-color: var(--btn-accent, var(--color-accent));
}

.ren-btn-accent:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--_hover);
  border-color: var(--_hover);
}

.ren-btn-accent:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--_active);
  border-color: var(--_active);
}

/* ─── Focus ─── */
.ren-btn:focus-visible {
  outline: var(--ren-btn-ring-width) solid var(--ren-btn-ring-color);
  outline-offset: var(--ren-btn-ring-offset);
}
/* ============================================
   RenDS — Field Component (Input + Label + Error)
   ============================================
   Wraps any form control with label, description,
   and error message — all properly wired with ARIA.

   Works as pure CSS classes OR as <ren-field>.

   Structure:
   .ren-field
     .ren-field-label       (label element)
     .ren-field-control     (input/select/textarea wrapper)
     .ren-field-description (helper text)
     .ren-field-error       (error message)
   ============================================ */

/* ─── Field Container ─── */
.ren-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ─── Label ─── */
.ren-field-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--color-text);
}

/* Required indicator */
.ren-field-label[data-required]::after {
  content: '*';
  color: var(--color-danger);
  font-weight: var(--weight-bold);
}

/* ─── Input / Control ─── */
.ren-input {
  display: block;
  width: 100%;
  min-height: var(--ren-field-height);
  padding: var(--ren-field-padding-y) var(--ren-field-padding-x);
  font-size: var(--ren-field-font-size);
  font-family: inherit;
  color: var(--ren-field-color);
  background-color: var(--ren-field-bg);
  border: var(--ren-field-border-width) solid var(--ren-field-border-color);
  border-radius: var(--ren-field-radius);
  transition:
    border-color var(--duration-state) var(--ease-enter),
    background-color var(--duration-state) var(--ease-enter),
    box-shadow var(--duration-state) var(--ease-enter);
}

.ren-input:hover:not(:disabled):not(:focus) {
  background-color: var(--color-input-bg-hover);
}

.ren-input:focus {
  outline: none;
  border-color: var(--ren-field-focus-color);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
  background-color: var(--color-input-bg-hover);
}

.ren-input:disabled {
  background-color: var(--color-input-disabled-bg);
  color: var(--color-input-disabled-text);
  cursor: not-allowed;
  opacity: 0.7;
}

.ren-input::placeholder {
  color: var(--ren-field-placeholder);
  opacity: 1;
}

/* ─── Textarea ─── */
textarea.ren-input {
  field-sizing: content;  /* Auto-grow with content — no JS needed */
  min-height: calc(var(--touch-min) * 2);
  max-height: 20rem;      /* Prevent runaway growth */
  resize: vertical;
}

/* ─── Select ─── */
select.ren-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-inline-end: var(--space-10);
}

@supports (appearance: base-select) {
  /* ── Opt-in ── */
  select.ren-input,
  select.ren-input::picker(select) {
    appearance: base-select;
  }

  /* ── Trigger ── */
  select.ren-input {
    display: flex;
    align-items: center;
    background-image: none;
    padding-inline-end: var(--space-3);
  }

  select.ren-input::picker-icon {
    color: var(--color-text-muted);
    opacity: 0.6;
    margin-inline-start: auto;
    padding-inline-start: var(--space-3);
    transition: rotate var(--duration-tactile) var(--ease-enter);
  }

  select.ren-input:open::picker-icon {
    rotate: 180deg;
  }

  select.ren-input option::checkmark {
    display: none;
  }

  /* ── Dropdown ── */
  select.ren-input::picker(select) {
    background: var(--color-surface-overlay);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgb(0, 0, 0, 0.08),
                0 1px 3px rgb(0, 0, 0, 0.06);
    padding: var(--space-1);
    margin-block-start: var(--space-1);
    overflow: clip;
  }

  /* ── Options ── */
  select.ren-input option {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-radius: 4px;
    color: var(--color-text);
    background: transparent;
    cursor: pointer;
  }

  select.ren-input option + option {
    margin-block-start: 1px;
  }

  select.ren-input option:hover {
    background: light-dark(var(--gray-50), var(--gray-800));
  }

  select.ren-input option:focus-visible,
  select.ren-input option:active {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
    background: light-dark(var(--gray-50), var(--gray-800));
  }

  select.ren-input option:checked:not(:disabled) {
    background: light-dark(var(--blue-50), var(--blue-900));
    color: light-dark(var(--blue-700), var(--blue-200));
    font-weight: var(--weight-medium);
  }

  select.ren-input option:checked:not(:disabled)::after {
    content: "✓";
    margin-inline-start: auto;
    color: light-dark(var(--blue-600), var(--blue-300));
    font-weight: var(--weight-bold);
  }

  select.ren-input option:checked:hover {
    background: light-dark(var(--blue-100), var(--blue-800));
  }

  select.ren-input option:disabled {
    color: light-dark(var(--gray-500), var(--gray-400));
    cursor: not-allowed;
  }

  select.ren-input option[hidden] {
    display: none;
  }

  /* ── Optgroups ── */
  select.ren-input optgroup {
    padding: var(--space-1) 0;
    padding-inline-start: 0;
  }

  select.ren-input optgroup:not(:first-of-type) {
    border-block-start: 1px solid var(--color-border);
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-2);
  }

  select.ren-input optgroup > legend,
  select.ren-input optgroup > label {
    padding: var(--space-1) var(--space-3);
    margin-inline-start: var(--space-3);
  }

  /* ── Open state ── */
  select.ren-input:open {
    border-color: var(--color-input-border-focus);
    box-shadow: 0 0 0 3px var(--color-input-focus-ring);
  }
}

/* ─── Input Sizes ─── */
.ren-input-sm {
  min-height: var(--size-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.ren-input-lg {
  min-height: var(--size-xl);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-lg);
}

/* ─── Input with icon ─── */
.ren-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ren-input-icon {
  position: absolute;
  left: var(--space-3);
  color: var(--color-text-muted);
  pointer-events: none;
  display: flex;
}

.ren-input-icon + .ren-input,
.ren-input-wrapper > .ren-input:has(+ .ren-input-icon) {
  padding-inline-start: calc(var(--space-3) + var(--icon-lg) + var(--space-2));
}

.ren-input-icon-end {
  position: absolute;
  right: var(--space-3);
  color: var(--color-text-muted);
  pointer-events: none;
  display: flex;
}

/* ─── Description ─── */
.ren-field-description {
  font-size: var(--caption-size);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0;
}

/* ─── Error Message ─── */
.ren-field-error {
  font-size: var(--caption-size);
  color: var(--ren-field-error-color);
  line-height: var(--leading-normal);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Error state on input */
.ren-field[data-invalid] .ren-input,
.ren-input[aria-invalid="true"],
.ren-input-error {
  border-color: var(--ren-field-error-color);
}

.ren-field[data-invalid] .ren-input:focus,
.ren-input[aria-invalid="true"]:focus,
.ren-input-error:focus {
  box-shadow: 0 0 0 3px rgb(255, 59, 48, 0.15);
  border-color: var(--ren-field-error-color);
}

/* Error state on label */
.ren-field[data-invalid] .ren-field-label {
  color: var(--ren-field-error-color);
}

/* ─── Success state ─── */
.ren-field[data-valid] .ren-input,
.ren-input-success {
  border-color: var(--ren-field-success-color);
}

.ren-field[data-valid] .ren-input:focus,
.ren-input-success:focus {
  box-shadow: 0 0 0 3px rgb(52, 199, 89, 0.15);
}

/* ─── Modern Validation (no JS needed) ─── */
/* Only show validation state AFTER user interaction */
.ren-input:user-invalid {
  border-color: var(--ren-field-error-color);
}

.ren-input:user-invalid:focus {
  box-shadow: 0 0 0 3px rgb(255, 59, 48, 0.15);
  border-color: var(--ren-field-error-color);
}

.ren-input:user-valid {
  border-color: var(--ren-field-success-color);
}

.ren-input:user-valid:focus {
  box-shadow: 0 0 0 3px rgb(52, 199, 89, 0.15);
}

/* Show/hide error and success messages based on validation */
.ren-field:has(.ren-input:user-invalid) .ren-field-label {
  color: var(--ren-field-error-color);
}

.ren-field:has(.ren-input:user-invalid) .ren-field-error {
  display: flex;
}

.ren-field:has(.ren-input:user-valid) .ren-field-error {
  display: none;
}
/* ============================================
   RenDS — Checkbox Component
   ============================================
   Custom-styled checkbox built on native
   <input type="checkbox">.

   Preserves native semantics and accessibility.
   Custom visuals via CSS only.

   Usage:
     <label class="ren-checkbox">
       <input type="checkbox">
       <span class="ren-checkbox-control"></span>
       <span>Accept terms</span>
     </label>

   For toggle switches, see ren-switch.
   ============================================ */

.ren-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--ren-checkbox-gap);
  cursor: pointer;
  font-size: var(--body-size);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  user-select: none;
  /* Ensure touch target */
  min-height: var(--touch-min);
}

/* Hide native checkbox visually but keep accessible */
.ren-checkbox > input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* Custom checkbox visual */
.ren-checkbox-control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ren-checkbox-size);   /* 20px */
  height: var(--ren-checkbox-size);
  flex-shrink: 0;
  border: 2px solid var(--ren-checkbox-border);
  border-radius: var(--ren-checkbox-radius);
  background-color: transparent;
  transition:
    background-color var(--ren-checkbox-duration) var(--ease-enter),
    border-color var(--ren-checkbox-duration) var(--ease-enter),
    transform var(--duration-tactile) var(--ren-checkbox-easing);
}

/* Checkmark (hidden by default) */
.ren-checkbox-control::after {
  content: '';
  display: block;
  width: 0.45rem;
  height: 0.7rem;
  border: solid var(--ren-checkbox-checked-color);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--ren-checkbox-duration) var(--ren-checkbox-easing);
  margin-top: -2px;
}

/* ─── States ─── */

/* Checked */
.ren-checkbox > input:checked + .ren-checkbox-control {
  background-color: var(--ren-checkbox-checked-bg);
  border-color: var(--ren-checkbox-checked-bg);
}

.ren-checkbox > input:checked + .ren-checkbox-control::after {
  transform: rotate(45deg) scale(1);
}

/* Hover */
.ren-checkbox:hover > .ren-checkbox-control {
  border-color: var(--color-accent);
}

.ren-checkbox:hover > input:checked + .ren-checkbox-control {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Focus */
.ren-checkbox > input:focus-visible + .ren-checkbox-control {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: var(--ring-offset-width);
}

/* Active / Press */
.ren-checkbox:active > .ren-checkbox-control {
  transform: scale(0.9);
}

/* Disabled */
.ren-checkbox:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Indeterminate */
.ren-checkbox > input:indeterminate + .ren-checkbox-control {
  background-color: var(--ren-checkbox-checked-bg);
  border-color: var(--ren-checkbox-checked-bg);
}

.ren-checkbox > input:indeterminate + .ren-checkbox-control::after {
  border: none;
  width: 0.6rem;
  height: 2px;
  background-color: var(--ren-checkbox-checked-color);
  transform: none;
  margin: 0;
  border-radius: 1px;
}
/* ============================================
   RenDS — Switch / Toggle Component
   ============================================
   Custom-styled toggle switch built on native
   <input type="checkbox" role="switch">.

   Preserves native semantics and accessibility.
   Custom visuals via CSS only.

   Usage:
     <label class="ren-switch">
       <input type="checkbox" role="switch">
       <span class="ren-switch-track"></span>
       <span>Dark mode</span>
     </label>
   ============================================ */

.ren-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--body-size);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  user-select: none;
  min-height: var(--touch-min);
}

/* Hide native input */
.ren-switch > input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* Track */
.ren-switch-track {
  position: relative;
  width: var(--ren-switch-width);    /* 51px — Apple HIG */
  height: var(--ren-switch-height);   /* 31px */
  flex-shrink: 0;
  background-color: var(--ren-switch-bg);
  border-radius: var(--radius-full);
  transition:
    background-color var(--ren-switch-duration) var(--ren-switch-easing);
}

/* Thumb */
.ren-switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: var(--ren-switch-thumb-size);   /* 27px */
  height: var(--ren-switch-thumb-size);
  background-color: var(--ren-switch-thumb-color);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--ren-switch-duration) var(--ren-switch-easing),
    box-shadow var(--ren-switch-duration) var(--ren-switch-easing);
}

/* ─── States ─── */

/* Checked (on) */
.ren-switch > input:checked + .ren-switch-track {
  background-color: var(--ren-switch-checked-bg);
}

.ren-switch > input:checked + .ren-switch-track::after {
  transform: translateX(calc(var(--ren-switch-width) - var(--ren-switch-height)));
}

/* Hover */
.ren-switch:hover > .ren-switch-track {
  background-color: var(--color-fill-hover);
}

.ren-switch:hover > input:checked + .ren-switch-track {
  background-color: var(--color-success-strong);
}

/* Focus */
.ren-switch > input:focus-visible + .ren-switch-track {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: var(--ring-offset-width);
}

/* Active */
.ren-switch:active > .ren-switch-track::after {
  width: calc(var(--ren-switch-thumb-size) + 6px);
}

.ren-switch:active > input:checked + .ren-switch-track::after {
  transform: translateX(calc(var(--ren-switch-width) - var(--ren-switch-height) - 6px));
}

/* Disabled */
.ren-switch:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}
/* ============================================
   RenDS — Badge
   ============================================
   Small inline label for status, counts, or tags.
   CSS-only, no JS needed.

   Sibling primitives that used to live here are
   now in their own folders:
     - ren-separator
     - ren-avatar
     - ren-spinner
     - ren-skeleton
     - ren-kbd

   Usage:
     <span class="ren-badge">3</span>
     <span class="ren-badge ren-badge-success">Active</span>
     <span class="ren-badge-dot ren-badge-dot-danger"></span>
   ============================================ */

.ren-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--ren-badge-height);
  padding: 0.15em var(--ren-badge-padding-x);
  font-size: var(--ren-badge-font-size);
  font-weight: var(--ren-badge-font-weight);
  line-height: 1.5;
  white-space: nowrap;
  border-radius: var(--ren-badge-radius);
  /* Default: neutral */
  background-color: var(--ren-badge-bg);
  color: var(--ren-badge-color);
}

/* ─── Variants ─── */
.ren-badge-primary {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

.ren-badge-secondary {
  background-color: var(--color-fill-hover);
  color: var(--color-text);
}

.ren-badge-success {
  background-color: var(--color-success-subtle);
  color: var(--color-success-strong);
}

.ren-badge-warning {
  background-color: var(--color-warning-subtle);
  color: var(--color-warning-strong);
}

.ren-badge-danger {
  background-color: var(--color-danger-subtle);
  color: var(--color-danger-strong);
}

.ren-badge-info {
  background-color: var(--color-info-subtle);
  color: var(--color-info-strong);
}

/* Outline variant */
.ren-badge-outline {
  background-color: transparent;
  border: var(--stroke-1) solid var(--color-border);
  color: var(--color-text-secondary);
}

/* ─── Dot indicator (no text) ─── */
.ren-badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
}

.ren-badge-dot-success { background-color: var(--color-success); }
.ren-badge-dot-warning { background-color: var(--color-warning); }
.ren-badge-dot-danger  { background-color: var(--color-danger); }
/* ============================================
   RenDS — Radio Button & Radio Group Components
   ============================================
   Custom-styled radio buttons and radio groups
   built on native <input type="radio">.

   Preserves native semantics and accessibility.
   Custom visuals via CSS only.

   Usage:
     <div class="ren-radio-group" role="radiogroup">
       <label class="ren-radio">
         <input type="radio" name="option" value="a">
         <span class="ren-radio-control"></span>
         <span>Option A</span>
       </label>
       <label class="ren-radio">
         <input type="radio" name="option" value="b">
         <span class="ren-radio-control"></span>
         <span>Option B</span>
       </label>
     </div>
   ============================================ */

/* ═══════════════════════════════
   RADIO BUTTON
   ═══════════════════════════════ */

.ren-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--body-size);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  user-select: none;
  /* Ensure touch target */
  min-height: var(--touch-min);
}

/* Hide native radio visually but keep accessible */
.ren-radio > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* Custom radio visual */
.ren-radio-control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;   /* 20px */
  height: 1.25rem;
  flex-shrink: 0;
  border: 2px solid var(--color-border-interactive);
  border-radius: var(--radius-full);
  background-color: transparent;
  transition:
    background-color var(--duration-state) var(--ease-enter),
    border-color var(--duration-state) var(--ease-enter),
    transform var(--duration-tactile) var(--ease-playful);
}

/* Radio dot (hidden by default) */
.ren-radio-control::after {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-on-accent);
  border-radius: var(--radius-full);
  transform: scale(0);
  transition: transform var(--duration-state) var(--ease-playful);
}

/* ─── States ─── */

/* Checked */
.ren-radio > input:checked + .ren-radio-control {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.ren-radio > input:checked + .ren-radio-control::after {
  transform: scale(1);
}

/* Hover */
.ren-radio:hover > .ren-radio-control {
  border-color: var(--color-accent);
}

.ren-radio:hover > input:checked + .ren-radio-control {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Focus */
.ren-radio > input:focus-visible + .ren-radio-control {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: var(--ring-offset-width);
}

/* Active / Press */
.ren-radio:active > .ren-radio-control {
  transform: scale(0.9);
}

/* Disabled */
.ren-radio:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ═══════════════════════════════
   RADIO GROUP
   ═══════════════════════════════ */

.ren-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ren-radio-group-horizontal {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
}
/* ============================================
   RenDS — Progress Bar & Meter Components
   ============================================
   Progress indicators and meter displays.
   CSS-only, works with <progress> and <meter>.

   Supports multiple sizes, colors, and states.
   Includes indeterminate animations.

   Usage:
     <div class="ren-progress">
       <div class="ren-progress-bar" style="width: 65%"></div>
     </div>

     <div class="ren-progress ren-progress-lg ren-progress-success">
       <div class="ren-progress-bar" style="width: 85%"></div>
     </div>

     <meter class="ren-meter" value="6" min="0" max="10"></meter>
   ============================================ */

/* ═══════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════ */

.ren-progress {
  display: flex;
  width: 100%;
  height: var(--ren-progress-height);   /* default / md */
  background-color: var(--ren-progress-bg);
  border-radius: var(--ren-progress-radius);
  overflow: hidden;
}

.ren-progress-bar {
  height: 100%;
  width: 0%;
  background-color: var(--ren-progress-fill);
  border-radius: var(--ren-progress-radius);
  transition: width var(--ren-progress-duration) var(--ren-progress-easing);
}

/* ─── Sizes ─── */

.ren-progress-sm {
  height: 0.25rem;
}

.ren-progress-lg {
  height: 0.75rem;
}

.ren-progress-xl {
  height: 1rem;
}

/* ─── Color Variants ─── */

.ren-progress-success .ren-progress-bar {
  background-color: var(--color-success);
}

.ren-progress-warning .ren-progress-bar {
  background-color: var(--color-warning);
}

.ren-progress-danger .ren-progress-bar {
  background-color: var(--color-danger);
}

.ren-progress-info .ren-progress-bar {
  background-color: var(--color-info);
}

/* ─── Indeterminate Animation ─── */

.ren-progress-indeterminate .ren-progress-bar {
  width: 30% !important;
  animation: ren-progress-slide 1.5s var(--ease-enter) infinite;
}

@keyframes ren-progress-slide {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(500%);
  }
  100% {
    transform: translateX(500%);
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ren-progress-indeterminate .ren-progress-bar {
    animation: none;
    width: 50% !important;
  }

  .ren-progress-bar {
    transition: none;
  }
}

/* ═══════════════════════════════
   PROGRESS LABELS
   ═══════════════════════════════ */

.ren-progress-label {
  display: block;
  font-size: var(--label-size);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.ren-progress-value {
  display: block;
  font-size: var(--label-size);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  margin: var(--space-1) 0 0;
  text-align: end;
}

/* ═══════════════════════════════
   METER ELEMENT
   ═══════════════════════════════ */

.ren-meter {
  display: block;
  width: 100%;
  height: 0.5rem;
  border: none;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--color-fill);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Webkit browsers (Chrome, Safari) */
.ren-meter::-webkit-meter-inner-element {
  border-radius: var(--radius-full);
}

.ren-meter::-webkit-meter-bar {
  background-color: var(--color-fill);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: none;
}

.ren-meter::-webkit-meter-optimum-value {
  background-color: var(--color-success);
  border-radius: var(--radius-full);
}

.ren-meter::-webkit-meter-suboptimum-value {
  background-color: var(--color-warning);
  border-radius: var(--radius-full);
}

.ren-meter::-webkit-meter-even-less-good-value {
  background-color: var(--color-danger);
  border-radius: var(--radius-full);
}

/* Firefox */
.ren-meter::-moz-meter-bar {
  background: var(--color-success);
  border-radius: var(--radius-full);
  border: none;
}

/* ─── Meter Sizes ─── */

.ren-meter-sm {
  height: 0.25rem;
}

.ren-meter-lg {
  height: 0.75rem;
}

.ren-meter-xl {
  height: 1rem;
}
/* ============================================
   RenDS — Icon Component
   ============================================
   Icon sizing, coloring, and animation utilities.
   Works with any SVG or icon font.

   The base class provides inline layout,
   color inheritance, and shrink-to-fit.

   Usage:
     <span class="ren-icon ren-icon-md">
       <svg>...</svg>
     </span>

     <button>
       <span class="ren-icon ren-icon-lg ren-icon-success">
         <svg>...</svg>
       </span>
       Export
     </button>

     <span class="ren-icon ren-icon-spin ren-icon-xl">
       <svg>...</svg>
     </span>
   ============================================ */

/* ═══════════════════════════════
   ICON BASE
   ═══════════════════════════════ */

.ren-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--ren-icon-size);   /* 20px — default md */
  height: var(--ren-icon-size);
  color: var(--ren-icon-color);
  fill: var(--ren-icon-fill);
}

.ren-icon > svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ─── Sizes ─── */

.ren-icon-xs {
  width: 0.75rem;   /* 12px */
  height: 0.75rem;
}

.ren-icon-sm {
  width: 1rem;      /* 16px */
  height: 1rem;
}

.ren-icon-md {
  width: 1.25rem;   /* 20px */
  height: 1.25rem;
}

.ren-icon-lg {
  width: 1.5rem;    /* 24px */
  height: 1.5rem;
}

.ren-icon-xl {
  width: 2rem;      /* 32px */
  height: 2rem;
}

.ren-icon-2xl {
  width: 3rem;      /* 48px */
  height: 3rem;
}

/* ─── Color Variants ─── */

.ren-icon-primary {
  color: var(--color-accent);
}

.ren-icon-success {
  color: var(--color-success);
}

.ren-icon-warning {
  color: var(--color-warning);
}

.ren-icon-danger {
  color: var(--color-danger);
}

.ren-icon-muted {
  color: var(--color-text-secondary);
}

/* ─── Animation ─── */

.ren-icon-spin {
  animation: ren-icon-spin var(--duration-loop) var(--ease-loop) infinite;
}

@keyframes ren-icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ren-icon-spin {
    animation: none;
  }
}
/* ============================================
   RenDS — Card Component
   ============================================
   Versatile container with header, body, footer.
   CSS-only. No JS needed.

   Constraint-driven: limited variants on purpose
   to ensure consistent UI across projects.

   Usage:
     <div class="ren-card">
       <div class="ren-card-header">
         <h3 class="ren-card-title">Title</h3>
         <p class="ren-card-description">Description here</p>
       </div>
       <div class="ren-card-body">
         Content
       </div>
       <div class="ren-card-footer">
         <button class="ren-btn">Action</button>
       </div>
     </div>

   Minimal:
     <div class="ren-card">
       <p>Just content, no sections needed.</p>
     </div>
   ============================================ */

/* ─── Base Card ─── */
.ren-card {
  background-color: var(--ren-card-bg);
  border: var(--ren-card-border-width) solid var(--ren-card-border-color);
  border-radius: var(--ren-card-radius);
  box-shadow: var(--ren-card-shadow);
  overflow: hidden;
}

/* ─── Sections ─── */

.ren-card-header {
  display: flex;
  flex-direction: column;
  gap: var(--ren-card-header-gap);
  padding: var(--ren-card-padding) var(--ren-card-padding) 0;
}

/* Title and description are typically applied to <h2>/<h3>/<h4> and <p>
   respectively, which carry browser-default margins that fight the header's
   `gap`. Reset them here so .ren-card-header's flex gap is the actual visual
   gap, regardless of the underlying tag. */
.ren-card-title {
  font-size: var(--title-sm-size, var(--text-lg));
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
  margin: 0;
}

.ren-card-description {
  font-size: var(--caption-size, var(--text-sm));
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0;
}

.ren-card-body {
  padding: var(--ren-card-padding);
}

/* Remove top padding when body follows header */
.ren-card-header + .ren-card-body {
  padding-top: var(--space-3);
}

/* Optional spacing between documented card sections without forcing a new
   flex/grid layout on the card root. */
.ren-card > :is(.ren-card-header, .ren-card-body, .ren-card-footer, .ren-card-footer-border)
  + :is(.ren-card-header, .ren-card-body, .ren-card-footer, .ren-card-footer-border) {
  margin-block-start: var(--ren-card-gap);
}

.ren-card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--ren-card-padding) var(--ren-card-padding);
}

/* Footer at bottom with border (for action-heavy cards) */
.ren-card-footer-border {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--ren-card-padding);
  border-top: var(--stroke-1) solid var(--color-border-muted);
}

/* When the bordered footer follows the header directly (no body in between),
   tighten the top padding so the divider line sits visually close to the
   description, not floating ~17px below it (which is what you get from the
   default --space-3 padding plus line-height extra of the description text). */
.ren-card-header + .ren-card-footer-border {
  padding-top: var(--space-2);
}

/* When card has no sections, just padding */
.ren-card > :first-child:not(.ren-card-header):not(.ren-card-body):not(.ren-card-footer) {
  padding-top: var(--ren-card-padding);
}

.ren-card > :last-child:not(.ren-card-header):not(.ren-card-body):not(.ren-card-footer) {
  padding-bottom: var(--ren-card-padding);
}

/* Simple card (no sections) */
.ren-card-simple {
  padding: var(--ren-card-padding);
}

/* ─── Variants ─── */

/* Elevated — more shadow, no border */
.ren-card-elevated {
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

/* Outline — emphasis border, no background difference */
.ren-card-outline {
  background-color: transparent;
}

/* Ghost — no border, no bg (content grouping) */
.ren-card-ghost {
  background-color: transparent;
  border: none;
}

/* Sunken — recessed appearance */
.ren-card-sunken {
  background-color: var(--color-surface-sunken);
  border-color: transparent;
}

/* ─── Interactive Card ─── */

.ren-card-interactive {
  cursor: pointer;
  transition:
    box-shadow var(--duration-state) var(--ease-enter),
    border-color var(--duration-state) var(--ease-enter),
    transform var(--duration-tactile) var(--ease-enter);
}

.ren-card-interactive:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.ren-card-interactive:active {
  transform: scale(0.99);
}

.ren-card-interactive:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: var(--ring-offset-width);
}

/* ─── Selectable Card ─── */

.ren-card-selectable {
  cursor: pointer;
  transition:
    border-color var(--duration-state) var(--ease-enter),
    box-shadow var(--duration-state) var(--ease-enter);
}

.ren-card-selectable:hover {
  border-color: var(--color-accent);
}

.ren-card-selectable[aria-selected="true"],
.ren-card-selectable[data-selected] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

/* ─── Status accent (top border) ─── */

.ren-card[data-status="success"] { border-top: 3px solid var(--color-success); }
.ren-card[data-status="warning"] { border-top: 3px solid var(--color-warning); }
.ren-card[data-status="danger"]  { border-top: 3px solid var(--color-danger); }
.ren-card[data-status="info"]    { border-top: 3px solid var(--color-info); }

/* ─── Card with cover image ─── */

.ren-card-cover {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ─── Card Group (grid of cards) ─── */

.ren-card-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-4);
}
/* ============================================
   RenDS — Link Component
   ============================================
   Styled anchor with variants.
   CSS-only. No JS needed.

   44px touch target on mobile via min-height.
   Accessible focus ring on keyboard navigation.

   Usage:
     <a href="/page" class="ren-link">Standard link</a>
     <a href="/page" class="ren-link ren-link-muted">Subtle link</a>
     <a href="/page" class="ren-link ren-link-external">External ↗</a>
   ============================================ */

/* ─── Base Link ─── */
.ren-link {
  display: inline;
  color: var(--ren-link-color);
  font-weight: var(--ren-link-font-weight, inherit);
  background: none;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--color-text-link), transparent 60%);
  text-underline-offset: 0.15em;
  text-decoration-thickness: var(--ren-link-underline);
  cursor: pointer;
  transition:
    color var(--duration-tactile) var(--ease-enter),
    text-decoration-color var(--duration-tactile) var(--ease-enter);
  /* Inline elements: ensure touch target via padding */
  -webkit-tap-highlight-color: transparent;
}

.ren-link:hover {
  color: var(--ren-link-hover-color);
  background: none;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--color-text-link-hover), transparent 30%);
  text-decoration-thickness: calc(var(--ren-link-underline) * 2);
}

.ren-link:active {
  opacity: 0.8;
}

.ren-link:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─── Muted / Subtle ─── */
.ren-link-muted {
  color: var(--color-text-muted);
  text-decoration: none;
}

.ren-link-muted:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* ─── Unstyled (inherits parent color) ─── */
.ren-link-plain {
  color: inherit;
  text-decoration: none;
}

.ren-link-plain:hover {
  text-decoration: underline;
}

/* ─── External link indicator ─── */
.ren-link-external::after {
  content: ' ↗';
  font-size: 0.85em;
  text-decoration: none;
  display: inline;
}

/* ─── Nav link (block-level, with padding for touch target) ─── */
.ren-link-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-1) var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition:
    background-color var(--duration-tactile) var(--ease-enter),
    color var(--duration-tactile) var(--ease-enter);
}

.ren-link-nav:hover {
  background-color: var(--color-fill);
  color: var(--color-text);
  text-decoration: none;
}

.ren-link-nav[aria-current="page"],
.ren-link-nav[data-active] {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: var(--weight-medium);
}

.ren-link-nav:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: -2px;
}

/* ─── Skip link (a11y) ─── */
.ren-link-skip {
  position: absolute;
  top: -100%;
  left: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  z-index: 9999;
  transition: top var(--duration-tactile) var(--ease-enter);
}

.ren-link-skip:focus {
  top: var(--space-3);
}
/* ============================================
   RenDS — Banner / Alert Component
   ============================================
   Inline messages for success, warning, error, info.
   CSS-only. No JS needed (dismiss is optional JS).

   Different from Toast: Banner is inline, persistent,
   part of the page flow. Toast is ephemeral overlay.

   Usage:
     <div class="ren-banner" role="status">
       <span class="ren-banner-icon">ℹ</span>
       <div class="ren-banner-content">
         <strong class="ren-banner-title">Info</strong>
         <p class="ren-banner-message">Your changes have been saved.</p>
       </div>
     </div>

     <div class="ren-banner ren-banner-danger" role="alert">
       <span class="ren-banner-icon">!</span>
       <div class="ren-banner-content">
         <strong class="ren-banner-title">Error</strong>
         <p class="ren-banner-message">Could not save changes.</p>
       </div>
       <button class="ren-banner-dismiss" aria-label="Dismiss">&times;</button>
     </div>

   Simple (no title):
     <div class="ren-banner ren-banner-success" role="status">
       <span class="ren-banner-icon">✓</span>
       <p class="ren-banner-message">File uploaded successfully.</p>
     </div>
   ============================================ */

/* ─── Base Banner ─── */
.ren-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--ren-banner-gap);
  padding: var(--ren-banner-padding);
  border-radius: var(--ren-banner-radius);
  font-size: var(--body-size);
  line-height: var(--leading-normal);
  /* Default: info */
  background-color: var(--ren-banner-bg);
  border: var(--ren-banner-border-width) solid var(--ren-banner-border-color);
  color: var(--ren-banner-color);
}

/* ─── Icon ─── */
.ren-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--ren-banner-icon-size);
  height: var(--ren-banner-icon-size);
  font-size: var(--text-base);
  margin-top: 1px;
}

/* ─── Content ─── */
.ren-banner-content {
  flex: 1;
  min-width: 0;
}

.ren-banner-title {
  display: block;
  font-weight: var(--weight-semibold);
  font-size: var(--label-size, var(--text-sm));
  margin: 0 0 var(--space-1);
}

.ren-banner-message {
  font-size: var(--caption-size, var(--text-sm));
  color: var(--color-text-secondary);
  margin: 0;
}

/* Title-only (no message) */
.ren-banner-title:last-child {
  margin-bottom: 0;
}

/* ─── Actions (buttons inside banner) ─── */
.ren-banner-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* ─── Dismiss button ─── */
.ren-banner-dismiss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  line-height: 1;
  transition: color var(--duration-tactile) var(--ease-enter);
}

.ren-banner-dismiss:hover {
  color: var(--color-text);
}

.ren-banner-dismiss:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ─── Variants ─── */

.ren-banner-success {
  background-color: var(--color-success-subtle);
  border-color: color-mix(in oklch, var(--color-success), transparent 70%);
}

.ren-banner-warning {
  background-color: var(--color-warning-subtle);
  border-color: color-mix(in oklch, var(--color-warning), transparent 70%);
}

.ren-banner-danger {
  background-color: var(--color-danger-subtle);
  border-color: color-mix(in oklch, var(--color-danger), transparent 70%);
}

.ren-banner-neutral {
  background-color: var(--color-surface-sunken);
  border-color: var(--color-border);
}

/* ─── Compact variant (less padding, single line) ─── */
.ren-banner-compact {
  align-items: center;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
}

.ren-banner-compact .ren-banner-icon {
  width: 1.25rem;
  height: 1.25rem;
  font-size: var(--text-sm);
}

/* ─── Full-width variant (no border-radius, for page top) ─── */
.ren-banner-full {
  border-radius: 0;
  border-inline-start: none;
  border-inline-end: none;
}

/* ─── Dismiss animation ─── */
.ren-banner[data-dismissing] {
  animation: ren-banner-dismiss var(--duration-state) var(--ease-enter) forwards;
}

@keyframes ren-banner-dismiss {
  to {
    opacity: 0;
    height: 0;
    padding-block: 0;
    margin-block: 0;
    overflow: hidden;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ren-banner[data-dismissing] {
    animation: none;
    display: none;
  }
}
/* ============================================
   RenDS — Breadcrumb Component
   ============================================
   Hierarchical navigation trail.
   CSS-only. No JS needed.

   Uses semantic <nav> + <ol> for accessibility.
   Screen readers announce "Breadcrumb" navigation.

   Usage:
     <nav aria-label="Breadcrumb" class="ren-breadcrumb">
       <ol>
         <li><a href="/">Home</a></li>
         <li><a href="/products">Products</a></li>
         <li><a href="/products/shoes" aria-current="page">Shoes</a></li>
       </ol>
     </nav>

   With custom separator:
     <nav aria-label="Breadcrumb" class="ren-breadcrumb"
          style="--breadcrumb-separator: '/'">
       ...
     </nav>
   ============================================ */

.ren-breadcrumb > ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ren-breadcrumb-gap);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--ren-breadcrumb-font-size);
}

.ren-breadcrumb > ol > li {
  display: inline-flex;
  align-items: center;
  gap: var(--ren-breadcrumb-gap);
  color: var(--ren-breadcrumb-color);
}

/* Separator */
.ren-breadcrumb > ol > li + li::before {
  content: var(--ren-breadcrumb-separator);
  color: var(--color-text-faint);
  font-size: 1.1em;
  margin-inline-end: var(--space-1);
}

/* Links */
.ren-breadcrumb > ol a {
  color: var(--ren-breadcrumb-color);
  text-decoration: none;
  padding: var(--space-1) 0;
  border-radius: var(--radius-sm);
  transition: color var(--duration-tactile) var(--ease-enter);
}

.ren-breadcrumb > ol a:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ren-breadcrumb > ol a:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Current page (last item) */
.ren-breadcrumb [aria-current="page"] {
  color: var(--ren-breadcrumb-active-color);
  font-weight: var(--weight-medium);
  text-decoration: none;
  pointer-events: none;
}

/* ─── Truncated (for deep paths) ─── */
.ren-breadcrumb-truncated > ol > li:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
  display: none;
}

/* Show ellipsis in place of hidden items */
.ren-breadcrumb-truncated > ol > li:nth-child(2)::after {
  content: '…';
  color: var(--color-text-faint);
  padding: 0 var(--space-1);
}
/* ============================================
   RenDS — Pagination Component
   ============================================
   Page navigation for lists/tables.
   CSS-only. No JS needed for styling.

   Semantic <nav> + links for accessibility.
   44px touch targets on all interactive elements.

   Usage (simple):
     <nav aria-label="Pagination" class="ren-pagination">
       <a href="?p=1" class="ren-pagination-prev" aria-label="Previous page">&lsaquo;</a>
       <a href="?p=1" class="ren-pagination-item">1</a>
       <a href="?p=2" class="ren-pagination-item" aria-current="page">2</a>
       <a href="?p=3" class="ren-pagination-item">3</a>
       <a href="?p=3" class="ren-pagination-next" aria-label="Next page">&rsaquo;</a>
     </nav>

   Usage (minimal — just prev/next):
     <nav aria-label="Pagination" class="ren-pagination ren-pagination-simple">
       <a href="?p=1" class="ren-pagination-prev">Previous</a>
       <span class="ren-pagination-info">Page 2 of 10</span>
       <a href="?p=3" class="ren-pagination-next">Next</a>
     </nav>
   ============================================ */

.ren-pagination {
  display: flex;
  align-items: center;
  gap: var(--ren-pagination-gap);
}

/* ─── Page items ─── */
.ren-pagination-item,
.ren-pagination-prev,
.ren-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ren-pagination-size);
  min-height: var(--ren-pagination-size);
  padding: var(--space-1) var(--space-2);
  font-size: var(--ren-pagination-font-size);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--ren-pagination-radius);
  border: var(--stroke-1) solid transparent;
  background-color: var(--ren-pagination-bg);
  transition:
    background-color var(--duration-tactile) var(--ease-enter),
    border-color var(--duration-tactile) var(--ease-enter);
  user-select: none;
}

.ren-pagination-item:hover,
.ren-pagination-prev:hover,
.ren-pagination-next:hover {
  background-color: var(--ren-pagination-hover-bg);
}

.ren-pagination-item:active,
.ren-pagination-prev:active,
.ren-pagination-next:active {
  background-color: var(--color-fill-hover);
}

.ren-pagination-item:focus-visible,
.ren-pagination-prev:focus-visible,
.ren-pagination-next:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: var(--ring-offset-width);
}

/* Current page */
.ren-pagination-item[aria-current="page"] {
  background-color: var(--ren-pagination-active-bg);
  color: var(--ren-pagination-active-color);
  pointer-events: none;
}

/* Disabled prev/next */
.ren-pagination-prev[aria-disabled="true"],
.ren-pagination-next[aria-disabled="true"],
.ren-pagination-prev:disabled,
.ren-pagination-next:disabled {
  color: var(--color-disabled-text);
  pointer-events: none;
  opacity: 0.5;
}

/* Ellipsis */
.ren-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  user-select: none;
}

/* ─── Simple variant (prev + info + next) ─── */
.ren-pagination-simple {
  gap: var(--space-2);
}

.ren-pagination-info {
  font-size: var(--caption-size, var(--text-sm));
  color: var(--color-text-muted);
  white-space: nowrap;
  padding: 0 var(--space-2);
}

/* ─── Compact variant (smaller touch targets) ─── */
.ren-pagination-compact .ren-pagination-item,
.ren-pagination-compact .ren-pagination-prev,
.ren-pagination-compact .ren-pagination-next {
  min-width: var(--size-sm);
  min-height: var(--size-sm);
  padding: var(--space-1);
  font-size: var(--caption-size, var(--text-sm));
}

/* ─── Centered (for standalone pagination) ─── */
.ren-pagination-centered {
  justify-content: center;
}
/* ============================================
   RenDS — Tag / Chip Component
   ============================================
   Interactive badge with optional dismiss button.
   CSS-only (dismiss needs minimal JS).

   Different from Badge: Tag is interactive,
   dismissable, and represents user-selected items.

   Usage:
     <span class="ren-tag">
       HTML
     </span>

     <span class="ren-tag ren-tag-removable">
       React
       <button class="ren-tag-dismiss" aria-label="Remove React">&times;</button>
     </span>

     <span class="ren-tag ren-tag-clickable" tabindex="0" role="button">
       Filter: Active
     </span>
   ============================================ */

.ren-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ren-tag-gap);
  min-height: var(--ren-tag-height);
  padding: 0.25em var(--ren-tag-padding-x);
  font-size: var(--ren-tag-font-size);
  font-weight: var(--ren-tag-font-weight);
  line-height: 1.5;
  color: var(--ren-tag-color);
  background-color: var(--ren-tag-bg);
  border: var(--stroke-1) solid var(--ren-tag-border-color);
  border-radius: var(--ren-tag-radius);
  white-space: nowrap;
  user-select: none;
  max-width: 100%;
}

/* Tag text truncation */
.ren-tag > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Dismiss button ─── */
.ren-tag-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-full);
  font-size: 1.1em;
  line-height: 1;
  flex-shrink: 0;
  transition:
    color var(--duration-tactile) var(--ease-enter),
    background-color var(--duration-tactile) var(--ease-enter);
}

.ren-tag-dismiss:hover {
  color: var(--color-text);
  background-color: var(--color-fill-hover);
}

.ren-tag-dismiss:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: 1px;
}

/* ─── Clickable / Selectable ─── */
.ren-tag-clickable {
  cursor: pointer;
  transition:
    background-color var(--duration-tactile) var(--ease-enter),
    border-color var(--duration-tactile) var(--ease-enter);
}

.ren-tag-clickable:hover {
  background-color: var(--color-fill-hover);
  border-color: var(--color-border-strong);
}

.ren-tag-clickable:active {
  background-color: var(--color-fill-active);
}

.ren-tag-clickable:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: var(--ring-offset-width);
}

/* Selected state */
.ren-tag-clickable[aria-pressed="true"],
.ren-tag-clickable[data-selected] {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}

/* ─── Color variants ─── */
.ren-tag-primary {
  background-color: var(--color-accent-subtle);
  border-color: color-mix(in oklch, var(--color-accent), transparent 70%);
  color: var(--color-accent);
}

.ren-tag-success {
  background-color: var(--color-success-subtle);
  border-color: color-mix(in oklch, var(--color-success), transparent 70%);
  color: var(--color-success-strong);
}

.ren-tag-warning {
  background-color: var(--color-warning-subtle);
  border-color: color-mix(in oklch, var(--color-warning), transparent 70%);
  color: var(--color-warning-strong);
}

.ren-tag-danger {
  background-color: var(--color-danger-subtle);
  border-color: color-mix(in oklch, var(--color-danger), transparent 70%);
  color: var(--color-danger-strong);
}

/* ─── Size variants ─── */
.ren-tag-sm {
  padding: 0.1em 0.45em;
  font-size: var(--text-xs);
  gap: 0.15em;
}

.ren-tag-lg {
  padding: 0.35em 0.8em;
  font-size: var(--body-size);
}

/* ─── Tag group ─── */
.ren-tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
/* ============================================
   RenDS — Separator
   ============================================
   Horizontal or vertical divider with optional
   label. CSS-only, no JS needed.

   Usage:
     <hr class="ren-separator">
     <div class="ren-separator-vertical"></div>
     <div class="ren-separator-label">or</div>
   ============================================ */

.ren-separator {
  border: none;
  background-color: var(--ren-separator-color);
}

/* Horizontal (default) */
.ren-separator,
.ren-separator-horizontal {
  width: 100%;
  height: var(--ren-separator-width);
  margin-block: var(--ren-separator-margin);
}

/* Vertical */
.ren-separator-vertical {
  width: var(--ren-separator-width);
  height: auto;
  align-self: stretch;
  margin-inline: var(--space-3);
}

/* With label (e.g. "or" between auth options) */
.ren-separator-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--caption-size);
  margin-block: var(--ren-separator-margin);
}

.ren-separator-label::before,
.ren-separator-label::after {
  content: '';
  flex: 1;
  height: var(--ren-separator-width);
  background-color: var(--ren-separator-color);
}
/* ============================================
   RenDS — Avatar
   ============================================
   Circular (or square) user image with fallback
   text, status indicator and group (overlap).

   Usage:
     <div class="ren-avatar"><img src="…" alt=""></div>
     <div class="ren-avatar ren-avatar-lg">JD</div>

     <div class="ren-avatar-wrapper">
       <div class="ren-avatar"><img …></div>
       <span class="ren-avatar-status"></span>
     </div>

     <div class="ren-avatar-group">
       <div class="ren-avatar">…</div>
       <div class="ren-avatar">…</div>
     </div>
   ============================================ */

.ren-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ren-avatar-size);     /* 40px default */
  height: var(--ren-avatar-size);
  border-radius: var(--ren-avatar-radius);
  overflow: hidden;
  background-color: var(--ren-avatar-bg);
  color: var(--ren-avatar-color);
  font-weight: var(--weight-semibold);
  font-size: var(--ren-avatar-font-size);
  flex-shrink: 0;
  user-select: none;
}

.ren-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── Sizes ─── */
.ren-avatar-xs  { width: var(--avatar-xs);  height: var(--avatar-xs);  font-size: var(--text-xs); }
.ren-avatar-sm  { width: var(--avatar-sm);  height: var(--avatar-sm);  font-size: var(--text-xs); }
.ren-avatar-lg  { width: var(--avatar-lg);  height: var(--avatar-lg);  font-size: var(--text-base); }
.ren-avatar-xl  { width: var(--avatar-xl);  height: var(--avatar-xl);  font-size: var(--text-lg); }
.ren-avatar-2xl { width: var(--avatar-2xl); height: var(--avatar-2xl); font-size: var(--text-xl); }

/* ─── Square variant ─── */
.ren-avatar-square {
  border-radius: var(--radius-md);
}

/* ─── Status indicator ─── */
.ren-avatar-wrapper {
  position: relative;
  display: inline-block;
}

.ren-avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface);
  background-color: var(--color-success);
}

.ren-avatar-status-offline { background-color: var(--gray-400); }
.ren-avatar-status-busy    { background-color: var(--color-danger); }
.ren-avatar-status-away    { background-color: var(--color-warning); }

/* ─── Group (overlapping) ─── */
.ren-avatar-group {
  display: flex;
  flex-direction: row-reverse;
}

.ren-avatar-group > .ren-avatar {
  border: var(--ren-avatar-border);
  margin-inline-start: -0.5rem;
}

.ren-avatar-group > .ren-avatar:last-child {
  margin-inline-start: 0;
}
/* ============================================
   RenDS — Spinner
   ============================================
   Circular loading indicator. CSS-only animation
   that respects prefers-reduced-motion (falls
   back to a gentle opacity pulse instead of
   rotating).

   Usage:
     <span class="ren-spinner" role="status"
           aria-label="Loading"></span>
     <span class="ren-spinner ren-spinner-lg"></span>

   Accessibility:
     - Provide role="status" and aria-label for SR
     - On dark surfaces use .ren-spinner-light
   ============================================ */

.ren-spinner {
  display: inline-block;
  width: var(--ren-spinner-size);
  height: var(--ren-spinner-size);
  border: var(--ren-spinner-width) solid var(--color-fill-active);
  border-top-color: var(--ren-spinner-color);
  border-radius: var(--radius-full);
  animation: ren-spin var(--ren-spinner-speed) var(--ease-loop-smooth) infinite;
}

/* ─── Sizes ─── */
.ren-spinner-xs { width: 0.875rem; height: 0.875rem; border-width: 2px; }
.ren-spinner-sm { width: 1rem;     height: 1rem;     border-width: 2px; }
.ren-spinner-lg { width: 2rem;     height: 2rem;     border-width: 3px; }
.ren-spinner-xl { width: 3rem;     height: 3rem;     border-width: 3px; }

/* ─── Color variants ─── */
.ren-spinner-light {
  border-color: rgb(255, 255, 255, 0.3);
  border-top-color: var(--white);
}

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

@keyframes ren-spin-gentle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Reduced motion: pulse opacity instead of rotating */
@media (prefers-reduced-motion: reduce) {
  .ren-spinner {
    animation: ren-spin-gentle var(--duration-loop-gentle) var(--ease-loop-pulse) infinite;
  }
}
/* ============================================
   RenDS — Skeleton
   ============================================
   Loading placeholder with shimmer animation.
   Respects prefers-reduced-motion (static fill).

   Usage:
     <div class="ren-skeleton ren-skeleton-heading"></div>
     <div class="ren-skeleton ren-skeleton-text"></div>
     <div class="ren-skeleton ren-skeleton-circle"></div>
     <div class="ren-skeleton ren-skeleton-rect"></div>

   Accessibility:
     - Wrap multiple skeletons in a container with
       aria-busy="true" aria-live="polite"
     - Replace with real content when loaded
   ============================================ */

.ren-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--ren-skeleton-bg) 25%,
    var(--ren-skeleton-shine) 50%,
    var(--ren-skeleton-bg) 75%
  );
  background-size: 200% 100%;
  animation: ren-skeleton-pulse var(--ren-skeleton-speed) var(--ease-loop-pulse) infinite;
  border-radius: var(--ren-skeleton-radius);
  min-height: 1rem;
}

/* ─── Variants ─── */
.ren-skeleton-text {
  height: 1em;
  width: 100%;
  border-radius: var(--radius-sm);
}

.ren-skeleton-heading {
  height: 1.5em;
  width: 60%;
  border-radius: var(--radius-sm);
}

.ren-skeleton-circle {
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radius-full);
}

.ren-skeleton-rect {
  width: 100%;
  height: 8rem;
  border-radius: var(--radius-md);
}

@keyframes ren-skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ren-skeleton {
    animation: none;
    background: var(--ren-skeleton-bg);
  }
}
/* ============================================
   RenDS — Kbd (keyboard shortcut)
   ============================================
   Inline chip showing a keyboard key or shortcut
   combo. Uses native <kbd> semantics.

   Usage:
     <kbd class="ren-kbd">⌘</kbd>
     <kbd class="ren-kbd">K</kbd>

   Combo:
     <kbd class="ren-kbd">⌘</kbd> + <kbd class="ren-kbd">K</kbd>
   ============================================ */

.ren-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: var(--ren-kbd-padding);
  font-family: var(--ren-kbd-font-family);
  font-size: var(--ren-kbd-font-size);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--ren-kbd-color);
  background-color: var(--ren-kbd-bg);
  border: var(--stroke-1) solid var(--ren-kbd-border);
  border-bottom-width: 2px;
  border-radius: var(--ren-kbd-radius);
  white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════════════════════════
   REN DIALOG / MODAL COMPONENT
   Native <dialog> element enhancement with CSS animations and modern APIs
   Uses @starting-style, transition-behavior: allow-discrete, and CSS nesting
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ DIALOG CONTAINER ═══ */
.ren-dialog {
  /* Structure */
  margin: auto;
  padding: 0;
  border: none;

  /* Sizing */
  max-width: var(--dialog-max-width, 32rem);
  max-height: 85dvh;
  width: 90vw;
  overflow: auto;

  /* Appearance */
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);

  /* Smooth scrolling for body overflow */
  scrollbar-gutter: stable;

  /* ═══ ANIMATION STATES ═══
     Uses semantic motion tokens so global motion tuning
     cascades to every component. See tokens/semantic/motion.css. */
  opacity: 1;
  transform: scale(1) translateY(0);

  transition:
    opacity   var(--duration-enter) var(--ease-enter),
    transform var(--duration-enter) var(--ease-enter),
    overlay   var(--duration-enter) allow-discrete,
    display   var(--duration-enter) allow-discrete;

  /* ═══ ENTRY ANIMATION (CSS Transitions instead of keyframes) ═══ */
  @starting-style {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }

  /* ═══ BACKDROP STYLING ═══
     Uses --transition-overlay so scrim fade/blur duration
     is tuned in one place (tokens/semantic/motion.css). */
  &::backdrop {
    background-color: rgb(0, 0, 0, 0);
    backdrop-filter: blur(0px);

    transition: var(--transition-overlay);

    /* ═══ BACKDROP ENTRY ANIMATION ═══ */
    @starting-style {
      background-color: rgb(0, 0, 0, 0);
      backdrop-filter: blur(0px);
    }
  }

  /* ═══ OPEN STATE ═══ */
  &[open] {
    opacity: 1;
    transform: scale(1) translateY(0);

    &::backdrop {
      background-color: var(--color-overlay);
      backdrop-filter: blur(4px);
    }
  }

  /* ═══ REDUCED MOTION ═══ */
  @media (prefers-reduced-motion: reduce) {
    transition: none;

    &::backdrop {
      transition: none;
    }
  }
}

/* ═══ DIALOG HEADER ═══
   No bottom border — separation from the body comes from spacing, not lines.
   Header padding-bottom + body padding-top give the breathing room. */
.ren-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-3);
  flex-shrink: 0;
}

/* ═══ DIALOG TITLE ═══ */
.ren-dialog-title {
  margin: 0;
  font-size: 1.25rem; /* ~20px */
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-text);
}

/* ═══ DIALOG DESCRIPTION ═══ */
.ren-dialog-description {
  margin: 0;
  margin-top: var(--space-2);
  font-size: 0.875rem; /* caption */
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ═══ DIALOG BODY ═══ */
.ren-dialog-body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* Allow flex shrinking */

  /* ═══ SCROLLBAR STYLING ═══ */
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;

    &:hover {
      background: var(--color-border-hover);
    }
  }
}

/* ═══ DIALOG FOOTER ═══ */
.ren-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-6);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* ═══ CLOSE BUTTON ═══ */
.ren-dialog-close {
  margin-inline-start: auto;
  padding: var(--space-2);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;

  /* Tactile transitions (hover / focus / press) */
  transition: var(--transition-tactile);

  &:hover {
    background-color: var(--color-background-hover);
    color: var(--color-text);
  }

  &:active {
    background-color: var(--color-background-active);
  }

  &:focus {
    outline: var(--ring-width) solid var(--color-focus-ring);
    outline-offset: var(--ring-offset-width);
  }

  & svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* ═══ SIZE VARIANTS ═══ */

/* Small dialog (24rem) */
.ren-dialog-sm {
  --dialog-max-width: 24rem;
}

/* Medium dialog (32rem) - DEFAULT */
.ren-dialog-md {
  --dialog-max-width: 32rem;
}

/* Large dialog (42rem) */
.ren-dialog-lg {
  --dialog-max-width: 42rem;
}

/* Extra Large dialog (56rem) */
.ren-dialog-xl {
  --dialog-max-width: 56rem;
}

/* Full width dialog (95dvw) */
.ren-dialog-full {
  max-width: 95dvw;
  max-height: 95dvh;
  width: 95dvw;
}

/* ═══ ALERT DIALOG VARIANT ═══ */
.ren-alert-dialog {
  /* No additional styling needed - alert behavior handled in JS */
}

/* ═══ MOBILE RESPONSIVE ═══ */
@media (max-width: 640px) {
  .ren-dialog {
    max-width: 100%;
    max-height: 100dvh;
    width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;

    /* ═══ BOTTOM SHEET ANIMATION (Mobile) ═══ */
    &[data-mobile-sheet] {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;

      transform: translateY(100%);
      transition:
        transform var(--duration-enter) var(--ease-enter),
        opacity   var(--duration-enter) var(--ease-enter),
        overlay   var(--duration-enter) allow-discrete,
        display   var(--duration-enter) allow-discrete;

      @starting-style {
        transform: translateY(100%);
      }

      &[open] {
        transform: translateY(0);
      }
    }
  }

  .ren-dialog-header,
  .ren-dialog-body,
  .ren-dialog-footer {
    padding: var(--space-4);
  }

  .ren-dialog-title {
    font-size: 1.125rem;
  }
}

/* ═══ WEB COMPONENT CONTAINER ═══ */
ren-dialog {
  display: contents;
}

.ren-dialog-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Appearance API bridge: public component tokens remain overridable at any scope. */
.ren-dialog,
.ren-alert-dialog {
  width: var(--ren-dialog-width, min(90vw, 500px));
  padding: var(--ren-dialog-padding, var(--space-6));
  border-radius: var(--ren-dialog-radius, var(--radius-xl));
  background: var(--ren-dialog-bg, var(--color-surface-overlay));
  border-color: var(--ren-dialog-border-color, var(--color-border));
  box-shadow: var(--ren-dialog-shadow, var(--shadow-xl));
  gap: var(--ren-dialog-gap, var(--space-4));
  transition-duration: var(--ren-dialog-duration, var(--duration-normal));
  transition-timing-function: var(--ren-dialog-easing, var(--ease-out));
}
.ren-dialog::backdrop,
.ren-alert-dialog::backdrop { background: var(--ren-dialog-backdrop, var(--color-overlay)); }
/* ═══ ANCHOR POSITIONING & BASE STYLES ═══ */
.ren-popover {
  position: absolute;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  max-width: 20rem;
  z-index: var(--z-popover, 1000);
  pointer-events: auto;
  margin: 0;
  inset: auto;
  border-top: none;

  /* Anchor positioning (modern browsers) */
  position-anchor: --popover-anchor;

  /* Default: below the trigger with automatic fallback */
  position-area: bottom span-all;

  /* Automatic flip when near viewport edges */
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;

  /* Enter/exit transitions driven by semantic motion tokens. */
  opacity: 0;
  transform: translateY(-4px) scale(0.95);
  transition:
    opacity   var(--duration-enter) var(--ease-enter),
    transform var(--duration-enter) var(--ease-enter),
    overlay   var(--duration-enter) var(--ease-enter) allow-discrete,
    display   var(--duration-enter) var(--ease-enter) allow-discrete;
}

/* ═══ POPOVER OPEN STATE ═══ */
.ren-popover:popover-open,
.ren-popover.ren-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ═══ POPOVER OPEN WITH @starting-style ═══ */
@starting-style {
  .ren-popover:popover-open {
    opacity: 0;
    transform: translateY(-4px) scale(0.95);
  }
}

/* ═══ POPOVER ARROW/CARET ═══ */
.ren-popover-arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
  border: inherit;
  border-top: none;
  border-inline-start: none;
  transform: rotate(45deg);
  z-index: -1;
}

/* ═══ PLACEMENT VARIANTS ═══ */
/* Bottom (default) */
.ren-popover[data-side="bottom"],
.ren-popover:not([data-side]) {
  position-area: bottom span-all;
  margin-block-start: var(--space-2);
  margin-block-end: 0;
  margin-inline: 0;

  & .ren-popover-arrow {
    top: -4px;
    left: 50%;
    transform: translateX(-50%) rotate(225deg);
  }
}

/* Top */
.ren-popover[data-side="top"] {
  position-area: top span-all;
  margin-block-start: 0;
  margin-block-end: var(--space-2);
  margin-inline: 0;

  & .ren-popover-arrow {
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }
}

/* Right */
.ren-popover[data-side="right"] {
  position-area: right span-all;
  margin-block: 0;
  margin-inline-start: var(--space-2);
  margin-inline-end: 0;

  & .ren-popover-arrow {
    left: -4px;
    top: 50%;
    transform: translateY(-50%) rotate(135deg);
  }
}

/* Left */
.ren-popover[data-side="left"] {
  position-area: left span-all;
  margin-block: 0;
  margin-inline-start: 0;
  margin-inline-end: var(--space-2);

  & .ren-popover-arrow {
    right: -4px;
    top: 50%;
    transform: translateY(-50%) rotate(315deg);
  }
}

/* ═══ POPOVER SECTIONS ═══ */
.ren-popover-header {
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--color-text-primary);
}

.ren-popover-body {
  color: var(--color-text-secondary);
  font-size: var(--size-body-sm);
  line-height: 1.5;
}

.ren-popover-footer {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-2);
}

/* ═══ RESPECTS MOTION PREFERENCES ═══
   Semantic --duration-enter already collapses to 0ms under
   reduced-motion. We keep this block to drop the transform
   (scale/translate) in the starting-style, so the popover
   fades in place instead of moving. */
@media (prefers-reduced-motion: reduce) {
  .ren-popover {
    transition:
      opacity var(--duration-enter),
      overlay var(--duration-enter) allow-discrete,
      display var(--duration-enter) allow-discrete;
    transform: none;
  }

  @starting-style {
    .ren-popover:popover-open {
      opacity: 0;
      transform: none;
    }
  }
}

/* ═══ FALLBACK FOR BROWSERS WITHOUT COMPLETE ANCHOR POSITIONING ═══ */
@supports not ((anchor-name: --ren-anchor) and
  (position-anchor: --ren-anchor) and
  (position-area: bottom span-all)) {
  .ren-popover {
    position: absolute;
    inset: auto auto auto auto;
  }

  [data-popover-trigger],
  .ren-popover-trigger {
    position: relative;
  }

  /* Fallback animations */
  .ren-popover {
    animation: ren-popover-fallback-open var(--duration-enter) var(--ease-enter);
  }

  .ren-popover:popover-open,
  .ren-popover.ren-open {
    animation: ren-popover-fallback-open var(--duration-enter) var(--ease-enter);
  }

  @media (prefers-reduced-motion: reduce) {
    .ren-popover {
      animation: none;
    }
  }
}

@keyframes ren-popover-fallback-open {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Appearance API bridge */
.ren-popover {
  width: var(--ren-popover-width, 280px);
  max-width: var(--ren-popover-width, 280px);
  padding: var(--ren-popover-padding, var(--space-4));
  border-radius: var(--ren-popover-radius, var(--radius-lg));
  background: var(--ren-popover-bg, var(--color-surface-overlay));
  border-color: var(--ren-popover-border-color, var(--color-border));
  box-shadow: var(--ren-popover-shadow, var(--shadow-lg));
  transition-duration: var(--ren-popover-duration, var(--duration-normal));
  transition-timing-function: var(--ren-popover-easing, var(--ease-out));
}
/* ═══ ANCHOR POSITIONING & BASE STYLES ═══ */
.ren-tooltip {
  position: absolute;
  background: var(--ren-tooltip-bg, var(--color-text));
  color: var(--ren-tooltip-color, var(--color-text-inverted));
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  font-size: var(--size-caption, 0.75rem);
  max-width: 15rem;
  pointer-events: none;
  z-index: var(--z-tooltip, 2000);
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
  margin: 0;
  inset: auto;
  overflow: visible;

  /* Anchor positioning (modern browsers) */
  position-anchor: --tooltip-anchor;

  /* Default: above the trigger with automatic fallback */
  position-area: top span-all;

  /* Automatic flip when near viewport edges */
  position-try-fallbacks: flip-block;

  /* Smooth transitions — semantic tokens keep tooltip in sync with the
     rest of the overlay family (popover, menu, dialog). Collapses to
     0ms under prefers-reduced-motion via tokens/semantic/motion.css. */
  opacity: 0;
  transform: translateY(4px) scale(0.95);
  transition:
    opacity var(--duration-enter) var(--ease-enter),
    transform var(--duration-enter) var(--ease-enter),
    overlay var(--duration-enter) var(--ease-enter) allow-discrete,
    display var(--duration-enter) var(--ease-enter) allow-discrete;
}

/* ═══ TOOLTIP OPEN STATE ═══ */
.ren-tooltip:popover-open,
.ren-tooltip.ren-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ═══ TOOLTIP OPEN WITH @starting-style ═══ */
@starting-style {
  .ren-tooltip:popover-open {
    opacity: 0;
    transform: translateY(4px) scale(0.95);
  }
}

/* ═══ TOOLTIP ARROW/CARET ═══ */
.ren-tooltip-arrow {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--ren-tooltip-bg, var(--color-text));
  transform: rotate(45deg);
  z-index: -1;
}

/* ═══ PLACEMENT VARIANTS ═══ */
/* Bottom */
.ren-tooltip[data-side="bottom"] {
  position-area: bottom span-all;
  margin-block-start: var(--space-1);
  margin-block-end: 0;
  margin-inline: 0;

  & .ren-tooltip-arrow {
    top: -3px;
    left: 50%;
    transform: translateX(-50%) rotate(225deg);
  }
}

/* Top (default) */
.ren-tooltip[data-side="top"],
.ren-tooltip:not([data-side]) {
  position-area: top span-all;
  margin-block-start: 0;
  margin-block-end: var(--space-1);
  margin-inline: 0;

  & .ren-tooltip-arrow {
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }
}

/* Right */
.ren-tooltip[data-side="right"] {
  position-area: right span-all;
  margin-block: 0;
  margin-inline-start: var(--space-1);
  margin-inline-end: 0;

  & .ren-tooltip-arrow {
    left: -3px;
    top: 50%;
    transform: translateY(-50%) rotate(135deg);
  }
}

/* Left */
.ren-tooltip[data-side="left"] {
  position-area: left span-all;
  margin-block: 0;
  margin-inline-start: 0;
  margin-inline-end: var(--space-1);

  & .ren-tooltip-arrow {
    right: -3px;
    top: 50%;
    transform: translateY(-50%) rotate(315deg);
  }
}

/* ═══ RESPECTS MOTION PREFERENCES ═══
   Semantic tokens already collapse to 0ms under reduce, but we keep
   this belt-and-suspenders block so the transform-half can be skipped
   entirely (no scale bounce) while overlay/display discrete swaps
   still happen. */
@media (prefers-reduced-motion: reduce) {
  .ren-tooltip {
    transition: opacity var(--duration-enter), transform var(--duration-enter),
                overlay var(--duration-enter) allow-discrete,
                display var(--duration-enter) allow-discrete;
  }

  @starting-style {
    .ren-tooltip:popover-open {
      opacity: 0;
      transform: scale(1);
    }
  }
}

/* ═══ FALLBACK FOR BROWSERS WITHOUT COMPLETE ANCHOR POSITIONING ═══ */
@supports not ((anchor-name: --ren-anchor) and
  (position-anchor: --ren-anchor) and
  (position-area: top span-all)) {
  .ren-tooltip {
    position: absolute;
    inset: auto auto auto auto;
  }

  .ren-tooltip-trigger {
    position: relative;
  }

  /* Fallback animations */
  .ren-tooltip {
    animation: ren-tooltip-fallback-open var(--duration-enter) var(--ease-enter);
  }

  .ren-tooltip:popover-open,
  .ren-tooltip.ren-open {
    animation: ren-tooltip-fallback-open var(--duration-enter) var(--ease-enter);
  }

  @media (prefers-reduced-motion: reduce) {
    .ren-tooltip {
      animation: none;
    }
  }
}

@keyframes ren-tooltip-fallback-open {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Appearance API bridge */
.ren-tooltip {
  background: var(--ren-tooltip-bg, var(--color-text));
  color: var(--ren-tooltip-color, var(--color-text-inverted));
  font-size: var(--ren-tooltip-font-size, var(--caption-sm-size));
  padding-inline: var(--ren-tooltip-padding-x, var(--space-3));
  padding-block: var(--ren-tooltip-padding-y, var(--space-1));
  border-radius: var(--ren-tooltip-radius, var(--radius-md));
  box-shadow: var(--ren-tooltip-shadow, var(--shadow-sm));
  transition-duration: var(--ren-tooltip-duration, var(--duration-fast));
  transition-timing-function: var(--ren-tooltip-easing, var(--ease-out));
}
/* ═══ TABS CONTAINER ═══ */
.ren-tabs {
  container-type: inline-size;
  container-name: ren-tabs;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ═══ TAB LIST ═══ */
.ren-tab-list {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Smooth scrolling for horizontal tabs */
.ren-tab-list {
  scroll-behavior: smooth;
}

/* ═══ TAB ITEM (UNDERLINE VARIANT - DEFAULT) ═══ */
.ren-tab {
  position: relative;
  padding: var(--space-2) var(--space-4);
  font-size: var(--label-md-size);
  font-weight: var(--label-md-weight);
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  min-height: var(--size-lg);
  display: flex;
  align-items: center;
  white-space: nowrap;
  user-select: none;
  transition: var(--transition-tactile);
}

/* Active tab */
.ren-tab[aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
  font-weight: var(--label-lg-weight);
}

/* Tab hover state */
.ren-tab:hover:not([aria-disabled="true"]):not(:disabled) {
  color: var(--color-text);
  background-color: var(--color-fill);
}

/* Tab focus ring */
.ren-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Disabled tab */
.ren-tab:disabled,
.ren-tab[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--color-text-muted);
}

.ren-tab:disabled:hover,
.ren-tab[aria-disabled="true"]:hover {
  background-color: transparent;
}

/* ═══ TAB PANELS ═══ */
.ren-tab-panel {
  padding-block: var(--space-4);
}

.ren-tab-panel[hidden] {
  display: none;
}

/* Panel focus ring */
.ren-tab-panel:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* ═══ VARIANT: PILLS ═══ */
.ren-tab-list-pills {
  border-bottom: none;
  gap: var(--space-1);
}

.ren-tab-list-pills .ren-tab {
  border-bottom: none;
  border-radius: var(--radius-md);
  background-color: transparent;
  padding: var(--space-2) var(--space-3);
}

.ren-tab-list-pills .ren-tab[aria-selected="true"] {
  background-color: var(--color-fill);
  border-bottom-color: transparent;
  font-weight: var(--label-lg-weight);
}

.ren-tab-list-pills .ren-tab:hover:not([aria-disabled="true"]):not(:disabled) {
  background-color: var(--color-fill-hover);
}

/* ═══ VARIANT: UNDERLINE (DEFAULT) ═══ */
.ren-tab-list-underline {
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-2);
}

.ren-tab-list-underline .ren-tab {
  border-bottom: 2px solid transparent;
}

.ren-tab-list-underline .ren-tab[aria-selected="true"] {
  border-bottom-color: var(--color-accent);
}

/* ═══ VARIANT: ENCLOSED ═══ */
.ren-tab-list-enclosed {
  border-bottom: none;
  gap: var(--space-2);
}

.ren-tab-list-enclosed .ren-tab {
  border: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background-color: var(--color-fill);
  padding: var(--space-3) var(--space-4);
}

.ren-tab-list-enclosed .ren-tab[aria-selected="true"] {
  border-color: var(--color-border);
  border-bottom-color: var(--color-surface);
  background-color: var(--color-surface);
  color: var(--color-text);
  position: relative;
  z-index: 1;
}

.ren-tab-list-enclosed .ren-tab[aria-selected="true"]::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: -1px;
  right: -1px;
  height: 1px;
  background-color: var(--color-surface);
}

.ren-tab-list-enclosed .ren-tab:hover:not([aria-disabled="true"]):not(:disabled) {
  background-color: var(--color-fill-hover);
}

/* ═══ COMPACT LAYOUT (Container Query) ═══ */
@container ren-tabs (max-width: 480px) {
  .ren-tab-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Add scrollbar styling for better UX */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }

  .ren-tab-list::-webkit-scrollbar {
    height: 4px;
  }

  .ren-tab-list::-webkit-scrollbar-track {
    background: transparent;
  }

  .ren-tab-list::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 2px;
  }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-tab {
    transition: none;
  }
}
/* Appearance API bridge */
.ren-tabs {
  min-block-size: var(--ren-tabs-height, var(--size-lg));
  font-size: var(--ren-tabs-font-size, var(--label-size));
  font-weight: var(--ren-tabs-font-weight, var(--label-weight));
  color: var(--ren-tabs-color, var(--color-text-muted));
  border-color: var(--ren-tabs-border-color, var(--color-border));
  gap: var(--ren-tabs-gap, 0);
  transition-duration: var(--ren-tabs-duration, var(--duration-fast));
  transition-timing-function: var(--ren-tabs-easing, var(--ease-out));
}
.ren-tabs [aria-selected="true"], .ren-tabs [data-state="active"] { color: var(--ren-tabs-active-color, var(--color-text)); }
.ren-tabs [data-indicator], .ren-tabs-indicator { background: var(--ren-tabs-indicator-color, var(--color-accent)); }
/**
 * RenDS — <ren-accordion> Component
 * ═══════════════════════════════════
 * CSS-first accordion using native <details><summary>
 *
 * Features:
 *   - Smooth height animation using ::details-content
 *   - Chevron rotation on open state
 *   - Multiple variants: default, bordered, flush
 *   - Reduced motion support
 *   - Dark mode support (via semantic tokens)
 *   - Fallback for browsers without ::details-content support
 */

/* ═══════════════════════════════════════════════════════════════════ */
/* ACCORDION CONTAINER */
/* ═══════════════════════════════════════════════════════════════════ */

.ren-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid var(--color-border);

  /* Default variant: divider lines between items */
  & > details {
    border-bottom: 1px solid var(--color-border);

    &:last-child {
      border-bottom: none;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* TRIGGER / SUMMARY ELEMENT */
/* ═══════════════════════════════════════════════════════════════════ */

.ren-accordion-trigger,
.ren-accordion > details > summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-weight: var(--label-lg-weight);
  font-size: var(--label-lg-size);
  line-height: 1.4;
  color: var(--color-text);
  background-color: transparent;
  border: none;
  min-height: var(--size-lg);
  width: 100%;
  text-align: start;
  user-select: none;
  list-style: none;
  transition: var(--transition-tactile);

  /* Remove default browser marker */
  &::marker,
  &::-webkit-details-marker {
    display: none;
    content: '';
  }

  /* Chevron icon via ::after pseudo-element */
  &::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-inline-start: var(--space-3);
    flex-shrink: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform var(--duration-enter) var(--ease-enter);
      border: none;
    transform: rotate(0deg);
  }

  /* Hover state */
  &:hover {
    background-color: var(--color-fill);
  }

  /* Active state */
  &:active {
    background-color: var(--color-fill-active);
  }

  /* Focus ring */
  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }

  /* Disabled state */
  &:disabled,
  &[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;

    &:hover {
      background-color: transparent;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* REMOVE NATIVE DISCLOSURE TRIANGLE (WebKit fallback) */
/* ═══════════════════════════════════════════════════════════════════ */

.ren-accordion > details > summary::-webkit-details-marker {
  display: none;
}

.ren-accordion-trigger::-webkit-details-marker {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* OPEN STATE — ROTATE CHEVRON */
/* ═══════════════════════════════════════════════════════════════════ */

.ren-accordion > details[open] > summary::after {
  transform: rotate(180deg);
}

/* Fallback for custom markup */
.ren-accordion-trigger[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Animate the native details content box. The global reset enables
   keyword-size interpolation, so block-size can transition to and from auto. */
@supports selector(details::details-content) {
  .ren-accordion > details::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition:
      block-size var(--duration-exit) var(--ease-exit),
      opacity var(--duration-exit) var(--ease-exit),
      content-visibility var(--duration-exit) var(--ease-exit);
    transition-behavior: allow-discrete;
  }

  .ren-accordion > details[open]::details-content {
    block-size: auto;
    opacity: 1;
    transition-duration: var(--duration-enter);
    transition-timing-function: var(--ease-enter);
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* CONTENT ANIMATION — MODERN APPROACH */
/* ═══════════════════════════════════════════════════════════════════ */

.ren-accordion > details {
  /* Modern: use ::details-content for height animation */
  & > .ren-accordion-content {
    padding: 0 var(--space-4) var(--space-4);
    color: var(--color-text-muted);
    line-height: 1.6;
    overflow: hidden;

    /* Browsers with ::details-content support */
    @supports selector(::-webkit-details-content) {
      height: 0;
      overflow: hidden;
      transition:
        height var(--duration-enter) var(--ease-enter),
        opacity var(--duration-enter) var(--ease-enter);
    }

    /* Also try Chrome/V8 syntax (may vary by engine) */
    @supports selector(::details-content) {
      height: 0;
      overflow: hidden;
      transition:
        height var(--duration-enter) var(--ease-enter),
        opacity var(--duration-enter) var(--ease-enter);
    }
  }

  /* Fallback for browsers without ::details-content: use opacity + max-height */
  & > .ren-accordion-content {
    opacity: 0;
    max-height: 0;
    transition:
      opacity var(--duration-enter) var(--ease-enter),
      max-height var(--duration-enter) var(--ease-enter);
  }

  /* When details is open */
  &[open] > .ren-accordion-content {
    opacity: 1;
    max-height: 1000px; /* Reasonable fallback limit */

    /* Modern: animate to auto height with ::details-content */
    @supports selector(::details-content) {
      height: auto;
    }
  }

  /* Entry animation starting point (for ::details-content) */
  @starting-style {
    &[open] > .ren-accordion-content {
      opacity: 0;
      max-height: 0;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* CONTENT ELEMENT */
/* ═══════════════════════════════════════════════════════════════════ */

.ren-accordion-content {
  padding: 0 var(--space-4) var(--space-4);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Hide custom content via hidden attribute (for non-details markup) */
.ren-accordion-content[hidden] {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* VARIANT: BORDERED */
/* ═══════════════════════════════════════════════════════════════════ */

.ren-accordion-bordered {
  border-top: none;

  & > details,
  & .ren-accordion-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    overflow: hidden;

    &:last-child {
      margin-bottom: 0;
    }
  }

  & > details > summary,
  & .ren-accordion-trigger {
    padding: var(--space-4) var(--space-4);
  }

  & > details > .ren-accordion-content,
  & .ren-accordion-content {
    padding: 0 var(--space-4) var(--space-4);
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* VARIANT: FLUSH (no borders, minimal spacing) */
/* ═══════════════════════════════════════════════════════════════════ */

.ren-accordion-flush {
  border-top: none;

  & > details,
  & .ren-accordion-item {
    border-bottom: none;
    padding: var(--space-2) 0;

    &:last-child {
      border-bottom: none;
    }
  }

  & > details > summary,
  & .ren-accordion-trigger {
    padding: var(--space-3) 0;
  }

  & > details > .ren-accordion-content,
  & .ren-accordion-content {
    padding: 0 0 var(--space-3);
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* REDUCED MOTION */
/* ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .ren-accordion-trigger::after,
  .ren-accordion > details > summary::after {
    transition: none;
  }

  .ren-accordion > details > .ren-accordion-content {
    transition: none;
  }

  .ren-accordion > details::details-content {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* ACCESSIBILITY SUPPORT */
/* ═══════════════════════════════════════════════════════════════════ */

/* Ensure proper contrast for focus states */
.ren-accordion > details > summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Dark mode: tokens will auto-adjust via CSS variables */
@media (prefers-color-scheme: dark) {
  /* Tokens like --color-text, --color-border, etc. should already be defined
     in the design system's color token reset. No additional changes needed. */
}
/* ═══ MENU CONTAINER ═══ */
.ren-menu {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 0.5rem);
  box-shadow: var(--shadow-lg, 0 10px 25px rgb(0, 0, 0, 0.1));
  padding-block: var(--space-1, 0.25rem);
  min-width: 12rem;
  z-index: var(--z-dropdown, 1000);
  position: absolute;
  animation: ren-menu-open var(--duration-enter) var(--ease-enter);
  visibility: hidden;
  opacity: 0;
  inset: auto auto auto auto;
  margin: 0;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ═══ MENU OPEN STATE ═══ */
.ren-menu[popover]:popover-open,
.ren-menu.ren-open {
  visibility: visible;
  opacity: 1;
}

/* ═══ MENU ITEM BASE ═══ */
.ren-menu-item {
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  cursor: pointer;
  font-size: var(--size-body, 1rem);
  color: var(--color-text);
  border-radius: var(--radius-sm, 0.25rem);
  min-height: 2rem;
  /* Tactile hover/focus — shared preset from semantic motion tokens */
  transition: var(--transition-tactile);
  white-space: nowrap;
  text-decoration: none;
}

.ren-menu-item:hover,
.ren-menu-item[data-highlighted] {
  background-color: var(--color-fill);
  color: var(--color-text);
}

.ren-menu-item:active {
  background-color: var(--color-fill-hover);
}

/* ═══ MENU ITEM DISABLED STATE ═══ */
.ren-menu-item[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══ MENU ITEM DANGER VARIANT ═══ */
.ren-menu-item.ren-menu-item-danger:hover,
.ren-menu-item.ren-menu-item-danger[data-highlighted] {
  background-color: var(--color-danger-subtle);
  color: var(--color-danger);
}

/* ═══ MENU ITEM ICON ═══ */
.ren-menu-item-icon {
  flex-shrink: 0;
  width: var(--size-icon-md, 1.25rem);
  height: var(--size-icon-md, 1.25rem);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══ MENU ITEM SHORTCUT/LABEL ═══ */
.ren-menu-item-shortcut {
  margin-inline-start: auto;
  font-size: var(--size-caption, 0.75rem);
  color: var(--color-text-muted);
  font-family: monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ═══ MENU ITEM DESCRIPTION ═══ */
.ren-menu-item-description {
  font-size: var(--size-caption, 0.75rem);
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* ═══ MENU SEPARATOR ═══ */
.ren-menu-separator {
  height: 1px;
  background: var(--color-border);
  margin-block: var(--space-1, 0.25rem);
}

/* ═══ MENU LABEL/GROUP HEADER ═══ */
.ren-menu-label {
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  font-size: var(--size-caption, 0.75rem);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ═══ MENU GROUP ═══ */
.ren-menu-group {
  display: contents;
}

/* ═══ CHECKBOX MENU ITEM ═══ */
.ren-menu-checkbox-item,
.ren-menu-radio-item {
  position: relative;
  padding-inline-start: calc(var(--space-3, 0.75rem) + 20px + var(--space-2, 0.5rem));
}

.ren-menu-checkbox-item::before,
.ren-menu-radio-item::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--space-3, 0.75rem);
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-radius: 2px;
  background: white;
  /* Tactile — shared semantic preset */
  transition: var(--transition-tactile);
}

.ren-menu-radio-item::before {
  border-radius: 50%;
}

/* ═══ CHECKBOX/RADIO CHECKED STATE ═══ */
.ren-menu-checkbox-item[aria-checked="true"]::before,
.ren-menu-radio-item[aria-checked="true"]::before {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.ren-menu-checkbox-item[aria-checked="true"]::after,
.ren-menu-radio-item[aria-checked="true"]::after {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--space-3, 0.75rem) + 4px);
  top: 50%;
  transform: translateY(-50%);
}

.ren-menu-checkbox-item[aria-checked="true"]::after {
  width: 8px;
  height: 4px;
  border-inline-start: 2px solid white;
  border-bottom: 2px solid white;
  transform: translateY(-55%) rotate(-45deg);
}

.ren-menu-radio-item[aria-checked="true"]::after {
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* ═══ ANIMATIONS ═══ */
@keyframes ren-menu-open {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ═══ CLOSING STATE WITH ANIMATION ═══ */
.ren-menu[data-closing] {
  animation: ren-menu-close var(--duration-exit) var(--ease-exit) forwards;
}

@keyframes ren-menu-close {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

/* ═══ RESPECTS MOTION PREFERENCES ═══
   Semantic --duration-* already collapse to 0ms under reduced-motion
   (see tokens/semantic/motion.css). We keep this block as a
   belt-and-suspenders fallback and to drop the scale/translate
   keyframe so the menu simply appears/disappears in place. */
@media (prefers-reduced-motion: reduce) {
  .ren-menu {
    animation: none;
    transition: opacity var(--duration-enter);
  }

  .ren-menu:not(.ren-open) {
    opacity: 0;
  }

  .ren-menu-item {
    transition: background-color 0s, color 0s;
  }

  .ren-menu[data-closing] {
    animation: none;
  }
}

/* ═══ NATIVE POPOVER API SUPPORT ═══ */
@supports (selector(:popover-open)) {
  .ren-menu[popover] {
    visibility: visible;
    opacity: 0;
    transition: opacity var(--duration-enter) var(--ease-enter),
                overlay var(--duration-enter) var(--ease-enter) allow-discrete,
                display var(--duration-enter) var(--ease-enter) allow-discrete;
    animation: none;
  }

  @starting-style {
    .ren-menu[popover]:popover-open {
      opacity: 0;
    }
  }

  .ren-menu[popover]:popover-open {
    opacity: 1;
  }
}

/* ═══ SCROLLBAR STYLING ═══ */
.ren-menu::-webkit-scrollbar {
  width: 6px;
}

.ren-menu::-webkit-scrollbar-track {
  background: transparent;
}

.ren-menu::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.ren-menu::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}
/* Appearance API bridge */
.ren-menu {
  min-inline-size: var(--ren-menu-width, 200px);
  padding: var(--ren-menu-padding, var(--space-1));
  border-radius: var(--ren-menu-radius, var(--radius-lg));
  background: var(--ren-menu-bg, var(--color-surface-overlay));
  border-color: var(--ren-menu-border, var(--color-border));
  box-shadow: var(--ren-menu-shadow, var(--shadow-lg));
  transition-duration: var(--ren-menu-duration, var(--duration-fast));
  transition-timing-function: var(--ren-menu-easing, var(--ease-out));
}
.ren-menu-item { min-block-size: var(--ren-menu-item-height, var(--size-md)); padding: var(--ren-menu-item-padding, var(--space-2) var(--space-3)); border-radius: var(--ren-menu-item-radius, var(--radius-sm)); }
.ren-menu-item:hover, .ren-menu-item[data-highlighted] { background: var(--ren-menu-item-hover-bg, var(--color-fill)); }
.ren-menu-item-danger { color: var(--ren-menu-danger-color, var(--color-danger)); }
/* ═══════════════════════════════════════════════════════════════════
   RenDS — Select Component
   ═══════════════════════════════════════════════════════════════════
   Custom, accessible select/dropdown component with full keyboard nav,
   ARIA support, and multi-select capability.

   Structure:
   .ren-select (container)
     .ren-select-trigger (button showing selected value)
       .ren-select-value (the displayed text)
       .ren-select-placeholder (when nothing selected)
       .ren-select-icon (chevron)
     .ren-select-content (dropdown listbox)
       .ren-select-item (option)
       .ren-select-group (optional grouping)
       .ren-select-label (group header)
       .ren-select-separator (divider between groups)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ SELECT CONTAINER ═══ */
.ren-select {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  font-family: inherit;
}

/* ═══ SELECT TRIGGER (Button) ═══ */
.ren-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);

  /* Input styling */
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  font-size: var(--body-size);
  font-family: inherit;
  color: var(--color-text);
  background-color: var(--color-input-bg);
  border: var(--stroke-1) solid var(--color-input-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: start;
  white-space: nowrap;

  /* Semantic preset keeps trigger hover/focus in sync with other
     tactile inputs (button, checkbox, text field). */
  transition: var(--transition-tactile);
}

.ren-select-trigger:hover:not(:disabled):not([aria-expanded="true"]) {
  background-color: var(--color-input-bg-hover);
}

.ren-select-trigger:focus-visible {
  outline: none;
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
  background-color: var(--color-input-bg-hover);
}

.ren-select-trigger[aria-expanded="true"] {
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
  background-color: var(--color-input-bg-hover);
}

.ren-select-trigger:disabled {
  background-color: var(--color-input-disabled-bg);
  color: var(--color-input-disabled-text);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ═══ SELECT VALUE / PLACEHOLDER ═══ */
.ren-select-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

.ren-select-placeholder {
  color: var(--color-input-placeholder);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══ SELECT ICON (Chevron) ═══ */
.ren-select-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-micro) var(--ease-enter);
  pointer-events: none;
}

.ren-select-trigger[aria-expanded="true"] .ren-select-icon {
  transform: rotate(180deg);
}

/* SVG chevron icon styling */
.ren-select-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══ SELECT CONTENT (Dropdown Listbox) ═══ */
.ren-select-content {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-1);
  background: var(--color-surface);
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding-block: var(--space-2);
  max-height: 15rem;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  z-index: var(--z-dropdown, 1000);

  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  animation: ren-select-close var(--duration-exit) var(--ease-exit) forwards;
}

/* ═══ SELECT CONTENT OPEN STATE ═══ */
.ren-select-content[popover]:popover-open,
.ren-select-content.ren-open {
  visibility: visible;
  opacity: 1;
  animation: ren-select-open var(--duration-enter) var(--ease-enter);
}

@keyframes ren-select-open {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ren-select-close {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

/* ═══ SELECT ITEM (Option) ═══ */
.ren-select-item {
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  /* Micro-duration keeps option hover snappy; tokens/semantic/motion
     collapses this to 0ms under reduced-motion. */
  transition:
    background-color var(--duration-micro) var(--ease-enter),
    color var(--duration-micro) var(--ease-enter);
  white-space: nowrap;
  user-select: none;
  min-height: 2rem;
}

.ren-select-item:hover:not([aria-disabled="true"]),
.ren-select-item[data-highlighted] {
  background-color: var(--color-fill);
  color: var(--color-text);
}

.ren-select-item[aria-selected="true"] {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: 500;
}

.ren-select-item[aria-selected="true"]::before {
  content: '';
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  position: relative;
}

.ren-select-item[aria-selected="true"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}

.ren-select-item[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══ SELECT GROUP ═══ */
.ren-select-group {
  display: block;
  padding-block: var(--space-1);
}

/* ═══ SELECT GROUP LABEL ═══ */
.ren-select-label {
  padding: var(--space-1) var(--space-3);
  font-size: var(--caption-size);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  user-select: none;
}

/* ═══ SELECT SEPARATOR ═══ */
.ren-select-separator {
  height: var(--stroke-1);
  background: var(--color-border);
  margin-block: var(--space-1);
}

/* ═══ SELECT EMPTY STATE ═══ */
.ren-select-empty {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--body-size);
  white-space: nowrap;
}

/* ═══ SIZE VARIANTS ═══ */
.ren-select-sm .ren-select-trigger {
  min-height: var(--size-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.ren-select-lg .ren-select-trigger {
  min-height: var(--size-xl);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-lg);
}

/* ═══ MULTI-SELECT CHIPS/TAGS ═══ */
.ren-select-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
}

.ren-select-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-fill);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
  white-space: nowrap;
}

.ren-select-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: var(--transition-tactile);
}

.ren-select-chip-remove:hover {
  color: var(--color-text);
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-select-trigger,
  .ren-select-icon,
  .ren-select-item {
    transition: none;
  }

  .ren-select-content {
    animation: none;
    opacity: 0;
  }

  .ren-select-content.ren-open {
    opacity: 1;
  }
}

/* ═══ SCROLLBAR STYLING ═══ */
.ren-select-content::-webkit-scrollbar {
  width: 6px;
}

.ren-select-content::-webkit-scrollbar-track {
  background: transparent;
}

.ren-select-content::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.ren-select-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ═══ NATIVE POPOVER API SUPPORT ═══ */
@supports (selector(:popover-open)) {
  .ren-select-content[popover] {
    visibility: visible;
    opacity: 0;
    transition: opacity var(--duration-enter) var(--ease-enter),
                overlay var(--duration-enter) var(--ease-enter) allow-discrete,
                display var(--duration-enter) var(--ease-enter) allow-discrete;
    animation: none;
  }

  @starting-style {
    .ren-select-content[popover]:popover-open {
      opacity: 0;
    }
  }

  .ren-select-content[popover]:popover-open {
    opacity: 1;
  }
}
/**
 * RenDS — Toast Notification System CSS
 * =====================================
 * Styles for notification toasts with animations,
 * positioning, variants, and responsive behavior.
 */

/* ═══ VIEWPORT CONTAINER ═══ */
.ren-toast-viewport {
  position: fixed;
  z-index: var(--z-toast, 9999);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 2rem));
}

/* Position variants */
.ren-toast-viewport[data-position="top-right"] {
  top: var(--space-4);
  right: var(--space-4);
  flex-direction: column;
}

.ren-toast-viewport[data-position="top-left"] {
  top: var(--space-4);
  left: var(--space-4);
  flex-direction: column;
}

.ren-toast-viewport[data-position="top-center"] {
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
}

.ren-toast-viewport[data-position="bottom-right"] {
  bottom: var(--space-4);
  right: var(--space-4);
  flex-direction: column-reverse;
}

.ren-toast-viewport[data-position="bottom-left"] {
  bottom: var(--space-4);
  left: var(--space-4);
  flex-direction: column-reverse;
}

.ren-toast-viewport[data-position="bottom-center"] {
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column-reverse;
}

/* ═══ TOAST CONTAINER ═══ */
.ren-toast {
  pointer-events: auto;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-width: 20rem;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  /* Enter + exit use semantic tokens so global motion tuning cascades here. */
  animation: ren-toast-fade-in var(--duration-enter) var(--ease-enter);
}

.ren-toast[data-closing] {
  animation: ren-toast-fade-out var(--duration-exit) var(--ease-exit);
  opacity: 0;
}

/* Slide-in animations by position */
.ren-toast-viewport[data-position="top-right"] .ren-toast,
.ren-toast-viewport[data-position="bottom-right"] .ren-toast {
  animation: ren-toast-slide-in-right var(--duration-enter) var(--ease-enter);
}

.ren-toast-viewport[data-position="top-right"] .ren-toast[data-closing],
.ren-toast-viewport[data-position="bottom-right"] .ren-toast[data-closing] {
  animation: ren-toast-slide-out-right var(--duration-exit) var(--ease-exit);
}

.ren-toast-viewport[data-position="top-left"] .ren-toast,
.ren-toast-viewport[data-position="bottom-left"] .ren-toast {
  animation: ren-toast-slide-in-left var(--duration-enter) var(--ease-enter);
}

.ren-toast-viewport[data-position="top-left"] .ren-toast[data-closing],
.ren-toast-viewport[data-position="bottom-left"] .ren-toast[data-closing] {
  animation: ren-toast-slide-out-left var(--duration-exit) var(--ease-exit);
}

.ren-toast-viewport[data-position="top-center"] .ren-toast,
.ren-toast-viewport[data-position="bottom-center"] .ren-toast {
  animation: ren-toast-fade-in var(--duration-enter) var(--ease-enter);
}

/* ═══ TOAST CONTENT STRUCTURE ═══ */
.ren-toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

/* Body wraps title + description + actions */
.ren-toast-body {
  flex: 1;
  min-width: 0;
}

.ren-toast-title {
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--text-sm);
  line-height: var(--leading-5);
  color: var(--color-text);
  margin: 0;
}

.ren-toast-description {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

.ren-toast-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

/* The action button itself (the docs name it .ren-toast-action; we layer it
   on top of the standard .ren-btn variants for consistent styling). */
.ren-toast-action {
  /* Inherits its visual from .ren-btn ren-btn-ghost ren-btn-sm — this rule
     is just a hook for consumers who want to override per-toast. */
}

.ren-toast-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
  font-size: 18px;
  line-height: 1;
  /* Tactile (hover/focus/press) — uses shared semantic preset */
  transition: var(--transition-tactile);
}

.ren-toast-close:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}

.ren-toast-close:active {
  background-color: var(--color-surface-active);
}

/* ═══ TOAST VARIANTS ═══ */
/* Success */
.ren-toast-success {
  background: color-mix(in srgb, var(--color-success-subtle) 65%, var(--color-surface-raised));
}

.ren-toast-success .ren-toast-icon {
  color: var(--color-success);
}

/* Error / Danger */
.ren-toast-error,
.ren-toast-danger {
  background: color-mix(in srgb, var(--color-danger-subtle) 65%, var(--color-surface-raised));
}

.ren-toast-error .ren-toast-icon,
.ren-toast-danger .ren-toast-icon {
  color: var(--color-danger);
}

/* Warning */
.ren-toast-warning {
  background: color-mix(in srgb, var(--color-warning-subtle) 65%, var(--color-surface-raised));
}

.ren-toast-warning .ren-toast-icon {
  color: var(--color-warning);
}

/* Info */
.ren-toast-info {
  background: color-mix(in srgb, var(--color-info-subtle) 65%, var(--color-surface-raised));
}

.ren-toast-info .ren-toast-icon {
  color: var(--color-info);
}

/* Loading */
.ren-toast-loading .ren-toast-icon {
  animation: ren-spinner-rotate 0.8s linear infinite;
}

/* ═══ PROGRESS BAR ═══ */
.ren-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width linear;
}

/* ═══ SWIPE STATE ═══ */
.ren-toast[data-swiping] {
  transition: none;
}

/* ═══ ANIMATIONS ═══ */
@keyframes ren-toast-slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes ren-toast-slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes ren-toast-slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes ren-toast-slide-out-left {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes ren-toast-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ren-toast-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes ren-spinner-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ═══ REDUCED MOTION ═══
   Belt-and-suspenders: semantic --duration-* already collapse
   to 0ms under reduced-motion (see tokens/semantic/motion.css),
   so the animations above become instant. We keep this block
   to force a plain fade (no slide) as an Apple-HIG alternative,
   and to stop the loading spinner. */
@media (prefers-reduced-motion: reduce) {
  .ren-toast,
  .ren-toast[data-closing],
  .ren-toast-viewport[data-position="top-right"] .ren-toast,
  .ren-toast-viewport[data-position="bottom-right"] .ren-toast,
  .ren-toast-viewport[data-position="top-left"] .ren-toast,
  .ren-toast-viewport[data-position="bottom-left"] .ren-toast,
  .ren-toast-viewport[data-position="top-center"] .ren-toast,
  .ren-toast-viewport[data-position="bottom-center"] .ren-toast {
    animation: ren-toast-fade-in var(--duration-micro) linear !important;
  }

  .ren-toast[data-closing] {
    animation: ren-toast-fade-out var(--duration-micro) linear !important;
  }

  .ren-toast-loading .ren-toast-icon {
    animation: none;
    opacity: 0.6;
  }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 640px) {
  .ren-toast-viewport {
    max-width: calc(100vw - 1rem);
    bottom: var(--space-3);
    left: var(--space-2);
    right: var(--space-2);
    width: auto;
  }

  .ren-toast-viewport[data-position="top-right"],
  .ren-toast-viewport[data-position="top-left"],
  .ren-toast-viewport[data-position="top-center"] {
    bottom: auto;
    left: var(--space-2);
    right: var(--space-2);
    width: auto;
    transform: none;
  }

  .ren-toast-viewport[data-position="bottom-right"],
  .ren-toast-viewport[data-position="bottom-left"],
  .ren-toast-viewport[data-position="bottom-center"] {
    bottom: var(--space-3);
    left: var(--space-2);
    right: var(--space-2);
    width: auto;
    transform: none;
  }

  .ren-toast {
    min-width: unset;
    width: 100%;
  }
}
/* Appearance API bridge */
.ren-toast { inline-size: var(--ren-toast-width, 360px); padding: var(--ren-toast-padding, var(--space-4)); border-radius: var(--ren-toast-radius, var(--radius-lg)); background: var(--ren-toast-bg, var(--color-surface-raised)); border-color: var(--ren-toast-border, var(--color-border)); box-shadow: var(--ren-toast-shadow, var(--shadow-lg)); gap: var(--ren-toast-gap, var(--space-3)); animation-duration: var(--ren-toast-anim-duration, var(--duration-normal)); animation-timing-function: var(--ren-toast-easing, var(--ease-out)); }

@media (any-pointer: coarse), (pointer: coarse) {
  .ren-toast-close {
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
  }
}
/* ═══ REN SLIDER COMPONENT ═══ */

/* ═══ BASE WRAPPER ═══ */
.ren-slider {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ═══ TRACK CONTAINER ═══ */
.ren-slider-track {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 20px;
  cursor: pointer;
}

/* ═══ RANGE INPUT STYLING ═══ */
.ren-slider-track input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-fill-active);
  outline: none;
  margin: 0;
  padding: 0;

  /* ═══ TRACK FILL WITH CSS VARIABLE ═══ */
  background: linear-gradient(
    to right,
    var(--color-accent) 0%,
    var(--color-accent) var(--value, 0%),
    var(--color-fill-active) var(--value, 0%),
    var(--color-fill-active) 100%
  );

  & ::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid white;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: var(--transition-tactile);

    &:hover {
      transform: scale(1.1);
    }

    &:active {
      transform: scale(0.95);
    }
  }

  & ::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid white;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: var(--transition-tactile);

    &:hover {
      transform: scale(1.1);
    }

    &:active {
      transform: scale(0.95);
    }
  }

  & ::-webkit-slider-thumb:focus-visible,
  & ::-moz-range-thumb:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;

    & ::-webkit-slider-thumb,
    & ::-moz-range-thumb {
      cursor: not-allowed;
    }
  }
}

/* ═══ LABEL ═══ */
.ren-slider-label {
  font-size: var(--font-size-label);
  font-weight: 500;
  color: var(--color-text);
}

/* ═══ VALUE DISPLAY ═══ */
.ren-slider-value {
  font-size: var(--font-size-body-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ═══ TICK MARKS ═══ */
.ren-slider-marks {
  display: flex;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  margin-top: var(--space-1);

  & .ren-slider-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;

    & .ren-slider-mark-tick {
      width: 2px;
      height: 6px;
      background: var(--color-fill-subtle);
      border-radius: 1px;
      margin-bottom: var(--space-0-5);
    }

    & .ren-slider-mark-label {
      font-size: var(--font-size-xs);
      color: var(--color-text-muted);
    }
  }
}

/* ═══ SIZE VARIANTS ═══ */
.ren-slider-track {
  &.ren-slider-sm input[type="range"] {
    height: 4px;
    background: linear-gradient(
      to right,
      var(--color-accent) 0%,
      var(--color-accent) var(--value, 0%),
      var(--color-fill-active) var(--value, 0%),
      var(--color-fill-active) 100%
    );

    & ::-webkit-slider-thumb {
      width: 16px;
      height: 16px;
    }

    & ::-moz-range-thumb {
      width: 16px;
      height: 16px;
    }
  }

  &.ren-slider-lg input[type="range"] {
    height: 8px;
    background: linear-gradient(
      to right,
      var(--color-accent) 0%,
      var(--color-accent) var(--value, 0%),
      var(--color-fill-active) var(--value, 0%),
      var(--color-fill-active) 100%
    );

    & ::-webkit-slider-thumb {
      width: 24px;
      height: 24px;
    }

    & ::-moz-range-thumb {
      width: 24px;
      height: 24px;
    }
  }
}

/* ═══ COLOR VARIANTS ═══ */
.ren-slider-track {
  &.ren-slider-success input[type="range"] {
    background: linear-gradient(
      to right,
      var(--color-success) 0%,
      var(--color-success) var(--value, 0%),
      var(--color-fill-active) var(--value, 0%),
      var(--color-fill-active) 100%
    );

    & ::-webkit-slider-thumb {
      background: var(--color-success);
    }

    & ::-moz-range-thumb {
      background: var(--color-success);
    }
  }

  &.ren-slider-warning input[type="range"] {
    background: linear-gradient(
      to right,
      var(--color-warning) 0%,
      var(--color-warning) var(--value, 0%),
      var(--color-fill-active) var(--value, 0%),
      var(--color-fill-active) 100%
    );

    & ::-webkit-slider-thumb {
      background: var(--color-warning);
    }

    & ::-moz-range-thumb {
      background: var(--color-warning);
    }
  }

  &.ren-slider-danger input[type="range"] {
    background: linear-gradient(
      to right,
      var(--color-danger) 0%,
      var(--color-danger) var(--value, 0%),
      var(--color-fill-active) var(--value, 0%),
      var(--color-fill-active) 100%
    );

    & ::-webkit-slider-thumb {
      background: var(--color-danger);
    }

    & ::-moz-range-thumb {
      background: var(--color-danger);
    }
  }
}

/* ═══ VERTICAL ORIENTATION ═══ */
.ren-slider-track {
  &.ren-slider-vertical {
    width: auto;
    height: 200px;
    writing-mode: vertical-lr;

    & input[type="range"] {
      width: auto;
      height: 200px;
      writing-mode: vertical-lr;
      direction: rtl;
    }
  }
}

/* ═══ RANGE MODE (DUAL THUMBS) ═══ */
.ren-slider-range {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 20px;
  cursor: pointer;

  & .ren-slider-track-input {
    position: absolute;
    width: 100%;
    height: 6px;
    border-radius: var(--radius-full);
    background: linear-gradient(
      to right,
      var(--color-fill-active) 0 var(--value-start, 0%),
      var(--ren-slider-fill-color, var(--color-accent)) var(--value-start, 0%) var(--value-end, 100%),
      var(--color-fill-active) var(--value-end, 100%) 100%
    );
    pointer-events: none;
    margin: 0;
    padding: 0;
  }

  & input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 5;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    height: 20px;
    border-radius: var(--radius-full);
    outline: none;
    pointer-events: none;

    &::-webkit-slider-thumb {
      appearance: none;
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--color-accent);
      border: 2px solid white;
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      transition: var(--transition-tactile);
      z-index: 6;
      pointer-events: auto;

      &:hover {
        transform: scale(1.1);
      }

      &:active {
        transform: scale(0.95);
      }
    }

    &::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--color-accent);
      border: 2px solid white;
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      transition: var(--transition-tactile);
      z-index: 6;
      pointer-events: auto;

      &:hover {
        transform: scale(1.1);
      }

      &:active {
        transform: scale(0.95);
      }
    }
  }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-slider,
  .ren-slider * {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}
/* Appearance API bridge; pseudo-elements intentionally have no selector whitespace. */
.ren-slider-track input[type="range"] {
  block-size: var(--ren-slider-track-height, 6px);
  border-radius: var(--ren-slider-track-radius, var(--radius-full));
  background: var(--ren-slider-track-bg, var(--color-fill-active));
  transition-duration: var(--ren-slider-duration, var(--duration-fast));
  transition-timing-function: var(--ren-slider-easing, var(--ease-out));
}
.ren-slider-track input[type="range"]::-webkit-slider-thumb { inline-size: var(--ren-slider-thumb-size, 20px); block-size: var(--ren-slider-thumb-size, 20px); background: var(--ren-slider-thumb-bg, var(--color-surface)); border-color: var(--ren-slider-thumb-border, var(--color-accent)); box-shadow: var(--ren-slider-thumb-shadow, var(--shadow-sm)); }
.ren-slider-track input[type="range"]::-moz-range-thumb { inline-size: var(--ren-slider-thumb-size, 20px); block-size: var(--ren-slider-thumb-size, 20px); background: var(--ren-slider-thumb-bg, var(--color-surface)); border-color: var(--ren-slider-thumb-border, var(--color-accent)); box-shadow: var(--ren-slider-thumb-shadow, var(--shadow-sm)); }
.ren-slider-track input[type="range"] { background-image: linear-gradient(to right, var(--ren-slider-fill-color, var(--color-accent)) 0%, var(--ren-slider-fill-color, var(--color-accent)) var(--value, 0%), var(--ren-slider-track-bg, var(--color-fill-active)) var(--value, 0%), var(--ren-slider-track-bg, var(--color-fill-active)) 100%); }
/* ═══ REN TOGGLE GROUP COMPONENT ═══ */

/* ═══ BASE CONTAINER ═══ */
.ren-toggle-group {
  display: inline-flex;
  gap: var(--space-0-5);
  background: var(--color-fill);
  border-radius: var(--radius-lg);
  padding: 2px;
  align-items: center;

  & .ren-toggle-group-item {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-label);
    color: var(--color-text-muted);
    cursor: pointer;
    min-height: calc(var(--touch-min, 44px) - 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    transition: var(--transition-tactile);
    user-select: none;
    border: none;
    background: transparent;
    font-family: inherit;
    font-weight: 400;
    white-space: nowrap;

    /* ═══ HOVER STATE ═══ */
    &:hover:not([aria-pressed="true"]) {
      color: var(--color-text);
    }

    /* ═══ ACTIVE/PRESSED STATE ═══ */
    &[aria-pressed="true"],
    &[data-state="on"] {
      background: var(--color-surface);
      color: var(--color-text);
      font-weight: 500;
      box-shadow: var(--shadow-sm);
    }

    /* ═══ FOCUS VISIBLE ═══ */
    &:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
    }

    /* ═══ DISABLED STATE ═══ */
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
  }
}

/* ═══ OUTLINE VARIANT ═══ */
.ren-toggle-group.ren-toggle-group-outline {
  background: transparent;
  padding: 0;
  gap: var(--space-1);

  & .ren-toggle-group-item {
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);

    &:hover:not([aria-pressed="true"]) {
      border-color: var(--color-border-strong);
      color: var(--color-text);
    }

    &[aria-pressed="true"],
    &[data-state="on"] {
      border-color: var(--color-accent);
      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
      color: var(--color-accent);
      font-weight: 500;
      box-shadow: none;
    }
  }
}

/* ═══ SIZE VARIANTS ═══ */
.ren-toggle-group {
  &.ren-toggle-group-sm {
    gap: 1px;
    padding: 1px;

    & .ren-toggle-group-item {
      padding: var(--space-0-5) var(--space-2);
      font-size: var(--font-size-xs);
      min-height: calc(var(--touch-min, 44px) - 12px);
    }
  }

  &.ren-toggle-group-lg {
    gap: var(--space-1);
    padding: var(--space-0-5);

    & .ren-toggle-group-item {
      padding: var(--space-2) var(--space-4);
      font-size: var(--font-size-body);
      min-height: calc(var(--touch-min, 44px) + 4px);
    }
  }
}

/* ═══ FULL WIDTH ═══ */
.ren-toggle-group.ren-toggle-group-full {
  display: flex;
  width: 100%;

  & .ren-toggle-group-item {
    flex: 1;
  }
}

/* ═══ VERTICAL ORIENTATION ═══ */
.ren-toggle-group.ren-toggle-group-vertical {
  flex-direction: column;
  display: inline-flex;

  &.ren-toggle-group-full {
    display: flex;
    width: 100%;
  }
}

/* ═══ ICON SUPPORT ═══ */
.ren-toggle-group-item {
  & [role="img"],
  & svg {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
  }
}

/* ═══ TRANSITIONS ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-toggle-group-item {
    transition: none;
  }
}
/* Appearance API bridge */
.ren-toggle-group { min-block-size: var(--ren-toggle-height, var(--size-lg)); padding-inline: var(--ren-toggle-padding-x, var(--space-4)); font-size: var(--ren-toggle-font-size, var(--label-size)); font-weight: var(--ren-toggle-font-weight, var(--label-weight)); border-radius: var(--ren-toggle-radius, var(--radius-md)); background: var(--ren-toggle-bg, var(--color-fill)); color: var(--ren-toggle-color, var(--color-text-muted)); }
.ren-toggle-group [aria-pressed="true"], .ren-toggle-group [data-state="on"] { background: var(--ren-toggle-active-bg, var(--color-surface)); color: var(--ren-toggle-active-color, var(--color-text)); }

@media (any-pointer: coarse), (pointer: coarse) {
  .ren-toggle-group.ren-toggle-group-sm .ren-toggle-group-item,
  .ren-toggle-group .ren-toggle-group-item {
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
  }
}
/**
 * RenDS — Combobox
 * =================
 * Light-DOM combobox. CSS works standalone; <ren-combobox> layers ARIA
 * and behavior on top.
 *
 * Markup:
 *   <div class="ren-combobox">
 *     <input class="ren-combobox-input">
 *     <div class="ren-combobox-list" role="listbox" hidden>
 *       <div class="ren-combobox-item" role="option">…</div>
 *     </div>
 *   </div>
 */

.ren-combobox {
  position: relative;
  display: block;
  width: 100%;

  &-input {
    width: 100%;
    padding-block: var(--space-2);
    padding-inline: var(--space-3);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);

    font-family: inherit;
    font-size: var(--text-sm);
    line-height: var(--leading-5);
    color: var(--color-text);

    transition: var(--transition-tactile);

    &::placeholder {
      color: var(--color-text-muted);
    }

    &:focus {
      outline: none;
      border-color: var(--color-accent);
      box-shadow: 0 0 0 3px var(--color-accent-subtle);
    }

    &:disabled {
      background: var(--color-fill);
      color: var(--color-text-muted);
      cursor: not-allowed;
    }

    /* Hide native type="search" decorations */
    &::-webkit-search-cancel-button,
    &::-webkit-search-decoration {
      -webkit-appearance: none;
      appearance: none;
      display: none;
    }
  }

  &-list {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + var(--space-1));
    z-index: 50;

    max-height: 15rem;
    padding-block: var(--space-1);

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);

    overflow-y: auto;
    overflow-x: hidden;

    /* Scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--color-fill-active) transparent;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: var(--color-fill-active);
      border-radius: var(--radius-full);
    }

    &::-webkit-scrollbar-thumb:hover {
      background: var(--color-fill-hover);
    }

    &[hidden] {
      display: none;
    }

    /* Open animation */
    @starting-style {
      opacity: 0;
      translate: 0 -4px;
    }
    animation: ren-combobox-open var(--duration-enter) var(--ease-enter);

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }

  &[data-side="top"] &-list,
  &-list[data-side="top"] {
    top: auto;
    bottom: calc(100% + var(--space-1));
  }

  &[data-side="bottom"] &-list,
  &-list[data-side="bottom"] {
    top: calc(100% + var(--space-1));
    bottom: auto;
  }

  &-item {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    border-radius: var(--radius-sm);

    display: flex;
    flex-direction: column;
    gap: var(--space-0-5, 2px);

    font-size: var(--text-sm);
    color: var(--color-text);

    transition: background-color var(--duration-micro) var(--ease-enter);

    &[hidden] {
      display: none;
    }

    &[data-highlighted] {
      background: var(--color-fill);
    }

    &[aria-selected="true"] {
      background: var(--color-accent-subtle);
      color: var(--color-accent);
      font-weight: 500;
    }

    &[aria-disabled="true"] {
      opacity: 0.5;
      cursor: not-allowed;

      &:hover,
      &[data-highlighted] {
        background: transparent;
      }
    }
  }

  &-item-label {
    font-weight: 500;
    color: var(--color-text);
  }

  &-item-description {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  &-empty {
    padding: var(--space-8) var(--space-3);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);

    &[hidden] {
      display: none;
    }
  }

  &-loading {
    padding: var(--space-3);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);

    &[hidden] {
      display: none;
    }

    &::before {
      content: '';
      display: inline-block;
      width: 0.875rem;
      height: 0.875rem;
      margin-inline-end: var(--space-2);
      vertical-align: -2px;

      border: 2px solid var(--color-border);
      border-top-color: var(--color-accent);
      border-radius: var(--radius-full);

      animation: ren-combobox-spin var(--duration-slow, 800ms) linear infinite;

      @media (prefers-reduced-motion: reduce) {
        animation: none;
      }
    }
  }

  &-group {
    & + & {
      margin-top: var(--space-1);
      border-top: 1px solid var(--color-border);
      padding-top: var(--space-1);
    }

    &[hidden] {
      display: none;
    }
  }

  &-group-label {
    padding: var(--space-2) var(--space-3);
    padding-bottom: var(--space-1);

    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
  }
}

@keyframes ren-combobox-open {
  from {
    opacity: 0;
    translate: 0 -4px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes ren-combobox-spin {
  to {
    transform: rotate(360deg);
  }
}
/* The custom-element host is structural only. Keeping it out of layout prevents
   an empty grid/flex item around the real dialog generated in light DOM. */
ren-sheet {
  display: contents;
}

/* Hide the dialog when it isn't open. The browser default for
   `<dialog>` without `open` is `display: none`, but the rule below
   sets `display: flex` for layout, so without this explicit reset
   the sheet would render in-flow on every page load. */
.ren-sheet:not([open]) {
  display: none;
}

.ren-sheet {
  position: fixed;
  margin: 0;
  padding: 0;
  border: none;

  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 0;

  /* Header/body/footer stack: body grows, footer pins to the bottom */
  display: flex;
  flex-direction: column;

  z-index: 50;
  max-width: 100%;
  max-height: 100%;
  touch-action: none; /* Prevent scroll chaining; swipe-to-dismiss handled by JS */

  &[data-side='right'] {
    inset-inline-end: 0;
    top: 0;
    bottom: 0;

    width: min(24rem, 90vw);
    height: 100dvh;

    @starting-style {
      translate: 100% 0;
    }

    translate: 0 0;
  }

  &[data-side='left'] {
    inset-inline-start: 0;
    top: 0;
    bottom: 0;

    width: min(24rem, 90vw);
    height: 100dvh;

    @starting-style {
      translate: -100% 0;
    }

    translate: 0 0;
  }

  &[data-side='bottom'] {
    bottom: 0;
    inset-inline: 0;

    width: 100vw;
    max-height: 85dvh;

    @starting-style {
      translate: 0 100%;
    }

    translate: 0 0;
  }

  &[data-side='top'] {
    top: 0;
    inset-inline: 0;

    width: 100vw;
    max-height: 85dvh;

    @starting-style {
      translate: 0 -100%;
    }

    translate: 0 0;
  }

  /* Size variants */
  &.-sm {
    width: min(18rem, 90vw);
  }

  &.-md {
    width: min(24rem, 90vw);
  }

  &.-lg {
    width: min(32rem, 90vw);
  }

  &.-xl {
    width: min(42rem, 90vw);
  }

  &.-full {
    width: 100vw;
    height: 100dvh;
  }

  /* Transitions — semantic tokens keep sheet in sync with ren-dialog and
     friends; --duration-enter / --ease-enter collapse to 0ms under
     prefers-reduced-motion via tokens/semantic/motion.css. */
  transition: translate var(--duration-enter) var(--ease-enter),
    opacity var(--duration-enter) var(--ease-enter);
  transition-behavior: allow-discrete;

  /* Reduce motion */
  @media (prefers-reduced-motion: reduce) {
    transition: none;

    @starting-style {
      opacity: 0;
    }

    opacity: 1;
  }

  /* Shadow on appropriate edge */
  &[data-side='right'] {
    box-shadow: -12px 0 32px rgb(0, 0, 0, 0.12);
  }

  &[data-side='left'] {
    box-shadow: 12px 0 32px rgb(0, 0, 0, 0.12);
  }

  &[data-side='bottom'] {
    box-shadow: 0 -12px 32px rgb(0, 0, 0, 0.12);
  }

  &[data-side='top'] {
    box-shadow: 0 12px 32px rgb(0, 0, 0, 0.12);
  }

  /* Backdrop animations — enter uses --duration-enter / --ease-enter,
     close uses the exit pair so the scrim fades at a slightly brisker
     clip than the entry, matching the rest of the overlay family. */
  &[open]::backdrop {
    animation: ren-sheet-backdrop-open var(--duration-enter) var(--ease-enter) forwards;
  }

  &::backdrop {
    @starting-style {
      opacity: 0;
    }

    opacity: 1;
    background: var(--color-overlay);
    backdrop-filter: blur(4px);

    animation: ren-sheet-backdrop-close var(--duration-exit) var(--ease-exit) forwards;
  }

  &:modal::backdrop {
    background: var(--color-overlay);
    backdrop-filter: blur(4px);
  }
}

.ren-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: var(--space-6);
  padding-block: var(--space-4);

  border-bottom: 1px solid var(--color-border);
}

.ren-sheet-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.ren-sheet-description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0 0;
}

.ren-sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--space-8);
  height: var(--space-8);

  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;

  font-size: 1.5rem;
  color: var(--color-text-muted);

  transition: var(--transition-tactile);

  &:hover {
    color: var(--color-text);
  }

  &:active {
    color: var(--color-text-muted);
  }
}

.ren-sheet-body {
  flex: 1;
  padding: var(--space-6);

  overflow-y: auto;
  overflow-x: hidden;

  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--color-fill-active) transparent;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--color-fill-active);
    border-radius: var(--radius-full);
  }

  &::-webkit-scrollbar-thumb:hover {
    background: var(--color-fill-hover);
  }
}

.ren-sheet-footer {
  display: flex;
  gap: var(--space-3);

  padding: var(--space-6);
  padding-block: var(--space-4);

  border-top: 1px solid var(--color-border);
}

.ren-sheet-handle {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: var(--space-3);

  margin-bottom: var(--space-4);

  &::before {
    content: '';
    display: block;

    width: 40px;
    height: 4px;

    background: var(--color-fill);
    border-radius: var(--radius-full);
  }
}

@keyframes ren-sheet-backdrop-open {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ren-sheet-backdrop-close {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
/* Appearance API bridge */
.ren-sheet {
  width: var(--ren-sheet-width, 320px);
  padding: var(--ren-sheet-padding, var(--space-6));
  border-radius: var(--ren-sheet-radius, 0);
  background: var(--ren-sheet-bg, var(--color-surface-overlay));
  border-color: var(--ren-sheet-border, var(--color-border));
  box-shadow: var(--ren-sheet-shadow, var(--shadow-xl));
  transition-duration: var(--ren-sheet-duration, var(--duration-normal));
  transition-timing-function: var(--ren-sheet-easing, var(--ease-out));
}
.ren-sheet::backdrop { background: var(--ren-sheet-backdrop, var(--color-overlay)); }
/* ═══ REN HOVER CARD COMPONENT ═══ */

/* ═══ TRIGGER ELEMENT ═══ */
.ren-hover-card-trigger {
  anchor-name: --ren-hover-card-anchor;
}

/* ═══ BASE CARD ═══ */
.ren-hover-card {
  position-anchor: --ren-hover-card-anchor;
  position: absolute;
  position-area: bottom span-all;
  inset: auto;
  margin-block-start: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-4);
  max-width: 20rem;
  min-width: 15rem;
  z-index: 1000;

  /* ═══ POPOVER API ═══
     Semantic tokens keep hover-card in sync with tooltip + popover. */
  &:popover-open {
    animation: ren-hover-card-in var(--duration-enter) var(--ease-enter) both;
  }

  /* ═══ ARROW STYLING ═══ */
  &::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
    border: inherit;
    border-inline-end: none;
    border-bottom: none;
    transform: rotate(45deg);
    z-index: -1;
    top: -4px;
    left: 50%;
    margin-inline-start: -4px;
  }

  /* ═══ FALLBACK POSITIONING ═══ */
  @supports not ((anchor-name: --ren-anchor) and
    (position-anchor: --ren-anchor) and
    (position-area: bottom span-all)) {
    position: fixed;
    top: auto;
    left: auto;
  }

  /* ═══ VIEWPORT EDGE HANDLING ═══ */
  @supports (position-try-fallbacks: flip-block) {
    position-try-fallbacks: flip-block;
  }
}

/* ═══ ANIMATION ═══ */
@starting-style {
  .ren-hover-card:popover-open {
    opacity: 0;
    translate: 0 -4px;
  }
}

@keyframes ren-hover-card-in {
  from {
    opacity: 0;
    translate: 0 -4px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ═══ SECTIONS ═══ */
.ren-hover-card-header {
  margin-bottom: var(--space-3);

  & h3,
  & h4 {
    margin: 0 0 var(--space-0-5) 0;
    font-size: var(--font-size-body);
    font-weight: 600;
    color: var(--color-text);
  }

  & p {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
  }
}

.ren-hover-card-body {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-body-sm);
  color: var(--color-text);
  line-height: 1.5;

  & :last-child {
    margin-bottom: 0;
  }
}

.ren-hover-card-footer {
  display: flex;
  gap: var(--space-2);
  align-items: center;

  & button,
  & a {
    font-size: var(--font-size-body-sm);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: var(--transition-tactile);

    &:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
    }
  }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-hover-card {
    &:popover-open {
      animation: none;
      opacity: 1;
      translate: 0 0;
    }

    &::before {
      display: none;
    }
  }
}

/* ═══ DARK MODE SUPPORT (OPTIONAL) ═══ */
@media (prefers-color-scheme: dark) {
  .ren-hover-card {
    /* ═══ USES CSS VARIABLES - AUTO ADAPTS ═══ */
  }
}

/* ═══ MOBILE RESPONSIVENESS ═══
   Hover cards keep a media query here because they're
   positioned absolutely relative to the viewport, and
   the constraint is viewport space, not container width. */
@media (max-width: 640px) {
  .ren-hover-card {
    max-width: calc(100vw - var(--space-4));
    min-width: auto;
    width: calc(100vw - var(--space-4));
  }
}

/* ═══ LOADING STATE ═══ */
.ren-hover-card.ren-hover-card-loading {
  pointer-events: none;

  & .ren-hover-card-body {
    opacity: 0.6;
  }
}

/* ═══ DISABLED STATE ═══ */
.ren-hover-card.ren-hover-card-disabled {
  display: none;
}

/* ═══ CUSTOM VARIANTS ═══ */
.ren-hover-card {
  &.ren-hover-card-sm {
    padding: var(--space-2);
    max-width: 15rem;
    min-width: 12rem;

    & .ren-hover-card-header {
      margin-bottom: var(--space-2);

      & h3,
      & h4 {
        font-size: var(--font-size-body-sm);
        margin-bottom: var(--space-0-25);
      }
    }

    & .ren-hover-card-body {
      margin-bottom: var(--space-2);
      font-size: var(--font-size-xs);
    }
  }

  &.ren-hover-card-lg {
    padding: var(--space-5);
    max-width: 25rem;
    min-width: 18rem;

    & .ren-hover-card-header {
      margin-bottom: var(--space-4);

      & h3,
      & h4 {
        font-size: var(--font-size-body);
      }
    }

    & .ren-hover-card-body {
      margin-bottom: var(--space-4);
      font-size: var(--font-size-body);
    }
  }
}

/* ═══ INNER LINKS STYLING ═══ */
.ren-hover-card a {
  color: var(--color-accent);
  text-decoration: underline;
  transition: var(--transition-tactile);

  &:hover {
    color: var(--color-accent-strong);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
}
.ren-scroll-area {
  position: relative;
  overflow: auto;

  scrollbar-width: thin;
  scrollbar-color: var(--color-fill-active) transparent;

  transition: scrollbar-color var(--duration-enter) var(--ease-enter);

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--color-fill-active);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: content-box;

    transition: var(--transition-tactile);
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-fill-hover);
    background-clip: content-box;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }

  /* Hover state for standard scrollbar */
  &:hover {
    scrollbar-color: var(--color-fill-hover) transparent;
  }

  /* Variants */
  &.-auto {
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    /* Show on scroll */
    &:is(:hover, :focus-within) {
      scrollbar-width: thin;
      scrollbar-color: var(--color-fill-active) transparent;

      &::-webkit-scrollbar {
        display: block;
      }
    }
  }

  &.-always {
    scrollbar-width: thin;
    scrollbar-color: var(--color-fill-active) transparent;

    &::-webkit-scrollbar {
      display: block;
    }
  }

  &.-hidden {
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  /* Direction variants */
  &.-x {
    overflow-x: auto;
    overflow-y: hidden;
  }

  &.-y {
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Fade edges for smooth content transitions */
  &.-fade {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 20px;

      pointer-events: none;
      background: linear-gradient(
        to bottom,
        var(--color-surface) 0%,
        transparent 100%
      );

      z-index: 10;
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 20px;

      pointer-events: none;
      background: linear-gradient(
        to top,
        var(--color-surface) 0%,
        transparent 100%
      );

      z-index: 10;
    }
  }

  /* Horizontal fade */
  &.-fade-x {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 20px;

      pointer-events: none;
      background: linear-gradient(
        to right,
        var(--color-surface) 0%,
        transparent 100%
      );

      z-index: 10;
    }

    &::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 20px;

      pointer-events: none;
      background: linear-gradient(
        to left,
        var(--color-surface) 0%,
        transparent 100%
      );

      z-index: 10;
    }
  }

  /* Max-height with custom property */
  &[--scroll-max] {
    max-height: var(--scroll-max, 20rem);
  }

  /* Smooth scrolling behavior */
  scroll-behavior: smooth;

  @media (prefers-reduced-motion: reduce) {
    scroll-behavior: auto;
  }
}

/* Utility class for common heights */
.ren-scroll-area-sm {
  max-height: 12rem;
}

.ren-scroll-area-md {
  max-height: 20rem;
}

.ren-scroll-area-lg {
  max-height: 30rem;
}

.ren-scroll-area-xl {
  max-height: 40rem;
}

.ren-scroll-area-full {
  height: 100%;
  max-height: none;
}
/* ═══════════════════════════════════════════════════════════════
   REN NUMBER FIELD (STEPPER) COMPONENT
   ═══════════════════════════════════════════════════════════════
   A controlled number input with increment/decrement buttons.
   Supports keyboard navigation, long-press acceleration, and
   min/max bounds. Follows RenDS design token system.

   Usage:
   <ren-number-field min="0" max="100" step="1" value="5">
     <button class="ren-number-field-decrement" aria-label="Decrease">−</button>
     <input class="ren-number-field-input" type="number" value="5">
     <button class="ren-number-field-increment" aria-label="Increase">+</button>
   </ren-number-field>
   ═══════════════════════════════════════════════════════════════ */

/* ═══ BASE WRAPPER ═══ */
.ren-number-field {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: var(--stroke-1) solid var(--color-input-border);
  border-radius: var(--radius-md);
  background-color: var(--color-input-bg);
  transition: var(--transition-tactile);

  /* ═══ FOCUS STATE ON GROUP ═══ */
  &:has(.ren-number-field-input:focus) {
    border-color: var(--color-input-border-focus);
    box-shadow: 0 0 0 3px var(--color-input-focus-ring);
    background-color: var(--color-input-bg-hover);
  }

  /* ═══ HOVER STATE ═══ */
  &:hover:not(:has(:disabled)) {
    background-color: var(--color-input-bg-hover);
  }

  /* ═══ DISABLED STATE ═══ */
  &:has(:disabled) {
    background-color: var(--color-disabled-bg);
    border-color: var(--color-border);
    cursor: not-allowed;
    opacity: 0.7;
  }
}

/* ═══ STEPPER BUTTONS ═══ */
.ren-number-field-decrement,
.ren-number-field-increment {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  height: var(--touch-min);
  padding: 0 var(--space-2);
  background: transparent;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: 600;
  font-family: var(--font-mono);
  transition: var(--transition-tactile);

  /* ═══ REMOVE FOCUS OUTLINE - GROUP HANDLES IT ═══ */
  &:focus {
    outline: none;
  }

  /* ═══ HOVER STATE ═══ */
  &:hover:not(:disabled) {
    background-color: var(--color-fill-hover);
  }

  /* ═══ ACTIVE STATE ═══ */
  &:active:not(:disabled) {
    background-color: var(--color-fill-active);
  }

  /* ═══ DISABLED STATE ═══ */
  &:disabled {
    color: var(--color-disabled-text);
    cursor: not-allowed;
    opacity: 0.5;
  }
}

/* ═══ DECREMENT BUTTON (LEFT) ═══ */
.ren-number-field-decrement {
  border-inline-end: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-md) 0 0 var(--radius-md);

  /* ═══ MINUS ICON ═══ */
  &::before {
    content: '−';
  }
}

/* ═══ INCREMENT BUTTON (RIGHT) ═══ */
.ren-number-field-increment {
  border-inline-start: var(--stroke-1) solid var(--color-border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;

  /* ═══ PLUS ICON ═══ */
  &::before {
    content: '+';
  }
}

/* ═══ INPUT FIELD (CENTER) ═══ */
.ren-number-field-input {
  flex: 1;
  min-width: 3rem;
  padding: var(--space-2) var(--space-3);
  font-size: var(--body-size);
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
  background: transparent;
  border: none;
  outline: none;
  cursor: text;

  /* ═══ HIDE NATIVE NUMBER SPINNER ═══ */
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  &[type='number'] {
    -moz-appearance: textfield;
  }

  /* ═══ PLACEHOLDER ═══ */
  &::placeholder {
    color: var(--color-input-placeholder);
  }

  /* ═══ DISABLED ═══ */
  &:disabled {
    cursor: not-allowed;
    color: var(--color-disabled-text);
  }
}

/* ═══ VARIANT: SMALL ═══ */
.ren-number-field-sm {
  height: var(--size-sm);
  border-radius: var(--radius-sm);

  & .ren-number-field-decrement,
  & .ren-number-field-increment {
    min-width: var(--size-sm);
    height: var(--size-sm);
    padding: 0 var(--space-1);
    font-size: var(--text-sm);
  }

  & .ren-number-field-decrement {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  }

  & .ren-number-field-increment {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }

  & .ren-number-field-input {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
  }
}

/* ═══ VARIANT: LARGE ═══ */
.ren-number-field-lg {
  height: var(--size-lg);
  border-radius: var(--radius-lg);

  & .ren-number-field-decrement,
  & .ren-number-field-increment {
    min-width: var(--size-lg);
    height: var(--size-lg);
    padding: 0 var(--space-3);
    font-size: var(--text-lg);
  }

  & .ren-number-field-decrement {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }

  & .ren-number-field-increment {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }

  & .ren-number-field-input {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-lg);
  }
}

/* ═══ ERROR STATE ═══ */
.ren-number-field[data-invalid] {
  border-color: var(--color-danger);

  &:focus-within {
    box-shadow: 0 0 0 3px rgb(255, 59, 48, 0.15);
  }
}

/* ═══ SUCCESS STATE ═══ */
.ren-number-field[data-valid] {
  border-color: var(--color-success);

  &:focus-within {
    box-shadow: 0 0 0 3px rgb(52, 199, 89, 0.15);
  }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-number-field,
  .ren-number-field-decrement,
  .ren-number-field-increment {
    transition: none;
  }
}
/* ═══════════════════════════════════════════════════════════════
   REN OTP (ONE-TIME PASSWORD) INPUT COMPONENT
   ═══════════════════════════════════════════════════════════════
   A flexible OTP input with auto-advancing slots, paste support,
   and validation states. Handles numeric and alphanumeric codes.
   Follows RenDS design token system.

   Usage:
   <ren-otp length="6" type="numeric">
     \3c !-- Slots auto-generated by JS -->
   </ren-otp>

   Attributes:
   - length: Number of OTP digits (default: 6)
   - type: "numeric" or "alphanumeric" (default: "numeric")
   - disabled: Disable all slots

   Data Attributes:
   - data-valid: Success state
   - data-invalid: Error state
   - data-filled: On individual slots when filled
   ═══════════════════════════════════════════════════════════════ */

/* ═══ BASE WRAPPER ═══ */
.ren-otp {
  container-type: inline-size;
  container-name: ren-otp;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ═══ INDIVIDUAL SLOT ═══ */
.ren-otp-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  font-size: var(--text-lg);
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-text);
  background-color: var(--color-input-bg);
  border: var(--stroke-1) solid var(--color-input-border);
  border-radius: var(--radius-md);
  outline: none;
  cursor: text;
  caret-color: var(--color-accent);
  text-align: center;
  transition: var(--transition-tactile);

  /* ═══ PLACEHOLDER STYLING ═══ */
  &::placeholder {
    color: var(--color-input-placeholder);
  }

  /* ═══ HOVER STATE ═══ */
  &:hover:not(:disabled):not(:focus) {
    background-color: var(--color-input-bg-hover);
  }

  /* ═══ FOCUS STATE ═══ */
  &:focus {
    border-color: var(--color-input-border-focus);
    box-shadow: 0 0 0 3px var(--color-input-focus-ring);
    background-color: var(--color-input-bg-hover);
  }

  /* ═══ FILLED STATE ═══ */
  &[data-filled] {
    background-color: var(--color-fill);
    border-color: var(--color-input-border);
  }

  /* ═══ DISABLED STATE ═══ */
  &:disabled {
    background-color: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    cursor: not-allowed;
    opacity: 0.7;
    border-color: var(--color-border);
  }
}

/* ═══ SEPARATOR ═══ */
.ren-otp-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: var(--touch-min);
  padding: 0 var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  font-weight: 300;
  user-select: none;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   VALIDATION STATES
   ═══════════════════════════════════════════════════════════════ */

/* ═══ ERROR STATE ═══ */
.ren-otp[data-invalid] .ren-otp-slot {
  border-color: var(--color-danger);

  &:focus {
    box-shadow: 0 0 0 3px rgb(255, 59, 48, 0.15);
    border-color: var(--color-danger);
  }
}

/* ═══ SUCCESS STATE ═══ */
.ren-otp[data-valid] .ren-otp-slot {
  border-color: var(--color-success);

  &:focus {
    box-shadow: 0 0 0 3px rgb(52, 199, 89, 0.15);
    border-color: var(--color-success);
  }
}

/* ═══════════════════════════════════════════════════════════════
   SIZE VARIANTS
   ═══════════════════════════════════════════════════════════════ */

/* ═══ SMALL VARIANT ═══ */
.ren-otp-sm {
  gap: var(--space-1);

  & .ren-otp-slot {
    width: var(--size-sm);
    height: var(--size-sm);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
  }

  & .ren-otp-separator {
    height: var(--size-sm);
    font-size: var(--text-sm);
  }
}

/* ═══ LARGE VARIANT ═══ */
.ren-otp-lg {
  gap: var(--space-3);

  & .ren-otp-slot {
    width: var(--size-lg);
    height: var(--size-lg);
    font-size: var(--body-size);
    border-radius: var(--radius-lg);
  }

  & .ren-otp-separator {
    height: var(--size-lg);
    font-size: var(--body-size);
  }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════ */

/* ═══ FOCUS VISIBLE (KEYBOARD NAVIGATION) ═══ */
.ren-otp-slot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ═══ DISABLED WRAPPER ═══ */
.ren-otp[disabled] .ren-otp-slot {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .ren-otp-slot {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS
   ═══════════════════════════════════════════════════════════════ */

@container ren-otp (max-width: 360px) {
  .ren-otp {
    gap: var(--space-1);

    & .ren-otp-slot {
      width: var(--size-sm);
      height: var(--size-sm);
      font-size: var(--text-sm);
    }

    & .ren-otp-separator {
      height: var(--size-sm);
      font-size: var(--text-sm);
      padding: 0 var(--space-0-5);
    }
  }
}
/* ═══ REN CALENDAR WEB COMPONENT ═══
   A fully accessible, keyboard-navigable calendar component
   with support for single, range, and multiple date selection.
   Uses ARIA grid pattern with roving tabindex for keyboard navigation.
   ══════════════════════════════════════════════════════════════════ */

/* ═══ BASE CONTAINER ═══ */
.ren-calendar {
  container-type: inline-size;
  container-name: ren-calendar;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  font-family: inherit;
}

/* ═══ HEADER WITH NAVIGATION ═══ */
.ren-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-2);
}

/* ═══ MONTH/YEAR TITLE ═══ */
.ren-calendar-title {
  font-size: var(--body-size);
  font-weight: var(--label-weight);
  color: var(--color-text);
  flex: 1;
  text-align: center;
  min-width: 150px;
  white-space: nowrap;
}

/* ═══ NAVIGATION BUTTONS ═══ */
.ren-calendar-nav {
  display: flex;
  gap: var(--space-1);
}

.ren-calendar-nav button {
  width: var(--touch-min);
  height: var(--touch-min);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition-tactile);
  position: relative;

  &:hover {
    background: var(--color-fill);
  }

  &:active {
    background: var(--color-fill-active);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  /* ═══ CHEVRON ICONS ═══ */
  &.ren-calendar-prev::before {
    content: '‹';
    font-size: 1.5em;
    font-weight: bold;
  }

  &.ren-calendar-next::before {
    content: '›';
    font-size: 1.5em;
    font-weight: bold;
  }
}

/* ═══ WEEKDAY HEADERS ═══ */
.ren-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--color-text-muted);
  text-align: center;
}

.ren-calendar-weekday {
  padding: var(--space-2) var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ═══ CALENDAR GRID ═══ */
.ren-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
}

/* ═══ INDIVIDUAL DAY BUTTON ═══ */
.ren-calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  width: 100%;
  aspect-ratio: 1;
  padding: var(--space-0-5);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--body-size);
  cursor: pointer;
  transition: var(--transition-tactile);
  position: relative;

  /* ═══ DEFAULT STATE ═══ */
  &:not([disabled]):hover {
    background: var(--color-fill);
  }

  &:not([disabled]):active {
    background: var(--color-fill-active);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  /* ═══ SELECTED DATE ═══ */
  &[aria-selected="true"] {
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: 600;
  }

  /* ═══ TODAY INDICATOR ═══ */
  &[data-today] {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
    font-weight: 600;
    box-shadow: inset 0 0 0 2px var(--color-accent);
  }

  &[data-today][aria-selected="true"] {
    background: var(--color-accent);
    color: var(--color-on-accent);
    box-shadow: none;
  }

  /* ═══ OUTSIDE MONTH DATES ═══ */
  &[data-outside] {
    color: var(--color-text-faint);
    pointer-events: none;
  }

  /* ═══ DISABLED DATES ═══ */
  &[disabled] {
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.5;
  }

  /* ═══ RANGE START ═══ */
  &.ren-calendar-day-range-start {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-radius: var(--radius-md);

    &::after {
      content: '';
      position: absolute;
      right: -4px;
      top: 0;
      bottom: 0;
      width: 50%;
      background: var(--color-accent-subtle);
      z-index: -1;
    }
  }

  /* ═══ RANGE END ═══ */
  &.ren-calendar-day-range-end {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-radius: var(--radius-md);

    &::before {
      content: '';
      position: absolute;
      left: -4px;
      top: 0;
      bottom: 0;
      width: 50%;
      background: var(--color-accent-subtle);
      z-index: -1;
    }
  }

  /* ═══ IN RANGE ═══ */
  &.ren-calendar-day-in-range {
    background: var(--color-accent-subtle);
    color: var(--color-text);
    border-radius: 0;
  }
}

/* ═══ ANIMATION FOR MONTH TRANSITIONS ═══ */
@keyframes ren-calendar-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ren-calendar-grid {
  animation: ren-calendar-fade-in var(--duration-enter) var(--ease-enter);
}

/* ═══ REDUCED MOTION SUPPORT ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-calendar-grid {
    animation: none;
  }

  .ren-calendar-nav button,
  .ren-calendar-day {
    transition: none;
  }
}

/* ═══ SIZE VARIANT: SMALL ═══ */
.ren-calendar-sm {
  padding: var(--space-3);

  .ren-calendar-header {
    margin-bottom: var(--space-3);
  }

  .ren-calendar-title {
    font-size: var(--label-size);
  }

  .ren-calendar-nav button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .ren-calendar-weekday {
    font-size: var(--caption-size);
  }

  .ren-calendar-day {
    font-size: var(--label-size);
    min-width: 36px;
    min-height: 36px;
  }
}

/* ═══ SIZE VARIANT: LARGE ═══ */
.ren-calendar-lg {
  padding: var(--space-6);

  .ren-calendar-header {
    margin-bottom: var(--space-6);
    gap: var(--space-4);
  }

  .ren-calendar-title {
    font-size: 1.25rem;
  }

  .ren-calendar-nav button {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    font-size: 1.25rem;
  }

  .ren-calendar-weekdays {
    margin-bottom: var(--space-4);
  }

  .ren-calendar-grid {
    gap: var(--space-2);
  }

  .ren-calendar-day {
    font-size: 1.125rem;
    min-width: 52px;
    min-height: 52px;
  }
}

/* ═══ DARK MODE SUPPORT ═══ */
@media (prefers-color-scheme: dark) {
  .ren-calendar {
    /* ═══ USES CSS VARIABLES - AUTO ADAPTS ═══ */
  }
}

/* ═══ COMPACT LAYOUT (Container Query) ═══ */
@container ren-calendar (max-width: 320px) {
  .ren-calendar {
    padding: var(--space-3);
  }

  .ren-calendar-grid {
    gap: var(--space-0-5);
  }

  .ren-calendar-day {
    min-width: 32px;
    min-height: 32px;
    font-size: var(--label-size);
  }

  .ren-calendar-nav button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
}
/* Appearance API bridge */
.ren-calendar {
  inline-size: var(--ren-calendar-width, 280px);
  border-radius: var(--ren-calendar-radius, var(--radius-lg));
  background: var(--ren-calendar-bg, var(--color-surface));
  border-color: var(--ren-calendar-border, var(--color-border));
}
.ren-calendar [data-day], .ren-calendar-day { inline-size: var(--ren-calendar-day-size, var(--size-md)); block-size: var(--ren-calendar-day-size, var(--size-md)); }
.ren-calendar [data-today] { background: var(--ren-calendar-today-bg, var(--color-accent-subtle)); }
.ren-calendar [aria-selected="true"], .ren-calendar [data-selected] { background: var(--ren-calendar-selected-bg, var(--color-accent)); color: var(--ren-calendar-selected-color, var(--color-on-accent)); }
.ren-calendar [data-range], .ren-calendar-range { background: var(--ren-calendar-range-bg, var(--color-accent-subtle)); }

@media (any-pointer: coarse), (pointer: coarse) {
  .ren-calendar .ren-calendar-nav button,
  .ren-calendar .ren-calendar-day {
    inline-size: calc(var(--touch-min) + var(--stroke-1));
    block-size: calc(var(--touch-min) + var(--stroke-1));
    min-inline-size: calc(var(--touch-min) + var(--stroke-1));
    min-block-size: calc(var(--touch-min) + var(--stroke-1));
  }
}
/* ═══ REN DATE PICKER WEB COMPONENT ═══
   A composable date picker that wraps the calendar component
   with an input field and popover dropdown.
   Uses Popover API for positioning with CSS anchor positioning.
   ══════════════════════════════════════════════════════════════════ */

/* ═══ BASE WRAPPER ═══ */
.ren-date-picker {
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* ═══ TRIGGER INPUT ═══ */
.ren-date-picker-trigger {
  anchor-name: --ren-date-picker-anchor;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--body-size);
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition-tactile);
  min-height: var(--touch-min);

  &:hover:not([disabled]) {
    border-color: var(--color-border-strong);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-color: var(--color-accent);
  }

  &[disabled] {
    background: var(--color-fill);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
  }

  /* ═══ PLACEHOLDER TEXT ═══ */
  &::placeholder {
    color: var(--color-text-muted);
  }

  /* ═══ CALENDAR ICON (::after) ═══ */
  &::after {
    content: '📅';
    font-size: 1.25em;
    flex-shrink: 0;
    pointer-events: none;
  }
}

/* ═══ TRIGGER TEXT CONTENT ═══ */
.ren-date-picker-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══ EMPTY STATE ═══ */
.ren-date-picker-trigger.ren-date-picker-empty {
  color: var(--color-text-muted);

  .ren-date-picker-value {
    display: none;
  }

  &::before {
    content: attr(data-placeholder);
    color: var(--color-text-muted);
  }
}

/* ═══ DROPDOWN CONTAINER (POPOVER) ═══ */
.ren-date-picker-dropdown {
  position-anchor: --ren-date-picker-anchor;
  position: absolute;
  position-area: bottom span-all;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  inset: auto;
  margin: 0;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  max-width: 400px;

  /* ═══ POPOVER API ═══ */
  &[popover] {
    padding: 0;
    margin: 0;
  }

  &:popover-open {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: ren-date-picker-popup-in var(--duration-enter) var(--ease-enter) both;
  }
}

.ren-date-picker-dropdown[data-side="bottom"],
.ren-date-picker-dropdown:not([data-side]) {
  position-area: bottom span-all;
  margin-block-start: var(--space-2);
  margin-block-end: 0;
  margin-inline: 0;
}

.ren-date-picker-dropdown[data-side="top"] {
  position-area: top span-all;
  margin-block-start: 0;
  margin-block-end: var(--space-2);
  margin-inline: 0;
}

.ren-date-picker-dropdown[data-side="right"] {
  position-area: right span-all;
  margin-block: 0;
  margin-inline-start: var(--space-2);
  margin-inline-end: 0;
}

.ren-date-picker-dropdown[data-side="left"] {
  position-area: left span-all;
  margin-block: 0;
  margin-inline-start: 0;
  margin-inline-end: var(--space-2);
}

/* ═══ FALLBACK POSITIONING (no complete anchor support) ═══ */
@supports not ((anchor-name: --ren-anchor) and
  (position-anchor: --ren-anchor) and
  (position-area: bottom span-all)) {
  .ren-date-picker-dropdown {
    position: fixed;
    top: auto;
    left: auto;
  }
}

/* ═══ ANIMATION: POPUP IN ═══ */
@starting-style {
  .ren-date-picker-dropdown:popover-open {
    opacity: 0;
    translate: 0 -8px;
  }
}

@keyframes ren-date-picker-popup-in {
  from {
    opacity: 0;
    translate: 0 -8px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ═══ CALENDAR INSIDE DROPDOWN ═══ */
.ren-date-picker-dropdown .ren-calendar {
  border: none;
  box-shadow: none;
  background: var(--color-surface-raised);
  padding: var(--space-3);
}

/* ═══ PRESETS SECTION ═══ */
.ren-date-picker-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.ren-date-picker-preset {
  padding: var(--space-1-5) var(--space-3);
  background: var(--color-fill);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  cursor: pointer;
  transition: var(--transition-tactile);

  &:hover {
    background: var(--color-fill-hover);
    border-color: var(--color-border-strong);
  }

  &:active {
    background: var(--color-fill-active);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  &[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

/* ═══ RANGE MODE: SHOW START AND END ═══ */
.ren-date-picker.ren-date-picker-range .ren-date-picker-value::after {
  content: ' → ';
  margin: 0 var(--space-1);
}

/* ═══ DISABLED STATE ═══ */
.ren-date-picker[disabled] {
  opacity: 0.6;
  pointer-events: none;

  .ren-date-picker-trigger {
    cursor: not-allowed;
  }
}

/* ═══ REDUCED MOTION SUPPORT ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-date-picker-dropdown:popover-open {
    animation: none;
    opacity: 1;
    translate: 0 0;
  }

  .ren-date-picker-dropdown {
    transition: none;
  }
}

/* ═══ DARK MODE SUPPORT ═══ */
@media (prefers-color-scheme: dark) {
  .ren-date-picker-trigger,
  .ren-date-picker-dropdown {
    /* ═══ USES CSS VARIABLES - AUTO ADAPTS ═══ */
  }
}

/* ═══ MOBILE RESPONSIVENESS ═══ */
@media (max-width: 480px) {
  .ren-date-picker-dropdown {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 80vh;
    overflow-y: auto;

    &:popover-open {
      animation: ren-date-picker-mobile-in var(--duration-enter) var(--ease-enter) both;
    }
  }

  @starting-style {
    .ren-date-picker-dropdown:popover-open {
      translate: 0 100%;
      opacity: 0;
    }
  }

}

@keyframes ren-date-picker-mobile-in {
  from {
    translate: 0 100%;
    opacity: 0;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}

/* ═══ ERROR STATE ═══ */
.ren-date-picker.ren-date-picker-error {
  .ren-date-picker-trigger {
    border-color: var(--color-danger);

    &:focus-visible {
      outline-color: var(--color-danger);
      border-color: var(--color-danger);
    }
  }
}

/* ═══ SUCCESS STATE ═══ */
.ren-date-picker.ren-date-picker-success {
  .ren-date-picker-trigger {
    border-color: var(--color-success);

    &:focus-visible {
      outline-color: var(--color-success);
      border-color: var(--color-success);
    }
  }
}

/* ═══ FORM INTEGRATION ═══ */
.ren-date-picker {
  /* ═══ ALLOW FORM STYLING ═══ */

  input[type='hidden'] {
    display: none;
  }
}
/* ═══ REN DATE RANGE PICKER WEB COMPONENT ═══
   A composable date range picker with dual calendars,
   preset shortcuts, and an input trigger with popover dropdown.
   Built on top of RenCalendar for consistent behavior.

   Usage:
     <ren-date-range-picker
       placeholder="Select date range"
       format="short"
       locale="en-US"
       presets="last7,last30,thisMonth,lastMonth"
     ></ren-date-range-picker>
   ══════════════════════════════════════════════════════════════════ */

/* ═══ BASE WRAPPER ═══ */
.ren-date-range-picker {
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* ═══ TRIGGER BUTTON ═══ */
.ren-date-range-trigger {
  anchor-name: --ren-date-range-anchor;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--body-size);
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition-tactile);
  min-height: var(--touch-min);

  &:hover:not([disabled]) {
    border-color: var(--color-border-strong);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-color: var(--color-accent);
  }

  &[disabled] {
    background: var(--color-fill);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
  }

  /* ═══ CALENDAR ICON ═══ */
  &::after {
    content: '📅';
    font-size: 1.25em;
    flex-shrink: 0;
    pointer-events: none;
  }
}

/* ═══ TRIGGER VALUE DISPLAY ═══ */
.ren-date-range-value {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow: hidden;
  white-space: nowrap;
}

.ren-date-range-start,
.ren-date-range-end {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ren-date-range-separator {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ═══ EMPTY STATE ═══ */
.ren-date-range-trigger.ren-date-range-empty {
  color: var(--color-text-muted);

  .ren-date-range-value {
    display: none;
  }

  &::before {
    content: attr(data-placeholder);
    color: var(--color-text-muted);
    flex: 1;
  }
}

/* ═══ DROPDOWN CONTAINER (POPOVER) ═══ */
.ren-date-range-dropdown {
  position-anchor: --ren-date-range-anchor;
  position: absolute;
  position-area: bottom span-all;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  inset: auto;
  margin: 0;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1000;

  /* ═══ POPOVER API ═══ */
  &[popover] {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  &:popover-open {
    animation: ren-date-range-popup-in var(--duration-enter) var(--ease-enter) both;
  }
}

.ren-date-range-dropdown[data-side="bottom"],
.ren-date-range-dropdown:not([data-side]) {
  position-area: bottom span-all;
  margin-block-start: var(--space-2);
  margin-block-end: 0;
  margin-inline: 0;
}

.ren-date-range-dropdown[data-side="top"] {
  position-area: top span-all;
  margin-block-start: 0;
  margin-block-end: var(--space-2);
  margin-inline: 0;
}

.ren-date-range-dropdown[data-side="right"] {
  position-area: right span-all;
  margin-block: 0;
  margin-inline-start: var(--space-2);
  margin-inline-end: 0;
}

.ren-date-range-dropdown[data-side="left"] {
  position-area: left span-all;
  margin-block: 0;
  margin-inline-start: 0;
  margin-inline-end: var(--space-2);
}

/* ═══ FALLBACK POSITIONING (no complete anchor support) ═══ */
@supports not ((anchor-name: --ren-anchor) and
  (position-anchor: --ren-anchor) and
  (position-area: bottom span-all)) {
  .ren-date-range-dropdown {
    position: fixed;
    top: auto;
    left: auto;
  }
}

/* ═══ ANIMATION: POPUP IN ═══ */
@starting-style {
  .ren-date-range-dropdown:popover-open {
    opacity: 0;
    translate: 0 -8px;
  }
}

@keyframes ren-date-range-popup-in {
  from {
    opacity: 0;
    translate: 0 -8px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ═══ DROPDOWN INNER WRAPPER ═══ */
.ren-date-range-inner {
  container-type: inline-size;
  container-name: ren-date-range;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ═══ PRESETS SIDEBAR ═══ */
.ren-date-range-presets {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.ren-date-range-preset {
  display: block;
  width: 100%;
  padding: var(--space-1-5) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  text-align: start;
  cursor: pointer;
  transition: var(--transition-tactile);

  &:hover {
    background: var(--color-fill);
  }

  &:active {
    background: var(--color-fill-active);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  &[aria-selected="true"] {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
    font-weight: var(--weight-semibold);
  }
}

/* ═══ DUAL CALENDAR LAYOUT ═══ */
.ren-date-range-calendars {
  display: flex;
  gap: 0;
  padding: var(--space-3);
}

.ren-date-range-calendars > .ren-calendar {
  border: none;
  box-shadow: none;
  background: transparent;
  flex: 1;
}

/* ═══ DIVIDER BETWEEN CALENDARS ═══ */
.ren-date-range-divider {
  width: 1px;
  align-self: stretch;
  background: var(--color-border);
  margin-block: var(--space-2);
  flex-shrink: 0;
}

/* ═══ FOOTER WITH ACTIONS ═══ */
.ren-date-range-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.ren-date-range-summary {
  font-size: var(--label-size);
  color: var(--color-text-secondary);
}

.ren-date-range-summary strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.ren-date-range-actions {
  display: flex;
  gap: var(--space-2);
}

.ren-date-range-cancel,
.ren-date-range-apply {
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  cursor: pointer;
  transition: var(--transition-tactile);

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
}

.ren-date-range-cancel {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);

  &:hover {
    background: var(--color-fill);
    border-color: var(--color-border-strong);
  }
}

.ren-date-range-apply {
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: var(--color-on-accent);

  &:hover {
    background: var(--color-accent-hover);
  }

  &[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

/* ═══ DISABLED STATE ═══ */
.ren-date-range-picker[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

/* ═══ ERROR STATE ═══ */
.ren-date-range-picker.ren-date-range-error {
  .ren-date-range-trigger {
    border-color: var(--color-danger);

    &:focus-visible {
      outline-color: var(--color-danger);
    }
  }
}

/* ═══ SUCCESS STATE ═══ */
.ren-date-range-picker.ren-date-range-success {
  .ren-date-range-trigger {
    border-color: var(--color-success);

    &:focus-visible {
      outline-color: var(--color-success);
    }
  }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-date-range-dropdown:popover-open {
    animation: none;
    opacity: 1;
    translate: 0 0;
  }

  .ren-date-range-dropdown {
    transition: none;
  }
}

/* ═══ COMPACT LAYOUT (Container Query) ═══
   Stacks calendars vertically and makes presets
   horizontal when the dropdown is narrow —
   works in sidebars, modals, or small viewports. */
@container ren-date-range (max-width: 500px) {
  .ren-date-range-calendars {
    flex-direction: column;
    gap: var(--space-2);
  }

  .ren-date-range-divider {
    width: 100%;
    height: 1px;
    margin-inline: var(--space-2);
    margin-block: 0;
  }

  .ren-date-range-presets {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  .ren-date-range-preset {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ═══ MOBILE BOTTOM SHEET (Media Query) ═══
   Fixed positioning requires viewport awareness,
   so this stays as a media query. */
@media (max-width: 680px) {
  .ren-date-range-dropdown {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 85vh;
    overflow-y: auto;

    &:popover-open {
      animation: ren-date-range-mobile-in var(--duration-enter) var(--ease-enter) both;
    }
  }

  @starting-style {
    .ren-date-range-dropdown:popover-open {
      translate: 0 100%;
      opacity: 0;
    }
  }

}

@keyframes ren-date-range-mobile-in {
  from {
    translate: 0 100%;
    opacity: 0;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}

/* ═══ FORM INTEGRATION ═══ */
.ren-date-range-picker {
  input[type='hidden'] {
    display: none;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   RenDS — <ren-carousel> Web Component
   ═══════════════════════════════════════════════════════════════════════════
   Accessible carousel/slider with scroll-snap, keyboard nav, autoplay, and dots.

   Features:
   - CSS scroll-snap for performant sliding
   - Configurable slides-per-view (1, 2, 3, 4)
   - Fade or slide transitions
   - Touch-friendly swipe support
   - Keyboard navigation (Arrow keys)
   - Optional autoplay with progress indicator
   - Responsive via container queries
   - Respects prefers-reduced-motion
   ═════════════════════════════════════════════════════════════════════════ */

/* ═══ CAROUSEL OUTER CONTAINER ═══ */
.ren-carousel {
  container-type: inline-size;
  container-name: ren-carousel;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ═══ VIEWPORT (SCROLL CONTAINER) ═══ */
.ren-carousel-viewport {
  position: relative;
  width: 100%;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  touch-action: pan-x pinch-zoom; /* Prevent vertical scroll interference during horizontal swipe */
}

/* Hide scrollbar in Chrome, Safari, and Opera */
.ren-carousel-viewport::-webkit-scrollbar {
  display: none;
}

/* Container for slides with flexbox */
.ren-carousel-viewport {
  display: flex;
  flex-wrap: nowrap;
}

/* ═══ INDIVIDUAL SLIDES ═══ */
.ren-carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: auto;
}

/* Ensure slide content can be sized */
.ren-carousel-slide > * {
  display: block;
  width: 100%;
  height: auto;
}

/* ═══ SLIDES-PER-VIEW VARIANTS ═══ */

/* 2 slides visible (50% each) */
.ren-carousel-2 .ren-carousel-slide {
  flex: 0 0 50%;
  min-width: 50%;
}

/* 3 slides visible (33.33% each) */
.ren-carousel-3 .ren-carousel-slide {
  flex: 0 0 calc(100% / 3);
  min-width: calc(100% / 3);
}

/* 4 slides visible (25% each) */
.ren-carousel-4 .ren-carousel-slide {
  flex: 0 0 25%;
  min-width: 25%;
}

/* Responsive: stack to 1 or 2 on narrow screens via container queries */
@supports (container-type: inline-size) {
  @container (max-width: 640px) {
    .ren-carousel-2 .ren-carousel-slide,
    .ren-carousel-3 .ren-carousel-slide,
    .ren-carousel-4 .ren-carousel-slide {
      flex: 0 0 100%;
      min-width: 100%;
    }
  }

  @container (max-width: 1024px) and (min-width: 641px) {
    .ren-carousel-3 .ren-carousel-slide,
    .ren-carousel-4 .ren-carousel-slide {
      flex: 0 0 50%;
      min-width: 50%;
    }
  }
}

/* ═══ FADE TRANSITION VARIANT ═══ */
.ren-carousel-fade {
  position: relative;
}

.ren-carousel-fade .ren-carousel-viewport {
  scroll-behavior: auto;
}

.ren-carousel-fade .ren-carousel-slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  transition: opacity var(--duration-enter) var(--ease-enter);
  pointer-events: none;
}

.ren-carousel-fade .ren-carousel-slide[aria-current="true"] {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

/* ═══ NAVIGATION ARROWS ═══ */
.ren-carousel-prev,
.ren-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: var(--touch-min);
  height: var(--touch-min);
  min-width: 44px;
  min-height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: rgb(0, 0, 0, 0.4);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: white;
  font-size: 20px;
  transition: var(--transition-tactile);
}

/* Arrow positioning */
.ren-carousel-prev {
  left: var(--space-3);
}

.ren-carousel-next {
  right: var(--space-3);
}

/* Arrow chevron using ::before pseudo-element */
.ren-carousel-prev::before {
  content: '‹';
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
}

.ren-carousel-next::before {
  content: '›';
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
}

/* Hover state — increase opacity */
.ren-carousel-prev:hover:not(:disabled),
.ren-carousel-next:hover:not(:disabled) {
  background-color: rgb(0, 0, 0, 0.7);
}

/* Active/focus state */
.ren-carousel-prev:focus-visible,
.ren-carousel-next:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Hidden arrows at boundaries */
.ren-carousel[data-at-start] .ren-carousel-prev,
.ren-carousel[data-at-end] .ren-carousel-next {
  opacity: 0;
  pointer-events: none;
}

/* Disabled state */
.ren-carousel-prev:disabled,
.ren-carousel-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ═══ PROGRESSIVE ENHANCEMENT: CSS-ONLY SCROLL BUTTONS ═══
   Modern browsers support ::scroll-button() pseudo-elements for native
   scroll container navigation without JavaScript.
   When supported, these replace the JS-generated arrow buttons. */

@supports selector(::scroll-button(inline-start)) {
  .ren-carousel-viewport {
    /* Enable native scroll buttons */
    overflow-x: auto;
  }

  .ren-carousel-viewport::scroll-button(inline-start),
  .ren-carousel-viewport::scroll-button(inline-end) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    width: var(--touch-min, 44px);
    height: var(--touch-min, 44px);
    min-width: 44px;
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: rgb(0, 0, 0, 0.4);
    border: none;
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    color: white;

    transition: var(--transition-tactile);
  }

  .ren-carousel-viewport::scroll-button(inline-start) {
    content: '‹';
    left: var(--space-3, 0.75rem);
  }

  .ren-carousel-viewport::scroll-button(inline-end) {
    content: '›';
    right: var(--space-3, 0.75rem);
  }

  .ren-carousel-viewport::scroll-button(inline-start):hover,
  .ren-carousel-viewport::scroll-button(inline-end):hover {
    background-color: rgb(0, 0, 0, 0.7);
  }

  /* Hide JS-generated arrows when native scroll buttons are available */
  .ren-carousel .ren-carousel-prev,
  .ren-carousel .ren-carousel-next {
    display: none;
  }
}

/* ═══ PAGINATION DOTS ═══ */
.ren-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 0;
  list-style: none;
}

.ren-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  border: none;
  cursor: pointer;
  transition: var(--transition-tactile);
  padding: 0;
  margin: 0;
}

/* Active dot */
.ren-carousel-dot[aria-current="true"] {
  background-color: var(--color-accent);
  transform: scale(1.25);
}

/* Hover state */
.ren-carousel-dot:hover:not([aria-current="true"]) {
  background-color: var(--color-border);
  opacity: 0.7;
}

/* Focus visible */
.ren-carousel-dot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-full);
}

/* ═══ AUTOPLAY PROGRESS BAR ═══ */
.ren-carousel-dot[aria-current="true"]::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 2px;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  opacity: 0;
}

/* Show progress bar when autoplay is active */
.ren-carousel[data-autoplay] .ren-carousel-dot[aria-current="true"]::after {
  opacity: 1;
  animation: carousel-progress linear forwards;
}

@keyframes carousel-progress {
  from {
    width: 0;
  }
  to {
    width: 6px;
  }
}

/* Dynamic progress bar timing — controlled by JS */
.ren-carousel[data-autoplay-duration] .ren-carousel-dot[aria-current="true"]::after {
  animation-duration: inherit;
}

/* ═══ CAROUSEL COUNTER ═══ */
.ren-carousel-counter {
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.ren-carousel-counter-current {
  font-weight: 600;
  color: var(--color-text);
}

/* ═══ ACCESSIBILITY & ANIMATIONS ═══ */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .ren-carousel-viewport {
    scroll-behavior: auto;
  }

  .ren-carousel-slide,
  .ren-carousel-dot,
  .ren-carousel-prev,
  .ren-carousel-next {
    transition: none;
    animation: none;
  }

  .ren-carousel[data-autoplay] .ren-carousel-dot[aria-current="true"]::after {
    animation: none;
    width: 6px;
    opacity: 1;
  }
}

/* ═══ FOCUS VISIBLE FOR KEYBOARD NAVIGATION ═══ */
.ren-carousel-slide:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ═══ RESPONSIVE ADJUSTMENTS (Container Queries) ═══ */

/* Compact carousel */
@container ren-carousel (max-width: 480px) {
  .ren-carousel {
    gap: var(--space-2);
  }

  .ren-carousel-prev,
  .ren-carousel-next {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .ren-carousel-prev {
    left: var(--space-2);
  }

  .ren-carousel-next {
    right: var(--space-2);
  }

  .ren-carousel-dots {
    gap: var(--space-1);
  }

  .ren-carousel-dot {
    width: 6px;
    height: 6px;
  }

  .ren-carousel-dot[aria-current="true"] {
    transform: scale(1.1);
  }
}

/* Wide carousel — hover reveal arrows */
@container ren-carousel (min-width: 768px) {
  .ren-carousel-prev,
  .ren-carousel-next {
    opacity: 0.6;
  }

  .ren-carousel:hover .ren-carousel-prev:not(:disabled),
  .ren-carousel:hover .ren-carousel-next:not(:disabled) {
    opacity: 1;
  }
}

/* ═══ UTILITY CLASSES ═══ */

/* Carousel without dots */
.ren-carousel-no-dots .ren-carousel-dots {
  display: none;
}

/* Carousel without arrows */
.ren-carousel-no-arrows .ren-carousel-prev,
.ren-carousel-no-arrows .ren-carousel-next {
  display: none;
}

/* Carousel without counter */
.ren-carousel-no-counter .ren-carousel-counter {
  display: none;
}

/* Full width slides (1 per view) */
.ren-carousel-full .ren-carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
}

/* Draggable appearance */
.ren-carousel-viewport {
  user-select: none;
  -webkit-user-select: none;
}

.ren-carousel-slide {
  user-select: none;
  -webkit-user-select: none;
}

/* Touch feedback */
.ren-carousel-slide {
  cursor: grab;
}

.ren-carousel-slide:active {
  cursor: grabbing;
}

/* ═══ LOADING STATE ═══ */
.ren-carousel[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* ═══ SEMANTIC HTML ADJUSTMENTS ═══ */
.ren-carousel[role="group"],
.ren-carousel[role="region"] {
  /* Already defined above, this is for clarity */
}

/* Ensure images in slides maintain aspect ratio */
.ren-carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Video in carousel */
.ren-carousel-slide video {
  width: 100%;
  height: auto;
  display: block;
}
/* Appearance API bridge */
.ren-carousel { gap: var(--ren-carousel-gap, var(--space-4)); border-radius: var(--ren-carousel-radius, var(--radius-lg)); transition-duration: var(--ren-carousel-duration, var(--duration-normal)); transition-timing-function: var(--ren-carousel-easing, var(--ease-out)); }
.ren-carousel .ren-carousel-arrow { inline-size: var(--ren-carousel-arrow-size, var(--size-lg)); block-size: var(--ren-carousel-arrow-size, var(--size-lg)); }
.ren-carousel .ren-carousel-dot { inline-size: var(--ren-carousel-dot-size, 8px); block-size: var(--ren-carousel-dot-size, 8px); background: var(--ren-carousel-dot-color, var(--color-fill)); }
.ren-carousel .ren-carousel-dot[aria-current="true"], .ren-carousel .ren-carousel-dot.is-active { background: var(--ren-carousel-dot-active, var(--color-accent)); }
/* ═══════════════════════════════════════════════════════════════════
   RenDS — Color Picker Composite Component
   ═══════════════════════════════════════════════════════════════════
   A fully accessible, feature-rich color picker with support for:
   - HSV color model (internal) with conversion to/from HEX, RGB, HSL
   - Saturation/brightness canvas area
   - Hue slider
   - Optional alpha/opacity slider
   - Text inputs for manual color entry
   - Preset color swatches
   - EyeDropper API integration (when available)
   - Keyboard navigation and ARIA labels
   - Smooth animations with @starting-style support

   Structure:
   .ren-color-picker (container)
     .ren-color-picker-trigger (button showing current color)
     [popover] .ren-color-picker-dropdown
       .ren-color-picker-saturation (canvas area for S/B)
         .ren-color-picker-saturation-handle (circular cursor)
       .ren-color-picker-hue (horizontal rainbow slider)
         .ren-color-picker-hue-handle (thumb)
       .ren-color-picker-alpha (opacity slider, optional)
         .ren-color-picker-alpha-handle (thumb)
       .ren-color-picker-preview (color display swatch)
       .ren-color-picker-inputs
         .ren-color-picker-hex-input
         .ren-color-picker-channel (R/G/B or H/S/L)
       .ren-color-picker-swatches (preset colors, optional)
       .ren-color-picker-format-toggle (HEX/RGB/HSL switcher)
       .ren-color-picker-eyedropper (screen picker, optional)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ COLOR PICKER CONTAINER ═══ */
.ren-color-picker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: inherit;
}

/* ═══ TRIGGER BUTTON (Shows Current Color) ═══ */
.ren-color-picker-trigger {
  anchor-name: --ren-color-picker-anchor;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  font-size: var(--body-size);
  font-family: inherit;
  color: var(--color-text);
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-tactile);
}

.ren-color-picker-trigger:hover:not(:disabled) {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-border-focus);
}

.ren-color-picker-trigger:focus-visible {
  outline: none;
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

.ren-color-picker-trigger[aria-expanded="true"] {
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

.ren-color-picker-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Trigger swatch (small colored square) */
.ren-color-picker-trigger-swatch {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background-color: var(--white);
  background-image: repeating-conic-gradient(
    var(--color-border) 0deg 90deg,
    transparent 90deg 180deg
  ) 50% / 4px 4px;
}

/* Trigger value text */
.ren-color-picker-trigger-value {
  flex: 1;
  text-align: start;
  font-family: var(--font-mono);
  font-size: var(--label-size);
}

/* ═══ DROPDOWN CONTAINER (Popover) ═══ */
.ren-color-picker-dropdown {
  position: absolute;
  position-anchor: --ren-color-picker-anchor;
  position-area: bottom span-all;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  inset: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: auto;
  max-width: 300px;
  padding: var(--space-4);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 50;

  /* Popover API defaults */
  &:popover-open {
    animation: ren-color-picker-open var(--duration-enter) var(--ease-enter);
  }

  @supports (animation-timeline: view()) {
    &:popover-open {
      animation: ren-color-picker-open var(--duration-enter) var(--ease-enter);
      transition-behavior: allow-discrete;
    }

    @starting-style {
      opacity: 0;
      transform: scale(0.95);
    }
  }
}

.ren-color-picker-dropdown[data-side="bottom"],
.ren-color-picker-dropdown:not([data-side]) {
  position-area: bottom span-all;
  margin-block-start: var(--space-2);
  margin-block-end: 0;
  margin-inline: 0;
}

.ren-color-picker-dropdown[data-side="top"] {
  position-area: top span-all;
  margin-block-start: 0;
  margin-block-end: var(--space-2);
  margin-inline: 0;
}

.ren-color-picker-dropdown[data-side="right"] {
  position-area: right span-all;
  margin-block: 0;
  margin-inline-start: var(--space-2);
  margin-inline-end: 0;
}

.ren-color-picker-dropdown[data-side="left"] {
  position-area: left span-all;
  margin-block: 0;
  margin-inline-start: 0;
  margin-inline-end: var(--space-2);
}

@supports not ((anchor-name: --ren-anchor) and
  (position-anchor: --ren-anchor) and
  (position-area: bottom span-all)) {
  .ren-color-picker-dropdown {
    position: absolute;
    inset: auto;
  }
}

@keyframes ren-color-picker-open {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ═══ SATURATION/BRIGHTNESS AREA ═══ */
.ren-color-picker-saturation {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 240px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  cursor: crosshair;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* Canvas for saturation/brightness */
.ren-color-picker-saturation-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
}

/* Saturation handle (circular cursor) */
.ren-color-picker-saturation-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgb(0, 0, 0, 0.3);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* ═══ HUE SLIDER ═══ */
.ren-color-picker-hue {
  position: relative;
  width: 100%;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  cursor: pointer;
  /* Hue rainbow. Intencionalmente hex literals: son los 6 puntos del espectro
     HSL puros (red→yellow→green→cyan→blue→magenta→red), no colores de UI. */
  background: linear-gradient(
    to right,
    #ff0000 0%,
    #ffff00 16.67%,
    #00ff00 33.33%,
    #00ffff 50%,
    #0000ff 66.67%,
    #ff00ff 83.33%,
    #ff0000 100%
  );
  overflow: hidden;
}

/* Hue slider handle/thumb */
.ren-color-picker-hue-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: white;
  box-shadow: 0 0 0 1px rgb(0, 0, 0, 0.3);
  pointer-events: none;
  transform: translateY(-50%);
}

/* ═══ ALPHA SLIDER (Optional) ═══ */
.ren-color-picker-alpha {
  position: relative;
  width: 100%;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  cursor: pointer;
  overflow: hidden;

  /* Checkerboard pattern for transparency */
  background-image: repeating-conic-gradient(
    var(--color-border) 0deg 90deg,
    transparent 90deg 180deg
  );
  background-size: 8px 8px;
  background-position: 0 0;
}

/* Gradient overlay for alpha */
.ren-color-picker-alpha-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
}

/* Alpha slider handle/thumb */
.ren-color-picker-alpha-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: white;
  box-shadow: 0 0 0 1px rgb(0, 0, 0, 0.3);
  pointer-events: none;
  transform: translateY(-50%);
}

/* ═══ COLOR PREVIEW SWATCH ═══ */
.ren-color-picker-preview {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.ren-color-picker-preview-swatch {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);

  /* Checkerboard for transparency */
  background-image: repeating-conic-gradient(
    var(--color-border) 0deg 90deg,
    transparent 90deg 180deg
  );
  background-size: 4px 4px;
  background-position: 0 0;
}

.ren-color-picker-preview-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.ren-color-picker-preview-label {
  font-size: var(--caption-size);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--label-weight);
}

.ren-color-picker-preview-value {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  color: var(--color-text);
  margin-top: var(--space-1);
}

/* ═══ TEXT INPUTS SECTION ═══ */
.ren-color-picker-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Hex input field */
.ren-color-picker-hex-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--body-size);
  font-family: var(--font-mono);
  color: var(--color-text);
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  transition: var(--transition-tactile);
}

.ren-color-picker-hex-input:focus {
  outline: none;
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

.ren-color-picker-hex-input::placeholder {
  color: var(--color-text-muted);
}

/* Channel inputs container (RGB or HSL) */
.ren-color-picker-channels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2);
}

/* Individual channel input */
.ren-color-picker-channel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ren-color-picker-channel-label {
  font-size: var(--caption-size);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--label-weight);
}

.ren-color-picker-channel-input {
  padding: var(--space-2) var(--space-2);
  font-size: var(--body-size);
  font-family: var(--font-mono);
  color: var(--color-text);
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: var(--transition-tactile);
}

.ren-color-picker-channel-input:focus {
  outline: none;
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

.ren-color-picker-channel-input::-webkit-outer-spin-button,
.ren-color-picker-channel-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ren-color-picker-channel-input[type="number"] {
  -moz-appearance: textfield;
}

/* ═══ FORMAT TOGGLE BUTTON ═══ */
.ren-color-picker-format-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--label-size);
  font-family: var(--font-mono);
  color: var(--color-text);
  background-color: var(--color-fill);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-tactile);
}

.ren-color-picker-format-toggle:hover {
  background-color: var(--color-fill-hover);
  border-color: var(--color-border);
}

.ren-color-picker-format-toggle:focus-visible {
  outline: none;
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

.ren-color-picker-format-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ═══ EYEDROPPER BUTTON ═══ */
.ren-color-picker-eyedropper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--label-size);
  color: var(--color-text);
  background-color: var(--color-fill);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-tactile);
}

.ren-color-picker-eyedropper:hover {
  background-color: var(--color-fill-hover);
  border-color: var(--color-border);
}

.ren-color-picker-eyedropper:focus-visible {
  outline: none;
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

.ren-color-picker-eyedropper:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ren-color-picker-eyedropper-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
}

/* ═══ PRESETS/SWATCHES GRID ═══ */
.ren-color-picker-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.ren-color-picker-swatch {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-tactile);
  background-image: repeating-conic-gradient(
    var(--color-border) 0deg 90deg,
    transparent 90deg 180deg
  );
  background-size: 4px 4px;
  background-position: 0 0;
}

.ren-color-picker-swatch:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-input-focus-ring);
}

.ren-color-picker-swatch:hover {
  transform: scale(1.05);
  border-color: var(--color-border);
}

.ren-color-picker-swatch[aria-selected="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
}

.ren-color-picker-swatch-color {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

/* ═══ CONTROLS ROW (Format + Eyedropper) ═══ */
.ren-color-picker-controls {
  display: flex;
  gap: var(--space-2);
}

.ren-color-picker-controls-left {
  flex: 1;
  display: flex;
  gap: var(--space-2);
}

.ren-color-picker-controls-right {
  display: flex;
  gap: var(--space-2);
}

/* ═══ DISABLED STATE ═══ */
.ren-color-picker[disabled],
.ren-color-picker-trigger[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══ ANIMATIONS & TRANSITIONS ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-color-picker-dropdown,
  .ren-color-picker-trigger,
  .ren-color-picker-hex-input,
  .ren-color-picker-channel-input,
  .ren-color-picker-format-toggle,
  .ren-color-picker-swatch {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
}
/* Appearance API bridge */
.ren-color-picker { inline-size: var(--ren-cp-width, 280px); border-radius: var(--ren-cp-radius, var(--radius-lg)); background: var(--ren-cp-bg, var(--color-surface-overlay)); box-shadow: var(--ren-cp-shadow, var(--shadow-lg)); }
.ren-color-picker .ren-color-picker-swatch { inline-size: var(--ren-cp-swatch-size, 24px); block-size: var(--ren-cp-swatch-size, 24px); }
.ren-color-picker .ren-color-picker-handle { inline-size: var(--ren-cp-handle-size, 16px); block-size: var(--ren-cp-handle-size, 16px); }
.ren-color-picker .ren-color-picker-track { block-size: var(--ren-cp-track-height, 12px); }
/* ============================================
   RenDS — Collapsible Component
   ============================================
   Expand/collapse content panel.
   Uses native <details>/<summary> — ZERO JS.

   CSS-only animation with interpolate-size.

   Different from Accordion: standalone, no group
   exclusivity. For single expand/collapse sections.

   Usage:
     <details class="ren-collapsible">
       <summary>Click to expand</summary>
       <div class="ren-collapsible-content">
         Hidden content here
       </div>
     </details>

   Open by default:
     <details class="ren-collapsible" open>
       ...
     </details>
   ============================================ */

/* Enable height animation on details */
.ren-collapsible {
  interpolate-size: allow-keywords;
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Summary (trigger) */
.ren-collapsible > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  font-size: var(--body-size);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  list-style: none; /* Remove default marker */
  transition: var(--transition-tactile);
}

/* Remove default marker in WebKit */
.ren-collapsible > summary::-webkit-details-marker {
  display: none;
}

/* Custom chevron */
.ren-collapsible > summary::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border: solid var(--color-text-muted);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform var(--duration-enter) var(--ease-enter);
}

.ren-collapsible[open] > summary::after {
  transform: rotate(-135deg);
}

.ren-collapsible > summary:hover {
  background-color: var(--color-fill);
}

.ren-collapsible > summary:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: -2px;
}

/* Content area */
.ren-collapsible-content {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--body-size);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* ─── Ghost variant (no border) ─── */
.ren-collapsible-ghost {
  border: none;
}

.ren-collapsible-ghost > summary {
  padding-inline: 0;
}

.ren-collapsible-ghost .ren-collapsible-content {
  padding-inline: 0;
}

/* ─── Animate open/close ─── */
/* Uses CSS content-visibility for animation */
.ren-collapsible .ren-collapsible-content {
  content-visibility: visible;
}

/* Reduced motion — no animation */
@media (prefers-reduced-motion: reduce) {
  .ren-collapsible > summary::after {
    transition: none;
  }
}
/* Appearance API bridge */
.ren-collapsible, .ren-accordion { border-color: var(--ren-collapse-border, var(--color-border)); border-radius: var(--ren-collapse-radius, var(--radius-lg)); background: var(--ren-collapse-bg, var(--color-surface)); transition-duration: var(--ren-collapse-duration, var(--duration-normal)); transition-timing-function: var(--ren-collapse-easing, var(--ease-out)); }
.ren-collapsible > summary, .ren-accordion > summary { padding: var(--ren-collapse-padding, var(--space-4)); font-size: var(--ren-collapse-trigger-font, var(--label-lg-size)); font-weight: var(--ren-collapse-trigger-weight, var(--weight-semibold)); }
/* ============================================
   RenDS — Toolbar Component
   ============================================
   Grouped actions with roving tabindex pattern.
   CSS-only for layout. JS only for keyboard nav.

   Follows WAI-ARIA Toolbar pattern:
   - Arrow keys move between items
   - Tab moves focus in/out of toolbar
   - Home/End go to first/last item

   Usage:
     <div class="ren-toolbar" role="toolbar" aria-label="Formatting">
       <button class="ren-toolbar-item" tabindex="0">Bold</button>
       <button class="ren-toolbar-item" tabindex="-1">Italic</button>
       <button class="ren-toolbar-item" tabindex="-1">Underline</button>
       <div class="ren-toolbar-separator" role="separator"></div>
       <button class="ren-toolbar-item" tabindex="-1">Left</button>
       <button class="ren-toolbar-item" tabindex="-1">Center</button>
       <button class="ren-toolbar-item" tabindex="-1">Right</button>
     </div>

   Note: Set tabindex="0" on first item, "-1" on rest.
   ren-toolbar.js handles roving tabindex automatically.
   ============================================ */

.ren-toolbar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  background-color: var(--color-surface-sunken);
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-md);
}

/* ─── Toolbar Items ─── */
.ren-toolbar-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-sm);
  min-height: var(--size-sm);
  padding: var(--space-1) var(--space-2);
  border: none;
  background: none;
  color: var(--color-text);
  font-size: var(--caption-size, var(--text-sm));
  font-weight: var(--weight-medium);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition-tactile);
}

.ren-toolbar-item:hover {
  background-color: var(--color-fill-hover);
}

.ren-toolbar-item:active {
  background-color: var(--color-fill-active);
}

.ren-toolbar-item:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: -1px;
}

/* Active / Pressed state */
.ren-toolbar-item[aria-pressed="true"],
.ren-toolbar-item[data-active] {
  background-color: var(--color-surface-raised, var(--color-surface));
  box-shadow: var(--shadow-xs);
  color: var(--color-accent);
}

/* Disabled */
.ren-toolbar-item:disabled,
.ren-toolbar-item[aria-disabled="true"] {
  color: var(--color-disabled-text);
  cursor: not-allowed;
}

/* ─── Separator ─── */
.ren-toolbar-separator {
  width: 1px;
  height: 1.25rem;
  background-color: var(--color-border);
  margin-inline: var(--space-1);
  flex-shrink: 0;
}

/* ─── Icon-only items ─── */
.ren-toolbar-item-icon {
  min-width: var(--size-sm);
  padding: var(--space-1);
  aspect-ratio: 1;
}

/* ─── Variants ─── */

/* Ghost — no background on container */
.ren-toolbar-ghost {
  background: none;
  border: none;
  padding: 0;
  gap: var(--space-1);
}

/* Vertical toolbar */
.ren-toolbar-vertical {
  flex-direction: column;
}

.ren-toolbar-vertical .ren-toolbar-separator {
  width: auto;
  height: 1px;
  align-self: stretch;
  margin-block: var(--space-1);
  margin-inline: 0;
}
/* Appearance API bridge */
.ren-toolbar { min-block-size: var(--ren-toolbar-height, var(--size-lg)); padding: var(--ren-toolbar-padding, var(--space-1)); border-radius: var(--ren-toolbar-radius, var(--radius-lg)); background: var(--ren-toolbar-bg, var(--color-surface-raised)); border-color: var(--ren-toolbar-border, var(--color-border)); }
.ren-toolbar button, .ren-toolbar [role="button"] { inline-size: var(--ren-toolbar-item-size, var(--size-md)); block-size: var(--ren-toolbar-item-size, var(--size-md)); border-radius: var(--ren-toolbar-item-radius, var(--radius-sm)); }
.ren-toolbar button:hover, .ren-toolbar [role="button"]:hover { background: var(--ren-toolbar-item-hover, var(--color-fill)); }
.ren-toolbar button[aria-pressed="true"], .ren-toolbar [data-state="on"] { background: var(--ren-toolbar-active-bg, var(--color-accent-subtle)); }
/* ============================================
   RenDS — DropZone Component
   ============================================
   Drag & drop file upload area.
   Minimal JS for drag events — CSS handles visuals.

   Uses native drag events, no library needed.

   Usage:
     <div class="ren-dropzone" data-accept=".jpg,.png,.pdf" data-max-size="5MB">
       <div class="ren-dropzone-content">
         <span class="ren-dropzone-icon">↑</span>
         <p class="ren-dropzone-title">Drop files here</p>
         <p class="ren-dropzone-description">or click to browse</p>
       </div>
       <input type="file" class="ren-dropzone-input" multiple accept=".jpg,.png,.pdf">
     </div>
   ============================================ */

.ren-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
  padding: var(--space-6);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-sunken);
  cursor: pointer;
  transition: var(--transition-tactile);
}

.ren-dropzone:hover {
  border-color: var(--color-accent);
  background-color: var(--color-accent-subtle);
}

/* Drag over state (set via JS: element.dataset.dragover = true) */
.ren-dropzone[data-dragover] {
  border-color: var(--color-accent);
  background-color: var(--color-accent-subtle);
  border-style: solid;
}

.ren-dropzone:focus-within {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: var(--ring-offset-width);
}

/* Hidden file input covers entire dropzone */
.ren-dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Content */
.ren-dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  pointer-events: none;
}

.ren-dropzone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  background-color: var(--color-fill);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-1);
}

.ren-dropzone[data-dragover] .ren-dropzone-icon {
  color: var(--color-accent);
  background-color: color-mix(in oklch, var(--color-accent), transparent 85%);
}

.ren-dropzone-title {
  font-size: var(--body-size);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.ren-dropzone-description {
  font-size: var(--caption-size, var(--text-sm));
  color: var(--color-text-muted);
}

/* ─── File list (after upload) ─── */
.ren-dropzone-files {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
}

.ren-dropzone-file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface-raised);
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--caption-size, var(--text-sm));
}

.ren-dropzone-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ren-dropzone-file-size {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.ren-dropzone-file-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
}

.ren-dropzone-file-remove:hover {
  color: var(--color-danger);
}

/* ─── Compact variant ─── */
.ren-dropzone-compact {
  min-height: auto;
  padding: var(--space-3) var(--space-4);
  flex-direction: row;
  gap: var(--space-3);
}

.ren-dropzone-compact .ren-dropzone-content {
  flex-direction: row;
}

.ren-dropzone-compact .ren-dropzone-icon {
  width: 2rem;
  height: 2rem;
  font-size: var(--text-base);
  margin-bottom: 0;
}

/* ─── Disabled ─── */
.ren-dropzone[aria-disabled="true"],
.ren-dropzone:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Error state ─── */
.ren-dropzone[data-error] {
  border-color: var(--color-danger);
}
/* Appearance API bridge */
.ren-dropzone { padding: var(--ren-dropzone-padding, var(--space-8)); border-radius: var(--ren-dropzone-radius, var(--radius-lg)); border-color: var(--ren-dropzone-border-color, var(--color-border-strong)); border-style: var(--ren-dropzone-border-style, dashed); border-width: var(--ren-dropzone-border-width, 2px); background: var(--ren-dropzone-bg, transparent); }
.ren-dropzone:hover, .ren-dropzone[data-drag-over] { background: var(--ren-dropzone-hover-bg, var(--color-accent-subtle)); border-color: var(--ren-dropzone-hover-border, var(--color-accent)); }
/* ============================================
   RenDS — Alert Dialog Component
   ============================================
   Confirmation dialog that blocks interaction.
   Extends native <dialog> like ren-dialog but:
   - No dismiss on outside click (::backdrop blocks)
   - No dismiss on Escape (optional)
   - Requires explicit action (confirm/cancel)

   Minimal JS: just showModal() and close().

   Usage:
     <dialog class="ren-alert-dialog" id="confirm">
       <div class="ren-alert-dialog-icon">⚠</div>
       <h2 class="ren-alert-dialog-title">Delete item?</h2>
       <p class="ren-alert-dialog-description">
         This action cannot be undone.
       </p>
       <div class="ren-alert-dialog-actions">
         <button class="ren-btn-secondary" onclick="this.closest('dialog').close('cancel')">
           Cancel
         </button>
         <button class="ren-btn-danger" onclick="this.closest('dialog').close('confirm')">
           Delete
         </button>
       </div>
     </dialog>

   Open: document.getElementById('confirm').showModal()
   Result: dialog.addEventListener('close', () => dialog.returnValue)
   ============================================ */

.ren-alert-dialog {
  container-type: inline-size;
  container-name: ren-alert-dialog;

  /* Structure */
  margin: auto;
  padding: var(--space-6);
  border: none;

  /* Sizing */
  max-width: 24rem;
  width: 90vw;

  /* Appearance */
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  text-align: center;

  /* Animation — semantic tokens keep this in sync with ren-dialog
     and respect prefers-reduced-motion via tokens/semantic/motion.css. */
  opacity: 1;
  transform: scale(1);
  transition:
    opacity   var(--duration-enter) var(--ease-enter),
    transform var(--duration-enter) var(--ease-enter),
    overlay   var(--duration-enter) var(--ease-enter) allow-discrete,
    display   var(--duration-enter) var(--ease-enter) allow-discrete;
}

/* Entry animation */
@starting-style {
  .ren-alert-dialog[open] {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Exit */
.ren-alert-dialog:not([open]) {
  opacity: 0;
  transform: scale(0.95);
}

/* Backdrop — shared overlay transition keeps all scrims in sync. */
.ren-alert-dialog::backdrop {
  background-color: var(--color-overlay);
  transition: var(--transition-overlay);
}

@starting-style {
  .ren-alert-dialog[open]::backdrop {
    opacity: 0;
  }
}

/* ─── Icon (optional) ─── */
.ren-alert-dialog-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-xl);
  height: var(--icon-xl);
  margin: 0 auto var(--space-3);
  font-size: var(--text-xl);
  background-color: var(--color-fill);
  border-radius: var(--radius-full);
}

/* Danger icon */
.ren-alert-dialog-icon-danger {
  background-color: var(--color-danger-subtle);
  color: var(--color-danger);
}

/* Warning icon */
.ren-alert-dialog-icon-warning {
  background-color: var(--color-warning-subtle);
  color: var(--color-warning);
}

/* ─── Title ─── */
.ren-alert-dialog-title {
  font-size: var(--title-sm-size, var(--text-lg));
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* ─── Description ─── */
.ren-alert-dialog-description {
  font-size: var(--body-size);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-5);
}

/* ─── Actions ─── */
.ren-alert-dialog-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

/* Stack actions when dialog is narrow */
@container ren-alert-dialog (max-width: 24rem) {
  .ren-alert-dialog-actions {
    flex-direction: column-reverse;
  }

  .ren-alert-dialog-actions > * {
    width: 100%;
  }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .ren-alert-dialog {
    transition: none;
  }
  .ren-alert-dialog::backdrop {
    transition: none;
  }
}
/* ============================================
   RenDS — Context Menu Component
   ============================================
   Right-click menu using Popover API.
   Reuses ren-menu styles for items.
   Minimal JS for right-click trigger + positioning.

   Usage:
     <div class="ren-context-menu-trigger" data-context="my-ctx-menu">
       Right-click this area
     </div>

     <div id="my-ctx-menu" class="ren-context-menu" popover>
       <button class="ren-menu-item">Cut</button>
       <button class="ren-menu-item">Copy</button>
       <button class="ren-menu-item">Paste</button>
       <hr class="ren-menu-separator">
       <button class="ren-menu-item ren-menu-item-danger">Delete</button>
     </div>
   ============================================ */

.ren-context-menu {
  /* Reset popover defaults */
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  inset: auto;

  /* Menu appearance (matches ren-menu) */
  background: var(--color-surface);
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding-block: var(--space-1);
  min-width: 10rem;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Position set by JS */
  position: fixed;

  /* Animation — semantic tokens keep context-menu in sync with
     ren-menu / ren-popover. Collapses to 0ms under reduce. */
  opacity: 0;
  transform: scale(0.95);
  transform-origin: top left;
  transition:
    opacity var(--duration-enter) var(--ease-enter),
    transform var(--duration-enter) var(--ease-enter),
    overlay var(--duration-enter) var(--ease-enter) allow-discrete,
    display var(--duration-enter) var(--ease-enter) allow-discrete;
}

.ren-context-menu:popover-open,
.ren-context-menu.ren-open {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  .ren-context-menu:popover-open {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* ─── Reuse menu item styles ─── */
/* Already defined in ren-menu.css:
   .ren-menu-item, .ren-menu-separator, etc.
   Import ren-menu.css alongside this file.
*/

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .ren-context-menu {
    transition: none;
  }
}
.ren-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ren-space-2, 0.5rem) var(--ren-space-4, 1rem);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  min-height: 3.5rem;
  transition: backdrop-filter var(--duration-overlay) var(--ease-state-change), background-color var(--duration-overlay) var(--ease-state-change);

  &[data-open] .ren-nav-links,
  &:has(.ren-nav-toggle[aria-expanded="true"]) .ren-nav-links {
    display: flex;
  }

  &.ren-nav-sticky {
    position: sticky;
    top: 0;
    z-index: var(--ren-z-sticky, 100);
    backdrop-filter: blur(8px);
    background-color: color-mix(in srgb, var(--color-surface) 95%, transparent);
  }

  &.ren-nav-transparent {
    background-color: transparent;
    border-bottom-color: transparent;
  }
}

.ren-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--ren-space-2, 0.5rem);
  font-weight: 600;
  font-size: var(--ren-title-sm-size, 1.125rem);
  color: var(--color-text);
  text-decoration: none;
  flex-shrink: 0;

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 0.375rem;
  }
}

.ren-nav-links {
  display: flex;
  align-items: center;
  gap: var(--ren-space-1, 0.25rem);
  list-style: none;
  margin: 0;
  padding: 0;

  @media (max-width: 48rem) {
    display: none;
    position: absolute;
    top: 3.5rem;
    inset-inline: 0;
    flex-direction: column;
    gap: 0;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--ren-space-2, 0.5rem) 0;
    animation: ren-nav-slide-down var(--duration-enter) var(--ease-enter);
    z-index: 1000;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }
}

@keyframes ren-nav-slide-down {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ren-nav-link {
  padding: var(--ren-space-2, 0.5rem) var(--ren-space-3, 0.75rem);
  color: var(--color-text-muted);
  font-size: var(--ren-label-size, 0.875rem);
  border-radius: 0.375rem;
  transition: background-color var(--duration-state) var(--ease-state-change), color var(--duration-state) var(--ease-state-change);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  &:hover {
    background-color: var(--color-fill);
    color: var(--color-text);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }

  &[aria-current="page"],
  &.active {
    color: var(--color-accent);
    font-weight: 500;
    background-color: var(--color-accent-subtle);
  }

  @media (max-width: 48rem) {
    padding: var(--ren-space-2, 0.5rem) var(--ren-space-4, 1rem);
    border-radius: 0;

    &:hover {
      background-color: var(--color-fill);
    }
  }
}

.ren-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--ren-space-2, 0.5rem);
  margin-inline-start: auto;
}

.ren-nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: none;
  border: none;
  padding: var(--ren-space-2, 0.5rem);
  cursor: pointer;
  color: var(--color-text);
  min-width: 44px;
  min-height: 44px;
  border-radius: 0.375rem;
  transition: background-color var(--duration-state) var(--ease-state-change);

  &:hover {
    background-color: var(--color-fill);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  & span {
    width: 1.5rem;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
    transition: transform var(--duration-route) var(--ease-state-change), opacity var(--duration-route) var(--ease-state-change);
    transform-origin: center;
  }

  &[aria-expanded="true"] {
    & span:nth-child(1) {
      transform: translateY(0.5rem) rotate(45deg);
    }

    & span:nth-child(2) {
      opacity: 0;
      transform: scaleX(0);
    }

    & span:nth-child(3) {
      transform: translateY(-0.5rem) rotate(-45deg);
    }
  }

  @media (max-width: 48rem) {
    display: flex;
  }
}

.ren-nav-dropdown {
  position: relative;

  & [popover] {
    padding: var(--ren-space-1, 0.25rem);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    margin-top: var(--ren-space-1, 0.25rem);
    list-style: none;
    padding-inline-start: 0;

    &[popover] {
      inset: auto auto auto auto;
    }
  }

  & .ren-nav-link[aria-expanded="true"] {
    background-color: var(--color-fill);
    color: var(--color-accent);
  }
}
/* Appearance API bridge */
.ren-nav { min-block-size: var(--ren-nav-height, 3.5rem); padding-inline: var(--ren-nav-padding-x, var(--space-4)); background: var(--ren-nav-bg, var(--color-surface)); border-color: var(--ren-nav-border, var(--color-border)); gap: var(--ren-nav-gap, var(--space-6)); }
.ren-nav a { color: var(--ren-nav-link-color, var(--color-text-muted)); }
.ren-nav a[aria-current="page"], .ren-nav a[data-active] { color: var(--ren-nav-link-active, var(--color-text)); }
.ren-sidebar-layout {
  display: flex;
  min-height: 100dvh;
  background-color: var(--color-surface);
}

.ren-sidebar {
  --sidebar-width: var(--ren-sidebar-width, 16rem);
  --sidebar-collapsed-width: var(--ren-sidebar-collapsed-width, 4rem);

  width: var(--sidebar-width);
  flex-shrink: 0;
  background-color: var(--color-surface-sunken);
  border-inline-end: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition: width var(--duration-enter) var(--ease-state-change), transform var(--duration-enter) var(--ease-state-change);
  overflow: hidden;
  z-index: 50;

  &[data-collapsed] {
    width: var(--sidebar-collapsed-width);

    & .ren-sidebar-item-text {
      opacity: 0;
      width: 0;
      overflow: hidden;
      transition: opacity var(--duration-enter) var(--ease-state-change), width var(--duration-enter) var(--ease-state-change);
    }

    & .ren-sidebar-section-label {
      opacity: 0;
      width: 0;
      overflow: hidden;
      transition: opacity var(--duration-enter) var(--ease-state-change), width var(--duration-enter) var(--ease-state-change);
    }

    & .ren-sidebar-item {
      justify-content: center;
      position: relative;

      &:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        inset-inline-start: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-inline-start: var(--ren-space-2, 0.5rem);
        padding: var(--ren-space-2, 0.5rem) var(--ren-space-3, 0.75rem);
        background-color: var(--color-text);
        color: var(--color-surface);
        border-radius: 0.375rem;
        font-size: var(--ren-caption-size, 0.75rem);
        white-space: nowrap;
        z-index: 1000;
        pointer-events: none;
      }
    }
  }

  @media (max-width: 48rem) {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    height: 100dvh;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--duration-enter) var(--ease-state-change);

    &[data-open] {
      transform: translateX(0);
      box-shadow: 4px 0 12px rgb(0 0 0 / 0.15);
    }

    &[data-collapsed] {
      transform: translateX(-100%);
      width: var(--sidebar-width);
    }
  }
}

.ren-sidebar-header {
  padding: var(--ren-space-3, 0.75rem) var(--ren-space-4, 1rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;

  @media (max-width: 48rem) {
    padding: var(--ren-space-3, 0.75rem) var(--ren-space-4, 1rem);
  }
}

.ren-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--ren-space-2, 0.5rem);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 3px;

    &:hover {
      background-color: var(--color-text-muted);
    }
  }
}

.ren-sidebar-footer {
  padding: var(--ren-space-3, 0.75rem) var(--ren-space-4, 1rem);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;

  @media (max-width: 48rem) {
    padding: var(--ren-space-3, 0.75rem) var(--ren-space-4, 1rem);
  }
}

.ren-sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ren-space-1, 0.25rem);
}

.ren-sidebar-section {
  margin-top: var(--ren-space-4, 1rem);

  &:first-child {
    margin-top: 0;
  }
}

.ren-sidebar-section-label {
  padding: var(--ren-space-1, 0.25rem) var(--ren-space-3, 0.75rem);
  font-size: var(--ren-caption-size, 0.75rem);
  font-weight: 600;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity var(--duration-enter) var(--ease-state-change);
  white-space: nowrap;
  overflow: hidden;
}

.ren-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--ren-space-3, 0.75rem);
  padding: var(--ren-space-2, 0.5rem) var(--ren-space-3, 0.75rem);
  border-radius: 0.375rem;
  color: var(--color-text-muted);
  font-size: var(--ren-label-size, 0.875rem);
  cursor: pointer;
  transition: background-color var(--duration-state) var(--ease-state-change), color var(--duration-state) var(--ease-state-change);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;

  &:hover {
    background-color: var(--color-fill);
    color: var(--color-text);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }

  &.active,
  &[aria-current="page"] {
    background-color: var(--color-accent-subtle);
    color: var(--color-accent);
    font-weight: 500;

    & .ren-sidebar-item-icon {
      color: var(--color-accent);
    }
  }

  &[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
}

.ren-sidebar-item-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition: color var(--duration-state) var(--ease-state-change);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ren-sidebar-item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--duration-enter) var(--ease-state-change), width var(--duration-enter) var(--ease-state-change);
}

.ren-sidebar-divider {
  height: 1px;
  background-color: var(--color-separator);
  margin: var(--ren-space-2, 0.5rem) 0;
}

.ren-sidebar-toggle {
  background: none;
  border: none;
  padding: var(--ren-space-2, 0.5rem);
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  border-radius: 0.375rem;
  transition: background-color var(--duration-state) var(--ease-state-change), color var(--duration-state) var(--ease-state-change);

  &:hover {
    background-color: var(--color-fill);
    color: var(--color-text);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  @media (max-width: 48rem) {
    display: none;
  }
}

.ren-sidebar-main {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 3px;

    &:hover {
      background-color: var(--color-text-muted);
    }
  }

  @media (max-width: 48rem) {
    margin-inline-start: 0;
  }
}

.ren-sidebar-overlay {
  position: fixed;
  inset: 0;
  background-color: rgb(0 0 0 / 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-enter) var(--ease-state-change);
  z-index: 40;

  @media (max-width: 48rem) {
    .ren-sidebar[data-open] ~ & {
      opacity: 1;
      pointer-events: auto;
    }
  }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-sidebar,
  .ren-sidebar * {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}
/* Appearance API bridge */
.ren-sidebar { inline-size: var(--ren-sidebar-width, 260px); background: var(--ren-sidebar-bg, var(--color-surface-sunken)); border-color: var(--ren-sidebar-border, var(--color-border)); transition-duration: var(--ren-sidebar-duration, var(--duration-normal)); transition-timing-function: var(--ren-sidebar-easing, var(--ease-out)); }
.ren-sidebar.is-collapsed, .ren-sidebar[data-collapsed="true"] { inline-size: var(--ren-sidebar-collapsed-width, 60px); }
.ren-sidebar a, .ren-sidebar button { min-block-size: var(--ren-sidebar-item-height, var(--size-lg)); padding: var(--ren-sidebar-item-padding, var(--space-2) var(--space-3)); border-radius: var(--ren-sidebar-item-radius, var(--radius-md)); }
.ren-sidebar a[aria-current="page"], .ren-sidebar a[data-active] { background: var(--ren-sidebar-active-bg, var(--color-accent-subtle)); color: var(--ren-sidebar-active-color, var(--color-accent)); }

@media (any-pointer: coarse), (pointer: coarse) {
  .ren-sidebar-toggle {
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
  }
}
.ren-command {
  position: fixed;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  max-width: 32rem;
  width: 100%;
  max-height: 24rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--ren-radius-xl, 0.75rem);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: var(--ren-z-modal, 1000);
  margin: auto;
  animation: ren-command-in var(--duration-enter) var(--ease-enter);

  @starting-style {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.98);
  }

  @media (max-width: 32rem) {
    width: calc(100% - 2rem);
    max-height: 18rem;
  }

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }

  &::backdrop {
    background-color: rgb(0 0 0 / 0.5);
    backdrop-filter: blur(4px);
    animation: ren-command-backdrop-in var(--duration-overlay) var(--ease-enter);

    @starting-style {
      background-color: rgb(0 0 0 / 0);
      backdrop-filter: blur(0);
    }

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }
}

@keyframes ren-command-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes ren-command-backdrop-in {
  from {
    background-color: rgb(0 0 0 / 0);
    backdrop-filter: blur(0);
  }

  to {
    background-color: rgb(0 0 0 / 0.5);
    backdrop-filter: blur(4px);
  }
}

.ren-command-input-wrapper {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding: var(--ren-space-2, 0.5rem) var(--ren-space-3, 0.75rem);
  gap: var(--ren-space-2, 0.5rem);
  flex-shrink: 0;

  & svg {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }
}

.ren-command-input {
  flex: 1;
  border: none;
  background-color: transparent;
  font-size: var(--ren-body-size, 0.875rem);
  color: var(--color-text);
  outline: none;
  padding: 0;
  font-family: inherit;

  &::placeholder {
    color: var(--color-text-muted);
  }

  &:autofill {
    box-shadow: inset 0 0 0 1000px var(--color-surface);
    -webkit-text-fill-color: var(--color-text);
  }
}

.ren-command-kbd {
  margin-inline-start: auto;
  display: flex;
  gap: var(--ren-space-1, 0.25rem);
  align-items: center;
  font-size: var(--ren-caption-size, 0.75rem);
  color: var(--color-text-muted);
  font-family: var(--ren-font-mono, 'Monaco', 'Menlo', monospace);
  white-space: nowrap;

  & kbd {
    padding: 0.125rem 0.375rem;
    background-color: var(--color-fill);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    font-size: inherit;
  }

  @media (max-width: 32rem) {
    display: none;
  }
}

.ren-command-list {
  overflow-y: auto;
  max-height: 18rem;
  padding: var(--ren-space-1, 0.25rem);
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 3px;

    &:hover {
      background-color: var(--color-text-muted);
    }
  }
}

.ren-command-group {
  margin-bottom: var(--ren-space-2, 0.5rem);
  overflow: hidden;

  &[data-empty] {
    display: none;
  }
}

.ren-command-group-heading {
  padding: var(--ren-space-1, 0.25rem) var(--ren-space-3, 0.75rem);
  font-size: var(--ren-caption-size, 0.75rem);
  font-weight: 600;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
}

.ren-command-item {
  display: flex;
  align-items: center;
  gap: var(--ren-space-3, 0.75rem);
  padding: var(--ren-space-2, 0.5rem) var(--ren-space-3, 0.75rem);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color var(--duration-state) var(--ease-state-change);
  user-select: none;
  background-color: transparent;
  border: none;
  width: 100%;
  text-align: start;
  font-family: inherit;

  &:hover {
    background-color: var(--color-fill);
  }

  &:active {
    background-color: var(--color-fill-hover);
  }

  &[data-highlighted] {
    background-color: var(--color-fill);
  }

  &[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  &:focus-visible {
    outline: none;
    background-color: var(--color-fill);
  }
}

.ren-command-item-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);

  & svg {
    width: 100%;
    height: 100%;
  }
}

.ren-command-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.ren-command-item-title {
  font-size: var(--ren-body-size, 0.875rem);
  color: var(--color-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ren-command-item-description {
  font-size: var(--ren-caption-size, 0.75rem);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ren-command-item-shortcut {
  margin-inline-start: auto;
  display: flex;
  gap: var(--ren-space-1, 0.25rem);
  font-family: var(--ren-font-mono, 'Monaco', 'Menlo', monospace);
  font-size: var(--ren-caption-size, 0.75rem);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;

  @media (max-width: 40rem) {
    display: none;
  }
}

.ren-command-separator {
  height: 1px;
  background-color: var(--color-separator);
  margin: var(--ren-space-1, 0.25rem) 0;
}

.ren-command-empty {
  padding: var(--ren-space-8, 2rem);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--ren-body-size, 0.875rem);
}

.ren-command-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--ren-space-2, 0.5rem);
  display: flex;
  gap: var(--ren-space-4, 1rem);
  font-size: var(--ren-caption-size, 0.75rem);
  color: var(--color-text-muted);
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: center;

  @media (max-width: 32rem) {
    padding: var(--ren-space-1, 0.25rem) var(--ren-space-2, 0.5rem);
    gap: var(--ren-space-2, 0.5rem);
  }
}

.ren-command-footer-hint {
  display: flex;
  gap: var(--ren-space-1, 0.25rem);
  align-items: center;

  & kbd {
    padding: 0.125rem 0.375rem;
    background-color: var(--color-fill);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    font-size: inherit;
    font-family: var(--ren-font-mono, 'Monaco', 'Menlo', monospace);
  }
}
/* Appearance API bridge */
.ren-command { inline-size: var(--ren-command-width, min(95vw, 560px)); max-block-size: var(--ren-command-max-height, 340px); border-radius: var(--ren-command-radius, var(--radius-xl)); background: var(--ren-command-bg, var(--color-surface-overlay)); border-color: var(--ren-command-border, var(--color-border)); box-shadow: var(--ren-command-shadow, var(--shadow-xl)); }
.ren-command [role="option"], .ren-command-item { min-block-size: var(--ren-command-item-height, var(--size-lg)); border-radius: var(--ren-command-item-radius, var(--radius-md)); }
/**
 * RenDS — Data Table Organism
 * ============================
 *
 * A comprehensive, accessible data table component supporting:
 * - Sortable columns with directional indicators
 * - Row selection with multi-select and shift+click range selection
 * - Client-side pagination with configurable page size
 * - Keyboard navigation (arrow keys, Enter, Space)
 * - Column resizing via drag handle
 * - Pinned/sticky columns and headers
 * - Multiple density variants (compact, comfortable)
 * - Loading states with skeleton shimmer
 * - Empty state messaging
 * - Responsive horizontal scrolling
 * - Search/filter toolbar integration
 * - Full ARIA support for accessibility
 *
 * @example
 * <ren-table data-page-size="10">
 *   <div class="ren-table-toolbar">
 *     <input class="ren-input ren-input-sm" placeholder="Search..." data-table-search>
 *   </div>
 *   <div class="ren-table-wrapper">
 *     <table class="ren-table">
 *       <thead class="ren-table-header">
 *         <tr>
 *           <th class="ren-th ren-table-select"><input type="checkbox" aria-label="Select all"></th>
 *           <th class="ren-th ren-th-sortable" data-column="name">Name</th>
 *         </tr>
 *       </thead>
 *       <tbody class="ren-table-body">
 *         <tr class="ren-tr" data-row-id="1">
 *           <td class="ren-td ren-table-select"><input type="checkbox" aria-label="Select row"></td>
 *           <td class="ren-td">John Doe</td>
 *         </tr>
 *       </tbody>
 *     </table>
 *   </div>
 *   <div class="ren-table-pagination"></div>
 * </ren-table>
 */

/* ===== Base Table Structure ===== */

ren-table {
  container-type: inline-size;
  container-name: ren-table;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.ren-table-wrapper {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;

  &::-webkit-scrollbar {
    height: 8px;
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-state) var(--ease-enter);

    &:hover {
      background-color: var(--color-text-muted);
    }
  }
}

.ren-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-surface);
  font-size: var(--body-size);
  color: var(--color-text);
}

/* ===== Header Styles ===== */

.ren-table-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--color-surface-raised);
}

.ren-table-header tr {
  border-bottom: 1px solid var(--color-border);
}

.ren-th {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  font-weight: var(--label-weight);
  font-size: var(--label-size);
  color: var(--color-text);
  user-select: none;
  white-space: nowrap;
  background-color: var(--color-surface-raised);
  border-inline-end: 1px solid var(--color-border);
  height: 44px;
  display: table-cell;
  vertical-align: middle;

  &:last-child {
    border-inline-end: none;
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }
}

.ren-th-sortable {
  cursor: pointer;
  position: relative;
  transition: background-color var(--duration-tactile) var(--ease-enter);

  &:hover {
    background-color: var(--color-fill);
  }

  &::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-inline-start: var(--space-2);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none"><path d="M3 8L6 5l3 3M3 4L6 7l3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
    transition: opacity var(--duration-tactile) var(--ease-enter), transform var(--duration-tactile) var(--ease-enter);
    vertical-align: middle;
    color: var(--color-text-muted);
  }

  &[data-sort="asc"]::after {
    opacity: 1;
    transform: scaleY(1);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none"><path d="M6 2v6M3 5l3-3 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  }

  &[data-sort="desc"]::after {
    opacity: 1;
    transform: scaleY(-1);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none"><path d="M6 2v6M3 5l3-3 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  }
}

.ren-th-resize {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  height: 100%;
  width: 4px;
  cursor: col-resize;
  user-select: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  transition: background-color var(--duration-tactile) var(--ease-enter);

  &:hover,
  &:active {
    background-color: var(--color-accent);
  }
}

/* Pinned columns */
.ren-th-pinned {
  position: sticky;
  z-index: 11;
}

/* ===== Body & Row Styles ===== */

.ren-table-body {
  background-color: var(--color-surface);
}

.ren-tr {
  border-bottom: var(--stroke-1) solid var(--color-border);
  transition: background-color var(--duration-tactile) var(--ease-enter);
  height: 44px;

  &:nth-child(even) {
    background-color: var(--color-fill);
  }

  &:hover {
    background-color: var(--color-fill-hover);
  }

  &[aria-selected="true"] {
    background-color: var(--color-accent-subtle);

    .ren-td {
      background-color: var(--color-accent-subtle);
    }
  }

  &:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: -1px;
  }
}

.ren-td {
  padding: var(--space-3) var(--space-4);
  border-inline-end: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
  height: 44px;

  &:last-child {
    border-inline-end: none;
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }
}

/* Pinned column cells */
.ren-td-pinned {
  position: sticky;
  z-index: 9;
  background-color: inherit;
}

/* ===== Selection Styles ===== */

.ren-table-select {
  width: var(--space-10);
  padding: var(--space-3);
  text-align: center;

  input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-accent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-tactile) var(--ease-enter),
                border-color var(--duration-tactile) var(--ease-enter);

    &:hover:not(:disabled) {
      border-color: var(--color-accent);
    }

    &:checked {
      background-color: var(--color-accent);
      border-color: var(--color-accent);
      color: var(--color-on-accent);
    }

    &:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}

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

.ren-table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
  font-size: var(--caption-size);
  color: var(--color-text-muted);
  gap: var(--space-4);

  &:empty {
    display: none;
  }
}

.ren-table-pagination-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--body-size);
  color: var(--color-text);
}

.ren-table-pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ren-table-pagination-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: var(--space-2);
  background-color: var(--color-fill);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--body-size);
  cursor: pointer;
  transition: background-color var(--duration-tactile) var(--ease-enter),
              border-color var(--duration-tactile) var(--ease-enter);
  user-select: none;
  min-width: 44px;
  min-height: 44px;

  &:hover:not(:disabled) {
    background-color: var(--color-fill-hover);
    border-color: var(--color-accent);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-fill);
  }
}

/* ===== Toolbar Styles ===== */

.ren-table-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;

  &:empty {
    display: none;
  }
}

.ren-table-toolbar-search {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

/* ===== Empty State ===== */

.ren-table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  gap: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  min-height: 200px;

  .ren-table-empty-icon {
    font-size: 40px;
    opacity: 0.4;
  }

  .ren-table-empty-title {
    font-size: var(--label-size);
    font-weight: var(--label-weight);
    color: var(--color-text);
  }

  .ren-table-empty-description {
    font-size: var(--caption-size);
    color: var(--color-text-muted);
    max-width: 300px;
  }
}

/* ===== Loading State ===== */

ren-table[data-loading] {
  .ren-table-body {
    position: relative;
  }

  .ren-tr {
    opacity: 0.5;
    pointer-events: none;
  }
}

.ren-table-loading-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255, 255, 255, 0.4),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  z-index: 20;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* ===== Density Variants ===== */

.ren-table-compact {
  .ren-th,
  .ren-td {
    padding: var(--space-2) var(--space-3);
    height: 32px;
  }

  .ren-tr {
    height: 32px;
  }
}

.ren-table-comfortable {
  .ren-th,
  .ren-td {
    padding: var(--space-4) var(--space-5);
    height: 56px;
  }

  .ren-tr {
    height: 56px;
  }
}

/* ===== Responsive Design (Container Query) ===== */

@container ren-table (max-width: 600px) {
  .ren-table {
    min-width: 600px;
  }

  .ren-table-pagination {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .ren-table-pagination-info {
    width: 100%;
  }

  .ren-table-pagination-controls {
    width: 100%;
    justify-content: space-between;
  }

  .ren-table-toolbar {
    flex-direction: column;
  }

  .ren-table-toolbar-search {
    min-width: 100%;
    max-width: 100%;
  }
}

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

/* High contrast mode support */
@media (prefers-contrast: more) {
  .ren-th {
    border: 1px solid var(--color-text);
  }

  .ren-td {
    border: var(--stroke-1) solid var(--color-text);
  }

  .ren-th-sortable:hover {
    background-color: var(--color-text);
    color: var(--color-surface);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .ren-tr,
  .ren-th-sortable,
  .ren-table-pagination-button,
  .ren-table-select input[type="checkbox"] {
    transition: none;
  }

  .ren-table-loading-overlay {
    animation: none;
    background: rgb(255, 255, 255, 0.2);
  }
}

/* Dark mode support (if light/dark theming is used) */
@media (prefers-color-scheme: dark) {
  .ren-table {
    /* Uses CSS custom properties from design tokens */
    /* No additional overrides needed if tokens are properly defined */
  }
}
/* Appearance API bridge */
.ren-table { font-size: var(--ren-table-header-size, var(--body-size)); }
.ren-table thead { background: var(--ren-table-header-bg, var(--color-surface-sunken)); color: var(--ren-table-header-color, var(--color-text-muted)); font-weight: var(--ren-table-header-weight, var(--weight-semibold)); }
.ren-table tr { min-block-size: var(--ren-table-row-height, var(--size-lg)); block-size: var(--ren-table-row-height, var(--size-lg)); }
.ren-table th, .ren-table td { padding: var(--ren-table-cell-padding, var(--space-3)); }
.ren-table { border-color: var(--ren-table-border-color, var(--color-border-muted)); }
.ren-table tbody tr:nth-child(even) { background: var(--ren-table-stripe-bg, var(--color-surface-sunken)); }
.ren-table tbody tr:hover { background: var(--ren-table-hover-bg, var(--color-fill)); }
.ren-table tbody tr[aria-selected="true"], .ren-table tbody tr[data-selected] { background: var(--ren-table-selected-bg, var(--color-accent-subtle)); }
/* ============================================
   RenDS — Form Validation System Organism
   ============================================
   Multi-step form with field validation,
   error summaries, and accessibility features.

   Includes:
   - Form container with field stack layout
   - Section grouping and horizontal rows
   - Error summary boxes (CSS shown/hidden)
   - Multi-step progress indicators
   - Loading/submitting states
   - Responsive design

   Light DOM — no Shadow DOM.
   ============================================ */

/* ─── Form Container ─── */
.ren-form {
  container-type: inline-size;
  container-name: ren-form;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  max-width: 100%;
}

/* Submitting state — disable interactions */
.ren-form[data-submitting] {
  opacity: 0.6;
  pointer-events: none;
}

/* ─── Error Summary ─── */
.ren-form-error-summary {
  padding: var(--space-4);
  background-color: var(--color-danger-subtle);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  transition: all var(--duration-enter) var(--ease-enter);
}

.ren-form-error-summary[hidden],
.ren-form-error-summary:not([data-has-errors]) {
  display: none;
}

.ren-form-error-summary strong {
  display: block;
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--color-danger);
  margin-bottom: var(--space-2);
}

.ren-form-error-summary ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ren-form-error-summary li {
  font-size: var(--caption-size);
  color: var(--color-danger);
  line-height: var(--leading-normal);
}

.ren-form-error-summary a {
  color: var(--color-danger);
  text-decoration: underline;
  cursor: pointer;
}

.ren-form-error-summary a:hover {
  text-decoration: none;
}

/* ─── Success Message ─── */
.ren-form-success {
  padding: var(--space-4);
  background-color: var(--color-success-subtle);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-md);
  font-size: var(--body-sm-size);
  color: var(--color-success);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: all var(--duration-enter) var(--ease-enter);
}

.ren-form-success[hidden] {
  display: none;
}

/* ─── Form Sections ─── */
.ren-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ren-form-section-title {
  font-size: var(--title-sm-size);
  font-weight: var(--title-sm-weight);
  color: var(--color-text);
  margin: 0;
  padding: 0;
  line-height: var(--title-sm-leading);
}

/* ─── Form Row (Horizontal Layout) ─── */
.ren-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.ren-form-row > .ren-field {
  flex: 1;
  min-width: 250px;
}

/* Stack on narrow containers */
@container ren-form (max-width: 480px) {
  .ren-form-row {
    flex-direction: column;
    gap: var(--space-4);
  }

  .ren-form-row > .ren-field {
    min-width: 100%;
    flex: none;
  }
}

/* ─── Form Actions ─── */
.ren-form-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.ren-form-actions button {
  white-space: nowrap;
}

@container ren-form (max-width: 480px) {
  .ren-form-actions {
    flex-direction: column-reverse;
  }

  .ren-form-actions button {
    width: 100%;
  }
}

/* ─── Multi-Step Progress Indicator ─── */
.ren-form-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.ren-form-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Step circle */
.ren-form-step::before {
  content: attr(data-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  transition: all var(--duration-state) var(--ease-enter);
  border: 2px solid transparent;
}

/* Step label */
.ren-form-step-label {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: all var(--duration-state) var(--ease-enter);
}

/* Divider between steps */
.ren-form-step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 2px;
  background-color: var(--color-border);
  min-width: 1rem;
  transition: background-color var(--duration-state) var(--ease-enter);
}

/* Active step */
.ren-form-step[data-active] {
  /* Step circle */
}

.ren-form-step[data-active]::before {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.ren-form-step[data-active] .ren-form-step-label {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

/* Completed step */
.ren-form-step[data-completed] {
  /* Step circle */
}

.ren-form-step[data-completed]::before {
  background-color: var(--color-success);
  color: var(--color-on-success);
  border-color: var(--color-success);
  content: '✓';
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
}

.ren-form-step[data-completed] .ren-form-step-label {
  color: var(--color-text-muted);
}

/* Divider after completed step is colored */
.ren-form-step[data-completed]:not(:last-child)::after {
  background-color: var(--color-success);
}

/* ─── Disabled step ─── */
.ren-form-step[data-disabled] {
  pointer-events: none;
}

.ren-form-step[data-disabled]::before {
  background-color: var(--color-fill);
  color: var(--color-text-faint);
  opacity: 0.5;
}

.ren-form-step[data-disabled] .ren-form-step-label {
  color: var(--color-text-faint);
  opacity: 0.5;
}

/* Stack steps vertically on narrow containers */
@container ren-form (max-width: 360px) {
  .ren-form-progress {
    flex-direction: column;
    gap: var(--space-3);
  }

  .ren-form-step:not(:last-child)::after {
    content: '';
    width: 2px;
    height: 1.5rem;
    background-color: var(--color-border);
    min-width: 0;
  }
}

/* ─── Smooth focus management ─── */
.ren-form:has(.ren-field[data-invalid]) {
  scroll-behavior: smooth;
}

/* ─── Animation for error entry ─── */
@keyframes slideInError {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ren-form-error-summary[data-has-errors] {
  animation: slideInError var(--duration-enter) var(--ease-enter);
}

@media (prefers-reduced-motion: reduce) {
  .ren-form-error-summary[data-has-errors],
  .ren-form-step::before,
  .ren-form-step-label,
  .ren-form-step:not(:last-child)::after {
    animation: none;
    transition: none;
  }
}
/* Appearance API bridge delegates field chrome to the primitive family. */
.ren-form input, .ren-form select, .ren-form textarea { min-block-size: var(--ren-field-height, var(--size-lg)); padding-inline: var(--ren-field-padding-x, var(--space-3)); padding-block: var(--ren-field-padding-y, var(--space-2)); font-size: var(--ren-field-font-size, var(--body-size)); border-radius: var(--ren-field-radius, var(--radius-md)); border: var(--ren-field-border-width, var(--stroke-1)) solid var(--ren-field-border-color, var(--color-border-interactive)); background: var(--ren-field-bg, var(--color-input-bg)); color: var(--ren-field-color, var(--color-text)); }
.ren-form input::placeholder, .ren-form textarea::placeholder { color: var(--ren-field-placeholder, var(--color-input-placeholder)); }
.ren-form input:focus, .ren-form select:focus, .ren-form textarea:focus { border-color: var(--ren-field-focus-color, var(--color-input-border-focus)); }
.ren-form [aria-invalid="true"] { border-color: var(--ren-field-error-color, var(--color-input-error-border)); }
.ren-form [aria-invalid="false"] { border-color: var(--ren-field-success-color, var(--color-success)); }
/**
 * RenDS Menubar
 * Horizontal menu bar component (File, Edit, View, etc.)
 *
 * Implements WAI-ARIA Menubar pattern with keyboard navigation,
 * roving focus, submenu support, and checkbox/radio items.
 *
 * Classes:
 * - .ren-menubar: Root horizontal menu bar
 * - .ren-menubar-trigger: Top-level menu button
 * - .ren-menubar-menu: Dropdown menu panel
 * - .ren-menubar-item: Individual menu item
 * - .ren-menubar-separator: Divider between item groups
 * - .ren-menubar-shortcut: Keyboard shortcut indicator
 * - .ren-menubar-label: Non-interactive group label
 * - .ren-menubar-submenu: Submenu with chevron
 * - .ren-menubar-checkbox: Checkbox menu item
 * - .ren-menubar-radio: Radio menu item
 */

/* =================================================================
   ROOT MENUBAR
   ================================================================= */

.ren-menubar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

/* =================================================================
   MENUBAR TRIGGER (Top-level Menu Button)
   ================================================================= */

.ren-menubar-trigger {
  position: relative;
  padding: var(--space-1) var(--space-2);
  background-color: transparent;
  color: var(--color-text);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--body-size);
  font-weight: var(--label-weight);
  cursor: pointer;
  transition: background-color var(--duration-tactile) var(--ease-enter);
  white-space: nowrap;
}

.ren-menubar-trigger:hover:not([aria-expanded="true"]) {
  background-color: var(--color-fill-hover);
}

.ren-menubar-trigger[aria-expanded="true"] {
  background-color: var(--color-fill-active);
  color: var(--color-text);
}

.ren-menubar-trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.ren-menubar-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =================================================================
   MENUBAR MENU (Dropdown Panel)
   ================================================================= */

.ren-menubar-menu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  margin-top: var(--space-1);
  min-width: 200px;
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Visible state for menu open */
.ren-menubar-menu:not([hidden]) {
  display: flex;
  animation: menubar-menu-open var(--duration-exit) var(--ease-enter);
}

/* Hidden state for menu closed */
.ren-menubar-menu[hidden] {
  display: none;
  animation: menubar-menu-close var(--duration-exit) var(--ease-enter);
}

@starting-style {
  .ren-menubar-menu:not([hidden]) {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes menubar-menu-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes menubar-menu-close {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* =================================================================
   MENUBAR ITEM (Menu Item)
   ================================================================= */

.ren-menubar-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background-color: transparent;
  color: var(--color-text);
  border: none;
  font-size: var(--body-size);
  font-weight: normal;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--duration-tactile) var(--ease-enter);
  position: relative;
  gap: var(--space-2);
}

.ren-menubar-item:hover:not([data-disabled]) {
  background-color: var(--color-fill-hover);
}

.ren-menubar-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.ren-menubar-item[data-disabled] {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.ren-menubar-item[data-disabled]:hover {
  background-color: transparent;
}

/* =================================================================
   MENUBAR SHORTCUT (Keyboard Shortcut Indicator)
   ================================================================= */

.ren-menubar-shortcut {
  display: inline-block;
  margin-inline-start: auto;
  padding-inline-start: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--caption-size);
  font-family: monospace;
  flex-shrink: 0;
}

/* =================================================================
   MENUBAR SEPARATOR (Divider)
   ================================================================= */

.ren-menubar-separator {
  height: 1px;
  background-color: var(--color-separator);
  margin: var(--space-1) 0;
}

/* =================================================================
   MENUBAR LABEL (Group Label)
   ================================================================= */

.ren-menubar-label {
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
  pointer-events: none;
}

/* =================================================================
   MENUBAR SUBMENU (With Chevron)
   ================================================================= */

.ren-menubar-submenu {
  position: relative;
}

/* Chevron indicator via ::after */
.ren-menubar-submenu::after {
  content: '›';
  display: inline-block;
  margin-inline-start: auto;
  padding-inline-start: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--body-size);
  flex-shrink: 0;
}

/* Submenu panel positioning (higher z-index for layering) */
.ren-menubar-submenu > .ren-menubar-menu {
  top: 0;
  inset-inline-start: calc(100% + var(--space-1));
  margin-top: 0;
  z-index: 1100;
}

/* =================================================================
   MENUBAR CHECKBOX (Checkbox Menu Item)
   ================================================================= */

.ren-menubar-checkbox {
  position: relative;
}

/* Checkmark via ::before */
.ren-menubar-checkbox::before {
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin-inline-end: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: transparent;
  flex-shrink: 0;
}

.ren-menubar-checkbox[aria-checked="true"]::before {
  content: '✓';
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.75em;
  font-weight: bold;
}

/* =================================================================
   MENUBAR RADIO (Radio Menu Item)
   ================================================================= */

.ren-menubar-radio {
  position: relative;
}

/* Radio indicator via ::before */
.ren-menubar-radio::before {
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin-inline-end: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background-color: transparent;
  flex-shrink: 0;
}

.ren-menubar-radio[aria-checked="true"]::before {
  content: '';
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-surface-raised);
}

/* =================================================================
   ACCESSIBILITY & INTERACTION STATES
   ================================================================= */

/* Hover fill for interactive items */
.ren-menubar-item:not([data-disabled]):not(.ren-menubar-label) {
  user-select: none;
}

/* Focus management for submenus */
.ren-menubar-menu [role="menuitem"]:focus-visible,
.ren-menubar-menu [role="menuitemcheckbox"]:focus-visible,
.ren-menubar-menu [role="menuitemradio"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Ensure disabled items don't respond to pointer events */
.ren-menubar-item[data-disabled] {
  pointer-events: none;
}

/* Active/selected state */
.ren-menubar-item.is-focused {
  background-color: var(--color-fill-hover);
}

/* =================================================================
   MEDIA QUERIES & RESPONSIVE
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  .ren-menubar-trigger,
  .ren-menubar-item,
  .ren-menubar-menu {
    transition: none;
    animation: none;
  }
}
/* ============================================
   RenDS — Empty State Pattern
   ============================================
   Reusable pattern for empty/no-data states.
   CSS-only. No JS needed.

   Use inside any data container (table, list,
   card) when there's nothing to display.

   Inspired by Polaris: every data component
   should have a documented empty state.

   Usage:
     <div class="ren-empty-state">
       <div class="ren-empty-state-icon">📦</div>
       <h3 class="ren-empty-state-title">No products yet</h3>
       <p class="ren-empty-state-description">
         Add your first product to get started.
       </p>
       <div class="ren-empty-state-actions">
         <button class="ren-btn">Add product</button>
       </div>
     </div>

   Compact (inline):
     <div class="ren-empty-state ren-empty-state-compact">
       <p class="ren-empty-state-description">No results found.</p>
     </div>
   ============================================ */

.ren-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8) var(--space-4);
  max-width: 28rem;
  margin-inline: auto;
}

/* ─── Icon / Illustration ─── */
.ren-empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  font-size: var(--text-3xl);
  color: var(--color-text-muted);
  background-color: var(--color-fill);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

/* ─── Title ─── */
.ren-empty-state-title {
  font-size: var(--title-sm-size, var(--text-lg));
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* ─── Description ─── */
.ren-empty-state-description {
  font-size: var(--body-size);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-4);
  max-width: var(--width-prose);
}

.ren-empty-state-description:last-child {
  margin-bottom: 0;
}

/* ─── Actions ─── */
.ren-empty-state-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

/* ─── Compact variant (for inline empty states) ─── */
.ren-empty-state-compact {
  padding: var(--space-6) var(--space-4);
}

.ren-empty-state-compact .ren-empty-state-icon {
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.ren-empty-state-compact .ren-empty-state-title {
  font-size: var(--body-size);
}

.ren-empty-state-compact .ren-empty-state-description {
  font-size: var(--caption-size, var(--text-sm));
}

/* ─── Bordered variant (for use inside cards/tables) ─── */
.ren-empty-state-bordered {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  margin: var(--space-4);
}
/* Appearance API bridge */
.ren-empty-state { max-inline-size: var(--ren-empty-max-width, 24rem); padding: var(--ren-empty-padding, var(--space-10)); gap: var(--ren-empty-gap, var(--space-3)); }
.ren-empty-state .ren-empty-state-icon { inline-size: var(--ren-empty-icon-size, 3rem); block-size: var(--ren-empty-icon-size, 3rem); }
.ren-empty-state h1, .ren-empty-state h2, .ren-empty-state h3 { font-size: var(--ren-empty-title-size, var(--title-sm-size)); }
.ren-empty-state p { color: var(--ren-empty-desc-color, var(--color-text-muted)); }
/* ============================================
   RenDS — Carbon for AI Patterns
   ============================================
   Design patterns for AI-generated content.
   Inspired by IBM Carbon for AI.

   Components:
   - AI Message bubble (streaming + complete)
   - AI Typing indicator
   - AI Citation / Source reference
   - AI Confidence indicator
   - AI Regenerate action
   - AI Prompt input
   - AI Slug (inline AI label)

   All CSS-only where possible, minimal JS for
   streaming text animation.
   ============================================ */

/* ═══════════════════════════════════════════════
   AI SLUG — Inline "AI" label
   ═══════════════════════════════════════════════ */
.ren-ai-slug {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--caption-sm-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ai);
  background: color-mix(in srgb, var(--color-ai) 10%, transparent);
  border-radius: var(--radius-sm);
  line-height: 1;
}

.ren-ai-slug::before {
  content: '✦';
  font-size: 0.75em;
}

/* ═══════════════════════════════════════════════
   AI MESSAGE — Chat bubble for AI responses
   ═══════════════════════════════════════════════ */
.ren-ai-message {
  position: relative;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-ai-subtle) 70%, var(--color-surface-raised));
  border: var(--stroke-1) solid var(--color-border);
  line-height: var(--leading-relaxed);
}

.ren-ai-message-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--label-size);
}

.ren-ai-message-content {
  font-size: var(--body-size);
  color: var(--color-text);
}

.ren-ai-message-content p:last-child {
  margin-bottom: 0;
}

.ren-ai-message-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--stroke-1) solid var(--color-border-muted);
  font-size: var(--caption-size);
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════
   AI STREAMING — Typing animation
   ═══════════════════════════════════════════════ */
.ren-ai-streaming .ren-ai-message-content::after {
  content: '▊';
  display: inline;
  animation: ren-ai-blink 0.8s step-end infinite;
  color: var(--color-ai);
  margin-inline-start: 1px;
}

@keyframes ren-ai-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ren-ai-streaming .ren-ai-message-content::after {
    animation: none;
    opacity: 0.7;
  }
}

/* ═══════════════════════════════════════════════
   AI TYPING INDICATOR — "AI is thinking..."
   ═══════════════════════════════════════════════ */
.ren-ai-typing {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--caption-size);
  color: var(--color-text-muted);
}

.ren-ai-typing-dots {
  display: inline-flex;
  gap: 3px;
}

.ren-ai-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-ai);
  animation: ren-ai-dot-bounce 1.4s ease-in-out infinite;
}

.ren-ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ren-ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ren-ai-dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-4px); opacity: 1; }
}

@keyframes ren-ai-dot-fade {
  0%, 80%, 100% { opacity: 0.3; }
  40%           { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ren-ai-typing-dots span {
    animation: ren-ai-dot-fade 1.4s ease-in-out infinite;
  }
}

/* ═══════════════════════════════════════════════
   AI CITATION — Source reference
   ═══════════════════════════════════════════════ */
.ren-ai-citation {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--caption-sm-size);
  font-weight: var(--weight-medium);
  color: var(--color-ai);
  background: color-mix(in srgb, var(--color-ai) 8%, transparent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-tactile) var(--ease-enter);
  vertical-align: super;
  line-height: 1;
}

.ren-ai-citation:hover {
  background: color-mix(in srgb, var(--color-ai) 14%, transparent);
}

/* Citation list at bottom of message */
.ren-ai-sources {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--stroke-1) solid var(--color-border-muted);
}

.ren-ai-source {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  font-size: var(--caption-size);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--duration-tactile) var(--ease-enter);
}

.ren-ai-source:hover {
  background: var(--color-fill);
}

.ren-ai-source-number {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--caption-sm-size);
  font-weight: var(--weight-bold);
  color: var(--color-ai);
  background: color-mix(in srgb, var(--color-ai) 10%, transparent);
  border-radius: var(--radius-sm);
}

.ren-ai-source-title {
  font-weight: var(--weight-medium);
}

.ren-ai-source-url {
  color: var(--color-text-muted);
  font-size: var(--caption-sm-size);
}

/* ═══════════════════════════════════════════════
   AI CONFIDENCE — Certainty indicator
   ═══════════════════════════════════════════════ */
.ren-ai-confidence {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--caption-size);
  color: var(--color-text-muted);
}

.ren-ai-confidence-bar {
  width: 3rem;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-fill);
  overflow: hidden;
}

.ren-ai-confidence-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--duration-state) var(--ease-enter);
}

.ren-ai-confidence[data-level="high"] .ren-ai-confidence-fill {
  width: 100%;
  background: var(--color-success);
}

.ren-ai-confidence[data-level="medium"] .ren-ai-confidence-fill {
  width: 66%;
  background: var(--color-warning);
}

.ren-ai-confidence[data-level="low"] .ren-ai-confidence-fill {
  width: 33%;
  background: var(--color-danger);
}

/* ═══════════════════════════════════════════════
   AI ACTIONS — Regenerate, Copy, Feedback
   ═══════════════════════════════════════════════ */
.ren-ai-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ren-ai-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--caption-size);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-tactile) var(--ease-enter);
  min-height: var(--size-sm);
}

.ren-ai-action:hover {
  color: var(--color-text);
  background: var(--color-fill);
}

.ren-ai-action:active {
  transform: scale(0.95);
}

.ren-ai-action[data-active="true"] {
  color: var(--color-ai);
}

/* Feedback buttons (thumbs up/down) */
.ren-ai-action-thumbs {
  display: inline-flex;
  gap: 0;
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ren-ai-action-thumbs .ren-ai-action {
  border-radius: 0;
  padding: var(--space-1) var(--space-2);
}

.ren-ai-action-thumbs .ren-ai-action + .ren-ai-action {
  border-inline-start: var(--stroke-1) solid var(--color-border);
}

/* ═══════════════════════════════════════════════
   AI PROMPT INPUT — Chat-style input
   ═══════════════════════════════════════════════ */
.ren-ai-prompt {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  transition: border-color var(--duration-tactile) var(--ease-enter);
}

.ren-ai-prompt:focus-within {
  border-color: var(--color-ai);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ai) 15%, transparent);
}

.ren-ai-prompt-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--body-size);
  color: var(--color-text);
  resize: none;
  outline: none;
  min-height: 1.5rem;
  max-height: 8rem;
  field-sizing: content;
  line-height: var(--leading-normal);
}

.ren-ai-prompt-input::placeholder {
  color: var(--color-text-muted);
}

.ren-ai-prompt-send {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-md);
  height: var(--size-md);
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-ai);
  color: var(--color-on-ai);
  cursor: pointer;
  transition: all var(--duration-tactile) var(--ease-enter);
  font-size: var(--text-lg);
}

.ren-ai-prompt-send:hover {
  background: var(--color-ai-hover);
  transform: scale(1.05);
}

.ren-ai-prompt-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* ═══════════════════════════════════════════════
   AI SKELETON — Loading placeholder for AI
   ═══════════════════════════════════════════════ */
.ren-ai-skeleton {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-ai-subtle) 55%, var(--color-surface-raised));
  border: var(--stroke-1) solid var(--color-border-muted);
}

.ren-ai-skeleton-line {
  height: 0.875rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-fill) 25%,
    color-mix(in srgb, var(--color-ai) 6%, var(--color-fill)) 50%,
    var(--color-fill) 75%
  );
  background-size: 200% 100%;
  animation: ren-ai-shimmer 1.5s ease-in-out infinite;
}

.ren-ai-skeleton-line + .ren-ai-skeleton-line {
  margin-top: var(--space-2);
}

.ren-ai-skeleton-line:last-child {
  width: 60%;
}

@keyframes ren-ai-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ren-ai-skeleton-line {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════
   AI ERROR — Message failure state
   ═══════════════════════════════════════════════ */
.ren-ai-error {
  position: relative;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-danger) 6%, var(--color-surface-raised));
  border: var(--stroke-1) solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  display: grid;
  gap: var(--space-2);
}

.ren-ai-error-message {
  color: var(--color-text);
  font-size: var(--body-size);
  line-height: 1.5;
}

.ren-ai-error-message::before {
  content: '⚠ ';
  color: var(--color-danger);
  margin-inline-end: var(--space-1);
}

/* ═══════════════════════════════════════════════
   AI ACTION VARIANTS — Regenerate, edit-and-resend
   These extend the existing .ren-ai-action base.
   ═══════════════════════════════════════════════ */
.ren-ai-action-regenerate::before {
  content: '↻';
  margin-inline-end: var(--space-1);
  font-size: 1.1em;
  display: inline-block;
  /* Subtle hint that this re-runs inference */
  transition: transform var(--duration-state, 200ms) var(--ease-enter, ease);
}

.ren-ai-action-regenerate:hover::before {
  transform: rotate(-45deg);
}

.ren-ai-action-edit::before {
  content: '✎';
  margin-inline-end: var(--space-1);
  font-size: 1.05em;
}

@media (prefers-reduced-motion: reduce) {
  .ren-ai-action-regenerate::before {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════
   AI FILE CHIP — Uploaded file reference
   Compact pill showing a file the user attached,
   with icon, name, size, and remove affordance.
   ═══════════════════════════════════════════════ */
.ren-ai-file-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface-raised);
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--caption-size);
  max-width: 220px;
}

.ren-ai-file-chip-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--color-text-muted);
  display: grid;
  place-items: center;
}

.ren-ai-file-chip-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.ren-ai-file-chip-size {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--caption-sm-size);
}

.ren-ai-file-chip-remove {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.ren-ai-file-chip-remove:hover,
.ren-ai-file-chip-remove:focus-visible {
  background: var(--color-fill);
  color: var(--color-text);
}

.ren-ai-file-chip-remove:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════
   AI TOOL CALL — Model invoking a tool / function
   Collapsible block built on native <details>
   so JS is optional. Status via data-status.
   ═══════════════════════════════════════════════ */
.ren-ai-tool-call {
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  margin-block: var(--space-2);
  overflow: hidden;
}

.ren-ai-tool-call-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  font-size: var(--caption-size);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.ren-ai-tool-call-header::-webkit-details-marker { display: none; }

.ren-ai-tool-call-header::before {
  content: '▸';
  font-size: 0.75em;
  color: var(--color-text-muted);
  transition: transform var(--duration-state, 200ms) var(--ease-enter, ease);
}

.ren-ai-tool-call[open] > .ren-ai-tool-call-header::before {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .ren-ai-tool-call-header::before {
    transition: none;
  }
}

.ren-ai-tool-call-name {
  font-family: var(--font-mono);
  color: var(--color-text);
}

.ren-ai-tool-call-status {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--caption-sm-size);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: var(--stroke-1) solid transparent;
}

.ren-ai-tool-call[data-status="pending"] .ren-ai-tool-call-status {
  color: var(--color-text-muted);
  background: var(--color-fill);
}

.ren-ai-tool-call[data-status="running"] .ren-ai-tool-call-status {
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
}

.ren-ai-tool-call[data-status="success"] .ren-ai-tool-call-status {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
}

.ren-ai-tool-call[data-status="error"] .ren-ai-tool-call-status {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
}

.ren-ai-tool-call-args,
.ren-ai-tool-call-result {
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--caption-size);
  line-height: 1.5;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  overflow-x: auto;
}

.ren-ai-tool-call-args {
  border-bottom: var(--stroke-1) solid var(--color-border-muted);
}

.ren-ai-tool-call-result {
  background: var(--color-surface);
}

.ren-ai-tool-call[data-status="error"] .ren-ai-tool-call-result {
  background: color-mix(in srgb, var(--color-danger) 4%, var(--color-surface));
  color: var(--color-text);
}
/* ============================================
   RenDS — All Components (CSS)
   ============================================
   Import this file to get all component styles.
   JS files are imported separately as needed.
   ============================================ */

/* ─── Primitives (Atoms) ─── */




















/* ─── Composites (Molecules) ─── */




























/* ─── Patterns (Organisms) ─── */








/* ============================================
   RenDS — Design System Foundation
   ============================================
   The complete foundation layer.
   Import this single file to get everything.

   Usage:
   

   Or in HTML:
   <link rel="stylesheet" href="rends/index.css">

   Cascade Layers (in priority order, lowest → highest):
   - reset:      Browser normalization
   - tokens:     Design tokens (primitives, semantic, component)
   - base:       Classless styles, utilities, layouts
   - components: All RenDS component styles
   - utilities:  High-priority utility overrides

   Any CSS written OUTSIDE a layer automatically wins
   over all RenDS styles — making overrides effortless.
   ============================================ */

@layer reset, tokens, base, components, utilities;