/* Generic modal (shared/_modal.html): overlay, dialog and close button. The overlay starts with the
   hidden attribute (see [hidden] in utilities.css); the Modal class removes it and sets body.modal-open. */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(6,10,18,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px}
.modal{position:relative;background:var(--card);color:var(--ink);width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;border-radius:10px;padding:34px;box-shadow:0 40px 100px -30px rgba(0,0,0,.5)}
.modal:focus{outline:none}
.modal-wide{width:min(900px,100%)}
.modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.modal-close:hover{border-color:var(--accent)}
.modal-close svg{width:14px;height:14px}
.modal h3{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.02em;margin:8px 0 6px}
.modal .sub-t{color:var(--muted);font-size:14px}
body.modal-open{overflow:hidden}

@media (max-width:600px){
  .modal{padding:24px 16px}
  .modal h3{font-size:24px}
}