/* Asset4040 sign-in page. */

.signin {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: radial-gradient(70% 55% at 50% 45%, rgb(245 118 42 / .05), transparent 70%), var(--ink-0);
  overflow-x: hidden;
}
.lg-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .75; }
.signin::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(42% 52% at 50% 50%, rgb(9 9 10 / .7), transparent 100%); }

.lg-header, .lg-main, .lg-foot { position: relative; z-index: 1; }
.lg-header { display: flex; align-items: center; justify-content: space-between; height: 76px; padding-top: env(safe-area-inset-top); }
.lg-back { margin-right: -12px; padding-inline: 14px; color: var(--text-2); }
.lg-back:hover .lg-back-arrow { transform: translateX(-3px); }

.lg-main { display: grid; place-items: center; padding: var(--s-8) var(--gutter) var(--s-12); }

.lg-card {
  width: min(100%, 420px);
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-3);
}
.lg-card-head h1 {
  margin: var(--s-3) 0 0;
  font: 580 var(--t-32)/1.05 var(--f-display); font-stretch: var(--display-stretch);
  letter-spacing: -.035em;
}
.lg-sub { margin: var(--s-2) 0 0; color: var(--text-2); font-size: var(--t-14); }

.lg-banner {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: var(--s-6); padding: 12px 14px;
  border: 1px solid rgb(242 104 90 / .35); border-radius: var(--r-2);
  background: var(--err-soft); color: #ffb3a9;
  font-size: var(--t-13); line-height: 1.45;
}
.lg-banner[data-tone='info'] { border-color: var(--line-2); background: var(--ink-1); color: var(--text-2); }
.lg-banner svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.lg-banner p { margin: 0; }
.lg-banner:not([hidden]) { animation: lg-banner-in var(--d-3) var(--ease-out); }
@keyframes lg-banner-in { from { opacity: 0; transform: translateY(-4px); } }

.lg-form { display: grid; gap: var(--s-2); margin-top: var(--s-6); }
.lg-form.is-shaking { animation: lg-shake 380ms var(--ease-out); }
@keyframes lg-shake { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 90% { transform: translateX(1px); } }

.lg-password { padding-right: 52px; }
.lg-reveal {
  position: absolute; right: 4px; top: 4px; width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; border-radius: var(--r-1);
  background: transparent; color: var(--text-3);
  transition: color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
}
.lg-reveal:hover { color: var(--text-1); background: var(--ink-3); }
.lg-eye { width: 19px; height: 19px; }
.lg-eye-slash { stroke-dasharray: 19; stroke-dashoffset: 19; transition: stroke-dashoffset var(--d-3) var(--ease-out); }
.lg-reveal[aria-pressed='true'] .lg-eye-slash { stroke-dashoffset: 0; }

.lg-submit { width: 100%; min-height: 50px; margin-top: var(--s-2); font-size: var(--t-15); }
.lg-submit[aria-busy='true'] { opacity: 1; }
.lg-submit.is-done { --b-bg: var(--ok); --b-line: var(--ok); color: #06140c; box-shadow: var(--shadow-1); }
.lg-check { width: 18px; height: 18px; }
.lg-check path { stroke-dasharray: 16; stroke-dashoffset: 16; animation: lg-draw var(--d-3) var(--ease-out) forwards; }
@keyframes lg-draw { to { stroke-dashoffset: 0; } }

.lg-note { margin: var(--s-6) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--line-1); color: var(--text-3); font-size: var(--t-13); line-height: 1.5; }

.lg-foot { display: flex; justify-content: space-between; gap: var(--s-4); min-height: 64px; align-items: center; padding-bottom: env(safe-area-inset-bottom); color: var(--text-3); font: 500 var(--t-11)/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion='reduced']) .lg-card { animation: lg-card-in 700ms var(--ease-out) 80ms both; }
}
@keyframes lg-card-in { from { opacity: 0; transform: translateY(16px) scale(.985); } }

@media (max-width: 640px) {
  .lg-header { height: 64px; }
  .lg-main { align-items: start; padding-top: var(--s-4); }
  .lg-card { border-radius: var(--r-3); }
  .lg-foot > :last-child { display: none; }
}

/* Cosmetic loading screens: a layer stack that "prints" while the stages run. */
.boot { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--ink-0); transition: opacity 420ms var(--ease-out), visibility 0s linear 420ms; }
.boot[data-state='off'] { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-inner { display: grid; justify-items: center; gap: var(--s-5); width: min(280px, 80vw); }
.boot-mark { width: 40px; height: 40px; }
.boot-stack { display: flex; flex-direction: column-reverse; gap: 4px; width: 100%; }
.boot-stack i { display: block; height: 7px; border-radius: 2px; border: 1px dashed var(--line-2); transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 240ms; }
.boot-stack i.on { border-style: solid; border-color: var(--ember); background: var(--ember); box-shadow: 0 0 12px rgb(245 118 42 / .45); }
.boot-line { margin: 0; min-height: 1.5em; color: var(--text-2); font: 500 var(--t-12)/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
@media (prefers-reduced-motion: reduce) { .boot, .boot-stack i { transition: none; } }