/**
 * ruler-destination.css — Tab[4] Regler player-facing compendium UI.
 *
 * Spec: docs/superpowers/specs/2026-05-23-tab4-regler-compendium-design.md §5+§9.
 * Plan: docs/plans/2026-05-23-tab4-regler-compendium-plan.md §C6.
 *
 * BEM: .hd-ruler__* (destination), .hd-ruler-detail__* (PR-B detail-view),
 *      .hd-ruler-modal__* (modal shell, PR-D).
 *
 * Token-only — ingen hardcoded farver, font-sizes, eller motion-værdier.
 * Light-tema håndteres automatisk via design-tokens.css [data-theme=light].
 *
 * @layer components — placeret efter base + tokens, før utilities + overrides.
 */

@layer components {

  /* ===== Root container ===== */

  .hd-ruler {
    container-type: inline-size;
    container-name: ruler;
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
    padding: var(--hd-space-2);
    /* Transparent root: let the .hd-player-content-mount parchment show through
     * (mirrors .hd-butik). The grid-cells/results/rows are the cards — the root
     * must not paint a flat opaque slab over the parchment. */
    background: transparent;
    color: var(--hd-text-primary);
    font-family: var(--hd-font-ui);
    /* The shared .hd-player-content-mount owns vertical scroll + the custom
     * surface rail. Keep Regler as expanding content so sticky headers and
     * touch/wheel gestures resolve against that one outer scroll owner. */
    min-height: 100%;
  }

  /* ===== Search bar (sticky-top) ===== */

  .hd-ruler__source-mode {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 0 0 var(--hd-space-1);
    background: transparent;
  }

  .hd-ruler__source-mode-control {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    width: 100%;
    min-height: 34px;
  }

  .hd-ruler__source-mode-control .hd-segmented__item {
    min-height: 34px;
    min-width: 0;
    padding: var(--hd-space-1) var(--hd-space-2);
    font-size: var(--hd-text-ui-small);
  }

  .hd-ruler__source-mode-control .hd-segmented__label {
    max-width: 100%;
  }

  .hd-ruler__search {
    position: sticky;
    top: calc(34px + var(--hd-space-1));
    z-index: 2;
    /* Transparent so the mount's parchment shows through (no opaque bar). */
    background: transparent;
    padding: var(--hd-space-1) 0;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
    /* Merged search bar: the back button, input, language toggle and filter
     * toggle sit flush as one continuous control (gap: 0). Only the outer edges
     * round; interior borders are collapsed (border-left/right: none on the
     * neighbours). */
    gap: 0;
    align-items: stretch;
  }
  .hd-ruler__search-input {
    width: 100%;
    /* min-height (not fixed height) so the field grows if the zoomed,
     * iOS-floored input font (max(16px, --hd-text-body) = 32px at 2×) needs
     * more than the 44px touch-target line-box. */
    min-height: 44px;
    padding-block: var(--hd-space-1);
    padding-inline: var(--hd-space-3);
    border: 1px solid var(--hd-border-subtle);
    /* Rounded LEFT only by default (top view: back button hidden, so the input
     * is the leftmost element); flat right (toggles merge on the right). When the
     * back button IS shown it carries the left rounding instead — see the
     * adjacency rule below. */
    border-radius: var(--hd-radius-sm) 0 0 var(--hd-radius-sm);
    background: var(--hd-surface-1);
    color: var(--hd-text-primary);
    font-family: inherit;
    font-size: var(--hd-text-body);
    transition: border-color var(--hd-motion-fast);
  }
  /* When the back button is visible it is the leftmost element and owns the left
   * rounding; flatten the input's left corners so the two merge seamlessly. */
  .hd-ruler__back:not([hidden]) + .hd-ruler__search-input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
  }
  .hd-ruler__search-input::placeholder {
    color: var(--hd-text-tertiary);
  }
  .hd-ruler__search-input:focus {
    border-color: var(--hd-accent-primary);
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: -2px;
  }

  .hd-ruler__search-mode {
    display: inline-flex;
    min-height: 44px;
    border: 1px solid var(--hd-border-subtle);
    border-left: none;
    border-radius: 0;
    background: var(--hd-surface-1);
    overflow: hidden;
  }
  .hd-ruler__search-mode-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--hd-space-2);
    border: 0;
    border-left: 1px solid var(--hd-border-subtle);
    background: transparent;
    color: var(--hd-text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: var(--hd-text-ui-small);
  }
  .hd-ruler__search-mode-btn:first-child {
    border-left: 0;
  }
  .hd-ruler__search-mode-btn--active {
    background: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
  }
  .hd-ruler__search-mode-btn:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: -2px;
  }

  /* Compact single-button language toggle: shows only the current state and
   * cycles da → mixed → en → da on tap. Per-state colour cue reuses AAA-contrast
   * (both themes) accent tokens via documented local aliases — da=success-green,
   * mixed(da+en)=the cool slate/pale blue used for quest-rejse, en=error-red.
   * None carry a conflicting meaning in this header; text stays --hd-text-on-accent
   * which flips opposite the accents per theme (high contrast in both). */
  .hd-ruler__language-toggle {
    --hd-ruler-lang-da: var(--hd-accent-success);
    --hd-ruler-lang-mixed: var(--hd-quest-rejse);
    --hd-ruler-lang-en: var(--hd-accent-error);
    /* Stack all three state labels in a single grid cell so the button is sized
     * by the WIDEST label (DA+EN) regardless of the active state — it stays a
     * fixed width and never reflows the flexible 1fr search field as the state
     * cycles. Width = widest label + the symmetric --hd-space-2 padding below
     * (harmonic margin), with the 44px floor for the WCAG touch-target. */
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px; /* WCAG 2.5.5 touch-target */
    /* Interior element of the merged bar — collapse the left border against the
     * input and square the corners; the filter toggle to its right owns the
     * outer right rounding. */
    border: 1px solid var(--hd-border-subtle);
    border-left: none;
    border-radius: 0;
    background: var(--hd-surface-1);
    color: var(--hd-text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: var(--hd-text-ui);
    font-weight: var(--hd-weight-bold);
    padding: 0 var(--hd-space-2);
    transition: background var(--hd-motion-fast), color var(--hd-motion-fast);
  }
  /* Every label shares the same grid cell; only the active one is visible.
   * The hidden siblings still occupy space, reserving the widest width. */
  .hd-ruler__language-label {
    grid-area: 1 / 1;
    visibility: hidden;
    white-space: nowrap;
    line-height: var(--hd-leading-tight);
  }
  .hd-ruler__language-label--active {
    visibility: visible;
  }
  .hd-ruler__language-toggle:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }

  .hd-ruler__language-toggle--da {
    background: var(--hd-ruler-lang-da);
    color: var(--hd-text-on-accent);
    border-color: var(--hd-ruler-lang-da);
  }
  .hd-ruler__language-toggle--mixed {
    background: var(--hd-ruler-lang-mixed);
    color: var(--hd-text-on-accent);
    border-color: var(--hd-ruler-lang-mixed);
  }
  .hd-ruler__language-toggle--en {
    background: var(--hd-ruler-lang-en);
    color: var(--hd-text-on-accent);
    border-color: var(--hd-ruler-lang-en);
  }

  /* ===== Filter-toggle (gear) button ===== */

  .hd-ruler__filter-toggle {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    /* Rightmost element of the merged bar — rounded RIGHT corners only, flush
     * against the language toggle on its left. */
    border: 1px solid var(--hd-border-subtle);
    border-left: none;
    border-radius: 0 var(--hd-radius-sm) var(--hd-radius-sm) 0;
    background: var(--hd-surface-1);
    font-size: var(--hd-text-h3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hd-text-secondary);
  }
  .hd-ruler__filter-toggle:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
    border-radius: var(--hd-radius-sm);
  }

  .hd-ruler__filter-count {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
    font-size: var(--hd-text-micro);
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.2rem;
    pointer-events: none;
  }

  .hd-ruler__compare-btn {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 var(--hd-space-2);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm);
    background: var(--hd-surface-1);
    color: var(--hd-accent-primary);
    font-size: var(--hd-text-ui-small);
    display: inline-flex;
    align-items: center;
  }
  .hd-ruler__compare-btn:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }
  .hd-ruler__compare {
    padding: var(--hd-space-2) 0;
  }
  .hd-ruler__compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hd-space-3);
  }
  .hd-ruler__compare-card {
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-md);
    background: var(--hd-surface-1);
    padding: var(--hd-space-3);
    min-width: 0;
  }
  .hd-ruler__compare-title {
    margin: 0 0 var(--hd-space-1);
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h5);
  }
  .hd-ruler__compare-meta {
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-ui-small);
    margin-bottom: var(--hd-space-2);
  }
  .hd-ruler__compare-body {
    overflow-wrap: anywhere;
  }
  @media (max-width: 720px) {
    .hd-ruler__compare-grid {
      grid-template-columns: 1fr;
    }
    .hd-ruler__search {
      grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
    }
    .hd-ruler__search-mode {
      grid-column: 3 / -1;
      border-left: 1px solid var(--hd-border-subtle);
      border-radius: var(--hd-radius-sm);
      margin-top: var(--hd-space-1);
    }
  }

  /* ===== Back button (outer — state-level) ===== */

  .hd-ruler__home,
  .hd-ruler__back {
    justify-self: start;
    justify-content: center;
    /* Square (rounded-square): equal 44×44 instead of the inherited
     * radius-full pill, so the back affordance reads as a distinct icon button. */
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    /* Leftmost element of the merged bar — rounded LEFT corners only, flush
     * against the input on the right. */
    border: 1px solid var(--hd-border-subtle);
    border-right: none;
    border-radius: var(--hd-radius-sm) 0 0 var(--hd-radius-sm);
    background: var(--hd-surface-1);
    color: var(--hd-text-secondary);
  }
  .hd-ruler__home {
    border-radius: var(--hd-radius-sm) 0 0 var(--hd-radius-sm);
  }
  .hd-ruler__home:not([hidden]) + .hd-ruler__back:not([hidden]) {
    border-radius: 0;
  }
  .hd-ruler__home:active,
  .hd-ruler__back:active { opacity: 0.6; }
  .hd-ruler__home:focus-visible,
  .hd-ruler__back:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }

  /* ===== View / detail-mount containers ===== */

  .hd-ruler__view {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
  }
  .hd-ruler__detail-mount {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* ===== Grid state ===== */

  .hd-ruler__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--hd-space-2);
  }
  .hd-ruler__grid-cell {
    min-height: 88px;
    padding: var(--hd-space-3);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-md);
    background: var(--hd-surface-1);
    color: var(--hd-text-primary);
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--hd-space-1);
    cursor: pointer;
    transition: background var(--hd-motion-fast), border-color var(--hd-motion-fast);
  }
  .hd-ruler__grid-cell:hover {
    background: var(--hd-surface-2);
    border-color: var(--hd-border-medium);
  }
  .hd-ruler__grid-cell:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }
  .hd-ruler__grid-cell-label {
    font-size: var(--hd-text-ui);
    text-align: center;
  }
  .hd-ruler__grid-cell-chips {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
    min-width: 0;
  }
  .hd-ruler__grid-cell-chip {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--hd-text-caption);
    line-height: var(--hd-leading-snug);
    padding: 1px 5px;
  }
  .hd-ruler__grid-cell-count {
    font-size: var(--hd-text-caption);
    color: var(--hd-text-tertiary);
  }
  .hd-ruler__grid-cell--disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .hd-ruler__grid-cell--disabled:hover {
    background: var(--hd-surface-1);
    border-color: var(--hd-border-subtle);
  }

  /* Forside bands stay a clean 3-wide grid at all widths. */
  .hd-ruler__view .hd-ruler__grid--forside {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Forside: one category block per row, line-break between bands (no headings). */
  .hd-ruler__grid-bands { display: flex; flex-direction: column; gap: var(--hd-space-4); }
  .hd-ruler__grid-band { /* inherits grid from .hd-ruler__grid; auto-fill columns via container-queries */ }

  /* 24% category tinting over surface-1 (both themes; overlay layer, not gradient-url). */
  .hd-ruler__grid-band .hd-ruler__grid-cell {
    background-color: var(--hd-surface-1);
    background-image: linear-gradient(rgb(var(--cat, 201 169 106) / 0.24) 0 0);
  }
  .hd-ruler__grid-band .hd-ruler__grid-cell:hover {
    background-image: linear-gradient(rgb(var(--cat, 201 169 106) / 0.32) 0 0);
  }

  /* Icon as CSS mask in full category colour (Safari 16.6: -webkit-mask required). */
  .hd-ruler__grid-cell-icon {
    width: var(--hd-text-h3); height: var(--hd-text-h3);
    background-color: rgb(var(--cat, 201 169 106));
    -webkit-mask: var(--icon-url, none) no-repeat center / contain;
    mask: var(--icon-url, none) no-repeat center / contain;
  }
  .hd-ruler__grid-cell-icon--registry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--cat, 201 169 106));
    background-color: transparent;
    -webkit-mask: none;
    mask: none;
  }
  .hd-ruler__grid-cell-icon-glyph {
    --hd-player-icon-size: 100%;
  }
  .hd-ruler__browse {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
    min-width: 0;
  }
  .hd-ruler__grid--browse {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  }
  .hd-ruler__grid-cell--browse {
    min-height: 132px;
    aspect-ratio: 1 / 1.02;
  }
  .hd-ruler__grid-cell-image {
    width: 48px;
    height: 48px;
	    flex: 0 0 auto;
	    object-fit: cover;
	    border-radius: var(--hd-radius-sm);
	    border: 1px solid rgb(var(--cat, 201 169 106) / 0.45);
	    background: var(--hd-surface-2);
	  }
	  .hd-ruler__grid-cell-image--token {
	    border-radius: 50%;
	  }

	  /* Always-on category/type heading under the search field (nav + list views). */
  .hd-ruler__view-title {
    margin: 0;
    color: var(--hd-text-primary);
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h5);
    font-weight: var(--hd-weight-semibold);
  }
  /* Tinted category header band (spec §5, choice B): category colour sits as a
   * tinted band behind the list title only — not the whole view. --cat is the
   * category RGB triplet (set in JS); golden fallback matches the forside. The
   * tint is a gradient overlay above the surface colour so it reads in both
   * themes (see feedback_css_multilayer_bg_vs_gradient_url). */
  .hd-ruler__view-title--tinted {
    padding: var(--hd-space-1) var(--hd-space-2);
    border-radius: var(--hd-radius-sm);
    background-color: var(--hd-surface-1);
    background-image: linear-gradient(rgb(var(--cat, 201 169 106) / 0.24) 0 0);
    border: 1px solid rgb(var(--cat, 201 169 106) / 0.4);
  }

  .hd-ruler__nav-view {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
  }

  .hd-ruler__category-groups {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
    margin-top: var(--hd-space-2);
  }

  .hd-ruler__category-group {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
    min-width: 0;
  }

  .hd-ruler__category-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hd-space-2);
    border-bottom: 1px solid var(--hd-border-subtle);
    padding-bottom: var(--hd-space-1);
  }

  .hd-ruler__category-title,
  .hd-ruler__group-title {
    margin: 0;
    color: var(--hd-text-primary);
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h5);
    font-weight: var(--hd-weight-semibold);
  }

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

  .hd-ruler__category-types,
  .hd-ruler__group-types {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-1);
    min-width: 0;
  }

  .hd-ruler__category-type {
    min-height: 44px; /* WCAG 2.5.5 touch-target */
    padding: 0 var(--hd-space-2);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-full);
    background: var(--hd-surface-1);
    color: var(--hd-text-primary);
    font-family: inherit;
    font-size: var(--hd-text-ui-small);
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    cursor: pointer;
    transition: background var(--hd-motion-fast), border-color var(--hd-motion-fast);
  }

  .hd-ruler__category-type:hover {
    background: var(--hd-surface-2);
    border-color: var(--hd-border-medium);
  }

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

  .hd-ruler__category-type-emoji {
    line-height: var(--hd-leading-icon);
  }

  .hd-ruler__group-view {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
  }

  /* ===== Recent chips ===== */

  .hd-ruler__recent {
    margin-top: var(--hd-space-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hd-space-1);
  }
  .hd-ruler__recent-heading {
    flex: 1 0 100%; /* own line above the inline-wrapping chips */
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .hd-ruler__recent-chip {
    min-height: 44px; /* WCAG 2.5.5 touch-target */
    padding: 0 var(--hd-space-3);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-full);
    background: var(--hd-surface-1);
    color: var(--hd-text-primary);
    font-family: inherit;
    font-size: var(--hd-text-ui);
    cursor: pointer;
    transition: background var(--hd-motion-fast);
  }
  .hd-ruler__recent-chip:hover { background: var(--hd-surface-2); }

  /* ===== Search results state ===== */

  .hd-ruler__search-results {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-1);
  }
  .hd-ruler__result {
    min-height: 56px;
    padding: var(--hd-space-3);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm);
    background: var(--hd-surface-1);
    color: var(--hd-text-primary);
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    text-align: left;
    cursor: pointer;
    transition: background var(--hd-motion-fast);
  }
  .hd-ruler__result-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: var(--hd-radius-sm);
    border: 1px solid var(--hd-border-subtle);
    background: var(--hd-surface-2);
  }
  .hd-ruler__result:hover  { background: var(--hd-surface-2); }
  .hd-ruler__result:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }
  .hd-ruler__result-name {
    flex: 1 1 auto;
    font-size: var(--hd-text-body);
    color: var(--hd-text-primary);
  }
  .hd-ruler__image-badge {
    flex: 0 0 auto;
    /* Glyph circle scales with content-zoom so the badge glyph stays centred
     * at 2×. 22px at zoom 1 (byte-identical). */
    width: calc(22px * var(--hd-player-content-zoom, 1));
    height: calc(22px * var(--hd-player-content-zoom, 1));
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hd-accent-primary);
    font-size: var(--hd-text-caption);
    line-height: var(--hd-leading-icon);
  }

  /* Type-pille — color via activity-token per content-type.
     Mapping: spec §9 visual differentiation. */
  .hd-ruler__result-type-pill,
  .hd-ruler__row[data-type] .hd-ruler__row-type-pill {
    padding: 2px var(--hd-space-2);
    border-radius: var(--hd-radius-sm);
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-on-accent);
    white-space: nowrap;
    background: var(--hd-accent-primary);
  }
  .hd-ruler__result-type-pill[data-type="spell"]            { background: var(--hd-activity-cast); }
  .hd-ruler__result-type-pill[data-type="monster"]          { background: var(--hd-activity-damage); }
  .hd-ruler__result-type-pill[data-type="feat"]             { background: var(--hd-activity-attack); }
  .hd-ruler__result-type-pill[data-type="item"]             { background: var(--hd-activity-forward); }
  .hd-ruler__result-type-pill[data-type="weapon"]           { background: var(--hd-activity-order); }
  .hd-ruler__result-type-pill[data-type="armor"]            { background: var(--hd-activity-save); }
  .hd-ruler__result-type-pill[data-type="race"]             { background: var(--hd-activity-summon); }
  .hd-ruler__result-type-pill[data-type="background"]       { background: var(--hd-activity-utility); }
  .hd-ruler__result-type-pill[data-type="class"]            { background: var(--hd-activity-check); }
  .hd-ruler__result-type-pill[data-type="subclass"]         { background: var(--hd-activity-enchant); }
  .hd-ruler__result-type-pill[data-type="optionalfeature"]  { background: var(--hd-activity-heal); }
  .hd-ruler__result-type-pill[data-type="trait"]            { background: var(--hd-activity-heal); }
  .hd-ruler__result-type-pill[data-type="condition"]        { background: var(--hd-activity-damage); }

  /* ===== List state ===== */

  .hd-ruler__list {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
  }

  /* ===== Desktop reading dock (spec §4/§8) ===== */
  /* When an element is open on a wide panel the list stays on the left (filling
   * the remaining width with 1→4 auto-fill columns) and the detail reads in a
   * constant 340px dock on the right. Below the threshold openDetailLocal takes
   * the fullscreen path instead and this modifier is never applied. */
  .hd-ruler__list--docked {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--hd-space-2);
  }
  .hd-ruler__list--docked .hd-ruler__list-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
  }
  .hd-ruler__dock-col {
    flex: 0 0 21.25rem; /* 340px constant dock (spec §8) */
    min-width: 0;
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: calc(100vh - var(--player-top-bar-height, 48px));
    overflow-y: auto;
  }
  /* Active row gets a hint of the category colour while its element reads in the
   * dock (spec §5). --cat is inherited from the docked list root (set in JS). */
  .hd-ruler__list--docked .hd-ruler__row[aria-current="true"] {
    background-image: linear-gradient(rgb(var(--cat, 201 169 106) / 0.10) 0 0);
  }

  /* ===== Open-filter placement: left rail (wide) vs top-block (narrow) ===== */
  /* Binary filter (chipsCollapsed). When open AND wide enough
   * (_filterRailFitsWidth, spec §6/§8) the full drawer rails to the left of the
   * list while the title/sort stay full-width above; below the threshold the
   * drawer stays a top-block in normal flow (no railed wrapper). The rail only
   * ever sits beside the list — never the dock column. */
  .hd-ruler__list-body--railed {
    display: flex;
    align-items: flex-start;
    gap: var(--hd-space-2);
  }
  .hd-ruler__list-body--railed > .hd-ruler__filter-rail {
    flex: 0 0 12.5rem; /* 200px filter rail (spec §6) */
    min-width: 0;
  }
  .hd-ruler__list-body--railed > .hd-ruler__list-col {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
  }
  /* In the rail the drawer drops its top-block margins and fills the rail width. */
  .hd-ruler__filter-rail .hd-ruler__filter-drawer {
    margin: 0;
  }

  .hd-ruler__filter-chips {
    display: flex;
    gap: var(--hd-space-1);
    overflow-x: auto;
    padding-bottom: var(--hd-space-1);
    scrollbar-width: thin;
  }
  .hd-ruler__filter-drawer {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
    margin: var(--hd-space-2) 0 var(--hd-space-3);
    padding: var(--hd-space-2);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-md);
    background: var(--hd-surface-1);
  }
  .hd-ruler__filter-drawer[hidden] {
    display: none;
  }
  .hd-ruler__filter-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hd-space-2);
    min-height: 44px;
  }
  .hd-ruler__filter-summary {
    font-size: var(--hd-ruler-filter-summary-size, 0.86rem);
    color: var(--hd-text-muted, var(--hd-text-secondary));
  }
  .hd-ruler__filter-reset {
    min-height: 44px;
    padding: 0 var(--hd-space-3);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  .hd-ruler__filter-reset:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }
  .hd-ruler__filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-1);
  }
  .hd-ruler__filter-group-title {
    margin: 0;
    font-size: var(--hd-ruler-filter-group-title-size, 0.76rem);
    font-weight: var(--hd-weight-bold);
    text-transform: uppercase;
    color: var(--hd-text-muted, var(--hd-text-secondary));
  }
  .hd-ruler__filter-group-title-icon {
    --hd-player-icon-size: 1em;
    vertical-align: -0.14em;
  }
  .hd-ruler__source-origin-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-1);
    align-items: center;
  }
  .hd-ruler__source-origin-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    min-height: 32px;
    padding: 0 var(--hd-space-2);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-full);
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-tight);
    white-space: nowrap;
  }
  .hd-ruler__source-origin-icon {
    display: inline-flex;
    width: 1.1em;
    height: 1.1em;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.1em;
    color: rgb(var(--cat, 201 169 106));
  }
  .hd-ruler__source-origin-glyph {
    --hd-player-icon-size: 1.1em;
  }
  .hd-ruler__filter-drawer .hd-ruler__filter-chips,
  .hd-ruler__filter-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-1);
    overflow-x: visible;
    padding-bottom: 0;
  }
  .hd-ruler__filter-chip--all {
    border-style: dashed;
  }
  .hd-ruler__filter-chip[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .hd-ruler__filter-chip {
    min-height: 44px; /* WCAG 2.5.5 touch-target */
    padding: 0 var(--hd-space-3);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-full);
    background: transparent;
    color: var(--hd-text-primary);
    font-family: inherit;
    font-size: var(--hd-text-ui);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--hd-motion-fast), color var(--hd-motion-fast);
  }
  .hd-ruler__filter-chip:not([disabled]):hover {
    background: var(--hd-surface-1);
    border-color: var(--hd-border-medium);
  }
  .hd-ruler__filter-chip--active {
    background: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
    border-color: var(--hd-accent-primary);
  }
  .hd-ruler__filter-chip:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }
  /* Attribute chips (e.g. Billeder) follow the type-selector chips. */
  .hd-ruler__filter-chip--attr {
    margin-inline-start: var(--hd-space-2);
  }

  /* Icon chips (e.g. class portrait pills). */
  .hd-ruler__filter-chip--icon {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    padding-inline-start: var(--hd-space-1);
  }
  .hd-ruler__chip-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }
  /* Subcategory chip glyph (spec §3): game-icons.net SVG as a currentColor mask
   * tinted in the category colour (--cat from the drawer; golden fallback).
   * Safari 16.6: -webkit-mask required alongside mask. */
  .hd-ruler__chip-mask {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
    background-color: rgb(var(--cat, 201 169 106));
    -webkit-mask: var(--icon-url, none) no-repeat center / contain;
    mask: var(--icon-url, none) no-repeat center / contain;
  }
  .hd-ruler__chip-mask--registry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    -webkit-mask: none;
    mask: none;
    color: rgb(var(--cat, 201 169 106));
  }
  .hd-ruler__chip-mask-glyph {
    --hd-player-icon-size: 1.1em;
  }
  /* On an active (accent-filled) chip the glyph inverts to the on-accent colour. */
  .hd-ruler__filter-chip--active .hd-ruler__chip-mask {
    background-color: var(--hd-text-on-accent);
  }
  .hd-ruler__filter-chip--active .hd-ruler__chip-mask--registry {
    background-color: transparent;
    color: var(--hd-text-on-accent);
  }
  .hd-ruler__chip-label {
    vertical-align: middle;
  }

  /* Sort row (dropdown + asc/desc button) shown for types with >1 sort option. */
  .hd-ruler__sort-row {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    padding: var(--hd-space-1) var(--hd-space-2);
  }
  .hd-ruler__sort-label {
    font-size: var(--hd-text-ui);
    color: var(--hd-text-secondary);
    white-space: nowrap;
  }
  .hd-ruler__sort-by {
    padding: 0.25rem 0.5rem;
    border-radius: var(--hd-radius-sm, 0.25rem);
    border: 1px solid var(--hd-border-subtle);
    background: var(--hd-bg-1, var(--hd-surface-1));
    color: var(--hd-text-primary);
    font-family: inherit;
    font-size: var(--hd-text-ui);
  }
  .hd-ruler__sort-dir {
    min-width: 44px; /* WCAG 2.5.5 touch-target */
    min-height: 44px;
    padding: 0.25rem 0.5rem;
    border-radius: var(--hd-radius-sm, 0.25rem);
    border: 1px solid var(--hd-border-subtle);
    background: var(--hd-bg-1, var(--hd-surface-1));
    color: var(--hd-text-primary);
    font-family: inherit;
    font-size: var(--hd-text-ui);
    cursor: pointer;
  }
  .hd-ruler__sort-dir:hover {
    background: var(--hd-surface-1);
    border-color: var(--hd-border-medium);
  }
  .hd-ruler__sort-dir:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }

  /* Type/sub-type badge on rows in composite (filter-list) categories. */
  .hd-ruler__row-badge {
    align-self: flex-start;
    padding: 1px var(--hd-space-1);
    border-radius: var(--hd-radius-sm);
    font-size: var(--hd-text-caption);
    color: var(--hd-text-tertiary);
    background: var(--hd-surface-2);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .hd-ruler__list-rows {
    /* Auto-fill: rows fill their own width with 1→4 columns (card-min 260px),
     * independent of whether a dock column is present (spec §4/§8). */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr)); /* 260px card-min */
    gap: var(--hd-space-1);
    min-height: 0;
    align-content: start;
  }
	  .hd-ruler__row {
    position: relative;
    min-height: 56px;
    padding: var(--hd-space-3);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm);
    background: var(--hd-surface-1);
    color: var(--hd-text-primary);
    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    cursor: pointer;
    transition: background var(--hd-motion-fast);
    content-visibility: auto;
	    contain-intrinsic-size: 56px;
	  }
	  .hd-ruler__row--with-icon {
	    padding-left: calc(var(--hd-space-3) + 40px);
	  }
	  .hd-ruler__row-icon {
	    position: absolute;
	    left: var(--hd-space-3);
	    top: var(--hd-space-3);
	    width: 32px;
	    height: 32px;
	    object-fit: cover;
	    border-radius: var(--hd-radius-sm);
	    border: 1px solid var(--hd-border-subtle);
	    background: var(--hd-surface-2);
	  }
	  .hd-ruler__row:hover { background: var(--hd-surface-2); }
  .hd-ruler__row:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }
  .hd-ruler__row-name {
    font-size: var(--hd-text-body);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-primary);
  }
  .hd-ruler__row-title-icon {
    --hd-player-icon-size: 0.95em;
    display: inline-flex;
    margin-right: 0.32em;
    color: currentColor;
    vertical-align: -0.1em;
  }
  .hd-ruler__row-meta {
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-tertiary);
  }
  .hd-ruler__row-meta-part {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  .hd-ruler__row-meta-icon-glyph {
    --hd-player-icon-size: 1em;
  }
  .hd-ruler__row .hd-ruler__image-badge {
    position: absolute;
    right: var(--hd-space-3);
    top: var(--hd-space-3);
  }
  .hd-ruler__list-sentinel {
    height: 1px;
    flex-shrink: 0;
    visibility: hidden;
    grid-column: 1 / -1; /* span full width so the infinite-scroll sentinel sits below the last row */
  }

  /* ===== Empty / loading shared ===== */

  .hd-ruler__loading,
  .hd-ruler__empty {
    padding: var(--hd-space-4);
    text-align: center;
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-ui);
  }
  .hd-ruler__loading {
    font-style: italic;
  }
  .hd-ruler__empty-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-inline-start: var(--hd-space-2);
    padding: 0 var(--hd-space-3);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm);
    background: transparent;
    color: var(--hd-text-primary);
    font: inherit;
    cursor: pointer;
  }
  .hd-ruler__empty-action:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }

  .hd-ruler__empty--snapshot {
    max-width: 42rem;
    margin: var(--hd-space-4) auto;
    border: 1px dashed var(--hd-border-medium);
    border-radius: var(--hd-radius-md);
    background: var(--hd-surface-1);
  }

  /* ===== Detail-view pass-through (RulerDetailView from PR-B) ===== */

  .hd-ruler-detail__header {
    display: flex;
    align-items: center;
    gap: var(--hd-space-3, 0.75rem);
    padding: var(--hd-space-2) 0;
    border-bottom: 1px solid var(--hd-border-subtle);
    /* Transparent, non-sticky: the title sits directly on the mount parchment
     * (no opaque slab). The search bar above keeps a sticky back button, so the
     * header does not need to stick — and a transparent sticky bar would let
     * scrolling body content show through behind the title. */
    background: transparent;
    flex-wrap: wrap;
  }

  /* Edition badge — A7: shown after title when item._edition is '2024' or '2014'.
   * Colors via --hd-success-*/--hd-warning-* tokens defined in design-tokens.css. */
  .hd-ruler-detail__edition-badge {
    display: inline-block;
    padding: var(--hd-space-1, 0.25rem) var(--hd-space-2, 0.5rem);
    border-radius: var(--hd-radius-pill, 999px);
    font-size: var(--hd-text-caption);
    font-weight: var(--hd-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
  }
  .hd-ruler-detail__edition-badge--2024 {
    background: var(--hd-success-100);
    color: var(--hd-success-700);
  }
  .hd-ruler-detail__edition-badge--2014 {
    background: var(--hd-warning-100);
    color: var(--hd-warning-700);
  }
  .hd-ruler-detail__back {
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--hd-accent-primary);
    font-size: var(--hd-text-h4);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
    border-radius: var(--hd-radius-sm);
    transition: opacity var(--hd-motion-fast), background var(--hd-motion-fast);
  }
  .hd-ruler-detail__back:hover  { background: var(--hd-surface-1); }
  .hd-ruler-detail__back:active { opacity: 0.6; }
  .hd-ruler-detail__title {
    margin: 0;
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h4);
    color: var(--hd-text-primary);
    flex: 1 1 auto;
  }
  /* Stacked element-header (spec §7): a category crumb (smaller, dimmed) sits
   * ABOVE the element title — same pattern in the dock and fullscreen; only the
   * title scale differs (dock hd-text--md vs fullscreen __title h4). */
  .hd-ruler-dock__stack,
  .hd-ruler-detail__stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .hd-ruler-dock__crumb,
  .hd-ruler-detail__crumb {
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-tertiary);
    letter-spacing: 0.02em;
  }
  .hd-ruler-detail__source-cover {
    width: 42px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--hd-radius-sm);
    border: 1px solid var(--hd-border-subtle);
    box-shadow: var(--hd-shadow-sm);
    flex: 0 0 auto;
  }
  .hd-ruler-detail__body {
    padding: var(--hd-space-3) 0;
    max-width: var(--hd-narrative-max-width); /* WCAG 1.4.8 — ≤65ch læselinje på brede viewports */
    font-size: var(--hd-text-body);
    line-height: var(--hd-leading-relaxed);
    color: var(--hd-text-primary);
  }
  .hd-ruler-detail__image-frame {
    display: block;
    width: min(100%, 400px);
    margin: 0 0 var(--hd-space-3);
  }
  .hd-ruler-detail__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--hd-radius-md);
    border: 1px solid var(--hd-border-subtle);
    background: var(--hd-surface-1);
    opacity: 1;
    filter: none;
  }
  /* Clickable full-size affordance wrapping the thumbnail. */
  .hd-ruler-detail__image-link {
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--hd-surface-1);
    cursor: zoom-in;
    border-radius: var(--hd-radius-md);
    overflow: hidden;
  }
  .hd-ruler-detail__image-link:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }
  .hd-ruler-detail__image-expand-hint {
    position: absolute;
    right: var(--hd-space-1);
    bottom: var(--hd-space-1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--hd-radius-sm);
    background: var(--hd-surface-1);
    border: 1px solid var(--hd-border-subtle);
    color: var(--hd-text-primary);
    font-size: var(--hd-text-body);
    line-height: var(--hd-leading-icon);
    pointer-events: none;
  }
  /* Full-size image shown inside the shared ModalManager modal. */
  .hd-ruler-image-modal__figure {
    margin: 0;
    display: flex;
    justify-content: center;
  }
  .hd-ruler-image-modal__img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--hd-radius-md);
  }
  .hd-ruler-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-1);
    margin: 0 0 var(--hd-space-3);
  }
  .hd-ruler-detail__meta-item {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    min-height: 30px;
    padding: 0 var(--hd-space-2);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm);
    background: var(--hd-surface-1);
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-ui-small);
  }
  .hd-ruler-detail__meta-icon {
    --hd-player-icon-size: 1.05em;
    color: currentColor;
    flex: 0 0 auto;
  }
  .hd-ruler-detail__meta-label {
    color: var(--hd-text-tertiary);
  }
  .hd-ruler-detail__mechanics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-1);
    margin: 0 0 var(--hd-space-3);
  }
  .hd-ruler-detail__mechanic {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem;
    align-items: baseline;
    max-width: 100%;
    padding: var(--hd-space-1) var(--hd-space-2);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm);
    background: var(--hd-surface-1);
    font-size: var(--hd-text-ui-small);
  }
  .hd-ruler-detail__mechanic-label {
    color: var(--hd-text-tertiary);
  }
  .hd-ruler-detail__mechanic-value {
    color: var(--hd-text-secondary);
    overflow-wrap: anywhere;
  }
  /* Bottom-of-page source credit: full source title in italic, separated from
   * the content above by an empty line (the top margin = one blank line). */
  .hd-ruler-detail__source-credit {
    margin: var(--hd-space-5) 0 0;
    font-style: italic;
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-ui-small);
  }
  .hd-ruler-detail__section-title {
    margin: var(--hd-space-4) 0 var(--hd-space-2);
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h5);
    color: var(--hd-text-primary);
  }
  .hd-ruler-detail__json {
    white-space: pre-wrap;
    font-family: var(--hd-font-mono);
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-secondary);
  }

  /* ===== Class-feature accordion (PR-C C5/C6 — <details>/<summary>) ===== */

  .hd-ruler-detail__feature {
    margin: 2px 0;
  }
  .hd-ruler-detail__feature-summary {
    cursor: pointer;
    padding: 4px 0;
    font-weight: var(--hd-weight-bold);
  }
  .hd-ruler-detail__feature-body {
    padding: 4px 0 8px 12px;
  }
  .hd-ruler-detail__feature-level {
    margin-top: 8px;
  }
  .hd-ruler-detail__feature-stub {
    padding: 2px 0;
    color: var(--hd-text-muted, var(--hd-text-secondary));
  }

  /* ===== Subclass / optionalfeature badge row ===== */

  .hd-ruler-detail__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0;
  }
  /* comp-link provides no CSS — all badge visuals live here.
   * Pill style mirrors __result-type-pill at a smaller scale. */
	  .hd-ruler-detail__badge {
	    display: inline-flex;
	    align-items: center;
	    padding: 2px var(--hd-space-2);
	    border: 1px solid var(--hd-border-subtle);
	    border-radius: var(--hd-radius-sm);
	    background: var(--hd-surface-1);
	    color: var(--hd-accent-primary);
	    font: inherit;
	    font-size: var(--hd-text-ui-small);
	    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    transition: background var(--hd-motion-fast), border-color var(--hd-motion-fast);
  }
  .hd-ruler-detail__badge:hover {
    background: var(--hd-surface-2);
    border-color: var(--hd-border-medium);
  }

  /* ===== Modal shell (used by RulerDetailView.showModal, PR-D) ===== */

  .hd-ruler-modal:not(.hd-modal) {
    border: none;
    border-radius: var(--hd-radius-lg);
    background: var(--hd-surface-base);
    color: var(--hd-text-primary);
    font-family: var(--hd-font-ui);
    padding: 0;
    max-width: 90vw;
    max-height: 96vh !important;
    max-height: min(96vh, 96dvh) !important;
    width: min(100%, 90vw);
  }
  .hd-ruler-modal.hd-ruler-modal--expand:not(.hd-modal) {
    max-height: 96vh !important;
    max-height: min(96vh, 96dvh) !important;
  }
  .hd-ruler-modal.hd-ruler-modal--expand.hd-modal {
    max-height: 96vh !important;
    max-height: min(96vh, 96dvh) !important;
  }
  .hd-ruler-modal--nav-resizing {
    transition:
      width var(--hd-motion-normal) var(--hd-ease-in-out-cubic),
      height var(--hd-motion-normal) var(--hd-ease-in-out-cubic);
    will-change: width, height;
  }
  .hd-ruler-modal:not(.hd-modal)::backdrop {
    background: var(--hd-surface-overlay);
  }
  .hd-ruler-modal__header {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    padding: var(--hd-space-3);
    border-bottom: 1px solid var(--hd-border-subtle);
  }
  .hd-ruler-modal__header--with-back {
    justify-content: flex-start;
    gap: var(--hd-space-2);
  }
  .hd-ruler-modal__header--with-back > .hd-ruler-modal__title-shell {
    flex: 1 1 auto;
    min-width: 0;
  }
  .hd-ruler-modal__close {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-h4);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
    border-radius: var(--hd-radius-sm);
    transition: background var(--hd-motion-fast);
  }
  .hd-ruler-modal__close:hover { background: var(--hd-surface-1); }
  /* F3 — back-button: navigér tilbage gennem regel-opslag i modal/sheet (venstre
   * i headeren — indsat som første barn). Skjules ved stack-dybde 0 via JS. */
  .hd-ruler-modal__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-h4);
    line-height: var(--hd-leading-icon);
    cursor: pointer;
    border-radius: var(--hd-radius-sm);
    transition: background var(--hd-motion-fast);
  }
  .hd-ruler-modal__back:hover { background: var(--hd-surface-1); }
  .hd-ruler-modal__title {
    margin: 0;
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h4);
    color: var(--hd-text-primary);
    flex: 1 1 auto;
  }
  .hd-ruler-modal__subtitle {
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-ui-small);
  }
  .hd-ruler-modal__body {
    padding: var(--hd-space-3);
    overflow-y: auto;
    max-height: none;
    font-size: var(--hd-text-body);
    line-height: var(--hd-leading-relaxed);
    color: var(--hd-text-primary);
  }

  @media (prefers-reduced-motion: reduce) {
    .hd-ruler-modal--nav-resizing {
      transition: none;
      will-change: auto;
    }
  }

  /* ===== Rule-text link styling (PR-B B4 — read-only) ===== */

  .hd-ruler-detail__body .hd-ruler-detail__rule-link,
  .hd-ruler-modal__body .hd-ruler-detail__rule-link {
    color: var(--hd-accent-primary);
    font-weight: var(--hd-weight-bold);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    cursor: pointer;
  }
  .hd-ruler-detail__body .hd-ruler-detail__rule-link:hover,
  .hd-ruler-modal__body .hd-ruler-detail__rule-link:hover {
    color: var(--hd-accent-info);
  }
  .hd-ruler-detail__body .hd-ruler-detail__rule-link:focus-visible,
  .hd-ruler-modal__body .hd-ruler-detail__rule-link:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }
  .hd-ruler-detail__body .hd-ruler-detail__rule-link[data-link-state="hidden"],
  .hd-ruler-modal__body .hd-ruler-detail__rule-link[data-link-state="hidden"] {
    color: var(--hd-text-tertiary);
    text-decoration: none;
    cursor: default;
    opacity: 0.7;
  }
  .hd-ruler-detail__body .hd-ruler-detail__rule-link[data-link-state="disabled"],
  .hd-ruler-modal__body .hd-ruler-detail__rule-link[data-link-state="disabled"] {
    color: var(--hd-text-tertiary);
    text-decoration: line-through;
    cursor: not-allowed;
  }
}

/* ===== Container queries (BEM root .hd-ruler is container-type:inline-size) ===== */

@container ruler (min-width: 28em) {
  .hd-ruler__grid { grid-template-columns: repeat(3, 1fr); }
}
@container ruler (min-width: 48em) {
  .hd-ruler__grid { grid-template-columns: repeat(4, 1fr); }
  .hd-ruler__filter-chips { flex-wrap: wrap; overflow-x: visible; }
}
/* ===== Deploy-cache first-entry preload gate ===== */
@layer components {
  .hd-ruler__preload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hd-space-3);
    padding: var(--hd-space-6) var(--hd-space-4);
    text-align: center;
    color: var(--hd-text-primary);
  }
  .hd-ruler__preload-title {
    margin: 0;
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h2);
    color: var(--hd-text-primary);
  }
  .hd-ruler__preload-msg {
    margin: 0;
    max-width: 32rem;
    font-size: var(--hd-text-ui);
    color: var(--hd-text-secondary);
  }
  .hd-ruler__preload-track {
    position: relative;
    width: 100%;
    max-width: 24rem;
    height: var(--hd-space-2);
    background: var(--hd-surface-1);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-full);
    overflow: hidden;
  }
  .hd-ruler__preload-bar {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 40%;
    background: var(--hd-accent-primary);
    border-radius: inherit;
  }
  .hd-ruler__preload-bar--indeterminate {
    animation: hd-ruler-preload-slide var(--hd-motion-slower) var(--hd-ease-ui) infinite alternate;
  }
}
@keyframes hd-ruler-preload-slide {
  from { inset-inline-start: 0; }
  to   { inset-inline-start: 60%; }
}

/* DA+EN ("mixed") title presentation: dimmed English original form after the
   Danish title, shared across list rows, search results, detail headers, and
   inline cross-references. */
.hd-ruler-title__en {
  color: var(--hd-text-tertiary);
  font-size: var(--hd-ruler-title-en-size, 0.82em);
  font-weight: var(--hd-weight-regular);
}

/* Search result: composed title line + secondary snippet line. */
.hd-ruler__result-snippet {
  display: block;
  color: var(--hd-text-secondary);
  font-size: var(--hd-ruler-result-snippet-size, 0.85em);
  margin-top: 2px;
}

/* Bolded search-query matches inside the snippet. */
.hd-ruler__hl {
  font-weight: var(--hd-weight-bold);
  color: var(--hd-text-primary);
}

/* Search result text column: title line over snippet line. */
.hd-ruler__result-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}