/* ShelfOracle Oracle wizard: mobile-first vertical compaction.
   Keeps the existing visual identity while ensuring the primary navigation
   actions stay comfortably above the fixed footer on common phone sizes. */

@media (max-width: 650px) {
  .wizard-shell {
    padding-top: 24px !important;
    padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
  }

  .wizard-top {
    align-items: center;
    gap: 10px;
  }

  .wizard-shell .progress {
    margin: 10px 0 24px !important;
  }

  .wizard-shell .question-card {
    padding: 24px 16px 22px !important;
  }

  .wizard-shell .question-symbol {
    width: 54px !important;
    height: 54px !important;
    margin-bottom: 12px !important;
    font-size: 24px !important;
    box-shadow: 3px 3px 0 var(--ink) !important;
  }

  .wizard-shell .question-card h1 {
    margin-bottom: 8px !important;
    font-size: clamp(34px, 10vw, 42px) !important;
    line-height: .96 !important;
  }

  .wizard-shell .question-card > p {
    margin: 0 auto 18px !important;
    max-width: 34rem;
    font-size: 14px;
    line-height: 1.35;
  }

  .wizard-shell .number-picker {
    grid-template-columns: 44px minmax(88px, 108px) 44px !important;
    gap: 10px !important;
    margin: 10px auto 2px !important;
  }

  .wizard-shell .number-picker button {
    width: 44px !important;
    height: 44px !important;
    font-size: 21px !important;
  }

  .wizard-shell .number-picker strong {
    font-size: 64px !important;
    line-height: .95 !important;
  }

  .wizard-shell .number-picker span {
    margin-top: -10px !important;
    font-size: 13px;
  }

  .wizard-shell .option-grid {
    gap: 9px !important;
  }

  .wizard-shell .option-grid button {
    min-height: 60px !important;
    padding: 13px 14px !important;
  }

  .wizard-shell .wizard-actions {
    gap: 12px;
    margin-top: 20px !important;
    padding-top: 14px !important;
  }

  .wizard-shell .wizard-actions button {
    flex: 1 1 0;
    min-height: 48px;
  }
}

/* Extra compaction for physically short phone viewports / browser chrome. */
@media (max-width: 650px) and (max-height: 760px) {
  .wizard-shell {
    padding-top: 18px !important;
  }

  .wizard-shell .progress {
    margin-bottom: 16px !important;
  }

  .wizard-shell .question-card {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .wizard-shell .question-symbol {
    width: 46px !important;
    height: 46px !important;
    margin-bottom: 9px !important;
    font-size: 21px !important;
  }

  .wizard-shell .question-card h1 {
    font-size: clamp(31px, 9vw, 38px) !important;
  }

  .wizard-shell .question-card > p {
    margin-bottom: 12px !important;
  }

  .wizard-shell .number-picker {
    margin-top: 6px !important;
  }

  .wizard-shell .number-picker strong {
    font-size: 56px !important;
  }

  .wizard-shell .wizard-actions {
    margin-top: 14px !important;
    padding-top: 11px !important;
  }
}