/* ============================================================
   WesterAudio — Collab Crew page styles
   ============================================================ */

/* ─── Page wrapper ───────────────────────────────────────── */
.collab-wrap {
  max-width: var(--layout-content-mob);
  margin: 0 auto;
  padding: 32px var(--layout-outer-mob) 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

@media (min-width: 768px) {
  .collab-wrap {
    max-width: 600px;
    padding: 40px var(--layout-outer-tab) 52px;
    gap: 22px;
  }
}

@media (min-width: 1280px) {
  .collab-wrap {
    max-width: 720px;
    padding: 44px var(--layout-outer) 52px;
    gap: 24px;
  }
}

/* ─── Page header ────────────────────────────────────────── */
.collab-header {
  text-align: center;
  width: 100%;
}

.collab-title {
  font-family: var(--font-display);
  font-size: var(--text-h1-mob);
  line-height: var(--leading-display);
  color: var(--color-text-primary);
  margin-bottom: 10px;
}

.collab-sub {
  font-size: var(--text-body);
  color: var(--color-text-subtle);
  line-height: var(--leading-body);
}

@media (min-width: 1280px) {
  .collab-title { font-size: var(--text-h1); }
  .collab-sub   { font-size: var(--text-body-lg); }
}

/* ─── State panels ───────────────────────────────────────── */
.collab-state {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

/* ─── Path grid — stacks on mobile ──────────────────────── */
.path-grid--collab {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .path-grid--collab {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─── "or" separator (mobile only, between path boxes) ──── */
.path-or {
  font-size: var(--text-overline);
  color: var(--color-text-subtle);
  opacity: 0.4;
  text-align: center;
  padding: 2px 0;
}

@media (min-width: 768px) {
  .path-or { display: none; }
}

/* ─── Room created — enter note ──────────────────────────── */
.enter-note {
  font-size: var(--text-overline);
  color: var(--color-text-subtle);
  opacity: 0.45;
  text-align: center;
  line-height: var(--leading-body);
}

/* ─── Error text ─────────────────────────────────────────── */
.field-error {
  font-size: var(--text-overline);
  color: var(--color-danger);
  opacity: 0;
  min-height: 14px;
  transition: opacity var(--duration-fast);
}
.field-error.is-visible { opacity: 1; }

/* ─── Transition between states ──────────────────────────── */
.collab-state {
  animation: fade-up var(--duration-reveal) var(--ease-out) both;
}