/* ==========================================================================
   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 --------------------------------------------------------------- */

/* The panel is wide, so the column should be too. 30ch left well over half
   the available width empty and wrapped the headline onto five lines.
   Capped rather than fluid so the measure stays sane on a very wide screen. */
.brand__body { max-width: min(100%, 40rem); }

.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 {
  /* Narrower than the headline above it: display type reads fine across a
     long line, running prose does not. */
  max-width: 46ch;
  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); }
}