/**
 * player-top-bar.css — Plan B C4.
 *
 * 48px top-bar: avatar + navn (IM Fell English) + HP-bar dual-clip-path + AC-skjold + condition + view-name.
 * HP-drawer: 3 knapper (skade/heal/temp) + amount-input.
 *
 * BEM: .hd-player-top-bar*
 * Layer: components (hd-layer-rækkefølge fra design-tokens.css @layer-declaration).
 *
 * Tokens: alle farver via var(--hd-*). HP-farver bøjer specielle grøn/gul/rød—
 * ikke dækket af nuværende tokens; defineres som lokale custom props med fallback-kommentarer.
 * HP-tallet bruger gradient-clipped glyph fill, så talfarven følger HP-fill-grænsen.
 *
 * §5 + §5.1 + §5.2 i docs/plans/2026-05-21-player-portal-redesign-design.md er kanonisk.
 */

/* ------------------------------------------------------------------ */
/* HP colour custom properties (lokale til top-bar; ingen eksisterende */
/* token dækker disse tri-state farver)                                 */
/* ------------------------------------------------------------------ */
:root {
  /* HP-bar text sub-size (max/temp suffix — smaller than main HP digit) */
  --hd-hp-text-sub-size: 0.625rem;  /* 10px — component-scoped; no global token at this size */

  /* Character-switcher chevron — 70% of parent font size (relative; no global token) */
  --hd-player-top-bar-chev-size: 0.7em;

  /* Character-sheet drop-down min-width — component-scoped; no global token */
  --hd-player-top-bar-sheet-min-w: 180px;

  /* HP-bar tier colours — §5.1 */
  --hd-hp-high-start:    #6ba84f;   /* grøn start >67% */
  --hd-hp-high-end:      #8bc466;   /* grøn end */
  --hd-hp-mid-start:     #d4a418;   /* gul start 33-67% */
  --hd-hp-mid-end:       #f0c570;   /* gul end */
  --hd-hp-low-start:     #b53d28;   /* rød start <33% */
  --hd-hp-low-end:       #d9837b;   /* rød end */
  --hd-hp-empty-bg:      rgba(243, 232, 210, 0.18);   /* empty portion bg */
  --hd-hp-text-light:    #fff7e6;   /* tekst over fyldt HP-del */
  --hd-hp-text-dark:     #2a1810;   /* tekst over tom HP-del */

  /* HP-drawer action button colours (parallels hd-status-*) */
  --hd-hp-btn-dmg-start:  #b53d28;
  --hd-hp-btn-dmg-end:    #8b2d1a;
  --hd-hp-btn-heal-start: #6ba84f;
  --hd-hp-btn-heal-end:   #4d8034;
  --hd-hp-btn-temp-start: #4a7ca8;
  --hd-hp-btn-temp-end:   #2d5c80;
}

@layer components {
  /* ------------------------------------------------------------------ */
  /* Top-bar shell                                                        */
  /* ------------------------------------------------------------------ */
  .hd-player-top-bar {
    position: relative;
    width: 100%;
    height: var(--player-top-bar-height);
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);        /* 8px */
    padding: 0 var(--hd-space-3);  /* 0 12px */
    background: var(--hd-surface-1);
    border-bottom: 1px solid var(--hd-border-subtle);
    z-index: 100;
    font-family: var(--hd-font-parchment);
    box-sizing: border-box;
    /* container query context for progressive-disclosure */
    container-type: inline-size;
  }

  /* ------------------------------------------------------------------ */
  /* Avatar — 32px circle                                                 */
  /* ------------------------------------------------------------------ */
  .hd-player-top-bar__avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-ui-small);  /* 0.75rem = 12px — avatar initial fallback */
    line-height: var(--hd-leading-icon); /* 1 — icon centering */
  }

  .hd-player-top-bar__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Selv-klip so the circle survives when the avatar runs overflow:visible
       (level-up badge overflow case). */
    border-radius: 50%;
  }

  /* ------------------------------------------------------------------ */
  /* Name — IM Fell English bold, first/last split for progressive hide   */
  /* ------------------------------------------------------------------ */
  .hd-player-top-bar__name {
    flex-shrink: 1;
    min-width: 0;
    font-family: var(--hd-font-parchment);
    font-weight: var(--hd-weight-bold);
    font-size: var(--hd-text-ui-small);    /* 0.75rem = 12px — compact top-bar UI */
    color: var(--hd-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--hd-leading-tight);  /* 1.2 — tight heading leading */
  }

  .hd-player-top-bar__name-first,
  .hd-player-top-bar__name-last {
    display: inline;
  }

  /* ------------------------------------------------------------------ */
  /* HP-bar — 22px, dual clip-path §5.1                                   */
  /* ------------------------------------------------------------------ */
  .hd-player-top-bar__hp-bar {
    position: relative;
    flex: 1 1 80px;
    min-width: 60px;
    height: 22px;
    border-radius: 3px;
    background: var(--hd-hp-empty-bg);
    border: 1px solid var(--hd-border-subtle);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    /* button reset */
    appearance: none;
    -webkit-appearance: none;
    border-style: solid;
  }

  /* HP fill — positioned absolute, width driven by inline style */
  .hd-player-top-bar__hp-fill {
    position: absolute;
    inset: 0 auto 0 0;
    /* width set via inline style (data-driven, no token equivalent) */
    border-radius: 2px 0 0 2px;
    transition: width var(--hd-motion-base) var(--hd-ease-ui);
  }

  /* Temp HP fill — stacked on top of main fill */
  .hd-player-top-bar__hp-temp {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 2px 0 0 2px;
    opacity: 0.6;
    pointer-events: none;
  }

  /* Tier-specific gradient colours */
  .hd-player-top-bar__hp-bar[data-hp-tier="high"] .hd-player-top-bar__hp-fill {
    background: linear-gradient(90deg, var(--hd-hp-high-start), var(--hd-hp-high-end));
  }
  .hd-player-top-bar__hp-bar[data-hp-tier="mid"] .hd-player-top-bar__hp-fill {
    background: linear-gradient(90deg, var(--hd-hp-mid-start), var(--hd-hp-mid-end));
  }
  .hd-player-top-bar__hp-bar[data-hp-tier="low"] .hd-player-top-bar__hp-fill {
    background: linear-gradient(90deg, var(--hd-hp-low-start), var(--hd-hp-low-end));
  }

  /* HP-flash (magi §4.6) — skade: ryst + rødt blink; helbred: grønt blink (ingen ryst).
   * Delte keyframes (hd-magic-hp-shake/-flash-out) ligger i portal-magic.css. */
  .hd-player-top-bar__hp-flash {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
  }
  .hd-player-top-bar__hp-bar.is-dmg { animation: hd-magic-hp-shake .5s ease; }
  .hd-player-top-bar__hp-bar.is-dmg .hd-player-top-bar__hp-flash {
    background: rgba(255, 90, 90, 1); animation: hd-magic-flash-out .5s ease;
  }
  .hd-player-top-bar__hp-bar.is-heal .hd-player-top-bar__hp-flash {
    background: rgba(121, 224, 138, 1); animation: hd-magic-flash-out .5s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .hd-player-top-bar__hp-bar.is-dmg,
    .hd-player-top-bar__hp-bar.is-heal { animation: none; }
    .hd-player-top-bar__hp-flash { animation: none !important; opacity: 0 !important; }
  }

  /* Temp HP always blue */
  .hd-player-top-bar__hp-temp {
    background: linear-gradient(90deg, var(--hd-hp-btn-temp-start), var(--hd-hp-btn-temp-end));
  }

  /* HP value text spans the full bar so its clipped gradient aligns with
   * --hd-hp-fill and the underlying colour transition. */
  .hd-player-top-bar__hp-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    white-space: nowrap;
  }

  .hd-player-top-bar__hp-text-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: var(--hd-hp-text-dark);
    background-image: linear-gradient(
      90deg,
      var(--hd-hp-text-light) 0,
      var(--hd-hp-text-light) var(--hd-hp-fill, 0%),
      var(--hd-hp-text-dark) var(--hd-hp-fill, 0%),
      var(--hd-hp-text-dark) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);  /* 0.75rem = 12px — HP-bar digit height */
    line-height: var(--hd-leading-icon); /* 1 — tight inline centering */
    font-weight: var(--hd-weight-bold);                    /* fed — tydeligere cifre over den dynamiske HP-gradient */
    white-space: nowrap;
    letter-spacing: 0.02em;
  }

  .hd-player-top-bar__hp-text-value small {
    font-size: var(--hd-hp-text-sub-size);  /* 10px — max/temp suffix; smaller than 12px main digit */
    opacity: 0.8;
    font-weight: var(--hd-weight-regular);
  }

  /* ------------------------------------------------------------------ */
  /* AC-skjold — §5 "Læder-skjold SVG med AC-tallet centreret"           */
  /* ------------------------------------------------------------------ */
  .hd-player-top-bar__ac-shield {
    flex-shrink: 0;
    position: relative;
    width: 28px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hd-font-parchment);
    font-weight: var(--hd-weight-bold);
    font-size: var(--hd-text-ui-small);    /* 0.75rem = 12px — AC number in shield */
    color: var(--hd-text-primary);
    line-height: var(--hd-leading-icon);   /* 1 — icon centering */
  }

  /* Shield SVG background via clip-path shield shape */
  .hd-player-top-bar__ac-shield::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-medium);
    /* Shield shape via clip-path */
    clip-path: polygon(50% 100%, 0% 75%, 0% 0%, 100% 0%, 100% 75%);
    z-index: 0;
  }

  .hd-player-top-bar__ac-shield span {
    position: relative;
    z-index: 1;
    padding-bottom: 4px; /* nudge for visual center in shield */
  }

  /* ------------------------------------------------------------------ */
  /* Condition / tilstand (mask-icon + label)                             */
  /* ------------------------------------------------------------------ */
  .hd-player-top-bar__condition {
    flex-shrink: 1;
    display: flex;
    align-items: center;
    gap: var(--hd-space-1);
    min-width: 0;
    overflow: hidden;
  }

  /* Monochrome Foundry condition SVG applied as a CSS mask and tinted with
   * currentColor (mask-image URL set inline per-condition), so it inherits the
   * theme text colour with correct contrast in BOTH light and dark themes —
   * mirrors the karakterark .hd-active-effects__row-icon pattern. */
  .hd-player-top-bar__condition-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .hd-player-top-bar__condition-label {
    font-size: var(--hd-text-micro);
    font-family: var(--hd-font-ui);
    color: var(--hd-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hd-player-top-bar__condition-count {
    flex-shrink: 0;
    font-size: var(--hd-text-micro);
    font-family: var(--hd-font-ui);
    color: var(--hd-text-secondary);
    opacity: 0.85;
  }

  /* ------------------------------------------------------------------ */
  /* View-icon (right-aligned, full-height, NEVER abbreviated — §5)       */
  /* ------------------------------------------------------------------ */
  .hd-player-top-bar__view-name {
    margin-left: auto;
    flex-shrink: 0;
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 var(--hd-space-3);
    background: rgba(201, 169, 110, 0.22); /* same as active tab — matches tab-bar token */
    font-size: var(--hd-text-h2);
    line-height: var(--hd-leading-icon);
    white-space: nowrap;
    /* Parchment filter: desaturate + faint sepia warmth to match design language */
    filter: grayscale(1) sepia(0.2);
    opacity: 0.6;
  }

  body.hd-player-mode-player-portal.hd-pip-state-fullscreen .hd-player-top-bar__view-name {
    display: none;
  }

  .hd-player-top-bar__view-icon {
    --hd-player-icon-size: 1.35rem;
  }

  /* ------------------------------------------------------------------ */
  /* HP-drawer — §5.2: fold-down panel, 3 symbol-only buttons + input    */
  /* ------------------------------------------------------------------ */
  .hd-player-top-bar__hp-drawer {
    position: absolute;
    top: 48px;
    left: 0;
    right: 0;
    display: none;
    align-items: stretch;
    background: var(--hd-surface-2);
    border-bottom: 1px solid var(--hd-border-subtle);
    z-index: 99;
    animation: hd-top-bar-drawer-in var(--hd-motion-fast) var(--hd-ease-ui) both;
  }

  .hd-player-top-bar--drawer-open .hd-player-top-bar__hp-drawer {
    display: flex;
  }

  @keyframes hd-top-bar-drawer-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* §5.2: knapper kvadratiske ~44×44px (WCAG 2.5.5 touch-target) */
  .hd-player-top-bar__hp-btn {
    flex: 0 0 44px;
    height: 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-size: var(--hd-text-h4);         /* 1.125-1.375rem fluid — large symbol glyph (−/+) */
    font-weight: var(--hd-weight-bold);
    line-height: var(--hd-leading-icon);  /* 1 — icon centering */
    padding: 0;
    transition: filter var(--hd-motion-fast) var(--hd-ease-ui);
    appearance: none;
    -webkit-appearance: none;
    color: var(--hd-text-primary);
  }

  .hd-player-top-bar__hp-btn:hover {
    filter: brightness(1.15);
  }

  .hd-player-top-bar__hp-btn:active {
    filter: brightness(0.9);
  }

  .hd-player-top-bar__hp-btn:focus-visible {
    outline: 2px solid var(--hd-focus-ring);
    outline-offset: 2px;
  }

  .hd-player-top-bar__hp-btn--dmg {
    background: linear-gradient(180deg, var(--hd-hp-btn-dmg-start), var(--hd-hp-btn-dmg-end));
  }

  .hd-player-top-bar__hp-btn--heal {
    background: linear-gradient(180deg, var(--hd-hp-btn-heal-start), var(--hd-hp-btn-heal-end));
    margin-left: auto; /* push heal + temp to right; input in middle */
  }

  .hd-player-top-bar__hp-btn--temp {
    background: linear-gradient(180deg, var(--hd-hp-btn-temp-start), var(--hd-hp-btn-temp-end));
  }

  /* Amount input — centered, fills remaining space */
  .hd-player-top-bar__hp-amount {
    flex: 1 1 auto;
    min-width: 48px;
    height: 44px;
    text-align: center;
    font-family: var(--hd-font-parchment);
    font-size: var(--hd-text-body-large);  /* 1.0625rem — HP amount input, readable number */
    font-weight: var(--hd-weight-bold);
    color: var(--hd-text-primary);
    background: var(--hd-surface-1);
    border: none;
    border-left: 1px solid var(--hd-border-subtle);
    border-right: 1px solid var(--hd-border-subtle);
    padding: 0 var(--hd-space-2);
    appearance: textfield;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    outline: none;
  }

  .hd-player-top-bar__hp-amount:focus {
    background: var(--hd-surface-2);
    box-shadow: inset 0 0 0 1px var(--hd-border-accent);
  }

  /* Hide spinner arrows on number input */
  .hd-player-top-bar__hp-amount::-webkit-inner-spin-button,
  .hd-player-top-bar__hp-amount::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* ------------------------------------------------------------------ */
  /* Progressive disclosure — §5 container queries                        */
  /* ------------------------------------------------------------------ */

  /* Drop lastname at <420px */
  @container (max-width: 420px) {
    .hd-player-top-bar__name-last {
      display: none;
    }
  }

  /* Drop condition-label + "+N" at <340px (keep the mask-icon) */
  @container (max-width: 340px) {
    .hd-player-top-bar__condition-label,
    .hd-player-top-bar__condition-count {
      display: none;
    }
  }

  /* ------------------------------------------------------------------ */
  /* Reduced motion                                                       */
  /* ------------------------------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    .hd-player-top-bar__hp-fill {
      transition: none;
    }
    .hd-player-top-bar__hp-drawer {
      animation: none;
    }
    .hd-player-top-bar__login-cta {
      transition: none;
    }
  }

  /* ---- Anonymous (ulogget) mode -------------------------------------- */

  .hd-player-top-bar--anonymous {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    padding: 0 var(--hd-space-3);
  }

  .hd-player-top-bar__login-cta {
    background: transparent;
    border: 1px solid var(--hd-accent-primary);
    color: var(--hd-accent-primary);
    padding: var(--hd-space-1) var(--hd-space-3);
    border-radius: var(--hd-radius-sm);
    font-family: inherit;
    font-size: var(--hd-text-ui-small);  /* 0.75rem = 12px — login CTA label */
    cursor: pointer;
    min-height: 44px; /* WCAG 2.5.5 touch-target */
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    transition: background var(--hd-motion-fast) ease, color var(--hd-motion-fast) ease;
  }

  .hd-player-top-bar__login-cta--active {
    background: var(--hd-accent-primary);
    color: var(--hd-surface-base);
    font-weight: var(--hd-weight-bold);
  }

  .hd-player-top-bar__login-cta:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }

  .hd-player-top-bar__characterless-account {
    color: var(--hd-text-primary);
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold);
    min-height: 44px;
    max-width: min(52vw, 18rem);
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hd-player-top-bar__spacer {
    flex: 1;
  }

  .hd-player-top-bar__route-title {
    color: var(--hd-text-primary);
    font-size: var(--hd-text-ui-small);  /* 0.75rem = 12px — route title label */
    font-style: italic;
    letter-spacing: 0.05em;
  }

  /* ------------------------------------------------------------------ */
  /* Character switcher — name-button + sheet + options                  */
  /* ------------------------------------------------------------------ */

  /* Avatar circle as the character-switch trigger (>1 character). The visible
   * circle stays 32px; a transparent ::after expands the tap target to ≥44px
   * per WCAG 2.5.5 without enlarging the layout. */
  .hd-player-top-bar__avatar--switch {
    cursor: pointer;
    position: relative;
    overflow: visible;  /* allow the chevron badge + hit-area to extend past the circle */
  }
  .hd-player-top-bar__avatar--switch img {
    border-radius: 50%; /* re-clip the portrait now that overflow is visible */
  }
  .hd-player-top-bar__avatar--switch::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  .hd-player-top-bar__avatar--switch:focus-visible {
    outline: 2px solid var(--hd-focus-ring);
    outline-offset: 2px;
  }

  /* Level-up badge (⇧) anchored to the avatar's top-right corner. Shown while a
     questionnaire is pending; clicking it opens the wizard. Distinct corner from
     the bottom-right switch-chevron so both can coexist. */
  .hd-player-top-bar__avatar--has-levelup {
    position: relative;
    overflow: visible;   /* badge må stikke ud over den runde avatar-kant */
  }
  .hd-player-top-bar__avatar-levelup {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--hd-surface-base);
    border-radius: 50%;
    background: var(--hd-accent-primary);
    color: var(--hd-surface-base);
    font-size: var(--hd-text-micro);
    line-height: var(--hd-leading-icon);
    font-weight: var(--hd-weight-semibold);
    cursor: pointer;
    box-shadow: var(--hd-shadow-sm);
    z-index: 1;
  }
  .hd-player-top-bar__avatar-levelup:hover,
  .hd-player-top-bar__avatar-levelup:focus-visible {
    background: var(--hd-accent-warning);
    outline: none;
  }

  /* Chevron badge (▾) anchored to the avatar's bottom-right corner */
  .hd-player-top-bar__avatar-chev {
    position: absolute;
    right: -2px;
    bottom: -3px;
    font-size: var(--hd-player-top-bar-chev-size);  /* 0.7em — decorative, component-scoped */
    line-height: var(--hd-leading-icon);
    color: var(--hd-text-secondary);
    background: var(--hd-surface-1);
    border-radius: 50%;
    padding: 0 1px;
    pointer-events: none;
  }

  /* Drop-down sheet — anchored to the top-bar as a positioned parent. */
  .hd-player-top-bar__char-sheet {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    background: var(--hd-surface-1);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
    box-shadow: var(--hd-shadow-sm);
    min-width: var(--hd-player-top-bar-sheet-min-w);
  }

  /* Individual character option */
  .hd-player-top-bar__char-option {
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    min-height: 44px; /* WCAG 2.5.5 touch-target */
    padding: 0 var(--hd-space-3);
    font: inherit;
    color: inherit;
  }

  /* Active (current) character shown in bold */
  .hd-player-top-bar__char-option.is-active {
    font-weight: var(--hd-weight-bold);
  }

  /* "Opret ny karakter" option — separated by a top border */
  .hd-player-top-bar__char-option--new {
    border-top: 1px solid var(--hd-border-subtle);
  }
}