/* ═══════════════════════════════════════════════════════════
   COMPONENT — AUTH MODAL  (reusable)
   Centred overlay dialog with a navy brand panel and a tabbed
   form (Sign in / Request access). Pure presentation — the
   behaviour is wired by js/components/auth-modal.js over
   js/auth-service.js. Any page can reuse this shell.
   Depends on tokens.css, buttons.css.
═══════════════════════════════════════════════════════════ */
.overlay{position:fixed;inset:0;z-index:200;background:rgba(10,22,40,.84);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .3s}
.overlay.show{display:flex;opacity:1}

.modal{width:100%;max-width:880px;background:var(--navy-deep);border:1px solid rgba(224,169,43,.28);border-radius:16px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 50px 120px rgba(0,0,0,.6);transform:translateY(20px) scale(.98);transition:transform .4s}
.overlay.show .modal{transform:none}

/* brand panel */
.m-brand{background:linear-gradient(165deg,#15315E,#0A1628);padding:50px 42px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.m-brand::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(224,169,43,.34),transparent 68%);top:-90px;right:-100px;filter:blur(22px)}
.m-brand .serif{font-size:28px;color:#fff;font-weight:700;position:relative;font-family:var(--font-display)}
.m-brand .serif .amber{color:var(--logo)}
.m-brand .mb-tag{font-size:11px;letter-spacing:4px;color:var(--gold-2);margin-top:8px;position:relative;font-weight:600}
.m-brand .mb-quote{font-family:var(--font-display);font-style:italic;font-size:23px;color:#fff;line-height:1.45;position:relative;margin-top:auto}
.m-brand .mb-quote b{color:var(--amber);font-weight:600}

/* form panel */
.m-form{padding:50px 42px;position:relative}
.m-close{position:absolute;top:22px;right:24px;background:none;border:none;color:var(--on-navy-dim);font-size:28px;cursor:pointer;line-height:1}
.m-close:hover{color:#fff}

.tabs{display:flex;gap:6px;background:rgba(228,222,210,.06);padding:5px;border-radius:9px;margin-bottom:30px}
.tab{flex:1;padding:12px;text-align:center;font-size:13.5px;font-weight:600;border-radius:7px;cursor:pointer;color:var(--on-navy-dim);transition:all .25s}
.tab.active{background:var(--amber);color:var(--navy-ink)}

.field{margin-bottom:17px}
.field label{display:block;font-size:11px;color:var(--on-navy-dim);margin-bottom:8px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600}
.field input{width:100%;padding:14px 16px;background:rgba(228,222,210,.06);border:1px solid rgba(228,222,210,.16);border-radius:8px;color:#fff;font-family:var(--font-body);font-size:14px;outline:none;transition:border .25s}
.field input:focus{border-color:var(--gold-2)}

.m-form .btn-amber{width:100%;margin-top:10px}
/* secondary text actions inside the form (forgot password, back to sign in) */
.m-link{display:block;width:100%;background:none;border:none;color:var(--on-navy-dim);font-family:var(--font-body);font-size:12.5px;cursor:pointer;margin-top:14px;text-align:center;transition:color .2s}
.m-link:hover{color:var(--amber)}
.m-note{font-size:12.5px;color:var(--on-navy-dim);text-align:center;margin-top:20px;line-height:1.5;font-weight:400}
.m-note a{color:var(--amber);text-decoration:none}

.pane{display:none}.pane.active{display:block}

/* form feedback: inline error + success / pending result blocks */
.m-msg{font-size:13px;border-radius:8px;padding:11px 14px;margin-bottom:14px;display:none;line-height:1.5}
.m-err{background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.32);color:#FCA5A5}
.m-success,.m-pending{display:none;border-radius:12px;padding:24px;text-align:center}
.m-success{background:rgba(0,168,120,.12);border:1px solid rgba(0,168,120,.30)}
.m-pending{background:rgba(255,204,0,.08);border:1px solid rgba(255,204,0,.25)}
.m-success-title,.m-pending-title{font-family:var(--font-display);font-weight:700;font-size:18px;margin-bottom:8px}
.m-success-title{color:var(--green)}
.m-pending-title{color:var(--amber)}
.m-success p,.m-pending p{font-size:13px;color:var(--on-navy-body);line-height:1.6;margin-bottom:14px}

@media(max-width:720px){.modal{grid-template-columns:1fr}.m-brand{display:none}}