/* ==========================================================================
 * File:      auth.css
 * Location:  showcase/assets/css/auth.css
 * Project:   Memory Vault
 * Version:   1.1.0
 * Updated:   2026-10-05
 * Purpose:   Sign-in screens (login.php, setup-user.php). Loaded after
 *            showcase.css and reuses its glass card, avatar and header
 *            styles, so the login reads as the same modal the vault opens
 *            for a person. Only the bits the modal doesn't already cover
 *            live here: the centred stage, form controls and QR panel.
 *
 * Change log
 *   1.1.0  2026-10-05  Added .auth-gl, the fixed canvas the particle backdrop
 *                      draws into, with the card stacked above it.
 *   1.0.0  2026-10-04  Initial release.
 * ========================================================================== */

  .auth-body{
    min-height:100%;
    background:
      radial-gradient(90% 70% at 50% 0%, rgba(26,58,62,.5), transparent 70%),
      radial-gradient(70% 60% at 20% 100%, rgba(60,30,90,.45), transparent 70%),
      var(--void);
    overflow:auto;
  }
  /* the particle scene sits behind everything; the card floats over it */
  .auth-gl{
    position:fixed; inset:0; width:100%; height:100%; display:block;
    z-index:0; pointer-events:none;
  }
  .auth-stage{
    position:relative; z-index:1;
    min-height:100vh; min-height:100dvh;
    display:flex; align-items:center; justify-content:center;
    padding:clamp(16px,4vh,48px) clamp(16px,4vw,40px);
  }
  /* the vault's modal card, standing on its own rather than over the carousel */
  .auth-card{
    position:relative; width:min(420px,100%); max-height:none; height:auto;
    display:flex; flex-direction:column; overflow:visible;
  }
  .auth-card .modal-inner{ flex:none; }
  .auth-body-area{ margin-top:24px; display:flex; flex-direction:column; gap:14px; }

  .auth-field{ display:flex; flex-direction:column; gap:7px; }
  .auth-field span{
    font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ice-dim);
  }
  .auth-field input{
    height:46px; padding:0 14px; border-radius:10px;
    border:1.5px solid rgba(154,130,255,.4); background:rgba(12,8,26,.45);
    color:var(--ice); font:inherit; font-size:16px; letter-spacing:.03em; outline:none;
    transition:border-color .2s, box-shadow .2s;
  }
  .auth-field input:focus{ border-color:var(--violet-hi); box-shadow:0 0 20px -6px rgba(154,130,255,.65); }

  .auth-btn{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; min-height:50px; padding:0 18px; border-radius:999px; cursor:pointer;
    border:1.5px solid var(--teal-line); background:var(--glass); color:var(--ice);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    font:inherit; font-size:15px; letter-spacing:.04em;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), 0 0 28px -10px rgba(80,255,190,.55);
    transition:border-color .2s, transform .15s, box-shadow .2s;
  }
  .auth-btn:hover:not(:disabled){ border-color:var(--teal); box-shadow:inset 0 0 0 1px rgba(0,0,0,.4), 0 0 38px -8px rgba(80,255,190,.8); }
  .auth-btn:active:not(:disabled){ transform:scale(.98); }
  .auth-btn:disabled{ opacity:.6; cursor:default; }
  .auth-btn:focus-visible, .auth-link:focus-visible{ outline:1px solid var(--teal); outline-offset:3px; }
  .auth-ico{ width:19px; height:19px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

  .auth-link{
    align-self:center; border:0; background:none; cursor:pointer; padding:4px;
    color:var(--violet); font:inherit; font-size:13px; letter-spacing:.05em;
    text-decoration:underline; text-underline-offset:3px;
  }
  .auth-link:hover{ color:var(--violet-hi); }

  .auth-note{ margin:0; font-size:13px; line-height:1.55; color:var(--ice-dim); }
  .auth-error{
    margin:0; padding:11px 13px; border-radius:9px; font-size:13px; line-height:1.5;
    color:#ffd9e4; background:rgba(255,79,154,.1); border:1px solid rgba(255,79,154,.35);
  }
  .auth-ok{
    margin:0; padding:11px 13px; border-radius:9px; font-size:14px;
    color:var(--ice); background:rgba(98,230,201,.1); border:1px solid var(--teal-line);
  }
  .auth-code{
    margin:0; text-align:center; font-size:20px; letter-spacing:.3em;
    color:var(--ice); font-variant-numeric:tabular-nums;
  }

  .qr-wrap{ display:flex; align-items:center; justify-content:center; min-height:208px; }
  .qr{ border-radius:10px; padding:10px; background:#fff; box-shadow:0 0 36px -10px rgba(98,230,201,.55); }

  @media (max-width:720px){
    .auth-card{ width:100%; }
    .auth-stage{ padding:20px 16px; }
  }