/* frb-auth.css — the shell the account screens share.
 *
 * Five pages that all do the same job — prove who you are, or tell you what
 * just happened — and each was a card floating in the middle of an empty black
 * field. On a 1440px screen that is a 440px card and 1000px of nothing, which
 * reads as a page that failed to load rather than one that is finished.
 *
 * The shape here is the one every product with an account uses, for a reason:
 * a STAGE on the left that says whose sign-in this is, and the FORM on the
 * right doing the work. The stage carries the wordmark, one sentence, and the
 * three things worth knowing before you type a password into a box. On a phone
 * the stage folds to a header band above the form and the card goes edge to
 * edge, because a phone has no room to spend on scene-setting.
 *
 * WHAT THIS FILE DOES NOT DO is rename anything. Every id, every form handler
 * and every class the pages' own scripts read stays exactly as it was: this
 * layer adds a wrapper and restyles what is already there. An auth page that
 * looks better and no longer signs you in is not an improvement.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   THE STAGE
   ═══════════════════════════════════════════════════════════════════════════ */

body.frb-auth {
    min-height: 100vh;
    margin: 0;
    /* THE OLD BODY WAS THE LAYOUT. These pages centred their one card by making
       <body> a flex box with `padding: 20px`, which is right for a single card
       and wrong for a two-panel shell: the 20px became a dark frame around the
       stage, and the flex centring fought the grid inside it. The shell owns
       the layout now, so the body goes back to being a page. */
    display: block;
    padding: 0;
    background: var(--bg-gradient, #0b0b0d);
    background-attachment: fixed;
    color: var(--text-primary, #f8fafc);
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}

.frb-auth-shell {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: 100vh;
    align-items: stretch;
}

/* ── LEFT: what this account is ──────────────────────────────────────────── */
.frb-auth-stage {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding: 64px clamp(40px, 5vw, 88px);
    border-right: 1px solid var(--glass-border-color, rgba(127, 127, 127, .18));
}

/* The field behind the stage. Two soft accent washes and a hairline grid —
   drawn with gradients rather than an image so it costs nothing to load and
   takes the theme's accent with it. `pointer-events: none` because it is
   scenery: nothing here should ever swallow a click meant for the form. */
.frb-auth-stage::before,
.frb-auth-stage::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .16;
    pointer-events: none;
    background: var(--accent-primary, #d4af37);
}
.frb-auth-stage::before { width: 420px; height: 420px; top: -120px; left: -110px; }
.frb-auth-stage::after  { width: 340px; height: 340px; bottom: -130px; left: 32%; opacity: .1; }

.frb-auth-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(var(--glass-border-color, rgba(127,127,127,.09)) 1px, transparent 1px),
        linear-gradient(90deg, var(--glass-border-color, rgba(127,127,127,.09)) 1px, transparent 1px);
    background-size: 56px 56px;
    /* Faded at the edges so the grid reads as texture rather than as a table. */
    mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 20%, transparent 100%);
}

.frb-auth-stage > * { position: relative; z-index: 1; }

.frb-auth-brand {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.5px;
    color: var(--accent-text, var(--accent-primary, #d4af37));
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: max-content;
}
.frb-auth-brand:hover { opacity: .85; }

.frb-auth-headline {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1px;
    margin: 0;
    max-width: 15ch;
    text-wrap: balance;
}
.frb-auth-headline em {
    font-style: normal;
    color: var(--accent-text, var(--accent-primary, #d4af37));
}
.frb-auth-sub {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary, #9ca3af);
    margin: 0;
    max-width: 46ch;
}

/* The three proof points. A list, because that is what it is. */
.frb-auth-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
.frb-auth-points li {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: start;
    gap: 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-secondary, #9ca3af);
}
.frb-auth-points i {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    font-size: 11px;
    color: var(--accent-text, var(--accent-primary, #d4af37));
    background: color-mix(in srgb, var(--accent-primary, #d4af37) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary, #d4af37) 28%, transparent);
}
.frb-auth-points b { color: var(--text-primary, #f8fafc); font-weight: 600; }

.frb-auth-foot {
    margin-top: 8px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-secondary, #9ca3af);
    opacity: .7;
}

/* ── NO STAGE, ONE COLUMN ────────────────────────────────────────────────
   Sign-out is not a page you read or decide anything on — it is over in a
   second and a half. A stage selling the product to somebody on their way out
   would be the wrong thing to look at, so this variant drops it and centres
   the one card. */
.frb-auth-shell.frb-auth-solo { grid-template-columns: 1fr; }
.frb-auth-shell.frb-auth-solo .frb-auth-panel { align-items: center; }
.frb-auth-shell.frb-auth-solo .frb-auth-card { max-width: 400px; }

/* ── RIGHT: the work ─────────────────────────────────────────────────────── */
.frb-auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px clamp(24px, 4vw, 64px);
}

.frb-auth-card {
    width: 100%;
    max-width: 430px;
    background: var(--panel-bg, rgba(10, 10, 10, .8));
    border: 1px solid var(--glass-border-color, rgba(127, 127, 127, .2));
    border-radius: 20px;
    padding: 34px 30px;
    box-shadow: 0 24px 70px -30px rgba(0, 0, 0, .85);
    box-sizing: border-box;
}

.frb-auth-card h1,
.frb-auth-card h2 {
    /* THE SAME TOKEN EVERY OTHER PAGE TITLE READS. Hand-set at 26 this was a
       fifth size in a section that already had four, and the token drops itself
       to 23 on a phone, so the pair stays in step without a second rule. */
    font-size: var(--frb-app-title-size, 28px);
    font-weight: 800;
    /* THE SPACE BETWEEN THE WORDS HAD TO BE PUT BACK, and the tracking is why.
       Outfit's word space at 800 weight is unusually narrow — measured, 4px at
       23px and 5px at 28px, against letters ~13px wide — so a −0.6px tracking
       was taking fifteen percent of the one gap that carries meaning. On the
       phone "Reset password" came out as one word. The tracking is now the app
       head's own −0.01em, so the two titles agree, and the space is given back
       explicitly rather than left to a face that does not have one to spare. */
    letter-spacing: -0.01em;
    word-spacing: 0.14em;
    margin: 0 0 6px;
    text-align: left;
}
.frb-auth-lede {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary, #9ca3af);
    margin: 0 0 24px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE FIELDS
   Restyled where they stand: these selectors name the classes the pages
   already use, so no markup had to be renamed to pick them up.
   ═══════════════════════════════════════════════════════════════════════════ */

.frb-auth-card .form-group { margin-bottom: 16px; position: relative; }

.frb-auth-card .form-label,
.frb-auth-card label.form-label {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--text-secondary, #9ca3af);
    margin-bottom: 7px;
}

.frb-auth-card .form-input,
.frb-auth-card input[type="text"],
.frb-auth-card input[type="email"],
.frb-auth-card input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    padding: 0 14px;
    border-radius: 11px;
    font-family: inherit;
    font-size: 15px;
    color: var(--text-primary, #f8fafc);
    background: var(--input-bg, rgba(255, 255, 255, .05));
    border: 1px solid var(--glass-border-color, rgba(127, 127, 127, .24));
    transition: border-color .16s, box-shadow .16s, background .16s;
    outline: none;
}
.frb-auth-card .form-input::placeholder { color: var(--text-secondary, #9ca3af); opacity: .55; }
.frb-auth-card .form-input:hover { border-color: color-mix(in srgb, var(--accent-primary, #d4af37) 40%, transparent); }
.frb-auth-card .form-input:focus,
.frb-auth-card input:focus {
    border-color: var(--accent-primary, #d4af37);
    /* A ring, not a glow: it has to be visible on both grounds and it has to
       be obvious which field has the keyboard. */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary, #d4af37) 22%, transparent);
}

/* A field with a reveal button keeps its text clear of it. */
.frb-auth-card .frb-has-reveal .form-input { padding-right: 46px; }
.frb-auth-reveal {
    position: absolute;
    right: 6px;
    bottom: 5px;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 9px;
    background: transparent;
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
    font-size: 13px;
    transition: color .15s, background .15s;
}
.frb-auth-reveal:hover { color: var(--accent-text, var(--accent-primary, #d4af37)); background: rgba(127,127,127,.14); }
.frb-auth-reveal:focus-visible { outline: 2px solid var(--accent-primary, #d4af37); outline-offset: 1px; }

/* Inline field state. Said under the field it is about, not at the top of the
   form: a message about the email is no use beside the password. */
.frb-auth-note {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.4;
    margin-top: 6px;
}
.frb-auth-note.is-on { display: flex; }
.frb-auth-note.is-bad { color: var(--danger, #ff6b6b); }
.frb-auth-note.is-warn { color: var(--warning, #fbbf24); }
.frb-auth-card .form-input.is-bad { border-color: var(--danger, #ff6b6b); }
.frb-auth-card .form-input.is-bad:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #ff6b6b) 24%, transparent);
}

/* ── The keep-me-signed-in row ───────────────────────────────────────────── */
.frb-auth-card .remember-me {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 2px 0 6px;
    font-size: 13px;
    color: var(--text-primary, #f8fafc);
}
.frb-auth-card .remember-me input[type="checkbox"] {
    width: 17px; height: 17px;
    accent-color: var(--accent-primary, #d4af37);
    cursor: pointer;
    flex: 0 0 auto;
}
.frb-auth-card .remember-me label { cursor: pointer; margin: 0; font-size: 13px; letter-spacing: 0; text-transform: none; }
.frb-auth-card .remember-hint {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-secondary, #9ca3af);
    margin: 0 0 18px;
    opacity: .85;
}

/* ── The button ──────────────────────────────────────────────────────────── */
.frb-auth-card .btn-login,
.frb-auth-card .btn-primary-frb,
.frb-auth-card button[type="submit"] {
    width: 100%;
    /* min-height, not height, and the system's large size rather than a number
       of this sheet's own. The sign-in form's one action should be taller than
       a toolbar button — that part was right — but `height: 48px` meant this
       button reported a min-height of 0 and sat outside the product's sizing
       altogether. --frb-btn-lg-h is the large step every other large button in
       the product uses, so this is now a size the system knows about, and a
       label that wraps grows the button instead of spilling out of it. */
    min-height: var(--frb-btn-lg-h, 46px);
    border: 0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--accent-ink, #0b0f16);
    background: var(--accent-primary, #d4af37);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: transform .14s, box-shadow .2s, opacity .15s;
    box-shadow: 0 10px 26px -14px var(--accent-primary, #d4af37);
}
.frb-auth-card .btn-login:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px -14px var(--accent-primary, #d4af37);
}
.frb-auth-card .btn-login:active:not(:disabled) { transform: translateY(0); }
.frb-auth-card .btn-login:disabled { opacity: .6; cursor: progress; transform: none; }
.frb-auth-card .btn-login:focus-visible { outline: 2px solid var(--text-primary, #fff); outline-offset: 2px; }

/* ── Links under the form ────────────────────────────────────────────────── */
.frb-auth-card .links-container {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--glass-border-color, rgba(127, 127, 127, .16));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13.5px;
}
.frb-auth-card .link,
.frb-auth-card .links-container a {
    color: var(--accent-text, var(--accent-primary, #d4af37));
    text-decoration: none;
    font-weight: 600;
}
.frb-auth-card .link:hover { text-decoration: underline; }
.frb-auth-card .back-home { margin-top: 14px; text-align: center; font-size: 13px; }
.frb-auth-card .back-home a { color: var(--text-secondary, #9ca3af); text-decoration: none; }
.frb-auth-card .back-home a:hover { color: var(--text-primary, #f8fafc); }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
/* AN ALERT WITH NOTHING IN IT IS NOT AN ALERT. These pages ship the container
   empty and fill it when there is something to say, so on a clean load the card
   opened with 60px of padded, bordered nothing above its title. */
.frb-auth-card .alert:empty { display: none; }

.frb-auth-card .alert {
    border-radius: 11px;
    padding: 11px 13px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
    border: 1px solid transparent;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.frb-auth-card .alert-error,
.frb-auth-card .alert.error {
    color: var(--danger, #ff6b6b);
    background: color-mix(in srgb, var(--danger, #ff6b6b) 12%, transparent);
    border-color: color-mix(in srgb, var(--danger, #ff6b6b) 34%, transparent);
}
.frb-auth-card .alert-success,
.frb-auth-card .alert.success {
    color: var(--success, #34d399);
    background: color-mix(in srgb, var(--success, #34d399) 12%, transparent);
    border-color: color-mix(in srgb, var(--success, #34d399) 34%, transparent);
}
.frb-auth-card .alert-info,
.frb-auth-card .alert.info {
    color: var(--info, #60a5fa);
    background: color-mix(in srgb, var(--info, #60a5fa) 12%, transparent);
    border-color: color-mix(in srgb, var(--info, #60a5fa) 34%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE SIX-BOX CODE FIELD (2FA)
   The real <input> stays in the DOM and keeps its id — the page's own script
   reads it — and these boxes write into it. Enhancement, not replacement: with
   the script blocked the original field is still there and still works.
   ═══════════════════════════════════════════════════════════════════════════ */
.frb-code-row { display: flex; gap: 9px; justify-content: space-between; margin: 4px 0 6px; }
.frb-code-cell {
    flex: 1 1 0;
    min-width: 0;
    height: 56px;
    text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary, #f8fafc);
    background: var(--input-bg, rgba(255, 255, 255, .05));
    border: 1px solid var(--glass-border-color, rgba(127, 127, 127, .24));
    border-radius: 12px;
    outline: none;
    transition: border-color .15s, box-shadow .15s, transform .12s;
    -moz-appearance: textfield;
}
.frb-code-cell::-webkit-outer-spin-button,
.frb-code-cell::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.frb-code-cell:focus {
    border-color: var(--accent-primary, #d4af37);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary, #d4af37) 22%, transparent);
    transform: translateY(-1px);
}
.frb-code-cell.is-filled { border-color: color-mix(in srgb, var(--accent-primary, #d4af37) 55%, transparent); }

/* ═══════════════════════════════════════════════════════════════════════════
   THE PHONE
   One column. The stage becomes a header band — it still says whose sign-in
   this is, which is the half worth keeping — and the card takes the width.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* THE STAGE IS AS TALL AS ITS WORDS. One column with two `1fr` rows split
       the viewport in half, so a short stage was padded out with dead space —
       111px on the reset page, 134px on set-a-new-password — between the last
       sentence and the card people came to fill. `auto 1fr` gives the stage its
       content and the panel everything left. */
    .frb-auth-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        min-height: 100vh;
    }
    /* THE WORDMARK IS A HEADER, NOT A LINE OF TEXT. Stacked into the top of
       the stage with the headline it read as a word floating on the page —
       every other screen in the product opens with a bar the brand sits in, and
       an auth page that does not have one looks like it lost its chrome rather
       than like it never had any. So on a phone the brand takes the band: the
       panel's ground, a hairline under it, and the same 56px the shared header
       is. The stage keeps the rest of its padding for the words below. */
    .frb-auth-stage {
        padding: 0 0 22px;
        gap: 0;
        border-right: 0;
        border-bottom: 1px solid var(--glass-border-color, rgba(127, 127, 127, .18));
        justify-content: flex-start;
    }
    .frb-auth-stage > .frb-auth-brand {
        width: 100%;
        box-sizing: border-box;
        height: 56px;
        display: flex;
        align-items: center;
        padding: 0 var(--frb-shell-gutter, 14px);
        margin: 0 0 20px;
        font-size: 20px;
        background: var(--panel-bg, rgba(10, 10, 10, .8));
        border-bottom: 1px solid var(--glass-border-color, rgba(127, 127, 127, .18));
    }
    /* The words below sit on the page's gutter, the same one the card uses. */
    .frb-auth-stage > .frb-auth-headline,
    .frb-auth-stage > .frb-auth-sub { padding: 0 var(--frb-shell-gutter, 14px); }
    .frb-auth-stage > .frb-auth-sub { margin-top: 10px; }
    /* The proof points and the strapline are the part a phone cannot afford:
       they push the field people came here to fill below the fold. The
       wordmark and the headline stay, because they say where you are. */
    .frb-auth-points, .frb-auth-foot { display: none; }
    .frb-auth-headline { font-size: 22px; max-width: none; letter-spacing: -0.5px; }
    .frb-auth-sub { font-size: 13.5px; }
    .frb-auth-stage::before { width: 260px; height: 260px; top: -140px; }
    .frb-auth-stage::after { display: none; }
    .frb-auth-panel { padding: 22px var(--frb-shell-gutter, 14px) 40px; align-items: flex-start; }
    .frb-auth-card { max-width: none; padding: 24px 20px; border-radius: 18px; }
    .frb-code-cell { height: 50px; font-size: 19px; }
}

@media (max-width: 380px) {
    .frb-code-row { gap: 6px; }
    .frb-code-cell { height: 46px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .frb-auth-card .btn-login,
    .frb-code-cell,
    .frb-auth-reveal { transition: none; }
    .frb-auth-card .btn-login:hover:not(:disabled) { transform: none; }
}

/* ═══ THE EDITORIAL TREATMENT ═══════════════════════════════════════════════
   Appended at the end of this sheet, so it wins by source order over the rules
   above it and the whole change reverts together.

   ONE FILE, SIX PAGES. login, signup, forgot-password, update-password, 2fa and
   logout all link this and all use the same frb-auth-* class names, so the
   treatment is written once rather than copied into six <style> blocks. That
   copying is the drift this pass exists to undo, and it is also why these six
   already look like each other — the shared sheet was already doing its job.

   These pages sit directly either side of index.html in a visitor's flow: gate,
   then sign in or sign up. A mismatch between them is the most visible kind, so
   they take the gate's language — display type against the serif italic, square
   geometry, mono labels, and the accent glow on the primary action.
   ═════════════════════════════════════════════════════════════════════════ */

/* Display type. The headline already carried an <em>; it just was not set in
   anything. `.c-head` in the reference: the second half in the serif italic. */
.frb-auth-headline {
    font-family: var(--frb-ed-display, 'Syne', 'Outfit', sans-serif);
    font-size: clamp(2.1rem, 3.4vw, 3.1rem);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.04em;
    max-width: 16ch;
}
.frb-auth-headline em {
    font-family: var(--frb-ed-serif, 'Instrument Serif', Georgia, serif);
    font-style: italic;
    font-weight: 400;
    /* The last hardcoded accent size in the product — this sheet was missed by
       the sweep that put the other eight on the token. */
    font-size: var(--frb-ed-accent-size, 1.05em);
    letter-spacing: normal;
    letter-spacing: -.01em;
    color: var(--accent-text, var(--accent-primary, #d4af37));
}
.frb-auth-sub,
.frb-auth-lede {
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 12.5px;
    line-height: 1.75;
}

/* Square.

   FIELDS AND BUTTONS GO THROUGH THE TOKENS, NOT THROUGH SELECTORS.
   frb-compat.css owns input and button radius on purpose — it settled 614
   fields wearing six different numbers — and it publishes --frb-field-radius
   and --frb-btn-radius as the escape hatch for a page that means its own shape.
   It also loads AFTER this sheet, so a selector here loses to it anyway. Custom
   properties inherit, so setting them on the shell is enough for everything
   inside; fighting the cascade instead would have meant !important on rules the
   design system is right to own.

   The rest is listed by name — .frb-auth-brand's mark and the reveal button are
   round because they are a mark and a glyph, and a blanket rule would flatten
   them with everything else. */
.frb-auth-shell,
.frb-auth-stage,
.frb-auth-card {
    --frb-field-radius: 0px;
    --frb-btn-radius: 0px;
    /* Label tracking is owned the same way — the winning rule reads
       --frb-label-tracking, so that is the lever rather than a louder
       selector. */
    --frb-label-tracking: .18em;
}

/* ── THE CARD'S OWN TYPE ───────────────────────────────────────────────────
   The panel on the left took the treatment and the card on the right did not,
   which left two typographic systems facing each other across one screen: a
   Syne headline and a mono lede beside an Outfit card title, Outfit labels and
   Outfit links. The card is the half people actually use, so it gets the same
   language. */
.frb-auth-card h1,
.frb-auth-card h2 {
    font-family: var(--frb-ed-display, 'Syne', 'Outfit', sans-serif);
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.02;
}
/* Everything that is a note, a hint, a caption or a link in the card reads as
   mono — the same voice the panel's lede and proof points use. */
.frb-auth-card .frb-auth-lede,
.frb-auth-card .remember-hint,
.frb-auth-card .remember-me,
.frb-auth-card .links-container,
.frb-auth-card .back-home,
.frb-auth-card .alert,
.frb-auth-card small,
.frb-auth-card .form-hint,
.frb-auth-card .hint {
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
}
.frb-auth-card .frb-auth-lede { font-size: 12.5px; line-height: 1.7; }
.frb-auth-card .remember-hint { font-size: 11px; line-height: 1.65; }
.frb-auth-card .remember-me {
    font-size: 10px; text-transform: uppercase; letter-spacing: .16em;
}
.frb-auth-card .links-container,
.frb-auth-card .back-home {
    font-size: 11px; letter-spacing: .1em;
}
.frb-auth-card .links-container .link {
    font-family: inherit; text-transform: uppercase; letter-spacing: .14em;
    font-size: 10px; font-weight: 400;
}

/* THE REST OF THE CARD, FOUND BY HUNTING RATHER THAN BY LISTING.
   Walking the card for anything still computing to the product font turned up
   what a hand-written list had missed: the field labels, the inline validation
   messages ("That does not look like an address"), update-password's own
   "Invalid or Expired Link" heading and its status line. A state nobody renders
   in the happy path is exactly what an eyeballed list leaves behind.

   Headings take the display face; everything that is prose, a label or a status
   takes the mono. */
.frb-auth-card h3,
.frb-auth-card h4,
.frb-auth-card h5 {
    font-family: var(--frb-ed-display, 'Syne', 'Outfit', sans-serif);
    font-weight: 800;
    letter-spacing: -.03em;
}
.frb-auth-card p,
.frb-auth-card label,
.frb-auth-card span,
.frb-auth-card small,
.frb-auth-card li,
.frb-auth-card .form-label,
.frb-auth-card .text-secondary,
.frb-auth-card .field-error,
.frb-auth-card .invalid-feedback,
.frb-auth-card .error-text {
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
}
/* THE ONE !important IN THIS SHEET, AND WHY.
   frb-compat.css sets the label font with a selector that chains eight :not()
   and :has() pseudo-classes past `body:not([data-frb-optout~="input"])
   :is(label.form-label, …)` — it computes to about (0,8,4), and that sheet
   loads after this one. Matching it would mean writing a selector nobody could
   read, for one declaration.

   The two honest alternatives were both worse. It reads --frb-font, which is
   the PRODUCT font token: changing that would turn every label in Feerebu to
   mono to style six pages. And the documented escape, data-frb-optout="input",
   switches off that whole block — display, sizing, focus behaviour — to change
   a typeface.

   So: one property, scoped to this card, on the one thing the design system
   publishes no token for. Tracking still goes through --frb-label-tracking
   above, because for that there IS a token. */
body.frb-auth .frb-auth-card label.form-label,
body.frb-auth .frb-auth-card .form-label {
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace) !important;
    font-size: 10px;
    font-weight: 400;
}
/* The remember-me label is the same problem wearing a different hat. It carries
   no class, so it matches `label:not([class])` in that same :is() list and
   inherits the whole (0,8,4) — and its checkbox is a SIBLING, not a child, so
   the :not(:has(input[type="checkbox"])) guard does not exclude it the way it
   excludes a wrapping toggle label. */
body.frb-auth .frb-auth-card .remember-me label {
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace) !important;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* The last three, each excluded from the rules above for its own reason: the
   checkbox's label is deliberately outside compat's field-label selector
   (`:not(:has(input[type="checkbox"]))`), an anchor is not a span, and
   update-password's .subtitle is its own class. Found by walking the card, not
   by guessing what was left. */
.frb-auth-card .remember-me,
.frb-auth-card .remember-me label,
.frb-auth-card a,
.frb-auth-card .subtitle {
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
}
.frb-auth-card .subtitle { font-size: 12px; line-height: 1.7; }

/* The inputs keep the mono too, so what someone types matches the label above
   it rather than switching face mid-field. */
.frb-auth-card .form-input,
.frb-auth-card input[type="text"],
.frb-auth-card input[type="email"],
.frb-auth-card input[type="password"] {
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 13.5px;
    letter-spacing: .01em;
}
.frb-auth-card,
.frb-auth-card .form-input,
.frb-auth-card input[type="text"],
.frb-auth-card input[type="email"],
.frb-auth-card input[type="password"],
.frb-auth-card button,
.frb-auth-card .btn,
.frb-auth-panel {
    border-radius: 0;
}

/* The card keeps its lift — it is a panel on a ground, not a cell in a grid,
   so it does not need the opaque surface the shared-edge tiles use. */
.frb-auth-card {
    box-shadow: 0 24px 70px -30px rgba(0, 0, 0, .85);
}

/* Labels at the reference's tracking. */
.frb-auth-card .form-label,
.frb-auth-card label.form-label {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .18em;
    margin-bottom: 9px;
}

/* The focus RING stays a ring rather than becoming a glow. The comment above it
   gives the reason and it still holds: it has to be obvious which field has the
   keyboard, on both grounds. A glow reads as decoration; this reads as focus. */

/* The primary action is mono, tracked, and lit. The glow is the product's, and
   taking it off was the mistake this treatment made the first time round. */
/* .btn-primary is here because 2fa.html's one action is written that way and
   nothing else in this list reaches it — that page also opts out of the compat
   layer, so its button had no owner at all and rendered in the product face
   while every other auth page's was mono. Scoped inside .frb-auth-card, so it
   only ever means "the primary action of an auth card". */
.frb-auth-card button[type="submit"],
.frb-auth-card .btn-login,
.frb-auth-card .btn-register,
.frb-auth-card .btn-reset,
.frb-auth-card .btn-update,
.frb-auth-card .btn-primary,
.frb-auth-card .btn-primary-frb {
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .14em;
    border-radius: 0;
    box-shadow: 0 0 22px var(--accent-glow, transparent);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1),
                box-shadow .25s cubic-bezier(.16, 1, .3, 1), opacity .2s;
}
.frb-auth-card button[type="submit"]:hover:not(:disabled),
.frb-auth-card .btn-login:hover:not(:disabled),
.frb-auth-card .btn-register:hover:not(:disabled),
.frb-auth-card .btn-reset:hover:not(:disabled),
.frb-auth-card .btn-primary:hover:not(:disabled),
.frb-auth-card .btn-update:hover:not(:disabled) {
    /* Both, as on index: the hard offset block gives the press its shape and
       the glow keeps it lit. */
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 var(--text-primary, #f8fafc),
                0 0 38px var(--accent-glow, transparent);
}

/* The proof points take the reference's bullet — a token from the thing being
   described, rather than a disc. */
.frb-auth-points li {
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 12px;
    line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
    .frb-auth-card button[type="submit"]:hover:not(:disabled),
    .frb-auth-card .btn-login:hover:not(:disabled),
    .frb-auth-card .btn-register:hover:not(:disabled),
    .frb-auth-card .btn-reset:hover:not(:disabled),
    .frb-auth-card .btn-update:hover:not(:disabled) { transform: none; }
}