/* account_security.css styles the forgot password form, the email link pages, the confirm your email banner, and the Turnstile slot */

/* "Forgot password?" sits under the password box, aligned right */
.auth_forgot_btn { justify-self: end; background: none; border: 0; color: var(--color_periwinkle); font: inherit; font-size: var(--text_md); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: var(--space_2) 0; min-height: 44px; margin-top: calc(var(--space_2) * -1); }

/* hover lightens the link slightly */
.auth_forgot_btn:hover { color: var(--color_paper); }

/* visible keyboard focus on the link */
.auth_forgot_btn:focus-visible { outline: 2px solid var(--color_rose); outline-offset: 2px; border-radius: var(--radius_xs); }

/* the Turnstile widget slot keeps the form spacing even before the widget loads */
.turnstile_slot { min-height: 65px; color: var(--color_muted); font-size: var(--text_md); }

/* hidden slots take no space */
.turnstile_slot[hidden] { display: none; }

/* green confirmation text inside forms */
.form_success { margin: 0; color: var(--color_sage); font-size: var(--text_md); line-height: 1.5; }

/* note under the email box while a new address waits for confirmation */
.pf_pending_email { color: var(--color_muted); }

/* the waiting address stands out in honey */
.pf_pending_email strong { color: var(--color_honey); overflow-wrap: anywhere; }

/* the narrow centered column for the email link pages */
.recovery_page { max-width: 480px; margin: 0 auto; }

/* the raised card that holds each email link page */
.recovery_card { margin-top: var(--space_4); background: var(--color_panel); border-radius: var(--radius_lg); padding: var(--space_6); display: grid; gap: var(--space_4); box-shadow: 0 1px 0 var(--tint_outline); }

/* page heading in the display face */
.recovery_title { margin: 0; font-family: var(--font_display); font-weight: 400; font-size: var(--text_2xl); color: var(--color_paper); }

/* body text on the email link pages */
.recovery_text { margin: 0; color: var(--color_muted); line-height: 1.6; }

/* the choose a new password form */
.recovery_form { display: grid; gap: var(--space_4); }

/* label above each password box */
.recovery_label { display: grid; gap: var(--space_2); font-size: var(--text_md); color: var(--color_muted); }

/* password boxes match the sign in dialog */
.recovery_input { min-height: 44px; background: var(--color_panel_raised); border: 1px solid transparent; border-radius: var(--radius_sm); padding: var(--space_2) var(--space_3); color: var(--color_paper); font: inherit; font-size: var(--text_base); }

/* focus ring on the password boxes */
.recovery_input:focus-visible { outline: 2px solid var(--color_rose); outline-offset: 1px; }

/* buttons in the cards sit left and size to their text */
.recovery_card .btn { justify-self: start; }

/* inline text button inside error messages */
.link_btn { background: none; border: 0; padding: 0; color: var(--color_periwinkle); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* the slim confirm your email bar under the top nav */
.verify_banner { position: relative; z-index: 5; margin: 72px var(--gutter) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space_4); flex-wrap: wrap; padding: var(--space_3) var(--space_4); border-radius: var(--radius_md); background: var(--tint_honey); color: var(--color_paper); animation: verify_banner_in var(--duration_slow) var(--ease_out) both; }

/* banner text */
.verify_banner_text { margin: 0; font-size: var(--text_md); line-height: 1.5; }

/* the address stands out in honey */
.verify_banner_text strong { color: var(--color_honey); font-weight: 700; overflow-wrap: anywhere; }

/* resend and close buttons in a row */
.verify_banner_actions { display: flex; align-items: center; gap: var(--space_2); }

/* the close cross */
.verify_banner_close { min-width: 44px; min-height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: var(--radius_sm); color: var(--color_muted); font-size: var(--text_xl); cursor: pointer; }

/* close cross hover */
.verify_banner_close:hover { color: var(--color_paper); background: var(--tint_paper); }

/* keyboard focus on the close cross */
.verify_banner_close:focus-visible { outline: 2px solid var(--color_rose); outline-offset: 2px; }

/* the banner slides down a little as it appears */
@keyframes verify_banner_in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* no slide for people who reduce motion */
@media (prefers-reduced-motion: reduce) { .verify_banner { animation: none; } }

/* phones stack the banner text above the buttons */
@media (max-width: 600px) { .verify_banner { margin-top: 64px; } .recovery_card { padding: var(--space_5); } }