/* Phone fixes (Nov 9 walk-through, findings 6, 7, 8, 14, 15).
   Loaded after the other stylesheets. Everything that changes size is inside the narrow-width media query,
   so desktop is untouched, except the number box, which simply matches the other form boxes. */

/* number inputs (e.g. units) were the only form box with no styling: match the others */
input[type=number] { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 10px; border: 1px solid #d9dfe5; background: #fff; font-size: 16px; }
.field > small, .field > .muted { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; }

@media (max-width: 640px) {
  /* 7: long raw text (web addresses in visit titles) can never push the page wider than the screen */
  .view, .view .card, .list-row, .list-row .row-main, .row-main, .ev-row, .ev-row .grow, .tile, .hero-next, .visit-main, .cal-pills em {
    min-width: 0; overflow-wrap: anywhere; word-break: break-word;
  }
  .list-row .row-main b, .list-row .row-main small, .ev-row b, .ev-row small, .visit-main h3, .detail h1, .page-head h1 { overflow-wrap: anywhere; }
  .hero-next { max-width: 100%; min-height: 44px; height: auto; white-space: normal; }

  /* 6: the chat bubble is smaller, sits in the corner, and the page gets extra room at the bottom so the last
     tappable thing can always be scrolled clear of it. On Home the Chat tile is already on screen, so the bubble steps aside there. */
  .chat-fab { width: 48px; height: 48px; right: 10px; bottom: calc(var(--tab) + var(--safe-b) + 10px); }
  .chat-fab .ic { width: 22px; height: 22px; }
  .view { padding-bottom: calc(var(--tab) + var(--safe-b) + 92px); }
  body:has(main.page-home) .chat-fab { display: none; }

  /* 14: touch targets of at least 44px */
  .btn, .btn-sm { min-height: 44px; }
  .btn-sm { padding: 8px 14px; }
  .icon-btn { width: 44px; height: 44px; }
  .fchip, .chip-btn, .prop-tile .tb-unit { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
  .prop-tile .tb-unit { font-size: 13px; padding-left: 12px; padding-right: 12px; }
  .prop-tile .tb-units { gap: 8px; }
  .seg span { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .subnav a, .tabs button, .tabs a, .pv-toggle button, .kcol-add { min-height: 44px; }
  /* text links and "See all" buttons: a bigger touch area without moving the layout */
  .link, .link-bad { padding: 12px 8px; margin: -12px -8px; }
  p .link, .small .link, .err .link { padding-top: 12px; padding-bottom: 12px; }
  :is(p, span, small, li, .muted) > a:not([class]) { padding: 14px 4px; margin: 0 -4px; }
  .fx-f select, .fx-det > summary { min-height: 44px; }
  .cal-grid, .cal-dow, .cal-week { gap: 3px; }
  .cal-day { min-width: 44px; }
  .check, .check-row { min-height: 44px; }
  .check input, .check-row input[type=checkbox] { width: 24px; height: 24px; flex: none; }
  a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; }

  /* 14: text of at least 12px */
  .tabbar a, .tab-badge, .nav-badge, .fab-badge, .chip, .pill, .mini-tag, .note-tag, .kind-chip, .plan-flag, .sample-tag,
  .list-row .chip, .date-box small, .nv-cal small, .nv-cal.sm small, .cc small, .cal-dow span, .cal-pills em, .bubble small,
  .msg-day span, .day small, .res-h, .kp, .wish-flow, .inv-parties small, .inv-table th, .ring small, .su-pop, .su-review small,
  .demo-chip, .offline-chip, .pc-compare small, .auto-top small, .tile-label, .fx-on, .brand small, .auth-mobile-brand small,
  small, .small, .muted small { font-size: 12px; }
  .tab-badge, .fab-badge { min-width: 18px; height: 18px; }
  .cal-dow span { letter-spacing: .04em; }
  .chart .yl, .chart .vl, .dn-b, .notif-head small { font-size: 12px; }
  .qa { min-height: 44px; }
  .day i { font-size: 12px; }

  /* 14: tile labels wrap instead of being cut with an ellipsis */
  .tile small, .tile .tile-num, .tile b { white-space: normal; overflow: visible; text-overflow: clip; }
  .tile .tile-num { overflow-wrap: anywhere; }

  /* 15: Add property / units sheet: room at the bottom so Save never touches the screen edge */
  .sheet { padding-bottom: calc(40px + var(--safe-b)); }
  .sheet .field > small { display: block; }

  /* 15: the delete button is kept apart from the normal actions */
  .manage .btn-bad-ghost, [data-del-req] { margin-top: 22px; border-style: dashed; }
}

/* Nov 10 (finding 14, profile toggles): the switch looks the same, but the tappable area is at least 44px tall. */
.toggle input { inset: -9px 0; width: 100%; height: calc(100% + 18px); }
.toggle.sm input { inset: -11px -3px; width: calc(100% + 6px); height: calc(100% + 22px); }
.notif-row { min-height: 44px; padding-top: 0; padding-bottom: 0; }
.switch-row, .sms-type { min-height: 44px; }

/* Usability fixes (Nov 10): long property lists. */
.pg-hide{display:none !important}
.bk-plist{max-height:260px;overflow-y:auto;border:1px solid var(--line,#e3e3e3);border-radius:12px;padding:4px;display:grid;gap:2px}
.bk-popt{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 10px;border:0;background:transparent;border-radius:8px;text-align:left;font:inherit;color:inherit;cursor:pointer}
.bk-popt.on{background:rgba(241,106,50,.12);font-weight:600}
.bk-popt:focus-visible{outline:2px solid #F16A32;outline-offset:-2px}