/* =========================================
   Amaryllis — ACCOUNT SCREENS
   -----------------------------------------
   Login, register, forgot, reset and the signed-in account, all on
   one template. style.css stays the base.

   Figma: a white card centred on a grey field, copy left and the
   illustration right at roughly 44 / 56.
========================================= */

.auth-page {
    /* Figma's auth screens use their own ink, distinct from the rest
       of the site: headings #19181f, labels and "Or" #49475a, the
       modal's secondary text #686677, and #cbcad7 for the rules. */
    --auth-ink: #19181f;
    --auth-body: #49475a;
    --auth-muted: #686677;
    --auth-line: #cbcad7;
    --auth-field: #ffffff;
    --auth-accent: var(--c-brand);

    /* The dark pill on both Figma screens. Not var(--c-ink), which is
       pure black — this is the softer near-black used on the buttons
       elsewhere in the theme. */
    --auth-btn: var(--c-ink);

    /* --- Sizing is the theme's, NOT Figma's --------------------
     * Figma draws these screens at 1340 wide with 64px buttons, 56px
     * fields and 40px pill radii. At desktop that reads far too large
     * against the rest of the site, so the geometry stays as it was:
     * a 1000px card, 48px controls, one 10px radius.
     * TYPE is a different matter — families, sizes, weights and
     * colours all follow the design file exactly.
     * ----------------------------------------------------------- */
    /* --- Shape is Figma's, even though SIZE is not -----------------
     * You asked to keep the theme's smaller type and control heights,
     * and that still holds. But radius is not size: Figma draws BOTH
     * buttons as full pills — the submit is 534 x 64 at radius 40 and
     * the Google button 534 x 64 at radius 32, and on a 64-tall box
     * radius 32 already IS a complete pill (40 simply clamps to one).
     * Rendering them as 10px rectangles was the most visible
     * difference on this screen.
     *
     * 999px rather than a fixed number so they stay pills at the
     * theme's 48px height instead of Figma's 64.
     * ----------------------------------------------------------- */
    --auth-pill: 999px;

    /* Figma: the input boxes are 534 x 56 at radius 12. Height stays at
       the theme's 46; the radius is the design's. */
    --auth-field-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 76vh;
    padding: clamp(24px, 4vw, 60px) var(--section-gutter);
    background: #f4f4f4;
}

.auth-card {
    display: grid;
    /* Figma: form left, artwork right. fr units rather than fixed
       widths so the split survives at any container size. */
    /* Form left, artwork right. Figma splits these 630/710 in a 1340
       card; kept at the theme's 44/56 in a 1000 card, which sits
       better against the rest of the site at desktop. */
    /* Figma 298:4338: the card is 1340 wide — a 630 form column and a
       710 artwork panel, i.e. 47 / 53. Was 44 / 56, so the form ran
       narrow and the illustration too wide. The 1000px cap stays, per
       your call to keep the smaller size. */
    grid-template-columns: 47fr 53fr;
    width: 100%;
    max-width: 1000px;
    overflow: hidden;
    /* Figma 298:4340: radius 24 on the card. */
    border-radius: 24px;
    background: var(--c-white);
    box-shadow: var(--card-shadow);
}

.auth-panel {
    padding: clamp(26px, 3.4vw, 44px);
}

/* =========================================
   1. HEAD
========================================= */
.auth-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

/* Family, weight and colour from Figma (Source Sans Pro w600,
   #19181f). SIZE stays the theme's — Figma's 32 was measured against
   a 580px column and reads oversized in this narrower card. */
.auth-head h1 {
    font-family: var(--font-display);
    font-size: clamp(20px, 1.95vw, 25px);
    font-weight: 600;
    line-height: 1.26;
    color: var(--auth-ink);
}

.auth-alt {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--auth-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.auth-alt:hover {
    color: var(--auth-accent);
}

.auth-lead {
    font-size: 14px;
    line-height: 1.6;
    color: var(--auth-body);
    margin-bottom: 20px;
}

/* =========================================
   2. FIELDS
========================================= */
.auth-field {
    margin-bottom: 16px;
}

/* Type from Figma: Open Sans w400 16 / lh 21.8 / #49475a.
   Spacing stays the theme's. */
.auth-field label,
.auth-label-row label {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.36;
    color: var(--auth-body);
    margin-bottom: 7px;
}

/* Label and the Show toggle share a line, so the toggle sits over
   the field it controls rather than floating beside it. */
.auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.auth-field input[type="text"],
.auth-field input[type="email"],
.auth-field input[type="tel"],
.auth-field input[type="password"],
.auth-phone select {
    /* Figma draws these 534 x 56 with a 12px radius; the theme's 46px
       and 10px are kept. Font size and colour below are Figma's. */
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    background: var(--auth-field);
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-field-radius);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--auth-ink);
    transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

/* The ring is a shadow, not a thicker border — a border change would
   shift the field by a pixel and nudge everything below it. */
.auth-field input:focus,
.auth-phone select:focus {
    outline: none;
    border-color: var(--auth-ink);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

/* Browsers flag a field that failed their own check; only style it
   once the user has actually typed, so an untouched form is not a
   wall of red. */
.auth-field input:not(:placeholder-shown):invalid {
    border-color: #c9695f;
}

.auth-help {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--auth-muted);
}

/* --- Phone: dial code + number --- */
.auth-phone {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 8px;
}

/* Figma 300:4638: the "+1" dial code is Poppins w400 18 / #111111.
   It shares the input rule above for its box, so only the type is
   overridden here. */
.auth-phone select {
    padding-inline: 10px;
    cursor: pointer;
    font-family: var(--font-accent);
    font-weight: 400;
}

/* --- Show / hide password --- */
/* Figma 300:4647: Poppins w400 18 / #666666 at 80%. Was Open Sans
   w600 — wrong family and wrong weight. Size stays at the theme's, per
   your call to keep the smaller auth type. */
.auth-peek {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-accent);
    font-size: 12px;
    font-weight: 400;
    color: var(--auth-muted);
    transition: color 0.25s var(--ease-out);
}

.auth-peek:hover {
    color: var(--auth-ink);
}

/* --- Strength meter -----------------------------------------------
 * Advisory only. The real policy is enforced server-side in
 * amaryllis_validate_password() — this just tells you how you are
 * doing before you submit.
 * ---------------------------------------------------------------- */
.auth-meter {
    height: 3px;
    margin-top: 8px;
    border-radius: 2px;
    background: #ececec;
    overflow: hidden;
}

.auth-meter-bar {
    display: block;
    width: 0;
    height: 100%;
    background: #c9695f;
    transition: width 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}

.auth-meter[data-level="2"] .auth-meter-bar { width: 50%;  background: #d8a13c; }
.auth-meter[data-level="3"] .auth-meter-bar { width: 75%;  background: var(--c-brand); }
.auth-meter[data-level="4"] .auth-meter-bar { width: 100%; background: var(--auth-accent); }
.auth-meter[data-level="1"] .auth-meter-bar { width: 25%; }

/* =========================================
   3. CHECKBOX + ROW
========================================= */
.auth-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 20px;
}

.auth-check input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--auth-ink);
}

/* Figma has this one label in POPPINS w400 16 / lh 24 / #333333 —
   a third font family that the theme does not load. Rather than pull
   in a whole webfont for a single line of consent text, it uses the
   body font at the same size, weight and colour. Say the word if you
   want Poppins enqueued for exactness. */
/* Figma 300:4656: Poppins w400 16 / lh24 / #333333. Poppins is now
   loaded, so this is the design's family rather than a substitute.
   Size stays at the theme's smaller scale. */
.auth-check label {
    font-family: var(--font-accent);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: #333333;
}

.auth-check a {
    color: var(--auth-ink);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-check--inline {
    margin: 0;
    align-items: center;
}

.auth-check--inline input {
    margin-top: 0;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 16px 0 20px;
}

/* =========================================
   4. BUTTONS
========================================= */
.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Figma draws this 534 x 64 as a 40px pill; kept at the theme's
       48px and 10px radius. The LABEL type is Figma's. */
    width: 100%;
    min-height: 48px;
    padding: 13px 22px;
    background: var(--auth-btn);
    border: 1px solid var(--auth-btn);
    border-radius: var(--auth-pill);
    color: var(--c-white);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

/* Brand green on hover, like every other solid CTA on the site.
   Figma gives each of these a Default and a Default_hover, and the
   hover is always #81af4a on #fdfdfd. This was inverting to
   transparent instead. --c-brand is #81af4a. */
.auth-submit:hover,
.auth-submit:focus-visible {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: var(--c-white);
}

/* Submitted state — the script disables the button so a double click
   cannot file the form twice. */
.auth-submit[disabled] {
    opacity: 0.6;
    cursor: default;
}

.auth-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Pairs with .auth-submit in .auth-actions, so it matches its
       height and radius. Figma has no design for this button — it
       only exists on the signed-in view, which the file omits. */
    width: 100%;
    min-height: 48px;
    padding: 13px 22px;
    background: transparent;
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-pill);
    color: var(--auth-ink);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

.auth-ghost:hover {
    border-color: var(--auth-ink);
    background: #f7f7f7;
}

/* --- Divider ---
   Rules drawn with pseudo-elements so the word sits in a real gap
   rather than on top of a line. */
/* Type and rule colour from Figma — Open Sans w400 24 / lh 32.7 /
   #49475a on #cbcad7 rules. Gaps and rule weight stay the theme's. */
.auth-or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    color: var(--auth-body);
}

.auth-or::before,
.auth-or::after {
    content: '';
    flex: 1 1 0;
    height: 1px;
    background: var(--auth-line);
}

/* --- Google --- */
.auth-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Figma draws this 534 x 64 at a 32px radius; kept at the theme's
       48px and 10px. Label type and colour are Figma's. */
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 12px 22px;
    background: var(--c-white);
    /* Figma 298:4358: 1px #9794aa — a warmer grey than the #cbcad7
       used on the field outlines. */
    border: 1px solid #9794aa;
    border-radius: var(--auth-pill);
    color: #313039;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 400;
    /* Rendered as an <a> (it navigates to Google rather than
       submitting), so the underline and visited colour have to go. */
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.auth-google:visited {
    color: #313039;
}

.auth-google:hover {
    border-color: #b5b5b5;
    box-shadow: var(--card-shadow);
}

.auth-google svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

/* =========================================
   5. NOTICES
========================================= */
.auth-notice {
    padding: 13px 16px;
    margin-bottom: 20px;
    border-left: 3px solid currentColor;
    border-radius: 2px;
    font-size: 13.5px;
    line-height: 1.55;
}

/* Focus is moved here by script so the message is announced; a ring
   would read as an error state on a success message. */
.auth-notice:focus {
    outline: none;
}

.auth-notice--ok    { background: #f1f7ea; color: #3f6115; }
.auth-notice--error { background: #fbf0ef; color: #8a2b21; }
.auth-notice--warn  { background: #fcf6e8; color: #7a5a12; }

.auth-notice a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* =========================================
   6. SIGNED-IN VIEW
========================================= */
.auth-details {
    margin-bottom: 26px;
    font-size: 14px;
}

.auth-details dt {
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--auth-muted);
    margin-bottom: 3px;
}

.auth-details dd {
    margin: 0 0 16px;
    color: var(--auth-ink);
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* =========================================
   7. ARTWORK
========================================= */
.auth-art {
    position: relative;
    overflow: hidden;
    /* --- Why this is white and not the old #eaf3f8 ---------------
     * account-art.webp is a PNG with a TRANSPARENT border — the first
     * opaque pixel column sits 88px into a 2130px-wide file, about 4%
     * in, and roughly 5% of the image carries no pixels at all. So
     * whatever colour is behind it shows through as a band down the
     * side of the photograph, between the form and the picture.
     *
     * It used to be a pale blue, which read as a stripe of the wrong
     * colour rather than as part of the artwork. White matches
     * .auth-card, which is what the form column sits on, so the two
     * halves now meet invisibly.
     *
     * Note this is a property of the FILE. Re-export the artwork
     * without transparency and the colour here stops mattering.
     * ---------------------------------------------------------- */
    background: var(--c-white);
}

.auth-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* =========================================
   8. HONEYPOT
   Off-screen rather than display:none, which some bots check for.
========================================= */
.auth-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.label-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* =========================================
   9. RESPONSIVE
========================================= */
@media (max-width: 860px) {
    /* The illustration is atmosphere, not information — below this
       width the form needs the whole card. */
    .auth-card {
        grid-template-columns: 1fr;
        max-width: 480px;
    }

    .auth-art {
        display: none;
    }
}

@media (max-width: 480px) {
    .auth-page {
        padding: 18px 14px 40px;
        min-height: 0;
    }

    .auth-panel {
        padding: 24px 20px 28px;
    }

    /* Stacked, because the two do not fit side by side without the
       link wrapping mid-phrase. */
    .auth-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .auth-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .auth-phone {
        grid-template-columns: 88px 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-field input,
    .auth-phone select,
    .auth-submit,
    .auth-ghost,
    .auth-google,
    .auth-peek,
    .auth-meter-bar {
        transition: none;
    }
}


/* === desktop -2px === */
/* -----------------------------------------------------------------
   2px off the desktop type, as asked. These selectors set a FIXED
   size, which applies at every width -- editing the value in place
   would have shrunk the phone too, and the phone was already right.
   So the reduction is scoped to desktop and the base rule, which is
   what mobile uses, is left exactly as it was.
   ----------------------------------------------------------------- */
@media (min-width: 1025px) {
    .auth-alt { font-size: 11px; }   /* was 13px */
    .auth-lead { font-size: 12px; }   /* was 14px */
    .auth-field label, .auth-label-row label { font-size: 11px; }   /* was 13px */
    .auth-field input[type="text"], .auth-field input[type="email"], .auth-field input[type="tel"], .auth-field input[type="password"], .auth-phone select { font-size: 13px; }   /* was 15px */
    .auth-help { font-size: 10px; }   /* was 12px */
    .auth-peek { font-size: 10px; }   /* was 12px */
    .auth-check label { font-size: 10.5px; }   /* was 12.5px */
    .auth-submit { font-size: 13px; }   /* was 15px */
    .auth-ghost { font-size: 13px; }   /* was 15px */
    .auth-or { font-size: 11px; }   /* was 13px */
    .auth-google { font-size: 13px; }   /* was 15px */
    .auth-notice { font-size: 11.5px; }   /* was 13.5px */
    .auth-details { font-size: 12px; }   /* was 14px */
    .auth-details dt { font-size: 10px; }   /* was 12px */
}