/* AuditAds sign-in: letterpress seal (design v4, paper option, chosen 8 Oct 2026).
   Scoped to #aa-login so the MFA, account and workspace screens are unchanged.
   Self-hosted plates only (img-src 'self'); fonts come from design-pass.css (font-src 'self').
   Plate geometry (render/seal_scene.py): desktop plate 1440x900 (@2x 2880x1800), seal centre at 31%
   height, ring radius 217 plate-px; mobile plate 390x844 (@2x 780x1688), seal centre at 23.5%,
   ring radius 123 plate-px. background-position-y equals the seal's own fraction, so the seal stays
   at that fraction of the viewport; the form is placed just below the ring with the same cover scale. */
body:has(#aa-login){margin:0;background:#dcd9d2;color:#11130f}
#aa-login{
  --plate-edge:#dcd9d2;--ink:#11130f;--label:#1d201b;--muted:#4f5550;
  --field-bg:rgba(255,255,253,.62);--field-border:#8a8c84;--field-hover:#5f625b;
  --focus:#11130f;--focus-halo:rgba(223,242,75,.5);--lime:#dff24b;--lime-hover:#d3e63c;
  --invalid:#b5302a;--alert-bg:rgba(253,236,234,.86);--alert-border:#e3b9b4;--alert-text:#8e231e;
  --radius:6px;--sans:'IBM Plex Sans',Arial,sans-serif;
  position:relative;min-height:100vh;min-height:100svh;font:400 16px/1.5 var(--sans);color:var(--ink);
  font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;isolation:isolate}
#aa-login *,#aa-login *::before,#aa-login *::after{box-sizing:border-box}
#aa-login .aa-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* The rendered sheet is the page. */
#aa-login .aa-plate{position:absolute;inset:0 0 auto 0;height:100vh;height:100svh;z-index:-1;overflow:hidden;
  background-color:var(--plate-edge);background-repeat:no-repeat;background-size:cover;background-position:50% 31%;
  background-image:url(/assets/login-paper-d-1x.webp);
  background-image:image-set(url(/assets/login-paper-d-1x.webp) 1x,url(/assets/login-paper-d-2x.webp) 2x)}
/* If the page scrolls past the plate (short screens, an error line), fade into the edge colour: no seam. */
#aa-login .aa-plate::after{content:"";position:absolute;inset:auto 0 0 0;height:96px;background:linear-gradient(rgba(220,217,210,0),var(--plate-edge))}
/* One gentle pass of light across the sheet after load; never under reduced motion. */
#aa-login .aa-sweep{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(105deg,transparent 0 38%,rgba(255,250,238,.55) 50%,transparent 62% 100%) 0 0/300% 100% no-repeat}

#aa-login .aa-auth{position:relative;width:360px;max-width:calc(100% - 48px);margin:0 auto;
  padding:calc(31vh + max(15.07vw, 24.11vh) + 52px) 0 20px;
  padding:calc(31svh + max(15.07vw, 24.11svh) + 52px) 0 20px}

#aa-login form{display:flex;flex-direction:column;gap:20px;margin:0;padding:0;border:0;background:none;box-shadow:none}
#aa-login .aa-field{display:flex;flex-direction:column;gap:8px;margin:0}
#aa-login .aa-field label{margin:0;font:600 14px/1.3 var(--sans);color:var(--label);letter-spacing:0}
#aa-login .aa-field input{display:block;width:100%;height:48px;min-height:48px;margin:0;padding:0 14px;
  border:1px solid var(--field-border);border-radius:var(--radius);background:var(--field-bg);color:var(--ink);
  font:400 16px/1.4 var(--sans);box-shadow:none;-webkit-appearance:none;appearance:none;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:border-color .15s,box-shadow .15s}
#aa-login .aa-field input:hover{border-color:var(--field-hover)}
#aa-login .aa-field input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 1px var(--focus),0 0 0 4px var(--focus-halo)}
#aa-login .aa-pw{position:relative}
#aa-login .aa-pw input{padding-right:76px}
#aa-login .aa-pw-toggle{position:absolute;top:4px;right:4px;height:40px;min-width:60px;min-height:0;margin:0;padding:0 12px;
  border:0;border-radius:4px;background:transparent;box-shadow:none;color:var(--muted);font:600 13px/1 var(--sans);cursor:pointer;transform:none}
#aa-login .aa-pw-toggle:hover{color:var(--ink);background:rgba(17,19,15,.06)}
#aa-login .aa-pw-toggle:active{transform:none;box-shadow:none}
#aa-login .aa-pw-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:0}

/* Annual Jounce subscription statement: one required box, styled to the sheet. */
#aa-login .aa-attest{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;margin:2px 0 0;padding:0}
#aa-login .aa-attest input{display:block;width:20px;height:20px;min-height:0;margin:1px 0 0;padding:0;
  border:1.5px solid #5f645d;border-radius:4px;background:var(--field-bg) center/14px 14px no-repeat;box-shadow:none;
  -webkit-appearance:none;appearance:none;cursor:pointer}
#aa-login .aa-attest input:hover{border-color:var(--ink)}
#aa-login .aa-attest input:checked{border-color:var(--ink);background-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dff24b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E")}
#aa-login .aa-attest input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#aa-login .aa-attest label{margin:0;font:400 15px/1.45 var(--sans);color:var(--label);cursor:pointer}

/* Only an error or status line ever appears here; empty, it takes no space but stays a live region. */
#aa-login .aa-alert{margin:0;padding:12px 14px;border:1px solid var(--alert-border);border-left:3px solid var(--invalid);
  border-radius:var(--radius);background:var(--alert-bg);color:var(--alert-text);font:400 14px/1.45 var(--sans)}
#aa-login .aa-alert:empty{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);border:0}

#aa-login .primary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:50px;min-height:50px;margin:4px 0 0;padding:0 20px;
  border:1px solid var(--lime);border-radius:var(--radius);background:var(--lime);color:var(--ink);font:600 15px/1 var(--sans);filter:none;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 8px 22px -14px rgba(17,19,15,.45);cursor:pointer;transition:background-color .15s,transform .05s}
#aa-login .primary:hover{background:var(--lime-hover);border-color:var(--lime-hover);filter:none}
#aa-login .primary:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 4px 12px -10px rgba(17,19,15,.45)}
#aa-login .primary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
#aa-login .primary:disabled{opacity:.65;cursor:progress;transform:none}
#aa-login .primary svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s cubic-bezier(.22,.61,.36,1)}
#aa-login .primary:hover svg{transform:translateX(3px)}

@media (prefers-reduced-motion:no-preference){
  #aa-login .aa-sweep{animation:aa-sweep 3.2s cubic-bezier(.45,0,.25,1) .6s 1 both}
  #aa-login .aa-auth{animation:aa-rise 1s cubic-bezier(.22,.61,.36,1) .2s both}
}
@media (prefers-reduced-motion:reduce){
  #aa-login *,#aa-login *::before,#aa-login *::after{animation:none!important;transition:none!important}
}
@keyframes aa-sweep{0%{opacity:1;background-position:100% 0}85%{opacity:1}100%{opacity:0;background-position:0 0}}
@keyframes aa-rise{from{opacity:0;transform:translateY(6px)}}

@media (max-width:600px){
  #aa-login .aa-plate{background-position:50% 23.5%;background-image:url(/assets/login-paper-m-1x.webp);
    background-image:image-set(url(/assets/login-paper-m-1x.webp) 1x,url(/assets/login-paper-m-2x.webp) 2x)}
  #aa-login .aa-plate::after{display:none}
  #aa-login .aa-auth{width:auto;max-width:440px;
    padding:calc(23.5vh + max(31.5vw, 14.57vh) + 36px) 24px calc(32px + env(safe-area-inset-bottom));
    padding:calc(23.5svh + max(31.5vw, 14.57svh) + 36px) 24px calc(32px + env(safe-area-inset-bottom))}
  #aa-login form{gap:18px}
}
@media (forced-colors:active){
  #aa-login .aa-attest input{appearance:auto;-webkit-appearance:auto}
  #aa-login .primary{border:2px solid ButtonText}
}