/*
 * 小澳工具的手機共用介面護欄。
 *
 * iOS Safari 會在可編輯控制項的計算字級低於 16px 時，自動放大頁面。
 * 這裡刻意不關閉使用者的手勢縮放；只讓輸入框本身達到足夠可讀的尺寸，
 * 因此不會在點選／離開欄位時來回縮放、造成畫面閃動。
 */
/* iPhone / iPad 的 Safari 在橫向、分割畫面時 CSS 寬度可能超過 720px；
   這條規則不能只依賴手機斷點，否則一聚焦仍會被 Safari 放大。 */
@supports (-webkit-touch-callout: none) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 17px !important;
    line-height: 1.35;
  }
}

@media (max-width: 720px) {
  /*
   * 手機上，介紹／說明文字應使用容器的完整可用寬度。各工具早期保留的
   * 335px、350px、380px 上限，會在中文最後只留下「幣」等單字換行。
   * 只針對閱讀文案，不套用到金額、標籤、按鈕或日期等需要維持單行的資料。
   */
  :where(.hero, .page-hero, .intro-copy, .section-copy, .empty-state,
    .health-hero, .health-organizer-copy) > :where(h1, h2, h3, p),
  :where(.hero h1, .hero h2, .hero h3, .hero p, .hero-care-line, .intro,
    .empty-state p, .sheet-copy) {
    min-inline-size: 0;
    max-inline-size: none !important;
  }

  :where(.hero h1, .hero h2, .hero h3, .hero-care-line, .intro) {
    white-space: normal !important;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 17px !important;
    line-height: 1.35;
    min-height: 44px;
    touch-action: manipulation;
  }

  textarea { min-height: 112px; }

  input[type="checkbox"],
  input[type="radio"] {
    inline-size: 22px;
    block-size: 22px;
    flex: 0 0 22px;
    touch-action: manipulation;
  }

  /* 所有實際按鈕都有至少一個 44px 的點擊高度；視覺仍可保持輕巧。 */
  button,
  [role="button"] {
    min-height: 44px;
    touch-action: manipulation;
  }

  /* 純圖示控制項沒有文字寬度可借用，也保留同樣大的可點範圍。 */
  button[aria-label],
  button[title],
  [role="button"][aria-label] {
    min-inline-size: 44px;
  }

  /* 這些容器裡的可伸縮內容可正確收縮，避免明明有空間仍提早換行。 */
  :where(.app, .app-container, .content, .panel, .card, .sheet, .dialog,
    .hero, .toolbar, .top, .header-actions, .section-head, .form-actions,
    .record, .item, .timeline-item, .routine-top, .vehicle-current,
    .health-hero, .health-organizer-bridge, .status-card) {
    min-width: 0;
  }

  :where(.hero, .toolbar, .top, .header-actions, .section-head, .form-actions,
    .record, .item, .timeline-item, .routine-top, .vehicle-current,
    .health-hero, .health-organizer-bridge, .status-card) > * {
    min-width: 0;
  }

  :where(.top-actions, .header-actions, .form-actions, .record-actions,
    .health-hero-actions, .health-organizer-actions) {
    flex-wrap: wrap;
  }
}