/* ====================================================================
 * saerpraeg-accordion.css — forenet, kategoriseret Særpræg-komponent
 * (public/js/saerpraeg-accordion.js) på spiller-portalens karakterark.
 *
 * Hybrid skrift-stemme (design-system.md): serif (pergament) på gruppe-hoved
 * + evne-navn; system-sans på resumé/chips/tal. Al font-size/family/line-height
 * går gennem tokens (typografi-gaten). Spacing via --hd-space-* og font via
 * --hd-text-* → skaleres af --hd-player-content-zoom. Dekorative px (poletter)
 * skaleres bevidst ikke (samme kontrakt som magi-slot-prikker).
 *
 * Safari 16.6 / iPadOS 16: ingen @starting-style / allow-discrete; fold via
 * [hidden] (base.css reset-layer). color-mix er understøttet (16.2+).
 *
 * @layer components — placeret efter base + tokens, før utilities + overrides
 * (samme kaskade-lag som øvrige komponent-CSS; ikke unlayered).
 * ==================================================================== */

@layer components {

.hd-saerpraeg {
  margin-top: var(--hd-space-4);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hd-saerpraeg--empty { display: none; }

/* ---- Særpræg extras: rest-knapperne bruger shared toolbar button-stil. */
.hd-saerpraeg__rest { display: inline-flex; gap: var(--hd-space-1); }

/* ---- Toolbar shell moved to .hd-richaccordion-toolbar; rows to player-rich-row.css */
/* (.hd-saerpraeg__row, __group, __chip, __pip, __pin, etc. were here;
 *  now live under .hd-richrow__* in player-rich-row.css.) */

/* ---- §8 Task 13 — Class watermark per Særpræg group -------------- */
/* A faint class-symbol ::after in the top-right corner of each class  */
/* group. Only active when --hd-group-class-icon is set (known class). */
.hd-karakterark .hd-richrow__group[style*="--hd-group-class-icon"] {
  position: relative;
}
.hd-karakterark .hd-richrow__group[style*="--hd-group-class-icon"]::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  width: 64px;
  height: 64px;
  background-image: var(--hd-group-class-icon, none);
  background-size: cover;
  border-radius: 50%;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
/* Ensure header and body content sit above the watermark pseudo-element. */
.hd-karakterark .hd-richrow__group[style*="--hd-group-class-icon"] > .hd-richrow__group-hdr,
.hd-karakterark .hd-richrow__group[style*="--hd-group-class-icon"] > .hd-richrow__body {
  position: relative;
  z-index: 1;
}

} /* end @layer components */