:root {
  --xpl-color-brand-primary-deepspace: #220021; /** Primary Xplor brand deep purple */
  --xpl-color-brand-secondary-sunray: #ECFD91; /** Secondary Xplor yellow typically used for highlights and infographics */
  --xpl-color-neutral-0: #FFFFFF; /** Pure white, base neutral color */
  --xpl-color-neutral-50: #F8F9FA; /** Base neutral color */
  --xpl-color-neutral-100: #F3F4F6; /** Base neutral color */
  --xpl-color-neutral-200: #EEEFF3; /** Base neutral color */
  --xpl-color-neutral-300: #EAEBEF; /** Base neutral color */
  --xpl-color-neutral-400: #E1E2E8; /** Base neutral color */
  --xpl-color-neutral-500: #999BA8; /** Base neutral color */
  --xpl-color-neutral-600: #6A6D7D; /** Base neutral color */
  --xpl-color-neutral-700: #3C3847; /** Base neutral color */
  --xpl-color-neutral-800: #363240; /** Base neutral color */
  --xpl-color-neutral-900: #302D3B; /** Base neutral color */
  --xpl-color-neutral-1000: #292632; /** Base neutral color */
  --xpl-color-neutral-1100: #201E29; /** Base neutral color */
  --xpl-color-neutral-1200: #18161F; /** Base neutral color */
  --xpl-color-gray-0: #FFFFFF;
  --xpl-color-gray-50: #F8F9FA;
  --xpl-color-gray-100: #F3F4F6;
  --xpl-color-gray-200: #EEEFF3;
  --xpl-color-gray-300: #EAEBEF;
  --xpl-color-gray-400: #E1E2E8;
  --xpl-color-gray-500: #999BA8;
  --xpl-color-gray-600: #6A6D7D;
  --xpl-color-gray-700: #3C3847;
  --xpl-color-gray-800: #363240;
  --xpl-color-gray-900: #302D3B;
  --xpl-color-gray-1000: #292632;
  --xpl-color-gray-1100: #201E29;
  --xpl-color-gray-1200: #18161F;
  --xpl-color-purple-50: #F4F2FF; /** Base purple color */
  --xpl-color-purple-100: #EBE5FF; /** Base purple color */
  --xpl-color-purple-200: #DDD1FF; /** Base purple color */
  --xpl-color-purple-300: #C3ADFF; /** Base purple color */
  --xpl-color-purple-400: #A480FF; /** Base purple color */
  --xpl-color-purple-500: #8857FA; /** Base purple color */
  --xpl-color-purple-600: #793EF7; /** Base purple color */
  --xpl-color-purple-700: #6923F4; /** Base purple color */
  --xpl-color-purple-800: #4D1AB2; /** Base purple color */
  --xpl-color-purple-900: #330D80; /** Base purple color */
  --xpl-color-orange-50: #FEF7F3; /** Base orange color */
  --xpl-color-orange-100: #FEEDE4; /** Base orange color */
  --xpl-color-orange-200: #FFDCCC; /** Base orange color */
  --xpl-color-orange-300: #FFBDA8; /** Base orange color */
  --xpl-color-orange-400: #F99170; /** Base orange color */
  --xpl-color-orange-500: #F76D43; /** Base orange color */
  --xpl-color-orange-600: #F44E27; /** Base orange color */
  --xpl-color-orange-700: #CC4121; /** Base orange color */
  --xpl-color-orange-800: #A6361A; /** Base orange color */
  --xpl-color-orange-900: #7A2714; /** Base orange color */
  --xpl-color-blue-50: #E8FCFF; /** Base blue color */
  --xpl-color-blue-100: #D1F9FF; /** Base blue color */
  --xpl-color-blue-200: #BAF6FF; /** Base blue color */
  --xpl-color-blue-300: #9FDAF5; /** Base blue color */
  --xpl-color-blue-400: #85BFEB; /** Base blue color */
  --xpl-color-blue-500: #6AA3E0; /** Base blue color */
  --xpl-color-blue-600: #5088D6; /** Base blue color */
  --xpl-color-blue-700: #356CCC; /** Base blue color */
  --xpl-color-blue-800: #2253B3; /** Base blue color */
  --xpl-color-blue-900: #0F3999; /** Base blue color */
  --xpl-color-green-50: #EBFFF8; /** Base green color */
  --xpl-color-green-100: #C4FFED; /** Base green color */
  --xpl-color-green-200: #74FBD0; /** Base green color */
  --xpl-color-green-300: #52EBBA; /** Base green color */
  --xpl-color-green-400: #4AD4A8; /** Base green color */
  --xpl-color-green-500: #37B88F; /** Base green color */
  --xpl-color-green-600: #2E9977; /** Base green color */
  --xpl-color-green-700: #24785D; /** Base green color */
  --xpl-color-green-800: #1D614B; /** Base green color */
  --xpl-color-green-900: #154737; /** Base green color */
  --xpl-color-yellow-50: #FFF8E6; /** Base yellow color */
  --xpl-color-yellow-100: #FFEDBA; /** Base yellow color */
  --xpl-color-yellow-200: #FFE18F; /** Base yellow color */
  --xpl-color-yellow-300: #FFD563; /** Base yellow color */
  --xpl-color-yellow-400: #FFC937; /** Base yellow color */
  --xpl-color-yellow-500: #FFBE0B; /** Base yellow color */
  --xpl-color-yellow-600: #D69D00; /** Base yellow color */
  --xpl-color-yellow-700: #AD7F00; /** Base yellow color */
  --xpl-color-yellow-800: #856100; /** Base yellow color */
  --xpl-color-yellow-900: #5C4300; /** Base yellow color */
  --xpl-color-pink-50: #FFF0FE; /** Base pink color */
  --xpl-color-pink-100: #FFD9FB; /** Base pink color */
  --xpl-color-pink-200: #FFB8F9; /** Base pink color */
  --xpl-color-pink-300: #FF8DF4; /** Base pink color */
  --xpl-color-pink-400: #F26DDC; /** Base pink color */
  --xpl-color-pink-500: #E550C8; /** Base pink color */
  --xpl-color-pink-600: #CC3399; /** Base pink color */
  --xpl-color-pink-700: #BF1D7B; /** Base pink color */
  --xpl-color-pink-800: #990F54; /** Base pink color */
  --xpl-color-pink-900: #730B3F; /** Base pink color */
  --xpl-color-red-50: #FEF7F3; /** Base red color */
  --xpl-color-red-100: #FED9D5; /** Base red color */
  --xpl-color-red-200: #FEC5BE; /** Base red color */
  --xpl-color-red-300: #FF9387; /** Base red color */
  --xpl-color-red-400: #F87263; /** Base red color */
  --xpl-color-red-500: #F24F3D; /** Base red color */
  --xpl-color-red-600: #DB321F; /** Base red color */
  --xpl-color-red-700: #C2210F; /** Base red color */
  --xpl-color-red-800: #961305; /** Base red color */
  --xpl-color-red-900: #731409; /** Base red color */
  --xpl-color-transparent-0: rgba(255, 255, 255, 0); /** Clear transparent color */
  --xpl-color-transparent-light-5: rgba(255, 255, 255, 0.05); /** Light transparent color @ 5% opacity. */
  --xpl-color-transparent-light-10: rgba(255, 255, 255, 0.1); /** Light transparent color @ 10% opacity. */
  --xpl-color-transparent-light-25: rgba(255, 255, 255, 0.25); /** Light transparent color @ 25% opacity. */
  --xpl-color-transparent-light-50: rgba(255, 255, 255, 0.5); /** Light transparent color @ 50% opacity. */
  --xpl-color-transparent-light-75: rgba(255, 255, 255, 0.75); /** Light transparent color @ 75% opacity. */
  --xpl-color-transparent-neutral-5: rgba(48, 45, 59, 0.05); /** Neutral transparent color @ 5% opacity */
  --xpl-color-transparent-neutral-10: rgba(48, 45, 59, 0.1); /** Neutral transparent color @ 10% opacity */
  --xpl-color-transparent-neutral-25: rgba(48, 45, 59, 0.25); /** Neutral transparent color @ 25% opacity */
  --xpl-color-transparent-neutral-50: rgba(48, 45, 59, 0.5); /** Neutral transparent color @ 50% opacity */
  --xpl-color-transparent-neutral-75: rgba(48, 45, 59, 0.75); /** Neutral transparent color @ 75% opacity */
  --xpl-color-teal-50: #EAFBFF; /** Base teal color */
  --xpl-color-teal-100: #BCF1FF; /** Base teal color */
  --xpl-color-teal-200: #8EE8FF; /** Base teal color */
  --xpl-color-teal-300: #60DEFF; /** Base teal color */
  --xpl-color-teal-400: #31CFF8; /** Base teal color */
  --xpl-color-teal-500: #1DB0D6; /** Base teal color */
  --xpl-color-teal-600: #0D92B4; /** Base teal color */
  --xpl-color-teal-700: #017492; /** Base teal color */
  --xpl-color-teal-800: #005970; /** Base teal color */
  --xpl-color-teal-900: #003E4E; /** Base teal color */
  --xpl-font-family-default: apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif;
  --xpl-font-weight-normal: 400; /** Bold type, used in Title typography styles */
  --xpl-font-weight-medium: 500; /** Semibold type, used in Display typography styles */
  --xpl-font-weight-semibold: 600; /** Medium type, used in Caption typography styles */
  --xpl-font-weight-bold: 700; /** Default type weight, used in body and caption typography styles */
  --xpl-size-0: 0; /** 0px/0rem */
  --xpl-size-100: 1rem; /** 16px/1rem (base value) */
  --xpl-size-125: 1.25rem; /** 20px/1.25rem */
  --xpl-size-150: 1.5rem; /** 24px/1.5rem */
  --xpl-size-175: 1.75rem; /** 28px/1.75rem */
  --xpl-size-200: 2rem; /** 32px/2rem */
  --xpl-size-225: 2.25rem; /** 36px/2.25rem */
  --xpl-size-250: 2.5rem; /** 40px/2.5rem */
  --xpl-size-300: 3rem; /** 48px/3rem */
  --xpl-size-350: 3.5rem; /** 56px/3.5rem */
  --xpl-size-400: 4rem; /** 64px/4rem */
  --xpl-size-450: 4.5rem; /** 72px/4.5rem */
  --xpl-size-500: 5rem; /** 80px/5rem */
  --xpl-size-600: 6rem; /** 96px/6rem */
  --xpl-size-700: 7rem; /** 112px/7rem */
  --xpl-size-800: 8rem; /** 128px/8rem */
  --xpl-size-900: 9rem; /** 144px/9rem */
  --xpl-size-1125: 1.125rem; /** 18px/1.125 (base value) */
  --xpl-size-0125: 0.125rem; /** 2px/0.125rem */
  --xpl-size-025: 0.25rem; /** 4px/0.25rem */
  --xpl-size-0375: 0.375rem; /** 6px/0.375rem */
  --xpl-size-050: 0.5rem; /** 8px/0.5rem */
  --xpl-size-0625: 0.625rem; /** 10px/0.625rem */
  --xpl-size-075: 0.75rem; /** 12px/0.75rem */
  --xpl-size-0875: 0.875rem; /** 14px/0.875rem */
  --xpl-size-radius-none: 0;
  --xpl-size-radius-small: 0.125rem;
  --xpl-size-radius-default: 0.5rem;
  --xpl-size-radius-large: 1rem;
  --xpl-size-radius-full: 62.4375rem;
  --xpl-size-spacing-0: 0; /** 0px/0rem */
  --xpl-size-spacing-2: 0.125rem; /** 2px/0.125rem */
  --xpl-size-spacing-4: 0.25rem; /** 4px/0.25rem */
  --xpl-size-spacing-6: 0.375rem; /** 6px/0.375rem */
  --xpl-size-spacing-8: 0.5rem; /** 8px/0.5rem */
  --xpl-size-spacing-10: 0.625rem; /** 10px/0.625rem */
  --xpl-size-spacing-12: 0.75rem; /** 12px/0.75rem */
  --xpl-size-spacing-14: 0.875rem; /** 14px/0.875rem */
  --xpl-size-spacing-16: 1rem; /** 16px/1rem (base value) */
  --xpl-size-spacing-20: 1.25rem; /** 20px/1.25rem */
  --xpl-size-spacing-24: 1.5rem; /** 24px/1.5rem */
  --xpl-size-spacing-28: 1.75rem; /** 28px/1.75rem */
  --xpl-size-spacing-32: 2rem; /** 32px/2rem */
  --xpl-size-spacing-36: 2.25rem; /** 36px/2.25rem */
  --xpl-size-spacing-40: 2.5rem; /** 40px/2.5rem */
  --xpl-size-spacing-48: 3rem; /** 48px/3rem */
  --xpl-size-spacing-56: 3.5rem; /** 56px/3.5rem */
  --xpl-size-spacing-64: 4rem; /** 64px/4rem */
  --xpl-size-spacing-72: 4.5rem; /** 72px/4.5rem */
  --xpl-size-spacing-80: 5rem; /** 80px/5rem */
  --xpl-size-spacing-96: 6rem; /** 96px/6rem */
  --xpl-size-spacing-112: 7rem; /** 112px/7rem */
  --xpl-size-spacing-128: 8rem; /** 128px/8rem */
  --xpl-size-spacing-144: 9rem; /** 144px/9rem */
  --xpl-border-small: 0.0625rem;
  --xpl-border-radius-full: 624.9375rem;
  --xpl-space-0: 0; /** 0px/0rem */
  --xpl-space-2: 0.125rem; /** 2px/0.125rem */
  --xpl-space-4: 0.25rem; /** 4px/0.25rem */
  --xpl-space-6: 0.375rem; /** 6px/0.375rem */
  --xpl-space-8: 0.5rem; /** 8px/0.5rem */
  --xpl-space-10: 0.625rem; /** 10px/0.625rem */
  --xpl-space-12: 0.75rem; /** 12px/0.75rem */
  --xpl-space-16: 1rem; /** 16px/1rem */
  --xpl-space-24: 1.5rem; /** 24px/1.5rem */
  --xpl-space-32: 2rem; /** 32px/2rem */
  --xpl-space-40: 2.5rem; /** 40px/2.5rem */
  --xpl-space-48: 3rem; /** 48px/3rem */
  --xpl-space-56: 3.5rem; /** 56px/3.5rem */
  --xpl-space-64: 4rem; /** 64px/4rem */
  --xpl-space-72: 4.5rem; /** 72px/4.5rem */
  --xpl-space-80: 5rem; /** 80px/5rem */
  --xpl-space-112: 7rem; /** 112px/7rem */
  --xpl-space-144: 9rem; /** 144px/8.75rem */
  --xpl-z-index-100: 100;
  --xpl-z-index-200: 200;
  --xpl-z-index-300: 300;
  --xpl-z-index-400: 400;
  --xpl-z-index-500: 500;
  --xpl-z-index-600: 600;
  --xpl-z-index-700: 700;
  --xpl-z-index-800: 800;
  --xpl-z-index-900: 900;
  --xpl-color-positive-lm: var(--xpl-color-green-500);
  --xpl-color-positive-dm: var(--xpl-color-green-300);
  --xpl-color-positive-bg-lm: var(--xpl-color-green-100);
  --xpl-color-positive-bg-dm: var(--xpl-color-transparent-0);
  --xpl-color-negative-lm: var(--xpl-color-red-600);
  --xpl-color-negative-dm: var(--xpl-color-red-300);
  --xpl-color-negative-bg-lm: var(--xpl-color-red-100);
  --xpl-color-negative-bg-dm: var(--xpl-color-transparent-0);
  --xpl-color-highlight-lm: var(--xpl-color-yellow-500);
  --xpl-color-highlight-dm: var(--xpl-color-yellow-200);
  --xpl-color-highlight-bg-lm: var(--xpl-color-yellow-200);
  --xpl-color-highlight-bg-dm: var(--xpl-color-transparent-0);
  --xpl-color-information-bg-dm: var(--xpl-color-transparent-0);
  --xpl-color-trivial-lm: var(--xpl-color-gray-600);
  --xpl-color-trivial-dm: var(--xpl-color-gray-500);
  --xpl-color-trivial-bg-lm: var(--xpl-color-gray-400);
  --xpl-color-trivial-bg-dm: var(--xpl-color-transparent-0);
  --xpl-color-action-primary-lm: var(--xpl-color-purple-700);
  --xpl-color-action-primary-dm: var(--xpl-color-purple-300);
  --xpl-color-action-primary-hover-lm: var(--xpl-color-purple-800);
  --xpl-color-action-primary-hover-dm: var(--xpl-color-purple-400);
  --xpl-color-action-disabled-lm: var(--xpl-color-gray-100);
  --xpl-color-action-disabled-dm: var(--xpl-color-gray-800);
  --xpl-color-action-warning-lm: var(--xpl-color-red-700);
  --xpl-color-action-warning-dm: var(--xpl-color-red-300);
  --xpl-color-action-warning-hover-lm: var(--xpl-color-red-800);
  --xpl-color-action-warning-hover-dm: var(--xpl-color-red-400);
  --xpl-color-accent-green: var(--xpl-color-green-200);
  --xpl-color-accent-yellow: var(--xpl-color-yellow-200);
  --xpl-color-accent-pink: var(--xpl-color-pink-300);
  --xpl-color-accent-purple: var(--xpl-color-purple-300);
  --xpl-color-accent-blue-lm: var(--xpl-color-blue-500);
  --xpl-color-accent-blue-dm: var(--xpl-color-blue-200);
  --xpl-color-brand-primary-xplorange: var(--xpl-color-orange-600); /** Primary Xplor brand orange */
  --xpl-color-brand-primary-starwhite: var(--xpl-color-orange-50); /** Used for brand colored surfaces */
  --xpl-color-brand-secondary-supernova: var(--xpl-color-green-200); /** Secondary Xplor green typically used for highlights and infographics */
  --xpl-color-brand-secondary-neptune: var(--xpl-color-purple-600); /** Secondary Xplor purple typically used for UI elements and active states, highlights and infographics */
  --xpl-color-brand-secondary-pinkplanet: var(--xpl-color-pink-300); /** Secondary Xplor pink typically used for highlights and infographics */
  --xpl-color-brand-secondary-skyblue: var(--xpl-color-blue-200); /** Secondary Xplor blue typically used for highlights and infographics */
  --xpl-color-foreground-lm: var(--xpl-color-neutral-0);
  --xpl-color-foreground-dm: var(--xpl-color-neutral-1000);
  --xpl-color-background-lm: var(--xpl-color-neutral-50);
  --xpl-color-background-dm: var(--xpl-color-neutral-1200);
  --xpl-color-background-2-lm: var(--xpl-color-neutral-100);
  --xpl-color-background-2-dm: var(--xpl-color-neutral-1100);
  --xpl-color-navigation-lm: var(--xpl-color-neutral-1000);
  --xpl-color-navigation-dm: var(--xpl-color-neutral-1000);
  --xpl-color-stroke-lm: var(--xpl-color-neutral-400);
  --xpl-color-stroke-dm: var(--xpl-color-neutral-600);
  --xpl-color-primary-lm: var(--xpl-color-orange-600); /** themable */
  --xpl-color-primary-dm: var(--xpl-color-orange-400); /** themable */
  --xpl-color-primary-bg-lm: var(--xpl-color-orange-50); /** themable */
  --xpl-color-primary-bg-dm: var(--xpl-color-neutral-900); /** themable */
  --xpl-color-secondary-lm: var(--xpl-color-purple-700); /** themable */
  --xpl-color-secondary-dm: var(--xpl-color-purple-300); /** themable */
  --xpl-color-secondary-hover-lm: var(--xpl-color-purple-800); /** themable */
  --xpl-color-secondary-hover-dm: var(--xpl-color-purple-400); /** themable */
  --xpl-color-secondary-bg-lm: var(--xpl-color-purple-50); /** themable */
  --xpl-color-secondary-bg-dm: var(--xpl-color-neutral-900); /** themable */
  --xpl-color-text-primary-lm: var(--xpl-color-gray-900);
  --xpl-color-text-primary-dm: var(--xpl-color-gray-0);
  --xpl-color-text-secondary-lm: var(--xpl-color-gray-600);
  --xpl-color-text-secondary-dm: var(--xpl-color-gray-500);
  --xpl-color-text-reverse-lm: var(--xpl-color-gray-0);
  --xpl-color-text-reverse-dm: var(--xpl-color-gray-1000);
  --xpl-color-text-warning-lm: var(--xpl-color-red-700);
  --xpl-color-text-warning-dm: var(--xpl-color-red-300);
  --xpl-font-weight-label-default: var(--xpl-font-weight-medium); /** Default weight labels, typically on forms */
  --xpl-font-weight-label-strong: var(--xpl-font-weight-bold); /** Bold weight labels, typically on forms */
  --xpl-font-size-display-1: var(--xpl-size-350); /** Title size typography */
  --xpl-font-size-display-2: var(--xpl-size-300); /** Title size typography */
  --xpl-font-size-display-3: var(--xpl-size-250); /** Title size typography */
  --xpl-font-size-title-1: var(--xpl-size-200); /** Title size typography */
  --xpl-font-size-title-2: var(--xpl-size-150); /** Title size typography */
  --xpl-font-size-title-3: var(--xpl-size-125); /** Title size typography */
  --xpl-font-size-title-4: var(--xpl-size-100); /** Title size typography */
  --xpl-font-size-title-5: var(--xpl-size-0875); /** Smallest Title size typography */
  --xpl-font-size-body: var(--xpl-size-0875); /** Default body size typography */
  --xpl-font-size-callout: var(--xpl-size-075); /** Callout size typography */
  --xpl-font-size-caption: var(--xpl-size-0625); /** Caption size typography */
  --xpl-size-font-title-1: var(--xpl-size-175);
  --xpl-size-font-title-2: var(--xpl-size-150);
  --xpl-size-font-title-3: var(--xpl-size-125);
  --xpl-size-font-title-4: var(--xpl-size-100);
  --xpl-size-font-title-5: var(--xpl-size-0875);
  --xpl-size-font-body: var(--xpl-size-0875);
  --xpl-size-font-callout: var(--xpl-size-075);
  --xpl-size-font-caption: var(--xpl-size-0625);
  --xpl-size-radius-button: var(--xpl-size-radius-full); /** themable */
  --xpl-border-none: var(--xpl-size-0);
  --xpl-border-large: var(--xpl-size-0125);
  --xpl-border-radius-none: var(--xpl-size-0);
  --xpl-border-radius-small: var(--xpl-size-025);
  --xpl-border-radius-default: var(--xpl-size-050);
  --xpl-border-radius-large: var(--xpl-size-100);
  --xpl-border-radius-button: var(--xpl-border-radius-full);
  --xpl-border-default: var(--xpl-color-neutral-400); /** Default border color */
  --xpl-border-strong: var(--xpl-color-neutral-600); /** Use for strong weight borders */
  --xpl-border-subtle: var(--xpl-color-neutral-200); /** Use for subtle weight borders */
  --xpl-border-inverse: var(--xpl-color-neutral-0); /** Use for inverse borders (light on dark/dark on light) */
  --xpl-border-hover: var(--xpl-color-purple-700); /** Use for borders in a hover state */
  --xpl-border-active: var(--xpl-color-purple-700); /** Use for borders in an active state */
  --xpl-border-focus: var(--xpl-color-purple-800); /** Use for borders in a focus state */
  --xpl-border-negative: var(--xpl-color-red-700); /** Use for negative sentiment borders */
  --xpl-border-positive: var(--xpl-color-green-700); /** Use for positive sentiment borders */
  --xpl-border-accent-default: var(--xpl-color-purple-700); /** Default color accented borders */
  --xpl-border-accent-brand: var(--xpl-color-orange-600); /** Brand color accented borders */
  --xpl-border-accent-information: var(--xpl-color-purple-700); /** Informational accented borders */
  --xpl-border-accent-highlight: var(--xpl-color-yellow-200); /** Highlight accented borders */
  --xpl-border-accent-warning: var(--xpl-color-yellow-500); /** Highlight accented borders */
  --xpl-border-accent-subtle: var(--xpl-color-neutral-500); /** Subtle accented borders */
  --xpl-border-accent-alternative: var(--xpl-color-blue-100); /** Alternative accented borders */
  --xpl-background-surface-default: var(--xpl-color-neutral-0); /** The default surface for pages and containers */
  --xpl-background-surface-subtlest: var(--xpl-color-neutral-50); /** Use for the subtlest surfaces */
  --xpl-background-surface-subtle: var(--xpl-color-neutral-100); /** Use for subtle surfaces */
  --xpl-background-surface-bold: var(--xpl-color-neutral-1000); /** Use for bold dark surfaces */
  --xpl-background-surface-backdrop: var(--xpl-color-transparent-neutral-50); /** Use on transparent backdrops; eg. behind a modal */
  --xpl-background-surface-inverse-on-light: var(--xpl-color-neutral-1000); /** Use for inverse surfaces on light surfaces where mode switching is not needed */
  --xpl-background-surface-inverse-on-dark: var(--xpl-color-neutral-0); /** Use for inverse surfaces on dark surfaces where mode switching is not needed */
  --xpl-background-surface-information: var(--xpl-color-purple-50); /** Use for informational surfaces */
  --xpl-background-surface-information-bold: var(--xpl-color-purple-100); /** Use for informational surfaces where a bold weight is needed */
  --xpl-background-surface-positive: var(--xpl-color-green-100); /** Use for positive sentiment surfaces */
  --xpl-background-surface-negative: var(--xpl-color-red-100); /** Use for negative sentiment surfaces */
  --xpl-background-surface-transparent-0: var(--xpl-color-transparent-0); /** Use for transparent surfaces */
  --xpl-background-surface-transparent-5: var(--xpl-color-transparent-neutral-5); /** Use for elevation shadows and overlays */
  --xpl-background-surface-transparent-10: var(--xpl-color-transparent-neutral-10); /** Use for elevation shadows and overlays */
  --xpl-background-surface-transparent-25: var(--xpl-color-transparent-neutral-25); /** Use for elevation shadows and overlays */
  --xpl-background-surface-transparent-50: var(--xpl-color-transparent-neutral-50); /** Use for elevation shadows and overlays */
  --xpl-background-surface-transparent-75: var(--xpl-color-transparent-neutral-75); /** Use for elevation shadows and overlays */
  --xpl-background-action-disabled: var(--xpl-color-neutral-100); /** Use for disabled action states */
  --xpl-background-action-primary-default: var(--xpl-color-purple-700); /** Use for primary action default state */
  --xpl-background-action-primary-hover: var(--xpl-color-purple-800); /** Use for primary action hover state */
  --xpl-background-action-primary-active: var(--xpl-color-purple-800); /** Use for primary action active state */
  --xpl-background-action-primary-focus: var(--xpl-color-purple-700); /** Use for primary action focus state */
  --xpl-background-action-secondary-default: var(--xpl-color-neutral-0); /** Use for secondary action default state */
  --xpl-background-action-secondary-hover: var(--xpl-color-neutral-0); /** Use for secondary action hover state */
  --xpl-background-action-secondary-active: var(--xpl-color-neutral-0); /** Use for secondary action active state */
  --xpl-background-action-secondary-focus: var(--xpl-color-neutral-0); /** Use for secondary action focus state */
  --xpl-background-action-tertiary-default: var(--xpl-color-transparent-0); /** Use for tertiary action default state */
  --xpl-background-action-tertiary-hover: var(--xpl-color-neutral-100); /** Use for tertiary action hover state */
  --xpl-background-action-tertiary-active: var(--xpl-color-neutral-300); /** Use for tertiary action active state */
  --xpl-background-action-tertiary-focus: var(--xpl-color-neutral-100); /** Use for tertiary action focus state */
  --xpl-background-action-positive-default: var(--xpl-color-green-700); /** Use for positive actions default state */
  --xpl-background-action-positive-hover: var(--xpl-color-green-800); /** Use for positive actions hover state */
  --xpl-background-action-positive-active: var(--xpl-color-green-800); /** Use for positive actions active state */
  --xpl-background-action-positive-focus: var(--xpl-color-green-700); /** Use for positive actions focused state */
  --xpl-background-action-negative-default: var(--xpl-color-red-700); /** Use for negative actions default state */
  --xpl-background-action-negative-hover: var(--xpl-color-red-800); /** Use for negative actions hover state */
  --xpl-background-action-negative-active: var(--xpl-color-red-800); /** Use for negative actions active state */
  --xpl-background-action-negative-focus: var(--xpl-color-red-700); /** Use for negative actions focused state */
  --xpl-background-accent-default: var(--xpl-color-purple-700); /** Use for default accent backgrounds */
  --xpl-background-accent-pink: var(--xpl-color-pink-400); /** Use for pink accent backgrounds */
  --xpl-background-accent-highlight: var(--xpl-color-yellow-500); /** Use for highlighted accent backgrounds */
  --xpl-background-accent-positive: var(--xpl-color-green-400); /** Use for positive sentiment accents */
  --xpl-background-accent-positive-bold: var(--xpl-color-green-700); /** Use for positive sentiments when a bold weight is needed */
  --xpl-background-accent-negative: var(--xpl-color-red-600); /** Use for negative sentiments */
  --xpl-background-accent-negative-bold: var(--xpl-color-red-800); /** Use for negative sentiments when a bold weight is needed */
  --xpl-background-accent-alternative: var(--xpl-color-blue-400); /** Alternative accent color */
  --xpl-background-accent-alternative-bold: var(--xpl-color-blue-700); /** Alternative accent color in a bold weight */
  --xpl-background-accent-brand: var(--xpl-color-orange-600); /** Use for brand color accents */
  --xpl-background-accent-brand-subtle: var(--xpl-color-orange-200); /** Use for subtle brand accents */
  --xpl-background-accent-neutral: var(--xpl-color-neutral-400); /** Use for neutral accents */
  --xpl-background-accent-neutral-bold: var(--xpl-color-neutral-500); /** Use for neutral accents that need a bolder weight */
  --xpl-background-brand-primary: var(--xpl-color-orange-600); /** Primary brand color. Used for logos and brand accents */
  --xpl-background-brand-primary-surface: var(--xpl-color-orange-50); /** Primary brand surface color */
  --xpl-background-brand-secondary: var(--xpl-color-purple-700); /** Secondary brand color */
  --xpl-background-brand-secondary-surface: var(--xpl-color-purple-50); /** Secondary brand surface color */
  --xpl-background-badge-yellow: var(--xpl-color-yellow-100); /** Neutral sentiment Toast surface */
  --xpl-background-badge-blue: var(--xpl-color-blue-100); /** Positive sentiment toast surface */
  --xpl-background-messaging-warning: var(--xpl-color-yellow-100); /** Negative sentiment Toast surface */
  --xpl-background-messaging-warning-bold: var(--xpl-color-yellow-300); /** Yellow Badge surface */
  --xpl-background-messaging-negative-bold: var(--xpl-color-red-700); /** Blue badge surface */
  --xpl-chart-theme-warm-5: var(--xpl-color-orange-600); /** Warm theme color for the 5th data point */
  --xpl-chart-neutral-lighter: var(--xpl-color-neutral-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-light: var(--xpl-color-neutral-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-normal: var(--xpl-color-neutral-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-bold: var(--xpl-color-neutral-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-bolder: var(--xpl-color-neutral-1000); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-boldest: var(--xpl-color-neutral-1200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-lighter: var(--xpl-color-orange-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-light: var(--xpl-color-orange-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-normal: var(--xpl-color-orange-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-bold: var(--xpl-color-orange-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-bolder: var(--xpl-color-orange-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-boldest: var(--xpl-color-orange-900); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-lighter: var(--xpl-color-purple-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-light: var(--xpl-color-purple-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-normal: var(--xpl-color-purple-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-bold: var(--xpl-color-purple-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-bolder: var(--xpl-color-purple-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-boldest: var(--xpl-color-purple-900); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-lighter: var(--xpl-color-green-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-light: var(--xpl-color-green-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-normal: var(--xpl-color-green-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-bold: var(--xpl-color-green-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-bolder: var(--xpl-color-green-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-boldest: var(--xpl-color-green-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-lighter: var(--xpl-color-yellow-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-light: var(--xpl-color-yellow-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-normal: var(--xpl-color-yellow-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-bold: var(--xpl-color-yellow-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-bolder: var(--xpl-color-yellow-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-boldest: var(--xpl-color-yellow-900); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-lighter: var(--xpl-color-red-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-light: var(--xpl-color-red-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-normal: var(--xpl-color-red-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-bold: var(--xpl-color-red-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-bolder: var(--xpl-color-red-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-boldest: var(--xpl-color-red-900); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-lighter: var(--xpl-color-pink-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-light: var(--xpl-color-pink-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-normal: var(--xpl-color-pink-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-bold: var(--xpl-color-pink-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-bolder: var(--xpl-color-pink-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-boldest: var(--xpl-color-pink-900); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-lighter: var(--xpl-color-blue-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-light: var(--xpl-color-blue-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-normal: var(--xpl-color-blue-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-bold: var(--xpl-color-blue-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-bolder: var(--xpl-color-blue-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-boldest: var(--xpl-color-blue-900); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-lighter: var(--xpl-color-teal-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-light: var(--xpl-color-teal-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-normal: var(--xpl-color-teal-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-bold: var(--xpl-color-teal-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-bolder: var(--xpl-color-teal-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-boldest: var(--xpl-color-teal-900); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-icon-default: var(--xpl-color-neutral-1000); /** Default icon color and when paired with default or strong text. */
  --xpl-icon-subtle: var(--xpl-color-neutral-500); /** Use when paired with subtle text colors or inactive actions. */
  --xpl-icon-inverse: var(--xpl-color-neutral-0); /** Inverse color icons (white on dark surfaces, dark on light surfaces) */
  --xpl-icon-inverse-on-light: var(--xpl-color-neutral-1000); /** Dark icons on light backgrounds that do not mode switch. */
  --xpl-icon-inverse-on-dark: var(--xpl-color-neutral-0); /** White icons on dark backgrounds that do not mode switch. */
  --xpl-icon-disabled: var(--xpl-color-neutral-600); /** Use for icons paired with disabled text or actions. */
  --xpl-icon-negative: var(--xpl-color-red-700); /** Use for icons with negative sentiment, or paired with negative text. */
  --xpl-icon-warning: var(--xpl-color-yellow-600); /** Highlight accented borders. */
  --xpl-icon-positive: var(--xpl-color-green-700); /** Use for icons in a positive sentiment or paired with positive text. */
  --xpl-icon-information: var(--xpl-color-purple-700); /** Use for icons communicating information */
  --xpl-text-strong: var(--xpl-color-neutral-1100); /** Bold text color, use for display text styles, page headings */
  --xpl-text-default: var(--xpl-color-neutral-900); /** Use for primary text color such as body or titles in sentence case */
  --xpl-text-subdued: var(--xpl-color-neutral-600); /** Use for subdued text such as descriptions and details */
  --xpl-text-inverse: var(--xpl-color-neutral-0); /** Use on inverse surfaces (light on dark surface, dark on light surface) */
  --xpl-text-inverse-on-light: var(--xpl-color-neutral-1000); /** Use on a light surface that does not mode switch */
  --xpl-text-inverse-on-dark: var(--xpl-color-neutral-0); /** Use on text on a dark surface that does not mode switch */
  --xpl-text-positive: var(--xpl-color-green-700); /** Use on positive sentiment text */
  --xpl-text-negative: var(--xpl-color-red-700); /** Use on negative sentiment text */
  --xpl-text-link-default: var(--xpl-color-purple-700); /** Use for link text */
  --xpl-text-link-hovered: var(--xpl-color-purple-800); /** Use for default badge text */
  --xpl-text-link-visited: var(--xpl-color-pink-800); /** Use for yellow badge text */
  --xpl-color-information-lm: var(--xpl-color-secondary-lm); /** uses themable token */
  --xpl-color-information-dm: var(--xpl-color-secondary-dm); /** uses themable token */
  --xpl-color-information-bg-lm: var(--xpl-color-secondary-bg-lm); /** uses themable token */
  --xpl-color-text-action-lm: var(--xpl-color-primary-lm); /** uses themable token */
  --xpl-color-text-action-dm: var(--xpl-color-primary-dm); /** uses themable token */
  --xpl-border-badge-purple: var(--xpl-background-surface-transparent-0); /** Blue badge surface */
  --xpl-border-badge-yellow: var(--xpl-background-surface-transparent-0); /** Yellow badge surface */
  --xpl-border-badge-green: var(--xpl-background-surface-transparent-0); /** Green badge surface */
  --xpl-border-badge-grey: var(--xpl-background-surface-transparent-0); /** Grey badge surface */
  --xpl-border-badge-blue: var(--xpl-background-surface-transparent-0); /** Blue badge surface */
  --xpl-border-badge-red: var(--xpl-background-surface-transparent-0); /** Red badge surface */
  --xpl-background-brand-tertiary: var(--xpl-color-brand-primary-starwhite); /** Brand tertiary color. Used primarily for surfaces */
  --xpl-background-badge-default: var(--xpl-background-surface-information-bold); /** Default Badge surface */
  --xpl-background-badge-green: var(--xpl-background-surface-positive); /** Neutral sentiment Toast surface */
  --xpl-background-badge-red: var(--xpl-background-surface-negative); /** Neutral sentiment Toast surface */
  --xpl-background-badge-grey: var(--xpl-background-accent-neutral); /** Positive sentiment toast surface */
  --xpl-background-messaging-information: var(--xpl-background-surface-information); /** Negative sentiment Toast surface */
  --xpl-background-messaging-positive: var(--xpl-background-surface-positive); /** Green badge surface */
  --xpl-background-messaging-positive-bold: var(--xpl-background-accent-positive-bold); /** Red Badge surface */
  --xpl-background-messaging-negative: var(--xpl-background-surface-negative); /** Grey Badge surface */
  --xpl-chart-theme-vibrant-1: var(--xpl-chart-purple-bolder); /** Vibrant theme color for the 1st data point */
  --xpl-chart-theme-vibrant-2: var(--xpl-chart-orange-normal); /** Vibrant theme color for the 2nd data point */
  --xpl-chart-theme-vibrant-3: var(--xpl-chart-pink-normal); /** Vibrant theme color for the 3rd data point */
  --xpl-chart-theme-vibrant-4: var(--xpl-chart-yellow-light); /** Vibrant theme color for the 4th data point */
  --xpl-chart-theme-vibrant-5: var(--xpl-chart-purple-bold); /** Vibrant theme color for the 5th data point */
  --xpl-chart-theme-vibrant-6: var(--xpl-chart-green-normal); /** Vibrant theme color for the 6th data point */
  --xpl-chart-theme-vibrant-7: var(--xpl-chart-pink-bold); /** Vibrant theme color for the 7th data point */
  --xpl-chart-theme-vibrant-8: var(--xpl-chart-teal-light); /** Vibrant theme color for the 8th data point */
  --xpl-chart-theme-sunset-1: var(--xpl-chart-purple-bolder); /** Sunset theme color for the 1st data point */
  --xpl-chart-theme-sunset-2: var(--xpl-chart-purple-bold); /** Sunset theme color for the 2nd data point */
  --xpl-chart-theme-sunset-3: var(--xpl-chart-orange-bold); /** Sunset theme color for the 3rd data point */
  --xpl-chart-theme-sunset-4: var(--xpl-chart-orange-light); /** Sunset theme color for the 4th data point */
  --xpl-chart-theme-sunset-5: var(--xpl-chart-yellow-light); /** Sunset theme color for the 5th data point */
  --xpl-chart-theme-sunset-6: var(--xpl-chart-green-normal); /** Sunset theme color for the 6th data point */
  --xpl-chart-theme-sunset-7: var(--xpl-chart-blue-normal); /** Sunset theme color for the 7th data point */
  --xpl-chart-theme-sunset-8: var(--xpl-chart-blue-bolder); /** Sunset theme color for the 8th data point */
  --xpl-chart-theme-warm-1: var(--xpl-chart-purple-bolder); /** Warm theme color for the 1st data point */
  --xpl-chart-theme-warm-2: var(--xpl-chart-purple-bold); /** Warm theme color for the 2th data point */
  --xpl-chart-theme-warm-3: var(--xpl-chart-pink-normal); /** Warm theme color for the 3th data point */
  --xpl-chart-theme-warm-4: var(--xpl-chart-pink-light); /** Warm theme color for the 4th data point */
  --xpl-chart-theme-warm-6: var(--xpl-chart-orange-normal); /** Warm theme color for the 6th data point */
  --xpl-chart-theme-warm-7: var(--xpl-chart-yellow-normal); /** Warm theme color for the 7th data point */
  --xpl-chart-theme-warm-8: var(--xpl-chart-yellow-bolder); /** Warm theme color for the 8th data point */
  --xpl-chart-theme-cool-1: var(--xpl-chart-purple-boldest); /** Cool theme color for the 1st data point */
  --xpl-chart-theme-cool-2: var(--xpl-chart-teal-lighter); /** Cool theme color for the 2nd data point */
  --xpl-chart-theme-cool-3: var(--xpl-chart-purple-bold); /** Cool theme color for the 3rd data point */
  --xpl-chart-theme-cool-4: var(--xpl-chart-teal-normal); /** Cool theme color for the 4th data point */
  --xpl-chart-theme-cool-5: var(--xpl-chart-purple-bolder); /** Cool theme color for the 5th data point */
  --xpl-chart-theme-cool-6: var(--xpl-chart-blue-normal); /** Cool theme color for the 6th data point */
  --xpl-chart-theme-cool-7: var(--xpl-chart-purple-light); /** Cool theme color for the 7th data point */
  --xpl-chart-theme-cool-8: var(--xpl-chart-blue-boldest); /** Cool theme color for the 8th data point */
  --xpl-chart-theme-fun-1: var(--xpl-chart-blue-boldest); /** Fun theme color for the 1st data point */
  --xpl-chart-theme-fun-2: var(--xpl-chart-teal-normal); /** Fun theme color for the 2nd data point */
  --xpl-chart-theme-fun-3: var(--xpl-chart-green-bold); /** Fun theme color for the 3th data point */
  --xpl-chart-theme-fun-4: var(--xpl-chart-purple-bold); /** Fun theme color for the 4th data point */
  --xpl-chart-theme-fun-5: var(--xpl-chart-purple-light); /** Fun theme color for the 5th data point */
  --xpl-chart-theme-fun-6: var(--xpl-chart-pink-normal); /** Fun theme color for the 6th data point */
  --xpl-chart-theme-fun-7: var(--xpl-chart-orange-normal); /** Fun theme color for the 7th data point */
  --xpl-chart-theme-fun-8: var(--xpl-chart-teal-light); /** Fun theme color for the 8th data point */
  --xpl-chart-theme-twilight-1: var(--xpl-chart-purple-boldest); /** Twilight theme color for the 1st data point */
  --xpl-chart-theme-twilight-2: var(--xpl-chart-purple-bold); /** Twilight theme color for the 2nd data point */
  --xpl-chart-theme-twilight-3: var(--xpl-chart-purple-light); /** Twilight theme color for the 3rd data point */
  --xpl-chart-theme-twilight-4: var(--xpl-chart-pink-light); /** Twilight theme color for the 4th data point */
  --xpl-chart-theme-twilight-5: var(--xpl-chart-pink-normal); /** Twilight theme color for the 5th data point */
  --xpl-chart-theme-twilight-6: var(--xpl-chart-orange-bold); /** Twilight theme color for the 6th data point */
  --xpl-chart-theme-twilight-7: var(--xpl-chart-yellow-light); /** Twilight theme color for the 7th data point */
  --xpl-chart-theme-twilight-8: var(--xpl-chart-green-bold); /** Twilight theme color for the 8th data point */
  --xpl-icon-brand: var(--xpl-color-brand-primary-xplorange); /** Use for brand logos and icons paired with primary brand color. */
  --xpl-icon-badge-default: var(--xpl-background-accent-default);
  --xpl-icon-badge-yellow: var(--xpl-background-accent-highlight);
  --xpl-icon-badge-green: var(--xpl-background-accent-positive-bold);
  --xpl-icon-badge-red: var(--xpl-background-accent-negative);
  --xpl-icon-badge-grey: var(--xpl-icon-subtle);
  --xpl-icon-badge-blue: var(--xpl-background-accent-alternative-bold);
  --xpl-text-disabled: var(--xpl-text-subdued); /** Use on disabled text */
  --xpl-text-badge-default: var(--xpl-text-strong); /** Use for green badge text */
  --xpl-text-badge-yellow: var(--xpl-text-strong); /** Use for red badge text */
  --xpl-text-badge-green: var(--xpl-text-strong); /** Use for gray badge text */
  --xpl-text-badge-red: var(--xpl-text-strong); /** Use for blue badge text */
  --xpl-text-badge-gray: var(--xpl-text-strong); /** Use on link hover states */
  --xpl-text-badge-blue: var(--xpl-text-strong); /** Use on links that have been visited */
  --xpl-color-transparent: var(--xpl-color-transparent-0); /** Backwards-compatible alias. Use --xpl-color-transparent-0 instead. */
}

.dark {
  --xpl-background-surface-default: var(--xpl-color-neutral-1000); /** The default surface for pages and containers */
  --xpl-background-surface-subtlest: var(--xpl-color-neutral-900); /** Use for the subtlest surfaces */
  --xpl-background-surface-subtle: var(--xpl-color-neutral-1200); /** Use for subtle surfaces */
  --xpl-background-surface-bold: var(--xpl-color-neutral-200); /** Use for bold dark surfaces */
  --xpl-background-surface-backdrop: var(--xpl-color-transparent-neutral-75); /** Use on transparent backdrops; eg. behind a modal */
  --xpl-background-surface-inverse-on-light: var(--xpl-color-neutral-1000); /** Use for inverse surfaces on light surfaces where mode switching is not needed */
  --xpl-background-surface-inverse-on-dark: var(--xpl-color-neutral-0); /** Use for inverse surfaces on dark surfaces where mode switching is not needed */
  --xpl-background-surface-information: var(--xpl-color-neutral-700); /** Use for informational surfaces */
  --xpl-background-surface-information-bold: var(--xpl-color-neutral-600); /** Use for informational surfaces where a bold weight is needed */
  --xpl-background-surface-positive: var(--xpl-color-green-300); /** Use for positive sentiment surfaces */
  --xpl-background-surface-negative: var(--xpl-color-red-300); /** Use for negative sentiment surfaces */
  --xpl-background-surface-transparent-0: var(--xpl-color-transparent-0); /** Use for transparent surfaces */
  --xpl-background-surface-transparent-5: var(--xpl-color-transparent-light-5); /** Use for elevation shadows and overlays */
  --xpl-background-surface-transparent-10: var(--xpl-color-transparent-light-10); /** Use for elevation shadows and overlays */
  --xpl-background-surface-transparent-25: var(--xpl-color-transparent-light-25); /** Use for elevation shadows and overlays */
  --xpl-background-surface-transparent-50: var(--xpl-color-transparent-light-50); /** Use for elevation shadows and overlays */
  --xpl-background-surface-transparent-75: var(--xpl-color-transparent-light-75); /** Use for elevation shadows and overlays */
  --xpl-background-action-disabled: var(--xpl-color-neutral-800); /** Use for disabled action states */
  --xpl-background-action-primary-default: var(--xpl-color-purple-300); /** Use for primary action default state */
  --xpl-background-action-primary-hover: var(--xpl-color-purple-400); /** Use for primary action hover state */
  --xpl-background-action-primary-active: var(--xpl-color-purple-400); /** Use for primary action active state */
  --xpl-background-action-primary-focus: var(--xpl-color-purple-300); /** Use for primary action focus state */
  --xpl-background-action-secondary-default: var(--xpl-color-neutral-1000); /** Use for secondary action default state */
  --xpl-background-action-secondary-hover: var(--xpl-color-neutral-1000); /** Use for secondary action hover state */
  --xpl-background-action-secondary-active: var(--xpl-color-neutral-1000); /** Use for secondary action active state */
  --xpl-background-action-secondary-focus: var(--xpl-color-neutral-1000); /** Use for secondary action focus state */
  --xpl-background-action-tertiary-default: var(--xpl-color-transparent-0); /** Use for tertiary action default state */
  --xpl-background-action-tertiary-hover: var(--xpl-color-neutral-800); /** Use for tertiary action hover state */
  --xpl-background-action-tertiary-active: var(--xpl-color-neutral-700); /** Use for tertiary action active state */
  --xpl-background-action-tertiary-focus: var(--xpl-color-neutral-1000); /** Use for tertiary action focus state */
  --xpl-background-action-positive-default: var(--xpl-color-green-300); /** Use for positive actions default state */
  --xpl-background-action-positive-hover: var(--xpl-color-green-400); /** Use for positive actions hover state */
  --xpl-background-action-positive-active: var(--xpl-color-green-400); /** Use for positive actions active state */
  --xpl-background-action-positive-focus: var(--xpl-color-green-300); /** Use for positive actions focused state */
  --xpl-background-action-negative-default: var(--xpl-color-red-300); /** Use for negative actions default state */
  --xpl-background-action-negative-hover: var(--xpl-color-red-400); /** Use for negative actions hover state */
  --xpl-background-action-negative-active: var(--xpl-color-red-400); /** Use for negative actions active state */
  --xpl-background-action-negative-focus: var(--xpl-color-red-300); /** Use for negative actions focused state */
  --xpl-background-accent-default: var(--xpl-color-purple-300); /** Use for default accent backgrounds */
  --xpl-background-accent-pink: var(--xpl-color-pink-300); /** Use for pink accent backgrounds */
  --xpl-background-accent-highlight: var(--xpl-color-yellow-200); /** Use for highlighted accent backgrounds */
  --xpl-background-accent-positive: var(--xpl-color-green-700); /** Use for positive sentiment accents */
  --xpl-background-accent-positive-bold: var(--xpl-color-green-400); /** Use for positive sentiments when a bold weight is needed */
  --xpl-background-accent-negative: var(--xpl-color-red-300); /** Use for negative sentiments */
  --xpl-background-accent-negative-bold: var(--xpl-color-red-600); /** Use for negative sentiments when a bold weight is needed */
  --xpl-background-accent-alternative: var(--xpl-color-blue-200); /** Alternative accent color */
  --xpl-background-accent-alternative-bold: var(--xpl-color-blue-300); /** Alternative accent color in a bold weight */
  --xpl-background-accent-brand: var(--xpl-color-orange-400); /** Use for brand color accents */
  --xpl-background-accent-brand-subtle: var(--xpl-color-orange-500); /** Use for subtle brand accents */
  --xpl-background-accent-neutral: var(--xpl-color-neutral-600); /** Use for neutral accents */
  --xpl-background-accent-neutral-bold: var(--xpl-color-neutral-400); /** Use for neutral accents that need a bolder weight */
  --xpl-background-brand-primary: var(--xpl-color-orange-200); /** Primary brand color. Used for logos and brand accents */
  --xpl-background-brand-primary-surface: var(--xpl-color-orange-900); /** Primary brand surface color */
  --xpl-background-brand-secondary: var(--xpl-color-purple-300); /** Secondary brand color */
  --xpl-background-brand-secondary-surface: var(--xpl-color-purple-900); /** Secondary brand surface color */
  --xpl-border-default: var(--xpl-color-neutral-600); /** Default border color */
  --xpl-border-strong: var(--xpl-color-neutral-400); /** Use for strong weight borders */
  --xpl-border-subtle: var(--xpl-color-neutral-800); /** Use for subtle weight borders */
  --xpl-border-inverse: var(--xpl-color-neutral-1000); /** Use for inverse borders (light on dark/dark on light) */
  --xpl-border-hover: var(--xpl-color-purple-300); /** Use for borders in a hover state */
  --xpl-border-active: var(--xpl-color-purple-300); /** Use for borders in an active state */
  --xpl-border-focus: var(--xpl-color-purple-400); /** Use for borders in a focus state */
  --xpl-border-negative: var(--xpl-color-red-300); /** Use for negative sentiment borders */
  --xpl-border-positive: var(--xpl-color-green-300); /** Use for positive sentiment borders */
  --xpl-border-accent-default: var(--xpl-color-purple-300); /** Default color accented borders */
  --xpl-border-accent-brand: var(--xpl-color-orange-500); /** Brand color accented borders */
  --xpl-border-accent-information: var(--xpl-color-purple-300); /** Informational accented borders */
  --xpl-border-accent-highlight: var(--xpl-color-yellow-200); /** Highlight accented borders */
  --xpl-border-accent-warning: var(--xpl-color-yellow-200); /** Highlight accented borders */
  --xpl-border-accent-subtle: var(--xpl-color-neutral-500); /** Subtle accented borders */
  --xpl-border-accent-alternative: var(--xpl-color-blue-300); /** Alternative accented borders */
  --xpl-border-badge-purple: var(--xpl-color-purple-300); /** Blue badge surface */
  --xpl-border-badge-yellow: var(--xpl-color-yellow-200); /** Yellow badge surface */
  --xpl-border-badge-green: var(--xpl-color-green-300); /** Green badge surface */
  --xpl-border-badge-grey: var(--xpl-color-neutral-500); /** Grey badge surface */
  --xpl-border-badge-blue: var(--xpl-color-blue-300); /** Blue badge surface */
  --xpl-border-badge-red: var(--xpl-color-red-300); /** Red badge surface */
  --xpl-chart-theme-warm-5: var(--xpl-color-orange-500); /** Warm theme color for the 5th data point */
  --xpl-chart-neutral-lighter: var(--xpl-color-neutral-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-light: var(--xpl-color-neutral-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-normal: var(--xpl-color-neutral-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-bold: var(--xpl-color-neutral-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-bolder: var(--xpl-color-neutral-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-neutral-boldest: var(--xpl-color-neutral-50); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-lighter: var(--xpl-color-orange-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-light: var(--xpl-color-orange-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-normal: var(--xpl-color-orange-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-bold: var(--xpl-color-orange-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-bolder: var(--xpl-color-orange-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-orange-boldest: var(--xpl-color-orange-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-lighter: var(--xpl-color-purple-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-light: var(--xpl-color-purple-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-normal: var(--xpl-color-purple-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-bold: var(--xpl-color-purple-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-bolder: var(--xpl-color-purple-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-purple-boldest: var(--xpl-color-purple-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-lighter: var(--xpl-color-green-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-light: var(--xpl-color-green-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-normal: var(--xpl-color-green-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-bold: var(--xpl-color-green-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-bolder: var(--xpl-color-green-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-green-boldest: var(--xpl-color-green-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-lighter: var(--xpl-color-yellow-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-light: var(--xpl-color-yellow-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-normal: var(--xpl-color-yellow-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-bold: var(--xpl-color-yellow-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-bolder: var(--xpl-color-yellow-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-yellow-boldest: var(--xpl-color-yellow-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-lighter: var(--xpl-color-red-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-light: var(--xpl-color-red-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-normal: var(--xpl-color-red-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-bold: var(--xpl-color-red-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-bolder: var(--xpl-color-red-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-red-boldest: var(--xpl-color-red-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-lighter: var(--xpl-color-pink-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-light: var(--xpl-color-pink-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-normal: var(--xpl-color-pink-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-bold: var(--xpl-color-pink-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-bolder: var(--xpl-color-pink-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-pink-boldest: var(--xpl-color-pink-50); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-lighter: var(--xpl-color-blue-800); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-light: var(--xpl-color-blue-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-normal: var(--xpl-color-blue-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-bold: var(--xpl-color-blue-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-bolder: var(--xpl-color-blue-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-blue-boldest: var(--xpl-color-blue-300); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-lighter: var(--xpl-color-teal-700); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-light: var(--xpl-color-teal-600); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-normal: var(--xpl-color-teal-500); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-bold: var(--xpl-color-teal-400); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-bolder: var(--xpl-color-teal-200); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-chart-teal-boldest: var(--xpl-color-teal-100); /** Use for monochromatic charts where color weight is the differentiator */
  --xpl-icon-default: var(--xpl-color-neutral-0); /** Default icon color and when paired with default or strong text */
  --xpl-icon-subtle: var(--xpl-color-neutral-500); /** Use when paired with subtle text colors or inactive actions */
  --xpl-icon-inverse: var(--xpl-color-neutral-1000); /** Inverse color icons (white on dark surfaces, dark on light surfaces) */
  --xpl-icon-inverse-on-light: var(--xpl-color-neutral-1000); /** Dark icons on light backgrounds that do not mode switch */
  --xpl-icon-inverse-on-dark: var(--xpl-color-neutral-0); /** White icons on dark backgrounds that do not mode switch */
  --xpl-icon-disabled: var(--xpl-color-neutral-500); /** Use for icons paired with disabled text or actions */
  --xpl-icon-brand: var(--xpl-color-orange-300); /** Use for brand logos and icons paired with primary brand color */
  --xpl-icon-negative: var(--xpl-color-red-300); /** Use for icons with negative sentiment, or paired with negative text */
  --xpl-icon-warning: var(--xpl-color-yellow-200); /** Highlight accented borders */
  --xpl-icon-positive: var(--xpl-color-green-300); /** Use for icons in a positive sentiment or paired with positive text */
  --xpl-icon-information: var(--xpl-color-purple-300); /** Use for icons communicating information */
  --xpl-text-strong: var(--xpl-color-neutral-0); /** Bold text color, use for display text styles, page headings */
  --xpl-text-default: var(--xpl-color-neutral-50); /** Use for primary text color such as body or titles in sentence case */
  --xpl-text-subdued: var(--xpl-color-neutral-500); /** Use for subdued text such as descriptions and details */
  --xpl-text-inverse: var(--xpl-color-neutral-1000); /** Use on inverse surfaces (light on dark surface, dark on light surface) */
  --xpl-text-inverse-on-light: var(--xpl-color-neutral-1000); /** Use on a light surface that does not mode switch */
  --xpl-text-inverse-on-dark: var(--xpl-color-neutral-0); /** Use on text on a dark surface that does not mode switch */
  --xpl-text-positive: var(--xpl-color-green-300); /** Use on positive sentiment text */
  --xpl-text-negative: var(--xpl-color-red-300); /** Use on negative sentiment text */
  --xpl-text-link-default: var(--xpl-color-purple-300); /** Use for link text */
  --xpl-text-link-hovered: var(--xpl-color-purple-400); /** Use for default badge text */
  --xpl-text-link-visited: var(--xpl-color-pink-300); /** Use for yellow badge text */
  --xpl-background-brand-tertiary: var(--xpl-color-brand-primary-starwhite); /** Brand tertiary color. Used primarily for surfaces */
  --xpl-background-badge-default: var(--xpl-background-surface-transparent-0); /** Default Badge surface */
  --xpl-background-badge-yellow: var(--xpl-background-surface-transparent-0); /** Neutral sentiment Toast surface */
  --xpl-background-badge-green: var(--xpl-background-surface-transparent-0); /** Neutral sentiment Toast surface */
  --xpl-background-badge-red: var(--xpl-background-surface-transparent-0); /** Neutral sentiment Toast surface */
  --xpl-background-badge-grey: var(--xpl-background-surface-transparent-0); /** Positive sentiment toast surface */
  --xpl-background-badge-blue: var(--xpl-background-surface-transparent-0); /** Positive sentiment toast surface */
  --xpl-background-messaging-information: var(--xpl-background-surface-transparent-0); /** Negative sentiment Toast surface */
  --xpl-background-messaging-warning: var(--xpl-background-surface-transparent-0); /** Negative sentiment Toast surface */
  --xpl-background-messaging-warning-bold: var(--xpl-background-surface-transparent-0); /** Yellow Badge surface */
  --xpl-background-messaging-positive: var(--xpl-background-surface-transparent-0); /** Green badge surface */
  --xpl-background-messaging-positive-bold: var(--xpl-background-surface-transparent-0); /** Red Badge surface */
  --xpl-background-messaging-negative: var(--xpl-background-surface-transparent-0); /** Grey Badge surface */
  --xpl-background-messaging-negative-bold: var(--xpl-background-surface-transparent-0); /** Blue badge surface */
  --xpl-chart-theme-vibrant-1: var(--xpl-chart-purple-bolder); /** Vibrant theme color for the 1st data point */
  --xpl-chart-theme-vibrant-2: var(--xpl-chart-orange-normal); /** Vibrant theme color for the 2nd data point */
  --xpl-chart-theme-vibrant-3: var(--xpl-chart-pink-normal); /** Vibrant theme color for the 3rd data point */
  --xpl-chart-theme-vibrant-4: var(--xpl-chart-yellow-light); /** Vibrant theme color for the 4th data point */
  --xpl-chart-theme-vibrant-5: var(--xpl-chart-purple-bold); /** Vibrant theme color for the 5th data point */
  --xpl-chart-theme-vibrant-6: var(--xpl-chart-green-normal); /** Vibrant theme color for the 6th data point */
  --xpl-chart-theme-vibrant-7: var(--xpl-chart-pink-bold); /** Vibrant theme color for the 7th data point */
  --xpl-chart-theme-vibrant-8: var(--xpl-chart-teal-light); /** Vibrant theme color for the 8th data point */
  --xpl-chart-theme-sunset-1: var(--xpl-chart-purple-bolder); /** Sunset theme color for the 1st data point */
  --xpl-chart-theme-sunset-2: var(--xpl-chart-purple-bold); /** Sunset theme color for the 2nd data point */
  --xpl-chart-theme-sunset-3: var(--xpl-chart-orange-bold); /** Sunset theme color for the 3rd data point */
  --xpl-chart-theme-sunset-4: var(--xpl-chart-orange-light); /** Sunset theme color for the 4th data point */
  --xpl-chart-theme-sunset-5: var(--xpl-chart-yellow-light); /** Sunset theme color for the 5th data point */
  --xpl-chart-theme-sunset-6: var(--xpl-chart-green-normal); /** Sunset theme color for the 6th data point */
  --xpl-chart-theme-sunset-7: var(--xpl-chart-blue-normal); /** Sunset theme color for the 7th data point */
  --xpl-chart-theme-sunset-8: var(--xpl-chart-blue-bolder); /** Sunset theme color for the 8th data point */
  --xpl-chart-theme-warm-1: var(--xpl-chart-purple-bolder); /** Warm theme color for the 1st data point */
  --xpl-chart-theme-warm-2: var(--xpl-chart-purple-bold); /** Warm theme color for the 2th data point */
  --xpl-chart-theme-warm-3: var(--xpl-chart-pink-normal); /** Warm theme color for the 3th data point */
  --xpl-chart-theme-warm-4: var(--xpl-chart-pink-light); /** Warm theme color for the 4th data point */
  --xpl-chart-theme-warm-6: var(--xpl-chart-orange-normal); /** Warm theme color for the 6th data point */
  --xpl-chart-theme-warm-7: var(--xpl-chart-yellow-normal); /** Warm theme color for the 7th data point */
  --xpl-chart-theme-warm-8: var(--xpl-chart-yellow-bolder); /** Warm theme color for the 8th data point */
  --xpl-chart-theme-cool-1: var(--xpl-chart-purple-boldest); /** Cool theme color for the 1st data point */
  --xpl-chart-theme-cool-2: var(--xpl-chart-teal-lighter); /** Cool theme color for the 2nd data point */
  --xpl-chart-theme-cool-3: var(--xpl-chart-purple-bold); /** Cool theme color for the 3rd data point */
  --xpl-chart-theme-cool-4: var(--xpl-chart-teal-normal); /** Cool theme color for the 4th data point */
  --xpl-chart-theme-cool-5: var(--xpl-chart-purple-bolder); /** Cool theme color for the 5th data point */
  --xpl-chart-theme-cool-6: var(--xpl-chart-blue-normal); /** Cool theme color for the 6th data point */
  --xpl-chart-theme-cool-7: var(--xpl-chart-purple-light); /** Cool theme color for the 7th data point */
  --xpl-chart-theme-cool-8: var(--xpl-chart-blue-boldest); /** Cool theme color for the 8th data point */
  --xpl-chart-theme-fun-1: var(--xpl-chart-blue-boldest); /** Fun theme color for the 1st data point */
  --xpl-chart-theme-fun-2: var(--xpl-chart-teal-normal); /** Fun theme color for the 2nd data point */
  --xpl-chart-theme-fun-3: var(--xpl-chart-green-bold); /** Fun theme color for the 3th data point */
  --xpl-chart-theme-fun-4: var(--xpl-chart-purple-bold); /** Fun theme color for the 4th data point */
  --xpl-chart-theme-fun-5: var(--xpl-chart-purple-light); /** Fun theme color for the 5th data point */
  --xpl-chart-theme-fun-6: var(--xpl-chart-pink-normal); /** Fun theme color for the 6th data point */
  --xpl-chart-theme-fun-7: var(--xpl-chart-orange-normal); /** Fun theme color for the 7th data point */
  --xpl-chart-theme-fun-8: var(--xpl-chart-teal-light); /** Fun theme color for the 8th data point */
  --xpl-chart-theme-twilight-1: var(--xpl-chart-purple-boldest); /** Twilight theme color for the 1st data point */
  --xpl-chart-theme-twilight-2: var(--xpl-chart-purple-bold); /** Twilight theme color for the 2nd data point */
  --xpl-chart-theme-twilight-3: var(--xpl-chart-purple-light); /** Twilight theme color for the 3rd data point */
  --xpl-chart-theme-twilight-4: var(--xpl-chart-pink-light); /** Twilight theme color for the 4th data point */
  --xpl-chart-theme-twilight-5: var(--xpl-chart-pink-normal); /** Twilight theme color for the 5th data point */
  --xpl-chart-theme-twilight-6: var(--xpl-chart-orange-bold); /** Twilight theme color for the 6th data point */
  --xpl-chart-theme-twilight-7: var(--xpl-chart-yellow-bold); /** Twilight theme color for the 7th data point */
  --xpl-chart-theme-twilight-8: var(--xpl-chart-green-bold); /** Twilight theme color for the 8th data point */
  --xpl-icon-badge-default: var(--xpl-background-accent-default);
  --xpl-icon-badge-yellow: var(--xpl-background-accent-highlight);
  --xpl-icon-badge-green: var(--xpl-background-accent-positive-bold);
  --xpl-icon-badge-red: var(--xpl-background-accent-negative);
  --xpl-icon-badge-grey: var(--xpl-icon-subtle);
  --xpl-icon-badge-blue: var(--xpl-background-accent-alternative-bold);
  --xpl-text-disabled: var(--xpl-text-subdued); /** Use on disabled text */
  --xpl-text-badge-default: var(--xpl-text-strong); /** Use for green badge text */
  --xpl-text-badge-yellow: var(--xpl-text-strong); /** Use for red badge text */
  --xpl-text-badge-green: var(--xpl-text-strong); /** Use for gray badge text */
  --xpl-text-badge-red: var(--xpl-text-strong); /** Use for blue badge text */
  --xpl-text-badge-gray: var(--xpl-text-strong); /** Use on link hover states */
  --xpl-text-badge-blue: var(--xpl-text-strong); /** Use on links that have been visited */
}

/*
 * Bridge file for Apollo Foundation token overrides.
 *
 * Use this file when a component needs a token that is not yet provided by
 * Apollo Foundation, or to remap a Foundation token to a different value for
 * Apollo specifically. Track every bridge in TECH_DEBT.md so it can be
 * removed when Foundation adds the native token.
 *
 * Currently empty — Foundation 1.1.0 provides every token Apollo needs.
 */

.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;animation:none;direction:ltr;border:0;font-size:0.875rem;line-height:1.5rem;border-radius:5px;position:absolute;width:307.875px;box-sizing:border-box;touch-action:manipulation;background:#fff;box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}

.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}

.flatpickr-calendar.open{display:inline-block;z-index:99999}

.flatpickr-calendar.animate.open{animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}

.flatpickr-calendar.inline{display:block;position:relative;top:2px}

.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}

.flatpickr-calendar.static.open{z-index:999;display:block}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){box-shadow:none !important}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}

.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}

.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}

.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}

.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}

.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}

.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}

.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}

.flatpickr-calendar:before{border-width:5px;margin:0 -5px}

.flatpickr-calendar:after{border-width:4px;margin:0 -4px}

.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}

.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}

.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}

.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}

.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}

.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}

.flatpickr-calendar:focus{outline:0}

.flatpickr-wrapper{position:relative;display:inline-block}

.flatpickr-months{display:flex}

.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;flex:1}

.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}

.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}

/*
      /*rtl:begin:ignore*/

/*
      /*rtl:end:ignore*/

.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}

/*
      /*rtl:begin:ignore*/

/*
      /*rtl:end:ignore*/

.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}

.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}

.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}

.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{transition:fill .1s;fill:inherit}

.numInputWrapper{position:relative;height:auto}

.numInputWrapper input,.numInputWrapper span{display:inline-block}

.numInputWrapper input{width:100%}

.numInputWrapper input::-ms-clear{display:none}

.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}

.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);box-sizing:border-box}

.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}

.numInputWrapper span:active{background:rgba(0,0,0,0.2)}

.numInputWrapper span:after{display:block;content:"";position:absolute}

.numInputWrapper span.arrowUp{top:0;border-bottom:0}

.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}

.numInputWrapper span.arrowDown{top:50%}

.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}

.numInputWrapper span svg{width:inherit;height:auto}

.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}

.numInputWrapper:hover{background:rgba(0,0,0,0.05)}

.numInputWrapper:hover span{opacity:1}

.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;transform:translate3d(0,0,0)}

.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}

.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}

.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}

.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}

.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}

.flatpickr-current-month input.cur-year{background:transparent;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}

.flatpickr-current-month input.cur-year:focus{outline:0}

.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}

.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}

.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:flex;align-items:center;height:28px}

.flatpickr-weekdays .flatpickr-weekdaycontainer{display:flex;flex:1}

span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;flex:1;font-weight:bolder}

.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}

.flatpickr-days{position:relative;overflow:hidden;display:flex;align-items:flex-start;width:307.875px}

.flatpickr-days:focus{outline:0}

.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;box-sizing:border-box;display:inline-block;display:flex;flex-wrap:wrap;-ms-flex-wrap:wrap;justify-content:space-around;transform:translate3d(0,0,0);opacity:1}

.dayContainer + .dayContainer{box-shadow:-1px 0 0 #e6e6e6}

.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:2.4375rem;margin:0;display:inline-block;position:relative;justify-content:center;text-align:center}

.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}

.flatpickr-day.today{border-color:#959ea9}

.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}

.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;box-shadow:none;color:#fff;border-color:#569ff7}

.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}

.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){box-shadow:-10px 0 0 #569ff7}

.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}

.flatpickr-day.inRange{border-radius:0;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}

.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}

.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}

.flatpickr-day.week.selected{border-radius:0;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}

.flatpickr-day.hidden{visibility:hidden}

.rangeMode .flatpickr-day{margin-top:1px}

.flatpickr-weekwrapper{float:left}

.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;box-shadow:1px 0 0 #e6e6e6}

.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:1.75rem}

.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}

.flatpickr-innerContainer{display:block;display:flex;box-sizing:border-box;overflow:hidden}

.flatpickr-rContainer{display:inline-block;padding:0;box-sizing:border-box}

.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:2.5rem;max-height:40px;box-sizing:border-box;overflow:hidden;display:flex}

.flatpickr-time:after{content:"";display:table;clear:both}

.flatpickr-time .numInputWrapper{flex:1;width:40%;height:40px;float:left}

.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}

.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}

.flatpickr-time.hasSeconds .numInputWrapper{width:26%}

.flatpickr-time.time24hr .numInputWrapper{width:49%}

.flatpickr-time input{background:transparent;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:0.875rem;position:relative;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}

.flatpickr-time input.flatpickr-hour{font-weight:bold}

.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}

.flatpickr-time input:focus{outline:0;border:0}

.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-self:center}

.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}

.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}

.flatpickr-input[readonly]{cursor:pointer}

@keyframes fpFadeInDown{from{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

/* stylelint-disable no-descending-specificity, color-no-hex, function-disallowed-list */

/*! tailwindcss v2.1.4 | MIT License | https://tailwindcss.com */

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
 * 1. Prevent padding and border from affecting element width.
 *
 *    We used to set this in the html element and inherit from
 *    the parent element for everything else. This caused issues
 *    in shadow-dom-enhanced elements like <details> where the content
 *    is wrapped by a div with box-sizing set to `content-box`.
 *
 *    https://github.com/mozdevs/cssremedy/issues/4
 *
 *
 * 2. Allow adding a border to an element by just adding a border-width.
 *
 *    By default, the way the browser specifies that an element should have no
 *    border is by setting it's border-style to `none` in the user-agent
 *    stylesheet.
 *
 *    In order to easily add borders to elements by just setting the `border-width`
 *    property, we change the default border-style for all elements to `solid`, and
 *    use border-width to hide them instead. This way our `border` utilities only
 *    need to set the `border-width` property instead of the entire `border`
 *    shorthand, making our border utilities much more straightforward to compose.
 *
 *    https://github.com/tailwindcss/tailwindcss/pull/116
 */

[class^="xpl-"],
[class^="xpl-"] *,
[class^="xpl-"]::before,
[class^="xpl-"] *::before,
[class^="xpl-"]::after,
[class^="xpl-"] *::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

/**
Use a more readable tab size (opinionated).
*/

/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/

[class^="xpl-"] {
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/*
Sections
========
*/

/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/

/**
 * Tailwind custom reset styles
 */

/**
 * 1. Use the user's configured `sans` font-family (with Tailwind's default
 *    sans-serif font stack as a fallback) as a sane default.
 * 2. Use Tailwind's default "normal" line-height so the user isn't forced
 *    to override it to ensure consistency even when using the default theme.
 */

[class^="xpl-"],
[class^="xpl-"] * {
  font-family: var(--xpl-font-family-default);
  line-height: 1.5; /* 2 */
}

/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default
*/

[class^="xpl-"] hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Text-level semantics
====================
*/

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

/**
Add the correct font weight in Edge and Safari.
*/

[class^="xpl-"] b,
[class^="xpl-"] strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

/**
 * Use the configured 'mono' font family for elements that
 * are expected to be rendered with a monospace font, falling
 * back to the system monospace stack if there is no configured
 * 'mono' font family.
 */

[class^="xpl-"] pre,
[class^="xpl-"] code,
[class^="xpl-"] kbd,
[class^="xpl-"] samp {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace; /* 1 */

  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

[class^="xpl-"] small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

[class^="xpl-"] sub,
[class^="xpl-"] sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

[class^="xpl-"] sub {
  bottom: -0.25em;
}

[class^="xpl-"] sup {
  top: -0.5em;
}

/*
Tabular data
============
*/

/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

[class^="xpl-"] table,
table[class^="xpl-"] {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

[class^="xpl-"] button,
button[class^="xpl-"],
[class^="xpl-"] input,
input[class^="xpl-"],
[class^="xpl-"] optgroup,
optgroup[class^="xpl-"],
[class^="xpl-"] select,
select[class^="xpl-"] [class^="xpl-"] textarea,
textarea[class^="xpl-"] {
  font-family: var(--xpl-font-family-default); /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/

[class^="xpl-"] button,
button[class^="xpl-"],
[class^="xpl-"] select,
select[class^="xpl-"] {
  /* 1 */
  text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

[class^="xpl-"] button,
button[class^="xpl-"] [class^="xpl-"] [type="button"],
[type="button"][class^="xpl-"] {
  -webkit-appearance: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

[class^="xpl-"] legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

[class^="xpl-"] progress {
  vertical-align: baseline;
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

[class^="xpl-"] summary {
  display: list-item;
}

[class^="xpl-"] button,
button[class^="xpl-"] {
  background-color: transparent;
  background-image: none;
  cursor: pointer;
}

[class^="xpl-"] fieldset {
  margin: 0;
  padding: 0;
}

[class^="xpl-"] ol,
ol[class^="xpl-"],
[class^="xpl-"] ul,
ul[class^="xpl-"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
 * Undo the `border-style: none` reset that Normalize applies to images so that
 * our `border-{width}` utilities have the expected effect.
 *
 * The Normalize reset is unnecessary for us since we default the border-width
 * to 0 on all elements.
 *
 * https://github.com/tailwindcss/tailwindcss/issues/362
 */

[class^="xpl-"] img {
  border-style: solid;
}

[class^="xpl-"] textarea {
  resize: vertical;
}

[class^="xpl-"] input::-moz-placeholder,
input[class^="xpl-"]::-moz-placeholder,
[class^="xpl-"] textarea::-moz-placeholder,
textarea[class^="xpl-"]::-moz-placeholder {
  opacity: 1;
  color: #9ca3af;
}

[class^="xpl-"] input::-moz-placeholder, input[class^="xpl-"]::-moz-placeholder, [class^="xpl-"] textarea::-moz-placeholder, textarea[class^="xpl-"]::-moz-placeholder {
  opacity: 1;
  color: #9ca3af;
}

[class^="xpl-"] input::placeholder,
input[class^="xpl-"]::placeholder,
[class^="xpl-"] textarea::placeholder,
textarea[class^="xpl-"]::placeholder {
  opacity: 1;
  color: #9ca3af;
}

[class^="xpl-"] h1,
[class^="xpl-"] h2,
[class^="xpl-"] h3,
[class^="xpl-"] h4,
[class^="xpl-"] h5,
[class^="xpl-"] h6 {
  font-size: inherit;
  font-weight: inherit;
}

/**
 * Reset form element properties that are easy to forget to
 * style explicitly so you don't inadvertently introduce
 * styles that deviate from your design system. These styles
 * supplement a partial reset that is already applied by
 * normalize.css.
 */

[class^="xpl-"] input,
input[class^="xpl-"],
[class^="xpl-"] optgroup,
optgroup[class^="xpl-"],
[class^="xpl-"] select,
select[class^="xpl-"],
[class^="xpl-"] textarea,
textarea[class^="xpl-"] {
  line-height: inherit;
  color: inherit;
}

/**
 * Make replaced elements `display: block` by default as that's
 * the behavior you want almost all of the time.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */

[class^="xpl-"] img,
[class^="xpl-"] video,
[class^="xpl-"] canvas,
[class^="xpl-"] audio,
[class^="xpl-"] iframe,
[class^="xpl-"] embed,
[class^="xpl-"] object {
  display: block;
}

/**
 * Constrain images and videos to the parent width and preserve
 * their intrinsic aspect ratio.
 *
 * https://github.com/mozdevs/cssremedy/issues/14
 */

[class^="xpl-"] img,
[class^="xpl-"] video {
  max-width: 100%;
  height: auto;
}

* {
  --tw-shadow: 0 0 #0000;
  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
  --tw-ring-offset-width: 0;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 50%);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
}

.xpl-application-shell {
  grid-template: "nav utility utility" min-content "nav subnav content" 1fr / min-content min-content 1fr;
  max-height: 100vh;
  background-color: var(--xpl-color-navigation-lm);
}

.xpl-application-shell__nav {
    grid-area: nav;
    height: 100vh;
  }

/* Only Firefox (as of 66) support animation of Grid tracks, so we need to apply animation to the width of the bar. */

.xpl-application-shell__nav--sm,
    .xpl-application-shell__nav--md,
    .xpl-application-shell__nav--default {
      width: 0;
      transition-property: all;
      transition-timing-function: ease-in-out;
    }

.xpl-application-shell__nav--sm {
      transform: translateX(-74px);
      transition-duration: 0.2s;
    }

.xpl-application-shell__nav--sm--open {
        width: 74px;
        transition-duration: 0.2s;
      }

.xpl-application-shell__nav--md {
      transform: translateX(-112px);
      transition-duration: 0.25s;
    }

.xpl-application-shell__nav--md--open {
        width: 112px;
        transition-duration: 0.25s;
      }

.xpl-application-shell__nav--default {
      transform: translateX(-240px);
      transition-duration: 0.3s;
    }

.xpl-application-shell__nav--default--open {
        transition-duration: 0.3s;
        width: 240px;
      }

.xpl-application-shell__nav {
  position: sticky;
  top: 0px
}

.xpl-application-shell__subnav {
    grid-area: subnav;
    background-color: var(--xpl-color-foreground-lm);
    border-top: 1px solid var(--xpl-color-stroke-lm);
  }

.xpl-application-shell__utility {
    grid-area: utility;
    position: sticky;
    top: 0px;
  }

.xpl-application-shell__content {
    grid-area: content;
    background-color: var(--xpl-color-background-lm);
    border-left: 1px solid var(--xpl-color-stroke-lm);
    border-top: 1px solid var(--xpl-color-stroke-lm);
    overflow-y: auto;
  }

.xpl-application-shell {
  display: grid
}

.dark .xpl-application-shell__subnav {
  background-color: var(--xpl-color-background-2-dm);
  border-left: 1px solid var(--xpl-color-stroke-dm);
  border-top: 1px solid var(--xpl-color-stroke-dm);
}

.dark .xpl-application-shell__content {
  background-color: var(--xpl-color-background-dm);
  border-left: 1px solid var(--xpl-color-stroke-dm);
  border-top: 1px solid var(--xpl-color-stroke-dm);
}

.dark .xpl-application-shell__utility {
  border-left: 1px solid var(--xpl-color-stroke-dm);
}

@media (max-width: 1023px) {
  .xpl-application-shell {
    grid-template: "nav utility" min-content "nav subnav" min-content "nav content" 1fr / min-content 1fr;
    height: 100vh;
  }

    .xpl-application-shell__sidebar--open {
      grid-template-columns: min-content 100vw;
    }

    .xpl-application-shell__subnav {
      border-top: 0;
    }

    .xpl-application-shell {
    overflow: hidden
  }

  .dark .xpl-application-shell__subnav,
  .dark .xpl-application-shell__content,
  .dark .xpl-application-shell__utility {
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .xpl-application-shell {
    grid-template-columns: min-content 100vw;
    height: -webkit-fill-available;
  }

    .xpl-application-shell__nav {
      max-height: -webkit-fill-available;
    }

    .xpl-application-shell__backdrop--open {
      grid-area: utility / subnav / content;
    }
}

/* stylelint-disable no-descending-specificity -- BEM blocks (.xpl-avatar vs .xpl-avatar-group) and nested modifiers; order is grouped by component. */

.xpl-avatar,
  a.xpl-avatar {
    border-radius: var(--xpl-border-radius-full);
    font-family: var(--xpl-font-family-default);
    font-size: var(--xpl-font-size-title-4);
    font-weight: var(--xpl-font-weight-semibold);
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
  }

a.xpl-avatar {
  text-decoration-line: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

a.xpl-avatar:focus-visible,
  .xpl-avatar__with-text-link:focus-visible .xpl-avatar__with-text-avatar {
    outline-color: var(--xpl-border-focus);
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
  }

a.xpl-avatar.xpl-avatar--green:focus-visible,
  .xpl-avatar__with-text-link:focus-visible:has(.xpl-avatar--green) .xpl-avatar__with-text-avatar {
    outline-color: var(--xpl-border-positive);
  }

a.xpl-avatar.xpl-avatar--yellow:focus-visible,
  .xpl-avatar__with-text-link:focus-visible:has(.xpl-avatar--yellow) .xpl-avatar__with-text-avatar {
    outline-color: var(--xpl-border-accent-highlight);
  }

a.xpl-avatar.xpl-avatar--pink:focus-visible,
  .xpl-avatar__with-text-link:focus-visible:has(.xpl-avatar--pink) .xpl-avatar__with-text-avatar {
    /* TECH_DEBT: No --xpl-border-accent-pink token exists in Foundation v1.0.0.
       Request Foundation team to add purpose-specific border token for pink accent. */
    outline-color: var(--xpl-border-accent-default);
  }

a.xpl-avatar.xpl-avatar--primary:focus-visible,
  .xpl-avatar__with-text-link:focus-visible:has(.xpl-avatar--primary) .xpl-avatar__with-text-avatar {
    outline-color: var(--xpl-border-accent-brand);
  }

a.xpl-avatar::after {
    content: "";
    border-radius: var(--xpl-border-radius-full);
    background-color: transparent;
    position: absolute;
    inset: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

.xpl-avatar--with-text .xpl-avatar__with-text-avatar::after {
    content: "";
    border-radius: var(--xpl-border-radius-full);
    background-color: transparent;
    pointer-events: none;
    position: absolute;
    inset: 0px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

a.xpl-avatar:hover::after,
  .xpl-avatar__with-text-link:hover:not(.xpl-avatar--disabled) .xpl-avatar__with-text-avatar::after {
    background-color: var(--xpl-background-surface-transparent-25);
  }

.xpl-avatar--disabled {
  cursor: not-allowed
}

.xpl-avatar img,
  .xpl-avatar__placeholder {
    width: var(--xpl-size-250);
    height: var(--xpl-size-250);
    border-radius: var(--xpl-border-radius-full);
    font-size: var(--xpl-font-size-title-4);
    line-height: 1.5;
    display: block;
  }

.xpl-avatar img {
  -o-object-fit: cover;
     object-fit: cover
}

.xpl-avatar__placeholder {
    background-color: var(--xpl-background-brand-secondary);
    color: var(--xpl-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
  }

.xpl-avatar--green .xpl-avatar__placeholder {
    background-color: var(--xpl-background-accent-positive);
    color: var(--xpl-text-inverse-on-light);
  }

.xpl-avatar--yellow .xpl-avatar__placeholder {
    background-color: var(--xpl-background-accent-highlight);
    color: var(--xpl-text-inverse-on-light);
  }

.xpl-avatar--pink .xpl-avatar__placeholder {
    background-color: var(--xpl-background-accent-pink);
    color: var(--xpl-text-inverse-on-light);
  }

.xpl-avatar--primary .xpl-avatar__placeholder {
    background-color: var(--xpl-background-accent-brand);
  }

.xpl-avatar--secondary .xpl-avatar__placeholder {
    background-color: var(--xpl-background-brand-secondary);
  }

.xpl-avatar--sm img,
  .xpl-avatar--sm .xpl-avatar__placeholder {
    width: var(--xpl-size-150);
    height: var(--xpl-size-150);
    font-size: var(--xpl-font-size-caption);
    line-height: 0.875;
  }

.xpl-avatar--md img,
  .xpl-avatar--md .xpl-avatar__placeholder {
    width: var(--xpl-size-200);
    height: var(--xpl-size-200);
    font-size: var(--xpl-font-size-caption);
    line-height: 0.875;
  }

/* Profile variant: scaled-up sizes */

/* TECH_DEBT: No token matching size for 144px exists in Foundation Request Foundation team to add purpose-specific size token for profile avatars. */

.xpl-avatar--profile img,
  .xpl-avatar--profile .xpl-avatar__placeholder {
    width: 9rem;
    height: 9rem;
    font-size: var(--xpl-font-size-title-1);
    line-height: 2.25;
  }

.xpl-avatar--profile.xpl-avatar--sm img,
  .xpl-avatar--profile.xpl-avatar--sm .xpl-avatar__placeholder {
    width: var(--xpl-size-500);
    height: var(--xpl-size-500);
    font-size: var(--xpl-font-size-title-2);
    line-height: 2;
  }

.xpl-avatar--profile > div .xpl-badge--dot-only {
    bottom: 10%;
    right: 10%;
  }

/* Status badge (xpl-badge dot-only) overrides - targets badge inside avatar */

.xpl-avatar .xpl-badge--dot-only,
  .xpl-avatar--with-text .xpl-avatar__with-text-avatar .xpl-badge--dot-only {
    width: var(--xpl-size-0625);
    height: var(--xpl-size-0625);
    min-width: var(--xpl-size-0625);
    min-height: var(--xpl-size-0625);
    z-index: var(--xpl-z-index-100);
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 0px;
  }

.xpl-avatar--md .xpl-badge--dot-only {
    width: var(--xpl-size-050);
    height: var(--xpl-size-050);
    min-width: var(--xpl-size-050);
    min-height: var(--xpl-size-050);
  }

.xpl-avatar--sm .xpl-badge--dot-only {
    width: var(--xpl-size-0375);
    height: var(--xpl-size-0375);
    min-width: var(--xpl-size-0375);
    min-height: var(--xpl-size-0375);
  }

/* Avatar with text: horizontal layout, name + subText */

.xpl-avatar--with-text {
    gap: var(--xpl-space-12);
    border-radius: var(--xpl-border-radius-default);
    display: inline-flex;
    height: auto;
    width: 100%;
    align-items: center;
  }

.xpl-avatar--with-text .xpl-avatar__with-text-avatar {
    border-radius: var(--xpl-border-radius-full);
    position: relative;
    flex-shrink: 0;
  }

.xpl-avatar--with-text .xpl-avatar__with-text-avatar img,
  .xpl-avatar--with-text .xpl-avatar__with-text-avatar .xpl-avatar__placeholder {
    width: var(--xpl-size-250);
    height: var(--xpl-size-250);
    min-width: var(--xpl-size-250);
    min-height: var(--xpl-size-250);
    font-size: var(--xpl-font-size-title-4);
    line-height: 1.5;
  }

.xpl-avatar__with-text-link {
  text-decoration-line: none;
  outline: 2px solid transparent;
  outline-offset: 2px
}

.xpl-avatar__with-text-content {
    gap: var(--xpl-space-2);
    display: flex;
    min-width: 0px;
    flex-direction: column;
    text-transform: none;
  }

.xpl-avatar__with-text-name {
    color: var(--xpl-text-strong);
    font-size: var(--xpl-font-size-title-5);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

.xpl-avatar__with-text-sub {
    color: var(--xpl-text-subdued);
    font-size: var(--xpl-font-size-body);
    font-weight: var(--xpl-font-weight-normal);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

/* Tighter overlap: default -12px, sm -8px, md -10px so avatars stack more on top of each other */

.xpl-avatar-group__wrap {
  position: relative;

    margin-left: calc(-1 * var(--xpl-space-12));
    z-index: var(--xpl-z-index-100)
}

.xpl-avatar-group__wrap:nth-child(1) {
    z-index: var(--xpl-z-index-100);
  }

.xpl-avatar-group__wrap:nth-child(2) {
    z-index: var(--xpl-z-index-200);
  }

.xpl-avatar-group__wrap:nth-child(3) {
    z-index: var(--xpl-z-index-300);
  }

.xpl-avatar-group__wrap:nth-child(4) {
    z-index: var(--xpl-z-index-400);
  }

.xpl-avatar-group__wrap:first-child {
    margin-left: 0;
  }

.xpl-avatar-group__item {
  display: inline-flex;
  flex-shrink: 0
}

.xpl-avatar-group__item img,
    .xpl-avatar-group__item .xpl-avatar__placeholder {
      box-shadow: 0 0 0 var(--xpl-border-large) var(--xpl-background-surface-default);
    }

/* Count pill: higher z-index so it sits on top of the last avatar */

.xpl-avatar-group__count {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

    z-index: var(--xpl-z-index-500);
    min-width: var(--xpl-size-250);
    height: var(--xpl-size-250);
    margin-left: calc(-1 * var(--xpl-space-12));
    border-radius: var(--xpl-border-radius-full);
    background-color: var(--xpl-background-surface-subtle);
    color: var(--xpl-text-subdued);
    font-family: var(--xpl-font-family-default);
    font-size: var(--xpl-font-size-title-5);
    font-weight: var(--xpl-font-weight-semibold);
    line-height: 1.25;
    box-shadow: 0 0 0 var(--xpl-border-large) var(--xpl-background-surface-default)
}

.xpl-avatar-group__count--sm {
    min-width: var(--xpl-size-150);
    height: var(--xpl-size-150);
    margin-left: calc(-1 * var(--xpl-space-8));
    font-size: var(--xpl-font-size-caption);
  }

.xpl-avatar-group__count--md {
    min-width: var(--xpl-size-200);
    height: var(--xpl-size-200);
    margin-left: calc(-1 * var(--xpl-space-10));
    font-size: var(--xpl-font-size-caption);
  }

.xpl-avatar-group--sm .xpl-avatar-group__wrap {
    margin-left: calc(-1 * var(--xpl-space-8));
  }

.xpl-avatar-group--sm .xpl-avatar-group__wrap:first-child {
    margin-left: 0;
  }

.xpl-avatar-group--sm img,
  .xpl-avatar-group--sm .xpl-avatar__placeholder {
    width: var(--xpl-size-150);
    height: var(--xpl-size-150);
    min-width: var(--xpl-size-150);
    min-height: var(--xpl-size-150);
  }

.xpl-avatar-group--md .xpl-avatar-group__wrap {
    margin-left: calc(-1 * var(--xpl-space-10));
  }

.xpl-avatar-group--md .xpl-avatar-group__wrap:first-child {
    margin-left: 0;
  }

.xpl-avatar-group--md img,
  .xpl-avatar-group--md .xpl-avatar__placeholder {
    width: var(--xpl-size-200);
    height: var(--xpl-size-200);
    min-width: var(--xpl-size-200);
    min-height: var(--xpl-size-200);
  }

.xpl-avatar-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--xpl-space-0);
  overflow: visible
}

/*
 * TECH_DEBT: Remove this block once xpl-list is updated by removing the legacy flat markup for avatars.
 * Legacy flat markup (e.g. xpl-list): direct <img> children only — no __wrap / __item.
 * Scoped so Stencil group output (with __wrap) is unchanged.
 */

.xpl-avatar-group:not(:has(.xpl-avatar-group__wrap)) {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;

  gap: var(--xpl-space-0)
}

.xpl-avatar-group:not(:has(.xpl-avatar-group__wrap)) > img {
  box-shadow: 0 0 0 var(--xpl-border-large) var(--xpl-background-surface-default);
  display: inline-block;
  flex-shrink: 0;
  border-radius: 9999px;
  -o-object-fit: cover;
     object-fit: cover;

  width: var(--xpl-size-200);
  height: var(--xpl-size-200);
  min-width: var(--xpl-size-200);
  min-height: var(--xpl-size-200);
}

.xpl-avatar-group--s:not(:has(.xpl-avatar-group__wrap)) > img {
  width: var(--xpl-size-150);
  height: var(--xpl-size-150);
  min-width: var(--xpl-size-150);
  min-height: var(--xpl-size-150);
}

.xpl-avatar-group--l:not(:has(.xpl-avatar-group__wrap)) > img {
  width: var(--xpl-size-250);
  height: var(--xpl-size-250);
  min-width: var(--xpl-size-250);
  min-height: var(--xpl-size-250);
}

.xpl-avatar-group:not(:has(.xpl-avatar-group__wrap)) > img:not(:first-child) {
  margin-left: calc(-1 * var(--xpl-space-8));
}

.xpl-avatar-group--s:not(:has(.xpl-avatar-group__wrap)) > img:not(:first-child) {
  margin-left: calc(-1 * var(--xpl-space-4));
}

.xpl-backdrop {
  background-color: var(--xpl-color-gray-1000);
  opacity: 0.5;
}

.xpl-backdrop--fixed {
  position: fixed;
  inset: 0px
}

.xpl-backdrop--relative {
  position: relative
}

.xpl-backdrop {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}

.dark .xpl-backdrop {
  background-color: var(--xpl-color-gray-1200);
  opacity: 0.6;
}

xpl-badge {
  display: inline-flex;
  max-width: 100%;
  vertical-align: middle
}

.xpl-badge,
  button.xpl-badge {
    background-color: var(--xpl-background-badge-default);
    border-color: var(--xpl-border-badge-purple);
    border-style: solid;
    border-width: var(--xpl-border-small);
    color: var(--xpl-text-badge-default);
    font-family: var(--xpl-font-family-default);
    gap: var(--xpl-space-4);
    height: var(--xpl-size-150);
    padding: var(--xpl-space-2) var(--xpl-space-12);
    display: inline-flex;
    min-width: 0px;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }

/*
   * Typography is set per size modifier rather than on the shared base block.
   * The default size's .xpl-text-title-5 includes a [class^="xpl-"] & descendant
   * variant (specificity 0,2,0); keeping each size's type on its own mutually
   * exclusive modifier prevents that variant from overriding the small size when
   * a badge is nested inside another xpl- element. The dot-only (number) badge
   * also receives a size class but must keep its own 8px type, so it is excluded
   * from the default-size rule.
   */

/* Figma source of truth: default badge uses Title/5 (title-5 / medium / 1.4286) */

.xpl-badge--size-default:not(.xpl-badge--dot-only) {
    font-size: var(--xpl-font-size-title-5);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.4286;
  }

.xpl-badge--size-small {
    height: var(--xpl-size-125);
    padding: var(--xpl-space-2) var(--xpl-space-8);
  }

/* Figma source of truth: small badge uses Callout/Bold (callout / semibold / 1.3333) */

.xpl-badge--size-small:not(.xpl-badge--dot-only) {
  font-size: var(--xpl-font-size-callout);
  font-weight: var(--xpl-font-weight-semibold);
  line-height: 1.3333;
  }

.xpl-badge--shape-rounded {
    border-radius: var(--xpl-border-radius-full);
  }

.xpl-badge--shape-boxy {
    border-radius: var(--xpl-border-radius-small);
  }

.xpl-badge--dot-only {
    background-color: var(--xpl-icon-badge-default);
    border-color: var(--xpl-color-transparent-0);
    border-radius: var(--xpl-border-radius-full);
    color: var(--xpl-text-inverse);
    font-weight: var(--xpl-font-weight-bold);
    padding: var(--xpl-space-2) var(--xpl-space-4);

    /*
     * Figma source of truth: the number badge text is 8px bold with an 8px
     * line-height. Foundation has no 8px font-size token (caption is the
     * smallest at 10px) and no typography class for this level, so both are
     * literals — see TECH_DEBT.md.
     */
    font-size: 0.5rem;
    line-height: 0.5rem;

    /*
     * TODO: no 14px Foundation size token. The Figma spec requires a 14px
     * height/min-width for the dot-only (number) badge, but the size scale only
     * provides --xpl-size-075 (12px) and --xpl-size-100 (16px). The previous
     * --xpl-size-0875 (14px) token is deprecated. Using a literal until a
     * matching Foundation token exists — see TECH_DEBT.md.
     */
    height: 0.875rem;
    min-width: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }

.xpl-badge--dot-only-bordered {
    box-shadow: 0 0 0 var(--xpl-space-2) var(--xpl-border-inverse);
  }

.xpl-badge--dot::before {
    background-color: var(--xpl-icon-badge-default);
    border-radius: var(--xpl-border-radius-full);
    content: "";
    height: var(--xpl-size-050);
    width: var(--xpl-size-050);
    display: inline-block;
    flex-shrink: 0;
  }

.xpl-badge--green {
    background-color: var(--xpl-background-badge-green);
    border-color: var(--xpl-border-badge-green);
    color: var(--xpl-text-badge-green);
  }

.xpl-badge--green.xpl-badge--dot-only {
      color: var(--xpl-text-inverse);
      background-color: var(--xpl-icon-badge-green);
    }

.xpl-badge--green::before {
      background-color: var(--xpl-icon-badge-green);
    }

.xpl-badge--yellow {
    background-color: var(--xpl-background-badge-yellow);
    border-color: var(--xpl-border-badge-yellow);
    color: var(--xpl-text-badge-yellow);
  }

.xpl-badge--yellow.xpl-badge--dot-only {
      /* semantic tokens were inversing colours so used colour value instead */
      color: var(--xpl-color-neutral-1100);
      background-color: var(--xpl-icon-badge-yellow);
    }

.xpl-badge--yellow::before {
      background-color: var(--xpl-icon-badge-yellow);
    }

/* Foundation uses "grey" for bg/border/icon and "gray" for text token */

.xpl-badge--gray {
    background-color: var(--xpl-background-badge-grey);
    border-color: var(--xpl-border-badge-grey);
    color: var(--xpl-text-badge-gray);
  }

.xpl-badge--gray.xpl-badge--dot-only {
      /* semantic tokens were inversing colors so used color value instead */
      color: var(--xpl-color-neutral-1100);
      background-color: var(--xpl-icon-badge-grey);
    }

.xpl-badge--gray::before {
      background-color: var(--xpl-icon-badge-grey);
    }

/*
   * TECH DEBT: Orange badge tokens missing from Foundation
   *
   * The following purpose-specific badge-orange tokens need to be added to Apollo Foundation
   * for light mode, dark mode, and FieldEdge theming support:
   *
   * --xpl-background-badge-orange
   * --xpl-border-badge-orange
   * --xpl-text-badge-orange
   * --xpl-icon-badge-orange
   *
   * Current workarounds using primitive/semantic tokens:
   * - Light mode: orange-100 background, transparent border, strong text
   * - Dark mode: transparent background, orange-300 border, strong text
   * - Dot-only: uses accent-brand background as icon color fallback
   *
   * See TECH_DEBT.md "Missing badge-orange tokens in Foundation" section for tracking.
   */

.xpl-badge--orange {
    background-color: var(--xpl-color-orange-100);
    border-color: var(--xpl-color-transparent-0);
    color: var(--xpl-text-strong);
  }

.xpl-badge--orange.xpl-badge--dot-only {
      /* semantic tokens were inversing colors so used color value instead */
      color: var(--xpl-color-neutral-1100);
      background-color: var(--xpl-background-accent-brand);
    }

.xpl-badge--orange::before {
      background-color: var(--xpl-background-accent-brand);
    }

.dark .xpl-badge--orange:not(.xpl-badge--dot-only) {
      background-color: var(--xpl-background-surface-transparent-0);
      border-color: var(--xpl-color-orange-300);
    }

.xpl-badge--blue {
    background-color: var(--xpl-background-badge-blue);
    border-color: var(--xpl-border-badge-blue);
    color: var(--xpl-text-badge-blue);
  }

.xpl-badge--blue.xpl-badge--dot-only {
      color: var(--xpl-text-inverse);
      background-color: var(--xpl-icon-badge-blue);
    }

.xpl-badge--blue::before {
      background-color: var(--xpl-icon-badge-blue);
    }

.xpl-badge--red {
    background-color: var(--xpl-background-badge-red);
    border-color: var(--xpl-border-badge-red);
    color: var(--xpl-text-badge-red);
  }

.xpl-badge--red.xpl-badge--dot-only {
      color: var(--xpl-text-inverse);
      background-color: var(--xpl-icon-badge-red);
    }

.xpl-badge--red::before {
      background-color: var(--xpl-icon-badge-red);
    }

.xpl-badge__label {
  min-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.xpl-banner {
  --xpl-banner-border-color: var(--xpl-border-accent-information);

  background: var(--xpl-background-messaging-information);
  border-bottom-width: var(--xpl-border-small);
  border-color: var(--xpl-banner-border-color);
  border-top-width: var(--xpl-border-small);
  gap: var(--xpl-space-8);
  padding: var(--xpl-space-8) var(--xpl-space-32);
  display: flex;
  min-height: var(--xpl-size-300);
  width: 100%;
  align-items: center;
}

.xpl-banner__icon {
    color: var(--xpl-icon-default);
    display: inline-flex;
    flex-shrink: 0;
  }

.xpl-banner__body {
    color: var(--xpl-text-default);
    gap: var(--xpl-space-8);
    display: flex;
    min-width: 0px;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
  }

.xpl-banner__heading,
  .xpl-banner__description {
  margin: 0px
}

.xpl-banner__heading {
    color: var(--xpl-text-strong, var(--xpl-text-default));
  }

.xpl-banner__heading {
    font-size: var(--xpl-font-size-title-5);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.4286;
  }

.xpl-banner__heading {

    font-size: var(--xpl-font-size-title-5);
  }

.xpl-banner__description {
    color: var(--xpl-text-default);
  }

.xpl-banner__description {
  font-size: var(--xpl-font-size-body);
  font-weight: var(--xpl-font-weight-normal);
  line-height: 1.4286;
  }

.xpl-banner__description {

    min-width: 0px;

    flex: 1 1 auto;

    overflow-wrap: anywhere;
  }

.xpl-banner__actions {
    gap: var(--xpl-space-8);
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
  }

.xpl-banner__actions > xpl-button {
  display: inline-flex
}

.xpl-banner__dismiss {
    background: var(--xpl-background-surface-transparent-0);
    color: var(--xpl-icon-default);
    padding-left: var(--xpl-space-16);
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
    padding-right: 0px;
  }

.xpl-banner__dismiss:focus-visible {
      border-radius: var(--xpl-border-radius-small);
      outline-color: var(--xpl-border-accent-information);
      outline-width: 2px;
      outline-offset: 2px;
    }

.xpl-banner--truncate-desc .xpl-banner__body {
  flex-wrap: wrap;
  overflow: hidden
}

.xpl-banner--truncate-desc .xpl-banner__description {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1
}

.xpl-banner--section {
    border-color: var(--xpl-banner-border-color);
    border-radius: var(--xpl-border-radius-small);
    border-style: solid;
    border-width: var(--xpl-border-small);
    gap: var(--xpl-space-8);
    padding: var(--xpl-space-16);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

/* Transparent to layout so heading/description become direct grid participants */

.xpl-banner--section .xpl-banner__body {
  display: contents
}

.xpl-banner--section .xpl-banner__icon {
  grid-column-start: 1;
  grid-row-start: 1
}

.xpl-banner--section .xpl-banner__heading {
  grid-column-start: 2;
  grid-row-start: 1;
  flex: unset
}

.xpl-banner--section .xpl-banner__dismiss {
  grid-column-start: 3;
  grid-row-start: 1;
  margin-left: 0px;
  padding: 0px
}

.xpl-banner--section .xpl-banner__description {
      color: var(--xpl-text-default);
      font-size: var(--xpl-font-size-callout);
      grid-column-start: 2;
      grid-row-start: 2;
      margin: 0px;
      overflow-wrap: anywhere;
    }

.xpl-banner--section .xpl-banner__actions {
      margin-left: calc(-1 * var(--xpl-space-10));
      padding-top: var(--xpl-space-8);
      grid-column-start: 2;
      grid-row-start: 3;
      justify-content: flex-start;
    }

.xpl-banner--section.xpl-banner--truncate-desc .xpl-banner__description {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}

/* No-icon: content spans the icon column so it starts flush left */

.xpl-banner--section.xpl-banner--no-icon .xpl-banner__heading,
    .xpl-banner--section.xpl-banner--no-icon .xpl-banner__description,
    .xpl-banner--section.xpl-banner--no-icon .xpl-banner__actions {
  grid-column-start: 1;
  grid-column-end: 3
}

.xpl-banner--error {
    --xpl-banner-border-color: var(--xpl-border-negative);

    background: var(--xpl-background-messaging-negative-bold);
  }

.xpl-banner--error .xpl-banner__icon,
    .xpl-banner--error .xpl-banner__heading,
    .xpl-banner--error .xpl-banner__description,
    .xpl-banner--error .xpl-banner__body,
    .xpl-banner--error .xpl-banner__dismiss {
      color: var(--xpl-text-inverse-on-dark);
    }

.xpl-banner--error .xpl-banner__dismiss:focus-visible {
      outline-color: var(--xpl-text-inverse-on-dark);
    }

.xpl-banner--warning {
    --xpl-banner-border-color: var(--xpl-border-accent-warning);

    background: var(--xpl-background-messaging-warning);
  }

.xpl-banner--warning .xpl-banner__icon {
      color: var(--xpl-icon-default);
    }

.xpl-banner--warning .xpl-banner__dismiss:focus-visible {
      outline-color: var(--xpl-border-accent-warning);
    }

.xpl-banner--positive {
    --xpl-banner-border-color: var(--xpl-border-positive);

    background: var(--xpl-background-messaging-positive);
  }

.xpl-banner--positive .xpl-banner__dismiss:focus-visible {
      outline-color: var(--xpl-border-positive);
    }

.xpl-banner--section.xpl-banner--error {
    background: var(--xpl-background-messaging-negative);
  }

.xpl-banner--section.xpl-banner--error .xpl-banner__icon,
    .xpl-banner--section.xpl-banner--error .xpl-banner__heading,
    .xpl-banner--section.xpl-banner--error .xpl-banner__description,
    .xpl-banner--section.xpl-banner--error .xpl-banner__dismiss,
    .xpl-banner--section.xpl-banner--error .xpl-banner__body {
      color: var(--xpl-text-default);
    }

.xpl-banner--section.xpl-banner--error .xpl-banner__dismiss:focus-visible {
      outline-color: var(--xpl-border-negative);
    }

/* stylelint-disable no-descending-specificity */

.xpl-button {
  display: inline-flex;
  height: var(--xpl-size-250);
}

button.xpl-button,
  a.xpl-button,
  .xpl-button button,
  .xpl-button a {
    align-items: center;
    align-content: center;
    background-color: var(--xpl-background-action-primary-default);
    border-radius: var(--xpl-border-radius-button);
    color: var(--xpl-text-inverse);
    font-family: var(--xpl-font-family-default);
    font-size: var(--xpl-font-size-title-5);
    font-weight: var(--xpl-font-weight-medium);
    display: inline-grid;
    gap: var(--xpl-space-6);
    grid-auto-flow: column;
    height: var(--xpl-size-250);
    justify-content: center;
    justify-items: center;
    padding: var(--xpl-space-12) var(--xpl-space-16);
    text-decoration: none;
    white-space: nowrap;
  }

button.xpl-button .xpl-button__icon, a.xpl-button .xpl-button__icon, .xpl-button button .xpl-button__icon, .xpl-button a .xpl-button__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
    }

button.xpl-button .xpl-button__icon svg,
    button.xpl-button button > svg,
    a.xpl-button .xpl-button__icon svg,
    a.xpl-button button > svg,
    .xpl-button button .xpl-button__icon svg,
    .xpl-button button button > svg,
    .xpl-button a .xpl-button__icon svg,
    .xpl-button a button > svg {
      width: var(--xpl-size-125);
      height: var(--xpl-size-125);
    }

button.xpl-button svg, a.xpl-button svg, .xpl-button button svg, .xpl-button a svg {
      width: var(--xpl-size-125);
      height: var(--xpl-size-125);
    }

button.xpl-button:hover, a.xpl-button:hover, .xpl-button button:hover, .xpl-button a:hover {
      background-color: var(--xpl-background-action-primary-hover);
    }

button.xpl-button:active, a.xpl-button:active, .xpl-button button:active, .xpl-button a:active {
      background-color: var(--xpl-background-action-primary-active);
      outline-color: var(--xpl-border-active);
      outline-width: 2px;
      outline-offset: var(--xpl-border-large);
    }

button.xpl-button:focus-visible, a.xpl-button:focus-visible, .xpl-button button:focus-visible, .xpl-button a:focus-visible {
      background-color: var(--xpl-background-action-primary-focus);
      outline-color: var(--xpl-border-focus);
      outline-width: 2px;
      outline-offset: var(--xpl-border-large);
    }

button.xpl-button:disabled,
    button.xpl-button:disabled:hover,
    button.xpl-button:disabled:focus-visible,
    button.xpl-button:disabled:active,
    a.xpl-button:disabled,
    a.xpl-button:disabled:hover,
    a.xpl-button:disabled:focus-visible,
    a.xpl-button:disabled:active,
    .xpl-button button:disabled,
    .xpl-button button:disabled:hover,
    .xpl-button button:disabled:focus-visible,
    .xpl-button button:disabled:active,
    .xpl-button a:disabled,
    .xpl-button a:disabled:hover,
    .xpl-button a:disabled:focus-visible,
    .xpl-button a:disabled:active {
      background-color: var(--xpl-background-action-disabled);
      border-color: var(--xpl-background-action-disabled);
      color: var(--xpl-text-disabled);
      box-shadow: none;
      cursor: not-allowed;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-colored: 0 0 #0000;
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      outline: 2px solid transparent;
      outline-offset: 2px;
    }

button.xpl-button,
  a.xpl-button,
  .xpl-button button,
  .xpl-button a {
  cursor: pointer;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}

button.xpl-button--sm,
    a.xpl-button--sm,
    .xpl-button--sm button,
    .xpl-button--sm a,
    button.xpl-button--xs,
    a.xpl-button--xs,
    .xpl-button--xs button,
    .xpl-button--xs a {
      font-size: var(--xpl-font-size-callout);
      font-weight: var(--xpl-font-weight-semibold);
      line-height: 1.3333;
      font-family: var(--xpl-font-family-default);
    }

.xpl-button--sm {
    height: var(--xpl-size-200);
  }

button.xpl-button--sm,
    a.xpl-button--sm,
    .xpl-button--sm button,
    .xpl-button--sm a {
      height: var(--xpl-size-200);
      min-width: var(--xpl-size-200);
      padding: var(--xpl-space-8) var(--xpl-space-12);
    }

button.xpl-button--sm .xpl-button__icon svg, a.xpl-button--sm .xpl-button__icon svg, .xpl-button--sm button .xpl-button__icon svg, .xpl-button--sm a .xpl-button__icon svg {
        width: var(--xpl-size-100);
        height: var(--xpl-size-100);
      }

button.xpl-button--sm svg, a.xpl-button--sm svg, .xpl-button--sm button svg, .xpl-button--sm a svg {
        width: var(--xpl-size-100);
        height: var(--xpl-size-100);
      }

.xpl-button--xs {
    height: var(--xpl-size-150);
  }

button.xpl-button--xs,
    a.xpl-button--xs,
    .xpl-button--xs button,
    .xpl-button--xs a {
      height: var(--xpl-size-150);
      min-width: var(--xpl-size-150);
      padding: var(--xpl-space-4) var(--xpl-space-10);
    }

button.xpl-button--xs .xpl-button__icon svg, a.xpl-button--xs .xpl-button__icon svg, .xpl-button--xs button .xpl-button__icon svg, .xpl-button--xs a .xpl-button__icon svg {
        width: var(--xpl-size-075);
        height: var(--xpl-size-075);
      }

button.xpl-button--xs svg, a.xpl-button--xs svg, .xpl-button--xs button svg, .xpl-button--xs a svg {
        width: var(--xpl-size-075);
        height: var(--xpl-size-075);
      }

button.xpl-button--icon-only,
    a.xpl-button--icon-only,
    .xpl-button--icon-only button,
    .xpl-button--icon-only a {
      display: flex;
      justify-content: center;
      padding: 0;
      width: var(--xpl-size-250);
    }

button.xpl-button--icon-only .xpl-button__icon svg, a.xpl-button--icon-only .xpl-button__icon svg, .xpl-button--icon-only button .xpl-button__icon svg, .xpl-button--icon-only a .xpl-button__icon svg {
        height: var(--xpl-size-125);
        width: var(--xpl-size-125);
      }

button.xpl-button--icon-only svg, a.xpl-button--icon-only svg, .xpl-button--icon-only button svg, .xpl-button--icon-only a svg {
        height: var(--xpl-size-125);
        width: var(--xpl-size-125);
      }

button.xpl-button--icon-only.xpl-button--sm,
      a.xpl-button--icon-only.xpl-button--sm,
      .xpl-button--icon-only.xpl-button--sm a,
      .xpl-button--icon-only.xpl-button--sm span,
      .xpl-button--icon-only.xpl-button--sm button {
        height: var(--xpl-size-200);
        width: var(--xpl-size-200);
      }

button.xpl-button--icon-only.xpl-button--sm svg, a.xpl-button--icon-only.xpl-button--sm svg, .xpl-button--icon-only.xpl-button--sm a svg, .xpl-button--icon-only.xpl-button--sm span svg, .xpl-button--icon-only.xpl-button--sm button svg {
          height: var(--xpl-size-100);
          width: var(--xpl-size-100);
        }

button.xpl-button--icon-only.xpl-button--xs,
      a.xpl-button--icon-only.xpl-button--xs,
      .xpl-button--icon-only.xpl-button--xs a,
      .xpl-button--icon-only.xpl-button--xs button {
        height: var(--xpl-size-150);
        width: var(--xpl-size-150);
      }

button.xpl-button--icon-only.xpl-button--xs svg, a.xpl-button--icon-only.xpl-button--xs svg, .xpl-button--icon-only.xpl-button--xs a svg, .xpl-button--icon-only.xpl-button--xs button svg {
          height: var(--xpl-size-075);
          width: var(--xpl-size-075);
        }

a.xpl-button--secondary,
    button.xpl-button--secondary,
    .xpl-button--secondary a,
    .xpl-button--secondary button {
      box-sizing: border-box;
      border: var(--xpl-border-small) solid;
      background-color: var(--xpl-background-action-secondary-default);
      border-color: var(--xpl-border-strong);
      color: var(--xpl-text-default);
    }

a.xpl-button--secondary:hover, button.xpl-button--secondary:hover, .xpl-button--secondary a:hover, .xpl-button--secondary button:hover {
        border-color: var(--xpl-border-hover);
        background-color: var(--xpl-background-action-secondary-hover);
      }

a.xpl-button--secondary:active, button.xpl-button--secondary:active, .xpl-button--secondary a:active, .xpl-button--secondary button:active {
        border-color: var(--xpl-border-active);
        background-color: var(--xpl-background-action-secondary-active);
        outline-color: var(--xpl-border-active);
        outline-width: 2px;
        outline-offset: calc(var(--xpl-border-small) + var(--xpl-border-large));
      }

a.xpl-button--secondary:focus-visible, button.xpl-button--secondary:focus-visible, .xpl-button--secondary a:focus-visible, .xpl-button--secondary button:focus-visible {
        background-color: var(--xpl-background-action-secondary-focus);
        outline-color: var(--xpl-border-focus);
        border-color: var(--xpl-border-strong);
        outline-width: 2px;
        outline-offset: calc(var(--xpl-border-small) + var(--xpl-border-large));
      }

a.xpl-button--tertiary,
    button.xpl-button--tertiary,
    .xpl-button--tertiary a,
    .xpl-button--tertiary button,
    a.xpl-button--subtle,
    button.xpl-button--subtle,
    .xpl-button--subtle a,
    .xpl-button--subtle button {
      background-color: var(--xpl-background-action-tertiary-default);
      color: var(--xpl-text-default);
    }

a.xpl-button--tertiary:hover, button.xpl-button--tertiary:hover, .xpl-button--tertiary a:hover, .xpl-button--tertiary button:hover, a.xpl-button--subtle:hover, button.xpl-button--subtle:hover, .xpl-button--subtle a:hover, .xpl-button--subtle button:hover {
        background-color: var(--xpl-background-action-tertiary-hover);
      }

a.xpl-button--tertiary:active, button.xpl-button--tertiary:active, .xpl-button--tertiary a:active, .xpl-button--tertiary button:active, a.xpl-button--subtle:active, button.xpl-button--subtle:active, .xpl-button--subtle a:active, .xpl-button--subtle button:active {
        background-color: var(--xpl-background-action-tertiary-active);
        outline-color: var(--xpl-border-subtle);
        outline-width: 2px;
        outline-offset: var(--xpl-border-large);
      }

a.xpl-button--tertiary:focus-visible, button.xpl-button--tertiary:focus-visible, .xpl-button--tertiary a:focus-visible, .xpl-button--tertiary button:focus-visible, a.xpl-button--subtle:focus-visible, button.xpl-button--subtle:focus-visible, .xpl-button--subtle a:focus-visible, .xpl-button--subtle button:focus-visible {
        outline-color: var(--xpl-border-subtle);
        border-color: var(--xpl-border-subtle);
        background-color: var(--xpl-background-action-tertiary-focus);
        outline-width: 2px;
        outline-offset: var(--xpl-border-large);
      }

a.xpl-button--positive,
    button.xpl-button--positive,
    .xpl-button--positive a,
    .xpl-button--positive button,
    a.xpl-button--success,
    button.xpl-button--success,
    .xpl-button--success a,
    .xpl-button--success button {
      background-color: var(--xpl-background-action-positive-default);
      color: var(--xpl-text-inverse);
    }

a.xpl-button--positive:hover, button.xpl-button--positive:hover, .xpl-button--positive a:hover, .xpl-button--positive button:hover, a.xpl-button--success:hover, button.xpl-button--success:hover, .xpl-button--success a:hover, .xpl-button--success button:hover {
        background-color: var(--xpl-background-action-positive-hover);
      }

a.xpl-button--positive:active, button.xpl-button--positive:active, .xpl-button--positive a:active, .xpl-button--positive button:active, a.xpl-button--success:active, button.xpl-button--success:active, .xpl-button--success a:active, .xpl-button--success button:active {
        background-color: var(--xpl-background-action-positive-active);
        outline-color: var(--xpl-border-positive);
        outline-width: 2px;
        outline-offset: var(--xpl-border-large);
      }

a.xpl-button--positive:focus-visible, button.xpl-button--positive:focus-visible, .xpl-button--positive a:focus-visible, .xpl-button--positive button:focus-visible, a.xpl-button--success:focus-visible, button.xpl-button--success:focus-visible, .xpl-button--success a:focus-visible, .xpl-button--success button:focus-visible {
        outline-color: var(--xpl-border-positive);
        background-color: var(--xpl-background-action-positive-focus);
        outline-width: 2px;
        outline-offset: var(--xpl-border-large);
      }

a.xpl-button--positive.xpl-button--secondary,
      button.xpl-button--positive.xpl-button--secondary,
      .xpl-button--positive.xpl-button--secondary a,
      .xpl-button--positive.xpl-button--secondary button,
      a.xpl-button--success.xpl-button--secondary,
      button.xpl-button--success.xpl-button--secondary,
      .xpl-button--success.xpl-button--secondary a,
      .xpl-button--success.xpl-button--secondary button {
        background-color: var(--xpl-background-action-secondary-default);
        color: var(--xpl-text-positive);
      }

a.xpl-button--positive.xpl-button--secondary:hover, button.xpl-button--positive.xpl-button--secondary:hover, .xpl-button--positive.xpl-button--secondary a:hover, .xpl-button--positive.xpl-button--secondary button:hover, a.xpl-button--success.xpl-button--secondary:hover, button.xpl-button--success.xpl-button--secondary:hover, .xpl-button--success.xpl-button--secondary a:hover, .xpl-button--success.xpl-button--secondary button:hover {
          background-color: var(--xpl-background-action-secondary-hover);
          border-color: var(--xpl-border-positive);
        }

a.xpl-button--positive.xpl-button--secondary:active, button.xpl-button--positive.xpl-button--secondary:active, .xpl-button--positive.xpl-button--secondary a:active, .xpl-button--positive.xpl-button--secondary button:active, a.xpl-button--success.xpl-button--secondary:active, button.xpl-button--success.xpl-button--secondary:active, .xpl-button--success.xpl-button--secondary a:active, .xpl-button--success.xpl-button--secondary button:active {
          background-color: var(--xpl-background-action-secondary-active);
          border-color: var(--xpl-border-positive);
          outline-color: var(--xpl-border-positive);
          outline-width: 2px;
          outline-offset: calc(var(--xpl-border-small) + var(--xpl-border-large));
        }

a.xpl-button--positive.xpl-button--secondary:focus-visible, button.xpl-button--positive.xpl-button--secondary:focus-visible, .xpl-button--positive.xpl-button--secondary a:focus-visible, .xpl-button--positive.xpl-button--secondary button:focus-visible, a.xpl-button--success.xpl-button--secondary:focus-visible, button.xpl-button--success.xpl-button--secondary:focus-visible, .xpl-button--success.xpl-button--secondary a:focus-visible, .xpl-button--success.xpl-button--secondary button:focus-visible {
          background-color: var(--xpl-background-action-secondary-focus);
          outline-color: var(--xpl-border-positive);
          border-color: var(--xpl-border-strong);
          outline-width: 2px;
          outline-offset: calc(var(--xpl-border-small) + var(--xpl-border-large));
        }

a.xpl-button--positive.xpl-button--secondary:disabled,
        a.xpl-button--positive.xpl-button--secondary:disabled:hover,
        button.xpl-button--positive.xpl-button--secondary:disabled,
        button.xpl-button--positive.xpl-button--secondary:disabled:hover,
        .xpl-button--positive.xpl-button--secondary a:disabled,
        .xpl-button--positive.xpl-button--secondary a:disabled:hover,
        .xpl-button--positive.xpl-button--secondary button:disabled,
        .xpl-button--positive.xpl-button--secondary button:disabled:hover,
        a.xpl-button--success.xpl-button--secondary:disabled,
        a.xpl-button--success.xpl-button--secondary:disabled:hover,
        button.xpl-button--success.xpl-button--secondary:disabled,
        button.xpl-button--success.xpl-button--secondary:disabled:hover,
        .xpl-button--success.xpl-button--secondary a:disabled,
        .xpl-button--success.xpl-button--secondary a:disabled:hover,
        .xpl-button--success.xpl-button--secondary button:disabled,
        .xpl-button--success.xpl-button--secondary button:disabled:hover {
          background-color: var(--xpl-background-action-disabled);
          border-color: var(--xpl-background-action-disabled);
          color: var(--xpl-text-disabled);
        }

a.xpl-button--positive.xpl-button--tertiary,
      button.xpl-button--positive.xpl-button--tertiary,
      .xpl-button--positive.xpl-button--tertiary a,
      .xpl-button--positive.xpl-button--tertiary button,
      a.xpl-button--positive.xpl-button--subtle,
      button.xpl-button--positive.xpl-button--subtle,
      .xpl-button--positive.xpl-button--subtle a,
      .xpl-button--positive.xpl-button--subtle button,
      a.xpl-button--success.xpl-button--tertiary,
      button.xpl-button--success.xpl-button--tertiary,
      .xpl-button--success.xpl-button--tertiary a,
      .xpl-button--success.xpl-button--tertiary button,
      a.xpl-button--success.xpl-button--subtle,
      button.xpl-button--success.xpl-button--subtle,
      .xpl-button--success.xpl-button--subtle a,
      .xpl-button--success.xpl-button--subtle button {
        background-color: var(--xpl-background-action-tertiary-default);
        color: var(--xpl-text-positive);
      }

a.xpl-button--positive.xpl-button--tertiary:hover, button.xpl-button--positive.xpl-button--tertiary:hover, .xpl-button--positive.xpl-button--tertiary a:hover, .xpl-button--positive.xpl-button--tertiary button:hover, a.xpl-button--positive.xpl-button--subtle:hover, button.xpl-button--positive.xpl-button--subtle:hover, .xpl-button--positive.xpl-button--subtle a:hover, .xpl-button--positive.xpl-button--subtle button:hover, a.xpl-button--success.xpl-button--tertiary:hover, button.xpl-button--success.xpl-button--tertiary:hover, .xpl-button--success.xpl-button--tertiary a:hover, .xpl-button--success.xpl-button--tertiary button:hover, a.xpl-button--success.xpl-button--subtle:hover, button.xpl-button--success.xpl-button--subtle:hover, .xpl-button--success.xpl-button--subtle a:hover, .xpl-button--success.xpl-button--subtle button:hover {
          background-color: var(--xpl-background-action-tertiary-hover);
        }

a.xpl-button--positive.xpl-button--tertiary:active, button.xpl-button--positive.xpl-button--tertiary:active, .xpl-button--positive.xpl-button--tertiary a:active, .xpl-button--positive.xpl-button--tertiary button:active, a.xpl-button--positive.xpl-button--subtle:active, button.xpl-button--positive.xpl-button--subtle:active, .xpl-button--positive.xpl-button--subtle a:active, .xpl-button--positive.xpl-button--subtle button:active, a.xpl-button--success.xpl-button--tertiary:active, button.xpl-button--success.xpl-button--tertiary:active, .xpl-button--success.xpl-button--tertiary a:active, .xpl-button--success.xpl-button--tertiary button:active, a.xpl-button--success.xpl-button--subtle:active, button.xpl-button--success.xpl-button--subtle:active, .xpl-button--success.xpl-button--subtle a:active, .xpl-button--success.xpl-button--subtle button:active {
          background-color: var(--xpl-background-action-tertiary-active);
          outline-color: var(--xpl-border-subtle);
          border-color: var(--xpl-border-inverse);
          outline-width: 2px;
          outline-offset: var(--xpl-border-large);
        }

a.xpl-button--positive.xpl-button--tertiary:focus-visible, button.xpl-button--positive.xpl-button--tertiary:focus-visible, .xpl-button--positive.xpl-button--tertiary a:focus-visible, .xpl-button--positive.xpl-button--tertiary button:focus-visible, a.xpl-button--positive.xpl-button--subtle:focus-visible, button.xpl-button--positive.xpl-button--subtle:focus-visible, .xpl-button--positive.xpl-button--subtle a:focus-visible, .xpl-button--positive.xpl-button--subtle button:focus-visible, a.xpl-button--success.xpl-button--tertiary:focus-visible, button.xpl-button--success.xpl-button--tertiary:focus-visible, .xpl-button--success.xpl-button--tertiary a:focus-visible, .xpl-button--success.xpl-button--tertiary button:focus-visible, a.xpl-button--success.xpl-button--subtle:focus-visible, button.xpl-button--success.xpl-button--subtle:focus-visible, .xpl-button--success.xpl-button--subtle a:focus-visible, .xpl-button--success.xpl-button--subtle button:focus-visible {
          outline-color: var(--xpl-border-subtle);
          border-color: var(--xpl-border-inverse);
          background-color: var(--xpl-background-action-tertiary-focus);
          outline-width: 2px;
          outline-offset: var(--xpl-border-large);
        }

a.xpl-button--positive.xpl-button--tertiary:disabled,
        a.xpl-button--positive.xpl-button--tertiary:disabled:hover,
        button.xpl-button--positive.xpl-button--tertiary:disabled,
        button.xpl-button--positive.xpl-button--tertiary:disabled:hover,
        .xpl-button--positive.xpl-button--tertiary a:disabled,
        .xpl-button--positive.xpl-button--tertiary a:disabled:hover,
        .xpl-button--positive.xpl-button--tertiary button:disabled,
        .xpl-button--positive.xpl-button--tertiary button:disabled:hover,
        a.xpl-button--positive.xpl-button--subtle:disabled,
        a.xpl-button--positive.xpl-button--subtle:disabled:hover,
        button.xpl-button--positive.xpl-button--subtle:disabled,
        button.xpl-button--positive.xpl-button--subtle:disabled:hover,
        .xpl-button--positive.xpl-button--subtle a:disabled,
        .xpl-button--positive.xpl-button--subtle a:disabled:hover,
        .xpl-button--positive.xpl-button--subtle button:disabled,
        .xpl-button--positive.xpl-button--subtle button:disabled:hover,
        a.xpl-button--success.xpl-button--tertiary:disabled,
        a.xpl-button--success.xpl-button--tertiary:disabled:hover,
        button.xpl-button--success.xpl-button--tertiary:disabled,
        button.xpl-button--success.xpl-button--tertiary:disabled:hover,
        .xpl-button--success.xpl-button--tertiary a:disabled,
        .xpl-button--success.xpl-button--tertiary a:disabled:hover,
        .xpl-button--success.xpl-button--tertiary button:disabled,
        .xpl-button--success.xpl-button--tertiary button:disabled:hover,
        a.xpl-button--success.xpl-button--subtle:disabled,
        a.xpl-button--success.xpl-button--subtle:disabled:hover,
        button.xpl-button--success.xpl-button--subtle:disabled,
        button.xpl-button--success.xpl-button--subtle:disabled:hover,
        .xpl-button--success.xpl-button--subtle a:disabled,
        .xpl-button--success.xpl-button--subtle a:disabled:hover,
        .xpl-button--success.xpl-button--subtle button:disabled,
        .xpl-button--success.xpl-button--subtle button:disabled:hover {
          background-color: var(--xpl-background-action-disabled);
          border-color: var(--xpl-background-action-disabled);
          color: var(--xpl-text-disabled);
        }

a.xpl-button--negative,
    button.xpl-button--negative,
    .xpl-button--negative a,
    .xpl-button--negative button,
    a.xpl-button--warning,
    button.xpl-button--warning,
    .xpl-button--warning a,
    .xpl-button--warning button {
      background-color: var(--xpl-background-action-negative-default);
      color: var(--xpl-text-inverse);
    }

a.xpl-button--negative:hover, button.xpl-button--negative:hover, .xpl-button--negative a:hover, .xpl-button--negative button:hover, a.xpl-button--warning:hover, button.xpl-button--warning:hover, .xpl-button--warning a:hover, .xpl-button--warning button:hover {
        background-color: var(--xpl-background-action-negative-hover);
      }

a.xpl-button--negative:active, button.xpl-button--negative:active, .xpl-button--negative a:active, .xpl-button--negative button:active, a.xpl-button--warning:active, button.xpl-button--warning:active, .xpl-button--warning a:active, .xpl-button--warning button:active {
        background-color: var(--xpl-background-action-negative-active);
        outline-color: var(--xpl-border-negative);
        outline-width: 2px;
        outline-offset: var(--xpl-border-large);
      }

a.xpl-button--negative:focus-visible, button.xpl-button--negative:focus-visible, .xpl-button--negative a:focus-visible, .xpl-button--negative button:focus-visible, a.xpl-button--warning:focus-visible, button.xpl-button--warning:focus-visible, .xpl-button--warning a:focus-visible, .xpl-button--warning button:focus-visible {
        outline-color: var(--xpl-border-negative);
        background-color: var(--xpl-background-action-negative-focus);
        outline-width: 2px;
        outline-offset: var(--xpl-border-large);
      }

a.xpl-button--negative.xpl-button--secondary,
      button.xpl-button--negative.xpl-button--secondary,
      .xpl-button--negative.xpl-button--secondary a,
      .xpl-button--negative.xpl-button--secondary button,
      a.xpl-button--warning.xpl-button--secondary,
      button.xpl-button--warning.xpl-button--secondary,
      .xpl-button--warning.xpl-button--secondary a,
      .xpl-button--warning.xpl-button--secondary button {
        background-color: var(--xpl-background-action-secondary-default);
        color: var(--xpl-text-negative);
      }

a.xpl-button--negative.xpl-button--secondary:hover, button.xpl-button--negative.xpl-button--secondary:hover, .xpl-button--negative.xpl-button--secondary a:hover, .xpl-button--negative.xpl-button--secondary button:hover, a.xpl-button--warning.xpl-button--secondary:hover, button.xpl-button--warning.xpl-button--secondary:hover, .xpl-button--warning.xpl-button--secondary a:hover, .xpl-button--warning.xpl-button--secondary button:hover {
          background-color: var(--xpl-background-action-secondary-hover);
          border-color: var(--xpl-border-negative);
        }

a.xpl-button--negative.xpl-button--secondary:active, button.xpl-button--negative.xpl-button--secondary:active, .xpl-button--negative.xpl-button--secondary a:active, .xpl-button--negative.xpl-button--secondary button:active, a.xpl-button--warning.xpl-button--secondary:active, button.xpl-button--warning.xpl-button--secondary:active, .xpl-button--warning.xpl-button--secondary a:active, .xpl-button--warning.xpl-button--secondary button:active {
          background-color: var(--xpl-background-action-secondary-active);
          border-color: var(--xpl-border-negative);
          outline-color: var(--xpl-border-negative);
          outline-width: 2px;
          outline-offset: calc(var(--xpl-border-small) + var(--xpl-border-large));
        }

a.xpl-button--negative.xpl-button--secondary:focus-visible, button.xpl-button--negative.xpl-button--secondary:focus-visible, .xpl-button--negative.xpl-button--secondary a:focus-visible, .xpl-button--negative.xpl-button--secondary button:focus-visible, a.xpl-button--warning.xpl-button--secondary:focus-visible, button.xpl-button--warning.xpl-button--secondary:focus-visible, .xpl-button--warning.xpl-button--secondary a:focus-visible, .xpl-button--warning.xpl-button--secondary button:focus-visible {
          outline-color: var(--xpl-border-negative);
          background-color: var(--xpl-background-action-secondary-focus);
          border-color: var(--xpl-border-strong);
          outline-width: 2px;
          outline-offset: calc(var(--xpl-border-small) + var(--xpl-border-large));
        }

a.xpl-button--negative.xpl-button--secondary:disabled,
        a.xpl-button--negative.xpl-button--secondary:disabled:hover,
        button.xpl-button--negative.xpl-button--secondary:disabled,
        button.xpl-button--negative.xpl-button--secondary:disabled:hover,
        .xpl-button--negative.xpl-button--secondary a:disabled,
        .xpl-button--negative.xpl-button--secondary a:disabled:hover,
        .xpl-button--negative.xpl-button--secondary button:disabled,
        .xpl-button--negative.xpl-button--secondary button:disabled:hover,
        a.xpl-button--warning.xpl-button--secondary:disabled,
        a.xpl-button--warning.xpl-button--secondary:disabled:hover,
        button.xpl-button--warning.xpl-button--secondary:disabled,
        button.xpl-button--warning.xpl-button--secondary:disabled:hover,
        .xpl-button--warning.xpl-button--secondary a:disabled,
        .xpl-button--warning.xpl-button--secondary a:disabled:hover,
        .xpl-button--warning.xpl-button--secondary button:disabled,
        .xpl-button--warning.xpl-button--secondary button:disabled:hover {
          background-color: var(--xpl-background-action-disabled);
          border-color: var(--xpl-background-action-disabled);
          color: var(--xpl-text-disabled);
        }

a.xpl-button--negative.xpl-button--tertiary,
      button.xpl-button--negative.xpl-button--tertiary,
      .xpl-button--negative.xpl-button--tertiary a,
      .xpl-button--negative.xpl-button--tertiary button,
      a.xpl-button--negative.xpl-button--subtle,
      button.xpl-button--negative.xpl-button--subtle,
      .xpl-button--negative.xpl-button--subtle a,
      .xpl-button--negative.xpl-button--subtle button,
      a.xpl-button--warning.xpl-button--tertiary,
      button.xpl-button--warning.xpl-button--tertiary,
      .xpl-button--warning.xpl-button--tertiary a,
      .xpl-button--warning.xpl-button--tertiary button,
      a.xpl-button--warning.xpl-button--subtle,
      button.xpl-button--warning.xpl-button--subtle,
      .xpl-button--warning.xpl-button--subtle a,
      .xpl-button--warning.xpl-button--subtle button {
        background-color: var(--xpl-background-action-tertiary-default);
        color: var(--xpl-text-negative);
      }

a.xpl-button--negative.xpl-button--tertiary:hover, button.xpl-button--negative.xpl-button--tertiary:hover, .xpl-button--negative.xpl-button--tertiary a:hover, .xpl-button--negative.xpl-button--tertiary button:hover, a.xpl-button--negative.xpl-button--subtle:hover, button.xpl-button--negative.xpl-button--subtle:hover, .xpl-button--negative.xpl-button--subtle a:hover, .xpl-button--negative.xpl-button--subtle button:hover, a.xpl-button--warning.xpl-button--tertiary:hover, button.xpl-button--warning.xpl-button--tertiary:hover, .xpl-button--warning.xpl-button--tertiary a:hover, .xpl-button--warning.xpl-button--tertiary button:hover, a.xpl-button--warning.xpl-button--subtle:hover, button.xpl-button--warning.xpl-button--subtle:hover, .xpl-button--warning.xpl-button--subtle a:hover, .xpl-button--warning.xpl-button--subtle button:hover {
          background-color: var(--xpl-background-action-tertiary-hover);
        }

a.xpl-button--negative.xpl-button--tertiary:active, button.xpl-button--negative.xpl-button--tertiary:active, .xpl-button--negative.xpl-button--tertiary a:active, .xpl-button--negative.xpl-button--tertiary button:active, a.xpl-button--negative.xpl-button--subtle:active, button.xpl-button--negative.xpl-button--subtle:active, .xpl-button--negative.xpl-button--subtle a:active, .xpl-button--negative.xpl-button--subtle button:active, a.xpl-button--warning.xpl-button--tertiary:active, button.xpl-button--warning.xpl-button--tertiary:active, .xpl-button--warning.xpl-button--tertiary a:active, .xpl-button--warning.xpl-button--tertiary button:active, a.xpl-button--warning.xpl-button--subtle:active, button.xpl-button--warning.xpl-button--subtle:active, .xpl-button--warning.xpl-button--subtle a:active, .xpl-button--warning.xpl-button--subtle button:active {
          background-color: var(--xpl-background-action-tertiary-active);
          outline-color: var(--xpl-border-subtle);
          border-color: var(--xpl-border-inverse);
          outline-width: 2px;
          outline-offset: var(--xpl-border-large);
        }

a.xpl-button--negative.xpl-button--tertiary:focus-visible, button.xpl-button--negative.xpl-button--tertiary:focus-visible, .xpl-button--negative.xpl-button--tertiary a:focus-visible, .xpl-button--negative.xpl-button--tertiary button:focus-visible, a.xpl-button--negative.xpl-button--subtle:focus-visible, button.xpl-button--negative.xpl-button--subtle:focus-visible, .xpl-button--negative.xpl-button--subtle a:focus-visible, .xpl-button--negative.xpl-button--subtle button:focus-visible, a.xpl-button--warning.xpl-button--tertiary:focus-visible, button.xpl-button--warning.xpl-button--tertiary:focus-visible, .xpl-button--warning.xpl-button--tertiary a:focus-visible, .xpl-button--warning.xpl-button--tertiary button:focus-visible, a.xpl-button--warning.xpl-button--subtle:focus-visible, button.xpl-button--warning.xpl-button--subtle:focus-visible, .xpl-button--warning.xpl-button--subtle a:focus-visible, .xpl-button--warning.xpl-button--subtle button:focus-visible {
          outline-color: var(--xpl-border-subtle);
          border-color: var(--xpl-border-inverse);
          background-color: var(--xpl-background-action-tertiary-focus);
          outline-width: 2px;
          outline-offset: var(--xpl-border-large);
        }

a.xpl-button--negative.xpl-button--tertiary:disabled,
        a.xpl-button--negative.xpl-button--tertiary:disabled:hover,
        button.xpl-button--negative.xpl-button--tertiary:disabled,
        button.xpl-button--negative.xpl-button--tertiary:disabled:hover,
        .xpl-button--negative.xpl-button--tertiary a:disabled,
        .xpl-button--negative.xpl-button--tertiary a:disabled:hover,
        .xpl-button--negative.xpl-button--tertiary button:disabled,
        .xpl-button--negative.xpl-button--tertiary button:disabled:hover,
        a.xpl-button--negative.xpl-button--subtle:disabled,
        a.xpl-button--negative.xpl-button--subtle:disabled:hover,
        button.xpl-button--negative.xpl-button--subtle:disabled,
        button.xpl-button--negative.xpl-button--subtle:disabled:hover,
        .xpl-button--negative.xpl-button--subtle a:disabled,
        .xpl-button--negative.xpl-button--subtle a:disabled:hover,
        .xpl-button--negative.xpl-button--subtle button:disabled,
        .xpl-button--negative.xpl-button--subtle button:disabled:hover,
        a.xpl-button--warning.xpl-button--tertiary:disabled,
        a.xpl-button--warning.xpl-button--tertiary:disabled:hover,
        button.xpl-button--warning.xpl-button--tertiary:disabled,
        button.xpl-button--warning.xpl-button--tertiary:disabled:hover,
        .xpl-button--warning.xpl-button--tertiary a:disabled,
        .xpl-button--warning.xpl-button--tertiary a:disabled:hover,
        .xpl-button--warning.xpl-button--tertiary button:disabled,
        .xpl-button--warning.xpl-button--tertiary button:disabled:hover,
        a.xpl-button--warning.xpl-button--subtle:disabled,
        a.xpl-button--warning.xpl-button--subtle:disabled:hover,
        button.xpl-button--warning.xpl-button--subtle:disabled,
        button.xpl-button--warning.xpl-button--subtle:disabled:hover,
        .xpl-button--warning.xpl-button--subtle a:disabled,
        .xpl-button--warning.xpl-button--subtle a:disabled:hover,
        .xpl-button--warning.xpl-button--subtle button:disabled,
        .xpl-button--warning.xpl-button--subtle button:disabled:hover {
          background-color: var(--xpl-background-action-disabled);
          border-color: var(--xpl-background-action-disabled);
          color: var(--xpl-text-disabled);
        }

/* Icon positioning - grid order based */

button.xpl-button__icon-position--end .xpl-button__icon, a.xpl-button__icon-position--end .xpl-button__icon, .xpl-button__icon-position--end button .xpl-button__icon, .xpl-button__icon-position--end a .xpl-button__icon {
      order: 2;
    }

a.xpl-button--disabled,
  button.xpl-button--disabled,
  .xpl-button--disabled a,
  .xpl-button--disabled a:hover,
  .xpl-button--disabled a:focus-visible,
  .xpl-button--disabled a:active,
  a.xpl-button--link-disabled,
  button.xpl-button--link-disabled,
  .xpl-button--link-disabled a,
  .xpl-button--link-disabled a:hover,
  .xpl-button--link-disabled a:focus-visible,
  .xpl-button--link-disabled a:active,
  a.xpl-button--disabled.xpl-button--positive,
  button.xpl-button--disabled.xpl-button--positive,
  .xpl-button--disabled.xpl-button--positive a,
  .xpl-button--disabled.xpl-button--positive a:hover,
  .xpl-button--disabled.xpl-button--positive a:focus-visible,
  .xpl-button--disabled.xpl-button--positive a:active,
  a.xpl-button--disabled.xpl-button--success,
  button.xpl-button--disabled.xpl-button--success,
  .xpl-button--disabled.xpl-button--success a,
  .xpl-button--disabled.xpl-button--success a:hover,
  .xpl-button--disabled.xpl-button--success a:focus-visible,
  .xpl-button--disabled.xpl-button--success a:active,
  a.xpl-button--disabled.xpl-button--warning,
  button.xpl-button--disabled.xpl-button--warning,
  .xpl-button--disabled.xpl-button--warning a,
  .xpl-button--disabled.xpl-button--warning a:hover,
  .xpl-button--disabled.xpl-button--warning a:focus-visible,
  .xpl-button--disabled.xpl-button--warning a:active,
  a.xpl-button--disabled.xpl-button--negative,
  button.xpl-button--disabled.xpl-button--negative,
  .xpl-button--disabled.xpl-button--negative a,
  .xpl-button--disabled.xpl-button--negative a:hover,
  .xpl-button--disabled.xpl-button--negative a:focus-visible,
  .xpl-button--disabled.xpl-button--negative a:active,
  a.xpl-button--disabled.xpl-button--neutral,
  button.xpl-button--disabled.xpl-button--neutral,
  .xpl-button--disabled.xpl-button--neutral a,
  .xpl-button--disabled.xpl-button--neutral a:hover,
  .xpl-button--disabled.xpl-button--neutral a:focus-visible,
  .xpl-button--disabled.xpl-button--neutral a:active {
    background-color: var(--xpl-background-action-disabled);
    border-color: var(--xpl-background-action-disabled);
    color: var(--xpl-text-disabled);
    box-shadow: none;
    cursor: not-allowed;
    border-width: 0px;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

.xpl-button--full-width {
  display: flex;
  width: 100%
}

a.xpl-button--full-width,
  button.xpl-button--full-width,
  .xpl-button--full-width a,
  .xpl-button--full-width button {
  width: 100%
}

button.xpl-button--loading,
  a.xpl-button--loading,
  .xpl-button--loading button,
  .xpl-button--loading a {
  pointer-events: none;
  position: relative;
  display: inline-grid;
  cursor: wait;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.xpl-button--loading .xpl-button__icon,
  .xpl-button--loading button > *:not(.xpl-button__loading-overlay) {
  pointer-events: none;
  visibility: hidden;
  opacity: 0
}

.xpl-button--loading .xpl-button__loading-overlay {
    z-index: var(--xpl-z-index-100);
    background: inherit;
    pointer-events: none;
    position: absolute;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

button.xpl-button--loading,
  .xpl-button--loading button {
    color: transparent;
  }

/* For transparent buttons (tertiary/secondary), hide text without adding solid background */

button.xpl-button--loading.xpl-button--tertiary,
    .xpl-button--loading.xpl-button--tertiary button,
    button.xpl-button--loading.xpl-button--subtle,
    .xpl-button--loading.xpl-button--subtle button,
    button.xpl-button--loading.xpl-button--secondary,
    .xpl-button--loading.xpl-button--secondary button,
    button.xpl-button--loading.xpl-button--primary,
    .xpl-button--loading.xpl-button--primary button {
      color: transparent;
    }

.xpl-button--loading.xpl-button--tertiary .xpl-button__loading-spinner, .xpl-button--loading.xpl-button--subtle .xpl-button__loading-spinner, .xpl-button--loading.xpl-button--secondary .xpl-button__loading-spinner, .xpl-button--loading.xpl-button--primary .xpl-button__loading-spinner {
      color: var(--xpl-text-inverse);
    }

.xpl-button--loading.xpl-button--secondary.xpl-button--neutral .xpl-button__loading-spinner,
  .xpl-button--loading.xpl-button--tertiary.xpl-button--neutral .xpl-button__loading-spinner,
  .xpl-button--loading.xpl-button--subtle.xpl-button--neutral .xpl-button__loading-spinner {
    color: var(--xpl-text-default);
  }

/* Sentiment-based spinner colors - only for secondary/tertiary (not primary) */

.xpl-button--loading.xpl-button--secondary.xpl-button--positive .xpl-button__loading-spinner,
  .xpl-button--loading.xpl-button--secondary.xpl-button--success .xpl-button__loading-spinner,
  .xpl-button--loading.xpl-button--tertiary.xpl-button--positive .xpl-button__loading-spinner,
  .xpl-button--loading.xpl-button--tertiary.xpl-button--success .xpl-button__loading-spinner,
  .xpl-button--loading.xpl-button--subtle.xpl-button--positive .xpl-button__loading-spinner,
  .xpl-button--loading.xpl-button--subtle.xpl-button--success .xpl-button__loading-spinner {
    color: var(--xpl-text-positive);
  }

.xpl-button--loading.xpl-button--secondary.xpl-button--negative .xpl-button__loading-spinner,
  .xpl-button--loading.xpl-button--secondary.xpl-button--warning .xpl-button__loading-spinner,
  .xpl-button--loading.xpl-button--tertiary.xpl-button--negative .xpl-button__loading-spinner,
  .xpl-button--loading.xpl-button--tertiary.xpl-button--warning .xpl-button__loading-spinner,
  .xpl-button--loading.xpl-button--subtle.xpl-button--negative .xpl-button__loading-spinner,
  .xpl-button--loading.xpl-button--subtle.xpl-button--warning .xpl-button__loading-spinner {
    color: var(--xpl-text-negative);
  }

/* When loading + disabled, always use disabled icon color regardless of variant/sentiment */

.xpl-button--loading.xpl-button--disabled .xpl-button__loading-spinner,
  .xpl-button--loading.xpl-button--disabled.xpl-button--secondary .xpl-button__loading-spinner,
  .xpl-button--loading.xpl-button--disabled.xpl-button--tertiary .xpl-button__loading-spinner,
  .xpl-button--loading.xpl-button--disabled.xpl-button--subtle .xpl-button__loading-spinner {
    color: var(--xpl-icon-disabled);
  }

.xpl-button--loading .xpl-button__loading-spinner {
    width: var(--xpl-size-1125);
    height: var(--xpl-size-1125);
    color: var(--xpl-text-inverse);
    display: flex;
  }

@keyframes spin {

  to {
    transform: rotate(360deg)
  }
}

.xpl-button--loading .xpl-button__loading-spinner {
  animation: spin 1s linear infinite;
  align-items: center;
  justify-content: center
}

.xpl-button--loading.xpl-button .xpl-button__loading-spinner xpl-icon {
    width: var(--xpl-size-1125);
    height: var(--xpl-size-1125);
    color: currentcolor;
    opacity: 1;
    visibility: visible;
  }

.xpl-button--loading.xpl-button .xpl-button__loading-spinner svg {
    width: 100%;
    height: 100%;
  }

.xpl-button--loading.xpl-button--sm .xpl-button__loading-spinner {
      width: var(--xpl-size-075);
      height: var(--xpl-size-075);
    }

.xpl-button--loading.xpl-button--sm.xpl-button .xpl-button__loading-spinner xpl-icon {
      width: var(--xpl-size-075);
      height: var(--xpl-size-075);
    }

.xpl-button--loading.xpl-button--xs .xpl-button__loading-spinner {
      width: var(--xpl-size-075);
      height: var(--xpl-size-075);
    }

.xpl-button--loading.xpl-button--xs.xpl-button .xpl-button__loading-spinner xpl-icon {
      width: var(--xpl-size-075);
      height: var(--xpl-size-075);
    }

.xpl-button--loading.xpl-button--icon-only.xpl-button--sm .xpl-button__loading-spinner {
      width: var(--xpl-size-075);
      height: var(--xpl-size-075);
      min-width: var(--xpl-size-075);
      min-height: var(--xpl-size-075);
      overflow: hidden;
    }

.xpl-button--loading.xpl-button--icon-only.xpl-button--sm.xpl-button .xpl-button__loading-spinner xpl-icon {
      width: var(--xpl-size-075);
      height: var(--xpl-size-075);
      min-width: var(--xpl-size-075);
      min-height: var(--xpl-size-075);
    }

.xpl-button--loading.xpl-button--icon-only.xpl-button--sm.xpl-button .xpl-button__loading-spinner xpl-icon,
    .xpl-button--loading.xpl-button--icon-only.xpl-button--sm.xpl-button .xpl-button__loading-spinner figure,
    .xpl-button--loading.xpl-button--icon-only.xpl-button--sm.xpl-button .xpl-button__loading-spinner span,
    .xpl-button--loading.xpl-button--icon-only.xpl-button--sm.xpl-button .xpl-button__loading-spinner svg {
      max-width: var(--xpl-size-075);
      max-height: var(--xpl-size-075);
    }

.xpl-button--loading {
  pointer-events: none;
  cursor: wait
}

.xpl-button--loading:hover {
  cursor: wait
}

/* stylelint-enable no-descending-specificity */

.xpl-button-row {
  border-top-width: var(--xpl-border-small);
  border-top-style: solid;
  border-top-color: var(--xpl-border-default);
  padding-top: var(--xpl-space-24);
  display: block;
  width: 100%;
}

.xpl-button-row-inner {
  display: flex;
  justify-content: space-between
}

.xpl-button-row xpl-button + xpl-button .xpl-button {
  margin-left: var(--xpl-space-16);
}

.xpl-button-row__right .xpl-button--secondary {
  display: none;
}

.xpl-button-row__right {
  display: flex
}

@media screen and (max-width: 640px) {
  .xpl-button-row-inner {
    display: block
  }
    .xpl-button-row .xpl-button a,
    .xpl-button-row .xpl-button button {
      margin-bottom: var(--xpl-space-16);
      width: 100%;
      justify-content: center;
    }

  .xpl-button-row xpl-button + xpl-button .xpl-button {
    margin-left: var(--xpl-space-0);
  }

  .xpl-button-row__left .xpl-button--secondary {
    display: none;
  }

  .xpl-button-row__right .xpl-button--secondary {
    display: block;
  }

  /* so that tertiary appears below primary */
  .xpl-button-row__right {
    flex-direction: column-reverse
  }

  /* target the first because we're reversing it */
  .xpl-button-row__right xpl-button:first-child .xpl-button {
    margin-bottom: var(--xpl-space-0);
  }
}

.xpl-breadcrumbs a {
    color: inherit;
    text-decoration: none;
  }

.xpl-breadcrumbs ol {
    color: var(--xpl-color-text-secondary-lm);
  }

.xpl-breadcrumbs ol span {
      color: var(--xpl-color-text-secondary-dm);
    }

.xpl-breadcrumbs ol span svg {
        height: 9px;
        margin-top: 0.125rem;
      }

.xpl-breadcrumbs ol span {
  display: grid;
  align-content: center
}

.xpl-breadcrumbs ol .xpl-breadcrumb-item:hover {
        color: var(--xpl-color-action-primary-lm);
      }

.xpl-breadcrumbs ol .xpl-breadcrumb-item a,
      .xpl-breadcrumbs ol .xpl-breadcrumb-item button,
      .xpl-breadcrumbs ol .xpl-breadcrumb-item span {
  padding-right: 0.5rem
}

.xpl-breadcrumbs ol .xpl-breadcrumb-item:nth-last-of-type(3) {
  display: none
}

.flatpickr-day.xpl-breadcrumbs ol .xpl-breadcrumb-item:nth-last-of-type(3){visibility:hidden}

.xpl-toolbar.xpl-breadcrumbs ol .xpl-breadcrumb-item:nth-last-of-type(3) {
  display: none;
}

@media (min-width: 768px) {

  .xpl-breadcrumbs ol .xpl-breadcrumb-item:nth-last-of-type(3) {
    display: flex
  }
}

.xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child {
        color: var(--xpl-color-text-primary-lm);
      }

.xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child:hover {
          color: var(--xpl-color-action-primary-lm);
        }

.xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child span {
  display: none
}

.flatpickr-day.xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child span{visibility:hidden}

.xpl-toolbar.xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child span {
  display: none;
}

.xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child {
  pointer-events: none;
  cursor: default;
  text-decoration-line: none
}

.xpl-breadcrumbs ol .xpl-breadcrumb-item {
  display: flex;
  align-content: center
}

.xpl-breadcrumbs ol {
  display: flex;
  align-content: center;
  font-size: 0.875rem;
  line-height: 1.25rem
}

/* stylelint-disable no-descending-specificity, because the rule was expecting some of the code below to appear before some code that is nested above. */

.dark .xpl-breadcrumbs ol {
    color: var(--xpl-color-text-secondary-dm);
  }

.dark .xpl-breadcrumbs ol .xpl-breadcrumb-item:hover {
        color: var(--xpl-color-action-primary-dm);
      }

.dark .xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child {
        color: var(--xpl-color-text-primary-dm);
      }

.dark .xpl-breadcrumbs ol .xpl-breadcrumb-item:last-child:hover {
          color: var(--xpl-color-action-primary-dm);
        }

.dark .xpl-breadcrumbs ol span {
      color: var(--xpl-color-text-secondary-lm);
    }

/**
 * Since the UIs for checkboxes and radios are so
 * similar, both components find their styles here.
 */

/* Shared box metrics and focus ring for the checkbox/radio inputs. */

.xpl-checkbox,
.xpl-radio {
  /* Figma: resting control border is border/strong for both checkbox and radio
     (XPL-Checkbox / XPL-Radio "State=Resting"). Hover/checked override to
     border/hover and disabled overrides to border/default below. */
  border-color: var(--xpl-border-strong);
  border-width: var(--xpl-border-small);
  height: var(--xpl-size-100);
  min-height: var(--xpl-size-100);
  min-width: var(--xpl-size-100);
  top: 2px;
  width: var(--xpl-size-100);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.xpl-checkbox-radio-container {
  margin-bottom: 1.5rem;
  display: flex
}

/* Label sits beside the control in the default (unstyled) layout. */

.xpl-checkbox-radio-container input + label {
    padding-left: var(--xpl-space-12);
    padding-right: var(--xpl-space-12);
    cursor: pointer;
    vertical-align: middle;
  }

/* The "styled" variant draws a bordered, selectable card around the control. */

.xpl-checkbox-radio-container.styled {
    border-color: var(--xpl-border-default);
    border-radius: var(--xpl-border-radius-small);
    border-width: var(--xpl-border-small);

    /* No `overflow: hidden` here. The control is absolutely positioned inside the
       card and its `:focus-visible` outline (2px outline + 2px offset, per the
       Figma "State=Focus, Styled=True" spec for both checkbox and radio) would be
       clipped by an `overflow: hidden` card. Instead the label clips its own tinted
       background to the card corners via matching `border-radius` (set below). */

    position: relative;
  }

/* Disabled wins via :not() instead of !important on the hover rule. */

.xpl-checkbox-radio-container.styled:not(.disabled):hover,
    .xpl-checkbox-radio-container.styled:not(.disabled):has(:focus-visible) {
      border-color: var(--xpl-border-hover);
    }

.xpl-checkbox-radio-container.styled input {
      left: var(--xpl-space-16);
      margin-bottom: var(--xpl-space-16);
      margin-top: var(--xpl-space-16);
      position: absolute;
    }

.xpl-checkbox-radio-container.styled label {
      background-color: var(--xpl-background-surface-default);

      /* Round the label background to the card so its tinted (checked) fill stays
         inside the card's rounded corners now that the container no longer uses
         `overflow: hidden` (which previously clipped it but also clipped the
         control's focus outline). */
      border-radius: var(--xpl-border-radius-small);
      padding-bottom: var(--xpl-space-16);
      padding-left: calc(var(--xpl-space-16) + var(--xpl-size-100) + var(--xpl-space-12));
      padding-right: var(--xpl-space-12);
      padding-top: var(--xpl-space-16);
      display: block;
      width: 100%;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;
    }

.xpl-checkbox-radio-container.styled input:checked + label,
    .xpl-checkbox-radio-container.styled .xpl-checkbox:indeterminate + label {
      background-color: var(--xpl-background-surface-information);
    }

/* Disabled label background must win over the checked/indeterminate rule
       above, so these selectors are written to be equal-or-higher specificity
       and appear afterward (also satisfies no-descending-specificity). */

.xpl-checkbox-radio-container.styled .xpl-checkbox:disabled + label,
    .xpl-checkbox-radio-container.styled .xpl-radio:disabled + label,
    .xpl-checkbox-radio-container.styled .xpl-checkbox:disabled:indeterminate + label {
      background-color: var(--xpl-background-action-disabled);
    }

.xpl-checkbox {
  background-color: var(--xpl-background-surface-default);
  border-radius: var(--xpl-border-radius-small);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.xpl-checkbox:hover,
  .xpl-checkbox:checked,
  .xpl-checkbox:indeterminate {
    border-color: var(--xpl-border-hover);
  }

.xpl-checkbox:checked,
  .xpl-checkbox:indeterminate {
    background-color: var(--xpl-background-action-primary-default);
  }

.xpl-checkbox:focus-visible {
    outline-color: var(--xpl-border-focus);
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
  }

.xpl-checkbox:disabled {
    background-color: var(--xpl-background-action-disabled);
    border-color: var(--xpl-border-default);
    cursor: not-allowed;
  }

.xpl-checkbox:disabled:checked,
  .xpl-checkbox:disabled:indeterminate {
    background-color: var(--xpl-background-action-disabled);
    border-color: var(--xpl-border-default);
  }

/* The check mark/indeterminate glyph layer; hidden until checked. */

.xpl-checkbox::after {
    content: "";
    height: var(--xpl-size-100);
    width: var(--xpl-size-100);
    display: block;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

/*
   * Check mark and indeterminate icons are rendered via CSS mask-image rather than
   * background-image so the icon color tracks Foundation tokens. Using a hardcoded
   * SVG `fill` would make the icon a static color across themes, which previously
   * required separate `.dark` overrides and produced poor contrast against
   * theme-switched backgrounds (e.g. white on the light-mode disabled background
   * `--xpl-background-action-disabled` = neutral.100, or white on the dark-mode
   * checked background `--xpl-border-hover` = purple.300).
   *
   * Use `--xpl-text-inverse` for the mask fill (same role as primary button label
   * color in `button.css`); it matches `--xpl-icon-inverse` in Foundation output
   * but is the canonical inverse-foreground token used across core.
   */

.xpl-checkbox:indeterminate::after,
  .xpl-checkbox:checked::after {
    background-color: var(--xpl-text-inverse);
    -webkit-mask-position: calc(50% - 1px) calc(50% - 1px);
            mask-position: calc(50% - 1px) calc(50% - 1px);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    opacity: 1;
  }

.xpl-checkbox:indeterminate::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2.5L10 2.5L10 4.5L0 4.5Z' fill='white'/%3E%3C/svg%3E%0A");
            mask-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 2.5L10 2.5L10 4.5L0 4.5Z' fill='white'/%3E%3C/svg%3E%0A");
  }

.xpl-checkbox:checked::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.37866 7.6145C4.57397 7.80981 4.90601 7.80981 5.10132 7.6145L10.8435 1.87231C11.0388 1.677 11.0388 1.34497 10.8435 1.14966L10.1404 0.446533C9.94507 0.251221 9.63257 0.251221 9.43726 0.446533L4.74976 5.13403L2.54272 2.94653C2.34741 2.75122 2.03491 2.75122 1.8396 2.94653L1.13647 3.64966C0.941162 3.84497 0.941162 4.177 1.13647 4.37231L4.37866 7.6145Z' fill='white'/%3E%3C/svg%3E%0A");
            mask-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.37866 7.6145C4.57397 7.80981 4.90601 7.80981 5.10132 7.6145L10.8435 1.87231C11.0388 1.677 11.0388 1.34497 10.8435 1.14966L10.1404 0.446533C9.94507 0.251221 9.63257 0.251221 9.43726 0.446533L4.74976 5.13403L2.54272 2.94653C2.34741 2.75122 2.03491 2.75122 1.8396 2.94653L1.13647 3.64966C0.941162 3.84497 0.941162 4.177 1.13647 4.37231L4.37866 7.6145Z' fill='white'/%3E%3C/svg%3E%0A");
  }

.xpl-checkbox:disabled:checked::after,
  .xpl-checkbox:disabled:indeterminate::after {
    background-color: var(--xpl-icon-disabled);
  }

.xpl-radio {
  transition-property: border;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  border-radius: 9999px;
}

/* Thicker border forms the inner dot when selected. */

.xpl-radio:checked {
    border-width: 5px;
  }

.xpl-radio:hover,
  .xpl-radio:active,
  .xpl-radio:checked {
    border-color: var(--xpl-border-hover);
  }

.xpl-radio:focus-visible {
    outline-color: var(--xpl-border-focus);
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
  }

.xpl-radio:disabled {
    background-color: var(--xpl-background-action-disabled);
    border-color: var(--xpl-border-default);
    cursor: not-allowed;
  }

.xpl-radio:disabled:checked {
    background-color: var(--xpl-background-surface-default);
    border-color: var(--xpl-border-default);
  }

.xpl-choicelist-heading {
  margin-bottom: 0.5rem
}

.xpl-choicelist-heading > h3 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(48 45 59 / var(--tw-text-opacity, 1))
}

.dark .xpl-choicelist-heading > h3 {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.xpl-choicelist-heading > p {
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(106 109 125 / var(--tw-text-opacity, 1))
}

.dark .xpl-choicelist-heading > p {
  --tw-text-opacity: 1;
  color: rgb(153 155 168 / var(--tw-text-opacity, 1))
}

.xpl-choicelist {
  margin: 0px;
  display: block;
  padding: 0px
}

.xpl-choicelist li {
  margin-bottom: 1rem
}

/* override default checkbox/radio styling in choicelists */

.xpl-choicelist .xpl-checkbox-radio-container {
  margin-bottom: 0px
}

.xpl-choicelist--styled {
  overflow: hidden;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(238 239 243 / var(--tw-border-opacity, 1))
}

.dark .xpl-choicelist--styled {
  --tw-border-opacity: 1;
  border-color: rgb(106 109 125 / var(--tw-border-opacity, 1))
}

.xpl-choicelist--styled .xpl-radio-container,
.xpl-choicelist--styled .xpl-checkbox-container {
  margin-bottom: 0px
}

.xpl-choicelist--styled li {
  position: relative;
  margin-bottom: 0px;
  display: block;
  border-width: 1px;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  --tw-border-opacity: 1;
  border-color: rgb(238 239 243 / var(--tw-border-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}

.dark .xpl-choicelist--styled li {
  --tw-border-opacity: 1;
  border-color: rgb(106 109 125 / var(--tw-border-opacity, 1))
}

.xpl-choicelist--styled li:last-child {
  border-bottom-width: 0px
}

.xpl-choicelist--styled li.selected {
  --tw-bg-opacity: 1;
  background-color: rgb(244 242 255 / var(--tw-bg-opacity, 1))
}

.dark .xpl-choicelist--styled li.selected {
  --tw-bg-opacity: 1;
  background-color: rgb(54 50 64 / var(--tw-bg-opacity, 1))
}

.xpl-choicelist--styled input {
  position: absolute;
  margin-left: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem
}

.xpl-choicelist--styled label {
  display: block;
  width: 100%;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem
}

.xpl-choicelist--styled .xpl-checkbox + label,
.xpl-choicelist--styled .xpl-radio + label {
  padding-left: 3rem
}

.xpl-content-area-wrapper {
  height: 100%;
  min-width: 0;
  background-color: var(--xpl-color-background-lm);
}

.xpl-content-area-wrapper__wide .xpl-content-area {
  padding: 1.5rem
}

@media (min-width: 768px) {

  .xpl-content-area-wrapper__wide .xpl-content-area {
    padding: 2rem
  }
}

.xpl-content-area-wrapper__narrow {
    grid-template-areas: ". content .";
    grid-template-columns: minmax(15%, auto) minmax(auto, 840px) minmax(15%, auto);
  }

.xpl-content-area-wrapper__narrow .xpl-content-area {
  grid-column: span 1 / span 1;
  grid-column-start: 2;
  padding-top: 5rem;
  padding-bottom: 5rem
}

@media (max-width: 1023px) {

.xpl-content-area-wrapper__narrow .xpl-content-area {
    grid-template-columns: none;
    padding: 0px
  }

.xpl-content-area-wrapper__narrow {
    grid-template-columns: none;
    grid-template-rows: none;
    padding: 1.5rem
  }
      }

.xpl-content-area-wrapper__narrow {
  display: grid;
  grid-auto-flow: column;
  justify-items: center
}

.xpl-content-area-wrapper__full {
  max-width: none;
  padding: 1.5rem
}

@media (min-width: 640px) {

  .xpl-content-area-wrapper__full {
    padding: 2rem
  }
}

@media (min-width: 1024px) {

  .xpl-content-area-wrapper__full {
    padding: 0px
  }
}

.dark .xpl-content-area-wrapper {
  background-color: var(--xpl-color-background-dm);
  color: var(--xpl-color-text-primary-dm);
}

.xpl-dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem
}

/* stylelint-disable color-no-hex, function-disallowed-list -- TODO: migrate to var(--xpl-*) tokens (see TECH_DEBT.md) */

.xpl-data-card {
  background-color: var(--xpl-color-foreground-lm);
  border-color: var(--xpl-color-stroke-lm);
  color: var(--xpl-color-text-primary-lm);
  container-name: card;
  container-type: inline-size;
  flex-basis: 21%;
  position: relative;
  display: flex;
  min-width: 10.875rem;
  max-width: 37rem;
  flex-grow: 1;
  flex-direction: column;
  border-radius: 0.375rem;
  border-width: 1px;
  padding: 1rem;
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .xpl-data-card {
    background-color: var(--xpl-color-foreground-dm);
    border-color: var(--xpl-color-stroke-dm);
    color: var(--xpl-color-text-primary-dm);
  }

.xpl-data-card__anchor {
    border-color: var(--xpl-color-stroke-lm);
    border-radius: 0.375rem;
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    height: 100%;
    width: 100%;
  }

.xpl-data-card__anchor span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0
}

.xpl-data-card__anchor:active {
      border-color: var(--xpl-color-secondary-lm);
    }

.xpl-data-card__anchor:hover {
      border-radius: var(--border-radius-default, 8px);
      border: 1px solid var(--border-hover, #6923f4);
      box-shadow:
        0 4px 6px -1px rgb(48 45 59 / 0.1),
        0 2px 4px -1px rgb(48 45 59 / 0.05);
    }

.xpl-data-card__anchor:focus {
      border-radius: var(--border-radius-default, 8px);
      border: 1px solid var(--xpl-color-primary-lm);
      outline-color: var(--xpl-color-stroke-lm);
    }

.dark .xpl-data-card__anchor:focus {
        border-color: var(--xpl-color-secondary-dm);
      }

.xpl-data-card__header {
    color: var(--xpl-color-text-primary-lm);
    margin-bottom: var(--xpl-size-spacing-4);
  }

.dark .xpl-data-card__header {
      color: var(--xpl-color-text-primary-dm);
    }

.xpl-data-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
}

.xpl-data-card__header {
    font-size: var(--xpl-font-size-title-5);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.4286;
}

.xpl-data-card__header header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  align-self: stretch
}

.xpl-data-card__header [slot="title"] {
  display: flex;
  align-items: center
}

.xpl-data-card__header .xpl-icon {
      margin-left: 6px; /* TODO: Replace with --xpl-size-spacing-6 when available in Apollo Foundations */
    }

.dark .xpl-data-card__header-arrow {
    color: var(--xpl-color-text-primary-dm);
  }

.xpl-data-card [class^="xpl-data-card__icon"] {
    margin-right: 6px; /* TODO: Replace with --xpl-size-spacing-6 when available in Apollo Foundations */
  }

.xpl-data-card__icon--primary .xpl-icon {
      color: var(--xpl-color-primary-lm);
    }

.dark .xpl-data-card__icon--secondary {
      color: var(--xpl-color-secondary-dm);
    }

.xpl-data-card__icon--secondary .xpl-icon {
      color: var(--xpl-color-secondary-lm);
    }

.dark .xpl-data-card__icon--primary .xpl-icon {
    color: var(--xpl-color-primary-dm);
  }

.dark .xpl-data-card__icon--secondary .xpl-icon {
    color: var(--xpl-color-primary-dm);
  }

.xpl-data-card__body {
  margin-inline-start: 0px;
  display: flex;
  height: 100%;
  width: calc(100% - 16px);
  gap: 0.375rem
}

.xpl-data-card__left,
  .xpl-data-card__right {
  display: flex;
  flex: 1 1 50%
}

.xpl-data-card__left {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  align-items: stretch
}

.xpl-data-card__left > * {
      width: 100%;
    }

.xpl-data-card-stat--small {
  font-size: var(--xpl-font-size-callout);
  font-weight: var(--xpl-font-weight-semibold);
  line-height: 1.3333;
  }

.xpl-data-card-stat--small {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

.xpl-data-card-stat--short abbr[title] {
      text-decoration: none;
    }

.xpl-data-card-stat--long,
  .xpl-data-card-stat--short {
    margin-bottom: var(--xpl-size-spacing-4);
  }

.xpl-data-card-stat--long,
  .xpl-data-card-stat--short {
    font-size: var(--xpl-font-size-display-3);
    font-weight: var(--xpl-font-weight-semibold);
    line-height: 1.2;
  }

.dark .xpl-data-card-stat--long, .dark .xpl-data-card-stat--short {
      color: var(--xpl-color-text-primary-dm);
    }

.xpl-data-card__detail {
    color: var(--xpl-color-text-secondary-lm);
  }

.xpl-data-card__detail {
  font-size: var(--xpl-font-size-callout);
  font-weight: normal;
  line-height: 1.3333;
  }

.xpl-data-card__detail {

    align-self: flex-end;
  }

.dark .xpl-data-card__detail {
      color: var(--xpl-color-text-primary-dm);
    }

.xpl-data-card .positive {
    color: var(--xpl-text-positive);
  }

.xpl-data-card .negative {
    color: var(--xpl-text-negative);
  }

.xpl-data-card .neutral {
    color: var(--xpl-color-neutral-lm);
  }

@media (max-width: 640px) {
  .xpl-data-card {
    flex-basis: 42%;
  }
}

@container card (max-width: 212px) {
  .xpl-data-card dd {
    font-size: var(--xpl-size-font-title-2);
  }
}

@container card (max-width: 441px) {
  .xpl-data-card-stat--long {
    display: none
  }

.flatpickr-day.xpl-data-card-stat--long{visibility:hidden}

.xpl-toolbar.xpl-data-card-stat--long {
  display: none;
}
}

@container card (min-width: 441px) {
  .xpl-data-card-stat--short {
    display: none
  }

.flatpickr-day.xpl-data-card-stat--short{visibility:hidden}

.xpl-toolbar.xpl-data-card-stat--short {
  display: none;
}
}

/* stylelint-disable color-no-hex, function-disallowed-list -- TODO: migrate to var(--xpl-*) tokens (see TECH_DEBT.md) */

.xpl-large-card {
  background-color: var(--xpl-color-foreground-lm);
  border-color: var(--xpl-color-stroke-lm);
  color: var(--xpl-color-text-primary-lm);
  container-name: card;
  container-type: inline-size;
  position: relative;
  display: flex;
  min-width: 23.125rem;
  flex-grow: 1;
  flex-direction: column;
  border-radius: 0.375rem;
  border-width: 1px;
  padding: 1.5rem;
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .xpl-large-card {
    background-color: var(--xpl-color-foreground-dm);
    border-color: var(--xpl-color-stroke-dm);
    color: var(--xpl-color-text-primary-dm);
  }

.xpl-large-card__anchor {
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
  height: 100%;
  width: 100%
}

.xpl-large-card__anchor span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0
}

.xpl-large-card__anchor:active {
      border-color: var(--xpl-color-secondary-lm);
    }

.xpl-large-card__anchor:hover {
      border-radius: var(--border-radius-default, 8px);
      border: 1px solid var(--border-hover, #6923f4);
      box-shadow:
        0 4px 6px -1px rgb(48 45 59 / 0.1),
        0 2px 4px -1px rgb(48 45 59 / 0.05);
    }

.xpl-large-card__anchor:focus {
      border-radius: var(--border-radius-default, 8px);
      border: 1px solid var(--xpl-color-primary-lm);
      outline-color: var(--xpl-color-stroke-lm);
    }

.dark .xpl-large-card__anchor:focus {
        border-color: var(--xpl-color-secondary-dm);
      }

.xpl-large-card__header {
    color: var(--xpl-color-text-primary-lm);
    margin-bottom: var(--xpl-size-spacing-4);
  }

.dark .xpl-large-card__header {
      color: var(--xpl-color-text-primary-dm);
    }

.xpl-large-card__header {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.xpl-large-card__header {
    font-size: var(--xpl-font-size-title-4);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.5;
}

.xpl-large-card__header header {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch
}

.xpl-large-card__header [slot="title"] {
  display: flex;
  align-items: center
}

.xpl-large-card__header [slot="title"] xpl-tooltip {
        margin-left: var(--xpl-size-spacing-8);
      }

.dark .xpl-large-card__header-arrow {
    color: var(--xpl-color-text-primary-dm);
  }

.xpl-large-card__description {
    color: var(--xpl-color-text-secondary-lm);
  }

.xpl-large-card__description {
  font-size: var(--xpl-font-size-body);
  font-weight: var(--xpl-font-weight-normal);
  line-height: 1.4286;
  }

.xpl-large-card__description {

    align-self: flex-end;
  }

.dark .xpl-large-card__description {
      color: var(--xpl-color-text-primary-dm);
    }

.xpl-large-card [class^="xpl-large-card__icon"] {
    margin-right: 6px; /* TODO: Replace with --xpl-size-spacing-6 when available in Apollo Foundations */
  }

.xpl-large-card__icon--primary .xpl-icon {
      color: var(--xpl-color-primary-lm);
    }

.dark .xpl-large-card__icon--secondary {
      color: var(--xpl-color-secondary-dm);
    }

.xpl-large-card__icon--secondary .xpl-icon {
      color: var(--xpl-color-secondary-lm);
    }

.dark .xpl-large-card__icon--primary .xpl-icon {
    color: var(--xpl-color-primary-dm);
  }

.dark .xpl-large-card__icon--secondary .xpl-icon {
    color: var(--xpl-color-primary-dm);
  }

.xpl-large-card__body {
  margin-inline-start: 0px;
  display: flex;
  height: 100%;
  width: 100%;
  gap: 0.375rem
}

.xpl-divider {
  border-bottom-width: var(--xpl-border-small);
  border-bottom-style: solid;
  border-bottom-color: var(--xpl-border-default);
  color: var(--xpl-text-default);
  font-size: var(--xpl-font-size-body);
  margin-bottom: var(--xpl-space-16);
  padding-bottom: var(--xpl-space-4);
  display: block;
}

.xpl-divider--3 {
    font-size: var(--xpl-font-size-title-3);
    font-weight: var(--xpl-font-weight-bold);
    line-height: 1.4;
}

.xpl-divider--2 {
    font-size: var(--xpl-font-size-title-4);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.5;
}

.xpl-divider--1 {
    font-size: var(--xpl-font-size-title-5);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.4286;
}

.xpl-divider--0 {
  padding-bottom: var(--xpl-space-0);
}

.xpl-divider--0 span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0
}

.xpl-dropdown {
  pointer-events: none;
  position: absolute;
  width: 100%;
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  overflow: hidden;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(225 226 232 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  opacity: 0;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}

.dark .xpl-dropdown {
  --tw-border-opacity: 1;
  border-color: rgb(106 109 125 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(48 45 59 / var(--tw-bg-opacity, 1))
}

.xpl-dropdown--open {
  pointer-events: auto;
  z-index: 50;
  --tw-translate-y: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1
}

/* @floating/ui now calculates the position for the dropdown */

.xpl-dropdown--anchor-to-trigger {
    will-change: transform;

    /* Cancel base `-translate-y-2` / `--open` `translate-y-2`; Floating UI owns `transform`. */

    position: fixed;

    margin: 0px;

    transform: none;
  }

.xpl-dropdown--above {
  margin-top: 0px;
  margin-bottom: 0.25rem
}

.xpl-dropdown--anchor-to-trigger.xpl-dropdown--above {
  margin: 0px
}

.xpl-dropdown-list {
  --xpl-dropdown-list-max-height: 300px;

  max-height: var(--xpl-dropdown-list-max-height);

  height: 100%;

  overflow-y: auto;
}

.xpl-dropdown-list-item {
  list-style: none;
}

.xpl-dropdown__virtual-sizer {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

.xpl-dropdown-option {
  color: var(--xpl-text-default);
  display: block;
  width: 100%;
  cursor: pointer;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.xpl-dropdown--virtualized .xpl-dropdown-option {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
  }

/*
   * Static positioning/sizing for virtualized rows (the per-row `translateY`
   * offset stays inline in `renderOption`).
   *
   * NOTE: `height` must stay in sync with `VIRTUAL_LIST.rowHeight` in
   * xpl-dropdown.tsx — the scroll math positions each row at
   * `index * rowHeight`, so a mismatch here would misalign the rows.
   */

.xpl-dropdown-option--virtual {
    height: 45px;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100%;
  }

.dark .xpl-dropdown-option {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.xpl-dropdown-option:not(.xpl-dropdown-option--disabled):focus {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px
}

.xpl-dropdown-option:not(.xpl-dropdown-option--disabled):hover {
      background-color: var(--xpl-color-secondary-bg-lm);
    }

.xpl-dropdown-option--disabled,
    .xpl-dropdown-option--disabled [disabled] {
      touch-action: none;
      pointer-events: none;
    }

.xpl-dropdown-option--disabled {
  cursor: not-allowed;
  opacity: 0.6
}

.xpl-dropdown-option--selected {
    background-color: var(--xpl-color-secondary-bg-lm);
    border-right: 4px solid var(--xpl-color-secondary-lm);
  }

.dark .xpl-dropdown-option:not(.xpl-dropdown-option--disabled):focus {
  --tw-bg-opacity: 1;
  background-color: rgb(41 38 50 / var(--tw-bg-opacity, 1));
  outline: 2px solid transparent;
  outline-offset: 2px
}

.dark .xpl-dropdown-option:not(.xpl-dropdown-option--disabled):hover {
  --tw-bg-opacity: 1;
  background-color: rgb(24 22 31 / var(--tw-bg-opacity, 1))
}

.dark .xpl-dropdown-option--selected {
    border-right: 4px solid var(--xpl-color-secondary-dm);
    --tw-bg-opacity: 1;
    background-color: rgb(24 22 31 / var(--tw-bg-opacity, 1));
  }

.xpl-dropdown-list-item__subtitle {
  display: block;
  font-size: var(--xpl-size-font-caption);
  color: var(--xpl-color-gray-600);
}

.xpl-dropdown.xpl-dropdown--multi .xpl-dropdown-option--selected {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 6C12 9.31372 9.31372 12 6 12C2.68628 12 0 9.31372 0 6C0 2.68628 2.68628 0 6 0C9.31372 0 12 2.68628 12 6ZM5.30598 9.17695L9.7576 4.72534C9.90876 4.57418 9.90876 4.32907 9.7576 4.17791L9.21017 3.63048C9.05901 3.4793 8.8139 3.4793 8.66272 3.63048L5.03226 7.26092L3.33728 5.56594C3.18612 5.41478 2.94102 5.41478 2.78983 5.56594L2.2424 6.11337C2.09124 6.26453 2.09124 6.50964 2.2424 6.6608L4.75853 9.17693C4.90972 9.32811 5.1548 9.32811 5.30598 9.17695V9.17695Z' fill='%236923F4'/%3E%3C/svg%3E%0A");
  background-position: calc(100% - 16px) center;
  background-repeat: no-repeat;
}

.dark .xpl-dropdown.xpl-dropdown--multi .xpl-dropdown-option--selected {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 6C12 9.31372 9.31372 12 6 12C2.68628 12 0 9.31372 0 6C0 2.68628 2.68628 0 6 0C9.31372 0 12 2.68628 12 6ZM5.30598 9.17695L9.7576 4.72534C9.90876 4.57418 9.90876 4.32907 9.7576 4.17791L9.21017 3.63048C9.05901 3.4793 8.8139 3.4793 8.66272 3.63048L5.03226 7.26092L3.33728 5.56594C3.18612 5.41478 2.94102 5.41478 2.78983 5.56594L2.2424 6.11337C2.09124 6.26453 2.09124 6.50964 2.2424 6.6608L4.75853 9.17693C4.90972 9.32811 5.1548 9.32811 5.30598 9.17695V9.17695Z' fill='%23C3ADFF'/%3E%3C/svg%3E%0A");
  }

.xpl-dropdown.xpl-dropdown--multi .xpl-dropdown-option--selected {
  border-width: 0px
}

.dark .xpl-dropdown-heading {
  --tw-border-opacity: 1;
  border-color: rgb(106 109 125 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(153 155 168 / var(--tw-text-opacity, 1))
}

.xpl-dropdown-heading {
  display: block;
  width: 100%;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(225 226 232 / var(--tw-border-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(106 109 125 / var(--tw-text-opacity, 1))
}

.xpl-dynamic-table {
  display: grid
}

.xpl-dynamic-table > * {
  display: grid;

  grid-template-columns: var(--column-widths)
}

.xpl-dynamic-table-cell {
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-color: var(--xpl-color-gray-400);
  vertical-align: middle;
  display: flex;
  height: 3.5rem;
  min-width: 3rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: break-word;
  padding: 1rem;
  text-align: left;

  background-color: var(--xpl-color-foreground-lm);
  color: var(--xpl-color-text-primary-lm);
  font-size: var(--xpl-size-font-title-5);
  font-weight: var(--xpl-font-weight-medium)
}

.xpl-dynamic-table-cell .xpl-checkbox-radio-container {
  margin-bottom: 0.25rem
}

.xpl-dynamic-table-cell .xpl-checkbox-radio-container .xpl-label {
  padding: 0px
}

.xpl-dynamic-table-cell xpl-avatar {
  padding-right: 0.5rem
}

.xpl-dynamic-table-cell button[dropdown] {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  outline: 2px solid transparent;
  outline-offset: 2px
}

.xpl-dynamic-table-cell button[dropdown] xpl-icon {
  margin-left: 0.5rem
}

.xpl-dynamic-table-cell button[dropdown]:focus {
      box-shadow: inset 0 0 0 1px var(--xpl-color-purple-700);
    }

.xpl-dynamic-table-cell button[dropdown]:disabled {
      cursor: not-allowed;
    }

.xpl-dynamic-table-cell span:not(button[dropdown] span) {
  margin-right: auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-wrap: wrap;
  overflow-wrap: break-word
}

.dark .xpl-dynamic-table-cell {
  border-color: var(--xpl-color-gray-600);

  background-color: var(--xpl-color-foreground-dm);
  color: var(--xpl-color-gray-50)
}

.dark .xpl-dynamic-table-cell button[dropdown] {
  display: flex;
  align-items: center;
  justify-content: center
}

.dark .xpl-dynamic-table-cell button[dropdown]:focus {
      box-shadow: inset 0 0 0 1px var(--xpl-color-purple-500);
    }

.xpl-dynamic-table-cell:has(button[dropdown]) {
  padding: 0;
}

.xpl-dynamic-table-row {
  display: contents
}

.xpl-dynamic-table-row > *:first-child {
  border-left-width: 1px;
  border-color: var(--xpl-color-gray-400)
}

.xpl-dynamic-table-row.selected .xpl-dynamic-table-cell {
    background-color: var(--xpl-color-purple-50);
  }

.xpl-dynamic-table-row.disabled .xpl-dynamic-table-cell {
    background-color: var(--xpl-color-gray-50);
    color: var(--xpl-color-gray-500);
  }

.dark .xpl-dynamic-table-row > *:first-child {
  border-color: var(--xpl-color-gray-600)
}

.dark .xpl-dynamic-table-row.selected .xpl-dynamic-table-cell {
    background-color: var(--xpl-color-gray-700);
  }

.dark .xpl-dynamic-table-row.disabled .xpl-dynamic-table-cell {
    background-color: var(--xpl-color-gray-900);
    color: var(--xpl-color-gray-500);
  }

.dark .xpl-dynamic-table-row.disabled .xpl-dynamic-table-cell .xpl-badge {
      color: var(--xpl-color-gray-500);
    }

/* stylelint-disable selector-class-pattern */

/* stylelint-disable selector-nested-pattern */

/* Flatpickr overrides */

[class^="flatpickr-"] {
  font-family: var(--xpl-font-family-default);
}

@keyframes fpFadeInDown {
  from {
    transform: translate3d(-13px, -20px, 0);
    opacity: 0;
  }

  to {
    transform: translate3d(-13px, 8px, 0);
    opacity: 1;
  }
}

@keyframes fpFadeInDownAdjust {
  from {
    transform: translate3d(-13px, -28px, 0);
    opacity: 0;
  }

  to {
    transform: translate3d(-13px, -8px, 0);
    opacity: 1;
  }
}

.flatpickr-calendar {
  background-color: var(--xpl-background-surface-default);
  border-color: var(--xpl-border-default);
  border-width: var(--xpl-border-small);
  border-style: solid;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.flatpickr-calendar::before,
  .flatpickr-calendar::after {
  display: none !important
}

.flatpickr-calendar.animate.arrowTop {
    transform: translate3d(-13px, 8px, 0);
  }

.flatpickr-calendar.animate.arrowBottom {
    animation-name: fpFadeInDownAdjust;
    transform: translate3d(-13px, -8px, 0);
  }

.flatpickr-days {
  width: 100%
}

.dayContainer {
  width: 100%;
  min-width: 100%;
  max-width: 100%
}

.flatpickr-months {
  padding: 0.5rem
}

.flatpickr-months .flatpickr-month {
    height: var(--xpl-size-250);
    background-color: var(--xpl-background-surface-subtlest);
  }

.flatpickr-months .flatpickr-prev-month,
  .flatpickr-months .flatpickr-next-month {
    height: var(--xpl-size-250);
    top: 0.5rem;
    box-sizing: border-box;
    padding-top: 0.75rem;
  }

/* flatpickr applies both classes to the same node; the doubled class is a specificity quirk it relies on */

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
  left: 75%
}

.flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
  right: 0.5rem
}

.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover {
      background-color: var(--xpl-background-action-secondary-hover);
    }

.flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path {
      fill: var(--xpl-icon-default);
    }

.flatpickr-months .flatpickr-prev-month:hover path, .flatpickr-months .flatpickr-next-month:hover path {
      fill: var(--xpl-text-link-hovered);
    }

.flatpickr-current-month {
  height: var(--xpl-size-250);
  left: 0px;
  padding: 0px;
  text-align: left;
  font-size: 100%;
  font-size: 1rem;
  line-height: 1.5rem;
}

/* Figma source of truth: calendar month/year header uses Title/4 (title-4 / medium / 1.5) */

.flatpickr-current-month .flatpickr-monthDropdown-months,
  .flatpickr-current-month input.cur-year {
    color: var(--xpl-text-default);
    height: var(--xpl-size-250);
  }

.flatpickr-current-month .flatpickr-monthDropdown-months,
  .flatpickr-current-month input.cur-year {
    font-size: var(--xpl-font-size-title-4);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.5;
  }

.flatpickr-current-month .flatpickr-monthDropdown-months:hover, .flatpickr-current-month input.cur-year:hover {
      background-color: var(--xpl-background-action-secondary-hover);
    }

.flatpickr-current-month .flatpickr-monthDropdown-months {
  margin: 0px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0.5rem
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
      color: var(--xpl-text-default);
    }

.flatpickr-current-month input.cur-year {
  padding: 0.5rem;
  padding-right: 1rem
}

.flatpickr-current-month .numInputWrapper {
    width: var(--xpl-size-400);
  }

.flatpickr-current-month .numInputWrapper span.arrowUp::after {
      border-bottom-color: var(--xpl-icon-subdued);
      bottom: 2px;
      top: unset;
    }

.flatpickr-current-month .numInputWrapper span.arrowUp:hover::after {
      border-bottom-color: var(--xpl-icon-default);
    }

.flatpickr-current-month .numInputWrapper span.arrowDown::after {
      top: 2px;
      border-top-color: var(--xpl-icon-subdued);
    }

.flatpickr-current-month .numInputWrapper span.arrowDown:hover::after {
      border-top-color: var(--xpl-icon-default);
    }

.numInputWrapper:hover {
    background-color: var(--xpl-background-action-secondary-hover);
  }

.numInputWrapper span {
    border-width: var(--xpl-border-none);
  }

.numInputWrapper span:hover {
      background-color: var(--xpl-background-action-secondary-active);
    }

.flatpickr-day {
  color: var(--xpl-text-default);

  /* Figma source of truth: day numbers use Body/Default (body / normal). */
  font-size: var(--xpl-font-size-body);
  font-weight: var(--xpl-font-weight-normal);

  /*
   * Not @extend .xpl-text-body: flatpickr centers day text vertically via
   * line-height (the day cell is a block element, not flex), so this 2.3rem
   * value is layout (matches the cell height) rather than the Body/Default
   * typography ratio. Overriding it would break vertical centering.
   */

  line-height: 2.6286;
}

.flatpickr-day.flatpickr-disabled,
  .flatpickr-day.flatpickr-disabled:hover,
  .flatpickr-day.prevMonthDay,
  .flatpickr-day.nextMonthDay,
  .flatpickr-day.notAllowed,
  .flatpickr-day.notAllowed.prevMonthDay,
  .flatpickr-day.notAllowed.nextMonthDay {
    color: var(--xpl-text-disabled);
  }

.flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange,
  .flatpickr-day.selected.inRange,
  .flatpickr-day.startRange.inRange,
  .flatpickr-day.endRange.inRange,
  .flatpickr-day.selected:focus-visible,
  .flatpickr-day.startRange:focus-visible,
  .flatpickr-day.endRange:focus-visible,
  .flatpickr-day.selected:hover,
  .flatpickr-day.startRange:hover,
  .flatpickr-day.endRange:hover,
  .flatpickr-day.selected.prevMonthDay,
  .flatpickr-day.startRange.prevMonthDay,
  .flatpickr-day.endRange.prevMonthDay,
  .flatpickr-day.selected.nextMonthDay,
  .flatpickr-day.startRange.nextMonthDay,
  .flatpickr-day.endRange.nextMonthDay {
    background-color: var(--xpl-background-action-primary-default);
    border-color: var(--xpl-background-action-primary-default);
    color: var(--xpl-text-inverse);
  }

.flatpickr-day.inRange,
  .flatpickr-day.prevMonthDay.inRange,
  .flatpickr-day.nextMonthDay.inRange,
  .flatpickr-day.today.inRange,
  .flatpickr-day.prevMonthDay.today.inRange,
  .flatpickr-day.nextMonthDay.today.inRange,
  .flatpickr-day:hover,
  .flatpickr-day.prevMonthDay:hover,
  .flatpickr-day.nextMonthDay:hover,
  .flatpickr-day:focus-visible,
  .flatpickr-day.prevMonthDay:focus-visible,
  .flatpickr-day.nextMonthDay:focus-visible {
    background-color: var(--xpl-background-brand-secondary-surface);
    border-color: var(--xpl-background-brand-secondary-surface);
    color: var(--xpl-text-default);
  }

.flatpickr-day.inRange {
    box-shadow:
      -5px 0 0 var(--xpl-background-brand-secondary-surface),
      5px 0 0 var(--xpl-background-brand-secondary-surface);
  }

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
  .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
  .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
    box-shadow: -10px 0 0 var(--xpl-background-brand-secondary-surface);
  }

.flatpickr-day.today {
    border-color: var(--xpl-border-default);
    border-width: var(--xpl-border-small);
    border-radius: 50%;
    border-style: solid;
  }

.rangeMode .flatpickr-day {
  margin-top: 0px
}

span.flatpickr-weekday {
  color: var(--xpl-text-default);

  /* Figma source of truth: weekday labels use Callout/Bold (callout / semibold / 1.3333) */
}

span.flatpickr-weekday {
  font-size: var(--xpl-font-size-callout);
  font-weight: var(--xpl-font-weight-semibold);
  line-height: 1.3333;
}

.xpl-grid {
  display: flex;
  width: 100%;
  flex-wrap: wrap
}

.xpl-grid-item {
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
  flex-shrink: 0
}

@media screen and (max-width: 639px) {
  .xpl-grid-item-xs-1 {
    flex: 0 0 calc(16.667% - 20px);
  }

  .xpl-grid-item-xs-2 {
    flex: 0 0 calc(33.333% - 16px);
  }

  .xpl-grid-item-xs-3 {
    flex: 0 0 calc(50% - 12px);
  }

  .xpl-grid-item-xs-4 {
    flex: 0 0 calc(66.667% - 8px);
  }

  .xpl-grid-item-xs-5 {
    flex: 0 0 calc(83.333% - 4px);
  }

  .xpl-grid-item-xs-6 {
    flex: 0 0 100%;
  }

  .xpl-grid-item-xs-last {
    margin-right: 0px
  }
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
  .xpl-grid-item-sm-1 {
    flex: 0 0 calc(16.667% - 20px);
  }

  .xpl-grid-item-sm-2 {
    flex: 0 0 calc(33.333% - 16px);
  }

  .xpl-grid-item-sm-3 {
    flex: 0 0 calc(50% - 12px);
  }

  .xpl-grid-item-sm-4 {
    flex: 0 0 calc(66.667% - 8px);
  }

  .xpl-grid-item-sm-5 {
    flex: 0 0 calc(83.333% - 4px);
  }

  .xpl-grid-item-sm-6 {
    flex: 0 0 100%;
  }

  .xpl-grid-item-sm-last {
    margin-right: 0px
  }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .xpl-grid-item-md-1 {
    flex: 0 0 calc(16.667% - 20px);
  }

  .xpl-grid-item-md-2 {
    flex: 0 0 calc(33.333% - 16px);
  }

  .xpl-grid-item-md-3 {
    flex: 0 0 calc(50% - 12px);
  }

  .xpl-grid-item-md-4 {
    flex: 0 0 calc(66.667% - 8px);
  }

  .xpl-grid-item-md-5 {
    flex: 0 0 calc(83.333% - 4px);
  }

  .xpl-grid-item-md-6 {
    flex: 0 0 100%;
  }

  .xpl-grid-item-md-last {
    margin-right: 0px
  }
}

@media screen and (min-width: 1280px) {
  .xpl-grid-item-lg-1 {
    flex: 0 0 calc(16.667% - 20px);
  }

  .xpl-grid-item-lg-2 {
    flex: 0 0 calc(33.333% - 16px);
  }

  .xpl-grid-item-lg-3 {
    flex: 0 0 calc(50% - 12px);
  }

  .xpl-grid-item-lg-4 {
    flex: 0 0 calc(66.667% - 8px);
  }

  .xpl-grid-item-lg-5 {
    flex: 0 0 calc(83.333% - 4px);
  }

  .xpl-grid-item-lg-6 {
    flex: 0 0 100%;
  }

  .xpl-grid-item-lg-last {
    margin-right: 0px
  }
}

.xpl-header-accordion {
  grid-column: 1 / -1;
}

.xpl-header-accordion .header-accordion {
  display: flex;
  min-height: 3.5rem;
  width: 100%;
  flex-direction: row;
  align-items: center;
  border-width: 1px;
  padding-left: 1rem;

    background-color: var(--xpl-color-background-lm);
    border-color: var(--xpl-color-gray-400);
    color: var(--xpl-color-text-secondary-lm);
    font-size: var(--xpl-size-font-title-5);
    font-weight: var(--xpl-font-weight-medium)
}

.xpl-header-accordion .header-accordion--collapsed {
  border-radius: 0.5rem
}

.xpl-header-accordion .header-accordion--expanded {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem
}

.xpl-header-accordion .header-accordion .xpl-checkbox-radio-container {
  margin-bottom: 0.25rem;
  margin-right: 1rem
}

.xpl-header-accordion .header-accordion .xpl-checkbox-radio-container .xpl-label {
  padding: 0px
}

.xpl-header-accordion .header-accordion .toggle-area {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  text-wrap: wrap;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 0px;
  padding-left: 1rem;
  text-align: left
}

.xpl-header-accordion .header-accordion .toggle-area:focus {
        outline-color: var(--xpl-color-secondary-lm);
      }

.xpl-header-accordion .header-accordion .toggle-area xpl-icon {
  margin-left: auto;
  margin-right: 1rem;

        color: var(--xpl-color-text-reverse-dm);
        transition: transform 0.2s
}

.xpl-header-accordion .header-accordion .toggle-area xpl-icon.rotate {
          transform: rotate(-180deg);
        }

.xpl-header-accordion .content--hidden {
  display: none
}

.flatpickr-day.xpl-header-accordion .content--hidden{visibility:hidden}

.xpl-toolbar.xpl-header-accordion .content--hidden {
  display: none;
}

.xpl-header-accordion .content--shown > * {
  display: grid;

    grid-template-columns: var(--column-widths)
}

.xpl-header-accordion .content {
  width: 100%;
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  border-left-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  padding: 1rem;
  --tw-text-opacity: 1;
  color: rgb(105 35 244 / var(--tw-text-opacity, 1));

    background-color: var(--xpl-color-foreground-lm);
    border-color: var(--xpl-color-gray-400)
}

.xpl-header-accordion ::slotted([slot="content"]) {
  display: grid;

    grid-template-columns: var(--column-widths)
}

.dark .xpl-header-accordion .header-accordion {
    background-color: var(--xpl-color-background-dm);
    border-color: var(--xpl-color-gray-600);
    color: var(--xpl-color-text-secondary-dm);
  }

.dark .xpl-header-accordion .header-accordion .toggle-area:focus {
        outline-color: var(--xpl-color-secondary-dm);
      }

.dark .xpl-header-accordion .header-accordion .toggle-area xpl-icon {
        color: var(--xpl-color-text-reverse-lm);
      }

.dark .xpl-header-accordion .content {
  --tw-text-opacity: 1;
  color: rgb(221 209 255 / var(--tw-text-opacity, 1));

    background-color: var(--xpl-color-foreground-dm);
    border-color: var(--xpl-color-gray-600)
}

.xpl-icon__wrapper {
  margin: 0px
}

.xpl-icon__wrapper--with-background--orange {
      background-color: var(--xpl-color-orange-50);
    }

.xpl-icon__wrapper--with-background--purple {
      background-color: var(--xpl-color-purple-50);
    }

.xpl-icon__wrapper--with-background--red {
      background-color: var(--xpl-color-red-50);
    }

.xpl-icon__wrapper--with-background--yellow {
      background-color: var(--xpl-color-yellow-50);
    }

.xpl-icon__wrapper--with-background--gray {
      background-color: var(--xpl-color-gray-50);
    }

.xpl-icon__wrapper--with-background {
  border-radius: 0.375rem;
  padding: 0.25rem
}

.xpl-icon__wrapper figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0
}

.dark .xpl-icon__wrapper--with-background--orange {
  background-color: var(--xpl-color-orange-900);
}

.dark .xpl-icon__wrapper--with-background--purple {
  background-color: var(--xpl-color-purple-900);
}

.dark .xpl-icon__wrapper--with-background--red {
  background-color: var(--xpl-color-red-900);
}

.dark .xpl-icon__wrapper--with-background--yellow {
  background-color: var(--xpl-color-yellow-900);
}

.dark .xpl-icon__wrapper--with-background--gray {
  background-color: var(--xpl-color-gray-900);
}

/* stylelint-disable selector-nested-pattern -- legacy file uses non-BEM nested selectors (e.g. `&-calendar` instead of `&__calendar`); refactor to BEM when migrating */

.xpl-input {
  position: relative;
  display: block
}

.xpl-input input {
    height: var(--xpl-size-250);
    padding-right: var(--xpl-space-8);
    background-color: var(--xpl-background-surface-transparent-0);
    display: block;
    width: 100%;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.25rem;
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

.xpl-input textarea {
    min-height: var(--xpl-size-250);
    height: var(--xpl-size-700);
    padding-top: var(--xpl-space-12);
    padding-bottom: var(--xpl-space-8);
    background-color: var(--xpl-background-surface-transparent-0);
    display: block;
    width: 100%;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.25rem;
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

.xpl-input input,
  .xpl-input textarea {
    color: var(--xpl-text-default);
  }

.xpl-input input:read-only:not(:disabled)::-moz-placeholder, .xpl-input textarea:read-only:not(:disabled)::-moz-placeholder {
      color: var(--xpl-text-default);
    }

.xpl-input input:-moz-read-only:not(:disabled)::placeholder, .xpl-input textarea:-moz-read-only:not(:disabled)::placeholder {
      color: var(--xpl-text-default);
    }

.xpl-input input:read-only:not(:disabled)::placeholder, .xpl-input textarea:read-only:not(:disabled)::placeholder {
      color: var(--xpl-text-default);
    }

.xpl-input--readonly input,
  .xpl-input--readonly textarea,
  .xpl-input--disabled input,
  .xpl-input--disabled textarea {
    color: var(--xpl-text-disabled);
  }

.xpl-input input:disabled,
  .xpl-input textarea:disabled {
    background-color: var(--xpl-background-surface-transparent-0);
    cursor: not-allowed;
  }

.xpl-input-calendar {
    right: var(--xpl-space-12);
    pointer-events: none;
    position: absolute;
  }

.xpl-input-label {
    padding-bottom: var(--xpl-space-4);
    color: var(--xpl-text-strong);
    display: block;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

.xpl-input-label small {
      color: var(--xpl-text-subdued);
      display: block;
      font-size: 0.75rem;
      line-height: 1rem;
    }

.xpl-input-characters {
    bottom: var(--xpl-space-0);
    color: var(--xpl-text-subdued);
    padding: var(--xpl-space-8) var(--xpl-space-12);
    right: var(--xpl-space-0);
    pointer-events: none;
    position: absolute;
    display: block;
    font-size: 0.75rem;
    line-height: 1rem;
  }

.xpl-input-error {
    padding: var(--xpl-space-4);
    gap: var(--xpl-space-4);
    color: var(--xpl-text-negative);
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    line-height: 1rem;
  }

.xpl-input-wrapper {
    padding-left: var(--xpl-space-12);
    background-color: var(--xpl-background-surface-default);
    border-width: var(--xpl-border-small);
    border-color: var(--xpl-border-default);
    border-radius: var(--xpl-border-radius-small);
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-style: solid;
  }

.xpl-input-wrapper:focus-within {
      border-color: var(--xpl-border-focus);
    }

.xpl-input-post {
    height: var(--xpl-size-250);
    padding-left: var(--xpl-space-12);
    padding-right: var(--xpl-space-12);
    background-color: var(--xpl-background-surface-subtle);
    border-left-width: var(--xpl-border-small);
    border-color: var(--xpl-border-default);
    color: var(--xpl-text-subdued);
    display: flex;
    flex-shrink: 0;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

.xpl-input-pre {
    padding-right: var(--xpl-space-8);
    color: var(--xpl-text-subdued);
    display: flex;
    flex-shrink: 0;
    align-items: center;
  }

.xpl-input-pre--hidden {
      width: var(--xpl-size-0);
      min-width: var(--xpl-size-0);
      padding: var(--xpl-space-0);
      display: none;
      overflow: hidden;
    }

.flatpickr-day.xpl-input-pre--hidden{visibility:hidden}

.xpl-toolbar.xpl-input-pre--hidden {
  display: none;
}

.xpl-input--readonly .xpl-input-wrapper,
  .xpl-input--disabled .xpl-input-wrapper {
    background-color: var(--xpl-background-action-disabled);
  }

.xpl-input--readonly .xpl-input-post,
  .xpl-input--disabled .xpl-input-post {
    background-color: var(--xpl-background-surface-transparent-0);
  }

.xpl-input--disabled .xpl-input-label {
  cursor: not-allowed
}

.xpl-input--disabled .xpl-input-wrapper {
  cursor: not-allowed
}

.xpl-input--error .xpl-input-wrapper {
    border-color: var(--xpl-border-negative);
  }

.xpl-input--error .xpl-input-characters {
    color: var(--xpl-text-negative);
  }

.xpl-input-wrapper:focus-within .xpl-input-post {
    border-left-color: var(--xpl-border-focus);
  }

button[class^="xpl-input-password"] {
  top: var(--xpl-space-0);
  right: var(--xpl-space-0);
  padding-left: var(--xpl-space-12);
  padding-right: var(--xpl-space-12);
  position: absolute;
  height: 100%;
  cursor: pointer;
}

.xpl-input-calendar,
[class^="xpl-input-password"] xpl-icon {
  color: var(--xpl-icon-default);
}

.xpl-input-color__display {
    height: var(--xpl-size-250);
    border-color: var(--xpl-color-gray-400);
    position: relative;
    display: flex;
    width: 280px;
    min-width: 200px;
    cursor: pointer;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    border-radius: 0.375rem;
    border-width: 1px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

.dark .xpl-input-color__display {
      border-color: var(--xpl-color-gray-600);
      color: var(--xpl-color-gray-0);
    }

.xpl-input-color__display--disabled {
      background-color: var(--xpl-color-gray-100);
      pointer-events: none;
      cursor: not-allowed;
    }

.dark .xpl-input-color__display--disabled {
        background-color: var(--xpl-color-gray-800);
      }

.xpl-input-color__display--error {
      border-color: var(--xpl-color-red-500);
    }

.dark .xpl-input-color__display--error {
        border-color: var(--xpl-color-red-400);
      }

.xpl-input-color__icon {
    color: var(--xpl-color-gray-1000);
    transition-property: opacity;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

.xpl-input-color__icon:hover {
      color: var(--xpl-color-secondary-lm);
    }

.dark .xpl-input-color__icon:hover {
        color: var(--xpl-color-secondary-dm);
      }

.xpl-input-color__color {
    border-color: var(--xpl-color-gray-400);
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
    border-radius: 0.25rem;
    border-width: 1px;
  }

.xpl-input-color__placeholder {
    color: var(--xpl-color-gray-600);
    flex-grow: 1;
  }

.xpl-input-color__value {
  flex-grow: 1
}

.xpl-input-color__menu {
  display: flex;
  width: 18rem;
  flex-direction: column;
  gap: 0.5rem
}

.xpl-input-color__inputs {
  display: flex;
  gap: 0.25rem
}

.xpl-input-color__inputs > *:first-child {
  flex-shrink: 0;
  flex-basis: 5rem
}

.xpl-input-color__inputs .xpl-input-wrapper {
  padding-left: 0.5rem
}

.xpl-input-color__slider {
  margin-bottom: 1rem;
  height: 1rem;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0.25rem;
  outline: 2px solid transparent;
  outline-offset: 2px
}

.xpl-input-color__sl-grid {
    border-color: var(--xpl-color-gray-400);
    position: relative;
    height: 10rem;
    cursor: crosshair;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    border-radius: 0.25rem;
    border-width: 1px;
  }

.xpl-input-color__sl-thumb {
    transform: translate(-50%, -50%);
    border-color: var(--xpl-color-gray-0);
    box-shadow:
      0 0 0 1.5px var(--xpl-color-gray-0),
      inset 0 0 1px 1px var(--xpl-color-gray-600),
      0 0 1px 2px var(--xpl-color-gray-600);
    pointer-events: none;
    position: absolute;
    height: 0.75rem;
    width: 0.75rem;
    border-radius: 9999px;
    border-width: 2px;
  }

.xpl-input-color__grid {
    grid-template-areas: "preview hue" "preview alpha";
    grid-template-columns: 40px 1fr;
    display: grid;
    gap: 0.5rem;
    border-radius: 0.25rem;
  }

.xpl-input-color__grid input {
  position: relative;
  height: 1rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 9999px;
  background-color: transparent;
  padding: 0px
}

/* Webkit Range Track */

.xpl-input-color__grid input::-webkit-slider-runnable-track {
        border-color: var(--xpl-color-gray-200);
        border-radius: 9999px;
        border-width: 1px;
        border-style: solid;
        background-color: transparent;
      }

/* Webkit Range Thumb */

.xpl-input-color__grid input::-webkit-slider-thumb {
        border-color: var(--xpl-color-gray-0);
        box-shadow:
          inset 0 0 1px 1px var(--xpl-color-gray-600),
          0 0 1px 1px var(--xpl-color-gray-600);
        box-sizing: border-box;
        height: 1rem;
        width: 1rem;
        -webkit-appearance: none;
                appearance: none;
        border-radius: 9999px;
        border-width: 4px;
        border-style: solid;
        background-color: transparent;
        padding: 0px;
      }

/* Firefox Range Track */

.xpl-input-color__grid input::-moz-range-track {
        border-color: var(--xpl-color-gray-200);
        height: 1rem;
        border-radius: 9999px;
        border-width: 1px;
        border-style: solid;
        background-color: transparent;
      }

/* Firefox Range Thumb */

.xpl-input-color__grid input::-moz-range-thumb {
        border-color: var(--xpl-color-gray-0);
        box-shadow:
          inset 0 0 1px 1px var(--xpl-color-gray-600),
          0 0 1px 1px var(--xpl-color-gray-600);
        box-sizing: border-box;
        height: 1rem;
        width: 1rem;
        -moz-appearance: none;
             appearance: none;
        border-radius: 9999px;
        border-width: 4px;
        border-style: solid;
        background-color: transparent;
        padding: 0px;
      }

.xpl-input-color__hue {
    grid-area: hue;
    background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red);
  }

.xpl-input-color__alpha {
    grid-area: alpha;
    background-size:
      100% 100%,
      8px 8px,
      8px 8px,
      8px 8px,
      8px 8px;
    background-position:
      0 0,
      0 0,
      0 4px,
      4px -4px,
      -4px 0;
    position: relative;
    height: 1rem;
    background-repeat: repeat;
  }

.xpl-input-color__preview {
    grid-area: preview;
    border-color: var(--xpl-color-gray-200);
    height: 2.5rem;
    border-radius: 0.125rem;
    border-width: 1px;
    border-style: solid;
  }

.xpl-input-date--flatpickr-static .xpl-input-wrapper {
  overflow: visible
}

.xpl-input-date--mode-range .xpl-input-wrapper {
  min-width: 15rem
}

.xpl-input-date--error .xpl-input-wrapper {
    border-color: var(--xpl-border-negative);
  }

.xpl-input-file {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem
}

.xpl-input-file__trigger-wrapper {
  display: flex
}

.xpl-input-file__trigger-wrapper--input {
  position: relative;
  width: 100%
}

.xpl-input-file__trigger-wrapper--hidden {
  display: none
}

.flatpickr-day.xpl-input-file__trigger-wrapper--hidden{visibility:hidden}

.xpl-toolbar.xpl-input-file__trigger-wrapper--hidden {
  display: none;
}

.xpl-input-file--disabled .xpl-input-file__trigger-wrapper {
  cursor: not-allowed
}

.xpl-input-file input[type="file"] {
  display: none
}

.flatpickr-day.xpl-input-file input[type="file"]{visibility:hidden}

.xpl-toolbar.xpl-input-file input[type="file"] {
  display: none;
}

.xpl-input-file__file-list {
    color: var(--xpl-color-gray-900);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

.dark .xpl-input-file__file-list {
      color: var(--xpl-color-gray-0);
    }

.xpl-input-file__file-item {
  display: flex;
  align-items: center;
  gap: 1rem
}

.xpl-input-file__accept {
    color: var(--xpl-color-gray-600);
    flex-basis: 100%;
  }

.dark .xpl-input-file__accept {
      color: var(--xpl-color-gray-400);
    }

.xpl-input-file__remove-icon {
  margin-right: 0.5rem;
  cursor: pointer
}

.xpl-input-file--disabled {
  opacity: 0.5
}

/* stylelint-disable color-no-hex, function-disallowed-list -- TODO: migrate to var(--xpl-*) tokens (see TECH_DEBT.md) */

.xpl-input-time {
  position: relative;
  display: block
}

.xpl-input-time__input {
  padding-left: 0.5rem
}

.xpl-input-time--disabled {
  opacity: 0.5
}

.xpl-input-time--error .xpl-input-wrapper {
    border-color: var(--xpl-color-red-500);
  }

.dark .xpl-input-time--error .xpl-input-wrapper {
      border-color: var(--xpl-color-red-400);
    }

.xpl-input-time__dropdown {
    box-shadow:
      0 4px 6px -1px rgb(48 45 59 / 0.1),
      0 2px 4px -1px rgb(48 45 59 / 0.05);
    margin-top: 0.25rem;
  }

.xpl-input-phone {
  position: relative;
  display: block
}

.xpl-input-phone--error > .xpl-input-wrapper {
    border-color: var(--xpl-border-negative);
  }

.xpl-input-phone > .xpl-input-wrapper {
  display: flex;
  align-items: stretch;
  padding: 0px
}

.xpl-input-phone > .xpl-input-wrapper:has(:focus-visible) {
      border-color: var(--xpl-border-focus);
    }

.xpl-input-phone.xpl-input-phone--open > .xpl-input-wrapper {
    border-color: var(--xpl-border-focus);
  }

.xpl-input-phone .xpl-input-phone__trigger {
    background-color: var(--xpl-background-surface-subtlest);
    border-right-color: var(--xpl-border-default);
    border-right-width: var(--xpl-border-small);
    color: var(--xpl-text-default);
    height: var(--xpl-size-250);
    display: flex;
    min-width: 0px;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    gap: 0.5rem;
    border-style: solid;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0px;
    padding-bottom: 0px;
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

.xpl-input-phone .xpl-input-phone__trigger:hover {
      background-color: var(--xpl-background-surface-information);
    }

.xpl-input-phone .xpl-input-phone__trigger:focus-visible {
      outline-color: var(--xpl-border-focus);
      outline-width: 2px;
      outline-offset: -2px;
    }

.xpl-input-phone--open .xpl-input-phone .xpl-input-phone__trigger,
    .xpl-input-wrapper:has(:focus-visible) .xpl-input-phone .xpl-input-phone__trigger {
      background-color: var(--xpl-background-surface-information);
    }

.xpl-input-phone__flag {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center
}

.xpl-input-phone__trigger-icon {
  flex-shrink: 0
}

.xpl-input-phone__input-wrap {
  position: relative;
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  align-items: center
}

.xpl-input-phone__dial-code {
    color: var(--xpl-text-default);
    pointer-events: none;
    display: flex;
    flex-shrink: 0;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    align-items: center;
    white-space: nowrap;
    padding-left: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

/* Two-level selector (`.xpl-input-phone .xpl-input-phone__input`, specificity
     0,2,0) so the phone field's padding (pl-2 pr-10, for the dial code and clear
     button) wins over the inherited `.xpl-input input` rule (0,1,1) in input.css,
     which only sets padding-right. Height (40px) matches the country trigger. */

.xpl-input-phone .xpl-input-phone__input {
    height: var(--xpl-size-250);
    display: block;
    min-width: 0px;
    flex: 1 1 0%;
    border-width: 0px;
    background-color: transparent;
    padding-left: 0.5rem;
    padding-right: 2.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

.xpl-input-phone .xpl-input-phone__dial-code + .xpl-input-phone__input {
  padding-left: 0.25rem
}

.xpl-input-phone__clear {
    color: var(--xpl-text-subdued);
    position: absolute;
    right: 0.5rem;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border-width: 0px;
    background-color: transparent;
    padding: 0.25rem;
  }

.xpl-input-phone__clear:hover {
      color: var(--xpl-text-default);
    }

.xpl-input-phone .xpl-dropdown {
  min-width: 15.625rem
}

.xpl-input-phone .xpl-dropdown:not(.xpl-dropdown--open) {
  visibility: hidden
}

.xpl-input-phone .xpl-dropdown-list-item {
  display: flex;
  flex-direction: row;
  gap: 0.5rem
}

.xpl-input-phone__search-wrap {
  display: flex;
  flex-shrink: 0;
  flex-direction: row;
  align-items: center;
  padding: 0.5rem
}

.xpl-input-phone__search {
  margin-bottom: 0px;
  min-width: 0px;
  flex: 1 1 0%
}

/* stylelint-disable-next-line no-descending-specificity -- targets search wrapper, not the host's direct-child wrapper */

.xpl-input-phone__search .xpl-input-wrapper {
      height: var(--xpl-size-250);
      border-color: var(--xpl-border-default);
      display: flex;
      min-height: 0px;
      align-items: center;
      border-radius: 0.375rem;
      border-width: 1px;
      border-style: solid;
    }

.xpl-input-phone__search input {
  height: 100%
}

.xpl-input-phone__search-icon {
    color: var(--xpl-icon-default);
  }

.xpl-input-phone--domestic > .xpl-input-wrapper {
  padding-left: 0.75rem
}

.xpl-input-phone--domestic .xpl-input-phone__input {
  padding-left: 0px
}

.xpl-input-phone--disabled .xpl-input-phone__trigger {
  cursor: not-allowed;
  opacity: 0.7
}

.xpl-input--disabled .xpl-input-phone__trigger {
  cursor: not-allowed;
  opacity: 0.7
}

.xpl-label {
  display: block;
  width: 100%;
  cursor: pointer;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem
}

.xpl-label--disabled {
  cursor: not-allowed !important;
  --tw-text-opacity: 1;
  color: rgb(106 109 125 / var(--tw-text-opacity, 1));
}

small.xpl-description {
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(106 109 125 / var(--tw-text-opacity, 1))
}

.xpl-description--disabled {
  cursor: not-allowed !important;
  --tw-text-opacity: 1;
  color: rgb(106 109 125 / var(--tw-text-opacity, 1));
}

.dark .xpl-label {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.dark .xpl-label--disabled {
  --tw-text-opacity: 1;
  color: rgb(153 155 168 / var(--tw-text-opacity, 1))
}

.dark .xpl-description {
  --tw-text-opacity: 1;
  color: rgb(153 155 168 / var(--tw-text-opacity, 1))
}

.dark .xpl-description--disabled {
  --tw-text-opacity: 1;
  color: rgb(153 155 168 / var(--tw-text-opacity, 1))
}

/**
 * xpl-list container only.
 * Legacy prop-based row chrome: list-item.css.
 * Slot-based row chrome: list-item.css — nested under `xpl-list-item.xpl-list-item--slot-based` (BEM-style `& .xpl-list-item__*`).
 * Link-row chevron: legacy uses `a.xpl-list-item-content[href]:not(.xpl-list-item__wrapper)`; slot-based uses `a.xpl-list-item__wrapper[href]`.
 * Reorder handle, selection (radio), legacy action buttons: list-action.css.
 *
 * In-list `xpl-divider` (e.g. `show-divider` under stacked content): width constraints live here so global
 * `.xpl-divider` rules cannot force a min-width that overlaps the right column — scoped to this list’s
 * direct-child rows only (`> xpl-list-item`).
 */

xpl-list {
  display: block;
  position: relative;
}

xpl-list.xpl-list > xpl-list-item xpl-divider {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Visually hidden assertive live region for keyboard / pointer reorder announcements. */

xpl-list .xpl-list__reorder-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0
}

/* stylelint-disable no-descending-specificity -- BEM block level nesting are based on component structure */

/* =============================================================================
   LEGACY: prop-based row — border and flex live on xpl-list-item host (no __wrapper).
   ============================================================================= */

/* Tokens */

:root {
  /* Opacity controll for dragging items */
  --xpl-opacity-75: 0.75;

  /* Lift above adjacent rows on hover; Foundation z-index tokens (100+) are too high for local stacking. */
  --xpl-z-index-1: 1;
}

.xpl-list-item {
  border-color: var(--xpl-border-default);
  color: var(--xpl-text-default);
  border-radius: var(--xpl-border-radius-default);
  margin-bottom: var(--xpl-space-12);
  padding-inline: var(--xpl-space-16);
  padding-block: var(--xpl-space-24);
  font-size: var(--xpl-font-size-body);
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border-width: 1px;
  text-align: left;
  text-decoration-line: none;
}

.xpl-list-item xpl-avatar {
    margin-right: var(--xpl-space-12);
    flex-shrink: 0;
  }

.xpl-list-item .xpl-list-item__title {
    color: var(--xpl-text-default);
    font-size: var(--xpl-font-size-title-5);
    font-weight: var(--xpl-font-weight-medium);
    flex-shrink: 0;
  }

.xpl-list-item .xpl-list-item__title-wrapper {
    display: flex;
    align-items: center;
  }

.xpl-list-item xpl-badge {
    margin-right: var(--xpl-space-8);
  }

/* Dot-only badges (e.g. title-badge-variant): match list spec / avatar status dot at 8px (--xpl-size-050). */

.xpl-list-item xpl-badge .xpl-badge--dot-only {
    width: var(--xpl-size-050);
    height: var(--xpl-size-050);
    min-width: var(--xpl-size-050);
    min-height: var(--xpl-size-050);
    line-height: var(--xpl-size-050);
    padding: 0;
  }

.xpl-list-item .xpl-list-item__radio {
    margin-right: var(--xpl-space-8);
  }

.xpl-list-item:last-child {
  margin-bottom: 0px
}

/*
   * Link-row chevron: legacy prop-based rows (`<a class="xpl-list-item-content">`).
   * Chevron is `<xpl-icon icon="chevron-right">` in TSX (`.xpl-list-item__link-chevron`), not CSS `::after`.
   */

.xpl-list-item:not(.xpl-list-item--slot-based) a.xpl-list-item-content[href]:not(.xpl-list-item__wrapper) {
      position: relative;
      color: var(--xpl-text-default);
      text-decoration: none;
      padding-right: var(--xpl-space-40);
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;
    }

.xpl-list-item:not(.xpl-list-item--slot-based) a.xpl-list-item-content[href]:not(.xpl-list-item__wrapper):focus-visible {
        outline-color: var(--xpl-border-focus);
        outline-width: 2px;
        outline-offset: 2px;
      }

.xpl-list-item:hover {
    position: relative;
    cursor: pointer;

    z-index: var(--xpl-z-index-1);
  }

/* =============================================================================
     SLOT-BASED: composition row — card chrome on `.xpl-list-item__wrapper`; host uses `display: contents`
     so the list’s flex layout sees the row surface, not an extra bordered box. Older engines mishandled
     ARIA on `display: contents` hosts, so `role="listitem"` lives on `.xpl-list-item__listitem-shell` or
     the non-link wrapper (see xpl-list-item render), not on `<xpl-list-item>`.
     ============================================================================= */

/* Link rows: listitem must not sit on `<a href>` (would override native link role). */

.xpl-list-item.xpl-list-item--slot-based {
  display: contents
}

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__listitem-shell {
      display: block;
      width: 100%;
    }

.xpl-list-item.xpl-list-item--slot-based .xpl-divider {
      margin-top: 0;
      margin-bottom: 0;
      height: 0px;
    }

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__wrapper {
      display: flex;
      flex-grow: 1;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: var(--xpl-size-350);
      padding: var(--xpl-space-12) var(--xpl-space-16);
      gap: var(--xpl-space-16);
      text-align: left;
      background-color: var(--xpl-background-surface-default);
      border: var(--xpl-border-small) solid var(--xpl-border-default);
      border-radius: var(--xpl-border-radius-default);
      color: var(--xpl-text-default);
      font-size: var(--xpl-font-size-body);
      text-decoration: none;
      transition-property: opacity,background-color,border-color,box-shadow;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;
      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }

/*
     * Link rows: chevron from `.xpl-list-item__link-chevron` + `xpl-icon` in TSX.
     * Inline-end padding reserves gutter space so the icon does not overlap the right column.
     */

.xpl-list-item.xpl-list-item--slot-based a.xpl-list-item__wrapper[href] {
      position: relative;
      padding-inline-end: var(--xpl-space-40);
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;
    }

/* Reorder: classes toggled on the wrapper during pointer drag (see xpl-list-item + xpl-list). */

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__wrapper.dragging {
      opacity: var(--xpl-opacity-75);
      background-color: var(--xpl-background-surface-subtle);
    }

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__wrapper.drag-over {
      border-color: var(--xpl-border-focus);
      box-shadow: 0 0 0 1px var(--xpl-border-focus);
    }

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__wrapper:hover {
      border-color: var(--xpl-border-hover);
    }

.xpl-list > .xpl-list-item.xpl-list-item--slot-based:not(:last-of-type) .xpl-list-item__wrapper {
        margin-bottom: var(--xpl-space-8);
      }

.xpl-list-item.xpl-list-item--slot-based a.xpl-list-item__wrapper:hover {
      border-color: var(--xpl-border-hover);
      color: var(--xpl-text-default);
    }

/*
     * Error outline on the row surface: base `.xpl-list-item__wrapper` uses three classes
     * (0,0,3,0), which beats `xpl-list-item.xpl-list-item--error .xpl-list-item__wrapper`
     * (0,0,2,1). Error border-color must live under the same slot-based + --error compound.
     */

.xpl-list-item.xpl-list-item--slot-based.xpl-list-item--error .xpl-list-item__wrapper {
        border-color: var(--xpl-border-negative);
      }

.xpl-list-item.xpl-list-item--slot-based.xpl-list-item--error .xpl-list-item__wrapper:hover {
        border-color: var(--xpl-border-negative);
      }

.xpl-list-item.xpl-list-item--slot-based.xpl-list-item--error a.xpl-list-item__wrapper:hover {
        border-color: var(--xpl-border-negative);
      }

.xpl-list-item.xpl-list-item--slot-based a.xpl-list-item__wrapper:focus-visible {
      border-color: var(--xpl-border-focus);
      outline-color: var(--xpl-border-focus);
      outline-width: 2px;
      outline-offset: 2px;
    }

/* Ensure stacked slot aligns properly inside anchor tags */

.xpl-list-item.xpl-list-item--slot-based a.xpl-list-item__wrapper .xpl-list-item__stacked {
      align-self: stretch;
    }

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center
}

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__stacked {
  display: flex;
  min-width: 0px;
  flex-grow: 1;
  flex-direction: column
}

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__title-row {
  display: flex;
  align-items: center
}

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__title-wrapper {
  display: flex;
  min-width: 0px;
  align-items: center
}

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__title-badge {
  display: flex;
  align-items: center
}

/* Slot-based title styling - using standard CSS since component doesn't use Shadow DOM */

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__title-wrapper [slot="title"] {
      margin: 0;
      font-family: var(--xpl-font-family-default);
      font-size: var(--xpl-font-size-title-5);
      font-weight: var(--xpl-font-weight-medium);
      line-height: 1.5;
      letter-spacing: 0;
      color: var(--xpl-text-default);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__metadata-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--xpl-space-4);
      font-size: var(--xpl-font-size-callout);
      color: var(--xpl-text-subdued);
      margin-top: var(--xpl-space-4);
    }

/* Slot-based metadata styling - using standard CSS since component doesn't use Shadow DOM */

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__metadata-row [slot="metadata"] {
      display: flex;
      align-items: center;
      gap: var(--xpl-space-8);
    }

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__stacked-extra-1,
    .xpl-list-item.xpl-list-item--slot-based .xpl-list-item__stacked-extra-2,
    .xpl-list-item.xpl-list-item--slot-based .xpl-list-item__stacked-extra-3 {
      margin-top: var(--xpl-space-8);
      font-family: var(--xpl-font-family-default);
      font-size: var(--xpl-font-size-callout);
      font-weight: var(--xpl-font-weight-normal);
      color: var(--xpl-text-subdued);
    }

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__right {
  display: flex;
  flex-shrink: 0;
  align-items: center;

      gap: var(--xpl-space-8);
      margin-left: var(--xpl-space-12)
}

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__details {
      font-family: var(--xpl-font-family-default);
      font-size: var(--xpl-font-size-callout);
      font-weight: var(--xpl-font-weight-normal);
      color: var(--xpl-text-subdued);
    }

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__badges {
  display: flex;
  align-items: center;

      gap: var(--xpl-space-8)
}

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__actions {
  display: flex;
  align-items: center;

      gap: var(--xpl-space-8)
}

.xpl-list-item.xpl-list-item--slot-based .xpl-list-item__title {
      font-size: var(--xpl-font-size-title-5);
      font-weight: var(--xpl-font-weight-medium);
    }

/* Selectable: row-level cue in addition to the checked radio (slot-based host gets --selected). */

.xpl-list-item.xpl-list-item--slot-based.xpl-list-item--selected:not(.xpl-list-item--disabled) .xpl-list-item__wrapper {
      background-color: var(--xpl-background-surface-subtle);
    }

/*
     * Hidden rows: slot-based hosts use `display: contents`; `hidden` may not hide the row — force none.
     */

.xpl-list-item.xpl-list-item--slot-based[hidden] {
      display: none;
    }

/*
 * Legacy prop-based row inner layout (parity with main-branch `ListItemCpt`):
 * `xpl-list-item-content` is the flex row between title block and the right column; `xpl-list-right`
 * stacks subtext, avatar group, and badges vertically (not a horizontal flex band).
 */

.xpl-list-item-content {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: space-between;

  min-width: 0;
  width: 100%
}

/* Trailing chevron on link rows (legacy + slot); `color` sets `xpl-icon` fill via currentColor. */

.xpl-list-item__link-chevron {
  position: absolute;
  top: 50%;
  right: var(--xpl-space-16);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--xpl-icon-subtle);
  pointer-events: none;
}

.xpl-list-left {
  margin-right: var(--xpl-space-32);
  display: flex;
  flex-shrink: 0;
  flex-direction: column;

  min-width: 0;
}

.xpl-list-right {
  flex-direction: column;
  align-items: flex-end;
  max-width: -moz-fit-content;
  max-width: fit-content;
  min-width: 0;
}

/* Legacy (main `list.css`): vertical rhythm between stacked `div`s; `xpl-badge` siblings unchanged. */

.xpl-list-right div:not(:last-child) {
  margin-bottom: var(--xpl-space-4);
}

.xpl-list-item-subtext {
  color: var(--xpl-text-subdued);
  overflow-wrap: break-word;
}

.xpl-list-right ul.xpl-list-item-subtext {
  padding-left: var(--xpl-space-24);
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  list-style-type: disc;

  min-width: 0;
}

.xpl-list-item-metadata {
  margin-top: var(--xpl-space-4);
  margin: 0px;
  display: flex;
  list-style-type: none;
  padding: 0px;
}

.xpl-list-item-metadata li {
    color: var(--xpl-text-subdued);
    font-size: var(--xpl-font-size-callout);
    display: inline-flex;

    margin-right: var(--xpl-space-16);
  }

.xpl-list-item-metadata li:last-child {
      margin-right: 0;
    }

/* Legacy: narrow viewports — stack main row and metadata like main `list.css` @media (max-width: 640px). */

@media screen and (max-width: 640px) {
  xpl-list-item.xpl-list-item:not(.xpl-list-item--slot-based) {
    align-items: flex-start;
  }

  xpl-list-item:not(.xpl-list-item--slot-based) .xpl-list-item-content {
    display: block;
  }

  xpl-list-item:not(.xpl-list-item--slot-based) ul.xpl-list-item-metadata {
    margin-bottom: var(--xpl-space-4);
  }

  xpl-list-item:not(.xpl-list-item--slot-based) .xpl-list-item-metadata li {
    display: block;
  }

  xpl-list-item:not(.xpl-list-item--slot-based) .xpl-avatar-group {
    justify-content: flex-start;
  }
}

.xpl-list-item__divider {
  border-color: var(--xpl-border-subtle);
  margin-block: var(--xpl-space-8);
  width: 100%;
  border-top-width: 1px;
}

.xpl-list-item__error-text {
  display: flex;
  align-items: center;
  gap: var(--xpl-space-4);
  color: var(--xpl-text-negative);
  font-size: var(--xpl-font-size-caption);
  margin-top: var(--xpl-space-4);
}

/**
 * @deprecated Use .xpl-list-item__wrapper--error instead.
 * Legacy error state class on list item. Now applied to wrapper.
 */

.xpl-list-item--error .xpl-list-item {
    border: var(--xpl-border-small) solid var(--xpl-border-negative);
    border-radius: var(--xpl-border-radius-small);
  }

.xpl-list-item--error .xpl-list-item:hover {
      border-color: var(--xpl-border-negative);
      box-shadow: 0 0 0 var(--xpl-border-small) var(--xpl-border-negative);
    }

/**
 * @deprecated Use .xpl-list-item__wrapper--disabled or [disabled] attribute instead.
 * Legacy disabled state class on list item. Now applied to wrapper.
 */

/* Keep pointer-events enabled so clicks hit this row (document selection logic, a11y).
     Disabled links use pointer-events-none below; radios are disabled in markup. */

.xpl-list-item-disabled .xpl-list-item, .xpl-list-item[disabled] .xpl-list-item {
    border-color: var(--xpl-border-default);
    box-shadow: none;
    background-color: var(--xpl-background-action-disabled);
    color: var(--xpl-text-disabled);
  }

/**
 * Legacy prop-based rows: border and flex live on the host (no `__wrapper`).
 * Hover: elevation only (matches main `list.css` link `hover:shadow-md`), not a border-color shift.
 * Slot-based hover remains on `.xpl-list-item__wrapper` (border).
 */

xpl-list-item.xpl-list-item:not(.xpl-list-item--slot-based, .xpl-list-item--disabled):hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

xpl-list-item.xpl-list-item:not(.xpl-list-item--slot-based)
  a.xpl-list-item-content[href]:not(.xpl-list-item__wrapper):hover {
  color: var(--xpl-text-default);
}

xpl-list-item.xpl-list-item--error .xpl-list-item__wrapper,
xpl-list-item.xpl-list-item--error.xpl-list-item {
  border-color: var(--xpl-border-negative);
}

xpl-list-item.xpl-list-item--error .xpl-list-item__wrapper:hover,
xpl-list-item.xpl-list-item--error.xpl-list-item:hover {
  border-color: var(--xpl-border-negative);
}

xpl-list-item.xpl-list-item--disabled .xpl-list-item__wrapper,
xpl-list-item.xpl-list-item--disabled.xpl-list-item {
  cursor: not-allowed;

  background-color: var(--xpl-background-action-disabled);
  color: var(--xpl-text-disabled);
  border-color: var(--xpl-border-default)
}

xpl-list-item.xpl-list-item--disabled .xpl-list-item__wrapper a,
xpl-list-item.xpl-list-item--disabled a.xpl-list-item__wrapper {
  pointer-events: none
}

/*
 * Hidden rows: legacy prop-based hosts — ensure hidden wins over flex layout on the host.
 * Slot-based: `&[hidden]` under `&.xpl-list-item--slot-based` inside the `.xpl-list-item` block.
 */

xpl-list-item[hidden]:not(.xpl-list-item--slot-based) {
  display: none;
}

/* stylelint-enable no-descending-specificity */

/* stylelint-disable no-descending-specificity -- BEM / host selectors follow component structure */

/**
 * List row “action” surface: reorder drag handle, single-select radio chrome, legacy bordered action buttons.
 * Selectors target classes rendered by xpl-list-item today; a dedicated xpl-list-action element could adopt these later.
 */

.xpl-list-item__action-btn {
  color: var(--xpl-text-default);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.xpl-list-item__action-btn:disabled {
    background-color: var(--xpl-background-action-disabled);
    color: var(--xpl-text-disabled);
    cursor: not-allowed;
  }

.xpl-list-item__action-btn--border {
    border-color: var(--xpl-border-strong);
    border-radius: var(--xpl-border-radius-full);
    padding: var(--xpl-space-12) var(--xpl-space-24);
    border-width: 1px;
  }

.xpl-list-item__action-btn--compact-border {
    border-color: var(--xpl-border-strong);
    border-radius: var(--xpl-border-radius-full);
    padding: var(--xpl-space-4) var(--xpl-space-12);
    border-width: 1px;
  }

.xpl-list-item__actions-container {
  display: flex
}

.xpl-list-item__drag-handle {
  display: flex;
  align-items: center;
  color: var(--xpl-text-subdued);
  cursor: move;
}

.xpl-list-item__drag-handle:active {
  cursor: grabbing
}

/**
 * @deprecated Use .xpl-list-item__action-btn--border instead (BEM modifier syntax).
 * Legacy class name with single hyphen.
 */

.xpl-list-action-btn-border {
  border-color: var(--xpl-border-strong);
  border-radius: var(--xpl-border-radius-full);
  padding: var(--xpl-space-12) var(--xpl-space-24);
  border-width: 1px;
}

/**
 * @deprecated Use .xpl-list-item__action-btn--compact-border instead (BEM modifier syntax).
 * Legacy class name with single hyphen.
 */

.xpl-list-action-btn-compact-border {
  border-color: var(--xpl-border-strong);
  border-radius: var(--xpl-border-radius-full);
  padding: var(--xpl-space-4) var(--xpl-space-12);
  border-width: 1px;
}

xpl-list-item .xpl-list-item__selectable,
xpl-list-item .xpl-list-item__reorderable {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

xpl-list-item .xpl-list-item__selectable {
  margin-right: var(--xpl-space-12);
}

xpl-list-item .xpl-list-item__selectable xpl-radio .xpl-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0
}

xpl-list-item .xpl-list-item__selectable xpl-radio {
    margin-bottom: 0;
  }

xpl-list-item .xpl-list-item__selectable xpl-radio .xpl-radio {
    margin: 0;
    cursor: pointer;
  }

xpl-list-item .xpl-list-item__selectable xpl-radio .xpl-radio:disabled {
  cursor: not-allowed
}

/* Reorder handle is left of selection; margin separates from following content */

xpl-list-item .xpl-list-item__reorderable .xpl-list-item__drag-handle {
  flex-shrink: 0;
  cursor: move
}

/* xpl-button owns hover/focus/active; keep grab cursor on the control */

xpl-list-item .xpl-list-item__reorderable .xpl-list-item__drag-handle button {
  cursor: move
}

xpl-list-item .xpl-list-item__reorderable .xpl-list-item__drag-handle:active button {
  cursor: grabbing
}

/* Keyboard reorder mode indicator (host is xpl-button); ring width matches focus outline-2 */

xpl-list-item .xpl-list-item__reorderable .xpl-list-item__drag-handle.xpl-list-item__drag-handle--keyboard-mode button {
      outline-color: var(--xpl-border-focus);
      outline-width: 2px;
      outline-offset: 2px;
    }

xpl-list-item .xpl-list-item__actions [slot="actions"] button,
xpl-list-item .xpl-list-item__actions [slot="actions"] xpl-button,
xpl-list-item .xpl-list-item__actions [slot="actions"] xpl-icon[role="button"] {
  cursor: pointer
}

/* stylelint-enable no-descending-specificity */

/* stylelint-disable no-descending-specificity, because the rule was expecting some of the code below to appear before some code that is nested above. */

.xpl-main-nav {
  width: 240px;
}

.xpl-main-nav .xpl-main-nav__main_section .xpl-nav-item:last-of-type a,
      .xpl-main-nav .xpl-main-nav__main_section .xpl-nav-item:last-of-type button {
        margin-bottom: 74px;
      }

@media (max-width: 639px) {

.xpl-main-nav .xpl-main-nav__main_section {
    overflow-y: auto
  }
    }

.xpl-main-nav nav {
    grid-template-rows: 74px 1fr min-content;
    background-color: var(--xpl-color-navigation-dm);
    display: grid;
    height: 100%;
  }

@media (max-width: 639px) {

.xpl-main-nav nav {
    overflow-y: auto
  }
    }

.xpl-main-nav .xpl-nav-item a:not(.xpl-dropdown-list *), .xpl-main-nav .xpl-nav-item button:not(.xpl-dropdown-list *) {
        width: 240px;
      }

/* Brand Section */

.xpl-main-nav header {
    grid-template-columns: max-content auto;
  }

.xpl-main-nav header p {
      color: var(--xpl-color-text-primary-dm);
      margin-left: 1rem;
      display: grid;
      align-content: center;
      font-size: 1rem;
      line-height: 1.5rem;
      font-weight: 600;
    }

.xpl-main-nav header img {
      height: 42px;
      width: 42px;
      border-radius: 0.5rem;
    }

.xpl-main-nav header {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  padding: 1rem
}

.xpl-main-nav footer {
    background-color: var(--xpl-color-background-2-dm);
  }

.xpl-main-nav footer .xpl-avatar {
  margin-right: 1rem
}

.xpl-main-nav footer div p {
  font-size: 0.875rem;
  line-height: 1.25rem
}

.xpl-main-nav footer div p:first-of-type {
        color: var(--xpl-color-text-primary-dm);
      }

.xpl-main-nav footer div {
  overflow-x: auto
}

.xpl-main-nav footer .xpl-nav-item a svg, .xpl-main-nav footer .xpl-nav-item button svg {
          color: var(--xpl-color-text-secondary-dm);
          fill: currentColor;
        }

.xpl-main-nav footer {
  z-index: 20;
  display: grid;
  align-items: flex-end;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem
}

/* Width for different screen sizes */

.xpl-main-nav--md .xpl-nav-item a,
      .xpl-main-nav--md .xpl-nav-item button {
        width: 112px;
      }

.xpl-main-nav--md .xpl-nav-item a svg, .xpl-main-nav--md .xpl-nav-item button svg {
  margin-right: 0px
}

.xpl-main-nav--md .xpl-nav-item a,
      .xpl-main-nav--md .xpl-nav-item button {
  display: grid;
  grid-auto-flow: row;
  justify-items: center
}

.xpl-main-nav--sm .xpl-nav-item a,
      .xpl-main-nav--sm .xpl-nav-item button {
        width: 74px;
      }

.xpl-main-nav--sm .xpl-nav-item a p, .xpl-main-nav--sm .xpl-nav-item button p {
  display: none
}

.flatpickr-day.xpl-main-nav--sm .xpl-nav-item a p,.flatpickr-day .xpl-main-nav--sm .xpl-nav-item button p{visibility:hidden}

.xpl-toolbar.xpl-main-nav--sm .xpl-nav-item a p,.xpl-toolbar .xpl-main-nav--sm .xpl-nav-item button p {
  display: none;
}

.xpl-main-nav--sm .xpl-nav-item a svg, .xpl-main-nav--sm .xpl-nav-item button svg {
  margin-right: 0px
}

.xpl-main-nav--sm .xpl-nav-item a,
      .xpl-main-nav--sm .xpl-nav-item button {
  display: grid;
  grid-auto-flow: row;
  justify-items: center
}

.xpl-main-nav--sm .xpl-nav-item a,
      .xpl-main-nav--sm .xpl-nav-item button,
      .xpl-main-nav--md .xpl-nav-item a,
      .xpl-main-nav--md .xpl-nav-item button {
        font-size: 0.875rem;
        line-height: 1rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-weight: 600;
      }

.xpl-main-nav--sm header p, .xpl-main-nav--md header p {
  display: none
}

.flatpickr-day.xpl-main-nav--sm header p,.flatpickr-day .xpl-main-nav--md header p{visibility:hidden}

.xpl-toolbar.xpl-main-nav--sm header p,.xpl-toolbar .xpl-main-nav--md header p {
  display: none;
}

.xpl-main-nav--sm header, .xpl-main-nav--md header {
  margin-top: 1rem;
  align-content: center;
  justify-content: center
}

.xpl-main-nav--sm footer .xpl-avatar, .xpl-main-nav--md footer .xpl-avatar {
  margin-right: 0px
}

.xpl-main-nav--sm footer .xpl-nav-item a p, .xpl-main-nav--sm footer .xpl-nav-item button p, .xpl-main-nav--sm footer .xpl-nav-item div p, .xpl-main-nav--md footer .xpl-nav-item a p, .xpl-main-nav--md footer .xpl-nav-item button p, .xpl-main-nav--md footer .xpl-nav-item div p {
  display: none
}

.flatpickr-day.xpl-main-nav--sm footer .xpl-nav-item a p,.flatpickr-day .xpl-main-nav--sm footer .xpl-nav-item button p,.flatpickr-day .xpl-main-nav--sm footer .xpl-nav-item div p,.flatpickr-day .xpl-main-nav--md footer .xpl-nav-item a p,.flatpickr-day .xpl-main-nav--md footer .xpl-nav-item button p,.flatpickr-day .xpl-main-nav--md footer .xpl-nav-item div p{visibility:hidden}

.xpl-toolbar.xpl-main-nav--sm footer .xpl-nav-item a p,.xpl-toolbar .xpl-main-nav--sm footer .xpl-nav-item button p,.xpl-toolbar .xpl-main-nav--sm footer .xpl-nav-item div p,.xpl-toolbar .xpl-main-nav--md footer .xpl-nav-item a p,.xpl-toolbar .xpl-main-nav--md footer .xpl-nav-item button p,.xpl-toolbar .xpl-main-nav--md footer .xpl-nav-item div p {
  display: none;
}

.xpl-main-nav--sm footer .xpl-nav-item a,
        .xpl-main-nav--sm footer .xpl-nav-item button,
        .xpl-main-nav--md footer .xpl-nav-item a,
        .xpl-main-nav--md footer .xpl-nav-item button {
  margin-bottom: 0px;
  display: inline-flex
}

/* stylelint-disable color-no-hex, function-disallowed-list -- TODO: migrate to var(--xpl-*) tokens (see TECH_DEBT.md) */

@keyframes modal-open {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-close {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.xpl-modal__dialog {
    box-shadow:
      0 10px 15px -3px rgb(0 0 0 / 0.1),
      0 4px 6px -2px rgb(0 0 0 / 0.05);
    border-radius: 1rem;
    padding: 1rem;
    --tw-text-opacity: 1;
    color: rgb(41 38 50 / var(--tw-text-opacity, 1));
  }

.xpl-modal-size--small {
  width: 400px
}

.xpl-modal-size--medium {
  width: 600px
}

.xpl-modal-size--large {
  width: 800px
}

.xpl-modal-size--mobile {
  width: 350px
}

.xpl-modal--is-open {
    opacity: 0;
    animation: modal-open 0.25s forwards;
  }

.xpl-modal--is-closed {
    opacity: 1;
    animation: modal-close 0.25s forwards;
  }

.xpl-modal__header {
  margin-bottom: 1rem
}

.xpl-modal__title {
    font-size: var(--xpl-size-font-title-3);
    font-weight: var(--xpl-font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

.xpl-modal__title xpl-button {
  margin-left: auto
}

.xpl-modal__alert-icon {
  margin-right: 0.125rem;
  --tw-text-opacity: 1;
  color: rgb(194 33 15 / var(--tw-text-opacity, 1))
}

.xpl-modal__subtitle {
    font-size: var(--xpl-size-font-callout);
    font-weight: var(--xpl-font-weight-normal);
    --tw-text-opacity: 1;
    color: rgb(106 109 125 / var(--tw-text-opacity, 1));
  }

.xpl-modal__body {
    font-size: var(--xpl-size-font-body);
    font-weight: var(--xpl-font-weight-normal);
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

.xpl-modal__footer {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end
}

.xpl-modal__footer [slot]:not(:first-child) {
  margin-left: 0.5rem
}

.xpl-modal__footer [slot="tertiary"] {
  margin-right: auto
}

.xpl-modal__footer ::slotted(*) {
    margin-left: 30px;
  }

.xpl-modal dialog::backdrop {
  background-color: transparent
}

.dark .xpl-modal__dialog {
    background-color: var(--xpl-color-gray-1000);
  }

.dark .xpl-modal__header {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.dark .xpl-modal__title .alert-icon {
  --tw-text-opacity: 1;
  color: rgb(255 147 135 / var(--tw-text-opacity, 1))
}

.dark .xpl-modal__subtitle {
  --tw-text-opacity: 1;
  color: rgb(153 155 168 / var(--tw-text-opacity, 1))
}

.dark .xpl-modal__body {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

@media (max-width: 768px) {
    .xpl-modal__dialog {
    margin: auto;
    width: 350px
  }

    .xpl-modal__footer {
    display: flex;
    flex-direction: column-reverse
  }

      .xpl-modal__footer [slot]:not(:first-child) {
    margin-left: 0px
  }

      .xpl-modal__footer [slot]:not(:last-child) {
    margin-top: 0.5rem
  }

      .xpl-modal__footer [slot="tertiary"] {
    margin-right: 0px
  }

      .xpl-modal__footer button {
    width: 100%
  }
}

.xpl-nav-item a {
    color: inherit;
    text-decoration: none;
  }

.xpl-nav-item a p, .xpl-nav-item button p {
      margin: 0;
    }

.xpl-nav-item a svg, .xpl-nav-item button svg {
  margin-right: 0.75rem;
  height: 2rem;
  width: 2rem;
  fill: currentColor;
  --tw-text-opacity: 1;
  color: rgb(153 155 168 / var(--tw-text-opacity, 1))
}

.xpl-nav-item a:hover svg, .xpl-nav-item a:focus svg, .xpl-nav-item a:active svg, .xpl-nav-item button:hover svg, .xpl-nav-item button:focus svg, .xpl-nav-item button:active svg {
  fill: currentColor;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.xpl-nav-item a:hover,
    .xpl-nav-item a:focus,
    .xpl-nav-item a:active,
    .xpl-nav-item button:hover,
    .xpl-nav-item button:focus,
    .xpl-nav-item button:active {
  --tw-bg-opacity: 1;
  background-color: rgb(24 22 31 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.xpl-nav-item a.active, .xpl-nav-item button.active {
      border-right: 4px solid var(--xpl-color-primary-dm);
    }

.xpl-nav-item a.active svg, .xpl-nav-item button.active svg {
  fill: currentColor;
  --tw-text-opacity: 1;
  color: rgb(249 145 112 / var(--tw-text-opacity, 1))
}

.xpl-nav-item a.active, .xpl-nav-item button.active {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.xpl-nav-item a,
  .xpl-nav-item button {
  display: flex;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(153 155 168 / var(--tw-text-opacity, 1));
  align-content: center;
  align-items: center;
  border-color: transparent;
  background-color: transparent
}

.xpl-main-nav--md .xpl-nav-item a,
      .xpl-main-nav--md .xpl-nav-item button,
      .xpl-main-nav--sm .xpl-nav-item a,
      .xpl-main-nav--sm .xpl-nav-item button {
  justify-content: center;
  padding-left: 0px;
  padding-right: 0px
}

/* Overall container */

/* stylelint-disable no-descending-specificity */

.xpl-pagination {
  display: flex;
  width: 100%;
  align-items: center;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem
}

.xpl-pagination__with-page-control {
  justify-content: space-between;
  gap: 1rem
}

.xpl-pagination__no-page-control {
  justify-content: center
}

.xpl-pagination__rows-per-page-select {
    min-width: 72px;
  }

.xpl-pagination__page-select {
    min-width: 88px;
  }

.xpl-pagination__page-select .xpl-input-wrapper {
  justify-content: center;
  border-radius: 0px;
  padding-left: 0px
}

.xpl-pagination__page-select .xpl-input-wrapper:hover .xpl-select-value.has-value {
  text-decoration-line: underline
}

.xpl-pagination__page-select .xpl-select-value.has-value {
      color: var(--xpl-color-action-primary-lm);
    }

.dark .xpl-pagination__page-select .xpl-select-value.has-value {
        color: var(--xpl-color-action-primary-dm);
      }

.xpl-pagination__page-select xpl-icon {
  display: none
}

.flatpickr-day.xpl-pagination__page-select xpl-icon{visibility:hidden}

.xpl-toolbar.xpl-pagination__page-select xpl-icon {
  display: none;
}

.xpl-pagination__rows-per-page {
  display: flex;
  align-items: center
}

.xpl-pagination__rows-per-page > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
}

.xpl-pagination__rows-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(106 109 125 / var(--tw-text-opacity, 1))
}

.dark .xpl-pagination__rows-label {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.xpl-pagination .xpl-select__trigger {
  height: 2.5rem
}

.xpl-pagination .xpl-input-wrapper {
  box-sizing: border-box;
  height: 2.5rem
}

/* Common styles */

.pager-common {
  display: flex;
  align-items: center;
  justify-content: center
}

.pager-button-common {
  z-index: 10;
  height: 2.5rem;
  width: 2.5rem;
  border-width: 1px
}

.pager-button-active-common {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px
}

.pager-button-focus-common {
  border-width: 0px;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-style: solid;
  outline-width: 1px;
  --tw-ring-offset-color: var(--xpl-color-background-lm)
}

.pager-button-disabled-common {
  cursor: not-allowed;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 0px
}

.page-info-common {
  display: flex;
  height: 2.5rem;
  min-width: 70px;
  align-items: center;
  justify-content: center;
  border-top-width: 1px;
  border-bottom-width: 1px;
  padding: 0px;
  font-size: 0.875rem;
  line-height: 1.25rem
}

.page-info-hover-common {
  border-color: var(--xpl-color-action-primary-lm)
}

.page-info-disabled-common {
  cursor: not-allowed
}

.page-info-active-common {
  background-color: var(--xpl-color-purple-100);
  color: var(--xpl-color-action-primary-lm)
}

.page-info-focus-common {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline: 2px solid transparent;
  outline-offset: 2px;
  outline-style: solid
}

/* Pager container */

.xpl-pagination__pager,
.xpl-pagination__pager-button {
  display: flex;
  align-items: center;
  justify-content: center
}

.dark .xpl-pagination__pager, .dark .xpl-pagination__pager-button {
  color: var(--xpl-color-text-primary-dm)
}

/* Pager buttons */

.xpl-pagination__pager-button {
  border-color: var(--xpl-color-stroke-lm);
  z-index: 10;
  height: 2.5rem;
  width: 2.5rem;
  border-width: 1px
}

.xpl-pagination__pager-button:hover,
  .xpl-pagination__pager-button:active {
  border-color: var(--xpl-color-action-primary-lm)
}

.xpl-pagination__pager-button:active,
  .xpl-pagination__pager-button:focus,
  .xpl-pagination__pager-button:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px
}

.xpl-pagination__pager-button:active {
  border-color: var(--xpl-color-action-primary-lm);
  --tw-ring-color: var(--xpl-color-action-primary-lm)
}

.xpl-pagination__pager-button:focus,
  .xpl-pagination__pager-button:focus-visible {
  outline-color: var(--xpl-color-gray-500);
  --tw-ring-color: var(--xpl-color-action-primary-hover-lm);
  border-width: 0px;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline-style: solid;
  outline-width: 1px;
  --tw-ring-offset-color: var(--xpl-color-background-lm)
}

.xpl-pagination__pager-button:disabled {
  border-color: var(--xpl-color-stroke-lm);
  background-color: var(--xpl-color-gray-100);
  color: var(--xpl-color-trivial-lm);
  cursor: not-allowed;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 0px
}

.dark .xpl-pagination__pager-button {
  border-color: var(--xpl-color-stroke-dm)
}

.dark .xpl-pagination__pager-button:hover,
    .dark .xpl-pagination__pager-button:active {
  border-color: var(--xpl-color-action-primary-dm)
}

.dark .xpl-pagination__pager-button:active {
  --tw-ring-color: var(--xpl-color-action-primary-dm);
  --tw-ring-offset-color: var(--xpl-color-background-dm)
}

.dark .xpl-pagination__pager-button:focus,
    .dark .xpl-pagination__pager-button:focus-visible {
  --tw-ring-color: var(--xpl-color-action-primary-hover-dm);
  --tw-ring-offset-color: var(--xpl-color-background-dm)
}

.dark .xpl-pagination__pager-button:disabled {
  border-color: var(--xpl-color-stroke-dm);
  background-color: var(--xpl-color-gray-800);
  color: var(--xpl-color-trivial-dm)
}

.xpl-pagination__pager-button-prev {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px
}

.xpl-pagination__pager-button-next {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px
}

.xpl-panel {
  background-color: var(--xpl-background-surface-default);
  border-color: var(--xpl-border-default);
  border-radius: var(--xpl-border-radius-default);
  border-style: solid;
  border-width: var(--xpl-border-small);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

.xpl-panel__accent {
    border-radius: var(--xpl-border-radius-default) var(--xpl-border-radius-default)
      var(--xpl-border-radius-none) var(--xpl-border-radius-none);
    height: var(--xpl-size-050);
    margin: calc(var(--xpl-border-small) * -1);
    margin-bottom: 0;
    position: relative;
    z-index: 10;
    width: auto;
    flex-shrink: 0;
  }

.xpl-panel__content {
  min-height: 0px;
  width: 100%;
  min-width: 0px;
  flex: 1 1 0%
}

/* --- Padding density --- */

.xpl-panel--padding-default > .xpl-panel__content {
    padding: var(--xpl-space-24);
  }

.xpl-panel--padding-tight > .xpl-panel__content {
    padding: var(--xpl-space-16);
  }

.xpl-panel--padding-loose > .xpl-panel__content {
    padding: var(--xpl-space-40);
  }

/* --- Accent colors --- */

.xpl-panel--accent-primary > .xpl-panel__accent {
    background-color: var(--xpl-background-brand-primary);
  }

.xpl-panel--accent-secondary > .xpl-panel__accent {
    background-color: var(--xpl-background-brand-secondary);
  }

.xpl-panel--accent-positive > .xpl-panel__accent {
    background-color: var(--xpl-background-accent-positive);
  }

.xpl-panel--accent-negative > .xpl-panel__accent {
    background-color: var(--xpl-background-accent-negative);
  }

.xpl-panel--accent-highlight > .xpl-panel__accent {
    background-color: var(--xpl-background-accent-highlight);
  }

/* --- Responsive padding (default+tight keep desktop values until mobile; loose steps at tablet) --- */

@media (max-width: 768px) {
    .xpl-panel--padding-loose > .xpl-panel__content {
      padding: var(--xpl-space-32);
    }
  }

@media (max-width: 480px) {
    .xpl-panel--padding-default > .xpl-panel__content {
      padding: var(--xpl-space-16);
    }

    .xpl-panel--padding-tight > .xpl-panel__content {
      padding: var(--xpl-space-8);
    }

    .xpl-panel--padding-loose > .xpl-panel__content {
      padding: var(--xpl-space-24);
    }
  }

.xpl-popover {
  --xpl-popover-margin: var(--xpl-space-8);
  position: relative;
  display: inline-block;
}

.xpl-popover__content,
  .xpl-popover__arrow {
  pointer-events: none;
  visibility: hidden;
  position: absolute
}

.xpl-popover__content {
    background-color: var(--xpl-background-surface-default);

    /* Tailwind `shadow-md` geometry (0 4px 6px -1px, 0 2px 4px -1px) with Foundation surface-transparent color tokens so the shadow is theme-aware. Foundation defines no shadow tokens — see TECH_DEBT.md. */
    box-shadow:
      0 4px 6px -1px var(--xpl-background-surface-transparent-10),
      0 2px 4px -1px var(--xpl-background-surface-transparent-5);
    color: var(--xpl-text-default);
    border: var(--xpl-border-small) solid var(--xpl-border-default);
    border-radius: var(--xpl-border-radius-default);

    /* 16px to match Figma (`p-[var(--padding/tight)]` = 16px on XPL-Popover node 15246:66170). The legacy pre-migration value was 24px (--xpl-size-spacing-24); design now specifies padding/tight (16px), so this intentionally deviates from the mechanical --xpl-size-spacing-24 → --xpl-space-24 token swap. See TECH_DEBT.md. */
    padding: var(--xpl-space-16);
    z-index: var(--xpl-z-index-100);
  }

.xpl-popover__arrow {
    z-index: var(--xpl-z-index-900);
  }

.xpl-popover__arrow .arrow-fill {
      fill: var(--xpl-background-surface-default);
    }

.xpl-popover__arrow .arrow-stroke {
      stroke: var(--xpl-border-default);
    }

.xpl-popover--is-open .xpl-popover__content,
    .xpl-popover--is-open .xpl-popover__arrow {
  visibility: visible
}

.xpl-popover--is-open .xpl-popover__content {
  pointer-events: auto
}

.xpl-popover--top-right .xpl-popover__content {
    margin-left: var(--xpl-popover-margin);
    left: 100%;
    top: 0px;
  }

.xpl-popover--middle-right .xpl-popover__content {
    transform: translateY(-50%);
    margin-left: var(--xpl-popover-margin);
    left: 100%;
    top: 50%;
  }

.xpl-popover--bottom-right .xpl-popover__content {
    margin-left: var(--xpl-popover-margin);
    left: 100%;
    bottom: 0px;
  }

.xpl-popover--top-left .xpl-popover__content {
    margin-right: var(--xpl-popover-margin);
    right: 100%;
    top: 0px;
  }

.xpl-popover--middle-left .xpl-popover__content {
    transform: translateY(-50%);
    margin-right: var(--xpl-popover-margin);
    right: 100%;
    top: 50%;
  }

.xpl-popover--bottom-left .xpl-popover__content {
    margin-right: var(--xpl-popover-margin);
    right: 100%;
    bottom: 0px;
  }

.xpl-popover--bottom-middle .xpl-popover__content {
    transform: translateX(-50%);
    margin-top: var(--xpl-popover-margin);
    left: 50%;
    top: 100%;
  }

.xpl-popover--top-middle .xpl-popover__content {
    transform: translateX(-50%);
    margin-bottom: var(--xpl-popover-margin);
    left: 50%;
    bottom: 100%;
  }

.xpl-popover--bottom-start .xpl-popover__content {
    margin-top: var(--xpl-popover-margin);
    left: 0px;
    top: 100%;
  }

.xpl-popover--bottom-end .xpl-popover__content {
    margin-top: var(--xpl-popover-margin);
    right: 0px;
    top: 100%;
  }

.xpl-popover--top-start .xpl-popover__content {
    margin-bottom: var(--xpl-popover-margin);
    left: 0px;
    bottom: 100%;
  }

.xpl-popover--top-end .xpl-popover__content {
    margin-bottom: var(--xpl-popover-margin);
    right: 0px;
    bottom: 100%;
  }

.xpl-popover--top-right .xpl-popover__arrow, .xpl-popover--middle-right .xpl-popover__arrow, .xpl-popover--bottom-right .xpl-popover__arrow {
      transform: translateX(-2px) translateY(-50%) rotate(90deg);
      top: 50%;
      left: 100%;
    }

.xpl-popover--top-left .xpl-popover__arrow, .xpl-popover--middle-left .xpl-popover__arrow, .xpl-popover--bottom-left .xpl-popover__arrow {
      transform: translateX(2px) translateY(-50%) rotate(-90deg);
      top: 50%;
      right: 100%;
    }

.xpl-popover--bottom-middle .xpl-popover__arrow {
      transform: translateX(-50%) translateY(-6px) rotate(180deg);
      top: 100%;
      left: 50%;
    }

.xpl-popover--top-middle .xpl-popover__arrow {
      transform: translateX(-50%) translateY(6px);
      bottom: 100%;
      left: 50%;
    }

.xpl-popover--bottom-start .xpl-popover__arrow, .xpl-popover--bottom-end .xpl-popover__arrow {
      transform: translateY(-6px) rotate(180deg);
      top: 100%;
    }

.xpl-popover--bottom-start .xpl-popover__arrow {
  left: 1rem
}

.xpl-popover--bottom-end .xpl-popover__arrow {
  right: 1rem
}

.xpl-popover--top-start .xpl-popover__arrow, .xpl-popover--top-end .xpl-popover__arrow {
      transform: translateY(6px);
      bottom: 100%;
    }

.xpl-popover--top-start .xpl-popover__arrow {
  left: 1rem
}

.xpl-popover--top-end .xpl-popover__arrow {
  right: 1rem
}

/* BEM note: This component uses flat hyphenated class names (e.g. xpl-progress-indicator-step)
   rather than BEM __/-- delimiters (xpl-progress-indicator__step). Migrating to BEM would be
   a breaking change for existing consumers that target these classes in overrides or tests.
   New components should follow BEM conventions per apollo-component-standards. */

.xpl-progress-indicator-container {
  position: relative;
  display: flex;
  align-items: flex-start;

    width: 100%;
    padding-inline: var(--xpl-space-16);
    gap: var(--xpl-space-16)
}

.xpl-progress-indicator-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

    flex: 1;
    min-width: 0
}

/* Connector line — absolute, from circle right edge to next circle left edge
       with 4px margin on each side matching the original inline gap. */

.xpl-progress-indicator-step:not(:last-child)::after {
  position: absolute;

      content: "";
      top: calc(var(--xpl-size-200) / 2);
      left: calc(50% + var(--xpl-size-200) / 2 + var(--xpl-space-4));
      width: calc(100% + var(--xpl-space-16) - var(--xpl-size-200) - var(--xpl-space-4) * 2);
      height: var(--xpl-size-0125);
      background: var(--xpl-border-default)
}

/* State: finished - active connector line */

.xpl-progress-indicator-step-finished:not(:last-child)::after {
      background: var(--xpl-background-action-primary-default);
    }

/* Content wrapper - stacks circle and label */

.xpl-progress-indicator-step-content {
  display: flex;
  flex-direction: column;
  align-items: center;

      max-width: 100%
}

/* Circle child of content - Indicator */

.xpl-progress-indicator-step-circle {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;

      width: var(--xpl-size-200);
      height: var(--xpl-size-200);
      border: var(--xpl-border-large) solid var(--xpl-border-default);
      border-radius: var(--xpl-border-radius-full);
      font-weight: var(--xpl-font-weight-medium);
      font-size: var(--xpl-font-size-title-5);
      color: var(--xpl-text-subdued)
}

/* Step number text inside circle */

.xpl-progress-indicator-step-number {
      font-family: var(--xpl-font-family-default);
      font-size: inherit;
      font-weight: inherit;
      color: inherit;
    }

/* Dot indicator (when showNumbers=false) */

.xpl-progress-indicator-step-dot {
      width: var(--xpl-size-075);
      height: var(--xpl-size-075);
      border-radius: var(--xpl-border-radius-full);
      background: var(--xpl-background-accent-neutral);
    }

.xpl-progress-indicator-step-active .xpl-progress-indicator-step-dot {
      background: var(--xpl-background-action-primary-default);
    }

/* Checkmark icon in finished state */

.xpl-progress-indicator-step-checkmark {
      color: inherit;
    }

/* State: finished - circle and children */

.xpl-progress-indicator-step-finished .xpl-progress-indicator-step-circle {
      background: var(--xpl-background-action-primary-default);
      border-color: var(--xpl-border-accent-default);
      color: var(--xpl-text-inverse);
    }

/* State: active - circle */

.xpl-progress-indicator-step-active .xpl-progress-indicator-step-circle {
      border-color: var(--xpl-border-focus);
      color: var(--xpl-text-link-default);
    }

/* Label text below the circle — in normal flow, wraps within column width */

.xpl-progress-indicator-step-text {
  text-align: center;

      font-size: var(--xpl-font-size-title-5);
      color: var(--xpl-text-subdued);
      margin-top: var(--xpl-space-4);
      max-width: 100%;
      overflow-wrap: break-word
}

/* State: active - label */

.xpl-progress-indicator-step-active .xpl-progress-indicator-step-text {
      color: var(--xpl-text-default);
    }

.xpl-progress-indicator-no-labels .xpl-progress-indicator-step-text {
  display: none
}

.flatpickr-day.xpl-progress-indicator-no-labels .xpl-progress-indicator-step-text{visibility:hidden}

.xpl-toolbar.xpl-progress-indicator-no-labels .xpl-progress-indicator-step-text {
  display: none;
}

/* Vertical layout */

.xpl-progress-indicator-vertical {
  display: flex;
  flex-direction: column;

    height: 100%
}

.xpl-progress-indicator-vertical .xpl-progress-indicator-container {
  flex-direction: column;
  align-items: flex-start;

      min-width: var(--xpl-size-0);
      height: 100%;
      padding-inline: var(--xpl-space-16);
      padding-block: var(--xpl-space-0);
      gap: var(--xpl-space-0)
}

.xpl-progress-indicator-vertical .xpl-progress-indicator-step {
  position: relative;
  display: grid;

      flex: 1;
      width: auto;
      min-width: 0;
      grid-template-columns: var(--xpl-size-200) 1fr;
      grid-template-rows: auto 1fr;
      grid-template-areas:
        "circle label"
        "line   .";
      gap: var(--xpl-space-4) var(--xpl-space-8);
      margin-bottom: var(--xpl-space-4);
      align-items: center
}

/* Hide horizontal connectors in vertical mode */

.xpl-progress-indicator-vertical .xpl-progress-indicator-step:not(:last-child)::after {
  display: none
}

.flatpickr-day.xpl-progress-indicator-vertical .xpl-progress-indicator-step:not(:last-child)::after{visibility:hidden}

.xpl-toolbar.xpl-progress-indicator-vertical .xpl-progress-indicator-step:not(:last-child)::after {
  display: none;
}

/* Vertical connector line (::before on step) */

.xpl-progress-indicator-vertical .xpl-progress-indicator-step:not(:last-child)::before {
        content: "";
        grid-area: line;
        justify-self: center;
        width: var(--xpl-size-0125);
        height: 100%;
        background: var(--xpl-border-default);
      }

/* State: finished - active vertical connector */

.xpl-progress-indicator-vertical .xpl-progress-indicator-step-finished:not(:last-child)::before {
        background: var(--xpl-background-action-primary-default);
      }

/* Last step - no line area in vertical */

.xpl-progress-indicator-vertical .xpl-progress-indicator-step:last-child {
        grid-template-rows: auto;
        grid-template-areas: "circle label";
        flex: 0 0 auto;
      }

/* Circle positioning in grid */

.xpl-progress-indicator-vertical .xpl-progress-indicator-step-circle {
        grid-area: circle;
        justify-self: center;
      }

/* Label positioning - beside circle in grid row */

.xpl-progress-indicator-vertical .xpl-progress-indicator-step-text {
        grid-area: label;
        justify-self: start;
        text-align: left;

        margin-top: var(--xpl-space-0);
      }

/* Modifier: no-labels in vertical mode */

.xpl-progress-indicator-vertical.xpl-progress-indicator-no-labels .xpl-progress-indicator-step {
        grid-template-columns: var(--xpl-size-200);
        grid-template-rows: var(--xpl-size-200) 1fr;
        grid-template-areas:
          "circle"
          "line";
        align-items: start;
      }

.xpl-progress-indicator-vertical.xpl-progress-indicator-no-labels .xpl-progress-indicator-step:last-child {
          grid-template-rows: var(--xpl-size-200);
          grid-template-areas: "circle";
        }

.xpl-progress-bar {
  display: block
}

.xpl-progress-bar__wrapper {
    gap: var(--xpl-space-8);
    display: flex;
    width: 100%;
    flex-direction: column;
  }

.xpl-progress-bar__header {
    gap: var(--xpl-space-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

.xpl-progress-bar__label {
    font-size: var(--xpl-font-size-callout);
    font-weight: var(--xpl-font-weight-normal);
    color: var(--xpl-text-default);
  }

.xpl-progress-bar__row {
    gap: var(--xpl-space-8);
    display: flex;
    width: 100%;
    align-items: center;
  }

.xpl-progress-bar__progress {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: none;
    background-color: var(--xpl-background-accent-neutral);
    border-radius: var(--xpl-border-radius-full);
    flex: 1 1 0%;
    overflow: hidden;
  }

.xpl-progress-bar--sm .xpl-progress-bar__progress {
      height: var(--xpl-size-025);
    }

.xpl-progress-bar--lg .xpl-progress-bar__progress {
      height: var(--xpl-size-0375);
    }

.xpl-progress-bar__progress::-webkit-progress-bar {
      background-color: var(--xpl-background-accent-neutral);
      border-radius: var(--xpl-border-radius-full);
    }

.xpl-progress-bar__progress::-webkit-progress-value {
      border-radius: var(--xpl-border-radius-full);
      -webkit-transition-property: width;
      transition-property: width;
      transition-duration: 300ms;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

.xpl-progress-bar__progress::-moz-progress-bar {
      border-radius: var(--xpl-border-radius-full);
    }

.xpl-progress-bar--default .xpl-progress-bar__progress::-webkit-progress-value {
      background-color: var(--xpl-background-accent-default);
    }

.xpl-progress-bar--default .xpl-progress-bar__progress::-moz-progress-bar {
      background-color: var(--xpl-background-accent-default);
    }

.xpl-progress-bar--success .xpl-progress-bar__progress::-webkit-progress-value, .xpl-progress-bar--complete .xpl-progress-bar__progress::-webkit-progress-value {
      background-color: var(--xpl-background-accent-positive-bold);
    }

.xpl-progress-bar--success .xpl-progress-bar__progress::-moz-progress-bar, .xpl-progress-bar--complete .xpl-progress-bar__progress::-moz-progress-bar {
      background-color: var(--xpl-background-accent-positive-bold);
    }

.xpl-progress-bar--error .xpl-progress-bar__progress::-webkit-progress-value {
      background-color: var(--xpl-background-accent-negative-bold);
    }

.xpl-progress-bar--error .xpl-progress-bar__progress::-moz-progress-bar {
      background-color: var(--xpl-background-accent-negative-bold);
    }

.xpl-progress-bar__track--indeterminate {
    background-color: var(--xpl-background-accent-neutral);
    border-radius: var(--xpl-border-radius-full);
    position: relative;
    flex: 1 1 0%;
    overflow: hidden;
  }

.xpl-progress-bar--sm .xpl-progress-bar__track--indeterminate {
      height: var(--xpl-size-025);
    }

.xpl-progress-bar--lg .xpl-progress-bar__track--indeterminate {
      height: var(--xpl-size-0375);
    }

.xpl-progress-bar__indeterminate {
    background-color: var(--xpl-background-accent-default);
    animation: xpl-progress-bar-indeterminate 1.5s infinite ease-out;
    border-radius: var(--xpl-border-radius-full);
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 50%;
  }

@keyframes xpl-progress-bar-indeterminate {
    0% {
      transform: translateX(-100%);
    }

    100% {
      transform: translateX(200%);
    }
  }

.xpl-progress-bar__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center
}

.xpl-progress-bar--success .xpl-progress-bar__icon,
  .xpl-progress-bar--complete .xpl-progress-bar__icon {
    color: var(--xpl-icon-positive);
  }

.xpl-progress-bar--error .xpl-progress-bar__icon {
    color: var(--xpl-icon-negative);
  }

.xpl-progress-bar__helper {
    font-size: var(--xpl-font-size-caption);
    font-weight: var(--xpl-font-weight-normal);
    color: var(--xpl-text-subdued);
  }

.xpl-progress-bar--error .xpl-progress-bar__helper {
    color: var(--xpl-text-negative);
  }

/* stylelint-disable color-no-hex, function-disallowed-list -- TODO: migrate to var(--xpl-*) tokens (see TECH_DEBT.md) */

/* stylelint-disable no-descending-specificity, because the rule was expecting some of the code below to appear before some code that is nested above. */

@media (max-width: 1023px) {

.xpl-secondary-nav nav::after {
        content: "";
        background: linear-gradient(270deg, #fff 13.64%, rgb(255 255 255 / 0%) 89.53%);
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: 0px;
        width: 1.75rem;
        overflow: hidden
    }

        .dark .xpl-secondary-nav nav::after {
          background: linear-gradient(270deg, rgb(32 30 41 / 100%) 20%, rgb(32 30 41 / 15%) 89%);
        }
      }

.xpl-secondary-nav nav {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.xpl-secondary-nav nav ul::-webkit-scrollbar {
      display: none;
    }

.dark .xpl-secondary-nav nav ul {
  --tw-bg-opacity: 1;
  background-color: rgb(32 30 41 / var(--tw-bg-opacity, 1))
}

.xpl-secondary-nav nav ul {
  display: flex;
  flex-direction: row;
  overflow-y: auto;
  white-space: nowrap;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

@media (min-width: 1024px) {

  .xpl-secondary-nav nav ul {
    flex-direction: column
  }

  .xpl-secondary-nav nav ul > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))
  }

  .xpl-secondary-nav nav ul {
    white-space: normal;
    padding-left: 0px;
    padding-right: 0px
  }
}

.xpl-secondary-nav nav ul .xpl-nav-item a {
    height: 52px;
  }

.dark .xpl-secondary-nav nav ul .xpl-nav-item a {
  --tw-bg-opacity: 1;
  background-color: rgb(32 30 41 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(106 109 125 / var(--tw-text-opacity, 1))
}

.dark .xpl-secondary-nav nav ul .xpl-nav-item a.active, .dark .xpl-secondary-nav nav ul .xpl-nav-item a:active, .dark .xpl-secondary-nav nav ul .xpl-nav-item a:focus {
  --tw-border-opacity: 1;
  border-color: rgb(249 145 112 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(24 22 31 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.xpl-secondary-nav nav ul .xpl-nav-item a.active,
    .xpl-secondary-nav nav ul .xpl-nav-item a:active,
    .xpl-secondary-nav nav ul .xpl-nav-item a:focus {
  --tw-border-opacity: 1;
  border-color: rgb(249 145 112 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(254 247 243 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(48 45 59 / var(--tw-text-opacity, 1))
}

.dark .xpl-secondary-nav nav ul .xpl-nav-item a:hover {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.xpl-secondary-nav nav ul .xpl-nav-item a:hover {
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(48 45 59 / var(--tw-text-opacity, 1))
}

.xpl-secondary-nav nav ul .xpl-nav-item a {
  border-bottom-width: 4px;
  border-right-width: 0px;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem
}

@media (min-width: 1024px) {

  .xpl-secondary-nav nav ul .xpl-nav-item a {
    height: 3rem;
    border-bottom-width: 0px;
    border-right-width: 4px
  }
}

.dark .xpl-secondary-nav {
  --tw-bg-opacity: 1;
  background-color: rgb(32 30 41 / var(--tw-bg-opacity, 1))
}

@media (min-width: 1024px) {
    .xpl-secondary-nav nav ul .xpl-nav-item a {
      width: 200px;
    }
  }

.xpl-secondary-nav {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 1.25rem;
  padding-bottom: 1rem
}

@media (min-width: 1024px) {

  .xpl-secondary-nav {
    display: block;
    padding: 0px
  }
}

.xpl-select__chevron-down {
    color: var(--xpl-color-gray-1000);
    position: absolute;
    right: 14px;
    top: 0px;
    display: flex;
    height: 100%;
    width: 1rem;
    align-items: center;
    justify-content: center;
  }

.dark .xpl-select__chevron-down {
      color: var(--xpl-color-gray-0);
    }

.xpl-select__trigger {
    height: 44px;
    outline: none;
    z-index: 10;
    display: flex;
    width: 100%;
    align-items: center;
    overflow: hidden;
    background-color: transparent;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(106 109 125 / var(--tw-text-opacity, 1));
  }

.xpl-select--disabled .xpl-select__trigger {
  cursor: not-allowed
}

.xpl-select--no-truncate .xpl-select__trigger {
  position: absolute;
  right: 0px;
  height: 100%;
  width: 100%
}

.xpl-select--no-truncate .xpl-input-wrapper {
    min-height: 46px;
  }

.xpl-select-value {
    width: calc(100% - (1rem + 0.75rem));
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(106 109 125 / var(--tw-text-opacity, 1));
  }

.dark .xpl-select-value {
  --tw-text-opacity: 1;
  color: rgb(153 155 168 / var(--tw-text-opacity, 1))
}

.dark .xpl-select-value.has-value {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.xpl-select .xpl-input-wrapper {
    padding: 0;
  }

.xpl-select--no-truncate .xpl-select-value {
  position: relative;
  white-space: normal;
  padding-right: 2rem
}

.xpl-select--no-truncate xpl-tag {
  z-index: 10
}

.xpl-select .xpl-dropdown:not(.xpl-dropdown--open) {
  visibility: hidden
}

.xpl-select-value--active {
  pointer-events: auto
}

.dark .xpl-select .xpl-input-wrapper button.has-value {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.custom-display-value--hidden {
  display: none
}

.flatpickr-day.custom-display-value--hidden{visibility:hidden}

.xpl-toolbar.custom-display-value--hidden {
  display: none;
}

.custom-display-value {
  width: 100%;
}

.custom-display-value--inactive {
  display: none;
}

/* Highly specific selector to override any span styles */

.xpl-placeholder--hidden,
span.xpl-placeholder--hidden,
.xpl-select .xpl-input-wrapper .xpl-select-value > span.xpl-placeholder--hidden {
  display: none;
}

/* stylelint-disable color-no-hex, function-disallowed-list -- TODO: migrate to var(--xpl-*) tokens (see TECH_DEBT.md) */

.xpl-slideout .slideout {
  position: fixed;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 50;
  display: flex;
  height: 100vh;
  min-width: 21.5rem;
  max-width: 37.5rem;
  flex-direction: column;

    background-color: var(--xpl-color-foreground-lm);
    box-shadow:
      -10px 0 15px -3px rgb(0 0 0 / 0.1),
      4px 0 6px -2px rgb(0 0 0 / 0.05);
    transform: translateX(0);
    transition: transform 0.5s ease-in-out
}

.xpl-slideout .slideout.slideout--closed {
      transform: translateX(100%);
    }

.xpl-slideout .slideout .header {
  margin: 1rem
}

.xpl-slideout .slideout .header .title {
  display: flex;
  align-items: center;
  justify-content: flex-start;

        color: var(--xpl-color-text-reverse-dm);
        font-size: var(--xpl-size-font-title-3);
        font-weight: var(--xpl-font-weight-bold)
}

.xpl-slideout .slideout .header .title xpl-button {
  margin-left: auto
}

.xpl-slideout .slideout .header .subtitle {
        color: var(--xpl-color-text-secondary-lm);
        font-size: var(--xpl-size-font-body);
        font-weight: var(--xpl-font-weight-normal);
      }

.xpl-slideout .slideout .header [slot="search"] .xpl-input-wrapper {
  margin-top: 0.75rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.xpl-slideout .slideout .header [slot="search"] .xpl-input-wrapper input {
            color: var(--xpl-color-text-primary-lm);
          }

.xpl-slideout .slideout .content {
  flex: 1 1 0%;
  overflow-y: auto;
  padding: 1rem
}

.xpl-slideout .slideout .content.has-shadow {
        box-shadow:
          inset 0 4px 6px -1px rgb(0 0 0 / 0.1),
          inset 0 2px 4px -1px rgb(0 0 0 / 0.06),
          inset 0 -4px 6px -1px rgb(0 0 0 / 0.1),
          inset 0 -2px 4px -1px rgb(0 0 0 / 0.06);
      }

.xpl-slideout .slideout [slot="content"] {
  display: flex;
  flex-direction: column;
  gap: 1rem
}

.xpl-slideout .slideout .footer {
  margin: 1rem;
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end
}

.xpl-slideout .slideout .footer [slot]:not(:first-child) {
  margin-left: 0.5rem
}

.xpl-slideout .slideout .footer [slot="tertiary"] {
  margin-right: auto
}

.xpl-slideout .slideout .footer ::slotted(*) {
      margin-left: 30px;
    }

.xpl-slideout .slideout .divider {
  margin: 0px
}

.dark .xpl-slideout .slideout {
  background-color: var(--xpl-color-foreground-dm);
}

.dark .xpl-slideout .slideout .header .title {
      color: var(--xpl-color-text-reverse-lm);
    }

.dark .xpl-slideout .slideout .header .subtitle {
      color: var(--xpl-color-text-secondary-dm);
    }

.dark .xpl-slideout .slideout .content {
    color: var(--xpl-color-text-reverse-lm);
  }

@media (max-width: 768px) {
  .xpl-slideout .slideout {
    bottom: 0px;
    top: auto;
    height: -moz-fit-content;
    height: fit-content;
    max-height: 90%;
    width: 100%;

    transform: translateY(0);
    transition: transform 0.5s ease-in-out
  }

    .xpl-slideout .slideout.slideout--closed {
      transform: translateY(100%);
    }

    .xpl-slideout .slideout .content {
    flex: 1 1 auto
  }

    .xpl-slideout .slideout .footer {
    display: flex;
    flex-direction: column-reverse
  }

      .xpl-slideout .slideout .footer [slot]:not(:first-child) {
    margin-left: 0px
  }

      .xpl-slideout .slideout .footer [slot]:not(:last-child) {
    margin-top: 0.5rem
  }

      .xpl-slideout .slideout .footer [slot="tertiary"] {
    margin-right: 0px
  }

      .xpl-slideout .slideout .footer button {
    width: 100%
  }
}

.xpl-table {
  min-width: 100%
}

.xpl-table > :not(tfoot, [hidden]) ~ :not(tfoot, [hidden]) {
    --tw-divide-y-reverse: 0;
    --tw-divide-opacity: 1;

    border-top-width: calc(var(--xpl-border-small) * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(var(--xpl-border-small) * var(--tw-divide-y-reverse));
    border-color: var(--xpl-border-default);
  }

.xpl-table--abs {
  position: absolute
}

.xpl-table-container {
    border-width: var(--xpl-border-small);
    border-color: var(--xpl-border-default);
    border-radius: var(--xpl-border-radius-default);
    background-color: var(--xpl-background-surface-default);
    overflow: auto;
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

.xpl-table th {
    padding-left: var(--xpl-space-24);
    padding-right: var(--xpl-space-24);
    padding-top: var(--xpl-space-12);
    padding-bottom: var(--xpl-space-12);
    color: var(--xpl-text-subdued);

    /* Figma source of truth: header cells use Title/5 (title-5 / medium / 1.4286) */
  }

.xpl-table th {
    font-size: var(--xpl-font-size-title-5);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.4286;
  }

.xpl-table th {
    white-space: nowrap;
    text-align: left;
  }

.xpl-table tr td {
    padding-left: var(--xpl-space-24);
    padding-right: var(--xpl-space-24);
    padding-top: var(--xpl-space-16);
    padding-bottom: var(--xpl-space-16);
    color: var(--xpl-text-subdued);

    /* Figma source of truth: content cells use Title/5 (title-5 / medium / 1.4286) */
  }

.xpl-table tr td {
    font-size: var(--xpl-font-size-title-5);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.4286;
  }

.xpl-table tr td {
    white-space: nowrap;
  }

/* Selected-row cells win over the default tbody and striped row backgrounds via specificity (no !important). The frozen first column is handled separately in the &--freeze block below. */

.xpl-table .xpl-table-row-selected td {
    background-color: var(--xpl-background-surface-information);
  }

.xpl-table thead {
    background-color: var(--xpl-background-surface-subtle);
  }

.xpl-table--striped tr:nth-of-type(even) {
    background-color: var(--xpl-background-surface-subtlest);
  }

.xpl-table tbody {
    background-color: var(--xpl-background-surface-default);
  }

.xpl-table tbody > tr:not(:last-child) {
    border-bottom-width: var(--xpl-border-small);
    border-bottom-color: var(--xpl-border-default);
  }

.xpl-table tfoot {
    border-top-width: var(--xpl-border-small);
    border-top-color: var(--xpl-border-strong);
    border-right: none;
    border-bottom: none;
  }

.xpl-table a {
    color: var(--xpl-text-link-default);
  }

.xpl-table a:hover {
      color: var(--xpl-text-link-hovered);
    }

.xpl-table label {
  display: flex;
  align-items: center
}

.xpl-table xpl-checkbox {
    margin-right: var(--xpl-space-24);
    margin-bottom: 0px;
    flex-shrink: 0;
  }

.xpl-table xpl-checkbox .xpl-label {
  display: none
}

.flatpickr-day.xpl-table xpl-checkbox .xpl-label{visibility:hidden}

.xpl-toolbar.xpl-table xpl-checkbox .xpl-label {
  display: none;
}

.xpl-table xpl-icon {
    margin-left: var(--xpl-space-8);
    cursor: pointer;
  }

.xpl-table .wrap {
  white-space: normal
}

.xpl-table--freeze th:first-child,
    .xpl-table--freeze td:first-child {
      border-color: var(--xpl-border-default);
      position: sticky;
      left: 0px;
      z-index: 10;
    }

.xpl-table--freeze th:first-child::after, .xpl-table--freeze td:first-child::after {
        background: linear-gradient(
          90deg,
          var(--xpl-background-surface-transparent-10) 0%,
          var(--xpl-background-surface-transparent-0) 100%
        );
        content: "";
        width: var(--xpl-space-24);
        position: absolute;
        left: 100%;
        top: 0px;
        display: block;
        height: 100%;
        opacity: 0;
        transition-property: opacity;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
      }

.xpl-table--freeze th:first-child {
      background-color: var(--xpl-background-surface-subtle);
    }

.xpl-table--freeze tr td:first-child,
    .xpl-table--freeze p {
      color: var(--xpl-text-strong);

      /* Figma source of truth: frozen first-column cells use Title/5 (title-5 / medium / 1.4286) */
    }

.xpl-table--freeze tr td:first-child,
    .xpl-table--freeze p {
    font-size: var(--xpl-font-size-title-5);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.4286;
    }

/* Frozen first column gets a subtle fill, except on selected rows so the selected-row highlight is preserved. */

.xpl-table--freeze tr:not(.xpl-table-row-selected) td:first-child {
      background-color: var(--xpl-background-surface-subtlest);
    }

.xpl-table--freeze.xpl-table--striped tr:nth-of-type(even):not(.xpl-table-row-selected) td:first-child {
    background-color: var(--xpl-background-surface-subtlest);
  }

.xpl-table--has-scrolled th:first-child::after,
    .xpl-table--has-scrolled td:first-child::after {
  opacity: 1
}

.xpl-table-header {
  display: contents
}

.xpl-table-header > *:first-child {
    border-left-width: var(--xpl-border-small);
    border-left-color: var(--xpl-border-default);
  }

.xpl-table-header-cell {
  border-color: var(--xpl-border-default);
  border-top-width: var(--xpl-border-small);
  border-right-width: var(--xpl-border-small);
  border-bottom-width: var(--xpl-border-small);
  background-color: var(--xpl-background-surface-subtle);
  color: var(--xpl-text-subdued);
  height: var(--xpl-size-350);
  min-width: var(--xpl-size-300);

  /* Figma source of truth: header cells use Title/5 (title-5 / medium / 1.4286) */
}

.xpl-table-header-cell {
    font-size: var(--xpl-font-size-title-5);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.4286;
}

.xpl-table-header-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0px;
}

.xpl-table-header-cell .xpl-checkbox-radio-container {
    margin-bottom: var(--xpl-space-4);
  }

.xpl-table-header-cell .xpl-checkbox-radio-container .xpl-label {
  padding: 0px
}

.xpl-table-header-cell .header-icon {
    color: var(--xpl-icon-default);
  }

.xpl-table-header-cell.non-sortable {
    padding: var(--xpl-space-16);

    /* truncation trio kept together: ellipsis only works with overflow-hidden + nowrap. Sortable cells omit overflow-hidden so the button's :focus-visible outline is not clipped. */

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
  }

.xpl-table-header-cell.sortable {
    height: var(--xpl-size-350);
    margin: 0px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-image: none;
    padding: 0px;
  }

.xpl-table-header-cell.sortable button {
      padding: var(--xpl-space-16);
      display: flex;
      width: 100%;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      border-style: none;
      background-image: none;
    }

.xpl-table-header-cell.sortable button .sort-icon {
        padding-left: var(--xpl-space-8);
      }

.xpl-table-header-cell.sortable button .sort-icon--sorted {
          color: var(--xpl-icon-information);
        }

.xpl-table-header-cell.sortable button:focus-visible {
        outline-color: var(--xpl-border-focus);
        outline-width: 2px;
        outline-offset: 2px;
      }

.xpl-tab {
  display: block
}

.xpl-tab--segment {
    position: relative;
    z-index: var(--xpl-z-index-100);
  }

.xpl-tab__button {
    color: var(--xpl-text-subdued);
    padding: 0 var(--xpl-space-4) var(--xpl-space-8);
    display: block;
    width: 100%;
    cursor: pointer;
    text-decoration-line: none;
  }

.xpl-tab__button:hover {
      color: var(--xpl-text-link-hovered);
    }

.xpl-tab__button:focus-visible {
      outline-color: var(--xpl-border-focus);
      outline-width: 2px;
      outline-offset: 2px;
    }

.xpl-tab__button:disabled {
  cursor: not-allowed
}

.xpl-tab--selected .xpl-tab__button {
    color: var(--xpl-text-default);
  }

.xpl-tab-panel {
  display: none;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem
}

.flatpickr-day.xpl-tab-panel{visibility:hidden}

.xpl-toolbar.xpl-tab-panel {
  display: none;
}

.xpl-tab-panel--selected {
  display: block
}

.xpl-tabs {
  display: block
}

.xpl-tabs__headings {
    border-bottom-color: var(--xpl-border-default);
    position: relative;
    display: none;
    gap: 2rem;
    border-bottom-width: 1px;
  }

.flatpickr-day.xpl-tabs__headings{visibility:hidden}

.xpl-toolbar.xpl-tabs__headings {
  display: none;
}

@media (min-width: 768px) {

  .xpl-tabs__headings {
    display: flex
  }
}

.xpl-tabs__active-bar {
    background-color: var(--xpl-background-brand-primary);
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 2px;
    transition-property: transform,width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: ease-in-out;
  }

.xpl-tabs__panels {
  display: block
}

@media (min-width: 768px) {

  .xpl-tabs:not(.xpl-tabs--segment) .xpl-tabs__mobile-select {
    display: none
  }
}

.xpl-tabs--segment .xpl-tabs__headings {
    box-sizing: border-box;
    display: none;
    max-width: none;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--xpl-space-8);
    padding: var(--xpl-space-4);
    border-width: var(--xpl-border-small);
    border-style: solid;
    border-color: var(--xpl-border-default);
    border-radius: var(--xpl-border-radius-button);
    background-color: var(--xpl-background-surface-default);

    /* Establish fresh stacking context so inner xpl-button z-indexes don't escape the headings container , no z-index-0 value found in foundation tokens */

    z-index: 0;
  }

@media (max-width: 480px) {

  .xpl-tabs--segment .xpl-tabs__headings {
    display: none
  }
}

@media (min-width: 481px) {

  .xpl-tabs--segment .xpl-tabs__headings {
    display: flex
  }
}

/* Segment mobile: same xpl-select + shared logic as default tabs; classNames adds
     xpl-tabs__mobile-select--segment on the select host — scoped CSS below matches
     xpl-button secondary (xpl-select cannot use xpl-button internally; no edits to xpl-select). */

.xpl-tabs--segment .xpl-tabs__mobile-select {
  display: none;
  width: 100%;
  max-width: 100%
}

.flatpickr-day.xpl-tabs--segment .xpl-tabs__mobile-select{visibility:hidden}

.xpl-toolbar.xpl-tabs--segment .xpl-tabs__mobile-select {
  display: none;
}

@media (max-width: 480px) {

  .xpl-tabs--segment .xpl-tabs__mobile-select {
    display: block
  }
}

@media (min-width: 481px) {

  .xpl-tabs--segment .xpl-tabs__mobile-select {
    display: none
  }
}

.xpl-tabs__mobile-select--segment.xpl-select .xpl-dropdown .xpl-dropdown-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--xpl-space-4);
  }

.xpl-tabs__mobile-select--segment.xpl-select .xpl-dropdown .xpl-dropdown-list-item svg {
      height: var(--xpl-size-100);
      width: var(--xpl-size-100);
    }

.xpl-tabs__mobile-select--segment.xpl-select .xpl-dropdown .xpl-dropdown-list-item__icon {
    flex-shrink: 0;
  }

.xpl-tabs--segment:not(.xpl-tabs--full-width) .xpl-tabs__headings {
    width: -moz-fit-content;
    width: fit-content;
  }

.xpl-tabs--segment:not(.xpl-tabs--full-width) .xpl-tab--segment {
    flex: 0 0 auto;
    min-width: 0;
  }

.xpl-tabs--segment.xpl-tabs--full-width .xpl-tabs__headings {
    /* At least as wide as the row; grow with tab content so the pill track (border/bg) wraps all pills. */
    width: -moz-max-content;
    width: max-content;
    min-width: 100%;
    align-self: stretch;
  }

/* Full-width segment pills: `xpl-button` grid squeezes `.xpl-button__icon`. Tabs-only override. */

.xpl-tabs--segment.xpl-tabs--full-width .xpl-tabs__headings .xpl-button button .xpl-button__icon,
    .xpl-tabs--segment.xpl-tabs--full-width .xpl-tabs__headings .xpl-button button svg {
      flex-shrink: 0;
      min-width: auto;
    }

/*
   * Segment + mobile: mirror xpl-button --secondary on the native select trigger only.
   * Tokens align with packages/apollo-core/src/css/button.css (&--secondary).
   */

/* xpl-select wraps the trigger in .xpl-input > .xpl-input-wrapper (input field chrome).
     Segment mobile uses a pill secondary trigger — remove the wrapper border/radius so only
     the trigger draws the control (avoids a boxy rounded-md frame around the pill). */

.xpl-tabs__mobile-select--segment.xpl-select .xpl-input {
  width: 100%;
  background-color: transparent
}

.xpl-tabs__mobile-select--segment.xpl-select .xpl-input-wrapper {
    border-style: none;
    border-width: 0;
    border-radius: var(--xpl-border-radius-button);
    padding: 0;
    background-color: transparent;
    border-width: 0px;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

.xpl-tabs__mobile-select--segment.xpl-select .xpl-input-wrapper:has(:focus-visible) {
    border-color: transparent;
  }

.xpl-tabs__mobile-select--segment.xpl-select .xpl-input--disabled .xpl-input-wrapper {
    background-color: transparent;
  }

/* Dropdown is a sibling of .xpl-input-wrapper (inside .xpl-input), not a descendant — scope via segment select + .xpl-dropdown */

.xpl-tabs__mobile-select--segment.xpl-select .xpl-select__trigger {
    box-sizing: border-box;
    width: 100%;
    height: var(--xpl-size-250);
    border: var(--xpl-border-small) solid var(--xpl-border-strong);
    border-radius: var(--xpl-border-radius-button);
    background-color: var(--xpl-background-action-secondary-default);
    color: var(--xpl-text-default);

    /* Label + chevron centered as one group (same row as xpl-button icon+label) */
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--xpl-space-6);
    text-align: center;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

.xpl-tabs__mobile-select--segment.xpl-select .xpl-select__trigger:hover {
      border-color: var(--xpl-border-hover);
      background-color: var(--xpl-background-action-secondary-hover);
    }

.xpl-tabs__mobile-select--segment.xpl-select .xpl-select__trigger:active {
      border-color: var(--xpl-border-active);
      background-color: var(--xpl-background-action-secondary-active);
    }

.xpl-tabs__mobile-select--segment.xpl-select .xpl-select__trigger:focus-visible {
      border-color: var(--xpl-border-strong);
      background-color: var(--xpl-background-action-secondary-focus);
      outline-color: var(--xpl-border-focus);
      outline-width: 2px;
      outline-offset: calc(var(--xpl-border-small) + var(--xpl-border-large));
    }

.xpl-tabs__mobile-select--segment.xpl-select .xpl-select__trigger:disabled,
    .xpl-tabs__mobile-select--segment.xpl-select .xpl-select__trigger:disabled:hover,
    .xpl-tabs__mobile-select--segment.xpl-select .xpl-select__trigger:disabled:focus-visible,
    .xpl-tabs__mobile-select--segment.xpl-select .xpl-select__trigger:disabled:active {
      border-color: var(--xpl-background-action-disabled);
      background-color: var(--xpl-background-action-disabled);
      color: var(--xpl-text-disabled);
      cursor: not-allowed;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-colored: 0 0 #0000;
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      outline: 2px solid transparent;
      outline-offset: 2px;
    }

.xpl-tabs__mobile-select--segment.xpl-select .xpl-select-value {
    position: static;
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: auto;
    padding-left: 0;
    color: var(--xpl-text-default);
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.xpl-tabs__mobile-select--segment.xpl-select .xpl-select__chevron-down {
    position: static;
    flex-shrink: 0;
    height: auto;
    color: var(--xpl-icon-default);
    width: 1rem;
  }

.xpl-tabs--full-width .xpl-tab {
  flex: 1 1 0%
}

.xpl-tabs--full-width .xpl-tab__button {
  text-align: center
}

/* stylelint-disable no-descending-specificity */

/* Deprecated: use .xpl-tag. Host carries both classes; this alias preserves
   specificity for consumers who override or chain on .xpl-tag-container. */

.xpl-tag-container {
  position: relative;
  display: inline-flex
}

.xpl-tag {
  --xpl-tag-border-color: var(--xpl-border-accent-information);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--xpl-space-4);
  height: var(--xpl-size-150);

  /* TECH_DEBT: min/max-width values from Figma spec have no matching Foundation token */
  min-width: 51px;
  max-width: 121px;
  padding: var(--xpl-space-2) var(--xpl-space-12);
  background-color: var(--xpl-background-surface-default);
  border-color: var(--xpl-tag-border-color);
  border-radius: var(--xpl-border-radius-button);
  border-style: solid;
  border-width: var(--xpl-border-small);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Higher specificity than global xpl-* button resets.
     Content carries the legacy .xpl-tag class for backward compat,
     so these overrides neutralize root .xpl-tag styles that leak in. */

.xpl-tag .xpl-tag__content {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: var(--xpl-space-0);
    height: auto;
    max-width: none;
    background-color: transparent;
    border-radius: var(--xpl-border-radius-none);
    color: var(--xpl-text-strong);
    font-size: var(--xpl-font-size-body);
    font-weight: var(--xpl-font-weight-normal);
    line-height: 1.428;
    text-align: left;
    min-width: 0px;
    flex: 1 1 0%;
    border-width: 0px;
  }

.xpl-tag .xpl-tag__content:focus-visible {
      border-radius: var(--xpl-border-radius-small);
      outline-color: var(--xpl-border-focus);
      outline-width: 2px;
      outline-offset: 2px;
    }

.xpl-tag__dismiss {
    background: var(--xpl-background-surface-transparent-0);
    color: var(--xpl-icon-default);
    padding: 0;
    margin: 0;
    width: var(--xpl-size-100);
    height: var(--xpl-size-100);
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-width: 0px;
  }

.xpl-tag__dismiss:focus-visible {
      border-radius: var(--xpl-border-radius-small);
      outline-color: var(--xpl-border-focus);
      outline-width: 2px;
      outline-offset: 2px;
    }

.xpl-tag:not(.xpl-tag--dismissible) .xpl-tag__dismiss {
  display: none
}

.flatpickr-day.xpl-tag:not(.xpl-tag--dismissible) .xpl-tag__dismiss{visibility:hidden}

.xpl-toolbar.xpl-tag:not(.xpl-tag--dismissible) .xpl-tag__dismiss {
  display: none;
}

.xpl-tag:hover:not(.xpl-tag--disabled) {
    background-color: var(--xpl-background-surface-information-bold);
  }

.xpl-tag--sm {
    /* TECH_DEBT: min/max-width values from Figma spec have no matching Foundation token */
    min-width: 43px;
    max-width: 110px;
    height: var(--xpl-size-125);
    padding: var(--xpl-space-2) var(--xpl-space-8);
  }

.xpl-tag--sm:not(.xpl-tag--dismissible) {
      padding-right: var(--xpl-space-8);
    }

.xpl-tag--sm .xpl-tag__content {
      font-size: var(--xpl-font-size-callout);
      font-weight: var(--xpl-font-weight-semibold);
      line-height: 1.33;
    }

.xpl-tag--dragging {
    background-color: var(--xpl-background-surface-information-bold);
  }

.xpl-tag--dragging,
    .xpl-tag--dragging .xpl-tag__content,
    .xpl-tag--dragging .xpl-tag__dismiss {
      cursor: grabbing;
    }

.xpl-tag--dragging {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.xpl-tag--disabled {
    --xpl-tag-border-color: var(--xpl-border-accent-subtle);

    background-color: var(--xpl-background-surface-subtle);
    color: var(--xpl-text-disabled);
    cursor: not-allowed;
  }

.xpl-tag--disabled .xpl-tag__content:hover {
      background-color: transparent;
    }

.xpl-tag--disabled .xpl-tag__content {
      color: var(--xpl-text-disabled);
      cursor: not-allowed;
    }

.xpl-tag--disabled .xpl-tag__dismiss {
      color: var(--xpl-icon-disabled);
      cursor: not-allowed;
    }

.xpl-tag--draggable:not(.xpl-tag--dragging) {
  cursor: grab
}

.xpl-tag--draggable:not(.xpl-tag--dragging) .xpl-tag__content {
  cursor: grab
}

/* stylelint-disable color-no-hex, function-disallowed-list -- TODO: migrate to var(--xpl-*) tokens (see TECH_DEBT.md) */

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.xpl-toast {
  display: flex;
  min-width: 20rem;
  max-width: 32rem;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.25rem;
  padding: 1rem;
  position: fixed;
  top: 2.5rem;
  right: 2.5rem;
  border-width: 1px;
  border-color: var(--xpl-color-secondary-lm);
  background-color: var(--xpl-color-secondary-bg-lm);

  box-shadow:
    0 10px 15px -3px rgb(0 0 0/ 0.1),
    0 4px 6px -2px rgb(0 0 0/ 0.05);
  animation: fadeIn 0.5s forwards
}

.xpl-toast--warning {
    background-color: var(--xpl-color-negative-bg-lm);
    border-color: var(--xpl-color-negative-lm);
  }

.xpl-toast--success {
    background-color: var(--xpl-color-positive-bg-lm);
    border-color: var(--xpl-color-green-700);
  }

.xpl-toast--dismissed {
    animation: fadeOut 0.5s forwards;
  }

.xpl-toast__left {
  display: flex;
  align-items: center
}

.xpl-toast__notification {
  display: flex;
  flex-direction: column
}

.xpl-toast__title {
  margin: 0px;
  font-weight: 500;

    font-size: var(--xpl-size-font-title-5)
}

.xpl-toast__title p {
  margin: 0px
}

.xpl-toast__caption {
  margin: 0px;
  overflow-wrap: break-word;

    font-size: var(--xpl-size-font-callout)
}

.xpl-toast__caption p {
  margin: 0px
}

.xpl-toast__action {
  margin-left: 1rem
}

.xpl-toast__icon {
  margin-right: 1rem
}

.xpl-toast__icon--neutral {
      color: var(--xpl-color-secondary-lm);
    }

.xpl-toast__icon--warning {
      color: var(--xpl-color-negative-lm);
    }

.xpl-toast__icon--success {
      color: var(--xpl-color-green-700);
    }

.xpl-toast__close {
  margin-left: 1rem
}

.xpl-toast__close button {
  padding: 0.5rem;

      border-radius: 54px
}

.xpl-toast__close button:hover {
  --tw-border-opacity: 1;
  border-color: rgb(234 235 239 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.xpl-toast__close button:focus,
      .xpl-toast__close button:active {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(238 239 243 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

@media screen and (max-width: 768px) {
  .xpl-toast {
    position: fixed;
    bottom: 2rem;

    top: unset;
    right: unset;
    left: 50%;
    transform: translateX(-50%)
  }
}

/* stylelint-disable color-no-hex -- TODO: migrate to var(--xpl-*) tokens (see TECH_DEBT.md) */

.xpl-toggle-container {
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap
}

.xpl-toggle {
  --tw-ring-color: var(--xpl-color-secondary-lm);

  border-radius: 12px;
  border-color: #d1d5db;
  height: 24px;
  top: 2px;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  width: 44px;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  --tw-bg-opacity: 1;
  background-color: rgb(225 226 232 / var(--tw-bg-opacity, 1));
}

.xpl-toggle:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(153 155 168 / var(--tw-bg-opacity, 1))
}

.xpl-toggle:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px
}

.xpl-toggle-container label {
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(48 45 59 / var(--tw-text-opacity, 1))
}

/* label (to the right of toggle) */

.xpl-toggle + label {
  margin-top: 0.25rem;
  cursor: pointer;
  padding-left: 1rem;
  padding-right: 1rem;
  vertical-align: middle;
  font-size: 0.875rem;
  line-height: 1.25rem
}

.xpl-toggle--small + label {
  margin-top: 0px
}

.xpl-toggle-container--disabled label {
  color: var(--xpl-color-text-secondary-lm);
  cursor: not-allowed;
}

.dark .xpl-toggle-container label {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

/* heading */

.xpl-toggle-container label:first-child {
  display: block;
  width: 100%;
  padding-bottom: 0.25rem
}

/* description */

.xpl-toggle-container small {
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(153 155 168 / var(--tw-text-opacity, 1))
}

.dark .xpl-toggle {
  --tw-ring-offset-color: var(--xpl-color-gray-900);
  --tw-ring-color: var(--xpl-color-secondary-dm);
  --tw-bg-opacity: 1;
  background-color: rgb(106 109 125 / var(--tw-bg-opacity, 1));
}

.dark .xpl-toggle:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(153 155 168 / var(--tw-bg-opacity, 1))
}

.xpl-toggle::after {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4L7 7M1 7L4 4L1 7ZM4 4L7 1L4 4ZM4 4L1 1L4 4Z' stroke='%236A6D7D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border-radius: 50%;
  box-shadow: 0 1px 3px 0 #0000001a;
  content: "";
  display: block;
  height: 20px;
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.dark .xpl-toggle + label {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.xpl-toggle:checked {
  background-color: var(--xpl-color-secondary-lm);
}

.xpl-toggle-container--disabled .xpl-toggle,
.xpl-toggle-container--disabled .xpl-toggle:hover {
  cursor: not-allowed;
  --tw-bg-opacity: 1;
  background-color: rgb(238 239 243 / var(--tw-bg-opacity, 1))
}

.dark .xpl-toggle:checked {
  background-color: var(--xpl-color-secondary-dm);
}

.dark .xpl-toggle-container--disabled .xpl-toggle {
  background-color: var(--xpl-color-action-disabled-dm);
}

.xpl-toggle:checked:hover {
  background-color: var(--xpl-color-secondary-hover-lm);
}

.xpl-toggle:checked::after {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1L4 7L1 4' stroke='%236923F4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  transform: translateX(20px);
}

.xpl-toggle:disabled::after {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1))
}

.xpl-toggle:checked:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1L4 7L1 4' stroke='%234D1AB2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.xpl-toggle:disabled:checked,
.xpl-toggle:disabled:checked:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(221 209 255 / var(--tw-bg-opacity, 1))
}

.dark .xpl-toggle:checked:hover {
  background-color: var(--xpl-color-secondary-hover-dm);
}

.dark .xpl-toggle:disabled:checked,
.dark .xpl-toggle:disabled:checked:hover {
  background-color: var(--xpl-color-action-disabled-dm);
}

.xpl-toggle:disabled:checked::after {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1L4 7L1 4' stroke='%23A480FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.dark .xpl-toggle:disabled::after {
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4L7 7M1 7L4 4L1 7ZM4 4L7 1L4 4ZM4 4L1 1L4 4Z' stroke='%23272431' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  --tw-bg-opacity: 1;
  background-color: rgb(106 109 125 / var(--tw-bg-opacity, 1));
}

.dark .xpl-toggle:disabled:checked::after {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1L4 7L1 4' stroke='%23272431' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.xpl-toggle--small {
  border-radius: 8px;
  height: 16px;
  width: 28px;
}

.xpl-toggle--small::after {
  background-position: center calc(50% + 0.5px);
  background-size: 50% auto;
  height: 12px;
  width: 12px;
}

.xpl-toggle--small:checked::after {
  background-size: 60% auto;
  transform: translateX(12px);
}

/* stylelint-disable color-no-hex, function-disallowed-list -- TODO: migrate to var(--xpl-*) tokens (see TECH_DEBT.md) */

.xpl-toolbar .toolbar {
  margin-bottom: 0.5rem;
  display: flex;
  height: 3.5rem;
  align-items: center;
  border-top-width: 1px;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(106 109 125 / var(--tw-border-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;

  background-color: var(--xpl-color-foreground-dm);
  box-shadow:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px 0 rgb(0 0 0 / 0.06)
}

.xpl-toolbar .toolbar .selected-item-count {
  margin-right: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-right-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(225 226 232 / var(--tw-border-opacity, 1));
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-right: 1.5rem;

    color: var(--xpl-color-text-reverse-lm);
    font-size: var(--xpl-size-font-title-5)
}

.xpl-toolbar .toolbar .actions {
  display: flex;
  width: 100%
}

.xpl-toolbar .toolbar .actions [slot="actions-left"] {
  margin-right: 1rem
}

.xpl-toolbar .toolbar .actions [slot="actions-right"] {
  margin-left: 1rem
}

.xpl-toolbar.hidden {
  display: none;
}

.xpl-tooltip {
  /* Offset from the trigger. 12.8px rounded to the nearest spacing token (12px). */
  --xpl-tooltip-margin: var(--xpl-space-12);

  /* Positional ratio for left/right edge alignment — not a themeable size/spacing value, so no Foundation token applies. */
  --xpl-tooltip-body-horizontal-offset: 60%;

  /* Negative margin that seats the arrow against the body. The arrow SVG has a 5px
     transparent gap above its triangle; pulling back 6px (5px gap + 1px border
     overlap) tucks the triangle's flat edge under the body border so there is no
     seam. Matches --xpl-space-6 but is intrinsic to the arrow asset, not a token. */
  --xpl-tooltip-arrow-overlap-y: calc(-1 * var(--xpl-space-6));
  --xpl-tooltip-arrow-overlap-x: calc(var(--xpl-tooltip-arrow-overlap-y) + 1.5px);

  background-color: var(--xpl-background-surface-default);
  color: var(--xpl-text-default);
  padding: var(--xpl-space-6) var(--xpl-space-8);
  border-radius: var(--xpl-border-radius-small);
  border: var(--xpl-border-small) solid var(--xpl-border-default);

  /* Tailwind `shadow-md` geometry (0 4px 6px -1px, 0 2px 4px -1px) with Foundation surface-transparent color tokens so the shadow is theme-aware. Foundation defines no shadow tokens — see TECH_DEBT.md. */
  box-shadow:
    0 4px 6px -1px var(--xpl-background-surface-transparent-10),
    0 2px 4px -1px var(--xpl-background-surface-transparent-5);
}

.xpl-tooltip {
  font-size: var(--xpl-font-size-callout);
  font-weight: normal;
  line-height: 1.3333;
}

.xpl-tooltip {

  visibility: hidden;

  position: absolute;

  width: -moz-max-content;

  width: max-content;

  cursor: pointer;

  white-space: pre-wrap;

  overflow-wrap: break-word;

  z-index: var(--xpl-z-index-900);
}

/* Constrain width on small screens so a long tooltip cannot overflow the viewport. Figma does not define a desktop max width, so the tooltip sizes to its content there. */

@media screen and (max-width: 768px) {

.xpl-tooltip {
    max-width: var(--xpl-size-700)
}
  }

/* Position variants */

/* Top Middle */

.xpl-tooltip--top-middle {
    /* translate/rotate are written out: Apollo's build has no Tailwind base layer,
       so the --tw-* transform defaults are undefined and `@apply` transform
       utilities would emit an invalid (dropped) transform. */
    transform: translateX(-50%);
    margin-bottom: var(--xpl-tooltip-margin);
    bottom: 100%;
    left: 50%;
  }

/* Top Left */

.xpl-tooltip--top-left {
    right: var(--xpl-tooltip-body-horizontal-offset);
    margin-bottom: var(--xpl-tooltip-margin);
    bottom: 100%;
  }

/* Top Right */

.xpl-tooltip--top-right {
    left: var(--xpl-tooltip-body-horizontal-offset);
    margin-bottom: var(--xpl-tooltip-margin);
    bottom: 100%;
  }

/* Bottom Middle */

.xpl-tooltip--bottom-middle {
    transform: translateX(-50%);
    margin-top: var(--xpl-tooltip-margin);
    top: 100%;
    left: 50%;
  }

/* Bottom Left */

.xpl-tooltip--bottom-left {
    right: var(--xpl-tooltip-body-horizontal-offset);
    margin-top: var(--xpl-tooltip-margin);
    top: 100%;
  }

/* Bottom Right */

.xpl-tooltip--bottom-right {
    left: var(--xpl-tooltip-body-horizontal-offset);
    margin-top: var(--xpl-tooltip-margin);
    top: 100%;
  }

/* Left */

.xpl-tooltip--left {
    transform: translateY(-50%);
    margin-right: var(--xpl-tooltip-margin);
    right: 100%;
    top: 50%;
  }

/* Right */

.xpl-tooltip--right {
    transform: translateY(-50%);
    margin-left: var(--xpl-tooltip-margin);
    left: 100%;
    top: 50%;
  }

/* Arrow — nested inside the body so it is positioned against the body's own box
     (edges, width, height) rather than the trigger. This matches the Figma
     structure where the tail is a child of the tooltip content frame, and means
     the arrow stays attached to the body regardless of trigger width, padding, or
     offset token. */

.xpl-tooltip .xpl-tooltip-arrow {
    z-index: var(--xpl-z-index-900);
    pointer-events: none;
    visibility: hidden;
    position: absolute;
  }

.xpl-tooltip .xpl-tooltip-arrow__fill {
      fill: var(--xpl-background-surface-default);
    }

.xpl-tooltip .xpl-tooltip-arrow__stroke {
      stroke: var(--xpl-border-default);
    }

/* Horizontal placement of the arrow within the body for the corner variants.
     The body extends away from the trigger (e.g. a `*-left` body is offset left of
     the trigger via --xpl-tooltip-body-horizontal-offset), so the arrow sits on the
     body edge nearest the trigger: `*-left` → right edge, `*-right` → left edge.
     The 16px inset matches main's arrow placement. */

.xpl-tooltip--top-left .xpl-tooltip-arrow,
  .xpl-tooltip--bottom-left .xpl-tooltip-arrow {
    right: var(--xpl-space-16);
  }

.xpl-tooltip--top-right .xpl-tooltip-arrow,
  .xpl-tooltip--bottom-right .xpl-tooltip-arrow {
    left: var(--xpl-space-16);
  }

/* The arrow SVG has a 5px transparent gap above its triangle. The negative
     overlap margin pulls the SVG back so the triangle's flat top seats under the
     body's 1px border, leaving no seam between arrow and body. */

/* Vertical placement for top variants: arrow hangs below the body, pointing down
     toward the trigger. The default SVG already points down (no rotation). */

.xpl-tooltip--top-left .xpl-tooltip-arrow,
  .xpl-tooltip--top-right .xpl-tooltip-arrow {
    margin-top: var(--xpl-tooltip-arrow-overlap-y);
    top: 100%;
  }

.xpl-tooltip--top-middle .xpl-tooltip-arrow {
    transform: translateX(-50%);
    margin-top: var(--xpl-tooltip-arrow-overlap-y);
    top: 100%;
    left: 50%;
  }

/* Bottom variants: arrow sits above the body, rotated 180deg to point up. */

.xpl-tooltip--bottom-left .xpl-tooltip-arrow,
  .xpl-tooltip--bottom-right .xpl-tooltip-arrow {
    transform: rotate(180deg);
    margin-bottom: var(--xpl-tooltip-arrow-overlap-y);
    bottom: 100%;
  }

.xpl-tooltip--bottom-middle .xpl-tooltip-arrow {
    transform: translateX(-50%) rotate(180deg);
    margin-bottom: var(--xpl-tooltip-arrow-overlap-y);
    bottom: 100%;
    left: 50%;
  }

/* Left/right variants: arrow is centered on the body's vertical axis and points
     horizontally toward the trigger. */

.xpl-tooltip--left .xpl-tooltip-arrow {
    transform: translateY(-50%) rotate(-90deg);
    margin-left: var(--xpl-tooltip-arrow-overlap-x);
    top: 50%;
    left: 100%;
  }

.xpl-tooltip--right .xpl-tooltip-arrow {
    transform: translateY(-50%) rotate(90deg);
    margin-right: var(--xpl-tooltip-arrow-overlap-x);
    top: 50%;
    right: 100%;
  }

.xpl-tooltip-container {
  position: relative;
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer
}

.xpl-tooltip-container:hover .xpl-tooltip,
    .xpl-tooltip-container:hover .xpl-tooltip-arrow {
  visibility: visible
}

/*
 * Top navigation: `xpl-top-nav` shell, `xpl-top-nav-item`, `xpl-nav-header-menu`, mobile drawer.
 * Tokens: `@xplortech/apollo-foundation/.../variables.css`.
 *
 * Structure (apollo-component-standards / CONTRIBUTING):
 * - One physical file, **three BEM roots** (`xpl-top-nav`, `xpl-top-nav-item`, `xpl-nav-header-menu`) so shared
 *   tokens and cross-context `xpl-top-nav-item` rules (bar vs drawer vs account menu) stay in cascade order.
 * - Where a rule set belongs to a **single** root, use **native nesting** (`&__element`, `&--modifier`) under that
 *   root — PostCSS `tailwindcss/nesting` compiles to the same flat selectors as before.
 * - Selectors that tie two roots or contexts (e.g. `.xpl-nav-header-menu .xpl-top-nav-item` or `.xpl-top-nav__brand-bar
 *   xpl-top-nav-item`) stay **top-level** so source order and specificity stay unchanged.
 * `no-descending-specificity` is disabled file-wide for the reasons above — approved for this file only.
 */

/* stylelint-disable no-descending-specificity */

/*
 * Fixed layout widths from design — composed from Foundation `--xpl-size-*` (+ `--xpl-border-small` for 217px) so
 * dropdown max (250px) and nav-header column / mobile drawer (217px) stay on-token without raw `rem` literals.
 * Scoped to the top-nav component roots so they don't pollute :root.
 */

.xpl-top-nav,
.xpl-top-nav-item,
.xpl-nav-header-menu {
  --xpl-top-nav-dropdown-max-width: 15.625rem; /* 250px */
  --xpl-top-nav-panel-width: 15rem; /* 240px */

  /* Mobile drawer: viewport minus horizontal gutter — single custom property avoids ad-hoc `calc()` at use-site. */
  --xpl-top-nav-mobile-drawer-max-width: calc(100vw - var(--xpl-space-32));
  --xpl-top-nav-mobile-drawer-max-height: calc(100vh - var(--xpl-size-350));
}

/* ======================================================
    xpl-top-nav-item (lowest specificity first)
    ====================================================== */

.xpl-top-nav-item {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  height: 100%;
  cursor: pointer
}

/*
  * Native `[hidden]` UA rule (`display: none`) loses to `.xpl-top-nav-item { display: inline-block }` above
  * (same specificity, class wins by source order). Element + attribute selector restores the expected behavior.
  */

xpl-top-nav-item[hidden] {
  display: none
}

xpl-top-nav-item.flatpickr-day[hidden]{visibility:hidden}

xpl-top-nav-item.xpl-toolbar[hidden] {
  display: none;
}

.xpl-top-nav-item__inner {
  padding: var(--xpl-space-8);
  font-size: var(--xpl-font-size-title-4);
  color: var(--xpl-text-subdued);
  font-weight: var(--xpl-font-weight-medium);

  /* Figma: 8px gap between label and leading/trailing icon slots (matches every other context override below). */
  gap: var(--xpl-space-8);
  box-sizing: border-box;
  display: flex;
  height: 100%;
  min-width: 0px;
  max-width: 100%;
  align-content: center;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* xpl-nav-header-menu / xpl-top-nav-menu — host + inner base before shared bar `:focus-visible` */

xpl-nav-header-menu xpl-top-nav-item.xpl-top-nav-item,
xpl-top-nav-menu xpl-top-nav-item.xpl-top-nav-item {
  width: 100%;
  border-bottom-width: 0px
}

xpl-nav-header-menu xpl-top-nav-item > .xpl-top-nav-item__inner,
xpl-top-nav-menu xpl-top-nav-item > .xpl-top-nav-item__inner {
  padding: var(--xpl-space-10) var(--xpl-space-12);
  gap: var(--xpl-space-8);
  color: var(--xpl-text-default);
  justify-content: flex-start;
}

/* Focus is on the inner `<a>` / `<button>` (tabIndex), not the host — use `:focus-visible` here (see side-nav.css). */

xpl-top-nav-item > .xpl-top-nav-item__inner:focus-visible {
  outline-color: var(--xpl-border-focus);
  outline-width: 2px;
  outline-offset: 2px;
}

.xpl-top-nav-item__label {
  /* `flex-1` + `min-w-0`: label column takes remaining width in the row so ellipsis can apply (see `.xpl-nav-left` flex chain). */
  margin: 0px;
  min-width: 0px;
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Row context only (menu rows with a `description`): wraps label + description in a column so both share the
 * flex-1 / min-w-0 track that `.xpl-top-nav-item__label` alone occupies in the no-description case above.
 * No `display` beyond `flex flex-col` here — this wrapper (unlike `__leading` / `__trailing`) is not a bare
 * icon slot column, it owns its own two-row layout (Figma "Label+Desc.").
 */

.xpl-top-nav-item__label-group {
  gap: var(--xpl-space-0);
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  flex-direction: column;
}

.xpl-top-nav-item__label-group .xpl-top-nav-item__label {
  flex: none
}

.xpl-top-nav-item__description {
  font-size: var(--xpl-font-size-callout);
  color: var(--xpl-text-subdued);
  margin: 0px;
  min-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Leading / trailing icon slot columns. Deliberately no `display` here (side-nav lesson, see
 * `xpl-side-nav-item.tsx`): as flex items of `.xpl-top-nav-item__inner` (`display: flex`) they are
 * blockified automatically, and the slotted `xpl-icon` handles its own internal centering. Adding
 * `display: flex` / `display: grid` here mis-aligns the slotted icon's SVG.
 */

.xpl-top-nav-item__leading,
.xpl-top-nav-item__trailing {
  flex-shrink: 0
}

xpl-top-nav-item a,
xpl-top-nav-item button {
  cursor: inherit;
  font: inherit;

  /* Reset the native `<button>` UA chrome (grey background, system appearance, centered text) so the button-mode
   * inner control renders identically to the anchor-mode one; `text-align` follows the label's own flex layout. */
  text-align: inherit;
  margin: 0px;
  display: flex;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  align-items: center;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
}

/* Bar / drawer row control only (`href` on item). Nested `<a>` in `slot="dropdown"` stay untouched. */

xpl-top-nav-item > a.xpl-top-nav-item__inner {
  text-decoration-line: none
}

xpl-top-nav-item xpl-icon,
xpl-top-nav-item svg {
  fill: currentcolor;
  color: inherit;
  width: var(--xpl-size-125);
  height: var(--xpl-size-125);
  display: flex;
  flex-shrink: 0;
  justify-content: center;
}

/*
  * Bar / drawer item states (top bar, mobile drawer — not nav-header menu chrome).
  * `--active`: persistent link accent (`active` prop). `--selected`: current page (`selected` prop + aria-current).
  */

xpl-top-nav-item.xpl-top-nav-item--active > .xpl-top-nav-item__inner {
  color: var(--xpl-text-link-default);
  font-weight: var(--xpl-font-weight-medium);
}

xpl-top-nav-item.xpl-top-nav-item--selected > .xpl-top-nav-item__inner {
  color: var(--xpl-text-strong);
  font-weight: var(--xpl-font-weight-medium);
}

/*
 * Active-descendant hook: a dropdown trigger whose panel contains an `--active` / `--selected` row (however deep)
 * gets the same accent as `--active` itself, so a parent product/group stays highlighted while its current child
 * is open elsewhere (e.g. desktop flyout, PR 2/3). Synced via `hasActiveDescendant` in `xpl-top-nav-item.tsx`.
 */

xpl-top-nav-item.xpl-top-nav-item--has-active-descendant > .xpl-top-nav-item__inner {
  color: var(--xpl-text-link-default);
  font-weight: var(--xpl-font-weight-medium);
}

/* Right side username (e.g. profile trigger): same as nav header username */

.xpl-nav-right xpl-top-nav-item > .xpl-top-nav-item__inner {
  font-size: var(--xpl-font-size-title-4);
  color: var(--xpl-text-strong);
  gap: var(--xpl-space-8);
}

/* Menu list rows (`xpl-nav-header-menu` default slot, `xpl-top-nav-menu` default slot): row gap between icon and label */

.xpl-nav-header-menu__slot xpl-top-nav-item > .xpl-top-nav-item__inner,
.xpl-top-nav-menu xpl-top-nav-item > .xpl-top-nav-item__inner {
  gap: var(--xpl-space-8);
  font-size: var(--xpl-font-size-title-5);
  font-weight: var(--xpl-font-weight-normal);
}

/* HOVER & FOCUS STATES (bar) */

.xpl-top-nav-item:hover > .xpl-top-nav-item__inner,
.xpl-top-nav-item > .xpl-top-nav-item__inner:focus-visible {
  color: var(--xpl-text-link-hovered);
}

/* ACTIVE (PRESSED) STATE — color only; avoid transform on :active (layout shift reads as flicker on click) */

.xpl-top-nav-item:active > .xpl-top-nav-item__inner {
  color: var(--xpl-text-link-hovered);
}

/*
  * Selected (current page): generic bar hover / focus / :active above use link purple — keep strong + semibold.
  */

xpl-top-nav-item.xpl-top-nav-item--selected:hover > .xpl-top-nav-item__inner,
xpl-top-nav-item.xpl-top-nav-item--selected > .xpl-top-nav-item__inner:focus-visible,
xpl-top-nav-item.xpl-top-nav-item--selected:active > .xpl-top-nav-item__inner {
  color: var(--xpl-text-strong);
}

/* Brand row (props on `xpl-top-nav`, class `xpl-top-nav__brand` on internal `xpl-top-nav-item`): title scale + strong */

.xpl-top-nav__brand-bar xpl-top-nav-item.xpl-top-nav__brand > .xpl-top-nav-item__inner {
  font-size: var(--xpl-font-size-title-4);
  color: var(--xpl-text-strong);
  background-color: var(--xpl-background-surface-transparent-0);
  align-content: center;
  align-items: center;
}

.xpl-top-nav__brand-name {
  font-weight: var(--xpl-font-weight-medium);
  display: inline-flex;
  min-width: 0px;
  align-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Space between `brand-logo` (URL or `slot="brand-logo"`) and `brand-name` — explicit so slotted / composed layout matches spec. */

.xpl-top-nav__brand-bar
  xpl-top-nav-item.xpl-top-nav__brand
  .xpl-top-nav__brand-logo
  + .xpl-top-nav__brand-name,
.xpl-top-nav__brand-bar
  xpl-top-nav-item.xpl-top-nav__brand
  .xpl-top-nav__brand-logo-slot
  + .xpl-top-nav__brand-name {
  margin-inline-start: var(--xpl-space-8);
}

/* xpl-nav-header-menu / xpl-top-nav-menu row overrides after shared/brand bar item states. */

.xpl-nav-header-menu .xpl-top-nav-item:hover > .xpl-top-nav-item__inner,
.xpl-nav-header-menu .xpl-top-nav-item > .xpl-top-nav-item__inner:focus-visible,
.xpl-top-nav-menu .xpl-top-nav-item:hover > .xpl-top-nav-item__inner,
.xpl-top-nav-menu .xpl-top-nav-item > .xpl-top-nav-item__inner:focus-visible {
  background-color: var(--xpl-background-action-tertiary-hover);
}

.xpl-nav-header-menu .xpl-top-nav-item.xpl-top-nav-item--active,
.xpl-nav-header-menu .xpl-top-nav-item.xpl-top-nav-item--selected,
.xpl-top-nav-menu .xpl-top-nav-item.xpl-top-nav-item--active,
.xpl-top-nav-menu .xpl-top-nav-item.xpl-top-nav-item--selected {
  border-right-width: 1px;
  border-style: solid;

  /* 4px accent: `2 *` large border width until a dedicated 4px border-width token exists. */
  border-right-width: calc(2 * var(--xpl-border-large));
  border-right-color: var(--xpl-border-active);

  /* Figma: row fill is on the inner (`background/surface/information`), not the host. */
  background-color: var(--xpl-background-surface-transparent-0)
}

.xpl-nav-header-menu .xpl-top-nav-item.xpl-top-nav-item--active,
.xpl-top-nav-menu .xpl-top-nav-item.xpl-top-nav-item--active {
  color: var(--xpl-text-link-default);
}

/*
  * Figma selected child-account row (`space/12` start inset, `space/8` gap, `background/surface/information`).
  */

.xpl-nav-header-menu .xpl-top-nav-item.xpl-top-nav-item--active > .xpl-top-nav-item__inner,
.xpl-nav-header-menu .xpl-top-nav-item.xpl-top-nav-item--selected > .xpl-top-nav-item__inner,
.xpl-top-nav-menu .xpl-top-nav-item.xpl-top-nav-item--active > .xpl-top-nav-item__inner,
.xpl-top-nav-menu .xpl-top-nav-item.xpl-top-nav-item--selected > .xpl-top-nav-item__inner {
  background-color: var(--xpl-background-surface-information);
  color: inherit;
  gap: var(--xpl-space-8);
  padding-inline-start: var(--xpl-space-12);
  align-self: stretch;
  align-items: center;
}

/* Selected/active rows: keep informational surface over generic menu-row hover. */

.xpl-nav-header-menu .xpl-top-nav-item.xpl-top-nav-item--active:hover > .xpl-top-nav-item__inner,
.xpl-nav-header-menu .xpl-top-nav-item.xpl-top-nav-item--selected:hover > .xpl-top-nav-item__inner,
.xpl-nav-header-menu
  .xpl-top-nav-item.xpl-top-nav-item--active
  > .xpl-top-nav-item__inner:focus-visible,
.xpl-nav-header-menu
  .xpl-top-nav-item.xpl-top-nav-item--selected
  > .xpl-top-nav-item__inner:focus-visible,
.xpl-top-nav-menu .xpl-top-nav-item.xpl-top-nav-item--active:hover > .xpl-top-nav-item__inner,
.xpl-top-nav-menu .xpl-top-nav-item.xpl-top-nav-item--selected:hover > .xpl-top-nav-item__inner,
.xpl-top-nav-menu
  .xpl-top-nav-item.xpl-top-nav-item--active
  > .xpl-top-nav-item__inner:focus-visible,
.xpl-top-nav-menu
  .xpl-top-nav-item.xpl-top-nav-item--selected
  > .xpl-top-nav-item__inner:focus-visible {
  background-color: var(--xpl-background-surface-information);
}

/*
  * Brand row: generic hover/active first, then `active` / `selected` bases, nav-header `:not()` rows, then compounds.
  */

.xpl-top-nav__brand-bar xpl-top-nav-item.xpl-top-nav__brand:hover > .xpl-top-nav-item__inner,
.xpl-top-nav__brand-bar xpl-top-nav-item.xpl-top-nav__brand:active > .xpl-top-nav-item__inner {
  background-color: var(--xpl-background-surface-transparent-0);
}

.xpl-top-nav__brand-bar
  xpl-top-nav-item.xpl-top-nav__brand.xpl-top-nav-item--active
  > .xpl-top-nav-item__inner {
  color: var(--xpl-text-link-default);
}

.xpl-top-nav__brand-bar
  xpl-top-nav-item.xpl-top-nav__brand.xpl-top-nav-item--selected
  > .xpl-top-nav-item__inner {
  color: var(--xpl-text-strong);
}

/* Non-current `xpl-nav-header-menu` / `xpl-top-nav-menu` rows: default text on hover/focus/active. */

.xpl-nav-header-menu
  .xpl-top-nav-item:not(.xpl-top-nav-item--active, .xpl-top-nav-item--selected):hover
  > .xpl-top-nav-item__inner,
.xpl-nav-header-menu
  .xpl-top-nav-item:not(.xpl-top-nav-item--active, .xpl-top-nav-item--selected)
  > .xpl-top-nav-item__inner:focus-visible,
.xpl-top-nav-menu
  .xpl-top-nav-item:not(.xpl-top-nav-item--active, .xpl-top-nav-item--selected):hover
  > .xpl-top-nav-item__inner,
.xpl-top-nav-menu
  .xpl-top-nav-item:not(.xpl-top-nav-item--active, .xpl-top-nav-item--selected)
  > .xpl-top-nav-item__inner:focus-visible {
  color: var(--xpl-text-default);
}

.xpl-nav-header-menu
  .xpl-top-nav-item:not(.xpl-top-nav-item--active, .xpl-top-nav-item--selected):active
  > .xpl-top-nav-item__inner,
.xpl-top-nav-menu
  .xpl-top-nav-item:not(.xpl-top-nav-item--active, .xpl-top-nav-item--selected):active
  > .xpl-top-nav-item__inner {
  color: var(--xpl-text-default);
}

.xpl-top-nav__brand-bar
  xpl-top-nav-item.xpl-top-nav__brand.xpl-top-nav-item--active:hover
  > .xpl-top-nav-item__inner,
.xpl-top-nav__brand-bar
  xpl-top-nav-item.xpl-top-nav__brand.xpl-top-nav-item--active:active
  > .xpl-top-nav-item__inner {
  color: var(--xpl-text-link-hovered);
}

.xpl-top-nav__brand-bar
  xpl-top-nav-item.xpl-top-nav__brand.xpl-top-nav-item--selected:hover
  > .xpl-top-nav-item__inner,
.xpl-top-nav__brand-bar
  xpl-top-nav-item.xpl-top-nav__brand.xpl-top-nav-item--selected:active
  > .xpl-top-nav-item__inner {
  color: var(--xpl-text-strong);
}

.xpl-top-nav__brand-logo {
  width: var(--xpl-size-200);
  height: var(--xpl-size-200);
  border-radius: var(--xpl-border-radius-default);
  flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Custom mark from `slot="brand-logo"` (e.g. `xpl-icon`, inline SVG); box matches 24px via `--xpl-size-150`. */

.xpl-top-nav__brand-logo-slot {
  width: var(--xpl-size-150);
  height: var(--xpl-size-150);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.xpl-top-nav-item .xpl-top-nav-item__dropdown {
  background: var(--xpl-background-surface-default);
  max-width: var(--xpl-top-nav-dropdown-max-width);

  /* Figma: `XPL-Dropdown Menu` panel is bound to `border/radius/small` (4px), not the 8px default. */
  border-radius: var(--xpl-border-radius-small);
  padding: var(--xpl-space-8) var(--xpl-space-0);
  z-index: var(--xpl-z-index-600);
  position: absolute;
  top: 100%;
  left: 0px;
  display: none;
  min-width: -moz-min-content;
  min-width: min-content;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.flatpickr-day.xpl-top-nav-item .xpl-top-nav-item__dropdown{visibility:hidden}

.xpl-toolbar.xpl-top-nav-item .xpl-top-nav-item__dropdown {
  display: none;
}

.xpl-top-nav-item.xpl-top-nav-item--dropdown-open .xpl-top-nav-item__dropdown {
  display: block
}

/*
 * `xpl-top-nav-menu` supplies its own panel chrome (background / shadow / radius — see the shared
 * selector below) sized to `--xpl-top-nav-panel-width`, not the generic `max-width` this wrapper uses
 * for arbitrary `slot="dropdown"` markup (e.g. a plain `<ul>`). Defer to it so the flyout doesn't
 * double up background/shadow/radius — same pattern as `xpl-popover__content:has(xpl-nav-header-menu)`
 * below deferring padding to the account menu.
 */

.xpl-top-nav-item .xpl-top-nav-item__dropdown:has(xpl-top-nav-menu) {
  background: none;
  max-width: none;
  border-radius: var(--xpl-border-radius-none);
  padding: var(--xpl-space-0);
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Slotted links/controls in the local dropdown panel (not `.xpl-top-nav-item__inner`). */

xpl-top-nav-item .xpl-top-nav-item__dropdown :focus-visible {
  outline-color: var(--xpl-border-focus);
  outline-width: 2px;
  outline-offset: 2px;
}

/* Popover padding: `xpl-nav-header-menu` controls its own spacing inside account menus. */

xpl-popover .xpl-popover__content:has(xpl-nav-header-menu) {
  padding: 0px
}

/*
 * Shared panel chrome (desktop flyout, mobile cascade, account menu): same width and vertical
 * padding for `xpl-top-nav-menu` and `xpl-nav-header-menu`. Background / shadow / radius are
 * declared on `xpl-top-nav-menu` only, below — `xpl-nav-header-menu` already gets identical values
 * from its `xpl-popover__content` ancestor (see `popover.css`), so duplicating them here would
 * stack two shadows at the same edge.
 */

.xpl-top-nav-menu,
.xpl-nav-header-menu {
  color: var(--xpl-text-default);
  width: var(--xpl-top-nav-panel-width);
  padding: var(--xpl-space-8) var(--xpl-space-0);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.xpl-top-nav-menu {
  background: var(--xpl-background-surface-default);

  /* Figma: `XPL-Dropdown Menu` panel is bound to `border/radius/small` (4px), matching the
   * `.xpl-top-nav-item__dropdown` panel this menu renders inside — not the 8px default. */
  border-radius: var(--xpl-border-radius-small);
  gap: var(--xpl-space-4);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.xpl-nav-header-menu__profile {
    padding: var(--xpl-space-16) var(--xpl-space-0);
    border-bottom: var(--xpl-border-small) solid var(--xpl-border-default);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

.xpl-nav-header-menu__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center
}

.xpl-nav-header-menu__username {
    font-size: var(--xpl-font-size-title-5);
    font-weight: var(--xpl-font-weight-medium);
    color: var(--xpl-text-strong);
    margin-bottom: var(--xpl-space-2);
  }

.xpl-nav-header-menu__email {
    font-size: var(--xpl-font-size-body);
    color: var(--xpl-text-subdued);
  }

/*
    * Between profile and list: e.g. mobile **`right-aside`** duplicate (Figma). Narrow-only — same breakpoint as **`xpl-top-nav`** drawer (one pixel below Tailwind **`md`**).
    */

.xpl-nav-header-menu__right-aside-mobile {
    display: none;
    gap: var(--xpl-space-4);
    width: 100%;
    min-width: 0px;
    flex-direction: column;
    align-items: stretch;
  }

.xpl-nav-header-menu__slot {
    gap: var(--xpl-space-4);
    display: flex;
    flex-direction: column;
  }

/* One pixel below `theme('screens.md')` so bar + drawer match Figma composites (767px at 16px root). */

@media (max-width: calc(768px - 1px)) {
  .xpl-nav-header-menu--has-right-aside-mobile .xpl-nav-header-menu__right-aside-mobile {
    display: flex;
    padding: var(--xpl-space-4) var(--xpl-space-0);
  }
}

/*
  * `slot="right-aside-mobile"` nodes live on the **`xpl-nav-header-menu` host** (light DOM), not under **`.__right-aside-mobile`**
  * in the flat tree — style them by **`[slot="right-aside-mobile"]`**. Wrapper divs need **`flex-col`** so stacked actions match Figma;
  * when the slot is on **`xpl-top-nav-item`** itself, do not make the item host a column flex container — **`.xpl-nav-header-menu__right-aside-mobile`**
  * already stacks sibling slottables; the row chrome stays on **`.xpl-top-nav-item__inner`**.
  */

.xpl-nav-header-menu [slot="right-aside-mobile"]:not(xpl-top-nav-item) {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
  display: flex;
  width: 100%;
  flex-direction: column;

  gap: var(--xpl-space-4);
}

.xpl-nav-header-menu xpl-top-nav-item[slot="right-aside-mobile"] {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
}

/* Match **`.__slot`** list rows for **`xpl-top-nav-item`** duplicates (e.g. Trial), not bar / **`.xpl-nav-right`** title-4.
 * Covers (1) slot on a wrapper: **`[slot] xpl-top-nav-item`**, (2) slot on the item: **`xpl-top-nav-item[slot]`**. */

.xpl-nav-header-menu [slot="right-aside-mobile"] xpl-top-nav-item > .xpl-top-nav-item__inner,
.xpl-nav-header-menu xpl-top-nav-item[slot="right-aside-mobile"] > .xpl-top-nav-item__inner {
  gap: var(--xpl-space-8);
  font-size: var(--xpl-font-size-title-5);
  font-weight: var(--xpl-font-weight-normal);
}

/* ======================================================
    xpl-top-nav shell — layout, bar, mobile drawer
    ====================================================== */

.xpl-nav-left {
  gap: var(--xpl-space-16);
  padding: var(--xpl-space-0);
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  align-items: center;
}

/* Wraps `slot="left-aside"` only; brand uses `.xpl-top-nav__brand-bar` (desktop: same row via `.xpl-top-nav__inner-left` flex + gap). */

/* Space between primary links (Figma). Was only visible inside the legacy single `<div slot="left-aside">` wrapper;
 * with each `xpl-top-nav-item` using `slot="left-aside"`, this `gap` applies between sibling items. */

.xpl-top-nav__left-primary {
  gap: var(--xpl-space-8);
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  align-items: center;
}

/*
 * Legacy: one `<div slot="left-aside">` flexed with `flex-1` and used `gap` for space between inner links.
 * With `slot="left-aside"` on each `xpl-top-nav-item`, **do not** give every item `flex-1` — they become equal-width
 * flex tracks and short labels leave large empty bands (often mistaken for an extra `gap` after the first item).
 */

.xpl-top-nav__left-primary > [slot="left-aside"] {
  min-width: 0px;
  flex-shrink: 0
}

/* Legacy: single child of `.xpl-nav-left` was the slot wrapper — keep flex chain for one child `.xpl-top-nav__left-primary`. */

.xpl-nav-left > * {
  gap: var(--xpl-space-16);
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  align-items: center;
}

/* Flex items default to `min-width: auto` and won’t shrink below content — required for `text-overflow: ellipsis`. */

.xpl-nav-left xpl-top-nav-item,
.xpl-nav-right xpl-top-nav-item,
.xpl-top-nav__brand-bar xpl-top-nav-item {
  min-width: 0px
}

/* Top bar row: start-align label column so truncation cuts the end; `max-w-full` binds inner to host width. */

.xpl-nav-left xpl-top-nav-item > .xpl-top-nav-item__inner,
.xpl-nav-right xpl-top-nav-item > .xpl-top-nav-item__inner,
.xpl-top-nav__brand-bar xpl-top-nav-item > .xpl-top-nav-item__inner {
  max-width: 100%;
  justify-content: flex-start
}

/* ======================================================
    XPL Nav Right - Shared Layout Utility
    ====================================================== */

.xpl-nav-right {
  gap: var(--xpl-space-8);
  padding: var(--xpl-space-0);
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  align-items: center;
  justify-content: flex-end;
}

.xpl-nav-right > * {
  gap: var(--xpl-space-8);
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  align-items: center;
  justify-content: flex-end;
}

/* Right rail: `right-aside` → `user-menu` (popover trigger + panel). */

.xpl-nav-right__list {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  align-items: center;
  justify-content: flex-end
}

/* Segments: `right-aside` → user menu — Figma spacing between them. */

.xpl-top-nav__right-rail {
  gap: var(--xpl-space-16);
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  align-items: center;
  justify-content: flex-end;
}

.xpl-top-nav__right-lead {
  gap: var(--xpl-space-16);
  display: flex;
  min-width: 0px;
  align-items: center;
  justify-content: flex-end;
}

/* Keep badges visually centered when used inside `slot="right-aside"` actions such as `xpl-button`. */

.xpl-top-nav__right-lead xpl-badge {
  display: inline-flex;
  vertical-align: middle
}

/* `xpl-popover` host wraps an inner `.xpl-popover { inline-block }`; make the host a flex box so the trigger
  * aligns on the same vertical center as `xpl-button` and the child-account label in this row. */

.xpl-top-nav__right-user xpl-popover {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center
}

/*
  * Account `xpl-popover`: inner `.xpl-popover` root + `span[role="button"]` wrap the trigger; keyboard focus can show a
  * second (often square / UA) ring on that shell while the slotted `xpl-button` inner `<button>` also gets
  * `button.css` `:focus-visible`. Target `> .xpl-popover` (any `xpl-popover--*` position from collision detection).
  * Use `:focus-visible` / `:has(:focus-visible)` only (no `:focus` or `:focus-within`) per focus-indicator guidelines.
  */

xpl-popover.xpl-top-nav__user-popover > .xpl-popover:focus-visible,
xpl-popover.xpl-top-nav__user-popover > .xpl-popover:has(:focus-visible) {
  outline: 2px solid transparent;
  outline-offset: 2px
}

xpl-popover.xpl-top-nav__user-popover > .xpl-popover > span[role="button"] {
  line-height: 0;
  border-radius: var(--xpl-border-radius-small);
  visibility: hidden;
  display: inline-flex;
  height: -moz-fit-content;
  height: fit-content;
  max-height: none;
  align-items: stretch;
  vertical-align: middle;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Restore visibility on slotted trigger content so it remains the sole focusable element
    while the wrapper span is removed from the tab order. */

xpl-popover.xpl-top-nav__user-popover > .xpl-popover > span[role="button"] > * {
  visibility: visible;
}

/* Custom-element host: avoid an extra UA/outline ring around the whole popover when focus is inside the trigger. */

xpl-popover.xpl-top-nav__user-popover:has(:focus-visible) {
  outline: 2px solid transparent;
  outline-offset: 2px
}

xpl-popover.xpl-top-nav__user-popover > .xpl-popover > span[role="button"]:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px
}

/* Internal account menu: flush panel for `xpl-nav-header-menu` + menu items (`display="menu"`). */

.xpl-top-nav__user-popover .xpl-popover__content {
  padding: var(--xpl-space-0);
}

/* Account popover panel: wraps **`slot="user-menu"`** (e.g. **`xpl-nav-header-menu`**). Mobile **`right-aside`** duplicates use **`slot="right-aside-mobile"`** on **`xpl-nav-header-menu`** (see `.xpl-nav-header-menu__right-aside-mobile`). */

.xpl-top-nav__user-menu-panel {
  display: flex;
  min-width: 0px;
  flex-direction: column;

  gap: var(--xpl-space-0)
}

/* Figma: vertical gap from nav bar to account panel (20px). Overrides default `--popover-margin` (8px) for `bottom-end`. */

.xpl-top-nav__user-popover .xpl-popover--bottom-end .xpl-popover__content {
  margin-top: var(--xpl-space-16);
}

/* Built-in account trigger is `<xpl-button variant="tertiary">` — focus uses default `button.css` (no extra ring vs other bar actions). */

.xpl-top-nav__child-account-trigger {
  min-width: 0px;
  max-width: 100%
}

/* ======================================================
    XPL Top Navigation - host block (`&__*` BEM elements)
    ====================================================== */

.xpl-top-nav {
  z-index: var(--xpl-z-index-200);
  border-bottom: var(--xpl-border-small) solid var(--xpl-border-default);
  position: relative;
  display: block;
  width: 100%;
}

.xpl-top-nav__bar {
    background-color: var(--xpl-background-surface-default);
    color: var(--xpl-text-subdued);
    padding: var(--xpl-space-8) var(--xpl-space-16);
    height: var(--xpl-size-350);
    box-sizing: border-box;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }

/*
    * Desktop (≥768px): same visual row as pre–brand-bar refactor — `gap` replaces the old `.left-primary` gap between
    * brand and `left-aside`; brand flex-shrinks like other bar items (`min-w-0`, no `shrink-0`).
    */

.xpl-top-nav__inner-left {
    gap: var(--xpl-space-16);
    display: flex;
    min-width: 0px;
    align-items: center;
  }

/* Brand: desktop matches old in-`.xpl-nav-left` flex behavior; narrow viewports pin width (see mobile block). */

.xpl-top-nav__brand-bar {
  display: flex;
  min-width: 0px;
  align-items: center
}

.xpl-top-nav .xpl-top-nav__nav-control {
    /* Figma XPL-Button (nav control): pill radius (`border/radius/button`). */
    border-radius: var(--xpl-border-radius-full);

    /* Native <button> UA background (e.g. gray) when preflight is absent — explicit reset for consumer CSS. */
    background-color: var(--xpl-background-surface-transparent-0);

    /* Shown only below `theme('screens.md')` (see MOBILE block) — matches collapse/hide behavior for left-aside. */

    display: none;

    cursor: pointer;

    -webkit-appearance: none;

       -moz-appearance: none;

            appearance: none;

    align-items: center;

    justify-content: center;

    border-width: 0px;

    border-style: solid;

    padding: 0px;
  }

.flatpickr-day.xpl-top-nav .xpl-top-nav__nav-control{visibility:hidden}

.xpl-toolbar.xpl-top-nav .xpl-top-nav__nav-control {
  display: none;
}

.xpl-top-nav .xpl-top-nav__nav-control:focus-visible {
    outline-color: var(--xpl-border-focus);
    outline-width: 2px;
    outline-offset: 2px;
  }

.xpl-top-nav__control-icon {
    color: var(--xpl-icon-subtle);
    fill: currentcolor;

    /* Matches the side-nav drawer toggle glyph size; `xpl-top-nav.tsx` passes `size={32}` for SVG
     * output. Container (`.xpl-top-nav__nav-control`) stays >= `--xpl-size-250` (40px, see MOBILE
     * block) so the touch target does not shrink below WCAG target-size guidance as the glyph grows. */
    height: var(--xpl-size-200);
    width: var(--xpl-size-200);
    flex-shrink: 0;
  }

/* ======================
    MOBILE
    ====================== */

@media (max-width: calc(768px - 1px)) {
  .xpl-top-nav .xpl-top-nav__nav-control {
    display: flex;

    min-height: var(--xpl-size-250);
    min-width: var(--xpl-size-250);
    max-height: var(--xpl-size-250)
  }

  /* Closed drawer: tertiary hover only (no ring). Open state uses Figma ring below. */
  .xpl-top-nav.xpl-top-nav--nav-control:not(.xpl-top-nav--open) .xpl-top-nav__nav-control:hover {
    background-color: var(--xpl-background-action-tertiary-hover);
  }

  .xpl-top-nav.xpl-top-nav--nav-control:not(.xpl-top-nav--open) .xpl-top-nav__nav-control:active {
    background-color: var(--xpl-background-action-tertiary-active);
  }

  /*
    * Figma (mobile, drawer open): tertiary/active surface + inverse + subtle double ring on hamburger
    * (`shadow-[0px_0px_0px_2px_var(--border/inverse),0px_0px_0px_4px_var(--border/subtle)]`).
    * Ring thickness uses border-width tokens (no raw `px`).
    */
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open .xpl-top-nav__nav-control {
    background-color: var(--xpl-background-action-tertiary-active);
    box-shadow:
      0 0 0 var(--xpl-border-large) var(--xpl-border-inverse),
      0 0 0 calc(2 * var(--xpl-border-large)) var(--xpl-border-subtle);
  }

  /* Figma small-screen right rail: `space/8` between Child Account (and optional slotted actions). */
  .xpl-top-nav__right-rail {
    gap: var(--xpl-space-8);
  }

  .xpl-top-nav__control-icon {
    color: var(--xpl-icon-default);
  }

  /* Figma: logo + label stay a stable chunk next to the menu control (desktop defers to default flex-shrink). */
  .xpl-top-nav__brand-bar {
    flex-shrink: 0
  }

  /* Mobile bar: show logo / `slot="brand-logo"` only — hide `brand-name` text (Figma small-screen). */
  .xpl-top-nav__brand-bar .xpl-top-nav__brand-name {
    display: none
  }

.flatpickr-day.xpl-top-nav__brand-bar .xpl-top-nav__brand-name{visibility:hidden}

.xpl-toolbar.xpl-top-nav__brand-bar .xpl-top-nav__brand-name {
  display: none;
}

  /* `right-aside` bar rail: show from `md` up only — hide `.xpl-top-nav__right-lead` in the narrow bar (Figma). */
  .xpl-top-nav .xpl-top-nav__right-lead {
    display: none
  }

.flatpickr-day.xpl-top-nav .xpl-top-nav__right-lead{visibility:hidden}

.xpl-toolbar.xpl-top-nav .xpl-top-nav__right-lead {
  display: none;
}

  /* Shared aside class: column layout for both left and right on mobile */
  .xpl-top-nav .xpl-top-nav__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end
  }

  /* Drawer open: primary column fills panel width (`items-end` otherwise shrinks rows and leaves a dead band). */
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open .xpl-top-nav__aside.xpl-nav-left {
    align-items: stretch;
    width: 100%;
    min-width: 0px;
  }

  /*
    * Mobile drawer (light DOM): `.xpl-top-nav__left-primary` projects `slot="left-aside"` only (brand uses `.xpl-top-nav__brand-bar`).
    * Column layout, full-width items, left-aligned, touch-friendly.
    */
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open .xpl-top-nav__left-primary {
    top: var(--xpl-size-300);
    margin-top: var(--xpl-space-16);
    left: var(--xpl-space-16);
    width: var(--xpl-top-nav-panel-width);
    max-width: var(--xpl-top-nav-mobile-drawer-max-width);
    max-height: var(--xpl-top-nav-mobile-drawer-max-height);
    background: var(--xpl-background-surface-default);
    padding: var(--xpl-space-8) var(--xpl-space-0);
    gap: var(--xpl-space-0);
    border-radius: var(--xpl-border-radius-default);
    border: var(--xpl-border-small) solid var(--xpl-border-default);
    z-index: var(--xpl-z-index-600);
    position: absolute;
    display: flex;
    min-height: 0px;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open .xpl-top-nav__left-primary > * {
    display: flex;
    width: 100%;
    flex-shrink: 0
  }

  /*
    * Mobile drawer: full-width rows — no host `border-right` accent (it left a strip next to the hover fill and
    * prevented the inner background from reading edge-to-edge).
    */
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    xpl-top-nav-item {
    border-right: none;
    height: auto;
    width: 100%;
    border-bottom-width: 0px;
  }

  /*
    * Current / accent rows: purple right border on the host (`--xpl-border-active`), same as before full-bleed hover.
    * `selected` = current page; `active` = persistent accent when used without `selected`.
    */
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    xpl-top-nav-item.xpl-top-nav-item--active,
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    xpl-top-nav-item.xpl-top-nav-item--selected {
    border-right: calc(2 * var(--xpl-border-large)) solid var(--xpl-border-active);
  }

  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    xpl-top-nav-item
    > .xpl-top-nav-item__inner {
    padding: var(--xpl-space-10) var(--xpl-space-12);
    box-sizing: border-box;
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
  }

  /*
    * Figma (mobile): default drawer row hover / focus — `background/surface/subtlest`, `space/10` + `space/12` padding,
    * `space/8` gap, stretch + center (selected/active use `surface/information` via rules below).
    * No bar link purple on hover — `text/default` so `.xpl-top-nav-item__label` inherits neutral copy.
    */
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    xpl-top-nav-item:not(.xpl-top-nav-item--active, .xpl-top-nav-item--selected):hover
    > .xpl-top-nav-item__inner,
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    xpl-top-nav-item:not(.xpl-top-nav-item--active, .xpl-top-nav-item--selected)
    > .xpl-top-nav-item__inner:focus-visible {
    background-color: var(--xpl-background-surface-subtlest);
    padding: var(--xpl-space-10) var(--xpl-space-12);
    gap: var(--xpl-space-8);
    align-self: stretch;
    color: var(--xpl-text-default);
    align-items: center;
  }

  /* `active` only (no `selected`): keep hover/focus/active text neutral — no link purple in the drawer. */
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    xpl-top-nav-item.xpl-top-nav-item--active:not(.xpl-top-nav-item--selected):hover
    > .xpl-top-nav-item__inner,
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    xpl-top-nav-item.xpl-top-nav-item--active:not(.xpl-top-nav-item--selected)
    > .xpl-top-nav-item__inner:focus-visible,
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    xpl-top-nav-item.xpl-top-nav-item--active:not(.xpl-top-nav-item--selected):active
    > .xpl-top-nav-item__inner {
    color: var(--xpl-text-default);
  }

  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    xpl-top-nav-item:not(.xpl-top-nav-item--active, .xpl-top-nav-item--selected):active
    > .xpl-top-nav-item__inner {
    color: var(--xpl-text-default);
  }

  /*
    * Mobile primary nav (drawer / narrow-only `.xpl-top-nav__left-primary`): Figma Dev Mode — `text/subdued` look via
    * inherited inner color; label matches body typography. Foundation has no line-height custom property yet — keep
    * this unitless ratio aligned with `.xpl-text-body` in typography.css (Figma 20px ÷ 14px).
    */
  .xpl-top-nav__left-primary xpl-top-nav-item .xpl-top-nav-item__label {
    font-family: var(--xpl-font-family-default);
    font-size: var(--xpl-font-size-body);
    font-weight: var(--xpl-font-weight-normal);
    line-height: 1.4286;
  }

  /*
    * Figma: selected / active primary rows in the mobile drawer — same inner treatment as `xpl-nav-header-menu`
    * (`background/surface/information`, `space/8` gap, `space/12` start padding, stretch row).
    */
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    xpl-top-nav-item.xpl-top-nav-item--active
    > .xpl-top-nav-item__inner,
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    xpl-top-nav-item.xpl-top-nav-item--selected
    > .xpl-top-nav-item__inner {
    background-color: var(--xpl-background-surface-information);
    gap: var(--xpl-space-8);
    padding: var(--xpl-space-10) var(--xpl-space-12);
    align-self: stretch;
    align-items: center;
  }

  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    xpl-top-nav-item.xpl-top-nav-item--active:hover
    > .xpl-top-nav-item__inner,
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    xpl-top-nav-item.xpl-top-nav-item--selected:hover
    > .xpl-top-nav-item__inner,
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    xpl-top-nav-item.xpl-top-nav-item--active
    > .xpl-top-nav-item__inner:focus-visible,
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    xpl-top-nav-item.xpl-top-nav-item--selected
    > .xpl-top-nav-item__inner:focus-visible {
    background-color: var(--xpl-background-surface-information);
    color: var(--xpl-text-strong);
  }

  /* Slotted nav link row becomes a column of full-width flex rows inside the drawer. */
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    > [slot="left-aside"] {
    gap: var(--xpl-space-4);
    display: flex;
    width: 100%;
    min-width: 0px;
    flex-direction: column;
    align-items: stretch;
  }

  /*
    * Mobile cascade — Level 1 -> Level 2, in place (no second panel): tapping a `left-aside` parent's
    * dropdown trigger (`xpl-top-nav-item` with `slot="dropdown"` holding an `xpl-top-nav-menu`) hides
    * every OTHER parent group row, hides the open parent's own trigger row, and lets its
    * `.xpl-top-nav-item__dropdown` (already `display: block` from `--dropdown-open`) render inline
    * instead of as an absolute overlay — filling the drawer panel with the group's rows. The auto back
    * row (leading `chevron-left` + the group's `label`) is rendered by `xpl-top-nav-menu` itself
    * (`renderBackRow()`, gated on the same `TOP_NAV_MOBILE_MQ`); popping it calls `closeMenu()` on this
    * same trigger, which removes `--dropdown-open` and reverses every rule below back to Level 1.
    */
  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary:has(
      > xpl-top-nav-item[slot="left-aside"].xpl-top-nav-item--dropdown-open
    )
    > xpl-top-nav-item[slot="left-aside"]:not(.xpl-top-nav-item--dropdown-open) {
    display: none
  }

.flatpickr-day.xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary:has(
      > xpl-top-nav-item[slot="left-aside"].xpl-top-nav-item--dropdown-open
    )
    > xpl-top-nav-item[slot="left-aside"]:not(.xpl-top-nav-item--dropdown-open){visibility:hidden}

.xpl-toolbar.xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary:has(
      > xpl-top-nav-item[slot="left-aside"].xpl-top-nav-item--dropdown-open
    )
    > xpl-top-nav-item[slot="left-aside"]:not(.xpl-top-nav-item--dropdown-open) {
  display: none;
}

  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    > xpl-top-nav-item[slot="left-aside"].xpl-top-nav-item--dropdown-open
    > .xpl-top-nav-item__inner {
    display: none
  }

.flatpickr-day.xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    > xpl-top-nav-item[slot="left-aside"].xpl-top-nav-item--dropdown-open
    > .xpl-top-nav-item__inner{visibility:hidden}

.xpl-toolbar.xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    > xpl-top-nav-item[slot="left-aside"].xpl-top-nav-item--dropdown-open
    > .xpl-top-nav-item__inner {
  display: none;
}

  .xpl-top-nav.xpl-top-nav--nav-control.xpl-top-nav--open
    .xpl-top-nav__left-primary
    > xpl-top-nav-item[slot="left-aside"].xpl-top-nav-item--dropdown-open
    > .xpl-top-nav-item__dropdown {
    position: static;
    max-width: none;
    display: block;
    width: 100%;
  }

  /*
    * `xpl-top-nav-menu` supplies its own self-contained panel chrome for the desktop flyout (see
    * `top-nav.css` shared-selector block), but inside the mobile drawer it is filling a panel that
    * already has its OWN background / border / shadow (`.xpl-top-nav__left-primary` above) — suppress
    * the menu's chrome here so Level 2 reads as one continuous panel, not a nested card.
    */
  .xpl-top-nav__left-primary xpl-top-nav-menu {
    background: none;
    width: 100%;
    border-radius: var(--xpl-border-radius-none);
    padding: var(--xpl-space-0);
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  /*
    * Row sizing (mobile — Figma "Sm Screen" menu-item spec): 48px row via title-3 (20px) label height,
    * 24px icons. Applies to the mobile cascade's Level 2 rows (including the auto back row) and,
    * consistently, the account menu's rows on the same narrow viewports.
    */
  .xpl-top-nav-menu xpl-top-nav-item > .xpl-top-nav-item__inner,
  .xpl-nav-header-menu xpl-top-nav-item > .xpl-top-nav-item__inner {
    font-size: var(--xpl-font-size-title-3);
  }

  .xpl-top-nav-menu xpl-top-nav-item xpl-icon,
  .xpl-nav-header-menu xpl-top-nav-item xpl-icon {
    width: var(--xpl-size-150);
    height: var(--xpl-size-150);
  }

  /*
    * Figma (mobile): account menu rows — same hover surface as drawer; beats global `tertiary-hover` for narrow viewports.
    */
  .xpl-nav-header-menu
    .xpl-top-nav-item:not(.xpl-top-nav-item--active, .xpl-top-nav-item--selected):hover
    > .xpl-top-nav-item__inner,
  .xpl-nav-header-menu
    .xpl-top-nav-item:not(.xpl-top-nav-item--active, .xpl-top-nav-item--selected)
    > .xpl-top-nav-item__inner:focus-visible {
    background-color: var(--xpl-background-surface-subtlest);
    padding: var(--xpl-space-10) var(--xpl-space-12);
    gap: var(--xpl-space-8);
    align-self: stretch;
    color: var(--xpl-text-default);
    align-items: center;
  }

  .xpl-nav-header-menu
    xpl-top-nav-item.xpl-top-nav-item--active:not(.xpl-top-nav-item--selected):hover
    > .xpl-top-nav-item__inner,
  .xpl-nav-header-menu
    xpl-top-nav-item.xpl-top-nav-item--active:not(.xpl-top-nav-item--selected)
    > .xpl-top-nav-item__inner:focus-visible,
  .xpl-nav-header-menu
    xpl-top-nav-item.xpl-top-nav-item--active:not(.xpl-top-nav-item--selected):active
    > .xpl-top-nav-item__inner {
    color: var(--xpl-text-default);
  }

  /*
   * Primary `left-aside` (`.xpl-nav-left`): must run after `.xpl-top-nav .xpl-top-nav__aside { display: flex }` above
   * so `display: none` wins. Shown only when hamburger drawer is open; without `nav-control` there is no drawer below `md`.
   */
  .xpl-top-nav:not(.xpl-top-nav--nav-control.xpl-top-nav--open) .xpl-nav-left {
    display: none
  }

.flatpickr-day.xpl-top-nav:not(.xpl-top-nav--nav-control.xpl-top-nav--open) .xpl-nav-left{visibility:hidden}

.xpl-toolbar.xpl-top-nav:not(.xpl-top-nav--nav-control.xpl-top-nav--open) .xpl-nav-left {
  display: none;
}
}

.xpl-utility-bar {
  background-color: var(--xpl-color-gray-0);
  color: var(--xpl-color-gray-500);
}

.xpl-utility-bar ul > *, .xpl-utility-bar nav > *, .xpl-utility-bar xpl-breadcrumbs > * {
  display: grid;
  align-content: center
}

.xpl-utility-bar ul:nth-child(2) > *, .xpl-utility-bar nav:nth-child(2) > *, .xpl-utility-bar xpl-breadcrumbs:nth-child(2) > * {
  margin-left: 0.5rem
}

.xpl-utility-bar ul:nth-child(2), .xpl-utility-bar nav:nth-child(2), .xpl-utility-bar xpl-breadcrumbs:nth-child(2) {
  justify-self: end
}

.xpl-utility-bar ul:first-child > *, .xpl-utility-bar nav:first-child > *, .xpl-utility-bar xpl-breadcrumbs:first-child > * {
  margin-right: 0.5rem
}

.xpl-utility-bar ul:first-child, .xpl-utility-bar nav:first-child, .xpl-utility-bar xpl-breadcrumbs:first-child {
  justify-self: start
}

.xpl-utility-bar ul,
  .xpl-utility-bar nav,
  .xpl-utility-bar xpl-breadcrumbs {
  display: grid;
  grid-auto-flow: column;
  align-content: center;
  align-items: center
}

.xpl-utility-bar div:first-child {
  display: flex
}

.xpl-utility-bar {
  display: grid;
  grid-auto-flow: column;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem
}

@media (min-width: 640px) {

  .xpl-utility-bar {
    padding-left: 1.5rem;
    padding-right: 1.5rem
  }
}

.dark .xpl-utility-bar {
  background-color: var(--xpl-color-background-2-dm);
  color: var(--xpl-color-gray-300);
}

.xpl-utility-bar__nav-control {
  align-items: center;
  display: flex;
}

.xpl-utility-nav__bars {
  color: var(--xpl-color-text-primary-lm);
  fill: currentcolor;
  height: 16px;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.dark .xpl-utility-nav__bars {
  color: var(--xpl-color-text-primary-dm);
}

.xpl-text-title-5,
  [class^="xpl-"] .xpl-text-title-5 {
    font-size: var(--xpl-font-size-title-5);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.4286;
  }

.xpl-text-display-1,
  [class^="xpl-"] .xpl-text-display-1 {
    font-size: var(--xpl-font-size-display-1);
    font-weight: var(--xpl-font-weight-semibold);
    line-height: 1.2;
  }

.xpl-text-display-2,
  [class^="xpl-"] .xpl-text-display-2 {
    font-size: var(--xpl-font-size-display-2);
    font-weight: var(--xpl-font-weight-semibold);
    line-height: 1.2;
  }

.xpl-text-display-3,
  [class^="xpl-"] .xpl-text-display-3 {
    font-size: var(--xpl-font-size-display-3);
    font-weight: var(--xpl-font-weight-semibold);
    line-height: 1.2;
  }

.xpl-text-title-1,
  [class^="xpl-"] .xpl-text-title-1 {
    font-size: var(--xpl-font-size-title-1);
    font-weight: var(--xpl-font-weight-bold);
    line-height: 1.2;
  }

.xpl-text-title-2,
  [class^="xpl-"] .xpl-text-title-2 {
    font-size: var(--xpl-font-size-title-2);
    font-weight: var(--xpl-font-weight-bold);
    line-height: 1.3333;
  }

.xpl-text-title-3,
  [class^="xpl-"] .xpl-text-title-3 {
    font-size: var(--xpl-font-size-title-3);
    font-weight: var(--xpl-font-weight-bold);
    line-height: 1.4;
  }

.xpl-text-title-4,
  [class^="xpl-"] .xpl-text-title-4 {
    font-size: var(--xpl-font-size-title-4);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.5;
  }

.xpl-text-body {
  font-size: var(--xpl-font-size-body);
  font-weight: var(--xpl-font-weight-normal);
  line-height: 1.4286;
}

.xpl-text-callout-bold {
  font-size: var(--xpl-font-size-callout);
  font-weight: var(--xpl-font-weight-semibold);
  line-height: 1.3333;
}

.xpl-text-callout {
  font-size: var(--xpl-font-size-callout);
  font-weight: normal;
  line-height: 1.3333;
}

.xpl-text-caption {
  font-size: var(--xpl-font-size-caption);
  font-weight: normal;
  line-height: 1.4;
}

[class^="xpl-text-"] a {
  color: var(--xpl-text-link-default);
}

/* stylelint-disable color-no-hex -- TODO: migrate to var(--xpl-*) tokens (see TECH_DEBT.md) */

.xpl-accordion {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 0.625rem;
  padding-right: 0px;
  padding-bottom: 0.5rem;
  padding-left: 1rem
}

.xpl-accordion .xpl-checkbox {
  margin-right: 0.75rem
}

.xpl-accordion--border-bottom,
  .xpl-accordion--border-bottom--expanded {
  border-bottom-width: 1px
}

.xpl-accordion--border-bordered,
  .xpl-accordion--border-bordered--expanded {
  border-radius: 0.5rem;
  border-width: 1px
}

.xpl-accordion .xpl-accordion-toggle-area {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  text-wrap: wrap;
  padding-right: 0px;
  padding-left: 0px;
  text-align: left
}

.xpl-accordion .xpl-accordion-toggle-area:focus {
      outline-color: var(--xpl-color-secondary-lm);
    }

.xpl-accordion .xpl-accordion-toggle-area .xpl-accordion-icon-chevron {
      color: var(--xpl-color-text-reverse-dm);
      transition: transform 0.2s;
      margin-left: auto;
      margin-right: 1rem;
    }

.xpl-accordion .xpl-accordion-toggle-area .xpl-accordion-icon-chevron.xpl-accordion-icon-chevron--rotate {
        transform: rotate(-180deg);
      }

.xpl-accordion .xpl-accordion-header {
  margin-bottom: 0.5rem;
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center
}

.xpl-accordion .xpl-accordion-header [slot="heading"] {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  text-align: left
}

.xpl-accordion .xpl-accordion-header--size-1 {
      color: var(--xpl-color-gray-900);
    }

.xpl-accordion .xpl-accordion-header--size-1 {
    font-size: var(--xpl-font-size-title-5);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.4286;
    }

.xpl-accordion .xpl-accordion-header--size-2 {
      color: var(--xpl-color-gray-900);
    }

.xpl-accordion .xpl-accordion-header--size-2 {
    font-size: var(--xpl-font-size-title-4);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.5;
    }

.xpl-accordion .xpl-accordion-header--size-3 {
      color: var(--xpl-color-gray-900);
    }

.xpl-accordion .xpl-accordion-header--size-3 {
    font-size: var(--xpl-font-size-title-3);
    font-weight: var(--xpl-font-weight-bold);
    line-height: 1.4;
    }

.xpl-accordion .xpl-accordion-description {
    color: var(--xpl-color-gray-600);
  }

.xpl-accordion .xpl-accordion-description {
  font-size: var(--xpl-font-size-callout);
  font-weight: normal;
  line-height: 1.3333;
  }

.xpl-accordion .xpl-accordion-description {

    display: flex;

    width: 100%;

    flex-direction: row;

    align-items: center;

    text-wrap: wrap;

    text-align: left;
  }

.xpl-accordion .xpl-checkbox-radio-container {
  margin-bottom: 0.25rem
}

.xpl-accordion .xpl-checkbox-radio-container .xpl-label {
  padding: 0px
}

.xpl-accordion .xpl-accordion-content {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem
}

.xpl-accordion .xpl-accordion-content--hidden {
  display: none
}

.flatpickr-day.xpl-accordion .xpl-accordion-content--hidden{visibility:hidden}

.xpl-toolbar.xpl-accordion .xpl-accordion-content--hidden {
  display: none;
}

.xpl-accordion .xpl-accordion-content--shown > * {
      grid-template-columns: var(--column-widths);
      display: grid;
    }

.xpl-accordion .xpl-accordion-content .xpl-checkbox-radio-container:not(:last-child) {
  margin-bottom: 1rem
}

.xpl-accordion .xpl-accordion-content .xpl-checkbox-radio-container:last-child {
  margin-bottom: 0px
}

.xpl-accordion ::slotted([slot="content"]) {
  display: grid;

    grid-template-columns: var(--column-widths)
}

.dark .xpl-accordion {
  color: var(--xpl-color-text-secondary-dm);
}

.dark .xpl-accordion .xpl-accordion-toggle-area .xpl-accordion-header {
      color: var(--text-default, #f8f9fa);
    }

.dark .xpl-accordion .xpl-accordion-toggle-area:focus {
      outline-color: var(--xpl-color-secondary-dm);
    }

.dark .xpl-accordion .xpl-accordion-toggle-area xpl-icon {
      color: var(--xpl-color-text-reverse-lm);
    }

.xpl-calendar .flatpickr-calendar {
    border: none;
    box-shadow: none;
  }

.xpl-calendar-input {
  display: none
}

.flatpickr-day.xpl-calendar-input{visibility:hidden}

.xpl-toolbar.xpl-calendar-input {
  display: none;
}

.xpl-skeleton {
  background-color: var(--xpl-background-surface-transparent-10);
  border-radius: var(--xpl-size-radius-large);
}

@keyframes pulse {

  50% {
    opacity: .5
  }
}

.xpl-skeleton {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}

.xpl-skeleton--size-display {
  height: 3.5rem
}

.xpl-skeleton--size-title-1 {
  height: 2.5rem
}

.xpl-skeleton--size-title-2 {
  height: 2rem
}

.xpl-skeleton--size-title-3 {
  height: 1.75rem
}

.xpl-skeleton--size-title-4 {
  height: 1.5rem
}

.xpl-skeleton--size-title-5 {
  height: 1rem
}

.xpl-skeleton--size-body {
  height: 1rem
}

.xpl-skeleton--full-width {
  width: 100%
}

.xpl-skeleton--shape-circle {
  aspect-ratio: 1 / 1;
  border-radius: 9999px
}

.xpl-skeleton--shape-square {
  aspect-ratio: 1 / 1
}

/* stylelint-disable no-descending-specificity, selector-class-pattern */

/* ==========================================================================
   Side Navigation
   ========================================================================== */

/* Root & Container */

.xpl-side-nav {
  --side-nav-width: 240px;
  --xpl-nav-item-indent: 0px;

  /*
   * Child label alignment column. Child rows hide their leading icon, so their
   * `__link` padding-left must equal the parent label's start position to keep
   * every label flush.
   *
   * Parent label starts at: link padding-left (8px) + leading icon width (16px)
   * + leading margin-right (8px) = 32px. This is fixed at 32px on ALL viewports
   * — do NOT recompute it from the mobile 24px icon size (that yields 40px and
   * breaks alignment). The leading icon scales to 24px on mobile, but child rows
   * never render a leading icon, so the alignment column stays 32px everywhere.
   */
  --xpl-side-nav-child-indent: var(--xpl-space-32);
  --nav-item-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Mobile: bar height token. Drawer width is `80vw` with a `min-width: 300px` floor (Figma spec, no Foundation token — see TECH_DEBT.md) so very narrow viewports keep the design's row layout. */
  --xpl-side-nav-mobile-bar-height: var(--xpl-size-350);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  width: var(--side-nav-width);

  /* Fill the parent; do not force 100vh — consumers set height on wrappers (e.g. app shell, Storybook). */
  height: 100%;
  min-height: 0;
  color: var(--xpl-text-subdued);
  border-right: var(--xpl-border-small) solid var(--xpl-border-default);
  background: var(--xpl-background-surface-subtlest);
}

/* Mobile toggle (xpl-button host): hidden above `md` (shown in the MOBILE block below). */

.xpl-side-nav__toggle {
  display: none
}

.flatpickr-day.xpl-side-nav__toggle{visibility:hidden}

.xpl-toolbar.xpl-side-nav__toggle {
  display: none;
}

/* Backdrop scrim: hidden above `md` and when closed (shown in the MOBILE block below). */

.xpl-side-nav__backdrop {
  display: none
}

.flatpickr-day.xpl-side-nav__backdrop{visibility:hidden}

.xpl-toolbar.xpl-side-nav__backdrop {
  display: none;
}

.xpl-side-nav__wrapper {
  display: flex;
  min-height: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  overflow: hidden
}

/* Landmark: flex column; scroll lives on .xpl-side-nav__section so footer stays visible */

.xpl-side-nav__content {
  display: flex;
  min-height: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  overflow: hidden
}

.xpl-side-nav__section {
  display: flex;
  min-height: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;

  padding: var(--xpl-space-24) var(--xpl-space-8);
  scrollbar-width: thin;
  scrollbar-color: var(--xpl-border-default) transparent
}

.xpl-side-nav__section::-webkit-scrollbar {
  width: var(--xpl-space-6);
}

.xpl-side-nav__section::-webkit-scrollbar-track {
  background: transparent;
}

.xpl-side-nav__section::-webkit-scrollbar-thumb {
  background-color: var(--xpl-border-default);
  border-radius: var(--xpl-border-radius-large);
  border: var(--xpl-border-small) solid transparent;
  background-clip: content-box;
}

.xpl-side-nav__section::-webkit-scrollbar-thumb:hover {
  background-color: var(--xpl-border-strong);
}

.xpl-side-nav__footer {
  flex-shrink: 0;

  border-top: var(--xpl-border-small) solid var(--xpl-border-default);
  padding: var(--xpl-space-12) var(--xpl-space-8) var(--xpl-space-32)
}

/* Backward compatibility: keep this class working for existing consumer markup. */

.xpl-side-nav-content__items {
  display: flex;
  flex-direction: column
}

.xpl-side-nav-content__title {
  white-space: nowrap;

  padding: 0 var(--xpl-space-16);
  margin: var(--xpl-space-8) 0;
  font-size: var(--xpl-font-size-caption);
  font-weight: var(--xpl-font-weight-bold);
  text-transform: uppercase;
  color: var(--xpl-text-subdued);
  letter-spacing: 0.05em
}

/* ==========================================================================
   Base Elements
   ========================================================================== */

.xpl-side-nav-item {
  display: block;

  margin-bottom: 0
}

.xpl-side-nav-item[hidden] {
  display: none
}

.flatpickr-day.xpl-side-nav-item[hidden]{visibility:hidden}

.xpl-toolbar.xpl-side-nav-item[hidden] {
  display: none;
}

.xpl-side-nav-item[disabled] {
  cursor: not-allowed
}

/* Leading icon column (v2 rename from __icon) */

.xpl-side-nav-item__leading {
  /*
   * No `display` property: the wrapper is a flex item of `__link` (which is
   * `display: flex`) so its `width` / `height` are honored without needing
   * an inner layout context. Adding `display: flex` or `display: grid` here
   * was misaligning the slotted `xpl-icon` (a custom element whose internal
   * grid + figure layout has its own centering) — letting the inner icon
   * lay out via normal flow keeps it visually centered in the 24px box.
   */
  flex-shrink: 0;

  width: var(--xpl-size-100);
  height: var(--xpl-size-100);
  margin-right: var(--xpl-space-8);
  color: var(--xpl-icon-default);
}

.xpl-side-nav-item__label {
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  /*
   * Inherit `font-size`, `font-weight` (medium), and `line-height` (1.5) from
   * `.xpl-text-title-4` per `apollo-foundation-first.mdc` ("inherit line-height
   * by using `@extend .xpl-text-*`"). Title-4 already specifies medium weight,
   * so no override is needed here. The mobile media query below switches to
   * title-3 typography by setting `font-size` + `line-height` directly — the
   * inherited medium `font-weight` carries through, which matches Figma's
   * mobile spec (title-3 at medium weight, not the typography default of bold).
   */
}

.xpl-side-nav-item__label {
    font-size: var(--xpl-font-size-title-4);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.5;
}

.xpl-side-nav-item__label {

  color: var(--xpl-text-strong);
  transition: opacity var(--nav-item-transition, 0.3s);
}

/* Trailing column: chevron (auto for parents) or custom slotted content */

.xpl-side-nav-item__trailing {
  /* See leading rule above for why we don't set `display` here. */
  flex-shrink: 0;

  width: var(--xpl-size-100);
  height: var(--xpl-size-100);
  margin-left: var(--xpl-space-8);
  color: var(--xpl-icon-default);
}

/*
 * Chevron variant: the glyph itself swaps between `chevron-down` (collapsed) and
 * `chevron-up` (expanded) in the component — no rotation transform needed.
 */

.xpl-side-nav-item__trailing xpl-icon {
  color: inherit;
}

.xpl-side-nav-item__link {
  position: relative;
  margin: 0px;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  border-style: none;
  text-align: left;

  padding: var(--xpl-space-4) var(--xpl-space-8);
  border-radius: var(--xpl-border-radius-default);
  text-decoration: none;
  transition: all var(--nav-item-transition, 0.3s);
  min-height: var(--xpl-size-200);
  background-color: transparent;
  color: var(--xpl-text-subdued)
}

.xpl-side-nav-item__link:focus-visible {
  outline-color: var(--xpl-border-focus);
  outline-width: 2px;
  outline-offset: 2px;
}

/* ==========================================================================
   States
   ========================================================================== */

/* Hover — applies to ALL items */

.xpl-side-nav-item__link:not([disabled]):hover {
  background-color: var(--xpl-background-surface-transparent-10);
  color: var(--xpl-text-subdued);
}

.xpl-side-nav-item__link:not([disabled]):hover
  :is(.xpl-side-nav-item__leading, .xpl-side-nav-item__trailing, .xpl-side-nav-item__label) {
  color: var(--xpl-icon-default);
}

/* Active */

.xpl-side-nav-item__link:not([disabled]):active {
  background-color: var(--xpl-background-surface-transparent-10);
}

/* Selected */

.xpl-side-nav-item:is([selected], .selected) > .xpl-side-nav-item__link,
.xpl-side-nav-item__link.selected {
  background-color: var(--xpl-background-brand-secondary-surface);
  color: var(--xpl-text-subdued);
}

.xpl-side-nav-item:is([selected], .selected)
  > .xpl-side-nav-item__link
  :is(.xpl-side-nav-item__leading, .xpl-side-nav-item__trailing) {
  color: var(--xpl-icon-default);
}

/* Disabled — button rows; link mode (direct child anchor). */

.xpl-side-nav-item:is([disabled], .xpl-side-nav-item--link-disabled) .xpl-side-nav-item__link,
.xpl-side-nav-item:is([disabled], .xpl-side-nav-item--link-disabled) > a {
  pointer-events: none;
  cursor: not-allowed;

  color: var(--xpl-text-disabled)
}

.xpl-side-nav-item[disabled]
  .xpl-side-nav-item__link
  :is(.xpl-side-nav-item__leading, .xpl-side-nav-item__trailing, .xpl-side-nav-item__label) {
  color: var(--xpl-icon-disabled);
}

/* ==========================================================================
   Context Overrides ([has-children], [link])
   ========================================================================== */

/* Expandable parents — left padding accounts for leading icon column now present */

.xpl-side-nav-item[has-children] .xpl-side-nav-item__link {
  padding-left: calc(var(--xpl-space-8) + var(--xpl-nav-item-indent));
}

/*
 * Collapsed subtree: `0fr` (animated open/close). `inert` on the host removes
 * nested controls from the tab order when collapsed.
 */

.xpl-side-nav-item__children {
  display: grid;
  overflow: hidden;

  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1)
}

.xpl-side-nav-item__children.expanded {
  grid-template-rows: 1fr;
}

.xpl-side-nav-item__children-inner {
  display: flex;
  min-height: 0px;
  flex-direction: column;

  width: 100%;
  height: -moz-fit-content;
  height: fit-content

  /*
   * No extra top padding here. The 8px rhythm between the parent link and the
   * first child row is already produced by the parent `__link` padding-bottom
   * (4px) + the first child `__link` padding-top (4px) — the same rhythm as
   * every collapsed row-to-row transition. Adding padding-top here would inject
   * an extra 4px at the top of an expanded subtree only, breaking the vertical
   * harmony between open and closed parents.
   */
}

/* Nested children: increase indent */

.xpl-side-nav-item[has-children] xpl-side-nav-item {
  --xpl-nav-item-indent: var(--xpl-space-24);
}

/*
 * Align child labels with the parent label column on every viewport. The value
 * is the shared `--xpl-side-nav-child-indent` token (32px) defined on the host —
 * see its definition for why this must stay 32px and must not be recomputed from
 * the mobile 24px icon size. The mobile block below reuses the same token.
 */

.xpl-side-nav-item[has-children] .xpl-side-nav-item__children-inner .xpl-side-nav-item__link {
  padding-left: var(--xpl-side-nav-child-indent);

  /*
   * Desktop child row height: 32px per Figma spec. Pinning min-height here
   * keeps child rows at 32px even if the base `.xpl-side-nav-item__link`
   * min-height changes for parent rows in the future. Mobile (<768)
   * overrides this below to 36px via explicit `6px` vertical padding and
   * a `min-height: 0` reset.
   */
  min-height: var(--xpl-size-200);
}

/* Child item labels: smaller, subdued */

.xpl-side-nav-item[has-children] .xpl-side-nav-item__children-inner .xpl-side-nav-item__label {
  font-size: var(--xpl-font-size-title-5);
  color: var(--xpl-text-subdued);
}

/* Child item label: stronger text on hover and selected */

.xpl-side-nav-item[has-children]
  .xpl-side-nav-item__children-inner
  .xpl-side-nav-item__link:not([disabled]):hover
  .xpl-side-nav-item__label,
.xpl-side-nav-item[has-children]
  .xpl-side-nav-item__children-inner
  .xpl-side-nav-item__link.selected
  .xpl-side-nav-item__label {
  color: var(--xpl-text-strong);
}

/* Nested rows under a parent: no leading icon (sub-items are label-only). */

.xpl-side-nav-item[has-children] .xpl-side-nav-item__children-inner .xpl-side-nav-item__leading {
  display: none
}

.flatpickr-day.xpl-side-nav-item[has-children] .xpl-side-nav-item__children-inner .xpl-side-nav-item__leading{visibility:hidden}

.xpl-toolbar.xpl-side-nav-item[has-children] .xpl-side-nav-item__children-inner .xpl-side-nav-item__leading {
  display: none;
}

/* ==========================================================================
   Link Mode (slot-only composition)
   ========================================================================== */

.xpl-side-nav-item[link]:not([has-children]) {
  display: block
}

/* Direct anchor children in link mode */

.xpl-side-nav-item[link]:not([has-children]) > a {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  text-align: left;
  text-decoration-line: none;

  padding: var(--xpl-space-4) var(--xpl-space-8);
  border-radius: var(--xpl-border-radius-default);
  min-height: var(--xpl-size-200);
  background-color: transparent;

  /*
   * Match button-mode base color (subdued). The visible icon and label colors
   * are overridden by __leading (icon-default) and __label (text-strong) when
   * consumers use the recommended class structure inside the anchor.
   */
  color: var(--xpl-text-subdued);
  transition: all var(--nav-item-transition, 0.3s)
}

/* Link hover state */

.xpl-side-nav-item[link]:not([has-children]) > a:hover {
  background-color: var(--xpl-background-surface-transparent-10);
  color: var(--xpl-text-subdued);
}

/* Link focus-visible state */

.xpl-side-nav-item[link]:not([has-children]) > a:focus-visible {
  outline-color: var(--xpl-border-focus);
  outline-width: 2px;
  outline-offset: 2px;
}

/* Link selected state */

.xpl-side-nav-item[link][selected]:not([has-children]) > a {
  background-color: var(--xpl-background-brand-secondary-surface);
  color: var(--xpl-text-strong);
}

/* Link disabled state */

.xpl-side-nav-item[link][disabled]:not([has-children]) > a {
  pointer-events: none;
  cursor: not-allowed;

  color: var(--xpl-text-disabled)
}

/* Raw <a> in expandable default slot (unusual) */

.xpl-side-nav-item[has-children] .xpl-side-nav-item__children-inner > a {
  text-decoration-line: none;

  color: inherit
}

/* ==========================================================================
   Footer (slot="nav-footer")
   ========================================================================== */

/*
 * Footer items (slot="nav-footer"):
 *   28px-tall row, title-5 label, 16px icon (Figma desktop footer spec,
 *   Apollo-Web node 48928-8765 / 48099-68326).
 *
 * Label and icon sizes match the desktop defaults; only the row min-height
 * shrinks from 32px (--xpl-size-200) to 28px. There is no Foundation size
 * token between 24px (--xpl-size-150) and 32px (--xpl-size-200), so the
 * 28px value is a raw literal — logged in TECH_DEBT.md.
 *
 * Horizontal padding is unchanged so footer leading icons stay aligned with
 * section + child item leading icons (same .xpl-side-nav-item__link
 * padding-left: var(--xpl-space-8)).
 */

.xpl-side-nav__footer .xpl-side-nav-item__label {
  font-size: var(--xpl-font-size-title-5);
}

.xpl-side-nav__footer .xpl-side-nav-item__link {
  min-height: 28px;
}

/* ==========================================================================
   Mobile — top bar + drawer
   One pixel below Tailwind `md` (same threshold as xpl-top-nav) so the bar +
   drawer match the Figma mobile composite. Desktop layout above is untouched.
   ========================================================================== */

@media (max-width: calc(768px - 1px)) {
  /*
   * Collapse the host to a top bar. The drawer (`__wrapper`) floats over the page
   * when open; the host itself is just the bar so consumer layout reflows above `md`.
   *
   * `overflow: visible` is required here: the desktop base rule sets `overflow: hidden`
   * on `.xpl-side-nav`. Without this override the absolutely positioned `__wrapper`
   * drawer is clipped to the ~56 px bar box and is invisible even when open.
   */
  .xpl-side-nav {
    position: relative;
    display: block;

    overflow: visible;
    width: 100%;
    height: var(--xpl-side-nav-mobile-bar-height);
    min-height: var(--xpl-side-nav-mobile-bar-height);
    padding: var(--xpl-space-8) var(--xpl-space-16);
    border-right: var(--xpl-border-none);
    border-bottom: var(--xpl-border-small) solid var(--xpl-border-default);
    background: var(--xpl-background-surface-subtlest);
    z-index: var(--xpl-z-index-200)
  }

  /*
   * Toggle (xpl-button host): revealed in the bar at mobile widths.
   *
   * Two design overrides per Figma (Apollo-Web nodes 48928-8583 / 49576-6235):
   *   1. Icon scales to 32px (vs xpl-button's default iconOnly icon) so the
   *      tap target reads as a larger visual anchor and balances with the
   *      drawer's 24px mobile leading icons.
   *   2. Inner native <button> gets `padding-left: var(--xpl-space-12)` so the
   *      32px icon's left edge aligns with the drawer's nav-item leading
   *      icons (12px button pad-L + ~10px icon-internal whitespace ≈ 24px
   *      from bar edge, matching the drawer row icons).
   */
  .xpl-side-nav .xpl-side-nav__toggle {
    display: flex
  }

  /*
   * Symmetric horizontal padding so the focus outline stays centered on the
   * icon. Setting only `padding-left` left the inner <button>'s content box
   * wider on the right, pulling the icon off-center relative to the round
   * focus ring (Figma's intent is icon-in-circle).
   */
  .xpl-side-nav .xpl-side-nav__toggle button {
    padding-inline: var(--xpl-space-12);
  }

  .xpl-side-nav .xpl-side-nav__toggle svg {
    width: var(--xpl-size-200);
    height: var(--xpl-size-200);
  }

  /*
   * Drawer panel: fixed width, slides over the page from the left below the bar.
   *
   * Open / close is animated by transitioning `transform` (slide) and `opacity`
   * (fade) over 300ms with Tailwind's `ease-out` curve. The drawer is always
   * rendered as `display: flex` on mobile so the transition can run; while
   * closed it sits off-screen (`translateX(-100%)`), fully transparent, and
   * `visibility: hidden` so its focusable children stay out of the tab order
   * and accessibility tree. The visibility flip is delayed 300ms on close so
   * the drawer remains perceivable while it slides away.
   */
  .xpl-side-nav .xpl-side-nav__wrapper {
    position: absolute;
    display: flex;
    min-height: 0px;
    flex-direction: column;
    overflow: hidden;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: transform,opacity,visibility;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

    /*
     * Host has `box-sizing: border-box` and a 1px `border-bottom`, so its padding
     * box (the containing block for absolute children) ends 1px above the host's
     * outer bottom edge. Subtract the border so the drawer's top edge sits flush
     * against the bar instead of leaving a 1px gap.
     */
    top: calc(var(--xpl-side-nav-mobile-bar-height) - var(--xpl-border-small));
    left: 0;

    /*
     * Drawer occupies 80% of the viewport so a 20vw strip of the page (and the
     * backdrop scrim) stays visible alongside it. The 300px floor matches the
     * Figma mobile spec (`min-w-[300px]` on the drawer panel) so very narrow
     * viewports still hold the design's row layout. 300px has no Apollo
     * Foundation `--xpl-size-*` token equivalent — logged as a Foundation
     * gap. Keep this in sync with `TECH_DEBT.md` if the team adds one.
     */
    width: 80vw;
    min-width: 300px;
    height: calc(100vh - var(--xpl-side-nav-mobile-bar-height));
    max-height: calc(100vh - var(--xpl-side-nav-mobile-bar-height));
    background: var(--xpl-background-surface-default);
    border-right: var(--xpl-border-small) solid var(--xpl-border-default);
    transform: translateX(-100%);
    visibility: hidden;
    transition-delay: 0s, 0s, 300ms;
    z-index: var(--xpl-z-index-600);
    opacity: 0
  }

  .xpl-side-nav.xpl-side-nav--open .xpl-side-nav__wrapper {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
    opacity: 1;
  }

  /*
   * Backdrop scrim: covers the page behind the drawer when open. Fades in /
   * out over 500ms with `ease-in-out` (slower than the 300ms drawer slide so
   * the scrim reads as atmospheric depth). Open state uses `opacity-50` —
   * matching `xpl-backdrop`'s native opacity — not full opaque. Always rendered
   * as `display: block` on mobile (overriding the base `@apply hidden`) so the
   * opacity transition can run; `visibility: hidden` while closed keeps it out
   * of the accessibility tree, with the visibility flip delayed 500ms on close
   * so the fade-out is visible. `pointer-events: none` applies immediately on
   * close (not transition-delayed) so taps reach page content while opacity
   * is still animating — `opacity: 0` alone does not block hit-testing.
   */
  .xpl-side-nav .xpl-side-nav__backdrop {
    pointer-events: none;
    position: fixed;
    inset: 0px;
    display: block;
    opacity: 0;
    transition-property: opacity,visibility;
    transition-duration: 500ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    top: var(--xpl-side-nav-mobile-bar-height);
    visibility: hidden;
    transition-delay: 0s, 500ms;
    z-index: var(--xpl-z-index-500)
  }

  .xpl-side-nav.xpl-side-nav--open .xpl-side-nav__backdrop {
    /* Match xpl-backdrop's native opacity (0.5) instead of forcing fully opaque. */
    pointer-events: auto;
    opacity: 0.5;

    visibility: visible;
    transition-delay: 0s;
  }

  /*
   * Row geometry split (Figma mobile spec):
   *
   * - The OUTER `.xpl-side-nav-item` wrapper carries the 48px tap target
   *   and 8px / 6px purely-geometric padding. The wrapper has no background,
   *   so this padding becomes the visible "gutter" around the pill.
   * - The INNER `.xpl-side-nav-item__link` (the visible button) carries
   *   the smaller 8px / 4px padding and the rounded background. With the
   *   wrapper's px-8/py-6, the pill is inset 8px L/R + 6px T/B from the
   *   row edges, matching Figma `<nav-item-parent>`.
   *
   * Drop the section's horizontal padding so rows fill the drawer edge to
   * edge (Figma section uses `py-24 px-0` — the row's px-8 is the only L/R
   * inset).
   */
  .xpl-side-nav__section {
    padding: var(--xpl-space-24) 0;
  }

  /*
   * Drop footer horizontal padding for the same reason as `__section` — the
   * row's outer wrapper now provides the 8px gutter, so leading icons in
   * footer items also land 16px from the drawer edge (footer pad-L 0 + host
   * pad-L 8 + link pad-L 8 = 16). Matches Figma `<navFooter>` (`px-0`).
   */
  .xpl-side-nav__footer {
    padding: var(--xpl-space-8) 0 var(--xpl-space-16);
  }

  .xpl-side-nav-item {
    min-height: var(--xpl-size-300);
    padding: var(--xpl-space-6) var(--xpl-space-8);
  }

  .xpl-side-nav .xpl-side-nav-item__link {
    padding: var(--xpl-space-4) var(--xpl-space-8);

    /*
     * The 48px tap target is enforced by the outer wrapper's min-height, so
     * the link only needs to be tall enough to wrap its content. Reset the
     * desktop `min-height: var(--xpl-size-200)` so the link doesn't push the
     * pill back to the row edges.
     */
    min-height: 0;
  }

  /*
   * Nested child rows: drop the outer wrapper's enforced 48px and its
   * vertical gutter so children naturally size to the inner button (matches
   * Figma `<nav-item-child>`, which has only `px-8` on the wrapper and
   * `pl-8 pr-4 py-6` on the inner item — no min-h-48). Horizontal wrapper
   * padding (px-8) is preserved for L/R alignment with parents.
   */
  .xpl-side-nav-item[has-children] .xpl-side-nav-item__children-inner .xpl-side-nav-item {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .xpl-side-nav-item[has-children] .xpl-side-nav-item__children-inner {
    gap: var(--xpl-space-4);
  }

  /*
   * Child item geometry — Figma `<nav-item-child>` inner pill:
   *   py-6 (6px top/bottom) + title-4 line-height 24px = 36px row height.
   *   padding-left reuses the shared `--xpl-side-nav-child-indent` token (32px)
   *   so mobile child labels stay aligned with the parent label column — the
   *   same value as the desktop child rule. Do NOT recompute from the mobile
   *   24px icon size; child rows have no leading icon (see the token definition).
   *
   * Gap between child items comes from `gap: var(--xpl-space-4)` on the mobile
   * children container, matching the parent item gap and the Figma section gap-4.
   */
  .xpl-side-nav-item[has-children] .xpl-side-nav-item__children-inner .xpl-side-nav-item__link {
    padding-top: var(--xpl-space-6);
    padding-bottom: var(--xpl-space-6);
    padding-left: var(--xpl-side-nav-child-indent);

    /*
     * Reset the desktop child `min-height: var(--xpl-size-200)` (32px) so the
     * mobile row sizes to its own padding + label: 6 + 24 + 6 = 36px.
     */
    min-height: 0;
  }

  /*
   * Leading + trailing icon container scale up to 24px on mobile so the
   * 24px icon glyph (set by xpl-side-nav-item's iconSize @State and / or
   * the SVG override below) is centered in a matching 24px box. Without
   * this rule the wrapper would stay at its 16px desktop width and the
   * scaled-up icon would overflow off-center.
   *
   * `:where()` zeroes its argument's specificity, so the whole selector
   * specificity is the same as `.xpl-side-nav-item__leading` (0,1,0) plus
   * the explicit `__trailing` re-statement — but combined we want to beat
   * the desktop rule cleanly without `!important`. The double class
   * (`.xpl-side-nav-item.xpl-side-nav-item`) bumps specificity to (0,2,0)
   * and isn't dependent on a `.xpl-side-nav` ancestor (which is missing
   * in some standalone story renders).
   */
  .xpl-side-nav-item .xpl-side-nav-item__leading,
  .xpl-side-nav-item .xpl-side-nav-item__trailing {
    width: var(--xpl-size-150);
    min-width: var(--xpl-size-150);
    height: var(--xpl-size-150);
    min-height: var(--xpl-size-150);
  }

  /*
   * Icon SVG size on mobile. CSS declarations beat presentational `width`/`height`
   * attributes set by `xpl-icon`'s `size` prop, so this rule wins for both
   * link-mode items (where the consumer may hardcode `size="16"`) and button-mode
   * items (where the component passes `size={16}`). Applies to all items — both
   * inside and outside `.xpl-side-nav` — so standalone story renders also scale
   * correctly without needing a `.xpl-side-nav` ancestor.
   */
  :is(.xpl-side-nav-item__leading, .xpl-side-nav-item__trailing) svg {
    width: var(--xpl-size-150);
    height: var(--xpl-size-150);
  }

  /*
   * Top-level row labels: title-3 (Figma mobile spec).
   *
   * The desktop base rule does `@extend .xpl-text-title-4` which inherits
   * font-size 16px, font-weight medium, and line-height 1.5. Mobile only
   * needs to swap the typography level. `@extend` cannot be used inside an
   * `@media` block with this PostCSS pipeline, so the line-height is
   * mirrored manually as the unitless ratio from `typography.css`
   * (`.xpl-text-title-3 { line-height: 1.4 }` = 28px / 20px). Font weight is
   * inherited from the `@extend`ed title-4 rule and stays medium — which is
   * what the Figma item label spec calls for (and differs from the
   * `.xpl-text-title-3` typography default of bold).
   */
  .xpl-side-nav .xpl-side-nav-item__label {
    font-size: var(--xpl-font-size-title-3);

    /* Unitless ratio mirrors typography.css title-3 (1.4 = 28px / 20px). */
    line-height: 1.4;
  }

  /*
   * Nested child row labels: title-4 (one step smaller than the parent).
   * Same justification as above — `@extend .xpl-text-title-4` would be the
   * idiomatic choice but cannot cross media-query boundaries here.
   */
  .xpl-side-nav-item[has-children] .xpl-side-nav-item__children-inner .xpl-side-nav-item__label {
    font-size: var(--xpl-font-size-title-4);

    /* Unitless ratio mirrors typography.css title-4 (1.5 = 24px / 16px). */
    line-height: 1.5;
  }

  /*
   * Mobile footer items (Figma `<navFooter>` mobile spec, Apollo-Web node
   * 48099-68326): 32px-tall row, title-4 label, 20px icon — smaller than the
   * top-level mobile rows (48px / title-3 / 24px) so the footer reads as a
   * secondary action zone within the drawer.
   *
   * Horizontal padding is inherited from the base mobile rules so leading
   * icons stay aligned with section + child items (wrapper px-8 + link px-8
   * = 16px from drawer edge). Vertical wrapper padding is zeroed: the row
   * sums to link padding (4+4) + label height (title-4 line-height 24px)
   * = 32px naturally, with --xpl-size-200 as the floor.
   */
  .xpl-side-nav .xpl-side-nav__footer .xpl-side-nav-item {
    min-height: var(--xpl-size-200);
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Leading + trailing icon containers shrink from 24px (mobile default) to 20px. */
  .xpl-side-nav
    .xpl-side-nav__footer
    :is(.xpl-side-nav-item__leading, .xpl-side-nav-item__trailing),
  .xpl-side-nav
    .xpl-side-nav__footer
    :is(.xpl-side-nav-item__leading, .xpl-side-nav-item__trailing)
    svg {
    width: var(--xpl-size-125);
    height: var(--xpl-size-125);
  }

  /* Footer label drops to title-4 (one step down from the title-3 top-level rows). */
  .xpl-side-nav .xpl-side-nav__footer .xpl-side-nav-item__label {
    font-size: var(--xpl-font-size-title-4);

    /* Unitless ratio mirrors typography.css title-4 (1.5 = 24px / 16px). */
    line-height: 1.5;
  }
}

@keyframes spotlight-ping {
  75%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

.xpl-spotlight {
  --xpl-spotlight-width: 22.5rem; /* TECH_DEBT: design-specific width — no Foundation token exists; request --xpl-size-spotlight-width */
  --xpl-spotlight-image-min-height: 13.75rem; /* TECH_DEBT: design-specific min-height — no Foundation token exists; request --xpl-size-spotlight-image-height */
  --xpl-spotlight-checker-size: var(--xpl-size-100);
  --xpl-spotlight-checker-offset: calc(-1 * var(--xpl-size-050));
  position: relative;
  display: flex;
  flex-direction: column;
  opacity: 0;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  /* Avoid `transition-all`: Floating UI updates `left`/`top` on scroll/resize; those must not animate. */
  transition-property: opacity, transform;
  width: var(--xpl-spotlight-width);
  background-color: var(--xpl-background-surface-default);
  border-radius: var(--xpl-border-radius-default);
  transform: scale(0.95);
  will-change: opacity, transform;
  z-index: var(--xpl-z-index-800);
}

/* Closed host: hides light-DOM slotted children (no `<slot>` when `render` returns minimal `Host`). */

.xpl-spotlight--closed {
  display: none
}

.flatpickr-day.xpl-spotlight--closed{visibility:hidden}

.xpl-toolbar.xpl-spotlight--closed {
  display: none;
}

.xpl-spotlight__target {
  position: absolute;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;

    width: var(--xpl-size-150);
    height: var(--xpl-size-150);
    border-radius: var(--xpl-border-radius-full);
    z-index: var(--xpl-z-index-100)
}

.xpl-spotlight__target:focus-visible {
      outline-color: var(--xpl-border-focus);
      outline-width: 2px;
      outline-offset: 2px;
    }

/* Target-only: card hidden, pulsing dot visible and clickable. */

.xpl-spotlight--target-only {
  pointer-events: none;
  height: 0px;
  width: 0px;
  overflow: visible;
  opacity: 1;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

    background: none;
    border-radius: var(--xpl-border-radius-none);
    transform: none
}

.xpl-spotlight--target-only > .xpl-spotlight__target {
  pointer-events: auto
}

.xpl-spotlight:focus-visible {
    outline-color: var(--xpl-border-focus);
    outline-width: 2px;
    outline-offset: 2px;
  }

.xpl-spotlight--visible {
  opacity: 1;

    transform: scale(1)
}

/* `computePosition` uses `strategy: 'fixed'` (viewport x/y); host must use `position: fixed` so `left`/`top` match. */

.xpl-spotlight--anchored {
  position: fixed;
  margin: 0px;

    transition-property: opacity, transform;
    will-change: opacity, transform, left, top
}

.xpl-spotlight__frame {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;

    border-radius: var(--xpl-border-radius-default)
}

.xpl-spotlight__image-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

    min-height: var(--xpl-spotlight-image-min-height);
    background-image:
      linear-gradient(45deg, var(--xpl-background-surface-subtle) 25%, transparent 25%),
      linear-gradient(-45deg, var(--xpl-background-surface-subtle) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, var(--xpl-background-surface-subtle) 75%),
      linear-gradient(-45deg, transparent 75%, var(--xpl-background-surface-subtle) 75%);
    background-position:
      0 0,
      0 var(--xpl-space-8),
      var(--xpl-space-8) var(--xpl-spotlight-checker-offset),
      var(--xpl-spotlight-checker-offset) 0;
    background-size: var(--xpl-spotlight-checker-size) var(--xpl-spotlight-checker-size)
}

.xpl-spotlight__image-container img,
    .xpl-spotlight__image-container picture,
    .xpl-spotlight__image-container video,
    .xpl-spotlight__image-container svg {
  display: block;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;

      aspect-ratio: 360/220 /* Figma image region design spec: 360×220 */
}

.xpl-spotlight__image-container--hidden {
  display: none
}

.flatpickr-day.xpl-spotlight__image-container--hidden{visibility:hidden}

.xpl-toolbar.xpl-spotlight__image-container--hidden {
  display: none;
}

.xpl-spotlight__image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;

    gap: var(--xpl-space-16);
    color: var(--xpl-icon-subtle)
}

.xpl-spotlight__content {
  display: flex;
  flex-direction: column;

    gap: var(--xpl-space-24);
    padding: var(--xpl-space-16);
    background-color: var(--xpl-background-surface-default)
}

.xpl-spotlight__header {
  display: flex;
  flex-direction: column;

    gap: var(--xpl-space-8)
}

.xpl-spotlight__title {
    color: var(--xpl-text-default);
    font-size: var(--xpl-font-size-title-3);
    font-weight: var(--xpl-font-weight-semibold);
    line-height: 1.4; /* Figma spec prescribes 1.4; .xpl-text-title-3 uses a different ratio */ margin: 0px;
  }

.xpl-spotlight__body {
  font-size: var(--xpl-font-size-body);
  font-weight: var(--xpl-font-weight-normal);
  line-height: 1.4286;
  }

.xpl-spotlight__body {
    margin: 0px;

    color: var(--xpl-text-default);
  }

.xpl-spotlight__actions {
  display: flex;
  align-items: center;

    gap: var(--xpl-space-12)
}

.xpl-spotlight__actions--dual {
  justify-content: space-between
}

.xpl-spotlight__actions--single {
  justify-content: flex-end
}

.xpl-spotlight__actions--only-primary,
    .xpl-spotlight__actions--only-secondary {
  justify-content: space-between
}

.xpl-spotlight__action-slot {
  display: flex;
  flex: 1 1 0%
}

.xpl-spotlight__action-slot--primary {
  justify-content: flex-end
}

.xpl-spotlight__primary-action,
  .xpl-spotlight__secondary-action {
  flex-shrink: 0
}

.xpl-spotlight__step-text {
  text-align: center;

    color: var(--xpl-text-subdued);
    font-size: var(--xpl-font-size-body);
    font-weight: var(--xpl-font-weight-normal)
}

.xpl-spotlight--action-layout-single .xpl-spotlight__actions {
  justify-content: flex-end
}

.xpl-spotlight--action-layout-single .xpl-spotlight__action-slot--secondary,
    .xpl-spotlight--action-layout-single .xpl-spotlight__step-text {
  display: none
}

.flatpickr-day.xpl-spotlight--action-layout-single .xpl-spotlight__action-slot--secondary,.flatpickr-day
    .xpl-spotlight--action-layout-single .xpl-spotlight__step-text{visibility:hidden}

.xpl-toolbar.xpl-spotlight--action-layout-single .xpl-spotlight__action-slot--secondary,.xpl-toolbar
    .xpl-spotlight--action-layout-single .xpl-spotlight__step-text {
  display: none;
}

.xpl-spotlight--action-layout-single .xpl-spotlight__action-slot--primary {
  flex: none
}

.xpl-spotlight--only-primary-action .xpl-spotlight__step-text, .xpl-spotlight--only-secondary-action .xpl-spotlight__step-text {
  flex: 0 1 auto
}

.xpl-spotlight__target-outer {
  position: absolute;
  top: 50%;
  left: 50%;

    width: var(--xpl-size-300);
    height: var(--xpl-size-300);
    background-color: var(--xpl-background-surface-information-bold);
    border-radius: var(--xpl-border-radius-full);
    transform: translate(-50%, -50%);
    animation: spotlight-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
}

.xpl-spotlight__target-inner {
  position: absolute;
  top: 50%;
  left: 50%;

    width: var(--xpl-size-150);
    height: var(--xpl-size-150);
    background-color: var(--xpl-background-accent-default);
    border-radius: var(--xpl-border-radius-full);
    transform: translate(-50%, -50%)
}

.xpl-spotlight__dismiss {
  position: absolute;

    top: var(--xpl-space-16);
    right: var(--xpl-space-16);
    z-index: var(--xpl-z-index-100)
}

.xpl-spotlight--top-left {
  transform-origin: top left
}

.xpl-spotlight--top-left .xpl-spotlight__target {
  left: 0px;
  top: 0px;

      transform: translate(
        calc(-50% + var(--xpl-spotlight-shift-x, 0px)),
        calc(-50% + var(--xpl-spotlight-shift-y, 0px))
      )
}

.xpl-spotlight--top-right {
  transform-origin: top right
}

.xpl-spotlight--top-right .xpl-spotlight__target {
  right: 0px;
  top: 0px;

      transform: translate(
        calc(50% + var(--xpl-spotlight-shift-x, 0px)),
        calc(-50% + var(--xpl-spotlight-shift-y, 0px))
      )
}

.xpl-spotlight--bottom-left {
  transform-origin: bottom left
}

.xpl-spotlight--bottom-left .xpl-spotlight__target {
  bottom: 0px;
  left: 0px;

      transform: translate(
        calc(-50% + var(--xpl-spotlight-shift-x, 0px)),
        calc(50% + var(--xpl-spotlight-shift-y, 0px))
      )
}

.xpl-spotlight--bottom-right {
  transform-origin: bottom right
}

.xpl-spotlight--bottom-right .xpl-spotlight__target {
  bottom: 0px;
  right: 0px;

      transform: translate(
        calc(50% + var(--xpl-spotlight-shift-x, 0px)),
        calc(50% + var(--xpl-spotlight-shift-y, 0px))
      )
}

/* stylelint-disable no-descending-specificity */

.xpl-input-search {
  color: var(--xpl-text-default);
  display: block;
  width: 100%;
  max-width: 100%;
}

.xpl-input-search__form {
  margin: 0px;
  display: block;
  width: 100%;
  max-width: 100%;
  border-style: none;
  padding: 0px
}

.xpl-input-search__shell {
  display: flex;
  width: 100%;
  min-width: 0px;
  flex-direction: row;
  align-items: center;
  overflow: hidden;

    box-sizing: border-box;
    gap: var(--xpl-space-12);
    min-height: var(--xpl-size-250);
    max-height: var(--xpl-size-250);
    padding: var(--xpl-space-12);
    border-radius: var(--xpl-border-radius-button);
    border-width: var(--xpl-border-small);
    border-style: solid;
    border-color: var(--xpl-border-default);
    background-color: var(--xpl-background-surface-default);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

.xpl-input-search__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

    color: var(--xpl-icon-default)
}

.xpl-input-search .xpl-input-search__input {
    flex: 1 0 0;
    min-width: 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border-style: none;
    background-color: transparent;
    outline: 2px solid transparent;
    outline-offset: 2px;

    color: inherit;
    font-family: var(--xpl-font-family-default);
    font-size: var(--xpl-font-size-body);
    font-weight: var(--xpl-font-weight-normal);

    /* Foundation has no line-height custom property yet — mirrors body typography. */
    line-height: 1.4286;
    padding: 0;
    -webkit-text-fill-color: currentcolor;
  }

.xpl-input-search .xpl-input-search__input::-moz-placeholder {
    color: var(--xpl-text-subdued);
    -webkit-text-fill-color: var(--xpl-text-subdued);
  }

.xpl-input-search .xpl-input-search__input::placeholder {
    color: var(--xpl-text-subdued);
    -webkit-text-fill-color: var(--xpl-text-subdued);
  }

.xpl-input-search__clear {
  display: flex;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-style: none;
  background-color: transparent;
  padding: 0px;

    color: var(--xpl-icon-subtle)
}

.xpl-input-search__clear:focus-visible {
      border-radius: var(--xpl-border-radius-full);
      outline-color: var(--xpl-border-focus);
      outline-width: 2px;
      outline-offset: 2px;
    }

.xpl-input-search--shape-box .xpl-input-search__shell {
    border-radius: var(--xpl-border-radius-small);
  }

/* Keep clear in flow so width does not jump when `xpl-input-search--has-value` toggles. */

.xpl-input-search:not(.xpl-input-search--has-value) .xpl-input-search__clear {
  pointer-events: none;
  visibility: hidden
}

.xpl-input--search.xpl-input--error .xpl-input-search__shell,
  .xpl-input-search--error .xpl-input-search__shell {
    border-color: var(--xpl-border-negative);
  }

.xpl-input--search.xpl-input--disabled .xpl-input-search__shell,
  .xpl-input-search--disabled .xpl-input-search__shell {
    background-color: var(--xpl-background-action-disabled);
    cursor: not-allowed;
  }

.xpl-input--search.xpl-input--disabled .xpl-input-search__input,
  .xpl-input-search--disabled .xpl-input-search__input {
    color: var(--xpl-text-disabled);
    -webkit-text-fill-color: var(--xpl-text-disabled);
    cursor: not-allowed;
  }

.xpl-input--search.xpl-input--disabled .xpl-input-search__input::-moz-placeholder, .xpl-input-search--disabled .xpl-input-search__input::-moz-placeholder {
    color: var(--xpl-text-disabled);
    -webkit-text-fill-color: var(--xpl-text-disabled);
  }

.xpl-input--search.xpl-input--disabled .xpl-input-search__input::placeholder,
  .xpl-input-search--disabled .xpl-input-search__input::placeholder {
    color: var(--xpl-text-disabled);
    -webkit-text-fill-color: var(--xpl-text-disabled);
  }

.xpl-input--search.xpl-input--disabled .xpl-input-search__icon,
  .xpl-input-search--disabled .xpl-input-search__icon {
    color: var(--xpl-icon-disabled);
  }

.xpl-input--search.xpl-input--disabled .xpl-input-search__clear,
  .xpl-input-search--disabled .xpl-input-search__clear,
  .xpl-input--search.xpl-input--readonly .xpl-input-search__clear,
  .xpl-input-search--readonly .xpl-input-search__clear {
  display: none
}

.flatpickr-day.xpl-input--search.xpl-input--disabled .xpl-input-search__clear,.flatpickr-day
  .xpl-input-search--disabled .xpl-input-search__clear,.flatpickr-day
  .xpl-input--search.xpl-input--readonly .xpl-input-search__clear,.flatpickr-day
  .xpl-input-search--readonly .xpl-input-search__clear{visibility:hidden}

.xpl-toolbar.xpl-input--search.xpl-input--disabled .xpl-input-search__clear,.xpl-toolbar
  .xpl-input-search--disabled .xpl-input-search__clear,.xpl-toolbar
  .xpl-input--search.xpl-input--readonly .xpl-input-search__clear,.xpl-toolbar
  .xpl-input-search--readonly .xpl-input-search__clear {
  display: none;
}

/* Inner focus: default shell border; `&--has-value` stays flat (nested `&--has-value {}` breaks BEM in PostCSS) */

.xpl-input-search .xpl-input-search__shell:has(.xpl-input-search__input:focus-visible) {
    border-color: var(--xpl-border-active);
  }

.xpl-input-search--has-value .xpl-input-search__shell:has(.xpl-input-search__input:focus-visible) {
    border-color: var(--xpl-border-focus);
  }

.xpl-input-search--has-value .xpl-input-search__input:focus-visible {
    caret-color: var(--xpl-border-focus);
  }

.xpl-input-search .xpl-input-search__input:is(:-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus) {
    -webkit-text-fill-color: var(--xpl-text-default);
  }

.xpl-input--search.xpl-input--error .xpl-input-search__shell:has(.xpl-input-search__input:focus-visible),
  .xpl-input-search--error .xpl-input-search__shell:has(.xpl-input-search__input:focus-visible) {
    border-color: var(--xpl-border-negative);
  }

.xpl-input--search.xpl-input--error .xpl-input-search__input:focus-visible,
  .xpl-input-search--error .xpl-input-search__input:focus-visible {
    caret-color: var(--xpl-border-negative);
  }

/* stylelint-enable no-descending-specificity */