/* ═══════════════════════════════════════════════════════════════
   MODAL-UI — Centered dialog overlay using native <dialog>.

   <dialog> content stays in DOM tree → custom properties inherit
   normally → all rules live INSIDE @scope (modal-ui), parity with
   drawer-ui. See docs/specs/component-token-contract.md
   §"Top-layer rules — when to keep them inside @scope".
   ═══════════════════════════════════════════════════════════════ */

@scope (modal-ui) {
  :where(:scope) {
    --modal-width-default:          32rem;
    --modal-radius-default:         var(--a-radius-lg);
    --modal-bg-default:             var(--a-bg-subtle);
    --modal-border-default:         var(--a-border-subtle);
    --modal-shadow-default:         var(--a-shadow-lg);
    --modal-backdrop-default:       var(--a-scrim-dialog);
    --modal-duration-default:       var(--a-duration);
    --modal-easing-default:         var(--a-easing-out);
    --modal-heading-size-default:   var(--a-ui-lg);
    --modal-heading-weight-default: var(--a-weight-semibold);
    --modal-header-fg-default:      var(--a-fg);
    --modal-close-fg-default:       var(--a-fg-muted);
    --modal-close-hover-default:    var(--a-fg);
    --modal-pad-header-default:     var(--a-space-3);
    --modal-pad-body-default:       var(--a-space-4);
    --modal-pad-footer-default:     var(--a-space-3);
    --modal-font-family-default:    var(--a-font-family);
    --modal-footer-gap-default:     var(--a-space-2);
  }

  :scope {
    box-sizing: border-box;
    display: contents;
  }

  /* ── Size variants ── */
  :scope[size="sm"] { --modal-width-default: min(24rem, 90vw); }
  :scope[size="md"] { --modal-width-default: min(32rem, 90vw); }
  :scope[size="lg"] { --modal-width-default: min(48rem, 90vw); }

  /* ═══════ Closed ═══════ */
  :scope > [slot="dialog"]:not([open]) { display: none; }

  /* ═══════ Full-viewport dialog shell ═══════ */
  :scope > [slot="dialog"][open] {
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    overflow: clip;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ═══════ Backdrop ═══════ */
  :scope > [slot="dialog"]::backdrop {
    background: var(--modal-backdrop, var(--modal-backdrop-default));
    opacity: 0;
    transition: opacity var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default));
  }
  :scope > [slot="dialog"][data-open]::backdrop    { opacity: 1; }
  :scope > [slot="dialog"][data-closing]::backdrop { opacity: 0; }

  /* ═══════ Content panel ═══════ */
  :scope > [slot="dialog"] > [slot="panel"] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: var(--modal-width, var(--modal-width-default));
    max-height: 85vh;
    background: var(--modal-bg, var(--modal-bg-default));
    color: var(--modal-header-fg, var(--modal-header-fg-default));
    font-family: var(--modal-font-family, var(--modal-font-family-default));
    border: 1px solid var(--modal-border, var(--modal-border-default));
    border-radius: var(--modal-radius, var(--modal-radius-default));
    box-shadow: var(--modal-shadow, var(--modal-shadow-default));
    overflow: hidden;
    opacity: 0;
    transform: scale(0.95);
  }

  /* ═══════ Open animation ═══════ */
  :scope > [slot="dialog"][data-open] > [slot="panel"] {
    transition: transform var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default)),
                opacity var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default));
    transform: scale(1);
    opacity: 1;
  }

  /* ═══════ Close animation ═══════ */
  :scope > [slot="dialog"][data-closing] > [slot="panel"] {
    transition: transform var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default)),
                opacity var(--modal-duration, var(--modal-duration-default)) var(--modal-easing, var(--modal-easing-default));
    transform: scale(0.95);
    opacity: 0;
  }

  /* ═══════ Header ═══════ */
  :scope [slot="header"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--modal-pad-header, var(--modal-pad-header-default)) var(--modal-pad-body, var(--modal-pad-body-default));
    border-bottom: 1px solid var(--modal-border, var(--modal-border-default));
    font-size: var(--modal-heading-size, var(--modal-heading-size-default));
    font-weight: var(--modal-heading-weight, var(--modal-heading-weight-default));
    color: var(--modal-header-fg, var(--modal-header-fg-default));
    flex-shrink: 0;
  }
  /* `[text]` gate — same drift class as button-ui / tag-ui / badge-ui /
     segment-ui (Apr-May 2026 phantom-gap arc). Without the `[text]`
     attribute selector, an empty `attr(text)` still generates a
     pseudo-element with `flex: 1` — it claims the row's free space and
     pushes any slotted title text-ui / icon-ui to the trailing edge,
     leaving only the close button on the right looking like the title.
     Gated on `[text]:not([text=""])` because modal/modal.class.js sets
     `header.setAttribute('text', this.text)` unconditionally; the
     defensive selector + class skip (see modal/modal.class.js render())
     close the same trap from both directions. */
  :scope [slot="header"][text]:not([text=""])::before {
    content: attr(text);
    flex: 1;
  }

  /* ═══════ Close button (button-ui) ═══════ */
  :scope [slot="close"] {
    flex-shrink: 0;
  }

  /* ═══════ Body ═══════ */
  :scope [slot="body"] {
    padding: var(--modal-pad-body, var(--modal-pad-body-default));
    flex: 1;
    overflow: auto;
  }

  /* ═══════ Footer ═══════ */
  :scope [slot="footer"] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--modal-footer-gap, var(--modal-footer-gap-default));
    padding: var(--modal-pad-footer, var(--modal-pad-footer-default)) var(--modal-pad-body, var(--modal-pad-body-default));
    border-top: 1px solid var(--modal-border, var(--modal-border-default));
    flex-shrink: 0;
  }
}
