/* ===========================================================================
 * utilities.css — Utility classes for Hedensia
 *
 * Loaded EFTER alle component-stylesheets. Single-purpose helper classes med
 * høj specificitet via @layer utilities (overrider components).
 *
 * Konsoliderer .hidden + .visually-hidden fra style.css (root) — disse
 * deduplikeres derfra i Fase 1.6.
 *
 * Fase 2 — Typography utility-klasser (two-axis: size × voice):
 *   .hd-text--display/xl/lg/md/base/sm/xs   — 7 size-klasser (element-only).
 *   .hd-voice--display/narrative/ui         — 3 voice-klasser (CSS inheritance).
 *   .hd-narrative                           — long-form wrapper m. drop-cap.
 * Element-level utility-klasser; voice-klasser virker på element eller
 * container (descendants arver). Ingen descendant-selectors.
 * =========================================================================== */

@layer utilities {
  .hidden { display: none !important; }

  .visually-hidden, .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .text-center { text-align: center; }
  .text-right  { text-align: right; }

  /* ===== Typography: SIZE-akse (Fase 2) — element-only, 7 klasser =====
   * t-shirt-navne for visuel størrelse; tokens beholder semantiske navne
   * (--hd-text-h1/-h2/-h3) for klar mapping. Brug: <h2 class="hd-text--md">
   * — h2 semantisk, md visuelt. */
  .hd-text--display { font-size: var(--hd-text-display); }
  .hd-text--xl      { font-size: var(--hd-text-h1); }
  .hd-text--lg      { font-size: var(--hd-text-h2); }
  .hd-text--md      { font-size: var(--hd-text-h3); }
  .hd-text--base    { font-size: var(--hd-text-body); }
  .hd-text--sm      { font-size: var(--hd-text-body-small); }
  .hd-text--xs      { font-size: var(--hd-text-caption); }
  .hd-text--micro   { font-size: var(--hd-text-micro); }

  /* ===== Typography: VOICE-akse (Fase 2) — virker via CSS inheritance =====
   * 3 voices: display (page-titles, hero), narrative (long-form, in-character),
   * ui (default, system-stack). font-weight sættes IKKE her — element-klassen
   * (h1-h6 i base.css = bold) eller forfatteren leverer den. */
  .hd-voice--display {
    font-family:    var(--hd-font-display);
    line-height:    var(--hd-leading-display);
    letter-spacing: var(--hd-tracking-tight);
  }
  .hd-voice--narrative {
    font-family:           var(--hd-font-narrative);
    line-height:           var(--hd-leading-narrative);
    letter-spacing:        var(--hd-tracking-normal);
    font-feature-settings: "onum" 1, "kern" 1;   /* oldstyle nums + kerning */
  }
  .hd-voice--ui {
    font-family:    var(--hd-font-ui);
    line-height:    var(--hd-leading-normal);
    letter-spacing: var(--hd-tracking-normal);
  }

  /* ===== Narrative wrapper + drop-cap (Fase 2) =====
   * Long-form læseblok (handouts, lazy-dm in-character text, breve). Drop-cap
   * via ::first-letter er ren visuel effekt — påvirker IKKE reading-order for
   * screen-readers (WCAG 1.3.2 A). Brug sammen med .hd-voice--narrative for
   * fuld typografisk pakke. */
  .hd-narrative {
    max-width:     var(--hd-narrative-max-width);
    margin-inline: auto;
    /* Container-queries (Fase 3.4c): handout-typografi skalerer på
     * component-bredde, ikke viewport — sikrer god læsbarhed både
     * i modal, i player-overlay, og i compendium-render-sites. */
    container-type: inline-size;
    container-name: hd-narrative;
  }
  /* Større drop-cap og line-height når narrative har plads (>= 40em ~ tablet+). */
  @container hd-narrative (min-width: 40em) {
    .hd-narrative > p:first-of-type::first-letter {
      font-size: calc(var(--hd-dropcap-size) * 1.15);
    }
    .hd-narrative {
      line-height: var(--hd-leading-loose, 1.85);
    }
  }
  .hd-narrative > p:first-of-type::first-letter {
    float:               left;
    font-size:           var(--hd-dropcap-size);
    font-family:         var(--hd-dropcap-font-family);
    color:               var(--hd-dropcap-color);
    line-height:         var(--hd-dropcap-line-height);
    padding-inline-end:  var(--hd-dropcap-padding-right);
    padding-block-start: var(--hd-dropcap-padding-top);
    font-weight:         var(--hd-weight-bold);
  }
  /* Letter-style signature (in-character quotes, handout-modal afsenders navn).
   * Absorberet fra .hd-handout__signature (modals.css → utilities.css) i Fase 2.5a. */
  .hd-narrative__signature {
    text-align:  right;
    font-style:  var(--hd-narrative-signature-style);
    color:       var(--hd-text-secondary);
    margin-top:  var(--hd-space-5);
  }
  /* Nested blockquote inside narrative — fremhævet citat-blok med accent-rule.
   * Absorberet fra .hd-handout blockquote i Fase 2.5a. */
  .hd-narrative blockquote {
    border-left:  3px solid var(--hd-accent-primary);
    padding-left: var(--hd-space-4);
    font-style:   italic;
    color:        var(--hd-text-secondary);
    margin:       var(--hd-space-4) 0;
  }

  /* ===== Semantic emphasis (Fase 2.4 — flyttet fra modals.css) =====
   * D&D 5e RAW italicises magic items, spell names, condition names, flavor
   * text. Italic Baskerville på mørk bg har reduceret læsbarhed (især på
   * Pi5/iPad). Erstatter italic med bold + accent-color for items/spells/
   * conditions. Flavor-text (in-character quotes) BEHOLDER italic.
   * Virker globalt — også udenfor modal-context (compendium browse, KAMP,
   * NPC-list, DASHAM-cards osv.). */
  .hd-emphasis--item       { color: var(--hd-emphasis-item-color);      font-weight: var(--hd-emphasis-weight); }
  .hd-emphasis--spell      { color: var(--hd-emphasis-spell-color);     font-weight: var(--hd-emphasis-weight); }
  .hd-emphasis--condition  { color: var(--hd-emphasis-condition-color); font-weight: var(--hd-emphasis-weight); }
  .hd-emphasis--flavor     { font-style: italic; color: var(--hd-text-secondary); }

  /* ===== Buttons (Fase 6.4 — konsolideret system) =====
   * Erstatter de tidligere modal CTA-klasser fra modals.css.
   * Default 44x44 touch-target (WCAG 2.5.5). Size-modifiers --sm/--xs er
   * DESKTOP-ADMIN-ONLY (må ikke bruges på player-display / iPad / modal-CTAs).
   * Modal-CTAs bruger .hd-btn--lg som genskaber det oprindelige modal-look. */
  .hd-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             4px;
    min-height:      44px;
    min-width:       44px;
    padding:         var(--hd-space-2) var(--hd-space-3);
    border:          1px solid transparent;
    border-radius:   var(--hd-radius-sm);
    font-family:     var(--hd-font-ui);
    font-size:       var(--hd-text-ui);
    font-weight:     var(--hd-weight-medium);
    line-height:     var(--hd-leading-tight);
    cursor:          pointer;
    transition:      background var(--hd-motion-fast) var(--hd-ease-page-turn),
                     border-color var(--hd-motion-fast) var(--hd-ease-page-turn);
  }
  .hd-btn:focus-visible {
    outline:        2px solid var(--hd-focus-ring);
    outline-offset: 2px;
  }
  .hd-btn:disabled {
    opacity: 1;
    background: var(--hd-surface-2);
    color: var(--hd-text-secondary);
    border-color: var(--hd-border-strong);
    cursor: not-allowed;
  }

  .hd-btn--primary {
    background: var(--hd-accent-primary);
    color:      var(--hd-text-on-accent);
  }
  .hd-btn--primary:hover:not(:disabled) {
    background: var(--hd-accent-primary-hover, var(--hd-accent-primary));
  }
  .hd-btn--secondary {
    background:   var(--hd-surface-3);
    color:        var(--hd-text-primary);
    border-color: var(--hd-border-medium);
  }
  .hd-btn--secondary:hover:not(:disabled) {
    background: var(--hd-surface-4, var(--hd-surface-3));
  }
  .hd-btn--ghost {
    background:   transparent;
    color:        var(--hd-text-secondary);
    border-color: var(--hd-border-medium);
  }
  .hd-btn--ghost:hover:not(:disabled) {
    background: var(--hd-surface-2);
  }
  .hd-btn--destruct {
    background: var(--hd-accent-error);
    color:      var(--hd-text-on-accent);
  }
  .hd-btn--destruct:hover:not(:disabled) {
    background: var(--hd-accent-error-hover, var(--hd-accent-error));
  }
  .hd-btn--success {
    background: var(--hd-accent-success);
    color:      var(--hd-text-on-accent);
  }
  .hd-btn--success:hover:not(:disabled) {
    background: var(--hd-accent-success-hover, var(--hd-accent-success));
  }

  .hd-btn--lg {
    padding:       var(--hd-space-3) var(--hd-space-5);
    border-radius: 6px;
    font-weight:   var(--hd-weight-bold);
  }
  .hd-btn--sm {
    min-height: 32px;
    min-width:  32px;
    padding:    var(--hd-space-1) var(--hd-space-2);
    font-size:  var(--hd-text-ui-small);
  }
  .hd-btn--xs {
    min-height: 24px;
    min-width:  24px;
    padding:    2px var(--hd-space-2);
    font-size:  var(--hd-text-caption);
  }

  /* ===== Badges (Fase 6.4 — promoted fra modals.css til utilities) =====
   * Pill-style chips. Bruges globalt i compendium, kamp, NPC-lists, DASHAM,
   * og inline JS-template-tags. Foreground+background pairs er AAA på
   * --hd-surface-2 (verificeret i wcag-contrast-gate.js). */
  .hd-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--hd-space-1);
    padding:        var(--hd-space-1) var(--hd-space-3);
    border-radius:  var(--hd-radius-full);
    font-family:    var(--hd-font-ui);
    font-size:      var(--hd-text-ui-small);
    font-weight:    var(--hd-weight-medium);
    line-height:    var(--hd-leading-tight);
    white-space:    nowrap;
    background:     var(--hd-surface-3);
    color:          var(--hd-text-primary);
  }
  .hd-badge--success { background: color-mix(in srgb, var(--hd-accent-success) 20%, var(--hd-surface-2)); color: var(--hd-accent-success); }
  .hd-badge--warning { background: color-mix(in srgb, var(--hd-accent-warning) 20%, var(--hd-surface-2)); color: var(--hd-accent-warning); }
  .hd-badge--error   { background: color-mix(in srgb, var(--hd-accent-error)   20%, var(--hd-surface-2)); color: var(--hd-accent-error); }
  .hd-badge--info    { background: color-mix(in srgb, var(--hd-accent-primary) 20%, var(--hd-surface-2)); color: var(--hd-accent-primary); }
  .hd-badge--neutral { background: var(--hd-surface-2); color: var(--hd-text-tertiary); }

  .hd-badge--xs {
    padding:   1px var(--hd-space-1);
    font-size: var(--hd-text-micro);
  }

  /* ===== Control primitives (Admin v2 + shared dense tools) =====
   * Opt-in primitives distilled from admin v1's useful toolbar/search/filter
   * patterns. These are structural recipes only; workflows keep their local
   * modules and must compose these classes explicitly. */
  .hd-control-group {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    min-width: 0;
    padding: var(--hd-space-1);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
    background: var(--hd-surface-1);
    color: var(--hd-text-primary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui);
    font-weight: var(--hd-weight-medium);
    line-height: var(--hd-leading-tight);
  }

  .hd-segmented {
    display: inline-flex;
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
    background: var(--hd-surface-1);
    color: var(--hd-text-primary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui);
    font-weight: var(--hd-weight-medium);
    line-height: var(--hd-leading-tight);
  }
  .hd-segmented__item {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hd-space-1);
    min-width: 44px;
    min-height: 44px;
    padding: var(--hd-space-2) var(--hd-space-3);
    border: none;
    border-inline-end: 1px solid var(--hd-border-medium);
    background: transparent;
    color: var(--hd-text-secondary);
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    cursor: pointer;
  }
  .hd-segmented__item:last-child {
    border-inline-end: none;
  }
  .hd-segmented__item:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--hd-surface-2);
    color: var(--hd-text-primary);
  }
  .hd-segmented__item[aria-pressed="true"],
  .hd-segmented__item[aria-selected="true"],
  .hd-segmented__item.is-active {
    background: color-mix(in srgb, var(--hd-accent-primary) 20%, transparent);
    color: var(--hd-accent-primary);
  }
  .hd-segmented__item:disabled,
  .hd-segmented__item[aria-disabled="true"] {
    color: var(--hd-text-tertiary);
    cursor: not-allowed;
    opacity: 0.6;
  }
  .hd-segmented__icon {
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    background: currentColor;
    -webkit-mask: var(--hd-segmented-icon-mask, none) center / contain no-repeat;
    mask: var(--hd-segmented-icon-mask, none) center / contain no-repeat;
  }
  .hd-segmented__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hd-searchbar {
    display: flex;
    align-items: center;
    gap: var(--hd-space-1);
    min-width: 0;
    color: var(--hd-text-primary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui);
    font-weight: var(--hd-weight-regular);
    line-height: var(--hd-leading-tight);
  }
  .hd-searchbar__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: var(--hd-space-2) var(--hd-space-3);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
    background: var(--hd-surface-1);
    color: var(--hd-text-primary);
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }
  .hd-searchbar__input:focus {
    outline: 2px solid var(--hd-focus-ring);
    outline-offset: 2px;
    border-color: var(--hd-border-strong);
  }
  .hd-searchbar__clear {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: var(--hd-space-1) var(--hd-space-2);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
    background: var(--hd-surface-2);
    color: var(--hd-text-secondary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui);
    font-weight: var(--hd-weight-medium);
    line-height: var(--hd-leading-tight);
    cursor: pointer;
  }
  .hd-searchbar__clear:hover:not(:disabled) {
    background: var(--hd-surface-3);
    color: var(--hd-text-primary);
  }

  .hd-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hd-space-1);
    min-width: 0;
    min-height: 44px;
    padding: var(--hd-space-1) var(--hd-space-2);
    border-block-end: 1px solid var(--hd-border-subtle);
    background: var(--hd-surface-base);
    color: var(--hd-text-secondary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-regular);
    line-height: var(--hd-leading-tight);
  }
  .hd-filter-row__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    padding: var(--hd-space-1) var(--hd-space-2);
    border-radius: var(--hd-radius-full);
    background: color-mix(in srgb, var(--hd-accent-success) 20%, var(--hd-surface-2));
    color: var(--hd-accent-success);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-caption);
    font-weight: var(--hd-weight-medium);
    line-height: var(--hd-leading-tight);
  }

  .hd-status {
    --hd-status-accent: var(--hd-text-tertiary);
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    padding: var(--hd-space-1) var(--hd-space-2);
    border-radius: var(--hd-radius-full);
    background: color-mix(in srgb, var(--hd-status-accent) 18%, var(--hd-surface-2));
    color: var(--hd-status-accent);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-caption);
    font-weight: var(--hd-weight-medium);
    line-height: var(--hd-leading-tight);
  }
  .hd-status--success { --hd-status-accent: var(--hd-accent-success); }
  .hd-status--warning { --hd-status-accent: var(--hd-accent-warning); }
  .hd-status--error   { --hd-status-accent: var(--hd-accent-error); }
  .hd-status--info    { --hd-status-accent: var(--hd-accent-primary); }

  /* Når .hd-emphasis--{item,spell,condition} ligger på <strong>, bevar bold-
   * weight (XPHB entry-name-mønster: <strong class="hd-emphasis--item">Name.</strong>).
   * Uden denne override ville .hd-emphasis--*'s 500-medium svække <strong>. */
  strong.hd-emphasis--item, strong.hd-emphasis--spell, strong.hd-emphasis--condition {
    font-weight: var(--hd-weight-bold);
  }
  /* Entry-name-utility til XPHB-mønster "<strong>Name.</strong> body" lister
   * når navnet IKKE er magic-item/spell/condition (fx action/feature-labels). */
  .hd-entry-name { color: var(--hd-accent-primary); }

  /* Horizontal scroll fade — venstre/højre kant fader ind/ud afhængigt af scroll.
   * JS sætter --_fl (venstre fade) og --_fr (højre fade) via attachScrollFade().
   * Bruges på overflow-x:auto striber (card-strips, level-tabs o.l.). */
  .hd-scroll-fade {
    --_fl: 0px;
    --_fr: 40px;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      black var(--_fl),
      black calc(100% - var(--_fr)),
      transparent 100%
    );
    mask-image: linear-gradient(to right,
      transparent 0,
      black var(--_fl),
      black calc(100% - var(--_fr)),
      transparent 100%
    );
  }
}