in this line (Login's "Start a 30-day
free trial") had NO author colour - auth screens load no Bootstrap - so it
rendered the browser's default blue rgb(0,0,238), and purple once visited,
beside "Forgot password?" in #1B5E8E. Same colour and weight as every other
auth link now. A plain `a` selector covers :visited too (an author rule
beats the browser's :visited colour). Focus: the card's standard ring,
.pe-auth-onnavy .pe-auth__card :focus-visible above. Inline in a sentence,
so no 44px box (WCAG 2.5.8 inline exception). */
.pe-auth__foot a { color: var(--pe-text-link); font-weight: var(--pe-fw-semibold); } /* 6.91:1 on white */
.pe-auth__foot a:hover { color: var(--pe-text-link-hover); }
/* .pe-auth__legal — REMOVED 21 Sep, superseded by .pe-pubfoot (D24, section 4b).
It was a second support line, and the footer now carries the D21 support
contact. Two support lines on one screen means two places to update when the
real number arrives, and one of them would have been missed. It also carried
an INVENTED address, support@propedge.om, which nobody had confirmed — see
the .pe-pubfoot__tbc note. If a future screen needs a quiet line under the
card that is not support, give it a new class; do not revive this one. */
/* ==========================================================================
4. FORM PIECES THIS SHELL ADDS
========================================================================== */
/* The error summary. One place, above the form, focused on failure, so a
screen-reader user and a sighted user are told the same thing in the same
order. role="alert" is on the element; it is EMPTY until there is something
to say — an empty live region that already exists announces reliably, one
inserted at the moment of failure often does not. */
.pe-auth__alert { margin-block-end: var(--pe-space-20); }
.pe-auth__alert:empty { display: none; }
.pe-auth__alert:focus { outline: 3px solid var(--pe-border-focus); outline-offset: 2px; }
/* When more than one field is wrong, the summary LISTS them as links. Clicking
one moves focus to that field. A summary that only says "check the form"
makes a screen-reader user hunt for what is actually wrong. */
.pe-auth__errlist { margin: var(--pe-space-8) 0 0; padding-inline-start: var(--pe-space-20); }
.pe-auth__errlist li { margin-block-start: var(--pe-space-4); }
.pe-auth__errlist a { color: var(--pe-danger-fg); font-weight: var(--pe-fw-semibold); }
/* NOTICES WITHOUT A ONE-WORD LAST LINE — OPT-IN (27 Sep fifth round, from
design/css/propedge-auth.css; brought live 28 Sep with D35). A modifier a
page adds to a notice it owns: every Forgot Password notice, and Login's
"password changed" notice only - never an approved Login state. Acts on
the notice's text block, the beside the icon. */
.pe-alert--nowidow > div { text-wrap: pretty; }
/* Password field with a Show / Hide control inside it.
Deliberately a WORD, not an eye icon. Two reasons: the icon set has no eye
and inventing one needs approval; and "Show"/"Hide" states what will happen,
where a crossed-out eye is ambiguous about which state it is reporting. */
.pe-pw { position: relative; display: block; }
/* THE ONE PLACE IN THIS FILE THAT USES PHYSICAL PROPERTIES, deliberately.
The input is pinned to direction:ltr (a password is Latin), so ITS OWN
inline-end is always the right-hand side — while the Show/Hide button is
positioned against the WRAPPER, which does mirror. Using padding-inline-end
on the input therefore reserved space on the right while the button sat on
the left: measured in Arabic at 1440, the reserved gap and the button were
on opposite sides and a long password would have run underneath the button.
Keying the padding to [dir] is the correct fix, not a shortcut. */
.pe-pw .pe-input { padding-right: 4.75rem; padding-left: var(--pe-space-12); }
[dir="rtl"] .pe-pw .pe-input { padding-right: var(--pe-space-12); padding-left: 4.75rem; }
.pe-pw__toggle {
position: absolute;
inset-inline-end: var(--pe-space-4);
inset-block-start: 50%;
transform: translateY(-50%);
min-height: var(--pe-control-h-md); /* 44px */
min-width: var(--pe-control-h-md);
padding-inline: var(--pe-space-8);
border: 0; background: transparent;
color: var(--pe-text-link); /* 6.91:1 on white */
font: inherit; font-size: var(--pe-fs-sm); font-weight: var(--pe-fw-semibold);
cursor: pointer;
border-radius: var(--pe-radius-xs);
}
.pe-pw__toggle:hover { color: var(--pe-brand-700); }
/* A password is always LTR, in both languages, and never letter-spaced. */
.pe-input[type="password"], .pe-pw .pe-input { direction: ltr; text-align: start; }
[dir="rtl"] .pe-input[type="password"], [dir="rtl"] .pe-pw .pe-input { text-align: right; }
/* An email address is always LTR too. Left in the RTL flow it splits around
the @ and the dots exactly the way the +968 dial code does (defect W3-02). */
.pe-input[type="email"] { direction: ltr; }
[dir="rtl"] .pe-input[type="email"] { text-align: right; }
/* Caps Lock. A status, not an error: it does not set aria-invalid, does not
block submit and does not steal focus. */
.pe-caps {
display: none;
align-items: flex-start; gap: var(--pe-space-8);
margin-block-start: var(--pe-space-8);
padding: var(--pe-space-8) var(--pe-space-12);
background: var(--pe-warning-bg); border: 1px solid var(--pe-warning-border);
border-radius: var(--pe-radius-sm);
color: var(--pe-warning-fg); /* 6.93:1 on #FDF3E2 */
font-size: var(--pe-fs-caption);
}
.pe-caps.is-on { display: flex; }
/* ---------------------------------------------------------------------------
THE OPTIONS ROW — "Keep me signed in" on the inline-start, "Forgot password?"
on the inline-end, sitting between the password field and the button (E52).
WHY A ROW AND NOT TWO STACKED BLOCKS. These are the two things a person does
on this screen that are not "type the password", and they are opposites: one
is "let me back in faster next time", the other is "I cannot get in now".
Side by side they read as a pair of choices; stacked, the checkbox reads as
another form field and gets ticked without being read.
It WRAPS rather than shrinking. The helper text under the checkbox is a full
sentence, so below roughly 480px the two no longer fit on one line and the
Forgot link drops to its own row, still on the inline-end. Nothing is
truncated and nothing overlaps — measured at 375 and at 320.
--------------------------------------------------------------------------- */
.pe-auth__options {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--pe-space-4) var(--pe-space-16);
margin-block: calc(var(--pe-space-8) * -1) var(--pe-space-20);
}
/* The checkbox block. .pe-choice (propedge-components.css) already gives the
label a 44px minimum height and a pointer cursor, so the whole label — box
and words — is one hit target. It is NOT decoration and must not read as
decoration. */
.pe-auth__keep { flex: 1 1 15rem; min-width: 0; }
.pe-auth__keep .pe-choice { padding-block: var(--pe-space-4); }
.pe-auth__keep .pe-choice__text {
font-size: var(--pe-fs-sm);
line-height: var(--pe-lh-snug); /* explicit, per E51 */
font-weight: var(--pe-fw-medium);
}
/* The helper sentence sits OUTSIDE the