/* Course Mark's confirm boxes (src/builder/dialog.js), shared by the builder and the owner dashboard.
   A card in the middle on computers, a sheet from the bottom on phones; .danger for removing and deleting.
   Colours fall back to Course Mark's own where a page doesn't define the builder's. */
.cd-dlg-back { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(48, 46, 51, .42); animation: cd-dlg-fade .15s ease-out; }
.cd-dlg { width: min(420px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; padding: 22px 22px 20px; border-radius: 18px; background: #fff; color: var(--ink, #302e33); box-shadow: 0 24px 60px rgba(48, 46, 51, .28); font-size: 14px; animation: cd-dlg-pop .18s ease-out; }
.cd-dlg.danger { border-top: 5px solid #b42318; }
.cd-dlg-grab { display: none; }
.cd-dlg-top { display: flex; gap: 14px; align-items: flex-start; }
.cd-dlg-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cd-grapefruit-wash, #ffe9e5); color: var(--cd-lagoon, #302e33); }
.cd-dlg-ico .ico { width: 20px; height: 20px; }
.cd-dlg.danger .cd-dlg-ico { background: #fde8e6; color: #b42318; }
.cd-dlg-txt { min-width: 0; }
.cd-dlg h2 { margin: 2px 0 0; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.cd-dlg-body p { margin: 6px 0 0; color: var(--ink-2, #6f6d73); line-height: 1.5; overflow-wrap: anywhere; }
.cd-dlg-name { font-weight: 600; color: var(--ink, #302e33); overflow-wrap: anywhere; }
.cd-dlg-note { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--cream, #f7f6f4); color: var(--ink-2, #6f6d73); font-size: 13px; line-height: 1.45; }
.cd-dlg-form { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.cd-dlg-form label { font-weight: 600; font-size: 13px; }
.cd-dlg-form input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line, #eceae6); border-radius: 10px; background: #fff; color: inherit; font: inherit; }
.cd-dlg-form input:focus-visible { outline: 2px solid var(--cd-lagoon, #302e33); outline-offset: 1px; border-color: var(--cd-lagoon, #302e33); }
.cd-dlg-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; }
.cd-b { min-height: 40px; padding: 0 18px; border-radius: 99px; border: 1px solid transparent; background: none; color: var(--ink, #302e33); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.cd-b:hover { background: var(--cream, #f7f6f4); }
.cd-b.go { background: var(--cd-lagoon, #302e33); border-color: var(--cd-lagoon, #302e33); color: #fff; }
.cd-b.go:hover { background: color-mix(in srgb, var(--cd-lagoon, #302e33) 82%, #000); }
.cd-b.danger { background: #b42318; border-color: #b42318; color: #fff; }
.cd-b.danger:hover { background: #931c13; }
.cd-b:focus-visible { outline: 3px solid var(--cd-lagoon, #302e33); outline-offset: 2px; }
.cd-b.danger:focus-visible { outline-color: #b42318; }
@keyframes cd-dlg-fade { from { opacity: 0; } }
@keyframes cd-dlg-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes cd-dlg-up { from { transform: translateY(100%); } }
@media (max-width: 640px) {
  .cd-dlg-back { place-items: end stretch; padding: 0; }
  .cd-dlg { width: 100%; max-height: 90vh; border-radius: 20px 20px 0 0; padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px)); animation: cd-dlg-up .22s ease-out; }
  .cd-dlg.danger { border-top-width: 5px; }
  .cd-dlg-grab { display: block; width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 99px; background: var(--cd-outline, #d9d6d0); }
  .cd-dlg-acts { flex-direction: column-reverse; }
  .cd-dlg-acts .cd-b { width: 100%; min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .cd-dlg-back, .cd-dlg { animation: none; } }