/* Shared handle field — the "frontdesk.page/<name>" input with live
   availability feedback. Used by the signup form and the Account Settings
   rename card, so every rule here is class-scoped; the page-specific ids stay
   on the elements for each page's own submit handler to bind to.

   This file owns the control's chrome for BOTH hosts rather than deferring to
   the host stylesheet, because accountSettings.ejs loads it outside any
   .auth-page scope. Its metrics are deliberately identical to .auth-control in
   auth.css — 44px min-height, 1px --fd-control-border, --fd-radius-sm, one
   focus rule — so the handle field is not the odd one out on the signup form,
   which it was: it alone was 14px (the only field on the page that triggered
   iOS zoom-on-focus) and a different height and text inset from its siblings.
   If .auth-control's metrics change, change them here too.

   Load this AFTER the page's own stylesheet so these rules win on source
   order. */

.usernameFieldWrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 44px;
    background: var(--fd-surface);
    border: 1px solid var(--fd-control-border);
    border-radius: var(--fd-radius-sm);
    transition: border-color 0.15s ease;
}

.usernameFieldWrapper:hover {
    border-color: var(--fd-text-secondary);
}

/* State borders. Both clear 3:1 against the field fill and the page behind
   it, and each matches the colour of the icon shown alongside it. */
.usernameFieldWrapper.available {
    border-color: var(--fd-success-text);
}

.usernameFieldWrapper.taken {
    border-color: var(--fd-danger-text);
}

/* Focus is a quiet border darkening, matching .auth-control in auth.css — no
   ring, no accent colour. Placed AFTER the state colours so a focused field
   shows one border, not a fight between focus and verdict; the tick or cross
   in the field keeps carrying the availability state while you type. */
.usernameFieldWrapper:focus-within {
    border-color: var(--fd-text);
}

/* Account Settings disables the input once the rename quota for the window is
   spent. Last in the file so it beats the state classes above — a field that
   cannot be edited must not still be advertising "available". */
.usernameFieldWrapper:has(input:disabled) {
    background: var(--fd-bg-secondary);
    border-color: var(--fd-border);
}

.usernameFieldWrapper input:disabled {
    color: var(--fd-text-secondary);
    cursor: not-allowed;
}

/* The affix is real text, not a placeholder — it reads as the first half of
   the URL the visitor is composing. --fd-text-secondary (7.58:1) against the
   near-black value the user types keeps the two halves distinct; the old
   #888 prefix sat at the same weight as the old #9aa0a6 placeholder, so the
   whole field read as one run of grey. */
.usernameFieldPrefix {
    display: flex;
    align-items: center;
    padding-left: 14px;
    font-size: 15px;
    color: var(--fd-text-secondary);
    user-select: none;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Page-agnostic: the border and focus ring live on the wrapper, so the input
   itself must contribute neither, whatever the host page's input styles say. */
.usernameFieldWrapper input {
    font: inherit;
    font-size: 16px;   /* below 16px, iOS zooms the page on focus */
    line-height: 1.4;
    color: var(--fd-text);
    flex: 1;
    min-width: 0;
    padding: 10px 4px 10px 1px;
    background: transparent;
    border: none;
    border-radius: inherit;
    outline: none;
    box-shadow: none;
}

.usernameFieldWrapper input:focus {
    outline: none;
    box-shadow: none;
}

.usernameFieldStatusIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Same 40px as .auth-adorn in auth.css, so on the signup form the
       availability tick sits on the same vertical line as the eye buttons in
       the password fields below it. */
    flex: 0 0 40px;
    /* Colours the tick/cross, which are injected with stroke="currentColor"
       by usernameAvailability.js so the palette lives here and not in JS. */
    color: var(--fd-text-secondary);
}

.usernameFieldWrapper.available .usernameFieldStatusIcon {
    color: var(--fd-success-text);
}

.usernameFieldWrapper.taken .usernameFieldStatusIcon {
    color: var(--fd-danger-text);
}

.usernameSpinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--fd-border);
    border-top-color: var(--fd-primary);
    border-radius: 50%;
    animation: usernameFieldSpin 0.6s linear infinite;
}

@keyframes usernameFieldSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .usernameSpinner {
        animation-duration: 2s;
    }
}

/* The availability verdict was previously a border colour and an icon and
   nothing else — invisible to a screen reader, and colour-only for everyone
   else. usernameAvailability.js injects one of these alongside the icon; the
   container is a live region, so the verdict is spoken when it lands. */
.usernameFieldSrOnly {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The saved-vs-typed preview line. Signup does not use it — its affix already
   shows the whole URL inline, so a second copy underneath was duplicate — but
   the Account Settings rename card does, where the point is comparing the new
   handle against the one currently live. */
.usernameFieldPreview {
    font-size: 13px;
    color: var(--fd-text-secondary);
    padding: 2px 0;
}

.usernameFieldPreviewUrl {
    color: var(--fd-primary);
    font-weight: 500;
}

@media (max-width: 320px) {
    .usernameFieldPreview {
        font-size: 12px;
    }

    /* At the narrowest width the affix would leave too little room for the
       handle itself; the input keeps the full field. */
    .usernameFieldPrefix {
        font-size: 14px;
        padding-left: 12px;
    }
}