/* =========================================================
   Farmavet Services — Auth / profile / error pages (T-216)
   Linked by: templates/registration/{login,register,password_change_form,
   password_change_done,password_reset_form,password_reset_done,
   password_reset_confirm,password_reset_complete}.html,
   store/templates/registration/verify_required.html,
   store/templates/store/profile.html, templates/{403,403_csrf,404}.html.

   This file SUPERSEDES the page-specific v2 rules of the same selector
   names still sitting in style.css (loaded after style.css, so equal-
   specificity declarations here win) rather than duplicating them under
   new class names — see the dispatch note this task shipped against.

   T-221 dead-selector list — style.css rules that become fully
   unreferenced once this file ships and may be deleted (line numbers as
   of this commit's style.css):
     - .auth-wrap--wide                         (1946) — already unused
       pre-this-task; grepped zero consumers repo-wide.
     - .auth-card                               (1947)
     - .auth-card__logo / __logo img            (1948-1960)
     - .auth-card h1, .auth-card h2              (1961)
     - .auth-sub                                (1962)
     - .auth-alt                                (1963-1970)
     - .auth-links                              (1971)
     - .status-icon--warning                    (1984) [1]
     - .page-head--center .error-code           (926-936)
     - .profile-grid … .form-check input[type=checkbox]  (2248-2296, one
       contiguous block — profile.html is its only consumer)
   NOT dead — do not delete: .auth-wrap (1945), .status-icon (1974-1982)
   and .status-icon--success (1983) remain the ONLY rule for
   order_success.html (T-215/pages/orders.css), which does not link this
   file — leave those three alone until T-215 migrates that page off them.
   [1] .status-icon--warning has no consumer outside this task's files.
   (Exact line numbers drift with future edits — re-grep before deleting.)
   ========================================================= */

/* ----------  Auth card shell  ---------- */
.auth-wrap {
    max-width: 440px;
    margin: 28px auto;
}
@media (max-width: 699px) {
    .auth-wrap { margin: 16px auto; }
}

.auth-card { padding: 28px 22px; }
@media (min-width: 700px) {
    .auth-card { padding: 40px 36px; }
}

.auth-card__logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--forest-50);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    overflow: hidden;
}
.auth-card__logo img { width: 100%; height: 100%; object-fit: contain; padding: 9px; }

.auth-card h1 {
    font-size: var(--fs-26);
    text-align: center;
    margin-bottom: 6px;
}
.auth-sub {
    color: var(--muted);
    text-align: center;
    margin-bottom: 26px;
}
.auth-alt {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--muted);
    font-size: var(--fs-14);
}
.auth-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    font-size: var(--fs-14);
}

/* Status icon (confirmation / warning screens): the shared 78px disc from
   style.css already carries the right background + soft ring per variant —
   this only supplies the glyph colour, since the icon markup now draws
   with stroke="currentColor" (T-203's {% icon %} tag) instead of a
   hard-coded v2 hex. */
.status-icon--success { color: var(--forest-700); }
.status-icon--warning { color: var(--warn); }
/* New variant (auth/error pages only — no style.css consumer to touch):
   neutral tone for "not found" style states. */
.status-icon--muted { background: var(--paper-2); color: var(--muted); }

/* Error pages (403/404): the number goes solid ink instead of the old
   gradient text-clip, sitting above the icon-disc + heading. */
.page-head--center .error-code {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(3.25rem, 2.7rem + 3.6vw, 5rem);
    line-height: 1;
    color: var(--forest-800);
    margin: 4px 0 2px;
}
.page-head--center .status-icon { margin-bottom: 10px; }

/* ----------  Profile page  ---------- */
.profile-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (min-width: 960px) {
    .profile-grid {
        display: grid;
        grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
        align-items: start;
        gap: 24px;
    }
}
.profile-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--r-card);
    border: 1px solid var(--line);
}
.profile-photo-empty {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-card);
    background: var(--paper-2);
    border: 1.5px dashed var(--line-3);
    color: var(--muted);
    text-align: center;
    padding: 20px;
}
.profile-photo-empty .icon { color: var(--forest-100); }
.profile-email {
    margin-top: 18px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-18);
    word-break: break-all;
}
.profile-status { color: var(--muted); margin-bottom: 16px; }

/* Profile edit form: image field (thumbnail + file input + clear checkbox) */
.profile-form-image {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.profile-form-image__thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--r);
    border: 1px solid var(--line);
}
.profile-form-image input[type=file] { width: 100%; }
.profile-form-image .muted { margin: 0; }
.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: var(--fs-13);
    color: var(--muted);
    cursor: pointer;
    margin: 0;
}
.form-check input[type=checkbox] { width: auto; margin: 0; cursor: pointer; }