/* ═══════════════════════════════════════════════════════════════════
   ink-ls · Login
   Page-specific overrides on top of Auth.css for the public sign-in
   page. Stack of swappable forms (login → 2FA → register…), an OAuth
   row, and a small footer link.
   ═══════════════════════════════════════════════════════════════════ */

.auth-box[hidden] { display: none; }

.auth-heading { margin-bottom: 24px; }

.auth-info {
  text-align: center;
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 16px;
}
.auth-info strong { color: var(--fg); }

.auth-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--fg-muted);
}

.oauth-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition:
    transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}
.oauth-btn:hover {
  background: var(--bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}
.oauth-btn:active {
  transform: translateY(1px);
  box-shadow: none;
  filter: brightness(0.85);
}

/* ═══════════════════════════════════════════════════════════════════
   Persistent mascot
   The mascot is the main character on this page — it stays anchored
   while auth-boxes swap and form content morphs around it. Single
   DOM node (#loginAgent) sized to match Base's hero-logo (128px),
   sitting above the active auth-box. All mascot internals (Ink →
   morph → Assistant, states, face-only, reduced-motion) live in
   INKtoAssistant.html and InkAssistant.html — single source of truth.

   .auth-page is rewired into a column so [mascot] / [auth-box]
   stack with a small gap. The mascot never moves; auth-box swaps
   animate via .is-leaving / fadeUp around it.
   ═══════════════════════════════════════════════════════════════════ */
.auth-page {
  flex-direction: column;
  align-items: center;
  /* Anchor from the top so the logo's y-position never changes
     once it has settled — auth-box content can grow/shrink below
     without moving it. Padding-top puts the logo high enough in
     the viewport that the (logo + auth-box) block reads as
     centered, while the logo is the visual focal point. */
  justify-content: flex-start;
  padding-top: 14vh;
  gap: 40px;
}

@media (max-height: 720px) {
  .auth-page { padding-top: 56px; }
}
.login-agent {
  width: 128px;
  height: 128px;
  display: block;
  flex-shrink: 0;
  /* Transform-origin at the bottom so the squash/stretch reads as
     ink mass landing — the wide-and-flat keyframe spreads outward
     from where the logo touches down, not from its centre. */
  transform-origin: 50% 70%;
  /* The blob entrance — see @keyframes inkLogoBlobIn below. */
  animation: inkLogoBlobIn 1100ms cubic-bezier(0.22, 1.2, 0.36, 1) both;
  will-change: transform, opacity;
}
.login-agent .hero-morph,
.login-agent .agent-icon-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

@media (max-width: 480px) {
  .login-agent { width: 108px; height: 108px; }
}

/* ═══════════════════════════════════════════════════════════════════
   inkLogoBlobIn — entrance animation for the persistent login mascot.
   Reads as a glob of ink falling into place: drops in from above,
   over-squashes wide on contact, springs back narrow, settles flat.
   Combined with the InkAssistant's own internal blob filters this
   gives a goo-like arrival rather than a static placement.
   ═══════════════════════════════════════════════════════════════════ */
@keyframes inkLogoBlobIn {
  0% {
    opacity: 0;
    transform: translateY(-72px) scale(0.55);
  }
  35% {
    opacity: 1;
    transform: translateY(18px) scale(1.22, 0.78);
  }
  55% {
    transform: translateY(-10px) scale(0.9, 1.12);
  }
  72% {
    transform: translateY(5px) scale(1.06, 0.95);
  }
  86% {
    transform: translateY(-2px) scale(0.98, 1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-agent {
    animation: inkLogoBlobInReduced 280ms ease-out both;
  }
  @keyframes inkLogoBlobInReduced {
    from { opacity: 0; transform: none; }
    to   { opacity: 1; transform: none; }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Auth-box swap — softer than the default fadeUp.
   The mascot stays put; only the form content fades. is-leaving
   plays a brief opacity+lift exit on the outgoing box, then JS sets
   hidden. The incoming box uses Auth.css's existing fadeUp for entry.
   ═══════════════════════════════════════════════════════════════════ */
.auth-box.is-leaving {
  animation: authBoxOut 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes authBoxOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-box.is-leaving { animation-duration: 120ms; }
}

/* ═══════════════════════════════════════════════════════════════════
   Password view-toggle
   Tiny icon button anchored inside the right edge of a password field.
   One SVG with two icon groups; CSS shows the one matching aria-pressed.
   Login.js handles input.type toggling and mascot reactions.
   ═══════════════════════════════════════════════════════════════════ */
.field-with-toggle {
  position: relative;
}
.field-with-toggle .field {
  /* Reserve room for the toggle so password text doesn't run under it. */
  padding-right: 38px;
}
.pw-view-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  border-radius: var(--radius);
  transition: color 0.12s, background 0.12s;
  font-family: inherit;
}
.pw-view-toggle:hover {
  color: var(--fg);
  background: var(--bg-hover);
}
.pw-view-toggle:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 1px;
}
.pw-view-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}
.pw-view-toggle .pw-eye-closed                 { display: none; }
.pw-view-toggle[aria-pressed="true"] .pw-eye-open   { display: none; }
.pw-view-toggle[aria-pressed="true"] .pw-eye-closed { display: inline; }

/* ═══════════════════════════════════════════════════════════════════
   Inline success state
   On successful auth, Login.js wipes the active form's content and
   builds a vertically-centered block with the AI greeting above the
   "Logging in" label. Both fade in together — the greeting fills
   what would otherwise be dead space between mascot and label. The
   mascot above transitions to state-tool at the same time; redirect
   fires ~1.2s later.
   ═══════════════════════════════════════════════════════════════════ */
.auth-success {
  /* Tall enough that vertical centering creates visible breathing
     room above the label, which the greeting line fills. */
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  /* Single, short fade — both the greeting and the label come in
     together as one block. No typing animation, no per-element
     stagger; matches the "much shorter transition" intent. */
  animation: fadeUp 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.auth-success .auth-success-greeting {
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg-muted);
  font-style: italic;
  max-width: 28ch;
}
.auth-success .auth-heading {
  /* Overrides the default 24px bottom margin from Login.css base
     — inside .auth-success the layout is flex-gap driven. */
  margin-bottom: 0;
}