/* Modal bottom sheet (js/ui/name-dialog.js). Slides up from the bottom on
   phones; centered card on wider screens. */

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(23, 21, 47, .42);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade-in .18s ease-out;
}
.sheet {
  width: 100%; max-width: 440px;
  background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -16px 40px rgba(40, 20, 110, .22);
  padding: var(--s5) max(20px, env(safe-area-inset-right, 0px))
           calc(var(--s5) + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: var(--s4);
  animation: sheet-up .26s cubic-bezier(.2, .9, .3, 1.1);
}
.sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); align-self: center; margin-top: -6px; }
.sheet-head { display: flex; align-items: center; gap: var(--s3); }
.sheet-head svg.mascot { width: 62px; height: 52px; flex: none; }
.sheet-head h2 { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.2; }
.sheet-head p { margin: 2px 0 0; color: var(--ink-2); font-size: 13.5px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 700; font-size: 14px; }
.field input {
  border: 2px solid var(--lilac); border-radius: var(--r-sm); background: var(--bg);
  padding: 14px 14px; font-size: 17px; font-weight: 600; outline: 0; min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus { border-color: var(--purple); box-shadow: 0 0 0 4px var(--lilac-50); }
.field[data-invalid="true"] input { border-color: var(--danger); }
.field .meta { display: flex; justify-content: space-between; gap: var(--s2); font-size: 12.5px; color: var(--ink-3); }
.field .error { color: var(--danger); font-weight: 700; }

.suggest { display: flex; flex-wrap: wrap; gap: var(--s2); }
.suggest button {
  border: 0; border-radius: var(--r-pill); padding: 8px 14px;
  background: var(--lilac-50); color: var(--purple); font-weight: 700; font-size: 13.5px;
}
.suggest button:active { transform: scale(.96); }

.sheet-actions { display: flex; gap: var(--s2); }
.sheet-actions .btn-primary { flex: 1; }
.sheet-actions .btn[disabled] { opacity: .45; box-shadow: none; cursor: not-allowed; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }

@media (min-width: 520px) {
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: var(--r-lg); }
  .sheet .grab { display: none; }
}
/* role=dialog lives on .sheet; the form inside lays out as if it were the sheet */
.sheet-form { display: contents; }