/**
 * styles/components/_participant-card.less
 *
 * 80×100px card tile used in the Director's Board grid.
 * All selectors scoped under .scrying-pool.
 * Uses --sp-* tokens only — no Foundry --color-* / --font-* / --border-* tokens.
 */

.scrying-pool .participant-card {
  width: 80px;
  height: 100px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid var(--sp-border);
  border-radius: 4px;
  background: var(--sp-surface);
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color var(--sp-transition-state),
    background-color var(--sp-transition-state);

  // ── State ring colour + shape signals (second-signal rule) ──────────────
  &.sp-state-active      { border-color: var(--sp-state-active-border);      border-style: solid;  background: var(--sp-state-active-bg); }
  &.sp-state-hidden      { border-color: var(--sp-state-hidden-border);      border-style: dashed; background: var(--sp-state-hidden-bg); }
  &.sp-state-self-muted  { border-color: var(--sp-state-self-muted-border);  border-style: solid;  background: var(--sp-state-self-muted-bg); }
  &.sp-state-offline     { border-color: var(--sp-state-offline-border);     border-style: none;   background: var(--sp-state-offline-bg); }
  &.sp-state-cam-lost    { border-color: var(--sp-state-cam-lost-border);    border-style: dashed; background: var(--sp-state-cam-lost-bg); }
  &.sp-state-reconnecting  { border-color: var(--sp-state-reconnecting-border);  border-style: solid; background: var(--sp-state-reconnecting-bg); }
  &.sp-state-never-connected { border-color: var(--sp-state-never-connected-border); border-style: none; background: var(--sp-state-never-connected-bg); }
  &.sp-state-ghost       { border-color: var(--sp-state-ghost-border);       border-style: dotted; background: var(--sp-state-ghost-bg); }
  &.sp-state-pending     { border-color: var(--sp-state-pending-border);     border-style: solid;  background: var(--sp-state-pending-bg); }

  // ── Avatar ──────────────────────────────────────────────────────────────
  &__avatar {
    width: 48px;
    height: 48px;
    margin: 8px auto 4px;
    flex-shrink: 0;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      display: block;
    }

    // ── Badge (Reaction Cam enabled indicator) ─────────────────────────────
    &-badge {
      position: absolute;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      border: 1px solid var(--sp-surface);
      box-shadow: 0 0 0 2px var(--sp-surface);

      i {
        font-size: 10px;
        color: var(--sp-text-primary);
      }

      &--reaction-cam {
        background: var(--sp-accent);
        bottom: 0;
        right: 0;
        cursor: help;
      }
    }
  }

  // ── Name (12px, 2-line truncate) ─────────────────────────────────────────
  &__name {
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    color: var(--sp-text-primary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 0 4px;
    margin: 0;
    width: 100%;
    word-break: break-word;
  }

  // ── Toggle overlay (shown on hover / focus-within) ───────────────────────
  &__toggle {
    position: absolute;
    inset: 0;
    // Foundry applies an explicit height to <button> elements which overrides
    // the bottom:0 stretch constraint. Force 100%×100% to fill the card.
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sp-badge-bg);
    color: var(--sp-badge-text);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--sp-transition-state);
    font-size: 18px;
    padding: 0;

    &:focus-visible {
      opacity: 1;
    }
  }

  &:hover &__toggle,
  &:focus-within &__toggle {
    opacity: 1;
  }

  // ── Focus ring (inherits module-wide pattern from tokens/_focus.less) ────
  &:focus-visible {
    outline: none;
    box-shadow: var(--sp-focus-ring), 0 0 0 4px var(--sp-surface);
  }
}

// ── Shape variants (applied via .sp-shape-* on .participant-card) ─────────
.scrying-pool .participant-card {
  &.sp-shape-rounded {
    --sp-shape-clip: inset(0 round 6px);
  }

  &.sp-shape-circle {
    --sp-shape-clip: circle(50%);
  }

  &.sp-shape-hexagon {
    --sp-shape-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  }

  &.sp-shape-octagon {
    --sp-shape-clip: polygon(29% 0%, 71% 0%, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0% 71%, 0% 29%);
  }

  .participant-card__avatar img {
    clip-path: var(--sp-shape-clip, none);
  }
}

// ── Reduced motion ────────────────────────────────────────────────────────
@media (prefers-reduced-motion: reduce) {
  .scrying-pool .participant-card {
    transition: none;
    &__toggle { transition: none; }
  }
}
