/* 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}

/* 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}