/* Headwayflow account entry — identity.css -----------------------------------

   Every unauthenticated Identity screen (sign in, create account, password
   reset, email confirmation, two-factor, lockout) is built from the `hf-id-*`
   layer in this file.

   WHY RAW CSS AND NOT MUDBLAZOR
   The pages under `Components/Account/Pages` (outside `Manage/`) render under
   STATIC server-side rendering — they declare `[ExcludeFromInteractiveRouting]`
   so cookie issuance, antiforgery and HTTP redirects work on a real request.
   That rules out every MudBlazor control that needs a SignalR circuit
   (`MudTextField`, `MudButton OnClick`, `ISnackbar`). So these screens are
   plain HTML — `EditForm`, `<InputText>`, `<button>` — and this file is what
   makes that HTML read as a designed product surface rather than a scaffold.

   The screens no longer wrap themselves in `MudPaper`: the card, its header,
   the alerts and the buttons are all defined here, which is what lets the
   layout be a single centred composition with its own vertical rhythm instead
   of a paper box inheriting the global `.mud-paper` outline. `AuthShell.razor`
   owns that markup so no page repeats it.

   BRAND
   Warm-stone palette from `docs/Headwayflow-Design-Spec.md` §24, mirrored in
   `HeadwayflowTheme.cs`. No surface is white. The card is cream-on-cream,
   defined by a `--stone-200` hairline plus a soft warm shadow, and the page
   behind it carries a low-contrast stone wash so the card reads as lifted
   without needing a lighter fill.

   Tokens are re-declared locally (as `account.css`, `integrations.css` and
   `paywall.css` do) so this sheet stays independently loadable.

   Sections
     1. Tokens
     2. Page shell and centring
     3. Brand lockup
     4. Card
     5. Status glyph
     6. Alerts
     7. Form fields
     8. Password reveal, caps-lock hint
     9. Password strength and requirements
    10. Buttons
    11. Separator and external providers
    12. Footer, meta links, small print
    13. Detail lists and inline code
    14. Responsive
    15. Motion and forced colors
--------------------------------------------------------------------------- */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
    /* Stone ramp (spec §24). Local copies, same values as timeline.css. */
    --hf-id-stone-50: #F5F0E8;
    --hf-id-stone-100: #EDE5D6;
    --hf-id-stone-200: #DDD0B8;
    --hf-id-stone-300: #C4B296;
    --hf-id-stone-400: #A89478;
    --hf-id-stone-500: #8A7659;
    --hf-id-stone-600: #6B5A42;
    --hf-id-stone-700: #4A3E2E;

    --hf-id-surface: #F5F2E8;
    --hf-id-surface-soft: #E8E3D2;

    --hf-id-ink: #2C2C2A;
    --hf-id-ink-muted: #6B6449;
    --hf-id-ink-faint: #8A8578;

    /* Amber is reserved for "live / time passing" cues (spec §24); on these
       screens it only ever appears as the mid step of the strength meter. */
    --hf-id-amber: #C89848;
    --hf-id-amber-dark: #926A22;

    /* Rust — the warm error tone. */
    --hf-id-rust: #A0544A;
    --hf-id-rust-dark: #884439;
    --hf-id-rust-soft: rgba(160, 84, 74, 0.10);
    --hf-id-rust-line: rgba(160, 84, 74, 0.30);

    --hf-id-focus-ring: 0 0 0 3px rgba(138, 118, 89, 0.28);
    --hf-id-focus-ring-danger: 0 0 0 3px rgba(160, 84, 74, 0.22);

    --hf-id-radius-card: 18px;
    --hf-id-radius-control: 10px;
    --hf-id-radius-sm: 8px;

    --hf-id-shadow-card:
        0 18px 46px rgba(74, 62, 46, 0.10),
        0 3px 10px rgba(74, 62, 46, 0.05);
}

/* 2. Page shell and centring ---------------------------------------------- */

/* `MainLayout`'s unauthenticated branch already supplies the cream page
   background and the horizontal gutters, so this only owns the vertical
   composition: centre the card in what is left of the viewport after the
   layout's own top strip and bottom padding (~8rem), and let the page grow
   normally when the form is taller than that. */
.hf-id-page,
.hf-id-page *,
.hf-id-page *::before,
.hf-id-page *::after {
    box-sizing: border-box;
}

.hf-id-page {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 8rem);
    min-height: calc(100dvh - 8rem);
    padding: 1.25rem 0 2.5rem;
    color: var(--hf-id-ink);
    font-family: 'DM Sans', 'Helvetica Neue', Helvetica, system-ui, sans-serif;
}

/* Two very low-contrast stone washes behind the card. The card keeps the flat
   cream brand surface; the depth comes from the ground behind it rather than
   from lightening the card towards white.

   FIXED, not a background on .hf-id-page. The layout hands this element a padded
   content column, so a background painted on it would stop at that padding and
   leave a visible seam down the left edge and across the top. Fixed + inset: 0
   fills the viewport instead, and no ancestor establishes a containing block
   (there is no transform, filter or contain anywhere in MainLayout.razor.css,
   app.css or MudBlazor's layout rules), so "fixed" really means the viewport.

   `z-index: 0` and NOT -1, with the shell lifted to 1. A negative layer paints
   before in-flow block descendants of the stacking context (CSS 2.1 §E.2 step 2
   vs step 3), and MainLayout puts the page's cream background on an ordinary
   div — `.hf-web-content` — which would therefore paint straight over the wash
   and hide it completely. As a positioned layer at 0 it lands above that
   background, and the shell above it. */
.hf-id-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60rem 36rem at 8% -10%, rgba(138, 118, 89, 0.13), transparent 62%),
        radial-gradient(46rem 32rem at 98% 106%, rgba(74, 62, 46, 0.09), transparent 60%);
}

.hf-id-shell {
    /* Positioned and lifted so it sits above the fixed wash layer — see the
       paint-order note on .hf-id-page::before. */
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 25.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Create-account and two-column content get a little more room. */
.hf-id-shell--wide {
    max-width: 29rem;
}

/* 3. Brand lockup --------------------------------------------------------- */

.hf-id-brand {
    display: inline-flex;
    align-self: center;
    text-decoration: none;
    border-radius: var(--hf-id-radius-sm);
}

.hf-id-brand:focus-visible {
    outline: none;
    box-shadow: var(--hf-id-focus-ring);
}

/* The lockup draws itself — see _content/Headwayflow.Client.Branding/logo.css. This surface
   only picks the size: 21px, one step up the brand scale from the 17px the mark takes inside
   app chrome, because on a signed-out screen the logo IS the page's orientation.

   No hover state. The old wordmark darkened its text on hover; the brand kit's misuse panel
   forbids recolouring the split, and the anchor still has its focus ring. */
.hf-id-logo {
    font-size: 1.3125rem;
}

/* 4. Card ----------------------------------------------------------------- */

.hf-id-card {
    background: var(--hf-id-surface);
    border: 1px solid var(--hf-id-stone-200);
    border-radius: var(--hf-id-radius-card);
    box-shadow: var(--hf-id-shadow-card);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
}

.hf-id-card-head {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* The only <h1> on the page, so `FocusOnNavigate` has something real to move
   focus to — the old MudText h4 gave screen readers no page heading at all. */
.hf-id-title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.021em;
    color: var(--hf-id-ink);
}

.hf-id-subtitle {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--hf-id-ink-muted);
}

.hf-id-card-body {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

/* EditForm renders a bare <form>; give it the same rhythm as the body. */
.hf-id-form {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

/* 5. Status glyph --------------------------------------------------------- */

/* Terminal screens (check your email, password reset, locked out, access
   denied) lead with a glyph instead of a form. One disc, brand-tinted, sized
   so it reads as reassurance rather than decoration. */
.hf-id-glyph {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--hf-id-stone-100);
    color: var(--hf-id-stone-700);
    flex: none;
}

.hf-id-glyph svg {
    display: block;
    width: 1.375rem;
    height: 1.375rem;
}

/* A touch more air than the header's own gap, so the disc reads as a mark above
   the heading rather than a bullet attached to it. */
.hf-id-card-head .hf-id-glyph {
    margin-bottom: 0.3rem;
}

.hf-id-glyph--danger {
    background: var(--hf-id-rust-soft);
    color: var(--hf-id-rust);
}

/* Success is the only glyph in this flow reporting a FINISHED thing rather than
   warning about an unfinished one — email confirmed, email updated, password
   updated — so the disc gets a soft double ring and reads as a seal instead of
   one more status dot.

   box-shadow, not a border or a nested element: a border would eat into the
   2.75rem disc and shrink the checkmark inside it, and AuthShell renders the
   glyph as a single span. Both spreads are the same stone as the fill, so this
   adds no colour to the palette, and `forced-colors: active` drops shadows
   entirely — which leaves the flat disc, exactly as before. */
.hf-id-glyph--success {
    background: rgba(138, 118, 89, 0.14);
    color: var(--hf-id-stone-700);
    box-shadow:
        0 0 0 0.25rem rgba(138, 118, 89, 0.10),
        0 0 0 0.5rem rgba(138, 118, 89, 0.05);
}

/* The rings extend half a rem past the disc, which is more than the 0.3rem the
   header leaves under a glyph — without this the outer ring sits on the h1. */
.hf-id-card-head .hf-id-glyph--success {
    margin-bottom: 0.7rem;
}

/* 6. Alerts --------------------------------------------------------------- */

.hf-id-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-radius: var(--hf-id-radius-control);
    border: 1px solid var(--hf-id-stone-200);
    background: var(--hf-id-stone-50);
    color: var(--hf-id-ink);
    font-size: 0.875rem;
    line-height: 1.5;
}

.hf-id-alert svg {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.0625rem;
    flex: none;
}

.hf-id-alert p {
    margin: 0;
}

.hf-id-alert p + p {
    margin-top: 0.35rem;
}

.hf-id-alert--error {
    border-color: var(--hf-id-rust-line);
    background: var(--hf-id-rust-soft);
    color: var(--hf-id-rust-dark);
}

.hf-id-alert--success {
    border-color: var(--hf-id-stone-300);
    background: rgba(138, 118, 89, 0.10);
    color: var(--hf-id-stone-700);
}

/* Links inside an alert take the alert's own tone — see section 12, which is
   where the anchor colours live so the cascade order is explicit. */

/* 7. Form fields ---------------------------------------------------------- */

.hf-id-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* Label on the left, optional affordance on the right ("Forgot?"). Keeping the
   reset link on the password row is what stops it competing with the primary
   action the way a third stacked link under the button does. */
.hf-id-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.hf-id-label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: var(--hf-id-ink-muted);
}

.hf-id-input {
    width: 100%;
    min-height: 2.875rem;
    padding: 0.6875rem 0.875rem;
    /* 1rem exactly: iOS Safari zooms the viewport on focus below 16px. */
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.4;
    color: var(--hf-id-ink);
    background: var(--hf-id-stone-50);
    border: 1px solid var(--hf-id-stone-300);
    border-radius: var(--hf-id-radius-control);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    appearance: none;
}

.hf-id-input::placeholder {
    color: var(--hf-id-ink-faint);
}

.hf-id-input:hover:not(:disabled):not(:focus) {
    border-color: var(--hf-id-stone-400);
}

.hf-id-input:focus {
    outline: none;
    border-color: var(--hf-id-stone-500);
    box-shadow: var(--hf-id-focus-ring);
}

.hf-id-input:disabled {
    background: var(--hf-id-stone-100);
    color: var(--hf-id-ink-faint);
    cursor: not-allowed;
}

/* Blazor stamps `invalid` on a field whose model value failed validation. */
.hf-id-input.invalid {
    border-color: var(--hf-id-rust);
}

.hf-id-input.invalid:focus {
    box-shadow: var(--hf-id-focus-ring-danger);
}

/* Chrome's autofill paints its own near-white fill, which is the one thing the
   brand forbids. An inset shadow the size of the field is the only reliable way
   to repaint it. */
.hf-id-input:-webkit-autofill,
.hf-id-input:-webkit-autofill:hover,
.hf-id-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--hf-id-ink);
    -webkit-box-shadow: 0 0 0 3rem var(--hf-id-stone-50) inset;
    box-shadow: 0 0 0 3rem var(--hf-id-stone-50) inset;
    caret-color: var(--hf-id-ink);
}

.hf-id-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 3rem var(--hf-id-stone-50) inset, var(--hf-id-focus-ring);
    box-shadow: 0 0 0 3rem var(--hf-id-stone-50) inset, var(--hf-id-focus-ring);
}

/* Verification codes: monospaced and tracked out so a 6-digit code is easy to
   read back against the authenticator app. */
.hf-id-input--code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.125rem;
    letter-spacing: 0.34em;
    text-align: center;
    padding-right: 0.5rem;
}

.hf-id-input--code::placeholder {
    letter-spacing: 0.34em;
}

/* Validation text from <ValidationMessage>. Inline per field only — the forms
   deliberately carry no <ValidationSummary>, which would repeat every message a
   second time at the top of the card. */
.hf-id-validation,
.hf-id-validation.validation-message {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--hf-id-rust-dark);
}

.hf-id-hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--hf-id-ink-faint);
}

/* Side-by-side fields (first / last name) that stack on narrow phones. */
.hf-id-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 30rem) {
    .hf-id-row--split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.hf-id-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--hf-id-ink);
    cursor: pointer;
}

.hf-id-check input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.125rem 0 0;
    accent-color: var(--hf-id-stone-500);
    flex: none;
}

/* 8. Password reveal, caps-lock hint -------------------------------------- */

.hf-id-inputwrap {
    position: relative;
    display: block;
}

/* Room for the reveal button, plus a little more so a long password does not
   run under it. */
.hf-id-inputwrap .hf-id-input {
    padding-right: 3rem;
}

.hf-id-reveal {
    position: absolute;
    top: 50%;
    right: 0.3125rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: var(--hf-id-radius-sm);
    background: transparent;
    color: var(--hf-id-ink-muted);
    cursor: pointer;
}

.hf-id-reveal svg {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
}

/* Only one of the two icons is ever shown; `aria-pressed` is the source of
   truth so the button, the icon and assistive tech cannot disagree. */
.hf-id-reveal .hf-id-reveal-off,
.hf-id-reveal[aria-pressed="true"] .hf-id-reveal-on {
    display: none;
}

.hf-id-reveal[aria-pressed="true"] .hf-id-reveal-off {
    display: block;
}

.hf-id-reveal:hover {
    background: rgba(138, 118, 89, 0.12);
    color: var(--hf-id-stone-700);
}

.hf-id-reveal:focus-visible {
    outline: none;
    box-shadow: var(--hf-id-focus-ring);
}

/* Set by identity.js while Caps Lock is on and a password field has focus.
   Amber, because it is an observation and not an error. */
.hf-id-caps {
    display: none;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--hf-id-amber-dark);
}

.hf-id-caps[data-hf-caps="on"] {
    display: flex;
}

.hf-id-caps svg {
    width: 0.9375rem;
    height: 0.9375rem;
    flex: none;
}

/* 9. Password strength and requirements ----------------------------------- */

.hf-id-pw {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hf-id-pw-meter {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
}

.hf-id-pw-seg {
    height: 0.25rem;
    border-radius: 999px;
    background: var(--hf-id-stone-200);
    transition: background 0.18s ease;
}

/* Score is written to the container by identity.js: 0 empty, 1 weak,
   2 fair, 3 good, 4 strong. */
.hf-id-pw[data-hf-score="1"] .hf-id-pw-seg:nth-child(-n+1),
.hf-id-pw[data-hf-score="2"] .hf-id-pw-seg:nth-child(-n+2) {
    background: var(--hf-id-rust);
}

.hf-id-pw[data-hf-score="3"] .hf-id-pw-seg:nth-child(-n+3) {
    background: var(--hf-id-amber);
}

.hf-id-pw[data-hf-score="4"] .hf-id-pw-seg {
    background: var(--hf-id-stone-500);
}

.hf-id-pw-label {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--hf-id-ink-muted);
}

.hf-id-pw-label strong {
    font-weight: 600;
    color: var(--hf-id-ink);
}

/* The requirement list is rendered from the server's own IdentityOptions, so it
   can never drift from what the password validator will actually accept. */
.hf-id-pw-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hf-id-pw-rule {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--hf-id-ink-faint);
}

.hf-id-pw-rule::before {
    content: '';
    width: 0.9375rem;
    height: 0.9375rem;
    border-radius: 50%;
    border: 1px solid var(--hf-id-stone-300);
    background: transparent;
    flex: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.hf-id-pw-rule[data-hf-met="true"] {
    color: var(--hf-id-stone-700);
}

.hf-id-pw-rule[data-hf-met="true"]::before {
    border-color: var(--hf-id-stone-500);
    background:
        var(--hf-id-stone-500)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2 4.7 8.4 9.4 3.7' fill='none' stroke='%23F5F2E8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 0.75rem 0.75rem no-repeat;
}

/* 10. Buttons ------------------------------------------------------------- */

/* Sentence case, not the Material uppercase these pages used to inherit:
   uppercase button text is the single clearest "this is a scaffold" tell, and
   it reads as shouting on a calm surface. */
.hf-id-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.625rem 1.125rem;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.002em;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--hf-id-radius-control);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.hf-id-btn svg {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

.hf-id-btn:focus-visible {
    outline: none;
    box-shadow: var(--hf-id-focus-ring);
}

.hf-id-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.hf-id-btn--primary {
    background: var(--hf-id-stone-500);
    border-color: var(--hf-id-stone-500);
    color: var(--hf-id-surface);
    box-shadow: 0 1px 2px rgba(74, 62, 46, 0.18);
}

.hf-id-btn--primary:hover:not(:disabled) {
    background: var(--hf-id-stone-600);
    border-color: var(--hf-id-stone-600);
    color: var(--hf-id-surface);
}

.hf-id-btn--primary:active:not(:disabled) {
    background: var(--hf-id-stone-700);
    border-color: var(--hf-id-stone-700);
}

.hf-id-btn--secondary {
    background: transparent;
    border-color: var(--hf-id-stone-300);
    color: var(--hf-id-stone-700);
}

.hf-id-btn--secondary:hover:not(:disabled) {
    background: rgba(138, 118, 89, 0.10);
    border-color: var(--hf-id-stone-400);
    color: var(--hf-id-stone-700);
}

.hf-id-btn--block {
    width: 100%;
}

/* Pending state, driven by identity.js on submit. The label is swapped for a
   spinner so a slow sign-in reads as working rather than ignored, and the
   button stops taking clicks so the form cannot be posted twice. */
.hf-id-btn[data-hf-pending] {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.hf-id-btn[data-hf-pending] > * {
    visibility: hidden;
}

.hf-id-btn[data-hf-pending]::after {
    content: '';
    position: absolute;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    color: var(--hf-id-surface);
    animation: hf-id-spin 0.7s linear infinite;
}

.hf-id-btn--secondary[data-hf-pending]::after {
    color: var(--hf-id-stone-700);
}

@keyframes hf-id-spin {
    to {
        transform: rotate(360deg);
    }
}

/* 11. Separator and external providers ------------------------------------ */

/* Rendered only when an OAuth provider is actually registered. When none is,
   nothing about external sign-in appears anywhere on the screen — no empty
   section, and none of the scaffold's "configure this in ASP.NET" copy. */
.hf-id-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hf-id-ink-faint);
}

.hf-id-or::before,
.hf-id-or::after {
    content: '';
    height: 1px;
    flex: 1 1 auto;
    background: var(--hf-id-stone-200);
}

.hf-id-providers {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
    margin: 0;
}

/* 12. Footer, meta links, small print ------------------------------------- */

/* `app.css` sets a global indigo `a { color }` that predates the warm palette;
   these screens are pure custom markup, so the link colour is restated for
   every anchor inside the shell rather than relying on inheritance. */
.hf-id-shell a:not(.hf-id-btn):not(.hf-id-brand) {
    color: var(--hf-id-stone-700);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.25rem;
}

/* Links sitting INSIDE a sentence are underlined, not just tinted. On this warm
   palette the link stone (#4A3E2E) and the body ink-muted (#6B6449) are close
   enough that colour alone would leave "Create an account" looking like the rest
   of "New to Headwayflow?" — which is also WCAG 1.4.1. Standalone links that
   read as controls ("Forgot password?") are excluded: they are not in running
   text and get their underline on hover. */
/* Selectors carry .hf-id-shell so they outrank the `text-decoration: none`
   above, which has three classes of its own. */
.hf-id-shell .hf-id-foot a:not(.hf-id-btn),
.hf-id-shell .hf-id-fineprint a:not(.hf-id-btn),
.hf-id-shell .hf-id-alert a:not(.hf-id-btn),
.hf-id-shell .hf-id-hint a:not(.hf-id-btn),
.hf-id-shell .hf-id-steps a:not(.hf-id-btn),
.hf-id-shell .hf-id-subtitle a:not(.hf-id-btn) {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--hf-id-stone-300);
}

.hf-id-shell a:not(.hf-id-btn):not(.hf-id-brand):hover {
    color: var(--hf-id-stone-700);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: currentColor;
}

/* An alert's links belong to the alert, not to the page's link colour: a rust
   error panel with a stone link in the middle of it reads as two messages.
   Declared here, after the rule above, because it has to win on order. */
.hf-id-shell .hf-id-alert a:not(.hf-id-btn),
.hf-id-shell .hf-id-alert a:not(.hf-id-btn):hover {
    color: inherit;
    text-decoration-color: currentColor;
}

.hf-id-shell a:not(.hf-id-btn):not(.hf-id-brand):focus-visible {
    outline: none;
    box-shadow: var(--hf-id-focus-ring);
}

.hf-id-link-quiet {
    font-size: 0.8125rem;
}

/* The one cross-flow link (sign in ↔ create account) sits outside the card, so
   it is available without competing with the primary action inside it. */
.hf-id-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--hf-id-ink-muted);
}

.hf-id-foot p {
    margin: 0;
}

.hf-id-fineprint {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--hf-id-ink-faint);
}

/* Actions inside a card that are not the form's primary button. */
.hf-id-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.hf-id-actions > .hf-id-btn {
    flex: 1 1 12rem;
}

/* 13. Detail lists and inline code ---------------------------------------- */

/* "Check your email" screens echo the address back so the user can spot a typo
   without leaving the page.

   On its own line, not inline in the sentence: the chip's padding leaves a
   visible gap before whatever punctuation follows it, and an address is easier
   to scan for a typo when it is not wrapped inside prose. */
.hf-id-echo-row {
    margin: 0;
}

.hf-id-echo {
    display: inline-block;
    max-width: 100%;
    padding: 0.3125rem 0.625rem;
    border-radius: var(--hf-id-radius-sm);
    background: var(--hf-id-stone-100);
    border: 1px solid var(--hf-id-stone-200);
    color: var(--hf-id-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.hf-id-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--hf-id-ink-muted);
}

.hf-id-steps li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.hf-id-steps li::before {
    content: '';
    width: 0.3125rem;
    height: 0.3125rem;
    margin-top: 0.5rem;
    border-radius: 50%;
    background: var(--hf-id-stone-300);
    flex: none;
}

/* 14. Responsive ---------------------------------------------------------- */

@media (max-width: 30rem) {
    .hf-id-page {
        /* A phone keyboard eats most of the viewport, so stop centring and let
           the card start near the top where the fields stay reachable. The
           background wash stays: it lives on a fixed ::before layer, costs
           nothing, and keeps the ground consistent with the desktop screens. */
        justify-content: flex-start;
        min-height: 0;
        padding: 0.5rem 0 2rem;
    }

    .hf-id-card {
        padding: 1.375rem 1.125rem;
        border-radius: 14px;
        box-shadow: 0 8px 24px rgba(74, 62, 46, 0.07);
    }

    .hf-id-title {
        font-size: 1.375rem;
    }
}

/* 15. Motion and forced colors -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .hf-id-input,
    .hf-id-btn,
    .hf-id-pw-seg,
    .hf-id-pw-rule::before {
        transition: none;
    }

    .hf-id-btn[data-hf-pending]::after {
        animation-duration: 2.4s;
    }
}

@media (forced-colors: active) {
    .hf-id-card,
    .hf-id-input,
    .hf-id-alert {
        border: 1px solid CanvasText;
    }

    .hf-id-pw-seg {
        border: 1px solid CanvasText;
    }
}