/*
 * combat-companion.css — Plan D D4
 *
 * Turn-strip + 3 eco-knapper styles for the interactive combat-companion
 * view (#combat-companion-mount). D4 ships: turn-strip + token + HP-ring +
 * eco-buttons (Default/Active/Used) + active-glow + movement-slider stub.
 *
 * All design-tokens consumed via var() — no hex literals (hex-zero gate).
 * BEM scope: .hd-combat-companion-* + .hd-combat-companion__*.
 * Typography via --hd-text-* token ramp only.
 *
 * Spec: docs/plans/2026-05-21-player-portal-redesign-design.md §6.1 (turn-strip)
 *        + §6.3 (eco-knapper).
 *
 * Cascade layers: reset → tokens → base → components → utilities → overrides.
 */

@layer components {

  /* ============================================================
   * Mount + hidden default
   * ============================================================ */

  #combat-companion-mount.hd-combat-companion-mount {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
    padding: var(--hd-space-3);
    background: var(--hd-surface-1);
    color: var(--hd-text-primary);
    overflow-y: auto;
    /* Token-system zoom (user-decision §KAMP): the whole turn-strip token —
     * disc, portrait inset, HP-ring and corner badges + their offsets — scales
     * with content-zoom so the portrait and badge glyphs grow together with the
     * card text. The strip already scrolls horizontally, so wider tokens only
     * add scroll length. --cc-z resolves to 1 → every derived px is
     * byte-identical to the pre-zoom design at zoom 1. */
    --cc-z: var(--hd-player-content-zoom, 1);
    --cc-token: calc(44px * var(--cc-z));
  }

  #combat-companion-mount[hidden] {
    display: none !important;
  }

  /* ============================================================
   * Turn-strip
   * ============================================================ */

  .hd-combat-companion__turn-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--hd-space-2);
    align-items: center;
    overflow-x: auto;
    padding: var(--hd-space-1) 0;
    scroll-snap-type: x mandatory;
  }

  /* ============================================================
   * Token (button — a11y + tap → expand detail-card in D5+)
   * ============================================================ */

  .hd-combat-companion__token {
    position: relative;
    flex: 0 0 auto;
    width: var(--cc-token); /* 44px at zoom 1 — WCAG 2.5.5 touch-target */
    height: var(--cc-token);
    padding: 0;
    border: 1px solid var(--hd-border-medium);
    background: var(--hd-surface-2);
    border-radius: 50%;
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform var(--hd-motion-fast) var(--hd-easing-standard, ease);
  }

  .hd-combat-companion__token:hover,
  .hd-combat-companion__token:focus-visible {
    transform: scale(1.05);
  }

  .hd-combat-companion__token-portrait {
    position: absolute;
    inset: calc(2px * var(--cc-z));
    border-radius: 50%;
    background-color: var(--hd-surface-3);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* Active combatant: red border + glow (spec §6.1) */
  .hd-combat-companion__token--active {
    border-color: var(--hd-accent-error);
    box-shadow: 0 0 12px var(--hd-accent-error),
                0 0 4px var(--hd-accent-error);
  }

  @media (prefers-reduced-motion: no-preference) {
    .hd-combat-companion__token--active {
      /* Slow breathing pulse — 2.2s full cycle (calm → peak → calm), per the
       * original redesign mockup (#17 combat-companion). Hardkodet spil-feel
       * loop-periode på linje med dasham turn-pulse/cell-glow — IKKE en
       * UI-transition (fast/normal/slow = 120/200/320ms); whitelistet i
       * tests/motion-tokens-parity.js. */
      animation: hd-combat-companion-active-pulse 2.2s var(--hd-ease-in-out) infinite;
    }
  }

  @keyframes hd-combat-companion-active-pulse {
    0%, 100% { box-shadow: 0 0 12px var(--hd-accent-error), 0 0 4px var(--hd-accent-error); }
    50%      { box-shadow: 0 0 20px var(--hd-accent-error), 0 0 8px var(--hd-accent-error); }
  }

  /* Player-token HP-ring (SVG-less: conic-gradient via custom property --hp-pct 0..1) */
  .hd-combat-companion__token-hpring {
    position: absolute;
    inset: calc(-3px * var(--cc-z));
    border-radius: 50%;
    background: conic-gradient(
      var(--hd-accent-success) calc(var(--hp-pct, 1) * 360deg),
      var(--hd-surface-3)      calc(var(--hp-pct, 1) * 360deg)
    );
    pointer-events: none;
    z-index: -1;
  }

  /* ============================================================
   * Eco-knapper row + 3 buttons (handling / bonus / movement)
   * Spec §6.3: m-value `.sub` for movement; 3 states (Default/Active/Used).
   * ============================================================ */

  .hd-combat-companion__eco-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hd-space-2);
  }

  .hd-combat-companion__eco-button {
    position: relative;
    padding: var(--hd-space-2) var(--hd-space-3);
    /* §6.3: pergament-bg + guld-border i default-tilstand. */
    border: 1px solid var(--hd-border-accent);
    background: linear-gradient(180deg, var(--hd-ka-stone-bg-start, var(--hd-parchment-bg)), var(--hd-ka-stone-bg-end, var(--hd-parchment-bg)));
    color: var(--hd-text-on-parchment, var(--hd-parchment-text));
    border-radius: var(--hd-radius-md);
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold);
    cursor: pointer;
    min-height: 48px; /* WCAG 2.5.5 touch-target */
    transition: background var(--hd-motion-fast) var(--hd-easing-standard, ease),
                border-color var(--hd-motion-fast) var(--hd-easing-standard, ease),
                opacity var(--hd-motion-fast) var(--hd-easing-standard, ease);
  }

  .hd-combat-companion__eco-button:hover,
  .hd-combat-companion__eco-button:focus-visible {
    border-color: var(--hd-accent-primary);
  }

  /* Active (lilla gradient + glow) */
  .hd-combat-companion__eco-button--active {
    background: linear-gradient(135deg, var(--hd-accent-primary), var(--hd-accent-secondary));
    color: var(--hd-text-on-accent);
    border-color: var(--hd-accent-secondary);
    box-shadow: 0 0 8px var(--hd-accent-primary);
  }

  /* Used (dim 0.55 + rødt ✕ via ::after) */
  .hd-combat-companion__eco-button--used {
    opacity: 0.55;
  }

  .hd-combat-companion__eco-button--used::after {
    content: '✕';
    position: absolute;
    top: 4px;
    right: 6px;
    color: var(--hd-accent-error);
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-bold);
  }

  .hd-combat-companion__eco-button-sub {
    display: block;
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-regular);
    color: var(--hd-text-secondary);
    margin-top: 2px;
  }

  /* ============================================================
   * Movement slider (stub — D5 expands)
   * ============================================================ */

  .hd-combat-companion__movement-slider {
    padding: var(--hd-space-2);
    background: var(--hd-surface-2);
    border-radius: var(--hd-radius-sm);
  }

  .hd-combat-companion__movement-slider input[type="range"] {
    width: 100%;
  }

  /* ============================================================
   * D5 — Eco-drawer (spec §6.4)
   * ============================================================ */

  .hd-combat-companion__drawer-divider {
    border: 0;
    height: 3px;
    margin: var(--hd-space-2) calc(var(--hd-space-3) * -1) 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--hd-border-medium) 25%,
      var(--hd-gold-fg, var(--hd-text-primary)) 50%,
      var(--hd-border-medium) 75%,
      transparent 100%
    );
  }

  .hd-combat-companion__drawer {
    padding: var(--hd-space-2) 0;
  }

  .hd-combat-companion__drawer-title {
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-secondary);
    margin: 0 0 var(--hd-space-2) 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* ============================================================
   * D5 — Handling-drawer 3x3 grid (spec §6.5)
   * ============================================================ */

  .hd-combat-companion__handling-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hd-space-2);
  }

  .hd-combat-companion__handling-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding: var(--hd-space-2);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
    color: var(--hd-text-primary);
    cursor: pointer;
    transition: background var(--hd-motion-fast) var(--hd-easing-standard, ease),
                border-color var(--hd-motion-fast) var(--hd-easing-standard, ease);
  }

  .hd-combat-companion__handling-cell:hover,
  .hd-combat-companion__handling-cell:focus-visible {
    background: var(--hd-surface-3, var(--hd-surface-2));
    border-color: var(--hd-text-primary);
  }

  .hd-combat-companion__handling-cell--active {
    background: var(--hd-purple-bg, var(--hd-surface-3, var(--hd-surface-2)));
    border-color: var(--hd-gold-fg, var(--hd-text-primary));
    box-shadow: 0 0 0 1px var(--hd-gold-fg, var(--hd-text-primary));
  }

  .hd-combat-companion__handling-cell-emoji {
    --hd-handling-emoji-size: 1.375rem; /* ~22px — decoration emoji icon */
    font-size: var(--hd-handling-emoji-size);
    line-height: var(--hd-leading-icon);
  }

  .hd-combat-companion__handling-cell-label {
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-tight);
    text-align: center;
  }

  .hd-combat-companion__action-def {
    margin-top: var(--hd-space-2);
    padding: var(--hd-space-2) var(--hd-space-3);
    background: var(--hd-surface-2);
    border-left: 3px solid var(--hd-purple-bg, var(--hd-text-primary));
    border-radius: var(--hd-radius-sm);
    font-style: italic;
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-secondary);
  }

  /* ============================================================
   * D5 — Bonus-drawer placeholder
   * ============================================================ */

  .hd-combat-companion__bonus-placeholder {
    padding: var(--hd-space-3);
    font-style: italic;
    color: var(--hd-text-secondary);
    text-align: center;
  }

  /* ============================================================
   * D5 — Bevæg-drawer slider
   * ============================================================ */

  .hd-combat-companion__bevæg-display {
    font-size: var(--hd-text-ui);
    font-weight: var(--hd-weight-semibold);
    text-align: center;
    margin-bottom: var(--hd-space-2);
    color: var(--hd-text-primary);
  }

  .hd-combat-companion__bevæg-slider {
    width: 100%;
    height: 32px;
  }

  /* ============================================================
   * D5 — Mine stats (spec §6.10)
   * ============================================================ */

  .hd-combat-companion__mine-stats {
    margin-top: var(--hd-space-3);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-md);
    overflow: hidden;
  }

  .hd-combat-companion__mine-stats-head {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--hd-space-2) var(--hd-space-3);
    background: linear-gradient(180deg, var(--hd-surface-2) 0%, var(--hd-surface-1) 100%);
    border: 0;
    color: var(--hd-text-primary);
    cursor: pointer;
    gap: var(--hd-space-2);
  }

  .hd-combat-companion__mine-stats-title {
    font-size: var(--hd-text-ui);
    font-weight: var(--hd-weight-bold);
    flex: 0 0 auto;
  }

  .hd-combat-companion__mine-stats-preview {
    flex: 1;
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-secondary);
    text-align: left;
  }

  .hd-combat-companion__mine-stats-caret {
    flex: 0 0 auto;
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-secondary);
  }

  .hd-combat-companion__mine-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--hd-space-1);
    padding: var(--hd-space-2) var(--hd-space-3);
  }

  .hd-combat-companion__mine-stats-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--hd-space-1) 0;
  }

  .hd-combat-companion__mine-stats-cell-label {
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-secondary);
  }

  .hd-combat-companion__mine-stats-cell-value {
    font-size: var(--hd-text-ui);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-primary);
  }

  /* ============================================================
   * D5 — Mine tilstande (spec §6.11)
   * ============================================================ */

  .hd-combat-companion__mine-tilstande {
    margin-top: var(--hd-space-3);
  }

  .hd-combat-companion__mine-tilstande-title {
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-bold);
    color: var(--hd-text-primary);
    margin: 0 0 var(--hd-space-2) 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .hd-combat-companion__mine-tilstande-empty {
    font-style: italic;
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-ui-small);
  }

  .hd-combat-companion__mine-tilstande-list {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-1);
  }

  .hd-combat-companion__condition-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--hd-space-1) var(--hd-space-2);
    background: var(--hd-surface-2);
    border-radius: var(--hd-radius-sm);
    border-left: 4px solid var(--hd-text-primary);
  }

  .hd-combat-companion__condition-chip--red {
    border-left-color: var(--hd-damage-fg, var(--hd-text-primary));
  }

  .hd-combat-companion__condition-chip--green {
    border-left-color: var(--hd-success-fg, var(--hd-text-primary));
  }

  .hd-combat-companion__condition-chip--yellow {
    border-left-color: var(--hd-warning-fg, var(--hd-text-primary));
  }

  .hd-combat-companion__condition-chip-name {
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-primary);
  }

  .hd-combat-companion__condition-chip-rounds {
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-secondary);
    font-weight: var(--hd-weight-semibold);
  }

  /* ============================================================
   * Plan D D9 — §15 Concentration badge on combatant token
   * Yellow-amber glow indicates active concentration. Uses
   * --hd-condition-warning token (added in D9.3 to design-tokens.css)
   * for both light + dark themes (both AAA on surface-2).
   * ============================================================ */

  .hd-combat-companion__token--concentrating {
    border-color: var(--hd-condition-warning);
    box-shadow:
      0 0 0 2px var(--hd-condition-warning),
      0 0 8px 2px color-mix(in srgb, var(--hd-condition-warning) 50%, transparent);
  }

  .hd-combat-companion__token--concentrating::after {
    content: '';
    position: absolute;
    top: calc(2px * var(--cc-z));
    right: calc(2px * var(--cc-z));
    width: calc(8px * var(--cc-z));
    height: calc(8px * var(--cc-z));
    border-radius: 50%;
    background: var(--hd-condition-warning);
    box-shadow: 0 0 4px var(--hd-condition-warning);
  }

  .hd-combat-companion__token-concentration-icon {
    --hd-player-icon-size: calc(14px * var(--cc-z));
    position: absolute;
    top: calc(-4px * var(--cc-z));
    right: calc(-4px * var(--cc-z));
    z-index: 1;
    width: calc(18px * var(--cc-z));
    height: calc(18px * var(--cc-z));
    border-radius: 50%;
    border: 1px solid var(--hd-surface-1);
    background: var(--hd-condition-warning);
    color: var(--hd-surface-1);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hd-combat-companion__token-concentration-glyph {
    width: var(--hd-player-icon-size);
    height: var(--hd-player-icon-size);
    flex: 0 0 auto;
  }

  .hd-combat-companion__detail-line--concentration {
    display: flex;
    align-items: center;
    gap: var(--hd-space-1);
    color: var(--hd-condition-warning);
    font-style: italic;
    font-size: var(--hd-text-ui-small);
  }

  .hd-combat-companion__detail-concentration-icon {
    --hd-player-icon-size: 1em;
    width: 1em;
    height: 1em;
    color: currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .hd-combat-companion__detail-concentration-glyph {
    width: var(--hd-player-icon-size);
    height: var(--hd-player-icon-size);
    flex: 0 0 auto;
  }

  /* ============================================================
   * Plan D D10 — §15 Token badges (damage modifiers + legendary)
   * Badges sit absolutely in token corners. Tokens are 42×42 buttons
   * with position:relative. Color tokens defined in design-tokens.css.
   * ============================================================ */

  .hd-combat-companion__token-badge {
    position: absolute;
    width: calc(14px * var(--cc-z));
    height: calc(14px * var(--cc-z));
    border-radius: 50%;
    font-size: var(--hd-text-micro);
    font-weight: var(--hd-weight-bold);
    line-height: var(--hd-leading-icon);
    text-align: center;
    color: var(--hd-surface-1);
    background: var(--hd-text-primary);
    border: 1px solid var(--hd-surface-1);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hd-combat-companion__token-badge--immune {
    bottom: calc(-2px * var(--cc-z));
    left: calc(-2px * var(--cc-z));
    background: var(--hd-damage-immune);
    color: var(--hd-surface-1);
  }

  .hd-combat-companion__token-badge--resistant {
    bottom: calc(-2px * var(--cc-z));
    left: calc(12px * var(--cc-z));
    background: var(--hd-damage-resistant);
    color: var(--hd-surface-1);
  }

  .hd-combat-companion__token-badge--vulnerable {
    bottom: calc(-2px * var(--cc-z));
    left: calc(26px * var(--cc-z));
    background: var(--hd-damage-vulnerable);
    color: var(--hd-surface-1);
  }

  .hd-combat-companion__token-badge--legendary {
    top: calc(-4px * var(--cc-z));
    left: calc(-4px * var(--cc-z));
    width: calc(22px * var(--cc-z));
    height: calc(14px * var(--cc-z));
    border-radius: calc(7px * var(--cc-z));
    font-size: var(--hd-text-micro);
    line-height: var(--hd-leading-icon);
    background: var(--hd-activity-attack);
    color: var(--hd-surface-1);
    border: 1px solid var(--hd-surface-1);
  }

  /* ============================================================
   * Plan D D10 — §15 Detail-card line variants
   * ============================================================ */

  .hd-combat-companion__detail-line--mastery {
    color: var(--hd-activity-attack);
    font-style: italic;
    font-size: var(--hd-text-ui-small);
  }

  .hd-combat-companion__detail-line--damage {
    font-size: var(--hd-text-ui-small);
  }

  .hd-combat-companion__detail-line--damage-immune {
    color: var(--hd-damage-immune);
  }

  .hd-combat-companion__detail-line--damage-resistant {
    color: var(--hd-damage-resistant);
  }

  .hd-combat-companion__detail-line--damage-vulnerable {
    color: var(--hd-damage-vulnerable);
  }

  .hd-combat-companion__detail-line--legendary {
    color: var(--hd-activity-attack);
    font-size: var(--hd-text-ui-small);
  }

  .hd-combat-companion__detail-line--legendary .hd-combat-companion__detail-hint {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
    font-style: italic;
  }

  /* ============================================================
   * Reduced motion
   * ============================================================ */

  @media (prefers-reduced-motion: reduce) {
    .hd-combat-companion__token,
    .hd-combat-companion__eco-button {
      transition: none;
    }
    .hd-combat-companion__token--active {
      animation: none;
    }
    .hd-combat-companion__token--concentrating {
      box-shadow: 0 0 0 2px var(--hd-condition-warning);
    }
  }

  /* ============================================================
   * Plan D D11 — §15 Combat-log footer link + modal
   * ============================================================ */

  .hd-combat-companion__footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    border-top: 1px solid var(--hd-border-subtle);
    background: var(--hd-surface-1);
  }

  .hd-combat-companion__log-link {
    background: transparent;
    border: none;
    color: var(--hd-text-primary);
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--hd-text-ui-small);
    padding: var(--hd-space-1) var(--hd-space-2);
    border-radius: var(--hd-radius-sm);
    min-height: 48px; /* WCAG 2.5.5 touch-target */
  }

  .hd-combat-companion__log-link:hover,
  .hd-combat-companion__log-link:focus-visible {
    background: var(--hd-surface-2);
  }

  /* Log modal: rendered via ModalManager native <dialog>
   * (.hd-modal.hd-combat-companion__log). Placement/backdrop/animation +
   * header/title/close come from modals.css; these classes style the body
   * content + the footer filter toggle (Fase 3 modal normalization). */

  .hd-combat-companion__log-filter-toggle {
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-subtle);
    color: var(--hd-text-primary);
    padding: var(--hd-space-1) var(--hd-space-3);
    border-radius: var(--hd-radius-sm);
    cursor: pointer;
    min-height: 48px; /* WCAG 2.5.5 touch-target */
    font-size: var(--hd-text-ui-small);
  }

  .hd-combat-companion__log-body {
    padding: var(--hd-space-2) 0;
  }

  .hd-combat-companion__log-entry {
    padding: 6px 0;
    border-bottom: 1px solid var(--hd-border-medium);
    font-family: var(--hd-font-mono, monospace);
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-primary);
  }

  .hd-combat-companion__log-empty {
    text-align: center;
    color: var(--hd-text-tertiary);
    padding: 24px 0;
    font-style: italic;
  }
}