/* Signup and password reset, dressed as the desk's sign-in (board D-SignIn).
 *
 * The two pages an operator reaches before they have a session: from a setup
 * code, or from a reset code their account owner issued. They should look
 * like the sign-in they came from — the deep panel saying whose software
 * this is, one raised card holding the form — so nobody wonders whether a
 * link has taken them somewhere else.
 *
 * Loaded after fnw.css by signup/ and reset/ only. Tokens only; no colour of
 * its own. The desk's own sign-in carries its styling in pages.css, which
 * these pages do not load.
 */

.signin-wrap { grid-template-columns: minmax(420px, 620px) minmax(0, 1fr); min-height: 100vh; }

/* The deep panel: flat, the product's one dark surface. */
.signin-art {
  background: var(--deep);
  color: var(--deep-ink);
  padding: 64px;
  justify-content: flex-start;
  gap: 28px;
}
.signin-art .art-brand { gap: 12px; }
.signin-art .art-brand svg { border-radius: 14px; flex-shrink: 0;  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.signin-art .art-brand b { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.signin-art .art-copy { display: flex; flex-direction: column; gap: 18px; margin-top: 80px; max-width: none; }
.signin-art .art-copy p { max-width: 460px; }
.signin-art h2 {
  margin: 0;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--deep-ink);
  text-wrap: balance;
}
.signin-art p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--deep-dim); }
.signin-art .art-foot { margin-top: auto; color: var(--deep-dim); font-size: 12.5px; }

/* The price, under the copy it belongs to and above the company name. One
 * hairline of separation and nothing else: it is part of what this panel
 * already says, not a box bolted onto it. */
.signin-art .art-price {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 460px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* .t-eyebrow is coloured for a light ground; on the deep panel it has to be
 * the lifted ink, the same swap the board makes everywhere else. */
.signin-art .art-price .t-eyebrow { color: var(--deep-dim); }
.signin-art .art-price b { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--deep-ink); }
.signin-art .art-price p { font-size: 14.5px; color: var(--deep-ink); }
.signin-art .art-price p.fine { font-size: 13px; color: var(--deep-dim); }

/* The light half: one raised card, centred. */
.signin-form { background: var(--bg); padding: 40px 24px; display: flex; align-items: center; justify-content: center; }
.signin-form .inner.card {
  width: 440px;
  min-width: 0;
  max-width: 100%;
  padding: 36px;
  margin: 0;
  border-radius: 20px;
}
.auth-step { display: flex; flex-direction: column; gap: 18px; }
.auth-head { gap: 6px; }
.auth-head h1, .auth-head h2 { margin: 0; }
.auth-head h2 { font-family: inherit; }
.auth-step .field { display: flex; flex-direction: column; gap: 6px; }
.auth-step .field + .field { margin-top: 0; }
.auth-step .field label { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.auth-step input,
.auth-step textarea {
  min-height: 52px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: 15px;
  padding: 0 14px;
}
.auth-step textarea { padding: 13px 14px; min-height: 84px; font-family: inherit; line-height: 1.5; }
.auth-step input:focus,
.auth-step textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-tint); }

.auth-step .btn { min-height: 50px; border-radius: 14px; font-size: 15px; margin-top: 0; text-decoration: none; }
.auth-step .btn.block { width: 100%; }
.signin-form .auth-step .btn.primary { margin-top: 0; padding: 0 20px; }
.auth-step .btn.ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  font-weight: 600;
  white-space: normal;
  text-align: center;
}
.auth-step .btn.ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); border-color: var(--primary); }

.or-rule { gap: 10px; }
.or-rule .hair { flex: 1 1 auto; }
.or-rule .t-caption { text-align: center; }
.auth-foot { display: flex; justify-content: center; }
.help { font-size: 12px; color: var(--dim); line-height: 1.45; margin: 0; }

/* A step's error sits in the column's rhythm, and takes no room when empty. */
.auth-step [id$="-note"]:empty { display: none; }
.auth-step .note { margin: 0; border-radius: 12px; }

@media (max-width: 980px) {
  .signin-wrap { grid-template-columns: minmax(0, 1fr); }
  .signin-art { display: none; }
  .signin-form { padding: 28px 16px; align-items: flex-start; }
}
@media (max-width: 720px) {
  .signin-form .inner.card { padding: 24px; }
}