/*
 * app.karta.az sign-in, first-login password and status pages.
 * Builds on /assets/css/karta.css, the brand foundation shared with karta.az.
 */

.auth-body {
  min-height: 100svh;
}

/* ---- Two-column shell --------------------------------------------------- */

.auth-shell {
  display: grid;
  min-height: 100svh;
}

.auth-main {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: 16px var(--gutter) 22px;
}

.auth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
}

.auth-alt a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.auth-alt a:hover {
  text-decoration-color: var(--ink);
}

.auth-panel {
  width: 100%;
  max-width: 420px;
  margin: auto;
  padding: 44px 0 48px;
}

.auth-panel h1 {
  font-size: clamp(2.2rem, 1.7rem + 2vw, 3rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.auth-panel .eyebrow {
  margin-bottom: 18px;
}

.auth-lede {
  margin-top: 14px;
  color: var(--muted);
  font-size: 1.02rem;
}

.auth-form {
  display: grid;
  gap: 18px;
  margin-top: 34px;
}

.auth-actions {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}

.auth-alt {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9375rem;
  text-align: center;
}

.auth-aside {
  display: none;
}

.js .auth-panel {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

.js .is-ready .auth-panel {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms ease,
    transform 800ms var(--ease-out);
}

/* ---- Visual beside the form ------------------------------------------- */

/* The owner panel preview from karta.az, with the fleet's KARTA card
   tucked behind it. The preview rises from the bottom edge and is cropped
   there on short screens; it never climbs over the title, which sits
   centred in the space above it. */
.auth-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(36px, 4.5vw, 64px) clamp(36px, 4.5vw, 64px) 0;
  border-radius: 32px;
  background: linear-gradient(180deg, #e6f3ec 0%, #f4faf7 100%);
  color: var(--ink);
}

.auth-visual-copy {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 24px;
}

.auth-visual-title {
  max-width: 15ch;
  font-size: clamp(2rem, 1rem + 2.2vw, 3.2rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.auth-visual-title .highlight {
  white-space: nowrap;
}

.auth-preview {
  display: flex;
  flex: 0 1 auto;
  align-items: safe flex-end;
  justify-content: center;
  min-height: 0;
  padding-top: 170px;
}

.auth-preview-stack {
  position: relative;
  width: min(100% - 64px, 440px);
}

.auth-preview-stack .owner-panel {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Sized from the stack so narrow panels keep the whole card in view; its
   lower edge hides 58px behind the owner panel. */
.auth-preview-card {
  position: absolute;
  right: -14.5%;
  bottom: calc(100% - 58px);
  width: 75%;
  box-shadow: 0 40px 60px -34px rgba(6, 60, 44, 0.55);
  transform: rotate(-8deg);
}

.js .auth-preview-stack {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

.js .is-ready .auth-preview-stack {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms ease 120ms,
    transform 900ms var(--ease-out) 120ms;
}

@media (min-width: 1024px) {
  .auth-shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  }

  .auth-main {
    padding: 24px clamp(32px, 4vw, 56px) 24px;
  }

  .auth-aside {
    position: sticky;
    top: 0;
    display: block;
    height: 100svh;
    padding: 12px 12px 12px 0;
  }
}

@media (min-width: 1024px) and (max-height: 760px) {
  .auth-panel {
    padding: 20px 0 24px;
  }

  .auth-preview {
    padding-top: 172px;
  }

  .auth-preview-stack {
    margin-bottom: -64px;
  }
}

/* Tall screens get a larger preview so the panel does not look empty. */
@media (min-width: 1024px) and (min-height: 900px) {
  .auth-preview-stack {
    zoom: 1.12;
  }
}

@media (min-width: 1280px) and (min-height: 1000px) {
  .auth-preview-stack {
    zoom: 1.25;
  }
}

/* ---- New-password rules -------------------------------------------------- */

.rules {
  display: grid;
  gap: 8px;
  margin-top: -6px;
}

.rules li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: color 200ms ease;
}

.rule-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  color: transparent;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}

.rule-mark svg {
  width: 11px;
  height: 11px;
}

.rules li.is-met {
  color: var(--brand-hover);
}

.rules li.is-met .rule-mark {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

/* ---- Transition scene shown while signing in ----------------------------- */

.auth-scene {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--canvas);
  color: var(--ink);
  animation: scene-in 260ms ease both;
}

.auth-scene-inner {
  display: grid;
  justify-items: center;
  gap: 24px;
}

.auth-scene-mark {
  width: 120px;
  animation: scene-mark 1.8s var(--ease-in-out) infinite alternate;
}

.auth-scene-mark img {
  width: 100%;
  filter: drop-shadow(0 20px 26px rgba(16, 16, 14, 0.2));
}

.auth-scene-bar {
  width: 168px;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line);
}

.auth-scene-bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
  animation: scene-bar 1.1s var(--ease-in-out) infinite;
}

.auth-scene-text {
  color: var(--muted);
  font-size: 0.95rem;
}

@keyframes scene-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scene-mark {
  from {
    transform: translate3d(0, 4px, 0) scale(0.98);
  }

  to {
    transform: translate3d(0, -6px, 0) scale(1.02);
  }
}

@keyframes scene-bar {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(260%);
  }
}

/* ---- Status pages (404, service unavailable) ----------------------------- */

.status {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  padding: 20px var(--gutter) 32px;
}

.status > .brand-logo {
  align-self: flex-start;
}

.status-card {
  display: grid;
  justify-items: center;
  width: min(100%, 480px);
  margin: auto;
  padding: 40px clamp(24px, 6vw, 44px) 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.status-art {
  width: 96px;
  margin-bottom: 18px;
}

.status-card h1 {
  margin-top: 16px;
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem);
  font-weight: 650;
  letter-spacing: -0.04em;
}

.status-card p:not(.eyebrow) {
  max-width: 340px;
  margin-top: 10px;
  color: var(--muted);
}

.status-card .btn {
  margin-top: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .js .auth-panel,
  .js .auth-preview-stack {
    opacity: 1;
    transform: none;
  }
}