/* The doors into the app — sign-in and access-denied.
 *
 * Shared so the two cannot drift apart. Deliberately separate from the panel's
 * theming: these pages are always light saffron pink, whatever theme the panel
 * is set to. Page-specific bits (the lotus, the install UI, the lock) live in
 * each template.
 */
.auth-page{
  /* Neumorphism needs the card and the page to be the SAME surface — the card
     is extruded FROM the background, not laid on top of it. Hence one base
     colour, plus a lighter and a darker version of it for the two shadows. */
  --np:#f7e3dd;            /* light saffron pink — the surface everything is */
  --np-hi:#fffaf8;         /* light comes from the top-left */
  --np-lo:#d9b8ad;         /* shadow falls to the bottom-right */
  --ink:#5e4034;
  --ink-soft:#835d50;
  --ink-faint:#a27261;
  --pink:#d94f83;
  background:var(--np);
  background-image:none;
  color:var(--ink);
  min-height:100vh;
}
.auth-page .signin{
  position:static;min-height:100vh;background:none;background-image:none;
  display:grid;place-items:center;padding:24px;
}
.auth-page .signin-card{
  width:min(400px,100%);              /* 100%, not 94vw: vw ignores .signin's
                                         padding and overflows on a phone */
  background:var(--np);
  border:none;                        /* no outline — the shadows do the work */
  border-radius:34px;
  padding:44px 34px 34px;
  text-align:center;
  box-shadow:16px 16px 32px var(--np-lo), -16px -16px 32px var(--np-hi);
}
/* Fixed px, not the panel's scalable calc(): these pages sit outside the app's
   text-size control, and there is no sidebar here to change it from. */
.auth-page .signin-card h1{margin:0 0 5px;font-size:21px;color:var(--ink);letter-spacing:-.01em}
/* DIRECT children only. This is meant for the card's own copy — as a plain
   descendant rule it also hit the <p> inside the Back button (which holds the
   per-letter spans), pushing 28px of margin under its label. Same specificity
   as the button's own rule, and auth.css loads later, so it won. */
.auth-page .signin-card > p{margin:0 0 28px;color:var(--ink-soft);font-size:12.5px}
.auth-page .signin-card > p b{color:var(--ink)}
.auth-page .signin-note{margin-top:24px;font-size:11.5px;color:var(--ink-faint);line-height:1.7}
.auth-page .signin-note b{color:var(--ink-soft)}

/* A raised neumorphic button — the same language as the card. */
.auth-page .np-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:50px;
  background:var(--np);
  border:none;border-radius:26px;
  color:var(--pink);font-size:13.5px;font-weight:700;font-family:inherit;
  cursor:pointer;
  box-shadow:6px 6px 14px var(--np-lo), -6px -6px 14px var(--np-hi);
  transition:box-shadow .18s ease, transform .18s ease;
}
.auth-page .np-btn:hover{box-shadow:8px 8px 18px var(--np-lo), -8px -8px 18px var(--np-hi)}
.auth-page .np-btn:active{          /* pressed = pushed INTO the surface */
  transform:translateY(1px);
  box-shadow:inset 5px 5px 11px var(--np-lo), inset -5px -5px 11px var(--np-hi);
}

/* An inset panel — pressed into the surface rather than raised from it. */
.auth-page .np-inset{
  border-radius:20px;background:var(--np);
  box-shadow:inset 4px 4px 9px var(--np-lo), inset -4px -4px 9px var(--np-hi);
}


/* ==========================================================================
   .auth-garden — the doors, over the Enchanted Garden video.
   ==========================================================================

   Added as a MODIFIER rather than by rewriting the block above, so this file
   still owns both languages and neither door hand-rolls its own. Add
   `auth-garden` to the body class and drop in the .bg-video / .bg-veil pair.

   ⚠️ WHY EVERY NEUMORPHIC SHADOW BELOW IS REPLACED, not tweaked.
   The comment at the top of this file is the design's premise: the card is
   extruded FROM the background, which only works because the page behind it is
   the identical #f7e3dd. Over a film that is no longer true, and an extruded
   shadow on glass reads as a smudge. So this modifier is not "the same design
   on a video" — it is a different material, and it has to be complete. Leave
   one --np shadow behind and it will look like a bug, because it is one.

   Likewise the ink: #5e4034 warm brown on violet fails contrast badly, so the
   whole ink ramp inverts. Do not reintroduce the brown here.

   The video itself is never recoloured — that is the asset's contract, and a
   video cannot be re-tinted anyway. Everything is overlay. */
.auth-garden{
  --ink:#fdf3ef;
  --ink-soft:#e7cec5;
  --ink-faint:#c6a79e;
  /* Dark base so there is no saffron flash before the poster paints. */
  background:#150a26;
}
.auth-garden .bg-video{
  position:fixed;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  display:block;
}
/* Deliberately LIGHT. Stacking darkening layers here kills the lantern-lit
   path, which is the whole reason for this clip. Only the card carries text and
   the card has its own blur and scrim, so this only has to vignette and warm. */
.auth-garden .bg-veil{
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(88% 72% at 50% 44%, rgba(18,7,32,.06) 0%, rgba(14,5,26,.58) 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(247,189,114,.14) 0%, transparent 55%);
}
.auth-garden .signin-card{
  background:rgba(42,26,64,.42);
  -webkit-backdrop-filter:blur(26px) saturate(1.25);
  backdrop-filter:blur(26px) saturate(1.25);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:
    0 34px 80px rgba(16,5,30,.58),
    inset 0 1px 0 rgba(255,255,255,.26);
}
.auth-garden .signin-card h1{color:var(--ink);text-shadow:0 1px 12px rgba(0,0,0,.45)}
.auth-garden .signin-card > p{color:var(--ink-soft)}
.auth-garden .signin-card > p b{color:var(--ink)}
.auth-garden .signin-note{color:var(--ink-faint)}
.auth-garden .signin-note b{color:var(--ink-soft)}

/* An inset well on glass is a smudge — it becomes a recessed tint instead. */
.auth-garden .np-inset{
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:none;
}
/* The raised button, in glass. */
.auth-garden .np-btn{
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.24);
  color:#ffd0e2;
  box-shadow:0 6px 18px rgba(10,4,22,.40);
}
.auth-garden .np-btn:hover{
  background:rgba(255,255,255,.15);
  box-shadow:0 8px 24px rgba(10,4,22,.50);
}
.auth-garden .np-btn:active{
  transform:translateY(1px);
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.35);
}