/* mobile-app.css - the phone app line under a service (mobile-app.js).
 *
 * MOVED HERE 2 Oct 2026 from account.css, when /request began showing the
 * same line: one stylesheet beside the one script, linked by both pages,
 * rather than a second copy in request.html's own styles that would drift.
 *
 * A short label, then the store buttons in a row of their own. Every
 * button is the same width -- in em, so it holds when a phone enlarges the
 * text -- and the row starts at the label's left edge, so when a narrow
 * card wraps them they stack in a tidy column rather than trailing the
 * label (Carson's phone screenshot, 2 Oct).
 *
 * SCOPED TO THE TWO ROW SHAPES the line sits in -- `.option` (a pickable
 * service, both pages; the account page's core list too) and `.row`
 * (/request's "Included with every account" card) -- so each rule outranks
 * the page's own `.option .info p { margin: 0 }` whichever stylesheet loads
 * first. Uses the pages' own colour tokens (--text-dim, --accent).
 */
.option .info p.app-line,
.row .info p.app-line { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--text-dim); }

.option .info p.app-line .app-line-label,
.row .info p.app-line .app-line-label { display: block; }

.option .info p.app-line .app-links,
.row .info p.app-line .app-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.option .info p.app-line a.app-store-link,
.row .info p.app-line a.app-store-link {
  box-sizing: border-box; width: 8.5em; padding: 3px 8px; border-radius: 999px; text-align: center;
  border: 1px solid currentColor; font-weight: 600; font-size: 11px; text-decoration: none;
  color: var(--accent); white-space: nowrap;
}

.option .info p.app-line a.app-store-link:hover,
.option .info p.app-line a.app-store-link:focus-visible,
.row .info p.app-line a.app-store-link:hover,
.row .info p.app-line a.app-store-link:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); }