/*
 * Cortex — Modal / dialog primitives
 * Flat raised panel, subtle border + soft pop shadow. Accent reserved for
 * header variants (danger / warning).
 *
 * Usage pattern (see app/views/elements/_modal.html.erb):
 *   .rd-modal-overlay > .rd-modal-backdrop + .rd-modal.rd-modal-{sm|md|lg}
 */

@layer components {
  .rd-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .rd-modal-overlay[hidden] {
    display: none;
  }

  .rd-modal-backdrop {
    position: absolute;
    inset: 0;
    background: light-dark(rgba(20, 20, 28, 0.42), rgba(0, 0, 0, 0.6));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: rd-modal-fade-in 0.18s ease;
  }

  @keyframes rd-modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .rd-modal {
    position: relative;
    background: var(--rd-bg-raised);
    color: var(--rd-fg);
    border: 2px solid var(--pop-ink);
    border-radius: 0;
    box-shadow: var(--pop-shadow), var(--rd-shadow-pop);
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    animation: rd-modal-pop-in 0.2s var(--rd-ease);
  }

  .rd-modal-sm { max-width: 360px; }
  .rd-modal-md { max-width: 480px; }
  .rd-modal-lg { max-width: 640px; }
  .rd-modal-xl { max-width: 760px; }

  @keyframes rd-modal-pop-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  .rd-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-block-end: 1px solid var(--rd-border);
    background: var(--rd-bg-raised);
    color: var(--rd-fg);
  }
  .rd-modal-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--rd-font-sans);
    font-weight: 600;
    font-size: var(--rd-text-md);
    letter-spacing: -0.005em;
    margin: 0;
    color: inherit;
  }

  .rd-modal-header-danger {
    background: var(--rd-danger-soft);
    border-block-end-color: transparent;
  }
  .rd-modal-header-danger h3 {
    color: var(--rd-danger);
  }
  .rd-modal-header-warning {
    background: var(--rd-warn-soft);
    border-block-end-color: transparent;
  }
  .rd-modal-header-warning h3 {
    color: var(--rd-warn);
  }

  .rd-modal-close,
  .rd-modal-close-floating {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: var(--rd-bg-sunken);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-sm);
    color: var(--rd-fg-muted);
    cursor: pointer;
    transition: background var(--rd-dur-fast) var(--rd-ease),
                color      var(--rd-dur-fast) var(--rd-ease),
                border-color var(--rd-dur-fast) var(--rd-ease);
  }
  .rd-modal-close:hover,
  .rd-modal-close-floating:hover {
    background: var(--rd-bg-hover);
    color: var(--rd-fg);
    border-color: var(--rd-border-strong);
  }

  .rd-modal-close-floating {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    width: 28px;
    height: 28px;
  }

  .rd-modal-body {
    padding: 18px;
    color: var(--rd-fg);
  }

  .rd-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 18px 18px;
  }

  .rd-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px;
    border-block-start: 1px solid var(--rd-border);
    background: var(--rd-bg-sunken);
  }
}