/**
 * chip-nav.css — delt chip-row primitiv (HdChipNav).
 * Visuelt udtrukket fra Dashams .hd-dasham-portal__chip (dasham-portal.css).
 * Piller + delt aktiv-overflade + responsive navngivne label-stages via
 * HdChipNav fit-stages med container-query fallback. `.hd-chip-row--fill`
 * ejer fuldbredde-/equal-width-layoutet på tværs af tabs- og nav-mode.
 * Layer: components.
 */
@layer components {
  :root {
    /* Udtrukne delte chip-tokens. Aktiv dark-chip bruger solid accent-flade,
     * så label-kontrasten er token-sikker ligesom light-temaets røde flade. */
    --hd-chip-active-bg:     var(--hd-accent-primary);
    --hd-chip-active-image:  none;
    --hd-chip-active-border: var(--hd-accent-primary);
    --hd-chip-active-text:   var(--hd-text-on-accent);
    --hd-chip-border:        rgba(201, 169, 110, 0.28);
    --hd-chip-border-hover:  rgba(201, 169, 110, 0.5);
    --hd-chip-radius:        999px;
    --hd-chip-gap:           4px;
    --hd-chip-icon-size:      20px;
    --hd-chip-icon-only-size: 30px;
    --hd-chip-label-line-height: var(--hd-leading-snug, 1.35);
    --hd-chip-row-padding-block: var(--hd-space-2, 8px);
    --hd-chip-row-padding-block-start: 0px;
    --hd-chip-row-padding-block-end: var(--hd-chip-row-padding-block);
    --hd-chip-row-padding-inline: 6px;
  }

  /* Lyst tema: den gamle oxblod-tint så stadig gennemsigtig ud mod pergament.
   * Aktiv chip bruger derfor samme røde læder-overflade + lys tekst som de
   * øvrige vigtige player-portal knapper. Token er delt (HdChipNav +
   * PlayerTabBar + Dasham + levelup-btn--available), så rettelsen gælder
   * konsekvent. */
  [data-theme="light"] {
    --hd-chip-active-bg:     var(--hd-accent-error);
    --hd-chip-active-image:  var(--hd-texture-leather-red);
    --hd-chip-active-border: var(--hd-accent-error);
    --hd-chip-active-text:   var(--hd-text-on-accent);
  }

  .hd-chip-row {
    display: flex;
    gap: var(--hd-chip-gap);
    align-items: center;
    padding:
      var(--hd-chip-row-padding-block-start)
      var(--hd-chip-row-padding-inline)
      var(--hd-chip-row-padding-block-end);
    flex-shrink: 0;
    overflow: hidden;                 /* klip, aldrig scroll — stages forhindrer overflow */
    container-type: inline-size;
    container-name: hd-chip-row;
  }

  .hd-chip {
    flex: 0 1 auto;
    min-width: 44px;
    max-width: 100%;
    min-height: 44px;                 /* WCAG 2.5.5 */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 var(--hd-space-3);
    /* Chips er distinkte "pills" med egen flade-baggrund (ikke gennemsigtige
     * mod siden) — surface-2 står frem fra --hd-surface-base i begge temaer.
     * Aktiv-chip overskriver til guld-token nedenfor. */
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-chip-border);
    border-radius: var(--hd-chip-radius);
    color: var(--hd-text-secondary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui);
    line-height: var(--hd-leading-icon, 1.2);
    cursor: pointer;
    white-space: nowrap;
    transition:
      background var(--hd-transition-fast, 120ms ease),
      border-color var(--hd-transition-fast, 120ms ease),
      color var(--hd-transition-fast, 120ms ease);
  }
  .hd-chip-row--fill .hd-chip {
    flex: 1 1 0;
  }
  .hd-chip--icon { gap: 0; }
  .hd-chip--active {
    background-color: var(--hd-chip-active-bg);
    background-image: var(--hd-chip-active-image);
    background-size: cover;
    border-color: var(--hd-chip-active-border);
    color: var(--hd-chip-active-text);
    font-weight: var(--hd-weight-semibold);
  }
  .hd-chip:hover:not(.hd-chip--active):not(.hd-chip--disabled) {
    border-color: var(--hd-chip-border-hover);
    color: var(--hd-text-primary);
  }
  .hd-chip:focus-visible { outline: 2px solid var(--hd-accent-primary); outline-offset: 2px; }
  .hd-chip--disabled { opacity: 0.4; cursor: not-allowed; color: var(--hd-text-tertiary); }

  .hd-chip__icon {
    width: var(--hd-chip-icon-size); height: var(--hd-chip-icon-size); flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--hd-chip-icon-url, none) no-repeat center / 90%;
    mask: var(--hd-chip-icon-url, none) no-repeat center / 90%;
  }

  .hd-chip__icon-wrap {
    width: var(--hd-chip-icon-size); height: var(--hd-chip-icon-size); flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .hd-chip__label {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    line-height: var(--hd-chip-label-line-height);
  }
  .hd-chip__text {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: var(--hd-chip-label-line-height);
  }
  /* Stage 1 (default): kun --full synlig */
  .hd-chip__text--mid, .hd-chip__text--short { display: none; }
  /* ikon-only chips viser aldrig label */
  .hd-chip--icon .hd-chip__label { display: none; }

  /* Stage 2 — smalle tablets: foretræk mid-labels */
  @container hd-chip-row (max-width: 560px) {
    .hd-chip:not(.hd-chip--icon) .hd-chip__text--full { display: none; }
    .hd-chip:not(.hd-chip--icon) .hd-chip__text--mid  { display: inline; }
  }
  /* Stage 3 — telefoner: short-labels før 44px-targets klipper */
  @container hd-chip-row (max-width: 420px) {
    .hd-chip:not(.hd-chip--icon) .hd-chip__text--short { display: inline; }
    .hd-chip:not(.hd-chip--icon) .hd-chip__text--mid   { display: none; }
  }
  /* Stage 4 — smalle chip-rækker: ikonbærende chips bliver ikon-only før tekst klipper. */
  @container hd-chip-row (max-width: 520px) {
    .hd-chip-row--fill .hd-chip--has-icon:not(.hd-chip--icon) {
      flex: 1 1 0;
      gap: 0;
      padding-inline: 0;
    }
    .hd-chip-row:not(.hd-chip-row--fill) .hd-chip--has-icon:not(.hd-chip--icon) {
      flex: 0 0 44px;
      gap: 0;
      padding-inline: 0;
    }
    .hd-chip--has-icon:not(.hd-chip--icon) .hd-chip__label { display: none; }
  }

  /* JS-fit stages override the coarse container-query fallback above. */
  .hd-chip-row[data-label-stage] .hd-chip:not(.hd-chip--icon) .hd-chip__label {
    display: inline-flex;
  }
  .hd-chip-row[data-label-stage] .hd-chip:not(.hd-chip--icon) .hd-chip__text {
    display: none;
  }
  .hd-chip-row[data-label-stage="full"] .hd-chip:not(.hd-chip--icon) .hd-chip__text--full,
  .hd-chip-row[data-label-stage="mid"] .hd-chip:not(.hd-chip--icon) .hd-chip__text--mid,
  .hd-chip-row[data-label-stage="short"] .hd-chip:not(.hd-chip--icon) .hd-chip__text--short {
    display: inline-block;
  }
  .hd-chip-row[data-label-stage]:not([data-label-stage="icon"]) .hd-chip--has-icon:not(.hd-chip--icon) {
    gap: 6px;
    padding-inline: var(--hd-space-3);
  }
  .hd-chip-row[data-label-stage]:not([data-label-stage="icon"]).hd-chip-row--fill .hd-chip--has-icon:not(.hd-chip--icon) {
    flex: 1 1 0;
  }
  .hd-chip-row[data-label-stage]:not([data-label-stage="icon"]):not(.hd-chip-row--fill) .hd-chip--has-icon:not(.hd-chip--icon) {
    flex: 0 1 auto;
  }
  .hd-chip-row[data-label-stage="icon"].hd-chip-row--fill .hd-chip--has-icon:not(.hd-chip--icon) {
    flex: 1 1 0;
    gap: 0;
    padding-inline: 0;
  }
  .hd-chip-row[data-label-stage="icon"]:not(.hd-chip-row--fill) .hd-chip--has-icon:not(.hd-chip--icon) {
    flex: 0 0 44px;
    gap: 0;
    padding-inline: 0;
  }
  .hd-chip-row[data-label-stage="icon"] .hd-chip--has-icon:not(.hd-chip--icon) .hd-chip__label {
    display: none;
  }
  .hd-chip-row[data-label-stage="icon"] .hd-chip--has-icon:not(.hd-chip--icon) .hd-chip__icon,
  .hd-chip-row[data-label-stage="icon"] .hd-chip--has-icon:not(.hd-chip--icon) .hd-chip__icon-wrap {
    width: var(--hd-chip-icon-only-size);
    height: var(--hd-chip-icon-only-size);
  }
  .hd-chip-row[data-label-stage="icon"] .hd-chip:not(.hd-chip--has-icon):not(.hd-chip--icon) .hd-chip__text--short {
    display: inline-block;
  }

  .hd-chip-pane[hidden] { display: none; }
}