/* ── Phones: the sizes a thumb and an eye need ────────────────────────────
   Below 640px only; nothing here reaches a laptop. One file, loaded by both
   base templates next to tokens.css, so every page — converted to the phone
   look or not yet — gets readable text and controls a thumb can hit.

   Measured before (2026-10-14, 129 pages at 390px): 120 had text under 12px
   and 90 had more than three controls under 32px tall. */

@media (max-width: 639px) {
  /* 16px in a field: under it, iOS zooms the whole page when the field is
     tapped, and the layout jumps sideways. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]):not([type="file"]),
  select,
  textarea {
    font-size: 1rem !important;   /* over Tailwind's text-sm/text-xs on the field */
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]):not([type="file"]),
  select {
    min-height: 2.75rem;
  }

  /* The smallest text sizes the templates use, raised to 12px. */
  .text-\[0\.5rem\], .text-\[0\.5625rem\], .text-\[0\.625rem\], .text-\[0\.6875rem\],
  .text-\[9px\], .text-\[10px\], .text-\[11px\], .text-\[0\.66rem\], .text-\[0\.68rem\] {
    font-size: .75rem !important;
  }

  /* The rich-text editor's toolbar (resolutions, minutes). */
  .ck.ck-toolbar .ck.ck-button { min-height: 2.25rem; min-width: 2.25rem; }

  /* A page inside the panel keeps room at the bottom for the ✦ button, as
     every other page does — it sat on Save at the foot of each settings panel. */
  .app-canvas-frame__main { padding-bottom: 5rem; }

  /* Button heights on a phone live in tokens.css, the one place .su-btn is defined. */
}