/* Pear web app: the login page. Loaded after app.css (the foundations). */

/* ======================================================================
 * Login
 * ==================================================================== */
.auth { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); min-height: 100svh; }

/* ---------- Left: the brand ----------
 * The group portrait fills the panel at full opacity, in its own colours (graded to the brand forest
 * in the file itself, grade "L5": the sky is a muted forest-teal; no mask, no blur, no green wash)
 * and in its ORIGINAL framing: object-fit: cover, nothing added above it and nothing cut from it but
 * what cover crops. The picture is shifted up as far as the frame allows while the raised heart-hands
 * keep --room of sky above them, so the people sit as high as they can and the lower part is free for
 * the copy: the one-line slogan and the lede, left-aligned at the bottom left over a soft deep-forest
 * veil that is clear again well below the faces and hands. The same (lighter) grain as everywhere else
 * lies over it all. While the photo loads, and around it, the panel is the forest diffuse (the
 * landing's dark field: forest, luminous teal blooms, a deep shade toward a corner). The panel is as
 * tall as the window and stays put while a taller form scrolls, so the framing never changes. */
.auth__brand {
  position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; height: 100svh; padding: var(--brand-header-top) var(--brand-gutter) clamp(24px, 3.8vh, 44px);
  overflow: hidden; isolation: isolate; color: var(--pearl);
  background-color: var(--forest);
  background-image:
    radial-gradient(62% 56% at 90% 4%, var(--forest-bloom-teal), transparent 70%),
    radial-gradient(64% 60% at 2% 98%, var(--forest-bloom-teal), transparent 72%),
    radial-gradient(52% 46% at 48% 42%, var(--forest-bloom-sage), transparent 72%),
    radial-gradient(72% 62% at 100% 100%, var(--forest-shade), transparent 70%),
    radial-gradient(56% 46% at 0% 0%, rgba(9, 26, 20, 0.3), transparent 70%);
}
.auth__brand::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grain, url("../../assets/texture/grain.png")) 0 0 / 128px 128px; }
.auth__brand .brand { align-self: flex-start; padding: 6px 10px; margin-left: -10px; border-radius: 12px; }
.auth__hero { display: flex; flex-direction: column; align-items: flex-start; margin-top: auto; padding-top: 28px; text-align: left; }
/* One line. The ≠ is drawn in the type's own proportions (em units: it scales with the slogan) */
/* The login belongs to the product: keep the approved one-line composition,
 * with the same quiet 500-weight sans as the form, rather than landing display type. */
.auth__title { display: block; white-space: nowrap; font: 500 clamp(36px, min(3.6vw, 7vh), 56px)/1.08 var(--font-sans); letter-spacing: -0.02em; color: var(--cream); }
html:lang(zh) .auth__title { font-size: clamp(28px, min(2.6vw, 5.4vh), 40px); line-height: 1.2; }
.auth__row { display: inline-block; }
.auth__ne { display: inline-block; width: 0.7em; height: auto; margin: 0 0.3em; vertical-align: -0.02em; color: var(--cream); overflow: hidden; stroke-width: 12; }
html:lang(zh) .auth__ne { width: 0.78em; margin: 0 0.32em; vertical-align: 0.06em; }
.auth__lede { max-width: 30em; margin-top: 12px; font: 500 15px/22px var(--font-sans); color: var(--pearl); text-wrap: balance; }
html:lang(zh) .auth__lede { max-width: 16em; line-height: 1.75; }
.auth__photo { --room: 48px; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; container-type: size; }
.auth__photo picture { position: absolute; inset: 0; display: block; max-width: none; }
/* The picture is 1086 × 1448 and the raised hands start 245px down (22.56% of its width once it
 * is scaled to the panel's width). Cover scales it to the panel's width, which leaves
 * (1.3333 × width − height) of it to crop: all of that is taken from the sky above, but never
 * more than lets the hands keep --room (the rest then comes off the bottom). The first
 * declaration is the fallback for browsers without container units. */
.auth__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  object-position: 88% 100%;
  object-position: 88% calc(-1 * min(max(133.333cqw - 100cqh, 0px), max(22.56cqw - var(--room), 0px)));
  transition: opacity 1600ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.auth__photo.is-in img { opacity: 1; }
/* The soft deep-forest veil: where the copy sits, clear above it */
.auth__photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 420px 190px at 0 0, rgba(9, 26, 20, 0.34), rgba(9, 26, 20, 0)), /* a breath of shade behind the wordmark */
    linear-gradient(0deg, rgba(10, 29, 22, 0.56) 0%, rgba(10, 29, 22, 0.52) 10%, rgba(10, 29, 22, 0.40) 18%, rgba(10, 29, 22, 0.20) 25%, rgba(10, 29, 22, 0.06) 32%, rgba(10, 29, 22, 0) 41%);
}
@media (forced-colors: active) { .auth__photo, .auth__brand::after { display: none; } }
/* The landing hero's entrance: the words fade in, the ≠ wipes in from the left */
.auth__row, .auth__lede { animation: auth-in 700ms cubic-bezier(0.215, 0.61, 0.355, 1) both; }
.auth__title .auth__row:last-child { animation-delay: 90ms; }
.auth__lede { animation-delay: 180ms; }
.auth__ne { animation: auth-wipe 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 320ms both; }
@keyframes auth-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes auth-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Right: the form (the app's page light; product type: title 28 / 500, text 15 / 400) ---------- */
.auth__panel { position: relative; display: flex; flex-direction: column; min-height: 100svh; padding: 24px clamp(20px, 4vw, 56px) 24px; }
.auth__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.auth__center { display: grid; align-content: center; flex: 1; padding: 36px 0; }
.auth__form { display: grid; gap: 18px; width: 100%; max-width: 400px; margin: 0 auto; }
.auth__h { font: 500 28px/1.25 var(--font-sans); letter-spacing: -0.015em; color: var(--text); }
html:lang(zh) .auth__h { font-size: 26px; line-height: 1.35; letter-spacing: 0.01em; }
.auth__sub { margin-top: -6px; font-size: 15px; line-height: 22px; color: var(--text-2); }
html:lang(zh) .auth__sub { line-height: 26px; }

/* ---------- Jelly glass: every button on this page ----------
 * Transparent, thick and glossy, with no outline line: a gloss on the top edge,
 * a soft inner shade at the bottom, a short drop shadow. Hover brightens the
 * body; press scales to .98; the focus ring stays. The .btn family (primary,
 * secondary) is jelly in app.css; the button-like elements that are not .btn
 * (providers, back, the email chip's Change, the language pill, the password
 * eye) take the same tokens here. */
.provider, .auth__back, .email-chip button, .auth .pw .icon-btn, .auth__bar .seg [aria-pressed="true"] {
  border: 0; background-color: var(--jelly-bg); background-image: var(--jelly-gloss);
  -webkit-backdrop-filter: var(--jelly-blur); backdrop-filter: var(--jelly-blur);
  box-shadow: var(--jelly-shadow);
}
.provider:hover, .auth__back:hover, .email-chip button:hover, .auth .pw .icon-btn:hover { background-color: var(--jelly-bg-hover); }
.provider:active, .auth__back:active, .email-chip button:active, .auth .pw .icon-btn:active { transform: scale(0.98); }

.providers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.provider {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 18px; border-radius: var(--r-pill);
  color: var(--text); font: 500 15px/20px var(--font-sans); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1) var(--ease-out), opacity var(--dur-1);
}
.provider .ico, .provider svg { width: 20px; height: 20px; flex: none; }
.provider.is-busy svg { opacity: 0; }
.provider[aria-disabled="true"]:not(.is-busy) { opacity: 0.55; pointer-events: none; }
.provider__last { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 3px 10px; border-radius: 99px; background: var(--tint); color: var(--accent-ink); font: 500 12px/16px var(--font-sans); }
.provider.is-busy .provider__last { opacity: 0; }
/* on a narrow phone the chip joins the label instead of floating over it */
@media (max-width: 400px) { .provider__last { position: static; transform: none; margin-left: 2px; } }
.or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; font-size: 13px; line-height: 20px; color: var(--text-3); }
.or::before, .or::after { content: ""; height: 1px; background: var(--hair-2); }
.auth__note { font-size: 13px; line-height: 20px; color: var(--text-2); }
html:lang(zh) .auth__note { line-height: 22px; }
.auth__links { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; font-size: 14px; }
.auth__forgot { min-height: 28px; padding: 3px 12px; font-size: 12px; }
.auth__legal { font-size: 12px; line-height: 18px; color: var(--text-3); }
html:lang(zh) .auth__legal { line-height: 20px; }
.auth__legal .link { color: var(--text-2); font-weight: 400; }
.auth__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: 12px; color: var(--text-3); }
.auth__foot a, .auth__foot button { min-height: 32px; padding: 4px 0; border: 0; background: none; color: var(--text-3); text-decoration: none; font: inherit; cursor: pointer; }
.auth__foot a:hover, .auth__foot button:hover { color: var(--text-2); text-decoration: underline; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Back to home: a compact jelly pill (44px hit area on touch screens) */
.auth__back {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 16px 6px 12px; border-radius: var(--r-pill);
  color: var(--text); text-decoration: none; font: 500 14px/20px var(--font-sans);
  transition: background-color var(--dur-1), transform var(--dur-1) var(--ease-out);
}
.auth__back .ico { width: 16px; height: 16px; }
@media (pointer: coarse) { .auth__back::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 100%; min-height: 44px; transform: translateY(-50%); } }
/* Language: a quiet track with the chosen language as a jelly pill */
.auth__bar .seg { background: var(--none-bg); box-shadow: none; padding: 3px; }
.auth__bar .seg button { color: var(--text-2); }
.auth__bar .seg [aria-pressed="true"] { background-image: var(--jelly-gloss), linear-gradient(var(--jelly-tint), var(--jelly-tint)); color: var(--jelly-ink); font-weight: 500; }

/* Fields stay flat, square-ish and outlined (never mistaken for a pill button), at the buttons' 44px */
.auth .input { min-height: 44px; border-radius: 12px; box-shadow: inset 0 1px 2px rgba(13, 31, 25, 0.06); }
.auth .input:focus { box-shadow: inset 0 1px 2px rgba(13, 31, 25, 0.06), 0 0 0 3px rgba(79, 165, 154, 0.22); }
.auth .input[aria-invalid="true"] { box-shadow: inset 0 1px 2px rgba(13, 31, 25, 0.06), 0 0 0 3px rgba(224, 138, 98, 0.2); }
.auth .pw .input { padding-right: 52px; }
.auth .pw .icon-btn { top: 6px; right: 6px; width: 32px; height: 32px; }

.email-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 4px 4px 14px; border-radius: 99px; background: var(--none-bg); font-size: 14px; color: var(--text); justify-self: start; }
.email-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-chip button { position: relative; flex: none; min-height: 32px; padding: 2px 14px; border-radius: 99px; color: var(--text); font: 500 13px/1 var(--font-sans); transition: background-color var(--dur-1), transform var(--dur-1) var(--ease-out); }
/* 44px hit areas on touch screens for the small controls */
@media (pointer: coarse) {
  .email-chip button::before { content: ""; position: absolute; inset: -6px -4px; }
  .auth__bar .seg button { position: relative; }
  .auth__bar .seg button::before { content: ""; position: absolute; inset: -9px -3px; }
  .auth__foot a, .auth__foot button { min-height: 44px; }
}
/* Six code cells over one real input, so paste and one-time-code autofill work */
.otp { position: relative; }
.otp__input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; opacity: 0.01; }
.otp__cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 14px repeat(3, minmax(0, 1fr)); gap: 8px; }
.otp__gap { align-self: center; justify-self: center; width: 10px; height: 2px; border-radius: 2px; background: var(--hair-2); }
.otp__cell {
  display: grid; place-items: center; height: 62px; border-radius: 16px; border: 1px solid var(--field-line); background: var(--field);
  font: 400 28px/1 var(--font-num); letter-spacing: -0.02em; color: var(--text); transition: border-color var(--dur-1), box-shadow var(--dur-1), background-color var(--dur-1);
}
.otp.is-focus .otp__cell.is-cur { border-color: var(--accent-ink); box-shadow: 0 0 0 3px rgba(79, 165, 154, 0.22); }
.otp.is-focus .otp__cell.is-cur:empty::after { content: ""; width: 2px; height: 26px; background: var(--accent-ink); animation: caret 1s steps(1) infinite; }
.otp.is-error .otp__cell { border-color: var(--rev); }
.otp.is-ok .otp__cell { border-color: var(--teal-2); background: var(--ok-bg); }
@keyframes caret { 50% { opacity: 0; } }
.resend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--text-2); }
.help { padding: 14px 16px; border-radius: 16px; background: var(--card-2); font-size: 13px; line-height: 20px; color: var(--text-2); }
html:lang(zh) .help { line-height: 22px; }
.help b { color: var(--text); font-weight: 500; }
.help .btn { margin-top: 10px; }
.auth__step { display: grid; gap: 18px; animation: auth-step-in var(--dur-2) var(--ease-out); }
@keyframes auth-step-in { from { opacity: 0; transform: translateY(6px); } }
.auth__done { display: grid; justify-items: center; gap: 14px; text-align: center; }
.auth__done .bubble { width: 64px; height: 64px; background: var(--ok-bg); color: var(--ok); }
.auth__done .bubble .ico { width: 30px; height: 30px; stroke-width: 2.2; }

/* ---------- Stacked: the brand is a band on top ----------
 * Same picture, same framing. The band is as tall as the part of the picture from the raised
 * hands down to the faces (0.64 × the picture's width, plus --room of sky) and the copy under it:
 * every lit face is whole, the slogan starts just under the lowest cheek and the lede follows.
 * Past 520px the picture stops growing (it sits at the right and melts into the forest at its
 * left edge) so the band does not get taller than it needs. */
@media (max-width: 960px) {
  .auth { grid-template-columns: 1fr; }
  .auth__brand, .auth__photo { --room: 28px; }
  .auth__brand { --gap: -12px; position: relative; align-self: auto; height: auto; padding: calc(min(64%, 333px) + var(--room) + var(--gap)) 20px 16px; }
  .auth__brand .brand { position: absolute; top: 8px; left: calc(var(--brand-gutter) - 10px); margin: 0; }
  .auth__hero, html:lang(zh) .auth__hero { padding-top: 0; }
  .auth__photo img { object-position: 88% 36%; object-position: 88% calc(-1 * min(max(133.333cqw - 100cqh, 0px), max(22.56cqw - var(--room), 0px))); }
  .auth__title { font-size: clamp(26px, 7.6vw, 44px); line-height: 1.02; }
  html:lang(zh) .auth__title { font-size: clamp(26px, 7vw, 36px); line-height: 1.2; }
  .auth__lede { margin-top: 8px; line-height: 1.45; }
  html:lang(zh) .auth__lede { line-height: 1.75; }
  .auth__photo::after {
    background:
      radial-gradient(ellipse 260px 110px at 0 0, rgba(9, 26, 20, 0.44), rgba(9, 26, 20, 0)),
      linear-gradient(0deg, rgba(10, 29, 22, 0.8) 0, rgba(10, 29, 22, 0.78) 40px, rgba(10, 29, 22, 0.7) 74px, rgba(10, 29, 22, 0.48) 100px, rgba(10, 29, 22, 0.24) 124px, rgba(10, 29, 22, 0.08) 146px, rgba(10, 29, 22, 0) 164px);
  }
  .auth__panel { min-height: 0; padding: 8px 20px 24px; }
  .auth__center { align-content: start; padding: 16px 0 28px; }
}
@media (min-width: 521px) and (max-width: 960px) {
  .auth__photo { left: auto; width: min(100%, 520px); }
  .auth__photo::before { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: 120px; background: linear-gradient(90deg, var(--forest), rgba(23, 60, 50, 0)); }
  .auth__photo::after { background: linear-gradient(0deg, rgba(10, 29, 22, 0.8) 0, rgba(10, 29, 22, 0.78) 40px, rgba(10, 29, 22, 0.7) 74px, rgba(10, 29, 22, 0.48) 100px, rgba(10, 29, 22, 0.24) 124px, rgba(10, 29, 22, 0.08) 146px, rgba(10, 29, 22, 0) 164px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; }
}