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

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

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

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

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

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

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

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

/* ─── Variants ─── */

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

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

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

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

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

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

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

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

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

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

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

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

/* Danger */
.ren-btn-danger {
  background-color: var(--color-danger);
  color: var(--color-on-danger);
  border-color: var(--color-danger);
}

.ren-btn-danger:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--red-500);
  border-color: var(--red-500);
}

.ren-btn-danger:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--red-600);
  border-color: var(--red-600);
}

/* Link style */
.ren-btn-link {
  background-color: transparent;
  color: var(--color-text-link);
  border-color: transparent;
  padding-inline: var(--space-1);
  min-height: auto;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ren-btn-link:hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--color-text-link-hover);
  text-decoration-thickness: 2px;
}

/* ─── Sizes ─── */

.ren-btn-sm {
  min-height: var(--size-sm);       /* 32px */
  padding: var(--space-1) var(--space-3);
  font-size: var(--label-size);
  border-radius: var(--radius-sm);
  gap: var(--space-1);
}

.ren-btn-lg {
  min-height: var(--size-xl);       /* 52px */
  padding: var(--space-3) var(--space-6);
  font-size: var(--body-size);
  border-radius: var(--radius-lg);
}

/* ─── Icon Button (square) ─── */
.ren-btn-icon {
  min-width: var(--size-lg);        /* 44px */
  padding: 0;
  aspect-ratio: 1;
}

.ren-btn-icon.ren-btn-sm {
  min-width: var(--size-sm);
  min-height: var(--size-sm);
}

.ren-btn-icon.ren-btn-lg {
  min-width: var(--size-xl);
  min-height: var(--size-xl);
}

/* ─── Full Width ─── */
.ren-btn-full {
  width: 100%;
}

/* ─── Button Group ─── */
.ren-btn-group {
  display: inline-flex;
  isolation: isolate;  /* contain z-index stacking */
}

.ren-btn-group > .ren-btn {
  border-radius: 0;
  position: relative;
}

.ren-btn-group > .ren-btn:first-child {
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}

.ren-btn-group > .ren-btn:last-child {
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}

.ren-btn-group > .ren-btn + .ren-btn {
  margin-inline-start: calc(var(--stroke-1) * -1);
}

/* Hovered/focused button rises above siblings so border isn't hidden */
.ren-btn-group > .ren-btn:hover,
.ren-btn-group > .ren-btn:focus-visible {
  z-index: 1;
}

/* ─── States ─── */

/* Disabled */
.ren-btn:disabled,
.ren-btn[aria-disabled="true"] {
  background-color: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  border-color: var(--color-disabled-bg);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Loading */
.ren-btn[data-loading] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.ren-btn[data-loading]::after {
  content: '';
  position: absolute;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--radius-full);
  animation: ren-btn-spin 600ms linear infinite;
  /* Restore color since parent is transparent */
  color: var(--color-on-accent);
}

.ren-btn-secondary[data-loading]::after,
.ren-btn-ghost[data-loading]::after,
.ren-btn-outline[data-loading]::after {
  color: var(--color-text);
}

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

@media (prefers-reduced-motion: reduce) {
  .ren-btn[data-loading]::after {
    animation-duration: 1.5s;
  }
  .ren-btn:active:not(:disabled):not([aria-disabled="true"]) {
    transform: none;
  }
}

/* ─── Custom Accent (color-mix pattern) ───
   Use a single --btn-accent color and derive hover/active automatically.
   Example: <button class="ren-btn ren-btn-accent" style="--btn-accent: #8B5CF6">Purple</button>
*/
.ren-btn-accent {
  --_hover: color-mix(in oklch, var(--btn-accent, var(--color-accent)), black 12%);
  --_active: color-mix(in oklch, var(--btn-accent, var(--color-accent)), black 22%);
  --_subtle: color-mix(in oklch, var(--btn-accent, var(--color-accent)), white 90%);

  background-color: var(--btn-accent, var(--color-accent));
  color: var(--color-on-accent);
  border-color: var(--btn-accent, var(--color-accent));
}

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

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

/* ─── Focus ─── */
.ren-btn:focus-visible {
  outline: var(--ren-btn-ring-width) solid var(--ren-btn-ring-color);
  outline-offset: var(--ren-btn-ring-offset);
}
/* ============================================
   RenDS — Field Component (Input + Label + Error)
   ============================================
   Wraps any form control with label, description,
   and error message — all properly wired with ARIA.

   Works as pure CSS classes OR as <ren-field>.

   Structure:
   .ren-field
     .ren-field-label       (label element)
     .ren-field-control     (input/select/textarea wrapper)
     .ren-field-description (helper text)
     .ren-field-error       (error message)
   ============================================ */

/* ─── Field Container ─── */
.ren-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ─── Label ─── */
.ren-field-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--color-text);
}

/* Required indicator */
.ren-field-label[data-required]::after {
  content: '*';
  color: var(--color-danger);
  font-weight: var(--weight-bold);
}

/* ─── Input / Control ─── */
.ren-input {
  display: block;
  width: 100%;
  min-height: var(--ren-field-height);
  padding: var(--ren-field-padding-y) var(--ren-field-padding-x);
  font-size: var(--ren-field-font-size);
  font-family: inherit;
  color: var(--ren-field-color);
  background-color: var(--ren-field-bg);
  border: var(--ren-field-border-width) solid var(--ren-field-border-color);
  border-radius: var(--ren-field-radius);
  transition:
    border-color var(--duration-state) var(--ease-enter),
    background-color var(--duration-state) var(--ease-enter),
    box-shadow var(--duration-state) var(--ease-enter);
}

.ren-input:hover:not(:disabled):not(:focus) {
  background-color: var(--color-input-bg-hover);
}

.ren-input:focus {
  outline: none;
  border-color: var(--ren-field-focus-color);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
  background-color: var(--color-input-bg-hover);
}

.ren-input:disabled {
  background-color: var(--color-input-disabled-bg);
  color: var(--color-input-disabled-text);
  cursor: not-allowed;
  opacity: 0.7;
}

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

/* ─── Textarea ─── */
textarea.ren-input {
  field-sizing: content;  /* Auto-grow with content — no JS needed */
  min-height: calc(var(--touch-min) * 2);
  max-height: 20rem;      /* Prevent runaway growth */
  resize: vertical;
}

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

@supports (appearance: base-select) {
  /* ── Opt-in ── */
  select.ren-input,
  select.ren-input::picker(select) {
    appearance: base-select;
  }

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

  select.ren-input::picker-icon {
    color: var(--color-text-muted);
    opacity: 0.6;
    margin-inline-start: auto;
    padding-inline-start: var(--space-3);
    transition: rotate var(--duration-tactile) var(--ease-enter);
  }

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

  select.ren-input option::checkmark {
    display: none;
  }

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

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

  select.ren-input option + option {
    margin-block-start: 1px;
  }

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

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

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

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

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

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

  select.ren-input option[hidden] {
    display: none;
  }

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

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

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

  /* ── Open state ── */
  select.ren-input:open {
    border-color: var(--color-input-border-focus);
    box-shadow: 0 0 0 3px var(--color-input-focus-ring);
  }
}

/* ─── Input Sizes ─── */
.ren-input-sm {
  min-height: var(--size-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.ren-input-lg {
  min-height: var(--size-xl);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-lg);
}

/* ─── Input with icon ─── */
.ren-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ren-input-icon {
  position: absolute;
  left: var(--space-3);
  color: var(--color-text-muted);
  pointer-events: none;
  display: flex;
}

.ren-input-icon + .ren-input,
.ren-input-wrapper > .ren-input:has(+ .ren-input-icon) {
  padding-inline-start: calc(var(--space-3) + var(--icon-lg) + var(--space-2));
}

.ren-input-icon-end {
  position: absolute;
  right: var(--space-3);
  color: var(--color-text-muted);
  pointer-events: none;
  display: flex;
}

/* ─── Description ─── */
.ren-field-description {
  font-size: var(--caption-size);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0;
}

/* ─── Error Message ─── */
.ren-field-error {
  font-size: var(--caption-size);
  color: var(--ren-field-error-color);
  line-height: var(--leading-normal);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Error state on input */
.ren-field[data-invalid] .ren-input,
.ren-input[aria-invalid="true"],
.ren-input-error {
  border-color: var(--ren-field-error-color);
}

.ren-field[data-invalid] .ren-input:focus,
.ren-input[aria-invalid="true"]:focus,
.ren-input-error:focus {
  box-shadow: 0 0 0 3px rgb(255, 59, 48, 0.15);
  border-color: var(--ren-field-error-color);
}

/* Error state on label */
.ren-field[data-invalid] .ren-field-label {
  color: var(--ren-field-error-color);
}

/* ─── Success state ─── */
.ren-field[data-valid] .ren-input,
.ren-input-success {
  border-color: var(--ren-field-success-color);
}

.ren-field[data-valid] .ren-input:focus,
.ren-input-success:focus {
  box-shadow: 0 0 0 3px rgb(52, 199, 89, 0.15);
}

/* ─── Modern Validation (no JS needed) ─── */
/* Only show validation state AFTER user interaction */
.ren-input:user-invalid {
  border-color: var(--ren-field-error-color);
}

.ren-input:user-invalid:focus {
  box-shadow: 0 0 0 3px rgb(255, 59, 48, 0.15);
  border-color: var(--ren-field-error-color);
}

.ren-input:user-valid {
  border-color: var(--ren-field-success-color);
}

.ren-input:user-valid:focus {
  box-shadow: 0 0 0 3px rgb(52, 199, 89, 0.15);
}

/* Show/hide error and success messages based on validation */
.ren-field:has(.ren-input:user-invalid) .ren-field-label {
  color: var(--ren-field-error-color);
}

.ren-field:has(.ren-input:user-invalid) .ren-field-error {
  display: flex;
}

.ren-field:has(.ren-input:user-valid) .ren-field-error {
  display: none;
}
/* ============================================
   RenDS — Checkbox Component
   ============================================
   Custom-styled checkbox built on native
   <input type="checkbox">.

   Preserves native semantics and accessibility.
   Custom visuals via CSS only.

   Usage:
     <label class="ren-checkbox">
       <input type="checkbox">
       <span class="ren-checkbox-control"></span>
       <span>Accept terms</span>
     </label>

   For toggle switches, see ren-switch.
   ============================================ */

.ren-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--ren-checkbox-gap);
  cursor: pointer;
  font-size: var(--body-size);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  user-select: none;
  /* Ensure touch target */
  min-height: var(--touch-min);
}

/* Hide native checkbox visually but keep accessible */
.ren-checkbox > input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* Custom checkbox visual */
.ren-checkbox-control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ren-checkbox-size);   /* 20px */
  height: var(--ren-checkbox-size);
  flex-shrink: 0;
  border: 2px solid var(--ren-checkbox-border);
  border-radius: var(--ren-checkbox-radius);
  background-color: transparent;
  transition:
    background-color var(--ren-checkbox-duration) var(--ease-enter),
    border-color var(--ren-checkbox-duration) var(--ease-enter),
    transform var(--duration-tactile) var(--ren-checkbox-easing);
}

/* Checkmark (hidden by default) */
.ren-checkbox-control::after {
  content: '';
  display: block;
  width: 0.45rem;
  height: 0.7rem;
  border: solid var(--ren-checkbox-checked-color);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform var(--ren-checkbox-duration) var(--ren-checkbox-easing);
  margin-top: -2px;
}

/* ─── States ─── */

/* Checked */
.ren-checkbox > input:checked + .ren-checkbox-control {
  background-color: var(--ren-checkbox-checked-bg);
  border-color: var(--ren-checkbox-checked-bg);
}

.ren-checkbox > input:checked + .ren-checkbox-control::after {
  transform: rotate(45deg) scale(1);
}

/* Hover */
.ren-checkbox:hover > .ren-checkbox-control {
  border-color: var(--color-accent);
}

.ren-checkbox:hover > input:checked + .ren-checkbox-control {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Focus */
.ren-checkbox > input:focus-visible + .ren-checkbox-control {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: var(--ring-offset-width);
}

/* Active / Press */
.ren-checkbox:active > .ren-checkbox-control {
  transform: scale(0.9);
}

/* Disabled */
.ren-checkbox:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Indeterminate */
.ren-checkbox > input:indeterminate + .ren-checkbox-control {
  background-color: var(--ren-checkbox-checked-bg);
  border-color: var(--ren-checkbox-checked-bg);
}

.ren-checkbox > input:indeterminate + .ren-checkbox-control::after {
  border: none;
  width: 0.6rem;
  height: 2px;
  background-color: var(--ren-checkbox-checked-color);
  transform: none;
  margin: 0;
  border-radius: 1px;
}
/* ============================================
   RenDS — Switch / Toggle Component
   ============================================
   Custom-styled toggle switch built on native
   <input type="checkbox" role="switch">.

   Preserves native semantics and accessibility.
   Custom visuals via CSS only.

   Usage:
     <label class="ren-switch">
       <input type="checkbox" role="switch">
       <span class="ren-switch-track"></span>
       <span>Dark mode</span>
     </label>
   ============================================ */

.ren-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--body-size);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  user-select: none;
  min-height: var(--touch-min);
}

/* Hide native input */
.ren-switch > input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* Track */
.ren-switch-track {
  position: relative;
  width: var(--ren-switch-width);    /* 51px — Apple HIG */
  height: var(--ren-switch-height);   /* 31px */
  flex-shrink: 0;
  background-color: var(--ren-switch-bg);
  border-radius: var(--radius-full);
  transition:
    background-color var(--ren-switch-duration) var(--ren-switch-easing);
}

/* Thumb */
.ren-switch-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: var(--ren-switch-thumb-size);   /* 27px */
  height: var(--ren-switch-thumb-size);
  background-color: var(--ren-switch-thumb-color);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--ren-switch-duration) var(--ren-switch-easing),
    box-shadow var(--ren-switch-duration) var(--ren-switch-easing);
}

/* ─── States ─── */

/* Checked (on) */
.ren-switch > input:checked + .ren-switch-track {
  background-color: var(--ren-switch-checked-bg);
}

.ren-switch > input:checked + .ren-switch-track::after {
  transform: translateX(calc(var(--ren-switch-width) - var(--ren-switch-height)));
}

/* Hover */
.ren-switch:hover > .ren-switch-track {
  background-color: var(--color-fill-hover);
}

.ren-switch:hover > input:checked + .ren-switch-track {
  background-color: var(--color-success-strong);
}

/* Focus */
.ren-switch > input:focus-visible + .ren-switch-track {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: var(--ring-offset-width);
}

/* Active */
.ren-switch:active > .ren-switch-track::after {
  width: calc(var(--ren-switch-thumb-size) + 6px);
}

.ren-switch:active > input:checked + .ren-switch-track::after {
  transform: translateX(calc(var(--ren-switch-width) - var(--ren-switch-height) - 6px));
}

/* Disabled */
.ren-switch:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}
/* ============================================
   RenDS — Badge
   ============================================
   Small inline label for status, counts, or tags.
   CSS-only, no JS needed.

   Sibling primitives that used to live here are
   now in their own folders:
     - ren-separator
     - ren-avatar
     - ren-spinner
     - ren-skeleton
     - ren-kbd

   Usage:
     <span class="ren-badge">3</span>
     <span class="ren-badge ren-badge-success">Active</span>
     <span class="ren-badge-dot ren-badge-dot-danger"></span>
   ============================================ */

.ren-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--ren-badge-height);
  padding: 0.15em var(--ren-badge-padding-x);
  font-size: var(--ren-badge-font-size);
  font-weight: var(--ren-badge-font-weight);
  line-height: 1.5;
  white-space: nowrap;
  border-radius: var(--ren-badge-radius);
  /* Default: neutral */
  background-color: var(--ren-badge-bg);
  color: var(--ren-badge-color);
}

/* ─── Variants ─── */
.ren-badge-primary {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

.ren-badge-secondary {
  background-color: var(--color-fill-hover);
  color: var(--color-text);
}

.ren-badge-success {
  background-color: var(--color-success-subtle);
  color: var(--color-success-strong);
}

.ren-badge-warning {
  background-color: var(--color-warning-subtle);
  color: var(--color-warning-strong);
}

.ren-badge-danger {
  background-color: var(--color-danger-subtle);
  color: var(--color-danger-strong);
}

.ren-badge-info {
  background-color: var(--color-info-subtle);
  color: var(--color-info-strong);
}

/* Outline variant */
.ren-badge-outline {
  background-color: transparent;
  border: var(--stroke-1) solid var(--color-border);
  color: var(--color-text-secondary);
}

/* ─── Dot indicator (no text) ─── */
.ren-badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
}

.ren-badge-dot-success { background-color: var(--color-success); }
.ren-badge-dot-warning { background-color: var(--color-warning); }
.ren-badge-dot-danger  { background-color: var(--color-danger); }
/* ============================================
   RenDS — Radio Button & Radio Group Components
   ============================================
   Custom-styled radio buttons and radio groups
   built on native <input type="radio">.

   Preserves native semantics and accessibility.
   Custom visuals via CSS only.

   Usage:
     <div class="ren-radio-group" role="radiogroup">
       <label class="ren-radio">
         <input type="radio" name="option" value="a">
         <span class="ren-radio-control"></span>
         <span>Option A</span>
       </label>
       <label class="ren-radio">
         <input type="radio" name="option" value="b">
         <span class="ren-radio-control"></span>
         <span>Option B</span>
       </label>
     </div>
   ============================================ */

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

.ren-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--body-size);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  user-select: none;
  /* Ensure touch target */
  min-height: var(--touch-min);
}

/* Hide native radio visually but keep accessible */
.ren-radio > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* Custom radio visual */
.ren-radio-control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;   /* 20px */
  height: 1.25rem;
  flex-shrink: 0;
  border: 2px solid var(--color-border-interactive);
  border-radius: var(--radius-full);
  background-color: transparent;
  transition:
    background-color var(--duration-state) var(--ease-enter),
    border-color var(--duration-state) var(--ease-enter),
    transform var(--duration-tactile) var(--ease-playful);
}

/* Radio dot (hidden by default) */
.ren-radio-control::after {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-on-accent);
  border-radius: var(--radius-full);
  transform: scale(0);
  transition: transform var(--duration-state) var(--ease-playful);
}

/* ─── States ─── */

/* Checked */
.ren-radio > input:checked + .ren-radio-control {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.ren-radio > input:checked + .ren-radio-control::after {
  transform: scale(1);
}

/* Hover */
.ren-radio:hover > .ren-radio-control {
  border-color: var(--color-accent);
}

.ren-radio:hover > input:checked + .ren-radio-control {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Focus */
.ren-radio > input:focus-visible + .ren-radio-control {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: var(--ring-offset-width);
}

/* Active / Press */
.ren-radio:active > .ren-radio-control {
  transform: scale(0.9);
}

/* Disabled */
.ren-radio:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

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

.ren-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ren-radio-group-horizontal {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
}
/* ============================================
   RenDS — Progress Bar & Meter Components
   ============================================
   Progress indicators and meter displays.
   CSS-only, works with <progress> and <meter>.

   Supports multiple sizes, colors, and states.
   Includes indeterminate animations.

   Usage:
     <div class="ren-progress">
       <div class="ren-progress-bar" style="width: 65%"></div>
     </div>

     <div class="ren-progress ren-progress-lg ren-progress-success">
       <div class="ren-progress-bar" style="width: 85%"></div>
     </div>

     <meter class="ren-meter" value="6" min="0" max="10"></meter>
   ============================================ */

/* ═══════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════ */

.ren-progress {
  display: flex;
  width: 100%;
  height: var(--ren-progress-height);   /* default / md */
  background-color: var(--ren-progress-bg);
  border-radius: var(--ren-progress-radius);
  overflow: hidden;
}

.ren-progress-bar {
  height: 100%;
  width: 0%;
  background-color: var(--ren-progress-fill);
  border-radius: var(--ren-progress-radius);
  transition: width var(--ren-progress-duration) var(--ren-progress-easing);
}

/* ─── Sizes ─── */

.ren-progress-sm {
  height: 0.25rem;
}

.ren-progress-lg {
  height: 0.75rem;
}

.ren-progress-xl {
  height: 1rem;
}

/* ─── Color Variants ─── */

.ren-progress-success .ren-progress-bar {
  background-color: var(--color-success);
}

.ren-progress-warning .ren-progress-bar {
  background-color: var(--color-warning);
}

.ren-progress-danger .ren-progress-bar {
  background-color: var(--color-danger);
}

.ren-progress-info .ren-progress-bar {
  background-color: var(--color-info);
}

/* ─── Indeterminate Animation ─── */

.ren-progress-indeterminate .ren-progress-bar {
  width: 30% !important;
  animation: ren-progress-slide 1.5s var(--ease-enter) infinite;
}

@keyframes ren-progress-slide {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(500%);
  }
  100% {
    transform: translateX(500%);
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ren-progress-indeterminate .ren-progress-bar {
    animation: none;
    width: 50% !important;
  }

  .ren-progress-bar {
    transition: none;
  }
}

/* ═══════════════════════════════
   PROGRESS LABELS
   ═══════════════════════════════ */

.ren-progress-label {
  display: block;
  font-size: var(--label-size);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.ren-progress-value {
  display: block;
  font-size: var(--label-size);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  margin: var(--space-1) 0 0;
  text-align: end;
}

/* ═══════════════════════════════
   METER ELEMENT
   ═══════════════════════════════ */

.ren-meter {
  display: block;
  width: 100%;
  height: 0.5rem;
  border: none;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--color-fill);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Webkit browsers (Chrome, Safari) */
.ren-meter::-webkit-meter-inner-element {
  border-radius: var(--radius-full);
}

.ren-meter::-webkit-meter-bar {
  background-color: var(--color-fill);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: none;
}

.ren-meter::-webkit-meter-optimum-value {
  background-color: var(--color-success);
  border-radius: var(--radius-full);
}

.ren-meter::-webkit-meter-suboptimum-value {
  background-color: var(--color-warning);
  border-radius: var(--radius-full);
}

.ren-meter::-webkit-meter-even-less-good-value {
  background-color: var(--color-danger);
  border-radius: var(--radius-full);
}

/* Firefox */
.ren-meter::-moz-meter-bar {
  background: var(--color-success);
  border-radius: var(--radius-full);
  border: none;
}

/* ─── Meter Sizes ─── */

.ren-meter-sm {
  height: 0.25rem;
}

.ren-meter-lg {
  height: 0.75rem;
}

.ren-meter-xl {
  height: 1rem;
}
/* ============================================
   RenDS — Icon Component
   ============================================
   Icon sizing, coloring, and animation utilities.
   Works with any SVG or icon font.

   The base class provides inline layout,
   color inheritance, and shrink-to-fit.

   Usage:
     <span class="ren-icon ren-icon-md">
       <svg>...</svg>
     </span>

     <button>
       <span class="ren-icon ren-icon-lg ren-icon-success">
         <svg>...</svg>
       </span>
       Export
     </button>

     <span class="ren-icon ren-icon-spin ren-icon-xl">
       <svg>...</svg>
     </span>
   ============================================ */

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

.ren-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--ren-icon-size);   /* 20px — default md */
  height: var(--ren-icon-size);
  color: var(--ren-icon-color);
  fill: var(--ren-icon-fill);
}

.ren-icon > svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ─── Sizes ─── */

.ren-icon-xs {
  width: 0.75rem;   /* 12px */
  height: 0.75rem;
}

.ren-icon-sm {
  width: 1rem;      /* 16px */
  height: 1rem;
}

.ren-icon-md {
  width: 1.25rem;   /* 20px */
  height: 1.25rem;
}

.ren-icon-lg {
  width: 1.5rem;    /* 24px */
  height: 1.5rem;
}

.ren-icon-xl {
  width: 2rem;      /* 32px */
  height: 2rem;
}

.ren-icon-2xl {
  width: 3rem;      /* 48px */
  height: 3rem;
}

/* ─── Color Variants ─── */

.ren-icon-primary {
  color: var(--color-accent);
}

.ren-icon-success {
  color: var(--color-success);
}

.ren-icon-warning {
  color: var(--color-warning);
}

.ren-icon-danger {
  color: var(--color-danger);
}

.ren-icon-muted {
  color: var(--color-text-secondary);
}

/* ─── Animation ─── */

.ren-icon-spin {
  animation: ren-icon-spin var(--duration-loop) var(--ease-loop) infinite;
}

@keyframes ren-icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ren-icon-spin {
    animation: none;
  }
}
/* ============================================
   RenDS — Card Component
   ============================================
   Versatile container with header, body, footer.
   CSS-only. No JS needed.

   Constraint-driven: limited variants on purpose
   to ensure consistent UI across projects.

   Usage:
     <div class="ren-card">
       <div class="ren-card-header">
         <h3 class="ren-card-title">Title</h3>
         <p class="ren-card-description">Description here</p>
       </div>
       <div class="ren-card-body">
         Content
       </div>
       <div class="ren-card-footer">
         <button class="ren-btn">Action</button>
       </div>
     </div>

   Minimal:
     <div class="ren-card">
       <p>Just content, no sections needed.</p>
     </div>
   ============================================ */

/* ─── Base Card ─── */
.ren-card {
  background-color: var(--ren-card-bg);
  border: var(--ren-card-border-width) solid var(--ren-card-border-color);
  border-radius: var(--ren-card-radius);
  box-shadow: var(--ren-card-shadow);
  overflow: hidden;
}

/* ─── Sections ─── */

.ren-card-header {
  display: flex;
  flex-direction: column;
  gap: var(--ren-card-header-gap);
  padding: var(--ren-card-padding) var(--ren-card-padding) 0;
}

/* Title and description are typically applied to <h2>/<h3>/<h4> and <p>
   respectively, which carry browser-default margins that fight the header's
   `gap`. Reset them here so .ren-card-header's flex gap is the actual visual
   gap, regardless of the underlying tag. */
.ren-card-title {
  font-size: var(--title-sm-size, var(--text-lg));
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
  margin: 0;
}

.ren-card-description {
  font-size: var(--caption-size, var(--text-sm));
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin: 0;
}

.ren-card-body {
  padding: var(--ren-card-padding);
}

/* Remove top padding when body follows header */
.ren-card-header + .ren-card-body {
  padding-top: var(--space-3);
}

/* Optional spacing between documented card sections without forcing a new
   flex/grid layout on the card root. */
.ren-card > :is(.ren-card-header, .ren-card-body, .ren-card-footer, .ren-card-footer-border)
  + :is(.ren-card-header, .ren-card-body, .ren-card-footer, .ren-card-footer-border) {
  margin-block-start: var(--ren-card-gap);
}

.ren-card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--ren-card-padding) var(--ren-card-padding);
}

/* Footer at bottom with border (for action-heavy cards) */
.ren-card-footer-border {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--ren-card-padding);
  border-top: var(--stroke-1) solid var(--color-border-muted);
}

/* When the bordered footer follows the header directly (no body in between),
   tighten the top padding so the divider line sits visually close to the
   description, not floating ~17px below it (which is what you get from the
   default --space-3 padding plus line-height extra of the description text). */
.ren-card-header + .ren-card-footer-border {
  padding-top: var(--space-2);
}

/* When card has no sections, just padding */
.ren-card > :first-child:not(.ren-card-header):not(.ren-card-body):not(.ren-card-footer) {
  padding-top: var(--ren-card-padding);
}

.ren-card > :last-child:not(.ren-card-header):not(.ren-card-body):not(.ren-card-footer) {
  padding-bottom: var(--ren-card-padding);
}

/* Simple card (no sections) */
.ren-card-simple {
  padding: var(--ren-card-padding);
}

/* ─── Variants ─── */

/* Elevated — more shadow, no border */
.ren-card-elevated {
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

/* Outline — emphasis border, no background difference */
.ren-card-outline {
  background-color: transparent;
}

/* Ghost — no border, no bg (content grouping) */
.ren-card-ghost {
  background-color: transparent;
  border: none;
}

/* Sunken — recessed appearance */
.ren-card-sunken {
  background-color: var(--color-surface-sunken);
  border-color: transparent;
}

/* ─── Interactive Card ─── */

.ren-card-interactive {
  cursor: pointer;
  transition:
    box-shadow var(--duration-state) var(--ease-enter),
    border-color var(--duration-state) var(--ease-enter),
    transform var(--duration-tactile) var(--ease-enter);
}

.ren-card-interactive:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.ren-card-interactive:active {
  transform: scale(0.99);
}

.ren-card-interactive:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: var(--ring-offset-width);
}

/* ─── Selectable Card ─── */

.ren-card-selectable {
  cursor: pointer;
  transition:
    border-color var(--duration-state) var(--ease-enter),
    box-shadow var(--duration-state) var(--ease-enter);
}

.ren-card-selectable:hover {
  border-color: var(--color-accent);
}

.ren-card-selectable[aria-selected="true"],
.ren-card-selectable[data-selected] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

/* ─── Status accent (top border) ─── */

.ren-card[data-status="success"] { border-top: 3px solid var(--color-success); }
.ren-card[data-status="warning"] { border-top: 3px solid var(--color-warning); }
.ren-card[data-status="danger"]  { border-top: 3px solid var(--color-danger); }
.ren-card[data-status="info"]    { border-top: 3px solid var(--color-info); }

/* ─── Card with cover image ─── */

.ren-card-cover {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ─── Card Group (grid of cards) ─── */

.ren-card-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-4);
}
/* ============================================
   RenDS — Link Component
   ============================================
   Styled anchor with variants.
   CSS-only. No JS needed.

   44px touch target on mobile via min-height.
   Accessible focus ring on keyboard navigation.

   Usage:
     <a href="/page" class="ren-link">Standard link</a>
     <a href="/page" class="ren-link ren-link-muted">Subtle link</a>
     <a href="/page" class="ren-link ren-link-external">External ↗</a>
   ============================================ */

/* ─── Base Link ─── */
.ren-link {
  display: inline;
  color: var(--ren-link-color);
  font-weight: var(--ren-link-font-weight, inherit);
  background: none;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--color-text-link), transparent 60%);
  text-underline-offset: 0.15em;
  text-decoration-thickness: var(--ren-link-underline);
  cursor: pointer;
  transition:
    color var(--duration-tactile) var(--ease-enter),
    text-decoration-color var(--duration-tactile) var(--ease-enter);
  /* Inline elements: ensure touch target via padding */
  -webkit-tap-highlight-color: transparent;
}

.ren-link:hover {
  color: var(--ren-link-hover-color);
  background: none;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--color-text-link-hover), transparent 30%);
  text-decoration-thickness: calc(var(--ren-link-underline) * 2);
}

.ren-link:active {
  opacity: 0.8;
}

.ren-link:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─── Muted / Subtle ─── */
.ren-link-muted {
  color: var(--color-text-muted);
  text-decoration: none;
}

.ren-link-muted:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* ─── Unstyled (inherits parent color) ─── */
.ren-link-plain {
  color: inherit;
  text-decoration: none;
}

.ren-link-plain:hover {
  text-decoration: underline;
}

/* ─── External link indicator ─── */
.ren-link-external::after {
  content: ' ↗';
  font-size: 0.85em;
  text-decoration: none;
  display: inline;
}

/* ─── Nav link (block-level, with padding for touch target) ─── */
.ren-link-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-1) var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition:
    background-color var(--duration-tactile) var(--ease-enter),
    color var(--duration-tactile) var(--ease-enter);
}

.ren-link-nav:hover {
  background-color: var(--color-fill);
  color: var(--color-text);
  text-decoration: none;
}

.ren-link-nav[aria-current="page"],
.ren-link-nav[data-active] {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: var(--weight-medium);
}

.ren-link-nav:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: -2px;
}

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

.ren-link-skip:focus {
  top: var(--space-3);
}
/* ============================================
   RenDS — Banner / Alert Component
   ============================================
   Inline messages for success, warning, error, info.
   CSS-only. No JS needed (dismiss is optional JS).

   Different from Toast: Banner is inline, persistent,
   part of the page flow. Toast is ephemeral overlay.

   Usage:
     <div class="ren-banner" role="status">
       <span class="ren-banner-icon">ℹ</span>
       <div class="ren-banner-content">
         <strong class="ren-banner-title">Info</strong>
         <p class="ren-banner-message">Your changes have been saved.</p>
       </div>
     </div>

     <div class="ren-banner ren-banner-danger" role="alert">
       <span class="ren-banner-icon">!</span>
       <div class="ren-banner-content">
         <strong class="ren-banner-title">Error</strong>
         <p class="ren-banner-message">Could not save changes.</p>
       </div>
       <button class="ren-banner-dismiss" aria-label="Dismiss">&times;</button>
     </div>

   Simple (no title):
     <div class="ren-banner ren-banner-success" role="status">
       <span class="ren-banner-icon">✓</span>
       <p class="ren-banner-message">File uploaded successfully.</p>
     </div>
   ============================================ */

/* ─── Base Banner ─── */
.ren-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--ren-banner-gap);
  padding: var(--ren-banner-padding);
  border-radius: var(--ren-banner-radius);
  font-size: var(--body-size);
  line-height: var(--leading-normal);
  /* Default: info */
  background-color: var(--ren-banner-bg);
  border: var(--ren-banner-border-width) solid var(--ren-banner-border-color);
  color: var(--ren-banner-color);
}

/* ─── Icon ─── */
.ren-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--ren-banner-icon-size);
  height: var(--ren-banner-icon-size);
  font-size: var(--text-base);
  margin-top: 1px;
}

/* ─── Content ─── */
.ren-banner-content {
  flex: 1;
  min-width: 0;
}

.ren-banner-title {
  display: block;
  font-weight: var(--weight-semibold);
  font-size: var(--label-size, var(--text-sm));
  margin: 0 0 var(--space-1);
}

.ren-banner-message {
  font-size: var(--caption-size, var(--text-sm));
  color: var(--color-text-secondary);
  margin: 0;
}

/* Title-only (no message) */
.ren-banner-title:last-child {
  margin-bottom: 0;
}

/* ─── Actions (buttons inside banner) ─── */
.ren-banner-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* ─── Dismiss button ─── */
.ren-banner-dismiss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  line-height: 1;
  transition: color var(--duration-tactile) var(--ease-enter);
}

.ren-banner-dismiss:hover {
  color: var(--color-text);
}

.ren-banner-dismiss:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ─── Variants ─── */

.ren-banner-success {
  background-color: var(--color-success-subtle);
  border-color: color-mix(in oklch, var(--color-success), transparent 70%);
}

.ren-banner-warning {
  background-color: var(--color-warning-subtle);
  border-color: color-mix(in oklch, var(--color-warning), transparent 70%);
}

.ren-banner-danger {
  background-color: var(--color-danger-subtle);
  border-color: color-mix(in oklch, var(--color-danger), transparent 70%);
}

.ren-banner-neutral {
  background-color: var(--color-surface-sunken);
  border-color: var(--color-border);
}

/* ─── Compact variant (less padding, single line) ─── */
.ren-banner-compact {
  align-items: center;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
}

.ren-banner-compact .ren-banner-icon {
  width: 1.25rem;
  height: 1.25rem;
  font-size: var(--text-sm);
}

/* ─── Full-width variant (no border-radius, for page top) ─── */
.ren-banner-full {
  border-radius: 0;
  border-inline-start: none;
  border-inline-end: none;
}

/* ─── Dismiss animation ─── */
.ren-banner[data-dismissing] {
  animation: ren-banner-dismiss var(--duration-state) var(--ease-enter) forwards;
}

@keyframes ren-banner-dismiss {
  to {
    opacity: 0;
    height: 0;
    padding-block: 0;
    margin-block: 0;
    overflow: hidden;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ren-banner[data-dismissing] {
    animation: none;
    display: none;
  }
}
/* ============================================
   RenDS — Breadcrumb Component
   ============================================
   Hierarchical navigation trail.
   CSS-only. No JS needed.

   Uses semantic <nav> + <ol> for accessibility.
   Screen readers announce "Breadcrumb" navigation.

   Usage:
     <nav aria-label="Breadcrumb" class="ren-breadcrumb">
       <ol>
         <li><a href="/">Home</a></li>
         <li><a href="/products">Products</a></li>
         <li><a href="/products/shoes" aria-current="page">Shoes</a></li>
       </ol>
     </nav>

   With custom separator:
     <nav aria-label="Breadcrumb" class="ren-breadcrumb"
          style="--breadcrumb-separator: '/'">
       ...
     </nav>
   ============================================ */

.ren-breadcrumb > ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ren-breadcrumb-gap);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--ren-breadcrumb-font-size);
}

.ren-breadcrumb > ol > li {
  display: inline-flex;
  align-items: center;
  gap: var(--ren-breadcrumb-gap);
  color: var(--ren-breadcrumb-color);
}

/* Separator */
.ren-breadcrumb > ol > li + li::before {
  content: var(--ren-breadcrumb-separator);
  color: var(--color-text-faint);
  font-size: 1.1em;
  margin-inline-end: var(--space-1);
}

/* Links */
.ren-breadcrumb > ol a {
  color: var(--ren-breadcrumb-color);
  text-decoration: none;
  padding: var(--space-1) 0;
  border-radius: var(--radius-sm);
  transition: color var(--duration-tactile) var(--ease-enter);
}

.ren-breadcrumb > ol a:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ren-breadcrumb > ol a:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Current page (last item) */
.ren-breadcrumb [aria-current="page"] {
  color: var(--ren-breadcrumb-active-color);
  font-weight: var(--weight-medium);
  text-decoration: none;
  pointer-events: none;
}

/* ─── Truncated (for deep paths) ─── */
.ren-breadcrumb-truncated > ol > li:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
  display: none;
}

/* Show ellipsis in place of hidden items */
.ren-breadcrumb-truncated > ol > li:nth-child(2)::after {
  content: '…';
  color: var(--color-text-faint);
  padding: 0 var(--space-1);
}
/* ============================================
   RenDS — Pagination Component
   ============================================
   Page navigation for lists/tables.
   CSS-only. No JS needed for styling.

   Semantic <nav> + links for accessibility.
   44px touch targets on all interactive elements.

   Usage (simple):
     <nav aria-label="Pagination" class="ren-pagination">
       <a href="?p=1" class="ren-pagination-prev" aria-label="Previous page">&lsaquo;</a>
       <a href="?p=1" class="ren-pagination-item">1</a>
       <a href="?p=2" class="ren-pagination-item" aria-current="page">2</a>
       <a href="?p=3" class="ren-pagination-item">3</a>
       <a href="?p=3" class="ren-pagination-next" aria-label="Next page">&rsaquo;</a>
     </nav>

   Usage (minimal — just prev/next):
     <nav aria-label="Pagination" class="ren-pagination ren-pagination-simple">
       <a href="?p=1" class="ren-pagination-prev">Previous</a>
       <span class="ren-pagination-info">Page 2 of 10</span>
       <a href="?p=3" class="ren-pagination-next">Next</a>
     </nav>
   ============================================ */

.ren-pagination {
  display: flex;
  align-items: center;
  gap: var(--ren-pagination-gap);
}

/* ─── Page items ─── */
.ren-pagination-item,
.ren-pagination-prev,
.ren-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ren-pagination-size);
  min-height: var(--ren-pagination-size);
  padding: var(--space-1) var(--space-2);
  font-size: var(--ren-pagination-font-size);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--ren-pagination-radius);
  border: var(--stroke-1) solid transparent;
  background-color: var(--ren-pagination-bg);
  transition:
    background-color var(--duration-tactile) var(--ease-enter),
    border-color var(--duration-tactile) var(--ease-enter);
  user-select: none;
}

.ren-pagination-item:hover,
.ren-pagination-prev:hover,
.ren-pagination-next:hover {
  background-color: var(--ren-pagination-hover-bg);
}

.ren-pagination-item:active,
.ren-pagination-prev:active,
.ren-pagination-next:active {
  background-color: var(--color-fill-hover);
}

.ren-pagination-item:focus-visible,
.ren-pagination-prev:focus-visible,
.ren-pagination-next:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: var(--ring-offset-width);
}

/* Current page */
.ren-pagination-item[aria-current="page"] {
  background-color: var(--ren-pagination-active-bg);
  color: var(--ren-pagination-active-color);
  pointer-events: none;
}

/* Disabled prev/next */
.ren-pagination-prev[aria-disabled="true"],
.ren-pagination-next[aria-disabled="true"],
.ren-pagination-prev:disabled,
.ren-pagination-next:disabled {
  color: var(--color-disabled-text);
  pointer-events: none;
  opacity: 0.5;
}

/* Ellipsis */
.ren-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  user-select: none;
}

/* ─── Simple variant (prev + info + next) ─── */
.ren-pagination-simple {
  gap: var(--space-2);
}

.ren-pagination-info {
  font-size: var(--caption-size, var(--text-sm));
  color: var(--color-text-muted);
  white-space: nowrap;
  padding: 0 var(--space-2);
}

/* ─── Compact variant (smaller touch targets) ─── */
.ren-pagination-compact .ren-pagination-item,
.ren-pagination-compact .ren-pagination-prev,
.ren-pagination-compact .ren-pagination-next {
  min-width: var(--size-sm);
  min-height: var(--size-sm);
  padding: var(--space-1);
  font-size: var(--caption-size, var(--text-sm));
}

/* ─── Centered (for standalone pagination) ─── */
.ren-pagination-centered {
  justify-content: center;
}
/* ============================================
   RenDS — Tag / Chip Component
   ============================================
   Interactive badge with optional dismiss button.
   CSS-only (dismiss needs minimal JS).

   Different from Badge: Tag is interactive,
   dismissable, and represents user-selected items.

   Usage:
     <span class="ren-tag">
       HTML
     </span>

     <span class="ren-tag ren-tag-removable">
       React
       <button class="ren-tag-dismiss" aria-label="Remove React">&times;</button>
     </span>

     <span class="ren-tag ren-tag-clickable" tabindex="0" role="button">
       Filter: Active
     </span>
   ============================================ */

.ren-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ren-tag-gap);
  min-height: var(--ren-tag-height);
  padding: 0.25em var(--ren-tag-padding-x);
  font-size: var(--ren-tag-font-size);
  font-weight: var(--ren-tag-font-weight);
  line-height: 1.5;
  color: var(--ren-tag-color);
  background-color: var(--ren-tag-bg);
  border: var(--stroke-1) solid var(--ren-tag-border-color);
  border-radius: var(--ren-tag-radius);
  white-space: nowrap;
  user-select: none;
  max-width: 100%;
}

/* Tag text truncation */
.ren-tag > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Dismiss button ─── */
.ren-tag-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-full);
  font-size: 1.1em;
  line-height: 1;
  flex-shrink: 0;
  transition:
    color var(--duration-tactile) var(--ease-enter),
    background-color var(--duration-tactile) var(--ease-enter);
}

.ren-tag-dismiss:hover {
  color: var(--color-text);
  background-color: var(--color-fill-hover);
}

.ren-tag-dismiss:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: 1px;
}

/* ─── Clickable / Selectable ─── */
.ren-tag-clickable {
  cursor: pointer;
  transition:
    background-color var(--duration-tactile) var(--ease-enter),
    border-color var(--duration-tactile) var(--ease-enter);
}

.ren-tag-clickable:hover {
  background-color: var(--color-fill-hover);
  border-color: var(--color-border-strong);
}

.ren-tag-clickable:active {
  background-color: var(--color-fill-active);
}

.ren-tag-clickable:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: var(--ring-offset-width);
}

/* Selected state */
.ren-tag-clickable[aria-pressed="true"],
.ren-tag-clickable[data-selected] {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}

/* ─── Color variants ─── */
.ren-tag-primary {
  background-color: var(--color-accent-subtle);
  border-color: color-mix(in oklch, var(--color-accent), transparent 70%);
  color: var(--color-accent);
}

.ren-tag-success {
  background-color: var(--color-success-subtle);
  border-color: color-mix(in oklch, var(--color-success), transparent 70%);
  color: var(--color-success-strong);
}

.ren-tag-warning {
  background-color: var(--color-warning-subtle);
  border-color: color-mix(in oklch, var(--color-warning), transparent 70%);
  color: var(--color-warning-strong);
}

.ren-tag-danger {
  background-color: var(--color-danger-subtle);
  border-color: color-mix(in oklch, var(--color-danger), transparent 70%);
  color: var(--color-danger-strong);
}

/* ─── Size variants ─── */
.ren-tag-sm {
  padding: 0.1em 0.45em;
  font-size: var(--text-xs);
  gap: 0.15em;
}

.ren-tag-lg {
  padding: 0.35em 0.8em;
  font-size: var(--body-size);
}

/* ─── Tag group ─── */
.ren-tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
/* ============================================
   RenDS — Separator
   ============================================
   Horizontal or vertical divider with optional
   label. CSS-only, no JS needed.

   Usage:
     <hr class="ren-separator">
     <div class="ren-separator-vertical"></div>
     <div class="ren-separator-label">or</div>
   ============================================ */

.ren-separator {
  border: none;
  background-color: var(--ren-separator-color);
}

/* Horizontal (default) */
.ren-separator,
.ren-separator-horizontal {
  width: 100%;
  height: var(--ren-separator-width);
  margin-block: var(--ren-separator-margin);
}

/* Vertical */
.ren-separator-vertical {
  width: var(--ren-separator-width);
  height: auto;
  align-self: stretch;
  margin-inline: var(--space-3);
}

/* With label (e.g. "or" between auth options) */
.ren-separator-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--caption-size);
  margin-block: var(--ren-separator-margin);
}

.ren-separator-label::before,
.ren-separator-label::after {
  content: '';
  flex: 1;
  height: var(--ren-separator-width);
  background-color: var(--ren-separator-color);
}
/* ============================================
   RenDS — Avatar
   ============================================
   Circular (or square) user image with fallback
   text, status indicator and group (overlap).

   Usage:
     <div class="ren-avatar"><img src="…" alt=""></div>
     <div class="ren-avatar ren-avatar-lg">JD</div>

     <div class="ren-avatar-wrapper">
       <div class="ren-avatar"><img …></div>
       <span class="ren-avatar-status"></span>
     </div>

     <div class="ren-avatar-group">
       <div class="ren-avatar">…</div>
       <div class="ren-avatar">…</div>
     </div>
   ============================================ */

.ren-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ren-avatar-size);     /* 40px default */
  height: var(--ren-avatar-size);
  border-radius: var(--ren-avatar-radius);
  overflow: hidden;
  background-color: var(--ren-avatar-bg);
  color: var(--ren-avatar-color);
  font-weight: var(--weight-semibold);
  font-size: var(--ren-avatar-font-size);
  flex-shrink: 0;
  user-select: none;
}

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

/* ─── Sizes ─── */
.ren-avatar-xs  { width: var(--avatar-xs);  height: var(--avatar-xs);  font-size: var(--text-xs); }
.ren-avatar-sm  { width: var(--avatar-sm);  height: var(--avatar-sm);  font-size: var(--text-xs); }
.ren-avatar-lg  { width: var(--avatar-lg);  height: var(--avatar-lg);  font-size: var(--text-base); }
.ren-avatar-xl  { width: var(--avatar-xl);  height: var(--avatar-xl);  font-size: var(--text-lg); }
.ren-avatar-2xl { width: var(--avatar-2xl); height: var(--avatar-2xl); font-size: var(--text-xl); }

/* ─── Square variant ─── */
.ren-avatar-square {
  border-radius: var(--radius-md);
}

/* ─── Status indicator ─── */
.ren-avatar-wrapper {
  position: relative;
  display: inline-block;
}

.ren-avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface);
  background-color: var(--color-success);
}

.ren-avatar-status-offline { background-color: var(--gray-400); }
.ren-avatar-status-busy    { background-color: var(--color-danger); }
.ren-avatar-status-away    { background-color: var(--color-warning); }

/* ─── Group (overlapping) ─── */
.ren-avatar-group {
  display: flex;
  flex-direction: row-reverse;
}

.ren-avatar-group > .ren-avatar {
  border: var(--ren-avatar-border);
  margin-inline-start: -0.5rem;
}

.ren-avatar-group > .ren-avatar:last-child {
  margin-inline-start: 0;
}
/* ============================================
   RenDS — Spinner
   ============================================
   Circular loading indicator. CSS-only animation
   that respects prefers-reduced-motion (falls
   back to a gentle opacity pulse instead of
   rotating).

   Usage:
     <span class="ren-spinner" role="status"
           aria-label="Loading"></span>
     <span class="ren-spinner ren-spinner-lg"></span>

   Accessibility:
     - Provide role="status" and aria-label for SR
     - On dark surfaces use .ren-spinner-light
   ============================================ */

.ren-spinner {
  display: inline-block;
  width: var(--ren-spinner-size);
  height: var(--ren-spinner-size);
  border: var(--ren-spinner-width) solid var(--color-fill-active);
  border-top-color: var(--ren-spinner-color);
  border-radius: var(--radius-full);
  animation: ren-spin var(--ren-spinner-speed) var(--ease-loop-smooth) infinite;
}

/* ─── Sizes ─── */
.ren-spinner-xs { width: 0.875rem; height: 0.875rem; border-width: 2px; }
.ren-spinner-sm { width: 1rem;     height: 1rem;     border-width: 2px; }
.ren-spinner-lg { width: 2rem;     height: 2rem;     border-width: 3px; }
.ren-spinner-xl { width: 3rem;     height: 3rem;     border-width: 3px; }

/* ─── Color variants ─── */
.ren-spinner-light {
  border-color: rgb(255, 255, 255, 0.3);
  border-top-color: var(--white);
}

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

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

/* Reduced motion: pulse opacity instead of rotating */
@media (prefers-reduced-motion: reduce) {
  .ren-spinner {
    animation: ren-spin-gentle var(--duration-loop-gentle) var(--ease-loop-pulse) infinite;
  }
}
/* ============================================
   RenDS — Skeleton
   ============================================
   Loading placeholder with shimmer animation.
   Respects prefers-reduced-motion (static fill).

   Usage:
     <div class="ren-skeleton ren-skeleton-heading"></div>
     <div class="ren-skeleton ren-skeleton-text"></div>
     <div class="ren-skeleton ren-skeleton-circle"></div>
     <div class="ren-skeleton ren-skeleton-rect"></div>

   Accessibility:
     - Wrap multiple skeletons in a container with
       aria-busy="true" aria-live="polite"
     - Replace with real content when loaded
   ============================================ */

.ren-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--ren-skeleton-bg) 25%,
    var(--ren-skeleton-shine) 50%,
    var(--ren-skeleton-bg) 75%
  );
  background-size: 200% 100%;
  animation: ren-skeleton-pulse var(--ren-skeleton-speed) var(--ease-loop-pulse) infinite;
  border-radius: var(--ren-skeleton-radius);
  min-height: 1rem;
}

/* ─── Variants ─── */
.ren-skeleton-text {
  height: 1em;
  width: 100%;
  border-radius: var(--radius-sm);
}

.ren-skeleton-heading {
  height: 1.5em;
  width: 60%;
  border-radius: var(--radius-sm);
}

.ren-skeleton-circle {
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radius-full);
}

.ren-skeleton-rect {
  width: 100%;
  height: 8rem;
  border-radius: var(--radius-md);
}

@keyframes ren-skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ren-skeleton {
    animation: none;
    background: var(--ren-skeleton-bg);
  }
}
/* ============================================
   RenDS — Kbd (keyboard shortcut)
   ============================================
   Inline chip showing a keyboard key or shortcut
   combo. Uses native <kbd> semantics.

   Usage:
     <kbd class="ren-kbd">⌘</kbd>
     <kbd class="ren-kbd">K</kbd>

   Combo:
     <kbd class="ren-kbd">⌘</kbd> + <kbd class="ren-kbd">K</kbd>
   ============================================ */

.ren-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: var(--ren-kbd-padding);
  font-family: var(--ren-kbd-font-family);
  font-size: var(--ren-kbd-font-size);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--ren-kbd-color);
  background-color: var(--ren-kbd-bg);
  border: var(--stroke-1) solid var(--ren-kbd-border);
  border-bottom-width: 2px;
  border-radius: var(--ren-kbd-radius);
  white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════════════════════════
   REN DIALOG / MODAL COMPONENT
   Native <dialog> element enhancement with CSS animations and modern APIs
   Uses @starting-style, transition-behavior: allow-discrete, and CSS nesting
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ DIALOG CONTAINER ═══ */
.ren-dialog {
  /* Structure */
  margin: auto;
  padding: 0;
  border: none;

  /* Sizing */
  max-width: var(--dialog-max-width, 32rem);
  max-height: 85dvh;
  width: 90vw;
  overflow: auto;

  /* Appearance */
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);

  /* Smooth scrolling for body overflow */
  scrollbar-gutter: stable;

  /* ═══ ANIMATION STATES ═══
     Uses semantic motion tokens so global motion tuning
     cascades to every component. See tokens/semantic/motion.css. */
  opacity: 1;
  transform: scale(1) translateY(0);

  transition:
    opacity   var(--duration-enter) var(--ease-enter),
    transform var(--duration-enter) var(--ease-enter),
    overlay   var(--duration-enter) allow-discrete,
    display   var(--duration-enter) allow-discrete;

  /* ═══ ENTRY ANIMATION (CSS Transitions instead of keyframes) ═══ */
  @starting-style {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }

  /* ═══ BACKDROP STYLING ═══
     Uses --transition-overlay so scrim fade/blur duration
     is tuned in one place (tokens/semantic/motion.css). */
  &::backdrop {
    background-color: rgb(0, 0, 0, 0);
    backdrop-filter: blur(0px);

    transition: var(--transition-overlay);

    /* ═══ BACKDROP ENTRY ANIMATION ═══ */
    @starting-style {
      background-color: rgb(0, 0, 0, 0);
      backdrop-filter: blur(0px);
    }
  }

  /* ═══ OPEN STATE ═══ */
  &[open] {
    opacity: 1;
    transform: scale(1) translateY(0);

    &::backdrop {
      background-color: var(--color-overlay);
      backdrop-filter: blur(4px);
    }
  }

  /* ═══ REDUCED MOTION ═══ */
  @media (prefers-reduced-motion: reduce) {
    transition: none;

    &::backdrop {
      transition: none;
    }
  }
}

/* ═══ DIALOG HEADER ═══
   No bottom border — separation from the body comes from spacing, not lines.
   Header padding-bottom + body padding-top give the breathing room. */
.ren-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-3);
  flex-shrink: 0;
}

/* ═══ DIALOG TITLE ═══ */
.ren-dialog-title {
  margin: 0;
  font-size: 1.25rem; /* ~20px */
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-text);
}

/* ═══ DIALOG DESCRIPTION ═══ */
.ren-dialog-description {
  margin: 0;
  margin-top: var(--space-2);
  font-size: 0.875rem; /* caption */
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ═══ DIALOG BODY ═══ */
.ren-dialog-body {
  padding: var(--space-6);
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* Allow flex shrinking */

  /* ═══ SCROLLBAR STYLING ═══ */
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;

    &:hover {
      background: var(--color-border-hover);
    }
  }
}

/* ═══ DIALOG FOOTER ═══ */
.ren-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-6);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* ═══ CLOSE BUTTON ═══ */
.ren-dialog-close {
  margin-inline-start: auto;
  padding: var(--space-2);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;

  /* Tactile transitions (hover / focus / press) */
  transition: var(--transition-tactile);

  &:hover {
    background-color: var(--color-background-hover);
    color: var(--color-text);
  }

  &:active {
    background-color: var(--color-background-active);
  }

  &:focus {
    outline: var(--ring-width) solid var(--color-focus-ring);
    outline-offset: var(--ring-offset-width);
  }

  & svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* ═══ SIZE VARIANTS ═══ */

/* Small dialog (24rem) */
.ren-dialog-sm {
  --dialog-max-width: 24rem;
}

/* Medium dialog (32rem) - DEFAULT */
.ren-dialog-md {
  --dialog-max-width: 32rem;
}

/* Large dialog (42rem) */
.ren-dialog-lg {
  --dialog-max-width: 42rem;
}

/* Extra Large dialog (56rem) */
.ren-dialog-xl {
  --dialog-max-width: 56rem;
}

/* Full width dialog (95dvw) */
.ren-dialog-full {
  max-width: 95dvw;
  max-height: 95dvh;
  width: 95dvw;
}

/* ═══ ALERT DIALOG VARIANT ═══ */
.ren-alert-dialog {
  /* No additional styling needed - alert behavior handled in JS */
}

/* ═══ MOBILE RESPONSIVE ═══ */
@media (max-width: 640px) {
  .ren-dialog {
    max-width: 100%;
    max-height: 100dvh;
    width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;

    /* ═══ BOTTOM SHEET ANIMATION (Mobile) ═══ */
    &[data-mobile-sheet] {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0;
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;

      transform: translateY(100%);
      transition:
        transform var(--duration-enter) var(--ease-enter),
        opacity   var(--duration-enter) var(--ease-enter),
        overlay   var(--duration-enter) allow-discrete,
        display   var(--duration-enter) allow-discrete;

      @starting-style {
        transform: translateY(100%);
      }

      &[open] {
        transform: translateY(0);
      }
    }
  }

  .ren-dialog-header,
  .ren-dialog-body,
  .ren-dialog-footer {
    padding: var(--space-4);
  }

  .ren-dialog-title {
    font-size: 1.125rem;
  }
}

/* ═══ WEB COMPONENT CONTAINER ═══ */
ren-dialog {
  display: contents;
}

.ren-dialog-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Appearance API bridge: public component tokens remain overridable at any scope. */
.ren-dialog,
.ren-alert-dialog {
  width: var(--ren-dialog-width, min(90vw, 500px));
  padding: var(--ren-dialog-padding, var(--space-6));
  border-radius: var(--ren-dialog-radius, var(--radius-xl));
  background: var(--ren-dialog-bg, var(--color-surface-overlay));
  border-color: var(--ren-dialog-border-color, var(--color-border));
  box-shadow: var(--ren-dialog-shadow, var(--shadow-xl));
  gap: var(--ren-dialog-gap, var(--space-4));
  transition-duration: var(--ren-dialog-duration, var(--duration-normal));
  transition-timing-function: var(--ren-dialog-easing, var(--ease-out));
}
.ren-dialog::backdrop,
.ren-alert-dialog::backdrop { background: var(--ren-dialog-backdrop, var(--color-overlay)); }
/* ═══ ANCHOR POSITIONING & BASE STYLES ═══ */
.ren-popover {
  position: absolute;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  max-width: 20rem;
  z-index: var(--z-popover, 1000);
  pointer-events: auto;
  margin: 0;
  inset: auto;
  border-top: none;

  /* Anchor positioning (modern browsers) */
  position-anchor: --popover-anchor;

  /* Default: below the trigger with automatic fallback */
  position-area: bottom span-all;

  /* Automatic flip when near viewport edges */
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;

  /* Enter/exit transitions driven by semantic motion tokens. */
  opacity: 0;
  transform: translateY(-4px) scale(0.95);
  transition:
    opacity   var(--duration-enter) var(--ease-enter),
    transform var(--duration-enter) var(--ease-enter),
    overlay   var(--duration-enter) var(--ease-enter) allow-discrete,
    display   var(--duration-enter) var(--ease-enter) allow-discrete;
}

/* ═══ POPOVER OPEN STATE ═══ */
.ren-popover:popover-open,
.ren-popover.ren-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ═══ POPOVER OPEN WITH @starting-style ═══ */
@starting-style {
  .ren-popover:popover-open {
    opacity: 0;
    transform: translateY(-4px) scale(0.95);
  }
}

/* ═══ POPOVER ARROW/CARET ═══ */
.ren-popover-arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
  border: inherit;
  border-top: none;
  border-inline-start: none;
  transform: rotate(45deg);
  z-index: -1;
}

/* ═══ PLACEMENT VARIANTS ═══ */
/* Bottom (default) */
.ren-popover[data-side="bottom"],
.ren-popover:not([data-side]) {
  position-area: bottom span-all;
  margin-block-start: var(--space-2);
  margin-block-end: 0;
  margin-inline: 0;

  & .ren-popover-arrow {
    top: -4px;
    left: 50%;
    transform: translateX(-50%) rotate(225deg);
  }
}

/* Top */
.ren-popover[data-side="top"] {
  position-area: top span-all;
  margin-block-start: 0;
  margin-block-end: var(--space-2);
  margin-inline: 0;

  & .ren-popover-arrow {
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }
}

/* Right */
.ren-popover[data-side="right"] {
  position-area: right span-all;
  margin-block: 0;
  margin-inline-start: var(--space-2);
  margin-inline-end: 0;

  & .ren-popover-arrow {
    left: -4px;
    top: 50%;
    transform: translateY(-50%) rotate(135deg);
  }
}

/* Left */
.ren-popover[data-side="left"] {
  position-area: left span-all;
  margin-block: 0;
  margin-inline-start: 0;
  margin-inline-end: var(--space-2);

  & .ren-popover-arrow {
    right: -4px;
    top: 50%;
    transform: translateY(-50%) rotate(315deg);
  }
}

/* ═══ POPOVER SECTIONS ═══ */
.ren-popover-header {
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--color-text-primary);
}

.ren-popover-body {
  color: var(--color-text-secondary);
  font-size: var(--size-body-sm);
  line-height: 1.5;
}

.ren-popover-footer {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-2);
}

/* ═══ RESPECTS MOTION PREFERENCES ═══
   Semantic --duration-enter already collapses to 0ms under
   reduced-motion. We keep this block to drop the transform
   (scale/translate) in the starting-style, so the popover
   fades in place instead of moving. */
@media (prefers-reduced-motion: reduce) {
  .ren-popover {
    transition:
      opacity var(--duration-enter),
      overlay var(--duration-enter) allow-discrete,
      display var(--duration-enter) allow-discrete;
    transform: none;
  }

  @starting-style {
    .ren-popover:popover-open {
      opacity: 0;
      transform: none;
    }
  }
}

/* ═══ FALLBACK FOR BROWSERS WITHOUT COMPLETE ANCHOR POSITIONING ═══ */
@supports not ((anchor-name: --ren-anchor) and
  (position-anchor: --ren-anchor) and
  (position-area: bottom span-all)) {
  .ren-popover {
    position: absolute;
    inset: auto auto auto auto;
  }

  [data-popover-trigger],
  .ren-popover-trigger {
    position: relative;
  }

  /* Fallback animations */
  .ren-popover {
    animation: ren-popover-fallback-open var(--duration-enter) var(--ease-enter);
  }

  .ren-popover:popover-open,
  .ren-popover.ren-open {
    animation: ren-popover-fallback-open var(--duration-enter) var(--ease-enter);
  }

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

@keyframes ren-popover-fallback-open {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Appearance API bridge */
.ren-popover {
  width: var(--ren-popover-width, 280px);
  max-width: var(--ren-popover-width, 280px);
  padding: var(--ren-popover-padding, var(--space-4));
  border-radius: var(--ren-popover-radius, var(--radius-lg));
  background: var(--ren-popover-bg, var(--color-surface-overlay));
  border-color: var(--ren-popover-border-color, var(--color-border));
  box-shadow: var(--ren-popover-shadow, var(--shadow-lg));
  transition-duration: var(--ren-popover-duration, var(--duration-normal));
  transition-timing-function: var(--ren-popover-easing, var(--ease-out));
}
/* ═══ ANCHOR POSITIONING & BASE STYLES ═══ */
.ren-tooltip {
  position: absolute;
  background: var(--ren-tooltip-bg, var(--color-text));
  color: var(--ren-tooltip-color, var(--color-text-inverted));
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  font-size: var(--size-caption, 0.75rem);
  max-width: 15rem;
  pointer-events: none;
  z-index: var(--z-tooltip, 2000);
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
  margin: 0;
  inset: auto;
  overflow: visible;

  /* Anchor positioning (modern browsers) */
  position-anchor: --tooltip-anchor;

  /* Default: above the trigger with automatic fallback */
  position-area: top span-all;

  /* Automatic flip when near viewport edges */
  position-try-fallbacks: flip-block;

  /* Smooth transitions — semantic tokens keep tooltip in sync with the
     rest of the overlay family (popover, menu, dialog). Collapses to
     0ms under prefers-reduced-motion via tokens/semantic/motion.css. */
  opacity: 0;
  transform: translateY(4px) scale(0.95);
  transition:
    opacity var(--duration-enter) var(--ease-enter),
    transform var(--duration-enter) var(--ease-enter),
    overlay var(--duration-enter) var(--ease-enter) allow-discrete,
    display var(--duration-enter) var(--ease-enter) allow-discrete;
}

/* ═══ TOOLTIP OPEN STATE ═══ */
.ren-tooltip:popover-open,
.ren-tooltip.ren-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ═══ TOOLTIP OPEN WITH @starting-style ═══ */
@starting-style {
  .ren-tooltip:popover-open {
    opacity: 0;
    transform: translateY(4px) scale(0.95);
  }
}

/* ═══ TOOLTIP ARROW/CARET ═══ */
.ren-tooltip-arrow {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--ren-tooltip-bg, var(--color-text));
  transform: rotate(45deg);
  z-index: -1;
}

/* ═══ PLACEMENT VARIANTS ═══ */
/* Bottom */
.ren-tooltip[data-side="bottom"] {
  position-area: bottom span-all;
  margin-block-start: var(--space-1);
  margin-block-end: 0;
  margin-inline: 0;

  & .ren-tooltip-arrow {
    top: -3px;
    left: 50%;
    transform: translateX(-50%) rotate(225deg);
  }
}

/* Top (default) */
.ren-tooltip[data-side="top"],
.ren-tooltip:not([data-side]) {
  position-area: top span-all;
  margin-block-start: 0;
  margin-block-end: var(--space-1);
  margin-inline: 0;

  & .ren-tooltip-arrow {
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
  }
}

/* Right */
.ren-tooltip[data-side="right"] {
  position-area: right span-all;
  margin-block: 0;
  margin-inline-start: var(--space-1);
  margin-inline-end: 0;

  & .ren-tooltip-arrow {
    left: -3px;
    top: 50%;
    transform: translateY(-50%) rotate(135deg);
  }
}

/* Left */
.ren-tooltip[data-side="left"] {
  position-area: left span-all;
  margin-block: 0;
  margin-inline-start: 0;
  margin-inline-end: var(--space-1);

  & .ren-tooltip-arrow {
    right: -3px;
    top: 50%;
    transform: translateY(-50%) rotate(315deg);
  }
}

/* ═══ RESPECTS MOTION PREFERENCES ═══
   Semantic tokens already collapse to 0ms under reduce, but we keep
   this belt-and-suspenders block so the transform-half can be skipped
   entirely (no scale bounce) while overlay/display discrete swaps
   still happen. */
@media (prefers-reduced-motion: reduce) {
  .ren-tooltip {
    transition: opacity var(--duration-enter), transform var(--duration-enter),
                overlay var(--duration-enter) allow-discrete,
                display var(--duration-enter) allow-discrete;
  }

  @starting-style {
    .ren-tooltip:popover-open {
      opacity: 0;
      transform: scale(1);
    }
  }
}

/* ═══ FALLBACK FOR BROWSERS WITHOUT COMPLETE ANCHOR POSITIONING ═══ */
@supports not ((anchor-name: --ren-anchor) and
  (position-anchor: --ren-anchor) and
  (position-area: top span-all)) {
  .ren-tooltip {
    position: absolute;
    inset: auto auto auto auto;
  }

  .ren-tooltip-trigger {
    position: relative;
  }

  /* Fallback animations */
  .ren-tooltip {
    animation: ren-tooltip-fallback-open var(--duration-enter) var(--ease-enter);
  }

  .ren-tooltip:popover-open,
  .ren-tooltip.ren-open {
    animation: ren-tooltip-fallback-open var(--duration-enter) var(--ease-enter);
  }

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

@keyframes ren-tooltip-fallback-open {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Appearance API bridge */
.ren-tooltip {
  background: var(--ren-tooltip-bg, var(--color-text));
  color: var(--ren-tooltip-color, var(--color-text-inverted));
  font-size: var(--ren-tooltip-font-size, var(--caption-sm-size));
  padding-inline: var(--ren-tooltip-padding-x, var(--space-3));
  padding-block: var(--ren-tooltip-padding-y, var(--space-1));
  border-radius: var(--ren-tooltip-radius, var(--radius-md));
  box-shadow: var(--ren-tooltip-shadow, var(--shadow-sm));
  transition-duration: var(--ren-tooltip-duration, var(--duration-fast));
  transition-timing-function: var(--ren-tooltip-easing, var(--ease-out));
}
/* ═══ TABS CONTAINER ═══ */
.ren-tabs {
  container-type: inline-size;
  container-name: ren-tabs;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ═══ TAB LIST ═══ */
.ren-tab-list {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Smooth scrolling for horizontal tabs */
.ren-tab-list {
  scroll-behavior: smooth;
}

/* ═══ TAB ITEM (UNDERLINE VARIANT - DEFAULT) ═══ */
.ren-tab {
  position: relative;
  padding: var(--space-2) var(--space-4);
  font-size: var(--label-md-size);
  font-weight: var(--label-md-weight);
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  min-height: var(--size-lg);
  display: flex;
  align-items: center;
  white-space: nowrap;
  user-select: none;
  transition: var(--transition-tactile);
}

/* Active tab */
.ren-tab[aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
  font-weight: var(--label-lg-weight);
}

/* Tab hover state */
.ren-tab:hover:not([aria-disabled="true"]):not(:disabled) {
  color: var(--color-text);
  background-color: var(--color-fill);
}

/* Tab focus ring */
.ren-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Disabled tab */
.ren-tab:disabled,
.ren-tab[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--color-text-muted);
}

.ren-tab:disabled:hover,
.ren-tab[aria-disabled="true"]:hover {
  background-color: transparent;
}

/* ═══ TAB PANELS ═══ */
.ren-tab-panel {
  padding-block: var(--space-4);
}

.ren-tab-panel[hidden] {
  display: none;
}

/* Panel focus ring */
.ren-tab-panel:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* ═══ VARIANT: PILLS ═══ */
.ren-tab-list-pills {
  border-bottom: none;
  gap: var(--space-1);
}

.ren-tab-list-pills .ren-tab {
  border-bottom: none;
  border-radius: var(--radius-md);
  background-color: transparent;
  padding: var(--space-2) var(--space-3);
}

.ren-tab-list-pills .ren-tab[aria-selected="true"] {
  background-color: var(--color-fill);
  border-bottom-color: transparent;
  font-weight: var(--label-lg-weight);
}

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

/* ═══ VARIANT: UNDERLINE (DEFAULT) ═══ */
.ren-tab-list-underline {
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-2);
}

.ren-tab-list-underline .ren-tab {
  border-bottom: 2px solid transparent;
}

.ren-tab-list-underline .ren-tab[aria-selected="true"] {
  border-bottom-color: var(--color-accent);
}

/* ═══ VARIANT: ENCLOSED ═══ */
.ren-tab-list-enclosed {
  border-bottom: none;
  gap: var(--space-2);
}

.ren-tab-list-enclosed .ren-tab {
  border: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background-color: var(--color-fill);
  padding: var(--space-3) var(--space-4);
}

.ren-tab-list-enclosed .ren-tab[aria-selected="true"] {
  border-color: var(--color-border);
  border-bottom-color: var(--color-surface);
  background-color: var(--color-surface);
  color: var(--color-text);
  position: relative;
  z-index: 1;
}

.ren-tab-list-enclosed .ren-tab[aria-selected="true"]::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: -1px;
  right: -1px;
  height: 1px;
  background-color: var(--color-surface);
}

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

/* ═══ COMPACT LAYOUT (Container Query) ═══ */
@container ren-tabs (max-width: 480px) {
  .ren-tab-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Add scrollbar styling for better UX */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }

  .ren-tab-list::-webkit-scrollbar {
    height: 4px;
  }

  .ren-tab-list::-webkit-scrollbar-track {
    background: transparent;
  }

  .ren-tab-list::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 2px;
  }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-tab {
    transition: none;
  }
}
/* Appearance API bridge */
.ren-tabs {
  min-block-size: var(--ren-tabs-height, var(--size-lg));
  font-size: var(--ren-tabs-font-size, var(--label-size));
  font-weight: var(--ren-tabs-font-weight, var(--label-weight));
  color: var(--ren-tabs-color, var(--color-text-muted));
  border-color: var(--ren-tabs-border-color, var(--color-border));
  gap: var(--ren-tabs-gap, 0);
  transition-duration: var(--ren-tabs-duration, var(--duration-fast));
  transition-timing-function: var(--ren-tabs-easing, var(--ease-out));
}
.ren-tabs [aria-selected="true"], .ren-tabs [data-state="active"] { color: var(--ren-tabs-active-color, var(--color-text)); }
.ren-tabs [data-indicator], .ren-tabs-indicator { background: var(--ren-tabs-indicator-color, var(--color-accent)); }
/**
 * RenDS — <ren-accordion> Component
 * ═══════════════════════════════════
 * CSS-first accordion using native <details><summary>
 *
 * Features:
 *   - Smooth height animation using ::details-content
 *   - Chevron rotation on open state
 *   - Multiple variants: default, bordered, flush
 *   - Reduced motion support
 *   - Dark mode support (via semantic tokens)
 *   - Fallback for browsers without ::details-content support
 */

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

.ren-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: 1px solid var(--color-border);

  /* Default variant: divider lines between items */
  & > details {
    border-bottom: 1px solid var(--color-border);

    &:last-child {
      border-bottom: none;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* TRIGGER / SUMMARY ELEMENT */
/* ═══════════════════════════════════════════════════════════════════ */

.ren-accordion-trigger,
.ren-accordion > details > summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-weight: var(--label-lg-weight);
  font-size: var(--label-lg-size);
  line-height: 1.4;
  color: var(--color-text);
  background-color: transparent;
  border: none;
  min-height: var(--size-lg);
  width: 100%;
  text-align: start;
  user-select: none;
  list-style: none;
  transition: var(--transition-tactile);

  /* Remove default browser marker */
  &::marker,
  &::-webkit-details-marker {
    display: none;
    content: '';
  }

  /* Chevron icon via ::after pseudo-element */
  &::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-inline-start: var(--space-3);
    flex-shrink: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform var(--duration-enter) var(--ease-enter);
      border: none;
    transform: rotate(0deg);
  }

  /* Hover state */
  &:hover {
    background-color: var(--color-fill);
  }

  /* Active state */
  &:active {
    background-color: var(--color-fill-active);
  }

  /* Focus ring */
  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }

  /* Disabled state */
  &:disabled,
  &[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;

    &:hover {
      background-color: transparent;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* REMOVE NATIVE DISCLOSURE TRIANGLE (WebKit fallback) */
/* ═══════════════════════════════════════════════════════════════════ */

.ren-accordion > details > summary::-webkit-details-marker {
  display: none;
}

.ren-accordion-trigger::-webkit-details-marker {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* OPEN STATE — ROTATE CHEVRON */
/* ═══════════════════════════════════════════════════════════════════ */

.ren-accordion > details[open] > summary::after {
  transform: rotate(180deg);
}

/* Fallback for custom markup */
.ren-accordion-trigger[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* Animate the native details content box. The global reset enables
   keyword-size interpolation, so block-size can transition to and from auto. */
@supports selector(details::details-content) {
  .ren-accordion > details::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition:
      block-size var(--duration-exit) var(--ease-exit),
      opacity var(--duration-exit) var(--ease-exit),
      content-visibility var(--duration-exit) var(--ease-exit);
    transition-behavior: allow-discrete;
  }

  .ren-accordion > details[open]::details-content {
    block-size: auto;
    opacity: 1;
    transition-duration: var(--duration-enter);
    transition-timing-function: var(--ease-enter);
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* CONTENT ANIMATION — MODERN APPROACH */
/* ═══════════════════════════════════════════════════════════════════ */

.ren-accordion > details {
  /* Modern: use ::details-content for height animation */
  & > .ren-accordion-content {
    padding: 0 var(--space-4) var(--space-4);
    color: var(--color-text-muted);
    line-height: 1.6;
    overflow: hidden;

    /* Browsers with ::details-content support */
    @supports selector(::-webkit-details-content) {
      height: 0;
      overflow: hidden;
      transition:
        height var(--duration-enter) var(--ease-enter),
        opacity var(--duration-enter) var(--ease-enter);
    }

    /* Also try Chrome/V8 syntax (may vary by engine) */
    @supports selector(::details-content) {
      height: 0;
      overflow: hidden;
      transition:
        height var(--duration-enter) var(--ease-enter),
        opacity var(--duration-enter) var(--ease-enter);
    }
  }

  /* Fallback for browsers without ::details-content: use opacity + max-height */
  & > .ren-accordion-content {
    opacity: 0;
    max-height: 0;
    transition:
      opacity var(--duration-enter) var(--ease-enter),
      max-height var(--duration-enter) var(--ease-enter);
  }

  /* When details is open */
  &[open] > .ren-accordion-content {
    opacity: 1;
    max-height: 1000px; /* Reasonable fallback limit */

    /* Modern: animate to auto height with ::details-content */
    @supports selector(::details-content) {
      height: auto;
    }
  }

  /* Entry animation starting point (for ::details-content) */
  @starting-style {
    &[open] > .ren-accordion-content {
      opacity: 0;
      max-height: 0;
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* CONTENT ELEMENT */
/* ═══════════════════════════════════════════════════════════════════ */

.ren-accordion-content {
  padding: 0 var(--space-4) var(--space-4);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Hide custom content via hidden attribute (for non-details markup) */
.ren-accordion-content[hidden] {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* VARIANT: BORDERED */
/* ═══════════════════════════════════════════════════════════════════ */

.ren-accordion-bordered {
  border-top: none;

  & > details,
  & .ren-accordion-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    overflow: hidden;

    &:last-child {
      margin-bottom: 0;
    }
  }

  & > details > summary,
  & .ren-accordion-trigger {
    padding: var(--space-4) var(--space-4);
  }

  & > details > .ren-accordion-content,
  & .ren-accordion-content {
    padding: 0 var(--space-4) var(--space-4);
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* VARIANT: FLUSH (no borders, minimal spacing) */
/* ═══════════════════════════════════════════════════════════════════ */

.ren-accordion-flush {
  border-top: none;

  & > details,
  & .ren-accordion-item {
    border-bottom: none;
    padding: var(--space-2) 0;

    &:last-child {
      border-bottom: none;
    }
  }

  & > details > summary,
  & .ren-accordion-trigger {
    padding: var(--space-3) 0;
  }

  & > details > .ren-accordion-content,
  & .ren-accordion-content {
    padding: 0 0 var(--space-3);
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* REDUCED MOTION */
/* ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .ren-accordion-trigger::after,
  .ren-accordion > details > summary::after {
    transition: none;
  }

  .ren-accordion > details > .ren-accordion-content {
    transition: none;
  }

  .ren-accordion > details::details-content {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* ACCESSIBILITY SUPPORT */
/* ═══════════════════════════════════════════════════════════════════ */

/* Ensure proper contrast for focus states */
.ren-accordion > details > summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Dark mode: tokens will auto-adjust via CSS variables */
@media (prefers-color-scheme: dark) {
  /* Tokens like --color-text, --color-border, etc. should already be defined
     in the design system's color token reset. No additional changes needed. */
}
/* ═══ MENU CONTAINER ═══ */
.ren-menu {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 0.5rem);
  box-shadow: var(--shadow-lg, 0 10px 25px rgb(0, 0, 0, 0.1));
  padding-block: var(--space-1, 0.25rem);
  min-width: 12rem;
  z-index: var(--z-dropdown, 1000);
  position: absolute;
  animation: ren-menu-open var(--duration-enter) var(--ease-enter);
  visibility: hidden;
  opacity: 0;
  inset: auto auto auto auto;
  margin: 0;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ═══ MENU OPEN STATE ═══ */
.ren-menu[popover]:popover-open,
.ren-menu.ren-open {
  visibility: visible;
  opacity: 1;
}

/* ═══ MENU ITEM BASE ═══ */
.ren-menu-item {
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  cursor: pointer;
  font-size: var(--size-body, 1rem);
  color: var(--color-text);
  border-radius: var(--radius-sm, 0.25rem);
  min-height: 2rem;
  /* Tactile hover/focus — shared preset from semantic motion tokens */
  transition: var(--transition-tactile);
  white-space: nowrap;
  text-decoration: none;
}

.ren-menu-item:hover,
.ren-menu-item[data-highlighted] {
  background-color: var(--color-fill);
  color: var(--color-text);
}

.ren-menu-item:active {
  background-color: var(--color-fill-hover);
}

/* ═══ MENU ITEM DISABLED STATE ═══ */
.ren-menu-item[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══ MENU ITEM DANGER VARIANT ═══ */
.ren-menu-item.ren-menu-item-danger:hover,
.ren-menu-item.ren-menu-item-danger[data-highlighted] {
  background-color: var(--color-danger-subtle);
  color: var(--color-danger);
}

/* ═══ MENU ITEM ICON ═══ */
.ren-menu-item-icon {
  flex-shrink: 0;
  width: var(--size-icon-md, 1.25rem);
  height: var(--size-icon-md, 1.25rem);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══ MENU ITEM SHORTCUT/LABEL ═══ */
.ren-menu-item-shortcut {
  margin-inline-start: auto;
  font-size: var(--size-caption, 0.75rem);
  color: var(--color-text-muted);
  font-family: monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ═══ MENU ITEM DESCRIPTION ═══ */
.ren-menu-item-description {
  font-size: var(--size-caption, 0.75rem);
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* ═══ MENU SEPARATOR ═══ */
.ren-menu-separator {
  height: 1px;
  background: var(--color-border);
  margin-block: var(--space-1, 0.25rem);
}

/* ═══ MENU LABEL/GROUP HEADER ═══ */
.ren-menu-label {
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  font-size: var(--size-caption, 0.75rem);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ═══ MENU GROUP ═══ */
.ren-menu-group {
  display: contents;
}

/* ═══ CHECKBOX MENU ITEM ═══ */
.ren-menu-checkbox-item,
.ren-menu-radio-item {
  position: relative;
  padding-inline-start: calc(var(--space-3, 0.75rem) + 20px + var(--space-2, 0.5rem));
}

.ren-menu-checkbox-item::before,
.ren-menu-radio-item::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--space-3, 0.75rem);
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-radius: 2px;
  background: white;
  /* Tactile — shared semantic preset */
  transition: var(--transition-tactile);
}

.ren-menu-radio-item::before {
  border-radius: 50%;
}

/* ═══ CHECKBOX/RADIO CHECKED STATE ═══ */
.ren-menu-checkbox-item[aria-checked="true"]::before,
.ren-menu-radio-item[aria-checked="true"]::before {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.ren-menu-checkbox-item[aria-checked="true"]::after,
.ren-menu-radio-item[aria-checked="true"]::after {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--space-3, 0.75rem) + 4px);
  top: 50%;
  transform: translateY(-50%);
}

.ren-menu-checkbox-item[aria-checked="true"]::after {
  width: 8px;
  height: 4px;
  border-inline-start: 2px solid white;
  border-bottom: 2px solid white;
  transform: translateY(-55%) rotate(-45deg);
}

.ren-menu-radio-item[aria-checked="true"]::after {
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* ═══ ANIMATIONS ═══ */
@keyframes ren-menu-open {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ═══ CLOSING STATE WITH ANIMATION ═══ */
.ren-menu[data-closing] {
  animation: ren-menu-close var(--duration-exit) var(--ease-exit) forwards;
}

@keyframes ren-menu-close {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

/* ═══ RESPECTS MOTION PREFERENCES ═══
   Semantic --duration-* already collapse to 0ms under reduced-motion
   (see tokens/semantic/motion.css). We keep this block as a
   belt-and-suspenders fallback and to drop the scale/translate
   keyframe so the menu simply appears/disappears in place. */
@media (prefers-reduced-motion: reduce) {
  .ren-menu {
    animation: none;
    transition: opacity var(--duration-enter);
  }

  .ren-menu:not(.ren-open) {
    opacity: 0;
  }

  .ren-menu-item {
    transition: background-color 0s, color 0s;
  }

  .ren-menu[data-closing] {
    animation: none;
  }
}

/* ═══ NATIVE POPOVER API SUPPORT ═══ */
@supports (selector(:popover-open)) {
  .ren-menu[popover] {
    visibility: visible;
    opacity: 0;
    transition: opacity var(--duration-enter) var(--ease-enter),
                overlay var(--duration-enter) var(--ease-enter) allow-discrete,
                display var(--duration-enter) var(--ease-enter) allow-discrete;
    animation: none;
  }

  @starting-style {
    .ren-menu[popover]:popover-open {
      opacity: 0;
    }
  }

  .ren-menu[popover]:popover-open {
    opacity: 1;
  }
}

/* ═══ SCROLLBAR STYLING ═══ */
.ren-menu::-webkit-scrollbar {
  width: 6px;
}

.ren-menu::-webkit-scrollbar-track {
  background: transparent;
}

.ren-menu::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.ren-menu::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}
/* Appearance API bridge */
.ren-menu {
  min-inline-size: var(--ren-menu-width, 200px);
  padding: var(--ren-menu-padding, var(--space-1));
  border-radius: var(--ren-menu-radius, var(--radius-lg));
  background: var(--ren-menu-bg, var(--color-surface-overlay));
  border-color: var(--ren-menu-border, var(--color-border));
  box-shadow: var(--ren-menu-shadow, var(--shadow-lg));
  transition-duration: var(--ren-menu-duration, var(--duration-fast));
  transition-timing-function: var(--ren-menu-easing, var(--ease-out));
}
.ren-menu-item { min-block-size: var(--ren-menu-item-height, var(--size-md)); padding: var(--ren-menu-item-padding, var(--space-2) var(--space-3)); border-radius: var(--ren-menu-item-radius, var(--radius-sm)); }
.ren-menu-item:hover, .ren-menu-item[data-highlighted] { background: var(--ren-menu-item-hover-bg, var(--color-fill)); }
.ren-menu-item-danger { color: var(--ren-menu-danger-color, var(--color-danger)); }
/* ═══════════════════════════════════════════════════════════════════
   RenDS — Select Component
   ═══════════════════════════════════════════════════════════════════
   Custom, accessible select/dropdown component with full keyboard nav,
   ARIA support, and multi-select capability.

   Structure:
   .ren-select (container)
     .ren-select-trigger (button showing selected value)
       .ren-select-value (the displayed text)
       .ren-select-placeholder (when nothing selected)
       .ren-select-icon (chevron)
     .ren-select-content (dropdown listbox)
       .ren-select-item (option)
       .ren-select-group (optional grouping)
       .ren-select-label (group header)
       .ren-select-separator (divider between groups)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ SELECT CONTAINER ═══ */
.ren-select {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  font-family: inherit;
}

/* ═══ SELECT TRIGGER (Button) ═══ */
.ren-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);

  /* Input styling */
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  font-size: var(--body-size);
  font-family: inherit;
  color: var(--color-text);
  background-color: var(--color-input-bg);
  border: var(--stroke-1) solid var(--color-input-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: start;
  white-space: nowrap;

  /* Semantic preset keeps trigger hover/focus in sync with other
     tactile inputs (button, checkbox, text field). */
  transition: var(--transition-tactile);
}

.ren-select-trigger:hover:not(:disabled):not([aria-expanded="true"]) {
  background-color: var(--color-input-bg-hover);
}

.ren-select-trigger:focus-visible {
  outline: none;
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
  background-color: var(--color-input-bg-hover);
}

.ren-select-trigger[aria-expanded="true"] {
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
  background-color: var(--color-input-bg-hover);
}

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

/* ═══ SELECT VALUE / PLACEHOLDER ═══ */
.ren-select-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

.ren-select-placeholder {
  color: var(--color-input-placeholder);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══ SELECT ICON (Chevron) ═══ */
.ren-select-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-micro) var(--ease-enter);
  pointer-events: none;
}

.ren-select-trigger[aria-expanded="true"] .ren-select-icon {
  transform: rotate(180deg);
}

/* SVG chevron icon styling */
.ren-select-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══ SELECT CONTENT (Dropdown Listbox) ═══ */
.ren-select-content {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-1);
  background: var(--color-surface);
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding-block: var(--space-2);
  max-height: 15rem;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  z-index: var(--z-dropdown, 1000);

  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  animation: ren-select-close var(--duration-exit) var(--ease-exit) forwards;
}

/* ═══ SELECT CONTENT OPEN STATE ═══ */
.ren-select-content[popover]:popover-open,
.ren-select-content.ren-open {
  visibility: visible;
  opacity: 1;
  animation: ren-select-open var(--duration-enter) var(--ease-enter);
}

@keyframes ren-select-open {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ren-select-close {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

/* ═══ SELECT ITEM (Option) ═══ */
.ren-select-item {
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  /* Micro-duration keeps option hover snappy; tokens/semantic/motion
     collapses this to 0ms under reduced-motion. */
  transition:
    background-color var(--duration-micro) var(--ease-enter),
    color var(--duration-micro) var(--ease-enter);
  white-space: nowrap;
  user-select: none;
  min-height: 2rem;
}

.ren-select-item:hover:not([aria-disabled="true"]),
.ren-select-item[data-highlighted] {
  background-color: var(--color-fill);
  color: var(--color-text);
}

.ren-select-item[aria-selected="true"] {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: 500;
}

.ren-select-item[aria-selected="true"]::before {
  content: '';
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  position: relative;
}

.ren-select-item[aria-selected="true"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}

.ren-select-item[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══ SELECT GROUP ═══ */
.ren-select-group {
  display: block;
  padding-block: var(--space-1);
}

/* ═══ SELECT GROUP LABEL ═══ */
.ren-select-label {
  padding: var(--space-1) var(--space-3);
  font-size: var(--caption-size);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  user-select: none;
}

/* ═══ SELECT SEPARATOR ═══ */
.ren-select-separator {
  height: var(--stroke-1);
  background: var(--color-border);
  margin-block: var(--space-1);
}

/* ═══ SELECT EMPTY STATE ═══ */
.ren-select-empty {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--body-size);
  white-space: nowrap;
}

/* ═══ SIZE VARIANTS ═══ */
.ren-select-sm .ren-select-trigger {
  min-height: var(--size-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.ren-select-lg .ren-select-trigger {
  min-height: var(--size-xl);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-lg);
}

/* ═══ MULTI-SELECT CHIPS/TAGS ═══ */
.ren-select-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
}

.ren-select-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-fill);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
  white-space: nowrap;
}

.ren-select-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: var(--transition-tactile);
}

.ren-select-chip-remove:hover {
  color: var(--color-text);
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-select-trigger,
  .ren-select-icon,
  .ren-select-item {
    transition: none;
  }

  .ren-select-content {
    animation: none;
    opacity: 0;
  }

  .ren-select-content.ren-open {
    opacity: 1;
  }
}

/* ═══ SCROLLBAR STYLING ═══ */
.ren-select-content::-webkit-scrollbar {
  width: 6px;
}

.ren-select-content::-webkit-scrollbar-track {
  background: transparent;
}

.ren-select-content::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.ren-select-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ═══ NATIVE POPOVER API SUPPORT ═══ */
@supports (selector(:popover-open)) {
  .ren-select-content[popover] {
    visibility: visible;
    opacity: 0;
    transition: opacity var(--duration-enter) var(--ease-enter),
                overlay var(--duration-enter) var(--ease-enter) allow-discrete,
                display var(--duration-enter) var(--ease-enter) allow-discrete;
    animation: none;
  }

  @starting-style {
    .ren-select-content[popover]:popover-open {
      opacity: 0;
    }
  }

  .ren-select-content[popover]:popover-open {
    opacity: 1;
  }
}
/**
 * RenDS — Toast Notification System CSS
 * =====================================
 * Styles for notification toasts with animations,
 * positioning, variants, and responsive behavior.
 */

/* ═══ VIEWPORT CONTAINER ═══ */
.ren-toast-viewport {
  position: fixed;
  z-index: var(--z-toast, 9999);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 2rem));
}

/* Position variants */
.ren-toast-viewport[data-position="top-right"] {
  top: var(--space-4);
  right: var(--space-4);
  flex-direction: column;
}

.ren-toast-viewport[data-position="top-left"] {
  top: var(--space-4);
  left: var(--space-4);
  flex-direction: column;
}

.ren-toast-viewport[data-position="top-center"] {
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
}

.ren-toast-viewport[data-position="bottom-right"] {
  bottom: var(--space-4);
  right: var(--space-4);
  flex-direction: column-reverse;
}

.ren-toast-viewport[data-position="bottom-left"] {
  bottom: var(--space-4);
  left: var(--space-4);
  flex-direction: column-reverse;
}

.ren-toast-viewport[data-position="bottom-center"] {
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column-reverse;
}

/* ═══ TOAST CONTAINER ═══ */
.ren-toast {
  pointer-events: auto;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-width: 20rem;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  /* Enter + exit use semantic tokens so global motion tuning cascades here. */
  animation: ren-toast-fade-in var(--duration-enter) var(--ease-enter);
}

.ren-toast[data-closing] {
  animation: ren-toast-fade-out var(--duration-exit) var(--ease-exit);
  opacity: 0;
}

/* Slide-in animations by position */
.ren-toast-viewport[data-position="top-right"] .ren-toast,
.ren-toast-viewport[data-position="bottom-right"] .ren-toast {
  animation: ren-toast-slide-in-right var(--duration-enter) var(--ease-enter);
}

.ren-toast-viewport[data-position="top-right"] .ren-toast[data-closing],
.ren-toast-viewport[data-position="bottom-right"] .ren-toast[data-closing] {
  animation: ren-toast-slide-out-right var(--duration-exit) var(--ease-exit);
}

.ren-toast-viewport[data-position="top-left"] .ren-toast,
.ren-toast-viewport[data-position="bottom-left"] .ren-toast {
  animation: ren-toast-slide-in-left var(--duration-enter) var(--ease-enter);
}

.ren-toast-viewport[data-position="top-left"] .ren-toast[data-closing],
.ren-toast-viewport[data-position="bottom-left"] .ren-toast[data-closing] {
  animation: ren-toast-slide-out-left var(--duration-exit) var(--ease-exit);
}

.ren-toast-viewport[data-position="top-center"] .ren-toast,
.ren-toast-viewport[data-position="bottom-center"] .ren-toast {
  animation: ren-toast-fade-in var(--duration-enter) var(--ease-enter);
}

/* ═══ TOAST CONTENT STRUCTURE ═══ */
.ren-toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

/* Body wraps title + description + actions */
.ren-toast-body {
  flex: 1;
  min-width: 0;
}

.ren-toast-title {
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--text-sm);
  line-height: var(--leading-5);
  color: var(--color-text);
  margin: 0;
}

.ren-toast-description {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

.ren-toast-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

/* The action button itself (the docs name it .ren-toast-action; we layer it
   on top of the standard .ren-btn variants for consistent styling). */
.ren-toast-action {
  /* Inherits its visual from .ren-btn ren-btn-ghost ren-btn-sm — this rule
     is just a hook for consumers who want to override per-toast. */
}

.ren-toast-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
  font-size: 18px;
  line-height: 1;
  /* Tactile (hover/focus/press) — uses shared semantic preset */
  transition: var(--transition-tactile);
}

.ren-toast-close:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}

.ren-toast-close:active {
  background-color: var(--color-surface-active);
}

/* ═══ TOAST VARIANTS ═══ */
/* Success */
.ren-toast-success {
  background: color-mix(in srgb, var(--color-success-subtle) 65%, var(--color-surface-raised));
}

.ren-toast-success .ren-toast-icon {
  color: var(--color-success);
}

/* Error / Danger */
.ren-toast-error,
.ren-toast-danger {
  background: color-mix(in srgb, var(--color-danger-subtle) 65%, var(--color-surface-raised));
}

.ren-toast-error .ren-toast-icon,
.ren-toast-danger .ren-toast-icon {
  color: var(--color-danger);
}

/* Warning */
.ren-toast-warning {
  background: color-mix(in srgb, var(--color-warning-subtle) 65%, var(--color-surface-raised));
}

.ren-toast-warning .ren-toast-icon {
  color: var(--color-warning);
}

/* Info */
.ren-toast-info {
  background: color-mix(in srgb, var(--color-info-subtle) 65%, var(--color-surface-raised));
}

.ren-toast-info .ren-toast-icon {
  color: var(--color-info);
}

/* Loading */
.ren-toast-loading .ren-toast-icon {
  animation: ren-spinner-rotate 0.8s linear infinite;
}

/* ═══ PROGRESS BAR ═══ */
.ren-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width linear;
}

/* ═══ SWIPE STATE ═══ */
.ren-toast[data-swiping] {
  transition: none;
}

/* ═══ ANIMATIONS ═══ */
@keyframes ren-toast-slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes ren-toast-slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes ren-toast-slide-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes ren-toast-slide-out-left {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

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

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

@keyframes ren-spinner-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ═══ REDUCED MOTION ═══
   Belt-and-suspenders: semantic --duration-* already collapse
   to 0ms under reduced-motion (see tokens/semantic/motion.css),
   so the animations above become instant. We keep this block
   to force a plain fade (no slide) as an Apple-HIG alternative,
   and to stop the loading spinner. */
@media (prefers-reduced-motion: reduce) {
  .ren-toast,
  .ren-toast[data-closing],
  .ren-toast-viewport[data-position="top-right"] .ren-toast,
  .ren-toast-viewport[data-position="bottom-right"] .ren-toast,
  .ren-toast-viewport[data-position="top-left"] .ren-toast,
  .ren-toast-viewport[data-position="bottom-left"] .ren-toast,
  .ren-toast-viewport[data-position="top-center"] .ren-toast,
  .ren-toast-viewport[data-position="bottom-center"] .ren-toast {
    animation: ren-toast-fade-in var(--duration-micro) linear !important;
  }

  .ren-toast[data-closing] {
    animation: ren-toast-fade-out var(--duration-micro) linear !important;
  }

  .ren-toast-loading .ren-toast-icon {
    animation: none;
    opacity: 0.6;
  }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 640px) {
  .ren-toast-viewport {
    max-width: calc(100vw - 1rem);
    bottom: var(--space-3);
    left: var(--space-2);
    right: var(--space-2);
    width: auto;
  }

  .ren-toast-viewport[data-position="top-right"],
  .ren-toast-viewport[data-position="top-left"],
  .ren-toast-viewport[data-position="top-center"] {
    bottom: auto;
    left: var(--space-2);
    right: var(--space-2);
    width: auto;
    transform: none;
  }

  .ren-toast-viewport[data-position="bottom-right"],
  .ren-toast-viewport[data-position="bottom-left"],
  .ren-toast-viewport[data-position="bottom-center"] {
    bottom: var(--space-3);
    left: var(--space-2);
    right: var(--space-2);
    width: auto;
    transform: none;
  }

  .ren-toast {
    min-width: unset;
    width: 100%;
  }
}
/* Appearance API bridge */
.ren-toast { inline-size: var(--ren-toast-width, 360px); padding: var(--ren-toast-padding, var(--space-4)); border-radius: var(--ren-toast-radius, var(--radius-lg)); background: var(--ren-toast-bg, var(--color-surface-raised)); border-color: var(--ren-toast-border, var(--color-border)); box-shadow: var(--ren-toast-shadow, var(--shadow-lg)); gap: var(--ren-toast-gap, var(--space-3)); animation-duration: var(--ren-toast-anim-duration, var(--duration-normal)); animation-timing-function: var(--ren-toast-easing, var(--ease-out)); }

@media (any-pointer: coarse), (pointer: coarse) {
  .ren-toast-close {
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
  }
}
/* ═══ REN SLIDER COMPONENT ═══ */

/* ═══ BASE WRAPPER ═══ */
.ren-slider {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ═══ TRACK CONTAINER ═══ */
.ren-slider-track {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 20px;
  cursor: pointer;
}

/* ═══ RANGE INPUT STYLING ═══ */
.ren-slider-track input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-fill-active);
  outline: none;
  margin: 0;
  padding: 0;

  /* ═══ TRACK FILL WITH CSS VARIABLE ═══ */
  background: linear-gradient(
    to right,
    var(--color-accent) 0%,
    var(--color-accent) var(--value, 0%),
    var(--color-fill-active) var(--value, 0%),
    var(--color-fill-active) 100%
  );

  & ::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid white;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: var(--transition-tactile);

    &:hover {
      transform: scale(1.1);
    }

    &:active {
      transform: scale(0.95);
    }
  }

  & ::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid white;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: var(--transition-tactile);

    &:hover {
      transform: scale(1.1);
    }

    &:active {
      transform: scale(0.95);
    }
  }

  & ::-webkit-slider-thumb:focus-visible,
  & ::-moz-range-thumb:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;

    & ::-webkit-slider-thumb,
    & ::-moz-range-thumb {
      cursor: not-allowed;
    }
  }
}

/* ═══ LABEL ═══ */
.ren-slider-label {
  font-size: var(--font-size-label);
  font-weight: 500;
  color: var(--color-text);
}

/* ═══ VALUE DISPLAY ═══ */
.ren-slider-value {
  font-size: var(--font-size-body-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ═══ TICK MARKS ═══ */
.ren-slider-marks {
  display: flex;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  margin-top: var(--space-1);

  & .ren-slider-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;

    & .ren-slider-mark-tick {
      width: 2px;
      height: 6px;
      background: var(--color-fill-subtle);
      border-radius: 1px;
      margin-bottom: var(--space-0-5);
    }

    & .ren-slider-mark-label {
      font-size: var(--font-size-xs);
      color: var(--color-text-muted);
    }
  }
}

/* ═══ SIZE VARIANTS ═══ */
.ren-slider-track {
  &.ren-slider-sm input[type="range"] {
    height: 4px;
    background: linear-gradient(
      to right,
      var(--color-accent) 0%,
      var(--color-accent) var(--value, 0%),
      var(--color-fill-active) var(--value, 0%),
      var(--color-fill-active) 100%
    );

    & ::-webkit-slider-thumb {
      width: 16px;
      height: 16px;
    }

    & ::-moz-range-thumb {
      width: 16px;
      height: 16px;
    }
  }

  &.ren-slider-lg input[type="range"] {
    height: 8px;
    background: linear-gradient(
      to right,
      var(--color-accent) 0%,
      var(--color-accent) var(--value, 0%),
      var(--color-fill-active) var(--value, 0%),
      var(--color-fill-active) 100%
    );

    & ::-webkit-slider-thumb {
      width: 24px;
      height: 24px;
    }

    & ::-moz-range-thumb {
      width: 24px;
      height: 24px;
    }
  }
}

/* ═══ COLOR VARIANTS ═══ */
.ren-slider-track {
  &.ren-slider-success input[type="range"] {
    background: linear-gradient(
      to right,
      var(--color-success) 0%,
      var(--color-success) var(--value, 0%),
      var(--color-fill-active) var(--value, 0%),
      var(--color-fill-active) 100%
    );

    & ::-webkit-slider-thumb {
      background: var(--color-success);
    }

    & ::-moz-range-thumb {
      background: var(--color-success);
    }
  }

  &.ren-slider-warning input[type="range"] {
    background: linear-gradient(
      to right,
      var(--color-warning) 0%,
      var(--color-warning) var(--value, 0%),
      var(--color-fill-active) var(--value, 0%),
      var(--color-fill-active) 100%
    );

    & ::-webkit-slider-thumb {
      background: var(--color-warning);
    }

    & ::-moz-range-thumb {
      background: var(--color-warning);
    }
  }

  &.ren-slider-danger input[type="range"] {
    background: linear-gradient(
      to right,
      var(--color-danger) 0%,
      var(--color-danger) var(--value, 0%),
      var(--color-fill-active) var(--value, 0%),
      var(--color-fill-active) 100%
    );

    & ::-webkit-slider-thumb {
      background: var(--color-danger);
    }

    & ::-moz-range-thumb {
      background: var(--color-danger);
    }
  }
}

/* ═══ VERTICAL ORIENTATION ═══ */
.ren-slider-track {
  &.ren-slider-vertical {
    width: auto;
    height: 200px;
    writing-mode: vertical-lr;

    & input[type="range"] {
      width: auto;
      height: 200px;
      writing-mode: vertical-lr;
      direction: rtl;
    }
  }
}

/* ═══ RANGE MODE (DUAL THUMBS) ═══ */
.ren-slider-range {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 20px;
  cursor: pointer;

  & .ren-slider-track-input {
    position: absolute;
    width: 100%;
    height: 6px;
    border-radius: var(--radius-full);
    background: linear-gradient(
      to right,
      var(--color-fill-active) 0 var(--value-start, 0%),
      var(--ren-slider-fill-color, var(--color-accent)) var(--value-start, 0%) var(--value-end, 100%),
      var(--color-fill-active) var(--value-end, 100%) 100%
    );
    pointer-events: none;
    margin: 0;
    padding: 0;
  }

  & input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 5;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    height: 20px;
    border-radius: var(--radius-full);
    outline: none;
    pointer-events: none;

    &::-webkit-slider-thumb {
      appearance: none;
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--color-accent);
      border: 2px solid white;
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      transition: var(--transition-tactile);
      z-index: 6;
      pointer-events: auto;

      &:hover {
        transform: scale(1.1);
      }

      &:active {
        transform: scale(0.95);
      }
    }

    &::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--color-accent);
      border: 2px solid white;
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      transition: var(--transition-tactile);
      z-index: 6;
      pointer-events: auto;

      &:hover {
        transform: scale(1.1);
      }

      &:active {
        transform: scale(0.95);
      }
    }
  }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-slider,
  .ren-slider * {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}
/* Appearance API bridge; pseudo-elements intentionally have no selector whitespace. */
.ren-slider-track input[type="range"] {
  block-size: var(--ren-slider-track-height, 6px);
  border-radius: var(--ren-slider-track-radius, var(--radius-full));
  background: var(--ren-slider-track-bg, var(--color-fill-active));
  transition-duration: var(--ren-slider-duration, var(--duration-fast));
  transition-timing-function: var(--ren-slider-easing, var(--ease-out));
}
.ren-slider-track input[type="range"]::-webkit-slider-thumb { inline-size: var(--ren-slider-thumb-size, 20px); block-size: var(--ren-slider-thumb-size, 20px); background: var(--ren-slider-thumb-bg, var(--color-surface)); border-color: var(--ren-slider-thumb-border, var(--color-accent)); box-shadow: var(--ren-slider-thumb-shadow, var(--shadow-sm)); }
.ren-slider-track input[type="range"]::-moz-range-thumb { inline-size: var(--ren-slider-thumb-size, 20px); block-size: var(--ren-slider-thumb-size, 20px); background: var(--ren-slider-thumb-bg, var(--color-surface)); border-color: var(--ren-slider-thumb-border, var(--color-accent)); box-shadow: var(--ren-slider-thumb-shadow, var(--shadow-sm)); }
.ren-slider-track input[type="range"] { background-image: linear-gradient(to right, var(--ren-slider-fill-color, var(--color-accent)) 0%, var(--ren-slider-fill-color, var(--color-accent)) var(--value, 0%), var(--ren-slider-track-bg, var(--color-fill-active)) var(--value, 0%), var(--ren-slider-track-bg, var(--color-fill-active)) 100%); }
/* ═══ REN TOGGLE GROUP COMPONENT ═══ */

/* ═══ BASE CONTAINER ═══ */
.ren-toggle-group {
  display: inline-flex;
  gap: var(--space-0-5);
  background: var(--color-fill);
  border-radius: var(--radius-lg);
  padding: 2px;
  align-items: center;

  & .ren-toggle-group-item {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-label);
    color: var(--color-text-muted);
    cursor: pointer;
    min-height: calc(var(--touch-min, 44px) - 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    transition: var(--transition-tactile);
    user-select: none;
    border: none;
    background: transparent;
    font-family: inherit;
    font-weight: 400;
    white-space: nowrap;

    /* ═══ HOVER STATE ═══ */
    &:hover:not([aria-pressed="true"]) {
      color: var(--color-text);
    }

    /* ═══ ACTIVE/PRESSED STATE ═══ */
    &[aria-pressed="true"],
    &[data-state="on"] {
      background: var(--color-surface);
      color: var(--color-text);
      font-weight: 500;
      box-shadow: var(--shadow-sm);
    }

    /* ═══ FOCUS VISIBLE ═══ */
    &:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
    }

    /* ═══ DISABLED STATE ═══ */
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
  }
}

/* ═══ OUTLINE VARIANT ═══ */
.ren-toggle-group.ren-toggle-group-outline {
  background: transparent;
  padding: 0;
  gap: var(--space-1);

  & .ren-toggle-group-item {
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);

    &:hover:not([aria-pressed="true"]) {
      border-color: var(--color-border-strong);
      color: var(--color-text);
    }

    &[aria-pressed="true"],
    &[data-state="on"] {
      border-color: var(--color-accent);
      background: color-mix(in srgb, var(--color-accent) 10%, transparent);
      color: var(--color-accent);
      font-weight: 500;
      box-shadow: none;
    }
  }
}

/* ═══ SIZE VARIANTS ═══ */
.ren-toggle-group {
  &.ren-toggle-group-sm {
    gap: 1px;
    padding: 1px;

    & .ren-toggle-group-item {
      padding: var(--space-0-5) var(--space-2);
      font-size: var(--font-size-xs);
      min-height: calc(var(--touch-min, 44px) - 12px);
    }
  }

  &.ren-toggle-group-lg {
    gap: var(--space-1);
    padding: var(--space-0-5);

    & .ren-toggle-group-item {
      padding: var(--space-2) var(--space-4);
      font-size: var(--font-size-body);
      min-height: calc(var(--touch-min, 44px) + 4px);
    }
  }
}

/* ═══ FULL WIDTH ═══ */
.ren-toggle-group.ren-toggle-group-full {
  display: flex;
  width: 100%;

  & .ren-toggle-group-item {
    flex: 1;
  }
}

/* ═══ VERTICAL ORIENTATION ═══ */
.ren-toggle-group.ren-toggle-group-vertical {
  flex-direction: column;
  display: inline-flex;

  &.ren-toggle-group-full {
    display: flex;
    width: 100%;
  }
}

/* ═══ ICON SUPPORT ═══ */
.ren-toggle-group-item {
  & [role="img"],
  & svg {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
  }
}

/* ═══ TRANSITIONS ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-toggle-group-item {
    transition: none;
  }
}
/* Appearance API bridge */
.ren-toggle-group { min-block-size: var(--ren-toggle-height, var(--size-lg)); padding-inline: var(--ren-toggle-padding-x, var(--space-4)); font-size: var(--ren-toggle-font-size, var(--label-size)); font-weight: var(--ren-toggle-font-weight, var(--label-weight)); border-radius: var(--ren-toggle-radius, var(--radius-md)); background: var(--ren-toggle-bg, var(--color-fill)); color: var(--ren-toggle-color, var(--color-text-muted)); }
.ren-toggle-group [aria-pressed="true"], .ren-toggle-group [data-state="on"] { background: var(--ren-toggle-active-bg, var(--color-surface)); color: var(--ren-toggle-active-color, var(--color-text)); }

@media (any-pointer: coarse), (pointer: coarse) {
  .ren-toggle-group.ren-toggle-group-sm .ren-toggle-group-item,
  .ren-toggle-group .ren-toggle-group-item {
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
  }
}
/**
 * RenDS — Combobox
 * =================
 * Light-DOM combobox. CSS works standalone; <ren-combobox> layers ARIA
 * and behavior on top.
 *
 * Markup:
 *   <div class="ren-combobox">
 *     <input class="ren-combobox-input">
 *     <div class="ren-combobox-list" role="listbox" hidden>
 *       <div class="ren-combobox-item" role="option">…</div>
 *     </div>
 *   </div>
 */

.ren-combobox {
  position: relative;
  display: block;
  width: 100%;

  &-input {
    width: 100%;
    padding-block: var(--space-2);
    padding-inline: var(--space-3);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);

    font-family: inherit;
    font-size: var(--text-sm);
    line-height: var(--leading-5);
    color: var(--color-text);

    transition: var(--transition-tactile);

    &::placeholder {
      color: var(--color-text-muted);
    }

    &:focus {
      outline: none;
      border-color: var(--color-accent);
      box-shadow: 0 0 0 3px var(--color-accent-subtle);
    }

    &:disabled {
      background: var(--color-fill);
      color: var(--color-text-muted);
      cursor: not-allowed;
    }

    /* Hide native type="search" decorations */
    &::-webkit-search-cancel-button,
    &::-webkit-search-decoration {
      -webkit-appearance: none;
      appearance: none;
      display: none;
    }
  }

  &-list {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + var(--space-1));
    z-index: 50;

    max-height: 15rem;
    padding-block: var(--space-1);

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);

    overflow-y: auto;
    overflow-x: hidden;

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

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: var(--color-fill-active);
      border-radius: var(--radius-full);
    }

    &::-webkit-scrollbar-thumb:hover {
      background: var(--color-fill-hover);
    }

    &[hidden] {
      display: none;
    }

    /* Open animation */
    @starting-style {
      opacity: 0;
      translate: 0 -4px;
    }
    animation: ren-combobox-open var(--duration-enter) var(--ease-enter);

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

  &[data-side="top"] &-list,
  &-list[data-side="top"] {
    top: auto;
    bottom: calc(100% + var(--space-1));
  }

  &[data-side="bottom"] &-list,
  &-list[data-side="bottom"] {
    top: calc(100% + var(--space-1));
    bottom: auto;
  }

  &-item {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    border-radius: var(--radius-sm);

    display: flex;
    flex-direction: column;
    gap: var(--space-0-5, 2px);

    font-size: var(--text-sm);
    color: var(--color-text);

    transition: background-color var(--duration-micro) var(--ease-enter);

    &[hidden] {
      display: none;
    }

    &[data-highlighted] {
      background: var(--color-fill);
    }

    &[aria-selected="true"] {
      background: var(--color-accent-subtle);
      color: var(--color-accent);
      font-weight: 500;
    }

    &[aria-disabled="true"] {
      opacity: 0.5;
      cursor: not-allowed;

      &:hover,
      &[data-highlighted] {
        background: transparent;
      }
    }
  }

  &-item-label {
    font-weight: 500;
    color: var(--color-text);
  }

  &-item-description {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  &-empty {
    padding: var(--space-8) var(--space-3);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);

    &[hidden] {
      display: none;
    }
  }

  &-loading {
    padding: var(--space-3);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);

    &[hidden] {
      display: none;
    }

    &::before {
      content: '';
      display: inline-block;
      width: 0.875rem;
      height: 0.875rem;
      margin-inline-end: var(--space-2);
      vertical-align: -2px;

      border: 2px solid var(--color-border);
      border-top-color: var(--color-accent);
      border-radius: var(--radius-full);

      animation: ren-combobox-spin var(--duration-slow, 800ms) linear infinite;

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

  &-group {
    & + & {
      margin-top: var(--space-1);
      border-top: 1px solid var(--color-border);
      padding-top: var(--space-1);
    }

    &[hidden] {
      display: none;
    }
  }

  &-group-label {
    padding: var(--space-2) var(--space-3);
    padding-bottom: var(--space-1);

    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
  }
}

@keyframes ren-combobox-open {
  from {
    opacity: 0;
    translate: 0 -4px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes ren-combobox-spin {
  to {
    transform: rotate(360deg);
  }
}
/* The custom-element host is structural only. Keeping it out of layout prevents
   an empty grid/flex item around the real dialog generated in light DOM. */
ren-sheet {
  display: contents;
}

/* Hide the dialog when it isn't open. The browser default for
   `<dialog>` without `open` is `display: none`, but the rule below
   sets `display: flex` for layout, so without this explicit reset
   the sheet would render in-flow on every page load. */
.ren-sheet:not([open]) {
  display: none;
}

.ren-sheet {
  position: fixed;
  margin: 0;
  padding: 0;
  border: none;

  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 0;

  /* Header/body/footer stack: body grows, footer pins to the bottom */
  display: flex;
  flex-direction: column;

  z-index: 50;
  max-width: 100%;
  max-height: 100%;
  touch-action: none; /* Prevent scroll chaining; swipe-to-dismiss handled by JS */

  &[data-side='right'] {
    inset-inline-end: 0;
    top: 0;
    bottom: 0;

    width: min(24rem, 90vw);
    height: 100dvh;

    @starting-style {
      translate: 100% 0;
    }

    translate: 0 0;
  }

  &[data-side='left'] {
    inset-inline-start: 0;
    top: 0;
    bottom: 0;

    width: min(24rem, 90vw);
    height: 100dvh;

    @starting-style {
      translate: -100% 0;
    }

    translate: 0 0;
  }

  &[data-side='bottom'] {
    bottom: 0;
    inset-inline: 0;

    width: 100vw;
    max-height: 85dvh;

    @starting-style {
      translate: 0 100%;
    }

    translate: 0 0;
  }

  &[data-side='top'] {
    top: 0;
    inset-inline: 0;

    width: 100vw;
    max-height: 85dvh;

    @starting-style {
      translate: 0 -100%;
    }

    translate: 0 0;
  }

  /* Size variants */
  &.-sm {
    width: min(18rem, 90vw);
  }

  &.-md {
    width: min(24rem, 90vw);
  }

  &.-lg {
    width: min(32rem, 90vw);
  }

  &.-xl {
    width: min(42rem, 90vw);
  }

  &.-full {
    width: 100vw;
    height: 100dvh;
  }

  /* Transitions — semantic tokens keep sheet in sync with ren-dialog and
     friends; --duration-enter / --ease-enter collapse to 0ms under
     prefers-reduced-motion via tokens/semantic/motion.css. */
  transition: translate var(--duration-enter) var(--ease-enter),
    opacity var(--duration-enter) var(--ease-enter);
  transition-behavior: allow-discrete;

  /* Reduce motion */
  @media (prefers-reduced-motion: reduce) {
    transition: none;

    @starting-style {
      opacity: 0;
    }

    opacity: 1;
  }

  /* Shadow on appropriate edge */
  &[data-side='right'] {
    box-shadow: -12px 0 32px rgb(0, 0, 0, 0.12);
  }

  &[data-side='left'] {
    box-shadow: 12px 0 32px rgb(0, 0, 0, 0.12);
  }

  &[data-side='bottom'] {
    box-shadow: 0 -12px 32px rgb(0, 0, 0, 0.12);
  }

  &[data-side='top'] {
    box-shadow: 0 12px 32px rgb(0, 0, 0, 0.12);
  }

  /* Backdrop animations — enter uses --duration-enter / --ease-enter,
     close uses the exit pair so the scrim fades at a slightly brisker
     clip than the entry, matching the rest of the overlay family. */
  &[open]::backdrop {
    animation: ren-sheet-backdrop-open var(--duration-enter) var(--ease-enter) forwards;
  }

  &::backdrop {
    @starting-style {
      opacity: 0;
    }

    opacity: 1;
    background: var(--color-overlay);
    backdrop-filter: blur(4px);

    animation: ren-sheet-backdrop-close var(--duration-exit) var(--ease-exit) forwards;
  }

  &:modal::backdrop {
    background: var(--color-overlay);
    backdrop-filter: blur(4px);
  }
}

.ren-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: var(--space-6);
  padding-block: var(--space-4);

  border-bottom: 1px solid var(--color-border);
}

.ren-sheet-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.ren-sheet-description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0 0;
}

.ren-sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--space-8);
  height: var(--space-8);

  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;

  font-size: 1.5rem;
  color: var(--color-text-muted);

  transition: var(--transition-tactile);

  &:hover {
    color: var(--color-text);
  }

  &:active {
    color: var(--color-text-muted);
  }
}

.ren-sheet-body {
  flex: 1;
  padding: var(--space-6);

  overflow-y: auto;
  overflow-x: hidden;

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

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--color-fill-active);
    border-radius: var(--radius-full);
  }

  &::-webkit-scrollbar-thumb:hover {
    background: var(--color-fill-hover);
  }
}

.ren-sheet-footer {
  display: flex;
  gap: var(--space-3);

  padding: var(--space-6);
  padding-block: var(--space-4);

  border-top: 1px solid var(--color-border);
}

.ren-sheet-handle {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: var(--space-3);

  margin-bottom: var(--space-4);

  &::before {
    content: '';
    display: block;

    width: 40px;
    height: 4px;

    background: var(--color-fill);
    border-radius: var(--radius-full);
  }
}

@keyframes ren-sheet-backdrop-open {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ren-sheet-backdrop-close {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
/* Appearance API bridge */
.ren-sheet {
  width: var(--ren-sheet-width, 320px);
  padding: var(--ren-sheet-padding, var(--space-6));
  border-radius: var(--ren-sheet-radius, 0);
  background: var(--ren-sheet-bg, var(--color-surface-overlay));
  border-color: var(--ren-sheet-border, var(--color-border));
  box-shadow: var(--ren-sheet-shadow, var(--shadow-xl));
  transition-duration: var(--ren-sheet-duration, var(--duration-normal));
  transition-timing-function: var(--ren-sheet-easing, var(--ease-out));
}
.ren-sheet::backdrop { background: var(--ren-sheet-backdrop, var(--color-overlay)); }
/* ═══ REN HOVER CARD COMPONENT ═══ */

/* ═══ TRIGGER ELEMENT ═══ */
.ren-hover-card-trigger {
  anchor-name: --ren-hover-card-anchor;
}

/* ═══ BASE CARD ═══ */
.ren-hover-card {
  position-anchor: --ren-hover-card-anchor;
  position: absolute;
  position-area: bottom span-all;
  inset: auto;
  margin-block-start: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-4);
  max-width: 20rem;
  min-width: 15rem;
  z-index: 1000;

  /* ═══ POPOVER API ═══
     Semantic tokens keep hover-card in sync with tooltip + popover. */
  &:popover-open {
    animation: ren-hover-card-in var(--duration-enter) var(--ease-enter) both;
  }

  /* ═══ ARROW STYLING ═══ */
  &::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
    border: inherit;
    border-inline-end: none;
    border-bottom: none;
    transform: rotate(45deg);
    z-index: -1;
    top: -4px;
    left: 50%;
    margin-inline-start: -4px;
  }

  /* ═══ FALLBACK POSITIONING ═══ */
  @supports not ((anchor-name: --ren-anchor) and
    (position-anchor: --ren-anchor) and
    (position-area: bottom span-all)) {
    position: fixed;
    top: auto;
    left: auto;
  }

  /* ═══ VIEWPORT EDGE HANDLING ═══ */
  @supports (position-try-fallbacks: flip-block) {
    position-try-fallbacks: flip-block;
  }
}

/* ═══ ANIMATION ═══ */
@starting-style {
  .ren-hover-card:popover-open {
    opacity: 0;
    translate: 0 -4px;
  }
}

@keyframes ren-hover-card-in {
  from {
    opacity: 0;
    translate: 0 -4px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ═══ SECTIONS ═══ */
.ren-hover-card-header {
  margin-bottom: var(--space-3);

  & h3,
  & h4 {
    margin: 0 0 var(--space-0-5) 0;
    font-size: var(--font-size-body);
    font-weight: 600;
    color: var(--color-text);
  }

  & p {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
  }
}

.ren-hover-card-body {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-body-sm);
  color: var(--color-text);
  line-height: 1.5;

  & :last-child {
    margin-bottom: 0;
  }
}

.ren-hover-card-footer {
  display: flex;
  gap: var(--space-2);
  align-items: center;

  & button,
  & a {
    font-size: var(--font-size-body-sm);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: var(--transition-tactile);

    &:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
    }
  }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-hover-card {
    &:popover-open {
      animation: none;
      opacity: 1;
      translate: 0 0;
    }

    &::before {
      display: none;
    }
  }
}

/* ═══ DARK MODE SUPPORT (OPTIONAL) ═══ */
@media (prefers-color-scheme: dark) {
  .ren-hover-card {
    /* ═══ USES CSS VARIABLES - AUTO ADAPTS ═══ */
  }
}

/* ═══ MOBILE RESPONSIVENESS ═══
   Hover cards keep a media query here because they're
   positioned absolutely relative to the viewport, and
   the constraint is viewport space, not container width. */
@media (max-width: 640px) {
  .ren-hover-card {
    max-width: calc(100vw - var(--space-4));
    min-width: auto;
    width: calc(100vw - var(--space-4));
  }
}

/* ═══ LOADING STATE ═══ */
.ren-hover-card.ren-hover-card-loading {
  pointer-events: none;

  & .ren-hover-card-body {
    opacity: 0.6;
  }
}

/* ═══ DISABLED STATE ═══ */
.ren-hover-card.ren-hover-card-disabled {
  display: none;
}

/* ═══ CUSTOM VARIANTS ═══ */
.ren-hover-card {
  &.ren-hover-card-sm {
    padding: var(--space-2);
    max-width: 15rem;
    min-width: 12rem;

    & .ren-hover-card-header {
      margin-bottom: var(--space-2);

      & h3,
      & h4 {
        font-size: var(--font-size-body-sm);
        margin-bottom: var(--space-0-25);
      }
    }

    & .ren-hover-card-body {
      margin-bottom: var(--space-2);
      font-size: var(--font-size-xs);
    }
  }

  &.ren-hover-card-lg {
    padding: var(--space-5);
    max-width: 25rem;
    min-width: 18rem;

    & .ren-hover-card-header {
      margin-bottom: var(--space-4);

      & h3,
      & h4 {
        font-size: var(--font-size-body);
      }
    }

    & .ren-hover-card-body {
      margin-bottom: var(--space-4);
      font-size: var(--font-size-body);
    }
  }
}

/* ═══ INNER LINKS STYLING ═══ */
.ren-hover-card a {
  color: var(--color-accent);
  text-decoration: underline;
  transition: var(--transition-tactile);

  &:hover {
    color: var(--color-accent-strong);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
}
.ren-scroll-area {
  position: relative;
  overflow: auto;

  scrollbar-width: thin;
  scrollbar-color: var(--color-fill-active) transparent;

  transition: scrollbar-color var(--duration-enter) var(--ease-enter);

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--color-fill-active);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    background-clip: content-box;

    transition: var(--transition-tactile);
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-fill-hover);
    background-clip: content-box;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }

  /* Hover state for standard scrollbar */
  &:hover {
    scrollbar-color: var(--color-fill-hover) transparent;
  }

  /* Variants */
  &.-auto {
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    /* Show on scroll */
    &:is(:hover, :focus-within) {
      scrollbar-width: thin;
      scrollbar-color: var(--color-fill-active) transparent;

      &::-webkit-scrollbar {
        display: block;
      }
    }
  }

  &.-always {
    scrollbar-width: thin;
    scrollbar-color: var(--color-fill-active) transparent;

    &::-webkit-scrollbar {
      display: block;
    }
  }

  &.-hidden {
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  /* Direction variants */
  &.-x {
    overflow-x: auto;
    overflow-y: hidden;
  }

  &.-y {
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Fade edges for smooth content transitions */
  &.-fade {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 20px;

      pointer-events: none;
      background: linear-gradient(
        to bottom,
        var(--color-surface) 0%,
        transparent 100%
      );

      z-index: 10;
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 20px;

      pointer-events: none;
      background: linear-gradient(
        to top,
        var(--color-surface) 0%,
        transparent 100%
      );

      z-index: 10;
    }
  }

  /* Horizontal fade */
  &.-fade-x {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 20px;

      pointer-events: none;
      background: linear-gradient(
        to right,
        var(--color-surface) 0%,
        transparent 100%
      );

      z-index: 10;
    }

    &::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 20px;

      pointer-events: none;
      background: linear-gradient(
        to left,
        var(--color-surface) 0%,
        transparent 100%
      );

      z-index: 10;
    }
  }

  /* Max-height with custom property */
  &[--scroll-max] {
    max-height: var(--scroll-max, 20rem);
  }

  /* Smooth scrolling behavior */
  scroll-behavior: smooth;

  @media (prefers-reduced-motion: reduce) {
    scroll-behavior: auto;
  }
}

/* Utility class for common heights */
.ren-scroll-area-sm {
  max-height: 12rem;
}

.ren-scroll-area-md {
  max-height: 20rem;
}

.ren-scroll-area-lg {
  max-height: 30rem;
}

.ren-scroll-area-xl {
  max-height: 40rem;
}

.ren-scroll-area-full {
  height: 100%;
  max-height: none;
}
/* ═══════════════════════════════════════════════════════════════
   REN NUMBER FIELD (STEPPER) COMPONENT
   ═══════════════════════════════════════════════════════════════
   A controlled number input with increment/decrement buttons.
   Supports keyboard navigation, long-press acceleration, and
   min/max bounds. Follows RenDS design token system.

   Usage:
   <ren-number-field min="0" max="100" step="1" value="5">
     <button class="ren-number-field-decrement" aria-label="Decrease">−</button>
     <input class="ren-number-field-input" type="number" value="5">
     <button class="ren-number-field-increment" aria-label="Increase">+</button>
   </ren-number-field>
   ═══════════════════════════════════════════════════════════════ */

/* ═══ BASE WRAPPER ═══ */
.ren-number-field {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: var(--stroke-1) solid var(--color-input-border);
  border-radius: var(--radius-md);
  background-color: var(--color-input-bg);
  transition: var(--transition-tactile);

  /* ═══ FOCUS STATE ON GROUP ═══ */
  &:has(.ren-number-field-input:focus) {
    border-color: var(--color-input-border-focus);
    box-shadow: 0 0 0 3px var(--color-input-focus-ring);
    background-color: var(--color-input-bg-hover);
  }

  /* ═══ HOVER STATE ═══ */
  &:hover:not(:has(:disabled)) {
    background-color: var(--color-input-bg-hover);
  }

  /* ═══ DISABLED STATE ═══ */
  &:has(:disabled) {
    background-color: var(--color-disabled-bg);
    border-color: var(--color-border);
    cursor: not-allowed;
    opacity: 0.7;
  }
}

/* ═══ STEPPER BUTTONS ═══ */
.ren-number-field-decrement,
.ren-number-field-increment {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  height: var(--touch-min);
  padding: 0 var(--space-2);
  background: transparent;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: 600;
  font-family: var(--font-mono);
  transition: var(--transition-tactile);

  /* ═══ REMOVE FOCUS OUTLINE - GROUP HANDLES IT ═══ */
  &:focus {
    outline: none;
  }

  /* ═══ HOVER STATE ═══ */
  &:hover:not(:disabled) {
    background-color: var(--color-fill-hover);
  }

  /* ═══ ACTIVE STATE ═══ */
  &:active:not(:disabled) {
    background-color: var(--color-fill-active);
  }

  /* ═══ DISABLED STATE ═══ */
  &:disabled {
    color: var(--color-disabled-text);
    cursor: not-allowed;
    opacity: 0.5;
  }
}

/* ═══ DECREMENT BUTTON (LEFT) ═══ */
.ren-number-field-decrement {
  border-inline-end: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-md) 0 0 var(--radius-md);

  /* ═══ MINUS ICON ═══ */
  &::before {
    content: '−';
  }
}

/* ═══ INCREMENT BUTTON (RIGHT) ═══ */
.ren-number-field-increment {
  border-inline-start: var(--stroke-1) solid var(--color-border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;

  /* ═══ PLUS ICON ═══ */
  &::before {
    content: '+';
  }
}

/* ═══ INPUT FIELD (CENTER) ═══ */
.ren-number-field-input {
  flex: 1;
  min-width: 3rem;
  padding: var(--space-2) var(--space-3);
  font-size: var(--body-size);
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
  background: transparent;
  border: none;
  outline: none;
  cursor: text;

  /* ═══ HIDE NATIVE NUMBER SPINNER ═══ */
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  &[type='number'] {
    -moz-appearance: textfield;
  }

  /* ═══ PLACEHOLDER ═══ */
  &::placeholder {
    color: var(--color-input-placeholder);
  }

  /* ═══ DISABLED ═══ */
  &:disabled {
    cursor: not-allowed;
    color: var(--color-disabled-text);
  }
}

/* ═══ VARIANT: SMALL ═══ */
.ren-number-field-sm {
  height: var(--size-sm);
  border-radius: var(--radius-sm);

  & .ren-number-field-decrement,
  & .ren-number-field-increment {
    min-width: var(--size-sm);
    height: var(--size-sm);
    padding: 0 var(--space-1);
    font-size: var(--text-sm);
  }

  & .ren-number-field-decrement {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  }

  & .ren-number-field-increment {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }

  & .ren-number-field-input {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
  }
}

/* ═══ VARIANT: LARGE ═══ */
.ren-number-field-lg {
  height: var(--size-lg);
  border-radius: var(--radius-lg);

  & .ren-number-field-decrement,
  & .ren-number-field-increment {
    min-width: var(--size-lg);
    height: var(--size-lg);
    padding: 0 var(--space-3);
    font-size: var(--text-lg);
  }

  & .ren-number-field-decrement {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }

  & .ren-number-field-increment {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  }

  & .ren-number-field-input {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-lg);
  }
}

/* ═══ ERROR STATE ═══ */
.ren-number-field[data-invalid] {
  border-color: var(--color-danger);

  &:focus-within {
    box-shadow: 0 0 0 3px rgb(255, 59, 48, 0.15);
  }
}

/* ═══ SUCCESS STATE ═══ */
.ren-number-field[data-valid] {
  border-color: var(--color-success);

  &:focus-within {
    box-shadow: 0 0 0 3px rgb(52, 199, 89, 0.15);
  }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-number-field,
  .ren-number-field-decrement,
  .ren-number-field-increment {
    transition: none;
  }
}
/* ═══════════════════════════════════════════════════════════════
   REN OTP (ONE-TIME PASSWORD) INPUT COMPONENT
   ═══════════════════════════════════════════════════════════════
   A flexible OTP input with auto-advancing slots, paste support,
   and validation states. Handles numeric and alphanumeric codes.
   Follows RenDS design token system.

   Usage:
   <ren-otp length="6" type="numeric">
     \3c !-- Slots auto-generated by JS -->
   </ren-otp>

   Attributes:
   - length: Number of OTP digits (default: 6)
   - type: "numeric" or "alphanumeric" (default: "numeric")
   - disabled: Disable all slots

   Data Attributes:
   - data-valid: Success state
   - data-invalid: Error state
   - data-filled: On individual slots when filled
   ═══════════════════════════════════════════════════════════════ */

/* ═══ BASE WRAPPER ═══ */
.ren-otp {
  container-type: inline-size;
  container-name: ren-otp;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ═══ INDIVIDUAL SLOT ═══ */
.ren-otp-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  font-size: var(--text-lg);
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-text);
  background-color: var(--color-input-bg);
  border: var(--stroke-1) solid var(--color-input-border);
  border-radius: var(--radius-md);
  outline: none;
  cursor: text;
  caret-color: var(--color-accent);
  text-align: center;
  transition: var(--transition-tactile);

  /* ═══ PLACEHOLDER STYLING ═══ */
  &::placeholder {
    color: var(--color-input-placeholder);
  }

  /* ═══ HOVER STATE ═══ */
  &:hover:not(:disabled):not(:focus) {
    background-color: var(--color-input-bg-hover);
  }

  /* ═══ FOCUS STATE ═══ */
  &:focus {
    border-color: var(--color-input-border-focus);
    box-shadow: 0 0 0 3px var(--color-input-focus-ring);
    background-color: var(--color-input-bg-hover);
  }

  /* ═══ FILLED STATE ═══ */
  &[data-filled] {
    background-color: var(--color-fill);
    border-color: var(--color-input-border);
  }

  /* ═══ DISABLED STATE ═══ */
  &:disabled {
    background-color: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    cursor: not-allowed;
    opacity: 0.7;
    border-color: var(--color-border);
  }
}

/* ═══ SEPARATOR ═══ */
.ren-otp-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: var(--touch-min);
  padding: 0 var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  font-weight: 300;
  user-select: none;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   VALIDATION STATES
   ═══════════════════════════════════════════════════════════════ */

/* ═══ ERROR STATE ═══ */
.ren-otp[data-invalid] .ren-otp-slot {
  border-color: var(--color-danger);

  &:focus {
    box-shadow: 0 0 0 3px rgb(255, 59, 48, 0.15);
    border-color: var(--color-danger);
  }
}

/* ═══ SUCCESS STATE ═══ */
.ren-otp[data-valid] .ren-otp-slot {
  border-color: var(--color-success);

  &:focus {
    box-shadow: 0 0 0 3px rgb(52, 199, 89, 0.15);
    border-color: var(--color-success);
  }
}

/* ═══════════════════════════════════════════════════════════════
   SIZE VARIANTS
   ═══════════════════════════════════════════════════════════════ */

/* ═══ SMALL VARIANT ═══ */
.ren-otp-sm {
  gap: var(--space-1);

  & .ren-otp-slot {
    width: var(--size-sm);
    height: var(--size-sm);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
  }

  & .ren-otp-separator {
    height: var(--size-sm);
    font-size: var(--text-sm);
  }
}

/* ═══ LARGE VARIANT ═══ */
.ren-otp-lg {
  gap: var(--space-3);

  & .ren-otp-slot {
    width: var(--size-lg);
    height: var(--size-lg);
    font-size: var(--body-size);
    border-radius: var(--radius-lg);
  }

  & .ren-otp-separator {
    height: var(--size-lg);
    font-size: var(--body-size);
  }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════ */

/* ═══ FOCUS VISIBLE (KEYBOARD NAVIGATION) ═══ */
.ren-otp-slot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ═══ DISABLED WRAPPER ═══ */
.ren-otp[disabled] .ren-otp-slot {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .ren-otp-slot {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS
   ═══════════════════════════════════════════════════════════════ */

@container ren-otp (max-width: 360px) {
  .ren-otp {
    gap: var(--space-1);

    & .ren-otp-slot {
      width: var(--size-sm);
      height: var(--size-sm);
      font-size: var(--text-sm);
    }

    & .ren-otp-separator {
      height: var(--size-sm);
      font-size: var(--text-sm);
      padding: 0 var(--space-0-5);
    }
  }
}
/* ═══ REN CALENDAR WEB COMPONENT ═══
   A fully accessible, keyboard-navigable calendar component
   with support for single, range, and multiple date selection.
   Uses ARIA grid pattern with roving tabindex for keyboard navigation.
   ══════════════════════════════════════════════════════════════════ */

/* ═══ BASE CONTAINER ═══ */
.ren-calendar {
  container-type: inline-size;
  container-name: ren-calendar;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  font-family: inherit;
}

/* ═══ HEADER WITH NAVIGATION ═══ */
.ren-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-2);
}

/* ═══ MONTH/YEAR TITLE ═══ */
.ren-calendar-title {
  font-size: var(--body-size);
  font-weight: var(--label-weight);
  color: var(--color-text);
  flex: 1;
  text-align: center;
  min-width: 150px;
  white-space: nowrap;
}

/* ═══ NAVIGATION BUTTONS ═══ */
.ren-calendar-nav {
  display: flex;
  gap: var(--space-1);
}

.ren-calendar-nav button {
  width: var(--touch-min);
  height: var(--touch-min);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition-tactile);
  position: relative;

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

  &:active {
    background: var(--color-fill-active);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  /* ═══ CHEVRON ICONS ═══ */
  &.ren-calendar-prev::before {
    content: '‹';
    font-size: 1.5em;
    font-weight: bold;
  }

  &.ren-calendar-next::before {
    content: '›';
    font-size: 1.5em;
    font-weight: bold;
  }
}

/* ═══ WEEKDAY HEADERS ═══ */
.ren-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--color-text-muted);
  text-align: center;
}

.ren-calendar-weekday {
  padding: var(--space-2) var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ═══ CALENDAR GRID ═══ */
.ren-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
}

/* ═══ INDIVIDUAL DAY BUTTON ═══ */
.ren-calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  width: 100%;
  aspect-ratio: 1;
  padding: var(--space-0-5);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--body-size);
  cursor: pointer;
  transition: var(--transition-tactile);
  position: relative;

  /* ═══ DEFAULT STATE ═══ */
  &:not([disabled]):hover {
    background: var(--color-fill);
  }

  &:not([disabled]):active {
    background: var(--color-fill-active);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  /* ═══ SELECTED DATE ═══ */
  &[aria-selected="true"] {
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: 600;
  }

  /* ═══ TODAY INDICATOR ═══ */
  &[data-today] {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
    font-weight: 600;
    box-shadow: inset 0 0 0 2px var(--color-accent);
  }

  &[data-today][aria-selected="true"] {
    background: var(--color-accent);
    color: var(--color-on-accent);
    box-shadow: none;
  }

  /* ═══ OUTSIDE MONTH DATES ═══ */
  &[data-outside] {
    color: var(--color-text-faint);
    pointer-events: none;
  }

  /* ═══ DISABLED DATES ═══ */
  &[disabled] {
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.5;
  }

  /* ═══ RANGE START ═══ */
  &.ren-calendar-day-range-start {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-radius: var(--radius-md);

    &::after {
      content: '';
      position: absolute;
      right: -4px;
      top: 0;
      bottom: 0;
      width: 50%;
      background: var(--color-accent-subtle);
      z-index: -1;
    }
  }

  /* ═══ RANGE END ═══ */
  &.ren-calendar-day-range-end {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-radius: var(--radius-md);

    &::before {
      content: '';
      position: absolute;
      left: -4px;
      top: 0;
      bottom: 0;
      width: 50%;
      background: var(--color-accent-subtle);
      z-index: -1;
    }
  }

  /* ═══ IN RANGE ═══ */
  &.ren-calendar-day-in-range {
    background: var(--color-accent-subtle);
    color: var(--color-text);
    border-radius: 0;
  }
}

/* ═══ ANIMATION FOR MONTH TRANSITIONS ═══ */
@keyframes ren-calendar-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ren-calendar-grid {
  animation: ren-calendar-fade-in var(--duration-enter) var(--ease-enter);
}

/* ═══ REDUCED MOTION SUPPORT ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-calendar-grid {
    animation: none;
  }

  .ren-calendar-nav button,
  .ren-calendar-day {
    transition: none;
  }
}

/* ═══ SIZE VARIANT: SMALL ═══ */
.ren-calendar-sm {
  padding: var(--space-3);

  .ren-calendar-header {
    margin-bottom: var(--space-3);
  }

  .ren-calendar-title {
    font-size: var(--label-size);
  }

  .ren-calendar-nav button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .ren-calendar-weekday {
    font-size: var(--caption-size);
  }

  .ren-calendar-day {
    font-size: var(--label-size);
    min-width: 36px;
    min-height: 36px;
  }
}

/* ═══ SIZE VARIANT: LARGE ═══ */
.ren-calendar-lg {
  padding: var(--space-6);

  .ren-calendar-header {
    margin-bottom: var(--space-6);
    gap: var(--space-4);
  }

  .ren-calendar-title {
    font-size: 1.25rem;
  }

  .ren-calendar-nav button {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    font-size: 1.25rem;
  }

  .ren-calendar-weekdays {
    margin-bottom: var(--space-4);
  }

  .ren-calendar-grid {
    gap: var(--space-2);
  }

  .ren-calendar-day {
    font-size: 1.125rem;
    min-width: 52px;
    min-height: 52px;
  }
}

/* ═══ DARK MODE SUPPORT ═══ */
@media (prefers-color-scheme: dark) {
  .ren-calendar {
    /* ═══ USES CSS VARIABLES - AUTO ADAPTS ═══ */
  }
}

/* ═══ COMPACT LAYOUT (Container Query) ═══ */
@container ren-calendar (max-width: 320px) {
  .ren-calendar {
    padding: var(--space-3);
  }

  .ren-calendar-grid {
    gap: var(--space-0-5);
  }

  .ren-calendar-day {
    min-width: 32px;
    min-height: 32px;
    font-size: var(--label-size);
  }

  .ren-calendar-nav button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
}
/* Appearance API bridge */
.ren-calendar {
  inline-size: var(--ren-calendar-width, 280px);
  border-radius: var(--ren-calendar-radius, var(--radius-lg));
  background: var(--ren-calendar-bg, var(--color-surface));
  border-color: var(--ren-calendar-border, var(--color-border));
}
.ren-calendar [data-day], .ren-calendar-day { inline-size: var(--ren-calendar-day-size, var(--size-md)); block-size: var(--ren-calendar-day-size, var(--size-md)); }
.ren-calendar [data-today] { background: var(--ren-calendar-today-bg, var(--color-accent-subtle)); }
.ren-calendar [aria-selected="true"], .ren-calendar [data-selected] { background: var(--ren-calendar-selected-bg, var(--color-accent)); color: var(--ren-calendar-selected-color, var(--color-on-accent)); }
.ren-calendar [data-range], .ren-calendar-range { background: var(--ren-calendar-range-bg, var(--color-accent-subtle)); }

@media (any-pointer: coarse), (pointer: coarse) {
  .ren-calendar .ren-calendar-nav button,
  .ren-calendar .ren-calendar-day {
    inline-size: calc(var(--touch-min) + var(--stroke-1));
    block-size: calc(var(--touch-min) + var(--stroke-1));
    min-inline-size: calc(var(--touch-min) + var(--stroke-1));
    min-block-size: calc(var(--touch-min) + var(--stroke-1));
  }
}
/* ═══ REN DATE PICKER WEB COMPONENT ═══
   A composable date picker that wraps the calendar component
   with an input field and popover dropdown.
   Uses Popover API for positioning with CSS anchor positioning.
   ══════════════════════════════════════════════════════════════════ */

/* ═══ BASE WRAPPER ═══ */
.ren-date-picker {
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* ═══ TRIGGER INPUT ═══ */
.ren-date-picker-trigger {
  anchor-name: --ren-date-picker-anchor;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--body-size);
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition-tactile);
  min-height: var(--touch-min);

  &:hover:not([disabled]) {
    border-color: var(--color-border-strong);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-color: var(--color-accent);
  }

  &[disabled] {
    background: var(--color-fill);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
  }

  /* ═══ PLACEHOLDER TEXT ═══ */
  &::placeholder {
    color: var(--color-text-muted);
  }

  /* ═══ CALENDAR ICON (::after) ═══ */
  &::after {
    content: '📅';
    font-size: 1.25em;
    flex-shrink: 0;
    pointer-events: none;
  }
}

/* ═══ TRIGGER TEXT CONTENT ═══ */
.ren-date-picker-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══ EMPTY STATE ═══ */
.ren-date-picker-trigger.ren-date-picker-empty {
  color: var(--color-text-muted);

  .ren-date-picker-value {
    display: none;
  }

  &::before {
    content: attr(data-placeholder);
    color: var(--color-text-muted);
  }
}

/* ═══ DROPDOWN CONTAINER (POPOVER) ═══ */
.ren-date-picker-dropdown {
  position-anchor: --ren-date-picker-anchor;
  position: absolute;
  position-area: bottom span-all;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  inset: auto;
  margin: 0;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  max-width: 400px;

  /* ═══ POPOVER API ═══ */
  &[popover] {
    padding: 0;
    margin: 0;
  }

  &:popover-open {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: ren-date-picker-popup-in var(--duration-enter) var(--ease-enter) both;
  }
}

.ren-date-picker-dropdown[data-side="bottom"],
.ren-date-picker-dropdown:not([data-side]) {
  position-area: bottom span-all;
  margin-block-start: var(--space-2);
  margin-block-end: 0;
  margin-inline: 0;
}

.ren-date-picker-dropdown[data-side="top"] {
  position-area: top span-all;
  margin-block-start: 0;
  margin-block-end: var(--space-2);
  margin-inline: 0;
}

.ren-date-picker-dropdown[data-side="right"] {
  position-area: right span-all;
  margin-block: 0;
  margin-inline-start: var(--space-2);
  margin-inline-end: 0;
}

.ren-date-picker-dropdown[data-side="left"] {
  position-area: left span-all;
  margin-block: 0;
  margin-inline-start: 0;
  margin-inline-end: var(--space-2);
}

/* ═══ FALLBACK POSITIONING (no complete anchor support) ═══ */
@supports not ((anchor-name: --ren-anchor) and
  (position-anchor: --ren-anchor) and
  (position-area: bottom span-all)) {
  .ren-date-picker-dropdown {
    position: fixed;
    top: auto;
    left: auto;
  }
}

/* ═══ ANIMATION: POPUP IN ═══ */
@starting-style {
  .ren-date-picker-dropdown:popover-open {
    opacity: 0;
    translate: 0 -8px;
  }
}

@keyframes ren-date-picker-popup-in {
  from {
    opacity: 0;
    translate: 0 -8px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ═══ CALENDAR INSIDE DROPDOWN ═══ */
.ren-date-picker-dropdown .ren-calendar {
  border: none;
  box-shadow: none;
  background: var(--color-surface-raised);
  padding: var(--space-3);
}

/* ═══ PRESETS SECTION ═══ */
.ren-date-picker-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.ren-date-picker-preset {
  padding: var(--space-1-5) var(--space-3);
  background: var(--color-fill);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  cursor: pointer;
  transition: var(--transition-tactile);

  &:hover {
    background: var(--color-fill-hover);
    border-color: var(--color-border-strong);
  }

  &:active {
    background: var(--color-fill-active);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  &[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

/* ═══ RANGE MODE: SHOW START AND END ═══ */
.ren-date-picker.ren-date-picker-range .ren-date-picker-value::after {
  content: ' → ';
  margin: 0 var(--space-1);
}

/* ═══ DISABLED STATE ═══ */
.ren-date-picker[disabled] {
  opacity: 0.6;
  pointer-events: none;

  .ren-date-picker-trigger {
    cursor: not-allowed;
  }
}

/* ═══ REDUCED MOTION SUPPORT ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-date-picker-dropdown:popover-open {
    animation: none;
    opacity: 1;
    translate: 0 0;
  }

  .ren-date-picker-dropdown {
    transition: none;
  }
}

/* ═══ DARK MODE SUPPORT ═══ */
@media (prefers-color-scheme: dark) {
  .ren-date-picker-trigger,
  .ren-date-picker-dropdown {
    /* ═══ USES CSS VARIABLES - AUTO ADAPTS ═══ */
  }
}

/* ═══ MOBILE RESPONSIVENESS ═══ */
@media (max-width: 480px) {
  .ren-date-picker-dropdown {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 80vh;
    overflow-y: auto;

    &:popover-open {
      animation: ren-date-picker-mobile-in var(--duration-enter) var(--ease-enter) both;
    }
  }

  @starting-style {
    .ren-date-picker-dropdown:popover-open {
      translate: 0 100%;
      opacity: 0;
    }
  }

}

@keyframes ren-date-picker-mobile-in {
  from {
    translate: 0 100%;
    opacity: 0;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}

/* ═══ ERROR STATE ═══ */
.ren-date-picker.ren-date-picker-error {
  .ren-date-picker-trigger {
    border-color: var(--color-danger);

    &:focus-visible {
      outline-color: var(--color-danger);
      border-color: var(--color-danger);
    }
  }
}

/* ═══ SUCCESS STATE ═══ */
.ren-date-picker.ren-date-picker-success {
  .ren-date-picker-trigger {
    border-color: var(--color-success);

    &:focus-visible {
      outline-color: var(--color-success);
      border-color: var(--color-success);
    }
  }
}

/* ═══ FORM INTEGRATION ═══ */
.ren-date-picker {
  /* ═══ ALLOW FORM STYLING ═══ */

  input[type='hidden'] {
    display: none;
  }
}
/* ═══ REN DATE RANGE PICKER WEB COMPONENT ═══
   A composable date range picker with dual calendars,
   preset shortcuts, and an input trigger with popover dropdown.
   Built on top of RenCalendar for consistent behavior.

   Usage:
     <ren-date-range-picker
       placeholder="Select date range"
       format="short"
       locale="en-US"
       presets="last7,last30,thisMonth,lastMonth"
     ></ren-date-range-picker>
   ══════════════════════════════════════════════════════════════════ */

/* ═══ BASE WRAPPER ═══ */
.ren-date-range-picker {
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* ═══ TRIGGER BUTTON ═══ */
.ren-date-range-trigger {
  anchor-name: --ren-date-range-anchor;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--body-size);
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition-tactile);
  min-height: var(--touch-min);

  &:hover:not([disabled]) {
    border-color: var(--color-border-strong);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-color: var(--color-accent);
  }

  &[disabled] {
    background: var(--color-fill);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
  }

  /* ═══ CALENDAR ICON ═══ */
  &::after {
    content: '📅';
    font-size: 1.25em;
    flex-shrink: 0;
    pointer-events: none;
  }
}

/* ═══ TRIGGER VALUE DISPLAY ═══ */
.ren-date-range-value {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow: hidden;
  white-space: nowrap;
}

.ren-date-range-start,
.ren-date-range-end {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ren-date-range-separator {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ═══ EMPTY STATE ═══ */
.ren-date-range-trigger.ren-date-range-empty {
  color: var(--color-text-muted);

  .ren-date-range-value {
    display: none;
  }

  &::before {
    content: attr(data-placeholder);
    color: var(--color-text-muted);
    flex: 1;
  }
}

/* ═══ DROPDOWN CONTAINER (POPOVER) ═══ */
.ren-date-range-dropdown {
  position-anchor: --ren-date-range-anchor;
  position: absolute;
  position-area: bottom span-all;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  inset: auto;
  margin: 0;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1000;

  /* ═══ POPOVER API ═══ */
  &[popover] {
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  &:popover-open {
    animation: ren-date-range-popup-in var(--duration-enter) var(--ease-enter) both;
  }
}

.ren-date-range-dropdown[data-side="bottom"],
.ren-date-range-dropdown:not([data-side]) {
  position-area: bottom span-all;
  margin-block-start: var(--space-2);
  margin-block-end: 0;
  margin-inline: 0;
}

.ren-date-range-dropdown[data-side="top"] {
  position-area: top span-all;
  margin-block-start: 0;
  margin-block-end: var(--space-2);
  margin-inline: 0;
}

.ren-date-range-dropdown[data-side="right"] {
  position-area: right span-all;
  margin-block: 0;
  margin-inline-start: var(--space-2);
  margin-inline-end: 0;
}

.ren-date-range-dropdown[data-side="left"] {
  position-area: left span-all;
  margin-block: 0;
  margin-inline-start: 0;
  margin-inline-end: var(--space-2);
}

/* ═══ FALLBACK POSITIONING (no complete anchor support) ═══ */
@supports not ((anchor-name: --ren-anchor) and
  (position-anchor: --ren-anchor) and
  (position-area: bottom span-all)) {
  .ren-date-range-dropdown {
    position: fixed;
    top: auto;
    left: auto;
  }
}

/* ═══ ANIMATION: POPUP IN ═══ */
@starting-style {
  .ren-date-range-dropdown:popover-open {
    opacity: 0;
    translate: 0 -8px;
  }
}

@keyframes ren-date-range-popup-in {
  from {
    opacity: 0;
    translate: 0 -8px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ═══ DROPDOWN INNER WRAPPER ═══ */
.ren-date-range-inner {
  container-type: inline-size;
  container-name: ren-date-range;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ═══ PRESETS SIDEBAR ═══ */
.ren-date-range-presets {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.ren-date-range-preset {
  display: block;
  width: 100%;
  padding: var(--space-1-5) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  text-align: start;
  cursor: pointer;
  transition: var(--transition-tactile);

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

  &:active {
    background: var(--color-fill-active);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  &[aria-selected="true"] {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
    font-weight: var(--weight-semibold);
  }
}

/* ═══ DUAL CALENDAR LAYOUT ═══ */
.ren-date-range-calendars {
  display: flex;
  gap: 0;
  padding: var(--space-3);
}

.ren-date-range-calendars > .ren-calendar {
  border: none;
  box-shadow: none;
  background: transparent;
  flex: 1;
}

/* ═══ DIVIDER BETWEEN CALENDARS ═══ */
.ren-date-range-divider {
  width: 1px;
  align-self: stretch;
  background: var(--color-border);
  margin-block: var(--space-2);
  flex-shrink: 0;
}

/* ═══ FOOTER WITH ACTIONS ═══ */
.ren-date-range-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.ren-date-range-summary {
  font-size: var(--label-size);
  color: var(--color-text-secondary);
}

.ren-date-range-summary strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.ren-date-range-actions {
  display: flex;
  gap: var(--space-2);
}

.ren-date-range-cancel,
.ren-date-range-apply {
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  cursor: pointer;
  transition: var(--transition-tactile);

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
}

.ren-date-range-cancel {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);

  &:hover {
    background: var(--color-fill);
    border-color: var(--color-border-strong);
  }
}

.ren-date-range-apply {
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  color: var(--color-on-accent);

  &:hover {
    background: var(--color-accent-hover);
  }

  &[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

/* ═══ DISABLED STATE ═══ */
.ren-date-range-picker[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

/* ═══ ERROR STATE ═══ */
.ren-date-range-picker.ren-date-range-error {
  .ren-date-range-trigger {
    border-color: var(--color-danger);

    &:focus-visible {
      outline-color: var(--color-danger);
    }
  }
}

/* ═══ SUCCESS STATE ═══ */
.ren-date-range-picker.ren-date-range-success {
  .ren-date-range-trigger {
    border-color: var(--color-success);

    &:focus-visible {
      outline-color: var(--color-success);
    }
  }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-date-range-dropdown:popover-open {
    animation: none;
    opacity: 1;
    translate: 0 0;
  }

  .ren-date-range-dropdown {
    transition: none;
  }
}

/* ═══ COMPACT LAYOUT (Container Query) ═══
   Stacks calendars vertically and makes presets
   horizontal when the dropdown is narrow —
   works in sidebars, modals, or small viewports. */
@container ren-date-range (max-width: 500px) {
  .ren-date-range-calendars {
    flex-direction: column;
    gap: var(--space-2);
  }

  .ren-date-range-divider {
    width: 100%;
    height: 1px;
    margin-inline: var(--space-2);
    margin-block: 0;
  }

  .ren-date-range-presets {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  .ren-date-range-preset {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ═══ MOBILE BOTTOM SHEET (Media Query) ═══
   Fixed positioning requires viewport awareness,
   so this stays as a media query. */
@media (max-width: 680px) {
  .ren-date-range-dropdown {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 85vh;
    overflow-y: auto;

    &:popover-open {
      animation: ren-date-range-mobile-in var(--duration-enter) var(--ease-enter) both;
    }
  }

  @starting-style {
    .ren-date-range-dropdown:popover-open {
      translate: 0 100%;
      opacity: 0;
    }
  }

}

@keyframes ren-date-range-mobile-in {
  from {
    translate: 0 100%;
    opacity: 0;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}

/* ═══ FORM INTEGRATION ═══ */
.ren-date-range-picker {
  input[type='hidden'] {
    display: none;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   RenDS — <ren-carousel> Web Component
   ═══════════════════════════════════════════════════════════════════════════
   Accessible carousel/slider with scroll-snap, keyboard nav, autoplay, and dots.

   Features:
   - CSS scroll-snap for performant sliding
   - Configurable slides-per-view (1, 2, 3, 4)
   - Fade or slide transitions
   - Touch-friendly swipe support
   - Keyboard navigation (Arrow keys)
   - Optional autoplay with progress indicator
   - Responsive via container queries
   - Respects prefers-reduced-motion
   ═════════════════════════════════════════════════════════════════════════ */

/* ═══ CAROUSEL OUTER CONTAINER ═══ */
.ren-carousel {
  container-type: inline-size;
  container-name: ren-carousel;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ═══ VIEWPORT (SCROLL CONTAINER) ═══ */
.ren-carousel-viewport {
  position: relative;
  width: 100%;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  touch-action: pan-x pinch-zoom; /* Prevent vertical scroll interference during horizontal swipe */
}

/* Hide scrollbar in Chrome, Safari, and Opera */
.ren-carousel-viewport::-webkit-scrollbar {
  display: none;
}

/* Container for slides with flexbox */
.ren-carousel-viewport {
  display: flex;
  flex-wrap: nowrap;
}

/* ═══ INDIVIDUAL SLIDES ═══ */
.ren-carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: auto;
}

/* Ensure slide content can be sized */
.ren-carousel-slide > * {
  display: block;
  width: 100%;
  height: auto;
}

/* ═══ SLIDES-PER-VIEW VARIANTS ═══ */

/* 2 slides visible (50% each) */
.ren-carousel-2 .ren-carousel-slide {
  flex: 0 0 50%;
  min-width: 50%;
}

/* 3 slides visible (33.33% each) */
.ren-carousel-3 .ren-carousel-slide {
  flex: 0 0 calc(100% / 3);
  min-width: calc(100% / 3);
}

/* 4 slides visible (25% each) */
.ren-carousel-4 .ren-carousel-slide {
  flex: 0 0 25%;
  min-width: 25%;
}

/* Responsive: stack to 1 or 2 on narrow screens via container queries */
@supports (container-type: inline-size) {
  @container (max-width: 640px) {
    .ren-carousel-2 .ren-carousel-slide,
    .ren-carousel-3 .ren-carousel-slide,
    .ren-carousel-4 .ren-carousel-slide {
      flex: 0 0 100%;
      min-width: 100%;
    }
  }

  @container (max-width: 1024px) and (min-width: 641px) {
    .ren-carousel-3 .ren-carousel-slide,
    .ren-carousel-4 .ren-carousel-slide {
      flex: 0 0 50%;
      min-width: 50%;
    }
  }
}

/* ═══ FADE TRANSITION VARIANT ═══ */
.ren-carousel-fade {
  position: relative;
}

.ren-carousel-fade .ren-carousel-viewport {
  scroll-behavior: auto;
}

.ren-carousel-fade .ren-carousel-slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  transition: opacity var(--duration-enter) var(--ease-enter);
  pointer-events: none;
}

.ren-carousel-fade .ren-carousel-slide[aria-current="true"] {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

/* ═══ NAVIGATION ARROWS ═══ */
.ren-carousel-prev,
.ren-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: var(--touch-min);
  height: var(--touch-min);
  min-width: 44px;
  min-height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: rgb(0, 0, 0, 0.4);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: white;
  font-size: 20px;
  transition: var(--transition-tactile);
}

/* Arrow positioning */
.ren-carousel-prev {
  left: var(--space-3);
}

.ren-carousel-next {
  right: var(--space-3);
}

/* Arrow chevron using ::before pseudo-element */
.ren-carousel-prev::before {
  content: '‹';
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
}

.ren-carousel-next::before {
  content: '›';
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
}

/* Hover state — increase opacity */
.ren-carousel-prev:hover:not(:disabled),
.ren-carousel-next:hover:not(:disabled) {
  background-color: rgb(0, 0, 0, 0.7);
}

/* Active/focus state */
.ren-carousel-prev:focus-visible,
.ren-carousel-next:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Hidden arrows at boundaries */
.ren-carousel[data-at-start] .ren-carousel-prev,
.ren-carousel[data-at-end] .ren-carousel-next {
  opacity: 0;
  pointer-events: none;
}

/* Disabled state */
.ren-carousel-prev:disabled,
.ren-carousel-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ═══ PROGRESSIVE ENHANCEMENT: CSS-ONLY SCROLL BUTTONS ═══
   Modern browsers support ::scroll-button() pseudo-elements for native
   scroll container navigation without JavaScript.
   When supported, these replace the JS-generated arrow buttons. */

@supports selector(::scroll-button(inline-start)) {
  .ren-carousel-viewport {
    /* Enable native scroll buttons */
    overflow-x: auto;
  }

  .ren-carousel-viewport::scroll-button(inline-start),
  .ren-carousel-viewport::scroll-button(inline-end) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    width: var(--touch-min, 44px);
    height: var(--touch-min, 44px);
    min-width: 44px;
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: rgb(0, 0, 0, 0.4);
    border: none;
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    color: white;

    transition: var(--transition-tactile);
  }

  .ren-carousel-viewport::scroll-button(inline-start) {
    content: '‹';
    left: var(--space-3, 0.75rem);
  }

  .ren-carousel-viewport::scroll-button(inline-end) {
    content: '›';
    right: var(--space-3, 0.75rem);
  }

  .ren-carousel-viewport::scroll-button(inline-start):hover,
  .ren-carousel-viewport::scroll-button(inline-end):hover {
    background-color: rgb(0, 0, 0, 0.7);
  }

  /* Hide JS-generated arrows when native scroll buttons are available */
  .ren-carousel .ren-carousel-prev,
  .ren-carousel .ren-carousel-next {
    display: none;
  }
}

/* ═══ PAGINATION DOTS ═══ */
.ren-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 0;
  list-style: none;
}

.ren-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  border: none;
  cursor: pointer;
  transition: var(--transition-tactile);
  padding: 0;
  margin: 0;
}

/* Active dot */
.ren-carousel-dot[aria-current="true"] {
  background-color: var(--color-accent);
  transform: scale(1.25);
}

/* Hover state */
.ren-carousel-dot:hover:not([aria-current="true"]) {
  background-color: var(--color-border);
  opacity: 0.7;
}

/* Focus visible */
.ren-carousel-dot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-full);
}

/* ═══ AUTOPLAY PROGRESS BAR ═══ */
.ren-carousel-dot[aria-current="true"]::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 2px;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  opacity: 0;
}

/* Show progress bar when autoplay is active */
.ren-carousel[data-autoplay] .ren-carousel-dot[aria-current="true"]::after {
  opacity: 1;
  animation: carousel-progress linear forwards;
}

@keyframes carousel-progress {
  from {
    width: 0;
  }
  to {
    width: 6px;
  }
}

/* Dynamic progress bar timing — controlled by JS */
.ren-carousel[data-autoplay-duration] .ren-carousel-dot[aria-current="true"]::after {
  animation-duration: inherit;
}

/* ═══ CAROUSEL COUNTER ═══ */
.ren-carousel-counter {
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.ren-carousel-counter-current {
  font-weight: 600;
  color: var(--color-text);
}

/* ═══ ACCESSIBILITY & ANIMATIONS ═══ */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .ren-carousel-viewport {
    scroll-behavior: auto;
  }

  .ren-carousel-slide,
  .ren-carousel-dot,
  .ren-carousel-prev,
  .ren-carousel-next {
    transition: none;
    animation: none;
  }

  .ren-carousel[data-autoplay] .ren-carousel-dot[aria-current="true"]::after {
    animation: none;
    width: 6px;
    opacity: 1;
  }
}

/* ═══ FOCUS VISIBLE FOR KEYBOARD NAVIGATION ═══ */
.ren-carousel-slide:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ═══ RESPONSIVE ADJUSTMENTS (Container Queries) ═══ */

/* Compact carousel */
@container ren-carousel (max-width: 480px) {
  .ren-carousel {
    gap: var(--space-2);
  }

  .ren-carousel-prev,
  .ren-carousel-next {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .ren-carousel-prev {
    left: var(--space-2);
  }

  .ren-carousel-next {
    right: var(--space-2);
  }

  .ren-carousel-dots {
    gap: var(--space-1);
  }

  .ren-carousel-dot {
    width: 6px;
    height: 6px;
  }

  .ren-carousel-dot[aria-current="true"] {
    transform: scale(1.1);
  }
}

/* Wide carousel — hover reveal arrows */
@container ren-carousel (min-width: 768px) {
  .ren-carousel-prev,
  .ren-carousel-next {
    opacity: 0.6;
  }

  .ren-carousel:hover .ren-carousel-prev:not(:disabled),
  .ren-carousel:hover .ren-carousel-next:not(:disabled) {
    opacity: 1;
  }
}

/* ═══ UTILITY CLASSES ═══ */

/* Carousel without dots */
.ren-carousel-no-dots .ren-carousel-dots {
  display: none;
}

/* Carousel without arrows */
.ren-carousel-no-arrows .ren-carousel-prev,
.ren-carousel-no-arrows .ren-carousel-next {
  display: none;
}

/* Carousel without counter */
.ren-carousel-no-counter .ren-carousel-counter {
  display: none;
}

/* Full width slides (1 per view) */
.ren-carousel-full .ren-carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
}

/* Draggable appearance */
.ren-carousel-viewport {
  user-select: none;
  -webkit-user-select: none;
}

.ren-carousel-slide {
  user-select: none;
  -webkit-user-select: none;
}

/* Touch feedback */
.ren-carousel-slide {
  cursor: grab;
}

.ren-carousel-slide:active {
  cursor: grabbing;
}

/* ═══ LOADING STATE ═══ */
.ren-carousel[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

/* ═══ SEMANTIC HTML ADJUSTMENTS ═══ */
.ren-carousel[role="group"],
.ren-carousel[role="region"] {
  /* Already defined above, this is for clarity */
}

/* Ensure images in slides maintain aspect ratio */
.ren-carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Video in carousel */
.ren-carousel-slide video {
  width: 100%;
  height: auto;
  display: block;
}
/* Appearance API bridge */
.ren-carousel { gap: var(--ren-carousel-gap, var(--space-4)); border-radius: var(--ren-carousel-radius, var(--radius-lg)); transition-duration: var(--ren-carousel-duration, var(--duration-normal)); transition-timing-function: var(--ren-carousel-easing, var(--ease-out)); }
.ren-carousel .ren-carousel-arrow { inline-size: var(--ren-carousel-arrow-size, var(--size-lg)); block-size: var(--ren-carousel-arrow-size, var(--size-lg)); }
.ren-carousel .ren-carousel-dot { inline-size: var(--ren-carousel-dot-size, 8px); block-size: var(--ren-carousel-dot-size, 8px); background: var(--ren-carousel-dot-color, var(--color-fill)); }
.ren-carousel .ren-carousel-dot[aria-current="true"], .ren-carousel .ren-carousel-dot.is-active { background: var(--ren-carousel-dot-active, var(--color-accent)); }
/* ═══════════════════════════════════════════════════════════════════
   RenDS — Color Picker Composite Component
   ═══════════════════════════════════════════════════════════════════
   A fully accessible, feature-rich color picker with support for:
   - HSV color model (internal) with conversion to/from HEX, RGB, HSL
   - Saturation/brightness canvas area
   - Hue slider
   - Optional alpha/opacity slider
   - Text inputs for manual color entry
   - Preset color swatches
   - EyeDropper API integration (when available)
   - Keyboard navigation and ARIA labels
   - Smooth animations with @starting-style support

   Structure:
   .ren-color-picker (container)
     .ren-color-picker-trigger (button showing current color)
     [popover] .ren-color-picker-dropdown
       .ren-color-picker-saturation (canvas area for S/B)
         .ren-color-picker-saturation-handle (circular cursor)
       .ren-color-picker-hue (horizontal rainbow slider)
         .ren-color-picker-hue-handle (thumb)
       .ren-color-picker-alpha (opacity slider, optional)
         .ren-color-picker-alpha-handle (thumb)
       .ren-color-picker-preview (color display swatch)
       .ren-color-picker-inputs
         .ren-color-picker-hex-input
         .ren-color-picker-channel (R/G/B or H/S/L)
       .ren-color-picker-swatches (preset colors, optional)
       .ren-color-picker-format-toggle (HEX/RGB/HSL switcher)
       .ren-color-picker-eyedropper (screen picker, optional)
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ COLOR PICKER CONTAINER ═══ */
.ren-color-picker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: inherit;
}

/* ═══ TRIGGER BUTTON (Shows Current Color) ═══ */
.ren-color-picker-trigger {
  anchor-name: --ren-color-picker-anchor;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  font-size: var(--body-size);
  font-family: inherit;
  color: var(--color-text);
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-tactile);
}

.ren-color-picker-trigger:hover:not(:disabled) {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-border-focus);
}

.ren-color-picker-trigger:focus-visible {
  outline: none;
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

.ren-color-picker-trigger[aria-expanded="true"] {
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

.ren-color-picker-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Trigger swatch (small colored square) */
.ren-color-picker-trigger-swatch {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background-color: var(--white);
  background-image: repeating-conic-gradient(
    var(--color-border) 0deg 90deg,
    transparent 90deg 180deg
  ) 50% / 4px 4px;
}

/* Trigger value text */
.ren-color-picker-trigger-value {
  flex: 1;
  text-align: start;
  font-family: var(--font-mono);
  font-size: var(--label-size);
}

/* ═══ DROPDOWN CONTAINER (Popover) ═══ */
.ren-color-picker-dropdown {
  position: absolute;
  position-anchor: --ren-color-picker-anchor;
  position-area: bottom span-all;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  inset: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: auto;
  max-width: 300px;
  padding: var(--space-4);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 50;

  /* Popover API defaults */
  &:popover-open {
    animation: ren-color-picker-open var(--duration-enter) var(--ease-enter);
  }

  @supports (animation-timeline: view()) {
    &:popover-open {
      animation: ren-color-picker-open var(--duration-enter) var(--ease-enter);
      transition-behavior: allow-discrete;
    }

    @starting-style {
      opacity: 0;
      transform: scale(0.95);
    }
  }
}

.ren-color-picker-dropdown[data-side="bottom"],
.ren-color-picker-dropdown:not([data-side]) {
  position-area: bottom span-all;
  margin-block-start: var(--space-2);
  margin-block-end: 0;
  margin-inline: 0;
}

.ren-color-picker-dropdown[data-side="top"] {
  position-area: top span-all;
  margin-block-start: 0;
  margin-block-end: var(--space-2);
  margin-inline: 0;
}

.ren-color-picker-dropdown[data-side="right"] {
  position-area: right span-all;
  margin-block: 0;
  margin-inline-start: var(--space-2);
  margin-inline-end: 0;
}

.ren-color-picker-dropdown[data-side="left"] {
  position-area: left span-all;
  margin-block: 0;
  margin-inline-start: 0;
  margin-inline-end: var(--space-2);
}

@supports not ((anchor-name: --ren-anchor) and
  (position-anchor: --ren-anchor) and
  (position-area: bottom span-all)) {
  .ren-color-picker-dropdown {
    position: absolute;
    inset: auto;
  }
}

@keyframes ren-color-picker-open {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ═══ SATURATION/BRIGHTNESS AREA ═══ */
.ren-color-picker-saturation {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 240px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  cursor: crosshair;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* Canvas for saturation/brightness */
.ren-color-picker-saturation-canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
}

/* Saturation handle (circular cursor) */
.ren-color-picker-saturation-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgb(0, 0, 0, 0.3);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* ═══ HUE SLIDER ═══ */
.ren-color-picker-hue {
  position: relative;
  width: 100%;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  cursor: pointer;
  /* Hue rainbow. Intencionalmente hex literals: son los 6 puntos del espectro
     HSL puros (red→yellow→green→cyan→blue→magenta→red), no colores de UI. */
  background: linear-gradient(
    to right,
    #ff0000 0%,
    #ffff00 16.67%,
    #00ff00 33.33%,
    #00ffff 50%,
    #0000ff 66.67%,
    #ff00ff 83.33%,
    #ff0000 100%
  );
  overflow: hidden;
}

/* Hue slider handle/thumb */
.ren-color-picker-hue-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: white;
  box-shadow: 0 0 0 1px rgb(0, 0, 0, 0.3);
  pointer-events: none;
  transform: translateY(-50%);
}

/* ═══ ALPHA SLIDER (Optional) ═══ */
.ren-color-picker-alpha {
  position: relative;
  width: 100%;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  cursor: pointer;
  overflow: hidden;

  /* Checkerboard pattern for transparency */
  background-image: repeating-conic-gradient(
    var(--color-border) 0deg 90deg,
    transparent 90deg 180deg
  );
  background-size: 8px 8px;
  background-position: 0 0;
}

/* Gradient overlay for alpha */
.ren-color-picker-alpha-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
}

/* Alpha slider handle/thumb */
.ren-color-picker-alpha-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: white;
  box-shadow: 0 0 0 1px rgb(0, 0, 0, 0.3);
  pointer-events: none;
  transform: translateY(-50%);
}

/* ═══ COLOR PREVIEW SWATCH ═══ */
.ren-color-picker-preview {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.ren-color-picker-preview-swatch {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);

  /* Checkerboard for transparency */
  background-image: repeating-conic-gradient(
    var(--color-border) 0deg 90deg,
    transparent 90deg 180deg
  );
  background-size: 4px 4px;
  background-position: 0 0;
}

.ren-color-picker-preview-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.ren-color-picker-preview-label {
  font-size: var(--caption-size);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--label-weight);
}

.ren-color-picker-preview-value {
  font-family: var(--font-mono);
  font-size: var(--label-size);
  color: var(--color-text);
  margin-top: var(--space-1);
}

/* ═══ TEXT INPUTS SECTION ═══ */
.ren-color-picker-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Hex input field */
.ren-color-picker-hex-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--body-size);
  font-family: var(--font-mono);
  color: var(--color-text);
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  transition: var(--transition-tactile);
}

.ren-color-picker-hex-input:focus {
  outline: none;
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

.ren-color-picker-hex-input::placeholder {
  color: var(--color-text-muted);
}

/* Channel inputs container (RGB or HSL) */
.ren-color-picker-channels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2);
}

/* Individual channel input */
.ren-color-picker-channel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ren-color-picker-channel-label {
  font-size: var(--caption-size);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--label-weight);
}

.ren-color-picker-channel-input {
  padding: var(--space-2) var(--space-2);
  font-size: var(--body-size);
  font-family: var(--font-mono);
  color: var(--color-text);
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: var(--transition-tactile);
}

.ren-color-picker-channel-input:focus {
  outline: none;
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

.ren-color-picker-channel-input::-webkit-outer-spin-button,
.ren-color-picker-channel-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ren-color-picker-channel-input[type="number"] {
  -moz-appearance: textfield;
}

/* ═══ FORMAT TOGGLE BUTTON ═══ */
.ren-color-picker-format-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--label-size);
  font-family: var(--font-mono);
  color: var(--color-text);
  background-color: var(--color-fill);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-tactile);
}

.ren-color-picker-format-toggle:hover {
  background-color: var(--color-fill-hover);
  border-color: var(--color-border);
}

.ren-color-picker-format-toggle:focus-visible {
  outline: none;
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

.ren-color-picker-format-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ═══ EYEDROPPER BUTTON ═══ */
.ren-color-picker-eyedropper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--label-size);
  color: var(--color-text);
  background-color: var(--color-fill);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-tactile);
}

.ren-color-picker-eyedropper:hover {
  background-color: var(--color-fill-hover);
  border-color: var(--color-border);
}

.ren-color-picker-eyedropper:focus-visible {
  outline: none;
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

.ren-color-picker-eyedropper:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ren-color-picker-eyedropper-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
}

/* ═══ PRESETS/SWATCHES GRID ═══ */
.ren-color-picker-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.ren-color-picker-swatch {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-tactile);
  background-image: repeating-conic-gradient(
    var(--color-border) 0deg 90deg,
    transparent 90deg 180deg
  );
  background-size: 4px 4px;
  background-position: 0 0;
}

.ren-color-picker-swatch:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-input-focus-ring);
}

.ren-color-picker-swatch:hover {
  transform: scale(1.05);
  border-color: var(--color-border);
}

.ren-color-picker-swatch[aria-selected="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
}

.ren-color-picker-swatch-color {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

/* ═══ CONTROLS ROW (Format + Eyedropper) ═══ */
.ren-color-picker-controls {
  display: flex;
  gap: var(--space-2);
}

.ren-color-picker-controls-left {
  flex: 1;
  display: flex;
  gap: var(--space-2);
}

.ren-color-picker-controls-right {
  display: flex;
  gap: var(--space-2);
}

/* ═══ DISABLED STATE ═══ */
.ren-color-picker[disabled],
.ren-color-picker-trigger[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ═══ ANIMATIONS & TRANSITIONS ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-color-picker-dropdown,
  .ren-color-picker-trigger,
  .ren-color-picker-hex-input,
  .ren-color-picker-channel-input,
  .ren-color-picker-format-toggle,
  .ren-color-picker-swatch {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
}
/* Appearance API bridge */
.ren-color-picker { inline-size: var(--ren-cp-width, 280px); border-radius: var(--ren-cp-radius, var(--radius-lg)); background: var(--ren-cp-bg, var(--color-surface-overlay)); box-shadow: var(--ren-cp-shadow, var(--shadow-lg)); }
.ren-color-picker .ren-color-picker-swatch { inline-size: var(--ren-cp-swatch-size, 24px); block-size: var(--ren-cp-swatch-size, 24px); }
.ren-color-picker .ren-color-picker-handle { inline-size: var(--ren-cp-handle-size, 16px); block-size: var(--ren-cp-handle-size, 16px); }
.ren-color-picker .ren-color-picker-track { block-size: var(--ren-cp-track-height, 12px); }
/* ============================================
   RenDS — Collapsible Component
   ============================================
   Expand/collapse content panel.
   Uses native <details>/<summary> — ZERO JS.

   CSS-only animation with interpolate-size.

   Different from Accordion: standalone, no group
   exclusivity. For single expand/collapse sections.

   Usage:
     <details class="ren-collapsible">
       <summary>Click to expand</summary>
       <div class="ren-collapsible-content">
         Hidden content here
       </div>
     </details>

   Open by default:
     <details class="ren-collapsible" open>
       ...
     </details>
   ============================================ */

/* Enable height animation on details */
.ren-collapsible {
  interpolate-size: allow-keywords;
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Summary (trigger) */
.ren-collapsible > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  font-size: var(--body-size);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  list-style: none; /* Remove default marker */
  transition: var(--transition-tactile);
}

/* Remove default marker in WebKit */
.ren-collapsible > summary::-webkit-details-marker {
  display: none;
}

/* Custom chevron */
.ren-collapsible > summary::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border: solid var(--color-text-muted);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform var(--duration-enter) var(--ease-enter);
}

.ren-collapsible[open] > summary::after {
  transform: rotate(-135deg);
}

.ren-collapsible > summary:hover {
  background-color: var(--color-fill);
}

.ren-collapsible > summary:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: -2px;
}

/* Content area */
.ren-collapsible-content {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--body-size);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* ─── Ghost variant (no border) ─── */
.ren-collapsible-ghost {
  border: none;
}

.ren-collapsible-ghost > summary {
  padding-inline: 0;
}

.ren-collapsible-ghost .ren-collapsible-content {
  padding-inline: 0;
}

/* ─── Animate open/close ─── */
/* Uses CSS content-visibility for animation */
.ren-collapsible .ren-collapsible-content {
  content-visibility: visible;
}

/* Reduced motion — no animation */
@media (prefers-reduced-motion: reduce) {
  .ren-collapsible > summary::after {
    transition: none;
  }
}
/* Appearance API bridge */
.ren-collapsible, .ren-accordion { border-color: var(--ren-collapse-border, var(--color-border)); border-radius: var(--ren-collapse-radius, var(--radius-lg)); background: var(--ren-collapse-bg, var(--color-surface)); transition-duration: var(--ren-collapse-duration, var(--duration-normal)); transition-timing-function: var(--ren-collapse-easing, var(--ease-out)); }
.ren-collapsible > summary, .ren-accordion > summary { padding: var(--ren-collapse-padding, var(--space-4)); font-size: var(--ren-collapse-trigger-font, var(--label-lg-size)); font-weight: var(--ren-collapse-trigger-weight, var(--weight-semibold)); }
/* ============================================
   RenDS — Toolbar Component
   ============================================
   Grouped actions with roving tabindex pattern.
   CSS-only for layout. JS only for keyboard nav.

   Follows WAI-ARIA Toolbar pattern:
   - Arrow keys move between items
   - Tab moves focus in/out of toolbar
   - Home/End go to first/last item

   Usage:
     <div class="ren-toolbar" role="toolbar" aria-label="Formatting">
       <button class="ren-toolbar-item" tabindex="0">Bold</button>
       <button class="ren-toolbar-item" tabindex="-1">Italic</button>
       <button class="ren-toolbar-item" tabindex="-1">Underline</button>
       <div class="ren-toolbar-separator" role="separator"></div>
       <button class="ren-toolbar-item" tabindex="-1">Left</button>
       <button class="ren-toolbar-item" tabindex="-1">Center</button>
       <button class="ren-toolbar-item" tabindex="-1">Right</button>
     </div>

   Note: Set tabindex="0" on first item, "-1" on rest.
   ren-toolbar.js handles roving tabindex automatically.
   ============================================ */

.ren-toolbar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  background-color: var(--color-surface-sunken);
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-md);
}

/* ─── Toolbar Items ─── */
.ren-toolbar-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-sm);
  min-height: var(--size-sm);
  padding: var(--space-1) var(--space-2);
  border: none;
  background: none;
  color: var(--color-text);
  font-size: var(--caption-size, var(--text-sm));
  font-weight: var(--weight-medium);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition-tactile);
}

.ren-toolbar-item:hover {
  background-color: var(--color-fill-hover);
}

.ren-toolbar-item:active {
  background-color: var(--color-fill-active);
}

.ren-toolbar-item:focus-visible {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: -1px;
}

/* Active / Pressed state */
.ren-toolbar-item[aria-pressed="true"],
.ren-toolbar-item[data-active] {
  background-color: var(--color-surface-raised, var(--color-surface));
  box-shadow: var(--shadow-xs);
  color: var(--color-accent);
}

/* Disabled */
.ren-toolbar-item:disabled,
.ren-toolbar-item[aria-disabled="true"] {
  color: var(--color-disabled-text);
  cursor: not-allowed;
}

/* ─── Separator ─── */
.ren-toolbar-separator {
  width: 1px;
  height: 1.25rem;
  background-color: var(--color-border);
  margin-inline: var(--space-1);
  flex-shrink: 0;
}

/* ─── Icon-only items ─── */
.ren-toolbar-item-icon {
  min-width: var(--size-sm);
  padding: var(--space-1);
  aspect-ratio: 1;
}

/* ─── Variants ─── */

/* Ghost — no background on container */
.ren-toolbar-ghost {
  background: none;
  border: none;
  padding: 0;
  gap: var(--space-1);
}

/* Vertical toolbar */
.ren-toolbar-vertical {
  flex-direction: column;
}

.ren-toolbar-vertical .ren-toolbar-separator {
  width: auto;
  height: 1px;
  align-self: stretch;
  margin-block: var(--space-1);
  margin-inline: 0;
}
/* Appearance API bridge */
.ren-toolbar { min-block-size: var(--ren-toolbar-height, var(--size-lg)); padding: var(--ren-toolbar-padding, var(--space-1)); border-radius: var(--ren-toolbar-radius, var(--radius-lg)); background: var(--ren-toolbar-bg, var(--color-surface-raised)); border-color: var(--ren-toolbar-border, var(--color-border)); }
.ren-toolbar button, .ren-toolbar [role="button"] { inline-size: var(--ren-toolbar-item-size, var(--size-md)); block-size: var(--ren-toolbar-item-size, var(--size-md)); border-radius: var(--ren-toolbar-item-radius, var(--radius-sm)); }
.ren-toolbar button:hover, .ren-toolbar [role="button"]:hover { background: var(--ren-toolbar-item-hover, var(--color-fill)); }
.ren-toolbar button[aria-pressed="true"], .ren-toolbar [data-state="on"] { background: var(--ren-toolbar-active-bg, var(--color-accent-subtle)); }
/* ============================================
   RenDS — DropZone Component
   ============================================
   Drag & drop file upload area.
   Minimal JS for drag events — CSS handles visuals.

   Uses native drag events, no library needed.

   Usage:
     <div class="ren-dropzone" data-accept=".jpg,.png,.pdf" data-max-size="5MB">
       <div class="ren-dropzone-content">
         <span class="ren-dropzone-icon">↑</span>
         <p class="ren-dropzone-title">Drop files here</p>
         <p class="ren-dropzone-description">or click to browse</p>
       </div>
       <input type="file" class="ren-dropzone-input" multiple accept=".jpg,.png,.pdf">
     </div>
   ============================================ */

.ren-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
  padding: var(--space-6);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-sunken);
  cursor: pointer;
  transition: var(--transition-tactile);
}

.ren-dropzone:hover {
  border-color: var(--color-accent);
  background-color: var(--color-accent-subtle);
}

/* Drag over state (set via JS: element.dataset.dragover = true) */
.ren-dropzone[data-dragover] {
  border-color: var(--color-accent);
  background-color: var(--color-accent-subtle);
  border-style: solid;
}

.ren-dropzone:focus-within {
  outline: var(--ring-width) solid var(--color-focus-ring);
  outline-offset: var(--ring-offset-width);
}

/* Hidden file input covers entire dropzone */
.ren-dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Content */
.ren-dropzone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  pointer-events: none;
}

.ren-dropzone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  background-color: var(--color-fill);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-1);
}

.ren-dropzone[data-dragover] .ren-dropzone-icon {
  color: var(--color-accent);
  background-color: color-mix(in oklch, var(--color-accent), transparent 85%);
}

.ren-dropzone-title {
  font-size: var(--body-size);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.ren-dropzone-description {
  font-size: var(--caption-size, var(--text-sm));
  color: var(--color-text-muted);
}

/* ─── File list (after upload) ─── */
.ren-dropzone-files {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
}

.ren-dropzone-file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface-raised);
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--caption-size, var(--text-sm));
}

.ren-dropzone-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ren-dropzone-file-size {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.ren-dropzone-file-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
}

.ren-dropzone-file-remove:hover {
  color: var(--color-danger);
}

/* ─── Compact variant ─── */
.ren-dropzone-compact {
  min-height: auto;
  padding: var(--space-3) var(--space-4);
  flex-direction: row;
  gap: var(--space-3);
}

.ren-dropzone-compact .ren-dropzone-content {
  flex-direction: row;
}

.ren-dropzone-compact .ren-dropzone-icon {
  width: 2rem;
  height: 2rem;
  font-size: var(--text-base);
  margin-bottom: 0;
}

/* ─── Disabled ─── */
.ren-dropzone[aria-disabled="true"],
.ren-dropzone:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Error state ─── */
.ren-dropzone[data-error] {
  border-color: var(--color-danger);
}
/* Appearance API bridge */
.ren-dropzone { padding: var(--ren-dropzone-padding, var(--space-8)); border-radius: var(--ren-dropzone-radius, var(--radius-lg)); border-color: var(--ren-dropzone-border-color, var(--color-border-strong)); border-style: var(--ren-dropzone-border-style, dashed); border-width: var(--ren-dropzone-border-width, 2px); background: var(--ren-dropzone-bg, transparent); }
.ren-dropzone:hover, .ren-dropzone[data-drag-over] { background: var(--ren-dropzone-hover-bg, var(--color-accent-subtle)); border-color: var(--ren-dropzone-hover-border, var(--color-accent)); }
/* ============================================
   RenDS — Alert Dialog Component
   ============================================
   Confirmation dialog that blocks interaction.
   Extends native <dialog> like ren-dialog but:
   - No dismiss on outside click (::backdrop blocks)
   - No dismiss on Escape (optional)
   - Requires explicit action (confirm/cancel)

   Minimal JS: just showModal() and close().

   Usage:
     <dialog class="ren-alert-dialog" id="confirm">
       <div class="ren-alert-dialog-icon">⚠</div>
       <h2 class="ren-alert-dialog-title">Delete item?</h2>
       <p class="ren-alert-dialog-description">
         This action cannot be undone.
       </p>
       <div class="ren-alert-dialog-actions">
         <button class="ren-btn-secondary" onclick="this.closest('dialog').close('cancel')">
           Cancel
         </button>
         <button class="ren-btn-danger" onclick="this.closest('dialog').close('confirm')">
           Delete
         </button>
       </div>
     </dialog>

   Open: document.getElementById('confirm').showModal()
   Result: dialog.addEventListener('close', () => dialog.returnValue)
   ============================================ */

.ren-alert-dialog {
  container-type: inline-size;
  container-name: ren-alert-dialog;

  /* Structure */
  margin: auto;
  padding: var(--space-6);
  border: none;

  /* Sizing */
  max-width: 24rem;
  width: 90vw;

  /* Appearance */
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  text-align: center;

  /* Animation — semantic tokens keep this in sync with ren-dialog
     and respect prefers-reduced-motion via tokens/semantic/motion.css. */
  opacity: 1;
  transform: scale(1);
  transition:
    opacity   var(--duration-enter) var(--ease-enter),
    transform var(--duration-enter) var(--ease-enter),
    overlay   var(--duration-enter) var(--ease-enter) allow-discrete,
    display   var(--duration-enter) var(--ease-enter) allow-discrete;
}

/* Entry animation */
@starting-style {
  .ren-alert-dialog[open] {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Exit */
.ren-alert-dialog:not([open]) {
  opacity: 0;
  transform: scale(0.95);
}

/* Backdrop — shared overlay transition keeps all scrims in sync. */
.ren-alert-dialog::backdrop {
  background-color: var(--color-overlay);
  transition: var(--transition-overlay);
}

@starting-style {
  .ren-alert-dialog[open]::backdrop {
    opacity: 0;
  }
}

/* ─── Icon (optional) ─── */
.ren-alert-dialog-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-xl);
  height: var(--icon-xl);
  margin: 0 auto var(--space-3);
  font-size: var(--text-xl);
  background-color: var(--color-fill);
  border-radius: var(--radius-full);
}

/* Danger icon */
.ren-alert-dialog-icon-danger {
  background-color: var(--color-danger-subtle);
  color: var(--color-danger);
}

/* Warning icon */
.ren-alert-dialog-icon-warning {
  background-color: var(--color-warning-subtle);
  color: var(--color-warning);
}

/* ─── Title ─── */
.ren-alert-dialog-title {
  font-size: var(--title-sm-size, var(--text-lg));
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* ─── Description ─── */
.ren-alert-dialog-description {
  font-size: var(--body-size);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-5);
}

/* ─── Actions ─── */
.ren-alert-dialog-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

/* Stack actions when dialog is narrow */
@container ren-alert-dialog (max-width: 24rem) {
  .ren-alert-dialog-actions {
    flex-direction: column-reverse;
  }

  .ren-alert-dialog-actions > * {
    width: 100%;
  }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .ren-alert-dialog {
    transition: none;
  }
  .ren-alert-dialog::backdrop {
    transition: none;
  }
}
/* ============================================
   RenDS — Context Menu Component
   ============================================
   Right-click menu using Popover API.
   Reuses ren-menu styles for items.
   Minimal JS for right-click trigger + positioning.

   Usage:
     <div class="ren-context-menu-trigger" data-context="my-ctx-menu">
       Right-click this area
     </div>

     <div id="my-ctx-menu" class="ren-context-menu" popover>
       <button class="ren-menu-item">Cut</button>
       <button class="ren-menu-item">Copy</button>
       <button class="ren-menu-item">Paste</button>
       <hr class="ren-menu-separator">
       <button class="ren-menu-item ren-menu-item-danger">Delete</button>
     </div>
   ============================================ */

.ren-context-menu {
  /* Reset popover defaults */
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  inset: auto;

  /* Menu appearance (matches ren-menu) */
  background: var(--color-surface);
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding-block: var(--space-1);
  min-width: 10rem;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Position set by JS */
  position: fixed;

  /* Animation — semantic tokens keep context-menu in sync with
     ren-menu / ren-popover. Collapses to 0ms under reduce. */
  opacity: 0;
  transform: scale(0.95);
  transform-origin: top left;
  transition:
    opacity var(--duration-enter) var(--ease-enter),
    transform var(--duration-enter) var(--ease-enter),
    overlay var(--duration-enter) var(--ease-enter) allow-discrete,
    display var(--duration-enter) var(--ease-enter) allow-discrete;
}

.ren-context-menu:popover-open,
.ren-context-menu.ren-open {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  .ren-context-menu:popover-open {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* ─── Reuse menu item styles ─── */
/* Already defined in ren-menu.css:
   .ren-menu-item, .ren-menu-separator, etc.
   Import ren-menu.css alongside this file.
*/

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .ren-context-menu {
    transition: none;
  }
}
.ren-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ren-space-2, 0.5rem) var(--ren-space-4, 1rem);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  min-height: 3.5rem;
  transition: backdrop-filter var(--duration-overlay) var(--ease-state-change), background-color var(--duration-overlay) var(--ease-state-change);

  &[data-open] .ren-nav-links,
  &:has(.ren-nav-toggle[aria-expanded="true"]) .ren-nav-links {
    display: flex;
  }

  &.ren-nav-sticky {
    position: sticky;
    top: 0;
    z-index: var(--ren-z-sticky, 100);
    backdrop-filter: blur(8px);
    background-color: color-mix(in srgb, var(--color-surface) 95%, transparent);
  }

  &.ren-nav-transparent {
    background-color: transparent;
    border-bottom-color: transparent;
  }
}

.ren-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--ren-space-2, 0.5rem);
  font-weight: 600;
  font-size: var(--ren-title-sm-size, 1.125rem);
  color: var(--color-text);
  text-decoration: none;
  flex-shrink: 0;

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 0.375rem;
  }
}

.ren-nav-links {
  display: flex;
  align-items: center;
  gap: var(--ren-space-1, 0.25rem);
  list-style: none;
  margin: 0;
  padding: 0;

  @media (max-width: 48rem) {
    display: none;
    position: absolute;
    top: 3.5rem;
    inset-inline: 0;
    flex-direction: column;
    gap: 0;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--ren-space-2, 0.5rem) 0;
    animation: ren-nav-slide-down var(--duration-enter) var(--ease-enter);
    z-index: 1000;

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

@keyframes ren-nav-slide-down {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ren-nav-link {
  padding: var(--ren-space-2, 0.5rem) var(--ren-space-3, 0.75rem);
  color: var(--color-text-muted);
  font-size: var(--ren-label-size, 0.875rem);
  border-radius: 0.375rem;
  transition: background-color var(--duration-state) var(--ease-state-change), color var(--duration-state) var(--ease-state-change);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  &:hover {
    background-color: var(--color-fill);
    color: var(--color-text);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }

  &[aria-current="page"],
  &.active {
    color: var(--color-accent);
    font-weight: 500;
    background-color: var(--color-accent-subtle);
  }

  @media (max-width: 48rem) {
    padding: var(--ren-space-2, 0.5rem) var(--ren-space-4, 1rem);
    border-radius: 0;

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

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

.ren-nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: none;
  border: none;
  padding: var(--ren-space-2, 0.5rem);
  cursor: pointer;
  color: var(--color-text);
  min-width: 44px;
  min-height: 44px;
  border-radius: 0.375rem;
  transition: background-color var(--duration-state) var(--ease-state-change);

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

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  & span {
    width: 1.5rem;
    height: 2px;
    background-color: currentColor;
    border-radius: 1px;
    transition: transform var(--duration-route) var(--ease-state-change), opacity var(--duration-route) var(--ease-state-change);
    transform-origin: center;
  }

  &[aria-expanded="true"] {
    & span:nth-child(1) {
      transform: translateY(0.5rem) rotate(45deg);
    }

    & span:nth-child(2) {
      opacity: 0;
      transform: scaleX(0);
    }

    & span:nth-child(3) {
      transform: translateY(-0.5rem) rotate(-45deg);
    }
  }

  @media (max-width: 48rem) {
    display: flex;
  }
}

.ren-nav-dropdown {
  position: relative;

  & [popover] {
    padding: var(--ren-space-1, 0.25rem);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    margin-top: var(--ren-space-1, 0.25rem);
    list-style: none;
    padding-inline-start: 0;

    &[popover] {
      inset: auto auto auto auto;
    }
  }

  & .ren-nav-link[aria-expanded="true"] {
    background-color: var(--color-fill);
    color: var(--color-accent);
  }
}
/* Appearance API bridge */
.ren-nav { min-block-size: var(--ren-nav-height, 3.5rem); padding-inline: var(--ren-nav-padding-x, var(--space-4)); background: var(--ren-nav-bg, var(--color-surface)); border-color: var(--ren-nav-border, var(--color-border)); gap: var(--ren-nav-gap, var(--space-6)); }
.ren-nav a { color: var(--ren-nav-link-color, var(--color-text-muted)); }
.ren-nav a[aria-current="page"], .ren-nav a[data-active] { color: var(--ren-nav-link-active, var(--color-text)); }
.ren-sidebar-layout {
  display: flex;
  min-height: 100dvh;
  background-color: var(--color-surface);
}

.ren-sidebar {
  --sidebar-width: var(--ren-sidebar-width, 16rem);
  --sidebar-collapsed-width: var(--ren-sidebar-collapsed-width, 4rem);

  width: var(--sidebar-width);
  flex-shrink: 0;
  background-color: var(--color-surface-sunken);
  border-inline-end: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition: width var(--duration-enter) var(--ease-state-change), transform var(--duration-enter) var(--ease-state-change);
  overflow: hidden;
  z-index: 50;

  &[data-collapsed] {
    width: var(--sidebar-collapsed-width);

    & .ren-sidebar-item-text {
      opacity: 0;
      width: 0;
      overflow: hidden;
      transition: opacity var(--duration-enter) var(--ease-state-change), width var(--duration-enter) var(--ease-state-change);
    }

    & .ren-sidebar-section-label {
      opacity: 0;
      width: 0;
      overflow: hidden;
      transition: opacity var(--duration-enter) var(--ease-state-change), width var(--duration-enter) var(--ease-state-change);
    }

    & .ren-sidebar-item {
      justify-content: center;
      position: relative;

      &:hover::after {
        content: attr(data-tooltip);
        position: absolute;
        inset-inline-start: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-inline-start: var(--ren-space-2, 0.5rem);
        padding: var(--ren-space-2, 0.5rem) var(--ren-space-3, 0.75rem);
        background-color: var(--color-text);
        color: var(--color-surface);
        border-radius: 0.375rem;
        font-size: var(--ren-caption-size, 0.75rem);
        white-space: nowrap;
        z-index: 1000;
        pointer-events: none;
      }
    }
  }

  @media (max-width: 48rem) {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    height: 100dvh;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--duration-enter) var(--ease-state-change);

    &[data-open] {
      transform: translateX(0);
      box-shadow: 4px 0 12px rgb(0 0 0 / 0.15);
    }

    &[data-collapsed] {
      transform: translateX(-100%);
      width: var(--sidebar-width);
    }
  }
}

.ren-sidebar-header {
  padding: var(--ren-space-3, 0.75rem) var(--ren-space-4, 1rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;

  @media (max-width: 48rem) {
    padding: var(--ren-space-3, 0.75rem) var(--ren-space-4, 1rem);
  }
}

.ren-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--ren-space-2, 0.5rem);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 3px;

    &:hover {
      background-color: var(--color-text-muted);
    }
  }
}

.ren-sidebar-footer {
  padding: var(--ren-space-3, 0.75rem) var(--ren-space-4, 1rem);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;

  @media (max-width: 48rem) {
    padding: var(--ren-space-3, 0.75rem) var(--ren-space-4, 1rem);
  }
}

.ren-sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ren-space-1, 0.25rem);
}

.ren-sidebar-section {
  margin-top: var(--ren-space-4, 1rem);

  &:first-child {
    margin-top: 0;
  }
}

.ren-sidebar-section-label {
  padding: var(--ren-space-1, 0.25rem) var(--ren-space-3, 0.75rem);
  font-size: var(--ren-caption-size, 0.75rem);
  font-weight: 600;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity var(--duration-enter) var(--ease-state-change);
  white-space: nowrap;
  overflow: hidden;
}

.ren-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--ren-space-3, 0.75rem);
  padding: var(--ren-space-2, 0.5rem) var(--ren-space-3, 0.75rem);
  border-radius: 0.375rem;
  color: var(--color-text-muted);
  font-size: var(--ren-label-size, 0.875rem);
  cursor: pointer;
  transition: background-color var(--duration-state) var(--ease-state-change), color var(--duration-state) var(--ease-state-change);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;

  &:hover {
    background-color: var(--color-fill);
    color: var(--color-text);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }

  &.active,
  &[aria-current="page"] {
    background-color: var(--color-accent-subtle);
    color: var(--color-accent);
    font-weight: 500;

    & .ren-sidebar-item-icon {
      color: var(--color-accent);
    }
  }

  &[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
}

.ren-sidebar-item-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition: color var(--duration-state) var(--ease-state-change);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ren-sidebar-item-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--duration-enter) var(--ease-state-change), width var(--duration-enter) var(--ease-state-change);
}

.ren-sidebar-divider {
  height: 1px;
  background-color: var(--color-separator);
  margin: var(--ren-space-2, 0.5rem) 0;
}

.ren-sidebar-toggle {
  background: none;
  border: none;
  padding: var(--ren-space-2, 0.5rem);
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  border-radius: 0.375rem;
  transition: background-color var(--duration-state) var(--ease-state-change), color var(--duration-state) var(--ease-state-change);

  &:hover {
    background-color: var(--color-fill);
    color: var(--color-text);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  @media (max-width: 48rem) {
    display: none;
  }
}

.ren-sidebar-main {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 3px;

    &:hover {
      background-color: var(--color-text-muted);
    }
  }

  @media (max-width: 48rem) {
    margin-inline-start: 0;
  }
}

.ren-sidebar-overlay {
  position: fixed;
  inset: 0;
  background-color: rgb(0 0 0 / 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-enter) var(--ease-state-change);
  z-index: 40;

  @media (max-width: 48rem) {
    .ren-sidebar[data-open] ~ & {
      opacity: 1;
      pointer-events: auto;
    }
  }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .ren-sidebar,
  .ren-sidebar * {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}
/* Appearance API bridge */
.ren-sidebar { inline-size: var(--ren-sidebar-width, 260px); background: var(--ren-sidebar-bg, var(--color-surface-sunken)); border-color: var(--ren-sidebar-border, var(--color-border)); transition-duration: var(--ren-sidebar-duration, var(--duration-normal)); transition-timing-function: var(--ren-sidebar-easing, var(--ease-out)); }
.ren-sidebar.is-collapsed, .ren-sidebar[data-collapsed="true"] { inline-size: var(--ren-sidebar-collapsed-width, 60px); }
.ren-sidebar a, .ren-sidebar button { min-block-size: var(--ren-sidebar-item-height, var(--size-lg)); padding: var(--ren-sidebar-item-padding, var(--space-2) var(--space-3)); border-radius: var(--ren-sidebar-item-radius, var(--radius-md)); }
.ren-sidebar a[aria-current="page"], .ren-sidebar a[data-active] { background: var(--ren-sidebar-active-bg, var(--color-accent-subtle)); color: var(--ren-sidebar-active-color, var(--color-accent)); }

@media (any-pointer: coarse), (pointer: coarse) {
  .ren-sidebar-toggle {
    min-inline-size: var(--touch-min);
    min-block-size: var(--touch-min);
  }
}
.ren-command {
  position: fixed;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  max-width: 32rem;
  width: 100%;
  max-height: 24rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--ren-radius-xl, 0.75rem);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: var(--ren-z-modal, 1000);
  margin: auto;
  animation: ren-command-in var(--duration-enter) var(--ease-enter);

  @starting-style {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.98);
  }

  @media (max-width: 32rem) {
    width: calc(100% - 2rem);
    max-height: 18rem;
  }

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

  &::backdrop {
    background-color: rgb(0 0 0 / 0.5);
    backdrop-filter: blur(4px);
    animation: ren-command-backdrop-in var(--duration-overlay) var(--ease-enter);

    @starting-style {
      background-color: rgb(0 0 0 / 0);
      backdrop-filter: blur(0);
    }

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

@keyframes ren-command-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes ren-command-backdrop-in {
  from {
    background-color: rgb(0 0 0 / 0);
    backdrop-filter: blur(0);
  }

  to {
    background-color: rgb(0 0 0 / 0.5);
    backdrop-filter: blur(4px);
  }
}

.ren-command-input-wrapper {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding: var(--ren-space-2, 0.5rem) var(--ren-space-3, 0.75rem);
  gap: var(--ren-space-2, 0.5rem);
  flex-shrink: 0;

  & svg {
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }
}

.ren-command-input {
  flex: 1;
  border: none;
  background-color: transparent;
  font-size: var(--ren-body-size, 0.875rem);
  color: var(--color-text);
  outline: none;
  padding: 0;
  font-family: inherit;

  &::placeholder {
    color: var(--color-text-muted);
  }

  &:autofill {
    box-shadow: inset 0 0 0 1000px var(--color-surface);
    -webkit-text-fill-color: var(--color-text);
  }
}

.ren-command-kbd {
  margin-inline-start: auto;
  display: flex;
  gap: var(--ren-space-1, 0.25rem);
  align-items: center;
  font-size: var(--ren-caption-size, 0.75rem);
  color: var(--color-text-muted);
  font-family: var(--ren-font-mono, 'Monaco', 'Menlo', monospace);
  white-space: nowrap;

  & kbd {
    padding: 0.125rem 0.375rem;
    background-color: var(--color-fill);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    font-size: inherit;
  }

  @media (max-width: 32rem) {
    display: none;
  }
}

.ren-command-list {
  overflow-y: auto;
  max-height: 18rem;
  padding: var(--ren-space-1, 0.25rem);
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 3px;

    &:hover {
      background-color: var(--color-text-muted);
    }
  }
}

.ren-command-group {
  margin-bottom: var(--ren-space-2, 0.5rem);
  overflow: hidden;

  &[data-empty] {
    display: none;
  }
}

.ren-command-group-heading {
  padding: var(--ren-space-1, 0.25rem) var(--ren-space-3, 0.75rem);
  font-size: var(--ren-caption-size, 0.75rem);
  font-weight: 600;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
}

.ren-command-item {
  display: flex;
  align-items: center;
  gap: var(--ren-space-3, 0.75rem);
  padding: var(--ren-space-2, 0.5rem) var(--ren-space-3, 0.75rem);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color var(--duration-state) var(--ease-state-change);
  user-select: none;
  background-color: transparent;
  border: none;
  width: 100%;
  text-align: start;
  font-family: inherit;

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

  &:active {
    background-color: var(--color-fill-hover);
  }

  &[data-highlighted] {
    background-color: var(--color-fill);
  }

  &[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  &:focus-visible {
    outline: none;
    background-color: var(--color-fill);
  }
}

.ren-command-item-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);

  & svg {
    width: 100%;
    height: 100%;
  }
}

.ren-command-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.ren-command-item-title {
  font-size: var(--ren-body-size, 0.875rem);
  color: var(--color-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ren-command-item-description {
  font-size: var(--ren-caption-size, 0.75rem);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ren-command-item-shortcut {
  margin-inline-start: auto;
  display: flex;
  gap: var(--ren-space-1, 0.25rem);
  font-family: var(--ren-font-mono, 'Monaco', 'Menlo', monospace);
  font-size: var(--ren-caption-size, 0.75rem);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;

  @media (max-width: 40rem) {
    display: none;
  }
}

.ren-command-separator {
  height: 1px;
  background-color: var(--color-separator);
  margin: var(--ren-space-1, 0.25rem) 0;
}

.ren-command-empty {
  padding: var(--ren-space-8, 2rem);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--ren-body-size, 0.875rem);
}

.ren-command-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--ren-space-2, 0.5rem);
  display: flex;
  gap: var(--ren-space-4, 1rem);
  font-size: var(--ren-caption-size, 0.75rem);
  color: var(--color-text-muted);
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: center;

  @media (max-width: 32rem) {
    padding: var(--ren-space-1, 0.25rem) var(--ren-space-2, 0.5rem);
    gap: var(--ren-space-2, 0.5rem);
  }
}

.ren-command-footer-hint {
  display: flex;
  gap: var(--ren-space-1, 0.25rem);
  align-items: center;

  & kbd {
    padding: 0.125rem 0.375rem;
    background-color: var(--color-fill);
    border: 1px solid var(--color-border);
    border-radius: 0.25rem;
    font-size: inherit;
    font-family: var(--ren-font-mono, 'Monaco', 'Menlo', monospace);
  }
}
/* Appearance API bridge */
.ren-command { inline-size: var(--ren-command-width, min(95vw, 560px)); max-block-size: var(--ren-command-max-height, 340px); border-radius: var(--ren-command-radius, var(--radius-xl)); background: var(--ren-command-bg, var(--color-surface-overlay)); border-color: var(--ren-command-border, var(--color-border)); box-shadow: var(--ren-command-shadow, var(--shadow-xl)); }
.ren-command [role="option"], .ren-command-item { min-block-size: var(--ren-command-item-height, var(--size-lg)); border-radius: var(--ren-command-item-radius, var(--radius-md)); }
/**
 * RenDS — Data Table Organism
 * ============================
 *
 * A comprehensive, accessible data table component supporting:
 * - Sortable columns with directional indicators
 * - Row selection with multi-select and shift+click range selection
 * - Client-side pagination with configurable page size
 * - Keyboard navigation (arrow keys, Enter, Space)
 * - Column resizing via drag handle
 * - Pinned/sticky columns and headers
 * - Multiple density variants (compact, comfortable)
 * - Loading states with skeleton shimmer
 * - Empty state messaging
 * - Responsive horizontal scrolling
 * - Search/filter toolbar integration
 * - Full ARIA support for accessibility
 *
 * @example
 * <ren-table data-page-size="10">
 *   <div class="ren-table-toolbar">
 *     <input class="ren-input ren-input-sm" placeholder="Search..." data-table-search>
 *   </div>
 *   <div class="ren-table-wrapper">
 *     <table class="ren-table">
 *       <thead class="ren-table-header">
 *         <tr>
 *           <th class="ren-th ren-table-select"><input type="checkbox" aria-label="Select all"></th>
 *           <th class="ren-th ren-th-sortable" data-column="name">Name</th>
 *         </tr>
 *       </thead>
 *       <tbody class="ren-table-body">
 *         <tr class="ren-tr" data-row-id="1">
 *           <td class="ren-td ren-table-select"><input type="checkbox" aria-label="Select row"></td>
 *           <td class="ren-td">John Doe</td>
 *         </tr>
 *       </tbody>
 *     </table>
 *   </div>
 *   <div class="ren-table-pagination"></div>
 * </ren-table>
 */

/* ===== Base Table Structure ===== */

ren-table {
  container-type: inline-size;
  container-name: ren-table;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.ren-table-wrapper {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;

  &::-webkit-scrollbar {
    height: 8px;
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-state) var(--ease-enter);

    &:hover {
      background-color: var(--color-text-muted);
    }
  }
}

.ren-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-surface);
  font-size: var(--body-size);
  color: var(--color-text);
}

/* ===== Header Styles ===== */

.ren-table-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--color-surface-raised);
}

.ren-table-header tr {
  border-bottom: 1px solid var(--color-border);
}

.ren-th {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  font-weight: var(--label-weight);
  font-size: var(--label-size);
  color: var(--color-text);
  user-select: none;
  white-space: nowrap;
  background-color: var(--color-surface-raised);
  border-inline-end: 1px solid var(--color-border);
  height: 44px;
  display: table-cell;
  vertical-align: middle;

  &:last-child {
    border-inline-end: none;
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }
}

.ren-th-sortable {
  cursor: pointer;
  position: relative;
  transition: background-color var(--duration-tactile) var(--ease-enter);

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

  &::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-inline-start: var(--space-2);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none"><path d="M3 8L6 5l3 3M3 4L6 7l3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.4;
    transition: opacity var(--duration-tactile) var(--ease-enter), transform var(--duration-tactile) var(--ease-enter);
    vertical-align: middle;
    color: var(--color-text-muted);
  }

  &[data-sort="asc"]::after {
    opacity: 1;
    transform: scaleY(1);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none"><path d="M6 2v6M3 5l3-3 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  }

  &[data-sort="desc"]::after {
    opacity: 1;
    transform: scaleY(-1);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none"><path d="M6 2v6M3 5l3-3 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  }
}

.ren-th-resize {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  height: 100%;
  width: 4px;
  cursor: col-resize;
  user-select: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  transition: background-color var(--duration-tactile) var(--ease-enter);

  &:hover,
  &:active {
    background-color: var(--color-accent);
  }
}

/* Pinned columns */
.ren-th-pinned {
  position: sticky;
  z-index: 11;
}

/* ===== Body & Row Styles ===== */

.ren-table-body {
  background-color: var(--color-surface);
}

.ren-tr {
  border-bottom: var(--stroke-1) solid var(--color-border);
  transition: background-color var(--duration-tactile) var(--ease-enter);
  height: 44px;

  &:nth-child(even) {
    background-color: var(--color-fill);
  }

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

  &[aria-selected="true"] {
    background-color: var(--color-accent-subtle);

    .ren-td {
      background-color: var(--color-accent-subtle);
    }
  }

  &:focus-within {
    outline: 2px solid var(--color-accent);
    outline-offset: -1px;
  }
}

.ren-td {
  padding: var(--space-3) var(--space-4);
  border-inline-end: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
  height: 44px;

  &:last-child {
    border-inline-end: none;
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }
}

/* Pinned column cells */
.ren-td-pinned {
  position: sticky;
  z-index: 9;
  background-color: inherit;
}

/* ===== Selection Styles ===== */

.ren-table-select {
  width: var(--space-10);
  padding: var(--space-3);
  text-align: center;

  input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-accent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-tactile) var(--ease-enter),
                border-color var(--duration-tactile) var(--ease-enter);

    &:hover:not(:disabled) {
      border-color: var(--color-accent);
    }

    &:checked {
      background-color: var(--color-accent);
      border-color: var(--color-accent);
      color: var(--color-on-accent);
    }

    &:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 2px;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}

/* ===== Pagination ===== */

.ren-table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
  font-size: var(--caption-size);
  color: var(--color-text-muted);
  gap: var(--space-4);

  &:empty {
    display: none;
  }
}

.ren-table-pagination-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--body-size);
  color: var(--color-text);
}

.ren-table-pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ren-table-pagination-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: var(--space-2);
  background-color: var(--color-fill);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--body-size);
  cursor: pointer;
  transition: background-color var(--duration-tactile) var(--ease-enter),
              border-color var(--duration-tactile) var(--ease-enter);
  user-select: none;
  min-width: 44px;
  min-height: 44px;

  &:hover:not(:disabled) {
    background-color: var(--color-fill-hover);
    border-color: var(--color-accent);
  }

  &:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-fill);
  }
}

/* ===== Toolbar Styles ===== */

.ren-table-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;

  &:empty {
    display: none;
  }
}

.ren-table-toolbar-search {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

/* ===== Empty State ===== */

.ren-table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  gap: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  min-height: 200px;

  .ren-table-empty-icon {
    font-size: 40px;
    opacity: 0.4;
  }

  .ren-table-empty-title {
    font-size: var(--label-size);
    font-weight: var(--label-weight);
    color: var(--color-text);
  }

  .ren-table-empty-description {
    font-size: var(--caption-size);
    color: var(--color-text-muted);
    max-width: 300px;
  }
}

/* ===== Loading State ===== */

ren-table[data-loading] {
  .ren-table-body {
    position: relative;
  }

  .ren-tr {
    opacity: 0.5;
    pointer-events: none;
  }
}

.ren-table-loading-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255, 255, 255, 0.4),
    transparent
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  z-index: 20;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* ===== Density Variants ===== */

.ren-table-compact {
  .ren-th,
  .ren-td {
    padding: var(--space-2) var(--space-3);
    height: 32px;
  }

  .ren-tr {
    height: 32px;
  }
}

.ren-table-comfortable {
  .ren-th,
  .ren-td {
    padding: var(--space-4) var(--space-5);
    height: 56px;
  }

  .ren-tr {
    height: 56px;
  }
}

/* ===== Responsive Design (Container Query) ===== */

@container ren-table (max-width: 600px) {
  .ren-table {
    min-width: 600px;
  }

  .ren-table-pagination {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .ren-table-pagination-info {
    width: 100%;
  }

  .ren-table-pagination-controls {
    width: 100%;
    justify-content: space-between;
  }

  .ren-table-toolbar {
    flex-direction: column;
  }

  .ren-table-toolbar-search {
    min-width: 100%;
    max-width: 100%;
  }
}

/* ===== Accessibility ===== */

/* High contrast mode support */
@media (prefers-contrast: more) {
  .ren-th {
    border: 1px solid var(--color-text);
  }

  .ren-td {
    border: var(--stroke-1) solid var(--color-text);
  }

  .ren-th-sortable:hover {
    background-color: var(--color-text);
    color: var(--color-surface);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .ren-tr,
  .ren-th-sortable,
  .ren-table-pagination-button,
  .ren-table-select input[type="checkbox"] {
    transition: none;
  }

  .ren-table-loading-overlay {
    animation: none;
    background: rgb(255, 255, 255, 0.2);
  }
}

/* Dark mode support (if light/dark theming is used) */
@media (prefers-color-scheme: dark) {
  .ren-table {
    /* Uses CSS custom properties from design tokens */
    /* No additional overrides needed if tokens are properly defined */
  }
}
/* Appearance API bridge */
.ren-table { font-size: var(--ren-table-header-size, var(--body-size)); }
.ren-table thead { background: var(--ren-table-header-bg, var(--color-surface-sunken)); color: var(--ren-table-header-color, var(--color-text-muted)); font-weight: var(--ren-table-header-weight, var(--weight-semibold)); }
.ren-table tr { min-block-size: var(--ren-table-row-height, var(--size-lg)); block-size: var(--ren-table-row-height, var(--size-lg)); }
.ren-table th, .ren-table td { padding: var(--ren-table-cell-padding, var(--space-3)); }
.ren-table { border-color: var(--ren-table-border-color, var(--color-border-muted)); }
.ren-table tbody tr:nth-child(even) { background: var(--ren-table-stripe-bg, var(--color-surface-sunken)); }
.ren-table tbody tr:hover { background: var(--ren-table-hover-bg, var(--color-fill)); }
.ren-table tbody tr[aria-selected="true"], .ren-table tbody tr[data-selected] { background: var(--ren-table-selected-bg, var(--color-accent-subtle)); }
/* ============================================
   RenDS — Form Validation System Organism
   ============================================
   Multi-step form with field validation,
   error summaries, and accessibility features.

   Includes:
   - Form container with field stack layout
   - Section grouping and horizontal rows
   - Error summary boxes (CSS shown/hidden)
   - Multi-step progress indicators
   - Loading/submitting states
   - Responsive design

   Light DOM — no Shadow DOM.
   ============================================ */

/* ─── Form Container ─── */
.ren-form {
  container-type: inline-size;
  container-name: ren-form;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  max-width: 100%;
}

/* Submitting state — disable interactions */
.ren-form[data-submitting] {
  opacity: 0.6;
  pointer-events: none;
}

/* ─── Error Summary ─── */
.ren-form-error-summary {
  padding: var(--space-4);
  background-color: var(--color-danger-subtle);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  transition: all var(--duration-enter) var(--ease-enter);
}

.ren-form-error-summary[hidden],
.ren-form-error-summary:not([data-has-errors]) {
  display: none;
}

.ren-form-error-summary strong {
  display: block;
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--color-danger);
  margin-bottom: var(--space-2);
}

.ren-form-error-summary ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ren-form-error-summary li {
  font-size: var(--caption-size);
  color: var(--color-danger);
  line-height: var(--leading-normal);
}

.ren-form-error-summary a {
  color: var(--color-danger);
  text-decoration: underline;
  cursor: pointer;
}

.ren-form-error-summary a:hover {
  text-decoration: none;
}

/* ─── Success Message ─── */
.ren-form-success {
  padding: var(--space-4);
  background-color: var(--color-success-subtle);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-md);
  font-size: var(--body-sm-size);
  color: var(--color-success);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: all var(--duration-enter) var(--ease-enter);
}

.ren-form-success[hidden] {
  display: none;
}

/* ─── Form Sections ─── */
.ren-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ren-form-section-title {
  font-size: var(--title-sm-size);
  font-weight: var(--title-sm-weight);
  color: var(--color-text);
  margin: 0;
  padding: 0;
  line-height: var(--title-sm-leading);
}

/* ─── Form Row (Horizontal Layout) ─── */
.ren-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.ren-form-row > .ren-field {
  flex: 1;
  min-width: 250px;
}

/* Stack on narrow containers */
@container ren-form (max-width: 480px) {
  .ren-form-row {
    flex-direction: column;
    gap: var(--space-4);
  }

  .ren-form-row > .ren-field {
    min-width: 100%;
    flex: none;
  }
}

/* ─── Form Actions ─── */
.ren-form-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.ren-form-actions button {
  white-space: nowrap;
}

@container ren-form (max-width: 480px) {
  .ren-form-actions {
    flex-direction: column-reverse;
  }

  .ren-form-actions button {
    width: 100%;
  }
}

/* ─── Multi-Step Progress Indicator ─── */
.ren-form-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.ren-form-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Step circle */
.ren-form-step::before {
  content: attr(data-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  transition: all var(--duration-state) var(--ease-enter);
  border: 2px solid transparent;
}

/* Step label */
.ren-form-step-label {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: all var(--duration-state) var(--ease-enter);
}

/* Divider between steps */
.ren-form-step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 2px;
  background-color: var(--color-border);
  min-width: 1rem;
  transition: background-color var(--duration-state) var(--ease-enter);
}

/* Active step */
.ren-form-step[data-active] {
  /* Step circle */
}

.ren-form-step[data-active]::before {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.ren-form-step[data-active] .ren-form-step-label {
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

/* Completed step */
.ren-form-step[data-completed] {
  /* Step circle */
}

.ren-form-step[data-completed]::before {
  background-color: var(--color-success);
  color: var(--color-on-success);
  border-color: var(--color-success);
  content: '✓';
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
}

.ren-form-step[data-completed] .ren-form-step-label {
  color: var(--color-text-muted);
}

/* Divider after completed step is colored */
.ren-form-step[data-completed]:not(:last-child)::after {
  background-color: var(--color-success);
}

/* ─── Disabled step ─── */
.ren-form-step[data-disabled] {
  pointer-events: none;
}

.ren-form-step[data-disabled]::before {
  background-color: var(--color-fill);
  color: var(--color-text-faint);
  opacity: 0.5;
}

.ren-form-step[data-disabled] .ren-form-step-label {
  color: var(--color-text-faint);
  opacity: 0.5;
}

/* Stack steps vertically on narrow containers */
@container ren-form (max-width: 360px) {
  .ren-form-progress {
    flex-direction: column;
    gap: var(--space-3);
  }

  .ren-form-step:not(:last-child)::after {
    content: '';
    width: 2px;
    height: 1.5rem;
    background-color: var(--color-border);
    min-width: 0;
  }
}

/* ─── Smooth focus management ─── */
.ren-form:has(.ren-field[data-invalid]) {
  scroll-behavior: smooth;
}

/* ─── Animation for error entry ─── */
@keyframes slideInError {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ren-form-error-summary[data-has-errors] {
  animation: slideInError var(--duration-enter) var(--ease-enter);
}

@media (prefers-reduced-motion: reduce) {
  .ren-form-error-summary[data-has-errors],
  .ren-form-step::before,
  .ren-form-step-label,
  .ren-form-step:not(:last-child)::after {
    animation: none;
    transition: none;
  }
}
/* Appearance API bridge delegates field chrome to the primitive family. */
.ren-form input, .ren-form select, .ren-form textarea { min-block-size: var(--ren-field-height, var(--size-lg)); padding-inline: var(--ren-field-padding-x, var(--space-3)); padding-block: var(--ren-field-padding-y, var(--space-2)); font-size: var(--ren-field-font-size, var(--body-size)); border-radius: var(--ren-field-radius, var(--radius-md)); border: var(--ren-field-border-width, var(--stroke-1)) solid var(--ren-field-border-color, var(--color-border-interactive)); background: var(--ren-field-bg, var(--color-input-bg)); color: var(--ren-field-color, var(--color-text)); }
.ren-form input::placeholder, .ren-form textarea::placeholder { color: var(--ren-field-placeholder, var(--color-input-placeholder)); }
.ren-form input:focus, .ren-form select:focus, .ren-form textarea:focus { border-color: var(--ren-field-focus-color, var(--color-input-border-focus)); }
.ren-form [aria-invalid="true"] { border-color: var(--ren-field-error-color, var(--color-input-error-border)); }
.ren-form [aria-invalid="false"] { border-color: var(--ren-field-success-color, var(--color-success)); }
/**
 * RenDS Menubar
 * Horizontal menu bar component (File, Edit, View, etc.)
 *
 * Implements WAI-ARIA Menubar pattern with keyboard navigation,
 * roving focus, submenu support, and checkbox/radio items.
 *
 * Classes:
 * - .ren-menubar: Root horizontal menu bar
 * - .ren-menubar-trigger: Top-level menu button
 * - .ren-menubar-menu: Dropdown menu panel
 * - .ren-menubar-item: Individual menu item
 * - .ren-menubar-separator: Divider between item groups
 * - .ren-menubar-shortcut: Keyboard shortcut indicator
 * - .ren-menubar-label: Non-interactive group label
 * - .ren-menubar-submenu: Submenu with chevron
 * - .ren-menubar-checkbox: Checkbox menu item
 * - .ren-menubar-radio: Radio menu item
 */

/* =================================================================
   ROOT MENUBAR
   ================================================================= */

.ren-menubar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

/* =================================================================
   MENUBAR TRIGGER (Top-level Menu Button)
   ================================================================= */

.ren-menubar-trigger {
  position: relative;
  padding: var(--space-1) var(--space-2);
  background-color: transparent;
  color: var(--color-text);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--body-size);
  font-weight: var(--label-weight);
  cursor: pointer;
  transition: background-color var(--duration-tactile) var(--ease-enter);
  white-space: nowrap;
}

.ren-menubar-trigger:hover:not([aria-expanded="true"]) {
  background-color: var(--color-fill-hover);
}

.ren-menubar-trigger[aria-expanded="true"] {
  background-color: var(--color-fill-active);
  color: var(--color-text);
}

.ren-menubar-trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.ren-menubar-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =================================================================
   MENUBAR MENU (Dropdown Panel)
   ================================================================= */

.ren-menubar-menu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  margin-top: var(--space-1);
  min-width: 200px;
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Visible state for menu open */
.ren-menubar-menu:not([hidden]) {
  display: flex;
  animation: menubar-menu-open var(--duration-exit) var(--ease-enter);
}

/* Hidden state for menu closed */
.ren-menubar-menu[hidden] {
  display: none;
  animation: menubar-menu-close var(--duration-exit) var(--ease-enter);
}

@starting-style {
  .ren-menubar-menu:not([hidden]) {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes menubar-menu-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes menubar-menu-close {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* =================================================================
   MENUBAR ITEM (Menu Item)
   ================================================================= */

.ren-menubar-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background-color: transparent;
  color: var(--color-text);
  border: none;
  font-size: var(--body-size);
  font-weight: normal;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--duration-tactile) var(--ease-enter);
  position: relative;
  gap: var(--space-2);
}

.ren-menubar-item:hover:not([data-disabled]) {
  background-color: var(--color-fill-hover);
}

.ren-menubar-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.ren-menubar-item[data-disabled] {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.ren-menubar-item[data-disabled]:hover {
  background-color: transparent;
}

/* =================================================================
   MENUBAR SHORTCUT (Keyboard Shortcut Indicator)
   ================================================================= */

.ren-menubar-shortcut {
  display: inline-block;
  margin-inline-start: auto;
  padding-inline-start: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--caption-size);
  font-family: monospace;
  flex-shrink: 0;
}

/* =================================================================
   MENUBAR SEPARATOR (Divider)
   ================================================================= */

.ren-menubar-separator {
  height: 1px;
  background-color: var(--color-separator);
  margin: var(--space-1) 0;
}

/* =================================================================
   MENUBAR LABEL (Group Label)
   ================================================================= */

.ren-menubar-label {
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
  pointer-events: none;
}

/* =================================================================
   MENUBAR SUBMENU (With Chevron)
   ================================================================= */

.ren-menubar-submenu {
  position: relative;
}

/* Chevron indicator via ::after */
.ren-menubar-submenu::after {
  content: '›';
  display: inline-block;
  margin-inline-start: auto;
  padding-inline-start: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--body-size);
  flex-shrink: 0;
}

/* Submenu panel positioning (higher z-index for layering) */
.ren-menubar-submenu > .ren-menubar-menu {
  top: 0;
  inset-inline-start: calc(100% + var(--space-1));
  margin-top: 0;
  z-index: 1100;
}

/* =================================================================
   MENUBAR CHECKBOX (Checkbox Menu Item)
   ================================================================= */

.ren-menubar-checkbox {
  position: relative;
}

/* Checkmark via ::before */
.ren-menubar-checkbox::before {
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin-inline-end: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: transparent;
  flex-shrink: 0;
}

.ren-menubar-checkbox[aria-checked="true"]::before {
  content: '✓';
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.75em;
  font-weight: bold;
}

/* =================================================================
   MENUBAR RADIO (Radio Menu Item)
   ================================================================= */

.ren-menubar-radio {
  position: relative;
}

/* Radio indicator via ::before */
.ren-menubar-radio::before {
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin-inline-end: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background-color: transparent;
  flex-shrink: 0;
}

.ren-menubar-radio[aria-checked="true"]::before {
  content: '';
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 2px var(--color-surface-raised);
}

/* =================================================================
   ACCESSIBILITY & INTERACTION STATES
   ================================================================= */

/* Hover fill for interactive items */
.ren-menubar-item:not([data-disabled]):not(.ren-menubar-label) {
  user-select: none;
}

/* Focus management for submenus */
.ren-menubar-menu [role="menuitem"]:focus-visible,
.ren-menubar-menu [role="menuitemcheckbox"]:focus-visible,
.ren-menubar-menu [role="menuitemradio"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Ensure disabled items don't respond to pointer events */
.ren-menubar-item[data-disabled] {
  pointer-events: none;
}

/* Active/selected state */
.ren-menubar-item.is-focused {
  background-color: var(--color-fill-hover);
}

/* =================================================================
   MEDIA QUERIES & RESPONSIVE
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  .ren-menubar-trigger,
  .ren-menubar-item,
  .ren-menubar-menu {
    transition: none;
    animation: none;
  }
}
/* ============================================
   RenDS — Empty State Pattern
   ============================================
   Reusable pattern for empty/no-data states.
   CSS-only. No JS needed.

   Use inside any data container (table, list,
   card) when there's nothing to display.

   Inspired by Polaris: every data component
   should have a documented empty state.

   Usage:
     <div class="ren-empty-state">
       <div class="ren-empty-state-icon">📦</div>
       <h3 class="ren-empty-state-title">No products yet</h3>
       <p class="ren-empty-state-description">
         Add your first product to get started.
       </p>
       <div class="ren-empty-state-actions">
         <button class="ren-btn">Add product</button>
       </div>
     </div>

   Compact (inline):
     <div class="ren-empty-state ren-empty-state-compact">
       <p class="ren-empty-state-description">No results found.</p>
     </div>
   ============================================ */

.ren-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8) var(--space-4);
  max-width: 28rem;
  margin-inline: auto;
}

/* ─── Icon / Illustration ─── */
.ren-empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  font-size: var(--text-3xl);
  color: var(--color-text-muted);
  background-color: var(--color-fill);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

/* ─── Title ─── */
.ren-empty-state-title {
  font-size: var(--title-sm-size, var(--text-lg));
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* ─── Description ─── */
.ren-empty-state-description {
  font-size: var(--body-size);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-4);
  max-width: var(--width-prose);
}

.ren-empty-state-description:last-child {
  margin-bottom: 0;
}

/* ─── Actions ─── */
.ren-empty-state-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

/* ─── Compact variant (for inline empty states) ─── */
.ren-empty-state-compact {
  padding: var(--space-6) var(--space-4);
}

.ren-empty-state-compact .ren-empty-state-icon {
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.ren-empty-state-compact .ren-empty-state-title {
  font-size: var(--body-size);
}

.ren-empty-state-compact .ren-empty-state-description {
  font-size: var(--caption-size, var(--text-sm));
}

/* ─── Bordered variant (for use inside cards/tables) ─── */
.ren-empty-state-bordered {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  margin: var(--space-4);
}
/* Appearance API bridge */
.ren-empty-state { max-inline-size: var(--ren-empty-max-width, 24rem); padding: var(--ren-empty-padding, var(--space-10)); gap: var(--ren-empty-gap, var(--space-3)); }
.ren-empty-state .ren-empty-state-icon { inline-size: var(--ren-empty-icon-size, 3rem); block-size: var(--ren-empty-icon-size, 3rem); }
.ren-empty-state h1, .ren-empty-state h2, .ren-empty-state h3 { font-size: var(--ren-empty-title-size, var(--title-sm-size)); }
.ren-empty-state p { color: var(--ren-empty-desc-color, var(--color-text-muted)); }
/* ============================================
   RenDS — Carbon for AI Patterns
   ============================================
   Design patterns for AI-generated content.
   Inspired by IBM Carbon for AI.

   Components:
   - AI Message bubble (streaming + complete)
   - AI Typing indicator
   - AI Citation / Source reference
   - AI Confidence indicator
   - AI Regenerate action
   - AI Prompt input
   - AI Slug (inline AI label)

   All CSS-only where possible, minimal JS for
   streaming text animation.
   ============================================ */

/* ═══════════════════════════════════════════════
   AI SLUG — Inline "AI" label
   ═══════════════════════════════════════════════ */
.ren-ai-slug {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--caption-sm-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ai);
  background: color-mix(in srgb, var(--color-ai) 10%, transparent);
  border-radius: var(--radius-sm);
  line-height: 1;
}

.ren-ai-slug::before {
  content: '✦';
  font-size: 0.75em;
}

/* ═══════════════════════════════════════════════
   AI MESSAGE — Chat bubble for AI responses
   ═══════════════════════════════════════════════ */
.ren-ai-message {
  position: relative;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-ai-subtle) 70%, var(--color-surface-raised));
  border: var(--stroke-1) solid var(--color-border);
  line-height: var(--leading-relaxed);
}

.ren-ai-message-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--label-size);
}

.ren-ai-message-content {
  font-size: var(--body-size);
  color: var(--color-text);
}

.ren-ai-message-content p:last-child {
  margin-bottom: 0;
}

.ren-ai-message-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--stroke-1) solid var(--color-border-muted);
  font-size: var(--caption-size);
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════
   AI STREAMING — Typing animation
   ═══════════════════════════════════════════════ */
.ren-ai-streaming .ren-ai-message-content::after {
  content: '▊';
  display: inline;
  animation: ren-ai-blink 0.8s step-end infinite;
  color: var(--color-ai);
  margin-inline-start: 1px;
}

@keyframes ren-ai-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ren-ai-streaming .ren-ai-message-content::after {
    animation: none;
    opacity: 0.7;
  }
}

/* ═══════════════════════════════════════════════
   AI TYPING INDICATOR — "AI is thinking..."
   ═══════════════════════════════════════════════ */
.ren-ai-typing {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--caption-size);
  color: var(--color-text-muted);
}

.ren-ai-typing-dots {
  display: inline-flex;
  gap: 3px;
}

.ren-ai-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-ai);
  animation: ren-ai-dot-bounce 1.4s ease-in-out infinite;
}

.ren-ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ren-ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ren-ai-dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-4px); opacity: 1; }
}

@keyframes ren-ai-dot-fade {
  0%, 80%, 100% { opacity: 0.3; }
  40%           { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ren-ai-typing-dots span {
    animation: ren-ai-dot-fade 1.4s ease-in-out infinite;
  }
}

/* ═══════════════════════════════════════════════
   AI CITATION — Source reference
   ═══════════════════════════════════════════════ */
.ren-ai-citation {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--caption-sm-size);
  font-weight: var(--weight-medium);
  color: var(--color-ai);
  background: color-mix(in srgb, var(--color-ai) 8%, transparent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-tactile) var(--ease-enter);
  vertical-align: super;
  line-height: 1;
}

.ren-ai-citation:hover {
  background: color-mix(in srgb, var(--color-ai) 14%, transparent);
}

/* Citation list at bottom of message */
.ren-ai-sources {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--stroke-1) solid var(--color-border-muted);
}

.ren-ai-source {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  font-size: var(--caption-size);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--duration-tactile) var(--ease-enter);
}

.ren-ai-source:hover {
  background: var(--color-fill);
}

.ren-ai-source-number {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--caption-sm-size);
  font-weight: var(--weight-bold);
  color: var(--color-ai);
  background: color-mix(in srgb, var(--color-ai) 10%, transparent);
  border-radius: var(--radius-sm);
}

.ren-ai-source-title {
  font-weight: var(--weight-medium);
}

.ren-ai-source-url {
  color: var(--color-text-muted);
  font-size: var(--caption-sm-size);
}

/* ═══════════════════════════════════════════════
   AI CONFIDENCE — Certainty indicator
   ═══════════════════════════════════════════════ */
.ren-ai-confidence {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--caption-size);
  color: var(--color-text-muted);
}

.ren-ai-confidence-bar {
  width: 3rem;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-fill);
  overflow: hidden;
}

.ren-ai-confidence-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--duration-state) var(--ease-enter);
}

.ren-ai-confidence[data-level="high"] .ren-ai-confidence-fill {
  width: 100%;
  background: var(--color-success);
}

.ren-ai-confidence[data-level="medium"] .ren-ai-confidence-fill {
  width: 66%;
  background: var(--color-warning);
}

.ren-ai-confidence[data-level="low"] .ren-ai-confidence-fill {
  width: 33%;
  background: var(--color-danger);
}

/* ═══════════════════════════════════════════════
   AI ACTIONS — Regenerate, Copy, Feedback
   ═══════════════════════════════════════════════ */
.ren-ai-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ren-ai-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--caption-size);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-tactile) var(--ease-enter);
  min-height: var(--size-sm);
}

.ren-ai-action:hover {
  color: var(--color-text);
  background: var(--color-fill);
}

.ren-ai-action:active {
  transform: scale(0.95);
}

.ren-ai-action[data-active="true"] {
  color: var(--color-ai);
}

/* Feedback buttons (thumbs up/down) */
.ren-ai-action-thumbs {
  display: inline-flex;
  gap: 0;
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ren-ai-action-thumbs .ren-ai-action {
  border-radius: 0;
  padding: var(--space-1) var(--space-2);
}

.ren-ai-action-thumbs .ren-ai-action + .ren-ai-action {
  border-inline-start: var(--stroke-1) solid var(--color-border);
}

/* ═══════════════════════════════════════════════
   AI PROMPT INPUT — Chat-style input
   ═══════════════════════════════════════════════ */
.ren-ai-prompt {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  transition: border-color var(--duration-tactile) var(--ease-enter);
}

.ren-ai-prompt:focus-within {
  border-color: var(--color-ai);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-ai) 15%, transparent);
}

.ren-ai-prompt-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--body-size);
  color: var(--color-text);
  resize: none;
  outline: none;
  min-height: 1.5rem;
  max-height: 8rem;
  field-sizing: content;
  line-height: var(--leading-normal);
}

.ren-ai-prompt-input::placeholder {
  color: var(--color-text-muted);
}

.ren-ai-prompt-send {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-md);
  height: var(--size-md);
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-ai);
  color: var(--color-on-ai);
  cursor: pointer;
  transition: all var(--duration-tactile) var(--ease-enter);
  font-size: var(--text-lg);
}

.ren-ai-prompt-send:hover {
  background: var(--color-ai-hover);
  transform: scale(1.05);
}

.ren-ai-prompt-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* ═══════════════════════════════════════════════
   AI SKELETON — Loading placeholder for AI
   ═══════════════════════════════════════════════ */
.ren-ai-skeleton {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-ai-subtle) 55%, var(--color-surface-raised));
  border: var(--stroke-1) solid var(--color-border-muted);
}

.ren-ai-skeleton-line {
  height: 0.875rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-fill) 25%,
    color-mix(in srgb, var(--color-ai) 6%, var(--color-fill)) 50%,
    var(--color-fill) 75%
  );
  background-size: 200% 100%;
  animation: ren-ai-shimmer 1.5s ease-in-out infinite;
}

.ren-ai-skeleton-line + .ren-ai-skeleton-line {
  margin-top: var(--space-2);
}

.ren-ai-skeleton-line:last-child {
  width: 60%;
}

@keyframes ren-ai-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ren-ai-skeleton-line {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════
   AI ERROR — Message failure state
   ═══════════════════════════════════════════════ */
.ren-ai-error {
  position: relative;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-danger) 6%, var(--color-surface-raised));
  border: var(--stroke-1) solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  display: grid;
  gap: var(--space-2);
}

.ren-ai-error-message {
  color: var(--color-text);
  font-size: var(--body-size);
  line-height: 1.5;
}

.ren-ai-error-message::before {
  content: '⚠ ';
  color: var(--color-danger);
  margin-inline-end: var(--space-1);
}

/* ═══════════════════════════════════════════════
   AI ACTION VARIANTS — Regenerate, edit-and-resend
   These extend the existing .ren-ai-action base.
   ═══════════════════════════════════════════════ */
.ren-ai-action-regenerate::before {
  content: '↻';
  margin-inline-end: var(--space-1);
  font-size: 1.1em;
  display: inline-block;
  /* Subtle hint that this re-runs inference */
  transition: transform var(--duration-state, 200ms) var(--ease-enter, ease);
}

.ren-ai-action-regenerate:hover::before {
  transform: rotate(-45deg);
}

.ren-ai-action-edit::before {
  content: '✎';
  margin-inline-end: var(--space-1);
  font-size: 1.05em;
}

@media (prefers-reduced-motion: reduce) {
  .ren-ai-action-regenerate::before {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════
   AI FILE CHIP — Uploaded file reference
   Compact pill showing a file the user attached,
   with icon, name, size, and remove affordance.
   ═══════════════════════════════════════════════ */
.ren-ai-file-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface-raised);
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--caption-size);
  max-width: 220px;
}

.ren-ai-file-chip-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--color-text-muted);
  display: grid;
  place-items: center;
}

.ren-ai-file-chip-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.ren-ai-file-chip-size {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--caption-sm-size);
}

.ren-ai-file-chip-remove {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.ren-ai-file-chip-remove:hover,
.ren-ai-file-chip-remove:focus-visible {
  background: var(--color-fill);
  color: var(--color-text);
}

.ren-ai-file-chip-remove:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════
   AI TOOL CALL — Model invoking a tool / function
   Collapsible block built on native <details>
   so JS is optional. Status via data-status.
   ═══════════════════════════════════════════════ */
.ren-ai-tool-call {
  border: var(--stroke-1) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  margin-block: var(--space-2);
  overflow: hidden;
}

.ren-ai-tool-call-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken);
  font-size: var(--caption-size);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.ren-ai-tool-call-header::-webkit-details-marker { display: none; }

.ren-ai-tool-call-header::before {
  content: '▸';
  font-size: 0.75em;
  color: var(--color-text-muted);
  transition: transform var(--duration-state, 200ms) var(--ease-enter, ease);
}

.ren-ai-tool-call[open] > .ren-ai-tool-call-header::before {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .ren-ai-tool-call-header::before {
    transition: none;
  }
}

.ren-ai-tool-call-name {
  font-family: var(--font-mono);
  color: var(--color-text);
}

.ren-ai-tool-call-status {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--caption-sm-size);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: var(--stroke-1) solid transparent;
}

.ren-ai-tool-call[data-status="pending"] .ren-ai-tool-call-status {
  color: var(--color-text-muted);
  background: var(--color-fill);
}

.ren-ai-tool-call[data-status="running"] .ren-ai-tool-call-status {
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
}

.ren-ai-tool-call[data-status="success"] .ren-ai-tool-call-status {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
}

.ren-ai-tool-call[data-status="error"] .ren-ai-tool-call-status {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
}

.ren-ai-tool-call-args,
.ren-ai-tool-call-result {
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--caption-size);
  line-height: 1.5;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  overflow-x: auto;
}

.ren-ai-tool-call-args {
  border-bottom: var(--stroke-1) solid var(--color-border-muted);
}

.ren-ai-tool-call-result {
  background: var(--color-surface);
}

.ren-ai-tool-call[data-status="error"] .ren-ai-tool-call-result {
  background: color-mix(in srgb, var(--color-danger) 4%, var(--color-surface));
  color: var(--color-text);
}
/* ============================================
   RenDS — All Components (CSS)
   ============================================
   Import this file to get all component styles.
   JS files are imported separately as needed.
   ============================================ */

/* ─── Primitives (Atoms) ─── */




















/* ─── Composites (Molecules) ─── */




























/* ─── Patterns (Organisms) ─── */