/* 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 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-white/5 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-white/5 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-white/15 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10 dark:hover:text-gray-50 dark:active:bg-white/15;
  }
  .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-white/5 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-white/5 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-white/5 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-white/5 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-white/15 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10 dark:hover:text-gray-50 dark:active:bg-white/15;
  }
  .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-white/10 dark:hover:text-gray-50 dark:active:bg-white/15;
  }
  .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-white/15 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10 dark:hover:text-gray-50 dark:active:bg-white/15;
  }
  .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-white/15 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10 dark:hover:text-gray-50 dark:active:bg-white/15;
  }
  .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-white/15;
  }

  /* 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-white/15 dark:bg-white/5 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-white/15 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-white/10 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-white/5 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-white/5 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-white/5 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-white/5 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-white/5 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-white/5 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-white/5 dark:text-gray-200 dark:border-white/15;
  }

  /* 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);
  }
  .pc-alert__heading {
    @apply pt-1 font-bold;
  }
  .pc-alert__label {
    @apply py-1 font-medium;
  }
  .pc-alert__dismiss-button {
    @apply flex p-2 hover:cursor-pointer transition-colors duration-150;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.25rem), 0px);
  }

  /* 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-white/5 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-white/5 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-white/5 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-white/5 dark:text-danger-300 dark:border-danger-500/40;
  }

  /* Alerts - dismiss button variants */

  /* Info dismiss button variants */
  .pc-alert__dismiss-button--info-light {
    @apply hover:bg-info-200 hover:text-info-800 dark:hover:bg-info-300 dark:hover:text-info-800;
  }
  .pc-alert__dismiss-button--info-soft {
    @apply hover:bg-info-200 hover:text-info-800 dark:hover:bg-info-500/25 dark:hover:text-info-200;
  }
  .pc-alert__dismiss-button--info-dark {
    @apply text-white hover:bg-info-500;
  }
  .pc-alert__dismiss-button--info-outline {
    @apply text-info-700 hover:bg-info-50 dark:text-info-300 dark:hover:bg-white/10;
  }

  /* Success dismiss button variants */
  .pc-alert__dismiss-button--success-light {
    @apply hover:bg-success-200 hover:text-success-800 dark:hover:bg-success-300 dark:hover:text-success-800;
  }
  .pc-alert__dismiss-button--success-soft {
    @apply hover:bg-success-200 hover:text-success-800 dark:hover:bg-success-500/25 dark:hover:text-success-200;
  }
  .pc-alert__dismiss-button--success-dark {
    @apply text-white hover:bg-success-500;
  }
  .pc-alert__dismiss-button--success-outline {
    @apply text-success-700 hover:bg-success-50 dark:text-success-300 dark:hover:bg-white/10;
  }

  /* Warning dismiss button variants */
  .pc-alert__dismiss-button--warning-light {
    @apply hover:bg-warning-200 hover:text-warning-800 dark:hover:bg-warning-300 dark:hover:text-warning-800;
  }
  .pc-alert__dismiss-button--warning-soft {
    @apply hover:bg-warning-200 hover:text-warning-800 dark:hover:bg-warning-500/25 dark:hover:text-warning-200;
  }
  .pc-alert__dismiss-button--warning-dark {
    @apply text-white hover:bg-warning-500;
  }
  .pc-alert__dismiss-button--warning-outline {
    @apply text-warning-700 hover:bg-warning-50 dark:text-warning-300 dark:hover:bg-white/10;
  }

  /* Danger dismiss button variants */
  .pc-alert__dismiss-button--danger-light {
    @apply hover:bg-danger-200 hover:text-danger-800 dark:hover:bg-danger-300 dark:hover:text-danger-800;
  }
  .pc-alert__dismiss-button--danger-soft {
    @apply hover:bg-danger-200 hover:text-danger-800 dark:hover:bg-danger-500/25 dark:hover:text-danger-200;
  }
  .pc-alert__dismiss-button--danger-dark {
    @apply text-white hover:bg-danger-500;
  }
  .pc-alert__dismiss-button--danger-outline {
    @apply text-danger-700 hover:bg-danger-50 dark:text-danger-300 dark:hover:bg-white/10;
  }

  /* 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-white/5 dark:text-gray-200 dark:border-white/15;
  }
  .pc-alert__dismiss-button--gray-light {
    @apply hover:bg-gray-200 hover:text-gray-800 dark:hover:bg-gray-300 dark:hover:text-gray-800;
  }
  .pc-alert__dismiss-button--gray-soft {
    @apply hover:bg-gray-200 hover:text-gray-800 dark:hover:bg-gray-500/25 dark:hover:text-gray-200;
  }
  .pc-alert__dismiss-button--gray-dark {
    @apply text-white hover:bg-gray-500;
  }
  .pc-alert__dismiss-button--gray-outline {
    @apply text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-white/10;
  }

  /* Alerts - with icon */

  .pc-alert__icon-container {
    @apply self-start shrink-0 pt-0.5 w-6 h-6;
  }

  /* 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-center gap-3 text-sm font-normal text-gray-900 cursor-pointer dark:text-gray-200;
  }
  .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-white/15 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;
  }
  .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-white/5 dark:border-white/15 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;
  }

  .pc-password-field-toggle-button {
    @apply absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500;
  }

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

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

  /* 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-500 bg-transparent border-none cursor-pointer;
  }

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

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

  /* 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-500 bg-transparent border-none cursor-pointer;
  }

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

  .pc-clearable-field-icon {
    @apply w-5 h-5 text-gray-500 dark:text-gray-400;
  }

  /* 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-white/5 dark:border-white/15 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-white/5 dark:border-white/15 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-4 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-white/15 dark:file:bg-white/5 dark:file:text-gray-200 dark:hover:file:bg-white/10 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-white/5 dark:border-white/15;
    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;
  }
  .pc-input-group__addon:has(> .pc-button) {
    @apply px-1.5;
  }
  .pc-input-group__addon [class*="hero-"]:not([class*="w-"]) {
    @apply w-4 h-4;
  }

  /* kbd hints: shadcn-calibre chip, nested radius */
  :is(.pc-kbd, .pc-input-group__addon kbd) {
    @apply inline-flex items-center justify-center 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-white/10 dark:text-gray-400;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.3125rem), 0.125rem);
  }
  .pc-input-group__addon--trailing:has(> kbd) {
    @apply pr-2;
  }
  .pc-input-group__addon--leading:has(> kbd) {
    @apply pl-2;
  }

  /* 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-white/5 dark:border-white/15 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-white/5 dark:border-white/15;
    @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);
  }
  .pc-range-input {
    @apply w-full cursor-pointer focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50 disabled:opacity-50 disabled:cursor-not-allowed;
    border-radius: var(--pc-radius, 0.625rem);
  }

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

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

  .pc-dual-range__thumb::-webkit-slider-thumb {
    @apply appearance-none 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 w-5 h-5 rounded-full pointer-events-auto cursor-pointer bg-primary-500 shadow shadow-black/25 transition-transform duration-100 ease-out;
    border: 3px solid white;
  }

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

  .pc-dual-range__thumb:focus-visible::-webkit-slider-thumb {
    @apply scale-110 ring-4 ring-primary-300 dark:ring-primary-800 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 4px color-mix(in srgb, var(--color-primary-300) 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-white/5 dark:border-white/15 disabled:opacity-50 disabled:cursor-not-allowed;
    border-radius: clamp(0px, calc(var(--pc-radius, 0.625rem) - 0.375rem), 0.25rem);
  }
  .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-white/5 dark:border-white/15 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .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-white/5 dark:border-white/15;
  }

  .pc-radio-card--outline:hover .pc-radio-card__fake-input {
    @apply bg-gray-50 dark:bg-white/10;
  }

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

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

  /* Checked State Styles */
  .pc-radio-card__input:checked ~ .pc-radio-card__fake-input {
    @apply border-primary-600 dark:border-primary-600;
  }

  /* 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 */
  .pc-radio-card--indicator {
    @apply justify-start;
  }
  .pc-radio-card--indicator > .pc-radio-card__content {
    @apply w-full;
  }
  .pc-radio-card__content--indicator {
    @apply flex items-center gap-3;
  }
  .pc-radio-card__dot {
    @apply shrink-0 w-4 h-4 rounded-full border border-gray-300 bg-transparent dark:border-white/25;
  }
  .pc-radio-card__input:checked ~ .pc-radio-card__content .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-zinc-900 dark:border-white/10;
    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-white/10;
    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-white/10;
    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-white/15 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10 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-white/10;
  }
  .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-zinc-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-white/10;
  }
  .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-white/10 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-white/10;
  }
  .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-zinc-900 dark:border-white/10;
    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;
  }
  .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-zinc-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-group__overflow {
    @apply bg-gray-100 font-medium text-gray-600 dark:bg-zinc-800 dark:text-gray-300;
  }

  .pc-avatar--with-placeholder-icon {
    @apply relative inline-block overflow-hidden bg-gray-100 text-gray-300 rounded-full dark:bg-white/10;
  }
  .pc-avatar--with-placeholder-initials {
    @apply flex items-center justify-center font-semibold text-gray-500 uppercase bg-gray-100 rounded-full dark:bg-white/10 dark:text-gray-300;
  }
  .pc-avatar-group {
    @apply ring-white ring-2 dark:ring-zinc-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 flex overflow-hidden;
  }
  .pc-progress-wrapper {
    @apply w-full;
  }
  .pc-progress__header {
    @apply flex items-center justify-between mb-1.5 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;
  }

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

  /* Progress - label (xl only) */

  .pc-progress__label {
    @apply px-4 text-xs font-medium leading-6 text-center whitespace-nowrap;
    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-white/15 dark:bg-white/5 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-white/10 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-white/10 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-white/10 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-white/10;
  }

  /* 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-white/10 hover:bg-gray-100;
  }
  .pc-tabs--segmented {
    @apply inline-flex items-center gap-1 bg-gray-100 p-1 dark:bg-white/10;
    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-zinc-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-zinc-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-white/10;
    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-white/10;
    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-white/10;
  }

  /* 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-white/10;
    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-white/5 dark:text-white;
  }
  .pc-table__tfoot {
    @apply border-t border-gray-200 bg-gray-50 font-medium text-gray-900 dark:border-white/10 dark:bg-white/5 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-white/10 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-white/5;
  }
  .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-white/10 dark:bg-zinc-900 dark:text-gray-100 dark:hover:bg-white/5;
  }
  .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-white/10 dark:bg-zinc-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-white/10;
  }
  .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-white/5;
  }

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

  .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-white/10 dark:bg-white/10 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-zinc-900 dark:border-white/10;
    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 text-gray-400 hover:text-gray-500;
  }
  .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-white/10;
  }
  .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-zinc-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-white/10;
  }
  .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 flex-none self-start rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/50 dark:hover:bg-white/10 dark:hover:text-gray-300;
    border-radius: max(calc(var(--pc-radius, 0.625rem) - 0.25rem), 0px);
  }
  .pc-slideover__header__close-svg {
    @apply h-4 w-4 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-white/10;
  }
  .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-white/15 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;
  }

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

  .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-zinc-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-white/10;
  }

  .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-white/10;
  }

  .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:#ffffff0f] dark:[--pc-chat-assistant-fg:#f4f4f5];
  }
  .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-white/10;
  }
  .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-white/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-white/10;
  }
  /* 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 h-3.5 w-3.5 shrink-0 transition-transform duration-150;
  }
  .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:#ffffff1a];
  }
  .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-white/10;
  }
  .pc-chat__marker-icon {
    @apply h-3.5 w-3.5 shrink-0;
  }
  .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;
  }
  .pc-chat__action-icon {
    @apply h-4 w-4;
  }
  /* 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 {
    @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-white/5 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-white/10 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;
  }
  .pc-chat__composer-send-icon {
    @apply h-4 w-4;
  }
  .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-white/10 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-white/10 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-white/10 dark:bg-zinc-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-white/10;
  }

  .pc-nav-menu__link {
    @apply flex gap-x-4 p-3 transition-colors hover:bg-gray-100 dark:hover:bg-white/5;
    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-white/5 dark:group-hover:bg-white/10;
    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-white/10 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-white/10;
  }

  .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-white/10 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-zinc-900 dark:border-white/10;
    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-zinc-900 dark:border-white/10;
    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;
  }

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

  /* Spotlight Card */
  .pc-spotlight-card {
    @apply relative overflow-hidden border border-gray-200 bg-white dark:border-white/10 dark:bg-zinc-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;
  }
}