/* edit-modal — reusable quick-edit popup (#10 sub-step 5). Matches the existing talent-edit
   popup (the .chm / .chm-ov component in channel.css) so it reads as the SAME popup app-wide:
   a centered surface card, h3 title, form, Cancel/Save. Uses only globally-defined vars
   (--surface/--rule/--ink/--bg/--ink-muted, all in style.css) so it looks right in BOTH workspaces
   and dark mode; radius 12px hard-coded to match channel.css --ch-radius. Additive: the edit page
   itself is untouched (no-JS fallback / deep-link). */

.em-backdrop {                                   /* mirrors .chm-ov */
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; overflow-y: auto;
}
.em-backdrop[hidden] { display: none; }

.em-modal {                                      /* mirrors .chm */
  background: var(--surface, #fff);
  border: 1px solid var(--rule, #e5e5e5);
  border-radius: 12px;
  padding: 1.3rem 1.4rem;
  width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .28);
  animation: em-in .14s ease;
}
@keyframes em-in { from { transform: translateY(6px); opacity: .7; } to { transform: none; opacity: 1; } }

.em-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0 0 .9rem; }
.em-title { font-size: 1.1rem; font-weight: 700; color: var(--ink, #1a1a1a); line-height: 1.3; }
.em-close {
  background: none; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer;
  color: var(--ink-muted, #777); padding: 0 .2rem; border-radius: 6px; flex: none;
}
.em-close:hover { color: var(--ink, #111); }

.em-body { /* the injected page form sits here */ }
.em-loading, .em-err { color: var(--ink-muted, #777); font-size: .9rem; padding: .6rem 0; }
.em-err { color: #c0392b; }

/* The injected page form drops its own page chrome inside the modal. */
.em-body > form { margin: 0; }
.em-body .page-header { display: none; }         /* page <h1> — the modal title shows it instead */

/* Validation error surfaced in-modal (the 422 path; the live form keeps the user's input). */
.em-form-err {
  background: #fdecea; border: 1px solid #e8a99a; color: #92260f;
  padding: .55rem .8rem; border-radius: 8px; font-size: .88rem; margin: 0 0 .9rem;
}

@media (max-width: 560px) { .em-backdrop { padding: .5rem; align-items: flex-start; } .em-modal { width: 100%; } }