/* Parcel — Sign in (#/signin, js/views/signin.js). A bare page (html.is-bare: no nav bar, tab bar or sidebar), everything scoped
   under .view-signin .si-… (the passkey sheet, which lives outside the page, under .si-sheet). One centred column, the Parcel
   mark, a title, one primary button per stage, and a quiet link at the foot. Light and dark from tokens only. */

.view-signin .si {
  display: flex; flex-direction: column; align-items: center;
  min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - var(--sp-8));
  padding: max(40px, 9vh) 0 0;
}
.view-signin .si-main {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 380px; margin: auto 0;
  text-align: center;
}
.view-signin .si-mark {
  width: 84px; height: 84px; flex: none;
  border-radius: 22.5%;
  overflow: hidden;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 10px 28px -10px rgba(10, 91, 224, .55);
}
.view-signin .si-mark img { display: block; width: 100%; height: 100%; }
.view-signin .si-title {
  margin-top: 22px;
  font-size: var(--fs-title1); line-height: var(--lh-title1); letter-spacing: var(--ls-title1);
  font-weight: var(--w-bold);
  text-wrap: balance;
}
.view-signin .si-sub {
  margin-top: 8px; max-width: 34ch;
  font-size: var(--fs-callout); line-height: var(--lh-callout); letter-spacing: var(--ls-callout);
  color: var(--label-2);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.view-signin .si-email { color: var(--label); font-weight: var(--w-semibold); }
@media (min-width: 768px) {
  .view-signin .si-title { font-size: var(--fs-large); line-height: var(--lh-large); letter-spacing: var(--ls-large); }
}

/* A failed sign-in link, said once above the form. */
.view-signin .si-notice {
  margin-top: 20px; width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  color: var(--orange-text);
  font-size: var(--fs-subhead); line-height: var(--lh-subhead);
  text-align: left; text-wrap: pretty;
}

.view-signin .si-stage { width: 100%; margin-top: 32px; }
.view-signin .si-step { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.view-signin .si-step .field-label { font-size: var(--fs-footnote); }
.view-signin .si-step .field-control { min-height: 50px; background: var(--bg-2); }
.view-signin .si-step .field-input { height: 50px; }
.view-signin .si-step .field.has-error .field-control { box-shadow: 0 0 0 1.5px var(--red); }
.view-signin .si-msg {
  min-height: 0;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote);
  color: var(--label-2);
  text-align: center; text-wrap: pretty;
}
.view-signin .si-msg:empty { display: none; }
.view-signin .si-msg.is-error { color: var(--red-text); }

/* The 6-digit code: one field (so one-time-code autofill fills it), digits spaced like separate boxes. */
.view-signin .si-code-wrap { display: flex; justify-content: center; }
.view-signin .si-code {
  width: 100%; height: 64px;
  padding: 0 0 0 .55em;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  color: var(--label);
  font-family: var(--font-rounded); font-size: 32px; font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: .55em;
  text-align: center;
  caret-color: var(--accent);
  transition: box-shadow 150ms linear;
}
.view-signin .si-code::placeholder { color: var(--label-4); }
.view-signin .si-code:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.view-signin .si-code.has-error { box-shadow: 0 0 0 1.5px var(--red); }

/* Secondary actions: text links, each with a 44pt target. */
.view-signin .si-links {
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: 20px; row-gap: 2px;
  margin-top: 4px;
}
.view-signin .si-link {
  min-height: var(--hit); padding: 0 4px;
  color: var(--accent-text);
  font-size: var(--fs-subhead); line-height: var(--lh-subhead);
  border-radius: var(--r-sm);
}
.view-signin .si-link:disabled { color: var(--label-2); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .view-signin .si-link:not(:disabled):hover, .view-signin .si-quiet:hover { text-decoration: underline; text-underline-offset: 2px; }
}

.view-signin .si-foot { display: flex; justify-content: center; padding: 32px 0 8px; }
.view-signin .si-quiet {
  min-height: var(--hit); padding: 0 8px;
  color: var(--label-2);
  font-size: var(--fs-subhead); line-height: var(--lh-subhead);
  border-radius: var(--r-sm);
}
.view-signin .si-quiet[hidden] { display: none; }

/* A stage arriving: a short rise and fade (none under reduced motion: js/views/signin.js doesn't add the class). */
@keyframes si-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.view-signin .si-enter { animation: si-enter var(--dur) var(--ease) both; }

/* ---------------------------------------------------------------- "Use Face ID next time?" (a sheet, outside the page) */
.si-sheet .si-offer {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 4px 4px;
  text-align: center;
}
.si-sheet .si-offer-glyph {
  display: grid; place-items: center;
  width: 76px; height: 76px; margin-bottom: 18px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(155deg, color-mix(in oklab, var(--green) 62%, #fff), var(--green) 58%, color-mix(in oklab, var(--green) 80%, #000));
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--green) 70%, transparent);
}
.si-sheet .si-offer-title {
  font-size: var(--fs-title2, 22px); line-height: 28px; font-weight: var(--w-bold); letter-spacing: -0.3px;
  text-wrap: balance;
}
.si-sheet .si-offer-text {
  margin-top: 8px; max-width: 36ch;
  font-size: var(--fs-callout); line-height: var(--lh-callout);
  color: var(--label-2);
  text-wrap: pretty;
}
.si-sheet .si-offer-actions { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 360px; margin-top: 28px; }

@media (forced-colors: active) {
  .view-signin .si-code, .view-signin .si-notice { border: 1px solid CanvasText; }
}