/* mdx-modal.css — shared dialog for portfolio + playlist (confirm / prompt / form).
   Brand tokens from taste-core.css (--ivory/--black/--muted/--radius/--pill) with
   safe fallbacks so it looks right even on a page that hasn't loaded them. */
.mdxm-ov{position:fixed;inset:0;z-index:10000;background:rgba(31,28,20,.42);display:flex;align-items:center;justify-content:center;padding:20px;animation:mdxm-fade .15s ease}
@keyframes mdxm-fade{from{opacity:0}to{opacity:1}}
.mdxm-modal{background:var(--ivory,#fff);border-radius:var(--radius,18px);max-width:440px;width:100%;max-height:90vh;overflow-y:auto;padding:26px;box-shadow:0 24px 70px rgba(31,28,20,.30);animation:mdxm-pop .18s cubic-bezier(.2,.85,.25,1)}
@keyframes mdxm-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.mdxm-modal h3{font-size:19px;font-weight:700;margin:0 0 8px;color:var(--black,#2A2521)}
.mdxm-modal .mdxm-sub{font-size:14px;color:var(--muted,#6b655c);line-height:1.55;margin:0 0 18px}
/* fields */
.mdxm-field{margin:0 0 16px}
.mdxm-field>label{display:block;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted,#6b655c);margin:0 0 7px}
.mdxm-input,.mdxm-textarea,.mdxm-select{width:100%;box-sizing:border-box;border:1.5px solid var(--border-medium,#D8D3C7);border-radius:12px;padding:11px 13px;font:inherit;font-size:15px;font-weight:600;color:var(--black,#2A2521);background:var(--bg,#fff);outline:none;transition:border-color .15s}
.mdxm-input:focus,.mdxm-textarea:focus,.mdxm-select:focus{border-color:var(--black,#2A2521)}
.mdxm-input::placeholder,.mdxm-textarea::placeholder{color:var(--muted,#9a948b);font-weight:500}
.mdxm-textarea{resize:vertical;min-height:78px;line-height:1.5}
.mdxm-hint{font-size:12px;color:var(--muted,#9a948b);margin:6px 0 0;line-height:1.45}
/* option group — mirrors the create wizard's .goal-opt (cards w/ title+desc; .row+.sm for
   the short questions) so Edit looks identical to New. */
.mdxm-opts{display:flex;flex-direction:column;gap:8px}
.mdxm-opts.row{flex-direction:row;flex-wrap:wrap}
.mdxm-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:13px 16px;border:1.5px solid var(--border-medium,#D8D3C7);border-radius:14px;background:var(--bg,#fff);color:var(--black,#2A2521);cursor:pointer;font:inherit;transition:border-color .15s,background .15s}
.mdxm-opt:hover{border-color:var(--black,#2A2521)}
.mdxm-opt.on{border-color:var(--black,#2A2521);background:var(--black,#2A2521);color:var(--ivory,#fff)}
.mdxm-opt b{font-size:15px;font-weight:700}
.mdxm-opt span{font-size:12px;font-weight:500;color:var(--muted,#6b655c)}
.mdxm-opt.on span{color:rgba(240,238,233,.72)}
.mdxm-opt.sm{flex:1;min-width:118px;flex-direction:row;align-items:center;justify-content:center;text-align:center;font-size:13.5px;font-weight:600;padding:11px 14px}
/* locked / read-only section */
.mdxm-locked{margin:20px 0 4px;padding:14px 16px;background:rgba(31,28,20,.04);border:1px solid var(--border-medium,#E7E2D8);border-radius:12px}
.mdxm-locked-h{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted,#9a948b);margin:0 0 10px;display:flex;align-items:center;gap:6px}
.mdxm-locked-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:4px 0}
.mdxm-locked-row .k{color:var(--muted,#6b655c);font-weight:600}
.mdxm-locked-row .v{color:var(--black,#2A2521);font-weight:700;font-variant-numeric:tabular-nums}
/* actions */
.mdxm-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.mdxm-btn{border:none;border-radius:var(--pill,999px);padding:10px 20px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:opacity .14s,background .14s}
.mdxm-btn.cancel{background:transparent;color:var(--muted,#6b655c)}
.mdxm-btn.cancel:hover{background:rgba(31,28,20,.06)}
.mdxm-btn.go{background:var(--black,#2A2521);color:var(--ivory,#fff)}
.mdxm-btn.danger{background:#d23b3b;color:#fff}
.mdxm-btn:disabled{opacity:.4;cursor:not-allowed}
/* async action in flight — hide the label, spin in place, block re-clicks */
.mdxm-btn.loading{position:relative;color:transparent!important;pointer-events:none;opacity:1}
.mdxm-btn.loading::after{content:'';position:absolute;inset:0;margin:auto;width:15px;height:15px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:mdxm-spin .6s linear infinite}
@keyframes mdxm-spin{to{transform:rotate(360deg)}}
.mdxm-err{color:#d23b3b;font-size:13px;font-weight:600;margin:12px 0 0;min-height:1px}
/* iOS zooms the page when a focused field's font is < 16px — phone fields stay 16px */
@media (pointer:coarse),(max-width:640px){.mdxm-input,.mdxm-textarea,.mdxm-select{font-size:16px}}