/* Phones (iPhone and Android), loaded after every other stylesheet.
   The app was built for a tablet; these rules make the same screens fit a phone without
   scrolling to reach Check: smaller chrome, the same big-enough (44px+) tap targets. */

@media (max-width: 560px) {
  .screen { padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); gap: 10px; }
  .card { border-radius: 22px; }

  /* question screen */
  .q-top { gap: 6px; }
  .q-top .ghost-btn { min-height: 44px; padding: 6px 10px; font-size: .95rem; border-radius: 12px; }
  .top-actions { gap: 6px; }
  .q-mid { min-width: 0; flex: 1; }
  .q-topic { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .dots { gap: 6px; }
  .dot { width: 12px; height: 12px; }
  .q-card { padding: 14px 16px 12px; gap: 10px; }
  .q-prompt { min-height: 64px; padding: 4px 0; }
  .entry-box { min-width: 150px; min-height: 54px; font-size: 1.8rem; border-radius: 14px; }
  .entry-box.small { min-width: 64px; min-height: 48px; font-size: 1.5rem; }
  .entry-label { font-size: 1rem; }
  .number-entry, .fraction-entry { gap: 10px; }
  .keypad { gap: 8px; }
  .keypad button { min-height: clamp(48px, 7vh, 62px); font-size: 1.55rem; border-radius: 14px; }
  .keypad .mode-btn { font-size: 1.05rem; }

  /* pop-ups */
  .feedback-card { padding: 24px 18px; border-radius: 24px; }
  .fb-icon { font-size: 48px; }
  .feedback-card h2 { font-size: 1.5rem; }
  .feedback-card p { font-size: 1.05rem; margin-bottom: 18px; }

  /* help flow */
  .flow-bar { gap: 6px; padding: max(8px, env(safe-area-inset-top)) 10px 8px; }
  .flow-bar .ghost-btn { min-width: 44px; min-height: 44px; font-size: 1.05rem; padding: 6px 8px; }
  .flow-stars { font-size: 1rem; padding: 6px 10px; }
  .fl-dots.fl-real { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fl-dot-n { width: 30px; height: 30px; }
  .flow-body { padding: 10px 10px max(12px, env(safe-area-inset-bottom)); gap: 10px; }
  .owl { gap: 8px; }
  .owl-face { width: 42px; height: 42px; font-size: 24px; }
  .owl-say { font-size: 1.05rem; padding: 8px 12px; border-radius: 16px; }
  .owl.big .owl-face { width: 72px; height: 72px; font-size: 42px; }
  .owl.big .owl-say { font-size: 1.2rem; }
  .fl-board, .fl-ask { border-radius: 18px; padding: 12px; }
  .fl-q { font-size: 1.15rem; }
  .fl-choice { min-height: 52px; font-size: 1.1rem; border-radius: 14px; }
  .fl-feedback { font-size: 1.05rem; padding: 8px 12px; }
  .fl-keys button { min-height: 48px; }
  .fl-realq .sum, .fl-realq .column-sum, .fl-realq .bus-stop { font-size: 1.4rem; }
  .fl-prompt .fl-sum .sum, .fl-prompt .fl-sum .column-sum, .fl-prompt .fl-sum .bus-stop { font-size: 1.9rem; }
  .fl-card .mcard-caption { font-size: 1.1rem; }
  .fl-card .mcard-stage { min-height: 160px; }
  .fl-card .mcard-controls button { min-height: 52px; font-size: 1.05rem; }
  .fl-board-pic .mgrid { font-size: calc(clamp(1.4rem, 7vw, 2rem) * var(--fit, 1)); }
  .fl-chips button { font-size: 1rem; }
  .en-words { font-size: 1.25rem; line-height: 2.1; }
  .en-text, .ef-think p, .ef-ask .gq-text { font-size: 1.1rem; }

  /* chat tutor */
  .tutor-sheet { border-radius: 0; }
}

/* very small phones (iPhone SE / mini) */
@media (max-width: 380px) {
  .keypad button { min-height: clamp(46px, 6.6vh, 56px); }
  .q-prompt .sum, .q-prompt .column-sum, .q-prompt .bus-stop { max-width: 100%; }
}

/* phones on their side: short screens */
@media (max-height: 500px) and (orientation: landscape) {
  .screen { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom));
            padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); gap: 8px; }
  .q-top .ghost-btn { min-height: 40px; padding: 4px 10px; }
  .q-card { padding: 10px 14px; gap: 8px; }
  .q-prompt { min-height: 48px; }
  .keypad { gap: 6px; }
  .keypad button { min-height: 40px; font-size: 1.3rem; box-shadow: 0 3px 0 var(--key-dark); }
  .entry-box { min-height: 46px; font-size: 1.5rem; }
  .flow-bar { padding: 4px max(10px, env(safe-area-inset-right)) 4px max(10px, env(safe-area-inset-left)); }
  .flow-body { padding: 8px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); }
  .owl-face { width: 36px; height: 36px; font-size: 20px; }
  .owl-say { font-size: 1rem; padding: 6px 10px; }
  .hm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-tile { min-height: 60px; padding: 8px 12px; }
}

/* a tall board on a phone (js/flow.js fit() adds .compact): the owl steps aside and her own
   question isn't repeated above the walk-through board (its title already shows it) */
@media (max-width: 560px), (max-height: 500px) {
  .flow-body.compact > .owl { display: none; }
  .flow-body.st-walk .fl-split > .fl-realq,
  .flow-body.compact.st-explain_guided .fl-split > .fl-realq { display: none; }
  .flow-body.compact .fl-note { font-size: .95rem; padding: 4px 8px; }
  .flow-body.compact .fl-board { padding: 8px; gap: 6px; }
  .flow-body.compact .fl-board-title { font-size: .95rem; }
}

/* small phones (iPhone SE, mini): tall boards squeeze a little more. Keys stay 44px (Apple's minimum). */
@media (max-height: 700px) and (max-width: 560px) {
  .flow-body.compact .fl-keys { gap: 4px; }
  .flow-body.compact .fl-keys button { min-height: 44px; font-size: 1.35rem; }
  .flow-body.compact .fl-box { min-height: 46px; font-size: 1.5rem; }
  .flow-body.compact .fl-q { font-size: 1.05rem; }
  .flow-body.compact .fl-ask { padding: 8px 10px; gap: 6px; }
  .flow-body.compact .fl-steps span { height: 7px; }
  .flow-body.compact { gap: 6px; }
  .flow-body.compact .fl-split, .flow-body.compact .fl-side { gap: 6px; }
  .flow-body.compact .fl-feedback { padding: 4px 10px; font-size: .95rem; }
  .flow-body.compact .fl-box { min-height: 44px; }
}