/* Staff sign-in page */
.login-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 60px 20px 40px;
}

.login-card {
   background: white;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
   max-width: 440px;
   width: 100%;
   padding: 48px 40px 44px;
   text-align: center;
}

.login-eyebrow {
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   color: var(--gold-text);
   margin-bottom: 12px;
}

.login-title {
   font-family: 'Playfair Display', serif;
   font-size: 30px;
   line-height: 1.2;
   color: var(--green-deep);
   margin-bottom: 10px;
}

.login-sub {
   font-size: 15px;
   line-height: 1.6;
   color: var(--muted);
   margin-bottom: 28px;
}

.login-card .field-wrap {
   text-align: left;
   margin-bottom: 18px;
}

.login-card .field-lbl {
   display: block;
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--muted);
   margin-bottom: 7px;
}

.login-card .field-inp {
   width: 100%;
   padding: 14px 14px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--cream);
   font-family: 'Jost', sans-serif;
   font-size: 16px;
   font-weight: 300;
   color: var(--charcoal);
}

.login-card .field-inp:focus {
   outline: none;
   border-color: var(--green-mid);
   background: white;
}

.login-error {
   /* min-height: 20px; */
   font-size: 14px;
   color: var(--danger);
   margin-bottom: 14px;
   /* messages are set via textContent — \n in strings.js renders as a line break */
   white-space: pre-line;
}

.sent-panel[hidden],
.confirm-panel[hidden],
#login-form[hidden] {
   display: none;
}

.sent-mark {
   width: 56px;
   height: 56px;
   margin: 0 auto 20px;
   border-radius: 50%;
   background: var(--green-pale);
   display: flex;
   align-items: center;
   justify-content: center;
}

.sent-mark svg {
   width: 26px;
   height: 26px;
   stroke: var(--green-mid);
}

.dev-link {
   display: block;
   margin: 0 0 22px;
   font-size: 12px;
   color: var(--gold-text);
   word-break: break-all;
   text-decoration: underline;
   text-underline-offset: 3px;
}

.dev-link[hidden] {
   display: none;
}

.btn-back {
   background: white;
   border: 1px solid var(--border);
   color: var(--muted);
}

.btn-back:hover {
   border-color: var(--green-mid);
   color: var(--green-mid);
}

@media (max-width: 480px) {
   .login-card {
      padding: 36px 24px 32px;
   }
   .login-wrap {
   padding: 60px 0px 40px;
}
}