/* The question box from public/js/ask.js. Stands alone: the draft room does not load app.css. */
dialog.ask { width: min(420px, calc(100vw - 32px)); padding: 0; color: #f4f4f6; background: #111114; border: 1px solid rgba(255, 255, 255, .17); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .95); }
dialog.ask::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(4px); }
dialog.ask[open] { animation: ask-in .28s cubic-bezier(.16, 1, .3, 1); }
@keyframes ask-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.ask form { display: grid; justify-items: center; gap: 16px; padding: 30px 24px 22px; text-align: center; }
.ask-icon { display: grid; place-items: center; width: 60px; height: 60px; color: #f472b6; background: rgba(233, 30, 99, .16); }
.ask.danger .ask-icon { color: #f87171; background: rgba(248, 113, 113, .14); }
.ask p { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.6; text-wrap: balance; overflow-wrap: anywhere; }
.ask-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 6px; }
.ask-actions button { min-height: 46px; padding: 0 16px; font: inherit; font-size: 15.5px; font-weight: 700; color: #f4f4f6; background: rgba(255, 255, 255, .075); border: 1px solid rgba(255, 255, 255, .17); border-radius: 0; cursor: pointer; transition: background .2s, border-color .2s; }
.ask-actions button:hover { background: rgba(255, 255, 255, .13); }
.ask-actions button[value='yes'] { color: #fff; background: #d81b60; border-color: #d81b60; }
.ask-actions button[value='yes']:hover { background: #e91e63; }
.ask.danger .ask-actions button[value='yes'] { background: #dc2626; border-color: #dc2626; }
.ask.danger .ask-actions button[value='yes']:hover { background: #ef4444; }
.ask-actions button:focus-visible { outline: 2px solid #f472b6; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { dialog.ask[open] { animation: none; } }