/* Build D — quiz modal and its steps. */

.wire-modal { position: fixed; z-index: 10; inset: 0; display: none; align-items: center; justify-content: center; overflow-y: auto; padding: 24px 16px; }
.wire-modal.is-open { display: flex; }
.wire-modal__veil { position: fixed; inset: 0; background: rgba(0, 0, 0, .48); animation: wire-veil .3s ease both; }
.wire-modal__box { position: relative; width: min(760px, 100%); height: auto; max-height: calc(100dvh - 48px); overflow-y: auto; border-radius: 24px; background: #fff; box-shadow: 0 16px 60px rgba(0, 0, 0, .1); animation: wire-box .35s cubic-bezier(.2, .75, .2, 1) both; }
.wire-modal__close { position: absolute; z-index: 2; top: 24px; right: 28px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 31px; line-height: 1; opacity: 0; transition: opacity .2s ease, background-color .2s ease; }
.wire-modal__close:focus-visible { opacity: 1; }
.wire-modal__close:hover { background: var(--fill); }
.wire-modal__view { min-height: 100%; }

@keyframes wire-veil { from { opacity: 0; } to { opacity: 1; } }
@keyframes wire-box { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Question step */
.wire-q { display: flex; flex-direction: column; padding: 54px 52px 50px; }
.wire-q__index { margin: 0; color: var(--muted); font-size: 20px; font-weight: 500; }
.wire-q__title { margin: 30px 0 0; font-size: 42px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.wire-q__list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 38px; }
.wire-q__item { width: 100%; min-height: 72px; padding: 18px 20px; border: 2px solid transparent; border-radius: 14px; background: var(--fill); color: var(--ink); text-align: left; font-size: 20px; font-weight: 500; line-height: 1.2; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.wire-q__item:hover { background: #fce6e5; transform: translateY(-2px); }
.wire-q__item:active, .wire-q__item.is-chosen { border-color: var(--accent); background: #fff2f1; transform: none; }
.wire-q__hint { margin: auto 0 0; padding-top: 30px; color: var(--muted); font-size: 16px; }

/* Result step */
.wire-r { padding: 60px 52px; }
.wire-r__title { margin: 0; font-size: 40px; line-height: 1.18; font-weight: 600; letter-spacing: -.02em; }
.wire-r__text { margin: 26px 0 0; font-size: 23px; line-height: 1.3; }
.wire-r__form { margin-top: 40px; }
.wire-r__label { display: block; margin-bottom: 10px; font-size: 16px; font-weight: 500; }
.wire-r__input { display: block; width: 100%; height: 58px; padding: 0 18px; border: 1px solid #c7c7c7; border-radius: 12px; background: #fff; color: var(--ink); font-size: 18px; transition: border-color .2s ease, box-shadow .2s ease; }
.wire-r__input::placeholder { color: var(--muted); opacity: 1; }
.wire-r__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(237, 82, 87, .12); }
.wire-r__submit { width: 360px; max-width: 100%; height: 54px; margin-top: 20px; font-size: 18px; }
.wire-r__submit:disabled { background: #b8b8b8; cursor: not-allowed; box-shadow: none; transform: none; }
.wire-r__note { margin: 12px 0 0; color: var(--muted); font-size: 15px; }
.wire-r__note[hidden] { display: none; }

@media (max-height: 900px) and (min-width: 901px) {
  .wire-q { padding: 58px 64px 48px; }
  .wire-q__title { margin-top: 25px; font-size: 40px; }
  .wire-q__list { gap: 14px 24px; margin-top: 35px; }
  .wire-q__item { min-height: 72px; padding: 16px 20px; font-size: 20px; }
  .wire-q__hint { margin-top: 32px; padding: 0; font-size: 16px; }
  .wire-r { padding-top: 70px; }
  .wire-r__title { font-size: 40px; }
  .wire-r__text { margin-top: 28px; font-size: 23px; }
  .wire-r__form { margin-top: 40px; }
  .wire-r__label { font-size: 16px; }
  .wire-r__input { height: 60px; font-size: 18px; }
  .wire-r__submit { height: 54px; margin-top: 20px; font-size: 18px; }
  .wire-r__note { font-size: 16px; }
}

@media (max-width: 900px) {
  .wire-modal { padding: 16px; }
  .wire-modal__box { flex: 0 0 auto; width: min(100%, 500px); min-height: 0; max-height: calc(100dvh - 32px); border-radius: 18px; }
  .wire-modal__close { top: 14px; right: 14px; width: 32px; height: 32px; font-size: 26px; }
  .wire-q { min-height: 0; padding: 56px 24px 28px; }
  .wire-q__index { font-size: 15px; }
  .wire-q__title { margin-top: 20px; font-size: 26px; line-height: 1.17; }
  .wire-q__list { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .wire-q__item { min-height: 56px; padding: 14px 16px; border-radius: 10px; font-size: 17px; }
  .wire-q__hint { padding-top: 20px; font-size: 14px; }
  .wire-r { min-height: 0; padding: 56px 24px 32px; }
  .wire-r__title { font-size: 29px; line-height: 1.17; }
  .wire-r__text { margin-top: 20px; font-size: 18px; line-height: 1.24; }
  .wire-r__form { margin-top: 32px; }
  .wire-r__label { margin-bottom: 10px; font-size: 15px; }
  .wire-r__input { height: 54px; padding: 0 13px; border-radius: 8px; font-size: 17px; }
  .wire-r__submit { width: 100%; height: 52px; margin-top: 20px; font-size: 16px; }
  .wire-r__note { margin-top: 12px; font-size: 14px; }
}

@media (max-width: 370px) {
  .wire-modal { padding-left: 10px; padding-right: 10px; }
  .wire-q, .wire-r { padding-left: 20px; padding-right: 20px; }
}