/* Shared by the website and OAuth forms. Coarse pointers cover phone landscape
   even when its viewport is wider than the responsive layout breakpoints. */
@media (max-width: 1024px), (any-pointer: coarse) {
  input, textarea, select {
    /* Labels use smaller text. Keep a 16px floor without reducing larger
       inherited/root text or disabling the browser's accessible scaling. */
    font-size: max(16px, 1rem, 1em);
  }

  /* Native date/time editors need the full row in landscape too, especially
     inside the narrower ingredient and sensation cards. */
  .form-grid label:has(input:is([type="date"], [type="time"], [type="datetime-local"])),
  .list-row .form-grid label:has(select) {
    grid-column: 1 / -1;
  }
  input:is([type="date"], [type="time"], [type="datetime-local"]) {
    padding-inline: 8px;
  }

  /* OAuth uses a standalone native form, not the website's layout stylesheet. */
  .oauth-page { margin: 16px; }
  .oauth-page form { display: flex; flex-wrap: wrap; gap: 12px; }
  .oauth-page label { display: block; width: 100%; }
  .oauth-page input:not([type="hidden"]) {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    margin-top: 8px;
    padding: 8px;
  }
  .oauth-page button {
    font-size: max(16px, 1rem, 1em);
    min-height: 44px;
    padding: 8px 12px;
  }
}

@media (max-width: 700px) {
  /* Native date/time controls and selected option text need room at 16px. */
  .form-grid label:has(select),
  .set-grid label:has(select) {
    grid-column: 1 / -1;
  }
}