/* GROWLMASTER V2'S LOBBY, ITS SOCIAL PARTS (W1): the Growls tab, a person's page, Join and Edit profile. Their layout
   only; every part is the kit's (ui.css) and every value a token (tokens.css). What shows by a state is each part's own
   rule (stateRule.ts): a person's list by its pane's data-profile-view. */

/* Tables: the language menu (the site's one LangPicker) over the picture's corner */
.gm2-herobox { position: relative; }

/* Growls: its kind and its search side by side on a wide screen */
.gm2-growls__find { display: flex; flex-direction: column; gap: var(--g-3); }
@media (min-width: 900px) { .gm2-growls__find { flex-direction: row; align-items: flex-end; } .gm2-growls__find > * { flex: 1; } }

/* a person: their handle under their name, then their two lists, one at a time (its Segmented says which) */
.gm2-me__handle { margin: calc(-1 * var(--g-3)) 0 0; }
.gm2-person__lists { align-self: stretch; display: flex; flex-direction: column; gap: var(--g-4); text-align: start; margin-top: var(--g-2); }
.gm2-person__list { display: none; flex-direction: column; gap: var(--g-4); }
/* v1's notices: the dot by Edit profile (how many new), the growls of the people they follow */
.gm2-me__edit { position: relative; display: flex; flex-direction: column; align-self: stretch; }
.gm2-notices { position: absolute; top: calc(-1 * var(--g-2)); inset-inline-end: calc(-1 * var(--g-2)); min-width: var(--g-icon-box); padding: 0 var(--g-1);
  border-radius: var(--g-r-round); background: var(--g-danger); color: var(--g-on-accent); font-size: var(--g-t-caption); font-weight: var(--g-w-bold); text-align: center; }
.gm2-notices[hidden] { display: none; }
.gm2-person__notices { align-self: stretch; text-align: start; display: flex; flex-direction: column; gap: var(--g-3); }

/* Join: the code, OR, the camera's square */
.gm2-join { display: flex; flex-direction: column; gap: var(--g-4); }
.gm2-join__or, .gm2-join__hint { margin: var(--g-3) 0; text-align: center; font-size: var(--g-t-caption); letter-spacing: var(--g-track-caps); }
.gm2-join__cam { display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--g-r); corner-shape: squircle; background: var(--g-fill); }
.gm2-join__cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm2-join__cam:has(.gm2-join__why) { align-content: center; gap: var(--g-3); }   /* Open Camera, and why it did not open (join.js) */
.gm2-join__why { margin: 0; padding-inline: var(--g-4); text-align: center; }

/* Edit profile: the faces in a grid (the one chosen ringed), the nickname's three words, Save */
.gm2-edit { display: flex; flex-direction: column; gap: var(--g-3); }
.gm2-edit__faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--g-face-lg), 1fr)); gap: var(--g-2); justify-items: center; }
.gm2-edit__faces .g-iconbtn { width: auto; height: auto; padding: var(--g-1); border-radius: var(--g-r-round); }
.gm2-edit__faces .g-iconbtn[aria-pressed="true"] { box-shadow: var(--g-ring); }
.gm2-edit__nick { display: flex; flex-direction: column; gap: var(--g-3); }