/* Avatar upload row — the preview beside the file control.
 *
 * Loaded by the signup page, the Google social-signup page and Edit Profile,
 * which is why it is its own file rather than three copies in auth.css and
 * user_profile.css.
 *
 * Every --dx-unit reference here carries its `, 1px` fallback. Without it the
 * whole declaration is dropped on any browser that has not resolved the
 * custom property yet, and the preview collapses.
 *
 * Written that way on purpose: test_no_px_drift's fallback guard scans the
 * WHOLE file, comments included (its sibling px test skips comment lines --
 * the two are not symmetric), so spelling the bare form out in prose fails
 * the suite. */

.avatar-upload-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.avatar-upload-preview {
    width: calc(96 * var(--dx-unit, 1px));
    height: calc(96 * var(--dx-unit, 1px));
    flex: 0 0 auto;
    border-radius: 50%;

    /* Matches every other avatar surface: the stored file is already square,
     * but a preview straight off the user's disk is not yet cropped. */
    object-fit: cover;
    background-color: var(--bg-elevated);
    border: calc(2 * var(--dx-unit, 1px)) solid var(--accent);
    box-shadow: 0 0 0 calc(3 * var(--dx-unit, 1px)) var(--accent-bg);
}

.avatar-upload-controls {
    flex: 1 1 calc(200 * var(--dx-unit, 1px));
    min-width: 0;
}

.avatar-upload-controls .avatar-upload-input {
    width: 100%;
    padding: 0.5rem 0.6rem;
    background-color: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: var(--font-family);
}

/* A real focus ring, not the 12%-opacity tint the rest of the auth form uses.
 *
 * `.auth-form input:focus` in auth.css matches this input too and sets
 * `outline: none` with a `var(--accent-bg)` box-shadow -- and --accent-bg is
 * rgba(186, 186, 244, 0.12). On a text field with a visible border that reads
 * as focus; on a file input, which the browser draws as a bare button, it is
 * very nearly invisible. outline-width and outline-offset are exempt from the
 * proportional-sizing guard (tabletop/tests/test_no_px_drift.py), so plain px
 * is correct here. */
.avatar-upload-controls .avatar-upload-input:focus,
.avatar-upload-controls .avatar-upload-input:focus-visible {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: none;
}

.avatar-upload-controls .form-help {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.4;
}

/* "Remove my picture and use the default" — only rendered once there is a
 * picture to remove. Laid out as one line so the checkbox and its label read
 * together rather than as two unrelated controls. */
.avatar-upload-clear {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.avatar-upload-clear label {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

/* The colour is repeated here rather than left to auth.css's `.error-message`
 * because `.auth-box p` on the signup page sets --text-secondary at
 * specificity (0,1,1) and wins against it. The partial renders a div for that
 * reason; this rule (0,2,0) is what keeps a rejection red even if someone
 * changes the tag back. */
.avatar-upload-controls .avatar-upload-error {
    margin-top: 0.35rem;
    color: var(--danger);
    font-size: 0.8rem;
}

@media (max-width: 480px) {
    .avatar-upload-row {
        gap: 0.75rem;
    }
}