@pantoken/pendo 0.1.10 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/global.css +1 -1
  2. package/dist/index.d.mts +17 -3
  3. package/dist/index.mjs +49 -84
  4. package/package.json +2 -2
package/dist/global.css CHANGED
@@ -1 +1 @@
1
- @layer instui.tokens,instui.elevation,instui.icons,instui.popover,instui.alert,instui.text,instui.closeButton,instui.img,instui.inputs,instui.button,instui.pagination,instui.mask,instui.view,instui.card,instui.manual,instui.focusOutline;@scope(._pendo-step-container){@layer instui.tokens{@property --instui-primitive-color-white{syntax:"<color>";inherits:true;initial-value:#fff}@property --instui-primitive-color-transparent{syntax:"<color>";inherits:true;initial-value:#0000}@property --instui-primitive-color-green-green100{syntax:"<color>";inherits:true;initial-value:#03893d}@property --instui-primitive-color-green-green110{syntax:"<color>";inherits:true;initial-value:#037d37}@property --instui-primitive-color-grey-grey10{syntax:"<color>";inherits:true;initial-value:#f2f4f5}@property --instui-primitive-color-grey-grey30{syntax:"<color>";inherits:true;initial-value:#dfe1e3}@property --instui-primitive-color-grey-grey40{syntax:"<color>";inherits:true;initial-value:#c7cacd}@property --instui-primitive-color-grey-grey50{syntax:"<color>";inherits:true;initial-value:#aab0b5}@property --instui-primitive-color-grey-grey60{syntax:"<color>";inherits:true;initial-value:#9ea6ad}@property --instui-primitive-color-grey-grey70{syntax:"<color>";inherits:true;initial-value:#8d959f}@property --instui-primitive-color-grey-grey80{syntax:"<color>";inherits:true;initial-value:#7e8792}@property --instui-primitive-color-grey-grey100{syntax:"<color>";inherits:true;initial-value:#6a7883}@property --instui-primitive-color-grey-grey110{syntax:"<color>";inherits:true;initial-value:#5f6e7a}@property --instui-primitive-color-grey-grey120{syntax:"<color>";inherits:true;initial-value:#576773}@property --instui-primitive-color-grey-grey130{syntax:"<color>";inherits:true;initial-value:#4a5b68}@property --instui-primitive-color-grey-grey150{syntax:"<color>";inherits:true;initial-value:#334450}@property --instui-primitive-color-grey-grey170{syntax:"<color>";inherits:true;initial-value:#273540}@property --instui-primitive-color-grey-grey180{syntax:"<color>";inherits:true;initial-value:#1c222b}@property --instui-primitive-color-grey-grey190{syntax:"<color>";inherits:true;initial-value:#171b21}@property --instui-primitive-color-blue-blue40{syntax:"<color>";inherits:true;initial-value:#accdf7}@property --instui-primitive-color-blue-blue50{syntax:"<color>";inherits:true;initial-value:#7fb4f1}@property --instui-primitive-color-blue-blue70{syntax:"<color>";inherits:true;initial-value:#4798e3}@property --instui-primitive-color-blue-blue100{syntax:"<color>";inherits:true;initial-value:#2b7abc}@property --instui-primitive-color-blue-blue120{syntax:"<color>";inherits:true;initial-value:#2369a4}@property --instui-primitive-color-blue-blue140{syntax:"<color>";inherits:true;initial-value:#1a5281}@property --instui-primitive-color-red-red100{syntax:"<color>";inherits:true;initial-value:#e62429}@property --instui-primitive-color-red-red110{syntax:"<color>";inherits:true;initial-value:#cf1f24}@property --instui-primitive-color-orange-orange100{syntax:"<color>";inherits:true;initial-value:#cf4a00}@property --instui-primitive-color-navy-navy10{syntax:"<color>";inherits:true;initial-value:#eef4fd}@property --instui-primitive-color-navy-navy20{syntax:"<color>";inherits:true;initial-value:#e2eaf7}@property --instui-primitive-color-navy-navy60{syntax:"<color>";inherits:true;initial-value:#86a8d5}@property --instui-primitive-color-navy-navy70{syntax:"<color>";inherits:true;initial-value:#7097c7}@property --instui-primitive-color-navy-navy110{syntax:"<color>";inherits:true;initial-value:#44709f}@property --instui-primitive-color-navy-navy140{syntax:"<color>";inherits:true;initial-value:#2e5177}@property --instui-primitive-color-navy-navy150{syntax:"<color>";inherits:true;initial-value:#234465}@property --instui-primitive-color-navy-navy170{syntax:"<color>";inherits:true;initial-value:#1d354f}@property --instui-primitive-color-white-opacity75{syntax:"<color>";inherits:true;initial-value:#ffffffbf}@property --instui-primitive-color-grey-opacity75{syntax:"<color>";inherits:true;initial-value:#1c222bbf}@property --instui-primitive-size-size1{syntax:"*";inherits:true;initial-value:.0625rem}@property --instui-primitive-size-size2{syntax:"*";inherits:true;initial-value:.125rem}@property --instui-primitive-size-size4{syntax:"*";inherits:true;initial-value:.25rem}@property --instui-primitive-size-size8{syntax:"*";inherits:true;initial-value:.5rem}@property --instui-primitive-size-size12{syntax:"*";inherits:true;initial-value:.75rem}@property --instui-primitive-size-size14{syntax:"*";inherits:true;initial-value:.875rem}@property --instui-primitive-size-size16{syntax:"*";inherits:true;initial-value:1rem}@property --instui-primitive-size-size20{syntax:"*";inherits:true;initial-value:1.25rem}@property --instui-primitive-size-size24{syntax:"*";inherits:true;initial-value:1.5rem}@property --instui-primitive-size-size32{syntax:"*";inherits:true;initial-value:2rem}@property --instui-primitive-font-family-inclusive-sans{syntax:"*";inherits:true;initial-value:Inclusive Sans, "Helvetica Neue", Helvetica, Arial, sans-serif}@property --instui-primitive-font-family-atkinson{syntax:"*";inherits:true;initial-value:Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif}@property --instui-primitive-font-weight-regular{syntax:"<integer>";inherits:true;initial-value:400}@property --instui-primitive-font-weight-medium{syntax:"<integer>";inherits:true;initial-value:500}@property --instui-primitive-font-weight-semi-bold{syntax:"<integer>";inherits:true;initial-value:600}@property --instui-primitive-font-weight-bold{syntax:"<integer>";inherits:true;initial-value:700}@property --instui-line-height-paragraph-base{syntax:"<percentage>";inherits:true;initial-value:150%}@property --instui-line-height-standalone-base{syntax:"<percentage>";inherits:true;initial-value:125%}@property --instui-line-height-heading-base{syntax:"<percentage>";inherits:true;initial-value:125%}@property --instui-line-height-label-base{syntax:"*";inherits:true;initial-value:1.125rem}@property --instui-component-view-border-style{syntax:"*";inherits:true;initial-value:solid}@property --instui-component-text-letter-spacing-normal{syntax:"*";inherits:true;initial-value:0rem}@property --instui-component-shared-tokens-border-radius-full{syntax:"*";inherits:true;initial-value:999rem}@property --instui-component-shared-tokens-spacing-general-space-none{syntax:"*";inherits:true;initial-value:0rem}@property --instui-component-shared-tokens-focus-outline-style{syntax:"*";inherits:true;initial-value:solid}@property --instui-component-radio-input-checked-inset-sm{syntax:"*";inherits:true;initial-value:.375rem}@property --instui-component-link-text-decoration-within-text{syntax:"*";inherits:true;initial-value:underline}@property --instui-component-icon-size-sm{syntax:"*";inherits:true;initial-value:1rem}@property --instui-component-icon-size-md{syntax:"*";inherits:true;initial-value:1.25rem}@property --instui-component-heading-title-card-large-font-size{syntax:"*";inherits:true;initial-value:1.5rem}@property --instui-component-base-button-letter-spacing{syntax:"*";inherits:true;initial-value:normal}@property --instui-component-base-button-border-style{syntax:"*";inherits:true;initial-value:solid}@property --instui-component-base-button-padding-vertical{syntax:"*";inherits:true;initial-value:.25rem}@property --instui-component-alert-border-style{syntax:"*";inherits:true;initial-value:solid}@property --instui-component-alert-close-button-margin-right{syntax:"*";inherits:true;initial-value:.5rem}@property --instui-component-alert-close-button-margin-top{syntax:"*";inherits:true;initial-value:.5rem}@property --instui-icon-check{syntax:"<image>";inherits:true;initial-value:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E)}@property --instui-icon-chevron-down{syntax:"<image>";inherits:true;initial-value:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E)}@property --instui-icon-chevron-up{syntax:"<image>";inherits:true;initial-value:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m18%2015-6-6-6%206%22%2F%3E%3C%2Fsvg%3E)}@property --instui-icon-circle-check{syntax:"<image>";inherits:true;initial-value:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E)}@property --instui-icon-circle-x{syntax:"<image>";inherits:true;initial-value:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m15%209-6%206%22%2F%3E%3Cpath%20d%3D%22m9%209%206%206%22%2F%3E%3C%2Fsvg%3E)}@property --instui-icon-info{syntax:"<image>";inherits:true;initial-value:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E)}@property --instui-icon-triangle-alert{syntax:"<image>";inherits:true;initial-value:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E)}[class*=instui]{--instui-size-interactive-height-sm:var(--instui-primitive-size-size32);--instui-spacing-space2xs:var(--instui-primitive-size-size2);--instui-spacing-space-xs:var(--instui-primitive-size-size4);--instui-spacing-space-sm:var(--instui-primitive-size-size8);--instui-spacing-space-md:var(--instui-primitive-size-size12);--instui-spacing-space-lg:var(--instui-primitive-size-size16);--instui-spacing-space-xl:var(--instui-primitive-size-size24);--instui-spacing-gap-cards-sm:var(--instui-primitive-size-size12);--instui-spacing-gap-cards-md:var(--instui-primitive-size-size16);--instui-spacing-gap-input-elements:var(--instui-primitive-size-size8);--instui-spacing-padding-container-xxs:var(--instui-primitive-size-size8);--instui-spacing-padding-container-sm:var(--instui-primitive-size-size16);--instui-spacing-padding-interactive-horizontal-sm:var(--instui-primitive-size-size8);--instui-spacing-padding-interactive-horizontal-md:var(--instui-primitive-size-size12);--instui-border-radius-sm:var(--instui-primitive-size-size4);--instui-border-radius-md:var(--instui-primitive-size-size8);--instui-border-radius-lg:var(--instui-primitive-size-size12);--instui-border-radius-interactive-base:var(--instui-primitive-size-size12);--instui-border-width-sm:var(--instui-primitive-size-size1);--instui-border-width-md:var(--instui-primitive-size-size2);--instui-border-width-interactive-base:var(--instui-primitive-size-size1);--instui-font-family-heading:var(--instui-primitive-font-family-inclusive-sans);--instui-font-family-base:var(--instui-primitive-font-family-atkinson);--instui-font-weight-body-base:var(--instui-primitive-font-weight-regular);--instui-font-weight-body-strong:var(--instui-primitive-font-weight-semi-bold);--instui-font-weight-heading-strong:var(--instui-primitive-font-weight-bold);--instui-font-weight-interactive:var(--instui-primitive-font-weight-medium);--instui-line-height-paragraph-text-sm:var(--instui-primitive-size-size20);--instui-line-height-standalone-text-xs:var(--instui-primitive-size-size12);--instui-line-height-standalone-text-base:var(--instui-primitive-size-size16);--instui-font-size-text-xs:var(--instui-primitive-size-size12);--instui-font-size-text-sm:var(--instui-primitive-size-size14);--instui-font-size-text-base:var(--instui-primitive-size-size16);--instui-font-size-text-lg:var(--instui-primitive-size-size20);--instui-color-background-interactive-input-base:light-dark(var(--instui-primitive-color-white),var(--instui-primitive-color-grey-grey190));--instui-color-background-interactive-input-hover:light-dark(var(--instui-primitive-color-white),var(--instui-primitive-color-grey-grey190));--instui-color-background-interactive-action-primary-base:light-dark(var(--instui-primitive-color-navy-navy170),var(--instui-primitive-color-navy-navy10));--instui-color-background-interactive-action-primary-hover:light-dark(var(--instui-primitive-color-navy-navy150),var(--instui-primitive-color-white));--instui-color-background-interactive-action-primary-disabled:light-dark(var(--instui-primitive-color-grey-grey30),var(--instui-primitive-color-grey-grey150));--instui-color-background-interactive-action-secondary-disabled:light-dark(var(--instui-primitive-color-grey-grey30),var(--instui-primitive-color-grey-grey150));--instui-color-background-interactive-action-tertiary-hover:light-dark(var(--instui-primitive-color-navy-navy10),var(--instui-primitive-color-navy-navy140));--instui-color-background-interactive-action-tertiary-active:light-dark(var(--instui-primitive-color-navy-navy20),var(--instui-primitive-color-navy-navy150));--instui-color-background-elevated-surface-base:light-dark(var(--instui-primitive-color-white),var(--instui-primitive-color-grey-grey190));--instui-color-background-overlay-base:light-dark(var(--instui-primitive-color-white-opacity75),var(--instui-primitive-color-grey-opacity75));--instui-color-stroke-base:light-dark(var(--instui-primitive-color-grey-grey70),var(--instui-primitive-color-grey-grey100));--instui-color-stroke-success:var(--instui-primitive-color-green-green100);--instui-color-stroke-error:var(--instui-primitive-color-red-red100);--instui-color-stroke-warning:var(--instui-primitive-color-orange-orange100);--instui-color-stroke-info:var(--instui-primitive-color-blue-blue100);--instui-color-stroke-interactive-focus-ring-base:light-dark(var(--instui-primitive-color-blue-blue100),var(--instui-primitive-color-blue-blue70));--instui-color-stroke-interactive-focus-ring-on-color:var(--instui-primitive-color-white);--instui-color-stroke-interactive-input-base:light-dark(var(--instui-primitive-color-grey-grey80),var(--instui-primitive-color-grey-grey110));--instui-color-stroke-interactive-input-hover:light-dark(var(--instui-primitive-color-grey-grey150),var(--instui-primitive-color-grey-grey80));--instui-color-stroke-interactive-input-readonly:var(--instui-primitive-color-grey-grey70);--instui-color-stroke-interactive-input-selected:light-dark(var(--instui-primitive-color-grey-grey180),var(--instui-primitive-color-white));--instui-color-stroke-interactive-action-primary-disabled:light-dark(var(--instui-primitive-color-grey-grey30),var(--instui-primitive-color-grey-grey150));--instui-color-stroke-interactive-action-secondary-disabled:light-dark(var(--instui-primitive-color-grey-grey30),var(--instui-primitive-color-grey-grey150));--instui-color-stroke-interactive-action-destructive-base:var(--instui-primitive-color-red-red110);--instui-color-stroke-interactive-action-success-base:var(--instui-primitive-color-green-green110);--instui-color-stroke-interactive-action-tertiary-base:light-dark(var(--instui-primitive-color-navy-navy60),var(--instui-primitive-color-navy-navy70));--instui-color-stroke-interactive-action-tertiary-disabled:light-dark(var(--instui-primitive-color-grey-grey40),var(--instui-primitive-color-grey-grey130));--instui-color-text-base:light-dark(var(--instui-primitive-color-grey-grey170),var(--instui-primitive-color-grey-grey10));--instui-color-text-muted:light-dark(var(--instui-primitive-color-grey-grey120),var(--instui-primitive-color-grey-grey50));--instui-color-text-interactive-disabled-base:light-dark(var(--instui-primitive-color-grey-grey70),var(--instui-primitive-color-grey-grey120));--instui-color-text-interactive-input-hover:light-dark(var(--instui-primitive-color-grey-grey150),var(--instui-primitive-color-grey-grey60));--instui-color-text-interactive-input-placeholder:light-dark(var(--instui-primitive-color-grey-grey110),var(--instui-primitive-color-grey-grey80));--instui-color-text-interactive-navigation-primary-hover:light-dark(var(--instui-primitive-color-blue-blue140),var(--instui-primitive-color-blue-blue40));--instui-color-text-interactive-action-secondary-disabled:light-dark(var(--instui-primitive-color-grey-grey60),var(--instui-primitive-color-grey-grey100));--instui-color-text-interactive-action-primary-base:light-dark(var(--instui-primitive-color-white),var(--instui-primitive-color-navy-navy170));--instui-color-text-interactive-action-primary-disabled:light-dark(var(--instui-primitive-color-grey-grey60),var(--instui-primitive-color-grey-grey100));--instui-color-text-interactive-action-tertiary-base:light-dark(var(--instui-primitive-color-navy-navy170),var(--instui-primitive-color-navy-navy10));--instui-color-text-interactive-action-tertiary-disabled:light-dark(var(--instui-primitive-color-grey-grey50),var(--instui-primitive-color-grey-grey130));--instui-color-icon-on-color:var(--instui-primitive-color-white);--instui-color-drop-shadow-shadow-color1:light-dark(#23446526,#0000004d);--instui-color-drop-shadow-shadow-color2:light-dark(#2344651a,#00000026);--instui-color-transparent-color:var(--instui-primitive-color-transparent);--instui-color-institutional-brand-font-color-dark:light-dark(var(--instui-primitive-color-grey-grey170),var(--instui-primitive-color-white));--instui-color-institutional-link-color:light-dark(var(--instui-primitive-color-blue-blue120),var(--instui-primitive-color-blue-blue50));--instui-color-institutional-brand-button-primary-bgd:light-dark(var(--instui-primitive-color-navy-navy170),var(--instui-primitive-color-navy-navy10));--instui-color-institutional-brand-button-primary-text:light-dark(var(--instui-primitive-color-white),var(--instui-primitive-color-navy-navy170));--instui-color-institutional-brand-button-secondary-bgd:light-dark(var(--instui-primitive-color-navy-navy110),var(--instui-primitive-color-navy-navy60));--instui-color-institutional-brand-button-secondary-text:light-dark(var(--instui-primitive-color-navy-navy170),var(--instui-primitive-color-white));--instui-component-view-color:var(--instui-color-institutional-brand-font-color-dark);--instui-component-view-background-primary:var(--instui-color-background-elevated-surface-base);--instui-component-text-input-background-color:var(--instui-color-background-interactive-input-base);--instui-component-text-input-background-hover-color:var(--instui-color-background-interactive-input-hover);--instui-component-text-input-border-color:var(--instui-color-stroke-interactive-input-base);--instui-component-text-input-border-hover-color:var(--instui-color-stroke-interactive-input-hover);--instui-component-text-input-border-radius:var(--instui-border-radius-interactive-base);--instui-component-text-input-border-width:var(--instui-border-width-interactive-base);--instui-component-text-input-text-color:var(--instui-color-institutional-brand-font-color-dark);--instui-component-text-input-font-family:var(--instui-font-family-base);--instui-component-text-input-font-weight:var(--instui-font-weight-interactive);--instui-component-text-input-font-size-sm:var(--instui-font-size-text-sm);--instui-component-text-input-height-sm:var(--instui-size-interactive-height-sm);--instui-component-text-input-padding-horizontal-sm:var(--instui-spacing-space-sm);--instui-component-text-area-background-color:var(--instui-color-background-interactive-input-base);--instui-component-text-area-background-hover-color:var(--instui-color-background-interactive-input-hover);--instui-component-text-area-border-color:var(--instui-color-stroke-interactive-input-base);--instui-component-text-area-border-hover-color:var(--instui-color-stroke-interactive-input-hover);--instui-component-text-area-border-radius:var(--instui-border-radius-interactive-base);--instui-component-text-area-border-width:var(--instui-border-width-interactive-base);--instui-component-text-area-text-color:var(--instui-color-institutional-brand-font-color-dark);--instui-component-text-area-placeholder-color:var(--instui-color-text-interactive-input-placeholder);--instui-component-text-area-placeholder-hover-color:var(--instui-color-text-interactive-input-hover);--instui-component-text-area-font-family:var(--instui-font-family-base);--instui-component-text-area-font-weight:var(--instui-font-weight-body-base);--instui-component-text-area-font-size-sm:var(--instui-font-size-text-sm);--instui-component-text-area-gap-content:var(--instui-spacing-space-md);--instui-component-text-area-padding:var(--instui-spacing-space-md);--instui-component-text-content-important-font-family:var(--instui-font-family-base);--instui-component-text-content-important-font-weight:var(--instui-font-weight-body-strong);--instui-component-text-content-important-line-height:var(--instui-line-height-paragraph-base);--instui-component-text-content-small-font-family:var(--instui-font-family-base);--instui-component-text-content-small-font-weight:var(--instui-font-weight-body-base);--instui-component-text-content-small-font-size:var(--instui-font-size-text-sm);--instui-component-text-content-small-line-height:var(--instui-line-height-paragraph-base);--instui-component-text-base-color:var(--instui-color-institutional-brand-font-color-dark);--instui-component-text-muted-color:var(--instui-color-text-muted);--instui-component-tabs-panel-border-color:var(--instui-color-stroke-base);--instui-component-shared-tokens-border-radius-sm:var(--instui-border-radius-sm);--instui-component-shared-tokens-spacing-general-space2xs:var(--instui-spacing-space2xs);--instui-component-shared-tokens-spacing-general-space-xs:var(--instui-spacing-space-xs);--instui-component-shared-tokens-spacing-general-space-sm:var(--instui-spacing-space-sm);--instui-component-shared-tokens-spacing-general-space-md:var(--instui-spacing-space-md);--instui-component-shared-tokens-spacing-general-space-lg:var(--instui-spacing-space-lg);--instui-component-shared-tokens-spacing-gap-cards-sm:var(--instui-spacing-gap-cards-sm);--instui-component-shared-tokens-spacing-gap-cards-md:var(--instui-spacing-gap-cards-md);--instui-component-shared-tokens-spacing-padding-card-sm:var(--instui-spacing-padding-container-xxs);--instui-component-shared-tokens-spacing-padding-card-lg:var(--instui-spacing-padding-container-sm);--instui-component-shared-tokens-focus-outline-offset:var(--instui-spacing-space2xs);--instui-component-shared-tokens-focus-outline-width:var(--instui-border-width-md);--instui-component-shared-tokens-focus-outline-info-color:var(--instui-color-stroke-interactive-focus-ring-base);--instui-component-shared-tokens-focus-outline-on-color:var(--instui-color-stroke-interactive-focus-ring-on-color);--instui-component-shared-tokens-focus-outline-success-color:var(--instui-color-stroke-interactive-action-success-base);--instui-component-shared-tokens-focus-outline-danger-color:var(--instui-color-stroke-interactive-action-destructive-base);--instui-component-shared-tokens-stroke-width-sm:var(--instui-border-width-sm);--instui-component-radio-input-background-color:var(--instui-color-background-interactive-input-base);--instui-component-radio-input-background-hover-color:var(--instui-color-background-interactive-input-hover);--instui-component-radio-input-border-color:var(--instui-color-stroke-interactive-input-base);--instui-component-radio-input-border-readonly-color:var(--instui-color-stroke-interactive-input-readonly);--instui-component-radio-input-border-selected-color:var(--instui-color-stroke-interactive-input-selected);--instui-component-radio-input-font-size-sm:var(--instui-font-size-text-sm);--instui-component-radio-input-line-height-sm:var(--instui-line-height-paragraph-text-sm);--instui-component-radio-input-font-family:var(--instui-font-family-base);--instui-component-radio-input-font-weight:var(--instui-font-weight-body-base);--instui-component-radio-input-gap:var(--instui-spacing-space-sm);--instui-component-radio-input-border-width:var(--instui-border-width-interactive-base);--instui-component-radio-input-label-base-color:var(--instui-color-institutional-brand-font-color-dark);--instui-component-radio-input-label-hover-color:var(--instui-color-institutional-brand-font-color-dark);--instui-component-popover-border-color:var(--instui-color-stroke-base);--instui-component-popover-border-radius:var(--instui-border-radius-lg);--instui-component-options-item-background:var(--instui-color-background-elevated-surface-base);--instui-component-options-item-color:var(--instui-color-institutional-brand-font-color-dark);--instui-component-options-item-font-family:var(--instui-font-family-base);--instui-component-options-item-font-weight:var(--instui-font-weight-body-base);--instui-component-options-item-font-weight-selected:var(--instui-font-weight-body-base);--instui-component-options-item-highlighted-background:var(--instui-color-background-interactive-action-tertiary-hover);--instui-component-options-item-highlighted-label-color:var(--instui-color-text-base);--instui-component-options-item-line-height:var(--instui-line-height-standalone-base);--instui-component-options-item-padding-horizontal:var(--instui-spacing-space-md);--instui-component-options-item-selected-background:var(--instui-color-background-interactive-action-primary-base);--instui-component-options-item-selected-label-color:var(--instui-color-text-interactive-action-primary-base);--instui-component-metric-label-font-size:var(--instui-font-size-text-xs);--instui-component-metric-label-font-weight:var(--instui-font-weight-body-base);--instui-component-menu-item-selected-highlighted-background:var(--instui-color-background-interactive-action-primary-hover);--instui-component-mask-background-color:var(--instui-color-background-overlay-base);--instui-component-link-text-color:var(--instui-color-institutional-link-color);--instui-component-link-text-hover-color:var(--instui-color-text-interactive-navigation-primary-hover);--instui-component-link-text-disabled-color:var(--instui-color-text-interactive-disabled-base);--instui-component-link-font-weight:var(--instui-font-weight-interactive);--instui-component-heading-title-card-large-font-family:var(--instui-font-family-heading);--instui-component-heading-title-card-large-font-weight:var(--instui-font-weight-heading-strong);--instui-component-heading-title-card-large-line-height:var(--instui-line-height-heading-base);--instui-component-heading-title-card-regular-font-family:var(--instui-font-family-heading);--instui-component-heading-title-card-regular-font-weight:var(--instui-font-weight-heading-strong);--instui-component-heading-title-card-regular-font-size:var(--instui-font-size-text-lg);--instui-component-heading-title-card-regular-line-height:var(--instui-line-height-heading-base);--instui-component-heading-title-card-mini-font-family:var(--instui-font-family-heading);--instui-component-heading-title-card-mini-font-weight:var(--instui-font-weight-heading-strong);--instui-component-heading-title-card-mini-font-size:var(--instui-font-size-text-base);--instui-component-heading-title-card-mini-line-height:var(--instui-line-height-heading-base);--instui-component-form-field-layout-text-color:var(--instui-color-institutional-brand-font-color-dark);--instui-component-form-field-layout-font-family:var(--instui-font-family-base);--instui-component-form-field-layout-font-weight:var(--instui-font-weight-body-base);--instui-component-form-field-layout-font-size:var(--instui-font-size-text-base);--instui-component-form-field-layout-line-height:var(--instui-line-height-label-base);--instui-component-form-field-layout-gap-primitives:var(--instui-spacing-gap-input-elements);--instui-component-base-button-primary-active-background:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-primary-active-border-color:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-primary-active-text-color:var(--instui-color-institutional-brand-button-primary-text);--instui-component-base-button-primary-background:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-primary-border-color:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-primary-color:var(--instui-color-institutional-brand-button-primary-text);--instui-component-base-button-primary-disabled-background-color:var(--instui-color-background-interactive-action-primary-disabled);--instui-component-base-button-primary-disabled-border-color:var(--instui-color-stroke-interactive-action-primary-disabled);--instui-component-base-button-primary-disabled-text-color:var(--instui-color-text-interactive-action-primary-disabled);--instui-component-base-button-primary-ghost-active-background:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-primary-ghost-hover-background:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-primary-hover-background:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-primary-hover-border-color:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-primary-hover-text-color:var(--instui-color-institutional-brand-button-primary-text);--instui-component-base-button-secondary-active-background:var(--instui-color-institutional-brand-button-secondary-bgd);--instui-component-base-button-secondary-active-border-color:var(--instui-color-institutional-brand-button-secondary-bgd);--instui-component-base-button-secondary-active-text-color:var(--instui-color-institutional-brand-button-secondary-text);--instui-component-base-button-secondary-background:var(--instui-color-institutional-brand-button-secondary-bgd);--instui-component-base-button-secondary-border-color:var(--instui-color-institutional-brand-button-secondary-bgd);--instui-component-base-button-secondary-color:var(--instui-color-institutional-brand-button-secondary-text);--instui-component-base-button-secondary-disabled-background-color:var(--instui-color-background-interactive-action-secondary-disabled);--instui-component-base-button-secondary-disabled-border-color:var(--instui-color-stroke-interactive-action-secondary-disabled);--instui-component-base-button-secondary-disabled-text-color:var(--instui-color-text-interactive-action-secondary-disabled);--instui-component-base-button-secondary-hover-background:var(--instui-color-institutional-brand-button-secondary-bgd);--instui-component-base-button-secondary-hover-border-color:var(--instui-color-institutional-brand-button-secondary-bgd);--instui-component-base-button-secondary-hover-text-color:var(--instui-color-institutional-brand-button-secondary-text);--instui-component-base-button-small-font-size:var(--instui-font-size-text-sm);--instui-component-base-button-small-height:var(--instui-size-interactive-height-sm);--instui-component-base-button-small-padding-horizontal:var(--instui-spacing-padding-interactive-horizontal-md);--instui-component-base-button-border-radius:var(--instui-border-radius-interactive-base);--instui-component-base-button-border-width:var(--instui-border-width-interactive-base);--instui-component-base-button-font-family:var(--instui-font-family-base);--instui-component-base-button-font-weight:var(--instui-font-weight-interactive);--instui-component-base-button-gap-button-content-md:var(--instui-spacing-space-sm);--instui-component-base-button-gap-button-content-sm:var(--instui-spacing-space-xs);--instui-component-base-button-tertiary-active-border-color:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-tertiary-active-text-color:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-tertiary-disabled-border-color:var(--instui-color-stroke-interactive-action-tertiary-disabled);--instui-component-base-button-tertiary-disabled-text-color:var(--instui-color-text-interactive-action-tertiary-disabled);--instui-component-base-button-tertiary-hover-border-color:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-tertiary-hover-text-color:var(--instui-color-institutional-brand-button-primary-bgd);--instui-component-base-button-line-height:var(--instui-line-height-standalone-base);--instui-component-alert-border-radius:var(--instui-border-radius-lg);--instui-component-alert-border-width:var(--instui-border-width-md);--instui-component-alert-danger-border-color:var(--instui-color-stroke-error);--instui-component-alert-icon-color:var(--instui-color-icon-on-color);--instui-component-alert-info-border-color:var(--instui-color-stroke-info);--instui-component-alert-success-border-color:var(--instui-color-stroke-success);--instui-component-alert-warning-border-color:var(--instui-color-stroke-warning);--instui-component-alert-content-padding-vertical:var(--instui-spacing-space-md);--instui-component-alert-content-padding-horizontal:var(--instui-spacing-space-xl);--manual-light-pendo-embedded-pendo-step-container-styles-width:59.25rem;--manual-light-new-theme-components-alert-padding-left:2.5rem;--manual-light-pendo-overlay-pendo-step-container-styles-width:22.5rem;--instui-component-text-area-min-height:4rem;--instui-component-text-area-max-height:6rem}}@layer instui.elevation{[class*=instui]{--instui-elevation-above:0 .1875rem .375rem var(--instui-color-drop-shadow-shadow-color2), 0 .1875rem .375rem var(--instui-color-drop-shadow-shadow-color1)}}@layer instui.icons{[class*=instui]{& [class*=pendo-video-wrapper]{aspect-ratio:16/9!important;height:auto!important;padding-bottom:0!important;position:relative!important;overflow:visible!important}& ._pendo-video{width:100%!important;height:100%!important;display:block!important}& .pendo-mock-flexbox-element:has([class*=pendo-video-wrapper]){width:100%!important}}}@layer instui.popover{[class*=instui]:is([data-layout=tooltipBlank],._pendo-guide-walkthrough_){& ._pendo-step-container-size{height:auto!important}& ._pendo-step-container-styles{border-radius:var(--instui-component-popover-border-radius)!important;border-color:var(--instui-component-popover-border-color)!important;min-height:2.75rem!important;box-shadow:var(--instui-elevation-above)!important;margin-bottom:calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md))!important;margin-left:var(--instui-component-shared-tokens-spacing-general-space-md)!important;margin-right:var(--instui-component-shared-tokens-spacing-general-space-md)!important;margin-top:var(--instui-component-shared-tokens-spacing-general-space-xs)!important}& .pendo-tooltip-caret{--caret-color:var(--instui-component-view-background-primary);&.pendo-tooltip-caret--top{border-top-color:var(--caret-color)!important;bottom:calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md) - 15px)!important;&+.pendo-tooltip-caret-border{bottom:calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md) - 16px)!important}}&.pendo-tooltip-caret--right{border-right-color:var(--caret-color)!important;left:-3px!important;&+.pendo-tooltip-caret-border{left:-4px!important}}&.pendo-tooltip-caret--bottom{border-bottom-color:var(--caret-color)!important;top:calc(var(--instui-component-shared-tokens-spacing-general-space-xs) - 15px)!important;&+.pendo-tooltip-caret-border{top:calc(var(--instui-component-shared-tokens-spacing-general-space-xs) - 16px)!important}}&.pendo-tooltip-caret--left{border-left-color:var(--caret-color)!important;right:-3px!important;&+.pendo-tooltip-caret-border{right:-4px!important}}}&[data-layout=tooltipBlank]{& ._pendo-step-container-styles{width:var(--manual-light-pendo-overlay-pendo-step-container-styles-width)!important;padding:var(--instui-component-shared-tokens-spacing-padding-card-sm) var(--instui-component-shared-tokens-spacing-padding-card-sm) var(--instui-component-shared-tokens-spacing-general-space-none)!important}}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& ._pendo-step-container-styles{width:auto!important;padding:var(--instui-component-shared-tokens-spacing-padding-card-lg) var(--instui-component-shared-tokens-spacing-padding-card-lg) var(--instui-component-shared-tokens-spacing-general-space-sm)!important;margin-bottom:var(--instui-component-shared-tokens-spacing-general-space-md)!important}&:not(:has(._pendo-row)){& ._pendo-step-container-styles{padding-bottom:var(--instui-component-shared-tokens-spacing-padding-card-sm)!important}}}}}@layer instui.alert{[class*=instui][data-layout=lightboxBlank]{&,&[class*=instui-info]{--_alert-color:var(--instui-component-alert-info-border-color);--_alert-icon:var(--instui-icon-info)}&[class*=instui-danger]{--_alert-color:var(--instui-component-alert-danger-border-color);--_alert-icon:var(--instui-icon-circle-x)}&[class*=instui-success]{--_alert-color:var(--instui-component-alert-success-border-color);--_alert-icon:var(--instui-icon-circle-check)}&[class*=instui-warning]{--_alert-color:var(--instui-component-alert-warning-border-color);--_alert-icon:var(--instui-icon-triangle-alert)}&,& ._pendo-step-container-size{margin-right:var(--instui-spacing-space2xs)!important;margin-left:var(--instui-spacing-space2xs)!important;max-width:var(--manual-light-pendo-embedded-pendo-step-container-styles-width)!important}& ._pendo-step-container-size{z-index:300000!important;padding-bottom:calc(var(--instui-spacing-space-md))!important;padding-top:var(--instui-spacing-space-sm)!important}& ._pendo-step-container-styles{border-color:var(--_alert-color)!important;border-width:var(--instui-component-alert-border-width)!important;border-style:var(--instui-component-alert-border-style)!important;border-radius:var(--instui-component-alert-border-radius)!important;height:auto!important;padding:var(--instui-component-alert-content-padding-vertical) var(--instui-component-alert-content-padding-horizontal) var(--instui-component-alert-content-padding-vertical) calc(var(--manual-light-new-theme-components-alert-padding-left) + var(--instui-component-alert-content-padding-horizontal))!important;box-shadow:var(--instui-elevation-above)!important;margin-bottom:var(--instui-spacing-space-md)!important;margin-left:var(--instui-spacing-space-lg)!important;margin-right:var(--instui-spacing-space-lg)!important;margin-top:var(--instui-spacing-space-xs)!important;position:relative!important;overflow:hidden!important;&:before{content:""!important;width:var(--manual-light-new-theme-components-alert-padding-left)!important;background-color:var(--_alert-color)!important;inset-block:0!important;display:block!important;position:absolute!important;left:0!important;overflow:hidden!important}&:after{content:""!important;top:50%!important;left:calc((var(--manual-light-new-theme-components-alert-padding-left) - var(--instui-component-icon-size-md)) / 2)!important;width:var(--instui-component-icon-size-md)!important;height:var(--instui-component-icon-size-md)!important;mask-image:var(--_alert-icon)!important;background-color:var(--instui-component-alert-icon-color)!important;display:block!important;position:absolute!important;transform:translateY(-50%)!important;mask-position:50%!important;mask-size:contain!important;mask-repeat:no-repeat!important}}}}@layer instui.text{[class*=instui]{& ._pendo-simple-text,& [class*=_pendo-text-]{font-family:var(--instui-component-text-content-small-font-family)!important;font-weight:var(--instui-component-text-content-small-font-weight)!important;font-size:var(--instui-component-text-content-small-font-size)!important;line-height:var(--instui-component-text-content-small-line-height)!important;letter-spacing:var(--instui-component-text-letter-spacing-normal)!important;color:var(--instui-component-text-base-color)!important;max-width:100%!important}& ._pendo-text-bold{font-weight:var(--instui-component-text-content-important-font-weight)!important}& ._pendo-text-italic{font-family:var(--instui-component-text-content-important-font-family)!important;font-weight:var(--instui-component-text-content-important-font-weight)!important;line-height:var(--instui-component-text-content-important-line-height)!important}& ._pendo-text-strike{text-decoration:line-through!important}& h2:is(._pendo-simple-text,._pendo-text-title){font-weight:var(--instui-component-heading-title-card-regular-font-weight)!important;font-family:var(--instui-component-heading-title-card-regular-font-family)!important;line-height:var(--instui-component-heading-title-card-regular-line-height)!important;font-size:var(--instui-component-heading-title-card-large-font-size)!important}& h3._pendo-simple-text{font-weight:var(--instui-component-heading-title-card-large-font-weight)!important;font-size:var(--instui-component-heading-title-card-regular-font-size)!important;font-family:var(--instui-component-heading-title-card-large-font-family)!important;line-height:var(--instui-component-heading-title-card-large-line-height)!important}&[data-layout=tooltipBlank]{& h2._pendo-simple-text{font-size:var(--instui-component-heading-title-card-regular-font-size)!important;line-height:var(--instui-component-heading-title-card-mini-line-height)!important}& h3._pendo-simple-text{font-size:var(--instui-component-heading-title-card-mini-font-size)!important;line-height:var(--instui-component-heading-title-card-regular-line-height)!important}}& ._pendo-text-link{text-decoration:var(--instui-component-link-text-decoration-within-text)!important;font-weight:var(--instui-component-link-font-weight)!important;border-radius:var(--instui-component-shared-tokens-border-radius-sm)!important;color:var(--instui-component-link-text-color)!important;&:is(:hover,:active,:focus){color:var(--instui-component-link-text-hover-color)!important}&:disabled{color:var(--instui-component-link-text-disabled-color)!important}}& ._pendo-simple-text ol,& ._pendo-simple-text ul{padding-left:var(--instui-component-shared-tokens-spacing-general-space-none)!important}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& :not(._pendo-close-guide){font-size:var(--instui-component-heading-title-card-mini-font-size)!important}&,& ._pendo-row:has(+._pendo-row>._pendo-button-primaryButton) ._pendo-simple-text:has(>span:not([class])),& .pendo-survey-wrapper>div:not(:has([class])):not(:has(input)),& h2._pendo-simple-text,& h2._pendo-text-title ._pendo-simple-text,& ._pendo-simple-text._pendo-nps-open-text-poll-question{font-weight:var(--instui-component-heading-title-card-mini-font-weight)!important;font-family:var(--instui-component-heading-title-card-mini-font-family)!important;font-size:var(--instui-component-heading-title-card-mini-font-size)!important;line-height:var(--instui-component-heading-title-card-mini-line-height)!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none) var(--instui-component-shared-tokens-spacing-general-space-none) var(--instui-component-shared-tokens-spacing-general-space-sm)!important}& h2._pendo-text-title ._pendo-simple-text,& ._pendo-simple-text._pendo-nps-open-text-poll-question{text-align:left!important}& h2._pendo-text-title._pendo-nps-poll-success-message ._pendo-simple-text{text-align:center!important}& ._pendo-nps-poll-lowerbound-label,& ._pendo-nps-poll-upperbound-label{font-style:normal!important;font-size:var(--instui-component-metric-label-font-size)!important;font-weight:var(--instui-component-metric-label-font-weight)!important;line-height:var(--instui-line-height-standalone-text-xs)!important;text-align:center!important;color:var(--instui-component-text-muted-color)!important}& .pendo-survey-wrapper label+div{font-size:var(--instui-component-metric-label-font-size)!important;padding-top:var(--instui-component-shared-tokens-spacing-general-space-xs)!important;text-align:left!important}}}}@layer instui.closeButton{[class*=instui]{& ._pendo-close-guide{padding-bottom:var(--instui-component-shared-tokens-spacing-general-space-xs)!important;height:var(--instui-component-base-button-small-height)!important;aspect-ratio:1!important;border-radius:var(--instui-component-base-button-border-radius)!important;border-width:var(--instui-component-shared-tokens-spacing-general-space-none)!important;background-color:#0000!important;background-position:50%!important;background-repeat:no-repeat!important;background-size:var(--instui-component-icon-size-sm)!important;inset-inline:auto var(--instui-component-shared-tokens-spacing-general-space-xs)!important;font-size:var(--instui-font-size-text-lg)!important;font-family:var(--instui-component-base-button-font-family)!important;font-weight:var(--instui-primitive-font-weight-medium)!important;color:var(--instui-component-text-base-color)!important;background-color:#0000!important;position:absolute!important;inset-block-start:var(--instui-component-shared-tokens-spacing-general-space-xs)!important;&:hover{background-color:var(--instui-component-base-button-primary-ghost-hover-background)!important}&:active{background-color:var(--instui-component-base-button-primary-ghost-active-background)!important}}&[data-layout=lightboxBlank] ._pendo-close-guide{inset-block-start:var(--instui-component-alert-close-button-margin-top)!important;inset-inline-end:var(--instui-component-alert-close-button-margin-right)!important}}}@layer instui.img{[class*=instui]{& ._pendo-image{max-width:100%!important;height:auto!important}}}@layer instui.inputs{[class*=instui]{& ._pendo-row:has(._pendo-open-text-poll-input){height:auto!important}& ._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-row{height:auto!important;min-height:unset!important}& ._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-element{width:100%!important;position:static!important}& ._pendo-open-text-poll-input{border-radius:var(--instui-component-text-area-border-radius)!important;border-width:var(--instui-component-text-area-border-width)!important;padding:var(--instui-component-text-area-padding)!important;gap:var(--instui-component-text-area-gap-content)!important;min-height:var(--instui-component-text-area-min-height)!important;height:auto!important;max-height:var(--instui-component-text-area-max-height)!important;width:100%!important;font-family:var(--instui-component-text-area-font-family)!important;font-weight:var(--instui-component-text-area-font-weight)!important;font-size:var(--instui-component-text-area-font-size-sm)!important;line-height:var(--instui-line-height-standalone-text-base)!important;letter-spacing:normal!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important;background-color:var(--instui-component-text-area-background-color)!important;color:var(--instui-component-text-area-text-color)!important;border-style:solid!important;border-color:var(--instui-component-text-area-border-color)!important;transition:var(--instui-focus-outline-transition)!important;font-style:normal!important;&:hover{background:var(--instui-component-text-area-background-hover-color)!important;border-color:var(--instui-component-text-area-border-hover-color)!important}&:focus{outline-color:var(--instui-focus-outline-color-start)!important;outline-width:var(--instui-component-shared-tokens-focus-outline-width)!important;outline-style:var(--instui-component-shared-tokens-focus-outline-style)!important;outline-offset:var(--instui-component-shared-tokens-focus-outline-offset)!important;outline-color:var(--instui-component-shared-tokens-focus-outline-info-color)!important;background-color:var(--instui-component-text-area-background-color)!important;border-color:var(--instui-component-text-area-border-color)!important}&::placeholder{color:var(--instui-component-text-area-placeholder-color)!important}&:hover::placeholder{color:var(--instui-component-text-area-placeholder-hover-color)!important}}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& ._pendo-open-text-poll-input{min-height:100px!important}}}[class*=instui]{& ._pendo-multi-choice-poll-select-border[id^=pendo-select-container-]:has(>select){padding:var(--instui-component-shared-tokens-spacing-general-space-none)!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important;background:0 0!important;border:0!important;position:relative!important;&:after{content:""!important;right:var(--instui-component-text-input-padding-horizontal-sm)!important;top:var(--instui-component-shared-tokens-spacing-general-space-lg)!important;width:var(--instui-component-icon-size-sm)!important;height:var(--instui-component-icon-size-sm)!important;mask-image:var(--instui-icon-chevron-down)!important;pointer-events:none!important;background-color:var(--instui-component-text-input-text-color)!important;display:block!important;position:absolute!important;transform:translateY(-50%)!important;mask-position:50%!important;mask-size:contain!important;mask-repeat:no-repeat!important}}& select._pendo-multi-choice-poll-select{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;height:var(--instui-component-text-input-height-sm)!important;border-radius:var(--instui-component-text-input-border-radius)!important;border-width:var(--instui-component-text-input-border-width)!important;padding:var(--instui-component-shared-tokens-spacing-general-space-none) calc(var(--instui-component-text-input-padding-horizontal-sm) + 24px) var(--instui-component-shared-tokens-spacing-general-space-none) var(--instui-component-text-input-padding-horizontal-sm)!important;font-family:var(--instui-component-text-input-font-family)!important;font-weight:var(--instui-component-text-input-font-weight)!important;font-size:var(--instui-component-text-input-font-size-sm)!important;line-height:calc(var(--instui-line-height-standalone-text-base) * 2)!important;letter-spacing:normal!important;background-color:var(--instui-component-text-input-background-color)!important;color:var(--instui-component-text-input-text-color)!important;border-style:solid!important;border-color:var(--instui-component-text-input-border-color)!important;transition:var(--instui-focus-outline-transition)!important;font-style:normal!important;&:hover{background-color:var(--instui-component-text-input-background-hover-color)!important;border-color:var(--instui-component-text-input-border-hover-color)!important}&:focus{outline-color:var(--instui-focus-outline-color-start)!important;outline-width:var(--instui-component-shared-tokens-focus-outline-width)!important;outline-style:var(--instui-component-shared-tokens-focus-outline-style)!important;outline-offset:var(--instui-component-shared-tokens-focus-outline-offset)!important;outline-color:var(--instui-component-shared-tokens-focus-outline-info-color)!important;background-color:var(--instui-component-text-input-background-color)!important}}& select._pendo-multi-choice-poll-select option{font-family:var(--instui-component-text-input-font-family)!important;font-weight:var(--instui-component-text-input-font-weight)!important;font-size:var(--instui-component-text-input-font-size-sm)!important;background-color:var(--instui-component-view-background-primary)!important;color:var(--instui-component-text-base-color)!important}@supports (appearance:base-select){& ._pendo-multi-choice-poll-select-border[id^=pendo-select-container-]:has(>select:open):after{mask-image:var(--instui-icon-chevron-up)!important}& select._pendo-multi-choice-poll-select,& select._pendo-multi-choice-poll-select::picker(select){appearance:base-select!important}& select._pendo-multi-choice-poll-select::picker-icon{display:none!important}& select._pendo-multi-choice-poll-select::picker(select){border-radius:var(--instui-component-popover-border-radius)!important;border-width:var(--instui-component-shared-tokens-stroke-width-sm)!important;padding:var(--instui-component-shared-tokens-spacing-general-space-none)!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important;background-color:var(--instui-component-options-item-background)!important;border-style:solid!important;border-color:var(--instui-component-popover-border-color)!important;box-shadow:var(--instui-elevation-above)!important;overflow:hidden!important}& select._pendo-multi-choice-poll-select option{margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important;font-family:var(--instui-component-options-item-font-family)!important;font-weight:var(--instui-component-options-item-font-weight)!important;font-size:var(--instui-font-size-text-sm)!important;letter-spacing:var(--instui-component-text-letter-spacing-normal)!important;cursor:pointer!important;line-height:var(--instui-component-options-item-line-height)!important;height:var(--instui-size-interactive-height-sm)!important;background-color:var(--instui-component-options-item-background)!important;color:var(--instui-component-options-item-color)!important;border-radius:0!important;&::checkmark{display:none!important}&:hover,&:focus{background-color:var(--instui-component-options-item-highlighted-background)!important;color:var(--instui-component-options-item-highlighted-label-color)!important}&:focus{outline:none!important}&:checked{font-weight:var(--instui-component-options-item-font-weight-selected)!important;padding-right:calc(var(--instui-component-options-item-padding-horizontal) + var(--instui-spacing-padding-interactive-horizontal-sm))!important;background-color:var(--instui-component-options-item-selected-background)!important;color:var(--instui-component-options-item-selected-label-color)!important;border-radius:0!important;position:relative!important;&:after{content:""!important;right:var(--instui-component-options-item-padding-horizontal)!important;width:var(--instui-component-icon-size-sm)!important;height:var(--instui-component-icon-size-sm)!important;mask-image:var(--instui-icon-check)!important;pointer-events:none!important;background-color:var(--instui-component-options-item-selected-label-color)!important;display:block!important;position:absolute!important;top:50%!important;transform:translateY(-50%)!important;mask-position:50%!important;mask-size:contain!important;mask-repeat:no-repeat!important}&:hover{background-color:var(--instui-component-menu-item-selected-highlighted-background)!important}}}}}[class*=instui]{& ._pendo-multi-choice-poll-select-border label.pendo-radio,&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]) :is([id*=survey-pmf-answers],[id*=survey-single-choice]) label.pendo-radio{font-family:var(--instui-component-radio-input-font-family)!important;font-weight:var(--instui-component-radio-input-font-weight)!important;font-size:var(--instui-component-radio-input-font-size-sm)!important;line-height:var(--instui-component-radio-input-line-height-sm)!important;letter-spacing:normal!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important;background-color:var(--instui-color-transparent-color)!important;color:var(--instui-component-radio-input-label-base-color)!important;font-style:normal!important;&:hover{color:var(--instui-component-radio-input-label-hover-color)!important}}& ._pendo-multi-choice-poll-select-border input.pendo-radio,&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]) :is([id*=survey-pmf-answers],[id*=survey-single-choice]) input.pendo-radio{width:var(--instui-component-shared-tokens-spacing-general-space-lg)!important;height:var(--instui-component-shared-tokens-spacing-general-space-lg)!important;border-radius:var(--instui-component-shared-tokens-border-radius-full)!important;border-width:var(--instui-component-radio-input-border-width)!important;margin:var(--instui-component-shared-tokens-spacing-general-space2xs) var(--instui-component-radio-input-gap) var(--instui-component-shared-tokens-spacing-general-space-none) var(--instui-component-shared-tokens-spacing-general-space-none)!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border-style:solid!important;border-color:var(--instui-component-radio-input-border-color)!important;background-color:var(--instui-component-radio-input-background-color)!important;transition:var(--instui-focus-outline-transition)!important;&:hover{background-color:var(--instui-component-radio-input-background-hover-color)!important;border-color:var(--instui-component-radio-input-border-readonly-color)!important}&:checked{box-shadow:var(--instui-component-radio-input-border-selected-color) inset 0 0 0 calc(var(--instui-component-radio-input-checked-inset-sm) / 2)!important;border-color:var(--instui-component-radio-input-border-selected-color)!important;&+label{background:var(--instui-color-transparent-color)!important;color:var(--instui-component-radio-input-label-base-color)!important}}&:focus{outline-color:var(--instui-focus-outline-color-start)!important;outline-width:var(--instui-component-shared-tokens-focus-outline-width)!important;outline-style:var(--instui-component-shared-tokens-focus-outline-style)!important;outline-offset:var(--instui-component-shared-tokens-focus-outline-offset)!important;outline-color:var(--instui-component-shared-tokens-focus-outline-info-color)!important;&+label{outline:none!important}}}& [class$=-poll-question]>._pendo-simple-text>._pendo-text-plain{font-family:var(--instui-component-form-field-layout-font-family)!important;font-weight:var(--instui-component-form-field-layout-font-weight)!important;font-size:var(--instui-component-form-field-layout-font-size)!important;line-height:var(--instui-component-form-field-layout-line-height)!important;letter-spacing:normal!important;margin:var(--instui-component-form-field-layout-gap-primitives) var(--instui-component-shared-tokens-spacing-general-space-none)!important;color:var(--instui-component-form-field-layout-text-color)!important;font-style:normal!important}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& :is([id*=survey-pmf-answers],[id*=survey-single-choice]){flex-direction:column!important;display:flex!important}& :is([id*=survey-pmf-answers],[id*=survey-single-choice]) span:has(.pendo-radio){text-align:left!important;flex-direction:row!important;justify-content:start!important;align-items:center!important;display:flex!important}}}}@layer instui.button{[class*=instui]{& ._pendo-button{height:var(--instui-component-base-button-small-height)!important;min-height:var(--instui-component-base-button-small-height)!important;padding:var(--instui-component-base-button-padding-vertical) var(--instui-component-base-button-small-padding-horizontal)!important;border-width:var(--instui-component-base-button-border-width)!important;border-radius:var(--instui-component-base-button-border-radius)!important;border-style:var(--instui-component-base-button-border-style)!important;font-family:var(--instui-component-base-button-font-family)!important;font-size:var(--instui-component-base-button-small-font-size)!important;font-weight:var(--instui-component-base-button-font-weight)!important;line-height:var(--instui-component-base-button-line-height)!important;letter-spacing:var(--instui-component-base-button-letter-spacing)!important;cursor:pointer!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none) var(--instui-component-base-button-gap-button-content-md) var(--instui-component-shared-tokens-spacing-general-space-none) var(--instui-component-shared-tokens-spacing-general-space-none)!important;.pendo-mock-flexbox-element:last-child>&{margin-right:var(--instui-component-shared-tokens-spacing-general-space-none)!important}}& ._pendo-button-primaryButton,& ._pendo-button-custom{background:var(--instui-component-base-button-primary-background)!important;border-color:var(--instui-component-base-button-primary-border-color)!important;color:var(--instui-component-base-button-primary-color)!important;&:hover{background:var(--instui-component-base-button-primary-hover-background)!important;border-color:var(--instui-component-base-button-primary-hover-border-color)!important;color:var(--instui-component-base-button-primary-hover-text-color)!important}&:active{background:var(--instui-component-base-button-primary-active-background)!important;border-color:var(--instui-component-base-button-primary-active-border-color)!important;color:var(--instui-component-base-button-primary-active-text-color)!important}&:disabled{background:var(--instui-component-base-button-primary-disabled-background-color)!important;border-color:var(--instui-component-base-button-primary-disabled-border-color)!important;color:var(--instui-component-base-button-primary-disabled-text-color)!important;cursor:not-allowed!important}}& ._pendo-button-secondaryButton{background:var(--instui-component-base-button-secondary-background)!important;border-color:var(--instui-component-base-button-secondary-border-color)!important;color:var(--instui-component-base-button-secondary-color)!important;&:hover{background:var(--instui-component-base-button-secondary-hover-background)!important;border-color:var(--instui-component-base-button-secondary-hover-border-color)!important;color:var(--instui-component-base-button-secondary-hover-text-color)!important}&:active{background:var(--instui-component-base-button-secondary-active-background)!important;border-color:var(--instui-component-base-button-secondary-active-border-color)!important;color:var(--instui-component-base-button-secondary-active-text-color)!important}&:disabled{background:var(--instui-component-base-button-secondary-disabled-background-color)!important;border-color:var(--instui-component-base-button-secondary-disabled-border-color)!important;color:var(--instui-component-base-button-secondary-disabled-text-color)!important;cursor:not-allowed!important}}& ._pendo-button-tertiaryButton{border-color:var(--instui-color-stroke-interactive-action-tertiary-base)!important;color:var(--instui-color-text-interactive-action-tertiary-base)!important;background:0 0!important;&:hover{background:var(--instui-color-background-interactive-action-tertiary-hover)!important;border-color:var(--instui-component-base-button-tertiary-hover-border-color)!important;color:var(--instui-component-base-button-tertiary-hover-text-color)!important}&:active{background:var(--instui-color-background-interactive-action-tertiary-active)!important;border-color:var(--instui-component-base-button-tertiary-active-border-color)!important;color:var(--instui-component-base-button-tertiary-active-text-color)!important}&:disabled{border-color:var(--instui-component-base-button-tertiary-disabled-border-color)!important;color:var(--instui-component-base-button-tertiary-disabled-text-color)!important;cursor:not-allowed!important;background:0 0!important}}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& div:has(>._pendo-button-primaryButton):not(:has(>:not(._pendo-button-primaryButton))){justify-content:center!important;display:flex!important}}}}@layer instui.pagination{[class*=instui]{& ._pendo-number-scale-poll-wrapper{padding:var(--instui-component-shared-tokens-spacing-general-space-none)!important}& .pendo-survey-wrapper>div:has(input[type=radio]),& ._pendo-nps-poll-wrapper,& [id*=survey-pmf-answers],& [id*=survey-single-choice]{padding:var(--instui-component-shared-tokens-spacing-general-space-none) var(--instui-component-shared-tokens-spacing-general-space-none) var(--instui-component-shared-tokens-spacing-general-space-lg)!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important}& ._pendo-number-scale-poll-wrapper>div[role*=radiogroup],& ._pendo-nps-poll-wrapper>div[role*=radiogroup],& .pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(input[type=radio]){gap:var(--instui-component-shared-tokens-spacing-general-space-md)!important;flex-direction:row!important;width:fit-content!important;display:flex!important}& .pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(input[type=radio])>span{position:relative!important}& .pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(input[type=radio])>span>input[type=radio]{cursor:pointer!important;width:100%!important;height:100%!important;inset:0!important}& ._pendo-nps-poll-wrapper>div[role*=radiogroup]{justify-content:center!important;align-items:center!important;margin:0 auto!important}& label.pendo-radio[class*=_pendo-number-scale-poll-],& label.pendo-radio[class*=_pendo-nps-poll-],& .pendo-survey-wrapper>:not([id*=survey-single-choice]) label{height:var(--instui-component-base-button-small-height)!important;min-height:var(--instui-component-base-button-small-height)!important;width:var(--instui-component-base-button-small-height)!important;aspect-ratio:1!important;border-width:var(--instui-component-base-button-border-width)!important;border-radius:var(--instui-component-base-button-border-radius)!important;border-style:var(--instui-component-base-button-border-style)!important;font-size:var(--instui-component-base-button-small-font-size)!important;line-height:var(--instui-component-base-button-small-height)!important;letter-spacing:var(--instui-component-base-button-letter-spacing)!important;font-family:var(--instui-component-base-button-font-family)!important;font-weight:var(--instui-component-base-button-font-weight)!important;text-align:center!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important;background:var(--instui-component-base-button-secondary-background)!important;border-color:var(--instui-component-base-button-secondary-border-color)!important;color:var(--instui-component-base-button-secondary-color)!important;transition:var(--instui-focus-outline-transition)!important;&:hover{background:var(--instui-component-base-button-secondary-hover-background)!important;border-color:var(--instui-component-base-button-secondary-hover-border-color)!important;color:var(--instui-component-base-button-secondary-hover-text-color)!important}&:active{background:var(--instui-component-base-button-secondary-active-background)!important;border-color:var(--instui-component-base-button-secondary-active-border-color)!important;color:var(--instui-component-base-button-secondary-active-text-color)!important}}& label.pendo-radio[class*=_pendo-number-scale-poll-]+[class$=-description],& .pendo-survey-wrapper>:not([id*=survey-single-choice]) label+div{width:var(--instui-component-base-button-small-height)!important;margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important;font-weight:var(--instui-component-metric-label-font-weight)!important;line-height:var(--instui-line-height-standalone-text-xs)!important;font-size:var(--instui-component-metric-label-font-size)!important;color:var(--instui-component-text-muted-color)!important}& [class*=-wrapper]:last-child,& .pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(>span)>span:last-child{position:relative!important}& [class*=-wrapper]:last-child>[class$=-description],& .pendo-survey-wrapper div:not([id*=survey-single-choice]):has(>span):last-child>span:last-child>div{text-align:right!important;width:auto!important;position:absolute!important;right:0!important}& ._pendo-nps-poll-lowerbound-label,& ._pendo-nps-poll-upperbound-label{margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important}& input.pendo-radio:focus+label.pendo-radio[class*=_pendo-number-scale-poll-],& input.pendo-radio:focus+label.pendo-radio[class*=_pendo-nps-poll-],& .pendo-survey-wrapper>:not([id*=survey-single-choice]) input.pendo-radio:focus+label.pendo-radio,& .pendo-survey-wrapper>:not([id*=survey-single-choice]) input[type=radio]:focus+label{outline-color:var(--instui-focus-outline-color-start)!important;outline-width:var(--instui-component-shared-tokens-focus-outline-width)!important;outline-style:var(--instui-component-shared-tokens-focus-outline-style)!important;outline-offset:var(--instui-component-shared-tokens-focus-outline-offset)!important;outline-color:light-dark(var(--instui-component-shared-tokens-focus-outline-info-color),var(--instui-component-shared-tokens-focus-outline-on-color))!important}& input.pendo-radio:checked+label.pendo-radio[class*=_pendo-number-scale-poll-],& input.pendo-radio:checked+label.pendo-radio[class*=_pendo-nps-poll-],& .pendo-survey-wrapper>:not([id*=survey-single-choice]) input.pendo-radio:checked+label.pendo-radio,& .pendo-survey-wrapper>:not([id*=survey-single-choice]) input[type=radio]:checked+label{background:var(--instui-component-base-button-primary-background)!important;border-color:var(--instui-component-base-button-primary-border-color)!important;color:var(--instui-component-base-button-primary-color)!important;&:hover{background:var(--instui-component-base-button-primary-hover-background)!important;border-color:var(--instui-component-base-button-primary-hover-border-color)!important;color:var(--instui-component-base-button-primary-hover-text-color)!important}&:active{background:var(--instui-component-base-button-primary-active-background)!important;border-color:var(--instui-component-base-button-primary-active-border-color)!important;color:var(--instui-component-base-button-primary-active-text-color)!important}}& [class$=-poll-question]+._pendo-row [class$=-description]{padding-top:var(--instui-component-shared-tokens-spacing-general-space-xs)!important;color:var(--instui-component-text-muted-color)!important}}}@layer instui.mask{[class*=instui]{& ._pendo-backdrop{background-color:var(--instui-component-mask-background-color)!important}}}@layer instui.view{[class*=instui]{& .pendo-mock-flexbox-element:has(._pendo-divider){width:100%!important}& hr{border-width:var(--instui-component-shared-tokens-stroke-width-sm)!important;border-style:var(--instui-component-view-border-style)!important;margin:var(--instui-component-shared-tokens-spacing-general-space-xs) var(--instui-component-shared-tokens-spacing-general-space-none)!important;border-radius:var(--instui-component-shared-tokens-border-radius-full)!important;border-color:var(--instui-component-tabs-panel-border-color)!important}}}@layer instui.card{[class*=instui]{& ._pendo-row{margin-top:var(--instui-component-shared-tokens-spacing-general-space-none)!important;margin-right:var(--instui-component-shared-tokens-spacing-general-space-none)!important;margin-bottom:var(--instui-component-shared-tokens-spacing-general-space-sm)!important;margin-left:var(--instui-component-shared-tokens-spacing-general-space-none)!important;line-height:var(--instui-component-shared-tokens-spacing-general-space-none)!important}&[data-layout=lightboxBlank] ._pendo-row{margin-top:var(--instui-component-shared-tokens-spacing-general-space-none)!important;margin-right:var(--instui-component-shared-tokens-spacing-general-space-none)!important;margin-bottom:var(--instui-component-shared-tokens-spacing-gap-cards-sm)!important;margin-left:var(--instui-component-shared-tokens-spacing-general-space-none)!important}& [id*=guide-components]>:first-child ._pendo-row{margin-right:calc(var(--instui-component-base-button-gap-button-content-sm) + var(--instui-component-base-button-small-height))!important}&[data-layout=lightboxBlank] [id*=guide-components]>:first-child ._pendo-row{margin-right:calc(var(--instui-component-base-button-gap-button-content-sm) + var(--instui-component-base-button-small-height) / 2)!important}& .pendo-block-wrapper{margin:var(--instui-component-shared-tokens-spacing-general-space-none)!important}& ._pendo-text-paragraph._pendo-multi-choice-poll-question+._pendo-row .pendo-mock-flexbox-element,& ._pendo-multi-choice-poll-select-border,& ._pendo-multi-choice-poll-select{width:100%!important}& [data-pendo-justify-content] .pendo-mock-flexbox-row{flex-wrap:wrap!important;align-items:center!important;min-height:0!important;display:flex!important}& [data-pendo-justify-content=flex-start] .pendo-mock-flexbox-row{justify-content:flex-start!important}& [data-pendo-justify-content=center] .pendo-mock-flexbox-row{justify-content:center!important}& [data-pendo-justify-content=flex-end] .pendo-mock-flexbox-row{justify-content:flex-end!important}& [data-pendo-justify-content=space-between] .pendo-mock-flexbox-row{justify-content:space-between!important}& [data-pendo-justify-content] .pendo-mock-flexbox-row .pendo-mock-flexbox-element{position:static!important}& ._pendo-step-container-styles{background-color:var(--instui-component-view-background-primary)!important;color:var(--instui-component-view-color)!important;transition:var(--instui-focus-outline-transition)!important;&:focus-visible{outline:none!important}&:focus{outline-color:var(--instui-focus-outline-color-start)!important;outline-width:var(--instui-component-shared-tokens-focus-outline-width)!important;outline-style:var(--instui-component-shared-tokens-focus-outline-style)!important;outline-offset:var(--instui-component-shared-tokens-focus-outline-offset)!important;outline-color:light-dark(var(--instui-component-shared-tokens-focus-outline-info-color),var(--instui-component-shared-tokens-focus-outline-on-color))!important}}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& ._pendo-step-container-styles>:is(div,form,textarea,h2):not(._pendo-row){margin:var(--instui-component-shared-tokens-spacing-general-space-none) auto var(--instui-component-shared-tokens-spacing-general-space-sm) auto!important;width:100%!important;max-width:var(--manual-light-pendo-embedded-pendo-step-container-styles-width)!important}& ._pendo-step-container-styles>._pendo-row{max-width:var(--manual-light-pendo-embedded-pendo-step-container-styles-width)!important;margin-left:auto!important;margin-right:auto!important}}}}@layer instui.focusOutline{[class*=instui]{--instui-focus-outline-color:var(--instui-component-shared-tokens-focus-outline-info-color);--instui-focus-outline-color-start:transparent;--instui-focus-outline-width:var(--instui-component-shared-tokens-focus-outline-width);--instui-focus-outline-offset:var(--instui-component-shared-tokens-focus-outline-offset);--instui-focus-outline-radius:var(--instui-border-radius-md);--instui-focus-outline-style:solid;--instui-focus-outline-transition:outline-color .2s, outline-offset .25s;--instui-focus-outline-color-success:var(--instui-component-shared-tokens-focus-outline-success-color);--instui-focus-outline-color-danger:var(--instui-component-shared-tokens-focus-outline-danger-color);--instui-focus-outline-color-inverse:var(--instui-component-shared-tokens-focus-outline-on-color);--instui-focus-outline-inset:0rem}:where(._pendo-button,._pendo-close-guide,._pendo-text-link){outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color-start)!important;outline-offset:0!important;transition:var(--instui-focus-outline-transition)!important}:where(._pendo-button,._pendo-close-guide,._pendo-text-link):where(:focus-visible){outline-color:var(--instui-focus-outline-color)!important;outline-offset:var(--instui-focus-outline-offset)!important;border-radius:var(--instui-focus-outline-radius)!important}:where(.-focus-color-success):where(:focus-visible){outline-color:var(--instui-focus-outline-color-success)!important}:where(.-focus-color-danger):where(:focus-visible){outline-color:var(--instui-focus-outline-color-danger)!important}:where(.-focus-color-inverse):where(:focus-visible){outline-color:var(--instui-focus-outline-color-inverse)!important}:where(.-focus-position-inset):where(:focus-visible){outline-offset:var(--instui-focus-outline-inset)!important}:where(.-focus-within):where(:focus-within){outline-color:var(--instui-focus-outline-color)!important;outline-offset:var(--instui-focus-outline-offset)!important;border-radius:var(--instui-focus-outline-radius)!important}:where(.-without-focus-animation){transition:none!important}}}
1
+ @scope(._pendo-step-container){:scope{--kq:#fff;--kp:#0000;--jm:#03893d;--jn:#037d37;--jo:#f2f4f5;--jx:#dfe1e3;--jy:#c7cacd;--jz:#aab0b5;--ka:#9ea6ad;--kb:#8d959f;--kc:#7e8792;--jp:#6a7883;--jq:#5f6e7a;--jr:#576773;--js:#4a5b68;--jt:#334450;--ju:#273540;--jv:#1c222b;--jw:#171b21;--jj:#accdf7;--jk:#7fb4f1;--jl:#4798e3;--jg:#2b7abc;--jh:#2369a4;--ji:#1a5281;--kn:#e62429;--ko:#cf1f24;--km:#cf4a00;--ke:#eef4fd;--kj:#e2eaf7;--kk:#86a8d5;--kl:#7097c7;--kf:#44709f;--kg:#2e5177;--kh:#234465;--ki:#1d354f;--kr:#ffffffbf;--kd:#1c222bbf;--ky:.0625rem;--lc:.125rem;--lg:.25rem;--lh:.5rem;--kz:.75rem;--la:.875rem;--lb:1rem;--ld:1.25rem;--le:1.5rem;--lf:2rem;--kt:Inclusive Sans, "Helvetica Neue", Helvetica, Arial, sans-serif;--ks:Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif;--kw:400;--kv:500;--kx:600;--ku:700;--jb:150%;--jd:125%;--iz:125%;--ja:1.125rem;--hu:solid;--hr:0rem;--fn:999rem;--fz:0rem;--fe:.375rem;--ee:underline;--eb:1rem;--ea:1.25rem;--dp:1.5rem;--bw:normal;--bq:solid;--by:.25rem;--be:solid;--bg:.5rem;--bh:.5rem;--is:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E);--it:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E);--iu:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m18%2015-6-6-6%206%22%2F%3E%3C%2Fsvg%3E);--iv:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E);--iw:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m15%209-6%206%22%2F%3E%3Cpath%20d%3D%22m9%209%206%206%22%2F%3E%3C%2Fsvg%3E);--ix:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E);--iy:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E)}@layer instui.tokens{[class*=instui]{--lj:var(--lf);--li:var(--le);--lw:var(--lc);--lv:var(--lg);--lt:var(--lh);--ls:var(--kz);--lr:var(--lb);--lu:var(--le);--ll:var(--kz);--lk:var(--lb);--lm:var(--lh);--lo:var(--lh);--ln:var(--lb);--lq:var(--lh);--lp:var(--kz);--d:var(--lg);--c:var(--lh);--b:var(--kz);--a:var(--kz);--g:var(--ky);--f:var(--lc);--e:var(--ky);--ij:var(--kt);--ii:var(--ks);--io:var(--kw);--ip:var(--kx);--iq:var(--ku);--ir:var(--kv);--jc:var(--ld);--jf:var(--kz);--je:var(--lb);--in:var(--kz);--im:var(--la);--ik:var(--lb);--il:var(--ld);--o:light-dark(var(--kq),var(--jw));--p:light-dark(var(--kq),var(--jw));--i:light-dark(var(--ki),var(--ke));--k:light-dark(var(--kh),var(--kq));--j:light-dark(var(--jx),var(--jt));--l:light-dark(var(--jx),var(--jt));--n:light-dark(var(--ke),var(--kg));--m:light-dark(var(--kj),var(--kh));--h:light-dark(var(--kq),var(--jw));--q:light-dark(var(--kr),var(--kd));--aa:light-dark(var(--kb),var(--jp));--ap:var(--jm);--ab:var(--kn);--aq:var(--km);--ac:var(--jg);--aj:light-dark(var(--jg),var(--jl));--ak:var(--kq);--al:light-dark(var(--kc),var(--jq));--am:light-dark(var(--jt),var(--kc));--an:var(--kb);--ao:light-dark(var(--jv),var(--kq));--ae:light-dark(var(--jx),var(--jt));--af:light-dark(var(--jx),var(--jt));--ad:var(--ko);--ag:var(--jn);--ah:light-dark(var(--kk),var(--kl));--ai:light-dark(var(--jy),var(--js));--ar:light-dark(var(--ju),var(--jo));--bb:light-dark(var(--jr),var(--jz));--ax:light-dark(var(--kb),var(--jr));--ay:light-dark(var(--jt),var(--ka));--az:light-dark(var(--jq),var(--kc));--ba:light-dark(var(--ji),var(--jj));--au:light-dark(var(--ka),var(--jp));--as:light-dark(var(--kq),var(--ki));--at:light-dark(var(--ka),var(--jp));--av:light-dark(var(--ki),var(--ke));--aw:light-dark(var(--jz),var(--js));--t:var(--kq);--r:light-dark(#23446526,#0000004d);--s:light-dark(#2344651a,#00000026);--bc:var(--kp);--y:light-dark(var(--ju),var(--kq));--z:light-dark(var(--jh),var(--jk));--u:light-dark(var(--ki),var(--ke));--v:light-dark(var(--kq),var(--ki));--w:light-dark(var(--kf),var(--kk));--x:light-dark(var(--ki),var(--kq));--hv:var(--y);--ht:var(--h);--hf:var(--o);--hg:var(--p);--hh:var(--al);--hi:var(--am);--hj:var(--a);--hk:var(--e);--hq:var(--y);--hl:var(--ii);--hn:var(--ir);--hm:var(--im);--ho:var(--lj);--hp:var(--lt);--gh:var(--o);--gi:var(--p);--gj:var(--al);--gk:var(--am);--gl:var(--a);--gm:var(--e);--gw:var(--y);--gu:var(--az);--gv:var(--ay);--gn:var(--ii);--gp:var(--io);--go:var(--im);--gq:var(--ls);--gt:var(--ls);--gy:var(--ii);--gz:var(--ip);--ha:var(--jb);--hb:var(--ii);--hd:var(--io);--hc:var(--im);--he:var(--jb);--gx:var(--y);--hs:var(--bb);--gg:var(--aa);--fo:var(--d);--gc:var(--lw);--gb:var(--lv);--ga:var(--lt);--fy:var(--ls);--fx:var(--lr);--fw:var(--ll);--fv:var(--lk);--ge:var(--lo);--gd:var(--ln);--fr:var(--lw);--fu:var(--f);--fq:var(--aj);--fs:var(--ak);--ft:var(--ag);--fp:var(--ad);--gf:var(--g);--ey:var(--o);--ez:var(--p);--fa:var(--al);--fb:var(--an);--fc:var(--ao);--fh:var(--im);--fm:var(--jc);--fg:var(--ii);--fi:var(--io);--fj:var(--lt);--fd:var(--e);--fk:var(--y);--fl:var(--y);--ff:var(--li);--ew:var(--aa);--ex:var(--b);--el:var(--h);--em:var(--y);--en:var(--ii);--eo:var(--io);--ep:var(--io);--eq:var(--n);--er:var(--ar);--es:var(--jd);--et:var(--ls);--eu:var(--i);--ev:var(--as);--ej:var(--in);--ek:var(--io);--ei:var(--k);--eh:var(--q);--ed:var(--z);--eg:var(--ba);--ef:var(--ax);--ec:var(--ir);--do:var(--ij);--dq:var(--iq);--dr:var(--iz);--dw:var(--ij);--dy:var(--iq);--dx:var(--il);--dz:var(--iz);--ds:var(--ij);--du:var(--iq);--dt:var(--ik);--dv:var(--iz);--dn:var(--y);--di:var(--ii);--dk:var(--io);--dj:var(--ik);--dm:var(--ja);--dl:var(--lm);--bz:var(--u);--ca:var(--u);--cb:var(--v);--cc:var(--u);--cd:var(--u);--ce:var(--v);--cf:var(--j);--cg:var(--ae);--ch:var(--at);--ci:var(--u);--cj:var(--u);--ck:var(--u);--cl:var(--u);--cm:var(--v);--cn:var(--w);--co:var(--w);--cp:var(--x);--cq:var(--w);--cr:var(--w);--cs:var(--x);--ct:var(--l);--cu:var(--af);--cv:var(--au);--cw:var(--w);--cx:var(--w);--cy:var(--x);--cz:var(--im);--da:var(--lj);--db:var(--lp);--bp:var(--a);--br:var(--e);--bs:var(--ii);--bt:var(--ir);--bu:var(--lt);--bv:var(--lv);--dc:var(--u);--dd:var(--u);--de:var(--ai);--df:var(--aw);--dg:var(--u);--dh:var(--u);--bx:var(--jd);--bd:var(--b);--bf:var(--f);--bk:var(--ab);--bl:var(--t);--bm:var(--ac);--bn:var(--ap);--bo:var(--aq);--bj:var(--ls);--bi:var(--lu);--pendo-embedded-width:59.25rem;--pendo-alert-indent:2.5rem;--pendo-overlay-width:22.5rem;--pendo-space-0:var(--fz);--pendo-input-border-style:solid;--gs:4rem;--gr:6rem}}@layer instui.elevation{[class*=instui]{--hw:0 .1875rem .375rem var(--s), 0 .1875rem .375rem var(--r)}}@layer instui.container{[class*=instui]:is([data-layout=tooltipBlank],._pendo-guide-walkthrough_){& ._pendo-step-container-size{height:auto!important}& ._pendo-step-container-styles{border-radius:var(--ex)!important;border-color:var(--ew)!important;min-height:2.75rem!important;box-shadow:var(--hw)!important;margin-bottom:calc(4px + var(--fv))!important;margin-left:var(--fy)!important;margin-right:var(--fy)!important;margin-top:var(--gb)!important}& .pendo-tooltip-caret{--caret-color:var(--ht);&.pendo-tooltip-caret--top{border-top-color:var(--caret-color)!important;bottom:calc(4px + var(--fv) - 15px)!important;&+.pendo-tooltip-caret-border{bottom:calc(4px + var(--fv) - 16px)!important}}&.pendo-tooltip-caret--right{border-right-color:var(--caret-color)!important;left:-3px!important;&+.pendo-tooltip-caret-border{left:-4px!important}}&.pendo-tooltip-caret--bottom{border-bottom-color:var(--caret-color)!important;top:calc(var(--gb) - 15px)!important;&+.pendo-tooltip-caret-border{top:calc(var(--gb) - 16px)!important}}&.pendo-tooltip-caret--left{border-left-color:var(--caret-color)!important;right:-3px!important;&+.pendo-tooltip-caret-border{right:-4px!important}}}&[data-layout=tooltipBlank]{& ._pendo-step-container-styles{width:var(--pendo-overlay-width)!important;padding:var(--ge) var(--ge) var(--pendo-space-0)!important}}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& ._pendo-step-container-styles{width:auto!important;padding:var(--gd) var(--gd) var(--ga)!important;margin-bottom:var(--fy)!important}&:not(:has(._pendo-row)){& ._pendo-step-container-styles{padding-bottom:var(--ge)!important}}}}[class*=instui][data-layout=lightboxBlank]{&,&[class*=instui-info]{--_alert-color:var(--bm);--_alert-icon:var(--ix)}&[class*=instui-danger]{--_alert-color:var(--bk);--_alert-icon:var(--iw)}&[class*=instui-success]{--_alert-color:var(--bn);--_alert-icon:var(--iv)}&[class*=instui-warning]{--_alert-color:var(--bo);--_alert-icon:var(--iy)}&,& ._pendo-step-container-size{margin-right:var(--lw)!important;margin-left:var(--lw)!important;max-width:var(--pendo-embedded-width)!important}& ._pendo-step-container-size{z-index:300000!important;padding-bottom:calc(var(--ls))!important;padding-top:var(--lt)!important}& ._pendo-step-container-styles{border-color:var(--_alert-color)!important;border-width:var(--bf)!important;border-style:var(--be)!important;border-radius:var(--bd)!important;height:auto!important;padding:var(--bj) var(--bi) var(--bj) calc(var(--pendo-alert-indent) + var(--bi))!important;box-shadow:var(--hw)!important;margin-bottom:var(--ls)!important;margin-left:var(--lr)!important;margin-right:var(--lr)!important;margin-top:var(--lv)!important;position:relative!important;overflow:hidden!important;&:before{content:""!important;width:var(--pendo-alert-indent)!important;background-color:var(--_alert-color)!important;inset-block:0!important;display:block!important;position:absolute!important;left:0!important;overflow:hidden!important}&:after{content:""!important;top:50%!important;left:calc((var(--pendo-alert-indent) - var(--ea)) / 2)!important;width:var(--ea)!important;height:var(--ea)!important;mask-image:var(--_alert-icon)!important;background-color:var(--bl)!important;display:block!important;position:absolute!important;transform:translateY(-50%)!important;mask-position:50%!important;mask-size:contain!important;mask-repeat:no-repeat!important}}}}@layer instui.card{._pendo-row{margin-top:var(--pendo-space-0)!important;margin-right:var(--pendo-space-0)!important;margin-bottom:var(--ga)!important;margin-left:var(--pendo-space-0)!important;line-height:var(--pendo-space-0)!important}[data-layout=lightboxBlank] ._pendo-row{margin-top:var(--pendo-space-0)!important;margin-right:var(--pendo-space-0)!important;margin-bottom:var(--fw)!important;margin-left:var(--pendo-space-0)!important}[id*=guide-components]>:first-child ._pendo-row{margin-right:calc(var(--bv) + var(--da))!important}[data-layout=lightboxBlank] [id*=guide-components]>:first-child ._pendo-row{margin-right:calc(var(--bv) + var(--da) / 2)!important}.pendo-block-wrapper{margin:var(--pendo-space-0)!important}._pendo-text-paragraph._pendo-multi-choice-poll-question+._pendo-row .pendo-mock-flexbox-element,._pendo-multi-choice-poll-select-border,._pendo-multi-choice-poll-select{width:100%!important}[data-pendo-justify-content] .pendo-mock-flexbox-row{flex-wrap:wrap!important;align-items:center!important;min-height:0!important;display:flex!important}[data-pendo-justify-content=flex-start] .pendo-mock-flexbox-row{justify-content:flex-start!important}[data-pendo-justify-content=center] .pendo-mock-flexbox-row{justify-content:center!important}[data-pendo-justify-content=flex-end] .pendo-mock-flexbox-row{justify-content:flex-end!important}[data-pendo-justify-content=space-between] .pendo-mock-flexbox-row{justify-content:space-between!important}[data-pendo-justify-content] .pendo-mock-flexbox-row .pendo-mock-flexbox-element{position:static!important}._pendo-step-container-styles{background-color:var(--ht)!important;color:var(--hv)!important;outline:var(--ih) var(--if) var(--ia)!important;outline-offset:0!important;transition:var(--ig)!important;&:focus-visible{outline-color:light-dark(var(--hx),var(--hz))!important;outline-offset:var(--id)!important}}._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& ._pendo-step-container-styles>:is(div,form,textarea,h2):not(._pendo-row){margin:var(--pendo-space-0) auto var(--ga) auto!important;width:100%!important;max-width:var(--pendo-embedded-width)!important}& ._pendo-step-container-styles>._pendo-row{max-width:var(--pendo-embedded-width)!important;margin-left:auto!important;margin-right:auto!important}}}@layer instui.text{._pendo-simple-text,[class*=_pendo-text-]{font-family:var(--hb)!important;font-weight:var(--hd)!important;font-size:var(--hc)!important;line-height:var(--he)!important;letter-spacing:var(--hr)!important;color:var(--gx)!important;max-width:100%!important}._pendo-text-bold{font-weight:var(--gz)!important}._pendo-text-italic{font-family:var(--gy)!important;font-weight:var(--gz)!important;line-height:var(--ha)!important}._pendo-text-strike{text-decoration:line-through!important}h2:is(._pendo-simple-text,._pendo-text-title){font-weight:var(--dy)!important;font-family:var(--dw)!important;line-height:var(--dz)!important;font-size:var(--dp)!important}h3._pendo-simple-text{font-weight:var(--dq)!important;font-size:var(--dx)!important;font-family:var(--do)!important;line-height:var(--dr)!important}[data-layout=tooltipBlank]{& h2._pendo-simple-text{font-size:var(--dx)!important;line-height:var(--dv)!important}& h3._pendo-simple-text{font-size:var(--dt)!important;line-height:var(--dz)!important}}._pendo-text-link{text-decoration:var(--ee)!important;font-weight:var(--ec)!important;border-radius:var(--fo)!important;color:var(--ed)!important;&:is(:hover,:active,:focus){color:var(--eg)!important}&:disabled{color:var(--ef)!important}}._pendo-simple-text ol,._pendo-simple-text ul{padding-left:var(--pendo-space-0)!important}._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& :not(._pendo-close-guide){font-size:var(--dt)!important}&,& ._pendo-row:has(+._pendo-row>._pendo-button-primaryButton) ._pendo-simple-text:has(>span:not([class])),& .pendo-survey-wrapper>div:not(:has([class])):not(:has(input)),& h2._pendo-simple-text,& h2._pendo-text-title ._pendo-simple-text,& ._pendo-simple-text._pendo-nps-open-text-poll-question{font-weight:var(--du)!important;font-family:var(--ds)!important;font-size:var(--dt)!important;line-height:var(--dv)!important;margin:var(--pendo-space-0) var(--pendo-space-0) var(--ga)!important}& h2._pendo-text-title ._pendo-simple-text,& ._pendo-simple-text._pendo-nps-open-text-poll-question{text-align:left!important}& h2._pendo-text-title._pendo-nps-poll-success-message ._pendo-simple-text{text-align:center!important}& ._pendo-nps-poll-lowerbound-label,& ._pendo-nps-poll-upperbound-label{font-style:normal!important;font-size:var(--ej)!important;font-weight:var(--ek)!important;line-height:var(--jf)!important;text-align:center!important;color:var(--hs)!important}& .pendo-survey-wrapper label+div{font-size:var(--ej)!important;padding-top:var(--gb)!important;text-align:left!important}}}@layer instui.chrome{[class*=pendo-video-wrapper]{aspect-ratio:16/9!important;height:auto!important;padding-bottom:0!important;position:relative!important;overflow:visible!important}._pendo-video{width:100%!important;height:100%!important;display:block!important}.pendo-mock-flexbox-element:has([class*=pendo-video-wrapper]){width:100%!important}._pendo-image{max-width:100%!important;height:auto!important}._pendo-backdrop{background-color:var(--eh)!important}.pendo-mock-flexbox-element:has(._pendo-divider){width:100%!important}hr{border-width:var(--gf)!important;border-style:var(--hu)!important;margin:var(--gb) var(--pendo-space-0)!important;border-radius:var(--fn)!important;border-color:var(--gg)!important}._pendo-close-guide{padding-bottom:var(--gb)!important;height:var(--da)!important;aspect-ratio:1!important;border-radius:var(--bp)!important;border-width:var(--pendo-space-0)!important;background-color:#0000!important;background-position:50%!important;background-repeat:no-repeat!important;background-size:var(--eb)!important;inset-inline:auto var(--gb)!important;font-size:var(--il)!important;font-family:var(--bs)!important;font-weight:var(--kv)!important;color:var(--gx)!important;position:absolute!important;inset-block-start:var(--gb)!important;&:hover{background-color:var(--cj)!important}&:active{background-color:var(--ci)!important}}[data-layout=lightboxBlank] ._pendo-close-guide{inset-block-start:var(--bh)!important;inset-inline-end:var(--bg)!important}}@layer instui.button{[class*=instui]{& ._pendo-button{height:var(--da)!important;min-height:var(--da)!important;padding:var(--by) var(--db)!important;border-width:var(--br)!important;border-radius:var(--bp)!important;border-style:var(--bq)!important;font-family:var(--bs)!important;font-size:var(--cz)!important;font-weight:var(--bt)!important;line-height:var(--bx)!important;letter-spacing:var(--bw)!important;cursor:pointer!important;margin:var(--pendo-space-0) var(--bu) var(--pendo-space-0) var(--pendo-space-0)!important;.pendo-mock-flexbox-element:last-child>&{margin-right:var(--pendo-space-0)!important}}& ._pendo-button-primaryButton,& ._pendo-button-custom{background:var(--cc)!important;border-color:var(--cd)!important;color:var(--ce)!important;&:hover{background:var(--ck)!important;border-color:var(--cl)!important;color:var(--cm)!important}&:active{background:var(--bz)!important;border-color:var(--ca)!important;color:var(--cb)!important}&:disabled{background:var(--cf)!important;border-color:var(--cg)!important;color:var(--ch)!important;cursor:not-allowed!important}}& ._pendo-button-secondaryButton{background:var(--cq)!important;border-color:var(--cr)!important;color:var(--cs)!important;&:hover{background:var(--cw)!important;border-color:var(--cx)!important;color:var(--cy)!important}&:active{background:var(--cn)!important;border-color:var(--co)!important;color:var(--cp)!important}&:disabled{background:var(--ct)!important;border-color:var(--cu)!important;color:var(--cv)!important;cursor:not-allowed!important}}& ._pendo-button-tertiaryButton{border-color:var(--ah)!important;color:var(--av)!important;background:0 0!important;&:hover{background:var(--n)!important;border-color:var(--dg)!important;color:var(--dh)!important}&:active{background:var(--m)!important;border-color:var(--dc)!important;color:var(--dd)!important}&:disabled{border-color:var(--de)!important;color:var(--df)!important;cursor:not-allowed!important;background:0 0!important}}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& div:has(>._pendo-button-primaryButton):not(:has(>:not(._pendo-button-primaryButton))){justify-content:center!important;display:flex!important}}}}@layer instui.inputs{._pendo-row:has(._pendo-open-text-poll-input){height:auto!important}._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-row{height:auto!important;min-height:unset!important}._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-element{width:100%!important;position:static!important}._pendo-open-text-poll-input{border-radius:var(--gl)!important;border-width:var(--gm)!important;border-style:var(--pendo-input-border-style)!important;padding:var(--gt)!important;gap:var(--gq)!important;min-height:var(--gs)!important;height:auto!important;max-height:var(--gr)!important;width:100%!important;font-family:var(--gn)!important;font-weight:var(--gp)!important;font-size:var(--go)!important;line-height:var(--je)!important;letter-spacing:normal!important;margin:var(--pendo-space-0)!important;background-color:var(--gh)!important;color:var(--gw)!important;border-color:var(--gj)!important;font-style:normal!important;&:hover{background:var(--gi)!important;border-color:var(--gk)!important}&:focus{background-color:var(--gh)!important;border-color:var(--gj)!important}&::placeholder{color:var(--gu)!important}&:hover::placeholder{color:var(--gv)!important}}._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& ._pendo-open-text-poll-input{min-height:100px!important}& :is([id*=survey-pmf-answers],[id*=survey-single-choice]){flex-direction:column!important;display:flex!important}& :is([id*=survey-pmf-answers],[id*=survey-single-choice]) span:has(.pendo-radio){text-align:left!important;flex-direction:row!important;justify-content:start!important;align-items:center!important;display:flex!important}}._pendo-multi-choice-poll-select-border[id^=pendo-select-container-]:has(>select){padding:var(--pendo-space-0)!important;margin:var(--pendo-space-0)!important;background:0 0!important;border:0!important;position:relative!important;&:after{content:""!important;right:var(--hp)!important;top:var(--fx)!important;width:var(--eb)!important;height:var(--eb)!important;mask-image:var(--it)!important;pointer-events:none!important;background-color:var(--hq)!important;display:block!important;position:absolute!important;transform:translateY(-50%)!important;mask-position:50%!important;mask-size:contain!important;mask-repeat:no-repeat!important}}select._pendo-multi-choice-poll-select{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;height:var(--ho)!important;border-radius:var(--hj)!important;border-width:var(--hk)!important;border-style:var(--pendo-input-border-style)!important;padding:var(--pendo-space-0) calc(var(--hp) + 24px) var(--pendo-space-0) var(--hp)!important;font-family:var(--hl)!important;font-weight:var(--hn)!important;font-size:var(--hm)!important;line-height:calc(var(--je) * 2)!important;letter-spacing:normal!important;background-color:var(--hf)!important;color:var(--hq)!important;border-color:var(--hh)!important;font-style:normal!important;&:hover{background-color:var(--hg)!important;border-color:var(--hi)!important}&:focus{background-color:var(--hf)!important}}select._pendo-multi-choice-poll-select option{font-family:var(--hl)!important;font-weight:var(--hn)!important;font-size:var(--hm)!important;background-color:var(--ht)!important;color:var(--gx)!important}@supports (appearance:base-select){._pendo-multi-choice-poll-select-border[id^=pendo-select-container-]:has(>select:open):after{mask-image:var(--iu)!important}select._pendo-multi-choice-poll-select,select._pendo-multi-choice-poll-select::picker(select){appearance:base-select!important}select._pendo-multi-choice-poll-select::picker-icon{display:none!important}select._pendo-multi-choice-poll-select::picker(select){border-radius:var(--ex)!important;border-width:var(--gf)!important;padding:var(--pendo-space-0)!important;margin:var(--pendo-space-0)!important;background-color:var(--el)!important;border-style:solid!important;border-color:var(--ew)!important;box-shadow:var(--hw)!important;overflow:hidden!important}select._pendo-multi-choice-poll-select option{margin:var(--pendo-space-0)!important;font-family:var(--en)!important;font-weight:var(--eo)!important;font-size:var(--im)!important;letter-spacing:var(--hr)!important;cursor:pointer!important;line-height:var(--es)!important;height:var(--lj)!important;background-color:var(--el)!important;color:var(--em)!important;border-radius:0!important;&::checkmark{display:none!important}&:hover,&:focus{background-color:var(--eq)!important;color:var(--er)!important}&:focus{outline:none!important}&:checked{font-weight:var(--ep)!important;padding-right:calc(var(--et) + var(--lq))!important;background-color:var(--eu)!important;color:var(--ev)!important;border-radius:0!important;position:relative!important;&:after{content:""!important;right:var(--et)!important;width:var(--eb)!important;height:var(--eb)!important;mask-image:var(--is)!important;pointer-events:none!important;background-color:var(--ev)!important;display:block!important;position:absolute!important;top:50%!important;transform:translateY(-50%)!important;mask-position:50%!important;mask-size:contain!important;mask-repeat:no-repeat!important}&:hover{background-color:var(--ei)!important}}}}._pendo-multi-choice-poll-select-border label.pendo-radio,._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]) :is([id*=survey-pmf-answers],[id*=survey-single-choice]) label.pendo-radio{font-family:var(--fg)!important;font-weight:var(--fi)!important;font-size:var(--fh)!important;line-height:var(--fm)!important;letter-spacing:normal!important;margin:var(--pendo-space-0)!important;background-color:var(--bc)!important;color:var(--fk)!important;font-style:normal!important;&:hover{color:var(--fl)!important}}._pendo-multi-choice-poll-select-border input.pendo-radio,._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]) :is([id*=survey-pmf-answers],[id*=survey-single-choice]) input.pendo-radio{width:var(--ff)!important;height:var(--ff)!important;border-radius:var(--fn)!important;border-width:var(--fd)!important;border-style:var(--pendo-input-border-style)!important;margin:var(--gc) var(--fj) var(--pendo-space-0) var(--pendo-space-0)!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border-color:var(--fa)!important;background-color:var(--ey)!important;&:hover{background-color:var(--ez)!important;border-color:var(--fb)!important}&:checked{box-shadow:var(--fc) inset 0 0 0 var(--fe)!important;border-color:var(--fc)!important;&+label{background:var(--bc)!important;color:var(--fk)!important}}&:focus{&+label{outline:none!important}}}[class$=-poll-question]>._pendo-simple-text>._pendo-text-plain{font-family:var(--di)!important;font-weight:var(--dk)!important;font-size:var(--dj)!important;line-height:var(--dm)!important;letter-spacing:normal!important;margin:var(--dl) var(--pendo-space-0)!important;color:var(--dn)!important;font-style:normal!important}._pendo-number-scale-poll-wrapper{padding:var(--pendo-space-0)!important}.pendo-survey-wrapper>div:has(input[type=radio]),._pendo-nps-poll-wrapper,[id*=survey-pmf-answers],[id*=survey-single-choice]{padding:var(--pendo-space-0) var(--pendo-space-0) var(--fx)!important;margin:var(--pendo-space-0)!important}._pendo-number-scale-poll-wrapper>div[role*=radiogroup],._pendo-nps-poll-wrapper>div[role*=radiogroup],.pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(input[type=radio]){gap:var(--fy)!important;flex-direction:row!important;width:fit-content!important;display:flex!important}.pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(input[type=radio])>span{position:relative!important}.pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(input[type=radio])>span>input[type=radio]{cursor:pointer!important;width:100%!important;height:100%!important;inset:0!important}._pendo-nps-poll-wrapper>div[role*=radiogroup]{justify-content:center!important;align-items:center!important;margin:0 auto!important}label.pendo-radio[class*=_pendo-number-scale-poll-],label.pendo-radio[class*=_pendo-nps-poll-],.pendo-survey-wrapper>:not([id*=survey-single-choice]) label{height:var(--da)!important;min-height:var(--da)!important;width:var(--da)!important;aspect-ratio:1!important;border-width:var(--br)!important;border-radius:var(--bp)!important;border-style:var(--bq)!important;font-size:var(--cz)!important;line-height:var(--da)!important;letter-spacing:var(--bw)!important;font-family:var(--bs)!important;font-weight:var(--bt)!important;text-align:center!important;margin:var(--pendo-space-0)!important;background:var(--cq)!important;border-color:var(--cr)!important;color:var(--cs)!important;outline:var(--ih) var(--if) var(--ia)!important;outline-offset:0!important;transition:var(--ig)!important;&:hover{background:var(--cw)!important;border-color:var(--cx)!important;color:var(--cy)!important}&:active{background:var(--cn)!important;border-color:var(--co)!important;color:var(--cp)!important}}label.pendo-radio[class*=_pendo-number-scale-poll-]+[class$=-description],.pendo-survey-wrapper>:not([id*=survey-single-choice]) label+div{width:var(--da)!important;margin:var(--pendo-space-0)!important;font-weight:var(--ek)!important;line-height:var(--jf)!important;font-size:var(--ej)!important;color:var(--hs)!important}[class*=-wrapper]:last-child,.pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(>span)>span:last-child{position:relative!important}[class*=-wrapper]:last-child>[class$=-description],.pendo-survey-wrapper div:not([id*=survey-single-choice]):has(>span):last-child>span:last-child>div{text-align:right!important;width:auto!important;position:absolute!important;right:0!important}._pendo-nps-poll-lowerbound-label,._pendo-nps-poll-upperbound-label{margin:var(--pendo-space-0)!important}input.pendo-radio:focus-visible+label.pendo-radio[class*=_pendo-number-scale-poll-],input.pendo-radio:focus-visible+label.pendo-radio[class*=_pendo-nps-poll-],.pendo-survey-wrapper>:not([id*=survey-single-choice]) input.pendo-radio:focus-visible+label.pendo-radio,.pendo-survey-wrapper>:not([id*=survey-single-choice]) input[type=radio]:focus-visible+label{outline-color:light-dark(var(--hx),var(--hz))!important;outline-offset:var(--id)!important}input.pendo-radio:checked+label.pendo-radio[class*=_pendo-number-scale-poll-],input.pendo-radio:checked+label.pendo-radio[class*=_pendo-nps-poll-],.pendo-survey-wrapper>:not([id*=survey-single-choice]) input.pendo-radio:checked+label.pendo-radio,.pendo-survey-wrapper>:not([id*=survey-single-choice]) input[type=radio]:checked+label{background:var(--cc)!important;border-color:var(--cd)!important;color:var(--ce)!important;&:hover{background:var(--ck)!important;border-color:var(--cl)!important;color:var(--cm)!important}&:active{background:var(--bz)!important;border-color:var(--ca)!important;color:var(--cb)!important}}[class$=-poll-question]+._pendo-row [class$=-description]{padding-top:var(--gb)!important;color:var(--hs)!important}}@layer instui.vars;@layer instui.focusOutline{[class*=instui]{--hx:var(--fq);--ia:transparent;--ih:var(--fu);--id:var(--fr);--ie:var(--c);--if:solid;--ig:outline-color .2s, outline-offset .25s;--ib:var(--ft);--hy:var(--fp);--hz:var(--fs);--ic:0rem}:where(._pendo-button,._pendo-close-guide,._pendo-text-link,select._pendo-multi-choice-poll-select,._pendo-open-text-poll-input,input.pendo-radio){outline:var(--ih) var(--if) var(--ia)!important;outline-offset:0!important;transition:var(--ig)!important}:where(._pendo-button,._pendo-close-guide,._pendo-text-link,select._pendo-multi-choice-poll-select,._pendo-open-text-poll-input,input.pendo-radio):where(:focus-visible){outline-color:var(--hx)!important;outline-offset:var(--id)!important;border-radius:var(--ie)!important}:where(.-focus-color-success):where(:focus-visible){outline-color:var(--ib)!important}:where(.-focus-color-danger):where(:focus-visible){outline-color:var(--hy)!important}:where(.-focus-color-inverse):where(:focus-visible){outline-color:var(--hz)!important}:where(.-focus-position-inset):where(:focus-visible){outline-offset:var(--ic)!important}:where(.-focus-within):where(:focus-within){outline-color:var(--hx)!important;outline-offset:var(--id)!important;border-radius:var(--ie)!important}:where(.-without-focus-animation){transition:none!important}}}
package/dist/index.d.mts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Plugin } from "postcss";
2
+ import { FlattenPropertyOptions, MangleCustomPropsOptions } from "@pantoken/plugin-props-minify";
2
3
  import { Theme } from "@pantoken/model";
3
4
  //#region src/build.d.ts
4
5
  /** Options for {@link buildPendoCss}. */
@@ -13,6 +14,19 @@ interface BuildPendoCssOptions {
13
14
  important?: boolean;
14
15
  /** Tree-shake unused `--instui-*` tokens (default `true`; off ships the full token set). */
15
16
  prune?: boolean;
17
+ /**
18
+ * Convert `@property` at-rules to plain custom-property declarations via
19
+ * {@link flattenProperty} (default `false`). `true` uses plugin defaults with
20
+ * `injectSelector: ":scope"` so the declarations land inside the `@scope` block.
21
+ * Pass a {@link FlattenPropertyOptions} object to override individual defaults.
22
+ */
23
+ flatten?: boolean | FlattenPropertyOptions;
24
+ /**
25
+ * Mangle `--instui-*` names to minimal base-26 identifiers via {@link mangleCustomProps}
26
+ * (default `false`). Safe here because the full token + component stylesheet is a
27
+ * self-contained bundle. Pass a {@link MangleCustomPropsOptions} object to override defaults.
28
+ */
29
+ mangle?: boolean | MangleCustomPropsOptions;
16
30
  }
17
31
  /**
18
32
  * Build the Pendo guide stylesheet.
@@ -82,16 +96,16 @@ declare const addScope: {
82
96
  //#endregion
83
97
  //#region src/layers.d.ts
84
98
  /**
85
- * Cascade order (lowest → highest), from the source `layers.css`. Layered `!important` beats Pendo's
99
+ * Cascade order (lowest → highest). Layered `!important` beats Pendo's
86
100
  * own unlayered `!important`, so guide styles stay on top.
87
101
  */
88
- declare const LAYER_ORDER: readonly ["tokens", "elevation", "icons", "popover", "alert", "text", "closeButton", "img", "inputs", "button", "pagination", "mask", "view", "card", "manual", "focusOutline"];
102
+ declare const LAYER_ORDER: readonly ["tokens", "elevation", "container", "card", "text", "chrome", "button", "inputs", "vars", "focusOutline"];
89
103
  /** A component's authored CSS and the cascade layer it belongs in. */
90
104
  interface ComponentLayer {
91
105
  layer: (typeof LAYER_ORDER)[number];
92
106
  css: string;
93
107
  }
94
- /** The component CSS in cascade order (the `tokens` and `manual` layers are handled separately). */
108
+ /** The component CSS in cascade order (the `tokens` and `vars` layers are handled separately). */
95
109
  declare const COMPONENTS: readonly ComponentLayer[];
96
110
  //#endregion
97
111
  //#region src/index.d.ts
package/dist/index.mjs CHANGED
@@ -2,111 +2,74 @@ import postcss from "postcss";
2
2
  import { toCss } from "@pantoken/css";
3
3
  import { elevationCss, focusOutlineDeclarations, focusOutlineRules } from "@pantoken/components";
4
4
  import { byTheme } from "@pantoken/tokens";
5
- import { pruneCustomProps } from "@pantoken/plugin-prune-custom-props";
5
+ import { flattenProperty, mangleCustomProps, pruneCustomProps } from "@pantoken/plugin-props-minify";
6
6
  //#region generated/embedded.ts
7
- const alertCss = "/* Alert container (Embedded guides) */\n\n[class*=\"instui\"][data-layout=\"lightboxBlank\"] {\n /* Variant tokens — set on the container, inherited by all children */\n &,\n &[class*=\"instui-info\"] {\n --_alert-color: var(--instui-component-alert-info-border-color);\n --_alert-icon: var(--instui-icon-info);\n }\n\n &[class*=\"instui-danger\"] {\n --_alert-color: var(--instui-component-alert-danger-border-color);\n --_alert-icon: var(--instui-icon-circle-x);\n }\n\n &[class*=\"instui-success\"] {\n --_alert-color: var(--instui-component-alert-success-border-color);\n --_alert-icon: var(--instui-icon-circle-check);\n }\n\n &[class*=\"instui-warning\"] {\n --_alert-color: var(--instui-component-alert-warning-border-color);\n --_alert-icon: var(--instui-icon-triangle-alert);\n }\n\n &,\n ._pendo-step-container-size {\n margin-right: var(--instui-spacing-space2xs);\n margin-left: var(--instui-spacing-space2xs);\n max-width: var(--manual-light-pendo-embedded-pendo-step-container-styles-width);\n }\n\n ._pendo-step-container-size {\n /* Stack above the fixed backdrop (z-index: 200000) the same way the overlay guide does */\n z-index: 300000;\n /* prevent margin collapse from sibling content to preserve drop shadow */\n padding-bottom: calc(var(--instui-spacing-space-md));\n padding-top: var(--instui-spacing-space-sm);\n }\n\n ._pendo-step-container-styles {\n height: auto;\n border-color: var(--_alert-color);\n border-width: var(--instui-component-alert-border-width);\n border-style: var(--instui-component-alert-border-style);\n border-radius: var(--instui-component-alert-border-radius);\n overflow: hidden;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal)\n var(--instui-component-alert-content-padding-vertical)\n calc(\n var(--manual-light-new-theme-components-alert-padding-left) +\n var(--instui-component-alert-content-padding-horizontal)\n );\n box-shadow: var(--instui-elevation-above);\n position: relative;\n /* gap-cards-md + box-shadow y + box-shadow spread */\n margin-bottom: var(--instui-spacing-space-md);\n margin-left: var(--instui-spacing-space-lg);\n margin-right: var(--instui-spacing-space-lg);\n margin-top: var(--instui-spacing-space-xs);\n\n /* Colored sidebar strip — clipped to border-radius by overflow: hidden */\n &::before {\n content: \"\";\n display: block;\n position: absolute;\n overflow: hidden;\n inset-block: 0;\n left: 0;\n width: var(--manual-light-new-theme-components-alert-padding-left);\n background-color: var(--_alert-color);\n }\n\n /* Icon centered in the sidebar strip */\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: calc(\n (var(--manual-light-new-theme-components-alert-padding-left) -\n var(--instui-component-icon-size-md)) /\n 2\n );\n width: var(--instui-component-icon-size-md);\n height: var(--instui-component-icon-size-md);\n mask-image: var(--_alert-icon);\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: var(--instui-component-alert-icon-color);\n }\n }\n}\n";
8
- const buttonCss = "/* Shared button base styles */\n[class*=\"instui\"] {\n ._pendo-button {\n height: var(--instui-component-base-button-small-height);\n min-height: var(--instui-component-base-button-small-height);\n padding: var(--instui-component-base-button-padding-vertical)\n var(--instui-component-base-button-small-padding-horizontal);\n border-width: var(--instui-component-base-button-border-width);\n border-radius: var(--instui-component-base-button-border-radius);\n border-style: var(--instui-component-base-button-border-style);\n font-family: var(--instui-component-base-button-font-family);\n font-size: var(--instui-component-base-button-small-font-size);\n font-weight: var(--instui-component-base-button-font-weight);\n line-height: var(--instui-component-base-button-line-height);\n letter-spacing: var(--instui-component-base-button-letter-spacing);\n cursor: pointer;\n margin: var(--instui-component-shared-tokens-spacing-general-space-none)\n var(--instui-component-base-button-gap-button-content-md)\n var(--instui-component-shared-tokens-spacing-general-space-none)\n var(--instui-component-shared-tokens-spacing-general-space-none);\n\n .pendo-mock-flexbox-element:last-child > & {\n margin-right: var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n }\n\n /* Primary/Custom button variant */\n ._pendo-button-primaryButton,\n ._pendo-button-custom {\n background: var(--instui-component-base-button-primary-background);\n border-color: var(--instui-component-base-button-primary-border-color);\n color: var(--instui-component-base-button-primary-color);\n\n &:hover {\n background: var(--instui-component-base-button-primary-hover-background);\n border-color: var(--instui-component-base-button-primary-hover-border-color);\n color: var(--instui-component-base-button-primary-hover-text-color);\n }\n\n &:active {\n background: var(--instui-component-base-button-primary-active-background);\n border-color: var(--instui-component-base-button-primary-active-border-color);\n color: var(--instui-component-base-button-primary-active-text-color);\n }\n\n &:disabled {\n background: var(--instui-component-base-button-primary-disabled-background-color);\n border-color: var(--instui-component-base-button-primary-disabled-border-color);\n color: var(--instui-component-base-button-primary-disabled-text-color);\n cursor: not-allowed;\n }\n }\n\n /* Secondary button variant */\n ._pendo-button-secondaryButton {\n background: var(--instui-component-base-button-secondary-background);\n border-color: var(--instui-component-base-button-secondary-border-color);\n color: var(--instui-component-base-button-secondary-color);\n\n &:hover {\n background: var(--instui-component-base-button-secondary-hover-background);\n border-color: var(--instui-component-base-button-secondary-hover-border-color);\n color: var(--instui-component-base-button-secondary-hover-text-color);\n }\n\n &:active {\n background: var(--instui-component-base-button-secondary-active-background);\n border-color: var(--instui-component-base-button-secondary-active-border-color);\n color: var(--instui-component-base-button-secondary-active-text-color);\n }\n\n &:disabled {\n background: var(--instui-component-base-button-secondary-disabled-background-color);\n border-color: var(--instui-component-base-button-secondary-disabled-border-color);\n color: var(--instui-component-base-button-secondary-disabled-text-color);\n cursor: not-allowed;\n }\n }\n\n /* Tertiary button variant */\n ._pendo-button-tertiaryButton {\n background: transparent;\n border-color: var(--instui-color-stroke-interactive-action-tertiary-base);\n color: var(--instui-color-text-interactive-action-tertiary-base);\n\n &:hover {\n background: var(--instui-color-background-interactive-action-tertiary-hover);\n border-color: var(--instui-component-base-button-tertiary-hover-border-color);\n color: var(--instui-component-base-button-tertiary-hover-text-color);\n }\n\n &:active {\n background: var(--instui-color-background-interactive-action-tertiary-active);\n border-color: var(--instui-component-base-button-tertiary-active-border-color);\n color: var(--instui-component-base-button-tertiary-active-text-color);\n }\n\n &:disabled {\n background: transparent;\n border-color: var(--instui-component-base-button-tertiary-disabled-border-color);\n color: var(--instui-component-base-button-tertiary-disabled-text-color);\n cursor: not-allowed;\n }\n }\n\n /* Surveys: Submit / Finish buttons */\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n /* Submit / Finish buttons: Center only if they're the only button in the container */\n div:has(> ._pendo-button-primaryButton):not(:has(> :not(._pendo-button-primaryButton))) {\n display: flex;\n justify-content: center;\n }\n }\n}\n";
9
- const cardCss = "[class*=\"instui\"] {\n /* ─── Row spacing ─── */\n\n /* Row spacing in Popover layout */\n ._pendo-row {\n margin-top: var(--instui-component-shared-tokens-spacing-general-space-none);\n margin-right: var(--instui-component-shared-tokens-spacing-general-space-none);\n margin-bottom: var(--instui-component-shared-tokens-spacing-general-space-sm);\n margin-left: var(--instui-component-shared-tokens-spacing-general-space-none);\n line-height: var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n\n /* Row spacing in Alert layout */\n &[data-layout=\"lightboxBlank\"] ._pendo-row {\n margin-top: var(--instui-component-shared-tokens-spacing-general-space-none);\n margin-right: var(--instui-component-shared-tokens-spacing-general-space-none);\n margin-bottom: var(--instui-component-shared-tokens-spacing-gap-cards-sm);\n margin-left: var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n\n /* Close button spacing in Popover layout */\n [id*=\"guide-components\"] > :first-child ._pendo-row {\n margin-right: calc(\n var(--instui-component-base-button-gap-button-content-sm) +\n var(--instui-component-base-button-small-height)\n );\n }\n\n /* Close button spacing in Alert layout */\n &[data-layout=\"lightboxBlank\"] [id*=\"guide-components\"] > :first-child ._pendo-row {\n margin-right: calc(\n var(--instui-component-base-button-gap-button-content-sm) +\n var(--instui-component-base-button-small-height) / 2\n );\n }\n\n /* @TODO: Close button spacing in surveys */\n\n /* Content spacing */\n .pendo-block-wrapper {\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n\n ._pendo-text-paragraph._pendo-multi-choice-poll-question\n + ._pendo-row\n .pendo-mock-flexbox-element,\n ._pendo-multi-choice-poll-select-border,\n ._pendo-multi-choice-poll-select {\n width: 100%;\n }\n\n /* Flexbox\n * Pendo simulates flexbox with position:absolute on children, which collapses\n * the row height. Replace it with real flexbox derived from the\n * data-pendo-justify-content attribute so the row sizes to its content.\n */\n [data-pendo-justify-content] .pendo-mock-flexbox-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n min-height: 0;\n }\n\n [data-pendo-justify-content=\"flex-start\"] .pendo-mock-flexbox-row {\n justify-content: flex-start;\n }\n\n [data-pendo-justify-content=\"center\"] .pendo-mock-flexbox-row {\n justify-content: center;\n }\n\n [data-pendo-justify-content=\"flex-end\"] .pendo-mock-flexbox-row {\n justify-content: flex-end;\n }\n\n [data-pendo-justify-content=\"space-between\"] .pendo-mock-flexbox-row {\n justify-content: space-between;\n }\n\n /* Reset the absolute positioning Pendo inlines on each child element */\n [data-pendo-justify-content] .pendo-mock-flexbox-row .pendo-mock-flexbox-element {\n position: static;\n }\n\n /* Card container */\n ._pendo-step-container-styles {\n background-color: var(--instui-component-view-background-primary);\n color: var(--instui-component-view-color);\n transition: var(--instui-focus-outline-transition);\n\n &:focus-visible {\n outline: none;\n }\n\n &:focus {\n outline-color: var(--instui-focus-outline-color-start);\n outline-width: var(--instui-component-shared-tokens-focus-outline-width);\n outline-style: var(--instui-component-shared-tokens-focus-outline-style);\n outline-offset: var(--instui-component-shared-tokens-focus-outline-offset);\n outline-color: light-dark(\n var(--instui-component-shared-tokens-focus-outline-info-color),\n var(--instui-component-shared-tokens-focus-outline-on-color)\n );\n }\n }\n\n /* Surveys */\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n /* Some surveys don't use `._pendo-row` for spacing, so add margin to direct children that aren't rows. */\n ._pendo-step-container-styles > :is(div, form, textarea, h2):not(._pendo-row) {\n margin: var(--instui-component-shared-tokens-spacing-general-space-none) auto\n var(--instui-component-shared-tokens-spacing-general-space-sm) auto;\n width: 100%;\n max-width: var(--manual-light-pendo-embedded-pendo-step-container-styles-width);\n }\n\n ._pendo-step-container-styles > ._pendo-row {\n max-width: var(--manual-light-pendo-embedded-pendo-step-container-styles-width);\n margin-left: auto;\n margin-right: auto;\n }\n }\n}\n";
10
- const closeButtonCss = "[class*=\"instui\"] {\n ._pendo-close-guide {\n padding-bottom: var(--instui-component-shared-tokens-spacing-general-space-xs);\n height: var(--instui-component-base-button-small-height);\n aspect-ratio: 1;\n border-radius: var(--instui-component-base-button-border-radius);\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center;\n border-width: var(--instui-component-shared-tokens-spacing-general-space-none);\n background-size: var(--instui-component-icon-size-sm);\n position: absolute;\n inset-inline: auto var(--instui-component-shared-tokens-spacing-general-space-xs);\n inset-block-start: var(--instui-component-shared-tokens-spacing-general-space-xs);\n font-size: var(--instui-font-size-text-lg);\n font-family: var(--instui-component-base-button-font-family);\n font-weight: var(--instui-primitive-font-weight-medium);\n color: var(--instui-component-text-base-color);\n\n background-color: transparent;\n\n &:hover {\n background-color: var(--instui-component-base-button-primary-ghost-hover-background);\n }\n\n &:active {\n background-color: var(--instui-component-base-button-primary-ghost-active-background);\n }\n }\n\n &[data-layout=\"lightboxBlank\"] ._pendo-close-guide {\n inset-block-start: var(--instui-component-alert-close-button-margin-top);\n inset-inline-end: var(--instui-component-alert-close-button-margin-right);\n }\n}\n";
11
- const imgCss = "[class*=\"instui\"] {\n ._pendo-image {\n max-width: 100%;\n height: auto;\n }\n}\n";
12
- const manualCss = "[class*=\"instui\"] {\n /* Focus outline is provided by @pantoken/components (the instui.focusOutline layer). */\n\n /* Components: Alert */\n --manual-light-pendo-embedded-pendo-step-container-styles-width: 59.25rem;\n --manual-light-new-theme-components-alert-padding-left: 2.5rem;\n\n /* Components: Popover */\n --manual-light-pendo-overlay-pendo-step-container-styles-width: 22.5rem;\n\n /* Components: TextArea */\n --instui-component-text-area-min-height: 4rem;\n --instui-component-text-area-max-height: 6rem;\n --instui-component-text-area-max-width: 20rem;\n\n /* Components; SVGIcon */\n --manual-icon-instui-line-parchment-logo: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTMuMDEgMTkyLjYiIGZpbGw9ImN1cnJlbnRDb2xvciI+PHBhdGggZD0iTTIyNi4zMiAxNTQuNDhjMCA3LjM2LTUuOTcgMTMuMzYtMTMuMzYgMTMuMzZIMzguMTJjLTcuMzYgMC0xMy4zNi01Ljk3LTEzLjM2LTEzLjM2VjQwLjAxYzAtNy4zNiA1Ljk3LTEzLjM2IDEzLjM2LTEzLjM2aDEyNy42MVYxLjg5SDMzLjA1QzE0Ljc5IDEuODkgMCAxNi42OCAwIDM0Ljl2MTI0LjY1YzAgMTguMjYgMTQuNzkgMzMuMDUgMzMuMDUgMzMuMDVoMTg1LjA2YzE4LjI2IDAgMzMuMDUtMTQuNzkgMzMuMDUtMzMuMDV2LTcyLjMxaC0yNC43NnY2Ny4ybC0uMDcuMDRaIi8+PHBhdGggZD0iTTIzOC43MiAyOC41OGM3LjkgMCAxNC4yOS02LjM5IDE0LjI5LTE0LjI5UzI0Ni42MiAwIDIzOC43MiAwcz0xNC4yOSA2LjM5LTE0LjI5IDE0LjI5IDYuMzkgMTQuMjkgMTQuMjkgMTQuMjlaIi8+PHBhdGggZD0iTTE5Ni42NCAyOC41OGM3LjkgMCAxNC4yOS02LjM5IDE0LjI5LTE0LjI5UzIwNC41NCAwIDE5Ni42NCAwcz0xNC4yOSA2LjM5LTE0LjI5IDE0LjI5IDYuMzkgMTQuMjkgMTQuMjkgMTQuMjlaIi8+PHBhdGggZD0iTTIzOC43MiA0Mi4wOWMtNy45IDAtMTQuMjkgNi4zOS0xNC4yOSAxNC4yOXM2LjM5IDE0LjI5IDE0LjI5IDE0LjI5IDE0LjI5LTYuMzkgMTQuMjktMTQuMjktNi4zOS0xNC4yOS0xNC4yOS0xNC4yOVoiLz48Y2lyY2xlIGN4PSI3NC42IiBjeT0iMTE4LjE4IiByPSIyOS42MiIvPjwvc3ZnPg==\");\n --manual-icon-instui-line-learn-platform-logo: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NjQgMTU1Ij48ZGVmcz48cmFkaWFsR3JhZGllbnQgaWQ9ImEiIGN4PSItNjAwNS44OCIgY3k9IjI2NDYuMjEiIHI9IjEuMzMiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTg3MzQxLjMyIDY1NTQ4OC42MSkgcm90YXRlKDEyMS40KSBzY2FsZSgxMDAuNzYgMTAwLjgxKSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9ImN1cnJlbnRDb2xvciIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iY3VycmVudENvbG9yIiBzdG9wLW9wYWNpdHk9Ii41Ii8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTMyMC4yNCAxMzEuMjdjLTIzLjI1IDE3LjE3LTU0Ljk0IDE3LjMzLTc4LjM3LjQxbDMuNDItNC43MmMtMjEuNTYtMTUuNDUtMzAuNjYtNDMuMDQtMjIuNTItNjguMjdsNS41NSAxLjA1YzcuNjUtMjIuNiAyOC45LTM3Ljc3IDUyLjc4LTM3LjY5VjBjLTMzLjYuMDQtNjMuMzUgMjEuNjktNzMuNyA1My42My0xMC4zNSAzMS45NCAxLjA2IDY2LjkxIDI4LjI2IDg2LjYxIDI3LjIgMTkuNzEgNjQgMTkuNjcgOTEuMTctLjA4IDI3LjE2LTE5Ljc2IDM4LjUxLTU0Ljc0IDI4LjEtODYuNjZsLTUuMTEgMS42NmM5Ljg5IDI5LjgtLjYxIDYyLjU2LTI1Ljk5IDgxLjA3Ii8+PC9zdmc+\");\n}\n";
13
- const maskCss = "[class*=\"instui\"] {\n ._pendo-backdrop {\n background-color: var(--instui-component-mask-background-color);\n }\n}\n";
14
- const paginationCss = "/*\n * Pendo Number Scale Poll is an HTML radio input with labels styled like buttons,\n * so we implement it like a Pagination component with colors set to\n * secondary / tertiary instead of primary / secondary.\n */\n\n[class*=\"instui\"] {\n ._pendo-number-scale-poll-wrapper {\n padding: var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n\n .pendo-survey-wrapper > div:has(input[type=\"radio\"]),\n ._pendo-nps-poll-wrapper,\n [id*=\"survey-pmf-answers\"],\n [id*=\"survey-single-choice\"] {\n padding: var(--instui-component-shared-tokens-spacing-general-space-none)\n var(--instui-component-shared-tokens-spacing-general-space-none)\n var(--instui-component-shared-tokens-spacing-general-space-lg);\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n\n ._pendo-number-scale-poll-wrapper > div[role*=\"radiogroup\"],\n ._pendo-nps-poll-wrapper > div[role*=\"radiogroup\"],\n .pendo-survey-wrapper > div:not([id*=\"survey-single-choice\"]):has(input[type=\"radio\"]) {\n gap: var(--instui-component-shared-tokens-spacing-general-space-md);\n display: flex;\n flex-direction: row;\n width: fit-content;\n }\n\n /*\n * UX-Lite (and similar) surveys emit radio inputs without id/for linkage\n * between input and label. Expand the hidden input to cover its container\n * so clicking the visible label area actually activates the radio.\n */\n .pendo-survey-wrapper > div:not([id*=\"survey-single-choice\"]):has(input[type=\"radio\"]) > span {\n position: relative;\n }\n\n .pendo-survey-wrapper\n > div:not([id*=\"survey-single-choice\"]):has(input[type=\"radio\"])\n > span\n > input[type=\"radio\"] {\n inset: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n }\n\n ._pendo-nps-poll-wrapper > div[role*=\"radiogroup\"] {\n align-items: center;\n justify-content: center;\n margin: 0 auto;\n }\n\n label.pendo-radio[class*=\"_pendo-number-scale-poll-\"],\n label.pendo-radio[class*=\"_pendo-nps-poll-\"],\n .pendo-survey-wrapper > :not([id*=\"survey-single-choice\"]) label {\n height: var(--instui-component-base-button-small-height);\n min-height: var(--instui-component-base-button-small-height);\n width: var(--instui-component-base-button-small-height);\n aspect-ratio: 1 / 1;\n border-width: var(--instui-component-base-button-border-width);\n border-radius: var(--instui-component-base-button-border-radius);\n border-style: var(--instui-component-base-button-border-style);\n font-size: var(--instui-component-base-button-small-font-size);\n /* Line height is set to the button height to center the text vertically, and because the text will always be one line. */\n line-height: var(--instui-component-base-button-small-height);\n letter-spacing: var(--instui-component-base-button-letter-spacing);\n font-family: var(--instui-component-base-button-font-family);\n font-weight: var(--instui-component-base-button-font-weight);\n text-align: center;\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n background: var(--instui-component-base-button-secondary-background);\n border-color: var(--instui-component-base-button-secondary-border-color);\n color: var(--instui-component-base-button-secondary-color);\n transition: var(--instui-focus-outline-transition);\n\n &:hover {\n background: var(--instui-component-base-button-secondary-hover-background);\n border-color: var(--instui-component-base-button-secondary-hover-border-color);\n color: var(--instui-component-base-button-secondary-hover-text-color);\n }\n\n &:active {\n background: var(--instui-component-base-button-secondary-active-background);\n border-color: var(--instui-component-base-button-secondary-active-border-color);\n color: var(--instui-component-base-button-secondary-active-text-color);\n }\n }\n\n /* Number scale description */\n label.pendo-radio[class*=\"_pendo-number-scale-poll-\"] + [class$=\"-description\"],\n .pendo-survey-wrapper > :not([id*=\"survey-single-choice\"]) label + div {\n width: var(--instui-component-base-button-small-height);\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n font-weight: var(--instui-component-metric-label-font-weight);\n line-height: var(--instui-line-height-standalone-text-xs);\n font-size: var(--instui-component-metric-label-font-size);\n color: var(--instui-component-text-muted-color);\n }\n\n /* Right-align the last description so it anchors to the last button's right edge */\n [class*=\"-wrapper\"]:last-child,\n .pendo-survey-wrapper > div:not([id*=\"survey-single-choice\"]):has(> span) > span:last-child {\n position: relative;\n }\n\n [class*=\"-wrapper\"]:last-child > [class$=\"-description\"],\n .pendo-survey-wrapper\n div:not([id*=\"survey-single-choice\"]):has(> span):last-child\n > span:last-child\n > div {\n position: absolute;\n width: auto;\n text-align: right;\n right: 0;\n }\n\n /* NPS label sits left/right of scale, not below */\n ._pendo-nps-poll-lowerbound-label,\n ._pendo-nps-poll-upperbound-label {\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n\n input.pendo-radio:focus + label.pendo-radio[class*=\"_pendo-number-scale-poll-\"],\n input.pendo-radio:focus + label.pendo-radio[class*=\"_pendo-nps-poll-\"],\n .pendo-survey-wrapper\n > :not([id*=\"survey-single-choice\"])\n input.pendo-radio:focus\n + label.pendo-radio,\n .pendo-survey-wrapper > :not([id*=\"survey-single-choice\"]) input[type=\"radio\"]:focus + label {\n outline-color: var(--instui-focus-outline-color-start);\n outline-width: var(--instui-component-shared-tokens-focus-outline-width);\n outline-style: var(--instui-component-shared-tokens-focus-outline-style);\n outline-offset: var(--instui-component-shared-tokens-focus-outline-offset);\n outline-color: light-dark(\n var(--instui-component-shared-tokens-focus-outline-info-color),\n var(--instui-component-shared-tokens-focus-outline-on-color)\n );\n }\n\n input.pendo-radio:checked + label.pendo-radio[class*=\"_pendo-number-scale-poll-\"],\n input.pendo-radio:checked + label.pendo-radio[class*=\"_pendo-nps-poll-\"],\n .pendo-survey-wrapper\n > :not([id*=\"survey-single-choice\"])\n input.pendo-radio:checked\n + label.pendo-radio,\n .pendo-survey-wrapper > :not([id*=\"survey-single-choice\"]) input[type=\"radio\"]:checked + label {\n background: var(--instui-component-base-button-primary-background);\n border-color: var(--instui-component-base-button-primary-border-color);\n color: var(--instui-component-base-button-primary-color);\n\n &:hover {\n background: var(--instui-component-base-button-primary-hover-background);\n border-color: var(--instui-component-base-button-primary-hover-border-color);\n color: var(--instui-component-base-button-primary-hover-text-color);\n }\n\n &:active {\n background: var(--instui-component-base-button-primary-active-background);\n border-color: var(--instui-component-base-button-primary-active-border-color);\n color: var(--instui-component-base-button-primary-active-text-color);\n }\n }\n\n [class$=\"-poll-question\"] + ._pendo-row [class$=\"-description\"] {\n padding-top: var(--instui-component-shared-tokens-spacing-general-space-xs);\n color: var(--instui-component-text-muted-color);\n }\n}\n";
15
- const popoverCss = "/* Popover container (Overlay guides + surveys) */\n[class*=\"instui\"]:is([data-layout=\"tooltipBlank\"], ._pendo-guide-walkthrough_) {\n ._pendo-step-container-size {\n height: auto;\n }\n\n ._pendo-step-container-styles {\n min-height: 2.75rem;\n /* @TODO: overflow-y causes scrollbar to break border-radius */\n /* 2x border radius + 2x caret size */\n border-radius: var(--instui-component-popover-border-radius);\n border-color: var(--instui-component-popover-border-color);\n box-shadow: var(--instui-elevation-above);\n /* gap-cards-md + box-shadow y + box-shadow spread */\n margin-bottom: calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md));\n margin-left: var(--instui-component-shared-tokens-spacing-general-space-md);\n margin-right: var(--instui-component-shared-tokens-spacing-general-space-md);\n margin-top: var(--instui-component-shared-tokens-spacing-general-space-xs);\n }\n\n .pendo-tooltip-caret {\n --caret-color: var(--instui-component-view-background-primary);\n\n /* Pendo positions carets against _pendo-step-container-size, but our box\n * carries margins (for box-shadow room + spacing), so the caret lands at the\n * margin edge instead of touching the box. Pull each caret back toward the\n * box by its margin so it sits flush (1px overlap under the border). The\n * build adds !important, which overrides Pendo's dynamic inline offsets. */\n &.pendo-tooltip-caret--top {\n border-top-color: var(--caret-color);\n /* sits below the box: shift up by margin-bottom */\n bottom: calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md) - 15px);\n\n & + .pendo-tooltip-caret-border {\n bottom: calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md) - 16px);\n }\n }\n\n &.pendo-tooltip-caret--right {\n border-right-color: var(--caret-color);\n left: -3px;\n\n & + .pendo-tooltip-caret-border {\n left: -4px;\n }\n }\n\n &.pendo-tooltip-caret--bottom {\n border-bottom-color: var(--caret-color);\n /* sits above the box: shift down by margin-top */\n top: calc(var(--instui-component-shared-tokens-spacing-general-space-xs) - 15px);\n\n & + .pendo-tooltip-caret-border {\n top: calc(var(--instui-component-shared-tokens-spacing-general-space-xs) - 16px);\n }\n }\n\n &.pendo-tooltip-caret--left {\n border-left-color: var(--caret-color);\n right: -3px;\n\n & + .pendo-tooltip-caret-border {\n right: -4px;\n }\n }\n }\n\n /* Overlay Guides */\n &[data-layout=\"tooltipBlank\"] {\n ._pendo-step-container-styles {\n width: var(--manual-light-pendo-overlay-pendo-step-container-styles-width);\n padding: var(--instui-component-shared-tokens-spacing-padding-card-sm)\n var(--instui-component-shared-tokens-spacing-padding-card-sm)\n var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n }\n\n /* Surveys */\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n ._pendo-step-container-styles {\n width: auto;\n padding: var(--instui-component-shared-tokens-spacing-padding-card-lg)\n var(--instui-component-shared-tokens-spacing-padding-card-lg)\n var(--instui-component-shared-tokens-spacing-general-space-sm);\n /* Cuts off box-shadow, but Surveys are anchored to bottom of viewport */\n margin-bottom: var(--instui-component-shared-tokens-spacing-general-space-md);\n }\n\n &:not(:has(._pendo-row)) {\n ._pendo-step-container-styles {\n padding-bottom: var(--instui-component-shared-tokens-spacing-padding-card-sm);\n }\n }\n }\n}\n";
16
- const radioGroupCss = "[class*=\"instui\"] {\n /* Radio label */\n ._pendo-multi-choice-poll-select-border label.pendo-radio,\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"])\n :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"])\n label.pendo-radio {\n font-family: var(--instui-component-radio-input-font-family);\n font-weight: var(--instui-component-radio-input-font-weight);\n font-size: var(--instui-component-radio-input-font-size-sm);\n line-height: var(--instui-component-radio-input-line-height-sm);\n letter-spacing: normal;\n font-style: normal;\n /* @TODO: --instui-component-radio-input-control-size-sm should not scale, remove override. */\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n background-color: var(--instui-color-transparent-color);\n color: var(--instui-component-radio-input-label-base-color);\n\n &:hover {\n color: var(--instui-component-radio-input-label-hover-color);\n }\n }\n\n /* Radio input */\n ._pendo-multi-choice-poll-select-border input.pendo-radio,\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"])\n :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"])\n input.pendo-radio {\n /* @TODO: --instui-component-radio-input-control-size-sm should not scale, remove override. */\n width: var(--instui-component-shared-tokens-spacing-general-space-lg);\n height: var(--instui-component-shared-tokens-spacing-general-space-lg);\n border-radius: var(--instui-component-shared-tokens-border-radius-full);\n border-width: var(--instui-component-radio-input-border-width);\n border-style: solid;\n margin: var(--instui-component-shared-tokens-spacing-general-space2xs)\n var(--instui-component-radio-input-gap)\n var(--instui-component-shared-tokens-spacing-general-space-none)\n var(--instui-component-shared-tokens-spacing-general-space-none);\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n border-color: var(--instui-component-radio-input-border-color);\n background-color: var(--instui-component-radio-input-background-color);\n transition: var(--instui-focus-outline-transition);\n\n &:hover {\n background-color: var(--instui-component-radio-input-background-hover-color);\n border-color: var(--instui-component-radio-input-border-readonly-color);\n }\n\n &:checked {\n /* @TODO: --instui-component-radio-input-control-size-sm should not scale, remove override. */\n box-shadow: var(--instui-component-radio-input-border-selected-color) inset 0 0 0\n calc(var(--instui-component-radio-input-checked-inset-sm) / 2);\n border-color: var(--instui-component-radio-input-border-selected-color);\n\n + label {\n background: var(--instui-color-transparent-color);\n color: var(--instui-component-radio-input-label-base-color);\n }\n }\n\n &:focus {\n outline-color: var(--instui-focus-outline-color-start);\n outline-width: var(--instui-component-shared-tokens-focus-outline-width);\n outline-style: var(--instui-component-shared-tokens-focus-outline-style);\n outline-offset: var(--instui-component-shared-tokens-focus-outline-offset);\n outline-color: var(--instui-component-shared-tokens-focus-outline-info-color);\n\n + label {\n outline: none;\n }\n }\n }\n\n /* Form field label */\n [class$=\"-poll-question\"] > ._pendo-simple-text > ._pendo-text-plain {\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n letter-spacing: normal;\n font-style: normal;\n margin: var(--instui-component-form-field-layout-gap-primitives)\n var(--instui-component-shared-tokens-spacing-general-space-none);\n color: var(--instui-component-form-field-layout-text-color);\n }\n\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"]) {\n display: flex;\n flex-direction: column;\n }\n\n /* PMF survey inputs are inline-block by default, override to stack vertically. */\n :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"]) span:has(.pendo-radio) {\n display: flex;\n flex-direction: row;\n justify-content: start;\n align-items: center;\n text-align: left;\n }\n }\n}\n";
17
- const selectCss = "[class*=\"instui\"] {\n ._pendo-multi-choice-poll-select-border[id^=\"pendo-select-container-\"]:has(> select) {\n border: 0 none;\n background: none;\n padding: var(--instui-component-shared-tokens-spacing-general-space-none);\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n position: relative;\n\n /* Chevron icon — mask-image approach for automatic light/dark theming */\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n right: var(--instui-component-text-input-padding-horizontal-sm);\n top: var(--instui-component-shared-tokens-spacing-general-space-lg);\n transform: translateY(-50%);\n width: var(--instui-component-icon-size-sm);\n height: var(--instui-component-icon-size-sm);\n mask-image: var(--instui-icon-chevron-down);\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n pointer-events: none;\n background-color: var(--instui-component-text-input-text-color);\n }\n }\n\n /* Select input */\n select._pendo-multi-choice-poll-select {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n height: var(--instui-component-text-input-height-sm);\n border-radius: var(--instui-component-text-input-border-radius);\n border-width: var(--instui-component-text-input-border-width);\n /* @TODO: Text input border style token missing upstream */\n border-style: solid;\n padding: var(--instui-component-shared-tokens-spacing-general-space-none)\n calc(var(--instui-component-text-input-padding-horizontal-sm) + 24px)\n var(--instui-component-shared-tokens-spacing-general-space-none)\n var(--instui-component-text-input-padding-horizontal-sm);\n font-family: var(--instui-component-text-input-font-family);\n font-weight: var(--instui-component-text-input-font-weight);\n font-size: var(--instui-component-text-input-font-size-sm);\n /* Chromium needs larger line-height to visually center vertically */\n line-height: calc(var(--instui-line-height-standalone-text-base) * 2);\n letter-spacing: normal;\n font-style: normal;\n background-color: var(--instui-component-text-input-background-color);\n color: var(--instui-component-text-input-text-color);\n border-color: var(--instui-component-text-input-border-color);\n transition: var(--instui-focus-outline-transition);\n\n &:hover {\n background-color: var(--instui-component-text-input-background-hover-color);\n border-color: var(--instui-component-text-input-border-hover-color);\n }\n\n &:focus {\n outline-color: var(--instui-focus-outline-color-start);\n outline-width: var(--instui-component-shared-tokens-focus-outline-width);\n outline-style: var(--instui-component-shared-tokens-focus-outline-style);\n outline-offset: var(--instui-component-shared-tokens-focus-outline-offset);\n outline-color: var(--instui-component-shared-tokens-focus-outline-info-color);\n background-color: var(--instui-component-text-input-background-color);\n }\n }\n\n /* ─── Select Option | Light/Dark (fallback) ─── */\n /* <option> elements are OS-rendered; light-dark() provides the fallback before @supports base-select */\n select._pendo-multi-choice-poll-select option {\n font-family: var(--instui-component-text-input-font-family);\n font-weight: var(--instui-component-text-input-font-weight);\n font-size: var(--instui-component-text-input-font-size-sm);\n background-color: var(--instui-component-view-background-primary);\n color: var(--instui-component-text-base-color);\n }\n\n /* ─── Select Option | Chromium: customizable select (appearance: base-select) ─── */\n @supports (appearance: base-select) {\n /* Rotate chevron when open */\n ._pendo-multi-choice-poll-select-border[id^=\"pendo-select-container-\"]:has(\n > select:open\n )::after {\n mask-image: var(--instui-icon-chevron-up);\n }\n\n /* Opt the <select> into the new model */\n select._pendo-multi-choice-poll-select,\n select._pendo-multi-choice-poll-select::picker(select) {\n appearance: base-select;\n }\n\n /* Hide the browser-generated picker icon — we supply our own via mask-image on the container */\n select._pendo-multi-choice-poll-select::picker-icon {\n display: none;\n }\n\n /* ─── Picker panel ─── */\n select._pendo-multi-choice-poll-select::picker(select) {\n border-radius: var(--instui-component-popover-border-radius);\n border-width: var(--instui-component-shared-tokens-stroke-width-sm);\n border-style: solid;\n overflow: hidden;\n padding: var(--instui-component-shared-tokens-spacing-general-space-none);\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n background-color: var(--instui-component-options-item-background);\n border-color: var(--instui-component-popover-border-color);\n box-shadow: var(--instui-elevation-above);\n }\n\n /* ─── Options ─── */\n select._pendo-multi-choice-poll-select option {\n border-radius: 0;\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n font-family: var(--instui-component-options-item-font-family);\n font-weight: var(--instui-component-options-item-font-weight);\n font-size: var(--instui-font-size-text-sm);\n letter-spacing: var(--instui-component-text-letter-spacing-normal);\n cursor: pointer;\n line-height: var(--instui-component-options-item-line-height);\n height: var(--instui-size-interactive-height-sm);\n background-color: var(--instui-component-options-item-background);\n color: var(--instui-component-options-item-color);\n\n /* Hide default browser checkmark — custom icon applied via mask-image on :checked::after */\n &::checkmark {\n display: none;\n }\n\n &:hover,\n &:focus {\n background-color: var(--instui-component-options-item-highlighted-background);\n color: var(--instui-component-options-item-highlighted-label-color);\n }\n\n &:focus {\n outline: none;\n }\n\n &:checked {\n font-weight: var(--instui-component-options-item-font-weight-selected);\n border-radius: 0;\n padding-right: calc(\n var(--instui-component-options-item-padding-horizontal) +\n var(--instui-spacing-padding-interactive-horizontal-sm)\n );\n position: relative;\n background-color: var(--instui-component-options-item-selected-background);\n color: var(--instui-component-options-item-selected-label-color);\n\n /* Check icon — mask-image approach for automatic light/dark theming */\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n right: var(--instui-component-options-item-padding-horizontal);\n top: 50%;\n transform: translateY(-50%);\n width: var(--instui-component-icon-size-sm);\n height: var(--instui-component-icon-size-sm);\n mask-image: var(--instui-icon-check);\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n pointer-events: none;\n background-color: var(--instui-component-options-item-selected-label-color);\n }\n\n &:hover {\n background-color: var(--instui-component-menu-item-selected-highlighted-background);\n }\n }\n }\n }\n}\n";
18
- const textCss = "[class*=\"instui\"] {\n /* Shared base text styles */\n ._pendo-simple-text,\n [class*=\"_pendo-text-\"] {\n font-family: var(--instui-component-text-content-small-font-family);\n font-weight: var(--instui-component-text-content-small-font-weight);\n font-size: var(--instui-component-text-content-small-font-size);\n line-height: var(--instui-component-text-content-small-line-height);\n letter-spacing: var(--instui-component-text-letter-spacing-normal);\n color: var(--instui-component-text-base-color);\n max-width: 100%;\n }\n\n ._pendo-text-bold {\n font-weight: var(--instui-component-text-content-important-font-weight);\n }\n\n ._pendo-text-italic {\n font-family: var(--instui-component-text-content-important-font-family);\n font-weight: var(--instui-component-text-content-important-font-weight);\n line-height: var(--instui-component-text-content-important-line-height);\n }\n\n ._pendo-text-strike {\n text-decoration: line-through;\n }\n\n /* Heading h2 styles */\n h2:is(._pendo-simple-text, ._pendo-text-title) {\n font-weight: var(--instui-component-heading-title-card-regular-font-weight);\n font-family: var(--instui-component-heading-title-card-regular-font-family);\n line-height: var(--instui-component-heading-title-card-regular-line-height);\n font-size: var(--instui-component-heading-title-card-large-font-size);\n }\n\n /* Subheading h3 styles */\n h3._pendo-simple-text {\n font-weight: var(--instui-component-heading-title-card-large-font-weight);\n font-size: var(--instui-component-heading-title-card-regular-font-size);\n font-family: var(--instui-component-heading-title-card-large-font-family);\n line-height: var(--instui-component-heading-title-card-large-line-height);\n }\n\n /* Tooltip (popover) heading overrides */\n &[data-layout=\"tooltipBlank\"] {\n h2._pendo-simple-text {\n font-size: var(--instui-component-heading-title-card-regular-font-size);\n line-height: var(--instui-component-heading-title-card-mini-line-height);\n }\n\n h3._pendo-simple-text {\n font-size: var(--instui-component-heading-title-card-mini-font-size);\n line-height: var(--instui-component-heading-title-card-regular-line-height);\n }\n }\n\n /* Link styles */\n ._pendo-text-link {\n text-decoration: var(--instui-component-link-text-decoration-within-text);\n font-weight: var(--instui-component-link-font-weight);\n /* border-radius added to ensure focus outline has rounded corners, matching the shape of the link text */\n border-radius: var(--instui-component-shared-tokens-border-radius-sm);\n color: var(--instui-component-link-text-color);\n\n &:is(:hover, :active, :focus) {\n color: var(--instui-component-link-text-hover-color);\n }\n\n &:disabled {\n color: var(--instui-component-link-text-disabled-color);\n }\n }\n\n /* List styles */\n ._pendo-simple-text ol,\n ._pendo-simple-text ul {\n padding-left: var(--instui-component-shared-tokens-spacing-general-space-none);\n }\n\n /* Surveys*/\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n /* @TODO: Surveys are terrible, clean this up. */\n\n & *:not(._pendo-close-guide) {\n font-size: var(--instui-component-heading-title-card-mini-font-size);\n }\n\n &,\n /* PMF Thank You text\n * @TODO: validate selector, ._pendo-simple-text does not have span nested\n */\n ._pendo-row:has(+ ._pendo-row > ._pendo-button-primaryButton) ._pendo-simple-text:has(> span:not([class])),\n /* UX Lite question labels (exclude form control wrappers with inputs) */\n .pendo-survey-wrapper>div:not(:has([class])):not(:has(input)),\n h2._pendo-simple-text,\n h2._pendo-text-title ._pendo-simple-text,\n ._pendo-simple-text._pendo-nps-open-text-poll-question {\n font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n font-family: var(--instui-component-heading-title-card-mini-font-family);\n font-size: var(--instui-component-heading-title-card-mini-font-size);\n line-height: var(--instui-component-heading-title-card-mini-line-height);\n margin: var(--instui-component-shared-tokens-spacing-general-space-none)\n var(--instui-component-shared-tokens-spacing-general-space-none)\n var(--instui-component-shared-tokens-spacing-general-space-sm);\n }\n\n /* NPS question labels */\n h2._pendo-text-title ._pendo-simple-text,\n ._pendo-simple-text._pendo-nps-open-text-poll-question {\n text-align: left;\n }\n\n /* NPS/survey completion messages */\n h2._pendo-text-title._pendo-nps-poll-success-message ._pendo-simple-text {\n text-align: center;\n }\n\n /* NPS label sits left/right of scale, not below */\n ._pendo-nps-poll-lowerbound-label,\n ._pendo-nps-poll-upperbound-label {\n font-style: normal;\n font-size: var(--instui-component-metric-label-font-size);\n font-weight: var(--instui-component-metric-label-font-weight);\n line-height: var(--instui-line-height-standalone-text-xs);\n text-align: center;\n color: var(--instui-component-text-muted-color);\n }\n\n /* UX Lite & CSAT scale labels */\n .pendo-survey-wrapper label + div {\n font-size: var(--instui-component-metric-label-font-size);\n padding-top: var(--instui-component-shared-tokens-spacing-general-space-xs);\n text-align: left;\n }\n }\n}\n";
19
- const textareaCss = "[class*=\"instui\"] {\n ._pendo-row:has(._pendo-open-text-poll-input) {\n height: auto;\n }\n\n ._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-row {\n height: auto;\n min-height: unset;\n }\n\n ._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-element {\n position: static;\n width: 100%;\n }\n\n /* TextArea */\n ._pendo-open-text-poll-input {\n border-radius: var(--instui-component-text-area-border-radius);\n border-width: var(--instui-component-text-area-border-width);\n border-style: solid;\n padding: var(--instui-component-text-area-padding);\n gap: var(--instui-component-text-area-gap-content);\n min-height: var(--instui-component-text-area-min-height);\n height: auto;\n max-height: var(--instui-component-text-area-max-height);\n width: 100%;\n font-family: var(--instui-component-text-area-font-family);\n font-weight: var(--instui-component-text-area-font-weight);\n font-size: var(--instui-component-text-area-font-size-sm);\n line-height: var(--instui-line-height-standalone-text-base);\n letter-spacing: normal;\n font-style: normal;\n margin: var(--instui-component-shared-tokens-spacing-general-space-none);\n background-color: var(--instui-component-text-area-background-color);\n color: var(--instui-component-text-area-text-color);\n border-color: var(--instui-component-text-area-border-color);\n transition: var(--instui-focus-outline-transition);\n\n &:hover {\n background: var(--instui-component-text-area-background-hover-color);\n border-color: var(--instui-component-text-area-border-hover-color);\n }\n\n &:focus {\n outline-color: var(--instui-focus-outline-color-start);\n outline-width: var(--instui-component-shared-tokens-focus-outline-width);\n outline-style: var(--instui-component-shared-tokens-focus-outline-style);\n outline-offset: var(--instui-component-shared-tokens-focus-outline-offset);\n outline-color: var(--instui-component-shared-tokens-focus-outline-info-color);\n background-color: var(--instui-component-text-area-background-color);\n border-color: var(--instui-component-text-area-border-color);\n }\n\n &::placeholder {\n color: var(--instui-component-text-area-placeholder-color);\n }\n\n &:hover::placeholder {\n color: var(--instui-component-text-area-placeholder-hover-color);\n }\n }\n\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n ._pendo-open-text-poll-input {\n /* PMF Survey does not have `rows` attribute, so manually set to match other surveys */\n min-height: 100px;\n }\n }\n}\n";
20
- const videoCss = "[class*=\"instui\"] {\n [class*=\"pendo-video-wrapper\"] {\n aspect-ratio: 16 / 9;\n height: auto;\n overflow: visible;\n padding-bottom: 0;\n position: relative;\n }\n\n ._pendo-video {\n display: block;\n height: 100%;\n width: 100%;\n }\n\n .pendo-mock-flexbox-element:has([class*=\"pendo-video-wrapper\"]) {\n width: 100%;\n }\n}\n";
21
- const viewCss = "/* Divider */\n[class*=\"instui\"] {\n .pendo-mock-flexbox-element:has(._pendo-divider) {\n width: 100%;\n }\n\n hr {\n border-width: var(--instui-component-shared-tokens-stroke-width-sm);\n border-style: var(--instui-component-view-border-style);\n margin: var(--instui-component-shared-tokens-spacing-general-space-xs)\n var(--instui-component-shared-tokens-spacing-general-space-none);\n border-radius: var(--instui-component-shared-tokens-border-radius-full);\n border-color: var(--instui-component-tabs-panel-border-color);\n }\n}\n";
7
+ const buttonCss = "/**\n * @component pendo-button\n * @selector [class*=\"instui\"]\n * @summary Styles `._pendo-button` elements as InstUI BaseButton (small size).\n * @remarks Applies to all three layout types (tooltipBlank, lightboxBlank, surveys).\n * In surveys, a lone primary button in its container is centred via a `:has()` rule.\n * The last button in a `.pendo-mock-flexbox-element` row loses its trailing margin automatically.\n * @part ._pendo-button — Shared button base; always small-height.\n * @part ._pendo-button-primaryButton — Primary (filled) variant.\n * @part ._pendo-button-custom — Treated as primary; used when the guide author sets a custom colour.\n * @part ._pendo-button-secondaryButton — Secondary (outlined) variant.\n * @part ._pendo-button-tertiaryButton — Tertiary (ghost with border) variant.\n * @related pendo-inputs — Number-scale / NPS poll buttons in surveys, which adopt secondary/tertiary colours.\n * @related pendo-chrome — The dismiss button that shares the guide container.\n */\n\n[class*=\"instui\"] {\n ._pendo-button {\n height: var(--instui-component-base-button-small-height);\n min-height: var(--instui-component-base-button-small-height);\n padding: var(--instui-component-base-button-padding-vertical)\n var(--instui-component-base-button-small-padding-horizontal);\n border-width: var(--instui-component-base-button-border-width);\n border-radius: var(--instui-component-base-button-border-radius);\n border-style: var(--instui-component-base-button-border-style);\n font-family: var(--instui-component-base-button-font-family);\n font-size: var(--instui-component-base-button-small-font-size);\n font-weight: var(--instui-component-base-button-font-weight);\n line-height: var(--instui-component-base-button-line-height);\n letter-spacing: var(--instui-component-base-button-letter-spacing);\n cursor: pointer;\n margin: var(--pendo-space-0) var(--instui-component-base-button-gap-button-content-md)\n var(--pendo-space-0) var(--pendo-space-0);\n\n .pendo-mock-flexbox-element:last-child > & {\n margin-right: var(--pendo-space-0);\n }\n }\n\n /* Primary/Custom button variant */\n ._pendo-button-primaryButton,\n ._pendo-button-custom {\n background: var(--instui-component-base-button-primary-background);\n border-color: var(--instui-component-base-button-primary-border-color);\n color: var(--instui-component-base-button-primary-color);\n\n &:hover {\n background: var(--instui-component-base-button-primary-hover-background);\n border-color: var(--instui-component-base-button-primary-hover-border-color);\n color: var(--instui-component-base-button-primary-hover-text-color);\n }\n\n &:active {\n background: var(--instui-component-base-button-primary-active-background);\n border-color: var(--instui-component-base-button-primary-active-border-color);\n color: var(--instui-component-base-button-primary-active-text-color);\n }\n\n &:disabled {\n background: var(--instui-component-base-button-primary-disabled-background-color);\n border-color: var(--instui-component-base-button-primary-disabled-border-color);\n color: var(--instui-component-base-button-primary-disabled-text-color);\n cursor: not-allowed;\n }\n }\n\n /* Secondary button variant */\n ._pendo-button-secondaryButton {\n background: var(--instui-component-base-button-secondary-background);\n border-color: var(--instui-component-base-button-secondary-border-color);\n color: var(--instui-component-base-button-secondary-color);\n\n &:hover {\n background: var(--instui-component-base-button-secondary-hover-background);\n border-color: var(--instui-component-base-button-secondary-hover-border-color);\n color: var(--instui-component-base-button-secondary-hover-text-color);\n }\n\n &:active {\n background: var(--instui-component-base-button-secondary-active-background);\n border-color: var(--instui-component-base-button-secondary-active-border-color);\n color: var(--instui-component-base-button-secondary-active-text-color);\n }\n\n &:disabled {\n background: var(--instui-component-base-button-secondary-disabled-background-color);\n border-color: var(--instui-component-base-button-secondary-disabled-border-color);\n color: var(--instui-component-base-button-secondary-disabled-text-color);\n cursor: not-allowed;\n }\n }\n\n /* Tertiary button variant */\n ._pendo-button-tertiaryButton {\n background: transparent;\n border-color: var(--instui-color-stroke-interactive-action-tertiary-base);\n color: var(--instui-color-text-interactive-action-tertiary-base);\n\n &:hover {\n background: var(--instui-color-background-interactive-action-tertiary-hover);\n border-color: var(--instui-component-base-button-tertiary-hover-border-color);\n color: var(--instui-component-base-button-tertiary-hover-text-color);\n }\n\n &:active {\n background: var(--instui-color-background-interactive-action-tertiary-active);\n border-color: var(--instui-component-base-button-tertiary-active-border-color);\n color: var(--instui-component-base-button-tertiary-active-text-color);\n }\n\n &:disabled {\n background: transparent;\n border-color: var(--instui-component-base-button-tertiary-disabled-border-color);\n color: var(--instui-component-base-button-tertiary-disabled-text-color);\n cursor: not-allowed;\n }\n }\n\n /* Surveys: Submit / Finish buttons */\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n /* Submit / Finish buttons: Center only if they're the only button in the container */\n div:has(> ._pendo-button-primaryButton):not(:has(> :not(._pendo-button-primaryButton))) {\n display: flex;\n justify-content: center;\n }\n }\n}\n";
8
+ const cardCss = "/**\n * @component pendo-card\n * @selector [class*=\"instui\"]\n * @summary Row spacing, content layout, and the shared card-container shell for all guide layouts.\n * @remarks Covers three concerns in one file:\n * (1) `._pendo-row` margins, with per-layout overrides for close-button clearance;\n * (2) Pendo's fake-flexbox replacement — Pendo uses `position:absolute` children inside\n * `.pendo-mock-flexbox-row`, which collapses row height; this replaces it with real\n * `display:flex` keyed off `data-pendo-justify-content`;\n * (3) `._pendo-step-container-styles` base — background, text colour, and focus ring shared\n * by both the alert and the popover layout cards.\n * @part ._pendo-row — A content row; spacing varies by layout type.\n * @part .pendo-block-wrapper — Wrapper around individual content blocks; margin is reset to zero.\n * @part [data-pendo-justify-content] — Row that Pendo has marked for flex alignment.\n * @part .pendo-mock-flexbox-row — Pendo's simulated flex container; replaced with real flexbox here.\n * @part .pendo-mock-flexbox-element — Individual flex children; `position:static` overrides Pendo's inline absolute.\n * @part ._pendo-step-container-styles — The visible card; background, colour, and focus-visible ring.\n * @related pendo-container — Container layouts (alert and popover) built on top of this card shell.\n * @related pendo-chrome — Close button whose height determines the row margin-right clearance.\n */\n\n/* Row spacing in Popover layout */\n._pendo-row {\n margin-top: var(--pendo-space-0);\n margin-right: var(--pendo-space-0);\n margin-bottom: var(--instui-component-shared-tokens-spacing-general-space-sm);\n margin-left: var(--pendo-space-0);\n line-height: var(--pendo-space-0);\n}\n\n/* Row spacing in Alert layout */\n[data-layout=\"lightboxBlank\"] ._pendo-row {\n margin-top: var(--pendo-space-0);\n margin-right: var(--pendo-space-0);\n margin-bottom: var(--instui-component-shared-tokens-spacing-gap-cards-sm);\n margin-left: var(--pendo-space-0);\n}\n\n/* Close button spacing in Popover layout */\n[id*=\"guide-components\"] > :first-child ._pendo-row {\n margin-right: calc(\n var(--instui-component-base-button-gap-button-content-sm) +\n var(--instui-component-base-button-small-height)\n );\n}\n\n/* Close button spacing in Alert layout */\n[data-layout=\"lightboxBlank\"] [id*=\"guide-components\"] > :first-child ._pendo-row {\n margin-right: calc(\n var(--instui-component-base-button-gap-button-content-sm) +\n var(--instui-component-base-button-small-height) / 2\n );\n}\n\n/* @TODO: Close button spacing in surveys */\n\n/* Content spacing */\n.pendo-block-wrapper {\n margin: var(--pendo-space-0);\n}\n\n._pendo-text-paragraph._pendo-multi-choice-poll-question + ._pendo-row .pendo-mock-flexbox-element,\n._pendo-multi-choice-poll-select-border,\n._pendo-multi-choice-poll-select {\n width: 100%;\n}\n\n/* Flexbox\n * Pendo simulates flexbox with position:absolute on children, which collapses\n * the row height. Replace it with real flexbox derived from the\n * data-pendo-justify-content attribute so the row sizes to its content.\n */\n[data-pendo-justify-content] .pendo-mock-flexbox-row {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n min-height: 0;\n}\n\n[data-pendo-justify-content=\"flex-start\"] .pendo-mock-flexbox-row {\n justify-content: flex-start;\n}\n\n[data-pendo-justify-content=\"center\"] .pendo-mock-flexbox-row {\n justify-content: center;\n}\n\n[data-pendo-justify-content=\"flex-end\"] .pendo-mock-flexbox-row {\n justify-content: flex-end;\n}\n\n[data-pendo-justify-content=\"space-between\"] .pendo-mock-flexbox-row {\n justify-content: space-between;\n}\n\n/* Reset the absolute positioning Pendo inlines on each child element */\n[data-pendo-justify-content] .pendo-mock-flexbox-row .pendo-mock-flexbox-element {\n position: static;\n}\n\n/* Card container */\n._pendo-step-container-styles {\n background-color: var(--instui-component-view-background-primary);\n color: var(--instui-component-view-color);\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color-start);\n outline-offset: 0;\n transition: var(--instui-focus-outline-transition);\n\n &:focus-visible {\n outline-color: light-dark(\n var(--instui-focus-outline-color),\n var(--instui-focus-outline-color-inverse)\n );\n outline-offset: var(--instui-focus-outline-offset);\n }\n}\n\n/* Surveys */\n._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n /* Some surveys don't use `._pendo-row` for spacing, so add margin to direct children that aren't rows. */\n ._pendo-step-container-styles > :is(div, form, textarea, h2):not(._pendo-row) {\n margin: var(--pendo-space-0) auto var(--instui-component-shared-tokens-spacing-general-space-sm)\n auto;\n width: 100%;\n max-width: var(--pendo-embedded-width);\n }\n\n ._pendo-step-container-styles > ._pendo-row {\n max-width: var(--pendo-embedded-width);\n margin-left: auto;\n margin-right: auto;\n }\n}\n";
9
+ const chromeCss = "/**\n * @component pendo-chrome\n * @selector [class*=\"instui\"]\n * @summary Decorative guide content (backdrop, image, video, divider) and the close/dismiss button.\n * @remarks \"Chrome\" refers to structural content elements Pendo can insert into any guide layout.\n * The backdrop display state (block/none) is set via inline style by Pendo's runtime.\n * The close button is positioned absolutely inside `._pendo-step-container-styles`\n * (`position:relative`); its inset values differ between the popover and alert layouts.\n * @part ._pendo-backdrop — Fixed full-viewport backdrop; background maps to the mask colour token.\n * @part ._pendo-image — Inline image; constrained to 100% container width.\n * @part [class*=\"pendo-video-wrapper\"] — Video embed wrapper; locked to 16/9 aspect ratio.\n * @part ._pendo-video — The video element inside the wrapper; fills 100%×100%.\n * @part hr — Divider rule; thin line using view-border and tab-panel tokens.\n * @part ._pendo-close-guide — Ghost dismiss button; absolute-positioned in the top-end corner of the card.\n * @related pendo-card — Provides `position:relative` on the card and close-button row margin-right clearance.\n * @related pendo-container — Provides the layout variant context for close-button positioning.\n */\n\n/* Video */\n[class*=\"pendo-video-wrapper\"] {\n aspect-ratio: 16 / 9;\n height: auto;\n overflow: visible;\n padding-bottom: 0;\n position: relative;\n}\n\n._pendo-video {\n display: block;\n height: 100%;\n width: 100%;\n}\n\n.pendo-mock-flexbox-element:has([class*=\"pendo-video-wrapper\"]) {\n width: 100%;\n}\n\n/* Image */\n._pendo-image {\n max-width: 100%;\n height: auto;\n}\n\n/* Backdrop */\n._pendo-backdrop {\n background-color: var(--instui-component-mask-background-color);\n}\n\n/* Divider */\n.pendo-mock-flexbox-element:has(._pendo-divider) {\n width: 100%;\n}\n\nhr {\n border-width: var(--instui-component-shared-tokens-stroke-width-sm);\n border-style: var(--instui-component-view-border-style);\n margin: var(--instui-component-shared-tokens-spacing-general-space-xs) var(--pendo-space-0);\n border-radius: var(--instui-component-shared-tokens-border-radius-full);\n border-color: var(--instui-component-tabs-panel-border-color);\n}\n\n/* ─── Close button ─── */\n\n._pendo-close-guide {\n padding-bottom: var(--instui-component-shared-tokens-spacing-general-space-xs);\n height: var(--instui-component-base-button-small-height);\n aspect-ratio: 1;\n border-radius: var(--instui-component-base-button-border-radius);\n background-color: transparent;\n background-repeat: no-repeat;\n background-position: center;\n border-width: var(--pendo-space-0);\n background-size: var(--instui-component-icon-size-sm);\n position: absolute;\n inset-inline: auto var(--instui-component-shared-tokens-spacing-general-space-xs);\n inset-block-start: var(--instui-component-shared-tokens-spacing-general-space-xs);\n font-size: var(--instui-font-size-text-lg);\n font-family: var(--instui-component-base-button-font-family);\n font-weight: var(--instui-primitive-font-weight-medium);\n color: var(--instui-component-text-base-color);\n\n &:hover {\n background-color: var(--instui-component-base-button-primary-ghost-hover-background);\n }\n\n &:active {\n background-color: var(--instui-component-base-button-primary-ghost-active-background);\n }\n}\n\n[data-layout=\"lightboxBlank\"] ._pendo-close-guide {\n inset-block-start: var(--instui-component-alert-close-button-margin-top);\n inset-inline-end: var(--instui-component-alert-close-button-margin-right);\n}\n";
10
+ const containerCss = "/**\n * @component pendo-container\n * @selector [class*=\"instui\"]\n * @summary The guide container — shared root for all Pendo guide layout types.\n * @remarks The HTML is injected by Pendo and cannot be modified. The layout type is set via the\n * `data-layout` attribute; the colour variant is set via the variant class in the Visual Design\n * Studio. The `._pendo-step-container-size` and `._pendo-step-container-styles` elements are\n * shared between all layouts; each layout applies its own sizing, spacing, and visual treatment.\n * @modifier [data-layout=\"lightboxBlank\"] alert — Embedded alert guide; full-width with a coloured sidebar strip and status icon.\n * @modifier [data-layout=\"tooltipBlank\"] popover — Overlay tooltip/popover guide; fixed width with optional caret.\n * @modifier ._pendo-guide-walkthrough_ survey — Survey guide; no data-layout value, auto width.\n * @modifier [class*=\"instui-info\"] info — Informational colour variant (alert only).\n * @modifier [class*=\"instui-danger\"] danger — Danger/error colour variant (alert only).\n * @modifier [class*=\"instui-success\"] success — Success colour variant (alert only).\n * @modifier [class*=\"instui-warning\"] warning — Warning colour variant (alert only).\n * @part ._pendo-guide-backdrop_ — Backdrop container.\n * @part ._pendo-backdrop — Fixed full-viewport overlay; display toggled by Pendo at runtime.\n * @part ._pendo-step-container-size — Positioning/sizing wrapper; stacks above the backdrop.\n * @part ._pendo-step-container-styles — The visible card dialog; styled per layout type.\n * @part .pendo-tooltip-caret — Caret fill triangle (popover/survey only); one of four directional variants.\n * @part .pendo-tooltip-caret-border — 1px-larger caret border layer drawn behind the fill (popover/survey only).\n * @pseudo ::before — Solid variant-coloured sidebar strip on `._pendo-step-container-styles` (alert only), flush with the rounded start edge.\n * @pseudo ::after — Status icon on `._pendo-step-container-styles` (alert only), masked and centred over the strip.\n * @cssproperty --_alert-color <color> — Private; the variant border/strip colour, set by the variant class.\n * @cssproperty --_alert-icon <url> — Private; the variant status icon, set by the variant class.\n * @cssproperty --caret-color <color> — Private; the caret fill colour (maps to `view-background-primary`).\n * @structure\n * [class*=\"instui\"] {\n * ._pendo-guide-backdrop_ {\n * ._pendo-backdrop:optional {}\n * }\n * ._pendo-step-container-size {\n * ._pendo-step-container-styles {\n * ::before:optional {}\n * ::after:optional {}\n * }\n * .pendo-tooltip-caret:optional {}\n * .pendo-tooltip-caret-border:optional {}\n * }\n * }\n * @related pendo-card — Card shell, row layout, and focus ring applied to `._pendo-step-container-styles`.\n * @related pendo-chrome — Dismiss button and decorative elements; absolutely positioned inside `._pendo-step-container-styles`.\n */\n\n/* ─── Overlay guides and surveys ─── */\n\n[class*=\"instui\"]:is([data-layout=\"tooltipBlank\"], ._pendo-guide-walkthrough_) {\n ._pendo-step-container-size {\n height: auto;\n }\n\n ._pendo-step-container-styles {\n min-height: 2.75rem;\n /* @TODO: overflow-y causes scrollbar to break border-radius */\n /* 2x border radius + 2x caret size */\n border-radius: var(--instui-component-popover-border-radius);\n border-color: var(--instui-component-popover-border-color);\n box-shadow: var(--instui-elevation-above);\n /* gap-cards-md + box-shadow y + box-shadow spread */\n margin-bottom: calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md));\n margin-left: var(--instui-component-shared-tokens-spacing-general-space-md);\n margin-right: var(--instui-component-shared-tokens-spacing-general-space-md);\n margin-top: var(--instui-component-shared-tokens-spacing-general-space-xs);\n }\n\n .pendo-tooltip-caret {\n --caret-color: var(--instui-component-view-background-primary);\n\n /* Pendo positions carets against _pendo-step-container-size, but our box\n * carries margins (for box-shadow room + spacing), so the caret lands at the\n * margin edge instead of touching the box. Pull each caret back toward the\n * box by its margin so it sits flush (1px overlap under the border). The\n * build adds !important, which overrides Pendo's dynamic inline offsets. */\n &.pendo-tooltip-caret--top {\n border-top-color: var(--caret-color);\n /* sits below the box: shift up by margin-bottom */\n bottom: calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md) - 15px);\n\n & + .pendo-tooltip-caret-border {\n bottom: calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md) - 16px);\n }\n }\n\n &.pendo-tooltip-caret--right {\n border-right-color: var(--caret-color);\n left: -3px;\n\n & + .pendo-tooltip-caret-border {\n left: -4px;\n }\n }\n\n &.pendo-tooltip-caret--bottom {\n border-bottom-color: var(--caret-color);\n /* sits above the box: shift down by margin-top */\n top: calc(var(--instui-component-shared-tokens-spacing-general-space-xs) - 15px);\n\n & + .pendo-tooltip-caret-border {\n top: calc(var(--instui-component-shared-tokens-spacing-general-space-xs) - 16px);\n }\n }\n\n &.pendo-tooltip-caret--left {\n border-left-color: var(--caret-color);\n right: -3px;\n\n & + .pendo-tooltip-caret-border {\n right: -4px;\n }\n }\n }\n\n /* Overlay Guides */\n &[data-layout=\"tooltipBlank\"] {\n ._pendo-step-container-styles {\n width: var(--pendo-overlay-width);\n padding: var(--instui-component-shared-tokens-spacing-padding-card-sm)\n var(--instui-component-shared-tokens-spacing-padding-card-sm) var(--pendo-space-0);\n }\n }\n\n /* Surveys */\n &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n ._pendo-step-container-styles {\n width: auto;\n padding: var(--instui-component-shared-tokens-spacing-padding-card-lg)\n var(--instui-component-shared-tokens-spacing-padding-card-lg)\n var(--instui-component-shared-tokens-spacing-general-space-sm);\n /* Cuts off box-shadow, but Surveys are anchored to bottom of viewport */\n margin-bottom: var(--instui-component-shared-tokens-spacing-general-space-md);\n }\n\n &:not(:has(._pendo-row)) {\n ._pendo-step-container-styles {\n padding-bottom: var(--instui-component-shared-tokens-spacing-padding-card-sm);\n }\n }\n }\n}\n\n/* ─── Embedded alert ─── */\n\n[class*=\"instui\"][data-layout=\"lightboxBlank\"] {\n /* Variant tokens — set on the container, inherited by all children */\n &,\n &[class*=\"instui-info\"] {\n --_alert-color: var(--instui-component-alert-info-border-color);\n --_alert-icon: var(--instui-icon-info);\n }\n\n &[class*=\"instui-danger\"] {\n --_alert-color: var(--instui-component-alert-danger-border-color);\n --_alert-icon: var(--instui-icon-circle-x);\n }\n\n &[class*=\"instui-success\"] {\n --_alert-color: var(--instui-component-alert-success-border-color);\n --_alert-icon: var(--instui-icon-circle-check);\n }\n\n &[class*=\"instui-warning\"] {\n --_alert-color: var(--instui-component-alert-warning-border-color);\n --_alert-icon: var(--instui-icon-triangle-alert);\n }\n\n &,\n ._pendo-step-container-size {\n margin-right: var(--instui-spacing-space2xs);\n margin-left: var(--instui-spacing-space2xs);\n max-width: var(--pendo-embedded-width);\n }\n\n ._pendo-step-container-size {\n /* Stack above the fixed backdrop (z-index: 200000) the same way the overlay guide does */\n z-index: 300000;\n /* prevent margin collapse from sibling content to preserve drop shadow */\n padding-bottom: calc(var(--instui-spacing-space-md));\n padding-top: var(--instui-spacing-space-sm);\n }\n\n ._pendo-step-container-styles {\n height: auto;\n border-color: var(--_alert-color);\n border-width: var(--instui-component-alert-border-width);\n border-style: var(--instui-component-alert-border-style);\n border-radius: var(--instui-component-alert-border-radius);\n overflow: hidden;\n padding: var(--instui-component-alert-content-padding-vertical)\n var(--instui-component-alert-content-padding-horizontal)\n var(--instui-component-alert-content-padding-vertical)\n calc(var(--pendo-alert-indent) + var(--instui-component-alert-content-padding-horizontal));\n box-shadow: var(--instui-elevation-above);\n position: relative;\n /* gap-cards-md + box-shadow y + box-shadow spread */\n margin-bottom: var(--instui-spacing-space-md);\n margin-left: var(--instui-spacing-space-lg);\n margin-right: var(--instui-spacing-space-lg);\n margin-top: var(--instui-spacing-space-xs);\n\n /* Colored sidebar strip — clipped to border-radius by overflow: hidden */\n &::before {\n content: \"\";\n display: block;\n position: absolute;\n overflow: hidden;\n inset-block: 0;\n left: 0;\n width: var(--pendo-alert-indent);\n background-color: var(--_alert-color);\n }\n\n /* Icon centered in the sidebar strip */\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: calc((var(--pendo-alert-indent) - var(--instui-component-icon-size-md)) / 2);\n width: var(--instui-component-icon-size-md);\n height: var(--instui-component-icon-size-md);\n mask-image: var(--_alert-icon);\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: var(--instui-component-alert-icon-color);\n }\n }\n}\n";
11
+ const inputsCss = "/**\n * @component pendo-inputs\n * @selector [class*=\"instui\"]\n * @summary All Pendo survey form input controls: open-text textarea, dropdown select, radio groups, and number-scale/NPS buttons.\n * @remarks Four input types in one layer:\n * (1) Textarea — `._pendo-open-text-poll-input`; full-width with auto height between min/max.\n * (2) Select — `._pendo-multi-choice-poll-select`; custom-appearance dropdown with chevron icon; opts\n * into Chromium's base-select model under `@supports (appearance: base-select)`.\n * (3) Radio group — `label.pendo-radio` + `input.pendo-radio`; used for single-choice and PMF surveys.\n * (4) Number-scale / NPS — `input[type=\"radio\"]` + `label` pairs styled as small square buttons\n * (secondary unselected, primary selected); also covers UX-Lite and CSAT surveys.\n * @part ._pendo-open-text-poll-input — Open-text textarea; full-width with auto height.\n * @part ._pendo-multi-choice-poll-select-border — Select wrapper; supplies the chevron via `::after`.\n * @part select._pendo-multi-choice-poll-select — The `<select>` element.\n * @part select._pendo-multi-choice-poll-select option select-option — The dropdown options (via `::picker(select)` in Chromium base-select mode).\n * @part label.pendo-radio radio-label — Radio label; maps to `instui-component-radio-input` tokens in groups, or button tokens in scale polls.\n * @part input.pendo-radio radio-input — Radio control; custom appearance.\n * @part input[type=\"radio\"] radio — Hidden radio in scale polls; stretched to cover container for click area.\n * @part ._pendo-number-scale-poll-wrapper — Number-scale poll wrapper.\n * @part ._pendo-nps-poll-wrapper — NPS (0–10) poll wrapper.\n * @part .pendo-survey-wrapper — Generic survey wrapper.\n * @part [class$=\"-description\"] — Scale endpoint description label.\n * @part [class$=\"-poll-question\"] poll-label — Form-field label container above a poll group.\n * @pseudo ::after — Chevron-down icon on the select wrapper (base-select); check icon on selected option (base-select only).\n * @pseudo ::placeholder — Placeholder text colour on textarea.\n * @pseudo ::picker(select) — Chromium only: customizable dropdown panel for `base-select` (appearance: base-select).\n * @pseudo ::picker-icon — Chromium only: browser-generated picker icon (hidden via `display: none`).\n * @pseudo ::checkmark — Chromium only: check mark icon on selected option (hidden for custom implementation).\n * @related pendo-button — Standard CTA buttons using the same button tokens.\n * @related pendo-card — Provides the row/flexbox context that inputs live in.\n * @related pendo-vars — Defines textarea min/max-height local tokens.\n */\n\n/* ─── Textarea ─── */\n\n._pendo-row:has(._pendo-open-text-poll-input) {\n height: auto;\n}\n\n._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-row {\n height: auto;\n min-height: unset;\n}\n\n._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-element {\n position: static;\n width: 100%;\n}\n\n._pendo-open-text-poll-input {\n border-radius: var(--instui-component-text-area-border-radius);\n border-width: var(--instui-component-text-area-border-width);\n border-style: var(--pendo-input-border-style);\n padding: var(--instui-component-text-area-padding);\n gap: var(--instui-component-text-area-gap-content);\n min-height: var(--instui-component-text-area-min-height);\n height: auto;\n max-height: var(--instui-component-text-area-max-height);\n width: 100%;\n font-family: var(--instui-component-text-area-font-family);\n font-weight: var(--instui-component-text-area-font-weight);\n font-size: var(--instui-component-text-area-font-size-sm);\n line-height: var(--instui-line-height-standalone-text-base);\n letter-spacing: normal;\n font-style: normal;\n margin: var(--pendo-space-0);\n background-color: var(--instui-component-text-area-background-color);\n color: var(--instui-component-text-area-text-color);\n border-color: var(--instui-component-text-area-border-color);\n\n &:hover {\n background: var(--instui-component-text-area-background-hover-color);\n border-color: var(--instui-component-text-area-border-hover-color);\n }\n\n &:focus {\n background-color: var(--instui-component-text-area-background-color);\n border-color: var(--instui-component-text-area-border-color);\n }\n\n &::placeholder {\n color: var(--instui-component-text-area-placeholder-color);\n }\n\n &:hover::placeholder {\n color: var(--instui-component-text-area-placeholder-hover-color);\n }\n}\n\n._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n ._pendo-open-text-poll-input {\n /* PMF Survey does not have `rows` attribute, so manually set to match other surveys */\n min-height: 100px;\n }\n\n :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"]) {\n display: flex;\n flex-direction: column;\n }\n\n /* PMF survey inputs are inline-block by default, override to stack vertically. */\n :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"]) span:has(.pendo-radio) {\n display: flex;\n flex-direction: row;\n justify-content: start;\n align-items: center;\n text-align: left;\n }\n}\n\n/* ─── Select ─── */\n\n._pendo-multi-choice-poll-select-border[id^=\"pendo-select-container-\"]:has(> select) {\n border: 0 none;\n background: none;\n padding: var(--pendo-space-0);\n margin: var(--pendo-space-0);\n position: relative;\n\n /* Chevron icon — mask-image approach for automatic light/dark theming */\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n right: var(--instui-component-text-input-padding-horizontal-sm);\n top: var(--instui-component-shared-tokens-spacing-general-space-lg);\n transform: translateY(-50%);\n width: var(--instui-component-icon-size-sm);\n height: var(--instui-component-icon-size-sm);\n mask-image: var(--instui-icon-chevron-down);\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n pointer-events: none;\n background-color: var(--instui-component-text-input-text-color);\n }\n}\n\nselect._pendo-multi-choice-poll-select {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n height: var(--instui-component-text-input-height-sm);\n border-radius: var(--instui-component-text-input-border-radius);\n border-width: var(--instui-component-text-input-border-width);\n /* border-style token not yet in upstream set; see --pendo-input-border-style in vars.css */\n border-style: var(--pendo-input-border-style);\n padding: var(--pendo-space-0)\n calc(var(--instui-component-text-input-padding-horizontal-sm) + 24px) var(--pendo-space-0)\n var(--instui-component-text-input-padding-horizontal-sm);\n font-family: var(--instui-component-text-input-font-family);\n font-weight: var(--instui-component-text-input-font-weight);\n font-size: var(--instui-component-text-input-font-size-sm);\n /* Chromium needs larger line-height to visually center vertically */\n line-height: calc(var(--instui-line-height-standalone-text-base) * 2);\n letter-spacing: normal;\n font-style: normal;\n background-color: var(--instui-component-text-input-background-color);\n color: var(--instui-component-text-input-text-color);\n border-color: var(--instui-component-text-input-border-color);\n\n &:hover {\n background-color: var(--instui-component-text-input-background-hover-color);\n border-color: var(--instui-component-text-input-border-hover-color);\n }\n\n &:focus {\n background-color: var(--instui-component-text-input-background-color);\n }\n}\n\n/* ─── Select Option | Light/Dark (fallback) ─── */\n/* <option> elements are OS-rendered; light-dark() provides the fallback before @supports base-select */\nselect._pendo-multi-choice-poll-select option {\n font-family: var(--instui-component-text-input-font-family);\n font-weight: var(--instui-component-text-input-font-weight);\n font-size: var(--instui-component-text-input-font-size-sm);\n background-color: var(--instui-component-view-background-primary);\n color: var(--instui-component-text-base-color);\n}\n\n/* ─── Select Option | Chromium: customizable select (appearance: base-select) ─── */\n@supports (appearance: base-select) {\n /* Rotate chevron when open */\n ._pendo-multi-choice-poll-select-border[id^=\"pendo-select-container-\"]:has(> select:open)::after {\n mask-image: var(--instui-icon-chevron-up);\n }\n\n /* Opt the <select> into the new model */\n select._pendo-multi-choice-poll-select,\n select._pendo-multi-choice-poll-select::picker(select) {\n appearance: base-select;\n }\n\n /* Hide the browser-generated picker icon — we supply our own via mask-image on the container */\n select._pendo-multi-choice-poll-select::picker-icon {\n display: none;\n }\n\n /* ─── Picker panel ─── */\n select._pendo-multi-choice-poll-select::picker(select) {\n border-radius: var(--instui-component-popover-border-radius);\n border-width: var(--instui-component-shared-tokens-stroke-width-sm);\n border-style: solid;\n overflow: hidden;\n padding: var(--pendo-space-0);\n margin: var(--pendo-space-0);\n background-color: var(--instui-component-options-item-background);\n border-color: var(--instui-component-popover-border-color);\n box-shadow: var(--instui-elevation-above);\n }\n\n /* ─── Options ─── */\n select._pendo-multi-choice-poll-select option {\n border-radius: 0;\n margin: var(--pendo-space-0);\n font-family: var(--instui-component-options-item-font-family);\n font-weight: var(--instui-component-options-item-font-weight);\n font-size: var(--instui-font-size-text-sm);\n letter-spacing: var(--instui-component-text-letter-spacing-normal);\n cursor: pointer;\n line-height: var(--instui-component-options-item-line-height);\n height: var(--instui-size-interactive-height-sm);\n background-color: var(--instui-component-options-item-background);\n color: var(--instui-component-options-item-color);\n\n &::checkmark {\n display: none;\n }\n\n &:hover,\n &:focus {\n background-color: var(--instui-component-options-item-highlighted-background);\n color: var(--instui-component-options-item-highlighted-label-color);\n }\n\n &:focus {\n outline: none;\n }\n\n &:checked {\n font-weight: var(--instui-component-options-item-font-weight-selected);\n border-radius: 0;\n padding-right: calc(\n var(--instui-component-options-item-padding-horizontal) +\n var(--instui-spacing-padding-interactive-horizontal-sm)\n );\n position: relative;\n background-color: var(--instui-component-options-item-selected-background);\n color: var(--instui-component-options-item-selected-label-color);\n\n /* Check icon — mask-image approach for automatic light/dark theming */\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n right: var(--instui-component-options-item-padding-horizontal);\n top: 50%;\n transform: translateY(-50%);\n width: var(--instui-component-icon-size-sm);\n height: var(--instui-component-icon-size-sm);\n mask-image: var(--instui-icon-check);\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n pointer-events: none;\n background-color: var(--instui-component-options-item-selected-label-color);\n }\n\n &:hover {\n background-color: var(--instui-component-menu-item-selected-highlighted-background);\n }\n }\n }\n}\n\n/* ─── Radio group ─── */\n\n/* Radio label */\n._pendo-multi-choice-poll-select-border label.pendo-radio,\n._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"])\n :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"])\n label.pendo-radio {\n font-family: var(--instui-component-radio-input-font-family);\n font-weight: var(--instui-component-radio-input-font-weight);\n font-size: var(--instui-component-radio-input-font-size-sm);\n line-height: var(--instui-component-radio-input-line-height-sm);\n letter-spacing: normal;\n font-style: normal;\n margin: var(--pendo-space-0);\n background-color: var(--instui-color-transparent-color);\n color: var(--instui-component-radio-input-label-base-color);\n\n &:hover {\n color: var(--instui-component-radio-input-label-hover-color);\n }\n}\n\n/* Radio input */\n._pendo-multi-choice-poll-select-border input.pendo-radio,\n._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"])\n :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"])\n input.pendo-radio {\n width: var(--instui-component-radio-input-control-size-sm);\n height: var(--instui-component-radio-input-control-size-sm);\n border-radius: var(--instui-component-shared-tokens-border-radius-full);\n border-width: var(--instui-component-radio-input-border-width);\n border-style: var(--pendo-input-border-style);\n margin: var(--instui-component-shared-tokens-spacing-general-space2xs)\n var(--instui-component-radio-input-gap) var(--pendo-space-0) var(--pendo-space-0);\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n border-color: var(--instui-component-radio-input-border-color);\n background-color: var(--instui-component-radio-input-background-color);\n\n &:hover {\n background-color: var(--instui-component-radio-input-background-hover-color);\n border-color: var(--instui-component-radio-input-border-readonly-color);\n }\n\n &:checked {\n box-shadow: var(--instui-component-radio-input-border-selected-color) inset 0 0 0\n var(--instui-component-radio-input-checked-inset-sm);\n border-color: var(--instui-component-radio-input-border-selected-color);\n\n + label {\n background: var(--instui-color-transparent-color);\n color: var(--instui-component-radio-input-label-base-color);\n }\n }\n\n &:focus {\n + label {\n outline: none;\n }\n }\n}\n\n/* Form field label */\n[class$=\"-poll-question\"] > ._pendo-simple-text > ._pendo-text-plain {\n font-family: var(--instui-component-form-field-layout-font-family);\n font-weight: var(--instui-component-form-field-layout-font-weight);\n font-size: var(--instui-component-form-field-layout-font-size);\n line-height: var(--instui-component-form-field-layout-line-height);\n letter-spacing: normal;\n font-style: normal;\n margin: var(--instui-component-form-field-layout-gap-primitives) var(--pendo-space-0);\n color: var(--instui-component-form-field-layout-text-color);\n}\n\n/* ─── Number-scale / NPS poll buttons ─── */\n/*\n * Number-scale and NPS polls are HTML radio inputs styled like square buttons;\n * secondary colours for unselected, primary colours for selected/checked.\n */\n\n._pendo-number-scale-poll-wrapper {\n padding: var(--pendo-space-0);\n}\n\n.pendo-survey-wrapper > div:has(input[type=\"radio\"]),\n._pendo-nps-poll-wrapper,\n[id*=\"survey-pmf-answers\"],\n[id*=\"survey-single-choice\"] {\n padding: var(--pendo-space-0) var(--pendo-space-0)\n var(--instui-component-shared-tokens-spacing-general-space-lg);\n margin: var(--pendo-space-0);\n}\n\n._pendo-number-scale-poll-wrapper > div[role*=\"radiogroup\"],\n._pendo-nps-poll-wrapper > div[role*=\"radiogroup\"],\n.pendo-survey-wrapper > div:not([id*=\"survey-single-choice\"]):has(input[type=\"radio\"]) {\n gap: var(--instui-component-shared-tokens-spacing-general-space-md);\n display: flex;\n flex-direction: row;\n width: fit-content;\n}\n\n/*\n * UX-Lite (and similar) surveys emit radio inputs without id/for linkage\n * between input and label. Expand the hidden input to cover its container\n * so clicking the visible label area actually activates the radio.\n */\n.pendo-survey-wrapper > div:not([id*=\"survey-single-choice\"]):has(input[type=\"radio\"]) > span {\n position: relative;\n}\n\n.pendo-survey-wrapper\n > div:not([id*=\"survey-single-choice\"]):has(input[type=\"radio\"])\n > span\n > input[type=\"radio\"] {\n inset: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n}\n\n._pendo-nps-poll-wrapper > div[role*=\"radiogroup\"] {\n align-items: center;\n justify-content: center;\n margin: 0 auto;\n}\n\nlabel.pendo-radio[class*=\"_pendo-number-scale-poll-\"],\nlabel.pendo-radio[class*=\"_pendo-nps-poll-\"],\n.pendo-survey-wrapper > :not([id*=\"survey-single-choice\"]) label {\n height: var(--instui-component-base-button-small-height);\n min-height: var(--instui-component-base-button-small-height);\n width: var(--instui-component-base-button-small-height);\n aspect-ratio: 1 / 1;\n border-width: var(--instui-component-base-button-border-width);\n border-radius: var(--instui-component-base-button-border-radius);\n border-style: var(--instui-component-base-button-border-style);\n font-size: var(--instui-component-base-button-small-font-size);\n /* Line height is set to the button height to center the text vertically, and because the text will always be one line. */\n line-height: var(--instui-component-base-button-small-height);\n letter-spacing: var(--instui-component-base-button-letter-spacing);\n font-family: var(--instui-component-base-button-font-family);\n font-weight: var(--instui-component-base-button-font-weight);\n text-align: center;\n margin: var(--pendo-space-0);\n background: var(--instui-component-base-button-secondary-background);\n border-color: var(--instui-component-base-button-secondary-border-color);\n color: var(--instui-component-base-button-secondary-color);\n outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n var(--instui-focus-outline-color-start);\n outline-offset: 0;\n transition: var(--instui-focus-outline-transition);\n\n &:hover {\n background: var(--instui-component-base-button-secondary-hover-background);\n border-color: var(--instui-component-base-button-secondary-hover-border-color);\n color: var(--instui-component-base-button-secondary-hover-text-color);\n }\n\n &:active {\n background: var(--instui-component-base-button-secondary-active-background);\n border-color: var(--instui-component-base-button-secondary-active-border-color);\n color: var(--instui-component-base-button-secondary-active-text-color);\n }\n}\n\n/* Number scale description */\nlabel.pendo-radio[class*=\"_pendo-number-scale-poll-\"] + [class$=\"-description\"],\n.pendo-survey-wrapper > :not([id*=\"survey-single-choice\"]) label + div {\n width: var(--instui-component-base-button-small-height);\n margin: var(--pendo-space-0);\n font-weight: var(--instui-component-metric-label-font-weight);\n line-height: var(--instui-line-height-standalone-text-xs);\n font-size: var(--instui-component-metric-label-font-size);\n color: var(--instui-component-text-muted-color);\n}\n\n/* Right-align the last description so it anchors to the last button's right edge */\n[class*=\"-wrapper\"]:last-child,\n.pendo-survey-wrapper > div:not([id*=\"survey-single-choice\"]):has(> span) > span:last-child {\n position: relative;\n}\n\n[class*=\"-wrapper\"]:last-child > [class$=\"-description\"],\n.pendo-survey-wrapper\n div:not([id*=\"survey-single-choice\"]):has(> span):last-child\n > span:last-child\n > div {\n position: absolute;\n width: auto;\n text-align: right;\n right: 0;\n}\n\n/* NPS label sits left/right of scale, not below */\n._pendo-nps-poll-lowerbound-label,\n._pendo-nps-poll-upperbound-label {\n margin: var(--pendo-space-0);\n}\n\ninput.pendo-radio:focus-visible + label.pendo-radio[class*=\"_pendo-number-scale-poll-\"],\ninput.pendo-radio:focus-visible + label.pendo-radio[class*=\"_pendo-nps-poll-\"],\n.pendo-survey-wrapper\n > :not([id*=\"survey-single-choice\"])\n input.pendo-radio:focus-visible\n + label.pendo-radio,\n.pendo-survey-wrapper\n > :not([id*=\"survey-single-choice\"])\n input[type=\"radio\"]:focus-visible\n + label {\n outline-color: light-dark(\n var(--instui-focus-outline-color),\n var(--instui-focus-outline-color-inverse)\n );\n outline-offset: var(--instui-focus-outline-offset);\n}\n\ninput.pendo-radio:checked + label.pendo-radio[class*=\"_pendo-number-scale-poll-\"],\ninput.pendo-radio:checked + label.pendo-radio[class*=\"_pendo-nps-poll-\"],\n.pendo-survey-wrapper\n > :not([id*=\"survey-single-choice\"])\n input.pendo-radio:checked\n + label.pendo-radio,\n.pendo-survey-wrapper > :not([id*=\"survey-single-choice\"]) input[type=\"radio\"]:checked + label {\n background: var(--instui-component-base-button-primary-background);\n border-color: var(--instui-component-base-button-primary-border-color);\n color: var(--instui-component-base-button-primary-color);\n\n &:hover {\n background: var(--instui-component-base-button-primary-hover-background);\n border-color: var(--instui-component-base-button-primary-hover-border-color);\n color: var(--instui-component-base-button-primary-hover-text-color);\n }\n\n &:active {\n background: var(--instui-component-base-button-primary-active-background);\n border-color: var(--instui-component-base-button-primary-active-border-color);\n color: var(--instui-component-base-button-primary-active-text-color);\n }\n}\n\n[class$=\"-poll-question\"] + ._pendo-row [class$=\"-description\"] {\n padding-top: var(--instui-component-shared-tokens-spacing-general-space-xs);\n color: var(--instui-component-text-muted-color);\n}\n";
12
+ const textCss = "/**\n * @component pendo-text\n * @selector [class*=\"instui\"]\n * @summary Styles all Pendo text content elements using InstUI typography tokens.\n * @remarks Covers body text, bold, italic, strikethrough, headings (h2/h3), links, and lists.\n * Headings use smaller font-size overrides inside the tooltipBlank (popover) layout.\n * Survey text has additional overrides for NPS question titles, bound labels, and CSAT/UX-Lite\n * scale labels — these are handled at the end of the file and marked `@TODO` for cleanup.\n * @part ._pendo-simple-text — Base text element; maps to `text-content-small` tokens.\n * @part [class*=\"_pendo-text-\"] — All text variant elements; share the base text styles.\n * @part ._pendo-text-bold — Bold inline text.\n * @part ._pendo-text-italic — Italic inline text; uses `text-content-important` tokens.\n * @part ._pendo-text-strike — Strikethrough inline text.\n * @part h2._pendo-text-title heading — Guide heading; maps to `heading-title-card-large` font-size.\n * @part h3._pendo-simple-text subheading — Guide subheading; maps to `heading-title-card-regular` font-size.\n * @part ._pendo-text-link — Inline link; maps to InstUI Link tokens with a focus-outline border-radius.\n * @related pendo-card — Provides the card container where text content is rendered.\n */\n\n._pendo-simple-text,\n[class*=\"_pendo-text-\"] {\n font-family: var(--instui-component-text-content-small-font-family);\n font-weight: var(--instui-component-text-content-small-font-weight);\n font-size: var(--instui-component-text-content-small-font-size);\n line-height: var(--instui-component-text-content-small-line-height);\n letter-spacing: var(--instui-component-text-letter-spacing-normal);\n color: var(--instui-component-text-base-color);\n max-width: 100%;\n}\n\n._pendo-text-bold {\n font-weight: var(--instui-component-text-content-important-font-weight);\n}\n\n._pendo-text-italic {\n font-family: var(--instui-component-text-content-important-font-family);\n font-weight: var(--instui-component-text-content-important-font-weight);\n line-height: var(--instui-component-text-content-important-line-height);\n}\n\n._pendo-text-strike {\n text-decoration: line-through;\n}\n\n/* Heading h2 styles */\nh2:is(._pendo-simple-text, ._pendo-text-title) {\n font-weight: var(--instui-component-heading-title-card-regular-font-weight);\n font-family: var(--instui-component-heading-title-card-regular-font-family);\n line-height: var(--instui-component-heading-title-card-regular-line-height);\n font-size: var(--instui-component-heading-title-card-large-font-size);\n}\n\n/* Subheading h3 styles */\nh3._pendo-simple-text {\n font-weight: var(--instui-component-heading-title-card-large-font-weight);\n font-size: var(--instui-component-heading-title-card-regular-font-size);\n font-family: var(--instui-component-heading-title-card-large-font-family);\n line-height: var(--instui-component-heading-title-card-large-line-height);\n}\n\n/* Tooltip (popover) heading overrides */\n[data-layout=\"tooltipBlank\"] {\n h2._pendo-simple-text {\n font-size: var(--instui-component-heading-title-card-regular-font-size);\n line-height: var(--instui-component-heading-title-card-mini-line-height);\n }\n\n h3._pendo-simple-text {\n font-size: var(--instui-component-heading-title-card-mini-font-size);\n line-height: var(--instui-component-heading-title-card-regular-line-height);\n }\n}\n\n/* Link styles */\n._pendo-text-link {\n text-decoration: var(--instui-component-link-text-decoration-within-text);\n font-weight: var(--instui-component-link-font-weight);\n /* border-radius added to ensure focus outline has rounded corners, matching the shape of the link text */\n border-radius: var(--instui-component-shared-tokens-border-radius-sm);\n color: var(--instui-component-link-text-color);\n\n &:is(:hover, :active, :focus) {\n color: var(--instui-component-link-text-hover-color);\n }\n\n &:disabled {\n color: var(--instui-component-link-text-disabled-color);\n }\n}\n\n/* List styles */\n._pendo-simple-text ol,\n._pendo-simple-text ul {\n padding-left: var(--pendo-space-0);\n}\n\n/* Surveys*/\n._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n /* @TODO: Surveys are terrible, clean this up. */\n\n & *:not(._pendo-close-guide) {\n font-size: var(--instui-component-heading-title-card-mini-font-size);\n }\n\n &,\n /* PMF Thank You text\n * @TODO: validate selector, ._pendo-simple-text does not have span nested\n */\n ._pendo-row:has(+ ._pendo-row > ._pendo-button-primaryButton) ._pendo-simple-text:has(> span:not([class])),\n /* UX Lite question labels (exclude form control wrappers with inputs) */\n .pendo-survey-wrapper>div:not(:has([class])):not(:has(input)),\n h2._pendo-simple-text,\n h2._pendo-text-title ._pendo-simple-text,\n ._pendo-simple-text._pendo-nps-open-text-poll-question {\n font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n font-family: var(--instui-component-heading-title-card-mini-font-family);\n font-size: var(--instui-component-heading-title-card-mini-font-size);\n line-height: var(--instui-component-heading-title-card-mini-line-height);\n margin: var(--pendo-space-0) var(--pendo-space-0)\n var(--instui-component-shared-tokens-spacing-general-space-sm);\n }\n\n /* NPS question labels */\n h2._pendo-text-title ._pendo-simple-text,\n ._pendo-simple-text._pendo-nps-open-text-poll-question {\n text-align: left;\n }\n\n /* NPS/survey completion messages */\n h2._pendo-text-title._pendo-nps-poll-success-message ._pendo-simple-text {\n text-align: center;\n }\n\n /* NPS label sits left/right of scale, not below */\n ._pendo-nps-poll-lowerbound-label,\n ._pendo-nps-poll-upperbound-label {\n font-style: normal;\n font-size: var(--instui-component-metric-label-font-size);\n font-weight: var(--instui-component-metric-label-font-weight);\n line-height: var(--instui-line-height-standalone-text-xs);\n text-align: center;\n color: var(--instui-component-text-muted-color);\n }\n\n /* UX Lite & CSAT scale labels */\n .pendo-survey-wrapper label + div {\n font-size: var(--instui-component-metric-label-font-size);\n padding-top: var(--instui-component-shared-tokens-spacing-general-space-xs);\n text-align: left;\n }\n}\n";
22
13
  //#endregion
23
14
  //#region src/layers.ts
24
15
  /**
25
- * The Instructure Pendo-guide component CSS, ported verbatim from
26
- * `@instructure/pendo-global-css` (`src/themes/instui/`, MIT, same org). Each component keeps its
27
- * original authored rules targeting Pendo's guide DOM (`._pendo-*`); only the assembly (cascade
28
- * `@layer` order + token source) is pantoken's. The CSS is inlined into `generated/embedded.ts` by
29
- * `scripts/embed.ts` — the published package carries no runtime file reads.
16
+ * The Instructure Pendo-guide component CSS, ported from `@instructure/pendo-global-css`
17
+ * (MIT, same org) and extended with pantoken optimisations. The CSS is inlined into
18
+ * `generated/embedded.ts` by `scripts/embed.ts` — the published package carries no runtime file reads.
19
+ *
20
+ * File map (7 source files → 5 cascade layers):
21
+ * container ← container.css (alert + popover + survey layout variants)
22
+ * card ← card.css (shared card shell + row layout)
23
+ * text ← text.css
24
+ * chrome ← chrome.css (backdrop, image, video, divider, close button)
25
+ * button ← button.css
26
+ * inputs ← inputs.css (textarea, select, radio group, number-scale/NPS)
30
27
  *
31
28
  * @module
32
29
  */
33
- /** The `--manual-*` extras + tokens InstUI doesn't ship (focus transitions, logos, TextArea dims). */
34
- const MANUAL_CSS = manualCss;
30
+ /** The `--pendo-*` local aliases, override tokens, and logo references. */
31
+ const PENDO_VARS_CSS = "/**\n * @component pendo-vars\n * @selector [class*=\"instui\"]\n * @summary Local CSS custom properties for Pendo guide layout constants and upstream token gaps.\n * @remarks All properties are scoped to `[class*=\"instui\"]` and consumed by the other pendo CSS files.\n * `--pendo-space-0` aliases the upstream zero-spacing sentinel to avoid repeating the full token path.\n * `--pendo-input-border-style` fills a gap where the upstream set does not yet supply a `border-style`\n * token for text inputs and text areas.\n * @cssproperty --pendo-embedded-width <length> — Max-width of the embedded (lightboxBlank) guide container.\n * @cssproperty --pendo-alert-indent <length> — Width of the alert's coloured sidebar strip.\n * @cssproperty --pendo-overlay-width <length> — Max-width of the overlay (tooltipBlank) guide container.\n * @cssproperty --pendo-space-0 <length> — Zero-spacing alias; maps to the upstream `space-none` token.\n * @cssproperty --pendo-input-border-style <custom-ident> — Border-style fallback for inputs (`solid`); remove when the upstream token ships.\n * @cssproperty --instui-component-text-area-min-height <length> — TextArea floor height; no upstream token yet.\n * @cssproperty --instui-component-text-area-max-height <length> — TextArea ceiling height; no upstream token yet.\n * @cssproperty --instui-component-text-area-max-width <length> — TextArea max-width; no upstream token yet.\n */\n[class*=\"instui\"] {\n /* Embedded guide max-width (lightboxBlank layout) */\n --pendo-embedded-width: 59.25rem;\n /* Alert sidebar strip width */\n --pendo-alert-indent: 2.5rem;\n /* Overlay/popover guide max-width (tooltipBlank layout) */\n --pendo-overlay-width: 22.5rem;\n /* Shorthand for the zero-spacing sentinel */\n --pendo-space-0: var(--instui-component-shared-tokens-spacing-general-space-none);\n /* Workaround: --instui-component-text-input/text-area-border-style not yet in upstream token set */\n --pendo-input-border-style: solid;\n\n /* TextArea: clamp to pendo-specific dimensions not in upstream tokens */\n --instui-component-text-area-min-height: 4rem;\n --instui-component-text-area-max-height: 6rem;\n --instui-component-text-area-max-width: 20rem;\n}\n";
35
32
  /**
36
- * Cascade order (lowest → highest), from the source `layers.css`. Layered `!important` beats Pendo's
33
+ * Cascade order (lowest → highest). Layered `!important` beats Pendo's
37
34
  * own unlayered `!important`, so guide styles stay on top.
38
35
  */
39
36
  const LAYER_ORDER = [
40
37
  "tokens",
41
38
  "elevation",
42
- "icons",
43
- "popover",
44
- "alert",
39
+ "container",
40
+ "card",
45
41
  "text",
46
- "closeButton",
47
- "img",
48
- "inputs",
42
+ "chrome",
49
43
  "button",
50
- "pagination",
51
- "mask",
52
- "view",
53
- "card",
54
- "manual",
44
+ "inputs",
45
+ "vars",
55
46
  "focusOutline"
56
47
  ];
57
- /** The component CSS in cascade order (the `tokens` and `manual` layers are handled separately). */
48
+ /** The component CSS in cascade order (the `tokens` and `vars` layers are handled separately). */
58
49
  const COMPONENTS = [
59
50
  {
60
- layer: "icons",
61
- css: videoCss
62
- },
63
- {
64
- layer: "popover",
65
- css: popoverCss
51
+ layer: "container",
52
+ css: containerCss
66
53
  },
67
54
  {
68
- layer: "alert",
69
- css: alertCss
55
+ layer: "card",
56
+ css: cardCss
70
57
  },
71
58
  {
72
59
  layer: "text",
73
60
  css: textCss
74
61
  },
75
62
  {
76
- layer: "closeButton",
77
- css: closeButtonCss
78
- },
79
- {
80
- layer: "img",
81
- css: imgCss
82
- },
83
- {
84
- layer: "inputs",
85
- css: [
86
- textareaCss,
87
- selectCss,
88
- radioGroupCss
89
- ].join("\n")
63
+ layer: "chrome",
64
+ css: chromeCss
90
65
  },
91
66
  {
92
67
  layer: "button",
93
68
  css: buttonCss
94
69
  },
95
70
  {
96
- layer: "pagination",
97
- css: paginationCss
98
- },
99
- {
100
- layer: "mask",
101
- css: maskCss
102
- },
103
- {
104
- layer: "view",
105
- css: viewCss
106
- },
107
- {
108
- layer: "card",
109
- css: cardCss
71
+ layer: "inputs",
72
+ css: inputsCss
110
73
  }
111
74
  ];
112
75
  //#endregion
@@ -163,10 +126,7 @@ const addScope = Object.assign(function addScope(options = {}) {
163
126
  });
164
127
  const hoisted = [];
165
128
  const moved = [];
166
- for (const node of root.nodes) {
167
- const bareLayer = node.type === "atrule" && node.name === "layer" && !node.nodes;
168
- (node.type === "atrule" && node.name === "property" || bareLayer ? hoisted : moved).push(node.clone());
169
- }
129
+ for (const node of root.nodes) (node.type === "atrule" && node.name === "property" ? hoisted : moved).push(node.clone());
170
130
  root.removeAll();
171
131
  for (const node of hoisted) root.append(node);
172
132
  for (const node of moved) scope.append(node);
@@ -183,19 +143,19 @@ const addScope = Object.assign(function addScope(options = {}) {
183
143
  * the guide container `[class*="instui"]` — the drop-in replacement for pendo-styles' generated
184
144
  * `vendor/tokens.css`. On top sit the ported component layers (see {@link COMPONENTS}), assembled in
185
145
  * `@layer` cascade order, then run through the package-local `add-important` and `add-scope`
186
- * transforms so the result is a deployable guide stylesheet.
146
+ * transforms so the result is a deployable guide stylesheet. The `vars` layer holds
147
+ * `--pendo-*` aliases and token overrides; the `chrome` layer holds backdrop, image, and divider.
187
148
  *
188
149
  * @module
189
150
  */
190
151
  /** The guide container selector the token layer and component rules are scoped under. */
191
152
  const GUIDE_SELECTOR = "[class*=\"instui\"]";
192
153
  /**
193
- * The pure-outline focusables whose ring is delegated to the focus-outline rules from
194
- * `@pantoken/components`. Elements
195
- * with custom focus behaviour (select/textarea background resets, radio and number-scale sibling
196
- * outlines, the card's `:focus-visible` reset) keep their own rules and are left off this list.
154
+ * Focusables whose ring is fully delegated to focusLayer(). Elements with additional focus
155
+ * behaviour (card `:focus-visible` reset, input background/border resets, radio sibling label
156
+ * suppression) keep component-specific `:focus` rules but omit the outline declarations.
197
157
  */
198
- const FOCUSABLES = "._pendo-button, ._pendo-close-guide, ._pendo-text-link";
158
+ const FOCUSABLES = "._pendo-button, ._pendo-close-guide, ._pendo-text-link, select._pendo-multi-choice-poll-select, ._pendo-open-text-poll-input, input.pendo-radio";
199
159
  /** Build the `instui.elevation` layer: the named `--instui-elevation-*` box-shadow custom props. */
200
160
  function elevationLayer() {
201
161
  return `@layer instui.elevation {\n${elevationCss({ selector: GUIDE_SELECTOR })}}`;
@@ -227,15 +187,20 @@ function focusLayer() {
227
187
  * ```
228
188
  */
229
189
  function buildPendoCss(options = {}) {
230
- const { theme = "rebrand", scopeSelector = "._pendo-step-container", scope = true, important = true, prune = true } = options;
190
+ const { theme = "rebrand", scopeSelector = "._pendo-step-container", scope = true, important = true, prune = true, flatten = false, mangle = false } = options;
231
191
  const tokenCss = toCss(byTheme(theme), { scope: GUIDE_SELECTOR });
232
192
  const order = `@layer ${LAYER_ORDER.map((l) => `instui.${l}`).join(", ")};`;
233
- const tokenLayer = `@layer instui.tokens {\n${tokenCss}\n\n${MANUAL_CSS}\n}`;
193
+ const tokenLayer = `@layer instui.tokens {\n${tokenCss}\n\n${PENDO_VARS_CSS}\n}`;
234
194
  const components = COMPONENTS.map((c) => `@layer instui.${c.layer} {\n${c.css}\n}`).join("\n\n");
235
195
  const full = `${order}\n\n${tokenLayer}\n\n${elevationLayer()}\n\n${components}\n\n${focusLayer()}`;
236
196
  const plugins = [];
237
197
  if (important) plugins.push(addImportant());
238
198
  if (prune) plugins.push(pruneCustomProps());
199
+ if (flatten) plugins.push(flattenProperty(flatten === true ? { injectSelector: ":scope" } : {
200
+ injectSelector: ":scope",
201
+ ...flatten
202
+ }));
203
+ if (mangle) plugins.push(mangleCustomProps(mangle === true ? {} : mangle));
239
204
  if (scope) plugins.push(addScope({ selector: scopeSelector }));
240
205
  return `${plugins.length ? postcss(plugins).process(full, { from: void 0 }).css : full}\n`;
241
206
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pantoken/pendo",
3
- "version": "0.1.10",
3
+ "version": "0.3.0",
4
4
  "description": "Instructure-styled global CSS for Pendo guides, built on pantoken tokens (ported from @instructure/pendo-global-css).",
5
5
  "homepage": "https://pantoken.iywahl.com",
6
6
  "bugs": "https://github.com/thedannywahl/pantoken/issues",
@@ -37,7 +37,7 @@
37
37
  "@pantoken/components": "workspace:*",
38
38
  "@pantoken/css": "workspace:*",
39
39
  "@pantoken/model": "workspace:*",
40
- "@pantoken/plugin-prune-custom-props": "workspace:*",
40
+ "@pantoken/plugin-props-minify": "workspace:*",
41
41
  "@pantoken/tokens": "workspace:*",
42
42
  "postcss": "catalog:"
43
43
  },