/* ====================================================================
 * player-rich-row.css — shared primitive for rich list rows
 * (public/js/player-rich-row.js)
 *
 * CSS class prefix: `hd-richrow__`
 * Extracted from saerpraeg-accordion.css so that weapons, spells,
 * items and other list views can reuse the same row/group/chip/pip
 * DOM structure and visual styling.
 *
 * Safari 16.6 / iPadOS 16: ingen @starting-style / allow-discrete;
 * color-mix er understøttet (16.2+).
 *
 * @layer components — same cascade layer as other component CSS.
 * ==================================================================== */

@layer components {

/* ---- Komponent-scoped typografi-tokens (Slice 7) ------------------ *
 * Every richrow/harmonika text style reads a dedicated --hd-richrow-* token
 * with the pre-Slice-7 global as its fallback, so default rendering is
 * unchanged while the admin typography workbench can pin a component-scoped
 * override (lib/player_typography.php → group "richrow"). Sizes stay tunable
 * per component instead of forcing a global text-scale change.
 *
 * --hd-richrow-line-h defaults here at :root (not on .hd-richrow__row-col) so a
 * workbench :root override — @layer overrides beats @layer components — reaches
 * line1/line2 through inheritance. Setting it on row-col would shadow the
 * override (nearest-ancestor wins for inherited custom properties). */
:root {
  --hd-richrow-line-h: calc(var(--hd-text-body) + var(--hd-space-3));
}

/* ---- Gruppe ------------------------------------------------------- */
.hd-richrow__group {
  margin: 0;
  border: 1px solid var(--hd-border-subtle);
  border-radius: 0;
  overflow: hidden;
  background: var(--hd-surface-1);
}
.hd-richrow__group-hdr {
  display: flex;
  align-items: center;
  gap: var(--hd-space-2);
  width: 100%;
  padding: var(--hd-space-2) var(--hd-space-3);
  background: var(--hd-surface-2);
  border: none;
  color: var(--hd-text-primary);
  text-align: left;
  cursor: pointer;
  min-height: 44px;            /* WCAG 2.5.5 touch-target */
  box-sizing: border-box;
}
.hd-richrow__group-hdr:hover { background: var(--hd-surface-3); }
.hd-richrow__group-hdr:focus-visible {
  outline: 2px solid var(--hd-accent-primary);
  outline-offset: -2px;
}
.hd-richrow__chev {
  flex: 0 0 auto;
  /* primary (not tertiary): the chevron sits over the karakterark fg-card paper
   * texture where tertiary gold measured only 5.9–6.4:1; primary clears AAA
   * (8.5:1) against the same backdrop. */
  color: var(--hd-text-primary);
  font-size: var(--hd-text-ui);
  line-height: var(--hd-leading-icon);
  /* Fold triangle rendered 2× larger WITHOUT taking more space: a transform
   * scales the glyph visually but leaves the layout box (and thus the row
   * spacing) unchanged. inline-block is required for transform to apply. */
  display: inline-block;
  transform: scale(2);
  transform-origin: center;
}
.hd-richrow__group-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--hd-space-1);
  flex-wrap: wrap;
}
.hd-richrow__group-name {
  font-family: var(--hd-font-parchment);
  font-size: var(--hd-richrow-group-title-size, var(--hd-text-body-large));
  font-weight: var(--hd-weight-semibold);
  color: var(--hd-text-primary);
}
.hd-richrow__group-sub {
  font-family: var(--hd-font-ui);
  font-size: var(--hd-richrow-group-sub-size, var(--hd-text-ui-small));
  font-style: italic;
  color: var(--hd-text-tertiary);
}
.hd-richrow__count {
  flex: 0 0 auto;
  background: var(--hd-accent-primary);
  color: var(--hd-surface-base);
}

.hd-richrow__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.hd-richrow__subhdr {
  font-family: var(--hd-font-ui);
  font-size: var(--hd-richrow-subhdr-size, var(--hd-text-micro));
  line-height: var(--hd-leading-snug);
  text-transform: uppercase;
  letter-spacing: var(--hd-tracking-normal);
  color: var(--hd-text-tertiary);
  padding: var(--hd-space-2) var(--hd-space-1) var(--hd-space-1);
}

/* ---- Række -------------------------------------------------------- */
.hd-richrow__row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  padding: 0;
  border-left: 4px solid var(--hd-richrow-row-accent, transparent);
  border-radius: 0;
  background: var(--hd-richrow-row-bg, transparent);
  color: var(--hd-text-primary);
  cursor: pointer;
  text-align: left;
  min-height: 44px;            /* WCAG 2.5.5 touch-target */
  box-sizing: border-box;
  /* Fælles kvadratisk størrelse til ledende billede (.hd-richrow__media)
   * og legacy card-thumb (.hd-richrow__thumb). Værdien svarer til højden
   * af .hd-richrow__row-col inkl. padding for en række uden pips. Rækker
   * med pips beholder denne størrelse og topjusterer billedet. */
  --hd-richrow-media-size:
    calc(
      var(--hd-richrow-line-h)
      + var(--hd-richrow-line-h)
      + var(--hd-space-1)
      + var(--hd-space-2)
      + var(--hd-space-2)
    );
}
.hd-richrow__row--stripe-odd { --hd-richrow-row-bg: var(--hd-richrow-zebra-odd); }
.hd-richrow__row--stripe-even { --hd-richrow-row-bg: var(--hd-richrow-zebra-even); }
.hd-richrow__row:focus-visible {
  outline: 2px solid var(--hd-accent-primary);
  outline-offset: 2px;
}
.hd-richrow__row-col {
  /* Height of ONE text/chip line. line1 and line2 are each locked to
   * --hd-richrow-line-h, so a row is exactly two lines tall regardless of chip
   * count (Slice 3). The value is a component token defined at :root above
   * (Slice 7) — inherited here, and overridable from the typography workbench. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hd-space-1);
  /* Inner padding on the text column only — the leading media/thumb/glyph are
   * siblings *before* this column and the row keeps `padding:0`, so the image
   * stays flush-left while text/chips/summary get breathing room from the image
   * and the trailing pin/actions edge. */
  padding: var(--hd-space-2);
}
/* Line 1: icon → title → English → chips, all on ONE line. `nowrap` + a fixed
 * height guarantee the title never wraps and the row height never varies with
 * chip count; the JS layout pass moves any non-fitting chips to line 2. */
.hd-richrow__line1 {
  display: flex;
  align-items: center;
  gap: var(--hd-space-2);
  flex-wrap: nowrap;
  height: var(--hd-richrow-line-h);
  min-width: 0;
  overflow: hidden;
}
.hd-richrow__conc {
  flex: 0 0 auto;
  color: var(--hd-accent-primary);
  font-size: var(--hd-text-ui);
  line-height: var(--hd-leading-icon);
}
.hd-richrow__title-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(18px * var(--hd-player-content-zoom, 1));
  height: calc(18px * var(--hd-player-content-zoom, 1));
  color: var(--hd-text-secondary);
  line-height: var(--hd-leading-icon);
}
.hd-richrow__title-icon-glyph {
  --hd-player-icon-size: calc(18px * var(--hd-player-content-zoom, 1));
}
.hd-richrow__name {
  /* Title stays on ONE line and ellipsizes if even it overflows (it never
   * wraps). It may shrink (flex-shrink:1) but only after the English name has
   * shrunk away, keeping the title the highest-priority item on line 1. */
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--hd-richrow-name-font, var(--hd-font-parchment));
  font-size: var(--hd-richrow-name-size, var(--hd-text-body));
  font-weight: var(--hd-richrow-name-weight, var(--hd-weight-medium));
  color: var(--hd-text-primary);
}
.hd-richrow__name-en {
  /* Shrinks first (flex-shrink 100 ≫ the title's 1) and is dropped entirely by
   * the JS pass when the slot left for it falls below the readable floor. */
  flex: 0 100 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--hd-font-ui);
  font-size: var(--hd-richrow-name-en-size, var(--hd-text-ui-small));
  font-style: italic;
  color: var(--hd-text-tertiary);
}
/* Chip strip on line 1. `nowrap` + no auto-margin so chips pack directly after
 * the title/English; the JS pass keeps only the chips that fit here and moves
 * the rest to line 2. Gap matches line1's own gap so RichRowLineLayout's
 * uniform-gap arithmetic matches the real DOM. */
.hd-richrow__chips {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--hd-space-2);
}
/* Line 2: summary first, then overflow chips to its right, on a second
 * fixed-height line so the row stays exactly two lines tall even when empty. */
.hd-richrow__line2 {
  display: flex;
  align-items: center;
  gap: var(--hd-space-2);
  flex-wrap: nowrap;
  height: var(--hd-richrow-line-h);
  min-width: 0;
  overflow: hidden;
}
.hd-richrow__line2-chips {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--hd-space-2);
}
.hd-richrow__line2-chips:empty {
  display: none;   /* no trailing gap after the summary when nothing overflowed */
}
.hd-richrow__summary {
  /* Fills the rest of line 2 and truncates; overflow chips sit to its right.
   * min-width stays 0 so chips can squeeze the summary away entirely when
   * there is not enough room. */
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--hd-font-ui);
  font-size: var(--hd-richrow-summary-size, var(--hd-text-ui-small));
  line-height: var(--hd-leading-snug);
  color: var(--hd-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Thumbnail og glyph ------------------------------------------ */
/* Fælles kvadratisk størrelse med .hd-richrow__media: højden af
 * .hd-richrow__row-col inkl. padding for en række uden pips. */
.hd-richrow__thumb {
  flex: 0 0 auto;
  width: var(--hd-richrow-media-size);
  height: var(--hd-richrow-media-size);
  align-self: flex-start;
  /* --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);
  border-radius: var(--hd-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hd-richrow__glyph {
  flex: 0 0 auto;
  font-size: calc(var(--hd-player-card-glyph-size, 48px) * var(--hd-player-content-zoom, 1));
  line-height: var(--hd-leading-icon);
}
.hd-richrow__glyph--icon {
  --hd-player-icon-size: calc(var(--hd-player-card-glyph-size, 48px) * var(--hd-player-content-zoom, 1));
  color: var(--hd-text-tertiary);
}

/* ---- Chips (genbruger .hd-badge / .hd-badge--xs base) ------------- */
.hd-richrow__chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}
.hd-richrow__chip-icon-glyph {
  --hd-player-icon-size: 1em;
}
.hd-richrow__chip--action { background: color-mix(in srgb, var(--hd-accent-success) 22%, var(--hd-surface-2)); color: var(--hd-accent-success); }
.hd-richrow__chip--type   { background: color-mix(in srgb, var(--hd-accent-primary) 20%, var(--hd-surface-2)); color: var(--hd-accent-primary); }
.hd-richrow__chip--cond   { background: color-mix(in srgb, var(--hd-accent-warning) 22%, var(--hd-surface-2)); color: var(--hd-accent-warning); }
.hd-richrow__chip--dur    { background: var(--hd-surface-3); color: var(--hd-text-secondary); }
.hd-richrow__chip--dmg    { background: var(--hd-surface-3); color: var(--hd-text-primary); }
.hd-richrow__chip--lvl    { background: var(--hd-surface-3); color: var(--hd-text-secondary); font-weight: var(--hd-weight-bold); }
.hd-richrow__chip--new    { background: color-mix(in srgb, var(--hd-accent-error) 25%, var(--hd-surface-2)); color: var(--hd-accent-error); text-transform: uppercase; }
/* hit: same visual treatment as --dmg (neutral surface, primary text) */
.hd-richrow__chip--hit    { background: var(--hd-surface-3); color: var(--hd-text-primary); }
/* spell-skole + ritual (Skive 1 follow-up a): distinkte fra niveau/varighed */
.hd-richrow__chip--school { background: color-mix(in srgb, var(--hd-accent-secondary) 18%, var(--hd-surface-2)); color: var(--hd-accent-secondary); }
.hd-richrow__chip--ritual { background: color-mix(in srgb, var(--hd-accent-info) 22%, var(--hd-surface-2)); color: var(--hd-accent-info); }
/* Skive 2 — weapon/feat/item enrichment chips */
.hd-richrow__chip--prop    { background: var(--hd-surface-3); color: var(--hd-text-secondary); }
.hd-richrow__chip--mastery { background: color-mix(in srgb, var(--hd-accent-primary) 18%, var(--hd-surface-2)); color: var(--hd-accent-primary); }
.hd-richrow__chip--range   { background: var(--hd-surface-3); color: var(--hd-text-secondary); }
.hd-richrow__chip--wcat    { background: var(--hd-surface-3); color: var(--hd-text-primary); font-weight: var(--hd-weight-bold); }
.hd-richrow__chip--rarity  { background: color-mix(in srgb, var(--hd-accent-secondary) 18%, var(--hd-surface-2)); color: var(--hd-accent-secondary); }
.hd-richrow__chip--attune  { background: color-mix(in srgb, var(--hd-accent-info) 22%, var(--hd-surface-2)); color: var(--hd-accent-info); }
.hd-richrow__chip--weight  { background: var(--hd-surface-3); color: var(--hd-text-secondary); }
/* Slice 4 — item quantity (×N) as a display chip; the ± control lives in CastModal. */
.hd-richrow__chip--qty     { background: var(--hd-surface-3); color: var(--hd-text-primary); font-weight: var(--hd-weight-bold); font-variant-numeric: tabular-nums; }
/* Skive D: prereq chip carries full server text but flows inline with peer chips. */
.hd-richrow__chip--prereq  {
  background: color-mix(in srgb, var(--hd-accent-warning) 22%, var(--hd-surface-2));
  color: var(--hd-accent-warning);
  white-space: normal;
  max-width: 100%;
}
.hd-richrow__chip--featcat { background: color-mix(in srgb, var(--hd-accent-success) 20%, var(--hd-surface-2)); color: var(--hd-accent-success); }
/* Task 7.4 — content-capability manifest-only activity status (non-actionable
   display, never a fake action control). Neutral/muted surface, matches --dur. */
.hd-richrow__chip--disabled { background: var(--hd-surface-3); color: var(--hd-text-secondary); }
/* Task 7.4 review fix — 'informational' availability sibling of --disabled
   (same manifest-only, non-actionable display constraint); intentionally
   identical neutral/muted styling, kept as its own class rather than reused
   under the --disabled name since 'disabled' is a distinct verdict. */
.hd-richrow__chip--informational { background: var(--hd-surface-3); color: var(--hd-text-secondary); }

/* ---- Forbrugs-poletter (magi-slot-konvention) -------------------- */
.hd-richrow__pips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.hd-richrow__pip {
  width: 15px;
  height: 15px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--hd-border-strong);
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color var(--hd-motion-fast) var(--hd-ease-ui);
}
.hd-richrow__pip--full { background: var(--hd-accent-warning); border-color: var(--hd-accent-warning); }
.hd-richrow__pip--used { background: transparent; border-color: var(--hd-border-medium); }
.hd-richrow__pip:focus-visible { outline: 2px solid var(--hd-accent-primary); outline-offset: 1px; }
.hd-richrow__pip-label {
  font-family: var(--hd-font-ui);
  font-size: var(--hd-richrow-pip-label-size, var(--hd-text-micro));
  color: var(--hd-text-tertiary);
  margin-left: var(--hd-space-1);
}

/* ---- Pin/favorit -------------------------------------------------- */
.hd-richrow__pin {
  flex: 0 0 auto;
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--hd-text-tertiary);
  font-size: var(--hd-text-body);
  line-height: var(--hd-leading-icon);
  padding: var(--hd-space-1);
  min-width: 32px;
  min-height: 32px;
  cursor: pointer;
}
.hd-richrow__pin--on { color: var(--hd-accent-warning); }
.hd-richrow__pin:focus-visible { outline: 2px solid var(--hd-accent-primary); outline-offset: 2px; }

/* E4 — secondary ruler deep-link. Mirrors the pin control; primary row tap
 * still casts/uses, this opens the read-only rules modal. */
.hd-richrow__ruler-link {
  flex: 0 0 auto;
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--hd-text-tertiary);
  font-size: var(--hd-text-body);
  line-height: var(--hd-leading-icon);
  padding: var(--hd-space-1);
  min-width: 32px;
  min-height: 32px;
  opacity: 0.75;
  cursor: pointer;
}
.hd-richrow__ruler-link:hover { opacity: 1; }
.hd-richrow__ruler-link:focus-visible { outline: 2px solid var(--hd-accent-primary); outline-offset: 2px; }

.hd-richrow__pin-icon,
.hd-richrow__ruler-link-icon {
  --hd-player-icon-size: var(--hd-text-body);
}

@media (prefers-reduced-motion: reduce) {
  .hd-richrow__pip { transition: none; }
}

/* ---- Equipped/magisk-modifiers ------------------------------------ */
/* Spejler det gamle våbenkorts visuelle affordance (spec §22.5):
 * equipped får samme venstre statusstreg-kontrakt som rarity; magisk fik lilla
 * gradient på thumb. */
.hd-richrow__row--equipped {
  --hd-richrow-row-accent: var(--hd-ka-equipped-gold, #f0c570);
}
.hd-richrow__row--magical .hd-richrow__thumb {
  background-image: linear-gradient(
    135deg,
    var(--hd-ka-magical-start, #6b3d9e),
    var(--hd-ka-magical-end, #3d1a6e)
  );
}

/* ---- Leading media slot (trin 6) ---------------------------------- */
/* Kvadratisk ledende billede-/ikon-slot brugt af angreb- og ejendele-
 * harmonikaen. Størrelsen følger højden af .hd-richrow__row-col inkl.
 * padding for en række uden pips (defineret på .hd-richrow__row). */
.hd-richrow__media {
  flex: 0 0 auto;
  width: var(--hd-richrow-media-size);
  height: var(--hd-richrow-media-size);
  align-self: flex-start;
  border-radius: var(--hd-radius-sm);
  background: var(--hd-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hd-richrow__media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hd-richrow__media-glyph {
  font-size: calc(20px * var(--hd-player-content-zoom, 1));
  line-height: var(--hd-leading-icon);
}
/* Glyph-only placeholder: keep the same square slot as an image and scale the
 * glyph so it has 10 px padding on each side. */
.hd-richrow__media--glyph {
  color: var(--hd-text-secondary);
}
.hd-richrow__media--glyph .hd-richrow__media-glyph {
  --hd-player-icon-size: calc(var(--hd-richrow-media-size) - 20px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hd-player-icon-size);
  height: var(--hd-player-icon-size);
  font-size: var(--hd-player-icon-size);
}

/* ---- Rarity left bar (Plan 5) ------------------------------------- */
.hd-richrow__row[data-rarity] {
  border-left: 3px solid var(--hd-richrow-row-accent, var(--hd-text-tertiary));
  --hd-richrow-row-accent: var(--hd-text-tertiary);
}
.hd-richrow__row[data-rarity="uncommon"]  { --hd-richrow-row-accent: var(--hd-rarity-uncommon-fill); }
.hd-richrow__row[data-rarity="rare"]      { --hd-richrow-row-accent: var(--hd-rarity-rare-fill); }
.hd-richrow__row[data-rarity="very-rare"] { --hd-richrow-row-accent: var(--hd-rarity-very-rare-fill); }
.hd-richrow__row[data-rarity="legendary"] { --hd-richrow-row-accent: var(--hd-rarity-legendary-fill); }
.hd-richrow__row[data-rarity="artifact"]  { --hd-richrow-row-accent: var(--hd-rarity-artifact-fill); }
.hd-richrow__rarity-tier--tre      { --hd-richrow-row-accent: var(--hd-text-tertiary); }
.hd-richrow__rarity-tier--kobber   { --hd-richrow-row-accent: var(--hd-rarity-uncommon-fill); }
.hd-richrow__rarity-tier--solv     { --hd-richrow-row-accent: var(--hd-rarity-rare-fill); }
.hd-richrow__rarity-tier--guld     { --hd-richrow-row-accent: var(--hd-rarity-very-rare-fill); }
.hd-richrow__rarity-tier--animeret { --hd-richrow-row-accent: var(--hd-rarity-legendary-fill); }
.hd-richrow__row.hd-richrow__row--rarity-neutral { --hd-richrow-row-accent: transparent; }
.hd-richrow__row.hd-richrow__row--equipped { --hd-richrow-row-accent: var(--hd-ka-equipped-gold, #f0c570); }

/* ---- Inline-actions slot (trin 6) --------------------------------- */
/* Hover-elevated højre-side-wrapper for equipped-pip + quantity-stepper
 * + attunement-reminder + (fremtidig) pin. Inner button-group leveres af
 * trin 7's inline-actions.js; her ejer vi kun layout + opacity-affordance. */
.hd-richrow__inline-actions {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  gap: var(--hd-space-1);
  opacity: 0.6;
  transition: opacity var(--hd-motion-fast) var(--hd-ease-ui);
}
.hd-richrow__row:hover .hd-richrow__inline-actions,
.hd-richrow__row:focus-within .hd-richrow__inline-actions,
.hd-richrow__inline-actions:hover {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hd-richrow__inline-actions { transition: none; }
}

/* ---- Group-header total (trin 6) ---------------------------------- */
/* "5 stk · 7,5 kg · 47 gp"-suffix ved siden af count-badgen. Neutral
 * tertiary-tekst — count-badgen forbliver den primære affordance. */
.hd-richrow__group-total {
  flex: 0 0 auto;
  font-family: var(--hd-font-ui);
  font-size: var(--hd-richrow-group-total-size, var(--hd-text-ui-small));
  color: var(--hd-text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Inline-actions inner buttons (trin 7) ------------------------ */
/* Wrappen .hd-richrow__inline-actions ejer layout/opacity (trin 6); her
 * styler vi knapperne der lever indeni: pin/equipped/attunement/quantity.
 * Inline-actions.js renderer dem via `state.renderInlineActions(row)`.
 * Stil-stemme: kompakt 28×28, baseline-affordances matcher .hd-richrow__pin
 * (transparent baggrund, --on-modifier i guld) så player-portalens look
 * holdes ensartet på tværs af særpræg/angreb/ejendele. */
.hd-richrow__inline-group {
  display: inline-flex;
  align-items: center;
  gap: var(--hd-space-1);
}

/* Favourite (inline-pin) + quantity (inline-qty) were retired: the favourite is
 * the renderRow ★/☆ pin, and quantity is a ×N chip + a CastModal ± stepper. Only
 * the equip/attune inline buttons remain. */
.hd-richrow__inline-equipped,
.hd-richrow__inline-attune {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--hd-text-tertiary);
  font-size: var(--hd-text-body);
  line-height: var(--hd-leading-icon);
  padding: 0;
  min-width: 28px;
  min-height: 28px;
  cursor: pointer;
  border-radius: var(--hd-radius-sm);
}
.hd-richrow__inline-equipped:focus-visible,
.hd-richrow__inline-attune:focus-visible {
  outline: 2px solid var(--hd-accent-primary);
  outline-offset: 1px;
}
.hd-richrow__inline-equipped--on { color: var(--hd-accent-warning); }
.hd-richrow__inline-attune--on   { color: var(--hd-accent-info, var(--hd-accent-primary)); }

/* ---- §9 Papir-harmonika — flush zebra-rækker (kun karakterark) -------------
 * Texture pattern mirrors player-overview-destination.css: dark theme uses
 * dark-paper, light theme uses seam-paper. Tone overlay is a flat-color
 * gradient layer on top (separate layer from texture — avoids color-stop-in-url bug).
 * Scoped to .hd-karakterark to leave Regler and other rich-row consumers unaffected.
 * Body rows are flush (no padding gap); alternating row colours carry the
 * accordion rhythm instead of card spacing. */

:root:not([data-theme="light"]) .hd-karakterark {
  --hd-richrow-zebra-odd: color-mix(in srgb, var(--hd-paper-tier-2) 88%, var(--hd-surface-1));
  --hd-richrow-zebra-even: color-mix(in srgb, var(--hd-paper-tier-1) 54%, var(--hd-surface-1));
}

[data-theme="light"] .hd-karakterark {
  --hd-richrow-zebra-odd: color-mix(in srgb, var(--hd-paper-tier-2) 86%, var(--hd-surface-1));
  --hd-richrow-zebra-even: color-mix(in srgb, var(--hd-paper-tier-1) 52%, var(--hd-surface-1));
}

/* Light theme: seam-paper texture */
[data-theme="light"] .hd-karakterark .hd-richrow__group-hdr {
  background-color: var(--hd-paper-tier-0);
  background-image:
    linear-gradient(var(--hd-paper-tier-0), var(--hd-paper-tier-0)),
    var(--hd-texture-seam-paper);
  background-size: cover, 500px 500px;
  background-repeat: no-repeat, repeat;
}
[data-theme="light"] .hd-karakterark .hd-richrow__subhdr {
  background-color: var(--hd-paper-tier-1);
  background-image:
    linear-gradient(var(--hd-paper-tier-1), var(--hd-paper-tier-1)),
    var(--hd-texture-seam-paper);
  background-size: cover, 500px 500px;
  background-repeat: no-repeat, repeat;
}
[data-theme="light"] body:is(.hd-player-mode-player-portal, .hd-player-mode-anonymous) .hd-karakterark .hd-richrow__row,
[data-theme="light"] .hd-karakterark .hd-richrow__row {
  background-color: var(--hd-richrow-row-bg, var(--hd-richrow-zebra-odd));
  background-image:
    linear-gradient(var(--hd-richrow-row-bg, var(--hd-richrow-zebra-odd)), var(--hd-richrow-row-bg, var(--hd-richrow-zebra-odd))),
    var(--hd-texture-seam-paper);
  background-size: cover, 500px 500px;
  background-repeat: no-repeat, repeat;
}

/* Dark theme: dark-paper texture */
:root:not([data-theme="light"]) .hd-karakterark .hd-richrow__group-hdr {
  background-color: var(--hd-paper-tier-0);
  background-image:
    linear-gradient(var(--hd-paper-tier-0), var(--hd-paper-tier-0)),
    var(--hd-texture-dark-paper);
  background-size: cover, 500px 500px;
  background-repeat: no-repeat, repeat;
}
:root:not([data-theme="light"]) .hd-karakterark .hd-richrow__subhdr {
  background-color: var(--hd-paper-tier-1);
  background-image:
    linear-gradient(var(--hd-paper-tier-1), var(--hd-paper-tier-1)),
    var(--hd-texture-dark-paper);
  background-size: cover, 500px 500px;
  background-repeat: no-repeat, repeat;
}
:root:not([data-theme="light"]) body:is(.hd-player-mode-player-portal, .hd-player-mode-anonymous) .hd-karakterark .hd-richrow__row,
:root:not([data-theme="light"]) .hd-karakterark .hd-richrow__row {
  background-color: var(--hd-richrow-row-bg, var(--hd-richrow-zebra-odd));
  background-image:
    linear-gradient(var(--hd-richrow-row-bg, var(--hd-richrow-zebra-odd)), var(--hd-richrow-row-bg, var(--hd-richrow-zebra-odd))),
    var(--hd-texture-dark-paper);
  background-size: cover, 500px 500px;
  background-repeat: no-repeat, repeat;
}

} /* end @layer components */

/* ---- Chip + count size tokens (Slice 7) --------------------------------- *
 * Chips and the group-count badge take their font-size from `.hd-badge--xs`,
 * which lives in @layer utilities. A components-layer rule can never win over
 * it (layer order beats specificity), so the richrow chip/count size tokens are
 * declared here in a re-opened @layer utilities block. `.hd-badge.hd-richrow__*`
 * (specificity 0,2,0) beats `.hd-badge--xs` (0,1,0) inside the same layer,
 * order-independently. Both fall back to var(--hd-text-micro) — the current
 * `.hd-badge--xs` size — so nothing changes until the workbench sets a token.
 * The count badge carries BOTH __chip and __count, so the count rule is declared
 * last to win for that element. */
@layer utilities {
  .hd-badge.hd-richrow__chip {
    font-size: var(--hd-richrow-chip-size, var(--hd-text-micro));
  }
  .hd-badge.hd-richrow__count {
    font-size: var(--hd-richrow-count-size, var(--hd-text-micro));
  }
}