/* ─────────────────────────────────────
   Confirm it is you — the re-authentication block
   ─────────────────────────────────────

   ⭐ ONE BLOCK, THIRTEEN SCREENS. Five pages ask this before something
   consequential — moving the address you sign in with, handing over everything
   you have ever written, turning two-factor off, reprinting the backup codes,
   deleting the account — and the Obsidian token flows and the assistant consent
   ask it before minting a key to the whole journal.
   The markup is `templates/core/auth/_confirm_its_you.html`.

   ⛔ **THESE RULES LIVED IN `account-security.css`, AND EIGHT OF THE THIRTEEN
   PAGES DO NOT LOAD IT.** Delete account, change password, set password, the
   Settings security tab, the assistant consent screen and all three Obsidian
   token pages rendered the password prompt with no styling at all — the label
   at body size with no separation, the fields unspaced, the reason paragraph
   running into whatever preceded it. Found 2026-09-09 while reading
   `/tokens/generate/`, which is where it is most visible.

   ⚠️ **THE `.emotion-dot` LESSON, AGAIN**, and `prompt-note.css` states it:
   *a rule that four pages need cannot live in one page's stylesheet.* This is
   the second time in one day — `components/references.css` was the first.
   So it loads from `base.html`, like every other component. */

/*
 * ⭐ **ONE BLOCK, THREE PAGES.** Moving the address, downloading everything and
 * undoing a move all ask the same question first, and each drew its own version
 * of it with the reason in a different place.
 */
.reauth {
    margin-bottom: var(--space-md);
}

/* ⭐ **IT STARTS A SECTION, SO IT NEEDS AIR ABOVE IT.** `CONFIRM IT IS YOU` is
   an eyebrow, and on every page that asks it, it followed the previous field's
   help text with nothing between them — *"So you can recognise it later"* and
   the label reading as one paragraph on `/tokens/generate/`, and the label
   sitting on step 2 of the pairing list. `:not(:first-child)` so a block that
   OPENS its form (the assistant consent screen) does not gain a stray gap at
   the top of the card. */
.reauth:not(:first-child) {
    margin-top: var(--space-md);
}

.reauth__label {
    margin: 0 0 var(--space-2xs);
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* ⭐ Side by side, because together they are one act. Stacked, with the reason
   between them, they read as two separate demands. */
.reauth__fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.reauth__fields .form-group {
    flex: 1 1 12rem;
    margin: 0;
}

/* The code is six characters; it does not need to match the password field.
   On its own (a social account with two-factor) it may take the row. */
.reauth__code {
    flex: 1 1 8rem;
    max-width: 12rem;
}

/* Security Batch 2, row 5.1: the backup-code box, under the pair, quieter. */
.reauth__backup {
    margin: var(--space-xs) 0 0;
}

.reauth__backup-label {
    display: block;
    margin: 0 0 var(--space-2xs);
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/*
 * ⭐ **UNDERNEATH, NOT ABOVE.** Above the fields this reads as a rule you have
 * to satisfy. Underneath it reads as a courtesy, which is what it is.
 */
.reauth__why {
    margin: var(--space-2xs) 0 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}