/**
 * hold-display.css — Plan E E6
 *
 * BEM .hd-hold-display__* classes for the Tab[2] Hold-destination
 * per design-spec §24.1-§24.3.
 *
 * Container-query @720px switches from single-column (phone) to a
 * 2-column grid (tablet landscape) where the selected member's detail
 * pane renders inline on the right.
 *
 * Design-gates honored:
 *   - hex-zero: ALL colors via var(--hd-*) tokens (no hex literals)
 *   - typography-coverage: ALL font-sizes via --hd-text-*, line-heights
 *                          via --hd-leading-*, font-families via --hd-font-*
 *   - motion-tokens-parity: ALL transitions via --hd-motion-*
 *   - WCAG 2.5.5 touch-targets: member-cards ≥48px tall (clickable)
 *   - prefers-reduced-motion: override removes transitions + transforms
 */

@layer components {

  .hd-hold-display {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
    padding: var(--hd-space-3);
    background: var(--hd-surface-1);
    color: var(--hd-text-primary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body);
    line-height: var(--hd-leading-normal);
    container-type: inline-size; /* enables @container queries below */
    /* Member-card text width grows with content-zoom so charname/player/
     * pronouns keep the SAME truncation point at every zoom level instead of
     * collapsing to "A…" at 2×. The strip scrolls horizontally, so widening
     * the cards only adds scroll length — no overflow. Resolves to 96px at
     * zoom 1 (byte-identical to the pre-zoom design). */
    --hd-hold-member-w: calc(96px * var(--hd-player-content-zoom, 1));
  }

  /* ─── Hold-strip: horizontal scroll of member portraits ─────────────────── */

  .hd-hold-display__strip {
    display: flex;
    gap: var(--hd-space-2);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg,
      var(--hd-text-primary) 0,
      var(--hd-text-primary) calc(100% - 24px),
      transparent
    );
    mask-image: linear-gradient(90deg,
      var(--hd-text-primary) 0,
      var(--hd-text-primary) calc(100% - 24px),
      transparent
    );
    padding-block: var(--hd-space-1);
  }

  .hd-hold-display__strip::-webkit-scrollbar {
    display: none;
  }

  /* ─── Member card (button) ──────────────────────────────────────────────── */

  .hd-hold-display__member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hd-space-2);
    min-height: 48px; /* WCAG 2.5.5 touch-target */
    min-width: var(--hd-hold-member-w);
    padding: var(--hd-space-3);
    background: var(--hd-surface-2);
    color: var(--hd-text-primary);
    border: 1.5px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-md);
    cursor: pointer;
    flex-shrink: 0;
    text-align: center;
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-snug);
    transition: border-color var(--hd-motion-fast) ease-out,
                background var(--hd-motion-fast) ease-out,
                transform var(--hd-motion-fast) ease-out;
  }

  .hd-hold-display__member:hover {
    background: var(--hd-surface-3);
  }

  .hd-hold-display__member:focus-visible {
    outline: 2px solid var(--hd-focus-ring);
    outline-offset: 2px;
  }

  .hd-hold-display__member--selected {
    border-color: var(--hd-accent-primary);
    border-width: 2px;
  }

  /* Spec §24.1: gold-halo on self */
  .hd-hold-display__member--self .hd-hold-display__portrait {
    /* §24.1: ring + blød ydre glød (manglede før). */
    box-shadow: 0 0 0 2px var(--hd-quest-narrative), 0 0 14px rgba(240, 197, 112, 0.6);
  }

  /* Spec §24.1: lead and NPC styles purely via badges */

  /* ─── Portrait + HP-ring ────────────────────────────────────────────────── */

  .hd-hold-display__portrait {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--hd-surface-3);
    border: 3px solid var(--hd-border-medium);
    flex-shrink: 0;
  }

  /* Character portrait image filling the circle (D3). Clipped to the round
   * wrapper; the HP-ring border stays on the wrapper and draws around it. */
  .hd-hold-display__portrait-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }

  /* HP-ring color variants (spec §24.1: full/injured/bloodied/down) */
  .hd-hold-display__hp-ring--full {
    border-color: var(--hd-activity-assist);
  }
  .hd-hold-display__hp-ring--injured {
    border-color: var(--hd-quest-npc);
  }
  .hd-hold-display__hp-ring--bloodied {
    border-color: var(--hd-activity-combat);
  }
  .hd-hold-display__hp-ring--down {
    border-color: var(--hd-text-disabled);
    background: var(--hd-surface-1);
  }

  /* Badges for party-lead and NPC-allié positioned absolute */
  .hd-hold-display__crown,
  .hd-hold-display__npc-star {
    position: absolute;
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-icon);
    user-select: none;
    pointer-events: none;
  }

  .hd-hold-display__crown {
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
  }

  .hd-hold-display__crown-icon {
    --hd-player-icon-size: var(--hd-text-ui-small);
  }

  .hd-hold-display__npc-star {
    bottom: -4px;
    right: -4px;
    color: var(--hd-activity-group);
  }

  /* ─── 3-line stack: name / player / pronouns + HP-line ──────────────────── */

  .hd-hold-display__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hd-space-1);
    min-width: 0;
    max-width: var(--hd-hold-member-w);
  }

  .hd-hold-display__charname {
    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-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: var(--hd-hold-member-w);
  }

  .hd-hold-display__playername,
  .hd-hold-display__pronouns {
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-caption);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: var(--hd-hold-member-w);
  }

  .hd-hold-display__hp {
    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-secondary);
  }

  .hd-hold-display__hp--unconscious {
    color: var(--hd-text-disabled);
    font-style: italic;
  }

  /* ─── Hold-info: group title + motto + milestones ────────────────────────── */

  .hd-hold-display__info {
    padding: var(--hd-space-3);
    background: var(--hd-surface-2);
    border-radius: var(--hd-radius-md);
    border: 1px solid var(--hd-border-subtle);
  }

  .hd-hold-display__group-title {
    margin: 0 0 var(--hd-space-2) 0;
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h3);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-primary);
  }

  .hd-hold-display__motto {
    margin: 0 0 var(--hd-space-2) 0;
    font-family: var(--hd-font-narrative);
    font-size: var(--hd-text-body);
    line-height: var(--hd-leading-relaxed);
    font-style: italic;
    color: var(--hd-text-secondary);
  }

  .hd-hold-display__milestones {
    margin: 0;
    padding-inline-start: var(--hd-space-4);
    list-style: disc;
  }

  .hd-hold-display__milestone {
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body-small);
    line-height: var(--hd-leading-normal);
    color: var(--hd-text-secondary);
    padding-block: 2px;
  }

  /* ─── Activity-feed host + detail-pane host (mount points) ──────────────── */

  .hd-hold-display__activity {
    background: var(--hd-surface-2);
    border-radius: var(--hd-radius-md);
    border: 1px solid var(--hd-border-subtle);
    overflow: hidden;
  }

  .hd-hold-display__detail {
    /* Container for HoldDetailPane inline mode; empty until member is clicked.
     * Visibility flips on @container query (hidden on phone, grid-cell on tablet). */
    display: none;
  }

  .hd-hold-display--detail-open .hd-hold-display__detail {
    display: block;
    background: var(--hd-surface-2);
    border-radius: var(--hd-radius-md);
    border: 1px solid var(--hd-border-subtle);
    padding: var(--hd-space-3);
  }

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

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

  /* ─── Tablet landscape: 2-column grid with inline detail-pane (§24.4) ─── */
  @container (min-width: 720px) {
    .hd-hold-display {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
      grid-template-areas:
        "strip strip"
        "info  detail"
        "activity detail";
      gap: var(--hd-space-3);
    }
    .hd-hold-display__strip { grid-area: strip; }
    .hd-hold-display__info { grid-area: info; }
    .hd-hold-display__activity { grid-area: activity; }
    .hd-hold-display__detail {
      grid-area: detail;
      display: block;
      background: var(--hd-surface-2);
      border-radius: var(--hd-radius-md);
      border: 1px solid var(--hd-border-subtle);
      padding: var(--hd-space-3);
    }
  }

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

} /* end @layer components */