/**
 * karakterark-destination.css — Plan B C5.
 *
 * Fuldt interaktiv karakterark (Tab 1 i player-portal). §22 i spec-dokumentet
 * docs/plans/2026-05-21-player-portal-redesign-design.md er kanonisk.
 *
 * BEM: .hd-karakterark*
 * Layer: components
 *
 * §22.1  ID-strip (portrait + navn + klasse + race/niv/EP + træningsbonus-pill)
 * §22.2  4-kol klikbare kamp-stat-stones (Liv/RK/Init/Fart) + combat-meta-linje
 * §22.3  6-kol egenskabs-stones SPLASH-stil (STR/DEX/CON/INT/WIS/CHA)
 * §22.4  Færdigheds-grid (altid 2 kolonner med shrink/wrap-sikring)
 * §22.11 1-kol ↔ 2-kol responsive layout (container-query ≥720px)
 *
 * C6/C-fb2/C7 tilføjer §22.5-§22.10 (angreb, formularer, særpræg, træk,
 * ejendele, mine tilstande).
 */

/* ------------------------------------------------------------------ */
/* Component-scoped custom props (definitoriske spec-farver §22 +      */
/* komponent-specifikke typografi-tokens)                              */
/*                                                                     */
/* Note: :root er bevidst defineret outside @layer components —        */
/* CSS custom properties arver ikke via @layer-specificity, så de     */
/* skal stå i unlayered scope for at være tilgængelige overalt.        */
/* Samme konvention bruges i parchment.css + player-top-bar.css.       */
/* ------------------------------------------------------------------ */
:root {
  /* Stone surface — §22.2/§22.3 gradient fills */
  --hd-ka-stone-bg-start: #fff7e6;   /* lys parchment (spec §22.2) */
  --hd-ka-stone-bg-end:   #e8d8b8;   /* mørk parchment (spec §22.2) */

  /* Kamp-stat accent-farver — §22.2. Mørknet til AAA (≥7:1) på den tema-uafhængige
   * pergament-stone (bg-end #e8d8b8 = worst case). De gamle værdier (#b53d28 / #4a7ca8)
   * lå ~4–5:1 på pergament. Værdierne er bevidst tema-uafhængige fordi stone-baggrunden
   * også er det (gradienten flipper ikke pr. tema). */
  --hd-ka-hp-color:       #7a1a0c;   /* mørk blodrød — Liv (7.5:1 på #e8d8b8) */
  --hd-ka-ac-color:       #143a5a;   /* mørk navy — RK (8.4:1 på #e8d8b8) */

  /* Ability-mod accent (§22.3) — lilla på den LYSE pergament-stone (tema-uafhængig,
   * 7.4:1 på #e8d8b8). Skill-glyfferne bruger tema-BEVIDSTE farver i stedet (se
   * .hd-karakterark__skill-icon--* nedenfor), fordi de står på den tema-skiftende
   * portal-overflade — ikke på pergament. */
  --hd-ka-prof-expertise:  #4a2c8a;   /* lilla — ability-mod ◆ (parchment stone) */

  /* Pegede tidligere på en lokal IM-Fell-dublet; nu single-source via den delte token. */
  --hd-ka-font-display: var(--hd-font-display);

  /* Character-sheet-owned typography tokens. These are the actual one-column
   * player sheet values at zoom 1; multi-column layout must not override them. */
  --hd-ka-ability-label-size: calc(10px * var(--hd-player-content-zoom, 1));
  /* Stat-readout label size (LIV/RK/INIT/FART + STY/BEH). Kept separate from
   * card/action labels so primary combat/ability readouts can stay readable. */
  --hd-ka-stat-label-size:    calc(11px * var(--hd-player-content-zoom, 1));
  --hd-ka-ability-score-size: calc(19px * var(--hd-player-content-zoom, 1));
  --hd-ka-skill-size:         calc(10.5px * var(--hd-player-content-zoom, 1));  /* §22.4 rækker */
  --hd-ka-stone-value-sub:    0.7em;   /* §22.2 HP max-suffix relativ størrelse */
  /* Stone value: ~14px (læsbar combat-tal i lille stone-rum) */
  --hd-ka-stone-value-size:   calc(0.875rem * var(--hd-player-content-zoom, 1)); /* 14px = --hd-text-ui/body-small */

  /* line-height: 1 (tight — til stones med display-font i lille rum) */
  --hd-ka-lh-tight: 1;
  /* line-height: 1.2 (skill-name — tillader lille wrapping-buffer) */
  --hd-ka-lh-skill-name: 1.2;

  /* Layout */
  --hd-ka-gap:            8px;
  --hd-ka-stone-radius:   6px;
  --hd-ka-stone-border:   1.5px solid var(--hd-border-accent);
  --hd-ka-stone-shadow:   0 1px 3px rgba(0, 0, 0, 0.3);
  --hd-ka-hud-width:      299px; /* 260px legacy side-HUD × 1.15 */

  /* §22.5 Card-strip shared tokens (angreb + ejendele + formularer) */
  --hd-player-card-thumb-size: 90px;        /* shared 90×90 thumbnail — 150% of original 60px */
  --hd-player-card-width:     105px;        /* shared card width — 150% of original 70px */
  --hd-player-card-glyph-size: 32px;        /* shared emoji fallback glyph */
  --hd-ka-card-width:      var(--hd-player-card-width);
  --hd-ka-card-thumb-size: var(--hd-player-card-thumb-size);

  /* §22.5 Equipped-weapon gold border — spec §22.5: "gold border (#f0c570)" */
  --hd-ka-equipped-gold:    #f0c570;        /* spec-definitorisk farve */
  --hd-ka-scrollbar-gold:   #f0c570;        /* smal kolonne-scrollbar */
  --hd-ka-scrollbar-leather: #8a1f1f;       /* matcher Liv/level-up læder */

  /* §22.5 Magical-weapon lilla gradient — spec §22.5: "lilla-gradient baggrund" */
  /* Baseret på --hd-activity-cast (#4a1a8c dark); justeret for thumbnail-bg */
  --hd-ka-magical-start:    #6b3d9e;        /* lys lilla gradient-start */
  --hd-ka-magical-end:      #3d1a6e;        /* mørk lilla gradient-slut */

  /* §22.5 Card-strip glyph-størrelse */
  --hd-ka-card-glyph-size:  calc(32px * var(--hd-player-content-zoom, 1));
}

@layer components {

  /* ================================================================ */
  /* Root container + §22.11 responsive layout                        */
  /* ================================================================ */

  .hd-karakterark {
    container-type: inline-size;
    container-name: karakterark;
    display: flex;
    flex-direction: column;
    gap: var(--hd-ka-gap);
    padding: 8px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    color: var(--hd-text-primary);
    font-family: var(--hd-font-ui);
  }

  /* §22.11 v2 — Identitets-HUD + hovedkolonne (redesign "Din levende helt").
   * <720px container: alt stablet i 1 kolonne.
   * ≥720px: fast HUD (venstre, sticky) + scrollende hovedkolonne (højre).
   * Row-switchet sker på .hd-karakterark__body (en DESCENDANT af container-
   * elementet) — IKKE på .hd-karakterark selv, som er query-containeren og derfor
   * ikke kan reagere på sin egen bredde (self-reference ville være inert → stak).
   * Container-query-drevet → overlever PiP dual-plane (50vw/50vh) automatisk. */
  .hd-karakterark__body,
  .hd-karakterark__hud,
  .hd-karakterark__main-scroll,
  .hd-karakterark__main,
  .hd-karakterark__right,
  .hd-karakterark__cols {
    display: flex;
    flex-direction: column;
    gap: var(--hd-ka-gap);
    width: 100%;
    min-width: 0;
  }

  .hd-karakterark__right {
    gap: var(--hd-space-1);
  }

  .hd-karakterark .hd-sheet-filter {
    position: static;
    top: auto;
    z-index: auto;
  }

  .hd-karakterark__filter--compact-collapsed {
    display: none;
  }

  .hd-karakterark__formularer-pact-slots {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hd-space-2);
    min-width: 0;
    padding: var(--hd-space-1) 0;
  }

  .hd-karakterark__formularer-pact-label {
    min-width: 0;
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold);
    line-height: var(--hd-leading-tight);
  }

  .hd-player-surface-slot.hd-karakterark {
    padding-inline-end: calc(var(--hd-space-2, 8px) + var(--hd-player-surface-pad-right, 0px));
  }

  .hd-karakterark--stack.hd-player-scroll-rail-owner--scrollable {
    padding-inline-end: calc(var(--hd-ka-gap) + var(--hd-player-scroll-rail-width, 8px));
  }

  .hd-karakterark__hud.hd-player-scroll-rail-owner--track-visible,
  .hd-karakterark__main-scroll.hd-player-scroll-rail-owner--scrollable {
    padding-inline-end: var(--hd-player-scroll-rail-air, var(--hd-space-2, 8px));
  }

  .hd-karakterark__hud.hd-player-scroll-rail-owner--track-visible {
    margin-inline-end: var(--hd-player-scroll-rail-air, var(--hd-space-2, 8px));
  }

  .hd-karakterark__main-scroll.hd-player-scroll-rail-owner--scrollable {
    margin-inline-end: calc(
      var(--hd-player-scroll-rail-width, 8px)
      + var(--hd-player-scroll-rail-air, var(--hd-space-2, 8px))
    );
  }

  .hd-karakterark--dock .hd-karakterark__main-scroll.hd-player-scroll-rail-owner--scrollable {
    margin-inline-end: var(--hd-player-scroll-rail-air, var(--hd-space-2, 8px));
  }

  .hd-karakterark__dock {
    padding-inline-end: 0;
  }

  .hd-karakterark__hud:not(.hd-player-scroll-rail-owner),
  .hd-karakterark__main-scroll:not(.hd-player-scroll-rail-owner),
  .hd-karakterark__dock {
    scrollbar-width: thin;
    scrollbar-color: var(--hd-ka-scrollbar-leather) transparent;
  }

  .hd-karakterark__hud:not(.hd-player-scroll-rail-owner)::-webkit-scrollbar,
  .hd-karakterark__main-scroll:not(.hd-player-scroll-rail-owner)::-webkit-scrollbar,
  .hd-karakterark__dock::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .hd-karakterark__hud:not(.hd-player-scroll-rail-owner)::-webkit-scrollbar-track,
  .hd-karakterark__main-scroll:not(.hd-player-scroll-rail-owner)::-webkit-scrollbar-track,
  .hd-karakterark__dock::-webkit-scrollbar-track {
    background: transparent;
  }

  .hd-karakterark__hud:not(.hd-player-scroll-rail-owner)::-webkit-scrollbar-thumb,
  .hd-karakterark__main-scroll:not(.hd-player-scroll-rail-owner)::-webkit-scrollbar-thumb,
  .hd-karakterark__dock::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--hd-ka-scrollbar-gold), var(--hd-ka-scrollbar-leather));
    border-radius: 999px;
  }

  @container karakterark (min-width: 720px) {
    /* Body bliver en række: venstre identitets-HUD + højre-wrapper. */
    .hd-karakterark__body {
      flex-direction: row;
      align-items: flex-start;
      height: calc(100vh - var(--player-top-bar-height, 48px));
      max-height: calc(100vh - var(--player-top-bar-height, 48px));
      overflow: hidden;
    }
    .hd-karakterark__hud {
      flex: 0 0 var(--hd-ka-hud-width);
      position: sticky;
      top: 0;
      align-self: flex-start;
      max-height: calc(100vh - var(--player-top-bar-height, 48px));
      overflow-x: hidden;
      overflow-y: auto;
    }
    /* B — højre-wrapper fylder pladsen ved siden af HUD'en; søgefeltet ligger
     * øverst (column), og __cols holder hovedkolonne + evt. dok i en række. */
    .hd-karakterark__right {
      flex: 1 1 0;
      min-width: 0;
      min-height: 0;
      height: 100%;
      max-height: calc(100vh - var(--player-top-bar-height, 48px));
      overflow: hidden;
    }
    .hd-karakterark__cols {
      flex-direction: row;
      align-items: flex-start;
      flex: 1 1 0;
      min-height: 0;
      height: 100%;
      overflow: hidden;
    }
    .hd-karakterark__main-scroll {
      flex: 1 1 0;
      min-height: 0;
      height: 100%;
      max-height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      box-sizing: border-box;
    }
    .hd-karakterark__main {
      flex: 0 0 auto;
      min-height: 0;
      height: auto;
      max-height: none;
      overflow: visible;
    }
    /* Corner-PiP clearance must live on the internal scrollports in the wide
     * sheet. The generic player shell pads the mount's last child; here that
     * child is an overflow-hidden flex wrapper, so the accordion/HUD/dock
     * scroll columns need the clearance themselves. */
    body.hd-player-mode-player-portal.hd-pip-state-pip .hd-player-surface-slot.hd-karakterark > .hd-karakterark__body,
    body.hd-player-mode-player-portal.hd-pip-state-pip :is(.hd-player-content-mount).hd-karakterark > .hd-karakterark__body {
      padding-bottom: 0;
    }
    body.hd-player-mode-player-portal.hd-pip-state-pip .hd-player-surface-slot.hd-karakterark .hd-karakterark__hud,
    body.hd-player-mode-player-portal.hd-pip-state-pip .hd-player-surface-slot.hd-karakterark .hd-karakterark__main-scroll,
    body.hd-player-mode-player-portal.hd-pip-state-pip .hd-player-surface-slot.hd-karakterark .hd-karakterark__dock,
    body.hd-player-mode-player-portal.hd-pip-state-pip :is(.hd-player-content-mount).hd-karakterark .hd-karakterark__hud,
    body.hd-player-mode-player-portal.hd-pip-state-pip :is(.hd-player-content-mount).hd-karakterark .hd-karakterark__main-scroll,
    body.hd-player-mode-player-portal.hd-pip-state-pip :is(.hd-player-content-mount).hd-karakterark .hd-karakterark__dock {
      padding-bottom: var(--hd-player-pip-clearance-bottom);
      scroll-padding-bottom: var(--hd-player-pip-clearance-bottom);
      box-sizing: border-box;
    }
    .hd-karakterark .hd-karakterark__card-strip {
      flex-wrap: wrap;
      overflow-x: hidden;
    }
    .hd-karakterark .hd-formbox__tabs {
      flex-wrap: wrap;
      overflow-x: hidden;
    }
    .hd-karakterark .hd-formbox__card-strip {
      flex-wrap: wrap;
      overflow-x: hidden;
    }
  }

  /* Hovedkolonnens rich-row-sektioner: én fælles kolonnemodel for alle faner. */
  .hd-karakterark__main .hd-richrow__body {
    --hd-ka-richrow-cols: 1;
    gap: 0;
  }
  @container karakterark (min-width: 1040px) {
    .hd-karakterark__main .hd-richrow__body {
      --hd-ka-richrow-cols: 2;
      display: grid;
      grid-template-columns: repeat(var(--hd-ka-richrow-cols), minmax(0, 1fr));
      gap: 0;
    }
  }
  @container karakterark (min-width: 1320px) {
    .hd-karakterark__main .hd-richrow__body {
      --hd-ka-richrow-cols: 3;
    }
  }
  @container karakterark (min-width: 1600px) {
    .hd-karakterark__main .hd-richrow__body {
      --hd-ka-richrow-cols: 4;
    }
  }
  @container karakterark (min-width: 1880px) {
    .hd-karakterark__main .hd-richrow__body {
      --hd-ka-richrow-cols: 5;
    }
  }

  /* F4 — når Click-To-Know-dokken er til stede (~360px) holdes hovedkolonnen ÉN
   * accordion-kolonne, indtil der er plads til næste kolonne VED SIDEN AF dokken
   * (≈ basis-breakpoint + dok-bredde). Samme 1→5 model som uden dok, blot skubbet
   * én dok-bredde, så alle faner skifter kolonner samtidigt. */
  @container karakterark (min-width: 1040px) {
    .hd-karakterark--dock .hd-karakterark__main .hd-richrow__body {
      --hd-ka-richrow-cols: 1;
    }
  }
  @container karakterark (min-width: 1400px) {
    .hd-karakterark--dock .hd-karakterark__main .hd-richrow__body {
      --hd-ka-richrow-cols: 2;
    }
  }
  @container karakterark (min-width: 1680px) {
    .hd-karakterark--dock .hd-karakterark__main .hd-richrow__body {
      --hd-ka-richrow-cols: 3;
    }
  }
  @container karakterark (min-width: 1960px) {
    .hd-karakterark--dock .hd-karakterark__main .hd-richrow__body {
      --hd-ka-richrow-cols: 4;
    }
  }
  @container karakterark (min-width: 2240px) {
    .hd-karakterark--dock .hd-karakterark__main .hd-richrow__body {
      --hd-ka-richrow-cols: 5;
    }
  }

  /* ================================================================ */
  /* Skive 3 — Click-To-Know dok (3. kolonne ved ≥1040px container, F4).*/
  /* Sticky højre-kolonne (som side-HUD'en); hovedkolonnen reflows      */
  /* smallere når dokken er til stede. Token-baseret (hex-zero). Ingen  */
  /* entrance-animation → motion-parity-gaten trivielt grøn.           */
  /* ================================================================ */
  @container karakterark (min-width: 1040px) {
    .hd-karakterark__dock {
      flex: 0 0 360px;
      min-width: 0;
      position: sticky;
      top: 0;
      align-self: flex-start;
      height: 100%;
      max-height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }

  .hd-ruler-dock {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2, 0.5rem);
    padding: var(--hd-space-3, 0.75rem);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-subtle, var(--hd-border-medium));
    border-radius: var(--hd-radius-lg);
    box-shadow: var(--hd-shadow-modal);
    color: var(--hd-text-primary);
  }
  .hd-ruler-dock__header {
    display: flex;
    align-items: baseline;
    gap: var(--hd-space-2, 0.5rem);
    flex-wrap: wrap;
  }
  .hd-ruler-dock__close {
    order: 99;
    margin-inline-start: auto;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: 0;
    color: var(--hd-text-secondary, var(--hd-text-primary));
    cursor: pointer;
    font-size: var(--hd-text-md, 1rem);
  }
  /* F3 — back-button: navigér tilbage gennem regel-opslag i dokken (venstre for
   * titlen via order:-1). Skjules ved stack-dybde 0 (style.display sættes i JS). */
  .hd-ruler-dock__back {
    order: -1;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: 0;
    color: var(--hd-text-secondary, var(--hd-text-primary));
    cursor: pointer;
    font-size: var(--hd-text-h4, 1.25rem);
    line-height: var(--hd-leading-icon);
  }
  .hd-ruler-dock__title { margin: 0; color: var(--hd-text-primary); }
  .hd-ruler-dock__subtitle { color: var(--hd-text-secondary, var(--hd-text-primary)); }
  .hd-ruler-dock__body { overflow-wrap: anywhere; }

  /* ================================================================ */
  /* §22.1 Identifikations-strimmel                                   */
  /* ================================================================ */

  .hd-karakterark__id-strip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Reserve a right gutter for the two stacked right-edge controls
     * (færdighedsmærkat top, level-up bottom) so the name/class text never runs
     * under them. */
    padding-right: 124px;
    padding-bottom: 8px;
    /* Tall enough to fit the top færdighedsmærkat AND the 44px level-up touch-
     * target at the bottom without them overlapping (§22.1 C7). */
    min-height: 68px;
    border-bottom: 1px solid var(--hd-border-medium);
  }

  .hd-karakterark__portrait {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--hd-surface-1);
    border: 1.5px solid var(--hd-border-accent);
  }

  .hd-karakterark__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .hd-karakterark__id-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  /* Navn: IM Fell English 16px (spec §22.1) */
  .hd-karakterark__id-name {
    font-family: var(--hd-ka-font-display);
    font-size: var(--hd-text-body-large);   /* 1.0625rem ≈ 17px — closest to spec §22.1 16px */
    font-weight: var(--hd-weight-bold);
    color: var(--hd-text-primary);
    /* zoom-grow (§Karakterark, user-decision): wrap to multiple lines when the
     * font scales past the row width instead of truncating to "…". Natural
     * wrapping only triggers when the text no longer fits, so normal-length
     * names stay single-line at zoom 1 — the dense layout is unchanged there. */
    overflow-wrap: break-word;
  }

  /* §8 Task 13 — small class symbol preceding the character name */
  .hd-karakterark__class-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: -3px;
    margin-right: 5px;
  }

  /* Klasse/underklasse: IM Fell English italic 11px (spec §22.1) */
  .hd-karakterark__id-class {
    font-family: var(--hd-ka-font-display);
    font-size: var(--hd-text-ui-small);   /* 0.75rem = 12px — spec §22.1 siger 11px; ui-small er nærmeste token */
    font-style: italic;
    color: var(--hd-text-secondary, var(--hd-text-primary));
    /* zoom-grow (§Karakterark, user-decision): wrap to multiple lines when the
     * font scales past the row width instead of truncating to "…". Natural
     * wrapping only triggers when the text no longer fits, so normal-length
     * names stay single-line at zoom 1 — the dense layout is unchanged there. */
    overflow-wrap: break-word;
  }

  /* Race/niveau/EP: 10px tertiary (spec §22.1) */
  .hd-karakterark__id-race {
    font-size: var(--hd-text-micro); /* 9px — nærmeste token til spec-10px */
    color: var(--hd-text-tertiary);
    /* zoom-grow (§Karakterark, user-decision): wrap to multiple lines when the
     * font scales past the row width instead of truncating to "…". Natural
     * wrapping only triggers when the text no longer fits, so normal-length
     * names stay single-line at zoom 1 — the dense layout is unchanged there. */
    overflow-wrap: break-word;
  }

  /* Træningsbonus-pill: gold gradient, IM Fell English, micro (spec §22.1) */
  .hd-karakterark__bonus-pill {
    /* Færdighedsmærkat — anchored to the TOP-right of the id-strip box; the
     * level-up button anchors to the BOTTOM-right (§22.1 C7) so the two never
     * overlap. Absolute removes it from the flex row; the strip reserves the
     * right gutter + min-height for both. */
    position: absolute;
    top: 0;
    right: 0;
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Solid bg-color UNDER guld-gradienten (samme grund som stones): auditten dropper
     * gradient-laget og målte ellers text-on-accent mod side-surface → 1:1-fail. Resolver
     * nu til den kanoniske text-on-accent / accent-primary-parring (AAA i begge temaer). */
    background-color: var(--hd-accent-primary);
    background-image: linear-gradient(135deg, var(--hd-accent-primary), var(--hd-accent-info, var(--hd-accent-primary)));
    color: var(--hd-text-on-accent);
    font-family: var(--hd-ka-font-display);
    font-size: var(--hd-text-micro); /* 9px */
    font-weight: var(--hd-weight-bold);
    white-space: nowrap;
  }

  .hd-karakterark__bonus-pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    color: currentColor;
  }

  .hd-karakterark__bonus-pill-icon-glyph {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* ================================================================ */
  /* §22.2 Kamp-stats · 4-kolonne klikbare stones                    */
  /* ================================================================ */

  .hd-karakterark__combat-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .hd-karakterark__combat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }

  .hd-karakterark--stack .hd-karakterark__combat-grid,
  .hd-karakterark--stack .hd-karakterark__abilities {
    gap: var(--hd-ka-gap);
  }

  /* Delt stone-grundklasse (bruges af §22.2 og §22.3) */
  .hd-karakterark__stone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 6px 4px;
    border-radius: var(--hd-ka-stone-radius);
    border: var(--hd-ka-stone-border);
    box-shadow: var(--hd-ka-stone-shadow);
    /* Solid bg-color UNDER gradienten: kontrast-auditten dropper gradient/image-lag
     * fra bg-stakken (analysis.js) og falder ellers tilbage til den mørke side-surface
     * → falske 1:1-fails i dark-tema selvom teksten visuelt står på lys pergament.
     * bg-end (#e8d8b8) = den mørkeste, worst-case pergament-tone. */
    background-color: var(--hd-ka-stone-bg-end);
    background-image: linear-gradient(180deg, var(--hd-ka-stone-bg-start), var(--hd-ka-stone-bg-end));
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition: transform var(--hd-motion-quick, 0.1s) ease,
                box-shadow var(--hd-motion-quick, 0.1s) ease;
  }

  .hd-karakterark__stone:active {
    transform: translateY(1px);
    box-shadow: none;
  }

  .hd-karakterark__stone-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    font-size: var(--hd-ka-stat-label-size);
    /* parchment-meta (mørk brun, 7.3:1 på pergament-stonen) — tertiary er guld og
     * blev ulæseligt på den lyse stone (gradient-artefakten skjulte det før). */
    color: var(--hd-parchment-meta);
    text-transform: uppercase;
    letter-spacing: var(--hd-tracking-normal);
  }

  .hd-karakterark__stone-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    color: currentColor;
  }

  .hd-karakterark__stone-kind-glyph {
    display: block;
    width: 100%;
    height: 100%;
  }

  .hd-karakterark__stone-value {
    font-family: var(--hd-ka-font-display);
    font-size: var(--hd-ka-ability-score-size);   /* match STY/BEH (§3) */
    font-weight: var(--hd-weight-bold);
    color: var(--hd-parchment-text, var(--hd-text-primary));
    line-height: var(--hd-ka-lh-tight);
  }

  /* Liv & RK — neutral pergament-tekst (§3): ingen rød/blå accent. */
  .hd-karakterark__stone--hp .hd-karakterark__stone-value,
  .hd-karakterark__stone--ac .hd-karakterark__stone-value {
    color: var(--hd-parchment-text, var(--hd-text-primary));
  }

  .hd-karakterark__stone--hp .hd-karakterark__stone-value small {
    font-size: var(--hd-ka-stone-value-sub);
    opacity: 1;
    color: #fff5e0;
    font-weight: var(--hd-weight-semibold);
  }

  /* HP-flash (magi §4.6) — Liv-stenen ryster + tal-glød ved HP-ændring.
   * Delte keyframes (hd-magic-hp-shake/-val-dmg/-val-heal) i portal-magic.css. */
  .hd-karakterark__stone--hp.is-dmg { animation: hd-magic-hp-shake .5s ease; }
  .hd-karakterark__stone--hp.is-dmg .hd-karakterark__stone-value { animation: hd-magic-val-dmg .5s ease; }
  .hd-karakterark__stone--hp.is-heal .hd-karakterark__stone-value { animation: hd-magic-val-heal .5s ease; }
  @media (prefers-reduced-motion: reduce) {
    .hd-karakterark__stone--hp.is-dmg,
    .hd-karakterark__stone--hp.is-heal,
    .hd-karakterark__stone--hp .hd-karakterark__stone-value { animation: none !important; }
  }

  /* Combat-meta-linje under griddet (spec §22.2) */
  .hd-karakterark__combat-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
    padding: 2px 2px 0;
  }

  .hd-karakterark__combat-meta span {
    white-space: nowrap;
  }

  .hd-karakterark__combat-meta strong {
    color: var(--hd-text-primary);
    font-weight: var(--hd-weight-semibold);
  }

  /* ================================================================ */
  /* §22.3 Egenskaber · 6-kolonne SPLASH-stil                        */
  /* ================================================================ */

  .hd-karakterark__abilities {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
  }

  /* Keep the one-column sheet's single ability row by default. Only containers
   * narrower than the six 44px touch targets plus gaps fall back to 3+3. */
  @container karakterark (max-width: 320px) {
    .hd-karakterark__abilities {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Egenskabs-stone — udvider stone-mønstret */
  .hd-karakterark__ability {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 5px 2px;
    border-radius: var(--hd-ka-stone-radius);
    border: var(--hd-ka-stone-border);
    box-shadow: var(--hd-ka-stone-shadow);
    /* Solid bg-color UNDER gradienten: kontrast-auditten dropper gradient/image-lag
     * fra bg-stakken (analysis.js) og falder ellers tilbage til den mørke side-surface
     * → falske 1:1-fails i dark-tema selvom teksten visuelt står på lys pergament.
     * bg-end (#e8d8b8) = den mørkeste, worst-case pergament-tone. */
    background-color: var(--hd-ka-stone-bg-end);
    background-image: linear-gradient(180deg, var(--hd-ka-stone-bg-start), var(--hd-ka-stone-bg-end));
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition: transform var(--hd-motion-quick, 0.1s) ease,
                box-shadow var(--hd-motion-quick, 0.1s) ease;
  }

  /* Bonus-afværgeslag — the (typically two) abilities the character is save-
   * proficient in get a thicker accent border so they stand out among the six. */
  .hd-karakterark__ability--save-prof {
    border-width: 3px;
    border-color: var(--hd-accent-primary);
  }

  .hd-karakterark__ability:active {
    transform: translateY(1px);
    box-shadow: none;
  }

  .hd-karakterark__ability-kind {
    display: grid;
    place-items: center;
    width: calc(14px * var(--hd-player-content-zoom, 1));
    height: calc(14px * var(--hd-player-content-zoom, 1));
    color: var(--hd-parchment-meta);
    line-height: var(--hd-leading-icon);
  }

  .hd-karakterark__ability-kind-glyph {
    --hd-player-icon-size: 100%;
  }

  /* Label: character-sheet-owned micro label token. */
  .hd-karakterark__ability-label {
    font-size: var(--hd-ka-stat-label-size);
    /* parchment-meta (mørk brun, 7.3:1 på pergament-stonen) — se stone-label. */
    color: var(--hd-parchment-meta);
    text-transform: uppercase;
    letter-spacing: var(--hd-tracking-normal);
    line-height: var(--hd-ka-lh-tight);
  }

  /* Score: secondary raw value under the dominant modifier. */
  .hd-karakterark__ability-score {
    order: 3;
    font-family: var(--hd-ka-font-display);
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-parchment-meta);
    line-height: var(--hd-ka-lh-tight);
  }

  /* Mod: dominant display-font value (Plan 5 modifier-first hierarchy). */
  .hd-karakterark__ability-mod {
    order: 2;
    font-family: var(--hd-ka-font-display);
    font-size: var(--hd-ka-ability-score-size);
    color: var(--hd-ka-prof-expertise);
    font-weight: var(--hd-weight-bold);
    line-height: var(--hd-ka-lh-tight);
  }

  /* ================================================================ */
  /* §22.4 Færdigheder · kompakt grid                                 */
  /* ================================================================ */

  .hd-karakterark__skills {
    display: block;
  }

  /* Flat grid only remains as the private no-PlayerRichRow fallback. */
  .hd-karakterark__skills--legacy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 8px;
  }

  /* §22.4 follow-up #8 — full-width "alle evner: ulempe" flag row above the grid
     cells (spans every column so it reads as a section header, not a skill cell). */
  .hd-karakterark__skills-flag {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
    font-size: var(--hd-ka-skill-size);
    color: var(--hd-text-tertiary);
  }

  .hd-karakterark__skills--legacy .hd-karakterark__skills-flag {
    grid-column: 1 / -1;
  }

  /* Rækker: 10.5px (spec §22.4 eksakt) */
  .hd-karakterark__skills--legacy .hd-karakterark__skill-row {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 1px 0;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: var(--hd-ka-skill-size);
    font: inherit;
    text-align: left;
    cursor: pointer;
    /* zoom-grow: drop nowrap + overflow-clip so a skill name wraps to a
     * second line when the font outgrows its grid column at high zoom,
     * instead of being clipped. Single-line at zoom 1 for normal names. */
    color: var(--hd-text-tertiary);
  }

  .hd-karakterark__skills--legacy .hd-karakterark__skill-row:hover,
  .hd-karakterark__skills--legacy .hd-karakterark__skill-row:focus-visible {
    color: var(--hd-text-primary);
  }

  .hd-karakterark__skills--legacy .hd-karakterark__skill-row:focus-visible {
    outline: 2px solid var(--hd-focus-ring, var(--hd-accent-primary));
    outline-offset: 2px;
  }

  .hd-karakterark__skills--legacy .hd-karakterark__skill-row--proficient {
    /* Tema-bevidst: trænede rækker står på den mørke portal-overflade, ikke på
     * pergament. --hd-parchment-text (#1a1a1a) gav ~1.08:1 i mørkt tema (usynligt
     * navn+mod). --hd-text-primary er 13.2:1 dark / 15.6:1 light. */
    color: var(--hd-text-primary);
    font-weight: var(--hd-weight-semibold);
  }

  .hd-karakterark__skills--legacy .hd-karakterark__skill-kind {
    flex: 0 0 calc(13px * var(--hd-player-content-zoom, 1));
    width: calc(13px * var(--hd-player-content-zoom, 1));
    height: calc(13px * var(--hd-player-content-zoom, 1));
    color: var(--hd-text-tertiary);
  }

  .hd-karakterark__skills--legacy .hd-karakterark__skill-kind-glyph {
    --hd-player-icon-size: 100%;
  }

  .hd-karakterark__skills--legacy .hd-karakterark__skill-icon {
    flex-shrink: 0;
    font-size: var(--hd-text-micro);
    line-height: var(--hd-ka-lh-tight);
    /* Glyph box scales with content-zoom so the proficiency glyph (◆●◐○)
     * stays inside its reservation at 2× instead of overflowing onto the
     * skill name. Resolves to 10px at zoom 1 (byte-identical). */
    width: calc(10px * var(--hd-player-content-zoom, 1));
    text-align: center;
  }

  /* Profikon-glyf-farver — tema-BEVIDSTE, fordi glyfferne står på den tema-skiftende
   * portal-overflade (--hd-surface-base + pergament-tekstur), ikke på pergament-stenen.
   * En fast palet kan ikke være AAA på både næsten-sort (dark) og cremet (light).
   * Alle ≥8.4:1 på begge temaers surface-base — se wcag-contrast-gate.js. */
  .hd-karakterark__skills--legacy .hd-karakterark__skill-icon--expertise {
    color: var(--hd-ka-skill-expertise);   /* lavendel ◆ (dark) / dyb lilla (light) */
  }

  .hd-karakterark__skills--legacy .hd-karakterark__skill-icon--proficient {
    color: var(--hd-accent-success);       /* grøn ● */
  }

  .hd-karakterark__skills--legacy .hd-karakterark__skill-icon--half {
    color: var(--hd-accent-warning);       /* gul/amber ◐ */
  }

  .hd-karakterark__skills--legacy .hd-karakterark__skill-icon--none {
    color: var(--hd-text-tertiary);        /* dæmpet ○ */
  }

  .hd-karakterark__skills--legacy .hd-karakterark__skill-name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: var(--hd-ka-lh-skill-name);
  }

  .hd-karakterark__skills--legacy .hd-karakterark__skill-mod {
    flex-shrink: 0;
    font-family: var(--hd-ka-font-display);
    font-weight: var(--hd-weight-bold);
    font-size: var(--hd-ka-skill-size);
    min-width: 24px;
    text-align: right;
  }

  /* §10 Passive afledninger — egen lille blok under Færdigheder */
  .hd-karakterark__skills--legacy .hd-karakterark__passives {
    grid-column: 1 / -1;   /* span all columns in the skills grid */
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--hd-border-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: var(--hd-ka-stat-label-size);
    color: var(--hd-text-tertiary);
  }
  .hd-karakterark__skills--legacy .hd-karakterark__passive-row {
    display: flex;
    flex: 1 1 calc(50% - 6px);
    align-items: baseline;
    min-width: 0;
    max-width: 100%;
    gap: 4px;
    white-space: normal;
    line-height: var(--hd-ka-lh-skill-name);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0;
    cursor: pointer;
  }
  .hd-karakterark__skills--legacy .hd-karakterark__passive-row:hover,
  .hd-karakterark__skills--legacy .hd-karakterark__passive-row:focus-visible { color: var(--hd-text-primary); }
  .hd-karakterark__skills--legacy .hd-karakterark__passive-row:focus-visible {
    outline: 2px solid var(--hd-focus-ring, var(--hd-accent-primary));
    outline-offset: 2px;
  }
  .hd-karakterark__passive-kind {
    flex: 0 0 calc(12px * var(--hd-player-content-zoom, 1));
    width: calc(12px * var(--hd-player-content-zoom, 1));
    height: calc(12px * var(--hd-player-content-zoom, 1));
    color: var(--hd-text-tertiary);
    align-self: center;
  }
  .hd-karakterark__passive-kind-glyph {
    --hd-player-icon-size: 100%;
  }
  .hd-karakterark__skills--legacy .hd-karakterark__passive-label {
    min-width: 0;
    overflow-wrap: normal;
    white-space: normal;
    line-height: var(--hd-ka-lh-skill-name);
  }
  .hd-karakterark__skills--legacy .hd-karakterark__passive-val { flex-shrink: 0; color: var(--hd-text-primary); font-weight: var(--hd-weight-semibold); }

  /* Rich-row owns skill/passive layout; these hooks only style its metadata chips. */
  .hd-richrow__group--skills .hd-richrow__chip--skill-ability {
    background: var(--hd-surface-3);
    border: 1px solid var(--hd-border-medium);
    color: var(--hd-text-secondary);
  }

  .hd-richrow__group--skills .hd-richrow__chip--skill-prof {
    flex-shrink: 0;
    min-width: calc(10px * var(--hd-player-content-zoom, 1));
    border: 1px solid var(--hd-border-medium);
    font-size: var(--hd-text-micro);
    line-height: var(--hd-ka-lh-tight);
    text-align: center;
  }

  .hd-richrow__group--skills .hd-richrow__chip--skill-prof--expertise {
    background: color-mix(in srgb, var(--hd-ka-skill-expertise) 24%, var(--hd-surface-2));
    border-color: var(--hd-ka-skill-expertise);
    color: var(--hd-ka-skill-expertise);   /* lavendel ◆ (dark) / dyb lilla (light) */
  }

  .hd-richrow__group--skills .hd-richrow__chip--skill-prof--proficient {
    background: color-mix(in srgb, var(--hd-accent-success) 22%, var(--hd-surface-2));
    border-color: var(--hd-accent-success);
    color: var(--hd-accent-success);       /* grøn ● */
  }

  .hd-richrow__group--skills .hd-richrow__chip--skill-prof--half {
    color: var(--hd-accent-warning);       /* gul/amber ◐ */
  }

  .hd-richrow__group--skills .hd-richrow__chip--skill-prof--none {
    color: var(--hd-text-tertiary);        /* dæmpet ○ */
  }

  .hd-richrow__group--skills .hd-richrow__chip--skill-mod {
    font-family: var(--hd-ka-font-display);
    font-weight: var(--hd-weight-bold);
    font-variant-numeric: tabular-nums;
  }

  .hd-karakterark__skills + .hd-karakterark__section--activeEffects {
    margin-top: var(--hd-ka-gap);
  }

  /* ================================================================ */
  /* §22.6 Formularer · sektion-wrapper (C-fb2)                       */
  /* ================================================================ */

  .hd-karakterark__section {
    margin-top: var(--hd-spacing-4, 16px);
  }

  /* Sørger for at harmonika-grupper inden for samme sektion ikke sidder
   * klistret sammen; mellemrummet matcher karakterarkets side-padding. */
  .hd-karakterark__section .hd-richrow__group + .hd-richrow__group {
    margin-top: var(--hd-ka-gap);
  }

  /* Delt portal-sektions-overskrift (A5) — kanonisk recipe.
   * IM Fell English display-stemme + bundkant + ensartet vægt/farve.
   * Erstatter de tidligere 4 divergerende h3-stilarter (den citerede
   * "v5 .companion h3" findes ikke længere). */
  .hd-portal-section-title {
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h4);
    border-bottom: 2px solid var(--hd-border-subtle);
    padding-bottom: var(--hd-spacing-1, 4px);
    margin: 0 0 var(--hd-spacing-2, 8px);
    color: var(--hd-text-primary);
    font-weight: var(--hd-weight-semibold);
  }

  /* Shared RichAccordion toolbar primitive. Prefix classes stay in markup as
     compatibility hooks; the visual recipe lives here. */
  .hd-richaccordion-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--hd-space-2);
    border-bottom: 1px solid var(--hd-border-subtle);
    padding-bottom: var(--hd-space-1);
  }

  .hd-richaccordion-toolbar__title {
    margin: 0;
    flex: 1 1 auto;
    font-family: var(--hd-font-parchment);
    font-size: var(--hd-text-h4);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-primary);
  }

  .hd-richaccordion-toolbar__controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--hd-space-2);
  }

  .hd-richaccordion-toolbar__sort,
  .hd-richaccordion-toolbar__foldall,
  .hd-richaccordion-toolbar__button {
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-primary);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm);
    padding: var(--hd-space-1) var(--hd-space-2);
    min-height: 36px;
    cursor: pointer;
  }

  .hd-richaccordion-toolbar__foldall:hover,
  .hd-richaccordion-toolbar__button:hover,
  .hd-richaccordion-toolbar__sort:hover {
    background: var(--hd-surface-3);
  }

  .hd-richaccordion-toolbar__foldall:focus-visible,
  .hd-richaccordion-toolbar__button:focus-visible,
  .hd-richaccordion-toolbar__sort:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }

  /* Mount-container for indlejret FormulaerBox;
     layout og interne styles er FormulaerBox's ansvar (formularer-box.css). */
  .hd-karakterark__formbox-mount {
    width: 100%;
    box-sizing: border-box;
  }

  /* ================================================================ */
  /* Mount-wrapper                                                     */
  /* ================================================================ */

  .hd-karakterark-mount {
    width: 100%;
    box-sizing: border-box;
  }

  /* Loading/error placeholder shown while async fetching the full
   * character payload, or when fetching failed. Keeps the mount from
   * looking silently empty. */
  .hd-karakterark__placeholder {
    margin: var(--hd-space-5) var(--hd-space-4);
    color: var(--hd-text-secondary);
    font-style: italic;
    text-align: center;
  }

  /* ================================================================ */
  /* §22.5 Card-strip (weapons + items)                               */
  /* ================================================================ */

  .hd-karakterark__card-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--hd-spacing-2, 8px);
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--hd-spacing-1, 4px);
  }
  .hd-karakterark__card-strip::-webkit-scrollbar { display: none; }

  /* ── Individuel card ─────────────────────────────────────────── */

  .hd-karakterark__card {
    flex: 0 0 auto;
    width: var(--hd-ka-card-width, 70px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--hd-spacing-1, 4px);
    background: var(--hd-surface-1, #1a1410);
    border: 1px solid var(--hd-border-subtle, #5a4a30);
    border-radius: var(--hd-radius-md, 8px);
    cursor: pointer;
    position: relative;
    /* Reset knap-styling */
    appearance: none;
    -webkit-appearance: none;
    text-align: center;
    color: inherit;
    font: inherit;
  }
  .hd-karakterark__card:active {
    transform: translateY(1px);
  }

  .hd-karakterark__ruler-target--disabled {
    cursor: default;
    opacity: 0.62;
  }

  .hd-karakterark__ruler-info {
    position: absolute;
    top: 3px;
    right: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Glyph circle scales with content-zoom so the info glyph stays centred
     * at 2× instead of overflowing the badge. 18px at zoom 1 (byte-identical). */
    width: calc(18px * var(--hd-player-content-zoom, 1));
    height: calc(18px * var(--hd-player-content-zoom, 1));
    border-radius: 50%;
    background: var(--hd-surface-1, rgba(0, 0, 0, 0.72));
    color: var(--hd-text-primary, #f4ead8);
    border: 1px solid var(--hd-border-medium, rgba(255, 255, 255, 0.2));
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
  }

  /* WCAG 2.5.5 touch-target — keep 18px corner-badge visual, expand hit-area to 44px */
  .hd-karakterark__ruler-info::after {
    content: '';
    position: absolute;
    inset: -13px;
  }

  .hd-karakterark__ruler-info:hover,
  .hd-karakterark__ruler-info:focus-visible {
    border-color: var(--hd-activity-utility, #78a6ff);
    outline: none;
  }

  .hd-karakterark__ruler-info.hd-karakterark__ruler-target--disabled {
    cursor: default;
    opacity: 0.45;
  }

  /* Equipped våben: gold border (spec §22.5) */
  .hd-karakterark__card--equipped {
    box-shadow: 0 0 0 2px var(--hd-ka-equipped-gold, #f0c570);
  }

  /* Magisk thumbnail-baggrund: lilla gradient (spec §22.5) */
  .hd-karakterark__card--magical .hd-karakterark__card-thumb {
    background-image: linear-gradient(
      135deg,
      var(--hd-ka-magical-start, #6b3d9e),
      var(--hd-ka-magical-end, #3d1a6e)
    );
  }

  /* ── Thumbnail ───────────────────────────────────────────────── */

  /* Shared sizing class — used by angreb, ejendele og formularer.
   * Changing --hd-player-card-thumb-size resizes all three at once. */
  .hd-player-card-thumb {
    width: var(--hd-player-card-thumb-size, 90px);
    height: var(--hd-player-card-thumb-size, 90px);
  }

  .hd-karakterark__card-thumb {
    width: var(--hd-ka-card-thumb-size, 90px);
    height: var(--hd-ka-card-thumb-size, 90px);
    /* --card-thumb sættes dynamisk via JS thumb.style.setProperty() */
    background-image: var(--card-thumb, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--hd-surface-2, #2a1f12);
    border-radius: var(--hd-radius-sm, 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .hd-karakterark__card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Fallback-state (img.onerror): glyph vises i stedet for img */
  .hd-karakterark__card-thumb--fallback img { display: none; }

  .hd-karakterark__card-glyph {
    font-size: var(--hd-ka-card-glyph-size, 32px);  /* spec §22.5: emoji fallback-glyph */
    line-height: var(--hd-leading-icon);              /* 1 — icon/glyph centering */
  }

  /* ── Tekst-lag ───────────────────────────────────────────────── */

  .hd-karakterark__card-name {
    font-family: var(--hd-ka-font-display, var(--hd-font-parchment, serif));
    font-size: var(--hd-text-micro);         /* 9px — spec §22.5: 9px IM Fell English */
    text-align: center;
    line-height: var(--hd-leading-display);  /* 1.1 — tight headline leading */
    /* Trunkér ved 2 linjer for at holde card-højden fast */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hd-karakterark__card-meta {
    font-size: var(--hd-ka-ability-label-size);
    color: var(--hd-text-tertiary, #8a7a60);
    text-align: center;
    line-height: var(--hd-leading-display);      /* 1.1 — tight */
  }

  /* ── Brug-knap (charges/consumable items §22.9) ──────────────── */

  .hd-karakterark__use-btn {
    margin-top: 2px;
    padding: 2px 6px;
    font-size: var(--hd-ka-ability-label-size);
    background: linear-gradient(
      135deg,
      var(--hd-ka-magical-start, #6b3d9e),
      var(--hd-ka-magical-end, #3d1a6e)
    );
    color: #fff;
    border: none;
    border-radius: var(--hd-radius-sm, 4px);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    line-height: var(--hd-leading-tight);        /* 1.2 — knap tekst */
  }
  .hd-karakterark__use-btn:active {
    opacity: 0.85;
  }

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

  /* ================================================================ */
  /* §22.9 Coins-line                                                 */
  /* ================================================================ */

  .hd-karakterark__coins-line {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-spacing-2, 8px);
    margin-bottom: var(--hd-spacing-2, 8px);
    align-items: center;
  }

  .hd-karakterark__coin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .hd-karakterark__coin img {
    width: 16px;
    height: 16px;
    display: block;
  }

  .hd-karakterark__coin strong {
    font-size: var(--hd-ka-skill-size, 10.5px);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-primary, #e8d8b8);
  }

  /* ================================================================ */
  /* §22.8 Særpræg + Træk · trait-rows                                */
  /* ================================================================ */

  .hd-karakterark__trait-row {
    display: flex;
    align-items: center;
    gap: var(--hd-spacing-2, 8px);
    width: 100%;
    padding: var(--hd-spacing-1, 4px) var(--hd-spacing-2, 8px);
    background: transparent;
    border: none;
    border-radius: var(--hd-radius-sm, 4px);
    color: var(--hd-text-primary);
    cursor: pointer;
    text-align: left;
    /* WCAG 2.5.5: 44px minimum touch-target */
    min-height: 44px;
  }

  .hd-karakterark__trait-row:hover,
  .hd-karakterark__trait-row:focus-visible {
    background: var(--hd-surface-2);
  }

  .hd-karakterark__trait-row:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }

  .hd-karakterark__trait-ico {
    flex: 0 0 auto;
    font-size: var(--hd-text-body);
    line-height: var(--hd-leading-icon, 1);
  }

  .hd-karakterark__trait-ico-glyph {
    --hd-player-icon-size: var(--hd-text-body);
  }

  /* Class-features: gold-rust (--hd-text-tertiary er allerede antik guld) */
  .hd-karakterark__trait-ico--class {
    color: var(--hd-text-tertiary);
  }

  /* Race-traits: grøn (success-token — AAA på surf-2) */
  .hd-karakterark__trait-ico--race {
    color: var(--hd-accent-success);
  }

  .hd-karakterark__trait-name {
    flex: 1 1 auto;
    font-family: var(--hd-font-parchment);
    font-size: var(--hd-text-body);
    color: var(--hd-text-primary);
  }

  .hd-karakterark__trait-source {
    flex: 0 0 auto;
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-ui-small);
    font-style: italic;
  }

  /* ================================================================ */
  /* §22.10 Mine tilstande · cond-list                                */
  /* ================================================================ */

  .hd-karakterark__cond {
    display: flex;
    align-items: baseline;
    gap: var(--hd-spacing-2, 8px);
    padding: var(--hd-spacing-1, 4px) var(--hd-spacing-2, 8px);
    margin: 2px 0;
    background: var(--hd-surface-1);
    color: var(--hd-text-primary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
    border: 0;
    border-left: 3px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm, 4px);
    font-size: var(--hd-text-body);
  }

  /* Rød = condition på dig (negativ) */
  .hd-karakterark__cond--on-you {
    border-left-color: var(--hd-accent-error);
  }

  /* Grøn = benign/vedvarende (positiv) */
  .hd-karakterark__cond--benign {
    border-left-color: var(--hd-accent-success);
  }

  /* Gul = condition på andre relevant for dig */
  .hd-karakterark__cond--on-others {
    border-left-color: var(--hd-accent-warning);
  }

  .hd-karakterark__cond-name {
    flex: 1 1 auto;
    color: var(--hd-text-primary);
    font-weight: var(--hd-weight-medium);
  }

  .hd-karakterark__cond-detail {
    flex: 0 0 auto;
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-ui-small);
  }

  /* ================================================================ */
  /* Fase 2 — spiller-startet level-up (button + chooser)            */
  /* ================================================================ */

  .hd-karakterark__levelup-btn {
    /* Anchored to the BOTTOM-right; the færdighedsmærkat (bonus-pill) sits at the
     * top-right. Each takes its cue from the top/bottom of the id-strip box so
     * they no longer overlap (§22.1 C7). */
    position: absolute;
    bottom: var(--hd-ka-gap);
    right: 0;
    min-width: 44px;
    /* F2 — kompakt, lav højde der matcher Færdigheder-rækkernes skala (ikon 14px
     * + lille font ⇒ ~18px) frem for en 44px-pille (bruger-ønske efter
     * on-device-walkthrough). Den vandrette hit-area er stadig god (label + ikon,
     * min-width 44px); den faste WCAG-2.5.5-44px-højde er bevidst droppet HER
     * efter eksplicit bruger-beslutning, fordi knappen visuelt skal flugte med
     * de lave færdighedsrækker i HUD'en. */
    min-height: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 1px 8px;
    border: 1px solid var(--hd-border-medium);
    border-radius: 999px;
    background-color: transparent;
    color: var(--hd-text-tertiary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-medium);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--hd-transition-fast, 120ms ease);
  }

  .hd-karakterark__levelup-btn--muted {
    opacity: 0.72;
  }

  .hd-karakterark__levelup-btn--available {
    border-color: var(--hd-chip-active-border, var(--hd-accent-primary));
    background-color: var(--hd-chip-active-bg, rgba(201, 169, 110, 0.22));
    background-image: var(--hd-chip-active-image, none);
    background-size: cover;
    color: var(--hd-chip-active-text, var(--hd-accent-primary));
    font-weight: var(--hd-weight-semibold);
    opacity: 1;
    /* F7 — subtil, temarød pulserende ring når DM har gjort et level-up
     * tilgængeligt, så spilleren bliver gjort opmærksom på knappen. Ringen er en
     * box-shadow (ingen layout-shift) i --hd-accent-error (temarød: rose i mørkt
     * tema, oxblod i lyst). Varighed er token-baseret (motion-parity): 480ms × 5
     * = 2400ms; under prefers-reduced-motion bliver --hd-motion-slower 0ms, så
     * pulsen stopper automatisk (det eksplicitte reduced-motion-stop nedenfor er
     * et ekstra bælte-og-seler-værn). */
    animation: hd-karakterark-levelup-pulse calc(var(--hd-motion-slower) * 5) var(--hd-ease-ui, ease-in-out) infinite;
  }

  @keyframes hd-karakterark-levelup-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hd-accent-error) 50%, transparent); }
    100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--hd-accent-error) 0%, transparent); }
  }

  @media (prefers-reduced-motion: reduce) {
    .hd-karakterark__levelup-btn--available { animation: none; }
  }

  .hd-karakterark__levelup-btn:hover,
  .hd-karakterark__levelup-btn:focus-visible {
    color: var(--hd-text-primary);
    border-color: var(--hd-chip-border-hover, var(--hd-border-accent));
  }

  .hd-karakterark__levelup-btn--available:hover,
  .hd-karakterark__levelup-btn--available:focus-visible {
    color: var(--hd-chip-active-text, var(--hd-accent-primary));
    border-color: var(--hd-chip-active-border, var(--hd-accent-primary));
  }

  .hd-karakterark__levelup-btn:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }

  .hd-karakterark__levelup-icon {
    /* F2 — skaleret ned fra 20px så knappen kan blive lav (Færdigheder-skala). */
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--hd-karakterark-levelup-icon-url, none) no-repeat center / 90%;
    mask: var(--hd-karakterark-levelup-icon-url, none) no-repeat center / 90%;
  }

  .hd-karakterark__levelup-chooser {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .hd-karakterark__levelup-chooser > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .hd-karakterark__levelup-option,
  .hd-karakterark__levelup-confirm {
    min-height: 44px; /* WCAG 2.5.5 touch-target */
    padding: 8px 12px;
    border: 1px solid var(--hd-border-medium);
    border-radius: 8px;
    background-color: var(--hd-surface-1);
    color: var(--hd-text-primary);
    font-size: var(--hd-text-ui);
    text-align: left;
    cursor: pointer;
  }

  .hd-karakterark__levelup-option--new {
    border-style: dashed;
  }

  .hd-karakterark__levelup-confirm {
    margin-top: 8px;
    background-color: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
    border-color: var(--hd-accent-primary);
    text-align: center;
    font-weight: var(--hd-weight-bold);
  }

  .hd-karakterark__levelup-error {
    margin: 4px 0 0;
    color: var(--hd-accent-error);
    font-size: var(--hd-text-ui-small);
  }

  /* ================================================================ */
  /* Spec B Task 12 — fordel/ulempe stat-chips                       */
  /* ================================================================ */
  /*
   * Små corner-/inline-chips på Init/Fart-stones og Egenskab-knapper
   * når en aktiv virkning (tilstand) udløser advantage/disadvantage på
   * det relevante slag. Genbruger .hd-richrow__chip token-paletten
   * (--action=fordel grøn, --cond=ulempe gul), men shrinker til et
   * stone-corner-format. Token-only — ingen hex-literaler.
   *
   * Stone + ability får position:relative så chippen kan absolutpositioneres
   * i øverste højre hjørne uden at forskyde de eksisterende tal/etiketter.
   */
  .hd-karakterark__stone,
  .hd-karakterark__ability {
    position: relative;
  }

  .hd-karakterark__stat-chip {
    /* Mindre end den normale rich-row chip — stones har lidt plads i hjørnet. */
    font-size: var(--hd-text-micro);
    line-height: var(--hd-leading-tight, 1.1);
    padding: 0 4px;
    border-radius: var(--hd-radius-sm);
    white-space: nowrap;
    pointer-events: none;        /* tap'er stadig på stone'en, ikke chippen */
  }

  /* Init/Fart-stones: hjørne-position øverst-højre, uden at klippe ind i værdien. */
  .hd-karakterark__stone .hd-karakterark__stat-chip {
    position: absolute;
    top: 2px;
    right: 2px;
  }

  /* Egenskab-knapper: lignende hjørne-placering. */
  .hd-karakterark__ability .hd-karakterark__ability-flag {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: var(--hd-text-micro);
    padding: 0 3px;
  }

  /* Weapons section-title chip: inline, valgt størrelse matcher h3-baseline. */
  .hd-karakterark__section-title .hd-karakterark__stat-chip {
    display: inline-block;
    vertical-align: middle;
    margin-left: var(--hd-spacing-1, 4px);
  }

  /* Spec B polish #5 — DEX double-chip when allSavesDisadvantage AND
   * dexSaveDisadvantage are active simultaneously (e.g. exhaustion-3 +
   * restrained). Distinct visual signal: bolder weight + stronger warning
   * border/bg so the "×2 ulempe" label reads as two-stacked-ulemper, not
   * a redundant single chip. */
  .hd-karakterark__stat-chip--double {
    font-weight: var(--hd-weight-bold);
    border: 1.5px solid var(--hd-accent-warning);
    background: color-mix(in srgb, var(--hd-accent-warning) 35%, var(--hd-surface-2));
  }

} /* end @layer components */

@layer components {
  /* ===========================================================================
   * Portal-textures (Task 9): fg-card + portrait gold ring + equipped våben
   * glow + HP/AC stat-stone gradients. Anvendt på Karakterark (Tab[1]).
   * =========================================================================== */

  /* === Sub-task 9.1 — fg-card visual på .hd-karakterark root === */
  .hd-karakterark {
    position: relative;
    border: 1px solid rgba(94, 69, 38, 0.4);
    border-radius: 4px;
    overflow: hidden;
    isolation: isolate;
  }

  :root:not([data-theme="light"]) .hd-karakterark {
    background-color: var(--hd-surface-1);
    background-image:
      var(--hd-texture-gold-seam),
      var(--hd-texture-gold-seam),
      linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
      var(--hd-texture-dark-paper);
    background-size: 60px 3px, 60px 3px, cover, 500px 500px;
    background-repeat: repeat-x, repeat-x, no-repeat, repeat;
    background-position: 0 0, 0 100%, center, center;
  }

  [data-theme="light"] .hd-karakterark {
    background-color: transparent;
    background-image:
      var(--hd-texture-gold-seam),
      var(--hd-texture-gold-seam),
      var(--hd-texture-seam-paper);
    background-size: 60px 3px, 60px 3px, 500px 500px;
    background-repeat: repeat-x, repeat-x, repeat;
    background-position: 0 0, 0 100%, center;
  }

  /* === Sub-task 9.2 — Portræt: 2.5px gylden ring (dobbelt-clip-trick) === */
  .hd-karakterark__portrait {
    border: 2.5px solid transparent;
    background-image:
      linear-gradient(var(--hd-surface-1), var(--hd-surface-1)),
      var(--hd-texture-gold-seam);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    background-size: cover, 30px 30px;
    background-repeat: no-repeat, repeat;
  }
  [data-theme="light"] .hd-karakterark__portrait {
    background-image:
      linear-gradient(#fffaee, #fffaee),
      var(--hd-texture-gold-seam);
  }

  /* === Sub-task 9.3 — Equipped våben: gylden glow === */
  .hd-karakterark__card--equipped {
    background-image: linear-gradient(135deg, rgba(255, 215, 140, 0.30), rgba(217, 189, 134, 0.15));
    box-shadow:
      0 0 0 2px var(--hd-ka-equipped-gold, #f0c570),
      0 0 12px rgba(255, 215, 140, 0.40);
  }

  /* === Sub-task 9.4 — Stat-stones: HP oxblod, AC navy gradient === */
  .hd-karakterark__stone--hp .hd-karakterark__stone-value {
    /* Start darkened #a02828 → #8a1f1f so cream text clears AAA across the whole
     * gradient: #8a1f1f = 8.44:1, #6e1a1a = 10.62:1 with #fff5e0 (was 6.85:1 at the
     * light stop). AC navy already clears AAA (7.87–11.68:1). */
    background: linear-gradient(180deg, #8a1f1f 0%, #6e1a1a 100%);
    color: #fff5e0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    padding: 2px 8px;
    border-radius: 4px;
  }
  .hd-karakterark__stone--ac .hd-karakterark__stone-value {
    background: linear-gradient(180deg, #2a4d7a 0%, #163357 100%);
    color: #f0f5ff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    padding: 2px 8px;
    border-radius: 4px;
  }

  /* §12 Foretrukne — the favourite affordance is now the shared renderRow ★/☆
     pin (player-rich-row.css `.hd-richrow__pin`), backed by PlayerFavorites. The
     former `.hd-karakterark__fav` decorator button + its icon were retired. */

  .hd-karakterark__foretrukne-empty {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
    font-style: italic;
    padding: 4px 6px;
  }

  /* Skive 2 — Foretrukne-stribe: kondenseret afstand mellem art-grupperne så
     den læser som ét samlet hurtig-overblik (ikke som fulde faner). Genbruger
     .hd-richrow__*-styling; her kun ydre rytme. Token-baseret (hex-zero gate). */
  .hd-karakterark__foretrukne .hd-richrow__group {
    margin-block: 0;
  }
  .hd-karakterark__foretrukne .hd-richrow__group:first-of-type {
    margin-block-start: 0;
  }
}

/* §22.12 — Plan 2a: hovedkolonne-faner + Kamp-konsol.
 * Fane-bar + paneler er descendants af .hd-karakterark__main (container-query-
 * context), aldrig selve container-type-elementet (Plan 1-lære). */
@layer components {
  /* Plan 3/Skive 1 — sub-stribe (stack-mode): fane-rækken (Kamp/Magi/Særpræg &
   * træk/Udstyr) scroller MED indholdet efter bruger-feedback — den er IKKE
   * længere sticky/klæbende under top-baren. Selve rækken er gennemsigtig (INGEN
   * flade-fyld) så kun de enkelte chips bærer baggrundsfarve; border-bottom står
   * stadig som visuel adskiller mellem fanerne og indholdet. */
  .hd-karakterark--stack .hd-chip-row {
    border-bottom: 1px solid var(--hd-border-subtle, #3a2a18);
  }

  .hd-karakterark--stack #hd-chip-pane-oversigt:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--hd-ka-gap);
  }

  .hd-karakterark__kamp,
  .hd-kamp {
    display: flex;
    flex-direction: column;
    gap: var(--hd-ka-gap, 12px);
  }

  .hd-karakterark__kamp-accordion {
    display: contents;
  }

  /* Plan 2b — live action-økonomi-stribe øverst i Kamp-fanen. */
  .hd-karakterark__eco-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-2);
    align-items: center;
    padding: var(--hd-space-2);
    background: var(--hd-surface-1);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-md);
  }
  .hd-karakterark__eco-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    min-height: 44px;                 /* WCAG 2.5.5 */
    padding: 0 var(--hd-space-3);
    background: transparent;
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm);
    color: var(--hd-text-secondary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui);
    cursor: pointer;
  }
  .hd-karakterark__eco-chip--active {
    color: var(--hd-text-primary);
    border-color: var(--hd-ka-accent, var(--hd-accent-primary));
    background: var(--hd-surface-2);
    font-weight: var(--hd-weight-semibold);
  }
  .hd-karakterark__eco-chip:focus-within,
  .hd-karakterark__eco-chip:focus-visible { outline: 2px solid var(--hd-accent-primary); outline-offset: -2px; }
  .hd-karakterark__eco-chip--move { cursor: default; }
  .hd-karakterark__eco-move-label {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
  }
  .hd-karakterark__eco-move-icon-glyph {
    width: 1rem;
    height: 1rem;
    background: currentColor;
  }
  .hd-karakterark__eco-move-range { accent-color: var(--hd-ka-accent, var(--hd-accent-primary)); }
}