/* The sign-in page.
 *
 * den-login (© 2026 Hasib), carried over rule for rule. Every measurement,
 * duration and easing below is the original's own value, copied from its
 * stylesheet rather than reconstructed — an earlier pass guessed at a few of
 * them and parked the husky's paws over his face at rest instead of down at
 * his sides, which is exactly what guessing costs.
 *
 * Four deliberate departures, and only four:
 *
 *   1. Colour is a token, not a literal. The original is dark only; here each
 *      one is defined twice — light first, then dark — in the same
 *      three-state pattern app.css uses, so the page follows the site's theme
 *      and an explicit choice in the profile beats the device either way.
 *   2. The type stays Vazirmatn. The original pairs Manrope with Sora, and
 *      neither has Persian or Arabic glyphs, so on two of this site's five
 *      languages they would render as boxes.
 *   3. The floating label is a fixed-height box rather than a scaled line of
 *      text. Vazirmatn's vertical metrics are tall enough that the scaled
 *      version landed on top of the value it labels.
 *   4. The vertical rhythm is trimmed a few percent against the original —
 *      the card, the fields, the button and the gaps between them. The
 *      original owns a whole viewport; this one shares its height with the
 *      bottom bar, and at the original's sizes the Google button was pushed
 *      under that bar on a short phone. Every trimmed value is marked below.
 *   5. Everything is scoped under #step-auth. The husky's parts carry short
 *      names (.head, .paw, .iris) that the site uses elsewhere; the id in
 *      front of them outranks any class-only rule in app.css, so the two sets
 *      can never reach into each other.
 *
 * The component supplies the appearance and nothing else — every id, form and
 * handler underneath is the one that was already here.
 */

/* ── the palette, light ────────────────────────────────────────────────── */
#step-auth {
  --den-ink: #131a2b;
  --den-muted: #4c5875;
  --den-faint: #6b779a;
  --den-line: rgba(19, 26, 43, 0.12);
  --den-field: rgba(255, 255, 255, 0.72);
  --den-field-focus: #ffffff;

  --den-accent: #7c3aed;
  --den-accent-2: #6d28d9;
  --den-accent-deep: #4c1d95;
  --den-glow: 124, 58, 237;
  --den-tick: #ffffff;

  /* In the dark original the card is a dark panel on a darker ground. Light
     has to keep that separation the other way up: a near-white card on a
     ground with real colour in it. A white card on a white page is not a
     card. */
  --den-card-a: rgba(255, 255, 255, 0.94);
  --den-card-b: rgba(255, 255, 255, 0.82);
  --den-card-edge: rgba(124, 58, 237, 0.16);
  --den-card-shadow:
    0 34px 70px rgba(49, 33, 105, 0.22),
    0 4px 12px rgba(49, 33, 105, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --den-sheen-color: rgba(255, 255, 255, 0.85);
  --den-raised: rgba(255, 255, 255, 0.9);
  --den-raised-hover: #ffffff;

  /* The same ground the rest of the site now stands on — app.css owns
     the values, this page just names them. */
  --den-ground-1: var(--page-1);
  --den-ground-2: var(--page-2);
  --den-ground-top: var(--page-top);
  --den-orb-a: rgba(139, 92, 246, 0.5);
  --den-orb-b: rgba(56, 189, 248, 0.38);
  --den-orb-blend: normal;
  --den-orb-alpha: 0.6;
  --den-mote: rgba(91, 33, 182, 0.6);
  --den-grain-alpha: 0.045;

  --den-dog-shadow: drop-shadow(0 18px 22px rgba(49, 33, 105, 0.3));
  --den-autofill: #f4f2ff;
  --den-danger: #c2334a;

  --den-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --den-out: cubic-bezier(0.22, 0.72, 0.16, 1);
}

/* ── the palette, dark ─────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #step-auth {
    --den-ink: #eef2f8;
    --den-muted: rgba(238, 242, 248, 0.60);
    --den-faint: rgba(238, 242, 248, 0.40);
    --den-line: rgba(255, 255, 255, 0.10);
    --den-field: rgba(255, 255, 255, 0.045);
    --den-field-focus: rgba(255, 255, 255, 0.08);

    --den-accent: #c4a0ff;
    --den-accent-2: #e2d1ff;
    --den-accent-deep: #7c3aed;
    --den-glow: 168, 85, 247;
    --den-tick: #1a1030;

    --den-card-a: rgba(46, 40, 68, 0.62);
    --den-card-b: rgba(19, 17, 30, 0.5);
    --den-card-edge: rgba(255, 255, 255, 0.14);
    --den-card-shadow:
      0 44px 90px rgba(0, 0, 0, 0.5),
      0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --den-sheen-color: rgba(255, 255, 255, 0.14);
    --den-raised: rgba(255, 255, 255, 0.05);
    --den-raised-hover: rgba(255, 255, 255, 0.11);

    --den-ground-1: var(--page-1);
    --den-ground-2: var(--page-2);
    --den-ground-top: var(--page-top);
    --den-orb-a: rgba(139, 92, 246, 0.55);
    --den-orb-b: rgba(110, 205, 200, 0.40);
    --den-orb-blend: screen;
    --den-orb-alpha: 0.5;
    --den-mote: rgba(200, 222, 255, 0.9);
    --den-grain-alpha: 0.05;

    --den-dog-shadow: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.45));
    --den-autofill: #241f38;
    --den-danger: #ff8b9a;
  }
}
:root[data-theme="dark"] #step-auth {
  --den-ink: #eef2f8;
  --den-muted: rgba(238, 242, 248, 0.60);
  --den-faint: rgba(238, 242, 248, 0.40);
  --den-line: rgba(255, 255, 255, 0.10);
  --den-field: rgba(255, 255, 255, 0.045);
  --den-field-focus: rgba(255, 255, 255, 0.08);

  --den-accent: #c4a0ff;
  --den-accent-2: #e2d1ff;
  --den-accent-deep: #7c3aed;
  --den-glow: 168, 85, 247;
  --den-tick: #1a1030;

  --den-card-a: rgba(46, 40, 68, 0.62);
  --den-card-b: rgba(19, 17, 30, 0.5);
  --den-card-edge: rgba(255, 255, 255, 0.14);
  --den-card-shadow:
    0 44px 90px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --den-sheen-color: rgba(255, 255, 255, 0.14);
  --den-raised: rgba(255, 255, 255, 0.05);
  --den-raised-hover: rgba(255, 255, 255, 0.11);

  --den-ground-1: var(--page-1);
  --den-ground-2: var(--page-2);
  --den-ground-top: var(--page-top);
  --den-orb-a: rgba(139, 92, 246, 0.55);
  --den-orb-b: rgba(110, 205, 200, 0.40);
  --den-orb-blend: screen;
  --den-orb-alpha: 0.5;
  --den-mote: rgba(200, 222, 255, 0.9);
  --den-grain-alpha: 0.05;

  --den-dog-shadow: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.45));
  --den-autofill: #241f38;
  --den-danger: #ff8b9a;
}

/* ── the page ──────────────────────────────────────────────────────────
 * The original is a whole document: body { display: grid; place-items:
 * center; padding: 40px 20px }. Here that is a step inside <main>, between
 * the app bar and the bottom bar, so the same centring happens on the step.
 *
 * margin-block: auto on the card rather than align-items: center — auto
 * margins centre a flex item too, but when the card is taller than the space
 * it starts at the top and scrolls instead of being clipped at both ends.
 */
#step-auth.active {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100%;
  padding: 0 20px 20px;
}
/* main's own padding would inset the ambient, which has to run edge to edge;
   its bottom padding stays so the card clears the bottom bar. */
body.auth-page main { padding: 0 0 130px; }

/* The app bar is empty on this page — no title, no bell, no language, no back
   arrow. The card carries its own identity, and the bottom bar is how you
   leave. With nothing in it the bar keeps only enough height to clear a
   status bar or a notch; the padding a title needs would just be a band of
   dead space above the husky. */
body.auth-page header > * { display: none; }
/* Nothing in it, so nothing to pad — except a notch, where the phone needs
   its own clearance and provides the measurement. */
body.auth-page header { padding: env(safe-area-inset-top, 0px) 0 0; min-height: 0; }

/* While a keyboard is open the card anchors to the top of the page instead of
   sitting in the middle of it: auto margins re-centre on every reflow, which
   fights scrolling the focused field clear of the keyboard.
   The tall bottom padding is the point, not waste: a field near the bottom of
   the card can only be scrolled above the keyboard if there is somewhere below
   it to scroll to. Without this the page runs out of scroll with the last
   field still half-covered, which is exactly what it did. */
body.keyboard-open #step-auth .den-auth { margin-block: 0; }
body.auth-page.keyboard-open main { padding-bottom: 60vh; }
/* The ambient is a fixed layer inside <main>, and <main> comes after the
   header in the document, so without a stacking order of its own the header
   would be painted underneath it. */
body.auth-page header { z-index: 5; }

/* ── ambient backdrop ─────────────────────────────────────────────────── */
.den-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.den-ambient::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--den-ground-top) 0%, transparent 60%),
    linear-gradient(180deg, var(--den-ground-1), var(--den-ground-2) 72%);
}
.den-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: var(--den-orb-alpha);
  mix-blend-mode: var(--den-orb-blend);
  will-change: transform;
}
.den-orb--a {
  width: 46vmax;
  height: 46vmax;
  left: -14vmax;
  top: -18vmax;
  background: radial-gradient(closest-side, var(--den-orb-a), transparent);
  animation: den-float-a 22s ease-in-out infinite;
}
.den-orb--b {
  width: 40vmax;
  height: 40vmax;
  right: -16vmax;
  bottom: -20vmax;
  background: radial-gradient(closest-side, var(--den-orb-b), transparent);
  animation: den-float-b 28s ease-in-out infinite;
}
@keyframes den-float-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6vmax, 4vmax) scale(1.1); } }
@keyframes den-float-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-5vmax, -3vmax) scale(1.12); } }

.den-motes { position: absolute; inset: 0; }
.den-mote {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--den-mote), transparent 70%);
  animation: den-mote-drift var(--dur, 14s) ease-in-out infinite alternate;
  opacity: 0;
}
@keyframes den-mote-drift {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(var(--dx, 20px), var(--dy, -60px)); }
}

.den-grain {
  position: absolute;
  inset: -50%;
  background-image: url("../img/grain.png");
  background-size: 260px;
  opacity: var(--den-grain-alpha);
  animation: den-grain 6s steps(6) infinite;
}
@keyframes den-grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -5%); }
  60% { transform: translate(-3%, 4%); }
  80% { transform: translate(5%, -2%); }
  100% { transform: translate(0, 0); }
}

/* ── layout ───────────────────────────────────────────────────────────── */
.den-auth {
  position: relative;
  z-index: 1;
  width: min(92vw, 410px);
  margin-block: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── the husky ────────────────────────────────────────────────────────── */
#step-auth .den-stage {
  position: relative;
  z-index: 3;
  width: 232px;
  margin-bottom: -46px;      /* he peeks over the top edge of the card */
  filter: var(--den-dog-shadow);
  transform: translate3d(var(--fox-x, 0), var(--fox-y, 0), 0);
  flex: none;
}
#step-auth .den-dog { display: block; width: 100%; height: auto; overflow: visible; }
#step-auth .den-dog__shadow { fill: rgba(0, 0, 0, 0.28); filter: blur(4px); }

/* eyes track the caret / cursor via --px / --py set in js/den-auth.js */
#step-auth .eye__ball { transform: translate(var(--px, 0px), var(--py, 0px)); }

/* per-part transform setup */
#step-auth .ear,
#step-auth .eye,
#step-auth .paw,
#step-auth .tongue { transform-box: fill-box; transform-origin: center; }
#step-auth .ear--l,
#step-auth .ear--r { transform-origin: 50% 94%; }   /* pricked ears pivot at the base */

#step-auth .eye { transition: transform 0.12s ease; }
#step-auth .den-dog.is-blink .eye { transform: scaleY(0.08); }

#step-auth .mouth { fill: none; stroke: #2b2b33; stroke-width: 3; stroke-linecap: round; }

/* happy tongue — tucked away until the success squint */
#step-auth .tongue {
  opacity: 0;
  transform-origin: center top;
  transform: scaleY(0.35);
  transition: opacity 0.25s ease, transform 0.32s var(--den-spring);
}

#step-auth .blush { opacity: 0.5; transition: opacity 0.35s ease; }   /* huskies get a little rosy */

/* ears react */
#step-auth .ear { transition: transform 0.4s var(--den-spring); }

/* the money move: paws parked down, slap up to cover the eyes */
#step-auth .paw {
  transform: translateY(116px) scale(0.88);
  transition: transform 0.44s var(--den-spring);
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.22));
}

#step-auth .den-dog.is-cover .paw { transform: translateY(0) scale(1); }
#step-auth .den-dog.is-cover .blush { opacity: 0.95; }
#step-auth .den-dog.is-cover .ear--l { transform: rotate(-9deg); }
#step-auth .den-dog.is-cover .ear--r { transform: rotate(9deg); }

/* peek: lower the paws so the eyes clear their top edge */
#step-auth .den-dog.is-peek .paw {
  transform: translateY(50px) scale(1);
  transition: transform 0.34s var(--den-out);
}
#step-auth .den-dog.is-peek .blush { opacity: 0.95; }
#step-auth .den-dog.is-peek .ear--l { transform: rotate(-5deg); }
#step-auth .den-dog.is-peek .ear--r { transform: rotate(5deg); }

/* happy squint on success */
#step-auth .den-dog.is-happy .eye { transform: scaleY(0.18); }
#step-auth .den-dog.is-happy .blush { opacity: 0.85; }
#step-auth .den-dog.is-happy .mouth { transform: translateY(1px); }
#step-auth .den-dog.is-happy .tongue { opacity: 1; transform: scaleY(1); }

/* The request was refused — his ears drop. Not in the original, which has no
   server to be refused by. */
#step-auth .den-dog.is-sad .ear--l { transform: rotate(-26deg) translateY(3px); }
#step-auth .den-dog.is-sad .ear--r { transform: rotate(26deg) translateY(3px); }
#step-auth .den-dog.is-sad .eye { transform: scaleY(0.55); }

/* idle breathing bob */
#step-auth .den-dog { animation: den-bob 5.2s ease-in-out infinite; }
@keyframes den-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-0.6deg); } }

/* ── the card ─────────────────────────────────────────────────────────── */
#step-auth .den-card {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 50px 32px 24px;      /* trimmed; 58px 34px 30px */
  border-radius: 26px;
  background: linear-gradient(162deg, var(--den-card-a), var(--den-card-b));
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  border: 1px solid var(--den-card-edge);
  box-shadow: var(--den-card-shadow);
  overflow: hidden;
  color: var(--den-ink);
}
#step-auth .den-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, -10%), var(--den-sheen-color), transparent 45%);
}

#step-auth .auth-header { background: none; padding: 0; text-align: center; margin-bottom: 18px; }   /* trimmed; 22px */
#step-auth .auth-header h2 {
  margin: 0;
  font-weight: 700;
  font-size: 1.95rem;           /* trimmed; 2.1rem */
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--den-accent-2), var(--den-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#step-auth .den-sub { margin: 5px 0 0; font-size: 0.9rem; font-weight: 400; line-height: 1.5; color: var(--den-muted); }

#step-auth .auth-body { padding: 0; position: relative; }
#step-auth form { display: flex; flex-direction: column; gap: 13px; }   /* trimmed; 15px */

/* ── floating-label fields ────────────────────────────────────────────── */
#step-auth .den-field { position: relative; }
#step-auth .den-field input {
  width: 100%;
  margin: 0;
  padding: 19px 16px 6px;       /* trimmed; 21px 16px 8px */
  font-size: 16px;              /* 1rem in the original; pinned in px because
                                   under 16px iOS zooms the page on focus and
                                   this site scales its root for accessibility */
  line-height: 1.35;
  font-weight: 500;
  font-family: inherit;
  color: var(--den-ink);
  background: var(--den-field);
  border: 1px solid var(--den-line);
  border-radius: 13px;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
#step-auth .den-field input:focus {
  border-color: var(--den-accent);
  background: var(--den-field-focus);
  box-shadow: 0 0 0 3px rgb(var(--den-glow) / 0.22);
}
#step-auth .den-field:has(.den-reveal) input { padding-inline-end: 48px; }
/* The original scales the label down and lifts it 11px. Vazirmatn's vertical
   metrics are tall enough that the scaled line landed on top of the value, so
   here the label is a box of a known height that shrinks to the field's top
   band instead — the same look, arrived at a way that holds in all five
   languages. */
#step-auth .den-field label {
  position: absolute;
  inset-inline-start: 16px;
  top: 0;
  margin: 0;                    /* app.css puts margin-top on every label */
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 1;
  color: var(--den-muted);
  pointer-events: none;
  transition: height 0.2s ease, font-size 0.2s ease, color 0.2s ease;
  max-width: calc(100% - 62px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#step-auth .den-field input:focus + label,
#step-auth .den-field input:not(:placeholder-shown) + label {
  height: 24px;                 /* trimmed with the field */
  font-size: 11px;
  color: var(--den-accent-2);
}
/* Autofill paints its own background; without this the field takes the
   browser's colour and the ink-coloured text disappears into it. */
#step-auth .den-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--den-ink);
  -webkit-box-shadow: 0 0 0 60px var(--den-autofill) inset;
  caret-color: var(--den-ink);
}

/* ── reveal ───────────────────────────────────────────────────────────── */
#step-auth .den-reveal {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--den-muted);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
#step-auth .den-reveal:hover { color: var(--den-ink); background: var(--den-raised); }
#step-auth .den-reveal svg { width: 20px; height: 20px; }
#step-auth .den-reveal .den-reveal__off { display: none; }
#step-auth .den-reveal.is-on .den-reveal__on { display: none; }
#step-auth .den-reveal.is-on .den-reveal__off { display: block; }

/* ── remember / forgot ────────────────────────────────────────────────── */
#step-auth .den-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-top: 1px;
  /* The original fits "Remember me" and "Forgot password?" on one line in
     English. "Angemeldet bleiben" beside "Passwort vergessen?" does not, and
     neither do the Persian pair, so the row is allowed to break rather than
     squeeze the two into each other. */
  flex-wrap: wrap;
  gap: 6px 12px;
}
#step-auth .den-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  cursor: pointer;
  color: var(--den-muted);
  font-size: 0.85rem;
  user-select: none;
}
#step-auth .den-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
#step-auth .den-check__box {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 6px;
  border: 1px solid var(--den-line);
  background: var(--den-field);
  display: grid;
  place-items: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
#step-auth .den-check__box::after {
  content: "";
  width: 5px;
  height: 9px;
  /* Physical sides on purpose: the tick is a rotated corner, so logical
     borders would mirror it into a backwards check in Persian and Arabic. */
  border: 2px solid var(--den-tick);
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg) scale(0);
  margin-top: -2px;
  transition: transform 0.18s var(--den-spring);
}
#step-auth .den-check input:checked + .den-check__box {
  background: linear-gradient(135deg, var(--den-accent-2), var(--den-accent));
  border-color: transparent;
}
#step-auth .den-check input:checked + .den-check__box::after { transform: rotate(45deg) scale(1); }
#step-auth .den-check input:focus-visible + .den-check__box { box-shadow: 0 0 0 3px rgb(var(--den-glow) / 0.32); }

/* The consent row on the sign-up form keeps a two-column grid instead: its
   text runs to three lines and has to wrap against the box, not beside it. */
#step-auth .consent-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 11px;
  margin: 0;
  color: var(--den-muted);
  font-size: 12px;
  line-height: 1.5;
}
#step-auth .consent-row .den-check__box { margin-top: 2px; }
#step-auth .consent-row a { color: var(--den-accent-2); font-weight: 600; }

#step-auth .forgot-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--den-accent-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
#step-auth .forgot-link:hover { color: var(--den-accent); text-decoration: underline; }

/* ── submit: a little door ────────────────────────────────────────────── */
#step-auth .den-door {
  position: relative;
  margin-top: 4px;              /* trimmed; 6px */
  min-height: 54px;             /* trimmed; 60px */
  padding-inline: 26px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  font-size: 1.02rem;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, #7c5cf0 0%, #6d28d9 54%, #4c1d95 100%);
  border: 1px solid rgba(196, 160, 255, 0.34);
  border-radius: 14px;
  cursor: pointer;
  isolation: isolate;
  box-shadow: 0 16px 30px -10px rgba(88, 28, 190, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 0.2s var(--den-out), box-shadow 0.2s ease, filter 0.2s ease;
}
#step-auth .den-door:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 22px 40px -12px rgba(88, 28, 190, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
#step-auth .den-door:active:not(:disabled) { transform: translateY(0) scale(0.99); }
#step-auth .den-door:disabled { cursor: default; }
#step-auth .den-door:focus-visible { outline: 3px solid var(--den-accent); outline-offset: 3px; }
#step-auth .den-door__label {
  position: relative;
  z-index: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
#step-auth .den-door.is-walking .den-door__label { opacity: 0.6; }

/* The door is a picture of someone walking into a doorway, so it has to read
   in the page's direction. applyTranslations() flips documentElement.dir for
   Persian and Arabic; mirrored, they walk right-to-left into a door on the
   left, which is where a reader of those languages is going. */
[dir="rtl"] #step-auth .den-door__ic { transform: scaleX(-1); }

/* the door icon: a warm-lit frame + a panel that swings open */
#step-auth .den-door__ic { position: relative; width: 62px; height: 38px; flex: none; perspective: 300px; z-index: 1; }
#step-auth .den-door__frame {
  position: absolute;
  right: 0;
  top: 2px;
  width: 28px;
  height: 34px;
  border-radius: 5px;
  overflow: hidden;
  background: linear-gradient(180deg, #1b1038, #0a0618);
  box-shadow: inset 0 0 0 1.5px rgba(196, 160, 255, 0.3);
}
#step-auth .den-door__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(62% 72% at 50% 46%, rgba(255, 214, 150, 0.95), rgba(255, 190, 110, 0) 72%);
  opacity: 0;
  transition: opacity 0.35s var(--den-out);
}
#step-auth .den-door__panel {
  position: absolute;
  right: 0;
  top: 2px;
  width: 28px;
  height: 34px;
  border-radius: 5px;
  background: linear-gradient(180deg, #e2d1ff, #c4a0ff 55%, #7c3aed);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.24), inset -6px 0 10px rgba(0, 0, 0, 0.28);
  transform-origin: right center;
  transform: rotateY(0deg);
  transition: transform 0.42s var(--den-out);
  backface-visibility: hidden;
}
#step-auth .den-door__handle {
  position: absolute;
  left: 4px;
  top: 50%;
  width: 2.5px;
  height: 10px;
  border-radius: 2px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #fff, #e6d8ff);
}
#step-auth .den-door__person {
  position: absolute;
  left: 2px;
  bottom: 2px;
  color: #fff;
  transition: transform 0.74s var(--den-out), opacity 0.3s var(--den-out) 0.36s;
}
#step-auth .den-door__person svg { display: block; overflow: visible; }

/* stickman rig — each limb pivots at its joint (fill-box top = the joint) */
#step-auth .den-leg,
#step-auth .den-arm,
#step-auth .den-shin { transform-box: fill-box; transform-origin: 50% 0; }
#step-auth .den-person__bob,
#step-auth .den-person { transform-box: fill-box; transform-origin: 50% 100%; }
#step-auth .den-leg--front { transform: rotate(11deg); }
#step-auth .den-leg--back { transform: rotate(-11deg); }
#step-auth .den-arm--front { transform: rotate(-9deg); }
#step-auth .den-arm--back { transform: rotate(9deg); }
#step-auth .den-leg--front .den-shin,
#step-auth .den-leg--back .den-shin { transform: rotate(7deg); }
#step-auth .den-person { transition: transform 0.25s var(--den-out); }

/* the walk cycle — thighs and arms swing in opposite phase, knees bend, body bobs */
#step-auth .den-door.is-walking .den-person { transform: rotate(4deg); }
#step-auth .den-door.is-walking .den-leg--front { animation: den-thigh-f 0.46s linear infinite; }
#step-auth .den-door.is-walking .den-leg--back { animation: den-thigh-b 0.46s linear infinite; }
#step-auth .den-door.is-walking .den-leg--front .den-shin { animation: den-shin-f 0.46s linear infinite; }
#step-auth .den-door.is-walking .den-leg--back .den-shin { animation: den-shin-b 0.46s linear infinite; }
#step-auth .den-door.is-walking .den-arm--front { animation: den-arm-f 0.46s linear infinite; }
#step-auth .den-door.is-walking .den-arm--back { animation: den-arm-b 0.46s linear infinite; }
#step-auth .den-door.is-walking .den-person__bob { animation: den-walk-bob 0.23s linear infinite; }
@keyframes den-thigh-f { 0%, 100% { transform: rotate(26deg); } 50% { transform: rotate(-24deg); } }
@keyframes den-thigh-b { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(26deg); } }
@keyframes den-arm-f { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(24deg); } }
@keyframes den-arm-b { 0%, 100% { transform: rotate(24deg); } 50% { transform: rotate(-24deg); } }
@keyframes den-shin-f { 0% { transform: rotate(8deg); } 25% { transform: rotate(48deg); } 55% { transform: rotate(10deg); } 100% { transform: rotate(8deg); } }
@keyframes den-shin-b { 0% { transform: rotate(34deg); } 30% { transform: rotate(6deg); } 78% { transform: rotate(44deg); } 100% { transform: rotate(34deg); } }
@keyframes den-walk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4px); } }

/* the sequence: door opens → stickman walks through → door closes */
#step-auth .den-door.is-open .den-door__panel { transform: rotateY(72deg); }
#step-auth .den-door.is-open .den-door__glow { opacity: 0.95; }
#step-auth .den-door.is-out .den-door__person { transform: translateX(36px) scale(0.72); opacity: 0; }

/* Accepted: the button goes green behind the open door while the husky
   grins, and holds there long enough to be read before the page moves on.
   Not in the original, which has no server to say yes. */
#step-auth .den-door.is-accepted {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 54%, #15803d 100%);
  border-color: rgba(134, 239, 172, 0.44);
  box-shadow: 0 16px 30px -10px rgba(21, 128, 61, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background 0.35s var(--den-out), border-color 0.35s ease, box-shadow 0.35s ease;
}
#step-auth .den-door.is-accepted .den-door__panel {
  background: linear-gradient(180deg, #bbf7d0, #4ade80 55%, #15803d);
}

/* The server refused: the door shuts, nobody went through. Not in the
   original, which has no server to refuse. */
@keyframes den-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
#step-auth .den-door.is-refused { animation: den-shake 0.42s ease; }

/* ── status ───────────────────────────────────────────────────────────── */
#step-auth .den-status { margin: 0; min-height: 0; font-size: 0.8rem; color: var(--den-muted); text-align: center; }
#step-auth .den-status:empty { display: none; }

#step-auth .error-msg {
  margin: 0;
  font-size: 0.85rem;
  color: var(--den-danger);
  text-align: center;
}

/* ── divider ──────────────────────────────────────────────────────────── */
#step-auth .auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;               /* trimmed; 15px */
  color: var(--den-faint);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
#step-auth .auth-divider::before,
#step-auth .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--den-line); }

/* ── socials ──────────────────────────────────────────────────────────
   The original offers Google and Apple as two buttons it draws itself. This
   site has only Google, and Google draws its button inside its own iframe in
   its own theme, so it cannot take the .social treatment — it is given the
   same plate to sit on instead. */
/* No plate under it. Google's iframe draws its own button, borders and all,
   so the wrapper adding a second border put a ring around a button that
   already had one. */
#step-auth .google-signin-btn-wrap {
  display: flex;
  justify-content: center;
  width: fit-content;
  margin-inline: auto;
  padding: 0;
  border: 0;
  background: none;
}

/* ── foot ─────────────────────────────────────────────────────────────── */
#step-auth .auth-switch-line {
  text-align: center;
  font-size: 0.85rem;
  color: var(--den-muted);
  margin-top: 12px;             /* trimmed; 15px */
}
#step-auth .auth-switch-line button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--den-accent-2);
  cursor: pointer;
  transition: color 0.2s ease;
}
#step-auth .auth-switch-line button:hover { color: var(--den-accent); text-decoration: underline; }

/* ── entrance ─────────────────────────────────────────────────────────
 * The husky rises, the card follows, then its rows.
 *
 * The original gates the hidden start state on html.js, set by an inline
 * script — but that only promises scripting is on, not that this page's
 * script loaded. On a sign-in page the cost of being wrong is a card stuck at
 * opacity 0 with no way to log in, so the gate here is .den-anim, which
 * js/den-auth.js adds to itself once it is running and has an is-in to follow
 * it with. No script, nothing hidden.
 */
#step-auth .den-auth.den-anim .den-stage { opacity: 0; transform: translateY(24px) scale(0.9); }
#step-auth .den-auth.den-anim .den-card { opacity: 0; transform: translateY(26px) scale(0.985); }
#step-auth .den-auth.den-anim .den-card > * { opacity: 0; transform: translateY(14px); }

#step-auth .den-auth.den-anim.is-in .den-stage {
  opacity: 1;
  transform: translate3d(var(--fox-x, 0), var(--fox-y, 0), 0);
  transition: opacity 0.6s ease, transform 0.7s var(--den-spring);
}
#step-auth .den-auth.den-anim.is-in .den-card {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease 0.08s, transform 0.7s var(--den-out) 0.08s;
}
#step-auth .den-auth.den-anim.is-in .den-card > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s var(--den-out);
}
#step-auth .den-auth.den-anim.is-in .den-card > :nth-child(2) { transition-delay: 0.16s; }
#step-auth .den-auth.den-anim.is-in .den-card > :nth-child(3) { transition-delay: 0.22s; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  #step-auth .den-card { padding: 46px 24px 20px; }   /* trimmed; 54px 26px 26px */
  #step-auth .den-stage { width: 190px; margin-bottom: -36px; }
  #step-auth .auth-header h2 { font-size: 1.9rem; }
}
/* Not in the original, which owns the whole viewport. Here the page shares
   its height with the app bar and the bottom bar, so on a short screen the
   husky gives some of his back. */
@media (max-height: 720px) {
  #step-auth .den-stage { width: 172px; margin-bottom: -32px; }
  #step-auth .den-card { padding: 44px 28px 16px; }
  #step-auth .auth-header { margin-bottom: 14px; }
  #step-auth .auth-header h2 { font-size: 1.75rem; }
  #step-auth form { gap: 11px; }
  #step-auth .den-field input { padding: 17px 16px 5px; }
  #step-auth .den-field input:focus + label,
  #step-auth .den-field input:not(:placeholder-shown) + label { height: 22px; }
  #step-auth .den-door { min-height: 50px; }
  #step-auth .auth-divider { margin: 9px 0; }
  #step-auth .auth-switch-line { margin-top: 9px; }
}

/* ── reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .den-orb,
  .den-mote,
  .den-grain,
  #step-auth .den-dog { animation: none; }
  #step-auth .den-auth.den-anim .den-stage,
  #step-auth .den-auth.den-anim .den-card,
  #step-auth .den-auth.den-anim .den-card > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* keep the core interaction, just calmer */
  #step-auth .paw { transition: transform 0.2s ease; }
  #step-auth .den-door.is-refused,
  #step-auth .den-door.is-walking .den-leg--front,
  #step-auth .den-door.is-walking .den-leg--back,
  #step-auth .den-door.is-walking .den-leg--front .den-shin,
  #step-auth .den-door.is-walking .den-leg--back .den-shin,
  #step-auth .den-door.is-walking .den-arm--front,
  #step-auth .den-door.is-walking .den-arm--back,
  #step-auth .den-door.is-walking .den-person__bob { animation: none !important; }
}