/* register.css — one-time onboarding page (OutRun shell, via body.theme-outrun) */

/* width comes from wo-shared .container (600px, app-wide) */

/* Sign-out link in the header — only visible while a real session is active. */
.reg-logout-link {
  margin-top: 10px;
  background: transparent;
  border: 1px solid rgba(245,226,199,0.28);
  color: rgba(245,226,199,0.8);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.reg-logout-link:hover { background: rgba(245,226,199,0.12); color: var(--cream); }

/* Step progress bar */
.step-bar {
  display: none; /* onboarding is a single step now (name → app) */
  align-items: center;
  gap: 6px;
  margin: 4px 0 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.step-pill {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(245,226,199,0.08);
  border: 1px solid rgba(245,226,199,0.18);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(245,226,199,0.55);
  transition: all 0.2s;
  white-space: nowrap;
}
.step-pill.active {
  background: rgba(255,106,61,0.25);
  border-color: var(--coral);
  color: var(--cream);
  box-shadow: 0 2px 8px rgba(255,106,61,0.3);
}
.step-pill.done {
  background: rgba(127,169,104,0.2);
  border-color: rgba(127,169,104,0.45);
  color: var(--cream);
}
.step-pill.done::after { content: ' ✓'; }
.step-line {
  flex: 1;
  height: 1px;
  background: rgba(245,226,199,0.18);
  min-width: 12px;
  max-width: 30px;
}

/* Step card */
.step-card {
  background: rgba(15,15,18,0.55);
  border: 2px solid rgba(245,226,199,0.15);
  border-radius: 18px;
  padding: 24px 22px;
  margin-bottom: 18px;
  backdrop-filter: blur(6px);
}
.step-card.hidden { display: none; }
.step-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
  margin: 0 0 6px;
}
.step-hint {
  opacity: 0.7;
  font-size: 13px;
  margin: 0 0 18px;
}

.field-label {
  display: block;
  font-size: 11px;
  letter-spacing: 1px;
  opacity: 0.65;
  margin: 12px 0 6px;
}

.big-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  border-radius: 12px;
  border: 2px solid rgba(245,226,199,0.2);
  background: rgba(15,15,18,0.6);
  color: var(--cream);
  font-family: inherit;
  box-sizing: border-box;
}
.big-input:focus { outline: none; border-color: var(--coral); }

/* Role choice (step 1) — running vs cheering. Two equal segmented buttons. */
.role-choice { display: flex; gap: 10px; margin-bottom: 6px; }
.role-choice .role-opt {
  flex: 1;
  padding: 14px 8px;
  border-radius: 12px;
  border: 2px solid rgba(245,226,199,0.18);
  background: var(--ink2, rgba(255,255,255,0.04));
  color: var(--cream);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.role-choice .role-opt:hover { transform: translateY(-1px); }
.role-choice .role-opt.active {
  border-color: var(--coral);
  background: rgba(217,106,58,0.16);
}

/* Crew picker (step 2) — pick an existing crew to run with. */
.crew-wrap { margin: 4px 0 10px; }
.crew-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.crew-choice .crew-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 2px solid rgba(245,226,199,0.18);
  background: var(--ink2, rgba(255,255,255,0.04));
  color: var(--cream);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.crew-choice .crew-chip.active { border-color: var(--coral); background: rgba(217,106,58,0.16); }
.crew-choice .crew-chip .crew-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}

/* Example avatars (step 2) — show people what they're about to make + why */
.example-wrap { margin: 2px 0 10px; }
.example-avatars {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 56px;
}
.example-avatars .ex-av {
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--coral);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  flex-shrink: 0;
  background: rgba(15,15,18,0.6);
}
.example-avatars .ex-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Claimable card: a tappable avatar + name, used on the registration wall. */
.example-avatars .ex-av.claimable {
  width: auto; height: auto;
  border: 0; border-radius: 12px; overflow: visible;
  background: transparent; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px; cursor: pointer; color: var(--cream, #f5e2c7);
  transition: transform .12s ease;
}
.example-avatars .ex-av.claimable img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--coral); box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.example-avatars .ex-av.claimable .ex-name {
  font-size: 11px; font-weight: 700; max-width: 64px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.example-avatars .ex-av.claimable:hover { transform: translateY(-2px); }
.example-avatars .ex-av.claimable:hover img,
.example-avatars .ex-av.claimable:focus-visible img { border-color: var(--cream, #f5e2c7); }
.example-caption {
  text-align: center;
  font-size: 12px;
  opacity: 0.7;
  margin-top: 8px;
}

/* Dropzone — same look & feel as the main photo upload (POST MAKER page). */
.dropzone {
  border: 3px dashed rgba(245,226,199,0.3);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.dropzone:hover,
.dropzone.drag { background: rgba(255,106,61,0.18); border-color: var(--coral); }
.dropzone.has-files { border-style: solid; border-color: rgba(127,169,104,0.5); }
.dropzone p { margin: 6px 0; opacity: 0.85; }
.dropzone strong { color: var(--coral); }

/* Refs preview row */
.refs-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  min-height: 0;
}
.refs-preview > div {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--coral);
}
.refs-preview > div img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Progress + result boxes */
.progress-box, .result-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  margin-top: 16px;
  background: rgba(255,106,61,0.12);
  border: 1px solid rgba(255,106,61,0.35);
}
.result-box { background: rgba(127,169,104,0.12); border-color: rgba(127,169,104,0.4); }
.result-box img {
  width: 60px; height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(127,169,104,0.5);
  flex-shrink: 0;
}
.progress-text, .result-text { flex: 1; min-width: 0; }
.progress-title, .result-title {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.progress-sub, .result-sub {
  font-size: 12px;
  opacity: 0.75;
}
.spinner-sm {
  width: 32px; height: 32px;
  border: 3px solid rgba(245,226,199,0.15);
  border-top-color: var(--coral);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Big check on success step */
.big-check {
  font-size: 64px;
  text-align: center;
  color: rgba(127,169,104,0.8);
  font-weight: 900;
  margin-bottom: 6px;
}

/* Actions */
.actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.actions button {
  flex: 1;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  border: none;
}
.actions button.primary { background: linear-gradient(100deg, var(--a1, #FF6A3D), var(--a2, #F7345E)); color: #fff; }
.actions button.primary:hover { filter: brightness(1.07); }
.actions button.primary:disabled { opacity: 0.4; cursor: not-allowed; }
.actions button.secondary {
  background: rgba(245,226,199,0.1);
  color: var(--cream);
  border: 1px solid rgba(245,226,199,0.25);
}

/* Conflict box (duplicate name warning) */
.conflict-box {
  background: rgba(217,78,78,0.15);
  border: 1px solid rgba(217,78,78,0.5);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
}
.conflict-box b { font-weight: 800; }
.conflict-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.conflict-actions button {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: none;
}
.conflict-actions .accept { background: var(--coral); color: var(--cream); }
.conflict-actions .edit {
  background: transparent;
  border: 1px solid rgba(245,226,199,0.3);
  color: var(--cream);
}

/* --- Google sign-in vs guest (step 1) --- */
.auth-google-wrap { margin: 6px 0 2px; }
.google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 12px;
  background: #ffffff;
  color: #1f1f1f;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s, transform 0.05s;
}
.google-btn:hover { filter: brightness(0.96); }
.google-btn:active { transform: translateY(1px); }
.google-g { width: 20px; height: 20px; flex-shrink: 0; }

.auth-or {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin: 16px 0 2px;
  color: rgba(245,226,199,0.5);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.auth-or::before, .auth-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(245,226,199,0.18);
}

/* --- Install step (step 3) --- */
.btn-block { display: block; width: 100%; margin-top: 10px; }
.install-note {
  font-size: 12.5px;
  opacity: 0.85;
  margin-top: 8px;
  line-height: 1.45;
}
.install-tabs {
  display: flex;
  gap: 8px;
  margin: 18px 0 12px;
}
.install-tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  background: rgba(245,226,199,0.06);
  border: 1px solid rgba(245,226,199,0.18);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  color: rgba(245,226,199,0.7);
  transition: all 0.15s;
}
.install-tab.active {
  background: rgba(255,106,61,0.22);
  border-color: var(--coral);
  color: var(--cream);
}
.install-steps {
  margin: 4px 0 0;
  padding-left: 20px;
  line-height: 1.6;
  font-size: 14px;
}
.install-steps li { margin-bottom: 6px; }