/* ===========================================================================
   login.php — split brand panel + portal card
   Loads after tokens.css and base.css.
   =========================================================================== */

.login { display: flex; flex-direction: column; min-height: 100vh; }
.login-body { display: flex; flex: 1 1 auto; min-height: 0; }

/* -- left: brand ---------------------------------------------------------- */
.brand {
  width: 50%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  padding: 52px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #17191E;
  background: radial-gradient(120% 90% at 8% 42%, #1C0A0E 0%, #0B0C0E 46%, var(--bg) 100%);
}

.brand-mark { position: relative; display: flex; align-items: flex-start; }

/* The KREA mark, in place of the wordmark. Sized by HEIGHT with width:auto so
   the artwork's own 432x486 ratio is preserved and a future SVG swaps in
   without touching this rule. */
.brand-logo {
  display: block;
  height: 96px;
  width: auto;
  flex-shrink: 0;
}

/* Fallback text lockup — only rendered when no logo file is present. */
.brand-words { min-width: 0; }
.brand-name { font-size: 19px; font-weight: 700; letter-spacing: .04em; }
.brand-sub  { margin-top: 7px; }

.brand-mid { position: relative; padding: 40px 0; }

.brand-badge {
  display: inline-flex; align-items: center; gap: 8px;
  height: 27px; padding: 0 13px;
  border: 1px solid var(--accent-line); border-radius: 999px;
  background: rgba(221, 26, 50, .07);
  color: var(--accent);
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}

.brand-title {
  font-family: var(--font);
  font-size: 58px;
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.028em;
  margin-top: 26px;
}
.brand-title em { font-style: normal; color: var(--accent); }

.brand-copy {
  margin-top: 22px;
  max-width: 400px;
  font-size: 14.5px;
  line-height: 1.62;
  color: #8A929D;
  text-wrap: pretty;
}

/* -- stats ---------------------------------------------------------------- */
.stats { position: relative; }
.stats-rule { height: 1px; background: #1D2026; margin-bottom: 24px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.stat-value {
  font-size: 27px; font-weight: 700; letter-spacing: -.015em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  margin-top: 8px;
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* -- right: portal -------------------------------------------------------- */
.portal {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 52px;
}
.portal-card {
  width: 100%; max-width: 386px;
  padding: 34px 32px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.portal-title { font-family: var(--font); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }

.portal-form { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }

.field-head { display: flex; align-items: baseline; justify-content: space-between; }
.field-link { font-size: 11.5px; font-weight: 500; color: var(--accent); }

.remember { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-muted); cursor: pointer; }
.remember input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

.portal-submit {
  height: 48px; width: 100%;
  border-radius: 9px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

/* -- footer --------------------------------------------------------------- */
.login-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 56px;
  border-top: 1px solid #15171B;
  font-size: 11.5px; color: var(--ink-dim);
}
.login-foot nav { display: flex; gap: 26px; }
.login-foot a { color: var(--ink-dim); }
.login-foot a:hover { color: var(--ink-muted); text-decoration: none; }

/* -- narrow screens -------------------------------------------------------
   The brand panel is decorative; on a phone the form is the whole job, so the
   panel collapses to a compact header rather than stacking full height.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .login-body { flex-direction: column; }
  .brand { width: 100%; padding: 32px 26px; border-right: 0; border-bottom: 1px solid #17191E; }
  .brand-mid { padding: 26px 0 22px; }
  .brand-title { font-size: 38px; }
  .portal { padding: 32px 26px 44px; }
  .login-foot { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 26px; }
  .login-foot nav { gap: 18px; flex-wrap: wrap; }
}

@media (max-width: 560px) {
  .brand-title { font-size: 31px; }
  .stats-grid { gap: 14px; }
  .stat-value { font-size: 22px; }
}

/* On a phone the wordmark and mark stack rather than squeezing side by side. */
@media (max-width: 560px) {
  .brand-mark { gap: 16px; }
  .brand-logo { height: 66px; }
}