/* Sign-up and the steps after it (register.html, js/onboarding.js).
   Built on auth-outer.css tokens; Lagoon only (docs/brand/LAGOON.md). */

.auth-title:focus { outline: none; }

/* The handle, offered from the name */
.handle-line {
  display: flex;
  margin-bottom: -4px;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--outer-mute);
}
.handle-line strong { color: var(--outer-ink); font-weight: 600; }
/* Controls on the 2026-10-17 scale (tokens.css): chips and text actions 28px,
   Follow 32px, the step bar's Next 36px. Drawn the same on phones; under a
   finger each reaches 44px through an invisible ::after (the block at the end). */
.handle-line .handle-change { position: relative; padding: 0 6px; height: 28px; min-height: 0; font-size: 13px; }
.handle-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.handle-suggestions:empty { display: none; }
.handle-suggestion {
  position: relative;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--outer-line);
  border-radius: 999px;
  background: transparent;
  color: var(--outer-ink);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.handle-suggestion:hover { border-color: var(--palster-border-strong); }

/* Birthday */
.birthday-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.birthday-group legend { padding: 0; margin-bottom: 6px; }
.birthday-selects { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 8px; }
.birthday-selects .form-input { padding: 0 8px; appearance: auto; }
.field-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--outer-mute); }

.signup-legal { margin: 12px 0 0; font-size: 12px; line-height: 1.5; text-align: center; color: var(--outer-mute); }
.signup-legal a { color: var(--outer-teal); font-weight: 600; text-decoration: none; }
.signup-legal a:hover { text-decoration: underline; }

/* Progress: one segment per step */
.ob-progress { display: flex; gap: 6px; margin: -4px 0 20px; }
.ob-progress[hidden] { display: none; }
.ob-progress span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--outer-line);
  transition: background 0.3s ease;
}
.ob-progress span.is-done,
.ob-progress span.is-now { background: var(--outer-teal); }

.ob-step { display: flex; flex-direction: column; gap: 16px; }
.ob-step[hidden] { display: none; }

.ob-actions {
  --ob-pad: 24px;
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 20px calc(-1 * var(--ob-pad)) calc(-1 * var(--ob-pad));
  padding: 12px var(--ob-pad) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--outer-line);
  border-radius: 0 0 11px 11px;
  background: var(--ob-bar-bg, #FFFFFF);
}
:root[data-theme="dark"] .ob-actions { --ob-bar-bg: #16181E; }
@media (max-width: 480px) { .ob-actions { --ob-pad: 20px; } }
.ob-actions[hidden] { display: none; }
.ob-actions .text-btn { position: relative; height: 32px; min-height: 0; padding: 0 12px; margin-inline-start: -12px; background: none; color: var(--outer-mute); }
.ob-actions .palster-btn-primary { min-width: 120px; height: 36px; margin-inline-start: auto; }
.ob-status { min-height: 0; font-size: 13px; color: var(--outer-error); text-align: center; }
.ob-status:not(:empty) { margin-top: 12px; }
.ob-empty { margin: 8px 0; color: var(--outer-mute); font-size: 14px; text-align: center; list-style: none; }

/* 1. Make it yours: a live copy of the profile card */
.ob-preview {
  overflow: hidden;
  border: 1px solid var(--outer-card-edge);
  border-radius: 16px;
  background: var(--outer-input);
}
.ob-preview-cover { height: 72px; background: var(--outer-teal-gradient); }
.ob-preview-body { display: flex; flex-direction: column; padding: 0 16px 16px; }
.ob-preview-avatar {
  width: 80px;
  height: 80px;
  margin-top: -40px;
  margin-bottom: 8px;
  border-radius: 50%;
  border: 3px solid var(--outer-bg);
  overflow: hidden;
  background: var(--outer-line);
}
.ob-preview-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ob-preview-name { font-size: 18px; font-weight: 700; color: var(--outer-ink); letter-spacing: -0.01em; }
.ob-preview-handle { font-size: 14px; color: var(--outer-mute); }
.ob-preview-bio { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--outer-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.ob-preview-bio.is-empty { color: var(--outer-mute); }
.ob-photo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ob-photo-btn svg { width: 20px; height: 20px; }
.ob-bio { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.ob-count { display: flex; justify-content: space-between; gap: 8px; }

/* 2. Interests */
.ob-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  /* 9px above and below, given back, so a chip's reach isn't clipped. */
  margin: -7px -4px -5px;
  padding: 9px 4px;
  scrollbar-width: none;
}
.ob-chips::-webkit-scrollbar { display: none; }
.ob-chip {
  position: relative;
  flex: none;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--outer-line);
  border-radius: 999px;
  background: transparent;
  color: var(--outer-ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.ob-chip[aria-pressed="true"] { background: var(--palster-highlight-bg, #EDEEF0); border-color: var(--outer-line); color: var(--outer-ink); }
[data-theme="dark"] .ob-chip[aria-pressed="true"] { background: var(--palster-highlight-bg, rgba(255, 255, 255, .09)); }

.ob-spaces { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ob-space {
  display: grid;
  grid-template-columns: 44px 1fr 24px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--outer-card-edge);
  border-radius: 14px;
  background: var(--outer-input);
  color: var(--outer-ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.ob-space:hover { border-color: var(--palster-border-strong); }
.ob-space:active { transform: scale(0.99); }
.ob-space img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: var(--outer-line); }
.ob-space-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-space-text strong { font-size: 15px; font-weight: 600; }
.ob-space-text span {
  font-size: 13px;
  color: var(--outer-mute);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.ob-check {
  width: 24px;
  height: 24px;
  padding: 3px;
  border: 1.5px solid var(--outer-line);
  border-radius: 50%;
  color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ob-space[aria-pressed="true"] { border-color: var(--outer-teal); }
.ob-space[aria-pressed="true"] .ob-check { background: var(--outer-teal-gradient); border-color: transparent; color: #FFFFFF; }

/* 3. People */
.ob-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ob-person {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--outer-line);
}
.ob-person:last-child { border-bottom: 0; }
.ob-person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--outer-line); }
.ob-person-text { display: flex; flex-direction: column; min-width: 0; }
.ob-person-text strong { font-size: 15px; font-weight: 600; color: var(--outer-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-person-text span {
  font-size: 13px;
  line-height: 1.35;
  color: var(--outer-mute);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ob-follow {
  position: relative;
  min-width: 96px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--outer-teal-gradient);
  color: #FFFFFF;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ob-follow[aria-pressed="true"] {
  background: transparent;
  color: var(--outer-ink);
  box-shadow: inset 0 0 0 1px var(--outer-line);
}

/* 4. Passkey */
.ob-passkey-art {
  align-self: center;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: var(--outer-teal-gradient);
  color: #FFFFFF;
}
.ob-passkey-art svg { width: 36px; height: 36px; }

/* You're in */
.ob-done { align-items: stretch; text-align: center; }
.ob-done-art { align-self: center; width: 72px; height: 72px; }
.ob-done .palster-btn-primary,
.ob-done .palster-btn-secondary { display: flex; align-items: center; justify-content: center; text-decoration: none; }

@media (min-width: 600px) {
  .is-onboarding .palster-card.wide { max-width: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .ob-progress span, .ob-space, .ob-check { transition: none; }
}

/* Several of these boxes are display:flex, which beats the hidden attribute. */
.auth-card [hidden] { display: none !important; }

/* The email already has an account: the two ways forward, under the message. */
.email-taken { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.email-taken-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.email-taken-actions a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 28px;
  color: var(--outer-teal);
  font-weight: 600;
  text-decoration: none;
}
.email-taken-actions a:hover { text-decoration: underline; }

@media (pointer: coarse) {
  :is(.handle-line .handle-change, .handle-suggestion, .ob-actions .text-btn, .ob-chip, .ob-follow, .email-taken-actions a)::after {
    content: ''; position: absolute; inset-inline-start: -1px; inset-inline-end: -1px;
    top: calc((100% - 44px) / 2 - 1px); bottom: calc((100% - 44px) / 2 - 1px);
  }
  /* Chips sit 8px apart: each takes half the gap so a short one is 44 wide too. */
  :is(.ob-chip, .handle-suggestion)::after { inset-inline-start: -4px; inset-inline-end: -4px; }
}

/* Sign-up: Continue with Google above the form, and who they are when back from it. */
.google-signup .auth-divider { margin: 16px 0 4px; }
.google-as {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--outer-line);
  border-radius: 12px;
  font-size: 14px;
  color: var(--outer-mute);
  overflow-wrap: anywhere;
}
.google-as strong { color: var(--outer-ink); font-weight: 600; }
.google-as .google-g { width: 20px; height: 20px; flex: none; }

.ob-topic-chips { flex-wrap: wrap; overflow: visible; gap: 18px 8px; margin: 0; padding: 9px 0; }
.ob-section-title { font-size: 16px; margin: 18px 0 8px; }

/* Find your pals (js/find-pals.js) opens from the People step. */
.ob-find-pals { margin: 0 0 12px; }