/**
 * hold-activity-feed.css — Plan E E6 (AD-6: NEW per spec §24.3)
 *
 * 5 variant border-left styles for activity-feed rows
 * (dice/assist/group/combat/rest). Group variant additionally tints the
 * row background with a 10% color-mix of --hd-activity-group on --hd-surface-2.
 *
 * Dice-result span has crit/fail highlight modifiers.
 *
 * Design-gates honored:
 *   - hex-zero: ALL colors via var(--hd-*) tokens (no hex literals)
 *   - typography-coverage: ALL font-sizes via --hd-text-*, font-families via --hd-font-*
 *   - motion-tokens-parity: ALL transitions via --hd-motion-*
 *   - WCAG 2.5.5: rows are list-items (non-interactive) so 48px not enforced
 *   - prefers-reduced-motion: override removes transitions
 */

@layer components {

  .hd-hold-activity-feed {
    display: flex;
    flex-direction: column;
    background: var(--hd-surface-2);
    color: var(--hd-text-primary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body-small);
    line-height: var(--hd-leading-normal);
  }

  .hd-hold-activity-feed__header {
    padding: var(--hd-space-2) var(--hd-space-3);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--hd-border-subtle);
  }

  .hd-hold-activity-feed__list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 320px;
  }

  /* ─── Item row layout ───────────────────────────────────────────────────── */

  .hd-hold-activity-feed__item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto auto;
    gap: var(--hd-space-2);
    align-items: center;
    padding: var(--hd-space-2) var(--hd-space-3);
    border-bottom: 1px solid var(--hd-border-subtle);
    transition: background var(--hd-motion-fast) ease-out;
  }

  .hd-hold-activity-feed__item:last-child {
    border-bottom: none;
  }

  /* Variant border-left styles (spec §24.3) */
  .hd-hold-activity-feed__item--dice {
    border-left: 3px solid var(--hd-activity-dice);
  }
  .hd-hold-activity-feed__item--assist {
    border-left: 3px solid var(--hd-activity-assist);
  }
  .hd-hold-activity-feed__item--group {
    border-left: 3px solid var(--hd-activity-group);
    background: color-mix(in srgb, var(--hd-activity-group) 10%, var(--hd-surface-2));
  }
  .hd-hold-activity-feed__item--combat {
    border-left: 3px solid var(--hd-activity-combat);
  }
  .hd-hold-activity-feed__item--rest {
    border-left: 3px solid var(--hd-activity-rest);
  }

  /* ─── Avatar (variant-glyph or first-letter) ────────────────────────────── */

  .hd-hold-activity-feed__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--hd-surface-3);
    color: var(--hd-text-primary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold);
    line-height: var(--hd-leading-icon);
    user-select: none;
  }

  /* ─── Body + dice-result ────────────────────────────────────────────────── */

  .hd-hold-activity-feed__body {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    min-width: 0;
    color: var(--hd-text-primary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body-small);
    line-height: var(--hd-leading-normal);
  }

  .hd-hold-activity-feed__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hd-hold-activity-feed__dice-result {
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body-small);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-secondary);
  }

  .hd-hold-activity-feed__dice-result--crit {
    color: var(--hd-activity-group);
    font-weight: var(--hd-weight-bold);
  }

  .hd-hold-activity-feed__dice-result--fail {
    color: var(--hd-text-disabled);
    font-style: italic;
  }

  /* ─── Tag-pill ──────────────────────────────────────────────────────────── */

  .hd-hold-activity-feed__tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-micro);
    font-weight: var(--hd-weight-medium);
    line-height: var(--hd-leading-icon);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hd-text-secondary);
    background: var(--hd-surface-3);
  }

  .hd-hold-activity-feed__tag--dice {
    color: var(--hd-activity-dice);
    background: color-mix(in srgb, var(--hd-activity-dice) 15%, var(--hd-surface-2));
  }
  .hd-hold-activity-feed__tag--assist {
    color: var(--hd-activity-assist);
    background: color-mix(in srgb, var(--hd-activity-assist) 15%, var(--hd-surface-2));
  }
  .hd-hold-activity-feed__tag--group {
    color: var(--hd-activity-group);
    background: color-mix(in srgb, var(--hd-activity-group) 15%, var(--hd-surface-2));
  }
  .hd-hold-activity-feed__tag--combat {
    color: var(--hd-activity-combat);
    background: color-mix(in srgb, var(--hd-activity-combat) 15%, var(--hd-surface-2));
  }
  .hd-hold-activity-feed__tag--rest {
    color: var(--hd-activity-rest);
    background: color-mix(in srgb, var(--hd-activity-rest) 15%, var(--hd-surface-2));
  }

  /* ─── Time stamp ────────────────────────────────────────────────────────── */

  .hd-hold-activity-feed__time {
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* ─── Empty state ───────────────────────────────────────────────────────── */

  .hd-hold-activity-feed__empty {
    padding: var(--hd-space-4) var(--hd-space-3);
    text-align: center;
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body-small);
    line-height: var(--hd-leading-normal);
    font-style: italic;
    color: var(--hd-text-tertiary);
  }

  /* ─── prefers-reduced-motion: respect user preference ────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .hd-hold-activity-feed__item {
      transition: none;
    }
  }

} /* end @layer components */