/**
 * ry-ui Design Tokens
 *
 * These CSS custom properties define the visual language.
 * color-scheme: light dark enables OS preference detection.
 * light-dark() embeds both values — no separate dark.css needed.
 * Override in your theme file to customize.
 */

/* ═══════════════════════════════════════════════════════════════
   @property — typed custom properties for animation & type safety
   Note: color tokens are NOT registered here because @property
   prevents light-dark() from re-resolving on dynamic color-scheme
   changes in Firefox. Colors use unregistered custom properties.
   ═══════════════════════════════════════════════════════════════ */

@property --ry-duration-fast { syntax: "<time>"; inherits: true; initial-value: 100ms; }
@property --ry-duration-normal { syntax: "<time>"; inherits: true; initial-value: 200ms; }
@property --ry-duration-slow { syntax: "<time>"; inherits: true; initial-value: 300ms; }

@property --ry-space-1 { syntax: "<length>"; inherits: true; initial-value: 0.25rem; }
@property --ry-space-2 { syntax: "<length>"; inherits: true; initial-value: 0.5rem; }
@property --ry-space-3 { syntax: "<length>"; inherits: true; initial-value: 0.75rem; }
@property --ry-space-4 { syntax: "<length>"; inherits: true; initial-value: 1rem; }
@property --ry-space-6 { syntax: "<length>"; inherits: true; initial-value: 1.5rem; }
@property --ry-space-8 { syntax: "<length>"; inherits: true; initial-value: 2rem; }

@layer ry-tokens, ry-structure, ry-theme;

@layer ry-tokens {
:root {
  color-scheme: light dark;

  /* ═══════════════════════════════════════════════════════════════
     COLORS
     ═══════════════════════════════════════════════════════════════ */

  /* Primary */
  --ry-color-primary: light-dark(oklch(0.623 0.188 259.8), oklch(0.714 0.143 254.6));
  --ry-color-primary-hover: light-dark(oklch(0.546 0.215 262.9), oklch(0.623 0.188 259.8));
  --ry-color-primary-active: light-dark(oklch(0.488 0.217 264.4), oklch(0.546 0.215 262.9));

  /* Secondary */
  --ry-color-secondary: light-dark(oklch(0.554 0.041 257.4), oklch(0.711 0.035 256.8));
  --ry-color-secondary-hover: light-dark(oklch(0.446 0.037 257.3), oklch(0.869 0.02 252.9));
  --ry-color-secondary-active: light-dark(oklch(0.372 0.039 257.3), oklch(0.929 0.013 255.6));

  /* Accent */
  --ry-color-accent: light-dark(oklch(0.627 0.213 303.9), oklch(0.714 0.183 303.9));
  --ry-color-accent-hover: light-dark(oklch(0.557 0.213 303.9), oklch(0.627 0.213 303.9));
  --ry-color-accent-active: light-dark(oklch(0.497 0.213 303.9), oklch(0.557 0.213 303.9));

  /* Semantic */
  --ry-color-success: oklch(0.723 0.192 149.6);
  --ry-color-warning: oklch(0.769 0.165 70.1);
  --ry-color-danger: oklch(0.637 0.208 25.3);
  --ry-color-danger-hover: oklch(0.577 0.215 27.3);
  --ry-color-info: oklch(0.715 0.126 215.2);

  /* Semantic backgrounds & text (for alerts, badges) */
  --ry-color-info-bg: light-dark(oklch(0.984 0.019 201.1), oklch(0.398 0.066 227.4));
  --ry-color-info-text: light-dark(oklch(0.52 0.094 223.1), oklch(0.917 0.077 205.1));
  --ry-color-success-bg: light-dark(oklch(0.982 0.018 156.1), oklch(0.393 0.09 152.6));
  --ry-color-success-text: light-dark(oklch(0.527 0.137 150.1), oklch(0.925 0.081 156.1));
  --ry-color-warning-bg: light-dark(oklch(0.987 0.021 95.3), oklch(0.414 0.105 45.9));
  --ry-color-warning-text: light-dark(oklch(0.555 0.145 49), oklch(0.962 0.058 95.6));
  --ry-color-danger-bg: light-dark(oklch(0.971 0.013 17), oklch(0.396 0.133 25.7));
  --ry-color-danger-text: light-dark(oklch(0.505 0.19 27.5), oklch(0.885 0.059 18.3));

  /* Text */
  --ry-color-text: light-dark(oklch(0.279 0.037 260), oklch(0.968 0.007 248.1));
  --ry-color-text-muted: light-dark(oklch(0.554 0.041 257.4), oklch(0.711 0.035 256.8));
  --ry-color-text-inverse: light-dark(oklch(1 0 0), oklch(0.208 0.04 265.8));

  /* Background */
  --ry-color-bg: light-dark(oklch(1 0 0), oklch(0.208 0.04 265.8));
  --ry-color-bg-subtle: light-dark(oklch(0.984 0.003 248.2), oklch(0.279 0.037 260));
  --ry-color-bg-muted: light-dark(oklch(0.968 0.007 248.1), oklch(0.372 0.039 257.3));

  /* Border */
  --ry-color-border: light-dark(oklch(0.929 0.013 255.6), oklch(0.372 0.039 257.3));
  --ry-color-border-strong: light-dark(oklch(0.869 0.02 252.9), oklch(0.446 0.037 257.3));

  /* Overlay */
  --ry-color-overlay: light-dark(oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.7));

  /* ═══════════════════════════════════════════════════════════════
     CODE SYNTAX
     ═══════════════════════════════════════════════════════════════ */

  --ry-code-bg: light-dark(oklch(0.978 0.003 248.2), oklch(0.208 0.04 265.8));
  --ry-code-header-bg: light-dark(oklch(0.947 0.007 248.1), oklch(0.279 0.037 260));
  --ry-code-text-color: light-dark(oklch(0.279 0.013 253.1), oklch(0.968 0.007 248.1));
  --ry-code-title-color: light-dark(oklch(0.485 0.02 251.1), oklch(0.711 0.035 256.8));
  --ry-code-icon-color: light-dark(oklch(0.666 0.018 251), oklch(0.554 0.041 257.4));
  --ry-code-icon-hover-bg: light-dark(oklch(0.876 0.012 248.1), oklch(0.372 0.039 257.3));
  --ry-code-icon-hover-color: light-dark(oklch(0.279 0.013 253.1), oklch(0.968 0.007 248.1));
  --ry-code-line-number-color: light-dark(oklch(0.666 0.018 251 / 0.6), oklch(0.446 0.037 257.3 / 0.6));
  --ry-code-line-border-color: light-dark(oklch(0.876 0.012 248.1), oklch(0.372 0.039 257.3));
  --ry-code-color-preview-border: light-dark(oklch(0.279 0.013 253.1 / 0.3), oklch(0.968 0.007 248.1 / 0.3));
  --ry-code-keyword: light-dark(oklch(0.552 0.205 24.5), oklch(0.637 0.208 25.3));
  --ry-code-property: light-dark(oklch(0.451 0.164 258.2), oklch(0.714 0.143 254.6));
  --ry-code-value: light-dark(oklch(0.321 0.108 259.1), oklch(0.769 0.165 70.1));
  --ry-code-string: light-dark(oklch(0.321 0.108 259.1), oklch(0.723 0.192 149.6));
  --ry-code-number: light-dark(oklch(0.451 0.164 258.2), oklch(0.769 0.165 70.1));
  --ry-code-comment: light-dark(oklch(0.565 0.019 251), oklch(0.711 0.035 256.8));
  --ry-code-selector: light-dark(oklch(0.439 0.118 148.1), oklch(0.715 0.126 215.2));
  --ry-code-punctuation: light-dark(oklch(0.279 0.013 253.1), oklch(0.711 0.035 256.8));
  --ry-code-tag: light-dark(oklch(0.439 0.118 148.1), oklch(0.715 0.126 215.2));
  --ry-code-attribute: light-dark(oklch(0.451 0.164 258.2), oklch(0.714 0.143 254.6));

  /* ═══════════════════════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════════════════════ */

  /* Font families */
  --ry-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ry-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Font sizes */
  --ry-text-xs: 0.75rem;
  --ry-text-sm: 0.875rem;
  --ry-text-base: 1rem;
  --ry-text-lg: 1.125rem;
  --ry-text-xl: 1.25rem;
  --ry-text-2xl: 1.5rem;
  --ry-text-3xl: 1.875rem;
  --ry-text-4xl: 2.25rem;

  /* Font weights */
  --ry-font-normal: 400;
  --ry-font-medium: 500;
  --ry-font-semibold: 600;
  --ry-font-bold: 700;

  /* Line heights */
  --ry-leading-tight: 1.25;
  --ry-leading-normal: 1.5;
  --ry-leading-relaxed: 1.75;

  /* ═══════════════════════════════════════════════════════════════
     SPACING
     ═══════════════════════════════════════════════════════════════ */

  --ry-space-0: 0;
  --ry-space-1: 0.25rem;
  --ry-space-2: 0.5rem;
  --ry-space-3: 0.75rem;
  --ry-space-4: 1rem;
  --ry-space-5: 1.25rem;
  --ry-space-6: 1.5rem;
  --ry-space-8: 2rem;
  --ry-space-10: 2.5rem;
  --ry-space-12: 3rem;
  --ry-space-16: 4rem;
  --ry-space-20: 5rem;

  /* ═══════════════════════════════════════════════════════════════
     BORDERS & RADIUS
     ═══════════════════════════════════════════════════════════════ */

  --ry-radius-none: 0;
  --ry-radius-sm: 0.25rem;
  --ry-radius-md: 0.375rem;
  --ry-radius-lg: 0.5rem;
  --ry-radius-xl: 0.75rem;
  --ry-radius-2xl: 1rem;
  --ry-radius-full: 9999px;

  --ry-border-width: 1px;

  /* ═══════════════════════════════════════════════════════════════
     SHADOWS
     ═══════════════════════════════════════════════════════════════ */

  --ry-shadow-color: light-dark(oklch(0 0 0 / 0.1), oklch(0 0 0 / 0.4));
  --ry-shadow-color-sm: light-dark(oklch(0 0 0 / 0.05), oklch(0 0 0 / 0.3));
  --ry-shadow-sm: 0 1px 2px 0 var(--ry-shadow-color-sm);
  --ry-shadow-md: 0 4px 6px -1px var(--ry-shadow-color), 0 2px 4px -2px var(--ry-shadow-color);
  --ry-shadow-lg: 0 10px 15px -3px var(--ry-shadow-color), 0 4px 6px -4px var(--ry-shadow-color);
  --ry-shadow-xl: 0 20px 25px -5px var(--ry-shadow-color), 0 8px 10px -6px var(--ry-shadow-color);

  /* ═══════════════════════════════════════════════════════════════
     TRANSITIONS
     ═══════════════════════════════════════════════════════════════ */

  --ry-duration-fast: 100ms;
  --ry-duration-normal: 200ms;
  --ry-duration-slow: 300ms;

  --ry-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ry-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ry-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ═══════════════════════════════════════════════════════════════
     Z-INDEX
     ═══════════════════════════════════════════════════════════════ */

  --ry-z-dropdown: 1000;
  --ry-z-sticky: 1020;
  --ry-z-fixed: 1030;
  --ry-z-modal-backdrop: 1040;
  --ry-z-modal: 1050;
  --ry-z-popover: 1060;
  --ry-z-tooltip: 1070;
  --ry-z-toast: 1080;

  /* ═══════════════════════════════════════════════════════════════
     FOCUS
     ═══════════════════════════════════════════════════════════════ */

  --ry-focus-ring: 0 0 0 3px light-dark(oklch(0.623 0.188 259.8 / 0.5), oklch(0.714 0.143 254.6 / 0.5));
}

/* Force light or dark mode (legacy — theme used to conflate theme + mode) */
[data-ry-theme="light"] { color-scheme: light; }
[data-ry-theme="dark"]  { color-scheme: dark; }

} /* @layer ry-tokens */

/**
 * ry-ui Structure CSS
 *
 * Pure layout and behavioral styles using data-ry-target selectors.
 * No colors, shadows, or decorative properties.
 * Works with any theme or no theme at all.
 *
 * Users can bring their own styling (e.g., Tailwind) - classes are optional.
 * JS queries use [data-ry-target], structure CSS uses [data-ry-target],
 * only theme CSS requires .ry-* classes.
 */

@layer ry-structure {

/* Enable native height: auto animation for all components */
:root {
  interpolate-size: allow-keywords;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL LOCK (for modals, drawers)
   ═══════════════════════════════════════════════════════════════ */

body[data-ry-scroll-lock] {
  overflow: hidden;
  padding-right: var(--ry-scrollbar-width, 0);
}

/* ═══════════════════════════════════════════════════════════════
   TRANSFORM WRAPPER (FOUC prevention)
   ═══════════════════════════════════════════════════════════════ */

ry {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   BOX SIZING RESET
   ═══════════════════════════════════════════════════════════════ */

:where([data-ry-target],
  ry-page, ry-header, ry-main, ry-footer, ry-section, ry-aside,
  ry-grid, ry-stack, ry-cluster, ry-split, ry-center,
  ry-card, ry-accordion, ry-modal, ry-tabs, ry-dropdown,
  ry-button, ry-button-group, ry-badge, ry-alert, ry-field, ry-nav, ry-logo, ry-actions,
  ry-accordion-item, ry-tab, ry-menu, ry-menu-item, ry-divider,
  ry-theme-toggle, ry-select, ry-switch, ry-tooltip, ry-drawer, ry-toast,
  ry-toggle-button, ry-knob, ry-slider, ry-number-select, ry-color-picker, ry-color-input,
  ry-gradient-picker, ry-tree, ry-tree-item,
  ry-tag, ry-tag-input, ry-hero, ry-stat, ry-feature, ry-feature-grid,
  ry-pricing, ry-pricing-card, ry-carousel, ry-combobox) {
  box-sizing: border-box;
}

:where([data-ry-target],
  ry-page, ry-header, ry-main, ry-footer, ry-section,
  ry-card, ry-accordion, ry-modal, ry-tabs, ry-dropdown) * {
  box-sizing: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOM ELEMENT DISPLAY DEFAULTS
   ═══════════════════════════════════════════════════════════════ */

/* Block elements */
:is(ry-page, ry-header, ry-main, ry-footer, ry-section, ry-aside,
    ry-card, ry-accordion, ry-accordion-item, ry-tabs, ry-tab, ry-alert, ry-field,
    ry-tag-input, ry-carousel) {
  display: block;
}

/* Flex containers */
:is(ry-grid, ry-stack, ry-cluster, ry-split, ry-center, ry-nav, ry-actions) {
  display: flex;
}

/* Inline elements */
:is(ry-badge, ry-logo, ry-tag) {
  display: inline-flex;
}

/* Contents (wrapper doesn't affect layout) */
:is(ry-modal, ry-drawer) {
  display: contents;
}

/* Button-like elements */
:is(ry-button, ry-menu-item) {
  display: inline-flex;
}

/* Balanced text wrapping for headings in overlay/display components */
:is(ry-modal [data-ry-target="header"] h3,
    ry-card h3,
    ry-hero h1,
    ry-pricing-card h3) {
  text-wrap: balance;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE LAYOUT
   ═══════════════════════════════════════════════════════════════ */

ry-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  container-type: inline-size;
  scrollbar-gutter: stable;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */

ry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ry-space-4, 1rem);
  padding: var(--ry-space-4, 1rem) var(--ry-space-6, 1.5rem);
}

ry-header[sticky] {
  position: sticky;
  top: 0;
  z-index: var(--ry-z-sticky, 1020);
}

/* ═══════════════════════════════════════════════════════════════
   MAIN
   ═══════════════════════════════════════════════════════════════ */

ry-main {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--ry-space-8, 2rem) var(--ry-space-6, 1.5rem);
  container-type: inline-size;
  scrollbar-gutter: stable;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

ry-footer {
  padding: var(--ry-space-6, 1.5rem);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION
   ═══════════════════════════════════════════════════════════════ */

ry-section {
  margin-block-end: var(--ry-space-12, 3rem);
  container-type: inline-size;
}

ry-section:last-child {
  margin-block-end: 0;
}

ry-section[narrow] {
  max-inline-size: 48rem;
  margin-inline: auto;
}

/* Logo bar pattern */
.ry-logo-bar {
  text-align: center;
}

.ry-logo-bar p {
  margin: 0 0 var(--ry-space-4, 1rem);
}

.ry-logo-bar ry-cluster {
  justify-content: center;
  gap: var(--ry-space-10, 2.5rem);
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   GRID
   ═══════════════════════════════════════════════════════════════ */

ry-grid {
  display: grid;
  gap: var(--ry-space-4, 1rem);
}

ry-grid[cols="1"] { grid-template-columns: 1fr; }
ry-grid[cols="2"] { grid-template-columns: repeat(2, 1fr); }
ry-grid[cols="3"] { grid-template-columns: repeat(3, 1fr); }
ry-grid[cols="4"] { grid-template-columns: repeat(4, 1fr); }
ry-grid[cols="5"] { grid-template-columns: repeat(5, 1fr); }
ry-grid[cols="6"] { grid-template-columns: repeat(6, 1fr); }

/* Auto-fit mode: fluid columns based on min-width */
ry-grid[cols="auto-fit"] {
  grid-template-columns: repeat(auto-fit, minmax(var(--ry-grid-min, 280px), 1fr));
}

ry-grid[cols="auto-fill"] {
  grid-template-columns: repeat(auto-fill, minmax(var(--ry-grid-min, 280px), 1fr));
}

/* Default responsive behavior */
@container (max-width: 640px) {
  :is(ry-grid[cols="2"], ry-grid[cols="3"], ry-grid[cols="4"],
      ry-grid[cols="5"], ry-grid[cols="6"]) {
    grid-template-columns: 1fr;
  }
}

@container (min-width: 641px) and (max-width: 1024px) {
  :is(ry-grid[cols="3"], ry-grid[cols="4"],
      ry-grid[cols="5"], ry-grid[cols="6"]) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Per-breakpoint column overrides: cols-sm, cols-md, cols-lg */
@container (max-width: 640px) {
  ry-grid[cols-sm="1"] { grid-template-columns: 1fr; }
  ry-grid[cols-sm="2"] { grid-template-columns: repeat(2, 1fr); }
  ry-grid[cols-sm="3"] { grid-template-columns: repeat(3, 1fr); }
}

@container (min-width: 641px) and (max-width: 1024px) {
  ry-grid[cols-md="1"] { grid-template-columns: 1fr; }
  ry-grid[cols-md="2"] { grid-template-columns: repeat(2, 1fr); }
  ry-grid[cols-md="3"] { grid-template-columns: repeat(3, 1fr); }
  ry-grid[cols-md="4"] { grid-template-columns: repeat(4, 1fr); }
}

@container (min-width: 1025px) {
  ry-grid[cols-lg="2"] { grid-template-columns: repeat(2, 1fr); }
  ry-grid[cols-lg="3"] { grid-template-columns: repeat(3, 1fr); }
  ry-grid[cols-lg="4"] { grid-template-columns: repeat(4, 1fr); }
  ry-grid[cols-lg="5"] { grid-template-columns: repeat(5, 1fr); }
  ry-grid[cols-lg="6"] { grid-template-columns: repeat(6, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   STACK (vertical)
   ═══════════════════════════════════════════════════════════════ */

ry-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ry-space-4, 1rem);
}

ry-stack[gap="sm"] { gap: var(--ry-space-2, 0.5rem); }
ry-stack[gap="md"] { gap: var(--ry-space-4, 1rem); }
ry-stack[gap="lg"] { gap: var(--ry-space-6, 1.5rem); }
ry-stack[gap="xl"] { gap: var(--ry-space-8, 2rem); }

/* ═══════════════════════════════════════════════════════════════
   CLUSTER (horizontal, wraps)
   ═══════════════════════════════════════════════════════════════ */

ry-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ry-space-3, 0.75rem);
}

ry-cluster[gap="sm"] { gap: var(--ry-space-2, 0.5rem); }
ry-cluster[gap="md"] { gap: var(--ry-space-3, 0.75rem); }
ry-cluster[gap="lg"] { gap: var(--ry-space-4, 1rem); }

/* ═══════════════════════════════════════════════════════════════
   SPLIT (two columns)
   ═══════════════════════════════════════════════════════════════ */

ry-split {
  display: flex;
  gap: var(--ry-space-6, 1.5rem);
}

ry-split > :first-child {
  flex: 1;
}

ry-split > :last-child {
  flex-shrink: 0;
  width: var(--ry-split-width, 300px);
  min-width: var(--ry-split-min-width, 0);
}

/* Resize handle */
ry-split [data-ry-target="handle"] {
  flex-shrink: 0;
  width: 8px;
  margin-inline: -4px;
  cursor: col-resize;
  position: relative;
  z-index: 1;
  touch-action: none;
}

/* Larger hit area via pseudo-element */
ry-split [data-ry-target="handle"]::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline: -4px;
}

/* Visible drag indicator */
ry-split [data-ry-target="handle"]::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 4px;
  height: 32px;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  opacity: 0;
  transition: opacity var(--ry-duration-fast, 100ms);
}

ry-split [data-ry-target="handle"]:hover::after,
ry-split[data-ry-resizing] [data-ry-target="handle"]::after {
  opacity: 1;
}

@container (max-width: 768px) {
  ry-split {
    flex-direction: column;
  }
  ry-split > :last-child {
    width: 100%;
  }
  ry-split [data-ry-target="handle"] {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CENTER
   ═══════════════════════════════════════════════════════════════ */

ry-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════ */

ry-nav {
  display: flex;
  align-items: center;
  gap: var(--ry-space-4, 1rem);
}

ry-nav a {
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   LOGO
   ═══════════════════════════════════════════════════════════════ */

ry-logo {
  display: inline-flex;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════
   ACTIONS
   ═══════════════════════════════════════════════════════════════ */

ry-actions {
  display: flex;
  align-items: center;
  gap: var(--ry-space-2, 0.5rem);
}

/* ═══════════════════════════════════════════════════════════════
   DIVIDER
   ═══════════════════════════════════════════════════════════════ */

ry-divider {
  display: block;
  height: 1px;
  margin-block: var(--ry-space-4, 1rem);
  margin-inline: 0;
}

ry-divider[vertical] {
  width: 1px;
  height: auto;
  align-self: stretch;
  margin-block: 0;
  margin-inline: var(--ry-space-4, 1rem);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

ry-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ry-space-2, 0.5rem);
  padding: var(--ry-space-2, 0.5rem) var(--ry-space-4, 1rem);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

ry-button[disabled] {
  cursor: not-allowed;
  pointer-events: none;
}

/* Button sizes */
ry-button[size="sm"] {
  padding: var(--ry-space-1, 0.25rem) var(--ry-space-3, 0.75rem);
}

ry-button[size="lg"] {
  padding: var(--ry-space-3, 0.75rem) var(--ry-space-6, 1.5rem);
}

/* Icon-only button */
ry-button[icon]:empty {
  padding: var(--ry-space-2, 0.5rem);
}

ry-button[icon][size="sm"]:empty {
  padding: var(--ry-space-1, 0.25rem);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTON GROUP
   ═══════════════════════════════════════════════════════════════ */

ry-button-group {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--ry-radius-md, 0.375rem);
}

ry-button-group > :is(ry-button, ry-toggle-button) {
  border-radius: calc(var(--ry-radius-md, 0.375rem) - 2px);
}

/* ═══════════════════════════════════════════════════════════════
   TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════════ */

ry-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ry-space-2, 0.5rem);
  padding: var(--ry-space-2, 0.5rem) var(--ry-space-4, 1rem);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

ry-toggle-button[disabled] {
  cursor: not-allowed;
  pointer-events: none;
}

/* Toggle button sizes */
ry-toggle-button[size="sm"] {
  padding: var(--ry-space-1, 0.25rem) var(--ry-space-3, 0.75rem);
}

ry-toggle-button[size="lg"] {
  padding: var(--ry-space-3, 0.75rem) var(--ry-space-6, 1.5rem);
}

/* Icon-only toggle button */
ry-toggle-button[icon]:empty {
  padding: var(--ry-space-2, 0.5rem);
}

ry-toggle-button[icon][size="sm"]:empty {
  padding: var(--ry-space-1, 0.25rem);
}

ry-toggle-button[icon][size="lg"]:empty {
  padding: var(--ry-space-3, 0.75rem);
}

/* Block toggle button (card-style, full width) */
ry-toggle-button[block] {
  display: block;
  width: 100%;
  text-align: start;
  padding: var(--ry-space-4, 1rem);
}

/* ═══════════════════════════════════════════════════════════════
   KNOB
   ═══════════════════════════════════════════════════════════════ */

ry-knob {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ry-space-1, 0.25rem);
  user-select: none;
  outline: none;
}

ry-knob[disabled] {
  pointer-events: none;
}

ry-knob [data-ry-target="ring"] {
  --knob-size: 64px;
  --knob-rotation: -135deg;
  --knob-percent: 0;

  position: relative;
  width: var(--knob-size);
  height: var(--knob-size);
  cursor: grab;
}

ry-knob [data-ry-target="ring"].ry-knob__ring--dragging {
  cursor: grabbing;
}

ry-knob [data-ry-target="cap"] {
  position: absolute;
  inset: 0;
  transform: rotate(var(--knob-rotation));
}

ry-knob [data-ry-target="indicator"] {
  position: absolute;
  width: 3px;
  height: 10px;
  top: 6px;
  left: 50%;
  margin-left: -1.5px;
}

ry-knob [data-ry-target="display"] {
  display: block;
  min-width: 3em;
  text-align: center;
}

ry-knob [data-ry-target="label"] {
  display: block;
  text-align: center;
}

/* Sizes */
ry-knob[size="sm"] [data-ry-target="ring"] { --knob-size: 48px; }
ry-knob[size="lg"] [data-ry-target="ring"] { --knob-size: 80px; }

/* ═══════════════════════════════════════════════════════════════
   NUMBER SELECT
   ═══════════════════════════════════════════════════════════════ */

ry-number-select {
  display: inline-flex;
  align-items: center;
  gap: 0;
  user-select: none;
  touch-action: none;
}

ry-number-select[disabled] {
  pointer-events: none;
}

ry-number-select :is([data-ry-target="decrement"], [data-ry-target="increment"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
}

ry-number-select :is([data-ry-target="decrement"], [data-ry-target="increment"]) svg {
  width: 16px;
  height: 16px;
}

ry-number-select [data-ry-target="display"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 36px;
  padding: 0 var(--ry-space-2, 0.5rem);
  position: relative;
  cursor: ew-resize;
  outline: none;
}

:is(ry-number-select[drag="y"],
    ry-number-select[arrows="stacked"]:not([drag]),
    ry-number-select[arrows="stacked-end"]:not([drag]),
    ry-number-select[arrows="stacked-start"]:not([drag])) [data-ry-target="display"] {
  cursor: ns-resize;
}

ry-number-select[drag="none"] [data-ry-target="display"] {
  cursor: default;
}

ry-number-select[data-dragging] {
  cursor: ew-resize;
}

:is(ry-number-select[drag="y"],
    ry-number-select[arrows="stacked"]:not([drag]),
    ry-number-select[arrows="stacked-end"]:not([drag]),
    ry-number-select[arrows="stacked-start"]:not([drag]))[data-dragging] {
  cursor: ns-resize;
}

ry-number-select [data-ry-target="value"] {
  display: inline-block;
  min-width: 2em;
  text-align: center;
  transition: transform 60ms ease-out;
}

ry-number-select :is([data-ry-target="prefix"], [data-ry-target="suffix"]) {
  flex-shrink: 0;
  pointer-events: none;
}

ry-number-select [data-ry-target="input"] {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 0 var(--ry-space-1, 0.25rem);
  outline: none;
}

ry-number-select [data-ry-target="label"] {
  display: block;
  text-align: center;
  margin-inline-end: var(--ry-space-2, 0.5rem);
  order: -1;
}

/* Stacked layout (buttons above/below) */
ry-number-select[arrows="stacked"] {
  flex-direction: column;
  align-items: stretch;
}

ry-number-select[arrows="stacked"] :is([data-ry-target="decrement"], [data-ry-target="increment"]) {
  width: auto;
  height: 24px;
}

ry-number-select[arrows="stacked"] :is([data-ry-target="decrement"], [data-ry-target="increment"]) svg {
  width: 14px;
  height: 14px;
}

/* Stacked-end / stacked-start (buttons grouped beside display) */
ry-number-select [data-ry-target="btn-group"] {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

:is(ry-number-select[arrows="stacked-end"], ry-number-select[arrows="stacked-start"]) :is([data-ry-target="decrement"], [data-ry-target="increment"]) {
  width: 28px;
  height: 18px;
}

:is(ry-number-select[arrows="stacked-end"], ry-number-select[arrows="stacked-start"]) :is([data-ry-target="decrement"], [data-ry-target="increment"]) svg {
  width: 12px;
  height: 12px;
}

/* Sizes */
ry-number-select[size="xs"] :is([data-ry-target="decrement"], [data-ry-target="increment"]) { width: 20px; height: 22px; }
ry-number-select[size="xs"] [data-ry-target="display"] { min-width: 28px; height: 22px; padding: 0 var(--ry-space-1, 0.25rem); }
ry-number-select[size="xs"] :is([data-ry-target="decrement"], [data-ry-target="increment"]) svg { width: 12px; height: 12px; }

ry-number-select[size="sm"] :is([data-ry-target="decrement"], [data-ry-target="increment"]) { width: 24px; height: 28px; }
ry-number-select[size="sm"] [data-ry-target="display"] { min-width: 36px; height: 28px; }

ry-number-select[size="lg"] :is([data-ry-target="decrement"], [data-ry-target="increment"]) { width: 40px; height: 44px; }
ry-number-select[size="lg"] [data-ry-target="display"] { min-width: 60px; height: 44px; }

/* ═══════════════════════════════════════════════════════════════
   SLIDER
   ═══════════════════════════════════════════════════════════════ */

ry-slider {
  display: block;
  position: relative;
  padding: var(--ry-space-4, 1rem) 0;
  touch-action: none;
  user-select: none;
}

ry-slider[disabled] {
  pointer-events: none;
}

ry-slider [data-ry-target="track"] {
  position: relative;
  height: var(--ry-slider-track, 14px);
  cursor: pointer;
}

ry-slider [data-ry-target="fill"] {
  position: absolute;
  height: 100%;
}

ry-slider [data-ry-target^="thumb"] {
  position: absolute;
  width: var(--ry-slider-thumb, 32px);
  height: var(--ry-slider-thumb, 32px);
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
}

ry-slider [data-ry-target^="thumb"]:active {
  cursor: grabbing;
}

ry-slider [data-ry-target="labels"] {
  display: flex;
  justify-content: space-between;
  margin-block-start: var(--ry-space-2, 0.5rem);
  pointer-events: none;
}

ry-slider [data-ry-target^="tooltip"] {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
              visibility var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
  transition-behavior: allow-discrete;
  pointer-events: none;
}

:is(ry-slider [data-ry-target^="thumb"]:hover,
    ry-slider [data-ry-target^="thumb"]:focus,
    ry-slider[data-dragging]) [data-ry-target^="tooltip"] {
  opacity: 1;
  visibility: visible;
}

@starting-style {
  :is(ry-slider [data-ry-target^="thumb"]:hover,
      ry-slider [data-ry-target^="thumb"]:focus,
      ry-slider[data-dragging]) [data-ry-target^="tooltip"] {
    opacity: 0;
  }
}

/* Vertical */
ry-slider[vertical] {
  display: inline-flex;
  width: auto;
  height: 200px;
  padding: 0 var(--ry-space-4, 1rem);
}

ry-slider[vertical] [data-ry-target="track"] {
  width: var(--ry-slider-track, 14px);
  height: 100%;
}

ry-slider[vertical] [data-ry-target="fill"] {
  width: 100%;
  height: auto;
  bottom: 0;
  left: 0;
}

ry-slider[vertical] [data-ry-target^="thumb"] {
  left: 50%;
  top: auto;
  transform: translate(-50%, 50%);
}

ry-slider[vertical] [data-ry-target="labels"] {
  flex-direction: column-reverse;
  justify-content: space-between;
  height: 100%;
  margin-block-start: 0;
  margin-inline-start: var(--ry-space-2, 0.5rem);
}

/* Sizes */
ry-slider[size="sm"] { --ry-slider-track: 10px; --ry-slider-thumb: 24px; }
ry-slider[size="lg"] { --ry-slider-track: 18px; --ry-slider-thumb: 40px; }

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */

ry-card {
  display: block;
  padding: var(--ry-space-6, 1.5rem);
  container-type: inline-size;
}

:is(a, [interactive]):is(ry-card) {
  cursor: pointer;
  transition: transform var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
}

:is(a, [interactive]):is(ry-card):hover {
  transform: translateY(-1px);
}

:is(a, [interactive]):is(ry-card):active {
  transform: translateY(0);
}

ry-card h3 {
  margin: 0 0 var(--ry-space-2, 0.5rem) 0;
}

ry-card p {
  margin: 0 0 var(--ry-space-4, 1rem) 0;
}

ry-card p:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════ */

ry-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--ry-space-1, 0.25rem) var(--ry-space-2, 0.5rem);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════════ */

ry-alert {
  display: flex;
  gap: var(--ry-space-3, 0.75rem);
  padding: var(--ry-space-4, 1rem);
}

ry-alert [slot="title"] {
  margin: 0 0 var(--ry-space-1, 0.25rem) 0;
}

ry-alert p,
ry-alert [data-ry-target="content"] {
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════ */

ry-field :is(input, textarea, select) {
  display: block;
  width: 100%;
  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
}

ry-field :is(input, textarea):disabled {
  cursor: not-allowed;
}

ry-field :is(label, [data-ry-target="label"]) {
  display: block;
  margin-block-end: var(--ry-space-2, 0.5rem);
}

ry-field {
  display: block;
  margin-block-end: var(--ry-space-4, 1rem);
}

ry-field [data-ry-target="error"]:empty,
ry-field [data-ry-target="hint"]:empty {
  display: none;
}

ry-field [data-ry-target="error"]:not(:empty) ~ [data-ry-target="hint"] {
  display: none;
}

ry-field :is([data-ry-target="error"], [data-ry-target="hint"]) {
  margin-block-start: var(--ry-space-1, 0.25rem);
}

/* ═══════════════════════════════════════════════════════════════
   ACCORDION
   ═══════════════════════════════════════════════════════════════ */

ry-accordion {
  overflow: hidden;
}

ry-accordion [data-ry-target="trigger"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--ry-space-4, 1rem) var(--ry-space-6, 1.5rem);
  text-align: start;
  border: none;
  cursor: pointer;
}

ry-accordion [data-ry-target="icon"] {
  flex-shrink: 0;
  transition: transform var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
}

ry-accordion [data-ry-target="item"][data-ry-state="open"] [data-ry-target="icon"] {
  transform: rotate(180deg);
}

ry-accordion [data-ry-target="panel"] {
  overflow: hidden;
}

ry-accordion [data-ry-target="item"][data-ry-state="closed"] [data-ry-target="panel"] {
  display: none;
}

ry-accordion [data-ry-target="panel"] > * {
  padding: var(--ry-space-4, 1rem) var(--ry-space-6, 1.5rem);
}

/* ═══════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════ */

ry-tabs {
  display: block;
}

ry-tabs [data-ry-target="list"] {
  display: flex;
  gap: var(--ry-space-1, 0.25rem);
  margin-block-end: var(--ry-space-4, 1rem);
}

ry-tabs [data-ry-target="trigger"] {
  padding: var(--ry-space-2, 0.5rem) var(--ry-space-4, 1rem);
  border: none;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  cursor: pointer;
}

ry-tabs [data-ry-target="panel"],
ry-tab {
  display: none;
}

:is(ry-tabs [data-ry-target="panel"][data-ry-state="active"],
    ry-tab[active],
    ry-tab[data-ry-state="active"]) {
  display: block;
}

ry-tabs:not(:defined) ry-tab:first-of-type {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════ */

ry-modal {
  display: contents;
}

ry-modal [data-ry-target="backdrop"] {
  position: fixed;
  inset: 0;
  z-index: var(--ry-z-modal-backdrop, 1040);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ry-duration-normal, 200ms) var(--ry-ease, ease),
              visibility var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
  transition-behavior: allow-discrete;
}

ry-modal[data-ry-state="open"] [data-ry-target="backdrop"] {
  opacity: 1;
  visibility: visible;
}

@starting-style {
  ry-modal[data-ry-state="open"] [data-ry-target="backdrop"] {
    opacity: 0;
  }
}

ry-modal [data-ry-target="dialog"] {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: var(--ry-z-modal, 1050);
  width: 100%;
  max-width: 32rem;
  max-height: calc(100vh - var(--ry-space-8, 2rem));
  overflow: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.95);
  transition: opacity var(--ry-duration-normal, 200ms) var(--ry-ease, ease),
              visibility var(--ry-duration-normal, 200ms) var(--ry-ease, ease),
              transform var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
  transition-behavior: allow-discrete;
}

ry-modal[data-ry-state="open"] [data-ry-target="dialog"] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

@starting-style {
  ry-modal[data-ry-state="open"] [data-ry-target="dialog"] {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
}

ry-modal [data-ry-target="header"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ry-space-4, 1rem) var(--ry-space-6, 1.5rem);
}

ry-modal [data-ry-target="header"] h3 {
  margin: 0;
}

ry-modal [data-ry-target="close"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  cursor: pointer;
}

ry-modal [data-ry-target="body"] {
  padding: var(--ry-space-6, 1.5rem);
}

ry-modal [data-ry-target="footer"] {
  display: flex;
  justify-content: flex-end;
  gap: var(--ry-space-3, 0.75rem);
  padding: var(--ry-space-4, 1rem) var(--ry-space-6, 1.5rem);
}

/* ═══════════════════════════════════════════════════════════════
   DROPDOWN
   ═══════════════════════════════════════════════════════════════ */

ry-dropdown {
  position: relative;
  display: inline-block;
}

ry-dropdown :is([data-ry-target="menu"], ry-menu) {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--ry-z-dropdown, 1000);
  min-width: 12rem;
  margin-block-start: var(--ry-space-1, 0.25rem);
  padding: var(--ry-space-1, 0.25rem);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
              visibility var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
              transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
  transition-behavior: allow-discrete;
}

ry-dropdown[data-ry-state="open"] :is([data-ry-target="menu"], ry-menu) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@starting-style {
  ry-dropdown[data-ry-state="open"] :is([data-ry-target="menu"], ry-menu) {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

ry-dropdown[data-ry-position="top"] :is([data-ry-target="menu"], ry-menu) {
  top: auto;
  bottom: 100%;
  margin-block-start: 0;
  margin-block-end: var(--ry-space-1, 0.25rem);
  transform: translateY(0.5rem);
}

ry-dropdown[data-ry-position="top"][data-ry-state="open"] :is([data-ry-target="menu"], ry-menu) {
  transform: translateY(0);
}

ry-menu-item {
  display: block;
  width: 100%;
  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
  text-align: start;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   SWITCH
   ═══════════════════════════════════════════════════════════════ */

ry-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--ry-space-3, 0.75rem);
  cursor: pointer;
  user-select: none;
}

ry-switch[disabled] {
  cursor: not-allowed;
}

ry-switch [data-ry-target="track"] {
  position: relative;
  display: inline-flex;
  width: 2.75rem;
  height: 1.5rem;
  flex-shrink: 0;
}

ry-switch [data-ry-target="thumb"] {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
}

ry-switch[checked] [data-ry-target="thumb"] {
  transform: translateX(1.25rem);
}

ry-switch [data-ry-target="input"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

ry-switch:focus-visible {
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════
   TOOLTIP
   ═══════════════════════════════════════════════════════════════ */

ry-tooltip {
  position: relative;
  display: inline-block;
}

ry-tooltip [data-ry-target="content"] {
  position: absolute;
  z-index: var(--ry-z-tooltip, 1070);
  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
              visibility var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
  transition-behavior: allow-discrete;
}

ry-tooltip[data-ry-state="open"] [data-ry-target="content"] {
  opacity: 1;
  visibility: visible;
}

@starting-style {
  ry-tooltip[data-ry-state="open"] [data-ry-target="content"] {
    opacity: 0;
  }
}

/* Tooltip positioning - CSS handles all layout, no JS needed */
ry-tooltip[data-ry-position="top"] [data-ry-target="content"] {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--ry-space-2, 0.5rem);
}

ry-tooltip[data-ry-position="bottom"] [data-ry-target="content"] {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--ry-space-2, 0.5rem);
}

ry-tooltip[data-ry-position="left"] [data-ry-target="content"] {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: var(--ry-space-2, 0.5rem);
}

ry-tooltip[data-ry-position="right"] [data-ry-target="content"] {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: var(--ry-space-2, 0.5rem);
}

/* ═══════════════════════════════════════════════════════════════
   DRAWER
   ═══════════════════════════════════════════════════════════════ */

ry-drawer {
  display: contents;
}

ry-drawer [data-ry-target="backdrop"] {
  position: fixed;
  inset: 0;
  z-index: var(--ry-z-modal-backdrop, 1040);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ry-duration-normal, 200ms) var(--ry-ease, ease),
              visibility var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
  transition-behavior: allow-discrete;
}

ry-drawer[data-ry-state="open"] [data-ry-target="backdrop"] {
  opacity: 1;
  visibility: visible;
}

@starting-style {
  ry-drawer[data-ry-state="open"] [data-ry-target="backdrop"] {
    opacity: 0;
  }
}

ry-drawer [data-ry-target="panel"] {
  position: fixed;
  z-index: var(--ry-z-modal, 1050);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ry-duration-normal, 200ms) var(--ry-ease, ease),
              visibility var(--ry-duration-normal, 200ms) var(--ry-ease, ease),
              transform var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
  transition-behavior: allow-discrete;
}

ry-drawer[data-ry-state="open"] [data-ry-target="panel"] {
  opacity: 1;
  visibility: visible;
}

@starting-style {
  ry-drawer[data-ry-state="open"] [data-ry-target="panel"] {
    opacity: 0;
  }
}

/* Left drawer */
ry-drawer [data-ry-target="panel"][data-ry-side="left"] {
  top: 0;
  left: 0;
  bottom: 0;
  width: 20rem;
  max-width: 100%;
  transform: translateX(-100%);
}

ry-drawer[data-ry-state="open"] [data-ry-target="panel"][data-ry-side="left"] {
  transform: translateX(0);
}

/* Right drawer */
ry-drawer [data-ry-target="panel"][data-ry-side="right"] {
  top: 0;
  right: 0;
  bottom: 0;
  width: 20rem;
  max-width: 100%;
  transform: translateX(100%);
}

ry-drawer[data-ry-state="open"] [data-ry-target="panel"][data-ry-side="right"] {
  transform: translateX(0);
}

/* Top drawer */
ry-drawer [data-ry-target="panel"][data-ry-side="top"] {
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  max-height: 80vh;
  transform: translateY(-100%);
}

ry-drawer[data-ry-state="open"] [data-ry-target="panel"][data-ry-side="top"] {
  transform: translateY(0);
}

/* Bottom drawer */
ry-drawer [data-ry-target="panel"][data-ry-side="bottom"] {
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  max-height: 80vh;
  transform: translateY(100%);
}

ry-drawer[data-ry-state="open"] [data-ry-target="panel"][data-ry-side="bottom"] {
  transform: translateY(0);
}

ry-drawer [data-ry-target="close"] {
  position: absolute;
  top: var(--ry-space-4, 1rem);
  right: var(--ry-space-4, 1rem);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  cursor: pointer;
}

ry-drawer [data-ry-target="content"] {
  padding: var(--ry-space-6, 1.5rem);
  padding-top: var(--ry-space-12, 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  height: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */

[data-ry-target="toast-container"] {
  position: fixed;
  top: var(--ry-space-4, 1rem);
  right: var(--ry-space-4, 1rem);
  z-index: var(--ry-z-toast, 1080);
  display: flex;
  flex-direction: column;
  gap: var(--ry-space-3, 0.75rem);
  max-width: 24rem;
  pointer-events: none;
}

ry-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--ry-space-3, 0.75rem);
  padding: var(--ry-space-4, 1rem);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(1rem);
  transition: opacity var(--ry-duration-normal, 200ms) var(--ry-ease, ease),
              transform var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
  transition-behavior: allow-discrete;
}

ry-toast[data-ry-state="visible"] {
  opacity: 1;
  transform: translateX(0);
}

@starting-style {
  ry-toast[data-ry-state="visible"] {
    opacity: 0;
    transform: translateX(1rem);
  }
}

ry-toast[data-ry-state="hiding"] {
  opacity: 0;
  transform: translateX(1rem);
}

ry-toast [data-ry-target="icon"] {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

ry-toast [data-ry-target="content"] {
  flex: 1;
}

ry-toast [data-ry-target="close"] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  margin: calc(var(--ry-space-1, 0.25rem) * -1);
  border: none;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   SELECT
   ═══════════════════════════════════════════════════════════════ */

ry-select {
  position: relative;
  display: inline-block;
  min-width: 12rem;
}

ry-select[disabled] {
  cursor: not-allowed;
}

ry-select [data-ry-target="trigger"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ry-space-2, 0.5rem);
  width: 100%;
  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
  cursor: pointer;
}

ry-select [data-ry-target="value"] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

ry-select [data-ry-target="arrow"] {
  flex-shrink: 0;
  transition: transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
}

ry-select[data-ry-state="open"] [data-ry-target="arrow"] {
  transform: rotate(180deg);
}

ry-select [data-ry-target="dropdown"] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--ry-z-dropdown, 1000);
  margin-block-start: var(--ry-space-1, 0.25rem);
  padding: var(--ry-space-1, 0.25rem);
  max-height: 15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
              visibility var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
              transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
  transition-behavior: allow-discrete;
}

ry-select[data-ry-state="open"] [data-ry-target="dropdown"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@starting-style {
  ry-select[data-ry-state="open"] [data-ry-target="dropdown"] {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

ry-select[data-ry-position="top"] [data-ry-target="dropdown"] {
  top: auto;
  bottom: 100%;
  margin-block-start: 0;
  margin-block-end: var(--ry-space-1, 0.25rem);
  transform: translateY(0.5rem);
}

ry-select[data-ry-position="top"][data-ry-state="open"] [data-ry-target="dropdown"] {
  transform: translateY(0);
}

ry-select [data-ry-target="option"] {
  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
  cursor: pointer;
}

ry-select [data-ry-target="option"][data-disabled] {
  cursor: not-allowed;
}

ry-select [data-ry-target="native"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

ry-option {
  display: none;
}

/* Multi-select trigger */
ry-select[multiple] [data-ry-target="trigger"] {
  flex-wrap: wrap;
  gap: var(--ry-space-1, 0.25rem);
  min-height: 2.5rem;
}

ry-select[multiple] [data-ry-target="tags"] {
  display: contents;
}

ry-select[multiple] [data-ry-target="clear"] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  cursor: pointer;
}

ry-select[multiple] [data-ry-target="clear"] svg {
  width: 14px;
  height: 14px;
}

ry-select [data-ry-target="check"] {
  display: inline-flex;
  align-items: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: 0;
}

ry-select [data-ry-target="check"] svg {
  width: 14px;
  height: 14px;
}

ry-select [data-ry-target="option"][aria-selected="true"] [data-ry-target="check"] {
  opacity: 1;
}

ry-select[multiple] [data-ry-target="option"] {
  display: flex;
  align-items: center;
  gap: var(--ry-space-2, 0.5rem);
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAMES (structural animations)
   ═══════════════════════════════════════════════════════════════ */

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

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

@keyframes ry-slide-up {
  from { transform: translateY(1rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes ry-slide-down {
  from { transform: translateY(-1rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes ry-scale-in {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   CODE
   ═══════════════════════════════════════════════════════════════ */

ry-code {
  display: block;
  overflow: hidden;
  margin-block-end: var(--ry-space-4, 1rem);
}

ry-code [data-ry-target="header"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ry-space-2, 0.5rem) var(--ry-space-4, 1rem);
}

ry-code [data-ry-target="title"] {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

ry-code [data-ry-target="copy"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  cursor: pointer;
}

ry-code [data-ry-target="copy"] svg {
  width: 16px;
  height: 16px;
}

ry-code [data-ry-target="content"] {
  overflow: auto;
  padding: 0 var(--ry-space-4, 1rem) var(--ry-space-4, 1rem);
}

ry-code [data-ry-target="pre"] {
  margin: 0;
  overflow: visible;
}

ry-code [data-ry-target="code"] {
  display: block;
  white-space: pre;
  tab-size: 2;
}

ry-code .ry-code__line {
  display: flex;
}

ry-code .ry-code__line-number {
  flex-shrink: 0;
  width: 2rem;
  text-align: end;
  padding-inline-end: var(--ry-space-2, 0.5rem);
  user-select: none;
}

ry-code .ry-code__line-content {
  flex: 1;
  min-width: 0;
  padding-inline-start: var(--ry-space-2, 0.5rem);
}

ry-code .ry-code__color-preview {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-inline-end: var(--ry-space-1, 0.25rem);
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   EXAMPLE
   ═══════════════════════════════════════════════════════════════ */

ry-example {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ry-space-4, 1rem);
  align-items: start;
}

ry-example [data-ry-target="code"] {
  min-width: 0;
}

ry-example [data-ry-target="preview"] {
  min-width: 0;
  padding: var(--ry-space-4, 1rem);
}

@container (max-width: 768px) {
  ry-example {
    grid-template-columns: 1fr;
  }
}

ry-example[data-stacked] {
  grid-template-columns: 1fr;
}

.ry-example__usage {
  grid-column: 1 / -1;
  padding-block-end: 3rem;
}

.ry-example__usage-toggle {
  display: flex;
  align-items: center;
  gap: var(--ry-space-2, 0.5rem);
  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
  width: 100%;
  cursor: pointer;
}

.ry-example__usage-toggle ry-icon {
  transition: transform var(--ry-duration-fast, 150ms) ease;
}

.ry-example__usage-toggle[aria-expanded="true"] ry-icon {
  transform: rotate(180deg);
}

.ry-example__usage-panel {
  margin-block-start: var(--ry-space-2, 0.5rem);
}

.ry-example__usage-panel[hidden] {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   ICON
   ═══════════════════════════════════════════════════════════════ */

ry-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}

ry-icon svg {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   CHECKBOX
   ═══════════════════════════════════════════════════════════════ */

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  cursor: pointer;
  vertical-align: middle;
}

input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

input[type="checkbox"]::after {
  content: '';
  display: block;
  width: 0.375rem;
  height: 0.625rem;
  opacity: 0;
  transform: rotate(45deg) scale(0.8);
  transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
              transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
}

input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

/* ═══════════════════════════════════════════════════════════════
   RADIO
   ═══════════════════════════════════════════════════════════════ */

input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  cursor: pointer;
  vertical-align: middle;
}

input[type="radio"]:disabled {
  cursor: not-allowed;
}

input[type="radio"]::after {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  opacity: 0;
  transform: scale(0);
  transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
              transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
}

input[type="radio"]:checked::after {
  opacity: 1;
  transform: scale(1);
}

/* ═══════════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════════ */

table {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
}

th, td {
  padding: var(--ry-space-3, 0.75rem) var(--ry-space-4, 1rem);
  vertical-align: top;
}

th {
  text-align: start;
}

/* ═══════════════════════════════════════════════════════════════
   COLOR PICKER
   ═══════════════════════════════════════════════════════════════ */

ry-color-picker {
  position: relative;
  display: inline-block;
  user-select: none;
}

ry-color-picker[disabled] {
  pointer-events: none;
}

/* Trigger button (dropdown mode) */
ry-color-picker [data-ry-target="trigger"] {
  display: block;
  width: var(--ry-color-picker-trigger-size, 32px);
  height: var(--ry-color-picker-trigger-size, 32px);
  padding: 0;
  border: none;
  cursor: pointer;
}

ry-color-picker [data-ry-target="trigger-color"] {
  display: block;
  width: 100%;
  height: 100%;
}

/* Panel */
ry-color-picker [data-ry-target="panel"] {
  width: var(--ry-color-picker-width, 240px);
}

/* Dropdown mode: panel is absolutely positioned */
ry-color-picker:not([inline]) [data-ry-target="panel"] {
  position: absolute;
  left: 0;
  z-index: var(--ry-z-dropdown, 1000);
  opacity: 0;
  visibility: hidden;
}

/* Position below trigger */
ry-color-picker[data-ry-position="bottom"] [data-ry-target="panel"] {
  top: 100%;
  margin-top: var(--ry-space-1, 0.25rem);
  transform: translateY(-0.5rem);
}

/* Position above trigger */
ry-color-picker[data-ry-position="top"] [data-ry-target="panel"] {
  bottom: 100%;
  top: auto;
  margin-bottom: var(--ry-space-1, 0.25rem);
  transform: translateY(0.5rem);
}

/* Open state - only animate when position is set */
ry-color-picker[data-ry-state="open"][data-ry-position] [data-ry-target="panel"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
              transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
}

/* Inline mode: panel always visible */
ry-color-picker[inline] [data-ry-target="panel"] {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Grid (saturation/brightness) */
ry-color-picker [data-ry-target="grid"] {
  position: relative;
  width: 100%;
  height: var(--ry-color-picker-grid-height, 160px);
  cursor: crosshair;
  touch-action: none;
}

ry-color-picker [data-ry-target="grid-handle"] {
  position: absolute;
  width: var(--ry-color-picker-handle-size, 16px);
  height: var(--ry-color-picker-handle-size, 16px);
  transform: translate(-50%, -50%);
  cursor: grab;
}

ry-color-picker [data-ry-target="grid-handle"]:active {
  cursor: grabbing;
}

/* Controls row (sliders + preview) */
ry-color-picker [data-ry-target="controls"] {
  display: flex;
  gap: var(--ry-space-3, 0.75rem);
  padding: var(--ry-space-3, 0.75rem);
}

ry-color-picker [data-ry-target="sliders"] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ry-space-2, 0.5rem);
  justify-content: center;
}

/* Sliders (hue, alpha) */
ry-color-picker .ry-color-picker__slider {
  position: relative;
  height: var(--ry-color-picker-slider-height, 12px);
  cursor: pointer;
  touch-action: none;
}

ry-color-picker .ry-color-picker__slider-handle {
  position: absolute;
  top: 50%;
  width: var(--ry-color-picker-slider-handle, 16px);
  height: var(--ry-color-picker-slider-handle, 16px);
  transform: translate(-50%, -50%);
  cursor: grab;
}

ry-color-picker .ry-color-picker__slider-handle:active {
  cursor: grabbing;
}

/* Preview swatch */
ry-color-picker [data-ry-target="preview"] {
  position: relative;
  width: var(--ry-color-picker-preview-size, 40px);
  height: var(--ry-color-picker-preview-size, 40px);
  flex-shrink: 0;
}

ry-color-picker [data-ry-target="preview-color"] {
  position: absolute;
  inset: 0;
}

/* Input row */
ry-color-picker [data-ry-target="input-row"] {
  display: flex;
  gap: var(--ry-space-2, 0.5rem);
  padding: 0 var(--ry-space-3, 0.75rem) var(--ry-space-3, 0.75rem);
}

ry-color-picker [data-ry-target="input"] {
  flex: 1;
  min-width: 0;
  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
}

ry-color-picker [data-ry-target="format-toggle"] {
  flex-shrink: 0;
  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
  border: none;
  cursor: pointer;
}

/* Swatches */
ry-color-picker [data-ry-target="swatches"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ry-space-1, 0.25rem);
  padding: 0 var(--ry-space-3, 0.75rem) var(--ry-space-3, 0.75rem);
}

ry-color-picker .ry-color-picker__swatch {
  width: var(--ry-color-picker-swatch-size, 20px);
  height: var(--ry-color-picker-swatch-size, 20px);
  padding: 0;
  border: none;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   COLOR INPUT
   ═══════════════════════════════════════════════════════════════ */

ry-color-input {
  position: relative;
  display: inline-block;
}

ry-color-input[disabled] {
  pointer-events: none;
}

ry-color-input [data-ry-target="trigger"] {
  display: flex;
  align-items: stretch;
}

ry-color-input [data-ry-target="swatch"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ry-color-input-swatch-width, 40px);
  flex-shrink: 0;
  padding: 0;
  border: none;
  cursor: pointer;
}

ry-color-input [data-ry-target="swatch-color"] {
  display: block;
  width: 100%;
  height: 100%;
}

ry-color-input [data-ry-target="input"] {
  flex: 1;
  min-width: 0;
  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
}

/* Panel (dropdown) */
ry-color-input [data-ry-target="panel"] {
  position: absolute;
  left: 0;
  z-index: var(--ry-z-dropdown, 1000);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Position below trigger */
ry-color-input[data-ry-position="bottom"] [data-ry-target="panel"] {
  top: 100%;
  margin-top: var(--ry-space-1, 0.25rem);
  transform: translateY(-0.5rem);
}

/* Position above trigger */
ry-color-input[data-ry-position="top"] [data-ry-target="panel"] {
  bottom: 100%;
  top: auto;
  margin-bottom: var(--ry-space-1, 0.25rem);
  transform: translateY(0.5rem);
}

/* Open state */
ry-color-input[data-ry-state="open"][data-ry-position] [data-ry-target="panel"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
              transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
}

/* Hide the embedded picker's panel border since we provide our own */
ry-color-input ry-color-picker[inline] [data-ry-target="panel"] {
  border: none;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════
   GRADIENT PICKER
   ═══════════════════════════════════════════════════════════════ */

ry-gradient-picker {
  display: block;
  width: var(--ry-color-picker-width, 240px);
}

ry-gradient-picker[disabled] {
  pointer-events: none;
}

/* Controls row */
ry-gradient-picker [data-ry-target="controls"] {
  display: flex;
  align-items: center;
  gap: var(--ry-space-3, 0.75rem);
  padding: var(--ry-space-3, 0.75rem);
}

ry-gradient-picker [data-ry-target="type-toggle"] {
  display: flex;
  gap: var(--ry-space-1, 0.25rem);
}

ry-gradient-picker [data-ry-target="type-toggle"] button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  cursor: pointer;
}

ry-gradient-picker [data-ry-target="type-toggle"] button svg {
  width: 16px;
  height: 16px;
}

/* Angle control — visible when linear (default) */
ry-gradient-picker [data-ry-target="angle-control"] {
  display: flex;
  align-items: center;
  gap: var(--ry-space-1, 0.25rem);
  margin-inline-start: auto;
}

ry-gradient-picker [data-ry-target="angle-control"] ry-number-select {
  min-width: 0;
}

/* Shape control — hidden by default */
ry-gradient-picker [data-ry-target="shape-control"] {
  display: none;
  gap: var(--ry-space-1, 0.25rem);
  margin-inline-start: auto;
}

ry-gradient-picker [data-ry-target="shape-control"] button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  cursor: pointer;
}

ry-gradient-picker [data-ry-target="shape-control"] button svg {
  width: 16px;
  height: 16px;
}

/* When radial: hide angle, show shape */
ry-gradient-picker[data-ry-type="radial"] [data-ry-target="angle-control"] {
  display: none;
}

ry-gradient-picker[data-ry-type="radial"] [data-ry-target="shape-control"] {
  display: flex;
}

/* When solid: hide bar, angle, shape */
ry-gradient-picker[data-ry-type="solid"] :is([data-ry-target="bar-container"], [data-ry-target="angle-control"], [data-ry-target="shape-control"]) {
  display: none;
}

/* Gradient bar */
ry-gradient-picker [data-ry-target="bar-container"] {
  position: relative;
  margin: 0 10px;
  padding: var(--ry-space-4, 1rem) 0;
}

ry-gradient-picker [data-ry-target="bar"] {
  position: relative;
  height: var(--ry-gradient-picker-bar-height, 24px);
  cursor: pointer;
  touch-action: none;
}

/* Stop handle */
ry-gradient-picker [data-ry-target="stop"] {
  position: absolute;
  top: 50%;
  width: var(--ry-gradient-picker-stop-size, 16px);
  height: var(--ry-gradient-picker-stop-size, 16px);
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 1;
}

ry-gradient-picker [data-ry-target="stop"]:active {
  cursor: grabbing;
}

ry-gradient-picker [data-ry-target="stop"][data-selected] {
  z-index: 2;
  width: calc(var(--ry-gradient-picker-stop-size, 16px) + 4px);
  height: calc(var(--ry-gradient-picker-stop-size, 16px) + 4px);
}

/* Inline color picker — remove extra border */
ry-gradient-picker ry-color-picker[inline] [data-ry-target="panel"] {
  border: none;
  box-shadow: none;
}

/* CSS output */
ry-gradient-picker [data-ry-target="output-row"] {
  display: flex;
  align-items: center;
  gap: var(--ry-space-1, 0.25rem);
  padding: 0 var(--ry-space-3, 0.75rem) var(--ry-space-3, 0.75rem);
}

ry-gradient-picker [data-ry-target="output"] {
  flex: 1;
  min-width: 0;
  padding: var(--ry-space-1, 0.25rem) var(--ry-space-2, 0.5rem);
  border: none;
}

ry-gradient-picker [data-ry-target="copy-btn"] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  cursor: pointer;
}

ry-gradient-picker [data-ry-target="copy-btn"] svg {
  width: 14px;
  height: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   TREE
   ═══════════════════════════════════════════════════════════════ */

ry-tree {
  display: block;
}

ry-tree-item {
  display: none;
}

:is(.ry-tree__root, .ry-tree__children) {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ry-tree__children {
  margin-inline-start: 11px;
  padding-inline-start: 11px;
  overflow: hidden;
}

.ry-tree__item {
  position: relative;
  margin-block-start: var(--ry-space-1, 0.25rem);
}

/* Horizontal connector lines for nested items */
.ry-tree__children .ry-tree__item::before {
  content: "";
  position: absolute;
  inset-inline-start: -11px;
  top: 14px;
  width: 11px;
  height: 1px;
}

:is(.ry-tree__label, .ry-tree__file) {
  display: flex;
  align-items: center;
  gap: var(--ry-space-2, 0.5rem);
  padding: var(--ry-space-1, 0.25rem) var(--ry-space-2, 0.5rem);
  height: 28px;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}

/* Hidden checkbox — the CSS engine for expand/collapse */
/* Compound selector to override global input[type="checkbox"] styles */
input[type="checkbox"].ry-tree__toggle {
  display: none;
  appearance: auto;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
}

/* Folder icon swap */
.ry-tree__icon-open {
  display: none;
}
.ry-tree__icon-closed {
  display: flex;
}

.ry-tree__toggle:checked ~ .ry-tree__label .ry-tree__icon-open {
  display: flex;
}
.ry-tree__toggle:checked ~ .ry-tree__label .ry-tree__icon-closed {
  display: none;
}

/* Grid animation for expand/collapse */
.ry-tree__children-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ry-tree-duration, 150ms) var(--ry-ease, ease);
}

ry-tree[no-animate] .ry-tree__children-wrapper {
  transition-duration: 0ms;
}

.ry-tree__toggle:checked ~ .ry-tree__children-wrapper {
  grid-template-rows: 1fr;
}

.ry-tree__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Drag and Drop ── */

.ry-tree__ghost {
  position: fixed;
  pointer-events: none;
  user-select: none;
  z-index: var(--ry-z-toast, 1080);
  transform: rotate(-2deg);
}

.ry-tree__item[data-ry-dragging] {
  opacity: 0.4;
}

.ry-tree__item--collapsed {
  height: 4px;
  overflow: hidden;
  pointer-events: none;
}

.ry-tree__item:is([data-ry-drop-target="before"], [data-ry-drop-target="after"])::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 2px;
  pointer-events: none;
}

.ry-tree__item[data-ry-drop-target="before"]::after {
  top: -1px;
}

.ry-tree__item[data-ry-drop-target="after"]::after {
  bottom: -1px;
}

/* ═══════════════════════════════════════════════════════════════
   TAG
   ═══════════════════════════════════════════════════════════════ */

ry-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ry-space-1, 0.25rem);
  padding: var(--ry-space-1, 0.25rem) var(--ry-space-2, 0.5rem);
  max-width: 100%;
  line-height: 1;
}

ry-tag[disabled] {
  pointer-events: none;
}

ry-tag [data-ry-target="label"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

ry-tag [data-ry-target="remove"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  cursor: pointer;
}

ry-tag [data-ry-target="remove"] svg {
  width: 12px;
  height: 12px;
}

/* Size variants */
ry-tag[size="sm"] {
  padding: 2px var(--ry-space-1, 0.25rem);
}

ry-tag[size="sm"] [data-ry-target="remove"] {
  width: 0.75rem;
  height: 0.75rem;
}

ry-tag[size="sm"] [data-ry-target="remove"] svg {
  width: 10px;
  height: 10px;
}

ry-tag[size="lg"] {
  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
}

/* ═══════════════════════════════════════════════════════════════
   TAG INPUT
   ═══════════════════════════════════════════════════════════════ */

ry-tag-input {
  display: block;
}

ry-tag-input [data-ry-target="container"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ry-space-1, 0.25rem);
  padding: var(--ry-space-1, 0.25rem) var(--ry-space-2, 0.5rem);
  min-height: 2.5rem;
  cursor: text;
}

ry-tag-input [data-ry-target="input"] {
  flex: 1;
  min-width: 60px;
  padding: var(--ry-space-1, 0.25rem) 0;
  border: none;
  outline: none;
}

ry-tag-input[disabled] [data-ry-target="container"] {
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */

ry-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ry-space-16, 4rem) var(--ry-space-6, 1.5rem);
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

ry-hero[align="left"] {
  align-items: flex-start;
  text-align: start;
}

ry-hero > * + * {
  margin-block-start: var(--ry-space-4, 1rem);
}

ry-hero > h1 {
  margin: 0;
}

ry-hero > p {
  margin: 0;
  margin-block-start: var(--ry-space-4, 1rem);
}

/* Size variants */
ry-hero[size="sm"] {
  padding: var(--ry-space-8, 2rem) var(--ry-space-6, 1.5rem);
}

ry-hero[size="lg"] {
  padding: var(--ry-space-20, 5rem) var(--ry-space-6, 1.5rem);
}

ry-hero[full-bleed] {
  max-width: none;
}

/* ═══════════════════════════════════════════════════════════════
   STAT
   ═══════════════════════════════════════════════════════════════ */

ry-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ry-space-1, 0.25rem);
}

ry-stat[align="left"] {
  align-items: flex-start;
  text-align: start;
}

ry-stat [data-ry-target="value"] {
  display: flex;
  align-items: center;
  gap: var(--ry-space-2, 0.5rem);
}

ry-stat [data-ry-target="trend"] svg {
  width: 20px;
  height: 20px;
}

/* Size variants */
ry-stat[size="sm"] [data-ry-target="trend"] svg {
  width: 16px;
  height: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   FEATURE + FEATURE GRID
   ═══════════════════════════════════════════════════════════════ */

ry-feature-grid {
  display: grid;
  gap: var(--ry-space-6, 1.5rem);
}

ry-feature-grid[cols="2"] { grid-template-columns: repeat(2, 1fr); }
ry-feature-grid[cols="3"] { grid-template-columns: repeat(3, 1fr); }
ry-feature-grid[cols="4"] { grid-template-columns: repeat(4, 1fr); }

@container (max-width: 640px) {
  :is(ry-feature-grid[cols="2"], ry-feature-grid[cols="3"], ry-feature-grid[cols="4"]) {
    grid-template-columns: 1fr;
  }
}

@container (min-width: 641px) and (max-width: 1024px) {
  :is(ry-feature-grid[cols="3"], ry-feature-grid[cols="4"]) {
    grid-template-columns: repeat(2, 1fr);
  }
}

ry-feature {
  display: flex;
  flex-direction: column;
  gap: var(--ry-space-3, 0.75rem);
}

ry-feature[align="center"] {
  align-items: center;
  text-align: center;
}

ry-feature [data-ry-target="icon"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

ry-feature [data-ry-target="icon"] svg {
  width: 24px;
  height: 24px;
}

ry-feature h3 {
  margin: 0;
}

ry-feature p {
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PRICING + PRICING CARD
   ═══════════════════════════════════════════════════════════════ */

ry-pricing {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ry-space-6, 1.5rem);
  align-items: stretch;
}

@container (max-width: 640px) {
  ry-pricing {
    flex-direction: column;
    align-items: center;
  }
}

ry-pricing-card {
  display: flex;
  flex-direction: column;
  padding: var(--ry-space-8, 2rem);
  width: 100%;
  max-width: 20rem;
}

ry-pricing-card[featured] {
  transform: scale(1.05);
  z-index: 1;
}

ry-pricing-card h3 {
  margin: 0 0 var(--ry-space-2, 0.5rem) 0;
}

ry-pricing-card [slot="price"] {
  margin-block-end: var(--ry-space-6, 1.5rem);
}

ry-pricing-card [slot="price"] span {
  display: inline;
}

ry-pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--ry-space-6, 1.5rem) 0;
  flex: 1;
}

ry-pricing-card ul li {
  padding: var(--ry-space-2, 0.5rem) 0;
}

ry-pricing-card :is(ry-button, .ry-btn) {
  margin-block-start: auto;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   CAROUSEL
   ═══════════════════════════════════════════════════════════════ */

ry-carousel {
  display: block;
  position: relative;
  overflow: hidden;
  outline: none;
}

ry-carousel [data-ry-target="viewport"] {
  overflow: hidden;
  touch-action: pan-y;
}

ry-carousel [data-ry-target="track"] {
  display: flex;
  transition: transform var(--ry-duration-normal, 200ms) var(--ry-ease, ease);
}

ry-carousel [data-ry-target="slide"] {
  flex: 0 0 100%;
  min-width: 0;
}

ry-carousel :is([data-ry-target="prev"], [data-ry-target="next"]) {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  cursor: pointer;
}

ry-carousel [data-ry-target="prev"] {
  left: var(--ry-space-3, 0.75rem);
}

ry-carousel [data-ry-target="next"] {
  right: var(--ry-space-3, 0.75rem);
}

ry-carousel :is([data-ry-target="prev"], [data-ry-target="next"]) svg {
  width: 20px;
  height: 20px;
}

ry-carousel [data-ry-target="dots"] {
  display: flex;
  justify-content: center;
  gap: var(--ry-space-2, 0.5rem);
  padding: var(--ry-space-3, 0.75rem) 0;
}

ry-carousel [data-ry-target="dot"] {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   COMBOBOX
   ═══════════════════════════════════════════════════════════════ */

ry-combobox {
  position: relative;
  display: inline-block;
  min-width: 12rem;
}

ry-combobox[disabled] {
  cursor: not-allowed;
}

ry-combobox [data-ry-target="input-wrapper"] {
  display: flex;
  align-items: center;
  gap: var(--ry-space-2, 0.5rem);
  width: 100%;
}

ry-combobox [data-ry-target="input"] {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
  border: none;
  outline: none;
  background: transparent;
}

ry-combobox [data-ry-target="arrow"] {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: var(--ry-space-2, 0.5rem);
  cursor: pointer;
  transition: transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
}

ry-combobox[data-ry-state="open"] [data-ry-target="arrow"] {
  transform: rotate(180deg);
}

ry-combobox [data-ry-target="dropdown"] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--ry-z-dropdown, 1000);
  margin-block-start: var(--ry-space-1, 0.25rem);
  padding: var(--ry-space-1, 0.25rem);
  max-height: 15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
              visibility var(--ry-duration-fast, 100ms) var(--ry-ease, ease),
              transform var(--ry-duration-fast, 100ms) var(--ry-ease, ease);
  transition-behavior: allow-discrete;
}

ry-combobox[data-ry-state="open"] [data-ry-target="dropdown"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@starting-style {
  ry-combobox[data-ry-state="open"] [data-ry-target="dropdown"] {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

ry-combobox[data-ry-position="top"] [data-ry-target="dropdown"] {
  top: auto;
  bottom: 100%;
  margin-block-start: 0;
  margin-block-end: var(--ry-space-1, 0.25rem);
  transform: translateY(0.5rem);
}

ry-combobox[data-ry-position="top"][data-ry-state="open"] [data-ry-target="dropdown"] {
  transform: translateY(0);
}

ry-combobox [data-ry-target="option"] {
  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
  cursor: pointer;
}

ry-combobox [data-ry-target="option"][hidden] {
  display: none;
}

ry-combobox [data-ry-target="option"][data-disabled] {
  cursor: not-allowed;
}

ry-combobox [data-ry-target="empty"] {
  padding: var(--ry-space-3, 0.75rem);
  text-align: center;
}

ry-combobox [data-ry-target="empty"][hidden] {
  display: none;
}

ry-combobox [data-ry-target="native"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIAL
   ═══════════════════════════════════════════════════════════════ */

ry-testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ry-space-3, 0.75rem);
  padding: var(--ry-space-6, 1.5rem);
}

ry-testimonial [data-ry-target="avatar"] {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  overflow: hidden;
  flex-shrink: 0;
}

ry-testimonial [data-ry-target="avatar"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

ry-testimonial [data-ry-target="quote"] {
  margin: 0;
  max-inline-size: 36rem;
}

ry-testimonial [data-ry-target="stars"] {
  display: flex;
  gap: var(--ry-space-1, 0.25rem);
}

ry-testimonial [data-ry-target="stars"] svg {
  width: 16px;
  height: 16px;
}

ry-testimonial [data-ry-target="attribution"] {
  display: flex;
  flex-direction: column;
  gap: var(--ry-space-1, 0.25rem);
}

/* ═══════════════════════════════════════════════════════════════
   THEME PANEL
   ═══════════════════════════════════════════════════════════════ */

ry-theme-panel {
  position: fixed;
  inset-block-end: var(--ry-space-4, 1rem);
  inset-inline-end: var(--ry-space-4, 1rem);
  z-index: var(--ry-z-fixed, 1000);
}

ry-theme-panel [data-ry-target="panel"] {
  display: flex;
  flex-direction: column;
  gap: var(--ry-space-2, 0.5rem);
  padding: var(--ry-space-3, 0.75rem);
}

ry-theme-panel [data-ry-target="theme-row"],
ry-theme-panel [data-ry-target="mode-row"] {
  display: flex;
  align-items: center;
  gap: var(--ry-space-3, 0.75rem);
}

ry-theme-panel [data-ry-target="theme-options"],
ry-theme-panel [data-ry-target="mode-options"] {
  display: flex;
  gap: var(--ry-space-1, 0.25rem);
}

ry-theme-panel [data-ry-target="label"] {
  min-inline-size: 3rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

ry-theme-panel [data-ry-target="theme-btn"],
ry-theme-panel [data-ry-target="mode-btn"] {
  padding: var(--ry-space-1, 0.25rem) var(--ry-space-2, 0.5rem);
  font: inherit;
  font-size: 0.6875rem;
  cursor: pointer;
  border: none;
  background: none;
  line-height: 1;
}

} /* @layer ry-structure */

/**
 * ry-ui Theme CSS
 *
 * All visual styling: colors, shadows, borders, typography.
 * Requires ry-structure.css for layout.
 * Override these styles or swap with your own theme.
 */

@layer ry-theme {

/* ═══════════════════════════════════════════════════════════════
   BASE / BODY
   ═══════════════════════════════════════════════════════════════ */

html {
  background-color: var(--ry-color-bg);
}

/* ═══════════════════════════════════════════════════════════════
   FOCUS STYLES
   ═══════════════════════════════════════════════════════════════ */

:is([class^="ry-"], [class*=" ry-"], ry-button, .ry-btn, .ry-input):focus-visible {
  outline: none;
  box-shadow: var(--ry-focus-ring);
}

/* ═══════════════════════════════════════════════════════════════
   PAGE TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */

ry-page {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-base);
  line-height: var(--ry-leading-normal);
  color: var(--ry-color-text);
  background-color: var(--ry-color-bg);
}

ry-page :is(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 var(--ry-space-4) 0;
  font-weight: var(--ry-font-semibold);
  line-height: var(--ry-leading-tight);
  color: var(--ry-color-text);
}

ry-page h1 { font-size: var(--ry-text-4xl); }
ry-page h2 { font-size: var(--ry-text-3xl); }
ry-page h3 { font-size: var(--ry-text-2xl); }
ry-page h4 { font-size: var(--ry-text-xl); }

ry-page p {
  margin: 0 0 var(--ry-space-4) 0;
}

ry-page a {
  color: var(--ry-color-primary);
  text-decoration: none;
}

ry-page a:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */

ry-header {
  background-color: var(--ry-color-bg);
  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
}

ry-header strong {
  font-size: var(--ry-text-xl);
}

ry-header span {
  color: var(--ry-color-text-muted);
}

ry-header a:not(.ry-btn) {
  color: var(--ry-color-text-muted);
  text-decoration: none;
  font-size: var(--ry-text-sm);
  transition: color var(--ry-duration-fast);
}

ry-header a:not(.ry-btn):hover {
  color: var(--ry-color-text);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

ry-footer {
  background-color: var(--ry-color-bg-subtle);
  border-block-start: var(--ry-border-width) solid var(--ry-color-border);
  color: var(--ry-color-text-muted);
}

ry-footer a {
  color: inherit;
  text-decoration: none;
  transition: color var(--ry-duration-fast);
}

ry-footer a:hover {
  color: var(--ry-color-text);
}

/* ═══════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════ */

ry-nav a {
  color: var(--ry-color-text-muted);
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  transition: color var(--ry-duration-fast) var(--ry-ease);
}

ry-nav a:hover {
  color: var(--ry-color-text);
}

ry-nav a[aria-current="page"] {
  color: var(--ry-color-primary);
}

/* ═══════════════════════════════════════════════════════════════
   LOGO
   ═══════════════════════════════════════════════════════════════ */

ry-logo {
  font-size: var(--ry-text-xl);
  font-weight: var(--ry-font-bold);
  color: var(--ry-color-text);
}

/* ═══════════════════════════════════════════════════════════════
   DIVIDER
   ═══════════════════════════════════════════════════════════════ */

ry-divider {
  background-color: var(--ry-color-border);
}

/* ═══════════════════════════════════════════════════════════════
   SPLIT HANDLE
   ═══════════════════════════════════════════════════════════════ */

ry-split [data-ry-target="handle"]::after {
  background-color: var(--ry-color-border-strong);
}

ry-split[data-ry-resizing] [data-ry-target="handle"]::after {
  background-color: var(--ry-color-primary);
}

ry-split [data-ry-target="handle"]:focus-visible {
  outline: none;
}

ry-split [data-ry-target="handle"]:focus-visible::after {
  opacity: 1;
  background-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

:is(.ry-btn, ry-button) {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  line-height: var(--ry-leading-normal);
  text-decoration: none;

  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
  border: var(--ry-border-width) solid transparent;
  border-radius: var(--ry-radius-md);

  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: var(--ry-duration-fast);
  transition-timing-function: var(--ry-ease);
}

:is(.ry-btn, ry-button):hover {
  background-color: var(--ry-color-primary-hover);
}

:is(.ry-btn, ry-button):active {
  background-color: var(--ry-color-primary-active);
}

:is(.ry-btn:disabled, .ry-btn[aria-disabled="true"], ry-button[disabled]) {
  opacity: 0.5;
}

/* Button variants */
:is(.ry-btn--secondary, ry-button[variant="secondary"]) {
  background-color: var(--ry-color-secondary);
}
:is(.ry-btn--secondary, ry-button[variant="secondary"]):hover {
  background-color: var(--ry-color-secondary-hover);
}

:is(.ry-btn--outline, ry-button[variant="outline"]) {
  background-color: transparent;
  color: var(--ry-color-primary);
  border-color: var(--ry-color-primary);
}
:is(.ry-btn--outline, ry-button[variant="outline"]):hover {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

:is(.ry-btn--ghost, ry-button[variant="ghost"]) {
  background-color: transparent;
  color: var(--ry-color-text);
}
:is(.ry-btn--ghost, ry-button[variant="ghost"]):hover {
  background-color: var(--ry-color-bg-muted);
}

:is(.ry-btn--danger, ry-button[variant="danger"]) {
  background-color: var(--ry-color-danger);
}
:is(.ry-btn--danger, ry-button[variant="danger"]):hover {
  background-color: var(--ry-color-danger-hover);
}

:is(.ry-btn--accent, ry-button[variant="accent"]) {
  background-color: var(--ry-color-accent);
}
:is(.ry-btn--accent, ry-button[variant="accent"]):hover {
  background-color: var(--ry-color-accent-hover);
}

/* Pressed/active toggle state */
:is(.ry-btn[aria-pressed="true"], ry-button[pressed]) {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
  border-color: var(--ry-color-primary);
}
:is(.ry-btn[aria-pressed="true"], ry-button[pressed]):hover {
  background-color: var(--ry-color-primary-hover);
  border-color: var(--ry-color-primary-hover);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTON GROUP
   ═══════════════════════════════════════════════════════════════ */

ry-button-group {
  background-color: var(--ry-color-bg-muted);
}

ry-button-group > :is(ry-button, ry-toggle-button) {
  border-color: transparent;
  background-color: transparent;
  color: var(--ry-color-text-muted);
}

ry-button-group > :is(ry-button, ry-toggle-button):hover:not([pressed]) {
  color: var(--ry-color-text);
}

/* Button sizes (typography only - padding is structural) */
:is(.ry-btn--sm, ry-button[size="sm"]) {
  font-size: var(--ry-text-xs);
}

:is(.ry-btn--lg, ry-button[size="lg"]) {
  font-size: var(--ry-text-base);
}

/* ═══════════════════════════════════════════════════════════════
   TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════════ */

ry-toggle-button {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  line-height: var(--ry-leading-normal);
  text-decoration: none;

  background-color: var(--ry-color-bg);
  color: var(--ry-color-text);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);

  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: var(--ry-duration-fast);
  transition-timing-function: var(--ry-ease);
}

ry-toggle-button:hover {
  background-color: var(--ry-color-bg-muted);
  border-color: var(--ry-color-border-strong);
}

ry-toggle-button:active {
  background-color: var(--ry-color-bg-subtle);
}

ry-toggle-button[pressed] {
  background-color: var(--ry-color-primary);
  border-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

ry-toggle-button[pressed]:hover {
  background-color: var(--ry-color-primary-hover);
  border-color: var(--ry-color-primary-hover);
}

ry-toggle-button[disabled] {
  opacity: 0.5;
}

ry-toggle-button:focus-visible {
  outline: none;
  box-shadow: var(--ry-focus-ring);
}

/* Size variants (typography only) */
ry-toggle-button[size="sm"] {
  font-size: var(--ry-text-xs);
}

ry-toggle-button[size="lg"] {
  font-size: var(--ry-text-base);
}

/* ═══════════════════════════════════════════════════════════════
   SLIDER
   ═══════════════════════════════════════════════════════════════ */

ry-slider [data-ry-target="track"] {
  background-color: var(--ry-color-bg-muted);
  border-radius: var(--ry-radius-full);
}

ry-slider [data-ry-target="fill"] {
  background-color: var(--ry-color-primary);
  border-radius: var(--ry-radius-full);
}

ry-slider [data-ry-target^="thumb"] {
  background-color: var(--ry-color-bg);
  border: 2px solid var(--ry-color-primary);
  border-radius: var(--ry-radius-full);
  box-shadow: var(--ry-shadow-sm);
  transition: box-shadow var(--ry-duration-fast) var(--ry-ease);
}

ry-slider [data-ry-target^="thumb"]:hover {
  box-shadow: var(--ry-shadow-md);
}

ry-slider [data-ry-target^="thumb"]:focus-visible {
  outline: none;
  box-shadow: var(--ry-focus-ring);
}

ry-slider[disabled] {
  opacity: 0.5;
}

ry-slider [data-ry-target="labels"] {
  font-size: var(--ry-text-xs);
  color: var(--ry-color-text-muted);
}

ry-slider [data-ry-target^="tooltip"] {
  background-color: var(--ry-color-text);
  color: var(--ry-color-text-inverse);
  padding: var(--ry-space-1) var(--ry-space-2);
  border-radius: var(--ry-radius-md);
  font-size: var(--ry-text-xs);
  font-weight: var(--ry-font-medium);
}

/* Color variants */
ry-slider[color="secondary"] [data-ry-target="fill"] { background-color: var(--ry-color-secondary); }
ry-slider[color="secondary"] [data-ry-target^="thumb"] { border-color: var(--ry-color-secondary); }

ry-slider[color="success"] [data-ry-target="fill"] { background-color: var(--ry-color-success); }
ry-slider[color="success"] [data-ry-target^="thumb"] { border-color: var(--ry-color-success); }

ry-slider[color="warning"] [data-ry-target="fill"] { background-color: var(--ry-color-warning); }
ry-slider[color="warning"] [data-ry-target^="thumb"] { border-color: var(--ry-color-warning); }

ry-slider[color="danger"] [data-ry-target="fill"] { background-color: var(--ry-color-danger); }
ry-slider[color="danger"] [data-ry-target^="thumb"] { border-color: var(--ry-color-danger); }

ry-slider[color="info"] [data-ry-target="fill"] { background-color: var(--ry-color-info); }
ry-slider[color="info"] [data-ry-target^="thumb"] { border-color: var(--ry-color-info); }

/* ═══════════════════════════════════════════════════════════════
   KNOB
   ═══════════════════════════════════════════════════════════════ */

ry-knob [data-ry-target="ring"] {
  background: conic-gradient(
    from 225deg,
    var(--ry-color-primary) calc(var(--knob-percent) * 270deg),
    var(--ry-color-bg-muted) calc(var(--knob-percent) * 270deg)
  );
  border-radius: var(--ry-radius-full);
}

ry-knob [data-ry-target="cap"] {
  background: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-full);
  margin: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
}

ry-knob [data-ry-target="indicator"] {
  background-color: var(--ry-color-primary);
  border-radius: 1.5px;
}

ry-knob [data-ry-target="display"] {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  color: var(--ry-color-text);
}

ry-knob [data-ry-target="label"] {
  font-size: var(--ry-text-xs);
  color: var(--ry-color-text-muted);
}

ry-knob:focus-visible [data-ry-target="ring"] {
  box-shadow: var(--ry-focus-ring);
}

ry-knob[disabled] {
  opacity: 0.5;
}

/* Color variants */
ry-knob[color="secondary"] [data-ry-target="ring"] {
  background: conic-gradient(
    from 225deg,
    var(--ry-color-secondary) calc(var(--knob-percent) * 270deg),
    var(--ry-color-bg-muted) calc(var(--knob-percent) * 270deg)
  );
}
ry-knob[color="secondary"] [data-ry-target="indicator"] { background-color: var(--ry-color-secondary); }

ry-knob[color="success"] [data-ry-target="ring"] {
  background: conic-gradient(
    from 225deg,
    var(--ry-color-success) calc(var(--knob-percent) * 270deg),
    var(--ry-color-bg-muted) calc(var(--knob-percent) * 270deg)
  );
}
ry-knob[color="success"] [data-ry-target="indicator"] { background-color: var(--ry-color-success); }

ry-knob[color="warning"] [data-ry-target="ring"] {
  background: conic-gradient(
    from 225deg,
    var(--ry-color-warning) calc(var(--knob-percent) * 270deg),
    var(--ry-color-bg-muted) calc(var(--knob-percent) * 270deg)
  );
}
ry-knob[color="warning"] [data-ry-target="indicator"] { background-color: var(--ry-color-warning); }

ry-knob[color="danger"] [data-ry-target="ring"] {
  background: conic-gradient(
    from 225deg,
    var(--ry-color-danger) calc(var(--knob-percent) * 270deg),
    var(--ry-color-bg-muted) calc(var(--knob-percent) * 270deg)
  );
}
ry-knob[color="danger"] [data-ry-target="indicator"] { background-color: var(--ry-color-danger); }

/* ═══════════════════════════════════════════════════════════════
   NUMBER SELECT
   ═══════════════════════════════════════════════════════════════ */

.ry-number-select__btn {
  background: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  color: var(--ry-color-text);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              border-color var(--ry-duration-fast) var(--ry-ease);
}

.ry-number-select__btn:hover {
  background-color: var(--ry-color-bg-muted);
  border-color: var(--ry-color-border-strong);
}

.ry-number-select__btn:active {
  background-color: var(--ry-color-bg-subtle);
}

.ry-number-select__decrement {
  border-start-start-radius: var(--ry-radius-md);
  border-end-start-radius: var(--ry-radius-md);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-inline-end: none;
}

.ry-number-select__increment {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--ry-radius-md);
  border-end-end-radius: var(--ry-radius-md);
  border-inline-start: none;
}

/* Single-button rounding */
ry-number-select[arrows="start"] .ry-number-select__decrement {
  border-radius: var(--ry-radius-md);
  border-inline-end: var(--ry-border-width) solid var(--ry-color-border);
}

ry-number-select[arrows="end"] .ry-number-select__increment {
  border-radius: var(--ry-radius-md);
  border-inline-start: var(--ry-border-width) solid var(--ry-color-border);
}

.ry-number-select__display {
  background-color: var(--ry-color-bg);
  border-block-start: var(--ry-border-width) solid var(--ry-color-border);
  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
}

/* Display borders when both arrows */
ry-number-select:not([arrows]) .ry-number-select__display,
ry-number-select[arrows="both"] .ry-number-select__display {
  border-inline-start: none;
  border-inline-end: none;
}

/* No arrows: full border + radius */
ry-number-select[arrows="none"] .ry-number-select__display {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);
}

/* Start only: display gets end border + end radius */
ry-number-select[arrows="start"] .ry-number-select__display {
  border-inline-end: var(--ry-border-width) solid var(--ry-color-border);
  border-inline-start: none;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--ry-radius-md);
  border-end-end-radius: var(--ry-radius-md);
}

/* End only: display gets start border + start radius */
ry-number-select[arrows="end"] .ry-number-select__display {
  border-inline-start: var(--ry-border-width) solid var(--ry-color-border);
  border-inline-end: none;
  border-start-start-radius: var(--ry-radius-md);
  border-end-start-radius: var(--ry-radius-md);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/* Stacked: top-rounded increment, bottom-rounded decrement, no radius on display */
ry-number-select[arrows="stacked"] .ry-number-select__increment {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-block-end: none;
  border-radius: var(--ry-radius-md) var(--ry-radius-md) 0 0;
}

ry-number-select[arrows="stacked"] .ry-number-select__decrement {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-block-start: none;
  border-radius: 0 0 var(--ry-radius-md) var(--ry-radius-md);
}

ry-number-select[arrows="stacked"] .ry-number-select__display {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-block-start: none;
  border-block-end: none;
  border-radius: 0;
}

/* Stacked-end: display start-rounded, buttons end-rounded */
ry-number-select[arrows="stacked-end"] .ry-number-select__display {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-inline-end: none;
  border-start-start-radius: var(--ry-radius-md);
  border-end-start-radius: var(--ry-radius-md);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

ry-number-select[arrows="stacked-end"] .ry-number-select__increment {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-block-end: none;
  border-start-end-radius: var(--ry-radius-md);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

ry-number-select[arrows="stacked-end"] .ry-number-select__decrement {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-end-end-radius: var(--ry-radius-md);
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: 0;
}

/* Stacked-start: buttons start-rounded, display end-rounded */
ry-number-select[arrows="stacked-start"] .ry-number-select__display {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-inline-start: none;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--ry-radius-md);
  border-end-end-radius: var(--ry-radius-md);
}

ry-number-select[arrows="stacked-start"] .ry-number-select__increment {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-block-end: none;
  border-start-start-radius: var(--ry-radius-md);
  border-start-end-radius: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

ry-number-select[arrows="stacked-start"] .ry-number-select__decrement {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-end-start-radius: var(--ry-radius-md);
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.ry-number-select__value {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  color: var(--ry-color-text);
}

.ry-number-select__input {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  color: var(--ry-color-text);
  background: transparent;
  border: none;
  border-block-end: 2px solid var(--ry-color-primary);
}

.ry-number-select__display:focus-visible {
  outline: none;
  box-shadow: var(--ry-focus-ring);
  border-color: var(--ry-color-primary);
}

.ry-number-select__affix {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
}

.ry-number-select__label {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
}

ry-number-select[disabled] {
  opacity: 0.5;
}

ry-number-select[size="xs"] .ry-number-select__value {
  font-size: var(--ry-text-xs);
}

ry-number-select[size="xs"] .ry-number-select__affix {
  font-size: var(--ry-text-xs);
}

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */

ry-card {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-sm);
}

:is(a, [interactive]):is(ry-card) {
  transition: border-color var(--ry-duration-normal) var(--ry-ease),
              box-shadow var(--ry-duration-normal) var(--ry-ease);
}

:is(a, [interactive]):is(ry-card):hover {
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-shadow-md);
}

ry-card h3 {
  font-size: var(--ry-text-lg);
  font-weight: var(--ry-font-semibold);
}

ry-card p {
  color: var(--ry-color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════ */

:is(.ry-badge, ry-badge) {
  font-size: var(--ry-text-xs);
  font-weight: var(--ry-font-medium);
  background-color: var(--ry-color-bg-muted);
  color: var(--ry-color-text);
  border-radius: var(--ry-radius-full);
}

:is(.ry-badge--primary, ry-badge[variant="primary"]) {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

:is(.ry-badge--success, ry-badge[variant="success"]) {
  background-color: var(--ry-color-success);
  color: var(--ry-color-text-inverse);
}

:is(.ry-badge--warning, ry-badge[variant="warning"]) {
  background-color: var(--ry-color-warning);
  color: var(--ry-color-text);
}

:is(.ry-badge--danger, ry-badge[variant="danger"]) {
  background-color: var(--ry-color-danger);
  color: var(--ry-color-text-inverse);
}

:is(.ry-badge--accent, ry-badge[variant="accent"]) {
  background-color: var(--ry-color-accent);
  color: var(--ry-color-text-inverse);
}

/* Arbitrary color via style="--ry-badge-color: ..." */
ry-badge[style*="--ry-badge-color"] {
  background-color: var(--ry-badge-color);
  color: var(--ry-badge-text, var(--ry-color-text-inverse));
}

/* ═══════════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════════ */

:is(.ry-alert, ry-alert) {
  background-color: var(--ry-color-bg-subtle);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
}

:is(.ry-alert--info, ry-alert[type="info"]) {
  background-color: var(--ry-color-info-bg);
  border-color: var(--ry-color-info);
  color: var(--ry-color-info-text);
}

:is(.ry-alert--success, ry-alert[type="success"]) {
  background-color: var(--ry-color-success-bg);
  border-color: var(--ry-color-success);
  color: var(--ry-color-success-text);
}

:is(.ry-alert--warning, ry-alert[type="warning"]) {
  background-color: var(--ry-color-warning-bg);
  border-color: var(--ry-color-warning);
  color: var(--ry-color-warning-text);
}

:is(.ry-alert--danger, ry-alert[type="danger"]) {
  background-color: var(--ry-color-danger-bg);
  border-color: var(--ry-color-danger);
  color: var(--ry-color-danger-text);
}

:is(.ry-alert__title, ry-alert [slot="title"]) {
  font-weight: var(--ry-font-semibold);
}

/* ═══════════════════════════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════ */

:is(.ry-input, ry-field input, ry-field textarea, ry-field select) {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-base);
  line-height: var(--ry-leading-normal);
  color: var(--ry-color-text);

  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);

  transition: border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

:is(.ry-input, ry-field input, ry-field textarea):hover {
  border-color: var(--ry-color-border-strong);
}

:is(.ry-input, ry-field input, ry-field textarea):focus {
  outline: none;
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

:is(.ry-input, ry-field input, ry-field textarea)::placeholder {
  color: var(--ry-color-text-muted);
}

:is(.ry-input, ry-field input, ry-field textarea):disabled {
  background-color: var(--ry-color-bg-muted);
  opacity: 0.5;
}

:is(.ry-label, ry-field label) {
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  color: var(--ry-color-text);
}

.ry-field__error {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-danger);
}

.ry-field__hint {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
}

/* Error state on input */
ry-field:has([data-ry-target="error"]:not(:empty)) :is(input, textarea, select) {
  border-color: var(--ry-color-danger);
}

ry-field:has([data-ry-target="error"]:not(:empty)) :is(input, textarea, select):focus {
  box-shadow: 0 0 0 3px light-dark(oklch(0.637 0.208 25.3 / 0.3), oklch(0.637 0.208 25.3 / 0.3));
}

/* ═══════════════════════════════════════════════════════════════
   ACCORDION
   ═══════════════════════════════════════════════════════════════ */

ry-accordion {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
}

:is(.ry-accordion__item, ry-accordion-item) {
  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
}

:is(.ry-accordion__item, ry-accordion-item):last-child {
  border-block-end: none;
}

.ry-accordion__trigger {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-base);
  font-weight: var(--ry-font-medium);
  color: var(--ry-color-text);
  background-color: transparent;
  transition: background-color var(--ry-duration-fast) var(--ry-ease);
}

.ry-accordion__trigger:hover {
  background-color: var(--ry-color-bg-subtle);
}

.ry-accordion__trigger:focus-visible {
  outline: none;
  box-shadow: inset var(--ry-focus-ring);
}

.ry-accordion__content {
  color: var(--ry-color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════ */

.ry-tabs__list {
  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
}

.ry-tabs__trigger {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  color: var(--ry-color-text-muted);
  background: transparent;
  transition: color var(--ry-duration-fast) var(--ry-ease),
              border-color var(--ry-duration-fast) var(--ry-ease);
}

.ry-tabs__trigger:hover {
  color: var(--ry-color-text);
}

.ry-tabs__trigger[aria-selected="true"] {
  color: var(--ry-color-primary);
  border-block-end-color: var(--ry-color-primary);
}

.ry-tabs__trigger:focus-visible {
  outline: none;
  box-shadow: var(--ry-focus-ring);
  border-radius: var(--ry-radius-sm);
}

/* ═══════════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════════ */

.ry-modal__backdrop {
  background-color: var(--ry-color-overlay);
}

.ry-modal__dialog {
  background-color: var(--ry-color-bg);
  border-radius: var(--ry-radius-xl);
  box-shadow: var(--ry-shadow-xl);
}

.ry-modal__header {
  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
}

.ry-modal__title {
  font-size: var(--ry-text-lg);
  font-weight: var(--ry-font-semibold);
}

.ry-modal__close {
  font-size: var(--ry-text-xl);
  background: transparent;
  border-radius: var(--ry-radius-md);
  color: var(--ry-color-text-muted);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              color var(--ry-duration-fast) var(--ry-ease);
}

.ry-modal__close:hover {
  background-color: var(--ry-color-bg-muted);
  color: var(--ry-color-text);
}

.ry-modal__footer {
  border-block-start: var(--ry-border-width) solid var(--ry-color-border);
  background-color: var(--ry-color-bg-subtle);
}

/* ═══════════════════════════════════════════════════════════════
   DROPDOWN
   ═══════════════════════════════════════════════════════════════ */

:is(.ry-dropdown__menu, ry-menu) {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-lg);
}

:is(.ry-dropdown__item, ry-menu-item) {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
  background: transparent;
  border-radius: var(--ry-radius-md);
  transition: background-color var(--ry-duration-fast) var(--ry-ease);
}

:is(.ry-dropdown__item, ry-menu-item):hover {
  background-color: var(--ry-color-bg-muted);
}

:is(.ry-dropdown__item, ry-menu-item):focus-visible {
  outline: none;
  box-shadow: inset var(--ry-focus-ring);
}

.ry-dropdown__divider {
  background-color: var(--ry-color-border);
}

/* ═══════════════════════════════════════════════════════════════
   SWITCH
   ═══════════════════════════════════════════════════════════════ */

ry-switch[disabled] {
  opacity: 0.5;
}

.ry-switch__track {
  background-color: var(--ry-color-bg-muted);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-full);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              border-color var(--ry-duration-fast) var(--ry-ease);
}

ry-switch[checked] .ry-switch__track {
  background-color: var(--ry-color-primary);
  border-color: var(--ry-color-primary);
}

.ry-switch__thumb {
  background-color: var(--ry-color-bg);
  border-radius: var(--ry-radius-full);
  box-shadow: var(--ry-shadow-sm);
}

.ry-switch__label {
  font-size: var(--ry-text-sm);
  font-weight: var(--ry-font-medium);
  color: var(--ry-color-text);
}

ry-switch:focus-visible .ry-switch__track {
  box-shadow: var(--ry-focus-ring);
}

/* ═══════════════════════════════════════════════════════════════
   TOOLTIP
   ═══════════════════════════════════════════════════════════════ */

.ry-tooltip__content {
  font-size: var(--ry-text-xs);
  font-weight: var(--ry-font-medium);
  line-height: var(--ry-leading-tight);
  background-color: var(--ry-color-text);
  color: var(--ry-color-text-inverse);
  border-radius: var(--ry-radius-md);
}

/* ═══════════════════════════════════════════════════════════════
   DRAWER
   ═══════════════════════════════════════════════════════════════ */

.ry-drawer__backdrop {
  background-color: var(--ry-color-overlay);
}

.ry-drawer__panel {
  background-color: var(--ry-color-bg);
  box-shadow: var(--ry-shadow-xl);
}

.ry-drawer__panel[data-ry-side="bottom"] {
  border-radius: var(--ry-radius-xl) var(--ry-radius-xl) 0 0;
}

.ry-drawer__close {
  font-size: var(--ry-text-xl);
  background: transparent;
  border-radius: var(--ry-radius-md);
  color: var(--ry-color-text-muted);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              color var(--ry-duration-fast) var(--ry-ease);
}

.ry-drawer__close:hover {
  background-color: var(--ry-color-bg-muted);
  color: var(--ry-color-text);
}

/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */

ry-toast {
  font-family: var(--ry-font-sans);
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-lg);
}

.ry-toast__icon {
  font-size: var(--ry-text-sm);
}

ry-toast[type="info"] .ry-toast__icon {
  color: var(--ry-color-info);
}

ry-toast[type="success"] .ry-toast__icon {
  color: var(--ry-color-success);
}

ry-toast[type="warning"] .ry-toast__icon {
  color: var(--ry-color-warning);
}

ry-toast[type="error"] .ry-toast__icon {
  color: var(--ry-color-danger);
}

.ry-toast__content {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
  line-height: var(--ry-leading-normal);
}

.ry-toast__close {
  font-size: var(--ry-text-lg);
  background: transparent;
  border-radius: var(--ry-radius-sm);
  color: var(--ry-color-text-muted);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              color var(--ry-duration-fast) var(--ry-ease);
}

.ry-toast__close:hover {
  background-color: var(--ry-color-bg-muted);
  color: var(--ry-color-text);
}

/* ═══════════════════════════════════════════════════════════════
   SELECT
   ═══════════════════════════════════════════════════════════════ */

ry-select[disabled] {
  opacity: 0.5;
}

.ry-select__trigger {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-base);
  line-height: var(--ry-leading-normal);
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);
  transition: border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

ry-select:hover .ry-select__trigger {
  border-color: var(--ry-color-border-strong);
}

ry-select:focus-visible .ry-select__trigger {
  outline: none;
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

ry-select[data-ry-state="open"] .ry-select__trigger {
  border-color: var(--ry-color-primary);
}

.ry-select__value {
  color: var(--ry-color-text-muted);
}

.ry-select__value--selected {
  color: var(--ry-color-text);
}

.ry-select__arrow {
  font-size: var(--ry-text-xs);
  color: var(--ry-color-text-muted);
}

.ry-select__dropdown {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-lg);
}

.ry-select__option {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
  border-radius: var(--ry-radius-md);
  transition: background-color var(--ry-duration-fast) var(--ry-ease);
}

.ry-select__option:is(:hover, [data-highlighted]) {
  background-color: var(--ry-color-bg-muted);
}

.ry-select__option[aria-selected="true"] {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

.ry-select__option[data-disabled] {
  opacity: 0.5;
}

.ry-select__option[data-disabled]:hover {
  background-color: transparent;
}

/* Multi-select checkmarks */
.ry-select__check {
  color: var(--ry-color-primary);
}

.ry-select__clear {
  background: transparent;
  color: var(--ry-color-text-muted);
  border-radius: var(--ry-radius-full);
  transition: color var(--ry-duration-fast) var(--ry-ease);
}

.ry-select__clear:hover {
  color: var(--ry-color-text);
}

/* Multi: checkmark is the indicator, no bg change on selected */
ry-select[multiple] .ry-select__option[aria-selected="true"] {
  background-color: transparent;
  color: var(--ry-color-text);
}

ry-select[multiple] .ry-select__option[aria-selected="true"]:is(:hover, [data-highlighted]) {
  background-color: var(--ry-color-bg-muted);
}

/* ═══════════════════════════════════════════════════════════════
   CODE
   ═══════════════════════════════════════════════════════════════ */

ry-code {
  background-color: var(--ry-code-bg);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-lg);
}

.ry-code__header {
  background-color: var(--ry-code-header-bg);
}

.ry-code__title {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-xs);
  font-weight: var(--ry-font-bold);
  color: var(--ry-code-title-color);
}

.ry-code__copy {
  background: transparent;
  border-radius: var(--ry-radius-full);
  color: var(--ry-code-icon-color);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              color var(--ry-duration-fast) var(--ry-ease);
}

.ry-code__copy:hover {
  background-color: var(--ry-code-icon-hover-bg);
  color: var(--ry-code-icon-hover-color);
}

.ry-code__copy--success {
  color: var(--ry-color-success);
}

:is(.ry-code__pre, .ry-code__code) {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-text-sm);
  line-height: var(--ry-leading-relaxed);
  color: var(--ry-code-text-color);
}

.ry-code__line-number {
  color: var(--ry-code-line-number-color);
  border-inline-end: 1px solid var(--ry-code-line-border-color);
}

.ry-code__color-preview {
  border: 1px solid var(--ry-code-color-preview-border);
  border-radius: var(--ry-radius-sm);
}

/* Syntax highlighting colors */
.ry-code__keyword {
  color: var(--ry-code-keyword);
}

.ry-code__property {
  color: var(--ry-code-property);
}

.ry-code__value {
  color: var(--ry-code-value);
}

.ry-code__string {
  color: var(--ry-code-string);
}

.ry-code__number {
  color: var(--ry-code-number);
}

.ry-code__comment {
  color: var(--ry-code-comment);
  font-style: italic;
}

.ry-code__selector {
  color: var(--ry-code-selector);
}

.ry-code__punctuation {
  color: var(--ry-code-punctuation);
}

.ry-code__tag {
  color: var(--ry-code-tag);
}

.ry-code__attribute {
  color: var(--ry-code-attribute);
}

.ry-code__color {
  color: var(--ry-code-value);
}

/* ═══════════════════════════════════════════════════════════════
   EXAMPLE
   ═══════════════════════════════════════════════════════════════ */

.ry-example__preview {
  background-color: var(--ry-color-bg-subtle);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
}

.ry-example__usage-toggle {
  background-color: var(--ry-color-bg-subtle);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);
  color: var(--ry-color-text-muted);
  font-size: var(--ry-text-sm);
  font-weight: 500;
}

.ry-example__usage-toggle:hover {
  background-color: var(--ry-color-bg-hover);
  color: var(--ry-color-text);
}

/* ═══════════════════════════════════════════════════════════════
   ICON
   ═══════════════════════════════════════════════════════════════ */

ry-icon {
  color: currentColor;
}

/* ═══════════════════════════════════════════════════════════════
   CHECKBOX
   ═══════════════════════════════════════════════════════════════ */

input[type="checkbox"] {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-sm);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

input[type="checkbox"]:hover {
  border-color: var(--ry-color-border-strong);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

input[type="checkbox"]:checked {
  background-color: var(--ry-color-primary);
  border-color: var(--ry-color-primary);
}

input[type="checkbox"]:checked:hover {
  background-color: var(--ry-color-primary-hover);
  border-color: var(--ry-color-primary-hover);
}

input[type="checkbox"]::after {
  border-inline-end: 2px solid var(--ry-color-text-inverse);
  border-block-end: 2px solid var(--ry-color-text-inverse);
  margin-bottom: 2px;
}

input[type="checkbox"]:disabled {
  opacity: 0.5;
  background-color: var(--ry-color-bg-muted);
}

/* ═══════════════════════════════════════════════════════════════
   RADIO
   ═══════════════════════════════════════════════════════════════ */

input[type="radio"] {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-full);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

input[type="radio"]:hover {
  border-color: var(--ry-color-border-strong);
}

input[type="radio"]:focus-visible {
  outline: none;
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

input[type="radio"]:checked {
  border-color: var(--ry-color-primary);
}

input[type="radio"]:checked:hover {
  border-color: var(--ry-color-primary-hover);
}

input[type="radio"]::after {
  background-color: var(--ry-color-primary);
  border-radius: var(--ry-radius-full);
}

input[type="radio"]:disabled {
  opacity: 0.5;
  background-color: var(--ry-color-bg-muted);
}

/* ═══════════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════════ */

table {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
}

th {
  font-weight: var(--ry-font-semibold);
  color: var(--ry-color-text);
  background-color: var(--ry-color-bg-subtle);
  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
}

td {
  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
}

tbody tr:last-child td {
  border-block-end: none;
}

tbody tr:hover {
  background-color: var(--ry-color-bg-subtle);
}

/* Table variants */
table[data-bordered] {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
}

table[data-bordered] :is(th, td) {
  border: var(--ry-border-width) solid var(--ry-color-border);
}

table[data-striped] tbody tr:nth-child(even) {
  background-color: var(--ry-color-bg-subtle);
}

table[data-striped] tbody tr:hover {
  background-color: var(--ry-color-bg-muted);
}

/* ═══════════════════════════════════════════════════════════════
   COLOR PICKER
   ═══════════════════════════════════════════════════════════════ */

ry-color-picker[disabled] {
  opacity: 0.5;
}

/* Trigger button */
ry-color-picker [data-ry-target="trigger"] {
  background-color: var(--ry-color-bg);
  background-image: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%);
  background-size: 8px 8px;
  border-radius: var(--ry-radius-md);
  overflow: hidden;
}

ry-color-picker [data-ry-target="trigger"]:focus-visible {
  box-shadow: var(--ry-focus-ring);
}

ry-color-picker [data-ry-target="trigger-color"] {
  border-radius: calc(var(--ry-radius-md) - 1px);
  outline: 3px solid oklch(0 0 0 / 0.2);
  outline-offset: -3px;
}

ry-color-picker [data-ry-target="trigger-color"] {
  border-radius: calc(var(--ry-radius-md) - 1px);
}

/* Panel */
ry-color-picker [data-ry-target="panel"] {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-lg);
}

/* Grid */
ry-color-picker [data-ry-target="grid"] {
  background-color: var(--grid-hue-color, #ff0000);
  background-image:
    linear-gradient(to top, #000 0%, transparent 100%),
    linear-gradient(to right, #fff 0%, transparent 100%);
  border-radius: var(--ry-radius-lg) var(--ry-radius-lg) 0 0;
}

ry-color-picker [data-ry-target="grid-handle"] {
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: var(--ry-radius-full);
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.3), inset 0 0 0 1px oklch(0 0 0 / 0.3);
}

ry-color-picker [data-ry-target="grid-handle"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.3), inset 0 0 0 1px oklch(0 0 0 / 0.3), var(--ry-focus-ring);
}

/* Hue slider */
ry-color-picker .ry-color-picker__hue {
  background: linear-gradient(
    to right,
    hsl(0, 100%, 50%) 0%,
    hsl(60, 100%, 50%) 17%,
    hsl(120, 100%, 50%) 33%,
    hsl(180, 100%, 50%) 50%,
    hsl(240, 100%, 50%) 67%,
    hsl(300, 100%, 50%) 83%,
    hsl(360, 100%, 50%) 100%
  );
  border-radius: var(--ry-radius-full);
}

/* Alpha slider */
ry-color-picker .ry-color-picker__alpha {
  /* Checkerboard pattern for transparency */
  background-image:
    linear-gradient(to right, transparent 0%, var(--alpha-color, #ff0000) 100%),
    repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%);
  background-size: 100% 100%, 8px 8px;
  border-radius: var(--ry-radius-full);
}

/* Slider handles */
ry-color-picker .ry-color-picker__slider-handle {
  background-color: #fff;
  border-radius: var(--ry-radius-full);
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.2), var(--ry-shadow-sm);
}

ry-color-picker .ry-color-picker__slider-handle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.2), var(--ry-focus-ring);
}

/* Preview */
ry-color-picker [data-ry-target="preview"] {
  background-image: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%);
  background-size: 8px 8px;
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);
  overflow: hidden;
}

ry-color-picker [data-ry-target="preview-color"] {
  border-radius: inherit;
  outline: 3px solid oklch(0 0 0 / 0.2);
  outline-offset: -3px;
}

/* Input */
ry-color-picker [data-ry-target="input"] {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);
  transition: border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

ry-color-picker [data-ry-target="input"]:hover {
  border-color: var(--ry-color-border-strong);
}

ry-color-picker [data-ry-target="input"]:focus {
  outline: none;
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

/* Format toggle */
ry-color-picker [data-ry-target="format-toggle"] {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-xs);
  font-weight: var(--ry-font-semibold);
  color: var(--ry-color-text-muted);
  background-color: var(--ry-color-bg-muted);
  border-radius: var(--ry-radius-md);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              color var(--ry-duration-fast) var(--ry-ease);
}

ry-color-picker [data-ry-target="format-toggle"]:hover {
  background-color: var(--ry-color-bg-subtle);
  color: var(--ry-color-text);
}

ry-color-picker [data-ry-target="format-toggle"]:focus-visible {
  outline: none;
  box-shadow: var(--ry-focus-ring);
}

/* Swatches */
ry-color-picker .ry-color-picker__swatch {
  border-radius: var(--ry-radius-sm);
  transition: transform var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

ry-color-picker .ry-color-picker__swatch:hover {
  transform: scale(1.1);
  box-shadow: var(--ry-shadow-md);
}

ry-color-picker .ry-color-picker__swatch:focus-visible {
  outline: none;
  box-shadow: var(--ry-focus-ring);
}

/* ═══════════════════════════════════════════════════════════════
   COLOR INPUT
   ═══════════════════════════════════════════════════════════════ */

ry-color-input[disabled] {
  opacity: 0.5;
}

ry-color-input [data-ry-target="trigger"] {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);
  overflow: hidden;
  transition: border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

ry-color-input:hover [data-ry-target="trigger"] {
  border-color: var(--ry-color-border-strong);
}

ry-color-input:focus-within [data-ry-target="trigger"] {
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

ry-color-input [data-ry-target="swatch"] {
  background-image: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%);
  background-size: 8px 8px;
  border-inline-end: var(--ry-border-width) solid var(--ry-color-border);
  transition: background-color var(--ry-duration-fast) var(--ry-ease);
}

ry-color-input [data-ry-target="swatch"]:hover {
  background-color: var(--ry-color-bg-muted);
}

ry-color-input [data-ry-target="swatch"]:focus-visible {
  outline: none;
}

ry-color-input [data-ry-target="swatch-color"] {
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.1);
}

ry-color-input [data-ry-target="input"] {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
  background-color: transparent;
  border: none;
}

ry-color-input [data-ry-target="input"]:focus {
  outline: none;
}

ry-color-input [data-ry-target="input"]::placeholder {
  color: var(--ry-color-text-muted);
}

ry-color-input [data-ry-target="panel"] {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-lg);
}

/* ═══════════════════════════════════════════════════════════════
   GRADIENT PICKER
   ═══════════════════════════════════════════════════════════════ */

ry-gradient-picker {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-md);
}

ry-gradient-picker[disabled] {
  opacity: 0.5;
}

/* Type toggle buttons */
ry-gradient-picker [data-ry-target="type-toggle"] button {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-xs);
  background-color: transparent;
  color: var(--ry-color-text-muted);
  border-radius: var(--ry-radius-sm);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              color var(--ry-duration-fast) var(--ry-ease);
}

ry-gradient-picker [data-ry-target="type-toggle"] button:hover {
  background-color: var(--ry-color-bg-subtle);
}

ry-gradient-picker [data-ry-target="type-toggle"] button[data-active] {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

/* Shape toggle */
ry-gradient-picker [data-ry-target="shape-control"] button {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-xs);
  background-color: transparent;
  color: var(--ry-color-text-muted);
  border-radius: var(--ry-radius-sm);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              color var(--ry-duration-fast) var(--ry-ease);
}

ry-gradient-picker [data-ry-target="shape-control"] button:hover {
  background-color: var(--ry-color-bg-subtle);
}

ry-gradient-picker [data-ry-target="shape-control"] button[data-active] {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

/* Gradient bar */
ry-gradient-picker [data-ry-target="bar"] {
  border-radius: var(--ry-radius-full, 9999px);
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.1);
}

/* Stop handles */
ry-gradient-picker [data-ry-target="stop"] {
  background-color: var(--stop-color, #fff);
  border: 2px solid #fff;
  border-radius: var(--ry-radius-full);
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.3), var(--ry-shadow-sm);
  transition: transform var(--ry-duration-fast) var(--ry-ease),
              opacity var(--ry-duration-fast) var(--ry-ease);
}

ry-gradient-picker [data-ry-target="stop"][data-selected] {
  box-shadow: 0 0 0 2px var(--ry-color-primary), var(--ry-shadow-md);
}

ry-gradient-picker [data-ry-target="stop"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ry-color-primary), var(--ry-focus-ring);
}

/* CSS output */
ry-gradient-picker [data-ry-target="output"] {
  font-family: var(--ry-font-mono);
  font-size: var(--ry-text-xs);
  color: var(--ry-color-text);
  background-color: var(--ry-color-bg-subtle);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-sm);
  transition: border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

ry-gradient-picker [data-ry-target="output"]:focus {
  outline: none;
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

/* Copy button */
ry-gradient-picker [data-ry-target="copy-btn"] {
  background-color: transparent;
  color: var(--ry-color-text-muted);
  border-radius: var(--ry-radius-sm);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              color var(--ry-duration-fast) var(--ry-ease);
}

ry-gradient-picker [data-ry-target="copy-btn"]:hover {
  background-color: var(--ry-color-bg-subtle);
  color: var(--ry-color-text);
}

ry-gradient-picker [data-ry-target="copy-btn"][data-copied] {
  color: var(--ry-color-success);
}

/* ═══════════════════════════════════════════════════════════════
   TREE
   ═══════════════════════════════════════════════════════════════ */

ry-tree {
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  padding: var(--ry-space-6);
  background-color: var(--ry-color-bg);
  box-shadow: var(--ry-shadow-sm);
}

/* Vertical connector line */
.ry-tree__children {
  border-inline-start: 1px solid var(--ry-color-border);
}

/* Horizontal connector line */
.ry-tree__children .ry-tree__item::before {
  background-color: var(--ry-color-border);
}

:is(.ry-tree__label, .ry-tree__file) {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
  border-radius: var(--ry-radius-sm);
  transition: background-color var(--ry-duration-fast) var(--ry-ease);
}

:is(.ry-tree__label, .ry-tree__file):hover {
  background-color: var(--ry-color-bg-muted);
}

.ry-tree__file[data-ry-selected] {
  background-color: var(--ry-color-bg-muted);
  color: var(--ry-color-text);
  font-weight: var(--ry-font-medium);
}

.ry-tree__icon {
  color: var(--ry-color-text-muted);
}

/* Open folder icon gets stronger color */
.ry-tree__toggle:checked ~ .ry-tree__label .ry-tree__icon {
  color: var(--ry-color-text);
}

/* Exclude tree toggle checkboxes from global checkbox styling */
input[type="checkbox"].ry-tree__toggle {
  background: none;
  border: none;
  box-shadow: none;
}

input[type="checkbox"].ry-tree__toggle::after {
  display: none;
}

/* ── Drag and Drop ── */

.ry-tree__ghost {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-primary);
  border-radius: var(--ry-radius-sm);
  box-shadow: var(--ry-shadow-lg);
  opacity: 0.85;
}

.ry-tree__item--collapsed {
  background-color: color-mix(in oklch, var(--ry-color-primary) 10%, transparent);
  border-radius: var(--ry-radius-sm);
}

.ry-tree__item:is([data-ry-drop-target="before"], [data-ry-drop-target="after"])::after {
  background-color: var(--ry-color-primary);
}

.ry-tree__item[data-ry-drop-target="inside"] > .ry-tree__label {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
  border-radius: var(--ry-radius-sm);
}

.ry-tree__item[data-ry-drop-target="inside"] > .ry-tree__label .ry-tree__icon {
  color: var(--ry-color-text-inverse);
}

/* ═══════════════════════════════════════════════════════════════
   TAG
   ═══════════════════════════════════════════════════════════════ */

ry-tag {
  font-size: var(--ry-text-xs);
  font-weight: var(--ry-font-medium);
  background-color: var(--ry-color-bg-muted);
  color: var(--ry-color-text);
  border-radius: var(--ry-radius-full);
}

ry-tag[variant="primary"] {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

ry-tag[variant="success"] {
  background-color: var(--ry-color-success);
  color: var(--ry-color-text-inverse);
}

ry-tag[variant="warning"] {
  background-color: var(--ry-color-warning);
  color: var(--ry-color-text);
}

ry-tag[variant="danger"] {
  background-color: var(--ry-color-danger);
  color: var(--ry-color-text-inverse);
}

ry-tag[disabled] {
  opacity: 0.5;
}

.ry-tag__remove {
  background: transparent;
  color: currentColor;
  border-radius: var(--ry-radius-full);
  opacity: 0.6;
  transition: opacity var(--ry-duration-fast) var(--ry-ease);
}

.ry-tag__remove:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   TAG INPUT
   ═══════════════════════════════════════════════════════════════ */

.ry-tag-input__container {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);
  transition: border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

.ry-tag-input__container:hover {
  border-color: var(--ry-color-border-strong);
}

.ry-tag-input__container:focus-within {
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-focus-ring);
}

.ry-tag-input__input {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
  background: transparent;
  border: none;
}

.ry-tag-input__input:focus,
.ry-tag-input__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.ry-tag-input__input::placeholder {
  color: var(--ry-color-text-muted);
}

ry-tag-input[disabled] .ry-tag-input__container {
  opacity: 0.5;
  background-color: var(--ry-color-bg-muted);
}

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */

ry-hero h1 {
  font-size: var(--ry-text-4xl);
  font-weight: var(--ry-font-bold);
  line-height: var(--ry-leading-tight);
  color: var(--ry-color-text);
}

ry-hero p {
  font-size: var(--ry-text-lg);
  line-height: var(--ry-leading-relaxed);
  color: var(--ry-color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   STAT
   ═══════════════════════════════════════════════════════════════ */

.ry-stat__value {
  font-size: var(--ry-text-3xl);
  font-weight: var(--ry-font-bold);
  color: var(--ry-color-text);
}

ry-stat[size="sm"] .ry-stat__value {
  font-size: var(--ry-text-2xl);
}

ry-stat[size="lg"] .ry-stat__value {
  font-size: var(--ry-text-4xl);
}

.ry-stat__label {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
}

.ry-stat__trend--up {
  color: var(--ry-color-success);
}

.ry-stat__trend--down {
  color: var(--ry-color-danger);
}

/* ═══════════════════════════════════════════════════════════════
   FEATURE
   ═══════════════════════════════════════════════════════════════ */

.ry-feature__icon {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
  border-radius: var(--ry-radius-full);
}

ry-feature h3 {
  font-size: var(--ry-text-lg);
  font-weight: var(--ry-font-semibold);
  color: var(--ry-color-text);
}

ry-feature p {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
  line-height: var(--ry-leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════════
   PRICING
   ═══════════════════════════════════════════════════════════════ */

ry-pricing-card {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-xl);
  box-shadow: var(--ry-shadow-sm);
}

ry-pricing-card[featured] {
  border-color: var(--ry-color-primary);
  box-shadow: var(--ry-shadow-lg);
}

ry-pricing-card h3 {
  font-size: var(--ry-text-xl);
  font-weight: var(--ry-font-semibold);
  color: var(--ry-color-text);
}

ry-pricing-card [slot="price"] {
  font-size: var(--ry-text-4xl);
  font-weight: var(--ry-font-bold);
  color: var(--ry-color-text);
}

ry-pricing-card [slot="price"] span {
  font-size: var(--ry-text-base);
  font-weight: var(--ry-font-normal);
  color: var(--ry-color-text-muted);
}

ry-pricing-card ul li {
  border-block-end: var(--ry-border-width) solid var(--ry-color-border);
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
}

ry-pricing-card ul li:last-child {
  border-block-end: none;
}

/* ═══════════════════════════════════════════════════════════════
   CAROUSEL
   ═══════════════════════════════════════════════════════════════ */

.ry-carousel__arrow {
  background-color: var(--ry-color-bg);
  color: var(--ry-color-text);
  border-radius: var(--ry-radius-full);
  box-shadow: var(--ry-shadow-md);
  transition: background-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

.ry-carousel__arrow:hover {
  background-color: var(--ry-color-bg-muted);
  box-shadow: var(--ry-shadow-lg);
}

.ry-carousel__arrow:focus-visible {
  outline: none;
  box-shadow: var(--ry-focus-ring);
}

.ry-carousel__dot {
  background-color: var(--ry-color-border);
  border-radius: var(--ry-radius-full);
  transition: background-color var(--ry-duration-fast) var(--ry-ease);
}

.ry-carousel__dot[data-active] {
  background-color: var(--ry-color-primary);
}

.ry-carousel__dot:hover {
  background-color: var(--ry-color-primary-hover);
}

/* ═══════════════════════════════════════════════════════════════
   CHECK LIST
   ═══════════════════════════════════════════════════════════════ */

.ry-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ry-check-list li {
  padding-inline-start: var(--ry-space-6);
  position: relative;
  margin-block-end: var(--ry-space-2);
  color: var(--ry-color-text);
}

.ry-check-list li::before {
  content: '\2713';
  position: absolute;
  inset-inline-start: 0;
  color: var(--ry-color-success);
  font-weight: var(--ry-font-bold);
}

/* ═══════════════════════════════════════════════════════════════
   COMBOBOX
   ═══════════════════════════════════════════════════════════════ */

ry-combobox[disabled] {
  opacity: 0.5;
}

.ry-combobox__input-wrapper {
  font-family: var(--ry-font-sans);
  font-size: var(--ry-text-base);
  line-height: var(--ry-leading-normal);
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-md);
  transition: border-color var(--ry-duration-fast) var(--ry-ease),
              box-shadow var(--ry-duration-fast) var(--ry-ease);
}

ry-combobox:hover .ry-combobox__input-wrapper {
  border-color: var(--ry-color-border-strong);
}

ry-combobox:focus-within .ry-combobox__input-wrapper {
  border-color: var(--ry-color-primary);
  box-shadow: 0 0 0 1px var(--ry-color-primary);
}

ry-combobox[data-ry-state="open"] .ry-combobox__input-wrapper {
  border-color: var(--ry-color-primary);
}

.ry-combobox__input {
  font: inherit;
  color: var(--ry-color-text);
}

.ry-combobox__input:focus,
.ry-combobox__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.ry-combobox__input::placeholder {
  color: var(--ry-color-text-muted);
}

.ry-combobox__arrow {
  font-size: var(--ry-text-xs);
  color: var(--ry-color-text-muted);
}

.ry-combobox__dropdown {
  background-color: var(--ry-color-bg);
  border: var(--ry-border-width) solid var(--ry-color-border);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-lg);
}

.ry-combobox__option {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text);
  border-radius: var(--ry-radius-md);
  transition: background-color var(--ry-duration-fast) var(--ry-ease);
}

.ry-combobox__option[data-highlighted] {
  background-color: var(--ry-color-bg-muted);
}

.ry-combobox__option[aria-selected="true"] {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

.ry-combobox__option[data-disabled] {
  opacity: 0.5;
}

.ry-combobox__option[data-disabled]:hover {
  background-color: transparent;
}

.ry-combobox__empty {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   LOGO BAR
   ═══════════════════════════════════════════════════════════════ */

.ry-logo-bar p {
  color: var(--ry-color-text-muted);
  font-size: var(--ry-text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.ry-logo-bar span {
  font-size: var(--ry-text-2xl);
  font-weight: var(--ry-font-bold);
  color: var(--ry-color-text);
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIAL
   ═══════════════════════════════════════════════════════════════ */

.ry-testimonial__quote {
  font-size: var(--ry-text-lg);
  font-style: italic;
  line-height: var(--ry-leading-relaxed);
  color: var(--ry-color-text);
}

.ry-testimonial__name {
  font-weight: var(--ry-font-semibold);
  color: var(--ry-color-text);
}

.ry-testimonial__role {
  font-size: var(--ry-text-sm);
  color: var(--ry-color-text-muted);
}

.ry-testimonial__star {
  color: var(--ry-color-warning);
}

.ry-testimonial__star svg {
  fill: var(--ry-color-warning);
}

.ry-testimonial__avatar {
  background-color: var(--ry-color-bg-muted);
  border: 2px solid var(--ry-color-border);
}

/* ═══════════════════════════════════════════════════════════════
   "NONE" THEME — flat, no flourish
   Default theme minus radii, shadows, and decorative extras.
   Proves FORM/THEME separation: structure handles all layout.
   ═══════════════════════════════════════════════════════════════ */

[data-ry-theme="none"] {
  --ry-radius-sm: 0;
  --ry-radius-md: 0;
  --ry-radius-lg: 0;
  --ry-radius-xl: 0;
  --ry-radius-2xl: 0;
  --ry-radius-full: 0;
  --ry-shadow-sm: none;
  --ry-shadow-md: none;
  --ry-shadow-lg: none;
  --ry-shadow-xl: none;
}

/* ═══════════════════════════════════════════════════════════════
   THEME PANEL
   ═══════════════════════════════════════════════════════════════ */

.ry-theme-panel {
  font-family: var(--ry-font-sans);
  background-color: var(--ry-color-bg);
  border-radius: var(--ry-radius-lg);
  box-shadow: var(--ry-shadow-lg);
  border: 1px solid var(--ry-color-border);
}

.ry-theme-panel__label {
  color: var(--ry-color-text-muted);
  font-weight: 600;
  font-size: 0.6875rem;
}

.ry-theme-panel__btn {
  border-radius: var(--ry-radius-sm);
  color: var(--ry-color-text-muted);
  transition: background-color var(--ry-duration-fast);
}

.ry-theme-panel__btn:hover {
  background-color: var(--ry-color-bg-muted);
}

.ry-theme-panel__btn[aria-pressed="true"] {
  background-color: var(--ry-color-primary);
  color: var(--ry-color-text-inverse);
}

} /* @layer ry-theme */