/*
 * Admin surveys
 *
 * Feature-level classes for the admin survey screens and the survey
 * components rendered from those screens.
 */

.admin-survey-section {
  margin-block-start: 1.5rem;
}

.admin-survey-section--large {
  margin-block-start: 2.5rem;
}

.admin-survey-panel {
  margin-block-start: 1.5rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.admin-survey-panel__header,
.admin-survey-panel__body {
  padding: 1.25rem 1rem;
}

.admin-survey-panel__header {
  border-block-end: 1px solid var(--color-border);
}

.admin-survey-panel__copy {
  max-inline-size: 36rem;
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.admin-survey-panel__copy p {
  margin: 0;
}

.admin-survey-panel__badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  background-color: rgb(var(--palette-blue-100));
  padding: 0.125rem 0.75rem;
  color: rgb(var(--palette-blue-800));
  font-size: 0.875rem;
  font-weight: 500;
}

@media (min-width: 640px) {
  .admin-survey-panel__header,
  .admin-survey-panel__body {
    padding: 1.5rem;
  }

  .admin-survey-panel__body--split {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.admin-survey-form-layout {
  display: grid;
  gap: 1.5rem;
}

.admin-survey-form-layout__main {
  margin-block-start: 1.5rem;
}

.survey-section-modal {
  display: flex;
  flex-direction: column;
  inline-size: min(60rem, calc(100vw - 2rem));
  max-block-size: calc(100vh - 2rem);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  padding: 0;
}

.survey-section-modal .turbo-modal__header {
  padding-block: 1.25rem 1rem;
  padding-inline: 1.5rem;
  border-block-end: 1px solid var(--color-border);
}

.survey-section-modal .turbo-modal__title {
  font-size: var(--text-large);
  font-weight: 700;
  line-height: 1.2;
}

.survey-section-modal .turbo-modal__content {
  flex: 1 1 auto;
  min-block-size: 0;
  margin: 0;
  overflow-y: auto;
}

.survey-section-modal__layout {
  display: grid;
  min-block-size: 0;
}

.survey-section-modal__intro {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface-muted);
}

.survey-section-modal__eyebrow,
.admin-survey-section-form__eyebrow {
  margin: 0;
  color: var(--color-brand-strong);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.survey-section-modal__heading {
  margin: 0;
}

.survey-section-modal__description {
  margin: 0;
}

.survey-section-modal__tips {
  display: grid;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.survey-section-modal__tips li {
  position: relative;
  padding-inline-start: 1.35rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  line-height: 1.35;
}

.survey-section-modal__tips li::before {
  position: absolute;
  inset-block-start: 0.35rem;
  inset-inline-start: 0;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-brand);
  content: "";
}

.survey-section-modal__main {
  min-inline-size: 0;
  padding: 1.25rem 1.5rem;
}

.admin-survey-section-form.form-frame {
  padding: 0;
}

.admin-survey-section-form {
  display: grid;
  gap: 1.25rem;
}

.admin-survey-section-form__group {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.admin-survey-section-form__group-header {
  display: grid;
  gap: 0.35rem;
}

.admin-survey-section-form__title {
  margin: 0;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.admin-survey-section-form__description {
  max-inline-size: 38rem;
  margin: 0;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  line-height: 1.35;
}

.admin-survey-section-form__fields {
  display: grid;
  gap: 1rem;
}

.admin-survey-section-form__fields--compact {
  max-inline-size: 18rem;
}

.admin-survey-section-form__actions {
  display: flex;
  justify-content: flex-end;
  padding-block-start: 0.25rem;
}

@media (min-width: 768px) {
  .admin-survey-form-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .admin-survey-form-layout__main {
    margin-block-start: 0;
  }

  .survey-section-modal__layout {
    grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.6fr);
  }

  .survey-section-modal__intro {
    border-block-end: 0;
    border-inline-end: 1px solid var(--color-border);
  }
}

.admin-survey-heading--muted {
  color: var(--color-ink-light);
}

.admin-survey-help--compact {
  margin-block-start: 0.25rem;
}

.admin-survey-help--spacious {
  margin-block-start: 1rem;
}

.admin-survey-help--strong {
  color: var(--color-subtle);
}

.admin-survey-form-row {
  margin-block-start: 1rem;
}

.admin-survey-form-frame {
  padding-block: 1rem;
  padding-inline: 2.5rem;
}

.admin-survey-form-actions__row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
}

.admin-survey-field-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 1rem;
}

@media (min-width: 768px) {
  .admin-survey-field-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-survey-field-pair__col {
  min-inline-size: 0;
}

.admin-survey-grade-fields {
  display: flex;
  inline-size: 100%;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .admin-survey-grade-fields {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-gap: 1.5rem;
  }
}

.admin-survey-question-option {
  margin-block-start: 1rem;
}

.admin-survey-question-option__row {
  display: flex;
  inline-size: 100%;
  flex-direction: column;
}

.admin-survey-question-option__title {
  inline-size: 66.666667%;
  flex-grow: 1;
  margin-inline-end: 1.5rem;
}

.admin-survey-question-option__grade {
  inline-size: 33.333333%;
}

.admin-survey-question-option__remove {
  margin-block-start: 1rem;
}

.admin-survey-question-option__remove-icon {
  margin-inline-start: 1rem;
  color: var(--color-danger-strong);
}

.admin-survey-question-option-actions {
  display: flex;
  justify-content: space-between;
  margin-block-start: 1rem;
}

@media (min-width: 640px) {
  .admin-survey-question-option__title {
    inline-size: 75%;
  }

  .admin-survey-question-option__grade {
    inline-size: 25%;
  }
}

.admin-survey-empty {
  margin-block-start: 1.5rem;
}

.admin-survey-empty__action {
  margin-block-start: 1rem;
}

.admin-survey-empty__row {
  display: flex;
  margin: -0.375rem -0.5rem;
}

.admin-survey-empty__link {
  transition:
    color 150ms ease-in-out,
    background-color 150ms ease-in-out;
}

.admin-survey-empty__link:hover,
.admin-survey-empty__link:focus {
  background-color: rgb(var(--palette-blue-100));
  outline: none;
}

.admin-survey-info-alert {
  margin-block-start: 1.5rem;
  border-radius: var(--radius-md);
  background-color: rgb(var(--palette-blue-50));
  padding: 1rem;
}

.admin-survey-info-alert__body {
  display: flex;
}

.admin-survey-info-alert__icon-wrap {
  flex-shrink: 0;
}

.admin-survey-info-alert__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: rgb(var(--palette-blue-400));
}

.admin-survey-info-alert__content {
  margin-inline-start: 0.75rem;
}

.admin-survey-info-alert__title {
  margin: 0;
  color: rgb(var(--palette-blue-800));
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.admin-survey-info-alert__text {
  margin-block-start: 0.5rem;
  color: rgb(var(--palette-blue-700));
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.admin-survey-info-alert__text p {
  margin: 0;
}

.admin-survey-info-alert__actions {
  margin-block-start: 1rem;
}

.admin-survey-list-pagination {
  margin-block-start: 1.5rem;
}

.admin-survey-table-scroll {
  overflow-x: auto;
}

.admin-survey-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1rem;
}

.admin-survey-status-note {
  margin-block-start: 0.5rem;
  color: rgb(var(--palette-blue-800));
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.admin-survey-status-note--link {
  color: var(--color-ink-light);
}

.admin-survey-dashboard {
  margin-block-start: 1.5rem;
}

.admin-survey-results,
.admin-survey-draft {
  display: grid;
  gap: 1rem;
  padding-inline: 1rem;
}

.admin-survey-results__header,
.admin-survey-draft {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}

.admin-survey-results__header {
  display: grid;
  gap: 1rem;
}

.admin-survey-results__title-group {
  min-inline-size: 0;
}

.admin-survey-results__eyebrow,
.admin-survey-draft__badge {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.6rem;
  border: 1px solid color-mix(in oklch, var(--color-brand) 24%, var(--color-border));
  border-radius: var(--radius-pill);
  background-color: color-mix(in oklch, var(--color-brand) 8%, var(--color-surface));
  padding: 0.2rem 0.65rem;
  color: var(--color-brand-strong);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.admin-survey-results__title,
.admin-survey-draft__title {
  margin: 0.65rem 0 0;
  color: var(--color-ink);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.18;
}

.admin-survey-results__description,
.admin-survey-draft__body,
.admin-survey-results-panel__description {
  max-inline-size: 58rem;
  margin: 0.35rem 0 0;
  color: var(--color-ink-light);
  font-size: 0.9rem;
  line-height: 1.45;
}

.admin-survey-results__actions,
.admin-survey-draft__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.admin-survey-results__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
}

.admin-survey-results-metric,
.admin-survey-results-panel,
.admin-survey-question-results,
.admin-survey-recent-text,
.admin-survey-results-empty,
.admin-survey-draft__readiness {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.admin-survey-results-metric {
  padding: 0.95rem;
}

.admin-survey-results-metric--good {
  border-color: color-mix(in oklch, var(--color-success) 36%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-success) 9%, var(--color-surface));
}

.admin-survey-results-metric--critical {
  border-color: color-mix(in oklch, var(--color-danger) 34%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-danger) 7%, var(--color-surface));
}

.admin-survey-results-metric__label,
.admin-survey-readiness-item__label {
  margin: 0;
  color: var(--color-ink-light);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

.admin-survey-results-metric__value {
  margin: 0.35rem 0 0;
  color: var(--color-ink);
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.05;
}

.admin-survey-results-metric__hint,
.admin-survey-readiness-item__value,
.admin-survey-recent-text__empty {
  margin: 0.35rem 0 0;
  color: var(--color-ink-lighter);
  font-size: 0.82rem;
  line-height: 1.35;
}

.admin-survey-results__grid {
  display: grid;
  gap: 1rem;
}

.admin-survey-results-panel__header {
  padding: 1rem 1rem 0;
}

.admin-survey-results-panel__title {
  margin: 0;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.admin-survey-results-panel__body {
  padding: 1rem;
}

.admin-survey-results-panel__body--chart {
  min-block-size: 18rem;
}

.admin-survey-question-results__list,
.admin-survey-recent-text__list,
.admin-survey-readiness-list {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
}

.admin-survey-question-result {
  display: grid;
  gap: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.9rem;
}

.admin-survey-question-result--empty {
  background-color: var(--color-surface-muted);
}

.admin-survey-question-result__main {
  min-inline-size: 0;
}

.admin-survey-question-result__type {
  margin: 0;
  color: var(--color-brand-strong);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2;
}

.admin-survey-question-result__title {
  margin: 0.3rem 0 0;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.admin-survey-question-result__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0.45rem 0 0;
  color: var(--color-ink-light);
  font-size: 0.84rem;
  line-height: 1.35;
}

.admin-survey-question-result__meta strong {
  color: var(--color-ink);
}

.admin-survey-question-result__distribution,
.admin-survey-question-result__answers {
  display: grid;
  gap: 0.55rem;
}

.admin-survey-distribution-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(5rem, 9rem) auto;
  gap: 0.65rem;
  align-items: center;
}

.admin-survey-distribution-row__label {
  display: flex;
  min-inline-size: 0;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
  color: var(--color-ink-light);
  font-size: 0.82rem;
}

.admin-survey-distribution-row__label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-survey-distribution-row__label strong,
.admin-survey-distribution-row__percent {
  color: var(--color-ink);
  font-size: 0.8rem;
  font-weight: 700;
}

.admin-survey-distribution-row__track {
  overflow: hidden;
  block-size: 0.55rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-subtle);
}

.admin-survey-distribution-row__track span {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background-color: var(--color-brand);
}

.admin-survey-distribution-row__percent {
  margin: 0;
  text-align: end;
}

.admin-survey-text-answer {
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
  padding: 0.85rem;
}

.admin-survey-text-answer p {
  margin: 0;
  color: var(--color-ink);
  font-size: 0.9rem;
  line-height: 1.4;
}

.admin-survey-text-answer footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 0.55rem;
  color: var(--color-ink-lighter);
  font-size: 0.78rem;
  line-height: 1.25;
}

.admin-survey-results-empty {
  padding: 1.5rem;
}

.admin-survey-results-empty__title {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.05rem;
  font-weight: 700;
}

.admin-survey-results-empty__body {
  max-inline-size: 46rem;
  margin: 0.45rem 0 0;
  color: var(--color-ink-light);
  font-size: 0.9rem;
  line-height: 1.45;
}

.admin-survey-draft {
  gap: 1.25rem;
}

.admin-survey-draft__copy {
  min-inline-size: 0;
}

.admin-survey-draft__readiness {
  overflow: hidden;
}

.admin-survey-readiness-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem;
}

.admin-survey-readiness-item--ready {
  border-color: color-mix(in oklch, var(--color-success) 36%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-success) 8%, var(--color-surface));
}

.admin-survey-readiness-item--needs_work {
  border-color: color-mix(in oklch, var(--color-warning) 42%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-warning) 10%, var(--color-surface));
}

.admin-survey-readiness-item__state {
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  padding: 0.2rem 0.55rem;
  color: var(--color-ink-light);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

@media (min-width: 760px) {
  .admin-survey-results__header,
  .admin-survey-draft {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    padding: 1.25rem;
  }

  .admin-survey-draft__readiness {
    grid-column: 1 / -1;
  }

  .admin-survey-results__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  }

  .admin-survey-question-result {
    grid-template-columns: minmax(0, 0.95fr) minmax(18rem, 1.05fr);
  }
}

@media (max-width: 640px) {
  .admin-survey-distribution-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-survey-distribution-row__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.survey-builder {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 1100px) {
  .survey-builder {
    grid-template-columns: minmax(36rem, 1fr) minmax(19rem, 22rem);
    align-items: start;
  }
}

.survey-builder__canvas {
  min-inline-size: 0;
}

.survey-builder__controls {
  min-inline-size: 0;
}

@media (min-width: 1100px) {
  .survey-builder__controls {
    position: sticky;
    inset-block-start: 1rem;
  }
}

.survey-builder-step {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid color-mix(in oklch, var(--color-brand) 26%, var(--color-border));
  border-radius: var(--radius-pill);
  background-color: color-mix(in oklch, var(--color-brand) 8%, var(--color-surface));
  color: var(--color-brand-strong);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.survey-builder-details {
  display: grid;
  gap: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  padding: 1.1rem;
}

.survey-builder-details__header,
.survey-builder-content__heading,
.survey-builder-controls__header {
  display: flex;
  min-inline-size: 0;
  gap: 0.85rem;
  align-items: flex-start;
}

.survey-builder-details__title {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

.survey-builder-details__hint,
.survey-builder-controls__description {
  max-inline-size: 40rem;
  margin: 0.25rem 0 0;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  line-height: 1.35;
}

.survey-builder-details .form-field {
  display: grid;
  gap: 0.35rem;
}

.survey-builder-details .form-field__label {
  color: var(--color-ink-light);
  font-size: 0.8rem;
  font-weight: 700;
}

.survey-builder-details .form-field--has-error .form-field__label {
  color: var(--color-critical);
}

.survey-builder-details__name {
  min-block-size: 3.35rem;
  border-color: var(--color-border-medium);
  background-color: var(--color-surface);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  box-shadow: none;
}

.survey-builder-details__description {
  min-block-size: 4.5rem;
  border-color: var(--color-border-medium);
  background-color: var(--color-surface);
  color: var(--color-ink-light);
  resize: vertical;
  box-shadow: none;
}

.survey-builder-sections {
  margin-block-start: 1.5rem;
}

.survey-builder-content {
  margin-block-start: 1rem;
}

.survey-builder-content__header {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  justify-content: space-between;
}

.survey-builder-content__title {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.1rem;
  font-weight: 700;
}

.survey-builder-content__description {
  max-inline-size: 42rem;
  margin: 0.25rem 0 0;
  color: var(--color-ink-light);
  font-size: 0.9rem;
  line-height: 1.35;
}

.survey-builder-content__section-action {
  flex: 0 0 auto;
}

.survey-builder-sections > * + * {
  margin-block-start: 1rem;
}

.survey-builder-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.survey-builder-section--flat {
  border: 0;
  border-radius: 0;
  background-color: transparent;
}

.survey-builder-section__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 1rem;
  border-block-end: 1px solid var(--color-border);
}

.survey-builder-section__handle,
.survey-builder-question__handle {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 0;
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--color-ink-lighter);
  cursor: grab;
}

.survey-builder-section__handle:focus-visible,
.survey-builder-question__handle:focus-visible {
  outline: 2px solid var(--color-brand-strong);
  outline-offset: 2px;
}

.survey-builder-question__handle--static {
  cursor: default;
}

.survey-builder-section__title {
  margin: 0;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 600;
}

.survey-builder-section__meta {
  margin: 0.2rem 0 0;
  color: var(--color-ink-lighter);
  font-size: 0.8rem;
}

.survey-builder-section__description,
.survey-builder-section__locked {
  margin: 0.35rem 0 0;
  color: var(--color-ink-light);
  font-size: 0.875rem;
}

.survey-builder-section__locked {
  padding: 1rem;
}

.survey-builder-section-actions {
  margin-block-start: 1rem;
}

.survey-builder-question-list {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem;
}

.survey-builder-question-list > * + * {
  margin-block-start: 0;
}

.survey-builder-question {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.survey-builder-question--expanded {
  border-color: var(--color-border-medium);
}

.survey-builder-question:focus-within {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus-soft);
}

.survey-builder-question__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  min-block-size: 4.25rem;
  padding: 0.7rem 0.85rem;
}

.survey-builder-question__summary[hidden],
.survey-builder-question__editor[hidden],
.survey-builder-composer-launcher[hidden] {
  display: none;
}

.survey-builder-question__summary-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  min-inline-size: 0;
}

.survey-builder-question__summary-copy {
  min-inline-size: 0;
}

.survey-builder-question__summary-title {
  margin: 0;
  overflow: hidden;
  color: var(--color-ink);
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.survey-builder-question__summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  align-items: center;
  margin: 0.25rem 0 0;
  color: var(--color-ink-light);
  font-size: 0.82rem;
  line-height: 1.25;
}

.survey-builder-question__summary-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

.survey-builder-question__type-badge,
.survey-builder-question__status-badge {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.55rem;
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.survey-builder-question__type-badge {
  border: 1px solid color-mix(in oklch, var(--color-brand) 30%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-brand) 8%, var(--color-surface));
  color: var(--color-brand-strong);
}

.survey-builder-question__status-badge {
  border: 1px solid var(--color-border-medium);
  background-color: var(--color-surface-muted);
  color: var(--color-ink-light);
}

.survey-builder-question__editor {
  display: block;
}

.survey-builder-question__form {
  --survey-builder-editor-pad: 0.75rem;
  --survey-builder-editor-offset: 5.5rem;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem 0.75rem;
  align-items: start;
  padding: var(--survey-builder-editor-pad) var(--survey-builder-editor-pad) 0;
}

.survey-builder-question__header {
  display: contents;
}

.survey-builder-question__identity {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  min-inline-size: 0;
  gap: 0.5rem;
  align-items: center;
  padding-block-start: 0.25rem;
}

.survey-builder-question__number {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  color: var(--color-ink);
  font-size: 0.85rem;
  font-weight: 600;
}

.survey-builder-question__prompt {
  grid-column: 2;
  grid-row: 1;
  min-inline-size: 0;
  padding: 0;
}

.survey-builder-question__text,
.survey-builder-composer__input {
  border: 0;
  background-color: transparent;
  padding: 0.25rem;
  box-shadow: none;
  resize: vertical;
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.4;
  field-sizing: fixed;
}

.survey-builder-question__form .input--textarea.survey-builder-question__text,
.survey-builder-composer .input--textarea.survey-builder-composer__input {
  min-block-size: 4.25rem;
  block-size: 4.25rem;
  field-sizing: fixed;
}

.survey-builder-question__text:focus,
.survey-builder-composer__input:focus {
  box-shadow: none;
}

.survey-builder-question__type-bar {
  grid-column: 2 / 4;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  padding: 0;
}

.survey-builder-question__required {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.survey-builder-question__required .form-choice-control {
  margin: 0;
}

.survey-builder-question__required .form-choice-control:disabled {
  cursor: default;
  opacity: 0.55;
}

.survey-builder-question__required:has(.form-choice-control:disabled) {
  cursor: default;
  opacity: 0.72;
}

.survey-builder-question__required--composer {
  align-self: center;
}

.survey-builder-question__choices,
.survey-builder-question__datetime,
.survey-builder-question__numeric {
  border: 0;
  padding: 0;
}

.survey-builder-question__actions {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  gap: 0.35rem;
  align-items: center;
  align-self: end;
  justify-content: flex-end;
  justify-self: end;
  padding-block-start: 0;
}

.survey-builder-question__settings,
.survey-builder-composer__settings {
  grid-column: 1 / -1;
  grid-row: 3;
  border-block-start: 1px solid var(--color-border);
  background-color: var(--color-surface-muted);
  padding: 0.7rem 0.75rem 0.75rem var(--survey-builder-editor-offset);
}

.survey-builder-question__settings {
  display: grid;
  gap: 0.85rem;
  margin-block-start: 0.1rem;
  margin-inline: calc(var(--survey-builder-editor-pad) * -1);
}

.survey-builder-question__settings-title {
  margin-block-end: 0.5rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 500;
}

.survey-builder-question__type-help {
  margin: 0;
  color: var(--color-ink-light);
  font-size: 0.85rem;
  line-height: 1.35;
}

.survey-builder-question-menu {
  position: relative;
}

.survey-builder-question-menu__button {
  display: inline-grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--radius-md);
  color: var(--color-ink-light);
  cursor: pointer;
  list-style: none;
}

.survey-builder-question-menu__button::-webkit-details-marker {
  display: none;
}

.survey-builder-question-menu__button:hover,
.survey-builder-question-menu[open] .survey-builder-question-menu__button {
  background-color: var(--color-surface-muted);
  color: var(--color-ink);
}

.survey-builder-question-menu__content {
  position: absolute;
  z-index: 6;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline-end: 0;
  min-inline-size: 10rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.survey-builder-question-menu__item {
  display: block;
  padding: 0.65rem 0.85rem;
  color: var(--color-ink);
  font-size: 0.875rem;
  text-decoration: none;
}

.survey-builder-question-menu__item:hover,
.survey-builder-question-menu__item:focus-visible {
  background-color: var(--color-surface-muted);
  outline: none;
}

.survey-builder-question-menu__item--danger {
  color: var(--color-danger-strong);
}

.survey-builder-composer-launcher {
  margin: 0.75rem;
}

.survey-builder-composer-launcher__button {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 3rem;
  border: 1px dashed var(--color-border-medium);
  border-radius: var(--radius-md);
  background-color: color-mix(in oklch, var(--color-surface-muted) 70%, var(--color-surface));
  color: var(--color-ink-light);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.survey-builder-composer-launcher__button:hover,
.survey-builder-composer-launcher__button:focus-visible {
  border-color: color-mix(in oklch, var(--color-brand) 42%, var(--color-border-medium));
  background-color: color-mix(in oklch, var(--color-brand) 7%, var(--color-surface));
  color: var(--color-brand-strong);
  outline: none;
  box-shadow: var(--shadow-focus-soft);
}

.survey-builder-composer-launcher__icon {
  display: inline-grid;
  place-items: center;
  margin-inline-end: 0.45rem;
}

.survey-builder-composer {
  --survey-builder-editor-pad: 0.75rem;
  --survey-builder-editor-offset: 5.5rem;

  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem 0.75rem;
  align-items: start;
  margin: 0.75rem;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  padding: var(--survey-builder-editor-pad);
}

.survey-builder-composer:focus-within {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus-soft);
}

.survey-builder-composer__header {
  display: contents;
}

.survey-builder-composer__actions {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  align-self: end;
  justify-self: end;
  padding-block-start: 0;
}

.survey-builder-composer__question {
  min-inline-size: 0;
}

.survey-builder-composer__prompt {
  grid-column: 2;
  grid-row: 1;
  min-inline-size: 0;
  display: block;
  margin-block-start: 0;
  padding: 0;
}

.survey-builder-composer__controls {
  grid-column: 2 / 4;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-start;
  padding-inline-start: 0;
}

.survey-builder-type-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.survey-builder-type-option {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  padding: 0.3rem 0.65rem;
  color: var(--color-ink-light);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;
}

.survey-builder-type-option:hover,
.survey-builder-type-option:focus-visible {
  background-color: var(--color-surface-muted);
  color: var(--color-ink);
  outline: none;
}

.survey-builder-type-option:focus-visible {
  box-shadow: var(--shadow-focus-soft);
}

.survey-builder-type-option--selected {
  border-color: color-mix(in oklch, var(--color-brand) 55%, var(--color-border));
  background-color: color-mix(in oklch, var(--color-brand) 10%, var(--color-surface));
  color: var(--color-brand-strong);
}

.survey-builder-type-option:disabled {
  cursor: default;
  opacity: 0.7;
}

.survey-builder-composer__settings {
  display: grid;
  gap: 0.85rem;
  margin-block-start: 0.1rem;
  margin-inline: calc(var(--survey-builder-editor-pad) * -1);
  margin-block-end: calc(var(--survey-builder-editor-pad) * -1);
}

.survey-builder-option-block,
.survey-builder-option-actions {
  margin-block-start: 0.35rem;
}

.survey-builder-option-block .form-field--inline {
  padding-block-start: 0;
}

.survey-builder-option-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.survey-builder-option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.survey-builder-option-list .admin-survey-question-option {
  margin-block-start: 0;
}

.survey-builder-option-list .admin-survey-question-option__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.survey-builder-option-list .admin-survey-question-option__title,
.survey-builder-option-list .admin-survey-question-option__grade {
  inline-size: auto;
  margin-inline-end: 0;
}

.admin-survey-question-option__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-inline-size: min(100%, 11rem);
  max-inline-size: 100%;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  padding: 0.35rem 0.6rem;
  box-shadow: var(--shadow-sm);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.admin-survey-question-option__pill:focus-within {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus-soft);
}

.admin-survey-question-option__key {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-inline-size: 1.65rem;
  block-size: 1.65rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-ink-lighter);
  color: var(--color-ink-inverted);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

.admin-survey-question-option__input {
  min-inline-size: 0;
  inline-size: 8rem;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: max(16px, 1rem);
  outline: none;
}

.admin-survey-question-option__input::placeholder {
  color: var(--color-ink-lighter);
}

.survey-builder-option-list .admin-survey-question-option__grade {
  flex: 0 1 8rem;
}

.admin-survey-question-option__remove {
  margin-block-start: 0;
}

.admin-survey-question-option__remove-link {
  display: inline-grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--radius-md);
  color: var(--color-danger-strong);
  text-decoration: none;
}

.admin-survey-question-option__remove-link:hover,
.admin-survey-question-option__remove-link:focus-visible {
  background-color: color-mix(in oklch, var(--color-danger) 10%, var(--color-surface));
  outline: none;
}

.survey-builder-controls {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  overflow: hidden;
}

.survey-builder-controls__header {
  padding: 1.15rem 1.25rem;
  border-block-end: 1px solid var(--color-border);
}

.survey-builder-controls__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

.survey-builder-controls__notice {
  margin: 1rem;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-muted);
  padding: 0.75rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
}

.survey-builder-control {
  --survey-builder-control-text-offset: 2.6rem;

  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.survey-builder-control:last-child {
  border-block-end: 0;
}

.survey-builder-control__summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
  min-block-size: 3.75rem;
  padding: 1rem 2.8rem 1rem 1.15rem;
  color: var(--color-ink);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.survey-builder-control__summary::-webkit-details-marker {
  display: none;
}

.survey-builder-control__summary:hover,
.survey-builder-control__summary:focus-visible,
.survey-builder-control[open] .survey-builder-control__summary {
  background-color: var(--color-surface-muted);
}

.survey-builder-control__summary:focus-visible {
  outline: 2px solid var(--color-brand-strong);
  outline-offset: -2px;
}

.survey-builder-control__summary::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 1.15rem;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-block-end: 2px solid var(--color-ink-light);
  border-inline-end: 2px solid var(--color-ink-light);
  transform: translateY(-60%) rotate(45deg);
  transition: transform 150ms ease;
}

.survey-builder-control[open] .survey-builder-control__summary::after {
  transform: translateY(-20%) rotate(225deg);
}

.survey-builder-control__label {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  min-inline-size: 0;
  gap: 0.7rem;
  align-items: center;
  font-size: 0.98rem;
  line-height: 1.25;
}

.survey-builder-control__label > span:last-child {
  min-inline-size: 0;
  overflow-wrap: break-word;
}

.survey-builder-control__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  color: var(--color-ink-light);
  flex: 0 0 auto;
}

.survey-builder-control__meta {
  display: flex;
  min-inline-size: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  padding-inline-start: var(--survey-builder-control-text-offset);
}

.survey-builder-control__status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-inline-size: 0;
  max-inline-size: none;
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: start;
  white-space: normal;
}

.survey-builder-control__summary > .survey-builder-control__status {
  padding-inline-start: var(--survey-builder-control-text-offset);
}

.survey-builder-control__status--warning {
  max-inline-size: none;
  color: color-mix(in oklch, var(--color-warning) 72%, var(--color-ink));
}

.survey-builder-control__status .icon {
  flex: 0 0 auto;
}

.survey-builder-control__body {
  border-block-start: 1px solid var(--color-border);
  background-color: color-mix(in oklch, var(--color-surface-muted) 78%, var(--color-surface));
  padding: 1rem 1.15rem 1.15rem;
}

.survey-builder-control__body > * + * {
  margin-block-start: 1rem;
}

.survey-builder-control__body .form-field {
  margin-block: 0;
}

.survey-builder-control__body .form-field + .form-field,
.survey-builder-control__body .frequency-form__row + .frequency-form__row {
  margin-block-start: 0.9rem;
}

.survey-builder-control__body .frequency-form__row {
  gap: 0.75rem;
}

.survey-builder-control__body .frequency-form__field {
  min-inline-size: 0;
}

.survey-builder-control--schedule .survey-builder-control__body {
  padding-block-start: 0.9rem;
}

.survey-builder-control--schedule .survey-builder-control__muted--intro {
  max-inline-size: 36rem;
  color: var(--color-ink-light);
  line-height: 1.4;
}

.survey-builder-control--schedule [data-controller="frequency"] {
  display: grid;
  gap: 0.95rem;
}

.survey-builder-control--schedule .frequency-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.85rem;
  margin-block: 0;
}

.survey-builder-control--schedule .frequency-form__row[hidden] {
  display: none;
}

.survey-builder-control--schedule .frequency-form__row + .frequency-form__row {
  margin-block-start: 0;
  border-block-start: 1px solid var(--color-border);
  padding-block-start: 0.95rem;
}

.survey-builder-control--schedule .frequency-form__row--spaced,
.survey-builder-control--schedule .frequency-form__label-wrap {
  margin-block-start: 0;
}

.survey-builder-control--schedule .frequency-form__field {
  inline-size: auto;
}

.survey-builder-control--schedule .frequency-form__periodic {
  margin-block: 0;
  border-block-start: 1px solid var(--color-border);
  padding-block-start: 0.95rem;
}

.survey-builder-control--schedule .frequency-form__periodic-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  max-inline-size: 34rem;
  cursor: pointer;
}

.survey-builder-control--schedule .frequency-form__periodic-checkbox {
  display: grid;
  flex: 0 0 auto;
  place-content: center;
  inline-size: 1.2rem;
  block-size: 1.2rem;
  margin: 0.05rem 0 0;
  appearance: none;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-inset-sm);
  cursor: pointer;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.survey-builder-control--schedule .frequency-form__periodic-checkbox::before {
  content: "";
  inline-size: 0.62rem;
  block-size: 0.62rem;
  transform: scale(0);
  transform-origin: center;
  background-color: var(--color-surface);
  clip-path: polygon(14% 52%, 0 66%, 40% 100%, 100% 18%, 84% 0, 36% 66%);
  transition: transform 120ms ease-out;
}

.survey-builder-control--schedule .frequency-form__periodic-checkbox:checked {
  border-color: var(--color-brand);
  background-color: var(--color-brand);
  box-shadow:
    var(--shadow-inset-sm),
    0 0 0 3px color-mix(in oklch, var(--color-brand) 14%, transparent);
}

.survey-builder-control--schedule .frequency-form__periodic-checkbox:checked::before {
  transform: scale(1);
}

.survey-builder-control--schedule .frequency-form__periodic-checkbox:focus-visible {
  outline: none;
  border-color: var(--color-brand);
  box-shadow:
    var(--shadow-inset-sm),
    var(--shadow-focus-soft);
}

.survey-builder-control--schedule .frequency-form__periodic-copy {
  display: grid;
  gap: 0.2rem;
  min-inline-size: 0;
}

.survey-builder-control--schedule .frequency-form__periodic-label {
  color: var(--color-ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
}

.survey-builder-control--schedule .frequency-form__periodic-message {
  color: var(--color-ink-lighter);
  font-size: 0.82rem;
  line-height: 1.35;
}

.survey-builder-control--schedule .form-field:has(> .form-field__label) {
  padding-block-start: 0;
}

.survey-builder-control--schedule .form-field__label,
.survey-builder-control--schedule .form-field__label--compact {
  color: var(--color-ink-light);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

.survey-builder-control--schedule .form-field__control,
.survey-builder-control--schedule .frequency-form__control {
  margin-block-start: 0.4rem;
}

.survey-builder-control--schedule .form-field__hint {
  max-inline-size: 18rem;
  margin-block-start: 0.4rem;
  color: var(--color-ink-lighter);
  font-size: 0.82rem;
  line-height: 1.35;
}

.survey-builder-control--schedule .frequency-form__row--time {
  grid-template-columns: minmax(0, 1fr);
}

.survey-builder-control--schedule .frequency-form__row--time .frequency-form__control {
  display: grid;
  grid-template-columns: minmax(4.75rem, 5rem) auto minmax(4.75rem, 5rem);
  inline-size: max-content;
  max-inline-size: 100%;
  column-gap: 0.35rem;
  align-items: center;
}

.survey-builder-control--schedule .frequency-form__row--time .input--inline {
  inline-size: 100%;
  min-inline-size: 0;
}

.survey-builder-control__body .visibility-form {
  margin-block-start: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  padding: 0.9rem;
}

.survey-builder-control__body .visibility-list-shell,
.survey-builder-control__body .visibility-section {
  margin-block-start: 1rem;
}

.survey-builder-control__body .visibility-list {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
}

.survey-builder-control__body .visibility-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.survey-builder-control__muted,
.survey-builder-control__summary-list {
  margin: 0;
  color: var(--color-ink-light);
  font-size: 0.875rem;
}

.survey-builder-control__summary-list {
  display: grid;
  gap: 0.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  padding: 0.75rem 0.9rem 0.75rem 1.75rem;
}

.survey-builder-controls__actions {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1.15rem 1.15rem;
  background-color: var(--color-surface);
}

@media (max-width: 760px) {
  .survey-builder-details__name {
    font-size: 1.35rem;
  }

  .survey-builder-details__header,
  .survey-builder-content__heading,
  .survey-builder-controls__header {
    gap: 0.65rem;
  }

  .survey-builder-content__header,
  .survey-builder-composer__controls {
    flex-direction: column;
    align-items: stretch;
  }

  .survey-builder-question__header,
  .survey-builder-composer__header,
  .survey-builder-composer__prompt {
    grid-template-columns: minmax(0, 1fr);
  }

  .survey-builder-question__form,
  .survey-builder-composer {
    --survey-builder-editor-offset: 0.75rem;

    grid-template-columns: minmax(0, 1fr);
  }

  .survey-builder-question__identity {
    grid-column: 1;
    grid-row: 1;
  }

  .survey-builder-question__actions,
  .survey-builder-composer__actions {
    grid-column: 1;
    grid-row: 4;
    justify-self: stretch;
  }

  .survey-builder-question__prompt,
  .survey-builder-composer__prompt {
    grid-column: 1;
    grid-row: 2;
  }

  .survey-builder-question__type-bar,
  .survey-builder-composer__controls {
    grid-column: 1;
    grid-row: 3;
  }

  .survey-builder-question__settings,
  .survey-builder-composer__settings {
    grid-column: 1;
    grid-row: 5;
  }

  .survey-builder-question__summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .survey-builder-question__summary-actions {
    justify-content: space-between;
  }

  .survey-builder-question__edit {
    flex: 1 1 auto;
  }

  .survey-builder-question__actions {
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: stretch;
  }

  .survey-builder-question__prompt,
  .survey-builder-question__type-bar,
  .survey-builder-question__settings,
  .survey-builder-composer__prompt,
  .survey-builder-composer__settings,
  .survey-builder-composer__controls {
    padding-inline-start: 0.75rem;
  }

  .survey-builder-composer__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    justify-content: stretch;
  }

  .survey-builder-question__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    gap: 0.5rem;
  }

  .survey-builder-question__required {
    grid-column: 1 / -1;
  }

  .survey-builder-question__actions > .btn,
  .survey-builder-composer__actions > .btn,
  .survey-builder-composer__submit {
    inline-size: 100%;
  }

  .survey-builder-option-list .admin-survey-question-option__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .survey-builder-control__status,
  .survey-builder-control__meta {
    justify-content: flex-start;
    text-align: start;
  }

  .survey-builder-control__status {
    max-inline-size: none;
    white-space: normal;
  }

  .survey-builder-control__status--warning {
    max-inline-size: none;
  }
}

.admin-survey-dashboard--padded {
  padding-block: 1rem;
}

.admin-survey-dashboard-split__column {
  min-inline-size: 0;
}

@media (min-width: 768px) {
  .admin-survey-dashboard-split {
    flex-direction: row;
  }

  .admin-survey-dashboard-split__column {
    inline-size: 50%;
  }
}

.admin-survey-scheduled-note {
  padding-block-start: 1rem;
  padding-inline: 2rem;
}

.admin-survey-search {
  margin-block-end: 2rem;
  padding: 0.5rem 2.5rem;
}

.admin-survey-search__fieldset {
  display: flex;
  flex-direction: column;
}

.admin-survey-search__filter {
  margin-inline-end: 1rem;
  flex-shrink: 0;
}

.admin-survey-search__select {
  display: block;
  inline-size: 100%;
  margin-block-start: 0.25rem;
  border-color: var(--color-border-medium);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: 0.875rem;
}

.admin-survey-search__submit {
  margin-block-start: 1.5rem;
}

@media (min-width: 640px) {
  .admin-survey-search__fieldset {
    flex-direction: row;
    justify-content: space-between;
  }

  .admin-survey-search__filters {
    flex-direction: row;
    align-items: center;
  }
}

.admin-survey-toolbar {
  display: flex;
  justify-content: flex-end;
}

.admin-survey-toggle-form {
  padding-block: 1rem;
  padding-inline: 2.5rem;
}

.admin-survey-toggle {
  display: flex;
  align-items: center;
}

.admin-survey-toggle__label--before {
  margin-inline-end: 0.5rem;
}

.admin-survey-toggle__label--after {
  margin-inline-start: 0.5rem;
  font-weight: 500;
}

.admin-survey-toggle__switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  inline-size: 2.75rem;
  block-size: 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background-color: var(--color-border);
  cursor: pointer;
  transition: background-color 200ms ease-in-out;
}

.admin-survey-toggle__switch--active {
  background-color: var(--color-brand-strong);
}

.admin-survey-toggle__switch:focus-visible {
  outline: 2px solid var(--color-brand-strong);
  outline-offset: 2px;
}

.admin-survey-toggle__thumb {
  display: inline-block;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-panel);
  transform: translateX(0);
  transition: transform 200ms ease-in-out;
  pointer-events: none;
}

.admin-survey-toggle__thumb--active {
  transform: translateX(1.25rem);
}

.admin-survey-action-link {
  margin-inline-end: 0.5rem;
}

.admin-survey-participants-search {
  padding: 1rem;
  background-color: var(--color-surface);
}

.admin-survey-participants-search__bar {
  display: flex;
  justify-content: space-between;
}

.admin-survey-participants-search__row {
  display: flex;
  inline-size: 100%;
  gap: 0.5rem;
}

.admin-survey-participants-search__field:focus-within {
  color: var(--color-subtle);
}

.admin-survey-participants-search__input {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-size: 0.875rem;
}

.admin-survey-participants-search__input::placeholder {
  color: var(--color-ink-lighter);
}

.admin-survey-participants-search__input:focus {
  outline: none;
}

.admin-survey-participants-search__input:focus::placeholder {
  color: var(--color-ink-medium);
}

.admin-survey-participants-search__action {
  display: flex;
  justify-content: flex-end;
  margin-block-start: 1rem;
}

.admin-survey-participants-list {
  margin-block-start: 1.5rem;
}

.admin-survey-participants-list > * + * {
  border-block-start: 1px solid var(--color-border);
}

.survey-tabs-content {
  margin-block-start: 1.5rem;
}

.evaluation-steps-form {
  margin-block-start: 1.5rem;
}

.survey-list-item:nth-of-type(odd) {
  background-color: var(--color-surface);
}

.survey-list-item:nth-of-type(even) {
  background-color: var(--color-surface-subtle);
}

.survey-list-item__link {
  display: inline-flex;
  align-items: center;
  color: var(--color-brand-strong);
  font-weight: 500;
  transition: color 150ms ease-in-out;
}

.survey-list-item__link:hover {
  color: var(--color-brand);
}

.survey-list-item__flag {
  color: var(--color-ink-lighter);
  font-size: 0.75rem;
}

.survey-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
}

.survey-pill--active,
.survey-pill--completed {
  background-color: rgb(var(--palette-green-100));
  color: rgb(var(--palette-green-800));
}

.survey-pill--scheduled,
.survey-pill--in-progress {
  background-color: rgb(var(--palette-yellow-200));
  color: rgb(var(--palette-yellow-800));
}

.survey-pill--closed {
  background-color: rgb(var(--palette-pink-100));
  color: rgb(var(--palette-pink-800));
}

.survey-pill--draft,
.survey-pill--pending {
  background-color: rgb(var(--palette-indigo-100));
  color: rgb(var(--palette-indigo-800));
}

.survey-pill--no-questions {
  background-color: rgb(var(--palette-red-100));
  color: rgb(var(--palette-red-800));
}

.survey-pill--poll {
  background-color: rgb(var(--palette-amber-100));
  color: rgb(var(--palette-amber-800));
}

.survey-pill--feedback {
  background-color: rgb(var(--palette-lime-200));
  color: rgb(var(--palette-lime-800));
}

.survey-pill--nps {
  background-color: rgb(var(--palette-cyan-50));
  color: rgb(var(--palette-cyan-800));
}

.survey-pill--climate {
  background-color: rgb(var(--palette-fuchsia-200));
  color: rgb(var(--palette-fuchsia-900));
}

.survey-pill--default {
  background-color: rgb(var(--palette-zinc-200));
  color: rgb(var(--palette-zinc-700));
}

.survey-pill--question {
  border-radius: var(--radius-md);
  padding-inline: 0.625rem;
}

.survey-pill--text {
  background-color: rgb(var(--palette-lime-100));
  color: rgb(var(--palette-lime-800));
}

.survey-pill--numeric {
  background-color: rgb(var(--palette-orange-100));
  color: rgb(var(--palette-orange-800));
}

.survey-pill--rating {
  background-color: rgb(var(--palette-sky-100));
  color: rgb(var(--palette-sky-800));
}

.survey-pill--selection {
  background-color: rgb(var(--palette-fuchsia-100));
  color: rgb(var(--palette-fuchsia-900));
}

.survey-participant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.75rem;
}

.survey-participant__identity {
  display: flex;
  align-items: center;
}

.survey-participant__details,
.survey-participant__action {
  margin-inline-start: 1rem;
}

.survey-participant__name {
  color: var(--color-ink);
  font-weight: 500;
}

.survey-participant__meta {
  color: var(--color-ink-light);
  font-size: 0.875rem;
}

.survey-participant__warning {
  color: rgb(var(--palette-pink-900));
  font-weight: 500;
}

.survey-result-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.survey-result-link--approved {
  color: var(--color-success-strong);
}

.survey-result-link--approved:hover {
  background-color: rgb(var(--palette-green-100));
}

.survey-result-link--rejected {
  color: rgb(var(--palette-pink-600));
}

.survey-result-link--rejected:hover {
  background-color: rgb(var(--palette-pink-100));
}

.survey-result-link--default {
  color: var(--color-brand-strong);
}

.survey-result-link--default:hover {
  background-color: rgb(var(--palette-indigo-100));
}

.survey-result-badge {
  margin-inline-start: 1rem;
}

.survey-result-badge--result-10 {
  background-color: rgb(var(--palette-red-100));
  color: rgb(var(--palette-red-800));
}

.survey-result-badge--result-20 {
  background-color: rgb(var(--palette-blue-100));
  color: rgb(var(--palette-blue-800));
}

.survey-result-badge--result-30 {
  background-color: rgb(var(--palette-green-100));
  color: rgb(var(--palette-green-800));
}

.survey-result-badge--default {
  background-color: rgb(var(--palette-yellow-100));
  color: rgb(var(--palette-yellow-800));
}

.survey-messages {
  margin-block-start: 1.5rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.survey-messages__header,
.survey-message {
  padding-block: 1.25rem;
  padding-inline: 1rem;
}

.survey-message {
  border-block-start: 1px solid var(--color-border);
}

.survey-message__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1rem;
  row-gap: 2rem;
}


.survey-message__body {
  margin-block-start: 1rem;
}


@media (min-width: 640px) {
  .survey-messages__header,
  .survey-message {
    padding-inline: 1.5rem;
  }

  .survey-message__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .survey-message__body {
    grid-column: span 2;
  }
}

.survey-distribution {
  margin-block-start: 1.5rem;
}

.survey-distribution__grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-block-start: 1.5rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.survey-distribution__item {
  padding-block: 1.25rem;
  padding-inline: 1rem;
}

.survey-distribution__item + .survey-distribution__item {
  border-block-start: 1px solid var(--color-border);
}

.survey-distribution__label {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.survey-distribution__label--good {
  color: rgb(var(--palette-green-700));
}

.survey-distribution__label--fine {
  color: rgb(var(--palette-blue-700));
}

.survey-distribution__label--bad {
  color: rgb(var(--palette-red-700));
}


.survey-distribution__count {
  margin-inline-start: 0.5rem;
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

@media (min-width: 768px) {
  .survey-distribution__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .survey-distribution__item + .survey-distribution__item {
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-border);
  }

  .survey-distribution__value {
    display: block;
  }
}

@media (min-width: 1024px) {
  .survey-distribution__value {
    display: flex;
  }
}

.survey-option-menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-block: 2.5rem;
  overflow: hidden;
  background-color: var(--color-border);
}

.survey-option-card {
  position: relative;
  background-color: var(--color-surface);
  padding: 1.5rem;
}

.survey-option-card:focus-within {
  box-shadow: inset 0 0 0 2px var(--color-brand);
}

.survey-option-card__icon-wrap {
  display: inline-flex;
  border-radius: var(--radius-lg);
  background-color: rgb(var(--palette-teal-50));
  padding: 0.75rem;
  color: rgb(var(--palette-teal-700));
  box-shadow: 0 0 0 4px var(--color-surface);
}

.survey-option-card__content {
  margin-block-start: 2rem;
}

.survey-option-card__title {
  margin: 0;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.survey-option-card__link {
  display: block;
}

.survey-option-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.survey-option-card__arrow {
  position: absolute;
  inset-block-start: 1.5rem;
  inset-inline-end: 1.5rem;
  color: var(--color-border-medium);
  pointer-events: none;
}

.survey-option-card:hover .survey-option-card__arrow {
  color: var(--color-ink-medium);
}

@media (min-width: 640px) {
.survey-option-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.survey-votes {
  margin-block-start: 1.5rem;
}


.survey-vote {
  margin-block-end: 1rem;
  padding-block-end: 1rem;
  padding-inline: 1rem;
  border-block-end: 1px solid var(--color-border-medium);
}

.survey-vote__row {
  display: flex;
  column-gap: 0.75rem;
  padding-inline: 1rem;
}

.survey-vote__avatar {
  flex-shrink: 0;
}

.survey-vote__content {
  min-inline-size: 0;
}

.survey-vote__summary,
.survey-vote__description,
.survey-vote__meta {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.survey-vote__employee {
  color: var(--color-ink);
  font-weight: 500;
}

.survey-vote__description {
  margin-block-start: 0.25rem;
  color: var(--color-ink-light);
}

.survey-vote__replies {
  display: flex;
}

.survey-vote__meta {
  margin-block-start: 0.5rem;
}

.survey-vote__timestamp {
  color: var(--color-ink-lighter);
  font-weight: 500;
}

.survey-main-question {
  margin-block-start: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.survey-main-question:first-child {
  margin-block-start: 0;
}

.survey-main-question:focus-within {
  border-color: rgb(var(--palette-indigo-300));
  box-shadow: var(--shadow-focus-soft);
}

.survey-main-question--error {
  border-color: rgb(var(--palette-red-300));
  background-color: color-mix(in oklch, var(--color-surface) 92%, rgb(var(--palette-red-50)));
}

.survey-main-question__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.survey-main-question__title {
  max-inline-size: 62ch;
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 600;
  line-height: 1.35;
}

.survey-main-question__meta {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.375rem;
}

.survey-main-question__type,
.survey-main-question__requirement {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.75rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  color: var(--color-ink-light);
  font-size: var(--text-x-small);
  font-weight: 600;
  line-height: 1;
}

.survey-main-question--required .survey-main-question__requirement {
  border-color: rgb(var(--palette-indigo-200));
  background-color: rgb(var(--palette-indigo-50));
  color: rgb(var(--palette-indigo-700));
}

.survey-main-question__control {
  margin-block-start: 1rem;
}

.survey-main-question__control .input {
  inline-size: 100%;
}

.survey-main-question__hint {
  margin-block-start: 0.5rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
}

.survey-main-question__error {
  margin-block-start: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgb(var(--palette-red-200));
  border-radius: var(--radius-md);
  background-color: rgb(var(--palette-red-50));
  color: rgb(var(--palette-red-700));
  font-size: var(--text-small);
}

.survey-rating {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.survey-rating__scale {
  display: grid;
  grid-template-columns: repeat(var(--survey-rating-options, 5), minmax(0, 1fr));
  gap: 0.5rem;
}

.survey-rating__choice {
  min-inline-size: 0;
}

.survey-rating__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.survey-rating__option {
  display: grid;
  align-content: start;
  gap: 0.375rem;
  min-block-size: 5.25rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-ink-light);
  cursor: pointer;
  transition:
    border-color 150ms ease-in-out,
    background-color 150ms ease-in-out,
    box-shadow 150ms ease-in-out,
    color 150ms ease-in-out;
}

.survey-rating__value {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-subtle);
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1;
}

.survey-rating__label {
  color: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.25;
}

.survey-rating__input:hover + .survey-rating__option,
.survey-rating__option:hover {
  border-color: rgb(var(--palette-indigo-300));
  background-color: color-mix(in oklch, var(--color-surface) 82%, rgb(var(--palette-indigo-50)));
}

.survey-rating__input:focus-visible + .survey-rating__option {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-focus-soft);
}

.survey-rating__input:checked + .survey-rating__option,
.survey-rating__option--selected {
  border-color: var(--color-brand);
  background-color: rgb(var(--palette-indigo-50));
  color: var(--color-brand-strong);
  box-shadow: inset 0 0 0 1px var(--color-brand);
}

.survey-rating__input:checked + .survey-rating__option .survey-rating__value,
.survey-rating__option--selected .survey-rating__value {
  background-color: var(--color-brand);
  color: var(--color-ink-inverted);
}

.survey-rating__input:disabled + .survey-rating__option {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .survey-rating__scale {
    grid-template-columns: 1fr;
  }

  .survey-rating__option {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-block-size: 3.5rem;
  }
}

.survey-answer-result {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.survey-answer-result--neutral {
  color: var(--color-ink-light);
}

.survey-answer-result--correct {
  color: rgb(var(--palette-lime-500));
}

.survey-answer-result--incorrect {
  color: var(--color-critical);
}

.survey-main-participant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.75rem;
}

.survey-main-participant__identity {
  display: flex;
  align-items: center;
}

.survey-main-participant__details,
.survey-main-participant__action {
  margin-inline-start: 1rem;
}

.survey-main-participant__name {
  color: var(--color-ink);
  font-weight: 500;
}

.survey-main-participant__meta {
  color: var(--color-ink-light);
  font-size: 0.875rem;
}

.survey-link-row__text {
  margin-inline-end: 1rem;
}

.survey-public-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  block-size: 24rem;
  background-color: var(--color-ink);
  padding: 6rem 1.5rem;
}

.survey-public-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
  background-color: color-mix(in oklch, var(--color-subtle) 50%, transparent);
  backdrop-filter: brightness(0.65);
}

.survey-public-hero__image {
  position: absolute;
  inset: 0;
  z-index: -10;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.survey-public-hero__content {
  position: absolute;
  inset-inline: 0;
  z-index: 30;
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.survey-public-hero__title-wrap {
  margin-inline: auto;
  text-align: center;
}

.survey-public-hero__title {
  color: var(--color-ink-inverted);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 2.5rem;
}

.survey-public-description {
  display: flex;
  flex-direction: column;
  margin-block-start: 2.5rem;
  padding-inline: 1rem;
}

.survey-public-description__body {
  inline-size: 100%;
  font-size: 1.125rem;
  line-height: 2rem;
}

.survey-response-shell {
  display: flex;
  justify-content: center;
  min-block-size: 100vh;
  padding-block: 2rem;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--color-surface-muted) 72%, transparent), transparent 18rem),
    var(--color-canvas);
}

.survey-response-form {
  --survey-response-content-max: 42rem;

  inline-size: min(100%, 58rem);
}

.survey-response-overview {
  inline-size: 100%;
  padding: 1.25rem 1.5rem 1.5rem;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.survey-response-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 1rem;
}

.survey-response-brand__logo {
  block-size: 2.5rem;
  inline-size: 2.5rem;
  border-radius: var(--radius-md);
  object-fit: contain;
}

.survey-response-brand__title {
  color: var(--color-ink);
  font-size: var(--text-medium);
  font-weight: 700;
  line-height: 1.25;
}

.survey-response-overview__body {
  display: grid;
  gap: 0.75rem;
}

.survey-response-overview__eyebrow {
  max-inline-size: 72ch;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 600;
}

.survey-response-overview__title {
  max-inline-size: 46rem;
  color: var(--color-ink);
  font-size: var(--text-x-large);
  font-weight: 700;
  line-height: 1.2;
}

.survey-response-progress {
  display: grid;
  gap: 0.5rem;
  margin-block-start: 0.25rem;
}

.survey-response-progress__text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-ink-light);
  font-size: var(--text-small);
  font-weight: 600;
}

.survey-response-progress__track {
  overflow: hidden;
  block-size: 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-subtle);
}

.survey-response-progress__bar {
  inline-size: var(--survey-response-progress);
  block-size: 100%;
  border-radius: inherit;
  background-color: var(--color-brand);
}

.survey-response-footer {
  flex: 0 1 var(--survey-response-content-max);
  max-inline-size: var(--survey-response-content-max);
}

.survey-response-footer--main {
  box-sizing: border-box;
  padding-inline: 2rem;
}

.survey-response-footer__inner {
  display: flex;
  justify-content: flex-end;
  inline-size: 100%;
  max-inline-size: var(--survey-response-content-max);
}

.survey-response-layout {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
}

.survey-response-layout--single {
  display: flex;
  justify-content: center;
}

.survey-response-layout__answers {
  display: flex;
  justify-content: center;
  min-inline-size: 0;
}

.survey-response-content {
  inline-size: 100%;
  max-inline-size: var(--survey-response-content-max);
}

.survey-response-layout__description {
  align-self: start;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
}

.survey-response-layout__description-title {
  margin-block-end: 0.5rem;
  color: var(--color-ink);
  font-size: var(--text-small);
  font-weight: 700;
}

.survey-response-layout__description-body {
  color: var(--color-ink-light);
  font-size: var(--text-small);
  line-height: 1.5;
}

.survey-response-layout__description-body > * + * {
  margin-block-start: 0.75rem;
}

.survey-response-empty-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 100vh;
}

.survey-response-empty-shell__content {
  inline-size: 100%;
  max-inline-size: 48rem;
}

.survey-response-empty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 1rem;
}

.survey-response-section {
  display: flex;
  flex-direction: column;
}

.survey-response-section__description {
  inline-size: 100%;
  overflow: hidden;
  color: rgb(var(--palette-red-800));
}

.survey-response-section__questions {
  inline-size: 100%;
}

.booking-calendar-public-shell {
  align-items: flex-start;
  min-block-size: 100vh;
  padding: 2rem;
  background:
    radial-gradient(circle at 18% 16%, color-mix(in oklch, var(--theme-accent) 18%, transparent), transparent 30rem),
    linear-gradient(135deg, var(--theme-bg-from), var(--color-surface) 46%, var(--theme-bg-to));
}

.booking-calendar-public-page {
  inline-size: 100%;
  max-inline-size: 88rem;
  margin-block-start: 0;
}

.booking-calendar-public-page__grid {
  display: grid;
  grid-template-columns: minmax(20rem, 0.88fr) minmax(0, 1.42fr);
  gap: 1.75rem;
  align-items: start;
}

.booking-calendar-public-page__grid--reservation {
  grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1fr);
}

.booking-calendar-public-summary,
.booking-calendar-public-panel {
  border: 1px solid color-mix(in oklch, var(--theme-card-hover-border) 65%, var(--color-border));
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 1.5rem 3.5rem oklch(var(--lch-black) / 9%);
}

.booking-calendar-public-summary {
  display: grid;
  position: sticky;
  inset-block-start: 1.5rem;
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.booking-calendar-public-summary__media {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-block-size: 18rem;
  padding: 1.25rem;
  background:
    linear-gradient(145deg, var(--theme-hero-from), var(--theme-hero-via) 54%, var(--theme-hero-to)),
    var(--theme-accent);
  isolation: isolate;
}

.booking-calendar-public-summary__media::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, oklch(var(--lch-black) / 48%), transparent 54%),
    linear-gradient(135deg, transparent, color-mix(in oklch, var(--color-surface) 16%, transparent));
  content: "";
}

.booking-calendar-public-summary__media--with-cover {
  min-block-size: 20rem;
}

.booking-calendar-public-summary__cover {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.booking-calendar-public-summary__brand {
  position: relative;
  justify-content: flex-start;
  max-inline-size: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid color-mix(in oklch, var(--color-surface) 70%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-ink) 70%, var(--theme-accent));
  color: var(--color-ink-inverted);
  box-shadow: 0 0.75rem 1.5rem oklch(var(--lch-black) / 14%);
}

.booking-calendar-public-summary__brand .survey-response-brand__title {
  color: var(--color-ink-inverted);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.5;
}

.booking-calendar-public-summary__content {
  display: grid;
  gap: 1rem;
  max-inline-size: none;
  padding: 2rem;
}

.booking-calendar-public-summary__content .public-auth-title--hero {
  margin: 0;
  color: var(--color-ink);
  font-size: 2.25rem;
  line-height: 1.08;
  text-wrap: balance;
}

.booking-calendar-public-summary__content .public-auth-subtitle {
  margin: 0;
  max-inline-size: 62ch;
  color: var(--color-ink-lighter);
}

.booking-calendar-public-summary__invitation {
  justify-self: start;
  margin: 0;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--theme-card-hover-border);
  border-radius: var(--radius-pill);
  background: var(--theme-badge-bg);
  color: var(--theme-badge-text);
  font-size: 0.875rem;
  font-weight: 800;
}

.booking-calendar-public-summary__details {
  display: grid;
  margin: 0.5rem 0 0;
  padding: 0;
}

.booking-calendar-public-summary__detail {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid var(--theme-card-hover-border);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--theme-form-header-from), var(--color-surface));
}

.booking-calendar-public-summary__detail dt {
  color: var(--color-ink-lighter);
  font-size: 0.8125rem;
  font-weight: 800;
}

.booking-calendar-public-summary__detail dd {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.125rem;
  font-weight: 800;
}

.booking-calendar-public-panel {
  display: block;
  padding: 2.25rem;
}

.booking-calendar-public-slots {
  display: grid;
  gap: 1rem;
  margin-block-start: 0;
}

.survey-response-section.booking-calendar-public-workflow {
  flex-direction: column;
  gap: 1.75rem;
}

.booking-calendar-public-workflow__header {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  justify-content: space-between;
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--color-border);
}

.booking-calendar-public-workflow .survey-response-review-section__title {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.18;
  text-wrap: balance;
}

.booking-calendar-public-workflow__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin-block-end: 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--theme-accent);
  color: var(--color-ink-inverted);
  font-size: 0.875rem;
  font-weight: 900;
  box-shadow: 0 0.65rem 1.25rem color-mix(in oklch, var(--theme-accent) 24%, transparent);
}

.booking-calendar-public-workflow__duration {
  max-inline-size: 18rem;
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--theme-card-hover-border);
  border-radius: var(--radius-md);
  background: var(--theme-form-header-from);
  color: var(--theme-accent-dark);
  font-weight: 800;
  text-align: end;
}

.booking-calendar-public-workflow__hint {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--theme-card-hover-border);
  border-radius: var(--radius-md);
  background: var(--theme-form-header-from);
  color: var(--theme-accent-dark);
  font-weight: 700;
}

.booking-calendar-public-calendar {
  display: grid;
  gap: 1.25rem;
}

.booking-calendar-public-calendar__header {
  display: grid;
  grid-template-columns: 2.75rem 1fr 2.75rem;
  gap: 0.75rem;
  align-items: center;
}

.booking-calendar-public-calendar__month {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.125rem;
  font-weight: 700;
  text-align: center;
}

.booking-calendar-public-calendar__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--theme-accent-dark);
  font-size: 1.75rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.booking-calendar-public-calendar__nav:hover {
  border-color: var(--theme-card-hover-border);
  background: var(--theme-form-header-from);
  transform: translateY(-1px);
}

.booking-calendar-public-calendar__nav:focus-visible {
  outline: 0;
  border-color: var(--theme-focus);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--theme-focus) 18%, transparent);
}

.booking-calendar-public-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
}

.booking-calendar-public-calendar__weekday {
  color: var(--color-ink-lighter);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
}

.booking-calendar-public-calendar__day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 3rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-ink-lighter);
  font-weight: 700;
}

.booking-calendar-public-calendar__day--muted {
  color: var(--color-ink-medium);
}

.booking-calendar-public-calendar__day--available {
  border-color: var(--theme-card-hover-border);
  background: var(--theme-form-header-from);
  color: var(--theme-accent-dark);
}

.booking-calendar-public-calendar__day--selected {
  border-color: var(--theme-accent);
  background: var(--theme-accent);
  color: var(--color-ink-inverted);
  box-shadow: 0 0.75rem 1.5rem color-mix(in oklch, var(--theme-accent) 18%, transparent);
}

.booking-calendar-public-calendar__day-link,
.booking-calendar-public-calendar__day-label {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  color: inherit;
  text-decoration: none;
}

.booking-calendar-public-slots__day {
  display: grid;
  gap: 1rem;
}

.booking-calendar-public-slots__header {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.booking-calendar-public-slots__date {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.125rem;
  font-weight: 800;
}

.booking-calendar-public-slots__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2rem;
  min-block-size: 2rem;
  padding-inline: 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--theme-badge-bg);
  color: var(--theme-badge-text);
  font-size: 0.875rem;
  font-weight: 900;
}

.booking-calendar-public-slots__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.625rem;
}

.booking-calendar-public-slots__button {
  justify-content: center;
  inline-size: 100%;
  min-block-size: 3rem;
  padding: 0.75rem 0.875rem;
  border-color: color-mix(in oklch, var(--theme-card-hover-border) 70%, var(--color-border-medium));
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--theme-accent-dark);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0.25rem 0.8rem oklch(var(--lch-black) / 4%);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.booking-calendar-public-slots__button:hover {
  border-color: var(--theme-card-hover-border);
  background: var(--theme-form-header-from);
  box-shadow: 0 0.65rem 1.2rem oklch(var(--lch-black) / 7%);
  transform: translateY(-1px);
}

.booking-calendar-public-slots__button:focus-visible {
  border-color: var(--theme-focus);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--theme-focus) 18%, transparent);
}

.booking-calendar-public-form-section {
  display: grid;
  gap: 1.25rem;
}

.booking-calendar-public-form-section__header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.booking-calendar-public-form-section__time {
  margin: 0 0 0.4rem;
  color: var(--theme-accent-dark);
  font-weight: 700;
}

.booking-calendar-public-form-section__title {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.125rem;
  font-weight: 700;
}

.booking-calendar-public-form {
  display: grid;
  gap: 1.05rem;
}

.booking-calendar-public-reservation-card {
  display: grid;
  gap: 1.5rem;
}

.booking-calendar-public-reservation-card__header {
  display: grid;
  gap: 0.375rem;
  padding: 1.25rem;
  border: 1px solid var(--theme-card-hover-border);
  border-radius: var(--radius-md);
  background: linear-gradient(to right, var(--theme-form-header-from), var(--color-surface), var(--theme-form-header-to));
}

.booking-calendar-public-reservation-card__time {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
}

.booking-calendar-public-reservation__eyebrow {
  margin: 0 0 0.75rem;
  color: var(--theme-accent-dark);
  font-size: 0.875rem;
  font-weight: 800;
}

.booking-calendar-public-reservation {
  display: grid;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.booking-calendar-public-reservation__row {
  display: grid;
  grid-template-columns: minmax(8rem, 0.35fr) 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--color-border);
}

.booking-calendar-public-reservation__row:last-child {
  border-block-end: 0;
}

.booking-calendar-public-reservation__row dt {
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
  font-weight: 700;
}

.booking-calendar-public-reservation__row dd {
  margin: 0;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 700;
}

.booking-calendar-public-reservation__status {
  display: inline-flex;
  align-items: center;
  min-block-size: 2rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--theme-badge-bg);
  color: var(--theme-badge-text);
  font-size: 0.875rem;
  font-weight: 800;
}

.booking-calendar-public-reservation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.booking-calendar-public-reservation-actions form {
  margin: 0;
}

.booking-calendar-public-reservation-actions__button {
  justify-content: center;
  min-block-size: 2.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  color: var(--color-ink-inverted);
  font-weight: 800;
  text-decoration: none;
}

.booking-calendar-public-reservation__cancel {
  border: 1px solid color-mix(in oklch, var(--color-danger) 28%, var(--color-border));
  background: var(--color-surface);
  color: var(--color-danger-strong);
  box-shadow: none;
}

.booking-calendar-public-reservation__cancel:hover {
  background: color-mix(in oklch, var(--color-danger) 8%, var(--color-surface));
  color: var(--color-critical);
}

@media (max-width: 900px) {
  .booking-calendar-public-shell {
    padding: 1rem;
  }

  .booking-calendar-public-page__grid {
    grid-template-columns: 1fr;
  }

  .booking-calendar-public-summary {
    position: static;
  }

  .booking-calendar-public-panel {
    padding: 1.25rem;
  }

  .booking-calendar-public-summary__media {
    min-block-size: 15rem;
  }

  .booking-calendar-public-summary__media--with-cover {
    min-block-size: 17rem;
  }

  .booking-calendar-public-summary__content {
    padding: 1.5rem;
  }

  .booking-calendar-public-workflow__header,
  .booking-calendar-public-form-section__header {
    display: grid;
  }

  .booking-calendar-public-workflow__duration {
    max-inline-size: none;
    text-align: start;
  }

  .booking-calendar-public-reservation-card__time {
    font-size: 1.375rem;
  }

  .booking-calendar-public-reservation__row {
    grid-template-columns: 1fr;
    gap: 0.375rem;
  }

  .booking-calendar-public-reservation-actions,
  .booking-calendar-public-reservation-actions form,
  .booking-calendar-public-reservation-actions__button {
    inline-size: 100%;
  }
}

@media (max-width: 560px) {
  .booking-calendar-public-shell {
    padding: 0.75rem;
  }

  .booking-calendar-public-page__grid {
    gap: 1rem;
  }

  .booking-calendar-public-summary__media {
    min-block-size: 12rem;
    padding: 1rem;
  }

  .booking-calendar-public-summary__media--with-cover {
    min-block-size: 14rem;
  }

  .booking-calendar-public-summary__content {
    padding: 1.25rem;
  }

  .booking-calendar-public-summary__content .public-auth-title--hero {
    font-size: 1.75rem;
  }

  .booking-calendar-public-panel {
    padding: 1rem;
  }

  .booking-calendar-public-calendar__header {
    grid-template-columns: 2.5rem 1fr 2.5rem;
  }

  .booking-calendar-public-calendar__nav {
    min-block-size: 2.5rem;
  }

  .booking-calendar-public-calendar__grid {
    gap: 0.35rem;
  }

  .booking-calendar-public-calendar__day {
    min-block-size: 2.5rem;
    border-radius: var(--radius-sm);
  }

  .booking-calendar-public-slots__header {
    display: grid;
    gap: 0.5rem;
  }
}

@media (hover: none) {
  .booking-calendar-public-calendar__nav:hover,
  .booking-calendar-public-slots__button:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-calendar-public-calendar__nav,
  .booking-calendar-public-slots__button {
    transition: none;
  }
}

.survey-response-question {
  margin-block-start: 2.5rem;
}

.survey-response-question__title {
  font-size: 1.5rem;
  line-height: 2rem;
}

.survey-response-question__control {
  margin-block-start: 1rem;
}

.survey-response-review-section {
  margin-block-start: 1.5rem;
}

.survey-response-review-section__title {
  color: rgb(var(--palette-blue-700));
  font-size: 1.25rem;
  font-weight: 600;
}


.survey-response-review-section__description {
  max-inline-size: 36rem;
  overflow: hidden;
  color: var(--color-ink-light);
}

.survey-response-review-section__answers {
  flex: 1;
}

.survey-response-answer-question {
  font-weight: 500;
}

.survey-response-answer__content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.poll-vote-panel {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: var(--color-surface);
}

.poll-vote-form {
  margin-inline: 2rem;
  inline-size: calc(100% - 4rem);
}

.poll-vote-fieldset {
  margin-block-start: 1.5rem;
}

.poll-vote-option {
  display: flex;
  align-items: center;
  margin-block-start: 0.5rem;
}

.poll-vote-option__label {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.poll-vote-comment-label-row {
  display: flex;
  justify-content: space-between;
  margin-block-start: 2.5rem;
}

.poll-vote-comment-label {
  display: block;
  color: var(--color-ink-light);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.poll-vote-comment-control {
  position: relative;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.poll-vote-actions {
  display: flex;
  justify-content: flex-end;
  margin-block-start: 1.5rem;
}

.poll-vote-footer {
  margin-block-start: 2.5rem;
}

.poll-vote-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: 2rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.poll-vote-provider__link {
  display: flex;
  align-items: center;
  margin-inline-start: 0.625rem;
  color: var(--color-brand-strong);
  font-size: 0.875rem;
  font-weight: 500;
}

.poll-vote-provider__link:hover {
  color: rgb(var(--palette-indigo-900));
}

.poll-vote-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  block-size: 100vh;
}

.poll-vote-not-found__brand {
  margin-inline: auto;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}

.poll-vote-not-found__message {
  margin-block-start: 3rem;
}

.poll-vote-not-found__title {
  color: rgb(var(--palette-pink-700));
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 2.25rem;
}

.poll-vote-not-found__footer {
  position: relative;
}

.poll-vote-not-found__footer-inner {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
}

.poll-vote-thanks {
  margin-block-start: 1.5rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  background-color: rgb(var(--palette-green-50));
}

.poll-vote-thanks__body {
  display: flex;
}

.poll-vote-thanks__icon-wrap {
  flex-shrink: 0;
}

.poll-vote-thanks__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: rgb(var(--palette-green-400));
}

.poll-vote-thanks__text-wrap {
  margin-inline-start: 0.75rem;
}

.poll-vote-thanks__title {
  color: rgb(var(--palette-green-800));
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.vote-feedback-shell {
  display: flex;
  min-block-size: 100vh;
  flex-direction: column;
  justify-content: center;
  background-color: var(--color-surface-muted);
}

.vote-feedback-logo-wrap {
  inline-size: auto;
  margin-inline: auto;
}

.vote-feedback-logo {
  inline-size: 14rem;
}

.vote-feedback-layout {
  display: flex;
  flex-direction: column;
  padding-block: 1rem;
}

.vote-feedback-intro {
  padding: 4rem 1rem;
  background-color: var(--color-surface-muted);
}

.vote-feedback-form-panel {
  padding: 4rem 1.5rem;
  background-color: var(--color-surface);
}

.vote-feedback-column {
  max-inline-size: 32rem;
  margin-inline: auto;
}

.vote-feedback-column--wide {
  max-inline-size: none;
}

.vote-feedback-title {
  color: var(--color-ink);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 2rem;
}

.vote-feedback-copy,
.vote-feedback-help {
  margin-block-start: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.vote-feedback-copy {
  color: var(--color-ink-lighter);
}

.vote-feedback-control {
  position: relative;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.vote-feedback-actions {
  margin-block-start: 1rem;
}

.vote-feedback-card-list {
  display: flex;
  flex-direction: column;
  padding-inline: 1rem;
}

.vote-feedback-card {
  margin: 1.5rem 2rem 0;
  border-radius: var(--radius-xs);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.vote-feedback-card__body {
  padding: 1.25rem 1rem;
}

.vote-feedback-card__content {
  margin-block-start: 0.5rem;
}

.vote-feedback-card__copy {
  max-inline-size: 36rem;
  color: var(--color-ink-lighter);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.vote-feedback-card__action {
  margin-block-start: 1.5rem;
}

.vote-feedback-card__icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-inline-end: 0.75rem;
}

@media (min-width: 640px) {
  .survey-public-hero {
    padding-block: 8rem;
  }

  .survey-public-hero__title {
    font-size: 3.75rem;
    line-height: 1;
  }
}

@media (min-width: 768px) {
  .survey-public-description {
    align-items: center;
  }

  .survey-public-description__body {
    inline-size: 66.666667%;
  }

  .poll-vote-panel {
    align-items: center;
  }

  .poll-vote-form {
    inline-size: 66.666667%;
  }

  .vote-feedback-layout {
    flex-direction: row;
  }

  .vote-feedback-intro,
  .vote-feedback-form-panel {
    inline-size: 50%;
  }

  .vote-feedback-form-panel {
    margin-inline-end: 1rem;
    border-radius: var(--radius-md);
  }

  .vote-feedback-card {
    margin-inline: 6rem;
    border-radius: var(--radius-lg);
  }

  .vote-feedback-card__body {
    padding: 1.5rem;
  }

  .vote-feedback-card__content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .vote-feedback-card__action {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-block-start: 0;
    margin-inline-start: 1.5rem;
  }

  .survey-response-section,
  .survey-response-review-section__layout {
    flex-direction: row;
  }

  .survey-response-section__description {
    inline-size: 33.333333%;
  }

  .survey-response-section__questions {
    inline-size: 66.666667%;
    padding-inline-start: 1rem;
  }

  .survey-response-layout {
    grid-template-columns: minmax(14rem, 0.42fr) minmax(0, 1fr);
    align-items: start;
  }

  .survey-response-layout--single {
    display: flex;
  }

  .survey-response-footer--main {
    padding-inline: 3rem;
  }
}

@media (max-width: 640px) {
  .survey-main-question__header,
  .survey-response-progress__text {
    align-items: flex-start;
    flex-direction: column;
  }

  .survey-main-question__meta {
    justify-content: flex-start;
  }

  .survey-response-shell {
    padding-block: 0;
  }

  .survey-response-overview,
  .survey-response-layout {
    padding-inline: 1rem;
  }
}

@media (min-width: 1024px) {
  .survey-public-hero {
    padding-inline: 2rem;
  }

  .survey-public-hero__content {
    padding-inline: 2rem;
  }

  .vote-feedback-layout {
    padding-block: 3rem;
  }

  .vote-feedback-card-list {
    flex-direction: row;
    gap: 1rem;
  }

  .vote-feedback-card {
    flex: 1;
    margin-inline: 0;
  }

  .vote-feedback-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

.survey-section {
  padding: 1.25rem 1rem;
  border-block-end: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

@media (min-width: 640px) {
  .survey-section {
    padding-inline: 1.5rem;
  }
}


.survey-section__title {
  color: var(--color-link);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.survey-section__meta {
  margin-block-start: 1rem;
  font-size: 0.875rem;
}

.survey-section__actions {
  margin-block-start: 1.5rem;
}

.survey-section__content {
  margin-inline: 1rem;
}

@media (min-width: 640px) {
  .survey-section__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-block-start: 0;
    margin-inline-start: 1.5rem;
  }
}

.survey-question {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
  border-block-start: 1px solid var(--color-border-muted);
}

.survey-question__header {
  display: flex;
}

.survey-question__type {
  display: flex;
  align-items: center;
}

.survey-question__title {
  margin-inline-start: 1rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.survey-question__mandatory {
  color: var(--color-ink-lighter);
  font-size: 0.75rem;
}

.survey-question__meta {
  margin-block-start: 1rem;
  color: var(--color-ink-light);
  font-size: 0.875rem;
}

.survey-question__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-inline-start: 1rem;
}

.survey-activation {
  inline-size: 100%;
}

.survey-activation__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1rem;
}

.survey-activation__actions {
  margin-block-start: 1.5rem;
}

@media (min-width: 640px) {
  .survey-activation__actions {
    display: flex;
    align-items: center;
    margin-block-start: 0;
    margin-inline-start: 1.5rem;
  }
}

.survey-activation__button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.survey-activation__button:focus-visible {
  outline: 2px solid;
  outline-offset: 2px;
}

.survey-activation__button--stop {
  background-color: rgb(var(--palette-pink-50));
  color: rgb(var(--palette-pink-600));
}

.survey-activation__button--stop:hover {
  background-color: rgb(var(--palette-pink-100));
}

.survey-activation__button--stop:focus-visible {
  outline-color: rgb(var(--palette-pink-100));
}

.survey-activation__button--start {
  background-color: rgb(var(--palette-teal-50));
  color: rgb(var(--palette-teal-600));
}

.survey-activation__button--start:hover {
  background-color: rgb(var(--palette-teal-100));
}

.survey-activation__button--start:focus-visible {
  outline-color: rgb(var(--palette-teal-100));
}

.survey-chart-panel {
  max-block-size: 24rem;
}

.survey-chart-panel--split {
  display: flex;
}

.survey-chart-panel--split .survey-chart-panel__canvas {
  inline-size: 100%;
  max-block-size: 24rem;
}

@media (min-width: 1024px) {
  .survey-chart-panel--split .survey-chart-panel__canvas {
    inline-size: 50%;
  }
}

.survey-dashboard-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block-start: 1.5rem;
  padding-block: 1rem;
}

.survey-dashboard-block__title {
  margin-block-end: 0.5rem;
  font-size: 1.5rem;
}

.survey-dashboard-participants-title {
  text-align: center;
}

.survey-dashboard-block__score {
  margin-inline-start: 0.5rem;
}

.survey-dashboard-block__score--negative {
  color: rgb(var(--palette-red-700));
}

.survey-dashboard-block__score--warning {
  color: rgb(var(--palette-yellow-700));
}

.survey-dashboard-block__score--positive {
  color: rgb(var(--palette-green-700));
}

.survey-dashboard-comment {
  inline-size: 100%;
  margin-block: 1rem;
  padding: 1rem 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.survey-dashboard-comment__content {
  color: var(--color-ink-light);
  font-size: 0.875rem;
}

.survey-dashboard-comment__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: 0.75rem;
}

.survey-dashboard-comment__meta-item {
  margin-block-start: 0.25rem;
  color: var(--color-ink-lighter);
  font-size: 0.75rem;
}

.survey-dashboard-section {
  display: flex;
  inline-size: 100%;
  flex-direction: column;
  padding-block: 1rem;
}

.survey-dashboard-section__title {
  margin-block-end: 0.5rem;
  padding-block-end: 0.5rem;
  border-block-end: 2px solid var(--color-border);
  color: var(--color-link);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.survey-dashboard-section__content {
  flex: 1;
}

.survey-answer-summary {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  border-block-end: 1px solid var(--color-border);
}

.survey-answer-summary__question {
  inline-size: 33.333333%;
}

.survey-answer-summary__response {
  inline-size: 66.666667%;
}

.survey-answer-section-title,
.survey-answer-count {
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.survey-answer-section-title {
  margin-block-start: 2.5rem;
}

.survey-answer-count {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
}

.survey-answer-empty {
  margin-block-start: 2.5rem;
}

.survey-evaluation-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.survey-evaluation-matrix--responsive {
  padding: 0.5rem 1rem;
}

.survey-evaluation-matrix--plain {
  background-color: var(--color-surface);
}

.survey-evaluation-matrix--muted {
  background-color: var(--color-surface-subtle);
}

@media (min-width: 768px) {
  .survey-evaluation-matrix {
    grid-template-columns: repeat(var(--survey-evaluation-columns, 3), minmax(0, 1fr));
  }
}

.survey-evaluation-matrix__heading,
.survey-evaluation-matrix__cell {
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.75rem;
}

.survey-evaluation-matrix__heading {
  font-weight: 600;
}

.survey-name__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-inline-start: 0.25rem;
}

.survey-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.survey-icon--small {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.survey-icon--xsmall {
  inline-size: 1rem;
  block-size: 1rem;
}

.survey-icon--button {
  margin-inline-start: -0.125rem;
}

.survey-icon--with-label {
  margin-inline-end: 0.25rem;
}