/*
 * Candidate auth + dashboard, on the public site shell.
 *
 * Everything here EXTENDS home.css — it does not restate it. Cards use .panel,
 * headings use .eyebrow/.h2/.lead, exam cards use .exgrid/.excard, stats use
 * .panel.stat with .sk/.sv, links use .tiles/.tile. Only genuinely new pieces
 * live below, so the dashboard reads as the same product as the landing page.
 *
 * Note: .dash and .stat are already taken by home.css (.eyebrow .dash is a
 * 28px rule, .stat is the metric card) — hence .dashboard and .statgrid here.
 */

/* ── Auth (login / register) ─────────────────────────────────────────────── */

.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--nav-h) + 48px) var(--pad) 80px;
    position: relative;
    z-index: 5;
}

.auth-card {
    width: 100%;
    max-width: 452px;
    padding: clamp(26px, 4vw, 40px);
}

.auth-card h1 {
    font-family: var(--disp);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.005em;
    line-height: 1.02;
    font-size: clamp(26px, 4vw, 34px);
    color: #eef1f5;
    margin: 14px 0 8px;
}

.auth-sub {
    color: var(--txt-dim);
    font-size: 14.5px;
    margin: 0 0 28px;
}

.afld { margin-bottom: 17px; }

.afld label {
    display: block;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--silver);
    margin-bottom: 8px;
}

.afld input[type="text"],
.afld input[type="email"],
.afld input[type="password"] {
    width: 100%;
    padding: 13px 15px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--line);
    border-radius: 11px;
    color: #eef1f5;
    font-size: 15px;
    font-family: var(--body);
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.afld input:focus {
    outline: none;
    border-color: var(--elec);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 0 0 3px rgba(0, 133, 254, .14);
}

.afld input::placeholder { color: rgba(255, 255, 255, .26); }

.afld .err {
    display: none;
    color: #ff9a9a;
    font-size: 12.5px;
    margin-top: 7px;
}

.afld.has-err input { border-color: rgba(255, 107, 107, .8); }
.afld.has-err .err { display: block; }

.auth-alert {
    display: none;
    background: rgba(255, 90, 90, .1);
    border: 1px solid rgba(255, 90, 90, .34);
    color: #ffb4b4;
    border-radius: 11px;
    padding: 12px 15px;
    font-size: 13.5px;
    margin-bottom: 20px;
}

.auth-alert.show { display: block; }

.auth-terms {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin: 20px 0 6px;
    font-size: 13px;
    color: var(--txt-dim);
    line-height: 1.55;
}

/* width/height pinned explicitly: a bare `width:100%` from any ancestor rule
   turns a flex-shrink:0 checkbox into a full-width box and collapses the label
   beside it into a one-word column. */
.auth-terms input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    flex: 0 0 16px;
    accent-color: var(--elec);
}

.auth-terms a { color: var(--elec); }
.auth-terms a:hover { text-decoration: underline; }

.auth-terms label {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--body);
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--txt-dim);
    margin: 0;
    cursor: pointer;
}

.terms-err {
    display: none;
    color: #ff9a9a;
    font-size: 12.5px;
    margin: 8px 0 0;
}

.terms-err.show { display: block; }

.auth-submit { width: 100%; margin-top: 22px; }
.auth-submit[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }

.auth-alt {
    text-align: center;
    margin-top: 22px;
    font-size: 13.5px;
    color: var(--txt-dim);
}

.auth-alt a { color: var(--elec); }
.auth-alt a:hover { text-decoration: underline; }

/* ── Dashboard ───────────────────────────────────────────────────────────── */

.dashboard {
    padding: calc(var(--nav-h) + 54px) var(--pad) 110px;
    position: relative;
    z-index: 5;
}

.dash-hd { margin-bottom: 44px; }
.dash-hd .h2 { font-size: clamp(30px, 5vw, 46px); }

/* The in-progress attempt outranks everything else on this page. */
.resume {
    margin-top: 34px;
    padding: 26px 28px;
    border-color: rgba(0, 133, 254, .55);
    background:
        linear-gradient(180deg, rgba(0, 133, 254, .16), rgba(255, 255, 255, .015)),
        radial-gradient(70% 120% at 88% 20%, rgba(0, 93, 221, .22), transparent 70%);
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.resume::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -44px;
    width: 150px;
    height: 182px;
    background: var(--icon) center/contain no-repeat;
    opacity: .1;
    pointer-events: none;
}

.resume-body { flex: 1 1 320px; min-width: 0; }

.resume h3 {
    font-family: var(--disp);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(19px, 2.4vw, 25px);
    color: #eef1f5;
    margin: 10px 0 8px;
    letter-spacing: .01em;
}

.resume p { color: var(--txt); font-size: 14px; margin: 0; }
.resume p b { color: #eef1f5; font-weight: 600; }
.resume .btn { flex-shrink: 0; position: relative; z-index: 1; }

.statgrid {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
}

@media (max-width: 760px) { .statgrid { grid-template-columns: 1fr; } }

/* Section rhythm — matches the landing page's eyebrow → content cadence.
   home.css gives every <section> ~84-130px of padding for the landing page's
   full-bleed rhythm; inside the dashboard the .wrap already owns the gutters,
   so that padding is reset rather than fought with inline styles. */
.dashboard .dash-sec { padding: 0; margin-top: 64px; }
.dashboard .dash-sec:first-of-type { margin-top: 48px; }
.dash-sec .exgrid,
.dash-sec .tiles { margin-top: 22px; }

.dash-sec .exgrid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1020px) { .dash-sec .exgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dash-sec .exgrid { grid-template-columns: 1fr; } }

.dash-sec .tiles { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .dash-sec .tiles { grid-template-columns: 1fr; } }

.excard .btn { margin-top: 18px; width: 100%; position: relative; z-index: 1; }

.dash-note {
    color: var(--txt-dim);
    font-size: 14px;
    padding: 30px 26px;
    border: 1px dashed var(--line);
    border-radius: 16px;
    text-align: center;
    margin-top: 22px;
}

.dash-note b { color: #eef1f5; font-weight: 600; }

/* ── Nav account area ────────────────────────────────────────────────────── */

.nav-signout { margin: 0; display: inline-flex; }
.nav-signout .nav-login { cursor: pointer; }

.navlinks a.nl.nav-me {
    color: #eef1f5;
    font-family: var(--disp);
    font-weight: 700;
    letter-spacing: .08em;
}

.navlinks a.nl.nav-me::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--elec);
    box-shadow: 0 0 8px var(--elec);
    margin-right: 9px;
    vertical-align: middle;
}

@media (max-width: 900px) { .nav-signout { display: none; } }

.drawer-signout { margin: 0; }
.drawer-signout .btn { width: 100%; }

/* ── Account settings ────────────────────────────────────────────────────── */

.prof-wrap { max-width: 820px; }

.prof-card { padding: clamp(22px, 3vw, 30px); }
.prof-card .btn { margin-top: 6px; }

.prof-note {
    color: var(--txt-dim);
    font-size: 14px;
    margin: 14px 0 0;
    max-width: 560px;
}

.dashboard .prof-note + .panel { margin-top: 20px; }

.afld-hint {
    display: block;
    color: var(--graphite);
    font-size: 12.5px;
    margin-top: 8px;
    line-height: 1.5;
}

.afld input:disabled {
    opacity: .55;
    cursor: not-allowed;
    background: rgba(255, 255, 255, .02);
}

/* Transient "Saved." confirmation, pinned so it is visible from any section. */
.prof-ok {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    z-index: 95;
    background: rgba(0, 93, 221, .92);
    color: #fff;
    border: 1px solid rgba(0, 133, 254, .8);
    border-radius: 999px;
    padding: 12px 26px;
    font-family: var(--disp);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    box-shadow: 0 14px 40px rgba(0, 93, 221, .45);
}

.exam-picker {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}

@media (max-width: 620px) { .exam-picker { grid-template-columns: 1fr; } }

/* .exam-opt is a <label>, and inside the registration form it sits under
   `.afld label`, which is display:block + uppercase mono for field captions.
   That beat the flex layout here (killing the gap between box and text) and
   shouted the exam names in wide mono. Specificity raised and the caption
   styling explicitly undone — these are option labels, not field labels. */
.exam-opt,
.afld .exam-opt {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    margin-bottom: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: rgba(255, 255, 255, .025);
    cursor: pointer;
    transition: border-color .2s, background .2s, opacity .2s;
    font-family: var(--body);
    text-transform: none;
    letter-spacing: normal;
}

.exam-opt:hover { border-color: rgba(0, 133, 254, .5); }

.exam-opt.on {
    border-color: rgba(0, 133, 254, .7);
    background: rgba(0, 93, 221, .14);
}

/* Pinned like the terms checkbox — a stray width:100% from any ancestor rule
   would otherwise swallow the row. */
.exam-opt input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    flex: 0 0 17px;
    accent-color: var(--elec);
    cursor: pointer;
}

.exam-opt-t {
    color: #eef1f5;
    font-size: 14.5px;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
}

/* At the limit, the remaining options grey out rather than disappear, so the
   candidate can see what else exists and what they'd have to give up. */
.exam-opt.disabled {
    opacity: .4;
    cursor: not-allowed;
}

.exam-opt.disabled input { cursor: not-allowed; }
.exam-opt.disabled:hover { border-color: var(--line); }

.exam-limit {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--silver);
    margin-top: 12px;
}

.exam-limit.reached { color: var(--elec); }

/* Registration: the picker sits inside the auth card, which is narrower. */
.auth-card .exam-picker { grid-template-columns: 1fr; gap: 9px; margin-bottom: 0; }
.auth-card .exam-loading { padding: 16px; font-size: 13px; margin-top: 0; }
.exam-field .exam-hint { margin-bottom: 12px; }
.exam-field.has-err .exam-picker { outline: 1px solid rgba(255, 107, 107, .6); outline-offset: 6px; border-radius: 12px; }

.exam-opt-c {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .16em;
    color: var(--silver);
    text-transform: uppercase;
    flex-shrink: 0;
}

.prof-signout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}

.prof-signout h3 {
    font-family: var(--disp);
    font-weight: 700;
    font-size: 18px;
    color: #eef1f5;
    margin: 0 0 6px;
}

.prof-signout p { color: var(--txt-dim); font-size: 13.5px; margin: 0; }
.prof-signout form { margin: 0; }

/* Contact-form error, on the landing page (home.css owns the rest of it). */
.c-err {
    display: none;
    grid-column: 1 / -1;
    background: rgba(255, 90, 90, .1);
    border: 1px solid rgba(255, 90, 90, .34);
    color: #ffb4b4;
    border-radius: 11px;
    padding: 11px 14px;
    font-size: 13.5px;
    margin-bottom: 4px;
}

.c-err.show { display: block; }

/* ── Wallet ────────────────────────────────────────────────────────────────
   Scoped with a wal- prefix. The .fld/.stat/.dash collisions with home.css
   have bitten this project before; nothing here reuses a bare generic name. */
.wal-balance { text-align: center; padding: 34px 20px; }
.wal-amount { font-size: clamp(38px, 7vw, 60px); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.wal-sub { margin-top: 8px; opacity: .62; font-size: 14px; }

.wal-payline { margin-bottom: 18px; }

.wal-ref {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; margin-bottom: 18px;
    border: 1px dashed currentColor; border-radius: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px; letter-spacing: .04em; word-break: break-all;
}

.wal-qr { display: block; width: 190px; height: 190px; margin: 0 0 18px; border-radius: 10px; }

.wal-rule { border: 0; border-top: 1px solid currentColor; opacity: .16; margin: 26px 0; }

.wal-list { list-style: none; margin: 0; padding: 0; }

.wal-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 13px 0; border-bottom: 1px solid rgba(128, 128, 128, .18);
}
.wal-row:last-child { border-bottom: 0; }

.wal-note { font-size: 13px; opacity: .6; margin-top: 3px; }
.wal-empty { padding: 13px 0; opacity: .6; }

.wal-amt { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.wal-amt.is-in { color: #1a7f45; }
.wal-amt.is-out { opacity: .85; }
.wal-amt.is-flat { opacity: .45; }

.wal-badge {
    white-space: nowrap; font-size: 12px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid currentColor; opacity: .75;
}
.wal-badge.is-approved { color: #1a7f45; opacity: 1; }
.wal-badge.is-rejected { color: #b3261e; opacity: 1; }