/* Shared auth-form styles (OAuth buttons, "or" divider, inline messages) used
   by /login, /signup, /coach-login and /coach-signup. Page-specific layout
   (hero, fields, links) stays in each page's inline <style>. All colours come
   from the page's own `:root` vars, so this file needs no palette of its own. */

.oauth-row{display:flex;gap:12px;margin-bottom:16px}
.oauth-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border:1.5px solid rgba(13,27,22,.15);border-radius:12px;font-size:14.5px;font-weight:500;cursor:pointer;background:#fff;transition:border-color .15s,background .15s;font-family:inherit}
.oauth-btn:hover{border-color:rgba(13,27,22,.3);background:#fafafa}
.oauth-btn svg{width:18px;height:18px;flex-shrink:0}

/* #1123 — the pressed/loading state lives on the OAuth button the user
   touched (the pages' JS toggles `disabled` + the `busy` class; the email
   submit button is never touched). color:transparent hides the label text
   but NOT the brand svg (the svg uses its own fills); the spinner centres
   over the button. Pages currently wiring this: /login, /signup. */
.oauth-btn:disabled{opacity:.75;cursor:default}
.oauth-btn.busy{position:relative;color:transparent;pointer-events:none}
.oauth-btn.busy::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-8px 0 0 -8px;border:2px solid rgba(13,27,22,.25);border-top-color:var(--leaf);border-radius:50%;animation:oauth-busy .7s linear infinite}
@keyframes oauth-busy{to{transform:rotate(360deg)}}

/* The "or log in with email" divider. The label sits in its own span so it can't
   wrap, and the ::before/::after rules are capped (flex:0 1 64px) so the line
   length hugs the label instead of spanning the whole card. */
.oauth-or{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0 20px;font-size:13px;color:rgba(13,27,22,.4)}
.oauth-or::before,.oauth-or::after{content:'';flex:0 1 64px;min-width:16px;height:1px;background:rgba(13,27,22,.1)}
.oauth-or-label{white-space:nowrap;flex-shrink:0;padding:0 2px}

/* Inline form feedback (success / error). Given clear breathing room above and
   below so it never sits flush against the submit button or the links row. */
.msg{padding:12px 16px;border-radius:12px;font-size:14px;margin:10px 0 16px;display:none}
.msg.err{background:rgba(193,75,58,.1);color:var(--danger);display:block}
.msg.ok{background:rgba(155,229,100,.15);color:var(--moss);display:block}

/* Password show/hide + strength hint (#1095). The DOM is built by
   /js/auth-form-widgets.js (field > .pw-wrap > input + .pw-toggle button;
   .pw-strength bar + text) — do NOT re-inline either helper. All colours come
   from the page's own :root tokens (--danger/--gold/--leaf), as above. */
.field.has-pw-toggle .pw-wrap{position:relative}
.field.has-pw-toggle .pw-wrap input{padding-right:46px}
.pw-toggle{position:absolute;top:50%;right:8px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:8px;background:none;cursor:pointer;color:rgba(13,27,22,.45);font-family:inherit}
.pw-toggle:hover{color:var(--ink)}
.pw-toggle svg{width:18px;height:18px;pointer-events:none}
.pw-toggle .pw-eye-off{display:none}
.pw-toggle[aria-pressed="true"] .pw-eye{display:none}
.pw-toggle[aria-pressed="true"] .pw-eye-off{display:block}
.pw-strength{margin-top:6px}
.pw-strength.pw-empty .pw-strength-bar{visibility:hidden}
.pw-strength-bar{height:4px;border-radius:2px;background:rgba(13,27,22,.1);overflow:hidden}
.pw-strength-fill{height:100%;width:0;border-radius:2px;background:var(--danger);transition:width .15s ease}
.pw-strength-fill.pw-fair{background:var(--gold)}
.pw-strength-fill.pw-good,.pw-strength-fill.pw-strong{background:var(--leaf)}
.pw-strength-text{font-size:12.5px;color:rgba(13,27,22,.55);margin-top:4px;min-height:1em}
/* #1124 — the shared reset panel (AuthFormWidgets.attachPasswordReset).
   Self-contained styling: the pages' own .field rules are NOT assumed here;
   palette vars come from each page's :root, same as the .msg rules above. */
.pw-reset{margin-top:16px;padding:16px;border:1px solid rgba(13,27,22,.1);border-radius:12px;background:rgba(233,239,232,.5);display:flex;flex-direction:column;gap:10px}
.pw-reset[hidden]{display:none}
.pw-reset-label{font-size:13px;font-weight:600;display:block}
.pw-reset-email{width:100%;padding:10px 14px;border:1.5px solid rgba(13,27,22,.15);border-radius:10px;font-size:15px;font-family:inherit;background:#fff}
.pw-reset-email:focus{outline:none;border-color:var(--leaf);box-shadow:0 0 0 3px rgba(47,107,79,.12)}
.pw-reset-send{align-self:flex-start;padding:10px 18px;border-radius:999px;border:none;background:var(--ink);color:var(--lime);font-weight:700;font-size:14px;font-family:inherit;cursor:pointer}
.pw-reset-send:disabled{opacity:.6;cursor:default}
.pw-reset-msg{font-size:13.5px;color:var(--danger)}
.pw-reset-msg.pw-reset-ok{color:var(--moss)}
.pw-reset-msg:empty{display:none}