/* Taps a thumb can hit, from the app walk at 390 wide (2026-11-08, PROJECTS/MY EPK/app-improvements-2026-11.md).
   Phones only; the desktop look is unchanged. layout.html loads it after app.css and roles.css. */

/* an inbox thread's name is the page's h1 now; it keeps the look it had as a link */
.thread-name-h { margin: 0; font: inherit; letter-spacing: inherit; line-height: inherit; }

@media (max-width: 640px) {
  /* the footer (Support, Feedback, What's new, Privacy, Terms) and the guest top bar (For venues, Sign in) */
  .footer nav a, .footer > a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; min-width: 36px; }
  .topnav > a:not(.btn), .topnav a.blog-link { display: inline-flex; align-items: center; min-height: 36px; }
  /* that inline-flex outranked three rules (Shawn 2026-11-09, "iOS issues and mobile web issues please fix"): app.css's
     .topnav .hide-sm, so a visitor who picked Venue got Find DJs and Shows back on a full bar; html.native's Blog in the
     iOS app's bar; and the help button's grid. The help button is a quiet outline, not a 40px white disc at the edge;
     .topnav a::after still gives it a thumb sized hit area. */
  .topnav > a.hide-sm:not(.btn), html.native .topnav > a.blog-link { display: none; }
  .topnav > a.help-btn { display: inline-grid; width: 32px; height: 32px; min-height: 0; margin-right: .15rem; background: transparent; font-size: .85rem; }
  .bar .help-btn { width: 34px; height: 34px; background: transparent; font-size: .85rem; }   /* the same one in the builder's bar */
  /* the last line clears the home indicator and Safari's toolbar (viewport-fit=cover); the app's footer has no padding of its own */
  .footer { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom)); }
  html.native .footer { padding-bottom: env(safe-area-inset-bottom); }

  /* Profile: Delete a kit, another kit for an alias, switch to Promoter / Venue */
  .kits-page form.inline > .danger-link,
  .kits-page .kit-new .linklike,
  .kits-page .account-role-line .linklike { display: inline-flex; align-items: center; min-height: 36px; }

  /* a thread's Report and Block */
  .thread-safety .linklike { display: inline-flex; align-items: center; min-height: 36px; }
}