/* ==================================================================
   PAYDEX — AUTH  ·  sign in and account creation  ·  "Cream & Forest"

   Stands alone: it does not load landing.css. The auth pages used to
   share the landing stylesheet and broke the day the landing was
   restyled, so the tokens below are a copy of landing.css's :root.
   Change a colour there, change it here.

   One column and nothing beside it: a heading, a card holding the form,
   the link across to the other form. Below 640px the card drops its
   chrome and the form sits straight on the page, so no width goes to a
   border and a second layer of padding.
   ================================================================== */
:root {
    --bg: #F7F2E8;
    --surface: #FFFCF6;
    --well: #FBF8F1;
    --hairline: #E3D9C6;
    --line-2: #D3C6AC;

    --ink: #12241C;
    --t2: #33463C;
    --t3: #4A5B51;
    --t4: #7C8B80;

    --brand: #1B6B4A;
    --brand-2: #2E9E6B;
    --brand-deep: #0E4630;
    --brand-wash: #E4EFE6;
    --accent: #C8873A;
    --down: #C0503C;
    --bad-text: #A5402E;

    --sh-2: 0 4px 12px -2px rgba(50,35,15,.07), 0 14px 32px -10px rgba(50,35,15,.12);
    --sh-brand: 0 12px 26px -10px rgba(27,107,74,.55);

    --display: 'Fraunces', ui-serif, Georgia, serif;
    --sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--bg); color: var(--t3);
    font-family: var(--sans); font-size: 15px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; }
[hidden] { display: none !important; }

/* paper grain, same as the landing page */
body::after {
    content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── frame ──────────────────────────────────────────────────────── */
/* clip on both axes: the washes hang off the bottom edge and would
   otherwise give a short page a scrollbar */
.au {
    position: relative; isolation: isolate; overflow: clip;
    min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
/* two soft washes: the only decoration on these pages */
.au::before, .au::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.au::before {
    width: 820px; height: 560px; left: 50%; top: -280px; transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(142,224,180,.40), transparent);
}
.au::after {
    width: 560px; height: 560px; right: -220px; bottom: -240px;
    background: radial-gradient(closest-side, rgba(232,178,104,.22), transparent);
}

.au-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 32px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.brand-mark { width: 34px; height: 34px; flex-shrink: 0; }
.brand-name { font-family: var(--display); font-size: 1.188rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.au-back {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    font-size: .875rem; font-weight: 500; color: var(--t2); transition: color .15s;
}
.au-back:hover { color: var(--ink); }
.au-back svg { transition: transform .15s; }
.au-back:hover svg { transform: translateX(-3px); }

.au-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 4px 24px 36px; }
.au-box { width: 100%; max-width: 440px; }
.au-box.wide { max-width: 480px; }

/* ── heading ────────────────────────────────────────────────────── */
.au-head { text-align: center; margin-bottom: 24px; }
.au-title {
    font-family: var(--display); font-weight: 600; color: var(--ink);
    font-size: 2.375rem; line-height: 1.1; letter-spacing: -.025em; margin: 0;
}
.au-title em { font-style: italic; color: var(--brand); position: relative; white-space: nowrap; }
.squig { position: absolute; left: 0; right: 0; bottom: -.16em; height: .2em; overflow: visible; color: var(--accent); }
.squig path { stroke-dasharray: 320; stroke-dashoffset: 320; animation: draw 1.1s cubic-bezier(.3,.7,.3,1) .3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.au-lede { margin: 14px 0 0; font-size: .969rem; color: var(--t3); text-wrap: balance; }
.au-lede b { font-weight: 600; color: var(--brand); }

.au-card {
    padding: 30px 32px 32px; border-radius: 22px;
    background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--sh-2);
}

/* ── fields ─────────────────────────────────────────────────────── */
.au-form { display: grid; gap: 16px; }
/* the label row carries the field's rule on its right, so the rule costs
   no line of its own; it is also where a password says how strong it is */
.fld-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.fld-head label { font-size: .844rem; font-weight: 600; color: var(--t2); }
.note { font-size: .75rem; color: var(--t3); white-space: nowrap; }
.note.ok { color: var(--brand); font-weight: 600; }
.note.bad { color: var(--bad-text); font-weight: 600; }
.note.warn { color: #8A5A1E; font-weight: 600; }

.ctl { position: relative; }
/* 16px text: anything smaller and iOS zooms the page when the field is tapped */
.ctl input {
    width: 100%; height: 50px; padding: 0 42px 0 16px;
    border-radius: 12px; border: 1px solid var(--line-2); background: var(--well);
    color: var(--ink); font-size: 1rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.ctl input::placeholder { color: var(--t4); }
.ctl input:hover { border-color: #BCAD8E; }
.ctl input:focus { outline: none; background: #FFFEFA; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(27,107,74,.12); }
.ctl.has-eye input { padding-right: 52px; }

/* 44 square: it is the control people hit with a thumb mid-password */
.eye {
    position: absolute; right: 3px; top: 3px; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 10px; background: none; color: var(--t4);
    display: grid; place-items: center; cursor: pointer;
}
.eye:hover { color: var(--ink); background: rgba(18,36,28,.05); }
.eye:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.eye .i-off, .eye.on .i-on { display: none; }
.eye.on .i-off { display: block; }

/* verdict: the border carries it, the glyph confirms it */
.ctl .vd { position: absolute; right: 14px; top: 50%; margin-top: -9px; width: 18px; height: 18px; display: none; }
.ctl.ok input { border-color: var(--brand-2); }
.ctl.ok .vd-ok { display: block; color: var(--brand-2); }
.ctl.bad input { border-color: var(--down); }
.ctl.bad input:focus { box-shadow: 0 0 0 4px rgba(192,80,60,.12); }
.ctl.bad .vd-bad { display: block; color: var(--down); }

/* a line under the field only when there is something to say */
.msg { margin: 6px 0 0; font-size: .781rem; line-height: 1.45; color: var(--t3); }
.msg.bad { color: var(--bad-text); }
.msg.ok { color: var(--brand); }
.msg.warn { color: #8A5A1E; }

/* strength: a hairline along the foot of the password field, so the
   meter costs no row of its own and is only there once they type */
.pw-bar {
    position: absolute; left: 16px; right: 56px; bottom: 7px; height: 3px;
    display: flex; gap: 4px; pointer-events: none; opacity: 0; transition: opacity .2s;
}
.pw-bar i { flex: 1; border-radius: 2px; background: var(--hairline); transition: background .2s; }
.pw-bar.on { opacity: 1; }
.pw-bar[data-score="1"] i:nth-child(-n+1) { background: var(--down); }
.pw-bar[data-score="2"] i:nth-child(-n+2) { background: var(--accent); }
.pw-bar[data-score="3"] i:nth-child(-n+3) { background: var(--brand-2); }
.pw-bar[data-score="4"] i { background: var(--brand); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* referral: folded away unless an invite link filled it in */
.ref-toggle {
    display: inline-flex; align-items: center; gap: 9px; min-height: 32px; padding: 0;
    border: 0; background: none; cursor: pointer;
    font-size: .875rem; font-weight: 600; color: var(--brand);
}
.ref-toggle .plus {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: var(--brand-wash); display: grid; place-items: center; transition: transform .2s;
}
.ref-toggle[aria-expanded="true"] .plus { transform: rotate(45deg); }
.ref-toggle .muted { font-weight: 400; color: var(--t3); }
.ref-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.ref-box { margin-top: 10px; }

/* ── checkbox, submit ───────────────────────────────────────────── */
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; line-height: 1.5; color: var(--t2); cursor: pointer; }
.check input {
    appearance: none; -webkit-appearance: none; flex-shrink: 0; position: relative; cursor: pointer;
    width: 20px; height: 20px; margin: 1px 0 0; border-radius: 6px;
    border: 1.5px solid var(--line-2); background: var(--well);
    transition: background .15s, border-color .15s;
}
.check input:hover { border-color: #BCAD8E; }
.check input:checked { background: var(--brand); border-color: var(--brand); }
.check input:checked::after {
    content: ''; position: absolute; left: 5.5px; top: 2px; width: 5px; height: 10px;
    border: solid #FFFCF6; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.check input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.check a { color: var(--brand); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(27,107,74,.35); text-underline-offset: 3px; }
.check a:hover { text-decoration-color: currentColor; }

.au-submit {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 52px; margin-top: 4px; border: 0; border-radius: 999px;
    background: var(--brand); color: #FFFCF6; box-shadow: var(--sh-brand);
    font-size: .969rem; font-weight: 600; cursor: pointer;
    transition: background .16s, transform .16s;
}
.au-submit:hover { background: var(--brand-deep); transform: translateY(-1px); }
.au-submit:active { transform: none; }
.au-submit:focus-visible { outline: 3px solid rgba(27,107,74,.35); outline-offset: 3px; }
.au-submit svg { transition: transform .16s; }
.au-submit:hover svg { transform: translateX(3px); }

.au-switch { margin: 22px 0 0; text-align: center; font-size: .906rem; color: var(--t3); }
.au-switch a { color: var(--brand); font-weight: 600; }
.au-switch a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── social sign-in: rendered only when a provider is switched on ── */
.or { display: flex; align-items: center; gap: 12px; font-size: .75rem; color: var(--t3); }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }
.social { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.social .btn {
    display: flex; align-items: center; justify-content: center; gap: 9px; height: 48px;
    border-radius: 999px; border: 1px solid var(--line-2); background: var(--well);
    font-size: .875rem; font-weight: 600; color: var(--ink);
    transition: border-color .15s, background .15s;
}
.social .btn:hover { border-color: var(--ink); background: var(--surface); }
.social .btn svg { width: 17px; height: 17px; }

/* ── footer ─────────────────────────────────────────────────────── */
.au-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px;
    padding: 16px 32px 20px; font-size: .781rem; color: var(--t3);
}
.au-foot nav { display: flex; gap: 18px; }
.au-foot a:hover { color: var(--ink); }

/* touch screens wider than a phone get the same thumb-sized targets as a
   phone, grown the same way, so nothing on the page moves */
@media (min-width: 640px) and (pointer: coarse) {
    .check { padding: 12px 0; margin: -12px 0; }
    .ref-toggle { min-height: 44px; margin: -6px 0; }
    .au-switch a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
}

@media (prefers-reduced-motion: reduce) {
    .squig path { animation: none; stroke-dashoffset: 0; }
    .au-submit, .au-submit svg, .au-back svg, .pw-bar, .pw-bar i { transition: none; }
}

/* ══ PHONE ════════════════════════════════════════════════════════
   The card's border, shadow and padding would cost 64px of a 390px
   screen, so it goes: the form sits on the page. The back link keeps
   its arrow and drops its words, the heading turns left to line up
   with the labels under it, and every gap tightens a notch. */
@media (max-width: 639px) {
    .au::before { width: 560px; height: 380px; top: -230px; }
    .au::after { display: none; }

    .au-top { padding: 10px 14px 0 20px; }
    .brand-mark { width: 32px; height: 32px; }
    .au-back {
        width: 44px; justify-content: center; border-radius: 50%;
        border: 1px solid var(--line-2); background: rgba(255,252,246,.6);
    }
    .au-back span {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap;
    }

    .au-main { align-items: flex-start; padding: 22px 20px 12px; }
    .au-head { text-align: left; margin-bottom: 22px; }
    .au-title { font-size: 1.875rem; }
    .au-lede { margin-top: 12px; font-size: .938rem; text-wrap: pretty; }

    .au-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
    .au-form { gap: 14px; }
    .ctl input { height: 48px; }
    .eye { top: 2px; }
    .pw-bar { bottom: 6px; }
    .pair { grid-template-columns: 1fr; gap: 14px; }
    .au-switch { margin-top: 18px; }

    /* thumb-sized targets, grown with padding and handed back with a
       negative margin so nothing on the page moves */
    .check { padding: 12px 0; margin: -12px 0; }
    .ref-toggle { min-height: 44px; }
    .au-switch a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }

    .au-foot { flex-direction: column; justify-content: center; text-align: center; gap: 0; padding: 12px 20px 16px; }
    .au-foot a { display: inline-flex; align-items: center; min-height: 40px; }
}