/*
 * Sign-in screen — Dynamic Peptides brand.
 *
 * Colours are sampled from dynamicpeptide.com rather than chosen: the primary
 * blue is the site's own call-to-action (#1769E8), the ink is its heading
 * colour (#101828), and Outfit is its heading face. The wordmark is the exact
 * PNG from the site, placed on a white surface because "DYNAMIC" is set in
 * black — it is never recoloured or redrawn.
 *
 * This file owns the auth gate outright. The console behind it keeps its dark
 * operational theme; these two screens do different jobs and should not share
 * a palette.
 */

.auth-gate {
  --dp-blue: #1769e8;
  --dp-blue-deep: #0b47b4;
  --dp-blue-bright: #3b8dff;
  --dp-ink: #101828;
  --dp-ink-soft: #475569;
  --dp-line: #e3e8f0;
  --dp-surface: #ffffff;
  --dp-field: #f7f9fc;

  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(160deg, #0a1020, var(--dp-ink) 55%, #0a1020);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow-y: auto;
}

/*
 * A class-level `display` beats the user-agent [hidden] rule on specificity,
 * so the gate needs an explicit override or it stays visible after sign-in.
 */
.auth-gate[hidden] { display: none !important; }

.auth-split {
  width: min(1020px, 100%);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border-radius: 18px;
  overflow: hidden;
  background: var(--dp-surface);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* --- brand panel ---------------------------------------------------------- */

.auth-brandside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: 44px 40px 30px;
  color: #fff;
  background:
    radial-gradient(circle at 18% 12%, rgba(59, 141, 255, .40), transparent 55%),
    linear-gradient(155deg, var(--dp-blue) 0%, var(--dp-blue-deep) 62%, #07306f 100%);
  overflow: hidden;
}

/*
 * Decorative lattice.
 *
 * Deliberately abstract: the brand mark is a specific helix-in-a-circle and is
 * never approximated. This is background texture only — a soft diagonal weave,
 * masked to a single soft-edged pool so it never reads as a grid or competes
 * with the headline.
 */
.auth-texture {
  position: absolute;
  inset: -20% -34% -20% 34%;
  pointer-events: none;
  opacity: .13;
  background:
    repeating-linear-gradient(118deg, transparent 0 26px, rgba(255, 255, 255, .9) 26px 27px, transparent 27px 64px),
    repeating-linear-gradient(62deg, transparent 0 26px, rgba(255, 255, 255, .5) 26px 27px, transparent 27px 64px);
  -webkit-mask-image: radial-gradient(ellipse at 62% 46%, #000 12%, transparent 66%);
  mask-image: radial-gradient(ellipse at 62% 46%, #000 12%, transparent 66%);
}

.auth-brandside-body { position: relative; z-index: 1; }

.auth-eyebrow {
  margin: 0 0 18px;
  padding: 5px 13px;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}

.auth-headline {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.02em;
}
/*
 * The site sets its third headline line apart in blue on white. Inverted here:
 * on a blue field the accent has to go light and saturated, because a pale
 * tint at this size just reads as slightly-off-white.
 */
.auth-headline-accent { color: #8ec5ff; }

.auth-blurb {
  margin: 18px 0 0;
  max-width: 34ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .84);
}

.auth-points {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .88);
}
.auth-points li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: baseline;
  gap: 9px;
}
.auth-points li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #bcd8ff;
  box-shadow: 0 0 0 3px rgba(188, 216, 255, .22);
  transform: translateY(-1px);
}

.auth-brandside-foot {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

/* --- form panel ----------------------------------------------------------- */

.auth-formside {
  display: grid;
  place-items: center;
  padding: 40px 38px;
  background: var(--dp-surface);
  min-width: 0;
}

.auth-card {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  /* The old dark-card treatment is fully replaced here. */
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.auth-card[hidden] { display: none !important; }

.auth-logo {
  width: 190px;
  height: auto;
  margin-bottom: 4px;
  /* Intrinsic 1280x446 — the attributes are on the tag so this never reflows. */
}

.auth-card-head { margin-bottom: 2px; }

.auth-title {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--dp-ink);
}
.auth-sub {
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--dp-ink-soft);
}

.auth-card .field { display: flex; flex-direction: column; gap: 5px; }

/* A pair of fields sharing a row, so first-run still fits one screen. */
.auth-card .field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.auth-card .field-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dp-ink-soft);
}

.auth-card input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--dp-line);
  border-radius: 9px;
  background: var(--dp-field);
  color: var(--dp-ink);
  font-family: inherit;
  font-size: 13.5px;
  transition: border-color .13s ease, box-shadow .13s ease, background .13s ease;
}
.auth-card input::placeholder { color: #9aa6b8; }
.auth-card input:hover { border-color: #cbd5e6; }
.auth-card input:focus {
  outline: none;
  background: #fff;
  border-color: var(--dp-blue);
  box-shadow: 0 0 0 3px rgba(23, 105, 232, .15);
}

.auth-card .np-hint { font-size: 10px; color: #7b8798; }

.auth-submit {
  width: 100%;
  margin-top: 5px;
  padding: 11px 16px;
  border: 0;
  border-radius: 9px;
  background: var(--dp-blue);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .13s ease, transform .13s ease, box-shadow .13s ease;
}
.auth-submit:hover:not(:disabled) {
  background: #1259cc;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(23, 105, 232, .32);
}
.auth-submit:active:not(:disabled) { transform: translateY(0); }
.auth-submit:focus-visible { outline: 3px solid rgba(23, 105, 232, .4); outline-offset: 2px; }
.auth-submit:disabled { opacity: .6; cursor: default; }

.auth-error {
  padding: 10px 12px;
  border: 1px solid #f3c2c8;
  border-radius: 9px;
  background: #fdf2f3;
  color: #b3261e;
  font-size: 11.5px;
  line-height: 1.5;
}
.auth-error[hidden] { display: none !important; }

.auth-note {
  margin: 4px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--dp-line);
  font-size: 10.5px;
  line-height: 1.55;
  color: #8592a6;
}

/* --- narrow viewports ------------------------------------------------------
 * Below 820px the brand panel would squeeze the form into an unusable column,
 * so it is dropped entirely rather than stacked — nobody signing in on a phone
 * needs the positioning statement, and stacking it pushes the form below the
 * fold.
 */
@media (max-width: 820px) {
  .auth-split { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
  .auth-brandside { display: none; }
  .auth-formside { padding: 32px 26px; }
}

/*
 * Below this the paired name/email fields fall to ~132px each, which clips
 * "you@company.com" mid-placeholder. One field per row instead — first run
 * still fits a phone screen without the page scrolling.
 */
@media (max-width: 520px) {
  .auth-card .field-row { grid-template-columns: minmax(0, 1fr); gap: 13px; }
}

@media (max-height: 620px) {
  .auth-gate { place-items: start center; }
  .auth-brandside { padding: 28px 32px 22px; }
  .auth-formside { padding: 28px 30px; }
}

/* --- reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .auth-submit,
  .auth-card input { transition: none; }
  .auth-submit:hover:not(:disabled) { transform: none; }
}