/* =====================================================================
   ShotGram v93 — sign-up / settings fixes. Loaded last.
   ===================================================================== */

/* ---- 1 · Birthday picker was squeezed into a third of the width -----
   An old v78 rule made .auth-birthday-field a 3-column grid, from when the
   three <select>s sat in it directly. Since v88 they live inside ONE card
   (.birthday-picker), so the whole card landed in column 1 — a third of the
   form — and DAY / YEAR shrank until "09" and "2004" were cut to "0!" "2(". */
.auth-birthday-field { display: block !important; }
.auth-birthday-field .birthday-picker { width: 100%; box-sizing: border-box; }
.birthday-selects { grid-template-columns: 1fr 1fr !important; }
.birthday-select { min-width: 0; }
.birthday-select select { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }

/* ---- 2 · App icon sheet could not scroll -----------------------------
   A "tall" sheet is a flex column. The icon list had overflow:hidden (for its
   rounded corners), which lets flexbox shrink it to whatever space is left —
   so the extra icons were clipped instead of scrollable. The list is now the
   scrolling part; the title and hint stay put. */
.sheet.tall .app-icon-list {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  align-content: start;
}
.sheet.tall .app-icon-hint,
.sheet.tall .app-icon-note { flex: none; }

/* ---- v95 · saved accounts on the login screen ------------------------ */
.auth-back-account {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; margin: 0 0 14px; border-radius: 16px; text-align: start;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: inherit;
}
.auth-back-arrow svg { width: 20px; height: 20px; }
[dir="rtl"] .auth-back-arrow svg, [dir="rtl"] .auth-saved-go svg { transform: scaleX(-1); }
.auth-saved-accounts { display: grid; gap: 8px; margin: 0 0 16px; }
.auth-saved-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #8a8fa3); }
.auth-saved-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
  border-radius: 16px; text-align: start; color: inherit;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
}
.auth-saved-row .grow { min-width: 0; }
.auth-saved-go svg { width: 18px; height: 18px; opacity: .6; }
.auth-saved-row.is-busy, .auth-back-account.is-busy { opacity: .6; pointer-events: none; }
.auth-saved-or { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12.5px; color: var(--muted, #8a8fa3); }
.auth-saved-or::before, .auth-saved-or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .1); }

/* ---- v99 · double-tap zoomed the page -----------------------------------
   Only buttons had touch-action set, so a double tap on a post, a photo or
   any text still zoomed (iPhone Safari especially, and some app builds).
   "manipulation" on the whole page switches off double-tap zoom ONLY:
   scrolling, swiping and two-finger pinch (accessibility) all still work,
   and the app's own double-tap-to-like keeps working. */
html, body { touch-action: manipulation; }