/* phone.css — the iPhone rules applied to the shared shell (UX installment 1, 2026-10-11).

   Loaded after app.css. Only narrow screens are touched (under 760 px), and only shared parts of the shell that every
   page has; a page's own style block can still set its own sizes, and the page check (?pagecheck=1) shows what is left.
   Owner, 2026-10-07: "making it smaller does not mean making the type smaller … somebody who's 60 with bifocals". */
@media (max-width: 760px) {
  /* fields at 16 px: below that, iPhone Safari zooms the whole page on every tap and the reader loses the place */
  input[type=text], input[type=search], input[type=email], input[type=tel], input[type=number], input[type=password],
  input[type=date], select, textarea, .finder input { font-size: var(--ts-type-field) !important; }
  .finder input { min-height: var(--ts-tap); }

  /* the shared small print and labels rise to the floor */
  .small, .note, .muted, .hint, .rail-fine, .who, .home-fresh, .home-more, .home-goto, .home-buttons,
  table.data th, .phone-note, .crumb, .tag, .rail-rule { font-size: var(--ts-type-floor); }
  table.data { font-size: var(--ts-type-floor); }

  /* the slide-out rail: finger-sized rows */
  .rail-item, .rail-nav summary, .rail-nav .rail-tree > summary, .rail-kids > .rail-item {
    min-height: var(--ts-tap); font-size: 16px; }

  /* the breadcrumb: each step a finger can press */
  .crumb a { display: inline-flex; align-items: center; min-height: var(--ts-tap); }

  /* buttons */
  .btn, button.btn, .btn-go, .ts-btn { min-height: var(--ts-btn); }
}

/* Touch widths (phone and iPad, under 1,100 px): the shared head and foot (UX installment 1, 2026-10-11).
   Measured by the page check on 2026-10-11: at 402 px and 820 px the head was wider than the screen, so the whole page
   scrolled sideways (661 px and 1,042 px), and the head's links and the foot's buttons were 13–34 px tall. Here the head
   wraps onto a second line instead of running off the screen, and every control in it is finger-sized. Nothing is
   hidden that was shown before. */
@media (max-width: 1099px) {
  .top { flex-wrap: wrap; row-gap: 2px; }
  .top > *, .top .who > * { min-width: 0; }
  .top .who { flex-wrap: wrap; white-space: normal; row-gap: 0; }
  .top a, .top button, .top label, .top .bm-star, .foot .print, .foot button, #pageid-copy, .crumb a {
    display: inline-flex; align-items: center; min-height: var(--ts-tap); }
  .top .rail-open { min-width: var(--ts-tap); justify-content: center; }
  .top .top-host { border-radius: 8px; }            /* the hosting badge keeps its color; a finger-sized box, not a tall pill */
  .top .who-store { flex-direction: row; gap: 0 12px; }
  .finder { flex: 1 1 200px; min-width: 0; }
}