/* Last presentation layer for the phone website. Desktop body type and the
   existing desktop navbar stay unchanged. Fixed card tracks prevent intrinsic
   text/font widths from resizing individual creator avatars, including when
   Safari Lockdown Mode uses the system-font fallback. No zoom/transform hack. */
#app .fc5[data-fc5-screen="discover"] { --discovery-card-width:220px; }
@media (max-width:640px) {
  #app .fc5[data-fc5-screen="discover"] { --discovery-card-width:160px; }
}
#app .fc5[data-fc5-screen="discover"] :is(.fc5-rail,.creator-rail) {
  grid-auto-columns:var(--discovery-card-width);
  grid-template-columns:none;
  align-items:stretch;
  gap:16px;
  max-width:100%;
  min-width:0;
}
#app .fc5[data-fc5-screen="discover"] :is(.fc5-rail,.creator-rail)>[role="listitem"] {
  width:var(--discovery-card-width);
  min-width:0;
  display:flex;
}
#app .fc5[data-fc5-screen="discover"] .fc5-grid {
  grid-template-columns:repeat(auto-fill,var(--discovery-card-width));
  justify-content:start;
  gap:20px 16px;
}
#app .fc5[data-fc5-screen="discover"] .fc5-card {
  width:var(--discovery-card-width);
  min-width:0;
  max-width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}
#app .fc5[data-fc5-screen="discover"] .fc5-card-media {
  width:100%;
  height:auto;
  aspect-ratio:4 / 5;
  border-radius:16px 16px 0 0;
  flex:none;
  min-width:0;
}
#app .fc5[data-fc5-screen="discover"] .fc5-card-body { min-width:0; width:100%; gap:2px; text-align:center; }
#app .fc5[data-fc5-screen="discover"] .fc5-card-name {
  font-size:19.2px;
  line-height:1.3;
  min-height:0;
  overflow-wrap:anywhere;
  white-space:normal;
}
#app .fc5[data-fc5-screen="discover"] .fc5-card-meta {
  font-size:15.36px;
  line-height:1.4;
  min-height:0;
  overflow-wrap:anywhere;
  white-space:normal;
}

@media(max-width:899px) {
  :root { --fs-body:16px; --fs-small:12px; --fs-kicker:12px; }
  body { font-size:16px; line-height:1.5; }
  #app :is(.fc5,.page,.fc-root,.sheet,.auth-dialog,.media-dialog) { font-size:16px; line-height:1.5; }
  #app :is(h1,.h1,.fc5-title) { font-size:28.8px; line-height:1.15; }
  #app :is(h2,.h2,.fc5-h2,.booking-period-title) { font-size:21.6px; line-height:1.25; }
  #app :is(h3,.h3,.fc5-slot-head h3) { font-size:16px; line-height:1.3; }
  #app :is(.sub,.fc5-sub,.list-inline) { font-size:14.4px; line-height:1.5; }
  #app :is(.note,.status,.banner,.fc5-notice,.empty,.fc5-empty,.facts dd,.body-copy,.body-copy-sm,.legal-copy) { font-size:16px; line-height:1.5; }
  #app :is(.small,.fc5-card-meta,.fc5-mono,.field .hint,.field .err,.err,.rowitem .m,.finance-audit,.account-details dt,.fc5-metrics dd.fc5-metric-sub,.steps .st,.hold,.radio .d,.linkrow .d,.social-prefix,.profile-social-source) { font-size:12px; line-height:1.45; }
  #app :is(.kicker,.fc5-eyebrow,.fc5-test-label,.fc5-metrics dt,.tags-order .to .n,.fc5-badge,.facts dt,.banner .k,.fc-table th,.profile-facts dt) { font-size:12px; line-height:1.5; }
  #app :is(.rowitem .t,.radio .l,.linkrow .l,.event-card-title) { font-size:14.4px; line-height:1.4; }
  #app :is(.field label,.field .lbl,.field legend,.media-controls label) { font-size:14.4px; line-height:1.4; }
  #app :is(.btn,.fc5-btn,.btn-sm,.fc5-btn-sm,.seg button,.chip) {
    font-size:14.4px;
    line-height:1.35;
    min-height:48px;
    height:auto;
    padding:10px 14px;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  #app :is(.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),.field textarea,.field select,.social-input-wrap input) {
    font-size:16px;
    line-height:1.4;
    min-height:48px;
    height:auto;
    min-width:0;
    max-width:100%;
    padding:10px 12px;
  }
  #app :is(.search input,.search .tw) { font-size:16px; line-height:1.4; }
  #app .search { min-height:52px; padding-inline:12px; }
  #app .search .tw { left:42px; }
  #app .search input { padding-block:12px; }
  #app :is(.pill,.tag-src) { font-size:12px; line-height:1.4; min-height:24px; white-space:normal; }
  #app .rowitem { gap:12px; }
  #app .rowitem .date { width:44px; min-width:44px; font-size:12px; }
  #app .rowitem .date b { font-size:19.2px; line-height:1.1; }
  #app .rowitem .date span { font-size:12px; }
  #app .pass .line { font-size:12px; }
  #app .pass :is(.tchip,.seal,.stub .hint) { font-size:12px; }
  #app .pass .stub .code { font-size:12px; }
  #app :is(.finance-table,.fc-table) { font-size:12px; }
  #app .finance-table th { font-size:12px; }
  #app .profile-cover-name .h1 { font-size:28.8px; line-height:1.15; }
  #app .profile-cover-byline { font-size:12.8px; line-height:1.4; }
  #app :is(.profile-cover-facts dd,.profile-facts dd,.profile-social-count,.profile-social-followers) { font-size:12px; line-height:1.4; }
  #app .profile-cover-facts dt { font-size:12px; }
  #app .profile-social-icon-count { font-size:12px; }
  #app .account-inline-handle-input { font-size:22.4px; }
  #app .event-card-date { flex-basis:44px; }
  #app .event-card-date b { font-size:19.2px; }
  #app .event-card-date .kicker { font-size:12px; }
  #app .fc6-feedback .k { font-size:12.8px; }
  #app .fc6-feedback .b p { font-size:12px; }
  #app .fc6-feedback .btn { font-size:14.4px; min-height:44px; }
  #app .footer,#app .footer .footer-in { font-size:14px; line-height:1.4; }
  #app .footer-links a { min-height:44px; }
  #app .toast { font-size:12.8px; line-height:1.4; }

  /* The same visual scale in auth, onboarding and their independent dialogs.
     Preserve any explicit accessibility multiplier and never shrink OTP text
     below iOS's normal input size or the arrow's 44px target. */
  #app .fc-root { font-size:calc(16px * var(--fc-text-scale,1)); }
  #app .fc-root .fc-title { font-size:calc(28.8px * var(--fc-text-scale,1)); line-height:1.15; }
  #app .fc-root .fc-field__label { font-size:calc(14.4px * var(--fc-text-scale,1)); }
  #app .fc-root :is(.fc-hint,.fc-status,.fc-choice__time,.fc-choice__meta,.fc-identity-option) { font-size:calc(12px * var(--fc-text-scale,1)); }
  #app .fc-root :is(.fc-eyebrow,.fc-or,.fc-role-stub) { font-size:calc(12px * var(--fc-text-scale,1)); }
  #app .fc-root :is(.fc-input,.fc-select) { font-size:calc(16px * var(--fc-text-scale,1)); min-height:50px; padding:12px; }
  #app .fc-root .fc-input--code { font-size:calc(19.2px * var(--fc-text-scale,1)); letter-spacing:.08em; }
  #app .fc-root .fc-btn { font-size:calc(14.4px * var(--fc-text-scale,1)); min-height:48px; padding:12px 16px; }
  #app .fc-root .fc-btn.fc-verify__go { font-size:16px; width:44px; height:44px; min-width:44px; min-height:44px; padding:0; }
  #app .fc-root :is(.fc-seg button,.fc-tabs button,.fc-table) { font-size:calc(14.4px * var(--fc-text-scale,1)); }
  #app .fc-root .fc-choice__title { font-size:calc(14.4px * var(--fc-text-scale,1)); }
  #app .fc-root .fc-table th { font-size:calc(12px * var(--fc-text-scale,1)); }
  #app .fc-root .fc-legal { font-size:calc(12px * var(--fc-text-scale,1)); }
  #app .fc-root .fc-sms-disclosure { font-size:calc(12px * var(--fc-text-scale,1)); }
  #app .fc-root .fc-wheel__bar h2 { font-size:17.6px; }
  #app .fc-root .fc-wheel__option { min-height:48px; }
  #app .public-intro-page .btn[data-action=skipIntro] { font-size:14.4px; }
  #app .notification-inbox { font-size:16px; }
  #app :is(.notification-title,.notification-body,.notification-inline-error,.notification-inline-error button,.notification-empty) { font-size:16px; line-height:1.45; }
  #app .notification-meta { font-size:12px; }
  #app .notification-inbox-head h2 { font-size:17.6px; }
  #app .settings-dropdown { font-size:16px; }
  #app .settings-dropdown .linkrow .l { font-size:14.4px; }
  #app :is(.settings-dropdown .linkrow .d,.settings-dropdown .appearance-toggle .small,.settings-motion-toggle [data-motion-state]) { font-size:12px; }

  /* A phone navbar is one stable row. These rules are entirely below 900px;
     desktop's current 80px bar and 21px navigation text are untouched. */
  #app .fc6-topbar .fc5-topbar-in { min-height:64px; padding:6px 12px; gap:12px; flex-wrap:nowrap; }
  #app .fc6-brand { min-height:44px; gap:0; flex:none; }
  #app .fc6-topbar .fc5-logo { min-height:44px; flex:none; }
  #app .fc6-topbar .fc5-logo img { width:80px; height:auto; }
  #app .fc6-topbar .fc5-nav { display:none; }
  #app .fc6-topbar .fc6-tools { min-height:44px; gap:2px; flex-wrap:nowrap; margin-left:auto; }
  #app .fc6-topbar .iconbtn { width:44px; height:44px; min-width:44px; min-height:44px; }
  #app .fc6-topbar .iconbtn>svg { width:24px; height:24px; }
  #app .fc6-profile-shortcut img,#app .fc6-profile-shortcut>span { width:32px; height:32px; font-size:16px; }
  #app .fc6-topbar .fc6-tools>a:not(.iconbtn) { font-size:16px; min-height:44px; padding-inline:6px; }
  #app .fc6-topbar .fc6-tools>.fc5-btn-primary { display:none; }
  #app .fc6-topbar .fc6-tools .dot { width:8px; height:8px; top:7px; right:7px; }

  #app .fc5[data-fc5-screen="discover"] .fc5-card-name { font-size:19.2px; }
  #app .fc5[data-fc5-screen="discover"] .fc5-card-meta { font-size:15.36px; }
  #app .fc5[data-fc5-screen="discover"] :is(.fc5-rail,.creator-rail,.fc5-grid) { gap:16px 12px; }
  #app .fc5[data-fc5-screen="discover"] .discovery-tag-select { font-size:14.4px; min-height:52px; }
  #app .fc5[data-fc5-screen="discover"] .discovery-city-trigger { font-size:14.4px; min-width:68px; min-height:52px; padding:10px 12px; }
  #app .discovery-city-option { font-size:14.4px; min-height:48px; }
  #app .ux-v6-city-credit { font-size:12px; }

  /* The call page is a separate document, with no #app wrapper. */
  #call-main .fc-call { font-size:16px; line-height:1.5; }
  #call-main .fc-call h1 { font-size:28.8px; }
  #call-main .fc-call-eyebrow { font-size:12px; }
  #call-main .fc-call-footnote { font-size:12px; }
  #call-main .fc-call .fc-call-button { font-size:14.4px; min-height:48px; padding:12px 16px; }
  /* The user-selected image crop dialog is mounted directly on body, outside
     #app. Match that real boundary instead of relying on the page selector. */
  .media-dialog[open] { font-size:16px; line-height:1.5; }
  .media-dialog[open] :is(h2,.h2) { font-size:21.6px; line-height:1.25; }
  .media-dialog[open] :is(.small,.hint) { font-size:12px; line-height:1.45; }
  .media-dialog[open] .media-controls label { font-size:14.4px; line-height:1.4; }
  .media-dialog[open] :is(.btn,.btn-sm) { font-size:14.4px; line-height:1.35; min-height:48px; height:auto; padding:10px 14px; }
}