/*
 * RI Scouts — Sign-in, onboarding and link pages
 *
 * One look for every page people reach outside the dashboards to sign in,
 * set up their account or act on a link from an email: auth (sign-in and
 * sign-up, which keeps its photo panel on wide screens), forgot_password,
 * reset_password, verify-email, register_invite, onboarding,
 * scout-onboarding, manager-onboarding, coach-review, metric-verify,
 * guardian_verify, guardian, maintenance and 404.
 *
 * The pattern is the logo above a centred card, a centred title, fields
 * with teal labels, and the dashboard buttons at full width. Linked after
 * views/layout/stylesheets.php; a page's own <style> keeps only what is
 * specific to it (the onboarding steps, the star rating, and so on).
 */

html { background:var(--dark); }  /* no white edge when a phone overscrolls */

/* ── Frame: the logo above a centred card ─────────────────── */
.auth-wrap       { width:100%;max-width:440px; }
.auth-wrap.wide  { max-width:600px; }
.auth-logo       { display:flex;justify-content:center;margin-bottom:28px; }
.auth-logo img   { display:block;height:var(--logo-standalone);width:auto;border-radius:10px; }
.auth-card       { background:var(--card);border:1px solid var(--border);border-radius:20px;padding:40px 36px;box-shadow:0 20px 60px rgba(var(--black-rgb), 0.5); }
.auth-card + .auth-card { margin-top:18px; }
.auth-card.center { text-align:center; }
.auth-card > :last-child { margin-bottom:0; }

/* ── Headings ─────────────────────────────────────────────── */
.auth-head       { text-align:center;margin-bottom:28px; }
.auth-eyebrow    { display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:8px;font-size:var(--text-xs);font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--primary); }
.auth-tag        { display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;padding:4px 10px;border-radius:8px;background:rgba(var(--role-accent-rgb), 0.1);border:1px solid rgba(var(--role-accent-rgb), 0.25);color:var(--role-accent);font-size:0.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase; }
.auth-title      { font-family:var(--font-display);font-size:2rem;font-weight:400;letter-spacing:2px;line-height:1.1;overflow-wrap:break-word; }
.auth-sub        { margin-top:8px;font-size:0.88rem;line-height:1.6;color:rgba(var(--white-rgb), 0.55); }
.auth-text       { margin-bottom:20px;font-size:0.85rem;line-height:1.7;color:rgba(var(--white-rgb), 0.6); }

/* Status screens (link expired, email sent, done): an icon in a ring */
.auth-icon       { width:72px;height:72px;margin:0 auto 22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--primary);background:rgba(var(--primary-rgb), 0.08);border:2px solid rgba(var(--primary-rgb), 0.2); }
.auth-icon.error { color:var(--error);background:rgba(var(--error-rgb), 0.08);border-color:rgba(var(--error-rgb), 0.2); }
.auth-icon.warn  { color:var(--pending);background:rgba(var(--pending-rgb), 0.08);border-color:rgba(var(--pending-rgb), 0.25); }
.auth-code       { font-family:var(--font-display);font-size:6rem;line-height:1;color:var(--primary);opacity:0.25;margin-bottom:6px; }  /* 404 */

/* ── Fields ───────────────────────────────────────────────── */
.auth-field      { margin-bottom:18px; }
.auth-field > label, .auth-label { display:block;margin-bottom:8px;font-size:var(--text-xs);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--primary); }
.auth-field input, .auth-field select, .auth-field textarea {
  width:100%;padding:13px 16px;background:var(--input-bg);border:1.5px solid rgba(var(--white-rgb), 0.08);border-radius:10px;
  color:var(--white);font-family:var(--font-body);font-size:0.92rem;outline:none;transition:border-color 0.25s,background 0.25s;
}
.auth-field input:focus, .auth-field select:focus, .auth-field textarea:focus { border-color:var(--primary);background:rgba(var(--white-rgb), 0.09); }
.auth-field input::placeholder, .auth-field textarea::placeholder { color:rgba(var(--white-rgb), 0.25); }
.auth-field input:disabled { opacity:0.5;cursor:not-allowed; }
.auth-field select option { background:var(--dark2); }
.auth-field textarea { min-height:100px;line-height:1.6;resize:vertical; }
.auth-row        { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.auth-hint       { margin-top:6px;font-size:0.7rem;line-height:1.5;color:rgba(var(--white-rgb), 0.35); }
.auth-field-error { margin-top:5px;font-size:0.78rem;color:var(--error); }
.req             { color:var(--error); }
.opt             { font-weight:400;letter-spacing:0;text-transform:none;color:rgba(var(--white-rgb), 0.3); }
.auth-check      { display:flex;gap:10px;align-items:flex-start;margin-bottom:20px;font-size:0.75rem;line-height:1.5;color:var(--text-muted); }
.auth-check input { width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--primary);cursor:pointer; }
.auth-check label { cursor:pointer; }
.auth-check a    { color:var(--primary);text-decoration:none; }
.auth-check a:hover { text-decoration:underline; }

/* Password fields: show/hide eye and strength meter (assets/js/password.js) */
.pw-wrap         { position:relative; }
.pw-wrap > input { padding-right:48px; }
.pw-eye          { position:absolute;right:12px;top:50%;transform:translateY(-50%);padding:4px;background:none;border:none;color:rgba(var(--white-rgb), 0.35);font-size:0.85rem;cursor:pointer;transition:color 0.2s; }
.pw-eye:hover    { color:var(--primary); }
.pw-meter        { height:3px;margin:-10px 0 6px;border-radius:2px;background:rgba(var(--white-rgb), 0.08);overflow:hidden; }
.pw-meter-fill   { height:100%;width:0;border-radius:2px;transition:width 0.3s,background 0.3s; }
.pw-meter-label  { margin-bottom:12px;font-size:var(--text-xs);color:var(--text-muted); }
/* The meter's level (password.js) sets the bar and the colour of the word under it. */
.pw-meter.weak   .pw-meter-fill { width:25%;background:var(--error); }
.pw-meter.fair   .pw-meter-fill { width:60%;background:var(--pending); }
.pw-meter.strong .pw-meter-fill { width:100%;background:var(--primary); }
.pw-meter.weak   + .pw-meter-label { color:var(--error); }
.pw-meter.fair   + .pw-meter-label { color:var(--pending); }
.pw-meter.strong + .pw-meter-label { color:var(--primary); }
.pw-match        { margin-top:6px;font-size:0.7rem; }

/* ── Buttons: the dashboard buttons, full width ───────────── */
.auth-btn        { width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:10px;font-family:var(--font-body);font-size:0.92rem;font-weight:800;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:all 0.2s; }
.auth-btn.btn-primary { border:none;box-shadow:0 4px 20px var(--primary-glow); }
.auth-btn:disabled { opacity:0.5;cursor:not-allowed;transform:none; }
.auth-btn + .auth-btn { margin-top:10px; }
/* Side by side while they fit; on a small phone (German "Startseite" + "Anmelden") the second
   button drops below the first instead of running off the card. */
.auth-actions    { display:flex;flex-wrap:wrap;gap:10px; }
.auth-actions .auth-btn { flex:1;width:auto;margin-top:0; }

/* The player a link is about (coach review, metric check) */
.auth-chip       { display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;margin:0 auto 24px;padding:8px 18px;border-radius:50px;background:rgba(var(--primary-rgb), 0.08);border:1px solid rgba(var(--primary-rgb), 0.2);text-align:left; }
.auth-chip > i   { color:var(--primary); }
.auth-chip-name  { font-size:0.9rem;font-weight:700; }
.auth-chip-meta  { font-size:0.75rem;color:var(--text-muted); }

/* ── Notes, links and small print ─────────────────────────── */
.auth-note       { margin-bottom:22px;padding:14px 16px;border-radius:12px;background:rgba(var(--primary-rgb), 0.06);border:1px solid rgba(var(--primary-rgb), 0.15);font-size:0.82rem;line-height:1.6;color:rgba(var(--white-rgb), 0.6);text-align:left; }
.auth-note strong { color:var(--white); }
.auth-note.center { text-align:center; }
.auth-note a, .auth-alt a, .auth-fine a { color:var(--primary); }
.auth-link       { display:block;margin-top:18px;text-align:center;font-size:0.78rem;font-weight:600;color:rgba(var(--white-rgb), 0.4);text-decoration:none;transition:color 0.2s; }
.auth-link:hover { color:var(--primary); }
button.auth-link { background:none; border:none; width:100%; font-family:inherit; cursor:pointer; }
.auth-alt        { margin-top:22px;text-align:center;font-size:0.8rem;color:var(--text-muted); }
.auth-alt a      { font-weight:600;text-decoration:none; }
.auth-alt a:hover { text-decoration:underline; }
.auth-fine       { margin-top:16px;text-align:center;font-size:0.7rem;line-height:1.6;color:rgba(var(--white-rgb), 0.3); }
.auth-divider    { display:flex;align-items:center;gap:12px;margin:22px 0;font-size:0.7rem;letter-spacing:2px;text-transform:uppercase;color:rgba(var(--white-rgb), 0.25); }
.auth-divider::before, .auth-divider::after { content:'';flex:1;height:1px;background:rgba(var(--white-rgb), 0.08); }
.auth-divider + .auth-alt { margin-top:0; }

@media(max-width:500px){
  .auth-card     { padding:28px 20px;border-radius:16px; }
  .auth-row      { grid-template-columns:1fr; }
}

/* ── Elements of the sign-in pages ── */
.ri-lock-ico { font-size:var(--text-xs); }
.auth-link-btn { background:none; border:none; padding:0; color:inherit; text-decoration:underline; display:inline; font:inherit; cursor:pointer; }
@media (pointer: coarse) {
  .pw-eye { min-width:var(--tap); min-height:var(--tap); right:0; padding:0; display:flex; align-items:center; justify-content:center; }
  .auth-link, .auth-link-btn { display:inline-block; min-height:var(--tap); line-height:var(--tap); }
}