/*
 * hold-detail-pane.css — Plan E E7
 *
 * BEM .hd-hold-detail-pane__* classes for §24.4 mini-character-sheet (AD-8).
 *
 * Two-mode design:
 *   - .hd-hold-detail-pane--modal  → singleton <dialog> + ::backdrop overlay
 *   - .hd-hold-detail-pane--inline → host-mounted pane inside tablet 2-col grid
 *
 * Both modes share the same internal sections (.hd-hold-detail-pane__root
 * downward) — only the outer chrome differs.
 *
 * 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-*
 *   - css-layer-coverage: @layer components wrapper
 *   - wcag-contrast: reuses existing AAA-verified tokens (no new pairings)
 *   - WCAG 2.5.5 touch-targets: write-btn + legacy close-icon ≥48px
 *   - prefers-reduced-motion: override removes transitions
 *
 * Cascade layers: reset → tokens → base → components → utilities → overrides
 */

@layer components {

  /* ============================================================
   * Dialog backdrop + container (modal mode)
   * ============================================================ */

  dialog.hd-hold-detail-pane:not(.hd-modal) {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--hd-text-primary);
    font-family: var(--hd-font-ui);
    max-width: min(92vw, 480px);
    max-height: 90vh;
  }

  dialog.hd-hold-detail-pane:not(.hd-modal)::backdrop {
    background: color-mix(in srgb, var(--hd-surface-base) 70%, transparent);
    backdrop-filter: blur(2px);
  }

  /* ============================================================
   * Root (shared by modal + inline)
   * ============================================================ */

  .hd-hold-detail-pane__root {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
    padding: var(--hd-space-4);
    background: var(--hd-surface-1);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-lg);
    box-shadow: var(--hd-shadow-modal);
    max-height: 90vh;
    overflow: auto;
  }

  /* Inline mode overrides: no shadow + tighter padding + adapts to host */
  .hd-hold-detail-pane--inline .hd-hold-detail-pane__root {
    box-shadow: none;
    border: 0;
    padding: 0;
    background: transparent;
    max-height: none;
  }

  /* ============================================================
   * Header (portrait + name + legacy fallback close-icon)
   * ============================================================ */

  .hd-hold-detail-pane__header {
    display: flex;
    gap: var(--hd-space-3);
    align-items: center;
  }

  .hd-hold-detail-pane__portrait {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--hd-surface-3);
    border: 2px solid var(--hd-border-medium);
  }

  .hd-hold-detail-pane__name-stack {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-1);
  }

  .hd-hold-detail-pane__name {
    margin: 0;
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h3);
    line-height: var(--hd-leading-tight);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hd-hold-detail-pane__meta {
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hd-hold-detail-pane__close-icon {
    flex: 0 0 auto;
    /* WCAG 2.5.5 touch-target */
    min-width: 48px;
    min-height: 48px;
    background: transparent;
    border: 0;
    color: var(--hd-text-tertiary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-h3);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
    border-radius: var(--hd-radius-sm);
    transition: color var(--hd-motion-fast) ease-out,
                background var(--hd-motion-fast) ease-out;
  }

  .hd-hold-detail-pane__close-icon:hover {
    color: var(--hd-text-primary);
    background: var(--hd-surface-2);
  }

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

  /* ============================================================
   * Generic section + section-title
   * ============================================================ */

  .hd-hold-detail-pane__section {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
  }

  .hd-hold-detail-pane__section-title {
    margin: 0;
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-snug);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-tertiary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* ============================================================
   * 2. Kamp-stats grid (4 cells: HP / RK / Init / Fart)
   * ============================================================ */

  .hd-hold-detail-pane__kamp-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--hd-space-2);
    text-align: center;
  }

  .hd-hold-detail-pane__kamp-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--hd-space-2);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm);
  }

  .hd-hold-detail-pane__kamp-value {
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-h5);
    line-height: var(--hd-leading-tight);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-primary);
  }

  .hd-hold-detail-pane__kamp-label {
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-micro);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-tertiary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* ============================================================
   * 3. Egenskaber 6-grid (str/dex/con/int/wis/cha)
   * ============================================================ */

  .hd-hold-detail-pane__ab-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--hd-space-1);
    text-align: center;
  }

  .hd-hold-detail-pane__ab-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--hd-space-2) var(--hd-space-1);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm);
  }

  .hd-hold-detail-pane__ab-label {
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-micro);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-tertiary);
    letter-spacing: 0.04em;
    font-weight: var(--hd-weight-semibold);
  }

  .hd-hold-detail-pane__ab-value {
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body);
    line-height: var(--hd-leading-tight);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-primary);
  }

  .hd-hold-detail-pane__ab-mod {
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-snug);
    color: var(--hd-activity-check);
  }

  /* ============================================================
   * 4. Formular-pladser (slot-dots)
   * ============================================================ */

  .hd-hold-detail-pane__slots-line {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-2);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-snug);
    color: var(--hd-text-secondary);
  }

  .hd-hold-detail-pane__slot-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }

  .hd-hold-detail-pane__slot-level {
    margin-right: var(--hd-space-1);
    color: var(--hd-text-tertiary);
    font-weight: var(--hd-weight-semibold);
  }

  .hd-hold-detail-pane__slot-dot {
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-icon);
    color: var(--hd-activity-cast);
  }

  .hd-hold-detail-pane__slot-dot--spent {
    color: var(--hd-text-disabled);
  }

  /* ============================================================
   * 5. Spell-lines (cantrips + prepared)
   * ============================================================ */

  .hd-hold-detail-pane__spell-line {
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-normal);
    color: var(--hd-text-secondary);
  }

  .hd-hold-detail-pane__spell-line-label {
    color: var(--hd-text-tertiary);
    font-weight: var(--hd-weight-semibold);
  }

  .hd-hold-detail-pane__spell-line-text {
    color: var(--hd-text-primary);
  }

  /* ============================================================
   * 6. Klasse-ressourcer
   * ============================================================ */

  .hd-hold-detail-pane__class-resources {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-1);
  }

  .hd-hold-detail-pane__class-resource {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--hd-space-1) 0;
    border-bottom: 1px solid var(--hd-surface-2);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-snug);
  }

  .hd-hold-detail-pane__class-resource-name {
    color: var(--hd-text-primary);
  }

  .hd-hold-detail-pane__class-resource-value {
    color: var(--hd-activity-check);
    font-weight: var(--hd-weight-semibold);
  }

  /* ============================================================
   * 7. Ejendele (charges-pills)
   * ============================================================ */

  .hd-hold-detail-pane__charges-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-2);
  }

  .hd-hold-detail-pane__charge-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    padding: var(--hd-space-1) var(--hd-space-2);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-full);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-snug);
  }

  .hd-hold-detail-pane__charge-name {
    color: var(--hd-text-primary);
  }

  .hd-hold-detail-pane__charge-value {
    color: var(--hd-activity-order);
    font-weight: var(--hd-weight-semibold);
  }

  /* ============================================================
   * 8. Tilstande (cond-pills)
   * ============================================================ */

  .hd-hold-detail-pane__cond-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-1);
  }

  .hd-hold-detail-pane__cond-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--hd-space-1) var(--hd-space-2);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-full);
    color: var(--hd-quest-dm);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-snug);
    font-weight: var(--hd-weight-medium);
  }

  /* ============================================================
   * 9. Footer (write button)
   * ============================================================ */

  .hd-hold-detail-pane__footer {
    display: flex;
    gap: var(--hd-space-2);
    margin-top: var(--hd-space-2);
    padding-top: var(--hd-space-3);
    border-top: 1px solid var(--hd-surface-2);
    justify-content: flex-end;
  }

  .hd-hold-detail-pane__footer:empty {
    display: none;
  }

  /* WCAG 2.5.5 touch-target ≥48px applies to all footer actions. */
  .hd-hold-detail-pane__write-btn {
    min-height: 48px;
    min-width: 48px;
    padding: var(--hd-space-2) var(--hd-space-4);
    border-radius: var(--hd-radius-md);
    cursor: pointer;
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body-small);
    line-height: var(--hd-leading-snug);
    font-weight: var(--hd-weight-semibold);
    transition: background var(--hd-motion-fast) ease-out,
                color var(--hd-motion-fast) ease-out,
                border-color var(--hd-motion-fast) ease-out;
  }

  .hd-hold-detail-pane__write-btn {
    background: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
    border: 1px solid var(--hd-accent-primary);
  }

  .hd-hold-detail-pane__write-btn:hover {
    background: var(--hd-accent-secondary);
    border-color: var(--hd-accent-secondary);
  }

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

  /* ============================================================
   * Inline-mode: sticky header inside .__detail host
   * ============================================================ */

  .hd-hold-detail-pane--inline .hd-hold-detail-pane__header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--hd-surface-2);
    padding-block: var(--hd-space-2);
  }

  /* ============================================================
   * Reduced-motion override
   * ============================================================ */

  @media (prefers-reduced-motion: reduce) {
    .hd-hold-detail-pane__close-icon,
    .hd-hold-detail-pane__write-btn {
      transition: none;
    }
  }

} /* end @layer components */