/*
 * Auth pages — Figma "Primo Vino WWW", page Dizainas (design/specs/auth-build-brief.md,
 * design/figma-cache/auth.json). Split-panel (login, register, reset-request, reset-sent,
 * reset-new) + centered (OTP, success) layouts. All exact values are measured from Figma, not
 * eyeballed. Aktiv Grotesk substitutes with --font-sans (Inter) per tokens.css.
 */

/* Off-palette hexes from auth.json.newColorsFound (not in tokens.css). */
.pv-auth {
    --auth-success: #07c881;      /* success check + heading (== --taskas-online, not --sekmes-zalia) */
    --auth-google-label: #4e4e4e; /* Google SSO button label */
}

/* ---- Split-panel shell -------------------------------------------------- */
/* Form column left (x=294, w≈364), red brand panel flush to the frame's right edge. */
.pv-auth--split {
    display: grid;
    /* minmax(0, 1fr): the bare 1fr track's auto min-size (driven by the form column content)
       overflowed the 1280px viewport by ~6px; minmax(0,…) lets the track shrink to fair share. */
    grid-template-columns: minmax(0, 1fr) 852px;
    align-items: start;
    background: var(--neutrali);
}

/* Column rhythm measured off the login comp (2623:7591): breadcrumb ink 104 (so no top padding —
   the breadcrumb carries its own 16px), title 208, Google 256, inputs 325/387, submit 449,
   "Pamiršote…" 509, Registruotis 559 (Design-QA y≈234 "Tarpus sužiūrėit"). */
.pv-auth__form {
    width: 364px;
    margin-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
    padding: 0 0 64px;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.pv-auth--split > .pv-auth__form > .pv-auth__title {
    margin-top: 44px;
}

.pv-auth--split > .pv-auth__form > .pv-auth__form {
    margin-top: 7px;
}

/* Design-QA R13 — the comp measures the tail by CAP BANDS (every Figma text layer here carries
   leadingTrim: CAP_HEIGHT, so its y IS the cap top): submit bottom 493 → hint cap 509 (16px),
   hint cap bottom 519 → Registruotis box 559 (40px). The 16px column gap is box-to-box, so the
   3.8px of leading that sits above the caps is trimmed back out here, and the outline button
   carries the remainder of the 40px. */
.pv-auth--split .pv-auth__hint {
    margin-top: -4px;
}

.pv-auth--split .pv-auth__btn--outline {
    margin-top: 20px;
}

/* The <form> reuses .pv-auth__form for its flex stacking, but it's nested inside the column —
   reset the column offset/padding so its fields fill the 364px column, not shift right. */
.pv-auth__form .pv-auth__form {
    width: 100%;
    margin-left: 0;
    padding: 0;
    /* Figma tightens the field group to 16px (email→password→submit), vs the 24px column gap. */
    gap: 16px;
}

.pv-auth__panel {
    margin-top: 0;
    /* Figma 2270:6075/2272:4382: panel 659px, bottom flush to the footer at y747 — but that is the
       COMP's viewport. Held as a fixed height it stopped mid-screen on anything taller and left a
       band of page background between the panel and the footer. Floor + stretch keeps the comp
       height where the comp applies and reaches the footer everywhere else. */
    min-height: 659px;
    align-self: stretch;
    background: var(--ryski-raudona);
    display: grid;
    /* Monogram is bottom-flush and left-of-centre (Figma: 59px from the panel's left edge,
       big red gap on the right) — NOT horizontally centred. */
    place-items: end start;
    padding-left: 59px;
}

.pv-auth__panel-monogram {
    width: 501px;
    max-width: 90%;
    height: auto;
}

.pv-auth__panel-monogram img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- Centered shell ----------------------------------------------------- */
/* Rhythm measured off the OTP comp (2623:9877): icon 208, title cap 368, body cap 437, OTP row
   487, submit 583, resend cap 651, footer 781 — i.e. 120px under the header, a 40px block
   rhythm, 120px before the footer. Was 96/24, which rode the whole page ~45px high
   (Design-QA R14). The success comp (2272:4455) uses the same 40px rhythm. */
.pv-auth--centered {
    min-height: calc(100vh - var(--header-h));
    background: var(--neutrali);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 120px var(--container-pad);
    gap: 40px;
}

/* Leading trim. The comp's 40px is cap-band to cap-band (leadingTrim: CAP_HEIGHT on every text
   layer), but a CSS line box also carries leading above the caps and below the baseline — pull
   that back out so the ink, not the box, lands on the comp rows. */
.pv-auth--centered > .pv-auth__title--big {
    margin-top: -8.9px;
    margin-bottom: -10px;
}

.pv-auth--centered > .pv-auth__body {
    margin-top: -3.8px;
    margin-bottom: -3.9px;
}

/* Resend sits 24px (not 40) under the submit pill in the comp; its own <form> wrapper adds a
   further 7.8px of leading above the caps. */
.pv-auth--centered > form:not(.pv-auth__form) {
    margin-top: -24px;
}

.pv-auth--centered .pv-auth__form {
    width: 280px;
    margin-left: 0;
    padding: 0;
    align-items: stretch;
    /* OTP row bottom 543 → submit 583. */
    gap: 40px;
}

.pv-auth__icon {
    display: block;
    margin: 0 auto;
}

/* ---- Titles / copy ------------------------------------------------------ */
.pv-auth__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 1.2px;
    line-height: 1.28;
    color: var(--ryski-raudona);
}

/* Multi-word split-panel titles use the brand two-tone motif: the first word keeps the
   .pv-auth__title emphasis (bold-italic); the remainder is Aktiv Grotesk Regular — upright,
   weight 400 (Figma reset frames 2492:5249 / 2492:5365 title override run). */
.pv-auth__title-rest {
    font-weight: 400;
    font-style: normal;
}

.pv-auth__title--big {
    font-size: 40px;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 1.2;
}

.pv-auth__title--success {
    color: var(--auth-success);
}

.pv-auth__body {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.28;
    color: var(--juoda);
}

.pv-auth__body a {
    color: inherit;
    text-decoration: underline;
}

.pv-auth__hint {
    margin: 0;
    font-size: 14px;
    /* Figma 17.92px (100% intrinsic). Without it the 24px body line-height dropped the cap band
       ~3px and shoved the whole tail of the login column out of rhythm (Design-QA R13). */
    line-height: 17.92px;
    color: var(--sub-pilka-shade);
}

/* The comp draws "Pamiršote slaptažodį?" plain (no rule) — the UA underline was ours. Kept on
   hover/focus so the link is still discoverable as one. */
.pv-auth__hint a {
    color: inherit;
    text-decoration: none;
}

.pv-auth__hint a:hover,
.pv-auth__hint a:focus-visible {
    text-decoration: underline;
}

/* Pill inputs are the shared component (.pv-field / .input, components/forms.css). */

/* ---- Buttons ------------------------------------------------------------ */
.pv-auth__btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: 40px;
    background: var(--juoda);
    color: var(--balta);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

/* Design-QA y≈601 (verify-email "Patvirtinti", Group 4394): the dark pill hovers RED. */
.pv-auth__btn:not(.pv-auth__btn--google, .pv-auth__btn--outline):hover,
.pv-auth__btn:not(.pv-auth__btn--google, .pv-auth__btn--outline):focus-visible {
    background: var(--ryski-raudona);
    color: var(--balta);
}

.pv-auth__btn--fixed {
    width: 280px;
}

.pv-auth__btn--outline {
    background: none;
    border: 1px solid var(--sub);
    color: var(--juoda);
    font-weight: 600;
}

.pv-auth__btn--google {
    height: 45px;
    gap: 10px;
    border: 1px solid var(--neutrali-pilka);
    border-radius: 48px;
    background: var(--neutrali);
    color: var(--auth-google-label);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.pv-auth__btn--google img {
    width: 16px;
    height: 16px;
}

/* ---- Checkbox ----------------------------------------------------------- */
.pv-auth__check {
    display: flex;
    align-items: flex-start;
    /* Figma: box at x=294 (20 wide), label at x=322 → 8px, not 12. */
    gap: 8px;
    font-size: 14px;
    line-height: 1.28;
    color: var(--juoda);
    cursor: pointer;
}

/* Figma "Component 71" (2623:9805): 20x20 r8 white box on a 1px --neutrali-pilka outline.
   appearance:none is what makes the border/radius apply at all — the native control was
   ignoring both (Design-QA y≈514). Checked mirrors the newsletter box: --juoda + white tick. */
.pv-auth__check input {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid var(--neutrali-pilka);
    border-radius: 8px;
    background: var(--balta);
    cursor: pointer;
}

.pv-auth__check input:checked {
    background-color: var(--juoda);
    border-color: var(--juoda);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 10.2l3 2.8 6-6' fill='none' stroke='white' stroke-width='1'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
}

/* ---- OTP boxes ---------------------------------------------------------- */
.pv-auth__otp {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.pv-auth__otp input {
    box-sizing: border-box;
    width: 40px;
    height: 56px;
    border: 1px solid var(--neutrali-pilka);
    border-radius: 12px;
    background: var(--balta);
    text-align: center;
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 700;
    color: #000;
}

/* Design-QA R14 y≈528 "Ne tas stilius": on a clean load box 1 wore the global 2px --ryski-raudona
   ring at 2px offset (base.css :focus-visible) because the controller autofocused it — the comp
   has six identical resting boxes. The autofocus is gone (otp_input_controller.js), and focus
   now reads the way the rest of the form family reads it: state on the border itself, no offset
   ring (components/forms.css "Aktyvus"). --juoda rather than the red/green field states — it is
   the OTP digits' own ink, cannot be misread as error or success, and clears 3:1 by a mile. */
.pv-auth__otp input:focus-visible {
    outline: none;
    border-color: var(--juoda);
    box-shadow: inset 0 0 0 1px var(--juoda);
}

/* ---- Flash inside the form --------------------------------------------- */
.pv-auth__form .pv-flash {
    margin: 0;
}

/* ---- Text-link button (OTP "resend code") ------------------------------- */
.pv-auth__linkbtn {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--juoda);
    text-decoration: underline;
    cursor: pointer;
}

/* ---- Mobile: drop the red panel, form goes full width ------------------- */
@media (max-width: 900px) {
    .pv-auth--split {
        display: block;
    }

    .pv-auth__form {
        width: auto;
        max-width: 364px;
        margin: 0 auto;
        padding: 24px var(--container-pad) 64px;
    }

    /* The desktop 44px is the comp's breadcrumb-to-title gap inside a full-height column; on a
       800px screen it stacks with the column gap and pushed the H1 a third of the way down. */
    .pv-auth--split > .pv-auth__form > .pv-auth__title {
        margin-top: 8px;
    }

    .pv-auth__panel {
        display: none;
    }

    /* 42px tap target; the negative margin gives the padding straight back so the measured line
       rhythm of the column is unchanged. */
    .pv-auth__hint a {
        display: inline-block;
        padding-block: 12px;
        margin-block: -12px;
    }

    .pv-auth__check {
        min-height: 44px;
        padding-block: 12px;
    }
}