@layer components {
  /* Hosts and Cohort rows on Prep — clickable to open the gallery. */
  .prep-hosts-link,
  .prep-cohort-link {
    display: flex;
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
    padding: 4px;
    margin: -4px;
    transition: background 0.12s ease;
  }
  .prep-hosts-link { align-items: center; gap: 12px; }
  .prep-cohort-link {
    flex-direction: column;
    margin-top: var(--space-8);
    padding: 16px;
    border-top: 1px dashed rgba(0,0,0,0.12);
    border-radius: 0;
  }
  .prep-hosts-link:hover { background: rgba(0,0,0,0.03); }
  .prep-cohort-link:hover { background: rgba(0,0,0,0.025); }

  /* Note shown when host has hidden the cohort visibility for this
     gathering — explains why "Also coming" doesn't appear. */
  .cohort-hidden-note {
    margin: -8px 0 24px;
    padding: 12px 14px;
    background: rgba(0,0,0,0.04);
    border-left: 2px solid var(--ink-faint);
    font-size: 13px;
    color: var(--ink-soft);
    font-style: italic;
    line-height: 1.5;
    border-radius: 0 3px 3px 0;
  }

  /* ── Cohort gallery: list of rows; tap a row → modal swaps to bio. ── */
  .cohort-list-section { margin-bottom: 28px; }
  .cohort-list-section:last-of-type { margin-bottom: 0; }
  .cohort-list-section-title {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 10px;
    font-weight: var(--weight-bold);
  }

  .cohort-rows { list-style: none; padding: 0; margin: 0; }
  .cohort-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 8px;
    cursor: pointer;
    border-top: 1px solid rgba(0,0,0,0.06);
    transition: background 0.12s ease;
  }
  .cohort-row:first-child { border-top: none; }
  .cohort-row:hover { background: rgba(0,0,0,0.03); }

  .cohort-row-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--paper-edge);
    border: 2px solid var(--paper);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    font-weight: var(--weight-semibold);
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
  }
  .cohort-row-id { flex: 1; min-width: 0; }
  .cohort-row-name {
    font-family: var(--display);
    font-style: normal;
    font-size: 18px;
    color: var(--ink);
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .cohort-row-pronouns {
    font-size: 12px;
    color: var(--ink-soft);
    margin-top: 2px;
    letter-spacing: 0.02em;
  }
  .cohort-row-chevron {
    font-size: 18px;
    color: var(--ink-faint);
    flex-shrink: 0;
    transition: transform 0.12s ease, color 0.12s ease;
  }
  .cohort-row:hover .cohort-row-chevron {
    color: var(--ink);
    transform: translateX(2px);
  }

  /* Self-tag pill */
  .cohort-self-tag {
    font-family: var(--sans);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--paper);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: var(--weight-bold);
  }

  /* ── Detail view (whole modal takes over with the person's bio) ── */
  .cohort-detail-back {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 4px 8px 4px 0;
    margin-bottom: 22px;
  }
  .cohort-detail-back:hover { color: var(--ink); }
  .cohort-detail-back:focus { outline: none; }

  .cohort-detail-head {
    text-align: center;
    margin-bottom: 28px;
  }
  .cohort-detail-avatar {
    width: 88px; height: 88px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--paper-edge);
    border: 3px solid var(--paper);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    font-weight: var(--weight-semibold);
    margin: 0 auto 14px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.10);
  }
  .cohort-detail-name {
    font-family: var(--display);
    font-style: normal;
    font-size: 28px;
    color: var(--ink);
    margin: 0 0 4px;
    line-height: 1.15;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
  }
  .cohort-detail-pronouns {
    font-size: 13px;
    color: var(--ink-soft);
    letter-spacing: 0.02em;
  }

  .cohort-detail-bio {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
  }
  .cohort-detail-bio li {
    padding: 16px 0;
    border-top: 1px solid rgba(0,0,0,0.08);
  }
  .cohort-detail-bio li:first-child { border-top: none; padding-top: 8px; }
  .cohort-detail-q {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: var(--weight-bold);
    margin-bottom: 6px;
  }
  .cohort-detail-a {
    font-size: 15px;
    color: var(--ink);
    line-height: 1.6;
  }
  .cohort-detail-empty {
    padding: 24px 0;
    font-size: 14px;
    color: var(--ink-faint);
    font-style: italic;
    text-align: center;
    margin-bottom: 28px;
  }
}