/**
 * 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;

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

  // ── 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;
    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);
  }
}

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