/* SethRicks.org portal — mobile responsiveness overrides (versioned/immutable: responsive.v1.css).
   Additive; loaded AFTER portal.v1.css so these win. Keeps core.v2.js/portal.v1.css untouched. */

/* iOS Safari zooms when a focused field has font-size < 16px. Force >=16px on phones.
   !important is required to beat inline font-size styles on some admin fields (caption/status). */
@media (max-width: 720px) {
  .pt-input, .pt-select, .pt-textarea { font-size: 16px !important; }
}

/* Long unbroken strings (emails, live/preview URLs, Stripe ids, subjects, free-text) must wrap,
   never overflow a card — the portal has no overflow-x:clip, so overflow = a real scrollbar. */
.pt-item .title, .pt-item .meta, .pt-row .v, .pt-muted, .pt-msg {
  overflow-wrap: anywhere; word-break: break-word; min-width: 0;
}

/* Key/value + admin editor rows wrap instead of overflowing on narrow screens. */
.pt-row { flex-wrap: wrap; }

/* Login: grid `place-items:center` lets the auto track grow to max-content and overflow the
   viewport on phones. Flex centering shrinks the card to the viewport instead. */
.pt-auth-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* Anchor the card to the VIEWPORT (vw) so it can never exceed the screen even if an ancestor's
   width resolves wider than the viewport. min() caps it at the 430px design width on desktop. */
.pt-auth { width: min(430px, calc(100vw - 32px)); }

/* Header de-crowd + larger theme-switch tap targets on phones (4 in-header controls can't all be
   44px on a 320px screen, but 34px is far more tappable than the 24px default). */
@media (max-width: 480px) {
  .pt-head-inner { gap: 10px; }
  .pt-head-right { gap: 8px; }
  .pt-theme-btn { width: 34px; height: 34px; }
  .pt-brand { font-size: .98rem; }
}

/* Admin density: dense rows wrap, inputs shrink, photo captions go responsive, CTAs stretch,
   and the photo delete button gets a usable tap target. */
@media (max-width: 560px) {
  .pt-actions .pt-btn { flex: 1 1 auto; }
  .pt-row > .pt-input, .pt-row > .pt-select, .pt-row > .pt-textarea { flex: 1 1 auto; min-width: 0; }
  .photo-cap { width: 100% !important; max-width: 160px; }
  .photo-del { width: 34px !important; height: 34px !important; font-size: 18px !important; }
}