/* The login page in the App Store shell, black and gold like welcome.html and the
   join flow. Scoped to html.native (native-flag.js), so the web page is untouched;
   the sign-in logic in login.html is unchanged. */

html.native { --nl-gold: #e3b23c; --nl-gold-hi: #f8dc8e; --nl-line: rgba(255, 255, 255, .09); --nl-ease: cubic-bezier(.22, 1, .36, 1); }
html.native body { background: #000; font-family: "Inter", -apple-system, system-ui, sans-serif; transition: opacity .3s ease; }
html.native .auth { display: block; min-height: 100dvh; }
html.native .visual { display: none; }
html.native .panel {
  min-height: 100dvh; display: flex; align-items: stretch; justify-content: flex-start;
  padding: calc(34px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
  background: radial-gradient(80% 38% at 50% 8%, rgba(227, 178, 60, .13), transparent 70%), #000;
}
html.native .panel { flex-direction: column; }
html.native .form { width: 100%; max-width: none; flex: 1; display: flex; flex-direction: column; }
html.native .form[hidden] { display: none; }

/* The logo blooms in at the top, the same mark the launch ends on. */
html.native .m-brand { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0 0 30px; }
html.native .m-brand img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px rgba(0, 0, 0, .5)); }
html.native .m-brand .mb { display: none; }

html.native .form-top { margin-bottom: 26px; text-align: center; }
html.native .form-top::before { content: "SIGN IN"; display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .22em; color: var(--nl-gold); }
html.native #recoveryForm .form-top::before { content: "NEW PASSWORD"; }
html.native .form h1 { font-family: inherit; font-weight: 900; font-size: 34px; line-height: 1.04; letter-spacing: -.03em; margin-bottom: 8px; }
html.native .form .sub { color: #8d909a; font-size: 15.5px; }

html.native .yic-field { margin-bottom: 14px; }
html.native .yic-field__label { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: #8d909a; margin-bottom: 8px; }
html.native .yic-input { height: 60px; padding: 0 16px; border-radius: 16px; border: 1px solid var(--nl-line); background: rgba(255, 255, 255, .045); font-family: inherit; font-size: 18px; font-weight: 600; transition: border-color .25s, box-shadow .25s, background .25s; }
html.native .yic-input::placeholder { color: #6e717a; font-weight: 500; }
html.native .yic-input:focus { border-color: rgba(227, 178, 60, .7); background: rgba(227, 178, 60, .05); box-shadow: 0 0 0 4px rgba(227, 178, 60, .12), 0 0 28px -8px rgba(227, 178, 60, .6); }
html.native .yic-field__action { min-height: 44px; color: var(--nl-gold); right: 4px; }

html.native .row { margin: 2px 0 22px; }
html.native .row.yic-forgot { display: flex; justify-content: center; margin: 14px 0 0; }
html.native .forgot { min-height: 44px; display: inline-flex; align-items: center; color: var(--nl-gold); }

/* The gold button, the same one as Get started. */
html.native .yic-btn--pill {
  position: relative; isolation: isolate; height: 58px; padding: 0; border-radius: 19px; overflow: visible;
  background: linear-gradient(180deg, #f9dc8c 0%, #e8b944 46%, #c18a14 100%); color: #1b1303;
  font-family: inherit; font-weight: 800; font-size: 17px; letter-spacing: -.01em;
  box-shadow: inset 0 1px 0 rgba(255, 248, 220, .85), inset 0 -2px 0 rgba(120, 78, 6, .45);
}
html.native .yic-btn--pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .7) 49%, transparent 60%); background-size: 260% 100%; background-position: 120% 0; mix-blend-mode: soft-light; animation: nl-sweep 4.2s ease-in-out infinite 1s; pointer-events: none; }
html.native .yic-btn--pill:hover { transform: none; }
html.native .yic-btn--pill:active { transform: scale(.975); }
html.native .yic-btn--pill[disabled] { opacity: .7; }
@keyframes nl-sweep { 0%, 55% { background-position: 120% 0; } 100% { background-position: -40% 0; } }

/* Face ID (native-login.js) sits above the fields as the first choice. */
html.native .yic-faceid { height: 58px; margin: 0 0 22px; border-radius: 19px; border: 1px solid rgba(227, 178, 60, .45); background: linear-gradient(180deg, rgba(227, 178, 60, .12), rgba(227, 178, 60, .03)); color: var(--nl-gold-hi); font-family: inherit; font-weight: 800; font-size: 17px; }
html.native .yic-faceid svg { color: var(--nl-gold-hi); }

html.native .yic-notice { border-radius: 14px; }
html.native .yic-notice { border-radius: 14px; }
html.native .signup { margin-top: auto; padding-top: 26px; color: #8d909a; font-size: 15px; }
html.native .signup a { color: var(--nl-gold); }

@media (max-height: 700px) {
  html.native .m-brand { margin-bottom: 18px; }
  html.native .m-brand img { width: 74px; height: 74px; }
  html.native .form h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html.native .yic-btn--pill::after { animation: none; }
}

/* ---- the button turns into a spinner while it signs in, then a check ---- */
html.native .yic-btn--pill { display: flex; width: 100%; margin-left: auto; margin-right: auto; transition: width .45s var(--nl-ease), border-radius .45s var(--nl-ease), transform .15s ease, opacity .3s; }
html.native .yic-btn--pill.busy { width: 58px; border-radius: 50%; font-size: 0; color: transparent; }
html.native .yic-btn--pill[disabled].busy { opacity: 1; }
html.native .yic-btn--pill.busy::after { display: none; }
html.native .yic-btn--pill.busy::before { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2.5px solid rgba(27, 19, 3, .25); border-top-color: #1b1303; animation: nl-spin .7s linear infinite; }
html.native .yic-btn--pill.busy.done::before { animation: nl-tick .35s var(--nl-ease) both; width: 11px; height: 20px; margin: -13px 0 0 -5px; border: solid #1b1303; border-width: 0 3px 3px 0; border-radius: 1px; transform: rotate(45deg); }
@keyframes nl-spin { to { transform: rotate(360deg); } }
@keyframes nl-tick { from { opacity: 0; transform: rotate(45deg) scale(.4); } to { opacity: 1; transform: rotate(45deg) scale(1); } }

/* ---- motion: the form rises in one piece at a time ---- */
html.native #loginForm > .m-brand { animation: yic-fade-up .7s var(--nl-ease) backwards; }
html.native #loginForm .form-top::before { animation: yic-label .8s var(--nl-ease) .05s backwards; }
html.native #loginForm .form-top .sub { animation: yic-fade-up .8s var(--nl-ease) .45s backwards; }
html.native #loginForm > .yic-field:nth-of-type(1) { animation: yic-fade-up .7s var(--nl-ease) .55s backwards; }
html.native #loginForm > .yic-field:nth-of-type(2) { animation: yic-fade-up .7s var(--nl-ease) .67s backwards; }
html.native #loginForm > .yic-btn--pill { animation: yic-fade-up .7s var(--nl-ease) .8s backwards; }
html.native #loginForm > .row.yic-forgot { animation: yic-fade-up .7s var(--nl-ease) .95s backwards; }
html.native #loginForm > .signup { animation: yic-fade-up .7s var(--nl-ease) 1.05s backwards; }
html.native .yic-btn--pill.busy { animation: none; }

/* ---- a faint dark halo behind elements and text, so they stand clear of the moving market ---- */
html.native { --halo: 0 0 12px 1px rgba(0, 0, 0, .55), 0 0 34px 8px rgba(0, 0, 0, .5); --halo-text: 0 0 8px rgba(0, 0, 0, .7), 0 0 22px rgba(0, 0, 0, .55); --halo-thin: 0 0 5px #000, 0 0 10px rgba(0, 0, 0, .95), 0 0 18px rgba(0, 0, 0, .9), 0 0 30px rgba(0, 0, 0, .8), 0 0 46px rgba(0, 0, 0, .6); }
html.native .yic-input { box-shadow: var(--halo); }
html.native .yic-input:focus { box-shadow: 0 0 0 4px rgba(227, 178, 60, .12), var(--halo); }
html.native .yic-btn--pill { box-shadow: var(--halo), inset 0 1px 0 rgba(255, 248, 220, .85), inset 0 -2px 0 rgba(120, 78, 6, .45); }
html.native .yic-faceid { box-shadow: var(--halo); }
html.native .form h1 { text-shadow: var(--halo-text); }
html.native .form-top::before,
html.native .form .sub,
html.native .yic-field__label,
html.native .forgot,
html.native .signup,
html.native .yic-field__action,
html.native .yic-notice { text-shadow: var(--halo-thin); }