/**
 * formularer-box.css — Plan B C-fb1
 *
 * Shared formularer-box (spell-box) component: level-tabs + slot-dots +
 * card-strip + list-view + summary-panel + "Læs mere"-modal.
 *
 * BEM: .hd-formbox*
 * CSS-lag: @layer components
 *
 * Variants:
 *   .hd-formbox--karakterark   — read-only player view
 *   .hd-formbox--kamp-companion — interactive DM/combat view
 *   .hd-formbox--readonly      — auto-added when opts.write is absent/empty
 *
 * Token strategy:
 *   - Surface:  var(--hd-surface-*), var(--hd-border-*)
 *   - Text:     var(--hd-text-*)
 *   - Activity: var(--hd-activity-utility) for magic/arcane accent
 *   - Motion:   var(--hd-motion-fast), var(--hd-transition-fast)
 *   - Custom formbox tokens defined in :root below
 */

@layer components {

  /* ------------------------------------------------------------------ */
  /* Component-scoped design tokens                                       */
  /* ------------------------------------------------------------------ */
  :root {
    /* Slot dots */
    --hd-formbox-dot-size:          0.875rem;   /* 14px */
    --hd-formbox-dot-gap:           0.1875rem;  /* 3px */
    --hd-formbox-dot-filled:        var(--hd-activity-utility);
    --hd-formbox-dot-used:          var(--hd-border-medium);
    --hd-formbox-dot-border:        var(--hd-border-subtle);

    /* Level tabs */
    --hd-formbox-tab-height:        3.25rem;    /* 52px */
    --hd-formbox-tab-min-width:     3rem;       /* 48px */
    --hd-formbox-tab-icon-size:     1.25rem;    /* 20px */
    /* §6.6: guld-gradient-bg er ENESTE markering — INGEN under-streg. */
    --hd-formbox-tab-active-bg:     linear-gradient(180deg, var(--hd-gold-mid), var(--hd-gold-deep));
    --hd-formbox-tab-active-border: transparent;

    /* Card strip — shared sizing tokens (defined in karakterark-destination.css :root).
     * Fallbacks mirror the canonical shared values so admin.php (which loads this
     * file WITHOUT karakterark-destination.css) renders identical card sizes. */
    --hd-formbox-card-width:        var(--hd-player-card-width, 105px);      /* shared 105px */
    --hd-formbox-card-thumb-size:   var(--hd-player-card-thumb-size, 90px);  /* shared 90px */
    --hd-formbox-card-name-size:    var(--hd-text-ui-small);
    --hd-formbox-card-name-font:    var(--hd-font-display);
    --hd-formbox-card-selected-bg:  var(--hd-surface-2);
    --hd-formbox-card-radius:       0.375rem;   /* 6px */

    /* Summary panel */
    --hd-formbox-summary-bg:        var(--hd-surface-1);
    --hd-formbox-summary-border:    var(--hd-border-medium);
    --hd-formbox-summary-radius:    0.375rem;   /* 6px */
    --hd-formbox-summary-padding:   0.75rem;    /* 12px */

    /* Unknown-prepared badge */
    --hd-formbox-badge-bg:          var(--hd-activity-hostile);
    --hd-formbox-badge-size:        1rem;       /* 16px */
    --hd-formbox-badge-glyph-size:   0.5rem;     /* 8px — sub-micro glyph inside 16px circle */
  }

  /* ------------------------------------------------------------------ */
  /* Root container                                                       */
  /* ------------------------------------------------------------------ */
  .hd-formbox {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--hd-surface-base);
    border-radius: var(--hd-formbox-summary-radius);
    overflow: hidden;
  }

  /* ------------------------------------------------------------------ */
  /* Level-tabs row                                                       */
  /* ------------------------------------------------------------------ */
  .hd-formbox__level-tabs {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: var(--hd-surface-base);
    border-bottom: 1px solid var(--hd-border-subtle);
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-height: var(--hd-formbox-tab-height);
  }

  .hd-formbox__level-tabs::-webkit-scrollbar {
    display: none;
  }

  /* ------------------------------------------------------------------ */
  /* Level tab button                                                     */
  /* ------------------------------------------------------------------ */
  .hd-formbox__level-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem; /* 3px */
    min-width: var(--hd-formbox-tab-min-width);
    padding: 0.375rem 0.5rem; /* 6px 8px */
    background: transparent;
    border: none;
    border-right: 1px solid var(--hd-border-subtle);
    border-bottom: 2px solid transparent;
    color: var(--hd-text-secondary);
    cursor: pointer;
    transition: background-color var(--hd-motion-fast) var(--hd-ease-page-turn),
                color var(--hd-motion-fast) var(--hd-ease-page-turn);
    flex-shrink: 0;
  }

  .hd-formbox__level-tab:hover {
    background-color: var(--hd-surface-1);
    color: var(--hd-text-primary);
  }

  .hd-formbox__level-tab:focus-visible {
    outline: 2px solid var(--hd-activity-utility);
    outline-offset: -2px;
  }

  .hd-formbox__level-tab--active {
    background: var(--hd-formbox-tab-active-bg);
    color: var(--hd-text-on-accent);
    border-bottom-color: transparent;
  }

  /* ------------------------------------------------------------------ */
  /* Level tab tier icon                                                  */
  /* ------------------------------------------------------------------ */
  .hd-formbox__level-tab-icon {
    display: block;
    width: var(--hd-formbox-tab-icon-size);
    height: var(--hd-formbox-tab-icon-size);
    object-fit: contain;
    opacity: 0.75;
    flex-shrink: 0;
  }

  .hd-formbox__level-tab--active .hd-formbox__level-tab-icon {
    opacity: 1;
  }

  /* ------------------------------------------------------------------ */
  /* Slot dots row                                                        */
  /* ------------------------------------------------------------------ */
  /* Shared contract: the player karakterark Magi section
     (karakterark-destination.js _buildFormularerSlotDots) reuses these
     slot-dot classes even though it no longer mounts the FormulaerBox JS
     module. Keep in sync. */
  .hd-formbox__slot-dots {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--hd-formbox-dot-gap);
    justify-content: center;
    max-width: 3rem; /* max 4 dots per row visually */
  }

  .hd-formbox__slot-dot {
    display: block;
    width: var(--hd-formbox-dot-size);
    height: var(--hd-formbox-dot-size);
    border-radius: 50%;
    border: 1px solid var(--hd-formbox-dot-border);
    transition: background-color var(--hd-motion-fast) var(--hd-ease-page-turn);
    flex-shrink: 0;
  }

  .hd-formbox__slot-dot--filled {
    background-color: var(--hd-formbox-dot-filled);
    border-color: var(--hd-formbox-dot-filled);
  }

  .hd-formbox__slot-dot--used {
    background-color: transparent;
    border-color: var(--hd-formbox-dot-used);
  }

  /* Interactive dots (kamp-companion mode) */
  .hd-formbox__slot-dot--interactive {
    cursor: pointer;
  }

  .hd-formbox__slot-dot--interactive:hover {
    opacity: 0.75;
  }

  /* ------------------------------------------------------------------ */
  /* View toggle (≡ button)                                              */
  /* ------------------------------------------------------------------ */
  .hd-formbox__view-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0.375rem 0.625rem; /* 6px 10px */
    background: transparent;
    border: none;
    border-left: 1px solid var(--hd-border-subtle);
    color: var(--hd-text-tertiary);
    cursor: pointer;
    font-size: var(--hd-text-body);
    transition: color var(--hd-motion-fast) var(--hd-ease-page-turn),
                background-color var(--hd-motion-fast) var(--hd-ease-page-turn);
    flex-shrink: 0;
    align-self: stretch;
  }

  .hd-formbox__view-toggle:hover {
    color: var(--hd-text-primary);
    background-color: var(--hd-surface-1);
  }

  .hd-formbox__view-toggle:focus-visible {
    outline: 2px solid var(--hd-activity-utility);
    outline-offset: -2px;
  }

  .hd-formbox__view-toggle--active {
    color: var(--hd-activity-utility);
    background-color: var(--hd-surface-1);
  }

  /* ------------------------------------------------------------------ */
  /* Card strip (horizontal scroll)                                       */
  /* ------------------------------------------------------------------ */
  .hd-formbox__card-strip {
    display: flex;
    flex-direction: row;
    gap: 0.5rem; /* 8px */
    padding: 0.5rem; /* 8px */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-height: calc(var(--hd-formbox-card-thumb-size) + 2rem);
    align-items: flex-start;
  }

  .hd-formbox__card-strip::-webkit-scrollbar {
    display: none;
  }

  /* ------------------------------------------------------------------ */
  /* Spell card                                                           */
  /* ------------------------------------------------------------------ */
  .hd-formbox__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1875rem; /* 3px */
    width: var(--hd-formbox-card-width);
    padding: 0.25rem; /* 4px */
    background-color: var(--hd-surface-1);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-formbox-card-radius);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--hd-motion-fast) var(--hd-ease-page-turn),
                border-color var(--hd-motion-fast) var(--hd-ease-page-turn);
  }

  .hd-formbox__card:hover {
    background-color: var(--hd-formbox-card-selected-bg);
    border-color: var(--hd-border-medium);
  }

  .hd-formbox__card:focus-visible {
    outline: 2px solid var(--hd-activity-utility);
    outline-offset: 1px;
  }

  .hd-formbox__card--selected {
    background-color: var(--hd-formbox-card-selected-bg);
    border-color: var(--hd-activity-utility);
  }

  /* ------------------------------------------------------------------ */
  /* Card thumbnail (60×60)                                               */
  /* ------------------------------------------------------------------ */
  .hd-formbox__card-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hd-formbox-card-thumb-size);
    height: var(--hd-formbox-card-thumb-size);
    border-radius: calc(var(--hd-formbox-card-radius) - 0.125rem);
    overflow: hidden;
    background-color: var(--hd-surface-base);
    flex-shrink: 0;
  }

  .hd-formbox__card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Fallback glyph (when no image) */
  .hd-formbox__card-thumb--glyph {
    font-size: var(--hd-player-card-glyph-size, 48px);
    line-height: var(--hd-leading-icon);  /* 1 — icon/glyph centering */
    color: var(--hd-text-tertiary);
  }

  /* ------------------------------------------------------------------ */
  /* Card name                                                            */
  /* ------------------------------------------------------------------ */
  .hd-formbox__card-name {
    font-family: var(--hd-formbox-card-name-font);
    font-size: var(--hd-formbox-card-name-size);
    color: var(--hd-text-secondary);
    text-align: center;
    line-height: var(--hd-leading-tight);
    word-break: break-word;
    hyphens: auto;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* ------------------------------------------------------------------ */
  /* Known-unprepared badge (✕ top-right)                                */
  /* ------------------------------------------------------------------ */
  .hd-formbox__card--known-unprepared::after {
    content: '✕';
    position: absolute;
    top: -0.1875rem; /* -3px */
    right: -0.1875rem; /* -3px */
    width: var(--hd-formbox-badge-size);
    height: var(--hd-formbox-badge-size);
    background-color: var(--hd-formbox-badge-bg);
    color: var(--hd-text-on-emphasis);
    border-radius: 50%;
    font-size: var(--hd-formbox-badge-glyph-size);
    line-height: var(--hd-formbox-badge-size);
    text-align: center;
    pointer-events: none;
    z-index: 1;
  }

  /* ------------------------------------------------------------------ */
  /* List view (alternative ≡ mode)                                      */
  /* ------------------------------------------------------------------ */
  .hd-formbox__list {
    display: flex;
    flex-direction: column;
    padding: 0.25rem; /* 4px */
    overflow-y: auto;
    max-height: 16rem; /* 256px — scrolls when many spells */
  }

  .hd-formbox__list-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem; /* 8px */
    padding: 0.375rem 0.5rem; /* 6px 8px */
    border-bottom: 1px solid var(--hd-border-subtle);
    cursor: pointer;
    transition: background-color var(--hd-motion-fast) var(--hd-ease-page-turn);
    border-radius: 0.1875rem; /* 3px */
  }

  .hd-formbox__list-row:last-child {
    border-bottom: none;
  }

  .hd-formbox__list-row:hover {
    background-color: var(--hd-surface-1);
  }

  .hd-formbox__list-row:focus-visible {
    outline: 2px solid var(--hd-activity-utility);
    outline-offset: -2px;
  }

  .hd-formbox__list-row--selected {
    background-color: var(--hd-surface-1);
    border-color: var(--hd-border-medium);
  }

  .hd-formbox__list-row-name {
    flex: 1;
    font-family: var(--hd-formbox-card-name-font);
    font-size: var(--hd-text-ui);
    color: var(--hd-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hd-formbox__list-row-meta {
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-tertiary);
    flex-shrink: 0;
  }

  .hd-formbox__list-row--unprepared .hd-formbox__list-row-name {
    color: var(--hd-text-disabled);
    text-decoration: line-through;
    text-decoration-color: var(--hd-activity-hostile);
  }

  /* ------------------------------------------------------------------ */
  /* Summary panel (slide-down under card on tap)                        */
  /* ------------------------------------------------------------------ */
  .hd-formbox__summary-panel {
    background-color: var(--hd-formbox-summary-bg);
    border-top: 1px solid var(--hd-formbox-summary-border);
    border-radius: 0 0 var(--hd-formbox-summary-radius) var(--hd-formbox-summary-radius);
    padding: var(--hd-formbox-summary-padding);
    display: flex;
    flex-direction: column;
    gap: 0.375rem; /* 6px */
  }

  .hd-formbox__summary-title {
    font-family: var(--hd-formbox-card-name-font);
    font-size: var(--hd-text-md);
    color: var(--hd-text-primary);
    font-weight: var(--hd-weight-bold);
    line-height: var(--hd-leading-tight);
  }

  .hd-formbox__summary-meta {
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-tertiary);
    line-height: var(--hd-leading-normal);
  }

  .hd-formbox__summary-tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem; /* 4px */
  }

  .hd-formbox__summary-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem; /* 2px 6px */
    background-color: var(--hd-surface-2);
    border: 1px solid var(--hd-border-subtle);
    border-radius: 0.875rem; /* 14px */
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-secondary);
  }

  .hd-formbox__summary-tag--concentration {
    border-color: var(--hd-activity-utility);
    color: var(--hd-activity-utility);
  }

  .hd-formbox__summary-tag--ritual {
    border-color: var(--hd-activity-divine);
    color: var(--hd-activity-divine);
  }

  .hd-formbox__summary-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem; /* 8px */
    margin-top: 0.25rem; /* 4px */
  }

  .hd-formbox__slot-field {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; /* 4px */
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-ui-small);
    white-space: nowrap;
  }

  .hd-formbox__slot-label {
    color: var(--hd-text-tertiary);
  }

  .hd-formbox__slot-select {
    min-width: 3.25rem;
    padding: 0.25rem 0.375rem;
    background-color: var(--hd-surface-1);
    color: var(--hd-text-primary);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-formbox-card-radius);
    font-size: var(--hd-text-ui-small);
    font-family: var(--hd-font-ui);
  }

  .hd-formbox__slot-select:focus-visible {
    outline: 2px solid var(--hd-activity-utility);
    outline-offset: 2px;
  }

  .hd-formbox__slot-none {
    color: var(--hd-text-tertiary);
  }

  /* ------------------------------------------------------------------ */
  /* Cast button                                                          */
  /* ------------------------------------------------------------------ */
  .hd-formbox__cast-btn {
    flex: 1;
    padding: 0.375rem 0.75rem; /* 6px 12px */
    background-color: var(--hd-activity-utility);
    color: var(--hd-text-on-emphasis);
    border: none;
    border-radius: var(--hd-formbox-card-radius);
    font-size: var(--hd-text-ui);
    font-family: var(--hd-formbox-card-name-font);
    cursor: pointer;
    transition: opacity var(--hd-motion-fast) var(--hd-ease-page-turn);
  }

  .hd-formbox__cast-btn:hover {
    opacity: 0.85;
  }

  .hd-formbox__cast-btn--disabled,
  .hd-formbox__cast-btn:disabled {
    opacity: 0.55;
    cursor: default;
  }

  .hd-formbox__cast-btn--disabled:hover,
  .hd-formbox__cast-btn:disabled:hover {
    opacity: 0.55;
  }

  .hd-formbox__cast-btn:focus-visible {
    outline: 2px solid var(--hd-text-on-emphasis);
    outline-offset: 2px;
  }

  /* ------------------------------------------------------------------ */
  /* "Læs mere" button                                                   */
  /* ------------------------------------------------------------------ */
  .hd-formbox__readmore-btn {
    padding: 0.375rem 0.75rem; /* 6px 12px */
    background-color: transparent;
    color: var(--hd-text-secondary);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-formbox-card-radius);
    font-size: var(--hd-text-ui);
    font-family: var(--hd-formbox-card-name-font);
    cursor: pointer;
    transition: color var(--hd-motion-fast) var(--hd-ease-page-turn),
                border-color var(--hd-motion-fast) var(--hd-ease-page-turn);
  }

  .hd-formbox__readmore-btn:hover {
    color: var(--hd-text-primary);
    border-color: var(--hd-border-medium);
  }

  .hd-formbox__readmore-btn--disabled,
  .hd-formbox__readmore-btn:disabled {
    opacity: 0.55;
    cursor: default;
    color: var(--hd-text-tertiary);
  }

  .hd-formbox__readmore-btn--disabled:hover,
  .hd-formbox__readmore-btn:disabled:hover {
    color: var(--hd-text-tertiary);
    border-color: var(--hd-border-medium);
  }

  .hd-formbox__readmore-btn:focus-visible {
    outline: 2px solid var(--hd-activity-utility);
    outline-offset: 2px;
  }

  /* ------------------------------------------------------------------ */
  /* "Læs mere" modal (native <dialog> fallback)                         */
  /* ------------------------------------------------------------------ */
  .hd-formbox__readmore-modal {
    background-color: var(--hd-surface-base);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-formbox-summary-radius);
    color: var(--hd-text-primary);
    padding: 1rem; /* 16px */
    max-width: min(90vw, 28rem);
    max-height: 80vh;
    overflow-y: auto;
  }

  .hd-formbox__readmore-modal h3 {
    font-family: var(--hd-formbox-card-name-font);
    font-size: var(--hd-text-h6);  /* heading level — not deprecated */
    margin-bottom: 0.5rem;
    color: var(--hd-text-primary);
  }

  .hd-formbox__readmore-body {
    font-size: var(--hd-text-ui);
    color: var(--hd-text-secondary);
    line-height: var(--hd-leading-relaxed);
  }

  .hd-formbox__readmore-modal [data-action="close"] {
    margin-top: 0.75rem;
    padding: 0.375rem 0.75rem;
    background-color: var(--hd-surface-1);
    color: var(--hd-text-primary);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-formbox-card-radius);
    cursor: pointer;
    font-size: var(--hd-text-ui);
  }

  /* ------------------------------------------------------------------ */
  /* Read-only mode overrides                                             */
  /* ------------------------------------------------------------------ */
  .hd-formbox--readonly .hd-formbox__slot-dot {
    cursor: default;
    pointer-events: none;
  }

  .hd-formbox--readonly .hd-formbox__cast-btn {
    display: none;
  }

  /* ------------------------------------------------------------------ */
  /* Prefers-reduced-motion                                               */
  /* ------------------------------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    .hd-formbox__level-tab,
    .hd-formbox__card,
    .hd-formbox__list-row,
    .hd-formbox__slot-dot,
    .hd-formbox__view-toggle,
    .hd-formbox__cast-btn,
    .hd-formbox__readmore-btn {
      transition: none;
    }
  }

}