/* Public quiz surfaces only. Keep this bundle out of non-quiz page requests. */

.myron-quiz.myron-public-component--contained {
  max-width: var(--myron-layout-container-md);
}

.myron-public-component--quiz,
.myron-quiz {
  display: grid;
  gap: var(--myron-space-lg);
}

.myron-public-quiz-page {
  margin: 0;
  color: var(--myron-color-text);
  background: var(--myron-color-bg);
}

.myron-public-main--quiz {
  width: min(100%, var(--myron-layout-container-md));
  margin-inline: auto;
  padding-block: var(--myron-space-2xl);
  padding-inline: var(--myron-layout-gutter-md);
}

.myron-quiz--classic-form,
.myron-quiz--conversational,
.myron-quiz--card-stack {
  align-content: start;
}

.myron-quiz__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
  align-items: baseline;
  justify-content: space-between;
}

.myron-quiz__title,
.myron-quiz__result-title {
  margin: 0;
  color: var(--myron-color-text);
  font-size: var(--myron-typography-size-2xl);
  line-height: var(--myron-typography-line-tight);
  letter-spacing: var(--myron-typography-tracking-normal);
}

.myron-quiz__progress {
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
  font-family: var(--myron-typography-font-mono);
}

.myron-quiz__intro {
  display: grid;
  gap: var(--myron-space-md);
}

.myron-quiz__intro-copy {
  margin: 0;
  color: var(--myron-color-text-muted);
  line-height: var(--myron-typography-line-loose);
}

.myron-quiz [data-quiz-start][data-quiz-stepped-ui] {
  display: none;
}

.myron-quiz[data-quiz-enhanced="true"] [data-quiz-start][data-quiz-stepped-ui] {
  display: inline-flex;
}

.myron-quiz__intro[hidden],
.myron-quiz__navigation[hidden],
.myron-quiz[data-quiz-presentation="stepped"][data-quiz-enhanced="true"] .myron-quiz__item[hidden],
.myron-quiz[data-quiz-presentation="stepped"][data-quiz-enhanced="true"] [data-quiz-next][hidden],
.myron-quiz[data-quiz-presentation="stepped"][data-quiz-enhanced="true"] [data-quiz-submit][hidden],
.myron-quiz[data-quiz-presentation="stepped"][data-quiz-enhanced="true"] [data-quiz-stepped-ui][hidden],
.myron-quiz__step-error[hidden] {
  display: none;
}

.myron-quiz__form,
.myron-quiz__stack,
.myron-quiz__lead,
.myron-quiz__result,
.myron-quiz__gate {
  display: grid;
  gap: var(--myron-space-md);
}

.myron-quiz__item,
.myron-quiz__card,
.myron-quiz__result,
.myron-quiz__gate {
  padding: var(--myron-space-lg);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background: var(--myron-color-surface);
}

.myron-quiz__item {
  display: grid;
  gap: var(--myron-space-sm);
  min-width: 0;
  margin: 0;
}

.myron-quiz__prompt {
  margin: 0;
  padding: 0;
  color: var(--myron-color-text);
  font-weight: var(--myron-typography-weight-semibold);
  line-height: var(--myron-typography-line-tight);
}

.myron-quiz__option,
.myron-quiz__field,
.myron-quiz__check {
  display: flex;
  gap: var(--myron-space-sm);
  align-items: flex-start;
  color: var(--myron-color-text);
  line-height: var(--myron-typography-line-normal);
}

.myron-quiz__option,
.myron-quiz__check {
  align-items: center;
  width: 100%;
  padding: var(--myron-space-sm) var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background: var(--myron-color-surface);
  cursor: pointer;
  transition: border-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    background-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    box-shadow var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-quiz__option:hover,
.myron-quiz__check:hover,
.myron-quiz__option:has(input:focus-visible),
.myron-quiz__check:has(input:focus-visible) {
  border-color: var(--myron-color-accent);
}

.myron-quiz__option:has(input:checked),
.myron-quiz__check:has(input:checked) {
  border-color: var(--myron-color-accent);
  background: color-mix(in srgb, var(--myron-color-accent) 14%, var(--myron-color-surface));
  box-shadow: var(--myron-shadow-sm);
}

.myron-quiz__field {
  display: grid;
  gap: var(--myron-space-xs);
  font-weight: var(--myron-typography-weight-semibold);
}

.myron-quiz__option input,
.myron-quiz__check input {
  flex: 0 0 auto;
  width: var(--myron-space-md);
  height: var(--myron-space-md);
  margin: 0;
  border: var(--myron-border-thin) solid var(--myron-color-border);
  background: var(--myron-color-bg);
  appearance: none;
  display: grid;
  place-items: center;
}

.myron-quiz__option input[type="radio"] {
  border-radius: var(--myron-radius-pill);
}

.myron-quiz__option input[type="checkbox"],
.myron-quiz__check input[type="checkbox"] {
  border-radius: var(--myron-radius-sm);
}

.myron-quiz__option input:checked,
.myron-quiz__check input:checked {
  border-color: var(--myron-color-accent);
  background: var(--myron-color-accent);
}

.myron-quiz__option input:checked::after,
.myron-quiz__check input:checked::after {
  content: "";
  width: calc(var(--myron-space-sm) / 2);
  height: calc(var(--myron-space-sm) / 2);
  border-radius: inherit;
  background: var(--myron-color-bg);
}

.myron-quiz__input {
  width: 100%;
  min-height: var(--myron-size-control-md);
  box-sizing: border-box;
  padding: var(--myron-space-sm) var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  color: var(--myron-color-text);
  background: var(--myron-color-surface);
  font: inherit;
}

.myron-quiz__input:focus-visible,
.myron-quiz__button:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.myron-quiz__button {
  justify-self: start;
  min-height: var(--myron-size-control-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--myron-space-xs);
  padding: var(--myron-space-sm) var(--myron-space-lg);
  border: var(--myron-border-hairline) solid var(--myron-color-accent);
  border-radius: var(--myron-radius-pill);
  color: var(--myron-color-bg);
  background: var(--myron-color-accent);
  font: inherit;
  font-weight: var(--myron-typography-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--myron-shadow-sm);
  transition: transform var(--myron-motion-duration-fast) var(--myron-motion-easing-standard),
    box-shadow var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.myron-quiz__button:hover,
.myron-quiz__button:active {
  text-decoration: none;
  transform: translateY(calc(var(--myron-border-thin) * -1));
  box-shadow: var(--myron-shadow-md);
}

.myron-quiz__button--secondary {
  color: var(--myron-color-text);
  border-color: var(--myron-color-border);
  background: var(--myron-color-surface);
  box-shadow: none;
}

.myron-quiz__button:disabled {
  color: var(--myron-color-text-muted);
  border-color: var(--myron-color-border);
  background: var(--myron-color-surface);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.myron-quiz__navigation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
  align-items: center;
}

.myron-quiz__step-error {
  margin: 0;
  color: var(--myron-color-danger);
  font-size: var(--myron-typography-size-sm);
  line-height: var(--myron-typography-line-normal);
}

.myron-quiz__item[data-quiz-invalid="true"] {
  border-color: var(--myron-color-danger);
}

.myron-quiz__result-copy,
.myron-quiz__gate p {
  color: var(--myron-color-text-muted);
  line-height: var(--myron-typography-line-loose);
}

.myron-quiz__result-copy {
  display: grid;
  gap: var(--myron-space-sm);
}

.myron-quiz__result-hero {
  margin: 0;
}

.myron-quiz__result-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--myron-radius-md);
}

.myron-quiz__result-archetype,
.myron-quiz__result-tax,
.myron-quiz__result-action {
  margin: 0;
  color: var(--myron-color-text);
  line-height: var(--myron-typography-line-normal);
}

.myron-quiz__result-archetype,
.myron-quiz__challenge-name {
  font-weight: var(--myron-typography-weight-semibold);
}

.myron-quiz__result-tax {
  color: var(--myron-color-text-muted);
}

.myron-quiz__result-action {
  padding: var(--myron-space-md);
  border-inline-start: var(--myron-border-thin) solid var(--myron-color-accent);
  background: color-mix(in srgb, var(--myron-color-accent) 8%, transparent);
}

.myron-quiz__challenges {
  display: grid;
  gap: var(--myron-space-sm);
}

.myron-quiz__challenge {
  display: grid;
  gap: var(--myron-space-xs);
}

.myron-quiz__challenge-name,
.myron-quiz__challenge-copy {
  margin: 0;
}

.myron-quiz__challenge-copy,
.myron-quiz__error {
  color: var(--myron-color-text-muted);
  line-height: var(--myron-typography-line-normal);
}

.myron-quiz__error {
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-danger);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface);
}

.myron-quiz__step {
  display: grid;
  gap: var(--myron-space-md);
}

.myron-quiz--card-stack .myron-quiz__stack {
  grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--myron-layout-container-sm) / 2), 100%), 1fr));
}

.myron-quiz--card-stack .myron-quiz__button {
  grid-column: 1 / -1;
}
