.assessment-layout {
  display: grid;
  width: min(100%, 1440px);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 326px);
  align-items: start;
  gap: var(--space-24);
  margin: 0 auto;
  padding: var(--space-40) var(--space-48) var(--space-32);
}

.assessment-form {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.question-stage {
  min-height: 580px;
}

.question-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.question-content.is-exiting,
.question-content.is-entering {
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

.question-content.is-exiting {
  animation-duration: 170ms;
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.question-content.is-entering {
  animation-duration: 240ms;
  animation-timing-function: var(--motion-ease-out);
}

.question-content[data-direction="forward"].is-exiting {
  animation-name: question-exit-forward;
}

.question-content[data-direction="forward"].is-entering {
  animation-name: question-enter-forward;
}

.question-content[data-direction="back"].is-exiting {
  animation-name: question-exit-back;
}

.question-content[data-direction="back"].is-entering {
  animation-name: question-enter-back;
}

.assessment-topbar-name.is-exiting,
.assessment-topbar-name.is-entering {
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

.assessment-topbar-name.is-exiting {
  animation-duration: 170ms;
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.assessment-topbar-name.is-entering {
  animation-duration: 240ms;
  animation-timing-function: var(--motion-ease-out);
}

.assessment-topbar-name[data-direction="forward"].is-exiting {
  animation-name: capability-exit-forward;
}

.assessment-topbar-name[data-direction="forward"].is-entering {
  animation-name: capability-enter-forward;
}

.assessment-topbar-name[data-direction="back"].is-exiting {
  animation-name: capability-exit-back;
}

.assessment-topbar-name[data-direction="back"].is-entering {
  animation-name: capability-enter-back;
}

.question-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-12) 0;
}

.question-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.question-count {
  margin: 0;
  color: var(--brand\/neutral\/600);
  font-family: "Inter", var(--font-text);
  font-size: var(--paragraph\/--p-s-size);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 18px;
}

.question-title {
  width: min(664px, 100%);
  margin: 0;
  color: var(--brand\/neutral\/50);
  font-family: var(--font-display);
  font-size: var(--heading\/--h2-size);
  font-weight: 800;
  letter-spacing: 0;
  line-height: var(--heading\/--h2-size);
}

.question-description {
  width: min(569px, 100%);
  margin: 0;
  color: var(--brand\/neutral\/500);
  font-family: "Inter", var(--font-text);
  font-size: 17.4px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 21.6px;
}

.skill-description-trigger {
  display: inline-flex;
  width: max-content;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand\/neutral\/850);
  border-radius: 100px;
  background: transparent;
  color: var(--brand\/neutral\/200);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--paragraph\/--p-s-size);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  padding: 0 var(--space-16);
  transition:
    border-color 150ms ease,
    color 150ms ease,
    background-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.skill-description-trigger[hidden] {
  display: none;
}

.skill-description-trigger:focus-visible {
  outline: 0;
  border-color: var(--brand\/neutral\/500);
  box-shadow: 0 0 0 1px var(--brand\/neutral\/500);
}

@media (hover: hover) and (pointer: fine) {
  .skill-description-trigger:hover {
    border-color: var(--brand\/neutral\/700);
    background: rgba(255, 255, 255, 0.04);
    color: var(--brand\/neutral\/50);
  }
}

.skill-description-drawer {
  width: clamp(420px, 34vw, 540px);
}

.skill-description-modal-content {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: auto;
  padding: var(--space-40) var(--space-24) var(--space-32);
}

.skill-description-modal-title {
  width: 100%;
  margin-top: var(--space-8);
  font-size: 46px;
  line-height: 46px;
}

.skill-description-modal-preview {
  width: 100%;
  margin-top: var(--space-16);
}

.skill-description-modal-copy {
  margin-top: var(--space-24);
  border-top: 1px solid var(--brand\/neutral\/850);
  padding-top: var(--space-24);
}

.skill-description-modal-copy p {
  margin: 0;
  color: var(--brand\/neutral\/400);
  font-family: var(--font-text);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 23px;
  text-wrap: pretty;
}

.rating-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12) 0;
}

.rating-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rating-label {
  color: var(--brand\/neutral\/100);
  font-family: "Inter", var(--font-text);
  font-size: var(--label\/--label-l-size);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
}

.rating-badge {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  min-height: 26px;
  min-width: 26px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: var(--label\/--label-l-size);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  padding: var(--space-4) var(--space-12);
  transition: opacity 180ms ease;
}

.rating-badge[data-has-value="true"] {
  opacity: 1;
}

.rating-field[data-tone="sapphire"] .rating-badge {
  background: var(--brand\/accent\/sapphire\/300);
  color: var(--brand\/accent\/sapphire\/400);
}

.rating-field[data-tone="cherry"] .rating-badge {
  background: var(--brand\/accent\/cherry\/300);
  color: var(--brand\/accent\/cherry\/400);
}

.rating-control {
  position: relative;
  display: grid;
  --rating-edge-gap: 3px;
  --rating-active-left: var(--rating-edge-gap);
  --rating-segment-width: 0px;
  min-height: 38px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--brand\/neutral\/850);
  border-radius: 100px;
  background: transparent;
  padding: var(--rating-edge-gap);
}

.rating-control:focus-within {
  border-color: var(--brand\/neutral\/700);
  box-shadow: 0 0 0 1px var(--brand\/neutral\/700);
}

.rating-active-bg {
  position: absolute;
  top: var(--rating-edge-gap);
  left: var(--rating-active-left);
  z-index: 0;
  width: var(--rating-segment-width);
  height: calc(100% - (var(--rating-edge-gap) * 2));
  border: 1px solid currentColor;
  border-radius: 100px;
  background: transparent;
  opacity: 1;
  transition: left 180ms ease;
}

.rating-control[data-has-value="false"] .rating-active-bg {
  opacity: 0;
}

.rating-option {
  position: relative;
  z-index: 1;
  display: flex;
  --rating-option-color: var(--brand\/neutral\/400);
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--label\/--label-l-size);
  font-weight: 800;
  letter-spacing: 0;
  opacity: 0.6;
  outline: 0;
  transition: opacity 420ms ease;
  -webkit-tap-highlight-color: transparent;
}

.rating-option::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  color: var(--rating-option-color);
  content: attr(data-value);
  transform: translate(-50%, -50%);
  transition: color 220ms ease;
}

.rating-option.is-selected {
  opacity: 1;
}

.rating-option:not(.is-selected):hover,
.rating-control[data-hover-value="1"] .rating-option[data-value="1"]:not(.is-selected),
.rating-control[data-hover-value="2"] .rating-option[data-value="2"]:not(.is-selected),
.rating-control[data-hover-value="3"] .rating-option[data-value="3"]:not(.is-selected),
.rating-control[data-hover-value="4"] .rating-option[data-value="4"]:not(.is-selected),
.rating-control[data-hover-value="5"] .rating-option[data-value="5"]:not(.is-selected),
.rating-control[data-hover-value="6"] .rating-option[data-value="6"]:not(.is-selected),
.rating-control[data-hover-value="7"] .rating-option[data-value="7"]:not(.is-selected),
.rating-control[data-hover-value="8"] .rating-option[data-value="8"]:not(.is-selected) {
  --rating-option-color: var(--brand\/neutral\/200);
  opacity: 1;
}

.rating-option:not(.is-selected):hover::after,
.rating-control[data-hover-value="1"] .rating-option[data-value="1"]:not(.is-selected)::after,
.rating-control[data-hover-value="2"] .rating-option[data-value="2"]:not(.is-selected)::after,
.rating-control[data-hover-value="3"] .rating-option[data-value="3"]:not(.is-selected)::after,
.rating-control[data-hover-value="4"] .rating-option[data-value="4"]:not(.is-selected)::after,
.rating-control[data-hover-value="5"] .rating-option[data-value="5"]:not(.is-selected)::after,
.rating-control[data-hover-value="6"] .rating-option[data-value="6"]:not(.is-selected)::after,
.rating-control[data-hover-value="7"] .rating-option[data-value="7"]:not(.is-selected)::after,
.rating-control[data-hover-value="8"] .rating-option[data-value="8"]:not(.is-selected)::after {
  transition-duration: 120ms;
}

.rating-control .rating-option.is-disabled,
.rating-control .rating-option.is-disabled:hover {
  --rating-option-color: var(--brand\/neutral\/700);
  cursor: not-allowed;
  opacity: 0.35;
}

.rating-control .rating-option.is-disabled::after {
  color: var(--brand\/neutral\/700);
}

.rating-control .rating-option.is-disabled:active {
  transform: none;
}

.rating-field[data-tone="sapphire"] .rating-option.is-selected {
  --rating-option-color: var(--brand\/accent\/sapphire\/400);
}

.rating-field[data-tone="sapphire"] .rating-active-bg {
  background: var(--brand\/accent\/sapphire\/300);
  color: var(--brand\/accent\/sapphire\/300);
}

.rating-field[data-tone="cherry"] .rating-option.is-selected {
  --rating-option-color: var(--brand\/accent\/cherry\/400);
}

.rating-field[data-tone="cherry"] .rating-active-bg {
  background: var(--brand\/accent\/cherry\/300);
  color: var(--brand\/accent\/cherry\/300);
}

.rating-range {
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: pointer;
  opacity: 0;
  outline: 0;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}

.rating-option:focus,
.rating-option:focus-visible,
.rating-range:focus,
.rating-range:focus-visible {
  outline: 0;
  box-shadow: none;
}

.rating-help {
  margin: 0;
  color: var(--brand\/neutral\/500);
  font-family: "Inter", var(--font-text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 21.6px;
  min-height: 21.6px;
  opacity: 0;
  transition: opacity 180ms ease;
}

.rating-help[data-has-value="true"] {
  opacity: 1;
}

.rating-field.is-syncing-rating .rating-badge,
.rating-field.is-syncing-rating .rating-help,
.rating-field.is-syncing-rating .rating-active-bg,
.rating-field.is-syncing-rating .rating-option,
.rating-field.is-syncing-rating .rating-option::after {
  transition: none;
}

.note-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.note-field label {
  color: var(--brand\/neutral\/100);
  font-family: var(--font-display);
  font-size: var(--label\/--label-l-size);
  font-weight: 800;
  line-height: 1.1;
}

.note-field textarea {
  width: 100%;
  min-height: 124px;
  resize: vertical;
  border: 1px solid var(--brand\/neutral\/850);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--brand\/neutral\/200);
  font-family: var(--font-text);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 15.68px;
  padding: var(--space-12);
}

.note-field textarea:focus {
  outline: 0;
  border-color: var(--brand\/neutral\/700);
  box-shadow: 0 0 0 1px var(--brand\/neutral\/700);
}

.note-field textarea:focus-visible {
  outline: 0;
  border-color: var(--brand\/neutral\/700);
  box-shadow: 0 0 0 1px var(--brand\/neutral\/700);
}

.note-field textarea::placeholder {
  color: var(--brand\/neutral\/600);
  opacity: 1;
}

.assessment-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-32) 0;
}

.assessment-actions .primary-button {
  border-color: var(--brand\/accent\/sapphire\/400);
  background: var(--brand\/accent\/sapphire\/400);
}

.assessment-actions .icon-button {
  background: var(--brand\/neutral\/800);
}

.assessment-actions .icon-button:disabled {
  cursor: default;
  opacity: 0.45;
}

.rating-key-panel {
  align-self: center;
  position: sticky;
  top: calc(93px + var(--space-40));
  overflow: hidden;
  border: 1px solid var(--brand\/neutral\/850);
  border-radius: 0;
  background: var(--brand\/neutral\/950);
  padding: 27px 15px;
}

.rating-key-toggle {
  display: flex;
  width: 100%;
  min-height: 33px;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
  border: 0;
  background: transparent;
  color: var(--brand\/neutral\/50);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
  padding: 0;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.rating-key-toggle:focus-visible {
  outline: 0;
}

.rating-key-toggle:focus-visible span:first-child {
  box-shadow: 0 2px 0 var(--brand\/neutral\/50);
}

.rating-key-toggle-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin-top: 3px;
}

.rating-key-panel[data-expanded="false"] .rating-key-toggle {
  align-items: center;
}

.rating-key-panel[data-expanded="false"] .rating-key-toggle-icon {
  margin-top: 0;
}

.rating-key-toggle-icon::before,
.rating-key-toggle-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.rating-key-toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.rating-key-panel[data-expanded="true"] .rating-key-toggle-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0.4);
}

.rating-key-body {
  max-height: var(--rating-key-body-height, 0);
  overflow: hidden;
  padding-top: var(--space-16);
  opacity: 1;
  transition:
    max-height 220ms var(--motion-ease-out),
    opacity 160ms ease,
    padding-top 220ms var(--motion-ease-out);
}

.rating-key-panel[data-expanded="false"] .rating-key-body {
  max-height: 0;
  padding-top: 0;
  opacity: 0;
}

.rating-key-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.rating-key-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rating-key-name,
.rating-key-description {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--paragraph\/--p-s-size);
  letter-spacing: 0;
  line-height: 18px;
}

.rating-key-name {
  color: var(--brand\/neutral\/200);
  font-weight: 700;
}

.rating-key-description {
  color: var(--brand\/neutral\/500);
  font-weight: 500;
  text-wrap: pretty;
}

@keyframes question-exit-forward {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-32px);
  }
}

@keyframes question-enter-forward {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes question-exit-back {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(32px);
  }
}

@keyframes question-enter-back {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes capability-exit-forward {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-24px);
  }
}

@keyframes capability-enter-forward {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes capability-exit-back {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(24px);
  }
}

@keyframes capability-enter-back {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 1120px) {
  .assessment-layout {
    width: min(960px, calc(100% - 48px));
    grid-template-columns: 1fr;
    padding-right: 0;
    padding-left: 0;
  }

  .rating-key-panel {
    align-self: stretch;
    position: static;
  }
}

@media (max-width: 640px) {
  .assessment-layout {
    width: calc(100% - 32px);
    padding-top: var(--space-24);
  }

  .question-stage {
    min-height: 0;
  }

  .question-description {
    font-size: 15px;
    line-height: 20px;
  }

  .skill-description-modal-title {
    font-size: 40px;
    line-height: 40px;
  }

  .rating-control {
    padding: 0;
  }

  .rating-option {
    padding: 0;
  }

  .rating-help {
    font-size: 14px;
    line-height: 19px;
    white-space: normal;
  }

  .assessment-actions {
    padding-bottom: var(--space-24);
  }
}

@media (prefers-reduced-motion: reduce) {
  .question-content.is-exiting,
  .question-content.is-entering,
  .assessment-topbar-name.is-exiting,
  .assessment-topbar-name.is-entering {
    animation: none;
  }

  .rating-option,
  .rating-active-bg,
  .skill-description-trigger,
  .rating-key-body,
  .rating-key-toggle-icon::before,
  .rating-key-toggle-icon::after {
    transition: none;
  }

  .rating-option:active {
    transform: none;
  }
}