/* Default colour ramps - the token layer petal_components styles against.
 *
 * These make a fresh install work out of the box (blue primary, pink
 * secondary, semantic hues, zinc gray). Override any ramp by defining the
 * same --color-{role}-{stop} variables in an @theme block AFTER this import
 * - later definitions win, so your colors.css stays the source of truth.
 * Values are the Tailwind v4 palette.
 */
@theme {
  --color-primary-50: oklch(97% 0.014 254.604);
  --color-primary-100: oklch(93.2% 0.032 255.585);
  --color-primary-200: oklch(88.2% 0.059 254.128);
  --color-primary-300: oklch(80.9% 0.105 251.813);
  --color-primary-400: oklch(70.7% 0.165 254.624);
  --color-primary-500: oklch(62.3% 0.214 259.815);
  --color-primary-600: oklch(54.6% 0.245 262.881);
  --color-primary-700: oklch(48.8% 0.243 264.376);
  --color-primary-800: oklch(42.4% 0.199 265.638);
  --color-primary-900: oklch(37.9% 0.146 265.522);
  --color-primary-950: oklch(28.2% 0.091 267.935);

  --color-secondary-50: oklch(97.1% 0.014 343.198);
  --color-secondary-100: oklch(94.8% 0.028 342.258);
  --color-secondary-200: oklch(89.9% 0.061 343.231);
  --color-secondary-300: oklch(82.3% 0.12 346.018);
  --color-secondary-400: oklch(71.8% 0.202 349.761);
  --color-secondary-500: oklch(65.6% 0.241 354.308);
  --color-secondary-600: oklch(59.2% 0.249 0.584);
  --color-secondary-700: oklch(52.5% 0.223 3.958);
  --color-secondary-800: oklch(45.9% 0.187 3.815);
  --color-secondary-900: oklch(40.8% 0.153 2.432);
  --color-secondary-950: oklch(28.4% 0.109 3.907);

  --color-info-50: oklch(97.7% 0.013 236.62);
  --color-info-100: oklch(95.1% 0.026 236.824);
  --color-info-200: oklch(90.1% 0.058 230.902);
  --color-info-300: oklch(82.8% 0.111 230.318);
  --color-info-400: oklch(74.6% 0.16 232.661);
  --color-info-500: oklch(68.5% 0.169 237.323);
  --color-info-600: oklch(58.8% 0.158 241.966);
  --color-info-700: oklch(50% 0.134 242.749);
  --color-info-800: oklch(44.3% 0.11 240.79);
  --color-info-900: oklch(39.1% 0.09 240.876);
  --color-info-950: oklch(29.3% 0.066 243.157);

  --color-success-50: oklch(98.2% 0.018 155.826);
  --color-success-100: oklch(96.2% 0.044 156.743);
  --color-success-200: oklch(92.5% 0.084 155.995);
  --color-success-300: oklch(87.1% 0.15 154.449);
  --color-success-400: oklch(79.2% 0.209 151.711);
  --color-success-500: oklch(72.3% 0.219 149.579);
  --color-success-600: oklch(62.7% 0.194 149.214);
  --color-success-700: oklch(52.7% 0.154 150.069);
  --color-success-800: oklch(44.8% 0.119 151.328);
  --color-success-900: oklch(39.3% 0.095 152.535);
  --color-success-950: oklch(26.6% 0.065 152.934);

  --color-warning-50: oklch(98.7% 0.026 102.212);
  --color-warning-100: oklch(97.3% 0.071 103.193);
  --color-warning-200: oklch(94.5% 0.129 101.54);
  --color-warning-300: oklch(90.5% 0.182 98.111);
  --color-warning-400: oklch(85.2% 0.199 91.936);
  --color-warning-500: oklch(79.5% 0.184 86.047);
  --color-warning-600: oklch(68.1% 0.162 75.834);
  --color-warning-700: oklch(55.4% 0.135 66.442);
  --color-warning-800: oklch(47.6% 0.114 61.907);
  --color-warning-900: oklch(42.1% 0.095 57.708);
  --color-warning-950: oklch(28.6% 0.066 53.813);

  --color-danger-50: oklch(97.1% 0.013 17.38);
  --color-danger-100: oklch(93.6% 0.032 17.717);
  --color-danger-200: oklch(88.5% 0.062 18.334);
  --color-danger-300: oklch(80.8% 0.114 19.571);
  --color-danger-400: oklch(70.4% 0.191 22.216);
  --color-danger-500: oklch(63.7% 0.237 25.331);
  --color-danger-600: oklch(57.7% 0.245 27.325);
  --color-danger-700: oklch(50.5% 0.213 27.518);
  --color-danger-800: oklch(44.4% 0.177 26.899);
  --color-danger-900: oklch(39.6% 0.141 25.723);
  --color-danger-950: oklch(25.8% 0.092 26.042);

  --color-gray-50: oklch(98.5% 0 0);
  --color-gray-100: oklch(96.7% 0.001 286.375);
  --color-gray-200: oklch(92% 0.004 286.32);
  --color-gray-300: oklch(87.1% 0.006 286.286);
  --color-gray-400: oklch(70.5% 0.015 286.067);
  --color-gray-500: oklch(55.2% 0.016 285.938);
  --color-gray-600: oklch(44.2% 0.017 285.786);
  --color-gray-700: oklch(37% 0.013 285.805);
  --color-gray-800: oklch(27.4% 0.006 286.033);
  --color-gray-900: oklch(21% 0.006 285.885);
  --color-gray-950: oklch(14.1% 0.005 285.823);
}

@layer components {
  /* Container */

  .pc-container {
    @apply w-full mx-auto sm:px-6 lg:px-8;
  }
  .pc-container--sm {
    @apply max-w-3xl;
  }
  .pc-container--md {
    @apply max-w-5xl;
  }
  .pc-container--lg {
    @apply max-w-7xl;
  }
  .pc-container--xl {
    @apply max-w-[85rem];
  }
  .pc-container--full {
    @apply max-w-full;
  }
  .pc-container--mobile-padded {
    @apply max-sm:px-4;
  }

  /* Buttons (New) */

  .pc-button {
    @apply inline-flex items-center justify-center gap-2 font-medium whitespace-nowrap select-none transition-all duration-200 ease-out border focus-visible:ring-2 focus-visible:ring-primary-500/50 active:scale-[0.98];
    border-radius: var(--pc-radius, 0.625rem);
  }

  /* Buttons - sizes */

  .pc-button--xs {
    @apply text-xs leading-4 px-2.5 py-1.5;
  }
  .pc-button--sm {
    @apply px-3 py-2 text-sm leading-4;
  }
  .pc-button--md {
    @apply px-4 py-2 text-sm leading-5;
  }
  .pc-button--lg {
    @apply px-4 py-2 text-base leading-6;
  }
  .pc-button--xl {
    @apply px-6 py-3 text-base leading-6;
  }
  /* Square icon-only button; matches md button height. */
  .pc-button--icon {
    @apply p-2;
  }

  /* Buttons - border radius */
  .pc-button--radius-none {
    @apply rounded-none;
  }

  .pc-button--radius-sm {
    @apply rounded;
  }

  .pc-button--radius-md {
    @apply rounded-md;
  }

  .pc-button--radius-lg {
    @apply rounded-lg;
  }

  .pc-button--radius-xl {
    @apply rounded-xl;
  }

  .pc-button--radius-full {
    @apply rounded-full;
  }

  /* Buttons - colors */

  .pc-button--primary {
    @apply border-transparent bg-primary-600 hover:bg-primary-700 active:bg-primary-800 shadow-xs;
    color: var(--pc-button-solid-fg, #fff);
  }
  .pc-button--primary-light {
    @apply bg-primary-100 text-primary-800 border-transparent hover:bg-primary-200 active:bg-primary-300 shadow-xs dark:bg-primary-200 dark:text-primary-800 dark:hover:brightness-95 dark:active:brightness-90;
  }
  .pc-button--primary-soft {
    @apply bg-primary-100 text-primary-800 border-transparent hover:bg-primary-200 active:bg-primary-300 shadow-xs dark:bg-primary-500/15 dark:text-primary-300 dark:hover:bg-primary-500/25 dark:active:bg-primary-500/30;
  }
  .pc-button--primary-outline {
    @apply bg-transparent border-primary-600/30 text-primary-700 shadow-xs hover:bg-primary-50 hover:border-primary-600/50 hover:text-primary-800 active:bg-primary-100 dark:bg-gray-400/8 dark:border-primary-500/40 dark:text-primary-300 dark:hover:bg-primary-500/10 dark:hover:text-primary-300 dark:hover:border-primary-500/60 dark:active:bg-primary-500/20;
  }
  .pc-button--primary-inverted {
    @apply border-primary-400 dark:border-primary-400 dark:hover:border-primary-700 dark:hover:text-white dark:hover:bg-primary-700 dark:text-primary-400 hover:border-primary-600 text-primary-600 hover:text-white active:bg-primary-700 hover:bg-primary-600;
  }
  .pc-button--primary-shadow {
    @apply text-white border-transparent shadow-xl bg-primary-600 hover:bg-primary-700 active:bg-primary-800 shadow-primary-500/30 dark:hover:shadow-primary-600/30 dark:active:shadow-primary-700/30;
  }
  .pc-button--primary-ghost {
    @apply bg-transparent border-transparent text-primary-700 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 dark:text-primary-300 dark:hover:bg-primary-500/15 dark:hover:text-primary-300 dark:active:bg-primary-500/20;
  }
  .pc-button--secondary {
    @apply text-white border-transparent bg-secondary-600 hover:bg-secondary-700 active:bg-secondary-800 shadow-xs;
  }
  .pc-button--secondary-light {
    @apply bg-secondary-100 text-secondary-800 border-transparent hover:bg-secondary-200 active:bg-secondary-300 shadow-xs dark:bg-secondary-200 dark:text-secondary-800 dark:hover:brightness-95 dark:active:brightness-90;
  }
  .pc-button--secondary-soft {
    @apply bg-secondary-100 text-secondary-800 border-transparent hover:bg-secondary-200 active:bg-secondary-300 shadow-xs dark:bg-secondary-500/15 dark:text-secondary-300 dark:hover:bg-secondary-500/25 dark:active:bg-secondary-500/30;
  }
  .pc-button--secondary-outline {
    @apply bg-transparent border-secondary-600/30 text-secondary-700 shadow-xs hover:bg-secondary-50 hover:border-secondary-600/50 hover:text-secondary-800 active:bg-secondary-100 dark:bg-gray-400/8 dark:border-secondary-500/40 dark:text-secondary-300 dark:hover:bg-secondary-500/10 dark:hover:text-secondary-300 dark:hover:border-secondary-500/60 dark:active:bg-secondary-500/20;
  }
  .pc-button--secondary-inverted {
    @apply border-secondary-400 dark:border-secondary-400 dark:hover:border-secondary-700 dark:hover:text-white dark:hover:bg-secondary-700 dark:text-secondary-400 hover:border-secondary-600 text-secondary-600 hover:text-white active:bg-secondary-700 hover:bg-secondary-600;
  }
  .pc-button--secondary-shadow {
    @apply text-white border-transparent shadow-xl bg-secondary-600 hover:bg-secondary-700 active:bg-secondary-800 shadow-secondary-500/30 dark:hover:shadow-secondary-600/30 dark:active:shadow-secondary-700/30;
  }
  .pc-button--secondary-ghost {
    @apply bg-transparent border-transparent text-secondary-700 hover:bg-secondary-100 hover:text-secondary-800 active:bg-secondary-200 dark:text-secondary-300 dark:hover:bg-secondary-500/15 dark:hover:text-secondary-300 dark:active:bg-secondary-500/20;
  }
  .pc-button--white {
    @apply text-gray-700 bg-white border-gray-300 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 active:border-gray-400 active:bg-gray-200 active:text-black dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent;
  }
  .pc-button--white-outline {
    @apply bg-transparent border-gray-300 text-gray-700 shadow-xs hover:bg-gray-100 hover:text-gray-900 active:bg-gray-200 dark:border-gray-400/25 dark:bg-gray-400/8 dark:text-gray-200 dark:hover:bg-gray-400/17 dark:hover:text-gray-50 dark:active:bg-gray-400/25;
  }
  .pc-button--white-inverted {
    @apply text-gray-600 border-gray-400 dark:border-white dark:hover:border-gray-700 dark:hover:text-black dark:hover:bg-white dark:text-gray-300 hover:border-gray-600 hover:text-black active:bg-gray-700 hover:bg-white;
  }
  .pc-button--white-shadow {
    @apply text-gray-700 bg-white border-gray-300 shadow-xl hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 active:border-gray-400 active:bg-gray-200 dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent active:text-black shadow-gray-500/30 dark:shadow-gray-200/30 dark:hover:shadow-gray-300/30 dark:active:shadow-gray-400/30;
  }
  .pc-button--pure-white {
    @apply text-gray-700 bg-white border-white hover:text-gray-900 hover:border-transparent hover:bg-gray-50 active:border-transparent active:bg-gray-200 active:text-black dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent;
  }
  .pc-button--info {
    @apply text-white border-transparent bg-info-600 hover:bg-info-700 active:bg-info-800 shadow-xs;
  }
  .pc-button--info-light {
    @apply bg-info-100 text-info-800 border-transparent hover:bg-info-200 active:bg-info-300 shadow-xs dark:bg-info-200 dark:text-info-800 dark:hover:bg-info-300 dark:active:bg-info-400;
  }
  .pc-button--info-soft {
    @apply bg-info-100 text-info-800 border-transparent hover:bg-info-200 active:bg-info-300 shadow-xs dark:bg-info-500/15 dark:text-info-300 dark:hover:bg-info-500/25 dark:active:bg-info-500/30;
  }
  .pc-button--info-outline {
    @apply bg-transparent border-info-600/30 text-info-700 shadow-xs hover:bg-info-50 hover:border-info-600/50 hover:text-info-800 active:bg-info-100 dark:bg-gray-400/8 dark:border-info-500/40 dark:text-info-300 dark:hover:bg-info-500/10 dark:hover:text-info-300 dark:hover:border-info-500/60 dark:active:bg-info-500/20;
  }
  .pc-button--info-inverted {
    @apply text-info-600 border-info-400 dark:border-info-400 dark:hover:border-info-700 dark:hover:text-white dark:hover:bg-info-700 dark:text-info-400 hover:border-info-600 hover:text-white active:bg-info-800 hover:bg-info-600;
  }
  .pc-button--info-shadow {
    @apply text-white border-transparent shadow-xl bg-info-600 hover:bg-info-700 active:bg-info-800 shadow-info-500/30 dark:hover:shadow-info-600/30 dark:active:shadow-info-700/30;
  }
  .pc-button--info-ghost {
    @apply bg-transparent border-transparent text-info-700 hover:bg-info-100 hover:text-info-800 active:bg-info-200 dark:text-info-300 dark:hover:bg-info-500/15 dark:hover:text-info-300 dark:active:bg-info-500/20;
  }
  .pc-button--success {
    @apply text-white border-transparent bg-success-600 hover:bg-success-700 active:bg-success-800 shadow-xs;
  }
  .pc-button--success-light {
    @apply bg-success-100 text-success-800 border-transparent hover:bg-success-200 active:bg-success-300 shadow-xs dark:bg-success-200 dark:text-success-800 dark:hover:bg-success-300 dark:active:bg-success-400;
  }
  .pc-button--success-soft {
    @apply bg-success-100 text-success-800 border-transparent hover:bg-success-200 active:bg-success-300 shadow-xs dark:bg-success-500/15 dark:text-success-300 dark:hover:bg-success-500/25 dark:active:bg-success-500/30;
  }
  .pc-button--success-outline {
    @apply bg-transparent border-success-600/30 text-success-700 shadow-xs hover:bg-success-50 hover:border-success-600/50 hover:text-success-800 active:bg-success-100 dark:bg-gray-400/8 dark:border-success-500/40 dark:text-success-300 dark:hover:bg-success-500/10 dark:hover:text-success-300 dark:hover:border-success-500/60 dark:active:bg-success-500/20;
  }
  .pc-button--success-inverted {
    @apply text-success-600 border-success-400 dark:border-success-400 dark:hover:border-success-700 dark:hover:text-white dark:hover:bg-success-700 dark:text-success-400 hover:border-success-600 hover:text-white active:bg-success-800 hover:bg-success-600;
  }
  .pc-button--success-shadow {
    @apply text-white border-transparent shadow-xl bg-success-600 hover:bg-success-700 active:bg-success-800 shadow-success-500/30 dark:hover:shadow-success-600/30 dark:active:shadow-success-700/30;
  }
  .pc-button--success-ghost {
    @apply bg-transparent border-transparent text-success-700 hover:bg-success-100 hover:text-success-800 active:bg-success-200 dark:text-success-300 dark:hover:bg-success-500/15 dark:hover:text-success-300 dark:active:bg-success-500/20;
  }
  .pc-button--warning {
    @apply text-white border-transparent bg-warning-600 hover:bg-warning-700 active:bg-warning-800 shadow-xs;
  }
  .pc-button--warning-light {
    @apply bg-warning-100 text-warning-800 border-transparent hover:bg-warning-200 active:bg-warning-300 shadow-xs dark:bg-warning-200 dark:text-warning-800 dark:hover:bg-warning-300 dark:active:bg-warning-400;
  }
  .pc-button--warning-soft {
    @apply bg-warning-100 text-warning-800 border-transparent hover:bg-warning-200 active:bg-warning-300 shadow-xs dark:bg-warning-500/15 dark:text-warning-300 dark:hover:bg-warning-500/25 dark:active:bg-warning-500/30;
  }
  .pc-button--warning-outline {
    @apply bg-transparent border-warning-600/30 text-warning-700 shadow-xs hover:bg-warning-50 hover:border-warning-600/50 hover:text-warning-800 active:bg-warning-100 dark:bg-gray-400/8 dark:border-warning-500/40 dark:text-warning-300 dark:hover:bg-warning-500/10 dark:hover:text-warning-300 dark:hover:border-warning-500/60 dark:active:bg-warning-500/20;
  }
  .pc-button--warning-inverted {
    @apply text-warning-600 border-warning-400 dark:border-warning-400 dark:hover:border-warning-700 dark:hover:text-white dark:hover:bg-warning-700 dark:text-warning-400 hover:border-warning-600 hover:text-white active:bg-warning-800 hover:bg-warning-600;
  }
  .pc-button--warning-shadow {
    @apply text-white border-transparent shadow-xl bg-warning-600 hover:bg-warning-700 active:bg-warning-800 shadow-warning-500/30 dark:hover:shadow-warning-600/30 dark:active:shadow-warning-700/30;
  }
  .pc-button--warning-ghost {
    @apply bg-transparent border-transparent text-warning-700 hover:bg-warning-100 hover:text-warning-800 active:bg-warning-200 dark:text-warning-300 dark:hover:bg-warning-500/15 dark:hover:text-warning-300 dark:active:bg-warning-500/20;
  }
  .pc-button--danger {
    @apply text-white border-transparent bg-danger-600 hover:bg-danger-700 active:bg-danger-800 shadow-xs;
  }
  .pc-button--danger-light {
    @apply bg-danger-100 text-danger-800 border-transparent hover:bg-danger-200 active:bg-danger-300 shadow-xs dark:bg-danger-200 dark:text-danger-800 dark:hover:bg-danger-300 dark:active:bg-danger-400;
  }
  .pc-button--danger-soft {
    @apply bg-danger-100 text-danger-800 border-transparent hover:bg-danger-200 active:bg-danger-300 shadow-xs dark:bg-danger-500/15 dark:text-danger-300 dark:hover:bg-danger-500/25 dark:active:bg-danger-500/30;
  }
  .pc-button--danger-outline {
    @apply bg-transparent border-danger-600/30 text-danger-700 shadow-xs hover:bg-danger-50 hover:border-danger-600/50 hover:text-danger-800 active:bg-danger-100 dark:bg-gray-400/8 dark:border-danger-500/40 dark:text-danger-300 dark:hover:bg-danger-500/10 dark:hover:text-danger-300 dark:hover:border-danger-500/60 dark:active:bg-danger-500/20;
  }
  .pc-button--danger-inverted {
    @apply text-danger-600 border-danger-400 dark:border-danger-400 dark:hover:border-danger-700 dark:hover:text-white dark:hover:bg-danger-700 dark:text-danger-400 hover:border-danger-600 hover:text-white active:bg-danger-800 hover:bg-danger-600;
  }
  .pc-button--danger-shadow {
    @apply text-white border-transparent shadow-xl bg-danger-600 hover:bg-danger-700 active:bg-danger-800 shadow-danger-500/30 dark:hover:shadow-danger-600/30 dark:active:shadow-danger-700/30;
  }
  .pc-button--danger-ghost {
    @apply bg-transparent border-transparent text-danger-700 hover:bg-danger-100 hover:text-danger-800 active:bg-danger-200 dark:text-danger-300 dark:hover:bg-danger-500/15 dark:hover:text-danger-300 dark:active:bg-danger-500/20;
  }
  .pc-button--gray {
    @apply text-white border-transparent bg-gray-600 hover:bg-gray-700 active:bg-gray-800 shadow-xs;
  }
  .pc-button--gray-light {
    @apply bg-gray-100 text-gray-800 border-transparent hover:bg-gray-200 active:bg-gray-300 shadow-xs dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300 dark:active:bg-gray-400;
  }
  .pc-button--gray-soft {
    @apply bg-gray-100 text-gray-800 border-transparent hover:bg-gray-200 active:bg-gray-300 shadow-xs dark:bg-gray-500/15 dark:text-gray-300 dark:hover:bg-gray-500/25 dark:active:bg-gray-500/30;
  }
  .pc-button--gray-outline {
    @apply bg-transparent border-gray-300 text-gray-700 shadow-xs hover:bg-gray-100 hover:text-gray-900 active:bg-gray-200 dark:border-gray-400/25 dark:bg-gray-400/8 dark:text-gray-200 dark:hover:bg-gray-400/17 dark:hover:text-gray-50 dark:active:bg-gray-400/25;
  }
  .pc-button--gray-inverted {
    @apply text-gray-600 border-gray-400 dark:border-gray-400 dark:hover:border-gray-700 dark:hover:text-white dark:hover:bg-gray-700 dark:text-gray-400 hover:border-gray-600 hover:text-white active:bg-gray-700 hover:bg-gray-600;
  }
  .pc-button--gray-shadow {
    @apply text-white bg-gray-600 border-transparent shadow-xl active:bg-gray-800 hover:bg-gray-700 shadow-gray-500/30 dark:hover:shadow-gray-600/30 dark:active:shadow-gray-700/30;
  }
  .pc-button--gray-ghost {
    @apply bg-transparent border-transparent text-gray-700 hover:bg-gray-100 hover:text-gray-900 active:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-400/17 dark:hover:text-gray-50 dark:active:bg-gray-400/25;
  }
  .pc-button--light {
    @apply text-gray-900 bg-white border-gray-300 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 active:border-gray-400 active:bg-gray-200 active:text-black dark:bg-gray-800 dark:text-white dark:hover:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:active:border-gray-700 dark:active:bg-gray-800 dark:active:text-white;
  }
  .pc-button--light-outline {
    @apply bg-transparent border-gray-300 text-gray-700 shadow-xs hover:bg-gray-100 hover:text-gray-900 active:bg-gray-200 dark:border-gray-400/25 dark:bg-gray-400/8 dark:text-gray-200 dark:hover:bg-gray-400/17 dark:hover:text-gray-50 dark:active:bg-gray-400/25;
  }
  .pc-button--light-inverted {
    @apply text-gray-900 border-gray-300 hover:border-gray-600 hover:text-white active:bg-gray-700 hover:bg-gray-600 dark:hover:text-black dark:hover:bg-white dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:border-white dark:active:bg-gray-300 dark:active:border-gray-300;
  }
  .pc-button--light-shadow {
    @apply text-gray-700 bg-white border-gray-300 shadow-xl hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 active:border-gray-400 active:bg-gray-200 active:text-black dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:active:border-gray-700 dark:active:bg-gray-800 shadow-gray-500/30 dark:shadow-gray-600/30 dark:hover:shadow-gray-500/30 dark:active:shadow-gray-600/30;
  }
  .pc-button--dark {
    @apply text-white border-transparent bg-gray-950 dark:text-gray-950 dark:bg-white dark:hover:text-gray-900 dark:hover:bg-gray-100 dark:active:bg-gray-300 dark:active:text-black hover:bg-gray-800 active:bg-gray-900;
  }
  .pc-button--dark-outline {
    @apply bg-transparent border-gray-300 text-gray-700 shadow-xs hover:bg-gray-100 hover:text-gray-900 active:bg-gray-200 dark:border-gray-400/25 dark:bg-gray-400/8 dark:text-gray-200 dark:hover:bg-gray-400/17 dark:hover:text-gray-50 dark:active:bg-gray-400/25;
  }
  .pc-button--dark-inverted {
    @apply border-gray-950 text-gray-950 hover:border-transparent hover:text-white active:bg-gray-800 hover:bg-gray-950 dark:hover:bg-white dark:hover:text-black dark:bg-gray-950 dark:text-white dark:active:bg-gray-200 dark:active:border-gray-200 dark:border-white;
  }
  .pc-button--dark-shadow {
    @apply text-white border-transparent shadow-xl dark:text-gray-950 bg-gray-950 active:bg-gray-900 hover:bg-gray-800 dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent active:text-white shadow-gray-500/30 dark:shadow-gray-200/30 dark:hover:shadow-gray-300/30 dark:active:shadow-gray-400/30;
  }

  /* Buttons - loading */

  .pc-button--loading {
    @apply flex items-center gap-2 cursor-not-allowed whitespace-nowrap;
  }

  .pc-button__spinner-icon {
    @apply animate-spin;
  }

  /* Parent-scoped so the size wins over the heroicon mask's own
     width/height defaults regardless of stylesheet order. */
  .pc-button .pc-button__spinner-icon--xs {
    @apply w-3 h-3;
  }
  .pc-button .pc-button__spinner-icon--sm {
    @apply w-4 h-4;
  }
  .pc-button .pc-button__spinner-icon--md {
    @apply w-5 h-5;
  }
  .pc-button .pc-button__spinner-icon--lg {
    @apply w-5 h-5;
  }
  .pc-button .pc-button__spinner-icon--xl {
    @apply w-6 h-6;
  }

  /* Buttons - with icon */

  .pc-button--with-icon {
    @apply flex items-center gap-2 whitespace-nowrap;
  }

  /* Icon Button */

  .pc-icon-button {
    @apply inline-block p-2 transition-colors duration-200 ease-out;
  }

  .pc-icon-button__inner {
    @apply flex flex-col items-center;
  }

  .pc-icon-button__inner--tooltip {
    @apply relative;
  }

  .pc-icon-button__tooltip {
    @apply absolute flex-col items-center invisible mb-6 transition-opacity duration-300 -translate-y-full opacity-0 -top-1 group-hover/pc-icon-button:flex group-hover/pc-icon-button:visible group-hover/pc-icon-button:opacity-100;
  }

  .pc-icon-button__tooltip__text {
    @apply relative z-10 p-2 text-xs leading-none text-white bg-gray-900 rounded-xs shadow-lg whitespace-nowrap dark:bg-gray-700;
  }

  .pc-icon-button__tooltip__arrow {
    @apply w-3 h-3 -mt-2 rotate-45 bg-gray-900 dark:bg-gray-700;
  }

  /* Icon Buttons - colors */

  .pc-icon-button--primary {
    @apply text-primary-600 dark:text-primary-500;
  }
  .pc-icon-button--secondary {
    @apply text-secondary-600 dark:text-secondary-500;
  }
  .pc-icon-button--gray {
    @apply text-gray-600 dark:text-gray-500;
  }
  .pc-icon-button--info {
    @apply text-info-600 dark:text-info-500;
  }
  .pc-icon-button--success {
    @apply text-success-600 dark:text-success-500;
  }
  .pc-icon-button--warning {
    @apply text-warning-600 dark:text-warning-500;
  }
  .pc-icon-button--danger {
    @apply text-danger-600 dark:text-danger-500;
  }

  /* Icon Buttons - background colors */

  .pc-icon-button-bg--primary {
    @apply hover:bg-primary-50 dark:hover:bg-gray-800;
  }
  .pc-icon-button-bg--secondary {
    @apply hover:bg-secondary-50 dark:hover:bg-gray-800;
  }
  .pc-icon-button-bg--gray {
    @apply hover:bg-gray-100 dark:hover:bg-gray-800;
  }
  .pc-icon-button-bg--info {
    @apply hover:bg-info-50 dark:hover:bg-gray-800;
  }
  .pc-icon-button-bg--success {
    @apply hover:bg-success-50 dark:hover:bg-gray-800;
  }
  .pc-icon-button-bg--warning {
    @apply hover:bg-warning-50 dark:hover:bg-gray-800;
  }
  .pc-icon-button-bg--danger {
    @apply hover:bg-danger-50 dark:hover:bg-gray-800;
  }

  /* Icon Button - sizes */

  .pc-icon-button--xs {
    @apply w-9 h-9;
  }
  .pc-icon-button--sm {
    @apply w-10 h-10;
  }
  .pc-icon-button--md {
    @apply w-11 h-11;
  }
  .pc-icon-button--lg {
    @apply w-12 h-12;
  }
  .pc-icon-button--xl {
    @apply w-14 h-14;
  }

  /* Icon Buttons - border radius */
  .pc-icon-button--radius-none {
    @apply rounded-none;
  }

  .pc-icon-button--radius-sm {
    @apply rounded;
  }

  .pc-icon-button--radius-md {
    @apply rounded-md;
  }

  .pc-icon-button--radius-lg {
    @apply rounded-lg;
  }

  .pc-icon-button--radius-xl {
    @apply rounded-xl;
  }

  .pc-icon-button--radius-full {
    @apply rounded-full;
  }

  /* Icon Button - loading */

  .pc-icon-button-spinner--xs {
    @apply w-5 h-5;
  }
  .pc-icon-button-spinner--sm {
    @apply w-6 h-6;
  }
  .pc-icon-button-spinner--md {
    @apply w-7 h-7;
  }
  .pc-icon-button-spinner--lg {
    @apply w-8 h-8;
  }
  .pc-icon-button-spinner--xl {
    @apply w-10 h-10;
  }

  /* Button - disabled */

  .pc-button--disabled {
    @apply opacity-50 cursor-not-allowed active:scale-100;
  }

  /* Button Group */

  .pc-button-group {
    @apply flex w-fit items-stretch;
  }

  /* a group of groups stops fusing and gaps its clusters instead */
  .pc-button-group:has(> .pc-button-group) {
    @apply gap-2;
  }

  /* the focused child rises above its fused neighbours so its ring isn't clipped */
  .pc-button-group > :where(*) {
    @apply focus-visible:relative focus-visible:z-10;
  }

  /* inputs take the leftover rail width */
  .pc-button-group > input.pc-text-input {
    @apply min-w-0 flex-1;
  }

  /* a pressed button scaling down would crack the fused strip open */
  .pc-button-group > .pc-button {
    @apply active:scale-100;
  }

  .pc-button-group--vertical {
    @apply flex-col;
  }

  /* fuse: only the group's outer corners stay round; inner borders collapse
     to a single line (solid buttons have transparent borders - use the
     separator there) */
  .pc-button-group:not(.pc-button-group--legacy, .pc-button-group--vertical) > :not(:first-child) {
    @apply rounded-l-none border-l-0;
  }

  .pc-button-group:not(.pc-button-group--legacy, .pc-button-group--vertical) > :not(:last-child) {
    @apply rounded-r-none;
  }

  .pc-button-group--vertical > :not(:first-child) {
    @apply rounded-t-none border-t-0;
  }

  .pc-button-group--vertical > :not(:last-child) {
    @apply rounded-b-none;
  }

  .pc-button-group__separator {
    @apply w-px shrink-0 self-stretch bg-gray-300 dark:bg-gray-400/25;
  }

  /* between primary solids the hairline tints from the label colour instead */
  .pc-button--primary + .pc-button-group__separator {
    background: color-mix(in srgb, var(--pc-button-solid-fg, #fff) 25%, transparent);
  }

  .pc-button-group--vertical > .pc-button-group__separator {
    @apply h-px w-auto;
  }

  .pc-button-group__text {
    @apply flex items-center gap-2 border border-gray-300 bg-gray-50 px-3 text-sm font-medium text-gray-600 shadow-xs dark:border-gray-400/25 dark:bg-gray-400/8 dark:text-gray-300;
    border-radius: var(--pc-radius, 0.625rem);
  }

  /* a dropdown fused into the rail (split button): the component wraps its
     trigger in an intermediate div, so flex that through to stretch the
     trigger to the rail height. .pc-dropdown itself stays relative + block
     (never flex) so its absolute menu still drops below the trigger, not
     over it. Collapse classes ride on trigger_class since the group's
     :not(:first-child) rule can't reach the nested button. */
  .pc-button-group > .pc-dropdown > div:first-child {
    @apply flex h-full;
  }

  /* Button Group - legacy :button slot API (self-styled overlapping buttons) */

  .pc-button-group--legacy {
    @apply -space-x-px;
  }

  /* Button Group - Buttons */

  .pc-button-group__button {
    @apply inline-flex items-center justify-center;
  }

  /* Button Group - Default Styles */

  .pc-button-group__button--default-styles {
    @apply whitespace-nowrap;
    @apply focus:ring-gray-200 focus:z-10;
    @apply focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2;
    @apply disabled:pointer-events-none disabled:opacity-50;
  }

  /* Button Group - Default Background and Border Styles */

  .pc-button-group__button--bg-default {
    @apply bg-white hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800;
    @apply text-gray-800 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300;
  }

  .pc-button-group__button--border-default {
    @apply border border-gray-200 dark:border-gray-800;
  }

  /* Button Group - Button Sizes */

  .pc-button-group__button--xs {
    @apply text-xs px-2.5 py-1.5 leading-4;
  }

  .pc-button-group__button--sm {
    @apply px-3 py-2 text-sm leading-4;
  }

  .pc-button-group__button--md {
    @apply px-4 py-2 text-sm leading-5;
  }

  .pc-button-group__button--lg {
    @apply px-4 py-2 text-base leading-6;
  }

  .pc-button-group__button--xl {
    @apply px-6 py-3 text-base leading-6;
  }

  /* Button Group - Font Weights */

  .pc-button-group__button--font-normal {
    @apply font-normal;
  }

  .pc-button-group__button--font-medium {
    @apply font-medium;
  }

  .pc-button-group__button--font-semibold {
    @apply font-semibold;
  }

  .pc-button-group__button--font-bold {
    @apply font-bold;
  }

  /* Button Group - Button Positions */

  .pc-button-group__button--rounded {
    @apply rounded-md;
  }

  .pc-button-group__button--rounded-r-none {
    @apply rounded-r-none rounded-l-md;
  }

  .pc-button-group__button--rounded-l-none {
    @apply rounded-l-none rounded-r-md;
  }

  .pc-button-group__button--rounded-none {
    @apply rounded-none;
  }

  /* Typography */

  .pc-h1 {
    @apply scroll-m-20 text-4xl font-extrabold tracking-tight text-balance leading-tight sm:text-5xl lg:text-6xl;
  }
  .pc-h2 {
    @apply scroll-m-20 text-3xl font-semibold tracking-tight text-balance leading-tight;
  }
  .pc-h3 {
    @apply scroll-m-20 text-2xl font-semibold tracking-tight text-balance leading-snug;
  }
  .pc-h4 {
    @apply scroll-m-20 text-xl font-semibold tracking-tight text-balance leading-snug;
  }
  .pc-h5 {
    @apply scroll-m-20 text-base font-semibold leading-snug;
  }
  .pc-heading--color {
    @apply text-gray-900 dark:text-white;
  }
  .pc-heading--underline {
    @apply pb-2 border-b border-gray-200 dark:border-gray-800;
  }
  .pc-h1--margin {
    @apply mb-3;
  }
  .pc-h2--margin {
    @apply mt-12 mb-3 first:mt-0;
  }
  .pc-h3--margin {
    @apply mt-8 mb-3 first:mt-0;
  }
  .pc-h4--margin {
    @apply mt-8 mb-3 first:mt-0;
  }
  .pc-h5--margin {
    @apply mt-6 mb-3 first:mt-0;
  }
  .pc-text {
    @apply text-base leading-7 text-pretty text-gray-700 dark:text-gray-100;
  }
  .pc-p--margin {
    @apply mb-6;
  }

  /* Extended typography */
  .pc-lead {
    @apply mb-6 text-xl leading-relaxed text-gray-500 dark:text-gray-400;
  }
  .pc-blockquote {
    @apply my-6 border-l-2 border-gray-300 pl-6 italic text-gray-700 dark:border-gray-400/25 dark:text-gray-100;
  }
  .pc-inline-code {
    @apply bg-gray-100 px-[0.4rem] py-[0.2rem] font-mono text-sm font-semibold text-gray-700 dark:bg-gray-400/17 dark:text-gray-100;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.3125rem), 0.125rem);
  }
  .pc-text-muted {
    @apply text-sm text-gray-500 dark:text-gray-400;
  }
  .pc-text-large {
    @apply text-lg font-semibold text-gray-900 dark:text-white;
  }
  .pc-text-small {
    @apply text-sm font-medium leading-none text-gray-900 dark:text-white;
  }
  .pc-hr {
    @apply my-8 border-gray-200 dark:border-gray-800;
  }

  /* Badges */

  .pc-badge {
    @apply inline-flex items-center justify-center border focus:outline-hidden;
    border-radius: var(--pc-radius, 0.625rem);
  }

  /* Badges - with icon */

  .pc-badge--with-icon {
    @apply flex items-center gap-1 whitespace-nowrap;
  }

  /* Badges - sizes */

    .pc-badge--xs {
    @apply text-[0.5625rem] font-semibold px-1;
  }
  .pc-badge--sm {
    @apply text-[0.625rem] font-semibold px-1.5;
  }
  .pc-badge--md {
    @apply text-xs font-semibold px-2.5 py-0.5;
  }
  .pc-badge--lg {
    @apply text-sm font-semibold px-2.5 py-0.5;
  }
  .pc-badge--xl {
    @apply text-base font-semibold px-3 py-1;
  }

  /* Badges - colors */

  .pc-badge--primary-light {
    @apply text-primary-800 bg-primary-100 border-transparent dark:bg-primary-200;
  }
  .pc-badge--primary-soft {
    @apply text-primary-800 bg-primary-100 border-transparent dark:bg-primary-500/15 dark:text-primary-300;
  }
  .pc-badge--primary-dark {
    @apply border-transparent bg-primary-600;
    color: var(--pc-button-solid-fg, #fff);
  }
  .pc-badge--primary-outline {
    @apply bg-transparent text-primary-700 border-primary-600/30 dark:bg-gray-400/8 dark:text-primary-300 dark:border-primary-500/40;
  }

  .pc-badge--secondary-light {
    @apply text-secondary-800 bg-secondary-100 border-transparent dark:bg-secondary-200;
  }
  .pc-badge--secondary-soft {
    @apply text-secondary-800 bg-secondary-100 border-transparent dark:bg-secondary-500/15 dark:text-secondary-300;
  }
  .pc-badge--secondary-dark {
    @apply text-white bg-secondary-600 border-secondary-600;
  }
  .pc-badge--secondary-outline {
    @apply bg-transparent text-secondary-700 border-secondary-600/30 dark:bg-gray-400/8 dark:text-secondary-300 dark:border-secondary-500/40;
  }

  .pc-badge--info-light {
    @apply text-info-800 bg-info-100 border-transparent dark:bg-info-200;
  }
  .pc-badge--info-soft {
    @apply text-info-800 bg-info-100 border-transparent dark:bg-info-500/15 dark:text-info-300;
  }
  .pc-badge--info-dark {
    @apply text-white bg-info-600 border-info-600;
  }
  .pc-badge--info-outline {
    @apply bg-transparent text-info-700 border-info-600/30 dark:bg-gray-400/8 dark:text-info-300 dark:border-info-500/40;
  }

  .pc-badge--success-light {
    @apply text-success-800 bg-success-100 border-transparent dark:bg-success-200;
  }
  .pc-badge--success-soft {
    @apply text-success-800 bg-success-100 border-transparent dark:bg-success-500/15 dark:text-success-300;
  }
  .pc-badge--success-dark {
    @apply text-white bg-success-600 border-success-600;
  }
  .pc-badge--success-outline {
    @apply bg-transparent text-success-700 border-success-600/30 dark:bg-gray-400/8 dark:text-success-300 dark:border-success-500/40;
  }

  .pc-badge--warning-light {
    @apply text-warning-800 bg-warning-100 border-transparent dark:bg-warning-200;
  }
  .pc-badge--warning-soft {
    @apply text-warning-800 bg-warning-100 border-transparent dark:bg-warning-500/15 dark:text-warning-300;
  }
  .pc-badge--warning-dark {
    @apply text-white bg-warning-600 border-warning-600;
  }
  .pc-badge--warning-outline {
    @apply bg-transparent text-warning-700 border-warning-600/30 dark:bg-gray-400/8 dark:text-warning-300 dark:border-warning-500/40;
  }

  .pc-badge--danger-light {
    @apply text-danger-800 bg-danger-100 border-transparent dark:bg-danger-200;
  }
  .pc-badge--danger-soft {
    @apply text-danger-800 bg-danger-100 border-transparent dark:bg-danger-500/15 dark:text-danger-300;
  }
  .pc-badge--danger-dark {
    @apply text-white bg-danger-600 border-danger-600;
  }
  .pc-badge--danger-outline {
    @apply bg-transparent text-danger-700 border-danger-600/30 dark:bg-gray-400/8 dark:text-danger-300 dark:border-danger-500/40;
  }

  .pc-badge--gray-light {
    @apply text-gray-800 bg-gray-100 border-transparent dark:bg-gray-200;
  }
  .pc-badge--gray-soft {
    @apply text-gray-800 bg-gray-100 border-transparent dark:bg-gray-500/15 dark:text-gray-300;
  }
  .pc-badge--gray-dark {
    @apply text-white bg-gray-600 border-gray-600 dark:bg-gray-700 dark:border-gray-700;
  }
  .pc-badge--gray-outline {
    @apply bg-transparent text-gray-700 border-gray-300 dark:bg-gray-400/8 dark:text-gray-200 dark:border-gray-400/25;
  }

  /* Alerts */

  .pc-alert {
    @apply w-full grow-0;
  }
  .pc-alert__inner {
    @apply flex items-start justify-between;
  }
  .pc-alert-base-classes {
    @apply flex items-center w-full gap-3 px-4 py-3 text-sm border border-transparent focus:outline-hidden;
    border-radius: var(--pc-radius, 0.625rem);
  }
  /* Callout variant - the toast-cohesive alert: neutral panel surface,
     colour as accent (left bar + solid icon), never as paint. */
  .pc-alert--gray-callout,
  .pc-alert--info-callout,
  .pc-alert--success-callout,
  .pc-alert--warning-callout,
  .pc-alert--danger-callout {
    @apply bg-white text-gray-600 border-gray-200 border-l-[3px] dark:bg-gray-900 dark:text-gray-300 dark:border-gray-400/17;
  }

  .pc-alert--gray-callout {
    @apply border-l-gray-400 dark:border-l-gray-500;
  }

  .pc-alert--info-callout {
    @apply border-l-info-500 dark:border-l-info-500;
  }

  .pc-alert--success-callout {
    @apply border-l-success-500 dark:border-l-success-500;
  }

  .pc-alert--warning-callout {
    @apply border-l-warning-500 dark:border-l-warning-500;
  }

  .pc-alert--danger-callout {
    @apply border-l-danger-500 dark:border-l-danger-500;
  }

  [class*="-callout"] > .pc-alert__icon-container {
    @apply text-gray-400;
  }

  .pc-alert--info-callout > .pc-alert__icon-container {
    @apply text-info-500;
  }

  .pc-alert--success-callout > .pc-alert__icon-container {
    @apply text-success-500;
  }

  .pc-alert--warning-callout > .pc-alert__icon-container {
    @apply text-warning-500;
  }

  .pc-alert--danger-callout > .pc-alert__icon-container {
    @apply text-danger-500;
  }

  [class*="-callout"] .pc-alert__heading {
    @apply text-gray-900 dark:text-gray-100;
  }

  /* Heading + body hierarchy. Neutral surfaces (callout) split into
     title-strength gray vs muted gray, like the toast. Tinted surfaces
     keep the monochrome wash and step the body down WITHIN the tint -
     a neutral gray body on a coloured surface would fragment it. */
  .pc-alert-base-classes:not([class*="-callout"]):has(.pc-alert__heading) .pc-alert__label {
    opacity: 0.85;
  }

  .pc-alert__actions {
    @apply flex flex-wrap items-center gap-2 mt-2.5 mb-1;
  }

  .pc-alert__heading {
    @apply pt-1 font-bold;
  }
  .pc-alert__label {
    @apply py-1 font-medium;
  }
  /* House close-button grammar (corner dismissers): a bare glyph that
     brightens on hover - no wash box, so nothing can sit misaligned
     against text. The generous hit area is an invisible ::before
     extension, so it never participates in layout. Focus-visible ring;
     never dims. Alert glyphs keep their per-colour tinted hovers. */
  .pc-alert__dismiss-button {
    @apply relative flex items-center h-7 hover:cursor-pointer opacity-60 transition duration-150 hover:opacity-100 rounded-sm;
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50;
  }

  .pc-alert__dismiss-button::before {
    content: "";
    @apply absolute -inset-2;
  }

  /* Alerts - colors and variants */

  /* Info variants */
  .pc-alert--info-light {
    @apply text-info-800 bg-info-100 dark:bg-info-200 dark:text-info-800;
  }
  .pc-alert--info-soft {
    @apply text-info-800 bg-info-100 dark:bg-info-500/15 dark:text-info-300;
  }
  .pc-alert--info-dark {
    @apply text-white bg-info-600;
  }
  .pc-alert--info-outline {
    @apply bg-transparent text-info-700 border-info-600/30 dark:bg-gray-400/8 dark:text-info-300 dark:border-info-500/40;
  }

  /* Success variants */
  .pc-alert--success-light {
    @apply text-success-800 bg-success-100 dark:bg-success-200 dark:text-success-800;
  }
  .pc-alert--success-soft {
    @apply text-success-800 bg-success-100 dark:bg-success-500/15 dark:text-success-300;
  }
  .pc-alert--success-dark {
    @apply text-white bg-success-600;
  }
  .pc-alert--success-outline {
    @apply bg-transparent text-success-700 border-success-600/30 dark:bg-gray-400/8 dark:text-success-300 dark:border-success-500/40;
  }

  /* Warning variants */
  .pc-alert--warning-light {
    @apply text-warning-800 bg-warning-100 dark:bg-warning-200 dark:text-warning-800;
  }
  .pc-alert--warning-soft {
    @apply text-warning-800 bg-warning-100 dark:bg-warning-500/15 dark:text-warning-300;
  }
  .pc-alert--warning-dark {
    @apply text-white bg-warning-600;
  }
  .pc-alert--warning-outline {
    @apply bg-transparent text-warning-700 border-warning-600/30 dark:bg-gray-400/8 dark:text-warning-300 dark:border-warning-500/40;
  }

  /* Danger variants */
  .pc-alert--danger-light {
    @apply text-danger-800 bg-danger-100 dark:bg-danger-200 dark:text-danger-800;
  }
  .pc-alert--danger-soft {
    @apply text-danger-800 bg-danger-100 dark:bg-danger-500/15 dark:text-danger-300;
  }
  .pc-alert--danger-dark {
    @apply text-white bg-danger-600;
  }
  .pc-alert--danger-outline {
    @apply bg-transparent text-danger-700 border-danger-600/30 dark:bg-gray-400/8 dark:text-danger-300 dark:border-danger-500/40;
  }

  /* Alerts - dismiss button variants */

  /* Info dismiss button variants */
  .pc-alert__dismiss-button--info-dark {
    @apply text-white;
  }
  .pc-alert__dismiss-button--info-outline {
    @apply text-info-700 dark:text-info-300;
  }

  /* Success dismiss button variants */
  .pc-alert__dismiss-button--success-dark {
    @apply text-white;
  }
  .pc-alert__dismiss-button--success-outline {
    @apply text-success-700 dark:text-success-300;
  }

  /* Warning dismiss button variants */
  .pc-alert__dismiss-button--warning-dark {
    @apply text-white;
  }
  .pc-alert__dismiss-button--warning-outline {
    @apply text-warning-700 dark:text-warning-300;
  }

  /* Danger dismiss button variants */
  .pc-alert__dismiss-button--danger-dark {
    @apply text-white;
  }
  .pc-alert__dismiss-button--danger-outline {
    @apply text-danger-700 dark:text-danger-300;
  }

  /* Alert - gray (monochrome) */

  .pc-alert--gray-light {
    @apply text-gray-800 bg-gray-100 dark:bg-gray-200 dark:text-gray-800;
  }
  .pc-alert--gray-soft {
    @apply text-gray-800 bg-gray-100 dark:bg-gray-500/15 dark:text-gray-300;
  }
  .pc-alert--gray-dark {
    @apply text-white bg-gray-600;
  }
  .pc-alert--gray-outline {
    @apply bg-transparent text-gray-700 border-gray-300 dark:bg-gray-400/8 dark:text-gray-200 dark:border-gray-400/25;
  }
  .pc-alert__dismiss-button--gray-dark {
    @apply text-white;
  }
  .pc-alert__dismiss-button--gray-outline {
    @apply text-gray-700 dark:text-gray-300;
  }

  /* Alerts - with icon */

  /* 20px icon, matching the toast's scale - the old 24px glyph
     dominated the row and made the spacing read airier than it is */
  .pc-alert__icon-container {
    @apply self-start shrink-0 pt-0.5 w-5 h-5;
  }

  .pc-alert__icon-container > * {
    @apply w-full h-full;
  }

  /* Forms */

  .pc-form-field-wrapper {
    @apply mb-6;
  }

  .pc-form-field-wrapper--no-margin {
    @apply mb-0;
  }

  .pc-form-field-wrapper--error input,
  .pc-form-field-wrapper--error select,
  .pc-form-field-wrapper--error textarea {
    @apply border-danger-500 ring-2 ring-danger-500/20 focus-visible:border-danger-500 focus-visible:ring-danger-500/40 dark:border-danger-500/70 dark:ring-danger-500/25 dark:focus-visible:ring-danger-500/40;
  }
  .pc-form-field-wrapper--error input[type="checkbox"] {
    @apply border-danger-500 dark:border-danger-500/70;
  }
  .pc-form-field-wrapper--error .pc-switch .pc-switch__fake-input {
    @apply border-danger-500 dark:border-danger-500/70;
  }
  .pc-form-field-wrapper--error .pc-radio-card .pc-radio-card__fake-input {
    @apply border-danger-500 dark:border-danger-500/70;
  }
  .pc-checkbox-label {
    @apply inline-flex items-start gap-2 text-sm font-medium text-gray-900 cursor-pointer dark:text-gray-200 has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed;
  }
  /* Top-align the control against the first text line (20px line, 16px box) */
  .pc-checkbox-label > .pc-checkbox,
  .pc-checkbox-label > .pc-radio {
    @apply mt-0.5 shrink-0;
  }
  /* Label + optional description stack in one text column, so a description
     indents with the label - never under the box */
  .pc-checkbox-text {
    @apply flex flex-col gap-0.5;
  }
  .pc-checkbox-text .pc-form-help-text {
    @apply mt-0 font-normal;
  }
  .pc-label {
    @apply block mb-2 text-sm font-medium text-gray-900 dark:text-gray-200;
  }
  .pc-label--for-checkbox {
    @apply mb-0! font-normal;
  }
  .pc-label--required:after {
    color: var(--color-danger-500);
    content: " *";
    display: inline;
  }
  .pc-form-field-error {
    @apply mt-1.5 text-sm text-danger-600 dark:text-danger-400;
  }
  .pc-form-help-text {
    @apply mt-2 text-sm text-gray-500 dark:text-gray-400;
  }
  .pc-time-select {
    @apply text-sm border-gray-300 rounded-md shadow-xs cursor-pointer disabled:bg-gray-100 disabled:cursor-not-allowed focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 dark:bg-gray-800 dark:text-gray-300 focus:outline-hidden;
    @apply dark:text-white;
  }
  .pc-datetime-select {
    @apply text-sm border-gray-300 rounded-md shadow-xs cursor-pointer disabled:bg-gray-100 disabled:cursor-not-allowed focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 dark:bg-gray-800 dark:text-gray-300 focus:outline-hidden;
    @apply dark:text-white;
  }
  .pc-date-select {
    @apply text-sm border-gray-300 rounded-md shadow-xs cursor-pointer disabled:bg-gray-100 disabled:cursor-not-allowed focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 dark:bg-gray-800 dark:text-gray-300 focus:outline-hidden;
    @apply dark:text-white;
  }
  .pc-switch {
    @apply relative inline-flex items-center justify-center shrink-0 cursor-pointer;
  }
  .pc-switch--xs {
    @apply w-6 h-3;
  }
  .pc-switch--sm {
    @apply w-8 h-4;
  }
  .pc-switch--md {
    @apply w-10 h-5;
  }
  .pc-switch--lg {
    @apply w-12 h-6;
  }
  .pc-switch--xl {
    @apply w-14 h-7;
  }
  .pc-switch__fake-input {
    @apply absolute mx-auto transition-colors duration-200 ease-in-out bg-gray-200 border border-transparent rounded-full pointer-events-none dark:bg-gray-400/25 peer-checked:bg-primary-600 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/50;
  }
  .pc-switch__fake-input--xs {
    @apply h-4 w-7;
  }
  .pc-switch__fake-input--sm {
    @apply h-5 w-9;
  }
  .pc-switch__fake-input--md {
    @apply h-6 w-11;
  }
  .pc-switch__fake-input--lg {
    @apply h-7 w-[3.25rem];
  }
  .pc-switch__fake-input--xl {
    @apply h-8 w-[3.75rem];
  }
  .pc-switch__fake-input-bg {
    @apply absolute left-0 inline-block transition-transform duration-200 ease-in-out transform translate-x-0 bg-white rounded-full shadow-sm pointer-events-none ring-0;
  }
  .pc-switch__fake-input-bg--xs {
    @apply w-3 h-3;
    @apply peer-checked:translate-x-3;
  }
  .pc-switch__fake-input-bg--sm {
    @apply w-4 h-4;
    @apply peer-checked:translate-x-4;
  }
  .pc-switch__fake-input-bg--md {
    @apply w-5 h-5;
    @apply peer-checked:translate-x-5;
  }
  .pc-switch__fake-input-bg--lg {
    @apply w-6 h-6;
    @apply peer-checked:translate-x-6;
  }
  .pc-switch__fake-input-bg--xl {
    @apply w-7 h-7;
    @apply peer-checked:translate-x-7;
  }
  /* Multiline surfaces clamp the radius: a full-radius theme on a
     textarea over-rounds into the text. Single-line inputs keep the
     pill option - that's a real style. */
  textarea.pc-text-input {
    border-radius: min(var(--pc-radius, 0.625rem), 1rem);
  }

  .pc-text-input {
    @apply block w-full bg-transparent border-gray-300 shadow-xs text-gray-900 placeholder:text-gray-400 transition-[color,box-shadow] duration-200 ease-out focus:outline-hidden focus-visible:border-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/50 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm dark:bg-gray-400/8 dark:border-gray-400/25 dark:text-gray-100 dark:placeholder:text-gray-500;
    border-radius: var(--pc-radius, 0.625rem);
  }

  /* Password Field Styles */
  .pc-password-field-wrapper {
    @apply relative;
  }

  .pc-password-field-input {
    @apply pr-10;
  }

  /* In-field action buttons (viewable / copyable / clearable) share one
     grammar: stroke icons at gray-400 that brighten on hover (never dim),
     a focus-visible ring, and a dial-derived rounding for the ring box. */
  .pc-password-field-toggle-button {
    @apply absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:hover:text-gray-200 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.25rem), 0.25rem);
  }

  .pc-password-field-toggle-icon-container {
    @apply flex items-center;
  }

  .pc-password-field-toggle-icon {
    @apply w-5 h-5;
  }

  /* Copyable Field Styles */
  .pc-copyable-field-wrapper {
    @apply relative;
  }

  .pc-copyable-field-input {
    @apply pr-10 cursor-text;
  }

  .pc-copyable-field-button {
    @apply absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 bg-transparent border-none cursor-pointer transition-colors duration-150 hover:text-gray-600 dark:hover:text-gray-200 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.25rem), 0.25rem);
  }

  .pc-copyable-field-icon-container {
    @apply flex items-center;
  }

  .pc-copyable-field-icon {
    @apply w-5 h-5;
  }

  /* Copy success: the check reads success and ignores the button's hover color */
  .pc-copyable-field-icon--done {
    @apply text-success-600 dark:text-success-500;
  }

  /* Clearable Field Styles */
  .pc-clearable-field-input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }

  .pc-clearable-field-wrapper {
    @apply relative;
  }

  .pc-clearable-field-input {
    @apply pr-10;
  }

  .pc-clearable-field-button {
    @apply absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 bg-transparent border-none cursor-pointer transition-colors duration-150 hover:text-gray-600 dark:hover:text-gray-200 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.25rem), 0.25rem);
  }

  .pc-clearable-field-icon-container {
    @apply flex items-center;
  }

  .pc-clearable-field-icon {
    @apply w-5 h-5;
  }

  /* Date and Time Field Styles */
  .pc-date-input {
    @apply block w-full bg-transparent border-gray-300 shadow-xs text-gray-900 transition-[color,box-shadow] duration-200 ease-out focus:outline-hidden focus-visible:border-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/50 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm dark:bg-gray-400/8 dark:border-gray-400/25 dark:text-gray-100;
    @apply [-webkit-appearance:none] [&::-webkit-datetime-edit-fields-wrapper]:p-0 [&::-webkit-date-and-time-value]:text-gray-900 dark:[&::-webkit-date-and-time-value]:text-gray-100 pe-[40px];
    border-radius: var(--pc-radius, 0.625rem);
  }

  .pc-date-input-wrapper {
    @apply relative;
  }

  .pc-date-input-icon {
    @apply absolute inset-y-0 right-0 flex items-center mr-3 pointer-events-none text-gray-400 dark:text-gray-500;
  }

  .pc-date-picker-indicator {
    @apply [&::-webkit-calendar-picker-indicator]:opacity-0;
    @apply [&::-webkit-calendar-picker-indicator]:absolute;
    @apply [&::-webkit-calendar-picker-indicator]:inset-y-0;
    @apply [&::-webkit-calendar-picker-indicator]:right-0;
    @apply [&::-webkit-calendar-picker-indicator]:w-10;
    @apply [&::-webkit-calendar-picker-indicator]:h-full;
    @apply [&::-webkit-calendar-picker-indicator]:cursor-pointer;
  }

  .pc-select {
    @apply block w-full py-2 pl-3 pr-10 text-base bg-transparent border-gray-300 shadow-xs text-gray-900 cursor-pointer transition-[color,box-shadow] duration-200 ease-out focus:outline-hidden focus-visible:border-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/50 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm dark:bg-gray-400/8 dark:border-gray-400/25 dark:text-gray-100;
    border-radius: var(--pc-radius, 0.625rem);
  }
  select.pc-text-input[multiple],
  select.pc-select[multiple] {
    @apply p-1.5;
    scrollbar-width: thin;
  }
  select.pc-text-input[multiple] option,
  select.pc-select[multiple] option {
    @apply px-2.5 py-1.5;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.375rem), 0px);
  }
  select.pc-text-input[multiple] option:checked,
  select.pc-select[multiple] option:checked {
    background: linear-gradient(0deg, var(--color-primary-200) 0%, var(--color-primary-200) 100%);
  }
  .dark select.pc-text-input[multiple] option:checked,
  .dark select.pc-select[multiple] option:checked {
    background: linear-gradient(0deg, color-mix(in oklab, var(--color-primary-500) 35%, transparent) 0%, color-mix(in oklab, var(--color-primary-500) 35%, transparent) 100%);
  }

  .pc-file-input {
    @apply text-sm cursor-pointer text-gray-500 dark:text-gray-400 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50 file:mr-3 file:px-4 file:py-2 file:font-medium file:border file:border-solid file:border-gray-300 file:bg-transparent file:text-gray-700 file:shadow-xs hover:file:bg-gray-100 dark:file:border-gray-400/25 dark:file:bg-gray-400/8 dark:file:text-gray-200 dark:hover:file:bg-gray-400/17 file:transition-colors file:duration-200;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-file-input::file-selector-button {
    border-radius: var(--pc-radius, 0.625rem);
  }
  /* Input Group */

  .pc-input-group {
    @apply flex flex-col w-full bg-transparent border border-gray-300 shadow-xs transition-[color,box-shadow] duration-200 ease-out focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500/50 dark:bg-gray-400/8 dark:border-gray-400/25;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-input-group:has(input:disabled, select:disabled, textarea:disabled) {
    @apply opacity-50;
  }
  .pc-input-group__row {
    @apply flex items-stretch w-full;
  }
  .pc-input-group :is(input, select, textarea) {
    @apply flex-1 min-w-0 border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent;
    border-radius: 0;
  }

  /* Addons: tight against their input - the addon owns the outer padding,
     the input sheds the adjacent side of its own */
  .pc-input-group__addon {
    @apply flex items-center gap-1.5 text-sm text-gray-500 select-none whitespace-nowrap dark:text-gray-400;
  }
  .pc-input-group__addon--leading {
    @apply pl-3;
  }
  .pc-input-group__addon--trailing {
    @apply pr-3;
  }
  .pc-input-group__addon--leading + :is(input, select, textarea) {
    @apply pl-2;
  }
  .pc-input-group__row :is(input, select, textarea):has(+ .pc-input-group__addon--trailing) {
    @apply pr-2;
  }
  /* Buttons nest as an inset chip: an even 2px frame on every side (the
     group's height is input-driven, so 2px is the natural vertical gap) and
     a concentric corner - inner radius = outer radius minus the frame. */
  .pc-input-group__addon:has(> .pc-button) {
    @apply p-0.5;
  }
  .pc-input-group__addon > .pc-button {
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.125rem), 0px);
  }
  /* Selects shed pc-select's standalone padding (12px text inset + a 40px
     chevron zone) which otherwise overlaps the field and juts the label in;
     the addon supplies the outer gap, the chevron hugs its text. */
  .pc-input-group__addon > select {
    @apply flex-none w-auto pl-1 pr-7;
    background-position: right 0.375rem center;
  }
  .pc-input-group__addon--leading:has(> select) {
    @apply pl-1.5;
  }
  .pc-input-group__addon--trailing:has(> select) {
    @apply pr-1.5;
  }
  .pc-input-group__addon [class*="hero-"]:not([class*="w-"]) {
    @apply w-4 h-4;
  }

  /* kbd hints: shadcn-calibre chip, nested radius, edge inset matching the
     leading icon's so both ends of the field read equally padded */
  :is(.pc-kbd, .pc-input-group__addon kbd) {
    @apply inline-flex items-center justify-center gap-0.5 h-5 min-w-5 px-1 font-sans text-xs font-medium bg-gray-100 text-gray-500 pointer-events-none select-none dark:bg-gray-400/17 dark:text-gray-400;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.3125rem), 0.125rem);
  }

  /* Block addons: full-width rows above/below the control (toolbars,
     helper rows, character counters) */
  .pc-input-group__block {
    @apply flex items-center gap-2 px-3 py-1.5 text-sm text-gray-500 select-none dark:text-gray-400;
  }

  .pc-form-field-wrapper--error .pc-input-group {
    @apply border-danger-500 ring-2 ring-danger-500/20 focus-within:ring-danger-500/40 dark:border-danger-500/70 dark:ring-danger-500/25;
  }
  /* Input OTP */

  .pc-otp {
    @apply relative inline-flex;
  }
  .pc-otp__input {
    @apply absolute inset-0 w-full h-full opacity-0 cursor-text disabled:cursor-not-allowed;
    font-size: 16px; /* prevents iOS zoom-on-focus */
  }
  .pc-otp__slots {
    @apply flex items-center gap-2 pointer-events-none;
  }
  .pc-otp__group {
    @apply flex items-center;
  }
  .pc-otp__slot {
    @apply relative flex items-center justify-center w-10 h-12 text-lg font-medium bg-transparent border border-gray-300 text-gray-900 shadow-xs transition-[color,box-shadow] duration-200 ease-out dark:bg-gray-400/8 dark:border-gray-400/25 dark:text-gray-100;
  }
  .pc-otp__group .pc-otp__slot + .pc-otp__slot {
    @apply -ml-px;
  }
  .pc-otp__group .pc-otp__slot:first-child {
    border-start-start-radius: var(--pc-radius, 0.625rem);
    border-end-start-radius: var(--pc-radius, 0.625rem);
  }
  .pc-otp__group .pc-otp__slot:last-child {
    border-start-end-radius: var(--pc-radius, 0.625rem);
    border-end-end-radius: var(--pc-radius, 0.625rem);
  }
  .pc-otp__slot--active {
    /* caret colour on the parent - dark: variants don't compile inside
       pseudo-element selectors, they'd silently drop */
    --pc-otp-caret: var(--color-gray-900, #18181b);
    @apply border-primary-500 ring-2 ring-primary-500/50 z-10 dark:[--pc-otp-caret:#f4f4f5];
  }
  .pc-otp__slot--active:not(.pc-otp__slot--filled)::before {
    content: "";
    @apply absolute w-px h-6;
    background-color: var(--pc-otp-caret);
    animation: pc-otp-blink 1.1s steps(2, start) infinite;
  }
  @keyframes pc-otp-blink {
    to {
      visibility: hidden;
    }
  }
  .pc-otp__separator {
    @apply px-1 text-gray-400 select-none dark:text-gray-500;
  }
  .pc-otp:has(.pc-otp__input:disabled) .pc-otp__slot {
    @apply opacity-50;
  }
  .pc-form-field-wrapper--error .pc-otp__slot {
    @apply border-danger-500 dark:border-danger-500/70;
  }


  .pc-color-input {
    @apply h-10 w-14 bg-transparent border-gray-300 shadow-xs cursor-pointer transition-[color,box-shadow] duration-200 ease-out focus:outline-hidden focus-visible:border-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/50 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-gray-400/8 dark:border-gray-400/25;
    @apply [&::-webkit-color-swatch-wrapper]:p-1 [&::-webkit-color-swatch]:border-0 [&::-moz-color-swatch]:border-0;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-color-input::-webkit-color-swatch {
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.25rem), 0px);
  }
  .pc-color-input::-moz-color-swatch {
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.25rem), 0px);
  }
  /* Single-thumb slider: custom track + thumb sharing the dual-range's
     geometry and material, so one thumb or two look like one family and the
     look is identical across browsers/OSes (native ranges are not).
     No left-of-thumb fill: webkit cannot draw one in pure CSS with a thumb
     taller than the track, and a Firefox-only fill would fork the look. */
  /* The track colour rides a variable set on the input itself - a real
     element, so the dark override resolves. The ::-webkit/::-moz track
     pseudo-elements only reference it, because a `dark:` variant applied
     straight to a pseudo-element compiles to a trailing `:where(.dark, ...)`
     that can never match (a pseudo-element has no ancestor test), which is
     why the single track used to stay light in dark mode. */
  .pc-range-input {
    @apply w-full h-5 appearance-none bg-transparent cursor-pointer focus:outline-hidden disabled:opacity-50 disabled:cursor-not-allowed;
    --pc-range-track: var(--color-gray-200);
  }
  .pc-range-input:where(.dark, .dark *) {
    --pc-range-track: color-mix(in oklab, var(--color-gray-400) 17%, transparent);
  }
  .pc-range-input::-webkit-slider-runnable-track {
    @apply h-1.5 rounded-full;
    background-color: var(--pc-range-track);
  }
  .pc-range-input::-moz-range-track {
    @apply h-1.5 rounded-full;
    background-color: var(--pc-range-track);
  }
  /* Optional fill: primary from the start to the thumb. webkit has no native
     lower-fill, so the runnable-track paints a hard-stop gradient whose split
     is `--pc-range-fill`, kept in sync by the PetalRangeFill hook; Firefox
     fills natively via ::-moz-range-progress. */
  .pc-range-input--fill::-webkit-slider-runnable-track {
    background: linear-gradient(
      to right,
      var(--color-primary-500) var(--pc-range-fill, 0%),
      var(--pc-range-track) var(--pc-range-fill, 0%)
    );
  }
  .pc-range-input--fill::-moz-range-progress {
    @apply h-1.5 rounded-full;
    background-color: var(--color-primary-500);
  }
  /* Thumb: a white ring in both schemes - it separates the thumb from a
     light track and a dark one alike, and reads better than the dark ring
     the old (never-applied) dark: variant intended.
     box-border is load-bearing: preflight's border-box reset can't reach
     these pseudo-elements (the universal selector doesn't match them), and
     the UA defaults disagree - WebKit sizes the thumb border-box, Firefox
     content-box - so without it Firefox rendered 26px thumbs (20 + 2x3
     ring) against WebKit's 20px. */
  .pc-range-input::-webkit-slider-thumb {
    @apply appearance-none box-border w-5 h-5 rounded-full cursor-pointer bg-primary-500 border-[3px] border-white dark:border-gray-900 shadow shadow-black/25 transition-transform duration-100 ease-out;
    margin-top: -0.4375rem;
  }
  .pc-range-input:hover::-webkit-slider-thumb {
    @apply scale-110;
  }
  .pc-range-input:focus-visible::-webkit-slider-thumb {
    @apply scale-110 ring-2 ring-primary-500/50;
  }
  .pc-range-input::-moz-range-thumb {
    @apply box-border w-5 h-5 rounded-full cursor-pointer bg-primary-500 border-[3px] border-white dark:border-gray-900 shadow shadow-black/25 transition-transform duration-100 ease-out;
  }
  .pc-range-input:hover::-moz-range-thumb {
    transform: scale(1.1);
  }
  .pc-range-input:focus-visible::-moz-range-thumb {
    transform: scale(1.1);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary-500) 50%, transparent);
  }

  /* ---- Dual Range Slider -------------------------------------------- */

  .pc-dual-range {
    @apply relative select-none;
  }

  .pc-dual-range--disabled {
    @apply opacity-50 pointer-events-none;
  }

  /* Stacking context for the overlapping inputs and track */
  .pc-dual-range__track-wrapper {
    @apply relative flex items-center h-5;
  }

  /* Full-width grey background track */
  .pc-dual-range__track {
    @apply absolute inset-x-0 h-1.5 rounded-full bg-gray-200 dark:bg-gray-400/17;
  }

  /* Primary-coloured highlight between the two thumbs — position set server-side
     initially and updated live by the PetalDualRangeSlider hook */
  .pc-dual-range__range {
    @apply absolute h-1.5 rounded-full bg-primary-500;
  }

  /* Zero-height inputs stacked on top of the track; pointer-events disabled on the
     element itself so only the visible thumb thumb captures clicks */
  .pc-dual-range__thumb {
    @apply absolute w-full appearance-none bg-transparent outline-none pointer-events-none;
    height: 0;
  }

  /* box-border: see .pc-range-input::-webkit-slider-thumb - Firefox sizes
     range thumbs content-box by default, WebKit border-box */
  .pc-dual-range__thumb::-webkit-slider-thumb {
    @apply appearance-none box-border w-5 h-5 rounded-full pointer-events-auto cursor-pointer;
    @apply bg-primary-500 border-[3px] border-white dark:border-gray-900;
    @apply shadow shadow-black/25;
    @apply transition-transform duration-100 ease-out;
  }

  .pc-dual-range__thumb::-moz-range-thumb {
    @apply box-border w-5 h-5 rounded-full pointer-events-auto cursor-pointer bg-primary-500 border-[3px] border-white dark:border-gray-900 shadow shadow-black/25 transition-transform duration-100 ease-out;
  }

  .pc-dual-range__thumb:hover::-webkit-slider-thumb {
    @apply scale-110;
  }

  .pc-dual-range__thumb:focus-visible::-webkit-slider-thumb {
    @apply scale-110 ring-2 ring-primary-500/50 ring-offset-0;
  }

  .pc-dual-range__thumb:hover::-moz-range-thumb {
    transform: scale(1.1);
  }

  .pc-dual-range__thumb:focus-visible::-moz-range-thumb {
    transform: scale(1.1);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary-500) 50%, transparent);
  }

  /* Three-column label row: bound | current values | bound */
  .pc-dual-range__labels {
    @apply grid grid-cols-3 mt-2.5 text-sm;
  }

  .pc-dual-range__bound {
    @apply text-gray-400 dark:text-gray-500 tabular-nums;
  }

  .pc-dual-range__bound--end {
    @apply text-right;
  }

  .pc-dual-range__display {
    @apply text-center font-medium text-gray-700 dark:text-gray-200 tabular-nums;
  }

  /* -------------------------------------------------------------------- */
  .pc-checkbox {
    @apply w-4 h-4 transition-shadow duration-200 ease-out bg-transparent border-gray-300 cursor-pointer text-primary-600 checked:bg-primary-600 checked:border-primary-600 focus:ring-0 focus:ring-offset-0 focus-visible:ring-2 focus-visible:ring-primary-500/50 focus-visible:ring-offset-0 dark:bg-gray-400/8 dark:border-gray-400/25 disabled:opacity-50 disabled:cursor-not-allowed;
    border-radius: clamp(0px, calc(var(--pc-radius, 0.625rem) - 0.375rem), 0.25rem);
  }

  /* Same story as the radio dot, but a tick can't be drawn as a gradient
     and var() doesn't work inside data URIs - so the tick image itself is
     the token. Themes whose primary-600 resolves light (monochrome primary
     in dark mode) set --pc-checkbox-check to a dark-tick URI. */
  .pc-checkbox:checked {
    background-image: var(
      --pc-checkbox-check,
      url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")
    );
  }
  .pc-checkbox-group {
    @apply pt-2;
  }
  .pc-checkbox-group--row {
    @apply flex flex-row gap-4 mb-3;
  }
  .pc-checkbox-group--col {
    @apply flex flex-col gap-4 mb-3;
  }
  .pc-checkbox-group__item--row {
    @apply inline-flex items-center gap-2 cursor-pointer;
  }
  .pc-checkbox-group__item--col {
    @apply inline-flex items-center gap-3 cursor-pointer;
  }
  .pc-radio {
    @apply w-4 h-4 transition-shadow duration-200 ease-out bg-transparent border-gray-300 cursor-pointer text-primary-600 checked:bg-primary-600 checked:border-primary-600 focus:ring-0 focus:ring-offset-0 focus-visible:ring-2 focus-visible:ring-primary-500/50 focus-visible:ring-offset-0 dark:bg-gray-400/8 dark:border-gray-400/25 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  /* The forms plugin bakes a white dot into an svg data URI, which vanishes
     when primary-600 resolves light (a monochrome primary in dark mode).
     Draw the dot as a gradient instead so it follows the on-primary token,
     exactly like solid button labels. */
  .pc-radio:checked {
    background-image: radial-gradient(
      circle closest-side,
      var(--pc-button-solid-fg, #fff) 0 36%,
      transparent 42%
    );
  }
  .pc-radio-group {
    @apply pt-2;
  }
  .pc-radio-group--row {
    @apply flex flex-row gap-4 mb-3;
  }
  .pc-radio-group--col {
    @apply flex flex-col gap-4 mb-3;
  }
  .pc-radio-group__item--row {
    @apply inline-flex items-center gap-2 cursor-pointer;
  }
  .pc-radio-group__item--col {
    @apply inline-flex items-center gap-3 cursor-pointer;
  }
  .pc-checkbox-group--empty-message,
  .pc-radio-group--empty-message {
    @apply text-sm;
  }

  /* Radio Card Styles */

  .pc-radio-card-group {
    @apply flex gap-4;
  }

  .pc-radio-card-group--row {
    @apply flex-col sm:flex-row;
  }

  .pc-radio-card-group--col {
    @apply flex-col;
  }

  .pc-radio-card {
    @apply relative transition-all cursor-pointer select-none;
    @apply flex items-center justify-center text-left text-gray-900 dark:text-white;
  }

  /* Radio Card Size Styles */

  /* Apply padding to .pc-radio-card__content */
  .pc-radio-card--sm > .pc-radio-card__content {
    @apply px-4 py-2;
  }

  .pc-radio-card--md > .pc-radio-card__content {
    @apply px-8 py-4;
  }

  .pc-radio-card--lg > .pc-radio-card__content {
    @apply px-12 py-6;
  }

  /* Adjust text size for labels */
  .pc-radio-card--sm .pc-radio-card__label {
    @apply text-sm;
  }

  .pc-radio-card--md .pc-radio-card__label {
    @apply text-base;
  }

  .pc-radio-card--lg .pc-radio-card__label {
    @apply text-lg;
  }

  /* Adjust text size for descriptions */
  .pc-radio-card--sm .pc-radio-card__description {
    @apply text-xs;
  }

  .pc-radio-card--md .pc-radio-card__description {
    @apply text-sm;
  }

  .pc-radio-card--lg .pc-radio-card__description {
    @apply text-base;
  }

  .pc-radio-card--outline .pc-radio-card__fake-input {
    @apply bg-transparent border border-gray-300 dark:bg-gray-400/8 dark:border-gray-400/25;
  }

  /* Hover speaks through the border, not the fill - on a selection surface
     the fill means "selected", so a hover wash would half-lie. Checked cards
     keep their selected border (the :not guard). */
  .pc-radio-card--outline:hover > .pc-radio-card__input:not(:checked) ~ .pc-radio-card__fake-input {
    @apply border-gray-400 dark:border-gray-400/40;
  }

  .pc-radio-card--classic .pc-radio-card__fake-input {
    @apply bg-gray-100 border border-transparent dark:bg-gray-400/17;
  }

  .pc-radio-card--classic:hover .pc-radio-card__fake-input {
    @apply bg-gray-200/70 dark:bg-gray-400/25;
  }

  /* Checked state: the fill shift is the primary signal (alpha tints stay
     ramp-agnostic - a faint gray step on monochrome, a soft hue glow on
     colour themes), the border firms up as the secondary, and the dot
     carries the accent. Alpha also self-calibrates the border: it softens a
     monochrome's near-white/near-black poles more than it dulls a hue. */
  .pc-radio-card__input:checked ~ .pc-radio-card__fake-input {
    @apply border-primary-500 bg-primary-600/5 dark:border-primary-500/60 dark:bg-primary-500/10;
  }
  /* classic is already a filled chip - the alpha tint would LIGHTEN it, so
     selection keeps its resting material and speaks through the border */
  .pc-radio-card--classic > .pc-radio-card__input:checked ~ .pc-radio-card__fake-input {
    @apply bg-gray-100 dark:bg-gray-400/17;
  }

  /* Keyboard focus surfaces on the card (the real input is sr-only) */
  .pc-radio-card__input:focus-visible ~ .pc-radio-card__fake-input {
    @apply ring-2 ring-primary-500/50;
  }

  /* Disabled State */
  .pc-radio-card--disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  /* Input Styles */
  .pc-radio-card__input {
    @apply sr-only;
  }

  /* Fake Input Styles */
  .pc-radio-card__fake-input {
    @apply absolute inset-0;
    border-radius: var(--pc-radius, 0.625rem);
  }

  /* Indicator variant - a visible radio dot inside the card. Also used when
     an option carries an icon or image (the row-with-visual layout). */
  .pc-radio-card--indicator {
    @apply justify-start;
  }
  .pc-radio-card--indicator > .pc-radio-card__content {
    @apply w-full;
  }
  /* The generous md/lg tile padding is for centred text; the indicator and
     row-with-visual layouts read left-to-right, so they take row padding -
     otherwise an "end" dot floats toward the centre and the text squeezes. */
  .pc-radio-card--md.pc-radio-card--indicator > .pc-radio-card__content {
    @apply px-4;
  }
  .pc-radio-card--lg.pc-radio-card--indicator > .pc-radio-card__content {
    @apply px-5;
  }
  .pc-radio-card__content--indicator {
    @apply flex items-center gap-3;
  }
  /* Text column grows so an "end" dot rides the right edge */
  .pc-radio-card__text {
    @apply min-w-0 flex-1;
  }
  .pc-radio-card__dot {
    @apply shrink-0 w-4 h-4 rounded-full border border-gray-300 bg-transparent dark:border-white/25;
  }
  /* Corner placement floats over the card's reading-end corner (top-right in
     LTR, flipping automatically in RTL via logical properties) */
  .pc-radio-card__dot--corner {
    @apply absolute top-3 end-3;
  }
  .pc-radio-card--indicator.pc-radio-card--indicator-corner > .pc-radio-card__content {
    @apply pe-7;
  }
  /* Option visuals: a soft icon circle or a rounded image thumbnail */
  .pc-radio-card__icon {
    @apply flex items-center justify-center w-10 h-10 rounded-full shrink-0 bg-gray-100 dark:bg-gray-400/17;
  }
  .pc-radio-card__icon-glyph {
    @apply w-5 h-5 text-gray-700 dark:text-gray-200;
  }
  .pc-radio-card__image {
    @apply w-9 h-9 rounded-full object-cover shrink-0 select-none;
  }
  .pc-radio-card__input:checked ~ .pc-radio-card__content .pc-radio-card__dot,
  .pc-radio-card__input:checked ~ .pc-radio-card__dot {
    @apply border-primary-600 dark:border-primary-600;
    border-width: 5px;
  }

  /* Content Styles */
  .pc-radio-card__content {
    @apply relative pointer-events-none;
  }

  /* Label Styles */
  .pc-radio-card__label {
    @apply font-semibold;
  }

  /* Description Styles */
  .pc-radio-card__description {
    @apply text-sm font-normal text-gray-600;
    @apply dark:text-gray-400;
  }

  /* Apply styles when input is checked using peer-checked variants */
  .pc-radio-card.peer-checked\\:border-primary-500 {
    @apply border-primary-500;
  }

  .pc-radio-card.peer-checked\\:bg-primary-50 {
    @apply bg-primary-50;
  }

  .pc-radio-card.dark\\:peer-checked\\:bg-primary-700 {
    @apply dark:bg-primary-700;
  }

  /* Dropdown */

  .pc-dropdown {
    @apply relative inline-block text-left;
  }
  .pc-dropdown__chevron {
    @apply w-5 h-5 ml-2 -mr-1 dark:text-gray-100;
  }
  .pc-dropdown__menu-items-wrapper {
    @apply absolute z-30 w-56 mt-2 p-1 bg-white shadow-lg border border-gray-200 focus:outline-hidden dark:bg-gray-900 dark:border-gray-400/17;
    border-radius: min(var(--pc-radius, 0.625rem), 1rem);
  }
  .pc-dropdown__menu-items-wrapper-placement--left {
    @apply right-0 origin-top-right;
  }
  .pc-dropdown__menu-items-wrapper-placement--right {
    @apply left-0 origin-top-left;
  }
  .pc-dropdown__menu-item {
    @apply flex items-center self-start justify-start w-full gap-2 px-3 py-2 text-sm text-left text-gray-700 transition-colors duration-150 ease-out hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-400/17;
    border-radius: max(calc(min(var(--pc-radius, 0.625rem), 1rem) - 0.25rem), 0px);
  }
  .pc-dropdown__trigger-button--no-label {
    @apply flex items-center p-1.5 text-gray-400 bg-transparent transition-colors duration-200 ease-out hover:text-gray-600 hover:bg-gray-100 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50 dark:hover:text-gray-300 dark:hover:bg-gray-400/17;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-dropdown__trigger-button--with-label {
    @apply inline-flex items-center justify-center w-full px-4 py-2 text-sm font-medium bg-transparent border border-gray-300 text-gray-700 shadow-xs transition-colors duration-200 ease-out hover:bg-gray-100 hover:text-gray-900 active:bg-gray-200 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50 dark:border-gray-400/25 dark:bg-gray-400/8 dark:text-gray-200 dark:hover:bg-gray-400/17 dark:hover:text-gray-50;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-dropdown__trigger-button--with-label-and-trigger-element {
    @apply align-middle;
  }
  .pc-dropdown__menu-item--disabled {
    @apply text-gray-500 hover:bg-transparent;
  }
  .pc-dropdown__ellipsis {
    @apply w-5 h-5;
  }
  .pc-dropdown__separator {
    @apply h-px my-1 -mx-1 bg-gray-200 dark:bg-gray-400/17;
  }
  .pc-dropdown__label {
    @apply px-3 py-1.5 text-xs font-medium text-gray-500 select-none dark:text-gray-400;
  }


  /* Command palette */

  .pc-command {
    @apply flex w-full flex-col overflow-hidden bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100;
    border-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
  }
  .pc-command__input-wrap {
    @apply flex items-center gap-2 border-b border-gray-200 px-3 dark:border-gray-400/17;
  }
  .pc-command__input-icon {
    @apply h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500;
  }
  .pc-command__input {
    @apply h-11 w-full border-0 bg-transparent p-0 text-sm text-gray-900 placeholder-gray-400 outline-none dark:text-gray-100 dark:placeholder-gray-500;
  }
  .pc-command__input:focus {
    @apply outline-none ring-0 shadow-none border-0;
  }
  .pc-command__list {
    @apply max-h-80 overflow-y-auto overscroll-contain p-1;
    scrollbar-width: thin;
  }
  .pc-command__group {
    @apply overflow-hidden;
  }
  .pc-command__group-heading {
    @apply px-2 py-1.5 text-xs font-medium text-gray-500 select-none dark:text-gray-400;
  }
  .pc-command__item {
    @apply relative flex w-full cursor-default items-center gap-2 px-2 py-1.5 text-left text-sm text-gray-700 outline-none select-none dark:text-gray-200;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.25rem), 0px);
  }
  .pc-command__item[data-selected] {
    @apply bg-gray-100 text-gray-900 dark:bg-gray-400/17 dark:text-white;
  }
  .pc-command__item[data-disabled] {
    @apply pointer-events-none opacity-50;
  }
  .pc-command__item svg {
    @apply h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500;
  }
  .pc-command__item[data-selected] svg {
    @apply text-gray-600 dark:text-gray-300;
  }
  .pc-command__separator {
    @apply -mx-1 my-1 h-px bg-gray-200 dark:bg-gray-400/17;
  }
  .pc-command__shortcut {
    @apply ml-auto text-xs tracking-widest text-gray-400 dark:text-gray-500;
  }
  .pc-command__empty {
    @apply py-6 text-center text-sm text-gray-500 dark:text-gray-400;
  }

  .pc-command-dialog {
    @apply fixed p-0 shadow-lg;
    inset: 0;
    margin: 12vh auto auto;
    width: min(36rem, calc(100vw - 2rem));
    border: 1px solid var(--color-gray-200);
    background: transparent;
    border-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
  }
  .dark .pc-command-dialog {
    border-color: color-mix(in srgb, white 15%, transparent);
  }
  .pc-command-dialog::backdrop {
    background: rgb(0 0 0 / 0.5);
  }
  @media (prefers-reduced-motion: no-preference) {
    .pc-command-dialog[open] {
      animation: pc-command-in 0.15s ease-out;
    }
  }
  @keyframes pc-command-in {
    from {
      opacity: 0;
      transform: scale(0.97);
    }
  }

  /* Tooltip */

  .pc-tooltip {
    @apply relative inline-block;
  }
  .pc-tooltip__content {
    @apply absolute z-40 invisible w-max max-w-xs px-2.5 py-1.5 text-xs font-medium leading-snug text-white bg-gray-900 shadow-lg opacity-0 transition-opacity duration-150 delay-75 pointer-events-none dark:bg-gray-100 dark:text-gray-900 group-hover/pc-tooltip:visible group-hover/pc-tooltip:opacity-100 group-focus-within/pc-tooltip:visible group-focus-within/pc-tooltip:opacity-100;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-tooltip--suppressed .pc-tooltip__content {
    display: none;
  }
  .pc-tooltip__content--top {
    @apply bottom-full left-1/2 -translate-x-1/2 mb-2;
  }
  .pc-tooltip__content--bottom {
    @apply top-full left-1/2 -translate-x-1/2 mt-2;
  }
  .pc-tooltip__content--left {
    @apply right-full top-1/2 -translate-y-1/2 mr-2;
  }
  .pc-tooltip__content--right {
    @apply left-full top-1/2 -translate-y-1/2 ml-2;
  }
  .pc-tooltip__arrow {
    @apply absolute w-2 h-2 rotate-45 bg-gray-900 dark:bg-gray-100;
  }
  .pc-tooltip__arrow--top {
    @apply top-full left-1/2 -translate-x-1/2 -mt-1;
  }
  .pc-tooltip__arrow--bottom {
    @apply bottom-full left-1/2 -translate-x-1/2 -mb-1;
  }
  .pc-tooltip__arrow--left {
    @apply left-full top-1/2 -translate-y-1/2 -ml-1;
  }
  .pc-tooltip__arrow--right {
    @apply right-full top-1/2 -translate-y-1/2 -mr-1;
  }

  /* Popover */

  .pc-popover {
    @apply relative inline-block;
  }
  .pc-popover__panel {
    @apply absolute z-40 w-max max-w-[min(24rem,calc(100vw-1rem))] bg-white p-4 shadow-lg border border-gray-200 focus:outline-hidden dark:bg-gray-900 dark:border-gray-400/17;
    border-radius: min(var(--pc-radius, 0.625rem), 1rem);
  }
  .pc-popover__panel--top {
    @apply bottom-full left-1/2 -translate-x-1/2 mb-2 origin-bottom;
  }
  .pc-popover__panel--top-start {
    @apply bottom-full left-0 mb-2 origin-bottom-left;
  }
  .pc-popover__panel--top-end {
    @apply bottom-full right-0 mb-2 origin-bottom-right;
  }
  .pc-popover__panel--bottom {
    @apply top-full left-1/2 -translate-x-1/2 mt-2 origin-top;
  }
  .pc-popover__panel--bottom-start {
    @apply top-full left-0 mt-2 origin-top-left;
  }
  .pc-popover__panel--bottom-end {
    @apply top-full right-0 mt-2 origin-top-right;
  }
  .pc-popover__panel--left {
    @apply right-full top-1/2 -translate-y-1/2 mr-2 origin-right;
  }
  .pc-popover__panel--left-start {
    @apply right-full top-0 mr-2 origin-top-right;
  }
  .pc-popover__panel--left-end {
    @apply right-full bottom-0 mr-2 origin-bottom-right;
  }
  .pc-popover__panel--right {
    @apply left-full top-1/2 -translate-y-1/2 ml-2 origin-left;
  }
  .pc-popover__panel--right-start {
    @apply left-full top-0 ml-2 origin-top-left;
  }
  .pc-popover__panel--right-end {
    @apply left-full bottom-0 ml-2 origin-bottom-left;
  }
  /* Top-layer mode: the PetalPopover hook positions with fixed inline styles;
     [popover] UA defaults handle visibility. Fade in via @starting-style where supported. */
  .pc-popover__panel--top-layer {
    @apply fixed m-0 transition-opacity duration-100;
  }
  .pc-popover__panel--top-layer:popover-open {
    opacity: 1;
    @starting-style {
      opacity: 0;
    }
  }

  /* Loading */

  .pc-spinner--sm {
    @apply w-5 h-5 shrink-0;
  }
  .pc-spinner--md {
    @apply w-8 h-8 shrink-0;
  }
  .pc-spinner--lg {
    @apply w-16 h-16 shrink-0;
  }

  /* Breadcrumbs */

  .pc-breadcrumbs {
    @apply flex items-center;
  }
  .pc-breadcrumb {
    @apply flex text-sm text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100;
  }
  .pc-breadcrumb--current {
    @apply font-medium text-gray-900 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-100;
  }
  .pc-breadcrumbs__separator-slash {
    @apply px-2.5 text-sm text-gray-300 dark:text-gray-600;
  }
  .pc-breadcrumbs__separator-chevron {
    @apply px-1.5 text-gray-300 dark:text-gray-600;
  }
  .pc-breadcrumbs__separator-chevron__icon {
    @apply h-4 w-4;
  }
  .pc-breadcrumb-icon {
    @apply w-6 h-6 shrink-0;
  }

  /* Avatars */

  .pc-avatar--with-image {
    @apply object-cover rounded-full shrink-0;
  }
  .pc-avatar-anchor {
    @apply relative inline-flex shrink-0;
  }
  .pc-avatar__status {
    @apply absolute right-0 bottom-0 block rounded-full ring-2 ring-white dark:ring-gray-950;
  }
  .pc-avatar__status--online {
    @apply bg-success-500;
  }
  .pc-avatar__status--offline {
    @apply bg-gray-300 dark:bg-gray-600;
  }
  .pc-avatar__status--busy {
    @apply bg-danger-500;
  }
  .pc-avatar__status--away {
    @apply bg-warning-400;
  }
  .pc-avatar__status--xs {
    @apply h-1.5 w-1.5;
  }
  .pc-avatar__status--sm {
    @apply h-2 w-2;
  }
  .pc-avatar__status--md {
    @apply h-2.5 w-2.5;
  }
  .pc-avatar__status--lg {
    @apply h-3 w-3;
  }
  .pc-avatar__status--xl {
    @apply h-3.5 w-3.5;
  }
  .pc-avatar--with-placeholder-icon {
    @apply relative inline-block overflow-hidden bg-gray-100 text-gray-300 rounded-full shrink-0 dark:bg-gray-400/17;
  }
  .pc-avatar--with-placeholder-initials {
    @apply flex items-center justify-center font-semibold text-gray-500 uppercase bg-gray-100 rounded-full shrink-0 dark:bg-gray-400/17 dark:text-gray-300;
  }
  /* After the placeholder rule, which it shares an element with: the +N
     chip overlaps the avatar behind it, so its background must stay
     opaque where the placeholder's ghost alpha would let the photo
     bleed through. */
  .pc-avatar-group__overflow {
    @apply bg-gray-100 font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-300;
  }

  /* Generative art placeholders (art="mesh" | "dither"); the flex/type
     styles only matter when the optional initials overlay renders */
  .pc-avatar--art {
    @apply flex items-center justify-center font-semibold uppercase select-none rounded-full bg-cover shrink-0;
  }

  /* Rounded shape - orgs, teams, workspaces (people stay circles).
     Proportional so every size keeps the same character. Deliberately NOT
     tied to --pc-radius: avatars are identity, not surface, and a
     sharp-cornered theme still wants soft avatars. Placed after every
     base avatar rule so it wins their rounded-full at equal specificity. */
  .pc-avatar--rounded {
    border-radius: 25%;
  }
  .pc-avatar-group {
    @apply ring-white ring-2 dark:ring-gray-950;
  }
  .pc-avatar__placeholder-icon {
    @apply relative w-full! h-full! bg-gray-300 top-[12%] scale-[1.15] transform;
  }

  /* Avatars - sizes */

  .pc-avatar--xs {
    @apply text-xs w-7 h-7;
  }
  .pc-avatar--sm {
    @apply w-8 h-8 text-sm;
  }
  .pc-avatar--md {
    @apply w-10 h-10 text-base;
  }
  .pc-avatar--lg {
    @apply w-12 h-12 text-lg;
  }
  .pc-avatar--xl {
    @apply text-xl w-14 h-14;
  }
  .pc-avatar-group--xs {
    @apply relative z-0 flex -space-x-2;
  }
  .pc-avatar-group--sm {
    @apply relative z-0 flex -space-x-3;
  }
  .pc-avatar-group--md {
    @apply relative z-0 flex -space-x-4;
  }
  .pc-avatar-group--lg {
    @apply relative z-0 flex -space-x-5;
  }
  .pc-avatar-group--xl {
    @apply relative z-0 flex -space-x-6;
  }

  /* Progress */

  .pc-progress {
    @apply relative flex overflow-hidden;
  }
  .pc-progress-wrapper {
    @apply w-full;
  }
  /* Header sits at the system's label rhythm (pc-label is mb-2) */
  .pc-progress__header {
    @apply flex items-center justify-between mb-2 text-sm;
  }
  .pc-progress__title {
    @apply font-medium text-gray-900 dark:text-gray-100;
  }
  .pc-progress__value {
    @apply text-gray-500 tabular-nums dark:text-gray-400;
  }
  /* Status line under the bar - help-text rhythm and tone */
  .pc-progress__status {
    @apply mt-2 text-sm text-gray-500 dark:text-gray-400;
  }

  .pc-progress__inner {
    @apply relative z-[1] flex flex-col justify-center rounded-full transition-[width] duration-500 ease-out;
  }

  /* Progress - label (xl only): two copies stacked at the same spot, both
     spanning the full track and centred, so they line up exactly. The base
     copy reads on the empty track (below the fill, z-0). The fill copy is
     clipped to the filled width via clip-path and painted on top (z-2), so
     it reads on-primary over the fill. Result: dark text on the track,
     light text on the fill, wiping as the bar grows - legible at any
     percentage, not white-on-light until the fill catches up. */
  .pc-progress__label {
    @apply absolute inset-0 flex items-center justify-center px-4 text-xs font-medium whitespace-nowrap pointer-events-none;
  }
  .pc-progress__label--track {
    @apply z-0 text-gray-700 dark:text-gray-200;
  }
  .pc-progress__label--fill {
    @apply z-[2] transition-[clip-path] duration-500 ease-out;
    color: var(--pc-button-solid-fg, #fff);
  }

  /* Progress - sizes */

  .pc-progress--xs {
    @apply h-1 rounded-full;
  }
  .pc-progress--sm {
    @apply h-2 rounded-full;
  }
  .pc-progress--md {
    @apply h-3 rounded-full;
  }
  .pc-progress--lg {
    @apply h-4 rounded-full;
  }
  .pc-progress--xl {
    @apply h-5 rounded-full;
  }

  /* Progress - colors */

  .pc-progress--primary {
    @apply bg-primary-500/15;
  }
  .pc-progress--secondary {
    @apply bg-secondary-500/15;
  }
  .pc-progress--info {
    @apply bg-info-500/15;
  }
  .pc-progress--success {
    @apply bg-success-500/15;
  }
  .pc-progress--warning {
    @apply bg-warning-500/15;
  }
  .pc-progress--danger {
    @apply bg-danger-500/15;
  }
  .pc-progress--gray {
    @apply bg-gray-500/15;
  }
  .pc-progress__inner--primary {
    @apply bg-primary-600;
  }
  .pc-progress__inner--secondary {
    @apply bg-secondary-600;
  }
  .pc-progress__inner--info {
    @apply bg-info-600;
  }
  .pc-progress__inner--success {
    @apply bg-success-600;
  }
  .pc-progress__inner--warning {
    @apply bg-warning-600;
  }
  .pc-progress__inner--danger {
    @apply bg-danger-600;
  }
  .pc-progress__inner--gray {
    @apply bg-gray-600;
  }

  /* Pagination */

  .pc-pagination {
    @apply flex;
  }
  .pc-pagination__inner {
    @apply inline-flex items-center gap-1 text-sm font-medium;
  }
  .pc-pagination__item {
    @apply inline-flex h-9 min-w-9 items-center justify-center px-2 transition-colors;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.125rem), 0px);
  }
  .pc-pagination__item--is-current {
    @apply border border-gray-300 bg-transparent font-medium text-gray-900 shadow-xs dark:border-gray-400/25 dark:bg-gray-400/8 dark:text-gray-100;
  }
  .pc-pagination__item--is-not-current {
    @apply text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-400/17 dark:hover:text-gray-200;
  }
  .pc-pagination__item--current {
    @apply inline-flex h-9 min-w-9 items-center justify-center px-2;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.125rem), 0px);
  }
  .pc-pagination__item__previous {
    @apply mr-1 inline-flex h-9 min-w-9 items-center justify-center px-2 text-gray-600 enabled:hover:bg-gray-100 enabled:hover:text-gray-900 disabled:opacity-40 dark:text-gray-400 enabled:dark:hover:bg-gray-400/17 enabled:dark:hover:text-gray-200 transition-colors duration-150;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.125rem), 0px);
  }
  .pc-pagination__item__previous__chevron {
    /* !important is needed because heroicon class overrides width and height */
    @apply w-5! h-5! text-gray-600 dark:text-gray-400;
  }
  .pc-pagination__item__next {
    @apply ml-1 inline-flex h-9 min-w-9 items-center justify-center px-2 text-gray-600 enabled:hover:bg-gray-100 enabled:hover:text-gray-900 disabled:opacity-40 dark:text-gray-400 enabled:dark:hover:bg-gray-400/17 enabled:dark:hover:text-gray-200 transition-colors duration-150;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.125rem), 0px);
  }
  .pc-pagination__item__next__chevron {
    /* !important is needed because heroicon class overrides width and height */
    @apply w-5! h-5! text-gray-600 dark:text-gray-400;
  }
  .pc-pagination__item__ellipsis {
    @apply inline-flex h-9 min-w-9 items-center justify-center px-2 text-gray-400 dark:text-gray-500;
  }

  /* Pagination - number(s) rounded box corner style */

  .pc-pagination__item--with-single-box {
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-pagination__item--with-multiple-boxes--left {
    border-start-start-radius: var(--pc-radius, 0.625rem);
    border-end-start-radius: var(--pc-radius, 0.625rem);
  }
  .pc-pagination__item--with-multiple-boxes--right {
    border-start-end-radius: var(--pc-radius, 0.625rem);
    border-end-end-radius: var(--pc-radius, 0.625rem);
  }
  .pc-pagination__item--with-multiple-boxes--right {
    border-start-end-radius: var(--pc-radius, 0.625rem);
    border-end-end-radius: var(--pc-radius, 0.625rem);
  }

  /* Tabs */

  .pc-tabs {
    @apply flex gap-x-2 gap-y-2;
  }
  .pc-tabs--underline {
    @apply gap-x-6 border-b border-gray-200 dark:border-gray-400/17;
  }

  /* Tabs - Pill */

  .pc-tab__pill {
    @apply flex items-center px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors duration-200;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-tab__pill--is-active {
    @apply bg-primary-100 text-primary-700 dark:bg-primary-500/15 dark:text-primary-300;
  }
  .pc-tab__pill--is-not-active {
    @apply text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 dark:text-gray-400 dark:hover:bg-gray-400/17 hover:bg-gray-100;
  }
  .pc-tabs--segmented {
    @apply inline-flex items-center gap-1 bg-gray-100 p-1 dark:bg-gray-400/17;
    border-radius: var(--pc-radius, 0.625rem);
  }
  .pc-tab__segment {
    @apply flex items-center px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-colors duration-200;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.25rem), 0px);
  }
  .pc-tab__segment--is-active {
    @apply bg-white text-gray-900 shadow-xs dark:bg-gray-900 dark:text-gray-100;
  }
  .pc-tab__segment--is-not-active {
    @apply text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200;
  }

  /* Tabs - Individual Tab Underline */

  .pc-tab__underline {
    @apply flex items-center px-3 py-3 text-sm font-medium border-b-2 whitespace-nowrap transition-colors duration-200;
  }
  .pc-tab__underline--is-active {
    @apply border-primary-500 text-primary-600 dark:text-primary-500 dark:border-primary-500;
  }
  .pc-tab__underline--is-not-active {
    @apply text-gray-500 border-transparent dark:hover:text-gray-300 dark:text-gray-400 hover:border-gray-300 hover:text-gray-600;
  }
  .pc-tab__underline--with-underline-and-is-active {
  }
  .pc-tab__underline--with-underline-and-is-not-active {
    @apply hover:border-gray-300;
  }

  /* Tabs - Number */

  .pc-tab__number {
    @apply whitespace-nowrap ml-2 py-0.5 px-2 rounded-full text-xs font-normal;
  }

  /* Tabs - Pill with number */

  .pc-tab__number__pill--is-active {
    @apply bg-primary-600;
    color: var(--pc-button-solid-fg, #fff);
  }
  .pc-tab__number__pill--is-not-active {
    @apply text-white bg-gray-500 dark:bg-gray-600;
  }

  /* Tabs - Underlined with number */

  .pc-tab__number__underline--is-active {
    @apply bg-primary-100 text-primary-600;
  }
  .pc-tab__number__underline--is-not-active {
    @apply text-gray-500 bg-gray-100;
  }
  .pc-tab__number__underline--with-underline-and-is-active {
    @apply bg-primary-100 text-primary-600 dark:bg-primary-600;
  }
  .dark .pc-tab__number__underline--with-underline-and-is-active {
    color: var(--pc-button-solid-fg, #fff);
  }
  .pc-tab__number__underline--with-underline-and-is-not-active {
    @apply text-gray-500 bg-gray-100 dark:bg-gray-600 dark:text-white;
  }

  /* Cards */

  .pc-card {
    @apply flex flex-wrap overflow-hidden bg-white dark:bg-gray-900;
  }
  .pc-card__inner {
    @apply flex flex-col w-full max-w-full;
  }
  .pc-card--muted {
    @apply border border-transparent bg-gray-50 dark:bg-white/[0.04];
    border-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
  }
  .pc-card--basic {
    @apply border border-gray-200 shadow-xs dark:border-gray-400/17;
    border-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
  }
  /* legacy alias of basic - visually identical; slated for removal in 5.0 */
  .pc-card--outline {
    @apply border border-gray-200 shadow-xs dark:border-gray-400/17;
    border-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
  }

  /* Cards - content */

  .pc-card__header {
    @apply flex items-start justify-between gap-4 px-6 pt-6;
  }
  .pc-card__header-titles {
    @apply flex min-w-0 flex-col gap-1.5;
  }
  .pc-card__title {
    @apply font-semibold leading-none text-gray-900 dark:text-gray-100;
  }
  .pc-card__description {
    @apply text-sm text-gray-500 dark:text-gray-400;
  }
  .pc-card__header-action {
    @apply shrink-0;
  }
  .pc-card__content {
    @apply flex-1 p-6 text-sm leading-relaxed text-gray-500 dark:text-gray-400;
  }
  .pc-card__category {
    @apply mb-3 text-sm font-medium;
  }
  .pc-card__category--primary {
    @apply text-primary-600 dark:text-primary-400;
  }
  .pc-card__heading {
    @apply mb-2 text-lg font-semibold text-gray-900 dark:text-gray-100;
  }

  /* Cards - with media */

  .pc-card__image {
    @apply shrink-0 object-cover w-full;
  }
  .pc-card__image-placeholder {
    @apply shrink-0 w-full bg-gray-300 dark:bg-gray-400/17;
  }

  /* Cards - footer */

  .pc-card__footer {
    @apply flex items-center gap-2 px-6 pb-6;
  }

  /* Table */

  .pc-table--basic {
    @apply min-w-full overflow-hidden shadow-sm table-auto ring-1 ring-gray-200 dark:ring-gray-400/17;
    border-radius: min(var(--pc-radius, 0.625rem), 1rem);
  }
  .pc-table--ghost {
    @apply min-w-full overflow-hidden table-auto;
  }
  .pc-table__th {
    @apply px-6 py-3 text-sm font-semibold text-left text-gray-900 bg-gray-50 dark:bg-gray-400/8 dark:text-white;
  }
  .pc-table__tfoot {
    @apply border-t border-gray-200 bg-gray-50 font-medium text-gray-900 dark:border-gray-400/17 dark:bg-gray-400/8 dark:text-gray-100;
  }
  /* a totals row under "no data" is nonsense - hide the footer whenever the
     body is showing only its empty-state row (works for lists AND streams,
     which only know emptiness client-side) */
  tbody:has(> .pc-table__tr--empty:only-child) + .pc-table__tfoot {
    @apply hidden;
  }
  .pc-table__tfoot .pc-table__tr {
    @apply border-0 bg-transparent;
  }
  .pc-table__tr {
    @apply bg-white border-b border-gray-200 dark:border-gray-400/17 dark:bg-transparent last:border-none;
  }
  .pc-table__tr--row-click {
    @apply transition-colors duration-150;
  }
  :is(.pc-table--basic, .pc-table--ghost) tbody .pc-table__tr {
    @apply transition-colors hover:bg-gray-100/60 dark:hover:bg-white/[0.06];
  }
  .pc-table__td {
    @apply px-6 py-4 text-sm text-gray-700 dark:text-gray-100 tabular-nums;
  }
  .pc-table__td--first-col {
    @apply font-semibold;
  }
  .pc-table__td--row-click {
    @apply hover:cursor-pointer;
  }
  .pc-table--ghost .pc-table__th {
    @apply bg-transparent px-3 py-2.5 font-medium text-gray-900 dark:bg-transparent dark:text-gray-100;
  }
  .pc-table--ghost .pc-table__td {
    @apply px-3 py-3;
  }
  .pc-table--ghost .pc-table__tr {
    @apply border-gray-100 dark:border-gray-400/8;
  }
  .pc-table--compact .pc-table__th {
    @apply py-2;
  }
  .pc-table--compact .pc-table__td {
    @apply py-2;
  }
  .pc-table--striped tbody .pc-table__tr:nth-child(even) {
    @apply bg-gray-50 dark:bg-white/[0.03];
  }
  .pc-table__th--sticky {
    @apply sticky top-0 z-10;
  }
  .pc-table__sort {
    @apply -mx-1 inline-flex cursor-pointer items-center gap-1 rounded px-1 transition-colors hover:text-gray-600 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50 dark:hover:text-gray-300;
  }
  .pc-table__sort-icon {
    @apply h-3.5 w-3.5 text-gray-400 dark:text-gray-500;
  }
  .pc-table__sort-icon--active {
    @apply text-gray-900 dark:text-white;
  }
  .pc-table__user-inner-td {
    @apply flex items-center gap-3;
  }
  .pc-table__user-inner-td__inner {
    @apply flex flex-col overflow-hidden;
  }
  .pc-table__user-inner-td__label {
    @apply overflow-hidden font-medium text-gray-700 whitespace-nowrap text-ellipsis dark:text-gray-100;
  }
  .pc-table__user-inner-td__sub-label {
    @apply overflow-hidden font-normal text-gray-500 dark:text-gray-400 whitespace-nowrap text-ellipsis;
  }

  /* Accordion */

  .pc-accordion-item {
    @apply flex w-full items-center justify-between border border-gray-200 bg-white p-4 text-left text-gray-900 transition-colors duration-200 hover:bg-gray-50 dark:border-gray-400/17 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-400/8;
  }
  .pc-accordion-item--first {
    border-start-start-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
    border-start-end-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
  }
  .pc-accordion-item--all-except-last {
    @apply border-b-0;
  }
  .pc-accordion-item__heading {
    @apply text-sm font-medium;
  }
  .pc-accordion--rows .pc-accordion-item__chevron {
    @apply h-4 w-4 translate-y-0.5 text-gray-400 dark:text-gray-500;
  }
  .pc-accordion-item__chevron {
    @apply shrink-0 w-6 h-6 ml-3 text-gray-400 duration-300 fill-current dark:group-hover:text-gray-300 group-hover:text-gray-500;
  }
  .pc-accordion-item__content-container {
    @apply border border-gray-200 bg-white px-4 py-3.5 text-sm leading-relaxed text-gray-500 dark:border-gray-400/17 dark:bg-gray-900 dark:text-gray-400;
  }
  .pc-accordion-item__content-container--not-last {
    @apply border-b-0;
  }
  /* default: the shadcn row style - hairline dividers, no boxes */
  .pc-accordion-row {
    @apply border-b border-gray-200 last:border-b-0 dark:border-gray-400/17;
  }
  .pc-accordion-item--row {
    @apply flex w-full items-start justify-between gap-4 py-4 text-left text-sm font-medium text-gray-900 transition-all hover:underline focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50 dark:text-gray-100;
  }
  .pc-accordion-item__content--row {
    @apply pb-4 text-sm leading-relaxed text-gray-500 dark:text-gray-400;
  }
  /* compact scales */
  .pc-accordion--sm .pc-accordion-item--row {
    @apply py-3;
  }
  .pc-accordion--sm .pc-accordion-item__content--row {
    @apply pb-3;
  }
  .pc-accordion--sm .pc-accordion-item {
    @apply px-4 py-3;
  }
  .pc-accordion--sm .pc-accordion-item__heading {
    @apply text-sm font-medium;
  }
  .pc-accordion--sm .pc-accordion-item__content-container {
    @apply px-4 py-3 text-sm;
  }
  .pc-accordion--sm .pc-accordion-item__button--ghost {
    @apply py-2.5;
  }
  .pc-accordion--sm .pc-accordion-item__content--ghost {
    @apply pb-3 text-sm;
  }
  .pc-accordion-item__content-container--last {
    @apply border-t-0;
    border-end-start-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
    border-end-end-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
  }
  /* only the bordered variant highlights its open header - rows stay clean */
  .pc-accordion-item.pc-accordion-item__content-container--highlight-accordion-button-on-expanded-js-attributes {
    @apply bg-gray-50 dark:bg-gray-400/8;
  }

  /* Ghost variant */
  .pc-accordion--ghost {
    @apply w-full mx-auto divide-y divide-gray-900/10 dark:divide-gray-400/17;
  }

  .pc-accordion-item--ghost {
    @apply py-6;
  }

  .pc-accordion-item__button--ghost {
    @apply flex w-full items-start justify-between py-4 text-left text-gray-900 dark:text-gray-100;
  }

  .pc-accordion-item__minus {
    @apply w-6! h-6! text-gray-400 duration-300 fill-current dark:group-hover:text-gray-300 group-hover:text-gray-500;
  }
  .pc-accordion-item__plus {
    @apply w-6! h-6! text-gray-400 duration-300 fill-current dark:group-hover:text-gray-300 group-hover:text-gray-500;
  }

  .pc-accordion-item__heading--ghost {
    @apply text-sm font-medium leading-6;
  }

  .pc-accordion-item__icon-container--ghost {
    @apply relative flex items-center ml-6 h-7;
  }

  .pc-accordion-item__content--ghost {
    @apply pb-4 pr-12 text-sm leading-relaxed text-gray-500 dark:text-gray-400;
  }

  /* Marquee Container */
  .pc-marquee-container {
    @apply relative flex p-2 overflow-hidden;
    gap: var(--gap);
  }

  .pc-marquee-container.pc-vertical {
    @apply flex-col;
  }

  /* Max width variants */
  .pc-marquee-container[max-width="sm"] {
    @apply max-w-sm;
  }

  .pc-marquee-container[max-width="md"] {
    @apply max-w-md;
  }

  .pc-marquee-container[max-width="lg"] {
    @apply max-w-lg;
  }

  .pc-marquee-container[max-width="xl"] {
    @apply max-w-xl;
  }

  .pc-marquee-container[max-width="2xl"] {
    @apply max-w-2xl;
  }

  /* Max height variants */
  .pc-marquee-container[max-height="sm"] {
    @apply max-h-[24rem];
  }

  .pc-marquee-container[max-height="md"] {
    @apply max-h-[28rem];
  }

  .pc-marquee-container[max-height="lg"] {
    @apply max-h-[32rem];
  }

  .pc-marquee-container[max-height="xl"] {
    @apply max-h-[36rem];
  }

  .pc-marquee-container[max-height="2xl"] {
    @apply max-h-[42rem];
  }

  /* Marquee Content */
  .pc-marquee-content {
    @apply flex justify-around shrink-0;
    gap: var(--gap);
  }

  .pc-marquee-horizontal {
    @apply flex-row;
    animation: marquee var(--duration) linear infinite;
  }

  .pc-marquee-vertical {
    @apply flex-col;
    animation: marquee-vertical var(--duration) linear infinite;
  }

  .pc-pause-on-hover {
    @apply group-hover:[animation-play-state:paused];
  }

  .pc-review-card {
    @apply relative md:w-64 cursor-pointer overflow-hidden border p-4
      border-black/10 bg-black/[0.01] hover:bg-black/[0.05]
      dark:border-gray-400/17 dark:bg-gray-400/17 dark:hover:bg-white/[0.15];
    border-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
  }

  .pc-review-header {
    @apply flex items-center gap-2;
  }

  .pc-review-meta {
    @apply flex flex-col;
  }

  .pc-review-username {
    @apply text-xs text-black/40 dark:text-white/40;
  }

  .pc-review-body {
    @apply mt-2;
  }

  /* Animations */
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }

  @keyframes marquee-vertical {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(calc(-100% - var(--gap)));
    }
  }

  /* edge fade via mask: works on ANY background, no shade to mismatch */
  .pc-marquee--fade {
    mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  }
  .pc-marquee--fade.pc-vertical {
    mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
  }




  /* Modal */
  .pc-modal {
    @apply relative z-50;
  }
  .pc-modal__overlay {
    @apply fixed inset-0 z-50 transition-opacity bg-black/50 dark:bg-black/60;
  }
  .pc-modal__wrapper {
    @apply fixed inset-0 z-50 flex items-center justify-center px-4 my-4 overflow-hidden transform sm:px-6;
  }
  .pc-modal__box {
    @apply w-full max-h-full overflow-auto bg-white shadow-lg border border-gray-200 dark:bg-gray-900 dark:border-gray-400/17;
    border-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
  }
  .pc-modal__box--sm {
    @apply max-w-sm;
  }
  .pc-modal__box--md {
    @apply max-w-xl;
  }
  .pc-modal__box--lg {
    @apply max-w-3xl;
  }
  .pc-modal__box--xl {
    @apply max-w-5xl;
  }
  .pc-modal__box--2xl {
    @apply max-w-7xl;
  }
  .pc-modal__box--full {
    @apply max-w-full;
  }
  .pc-modal__header {
    @apply px-5 py-3 border-b border-gray-100 dark:border-gray-700;
  }
  .pc-modal__header__container {
    @apply flex items-center justify-between;
  }
  .pc-modal__header__text {
    @apply font-semibold text-gray-800 dark:text-gray-200;
  }
  .pc-modal__header__button {
    @apply relative flex flex-none text-gray-400 transition-colors cursor-pointer rounded-sm;
    @apply hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300;
    @apply focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50;
  }

  .pc-modal__header__button::before {
    content: "";
    @apply absolute -inset-2;
  }
  .pc-modal__header__close-svg {
    @apply w-5 h-5 fill-current;
  }
  .pc-modal__content {
    @apply p-5;
  }

  /* Skeleton */

  /* v2 primitives: one brick, three shapes, three animations. Explicit
     per-brick animation classes beat the group cascade, which beats the
     pulse default (the :where() keeps base/cascade at zero specificity). */
  .pc-skeleton {
    @apply bg-gray-200 dark:bg-gray-400/17;
  }
  .pc-skeleton--block {
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.25rem), 0px);
  }
  .pc-skeleton--text {
    @apply h-4 w-full rounded-full;
  }
  .pc-skeleton--circle {
    @apply rounded-full;
  }
  :where(.pc-skeleton) {
    @apply animate-pulse;
  }
  :where(.pc-skeleton-group--anim-shimmer .pc-skeleton) {
    animation: none;
  }
  :where(.pc-skeleton-group--anim-none .pc-skeleton) {
    animation: none;
  }
  .pc-skeleton--anim-pulse {
    @apply animate-pulse;
  }
  .pc-skeleton--anim-none {
    animation: none;
  }
  .pc-skeleton--anim-shimmer,
  .pc-skeleton-group--anim-shimmer .pc-skeleton:not(.pc-skeleton--anim-pulse):not(.pc-skeleton--anim-none) {
    @apply relative overflow-hidden;
    animation: none;
  }
  .pc-skeleton--anim-shimmer::after,
  .pc-skeleton-group--anim-shimmer .pc-skeleton:not(.pc-skeleton--anim-pulse):not(.pc-skeleton--anim-none)::after {
    content: "";
    @apply absolute inset-0;
    transform: translateX(-100%);
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, white 60%, transparent),
      transparent
    );
  }
  .dark .pc-skeleton--anim-shimmer::after,
  .dark .pc-skeleton-group--anim-shimmer .pc-skeleton:not(.pc-skeleton--anim-pulse):not(.pc-skeleton--anim-none)::after {
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, white 9%, transparent),
      transparent
    );
  }
  @media (prefers-reduced-motion: no-preference) {
    .pc-skeleton--anim-shimmer::after,
    .pc-skeleton-group--anim-shimmer .pc-skeleton:not(.pc-skeleton--anim-pulse):not(.pc-skeleton--anim-none)::after {
      animation: pc-skeleton-shimmer 1.8s ease-in-out infinite;
    }
  }
  @keyframes pc-skeleton-shimmer {
    100% {
      transform: translateX(100%);
    }
  }
  .pc-skeleton-text {
    @apply flex w-full flex-col gap-2.5;
  }
  .pc-skeleton-group--anim-none .pc-skeleton {
    animation: none;
  }

  /* Default Skeleton */
  .pc-skeleton--default {
    @apply animate-pulse;
    @apply max-w-sm;
  }

  .pc-skeleton--default__line {
    @apply bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--default__line--h-2 {
    @apply h-2;
  }

  .pc-skeleton--default__line--h-2\.5 {
    @apply h-2.5;
  }

  .pc-skeleton--default__line--w-48 {
    @apply w-48;
  }

  .pc-skeleton--default__line--mb-4 {
    @apply mb-4;
  }

  .pc-skeleton--default__line--mb-2\.5 {
    @apply mb-2.5;
  }

  .pc-skeleton--default__line--max-w-360px {
    @apply max-w-[360px];
  }

  .pc-skeleton--default__line--max-w-330px {
    @apply max-w-[330px];
  }

  .pc-skeleton--default__line--max-w-300px {
    @apply max-w-[300px];
  }

  /* Image Skeleton */
  .pc-skeleton--image {
    @apply animate-pulse;
    @apply space-y-8 md:space-y-0 md:space-x-8 rtl:space-x-reverse md:flex md:items-center;
  }

  .pc-skeleton--image__image-placeholder {
    @apply flex items-center justify-center w-full h-48 bg-gray-300 rounded-sm sm:w-96 dark:bg-gray-700;
  }

  .pc-skeleton--image__icon {
    @apply w-10 h-10 text-gray-200 dark:text-gray-600;
  }

  .pc-skeleton--image__content {
    @apply w-full;
  }

  /* Repeat similar classes for lines inside the image skeleton */
  .pc-skeleton--image__line {
    @apply bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--image__line--h-2 {
    @apply h-2;
  }

  .pc-skeleton--image__line--h-2\.5 {
    @apply h-2.5;
  }

  .pc-skeleton--image__line--w-48 {
    @apply w-48;
  }

  .pc-skeleton--image__line--mb-4 {
    @apply mb-4;
  }

  .pc-skeleton--image__line--mb-2\.5 {
    @apply mb-2.5;
  }

  .pc-skeleton--image__line--max-w-480px {
    @apply max-w-[480px];
  }

  .pc-skeleton--image__line--max-w-440px {
    @apply max-w-[440px];
  }

  .pc-skeleton--image__line--max-w-460px {
    @apply max-w-[460px];
  }

  .pc-skeleton--image__line--max-w-360px {
    @apply max-w-[360px];
  }

  /* Video Skeleton */
  .pc-skeleton--video {
    @apply animate-pulse;
    @apply flex items-center justify-center h-56 max-w-sm bg-gray-300 rounded-lg dark:bg-gray-700;
  }

  .pc-skeleton--video__icon {
    @apply w-10 h-10 text-gray-200 dark:text-gray-600;
  }

  /* Text Skeleton */
  .pc-skeleton--text {
    @apply animate-pulse;
    @apply space-y-2.5 max-w-lg;
  }

  .pc-skeleton--text__line-group {
    @apply flex items-center w-full;
  }

  .pc-skeleton--text__line-group--max-w-480px {
    @apply max-w-[480px];
  }

  .pc-skeleton--text__line-group--max-w-400px {
    @apply max-w-[400px];
  }

  .pc-skeleton--text__line-group--max-w-440px {
    @apply max-w-[440px];
  }

  .pc-skeleton--text__line-group--max-w-360px {
    @apply max-w-[360px];
  }

  .pc-skeleton--text__block {
    @apply h-2.5 bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--text__block--bg-gray-300 {
    @apply bg-gray-300 dark:bg-gray-600;
  }

  .pc-skeleton--text__block--w-32 {
    @apply w-32;
  }

  .pc-skeleton--text__block--w-24 {
    @apply w-24;
  }

  .pc-skeleton--text__block--w-full {
    @apply w-full;
  }

  .pc-skeleton--text__block--w-80 {
    @apply w-80;
  }

  .pc-skeleton--text__block--ms-2 {
    @apply ms-2;
  }

  /* Card Skeleton */
  .pc-skeleton--card {
    @apply animate-pulse;
    @apply max-w-sm p-4 border border-gray-200 rounded-sm shadow-sm md:p-6 dark:border-gray-700;
  }

  .pc-skeleton--card__image-placeholder {
    @apply flex items-center justify-center h-48 mb-4 bg-gray-300 rounded-sm dark:bg-gray-700;
  }

  .pc-skeleton--card__icon {
    @apply w-10 h-10 text-gray-200 dark:text-gray-600;
  }

  .pc-skeleton--card__line {
    @apply bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--card__line--h-2\.5 {
    @apply h-2.5 w-48;
  }

  .pc-skeleton--card__line--h-2 {
    @apply h-2;
  }

  .pc-skeleton--card__line--mb-4 {
    @apply mb-4;
  }

  .pc-skeleton--card__line--mb-2\.5 {
    @apply mb-2.5;
  }

  .pc-skeleton--card__avatar {
    @apply flex items-center mt-4;
  }

  .pc-skeleton--card__avatar-icon {
    @apply w-10 h-10 text-gray-200 me-3 dark:text-gray-700;
  }

  .pc-skeleton--card__avatar-text {
    @apply h-2.5 bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--card__avatar-text--w-32 {
    @apply w-32 mb-2;
  }

  .pc-skeleton--card__avatar-text--w-48 {
    @apply w-48 h-2;
  }

  /* Widget Skeleton */

  .pc-skeleton--widget {
    @apply animate-pulse;
    @apply max-w-sm p-4 border border-gray-200 rounded-sm shadow-sm md:p-6 dark:border-gray-700;
  }

  .pc-skeleton--widget__header-line {
    @apply h-2.5 bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--widget__header-line--w-32 {
    @apply w-32 mb-2.5;
  }

  .pc-skeleton--widget__header-line--w-48 {
    @apply w-48 h-2 mb-10;
  }

  .pc-skeleton--widget__chart {
    @apply flex items-baseline mt-4;
  }

  .pc-skeleton--widget__chart-bar {
    @apply w-full bg-gray-200 rounded-t-lg dark:bg-gray-700;
  }

  .pc-skeleton--widget__chart-bar--h-72 {
    @apply h-72;
  }

  .pc-skeleton--widget__chart-bar--h-56 {
    @apply h-56;
  }

  .pc-skeleton--widget__chart-bar--h-64 {
    @apply h-64;
  }

  .pc-skeleton--widget__chart-bar--h-80 {
    @apply h-80;
  }

  .pc-skeleton--widget__chart-bar--ms-6 {
    @apply ms-6;
  }

  /* List Skeleton */

  .pc-skeleton--list {
    @apply animate-pulse;
    @apply max-w-md p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded-sm shadow-sm md:p-6 dark:divide-gray-700 dark:border-gray-700;
  }

  .pc-skeleton--list__item {
    @apply flex items-center justify-between;
  }

  .pc-skeleton--list__item--pt-4 {
    @apply pt-4;
  }

  .pc-skeleton--list__text-group {
    @apply flex flex-col;
  }

  .pc-skeleton--list__text-line {
    @apply w-24 mb-2.5 bg-gray-300 rounded-full dark:bg-gray-600;
  }

  .pc-skeleton--list__sub-text-line {
    @apply w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--list__text-line--h-2\.5 {
    @apply h-2.5;
  }

  .pc-skeleton--list__button {
    @apply h-2.5 bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--list__button--w-12 {
    @apply w-12;
  }

  /* Testimonial Skeleton */

  .pc-skeleton--testimonial {
    @apply animate-pulse;
  }

  .pc-skeleton--testimonial__line {
    @apply h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 mx-auto;
  }

  .pc-skeleton--testimonial__line--h-2\.5 {
    @apply h-2.5;
  }

  .pc-skeleton--testimonial__line--max-w-640px {
    @apply max-w-[640px] mb-2.5;
  }

  .pc-skeleton--testimonial__line--max-w-540px {
    @apply max-w-[540px];
  }

  .pc-skeleton--testimonial__footer {
    @apply flex items-center justify-center mt-4;
  }

  .pc-skeleton--testimonial__avatar-icon {
    @apply w-8 h-8 text-gray-200 me-4 dark:text-gray-700;
  }

  .pc-skeleton--testimonial__avatar-text {
    @apply h-2.5 bg-gray-200 rounded-full dark:bg-gray-700;
  }

  .pc-skeleton--testimonial__avatar-text--w-20 {
    @apply w-20 me-3;
  }

  .pc-skeleton--testimonial__avatar-text--w-24 {
    @apply w-24 h-2;
  }

  /* Slideover */

  .pc-slideover__overlay {
    @apply fixed inset-0 z-50 transition-opacity bg-black/50 dark:bg-black/60;
  }
  .pc-slideover__wrapper {
    @apply fixed inset-0 z-50 flex overflow-hidden;
  }
  .pc-slideover__box {
    @apply flex w-full max-h-full flex-col bg-white shadow-lg dark:bg-gray-900;
  }
  .pc-slideover__box--sm {
    @apply max-w-sm;
  }
  .pc-slideover__box--md {
    @apply max-w-xl;
  }
  .pc-slideover__box--lg {
    @apply max-w-3xl;
  }
  .pc-slideover__box--xl {
    @apply max-w-5xl;
  }
  .pc-slideover__box--2xl {
    @apply max-w-7xl;
  }
  .pc-slideover__box--full {
    @apply max-w-full;
  }
  .pc-slideover__header {
    @apply flex-none px-5 py-4 border-b border-gray-100 dark:border-gray-400/17;
  }
  .pc-slideover__header__titles {
    @apply flex min-w-0 flex-col gap-1;
  }
  .pc-slideover__description {
    @apply text-sm text-gray-500 dark:text-gray-400;
  }
  .pc-slideover__header__container {
    @apply flex items-center justify-between;
  }
  .pc-slideover__header__text {
    @apply font-semibold text-gray-900 dark:text-gray-100;
  }
  .pc-slideover__header__button {
    @apply relative flex flex-none self-start items-center h-6 text-gray-400 transition-colors cursor-pointer rounded-sm hover:text-gray-600 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50 dark:text-gray-500 dark:hover:text-gray-300;
  }

  .pc-slideover__header__button::before {
    content: "";
    @apply absolute -inset-2;
  }
  .pc-slideover__header__close-svg {
    @apply w-5 h-5 fill-current;
  }
  .pc-slideover__footer {
    @apply flex flex-none items-center justify-end gap-2 border-t border-gray-100 px-5 py-4 dark:border-gray-400/17;
  }
  .pc-slideover__content {
    @apply p-5 flex-1 overflow-y-auto;
  }

  /* Stepper */
  .pc-stepper {
    @apply w-full;
  }

  .pc-stepper__container {
    @apply flex w-full md:gap-4;
  }

  .pc-stepper--horizontal .pc-stepper__container {
    @apply flex-col items-start md:flex-row md:items-center;
  }

  .pc-stepper--vertical .pc-stepper__container {
    @apply flex-col items-start;
  }

  /* Item */
  .pc-stepper__item {
    @apply shrink-0;
  }

  .pc-stepper__item-content {
    @apply flex items-center gap-3 ring-0 focus:outline-hidden;
  }

  /* Node */
  .pc-stepper__node {
    @apply flex cursor-pointer items-center gap-3 transition-all duration-200 ease-out hover:opacity-90;
  }

  /* Indicator */
  .pc-stepper__indicator {
    @apply grid shrink-0 place-items-center rounded-full border-2 border-gray-300 bg-transparent text-gray-500 transition-all duration-200 dark:border-gray-400/25 dark:text-gray-400;
  }

  .pc-stepper__node--complete .pc-stepper__indicator {
    @apply border-transparent bg-primary-600;
    color: var(--pc-button-solid-fg, #fff);
  }

  .pc-stepper__node--active .pc-stepper__indicator {
    @apply border-primary-600 bg-primary-50 text-primary-700 dark:bg-primary-500/15 dark:text-primary-300;
  }

  /* Size variants for indicator */
  .pc-stepper--sm .pc-stepper__indicator {
    @apply h-7 w-7;
  }

  .pc-stepper--md .pc-stepper__indicator {
    @apply h-8 w-8;
  }

  .pc-stepper--lg .pc-stepper__indicator {
    @apply h-10 w-10;
  }

  /* Check icon */
  .pc-stepper__check {
    color: inherit;
  }

  .pc-stepper--sm .pc-stepper__check {
    @apply h-3.5 w-3.5;
  }

  .pc-stepper--md .pc-stepper__check {
    @apply h-4 w-4;
  }

  .pc-stepper--lg .pc-stepper__check {
    @apply h-5 w-5;
  }

  /* Number */
  .pc-stepper__number {
    @apply font-medium;
  }

  .pc-stepper--sm .pc-stepper__number {
    @apply text-xs;
  }

  .pc-stepper--md .pc-stepper__number {
    @apply text-base;
  }

  .pc-stepper--lg .pc-stepper__number {
    @apply text-lg;
  }

  /* Content */
  .pc-stepper__content {
    @apply flex flex-col w-full gap-1 text-left grow;
  }

  /* Title */
  .pc-stepper__title {
    @apply text-sm font-semibold text-gray-900 dark:text-gray-100;
  }

  /* Description */
  .pc-stepper__description {
    @apply mt-0.5 text-xs text-gray-500 dark:text-gray-400;
  }

  /* Labels scale with the size dial, like the circles do */
  .pc-stepper--sm .pc-stepper__title {
    @apply text-xs;
  }

  .pc-stepper--sm .pc-stepper__description {
    @apply text-[11px];
  }

  .pc-stepper--lg .pc-stepper__title {
    @apply text-base;
  }

  .pc-stepper--lg .pc-stepper__description {
    @apply text-sm;
  }

  /* Labels under the circles - the classic wizard look. Applies at the
     md+ breakpoint where the stepper is genuinely horizontal; below it
     the stacked mobile layout keeps labels beside (which is why the
     sibling connectors are only md:hidden, not removed).

     Items share the row equally and each item after the first draws its
     own connector as an absolutely-positioned line running from the
     previous circle's edge to its own - independent of label width, so
     wide labels never push the line away from the circles. Offsets are
     half the indicator height (top) and half the item width back plus
     the circle radius and a little air (left/right), per size. */
  .pc-stepper--labels-bottom.pc-stepper--horizontal .pc-stepper__container {
    @apply md:items-start md:gap-0;
  }

  .pc-stepper--labels-bottom .pc-stepper__item {
    @apply md:relative md:min-w-0 md:flex-1;
  }

  .pc-stepper--labels-bottom .pc-stepper__item-content {
    @apply md:w-full md:flex-col md:items-center md:gap-2;
  }

  .pc-stepper--labels-bottom .pc-stepper__content {
    @apply md:text-center;
  }

  .pc-stepper--labels-bottom .pc-stepper__connector-wrapper {
    @apply md:hidden;
  }

  .pc-stepper--labels-bottom .pc-stepper__item:not(:first-child)::before {
    @apply hidden bg-gray-200 transition-colors md:block dark:bg-gray-400/17;
    content: "";
    position: absolute;
    height: 2px;
  }

  /* :not(:first-child) mirrors the base line rule's specificity, which
     would otherwise beat this one and keep completed lines gray */
  .pc-stepper--labels-bottom .pc-stepper__item--line-complete:not(:first-child)::before {
    @apply bg-primary-600 dark:bg-primary-600;
  }

  .pc-stepper--labels-bottom.pc-stepper--sm .pc-stepper__item:not(:first-child)::before {
    top: 13px;
    left: calc(-50% + 20px);
    right: calc(50% + 20px);
  }

  .pc-stepper--labels-bottom.pc-stepper--md .pc-stepper__item:not(:first-child)::before {
    top: 15px;
    left: calc(-50% + 22px);
    right: calc(50% + 22px);
  }

  .pc-stepper--labels-bottom.pc-stepper--lg .pc-stepper__item:not(:first-child)::before {
    top: 19px;
    left: calc(-50% + 26px);
    right: calc(50% + 26px);
  }

  /* Connector Wrapper */
  .pc-stepper__connector-wrapper {
    @apply flex shrink justify-center self-start md:self-center;
  }
  .pc-stepper--horizontal .pc-stepper__connector-wrapper {
    @apply md:min-w-8 md:flex-1;
  }
  .pc-stepper--sm .pc-stepper__connector-wrapper {
    @apply w-7 md:w-auto;
  }
  .pc-stepper--md .pc-stepper__connector-wrapper {
    @apply w-8 md:w-auto;
  }
  .pc-stepper--lg .pc-stepper__connector-wrapper {
    @apply w-10 md:w-auto;
  }
  .pc-stepper--vertical .pc-stepper__connector-wrapper {
    @apply md:self-start;
  }
  .pc-stepper--vertical.pc-stepper--sm .pc-stepper__connector-wrapper {
    @apply md:w-7;
  }
  .pc-stepper--vertical.pc-stepper--md .pc-stepper__connector-wrapper {
    @apply md:w-8;
  }
  .pc-stepper--vertical.pc-stepper--lg .pc-stepper__connector-wrapper {
    @apply md:w-10;
  }
  .pc-stepper__title {
    @apply text-sm font-medium leading-tight text-gray-900 dark:text-gray-100;
  }

  .pc-stepper--vertical .pc-stepper__container {
    @apply md:gap-1;
  }

  /* Connector */
  .pc-stepper__connector {
    @apply shrink bg-gray-200 transition-colors dark:bg-gray-400/17;
  }

  .pc-stepper__connector--complete {
    @apply bg-primary-600;
  }

  .pc-stepper--horizontal .pc-stepper__connector {
    @apply h-8 w-0.5 my-2 mx-auto md:h-0.5 md:w-full md:my-auto md:mx-0;
  }

  .pc-stepper--vertical .pc-stepper__connector {
    @apply w-0.5 h-8 mx-auto;
  }

  /* Rating */

  .pc-rating__wrapper,
  .pc-rating__group {
    @apply inline-flex items-center gap-2;
    border: 0;
    margin: 0;
    padding: 0;
  }
  .pc-rating--label-bottom.pc-rating__wrapper,
  .pc-rating--label-bottom.pc-rating__group {
    @apply flex-col items-center gap-1.5;
  }
  .pc-rating__icons {
    @apply flex items-center gap-1;
  }
  .pc-rating__label {
    @apply text-sm tabular-nums text-gray-500 select-none dark:text-gray-400;
  }
  .pc-rating__star--filled {
    @apply w-5 h-5 fill-warning-500;
  }
  .pc-rating__star--half {
    @apply w-5 h-5 fill-warning-500;
  }
  .pc-rating__star--empty {
    @apply w-5 h-5 fill-gray-400 dark:fill-gray-500;
  }

  /* v2: interactive + icon sets. The radio is visually hidden; the label is
     the hit target. All fill/preview logic is pure CSS via :has(). */
  .pc-rating__item {
    @apply relative inline-flex rounded;
  }
  .pc-rating__fill {
    @apply absolute inset-0 overflow-hidden;
    width: var(--pc-rating-fill, 0%);
  }
  .pc-rating__fill > * {
    @apply flex-none;
  }
  .pc-rating__group .pc-rating__item {
    @apply cursor-pointer;
  }
  .pc-rating__input {
    @apply absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0;
    clip-path: inset(50%);
  }
  .pc-rating__item:has(.pc-rating__input:focus-visible) {
    @apply ring-2 ring-primary-500/50 ring-offset-1 ring-offset-white dark:ring-offset-gray-950;
  }
  .pc-rating--disabled {
    @apply pointer-events-none opacity-50;
  }

  /* sizes */
  .pc-rating--sm .pc-rating__item :is(svg, span:not(.pc-rating__fill)) {
    @apply h-4 w-4;
  }
  .pc-rating--md .pc-rating__item :is(svg, span:not(.pc-rating__fill)) {
    @apply h-5 w-5;
  }
  .pc-rating--lg .pc-rating__item :is(svg, span:not(.pc-rating__fill)) {
    @apply h-7 w-7;
  }
  .pc-rating--sm :is(.pc-rating__star--filled, .pc-rating__star--half, .pc-rating__star--empty) {
    @apply h-4 w-4;
  }
  .pc-rating--lg :is(.pc-rating__star--filled, .pc-rating__star--half, .pc-rating__star--empty) {
    @apply h-7 w-7;
  }

  /* cumulative sets (star, heart, custom): rest state = empty. The active
     colour is a token - override per instance with --pc-rating-active-color. */
  .pc-rating--star {
    --pc-rating-active-color: var(--color-warning-500);
  }
  .pc-rating--heart {
    --pc-rating-active-color: var(--color-danger-500);
  }
  .pc-rating--custom {
    --pc-rating-active-color: var(--color-warning-500);
  }
  .pc-rating--star .pc-rating__icon,
  .pc-rating--heart .pc-rating__icon {
    @apply fill-gray-300 transition-colors dark:fill-gray-600;
  }
  .pc-rating--custom .pc-rating__item {
    @apply text-gray-300 transition-colors dark:text-gray-600;
  }
  .pc-rating--custom .pc-rating__item svg {
    fill: currentColor;
  }
  /* the fractional overlay copy always renders in the active colour */
  .pc-rating--heart .pc-rating__fill .pc-rating__icon {
    fill: var(--pc-rating-active-color);
  }
  .pc-rating--custom .pc-rating__fill {
    color: var(--pc-rating-active-color);
  }

  /* checked fill: the item holding the checked radio and every item before it
     (= items with a LATER checked sibling). Suspended while the group is
     hovered so the preview owns the row. */
  :is(.pc-rating--star, .pc-rating--heart).pc-rating__group:not(.pc-rating--half):not(:hover) :is(.pc-rating__item:has(.pc-rating__input:checked), .pc-rating__item:has(~ .pc-rating__item .pc-rating__input:checked)) .pc-rating__icon {
    fill: var(--pc-rating-active-color);
  }
  .pc-rating--custom.pc-rating__group:not(.pc-rating--half):not(:hover) :is(.pc-rating__item:has(.pc-rating__input:checked), .pc-rating__item:has(~ .pc-rating__item .pc-rating__input:checked)) {
    color: var(--pc-rating-active-color);
  }

  /* hover preview: the hovered item and every item before it */
  :is(.pc-rating--star, .pc-rating--heart).pc-rating__group:not(.pc-rating--half):hover :is(.pc-rating__item:hover, .pc-rating__item:has(~ .pc-rating__item:hover)) .pc-rating__icon {
    fill: var(--pc-rating-active-color);
  }
  .pc-rating--custom.pc-rating__group:not(.pc-rating--half):hover :is(.pc-rating__item:hover, .pc-rating__item:has(~ .pc-rating__item:hover)) {
    color: var(--pc-rating-active-color);
  }

  /* half precision: two hit areas per icon; the fill overlay carries the
     state. 50%% when a start-half radio is checked/hovered, 100%% when the
     end half is, or when any later item holds the state. */
  .pc-rating__half {
    @apply absolute inset-y-0 z-10 w-1/2 cursor-pointer;
  }
  .pc-rating__half--start {
    left: 0;
  }
  .pc-rating__half--end {
    right: 0;
  }
  .pc-rating--star .pc-rating__fill .pc-rating__icon {
    fill: var(--pc-rating-active-color);
  }
  .pc-rating--half.pc-rating__group:not(:hover) .pc-rating__item:has(~ .pc-rating__item .pc-rating__input:checked) .pc-rating__fill,
  .pc-rating--half.pc-rating__group:not(:hover) .pc-rating__item:has(.pc-rating__half--end .pc-rating__input:checked) .pc-rating__fill {
    width: 100%;
  }
  .pc-rating--half.pc-rating__group:not(:hover) .pc-rating__item:has(.pc-rating__half--start .pc-rating__input:checked) .pc-rating__fill {
    width: 50%;
  }
  .pc-rating--half.pc-rating__group:hover .pc-rating__item:has(~ .pc-rating__item .pc-rating__half:hover) .pc-rating__fill,
  .pc-rating--half.pc-rating__group:hover .pc-rating__item:has(.pc-rating__half--end:hover) .pc-rating__fill {
    width: 100%;
  }
  .pc-rating--half.pc-rating__group:hover .pc-rating__item:has(.pc-rating__half--start:hover) .pc-rating__fill {
    width: 50%;
  }

  /* faces: a sentiment scale - single-select, one colour per expression */
  .pc-rating--face .pc-rating__icon {
    @apply text-gray-300 transition-all dark:text-gray-600;
  }
  .pc-rating--face .pc-rating__item:is([data-selected], :has(.pc-rating__input:checked)) .pc-rating__icon {
    @apply scale-110;
  }
  .pc-rating--face.pc-rating__group:hover .pc-rating__item:hover .pc-rating__icon {
    @apply scale-110;
  }
  /* while hovering, the preview owns the colour */
  .pc-rating--face.pc-rating__group:hover .pc-rating__item:not(:hover):has(.pc-rating__input:checked) .pc-rating__icon {
    @apply scale-100 text-gray-300 dark:text-gray-600;
  }
  .pc-rating--face .pc-rating__item[data-index="1"]:is([data-selected], :has(.pc-rating__input:checked)) .pc-rating__icon,
  .pc-rating--face.pc-rating__group .pc-rating__item[data-index="1"]:hover .pc-rating__icon {
    @apply text-danger-500;
  }
  .pc-rating--face .pc-rating__item[data-index="2"]:is([data-selected], :has(.pc-rating__input:checked)) .pc-rating__icon,
  .pc-rating--face.pc-rating__group .pc-rating__item[data-index="2"]:hover .pc-rating__icon {
    @apply text-orange-500;
  }
  .pc-rating--face .pc-rating__item[data-index="3"]:is([data-selected], :has(.pc-rating__input:checked)) .pc-rating__icon,
  .pc-rating--face.pc-rating__group .pc-rating__item[data-index="3"]:hover .pc-rating__icon {
    @apply text-warning-500;
  }
  .pc-rating--face .pc-rating__item[data-index="4"]:is([data-selected], :has(.pc-rating__input:checked)) .pc-rating__icon,
  .pc-rating--face.pc-rating__group .pc-rating__item[data-index="4"]:hover .pc-rating__icon {
    @apply text-lime-500;
  }
  .pc-rating--face .pc-rating__item[data-index="5"]:is([data-selected], :has(.pc-rating__input:checked)) .pc-rating__icon,
  .pc-rating--face.pc-rating__group .pc-rating__item[data-index="5"]:hover .pc-rating__icon {
    @apply text-success-500;
  }

  /* Menu */

  .pc-vertical-menu {
    @apply flex flex-col gap-5;
  }

  .pc-vertical-menu-item__icon {
    @apply shrink-0 w-5 h-5;
  }

  .pc-vertical-menu-item {
    @apply flex items-center w-full gap-3 px-3 py-2 text-sm font-semibold leading-none transition-colors duration-200 ease-out;
    border-radius: max(calc(min(var(--pc-radius, 0.625rem), 1rem) - 0.25rem), 0px);
  }

  .pc-vertical-menu-item--active {
    @apply text-primary-700 dark:text-primary-300 bg-gray-50 dark:bg-gray-400/17;
  }

  .pc-vertical-menu-item--inactive {
    @apply text-gray-700 hover:bg-gray-50 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white dark:hover:bg-gray-400/17;
  }

  .pc-vertical-menu__menu-group__wrapper {
    @apply divide-y divide-gray-300;
  }

  .pc-vertical-menu__menu-group {
    @apply space-y-1;
  }

  .pc-vertical-menu__menu-group__title {
    @apply pl-3 mb-3 text-xs font-semibold leading-6 text-gray-400 uppercase;
  }

  .pc-vertical-menu-item__label {
    @apply flex-1;
  }

  .pc-vertical-menu-item__toggle-label {
    @apply flex-1 text-left;
  }

  .pc-vertical-menu-item__toggle-chevron__icon {
    /* !important is needed because heroicon class overrides width and height */
    @apply w-3! h-3! ml-2 transition duration-200 transform;
  }

  .pc-vertical-menu-item__toggle-chevron__wrapper {
    @apply relative inline-block;
  }

  .pc-vertical-menu-item__submenu-wrapper {
    @apply mt-1 ml-3 space-y-1;
  }

  .pc-vertical-menu-item__icon--active {
    @apply shrink-0 w-5 h-5;
  }

  .pc-vertical-menu-item__icon--inactive {
    @apply shrink-0 w-5 h-5;
  }

  /* Other */

  /* This is for selects inside of a group of selects. Phoenix doesn't provide a way to add a class to these. */
  .select-wrapper select {
    @apply text-sm border-gray-300 rounded-md shadow-xs cursor-pointer disabled:bg-gray-100 disabled:cursor-not-allowed focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 dark:bg-gray-800 dark:text-gray-300 focus:outline-hidden;
  }

  label.has-error {
    @apply text-danger-900! dark:text-danger-200!;
  }

  span.has-error {
    @apply text-danger-900! dark:text-danger-200!;
  }

  textarea.has-error,
  input.has-error:not(:checked),
  select.has-error {
    @apply border-danger-500! focus:border-danger-500! text-danger-900! placeholder-danger-700! bg-danger-50! dark:text-danger-100! dark:placeholder-danger-300! dark:bg-danger-900! focus:ring-danger-500!;
  }

  input[type="file_input"].has-error {
    @apply border-danger-500! rounded-md! focus:border-danger-500! text-danger-900! placeholder-danger-700! bg-danger-50! file:border-none! dark:border-none! dark:bg-gray-950! dark:text-danger-400;
  }

  /* If in tailwind config, darkMode: 'class', use this: */
  .dark ::-webkit-calendar-picker-indicator {
    filter: invert(1);
  }

  /*
    Needed for datetime inputs to have the correct size in Safari
    See: https://github.com/twbs/bootstrap/issues/34433#issuecomment-1831467352
  */
  input::-webkit-datetime-edit {
    display: block;
    padding: 0;
  }

  /* Chat / AI (New) */

  .pc-chat {
    /* Theme tokens — override these to reskin without touching markup. */
    --pc-chat-radius: 1rem;
    --pc-chat-user-bg: var(--color-primary-600, #2563eb);
    /* label colour ON the user bubble - rides the same token as labels on
       primary solids, so it flips with the monochrome ramp in dark mode */
    --pc-chat-user-fg: var(--pc-button-solid-fg, #ffffff);
    --pc-chat-assistant-bg: var(--color-gray-100, #f3f4f6);
    --pc-chat-assistant-fg: var(--color-gray-900, #111827);
    @apply flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900;
    @apply dark:[--pc-chat-assistant-bg:color-mix(in_oklab,var(--color-gray-400)_10%,transparent)] dark:[--pc-chat-assistant-fg:var(--color-gray-100)];
  }
  .pc-chat__thread {
    @apply flex flex-1 flex-col gap-3 overflow-y-auto p-4;
    /* Override --pc-chat-thread-max-height (e.g. 100% / 70vh) to fit a full-page
       chat; set it to none to grow unbounded. */
    max-height: var(--pc-chat-thread-max-height, 28rem);
  }
  .pc-chat__footer {
    @apply border-t border-gray-200 p-3 dark:border-gray-700;
  }
  .pc-chat__row {
    @apply flex items-start gap-2;
  }
  .pc-chat__row--user {
    @apply justify-end;
  }
  /* bubble + action bar stack; carries the width cap so actions align under
     the bubble edge */
  .pc-chat__body {
    @apply flex min-w-0 max-w-[80%] flex-col;
  }
  .pc-chat__row--user .pc-chat__body {
    @apply items-end;
  }
  .pc-chat__row-actions {
    @apply mt-1;
  }
  .pc-chat__avatar {
    @apply flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full text-sm;
  }
  .pc-chat__bubble {
    @apply min-w-min max-w-full px-4 py-2 text-sm leading-relaxed;
    border-radius: var(--pc-chat-radius);
    /* Long URLs / unbroken tokens wrap instead of blowing out the bubble. */
    overflow-wrap: anywhere;
  }
  /* Preserve newlines ONLY on leaf text nodes — never on the bubble itself, or
     structural whitespace (and dev HEEx debug comments) renders as blank lines
     and balloons the bubble. Wrap plain message text in this. */
  .pc-chat__text {
    white-space: pre-wrap;
  }
  .pc-chat__bubble--user {
    background-color: var(--pc-chat-user-bg);
    color: var(--pc-chat-user-fg);
  }
  .pc-chat__bubble--assistant,
  .pc-chat__bubble--system {
    background-color: var(--pc-chat-assistant-bg);
    color: var(--pc-chat-assistant-fg);
  }
  /* plain (default): the AI convention - assistant text on the surface, no
     bubble; only the user side keeps one. Colour still rides the token. */
  .pc-chat--plain .pc-chat__bubble--assistant,
  .pc-chat--plain .pc-chat__bubble--system {
    @apply p-0;
    background-color: transparent;
    border-radius: 0;
  }
  .pc-chat--plain .pc-chat__row--assistant .pc-chat__body,
  .pc-chat--plain .pc-chat__row--system .pc-chat__body {
    @apply max-w-full flex-1;
  }
  .pc-chat__stream {
    @apply block text-left;
  }
  .pc-chat__stream-text {
    @apply inline whitespace-pre-wrap;
  }
  /* Before the first token: show the typing dots, hide text + caret. */
  .pc-chat__stream:not([data-started]) .pc-chat__stream-text,
  .pc-chat__stream:not([data-started]) .pc-chat__caret {
    @apply hidden;
  }
  /* After the first token: hide the typing dots. */
  .pc-chat__stream[data-started] .pc-chat__typing {
    @apply hidden;
  }
  .pc-chat__typing {
    @apply inline-flex items-center gap-0.5 align-middle;
  }
  .pc-chat__typing > span {
    @apply inline-block h-1 w-1 rounded-full;
    background-color: currentColor;
    opacity: 0.4;
    animation: pc-chat-bounce 1.2s ease-in-out infinite;
  }
  .pc-chat__typing > span:nth-child(2) {
    animation-delay: 0.15s;
  }
  .pc-chat__typing > span:nth-child(3) {
    animation-delay: 0.3s;
  }
  .pc-chat__caret {
    @apply ml-0.5 inline-block h-4 w-1.5 align-middle;
    background-color: currentColor;
    opacity: 0.6;
    animation: pc-chat-blink 1s steps(2, start) infinite;
  }

  /* Rendered markdown (committed assistant messages). Block content, so reset
     the bubble's pre-wrap and apply prose spacing. */
  .pc-chat__markdown {
    white-space: normal;
    @apply text-sm leading-relaxed;
  }
  .pc-chat__markdown > :first-child {
    @apply mt-0;
  }
  .pc-chat__markdown > :last-child {
    @apply mb-0;
  }
  .pc-chat__markdown p {
    @apply my-2;
  }
  .pc-chat__markdown h1 {
    @apply mt-4 mb-2 text-lg font-semibold;
  }
  .pc-chat__markdown h2 {
    @apply mt-4 mb-2 text-base font-semibold;
  }
  .pc-chat__markdown h3 {
    @apply mt-3 mb-1 text-sm font-semibold;
  }
  .pc-chat__markdown ul {
    @apply my-2 list-disc space-y-1 ps-5;
  }
  .pc-chat__markdown ol {
    @apply my-2 list-decimal space-y-1 ps-5;
  }
  .pc-chat__markdown a {
    @apply font-medium underline underline-offset-2;
  }
  .pc-chat__markdown blockquote {
    @apply my-2 border-s-2 border-gray-300 ps-3 text-gray-600 italic dark:border-gray-600 dark:text-gray-400;
  }
  /* Inline code (code blocks carry their own theme colours from the highlighter). */
  .pc-chat__markdown :not(pre) > code {
    @apply rounded bg-black/5 px-1 py-0.5 font-mono text-[0.85em] dark:bg-gray-400/17;
  }
  .pc-chat__markdown pre {
    @apply relative my-2 overflow-x-auto rounded-lg p-3 text-xs leading-relaxed;
  }
  .pc-chat__code-copy {
    @apply absolute right-2 top-2 rounded bg-gray-100/10 px-2 py-0.5 text-[11px] text-white/80 hover:bg-white/20;
  }
  .pc-chat__markdown table {
    @apply my-2 w-full border-collapse text-left;
  }
  .pc-chat__markdown th,
  .pc-chat__markdown td {
    @apply border border-gray-200 px-2 py-1 dark:border-gray-700;
  }
  .pc-chat__markdown th {
    @apply bg-black/5 font-semibold dark:bg-gray-400/17;
  }
  /* Tool-call card (generative-UI widgets) */
  .pc-chat__tool {
    @apply my-1 overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900;
  }
  .pc-chat__tool-header {
    @apply flex items-center gap-2 px-3 py-2 text-xs font-medium text-gray-600 dark:text-gray-300;
  }
  .pc-chat__tool-name {
    @apply font-mono;
  }
  .pc-chat__tool-check {
    @apply text-green-600 dark:text-green-400;
  }
  .pc-chat__tool-error {
    @apply flex h-4 w-4 items-center justify-center rounded-full bg-amber-500 text-[10px] font-bold text-white;
  }
  .pc-chat__tool-spinner {
    @apply inline-block h-3.5 w-3.5 rounded-full border-2 border-gray-300 border-t-gray-600 dark:border-gray-600 dark:border-t-gray-300;
    animation: pc-chat-spin 0.6s linear infinite;
  }
  .pc-chat__tool-body {
    @apply border-t border-gray-100 p-3 dark:border-gray-800;
  }

  /* Viewport wraps the thread so the scroll-to-bottom button can sit over it. */
  .pc-chat__viewport {
    @apply relative flex min-h-0 flex-1 flex-col;
  }
  .pc-chat__scroll-btn {
    @apply absolute bottom-3 left-1/2 flex h-8 w-8 -translate-x-1/2 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-600 shadow-md transition-opacity dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200;
  }
  .pc-chat__scroll-btn--hidden {
    @apply pointer-events-none opacity-0;
  }

  /* Reasoning / thinking block */
  .pc-chat__reasoning {
    @apply my-1 rounded-lg border border-gray-200 px-3 py-1.5 text-xs dark:border-gray-700;
  }
  .pc-chat__reasoning-summary {
    @apply flex cursor-pointer list-none items-center gap-1 font-medium text-gray-500 select-none dark:text-gray-400;
  }
  .pc-chat__reasoning-summary::-webkit-details-marker {
    display: none;
  }
  .pc-chat__reasoning-chevron {
    @apply shrink-0 transition-transform duration-150;
    /* !important so a consumer's heroicons plugin (utilities layer) can't resize it */
    width: 0.875rem !important;
    height: 0.875rem !important;
  }
  .pc-chat__reasoning[open] .pc-chat__reasoning-chevron {
    @apply rotate-90;
  }
  /* normal text flow - pre-wrap faithfully rendered template indentation,
     which mangled any multi-line HEEx content */
  .pc-chat__reasoning-body {
    @apply mt-1.5 border-s-2 border-gray-200 ps-2 text-gray-600 dark:border-gray-700 dark:text-gray-400;
  }

  /* Conversation markers - system notes, status rows, separators */
  .pc-chat__marker {
    @apply my-2 flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400;
  }
  .pc-chat__marker--separator {
    /* line colour lives on the parent - dark: variants don't compile inside
       pseudo-element selectors, they'd silently drop */
    --pc-chat-marker-line: var(--color-gray-200, #e4e4e7);
    @apply gap-3 dark:[--pc-chat-marker-line:color-mix(in_oklab,var(--color-gray-100)_10%,transparent)];
  }
  .pc-chat__marker--separator::before,
  .pc-chat__marker--separator::after {
    content: "";
    @apply h-px flex-1;
    background-color: var(--pc-chat-marker-line);
  }
  .pc-chat__marker--border {
    @apply border-b border-gray-200 pb-2.5 dark:border-gray-400/17;
  }
  .pc-chat__marker-icon {
    @apply shrink-0;
    /* !important so a consumer's heroicons plugin (utilities layer) can't resize it */
    width: 0.875rem !important;
    height: 0.875rem !important;
  }
  .pc-chat__marker-spinner {
    @apply h-3 w-3 shrink-0 animate-spin rounded-full border border-gray-300 border-t-gray-600 dark:border-gray-600 dark:border-t-gray-300;
  }
  .pc-chat__marker-text {
    @apply flex items-center gap-1.5;
  }

  /* Message actions (copy / regenerate / feedback) */
  .pc-chat__actions {
    @apply mt-1 flex items-center gap-1;
  }
  .pc-chat__action {
    @apply rounded px-2 py-1 text-xs font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200;
  }
  .pc-chat__action--icon {
    @apply p-1.5;
  }
  /* !important for the same reason as the composer send icon: a consumer's
     heroicons plugin sizes .hero-* in the utilities layer and would otherwise
     win, squashing these action-bar icons to 24x16. */
  .pc-chat__action-icon {
    width: 1rem !important;
    height: 1rem !important;
  }
  /* hover-revealed bar: fades in on message-row hover/focus; touch devices
     have no hover, so there it always shows */
  .pc-chat__actions--hover {
    @apply opacity-0 transition-opacity duration-150;
  }
  .pc-chat__row:hover .pc-chat__actions--hover,
  .pc-chat__row:focus-within .pc-chat__actions--hover {
    @apply opacity-100;
  }
  /* the newest message keeps its bar visible even in hover mode - matches
     ChatGPT, and the reserved space reads as intentional rather than a gap */
  .pc-chat__thread > .pc-chat__row:last-child .pc-chat__actions--hover {
    @apply opacity-100;
  }
  @media (hover: none) {
    .pc-chat__actions--hover {
      @apply opacity-100;
    }
  }

  /* Prompt suggestion chips */
  .pc-chat__suggestions {
    @apply flex flex-wrap gap-2;
  }
  .pc-chat__suggestion {
    @apply rounded-full border border-gray-300 px-3 py-1.5 text-sm text-gray-700 transition-colors hover:border-primary-400 hover:bg-primary-50 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-800;
  }

  /* Error notice */
  .pc-chat__error {
    @apply my-1 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/40 dark:text-red-300;
  }
  .pc-chat__error-text {
    @apply flex-1;
  }
  .pc-chat__retry {
    @apply rounded-md border border-red-300 px-2 py-1 text-xs font-medium hover:bg-red-100 dark:border-red-800 dark:hover:bg-red-900/40;
  }

  .pc-chat__composer {
    /* The composer is commonly pinned outside the .pc-chat scroll container
       (or used standalone), so it carries the user-bubble tokens its send
       button rides - otherwise the send button loses its fill. */
    --pc-chat-user-bg: var(--color-primary-600, #2563eb);
    --pc-chat-user-fg: var(--pc-button-solid-fg, #ffffff);
    @apply flex flex-col gap-2;
  }
  .pc-chat__composer-row {
    @apply flex items-end gap-2;
  }
  /* edit-mode banner - ChatGPT-style header telling you a past message is
     being edited, with a cancel control */
  /* the message currently being edited (demo highlight) */
  .pc-chat__row--editing .pc-chat__bubble {
    @apply ring-2 ring-primary-500/40;
  }

  .pc-chat__composer-banner {
    @apply flex items-center justify-between rounded-lg bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-600 dark:bg-gray-400/8 dark:text-gray-300;
  }
  .pc-chat__composer-banner-label {
    @apply flex items-center gap-1.5;
  }
  .pc-chat__composer-banner-icon {
    @apply h-3.5 w-3.5 shrink-0;
  }
  .pc-chat__composer-banner-cancel {
    @apply rounded p-0.5 text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-400/17 dark:hover:text-gray-100;
  }
  .pc-chat__composer-input {
    @apply flex-1 resize-none overflow-y-hidden border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none disabled:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100;
    border-radius: var(--pc-radius, 0.625rem);
    field-sizing: content;
  }
  .pc-chat__composer-send {
    @apply px-4 py-2 text-sm font-medium disabled:opacity-40;
    border-radius: var(--pc-radius, 0.625rem);
    background-color: var(--pc-chat-user-bg);
    color: var(--pc-chat-user-fg);
  }
  /* default icon send - the arrow-up convention */
  .pc-chat__composer-send--icon {
    @apply flex h-9 w-9 shrink-0 items-center justify-center p-0;
  }
  /* A consumer's heroicons plugin sizes every `.hero-*` in the utilities layer
     (width: spacing.6; height: 1lh), which beats this component-layer size by
     layer order - the send arrow blew up to 24x20. !important wins across
     layers so the icon keeps its intended size under a stock heroicons setup. */
  .pc-chat__composer-send-icon {
    width: 1rem !important;
    height: 1rem !important;
  }
  .pc-chat__composer-stop {
    @apply flex h-9 w-9 shrink-0 items-center justify-center;
    border-radius: var(--pc-radius, 0.625rem);
    background-color: var(--pc-chat-user-bg);
    color: var(--pc-chat-user-fg);
  }
  .pc-chat__stop-icon {
    @apply h-3 w-3 rounded-[2px];
    background-color: currentColor;
  }
}

@keyframes pc-chat-blink {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0;
  }
}

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

@keyframes pc-chat-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  40% {
    transform: translateY(-3px);
    opacity: 0.9;
  }
}

/* Respect users who prefer reduced motion: keep the chat indicators static. */
@media (prefers-reduced-motion: reduce) {
  .pc-chat__typing > span,
  .pc-chat__caret,
  .pc-chat__tool-spinner {
    animation: none;
  }
}

/*
  Hide the calendar icon added by Petal in Firefox since Firefox includes one
  and the onclick for the Petal one doesn't work.
  See: https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/
*/
@-moz-document url-prefix() {
  .pc-date-input {
    @apply pe-3;
  }
  /* Firefox's native time picker icon overlaps the AM/PM text, so make extra room (#377). */
  input.pc-date-input[type="time"] {
    @apply pe-8;
  }
  .pc-date-input-icon {
    @apply hidden;
  }
}

@layer components {
  /* Navigation Menu (flyout / mega menu) */
  .pc-nav-menu__list {
    @apply flex items-center gap-x-1 list-none m-0 p-0;
  }

  .pc-nav-menu__link-item,
  .pc-nav-menu__trigger {
    @apply inline-flex items-center gap-x-1 px-3 py-2 text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50 dark:text-gray-300 dark:hover:bg-gray-400/17 dark:hover:text-white;
    border-radius: max(calc(min(var(--pc-radius, 0.625rem), 1rem) - 0.25rem), 0px);
  }

  .pc-nav-menu__link-item[aria-current="page"] {
    @apply text-primary-600 dark:text-primary-300;
  }

  .pc-nav-menu__trigger[aria-expanded="true"] {
    @apply bg-gray-100 text-gray-900 dark:bg-gray-400/17 dark:text-white;
  }

  .pc-nav-menu__chevron {
    @apply h-4 w-4 text-gray-400 transition-transform duration-200;
  }

  .pc-nav-menu__trigger[aria-expanded="true"] .pc-nav-menu__chevron {
    @apply rotate-180;
  }

  /* Anchored under the trigger at its start edge, opening rightward into the
     page (so a left-most trigger never opens back under a sidebar). Absolute at
     every breakpoint — the same reliable positioning on mobile and desktop. The
     width is clamped to the viewport and the panel scrolls if it is taller than
     the screen, so it is never clipped off the bottom on a phone. */
  .pc-nav-menu__panel {
    @apply absolute left-0 top-full z-20 mt-3 max-h-[85vh] max-w-[calc(100vw-1rem)] overflow-x-hidden overflow-y-auto border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-400/17 dark:bg-gray-900 sm:max-h-none sm:overflow-hidden;
    border-radius: min(var(--pc-radius, 0.625rem), 1rem);
  }

  /* Each width is clamped to the viewport so a wide panel shrinks to fit instead
     of overflowing on a narrow screen. */
  .pc-nav-menu__panel--sm {
    @apply w-[min(24rem,calc(100vw-1rem))];
  }

  .pc-nav-menu__panel--md {
    @apply w-[min(28rem,calc(100vw-1rem))];
  }

  .pc-nav-menu__panel--lg {
    @apply w-[min(32rem,calc(100vw-1rem))];
  }

  .pc-nav-menu__panel--xl {
    @apply w-[min(36rem,calc(100vw-1rem))];
  }

  /* Anchor the panel to the trigger's end edge (opens leftward). Use for
     triggers near the right of the nav so the panel stays on screen. */
  .pc-nav-menu__panel--end {
    @apply left-auto right-0;
  }

  /* Mega menu: spans the nearest positioned ancestor (give your header `relative`). */
  .pc-nav-menu__panel--full {
    @apply inset-x-0 mt-0 w-auto max-w-none rounded-none border-x-0 border-t border-gray-200 p-6 dark:border-gray-400/17;
  }

  .pc-nav-menu__link {
    @apply flex gap-x-4 p-3 transition-colors hover:bg-gray-100 dark:hover:bg-gray-400/8;
    border-radius: max(calc(min(var(--pc-radius, 0.625rem), 1rem) - 0.25rem), 0px);
  }

  .pc-nav-menu__link-icon {
    @apply flex h-11 w-11 flex-none items-center justify-center bg-gray-100 transition-colors group-hover:bg-white dark:bg-gray-400/8 dark:group-hover:bg-gray-400/17;
    border-radius: max(calc(min(var(--pc-radius, 0.625rem), 1rem) - 0.25rem), 0px);
  }

  .pc-nav-menu__link-icon-svg {
    @apply h-6 w-6 text-gray-600 group-hover:text-primary-600 dark:text-gray-300 dark:group-hover:text-primary-300;
  }

  .pc-nav-menu__link-body {
    @apply flex flex-col;
  }

  .pc-nav-menu__link-title {
    @apply text-sm font-semibold text-gray-900 dark:text-white;
  }

  .pc-nav-menu__link-description {
    @apply mt-0.5 text-sm text-gray-600 dark:text-gray-400;
  }

  /* Footer: negative margins escape the panel's p-4 (p-6 when full) for a full-bleed strip */
  .pc-nav-menu__footer {
    @apply -mx-4 -mb-4 mt-4 grid auto-cols-fr grid-flow-col divide-x divide-gray-200 bg-gray-50 dark:divide-gray-400/17 dark:bg-white/[0.03];
  }

  .pc-nav-menu__panel--full .pc-nav-menu__footer {
    @apply -mx-6 -mb-6 mt-6;
  }

  .pc-nav-menu__footer-link {
    @apply flex items-center justify-center gap-x-2.5 p-3 text-sm font-semibold text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-400/17;
  }

  .pc-nav-menu__footer-link-icon {
    @apply h-5 w-5 flex-none text-gray-400;
  }

  /* Hover mode (default): the PetalNavMenu hook opens panels on hover with a
     close grace period (so the trigger-to-panel gap doesn't drop them) and
     nudges them to stay in the viewport. Visibility is driven entirely by the
     --open class it toggles - never :focus-within, so a click that focuses the
     trigger can still close the panel. */
  .pc-nav-menu--hover .pc-nav-menu__panel {
    display: none;
  }

  .pc-nav-menu--hover .pc-nav-menu__item--open > .pc-nav-menu__panel {
    display: block;
  }

  .pc-nav-menu--hover .pc-nav-menu__item--open > .pc-nav-menu__trigger {
    @apply bg-gray-100 text-gray-900 dark:bg-gray-400/17 dark:text-white;
  }

  .pc-nav-menu--hover .pc-nav-menu__item--open .pc-nav-menu__chevron {
    @apply rotate-180;
  }


  /* Shine Border */
  .pc-shine-border {
    @apply relative bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-400/17;
    border-width: var(--pc-shine-border-width, 1px);
    border-style: solid;
    border-radius: var(--pc-shine-radius, min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem));
  }

  /* The shimmer: a radial gradient with the colour band in its middle, blown
     up to 300% and swept via background-position, then masked to the border
     ring (content-box XOR border-box). Sits just outside the container's own
     border via a negative inset so the sweep reads as ON the edge. */
  .pc-shine-border__shine {
    @apply pointer-events-none absolute;
    inset: calc(-1 * var(--pc-shine-border-width, 1px));
    border-radius: inherit;
    padding: var(--pc-shine-border-width, 1px);
    background-image: radial-gradient(
      transparent,
      transparent,
      var(--pc-shine-colors, #a1a1aa),
      transparent,
      transparent
    );
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    will-change: background-position;
  }
  @media (prefers-reduced-motion: no-preference) {
    .pc-shine-border__shine {
      animation: pc-shine var(--pc-shine-duration, 14s) infinite linear;
    }
  }

  /* Form controls dropped inside follow the wrapper's rounded shape (and the
     radius rail). The shimmer IS the border, so the control's own default
     ring is stripped (like input_group); keyboard focus still shows a soft
     accent outline that follows the rounded shape. */
  .pc-shine-border :is(input, select, textarea) {
    border-radius: inherit;
  }
  .pc-shine-border :is(input, select, textarea):focus {
    outline: none;
    box-shadow: none;
  }
  .pc-shine-border :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
  }

  /* Aurora */

  .pc-aurora {
    @apply relative overflow-hidden;
    /* the stripe texture and the invert filter flip TOGETHER per mode: white
       stripes + invert on light, black stripes + no invert on dark. The
       difference blend against matching stripes is what restores the palette's
       true hues - mismatched pairs shift every colour (blue turns gold). */
    --pc-aurora-stripes-light: repeating-linear-gradient(
      100deg,
      #fff 0%,
      #fff 7%,
      transparent 10%,
      transparent 12%,
      #fff 16%
    );
    --pc-aurora-stripes-dark: repeating-linear-gradient(
      100deg,
      #000 0%,
      #000 7%,
      transparent 10%,
      transparent 12%,
      #000 16%
    );
    --pc-aurora-stripes: var(--pc-aurora-stripes-light);
    --pc-aurora-invert: invert(1);
    @apply dark:[--pc-aurora-stripes:var(--pc-aurora-stripes-dark)] dark:[--pc-aurora-invert:invert(0)];
  }

  /* force the light-style rendering in both modes */
  .pc-aurora.pc-aurora--invert {
    --pc-aurora-stripes: var(--pc-aurora-stripes-light);
    --pc-aurora-invert: invert(1);
  }

  /* force the dark-style rendering in both modes */
  .pc-aurora.pc-aurora--no-invert {
    --pc-aurora-stripes: var(--pc-aurora-stripes-dark);
    --pc-aurora-invert: invert(0);
  }

  .pc-aurora__backdrop {
    @apply pointer-events-none absolute inset-0 overflow-hidden;
  }

  .pc-aurora__lights {
    @apply pointer-events-none absolute will-change-transform;
    inset: -10px;
    background-image: var(--pc-aurora-stripes), var(--pc-aurora-gradient);
    background-size: 300%, 200%;
    background-position:
      50% 50%,
      50% 50%;
    opacity: var(--pc-aurora-opacity, 0.5);
    filter: blur(var(--pc-aurora-blur, 10px)) var(--pc-aurora-invert);
    -webkit-mask-image: radial-gradient(
      ellipse at var(--pc-aurora-mask-position, 100% 0),
      #000 var(--pc-aurora-mask-coverage, 10%, 70%)
    );
    mask-image: radial-gradient(
      ellipse at var(--pc-aurora-mask-position, 100% 0),
      #000 var(--pc-aurora-mask-coverage, 10%, 70%)
    );
  }

  .pc-aurora__lights::after {
    content: "";
    @apply absolute inset-0;
    background-image: var(--pc-aurora-stripes), var(--pc-aurora-gradient);
    background-size: 200%, 100%;
    background-attachment: fixed;
    mix-blend-mode: difference;
    animation: pc-aurora var(--pc-aurora-speed, 60s) linear infinite;
  }

  /* the PetalAurora hook pauses the drift while off-screen */
  .pc-aurora__lights.pc-aurora--paused::after {
    animation-play-state: paused;
  }

  @media (prefers-reduced-motion: reduce) {
    .pc-aurora__lights::after {
      animation: none;
    }
  }

  /* content paints above the glow, so text stays crisp */
  .pc-aurora__content {
    @apply relative;
  }

  @keyframes pc-aurora {
    0% {
      background-position:
        50% 50%,
        50% 50%;
    }
    100% {
      background-position:
        350% 50%,
        350% 50%;
    }
  }

  /* Border Beam */
  .pc-border-beam {
    @apply relative bg-white border-gray-200 dark:bg-gray-900 dark:border-gray-400/17;
    border-style: solid;
    border-width: var(--pc-beam-border-width, 1px);
    border-radius: var(--pc-beam-radius, min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem));
  }

  /* Each beam layer is masked to the border ring, so the travelling gradient
     square only ever paints over the border itself. */
  .pc-border-beam__beam {
    @apply pointer-events-none absolute inset-0;
    /* size container: lets the traveller clamp itself to the card's
       smallest side via cqmin - safe here because inset-0 gives this layer
       a definite size */
    container-type: size;
    border: var(--pc-beam-border-width, 1px) solid transparent;
    border-radius: inherit;
    -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
    mask: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
    -webkit-mask-clip: padding-box, border-box;
    mask-clip: padding-box, border-box;
    -webkit-mask-composite: source-in, xor;
    mask-composite: intersect;
  }

  /* The traveller: a gradient square riding offset-path around the border
     rectangle. The path's corner rounding equals the BEAM SIZE (not the
     card radius) - the wide swing keeps the square overlapping the ring
     mask through the whole corner turn, which is what makes the tail fade
     smoothly around corners at any aspect ratio. */
  /* Glows have no sharp head, so long beams stay artifact-free even past
     the size regime - lift the clamp and let them stretch. */
  .pc-border-beam--glow .pc-border-beam__beam::after {
    --pc-beam-max: 500cqmax;
  }

  .pc-border-beam__beam::after {
    content: "";
    display: block;
    /* the technique's invariant: beam size must stay well under the card's
       smallest side, or the traveller cuts corners on a visible diagonal
       (racing + tail split). Clamp to 30% of the min side, always. */
    --pc-beam-eff: min(var(--pc-beam-size, 150px), var(--pc-beam-max, 45cqmin));
    width: var(--pc-beam-eff);
    aspect-ratio: 1 / 1;
    background: var(
      --pc-beam-gradient,
      linear-gradient(to left, var(--pc-beam-from, #ffaa40), var(--pc-beam-to, #9c40ff), transparent)
    );
    offset-path: rect(0 auto auto 0 round var(--pc-beam-eff));
    /* Chrome won't resolve inherited custom props inside @keyframes on
       pseudo-elements, so the keyframes animate a registered number
       (--pc-beam-t) and the offset maths lives here, where vars resolve. */
    offset-distance: calc(var(--pc-beam-offset, 0%) + var(--pc-beam-t, 0) * 100%);
    offset-rotate: var(--pc-beam-rotate, auto);
    animation: pc-border-beam var(--pc-beam-duration, 8s) infinite;
    animation-timing-function: var(--pc-beam-ease, linear);
    animation-direction: var(--pc-beam-direction, normal);
    animation-delay: calc(
      var(--pc-beam-delay, 0s) + var(--pc-beam-duration, 8s) * var(--pc-beam-phase, 0)
    );
  }


  /* Meteors */
  .pc-meteors {
    @apply pointer-events-none absolute inset-0 overflow-hidden;
  }
  .pc-meteors--reverse {
    transform: scaleX(-1);
  }

  .pc-meteor {
    @apply absolute h-0.5 w-0.5 rounded-full opacity-0;
    background-color: var(--pc-meteor-color, #64748b);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
    transform: rotate(var(--pc-meteor-angle, 215deg));
    animation: pc-meteor linear infinite;
  }

  .pc-meteor::before {
    content: "";
    @apply absolute top-1/2 h-px w-[50px] -translate-y-1/2;
    background: linear-gradient(90deg, var(--pc-meteor-color, #64748b), transparent);
  }

  /* Gradient Text */
  .pc-gradient-text {
    @apply inline-block bg-clip-text text-transparent;
    background-image: linear-gradient(
      to right,
      var(--pc-gradient-from, #ffaa40),
      var(--pc-gradient-to, #9c40ff),
      var(--pc-gradient-from, #ffaa40)
    );
    background-size: 300% 100%;
    animation: pc-gradient-sweep var(--pc-gradient-duration, 8s) linear infinite;
  }

  /* Shimmer Text */
  .pc-shimmer-text {
    @apply inline-block bg-clip-text text-transparent [--pc-shimmer-base:#6b7280] [--pc-shimmer-shine:#111827] dark:[--pc-shimmer-base:#9ca3af] dark:[--pc-shimmer-shine:#ffffff];
    background-image: linear-gradient(
      110deg,
      var(--pc-shimmer-base) 35%,
      var(--pc-shimmer-shine) 50%,
      var(--pc-shimmer-base) 65%
    );
    background-size: 200% 100%;
    animation: pc-shimmer var(--pc-shimmer-duration, 2.5s) linear infinite;
  }

  /* Word Rotate */
  .pc-word-rotate {
    @apply inline-flex overflow-hidden align-bottom;
  }

  .pc-word-rotate__word {
    @apply inline-block transition-all duration-200 ease-out;
  }

  .pc-word-rotate__word--out {
    @apply -translate-y-full opacity-0;
  }

  .pc-word-rotate__word--pre {
    @apply translate-y-full opacity-0;
    transition: none;
  }

  /* Typing Effect */
  .pc-typing-effect__cursor {
    @apply ml-0.5 inline-block h-[1em] w-[2px] translate-y-[0.15em] bg-current;
    animation: pc-cursor-blink 1s step-end infinite;
  }

  /* Number Ticker */
  .pc-number-ticker {
    @apply inline-block tabular-nums;
  }

  /* Chart (ECharts mount) */
  .pc-chart {
    @apply relative w-full;
  }

  .pc-chart__canvas {
    @apply w-full;
  }

  /* Sparkline */
  .pc-sparkline {
    @apply inline-block h-8 w-24 align-middle;
  }

  /* Colour scheme switch */
  .pc-scheme-toggle {
    @apply relative inline-flex items-center justify-center w-9 h-9 cursor-pointer text-gray-500 transition-colors duration-200 hover:bg-gray-900/5 hover:text-gray-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50 dark:text-gray-400 dark:hover:bg-gray-400/10 dark:hover:text-gray-200;
    border-radius: var(--pc-radius, 0.625rem);
  }

  .pc-scheme-toggle__sun,
  .pc-scheme-toggle__moon {
    @apply flex items-center justify-center w-5 h-5 transition-all duration-300 motion-reduce:transition-none;
  }

  /* Icon wrappers size whatever they hold - the default Heroicon or any
     svg dropped in via the light_icon/dark_icon/system_icon slots. */
  .pc-scheme-toggle__sun > *,
  .pc-scheme-toggle__moon > *,
  .pc-scheme-segmented__icon > *,
  .pc-scheme-dropdown__item-icon > * {
    @apply w-full h-full;
  }

  .pc-scheme-toggle__sun {
    @apply rotate-0 scale-100;
  }

  .dark .pc-scheme-toggle__sun {
    @apply -rotate-90 scale-0;
  }

  .pc-scheme-toggle__moon {
    @apply absolute rotate-90 scale-0;
  }

  .dark .pc-scheme-toggle__moon {
    @apply rotate-0 scale-100;
  }

  .pc-scheme-segmented {
    @apply relative inline-grid grid-cols-3 gap-0.5 p-1 bg-gray-900/5 text-gray-600 dark:bg-gray-400/15 dark:text-gray-300;
    /* 2.4x the radius token: a full pill at the shipped default (24px on a
       36px control), concentric with the 2x chips, sharp at radius 0. */
    border-radius: calc(var(--pc-radius, 0.625rem) * 2.4);
  }

  .pc-scheme-segmented__option {
    @apply relative flex items-center justify-center p-1.5 cursor-pointer transition-colors duration-150;
    border-radius: calc(var(--pc-radius, 0.625rem) * 2);
  }

  .pc-scheme-segmented__option:has(:checked) {
    @apply bg-white text-gray-900 shadow-xs ring-1 ring-gray-900/10 dark:bg-gray-700 dark:text-white dark:ring-white/10;
  }

  .pc-scheme-segmented__option:has(:focus-visible) {
    @apply ring-1 ring-primary-500/50;
  }

  .pc-scheme-segmented__input {
    @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer focus:outline-none;
    border-radius: calc(var(--pc-radius, 0.625rem) * 2);
  }

  .pc-scheme-segmented__icon {
    @apply relative flex items-center justify-center w-5 h-5 pointer-events-none;
  }

  .pc-scheme-dropdown {
    @apply inline-block;
  }

  .pc-scheme-dropdown__menu {
    @apply !w-auto !min-w-0 !left-1/2 !right-auto -translate-x-1/2;
  }

  .pc-scheme-dropdown__item {
    @apply flex items-center justify-center w-9 h-9 text-gray-500 cursor-pointer transition-colors duration-150 hover:bg-gray-900/5 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-400/10 dark:hover:text-gray-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500/50;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.25rem), 0.25rem);
  }

  .pc-scheme-dropdown__item[aria-checked="true"] {
    @apply bg-gray-900/5 text-gray-900 dark:bg-gray-400/15 dark:text-white;
  }

  .pc-scheme-dropdown__item--labeled {
    @apply w-full justify-start gap-2 px-3 text-sm;
  }

  .pc-scheme-dropdown__item-icon {
    @apply flex items-center justify-center w-5 h-5 shrink-0;
  }

  .pc-scheme-dropdown__item-label {
    @apply pr-1;
  }

  /* Confetti mount point */
  .pc-confetti {
    @apply hidden;
  }

  /* Spotlight Card */
  .pc-spotlight-card {
    @apply relative overflow-hidden border border-gray-200 bg-white dark:border-gray-400/17 dark:bg-gray-900;
    border-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1.25rem);
  }

  .pc-spotlight-card__glow {
    @apply pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300;
    background: radial-gradient(
      var(--pc-spotlight-size, 350px) circle at var(--pc-spotlight-x, 50%) var(--pc-spotlight-y, 50%),
      var(--pc-spotlight-color, rgb(120 119 198 / 0.18)),
      transparent 80%
    );
  }

  .pc-spotlight-card:hover .pc-spotlight-card__glow {
    @apply opacity-100;
  }

  .pc-spotlight-card__content {
    @apply relative;
  }
}

@property --pc-beam-t {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@keyframes pc-shine {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

@keyframes pc-border-beam {
  from {
    --pc-beam-t: 0;
  }
  to {
    /* closed offset-paths wrap past 100%, so the shifted range (applied in
       the ::after's offset-distance calc) relocates the lap seam - and with
       it, where the spring parks and releases */
    --pc-beam-t: 1;
  }
}

@keyframes pc-meteor {
  0% {
    transform: rotate(var(--pc-meteor-angle, 215deg)) translateX(0);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: rotate(var(--pc-meteor-angle, 215deg)) translateX(-500px);
    opacity: 0;
  }
}

@keyframes pc-gradient-sweep {
  from {
    background-position: 0% center;
  }
  to {
    background-position: 300% center;
  }
}

@keyframes pc-shimmer {
  from {
    background-position: 200% center;
  }
  to {
    background-position: -200% center;
  }
}

@keyframes pc-cursor-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Reduced motion: hide purely decorative animation, keep informative content static. */
@media (prefers-reduced-motion: reduce) {
  .pc-border-beam__beam,
  .pc-meteor {
    display: none;
  }

  .pc-gradient-text,
  .pc-shimmer-text,
  .pc-typing-effect__cursor {
    animation: none;
  }

  .pc-word-rotate__word {
    transition: none;
  }
}

/* Showcase - the shared example frame used by the dev playground and petal.build.
 * Pure-CSS collapse (hidden checkbox + :has()), no Alpine, no hook. */
@layer components {
  .pc-showcase {
    @apply relative mt-5 mb-10 border border-gray-200 rounded-xl dark:border-gray-400/17;
  }

  .pc-showcase__preview {
    @apply relative z-10 gap-4 px-4 py-8 bg-white rounded-t-xl md:px-8 dark:bg-gray-900/40;
  }

  .pc-showcase__preview--center {
    @apply flex flex-wrap items-center justify-center;
  }

  .pc-showcase-code {
    @apply relative overflow-hidden border-t border-gray-200 rounded-b-xl dark:border-gray-400/17;
    background-color: #282c34;
  }

  .pc-showcase-code__bar {
    @apply flex items-center justify-between px-4 py-2 border-b;
    background-color: rgb(55 65 81 / 0.5);
    border-color: rgb(107 114 128 / 0.3);
  }

  .pc-showcase-code__lang {
    @apply text-xs font-semibold uppercase text-primary-300;
  }

  /* copy button: hidden until the panel is expanded */
  .pc-showcase-code__copy {
    @apply hidden items-center gap-1.5 text-xs font-medium text-gray-400 transition-colors hover:text-gray-200;
  }

  .pc-showcase-code__scroll {
    @apply relative p-5 overflow-hidden text-sm leading-6 text-gray-50;
    max-height: 10rem;
  }

  /* let the highlighted <pre> blend into the panel instead of carrying its own dark */
  .pc-showcase-code__scroll pre {
    @apply m-0 w-full;
    background: transparent !important;
  }

  .pc-showcase-code__fallback {
    @apply whitespace-pre;
  }

  .pc-showcase-code__peek {
    @apply absolute inset-0 flex items-center justify-center cursor-pointer;
    background-image: linear-gradient(to top, #282c34, rgb(40 44 52 / 0.85), transparent);
  }

  .pc-showcase-code__peek-btn {
    @apply inline-flex items-center h-10 gap-2 px-4 text-sm font-medium text-gray-800 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-white dark:bg-gray-700 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600/75;
  }

  .pc-showcase-code__hide {
    @apply hidden items-center justify-center gap-1.5 py-2 border-t text-xs font-medium text-gray-400 cursor-pointer transition-colors hover:text-gray-200;
    border-color: rgb(107 114 128 / 0.3);
  }

  .pc-showcase-code__lock {
    @apply absolute inset-0 flex items-center justify-center backdrop-blur-sm;
  }

  .pc-showcase-code__lock-hint {
    @apply inline-flex items-center h-10 gap-2 px-4 text-sm font-medium text-gray-800 bg-white border border-gray-200 rounded-lg shadow-sm dark:text-white dark:bg-gray-700 dark:border-gray-600;
  }

  /* the pure-CSS toggle */
  .pc-showcase-code:has(.pc-showcase-code__toggle:checked) .pc-showcase-code__scroll {
    max-height: none;
    overflow-x: auto;
  }

  .pc-showcase-code:has(.pc-showcase-code__toggle:checked) .pc-showcase-code__peek {
    display: none;
  }

  .pc-showcase-code:has(.pc-showcase-code__toggle:checked) .pc-showcase-code__copy {
    display: inline-flex;
  }

  .pc-showcase-code:has(.pc-showcase-code__toggle:checked) .pc-showcase-code__hide {
    display: flex;
  }

  /* keyboard focus lands on the visually-hidden checkbox; surface a ring on the
     visible toggle buttons so keyboard users can see where they are */
  .pc-showcase-code:has(.pc-showcase-code__toggle:focus-visible) .pc-showcase-code__peek-btn,
  .pc-showcase-code:has(.pc-showcase-code__toggle:focus-visible) .pc-showcase-code__hide {
    @apply outline-none ring-2 ring-primary-400;
  }

  /* props / slots table */
  .pc-showcase-props {
    @apply my-6 space-y-6;
  }

  .pc-showcase-props__group {
    @apply overflow-x-auto border border-gray-200 rounded-xl dark:border-gray-400/17;
  }

  .pc-showcase-props__fn {
    @apply px-4 py-2 font-mono text-xs font-semibold text-gray-900 border-b border-gray-200 bg-gray-50 dark:text-white dark:bg-gray-400/8 dark:border-gray-400/17;
  }

  .pc-showcase-props__table {
    @apply w-full text-sm text-left border-collapse;
  }

  .pc-showcase-props__table th {
    @apply px-4 py-2.5 text-xs font-semibold tracking-wide text-gray-500 uppercase bg-gray-50 border-b border-gray-200 dark:text-gray-400 dark:bg-gray-400/8 dark:border-gray-400/17;
  }

  .pc-showcase-props__table td {
    @apply px-4 py-2.5 align-top text-gray-700 border-b border-gray-100 dark:text-gray-300 dark:border-gray-400/8;
  }

  .pc-showcase-props__table tr:last-child td {
    @apply border-b-0;
  }

  .pc-showcase-props__name {
    @apply font-mono text-xs font-semibold text-gray-900 dark:text-white;
  }

  .pc-showcase-props__type {
    @apply font-mono text-xs text-primary-600 dark:text-primary-400;
  }

  .pc-showcase-props__default {
    @apply font-mono text-xs text-gray-500 dark:text-gray-400;
  }

  .pc-showcase-props__req {
    @apply ml-0.5 font-semibold text-red-500;
  }

  .pc-showcase-props__slot {
    @apply ml-1 text-[10px] font-semibold tracking-wide uppercase text-gray-400;
  }

  .pc-showcase-props__values {
    @apply mt-1 text-xs text-gray-400;
  }
}

  /* Carousel - ported from petal_marketing; material pass to follow */
  .pc-carousel-wrapper {
    @apply relative w-full;
  }

  .pc-carousel-wrapper--below {
    @apply flex flex-col items-center gap-3;
  }

  .pc-carousel-wrapper--outside {
    @apply flex flex-wrap items-center w-full gap-3 md:gap-4;
  }

  .pc-carousel {
    @apply relative w-full h-[240px] sm:h-[300px] md:h-[400px] overflow-hidden bg-transparent;
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-950;
    /* Same derivation as the slide surface, so the focus ring hugs the
       visible image corner at every dial position */
    border-radius: min(calc(var(--pc-radius, 0.625rem) * 1.6), 1.5rem);
  }

  /* When using sides buttons, carousel should flex to fit between buttons */
  .pc-carousel-wrapper--outside .pc-carousel {
    @apply flex-1;
  }

  /* Vertical with outside buttons keeps its own height (not flex-1) */
  .pc-carousel-wrapper--vertical.pc-carousel-wrapper--outside .pc-carousel {
    @apply flex-none;
  }

  /* Overlay button styles - inspired by Embla Carousel */
  /* Light glass in both schemes on purpose: these float on imagery,
     not on the page surface. */
  .pc-carousel__button--overlay {
    @apply absolute top-1/2 -translate-y-1/2 z-30 w-10 h-10 md:w-12 md:h-12 rounded-full;
    @apply flex items-center justify-center cursor-pointer;
    @apply shadow-lg text-gray-800/80 bg-white/55 backdrop-blur-md ring-1 ring-white/30;
    @apply transition-all duration-200 ease-in-out;
    @apply hover:bg-white/75 hover:shadow-xl;
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/70;
    @apply border-0;
  }

  .pc-carousel__button--overlay.pc-carousel__button--prev {
    @apply left-2 md:left-4;
  }

  .pc-carousel__button--overlay.pc-carousel__button--next {
    @apply right-2 md:right-4;
  }

  /* Below button styles - smaller, minimal */
  .pc-carousel__button--below {
    @apply w-8 h-8 md:w-10 md:h-10 rounded-full;
    @apply flex items-center justify-center cursor-pointer;
    @apply text-gray-700 bg-white shadow-xs dark:text-gray-300 dark:bg-gray-400/10;
    @apply transition-all duration-200 ease-in-out;
    @apply hover:bg-gray-50 hover:text-gray-900 dark:hover:bg-gray-400/15 dark:hover:text-gray-100;
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50;
    @apply border border-gray-200 dark:border-gray-400/25;
  }

  .pc-carousel__controls--below {
    @apply flex items-center justify-center gap-3 mt-4;
  }

  /* Outside button styles - flank the frame along the travel axis */
  .pc-carousel__button--outside {
    @apply flex-shrink-0 w-8 h-8 md:w-10 md:h-10 rounded-full;
    @apply flex items-center justify-center cursor-pointer;
    @apply text-gray-700 bg-white shadow-xs dark:text-gray-300 dark:bg-gray-400/10;
    @apply transition-all duration-200 ease-in-out;
    @apply hover:bg-gray-50 hover:text-gray-900 dark:hover:bg-gray-400/15 dark:hover:text-gray-100;
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50;
    @apply border border-gray-200 dark:border-gray-400/25;
  }

  /* Disabled button states (when loop is disabled and at boundary) */
  .pc-carousel__button:disabled,
  .pc-carousel__button--overlay:disabled,
  .pc-carousel__button--below:disabled,
  .pc-carousel__button--outside:disabled {
    @apply opacity-40 cursor-default;
  }

  .pc-carousel__icon {
    @apply text-current;
  }

  .pc-carousel__slides {
    @apply relative w-full h-full;
  }

  .pc-carousel__slide {
    @apply absolute top-0 left-0 w-full h-full transition-opacity duration-500 ease-in-out;
    will-change: transform, opacity;
  }

  .pc-carousel__slide--active {
    @apply z-10 opacity-100;
  }

  .pc-carousel__slide--inactive {
    @apply z-0;
  }

  /* Slide transition specific styles - CSS Scroll Snap approach */
  .pc-carousel[data-transition-type="slide"] .pc-carousel__slides {
    @apply flex overflow-auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    column-gap: 0;
    max-width: 100%;
    height: 100%;
    touch-action: pan-x; /* Enable horizontal swipe, disable vertical scroll */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  /* Disable swipe when data-swipe="false" */
  .pc-carousel[data-transition-type="slide"][data-swipe="false"] .pc-carousel__slides {
    touch-action: none;
    overflow: hidden;
  }

  .pc-carousel[data-transition-type="slide"] .pc-carousel__slides::-webkit-scrollbar {
    display: none; /* Safari and Chromium */
  }

  .pc-carousel[data-transition-type="slide"] .pc-carousel__slide {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    flex: 0 0 100%;
    scroll-snap-align: center;
    min-width: 100%;
    height: 100%;
  }

  .pc-carousel[data-transition-type="slide"] .pc-carousel__slides.smooth-scroll {
    scroll-behavior: smooth;
  }

  /* Fade transition specific styles */
  .pc-carousel[data-transition-type="fade"] .pc-carousel__slide {
    @apply transition-opacity duration-500 ease-in-out;
  }

  /* Multi-slide view styles */

  /* When showing multiple slides, add gaps and adjust sizing */
  .pc-carousel[data-transition-type="slide"] .pc-carousel__slides {
    gap: var(--carousel-gap, 1rem);
  }

  /* Vertical orientation */
  .pc-carousel--vertical {
    @apply w-full;
  }

  .pc-carousel--vertical[data-transition-type="slide"] .pc-carousel__slides {
    @apply flex-col overflow-x-hidden overflow-y-auto;
    scroll-snap-type: y mandatory;
    touch-action: pan-y; /* Enable vertical swipe, disable horizontal scroll */
    scrollbar-width: none; /* Firefox */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  .pc-carousel--vertical[data-transition-type="slide"] .pc-carousel__slides::-webkit-scrollbar {
    display: none; /* Safari and Chromium */
  }

  .pc-carousel--vertical[data-transition-type="slide"] .pc-carousel__slide {
    @apply w-full min-h-full;
    min-width: auto;
    scroll-snap-align: center;
  }

  /* Vertical fade transition needs explicit dimensions */
  .pc-carousel--vertical[data-transition-type="fade"] .pc-carousel__slides {
    @apply w-full h-full;
  }

  .pc-carousel--vertical[data-transition-type="fade"] .pc-carousel__slide {
    @apply w-full h-full;
  }

  .pc-carousel-wrapper--vertical {
    @apply flex flex-col;
  }

  .pc-carousel-wrapper--vertical .pc-carousel__button--outside {
    @apply relative mx-auto my-2;
  }

  .pc-carousel__slide-content {
    @apply relative w-full h-full overflow-hidden;
  }

  /* Default slide radius derives from the theme token rather than
     copying it: on a frame this large the raw control radius is nearly
     invisible, and a "full" token would go stadium-shaped. Amplify so
     the dial's steps register at surface scale, clamp at a media-card
     maximum (same doctrine as the tooltip's 14px clamp, scaled up). */
  .pc-carousel__slide-content--radius {
    border-radius: min(calc(var(--pc-radius, 0.625rem) * 1.6), 1.5rem);
  }

  /* Synced thumbnails */
  .pc-carousel__thumbs {
    @apply flex w-full justify-center gap-2 mt-3 overflow-x-auto px-1 py-1;
  }

  /* At rest every thumb is full colour - dimming the strip washed it
     out, especially in light mode; the ring carries the active state.
     The thumb under the cursor dims slightly - the classic image-link
     pressable feedback. Focus-visible is the same solid primary ring
     OFFSET from the edge, so a keyboard-focused active thumb never
     looks softer than a clicked one. Radius clamps like every small
     control - full themes get a soft corner, never a pill. */
  .pc-carousel__thumb {
    @apply relative w-16 h-10 shrink-0 overflow-hidden cursor-pointer transition-all duration-200 ease-out hover:opacity-75;
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-950;
    border-radius: min(max(calc(var(--pc-radius, 0.625rem) - 0.25rem), 0.25rem), 0.625rem);
  }

  .pc-carousel__thumb--active {
    @apply ring-2 ring-primary-500;
  }

  .pc-carousel__thumb img {
    @apply object-cover w-full h-full;
  }

  .pc-carousel__thumb-fallback {
    @apply flex items-center justify-center w-full h-full text-xs font-medium bg-gray-100 text-gray-500 dark:bg-gray-400/17 dark:text-gray-300;
  }

  .pc-carousel__image-wrapper {
    @apply absolute inset-0 z-0;
  }

  .pc-carousel__image {
    @apply object-cover w-full h-full;
  }

  .pc-carousel__content {
    @apply absolute inset-0 z-10 flex items-center justify-center;
    /* Background gradient is now applied dynamically via inline style based on brightness attribute */
  }

  .pc-carousel__content-wrapper {
    @apply flex flex-col w-full gap-5 p-8 sm:p-24;
  }

  .pc-carousel__title {
    @apply text-4xl font-bold text-white;
  }

  .pc-carousel__description {
    @apply text-xl text-white;
  }

  .pc-carousel__link {
    @apply absolute inset-0 z-20 block w-full h-full no-underline cursor-pointer;
    @apply transition-all duration-300;
  }

  .pc-carousel__link:hover {
    @apply bg-black/20;
  }

  .pc-carousel__link-indicator {
    @apply absolute z-30 flex items-center justify-center w-10 h-10 top-4 right-4;
    @apply rounded-full shadow-lg bg-white/85 backdrop-blur-md ring-1 ring-black/10;
    @apply text-gray-800;
    @apply transition-all duration-300;
    @apply pointer-events-none;
  }

  .pc-carousel__link:hover + .pc-carousel__link-indicator,
  .pc-carousel__slide:has(.pc-carousel__link:hover) .pc-carousel__link-indicator {
    @apply shadow-2xl ring-2 ring-white/60 bg-white;
  }

  .pc-carousel__indicators {
    @apply absolute inset-x-0 bottom-0 z-10 flex justify-center gap-3 py-2.5;
  }

  .pc-carousel__indicator {
    @apply transition-all duration-500 ease-in-out opacity-50 bg-white rounded-full cursor-pointer hover:opacity-90;
    @apply focus:outline-none focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-white/80;
  }

  /* The hook marks the active indicator by adding a literal
     "opacity-100" class. That string lives in hook-built DOM, which no
     host app's Tailwind scan ever sees - so the utility may not exist.
     Ship the rule ourselves. */
  .pc-carousel__indicator.opacity-100 {
    opacity: 1;
  }

  .pc-carousel__indicator--bars {
    @apply w-6 h-1;
  }

  .pc-carousel__indicator--dots {
    @apply w-2.5 h-2.5 rounded-full;
  }

  /* Carousel gradient overlays */
  .pc-carousel-gradient-overlay-left {
    @apply absolute top-0 bottom-0 left-0 w-1/6 pointer-events-none bg-gradient-to-r from-white to-white/0 dark:from-gray-950 dark:to-gray-950/0;
    z-index: 20;
  }

  .pc-carousel-gradient-overlay-right {
    @apply absolute top-0 bottom-0 right-0 w-1/6 pointer-events-none bg-gradient-to-r from-white/0 to-white dark:from-gray-950/0 dark:to-gray-950;
    z-index: 20;
  }

  .pc-carousel-gradient-overlay-top {
    @apply absolute top-0 left-0 right-0 pointer-events-none h-1/3 bg-gradient-to-b from-white to-white/0 dark:from-gray-950 dark:to-gray-950/0;
    z-index: 20;
  }

  @media (prefers-reduced-motion: reduce) {
    .pc-carousel__slide {
      transition-duration: 1ms !important;
    }

    .pc-carousel[data-transition-type="slide"] .pc-carousel__slides.smooth-scroll {
      scroll-behavior: auto;
    }
  }

  /* Aspect-driven sizing - height derives from width, so a width-
     constrained wrapper (max-w-sm) gives the compact product-card look.
     Later in the file than the fixed-height rules, so it wins. */
  .pc-carousel--aspect-video {
    @apply h-auto aspect-video;
  }

  .pc-carousel--aspect-photo {
    @apply h-auto aspect-[4/3];
  }

  .pc-carousel--aspect-square {
    @apply h-auto aspect-square;
  }

  /* Thumbnails match the frame's ratio */
  .pc-carousel-wrapper--aspect-video .pc-carousel__thumb {
    @apply w-16 h-auto aspect-video;
  }

  .pc-carousel-wrapper--aspect-photo .pc-carousel__thumb {
    @apply w-14 h-auto aspect-[4/3];
  }

  .pc-carousel-wrapper--aspect-square .pc-carousel__thumb {
    @apply w-12 h-auto aspect-square;
  }

  /* Indicators under the frame, in page colours (the overlay's white
     dots are for imagery) */
  .pc-carousel__indicators--below {
    @apply static inset-auto w-full py-0 mt-3;
  }

  .pc-carousel__indicators--below .pc-carousel__indicator {
    @apply bg-gray-400 dark:bg-gray-500;
  }

  /* On the page, "current" speaks primary - same language as
     pagination's current page and the stepper's active circle. The
     overlay variant deliberately stays white: on-image elements can't
     trust a brand colour for contrast against arbitrary photos. */
  .pc-carousel__indicators--below .pc-carousel__indicator.opacity-100 {
    @apply bg-primary-600 dark:bg-primary-500;
  }

  .pc-carousel-gradient-overlay-bottom {
    @apply absolute bottom-0 left-0 right-0 pointer-events-none h-1/3 bg-gradient-to-t from-white to-white/0 dark:from-gray-950 dark:to-gray-950/0;
    z-index: 20;
  }

  /* Toast */

  .pc-toast-group {
    @apply fixed z-50 pointer-events-none;
  }

  .pc-toast-group--top-left {
    @apply top-4 left-4;
  }

  .pc-toast-group--top-center {
    @apply top-4 left-1/2 -translate-x-1/2;
  }

  .pc-toast-group--top-right {
    @apply top-4 right-4;
  }

  .pc-toast-group--bottom-left {
    @apply bottom-4 left-4;
  }

  .pc-toast-group--bottom-center {
    @apply bottom-4 left-1/2 -translate-x-1/2;
  }

  .pc-toast-group--bottom-right {
    @apply bottom-4 right-4;
  }

  .pc-toast-group__stack {
    @apply relative w-[356px] max-w-[calc(100vw-2rem)];
  }

  /* Anchor each toast to the group's edge; the hook drives offset and
     scale through custom properties so the collapsed stack, the expanded
     list and the swipe all compose in one transform. */
  .pc-toast {
    @apply absolute inset-x-0 pointer-events-auto select-none overflow-hidden;
    @apply bg-white border border-gray-200 shadow-lg dark:bg-gray-900 dark:border-gray-400/17;
    border-radius: min(calc(var(--pc-radius, 0.625rem) * 1.2), 1rem);
    transform: translateY(var(--pc-toast-y, 0px)) translateX(var(--pc-toast-swipe, 0px))
      scale(var(--pc-toast-scale, 1));
    transition:
      transform 350ms cubic-bezier(0.21, 1.02, 0.73, 1),
      opacity 250ms ease;
  }

  .pc-toast-group--top-left .pc-toast,
  .pc-toast-group--top-center .pc-toast,
  .pc-toast-group--top-right .pc-toast {
    @apply top-0;
  }

  .pc-toast-group--bottom-left .pc-toast,
  .pc-toast-group--bottom-center .pc-toast,
  .pc-toast-group--bottom-right .pc-toast {
    @apply bottom-0;
  }

  .pc-toast[data-state="entering"] {
    opacity: 0;
    transform: translateY(var(--pc-toast-enter, 16px)) scale(0.97);
  }

  .pc-toast-group--top-left .pc-toast[data-state="entering"],
  .pc-toast-group--top-center .pc-toast[data-state="entering"],
  .pc-toast-group--top-right .pc-toast[data-state="entering"] {
    --pc-toast-enter: -16px;
  }

  .pc-toast[data-state="closing"] {
    opacity: 0;
    transform: translateY(var(--pc-toast-y, 0px))
      translateX(var(--pc-toast-swipe-end, 0px)) scale(0.95);
    pointer-events: none;
  }

  .pc-toast--hidden {
    @apply opacity-0 pointer-events-none;
  }

  .pc-toast--swiping {
    transition: opacity 100ms ease;
    cursor: grabbing;
  }

  .pc-toast__body {
    @apply flex items-start gap-3 p-4;
  }

  .pc-toast__icon {
    @apply w-5 h-5 shrink-0 mt-0.5;
  }

  .pc-toast__icon--info {
    @apply text-info-500;
  }

  .pc-toast__icon--success {
    @apply text-success-500;
  }

  .pc-toast__icon--warning {
    @apply text-warning-500;
  }

  .pc-toast__icon--danger {
    @apply text-danger-500;
  }

  .pc-toast__spinner {
    @apply w-5 h-5 shrink-0 mt-0.5 rounded-full border-2 border-gray-300 border-t-gray-600 animate-spin dark:border-gray-400/25 dark:border-t-gray-300;
  }

  .pc-toast__text {
    @apply flex-1 min-w-0;
  }

  .pc-toast__title {
    @apply text-sm font-semibold text-gray-900 dark:text-gray-100;
  }

  .pc-toast__description {
    @apply mt-0.5 text-sm text-gray-500 dark:text-gray-400;
  }

  .pc-toast__action {
    @apply shrink-0 self-center px-2.5 py-1.5 text-xs font-medium cursor-pointer;
    @apply bg-primary-600 hover:bg-primary-700 transition-colors duration-150;
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50;
    color: var(--pc-button-solid-fg, #fff);
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.25rem), 0.25rem);
  }

  .pc-toast__close {
    @apply relative flex shrink-0 items-center h-5 cursor-pointer text-gray-400 transition-colors duration-150 rounded-sm;
    @apply hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300;
    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50;
  }

  .pc-toast__close::before {
    content: "";
    @apply absolute -inset-2;
  }

  .pc-toast__close-icon {
    @apply w-4 h-4;
  }

  .pc-toast__progress {
    @apply absolute bottom-0 left-0 right-0 h-0.5 origin-left bg-gray-300 dark:bg-gray-400/30;
    animation: pc-toast-progress linear forwards;
  }

  .pc-toast__progress--info {
    @apply bg-info-500;
  }

  .pc-toast__progress--success {
    @apply bg-success-500;
  }

  .pc-toast__progress--warning {
    @apply bg-warning-500;
  }

  .pc-toast__progress--danger {
    @apply bg-danger-500;
  }

  .pc-toast-group__stack--paused .pc-toast__progress {
    animation-play-state: paused;
  }

  @keyframes pc-toast-progress {
    from {
      transform: scaleX(1);
    }

    to {
      transform: scaleX(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pc-toast {
      transition-duration: 1ms;
    }
  }