/* =========================================================
   AUTHENTICATION
   Login + Register

   The auth pages are standalone documents, so this file
   also carries the reset and control styling they need.
========================================================= */

@import url("/css/variables.css");

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =========================================================
   SHELL
========================================================= */

/* The auth pages run the dark half of the palette, with the
   form itself kept on a white card — the same dark/light
   pairing the landing page uses. */

.auth-body{
    min-height:100vh;
    font-family:var(--font-sans);
    color:var(--ink-text);
    background:var(--ink-900);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
}

/* :where() keeps these resets at zero specificity so any
   component class below can override them. */

:where(.auth-body) :where(img){
    display:block;
    max-width:100%;
}

:where(.auth-body) :where(a){
    color:inherit;
    text-decoration:none;
    transition:color var(--transition);
}

:where(.auth-body) :where(button){
    background:none;
    border:none;
    cursor:pointer;
    font:inherit;
    color:inherit;
}

:where(.auth-body) :where(ul){
    list-style:none;
}

:where(.auth-body) :where(h1,h2,h3){
    letter-spacing:var(--tracking-tight);
    line-height:1.12;
    color:var(--ink-heading);
}

:where(.auth-body) :where(p){
    color:var(--ink-text);
}

.auth-body :focus-visible{
    outline:2px solid var(--primary);
    outline-offset:3px;
    border-radius:6px;
}

/* signup.js toggles the student / evaluator field groups with
   this class, so it has to be defined here too. */

.hidden{
    display:none !important;
}

/* =========================================================
   TOP BAR
========================================================= */

/* Stays white everywhere it appears: it carries the official
   government logos, which are dark artwork on a transparent
   background and would disappear on the ink. */

.auth-navbar{
    position:sticky;
    top:0;
    z-index:var(--z-navbar);
    height:var(--navbar-height);
    padding-inline:clamp(20px,5vw,44px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-md);
    background:
        linear-gradient(
            90deg,
            #FF9933 0%,
            #FF9933 32%,
            #F2F4F8 50%,
            #138808 68%,
            #138808 100%) bottom / 100% 2px no-repeat,
        rgba(255,255,255,.94);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--border);
}

.auth-brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.auth-brand img{
    height:38px;
    width:auto;
    object-fit:contain;
}

.auth-brand div{
    display:flex;
    flex-direction:column;
    line-height:1.25;
}

.auth-brand strong{
    font-size:.9375rem;
    font-weight:700;
    color:var(--text-strong);
    letter-spacing:var(--tracking-snug);
}

.auth-brand span{
    font-size:.72rem;
    color:var(--text-muted);
}

.back-home{
    display:inline-flex;
    align-items:center;
    gap:8px;
    height:40px;
    padding:0 18px;
    border-radius:var(--radius-pill);
    border:1px solid var(--border-strong);
    background:var(--surface);
    font-size:var(--caption);
    font-weight:600;
    color:var(--text-strong);
    transition:all var(--transition);
}

.back-home:hover{
    background:var(--surface-light);
    border-color:var(--primary);
    color:var(--primary);
    transform:translateX(-2px);
}

/* =========================================================
   MAIN
========================================================= */

.auth-main{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(32px,5vw,64px) clamp(20px,5vw,44px);
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:
        radial-gradient(880px 560px at 4% 2%,rgba(37,110,255,.13),transparent 58%),
        radial-gradient(760px 520px at 96% 96%,rgba(112,84,235,.10),transparent 58%),
        var(--gradient-ink-flat);
}

.auth-main::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(150,183,255,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(150,183,255,.05) 1px,transparent 1px);
    background-size:60px 60px;
    -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 76%);
    mask-image:radial-gradient(circle at 50% 40%,#000,transparent 76%);
    pointer-events:none;
    z-index:0;
}

/* A very quiet aurora — enough to keep the ink from looking
   flat, not enough to read as a bright corner glow. */

.auth-main::after{
    content:"";
    position:absolute;
    top:-280px;
    left:-260px;
    width:640px;
    height:640px;
    border-radius:50%;
    background:radial-gradient(
        circle,rgba(56,132,255,.34),transparent 68%);
    filter:blur(150px);
    opacity:.30;
    animation:authAurora 28s ease-in-out infinite alternate;
    pointer-events:none;
    z-index:0;
}

@keyframes authAurora{
    0%{ transform:translate3d(0,0,0) scale(1); }
    100%{ transform:translate3d(70px,50px,0) scale(1.12); }
}

.auth-container{
    position:relative;
    z-index:1;
    width:100%;
    max-width:1120px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(32px,5vw,72px);
    align-items:center;
}

/* =========================================================
   LEFT — MARKETING PANEL
========================================================= */

.auth-intro{
    animation:authFadeLeft .7s var(--ease-out) both;
}

@keyframes authFadeLeft{
    from{ opacity:0; transform:translate3d(-28px,0,0); }
    to{ opacity:1; transform:none; }
}

.auth-eyebrow{
    display:inline-block;
    padding:6px 14px;
    border-radius:var(--radius-pill);
    background:var(--ink-chip);
    border:1px solid var(--ink-line);
    color:var(--ink-accent-soft);
    font-size:.6875rem;
    font-weight:700;
    letter-spacing:var(--tracking-wide);
    text-transform:uppercase;
    margin-bottom:var(--space-md);
}

.auth-intro h1{
    font-size:var(--display-1);
    line-height:1.02;
    letter-spacing:-.045em;
    margin-bottom:var(--space-sm);
    background:var(--gradient-text-ink);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.auth-intro > p{
    font-size:var(--body-lg);
    color:var(--ink-text);
    max-width:420px;
    line-height:1.65;
    margin-bottom:var(--space-xl);
}

.intro-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    max-width:420px;
}

/* Solid panels rather than glass, so they stay crisp instead
   of picking up the blur behind them. */

.intro-list > div{
    display:flex;
    align-items:center;
    gap:14px;
    padding:13px 18px;
    background:rgba(16,33,66,.78);
    border:1px solid var(--ink-line-strong);
    border-radius:var(--radius-sm);
    font-size:var(--body-sm);
    font-weight:500;
    color:var(--ink-heading);
    transition:transform var(--transition),
               background var(--transition),
               border-color var(--transition);
}

.intro-list > div:hover{
    transform:translateX(6px);
    background:rgba(22,44,88,.9);
    border-color:rgba(255,255,255,.34);
}

.intro-list i{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:var(--radius-xs);
    background:rgba(255,255,255,.10);
    border:1px solid var(--ink-line);
    color:var(--ink-accent-warm);
    font-size:.85rem;
    flex-shrink:0;
}

/* =========================================================
   RIGHT — FORM PANEL
========================================================= */

/* The light half. Everything inside it switches back to the
   light palette, since the page default is now dark. */

.auth-panel{
    background:var(--surface);
    border:1px solid rgba(255,255,255,.6);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-ink),var(--shadow-inset);
    padding:clamp(28px,3.6vw,44px);
    color:var(--text);
    animation:authFadeUp .7s var(--ease-out) .08s both;
}

.auth-panel :is(h1,h2,h3,h4){
    color:var(--text-strong);
}

.auth-panel p{
    color:var(--text-light);
}

.auth-panel label{
    color:var(--text-strong);
}

@keyframes authFadeUp{
    from{ opacity:0; transform:translate3d(0,26px,0); }
    to{ opacity:1; transform:none; }
}

.auth-panel-header{
    margin-bottom:var(--space-lg);
}

.panel-label{
    display:inline-block;
    padding:5px 12px;
    border-radius:var(--radius-pill);
    background:var(--primary-light);
    color:var(--primary);
    font-size:.6875rem;
    font-weight:700;
    letter-spacing:var(--tracking-wide);
    text-transform:uppercase;
    margin-bottom:12px;
}

.auth-panel-header h2{
    font-size:var(--heading-1);
    margin-bottom:6px;
}

.auth-panel-header p{
    font-size:var(--body-sm);
    color:var(--text-muted);
}

/* ---------- Feedback ---------- */

.auth-error,
.auth-success{
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:13px 16px;
    border-radius:var(--radius-sm);
    font-size:var(--body-sm);
    font-weight:500;
    line-height:1.55;
    margin-bottom:var(--space-md);
    border:1px solid transparent;
    animation:authFadeUp .35s var(--ease) both;
}

.auth-error{
    background:var(--danger-light);
    color:var(--danger);
    border-color:rgba(198,40,40,.2);
}

.auth-success{
    background:var(--success-light);
    color:var(--success);
    border-color:rgba(14,138,69,.2);
}

.auth-error i,
.auth-success i{
    margin-top:2px;
    flex-shrink:0;
}

/* ---------- Form ---------- */

.auth-form{
    display:flex;
    flex-direction:column;
    gap:var(--space-md);
}

.auth-form .form-group{
    margin:0;
}

.auth-form label{
    display:block;
    font-size:var(--body-sm);
    font-weight:600;
    color:var(--text-strong);
    margin-bottom:8px;
    letter-spacing:var(--tracking-snug);
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="number"],
.auth-form select{
    width:100%;
    height:var(--input-height);
    padding:0 16px;
    background:var(--surface);
    border:1px solid var(--border-strong);
    border-radius:var(--radius-sm);
    font-size:var(--body-sm);
    font-family:inherit;
    color:var(--text-strong);
    appearance:none;
    -webkit-appearance:none;
    transition:border-color var(--transition),box-shadow var(--transition);
}

.auth-form select{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7688' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    padding-right:42px;
    cursor:pointer;
}

.auth-form input::placeholder{
    color:var(--text-faint);
}

.auth-form input:hover,
.auth-form select:hover{
    border-color:var(--text-faint);
}

.auth-form input:focus,
.auth-form select:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(10,90,224,.12);
}

.input-wrap,
.input-box{
    position:relative;
    display:flex;
    align-items:center;
}

.input-wrap > i,
.input-box > i{
    position:absolute;
    left:16px;
    font-size:.9rem;
    color:var(--text-faint);
    pointer-events:none;
    transition:color var(--transition);
    z-index:1;
}

.input-wrap input,
.input-box input{
    padding-left:44px !important;
}

.input-wrap:focus-within > i,
.input-box:focus-within > i{
    color:var(--primary);
}

.password-toggle{
    position:absolute;
    right:8px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:var(--radius-xs);
    color:var(--text-faint);
    transition:all var(--transition);
    z-index:1;
}

.password-toggle:hover{
    color:var(--primary);
    background:var(--primary-light);
}

/* Leave room for the toggle so it never sits on the text */

.auth-form input[type="password"]{
    padding-right:50px;
}

.input-row,
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-sm);
}

/* Terms / consent checkbox row */

.terms{
    display:flex;
    align-items:flex-start;
    gap:10px;
    cursor:pointer;
}

.terms input[type="checkbox"]{
    width:18px;
    height:18px;
    margin-top:2px;
    accent-color:var(--primary);
    flex-shrink:0;
    cursor:pointer;
}

/* ---------- Account type chips ---------- */

.type-selector,
.login-types{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
    gap:10px;
}

.type-selector label,
.login-types label{
    margin:0;
    cursor:pointer;
    position:relative;
}

.type-selector input[type="radio"],
.login-types input[type="radio"]{
    position:absolute;
    opacity:0;
    width:0;
    height:0;
}

.type-selector label > span,
.login-types label > span{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:80px;
    padding:14px 8px;
    border:1.5px solid var(--border-strong);
    border-radius:var(--radius-sm);
    background:var(--surface);
    font-size:var(--caption);
    font-weight:600;
    color:var(--text-light);
    text-align:center;
    transition:all var(--transition);
}

.type-selector label > span i,
.login-types label > span i{
    font-size:1.15rem;
    color:var(--text-faint);
    transition:color var(--transition);
}

.type-selector label:hover > span,
.login-types label:hover > span{
    border-color:var(--primary);
    background:var(--primary-soft);
    transform:translateY(-2px);
}

.type-selector input:checked + span,
.login-types input:checked + span{
    border-color:var(--primary);
    background:var(--primary-light);
    color:var(--primary-dark);
    box-shadow:0 0 0 3px rgba(10,90,224,.1);
}

.type-selector input:checked + span i,
.login-types input:checked + span i{
    color:var(--primary);
}

/* ---------- Submit ---------- */

.auth-submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    height:var(--button-height);
    border-radius:var(--radius-pill);
    background:var(--primary);
    color:#fff;
    font-size:var(--body-sm);
    font-weight:600;
    box-shadow:var(--shadow-glow);
    transition:all var(--transition);
}

.auth-submit:hover{
    background:var(--primary-hover);
    transform:translateY(-2px);
    box-shadow:0 22px 50px -16px rgba(10,90,224,.55);
}

.auth-submit:active{
    transform:translateY(0);
}

.auth-submit:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
}

.auth-submit i{
    transition:transform var(--transition);
}

.auth-submit:hover i{
    transform:translateX(3px);
}

/* ---------- Divider + secondary ---------- */

.auth-divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin:var(--space-lg) 0;
    color:var(--text-faint);
    font-size:var(--caption);
    font-weight:600;
}

.auth-divider::before,
.auth-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--border);
}

.secondary-auth-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    height:var(--button-height);
    border-radius:var(--radius-pill);
    border:1px solid var(--border-strong);
    background:var(--surface);
    font-size:var(--body-sm);
    font-weight:600;
    color:var(--text-strong);
    transition:all var(--transition);
}

.secondary-auth-button:hover{
    background:var(--surface-light);
    border-color:var(--text-faint);
    transform:translateY(-2px);
}

.auth-bottom{
    margin-top:var(--space-md);
    text-align:center;
}

.auth-bottom a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:var(--caption);
    font-weight:600;
    color:var(--text-muted);
}

.auth-bottom a:hover{
    color:var(--primary);
}

.terms,
.form-note,
.field-note{
    font-size:var(--caption);
    color:var(--text-muted);
    line-height:1.55;
}

.terms a{
    color:var(--primary);
    font-weight:600;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:980px){

    .auth-container{
        grid-template-columns:1fr;
        max-width:560px;
        gap:var(--space-xl);
    }

    .auth-intro{
        text-align:center;
    }

    .auth-intro > p{
        margin-inline:auto;
    }

    .intro-list{
        margin-inline:auto;
        width:100%;
    }

    .intro-list > div:hover{
        transform:none;
    }
}

@media (max-width:560px){

    .auth-navbar{
        padding-inline:20px;
    }

    /* The wide ministry-logo strip plus the brand text and the Home
       button do not fit on a phone, so drop the brand wording (the
       logo already carries it) and trim the logo a little. */

    .auth-brand div{
        display:none;
    }

    .auth-brand img{
        height:30px;
    }

    .back-home{
        padding:0 14px;
        flex-shrink:0;
    }

    .auth-panel{
        padding:24px 20px;
        border-radius:var(--radius-lg);
    }

    .input-row,
    .form-grid{
        grid-template-columns:1fr;
    }

    .intro-list{
        display:none;
    }
}

@media (prefers-reduced-motion:reduce){

    .auth-intro,
    .auth-panel,
    .auth-error,
    .auth-success{
        animation:none;
    }
}