/* Member sheet — a crew member in the side panel: presence and battery,
 * ping / meet / emergency card, organizer actions, block.
 */

@layer components {
  .member-sheet__facts {
    display: grid;
    margin: 0;
    border-block: 1px solid var(--color-border);

    & > div {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding-block: 0.625rem;

      & + div { border-block-start: 1px solid var(--color-border); }
    }

    & dt { color: var(--color-ink-muted); }
    & dd { margin: 0; text-align: end; }
  }

  .member-sheet__number {
    font-variant-numeric: tabular-nums;
  }

  .member-sheet__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem;

    & > form { display: grid; }
    & .btn { width: 100%; }
  }

  .member-sheet__organizer {
    display: grid;
    gap: 0.5rem;
  }

  .member-sheet__label {
    color: var(--color-ink-muted);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .member-sheet__block {
    justify-self: start;
    min-height: var(--touch-min);
    padding: 0;
    border: none;
    background: none;
    color: var(--color-negative);
    font: inherit;
    font-weight: 600;
    cursor: pointer;

    &:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
  }
}