/* Keep long exercise statements fully reachable at 100% browser zoom. */
.modal {
  overflow-y: auto;
  place-items: start center;
}

.modal.open {
  display: grid;
}

.practice-shell {
  min-width: 0;
  margin-block: auto;
}

.problem {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.12;
}

.problem.problem-long:not(.story) {
  font-size: clamp(27px, 4.5vw, 42px);
  line-height: 1.16;
  margin-top: 28px;
  margin-bottom: 34px;
}

.problem.problem-very-long:not(.story) {
  font-size: clamp(22px, 3.6vw, 32px);
  line-height: 1.2;
  margin-top: 22px;
  margin-bottom: 28px;
}

@media (max-height: 760px) {
  .practice-shell {
    min-height: 0;
    padding-top: 34px;
    padding-bottom: 28px;
  }

  .progress {
    margin-bottom: 32px;
  }

  .problem {
    margin-top: 28px;
    margin-bottom: 34px;
    font-size: clamp(34px, 7vw, 56px);
  }

  .problem.problem-long:not(.story) {
    font-size: clamp(25px, 4.2vw, 36px);
    margin-top: 20px;
    margin-bottom: 26px;
  }

  .problem.problem-very-long:not(.story) {
    font-size: clamp(20px, 3.3vw, 28px);
    margin-top: 16px;
    margin-bottom: 22px;
  }

  .modal .problem.story {
    margin-top: 24px;
    margin-bottom: 30px;
    font-size: clamp(19px, 3vw, 27px);
    line-height: 1.42;
  }
}