@ryanhelsing/ry-ui/dist/css/ry-structure.css

Framework-agnostic, Light DOM web components. CSS is the source of truth.

/**
 * 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 {
  margin: 0;
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ═══════════════════════════════════════════════════════════════
   PREFLIGHT RESET (opt-in via data-ry-reset on body/html)
   Faithful equivalent of Tailwind Preflight.
   ═══════════════════════════════════════════════════════════════ */

/* Universal — :where() gives zero specificity so component styles always win */
:where([data-ry-reset]) *,
:where([data-ry-reset]) *::before,
:where([data-ry-reset]) *::after,
:where([data-ry-reset]) *::backdrop {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

/* Root */
:where([data-ry-reset]) {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
}

/* Typography */
:where([data-ry-reset]) :where(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
  font-weight: inherit;
}
:where([data-ry-reset]) :where(a) {
  color: inherit;
  text-decoration: inherit;
}
:where([data-ry-reset]) :where(b, strong) {
  font-weight: bolder;
}
:where([data-ry-reset]) :where(code, kbd, samp, pre) {
  font-size: 1em;
}
:where([data-ry-reset]) :where(small) {
  font-size: 80%;
}
:where([data-ry-reset]) :where(sub, sup) {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
:where([data-ry-reset]) :where(sub) { bottom: -0.25em; }
:where([data-ry-reset]) :where(sup) { top: -0.5em; }

/* Lists */
:where([data-ry-reset]) :where(ol, ul, menu) {
  list-style: none;
}

/* Table */
:where([data-ry-reset]) :where(table) {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

/* HR */
:where([data-ry-reset]) :where(hr) {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

/* Media */
:where([data-ry-reset]) :where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
  vertical-align: middle;
}
:where([data-ry-reset]) :where(img, video) {
  max-width: 100%;
  height: auto;
}

/* Form controls */
:where([data-ry-reset]) :where(button, input, select, optgroup, textarea) {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
}
:where([data-ry-reset]) ::placeholder {
  opacity: 1;
}
@supports (color: color-mix(in oklab, currentcolor 50%, transparent)) {
  :where([data-ry-reset]) ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}
:where([data-ry-reset]) :where(textarea) {
  resize: vertical;
}
:where([data-ry-reset]) :where(button, input:where([type='button'], [type='reset'], [type='submit'])) {
  appearance: button;
}
:where([data-ry-reset]) ::-webkit-search-decoration {
  -webkit-appearance: none;
}
:where([data-ry-reset]) ::-webkit-inner-spin-button,
:where([data-ry-reset]) ::-webkit-outer-spin-button {
  height: auto;
}

/* Misc */
:where([data-ry-reset]) :where(summary) {
  display: list-item;
}
:where([data-ry-reset]) :where([hidden]:not([hidden='until-found'])) {
  display: none !important;
}

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

ry,
ry-search-item,
ry-search-group {
  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-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, ry-heading,
  ry-logo-bar) {
  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,
    ry-heading [data-ry-target="title"]) {
  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;
  overflow-x: clip;
}

/* ═══════════════════════════════════════════════════════════════
   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;
}

/* Full footer with columns */
ry-footer[layout="columns"] {
  text-align: start;
  padding: var(--ry-space-12, 3rem) var(--ry-space-6, 1.5rem);
}

ry-footer[layout="columns"] > [data-ry-target="columns"],
ry-footer[layout="columns"] > .ry-footer__columns {
  display: grid;
  grid-template-columns: 1.5fr repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--ry-space-8, 2rem);
  padding-block-end: var(--ry-space-8, 2rem);
}

ry-footer[layout="columns"] > [data-ry-target="columns"] nav,
ry-footer[layout="columns"] > .ry-footer__columns nav {
  display: flex;
  flex-direction: column;
  gap: var(--ry-space-2, 0.5rem);
}

ry-footer[layout="columns"] > [data-ry-target="columns"] nav strong,
ry-footer[layout="columns"] > .ry-footer__columns nav strong {
  margin-block-end: var(--ry-space-2, 0.5rem);
}

ry-footer[layout="columns"] > [data-ry-target="bottom"],
ry-footer[layout="columns"] > .ry-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ry-space-4, 1rem);
  padding-block-start: var(--ry-space-6, 1.5rem);
  border-top: 1px solid currentColor;
  opacity: 0.5;
}

@media (max-width: 768px) {
  ry-footer[layout="columns"] > [data-ry-target="columns"],
  ry-footer[layout="columns"] > .ry-footer__columns {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   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;
}

/* Full-width breakout — bg goes edge-to-edge, content stays centered */
ry-section[full],
ry-section[inverted],
ry-footer,
ry-logo-bar {
  width: 100vw;
  margin-inline-start: calc(50% - 50vw);
  padding-inline: max(var(--ry-space-6, 1.5rem), calc(50vw - 50%));
}

ry-section[inverted] {
  padding-block: var(--ry-space-12, 3rem);
}

ry-section[pad-bottom="lg"] {
  padding-bottom: var(--ry-space-20, 5rem);
}

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

ry-logo-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--ry-space-8, 2rem);
  padding-block: var(--ry-space-8, 2rem);
  text-align: center;
}

ry-logo-bar > p {
  width: 100%;
  margin: 0;
}

ry-logo-bar > :not(p) {
  display: inline-flex;
  align-items: center;
}

/* Scroll layout — horizontal scroll, no wrap */
ry-logo-bar[layout="scroll"] {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

ry-logo-bar[layout="scroll"]::-webkit-scrollbar {
  display: none;
}

ry-logo-bar[layout="scroll"] > :not(p) {
  flex-shrink: 0;
}

/* Marquee layout — infinite auto-scroll */
ry-logo-bar[layout="marquee"] {
  flex-wrap: nowrap;
  overflow: hidden;
}

ry-logo-bar[layout="marquee"] [data-ry-target="track"] {
  display: flex;
  align-items: center;
  gap: var(--ry-space-8, 2rem);
  width: max-content;
  animation: ry-marquee var(--ry-logo-bar-speed, 30s) linear infinite;
}

ry-logo-bar[layout="marquee"] [data-ry-target="track"] > * {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

ry-logo-bar[layout="marquee"]:hover [data-ry-target="track"] {
  animation-play-state: paused;
}

@keyframes ry-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}

/* Size variants */
ry-logo-bar[size="sm"] {
  padding: var(--ry-space-4, 1rem) var(--ry-space-4, 1rem);
  gap: var(--ry-space-4, 1rem);
}

ry-logo-bar[size="lg"] {
  padding: var(--ry-space-12, 3rem) var(--ry-space-6, 1.5rem);
  gap: var(--ry-space-6, 1.5rem);
}

/* Logo items */
ry-logo-bar img {
  height: var(--ry-logo-bar-height, 2rem);
  width: auto;
  object-fit: contain;
}

ry-logo-bar span {
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   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));
}

ry-grid[overlap] {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--ry-space-12, 3rem));
  padding-inline: var(--ry-space-6, 1.5rem);
}

/* 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-1, 0.25rem);
}

ry-nav a {
  text-decoration: none;
  padding: var(--ry-space-2, 0.5rem) var(--ry-space-3, 0.75rem);
  white-space: nowrap;
}

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

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

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

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

/* ═══════════════════════════════════════════════════════════════
   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);
}

/* Link variant — inline text link style */
ry-button[variant="link"] {
  background: none;
  border: none;
  padding: 0;
  display: inline;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   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;
}

ry-card > img:first-child {
  display: block;
  width: 100%;
  margin-bottom: var(--ry-space-4, 1rem);
}

/* ═══════════════════════════════════════════════════════════════
   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__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: flex;
  flex-wrap: wrap;
  flex: 1 1 0%;
  gap: var(--ry-space-1, 0.25rem);
  align-items: center;
}

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;
}

/* ══════════════════════════════════════════════════