@crystaldesign/quick-config 26.8.0-beta.8 → 26.9.0-beta.1

package/build/cjs/index.js

@@ -334,6 +334,8 @@ var subContainer = "subContainer-x97eX";
 var stickyHeader = "stickyHeader-V5orv";
 var featureContainer = "featureContainer-cTJH8";
 var featureLabel = "featureLabel-q4sHn";
+var featureLabelText = "featureLabelText-yOEyZ";
+var infoButton = "infoButton-bUZYd";
 var featureRequired = "featureRequired-tby4F";
 var featureDescription = "featureDescription-k4v-p";
 var optionDescription = "optionDescription-omLcU";
@@ -345,6 +347,7 @@ var optionsGallery = "optionsGallery-72aVW";
 var optionButton = "optionButton-tRXEs";
 var radioOption = "radioOption-sv3m6";
 var checkboxOption = "checkboxOption-UY3nL";
+var toggleButton = "toggleButton-4myWl";
 var optionButtonSelected = "optionButtonSelected-pjY9O";
 var radioOptionSelected = "radioOptionSelected-vm6bN";
 var checkboxOptionSelected = "checkboxOptionSelected-DuZGL";
@@ -362,7 +365,6 @@ var dropdown = "dropdown-fst7q";
 var radio = "radio-GesCu";
 var checkbox = "checkbox-xI7lT";
 var toggle = "toggle-fi2uF";
-var toggleButton = "toggleButton-4myWl";
 var toggleButtonSelected = "toggleButtonSelected-4SMtn";
 var resultContainer = "resultContainer-sc6De";
 var resultItem = "resultItem-84scA";
@@ -391,7 +393,7 @@ var speedometerGroupGrid = "speedometerGroupGrid-SNMAM";
 var speedometerGroupItem = "speedometerGroupItem-a4T-A";
 var speedometerGroupItemTitle = "speedometerGroupItemTitle-N35gZ";
 var contentSection = "contentSection-dJgsX";
-var css_248z = ".container-nN2kI {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  height: 100%;\n\n  max-height: calc(100vh - 40px);\n  padding: 12px;\n  box-sizing: border-box;\n  overflow: auto;\n}\n\n@supports (height: 100dvh) {\n  .container-nN2kI {\n    max-height: calc(100dvh - 40px);\n  }\n}\n\n.subContainer-x97eX {\n  flex: 1;\n  padding: 12px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.mobile .subContainer-x97eX {\n  padding: 12px 0;\n  gap: 4px;\n}\n\n.stickyHeader-V5orv {\n  position: sticky;\n  top: -12px;\n  z-index: 10;\n  background: #fff;\n  margin: -12px -12px 0 -12px;\n  padding: 12px 12px 0 12px;\n}\n\n.stickyHeaderSticky-5qqWo {\n  position: sticky;\n  top: -12px;\n  z-index: 10;\n  background: #fff;\n  margin: -12px -12px 0 -12px;\n  padding: 12px 12px 0 12px;\n}\n\n.darkmode .stickyHeader-V5orv {\n  background: #1a1a1a;\n}\n\n.featureContainer-cTJH8 {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.featureLabel-q4sHn {\n  font-size: 18px;\n  font-weight: 600;\n  margin-bottom: 10px;\n  word-wrap: break-word;\n}\n\n.featureRequired-tby4F {\n  color: red;\n}\n\n.featureDescription-k4v-p,\n.optionDescription-omLcU,\n.progressText-LXaM7 {\n  color: #666;\n}\n\n.darkmode .featureDescription-k4v-p,\n.darkmode .optionDescription-omLcU,\n.darkmode .progressText-LXaM7 {\n  color: #aaa;\n}\n\n.featureDescription-k4v-p {\n  font-size: 14px;\n  margin-bottom: 15px;\n  word-wrap: break-word;\n}\n\n.configDescription--0UjU,\n.resultDescription-7jW2U {\n  font-size: 15px;\n  color: #666;\n  margin: 12px 0 0 0;\n  word-wrap: break-word;\n}\n\n.mobile .configDescription--0UjU,\n.mobile .resultDescription-7jW2U {\n  font-size: 14px;\n  margin: 8px 0 0 0;\n}\n\n.darkmode .configDescription--0UjU,\n.darkmode .resultDescription-7jW2U {\n  color: #aaa;\n}\n\n.optionsContainer-oIEc3 {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.optionsBox-TBnRq {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));\n  grid-gap: 10px;\n  gap: 10px;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.optionsGallery-72aVW {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  grid-gap: 15px;\n  gap: 15px;\n  min-width: 0;\n  max-width: 100%;\n}\n\n/* Shared selectable option base (optionButton, radioOption, checkboxOption) */\n.optionButton-tRXEs,\n.radioOption-sv3m6,\n.checkboxOption-UY3nL {\n  padding: 12px;\n  border: 2px solid #ddd;\n  border-radius: 8px;\n  background: #fff;\n  cursor: pointer;\n  transition: all 0.2s;\n  min-width: 0;\n}\n\n.optionButton-tRXEs {\n  padding: 15px;\n  text-align: left;\n}\n\n.radioOption-sv3m6,\n.checkboxOption-UY3nL {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.darkmode .optionButton-tRXEs,\n.darkmode .radioOption-sv3m6,\n.darkmode .checkboxOption-UY3nL {\n  border-color: #444;\n  background: #2a2a2a;\n}\n\n.optionButton-tRXEs:hover,\n.radioOption-sv3m6:hover,\n.checkboxOption-UY3nL:hover {\n  border-color: #999;\n  background: #f9f9f9;\n}\n\n.darkmode .optionButton-tRXEs:hover,\n.darkmode .radioOption-sv3m6:hover,\n.darkmode .checkboxOption-UY3nL:hover {\n  border-color: #666;\n  background: #333;\n}\n\n.optionButtonSelected-pjY9O,\n.radioOptionSelected-vm6bN,\n.checkboxOptionSelected-DuZGL {\n  border-color: var(--diva-theme-palette-primary-main);\n  background: var(--diva-theme-palette-primary-light);\n}\n\n.darkmode .optionButtonSelected-pjY9O,\n.darkmode .radioOptionSelected-vm6bN,\n.darkmode .checkboxOptionSelected-DuZGL {\n  border-color: var(--diva-theme-palette-primary-main);\n  background: var(--diva-theme-palette-primary-dark);\n}\n\n.optionButtonSelected-pjY9O:hover,\n.radioOptionSelected-vm6bN:hover,\n.checkboxOptionSelected-DuZGL:hover {\n  border-color: var(--diva-theme-palette-primary-dark);\n  background: var(--diva-theme-palette-primary-light);\n}\n\n.darkmode .optionButtonSelected-pjY9O:hover,\n.darkmode .radioOptionSelected-vm6bN:hover,\n.darkmode .checkboxOptionSelected-DuZGL:hover {\n  border-color: var(--diva-theme-palette-primary-main);\n  background: var(--diva-theme-palette-primary-dark);\n}\n\n.optionLabel-oz4Zj {\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  justify-self: start;\n  gap: 5px;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  word-wrap: break-word;\n}\n\n.optionImage-LZqek {\n  display: block;\n  width: 100%;\n  max-height: 120px;\n  -o-object-fit: contain;\n     object-fit: contain;\n  margin-bottom: 8px;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n.mobile .optionImage-LZqek {\n  max-height: 90px;\n  margin-bottom: 6px;\n}\n\n.optionCaption-3d-V1 {\n  font-size: 0.75rem;\n  opacity: 0.6;\n  font-weight: normal;\n  text-align: center;\n}\n\n.optionContent-DS9Wc {\n  min-width: 0;\n  flex: 1;\n}\n\n.optionDescription-omLcU {\n  font-size: 12px;\n  min-width: 0;\n  word-wrap: break-word;\n}\n\n.progressBar-RKPZp {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 20px;\n  padding-bottom: 15px;\n  border-bottom: 1px solid #ddd;\n}\n\n.darkmode .progressBar-RKPZp {\n  border-bottom-color: #444;\n}\n\n.progressBarFill--Shc9 {\n  flex: 1;\n  height: 6px;\n  background: #e0e0e0;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.darkmode .progressBarFill--Shc9 {\n  background: #444;\n}\n\n.progressBarInner-agBx- {\n  height: 100%;\n  background: var(--diva-theme-palette-primary-main);\n  transition: width 0.3s ease;\n}\n\n.progressText-LXaM7 {\n  font-size: 14px;\n  white-space: nowrap;\n}\n\n.backButton-qRYLD {\n  padding: 8px 12px;\n  border: 1px solid #ddd;\n  background: #fff;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n}\n\n.darkmode .backButton-qRYLD {\n  border-color: #444;\n  background: #2a2a2a;\n  color: white;\n}\n\n.backButton-qRYLD:hover {\n  background: #f5f5f5;\n}\n\n.darkmode .backButton-qRYLD:hover {\n  background: #333;\n}\n\n.slider-ev57L {\n  width: 100%;\n  margin: 20px 0;\n}\n\n.sliderInput-xAXVM {\n  width: 100%;\n  height: 6px;\n  border-radius: 3px;\n  background: #e0e0e0;\n  outline: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n       appearance: none;\n}\n\n.darkmode .sliderInput-xAXVM {\n  background: #444;\n}\n\n.sliderInput-xAXVM::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--diva-theme-palette-primary-main);\n  cursor: pointer;\n  border: none;\n}\n\n.sliderInput-xAXVM::-moz-range-thumb {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--diva-theme-palette-primary-main);\n  cursor: pointer;\n  border: none;\n}\n\n.sliderValue-vwwNn {\n  text-align: center;\n  font-size: 16px;\n  font-weight: 600;\n  margin-top: 10px;\n}\n\n.dropdown-fst7q {\n  width: 100%;\n  padding: 12px;\n  border: 2px solid #ddd;\n  border-radius: 8px;\n  font-size: 16px;\n  background: #fff;\n  cursor: pointer;\n}\n\n.darkmode .dropdown-fst7q {\n  border-color: #444;\n  background: #2a2a2a;\n  color: white;\n}\n\n.radio-GesCu {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.checkbox-xI7lT {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.toggle-fi2uF {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n\n.toggleButton-4myWl {\n  flex: 1;\n  min-width: 120px;\n  padding: 15px;\n  border: 2px solid #ddd;\n  border-radius: 8px;\n  background: #fff;\n  cursor: pointer;\n  transition: all 0.2s;\n  text-align: center;\n  font-weight: 500;\n}\n\n.darkmode .toggleButton-4myWl {\n  border-color: #444;\n  background: #2a2a2a;\n  color: white;\n}\n\n.toggleButton-4myWl:hover {\n  border-color: #999;\n  background: #f9f9f9;\n}\n\n.darkmode .toggleButton-4myWl:hover {\n  border-color: #666;\n  background: #333;\n}\n\n.toggleButtonSelected-4SMtn {\n  border-color: var(--diva-theme-palette-primary-main);\n  background: var(--diva-theme-palette-primary-main);\n  color: var(--diva-theme-palette-primary-contrast-text);\n}\n\n.toggleButtonSelected-4SMtn:hover {\n  border-color: var(--diva-theme-palette-primary-dark);\n  background: var(--diva-theme-palette-primary-dark);\n  color: var(--diva-theme-palette-primary-contrast-text);\n}\n\n.resultContainer-sc6De {\n}\n\n.mobile .resultContainer-sc6De {\n  padding: 4px;\n}\n\n.resultItem-84scA {\n  display: flex;\n  justify-content: space-between;\n  padding: 15px;\n  margin-bottom: 10px;\n  background: #f5f5f5;\n  border-radius: 8px;\n}\n\n.darkmode .resultItem-84scA {\n  background: #2a2a2a;\n}\n\n.resultKey-qD5DS {\n  font-weight: 600;\n}\n\n.resultValue-42tes {\n  color: var(--diva-theme-palette-primary-main);\n  font-weight: 500;\n}\n\n.buttonContainer-UZKoO {\n  display: flex;\n  gap: 10px;\n  justify-content: flex-end;\n  padding: 20px 0;\n  border-top: 1px solid #ddd;\n}\n\n.navLeftGroup-JOQ3N {\n  display: flex;\n  gap: 10px;\n  flex: 1;\n}\n\n.navRightGroup-mWCAz {\n  display: flex;\n  gap: 10px;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  flex-grow: 1;\n}\n\n.navButtonPadding-aX9-f {\n  padding: 10px 20px;\n}\n\n.darkmode .buttonContainer-UZKoO {\n  border-top-color: #444;\n}\n\n.button-CT3BR {\n  padding: 10px 20px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: #fff;\n  color: #000;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.darkmode .button-CT3BR {\n  border-color: #444;\n  background: #2a2a2a;\n  color: white;\n}\n\n.button-CT3BR:hover:not(:disabled) {\n  background: #f5f5f5;\n  border-color: #999;\n}\n\n.darkmode .button-CT3BR:hover:not(:disabled) {\n  background: #333;\n  border-color: #666;\n}\n\n.button-CT3BR:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.buttonPrimary-b3Tur {\n  background: var(--diva-theme-palette-primary-main);\n  border-color: var(--diva-theme-palette-primary-main);\n  color: var(--diva-theme-palette-primary-contrast-text);\n}\n\n.buttonPrimary-b3Tur:hover:not(:disabled) {\n  background: var(--diva-theme-palette-primary-dark);\n  border-color: var(--diva-theme-palette-primary-dark);\n}\n\n.buttonPrimaryApplied-90Q5- {\n  background: var(--diva-theme-palette-primary-dark);\n  border-color: var(--diva-theme-palette-primary-dark);\n}\n\n.buttonCancel-HA74N {\n  background: transparent;\n  border-color: #ddd;\n  color: #666;\n}\n\n.darkmode .buttonCancel-HA74N {\n  border-color: #444;\n  color: #aaa;\n}\n\n.buttonCancel-HA74N:hover:not(:disabled) {\n  background: #f5f5f5;\n  border-color: #999;\n  color: #333;\n}\n\n.darkmode .buttonCancel-HA74N:hover:not(:disabled) {\n  background: #333;\n  border-color: #666;\n  color: white;\n}\n\n.headerContainer-fhFhh {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 40px;\n  margin-bottom: 4px;\n  position: relative;\n}\n\n.darkmode .headerContainer-fhFhh {\n  border-bottom-color: #333;\n}\n\n/* Segmented control style tabs */\n.tabWrapper-ZqpAa {\n  --tab-count: 2;\n  display: flex;\n  position: relative;\n  flex-grow: 1;\n  max-width: min(360px, 80%);\n  min-width: 0;\n  background: #f0f0f0;\n  border-radius: 10px;\n  padding: 3px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.darkmode .tabWrapper-ZqpAa {\n  background: #333;\n}\n\n.tabSlider-d133A {\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: calc((100% - 6px) / var(--tab-count));\n  height: calc(100% - 6px);\n  background: #fff;\n  border-radius: 7px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  transition: transform 0.25s ease;\n  pointer-events: none;\n}\n\n.darkmode .tabSlider-d133A {\n  background: #404040;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.tab-Cf5O4 {\n  flex: 1;\n  min-width: 0;\n  padding: 8px 16px;\n  border: none;\n  outline: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 16px;\n  font-weight: 500;\n  color: #666;\n  transition: color 0.25s ease;\n  position: relative;\n  z-index: 1;\n  text-align: center;\n}\n\n.tab-Cf5O4:focus,\n.tab-Cf5O4.focus-visible-kxYL6,\n.tab-Cf5O4:hover,\n.tab-Cf5O4:active {\n  outline: none;\n  border: none;\n  box-shadow: none;\n}\n\n.tab-Cf5O4:focus,\n.tab-Cf5O4:focus-visible,\n.tab-Cf5O4:hover,\n.tab-Cf5O4:active {\n  outline: none;\n  border: none;\n  box-shadow: none;\n}\n\n.darkmode .tab-Cf5O4 {\n  color: #999;\n}\n\n.tabActive-B4W84 {\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.tab-Cf5O4:hover:not(.tabActive-B4W84) {\n  color: #333;\n}\n\n.darkmode .tab-Cf5O4:hover:not(.tabActive-B4W84) {\n  color: #ccc;\n}\n\n.instanceNavContainer-0U7gZ {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-top: 32px;\n  padding: 0;\n  background: transparent;\n  border-radius: 0;\n  border: none;\n}\n\n.darkmode .instanceNavContainer-0U7gZ {\n  background: transparent;\n  border-color: transparent;\n}\n\n.instanceNavButtons-HMFdy {\n  display: flex;\n  flex-direction: row;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.buttonSecondary-Fs2ci {\n  background: #fff;\n  border: 1px solid var(--diva-theme-palette-primary-main);\n  color: var(--diva-theme-palette-primary-main);\n  font-size: 14px;\n}\n\n.darkmode .buttonSecondary-Fs2ci {\n  background: transparent;\n  border-color: var(--diva-theme-palette-primary-main);\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.buttonSecondary-Fs2ci:hover:not(:disabled) {\n  background: var(--diva-theme-palette-primary-light);\n  color: var(--diva-theme-palette-primary-contrast-text);\n}\n\n.darkmode .buttonSecondary-Fs2ci:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--diva-theme-palette-primary-main) 10%, transparent);\n  color: var(--diva-theme-palette-primary-contrast-text);\n}\n\n.buttonWithArrow-PQQFS {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 12px 24px;\n  font-size: 16px;\n  border-radius: 8px;\n  height: auto;\n  text-align: left;\n  flex: 1;\n  min-width: 250px;\n}\n\n.closeButton-Regwf {\n  position: absolute;\n  right: -8px;\n  top: 50%;\n  transform: translateY(-50%);\n  background-color: rgba(255,255,255,0.8);\n  border-radius: 50%;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #949daf;\n  transition: color 0.2s;\n}\n\n.closeButton-Regwf:focus,\n.closeButton-Regwf.focus-visible-kxYL6,\n.closeButton-Regwf:hover,\n.closeButton-Regwf:active {\n  outline: none;\n  border: none;\n  box-shadow: none;\n}\n\n.closeButton-Regwf:focus,\n.closeButton-Regwf:focus-visible,\n.closeButton-Regwf:hover,\n.closeButton-Regwf:active {\n  outline: none;\n  border: none;\n  box-shadow: none;\n}\n\n.closeButton-Regwf:hover {\n  color: #333;\n}\n\n.darkmode .closeButton-Regwf:hover {\n  color: #fff;\n}\n\n/* Mobile Smaller Version */\n.mobile .container-nN2kI {\n  padding: 12px;\n}\n\n.mobile .subContainer-x97eX {\n  padding: 12px 0;\n}\n\n.mobile .featureLabel-q4sHn {\n  font-size: 16px;\n  margin-bottom: 8px;\n}\n\n.mobile .featureDescription-k4v-p {\n  font-size: 13px;\n  margin-bottom: 10px;\n}\n\n.mobile .optionButton-tRXEs {\n  padding: 10px;\n}\n\n.mobile .optionLabel-oz4Zj {\n  gap: 3px;\n}\n\n.mobile .optionDescription-omLcU {\n  font-size: 11px;\n}\n\n.mobile .progressBar-RKPZp {\n  gap: 8px;\n  margin-bottom: 15px;\n  padding-bottom: 10px;\n}\n\n.mobile .progressText-LXaM7 {\n  font-size: 12px;\n}\n\n.mobile .backButton-qRYLD {\n  padding: 6px 10px;\n  font-size: 13px;\n}\n\n.mobile .sliderValue-vwwNn {\n  font-size: 14px;\n}\n\n.mobile .dropdown-fst7q {\n  padding: 10px;\n  font-size: 14px;\n}\n\n.mobile .radioOption-sv3m6,\n.mobile .checkboxOption-UY3nL {\n  padding: 10px;\n}\n\n.mobile .toggleButton-4myWl {\n  padding: 10px;\n  min-width: 90px;\n}\n\n.mobile .resultContainer-sc6De {\n  padding: 0px;\n}\n\n.mobile .resultTitle-WVM2- {\n  font-size: 20px;\n  margin-bottom: 15px;\n}\n\n.mobile .resultItem-84scA {\n  padding: 10px;\n}\n\n.mobile .buttonContainer-UZKoO {\n  padding: 8px 0;\n  margin-top: 6px;\n}\n\n.mobile .button-CT3BR {\n  padding: 8px 16px;\n  font-size: 13px;\n}\n\n.mobile .tab-Cf5O4 {\n  padding: 6px 12px;\n  font-size: 14px;\n}\n\n.mobile .instanceNavContainer-0U7gZ {\n  padding: 10px;\n}\n\n.resultsGrid-s3UTE {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 30px;\n}\n\n.speedometer-kKRJQ {\n  width: 100%;\n  max-width: 250px;\n  margin: 0 auto;\n  aspect-ratio: 240 / 170;\n}\n\n.speedometerGroup-SS-GT {\n  width: 100%;\n}\n\n.speedometerGroupTitle-4s2YI {\n  text-align: center;\n  margin-bottom: 4px;\n  margin-top: 4px;\n}\n\n.speedometerGroupGrid-SNMAM {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 16px;\n}\n\n.speedometerGroupItem-a4T-A {\n  text-align: center;\n  flex: 1 1 40%;\n  max-width: 45%;\n}\n\n.speedometerGroupItemTitle-N35gZ {\n  margin-bottom: 4px;\n  margin-top: 4px;\n}\n\n.speedometerValue-pbLcR {\n  color: var(--diva-theme-palette-primary-main);\n  stroke: var(--diva-theme-palette-primary-main);\n}\n\n.contentSection-dJgsX {\n  padding-top: 8px;\n}\n\n.darkmode .contentSection-dJgsX {\n  border-top-color: #333;\n}\n";
+var css_248z = ".container-nN2kI {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  height: 100%;\n\n  max-height: calc(100vh - 40px);\n  padding: 12px;\n  box-sizing: border-box;\n  overflow: auto;\n  /* Reliable touch scrolling on mobile/iOS when embedded (e.g. in the content-item drawer) */\n  touch-action: pan-y;\n  -webkit-overflow-scrolling: touch;\n  overscroll-behavior: contain;\n}\n\n@supports (height: 100dvh) {\n  .container-nN2kI {\n    max-height: calc(100dvh - 40px);\n  }\n}\n\n.subContainer-x97eX {\n  flex: 1;\n  padding: 12px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.mobile .subContainer-x97eX {\n  padding: 12px 0;\n  gap: 16px;\n}\n\n.stickyHeader-V5orv {\n  position: sticky;\n  top: -12px;\n  z-index: 10;\n  background: #fff;\n  margin: -12px -12px 0 -12px;\n  padding: 12px 12px 0 12px;\n}\n\n.stickyHeaderSticky-5qqWo {\n  position: sticky;\n  top: -12px;\n  z-index: 10;\n  background: #fff;\n  margin: -12px -12px 0 -12px;\n  padding: 12px 12px 0 12px;\n}\n\n.darkmode .stickyHeader-V5orv {\n  background: #1a1a1a;\n}\n\n.featureContainer-cTJH8 {\n  min-width: 0;\n  max-width: 100%;\n}\n\n.featureLabel-q4sHn {\n  font-size: 18px;\n  font-weight: 600;\n  margin-bottom: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.featureLabelText-yOEyZ {\n  min-width: 0;\n  word-wrap: break-word;\n}\n\n.infoButton-bUZYd {\n  flex-shrink: 0;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  border: 1.5px solid var(--diva-theme-palette-primary-main);\n  background: transparent;\n  color: var(--diva-theme-palette-primary-main);\n  font-size: 13px;\n  font-weight: 700;\n  font-style: italic;\n  font-family: Georgia, 'Times New Roman', serif;\n  line-height: 1;\n  padding: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s;\n}\n\n.infoButton-bUZYd:hover {\n  background: var(--diva-theme-palette-primary-main);\n  color: var(--diva-theme-palette-primary-contrast-text);\n}\n\n.featureRequired-tby4F {\n  color: red;\n}\n\n.featureDescription-k4v-p,\n.optionDescription-omLcU,\n.progressText-LXaM7 {\n  color: #666;\n}\n\n.darkmode .featureDescription-k4v-p,\n.darkmode .optionDescription-omLcU,\n.darkmode .progressText-LXaM7 {\n  color: #aaa;\n}\n\n.featureDescription-k4v-p {\n  font-size: 14px;\n  margin-bottom: 15px;\n  word-wrap: break-word;\n}\n\n.configDescription--0UjU,\n.resultDescription-7jW2U {\n  font-size: 15px;\n  color: #666;\n  margin: 12px 0 0 0;\n  word-wrap: break-word;\n}\n\n.mobile .configDescription--0UjU,\n.mobile .resultDescription-7jW2U {\n  font-size: 14px;\n  margin: 8px 0 0 0;\n}\n\n.darkmode .configDescription--0UjU,\n.darkmode .resultDescription-7jW2U {\n  color: #aaa;\n}\n\n.optionsContainer-oIEc3 {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.optionsBox-TBnRq {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));\n  grid-gap: 10px;\n  gap: 10px;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.optionsGallery-72aVW {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  grid-gap: 15px;\n  gap: 15px;\n  min-width: 0;\n  max-width: 100%;\n}\n\n/* Shared selectable option base (optionButton, radioOption, checkboxOption) */\n.optionButton-tRXEs,\n.radioOption-sv3m6,\n.checkboxOption-UY3nL {\n  padding: 12px;\n  border: 2px solid #ddd;\n  border-radius: 8px;\n  background: #fff;\n  cursor: pointer;\n  transition: all 0.2s;\n  min-width: 0;\n}\n\n.optionButton-tRXEs {\n  padding: 15px;\n  text-align: left;\n}\n\n/* Size containment so a long label word can't stretch the cell over its neighbor. */\n.optionButton-tRXEs,\n.toggleButton-4myWl {\n  container-type: inline-size;\n}\n\n.radioOption-sv3m6,\n.checkboxOption-UY3nL {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.darkmode .optionButton-tRXEs,\n.darkmode .radioOption-sv3m6,\n.darkmode .checkboxOption-UY3nL {\n  border-color: #444;\n  background: #2a2a2a;\n}\n\n.optionButton-tRXEs:hover,\n.radioOption-sv3m6:hover,\n.checkboxOption-UY3nL:hover {\n  border-color: #999;\n  background: #f9f9f9;\n}\n\n.darkmode .optionButton-tRXEs:hover,\n.darkmode .radioOption-sv3m6:hover,\n.darkmode .checkboxOption-UY3nL:hover {\n  border-color: #666;\n  background: #333;\n}\n\n.optionButtonSelected-pjY9O,\n.radioOptionSelected-vm6bN,\n.checkboxOptionSelected-DuZGL {\n  border-color: var(--diva-theme-palette-primary-main);\n  background: var(--diva-theme-palette-primary-light);\n}\n\n.darkmode .optionButtonSelected-pjY9O,\n.darkmode .radioOptionSelected-vm6bN,\n.darkmode .checkboxOptionSelected-DuZGL {\n  border-color: var(--diva-theme-palette-primary-main);\n  background: var(--diva-theme-palette-primary-dark);\n}\n\n.optionButtonSelected-pjY9O:hover,\n.radioOptionSelected-vm6bN:hover,\n.checkboxOptionSelected-DuZGL:hover {\n  border-color: var(--diva-theme-palette-primary-dark);\n  background: var(--diva-theme-palette-primary-light);\n}\n\n.darkmode .optionButtonSelected-pjY9O:hover,\n.darkmode .radioOptionSelected-vm6bN:hover,\n.darkmode .checkboxOptionSelected-DuZGL:hover {\n  border-color: var(--diva-theme-palette-primary-main);\n  background: var(--diva-theme-palette-primary-dark);\n}\n\n.optionLabel-oz4Zj {\n  font-weight: 500;\n  display: flex;\n  align-items: center;\n  justify-self: start;\n  gap: 5px;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  word-wrap: break-word;\n  font-size: 15px;\n}\n\n.optionImage-LZqek {\n  display: block;\n  width: 100%;\n  max-height: 120px;\n  -o-object-fit: contain;\n     object-fit: contain;\n  margin-bottom: 8px;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n\n.mobile .optionImage-LZqek {\n  max-height: 90px;\n  margin-bottom: 6px;\n}\n\n.optionCaption-3d-V1 {\n  font-size: 0.75rem;\n  opacity: 0.6;\n  font-weight: normal;\n  text-align: center;\n}\n\n.optionContent-DS9Wc {\n  min-width: 0;\n  flex: 1;\n}\n\n.optionDescription-omLcU {\n  font-size: 12px;\n  min-width: 0;\n  word-wrap: break-word;\n}\n\n.progressBar-RKPZp {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 20px;\n  padding-bottom: 15px;\n  border-bottom: 1px solid #ddd;\n}\n\n.darkmode .progressBar-RKPZp {\n  border-bottom-color: #444;\n}\n\n.progressBarFill--Shc9 {\n  flex: 1;\n  height: 6px;\n  background: #e0e0e0;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.darkmode .progressBarFill--Shc9 {\n  background: #444;\n}\n\n.progressBarInner-agBx- {\n  height: 100%;\n  background: var(--diva-theme-palette-primary-main);\n  transition: width 0.3s ease;\n}\n\n.progressText-LXaM7 {\n  font-size: 14px;\n  white-space: nowrap;\n}\n\n.backButton-qRYLD {\n  padding: 8px 12px;\n  border: 1px solid #ddd;\n  background: #fff;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n}\n\n.darkmode .backButton-qRYLD {\n  border-color: #444;\n  background: #2a2a2a;\n  color: white;\n}\n\n.backButton-qRYLD:hover {\n  background: #f5f5f5;\n}\n\n.darkmode .backButton-qRYLD:hover {\n  background: #333;\n}\n\n.slider-ev57L {\n  width: 100%;\n  /* No own vertical margin — spacing to the label above and the next question below\n     is handled uniformly by the feature label and the subContainer gap. */\n  margin: 0;\n}\n\n.sliderInput-xAXVM {\n  width: 100%;\n  height: 6px;\n  border-radius: 3px;\n  background: #e0e0e0;\n  outline: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n       appearance: none;\n}\n\n.darkmode .sliderInput-xAXVM {\n  background: #444;\n}\n\n.sliderInput-xAXVM::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--diva-theme-palette-primary-main);\n  cursor: pointer;\n  border: none;\n}\n\n.sliderInput-xAXVM::-moz-range-thumb {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--diva-theme-palette-primary-main);\n  cursor: pointer;\n  border: none;\n}\n\n.sliderValue-vwwNn {\n  text-align: center;\n  font-size: 16px;\n  font-weight: 600;\n  margin-top: 4px;\n}\n\n.dropdown-fst7q {\n  width: 100%;\n  padding: 12px;\n  border: 2px solid #ddd;\n  border-radius: 8px;\n  font-size: 16px;\n  background: #fff;\n  cursor: pointer;\n}\n\n.darkmode .dropdown-fst7q {\n  border-color: #444;\n  background: #2a2a2a;\n  color: white;\n}\n\n.radio-GesCu {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.checkbox-xI7lT {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.toggle-fi2uF {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n\n.toggleButton-4myWl {\n  flex: 1;\n  min-width: 120px;\n  padding: 15px;\n  border: 2px solid #ddd;\n  border-radius: 8px;\n  background: #fff;\n  cursor: pointer;\n  transition: all 0.2s;\n  text-align: center;\n  font-weight: 500;\n}\n\n.darkmode .toggleButton-4myWl {\n  border-color: #444;\n  background: #2a2a2a;\n  color: white;\n}\n\n.toggleButton-4myWl:hover {\n  border-color: #999;\n  background: #f9f9f9;\n}\n\n.darkmode .toggleButton-4myWl:hover {\n  border-color: #666;\n  background: #333;\n}\n\n.toggleButtonSelected-4SMtn {\n  border-color: var(--diva-theme-palette-primary-main);\n  background: var(--diva-theme-palette-primary-main);\n  color: var(--diva-theme-palette-primary-contrast-text);\n}\n\n.toggleButtonSelected-4SMtn:hover {\n  border-color: var(--diva-theme-palette-primary-dark);\n  background: var(--diva-theme-palette-primary-dark);\n  color: var(--diva-theme-palette-primary-contrast-text);\n}\n\n.resultContainer-sc6De {\n}\n\n.mobile .resultContainer-sc6De {\n  padding: 4px;\n}\n\n.resultItem-84scA {\n  display: flex;\n  justify-content: space-between;\n  padding: 15px;\n  margin-bottom: 10px;\n  background: #f5f5f5;\n  border-radius: 8px;\n}\n\n.darkmode .resultItem-84scA {\n  background: #2a2a2a;\n}\n\n.resultKey-qD5DS {\n  font-weight: 600;\n}\n\n.resultValue-42tes {\n  color: var(--diva-theme-palette-primary-main);\n  font-weight: 500;\n}\n\n.buttonContainer-UZKoO {\n  display: flex;\n  gap: 10px;\n  justify-content: flex-end;\n  padding: 20px 0;\n  border-top: 1px solid #ddd;\n}\n\n.navLeftGroup-JOQ3N {\n  display: flex;\n  gap: 10px;\n  flex: 1;\n}\n\n.navRightGroup-mWCAz {\n  display: flex;\n  gap: 10px;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  flex-grow: 1;\n}\n\n.navButtonPadding-aX9-f {\n  padding: 10px 20px;\n}\n\n.darkmode .buttonContainer-UZKoO {\n  border-top-color: #444;\n}\n\n.button-CT3BR {\n  padding: 10px 20px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: #fff;\n  color: #000;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.darkmode .button-CT3BR {\n  border-color: #444;\n  background: #2a2a2a;\n  color: white;\n}\n\n.button-CT3BR:hover:not(:disabled) {\n  background: #f5f5f5;\n  border-color: #999;\n}\n\n.darkmode .button-CT3BR:hover:not(:disabled) {\n  background: #333;\n  border-color: #666;\n}\n\n.button-CT3BR:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.buttonPrimary-b3Tur {\n  background: var(--diva-theme-palette-primary-main);\n  border-color: var(--diva-theme-palette-primary-main);\n  color: var(--diva-theme-palette-primary-contrast-text);\n}\n\n.buttonPrimary-b3Tur:hover:not(:disabled) {\n  background: var(--diva-theme-palette-primary-dark);\n  border-color: var(--diva-theme-palette-primary-dark);\n}\n\n.buttonPrimaryApplied-90Q5- {\n  background: var(--diva-theme-palette-primary-dark);\n  border-color: var(--diva-theme-palette-primary-dark);\n}\n\n.buttonCancel-HA74N {\n  background: transparent;\n  border-color: #ddd;\n  color: #666;\n}\n\n.darkmode .buttonCancel-HA74N {\n  border-color: #444;\n  color: #aaa;\n}\n\n.buttonCancel-HA74N:hover:not(:disabled) {\n  background: #f5f5f5;\n  border-color: #999;\n  color: #333;\n}\n\n.darkmode .buttonCancel-HA74N:hover:not(:disabled) {\n  background: #333;\n  border-color: #666;\n  color: white;\n}\n\n.headerContainer-fhFhh {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 40px;\n  margin-bottom: 4px;\n  position: relative;\n}\n\n.darkmode .headerContainer-fhFhh {\n  border-bottom-color: #333;\n}\n\n/* Segmented control style tabs */\n.tabWrapper-ZqpAa {\n  --tab-count: 2;\n  display: flex;\n  position: relative;\n  flex-grow: 1;\n  max-width: min(360px, 80%);\n  min-width: 0;\n  background: #f0f0f0;\n  border-radius: 10px;\n  padding: 3px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.darkmode .tabWrapper-ZqpAa {\n  background: #333;\n}\n\n.tabSlider-d133A {\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: calc((100% - 6px) / var(--tab-count));\n  height: calc(100% - 6px);\n  background: #fff;\n  border-radius: 7px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n  transition: transform 0.25s ease;\n  pointer-events: none;\n}\n\n.darkmode .tabSlider-d133A {\n  background: #404040;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.tab-Cf5O4 {\n  flex: 1;\n  min-width: 0;\n  padding: 8px 16px;\n  border: none;\n  outline: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 16px;\n  font-weight: 500;\n  color: #666;\n  transition: color 0.25s ease;\n  position: relative;\n  z-index: 1;\n  text-align: center;\n}\n\n.tab-Cf5O4:focus,\n.tab-Cf5O4.focus-visible-kxYL6,\n.tab-Cf5O4:hover,\n.tab-Cf5O4:active {\n  outline: none;\n  border: none;\n  box-shadow: none;\n}\n\n.tab-Cf5O4:focus,\n.tab-Cf5O4:focus-visible,\n.tab-Cf5O4:hover,\n.tab-Cf5O4:active {\n  outline: none;\n  border: none;\n  box-shadow: none;\n}\n\n.darkmode .tab-Cf5O4 {\n  color: #999;\n}\n\n.tabActive-B4W84 {\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.tab-Cf5O4:hover:not(.tabActive-B4W84) {\n  color: #333;\n}\n\n.darkmode .tab-Cf5O4:hover:not(.tabActive-B4W84) {\n  color: #ccc;\n}\n\n.instanceNavContainer-0U7gZ {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  margin-top: 32px;\n  padding: 0;\n  background: transparent;\n  border-radius: 0;\n  border: none;\n}\n\n.darkmode .instanceNavContainer-0U7gZ {\n  background: transparent;\n  border-color: transparent;\n}\n\n.instanceNavButtons-HMFdy {\n  display: flex;\n  flex-direction: row;\n  gap: 16px;\n  flex-wrap: wrap;\n}\n\n.buttonSecondary-Fs2ci {\n  background: #fff;\n  border: 1px solid var(--diva-theme-palette-primary-main);\n  color: var(--diva-theme-palette-primary-main);\n  font-size: 14px;\n}\n\n.darkmode .buttonSecondary-Fs2ci {\n  background: transparent;\n  border-color: var(--diva-theme-palette-primary-main);\n  color: var(--diva-theme-palette-primary-main);\n}\n\n.buttonSecondary-Fs2ci:hover:not(:disabled) {\n  background: var(--diva-theme-palette-primary-light);\n  color: var(--diva-theme-palette-primary-contrast-text);\n}\n\n.darkmode .buttonSecondary-Fs2ci:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--diva-theme-palette-primary-main) 10%, transparent);\n  color: var(--diva-theme-palette-primary-contrast-text);\n}\n\n.buttonWithArrow-PQQFS {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 12px 24px;\n  font-size: 16px;\n  border-radius: 8px;\n  height: auto;\n  text-align: left;\n  flex: 1;\n  min-width: 250px;\n}\n\n/* Matches the content-item header close button (32x32 circle, grey cross, border on hover) */\n.closeButton-Regwf {\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 32px;\n  height: 32px;\n  box-sizing: border-box;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 50%;\n  outline: none;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #949daf;\n  transition:\n    color 0.2s ease,\n    border-color 0.2s ease-in;\n}\n\n.closeButton-Regwf:focus,\n.closeButton-Regwf.focus-visible-kxYL6,\n.closeButton-Regwf:active {\n  outline: none;\n  box-shadow: none;\n}\n\n.closeButton-Regwf:focus,\n.closeButton-Regwf:focus-visible,\n.closeButton-Regwf:active {\n  outline: none;\n  box-shadow: none;\n}\n\n.closeButton-Regwf:hover {\n  color: #333;\n  border-color: #aaa;\n}\n\n.darkmode .closeButton-Regwf:hover {\n  color: #fff;\n  border-color: #aaa;\n}\n\n/* Mobile Smaller Version */\n.mobile .container-nN2kI {\n  padding: 12px;\n}\n\n.mobile .subContainer-x97eX {\n  padding: 12px 0;\n}\n\n.mobile .featureLabel-q4sHn {\n  font-size: 16px;\n  margin-bottom: 8px;\n}\n\n.mobile .featureDescription-k4v-p {\n  font-size: 13px;\n  margin-bottom: 10px;\n}\n\n.mobile .optionButton-tRXEs {\n  padding: 10px;\n}\n\n.mobile .optionLabel-oz4Zj {\n  gap: 3px;\n  line-height: 1.2;\n  font-size: 11.5px;\n}\n\n.mobile .optionDescription-omLcU {\n  font-size: 11px;\n}\n\n.mobile .progressBar-RKPZp {\n  gap: 8px;\n  margin-bottom: 15px;\n  padding-bottom: 10px;\n}\n\n.mobile .progressText-LXaM7 {\n  font-size: 12px;\n}\n\n.mobile .backButton-qRYLD {\n  padding: 6px 10px;\n  font-size: 13px;\n}\n\n.mobile .sliderValue-vwwNn {\n  font-size: 14px;\n}\n\n.mobile .dropdown-fst7q {\n  padding: 10px;\n  font-size: 14px;\n}\n\n.mobile .radioOption-sv3m6,\n.mobile .checkboxOption-UY3nL {\n  padding: 10px;\n}\n\n.mobile .toggleButton-4myWl {\n  padding: 10px;\n  min-width: 90px;\n}\n\n.mobile .resultContainer-sc6De {\n  padding: 0px;\n}\n\n.mobile .resultTitle-WVM2- {\n  font-size: 20px;\n  margin-bottom: 15px;\n}\n\n.mobile .resultItem-84scA {\n  padding: 10px;\n}\n\n.mobile .buttonContainer-UZKoO {\n  padding: 8px 0;\n  margin-top: 6px;\n}\n\n.mobile .button-CT3BR {\n  padding: 8px 16px;\n  font-size: 13px;\n}\n\n.mobile .tab-Cf5O4 {\n  padding: 6px 12px;\n  font-size: 14px;\n}\n\n.mobile .instanceNavContainer-0U7gZ {\n  padding: 10px;\n}\n\n.resultsGrid-s3UTE {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 30px;\n}\n\n.speedometer-kKRJQ {\n  width: 100%;\n  max-width: 250px;\n  margin: 0 auto;\n  aspect-ratio: 240 / 170;\n}\n\n.speedometerGroup-SS-GT {\n  width: 100%;\n}\n\n.speedometerGroupTitle-4s2YI {\n  text-align: center;\n  margin-bottom: 4px;\n  margin-top: 4px;\n}\n\n.speedometerGroupGrid-SNMAM {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 16px;\n}\n\n.speedometerGroupItem-a4T-A {\n  text-align: center;\n  flex: 1 1 40%;\n  max-width: 45%;\n}\n\n.speedometerGroupItemTitle-N35gZ {\n  margin-bottom: 4px;\n  margin-top: 4px;\n}\n\n.speedometerValue-pbLcR {\n  color: var(--diva-theme-palette-primary-main);\n  stroke: var(--diva-theme-palette-primary-main);\n}\n\n.contentSection-dJgsX {\n  padding-top: 8px;\n}\n\n.darkmode .contentSection-dJgsX {\n  border-top-color: #333;\n}\n";
 styleInject(css_248z);
 
 var RangeLayout = function RangeLayout(_ref) {
@@ -696,23 +698,39 @@ var FeatureRenderer = function FeatureRenderer(_ref) {
   var feature = _ref.feature,
     selection = _ref.selection,
     _onSelect = _ref.onSelect,
-    selections = _ref.selections;
+    selections = _ref.selections,
+    onOpenContentItem = _ref.onOpenContentItem;
   var _useTranslation = divaCore.useTranslation(),
+    t = _useTranslation.t,
     i18n = _useTranslation.i18n;
   var language = i18n.language;
   var label = feature.label[language] || feature.label.en || feature.label.de || feature.codex;
   var description = ((_feature$description = feature.description) === null || _feature$description === void 0 ? void 0 : _feature$description[language]) || ((_feature$description2 = feature.description) === null || _feature$description2 === void 0 ? void 0 : _feature$description2.en) || ((_feature$description3 = feature.description) === null || _feature$description3 === void 0 ? void 0 : _feature$description3.de);
+  var showInfo = !!feature.contentItemId && !!onOpenContentItem;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: featureContainer,
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: featureLabel,
-      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-        dangerouslySetInnerHTML: {
-          __html: label
-        }
-      }), feature.required && /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: featureRequired,
-        children: " *"
+      children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
+        className: featureLabelText,
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          dangerouslySetInnerHTML: {
+            __html: label
+          }
+        }), feature.required && /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: featureRequired,
+          children: " *"
+        })]
+      }), showInfo && /*#__PURE__*/jsxRuntime.jsx("button", {
+        type: "button",
+        className: infoButton,
+        onClick: function onClick() {
+          return onOpenContentItem(feature.contentItemId);
+        },
+        "aria-label": t('quickconfig.moreInfo', {
+          defaultValue: 'Mehr Infos'
+        }),
+        children: "i"
       })]
     }), description && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: featureDescription,
@@ -1479,9 +1497,10 @@ function calculateVariantValue(selections, config) {
       return s.featureCodex === featureConfig.featureCodex;
     });
     if (selection && selection.selectedOptions.length > 0) {
+      var _featureConfig$option;
       // Use the first selected option
       var selectedOptionCodex = selection.selectedOptions[0];
-      var optionConfig = featureConfig.options[selectedOptionCodex];
+      var optionConfig = (_featureConfig$option = featureConfig.options) === null || _featureConfig$option === void 0 ? void 0 : _featureConfig$option[selectedOptionCodex];
       if (optionConfig) {
         variables[featureKey] = parseFloat(optionConfig.value) || 0;
       } else {
@@ -1678,6 +1697,8 @@ var useQuickConfigFeatures = function useQuickConfigFeatures(config, selections,
 var STORAGE_PREFIX = 'quickconfig.';
 var TTL_MS = 24 * 60 * 60 * 1000; // 1 day
 
+/** Transient wizard position, persisted so it survives an unmount (e.g. opening a linked content item and returning). */
+
 function loadFromStorage(storageKey) {
   try {
     var raw = localStorage.getItem(storageKey);
@@ -1688,33 +1709,43 @@ function loadFromStorage(storageKey) {
     // Legacy format: plain selections object (no TTL)
     if (!('storedAt' in parsed) || !('selections' in parsed)) {
       var legacy = parsed;
-      return _typeof__default["default"](legacy) === 'object' && legacy !== null && !Array.isArray(legacy) ? legacy : null;
+      var _selections = _typeof__default["default"](legacy) === 'object' && legacy !== null && !Array.isArray(legacy) ? legacy : null;
+      return _selections ? {
+        selections: _selections,
+        navState: null
+      } : null;
     }
     var _ref = parsed,
       selections = _ref.selections,
+      navState = _ref.navState,
       storedAt = _ref.storedAt;
     if (typeof storedAt !== 'number' || !selections || _typeof__default["default"](selections) !== 'object' || Array.isArray(selections)) return null;
     if (Date.now() - storedAt > TTL_MS) {
       localStorage.removeItem(storageKey);
       return null;
     }
-    return selections;
+    return {
+      selections: selections,
+      navState: navState !== null && navState !== void 0 ? navState : null
+    };
   } catch (_unused) {
     return null;
   }
 }
 function useQuickConfigStorage(configId) {
+  var _loaded$selections, _loaded$navState;
   var storageKey = react.useMemo(function () {
     return configId ? "".concat(STORAGE_PREFIX).concat(configId) : '';
   }, [configId]);
-  var storedSelections = react.useMemo(function () {
+  var loaded = react.useMemo(function () {
     return storageKey ? loadFromStorage(storageKey) : null;
   }, [storageKey]);
-  var persistSelections = react.useCallback(function (selections) {
+  var persistState = react.useCallback(function (selections, navState) {
     if (!storageKey) return;
     try {
       var data = {
         selections: selections,
+        navState: navState,
         storedAt: Date.now()
       };
       localStorage.setItem(storageKey, JSON.stringify(data));
@@ -1723,21 +1754,32 @@ function useQuickConfigStorage(configId) {
     }
   }, [storageKey]);
   return {
-    storedSelections: storedSelections,
-    persistSelections: persistSelections
+    storedSelections: (_loaded$selections = loaded === null || loaded === void 0 ? void 0 : loaded.selections) !== null && _loaded$selections !== void 0 ? _loaded$selections : null,
+    storedNavState: (_loaded$navState = loaded === null || loaded === void 0 ? void 0 : loaded.navState) !== null && _loaded$navState !== void 0 ? _loaded$navState : null,
+    persistState: persistState
   };
 }
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// A restored instance id is only valid if it still exists in the current instances (they depend on initialContext).
+function resolveActiveInstanceId(stored, instances) {
+  if (instances.length === 0) return 'default';
+  if (stored && instances.some(function (i) {
+    return i.id === stored;
+  })) return stored;
+  return instances[0].id;
+}
 var useQuickConfig = function useQuickConfig(_ref) {
+  var _storedNavState$curre, _storedNavState$showI;
   var config = _ref.config,
     onEvent = _ref.onEvent,
     initialContext = _ref.initialContext;
   var storageKey = config.id || config.codex;
   var _useQuickConfigStorag = useQuickConfigStorage(storageKey),
     storedSelections = _useQuickConfigStorag.storedSelections,
-    persistSelections = _useQuickConfigStorag.persistSelections;
+    storedNavState = _useQuickConfigStorag.storedNavState,
+    persistState = _useQuickConfigStorag.persistState;
   var filteredInstances = react.useMemo(function () {
     if (!config.instances) return [];
     return config.instances.filter(function (instance) {
@@ -1763,21 +1805,13 @@ var useQuickConfig = function useQuickConfig(_ref) {
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     instanceSelections = _useState2[0],
     setInstanceSelections = _useState2[1];
-  var prevStorageKeyRef = react.useRef(storageKey);
-  react.useEffect(function () {
-    if (prevStorageKeyRef.current !== storageKey) {
-      prevStorageKeyRef.current = storageKey;
-      setInstanceSelections(getInitialSelections());
-    }
-  }, [storageKey, getInitialSelections]);
-  react.useEffect(function () {
-    persistSelections(instanceSelections);
-  }, [instanceSelections, persistSelections]);
-  var _useState3 = react.useState(filteredInstances.length > 0 ? filteredInstances[0].id : 'default'),
+  var _useState3 = react.useState(function () {
+      return resolveActiveInstanceId(storedNavState === null || storedNavState === void 0 ? void 0 : storedNavState.activeInstanceId, filteredInstances);
+    }),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
     activeInstanceId = _useState4[0],
     setActiveInstanceId = _useState4[1];
-  var _useState5 = react.useState(0),
+  var _useState5 = react.useState((_storedNavState$curre = storedNavState === null || storedNavState === void 0 ? void 0 : storedNavState.currentFeatureGroupIndex) !== null && _storedNavState$curre !== void 0 ? _storedNavState$curre : 0),
     _useState6 = _slicedToArray__default["default"](_useState5, 2),
     currentFeatureGroupIndex = _useState6[0],
     setCurrentFeatureGroupIndex = _useState6[1];
@@ -1785,10 +1819,32 @@ var useQuickConfig = function useQuickConfig(_ref) {
     _useState8 = _slicedToArray__default["default"](_useState7, 2),
     result = _useState8[0],
     setResult = _useState8[1];
-  var _useState9 = react.useState(!!config.introText),
+  var _useState9 = react.useState((_storedNavState$showI = storedNavState === null || storedNavState === void 0 ? void 0 : storedNavState.showIntro) !== null && _storedNavState$showI !== void 0 ? _storedNavState$showI : !!config.introText),
     _useState10 = _slicedToArray__default["default"](_useState9, 2),
     showIntro = _useState10[0],
     setShowIntro = _useState10[1];
+
+  // Reset selections and wizard position when the config changes without a remount (keeps them in sync with the new config's storage).
+  var prevStorageKeyRef = react.useRef(storageKey);
+  react.useEffect(function () {
+    if (prevStorageKeyRef.current !== storageKey) {
+      var _storedNavState$curre2, _storedNavState$showI2;
+      prevStorageKeyRef.current = storageKey;
+      setInstanceSelections(getInitialSelections());
+      setActiveInstanceId(resolveActiveInstanceId(storedNavState === null || storedNavState === void 0 ? void 0 : storedNavState.activeInstanceId, filteredInstances));
+      setCurrentFeatureGroupIndex((_storedNavState$curre2 = storedNavState === null || storedNavState === void 0 ? void 0 : storedNavState.currentFeatureGroupIndex) !== null && _storedNavState$curre2 !== void 0 ? _storedNavState$curre2 : 0);
+      setShowIntro((_storedNavState$showI2 = storedNavState === null || storedNavState === void 0 ? void 0 : storedNavState.showIntro) !== null && _storedNavState$showI2 !== void 0 ? _storedNavState$showI2 : !!config.introText);
+    }
+  }, [storageKey, getInitialSelections, storedNavState, filteredInstances, config.introText]);
+
+  // Persist selections and wizard position so they survive an unmount (e.g. opening a linked content item and returning).
+  react.useEffect(function () {
+    persistState(instanceSelections, {
+      activeInstanceId: activeInstanceId,
+      currentFeatureGroupIndex: currentFeatureGroupIndex,
+      showIntro: showIntro
+    });
+  }, [instanceSelections, activeInstanceId, currentFeatureGroupIndex, showIntro, persistState]);
   react.useEffect(function () {
     if (result && filteredInstances.length > 0) {
       setActiveInstanceId(filteredInstances[0].id);
@@ -1802,6 +1858,11 @@ var useQuickConfig = function useQuickConfig(_ref) {
   var _useQuickConfigFeatur = useQuickConfigFeatures(config, selections, currentFeatureGroupIndex, result),
     featureGroups = _useQuickConfigFeatur.featureGroups,
     currentFeatures = _useQuickConfigFeatur.currentFeatures;
+  react.useEffect(function () {
+    if (currentFeatureGroupIndex > featureGroups.length - 1) {
+      setCurrentFeatureGroupIndex(Math.max(0, featureGroups.length - 1));
+    }
+  }, [featureGroups.length, currentFeatureGroupIndex]);
   var handleFeatureSelect = react.useCallback(function (featureCodex, selectedOptions) {
     setInstanceSelections(function (prev) {
       var currentSelections = prev[activeInstanceId] || [];
@@ -1958,7 +2019,8 @@ var QuickConfig = function QuickConfig(_ref) {
   var config = _ref.config,
     onEvent = _ref.onEvent,
     initialContext = _ref.initialContext,
-    renderContentItem = _ref.renderContentItem;
+    renderContentItem = _ref.renderContentItem,
+    onOpenContentItem = _ref.onOpenContentItem;
   var _useTranslation = divaCore.useTranslation(),
     t = _useTranslation.t,
     i18n = _useTranslation.i18n;
@@ -2091,7 +2153,8 @@ var QuickConfig = function QuickConfig(_ref) {
             return s.featureCodex === feature.codex;
           }),
           onSelect: handleFeatureSelect,
-          selections: selections
+          selections: selections,
+          onOpenContentItem: onOpenContentItem
         }, feature.codex);
       })
     }), /*#__PURE__*/jsxRuntime.jsx(Navigation, {