/* GROWLMASTER V2: A PERSON'S PAGE, AS INSTAGRAM'S (ProfilePane.astro; Maayan, 2026-11-08: "think about instagram. make it
   look like it"). Its layout only; every part is the kit's (ui.css), every value a token (tokens.css).
   One row: the face on the left (start), the nickname, @handle and the page's one small action on its right; then one
   grid of big square pictures, three across, a growl's name over its foot; Log in is the frame's one header's (SiteHead). */

.gm2-profile { gap: var(--g-5); }

/* the row: face, then who they are */
.gm2-profile__head { display: flex; align-items: center; gap: var(--g-5); text-align: start; }
.gm2-profile__head > .g-avatar { flex: none; }
.gm2-profile__who { display: flex; flex-direction: column; gap: var(--g-1); min-width: 0; flex: 1 1 auto; }
.gm2-profile__name { margin: 0; font-size: var(--g-t-title); font-weight: var(--g-w-bold); line-height: 1.15; overflow-wrap: anywhere; }
.gm2-profile__handle { margin: 0; }
.gm2-profile__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-2); margin-top: var(--g-2); }
.gm2-profile__edit { position: relative; display: inline-flex; }
/* v1's notices: the dot by Edit profile, how many new from the people they follow */
.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-profile__facts { margin: var(--g-1) 0 0; display: flex; flex-wrap: wrap; gap: var(--g-1) var(--g-4); font-size: var(--g-t-sub); }

/* the grid: big pictures, three across, edge to edge on a phone; a growl's name over its picture's foot */
.gm2-profile__grid { display: flex; flex-direction: column; gap: var(--g-4); }
.gm2-profile__grid > .g-thinglist[data-layout="grid"] { grid-template-columns: repeat(3, 1fr); gap: var(--g-1); }
@media (max-width: 899px) { .gm2-profile__grid > .g-thinglist { margin-inline: calc(-1 * var(--g-margin)); } }
.gm2-profile__grid .g-thingcard { position: relative; padding: 0; gap: 0; border-radius: 0; background: var(--g-surface-2); box-shadow: none; overflow: hidden; }
.gm2-profile__grid .g-thingcard__pic { border-radius: 0; }
.gm2-profile__grid .g-thingcard__body { position: absolute; inset: auto 0 0; padding: var(--g-5) var(--g-2) var(--g-2);
  background: linear-gradient(to top, var(--g-bt-table-shade), transparent); color: var(--g-on-dark); pointer-events: none; }
.gm2-profile__grid :is(.g-thingcard__facts, .g-thingcard__counts) { display: none; }
.gm2-profile__grid .g-thingcard__name { font-size: var(--g-t-sub); }

.gm2-profile__notices { display: flex; flex-direction: column; gap: var(--g-3); text-align: start; }