/* Review setup and completion use one self-contained stage. */
.review-view.is-special .review-special-stage {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  container-type: size;
  background: var(--workspace-accent, var(--drinks));
}

.review-view.is-special .review-special-stage[hidden],
.review-view.is-special .review-special-stage .review-special[hidden] {
  display: none;
}

.review-view.is-special .review-special-stage .review-special {
  display: block;
  width: min(520px, calc(100% - 48px));
  min-height: 0;
  margin: 152px 0 0;
  padding: 0;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
}

.review-view.is-special .review-special-stage .review-special-close {
  position: absolute;
  z-index: 1;
  top: 28px;
  left: 24px;
}

@media (min-width: 900px) {
  .review-view.is-special .review-special-stage {
    left: 232px;
  }

  .review-view.is-special .review-special-stage .review-special {
    margin-top: clamp(76px, 16cqh, 128px);
  }

  .review-view.is-special .review-special-stage .review-special-close {
    top: 32px;
    left: 34px;
  }

  /* The completion flow has one more action than setup. Keep it in the same
     visual zone, then let every part tighten together on shorter desktops. */
  .review-view.is-special .review-special-stage #review-complete {
    margin-top: clamp(68px, 13cqh, 112px);
  }

  .review-view.is-special .review-special-stage .review-special-header {
    margin-bottom: clamp(14px, 2.8cqh, 30px);
  }

  .review-view.is-special .review-special-stage .review-special-header p {
    font-size: clamp(12px, 1.8cqh, 15px);
  }

  .review-view.is-special .review-special-stage .review-special-header h1 {
    margin-top: clamp(8px, 1.5cqh, 14px);
    font-size: clamp(32px, 5cqh, 44px);
  }

  .review-view.is-special .review-special-stage .review-special-header span {
    margin-top: clamp(10px, 2cqh, 18px);
    font-size: clamp(15px, 2.4cqh, 18px);
  }

  .review-view.is-special .review-special-stage .review-special-actions {
    gap: clamp(7px, 1.8cqh, 14px);
  }

  .review-view.is-special .review-special-stage .review-special-action {
    grid-template-columns: clamp(30px, 4cqh, 42px) minmax(0, 1fr) 22px;
    min-height: clamp(64px, 12cqh, 96px);
    padding: clamp(8px, 1.8cqh, 16px) clamp(14px, 2vw, 19px);
    column-gap: clamp(8px, 1.6cqh, 14px);
    border-radius: clamp(16px, 2.5cqh, 22px);
  }

  .review-view.is-special .review-special-stage .review-special-icon .ff-symbol,
  .review-view.is-special .review-special-stage .review-special-icon img {
    width: clamp(25px, 4cqh, 35px);
    height: clamp(25px, 4cqh, 35px);
  }

  .review-view.is-special .review-special-stage .review-special-copy strong {
    font-size: clamp(16px, 2.8cqh, 21px);
  }

  .review-view.is-special .review-special-stage .review-special-copy small {
    font-size: clamp(11px, 1.9cqh, 14px);
  }

  .review-view.is-special .review-special-stage .review-undo-last {
    margin-top: clamp(8px, 2cqh, 18px);
    font-size: clamp(13px, 2.2cqh, 16px);
  }
}