/* =====================================================================================================================
   Gringotts mobile layer, shared by every portal.

   Phones and small tablets only (everything below is inside a max-width media query, or a touch-only one), so the desktop
   layout is exactly what it was. It is loaded LAST on each page and only refines what the portal's own stylesheet does:
   a compact app bar, a language button that no longer sits on top of content, readable form fields (16px stops iOS from
   zooming the page when a field is tapped), finger-sized buttons, toasts that do not hide the page, and sheets for dialogs.
   Portal-specific rules live next to it: onboarding-mobile.css, rm/rm-mobile.css, backoffice/backoffice-mobile.css,
   customer/customer-mobile.css.
   ===================================================================================================================== */

:root { --gb-bar-h: 52px; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 768px) {
  /* Media never pushes the page wider than the screen */
  img, video, canvas { max-width: 100%; }

  /* The language button: compact, in the top corner, clear of the app bar content (it can still be dragged) */
  .gringotts-language-switcher { inset-block-start: 8px; inset-inline-end: 8px; }
  .gringotts-language-switcher button { min-height: 36px; padding: 5px 11px; font-size: 12px; }
  .gringotts-language-switcher .gringotts-language-menu-trigger { min-width: 0; }
  /* while a navigation drawer is open the language button would sit on top of it */
  body:has(.portal-sidebar.drawer-open) .gringotts-language-switcher { visibility: hidden; }
  .gringotts-language-menu { max-height: 70vh; overflow-y: auto; }

  /* Toasts span the width, sit under the bar and are smaller, so they do not hide what the person is working on */
  #toastContainer { top: calc(var(--gb-bar-h) + 8px); right: 8px; left: 8px; width: auto; max-width: none; }
  #toastContainer .toast { padding: 10px 14px; }
  @keyframes toastIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

  /* "Progress saved": a small chip under the bar instead of a box over the buttons at the bottom */
  .autosave { bottom: auto; right: 10px; top: calc(var(--gb-bar-h) + 8px); padding: 6px 12px; font-size: 12px; transform: translateY(-8px); }
  .autosave.visible { transform: none; }
}

/* 16px fields on small screens and on every touch screen (iPads and phones held sideways included): below that, iOS Safari zooms
   the page in on focus and leaves it zoomed */
@media (max-width: 768px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]):not(.otp-row input):not(.otp-input),
  select, textarea { font-size: 16px !important; }
}

/* Touch screens: fingertips need 40px+ */
@media (max-width: 768px) and (pointer: coarse) {
  button, [role="button"], .btn, a.btn, summary { min-height: 40px; }
  .toast-close, .modal-close, .close-btn, [class*="close"][class*="btn"] { min-width: 40px; min-height: 40px; }
  select, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not(.otp-row input) { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { min-width: 22px; min-height: 22px; }
}