/* Studio phone fixes (owner screenshots, 10 Oct 2026). Loaded last on studio.html. */

/* iPhone Safari gives date and time fields a built-in minimum width and centred text, so they ran past the
   right edge of the card. Make them behave like every other field. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}
label:has(> input[type="date"]),
label:has(> input[type="time"]),
label:has(> input[type="datetime-local"]) {
  min-width: 0;
  max-width: 100%;
}

/* "Preview the opening" and "Browse all designs" sat jammed together and the link was squeezed out of view.
   Give the link its own line, centred under the button, with a proper tap target. */
button[data-preview="opening"] + .text-link[data-view="design"] {
  display: block;
  width: max-content;
  max-width: 100%;
  min-height: 44px;
  margin: 10px auto 0;
  padding: 10px 4px;
  white-space: normal;
  text-align: center;
}
@media (max-width: 640px) {
  button[data-preview="opening"] {
    display: block;
    width: 100%;
  }
}