/*
 * Sign-in, forgot-password and set-password pages (compat.php auth_shell). Adam, 28 Oct 2026: only the log-in box in the
 * middle, the Denning logo above GEMS Suite, no buildings in the box (an outlined frame shaped like the D of the mark), and
 * along the foot of the page his own three buildings from the Career Fair 2026 poster, still (assets/brand/campus-three.webp —
 * ink only, coloured here). Denning indigo and gold, Montserrat for display text, light and dark. Standalone: these pages
 * load only this sheet.
 */
@font-face{font-family:"Montserrat";src:url(../fonts/montserrat-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --a-bg:#f3f2f8; --a-card:#ffffff; --a-line:#e3e0ee;
  --a-ink:#17122e; --a-muted:#5d5878; --a-field:#fafafd; --a-field-line:#d6d2e6; --a-field-hover:#bdb7d6;
  --a-accent:#302478; --a-accent-hover:#3d3190; --a-accent-ink:#ffffff; --a-focus:rgba(48,36,120,.2);
  --a-shadow:0 1px 2px rgba(23,18,46,.06),0 8px 8px -6px rgba(23,18,46,.08);
  --a-err-bg:#fdf1f0; --a-err-line:#f4c7c2; --a-err-ink:#a3271b;
  --a-ok-bg:#eef7f1; --a-ok-line:#bfe2cc; --a-ok-ink:#1d6b3c;
  /* the campuses: poster ink along the foot of the page; the box's panel */
  --a-poster:#302478; --a-poster-op:.9;
  --a-frame:rgba(48,36,120,.42); --a-frame-2:rgba(48,36,120,.16);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --a-bg:#0f0b22; --a-card:#15112a; --a-line:rgba(199,191,228,.13);
    --a-ink:#f1eff9; --a-muted:#a8a1c7; --a-field:#100c22; --a-field-line:rgba(199,191,228,.17); --a-field-hover:rgba(199,191,228,.3);
    --a-accent:#feb803; --a-accent-hover:#ffc933; --a-accent-ink:#1a153c; --a-focus:rgba(254,184,3,.22);
    --a-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    --a-err-bg:rgba(240,68,56,.1); --a-err-line:rgba(240,68,56,.28); --a-err-ink:#fda29b;
    --a-ok-bg:rgba(50,213,131,.08); --a-ok-line:rgba(50,213,131,.25); --a-ok-ink:#75e0a7;
    --a-poster:#9a91d6; --a-poster-op:.42;
    --a-frame:rgba(199,191,228,.36); --a-frame-2:rgba(199,191,228,.13);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --a-bg:#0f0b22; --a-card:#15112a; --a-line:rgba(199,191,228,.13);
  --a-ink:#f1eff9; --a-muted:#a8a1c7; --a-field:#100c22; --a-field-line:rgba(199,191,228,.17); --a-field-hover:rgba(199,191,228,.3);
  --a-accent:#feb803; --a-accent-hover:#ffc933; --a-accent-ink:#1a153c; --a-focus:rgba(254,184,3,.22);
  --a-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  --a-err-bg:rgba(240,68,56,.1); --a-err-line:rgba(240,68,56,.28); --a-err-ink:#fda29b;
  --a-ok-bg:rgba(50,213,131,.08); --a-ok-line:rgba(50,213,131,.25); --a-ok-ink:#75e0a7;
  --a-poster:#9a91d6; --a-poster-op:.42;
  --a-frame:rgba(199,191,228,.36); --a-frame-2:rgba(199,191,228,.13);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body.auth{
  margin:0;background:var(--a-bg);color:var(--a-ink);
  font:400 15px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}

/* ── the campuses along the foot of the page, as in the Career Fair poster ─────────────────────────────────────────
   Adam's own three (Adam, 28 Oct 2026: "just use the 3 buildings i gave you and keep it static"): PECHS, Bahria Town and
   Creek, side by side and still (assets/brand/campus-three.webp, ink only, ratio 4.2942:1; the page colours it). */
.auth-campus{
  --ch:clamp(190px,40vh,460px);
  position:fixed;left:0;right:0;bottom:0;height:var(--ch);pointer-events:none;opacity:var(--a-poster-op);
  background:var(--a-poster);
  -webkit-mask:url(../brand/campus-three.webp) no-repeat center bottom / auto 100%;
          mask:url(../brand/campus-three.webp) no-repeat center bottom / auto 100%;
}
@media (min-width:1500px){.auth-campus{--ch:clamp(240px,42vh,520px)}}

/* ── the box ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.auth-stage{position:relative;min-height:100%;display:grid;place-items:center;padding:32px 16px calc(32px + 6vh)}
.auth-card{
  /* drawn, not filled: the page colour inside (so the campuses never run behind the fields), a fine frame and a second
     frame a few pixels out — the D of Denning's mark: a straight side on the left, a round one on the right */
  --r:clamp(40px,7vw,64px);
  position:relative;width:100%;max-width:420px;
  background:var(--a-bg);border:1px solid var(--a-frame);border-radius:6px var(--r) var(--r) 6px;
  outline:1px solid var(--a-frame-2);outline-offset:7px;
  animation:auth-in .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes auth-in{from{opacity:.9;transform:translateY(10px);outline-offset:14px}}
/* inside the frame */
.auth-form{padding:46px 48px 38px 44px;display:flex;flex-direction:column;justify-content:center}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:18px;margin:0 0 30px}
.auth-denning{display:block;width:150px;height:auto}
.auth-denning.on-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .auth-denning.on-light{display:none}:root:not([data-theme="light"]) .auth-denning.on-dark{display:block}}
:root[data-theme="dark"] .auth-denning.on-light{display:none}
:root[data-theme="dark"] .auth-denning.on-dark{display:block}
.auth-brand .auth-lockup{padding-top:16px;border-top:1px solid var(--a-line)}
.auth-lockup{display:flex;align-items:flex-end;gap:10px;margin:0;line-height:1;color:var(--a-ink)}
.auth-gems{
  display:block;width:112px;height:24.5px;background:var(--a-ink);
  -webkit-mask:url(../brand/gems-wordmark-white.png) center/contain no-repeat;mask:url(../brand/gems-wordmark-white.png) center/contain no-repeat;
}
.auth-suite{font-family:"Montserrat",sans-serif;font-size:21px;font-weight:400;letter-spacing:.01em;color:var(--a-muted);margin-bottom:-1px}

/* forgot / set password: a short heading and one line */
.auth-head{margin:-8px 0 20px;text-align:center}
.auth-head h2{margin:0 0 6px;font-family:"Montserrat",sans-serif;font-size:18px;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.auth-head p{margin:0;color:var(--a-muted);font-size:13.5px;text-wrap:pretty}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.auth-card form{display:grid;gap:12px}
.auth-field{position:relative;display:block}
.auth-card input[type=text],.auth-card input[type=email],.auth-card input[type=password]{
  width:100%;height:48px;padding:0 15px;border-radius:11px;border:1px solid var(--a-field-line);background:var(--a-field);
  color:var(--a-ink);font:inherit;font-size:15px;outline:none;caret-color:var(--a-accent);
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.auth-card input::placeholder{color:var(--a-muted);opacity:1}
.auth-card input:hover{border-color:var(--a-field-hover)}
.auth-card input:focus{border-color:var(--a-accent);box-shadow:0 0 0 3px var(--a-focus)}
.auth-field.has-toggle input{padding-right:48px}
.auth-toggle{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:8px;
  display:grid;place-items:center;background:transparent;color:var(--a-muted);cursor:pointer;transition:color .15s ease,background-color .15s ease;
}
.auth-toggle:hover{color:var(--a-ink);background:var(--a-focus)}
.auth-toggle:focus-visible{outline:2px solid var(--a-accent);outline-offset:1px}
.auth-toggle svg{width:18px;height:18px}
.auth-toggle .eye-off{display:none}
.auth-toggle[aria-pressed="true"] .eye{display:none}
.auth-toggle[aria-pressed="true"] .eye-off{display:block}

/* the forgot / set-password forms come from the ERP's field() helper: <label class="f"><span>Label</span><input></label> */
.auth-card label.f{display:grid;gap:6px;margin:0}
.auth-card label.f>span{font-size:13px;font-weight:500;color:var(--a-muted)}

.auth-btn,.auth-card .btn.primary{
  position:relative;width:100%;height:48px;margin-top:4px;border:0;border-radius:11px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--a-accent);color:var(--a-accent-ink);font:inherit;font-family:"Montserrat",sans-serif;font-size:15px;font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:background-color .15s ease,transform .12s ease;
}
.auth-btn:hover,.auth-card .btn.primary:hover{background:var(--a-accent-hover)}
.auth-btn:active,.auth-card .btn.primary:active{transform:scale(.985)}
.auth-btn:focus-visible,.auth-card .btn.primary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--a-focus)}
.auth-btn[aria-busy="true"]{cursor:progress}
.auth-btn[aria-busy="true"] .auth-btn-label{opacity:0}
.auth-btn[aria-busy="true"]::after{
  content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;animation:auth-spin .7s linear infinite;
}
@keyframes auth-spin{to{transform:rotate(360deg)}}

.auth-links{margin:18px 0 0;text-align:center;font-size:13.5px}
.auth-links a{color:var(--a-muted);text-decoration:none;border-radius:4px}
.auth-links a:hover{color:var(--a-ink);text-decoration:underline;text-underline-offset:3px}
.auth-links a:focus-visible{outline:2px solid var(--a-accent);outline-offset:2px}

.auth-alert{border-radius:10px;padding:10px 12px;font-size:13.5px;line-height:1.45;border:1px solid}
.auth-alert.err{background:var(--a-err-bg);border-color:var(--a-err-line);color:var(--a-err-ink)}
.auth-alert.ok{background:var(--a-ok-bg);border-color:var(--a-ok-line);color:var(--a-ok-ink)}
.auth-card p.s{margin:0;color:var(--a-muted);font-size:13px}

/* ── smaller screens ─────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:420px){
  .auth-stage{padding:20px 16px calc(24px + 4vh)}
  .auth-form{padding:32px 26px 28px 24px}
  .auth-card{--r:36px;outline-offset:5px}
  .auth-gems{width:100px;height:22px}.auth-suite{font-size:19px}.auth-denning{width:136px}
}
@media (prefers-reduced-motion:reduce){
  .auth-card{animation:none}
  .auth-btn,.auth-card .btn.primary,.auth-card input,.auth-toggle{transition:none}
  .auth-btn[aria-busy="true"]::after{animation-duration:1.6s}
}