/* Widgets shared by the sign-in / account pages (Pages/*.cshtml). Each page keeps its own
   inline <style> for layout; this file only styles the controls auth-forms.js drives.
   Linked AFTER the page's <style>, and selectors are at least as specific as the pages'
   generic input / button rules (e.g. button[type="submit"]), so these win without !important. */

/* Password field with a Show / Hide button inside its right edge. */
.pw-field { position: relative; }
.pw-field input[type] { padding-right: 4.25rem; }
.pw-field .pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 2.55rem;
    min-width: 3.75rem;
    min-height: 0;
    margin: 0;
    padding: 0 .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0 8px 8px 0;
    color: #4f46e5;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
}
.pw-field .pw-toggle:hover { background: rgba(79, 70, 229, .08); }
.pw-field .pw-toggle:focus-visible { outline: 2px solid #4f46e5; outline-offset: -2px; }
.pw-field .pw-toggle[hidden] { display: none; }

/* A field followed by a hint: the wrapper drops the input's own bottom gap so the hint sits
   under it, and the hint carries the gap instead (no negative margins). */
.field-tight input[type] { margin-bottom: .3rem; }

/* A rule shown before the user types, then ticked / crossed live. */
.pw-hint { color: #64748b; font-size: .75rem; margin: 0 0 1rem; min-height: 1em; line-height: 1.35; }
.pw-hints { margin-bottom: 1rem; }
.pw-hints .pw-hint { margin: 0; }
.pw-hint.ok  { color: #047857; }
.pw-hint.bad { color: #b91c1c; }

/* Secondary action styled as a quiet outline button (resend, copy, open-in-app). */
button.btn-quiet, a.btn-quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 44px;
    width: auto;
    margin: 0;
    padding: 0 1rem;
    background: #fff;
    color: #4f46e5;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
button.btn-quiet:hover, a.btn-quiet:hover { background: #eef2ff; }
button.btn-quiet:disabled { color: #94a3b8; border-color: #e2e8f0; background: #f8fafc; cursor: default; }
button.btn-quiet[hidden], a.btn-quiet[hidden] { display: none; }
button.btn-quiet.full, a.btn-quiet.full { width: 100%; }