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

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

.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-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-matrix-filter {
  padding: 0 2.5rem 1.5rem;
}

.evaluation-matrix-filter__fields {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0;
  border: 0;
}

.evaluation-matrix-filter__field {
  inline-size: 100%;
}

.evaluation-matrix-filter__control {
  margin-block-start: 0.5rem;
}

.evaluation-matrix-filter__actions {
  inline-size: 100%;
}

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

@media (min-width: 640px) {
  .evaluation-matrix-filter__fields {
    flex-direction: row;
    align-items: flex-end;
    column-gap: 1rem;
  }

  .evaluation-matrix-filter__field,
  .evaluation-matrix-filter__actions {
    inline-size: auto;
  }
}

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

.survey-main-question__title {
  color: var(--color-ink);
  font-size: 1.5rem;
  line-height: 2rem;
}

.survey-main-question__required {
  color: var(--color-danger);
}

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

.survey-main-question__hint {
  margin-block-start: 0.5rem;
  color: var(--color-subtle);
  font-size: 0.875rem;
}

.survey-main-question__error {
  margin-block-start: 1rem;
  padding: 0.5rem;
  background-color: rgb(var(--palette-red-100));
  color: rgb(var(--palette-red-700));
  font-size: 0.875rem;
}

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

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

.survey-rating__nav {
  display: flex;
  margin-block-end: -1px;
}

.survey-rating__option {
  inline-size: 100%;
  padding: 1rem 0.25rem;
  border-block-end: 2px solid;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
}

.survey-rating__option--middle {
  padding-inline: 1rem;
}

.survey-rating__option--first {
  border-start-start-radius: 0.375rem;
}

.survey-rating__option--last {
  border-start-end-radius: 0.375rem;
}

.survey-rating__option--selected {
  border-color: var(--color-brand);
  color: var(--color-brand-strong);
}

.survey-rating__option--muted {
  border-color: transparent;
  color: var(--color-ink-lighter);
}

.survey-rating__option--muted:hover,
.survey-rating__option--muted:focus {
  border-color: var(--color-border-medium);
  color: var(--color-ink-light);
}

.survey-rating__descriptions {
  display: grid;
  grid-template-columns: repeat(var(--survey-rating-columns, 1), minmax(0, 1fr));
  margin-block-start: 0.5rem;
  padding: 0;
  color: var(--color-ink-light);
  font-size: 0.75rem;
  font-weight: 600;
  list-style: none;
}

.survey-rating__description {
  text-align: center;
}

.survey-rating__description--selected {
  color: var(--color-ink-light);
}

.survey-rating__description--muted {
  color: var(--color-ink-medium);
}

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

.survey-response-form {
  inline-size: 100%;
  max-inline-size: 48rem;
  margin-block-start: 2rem;
}

.survey-response-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  inline-size: 100%;
  block-size: 100%;
  padding: 1.5rem;
}

.survey-response-brand__logo {
  block-size: 3rem;
}

.survey-response-brand__title {
  color: rgb(var(--palette-indigo-800));
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 2.25rem;
}

.survey-response-footer__inner {
  display: flex;
  justify-content: flex-end;
  inline-size: 100%;
  max-inline-size: 48rem;
}

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

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

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

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

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

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

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