/* Crew roster — group members "who's around right now" view.
 * Composition pattern, not a heavy abstraction. Reuses .btn, .status-dot,
 * .member-list__avatar-wrap, avatar partials. Replaces the settings-card
 * frame for crew-centric pages.
 */

@layer components {
  .crew-page {
    container-type: inline-size;
    padding-block-end: calc(var(--touch-min) * 2 + var(--block-space-l));
  }

  .crew-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inline-space);
    margin-block-end: var(--block-space-l);
  }

  .crew-page__heading {
    display: flex;
    align-items: baseline;
    gap: var(--inline-space-s);
    min-width: 0;
  }

  .crew-page__title {
    font-family: var(--font-display, inherit);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-ink);
    margin: 0;
    letter-spacing: -0.01em;
  }

  .crew-page__count {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
    font-variant-numeric: tabular-nums;
  }

  .crew-page__invite-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-canvas);
    background: oklch(var(--lch-flare));
    border-radius: var(--radius-lg);
    text-decoration: none;
    flex-shrink: 0;
    min-height: var(--touch-min);

    & svg {
      width: 1rem;
      height: 1rem;
    }

    &:hover {
      background: color-mix(in oklch, oklch(var(--lch-flare)) 85%, var(--color-ink));
    }
  }

  /* ── Presence strip — top-of-page scan layer ─────────────────────── */

  .presence-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--inline-space-l);
    padding: var(--block-space-s) 0 var(--block-space);
    margin-block-end: var(--block-space);

    &:empty {
      display: none;
    }
  }

  .presence-strip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 4.5rem;
    text-align: center;
  }

  .presence-strip__avatar-wrap {
    position: relative;
    flex-shrink: 0;

    .status-dot {
      width: 14px;
      height: 14px;
      border-width: 3px;
    }
  }

  .presence-strip__name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-ink);
    max-width: 6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .presence-strip__status {
    font-size: 0.6875rem;
    color: var(--color-ink-muted);
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Section labels ─────────────────────────────────────────────── */

  .crew-section + .crew-section {
    margin-block-start: var(--block-space-l);
  }

  .crew-section__label {
    display: flex;
    align-items: center;
    gap: var(--inline-space-s);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ink-muted);
    margin: 0 0 var(--block-space-s);

    &::after {
      content: "";
      flex: 1;
      height: 1px;
      background: color-mix(in oklch, var(--color-border) 50%, transparent);
    }
  }

  .crew-section--online .crew-section__label {
    color: oklch(var(--lch-laser));
  }

  /* ── Crew row — edge-to-edge member item ────────────────────────── */

  .crew-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .crew-row {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space-s) var(--inline-space);
    border-radius: var(--radius-lg);
    border-inline-start: 3px solid transparent;
    transition: background-color 100ms ease;

    &:hover {
      background: color-mix(in oklch, var(--color-ink) 3%, transparent);
    }
  }

  .crew-row--online {
    border-inline-start-color: oklch(var(--lch-laser));
    background: color-mix(in oklch, oklch(var(--lch-laser)) 5%, transparent);
  }

  .crew-row__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .crew-row__name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem 0.5rem;
    font-weight: 700;
    color: var(--color-ink);
    font-size: 0.9375rem;
    min-width: 0;

    & > strong {
      flex: 0 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .crew-row__status {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
    margin: 0;
    line-height: 1.35;
  }

  .crew-row--online .crew-row__status {
    color: color-mix(in oklch, oklch(var(--lch-laser)) 80%, var(--color-ink));
  }

  .crew-row__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
  }

  /* Inline status picker on the current user's row — overrides the
   * map page's absolute positioning. */
  .crew-row .status-picker__wrap {
    position: relative;
    inset: auto;
  }

  .crew-row .group-map__status-btn {
    border: 1px solid var(--color-border-interactive);
    background: transparent;
    box-shadow: none;
    color: var(--color-ink-muted);
    font-size: 1rem;

    & svg {
      width: 1rem;
      height: 1rem;
    }

    &:hover {
      color: var(--color-ink);
      border-color: var(--color-ink-muted);
      background: color-mix(in oklch, var(--color-ink) 5%, transparent);
    }
  }

  /* Icon-only emergency button — present but not loud */
  .crew-row__sos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-min);
    height: var(--touch-min);
    border-radius: var(--radius-lg);
    color: var(--color-ink-muted);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    transition: color 100ms ease, background-color 100ms ease;

    & svg {
      width: 18px;
      height: 18px;
    }

    &:hover, &:focus-visible {
      color: oklch(var(--lch-flare));
      background: color-mix(in oklch, oklch(var(--lch-flare)) 8%, transparent);
    }

    &:focus-visible {
      outline: 2px solid oklch(var(--lch-flare));
      outline-offset: 2px;
    }
  }

  /* ── Action dock — bottom-anchored on mobile, inline on wide ─── */

  .crew-dock {
    position: fixed;
    inset-inline: 0;
    bottom: var(--bottom-nav-inset);
    z-index: 5;
    padding: var(--block-space) var(--inline-space-l);
    background: linear-gradient(
      to top,
      var(--color-canvas) 70%,
      color-mix(in oklch, var(--color-canvas) 0%, transparent)
    );
    pointer-events: none;

    & > * {
      pointer-events: auto;
    }
  }

  .crew-dock__inner {
    max-width: 40rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .crew-dock__helper {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
    text-align: center;
    margin: 0;
  }

  .crew-dock__form {
    display: flex;
    margin: 0;

    & .btn {
      width: 100%;
    }
  }

  /* Confirmation chip after a successful broadcast */
  .crew-dock__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: var(--touch-min);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, oklch(var(--lch-laser)) 12%, var(--color-surface));
    border: 1px solid color-mix(in oklch, oklch(var(--lch-laser)) 30%, transparent);
    color: oklch(var(--lch-laser));
    font-weight: 600;
    font-size: 0.875rem;

    @starting-style {
      opacity: 0;
      transform: translateY(8px);
    }

    transition: opacity 200ms ease, transform 200ms ease;
  }

  /* On wide viewports, dock goes inline at the top of the page */
  @media (min-width: 48rem) {
    .crew-page {
      padding-block-end: 0;
    }

    .crew-dock {
      position: static;
      padding: 0;
      background: none;
      margin-block-end: var(--block-space-l);
    }

    .crew-dock__form .btn {
      width: auto;
    }

    .crew-dock__inner {
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: var(--inline-space-l);
    }
  }

  /* ── Empty states ───────────────────────────────────────────────── */

  .crew-empty {
    padding: var(--block-space-l) var(--inline-space);
    text-align: center;
    color: var(--color-ink-muted);
    font-size: 0.875rem;
  }
}