/* ==========================================================================
   MKH - Login screen
   Visual language from the Claude Design project.
   Requires tokens.css, base.css and components.css.
   ========================================================================== */

.login {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
  min-height: 100svh;
}

/* --------------------------------------------------------------------------
   Brand panel (left)
   -------------------------------------------------------------------------- */

.brand {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(28px, 4vw, 56px);
  background: var(--grad-brand);
  color: #EDEEF9;
}

/* Two slow blooms and a faint grid. They sit behind everything via z-index,
   and the panel's own overflow:hidden is what keeps them off the form. */
.brand::before,
.brand::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: -1;
}
.brand::before {
  inset: -20% -30% auto auto;
  width: 70%;
  background: radial-gradient(circle, rgba(58, 230, 101, 0.30), transparent 62%);
  filter: blur(10px);
  animation: mkh-bloom 14s ease-in-out infinite;
}
.brand::after {
  inset: auto auto -25% -20%;
  width: 62%;
  background: radial-gradient(circle, rgba(60, 64, 190, 0.45), transparent 64%);
  filter: blur(8px);
  animation: mkh-bloom 18s ease-in-out infinite reverse;
}

.brand__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(237, 238, 249, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237, 238, 249, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ---- Lockup -------------------------------------------------------------- */

.lockup { display: flex; align-items: center; gap: 14px; }

.lockup__mark {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 13px;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.7);
}

.lockup__text { display: flex; flex-direction: column; gap: 2px; }

.lockup__name {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #FFFFFF;
}
/* The middle letter is indigo in the logo; on this dark panel it lifts to the
   sky ramp so it stays legible against the brand gradient. */
.lockup__name em { font-style: normal; color: var(--sky-300); }

.lockup__tagline {
  font-size: 9.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--rail-txt-2);
}

/* ---- Pitch --------------------------------------------------------------- */

.brand__body { max-width: 30ch; }

.brand__eyebrow {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border: 1px solid rgba(58, 230, 101, 0.24);
  border-radius: var(--r-full);
  background: rgba(58, 230, 101, 0.10);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--green-300);
}

.brand__title {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 50px);
  line-height: 1.06;
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  color: #FFFFFF;
}
.brand__title span {
  background: var(--grad-arrow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand__lede {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: var(--lh-relaxed);
  color: #B9BEDF;
}

.brand__rule {
  height: 1px;
  margin: 30px 0 24px;
  background: linear-gradient(90deg, transparent, rgba(147, 152, 214, 0.34) 12%, rgba(147, 152, 214, 0.34) 88%, transparent);
}

.brand__features { display: flex; flex-direction: column; gap: 15px; }

.feature { display: flex; align-items: center; gap: 13px; font-size: 14px; color: #DCDFF2; }
.feature__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid rgba(147, 152, 214, 0.20);
  border-radius: 10px;
  background: rgba(147, 152, 214, 0.13);
  color: var(--green-300);
}
.feature__icon svg { width: 17px; height: 17px; }

/* ---- Panel footer -------------------------------------------------------- */

.brand__footer { display: flex; flex-wrap: wrap; gap: 10px 40px; font-size: var(--fs-sm); }
.brand__footer > div { display: flex; flex-direction: column; gap: 3px; }
.brand__footer dt {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rail-txt-3);
}
.brand__footer dd { margin: 0; font-family: var(--font-mono); color: #C8CCE6; }

/* --------------------------------------------------------------------------
   Form panel (right)
   -------------------------------------------------------------------------- */

.panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 44px);
}

.panel__inner { width: 100%; max-width: 404px; display: flex; flex-direction: column; gap: 22px; }

/* Compact lockup shown only when the brand panel is hidden. */
.panel__lockup { display: none; }
.panel__lockup .lockup__mark { width: 46px; height: 46px; border-radius: 12px; box-shadow: none; }
.panel__lockup .lockup__name { font-size: 21px; color: var(--txt); }
.panel__lockup .lockup__name em { color: var(--info); }
.panel__lockup .lockup__tagline { font-size: 9px; letter-spacing: 0.24em; color: var(--txt-3); }

/* ---- Card ---------------------------------------------------------------- */

.panel__card {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}
/* The mark's own gradient, drawn as a hairline across the top of the card. */
.panel__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--grad-arrow);
}

.panel__head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.panel__title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}
.panel__subtitle { font-size: var(--fs-base); color: var(--txt-2); }

#loginForm { display: flex; flex-direction: column; gap: 16px; }
#loginForm .field { margin-bottom: 0; }
#loginForm .field-row { margin-bottom: 0; }
#loginForm .input { height: 42px; font-size: 14px; }
#loginForm .btn { margin-top: 4px; }

.demo-note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--txt-3);
}
.demo-note strong { color: var(--txt-2); }
.demo-note code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--primary-soft-fg);
}

.panel__foot {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--txt-3);
}
.panel__meta { font-family: var(--font-mono); font-size: 11px; color: var(--mute); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .login { grid-template-columns: 1fr 1fr; }
  .brand { padding: 32px 28px; gap: 28px; }
  .lockup__mark { width: 44px; height: 44px; }
  .lockup__name { font-size: 21px; }
  .brand__lede { font-size: var(--fs-base); }
}

/* Short viewports crowd before narrow ones do - drop the list, not the panel. */
@media (max-height: 700px) {
  .brand__features, .brand__rule { display: none; }
}

/* Tablet portrait and below - one column, the brand panel gives way. */
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .brand { display: none; }
  .panel { align-items: flex-start; padding: 40px 24px 56px; }
  .panel__lockup { display: flex; }
}

@media (max-width: 520px) {
  .panel { padding: 28px 18px 48px; }
  .panel__title { font-size: 22px; }
  .panel__card { padding: 22px 18px; border-radius: var(--r-lg); }
}