:root {
  --lu-start-navy: #020827;
  --lu-start-navy-700: #002147;
  --lu-start-cyan: #00aad2;
  --lu-start-ink: #1e1f27;
  --lu-start-muted: #6c6e7a;
  --lu-start-border: #bccacd;
  --lu-start-surface: #ffffff;
  --lu-start-radius: 4px;
  --lu-start-font: "Figtree", system-ui, sans-serif;
}

html,
body.levelup-start {
  margin: 0;
  min-height: 100%;
  font-family: var(--lu-start-font);
  color: var(--lu-start-ink);
  background: var(--lu-start-surface);
}

.levelup-start__header {
  background: var(--lu-start-navy);
  padding: 1.25rem 1rem;
}

.levelup-start__logo-link {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

.levelup-start__logo {
  display: block;
  width: 200px;
  max-width: 70vw;
  height: auto;
  margin: 0 auto;
}

.levelup-start__main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1.5rem clamp(1rem, 4vw, 3rem) 3rem;
  box-sizing: border-box;
}

#surveyContainer {
  width: 100%;
  display: flex;
  justify-content: center;
}

.levelup-start__response {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--lu-start-muted);
  text-align: center;
}

/* SurveyJS brand overrides */
.levelup-start .sd-root-modern {
  --sjs-base-unit: 8px;
  --sjs-primary-backcolor: var(--lu-start-navy-700);
  --sjs-primary-backcolor-dark: var(--lu-start-navy);
  --sjs-primary-backcolor-light: rgba(0, 33, 71, 0.12);
  --sjs-primary-forecolor: #ffffff;
  --sjs-primary-forecolor-light: rgba(255, 255, 255, 0.35);
  --primary: var(--lu-start-navy-700);
  --primary-light: rgba(0, 33, 71, 0.12);
  --primary-foreground: #ffffff;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  font-family: var(--lu-start-font);
}

.levelup-start .sd-container-modern {
  font-family: var(--lu-start-font);
}

/* Role tag chips + dropdown selection (SurveyJS tagbox) */
.levelup-start .sv-tagbox__item {
  background-color: var(--lu-start-navy-700) !important;
  color: #fff !important;
}

.levelup-start .sv-tagbox__item-text,
.levelup-start .sv-tagbox__item-text span,
.levelup-start .sv-tagbox__item .sv-string-viewer,
.levelup-start .sv-tagbox__item .sv-string-viewer span {
  color: #fff !important;
}

.levelup-start .sd-tagbox-item_clean-button-svg,
.levelup-start .sd-tagbox-item_clean-button use,
.levelup-start .sv-tagbox__item svg {
  fill: #fff !important;
  color: #fff !important;
}

.levelup-start .sd-tagbox:focus-within {
  border-color: var(--lu-start-navy-700) !important;
  box-shadow: 0 0 0 2px rgba(0, 33, 71, 0.15) !important;
}

.levelup-start .sv-list__item.sv-list__item--selected > .sv-list__item-body,
.levelup-start .sv-list__item.sv-list__item--selected:hover > .sv-list__item-body,
.levelup-start .sv-multi-select-list .sv-list__item--selected > .sv-list__item-body {
  background-color: rgba(0, 33, 71, 0.12) !important;
  color: var(--lu-start-navy-700) !important;
}

.levelup-start .sv-list__item--focused:not(.sv-list__item--selected) > .sv-list__item-body,
.levelup-start .sv-list__item:focus > .sv-list__item-body {
  background-color: rgba(0, 33, 71, 0.08) !important;
}

/* Center the question column beside the TOC (matches original SurveyJS layout) */
.levelup-start .sd-body {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.levelup-start .sd-body__page,
.levelup-start .sd-body__navigation,
.levelup-start .sd-body__timer,
.levelup-start .sd-progress {
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
}

.levelup-start .sd-body__navigation {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.levelup-start .sd-title,
.levelup-start .sd-page__title,
.levelup-start .sd-question__title {
  color: var(--lu-start-navy-700);
  font-weight: 600;
}

.levelup-start .sd-progress__bar,
.levelup-start .sd-progress-buttons__list .sd-progress-buttons__list-element--passed,
.levelup-start .sd-progress-buttons__list .sd-progress-buttons__list-element--current {
  background-color: var(--lu-start-cyan);
}

.levelup-start .sd-btn,
.levelup-start .sd-navigation__next-btn,
.levelup-start .sd-navigation__complete-btn {
  background-color: var(--lu-start-cyan) !important;
  border-color: var(--lu-start-cyan) !important;
  color: #fff !important;
  border-radius: 9px !important;
  font-family: var(--lu-start-font);
  font-weight: 600;
}

.levelup-start .sd-btn:hover,
.levelup-start .sd-navigation__next-btn:hover,
.levelup-start .sd-navigation__complete-btn:hover {
  filter: brightness(0.95);
}

.levelup-start .sd-input,
.levelup-start input.sd-input,
.levelup-start textarea.sd-input,
.levelup-start .sd-dropdown,
.levelup-start .sd-tagbox {
  border-radius: var(--lu-start-radius) !important;
  border-color: var(--lu-start-border) !important;
  font-size: 16px !important;
  font-family: var(--lu-start-font);
}

.levelup-start .sd-input:focus,
.levelup-start input.sd-input:focus,
.levelup-start textarea.sd-input:focus {
  border-color: var(--lu-start-cyan) !important;
  box-shadow: 0 0 0 2px rgba(0, 170, 210, 0.2);
}

.levelup-start .sd-item--checked .sd-item__decorator,
.levelup-start .sd-radio--checked .sd-item__decorator,
.levelup-start .sd-checkbox--checked .sd-item__decorator {
  background-color: var(--lu-start-cyan) !important;
  border-color: var(--lu-start-cyan) !important;
}

.levelup-start .sd-item__control:focus + .sd-item__decorator,
.levelup-start .sd-checkbox__control:focus + .sd-checkbox__decorator,
.levelup-start .sd-radio__control:focus + .sd-radio__decorator,
.levelup-start .sd-item--checked .sd-item__control:focus + .sd-item__decorator,
.levelup-start .sd-checkbox--checked .sd-checkbox__control:focus + .sd-checkbox__decorator {
  outline: 2px solid var(--lu-start-cyan) !important;
  outline-offset: 2px;
  box-shadow: none !important;
  border-color: var(--lu-start-cyan) !important;
}

.levelup-start .sd-progress-buttons__list-element--current,
.levelup-start .sd-progress-buttons__list-element--passed,
.levelup-start .sv-list__item--selected,
.levelup-start .sd-list__item--selected {
  --sjs-primary-backcolor: var(--lu-start-navy-700);
  --sjs-primary-backcolor-light: rgba(0, 33, 71, 0.12);
}

.levelup-start .sv-string-viewer,
.levelup-start .sd-description {
  color: var(--lu-start-muted);
}

.levelup-start .sv-tagbox__item .sv-string-viewer {
  color: #fff !important;
}