/* modal.css — the centred dialog and the backdrop behind it.
 *
 * A sheet: it rises from below, slightly small, on the spring curve, over a
 * backdrop that is both dimmed and blurred. The blur is the point rather than
 * decoration — it is what says the page underneath is still there and will
 * come back, which is the difference between a dialog and a new screen. */
body.modal-open{overflow:hidden}
.modal-backdrop{position:fixed;inset:0;z-index:70;background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;animation:scrimIn 180ms ease-out both}
.modal{width:100%;max-width:500px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;overflow:hidden;background:var(--raised);border:1px solid var(--line);border-radius:var(--r-2xl);box-shadow:var(--shadow-lg);animation:modalIn 320ms var(--ease-spring) both}
.modal .head{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 16px;border-bottom:1px solid var(--line-mid)}
.modal .head h2{font-size:16px;font-weight:600;margin:0;letter-spacing:-.02em}
.modal .head .sub{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.modal .x{margin-left:auto;flex:0 0 auto;width:30px;height:30px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal .x:hover{background:var(--hover);color:var(--ink)}
.modal .x:active{transform:scale(.9)}
.modal .body{padding:20px 22px;overflow-y:auto}
.modal .foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 22px;border-top:1px solid var(--line-mid);background:var(--surface-alt)}
/* Set by ui/modal.js when the dialog is only being repainted, not opened. */
.modal-backdrop.instant,.modal-backdrop.instant .modal{animation:none}
/* The sentence in the "are you sure?" dialog — its whole body. */
.modal .confirm-text{margin:0;font-size:14px;line-height:1.6;color:var(--ink-3);text-wrap:pretty}