/* ============================================================
   SkinSignal / css / signin.css
   The ONE sign in plate (js/signin.js, SkinSignalSignIn.plate).

   The prestige state card's anatomy (eyebrow, title, line, button) on the
   product's panel material, laid out like the trade board's locked plate:
   the words on the left, the action on the right, stacking on a phone.

   The surface tokens come from css/surface-tokens.css where a page loads
   it; the fallbacks are the same values, so a page that does not (market,
   calling cards) draws the identical plate rather than a borderless one.
   ============================================================ */
.signin-plate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 34px);
  border: 1px solid var(--edge, rgba(255, 255, 255, 0.055));
  border-radius: 18px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(125, 180, 255, 0.07), transparent 55%),
    var(--surface-panel, #0e1016);
  box-shadow:
    inset 0 1px 0 var(--edge-top, rgba(255, 255, 255, 0.1)),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 12px 32px -16px rgba(0, 0, 0, 0.9);
}

.signin-plate__text { flex: 1 1 340px; min-width: 0; }

.signin-plate__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #a8c4ff;
}

.signin-plate__title {
  margin: 8px 0 6px;
  font-family: var(--font-display);
  font-stretch: var(--display-hero);
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
}

.signin-plate__line {
  margin: 0;
  max-width: 58ch;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.signin-plate__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex: none;
}

.signin-plate__note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--faint);
  text-align: right;
}

/* Centred: the plate standing on its own, not beside content. */
.signin-plate--center {
  flex-direction: column;
  text-align: center;
}
.signin-plate--center .signin-plate__text { flex: none; }
.signin-plate--center .signin-plate__line { margin: 0 auto; }
.signin-plate--center .signin-plate__actions { align-items: center; }
.signin-plate--center .signin-plate__note { text-align: center; }

@media (max-width: 640px) {
  .signin-plate { flex-direction: column; align-items: stretch; }
  .signin-plate__text { flex: none; }
  .signin-plate__actions { align-items: stretch; }
  .signin-plate__actions .cta { justify-content: center; }
  .signin-plate__note { text-align: left; }
}