/* auth-ui.css — login overlay.
   Themed: every colour resolves against the active theme, with the original
   violet/lime literals as fallbacks. See the token bridge below. */
:root{
  /* ── Theme bridge ───────────────────────────────────────────────────────────
     The --a-* layer is no longer a palette, it is a mapping. Each token reads
     the active theme's --is-* value (/assets/css/theme-{theme}.css, chosen in
     app-config.php and linked by head-links.php) and falls back to the original
     violime literal.

     The fallback is not decoration. login-overlay.php calls itself a drop-in
     that works on ANY page, and plenty of pages never load a theme — on those
     this file must still render exactly as it did before. var() fallbacks give
     that for free: no theme, no change.

     Notes on the ones that are not a straight rename:

       --a-lime-2  a BRIGHTER lime, not the theme's --is-lime-soft (which is a
                   pale wash in light themes and a dark olive in onyx) — mixed
                   from --a-lime so it tracks the theme instead.
       --a-danger  semantic colours live in the --cz-* namespace, which all six
                   themes now publish. (They briefly disagreed, some using
                   --bs-*; that was unified in the theme files.)
       fonts       --is-display/body/mono/ease are declared by violime and by
                   adm-head.css, which head-links.php loads before the theme —
                   the other five themes override colour only. The literal
                   fallbacks make this file correct either way, so it does not
                   depend on adm-head.css being present.
     ───────────────────────────────────────────────────────────────────────── */
  --a-ink:      var(--is-ink, #202035);
  --a-ink-soft: var(--is-ink-soft, #5b5876);
  --a-violet:   var(--is-violet, #4f3496);
  --a-violet-2: var(--is-violet-2, #43297f);
  --a-deep:     var(--is-violet-deep, #221250);
  --a-lime:     var(--is-lime, #d3f242);
  --a-lime-2:   color-mix(in srgb, var(--a-lime) 76%, #fff);
  --a-paper:    var(--is-paper, #fbfaff);

  /* Raised surfaces INSIDE the body panel — inputs, the ghost button, the OTP
     boxes. These were #fff, which is right on a light card and wrong on a dark
     one. violime declares no --is-surface, so it lands on #fff and looks
     untouched; dusk and onyx supply their own and the controls follow the card
     down instead of glowing white on top of it. */
  --a-surface:  var(--is-surface, #fff);

  --a-line:     var(--is-line, #ddd8ef);
  --a-danger:   var(--cz-danger, #e64569);
  --a-warning:  var(--cz-warning, #b77b00);

  --a-disp: var(--is-display, 'Bricolage Grotesque', system-ui, sans-serif);
  --a-body: var(--is-body, 'Instrument Sans', system-ui, sans-serif);
  --a-mono: var(--is-mono, 'Space Mono', ui-monospace, monospace);
  --a-ease: var(--is-ease, cubic-bezier(.22,1.15,.32,1));
}

/* ---------- veil ---------- */
.authveil{position:fixed; inset:0; z-index:1080; display:grid; place-items:center; padding:24px;
  background:color-mix(in srgb, var(--a-deep) 62%, transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .28s ease;}
.authveil[hidden]{display:none}
.authveil.is-in{opacity:1}
body.auth-shell .authveil{opacity:1}                 /* shell pages: visible even pre-JS */
body.auth-locked{overflow:hidden}

/* ---------- card ---------- */
.authcard{width:min(860px,100%); max-height:min(92vh,640px); display:grid; grid-template-columns:300px 1fr;
  background:var(--a-paper); border-radius:22px; overflow:hidden;
  box-shadow:0 60px 120px -30px rgba(12,5,40,.65),
             0 0 0 1px color-mix(in srgb, var(--a-ink) 6%, transparent);
  transform:translateY(26px) scale(.965); transition:transform .5s var(--a-ease);}
.authveil.is-in .authcard, body.auth-shell .authcard{transform:none}
.authcard.shake{animation:a-shake .4s}
@keyframes a-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ---------- brand panel ----------
   Deliberately dark in ALL SIX themes, so its white text and rgba(255,255,255,…)
   labels stay correct without a light-mode variant. --is-violet-deep is the one
   token that is dark in every theme — the same property minimenu.php relies on
   for --hb-ink. Do not swap this ground for --a-paper: under dusk/onyx that
   would be right, and under the four light themes the panel would go pale and
   the white type would vanish. */
.auth-brand{position:relative; display:flex; flex-direction:column; justify-content:space-between;
  padding:26px 22px; color:#fff; overflow:hidden;
  background:
    radial-gradient(520px 260px at 115% -8%, color-mix(in srgb, var(--a-lime) 30%, transparent), transparent 62%),
    radial-gradient(420px 300px at -20% 110%, color-mix(in srgb, var(--a-violet) 55%, transparent), transparent 60%),
    linear-gradient(160deg, var(--a-violet) 0%, var(--a-deep) 78%);}
.auth-brand::before{content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 42px),
             repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 42px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 78%);}
.auth-scan{position:absolute; left:0; right:0; height:90px; top:-25%; pointer-events:none;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--a-lime) 16%, transparent), transparent);
  animation:a-scan 6.5s linear infinite;}
@keyframes a-scan{to{top:120%}}

.auth-brand-top{position:relative; display:flex; align-items:center; gap:9px}
.auth-logo{height:24px}
.auth-led{width:8px; height:8px; border-radius:50%; background:var(--a-lime);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--a-lime) 70%, transparent); animation:a-led 2.2s infinite;}
@keyframes a-led{
  70%{box-shadow:0 0 0 9px color-mix(in srgb, var(--a-lime) 0%, transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--a-lime) 0%, transparent)}}
.auth-badge{font:700 10px/1 var(--a-mono); letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.85)}

.auth-brand-mid{position:relative}
.auth-vertical{position:absolute; left:-2px; top:-6px; writing-mode:vertical-rl; transform:rotate(180deg);
  font:400 10px/1 var(--a-mono); letter-spacing:.5em; text-transform:uppercase; color:rgba(255,255,255,.38);}
.auth-display{margin:0 0 0 26px; font-family:var(--a-disp); font-weight:800;
  font-size:clamp(38px,4.2vw,50px); line-height:.95; letter-spacing:-.02em;}
.auth-display em{font-style:normal; color:var(--a-lime)}

.auth-brand-bottom{position:relative; font-family:var(--a-mono)}
.auth-clock{font-size:26px; font-weight:700; letter-spacing:.06em; color:var(--a-lime)}
.auth-date{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-top:4px}
.auth-tls{display:flex; align-items:center; gap:7px; margin-top:16px; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55);}
.auth-tls svg{width:12px; height:12px; color:var(--a-lime)}

/* ---------- body panel ----------
   This half DOES follow the theme: --a-paper as the ground, --a-ink for type,
   --a-surface for the raised controls. Under dusk and onyx the form goes dark
   with the rest of the system. */
.auth-body{position:relative; padding:34px 38px 26px; display:flex; flex-direction:column; overflow-y:auto}
.auth-close{position:absolute; top:16px; right:16px; width:38px; height:38px; border:1px solid var(--a-line);
  background:var(--a-surface); border-radius:12px; display:grid; place-items:center; cursor:pointer;
  color:var(--a-ink-soft); transition:.25s;}
.auth-close svg{width:16px; height:16px}
.auth-close:hover{border-color:var(--a-violet); color:var(--a-violet); transform:rotate(90deg)}

.auth-kicker{font:700 10px/1 var(--a-mono); letter-spacing:.3em; text-transform:uppercase; color:var(--a-violet); margin:0 0 10px}
.auth-head h1{font-family:var(--a-disp); font-weight:800; font-size:clamp(26px,3vw,34px);
  letter-spacing:-.02em; color:var(--a-ink); margin:0 0 8px;}
.auth-sub{margin:0 0 22px; color:var(--a-ink-soft); font-size:14.5px; line-height:1.55; max-width:42ch}

/* Mixed against the card rather than pinned to a pink literal, so the alert
   stays legible on a dark card instead of flashing a light-mode pink panel. */
.auth-alert{background:color-mix(in srgb, var(--a-danger) 12%, var(--a-paper));
  border:1px solid color-mix(in srgb, var(--a-danger) 34%, var(--a-paper));
  color:color-mix(in srgb, var(--a-danger) 75%, var(--a-ink)); padding:11px 14px;
  border-radius:12px; font-size:13.5px; margin-bottom:18px; animation:a-shake .4s;}

.auth-field{margin-bottom:16px}
.auth-label{display:block; font:700 10.5px/1 var(--a-mono); letter-spacing:.22em;
  text-transform:uppercase; color:var(--a-ink-soft); margin:0 0 7px;}
.auth-control{position:relative}
.auth-input{width:100%; height:52px; padding:0 15px; border:1.5px solid var(--a-line); border-radius:13px;
  background:var(--a-surface); font:500 15.5px var(--a-body); color:var(--a-ink); outline:none;
  transition:border-color .2s, box-shadow .25s;}
.auth-control .auth-input{padding-right:50px}
.auth-input:focus{border-color:var(--a-violet); box-shadow:0 0 0 4px color-mix(in srgb, var(--a-violet) 13%, transparent)}
.auth-input.is-bad{border-color:var(--a-danger); box-shadow:0 0 0 4px color-mix(in srgb, var(--a-danger) 12%, transparent)}
.auth-peek{position:absolute; right:9px; top:50%; transform:translateY(-50%); width:36px; height:36px;
  border:0; background:transparent; border-radius:10px; color:var(--a-ink-soft); cursor:pointer;
  display:grid; place-items:center; transition:.2s;}
.auth-peek svg{width:20px; height:20px}
.auth-peek:hover{color:var(--a-violet); background:color-mix(in srgb, var(--a-violet) 10%, var(--a-surface))}
.auth-peek .i-eye-off{display:none}
.auth-peek.on .i-eye{display:none}
.auth-peek.on .i-eye-off{display:block}
.auth-caps{font-size:12px; color:var(--a-warning); margin:6px 2px 0}

/* ---------- buttons ---------- */
.auth-actions{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px}
.auth-btn{position:relative; height:54px; border-radius:14px; font:600 15px var(--a-body); cursor:pointer;
  border:1.5px solid transparent; overflow:hidden;
  transition:transform .18s var(--a-ease), box-shadow .2s, background .2s;}
.auth-btn:active{transform:scale(.975)}
.auth-btn[disabled]{opacity:.65; cursor:wait}
.auth-btn-primary{background:var(--a-violet); color:#fff;
  box-shadow:0 10px 24px -10px color-mix(in srgb, var(--a-violet) 70%, transparent)}
.auth-btn-primary::after{content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .6s;}
.auth-btn-primary:hover{background:var(--a-violet-2);
  box-shadow:0 14px 30px -10px color-mix(in srgb, var(--a-violet) 85%, transparent)}
.auth-btn-primary:hover::after{transform:translateX(120%)}
.auth-btn-ghost{background:var(--a-surface); border-color:var(--a-line); color:var(--a-violet)}
.auth-btn-ghost:hover{border-color:var(--a-violet); background:color-mix(in srgb, var(--a-violet) 8%, var(--a-surface))}
.auth-btn-spin{display:inline-block; width:16px; height:16px; margin-left:9px; vertical-align:-3px;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%;
  animation:a-rot .7s linear infinite;}
@keyframes a-rot{to{transform:rotate(1turn)}}

/* success state */
.authveil.is-done .authcard{box-shadow:0 0 0 2px var(--a-lime),
  0 30px 80px -20px color-mix(in srgb, var(--a-lime) 50%, transparent)}
.authveil.is-done .auth-btn-primary{
  background:linear-gradient(120deg, color-mix(in srgb, var(--a-lime) 62%, var(--a-ink)), var(--a-lime));
  color:var(--a-deep)}

/* ---------- OTP ---------- */
.auth-otp{margin-top:20px; padding-top:20px; border-top:1px dashed var(--a-line); text-align:center}
.auth-otp-hint{color:var(--a-ink-soft); font-size:14px; margin:0}
.auth-otp-boxes{display:flex; gap:14px; justify-content:center; margin:22px 0 12px}
.auth-otp-boxes input{width:64px; height:76px; border:1.5px solid var(--a-line); border-radius:14px;
  background:var(--a-surface); text-align:center; font:700 30px var(--a-mono); color:var(--a-ink); outline:none;
  box-shadow:inset 0 -3px 0 var(--a-line); transition:.2s;}
.auth-otp-boxes input:focus{border-color:var(--a-violet);
  box-shadow:inset 0 -3px 0 var(--a-violet), 0 0 0 4px color-mix(in srgb, var(--a-violet) 12%, transparent);}
.auth-otp-boxes input.filled{border-color:color-mix(in srgb, var(--a-lime) 70%, var(--a-ink-soft));
  background:color-mix(in srgb, var(--a-lime) 18%, var(--a-surface));
  box-shadow:inset 0 -3px 0 var(--a-lime); animation:a-pop .25s var(--a-ease);}
@keyframes a-pop{0%{transform:scale(.85)}100%{transform:scale(1)}}
.auth-otp-row{display:flex; justify-content:space-between; padding:0 4px}
.auth-link{background:none; border:0; color:var(--a-violet); font:600 13px var(--a-body);
  cursor:pointer; padding:6px 2px; border-bottom:1px solid transparent; transition:.2s;}
.auth-link:hover{border-color:var(--a-violet)}
.auth-link[disabled]{opacity:.45; cursor:default; border-color:transparent}

.auth-foot{margin-top:auto; padding-top:22px; display:flex; justify-content:space-between;
  font-size:12px; color:var(--a-ink-soft);}
.auth-foot a{color:var(--a-violet)}

/* ---------- mobile: bottom sheet ---------- */
@media (max-width:680px){
  .authveil{padding:0; place-items:end stretch}
  .authcard{grid-template-columns:1fr; border-radius:26px 26px 0 0; max-height:94dvh; transform:translateY(100%)}
  .authveil.is-in .authcard{transform:none}
  .auth-brand{flex-direction:row; align-items:center; padding:16px 20px 12px; gap:10px}
  .auth-brand::before, .auth-vertical, .auth-display, .auth-date, .auth-scan{display:none}
  .auth-brand::after{content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
    width:44px; height:4px; border-radius:99px; background:rgba(255,255,255,.35);}
  .auth-brand-bottom{margin-left:auto}
  .auth-clock{font-size:14px}
  .auth-tls{display:none}
  .auth-body{padding:24px 22px calc(22px + env(safe-area-inset-bottom))}
  .auth-actions{grid-template-columns:1fr}
  .auth-otp-boxes input{width:58px; height:68px}
}

@media (prefers-reduced-motion:reduce){
  .authveil, .authcard, .auth-scan, .auth-led, .auth-alert, .authcard.shake{animation:none !important; transition:none !important}
}