/* Cover (3:1) with the logo over its corner, the way the group header looks in the app. */
.cover{
  position:relative;aspect-ratio:3/1;border-radius:14px;margin-bottom:44px;
  background:#e8e8ef center/cover no-repeat;
}
.cover > .image-btn{position:absolute;top:10px;right:10px}
.logo{
  position:absolute;left:16px;bottom:-36px;width:80px;height:80px;border-radius:50%;
  background:#d9d9e3;border:3px solid #fff;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
}
.logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.logo .image-btn{position:relative;margin-bottom:6px;padding:3px 8px;font-size:12px}
.image-btn{
  background:rgba(31,31,31,.72);color:#fff;border:none;border-radius:999px;
  padding:6px 12px;font:600 13px 'Roboto Flex',system-ui,sans-serif;cursor:pointer;
}
/* Done page: the group as it will look in the app, nothing to press. */
#done h1{margin-top:8px}
.group-logo{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;background:var(--line)}
#done .group{justify-content:flex-start}
.thanks{margin:28px 0 24px;padding:16px 18px;border-radius:14px;background:#f4f4ff;font-weight:600}
/* Panel rows: name and details on top, actions in one row underneath, the same on every width. */
#group-list .group{flex-direction:column;align-items:stretch;gap:12px}
#group-list .group-actions{justify-content:flex-start}
/* Delete lives at the bottom of the edit form, behind an in-page confirmation. */
.danger-zone{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.delete-confirm p{margin:0 0 14px;font-size:15px}
.btn-danger{background:var(--danger);color:#fff;border:1px solid var(--danger)}
/* The picked zone on a map, under the zone field. Its own stacking context keeps Leaflet's panes under the list. */
.zone-map{position:relative;z-index:0;height:240px;margin-top:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#e8e8ef}
@media(min-width:600px){.zone-map{height:280px}}