/* Sign-in pages: login, forgot password, set password, 2FA code.
   Layout from the user's mockup (2026-09-17): a brand panel with soft geometric
   shapes on the left and the form on the right. Colours per the user's follow-up:
   black, green and white.
   Restored 2026-09-25 at the user's request. A redesign on 2026-09-21 had flattened
   this to a plain white card and dropped the shapes, the split background and the
   serif; this is the mockup again, with the accent now configurable (see below). These pages don't load app.css; the markup shell is
   views/partials/auth_head.ejs + auth_foot.ejs.
   Fonts: Fraunces and Archivo (SIL Open Font License), served from ../fonts. */

@font-face{
    font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/fraunces-600-latin.woff2') format('woff2');
}
@font-face{
    font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('../fonts/archivo-latin.woff2') format('woff2');
}

:root{
    --au-black: #070a08;
    --au-panel: #0c110e;
    /* The accent follows Settings → Organization: auth_head.ejs sets --au-brand on
       :root after this file loads, and the default it passes is #16a34a — the logo
       green — so an unconfigured install renders the mockup exactly. The bright and
       dark greens stay literal: they are chosen to read against the black panel
       rather than derived from the accent. */
    --au-green: var(--au-brand, #16a34a);
    --au-green-dark: #15803d;
    --au-green-bright: #4ade80;
    --au-ink: #0a0a0a;
    --au-text: #27272a;
    --au-muted: #5b5b63;
    --au-line: #e4e4e7;
    --au-line-strong: #d4d4d8;
    --au-soft: #f4f7f5;
    --au-focus-ring: rgba(22, 163, 74, .16);
    --au-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --au-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

body.auth{
    position: relative;
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    padding: 48px 32px;
    overflow-x: hidden;
    background: linear-gradient(90deg, var(--au-black) 0 50%, var(--au-soft) 50% 100%);
    font-family: var(--au-sans); color: var(--au-text);
    -webkit-font-smoothing: antialiased;
}

/* Page decoration: green glow on the dark half, faint rings and dots on the light half */
.auth-page-deco{ position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.auth-page-deco i{ position: absolute; display: block; border-radius: 50%; }
.auth-page-deco .p-glow{
    left: -220px; top: -220px; width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(34, 197, 94, .20), transparent 65%);
}
.auth-page-deco .p-disc{ width: 760px; height: 760px; right: -260px; top: -300px; background: #eaf2ec; }
.auth-page-deco .p-ring{ width: 640px; height: 640px; right: 40px; bottom: -420px; border: 70px solid #e9efea; }
.auth-page-deco .p-dots{
    right: 70px; bottom: 60px; width: 160px; height: 160px; border-radius: 0;
    background-image: radial-gradient(circle, #cfdcd3 1.6px, transparent 1.9px);
    background-size: 22px 22px;
}

/* ── Card: two halves meeting at the centre of the page ── */
.auth-card{
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr 1fr;
    width: min(1180px, 100%);
    min-height: min(600px, calc(100vh - 96px));
}

/* ── Left: brand panel ── */
.auth-brand{
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
    padding: 56px 44px;
    border: 1px solid rgba(255, 255, 255, .14); border-right: 0;
    border-radius: 28px 0 0 28px;
    background:
        radial-gradient(520px 380px at 12% 0%, rgba(34, 197, 94, .22), transparent 70%),
        radial-gradient(480px 420px at 100% 100%, rgba(34, 197, 94, .20), transparent 70%),
        var(--au-panel);
    color: #fff;
}
/* No max-width: the side padding above sets the measure. The headline is two
   fixed phrases, and at full size the longer one needs ~491px of the 502px the
   panel leaves — capping the box narrower than that would wrap it. */
.auth-brand-text{ position: relative; z-index: 1; }
.auth-brand h1{
    font-family: var(--au-serif); font-weight: 600;
    font-size: clamp(34px, 3.9vw, 56px); line-height: 1.08; letter-spacing: -.015em;
}
/* One phrase per line. The two lines are long and close in length, so leaving
   the break to wrapping would split a phrase in the middle at some widths. */
.auth-brand h1 span, .auth-brand h1 em{ display: block; }
.auth-brand h1 em{ font-style: normal; color: var(--au-green-bright); }
.auth-brand p{ margin-top: 18px; max-width: 300px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .72); }

/* Phone-only sign-in heading, shown by the 768px block at the end of this file.
   From 7ee3e7f (Karthik's phone layout) and kept through the 2026-09-25 design
   restore — login.ejs emits .auth-mhead unconditionally, so without this rule
   the phone heading would also show on desktop. */
.auth-mhead{ display: none; }

.auth-shapes{ position: absolute; inset: 0; pointer-events: none; }
.auth-shapes i{ position: absolute; display: block; }
.auth-shapes .s-dots{
    width: 98px; height: 56px;
    background-image: radial-gradient(circle, rgba(255,255,255,.24) 1.5px, transparent 1.8px);
    background-size: 14px 14px;
}
.auth-shapes .s-dots.top{ left: 7%; top: 8%; }
.auth-shapes .s-dots.bottom{ left: 7%; top: 79%; }
.auth-shapes .s-half{ left: 16%; top: 7%; width: 52px; height: 26px; border-radius: 52px 52px 0 0; background: var(--au-green-bright); }
.auth-shapes .s-pill{ top: 8%; width: 26px; border-radius: 20px; }
.auth-shapes .s-pill.a{ left: 27%; height: 92px; margin-top: 18px; background: rgba(74, 222, 128, .30); }
.auth-shapes .s-pill.b{ left: 32.5%; height: 122px; background: rgba(255, 255, 255, .12); }
.auth-shapes .s-ring{ left: 44%; top: 11%; width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); }
.auth-shapes .s-ring::after{
    content: ""; position: absolute; left: 2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%;
    background: var(--au-green-bright); box-shadow: 0 0 12px rgba(74, 222, 128, .9);
}
.auth-shapes .s-spark{ left: 53%; top: 10%; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; }
.auth-shapes .s-ball{
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #dcfce7 0%, #4ade80 45%, #15803d 100%);
    box-shadow: 0 6px 18px rgba(34, 197, 94, .35);
}
.auth-shapes .s-ball.big{ left: 9%; top: 71%; width: 30px; height: 30px; }
.auth-shapes .s-ball.small{ left: 88%; top: 80%; width: 22px; height: 22px; }
.auth-shapes .s-x{ left: 27%; top: 91%; width: 12px; height: 12px; }
.auth-shapes .s-x::before, .auth-shapes .s-x::after{
    content: ""; position: absolute; left: 5px; top: -1px; width: 2px; height: 14px; background: rgba(255,255,255,.75); border-radius: 1px;
}
.auth-shapes .s-x::before{ transform: rotate(45deg); }
.auth-shapes .s-x::after{ transform: rotate(-45deg); }
.auth-shapes .s-arc{
    left: 66%; bottom: -150px; width: 240px; height: 240px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.28); border-top-color: transparent;
    transform: rotate(180deg);
}
.auth-shapes .s-sun{
    left: calc(66% + 45px); bottom: -75px; width: 150px; height: 150px; border-radius: 50%;
    background: linear-gradient(180deg, var(--au-green-bright) 0%, var(--au-green-dark) 75%);
    box-shadow: 0 0 70px rgba(34, 197, 94, .45);
}

/* ── Right: form panel ── */
.auth-panel{
    display: flex; align-items: center; justify-content: center;
    padding: 48px 40px;
    background: #fff;
    border-radius: 0 28px 28px 0;
    box-shadow: 40px 40px 90px -30px rgba(10, 30, 18, .18);
}
.auth-form{ width: 100%; max-width: 360px; }

/* No tile: the logo sits straight on the card. rohan-logo.svg carries no
   background of its own (2026-09-25, user request), so a white box with a
   border and a shadow around it would just be a frame around nothing. */
.auth-logo{
    width: 76px; height: 76px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
}
.auth-logo img{ width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.auth-logo span{ font-family: var(--au-serif); font-size: 22px; color: var(--au-ink); }
.auth-logo span::after{ content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 2px; border-radius: 50%; background: var(--au-green); vertical-align: baseline; }

.auth-title{
    margin: 20px 0 24px; text-align: center;
    font-family: var(--au-serif); font-weight: 600;
    font-size: 32px; line-height: 1.15; letter-spacing: -.01em; color: var(--au-ink);
}
.auth-step{ margin-top: 18px; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--au-green); }
.auth-step + .auth-title{ margin-top: 4px; }
.auth-sub{ margin: -12px 0 22px; text-align: center; font-size: 14px; line-height: 1.55; color: var(--au-muted); }
.auth-sub strong{ color: var(--au-ink); font-weight: 600; }

.au-group{ margin-bottom: 16px; }
.au-label{ display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 500; color: var(--au-muted); }

.au-field{ position: relative; }
.au-field > svg{
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: #3f3f46; pointer-events: none;
}
.au-input{
    width: 100%; height: 46px; padding: 0 14px;
    background: #fff; border: 1px solid var(--au-line); border-radius: 10px;
    font: inherit; font-size: 15px; color: var(--au-ink);
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.au-field > svg ~ .au-input{ padding-left: 44px; }
.au-input::placeholder{ color: #a1a1aa; }
.au-input:hover{ border-color: var(--au-line-strong); }
.au-input:focus{ border-color: var(--au-green); box-shadow: 0 0 0 4px var(--au-focus-ring); }
.au-field.has-toggle .au-input{ padding-right: 48px; }
.au-toggle{
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: 8px; color: #3f3f46; cursor: pointer;
}
.au-toggle:hover{ background: #f4f4f5; color: var(--au-ink); }
.au-toggle svg{ width: 18px; height: 18px; }

.au-check{
    display: flex; align-items: center; justify-content: center; gap: 9px;
    margin: 18px 0 12px; font-size: 14px; color: var(--au-text); cursor: pointer; user-select: none;
}
.au-check input{ width: 17px; height: 17px; margin: 0; accent-color: var(--au-green); cursor: pointer; }

/* Wrapper for "Remember me" + "Reset password" (7ee3e7f). display:contents keeps
   it out of layout entirely, so desktop and tablet are unchanged; the phone block
   below flexes it into one row. */
.au-meta-row{ display: contents; }

.au-links{ text-align: center; margin-bottom: 18px; font-size: 14px; color: var(--au-muted); }
.au-links + .au-links{ margin-top: -10px; }
.au-link{ font-weight: 600; color: var(--au-ink); text-decoration: none; transition: color .15s; }
.au-link:hover{ color: var(--au-green); }
.au-link.muted{ font-weight: 500; color: var(--au-muted); }

.au-btn{
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 48px; margin-top: 4px;
    background: var(--au-green); border: 0; border-radius: 10px;
    box-shadow: 0 12px 26px -12px rgba(22, 163, 74, .65), inset 0 1px 0 rgba(255,255,255,.18);
    font: inherit; font-size: 16px; font-weight: 600; color: #fff;
    text-decoration: none; cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .05s;
}
.au-btn:hover{ background: var(--au-green-dark); box-shadow: 0 14px 30px -12px rgba(22, 163, 74, .75), inset 0 1px 0 rgba(255,255,255,.18); }
.au-btn:active{ transform: translateY(1px); }
.au-btn:focus-visible{ outline: 2px solid var(--au-ink); outline-offset: 2px; }
.au-btn:disabled{ opacity: .6; cursor: not-allowed; }
.au-btn.secondary{ background: #fff; color: var(--au-ink); border: 1px solid var(--au-line); box-shadow: none; }
.au-btn.secondary:hover{ background: #fafafa; border-color: var(--au-line-strong); }

.au-msg{ margin-bottom: 16px; padding: 10px 12px; border: 1px solid; border-radius: 10px; font-size: 13.5px; line-height: 1.45; }
.au-msg.err{ background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.au-msg.info{ background: #f4f4f5; border-color: var(--au-line); color: var(--au-text); }
.au-msg.ok{ background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.au-hint{ margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--au-muted); }
.au-msg, .auth-sub strong{ overflow-wrap: anywhere; }
.auth-form form + .au-links{ margin-top: 20px; }
button.au-link{ padding: 0; background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
button.au-link:disabled{ color: #a1a1aa; cursor: not-allowed; }

/* Six single-digit code boxes (2FA and password-reset OTP) */
.au-code{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.au-code input{
    width: 100%; height: 52px; text-align: center; font-variant-numeric: tabular-nums;
    background: #fff; border: 1px solid var(--au-line); border-radius: 10px;
    font: inherit; font-size: 20px; font-weight: 600; color: var(--au-ink); outline: none;
}
.au-code input:focus{ border-color: var(--au-green); box-shadow: 0 0 0 4px var(--au-focus-ring); }

/* Dev-only quick test login */
.au-test{ margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--au-line); }
.au-test-title{ margin-bottom: 10px; font-size: 13px; color: var(--au-muted); text-align: center; }
.au-test-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.au-test-btn{
    width: 100%; min-height: 44px; padding: 7px 10px;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
    background: #fff; border: 1px solid var(--au-line); border-radius: 10px;
    font: inherit; font-size: 13px; font-weight: 500; color: var(--au-ink); text-align: left; cursor: pointer;
}
.au-test-btn:hover{ border-color: var(--au-green); }
.au-test-btn small{ font-size: 12px; font-weight: 400; color: var(--au-muted); }

/* ── Tablet and phone: panels stack on a black page ── */
@media (max-width: 900px){
    body.auth{ align-items: flex-start; padding: 20px 14px; background: var(--au-black); }
    .auth-page-deco .p-disc, .auth-page-deco .p-ring, .auth-page-deco .p-dots{ display: none; }
    .auth-card{ grid-template-columns: 1fr; width: min(520px, 100%); min-height: 0; }
    .auth-brand{
        min-height: 250px; padding: 28px 26px 28px; justify-content: flex-end;
        border: 1px solid rgba(255,255,255,.14); border-bottom: 0; border-radius: 22px 22px 0 0;
    }
    .auth-brand-text{ max-width: 62%; }
    .auth-brand h1{ font-size: 31px; }
    .auth-brand p{ margin-top: 10px; font-size: 14px; }
    /* Keep only the shapes that sit clear of the headline */
    .auth-shapes .s-pill, .auth-shapes .s-half, .auth-shapes .s-dots.bottom,
    .auth-shapes .s-ball.big, .auth-shapes .s-x{ display: none; }
    .auth-shapes .s-dots.top{ left: 26px; top: 26px; }
    .auth-shapes .s-ring{ left: auto; right: 64px; top: 30px; }
    .auth-shapes .s-spark{ left: auto; right: 46px; top: 26px; }
    .auth-shapes .s-arc{ left: auto; right: -60px; bottom: -150px; width: 210px; height: 210px; }
    .auth-shapes .s-sun{ left: auto; right: -14px; bottom: -70px; width: 130px; height: 130px; }
    .auth-shapes .s-ball.small{ left: auto; right: 118px; top: auto; bottom: 34px; }
    .auth-panel{ padding: 30px 22px 34px; border-radius: 0 0 22px 22px; box-shadow: none; }
    .auth-title{ font-size: 25px; }
    .au-input{ height: 48px; font-size: 16px; }
}
@media (max-width: 380px){
    .auth-brand-text{ max-width: 100%; }
    .auth-shapes .s-ball.small{ display: none; }
}

/* ── Phone only (≤768px, the app's mobile breakpoint): a full-screen, app-style sign-in
   instead of a floating card. From 7ee3e7f, re-applied on top of the restored 2026-09-17
   design — the decorative layer did not exist when it was written, so hiding
   .auth-page-deco is new here. Kept separate from the 900px block above so tablet
   layout is unchanged. ── */
@media (max-width: 768px){
    /* Phone: the upstream hero fills the top of the screen and the form rises over it
       as a white sheet, matching the app-style mockup. */
    body.auth{
        display: block; min-height: 100dvh; padding: 0;
        background: var(--au-black);
        -webkit-tap-highlight-color: transparent;
    }
    .auth-page-deco{ display: none; }            /* fixed to the body; would sit over the sheet */

    .auth-card{
        display: flex; flex-direction: column; width: 100%; min-height: 100dvh;
        padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
    }

    /* Hero: full-bleed, headline sitting just above the sheet */
    .auth-brand{
        display: flex; justify-content: flex-end;
        flex: 0 0 auto; min-height: 42dvh;
        padding: calc(30px + env(safe-area-inset-top)) 24px 54px;
        border: 0; border-radius: 0;
    }
    .auth-brand-text{ max-width: 100%; }
    .auth-brand h1{ font-size: 33px; }
    .auth-brand p{ margin-top: 10px; font-size: 14.5px; }

    /* Form sheet: rounded top, lifted over the hero, with a grab handle */
    .auth-panel{
        display: block; position: relative; z-index: 1;
        flex: 1 1 auto; margin-top: -28px;      /* fills the rest of the screen */
        padding: 30px 22px calc(34px + env(safe-area-inset-bottom));
        background: #fff; border-radius: 28px 28px 0 0;
        box-shadow: 0 -12px 34px rgba(0,0,0,.22);
    }
    .auth-panel::before{
        content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
        width: 44px; height: 5px; border-radius: 999px; background: #e3e7e5;
    }
    .auth-form{ max-width: 420px; margin: 0 auto; }

    /* Logo and greeting centred in the sheet */
    .auth-logo{ width: 74px; height: 74px; margin: 6px auto 18px; }
    .auth-greet{ display: block; }
    .auth-mhead{ display: none; }
    .auth-step, .auth-title, .auth-sub{ text-align: center; }
    .auth-title{ margin: 0 0 22px; font-size: 26px; }
    .auth-title + .auth-sub{ margin-top: -14px; }
    .auth-sub{ margin: 0 0 22px; font-size: 14px; }

    /* Fields: the label sits inside the box above the input, as in the design.
       The group becomes the bordered box; the input itself is borderless. */
    .au-group{
        margin-bottom: 14px; padding: 9px 16px 7px;
        background: #fafbfa; border: 1.5px solid var(--au-line); border-radius: 16px;
        transition: border-color .15s, box-shadow .15s, background .15s;
    }
    .au-group:focus-within{
        background: #fff; border-color: var(--au-green);
        box-shadow: 0 0 0 4px var(--au-focus-ring);
    }
    .au-label{ margin: 0; font-size: 12.5px; font-weight: 600; color: var(--au-muted); }
    .au-field > svg{ left: 0; top: auto; bottom: 12px; transform: none; width: 20px; height: 20px; }
    .au-input{
        height: 40px; padding: 0; font-size: 16px;
        background: transparent; border: 0; border-radius: 0; box-shadow: none;
    }
    .au-field > svg ~ .au-input{ padding-left: 32px; }
    .au-input:hover, .au-input:focus{ border: 0; box-shadow: none; background: transparent; }
    .au-field.has-toggle .au-input{ padding-right: 46px; }
    .au-toggle{ right: -6px; top: auto; bottom: 4px; transform: none; width: 44px; height: 44px; }
    .au-btn{ height: 56px; border-radius: 999px; font-size: 16px; }
    .au-btn.is-busy{ opacity: .85; cursor: progress; }
    .au-link, button.au-link{ display: inline-block; padding: 12px 0; }
    .au-link:active{ opacity: .6; }

    /* Login keeps a circular arrow at its right edge, as in the design */
    .au-btn.btn-login{ position: relative; }
    .au-btn.btn-login::after{
        content: ""; position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
        width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.22)
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") center / 18px no-repeat;
    }
    .au-btn.btn-login[disabled]::after{ opacity: .5; }

    /* Remember me left, Reset password right */
    .au-meta-row{
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; margin: 0 0 20px;
    }
    .au-meta-row .au-check{ margin: 0; min-height: 44px; justify-content: flex-start; }
    .au-meta-row .au-check input{ width: 18px; height: 18px; }
    .au-meta-row .au-links{ margin: 0; text-align: right; font-size: 14px; }

    /* Six-digit code boxes: tighter gap so they fit a narrow screen */
    .au-code{ gap: 6px; }
    .au-code input{ height: 52px; font-size: 18px; border-radius: 12px; }
}