/*
 * cast-modal.css — Plan D D7
 *
 * Singleton cast-modal dialog styles per design-spec §6.6.2.
 * Cascade layers: reset → tokens → base → components → utilities → overrides
 * Plan D styles live in @layer components.
 */

@layer components {

  /* ============================================================
   * Dialog backdrop + container
   * ============================================================ */

  dialog.hd-cast-modal:not(.hd-modal) {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(90vw, 480px);
    max-height: 90vh;
  }

  dialog.hd-cast-modal:not(.hd-modal)::backdrop {
    background: color-mix(in srgb, var(--hd-surface-base) 70%, transparent);
    backdrop-filter: blur(2px);
  }

  .hd-cast-modal__card {
    background: var(--hd-surface-1);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-lg);
    box-shadow: var(--hd-shadow-lg);
    padding: var(--hd-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
    max-height: 90vh;
    overflow: auto;
  }

  /* Inside the shared ModalManager shell, the panel chrome (bg/border/shadow/
   * padding/scroll) is already provided by .hd-modal + .hd-modal__body. Strip
   * the inner card's own chrome so it does not read as a second nested modal
   * ("modal inside a modal"). The bare-<dialog> fallback (:not(.hd-modal)) keeps
   * the card chrome since there is no shell behind it. */
  .hd-modal .hd-cast-modal__card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    max-height: none;
    overflow: visible;
  }

  /* ============================================================
   * Weapon (angrebskort) stat rows — hit + damage
   * ============================================================ */

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

  .hd-cast-modal__weapon-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--hd-space-3);
    padding: var(--hd-space-2) var(--hd-space-3);
    background: var(--hd-surface-2);
    border-radius: var(--hd-radius-sm);
  }

  .hd-cast-modal__weapon-stat-label {
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .hd-cast-modal__weapon-stat-value {
    font-variant-numeric: tabular-nums;
    font-weight: var(--hd-weight-bold);
    color: var(--hd-text-primary);
  }

  /* ============================================================
   * Header: thumbnail + title + meta
   * ============================================================ */

  .hd-cast-modal__spell-actions {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    flex-wrap: wrap;
    width: 100%;
  }

  .hd-cast-modal__btn--spell-cast {
    margin-left: auto;
  }

  .hd-cast-modal__media-facts {
    display: flex;
    align-items: stretch;
    gap: var(--hd-space-3);
    width: 100%;
  }

  .hd-cast-modal__media-facts--expanded {
    flex-direction: column;
  }

  .hd-cast-modal__header {
    display: flex;
    gap: var(--hd-space-3);
    align-items: center;
    flex-wrap: wrap;
  }

  .hd-cast-modal__thumb {
    --hd-modal-media-thumb-height: 128px;
    --hd-modal-media-thumb-width: auto;
    flex: 0 1 auto;
  }

  .hd-cast-modal__thumb.hd-modal-media-thumb--expanded {
    flex: 0 0 100%;
    width: 100%;
  }

  .hd-cast-modal__title-wrap {
    flex: 1;
    min-width: 0;
  }

  .hd-cast-modal__close-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-h4);
    line-height: var(--hd-leading-icon); /* icon/glyph centering, not prose */
    cursor: pointer;
    transition: background var(--hd-motion-fast) var(--hd-easing-standard, ease),
                color var(--hd-motion-fast) var(--hd-easing-standard, ease);
  }

  .hd-cast-modal__close-btn:hover,
  .hd-cast-modal__close-btn:focus-visible {
    background: var(--hd-surface-2);
    color: var(--hd-text-primary);
    outline: 2px solid var(--hd-focus-ring, var(--hd-gold-fg, var(--hd-text-primary)));
    outline-offset: 2px;
  }

  .hd-cast-modal__title {
    font-size: var(--hd-text-h4);
    font-weight: var(--hd-weight-bold);
    color: var(--hd-text-primary);
    margin: 0 0 var(--hd-space-1) 0;
  }

  .hd-cast-modal__meta {
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-secondary);
  }

  .hd-cast-modal__spell-facts {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    align-self: stretch;
    flex: 1 1 auto;
    min-width: 0;
  }

  .hd-cast-modal__spell-fact {
    display: grid;
    grid-template-columns: 1fr;
    min-width: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--hd-red-leather, var(--hd-border-medium)) 42%, transparent);
  }

  .hd-cast-modal__spell-fact:last-child {
    border-bottom: 0;
  }

  .hd-cast-modal__spell-facts--expanded .hd-cast-modal__spell-fact {
    grid-template-columns: minmax(7.5rem, 0.42fr) minmax(0, 1fr);
  }

  .hd-cast-modal__spell-fact-label,
  .hd-cast-modal__spell-fact-value {
    margin: 0;
    min-width: 0;
    padding: var(--hd-space-1) var(--hd-space-2);
    line-height: var(--hd-cast-modal-fact-leading, 1.25);
  }

  .hd-cast-modal__spell-fact-label {
    border-right: 1px solid color-mix(in srgb, var(--hd-red-leather, var(--hd-border-medium)) 38%, transparent);
    background: transparent;
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-ui-tiny, 0.72rem);
    font-weight: var(--hd-weight-semibold);
    letter-spacing: 0;
  }

  .hd-cast-modal__spell-fact-value {
    color: var(--hd-text-primary);
    font-size: var(--hd-text-ui-small);
    overflow-wrap: anywhere;
  }

  .hd-cast-modal__spell-facts--values-only .hd-cast-modal__spell-fact-value {
    display: flex;
    align-items: center;
  }

  /* ============================================================
   * Cantrip notice + prepared warning
   * ============================================================ */

  .hd-cast-modal__cantrip-notice {
    padding: var(--hd-space-2) var(--hd-space-3);
    background: var(--hd-surface-2);
    border-left: 3px solid var(--hd-gold-fg, var(--hd-text-primary));
    border-radius: var(--hd-radius-sm);
    font-style: italic;
    color: var(--hd-text-primary);
    font-size: var(--hd-text-ui-small);
  }

  .hd-cast-modal__prepared-warning {
    padding: var(--hd-space-2) var(--hd-space-3);
    background: var(--hd-surface-2);
    border-left: 3px solid var(--hd-warning-fg, var(--hd-text-primary));
    border-radius: var(--hd-radius-sm);
    color: var(--hd-text-primary);
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold);
  }

  /* ============================================================
   * Slot-picker
   * ============================================================ */

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

  .hd-cast-modal__slot-picker--compact {
    flex: 1 1 auto;
    min-width: 0;
  }

  .hd-cast-modal__slot-picker-label {
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .hd-cast-modal__slot-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: var(--hd-space-2);
  }

  .hd-cast-modal__slot-picker--compact .hd-cast-modal__slot-picker-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-1);
  }

  .hd-cast-modal__slot-radio-label {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    padding: var(--hd-space-2);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
    cursor: pointer;
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-primary);
    min-height: 44px; /* WCAG 2.5.5 touch-target */
  }

  .hd-cast-modal__slot-picker--compact .hd-cast-modal__slot-radio-label {
    min-height: 36px;
    padding: var(--hd-space-1) var(--hd-space-2);
    white-space: nowrap;
  }

  .hd-cast-modal__slot-radio-label:has(.hd-cast-modal__slot-radio:checked) {
    background: var(--hd-purple-bg, var(--hd-surface-3, var(--hd-surface-2)));
    border-color: var(--hd-gold-fg, var(--hd-text-primary));
  }

  .hd-cast-modal__no-slots {
    padding: var(--hd-space-2) var(--hd-space-3);
    font-style: italic;
    color: var(--hd-text-secondary);
  }

  /* ============================================================
   * Footer buttons
   * ============================================================ */

  .hd-cast-modal__footer {
    display: flex;
    gap: var(--hd-space-2);
    justify-content: flex-end;
    padding-top: var(--hd-space-2);
  }

  .hd-cast-modal__btn {
    min-height: 44px;
    padding: var(--hd-space-2) var(--hd-space-3);
    border-radius: var(--hd-radius-sm);
    font-size: var(--hd-text-ui);
    cursor: pointer;
    border: 1px solid var(--hd-border-medium);
  }

  .hd-cast-modal__btn--muted {
    background: var(--hd-surface-2);
    color: var(--hd-text-primary);
  }

  .hd-cast-modal__btn--cta {
    background: var(--hd-gold-fg, var(--hd-text-primary));
    color: var(--hd-surface-base, var(--hd-surface-1));
    font-weight: var(--hd-weight-bold);
    border-color: var(--hd-gold-fg, var(--hd-text-primary));
  }

  .hd-cast-modal__btn:focus-visible {
    outline: 2px solid var(--hd-focus-ring, var(--hd-gold-fg, var(--hd-text-primary)));
    outline-offset: 2px;
  }

  /* ============================================================
   * Item quantity ± stepper (Slice 4 — replaces the inline row stepper)
   * ============================================================ */

  .hd-cast-modal__qty {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-2);
    margin-top: var(--hd-space-2);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm);
    padding: var(--hd-space-1) var(--hd-space-2);
  }
  .hd-cast-modal__qty-btn {
    background: transparent;
    border: none;
    color: var(--hd-text-primary);
    font-size: var(--hd-text-body-large);
    line-height: var(--hd-leading-icon);
    min-width: 32px;
    min-height: 32px;
    cursor: pointer;
    border-radius: var(--hd-radius-sm);
  }
  .hd-cast-modal__qty-btn:disabled {
    color: var(--hd-text-tertiary);
    cursor: not-allowed;
  }
  .hd-cast-modal__qty-btn:focus-visible {
    outline: 2px solid var(--hd-focus-ring, var(--hd-gold-fg, var(--hd-text-primary)));
    outline-offset: 2px;
  }
  .hd-cast-modal__qty-count {
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body);
    color: var(--hd-text-primary);
    font-variant-numeric: tabular-nums;
    min-width: 2ch;
    text-align: center;
  }

  /* ============================================================
   * Dice roll control (Task 13 — 🎲 Kast-knap)
   * ============================================================ */

  .hd-cast-modal__dice {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    margin-top: var(--hd-space-2);
    flex-wrap: wrap; /* wrap on narrow iPad/portrait so nothing clips */
  }

  .hd-cast-modal__dice--compact {
    margin-top: 0;
    flex: 0 0 auto;
  }

  .hd-cast-modal__dice-formula {
    font-weight: var(--hd-weight-bold);
    color: var(--hd-text-primary);
  }

  /* The rolled outcome (device-independent numeric result). Reads as the
   * prominent answer next to the formula; hidden until the first roll. */
  .hd-cast-modal__dice-result {
    font-weight: var(--hd-weight-bold);
    font-size: var(--hd-text-h4);
    color: var(--hd-gold-fg, var(--hd-text-primary));
  }

  /* 2D-terninge-grafik (krav 6) — DiceFontRoller-mount. Tager egen fulde række
   * (wrap), reserver plads så pop/scale-reveal aldrig clippes; tom indtil et slag. */
  .hd-cast-modal__dice-graphic {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: visible;
  }
  .hd-cast-modal__dice-graphic:not(:empty) {
    min-height: 56px;
    margin-top: var(--hd-space-1, 4px);
  }

  /* ============================================================
   * Spec A "LET aktivering" — self-heal affordance + consumed marker
   * (Task 14). Mirrors the .hd-cast-modal__dice grouping (margin-top,
   * gap) so healing controls read as one block under the body.
   * ============================================================ */

  .hd-cast-modal__self-heal {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
    margin-top: var(--hd-space-2);
  }

  .hd-cast-modal__self-heal-label {
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-secondary);
  }

  .hd-cast-modal__self-heal-amount {
    min-height: 44px; /* WCAG 2.5.5 touch-target */
    width: 100%;
    max-width: 8rem;
    padding: var(--hd-space-2) var(--hd-space-3);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
    color: var(--hd-text-primary);
    font-size: var(--hd-text-ui);
    font-variant-numeric: tabular-nums;
  }

  .hd-cast-modal__self-heal-amount:focus-visible {
    outline: 2px solid var(--hd-focus-ring, var(--hd-gold-fg, var(--hd-text-primary)));
    outline-offset: 2px;
  }

  .hd-cast-modal__self-heal-toggle {
    display: flex;
    gap: var(--hd-space-2);
    flex-wrap: wrap; /* wrap on narrow iPad/portrait so nothing clips */
  }

  .hd-cast-modal__self-heal-radio-label {
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-1);
    min-height: 44px; /* WCAG 2.5.5 tappable area for the HP/temp toggle */
    padding: var(--hd-space-2) var(--hd-space-3);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
    cursor: pointer;
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-primary);
  }

  .hd-cast-modal__self-heal-radio-label:has(.hd-cast-modal__self-heal-radio:checked) {
    background: var(--hd-purple-bg, var(--hd-surface-3, var(--hd-surface-2)));
    border-color: var(--hd-gold-fg, var(--hd-text-primary));
  }

  .hd-cast-modal__consumed {
    margin-top: var(--hd-space-2);
    padding: var(--hd-space-2) var(--hd-space-3);
    background: var(--hd-surface-2);
    border-left: 3px solid var(--hd-gold-fg, var(--hd-text-primary));
    border-radius: var(--hd-radius-sm);
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold);
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    dialog.hd-cast-modal:not(.hd-modal)::backdrop {
      backdrop-filter: none;
    }
  }
}