/* mobile_review_20261019: shared phone fixes, loaded last from includes/site_header.php.
   Everything is inside max-width:720px so desktop is unchanged. Rollback: remove the <link> line in site_header.php. */
@media (max-width: 720px) {
  /* 1. Stacked label/field rows (Add/Edit result "points estimate" etc.). The global label rule is
     flex row-wrap with inputs at flex-basis 100%; when a block switches to flex-direction:column that
     100% became a HEIGHT and the input wrapped into a 2nd column off the right edge (huge tall boxes). */
  .rf-grid label, .rf-points > label, .rf-mv-more label, .rf-showno, .result-form label {
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
  }
  .result-form label > input:not([type="checkbox"]):not([type="radio"]),
  .result-form label > select, .result-form label > textarea,
  .rf-grid input, .rf-mv-more input, .rf-points > label input {
    flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 44px;
  }
  .result-form label.pl-chip { flex-direction: row; align-items: center; }
  .result-form .hint { overflow-wrap: anywhere; }

  /* 2. iOS zooms into any field under 16px; keep all fields at 16px and a normal height. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px; }
  input[type="date"], input[type="number"], input[type="text"], input[type="search"], input[type="email"], select { min-height: 44px; }
  input[type="file"] { font-size: 16px; max-width: 100%; min-height: 44px; }
  .rp-bar input[type="date"], #rpFrom, #rpTo { min-width: 0; max-width: 100%; }

  /* 3. Tap targets (44px). Small buttons/toggles/summaries grow; padding only, no desktop effect. */
  .btn-small, .rp-link, .pl-tog, .cols-mv, .btn-textlink, #dpDelete, .past-bookdel, .past-letdel, .how-sample-zoom {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .rp-link { padding: 0 .55rem; }
  .cols-mv { min-width: 44px; }
  details > summary { min-height: 44px; box-sizing: border-box; padding-top: max(.55rem, 0px); padding-bottom: max(.55rem, 0px); } /* keeps the ▶ marker */
  label.pl-chip { min-height: 44px; }
  .show-links a, .show-super a, .fc-what a, .jd-crumb a, .back-link a, .js-top a, .auto-build-note a {
    display: inline-block; padding-top: .8rem; padding-bottom: .8rem; margin-top: -.5rem; margin-bottom: -.5rem;
  }
  .show-links { row-gap: .25rem; }
  .site-footer a { display: inline-block; padding: .8rem .2rem; }
  .judges-page h3 > a { display: block; padding: .55rem 0; }
  .dp-tab { min-height: 44px; display: inline-flex; align-items: center; }
  .ds-more a { display: inline-block; padding: .7rem 0; }
  #tabFuture, #tabPast, #typeFilter > .btn, .btn.btn-small, .btn.btn-small.pe-btn, .pe-act .btn { min-height: 44px; }
  input[type="url"], input[type="tel"], input[type="password"], select.ds-state-sel { min-height: 44px; height: auto; }

  /* 4. Never let wide content push the page sideways. */
  img, video, iframe, canvas { max-width: 100%; height: auto; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
  .card, .past-card, fieldset { min-width: 0; max-width: 100%; }
}