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

/* stylelint-disable function-disallowed-list -- hsl value pending Foundation token; remove when resolved. Apollo Foundations var maps (TEMP) [TODO: remove when apollo foundations is updated] */

:root {
  --xpl-text-positive: var(--xpl-color-green-700);
  --xpl-text-negative: var(--xpl-color-red-700);
  --xpl-color-background-surface-transparent-10: hsl(253deg 13% 20% / 0.1);
}

.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: rgba(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);
    font-size: var(--xpl-font-size-title-5);
    font-weight: var(--xpl-font-weight-medium);
    gap: var(--xpl-space-4);
    height: var(--xpl-size-150);
    line-height: var(--xpl-size-125);
    padding: var(--xpl-space-2) var(--xpl-space-12);
    display: inline-flex;
    min-width: 0px;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }

.xpl-badge--size-small {
    font-size: var(--xpl-font-size-callout);
    font-weight: var(--xpl-font-weight-semibold);
    height: var(--xpl-size-125);
    line-height: var(--xpl-size-100);
    padding: var(--xpl-space-2) var(--xpl-space-8);
  }

.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-size: var(--xpl-font-size-caption);
    font-weight: var(--xpl-font-weight-bold);
    height: var(--xpl-size-0875);
    line-height: var(--xpl-size-0875);
    min-width: var(--xpl-size-0875);
    padding: var(--xpl-space-2) var(--xpl-space-4);
    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-size-font-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-size-font-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 {
  display: block;
  width: 100%;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(225 226 232 / var(--tw-border-opacity, 1));
  padding-top: 1.25rem;
}

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

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

.xpl-button-row xpl-button + xpl-button .xpl-button {
  margin-left: 1rem;
}

.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: 1rem;
    width: 100%;
    justify-content: center;
  }

  .xpl-button-row xpl-button + xpl-button .xpl-button {
    margin-left: 0px;
  }

  .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: 0px;
  }
}

.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.
 */

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

.xpl-checkbox-radio-container.styled {
  position: relative;
  overflow: hidden;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(225 226 232 / 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-checkbox-radio-container.styled {
  --tw-border-opacity: 1;
  border-color: rgb(106 109 125 / var(--tw-border-opacity, 1));
}

.xpl-checkbox-radio-container.styled.disabled {
  /* override hover */
  --tw-border-opacity: 1 !important;
  border-color: rgb(225 226 232 / var(--tw-border-opacity, 1)) !important;
}

.dark .xpl-checkbox-radio-container.styled.disabled {
  /* override hover */
  --tw-border-opacity: 1 !important;
  border-color: rgb(106 109 125 / var(--tw-border-opacity, 1)) !important;
}

.xpl-checkbox-radio-container.styled:hover,
.xpl-checkbox-radio-container.styled:focus-within {
  border-color: var(--xpl-color-secondary-lm);
}

.dark .xpl-checkbox-radio-container.styled:hover,
.dark .xpl-checkbox-radio-container.styled:focus-within {
  border-color: var(--xpl-color-secondary-dm);
}

.xpl-checkbox {
  border-radius: 4px;
  height: 16px;
  top: 2px;
  width: 16px;
  position: relative;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(153 155 168 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-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;
}

.xpl-checkbox: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;
}

.dark .xpl-checkbox {
  --tw-ring-offset-color: var(--xpl-color-gray-1200);
  --tw-border-opacity: 1;
  border-color: rgb(153 155 168 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(24 22 31 / var(--tw-bg-opacity, 1));
}

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

.xpl-checkbox:checked,
.xpl-checkbox:indeterminate {
  background-color: var(--xpl-color-secondary-lm);
}

.xpl-checkbox:disabled {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: rgb(225 226 232 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(225 226 232 / var(--tw-bg-opacity, 1));
}

.xpl-checkbox:focus {
  --tw-ring-color: var(--xpl-color-secondary-lm);
}

.xpl-checkbox-radio-container.styled input {
  --tw-ring-color: transparent;
  --tw-ring-offset-color: transparent;
  position: absolute;
  margin-left: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.xpl-checkbox-radio-container input + label {
  cursor: pointer;
  padding-left: 1rem;
  padding-right: 1rem;
  vertical-align: middle;
}

.xpl-checkbox-radio-container.styled label {
  display: block;
  width: 100%;
  padding-left: 3rem;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  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:disabled + label {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
}

.xpl-checkbox-radio-container.styled input:checked + label,
.xpl-checkbox-radio-container.styled .xpl-checkbox:indeterminate + label {
  --tw-bg-opacity: 1;
  background-color: rgb(244 242 255 / var(--tw-bg-opacity, 1));
}

.dark .xpl-checkbox-radio-container.styled input:disabled + label {
  --tw-bg-opacity: 1;
  background-color: rgb(54 50 64 / var(--tw-bg-opacity, 1));
}

.dark .xpl-checkbox-radio-container.styled input:checked + label,
.dark .xpl-checkbox-radio-container.styled .xpl-checkbox:indeterminate + label {
  --tw-bg-opacity: 1;
  background-color: rgb(48 45 59 / var(--tw-bg-opacity, 1));
}

.xpl-checkbox-radio-container.styled .xpl-checkbox:disabled:indeterminate + label {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
}

.xpl-checkbox::after {
  content: "";
  height: 16px;
  width: 16px;
  display: block;
  background-repeat: no-repeat;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.dark .xpl-checkbox:focus {
  --tw-ring-color: var(--xpl-color-secondary-dm);
}

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

.dark .xpl-checkbox:checked,
.dark .xpl-checkbox:indeterminate {
  background-color: var(--xpl-color-secondary-dm);
}

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

.xpl-checkbox:disabled:checked,
.xpl-checkbox:disabled:indeterminate,
.dark .xpl-checkbox:disabled:checked,
.dark .xpl-checkbox:disabled:indeterminate {
  --tw-border-opacity: 1;
  border-color: rgb(153 155 168 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(153 155 168 / var(--tw-bg-opacity, 1));
}

.xpl-checkbox-radio-container.styled .xpl-checkbox:focus {
  --tw-ring-color: transparent;
  --tw-border-opacity: 1;
  border-color: rgb(153 155 168 / var(--tw-border-opacity, 1));
}

.xpl-checkbox-radio-container.styled .xpl-checkbox:checked:focus {
  border-color: var(--xpl-color-secondary-lm);
}

.xpl-checkbox:indeterminate::after {
  background-position: calc(50% - 1px) calc(50% - 1px);
  background-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");
  opacity: 1;
}

.xpl-checkbox: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='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");
  background-position: calc(50% - 1px) calc(50% - 1px);
  opacity: 1;
}

.dark .xpl-checkbox::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='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='%23292632'/%3E%3C/svg%3E%0A");
}

.dark .xpl-checkbox:indeterminate::after {
  background-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='%23292632'/%3E%3C/svg%3E%0A");
}

.xpl-radio {
  height: 16px;
  top: 2px;
  transition-property: border;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  width: 16px;
  position: relative;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(153 155 168 / var(--tw-border-opacity, 1));
}

.xpl-radio: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;
}

.dark .xpl-radio {
  --tw-ring-offset-color: var(--xpl-color-gray-1200);
}

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

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

.xpl-radio:focus {
  --tw-ring-color: var(--xpl-color-secondary-lm);
}

.xpl-radio:disabled {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: rgb(225 226 232 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(225 226 232 / var(--tw-bg-opacity, 1));
}

.xpl-radio:disabled:checked {
  --tw-border-opacity: 1;
  border-color: rgb(153 155 168 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

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

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

.dark .xpl-radio:focus {
  --tw-ring-color: var(--xpl-color-secondary-dm);
}

.dark .xpl-radio:disabled:checked {
  --tw-border-opacity: 1;
  border-color: rgb(153 155 168 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(24 22 31 / var(--tw-bg-opacity, 1));
}

.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-size-font-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-size-font-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: 2.5rem;
    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-size-font-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-size-font-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-size-font-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;
}

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

.xpl-divider {
  margin-bottom: 1rem;
  display: block;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(225 226 232 / var(--tw-border-opacity, 1));
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(48 45 59 / var(--tw-text-opacity, 1));
}

.xpl-divider--3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.xpl-divider--2 {
  font-size: 1rem;
  line-height: 1.5rem;
}

.xpl-divider--1 {
  font-size: 0.75rem;
  line-height: 1rem;
}

.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-divider--0 {
  padding-bottom: 0px;
}

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

.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 color-no-hex -- third-party flatpickr overrides; hex values are intentional. Flatpickr overrides */

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

.flatpickr-calendar {
  border: 1px solid #e1e2e8;
  box-shadow:
    0 4px 6px -2px #0000000d,
    0 10px 15px -3px #0000001a;
}

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

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

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

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

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

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

.dark .flatpickr-calendar {
  border-color: #302d3b;
  box-shadow:
    0 4px 6px -2px #0000000d,
    0 10px 15px -3px #0000001a;
  --tw-bg-opacity: 1;
  background-color: rgb(60 56 71 / var(--tw-bg-opacity, 1));
}

.flatpickr-days {
  width: 100%;
}

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

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

.flatpickr-months {
  padding: 0.5rem;
}

.flatpickr-months .flatpickr-month {
  height: 40px;
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
}

.dark .flatpickr-months .flatpickr-month {
  --tw-bg-opacity: 1;
  background-color: rgb(54 50 64 / var(--tw-bg-opacity, 1));
}

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

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  box-sizing: border-box; /* don't know why this gets unset :-\ */
  height: 40px;
  top: 0.5rem;
  padding-top: 0.75rem;
}

.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 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.dark .flatpickr-months .flatpickr-prev-month,
.dark .flatpickr-months .flatpickr-next-month {
  fill: var(--xpl-color-text-primary-dm);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark .flatpickr-months .flatpickr-prev-month:hover,
.dark .flatpickr-months .flatpickr-next-month:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(41 38 50 / var(--tw-bg-opacity, 1));
}

.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  fill: var(--xpl-color-text-primary-lm);
}

.flatpickr-months .flatpickr-prev-month:hover path,
.flatpickr-months .flatpickr-next-month:hover path {
  fill: var(--xpl-color-secondary-lm);
}

.dark .flatpickr-months .flatpickr-prev-month svg path,
.dark .flatpickr-months .flatpickr-next-month svg path {
  fill: #fff;
}

.dark .flatpickr-months .flatpickr-prev-month:hover path,
.dark .flatpickr-months .flatpickr-next-month:hover path {
  fill: var(--xpl-color-secondary-dm);
}

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

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

.flatpickr-current-month .numInputWrapper {
  width: 64px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.flatpickr-current-month input.cur-year {
  font-weight: 500;
  height: 40px;
  padding: 0.5rem;
  padding-right: 1rem;
}

.numInputWrapper:hover,
.flatpickr-current-month input.cur-year:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.numInputWrapper span {
  border-width: 0px;
}

.numInputWrapper span:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(238 239 243 / var(--tw-bg-opacity, 1));
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
  --tw-text-opacity: 1;
  color: rgb(48 45 59 / var(--tw-text-opacity, 1));
}

.dark .flatpickr-current-month .flatpickr-monthDropdown-months option {
  color: #fff;
}

.dark .flatpickr-current-month input.cur-year {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark .numInputWrapper:hover,
.dark .flatpickr-current-month input.cur-year:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(41 38 50 / var(--tw-bg-opacity, 1));
}

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

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

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

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

.dark .flatpickr-current-month .numInputWrapper span.arrowUp::after,
.dark .flatpickr-current-month .numInputWrapper span.arrowDown::after {
  border-bottom-color: var(--xpl-color-text-primary-dm);
}

.dark .flatpickr-current-month .flatpickr-monthDropdown-months {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(41 38 50 / var(--tw-bg-opacity, 1));
}

.flatpickr-day {
  line-height: 2.3rem;
}

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

.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-color: var(--xpl-color-secondary-lm);
  border-color: var(--xpl-color-secondary-lm);
}

.dark .flatpickr-day.selected, .dark .flatpickr-day.startRange, .dark .flatpickr-day.endRange, .dark .flatpickr-day.selected.inRange, .dark .flatpickr-day.startRange.inRange, .dark .flatpickr-day.endRange.inRange, .dark .flatpickr-day.selected:focus, .dark .flatpickr-day.startRange:focus, .dark .flatpickr-day.endRange:focus, .dark .flatpickr-day.selected:hover, .dark .flatpickr-day.startRange:hover, .dark .flatpickr-day.endRange:hover, .dark .flatpickr-day.selected.prevMonthDay, .dark .flatpickr-day.startRange.prevMonthDay, .dark .flatpickr-day.endRange.prevMonthDay, .dark .flatpickr-day.selected.nextMonthDay, .dark .flatpickr-day.startRange.nextMonthDay, .dark .flatpickr-day.endRange.nextMonthDay {
    background-color: var(--xpl-color-secondary-dm);
    border-color: var(--xpl-color-secondary-dm);
    color: var(--xpl-color-text-reverse-dm);
  }

.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 {
  background-color: var(--xpl-color-secondary-bg-lm);
  border-color: var(--xpl-color-secondary-bg-lm);
}

.flatpickr-day.inRange {
  box-shadow:
    -5px 0 0 var(--xpl-color-secondary-bg-lm),
    5px 0 0 var(--xpl-color-secondary-bg-lm);
}

.dark .flatpickr-day.inRange {
    box-shadow:
      -5px 0 0 var(--xpl-color-secondary-bg-dm),
      5px 0 0 var(--xpl-color-secondary-bg-dm);
  }

.dark .flatpickr-day {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark .flatpickr-day.inRange,
.dark .flatpickr-day.prevMonthDay.inRange,
.dark .flatpickr-day.nextMonthDay.inRange,
.dark .flatpickr-day.today.inRange,
.dark .flatpickr-day.prevMonthDay.today.inRange,
.dark .flatpickr-day.nextMonthDay.today.inRange,
.dark .flatpickr-day:hover,
.dark .flatpickr-day.prevMonthDay:hover,
.dark .flatpickr-day.nextMonthDay:hover,
.dark .flatpickr-day:focus,
.dark .flatpickr-day.prevMonthDay:focus,
.dark .flatpickr-day.nextMonthDay:focus {
  background-color: var(--xpl-color-secondary-bg-dm);
  border-color: var(--xpl-color-secondary-bg-dm);
  color: var(--xpl-color-secondary-dm);
}

.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-color-secondary-bg-lm);
}

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

span.flatpickr-weekday {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(48 45 59 / var(--tw-text-opacity, 1));
}

.dark span.flatpickr-weekday {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.flatpickr-day.today {
  border-radius: 50%;
  border: 1px solid var(--xpl-color-stroke-lm);
}

.dark .flatpickr-day.today {
  border: 1px solid var(--xpl-color-stroke-dm);
}

.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 color-no-hex -- TODO: migrate to var(--xpl-*) tokens (see TECH_DEBT.md) */

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

.xpl-input input {
  height: 44px;
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  padding-right: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.xpl-input-calendar {
  pointer-events: none;
  position: absolute;
  right: 0.75rem;
}

button[class^="xpl-input-password"] {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  cursor: pointer;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.xpl-input-calendar,
[class^="xpl-input-password"] xpl-icon {
  color: var(--xpl-color-text-primary-lm);
}

.dark .xpl-input-calendar,
.dark [class^="xpl-input-password"] xpl-icon {
  color: #fff;
}

.xpl-input textarea {
  min-height: 44px;
  height: 98px;
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.xpl-input-wrapper {
  border-color: var(--xpl-color-gray-400);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 0.375rem;
  border-width: 1px;
  padding-left: 0.75rem;
}

.dark .xpl-input-wrapper {
    border-color: var(--xpl-color-gray-600);
  }

.xpl-input--readonly .xpl-input-wrapper,
.xpl-input--disabled .xpl-input-wrapper {
  background-color: var(--xpl-color-gray-100);
}

.xpl-input-wrapper:focus-within {
  border-color: var(--xpl-color-secondary-lm);
}

.dark .xpl-input-wrapper:focus-within {
    border-color: var(--xpl-color-secondary-dm);
  }

.xpl-input-wrapper .xpl-input-post {
  background-color: var(--xpl-color-gray-50);
  border-color: var(--xpl-color-gray-400);
  line-height: 2.75rem;
  left: auto;
  right: 0.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-left-width: 1px;
}

.xpl-input--disabled .xpl-input-post,
.xpl-input--readonly .xpl-input-post {
  background-color: transparent;
}

.dark .xpl-input-wrapper .xpl-input-post {
  background-color: var(--xpl-color-gray-800);
  border-color: var(--xpl-color-gray-600);
}

.xpl-input-wrapper:focus-within .xpl-input-post {
  border-left-color: var(--xpl-color-secondary-lm);
}

.dark .xpl-input-wrapper:focus-within .xpl-input-post {
    border-left-color: var(--xpl-color-secondary-dm);
  }

.dark .xpl-input--readonly .xpl-input-wrapper,
.dark .xpl-input--disabled .xpl-input-wrapper {
  background-color: var(--xpl-color-gray-800);
}

.xpl-input--readonly input,
  .xpl-input--readonly textarea,
  .xpl-input--disabled input,
  .xpl-input--disabled textarea {
    color: var(--xpl-color-gray-600);
  }

.dark .xpl-input input, .dark .xpl-input textarea {
    color: var(--xpl-color-gray-50);
  }

.dark .xpl-input--readonly input,
  .dark .xpl-input--readonly textarea,
  .dark .xpl-input--disabled input,
  .dark .xpl-input--disabled textarea {
    color: var(--xpl-color-gray-500);
  }

.xpl-input input:read-only:not(:disabled)::-moz-placeholder, .xpl-input textarea:read-only:not(:disabled)::-moz-placeholder {
  color: var(--xpl-color-text-primary-lm);
}

.xpl-input input:-moz-read-only:not(:disabled)::placeholder, .xpl-input textarea:-moz-read-only:not(:disabled)::placeholder {
  color: var(--xpl-color-text-primary-lm);
}

.xpl-input input:read-only:not(:disabled)::placeholder,
.xpl-input textarea:read-only:not(:disabled)::placeholder {
  color: var(--xpl-color-text-primary-lm);
}

.xpl-input input:disabled,
.xpl-input textarea:disabled {
  cursor: not-allowed;
  background-color: transparent;
}

.xpl-input-label {
  display: block;
  cursor: pointer;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

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

.xpl-input-label small {
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(106 109 125 / var(--tw-text-opacity, 1));
}

.dark .xpl-input-label small {
  --tw-text-opacity: 1;
  color: rgb(153 155 168 / var(--tw-text-opacity, 1));
}

.xpl-input--disabled .xpl-input-label {
  cursor: not-allowed;
}

.xpl-input--disabled .xpl-input-wrapper {
  cursor: not-allowed;
}

.xpl-input--error .xpl-input-wrapper {
  --tw-border-opacity: 1;
  border-color: rgb(219 50 31 / var(--tw-border-opacity, 1));
}

.dark .xpl-input--error .xpl-input-wrapper {
  --tw-border-opacity: 1;
  border-color: rgb(255 147 135 / var(--tw-border-opacity, 1));
}

.xpl-input-wrapper label {
  color: var(--xpl-color-text-secondary-lm);
  top: 9px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.dark .xpl-input-wrapper label {
  color: var(--xpl-color-text-secondary-dm);
}

.xpl-input-wrapper .xpl-input-pre {
  flex-shrink: 0;
  padding-left: 0px;
}

.xpl-input-wrapper .xpl-input-pre--hidden {
  display: none;
  width: 0px;
  min-width: 0px;
  overflow: hidden;
  padding: 0px;
}

.flatpickr-day.xpl-input-wrapper .xpl-input-pre--hidden{visibility:hidden}

.xpl-toolbar.xpl-input-wrapper .xpl-input-pre--hidden {
  display: none;
}

.xpl-input-characters {
  background-color: #fffd;
  pointer-events: none;
  position: absolute;
  bottom: 0px;
  right: 0px;
  display: block;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(106 109 125 / var(--tw-text-opacity, 1));
}

.dark .xpl-input-characters {
  background-color: #fff4;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.xpl-input--disabled .xpl-input-characters {
  background-color: transparent;
}

.xpl-input--error .xpl-input-characters {
  --tw-text-opacity: 1;
  color: rgb(194 33 15 / var(--tw-text-opacity, 1));
}

.dark .xpl-input--error .xpl-input-characters {
  --tw-text-opacity: 1;
  color: rgb(255 147 135 / var(--tw-text-opacity, 1));
}

.xpl-input-error {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(194 33 15 / var(--tw-text-opacity, 1));
}

.dark .xpl-input-error {
  --tw-text-opacity: 1;
  color: rgb(255 147 135 / var(--tw-text-opacity, 1));
}

.xpl-input-color__display {
    border-color: var(--xpl-color-gray-400);
    position: relative;
    display: flex;
    height: 44px;
    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-color-red-500);
  }

.dark .xpl-input-date--error .xpl-input-wrapper {
      border-color: var(--xpl-color-red-400);
    }

.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:focus-within {
      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 {
    border-right: 1px solid var(--xpl-border-default);
    background-color: var(--xpl-background-surface-subtlest);
    color: var(--xpl-text-default);
    display: flex;
    height: 2.75rem;
    min-width: 0px;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    gap: 0.5rem;
    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 {
  --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-inset: inset;

      --tw-ring-color: var(--xpl-border-focus);
}

.xpl-input-phone--open .xpl-input-phone .xpl-input-phone__trigger,
    .xpl-input-wrapper:focus-within .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;
  }

.xpl-input-phone__input {
  display: block;
  height: 2.75rem;
  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__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 {
      border-color: var(--xpl-border-default);
      display: flex;
      height: 2.75rem;
      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);
  word-wrap: break-word;
  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 rgba(0 0 0 / 0.1),
      0 4px 6px -2px rgba(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);
    }
  }

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

:root {
  --popover-margin: 8px;
}

.xpl-popover {
  position: relative;
  display: inline-block;
}

.xpl-popover__content,
  .xpl-popover__arrow {
  pointer-events: none;
  visibility: hidden;
  position: absolute;
}

.xpl-popover__content {
  z-index: 100;
  border-radius: 0.5rem;

    background-color: var(--xpl-color-gray-0);
    box-shadow:
      0 4px 6px -1px rgb(48 45 59 / 0.1),
      0 2px 4px -1px rgb(48 45 59 / 0.05);
    color: var(--xpl-color-gray-900);
    border: 1px solid var(--xpl-color-gray-400);
    padding: var(--xpl-size-spacing-24);
}

.dark .xpl-popover__content {
      background-color: var(--xpl-color-gray-1000);
      color: var(--xpl-color-gray-0);
      border: 1px solid var(--xpl-color-gray-600);
    }

.xpl-popover__arrow {
  z-index: 1000;
}

.xpl-popover__arrow .arrow-fill {
      fill: var(--xpl-color-gray-0);
    }

.dark .xpl-popover__arrow .arrow-fill {
        fill: var(--xpl-color-gray-1000);
      }

.xpl-popover__arrow .arrow-stroke {
      stroke: var(--xpl-color-gray-400);
    }

.dark .xpl-popover__arrow .arrow-stroke {
        stroke: var(--xpl-color-gray-600);
      }

.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(--popover-margin);
    left: 100%;
    top: 0px;
  }

.xpl-popover--middle-right .xpl-popover__content {
    transform: translateY(-50%);
    margin-left: var(--popover-margin);
    left: 100%;
    top: 50%;
  }

.xpl-popover--bottom-right .xpl-popover__content {
    margin-left: var(--popover-margin);
    left: 100%;
    bottom: 0px;
  }

.xpl-popover--top-left .xpl-popover__content {
    margin-right: var(--popover-margin);
    right: 100%;
    top: 0px;
  }

.xpl-popover--middle-left .xpl-popover__content {
    transform: translateY(-50%);
    margin-right: var(--popover-margin);
    right: 100%;
    top: 50%;
  }

.xpl-popover--bottom-left .xpl-popover__content {
    margin-right: var(--popover-margin);
    right: 100%;
    bottom: 0px;
  }

.xpl-popover--bottom-middle .xpl-popover__content {
    transform: translateX(-50%);
    margin-top: 8px;
    left: 50%;
    top: 100%;
  }

.xpl-popover--top-middle .xpl-popover__content {
    transform: translateX(-50%);
    margin-bottom: 8px;
    left: 50%;
    bottom: 100%;
  }

.xpl-popover--bottom-start .xpl-popover__content {
    margin-top: var(--popover-margin);
    left: 0px;
    top: 100%;
  }

.xpl-popover--bottom-end .xpl-popover__content {
    margin-top: var(--popover-margin);
    right: 0px;
    top: 100%;
  }

.xpl-popover--top-start .xpl-popover__content {
    margin-bottom: var(--popover-margin);
    left: 0px;
    bottom: 100%;
  }

.xpl-popover--top-end .xpl-popover__content {
    margin-bottom: var(--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%, rgba(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, rgba(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 rgba(0 0 0 / 0.1),
      4px 0 6px -2px rgba(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 rgba(0 0 0 / 0.1),
          inset 0 2px 4px -1px rgba(0 0 0 / 0.06),
          inset 0 -4px 6px -1px rgba(0 0 0 / 0.1),
          inset 0 -2px 4px -1px rgba(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%;
  }
}

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

.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(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
    border-color: var(--xpl-color-gray-200);
  }

.dark .xpl-table > :not(tfoot, [hidden]) ~ :not(tfoot, [hidden]) {
      border-color: var(--xpl-color-gray-800);
    }

.xpl-table--abs {
  position: absolute;
}

.xpl-table-container {
  overflow: auto;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(238 239 243 / var(--tw-border-opacity, 1));
  --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);
}

.dark .xpl-table-container {
  --tw-border-opacity: 1;
  border-color: rgb(54 50 64 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(48 45 59 / var(--tw-bg-opacity, 1));
}

.xpl-table th {
  white-space: nowrap;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(153 155 168 / var(--tw-text-opacity, 1));
}

.dark .xpl-table th {
  --tw-text-opacity: 1;
  color: rgb(234 235 239 / var(--tw-text-opacity, 1));
}

.xpl-table tr td {
  white-space: nowrap;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(153 155 168 / var(--tw-text-opacity, 1));
}

.dark .xpl-table tr td {
  --tw-text-opacity: 1;
  color: rgb(234 235 239 / var(--tw-text-opacity, 1));
}

.xpl-table thead {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
}

.dark .xpl-table thead {
      background-color: var(--xpl-color-background-dm);
    }

.xpl-table tbody > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
  --tw-divide-opacity: 1;
  border-color: rgb(238 239 243 / var(--tw-divide-opacity, 1));
}

.xpl-table tbody {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.dark .xpl-table tbody {
      background-color: var(--xpl-color-foreground-dm);
    }

.dark .xpl-table tbody > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(60 56 71 / var(--tw-divide-opacity, 1));
}

.xpl-table tfoot {
    border-top-color: var(--xpl-color-stroke-dm);
    border-right: none;
    border-bottom: none;
    border-width: 1px;
  }

.dark .xpl-table tfoot {
      border-top-color: var(--xpl-color-stroke-lm);
    }

.xpl-table a {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}

.xpl-table a:hover {
  --tw-text-opacity: 1;
  color: rgb(49 46 129 / var(--tw-text-opacity, 1));
}

.xpl-table label {
  display: flex;
  align-items: center;
}

.xpl-table input[type="checkbox"] {
  margin-right: 1.5rem;
  cursor: pointer;
}

.xpl-table xpl-icon {
  margin-left: 0.5rem;
  cursor: pointer;
}

.xpl-table .wrap {
  white-space: normal;
}

.xpl-table-row-selected td {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(244 242 255 / var(--tw-bg-opacity, 1)) !important;
}

.dark .xpl-table-row-selected td {
  --tw-bg-opacity: 1 !important;
  background-color: rgb(54 50 64 / var(--tw-bg-opacity, 1)) !important;
}

.xpl-table--freeze th:first-child,
    .xpl-table--freeze td:first-child {
  position: sticky;
  left: 0px;
  z-index: 10;
  --tw-border-opacity: 1;
  border-color: rgb(238 239 243 / var(--tw-border-opacity, 1));
}

.xpl-table--freeze th:first-child::after, .xpl-table--freeze td:first-child::after {
        background: linear-gradient(90deg, #e4e6eb 0%, #e4e6eb 0.01%, rgba(228 230 235 / 0%) 100%);
        content: "";
        width: 24px;
        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 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
}

.dark .xpl-table--freeze th:first-child {
        background-color: var(--xpl-color-background-dm);
        --tw-border-opacity: 1;
        border-color: rgb(54 50 64 / var(--tw-border-opacity, 1));
      }

.xpl-table--freeze tr td:first-child,
    .xpl-table--freeze p {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(48 45 59 / var(--tw-text-opacity, 1));
}

.dark .xpl-table--freeze td:first-child {
  --tw-border-opacity: 1;
  border-color: rgb(54 50 64 / var(--tw-border-opacity, 1));
}

.dark .xpl-table--freeze td:first-child::after {
        background: linear-gradient(90deg, rgba(0 0 0 / 40%) 0%, rgba(0 0 0 / 0%) 100%);
      }

.xpl-table--has-scrolled th:first-child::after,
    .xpl-table--has-scrolled td:first-child::after {
  opacity: 1;
}

.xpl-table--striped tr:nth-of-type(even) {
  --tw-bg-opacity: 1;
  background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
}

.dark .xpl-table--striped tr:nth-of-type(even) {
  --tw-bg-opacity: 1;
  background-color: rgb(48 45 59 / var(--tw-bg-opacity, 1));
}

.dark .xpl-table tr td:first-child,
  .dark .xpl-table p {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.xpl-table-header {
  display: contents;
}

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

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

.xpl-table-header-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0px;
  height: 3.5rem;
  min-width: 3rem;
  border-bottom-width: 1px;
  border-right-width: 1px;
  border-top-width: 1px;
  border-color: var(--xpl-color-gray-400);

  background-color: var(--xpl-color-background-lm);
  font-size: var(--xpl-size-font-title-5);
  font-weight: var(--xpl-font-weight-normal);
  color: var(--xpl-color-text-secondary-lm);
}

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

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

.xpl-table-header-cell .header-icon {
    color: var(--xpl-color-text-reverse-dm);
  }

.xpl-table-header-cell.non-sortable {
  padding: 1rem;
}

.xpl-table-header-cell.sortable {
  margin: 0px;
  display: flex;
  height: 3.5rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-image: none;
  padding: 0px;
}

.xpl-table-header-cell.sortable button {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-style: none;
  background-image: none;
  padding: 1rem;
}

.xpl-table-header-cell.sortable button .sort-icon {
  padding-left: 0.5rem;
}

.xpl-table-header-cell.sortable button .sort-icon--sorted {
          color: var(--xpl-color-action-primary-lm);
        }

.xpl-table-header-cell.sortable button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;

        box-shadow: inset 0 0 0 1px var(--xpl-color-purple-700);
}

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

  background-color: var(--xpl-color-background-2-dm);
  color: var(--xpl-color-text-secondary-dm);
}

.dark .xpl-table-header-cell .header-icon {
    color: var(--xpl-color-text-reverse-lm);
  }

.dark .xpl-table-header-cell .sortable .sort-icon--sorted {
      color: var(--xpl-color-action-primary-dm);
    }

.dark .xpl-table-header-cell .sortable:focus {
      box-shadow: inset 0 0 0 1px var(--xpl-color-purple-500);
    }

.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 rgba(0 0 0/ 0.1),
    0 4px 6px -2px rgba(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;
}

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

:root {
  --tooltip-margin: 12.8px;
  --tooltip-body-horizontal-offset: 60%;
  --tooltip-arrow-offset: 75%;
}

.xpl-tooltip {
  background-color: var(--xpl-color-foreground-lm);
  color: var(--xpl-color-text-primary-lm);
  padding: var(--xpl-size-spacing-4) var(--xpl-size-spacing-8);
  border-radius: var(--xpl-size-radius-small);
  border: 1px solid var(--xpl-color-stroke-lm);
  box-shadow:
    0 4px 6px -1px rgb(48 45 59 / 10%),
    0 2px 4px -1px rgb(48 45 59 / 5%);
}

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

.xpl-tooltip {

  visibility: hidden;

  position: absolute;

  z-index: 1000;

  width: -moz-max-content;

  width: max-content;

  max-width: 198px;

  cursor: pointer;

  white-space: pre-wrap;

  overflow-wrap: break-word;
}

/* Ensure tooltip stays within viewport */

@media screen and (max-width: 768px) {
    .xpl-tooltip {
    max-width: 150px;
  }
  }

.dark .xpl-tooltip {
    background-color: var(--xpl-color-foreground-dm);
    color: var(--xpl-color-text-primary-dm);
    border: 1px solid var(--xpl-color-stroke-lm);
    box-shadow:
      0 4px 6px -1px rgb(48 45 59 / 10%),
      0 2px 4px -1px rgb(48 45 59 / 50%);
  }

/* Position variants */

/* Top Middle */

.xpl-tooltip--top-middle {
    transform: translateX(-50%);
    bottom: 100%;
    left: 50%;
    margin-bottom: var(--tooltip-margin);
  }

/* Top Left */

.xpl-tooltip--top-left {
  right: var(--tooltip-body-horizontal-offset);
  bottom: 100%;
  margin-bottom: var(--tooltip-margin);
}

/* Top Right */

.xpl-tooltip--top-right {
  bottom: 100%;
  left: var(--tooltip-body-horizontal-offset);
  margin-bottom: var(--tooltip-margin);
}

/* Bottom Middle */

.xpl-tooltip--bottom-middle {
    transform: translateX(-50%);
    top: 100%;
    left: 50%;
    margin-top: var(--tooltip-margin);
  }

/* Bottom Left */

.xpl-tooltip--bottom-left {
  top: 100%;
  right: var(--tooltip-body-horizontal-offset);
  margin-top: var(--tooltip-margin);
}

/* Bottom Right */

.xpl-tooltip--bottom-right {
  top: 100%;
  left: var(--tooltip-body-horizontal-offset);
  margin-top: var(--tooltip-margin);
}

/* Left */

.xpl-tooltip--left {
    transform: translateY(-50%);
    right: 100%;
    top: 50%;
    margin-right: var(--tooltip-margin);
  }

/* Right */

.xpl-tooltip--right {
    transform: translateY(-50%);
    left: 100%;
    top: 50%;
    margin-left: var(--tooltip-margin);
  }

.xpl-tooltip-arrow {
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  z-index: 100;
}

.xpl-tooltip-arrow svg path {
    fill: var(--xpl-color-foreground-lm);
  }

.dark .xpl-tooltip-arrow svg path {
    fill: var(--xpl-color-foreground-dm);
  }

.xpl-tooltip--top-middle + .xpl-tooltip-arrow {
    transform: translateX(-50%) rotate(0deg);
    bottom: 100%;
    left: 50%;
    z-index: 1000;
  }

.xpl-tooltip--top-left + .xpl-tooltip-arrow {
    transform: rotate(0deg);
    bottom: 100%;
    right: var(--tooltip-arrow-offset);
    z-index: 1000;
  }

.xpl-tooltip--top-right + .xpl-tooltip-arrow {
    transform: rotate(0deg);
    bottom: 100%;
    left: var(--tooltip-arrow-offset);
    z-index: 1000;
  }

.xpl-tooltip--bottom-middle + .xpl-tooltip-arrow {
    transform: translateX(-50%) rotate(180deg);
    top: 100%;
    left: 50%;
    z-index: 1000;
  }

.xpl-tooltip--bottom-left + .xpl-tooltip-arrow {
    transform: rotate(180deg);
    top: 100%;
    right: var(--tooltip-arrow-offset);
    z-index: 1000;
  }

.xpl-tooltip--bottom-right + .xpl-tooltip-arrow {
    transform: rotate(180deg);
    top: 100%;
    left: var(--tooltip-arrow-offset);
    z-index: 1000;
  }

.xpl-tooltip--left + .xpl-tooltip-arrow {
    transform: translateY(-50%) rotate(-90deg);
    right: 100%;
    top: 50%;
    z-index: 1000;
    margin-right: 2.75px;
  }

.xpl-tooltip--right + .xpl-tooltip-arrow {
    transform: translateY(-50%) rotate(90deg);
    left: 100%;
    top: 50%;
    z-index: 1000;
    margin-left: 2.5px;
  }

.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);
  gap: var(--xpl-space-4);
  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 — host + inner base before shared bar `:focus-visible` */

xpl-nav-header-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 {
  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>` / `<div role="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;
}

xpl-top-nav-item a,
xpl-top-nav-item button {
  cursor: inherit;
  font: inherit;
  margin: 0px;
  display: flex;
  align-items: center;
  border-width: 0px;
  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);
}

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

/* Account menu list rows (`xpl-nav-header-menu` default slot): row gap between icon and label */

.xpl-nav-header-menu__slot 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 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 {
  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 {
  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 {
  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 {
  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 {
  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` 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 {
  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 {
  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);
  border-radius: var(--xpl-border-radius-default);
  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;
}

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

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

    /* Figma menu glyph 20px (`42002:35185`); `xpl-top-nav.tsx` passes `size={20}` for SVG output. */
    height: var(--xpl-size-125);
    width: var(--xpl-size-125);
    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;
  }

  /*
    * 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-size-font-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: 3.5rem;
    font-weight: var(--xpl-font-weight-semibold);
    line-height: 1.2;
  }

.xpl-text-display-2,
  [class^="xpl-"] .xpl-text-display-2 {
    font-size: 3rem;
    font-weight: var(--xpl-font-weight-semibold);
    line-height: 1.2;
  }

.xpl-text-display-3,
  [class^="xpl-"] .xpl-text-display-3 {
    font-size: 2.5rem;
    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-size-font-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-size-font-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-size-font-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-size-font-title-4);
    font-weight: var(--xpl-font-weight-medium);
    line-height: 1.5;
  }

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

.xpl-text-callout-bold {
  font-size: var(--xpl-size-font-callout);
  font-weight: var(--xpl-font-weight-semibold);
  line-height: 1.3333;
}

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

.xpl-text-caption {
  font-size: var(--xpl-size-font-caption);
  font-weight: normal;
  line-height: 1.4;
}

[class^="xpl-text-"] a {
  color: var(--xpl-color-action-primary-lm);
}

.dark [class^="xpl-text-"] a {
    color: var(--xpl-color-action-primary-dm);
  }

/* 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-size-font-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-size-font-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-size-font-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-size-font-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-color-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 */

/* ==========================================================================
   Side Navigation - Consolidated (~180 lines)
   ========================================================================== */

/* Root & Container */

.xpl-side-nav {
  --side-nav-width: 240px;
  --xpl-nav-item-indent: 0px;
  --nav-item-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  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);
}

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

/* Section slot: flex column + scroll (see .xpl-side-nav__section rules above).
   Consumers no longer need to apply .xpl-side-nav-content__items manually. */

/* Backward compatibility: keep this class working for existing consumer markup
   that still has it on their slotted content. */

.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: var(--xpl-space-2);
}

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

.xpl-side-nav-item__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: var(--xpl-size-100);
  height: var(--xpl-size-100);
  margin-right: var(--xpl-space-8);
  color: var(--xpl-text-strong);
}

.xpl-side-nav-item__label {
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: var(--xpl-font-size-title-4);
  font-weight: var(--xpl-font-weight-medium);
  color: var(--xpl-text-strong);
  transition: opacity var(--nav-item-transition, 0.3s);
}

.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 (Single Definition)
   ========================================================================== */

/* 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__icon, .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__icon, .xpl-side-nav-item__arrow) {
  color: var(--xpl-icon-default);
}

/* Disabled — button rows (.xpl-side-nav-item__link); link mode (direct child anchor).
   Note: `> a` cannot appear inside `:is()`; split selectors so both match. */

.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__icon, .xpl-side-nav-item__arrow, .xpl-side-nav-item__label) {
  color: var(--xpl-icon-disabled);
}

/* ==========================================================================
   Context Overrides ([has-children], [link])
   ========================================================================== */

/* Expandable parents */

.xpl-side-nav-item[has-children] .xpl-side-nav-item__link {
  padding-left: calc(var(--xpl-space-12) + var(--xpl-nav-item-indent));
}

/* Align label with leaf rows: chevron column vs icon column (8px gap). */

.xpl-side-nav-item[has-children] > .xpl-side-nav-item__link > .xpl-side-nav-item__label {
  margin-left: var(--xpl-space-4);
}

/* Chevron wrapper (not xpl-icon): transforms must apply to a normal element for reliable rotation */

.xpl-side-nav-item[has-children] .xpl-side-nav-item__arrow {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  transition-property: transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  width: var(--xpl-size-050);
  height: var(--xpl-size-050);
  margin-right: var(--xpl-space-8);
  color: var(--xpl-icon-default);
  transform: rotate(-90deg);
  transform-origin: center;
}

.xpl-side-nav-item[has-children] .xpl-side-nav-item__arrow.expanded {
  transform: rotate(0deg);
}

.xpl-side-nav-item[has-children] .xpl-side-nav-item__arrow xpl-icon {
  color: inherit;
}

/*
 * Collapsed height uses `0fr` (animated open/close). That hides content visually but does not
 * remove nested controls from the tab order — the host sets `inert` on this node 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;
}

/* Nested children */

.xpl-side-nav-item[has-children] xpl-side-nav-item {
  --xpl-nav-item-indent: var(--xpl-space-24);
}

/* Child items label */

.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 items label hover and selected - stronger text color */

.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__icon {
  display: none;
}

.flatpickr-day.xpl-side-nav-item[has-children] .xpl-side-nav-item__children-inner .xpl-side-nav-item__icon{visibility:hidden}

.xpl-toolbar.xpl-side-nav-item[has-children] .xpl-side-nav-item__children-inner .xpl-side-nav-item__icon {
  display: none;
}

/* ==========================================================================
   Link Mode (slot-only composition)
   ========================================================================== */

/* Link mode host styling - ensures proper display for slotted content */

.xpl-side-nav-item[link]:not([has-children]) {
  display: block;
}

/* Light DOM only (no Shadow DOM): 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;
  color: var(--xpl-text-strong);
  transition: all var(--nav-item-transition, 0.3s);
  gap: var(--xpl-space-8);
}

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

/* 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); nested link rows use xpl-side-nav-item[link] > a above */

.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 use smaller label font size */

.xpl-side-nav__footer .xpl-side-nav-item__label {
  font-size: var(--xpl-font-size-title-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-size-font-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 */