/* §4-valg-primitiv — ét genbrugeligt valg-element (Luminous Spindle-tokens). */
@layer components {

.hd-choice-row {
  --hd-choice-row-name-leading: 1.12;
  --hd-choice-row-check-glyph-size: 10px;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 44px; /* WCAG 2.5.5 touch-mål */
  padding: 8px 9px 8px 12px;
  background: var(--hd-surface-1);
  border: 1px solid var(--hd-border-subtle);
  border-radius: 8px;
  cursor: pointer;
}
.hd-choice-row::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 8px 0 0 8px;
  background: transparent;
}
.hd-choice-row--selected { background: var(--hd-surface-2); border-color: var(--hd-accent-primary); }
.hd-choice-row--selected::before { background: var(--hd-accent-primary); }
.hd-choice-row--disabled { opacity: .45; cursor: default; }
.hd-choice-row__input { margin-top: 2px; }
.hd-choice-row__media { flex: none; }
.hd-choice-row__main { flex: 1; min-width: 0; }
.hd-choice-row__name { font-family: var(--hd-font-display); font-weight: var(--hd-weight-bold); color: var(--hd-text-primary); line-height: var(--hd-choice-row-name-leading); }
.hd-choice-row__name-en { margin-left: 5px; font-family: var(--hd-font-body); font-style: italic; color: var(--hd-text-tertiary); font-size: var(--hd-text-caption); font-weight: var(--hd-weight-regular); }
.hd-choice-row__meta { display: block; margin-top: 4px; font-size: var(--hd-text-ui-small); color: var(--hd-text-tertiary); }
.hd-choice-row__check {
  flex: none; align-self: center;
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--hd-text-tertiary);
  color: var(--hd-surface-base);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--hd-choice-row-check-glyph-size); opacity: 0;
}
.hd-choice-row--selected .hd-choice-row__check { background: var(--hd-accent-primary); border-color: var(--hd-accent-primary); opacity: 1; }
.hd-choice-row__details { flex-basis: 100%; }
.hd-choice-row__status { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.hd-choice-row__status .hd-player-icon { width: 1em; height: 1em; color: var(--hd-text-tertiary); }
.hd-choice-row--readonly { cursor: default; }
.hd-choice-row--readonly:hover { background: var(--hd-surface-1); }
/* §9.1-C collapsible fold-out — native <details> */
.hd-choice-row__foldout {
  flex-basis: 100%;
  margin-top: 8px;
  border-top: 1px solid var(--hd-border-subtle);
  padding-top: 8px;
}
.hd-choice-row__foldout-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  list-style: none; /* kill native triangle */
  color: var(--hd-accent-info);
  font-size: var(--hd-text-ui-small);
  font-weight: var(--hd-weight-semibold);
  user-select: none;
}
.hd-choice-row__foldout-bar::-webkit-details-marker { display: none; }
.hd-choice-row__foldout-bar::after {
  content: "↓";
  display: inline-block;
  transition: transform var(--hd-motion-normal);
}
details[open].hd-choice-row__foldout > .hd-choice-row__foldout-bar::after {
  transform: rotate(180deg);
}
/* label swap: default = closed label visible */
.hd-choice-row__foldout-label--open { display: none; }
details[open].hd-choice-row__foldout .hd-choice-row__foldout-label--closed { display: none; }
details[open].hd-choice-row__foldout .hd-choice-row__foldout-label--open   { display: inline; }
.hd-choice-row__foldout-body {
  margin-top: 6px;
  font-size: var(--hd-text-body-small);
  line-height: var(--hd-leading-narrative);
  color: var(--hd-text-secondary);
}
/* §9.1 swap-old — fjernet valg (dæmpet, stiplet kant, gennemstreget navn, fejl-accent) */
.hd-choice-row--swap-old { opacity: .6; border-style: dotted; }
.hd-choice-row--swap-old::before { background: var(--hd-accent-error); }
.hd-choice-row--swap-old .hd-choice-row__name { text-decoration: line-through; }

}