/* activation — the account-activation card and its expired-link twin
   (templates/activate_account.html, templates/invitation_expired.html) and
   the password-reset pair (apps/password/.../password_lost.html,
   password_reset_sent.html).

   Loaded per page through the modal's `extra_head` block, not with the
   chrome: these two screens are the whole audience, they are reached once
   per member ever, and every other page in the instance would carry the
   rules for nothing.

   Everything here is layout and hierarchy inside a standard small modal
   panel — no new colours, no new radii. What it has to establish, in order:
   WHO is asking (the hub), WHAT to do (the heading), and only then the form.
   The old screen had none of that: the hub's name appeared once, mid-
   sentence, unexplained, on a page that otherwise looked exactly like a
   phishing form asking a stranger for a password. */

/* THE ONE MARK AT THE TOP, boxed. .splash-header was written for the platform
   wordmark, which is a known asset at a known size, and it constrains nothing;
   a hub's own uploaded logo is whatever the hub uploaded — Organisation.save
   only caps it at a 512px bounding box — so it arrived here 512px tall and
   pushed everything else off the card. Unscoped on purpose: this stylesheet
   is loaded by the two activation screens and nothing else, so there is no
   other .splash-header for it to reach. */
.splash-header img {
    max-height: 3.5rem;
    max-width: 70%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* The wordmark fallback, for an install that has uploaded no logo at all. A
   paragraph rather than a heading: the panel's title is the page's only h1,
   and this is a mark, not a heading. */
.activation-wordmark {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

/* THE LOGIN NAME — a statement, not a field. It was a disabled input, which
   looks like a control that failed to load and invites a click that does
   nothing; the address itself is the point, so it is set at reading size and
   the label above it is the quiet half. */
.activation-login-name {
    margin-bottom: 1.5rem;

    p {
        margin: 0;
    }
}

.activation-login-label {
    font-size: var(--pat-form-label-font-size, 0.9em);
    font-weight: 600;
}

.activation-login-value {
    /* Long enough to wrap on a phone, and it must wrap at the @ rather than
       widening the panel or being cut. */
    overflow-wrap: anywhere;
    font-size: 1.05em;
    margin: 0.5rem 0 !important;
}

.activation-login-help {
    margin-top: 0.3em !important;
    font-size: var(--pat-form-help-font-size, 0.85em);
    color: var(--colour-byline, silver);
}

/* The consent sits apart from the rules above it. Without this the checkbox
   reads as a fourth line of the password checklist — same indent, same
   spacing — and agreeing to the terms is a different kind of act from
   satisfying a rule. */
fieldset.vertical .password-rules + .group.pat-checklist,
fieldset.vertical .password-rules + .pat-message + .group.pat-checklist {
    margin-top: 1.5rem;
}

/* The same gap on the reset card, where what follows the rules is the
   confirmation field rather than a consent: without it the second label
   read as a fourth rule. */
fieldset.vertical .password-rules + label,
fieldset.vertical .password-rules + .pat-message + label {
    margin-top: 1.5rem;
}