/* UGO | MARKET — the four account screens are mobile-only: sign in, sign up, forgot password and reset password (market/login.html, signup.html,
 * forgot-password.html, reset-password.html link this file; the rules that do it are in tools/ugo-cm-brand.js).
 *
 * "Mobile only" means one layout: a phone-sized column. On a phone it is the whole screen; on anything wider the same column is centred on
 * a plain backdrop instead of the form stretching edge to edge. The page behind the column is <html>, the column is <body>, so the themes
 * (css/theme-overrides.css paints body / header / main) keep working untouched.
 *
 * Also fixed here, all measured on the old page at a 453px-wide phone:
 *   - the page was 544px wide in a 453px window (a decorative glow stuck out past the right edge): sideways scrolling
 *   - the body was forced to be at least 884px tall (a short phone had to scroll for nothing)
 *   - the fixed header (44px + the notch) sat on top of the content on a notched phone, because the content only left 64px
 *   - Back, Close, Forgot password, the Remember toggle, Quick Auth and Create an Account were 16-32px high; a thumb needs 44px
 *   - 100vh is taller than the visible area on a phone with a moving address bar: dvh follows what is really visible
 * Specificity: Tailwind's utilities (loaded after this file) are single classes, so these rules use `html body` and, where a utility sets the
 * same property, !important.
 */
:root { --ugo-col: 480px; }                        /* wider than any phone in portrait, so a phone is never letter-boxed */

/* the screen around the column (only visible on a window wider than the column) */
html {
  background-color: #0d0b09;
  color-scheme: dark;                               /* native controls, autofill and scrollbars match the dark page */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;     /* a phone turned sideways does not inflate the text */
  scroll-padding-top: calc(60px + env(safe-area-inset-top, 0px));   /* a focused field is not left under the fixed header */
}
html.theme-daylight { background-color: #e7ddd6 !important; color-scheme: light; }      /* css/theme-overrides.css paints <html> with !important; this file loads after it */
html.theme-oled { background-color: #000; }

/* the column */
html body {
  max-width: var(--ugo-col) !important;
  margin-inline: auto !important;
  min-height: 100vh !important;
  overflow-x: clip;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 0 90px rgba(0, 0, 0, .6);
}
html.theme-daylight body { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 0 60px rgba(60, 40, 30, .18); }
@supports (min-height: 100dvh) { html body, html body > main { min-height: 100dvh !important; } }

/* the fixed header is as wide as the column, not the window */
html body > header {
  left: 0; right: 0; margin-inline: auto; width: 100%; max-width: var(--ugo-col);
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
}

/* the content starts below the header and the notch, and leaves room at the bottom for the floating button */
html body > main {
  min-height: 100vh;
  padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  overflow-x: clip;                                  /* the decorative glows may bleed, they may not widen the page */
}

/* thumb-sized controls: 44px high, without moving anything else on the page */
html body > header :is(a, button)[aria-label="Go Back"],
html body > header button[aria-label="Close"] { width: 44px; height: 44px; }
html body > header :is(a, button)[aria-label="Go Back"] { margin-left: -12px; }
html body > header button[aria-label="Close"] { margin-right: -8px; }
#forgot-pwd-trigger { display: inline-flex; align-items: center; min-height: 44px; margin-block: -14px; padding-inline: 8px; margin-right: -8px; font-size: .875rem; }
html body main label.select-none { min-height: 44px; }
#biometric-quick-btn { min-height: 44px; padding-inline: 16px; }
html body main a[href="signup.html"] { display: inline-flex; align-items: center; min-height: 44px; }
/* sign up: the show / hide password eye, and the two mobile-money buttons */
html body main #toggle-pwd-btn { min-width: 44px; min-height: 44px; right: 4px !important; }
html body main button[onclick^="quickMoMoConnect"] { min-height: 44px; }
/* forgot password: the "Return to login" link. Sign up: the "Sign in" link at the end of a sentence (an inline link: its tap area grows up and
   down without moving the lines of text) */
html body main a.flex[href="login.html"] { min-height: 44px; }
html body main a[href="login.html"]:not(.flex) { padding-block: 14px; }

/* the one-time-code window of sign up is as wide as the column too, not the whole window */
html body #otp-modal { margin-inline: auto; max-width: var(--ugo-col); }

/* SIGN IN ONLY, short screens (a phone with its address bar showing is often 560-700px high): the brand block gives way so the form and Sign In
   come up the screen. Measured at 375x667: Sign In went from 680px down (below the fold) to the visible part of the page. Scoped to the sign-in
   form: on the other pages the line under the title is the instruction and must stay. */
@media (max-height: 740px) {
  html body main:has(#vault-login-form) .w-20.h-20 { width: 3.5rem !important; height: 3.5rem !important; }            /* the logo disc */
  html body main:has(#vault-login-form) [class*="tracking-[0.25em]"] { display: none; }                                  /* "Verified escrow & auctions" tagline */
  html body main:has(#vault-login-form) div:has(> [class*="w-2.5"][class*="animate-ping"]) { display: none; }          /* the live-ticker strip */
}
@media (max-height: 640px) {
  html body main:has(#vault-login-form) h1 + p { display: none; }                                                        /* the line under "Welcome back" */
}

/* the "256-bit escrow vault" badge keeps its looks; its tap area grows to about 45px high */
html body main a[href="settings.html"].inline-flex { position: relative; }
html body main a[href="settings.html"].inline-flex::after { content: ""; position: absolute; inset: -10px -6px; }

/* a tap is a tap: no double-tap-to-zoom delay on controls (pinch zoom still works) */
html body :is(a, button, input, label, select, textarea) { touch-action: manipulation; }

/* the pulsing dots and rings are decoration */
@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after { animation: none !important; transition-duration: .01ms !important; }
}