/* Staff sign-in, laid out like Apple's account sign-in: one centred column on white,
   a glass bar on top, floating-label fields and a full-width blue pill. */

body.signin {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.signin-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 44px;
  border-bottom: 1px solid var(--hairline-soft);
}
.signin-nav-inner {
  max-width: 1024px;
  height: 100%;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: -0.01em;
}
.signin-nav .pearl { --size: 18px; }
.signin-nav-name { font-weight: 600; font-size: 14px; letter-spacing: -0.016em; }
.signin-nav-section { margin-left: auto; color: var(--ink-2); }

.signin-main {
  display: grid;
  place-items: start center;
  padding: clamp(40px, 10vh, 96px) 16px 48px;
}

.signin-column {
  width: min(100%, 460px);
  display: grid;
  justify-items: center;
  text-align: center;
}
.signin-mark { --size: 96px; margin-bottom: 26px; }
.signin-title { margin: 0; }
.signin-sub { margin: 8px 0 32px; }

.signin-form { width: 100%; text-align: start; }

/* Two fields joined into one rounded group, like Apple's stacked inputs. */
.field-group {
  display: grid;
  border-radius: var(--r-control);
}
.field-group .field-float:first-child input { border-radius: var(--r-control) var(--r-control) 0 0; }
.field-group .field-float:last-child input { border-radius: 0 0 var(--r-control) var(--r-control); margin-top: -1px; }
.field-group .field-float input:focus { position: relative; z-index: 1; }

.signin-button { margin-top: 22px; }

.signin-locked {
  display: grid;
  gap: 4px;
  padding: 18px 24px;
  border-radius: var(--r-card);
  width: 100%;
  text-align: start;
}

.signin-note { margin: 28px 0 0; max-width: 360px; }

.signin-footer {
  padding: 18px 22px 22px;
  border-top: 1px solid var(--hairline-soft);
  background: var(--canvas-index);
  text-align: center;
}
.signin-footer p { margin: 0; }