/* Ratably — the in-page dialog (ratably-dialog.js), used for questions and notices. */
.dlg-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(16, 32, 47, .55); overflow-y: auto }
.dlg { width: min(460px, 100%); background: var(--sheet); border: 1px solid var(--rule); border-top: 4px solid var(--green);
  border-radius: 6px; padding: 24px; box-shadow: 0 30px 60px -30px rgba(16, 32, 47, .6) }
.dlg-danger { border-top-color: var(--red) }
.dlg-title { font-size: 1.25rem; line-height: 1.2 }
.dlg-body { margin-top: 10px; color: var(--ink2); font-size: .98rem; line-height: 1.55; overflow-wrap: anywhere }
.dlg-field { display: grid; gap: 6px; margin-top: 16px }
.dlg-field-label { font-size: .85rem; font-weight: 600; color: var(--ink2) }
.dlg-input { width: 100%; box-sizing: border-box; min-height: 44px; padding: .6em .8em; font: inherit; color: var(--ink);
  background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 3px }
.dlg-input:focus-visible { outline: 3px solid var(--green); outline-offset: 1px }
.dlg-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 22px }
.dlg-foot .btn { min-height: 44px }
.btn.dlg-danger-btn { background: var(--red); border-color: var(--red); color: #fff }
.btn.dlg-danger-btn:hover:not(:disabled) { background: #a52a21; border-color: #a52a21 }
.dlg-open { overflow: hidden }
@media (max-width: 480px) { .dlg-foot { flex-direction: column-reverse } .dlg-foot .btn { width: 100% } }