/* =========================================================
   Zeal Portal — Modal
   Centred dialog over a dimmed overlay. Confirmation, edit,
   and grant-permission flows in User Admin; booking form in
   Studio Manager; rename / generate / import in Labels.

   Extracted from tools/user-admin/admin.css (the .ua-modal*
   rules) and tokenised against colors_and_type.css. Visual
   parity with the admin.css version so a consuming PR can
   swap class names without a perceptible change.

   Markup:
     <div class="modal-overlay" role="presentation">
       <div class="modal" role="dialog" aria-modal="true">
         <h2 class="modal__title">title</h2>
         <div class="modal__body">…</div>
         <div class="modal__actions">
           <button class="btn btn--ghost">cancel</button>
           <button class="btn btn--primary">confirm</button>
         </div>
       </div>
     </div>
   ========================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--s-5, 24px);
  animation: modal-fade var(--dur-fast, 150ms) var(--ease-std) both;
}

.modal {
  background: var(--paper, #fff);
  border: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
  border-radius: var(--r-2, 4px);
  padding: 28px 32px;
  max-width: 520px;
  width: 100%;
  box-shadow: var(--shadow-3);
  animation: modal-pop 180ms var(--ease-out) both;
}

.modal__title {
  font-family: var(--font-ex);
  font-weight: var(--w-bold, 700);
  font-size: var(--t-h5, 21px);
  letter-spacing: var(--track-sub, -0.03em);
  text-transform: lowercase;
  color: var(--ink, #000);
  margin: 0 0 var(--s-4, 16px);
  line-height: var(--lh-snug, 1.15);
}

.modal__body {
  font-family: var(--font-std);
  font-size: var(--t-small, 13px);
  color: var(--ink, #000);
  line-height: var(--lh-relaxed, 1.4);
}
.modal__body p { margin: 0 0 var(--s-3, 12px); }
.modal__body p:last-child { margin-bottom: 0; }
.modal__body strong { font-weight: var(--w-medium, 500); }

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2, 10px);
  margin-top: var(--s-5, 22px);
}

@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-pop {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}