/*!
 * stat-popup.css — Plan B C7
 *
 * Native <dialog>-baseret modal-stil for §22.7 stat-popup-system
 * + §22.8 Særpræg/Træk prose-popups.
 *
 * BEM:
 *   .hd-stat-popup                       <dialog>
 *   .hd-stat-popup__content              wrap-element
 *   .hd-stat-popup__title                h3 — IM Fell English
 *   .hd-stat-popup__source               italic source-label (træk-popups)
 *   .hd-stat-popup__rule                 p — regel-forklaring
 *   .hd-stat-popup__breakdown            container
 *   .hd-stat-popup__breakdown-list       ul
 *   .hd-stat-popup__breakdown-row        li
 *   .hd-stat-popup__breakdown-row--spell *-prefix italic
 *   .hd-stat-popup__breakdown-label      span
 *   .hd-stat-popup__breakdown-value      span
 *   .hd-stat-popup__dice-card            button
 *   .hd-stat-popup__dice-label           span
 *   .hd-stat-popup__dice-formula         span
 *   .hd-stat-popup__dice-section         group
 *   .hd-stat-popup__subtitle             h4 sub-section
 *   .hd-stat-popup__death-save           HP=0 section
 *   .hd-stat-popup__death-counter        ✓/✗ counter
 *   .hd-stat-popup__prose                rich-text from translation-pipeline
 *
 * Native <dialog> backdrop (::backdrop) handles dim — overrides.css
 * leverer prefers-reduced-motion-sweep til transitions.
 */

@layer components {

  /* ────────────────────────────────────────────────────────────── */
  /* Root <dialog>                                                    */
  /* ────────────────────────────────────────────────────────────── */

  .hd-stat-popup:not(.hd-modal) {
    /* Native dialog reset */
    padding: 0;
    border: none;
    background: transparent;
    color: var(--hd-text-primary);
    max-width: min(480px, 92vw);
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    border-radius: var(--hd-radius-md);
  }

  .hd-stat-popup:not(.hd-modal)[open] {
    /* Hvis <dialog> understøttes — flytter den auto til viewport-center */
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-medium);
    box-shadow: var(--hd-shadow-modal, 0 20px 60px rgba(0, 0, 0, 0.7));
    animation: hd-stat-popup-in var(--hd-motion-normal) var(--hd-ease-page-turn);
  }

  .hd-stat-popup:not(.hd-modal)::backdrop {
    background: var(--hd-surface-overlay, rgba(0, 0, 0, 0.55));
    animation: hd-stat-popup-backdrop-in var(--hd-motion-normal) var(--hd-ease-page-turn);
  }

  @keyframes hd-stat-popup-in {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
  }

  @keyframes hd-stat-popup-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* ────────────────────────────────────────────────────────────── */
  /* Content wrapper                                                  */
  /* ────────────────────────────────────────────────────────────── */

  .hd-stat-popup__content {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
    padding: var(--hd-space-4) var(--hd-space-4) var(--hd-space-3);
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body);
    line-height: var(--hd-leading-normal);
  }

  /* ────────────────────────────────────────────────────────────── */
  /* Title + source                                                   */
  /* ────────────────────────────────────────────────────────────── */

  .hd-stat-popup__title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hd-space-2);
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h4);
    font-weight: var(--hd-weight-semibold);
    margin: 0;
    color: var(--hd-text-primary);
    text-align: center;
    /* No underline — match the other on-sheet section headings (which carry no
     * border). Keep the bottom spacing so the title still separates from the body. */
    padding-bottom: var(--hd-space-2);
  }

  .hd-stat-popup__title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    flex: 0 0 1em;
    color: var(--hd-accent-primary);
  }

  .hd-stat-popup__title-icon-glyph {
    --hd-player-icon-size: 1em;
  }

  .hd-stat-popup__subtitle {
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h5);
    font-weight: var(--hd-weight-semibold);
    margin: 0 0 var(--hd-space-1);
    color: var(--hd-text-primary);
  }

  .hd-stat-popup__source {
    font-style: italic;
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-ui-small);
    text-align: center;
    margin-top: calc(-1 * var(--hd-space-1));
  }

  /* ────────────────────────────────────────────────────────────── */
  /* Rule-text                                                        */
  /* ────────────────────────────────────────────────────────────── */

  .hd-stat-popup__rule {
    margin: 0;
    color: var(--hd-text-secondary, var(--hd-text-primary));
    font-size: var(--hd-text-body);
    line-height: var(--hd-leading-relaxed);
    font-style: italic;
    border-left: 2px solid var(--hd-border-subtle);
    padding-left: var(--hd-space-3);
  }

  /* ────────────────────────────────────────────────────────────── */
  /* Breakdown rows                                                   */
  /* ────────────────────────────────────────────────────────────── */

  .hd-stat-popup__breakdown {
    background: var(--hd-surface-1);
    border-radius: var(--hd-radius-sm);
    padding: var(--hd-space-2) var(--hd-space-3);
  }

  .hd-stat-popup__breakdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .hd-stat-popup__breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--hd-space-1) 0;
    border-bottom: 1px dashed var(--hd-border-subtle);
  }

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

  .hd-stat-popup__breakdown-row--spell {
    font-style: italic;
    color: var(--hd-text-tertiary);
  }

  .hd-stat-popup__breakdown-label {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    color: var(--hd-text-secondary, var(--hd-text-primary));
  }

  .hd-stat-popup__breakdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 1.1em;
    color: currentColor;
  }

  .hd-stat-popup__breakdown-icon-glyph {
    --hd-player-icon-size: 1.1em;
  }

  .hd-stat-popup__breakdown-link {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--hd-accent-primary);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 0.14em;
  }

  .hd-stat-popup__breakdown-link:hover,
  .hd-stat-popup__breakdown-link:focus-visible {
    color: var(--hd-accent-secondary);
  }

  .hd-stat-popup__breakdown-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--hd-space-1);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-primary);
    font-variant-numeric: tabular-nums;
  }

  .hd-stat-popup__breakdown-value-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 1.1em;
    color: currentColor;
  }

  .hd-stat-popup__breakdown-value-icon-glyph {
    --hd-player-icon-size: 1.1em;
  }

  /* ────────────────────────────────────────────────────────────── */
  /* Dice-cards (clickable)                                           */
  /* ────────────────────────────────────────────────────────────── */

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

  .hd-stat-popup__dice-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--hd-space-3) var(--hd-space-4);
    background: var(--hd-surface-1);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
    color: var(--hd-text-primary);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body);
    cursor: pointer;
    /* WCAG 2.5.5: 44px+ touch-target */
    min-height: 44px;
    text-align: left;
    transition: background var(--hd-motion-fast) var(--hd-ease-page-turn), border-color var(--hd-motion-fast) var(--hd-ease-page-turn);
  }

  .hd-stat-popup__dice-card:hover,
  .hd-stat-popup__dice-card:focus-visible {
    background: var(--hd-surface-2);
    border-color: var(--hd-border-strong);
  }

  .hd-stat-popup__dice-card:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: 2px;
  }

  .hd-stat-popup__dice-card:active {
    background: var(--hd-surface-3);
  }

  .hd-stat-popup__dice-label {
    font-weight: var(--hd-weight-medium);
    color: var(--hd-text-primary);
  }

  .hd-stat-popup__dice-formula {
    color: var(--hd-text-tertiary);
    font-family: var(--hd-font-mono, monospace);
    font-size: var(--hd-text-ui);
    font-variant-numeric: tabular-nums;
  }

  /* ────────────────────────────────────────────────────────────── */
  /* Death-save section (HP=0)                                        */
  /* ────────────────────────────────────────────────────────────── */

  .hd-stat-popup__death-save {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
    padding: var(--hd-space-3);
    background: var(--hd-surface-1);
    border-left: 3px solid var(--hd-accent-error, #b53d28);
    border-radius: var(--hd-radius-sm);
  }

  .hd-stat-popup__death-counter {
    font-family: var(--hd-font-mono, monospace);
    font-size: var(--hd-text-body);
    color: var(--hd-text-primary);
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: var(--hd-space-1);
  }

  dialog.hd-modal.hd-stat-popup--managed {
    width: min(calc(100vw - var(--hd-space-4)), 1180px);
    max-width: min(calc(100vw - var(--hd-space-4)), 1180px);
    max-height: calc(100dvh - var(--hd-space-4));
  }

  .hd-modal.hd-stat-popup--managed .hd-modal__body {
    padding: var(--hd-space-4);
    max-height: none;
    overflow-y: auto;
  }

  .hd-modal.hd-stat-popup--trait-modal .hd-modal__body {
    max-height: none;
  }

  .hd-modal.hd-stat-popup--managed .hd-stat-popup__content {
    max-height: none;
    overflow: visible;
    padding: 0;
  }

  .hd-stat-popup__hp-controls {
    display: grid;
    grid-template-columns: 48px minmax(72px, 1fr) 48px 56px;
    gap: var(--hd-space-2);
    align-items: stretch;
  }

  .hd-stat-popup__hp-amount {
    min-width: 0;
    min-height: 48px;
    text-align: center;
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body-large);
    font-weight: var(--hd-weight-bold);
    color: var(--hd-text-primary);
    background: var(--hd-surface-1);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
  }

  .hd-stat-popup__hp-btn {
    min-width: 48px;
    min-height: 48px;
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-h4);
    font-weight: var(--hd-weight-bold);
    line-height: var(--hd-leading-icon);
    color: var(--hd-text-on-accent);
    background: var(--hd-accent-primary);
    cursor: pointer;
  }

  .hd-stat-popup__hp-btn--dmg {
    background: var(--hd-accent-error);
  }

  .hd-stat-popup__hp-btn--heal {
    background: var(--hd-accent-success);
  }

  .hd-stat-popup__hp-btn--temp {
    background: var(--hd-accent-info);
  }

  .hd-stat-popup__hp-btn:focus-visible,
  .hd-stat-popup__hp-amount:focus-visible {
    outline: 2px solid var(--hd-focus-ring);
    outline-offset: 2px;
  }

  /* ────────────────────────────────────────────────────────────── */
  /* Prose (Særpræg/Træk)                                             */
  /* ────────────────────────────────────────────────────────────── */

  .hd-stat-popup__prose {
    color: var(--hd-text-primary);
    font-size: var(--hd-text-body);
    line-height: var(--hd-leading-relaxed);
  }

  .hd-stat-popup__prose p {
    margin: 0 0 var(--hd-space-2);
  }

  .hd-stat-popup__prose p:last-child {
    margin-bottom: 0;
  }

  .hd-stat-popup__prose ul,
  .hd-stat-popup__prose ol {
    margin: var(--hd-space-2) 0;
    padding-left: var(--hd-space-5);
  }

  /* §5 Task 12 — Livsterning-tracker i Liv-modal */
  .hd-stat-popup__hitdice {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--hd-border-subtle);
  }
  .hd-stat-popup__hitdice-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
  }
  .hd-stat-popup__hitdice-btn {
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    border: 1px solid var(--hd-border-medium);
    background: var(--hd-surface-1);
    cursor: pointer;
  }

} /* end @layer components */